Bài giảng thiết kế và triển khai website chương 3 GV bùi quang trường
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 (4.58 MB, 87 trang )
Chương 3. MỘT SỐ CÔNG
CỤ THIẾT KẾ WEBSITE
Bùi Quang Trường
Bộ môn CNTT – Khoa HTTT.KT
– Trường ĐH Thương Mại
Nội dung
• Ngôn ngữ đánh dấu siêu văn bản HTML
• PHP, Javascript
• Một số công cụ hỗ trợ thiết kế website
11/18/2013
Công cụ thiết kế Web - HTML
2
3.1. Ngôn ngữ HTML
3.1.1. Tổng quan về HTML
3.1.2. Các thẻ của HTML
3.1.3. Sử dụng Frontpage thiết kế web tĩnh
3.1.4. Định dạng website với CSS
11/18/2013
Công cụ thiết kế Web - HTML
3
3.1.1. Tổng quan về HTML
• HTML (HyperText Markup Language) là ngôn ngữ
đánh dấu siêu văn bản được thiết kế ra để tạo nên các
trang web. Tập tin (File) HTML là một văn bản có chứa
các thẻ đánh dấu (markup tags), các thẻ đánh dấu này
giúp các trình duyệt Web hiểu được cách trình bày và
hiển thị trang Web. File HTML có phần mở rộng
(Extension) là htm hay html và có thể được tạo ra bằng
bất cứ chương trình xử lý văn bản đơn giản nào.
11/18/2013
Công cụ thiết kế Web - HTML
4
3.1.1. Tổng quan về HTML
• Trong File HTML các phần tử (Element) được đánh
dấu bằng các thẻ HTML. Các thẻ này được bao bởi
dấu < và dấu >. Thông thường các thẻ HTML được
dùng theo một cặp <tên thẻ> (thẻ bắt đầu) và thẻ> (thẻ kết thúc), văn bản nằm giữa cặp thẻ này là
nội dung của phần tử. Các thẻ HTML không phân
biệt chữ hoa và chữ thường, có nghĩa là các kiểu
chữ đều được xem như nhau.
11/18/2013
Công cụ thiết kế Web - HTML
5
3.1.1. Tổng quan về HTML
Cấu trúc cơ bản
Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong
đó bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>). Nhờ có cặp TAG
này mà Browser biết được đó là HTML - document dành cho trình duyệt. Những
chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết
giữa cặp TAG <body> và </body>. Trong một document html, chú thích được
dùng như sau:
<!-- Ðây là dòng chú thích, chỉ dành riêng cho bạn, browser bỏ qua dòng này -->
Như vậy một trang web viết bằng html sẽ có cấu trúc như sau:
<html>
<body>
<!-- Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn. -->
</body>
</html>
11/18/2013
Công cụ thiết kế Web - HTML
3
6
3.1.1. Tổng quan về HTML
Một trang web bao giờ cũng có hai phần cơ bản là tiêu đề và phần thân. Tiêu đề luôn được viết to. Bạn có
thể dùng size lớn hơn và cũng có thể dùng những TAG đã được định sẵn cho tiêu đề.
<html>
<body bgcolor="#000080">
<font face="Verdana, Tahoma, Arial" color="#ffffff">
Tiêu đề của trang web
Welcome to my Homepage!
Tiêu đề của trang web
Tiêu đề của trang web
Tiêu đề của trang web
Tiêu đề của trang web
</font>
</body>
</html>
là to nhất và là nhỏ nhất. Tiêu đề luôn nằm ở trung tâm của trang, vì vậy ta phải
dùng thêm một cặp TAG nữa :
hướng vào phía giữa của trang.
11/18/2013
Công cụ thiết kế Web - HTML
7
3.1.1. Tổng quan về HTML
Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp
tag <head></head>. Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một
cặp tag nữa, đó là <title></title> Giữa <title> và </title> là tên của trang web được
browser trình bày phía trên cùng của menubar. Như vậy một trang web với "đầu" sẽ
có cấu trúc như sau:
<html>
<head>
<title>Trang web dau tien cua toi</title>
</head>
<body>
Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn.
</body>
</html>
Trong "head" ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine...
Next
11/18/2013
Công cụ thiết kế Web - HTML
8
3.1.2. Các thẻ HTML
I. C¸c thÎ ®Þnh cÊu tróc tµi liÖu
1.1 HTML
1.2 HEAD
1.3 TITLE
1.4 BODY
11/18/2013
Công cụ thiết kế Web - HTML
9
1.1 HTML
• <HTML>
• ... Toµn bé néi cña tµi liÖu ®îc ®Æt ë ®©y
• </HTML>
11/18/2013
Công cụ thiết kế Web - HTML
10
1.2 HEAD
• <HEAD>
• ... PhÇn më ®Çu (HEADER) cña tµi liÖu ®îc ®Æt ë
®©y
• </HEAD>
11/18/2013
Công cụ thiết kế Web - HTML
11
1.3 TITLE
<TITLE>Tiªu ®Ò cña tµi liÖu</TITLE>
11/18/2013
Công cụ thiết kế Web - HTML
12
1.4 BODY
• <BODY>
• .... phÇn néi dung cña tµi liÖu ®îc ®Æt ë ®©y
• </BODY>
11/18/2013
Công cụ thiết kế Web - HTML
13
1.4 BODY (TT)
11/18/2013
Công cụ thiết kế Web - HTML
14
3.1.2. Cỏc th HTML (TT)
II. Các thẻ định dạng khối
2.1. Thẻ trình bày một đoạn P
2.2. Các thẻ định dạng tiêu đề H1/H2/H3/H4/H5/H6
2.3 Thẻ ngắt xuống dòng BR
2.4 Thẻ định dạng văn bản(văn bản đợc định dạng
trớc trong tài liệu HTML và khi trình duyệt hiển
thị thì sẽ tuân theo định dạng này) PRE
11/18/2013
Cụng c thit k Web - HTML
15
3.1.2. Cỏc th HTML (TT)
III. Các thẻ định dạng danh sách
Cú pháp:
<UL>
<LI> Mục thứ nhất
<LI> Mục thứ hai
</UL>
Có 4 kiểu danh sách:
Danh sách không sắp xếp ( hay không đánh số)
<UL>
Danh sách có sắp xếp (hay có đánh số) <OL>, mỗi
mục trong da nh sách đợc sắp xếp thứ tự.
Danh sách thực đơn <MENU>
Danh sách phân cấp <DIR>
11/18/2013
Cụng c thit k Web - HTML
16
3.1.2. Cỏc th HTML (TT)
IV. Các thẻ định dạng ký tự
4.1. Các thẻ định dạng in ký tự
4.2. Căn lề văn bản trong trang Web
4.3. Các ký tự đặc biệt
4.4. Sử dụng màu sắc trong thiết kế các trang Web
4.5. Chọn kiểu chữ cho văn bản
4.6. Khái niệm văn bản siêu liên kết
11/18/2013
Cụng c thit k Web - HTML
17
4.1. C¸c thÎ ®Þnh d¹ng in ký tù
11/18/2013
Công cụ thiết kế Web - HTML
18
4.2. C¨n lÒ v¨n b¶n trong trang Web
11/18/2013
Công cụ thiết kế Web - HTML
19
4.3. C¸c ký tù ®Æc biÖt
11/18/2013
Công cụ thiết kế Web - HTML
20
4.4. Sử dụng màu sắc trong thiết kế các
trang Web
Sau đây là một số giá trị màu cơ bản:
11/18/2013
Cụng c thit k Web - HTML
21
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c
trang Web (TT)
Cú pháp:
11/18/2013
Công cụ thiết kế Web - HTML
22
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c
trang Web (TT)
Sau ®©y lµ ý nghÜa c¸c tham sè cña thÎ BODY:
11/18/2013
Công cụ thiết kế Web - HTML
23
4.5. Chän kiÓu ch÷ cho v¨n b¶n
•Có ph¸p:
COLOR
SIZE
...
</FONT>
11/18/2013
= font-name
= color
=n>
Công cụ thiết kế Web - HTML
24
4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt
•§Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ <A>.
•Có ph¸p:
11/18/2013
Công cụ thiết kế Web - HTML
25
