chương 1: giới thiệu về web html

CHƯƠNG I
CHƯƠNG I
GIỚI THIỆU VỀ WEB
GIỚI THIỆU VỀ WEB
I.
CÁC KHÁI NIỆM CƠ BẢN
CÁC KHÁI NIỆM CƠ BẢN

Internet
Internet
: mạng máy tính toàn cầu, các máy
: 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
truyền thông với nhau bằng giao thức chung
là TCP/IP (Transfer Control Protocol/Internet
là TCP/IP (Transfer Control Protocol/Internet
Protocol)
Protocol)

Intranet
Intranet
: là mạng cục bộ không nối vào
: là mạng cục bộ không nối vào
Internet, truyền thông bằng giao thức TCP/IP.
Internet, 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ủ.
: mô hình khách-chủ.
Server chứa tài nguyên dùng chung cho nhiều
Server chứa tài nguyên dùng chung cho nhiều
máy Client
máy Client

Internet
Internet


Server
Server
: là các Server cung cấp các
: là các Server cung cấp các
dịch vụ Internet (Web Server, Mail Server, FTP
dịch vụ Internet (Web Server, Mail Server, FTP
Server…)
Server…)
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
Nhà cung cấp
dịch vụ Internet cho khách hàng. Mỗi ISP có
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
nhiều khách hàng và có thể có nhiều loại dịch
vụ Internet khác nhau.
vụ Internet khác nhau.

Internet
Internet


Protocol
Protocol
: tiêu chuẩn chi phối việc

: 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
chuyển tải thông tin giữa các máy tính trong
mạng
mạng

World Wide Web (WWW):
World Wide Web (WWW):
dịch vụ tra cứu
dịch vụ tra cứu
thông tin Internet. Dịch vụ này đưa ra cách
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ễ
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 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
dụng dịch vụ này máy Client cần có một
chương trình gọi là Web Browser.
chương trình gọi là Web Browser.
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
trình duyệt Web. Dùng để truy
xuất các tài liệu trên các Web Server.
xuất 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
là trang web đầu tiên trong web
site
site

Hosting
Hosting

provider
provider
: là công ty hoặc tổ chức đưa
: là công ty hoặc tổ chức đưa
các trang của chúng ta lên mạng
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

Web
Web


server
server
là một chương trình đáp ứng yêu
là một chương trình đáp ứng yêu
cầu truy xuất tài nguyên
cầu truy xuất tài nguyên
I.
CÁC KHÁI NIỆM CƠ BẢN
CÁC KHÁI NIỆM CƠ BẢN

