Bài giảng Thiết kế Web - Chương III: Ngôn ngữ HTML

g quan về HTML (tt)
-Tạo HTML files dễ dàng hơn với WYSIWYG editor như là 
FrontPage or Dreamweaver (Adobe, Macromedia).
VD1:
 ðây là tiêu ñề trang Web
 ðây là trang Web ñầu tiên
Thiết kế web Khoa CNTT 5
Tổng quan về HTML – thẻ HTML (Tag) 
- Dữ liệu 
- Tên Tag thường bắt nguồn từ một từ tiếng Anh
- Ví du^: B ~ Bold, I ~ Italic, P ~ Paragraph
- ðôi khi không cần Tag ñóng , 
-Cú pháp một HTML Tag:
 Dữ liệu 
VD:
Danh sách có ñánh số
HTML element
Tên Tag và giá tr3 dùng ch5 hoa hay th67ng?
Thiết kế web Khoa CNTT 6
Chương III: Ngôn ngữ HTML
• Tổng quan về HTML
• Cấu trúc tổng quát trang HTML
• Các Tag HTML thông dụng
• Các thẻ ñịnh dạng danh sách
Thiết kế web Khoa CNTT 7
Cấu trúc tổng quát trang HTML
1-> 
 Trang dau tien
2-> 
 Day la trang dau 
tien
3-> 
 Trong phan BODY day 
Xem kết quả hiển thị
Thiết kế web Khoa CNTT 8
Cấu trúc tổng quát trang HTML

 : ðịnh nghĩa phạm vi của văn bản HTML

 : ðị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 trang 
web

 : Mô tả tiêu ñề trang web

 : Xác ñịnh vùng thân của trang web, 
nơi chứa các thông tin
Thiết kế web Khoa CNTT 9
Chương III: Ngôn ngữ HTML
• Tổng quan về HTML
• Cấu trúc tổng quát trang HTML
• Các Tag HTML thông dụng
• Các thẻ ñịnh dạng danh sách
Thiết kế web Khoa CNTT 10
Các Tag HTML thông dụng
 Các Tag xử lý văn bản
 Tag hình ảnh
 Tag âm thanh
Thiết kế web Khoa CNTT 11
Các tag xử lý văn bản

Các thẻ ñịnh dạng khối văn bản
– Tiêu ñề (Heading) : , , , , , 
– ðoạn văn bản (Paragraph): 
– Danh sách (List Items): 
– ðường kẻ ngang (Horizontal Rules): 

 Các thẻ ñịnh dạng chuỗi văn bản
– ðịnh dạng chữ : , , và 
– Tạo siêu liên kết : 
– Xuống dòng : 
Thiết kế web Khoa CNTT 12
Các tag xử lý văn bản - Heading
Ví dụ:
 HTML Basic Tags 
This is a heading h1
This is a heading h2 
This is a heading h3 
This is a heading h4 
This is a heading h5 
This is a heading h6
Thiết kế web Khoa CNTT 13
Các tag xử lý văn bản (tt)

Paragraph 
This is a paragraph 
This is another paragraph
 This is a paragraph with attribute 

Line Breaks 
Thẻ này không có thẻ kết thúc tương ứng (). 
Thường dùng ñể tích hợp với XHTML.
VD: This is a paragraph with line breaks

Thẻ ghi chú (Comment)
Thiết kế web Khoa CNTT 14
Defines a horizontal rule 
– Thuộc tiunh :
• align : Canh hàng ñường kẻ ngang so với trang web
• width : Chiều dài ñường kẻ ngang
• size : Bề rộng của ñường kẻ ngang
• noshade : Không có bóng
VD: 
Thiết kế web Khoa CNTT 15
C¸c thÎ ®Þnh d¹ng ký tù 
In chữ bÞ g¹ch ngang. ... 
 ... 
In chữ g¹ch ch©n ... 
In chữ nghiªng ... 
 ... 
In chữ ®Ëm ... 
 ... 
Thiết kế web Khoa CNTT 16
C¸c thÎ ®Þnh d¹ng ký tù
Chọn kiểu chữ hiển thị. Có hai tham số
size và color. Kích thước có thể nhận giá
trị 1 ñến 7.
 ... 
