Tổng quan về ngôn ngữ HTML
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 (962.07 KB, 89 trang )
Ngôn ngӳ HTML
Phɞm Thɼ Bɠo
Khoa Toán – Tin h͍c
/>Giӟi thiӋu
9 HTML=HyperText Markup Language –
Ngôn ngͯÿánh dɢu siêu văn bɠn – Ngôn
ngͯÿʀ viɼt các trang web.
9 Do Tim Berner Lee phát minh và ÿɉͣc
W3C (World Wide Web Consortium) ÿɉa
thành chuɦn năm 1994.
- Chӭa các thành phҫn ÿӏnh dҥng ÿӇ báo cho trình duyӋt Web biӃt
cách hiӇn thӏ mӝt trang Web.
- Mӝt trang web thông thѭӡng gӗm có 2 thành phҫn chính:
Dӳ liӋu cӫa trang web (văn bҧn, âm thanh, hình ҧnh )
Các thҿ (tag) HTML dùng ÿӇ ÿӏnh dҥng mô tҧ cách thӭc
các dӳ liӋu trên hiӇn thӏ trên trình duyӋt.
- ĈӇ ÿӑc ÿѭӧc trang Web phҧi thông qua trình duyӋt Web (Web
Browser).
Ĉһc ÿiӇm
9 HTML sͭ dͥng các thɸ (tags) ÿʀ ÿʈnh
dɞng dͯ liʄu
9 HTML không phân biʄt chͯ hoa, chͯ
thɉ͝ng
9 Các trình duyʄt thɉ͝ng không báo l͗i cú
pháp HTML. Nɼu viɼt sai cú pháp chʆ dɨn
ÿɼn kɼt quɠ hiʀn thʈ không ÿúng v͛i dͱ
ÿʈnh.
Trang web ÿҫu tiên
9 Trang HTML có phɤn m͟ r͙ng (ÿuôi) là .HTM hoɴc
.HTML
9 Có thʀ tɞo trang HTML bɮng bɢt cͩ trình soɞn
thɠo “văn bɠn thuɤn” nào (Notepad, EditPlus,…)
9 Có nhiɾu trình soɞn thɠo HTML cho phép NSD
soɞn thɠo trͱc quan, kɼt quɠ sinh ra HTML tɉɇng
ͩng nhɉ:
– Microsoft FrontPage
– Macromedia Dreamweaver
–…
Trang web ÿҫu tiên (tt)
9 Soɞn thɠo:
–M͟ trình soɞn thɠo văn bɠn thuɤn (VD Notepad) gõ ND dɉ͛i
–Ghi lɞi v͛i tên “CHAO.HTM” hay “chao.html”
<html>
<head>
<title>Chào bңn</title>
</head>
<body>
Chào mӭng bңn ÿӁn vӝi <U>HTML</U>!
</body>
</html>
Trang web ÿҫu tiên (tt)
9 Thͭ nghiʄm:
–M͟ trình duyʄt web (IE)
–Vào File/Open, ch͍n file
CHAO.HTM vͫa ghi
–Nhɢn OK ĺ Có kɼt quɠ nhɉ
hình bên
9 Thay ÿ͕i:
–Quay lɞi Notepad, sͭa lɞi n͙i
dung trang web r͓i ghi lɞi
– Chuyʀn sang IE, nhɢn nút
Refresh (F5) ĺ thɢy kɼt quɠ
m͛i
9 Ghi chú: Các thɸ ÿɉͣc nêu
tiɼp theo mɴc ÿʈnh ÿɴt ͟
trong phɤn
<body>…</body>
Soҥn thҧo văn bҧn
9 Văn bɠn ÿɉͣc soɞn thɠo nhɉ bình thɉ͝ng trong
các file HTML
9 Lɉu ý:
–M͍i khoɠng tr͑ng, dɢu xu͑ng dòng trong HTML ÿɉͣc thʀ
hiʄn trên trang web là 1 khoɠng tr͑ng duy nhɢt
– Ĉʀ gõ m͙t s͑ ký tͱÿɴc biʄt ta phɠi sͭ dͥng mã:
• Khoɠng tr͑ng (trong trɉ͝ng hͣp mu͑n có nhiɾu hɇn 1 ký tͱ
tr͑ng):
•Dɢu nh͏ hɇn (<) và l͛n hɇn (>): < >
•Dɢu ngoɴc kép (“): "
•Ký hiʄu : ©
• …
9 Ghi chú trong HTML:
<! Ghi chú >
Thҿ TAG trong HTML
Có nhiɾu thɸ, m͗i thɸ có 1 tên và mang ý nghśa khác nhau
1. Phân loɞi : Có hai loɞi tag.
- Tag ÿɇn : Là thɸ lʄnh không cɤn thɸ kɼt thúc
Ví dͥ : Hello < br > < hr >
- Tag cɴp : G͓m 1 m͙t cɴp thɸ m͟ và ÿóng theo cɢu trúc <
tag > … < / tag >
Tag kɼt thúc gi͑ng tag bɬt ÿɤu nhɉng có thêm dɢu (/) ͟
phía trɉ͛c.
Ví dͥ : <p> Hello </p>
Ví dͥ : <title> Trang chͧ </title>
- Tag l͓ng : Các tag viɼt l͓ng nhau.Thɸ ÿɉͣc m͟ÿɤu tiên sɺ
ÿɉͣc ÿóng sau cùng.
Ví dͥ : <b> Phɤn <i> N͙i dung </i> </b>
2. Thu͙c tính (property) cͧa thɸ
Nhiɾu tag còn có thu͙c tính kèm theo. M͙t thɸ có thʀ có
các thu͙c tính nhɮm b͕ sung tác dͥng cho thɸ.
Thu͙c tính cͧa Tag ÿɉͣc thʀ hiʄn trong phɞm vi thɸÿɤu
cͧa tag.
Cú pháp :
<Tên Tag thu͙ctính1 thu͙ctính2 … > … < /Tag >
Có thʀ dùng nhiɾu thu͙c tính trong m͙t tag, phân cách
nhau b͟i khoɠng trɬng.
Ví dͥ :
< img src = “logo.gif” >
< table border=“1” width=“100%” >
< p align=“center”> Hello </p> <hr>
<font face=“arial” size=“6”> Welcome ! </font>
Thuӝc tính (property) cӫa thҿ
9 Chú ý:
–Có thʀ thay ÿ͕i thͩ tͱ, s͑ lɉͣng các thu͙c tính mà
không gây ra l͗i cú pháp
–Sͱ h͗ trͣ các thɸ, thu͙c tính ͟ m͗i trình duyʄt là khác
nhau. Chʆ gi͑ng nhau ͟ các thɸ, thu͙c tính cɇ bɠn.
–Thɸÿóng cͧa thɸ có thu͙c tính vɨn viɼt bình thɉ͝ng
(</tên_thɸ>)
<html>
<head>
<title>Chào bҥn</title>
</head>
<body>
Chào mӯng bҥn ÿӃn vӟi
<U>HT<B>M<I>L</I></B></U>!<br>
a<sup>2</sup> M <sub>3</sub>
</body>
</html>
CҨU TRÚC TRANG WEB
Thành phҫn
<HTML>
<HEAD>
<TITLE> Chào bңn </TITLE>
</HEAD>
<BODY>
Chào mӭng bңn ÿӁn vӝi <U>HTML</U>!
</BODY>
</HTML>
Tiêu ÿӅ cӱa sә trang Web
Nӝi dung thӇ hiӋn
Ý nghƭa các thành phҫn
<html> </html> : Ĉӏnh nghƭa phҥm vi cӫa văn bҧn HTML
<head> </head> : Các mô tҧ vӅ trang HTML. Các thông tin
trong tag này không ÿѭӧc hiӇn thӏ trên web.
<title> </title> : Mô tҧ tiêu ÿӅ trang web.
<body> </body> : Xác ÿӏnh vùng thân cӫa trang web, nѫi
chӭa các thông tin ( Dӳ liӋu , hình ҧnh …)
Ĉӏnh dҥng trang
a. Font chӳ mһc ÿӏnh cӫa trang web:
Cú pháp :
< BASEFONT face= fontName size= fontSize color= textColor>
Thҿ lӋnh này có tác dөng lên toàn bӝ văn bҧn trong trang web
và ÿѭӧc ÿһt trong phҥm vi Tag <Head>
Thuӝc tính:
fontName : Tên font chӳ.
fontSize : Size chӳ (tӯ 1 ÿӃn 7).
textColor : Màu chӳ.
Ví dө : <BASEFONT face=“Arial” size=“3” color=“blue”>
b. Hình / Màu nӅn mһc ÿӏnh cho trang web:
Thuӝc tính cӫa Tag Body
< Body text=textColor bgcolor=backgroundColor
background= Image leftmargin=lm rightmargin=rm>
Thҿ lӋnh này dùng ÿӇ ÿӏnh các thông sӕ hiӇn thӏ trang web
nhѭ : màu nӅn, ҧnh nӅn, màu chӳ …
Thөôc tính
textColor : Màu chӳ.
Bgcolor : Màu nӅn trang web.
backgroundImage : Ҧnh nӅn trang web.
Leftmargin , Rightmargin : LӅ trái phҧi cӫa trang Web.
• Ví dө 1: <body bgcolor="#FFCCFF" text="#0000FF">
• Ví dө 2: <body background=.//love.jpg leftmargin=10
rightmargin = 10 text=“Blue" >
Thҿÿӏnh dҥng ký tӵ
9 Ĉɪm, nghiêng, gɞch chân: <b>…</b>,
<i>…</i>, <u>…</u>
9 Chʆ s͑ trên:<sup>…</sup>
9 Chʆ s͑ dɉ͛i: <sub>…</sub>
9 Font chͯ: <font>…</font>
–Thu͙c tính:
• face=“tên font chͯ”
• size=“kích thɉ͛c”
• color=“màu”
–Viɼt bɮng tên tiɼng Anh (red, blue,…)
–Viɼt dɞng #RRGGBB, RR, GG, BB ͟ dɞng hexa. Ví dͥ:
#FFFFFF: Trɬng, #FF0000: ÿ͏,…
Style chӳ
Cú pháp : Công dөng :
< B > nӝi dung </B>
<Strong> … </Strong>
In ÿұm nӝi dung.
< U > nӝi dung </U>
Gҥch dѭӟi nӝi dung.
< I > nӝi dung < /I >
In nghiêng nӝi dung.
<S> nӝi dung </S>
<Strike> … </Strike>
Gҥch ngang nӝi dung.
<BIG> nӝi dung </BIG>
Thay ÿәi nӝi dung thành chӳ lӟn
<SMALL> … </SMALL>
Thay ÿәi nӝi dung thành chӳ nhӓ
<SUP> nӝi dung </SUP>
ChӍ sӕ trên ( SuperScript )
<SUB> nӝi dung </SUB>
ChӍ sӕ dѭӟi ( SubScript )
Ví dө
<html>
<head> <title> Vi du kieu chu </title>
</head>
<body text = "blue">
<p> Vi dө kiӇu chӳ </p> <hr>
<p><b> Chӳ in ÿұm </b> </p>
<p><u> Chӳ gҥch chân </u> </p>
<p><i> Chӳ in nghiêng </i> </p>
<p><s> Chӳ gҥch ngang </s> </p>
<p> ChӍ sӕ trên X <sup>2</sup> </p>
<p> ChӍ sӕ dѭӟi H<sub>2</sub>O </p>
</body>
</html>
9 Tiêu ÿɾ: v͛i kích thɉ͛c nh͏ dɤn
– <h1>…</h1>
– …
– <h6>…</h6>
Sau m͗i tiêu ÿɾ, văn bɠn tͱÿ͙ng xu͑ng dòng
–Thu͙c tính:
• align=“cách căn chʆnh lɾ”: left, right, center, justify
9 Ĉoɞn văn: <p>…</p>
–Thu͙c tính:
• align tɉɇng tͱ <h>
9 Ngɬt dòng: <br>
Ĉѭӡng kҿ ngang
Cú pháp :
< HR Size = “n” Width = “w” align = “alignStyle” color = “color”>
Tҥo ÿѭӡng kҿ ngang trang Web.
Thөôc tính:
Size : Ĉӝ dày ÿѭӡng kҿ.
Width : Ĉӝ rӝng ÿѭӡng kҿ.
alignStyle : Canh lӅ.
Color : Màu ÿѭӡng kҿ.
Ví dө :
<P Align = center>
TRѬӠNG ĈҤI HӐC KHOA HӐC TӴ NHIÊN </P>
<Hr Size = 3 Width = 50% align = center color = Red >
Ĉӏnh dҥng Bullets and Numbering
1. Bullets :
Cú pháp :
< UL Type = “Style ” >
… ( Danh sách ÿѭӧc thӇ hiӋn bҵng Tag <Li> …</Li> )
</UL>
Ĉӏnh nghƭa danh sách ÿánh dҩu Bullets.
Thuӝc tính :
Style : KiӇu Bullets. ( “Disk”
Æ z
“Circle”
Æ {
“square”
Æ
)
Ví dө :
<UL Type = “Disk” >
<Li > Tóan </Li>
<Li> Lý </Li>
</UL>
2. Numbering
Cú pháp :
< OL Type = “Style ” start = “n” >
… ( Danh sách ÿѭӧc thӇ hiӋn bҵng Tag <Li> …</Li> )
</OL>
Ĉӏnh nghƭa danh sách ÿánh sӕ.
Thuӝc tính :
Style : KiӇu ÿánh sӕ. ( A, a , I , i , 1 – mһc ÿӏnh )
n : Bҳt ÿҫu ÿánh sӕ tӯ …
Ví dө :
<OL Type = A Start = 3 >
<Li > Tóan </Li>
<Li> Lý </Li>
</OL>
Ký tӵÿһc biӋt
Cú pháp : Công dөng :
< BR > Ngҳt dòng ÿoҥn nӝi dung.
> Dҩu >
< Dҩu <
" Dҩu “
  Khӓang trҳng
& Dҩu &
<! - - nӝi dung ghi chú > Nӝi dung ghi chú trên Web
Ví dө
<html>
<head> <title> Vi du Ky tu ÿac biet </title>
</head>
<body text = "blue">
<p align = center> Ký tӵÿһc biӋt </p> <hr size = 2 width =
50% color = "#1144FF" >
<p> 50 > 42 <br> <! Ký tӵ ngҳt dòng >
4 < 25 </p>
<p>Ĉҥi hӑc & Sài Gòn = " Ĉҥi hӑc Sài Gòn "
</p>
</body>
</html>
