Chúng ta sẽ tiếp tục với một số thẻ HTML thông dụng khác và sẽ chấm dứt những dòng mã HTML ngày càng dài và...tào lao trong phần này.
Thẻ liên kết <a></a>
Thẻ liên kết <a></a> dùng để tạo một liên kết (link) từ trang web này sang trang web khác, hay dùng để mở ra một object nào đó (file words, excel, pdf, mp3, movie,...), thẻ này có một thuộc tính bắt buộc là href: Chứa đường dẫn cụ thể tới mục tiêu liên kết.
Ví dụ:
p><a href="https://www.datvietlaptrinh.com/">Đất Việt Lập Trình</a></p>
Thẻ hiển thị một hình ảnh <img>
Thẻ hiển thị một hình ảnh <img> dùng để nhúng một ảnh vào trang web, thẻ này có 2 thuộc tính bắt buộc:
src: Chứa đường dẫn tham chiếu tới image.
alt: Được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn).
Cấu trúc của thẻ <img > không có sử dụng thẻ đóng (không dùng <img></img>).
Đường dẫn tham chiếu tới image: Thông thường khi tạo website, bạn sẽ có nhiều hình ảnh và sẽ upload chúng vào một thư mục riêng trên Hosting. Tuy nhiên để thực hành, chúng ta sẽ tạm thời sử dụng một hình ảnh nào đó trên internet. Khi sử dụng hình ảnh, luôn lưu ý vấn đề bản quyền. Để chắc ăn, khi tìm kiếm chúng ta nên sử dụng Usage rights => Creative Commons licenses.
Ví dụ:
<p><img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Ochna_integerrima_02.JPG" alt="Hình hoa mai" width="500" height="500"></p>
Thẻ ngắt đoạn văn bản <br>
Thẻ ngắt đoạn văn bản <br> dùng để xuống dòng văn bản trong cùng một đoạn văn.
Cấu trúc của thẻ <br> không có sử dụng thẻ đóng (không dùng <br></br>).
Ví dụ, cùng với thẻ nhấn mạnh nội dung văn bản <em> </em>
<h1>Hai sắc hoa tigôn.</h1>
<p>Một mùa thu trước, mỗi hoàng hôn,<br>
Nhặt cánh hoa rơi chẳng thấy buồn,<br>
Nhuộm ánh nắng tà qua mái tóc,<br>
Tôi chờ người đến với yêu đương.</p>
<p><em>-T.T.Kh</em></p>
Chúng ta sẽ gộp hết mấy thẻ trên để "thả 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>
<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>
<p><a href="https://www.datvietlaptrinh.com/">Đất Việt Lập Trình</a></p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Ochna_integerrima_02.JPG" alt="Hình hoa mai" width="500" height="500"></p>
<h1>Hai sắc hoa tigôn.</h1>
<p>Một mùa thu trước, mỗi hoàng hôn,<br>
Nhặt cánh hoa rơi chẳng thấy buồn,<br>
Nhuộm ánh nắng tà qua mái tóc,<br>
Tôi chờ người đến với yêu đương.</p>
<p><em>-T.T.Kh</em></p>
</body>
</html>
Bấm Run để chạy trên OnlineGDB.
Chúng ta sẽ tạm dừng thảo luận các thẻ ở đây, và cũng chấm dứt những dòng mã HTML tào lao. Trong quá trình thực hành ở những phần sau, nếu có thẻ nào mới, chúng ta sẽ thảo luận sau.
Không có nhận xét nào:
Đăng nhận xét