Tin học 12 · Định hướng Tin học ứng dụng

Bài 7. HTML và cấu trúc trang web

Giải quyết vấn đề với sự trợ giúp của máy tính

SAU BÀI HỌC NÀY EM SẼ:

Các em đã được làm quen với khái niệm website và trang web, có thể em đã biết cách sử dụng phần mềm để tạo ra các trang web với nội dung đa dạng và phong phú; hình thức trình bày cũng đẹp. Tuy nhiên, có thể các em vẫn muốn biết:

1. TRANG WEB VÀ HTML

Hoạt động 1: Tìm hiểu ngôn ngữ HTML và trang web

Các trang web mà em vẫn thường xem được hiển thị bởi trình duyệt web (ví dụ: Cốc cốc; FireFox; Chrome). Thực chất chúng được tạo ra từ các tệp văn bản. Các tệp văn bản này được gọi là trang nguồn (hay mã nguồn) của trang web tương ứng. Quan sát Hình 7.1 và nêu nhận xét về mã nguồn của trang web.

Hình 7.1. Trang web và tệp văn bản nguồn

<!DOCTYPE html>
<html>
<head>
<title>Tên trang Web</title>
</head>
<body>
<div>
<h1>Trang Web và HTML </h1>
<p>Đây là dòng đầu tiên</p>
<hr> <!-- dòng kẻ ngang -->
<p>Đây là dòng cuối cùng </p>
</div>
</body>
</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. Trên trang HTML, ta có thể thấy nội dung bao gồm 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 HTML (còn gọi là thẻ HTML hay tag). Trong ví dụ ở Hình 7.1b, 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.

a) Thẻ đánh dấu HTML

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ẻ 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ẻ.

Thẻ	Ý nghĩa thẻ	Mã HTML	Hiển thị trên trình duyệt
p	Đ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 ý:

<p> Trang này được lập bởi <em>nhóm bạn bè</em> thân thiết</p>

<p style="color:red">This is a paragraph.</p>

b) Phần tử HTML

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ộ 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 bốn phần tử HTML khác.

Lưu ý:

<!-- Đây là dòng chú thích -->

Trang web được thiết lập theo một ngôn ngữ có cấu trúc đặc biệt gọi là ngôn ngữ đánh dấu siêu văn bản HTML. Các tệp HTML là tệp văn bản được cấu tạo từ các phần tử HTML. Mỗi phần tử HTML gồm nội dung được đánh dấu bởi các thẻ (HTML tag) có tính năng điều khiển hoặc định dạng nội dung. Trình duyệt có chức năng hiển thị nội dung trang web theo đúng định dạng được thiết lập.

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

Hoạt động 2

Quan sát tệp HTML sau; em có nhận xét gì về cấu trúc chung của một trang web?

newpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tên trang Web</title>
</head>
<body>
<div>
<h1>Trang Web và HTML </h1>
<p>Đây là dòng đầu tiên</p>
<hr>
<p>Đây là dòng cuối cùng </p>
</div>
<p> Trang này được lập bởi<em> nhóm bạn bè</em> </p>
</body>
</html>

Hình 7.2. Cấu trúc 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

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.

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

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. Ứng dụng của 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ấu trúc cơ bản của tệp HTML có dạng như một cây thông tin các phần tử HTML. Quan hệ cha con của các nút trên cây được mô tả bằng sự lồng nhau của các phần tử (hay thẻ) HTML. Gốc của cây HTML chính là phần tử HTML.

1. Vẽ sơ đồ cây của đoạn văn bản HTML sau:

<p>Thông tin này in <b>đậm</b>, in <i>nghiêng</i>, in <u>gạch dưới</u>, in bình thường.</p>

3. PHẦN MỀM SOẠN THẢO HTML

Hoạt động 3: Tìm hiểu cách soạn thảo các tệp HTML

Hãy tìm hiểu những phần mềm có thể dùng để soạn thảo tệp HTML. Thảo luận để tìm ra cách soạn thảo tệp HTML hợp lí nhất.

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

Notepad 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ở

Hình 7.5. Giao diện soạn thảo HTML của Notepad++

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 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ô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 khung bên phải.

Hình 7.6. Soạn thảo trang HTML trực tuyến

Một số trang web hỗ trợ soạn thảo HTML trực tuyến: tutorialspoint.com

Có thể soạn thảo tệp HTML bằng nhiều phần mềm khác nhau. Cũng có thể soạn thảo trực tuyến và kiểm tra kết quả trực tiếp trên trình duyệt.

LUYỆN TẬP

VẬN DỤNG

Lịch sử phát triển HTML

Các chuẩn HTML của trang web hiện nay được nhà vật lí Tim Berners-Lee đưa ra lần đầu tiên vào những năm 1990 của thế kỉ XX tại Trung tâm Vật lí Hạt nhân CERN.

Ý tưởng ban đầu của Berners-Lee là muốn thiết lập một chuẩn chung để thể hiện và chia sẻ các văn bản có thể trao đổi bên trong cơ quan CERN.

Hình ảnh sau là sơ đồ thông tin mà Tim Berners-Lee đưa ra lần đầu tiên để minh hoạ cho ý tưởng của mình: Trong sơ đồ này, lần đầu tiên xuất hiện cụm từ "hypertext" (siêu văn bản).

Phiên bản đầu tiên của HTML được thiết lập vào cuối năm 1991 mang tên "Các thẻ HTML". Văn bản này do chính Tim Berners-Lee biên soạn:

Từ đó, các phiên bản tiếp theo của HTML lần lượt ra đời cùng với sự phát triển của công nghệ Internet.

Phiên bản hiện tại là HTML5 ra đời năm 2014.

Hình 7.7. Lịch sử phát triển HTML