CH NG 3: NGÔN NG ĐÁNH D U SIÊU VĂN B N ƯƠ Ữ Ấ Ả
HTML – HYPER TEXT MAKEUP LANGUAGE
I. Khái ni mệ
HTML hay HyperText Markup Language là ngôn ng đánh d u siêu văn b n, đây làữ ấ ả
m t ngôn ng thông d ng đ c đ nh d ng ộ ữ ụ ượ ị ạ đ báo cho trình duy t Web – Web Browser làmể ệ
th nào đ hi n th m t trang Web ế ể ệ ị ộ trên màn hình máy tính. Ngôn ng HTML không ph i làữ ả
m t ngôn ng l p trình, HTML g i là ngôn ng ch vì nó g m các t p h p nh các nhómộ ữ ậ ọ ữ ỉ ồ ậ ợ ỏ
ký t theo m t quy t c mà chúng ta dùng đ quy đ nh ki u dáng, v trí, cách th c c a vănự ộ ắ ể ị ể ị ứ ủ
b n, nh, âm thanh hay b t c m t đ i t ng nào khác cùng v i s liên k t gi a chúng.ả ả ấ ứ ộ ố ượ ớ ự ế ữ
Các trang vi t b ng ngôn ng HTML có c u trúc nh sau:ế ằ ữ ấ ư
<html>
<head>
<title>Tiêu đề</title>
</head>
<!-- các dòng thông tin đ c đ t gi a hai d u tag <!-- và --> là các dòng chúượ ặ ữ ấ
thích-->
<body>
Thông tin đ c đ t gi a hai d u tag <body> và </body> là n i dungượ ặ ữ ấ ộ
c a trang Webủ
</body>
</html>
M t tài li u HTML g m hai ph n riêng bi t là ộ ệ ồ ầ ệ ph n đ uầ ầ (head) và ph n thânầ
(body). Ph n đ uầ ầ ch a đ ng nh ng thông tin v tài li u và không đ c hi n th lên trênứ ự ữ ề ệ ượ ể ị
màn hình. Ph n thânầ ch a đ ng m i th trình bày lên trên màn hình nh là m t ph n c aứ ự ọ ứ ư ộ ầ ủ
trang Web. Toàn b công vi c đ thành l p m t trang HTML n m trong c p tag ộ ệ ể ậ ộ ằ ặ <html>
… </html>. Bên trong c p tag ặ<html> … </html> là c p tag ặ<head>… </head> và sau đó
là c p tag ặ<body>… </body>
L u ý:ư
−Tag <title>… </title> đ c đ t gi a hai c p tag ượ ặ ở ữ ặ <head>…
</head> ý nghĩa c a c p tag ủ ặ <title>… </title> đ c s d ng đ nh n d ng c aượ ử ụ ể ậ ạ ủ
m t tài li u và đ c hi n th trên thanh tiêu đ c a c a s Browser ộ ệ ượ ể ị ề ủ ử ổ
−Tag chú thích đ c bao b i ượ ở <!-- blah blah blah -->. Dòng văn b nả
gi a nh ng tag này ữ ữ KHÔNG đ c hi n th trong trang Web, tag này dùng đượ ể ị ể
đ t nh ng thông tin ghi chú ho c gi i thích làm rõ thêm ý nghĩa cho n i dungặ ữ ặ ả ộ
Môn h c: Th ng m i đi n t và ng d ng Internetọ ươ ạ ệ ử Ứ ụ
Trang 1
trang Web. Khi trang Web có nhi u thông tin và tr nên ph c t p thì chúng taề ở ứ ạ
c n ph i s d ng nh ng tag này đ minh ho và chú thíchầ ả ử ụ ữ ể ạ
II. Ý nghĩa c a các Tag HTMLủ
1. Các th m r ng trong ph n th tag <HTML> và th tag <HEAD>ẻ ở ộ ầ ẻ ẻ
a. Th tag <HTML> ẻ
Đây là th chính y u c a t p tin d ng HTML, th <HTML> đánh d uẻ ế ủ ậ ạ ẻ ấ
đi m b t đ u và ch m d t n i dung c a m t t p tin d ng html. ể ắ ầ ấ ứ ộ ủ ộ ậ ạ
Ví d : ụ
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
N i dung file g m có 2 ph n là <HEAD> và <BODY> ộ ồ ầ
</html>
b. Th tag <HEAD> ẻ
N i dung n m gi a th n y là ph n tiêu đ c a trang Web, th nàyộ ằ ử ẻ ầ ầ ề ủ ẻ
không hi n th khi trình duy t Web Browse đ c t p tin html. ể ị ệ ọ ậ
<head>
<title> Tên tiêu đ gi i thi u t p tin ề ớ ệ ậ </title>
</head>
Ph n m r ng trong th tag <head>ầ ở ộ ẻ
Trong n i dung th tag ộ ẻ <head> có th ch a các thành ph n sau: ể ứ ầ
−Th tag <base>ẻ dùng đ khai báo m t đ a ch c b n choể ộ ị ỉ ơ ả
t p tin d ng html ậ ạ
−Th tag <title> ẻdùng đ đ t tên tiêu đ cho t p tin d ngể ặ ề ậ ạ
html
−Th tag <meta>ẻ dùng đ ch a các thông tin khác t p tinể ứ ậ
d ng html. ạ
c. Th tag <BODY> ẻ
Đây là th ch a n i dung chính c a t p tin htmlẻ ứ ộ ủ ậ
Cú pháp
<body>
N i dung c a t p tin html đ c chèn t i đâyộ ủ ậ ượ ạ
</body>
Các thu c tính c a th <body>ộ ủ ẻ
−BACKGROUND: Dùng m t t p tin hình nh làm n n cho trangộ ậ ả ề
web
Môn h c: Th ng m i đi n t và ng d ng Internetọ ươ ạ ệ ử Ứ ụ
Trang 2
Cú pháp
<body BACKGROUND="imagename.gif">
N i dung c a t p tin html đ c chèn t i đây ộ ủ ậ ượ ạ
</body>
L u ý:ư Hình n n ph i có d ng th c *.gif hay *.jpg, n u dùng trình duy tề ả ạ ứ ế ệ
Web Internet Explorer s h tr thêm d ng *.bmp. ẽ ổ ợ ạ
Mã ngu nồ
<html>
<head>
<title>Test </title>
</head>
<body background="I:\Pictures\Anhnen\Oakgrain.jpg">
<p> <font color="blue">Chao mung cac ban den voi lop hoc Thuong mai
dien tu va Ung dung Internet </font></p>
</body>
</html>
Hi n th trên trình duy t Webể ị ệ
Môn h c: Th ng m i đi n t và ng d ng Internetọ ươ ạ ệ ử Ứ ụ
Trang 3
−BGCOLOR: Xác l p màu n n cho trang Web ậ ề
Cú pháp
<body BGCOLOR="#rrggbb">
N i dung c a t p tin html đ c chèn t i đây ộ ủ ậ ượ ạ
</body>
L u ýư: V i "#rrggbb" là giá tr hexadecimal (th p l c) red-green-blue. ớ ị ậ ụ
H màu đ c thi t l p theo h th p l c phân ệ ượ ế ậ ệ ậ ụ
Trình duy t Web Netscape có th xác l p 140 màu theo h th p l c nh sau:ệ ể ậ ệ ậ ụ ư
Màu hi n thể ị S th p l c phânố ậ ụ Màu hi n thể ị S th p l c phânố ậ ụ
aliceblue #F0F8FF antiquewhite #FAEBD7
aqua #00FFFF aquamarine #7FFFD4
azure #F0FFFF beige #F5F5DC
bisque #FFE4C4 black #000000
blanchedalmond #FFEBCD blue #0000FF
blueviolet #8A2BE2 brown #A52A2A
burlywood #DEB887 cadetblue #5F9EA0
chartreuse #7FFF00 chocolate #D2691E
coral #FF7F50 cornflowerblue #6495ED
cornsilk #FFF8DC crimson #DC143C
cyan #00FFFF darkblue #00008B
darkcyan #008B8B darkgoldenrod #B8860B
darkgray #A9A9A9 darkgreen #006400
darkkhaki #BDB76B darkmagenta #8B008B
darkolivegreen #556B2F darkorange #FF8C00
darkorchid #9932CC darkred #8B0000
darksalmon #E9967A darkseagreen #8FBC8F
darkslateblue #483D8B darkslategray #2F4F4F
darkturquoise #00CED1 darkviolet #9400D3
deeppink #FF1493 deepskyblue #00BFBF
dimgray #696969 dodgerblue #1E90FF
firebrick #B22222 floralwhite #FFFAF0
forestgreen #228B22 fuchsia #FF00FF
gainsboro #DCDCDC ghostwhite #F8F8FF
gold #FFD700 goldenrod #DAA520
gray #808080 green #008000
greenyellow #ADFF2F honeydew #F0FFF0
Môn h c: Th ng m i đi n t và ng d ng Internetọ ươ ạ ệ ử Ứ ụ
Trang 4
Trình duy t Web Netscape có th xác l p 140 màu theo h th p l c nh sau:ệ ể ậ ệ ậ ụ ư
Màu hi n thể ị S th p l c phânố ậ ụ Màu hi n thể ị S th p l c phânố ậ ụ
hotpink #FF69B4 indianred #CD5C5C
indigo #4B0082 ivory, #FFFFF0
khaki #F0E68C lavender #E6E6FA
lavenderblush #FFF0F5 lawngreen #7CFC00
lemonchiffon #FFFACD lightblue #ADD8E6
lightcoral #F08080 lightcyan #E0FFFF
lightgoldenrodyellow #FAFAD2 lightgreen #90EE90
lightgrey #D3D3D3 lightpink #FFB6C1
lightsalmon #FFA07A lightseagreen #20B2AA
lightskyblue #87CEFA lightslategrey #778899
lightsteelblue #B0C4DE lightyellow #FFFFE0
lime #00FF00 limegreen #32CD32
linen #FAF0E6 magenta #FF00FF
maroon #800000 mediumaquamarine #66CDAA
mediumblue #0000CD mediumorchid #BA55D3
mediumpurple #9370DB mediumseagreen #3CB371
mediumslateblue #7B68EE mediumspringgreen #00FA9A
mediumturquoise #48D1CC mediumvioletred #C71585
midnightblue #191970 mintcream #F5FFFA
mistyrose #FFE4E1 moccasin #FFE4B5
navajowhite #FFDEAD- navy #000080
oldlace #FDF5E6 olive #808000
olivedrab #6B8E23 orange #FFA500
orangered #FF4500 orchid #DA70D6
palegoldenrod #EEE8AA palegreen #98FB98
paleturquoise #AFEEEE palevioletred #DB7093
papayawhip #FFEFD5 peachpuff #FFDAB9
peru #CD853F pink #FFC0CB
plum #DDA0DD powderblue #B0E0E6
purple #800080 red #FF0000
rosybrown #BC8F8F royalblue #4169E1
saddlebrown #8B4513 salmon #FA8072
sandybrown #F4A460 seagreen #2E8B57
seashell #FFF5EE sienna #A0522D
silver #C0C0C0 skyblue #87CEEB
slateblue #6A5ACD slategray #708090
Môn h c: Th ng m i đi n t và ng d ng Internetọ ươ ạ ệ ử Ứ ụ
Trang 5