HTML và ứng dụng trong thiết kế website tin tức Euro 2012

BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
Họ và tên sinh viên: NGUYỄN VĂN HÙNG Số hiệu sinh viên: 09CĐ0587
Khoá: 2009 – 2012 Khoa: Điện tử - Viễn thông Ngành: Điện tử - Viễn thông
1. Đầu đề đồ án:
“HTML và ứng dụng trong thiết kế website tin tức Euro 2012”
2. Các số liệu và dữ liệu ban đầu:
…………………………………… ………………………………………………
………………………………………………………………………………………
……………………………………….… ……………………… …………………
3. Nội dung các phần thuyết minh và tính toán:
………………………………………………………………………………………
……………………… ….………………………………………………………….
……………………………………………………………………… ….………….
………………………………………………………………………………………
4. Các bản vẽ, đồ thị ( ghi rõ các loại và kích thước bản vẽ ):
……………………………………………………………………………………….
……………………………… ….
………………………………………………………………………………………
………………………………… ……….…………
5. Họ tên giảng viên hướng dẫn: ………………………………………………….
6. Ngày giao nhiệm vụ đồ án: ………………………………………………….………
7. Ngày hoàn thành đồ án: ………………………………………………………
Ngày tháng năm
Chủ nhiệm Bộ môn Giảng viên hướng dẫn
Sinh viên đã hoàn thành và nộp đồ án tốt nghiệp ngày tháng năm
Cán bộ phản biện

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

BẢN NHẬN XÉT ĐỒ ÁN TỐT NGHIỆP
Họ và tên sinh viên: Nguyễn Văn Hùng Số hiệu sinh viên: 09CĐ0587
Ngành: Điện tử - Viễn thông Khoá: 2009 - 2012
Giảng viên hướng dẫn: ThS. Nguyễn Quang Minh
Cán bộ phản biện:
1. Nội dung thiết kế tốt nghiệp:
“HTML và ứng dụng trong thiết kế website tin tức Euro 2012“
2. Nhận xét của cán bộ phản biện:











Ngày tháng năm
Cán bộ phản biện
( Ký, ghi rõ họ và tên )
LỜI NÓI ĐẦU

Xã hội ngày càng phát triển, nhu cầu cập nhật tin tức của con người ngày càng
cao. Bên cạnh việc sử dụng báo giấy truyền thống, ngày nay cùng với sự phát triển
của internet, báo điện tử là một phần không thể thiếu trong việc truyền tải thông tin

đến mọi người.
Trên cơ sở những kiến thức tích lũy trong những năm học tập chuyên ngành
Điện Tử - Viễn Thông tại trường đại học Bách Khoa Hà Nội và tìm hiểu một số tài
liệu liên quan đến ngôn ngữ siêu văn bản HTML, sử dụng Google Chrome cùng với
sự hướng dẫn của ThS. Nguyễn Quang Minh, em đã tìm hiểu, nghiên cứu và hoàn
thành đồ án tốt nghiệp với đề tài “HTML và ứng dụng trong thiết kế website tin
tức Euro 2012“.
Em xin gửi lời cảm ơn sâu sắc tới thầy Nguyễn Quang Minh, Bộ môn Điện tử -
Kỹ thuật máy tính đã tận tình hướng dẫn và cho em những ý kiến quý báu trong quá
trình thực hiện nghiên cứu đề tài này.
Em xin gửi lời cảm ơn các thầy cô của Viện Điện Tử Viễn Thông, đã tạo mọi
điều kiện và dạy bảo tận tình trong quá trình em học tập.
Con xin được gửi lời cảm ơn đặc biệt tới gia đình đã luôn ở bên động viên,
khuyến khích và là động lực lớn cho con trong những ngày học tập và thực hiện đề
tàu này.
Cuối cùng xin gửi lời cảm ơn đến bạn bè đã giúp đỡ, hỗ trợ nhiệt tình khi mình
thực hiện đề tài này.
Sinh viên thực hiện đề tài:
Nguyễn Văn Hùng
MỤC LỤC
LỜI NÓI ĐẦU 3
46
DANH MỤC HÌNH VẼ
LỜI NÓI ĐẦU 3
46
DANH SÁCH BẢNG BIỂU
LỜI NÓI ĐẦU 3
46
BẢNG TRA CỨU TỪ VIẾT TẮT
Ký Hiệu Tiếng Anh Tiếng Việt

