Bài 7: HTML và Cấu trúc trang Web

Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống

🎯 Mục tiêu bài học

Hiểu khái niệm HTML, thẻ HTML, phần tử HTML và mã nguồn trang Web.
Mô tả được cấu trúc cơ bản của một tệp HTML.
Phân biệt được thẻ HTML và phần tử HTML.
Biết sử dụng phần mềm Notepad, Notepad++, Sublime Text để soạn thảo HTML.
Tạo được trang Web đơn giản có hình ảnh và nội dung.

📌 1. Khởi động

Chúng ta đã từng xem nhiều trang Web khác nhau. Em có bao giờ thắc mắc các trang Web đó được tạo bằng gì chưa?

💡 Kết luận: HTML là ngôn ngữ giúp mô tả cấu trúc của trang Web, còn trình duyệt giúp hiển thị trang Web đó.

📚 2. Kiến thức mới

2.1. Khái niệm HTML

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản dùng để xây dựng cấu trúc trang Web.


<html>
  <head>
    <title>Trang đầu tiên</title>
  </head>
  <body>
    <h1>Chào mừng đến với Website của tôi!</h1>
    <p>Đây là đoạn văn đầu tiên.</p>
  </body>
</html>

2.2. Cấu trúc cơ bản của tệp HTML

Phần tử	Ý nghĩa	Ghi chú
<html>	Phần tử gốc	Chứa toàn bộ nội dung
<head>	Phần đầu	Chứa tiêu đề, CSS, script
<body>	Phần thân	Hiển thị nội dung chính
<p>	Đoạn văn bản	Tách đoạn văn
<h1>	Tiêu đề lớn	Từ <h1> đến <h6>

2.3. Cây thông tin HTML


html
 ├── head
 │    └── title
 └── body
      ├── h1
      └── p

2.4. Phần mềm soạn thảo HTML

Notepad: Cơ bản, có sẵn trong Windows.
Notepad++, Sublime Text: Có tô màu cú pháp, gợi ý lệnh.
Công cụ trực tuyến: W3Schools Tryit Editor

💻 3. Thực hành

3.1. Bài thực hành cơ bản

Yêu cầu: Tạo trang HTML giới thiệu bản thân.


<html>
<head><title>Giới thiệu bản thân</title></head>
<body>
<h1>Xin chào, tôi là Nguyễn Minh!</h1>
<p>Tôi học lớp 12A, trường THPT Phan Chu Trinh.</p>
</body>
</html>

3.2. Bài thực hành nâng cao

Đề bài: Tạo trang Web “Lịch sử phát triển HTML” có hình minh họa.


<html>
<head><title>Lịch sử phát triển HTML</title></head>
<body>
<h2>Lịch sử phát triển HTML</h2>
<p>HTML được phát triển bởi Tim Berners-Lee vào năm 1991.</p>
<img src="html_logo.png" alt="HTML Logo" width="200">
</body>
</html>

Thứ Bảy, 1 tháng 11, 2025