Giới thiêu ngôn ngữ HTML - Dùng để thiết kế Web
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 (734.9 KB, 101 trang )
<HTML>
Toàn b n i dung c a trang đ t đâyộ ộ ủ ặ ở
</HTML>
Ch ng 1: Gi i thi u ngôn ng HTMLươ ớ ệ ữ
1. T ng quanổ
1.1 Gi i thi uớ ệ
HTML (Hypertext Markup Language): Ngôn ng đánh d u siêu văn b nữ ấ ả
Siêu văn b n (Hypertext): là các liên k t đ n các trang web khác.ả ế ế
Đánh d u (Markup): g m m t vài mã đ n gi n đ t o ra văn b n nét đ m ho cấ ồ ộ ơ ả ể ạ ả ậ ặ
nghiêng, các hình đ ho chèn thêm vào, cùng v i s xác đ nh các m i liên k t siêu văn b n ồ ạ ớ ự ị ố ế ả
Ngôn ng (Language): g m các t p h p nh các nhóm hai đ n ba ch và các t dùngữ ồ ậ ợ ỏ ế ữ ừ
đ quy đ nh các lo i đ i t ng trên m t Website.ể ị ạ ố ượ ộ
1.2 C u trúc c b n c a m t trang webấ ơ ả ủ ộ
<HTML>
<HEAD>
<TITLE> tên trang </TITLE>
<! Các th tiêu đ khác >ẻ ề
</HEAD>
<BODY>
<! Văn b n và các th c a trang Web >ả ẻ ủ
</BODY>
</HTML>
2. Các th HTMLẻ
2.1 Các th đ nh c u trúc tài li uẻ ị ấ ệ
2.1.1 <HTML>
C p th này đ c s d ng đ xác nh n m t tài li u là tài li u HTML. Toàn b n iặ ẻ ượ ử ụ ể ậ ộ ệ ệ ộ ộ
dung c a tài li u đ c đ t gi a c p th này.ủ ệ ượ ặ ữ ặ ẻ
Cú pháp:
Trình duy t s xem các tài li u không s d ng th ệ ẽ ệ ử ụ ẻ <HTML> nh nh ng t p tin vănư ữ ệ
b n bình th ng.ả ườ
Trang 1
<HEAD>
Ph n m đ u ch a tiêu đ c a trang Webầ ở ầ ứ ề ủ
</HEAD>
<TITLE>Tiêu đ trang Web</ề TITLE>
<BODY>
Ph n n i dung c a trang Webầ ộ ủ
</BODY>
2.1.2 <HEAD>
Th ẻ <HEAD> đ c dùng đ xác đ nh ph n m đ u cho tài li u.ượ ể ị ầ ở ầ ệ
Cú pháp:
2.1.3 <TITLE>
C p th này ch có th s d ng trong ph n m đ u c a tài li u, t c là nó ph i n mặ ẻ ỉ ể ử ụ ầ ở ầ ủ ệ ứ ả ằ
trong th ph m vi gi i h n b i c p th ẻ ạ ớ ạ ở ặ ẻ <HEAD>.
Cú pháp:
Chú ý:
• Xâu ký t n m gi a <TITLE> và </TITLE> không hi n th trên trang Web mà hi n thự ằ ữ ể ị ể ị
t i thanh phía trên c a Browser. ạ ủ
• Xâu ký t n m gi a <TITLE> và </TITLE> đ c đ t trong ph n header khi trang Webự ằ ữ ượ ặ ầ
đ c in ra. ượ
• Xâu ký t n m gi a <TITLE> và </TITLE> đ c ghi l i khi b n c p nh t trang Webự ằ ữ ượ ạ ạ ậ ậ
này vào m c các trang Web yêu thích (Favorites).ụ
2.1.4 <BODY>
Th này đ c s d ng đ xác đ nh ph n n i dung chính c a tài li u - ph n thânẻ ượ ử ụ ể ị ầ ộ ủ ệ ầ
(body) c a tài li u. Trong ph n thân có th ch a các thông tin đ nh d ng nh t đ nh đ đ tủ ệ ầ ể ứ ị ạ ấ ị ể ặ
nh n n cho tài li u, màu n n, màu văn b n siêu liên k t, đ t l cho trang tài li u Nh ngả ề ệ ề ả ế ặ ề ệ ữ
thông tin này đ c đ t ph n tham s c a th .ượ ặ ở ầ ố ủ ẻ
Cú pháp:
M t s các thu c tính c a th ộ ố ộ ủ ẻ <BODY>:
BACKGROUND= Đ t m t nh nào đó làm nh n n (background)ặ ộ ả ả ề
cho văn b n. Giá tr c a tham s này (ph n sauả ị ủ ố ầ
d u b ng) là URL c a file nh. N u kích th cấ ằ ủ ả ế ướ
nh nh h n c a s trình duy t thì toàn b mànả ỏ ơ ử ổ ệ ộ
hình c a s trình duy t s đ c lát kín b ngử ổ ệ ẽ ượ ằ
nhi u nh.ề ả
BGCOLOR= Đ t m u n n cho trang khi hi n th . N u c haiặ ầ ề ể ị ế ả
tham s ố BACKGROUND và BGCOLOR cùng
có giá tr 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= Xác đ nh màu ch c a văn b n, k c các đị ữ ủ ả ể ả ề
m c.ụ
ALINK=,VLINK=,LI
NK=
Xác đ nh màu s c cho các siêu liên k t trong vănị ắ ế
b n. T ng ng, alink (ả ươ ứ active link) là liên k tế
đang đ c kích ho t - t c là khi đã đ c kíchượ ạ ứ ượ
Trang 2
<HTML>
<HEAD>
<TITLE>Tiêu đ c a tài li uề ủ ệ </TITLE>
</HEAD>
<BODY Các tham s n u có>ố ế
N i dung c a tài li uộ ủ ệ
</BODY>
</HTML>
<P>N i dung đo n văn b n</ộ ạ ả P>
chu t lên; vlink (ộ visited link) ch liên k t đã t ngỉ ế ừ
đ c kích ho t; ượ ạ
Nh v y m t tài li u HTML c b n có c u trúc nh sau:ư ậ ộ ệ ơ ả ấ ư
Th c hành:ự
- H c sinh t o m t trang web đ n gi n b ng NotePad v i c u trúc c b n đã h c:ọ ạ ộ ơ ả ằ ớ ấ ơ ả ọ
• Tiêu đ : Design Simple Websiteề
• N i dung hi n th : ộ ể ị Xin chào! Thi t k web th t là d !ế ế ậ ễ
• Màu n n trang web: Cyanề
• Màu ch : Màu đàữ
• Có nh n n tùy ý.ả ề
- Duy t trang web v i Internet Explore.ệ ớ
Mã ngu n:ồ
<HTML>
<HEAD>
<TITLE>Design Simple Website</TITLE>
</HEAD>
<BODY bgcolor="cyan">
Xin chào! Thi t k web th t là d !ế ế ậ ễ
</BODY>
</HTML>
2.2 Các th đ nh d ng kh iẻ ị ạ ố
2.2.1 <P> và <BR>
Th ẻ <P> đ c s d ng đ b t đ u m t đo n văn b n.ượ ử ụ ể ắ ầ ộ ạ ả
Cú pháp:
Th ẻ <BR> không có th k t thúc t ng ng (ẻ ế ươ ứ </BR>), nó có tác d ng chuy n sangụ ể
dòng m i. L u ý, n i dung văn b n trong tài li u HTML s đ c trình duy t Web th hi nớ ư ộ ả ệ ẽ ượ ệ ể ệ
liên t c, các kho ng tr ng li n nhau, các ký t tab, ký t xu ng dòng đ u đ c coi nh m tụ ả ắ ề ự ự ố ề ượ ư ộ
kho ng tr ng. Đ xu ng dòng trong tài li u, b n ph i s d ng th ả ắ ể ố ệ ạ ả ử ụ ẻ <BR>
Ví d 1:ụ
<HTML>
<HEAD>
<TITLE>Design Simple Website</TITLE>
</HEAD>
<BODY>
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ơ ệ
</BODY>
Trang 3
</HTML>
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ộ ộ ủ ệ ộ ậ ự ạ ơ ệ
Ví d 2:ụ
<HTML>
<HEAD>
<TITLE>Design Simple Website</TITLE>
</HEAD>
<BODY>
C ng hoà xã h i ch nghĩa Vi t nam<BR>ộ ộ ủ ệ
Đ c l p - T do - H nh phúc <P>ộ ậ ự ạ
Đ n xin vi cơ ệ
</BODY>
</HTML>
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.2.2 <H1>, <H2>, <H3>, <H4>, <H5>, <H6>
HTML h tr 6 m c đ m c. Chú ý r ng đ m c ch là các ch d n đ nh d ng v m tỗ ợ ứ ề ụ ằ ề ụ ỉ ỉ ẫ ị ạ ề ặ
logic, t c là m i trình duy t s th hi n đ m c d i m t khuôn d ng thích h p. Có th ứ ỗ ệ ẽ ể ệ ề ụ ướ ộ ạ ợ ể ở
trình duy t này là font ch 14 point nh ng sang trình duy t khác là font ch 20 point. Đ m cệ ữ ư ệ ữ ề ụ
c p 1 là cao nh t và gi m d n đ n c p 6.ấ ấ ả ầ ế ấ
D i đây là các th dùng đ đ nh d ng văn b n d ng đ m c:ướ ẻ ể ị ạ ả ở ạ ề ụ
<H1> </H1> Đ nh d ng đ m c c p 1ị ạ ề ụ ấ
<H2> </H2> Đ nh d ng đ m c c p 2ị ạ ề ụ ấ
<H3> </H3> Đ nh d ng đ m c c p 3ị ạ ề ụ ấ
<H4> </H4> Đ nh d ng đ m c c p 4ị ạ ề ụ ấ
<H5> </H5> Đ nh d ng đ m c c p 5ị ạ ề ụ ấ
<H6> </H6> Đ nh d ng đ m c c p 6ị ạ ề ụ ấ
Ví d :ụ
<HTML>
<HEAD>
<TITLE>Design Simple Website</TITLE>
</HEAD>
<BODY>
<H1>Đây là đ u đ 1</H1> ầ ề
<H2>Đây là đ u đ 2</H2> ầ ề
<H3>Đây là đ u đ 3</H3> ầ ề
<H4>Đây là đ u đ 4</H4> ầ ề
<H5>Đây là đ u đ 5</H5> ầ ề
<H6>Đây là đ u đ 6</H6>ầ ề
</BODY>
</HTML>
K t qu :ế ả
Trang 4
Đây là đ u đ 1ầ ề
Đây là đ u đ 2ầ ề
Đây là đ u đ 3ầ ề
Đây là đ u đ 4ầ ề
Đây là đ u đ 5ầ ề
Đây là đ u đ 6ầ ề
2.3 Các th đ nh d ng danh sáchẻ ị ạ
2.3.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 danh sách. ậ ự ự ộ ố ừ ố ủ
Mã ngu nồ K t quế ả
<OL>
<LI>Y u t 1ế ố
<LI>Y u t 2ế ố
<LI>Y u t 3ế ố
</OL>
1. Y u t 1ế ố
2. Y u t 2ế ố
3. Y u t 3ế ố
2.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ã ngu nồ K t quế ả
<UL>
<LI>Y u t 1ế ố
<LI>Y u t 2ế ố
<LI>Y u t 3ế ố
</UL>
o Y u t 1ế ố
o Y u t 2ế ố
o Y u t 3ế ố
Mã ngu nồ K t quế ả
<MENU>
<LI>Y u t 1ế ố
<LI>Y u t 2ế ố
<LI>Y u t 3ế ố
</MENU>
Y u t 1ế ố
Y u t 2ế ố
Y u t 3ế ố
2.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 ề ượ ề ỉ ở ẻ <DT>)
• Ph n gi i nghĩa đ c căn l th t h n sang phía ph i (ch ra b i th ầ ả ượ ề ụ ơ ả ỉ ở ẻ <DD>)
Mã ngu nồ K t quế ả
<DL>
<DT>Y u t 1ế ố
<DD>Chú gi i cho y u t 1ả ế ố
<DT>Y u t 2ế ố
<DD>Chú gi i cho y u t 2ả ế ố
Y u t 1ế ố
Chú gi i cho y u t 1ả ế ố
Y u t 2ế ố
Chú gi i cho y u t 2ả ế ố
Trang 5
</DL>
2.4 Các th đ nh d ng ký tẻ ị ạ ự
2.4.1 Các th đ nh d ng in ký tẻ ị ạ ự
Sau đây là các th đ c s d ng đ quy đ nh các thu c tính nh in nghiêng, in đ m,ẻ ượ ử ụ ể ị ộ ư ậ
g ch chân cho các ký t , văn b n khi đ c th hi n trên trình duy t.ạ ự ả ượ ể ệ ệ
<B> </B>
<STRONG> </STRONG>
In ch đ mữ ậ
<I> </I>
<EM> </EM>
In ch nghiêngữ
<U> </U> In ch g ch chânữ ạ
<DFN> Đánh d u đo n văn b n gi a hai th này làấ ạ ả ữ ẻ
đ nh nghĩa c a m t t . Chúng th ngị ủ ộ ừ ườ
đ c in nghiêng ho c th hi n qua m tượ ặ ể ệ ộ
ki u đ c bi t nào đó.ể ặ ệ
<S> </S>
<STRIKE> </STRIKE>
In ch b g ch ngang.ữ ị ạ
<BIG> </BIG> In ch l n h n bình th ng b ng cách tăngữ ớ ơ ườ ằ
kích th c font hi n th i lên m t. Vi c sướ ệ ờ ộ ệ ử
d ng các th <ụ ẻ BIG>l ng nhau t o ra hi uồ ạ ệ
ng ch tăng d n. Tuy nhiên đ i v i m iứ ữ ầ ố ớ ỗ
trình duy t có gi i h n v kích th c đ iệ ớ ạ ề ướ ố
v i m i font ch , v t quá gi i h n này,ớ ỗ ữ ượ ớ ạ
các th <ẻ BIG> s không có ý nghĩa.ẽ
<SMALL> </SMALL> In ch nh h n bình th ng b ng cáchữ ỏ ơ ườ ằ
gi m kích th c font hi n th i đi m t.ả ướ ệ ờ ộ
Vi c s d ng các th <ệ ử ụ ẻ SMALL>l ng nhauồ
t o ra hi u ng ch gi m d n. Tuy nhiênạ ệ ứ ữ ả ầ
đ i v i m i trình duy t có gi i h n vố ớ ỗ ệ ớ ạ ề
kích th c đ i v i m i font ch , v t quáướ ố ớ ỗ ữ ượ
gi i h n này, các th <ớ ạ ẻ SMALL> s khôngẽ
có ý nghĩa.
<SUP> </SUP> Đ nh d ng ch s trên (SuperScript)ị ạ ỉ ố
<SUB> </SUB> Đ nh d ng ch s d i (SubScript)ị ạ ỉ ố ướ
<BASEFONT> Đ nh nghĩa kích th c font ch đ c sị ướ ữ ượ ử
d ng cho đ n h t văn b n. Th này ch cóụ ế ế ả ẻ ỉ
m t tham s size= xác đ nh c ch . Thộ ố ị ỡ ữ ẻ
<BASEFONT> không có th k t thúc.ẻ ế
<FONT> </FONT> Ch n ki u ch hi n th . Trong th này cóọ ể ữ ể ị ẻ
th đ t hai tham s size= ho c color= xácể ặ ố ặ
đ nh c ch và màu s c đo n văn b n n mị ỡ ữ ắ ạ ả ằ
gi a hai th . Kích th c có th là tuy tữ ẻ ướ ể ệ
đ i (nh n giá tr t 1 đ n 7) ho c t ngố ậ ị ừ ế ặ ươ
đ i (+2,-4 ) so v i font ch hi n t i.ố ớ ữ ệ ạ
Ví d :ụ
M t s th đ nh d ng ki u ch và k t qu th hi n trên trình duy t:ộ ố ẻ ị ạ ể ữ ế ả ể ệ ệ
Trang 6
<CENTER>Văn b n s đ c căn gi a trang</ả ẽ ượ ữ CENTER>
Ki u có tính ch t v t lýể ấ ậ
Mã ngu nồ K t quế ả
<b>đ m</b>ậ đ mậ
<u>g ch d i</u>ạ ướ g ch d iạ ướ
<i>nghiêng</i> nghiêng
<tt>teletype</tt> teletype
Ki u có tính logicể
Mã ngu nồ K t quế ả
<em>nh n m nh </em>ấ ạ nh n m nhấ ạ
<strong>nh n m nh h n</strong>ấ ạ ơ nh n m nh h nấ ạ ơ
<cite>trích d n</cite>ẫ trích d nẫ
<code>code</code> code
<samp>sample</samp> sample
<kbd>keyboard</kbd> keyboard
<var>varible</var> variable
<dfn>gi i thích</dfn>ả gi i thíchả
2.4.2 Các th canh lẻ ề
Trong trình bày trang Web c a mình các b n luôn ph i chú ý đ n vi c căn l các vănủ ạ ả ế ệ ề
b n đ trang Web có đ c m t b c c đ p. M t s các th đ nh d ng nh ả ể ượ ộ ố ụ ẹ ộ ố ẻ ị ạ ư P,, IMG đ u cóề
tham s ố ALIGN cho phép b n căn l các văn b n n m trong ph m vi gi i h n b i c a cácạ ề ả ằ ạ ớ ạ ở ủ
th đó.ẻ
Các giá tr cho tham s ị ố ALIGN:
LEFT Căn l tráiề
CENTER Căn gi a trangữ
JUSTIFY Căn đ u hai bênề
RIGHT Căn l ph iề ả
Ngoài ra, chúng ta có th s d ng th ể ử ụ ẻ CENTER đ căn gi a trang m t kh i văn b n. ể ữ ộ ố ả
Cú pháp:
2.4.3 Các th ký t đ c bi tẻ ự ặ ệ
Ký t & đ c s d ng đ ch chu i ký t đi sau đ c xem là m t th c th duy nh t. ự ượ ử ụ ể ỉ ỗ ự ượ ộ ự ể ấ
Ký t ; đ c s d ng đ tách các ký t trong m t t .ự ượ ử ụ ể ự ộ ừ
Ký tự Mã ASCII Tên chu iỗ
< < <
> > >
& & &
Kí t tr ngự ắ
Trang 7
Nh ng ký hi u này đ c dùng đ ch các th mà b n không th dùng chúng trongữ ệ ượ ể ỉ ẻ ạ ể
HTML. B n có th dùng d u ph i h p đ th hi n các ký t đ c bi t.ạ ể ấ ố ợ ể ể ệ ự ặ ệ
Ký tự D u ph i h pấ ố ợ
< &<;
> &>;
& &
" "
2.4.4 Trang trí màu s c trong thi t k websiteắ ế ế
M t màu đ c t ng h p t ba thành ph n màu chính, đó là: Đ (Red), Xanh lá câyộ ượ ổ ợ ừ ầ ỏ
(Green), Xanh 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 đ c xá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. V i tên ti ng Anh, ta ch có th ch ra 16 màuể ị ế ủ ớ ế ỉ ể ỉ
trong khi v i giá tr RGB ta có th ch t i 256 màu.ớ ị ể ỉ ớ
M t s giá tr màu c b n:ộ ố ị ơ ả
Màu s cắ Giá trị Tên ti ng Anhế
Đỏ
Đ s mỏ ẫ
Xanh lá cây
Xanh nh tạ
Xanh n c bi nướ ể
Vàng
Vàng nh tạ
Tr ngắ
Đen
Xám
Nâu
Tím
Tím nh tạ
H ngồ
Da cam
#FF0000
#8B0000
#00FF00
#90EE90
#0000FF
#FFFF00
#FFFFE0
#FFFFFF
#000000
#808080
#A52A2A
#FF00FF
#EE82EE
#FFC0CB
#FFA500
RED
DARKRED
GREEN
LIGHTGREEN
BLUE
YELLOW
LIGHTYELLOW
WHITE
BLACK
GRAY
BROWN
MAGENTA
VIOLET
PINK
ORANGE
Trang 8
Màu đ ng ph c h iồ ụ ả
quân
#000080
#4169E1
#7FFFD4
NAVY
ROYALBLUE
AQUAMARINE
Cú pháp:
<BODY
LINK = color
ALINK = color
VLINK = color
BACKGROUND = url
BGCOLOR = color
TEXT = color
TOPMARGIN = pixels
RIGHTMARGIN = pixels
LEFTMARGIN = pixels
>
ph n n i dung c a tài li u đ c đ t ầ ộ ủ ệ ượ ặ ở
đây
</BODY>
Ý nghĩa các tham s :ố
Các tham số Ý nghĩa
LINK Ch đ nh màu c a văn b n siêu liên k tỉ ị ủ ả ế
ALINK Ch đ nh màu c a văn b n siêu liên k t đang ch nỉ ị ủ ả ế ọ
VLINK Ch đ nh màu c a văn b n siêu liên k t đã t ng mỉ ị ủ ả ế ừ ở
BACKGROUND Ch đ nh đ a ch c a nh dùng làm n nỉ ị ị ỉ ủ ả ề
BGCOLOR Ch đ nh màu n nỉ ị ề
TEXT Ch đ nh màu c a văn b n trong tài li uỉ ị ủ ả ệ
SCROLL YES/NO - Xác đ nh có hay không thanh cu nị ộ
TOPMARGIN L trênề
RIGHTMARGIN L ph iề ả
LEFTMARGIN L tráiề
2.4.5 Th xác đ nh ki u ch <FONT>ẻ ị ể ữ
Cú pháp:
<FONT
FACE = font-name
COLOR = color
SIZE = n >
</FONT>
2.4.6 Văn b n siêu liên k tả ế
Trang 9
Đ t o ra m t siêu văn b n chúng ta s d ng th <ể ạ ộ ả ử ụ ẻ A>.
Cú pháp:
<A
HREF = url
NAME = name
TABINDEX = n
TITLE = title
TARGET = _blank / _self
>
siêu văn b nả
</A>
Ý nghĩa các tham s :ố
HREF Đ a ch c a trang Web đ c liên k t, là m t URL nào đó.ị ỉ ủ ượ ế ộ
NAME Đ t tên cho v trí đ t th siêu liên k t.ặ ị ặ ẻ ế
TABLEINDEX Th t di chuy n khi n phím Tabứ ự ể ấ
TITLE Văn b n hi n th khi di chu t trên siêu liên k t.ả ể ị ộ ế
TARGET M trang Web đ c liên k t trong m t c a s m iở ượ ế ộ ử ổ ớ
(_blank) ho c trong c a s hi n t i (ặ ử ổ ệ ạ _self), trong m tộ
frame (tên frame).
2.4.7 K t n i mailtoế ố
N u đ t thu c tính href= c a th <a> giá tr mailto:address@domain thì khi kích ho tế ặ ộ ủ ẻ ị ạ
k t n i s kích ho t ch c năng th đi n t c a trình duy t.ế ố ẽ ạ ứ ư ệ ử ủ ệ
<ADDRESS>
Trang WEB này đ c ượ
<A href=”mailto:” >
WEBMASTER
<\A> b o trìả
<\ADDRESS>
Ví d :ụ
<html>
<head><title>Design Simple Website</title></head>
<body bgcolor="white" link="blue" alink="white">
<font face="verdana" size="2">
Gõ [<a href="mailto:?subject=Test&body=This is a
test">vào đây</a>] đ g i e-mail cho tôi.ể ử
</font>
</body>
Trang 10
</html>
2.4.8 V m t đ ng th ng n m ngangẽ ộ ườ ẳ ằ
Cú pháp:
<HR
ALIGN = LEFT / CENTER / RIGHT
COLOR = color
NOSHADE
SIZE = n
WIDTH = width
>
Ý nghĩa các tham s :ố
ALIGN Căn l (căn trái, căn ph i, căn gi a)ề ả ữ
COLOR Đ t màu cho đ ng th ngặ ườ ẳ
NOSHADE Không có bóng
SIZE Đ dày c a đ ng th ng (pixel)ộ ủ ườ ẳ
WIDTH Chi u dài (pixel ho c % c a b r ng c a s trìnhề ặ ủ ề ộ ử ổ
duy t).ệ
Ghi chú:
-Th này gi ng nh th ẻ ố ư ẻ BR, nó cũng không có th k t thúc t ng ng. ẻ ế ươ ứ
2.5 Các th chèn âm thanh, hình nhẻ ả
2.5.1 Gi i thi uớ ệ
Liên k t v i file đa ph ng ti n cũng t ng t nh liên k t bình th ng. Tuy v yế ớ ươ ệ ươ ự ư ế ườ ậ
ph i đ t tên đúng cho file đa ph ng ti n. Ph n m r ng c a file ph i cho bi t ki u c a file.ả ặ ươ ệ ầ ở ộ ủ ả ế ể ủ
KI UỂ
PH NẦ
MỞ
R NGỘ
MÔ TẢ
Image/GIF .gif Vi t t t c a Graphics Interchange Format. Khuônế ắ ủ
d ng này xu t hi n khi m i ng i có nhu c uạ ấ ệ ọ ườ ầ
trao đ i nh trên nhi u h th ng khác nhau. Nóổ ả ề ệ ố
đ c s d ng trên t t c các h th ng h trượ ử ụ ấ ả ệ ố ỗ ợ
giao di n đ ho . Đ nh d ng GIF là đ nh d ngệ ồ ạ ị ạ ị ạ
chu n cho m i trình duy t WEB. Nh c đi mẩ ọ ệ ượ ể
c a nó là ch th hi n đ c 256 màu.ủ ỉ ể ệ ượ
Trang 11
M r ng c a chu n này là GIF89, đ c thêmở ộ ủ ẩ ượ
nhi u ch c năng cho các ng d ng đ c bi t nhề ứ ứ ụ ặ ệ ư
làm nh n n trong su t - t c là nh có th n iả ề ố ứ ả ể ổ
b ng cách làm màu n n gi ng v i màu n n c aằ ề ố ớ ề ủ
trình duy t.ệ
Image/JPEG .jpeg Vi t t t c a Joint Photographic Expert Group. Làế ắ ủ
khuôn d ng nh khác nh ng có thêm kh năngạ ả ư ả
nén. u đi m n i b t c a khuôn d ng này là l uƯ ể ổ ậ ủ ạ ư
tr đ c hàng tri u màu và đ nén cao nên kíchữ ượ ệ ộ
th c file nh nh h n và th i gian downloadướ ả ỏ ơ ờ
nhanh h n. Nó là c s cho khuôn d ng MPEG.ơ ơ ở ạ
T t c các trình duy t đ u có kh năng xem nhấ ả ệ ề ả ả
JPEG.
Image/TIFF .tiff Vi t t t c a Tagged Image File Format. Đ cế ắ ủ ượ
Microsoft thi t k đ quét nh t máy quét cũngế ế ể ả ừ
nh t o các n ph m.ư ạ ấ ẩ
Text/HTML .
HTML,
.htm
PostScript .eps, .ps Đ c t o ra đ hi n th và in các văn b n cóượ ạ ể ể ị ả
ch t l ng cao.ấ ượ
Adobe
Acrobat
.pdf Vi t t t c a Portable Document Format. Acrobatế ắ ủ
cũng s d ng các siêu liên k t ngay trong vănử ụ ế
b n cũng gi ng nh ả ố ư HTML. T phiên b n 2.0,ừ ả
các s n ph m c a Acrobat cho phép liên k t gi aả ẩ ủ ế ữ
nhi u văn b n. u đi m l n nh t c a nó là khề ả Ư ể ớ ấ ủ ả
năng WYSISYG.
Video/MPEG .mpeg Vi t t t c a Motion Picture Expert Group, là đ nhế ắ ủ ị
d ng dành cho các lo i phim (video). Đây làạ ạ
khuôn d ng thông d ng nh t dành cho phim trênạ ụ ấ
WEB.
Video/AVI .avi Là khuôn dn g phim do Microsoft đ a ra.ạ ư
Video/Quick
Time
.mov Do Apple Computer đ a ra, chu n video nàyư ẩ
đ c cho là có nhi u u đi m h n MPEG vàượ ề ư ể ơ
AVI. M c dù đã đ c tích h p vào nhi u trìnhặ ượ ợ ề
duy t nh ng v n ch a ph bi n b ng hai lo iệ ư ẫ ư ổ ế ằ ạ
đ nh d ng trên.ị ạ
Sound/AU .au
Sound/MIDI .mid Là khuôn d ng dành cho âm nh c đi n t h tạ ạ ệ ử ế
s c thông d ng đ c nhi u trình duy t trên cácứ ụ ượ ề ệ
h th ng khác nhau h tr . File Midi đ c t ngệ ố ỗ ợ ượ ổ
h p s hoá tr c ti p t máy tính.ợ ố ự ế ừ
Sound/RealA
udio
.ram Đ nh d ng audio theo dòng. M t b t ti n khi sị ạ ộ ấ ệ ử
d ng các đ nh d ng khác là file âm thanh th ngụ ị ạ ườ
có kích th c l n - do v y th i gian t i xu ngướ ớ ậ ờ ả ố
lâu, Trái l i audio dòng b t đ u ch i ngay khi t iạ ắ ầ ơ ả
đ c m t ph n file trong khi v n t i v cácượ ộ ầ ẫ ả ề
Trang 12
ph n khác.M c dù file theo đ nh d ng này khôngầ ặ ị ạ
nh h n so v i các đ nh d ng khác song chínhỏ ơ ớ ị ạ
kh năng dòng đã khi n đ nh d ng này phù h pả ế ị ạ ợ
v i kh năng ch i ngay l p t c.ớ ả ơ ậ ứ
VRML .vrml Vi t t t c a Virtual Reality Modeling Language.ế ắ ủ
Các file theo đ nh d ng này cũng gi ng nhị ạ ố ư
HTML. Tuy nhiên do trình duy t có th hi n thệ ể ể ị
đ c c a s 3 chi u nên ng i xem có th c mượ ử ổ ề ườ ể ả
nh n đ c c m giác ba chi u.ậ ượ ả ề
2.5.2 Chèn âm thanh vào Website
Cú pháp:
<BGSOUND
SRC = url
LOOP = n
>
- Th này không có th k t thúc t ng ng (</ẻ ẻ ế ươ ứ BGSOUND>).
- Đ file nh c l p l i vô h n c n ch đ nh ể ạ ặ ạ ạ ầ ỉ ị LOOP = -1 ho c ặ LOOP = INFINITE.
- Th ẻ BGSOUND ph i đ c đ t trong ph n m đ u (t c là n m trong c p th ả ượ ặ ầ ở ầ ứ ằ ặ ẻ HEAD).
2.5.3 Chèn hình nh, đo n video vào Websiteả ạ
Đ chèn m t file nh (.jpg, .gif, .bmp) ho c video (.mpg, .avi) vào tài li u HTML, b nể ộ ả ặ ệ ạ
có th s d ng th ể ử ụ ẻ IMG.
Cú pháp:
<IMG
ALIGN = TOP/MIDDLE/BOTTOM
ALT = text
BORDER = n
SRC = url
WIDTH = width
HEIGHT = height
HSPACE = vspace
VSPACE = hspace
TITLE = title
DYNSRC = url
START = FILEOPEN/MOUSEOVER
LOOP = n
>
Trong đó:
ALIGN = TOP/ MIDDLE/
BOTTOM/ LEFT/ RIGHT
Canh đo n văn b n bao quanh nhạ ả ả
Trang 13
ALT = text Ch đ nh văn b n s đ c hi n th n u ch cỉ ị ả ẽ ượ ể ị ế ứ
năng show picture c a browser b t t đi hayủ ị ắ
hi n th thay th cho nh trên nh ng trìnhể ị ế ả ữ
duy t không có kh năng hi n th đ ho .ệ ả ể ị ồ ạ
Văn b n này còn đ c g i là nhãn c a nh.ả ượ ọ ủ ả
Đ i v i trình duy t có kh năng h tr đố ớ ệ ả ỗ ợ ồ
ho , dòng văn b n này s hi n lên khi diạ ả ẽ ệ
chu t qua nh hay đ c hi n th trong vùngộ ả ượ ể ị
c a nh n u nh ch a đ c t i v h t. Chúủ ả ế ả ư ượ ả ề ế
ý ph i đ t văn b n gi a hai d u nháy kép n uả ặ ả ữ ấ ế
trong văn b n ch a d u cách hay các ký tả ứ ấ ự
đ c bi t - trong tr ng h p ng c l i có thặ ệ ườ ợ ượ ạ ể
b d u nháy kép.ỏ ấ
BORDER = n Đ t kích th c đ ng vi n đ c v quanhặ ướ ườ ề ượ ẽ
nh (tính theo pixel).ả
SRC = url Đ a ch c a file nh c n chèn vào tài li u.ị ỉ ủ ả ầ ệ
WIDTH/HEIGHT Ch đ nh kích th c c a nh đ c hi n th .ỉ ị ướ ủ ả ượ ể ị
HSPACE/VSPACE Ch đ nh kho ng tr ng xung quanh hình nhỉ ị ả ố ả
(tính theo pixel) theo b n phía trên, d i, trái,ố ướ
ph i.ả
TITLE = title Văn b n s hi n th khi con chu t tr trênả ẽ ể ị ộ ỏ
nhả
DYNSRC = url Đ a ch c a file video.ị ỉ ủ
START =
FILEOPEN/MOUSEOVER
Ch đ nh file video s đ c ch i khi tài li uỉ ị ẽ ượ ơ ệ
đ c m hay khi tr con chu t vào nó. Có thượ ở ỏ ộ ể
k t h p c hai giá tr này nh ng ph i phânế ợ ả ị ư ả
cách chúng b i d u ph y.ở ấ ẩ
LOOP = n/INFINITE Ch đ nh s l n ch i. N u LOOP = INFINITEỉ ị ố ầ ơ ế
thì file video s đ c ch i vô h n l n.ẽ ượ ơ ạ ầ
Ghi chú:
S d ng th IMG đ đ a m t file video vào Website ta vi t code:ử ụ ẻ ể ư ộ ế
<img dynsrc="beany.mpg">
(Đo n mã này ch s d ng v i trình duy t Internet Explore)ạ ỉ ử ụ ớ ệ
Riêng Internet Explorer còn cho phép b n t o nh c n n v i th đ n <bgsound> Dòngạ ạ ạ ề ớ ẻ ơ
code s đ c vi t nh sau: ẽ ượ ế ư
<bgsound src="music.mid" loop="infinite">
loop="infinite" cho phép browser ch y b n nh c không ng ng.ạ ả ạ ừ
Có r t nhi u d ng audio (*.au, *.wav, *.mid ) và video (*.mpeg, *.avi ). Nh ng có lấ ề ạ ư ẽ
ch có d ng midi (*.mid) là c nh nh t. M t b n nh c 5 phút chi m kho ng 30KB trong khiỉ ạ ỡ ỏ ấ ộ ả ạ ế ả
đó 5 phút d i d ng wav lên t i 5MB. Ð đ a chúng vào m t trang web, b n c n vi t dòngướ ạ ớ ể ư ộ ạ ầ ế
html-code sau:
Trang 14
<embed src="music.mid" autostart="true" loop="true">
Trong đó "music.mid" là tên c a file nh c, autostart="true" ch y b n nh c t đ ng,ủ ạ ạ ả ạ ự ộ
loop="true" t đ ng quay l i đ u b n nh c khi và ch y ti p, n u b n ch mu n b n nh cự ộ ạ ầ ả ạ ạ ế ế ạ ỉ ố ả ạ
ch y m t s l n nh t đ nh l n r i d ng, hãy thay "true" b ng "1", "2" ạ ộ ố ầ ấ ị ầ ồ ừ ằ
2.6 Các th đ nh d ng b ng bi uẻ ị ạ ả ể
Sau đây là các th t o b ng chính:ẻ ạ ả
<TABLE> </TABLE> Đ nh nghĩa m t b ngị ộ ả
<TR> </TR> Đ nh nghĩa m t hàng trongị ộ
b ngả
<TD> </TD> Đ nh nghĩa m t ô trong hàngị ộ
<TH> </TH> Đ nh nghĩa ô ch a tiêu đ c aị ứ ề ủ
c tộ
<CAPTION> </CAPTION> Tiêu đ c a b ngề ủ ả
Cú pháp:
<TABLE
WIDTH=”768px”
ALIGN = LEFT / CENTER / RIGHT
BORDER = “n“
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKGROUND = url
BGCOLOR = color
CELLSPACING = spacing
CELLPADDING = pading
>
<CAPTION>Tiêu đ c a b ng bi u</ề ủ ả ể CAPTION>
Đ nh nghĩa các dòngị
<TR
ALIGN = LEFT/CENTER/RIGHT
VALIGN = TOP/MIDDLE/BOTTOM>
Đ nh nghĩa các ô trong dòngị
<TD
ALIGN = LEFT / CENTER / RIGHT
VALIGN = TOP / MIDDLE / BOTTOM
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT= color
BACKBROUND = url
Trang 15
BGCOLOR = color
COLSPAN = n ( xác đ nh s ô n i v i nhau trênị ố ố ớ
cùng m t dòng)ộ
ROWSPAN = n ( xác đ nh s ô n i v i nhau trênị ố ố ớ
cùng m t c t)ộ ộ
>
N i dung c a ôộ ủ
</TD>
</TR>
</TABLE>
Ví d :ụ Xem ví d v b ngụ ề ả
Mã ngu n:ồ
<html>
<head><title>Design Simple Website</title></head>
<body bgcolor="white" link="blue" alink="white">
<table border="1" style="border-collapse: collapse" bordercolor="blue"
width="100%" cellpadding="1" cellspacing="1">
<caption> <font face="Tahoma" color="#336600" size="4">Danh sách các bài hát
yêu thích</font></caption>
<tr bgcolor="#123456"><td align="center"><font face="Verdana" size="2"
color="#FFEEEE">Tên bài hát</font></td><td align="center"><font
face="Verdana" size="2" color="#FFEEEE">Nh c s </font></td></tr>ạ ỹ
<tr><td align="center" width="50%"> M t cõi đi v </td><tdộ ề
align="center">Tr nh Công S n</td></tr>ị ơ
<tr><td align="center">Đêm đông</font></td><td align="center">Nguy n Vănễ
Th ng</td></tr>ươ
<tr><td align="center" >Rong Rêu</font></td><td align="center">Tu nấ
Khanh</td></tr>
</table>
</body>
</html>
Ví d :ụ Xem ví d rowspanụ
Mã ngu n:ồ
Trang 16
<html>
<head><title>Design Simple Website</title></head>
<body>
<table border="1" width="100%" bordercolor="blue" style="border-collapse: collapse">
<tr>
<td rowspan="2" width="50%" align="center">Tr n ô dòng 1 và ô dòng 2</td>ộ
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Ví d :ụ Xem ví d colspanụ
Mã ngu n:ồ
<html>
<head><title>Design Simple Website</title></head>
<body>
<table border="1" width="100%" bordercolor="blue" style="border-collapse: collapse">
<tr>
<td colspan="2" align="center" width="50%">Tr n ô c t 1 và ô c t 2</td>ộ ộ ộ
</tr>
<tr><td> </td><td> </td></tr>
</table>
</body></html>
2.7 FORM
2.7.1 Th FORMẻ
Đ t o ra m t form trong tài li u HTML, chúng ta s d ng th ể ạ ộ ệ ử ụ ẻ FORM.
Cú pháp:
<FORM
ACTION = url
METHOD = GET | POST
NAME = name
>
<! Các ph n t đi u khi n c a form đ c đ t đây >ầ ử ề ể ủ ượ ặ ở
<INPUT >
<INPUT >
</FORM>
Trong đó
Trang 17
ACTION Đ a ch s g i d li u t i khi form đ c submit (cóị ỉ ẽ ử ữ ệ ớ ượ
th là m t trang ASP ).ể ộ
METHOD Ph ng th c g i d li u (ươ ứ ử ữ ệ GET/POST)
NAME Tên c a form.ủ
Đ t các đ i t ng đi u khi n (nh h p nh p văn b n, ô ki m tra, nút b m ) vàoặ ố ượ ể ể ư ộ ậ ả ể ấ
trang Web
Cú pháp th ẻ INPUT:
<INPUT name=””
ALIGN = LEFT | CENTER | RIGHT
TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD
| RADIO | RESET | SUBMIT | TEXT
VALUE = value
>
Ví d :ụ xem ví d form.htmlụ
Mã ngu n:ồ
<html>
<head>
<title>Nh p vào thông tin cá nhân</title>ậ
</head>
<body>
<form method="POST" action= "table.html">
<table border="1" width="100%" style="border-collapse: collapse"
bordercolor="#0000FF">
<tr>
<td>H tên</td>ọ
<td><input type="text" name="T1" size="20"></td>
</tr>
<tr>
<td>Đ a ch </td>ị ỉ
<td><input type="text" name="T2" size="20"></td>
</tr>
<tr>
<td>Gi i tính</td>ớ
<td><input type="radio" checked name="R1">Nam
<input type="radio" name="R1">N </td>ữ
</tr>
</table>
<p align="center">
<input type="submit" value="Submit" name="B1">
Trang 18
<input type="reset" value="Reset" name="B2">
</p>
</form>
</body>
</html>
2.7.2 T o m t danh sách l a ch nạ ộ ự ọ
Cú pháp:
<SELECT NAME="tên danh sách" SIZE="chi u cao">ề
<OPTION VALUE=value1 SELECTED> Tên m c ch n th nh tụ ọ ứ ấ
<OPTION VALUE=value2> Tên m c ch n th haiụ ọ ứ
<! Danh sách các m c ch n >ụ ọ
</SELECT>
Trang 19
2.7.3 T o h p so n th o văn b nạ ộ ạ ả ả
Cú pháp:
<TEXTAREA
COLS=s c tố ộ
ROWS=s hàngố
NAME=tên
>
N i dung m c đ nhộ ặ ị
</TEXTAREA>
Ch ng 2: CSS (Cascading Style Sheets)ươ
2.1 Gi i thi u chungớ ệ
CSS là cách đ nh d ng t t nh t cho Website b i vì tính th ng nh t, k th a và hi uị ạ ố ấ ở ố ấ ế ừ ệ
qu c a nó.ả ủ
Có 3 cách đ thêm CSS vào m t trang Web:ể ộ
S d ng thu c tính Style.ử ụ ộ
CSS nhúng bên trong trang Web.
Liên k t đ n file CSS.ế ế
2.2 S d ng thu c tính Styleử ụ ộ
S d ng thu c tính Style v i cú pháp nh sau:ử ụ ộ ớ ư
Style=”Property1: value1; Property2: value2; …”
Thu c tính Style s đ c dùng cho b t kỳ các th HTML nào.ộ ẽ ượ ấ ẻ
Ví d : ụ Xem ví d inline styleụ
Mã ngu n:ồ
<html>
<head><title>Design Simple Website</title></head>
<body>
<p style="color: blue; font-family: arial; font-size: 20px"> Dòng văn b n</p>ả
<p style="color: blue; font-family: arial; font-size: 20px">Hello everybody</p>
</body>
</html>
Ghi chú:
- Cách này ng i ta ít s d ng do đã có th <FONT> đ đ nh d ng cho văn b n.ườ ử ụ ẻ ể ị ạ ả
2.3 CSS nhúng bên trong trang Web
S d ng c p th <STYLE> và </STYLE> đ c đ t trong th <HEAD>, gi a c p thử ụ ặ ẻ ượ ặ ẻ ữ ặ ẻ
<STYLE> và </STYLE> là t p h p m t ho c nhi u y u t nh m đ nh d ng cho các thậ ợ ộ ặ ề ế ố ằ ị ạ ẻ
HTML.
Cú pháp:
<style type=”text/css”>
<!
.element_1{…các thu c tính…;}ộ
.element_2{…các thu c tính…;}ộ
……
>
</style>
Trang 20
Đ s d ng các y u t bên trong c p th <STYLE> ta s d ng thu c tínhể ử ụ ế ố ặ ẻ ử ụ ộ
class=”tên_y u_t ” bên trong các th HTML có thu c tính class.ế ố ẻ ộ
Ví d : ụ Xem ví d Embleded Styleụ
Mã ngu n:ồ
<html>
<style type="text/css">
<!
.button{
background-color: #7083c7;
color: #ffffff;
border-left: 1px solid #9dbcff;
border-right: 1px solid navy;
border-top: 1px solid #9dbcff;
border-bottom: 1px solid navy
}
.text{
font-family: arial, verdana;
color: red;
font-size: 12px;
}
body {
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #7083c7
}
>
</style>
<body>
<center>
<form>
<input type="button" value="send"class="text">
</form>
<div class="text">This is a test</div>
</body>
</html>
Ghi chú:
- M t s trình duy t không h tr CSS thì nó s hi n th n i dung các y u t bên trong c pộ ố ệ ỗ ợ ẽ ể ị ộ ế ố ặ
th <STYLE> và </STYLE> nh là n i dung văn b n bình th ng. Do v y ta nên s d ngẻ ư ộ ả ườ ậ ử ụ
c p th <! và > đ tránh l i trên, v i c p th <! và > thì trình duy t h tr CSS sặ ẻ ể ỗ ớ ặ ẻ ệ ỗ ợ ẽ
d ch bình th ng.ị ườ
- M t nh c đi m c a cách này là ch đ nh d ng cho trang Web hi n th i ch không s d ngộ ượ ể ủ ỉ ị ạ ệ ờ ứ ử ụ
đ c cho các trang khác.ượ
2.4 Liên k t đ n file CSSế ế
M t cách hi u qu đ thêm các đ nh d ng CSS trong trang Web là t o m t file CSSộ ệ ả ể ị ạ ạ ộ
riêng và tham chi u đ n nó.ế ế
Cách này r t hi u qu b i vì nó có tính k th a và t o ra s th ng nh t trong vi cấ ệ ả ở ế ừ ạ ự ố ấ ệ
trang trí cho trang Web.
Ta s d ng th LINK đ c đ t trong th HEAD đ ch đ ng d n đ n file CSS theoử ụ ẻ ượ ặ ẻ ể ỉ ườ ẫ ế
cú pháp sau:
Trang 21
<LINK REL=”STYLESHEET” HREF=”URL” type=”text/css”>
Ví d :ụ
File link_style.html
<html>
<head>
<title>Design Simple Website></title>
<link rel=”stylesheet” href=”CSS/default.css”>
</head>
<body>
<center>
<form>
<input type="button"
value="send"class="button">
</form>
<div class="text">This is a test</div>
</body>
</html>
File default.css
.button{
background-color: #7083c7;
color: #ffffff;
border-left: 1px solid #9dbcff;
border-right: 1px solid navy;
border-top: 1px solid #9dbcff;
border-bottom: 1px solid navy
}
.text{
font-family: arial, verdana;
color: red;
font-size: 12px;
}
body {
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #7083c7
}
2.5 Kh o sát file CSSả
2.5.1 C u trúc c b n c a m t file CSSấ ơ ả ủ ộ
body {
background-color: #CCFFFF;
color: #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a {
color: #000099;
text-decoration: underline;
Trang 22
}
a:visited {
color: #990000;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
// m t s các y u t khác ộ ố ế ố
.text{
font-family: arial, verdana;
color: red;
font-size: 12px;
}
Ghi chú:
- V i các th có s n c a HTML thì ta không c n d u ch m (ớ ẻ ẵ ủ ầ ấ ấ .)
- Đ s d ng các y u t đ c đ nh nghĩa trong file CSS ta s d ng các thu c tínhể ử ụ ế ố ượ ị ử ụ ộ
class=”tên_y u_t ” hay id=”tên_y u_t ” k t h p v i các th HTML. N u y u t nào đ cế ố ế ố ế ợ ớ ẻ ế ế ố ượ
s d ng v i thu c tính id thì tên y u t đó nên có d u # đ ng tr c.ử ụ ớ ộ ế ố ấ ứ ướ
- Ngoài ra có th s d ng các th :ể ử ụ ẻ
<span class=”tên_y u_t ”> </span>ế ố
<span id=”tên_y u_t ”> </span>ế ố
<div class=”tên_y u_t ”> </div>ế ố
<div id=”tên_y u_t ”> </div>ế ố
2.5.2 M t s thu c tính c b nộ ố ộ ơ ả
2.5.2.1 Các thu c tính c a h p nh pộ ủ ộ ậ
Border
Border-bottom
Border-bottom-width
Border-color
Border-left
Border-left-width
Border-right
Border-right-width
Border-top
Border-top-width
Border-width
Height
Width
Margin
Margin-bottom
Margin-left
Margin-right
Margin-top
Padding
Padding-bottom
Padding-left
Padding-right
Padding-top
2.5.2.2 Các thu c tính c a đ ng vi nộ ủ ườ ề
Cú pháp : Border : <giá tr >ị
Ch c năng:ứ T o đ ng vi n khung v i chi u r ng, ki u đ ng vi n và màuạ ườ ề ớ ề ộ ể ườ ề
đ ng vi nườ ề
Các giá tr có th :ị ể <border-width> | <border-style> | <color>
Áp d ng v i : ụ ớ t t c các ph n tấ ả ầ ử
Ví d : ụ H2 { border: groove 3em } // t o đ ng vi n có màu groove và đạ ườ ề ộ
r ng 3 emộ
A { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }
Trang 23
Các thu c tính nh Border-Bottom, Border-Left, Border-Right, Border-Top đ u có th cộ ư ề ự
hi n t ng t .ệ ươ ự
2.5.2.3 Thu c tính Border-widthộ
Cú pháp : Border-width : <giá tr >ị
Ch c năng:ứ Quy đ nh đ r ng đ ng vi nị ộ ộ ườ ề
Các giá tr có th :ị ể thin | medium | thick | <đ dài> ộ
Áp d ng v i : ụ ớ T t c các ph n tấ ả ầ ử
2.5.2.4 Thu c tính heightộ
Cú pháp : Height : <giá tr >ị
Ch c năngứ Quy đ nh chi u cao cho các kh i đ c ch đ nhị ề ố ượ ỉ ị
Các giá tr có th : ị ể <đ dài> | auto ộ
Áp d ng v i : ụ ớ Các kh i và thay th cho các ph n t đã có . ố ế ầ ử
Chú ý r ng khi áp d ng Height thì giá tr t ng ng trong html s bằ ụ ị ươ ứ ẽ ị
thay thế
ví d : ụ .vd { Height : 200px } thì đ i v i b t c các kh i nào trong fileố ớ ấ ứ ố
html có class= vd đ u có height =200px . ề
Ví d : ụ . banner { width: 760px; height: 40px; }
.vd { Height : 200px; }
2.5.2.5 Thu c tính Marginộ
Cú pháp : Margin : <giá tr >ị
Ch c năngứ Quy đ nh l c a kh i so v i trang gi y.ị ề ủ ố ớ ấ
Các giá tr có th : ị ể <đ dài > | <t l ph n trăm> | auto ộ ỉ ệ ầ
Áp d ng v i : ụ ớ t t c các ph n tấ ả ầ ử
Ví d : ụ BODY { margin: 0 }
P { margin: 2em 4em }
L trên (Top) và d i (Bottom)= 2em,ề ướ
L trái (Left) và l ph i (Right) = 4em.ề ề ả
Margin : 0 nghĩa là căn l trái, ph i, trên, d i đ u =ề ả ướ ề
0
Các thu c tính nh Margin-Top, Margin-left, Margin-Bottom, Margin-Right đ u th cộ ư ề ự
hi n t ng tệ ươ ự
2.5.2.6 Thu c tính Paddingộ
Cú pháp : Padding : <giá tr >ị
Ch c năngứ Quy đ nh kho ng cách t đ ng vi n (Border) c a m t b ng ho c c tị ả ừ ườ ề ủ ộ ả ặ ộ
t i các ch trong b ng đó.ớ ữ ả
Các giá tr có th : ị ể <đ dài > | <t l ph n trăm> ộ ỉ ệ ầ
Padding là t p h p c a t t c các padding (padding-right, padding-ậ ợ ủ ấ ả
left, ) vì th giá tr c a nó có tác d ng t i toàn b . ế ị ủ ụ ớ ộ
Áp d ng v i : ụ ớ T t c các ph n tấ ả ầ ử
Ví d : ụ Table { padding : 5px }: Kho ng cách gi a ch và đ ng vi n là 5pxả ữ ữ ườ ề
Các thu c tính padding-Left, Padding-Right, Padding-Bottom, Padding-Top đ u th cộ ề ự
hi n t ng t trên.ệ ươ ự
2.5.2.7 Thu c tính Widthộ
Cú pháp : Width : <giá tr >ị
Trang 24
Ch c năng:ứ Quy đ nh đ r ng c a các kh i, b ng ho c các c t trong b ngị ộ ộ ủ ố ả ặ ộ ả
Các giá tr có th : ị ể <đ dài> | <t l ph n trăm> | auto ộ ỉ ệ ầ
Áp d ng v i : ụ ớ Các kh i và thay th cho các ph n t đã có . ố ế ầ ử
Chú ý r ng khi áp d ng Width thì giá tr t ng ng trong html s bằ ụ ị ươ ứ ẽ ị
thay thế
Ví d : ụ .vd { width : 200px } thì đ i v i b t c các kh i nào trong fileố ớ ấ ứ ố
html có class= vd đ u có width =200px . ề
Ví d : ụ INPUT.button { width: 10em }
.vd { width : 200px }
2.5.2.8 Thu c tính color và Backgroundộ
G m các thu c tính sau:ồ ộ
• Corlor
• Background
• Background-attachment
• Background-color
• Background-image
• Background-position
• Background-repeat
Cú pháp : corlor : <giá tr >ị
Ch c năngứ Quy đ nh màu cho các ph n t đ c ápị ầ ử ượ
d ngụ
Các giá tr có th : ị ể Các m u theo b ng m u ầ ả ầ
Áp d ng v i : ụ ớ t t c các ph n tấ ả ầ ử
Ví d : ụ P { color : red }
H1 { color : #ffffff }
Cú pháp : Background : <giá tr >ị
Ch c năngứ Quy đ nh n n c a các ph n t nh body, b ng, …đ c áp d ngị ề ủ ầ ử ư ả ượ ụ
Các giá tr có th :ị ể <background-color> | <background-image> | <background-repeat> |
<background-attachment> | <background-position>
- <background-color>: màu n nề
- <background-image>: nh n nả ề
- <background-repeat>: quy đ nh ch đ l p l i nhị ế ộ ặ ạ ả
- <background-attachment>: quy đ nh ch đ hi n th nh n n khiị ế ộ ể ị ả ề
cu n chu tộ ộ
Áp d ng v i : ụ ớ T t c các ph n tấ ả ầ ử
Ví d : ụ body {background: #ffffff url(“/ANH/banner.gif”) ; margin: 0}
TABLE { background: red url(“/ANH/Left-Corner.gif”) no-repeat
bottom }
2.5.2.9 Các thu c tính v fontộ ề
Font
Font-family
Font-size
Font-style
Font-variant
Trang 25
