Bài giảng Lập trình web Chương 1 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 (987.35 KB, 29 trang )

Khoa Công Ngh Thông Tin
Tr ng i H c C n Thơ

Ngôn Ng HTML
Hi p Thu n

C n Th
10-03-2006

N i dung
Gi i thi u HTML
Thành ph n c a HTML
Th HTML cơ b n
Th HTML nâng cao

Printed with FinePrint trial version - purchase at www.fineprint.com

2

Gi i thi u HTML
Mơ hình Web
a (
!"

"
&""
&
%
$

#

a

"

!

&

3

Gi i thi u HTML
HTML là gì?
Ngơn ng
ánh d u siêu v n b n (Hyper Text
Markup Language)
File HTML là 1 text file (file v n b n) có ch a các
th (tag) ánh d u.
Th - tag dùng
nh d ng v n b n, và ư c hi n
th b i trình duy t Web (Web Browser)
File HTML có ph n m r ng là .htm hay .html

Printed with FinePrint trial version - purchase at www.fineprint.com

4

Gi i thi u HTML
C u trúc c a tài li u HTML
<html>
<head>
<title> Tieu de cua trang </title>
</head>
<body>
Day la trang Web dau tien.
 Day la doan van ban in dam
</body>
</html>
5

Các thành ph n c a HTML
Th - tag trong HTML
Dùng
nh d ng tài li u,
Tên th không phân bi t ký t HOA hay thư ng,
Thu c tính c a
b sung thêm thông tin cho n i
dung,
V n b n c n nh d ng ph i n m gi a th b t u
và th k t thúc g i là thành ph n n i dung,
Th có th l ng vào trong th khác, nhưng khơng
có s CHÉO l n nhau

Printed with FinePrint trial version - purchase at www.fineprint.com

6

Các thành ph n c a HTML
Th - tag trong HTML
D ng th
Th

n: ch có th b t

u

Ví d :
 
<image src=“”>

Th kép: có th b t u và có th k t thúc
 V n b n
c in d m

7

Các thành ph n c a HTML
a ch tuy t

i và

a ch tương

i

a ch tuy t i: a ch

y
n 1 tài li u trên
Internet hay trong máy tính c c b .
VD : />
a ch n!n:
VD :

a ch b t

u c a trang Web ó.

<base href=" />
a ch tương i: a ch ư c tính t" v trí hi n t i
c a trang HTML hay tính t" a ch n!n (n u có).
VD : <img src=“hinhnen/smile.gif">
<a href=“./nextpage.htm"> Trang ke tiep </a>

Printed with FinePrint trial version - purchase at www.fineprint.com

8

Th HTML cơ b n
Th cơ b n:
<html> :
nh ngh#a 1 trang Web
<head> : ph n u c a trang Web
<body> : ph n thân c a trang Web

...

: các ! m c kích thư c t" 1

: m t o n (paragraph)

: xu ng hàng
<hr> : v$ 1 hàng ngang
 : chú thích
Thu c tính : align = “left / right / center”

n6

9

Th HTML cơ b n
Ví d 1:

Printed with FinePrint trial version - purchase at www.fineprint.com

10

Th HTML cơ b n
Th

nh d ng v n b n:

 : in %m
 : g ch dư i
 : in nghiêng
 : nh n m nh
 : làm n i b%t
<big> : ch l n
 : ch nh&
 : ch s trên

: ch s dư i

<code> : computer code
<kbd> : keyboard
<samp> : sample
<tt> :
teletype text
<var> : variable

 : có d ng gi ng như
ph n so n th o.
<strike>, <s>, <del> :
g ch gi a
11

Th HTML cơ b n
Ví d 2:

Printed with FinePrint trial version - purchase at www.fineprint.com

12

 
Th HTML cơ b n
Ví d 3:

13

Th HTML cơ b n
nh d ng ký t
 

<
>
&

kho ng tr ng
ký t <
ký t >
ký t &

'c bi t:
"
©
®
¥

Printed with FinePrint trial version - purchase at www.fineprint.com

ký t
ký t
ký t
ký t


â
đ
Ơ

14

 

Th HTML cơ b n
Th t o liên k t:
Liên k t ngoài :
<a href=“URL"> Text

)))))))
)))))))
)))))))

