02 HTML Can Ban

KHOA CÔNG NGHỆ THÔNG TIN
THIẾT KẾ CÁC TRANG WEB
HTML CĂN BẢN
GV: Phan Ngọc Yến 1

Nội dung
• GIỚI THIỆU VỀ HTML
• CẤU TRÚC CỦA 1 TÀI LIỆU HTML
• CÁC TAG CƠ BẢN
• CÁC TAG DANH SÁCH
• TAG LIÊN KẾT TRANG
• TAG KẺ BẢNG
2
Nội dung
• TAG KẺ BẢNG
3
Giới thiệu về HTML
HTML (Hyper Text Markup Language) - Ngôn ngữ
đánh dấu siêu văn bản
• Là một ngôn ngữ dùng để xây dựng một trang
Web.
• Chứa các thành phần định dạng để báo cho trình
duyệt Web biết cách để hiển thị một trang Web.
• Theo quy ước, tất cả các tập tin mã nguồn của
trang siêu văn bản phải có đuôi là .html hoặc .htm
4
Trình duyệt, trình soạn thảo
Trình duyệt web (Browser) Trình soạn thảo (Editor)
5
• Khi trình duyệt (browser) đọc trang mã nguồn
HTML, sẽ dịch các thẻ lệnh và hiển thị lên màn
hình máy tính thì ta thường gọi là trang Web.
Vậy trang web không tồn tại trên đĩa cứng của
máy tính cục bộ.
• Một trang web thông thường gồm có 2 thành
phần chính:
– Dữ liệu của trang web (văn bản, âm thanh,
hình ảnh...)
– Các thẻ (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.
6
Giới thiệu về HTML – Thẻ (Tag) HTML
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY>
<H3>My first HTML document</H3>
</BODY>
</HTML>
7
Giới
Giớithiệu
thiệuvềvềHTML
HTML– Thẻ (Tag) HTML
Các thẻ HTML:
• Dùng để báo cho trình duyệt cách thức trình bày
văn bản trên màn hình hoặc dùng để chèn một
mối liên kết đến các trang khác.
• Mỗi thẻ gồm một từ khóa - KEYWORD bao bọc
bới hai dấu bé hơn < và lớn hơn >.
• Hầu hết các lệnh thể hiện bằng một cặp hai thẻ:
thẻ mở <KEYWORD> và thẻ đóng
</KEYWORD>. Dấu gạch chéo / kí hiệu thẻ
đóng. Lệnh sẽ tác động vào đoạn văn bản nằm
giữa hai thẻ.
8
Giới
Giớithiệu
thiệuvềvềHTML
• <KEYWORD> Đoạn văn bản chịu tác động của
lệnh</KEYWORD>
• Một số thẻ không có cặp, chúng được gọi là các
thẻ rỗng hay thẻ đơn. Chỉ có thẻ mở
<KEYWORD/> mà thôi.
• Nhiều thẻ có kèm các thuộc tính (attribute), cung
cấp thêm các tham số chi tiết hơn cho việc thực
hiện lệnh. Các thuộc tính được chia làm hai loại:
thuộc tính bắt buộc và thuộc tính không bắt buộc
hay tuỳ chọn.
9
Giới
Giớithiệu
thiệuvềvềHTML
Các quy tắc chung
• Nhiều dấu cách liền nhau cũng chỉ có tác dụng
như một dấu cách. Phải sử dụng thẻ để thể hiện
nhiều dấu giãn cách liền nhau.
• Gõ Enter để xuống dòng được xem như một
dấu cách, để xuống hàng thì phải sử dụng thẻ
tương ứng.
• Có thể viết tên thẻ không phân biệt chữ in
thường và in hoa.
• Vì các kí tự dấu lớn hơn >, dấu nhỏ hơn < đã
được dùng làm thẻ đánh dấu, do đó để hiển thị
các kí tự này HTML quy định cách viết: > và
<
10
Giới
Giớithiệu
thiệuvềvềHTML
• Quy tắc viết các kí tự đặc biệt trong HTML là tên
quy định của kí tự nằm giữa dấu & và dấu ;
&tên_quy_định;
• ký tự đặc biệt hay dùng
Ký tự Cách viết
< <
> >
“ "
Ký tự trắng
& &
® ®
© ©
11
• Có thể chèn các dòng bình luận, chú thích... vào
trang mã nguồn bằng cách đặt giữa cặp dấu chú
thích . Trình duyệt sẽ bỏ qua không xét
đến phần mã nằm giữa cặp dấu đó:

12
Giới
Giớithiệu
thiệuvềvềHTML
Các phần tử HTML (HTML element)
• Một tài liệu HTML tạo nên từ nhiều thành phần
HTML. Một thành phần HTML được đánh dấu
bằng một cặp thẻ mở và thẻ đóng.
• Các thành phần HTML có thể cấu trúc phân cấp
hình cây, thành phần "mẹ" chứa nhiều thành phần
"con" khác lồng bên trong nó.
• Có thành phần rỗng, chỉ có thẻ mở.
13
Giới
Giớithiệu
thiệuvềvềHTML
• Để soạn thảo tài liệu HTML đúng cú pháp, cần
nắm vững cấu trúc của từng thành phần HTML.
• Không giống như khi lập trình, nếu mắc lỗi cú
pháp HTLM sẽ không có một thông báo lỗi nào mà
trình duyệt sẽ hiểu lầm và trình bày trang Web
không như ý muốn mà thôi.
14
<b> Dòng chữ này được in đậm </b>
• <Tag mở> Dữ liệu <Tag đóng>
• Tên Tag  luôn mang tính gợi nhớ
– Ví dụ: B ~ Bold, I ~ Italic, P ~ Paragraph
• Đôi khi không cần Tag đóng <br/>, <hr/>
• Cú pháp chung
<TAG Tên_thuộc_tính=“giá_trị”……..> Dữ liệu </TAG>
Ví dụ :
• <div >Thuong mai Dien tu 1</div>
• <div id="txtDiv" style="color:#0000CC">Thuong mai Dien tu 2</div>
15
Mã HTML Hiển thị
<b> Đây là một dòng được in Đậm</b> Đây là một dòng được in Đậm
<h3> Mức chữ ở tiêu đề 3 </h3> Mức chữ ở tiêu đề 3
Mã HTML Hiển thị

<font face=“Arial” size=“3”> Hello </font> Hello
Lưu ý :
• Giá trị Thuộc tính của Thẻ 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
• Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng,
xuống dòng
16
• Lưu ý: Các Tag nên lồng nhau tuyệt đối
17
Nội dung
• Giới thiệu về HTML
• Cấu trúc của 1 tài liệu HTML
• Các Tag cơ bản
• Các Tag danh sách
• Tag liên kết trang
• Tag kẻ bảng
18
Cấu trúc 1 tài liệu HTML
Mọi tài liệu HTML đều có khung cấu trúc như sau:
<html>
<head>
Phần đầu
<title>Tiêu đề </title>
trang HTML
</head> Bắt đầu và
Kết thúc của
<body> trang HTML
Nội dung 1 Nội dung
Nội dung 2 trang HTML
Nội dung 3
</body>
</html>
19
Cấu trúc 1 tài liệu HTML
20
Cấu trúc 1 tài liệu HTML
• <html> </html>: Định nghĩa phạm vi của văn bản
HTML
• <head> </head>: Định nghĩ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
• <title> </title>: Mô tả tiêu đề trang web
• <body> </body>: Xác định vùng thân của trang

web, nơi chứa các thông tin.
21
BÀI TẬP
• Soạn thảo nội dung sau:
<!DOCTYPE html>
<html>
<head>
<title> welcome to html </title>
</head>
<body>
Chào mừng bạn đã đến với ngôn ngữ thiết kế web
HTML (Hypertext Makup Language)
</body>
</html>
• Lưu vào thư mục HTML
• Đặt tên là: Welcome.html
22
BÀI TẬP
• Mở xem kết quả trang HTML
• Xem SourceCode trang web từ trình duyệt
• Mở tập tin HTML từ trình soạn thảo và lưu lại với
tên khác là: Welcome2.html
• Điều chỉnh nội dung hiển thị trong trang là: Chúc
bạn học tốt ngôn ngữ HTML
23
Nội dung
• TAG KẺ BẢNG
24
Các Tag Cơ bản
• CÁC TAG XỬ LÝ VĂN BẢN
• TAG HÌNH ẢNH
25
Các tag xử lý văn bản
• Các thẻ định dạng khối văn bản
– Tiêu đề (Heading): <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>
– Đoạn văn bản (Paragraph): <p>
– Danh sách (List Items): <li>
– Đường kẻ ngang (Horizontal Rules): <hr/>
• Các thẻ định dạng chuổi văn bản
– Định dạng chữ: <em>, <i>, <b> và <font>
– Tạo siêu liên kết : <a>
– Xuống dòng: <br/>
26
HEADING
<!DOCTYPE html>
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h1>Introduction to HTML - H1</h1>
</body>
</html>
27
BÀI TẬP
• Tạo trang Headings.html: Sử dụng các tag từ
Heading1 đến Heading6
28
BÀI TẬP
• Tạo trang HeadingCenter.html
29
PARAGRAPH - <p>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body bgcolor=‘lavender’>
<h3>My first HTML document</h3>
<p>
This is going to be real fun
<h2>Using another heading</h2>
</p>
<p align=“center”>
Another paragraph element
</p>
</body>
</html>
30
HORIZONTAL RULES
• <hr …/>
– Thuộc tính:
• align: Canh hàng đường kẻ ngang so với trang
web
• width: Chiều dài đường kẻ ngang
• size: Bề rộng của đường kẻ ngang
• noshade: Không có bóng
<hr noshade size=“5” align="center" width="40%"/>
<hr size="15" align="right" width="80%"/>
31
BÀI TẬP
• Tạo trang Web UseHeading.html với tiêu đề trang
là: “Using headings”. Nội dung trang có chứa dòng
chữ “My First HTML document” ở mức tiêu đề 3.
• Từ trang đã tạo ở trên, viết thêm đoạn mã HTML

để hiển thị một đường kẻ ngang với màu xanh lá
cây và độ dài 25% trang web
32
Thẻ + Thuộc tính Ý nghĩa Ví dụ
<font face= “…” Thiết lập

<font face=“Arial” size=‘5”
size=“….” font chữ
color=“#FF00FF”>
color=“color”> cho văn bản
<p align=“?”>
Định dạng <p align=“justify”> Đoạn
“?” là “center” , một đoạn văn bản này được canh
“justify”, “left” , văn bản đều 2 biên trái phải </p>
“right”
33
Thẻ +
Ý nghĩa Ví dụ
Thuộc tính
Định dạng <b> Đoạn văn bản in đậm </b>

<b>
chữ in đậm
<i>
Định dạng
Hay chữ in <i> Đoạn văn bản in nghiêng </i>
nghiêng
<em>
Định dạng
<u> chữ gạch <u> Đoạn văn bản gạch dưới </u>
dưới
34
Thẻ Ý nghĩa Ví dụ
Định dạng <strike> Đoạn văn bản bị-gạch

<strike>
chữ gạch ngang ngang chữ </strike>
Định dạng
<sup> ax<sup>2</sup>  ax2
chỉ số trên
Định dạng
<sub> H<sub>2</sub>0  H20
chỉ số dưới
35
Thẻ Ý nghĩa Ví dụ
Bỏ qua định dạng của

các thẻ HTML <pre><b>Xin chao</b> các
bên trong
<pre> (không bỏ qua ký tự bạn</pre>
khoảng trắng, tab và <b>Xin chào</b> các bạn
xuống dòng)
Kết thúc dòng hiện tại <p>Dòng 1<br>Dòng 2</p>

<br/> và chuyển sang dòng
mới Dòng 1 Dòng 2
36
• Hiển thị đúng dạng văn bản đã soạn thảo (khoảng
trắng, xuống dòng, tag,…)
Ví dụ:
<font size=4>
<pre>
Ban co the xuong dong
va cach khoang trang thoai mai
</pre>
</font>
37
Một số thuộc tính của thẻ body
Thuộc tính Ý nghĩa Ví dụ
Thiết lập màu nền <body

bgcolor=“color”
cho trang web bgcolor=“#00FF00” >
Thiết lập ảnh nền <body

background=“url”
cho trang web backgound=“image.jpg”>
leftmargin=“num”
Thiết lập lề trái và lề
<body leftmargin=“0” topmargin-‘0”>
topmargin=“num” trên cho trang web
Thiết lập màu chữ
text=“color" của văn bản, kể cả <body text=“#FF0000”>
các đề mục
Xác định màu sắc
alink=“color” cho các siêu liên
vlink=“color” <body alink =“#FF0000” vlink =
kết trong vàn bản
“#00FF00” link = “#0000FF”>
link=íícolor (active link, visited
link, link)
38
BÀI TẬP
• Tạo trang: Tieude.html nội dung như hình
 Nền màu xanh dương đậm #003399

 Chữ màu trắng #FFFFFF
39
BÀI TẬP
• Lưu tập tin tên: ChisoTrenduoi.htm
Yêu cầu: Dòng 1 in đậm
40
BÀI TẬP
• Lưu tập tin tên Cohaimo.htm
• Có nội dung thanh tiêu đề, định dạng đậm,
nghiêng, gạch chân, gạch ngang chữ
• Có phân cách các đoạn, xuống dòng cho mỗi câu
thơ có câu ghi chú
41
BÀI TẬP
• Lưu tập tin tên Emphasis.htm
• Có nội dung:
42
BÀI TẬP
• Lưu tập tin tên: Kyhieudacbiet.htm
• 2 đường kẻ ngang không bóng, kích thước 100%
và 50% cửa sổ
• Màu đỏ cho các ký tự đặc biệt.
• Màu nền tùy ý.
43
BÀI TẬP
Tự thực hành
• Tạo một trang web đơn giản tự giới thiệu về bản
thân:
– bạn tên gì?
– bạn bao nhiêu tuổi?
– bạn làm gì?
– sở thích của bạn là gì?
–…
44
Tag hình ảnh
• <img/> : Không có thẻ đóng
• Các thuộc tính của tag <img/>:
– src: Đường dẫn đến file hình ảnh
– alt: Chú thích cho hình ảnh
– align: top, bottom, middle, left, right
– width và height: xác định chiều rộng và chiều
cao của ảnh (% ,pixel)
– border: Độ dày nét viền quanh ảnh
(default=0)
45
Tag hình ảnh
• Các thuộc tính của tag <img/>:
– vspace và hspace: tạo khoảng trống nhỏ viền
xung quanh ảnh (tính theo đơn vị pixel).
– vspace: thêm khoảng trống theo chiều dọc
– hspace: thêm khoảng trống theo chiều ngang
• Đặt ảnh nền cho trang web
Sử dụng thẻ <body background=“Image Path”>
46
BÀI TẬP
• Tạo trang web, viết đoạn code dùng để nhúng các
ảnh sau vào trang
47
BÀI TẬP
• Tạo trang web image.html
• Nội dung:
48
Nội dung
• Tag kẻ bảng
49
CÁC TAG DANH SÁCH
Phần tử
Kiểu danh sách Thẻ
trong DS
Danh sách có thứ tự <ol> <li>
Danh sách không có thứ tự <ul> <li>
Danh sách tự định nghĩa <dl> <dt>,<dd>
50
Danh sách có thứ tự
51
Danh sách có thứ tự
52
Danh sách không có thứ tự
53
Danh sách tự định nghĩa
54
BÀI TẬP
• Tạo trang web với nội dung hiển thị một danh
sách định nghĩa:
Peacock
National bird of India
Internet
A network of networks
HTML
HyperText Markup Language
55
BÀI TẬP
• Tạo thêm một danh sách như sau:
1. Introduction to HTML
a. Introduction to the World Wide Web
b. Introduction to HTML tags
• Formatting text
• Enhancing the text
2. Designing a Web Site
i. Designing the page
ii. Designing navigation
iii. Creating Hyperlinks
• :
56
BÀI TẬP
Tạo thêm một danh sách như sau:
• Top level 1
• Top level 2
1. Second Level
oFact 1
oFact 2
• Top level 3
57
Nội dung
• Tag kẻ bảng
58
Tag liên kết trang - URL
• protocol://site address/directory/filename
Các dạng địa chỉ HTTP:
TH1: http://server/
Ví dụ: http://www.yahoo.com/
TH2: http://server/file
Ví dụ: http://games.yahoo.com/index.php
TH3: http://server/directory/
Ví dụ: http://games.yahoo.com/games/
TH4: http://server/directory/file
Ví dụ:
http://games.yahoo.com/download/Dominoes.exe
59
Tag liên kết trang - URL
TH5: http://server/directory/file#marker
Ví dụ : http://games.yahoo.com/index.php# Puzzle
TH6: http://server/directory/file?parameters
Ví dụ:
http://www.google.com.vn/search?hl=vi&q=Teach&meta=
TH7: http://server:port/directory/file
Ví dụ:
http://www.microsoft.com:8080/products/greetings.html
60
Tag liên kết trang – Tag <a> (anchor)
• Cú pháp :
<a href="URL” target=“……”>
Linked content
</a>
• Thuộc tính target của tag <a>
name: tải trang web vào frame có tên NAME
_blank: tải trang web vào cửa sổ mới
_parent: tải trang web vào cửa sổ cha của nó
_self: tải trang web vào chính cửa sổ hiện hành
_top: tải trang web vào cửa số cao nhất
• Ví dụ :
61
Tag liên kết trang – Phân loại liên kết
• Phân loại :
– Liên kết ngoại (external link)
– Liên kết nội (internal link)
– Liên kết email (email link)
62
Liên kết ngoại (External Link)
<a href=“URL”> Text đại diện </a>
…………………
…………………
………………… …………………
………………… Click …………………
………………… chuột …………………
Bài học 2 …………………
…………………
Trang có địa chỉ
………………… xác định từ URL
Trang hiện tại baihoc2.htm
baihoc1.htm
63
Liên kết nội (Internal Link)
<a name=“TenViTri"> Vi tri bat dau </a>
<a href=“#TenViTri"> Text đại diện </a>
.…………………
………………… .…………………
Nội ………………… Click Text đại diện Nội
dung Text đại diện ………………… dung
………………… chuột …………………
trang ………………… trang
…………………
khi ………………… ………………… khi
chưa ………………… Vi tri bat dau bấm
liên Vi tri bat dau .…abcdefgh… liên
.…abcdefgh… ...01234567…
kết .………………… kết
...01234567…
.………………… .…………………
.…………………
64
Liên kết Email
…………………
………………… Click
chuột
…………………
Liên hệ Admin
…………………
…………………
<a href=“mailto:emailAddress">Liên hệ Admin</a>
65
Phân loại địa chỉ URL
<a href="URL” target=“……”> Linked content </a>
• Địa chỉ URL phân làm 2 loại :

– Địa chỉ tuyệt đối: Là vị trí tuyệt đối so với
mạng Internet
– Địa chỉ tương đối: Là vị trí tương đối so với
trang web hiện hành đang chứ liên kết.
 Một số ký hiệu đường dẫn đặc biệt:
Ký hiệu Ý nghĩa
/ Trở về thư mục gốc của website
./ Thư mục hiện tại của trang web sử dụng link (mặc
định)
../ Quay ra thư mục cha / đi ngược lại 1 cấp thư mục
66
BÀI TẬP
1. Tạo 2 tài liệu HTML, a.html và b.html
• Trong trang a.htm tạo một liên kết (Đi đến trang b)
đến b.htm.
• Từ trang b.htm tạo một liên kết (Trở về trang a) trở
lại a.htm.
2. Viết câu lệnh HTML trong một trang web để hiển
thị nội dung bên dưới có chứa liên kết email:
For more information, please send an e-mail to me,
Garywilson@MyCompany.com
67
BÀI TẬP
• Lưu tập tin tên Search.html
• Có nội dung:
68
BÀI TẬP
Tạo một tài liệu HTML chứa các đoạn văn bản bên
dưới. Tạo các liên kết nội: Internet Layout
Linear layout Pathnames khi click vào chuyển
đến các chủ đề được in đậm bên dưới:
Internet
The Internet is a network of networks. That is,
computer networks are linked to other networks,
spanning countries. The TCP/IP transfer protocol
provides the bindings that connect all these
computers the world over.
69
BÀI TẬP
Layout
A web page is not a printed page. That is, the
guidelines that are applied to print may not apply to
a web page. Avoid making the reader scan too much
of the screen while reading the page. After a while it
puts a strain on the eyes, and the reader may lose
interest. Text should be contained within a few
inches width.
70
BÀI TẬP
Linear layout
Linear layout follows a linear structure. There is a
sequential link between the pages. Each page has a
link to the previous and next page. The last page
has a link to the first page. This format is used when
you are presenting sequential information. For
example, chapters of a book or slides of a
presentation which require the user to read the
information in sequential order.
71
BÀI TẬP
Pathnames
Absolute pathnames specify the complete path to
the file from the root directory. For example,
C:\mydirectory\ htmlexamples\Doc2.htm.
Relative pathnames specify the location of the file
relative to the location of the current file. For
example, if the current directory is mydirectory, then
the pathname will be<A HREF= “..\Doc3.htm”>Next
page</A>
72
BÀI TẬP
Tạo một trang giới thiệu chi tiết về bạn và có
liên kết tới trang giới thiệu chính của bạn. Chèn 2
ảnh vào trong trang giới thiệu chính sao cho khi click
vào ảnh đó thì trang giới thiệu chi tiết được mở ra.
Viết một trang web mô tả về gia đình và các

vật nuôi của bạn. Kích vào liên kết “Mô tả gia đình”
sẽ đưa đến phần mô tả về gia đình. Khi kích vào liên
kết “Mô tả vật nuôi” sẽ đưa đến phần mô tả về vật
nuôi của bạn.
73
Nội dung
• Tag kẻ bảng
74
Tag kẻ bảng - Table
75
Tag kẻ bảng – Table (tt)
76
Tag kẻ bảng – Table (tt)
77
BÀI TẬP
• Tạo trang web hiển thị bảng như sau:
Tổng kết năm học 2003 - 2004
Thống kê HS giỏi HS khá HS trung bình
Lớp 1A 35 4 0
Lớp 1B 20 10 12
Lớp 1C 5 25 20
78
BÀI TẬP
• Viết đoạn mã HTML để tạo bảng như hình, bảng
có đường viền dày 5 pixels (hiển thị trên trình
duyệt web IE)
79
BÀI TẬP
• Tạo trang web horizontal.htm với nội dung hiển thị
như sau:
80

02 HTML Can Ban

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

02 HTML Can Ban

Uploaded by

Copyright:

Available Formats

KHOA CÔNG NGHỆ THÔNG TIN

THIẾT KẾ CÁC TRANG WEB

HTML CĂN BẢN

GV: Phan Ngọc Yến 1

Mã HTML Hiển thị

• <head> </head>: Định nghĩa các mô tả về trang

• <title> </title>: Mô tả tiêu đề trang web

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

• Từ trang đã tạo ở trên, viết thêm đoạn mã HTML

<font face= “…” Thiết lập

Định dạng <b> Đoạn văn bản in đậm </b>

Định dạng <strike> Đoạn văn bản bị-gạch

Bỏ qua định dạng của

Kết thúc dòng hiện tại <p>Dòng 1<br>Dòng 2</p>

Thiết lập màu nền <body

Thiết lập ảnh nền <body

 Nền màu xanh dương đậm #003399

Danh sách có thứ tự <ol> <li>

Danh sách không có thứ tự <ul> <li>

Danh sách tự định nghĩa <dl> <dt>,<dd>

<a href=“URL”> Text đại diện </a>

Trang hiện tại baihoc2.htm

<a href=“mailto:emailAddress">Liên hệ Admin</a>

<a href="URL” target=“……”> Linked content </a>

• Địa chỉ URL phân làm 2 loại :

Viết một trang web mô tả về gia đình và các

Tổng kết năm học 2003 - 2004

Thống kê HS giỏi HS khá HS trung bình

You might also like