URL(Unioform resource locator):
URL(Unioform 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
đến một file cụ thể trong nguồn tài nguyên
mạng.
mạng.

Ví dụ: 207.46.130.149 được biểu diễn trong
Ví dụ: 207.46.130.149 được biểu diễn trong
URL là
URL là
www.microsoft.com
www.microsoft.com

URL tuyệt đối
URL tuyệt đối
– là địa chỉ Internet đầy đủ của
– là địa chỉ Internet đầy đủ của
một trang hoặc file, bao gồm giao thức, vị trí
một trang hoặc file, bao gồm giao thức, vị trí
mạng, đường dẫn tuỳ chọn và tên file.
mạng, đường dẫn 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
- 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,
kết nối 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
URL tương đối đơn giản bao gồm tên và phần
mở rộng của tập tin.
mở rộng của tập tin.
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-
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
Server, khách và chủ web liên lạc nhau bằng
giao thức http (HyperText Transfer Protocol).
giao thức http (HyperText Transfer Protocol).
Các web server cung cấp thông tin được định
Các web server cung cấp thông tin được định
dạng theo ngôn ngữ HTML
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

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
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.
được lưu 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.
GIỚI THIỆU KHÁI QUÁT VỀ WEB
GIỚI THIỆU KHÁI QUÁT VỀ WEB

HTML
HTML


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


Hypertext
Hypertext
(Hypertext link)
(Hypertext link)
là một từ hay một
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
cụm từ đặc biệt dùng để tạo liên kết giữa các
trang web
trang web

Mark
Mark


up
up
: là cách định dạng văn bản để trình
: là cách định dạng văn bản để trình
duyệt hiểu và thông dịch được.
duyệt 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
:Có thể soạn thảo
web trên bất kỳ trình soạn thảo văn bản nào:
web trên bất kỳ trình soạn thảo văn bản nào:
Notepad, FrontPage hoặc Dreamweaver.
Notepad, FrontPage hoặc Dreamweaver.
III.
TAG HTML
TAG HTML


Cú pháp:
Cú pháp:
<tagName ListProperties> Object
<tagName ListProperties> Object
</tagName>
</tagName>
–
TagName
: tên tag HTML, liền với dấu “< “, không có
khoảng trắng
–
Object
:đối tượng hiển thị trên trang Web
–
ListPropeties
: danh sách thuộc tính của Tag

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’…>
Object
</TagName>
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>
<HEAD>
<HEAD>
Nội dung thông tin của trang web
Nội dung thông tin của trang web
</HEAD>
</HEAD>
<BODY>
<BODY>
Nội dung hiển thị trên trình duyệt
Nội dung hiển thị trên trình duyệt
</BODY>
</BODY>
</HTML>
</HTML>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<Title> :
<Title> :
Hiển thị nội dung tiêu đề của trang
Hiển thị nội dung tiêu đề của trang
web trên thanh tiêu đề của trình duyệt
web 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>
<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>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<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>
<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.
<HR>:
<HR>:
Kẻ đường ngang trang
Kẻ đường ngang trang
Cú pháp:
Cú pháp:
<HR Align=”directtion” Width= “Value”
<HR Align=”directtion” Width= “Value”
Size=value color=#rrggbb>
Size=value color=#rrggbb>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<FONT>:
<FONT>:
định dạng font chữ cho cả tài liệu thì
định dạng font chữ cho cả tài liệu thì
đặt tag <Font> trong phần <Body>
đặt tag <Font> trong phần <Body>
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>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<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

−
Text: thiết lập màu chữ
−
Link: màu của siêu liên kết
−
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
−
LeftMargin, TopMargin: Canh lề trái /lề trên của trang
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
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 = LIMEGRREN>
<FONT COLOR = LIMEGRREN>
Welcome to HTML
Welcome to HTML
</FONT>

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

dụng mở trang Web.
dụng mở trang Web.
Cú pháp
Cú pháp
:
:
<BgSound src=”filenhac” Loop=value>
<BgSound src=”filenhac” Loop=value>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN

<EMBED>:
<EMBED>:
Đưa âm thanh từ video clip vào
Đưa âm thanh từ video clip vào
trang
trang
Cú pháp
Cú pháp
:
:


<EMBED SRC="URL" width=value
<EMBED SRC="URL" width=value
height=value >
height=value >
Ví dụ:
Ví dụ:

<embed src=“nhac.wmv"
<embed src=“nhac.wmv"
width="80%“ height="50%"
width="80%“ height="50%"
autostart="true“ loop="true"
autostart="true“ loop="true"
hidden="false“></embed>
hidden="false“></embed>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<Marquee></Marquee> :
<Marquee></Marquee> :
Điều khiển đối
Điều khiển đối
tượng chạy một cách tự động trên trang Web
tượng chạy một cách tự động trên trang Web
Cú pháp
Cú pháp
:
:


<Marquee >Object</Marquee>
<Marquee >Object</Marquee>
<! Ghi chú >:
<! Ghi chú >:
Chú thích không hiển thị.
Chú thích không hiển thị.
Cú pháp

Cú pháp
:
:


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


<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>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<I>: Định dạng chữ nghiêng
<I>: Định dạng chữ nghiêng
Cú pháp:
<I>
Nội dung chữ nghiêng
</I>
<U>:
<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>
<BIG> và <SMALL>:
<BIG> và <SMALL>:
Chỉnh cở chữ to hoặc nhỏ
Chỉnh cở chữ to hoặc nhỏ
hơn cở chữ xung quanh
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>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<SUP> và <SUB> :
<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:
<SUP> Nội dung chữ dưa lên cao </SUP>
<SUB> Nội dung chữ đưa xuống thấp </SUB>
<STRIKE>:
<STRIKE>:
Gạch ngang văn bản
Gạch ngang văn bản
Cú pháp:
<STRIKE>
Nội dung văn bản bị gạch ngang
</STRIKE>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<CODE>…</CODE>:
<CODE>…</CODE>:
Dùng để nhập một dòng mã có

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
đị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 văn bản bình thường
hiện mà được hiển thị dưới 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>
V.

CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<EM>:
<EM>:
Văn bản được nhấn mạnh (giống tag
Văn bản được nhấn mạnh (giống tag
<I>)
<I>)
Cú pháp:
Cú pháp:
<EM>Văn bản được nhấn mạnh</EM>
<STRONG>:
<STRONG>:
Định dạng chữ đậm (giống <B>)
Đị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>
<BLOCKQUOTE>:
<BLOCKQUOTE>:
tương đương với phím tab
tương đương với phím tab
Dùng phân cách một khối văn bản để nhấn
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
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à
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

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)
(tương đương chức năng của phím tab)
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
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>
<PRE>:
<PRE>:
Giữ nguyên các định dạng như: ngắt
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
dòng, khoảng cách, thích hợp với việc tạo
bảng
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>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
Ví dụ:
Ví dụ:
<HTML>
<HTML>
<HEAD><TITLE>Learning
HTML</TITLE><HEAD>
<BODY>
<PRE>
Trường Đại Học Công Nghiệp TP.HCM
Khoa Công Nghệ Thông Tin
</PRE>
</BODY>
</HTML>
</HTML>
V.
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
<DIV>
<DIV>
chia văn bản thành một khối bắt đầu từ
chia văn bản thành một khối bắt đầu từ
một dòng mới.
một dòng mới.
<SPAN>
<SPAN>

tách khối nhưng không bắt đầu từ
tách khối nhưng không bắt đầu từ
một dòng mới
một dòng mới
Cú pháp
Cú pháp
:
:
<DIV>
<DIV>
Nội dung của khối bắt đầu từ một dòng mới
Nội dung của khối bắt đầu từ một dòng mới


</DIV>
</DIV>