Slide thiết kế lập trình chương 2 ngôn ngữ htlm

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 (24.25 MB, 90 trang )

ĐẠI HỌC QUỐC GIA TP.HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHAO CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM

Bài
02:

Ngôn ngữ HTML

CuuDuongThanCong.com

/>

3
2
1
6
5

4

Nội
dung

H TML

Các
tag

cơ

b

ản

Cấu

t

rúc

t ài

Giới

t

hiệu

liệu
HTML

Tag

k

ẻ

b

ảng

HTML

Tag

l

iên

k ế

Tag

danh

trang

sách

CuuDuongThanCong.com

/>

1

Giới
thiệu

Ngôn
ngữ
HTML

Ngôn
ngữ
HTML

CuuDuongThanCong.com

/>

Giới thiệu về ngôn ngữ HTML

! 

HTML
(HyperText
Markup
Language)

!
!
!

!

Ngôn
ngữ
đánh
dấu
siêu
văn
bản.

Là
ngôn
ngữ
xây
dựng
trang
Web.

Chứa
các
chỉ
dẫn
cho
trình
duyệt
Web
hiển
thị
nội

dung
của
một
trang
Web.

Một
trang
web
gồm
có
2
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

CuuDuongThanCong.com

/>

Trình duyệt và Trình soạn thảo code

!

Trình
duyệt
web
(Browser)

CuuDuongThanCong.com

!

Trình
soạn
thảo
(Editor)

/>

Công cụ soạn thảo code HTML

!

Phần
mềm:
Sublime
Text

! 

Link
download:
h3p://www.sublimetext.com/2

CuuDuongThanCong.com

/>

2

Cấu
trúc

Tài
liệu
HTML

Ngôn
ngữ
HTML

CuuDuongThanCong.com

/>

CuuDuongThanCong.com

/>

Thẻ (Tag) HTML
<b> Dòng chữ này được in đậm </b>
! 
!

!
!

!

mở>
Dữ
liệu

đóng>

Tên
Tag
à
ln
mang
cnh
gợi
nhớ

! Ví
dụ:
B
~
Bold,
I
~
Italic,
P
~
Paragraph

Đôi
khi
không
cần
Tag
đóng

,<hr>,<img>,…
Cú
pháp
chung

Tên_thuộc_cnh=“giá_trị”

……..>
Dữ
liệu
</tag>

Ví
dụ
:

!   <div>Thuong
mai
Dien
tu
1</div>

!   id="txtDiv"
style="color:#0000CC">Thuong
mai

Dien
tu
2</div>

CuuDuongThanCong.com

/>

Thẻ (Tag) HTML
Mã
HTML

Hiển
thị

Mã
HTML

Hiển
thị

Lưu
ý
:

• 
Giá
trị
Thuộc
cnh
của
Thẻ
nên
đặt
trong
dấu
nháy
đơn
hoặc
nháy
kép

• 
Khơng
phân
biệt
chữ
HOA
và
thường

• 
Bỏ
qua
các

khoảng
trắng
thừa
và
các
dấu
ngắt
dòng,
xuống
dòng

CuuDuongThanCong.com

/>

Thẻ (Tag) HTML

Lưu
ý:
Các
Tag
nên
lồng
nhau
tuyệt
đối

CuuDuongThanCong.com

/>

Thẻ (Tag) HTML

<HTML>

Có
bao
nhiêu

Thẻ
HTML
?

<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>
CuuDuongThanCong.com

/>

Chuẩn XHTML

! 

XHTML
=
HTML
+
XML

!

!

Tất
cả
các
tag
HTML
mở
đều
phải
có
tag
đóng

Ví
dụ:

!   <hr>

!   <img>

!   <input>
! 

CuuDuongThanCong.com

à

à

à

à

/>

/>

/>

/>

/>

CuuDuongThanCong.com

/>

Cấu trúc của một trang HTML

<html>
<head>
<title>Tiêu đề </title>

</head>

Phần đầu
trang HTML

<body>
Nội dung 1
Nội dung 2
Nội dung 3

Bắt đầu và
Kết thúc của
trang HTML

Nội dung
trang HTML

</body>

</html>
CuuDuongThanCong.com

/>

Cấu trúc của một trang HTML

! 

! 

! 
! 

<html></html>
:
Định
nghĩa
phạm
vi

của
văn
bản

HTML

<head></head>
:
Định
nghĩa
các
mô
tả
về
trang

HTML.
Thông
‚n
trong
tag
này
không
được
hiển
thị

trên
trang
web

<‚tle></‚tle>
:
Mô
tả
‚êu
đề
trang
web

<body></body> : Xác
định
vùng
thân
của
trang

web,
nơi
chứa
các
thông
‚n

CuuDuongThanCong.com

/>

Cấu trúc của một trang HTML

CuuDuongThanCong.com

/>

<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>

CuuDuongThanCong.com

/>
18

3