ñÞnh nghÜa kÝch th−íc font chữ ®−îc sö
dông cho ®Õn hÕt văn bản. ThÎ nµy chØ
cã mét tham sè size. ThÎ 
kh«ng cã thÎ kÕt thóc.
chØ sè d−íi (SubScript) ... 
Chỉ số trên (SuperScript) ... 
In chữ nhỏ hơn bình thường ... 
In chữ lớn hơn bình thường ... 
Thiết kế web Khoa CNTT 17
VD C¸c thÎ ®Þnh d¹ng ký tù
This text is bold 
This text is strong 
This text is big 
This text is emphasized 
This text is italic 
This text is small 
This text contains a2 
This text contains x2 = a x a 
Xem kết quả Display
Thiết kế web Khoa CNTT 18
VD C¸c thÎ ®Þnh d¹ng ký tù
Thiết kế web Khoa CNTT 19
C¸c thÎ ®Þnh d¹ng ký tù
Có rất nhiều Tag sử dụng biến căn lề align như HR, P, 
IMG,Các giá trị của align như sau:
Căn lề phảiRIGHT
Giữa trangCENTER
Căn lề tráiLEFT
V¨n b¶n sÏ ®−îc c¨n gi÷a trang
Ngoài ra còn có Tag center:
C¨n lÒ v¨n b¶n trong trang Web
Thiết kế web Khoa CNTT 20
C¸c thÎ ®Þnh d¹ng ký tù
C¸c ký tù ®Æc biÖt 
&&Ký hiệu & (ampersand)&
>>Ký tự lớn hơn (greater than)>
<<Ký tự nhỏ hơn (less than) <
£&puond;Bảng Anh£
€€ðồng Euro€
™™Thương hiệu™
®®Thương hiệu ñã ñược ñăng ký®
©©Bản quyền©
  Khoảng trống (non-breaking 
space)
“ ”
MãTênMô tảKý tự
Thiết kế web Khoa CNTT 21
ðịnh dạng văn bản trước

WYSIWYG với tag 
Hiển thị ñúng dạng văn bản ñã soạn thảo 
(khoảng trắng, xuống dòng, tag,)
VD:
This text is
in a fixed-pitch
font, and it preserves
both spaces and
line breaks
Thiết kế web Khoa CNTT 22
VD C¸c thÎ ®Þnh d¹ng ký tù
 Vi du phan 3.5 
 Noi dung trong P 
can le trai 
 Noi dung trong P 
can le phai 
 Noi dung trong 
P can o giua 
 Noi dung trong CENTER 
 Copyright © MR. Bean
Copyright © MR. Bean
Thiết kế web Khoa CNTT 23
Sử dụng màu sắc
Giá trị màu ñược xác ñịnh:
#RRGGBB
RR: Màu ñỏ
GG: Màu xanh lá cây
BB: Màu xanh nước biển
Giá trị màu trong hệ thập lục phân 0->F
Ví dụ:
#0000FF
#FF0000
#00FF00
#112233
Thiết kế web Khoa CNTT 24
Sử dụng màu sắc
RED
DARKRED
GREEN
LIGHTGREEN
BLUE
YELLOW
LIGHTYELLOW
WHITE
BLACK
GRAY
BROWN
MAGENTA
VIOLET
PINK
ORANGE
NAVY
ROYALBLUE
AQUAMARINE
#FF0000
#8B0000
#00FF00
#90EE90
#0000FF
#FFFF00
#FFFFE0
#FFFFFF
#000000
#808080
#A52A2A
#FF00FF
#EE82EE
#FFC0CB
#FFA500
#000080
#4169E1
#7FFFD4
ñỏ
ñỏ sẫm
Xanh lá cây
Xanh nhạt
Xanh nước biển
Vàng
Vàng nhạt
Trắng
ðen
Xám
Nâu
Tím
Tím nhạt
Hồng
Da cam
Màu ñồng phục hải quân
Tên tiếng AnhGiá trịMàu sắc
Thiết kế web Khoa CNTT 25
Sử dụng màu sắc
Thiết kế web Khoa CNTT 26
Ví dụ về màu
Màu ñỏ bằng số 
Màu ñỏ bằng chữ 
Mau GREEN 
Mau BLUE 
Mau 
"112233" 
Thiết kế web Khoa CNTT 27
Tag hình ảnh

 : Không có thẻ ñóng

Các thuộc tiunh chính của tag :
– SRC : ðường dẫn ñến file hình ảnh
– ALT : Chú thiuch cho hình ảnh
– Position: Top, Bottom, Middle
– Border : ðộ dày nét viền quanh ảnh (default=0)

ðặt ảnh nền cho trang web
– Sử du^ng thẻ 
Thiết kế web Khoa CNTT 28
VD Tag hình ảnh
Untitled Document
 Ví dụ Tag hình ảnh
Thiết kế web Khoa CNTT 29
Tag âm thanh

 : Không có tag ñóng

Thuộc tiunh của tag 
– SRC : ðường dẫn ñến file âm thanh
– Loop : Số lần lặp (bằng -1 : Lặp vô hạn)
– Thường ñặt trong tag của trang 
web.
Ví dụ: 
Thiết kế web Khoa CNTT 30
• Tổng quan về HTML
• Cấu trúc tổng quát trang HTML
• Các Tag HTML thông dụng
• Các thẻ ñịnh dạng danh sách
Thiết kế web Khoa CNTT 31
C¸c thÎ ®Þnh d¹ng danh s¸ch 
Cã 4 kiÓu danh s¸ch:
• Danh s¸ch kh«ng s¾p xÕp 
• Danh s¸ch cã s¾p xÕp 
• Danh s¸ch thùc ®¬n 
• Danh s¸ch ph©n cÊp 
Có ph¸p: 
 Môc thø nhÊt
 Môc thø hai
Muc thu nhat
Muc thu hai
Muc thu ba
Thiết kế web Khoa CNTT 32
C¸c thÎ ®Þnh d¹ng danh s¸ch
 mục thứ I
 Mục thứ II
