Tin học 12 - Bài 7 - HTML và cấu trúc trang web

Tóm tắt nội dung bài 7:

1. TRANG WEB VÀ HTML

- HTML là viết tắt của cụm từ Hypertext Markup Language (ngôn ngữ đánh dấu siêu văn bản), là một bộ quy tắc dùng để thiết lập cấu trúc và hiển thị nội dung trang web.

- Trang web được thiết lập từ các tệp văn bản thường có phần mở rộng là .html hoặc .htm được gọi là trang HTML.

- Nội dung trên trang HTML bao gồm phần văn bản (text) và các kí tự đánh dấu đặc biệt nằm trong cặp dấu “<”, “>”. Các kí tự này được gọi là thẻ đánh dấu (còn gọi là thẻ HTML hay tag).

- Một số thẻ đánh dấu HTML trong ví dụ ở Hình 7.1b là <head>, <body>, <h1>, <p>, <div>,…

a) Thẻ đánh dấu HTML

- Khái niệm: Thẻ đánh dấu HTML (tag) là các thành phần chính tạo thành ngôn ngữ đánh dấu siêu văn bản. Mỗi loại thẻ có một tên riêng và có ý nghĩa nhất định trong định dạng nội dung của trang web.

- Cấu trúc: Thẻ đánh dấu HTML được viết trong cặp dấu “<”, “>”.

- Lưu ý:

+ Tên thẻ HTML không phân biệt chữ hoa, chữ thường nhưng mặc định tên thẻ được viết chữ thường.

+ Các thẻ có thể lồng nhau.

Ví dụ: Thẻ <em> được lồng bên trong thẻ <p>:

+ Mỗi thẻ có thể đi kèm các thông tin thuộc tính của thẻ. 

Ví dụ: Thuộc tính màu được gán thêm cho thẻ <p>, do đó toàn bộ đoạn văn bản này có màu đỏ khi hiển thị trên trình duyệt:

+ Phần lớn các thẻ đều là thẻ đôi, tức là có thể bắt đầu (opening tag) và thẻ kết thúc (closing tag). Vị trí kết thúc thẻ có thêm dấu “/” chẳng hạn </p>.

+ Có một số loại thẻ đơn, tức là chỉ có thẻ bắt đầu. Các thẻ đơn thường có dạng <tên thẻ> hoặc <tên thẻ/>, ví dụ <hr/> (dòng kẻ ngang), <br/> (ngắt xuống dòng),…

+ HTML và trình duyệt không nhận biết được nhiều dấu cách. Nếu gõ nhiều dấu cách máy sẽ hiểu là chỉ có một dấu cách. Trình duyệt cũng không nhận biết dấu xuống dòng khi người dùng nhấn phím Enter trong quá trình soạn thảo.

b) Phần tử HTML

- Khái niệm: Phần tử HTML (element) là khái niệm cơ bản của trang HTML. Thông thường, một phần tử được định nghĩa bởi thẻ bắt đầu, thẻ kết thúc và phần nội dung nằm giữa cặp thẻ này.

- Lưu ý: Các thẻ đơn cùng với nội dung của nó cũng được gọi là phần tử HTML.

Phần tử HTML có thể hiểu là toàn bộ phần thẻ và nội dung của thẻ. Mỗi tệp HTML là tập hợp các phần tử HTML.

- Ý nghĩa: Các phần tử HTML đóng vai trò quan trọng tạo nên cấu trúc và nội dung của trang web.

- Trong ví dụ ở Hình 7.1b:

+ Hai phần tử <head> và <body> rời nhau.

+ Phần tử <div> chứa bên trong bốn phần tử HTML khác.

Các phần tử HTML có thể độc lập, rời nhau hoặc lồng nhau.

- Lưu ý:

+ Dòng đầu tiên của mỗi tệp HTML có dạng <!DOCTYPE html> có vai trò thông báo kiểu của tệp là html và không được xem là phần tử HTML.

+ Phần tử HTML đặc biệt có ý nghĩa chú thích trong tệp HTML có dạng:

2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML

- Mỗi tệp HTML bao gồm nhiều phần tử HTML, các phần tử HTML có thể lồng nhau.

- Quan hệ lồng nhau giữa các phần tử HTML có thể hình dung như quan hệ cha – con hay quan hệ giữa các nút của một sơ đồ hình cây.

Hình 7.3. Cấu trúc cơ bản của một tệp HTML

1. Dòng đầu tiên, <!DOCTYPE html> có thể coi là dòng khai báo html của tệp.

2. Phần tử <html>:

• Là bắt buộc, là phần tử gốc và chứa tất cả các phần tử HTML còn lại của trang web.

• Là phần tử gốc (root) trong sơ đồ hình cây HTML.

• Thường chứa hai phần tử con <head> và <body>.

3. Phần tử <head>:

• Chứa các phần tử có liên quan chung đến toàn bộ trang web.

• Trong <head> thường có phần tử <title> và một số phần tử khác như <meta>, <style> và <script>.

4. Phần tử <body> chứa tất cả các phần tử còn lại là thông tin của trang web.

5. Phần tử <meta>:

• Nằm trong phần tử <head>.

• Mô tả các thông tin bổ sung của trang web như cách mã hoá Unicode, từ khoá dùng để tìm kiếm trang, tên tác giả trang web.

  Ví dụ: Trong Hình 7.3, phần tử

  mô tả cách mã hoá văn bản trên trang web theo mã UTF-8.

6. Phần tử <title>:

• Nằm trong phần tử <head>.

• Mô tả tên của trang web hiện thời.

• Phải là văn bản thường và không được phép chứa các phần tử con.

7. Nhóm các thẻ định dạng văn bản thường dùng là các thẻ tiêu đề theo thứ tự giảm cấp dần là <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Thẻ <p> mô tả một đoạn văn bản hoàn chỉnh.

- Lưu ý: HTML không nhận biết kí tự xuống dòng (nhấn phím Enter) để kết thúc đoạn văn bản (paragraph) như các phần mềm soạn thảo văn bản thông thường.

- Cấu trúc chung của một trang web có thể hình dung như một cây thông tin các phần tử HTML có quan hệ cha con (lồng nhau), nút gốc (root) là phần tử HTML.

Hình 7.4. Cây thông tin của trang web ở Hình 7.2 SGK

Xem video tóm tắt bài học:

Trắc nghiệm: (bấm vào link bên dưới để làm bài)

https://azota.vn/de-thi/gz5yye 

Trắc nghiệm + Đúng sai:

https://azota.vn/de-thi/jtnqd3