A
Alink Active link Liên kết đang hoạt động
B
C
CSS Cascading Style Sheet Tập tin định kiểu theo tầng
D
E
F
G
H
HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn bản
I
J
K
L
M
N
O
P
PX Pixel Điểm ảnh
Q
R
S
SYNC Synchronization Đồng bộ hóa
SGML Standard Generalized
Markup Language
Ngôn ngữ mô tả tài liệu tổng quát
T
U
UEFA Union of European Football

Associations
Liên đoàn bóng đá châu Âu
URL
X
XHTML Extensible Hypertext Markup
Language
Ngôn ngữ đánh dấu siêu văn bản mở
rộng
V
Vlink Visited link Liên kết đã hoạt động
W
WWW World Wide Web Mạng lưới rộng lớn toàn cầu
TÓM TẮT ĐỒ ÁN
***
Đồ án tốt nghiệp giới thiệu về ngôn ngữ siêu văn bản HTML, và sử dụng
Google Chrome phiên bản tiếng Việt. Dạng tổng quát của một thẻ HTML, cách sử
dụng và một số thẻ (tag) cơ bản đã được đề cập. Hướng dẫn cài đặt, sử dụng Google
Chrome được trình bày chi tiết cùng một số công cụ và tiện ích của Google
Chrome. Phần chính của đồ án tập trung vào chi tiết thiết kế website tin tức Euro
2012, bằng việc sử dụng ngôn ngữ đánh dấu siêu văn bản html để xây dựng website
nhằm cung cấp thông tin về giải bóng đá vô địch châu Âu – Euro 2012.
ABSTRACT
***
PHẦN MỞ ĐẦU
***
Đồ án tốt nghiệp giới thiệu về ngôn ngữ siêu văn bản HTML, cùng trình
duyệt website Google Chrome phiên bản tiếng Việt. Bên cạnh đó là một website tin
tức Euro 2012 sử dụng ngôn ngữ siêu văn bản HTML tự thiết kế. Nội dung của đề
tài được trình bày trong các chương như sau:
•Chương 1: Ngôn ngữ siêu văn bản HTML

Giới thiệu về ngôn ngữ siêu văn bản HTML, vai trò của nó trong việc xây
dựng các website. Các thẻ (tag) và một số thẻ (tag) HTML cơ bản.
•Chương 2: Sử dụng Google Chrome phiên bản tiếng Việt
Giới thiệu về Google Chrome. Cách cài đặt, sử dụng các tab, thanh địa chỉ
cùng một số công cụ và tiện ích của Google Chrome.
•Chương 3: Phân tích thiết kế website tin tức Euro 2012
Là một website tự thiết kế sử dụng ngôn ngữ siêu văn bản HTML, nhằm mục
đích cung cấp thông tin về giải bóng đá vô địch châu Âu – Euro 2012.
10
Chương 1 : NGÔN NGỮ SIÊU VĂN BẢN HTML
1.1 Khái niệm cơ bản về HTML
HTML là ngôn ngữ chính để xây dựng các trang website, nó mô tả cách thức 1
trang web hiển thị như thế nào trong 1 trình duyệt. HTML là 1 ngôn ngữ mô tả tài
liệu, được phát triểm từ ngôn ngữ mô tả tài liệu tổng quát SGML (Standard
Generalized Markup Language). HTML ko phải là 1 ngôn ngữ lập trình, nó cung
cấp các chỉ thị định dạng để phụ vụ cho việc trình bày văn bản và các đối tượng
khác như video, hình ảnh v.v
HTML (Hypertext Markup Language) là ngôn ngữ định dạng siêu liên kết, cho
phép định dạng văn bản, bổ sung hình ảnh, video, cũng như lưu tất cả vào trong 1
tập tin dưới dạng văn bản hay dưới dạng ACSII. Các thuật ngữ cơ bản về ngôn ngữ
HTML như sau :
Markup: HTML là ngôn ngữ của các thẻ đánh dấu - tag. Các thẻ này xác định
cách thức trình bày đoạn văn bản tương ứng trên màn hình.
Language : HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình, tuy
nhiên đơn giản hơn. Nó có cú pháp chặt chẽ để viết các lệnh thực hiện việc trình
diễn văn bản. Các từ khoá có ý nghĩa xác định được cộng đồng internet thừa nhận
và sử dụng. Ví dụ b = bold, ul = unordered list,
Text : HTML đầu tiên và trước hết là để trình bày văn bản và dựa trên nền
tảng là một văn bản. Các thành phần như hình ảnh , âm thanh, hoạt hình đều phải
"cắm neo" vào một đoạn văn nào đó.