Danh sách có ñánh 
số
 I
 II
 Danh sach Menu
 Menu 1
 Menu 2
 Danh sach Dir
 Dir 1
 Dir 2
Thiết kế web Khoa CNTT 33
Một số thẻ thông dụng
<BODY
LINK = COLOR
ALINK = COLOR
VLINK = COLOR
BACKGROUND = URL
BGCOLOR = COLOR
TEXT = COLOR
TOPMARGIN = PIXELS
RIGHTMARGIN = PIXELS
LEFTMARGIN = PIXELS
>
Nội dung trong BODY
Thẻ BODY
Thiết kế web Khoa CNTT 34
Ví dụ thẻ BODY
<body link="blue" alink="magenta" 
vlink="darkred" 
bgcolor="#90EE90" text="red">
Trong thẻ BODY
Một cái 
LINK chưa mở 
Một cái LINK 
ñã tưng mở
Một cái LINK 
vừa mở
Thiết kế web Khoa CNTT 35
Một số thẻ thông dụng
Thẻ HR <HR
ALIGN = LEFT / CENTER / 
RIGHT
COLOR = color
NOSHADE
SIZE = n
WIDTH = width
>
<FONT
FACE = font-name
COLOR = color
SIZE = n >
... 
Chọn kiểu chữ cho văn bản
Thẻ FONT
Thiết kế web Khoa CNTT 36
Một số thẻ thông dụng
Thêm hình ảnh Thẻ IMGðịnh nền nhạc cho trang
Thẻ BGSOUND
ðặt dưới nhưng trên 
<BGSOUND
SRC = url
LOOP = n 
... 
>
<IMG
ALIGN = align-type
ALT = text
BORDER = n
SRC = url
WIDTH = width
HEIGHT = height
HSPACE = hspace
VSPACE = vspace
>
Align-type : TOP, MIDDLE, BOTTOM, LEFT, RIGHT
Thiết kế web Khoa CNTT 37
Một số thẻ thông dụng
Trong phần BODY
<hr align="center" color="blue" size="2" 
with="200">
ðịnh dạng 
font cỡ 4 và màu NAVY
<img border="1" 
src="images/banner_03.jpg" width="145" 
height="97" align="left" alt="Hình nước 
VN">
Thiết kế web Khoa CNTT 38
Một số thẻ thông dụng
Tạo bảng thẻ 
TABLE
<TABLE
ALIGN = align-type
BORDER = n 
BORDERCOLOR = color
BACKGROUND = url
BGCOLOR = color
CELLPADDING = int
WITH = int%
>
Bố trí TABLE
Tiªu ®Ò cña b¶ng biÓu
Thiết kế web Khoa CNTT 39
Một số thẻ thông dụng
<table align="center" border="1" 
bordercolor="blue" width="80%">
 Tiêu ñề bảng 
Ô (1,1) 
  Ô (1,2)
<td align="center" colspan="2" 
bgcolor="#90FF90"> COLSPAN=
2 bgcolor=90FF90
Thiết kế web Khoa CNTT 40
Một số thẻ thông dụng
Tạo siêu liên kết 
thẻ A
<A
HREF = url
NAME = name
TABINDEX = n
TITLE = title
TARGET = _blank / _self
>
Siêu văn bản
Link ñến một ñoạn chỉ ñịnh trong trang hiện hành
Thiết kế web Khoa CNTT 41
Link ñến một ñoạn chỉ ñịnh trong trang hiện hành
Chương trình học dịch vụ mạng
FTP-File Transfer Protocol 
Sử dụng Outlook Express 
Sử dụng Frontpage 
1. FTP
Nội dung học phần FTP dài 2 trang 
2.Email
Nội dung dài 3 trang 
3. Frontpage
Nội dung dai 5 trang
Thiết kế web Khoa CNTT 42
Một số thẻ thông dụng
Mọi chi tiết xin liên hệ với chúng tôi qua
<A
href=”mailto:webmaster@vnuh.edu.vn” >
WEBMASTER
Tạo kết nối 
mailto
Thiết kế web Khoa CNTT 43
Thẻ MARQUEE
 Dùng ñể tạo hiệu ứng chữ chạy trên màn hình 
trình duyệt
 Cú pháp
<MARQUEE
BEHAVIOR = ALTERNATE | SCROLL | SLIDE
DIRECTION = DOWN | LEFT | RIGHT | UP
LOOP = string
SCROLLAMOUNT=long
SCROLLDELAY=long> Dòng chữ cần chạy
Thiết kế web Khoa CNTT 44
Ví dụ thẻ Marquee
<MARQUEE
bgcolor="#009999" 
width="550" 
loop="-1" 
scrollamount="15" 
scrolldelay="100" 
behavior= scroll
direction= left 
> Chào mừng các bạn ñã ñến với trang web của tôi
Thiết kế web Khoa CNTT 45
Tự ñộng refresh/redirect trang web
 Tự ñộng chuyển hướng trang web sang 
trang web khác (URL) sau một khoảng 
thời gian t (tính theo giây)
 Cú pháp
<META HTTP-EQUIV=“refresh” 
CONTENT=“t”; URL=“URL”>