22/04/2011
1
Thiết kế WebThiết kế Web 11
THIẾT KẾ WEBTHIẾT KẾ WEB
Html + JavaScript + Css
Dzoãn Xuân Thanh
Lời nói đầu
Mục tiêu:
•Hiểu được cấu trúc của một website.
•Xây dựng được một web site bằng HTML
Thời lượng: 30LT + 30TH
Đối tượng: Những ai cần
Hình thức thi: Lý thuyết (thi hết môn) + Thực hành (đề tài)
Công cụ hổ trợ: Dreamweaver
Thiết kế WebThiết kế Web 33
Các khái niệm
1. Các dịch vụ cơ bản trên Internet
•WWW (Wold Wide Web): Dịch vụ trao đổi,tìm kiếm
truy cập thông tin trên mạng theo giao thức HTTP.
Được sử dụng thông qua trình duyệt Web
•Email (Thư điện tử): Dịch vụ trao đổi các thông điệp
cho nhau SMTP(Simple Mail Tranfer Protocol)
Pop3(Post office protocol 3) được quản lý bởi các Mail
server như: itc@itc.edu.vn; dzoanthanh@gmail.com,...
.
Thiết kế WebThiết kế Web 44
Các khái niệm
•FTP – File Transfer Protocol – Truyền tải tập tin :
Dịch vụ trao đổi tập tin giữa các máy trên Internet
thường được dùng để Download & Upload các trang
web từ người thiết kế đến các máy chủ thông qua các
chương trình FTP như FTP Explorer, FlashFXP.
•Chat –Tán gẫu:Dịch vụ cho phép người dùng trao đổi
trực tuyến với nhau qua mạng internet bằng văn bản,
âm thanh, hình ảnh Như : AOL, Yahoo messenger
Thiết kế WebThiết kế Web 55
Các khái niệm
2. HTTP (Hyper Text Tranfer Protocol): Giao thức dùng để
giao tiếp với các trang Web.
3. HTML (Hyper Text Makeup Language): Ngôn ngữ đánh
dấu siêu văn bản dùng để thiết kế trang Web.
4. WebPage (Trang Web): Là một tập tin văn bản soạn thảo
theo ngôn ngữ HTML có phần mở rộng là HTML hoặc
HTM.
5. Web Site: Chuyên khu Web tập hợp các trang web thuộc
1chủ thể.
6. Home Page: Trang đầu tiên-Trang chủ của 1 Website
(Index.htm, Default.htm . . .)
Thiết kế WebThiết kế Web 66
22/04/2011
2
7. WebServer: Máy chủ web-Máy tính cấu hình mạnh, lưu trữ
các trang Web kết nối thường xuyên với mạng Internet cho
phép các máy khác truy cập thông tin.
8. Tên miền (Domain Name): Để phân biệt mỗi Web Server
có một địa chỉ IP và được ánh xạ bởi 1 tên (VD:itc.edu.vn).
Được xem như tên giao dịch của công ty, tổ chức trên
Internet.
Bao gồm mã quốc gia như :Việt Nam: .vn, Anh: .uk, Mỹ: .us,
Nhật:.jp...) và 1 số lĩnh vực.
ThiếtThiết kếkế WebWeb 77
Các khái niệm
Để sở hữu 1 tên miền phải trả chi phí hàng năm thông
qua các công ty ủy quyền bán tên miền (pavietnam, mắt
bão, Fpt, . . .
ThiếtThiết kếkế WebWeb 88
.Com : Thương mại
.Edu : Tổ chức giáo dục
.Net : Các mạng thông tin
.Info : Các mạng thông tin
.Int : Tổ chức quốc tế
.Org : Các tổ chức khác
.Gov : Tổ chức chính phủ
.Mil : Tổ chức quân sự
Các khái niệm
9. Hosting: Khi hoàn tất website phải được ghi lưu vào 1
webserver nào đó thì mới truy cập được thông thường là
các server của ISP (Nhà cung cấp dịch vụ Internet hay
đơn vị chuyên dụng). Tùy theo dung lượng,băng thông và
một số hỗ trợ mà chi phí khác nhau.
10. URL(Uniform Resource Location): Địa chỉ truy cập của
trang Web - 1 tập tin trong Website
http://doamainname/……/File.html
11. Browser: Trình duyệt Web dùng để đọc và hiển thị các
trang Web. Phổ biến hiện nay là: InternetExplorer,
FireFox, Google Chrome,..
ThiếtThiết kếkế WebWeb 99
Cấu trúc trang HTML
ThiếtThiết kếkế WebWeb 1010
<HTML>
<HEAD>
<TITLE> Nội dung tiêu đề </TITLE>
</HEAD>
<BODY>
Phần nội dung của trang web
</BODY>
</HTML>
Ví dụ:
< HTML>
< HEAD>
< TITLE> Welcome to HTML< / TITLE>
< /HEAD>
< BODY>
My first HTML document
< /BODY>
< /HTML>
CÁC THẺ ĐỊNH DẠNG VĂN BẢN
1. Định dạng Kiểu dáng
<B> Nội dung văn bản </B>: Nội dung văn bản được in đậm
<I> Nội dung văn bản </I> : Nội dung văn bản được in nghiêng
<U> Nội dung văn bản </U> : Nội dung văn bản được gạch dưới
<S> Nội dung văn bản </S> : Nội dung văn bản được gạch ngang
Nội dung<SUP>ở đây</SUP>
Nội dung<SUB>ở đây</SUB>
ThiếtThiết kếkế WebWeb 1111
CÁC THẺ ĐỊNH DẠNG VĂN BẢN
2. Thay đổi Font, Size
•<FONT FACE=“FontName1, FontName2…”> Nội dung
văn bản </FONT>
Xác định Font cho Nội dung văn bản, Nếu máy truy
cập không có FontName1 sẽ lấy FontName2 . . . sẽ lấy
Font mặc định của trình duyệt.
•<FONT SIZE=“n”> Nội dung văn bản </FONT>
Xác định cỡ chữ cho nội dung văn bản
ThiếtThiết kếkế WebWeb 1212
22/04/2011
3
CÁC THẺ ĐỊNH DẠNG VĂN BẢN
Ví dụ 1:
ThiếtThiết kếkế WebWeb 1313 Thiết kế WebThiết kế Web 1414
Ví dụ 2:
ThiếtThiết kếkế WebWeb 1515 Thiết kế WebThiết kế Web 1616
3. Canh lề đoạn văn bản
<P Align=”Hướng”> Đoạn văn bản </P>
Hướng: Left Canh trái đoạn văn bản
Right Canh phải đoạn văn bản
Center Canh giữa đoạn văn bản
Justify Canh đều văn bản
<CENTER> Các thành phần cần canh giữa</CENTER>
ThiếtThiết kếkế WebWeb 1717
4.Tạo văn bản đề mục
Đề mục là dòng văn bản định dạng khác các dòng văn bản
trong nội dung dùng để tạo đề mục phần, chương. Mỗi thẻ
có chức năng phân đoạn, cấp 1 lớn nhất, cấp 6 nhỏ nhất,
có thể kết hợp thuộc tính canh lề.
<H1> Nội dung văn bản đề mục cấp 1</H1>
<H2> Nội dung văn bản đề mục cấp 2</H2>
. . . . .
<H6> Nội dung văn bản đề mục cấp 6</H6>
VD:
<H3 Align=Center> Đề mục cấp, 3 canh lề giữa</H3>
ThiếtThiết kếkế WebWeb 1818
22/04/2011
4
Sử dụng màu
Các mã màu: Để xác lập màu có thể dùng Tên màu hay Trị
thập lục phân tương ứng
ThiếtThiết kếkế WebWeb 1919
BẢNG MÃ MÀU
Tên màu Trị Tên màu Trị
Black Đen #000000 Olive Nâu vàng #808000
Red Đỏ #FF0000 Teal Nâu sẫm #008080
Blue Xanh #0000FF Maroon Nâu #800000
Navy X.Đãm #000800 Gray Xám #808080
Lime V.Chanh #FFFFFF Fuchsia Hồng #FF00FF
White Trằng #FFFFFF Green Lá #008000
Rurple Đ.Tía #800080 Silver Bạc #C0C0C0
Yellow Vàng #FFFF00 Aqua Ngọc #00FFFF
Sử dụng màu
•Xác lập màu chung cho trang Web
Dùng các thuộc tính của thẻ BODY để xác lập: màu nền, màu
văn bản, màu các văn bản liên kết...
BgColor: Màu nền trang
Text: Màu văn bản
Link: Màu liên kết chưa truy cập
VLink: Màu liên kết đã truy cập
Alink: Màu liên kết khi đang trỏ Mouse
ThiếtThiết kếkế WebWeb 2020
<BODY BgColor=“Màu” Text=“Màu” Link=“Màu” VLink=“Màu”
Alink=“Màu”>
. . . . . Nội dung trang Web. . . . .
</BODY>
Sử dụng màu
•Xác lập màu cho văn bản:
Dùng thuộc tính Color của thẻ FONT để xác lập màu: cho
nội dung văn bản chỉ định.
VD: <FONT FACE=“Tahoma” COLOR=“Red” SIZE=3>
Công nghệ thông tin </FONT>
ThiếtThiết kếkế WebWeb 2121
<FONT COLOR =“Trịmàu”> Nội dung văn bản </FONT>
HIỆU ỨNG CHUYỂN ĐỘNG CHỮ
Trong đó:
Hiệu ứng:
+Scroll:Bắt đầu từ 1cạnh biến mất ở cạnh kia
+Slide:Bắt đầu từ 1cạnh dừng lại ở cạnh kia
+Alternate:Bắt đầu từ 1cạnh chuyển ngược lại ở cạnh kia
Huớng: Left, Right, Up, Down (Hướng bắt đầu)
n1: Số lần lặp ;
n2: Khoảng cách(Pixel) giữa mỗi lần lặp;
n3: Thời gian chờ giữa mỗi lần lặp
ThiếtThiết kếkế WebWeb 2222
<Marquee Behavior=“Hiệu ứng” Direction=“Hướng” Loop=n1
SrollAmount=n2 ScrollDelay=n3 BgColor=“Trị màu”>
Chuỗi ký tự
</Marqueee>
HIỆU ỨNG CHUYỂN ĐỘNG CHỮ
Ví dụ:
ThiếtThiết kếkế WebWeb 2323
LIST – DANH SÁCH
Danh sách được dùng để trình bày thông tin thành dạng dễ
đọc hơn.Chẳng hạn để tạo các bảng chỉ mục, nội dung của
các tài liệu hay các chương. HTML có 2 kiểu danh sách:
danh sách có thứ tự (ordered) và danh sách không có
thứ tự (un ordered).
1. Danh sách không có thứ tự
Danh sách không có thứ tự có các mục bắt đầu ký hiệu đánh
dấu ở trước
Ví dụ:
• List 1
• List 2
ThiếtThiết kếkế WebWeb 2424
22/04/2011
5
LIST – DANH SÁCH
Để tạo ra danh sách không có thứ tự ta dùng các tag sau:
Trong đó:
- type = “square” (là dạng hình vuông)
List 1
List 2
- type = “bullet” (là dạng hình tròn)
• List 1
• List 2
- type = “circle” (là dạng hình tròn rổng)
oList 1
oList 2
ThiếtThiết kếkế WebWeb 2525
<UL type=”kiểu” >
<LI> List 1 </li>
<LI> List 2 </li>
…………………..
<LI> List n </li>
</UL>
LIST – DANH SÁCH
Ví dụ:
ThiếtThiết kếkế WebWeb 2626
Thiết kế WebThiết kế Web 2727
LIST – DANH SÁCH
2. Danh sách có thứ tự
Danh sách có thứ tự là danh sách mà mỗi mục danh sách
được đánh số, thường bắt đấu là 1.
Ví dụ:
1. L ist1
2. List 2
Để tạo ra danh sách có thứ tự ta dùng các tag sau:
ThiếtThiết kếkế WebWeb 2828
<ol type=”kiểu” start=”giá trị”>
<li> List 1 </li>
<li> List 2 </li>
…………………..
<li> List n </li>
</ol>
LIST – DANH SÁCH
Trong đó:
- type= 1: giá trị sẽ là số . start: chỉ mục bắt đầu
Ví dụ:
1. List 1
2. List 2
- type=a: giá trị sẽ là a, b, c
-type = A, giá trị sẽ là ký tự
Ví dụ:
A. List 1
B. List 2
- type=i: giá trị sẽ là i, ii, iii,…
- type=I: giá trị sẽ là I, II, III,…
ThiếtThiết kếkế WebWeb 2929
Ví dụ:
<ol type=“1” start=“4”>
<li> list 1 </li>
<li> list 2 </li>
</ol>
Kết quả:
4. list 1
5. list 2
LIST – DANH SÁCH
Ví dụ 1:
ThiếtThiết kếkế WebWeb 3030