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

đế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

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

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.

…………
</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ị

</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

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>

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

<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

Để 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">

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