bài giảng môn thiết kế web - chương i giới thiệu về web
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 (577.32 KB, 57 trang )
Ả
Ả
Ế Ế
Ế Ế
Ố Ế
Ố Ế
Ầ Ữ
Ầ Ữ
!"#!#
!"#!#
$ ƯƠ
$ ƯƠ
%& Ớ Ệ Ề
%& Ớ Ệ Ề
Internet
Internet
: 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
: 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 (Transfer Control Protocol/Internet Protocol)
chung là TCP/IP (Transfer Control Protocol/Internet Protocol)
Intranet
Intranet
: là mạng cục bộ không nối vào Internet, truyền thông bằng giao thức
: là mạng cục bộ không nối vào Internet, truyền thông bằng giao thức
TCP/IP.
TCP/IP.
Mô
Mô
hình
hình
Client
Client
-
-
Server
Server
: mô hình khách-chủ. Server chứa tài nguyên dùng chung
: mô hình khách-chủ. Server chứa tài nguyên dùng chung
cho nhiều máy Client
cho nhiều máy Client
Internet
Internet
Server
Server
: là các Server cung cấp các dịch vụ Internet (Web Server, Mail
: là các Server cung cấp các dịch vụ Internet (Web Server, Mail
Server, FTP Server…)
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 vụ Internet cho khách hàng.
Nhà cung cấp dị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 nhau.
Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.
Internet
Internet
Protocol
Protocol
: tiêu chuẩn chi phối việc chuyển tải thông tin giữa các máy tính
: 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
trong mạng
World Wide Web (WWW):
World Wide Web (WWW):
dịch vụ tra cứu thông tin Internet. Dịch vụ này đưa ra
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 liệu của các máy phục vụ dễ dàng thông qua các giao tiếp đồ
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 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
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.
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 các tài liệu trên các Web
trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web
Server.
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 trang của chúng ta lên mạng
: là công ty hoặc tổ chức đưa các 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 truy xuất tài nguyên
là một chương trình đáp ứng yêu cầu 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ỉ đến một file cụ thể trong nguồn
một địa chỉ chỉ đến một file cụ thể trong nguồn
tài nguyên mạng.
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.
www.
microsoft
microsoft
.com
.com
–
URL tuyệt đối
URL tuyệt đối
– là địa chỉ Internet đầy đủ của một trang hoặc
– 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 tuỳ chọn và
file, bao gồm giao thức, vị trí mạng, đường dẫn tuỳ chọn và
tên file.
tên file.
Ví dụ, http://
Ví dụ, http://
www.
www.
microsoft
microsoft
.com/ms.
.com/ms.
htm
htm
.
.
–
URL tương đối
URL tương đối
- mô tả ngắn gọn địa chỉ tập tin kết nối có
- 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 đối đơn
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.
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, khách và chủ web liên lạc nhau
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 (HyperText Transfer Protocol). Các web server cung cấp thông
bằng giao thức http (HyperText Transfer Protocol). Các web server cung cấp thông
tin được định dạng theo ngôn ngữ HTML
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 HTML hoặc những đọan mã đặc
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 web có thể hiểu và thông dịch được, file được lưu với phần mở
biệt mà trình duyệt 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.
rộng là .html hoặc htm.
Website
Website
: 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
: 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 đó
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
tập những quy luật để định dạng văn
bản trên trang web.
bản 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 bất
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
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 nhau khoảng trắng
Nếu có nhiều thuộc tính thì các thuộc tính cách 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
<HTML>
<HTML>
*+,-
*+,-
./!"#01"#."2 "#3'ộ ủ
./!"#01"#."2 "#3'ộ ủ
*4+,-
*4+,-
*5,6-
*5,6-
./!"#0. "0 7"8"0/! ộ ể ị ệ
./!"#0. "0 7"8"0/! ộ ể ị ệ
*45,6-
*45,6-
</HTML>
</HTML>
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 trên thanh tiêu đề của trình
Hiển thị nội dung tiêu đề của trang web trên thanh tiêu đề của trình
duyệt
duyệt
Cú pháp
Cú pháp
:
:
<TITLE> Nội dung tiêu đề </TITLE>
<TITLE> Nội dung tiêu đề </TITLE>
2.
2.
<Hn>:
<Hn>:
Tạo header, gồm 6 cấp header, được đặt trong phần BODY
Tạo header, gồm 6 cấp header, được đặt 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
Size=value
color=#rrggbb>
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
Định dạng từng phần hoặc từng từ thì đặt tại
vị trí muốn định dạng
vị 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
Background: load một hình làm nền cho
trang
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>
9
9
:
:
*,-
*,-
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.
::::
::::
:
:
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 chạy một cách tự động trên
Điều khiển đối tượng chạy một cách tự động trên
trang Web
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>
14.
14.
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>
15.
15.
Tag <BIG> và <SMALL>:
Tag <BIG> và <SMALL>:
Chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung
Chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung
quanh
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 xuống thấp so với văn bản bình
Đưa chữ lên cao hoặc xuống thấp so với văn bản bình
thường
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 < B
If A < 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, đoạn văn bản này được tách
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 riêng, thêm khoảng trắng trên và dưới đoạn đồng thời thụt
thành một paragraph 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 của phím tab)
vào so với lề trái (tương đương chức năng 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 dòng, khoảng cách, thích hợp
<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
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>
