Thiet ke web voi HTML
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 (2.69 MB, 218 trang )
THI T K WEB Ế Ế
THI T K WEB Ế Ế
V I HTML Ớ
V I HTML Ớ
Lê Anh Nh tậ
Đt: 0912.844.866
Email:
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ữ ứ ụ ủ
– HTML là n n t ng c a World Wide Web, m t d ch ề ả ủ ộ ị
v toàn c u c a Internet.ụ ầ ủ
– 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.ệ ử ị
Thiết kế web với HTML 6
3. 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 ử ụ ạ ả ẵ
Windows.
Start\Programs\Accessories\NotePad
–
Ho c m t trình so n th o b t kỳ trong windows.ặ ộ ạ ả ấ
– FrontPage, DreamWare, Visual Studio
Thiết kế web với HTML 7
4. 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, đ ng ổ ứ ệ ự ề ề ạ ườ
k ngang, danh sách, b ng.ẻ ả
–
Thu ng n văn b n.ắ ả
–
B trí hình nh nh g n, h p lý.ố ả ỏ ọ ợ
Thiết kế web với HTML 8
Bài 1
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ì?ẻ
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>
<p>
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
– Là trình duy t Web, ví d : Microsoft Internet ệ ụ
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ấ ơ ả ủ ộ
<html>
<head>
<title>tiêu đ trangề </title>
</head>
<body>
Văn b n hi n th .ả ể ị
</body>
</html>
Thiết kế web với HTML 13
1.4. Tag chú thích.
<!—N i dung chú thíchộ >.
•
Th ẻ <!DOCTYPE>
– Th này dùng đ ghi thông tin v version ẻ ể ề
HTML áp d ng trong tài li u web.ụ ệ
–
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
trong th m c c a ư ụ ủ
mình), v i ph n ớ ầ
Encoding là UTF-8.
• L u ý: ph n m r ng ư ầ ở ộ
có th là ể html ho c ặ htm
đ u đ c.ề ượ
• Vào th m c c a mình ư ụ ủ
ch y t p HTML mà ta ạ ệ
v a t o, xem k t qu ừ ạ ế ả
nh n đ c.ậ ượ
Thiết kế web với HTML 17
Thiết kế web với HTML 18
6. Th c hànhự
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ươ
Đi u ch nh 1 tài li u HTMLề ỉ ệ
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ạ ự ổ ệ
Vào th m c làm vi c, m t p html c a mình.ư ụ ệ ở ệ ủ
M trình so n th o NotePad.ở ạ ả
T th c đ n File, dùng Open đ m t p mình ừ ự ơ ể ở ệ
đã làm.
T đó thêm, b t, s a đ i văn b n trong đó.ừ ớ ử ổ ả
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ạ ạ ệ
– 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
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 ụ ạ ầ <body> </body>
<h1>Tiêu đ l n nh tề ớ ấ </h1>
<h2>Tiêu đ l n th haiề ớ ứ </h2>
<h3>Tiêu đ th 3ề ứ </h3>
<h4>Tiêu đ th 4ề ứ </h4>
<h5>Tiêu đ th 5ề ứ </h5>
<h6>Tiêu đ nh nh tề ỏ ấ </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à ư ệ ạ ớ ầ ở ộ htm.
• 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 đ .ự ể ị ứ ề
