HTML có hơn 80 thẻ, mỗi thẻ có một nhiệm vụ riêng, chúng ta sẽ không thảo luận hết tất cả các thẻ của HTML mà chỉ bàn một số thẻ quan trọng và được sử dụng nhiều.
Như phần trước chúng ta đã nói tới, mỗi trang web đều có các thành phần khác nhau như Menu, Banner, Footer, Sidebar...
- Phần Header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...
- Phần Navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation). Nói chung đây là Menu của trang web.
- Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar).
- Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.
- Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo...
- Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết, quảng cáo...
Chúng ta tạm chia các thẻ HTML làm hai nhóm:
- Nhóm các thẻ dùng để sắp xếp bố cục cho trang web.
- Nhóm các thẻ khác.
Các thẻ sắp xếp bố cục cho web page:
Thẻ định dạng tiêu đề <hx>
Dùng để định dạng cỡ chữ tiêu đề lớn hay nhỏ. Thẻ <hx> có giá trị từ <h1> tới <h6>, tiêu đề lớn nhất là <h1>, và tiêu đề nhỏ nhất là <h6>).
Chúng ta có thể sử dụng Online GDB cùng với mã HTML đã bắt đầu có "hơi hám"...tào lao để thử.
<!DOCTYPE html>
<html>
<head>
<title>Day La Trang Web Dau Tien</title>
<meta charset="UTF-8">
<meta name="description" content="Đất Việt Lập Trình. Tự học lập trình online miễn phí.">
</head>
<body>
<h1>Day La Trang Web Dau Tien</h1>
<p>Xin Chao!!</p>
<h1>Đất Việt Lập Trình (lớn nhất)</h1>
<h2>Đất Việt Lập Trình (lớn thứ nhì)</h2>
<h3>Đất Việt Lập Trình (lớn thứ ba)</h3>
<h4>Đất Việt Lập Trình (lớn thứ tư)</h4>
<h5>Đất Việt Lập Trình (lớn thứ năm)</h5>
<h6>Đất Việt Lập Trình (nhỏ nhất)</h6>
</body>
</html>
Bấm Run để thực thi
Thẻ định dạng đoạn văn bản <p>
Thẻ <p> giúp trình duyệt xác định được đoạn văn bản trong trang HTML
Trong đoạn mã HTML...tào lao, chúng ta đã có <p>Xin Chao!!</p> làm ví dụ, chúng ta có thể thêm đoạn van bản khác
<!DOCTYPE html>
<html>
<head>
<title>Day La Trang Web Dau Tien</title>
<meta charset="UTF-8">
<meta name="description" content="Đất Việt Lập Trình. Tự học lập trình online miễn phí.">
</head>
<body>
<h1>Day La Trang Web Dau Tien</h1>
<p>Xin Chao!!</p>
<h1>Đất Việt Lập Trình (lớn nhất)</h1>
<h2>Đất Việt Lập Trình (lớn thứ nhì)</h2>
<h3>Đất Việt Lập Trình (lớn thứ ba)</h3>
<h4>Đất Việt Lập Trình (lớn thứ tư)</h4>
<h5>Đất Việt Lập Trình (lớn thứ năm)</h5>
<h6>Đất Việt Lập Trình (nhỏ nhất)</h6>
<p>Một đoạn van bản khác</p>
</body>
</html>
Bấm Run để thực thi
Nội dung bên trong thẻ <p> không nhất thiết phải "nghiêm chỉnh" nằm trên một hàng, nó có thể nằm trên nhiều dòng và trình duyệt sẽ "lờ đi" việc bạn xuống hàng. Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Day La Trang Web Dau Tien</title>
<meta charset="UTF-8">
<meta name="description" content="Đất Việt Lập Trình. Tự học lập trình online miễn phí.">
</head>
<body>
<h1>Day La Trang Web Dau Tien</h1>
<p>Xin Chao!!</p>
<h1>Đất Việt Lập Trình (lớn nhất)</h1>
<h2>Đất Việt Lập Trình (lớn thứ nhì)</h2>
<h3>Đất Việt Lập Trình (lớn thứ ba)</h3>
<h4>Đất Việt Lập Trình (lớn thứ tư)</h4>
<h5>Đất Việt Lập Trình (lớn thứ năm)</h5>
<h6>Đất Việt Lập Trình (nhỏ nhất)</h6>
<p>Một đoạn van bản khác</p
<p>Một đoạn
van bản khác
có nhiều hàng</p>
</body>
</html>
Bấm Run để thực thi
Nếu muốn xuống hàng, chúng ta cần sử dụng thẻ <br>. Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Day La Trang Web Dau Tien</title>
<meta charset="UTF-8">
<meta name="description" content="Đất Việt Lập Trình. Tự học lập trình online miễn phí.">
</head>
<body>
<h1>Day La Trang Web Dau Tien</h1>
<p>Xin Chao!!</p>
<h1>Đất Việt Lập Trình (lớn nhất)</h1>
<h2>Đất Việt Lập Trình (lớn thứ nhì)</h2>
<h3>Đất Việt Lập Trình (lớn thứ ba)</h3>
<h4>Đất Việt Lập Trình (lớn thứ tư)</h4>
<h5>Đất Việt Lập Trình (lớn thứ năm)</h5>
<h6>Đất Việt Lập Trình (nhỏ nhất)</h6>
<p>Một đoạn van bản khác</p
<p>Một đoạn
van bản khác
có nhiều hàng</p>
<p>Một đoạn <br>van bản khác <br>có nhiều hàng</p>
</body>
</html>
Bấm Run để thực thi
Thẻ xác định danh sách <dl>, <dd>, và <dt>
- Danh sách là một tập hợp từ 2 mục trở lên, có cùng tính chất, cùng một nội dung tương tự nhau.
- Về mặt thể hiện, danh sách nằm ngang hay nằm dọc đều có tính chất như nhau, việc định dạng chiều ngang hay chiều dọc do CSS quản lý, không liên quan đến HTML/HTML5.
2 danh sách sau đây là tương đương nhau về mặt ý nghĩa HTML/HTML5:
- Bún chả
- Bún bò
- Mì Quảng
Và:
Bún chả, Bún bò, Mì Quảng
Thẻ xác định danh sách là một bộ gồm 3 thẻ:
- <dl></dl> là sự xác định danh sách. Ý muốn nói "Bắt đầu danh sách đây!"
- <dt></dt> là xác định một mục. Ví dụ "Mục một bún, mục hai mì, mục ba phở..."
- <dd></dd> là xác định một mô tả của một mục. Ví dụ "Bún gồm có chả và thịt..."
Chúng ta sẽ thêm vài dòng vào mã HTML...tào lao của chúng ta
<!DOCTYPE html>
<html>
<head>
<title>Day La Trang Web Dau Tien</title>
<meta charset="UTF-8">
<meta name="description" content="Đất Việt Lập Trình. Tự học lập trình online miễn phí.">
</head>
<body>
<h1>Day La Trang Web Dau Tien</h1>
<p>Xin Chao!!</p>
<h1>Đất Việt Lập Trình (lớn nhất)</h1>
<h2>Đất Việt Lập Trình (lớn thứ nhì)</h2>
<h3>Đất Việt Lập Trình (lớn thứ ba)</h3>
<h4>Đất Việt Lập Trình (lớn thứ tư)</h4>
<h5>Đất Việt Lập Trình (lớn thứ năm)</h5>
<h6>Đất Việt Lập Trình (nhỏ nhất)</h6>
<p>Một đoạn van bản khác</p
<p>Một đoạn
van bản khác
có nhiều hàng</p>
<p>Một đoạn <br>van bản khác <br>có nhiều hàng</p>
<h1>Thể hiện của 3 thẻ dl, dd, và dt </h1>
<p>Ba thẻ này dùng để thể hiện một danh sách (list):</p>
<dl>
<dt>Bún chả</dt>
<dd>Cá thu, chả chiên</dd>
<dt>Bún bò</dt>
<dd>Giò, tái, nạm</dd>
<dt>Mì Quảng</dt>
<dd>Tôm, thịt</dd>
</dl>
</body>
</html>
Bấm Run để thực thi
Không có nhận xét nào:
Đăng nhận xét