Bài trước: CuTeoHocLamWeb(1): Làm quen với HTML
-----
2. Tạo một trang web đơn giản
2.1 Tạo thư mục cho dự án web
Để tiện cho
việc học và dần làm quen với cấu trúc thư mục của các dự án web, chúng ta sẽ
tạo một thư mục để lưu các tập tin mã nguồn, hình ảnh, phông chữ. Ví dụ, bạn sẽ
tạo một thư mục có tên là CuTeoHocLamWeb_Code, trong đó tạo 4 thư mục con là
html, css, javascript và assets.
Trong đó:
- Thư mục html
để chứa các tập tin mã nguồn HTML
- Thư mục css
để chứa các tập tin mã nguồn CSS
- Thư mục
javascript để chứa các tập tin mã nguồn JavaScript
- Thư mục
assets (tài nguyên) dùng để chứa hình ảnh, phông chữ
2.2 Hiển thị tiếng Việt
Như đã biết, mã
nguồn HTML sẽ được chứa trong các tập tin có phần mở rộng là .html. Chúng ta sẽ
dùng Notepad, để tạo ra tập tin có tên là QueHuong.html.
Khi lưu tập tin
QueHuong.html, bạn nên dùng dấu nháy kép để bao lại tên tập tin, để
Notepad không thêm phần mở rộng .txt vào tên tập tin. Trình duyệt sẽ không thể
dịch và hiển thị mã nguồn trang web khi có phần mở rộng là .txt. Phần Encoding,
bạn chọn UTF-8.
UTF-8 là viết tắt của Unicode Transformation Format-8.
UTF-8 là một tiêu chuẩn mã hóa ký tự phổ biến và linh
hoạt, nó đã trở thành một tiêu chuẩn cho việc hiển thị văn bản trên web và
nhiều ứng dụng khác.
Khi bạn lưu một tập tin mã nguồn HTML với kiểu mã hóa là
UTF-8, Notepad sẽ dùng UTF-8 để mã hóa văn bản tiếng Việt. Khi hiển thị trang
web, trình duyệt sẽ có cơ sở để dịch và hiển thị chính xác văn bản tiếng Việt
mà bạn đã tạo ra khi viết mã nguồn HTML.
Chúng ta sẽ
viết mã nguồn để hiển thị 2 khổ thơ:
[QueHuong.html]
<!DOCTYPE html>
<html>
<head>
<title>Quê hương</title>
</head>
<body>
<h1>Quê Hương</h1>
<p>Quê hương là gì hả mẹ
Mà cô giáo dạy hãy yêu?
Quê hương là gì hả mẹ
Ai đi xa cũng nhớ nhiều?</p>
<p>Quê hương là chùm khế ngọt
Cho con trèo hái mỗi
ngày
Quê hương là đường
đi học
Con về rợp bướm
vàng bay</p>
<p>Tác giả: Đỗ Trung
Quân</p>
</body>
</html>
Mở tập tin QueHuong.html
bằng trình duyệt để xem kết quả:
Bạn sẽ thấy
trang web đã hiển thị được tiếng Việt. Rất có thể trình duyệt Chrome đã sử dụng
bộ mã hóa mặc định là UTF-8 để dịch và hiển thị nội dung trang web.
Để chắc chắn là
trình duyệt luôn sử dụng bộ mã hóa UTF-8 khi hiển thị văn bản, thì bạn cần thêm
dòng khai báo <meta charset="UTF-8">:
<head>
<title>Quê hương</title>
<meta charset="UTF-8">
</head>
Dòng khai báo
<meta charset="UTF-8"> được đặt trong phần tử head.
Phần tử meta, được sử dụng để mô tả một số đặc tính của trang web, ví dụ: bộ mã mà trang web sử dụng, mô tả vắn tắt nội dung của trang web, các từ khóa của trang web, tác giả của trang web. Meta là viết rút gọn của metadata. Metadata là siêu dữ liệu, nghĩa là dữ liệu để mô tả dữ liệu. Cụ thể ở đây là các thông tin để mô tả một số đặc tính của trang web. Phần tử meta không được hiển thị ra trình duyệt. Trình duyệt, máy tìm kiếm và các dịch vụ web khác sẽ đọc và sử dụng các phần tử meta này.
2.3 Chèn ảnh cho trang web
Chúng ta sẽ học
cách chèn thêm một hình ảnh cho trang web, đồng thời cũng học luôn về thuộc
tính (attribute) trong HTML.
Để chèn một ảnh
vào trang web:
- Bạn vào trang
google, gõ từ khóa: vietnam 800x400 (rộng 800px, cao 400px) để lấy
một ảnh bạn thích, lưu vào thư mục assets.
- Thêm dòng mã
sau (dòng tô đậm):
<body>
<img src="../assets/caphe.jpg">
<h1>Quê Hương</h1>
- Lưu lại tập
tin mã nguồn, mở tập tin mã nguồn bằng trình duyệt để xem kết quả:
Phần tử img
Chúng ta sử
dụng phần tử img để chèn ảnh vào trang web. Để ý, img là viết tắt của
image (hình ảnh). Bạn nên nhớ các từ gốc tiếng Anh của các phần tử sẽ dễ dàng
biết được chức năng của nó.
<img src="../assets/caphe.jpg">
Phần tử img là phần tử rỗng (empty element), nên
chỉ có thẻ mở mà không có thẻ đóng (<img>).
Chỉ với cú pháp là <img> thì trình duyệt sẽ không
thể biết được là phải lấy hình ảnh nào, lấy ở đâu? Vì vậy, cần phải sử dụng
thêm thuộc tính (attribute) để cung cấp cho trình duyệt biết được tên và vị trí
của hình ảnh.
Trong thẻ mở của img, chúng ta sử dụng thuộc tính src
để chỉ ra vị trí và tên của hình ảnh (../assets/caphe.jpg). src là viết tắt của
source (nguồn).
Thuộc tính trong HTML
Thuộc tính là thành phần bổ sung của mỗi phần
tử HTML. Thuộc tính được dùng để thay đổi chức năng mặc định của phần tử hoặc
là một thành tố bắt buộc phải có, để một phần tử có thể thực hiện đúng chức
năng. Xem
hình minh họa:
Thuộc
tính luôn được đặt trong thẻ mở. Mỗi phần tử có thể chứa nhiều thuộc tính, mỗi
thuộc tính cách nhau bởi một khoảng trắng, tính thứ tự trước sau của các thuộc
tính là không quan trọng.
Hầu
hết các thuộc tính đều có giá trị đi kèm, giá trị của thuộc tính nằm sau dấu
“=”, được bao lại bằng dấu nháy kép ("") hoặc nháy đơn ('). Mọi người
hay sử dụng dấu nháy kép. Tuy nhiên, cũng có một số giá trị không cần phải bao
lại bằng dấu nháy. Lưu ý, đừng nhầm dấu ("") với dấu (“”) hoặc dấu
(') với dấu (‘), việc chép mã HTML từ tài liệu Word để chạy thử hay bị nhầm các
dấu này, và gây ra lỗi. Trong một số trường hợp, thuộc tính được viết rút gọn
chỉ gồm một từ mô tả, ví dụ thuộc tính checked.
Giá
trị của thuộc tính có thể là: văn bản, số, kí tự, URL, đơn vị đo.
Có
bốn loại thuộc tính cơ bản gồm:
|
Loại thuộc tính |
Mô tả |
|
Thuộc
tính bắt buộc (required attributes) |
Là thuộc
tính bắt buộc phải có để phần tử thực hiện đúng chức năng của nó. Ví dụ:
thuộc tính href trong phần tử <a>, và <link>, thuộc tính src
trong phần tử <img> |
|
Thuộc
tính tùy chọn (optional attributes) |
Là thuộc
tính được sử dụng để thay đổi chức năng mặc định của một phần tử. Ví dụ:
thuộc tính maxlength trong phần tử <input> |
|
Thuộc
tính chuẩn (standard attributes) hay thuộc tính phổ dụng (global attributes) |
Là thuộc
tính có thể sử dụng được cho nhiều loại phần tử. Ví dụ: thuộc tính id, class,
title |
|
Thuộc
tính sự kiện (event attributes) |
Là thuộc
tính được sử dụng để kích hoạt một hành động (script) trong các trường hợp cụ
thể. ví dụ: thuộc tính onclick, onload |
2.4 Bài tập
1. Trong UTF-8,
UTF là viết tắt của các từ nào?
A. Uniform Text
Format
B. Unicode
Transformation Format
C. Uniform
Transformation Format
D. Unicode Text
Format
2. Metadata is
"data that provides ________about other data". In other words, it is
"data about data".
A. format
B. information
C. structure
D. standard
3. Technically,
an ________is the collection of start tag, its attributes, an end tag and
everything in between. On the other hand an HTML tag (either opening or
closing) is used to mark the start or end of an element.
B. HTML tag
C. HTML
document
D. HTML element
4. One of
the following markup examples is incorrect. Which one?
A. <img src
= "birthday.jpg">
B.
<em>Congratulations!<em>
C. <a
href="file.html">linked text</a>
D.
<p>This is a new paragraph</p>
5. Viết lại các
đoạn mã trong bài học và tự làm thêm một trang web riêng của bạn.
-----
Gợi ý làm bài
tập
1(B), 2(B),
3(D), 4(B)
------
Cập nhật: 4/12/2024
Bài sau: CuTeoHocLamWeb(3): Làm quen với CSS
-----