TÌM HIỂU TÔNG QUÁT VỀ MÃ HTML
Sau khi đọc và thực hành những 7 phần nói về
wap. Các bạn đã làm và nếu được làm nhiều
lần có thể trở thành nhuần nhuyển hay còn gọi
là quen tay. Tuy nhiên đó là thực hành thẳng
trên trang wap. Chắc chắn bạn đã làm được,
nhưng hiểu như thế chưa có nghĩa là sâu và tuy
có làm được nhưng chưa có một cơ sở vững
chắc nào.
Nếu có thì giờ bạn nên tham khảo phần lý
thuyết. Phần này thực hiện trên máy PC.
-I.Giới Thiệu
HTML là viết tắt của HyperText Makeup
Language (ngôn ngữ đánh dấu siêu văn bản).
Như các bạn đã biết, một trang web dù phức
tạp thế nào cũng chỉ là một file text, được lưu
dưới phần mở rộng là .htm hoặc html. Trong
file này bao gồm các đoạn text được viết
theo một qui tắc nhất định nhằm giúp trình
duyệt có thể đọc được và hiển thị lên màn
hình trình duyệt.
Nói một cách dễ hiểu, tập tin HTML cũng
giống như một file mã nguồn của một ngôn
ngữ lập trình nào đó (như c, c++, pascal...)
được trình dịch dịch thành mã máy và thi
hành.
II.Cấu trúc cơ bản của một file HTML
1.Gioi thieu ve the(tag)
Nội dung của một tập tin html bao gồm các
thẻ (tag) được biểu diễn dưới dạng <tênthẻ>
(chú ý cặp dấu "<>") dùng để định dạng cho
một đối tượng text (đoạn văn, câu...) hoặc
một đối tượng không phải text (hình ảnh,
bảng biểu...).
Một thẻ được mở và đóng dưới dạng
"<tênthẻ>Nội dung bên trong thẻ</tênthẻ>",
trong đó, "nội dung bên trong thẻ" chính là
đoạn text sẽ được hiển thị. Một thẻ có thể
mở nhưng không đóng, ví dụ thẻ dùng để
xuống dòng (nhưng không hết đoạn): <br>,
đường kẻ ngang <hr>... Các thẻ không đóng
này thường là các đối tượng như hình ảnh,
đối tượng nhúng (embed)...
Lưu ý: Thẻ dùng để chèn chú thích (không
được hiển thị lên màn hình) có dạng
<!-- nội dung chú thích -->.
Một thẻ gồm có các thuộc tính (attribute). Các
thuộc tính này quy định định dạng của đối
tượng bên trong thẻ. Thuộc tính được viết
ngay sau tên thẻ cách tên thẻ và cách nhau
(nếu có nhiều thuộc tính) bằng một khoảng
trắng. Một thuộc tính có tên thuộc tính và nội
dung thuộc tính, nội dung thuộc tính được
viết trong cặp dấu " (hoặc có thể không cần)
tên thuộc tính và nội dung thuộc tính đuợc
nối với nhau bằng dấu "=". Ví dụ <tênthẻ
thuộctính1="nộidungthuộctính1"
thuộctính2="nộidungthuộctính2">
Lưu ý: Một thẻ có thể không có thuộc tính
nào hoặc chỉ có thuộc tính mà không có nội
dung.
Ví dụ:
<p align="center">
p: tên thẻ
align: tên thuộc tính (ở đây qui định cách căn
lề)
center: chỉ tính chất của thuộc tính (ở đây là
căn giữa)
2. Cấu trúc cơ bản của một file HTML
Một file HTML thường có cấu trúc như sau:
<html>
<head>
</head>
<body>
</body>
</html>
+ Thẻ <html></html>: Thẻ mở đầu cho một
file HTML, có thể vắng mặt.
+ Thẻ <head>: Thẻ <head> dùng để giới thiệu
một số tính chất của một tập tin HTML,
thường bao gồm các thẻ con sau:
-title></title>: Tiêu đề của văn bản HTML, sẽ
được hiển thị lên thanh tiêu đề của trình
duyệt. Nội dung tiêu đề được đặt trong cặp
thẻ đóng mở. Thẻ này không có thuộc tính.
-<meta> (không đóng thẻ): Xác định một số
thuộc tính của văn bản, tùy theo từng thuộc
tính kèm theo và nội dung của từng thuộc tính
ấy. Thẻ này không được đóng và chỉ bao gồm
các thuộc tính. Ví dụ:
><meta http-equiv="content-type"
content="text/html; charset=utf-8">: Qui định
định dạng tập tin và charset của tập tin (tìm
hiểu ở phần sau) (ở đây là tập tin HTML với
charset là utf-8)
><meta name="robots" content="all,follow">:
Khi website tìm kiếm (ví dụ google...) đọc
được tag này, nó sẽ quyết định có lưu trang
đó vào cơ sở dữ liệu hay không. Nếu thuộc
tính content là "all, follow", nó sẽ lưu vào cơ
sở dữ liệu, nếu thuộc tính là "noindex,
nofollow", nó sẽ không lưu vào.
-<script></script>: Dùng để nhúng các đoạn
javascript.
-<style></style>: Định dạng style (tìm hiểu ở
phần sau).
+ Thẻ <body></body>: Đây là phần thân của
tập tin HTML, các đoạn text hoặc đối tượng
thường nằm trong thẻ này (có thể nằm
ngoài). thẻ <body> có các thuộc tính như
bgcolor - định màu nền cho văn bản,
background - định ảnh nền cho văn bản...
III.Ngôn ngữ hiển thị charset
Thông thường nếu bạn tạo một văn bản HTML
có dấu Tiếng Việt (hoặc bất kì ngôn ngữ nào
khác), văn bản đó sẽ được hiển thị với ngôn
ngữ đó tùy thuộc vào font chữ mà bạn dùng
có hiển thị được ngôn ngữ đó không. Nếu
font chữ đó không hỗ trợ ngôn ngữ mà bạn
viết, nội dung sẽ không được hiển thị chính
xác.
Các font chữ thường được sử dụng trong ngôn
ngữ HTML là Verdana, Times New Roman,
Arial... Đây là các font chữ hỗ trợ tiếng Việt
Unicode và một số ngôn ngữ khác. Tuy nhiên,
không phải mọi ngôn ngữ nào trên thế giới
cũng được hỗ trợ, đôi khi bạn cần phải cài
đặt thêm một language pack.
Nhưng có một vấn đề nảy sinh khi thể hiện
các kí tự unicode này. Một kí tự unicode trong
mã nguồn của tập tin HTML có thể được thể
hiện bằng nhiều cách khác nhau, tùy thuộc và
cách nội dung của tập tin được mã hóa. Cách
mã hóa đó được gọi là charset (cái này là theo
mình hiểu). Ví dụ kí tự "ă" trong mã nguồn
được thể hiện với charset windows-1252
(western european) là "ă", nhưng sẽ vẫn là "ă"
nếu sử dụng charset UTF-8. Tuy nhiên, khi sử
dụng charset UTF-8 để viết mã nguồn nhưng
được giải mã với charset windows-1252 sẽ
được thể hiện là "ă".
Khi thiết kế web sử dụng Tiếng Việt, thông
thường charset utf-8 sẽ được chọn vì các kí tự
có dấu sẽ được giữ nguyên cách thể hiện
trong cả mã nguồn lẫn khi hiển thị, charset
windows-1252 cũng được sử dụng nhưng
không phổ biến lắm vì các kí tự có dấu trong
mã nguồn sẽ được mã hóa và rất khó để
chỉnh sửa mã nguồn, đồng thời cũng gây ra
một số vấn đề hiển thị không như mong
muốn khi sử dụng các hộp thoại có sử dụng
dấu.
Để sử dụng một charset, cần khai báo thẻ
<meta> có nội dung như sau ngay trong thẻ
<head>
<meta http-equiv="content-type"
content="text/html; charset=tên charset">
Ví dụ, để sử dụng unicode: <meta http-
equiv="content-type" content="text/html;
charset=utf-8">
IV.Bai tap minh hoa
Trước khi thực hiện các bài tập, bạn nên tải
sử dụng phần mềm EditPlus để viết mã
nguồn một cách thuận tiện hơn, nếu không có
Editplus, bạn có thể dùng notepad để thay thế
nhưng phải thiết lập font chữ cho notepad là
Courier New (hoặc bất cứ font chữ nào có hỗ
trợ Tiếng Việt Unicode).
Lưu ý khi lưu file với notepad: Bạn phải chọn
Encoding là UTF-8 (ở khung Encoding)
Đối với Editplus, dùng username và key sau
để đăng kí:
1. Mở editplus (hoặc notepad) lên và gõ 1
đoạn có nội dung như sau (Lưu ý các kí tự
được mã hóa):
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
title>Chào các bạn</title>
</head>
<body>
Xin chào tất cả các bạn đã đến với "HTML cơ
bản - Mỗi tuần một bài học"
</body>
</html>
Sau đó lưu lại thành file bai1.html và mở lên
để quan sát cách các kí tự được thể hiện.
2. Tương tự, hãy tạo một file khác và lưu
thành file bai2.html, thay charset bằng utf-8
và gõ nội dung bất kì có dấu rồi mở lên và
quan sát cách thể hiện.
Sau khi mở file bai2.html lên, thử thay đổi
encode thành Western European và để ý cách
các kí tự có dấu được thể hiện. (Bằng cách
vào View -> Encoding -> Western European
(Windows))
3. Tạo một file có tên bai3.html thực hiện
các yêu cầu sau:
+ Hiển thị lên thanh tiêu đề nội dung là "Xin
chào".
+ Có nội dung là "Xin chào các bạn, tôi là <tên
bạn>".
Sử dụng charset là UTF-8
4.Để định dạng màu nền và hình nền cho một
trang web, nguời ta sử dụng các thuộc tính
sau cho thẻ <body>:
+ bgcolor: màu nền cho trang web. Nội dung
thuộc tính là các mã màu.
+ background: hình nền cho trang web. Nội
dung thuộc tính là địa chỉ của hình nền.
Yêu cầu: Hãy tạo một trang với màu nền là
xanh duơng (mã màu là #0000ff), một trang
khác có hình nền bất kì.
--the end--