Hyper : HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên
internet. Nó có tác dụng che dấu sự phức tạp của internet đối với người sử dụng , có
thể đọc mà không cần biết đến văn bản đó nằm ở đâu, xây dựng phức tạp như thế
nào. Sự phát triểm có tính bùng nổ của internet trong thời gian vừa qua một phần
lớn là nhờ vào WWW.
Hyperlink : dùng để liên kết các tài liệu này đến tài liệu khác hoặc liên kết đối
với bất kì đối tượng nào trên web như văn bản , hình ảnh, âm thanh. Chỉ cần nhấp
chuột vào siêu liên kết, tài liệu được liên kết sẽ được hiển thị.
11
1.2 Thẻ HTML (HTML tag)
1.2.1 Thẻ HTML
Tập tin HTML khác với các tập tin văn bản khác là ở chỗ chúng chứa các mã
đặc biệt, đó là thẻ HTML (HTML tag). Các thẻ này làm nhiệm vụ quy định cách
hiển thị cho nội dung trong trang web.
Thẻ HTML không phân biệt dạng chữ hoa – thường. Dạng tổng quát của một
thẻ HTML thường gồm ba phần:
<tên-thẻ> nội dung </tên-thẻ>
↑ ↑
(Thẻ mở) (Thẻ đóng)
• Thẻ mở (opening tag) xác định vị trí bắt đầu có hiệu lực của thẻ. Thẻ mở
được kí hiệu bằng cặp móc nhọn <tên thẻ> bao quanh tên thẻ.
• Ngược lại, thẻ đóng (closing tag) chỉ định vị trí kết thúc hiệu lực của thẻ, kí
hiệu là </tên_thẻ>.
1.2.2 Phân loại thẻ
Thẻ HTML thường được phân thành hai loại:
• Thẻ chứa (container tag)
• Thẻ rỗng (empty tag)
1.2.3 Thẻ chứa (container tag)
Mỗi thẻ chứa gồm đầy đủ cặp thẻ đóng và thẻ mở, bao bọc khối văn bản cần
định dạng.

Ví dụ :
<B> Viện Điện Tử Viễn Thông - Trường Đại Học Bách Khoa Hà Nội </B>
Ví dụ này sử dụng thẻ <B> là thẻ đánh dấu chỉ định đoạn văn bản được in đậm.
Trong đó <B> là thẻ mở, chỉ định vị trí bắt đầu đoạn văn bản in đậm, còn
</B> là thẻ đóng chỉ định nơi kết thúc của văn bản được in đậm. Như vậy, câu ví
dụ này khi hiển thị trên trang web sẽ là:
Viện Điện Tử Viễn Thông - Trường Đại Học Bách Khoa Hà Nội
12
1.2.4 Thẻ rỗng (empty tag)
Bên cạnh những thẻ có cả phần thẻ mở và thẻ đóng là những thẻ chỉ gồm duy
nhất phần thẻ mở, không có thẻ đóng. Các thẻ này được gọi là thẻ rỗng. Do nhiệm
vụ của thẻ đóng là thông báo cho trình duyệt web vị trí kết thúc hiệu lực của thẻ,
nhưng trong một số trường hợp, trình duyệt có thể tự nhận biết điều này, nên thẻ
đóng không còn cần thiết nữa. Ví dụ thẻ <HR> là thẻ có nhiệm vụ vẽ một đường
ngang theo chiều rộng của tài liệu. Như thế, thẻ không tác dụng lên khối văn bản, vì
vậy cũng không cần phải có thẻ đóng cho biết vị trí kết thúc hiệu lực của thẻ.
1.2.5 Thuộc tính của thẻ
Khi sử dụng thẻ HTML, trong phần thẻ mở ta có thể sử dụng các thuộc tính thẻ
để bổ sung thêm hiệu quả định dạng.
<tên_thẻ thuộc_tính_1=giá_trị thuộc_tính_2=giá_trị … >
Các thuộc tính ngăn cách nhau bởi khoảng trắng. Đồng thời, trị của thuộc tính phải
nằm trong cặp nháy kép hay cặp nháy đơn.
Ví dụ:
<font color="BLUE" size="5">Viện Điện Tử Viễn Thông</font>
Ví dụ trên sử dụng thẻ <font> kèm theo hai thuộc tính color và size nhằm định dạng
font chữ của chuỗi văn bản Viện Điện Tử Viễn Thông có màu xanh và kích thước 5.
1.2.6 Cấu trúc của tài liệu HTML
Tài liệu HTML bắt đầu bằng thẻ mở <HTML> và kết thúc bằng thẻ đóng
</HTML>:
<HTML>

