Tài liệu CHƯƠNG 3: NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN doc
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (5.64 MB, 68 trang )
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
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> !"</title>
</head>
<! #$%&'()*+,,-
,,.#/0,,>
<body>
$ %& ' ( ) *. -
*1.2
</body>
</html>
34 35678!phần đầu(head)-
phần thân(body)9Phần đầu:;($-"-
<$%&!!9Phần thân:;=:
!!%7829
$->74 35?'7<html>@
</html>9!'7<html>@</html>'7<head>@
</head>-A'7<body>@</body>
Lưu ý:
− <title>@ </title> %&'B('7
<head>@ </head> CD2'7 <title>@ </title>
%&EF>G2-%&
!!"2EH
− /0%&B<! blah blah blah >9
I#-JK((KHÔNG%&
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 1
LM'($/'
K0N!CD9O
A"$-B!7:G7/87K
EF(G-/0
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>
PQR02>7G4 35LR*4 35.
)S8-):2>7
G9
Ví dụ:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML
2.0//EN">
<html>
T U 6AV78 *4WXI. -
*YIZ.
</html>
b. Thẻ tag <HEAD>
T?ER878!"2L
R<$<=>7
9
<head>
<title> ! ! " [ >7
</title>
</head>
Phần mở rộng trong thẻ tag <head>
R <head> A :
78\
− Thẻ tag <base>M<]
^K>7G
− Thẻ tag <title> M'!!"
>7G
− Thẻ tag <meta>M:$
<>7G9
c. Thẻ tag <BODY>
PQR:02>7
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 2
Cú pháp
<body>
T2>7%&_GQ
</body>
Các thuộc tính của thẻ <body>
− BACKGROUND\IM>7K
"
Cú pháp
<body BACKGROUND="imagename.gif">
T2>7%&_GQ
</body>
Lưu ý: 4"7KAG:`9a`9b7L
McWd7eH&!
G`979
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body background="I:\Pictures\Anhnen\Oakgrain.jpg">
<p><font color="blue">f-7
-gc</font></p>
</body>
</html>
4!
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 3
− BGCOLOR:h>7"
Cú pháp
<body BGCOLOR="#rrggbb">
T2>7%&_GQ
</body>
Lưu ý\i[jkjdl>7Fm,
,9
4%&>7>7F7Q
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
knonpnn q knXWIr
q koonnnn q krnnnIs
t knonnnn knunuIf
q knnWsfs < koooooo
knnWfI koooonn
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
- kpXVWV kXuVXVX
kIWppr kunvWXo
krnnnoo kIVwvxW
knnrnuo y kwsvuWI
< knnnpIf kIfxszf
koonnnn < koooop
< koopp < kppwo
< kXvXvXv < koowsoo
<<< kIrw < kpoop
<- kuuwVn < knnpfoo
< kvvzVff < kpoooo
< kWvvwrX < kpnfpn
< kspzIp < kVnsnsn
<q koofWIx <- kvsooIz
77< knnxsvz 7< koonn
kwvwvwv kxWvonn
U< kVVVVV y knnnXno
a kVVpVV a knnoonn
kIfIfIf knpnpnn
knnIroo kIXXuVo
kpopopo koopooo
kXInnVn knonnno
7< knnwvs kfIufuf
ksoopV -L knnnnno
<< knoWwpf - kWwWwnX
- knnnonu krfnfoo
{ knnnXfI kXIIpWw
knopopo kWonnnn
knXnXIV kvoWWvo
kIzIzIz 7< knnwfx
knnXorX kVoVXX
< kprfWnX krrppvv
kofsIW knnnnWo
koonnoo kzVfIzV
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 5
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
knXnoWw knnoonn
kpooooo q
kwwfIXX
koooofI kXuuIz
77 kvzroI
kzfzrx
krwpWW 7
koonXvX
q
kspIxff - kfrxupu
kxvxvro knunnnX
knnWsWx knnWsu
-b knnIWXI, - koooopo
knInuWw - kpopooo
- kwpWVz knnXuoo
knnsuoo kIXroIw
7 kWWWpXX 7 kvpnvp
7q kXnWWWW 7- kIrovz
777 knnWnIu 77{ knnIXv
7 kfIpuzn 7< knnfof
7 kIIXoII 7 koWoWw
77 kpooopo knnoooo
kfpnpn ksxwvWx
kpsuxz knXporV
knsXswo kVWpur
knnnuWW kXouVVI
- kfofofo < kprfWW
kwXuXfI kropovo
knnnXnX 7 koonnrn
L kswpVs kIVspf
koopopo kIpnIp
knnwzsr q ksoWoIo
- kWWpVWW knuIWz
knnnnnn < knununu
knnnnoo kvXfIzV
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 6
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
Trình duyệt Web Internet Explorer có thể xác lập 16 màu theo
tên gọi như sau:
Màu hiển thị Màu hiển thị Màu hiển thị Màu hiển thị
< |- }
3 ~ •7 n
} 5 Y- Z
T- Xq
− TEXT: 0]-JK
%€>7
Cú pháp
<body TEXT="#rrggbb">
T2>7%&_GQ
</body>
Lưu ý\fd>7•%}fY5Y~9
Mã nguồn
<html>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 7
<head>
<title> </title>
</head>
<body bgcolor="yellow" text="blue">
<p> Chao mung cac ban den voi lop hoc Thuong mai
dien tu va Ung dung Internet </p>
</body>
</html>
4!
− LINK, VLINK và ALINK:f0M
]#-JK•%&
2••!<9
ALINK!<%d
VLINK!<‚d
ALINK!<d
Cú pháp
<body LINK="#rrggbb" VLINK="#rrggbb"
ALINK="#rrggbb">
T2>7%&_GQ
</body>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 8
Lưu ý: 3' LINK=blue lkoooonnmL VLINK=purple
lkpooopom-ALINK=redlknnoooom9
f:d>7•}fY5Y~- Wh
− LEFTMARGIN: 0M "
9
Cú pháp
<body LEFTMARGIN="X">
T2>7%&_GQ
</body>
Lưu ý:h•!L%&0?•%&7d
ƒ!
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body leftmargin="100">
<p> Chao mung cac ban den voi lop hoc Thuong mai
dien tu va Ung dung Internet </p>
</body>
</html>
4!
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 9
− TOPMARGIN: 0M"!
!
Cú pháp
<body TOPMARGIN="X">
T2>7%&_GQ
</body>
Lưu ý:h•!L%&0?•%&7d
ƒ!d•%[
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body topmargin="100">
<p> Chao mung cac ban den voi lop hoc Thuong mai
dien tu va Ung dung Internet </p>
</body>
</html>
4!
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 10
2. Các thẻ định nghĩa đoạn văn bản, kiểu chữ
a. Thẻ tag P\PDG-JK9
Cú pháp: <P> nội dung đoạn văn bản </P>
Các thuộc tính của thẻ P
− <P ALIGN=LEFT> </P>: Tất cả nội dùng nằm giữa
tag này sẽ được canh về bên phía trái lề trang web. Đây cũng là thẻ
mặc định.
− <P ALIGN=CENTER> </P>: Tất cả nội dung nằm
giữa hai tag này sẽ được canh giữa
− <P ALIGN=RIGHT> </P>: Tất cả nội dung nằm
giữa hai tag này sẽ được canh phải
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body>
<p>Id</p>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 11
</body>
</html>
4!
b. Thẻ tag BR:IMd•#9
Cú pháp: <BR>
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body>
<p>Idx</p><br>
<p>IdV</p><br>
<br>
<br>
<p>Idz</p>
</body>
</html>
4!
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 12
c. Thẻ tag H: Quy định kích cỡ của tiêu đề.
Cú pháp: <Hx> Tiêu đề </Hx>
Trong đó: x =1,2,3,4,5,6. x càng nhỏ cỡ chữ càng lớn.
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body>
<H1> l4xm </H1>*.
<H2> l4Vm</H2>*.
<H3> l4zm</H3>*.
<H4> l4sm</H4>*.
<H5> l4um</H5>*.
<H6> </H6>
</body>
</html>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 13
4!
d. Thẻ tag B\4(>9
Cú pháp\*.•8(>*1.
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body>
<p> •d< </p><br>
<p><b> •d </b></p>
</body>
</html>
4!
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 14
e. Thẻ tag I: Hiển thị chữ in nghiêng.
Cú pháp: <I>Phần chữ nghiêng</I>
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body>
<p> •d< </p><br>
<p><i> •d </i></p>
</body>
</html>
4!
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 15
f. Thẻ tag U: Hiển thị chữ gạch chân.
Cú pháp: <U>Phần chữ gạch chân</U>
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body>
<p> •d< </p><br>
<p><u> •d </u></p>
</body>
</html>
4!
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 16
g. Thẻ tag FONT: Quy định font chữ.
Cú pháp: <FONT FACE=”tên font” COLOR=”mã màu hoặc tên màu”
size=”số nguyên”>
3 •! a$ F\9i „9i 4„ 9iX„
9iX4„9iX-„
Mã nguồn
<html>
<head>
<title> </title>
*7,q-…jf, 7j…jd1„
…a,pj.
</head>
<body>
<p> <font face="Arial" color="#000000" size="2">
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 17
•8dAaX†gL‡(?VL
</font> </p><br>
</body>
</html>
4!
h. Thẻ tag Sub: Hiển thị chữ nhỏ chỉ số dưới.
Cú pháp: <SUB>Phần chữ nhỏ chỉ số dưới</SUB>
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body>
<p> P•%&<sub>f</sub></p><br>
</body>
</html>
4!
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 18
Mã nguồn
<html>
<head>
<title> </title>
* 7,q-…jf, 7j …jd1„
…a,pj.
</head>
<body>
<font face="Arial" color="red" size="3"> •
a X gL zL
</font><font face="Arial" color="blue"
size="2"><sub>f</sub></font>
</body>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 19
</html>
4!
i. Thẻ tag Sup: Hiển thị chữ nhỏ chỉ số trên.
Cú pháp: <SUP> Phần chữ nhỏ chỉ số trên</SUP>
Mã nguồn
<html>
<head>
<title> </title>
</head>
<body>
<p> P•%&<sup>f</sup></p><br>
</body>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 20
</html>
4!
Mã nguồn
<html>
<head>
<title> </title>
* 7,q-…jf, 7j …jd1„
…a,pj.
</head>
<body>
<font face="Arial" color="blue" size="3"> •
a X gL zL
d</font><font face="Arial" color="red"
size="2"><sup>f</sup></font>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 21
</body>
</html>
4!
j. Thẻ tag DL: Dùng để định nghĩa một danh sách.
Cú Pháp
<DL>Đề mục danh sách
*I .I:x*1I .
*I .I:x*1I .
*II.I:V*1II.
<DD>Danh sách mức 2</DD>
<DT>Danh sách mức 1</DT>
<DD>Danh sách mức 2</DD>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 22
</DL>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 23
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 24
Mã nguồn
<html>
<head>
<title> </title>
* 7,q-…jf, 7j …jd1„
…a,pj.
</head>
<body>
<DL><B><I>I</I></B>
<DT>Ix</DT>
<DT>Ix</DT>
<DD>IV</DD>
<DD>IV</DD>
<DT>Ix</DT>
<DD>IV</DD>
<DT>@999</DT>
</DL>
</body>
</html>
4!
k. Thẻ tag UL\ GA
Cú pháp:
<UL>
<LI>Text1</LI>
*5c. dz*15c.
<LI>Text3</LI>
….
</UL>
Môn học: Thương mại điện tử và Ứng dụng Internet Trang 25
