Chúng ta sẽ tiếp tục với các thẻ HTML thông dụng.
Các thẻ danh sách có thứ tự và không có thứ tự <ol></ol> và <li></li>; <ul></ul> và <li></li>
Danh sách có thứ tự:
Là danh sách có sử dụng số, chữ biểu diễn thứ tự
Ví dụ 1:
1. Cafe Late
2. Cafe Espresso
3. Trà Lipton
4. Trà Matcha
5. Trà sữa
Ví dụ 2:
a) Bún bò Huế, b) Mì Quảng, c) Phở Hà Nội, d) Bún cá Nha Trang, e) Cháo lươn Nghệ An.
Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: <ol></ol> và <li></li>
Chúng ta sẽ tiếp tục "thêm mắm thêm muối" 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>
<ol>
<li>Soup yến thịt gà</li>
<li>Soup vây cá hồng xíu</li>
<li>Sashimi cá hồi</li>
<li>Bò xào nấm & dầu hào</li>
<li>Tôm sú kho tộ</li>
<li>Lẩu cá chình bông súng miền Tây</li>
<li>Miến xào tôm nồi đất</li>
</ol>
</body>
</html>
Vẫn "trung thành" với OnlineGDB, chúng ta bấm Run để thực thi
Danh sách không có thứ tự:
Là danh sách có nhiều mục tương đương nhau, không sử dụng số, chữ để biểu diễn thứ tự.
Ví dụ 1:
Cafe Late
Cafe Espresso
Trà Lipton
Trà Matcha
Trà sữa
Ví dụ 2:
Bún bò Huế, Mì Quảng, Phở Hà Nội, Bún cá Nha Trang, Cháo lươn Nghệ An.
Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>. Chúng ta sẽ tiếp tục với mã HTML tào lao như sau
<!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>
<ol>
<li>Soup yến thịt gà</li>
<li>Soup vây cá hồng xíu</li>
<li>Sashimi cá hồi</li>
<li>Bò xào nấm & dầu hào</li>
<li>Tôm sú kho tộ</li>
<li>Lẩu cá chình bông súng miền Tây</li>
<li>Miến xào tôm nồi đất</li>
</ol>
<ul>
<li>Bánh canh ghẹ Vũng Tàu</li>
<li>Thằn lằn Núi Bà Đen Tây Ninh</li>
<li>Chả cá Lã Vọng</li>
<li>Bánh Đa Cua Hải Phòng</li>
<li>Thịt Trâu Gác Bếp Tây Bắc</li>
<li>Phở Hà Nội</li>
<li>Bún bò Huế</li>
<li>Mì Quảng</li>
<li>Bún cá Nha Trang</li>
<li>Bánh Tráng Cuốn Thịt Heo Đà Nẵng</li>
<li>Súp Lươn Nghệ An</li>
<li>Cao Lầu Hội An</li>
</ul>
</body>
</html>
Bấm Run để thực thi, viết mã HTML mà nuốt nước miếng...lạ thật!
Thẻ <nav>
Thẻ <nav> định nghĩa liên kết điều hướng (navigation). Thẻ <nav> thường sử dụng cho menu, local link, pager link...Nội dung bên trong <nav> thường là một danh sách <ul> hoặc <ol>.
Mặc dù không được đẹp mắt, nhưng chúng ta vẫn tiếp tục thêm vào mã HTML 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>
<ol>
<li>Soup yến thịt gà</li>
<li>Soup vây cá hồng xíu</li>
<li>Sashimi cá hồi</li>
<li>Bò xào nấm & dầu hào</li>
<li>Tôm sú kho tộ</li>
<li>Lẩu cá chình bông súng miền Tây</li>
<li>Miến xào tôm nồi đất</li>
</ol>
<ul>
<li>Bánh canh ghẹ Vũng Tàu</li>
<li>Thằn lằn Núi Bà Đen Tây Ninh</li>
<li>Chả cá Lã Vọng</li>
<li>Bánh Đa Cua Hải Phòng</li>
<li>Thịt Trâu Gác Bếp Tây Bắc</li>
<li>Phở Hà Nội</li>
<li>Bún bò Huế</li>
<li>Mì Quảng</li>
<li>Bún cá Nha Trang</li>
<li>Bánh Tráng Cuốn Thịt Heo Đà Nẵng</li>
<li>Súp Lươn Nghệ An</li>
<li>Cao Lầu Hội An</li>
</ul>
<nav>
<a href="#">Điện thoại iPhone 15 Pro</a>
<a href="#">Điện thoại vivo Y01</a> |
<a href="#">Điện thoại Xiaomi Redmi 12</a> |
<a href="#"> Điện thoại Samsung Galaxy S23</a> |
<a href="#">Điện thoại Realme C55</a>
</nav>
</body>
</html>
Bấm Run để thực thi
Thẻ <header>
Thẻ <header> định nghĩa khu vực header (phần đầu) của trang. Lưu ý thẻ <header> khác với thẻ <head>. Thường được dùng cho phần giới thiệu, banner của website hay chứa các thành phần chuyển hướng (navigation), các menu.
Để dễ hình dung chúng ta thử đặt một hình ảnh (lưu ý bản quyền, chúng tôi đang dùng một hình ảnh Creative Commons licenses) vào bên trong thẻ <header>
<!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>
<header>
<h1>A heading here</h1>
<img src="https://images.pexels.com/photos/8899185/pexels-photo-8899185.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="700" height="100">
</header>
<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>
<ol>
<li>Soup yến thịt gà</li>
<li>Soup vây cá hồng xíu</li>
<li>Sashimi cá hồi</li>
<li>Bò xào nấm & dầu hào</li>
<li>Tôm sú kho tộ</li>
<li>Lẩu cá chình bông súng miền Tây</li>
<li>Miến xào tôm nồi đất</li>
</ol>
<ul>
<li>Bánh canh ghẹ Vũng Tàu</li>
<li>Thằn lằn Núi Bà Đen Tây Ninh</li>
<li>Chả cá Lã Vọng</li>
<li>Bánh Đa Cua Hải Phòng</li>
<li>Thịt Trâu Gác Bếp Tây Bắc</li>
<li>Phở Hà Nội</li>
<li>Bún bò Huế</li>
<li>Mì Quảng</li>
<li>Bún cá Nha Trang</li>
<li>Bánh Tráng Cuốn Thịt Heo Đà Nẵng</li>
<li>Súp Lươn Nghệ An</li>
<li>Cao Lầu Hội An</li>
</ul>
<nav>
<a href="#">Điện thoại iPhone 15 Pro</a>
<a href="#">Điện thoại vivo Y01</a> |
<a href="#">Điện thoại Xiaomi Redmi 12</a> |
<a href="#"> Điện thoại Samsung Galaxy S23</a> |
<a href="#">Điện thoại Realme C55</a>
</nav>
</body>
</html>
Bấm Run để thực thi mã HTML
Không có nhận xét nào:
Đăng nhận xét