thiết kế web với HTML

Phần 1. THIẾT KẾ WEB
Phần 1. THIẾT KẾ WEB
VỚI HTML
VỚI HTML
Thiết kế web với HTML
2
Tài liệu tham khảo
Tài liệu tham khảo
1.
1.
T h c HTML và XHTML trong 24 gi .ự ọ ờ
T h c HTML và XHTML trong 24 gi .ự ọ ờ
Lê Minh Ph ngươ
Lê Minh Ph ngươ
2.
2.
Nh ng bài th c hành HTMLữ ự
Nh ng bài th c hành HTMLữ ự
inh Xuân LâmĐ
inh Xuân LâmĐ
3.
3.
Thi t k qu ng cáo và ti p th trên web HTML.ế ế ả ế ị
Thi t k qu ng cáo và ti p th trên web HTML.ế ế ả ế ị
Ng c Anh Th Pressọ ư
Ng c Anh Th Pressọ ư
4.
4.
Thi t k và xu t b n trang Web v i HTML.ế ế ấ ả ớ
Thi t k và xu t b n trang Web v i HTML.ế ế ấ ả ớ
NXB Th ng Kêố

NXB Th ng Kêố
Thiết kế web với HTML
3
Bà
Bà
i
i
Mở Đầu
Mở Đầu
1.
1.
HTML là gì?
HTML là gì?
H
H
yper
yper
T
T
ext
ext
M
M
arkup
arkup
L
L
anguage (HTML) – Ngôn ngữ
anguage (HTML) – Ngôn ngữ
đánh dấu siêu văn bản. Bao gồm các đoạn mã chuẩn

đánh dấu siêu văn bản. Bao gồm các đoạn mã chuẩn
với các quy ước được thiết kế để tạo các trang Web
với các quy ước được thiết kế để tạo các trang Web
và được hiển thị bởi các trình duyệt Web.
và được hiển thị bởi các trình duyệt Web.
Thiết kế web với HTML
4
Web Page (Trang Web): Là tài liệu
HTML.
Web site: Là một số các trang Web
liên kết với nhau.
World Wide Web (www): Là dịch vụ
toàn cầu của Internet mà HTML là nền
tảng.
Thiết kế web với HTML
5
2.
2.
Nh ng ng d ng c a HTMLữ ứ ụ ủ
Nh ng ng d ng c a HTMLữ ứ ụ ủ


•
HTML là nền tảng của World Wide Web, một
HTML là nền tảng của World Wide Web, một
dịch vụ toàn cầu của Internet.
dịch vụ toàn cầu của Internet.
•
HTML để thiết kế Web trên mạng Internet, tạo
HTML để thiết kế Web trên mạng Internet, tạo

tài liệu, gửi cáo thị cho các công ty, cá nhân.
tài liệu, gửi cáo thị cho các công ty, cá nhân.
Thiết kế web với HTML
6
3.
3.
Trình so n th o trong quá trình h cạ ả ọ
Trình so n th o trong quá trình h cạ ả ọ
•
Sử dụng trình soạn thảo NotePad có sẵn trong
Sử dụng trình soạn thảo NotePad có sẵn trong
Windows.
Windows.
Start\Programs\Accessories\NotePad
Start\Programs\Accessories\NotePad
•
Hoặc một trình soạn thảo bất kỳ trong windows.
Hoặc một trình soạn thảo bất kỳ trong windows.
•
FrontPage, DreamWare, Visual Studio
FrontPage, DreamWare, Visual Studio
Thiết kế web với HTML
7
4.
4.
Nh ng v n đ c n quan tâm khi thi t k Webữ ấ ề ầ ế ế
Nh ng v n đ c n quan tâm khi thi t k Webữ ấ ề ầ ế ế
•
Tổ chức tài liệu: tựa đề, tiêu đề, đoạn văn,
Tổ chức tài liệu: tựa đề, tiêu đề, đoạn văn,

đường kẻ ngang, danh sách, bảng.
đường kẻ ngang, danh sách, bảng.
•
Thu ngắn văn bản.
Thu ngắn văn bản.
•
Bố trí hình ảnh nhỏ gọn, hợp lý.
Bố trí hình ảnh nhỏ gọn, hợp lý.
Thiết kế web với HTML
8
Bài 1
Bài 1
Tạo chương trình đầu tiên
Tạo chương trình đầu tiên
1.1 Tạo một trang Web mới.
- Mở môi trường mà bạn muốn soạn thảo tài liệu
HTML
- Sử dụng chương trình soạn thảo NotePad: Start
-> Program -> Accessories -> NotePad.
•
Chú ý:
+ Khi ghi tài liệu HTML vào ổ đĩa nhớ ghi đầy đủ
phần mở rộng
+ Nếu sử dụng môi trường soạn thảo là NotePad
trên Windows thì ghi ghi tài liệu HTML vào ổ đĩa fải
chọn Encoding là UTF-8 để hiển thị tiếng việt.
Thiết kế web với HTML
9
1.2. Tag (th ) HTML là gì?ẻ
1.2. Tag (th ) HTML là gì?ẻ