…………
</HTML>
Thẻ <HTML> báo cho trình duyệt biết nội dung nằm giữa thẻ mở <HTML> và
thẻ đóng</HTML> là một tài liệu HTML.
Phần nội dung được chia thành hai phần:
• Phần đầu – header
• Phần thân – body

13
1.2.7 Phần đầu tập tin HTML (header)
Phần đầu chứa thông tin về tài liệu, bắt đầu với thẻ <head> và kết thúc bởi thẻ
đóng </head>.
Trong phần này, ta khai báo tiêu đề của trang bằng thẻ <title>. Tiêu đề không
liên quan gì đến tên tập tin. Ta đặt tiêu đề cho trang web nhằm thể hiện chủ đề của
trang. Khi hiển thị trong trình duyệt, phần tiêu đề đã khai báo sẽ xuất hiện trên
thanh tiêu đề của cửa sổ trình duyệt.
Ví dụ:
<head>
<title>
Tiêu đề trang web
</title>
</head>
1.2.8 Phần thân body
Phần thân là phần chủ yếu của trang web, chứa nội dung hiển thị trong trình
duyệt gồm cả văn bản và hình ảnh. Phần này được bao bọc bởi cặp thẻ <body>và
</body>. Nội dung giữa hai thẻ mở và đóng của thẻ <body> là những gì ta muốn
hiển thị trong trình duyệt.
Thẻ <body> gồm một số thuộc tính như sau:
Thuộc tính Chỉ định
Background Chỉ định một ảnh làm ảnh nền (background) cho văn bản. Giá trị

của thuộc tính này là đường dẫn đến tập tin ảnh.
Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì ảnh nền này
sẽ được lặp nhiều lần để lấp đầy cửa sổ trình duyệt.
Bgcolor
Đặt màu nền cho trang khi hiển thị. Nếu cả hai thuộc tính
BACKGROUND và BGCOLOR cùng được chỉ định thì trình
duyệt sẽ hiển thị màu nền trước, sau đó mới tải ảnh lên phía trên.
Text Chỉ định màu chữ của văn bản.
Alink
Vlink
link
Chỉ định màu sắc cho các siêu liên kết trong văn bản:
alink (active link) là liên kết đang được kích hoạt.
vlink (visited link) là liên kết đã được kích hoạt.
link là liên kết chưa được kích hoạt.
Bảng 1.1 Thẻ <body> và một số thuộc tính
Như vậy, ta có phần khung định dạng một tài liệu HTML như sau:
14
<HTML>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
Đây là phần nội dung trang web.
</body>
</HTML>
Ví dụ :
<HTML>
<head>
<title> Tôi là NGUYỄN VĂN HÙNG </title>

