thiết kế web - 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 (4.06 MB, 54 trang )
2/16/2011
1
ĐẠI HỌC SÀI GÒN – KHOA CNTT
THIẾT KẾ WEB
R
ÌNH WEB
Ngôn ngữ HTML
K
Ế VÀ LẬP T
R
GV: Trần Đình Nghĩa
THIẾT
K
1
2/16/2011
2
Nội dung buổi học trước
1. Các bướcthiếtlậpwebsite
2
Thiết
kế
lập
trình
website
2
.
Thiết
kế
lập
trình
website
• Thiếtkế
g
iao di
ệ
n
R
ÌNH WEB
g
ệ
3. Xây dựng website dướigóc
K
Ế VÀ LẬP T
R
nhìn ngộ nghĩnh
THIẾT
K
2
2/16/2011
3
Nội dung
1. Giớithiệuvề HTML
2
Cấu
trúc
1
tài
liệu
HTML
2
.
Cấu
trúc
1
tài
liệu
HTML
3. Các ta
g
(
thẻ
)
HTML
R
ÌNH WEB
g
(
)
4. Hướng dẫnthựchànhHTML
K
Ế VÀ LẬP T
R
5. Gợiýchọn đề tài cho đồ án
THIẾT
K
3
2/16/2011
4
Giớithiệu về HTML
HTML (Hyper Text Markup Language):
ngôn
ngữ
đánh
dấu
siêu
HTML (Hyper Text Markup Language):
ngôn
ngữ
đánh
dấu
siêu
vănbản, dùng để xây dựng một webpage.
HTML: chứa các thành phần định dạng để báo cho browser biết
cách hiểnthị một webpage.
Một trang web thông thường gồm:
Dữ
liệu
(
văn
bản
âm
thanh
hình
ảnh
)
R
ÌNH WEB
Dữ
liệu
(
văn
bản
,
âm
thanh
,
hình
ảnh
,
…
)
Các tag (thẻ) HTML để định dạng mô tả cách thứccácdữ liệuhiển
thị trên trình duyệt
â
í
ể
á
ể
ộ
K
Ế VÀ LẬP T
R
Web brose
r
: ph
â
nt
í
ch & “hi
ể
u” c
á
ctags HTM
L
, hi
ể
n thị n
ộ
i dung
web cho người dùng
Web
p
a
g
e HTML: 1 file *.htm
||
*.html
THIẾT
K
4
pg ||
2/16/2011
5
Trình duyệt – Trình soạn thảo
Web browser – trình duyệtweb
Notepad
R
ÌNH WEB
K
Ế VÀ LẬP T
R
Dreamweaver
THIẾT
K
5
2/16/2011
6
HTML cănbản - Tag (thẻ) HTML
<html>
<html>
<head>
HelloWorld.html
<title>Hello world</title>
</head>
R
ÌNH WEB
<body>
Hello world!<br>
K
Ế VÀ LẬP T
R
It's my first html.
</body>
THIẾT
K
6
</body>
</html>
2/16/2011
7
Cú pháp, đặc tính của HTML
<TAG ten thuoc tinh=“
g
ia tri” …… >__
g
Dữ liệu
</TAG>
HTML tag:
Tên gợinhớ
Tag được quy định trong cặp dấu ngoặc <>
Phần lớn ta
g
g
ồm 2
p
hần mở <ta
g
> và đón
g
<
/
ta
g
>
R
ÌNH WEB
gg p
g
g
/g
Mộtsố tag chỉ có 1 phần& khôngcódữ liệu: <br>, <hr>
Cấutrúclồng
Thuộc
tính
của
tag
cung
cấp
thông
tin
bắt
buộc
/
tùy
chọn
cho
tag
K
Ế VÀ LẬP T
R
Thuộc
tính
của
tag
cung
cấp
thông
tin
bắt
buộc
/
tùy
chọn
cho
tag
Mộtsố web browser không hiểumộtsố tag hoặcthuộctính
Không phân biệt chữ hoa, thường
ỏ
á
ả
ắ
THIẾT
K
7
B
ỏ
qua c
á
ckho
ả
ng tr
ắ
ng
2/16/2011
8
Cấutrúc một webpage HTML
<html>
<head>
<title>Hello world
ầ
utrang
rang
</title>
</head>
Phần đ
ầ
kết thúc 1 t
R
ÌNH WEB
<body>
Hello world!<br>
ội dung
Bắt đầuvà
K
Ế VÀ LẬP T
R
It's my first html.
</body>
Phầnn
THIẾT
K
8
</html>
2/16/2011
9
Cấu trúc 1 tài liệu HTML
<ht l></ht l>
Đị h hĩ h i ủ ă bả
<ht
m
l></ht
m
l>
:
Đị
n
h
ng
hĩ
a
p
h
ạm
v
i
c
ủ
a
v
ă
n
bả
n
HTML
<head></head> : Định nghĩa các mô tả về trang
HTML. Thông tin trong tag này không được hiển thị trên
R
ÌNH WEB
trang web
<title></title> : Mô tả tiêu đề trang web
K
Ế VÀ LẬP T
R
<body></body> : Xác định vùng thân của trang web,
nơi chứa các thông tin
THIẾT
K
9
2/16/2011
10
Các tag HTML cơ bản
T
ử
lý
đị h
d
ă
bả
T
ag
x
ử
lý
đị
n
h
d
ạng v
ă
n
bả
n
Tag danh sách
Tag tạobảng <table>
R
ÌNH WEB
Tag liên kếttrang<a>
Ta
g
hình ảnh <im
g
>
K
Ế VÀ LẬP T
R
g
g
Tag âm thanh
THIẾT
K
10
2/16/2011
11
Tag xử lý định dạng văn bản
Tiê
đề
h di t <h1> <h2> <h6>
Tiê
u
đề
-
h
ea
di
ng
t
ags:
<h1>
,
<h2>
,
…,
<h6>
Đoạnvănbản: <p>
Định dạng chuỗi: <em>, <i>, <b>, và <font>
Đườn
g
kẻ n
g
an
g
: <hr>
R
ÌNH WEB
g
gg
Xuống dòng <br>
ể
á
ý
ặ
ệ
K
Ế VÀ LẬP T
R
Hi
ể
nthị c
á
ck
ý
t
ự
đ
ặ
cbi
ệ
t
THIẾT
K
11
2/16/2011
12
Ví dụ: Tag Heading
Nội
dung
hiện
thị
Nội
dung
hiện
thị
Trong trình duyệt
R
ÌNH WEB
K
Ế VÀ LẬP T
R
Ngôn ngữ HTML
Trong trình soạnthảo
Introduction_HeadingTag.html
THIẾT
K
12
2/16/2011
13
Ví dụ: Tag Paragraph
Thuộc
tính
của
tag <body>
Thuộc
tính
của
tag <body>
<body bgcolor=‘pink’>
P hF t ht l
R
ÌNH WEB
P
aragrap
hF
orma
t
.
ht
m
l
K
Ế VÀ LẬP T
R
THIẾT
K
13
2/16/2011
14
Horizontal rules
<HR >
<HR
…
>
Thuộc tính :
align : Canh hàng đường kẻ ngang so với
HorizontalRules.html
trang web
width : Chiều dài đường kẻ ngang
size : Bề r
ộ
n
g
của đườn
g
kẻ n
g
an
g
R
ÌNH WEB
ộ g g
gg
noshade : Không có bóng
<HR
noshade
size=
‘
5
’
align=
‘
center
’
width=
‘
40
%’
>
K
Ế VÀ LẬP T
R
<HR
noshade
size=
5
align= center width=
40
%
>
</HR>
<HR
size
=‘
15
’
align
=‘
right
’
width
=‘
80
%’
></HR>
THIẾT
K
14
<HR
size
15
align right width
80
%
></HR>
2/16/2011
15
Định dạng chữ
<
ft>
Hll ld
</f t>
<
f
on
t>
H
e
ll
o
wor
ld
</f
on
t>
<font style="font-family:Verdana, Geneva, sans-serif"
color="#000099" size="3"> Hello world </font>
<b>This text is bold</b>
<strong>This text is strong </strong>
R
ÌNH WEB
<big>This text is big </big>
<em>This text is emphasized </em>
<
i
>
This text is italic
</
i
>
K
Ế VÀ LẬP T
R
<
i
>
This text is italic
</
i
>
<small>This text is small</small>
This text contains a
<sub>
2
</sub>
THIẾT
K
15
This text contains a
<sub>
2
</sub>
This text contains x<sup>2</sup>= a x a
2/16/2011
16
Định dạng chữ
<EM>
Computer Sciences
</EM>
<EM>
Computer Sciences
</EM>
<STRONG> Computer Sciences </STRONG>
<DFN>
Computer Sciences
</DFN>
<DFN>
Computer Sciences
</DFN>
<CODE> Computer Sciences </CODE>
<
KBD
>
Computer Sciences
<
/KBD
>
TextFormat.html
R
ÌNH WEB
KBD
Computer Sciences
/KBD
<VAR> Computer Sciences </VAR>
<CITE> Com
p
uter Sciences <
/
CITE>
K
Ế VÀ LẬP T
R
p
/
<BLINK> Computer Sciences </BLINK>
<DEL> Computer Sciences </DEL>
THIẾT
K
16
<INS> Computer Sciences </INS>
2/16/2011
17
Định dạng theo tag <Pre>
Hiển thị đúng dạng văn bản đã soạn thảo (khoảng
Hiển thị đúng dạng văn bản đã soạn thảo (khoảng
trắng, xuống dòng, tag,…)
PreTag.html
R
ÌNH WEB
K
Ế VÀ LẬP T
R
THIẾT
K
17
2/16/2011
18
Các ký tự đặc biệt
Hiển
thị
các
ký
tự
đặc
biệt
Result Description Entity name Entity number
Khoảng trắng
 
Dấ
à
Hiển
thị
các
ký
tự
đặc
biệt
&
Dấ
uv
à
& &
“
Ngoặckép
" "
<
Nhỏ hơn
< <
Lớ
hơ
R
ÌNH WEB
>
Lớ
n
hơ
n
&
gt; >
Ví dụ:Để hiểnthịđược: <Dai hoc sai Gon> & “SGU”
&
lt;Dai
hoc
sai
Gon>
;&
nbsp
;&
nbsp
;&
K
Ế VÀ LẬP T
R
&
lt;Dai
hoc
sai
Gon>
;&
nbsp
;&
nbsp
;&
;   ; "SGU"
HTML
special character
THIẾT
K
18
HTML
special character
SpecialCharacter.html
2/16/2011
19
Tag hình ảnh
<img>
: Không có thẻ đóng
<img>
: Không có thẻ đóng
<img scr=“URL” alt=“Description” width =“Number”
height
=
“
Number
”
>
height
= Number
>
Các thuộc tính của tag <img>:
scr
: Đường dẫn đến file hình ảnh
ImageTag.html
R
ÌNH WEB
scr
: Đường dẫn đến file hình ảnh
alt : Chú thích cho hình ảnh
width
:
chiều
rộng
của
hình
khi
hiển
thị
K
Ế VÀ LẬP T
R
width
:
chiều
rộng
của
hình
khi
hiển
thị
height: chiềudàicủa hình khi hiểnthị
position
: Top, Bottom, Middle
THIẾT
K
19
position
: Top, Bottom, Middle
border : Độ dày nét viền quanh ảnh (default=0)
2/16/2011
20
Tag hình ảnh
Giá
t ị
ặ
đị h
ủ
2
th ộ
tí h
idth h i ht
là
kí h
Giá
t
r
ị
m
ặ
c
đị
n
h
c
ủ
a
2
th
u
ộ
c
tí
n
h
w
idth
,
h
e
i
g
ht
là
kí
c
h
thướcthậtcủa file ảnh.
Đặt
ảnh
nền
cho
trang
web
Đặt
ảnh
nền
cho
trang
web
Sử dụng thẻ <body Background=‘Image Path’>
ví
dụ
:
R
ÌNH WEB
ví
dụ
:
<body>
<
img
scr
=
“
123
jpg
”
alt
=
“
Something is here
”
width
K
Ế VÀ LẬP T
R
<
img
scr
=
123
.
jpg
alt
= Something is here
width
=“45” height = “45”>
</body>
THIẾT
K
20
</body>
2/16/2011
21
Tag âm thanh
<b
g
sound> : Khôn
g
có ta
g
đón
g
gggg
Thuộc tính của tag <bgsound>
Sound.html
SRC : Đường dẫn đến file âm thanh
Loop : Số lầnlặp(bằng -1 : Lặpvôhạn)
R
ÌNH WEB
<bgsound> Thường đặt trong tag <head> củaweb.
Ví d
BGSOUND ‘b id’ LOOP ‘
1
’
K
Ế VÀ LẬP T
R
Ví d
ụ:
<
BGSOUND
src=
‘b
atman.m
id’ LOOP
=
‘
1
’
>
Tag comment – Ghi chú trong HTML
THIẾT
K
21
<!- - Nội dung ghi chú >
2/16/2011
22
Tag danh sách
T
T
It i Li t
T
ypes
T
ags
It
ems
i
n
Li
s
t
Ordered List
<ol>
<Li>
Unordered List
<ul>
<Li>
Li t
It
<
li
>
Li
s
t
It
em
<
li
>
User-defined List
<dl>
<dt>, <di>
R
ÌNH WEB
Thuộctínhtype của các tag danh sách
Xem các v
í
dụ
K
Ế VÀ LẬP T
R
THIẾT
K
22
2/16/2011
23
Tag danh sách
Vd: Danh sách có thứ tự:
OrderedList.html
R
ÌNH WEB
K
Ế VÀ LẬP T
R
THIẾT
K
23
2/16/2011
24
Danh sách có thứ tự
OrderedListType.html
R
ÌNH WEB
K
Ế VÀ LẬP T
R
THIẾT
K
24
2/16/2011
25
Danh sách không có thứ tự
Vd: Danh sách khôn
g
có thứ t
ự
:
UnOrderedList.html
g
ự
R
ÌNH WEB
K
Ế VÀ LẬP T
R
THIẾT
K
25
