Bài giảng môn thiết kế web pot

 Ả
 Ả


  Ế Ế
  Ế Ế
  Ầ Ữ
  Ầ Ữ






 ƯƠ
 ƯƠ
  ! Ớ Ệ Ề
  ! Ớ Ệ Ề

Internet
Internet
: mạng máy tính toàn cầu, các máy truyền
: mạng máy tính toàn cầu, các máy truyền
thông với nhau bằng giao thức chung là TCP/IP
thông với nhau bằng giao thức chung là TCP/IP
(Transfer Control Protocol/Internet Protocol)
(Transfer Control Protocol/Internet Protocol)

Intranet
Intranet
: là mạng cục bộ không nối vào Internet,

: là mạng cục bộ không nối vào Internet,
truyền thông bằng giao thức TCP/IP.
truyền thông bằng giao thức TCP/IP.

Mô
Mô


hình
hình


Client
Client
-
-
Server
Server
: mô hình khách-chủ. Server
: mô hình khách-chủ. Server
chứa tài nguyên dùng chung cho nhiều máy Client
chứa tài nguyên dùng chung cho nhiều máy Client

Internet
Internet


Server
Server
: là các Server cung cấp các dịch vụ

: là các Server cung cấp các dịch vụ
Internet (Web Server, Mail Server, FTP Server…)
Internet (Web Server, Mail Server, FTP Server…)
I.
I.
CÁC KHÁI NIỆM CƠ BẢN
CÁC KHÁI NIỆM CƠ BẢN

Internet
Internet


Service
Service


Provider
Provider
(ISP):
(ISP):
Nhà cung cấp dịch
Nhà cung cấp dịch
vụ Internet cho khách hàng. Mỗi ISP có nhiều khách
vụ Internet cho khách hàng. Mỗi ISP có nhiều khách
hàng và có thể có nhiều loại dịch vụ Internet khác
hàng và có thể có nhiều loại dịch vụ Internet khác
nhau.
nhau.

Internet

Internet


Protocol
Protocol
: tiêu chuẩn chi phối việc chuyển
: tiêu chuẩn chi phối việc chuyển
tải thông tin giữa các máy tính trong mạng
tải thông tin giữa các máy tính trong mạng

World Wide Web (WWW):
World Wide Web (WWW):
dịch vụ tra cứu thông tin
dịch vụ tra cứu thông tin
Internet. Dịch vụ này đưa ra cách truy xuất các tài
Internet. Dịch vụ này đưa ra cách truy xuất các tài
liệu của các máy phục vụ dễ dàng thông qua các
liệu của các máy phục vụ dễ dàng thông qua các
giao tiếp đồ họa. Để sử dụng dịch vụ này máy Client
giao tiếp đồ họa. Để sử dụng dịch vụ này máy Client
cần có một chương trình gọi là Web Browser.
cần có một chương trình gọi là Web Browser.
I.
I.
CÁC KHÁI NIỆM CƠ BẢN
CÁC KHÁI NIỆM CƠ BẢN

Web
Web

Browser
Browser
:
:
trình duyệt Web. Dùng để truy xuất
trình duyệt Web. Dùng để truy xuất
các tài liệu trên các Web Server.
các tài liệu trên các Web Server.
–
Internet Explorer
Internet Explorer
–
Nestcape
Nestcape

Home
Home


page
page
:
:
là trang web đầu tiên trong web site
là trang web đầu tiên trong web site

Hosting
Hosting

provider
provider
: là công ty hoặc tổ chức đưa các
: là công ty hoặc tổ chức đưa các
trang của chúng ta lên mạng
trang của chúng ta lên mạng

Publish
Publish
: Xuất bản trang web
: Xuất bản trang web

"
"


#$
#$


là một chương trình đáp ứng yêu cầu
là một chương trình đáp ứng yêu cầu
truy xuất tài nguyên
truy xuất tài nguyên
I.
I.
CÁC KHÁI NIỆM CƠ BẢN
CÁC KHÁI NIỆM CƠ BẢN