</head>
<body bgcolor='yellow' link='red' vlink='blue' background="bgImages/bg1.gif">
Đây là website cá nhân của tôi.
</body>
</HTML>
1.2.9 Màu sắc trong thiết kế trang Web
Trong thiết kế web, màu sắc hiển thị được tổng hợp từ ba thành phần màu
chính:
- Đỏ (Red)
- Xanh lá cây (Green)
- Xanh biển (Blue)
Mỗi màu có 256 giá trị, được biểu diễn từ 0 – FF (0 - 255). Trong đó trị 0 thể
hiện mức độ màu thấp nhất, còn FF thể hiện mức độ màu cao nhất. Như vậy kết hợp
giá trị của ba màu, ta nhận được một màu sắc cụ thể, được biểu diễn dưới dạng hexa
với định dạng như sau: #RRGGBB. Trong đó:
- RR - là giá trị màu Đỏ (0 – FF)
- GG - là giá trị màu Xanh lá cây (0 – FF)
- BB - là giá trị màu Xanh nước biển (0 – FF)
15
Trong HTML, màu sắc thường được xác định qua các thuộc tính bgcolor hay
color. Giá trị của các thuộc tính này có thể là:
- Giá trị RGB: #RRGGBB
- Tên tiếng Anh của màu.
Tên tiếng Anh chỉ có thể biểu diễn 16 màu, ít hơn nhiều so với số lượng màu
biểu diễn bằng giá trị RGB.
Sau đây là giá trị của một số màu cơ bản:
Màu sắc Giá trị Tên tiếng Anh
Đỏ
Xanh lá cây
Xanh biển

Trắng
Đen
#FF0000
#00FF00
#0000FF
#FFFFFF
#000000
RED
GREEN
BLUE
WHITE
BLACK
Bảng 1.2 Một số màu cơ bản
1.3 Một số thẻ HTML cơ bản
1.3.1 Phân loại thẻ định dạng
Thẻ định dạng gồm 2 loại sau:
• Thẻ định dạng mức khối
• Thẻ định dạng mức văn bản hay trong dòng
1.3.2 Thẻ định dạng mức khối
Đây là các phần tử xuất hiện ở phần thân văn bản. Các phần tử mức khối có tác
dụng thể hiện cấu trúc của tài liệu. Khi các phần tử mức khối bắt đầu ở một dòng
mới, ta không cần ghi thẻ kết thúc.
Một số phần tử mức khối thông thường:
• Tiêu đề (H1 đến H6)
• Đoạn văn bản (P)
• Phần tử trong danh sách (LI)

16
1.3.2 Thẻ định dạng mức văn bản hay trong dòng
Sau khi đã phân tài liệu thành những đoạn văn bản, định dạng các đề mục của

tài liệu. Ta đã có một tài liệu tương đối hoàn chỉnh về mặt cấu trúc. Tuy nhiên, để
cho văn bản HTML khi hiển thị trên trình duyệt bớt đơn điệu, ta sử dụng thêm một
số thẻ định dạng kí tự như in đậm, in nghiêng, chỉ định font, kích thước chữ trong
tài liệu,…Các thẻ này được gọi là thẻ định dạng mức văn bản hay trong dòng.
Một số phần tử mức văn bản thường sử dụng:
• EM, I, B và FONT (nhấn mạnh ký tự)
• A (liên kết)
• IMG ( hình ảnh)
• BR (ngắt dòng)
1.3.4 Phân đoạn văn bản
Nếu ta không sử dụng các thẻ HTML để bắt đầu một dòng mới hoặc một đoạn
mới, thì khi hiển thị trên trình duyệt, văn bản sẽ xuất hiện thành một khối duy nhất,
dù ta có nhấn Enter để xuống dòng trong lúc soạn thảo tập tin HTML.
o Thẻ <br>:
Thẻ <br> được dùng để khai báo một ngắt dòng, chèn một ký tự xuống dòng.
Như thế, nội dung nằm phía sau thẻ này sẽ bắt đầu ở lề trái của màn hình và trên
dòng mới. Thẻ <br> là thẻ rỗng nên không cần thẻ đóng đi kèm. Tuy nhiên hiện
nay chuẩn XHTML khá thông dụng trong các trình soạn thảo HTML mới nên có
thể dùng thẻ <br/> để thích hợp hơn.
o Thẻ <p>
Trong tài liệu, những nội dung thuộc cùng một nhóm ý tưởng được gom thành
một đoạn. Thẻ <p> được sử dụng để đánh dấu sự bắt đầu của một đoạn mới. Do đó,
ta có thể không cần chỉ định thẻ đóng </p>.
<p align="left | center | right"> nội dung </p>
Để canh lề cho đoạn văn bản, ta sử dụng thuộc tính align với các giá trị
center/right/left.
17
Ví dụ :
<p align="left">
Quê hương là gì hở mẹ <br>

