Ngôn ngữ HTML nâng cao dành cho những người thiết kế Web chuyên nghiệp

HTML NÂNG CAO
Siêu liên kt
2
Gii thiu siêu liên kt
3
 Cc dng liên kt
 Liên kt trong l liên kt đn cc phn trong
cng ti liu hoc cng mt web site
 Liên kt ngoi l liên kt đn cc trang trên
cc web site khc hoc my ch khc.
Liên kt trong v liên kt ngoi
4
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - - -
- - -
- - - -

- - -
Liên kt
5
 Liên kt đn ti liu khc
 Đưng dn tuyt đi
 Đưng dn tương đi
 Liên kt đn cc phn trong cng mt ti liu
 Liên kt đn mt đim xc đnh  mt ti liu khc
 S dng e-mail
To siêu liên kt
6
 Đ to siêu liên kt, chng ta cn phi xc đnh
hai thnh phn :
 Đa ch đy đ hoc URL ca file đưc kt ni
 Đim nng cung cp cho liên kt. Đim nng ny
c th l mt dng văn bn hoc hình nh.

Thẻ siêu liên kt
7
 Thẻ <A>: Thuc tính HREF
 C php ca HREF l :
<A HREF = protocol://host.domain:port/path/filename>
Hypertext </A>
 Protocol xc đnh loi giao thc
 Host.domain l đa ch Internet ca my ch
 Port l cng phc v ca my ch đch
 HyperText l văn bn hay hnh nh m user cn
nhp vo đ kch hot liên kt
Giao thc
8

 <A HREF="http:// "> liên kt với mt website
 <A HREF="ftp:// "> liên kt với mt FTP site
 <A HREF="mailto: "> liên kt với 1 đa ch đ gi mail
 <A HREF="file#local"> liên kt với mt v tr trong trang
web
 <A HREF=“filename”> liên kt download file
 V d:
<A HREF=“index.htm#Dinhvi”>Local</A>
<A HREF=“”>KhoaCNTH</A>
<A HREF=“mailto: ”> E-mail to us</A>
<A HREF=“vanban.doc”> Download this file</A>
Thẻ siêu liên kt
9
 Thẻ <A> : thuộc tính NAME
 Cú pháp: <A NAME=“ ”> </A>
 Thuc tính NAME cho phép đt tên cho v trí
mun liên kt bên trong mt trang web hoc
từ trang khác đn 1 v trí trong trang.
 Ví d :
<A HREF=“index.htm#Dinhvi”>Local</A>
<A NAME=“Dinhvi">local</A>
Thẻ siêu liên kt
10
 Thẻ <A> : thuộc tính TARGET
 Cú pháp: <A Target=“ ”> </A>
 Thuc tnh Target dng đ ch đnh cho trnh duyt np
đi tưng liên kt vo 1 ca s ch đnh.
 Cc lựa chọn ca target :
 _blank ( ca s mới ),
 _self ( np vo ca s ny ) mc đnh

 _parent ( np vo ca s đưc m gn nht ),
 _top ( np vo ca s đưc m xa nht ),
 window_name : tên ca frame trong trang ( np vo
frame có tên này ).
V d: <a target=“_blank” Href=“index.htm”>index.htm</a>
Thẻ liên kt âm thanh
11
Thẻ <BGSOUND>
 Cú pháp:
<BGSOUND SRC=“URL” LOOP=“n”>
 Liên kt mt trang web tới mt file âm thanh,
trình duyt sẽ chy file này khi trang web đưc
m lên.
 File âm thanh phi  dng .MIDI, .AU hay .WAV.
 Các thuộc tính của thẻ BGSOUND :
 SRC : đa ch file âm thanh
 LOOP : ch đnh s vòng lp , với INFINITE hoc -
1 là lp vô hn.

Thẻ liên kt video
12
 Thẻ IMG:
 Chèn đon phim có đuôi *.avi vào trang Web
 Cú pháp:
<img dynsrc="file.avi" src="filename" width=“ "
height=“ " alt=“text">
 Trong đ:
 file.avi là đưng dn đn tập tin phim
 filename là đưng dn ch đn tập tin hình nh (*.gif,
*.jpg).

 Hình nh dùng tm thi trong khi ch đi tập tin phim kia
đưc ti về.
 Thuc tính ALT=“text”: Hin ra dòng chữ chú thích khi đưa
chut vào hình nh
 Khi không có thuc tính DYNSRC="file.avi”, thẻ IMG đưc
dùng đ chèn hình nh vào trang web.
Thẻ liên kt hnh nh
13
 Thẻ IMG:
 Chèn hình nh vào trang web.
 Cú pháp:
<IMG SRC="filename.extension“ WIDTH=“x"
HEIGHT=“y" ALIGN=“left/right“ ALT=“text">
 Trong đ:
 filename là đưng dn ch đn tập tin hình nh (*.gif,
*.jpg, *.png).
 Thuc tính WIDTH, HEIGHT ch kích thước hin th nh,
