BỘ LAO ĐỘNG - THƯƠNG BINH VÀ XÃ HỘI
TRƯỜNG CAO ĐẲNG KỸ THUẬT CÔNG NGHỆ HÒA BÌNH
----------
GIÁO TRÌNH
Kiến thức cơ bản về HTML, CSS
Hà Nội, năm 2023
Thit k Web
Biên son: Đng Thanh Bình Trang 1

I. Gii thiu:
HTML, vit y  là Hyper Text Markup Language – Ngôn ng ánh du
siêu v bn, là ngôn ng nn tng ca Web.
HTML ưc thit k bi các nhà vt lý hc ti vin CERN. Cùng vi trình
duyt Mosaic và World Wide Web, HTML ã giúp mang n mt b mt mi cho
Internet. Internet ã tr nên d s dng hơn và có th n vi ông o ngưi dùng
trên toàn th gii thông qua các trang web.
HTML mô t cách thc d liu ưc hin th trên trình duyt thông qua các tp
ký hiu ánh du, thưng gi là tag, hoc “th HTML”. Khi mt trang web ưc ti
v trình duyt, trình duyt s cn c trên các tag HTML  nh dng ni dung hin
th.
Ví d:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE></HEAD>
<BODY>
<H3>My first HTML document</H3>
</BODY>
</HTML>
II. Các khái nim chung:
1. Tài liu HTML:
Tài liu HTML, hay còn gi là vn bn HTML, là mt tp tin có phn kiu
là .htm hoc .html, cha ni dung cn hin th và các tag  báo cho trình duyt web
bit cách hin th ni dung ó.
Tài liu HTML có th ưc son tho trên nhng trình son tho vn bn ơn
gin như Notepad hay TextPad.
2. Cu trúc ca mt tài liu HTML:
Tài liu HTML ưc chia làm 3 phn, c th như sau:
a.HTML section
ưc bt u bi tag <HTML> và kt thúc bi tag </HTML>
Cp tag này nh ngh a phm vi ca vn bn HTML.
b. Header section
ưc bt u bi tag <HEAD> và kt thúc bi tag </HEAD>
CHNG
2
Thit k Web
Biên son: Đng Thanh Bình Trang 2
Phn này cha thông tin mô t trang web, ch!ng hn như tiêu  trang web,
các t" khóa dùng  tìm kim và nhn din trang web, …. Nhng thông tin này
không ưc hin th trên trang web.
c.Body section
ưc bt u bi tag <BODY> và kt thúc bi tag </BODY>
Phn này cha ni dung ca trang web và các tag quy nh nh dng ca ni
dung ó.
3. Thành phn HTML (HTML elements):
Hu ht các thành phn HTML u có tag bt u và tag kt thúc tương ng.
Dưi ây là cu trúc chung ca mt thành phn HTML:
<tag_name>string of text</tag_name>
Trong ó <tag_name> là tag bt u, string of text là ni dung ca thành phn
HTML và </tag_name> là tag kt thúc.
Các tag HTML có th ưc nhp liu không phân bit ch hoa hoc ch
thưng. Tuy nhiên, c#ng cn lưu ý là t$ chc W3C ngh dùng ch thưng trong
phiên bn HTML 4, và XHTML (HTML th h k tip) bt buc phi dùng ch
thưng cho tag.
4. Thuc tính ca tag HTML
Các th HTML có th có thuc tính. Thuc tính cung cp thêm thông tin cho
mt thành phn HTML.
Ch!ng hn, tag HTML sau ây nh ngh a mt bng: <table>. Vi mt thuc
tính thêm vào, chúng ta có th yêu cu trình duyt hi th bng mà không có khung :
<table border="0">
Thuc tính luôn i theo cp tên thuc tính/giá tr như sau: name="value".
Thuc tính luôn ưc ch% nh th bt u ca mt thành phn HTML.
Thuc tính và giá tr ca thuc tính c#ng không phân bit ch hoa và ch
thưng.
Lu ý:
Giá tr ca thuc tính nên ưc t trong cp du nháy. Thông thưng
ngưi ta s dng cp dy nháy kép nhưng các du nháy ơn c#ng ưc chp nhn.
III. Các tag HTML cơ bn:
1. Heading:
Các cp heading ưc nh ngh a vi các th t" <h1> n <h6>. <h1> nh
ngh a heading ln nht. <h6> nh ngh a heading nh& nht.
HTML t' ng thêm vào các dòng tr(ng trên và dưi heading.
Ví d:
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
Thit k Web
Biên son: Đng Thanh Bình Trang 3
<BODY>
<H1>Introduction to HTML</H1>
<H2>Introduction to HTML</H2>
<H3>Introduction to HTML</H3>
<H4>Introduction to HTML</H4>
<H5>Introduction to HTML</H5>
<H6>Introduction to HTML</H6>
</BODY>
</HTML>
2. Paragraph:
on vn bn ưc nh ngh a bi th <p>.
HTML t' ng thêm vào các dòng tr(ng trên và dưi on.
Ví d:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = “lavender”>
<p>This is a paragraph</p>
<p align=”center”>This is another paragraph</p>
</BODY>
</HTML>
3. Ngt dòng (line break):
Th <br> ưc s dng khi ta mu(n kt thúc mt dòng nhưng không mu(n bt
u mt on mi. Th <br> s ngt dòng ti nơi ta t nó trong vn bn HTML.
<br> là mt th r)ng. Nó không có th óng.
Ví d:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY>
<p>This <br> is a para<br>graph with line breaks</p>
</BODY>
</HTML>
4. ưng k ngang (Horizontal Rule):
Th <hr> ưc s dng khi ta mu(n to mt ưng k ngang trong trang web.
Trong HTML, th <hr> không có th óng.
Dưi ây là nhng thuc tính ca th này:
Thuc tính Giá tr Ý ngha
align center
left
right
Ch% nh trng thái canh l ưng k
ngang.
noshade noshade Khi ưc set, thuc tính này quy nh
ưng k ngang s ưc v b*ng 1 màu
Thit k Web
Biên son: Đng Thanh Bình Trang 4
Thuc tính Giá tr Ý ngha
duy nht. Khi không ưc set, ưng k
ngang s ưc ph(i b*ng 2 màu
size pixels
%
Chiu cao ca ưng k ngang
width pixels
%  rng ca ưng k ngang
Ví d:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
<HR noshade size = 5 align = center width =
50%>
<HR size = 15 align = left width = 80%>
<P>This is going to be real fun
<H2>Using another heading</H2>
<P ALIGN=center> Another paragraph element
</BODY>
</HTML>
5. Chú thích trong HTML
Chúng ta dùng th comment  thêm các on chú thích vào HTML source
code. Trình duyt web s b& qua dòng chú thích này.
Cú pháp:
<!-- This is a comment -->
6. Mt s( lưu ý
Khi vit vn bn HTML, chúng ta không th oan chc vn bn ó s ưc
hin th th nào trong mt trình duyt khác. Mt khác, vn bn s ưc nh dng
li m)i khi ngưi dùng thay $i kích thưc ca s$ trình duyt. "ng nh dng vn
bn b*ng cách thêm vào các khong trng hoc nhng dòng tr(ng vào vn bn web.
HTML s xóa bt nhng khong trng ưc nó coi là dư. Mt dãy khong
trng liên tip bt k+ s ưc coi là mt khong trng duy nht. Ngoài ra, trong
HTML, mt dòng mi s ưc coi là mt khong trng.
Vic s dng các th <p>  thêm vào các dòng tr(ng c#ng là mt thói quen
xu. Thay vào ó, hãy dùng th <br>.
Th <p> có th ưc s dng mà không có th kt thúc </p>. Tuy nhiên, phiên
bn HTML k tip s không cho phép b& qua bt k+ th kt thúc nào.
IV. Các tag HTML nh dng:
1. Các tag nh dng vn bn:
Tag Ý ngha
<b>
Tô
m vn b
n
<big> nh ngh a vn bn có size ln hơn bình thưng
<em> nh ngh a vn bn ưc nhn mnh (emphasized)