Mà cô giáo dạy phải yêu <br>
Quê hương là gì hở mẹ<br>
Ai đi xa cũng nhớ nhiều
</p>
<p align="center">
Quê hương là chum khế ngọt<br>
Cho con trèo hái mỗi ngày
</p>
1.3.5 Tạo đề mục
Để tài liệu HTML được rõ ràng, ta có thể thêm đề mục (tiêu đề) cho từng phần
của tài liệu. HTML hỗ trợ 6 mức đề mục phân cấp khối văn bản. Mỗi cấp đề mục có
cách định dạng riêng, tùy thuộc vào ngữ nghĩa của tài liệu, mà ta sử dụng cấp đề
mục phù hợp. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn
bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản bình thường.
Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:
<h1 align="giá-trị"> tiêu đề cấp 1 </h1>
<h2 align="giá-trị"> tiêu đề cấp 2 </h2>
<h3 align="giá-trị"> tiêu đề cấp 3 </h3>
<h4 align="giá-trị"> tiêu đề cấp 4 </h4>
<h5 align="giá-trị"> tiêu đề cấp 5 </h5>
<h6 align="giá-trị"> tiêu đề cấp 6 </h6>
Thuộc tính canh lề align của các thẻ tiêu đề cũng có các trị center|left|right
giống như thẻ <p>.
Ví dụ:
<H1> Tiên đề 1 </H1>
<H2> Tiêu đề 2 </H2>
<H3> Tiêu đề 3 </H3>
<H4> Tiêu đề 4 </H4>
18
<H5> Tiêu đề 5 </H5>

<H6> Tiêu đề 6</H6>
1.3.6 Định dạng kiểu chữ
Sau đây là các thẻ qui định tính chất in nghiêng, in đậm, gạch dưới… của văn
bản khi hiển thị trên trình duyệt.
• In đậm
<b> nội dung in đậm </b>
<strong> nội dung in đậm </strong>
• In nghiêng
<i> nội dung in nghiêng </i>
<em> nội dung in nghiêng </em>
• Gạch dưới
<u> nội dung được gạch dưới </u>
• Gạch ngang
<s> nội dung bị gạch ngang </s>
<strike> nội dung bị gạch ngang </strike>
• Định dạng chỉ số trên (x
2
)
^{nội dung định dạng chỉ số trên}
• Định dạng chỉ số dưới (x
2
)
_{nội dung định dạng chỉ số dưới}
1.3.7 Định dạng font chữ
Để thay đổi font chữ, kích thước và màu của văn bản, ta sử dụng thẻ <font>
với các thuộc tính face, size và color:
<font face="tên-font" size="kích-thước" color="màu-chữ"> nội dung </font>
Ta có thể định dạng font chữ cho toàn bộ tài liệu bằng cách đặt thẻ <font>
trong thẻ <body> và bao bọc hết những nội dung của tài liệu. Ngoài ra, thẻ <font>
còn có thể áp dụng cho từng từ, từng khối văn bản cụ thể trong trang.

19
Ý nghĩa các thuộc tính:
• Thuộc tính face chỉ định font chữ hiển thị, giá trị của thuộc tính này là tên
font chữ muốn định dạng.
<font face="arial"> Đây là font arial </font>
<font face="verdana", "arial">
Nếu không có font Verdana thì hiển thị font Arial
</font>
• Thuộc tính size chỉ định kích thước của kí tự. Giá trị của thuộc tính có thể là:
- Trị số nguyên chỉ kích thước chính xác.
- Trị tương đối (+/- giá trị số) chỉ mức gia giảm kích thước.
<font size=4> Kích thước là 4 </font>
<font size=+2> Tăng kích thước thêm 2 đơn vị </font>
• Thuộc tính color xác định màu của kí tự trong đoạn văn bản. Thuộc tính này
có thể nhận trị hexa RGB hay các tên màu chuẩn.
<font color="#FF0000"> Khối VB màu đỏ </font>
<font color="green"> Khối VB màu xanh lá </font>
1.3.8 Đường kẻ ngang – Thẻ <HR>
Thẻ <hr> cho phép tạo một đường kẻ ngang trên trang. Thẻ <hr> là thẻ rỗng,
nên không có thẻ đóng đi kèm. Sau đây là một số thuộc tính của thẻ <hr>:
• align: canh chỉnh vị trí đường kẻ, nhận các trị sau: left,right,center.
• width: xác định chiều rộng của đường kẻ, là số điểm px hay trị phần trăm %
(VD: 200px, 30%). Trị mặc định của thuộc tính là 100%, nghĩa là toàn bộ bề ngang
của tài liệu.
• size: chỉ định bề dày của đường kẻ và được xác định bằng số điểm px.
• noshade: không có bóng mờ.
20
Ví dụ :
<hr>

