Thứ Năm, 6 tháng 6, 2024

8. Các thẻ HTML thông dụng phần 3

Trong phần này chúng ta sẽ thảo luận thêm một số thẻ HTML dùng để sắp xếp bố cục cho trang web, tuy nhiên, khi thực hành, chúng ta sẽ không thật sự "thấy" sự thay đổi đáng kể nào.

Mặc dù vậy, với những dự án website thật sự nghiêm túc chứ không phải theo phong cách...tào lao thì những thẻ này rất hữu ích.

 

Thẻ <section>

Thẻ <section> định nghĩa một khu vực trong văn bản HTML. Thẻ <section> bên trong thường chứa một thẻ <hx> cùng với nội dung.



Thẻ <article>

Thẻ <article> định nghĩa một bài viết, một nội dung riêng biệt.
Thường sử dụng trong: Tin tức, Comment...



Thẻ <aside>

Thẻ <aside> định nghĩa nội dung bên ngoài nội dung chính (thường là phần sidebar). Thẻ <aside> có thể chứa tất cả các tag định dạng khác.



Thẻ <footer>

Thẻ <footer> định nghĩa khu vực footer (phần cuối) của trang web. Thường chứa các thông tin liên lạc của tác giả, copyright. 


Chúng ta sẽ gộp hết 4 thẻ trên vào mã HTML...tào lao của chúng ta 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>
 <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>

<section>
<h2>Thành phần và nguyên liệu</h2>
<p>Bún bò Huế có thành phần chính gồm bún, thịt bò, giò heo, huyết heo, và các loại rau sống như giá, rau thơm, bắp chuối bào. Nước dùng của bún bò Huế đặc biệt được nấu từ xương bò và giò heo, với hương vị đậm đà từ sả, mắm ruốc, và các loại gia vị khác như ớt, hành tím, gừng, và tỏi..</p>
</section>

<section>
<h2>Văn hóa và ý nghĩa</h2>
<p>Bún bò Huế không chỉ là một món ăn, mà còn là một phần của văn hóa và truyền thống Huế. Món ăn này thường xuất hiện trong các dịp lễ hội, cúng giỗ, và các bữa tiệc gia đình. </p>
</section>


<article>
<h2>Mì Quảng</h2>
<p>Mì Quảng thường được ăn kèm với rau sống và nước mắm ớt. Món ăn này có hương vị đậm đà, với sự kết hợp hài hòa giữa vị ngọt của nước lèo, vị béo của thịt và hải sản, vị giòn của bánh tráng, và vị thanh mát của rau sống. </p>
</article>

<article>
<h2>Bún bò Huế</h2>
<p>Khi thưởng thức bún bò Huế, người ta thường thêm một ít hành lá, hành tây thái mỏng, và ớt băm để tăng thêm hương vị. Một bát bún bò Huế đúng điệu sẽ có màu đỏ từ ớt, màu nâu của huyết heo, màu trắng của bún, và màu xanh của rau sống, tạo nên một bức tranh ẩm thực tuyệt đẹp.</p>
</article>

<article>
<h2>Cao lầu Hội An</h2>
<p>Cao lầu là một món ăn đặc sản nổi tiếng của Hội An, một thành phố cổ kính và quyến rũ nằm ở miền Trung Việt Nam. Món ăn này không chỉ thu hút bởi hương vị độc đáo mà còn bởi những câu chuyện văn hóa và lịch sử gắn liền với nó.</p>
</article>

<p>Cao lầu là sự kết hợp tinh tế giữa sợi mì, thịt heo, và các loại rau sống, tất cả được hòa quyện trong một hương vị đặc biệt.</p>


<aside>
<h4>Ẩm thực Việt Nam</h4>
<p>Ẩm thực Việt Nam là một kho tàng phong phú và đa dạng, phản ánh sự sáng tạo, tinh tế và tình yêu ẩm thực của người Việt.</p>
</aside>


<footer>
  <p>Tác giả: Đất Việt Lập Trình</p>
  <p><a href="https://www.datvietlaptrinh.com/">Website</a></p>
</footer>


</body>
</html>

 

Sử dụng OnlineGDB và bấm Run để thực thi, chúng ta hầu như khó thấy sự "khác nhau" giữa các thẻ.


 

Chúng ta tạm kết thúc phần các thẻ dùng sắp xếp bố cục ở đây. Phần sau chúng ta sẽ thảo luận về một số thẻ khác.

 

Phần tiếp theo

 

Phần trước

 

 



Không có nhận xét nào:

Đăng nhận xét