i di n </a>

4 5
6

* +,

)))))))
)))))))
a (

,

)))))))
)))))))
)))))))
)))))))
)))))))
a ( - +.a /
*0 +.
1 23

15

Các th HTML cơ b n
Ví d t o liên k t ngồi:

Printed with FinePrint trial version - purchase at www.fineprint.com

16

 
Các th HTML cơ b n
Th t o liên k t (link):
Liên k t trong :
<a name=“TenViTri">Vi tri bat dau </a>
<a href=“#TenViTri"> Text i di n </a>
?6
(
a (
5
ưa
5A

)))))))
)))))))
* +,
)))))))
)))))))
)))))))
)))))))
7

a a
)a
( )
8 9:;<=>)
)))))))

4 5
6

7
a a
)a
( )
8 9:;<=>)
)))))))
)))))))
)))))))
)))))))
)))))))
)))))))
)))))))

?6
(
a (
5
B
5A
17


Các th HTML cơ b n
Ví d t o liên k t trong:

Printed with FinePrint trial version - purchase at www.fineprint.com

18

 
Các th HTML cơ b n
Th t o liên k t(link):
K t h p liên k t ngoài và liên k t trong :
<a name=“TenViTri">Vi tri bat dau </a>
<a href=“URL#TenViTri"> Text i di n </a>
)))))))
)))))))
)))))))
7
a a
)a
( )
8 9:;<=>)
)))))))
a ( - +.a /
*0 +.
1 23

)))))))
)))))))
* +,
)))))))

)))))))
)))))))
)))))))
a (

4 5
6

,

7
a a
)a
( )
8 9:;<=>)
)))))))
)))))))
)))))))
)))))))
)))))))
)))))))
)))))))