URL(Uniform resource locator):
URL(Uniform resource locator):
một địa chỉ chỉ
một địa chỉ chỉ
đến một file cụ thể trong nguồn tài nguyên mạng.
đến một file cụ thể trong nguồn tài nguyên mạng.
Ví dụ: 207.46.130.149 được biểu diễn trong URL là
Ví dụ: 207.46.130.149 được biểu diễn trong URL là
www.microsoft.com
www.microsoft.com
–
URL tuyệt đối
URL tuyệt đối
– là địa chỉ Internet đầy đủ của một trang
– là địa chỉ Internet đầy đủ của một trang
hoặc file, bao gồm giao thức, vị trí mạng, đường dẫn
hoặc file, bao gồm giao thức, vị trí mạng, đường dẫn
tuỳ chọn và tên file.
tuỳ chọn và tên file.
Ví dụ, http://
Ví dụ, http://
www.microsoft.com/ms.htm
www.microsoft.com/ms.htm
.
.
–
URL tương đối
URL tương đối
- mô tả ngắn gọn địa chỉ tập tin kết nối

- mô tả ngắn gọn địa chỉ tập tin kết nối
có cùng đường dẫn với tập tin hiện hành, URL tương
có cùng đường dẫn với tập tin hiện hành, URL tương
đối đơn giản bao gồm tên và phần mở rộng của tập tin.
đối đơn giản bao gồm tên và phần mở rộng của tập tin.
I.
I.
CÁC KHÁI NIỆM CƠ BẢN
CÁC KHÁI NIỆM CƠ BẢN
II.
II.


GIỚI THIỆU KHÁI QUÁT VỀ WEB
GIỚI THIỆU KHÁI QUÁT VỀ WEB

Web
Web
là một ứng dụng chạy trên mạng Client-Server,
là một ứng dụng chạy trên mạng Client-Server,
khách và chủ web liên lạc nhau bằng giao thức http
khách và chủ web liên lạc nhau bằng giao thức http
(HyperText Transfer Protocol). Các web server cung
(HyperText Transfer Protocol). Các web server cung
cấp thông tin được định dạng theo ngôn ngữ HTML
cấp thông tin được định dạng theo ngôn ngữ HTML

Web Page:
Web Page:
là một file văn bản chứa những tag

là một file văn bản chứa những tag
HTML hoặc những đọan mã đặc biệt mà trình duyệt
HTML hoặc những đọan mã đặc biệt mà trình duyệt
web có thể hiểu và thông dịch được, file được lưu
web có thể hiểu và thông dịch được, file được lưu
với phần mở rộng là .html hoặc htm.
với phần mở rộng là .html hoặc htm.

Website
Website
: Một tập hợp nhiều web page, thể hiện
: Một tập hợp nhiều web page, thể hiện
thông tin của một tổ chức hoặc một chủ đề nào đó
thông tin của một tổ chức hoặc một chủ đề nào đó
II.
II.


GIỚI THIỆU KHÁI QUÁT VỀ WEB
GIỚI THIỆU KHÁI QUÁT VỀ WEB

HTML
HTML


(HyperText markup Language)
(HyperText markup Language)
gồm các đoạn mã
gồm các đoạn mã
chuẩn được quy ước để thiết kế Web và được hiển thị bởi

chuẩn được quy ước để thiết kế Web và được hiển thị bởi
trình duyệt Web
trình duyệt Web
–
Hypertext
Hypertext
(Hypertext link)
(Hypertext link)
là một từ hay một cụm
là một từ hay một cụm
từ đặc biệt dùng để tạo liên kết giữa các trang web
từ đặc biệt dùng để tạo liên kết giữa các trang web
–
Mark
Mark


up
up
: là cách định dạng văn bản để trình duyệt
: là cách định dạng văn bản để trình duyệt
hiểu và thông dịch được.
hiểu và thông dịch được.
–
Language
Language
:
:
tập những quy luật để định dạng văn bản
tập những quy luật để định dạng văn bản

trên trang web.
trên trang web.

Trình
Trình


soạn
soạn


thảo
thảo


trang
trang


web
web
:
:
Có thể soạn thảo web trên
Có thể soạn thảo web trên
bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage
bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage
hoặc Dreamweaver.
hoặc Dreamweaver.
III.

III.
TAG
TAG


HTML
HTML