<hr size="15" align="left" width="100" >
<hr noshade size="5" align="center" width="50%" >
1.3.9 Trích dẫn
Với những khối văn bản là nội dung trích dẫn, ta có thể dùng thẻ <blockquote>
và thẻ <cite> để định dạng:
o Với thẻ <blockquote>, khối văn bản trích dẫn thụt vào một đoạn so với
những nội dung khác.
<blockquote> nội dung trích dẫn </blockquote>
o Thẻ <cite> định dạng in nghiêng khối văn bản trích dẫn
<cite> nội dung trích dẫn </cite>
Ví dụ :
<blockquote>
Tục ngữ
</blockquote>
<cite>
Công cha như núi Thái sơn <br>
Nghĩa mẹ như nước trong nguồn chảy ra <br>
Một lòng thờ mẹ kính cha <br>
Cho tròn chữ hiếu mới là đạo con <br>
</cite>
1.3.10 Văn bản đã định dạng trước
Nếu ta muốn hiển thị văn bản đã được định dạng trước, thì sử dụng thẻ <pre>
bao quanh khối văn bản đó.
<pre> Văn bản đã được định dạng </pre>
Ví dụ :
<pre>
Ở tận sông Hồng em có biết
Quê hương anh cũng có dòng sông
21
Anh mãi gọi với lòng tha thiết

Vàm cỏ đông ơi vàm cỏ đông
</pre>
1.3.11 Thẻ <div> và <span>
Hầu hết các thẻ HTML đều được xây dựng với một mục đích cụ thể, ví dụ, thẻ
<p> để tạo đoạn văn bản, thẻ <h1> để định dạng tiêu đề cấp 1,…Tuy nhiên, thẻ
<div> và <span> thì không mang một ý nghĩa cụ thể nào cả, mà mục đích chính
của chúng là phân chia nội dung trang web thành những khối thông tin logic và kết
hợp với định dạng CSS – (Cascading Style Sheets).
• Thẻ <div>, có phần gần giống thẻ <p>, là phần tử định dạng mức khối,
nhưng không chèn thêm dòng trống phía trước và sau đoạn văn bản.
<div align="left/right/center"
style="giá-trị" class="giá-trị" id="giá-trị" >
nội dung trong khối div </div>
• Thẻ <span> là phần tử định dạng trong dòng.
<span style="giá-trị" class="giá-trị" id="giá-trị" >
nội dung trong khối span </ span >
Với hai thẻ này, các thuộc tính style,class và id thường được dùng trong định dạng
CSS.
Ví dụ :
<HTML><head><title>ví dụ div –span </title></head>
<body>
<p align="center"> Đây là đoạn văn bản được định dạng bằng thẻ p </p>
<div align="right"> Còn đây là đoạn văn bản dung thẻ div, chỉ khác đoạn
trên ở chỗ không có dòng trống phía trước và phía sau.Trong đoạn div này có
<span
style="color:blue"> phần tử span định dạng màu xanh </span>
</div>
</body></HTML>
22
1.3.12 Hình ảnh

