BÀI 7 - HTML VÀ CẤU TRÚC TRANG WEB (KNTT - CS & ICT)
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. Trên trang html, ta có thể thấy nội
dung bao gồm phần văn bản (text) và các ký tự
đánh dấu đặc biệt nằm trong hai dấu “<”, “>”. Các ký tự này,
được gọi là thẻ đánh dấu HTML (còn gọi
là thẻ HTML hay tag). Trong ví dụ ở Hình 7.1b
chúng ta thấy các thẻ HTML như <head>, <title>, <body>, <h1>, <p>, <div>,...
Các thẻ HTML được sử dụng để
xác định phần tử HTML tương ứng. Các phần
tử HTML định dạng thông tin trong trang web. Để
hiển thị thông tin trong trang web cần phần mềm
trình duyệt web.
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ác thẻ
được viết trong cặp dấu “<”, “>”. Thông thường
mỗi thẻ sẽ bao gồm thẻ bắt đầu
và thẻ kết thúc, chỉ ra phạm vi tác dụng của
thẻ.
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ụ sau là 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ụ sau
mô tả 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ó dấu “/” chẳng
hạn </p>.
- Tuy nhiên 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. Cần chú
ý điều này Khi soạn thảo HTML.
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. Vậy
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. 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. Các phần tử HTML có thể độc
lập, rời nhau hoặc lồng nhau.
Trong ví dụ ở Hình 7.1, em thấy hai phần tử
HTML rời nhau là <head> và <body> trong khi đó phần tử <div> chứa bên trong
4 phần tử HTML khác.
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. Ví dụ trong Hình 7.2, phần
tử với thẻ <div> chứa phần tử với thẻ <h1>. 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.
1. Dòng đầu
tiên <!DOCTYPE
html>, không
được coi là phần tử HTML và mang ý nghĩa
đặc biệt, thông báo cho trình duyệt biết đây
là tệp có định dạng html. Có thể coi là dòng khai
báo html của tệp văn bản.
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. Trong sơ đồ hình cây HTML, đây là phần tử
gốc (root). Phần tử <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>. Một số phần
tử khác thường có trong <head> bao gồm <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. Các phần tử này sẽ
được tìm hiểu trong các bài học sau.
5. Phần tử <meta> được dùng để mô tả các
thông tin bổ sung của trang web như cách mã hóa Unicode, từ
khóa dùng để tìm kiếm trang, tên tác giả trang web. Phần
tử này nằm trong phần tử <head>. Trong Hình 7.3, phần
tử <meta
charset = “utf-8”>
mô tả cách mã hóa văn bản trên trang web theo mã UTF-8.
6. Phần tử <title> nằm trong <head>. Thẻ <title> mô tả tên của trang web hiện thời.
Tên của trang web sẽ xuất hiện trong danh sách kết
quả tìm kiếm. Phần tử <title> 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
ý: Văn bản 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.
Như vậy, 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>. Cấu trúc cây HTML
này sẽ được giới thiệu trong các phần
sau. Ví dụ, trang web ở Hình 7.2 có cây thông tin như Hình
7.4.
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.
Đâ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. Đây 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/. Giao diện có thể
như Hình 7.5.
Lưu ý: Để phần mềm hiển thị
và hỗ trợ soạn thảo đúng 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++. Phần mềm này có phiên
bản cơ bản miễn phí địa chỉ tải
phần mềm: https://www.sublimetext.com/.
Lưu ý: Để phần mềm hiển thị
và hỗ trợ soạn thảo đúng theo ngôn ngữ 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.
Ví dụ Hình 7.6 là giao diện soạn thảo HTML trực
tuyến. Khi đó có thể quan sát ngay kết quả hiển
thị trang web trên trình duyệt. 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
không bên phải.
Một
số trang web hỗ trợ soạn thảo HTML trực tuyến
là: w3schools.com, tutorialspoint.com,...
---The
End!---