Cú pháp:
Cú pháp:
<tagName ListProperties> Object </tagName>
<tagName ListProperties> Object </tagName>
–
TagName
TagName
: tên tag HTML, liền với dấu “< “,
: tên tag HTML, liền với dấu “< “,
không có khoảng trắng
không có khoảng trắng
–
Object
Object
:đối tượng hiển thị trên trang Web
:đối tượng hiển thị trên trang Web
–
ListPropeties
ListPropeties
: danh sách thuộc tính của Tag

: danh sách thuộc tính của Tag
III.
III.
TAG
TAG


HTML
HTML



Nếu có nhiều thuộc tính thì các thuộc tính cách
Nếu có nhiều thuộc tính thì các thuộc tính cách
nhau khoảng trắng
nhau khoảng trắng
<TagName property1=’value1’ property2=’value2’…>
<TagName property1=’value1’ property2=’value2’…>
Object
Object
</TagName>
</TagName>
Ví dụ:
Ví dụ:
<body BGCOLOR=”RED” TEXT=“#FFFF00”>
<body BGCOLOR=”RED” TEXT=“#FFFF00”>
nội dung
nội dung
</body>
</body>

IV.
IV.
CẤU TRÚC CƠ BẢN CỦA TRANG WEB
CẤU TRÚC CƠ BẢN CỦA TRANG WEB


%&
%&
%'(&
%'(&
 )*+,)- ."ộ ủ
 )*+,)- ."ộ ủ
%/'(&
%/'(&
%0(1&
%0(1&
 )*+) + 23+* ộ ể ị ệ
 )*+) + 23+* ộ ể ị ệ