?6
(
a (
5
B
5A
19


Các th HTML cơ b n
Ví d t o liên k t k t h p ngoài - trong

Printed with FinePrint trial version - purchase at www.fineprint.com

20

 
Các th HTML cơ b n
T o liên k t (link) m r ng
M thêm 1 trang m i t" liên k t
<a href=“URL" target="_blank"> Text </a>

n 1 trang dư i d ng tồn trình duy t
<a href=“URL" target="_top"> Text </a>

n chương trình Mail Client :
<a href=“mailto : “> Text </a>

T" 1 hình nh
<a href=“Url1“> <img src=“Url2”> </a>

21

Các th HTML cơ b n
Ví d t o liên k t m r ng

Printed with FinePrint trial version - purchase at www.fineprint.com


22

 
Các th HTML cơ b n
Th Frame
Trình bày nhi!u tài li u HTML trong cùng trang Web
M(i tài li u HTML ó g i là frame.
M(i frame s$

c l%p v i nhau.

Th <frameset> dùng
chia màn hình ra nhi!u
frame, m(i frame nh ngh#a 1 t%p các dòng,c t.
VD : <frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
23

Các th HTML cơ b n
Ví d t o Frame trong HTML

Printed with FinePrint trial version - purchase at www.fineprint.com

24

 
Các th HTML cơ b n
Th Table

M t b ng ư c

nh ngh#a b i th <table>

M t b ng ư c chia làm nhi!u dòng ( v i th <tr> )
M(i dịng ư c chia làm nhi!u ơ d li u ( th
N

<td>

)

i dung thông tin trong m(i ô trong b ng :
Text, hình nh, ư ng th)ng(hr)
Danh sách (list)
Form
Table con, …
25

Các th HTML cơ b n
Ví d t o table trong HTML

Printed with FinePrint trial version - purchase at www.fineprint.com

26

 
Các th HTML cơ b n
Ví d t o table trong HTML


27

Các th HTML cơ b n
Table v i ô d li u tr ng

Printed with FinePrint trial version - purchase at www.fineprint.com

28

 
Các th HTML cơ b n
Table v i thu c tính border

29

Các th HTML cơ b n
Table v i thu c tính cellpadding

Printed with FinePrint trial version - purchase at www.fineprint.com

4 $a
(%
C 5 !D (
E ( 1 6
( ! (F
G
+A
+ưH ( I

30


 
Các th HTML cơ b n
Table v i thu c tính cellspacing

4 $a ( %
5 !D ( 0
( Ga 0 F
G
! (
D (

31

Các th HTML cơ b n
Table v i s c t không b ng nhau

Printed with FinePrint trial version - purchase at www.fineprint.com

32

 
Các th HTML cơ b n
D li u trong Table

33

Các th HTML cơ b n
Th danh sách (List)
Có 3 d ng danh sách chính

Danh sách có th t (Ordered List) :
Danh sách không th t (Unordered List) :
Danh sách nh ngh a (Definition Lists) :

<ol>
<ul>
<dl>

Danh sách s$ g m nhi!u ph n t*
M i ph n t trong danh sách
c ánh d u b i th <li>
Còn trong danh sách nh ngh a (dl) là : <dt> và <dd>

Ngoài ra cịn có các d ng: <menu> và <dir>
Có th
nh ngh#a các danh sách l ng nhau
Printed with FinePrint trial version - purchase at www.fineprint.com

34

 
Các th HTML cơ b n
Th danh sách (ví d )
Ja
0
K L
M
I
+.

, (
5 0
a

35

Các th HTML cơ b n
Th danh sách (ví d )

Printed with FinePrint trial version - purchase at www.fineprint.com

Ja
0
5 F (
K L
M
I
+.
, (
5 0
a
36

 
Các th HTML cơ b n
Th danh sách (ví d )

37

Các th HTML cơ b n

Th Form
L a ch n d li u nh%p t" ngư i s* d ng khi truy xu t
Web,
Thành ph n trong Form: text fields, textarea fields, dropdown menus, radio buttons, checkboxes, etc.
Form ư c ánh d u b i th : <form> …. </form>
VD : method=“GET|POST"> …</form>

Printed with FinePrint trial version - purchase at www.fineprint.com

38

 
Ví d v Text Field

39

Ví d v Radio Button

Printed with FinePrint trial version - purchase at www.fineprint.com

40

 
Ví d v Checkbox

41

Ví d v Submit button


Printed with FinePrint trial version - purchase at www.fineprint.com

42

 
Các th HTML cơ b n
Th Form (ví d )

43

Các th HTML cơ b n
Th Image
Thêm vào trang web nh ng hình nh dư i
d ng là *.gif hay *.jpg
Th ánh d u là : <image src=“URL”>
Các thu c tính c a th Image

nh

Width = number pixels / number %
Height = number pixels / number %
Align = “left/right/top/middle/bottom”
Alt=“Chu i i di n khi khơng t i
c hình”

Th <map> và <area> : chia hình ra làm nhi!u ph n
Printed with FinePrint trial version - purchase at www.fineprint.com

44


 
Các th HTML cơ b n
Th Image (ví d )

45

Các th HTML cơ b n
Th Body - v i thu c tính
N!n c a trang Web có th

ư c

nh d ng

Màu n n :
• <body bgcolor="#000000">
• <body bgcolor="rgb(0,0,0)">
• <body bgcolor="black">

nh n n :
• <body background="clouds.gif">
• <body background=“ />• <body background=“/bkground.jpg">

Printed with FinePrint trial version - purchase at www.fineprint.com

46

 
Các th HTML cơ b n
Th Body - thu c tính bgcolor


47

Các th HTML cơ b n
Th Body - thu c tính background

Printed with FinePrint trial version - purchase at www.fineprint.com

48

 
Th HTML nâng cao
Th Head:
Gi a c'p th <head> và </head> : thông tin v! tiêu
, a ch n n, styles, meta, font n n, …
Thông tin khai báo trong th Head không ư c th
hi n ra trong n i dung trang Web.
VD :<head>
<title> Tieu de trang Web </title>

<meta name="keywords" content="HTML">
</head>
49

Th HTML nâng cao
Th Title
Cung c p tên tiêu ! trên thanh tiêu ! c a trình
duy t khi th hi n trang Web.


Printed with FinePrint trial version - purchase at www.fineprint.com

50

Bài giảng Lập trình web Chương 1 Ngôn ngữ HTML

...

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về