Nội dung chính Khoa học máy tính 12 kết nối bài 7: HTML và cấu trúc trang web
Hệ thống kiến thức trọng tâm bài 7: HTML và cấu trúc trang web sách Tin học 12 - Định hướng Khoa học máy tính sách Kết nối tri thức. Với các ý rõ ràng, nội dung mạch lạc, đi thẳng vào vấn đề, hi vọng người đọc sẽ nắm trọn kiến thức trong thời gian rất ngắn. Nội dung chính được tóm tắt ngắn gọn sẽ giúp thầy cô ôn tập, củng cố kiến thức cho học sinh. Bộ tài liệu có file tải về. Mời thầy cô kéo xuống tham khảo.
Xem: => Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
BÀI 7. HTML VÀ CẤU TRÚC TRANG WEB
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 “<”, “>”.
Thẻ | Ý nghĩa thẻ | Mã HTML | Hiển thị trên trình duyệt |
p | Đoạn văn bản | <p>Đây là đoạn văn bản.</p> | Đây là đoạn văn bản. |
h1 | Tiêu đề 1 của văn bản | <h1>Đây là tiêu đề 1</h1> | Đây là tiêu đề 1 |
- 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.
Dòng đầu tiên, <!DOCTYPE html> có thể coi là dòng khai báo html của tệp.
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>.
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>.
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.
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.
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.
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
3. PHẦN MỀM SOẠN THẢO HTML
Có nhiều cách để tạo tệp nguồn HTML. Ví dụ sử dụng các phần mềm soạn thảo như Notepad, Notepad++ hay Sublime Text. Ta cũng có thể soạn thảo trên các trang hỗ trợ tạo tệp HTML trực tuyến.
a) Phần mềm Notepad
- Đây là phần mềm soạn thảo văn bản đơn giản không định dạng, cung cấp một số chức năng chỉnh sửa cơ bản.
- Notepad có sẵn trên hệ điều hành Windows.
- Trên MacOS cũng có phần mềm tương tự Notepad là TextEdit.
b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở
- Phần mềm Notepad++
+ Notepad++ là phần mềm soạn thảo chương trình đa năng, hỗ trợ soạn thảo chương trình với nhiều ngôn ngữ khác nhau, trong đó có ngôn ngữ HTML.
+ Notepad++ là phần mềm miễn phí, mã nguồn mở và có thể tải về từ địa chỉ https://notepad-plus-plus.org/.
+ Lưu ý: Để phần mềm hiển thị và hỗ trợ soạn thảo HTML cần thực hiện lệnh Language 
H 
HTML để chọn ngôn ngữ HTML.
- Phần mềm Sublime Text
+ Sublime Text là phần mềm soạn thảo chương trình với nhiều ngôn ngữ khác nhau, tương tự như Notepad++.
+ Sublime Text có phiên bản cơ bản miễn phí và có thể tải về từ địa chỉ https://www.sublimetext.com/.
+ Lưu ý: Để phần mềm hiển thị và hỗ trợ soạn thảo HTML cần thực hiện lệnh View 
Syntax 
HTML để chọn ngôn ngữ HTML.
c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến
- Một cách phổ biến để soạn thảo HTML là sử dụng các trang hỗ trợ soạn thảo HTML trực tuyến.
- Để thực hiện theo cách này, yêu cầu máy tính có kết nối Internet và cài đặt trình duyệt chuẩn, ví dụ như Cốc Cốc, FireFox, Chrome hay Microsoft Edge.
- Khi soạn thảo HTML trực tuyến, có thể quan sát ngay kết quả hiển thị trang web trên trình duyệt. Trong Hình 7.6, việc soạn thảo HTML được thực hiện tại khung bên trái, nháy nút Run để kiểm tra kết quả tại khung bên phải.
=> Giáo án Khoa học máy tính 12 Kết nối bài 7: HTML và cấu trúc trang web