Để chèn hình ảnh vào trang web, ta sử dụng thẻ <img>:
<img width="trị-số" height="trị-số" border="trị-số"
align="left/right/center" />
Các thuộc tính của thẻ <img> :
• src : xác định đường dẫn đến file ảnh, có thể chỉ định đường dẫn tuyệt đối
đến ảnh hay dùng đường dẫn tương đối.
• alt: là phần văn bản xuất hiện trong trường hợp không hiển thị được hình
ảnh. Văn bản này cũng được hiển thị ở dạng tooltip khi ta đưa chuột đến
hình.
• width: xác định chiều rộng ảnh.
• height: xác định chiều cao ảnh.
• border: xác định độ dày đường viền ảnh.
• align: canh chỉnh hình ảnh theo lề trái, lề phải hay canh giữa.
Ví dụ :
<img src= /images/logo.gif
alt="logo trường ĐHBK." width = "107" heig = "104" />
Thêm chữ xung quanh hình ảnh :
Cú pháp: <IMG SRC=“tên file” align=“giá trị”> Nội dung
• Giá trị Top: ví trí văn bản nằm ở phái trên hình ảnh
• middle: vị trí văn bản nằm ở giữa hình ảnh
• bottom: vị trí văn bản nằm ở dưới hình ảnh
Chèn ảnh nền :
Dùng hình ảnh làm nền cho toàn trang web thay vì sử dụng màu nền sử dụng
thẻ background
Cú pháp : <BODY background=“tên tệp”>
Tên tệp là tên tệp tin hình ảnh làm nền cho trang web
23
Ví dụ :
<HTML>
<body background="background.jpg">

<h3>Ảnh nền</h3>
<p>Có thể dùng cả tập tin.JPG và.GIF làm nền HTML</p>
<p>Hiện thị tập tin hình ảnh cần làm nền cho trang web.</p>
</body>
</HTML>
1.3.13 Âm thanh
Thẻ <bgsound> cung cấp khả năng chèn âm thanh (đoạn nhạc) vào trang Web.
Âm thanh này sẽ khởi động mỗi khi người dùng mở trang Web.
<bgsound Các thuộc tính:
• src: xác định đường dẫn đến file âm thanh (.mp3, mdi, wma,…)
• loop: số lần lặp lại file âm thanh
- loop = -1 : lặp vô hạn lần
- loop = n : lặp n lần rồi tự động tắt
Ví dụ :
<bgsound src=" /sound/song1.mp3" loop=-1 />
1.3.14 Đối tượng di chuyển
Để tạo đối tượng chạy tự động trên trang web, ta dùng thẻ <marquee>:
<marquee> chuỗi kí tự hay đối tượng </marquee>
Các thuộc tính:
• direction = up/down/left/right: điều khiển hướng chạy.
• behavior = scroll/slide/alternate: kiểu chạy
• bgcolor = giá-trị-màu: màu nền cho chữ/đối tượng.
Ví dụ :
<marquee direction="right" behavior="slide" >
<img src= /images/flower.gif
width="107" height="104">
24
</marquee>
Ở ví dụ này, hình flower.gif sẽ chạy từ trái sang phải.
<marquee direction="left" behavior="scroll"

bgcolor="#FFFF00" >
Chào mừng bạn đến trang web trường ĐHBKHN.
</marquee>
Trong ví dụ Trên, dòng chữ "chào mừng bạn đến trang web trường ĐHBKHN"
sẽ chạy từ phải sang trái màn hình trên một nền màu vàng.
1.3.15 Tạo liên kết (link)
Liên kết là đặc trưng WWW, cho phép người dùng chuyển từ mục này sang
mục khác, trong cùng một trang hoặc chuyển sang một trang web này sang một
trang web khác.
Liên kết trong cùng một trang web:
Cho phép liên kết đến các mục bên trong một trang web.
• Các bước thực hiện
• Tạo một điểm neo (bookmark)
• Cú pháp: <A name=“tên điểm neo cần tạo”>nội dung</A>
• Tạo liên kết đến điểm neo
• Cú pháp: <A href=“#tên điểm neo cần liên kết đến”</A>
• Dấu # báo cho trình duyệt biết liên kết này là nội bộ
Tạo liên kết đến các trang web khác :
Cú pháp <A href=“URL”>Nội dung</A>
Ví dụ : <a herf=>ĐHBK</A>
Thuộc tính:
• target=“giá trị”: mở liên kết ở vị trí nào phụ thuộc giá trị
• blank: nạp liên kết vào một cửa sổ trống mới
• parent: nạp liên kết vào cửa sổ cha gần nhất của trang web hiện thời
• self: nạp liên kết vào cùng cửa sổ với trang web hiện hành
• top: nạp liên kết vào cửa sổ cao nhất
25