15 Code web HTML đơn giản & giao diện đẹp cho người mới học
Hiện nay, các trang web thường được thiết kế với giao diện hấp dẫn và thân thiện với người dùng. Đối với những người mới tiếp cận với lập trình và web, việc hiểu về 15 đoạn mã HTML cơ bản là rất quan trọng. Điều này sẽ giúp bạn tự tạo và chỉnh sửa một trang web cơ bản, hoặc sử dụng các mã đã có trên nền tảng WordPress.
Trong bài viết này, chúng ta sẽ tìm hiểu về 15 đoạn mã HTML kèm ví dụ từ BiTi Hightech.
Contents
<!DOCTYPE html>Mặc dù không phải là một thẻ HTML thực sự, tuy nhiên, bạn cần biết đến <!DOCTYPE html> vì nó được sử dụng ở đầu mỗi tài liệu HTML để trình duyệt biết đây là mã HTML.
<title>Thẻ <title> định nghĩa tiêu đề của trang web, giúp xác định tiêu đề của tài liệu. Dưới đây là ví dụ về thẻ <title> nằm trong thẻ <head>:
<head>
<title>Website của tôi</title>
</head>
<meta>Thẻ <meta> được sử dụng để định nghĩa siêu dữ liệu, thông tin sẽ được hiển thị trên trang của bạn. Dưới đây là một số loại siêu dữ liệu phổ biến:
description – Mô tả cơ bản của trang.keywords – Từ khoá áp dụng cho trang.author – Tác giả của trang.viewport – Đảm bảo trang web có thể hiển thị trên tất cả các thiết bị.Dưới đây là ví dụ áp dụng cho trang này:
<meta name="description" content="Hướng dẫn căn bản về HTML">
<meta name="keywords" content="HTML, code, thẻ">
<meta name="author" content="Đỗ Tùng Lâm">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Thẻ viewport luôn có giá trị "width=device-width, initial-scale=1.0" để nội dung trang hiển thị tốt trên cả thiết bị di động và máy tính để bàn.
<body><body> chứa nội dung chính của tài liệu HTML, bao gồm mọi thứ trừ tiêu đề.
<body>
Điều gì đó bạn muốn hiển thị trên trang của bạn.
</body><h1><h1> định nghĩa tiêu đề cấp 1 của trang web. Tương tự, <h2>, <h3>, <h4>, <h5>, <h6> giúp xác định các tiêu đề cấp độ khác nhau. Dưới đây là ví dụ về tiêu đề cấp 1, cấp 2, cấp 3:
<h1>Tiêu đề quan trọng và lớn</h1>
<h2>Tiêu đề nhỏ hơn một chút</h2>
<h3>Tiêu đề phụ</h3>Kết quả:
<p><p> cho phép bạn bắt đầu một đoạn văn mới, với hai dòng trống ở giữa. Dưới đây là ví dụ về khoảng cách giữa các dòng trong thẻ <p>:
<p>Đoạn văn đầu tiên.</p>
<p>Đoạn văn thứ hai.</p>Kết quả:
Đoạn văn đầu tiên.
Đoạn văn thứ hai.
<br><br> tạo một ngắt dòng đơn:
<p>Dòng đầu tiên.<br>
Dòng thứ hai (gần dòng đầu tiên).</p>Kết quả:
Dòng đầu tiên.
Dòng thứ hai (gần dòng đầu tiên).
Lưu ý: bạn có thể thấy thẻ này được viết thành <br /> hoặc <br/>. Cả hai đều có chức năng tương tự (dấu gạch chéo để thẻ đọc được trong XHTML).
<strong>Thẻ này xác định văn bản quan trọng, có nghĩa là văn bản sẽ được bôi đậm. Tuy nhiên, bạn có thể sử dụng CSS để hiển thị văn bản <strong> khác nhau. Một cách đơn giản là sử dụng <strong> để in đậm văn bản:
<strong>Điều quan trọng bạn muốn nói.</strong>Kết quả:
Điều quan trọng bạn muốn nói.
Nếu đã quen với thẻ <b> để in đậm văn bản, bạn vẫn có thể sử dụng nó. Tuy nhiên, không có gì đảm bảo rằng nó sẽ tiếp tục hoạt động trong các phiên bản HTML tương lai. Hiện tại, nó vẫn hoạt động.
<em>Giống như thẻ <b> và <strong>, <em> và <i> cũng tương tự nhau. Thẻ <em> xác định văn bản được nhấn mạnh, nghĩa là nó sẽ được in nghiêng. Một lần nữa, sử dụng CSS để làm các văn bản được nhấn mạnh hiển thị khác nhau.
<em>Một dòng được nhấn mạnh.</em>Kết quả:
Một dòng được nhấn mạnh.
Thẻ <i> vẫn hoạt động, nhưng có thể không được sử dụng trong các phiên bản HTML trong tương lai.
<a>Thẻ <a> hoặc anchor cho phép tạo liên kết. Một liên kết đơn giản như sau:
<a href="//www.quantrimang.com/">Đến Quantrimang</a>Kết quả:
Thuộc tính href xác định đích đến của liên kết. Trong nhiều trường hợp, đây sẽ là một trang web khác. Nó cũng có thể là một tập tin như hình ảnh hoặc file PDF. Các thuộc tính hữu ích khác bao gồm target và title. Thuộc tính target được sử dụng để mở liên kết trong một tab hoặc cửa sổ mới, như sau:
<a href="//www.quantrimang.com/" target="_blank">Mở Quantrimang trong tab mới</a>Kết quả:
Thuộc tính title tạo một chú giải công cụ. Di chuột qua liên kết bên dưới để xem ý nghĩa của nó.
<a href="//www.quantrimang.com/" title="Đây là gợi ý thú vị">Di chuột qua đây</a>Kết quả:
<img>Sử dụng thẻ <img> để nhúng hình ảnh vào trang của bạn. Cách đơn giản nhất là chỉ cần thêm nguồn hình ảnh vào thuộc tính src, như sau:
<img src="/photos/image/2023/12/anh-html-3.jpg">Kết quả:
Tuy nhiên, có một số thuộc tính khác mà bạn có thể sử dụng như height, width và alt.
<img src="/photos/image/2023/12/anh-html-3.jpg" width="320" alt="Tên hình ảnh">Kết quả:
Thuộc tính height và width xác định chiều cao và chiều rộng của hình ảnh. Nhìn chung, chỉ cần đặt một trong hai kích thước, sẽ tự động điều chỉnh kích thước còn lại. Nếu cả hai đều được sử dụng, hình ảnh có thể bị méo hoặc biến dạng.
Thẻ alt chỉ cho trình duyệt biết văn bản nào sẽ hiển thị nếu không thể hiển thị được hình ảnh. Điều này rất hữu ích cho những người dùng có kết nối chậm hoặc sử dụng trình duyệt cũ.
<ol>Thẻ danh sách được sắp xếp cho phép tạo một danh sách có thứ tự. Thông thường, bạn sẽ nhìn thấy một danh sách đánh số. Mỗi mục trong danh sách nằm trong thẻ <li>, vì vậy danh sách sẽ trông như sau:
<ol>
<li>Mục đầu tiên</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
</ol>Kết quả:
Trong HTML5, bạn có thể sử dụng <ol reversed> để đảo ngược thứ tự của các con số và có thể thiết lập giá trị bắt đầu bằng thuộc tính start. Thuộc tính type cho phép xác định loại ký hiệu được sử dụng cho các mục trong danh sách. Nó có thể được đặt thành “1”, “A”, “a”, “I” hoặc “i”, tạo danh sách hiển thị theo ký hiệu chỉ định.
<ul>Danh sách không có thứ tự đơn giản hơn nhiều so với danh sách có thứ tự.
<ul>
<li>Mục đầu tiên</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
</ul>Kết quả:
Danh sách không theo thứ tự cũng có thuộc tính type và bạn có thể đặt nó thành “disc”, “circle” hoặc “square”.
<table>Nếu bạn muốn sử dụng hàng và cột để phân đoạn thông tin trên trang, bạn có thể sử dụng một số thẻ để tạo và chỉnh sửa bảng. Hãy xem ví dụ này:
<table>
<tbody>
<tr>
<th>Cột thứ nhất</th>
<th>Cột thứ hai</th>
</tr>
<tr>
<td>Hàng 1, cột 1</td>
<td>Hàng 1, cột 2</td>
</tr>
<tr>
<td>Hàng 2, cột 1</td>
<td>Hàng 2, cột 2</td>
</tr>
</tbody>
</table>Kết quả:
Mỗi thẻ code web HTML <th> đại diện cho một tiêu đề (có thể được bọc trong thẻ <thead>). Thẻ <tbody> xác định phần thân của bảng. Thẻ <tr> tạo một hàng bảng mới và thẻ <td> xác định một ô trong hàng đó.
<blockquote>Khi trích dẫn một trang web hoặc lời của người khác để tạo điểm khác biệt với phần còn lại của tài liệu, bạn có thể sử dụng thẻ <blockquote>. Chỉ cần đặt phần trích dẫn trong thẻ mở và đóng <blockquote>.
<blockquote>"I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain."</blockquote>Kết quả:
“I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.”
Định dạng chính xác được sử dụng có thể phụ thuộc vào trình duyệt hoặc CSS của trang web. Tuy nhiên, thẻ vẫn giữ nguyên.
Với 15 đoạn mã HTML này, bạn có thể tạo được một trang web đơn giản. Để xem các đoạn mã này được kết hợp như thế nào, bạn có thể tải mẫu HTML và mở nó trong trình duyệt hoặc trong một trình soạn thảo văn bản để xem cách chúng hoạt động chính xác.
This post was last modified on Tháng Năm 10, 2024 1:58 sáng
Khám phá và tận dụng tiềm năng kinh doanh trên nhiều nền tảng là điều…
Mobile App đang trở thành một phần thiết yếu trong cuộc sống hiện đại. Với…
Bạn đã bao giờ quên mật khẩu máy tính và không biết phải làm sao?…
Driver chính là phần mềm giúp hệ điều hành nhận diện phần cứng trên máy…
Hiện nay, lập trình viên không cần phải thực hiện toàn bộ công việc lập…
Lập trình ứng dụng cho iOS không chỉ đơn thuần là một quyết định khó…