Khi một Web browser hiển thò một trang Wed, Web Browser sẽ đọc
Khi một Web browser hiển thò một trang Wed, Web Browser sẽ đọc
từ một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay
từ một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay
những Tag được đánh dấu bởi ký hiệu < và >.
những Tag được đánh dấu bởi ký hiệu < và >.


* Tag mang thông tin
* Tag mang thông tin
<tag_name>
<tag_name>
String of text
String of text
</tag_name>
</tag_name>


Trong đó:
Trong đó:


<tag_name>
<tag_name>
: tag bắt đầu.
: tag bắt đầu.
</tag_name>
</tag_name>

: tag kết thúc.
: tag kết thúc.
*
*
Tag rỗng:
Tag rỗng:
<tag_name>
<tag_name>
Thiết kế web với HTML
10

Ví d :ụ
Ví d :ụ
<h2>
<h2>
Chúc mừng bạn đến với HTML
Chúc mừng bạn đến với HTML
</h2>
</h2>
<p>
<p>
Chúc bạn học tốt!
Chúc bạn học tốt!
Tag
Tag
Tag kết
thúc
Thiết kế web với HTML
11
* Web browser

* Web browser
•


Là trình duyệt Web, ví dụ: Microsoft Internet
Là trình duyệt Web, ví dụ: Microsoft Internet
Explorer, FireFox, Opera, Netscape
Explorer, FireFox, Opera, Netscape
Thiết kế web với HTML
12
1.3. C u trúc c b n c a m t trang HTMLấ ơ ả ủ ộ
1.3. C u trúc c b n c a m t trang HTMLấ ơ ả ủ ộ
<html>
<html>
<head>
<head>
<title>
<title>
tiêu đề trang
tiêu đề trang
</title>
</title>
</head>
</head>
<body>
<body>
Văn bản hiển thị.
Văn bản hiển thị.
</body>
</body>

</html>
</html>
Thiết kế web với HTML
13
1.4. Tag chú thích.
<!—Nội dung chú thích >.

Thẻ
Thẻ
<!DOCTYPE>
<!DOCTYPE>
•
Thẻ này dùng để ghi thông tin về
Thẻ này dùng để ghi thông tin về
version HTML áp dụng trong tài liệu
version HTML áp dụng trong tài liệu
web.
web.
•
Thường đây là dòng đầu tiên trong
Thường đây là dòng đầu tiên trong
file HTML.
file HTML.
•
Ví dụ:
Ví dụ:
<!DOCTYPE
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML
HTML PUBLIC "-//W3C//DTD HTML

4.0 Transitional//EN"
4.0 Transitional//EN"
>
>
Thiết kế web với HTML
14
1.6. T o trang Web đ u tiênạ ầ
1.6. T o trang Web đ u tiênạ ầ
•


Mở chương trình soạn thảo NotePad.
Mở chương trình soạn thảo NotePad.
•


Sử dụng phông đánh tiếng việt: Unicode
Sử dụng phông đánh tiếng việt: Unicode
•


Soạn thảo đoạn mã sau:
Soạn thảo đoạn mã sau:
1.5. Hiển thị tài liệu trong Web
Browser
Thiết kế web với HTML
15
<! chương trình đầu tiên >
<! chương trình đầu tiên >
<html>

<html>
<head>
<head>


<title>
<title>
Học tập HTML
Học tập HTML
</title>
</title>
</head>
</head>
<body>
<body>
Chúc mừng bạn đã tạo được trang web
Chúc mừng bạn đã tạo được trang web
đầu tiên!
đầu tiên!
</body>
</body>
<html>
<html>
Thiết kế web với HTML
16

L u l i v i tên ư ạ ớ
L u l i v i tên ư ạ ớ
“
“

MoDau.html
MoDau.html
” (vào
” (vào
trong th m c c a ư ụ ủ
trong th m c c a ư ụ ủ
mình), v i ph n ớ ầ
mình), v i ph n ớ ầ
Encoding là UTF-8
Encoding là UTF-8
.
.

L u ý: ph n m r ng ư ầ ở ộ
L u ý: ph n m r ng ư ầ ở ộ
có th là ể
có th là ể
html
html
ho c ặ
ho c ặ
htm
htm


đ u đ c.ề ượ
đ u đ c.ề ượ

Vào th m c c a mình ư ụ ủ
Vào th m c c a mình ư ụ ủ

ch y t p HTML mà ta ạ ệ
ch y t p HTML mà ta ạ ệ
v a t o, xem k t qu ừ ạ ế ả
v a t o, xem k t qu ừ ạ ế ả
nh n đ c.ậ ượ
nh n đ c.ậ ượ
Thiết kế web với HTML
17
Thiết kế web với HTML
18
6.
6.
Th c hànhự
Th c hànhự
Thiết kế một trang HTML giới thiệu về bản thân.
Thiết kế một trang HTML giới thiệu về bản thân.
Thiết kế web với HTML
19
Chương 2
Chương 2
Điều chỉnh 1 tài liệu HTML
Điều chỉnh 1 tài liệu HTML
2.1. N p tài li u trong Web browseạ ệ
2.1. N p tài li u trong Web browseạ ệ
2.1.1.T o s thay đ i trong tài li u HTMLạ ự ổ ệ
2.1.1.T o s thay đ i trong tài li u HTMLạ ự ổ ệ