x,y có th có giá tr s hoc phn trăm.
 Thuc tính ALIGN ch v trí hin th nh
 Thuc tính ALT=“text”: Hin ra dòng chữ chú thích khi đưa
chut vào hình nh
Thẻ liên kt âm thanh
14
 Thẻ <EMBED>
 Cho phép ngưi son tho chèn liên kt trực tip vào trang web.
 Cú pháp:
<EMBED SRC=“URL" WIDTH=“n" HEIGHT=“m" AUTOSTART=“ " LOOP=“ “ HIDDEN=“”>
 Các thuộc tính của thẻ EMBED :
 SRC : đa ch file âm thanh
 WIDTH/HEIGHT ch ra kích thước ca thanh điều khin, bằng s pixel hay

giá tr tương đi (%)
 AUTOSTART ch đnh cho trình duyt có tự đng chơi bn nhc (true) hay
không (false)
 LOOP ch đnh cho trình duyt có lp li bn nhc này (true) hay không
(false).
 HIDDEN dùng đ làm ẩn thanh điều khin này (true).
To danh sch
Kt qu
Danh sách có trật tự
<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
Danh sách không có trật tự
<ul>
<li>Yu t 1
<li>Yu t 2
<li>Yu t 3
</ul>


•Yu t 1
•Yu t 2
•Yu t 3

15

To danh sch
Kt qu
Danh sách định nghĩa
<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
</dl>


Yu t 1
Chú gii cho yu t 1
Yu t 2
Chú gii cho yu t 2
Danh sách kiểu thực đơn
<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

16
Thẻ TABLE
17

 Thẻ <TABLE> </TABLE>: To bng
trong trang web
 Dùng bng trình bày rt tin li, dễ dàng
cho vic tìm kim
 Có th đưa văn bn, hình nh, danh sách
và thậm chí có th chèn thêm vào đ mt
bng mới.
 Bng HTML cũng có các chc năng trình
bày, đnh dng, đưng biên như bng trong
MS-Word, MS-Excel.

Cc thuc tnh ca thẻ TABLE
18
 border=“value”: kích thước đưng biên (value=0: không
có đưng biên)
 cellspacing=“value”: khong cách giữa các ô (giá tr mc
đnh là 2)
 cellpadding=“value”: khong trắng giữa đưng biên và ô
(giá tr mc đnh là 1)
 width=“value”: đ rng bng tính bằng pixels hoc % đ
rng ca s hin th
 height =“value”: đ cao bng tính bằng pixels hoc % đ
cao ca s hin th
 align=“left/right/center/justify”: canh lề
tri/phi/giữa/đều
 valign=“top/bottom/midle”: canh lề trên/dưới/giữa
 bgcolor=“name”: màu nền cho bng
 bordercolor=“name”: màu đưng biên bng
 background=“url”: nh làm nền cho bng

Đnh dng dữ liu bng
19
 Thẻ <tr>: to dng
 Thẻ <td>: To ct
 Thẻ <th>: To dng tiêu đề ct (in đậm, canh
giữa)
 Thẻ <caption>: To tiêu đề cho ton b bng,
tiêu đề đưc căn giữa
 C 3 thẻ <tr>, <th>, <td> ngoi cc thuc tnh
tương tự thẻ <table>, cn c cc thuc tnh sau:
 colspan=n :M rng ct thnh n ct
 rowspan=n: M rng dng thnh n dng
Đnh dng dữ liu bng
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor = lavender>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<caption> Thi kha biu</caption>
<tr>
<th>Ca học</td>
<th>Th 2</td>
<th>Th 3</th>
<th>Th 4</td>
<th>Th 5</th>
<th>Th 6</td>

<th>Th 7</th>
<th>Ch nhật</th>
</tr>

<tr>
<th>Ca 1</td>
<td>Cơ s lập trnh</td>
<td>Tư tưng Hồ Ch Minh</td>
<td>Ting Anh 3</td>
<td>Kin trc my tnh</td>
<td>Ngôn ngữ thit k web</td>
<td>Đin t kỹ thuật s</td>
<td>Mng v truyền thông</td>
</tr>
<tr>
<th>Ca 2</td>
<td>Cơ s lập trnh</td>
<td>Tư tưng Hồ Ch Minh</td>
<td>Ting Anh 3</td>
<td>Kin trc my tnh</td>
<td>Ngôn ngữ thit k web</td>
<td>Đin t kỹ thuật s</td>
<td>Mng v truyền thông</td>
</tr>
</table>
</body>
</html>

BÀI TẬP
22

 Thit k mt trang web tùy ý, với ni dung cha các
thành phn:
 Hình nh, thanh kẻ ngang (horizontal ruler), links (link
email, link download, link đn trang khác…)
 Có đnh dng tiêu đề, có đnh dng chữ
 Dùng Notepad, frontpage hoc dreamweaver đ vit
code HTML. (Không đưc dùng tool, phi tự gõ code).