BÀI 7 - HTML VÀ CẤU TRÚC TRANG WEB

0

 BÀI 7 - HTML VÀ CẤU TRÚC TRANG WEB



✅ HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu siêu văn bản dùng để tạo và hiển thị nội dung trên trang web. Đây là nền tảng của mọi website hiện nay. Trong bài viết này, chúng ta sẽ tìm hiểu về HTML, cấu trúc cơ bản của một trang web và công cụ soạn thảo HTML.

1. HTML Là Gì?

HTML và Trang Web

  • HTML giúp thiết lập cấu trúc và hiển thị nội dung trên trình duyệt.
  • Tệp HTML có phần mở rộng .html hoặc .htm.
  • Nội dung trang HTML bao gồm văn bản và thẻ đánh dấu (tag), nằm trong dấu < >. Ví dụ: <head>, <title>, <body>, <h1>, <p>.

2. Thẻ HTML và Phần Tử HTML

a) Thẻ HTML (HTML Tags)

Thẻ HTML là các thành phần chính trong một trang web, được viết trong cặp dấu < >.

✔ Cấu trúc thẻ HTML:

<tag> Nội dung </tag>

✔ Ví dụ:

<p>Đây là một đoạn văn bản</p>

✔ Các loại thẻ:

  • Thẻ đôi: Có thẻ mở <p> và thẻ đóng </p>.
  • Thẻ đơn: Không cần thẻ đóng, ví dụ: <br> (ngắt dòng), <hr> (dòng kẻ ngang).

📌 Lưu ý:

  • HTML không phân biệt chữ hoa, chữ thường, nhưng thông thường viết chữ thường.
  • Thẻ HTML có thể lồng nhau, ví dụ:


<p><em>Đoạn văn bản in nghiêng</em></p>

b) Phần Tử HTML (HTML Elements)

Phần tử HTML bao gồm thẻ mở, nội dung và thẻ đóng.

✔ Ví dụ về phần tử HTML:


<h1>Tiêu đề chính</h1>
<p
>Đây là một đoạn văn bản.</p>

✔ Phần tử HTML có thể lồng nhau:


<div>
    <h2>Tiêu đề</h2>
    <p>Nội dung đoạn văn</p>
</div>

📌 Lưu ý:

  • Dòng đầu tiên trong tệp HTML luôn là <!DOCTYPE html>, giúp trình duyệt nhận biết đây là trang HTML.
  • HTML không nhận biết dấu xuống dòng khi nhấn Enter, do đó cần dùng <br> để xuống dòng.

3. Cấu Trúc Cơ Bản Của Một Tệp HTML

Một tệp HTML cơ bản có cấu trúc sau:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang web</title>
</head>
<body>
    <h1>Chào mừng đến với HTML</h1>
    <p>Đây là nội dung trang web.</p>
</body>
</html>

Các phần chính trong trang HTML

✔ <!DOCTYPE html>: Xác định loại tài liệu HTML.
✔ <html>: Phần tử gốc chứa toàn bộ nội dung trang web.
✔ <head>: Chứa thông tin chung như tiêu đề, mã hóa, meta, CSS, JavaScript.
✔ <title>: Tiêu đề trang web hiển thị trên tab trình duyệt.
✔ <meta charset="UTF-8">: Định dạng ký tự hỗ trợ tiếng Việt.
✔ <body>: Chứa nội dung chính của trang web như tiêu đề, văn bản, hình ảnh, liên kết,…


4. Công Cụ Soạn Thảo HTML

a) Notepad (Windows) & TextEdit (MacOS)

  • Công cụ soạn thảo văn bản đơn giản, có sẵn trên hệ điều hành.
  • Lưu tệp dưới dạng .html và mở bằng trình duyệt để xem kết quả.

b) Phần Mềm Soạn Thảo Chuyên Dụng

✅ Notepad++

  • Hỗ trợ soạn thảo nhiều ngôn ngữ lập trình, có đánh dấu cú pháp.
  • Tải về tại: notepad-plus-plus.org

✅ Sublime Text

  • Trình soạn thảo mạnh mẽ, có giao diện thân thiện.
  • Tải về tại: sublimetext.com

c) Công Cụ Soạn Thảo HTML Trực Tuyến

Nếu không muốn cài đặt phần mềm, bạn có thể sử dụng các trang web hỗ trợ soạn thảo HTML trực tuyến:

🔹 W3Schools Tryit Editor
🔹 Tutorialspoint Online HTML Editor

📌 Ưu điểm của công cụ trực tuyến:
✔ Soạn thảo và xem kết quả ngay lập tức.
✔ Dễ dàng học và thực hành.

5. Kết Luận

HTML là nền tảng của thiết kế web. Hiểu về các thẻ HTML, phần tử HTML và cấu trúc trang web sẽ giúp bạn tạo ra các trang web cơ bản. Hãy thực hành với Notepad++, Sublime Text hoặc W3Schools để làm quen với HTML!

🚀 Bạn đã thử viết một trang HTML chưa? Hãy để lại bình luận chia sẻ trải nghiệm của bạn nhé! 💬

📌 Vì sao bài viết này chuẩn SEO?

✅ Tiêu đề hấp dẫn: Chứa từ khóa "HTML", "cấu trúc trang web".
✅ Tối ưu từ khóa: HTML, thẻ HTML, phần tử HTML, trang web, trình duyệt, công cụ soạn thảo.
✅ Dễ đọc, dễ hiểu: Sử dụng danh sách, ví dụ, mã code.
✅ Nội dung hữu ích: Cung cấp hướng dẫn chi tiết và công cụ thực hành.

🔔 Nếu thấy bài viết hữu ích, hãy chia sẻ để nhiều người cùng học nhé! 😊

Chủ đề:
Mới hơn Cũ hơn
Đọc tiếp:
Lên đầu trang