%/0(1&
%/0(1&
%/&
%/&
V.
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
1.
1.
<Title> :
<Title> :

Hiển thị nội dung tiêu đề của trang web
Hiển thị nội dung tiêu đề của trang web
trên thanh tiêu đề của trình duyệt
trên thanh tiêu đề của trình duyệt
Cú pháp
Cú pháp
:
:
<TITLE> Nội dung tiêu đề </TITLE>
<TITLE> Nội dung tiêu đề </TITLE>
1.
1.
<Hn>:
<Hn>:
Tạo header, gồm 6 cấp header, được đặt
Tạo header, gồm 6 cấp header, được đặt
trong phần BODY
trong phần BODY
Cú pháp
Cú pháp
<Hn ALIGN= “Direction”>
<Hn ALIGN= “Direction”>
Nội dung của Header
Nội dung của Header
</Hn>
</Hn>
3.
3.
<P> :
<P> :

Dùng để ngắt đoạn và bắt đầu đoạn mới
Dùng để ngắt đoạn và bắt đầu đoạn mới
Cú pháp:
Cú pháp:
<P ALIGN = “Direction”>
<P ALIGN = “Direction”>
Nội dung của đoạn
Nội dung của đoạn


</P>
</P>
4.
4.
<BR>:
<BR>:
Ngắt dòng tại vị trí của của tag.
Ngắt dòng tại vị trí của của tag.
5.
5.
<HR>: K
<HR>: K
ẻ đường ngang trang
ẻ đường ngang trang
Cú pháp:
Cú pháp:
<HR Align=”direction” Width= “Value”
<HR Align=”direction” Width= “Value”
Size=value color=#rrggbb>
Size=value color=#rrggbb>

6.
6.
<FONT>:
<FONT>:
định dạng font chữ
định dạng font chữ
–
Định dạng Font chữ cho cả tài liệu thì đặt tag
Định dạng Font chữ cho cả tài liệu thì đặt tag
<Font> trong phần <Body>
<Font> trong phần <Body>
–
Định dạng từng phần hoặc từng từ thì đặt tại vị
Định dạng từng phần hoặc từng từ thì đặt tại vị
trí muốn định dạng
trí muốn định dạng
Cú pháp
Cú pháp
:
:
<FONT Face=”fontName1, fontName2,
<FONT Face=”fontName1, fontName2,
fontName3” size=”value” Color=”rrggbb”>
fontName3” size=”value” Color=”rrggbb”>


Nội dung hiển thị
Nội dung hiển thị
</FONT>
</FONT>

7.
7.
<BODY > :
<BODY > :
Chứa nội dung của trang web
Chứa nội dung của trang web

Cú pháp
Cú pháp
:
:
<BODY>
<BODY>
Nội dung chính của trang web
Nội dung chính của trang web
</BODY>
</BODY>

Các thuộc tính của <Body>
Các thuộc tính của <Body>
–
BgColor: thiết lập màu nền của trang
BgColor: thiết lập màu nền của trang
–
Text: thiết lập màu chữ
Text: thiết lập màu chữ
–
Link: màu của siêu liên kết
Link: màu của siêu liên kết
–

Vlink: màu của siêu liên kết đã xem qua
Vlink: màu của siêu liên kết đã xem qua
–
Background: load một hình làm nền cho trang
Background: load một hình làm nền cho trang
–
LeftMargin: Canh lề trái
LeftMargin: Canh lề trái
–
TopMargin: Canh lề trên của trang
TopMargin: Canh lề trên của trang
Ví dụ:
Ví dụ:
<HTML>
<HTML>
<HEAD>
<HEAD>
<TITLE> LearningHTML</TITLE>
<TITLE> LearningHTML</TITLE>
</HEAD>
</HEAD>
<BODY BGCOLOR=“#0000FF” text=“yellow”>
<BODY BGCOLOR=“#0000FF” text=“yellow”>
<FONT COLOR = LIMEGREEN>
<FONT COLOR = LIMEGREEN>
Welcome to HTML
Welcome to HTML
</FONT>
</FONT>
</BODY>

</BODY>
</HTML>
</HTML>
8.
8.
<IMG> : C
<IMG> : C
hèn một hình ảnh vào trang Web
hèn một hình ảnh vào trang Web
Cú pháp
Cú pháp
:
:
<Img src=”URL
<Img src=”URL
of
of
Image” alt=”Text” width=value
Image” alt=”Text” width=value
height=value border=value>
height=value border=value>
9.
9.
<BgSound>
<BgSound>
: Chèn một âm thanh vào trangWeb. Âm
: Chèn một âm thanh vào trangWeb. Âm
thanh này sẽ được phát mỗi khi người sử dụng mở trang
thanh này sẽ được phát mỗi khi người sử dụng mở trang
Web.

Web.
Cú pháp
Cú pháp
:
:
<BgSound src=”filenhac” Loop=value>
<BgSound src=”filenhac” Loop=value>
45
45
6
6
%(&
%(&
Cho phép đưa âm thanh trực tiếp vào trang
Cho phép đưa âm thanh trực tiếp vào trang
WEB.
WEB.
6666
6666
6
6


Cú pháp
Cú pháp
:
:


<EMBED SRC="URL" width=value height=value >

<EMBED SRC="URL" width=value height=value >
Ví dụ:
Ví dụ:
<embed src=“nhac.wmv" width="80%" height="50%"
<embed src=“nhac.wmv" width="80%" height="50%"
autostart="true" loop="true" hidden="false">
autostart="true" loop="true" hidden="false">
</embed>
</embed>
10.
10.
<Marquee></Marquee> :
<Marquee></Marquee> :
Điều khiển đối tượng
Điều khiển đối tượng
chạy một cách tự động trên trang Web
chạy một cách tự động trên trang Web
Cú pháp
Cú pháp
:
:


<Marquee direction=up >Object</Marquee>
<Marquee direction=up >Object</Marquee>
11.
11.
<! Ghi chú >:
<! Ghi chú >:
không hiển thị trong trang

không hiển thị trong trang
Cú pháp
Cú pháp
:
:


<! Nội dung lời chú thích >
<! Nội dung lời chú thích >
12.
12.


<B>:
<B>:
định dạng chữ đậm
định dạng chữ đậm
Cú pháp
Cú pháp
<B> Nội dung chữ đậm</B>
<B> Nội dung chữ đậm</B>
13.
13.
Tag <I>:
Tag <I>:
Định dạng chữ nghiêng
Định dạng chữ nghiêng


Cú pháp

Cú pháp
:
:
<I>
<I>
Nội dung chữ nghiêng
Nội dung chữ nghiêng
</I>
</I>
13.
13.


Tag <U>:
Tag <U>:
Gạch chân văn bản
Gạch chân văn bản
Cú
Cú


pháp
pháp
:
:
<U>
<U>
Nội dung chữ gạch chân
Nội dung chữ gạch chân
</U>

</U>
13.
13.
Tag <BIG> và <SMALL>:
Tag <BIG> và <SMALL>:
Chỉnh cở chữ to
Chỉnh cở chữ to
hoặc nhỏ hơn cở chữ xung quanh
hoặc nhỏ hơn cở chữ xung quanh
Cú pháp
Cú pháp
<BIG>
<BIG>
Nội dung chữ to
Nội dung chữ to
</BIG>
</BIG>
<SMALL>
<SMALL>
Nội dung chữ nhỏ
Nội dung chữ nhỏ
</SMALL>
</SMALL>
16.
16.
Tag <SUP> và <SUB> :
Tag <SUP> và <SUB> :
Đưa chữ lên cao hoặc
Đưa chữ lên cao hoặc
xuống thấp so với văn bản bình thường

xuống thấp so với văn bản bình thường
Cú pháp
Cú pháp
:
:
<SUP>
<SUP>
Nội dung chữ dưa lên cao
Nội dung chữ dưa lên cao
</SUP>
</SUP>
<SUB>
<SUB>
Nội dung chữ đưa xuống thấp
Nội dung chữ đưa xuống thấp
</SUB>
</SUB>
17.
17.
<STRIKE>:
<STRIKE>:
Gạch ngang văn bản
Gạch ngang văn bản
Cú pháp
Cú pháp
:
:
<STRIKE>
<STRIKE>
Nội dung văn bản bị gạch ngang

Nội dung văn bản bị gạch ngang


</STRIKE>
</STRIKE>
18.
18.
<CODE>…</CODE>:
<CODE>…</CODE>:
Dùng để nhập một dòng mã có định dạng ký tự riêng.
Dùng để nhập một dòng mã có định dạng ký tự riêng.
Dòng mã này không được thực hiện mà được hiển thị dưới
Dòng mã này không được thực hiện mà được hiển thị dưới
dạng văn bản bình thường
dạng văn bản bình thường

Cú pháp
Cú pháp
:
:
<CODE>
<CODE>
Nội dung văn bản muốn định dạng
Nội dung văn bản muốn định dạng


</CODE>
</CODE>

Ví dụ:

Ví dụ:
<CODE>
<CODE>
If A &lt; B
If A &lt; B
Then <BR>
Then <BR>
A = A + 1
A = A + 1
</CODE>
</CODE>
19.
19.
<EM>: Văn bản được nhấn mạnh (giống tag <I>)
<EM>: Văn bản được nhấn mạnh (giống tag <I>)
Cú pháp:
Cú pháp:
<EM>Văn bản được nhấn mạnh</EM>
<EM>Văn bản được nhấn mạnh</EM>
20.
20.
<STRONG>: Định dạng chữ đậm (giống <B>)
<STRONG>: Định dạng chữ đậm (giống <B>)
Cú pháp:
Cú pháp:
<STRONG>Văn bản được nhấn mạnh</STRONG>
<STRONG>Văn bản được nhấn mạnh</STRONG>
21.
21.
<BLOCKQUOTE>:

<BLOCKQUOTE>:
Dùng phân cách một khối văn bản để nhấn mạnh,
Dùng phân cách một khối văn bản để nhấn mạnh,
đoạn văn bản này được tách thành một paragraph
đoạn văn bản này được tách thành một paragraph
riêng, thêm khoảng trắng trên và dưới đoạn đồng
riêng, thêm khoảng trắng trên và dưới đoạn đồng
thời thụt vào so với lề trái (tương đương chức năng
thời thụt vào so với lề trái (tương đương chức năng
của phím tab)
của phím tab)
Cú pháp:
Cú pháp:
<BLOCKQUOTE>
<BLOCKQUOTE>
Nội dung khối văn bản nhấn mạnh
Nội dung khối văn bản nhấn mạnh
</BLOCKQUOTE>
</BLOCKQUOTE>
22.
22.
<PRE>: Giữ nguyên các định dạng như: ngắt
<PRE>: Giữ nguyên các định dạng như: ngắt
dòng, khoảng cách, thích hợp với việc tạo bảng
dòng, khoảng cách, thích hợp với việc tạo bảng
Cú pháp:
Cú pháp:
<PRE>
<PRE>
Nội dung văn bản cần định dạng trứơc với tất cả định

Nội dung văn bản cần định dạng trứơc với tất cả định
dạng khoảng cách, xuống dòng và ngắt hàng
dạng khoảng cách, xuống dòng và ngắt hàng
</PRE>
</PRE>