Bài F1. HTML và trang web
Nội dung lý thuyết
1. Giới thiệu ngôn ngữ HTML
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu dùng để tạo lập trang web, cho phép liên kết giữa các nội dung như văn bản, hình ảnh, âm thanh, video, siêu liên kết.
HTML được Tim Berners-Lee phát triển, là nền tảng cơ bản của các trang web hiện nay.
Mỗi trang web có thể gồm văn bản, hình ảnh, âm thanh, video… và được hiển thị bởi trình duyệt (Chrome, Firefox, Edge…).
Ví dụ: Trang web https://vnnic.vn/ hiển thị trên hai trình duyệt khác nhau (Microsoft Edge và Mozilla Firefox) tuy cùng một địa chỉ web nhưng có thể khác về bố cục hoặc hiển thị.
2. Cấu trúc, nội dung trang web và các phần tử HTML
Để xây dựng một trang web, cần có mã nguồn được viết bằng ngôn ngữ HTML. Tệp HTML có phần mở rộng là .html và có thể được viết bằng các trình soạn thảo văn bản như Notepad, Visual Studio Code, Sublime Text… Khi mở tệp HTML bằng trình duyệt, nội dung sẽ được hiển thị theo cấu trúc được định nghĩa trong mã HTML. Ví dụ minh họa về đoạn mã trang web đơn giản gồm các phần tử cơ bản như sau:
Cấu trúc này gồm ba phần chính:
<!DOCTYPE html>khai báo đây là tài liệu HTML5.Thẻ
<html>bao toàn bộ trang web.Trong thẻ
<html>, phần<head>chứa thông tin không hiển thị trực tiếp như tiêu đề trang (trong thẻ<title>) và bảng mã ký tự (<meta charset="utf-8">), còn phần<body>là nơi hiển thị nội dung chính của trang web.
Các phần tử cơ bản trong HTML bao gồm:
Tiêu đề dùng các thẻ từ
<h1>đến<h6>, trong đó<h1>là tiêu đề lớn nhất.Đoạn văn bản dùng thẻ
<p>.Để in đậm nội dung có thể dùng thẻ
<strong>. Ví dụ:
<p><strong>Đây là văn bản được in đậm.</strong></p>
Ngoài ra, thẻ <hr> được sử dụng để tạo một đường kẻ ngang phân cách nội dung trên trang.
HTML cũng cho phép thiết lập thuộc tính để thay đổi cách hiển thị. Ví dụ dùng thuộc tính bgcolor trong thẻ <body> để đổi màu nền:
<body bgcolor="lightgray">
Hoặc dùng các thuộc tính trong thẻ nhập liệu để nhận dữ liệu từ người dùng như sau:
<p>Họ tên: <input type="text" name="HoTen"></p>
Trong đó:
type="text"xác định kiểu ô nhập là văn bản.name="HoTen"đặt tên trường dữ liệu là "HoTen".
Tất cả các phần tử HTML đều có thể chứa nội dung hoặc thuộc tính để tùy chỉnh cách hiển thị và hoạt động của nội dung trang web trong trình duyệt.