Vào thư mục làm việc, mở tệp html của
Vào thư mục làm việc, mở tệp html của

mình.
mình.


Mở trình soạn thảo NotePad.
Mở trình soạn thảo NotePad.


Từ thực đơn File, dùng Open để mở tệp
Từ thực đơn File, dùng Open để mở tệp
mình đã làm.
mình đã làm.


Từ đó thêm, bớt, sửa đổi văn bản trong
Từ đó thêm, bớt, sửa đổi văn bản trong
đó.
đó.


Lưu trở lại.
Lưu trở lại.
Thiết kế web với HTML
20
2.1.2.N p l i tài li u trong Web browserạ ạ ệ
2.1.2.N p l i tài li u trong Web browserạ ạ ệ
•
Trở lại thư mục làm việc, mở lại tệp đã sửa, quan
Trở lại thư mục làm việc, mở lại tệp đã sửa, quan
sát, so sánh với trang Web đã mở lúc đầu về sự

sát, so sánh với trang Web đã mở lúc đầu về sự
thay đổi.
thay đổi.
Thiết kế web với HTML
21
2.1.3. Th c hànhự
2.1.3. Th c hànhự
Đều chỉnh lại tài liệu HTML của mình, tạo một
Đều chỉnh lại tài liệu HTML của mình, tạo một
một trang HTML giới thiệu về một vài thành
một trang HTML giới thiệu về một vài thành
viên của lớp.
viên của lớp.
Thiết kế web với HTML
22
2.2. 6 mức tiêu đề
2.2. 6 mức tiêu đề
2.2.1. Nh ng tiêu đ c a HTMLữ ề ủ
2.2.1. Nh ng tiêu đ c a HTMLữ ề ủ
Tag tiêu đề:
Tag tiêu đề:
<hN>
<hN>
Nội dung hiển thị
Nội dung hiển thị
</hN>
</hN>
N là số nguyên từ 1 đến 6.
N là số nguyên từ 1 đến 6.
Ví

Ví


dụ
dụ
:
:
<h3>
<h3>
Tiêu đề thứ 3
Tiêu đề thứ 3
</h3>
</h3>
<h6>
<h6>


Tiêu đề nhỏ nhất
Tiêu đề nhỏ nhất
</h6
</h6
>
>
Thiết kế web với HTML
23



tiêu đ gi a:Để ề ở ữ
tiêu đ gi a:Để ề ở ữ

<hN align=
<hN align=
“center”
“center”
>
>
Tiêu đề
Tiêu đề
</hN>
</hN>

tiêu đ bên ph i:Để ề ả
tiêu đ bên ph i:Để ề ả
<hN align=
<hN align=
“right”
“right”
>
>
Tiêu đề
Tiêu đề
</hN>
</hN>
•
Ví
Ví


dụ
dụ

Thiết kế web với HTML
24
2.2.2. t nh ng tiêu đ vào tài li u htmlĐặ ữ ề ệ
2.2.2. t nh ng tiêu đ vào tài li u htmlĐặ ữ ề ệ
•
Ví dụ đoạn mã sau vào trong phần thân
Ví dụ đoạn mã sau vào trong phần thân
<body>
<body>


</body>
</body>
<h1>
<h1>
Tiêu đề lớn nhất
Tiêu đề lớn nhất
</h1>
</h1>
<h2>
<h2>
Tiêu đề lớn thứ hai
Tiêu đề lớn thứ hai
</h2>
</h2>
<h3>
<h3>
Tiêu đề thứ 3
Tiêu đề thứ 3
</h3>

</h3>
<h4>
<h4>
Tiêu đề thứ 4
Tiêu đề thứ 4
</h4>
</h4>
<h5>
<h5>
Tiêu đề thứ 5
Tiêu đề thứ 5
</h5>
</h5>
<h6>
<h6>
Tiêu đề nhỏ nhất
Tiêu đề nhỏ nhất
</h6>
</h6>
Thiết kế web với HTML
25



L u tài li u l i v i ph n m r ng là ư ệ ạ ớ ầ ở ộ
L u tài li u l i v i ph n m r ng là ư ệ ạ ớ ầ ở ộ
htm
htm
.
.




M th m c làm vi c đ m trang html c a mình m i ở ư ụ ệ ể ở ủ ớ
M th m c làm vi c đ m trang html c a mình m i ở ư ụ ệ ể ở ủ ớ
làm. Xem s hi n th 6 m c tiêu đ .ự ể ị ứ ề
làm. Xem s hi n th 6 m c tiêu đ .ự ể ị ứ ề