HTML là viết tắt của Hypertext Markup Language (Ngôn ngữ Đánh dấu Siêu văn bản) . Đây là một ngôn ngữ đặc biệt được sử dụng để xây dựng các trang web. Khi bạn truy cập một trang web, máy tính sẽ đọc HTML để hiển thị cho bạn các từ ngữ, hình ảnh và liên kết. Hãy hình dung HTML như những khối xây dựng nên một trang web. Giống như bạn sử dụng các mảnh ghép Lego để xây nhà hoặc xe hơi, chúng ta sử dụng thẻ HTML để xây dựng một trang web.
HTML là mã lệnh cho máy tính biết cách hiển thị văn bản, hình ảnh, video và liên kết trên trang web. Nó giống như việc hướng dẫn một người bạn đang vẽ tranh cho bạn. HTML sử dụng các từ trong dấu ngoặc nhọn, được gọi là thẻ , để đánh dấu phần đầu và phần cuối của một phần trang web.
Mọi trang web bạn truy cập đều sử dụng HTML theo một cách nào đó. Nếu không có HTML, sẽ không có trang web nào để bạn xem. HTML giúp sắp xếp nội dung và hướng dẫn máy tính cách hiển thị trang. Đây là điều đầu tiên bạn học được trong phát triển web vì nó giúp Internet hoạt động!
Tài liệu HTML có cấu trúc đặc biệt. Nó bắt đầu bằng một khai báo gọi là <code><!DOCTYPE html></code> để cho máy tính biết trang web sử dụng HTML. Sau đó, tài liệu được chia thành hai phần chính: phần đầu và phần thân.
Một tài liệu HTML rất đơn giản trông như thế này:
<code><!DOCTYPE html>
<html>
<đầu>
<title>Trang web đầu tiên của tôi</title>
</đầu>
<thân>
<p>Xin chào thế giới!</p>
</body>
</html> </code>
Trong ví dụ này, phần <head> cung cấp tiêu đề của trang và phần <body> là nơi bạn đặt nội dung hiển thị trên màn hình.
HTML sử dụng thẻ để đánh dấu các phần khác nhau của trang web. Thẻ là một từ nằm trong dấu ngoặc nhọn. Ví dụ: <code><p></code> cho máy tính biết phần tiếp theo là một đoạn văn. Khi bạn kết thúc đoạn văn, bạn sử dụng thẻ đóng <code></p></code> để biểu thị kết thúc.
Một phần tử trong HTML bao gồm một thẻ mở, một số nội dung và một thẻ đóng. Ví dụ:
<code><p>Đây là một đoạn văn.</p></code>
Mỗi thẻ hướng dẫn trình duyệt web cách hiển thị nội dung.
Có rất nhiều thẻ trong HTML. Một số thẻ phổ biến nhất là:
Thuộc tính cung cấp thông tin bổ sung về một phần tử HTML. Chúng được thêm vào thẻ mở bên trong dấu ngoặc nhọn của thẻ. Các thuộc tính phổ biến nhất là src và alt được sử dụng với thẻ hình ảnh.
Ví dụ, để thêm hình ảnh, bạn có thể viết:
<code><img src="picture.jpg" alt="Một bức ảnh đẹp"></code>
Tại đây, src cho trình duyệt biết tệp hình ảnh nằm ở đâu và alt cung cấp mô tả về hình ảnh nếu không thể hiển thị.
Tài liệu HTML được chia thành hai phần:
Liên kết cho phép bạn chuyển từ trang này sang trang khác. Trong HTML, chúng ta tạo liên kết bằng thẻ <a> . Thuộc tính href bên trong thẻ cho trình duyệt biết đích đến của liên kết.
Ví dụ:
<code><a href="https://www.example.com">Truy cập Example.com</a></code>
Khi bạn nhấp vào liên kết này, trình duyệt của bạn sẽ mở trang web example.com .
Hình ảnh làm cho trang web trở nên sống động và thú vị hơn. Để thêm hình ảnh, bạn sử dụng thẻ <img> . Lưu ý, thẻ <img> không có thẻ đóng.
Sau đây là cách bạn thêm hình ảnh:
<code><img src="sunflower.jpg" alt="Một bông hoa hướng dương rực rỡ"></code>
Mã này yêu cầu trình duyệt hiển thị hình ảnh hoa hướng dương. Thuộc tính src trỏ đến vị trí hình ảnh, và thuộc tính alt cung cấp mô tả về hình ảnh.
Danh sách sắp xếp thông tin theo một định dạng gọn gàng. Có hai loại danh sách chính trong HTML:
Sau đây là một ví dụ về danh sách không có thứ tự:
<mã><ul>
<li>Táo</li>
<li>Chuối</li>
<li>Quả anh đào</li>
</ul> </mã>
Và đây là một ví dụ về danh sách có thứ tự:
<mã><ol>
<li>Đầu tiên</li>
<li>Thứ hai</li>
<li>Thứ ba</li>
</ol> </mã>
Bảng giúp hiển thị thông tin theo hàng và cột. Chúng hữu ích khi bạn cần so sánh dữ liệu hoặc liệt kê các mục trong lưới.
Sau đây là một ví dụ đơn giản về bảng HTML:
<code><table border="1">
<tr>
<th>Tên</th>
<th>Tuổi</th>
</tr>
<tr>
<td>Alice</td>
<td>10</td>
</tr>
</bảng> </mã>
Trong bảng này, <tr> định nghĩa một hàng của bảng, <th> được sử dụng cho tiêu đề bảng (văn bản in đậm) và <td> được sử dụng cho dữ liệu bảng (các ô).
HTML cũng cho phép bạn thêm nội dung đa phương tiện như âm thanh và video. Với thẻ <audio> , bạn có thể chèn các tệp âm thanh. Với thẻ <video> , bạn có thể nhúng trình phát video vào trang web của mình.
Sau đây là ví dụ về mã nhúng video:
<code><video width="320" height="240" controls>
<nguồn src="movie.mp4" loại="video/mp4">
</video> </mã>
Mã này tạo một trình phát video với các nút để phát, tạm dừng hoặc thay đổi âm lượng. Thuộc tính controls yêu cầu trình duyệt hiển thị các nút này.
Mọi trang web trên internet đều được xây dựng bằng HTML. Hãy tưởng tượng bạn đang truy cập trang web của trường, một trang web trò chơi giải trí, hoặc đọc một câu chuyện trực tuyến. HTML hoạt động ngầm để sắp xếp văn bản, hình ảnh và các nội dung khác sao cho bạn có thể nhìn thấy rõ ràng.
Ví dụ, khi bạn nhìn thấy hình ảnh nhân vật hoạt hình yêu thích của mình trên mạng hoặc nhấp vào liên kết để đọc thêm về một chủ đề thú vị, HTML sẽ giúp bạn thực hiện điều đó.
Hãy cùng xem xét một dự án đơn giản. Hãy tưởng tượng bạn muốn tạo một trang web nhỏ về loài động vật yêu thích của mình, chẳng hạn như một chú mèo. Bạn có thể chèn tiêu đề, một đoạn văn về mèo, một hình ảnh và thậm chí là một liên kết đến trang web với những thông tin thú vị về mèo.
Mã HTML của bạn có thể trông như thế này:
<code><!DOCTYPE html>
<html>
<đầu>
<title>Con vật yêu thích của tôi</title>
</đầu>
<thân>
Tất tần tật về mèo
<p>Mèo rất tinh nghịch và mềm mại. Chúng thích ngủ và kêu gừ gừ. Nhiều người thích nuôi mèo làm thú cưng.</p>
<img src="cat.jpg" alt="Một chú mèo dễ thương">
<a href="https://www.catfacts.com">Tìm hiểu thêm về mèo</a>
</body>
</html> </code>
Dự án này sử dụng tiêu đề, đoạn văn, hình ảnh và liên kết. Nó cho thấy cách HTML được sử dụng để xây dựng một trang web hoàn chỉnh với nhiều phần.
Trong khi HTML xây dựng cấu trúc của một trang web, thì còn có những công cụ khác giúp trang web trông và hoạt động theo những cách thú vị.
Mặc dù ngày nay chúng ta đang học về HTML, nhưng việc biết về CSS và JavaScript giúp chúng ta hiểu cách tạo ra các trang web.
Khi khám phá HTML, bạn sẽ tìm thấy nhiều thẻ khác. Dưới đây là một vài thẻ bạn cần biết:
Các thẻ này giúp bạn kiểm soát tốt hơn cách nội dung của bạn hiển thị trên trang web.
HTML đã thay đổi rất nhiều kể từ khi ra đời. Nhiều thẻ và tính năng mới đã được bổ sung theo thời gian. Mỗi phiên bản HTML mới đều giúp việc tạo ra các trang web phức tạp và đẹp mắt trở nên dễ dàng hơn. Ngày nay, HTML kết hợp với CSS và JavaScript để xây dựng các trang web hiện đại, dễ sử dụng và trông tuyệt vời.
Sự phát triển này có nghĩa là HTML vừa dễ học vừa đủ mạnh để tạo ra mọi thứ, từ các trang web đơn giản đến các ứng dụng web phức tạp.
Học HTML tuy thú vị, nhưng việc đảm bảo an toàn trên Internet luôn quan trọng. Khi truy cập trang web hoặc khám phá nội dung trực tuyến, hãy nhớ luôn nhờ người lớn giúp đỡ nếu bạn không chắc chắn về điều gì đó. Sự an toàn của bạn là trên hết, và việc học HTML luôn phải là một trải nghiệm thú vị và an toàn.
Chúng ta hãy cùng xem một số thuật ngữ quan trọng mà bạn đã học hôm nay:
HTML được sử dụng trong nhiều bối cảnh thực tế. Dưới đây là một số ví dụ:
Những ví dụ này cho thấy HTML là một công cụ rất hữu ích trong nhiều khía cạnh của cuộc sống hàng ngày.
Hôm nay, chúng ta đã học HTML là viết tắt của Hypertext Markup Language (Ngôn ngữ Đánh dấu Siêu văn bản) . Đây là ngôn ngữ cơ bản được sử dụng để tạo trang web. Dưới đây là những điểm chính cần ghi nhớ:
HTML là nền tảng của mọi trang web bạn thấy trên internet. Với các khối xây dựng đơn giản như thẻ và thuộc tính, bạn có thể tạo ra các trang web thú vị và tương tác. Khi tiếp tục học, bạn sẽ thấy HTML giúp các trang web trở nên sống động như thế nào, biến internet thành một nơi hữu ích và thú vị để khám phá.
