THI T K WEB Ế Ế
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ệ ả
1. T h c HTML và XHTML trong 24 gi .ự ọ ờ
Lê Minh Ph ngươ
2. Nh ng bài th c hành HTMLữ ự
Đinh Xuân Lâm
3. Thi t k qu ng cáo và ti p th trên web ế ế ả ế ị
HTML. Ng c Anh Th Pressọ ư
4. Thi t k và xu t b n trang Web v i ế ế ấ ả ớ
HTML. NXB Th ng Kêố
Thiết kế web với HTML 3
Bài M Đ uở ầ
1. HTML là gì?
HyperText Markup Language (HTML) –
Ngôn ng đá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à ượ ế ế ể ạ
đ 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. Nh ng ng d ng c a HTMLữ ứ ụ ủ
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ì?ẻ
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 những Tag được
đánh dấu bởi ký hiệu < và >.
* Tag mang thông tin
<tag_name> String of text </tag_name>
Trong đó: <tag_name>: tag b t đ u.ắ ầ
</tag_name>: tag k t thúc.ế
* Tag rỗng: <tag_name>
Thiết kế web với HTML 10
•
Ví d :ụ
<h2>Chúc m ng b n đ n v i HTMLừ ạ ế ớ </h2>
–
Th ng đây là dòng đ u tiên trong file ườ ầ
HTML.
– Ví d :ụ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0 Transitional//EN">
Thiết kế web với HTML 14
1.6. T o trang Web đ u tiênạ ầ
–
M ch ng trình so n th o NotePad.ở ươ ạ ả
–
S d ng phông đánh ti ng vi t: ử ụ ế ệ
Unicode
–
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-->ươ ầ
<html>
<head>
<title> H c t p HTMLọ ậ </title>
</head>
<body>
Chúc m ng b n đã t o đ c trang web đ u ừ ạ ạ ượ ầ
tiên!
</body>
<html>
Thiết kế web với HTML 16
• L u l i v i tên ư ạ ớ
“MoDau.html” (vào
Thiết kế web với HTML 20
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 sát, so sánh v i trang Web ử ớ
đã m lúc đ u v s thay đ i.ở ầ ề ự ổ
Thiết kế web với HTML 21
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 ề ỉ ạ ệ ủ ạ ộ
m t trang HTML gi i thi u v m t vài thành viên ộ ớ ệ ề ộ
c a l p.ủ ớ
Thiết kế web với HTML 22
2.2. 6 m c tiêu đứ ề
2.2.1. Nh ng tiêu đ c a HTMLữ ề ủ
Tag tiêu đ :ề
<hN>N i dung hi n thộ ể ị</hN>
N là s nguyên t 1 đ n 6.ố ừ ế
Ví dụ:
<h3>Tiêu đ th 3ề ứ </h3>
<h6> Tiêu đ nh nh tề ỏ ấ </h6>
Thiết kế web với HTML 23
•
Đ tiêu đ gi a:ể ề ở ữ
<hN align=“center”>Tiêu đề</hN>
•
Đ tiêu đ bên ph i:ể ề ả
<hN align=“right”>Tiêu đề</hN>
•
Ví dụ
Thiết kế web với HTML 24