Xem mẫu
- HTML
Ngôn ngữ đánh dấu
siêu văn bản
TRỊNH CÔNG DUY
Website: http://ITF.UD.EDU.VN
- Khái quát
- Tạo lập trang Web là một vấn đề đơn giản, chỉ
cần đánh văn bản vào rồi chèn thêm các ký hiệu
đánh dấu, gọi là thẻ có dạng như sau:
văn bản chịu tác động
- Tập tin HTML luôn bắt đầu bằng thẻ và
kết thúc bằng
- Các file web tỉnh luôn có phần mở rộng là *.htm
hay *.html nhằm báo cho trình duyệt biết mà thực
thi.
- Các file web tỉnh không cần Server khi chạy, chỉ
cần nhấn đôi vào là đã có thể thực thi.
- Tổng quan trang web Html
- Các trang Web khác nhau, tẻ nhạt hay sinh động,
vô nghĩa hoặc rất cần thiết, nhưng tất cả đều có
cùng một cấu trúc cơ sở, nên đa số các trình
duyệt đang chạy trên hầu hết các kiểu máy tính
đều có thể hiển thị thành công hầu hết các trang
Web .
- Cấu trúc căn bản của trang web
< HTML>
< HEAD>
< TITLE> Tiêu đề
< /HEAD>
< BODY tham số>
... Nội dung của trang Web
< /BODY>
< /HTML>
- I C¸c thÎ ®Þnh cÊu tróc tµi liÖu
1.1 HTML
• CÆp thÎ nµy ® sö dông ® x¸c nhËn mét tµi liÖu lµ
îc Ó
tµi liÖu HTML, tøc lµ nã cã sö dông c¸c thÎ HTML ®Ó
tr× bµy. Toµn bé néi dung cña tµi liÖu ® ® gi÷
nh îc Æt a
cÆp thÎ nµy.
• Có ph¸p:
Nội dung
• Tr× duyÖt sÏ xem c¸c tµi liÖu kh«ng sö dông thÎ
nh
nh nh÷ tÖp tin v¨n b¶n b× thêng.
ng nh
- 1.2 HEAD
ThÎ HEAD ® dïng ® x¸c ®
îc Ó Þnh phÇn më ®Çu
cho tµi liÖu
Có ph¸p:
Phần đầu
1.3 TITLE
CÆp thÎ nµy chØ cã thÓ sö dông trong phÇn më
® cña tµi liÖu, tøc lµ nã ph¶i n»m trong thÎ ph¹m
Çu
vi giíi h¹n bëi cÆp thÎ .
Có ph¸p: < TITLE> Tiêu đề
- 1.4 BODY
ThÎ nµy ® sö dông ® x¸c ®
îc Ó Þnh phÇn néi dung
chÝnh cña tµi liÖu - phÇn th© (body) cña tµi liÖu.
n
Trong phÇn th© cã thÓ chøa c¸c th«ng tin ®
n Þnh
d¹ng nhÊt ® Þnh ® ® ¶nh nÒn cho tµi liÖu, mµu
Ó Æt
nÒn, mµu v¨n b¶n siªu liªn kÕt, ® lÒ cho trang tµi
Æt
liÖu... Nh÷ th«ng tin nµy ® ® ë phÇn tham sè
ng îc Æt
cña thÎ.
Có ph¸p:
< BODY>
.... phÇn néi dung cña tµi liÖu ® ® ë
îc Æt
® y©
< /BODY>
- C¸c tham s è c ña thÎ BODY
- 2.2. C¸c thÎ ®Þnh d¹ng ®Ò môc H1/H2/H3/H4/H5/H6
HTML hç trî 6 møc ® môc
Ò
... ®Þnh d¹ng ® môc cÊp 1
Ò
... ®Þnh d¹ng ® môc cÊp 2
Ò
... ®Þnh d¹ng ® môc cÊp 3
Ò
... ®Þnh d¹ng ® môc cÊp 4
Ò
... ®Þnh d¹ng ® môc cÊp 5
Ò
... ®Þnh d¹ng ® môc cÊp 6
Ò
- 2.2. C¸c thÎ ®Þnh d¹ng xuè ng dßng
Khi gÆp thÎ nµy v¨n b¶n tù xuèng dßng
• Th ẻ : Với thẻ này văn bản sẽ kết thóc mét ® vµ
o¹n
xuèng hµng (Kho¶ng c¸ch cña v¨n bµn m íi vµ v¨n b¶n cò lín
h¬n b×nh thê ng)
• Th ẻ : Với thẻ này văn bản sẽ xuèng hµng gièng nh
ta gâ Enter
VÝ dô
Cộng hoà xã hội chủ nghĩa Việt nam Độc lập - Tự do - Hạnh
phúcĐơn xin việc
Kết quả
Cộng hoà xã hội chủ nghĩa Việt nam
Độc lập - Tự do - Hạnh phúc
Đơn xin việc
- 2.3 §ê ng kÎ ngang
Đường kẻ ngang chủ yếu được dùng để phân định
một trang Web thành những phần có tính logic và d ễ nhìn
M· ng u ồn Kết qu ả
< SIZE=
HR 10>
< NOSHADE>
HR
< WIDTH=
HR 40>
< COLOR= FF0000">
HR “#
- II. C¸c thÎ ®Þnh d¹ng v¨n b¶n
2.1 ThÎ …
• Cho phÐp ® Þnh d¹ng v¨n b¶n b»ng c¸c cÊu tróc cña
chóng.
• Có ph¸p: …
C¸c gi¸ trÞ cho tham sè ALIGN:
RIGHT
J USTIFY
LEFT
CENTER
- 2.2 Sö dông mµu s ¾c trong thiÕt kÕ Web
Mét mµu ® tæng hîp tõ ba thµnh phÇn mµu
îc
chÝnh, ® lµ: §á (Red), Xanh l¸ c© (Green), Xanh
ã y
níc biÓn (Blue). Trong HTML mét gi¸ trÞ mµu lµ
mét sè nguyªn d¹ng hexa (hÖ ® Õm c¬sè 16) cã
® Þnh d¹ng nh sau:
#RRGGBB
trong ® ã:
RR - lµ gi¸ trÞ mµu §á.
GG - lµ gi¸ trÞ mµu Xanh l¸ c©y.
BB - lµ gi¸ trÞ mµu Xanh níc biÓn.
Mµu s¾c cã thÓ ® x¸c ®
îc Þnh qua thuéc tÝnh
bgcolor= hay color=. Sau dÊu b»ng cã thÓ lµ gi¸
trÞ RGB hay tªn tiÕng Anh cña mµu
- B¶ng mµu
Mµu s ¾c Gi¸ trÞ Tªn tiÕng Anh
DDá #FF0000 RED
DDá sÉm #8B0000 DARKRED
Xanh l¸ c©y #00FF00 GREEN
Xanh nh¹t #90EE90 LIGHTGREEN
Xanh níc biÓn #0000FF BLUE
Vµng #FFFF00 YELLOW
Vµng nh¹t #FFFFE0 LIGHTYELLOW
Tr¾ng #FFFFFF WHITE
DDen #000000 BLACK
X¸m #808080 GRAY
N© u #A52A2A BROWN
TÝm #FF00FF MAGENTA
TÝm nh¹t #EE82EE VIOLET
Hång #FFC0CB PINK
Da cam #FFA500 ORANGE
Mµu ® ång phôc hai qu©n #000080 NAVY
- II. C¸c thÎ ®Þnh d¹ng v¨n b¶n
2.3 §Þnh d¹ng ký tù:
Sau ® y lµ c¸c thÎ ® sö dông ® quy ®
© îc Ó Þnh c¸c
thuéc tÝnh nh in nghiªng, in ®Ëm, g¹ch ch© cho
n...
c¸c ký tù, v¨n b¶n khi ® thÓ hiÖn trªn tr× duyÖt
îc nh
< ... <
B> /B> In ®Ëm
< TRONG>...
S
< TRONG>
/S
< ... <
I> /I> In nghiªng
... < /EM>
< ... <
U> /U> In g¹ch ch©n
< UP>... < UP>
S /S ChØ sè trªn (SuperScript)
< UB>... < UB>
S /S ChØ sè díi (SubScript)
- 2.3. Chän kiÓu c h÷ cho v¨n b¶n
Có ph¸p:
...
- III. C¸c thÎ ®Þnh d¹ng danh s¸ch
1. Danh sách có trật tự
Danh sách có trật tự tự động đánh số từng thành t ố của d/s.
M· ng u ồn Kết qu ả
Yếu tố 1 1. Yếu tố 1
Yếu tố 2 2. Yếu tố 2
Yếu tố 3 3. Yếu tố 3
2. Danh sách không có trật tự
Danh sách không có trật tự đánh dấu (chẳng h ạn các núm tròn)
cho từng yếu tố của danh sách.
Mã ng u ồn Kết qu ả
Yếu tố 1
o Yếu tố 1
Yếu tố 2 o Yếu tố 2
o Yếu tố 3
Yếu tố 3
- 3. Danh sách định nghĩa
Mỗi yếu tố của danh sách bao gồm hai thành phần:
Tiêu đề được căn lề phía trái (chỉ ra bởi thẻ )
Phần giải nghĩa được căn lề thụt hơn sang phía ph ải
(chỉ ra bởi thẻ )
M· ng u ồn Kết qu ả
Yếu tố 1
Yếu tố 1
Chú giải cho yếu tố 1 Chú giải cho yếu tố 1
Yếu tố 2 Yếu tố 2
Chú giải cho yếu tố 2
Chú giải cho yếu tố 2
- 4. Danh sách kiểu thực đơn
Mỗi yếu tố của danh sách được cấp một chỉ số chẳng
hạn như dấu tròn. Trông rất giống danh sách không có tr ật t ự
M· ng u ồn Kết qu ả
Yếu tố 1 · Yếu tố 1
Yếu tố 2 · Yếu tố 2
Yếu tố 3 · Yếu tố 3
- IV. Liªn kÕt siªu v¨n b¶n
V¨n b¶n siªu liªn kÕt hay cßn gäi lµ siªu v¨n b¶n lµ
mét tõ, mét côm tõ hay mét c© trªn trang Web ®
u îc
dïng ® liªn kÕt tíi mét trang Web kh¸c
Ó
DÞc h Cæ ng Tªn file
vô
http://s e lab.vnuh.e du.vn:8080 /~dir1/dir2/dir3/inde x.HTML#c hapte r001
Tªn hÖ §ê ng C¸c tham
thè ng dÉn s è , biÕn,
nguon tai.lieu . vn
