Bài soạn Hướng dẫn thiết kế Website với 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.63 MB, 218 trang )
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ữ ứ ụ ủ
–
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 đ .ị ứ ề
