Công cụ và môi trường phát triển web

1. CÔNG CỤ VÀ MÔI TRƯỜNGCÔNG CỤ VÀ MÔI TRƯỜNG
PHÁT TRIỂN WEBPHÁT TRIỂN WEB
Giảng viênGiảng viên : ĐĂNG NHÂN CÁCH: ĐĂNG NHÂN CÁCH
Khoa CNTT – ĐH GTVT TP.HCMKhoa CNTT – ĐH GTVT TP.HCM
Diễn Đàn: www.chamhoc.netDiễn Đàn: www.chamhoc.net
ĐT: 0988 757 797ĐT: 0988 757 797
Email:Email: tucach@hcmutrans.edu.vntucach@hcmutrans.edu.vn

2. Giới thiệu môn họcGiới thiệu môn học
 Môn học cung cấp các kỹ năng cơ bản thiết kế
web tĩnh và xử lý dữ liệu tại client side. Cách
thiết kế trang Web bằng Frontpage, Dreaweaver
 Nội dung gồm 3 phần:
 Căn bản về HTML
 Phần mềm hỗ trợ thiết kế web – FontPage 2003
 Phần mềm hỗ trợ thiết kế web – Dreamweaver
 Thời lượng : 15 tiết lý thuyết + 30 tiết thực hành
2

3. Giới thiệu môn họcGiới thiệu môn học
Chương I: Tổng quan về Internet, Web và HTMLChương I: Tổng quan về Internet, Web và HTML
Phần II: Thiết kế Web bằng Fontpage 2003Phần II: Thiết kế Web bằng Fontpage 2003
 1 Giới thiệu Frontpage1 Giới thiệu Frontpage
 2 Cấu trúc trang web với frontpage2 Cấu trúc trang web với frontpage
 3 Làm việc với văn bản3 Làm việc với văn bản
 4 Làm việc với image4 Làm việc với image
 5 Liên kết trang5 Liên kết trang
 6 Bố cục trang với Table6 Bố cục trang với Table
 7 Frameset7 Frameset
3

4. Giới thiệu môn học (tt)Giới thiệu môn học (tt)
Phần III: Thiết kế Web bằng DreamwaverPhần III: Thiết kế Web bằng Dreamwaver
 1 Giới thiệu Dreaweaver
 2 Làm việc với văn bản
 3 Làm việc với image
 4 Liên kết trang
 5 Bố cục trang với Table
 6 Frameset
 7 Layer
 8 Xuất bản website

5. Tài liệu tham khảoTài liệu tham khảo
 [1]. Tải trên diễn đàn www.chamhoc.net
 [2]. Các sách về thiết kế Web với Fontpage
và Dreamwaver
 [3]. Tham khảo tài liệu trên Internet
5

6. Tiêu chuẩn đánh giáTiêu chuẩn đánh giá
Đảm bảo 2 bài kiểm tra giữa học kỳ phải đạt từĐảm bảo 2 bài kiểm tra giữa học kỳ phải đạt từ
điểm 5 trở lên mới được dự thi học phầnđiểm 5 trở lên mới được dự thi học phần
 Điểm quá trình 30%Điểm quá trình 30%
 Điểm cuối kỳ 70%Điểm cuối kỳ 70%
6

7. PHẦN 1: TỔNG QUAN VỀ WEBPHẦN 1: TỔNG QUAN VỀ WEB
& NGÔN NGỮ HTML& NGÔN NGỮ HTML
((HyperText Markup LanguageHyperText Markup Language))
CHƯƠNG 1CHƯƠNG 1
GIỚI THIỆU VỀ WEBGIỚI THIỆU VỀ WEB

8.  InternetInternet : 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/IPthông với nhau bằng giao thức chung là TCP/IP
(Transfer Control Protocol/Internet Protocol)(Transfer Control Protocol/Internet Protocol)
 IntranetIntranet : 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ìnhhình ClientClient--ServerServer: 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 Clientchứa tài nguyên dùng chung cho nhiều máy Client
 InternetInternet ServerServer: 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ẢNCÁC KHÁI NIỆM CƠ BẢN
8

9. Lịch sử của InternetLịch sử của Internet
 Internet xuất phát từ mạng ARPANET (1969)Internet xuất phát từ mạng ARPANET (1969)
 1989 – TIM BERNERS LEE phát minh WWW, HTML1989 – TIM BERNERS LEE phát minh WWW, HTML
 1990 – TIM viết trình duyệt (Web Browser) và máy chủ1990 – TIM viết trình duyệt (Web Browser) và máy chủ
Web ( Web Server)Web ( Web Server)
 Việt nam có Internet từ 11/1997Việt nam có Internet từ 11/1997
 Hiện nay có hơnHiện nay có hơn 3030 tỉ trang Web / 108 triệu Websites trêntỉ trang Web / 108 triệu Websites trên
toàn thế giới.toàn thế giới.
9

10.  InternetInternet ServiceService ProviderProvider (ISP):(ISP): Nhà cung cấp dịchNhà cung cấp dịch
vụ Internet cho khách hàng. Mỗi ISP có nhiều kháchvụ 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áchàng và có thể có nhiều loại dịch vụ Internet khác
nhau.nhau.
 InternetInternet ProtocolProtocol : 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ạngtả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 tindịch vụ tra cứu thông tin
Internet. Dịch vụ này đưa ra cách truy xuất các tàiInternet. 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ácliệ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 Clientgiao 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ẢNCÁC KHÁI NIỆM CƠ BẢN
10

11. Các dịch vụ cơ bản trên Internet ngoàiCác dịch vụ cơ bản trên Internet ngoài
WWWWWW
11

12. 12

13. 13

14.  WebWeb BrowserBrowser :: trình duyệt Web. Dùng để truy xuấttrì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, NestcapeInternet Explorer, Nestcape
– Firefox,ChromeFirefox,Chrome
 HomeHome pagepage:: là trang web đầu tiên trong web sitelà trang web đầu tiên trong web site
 HostingHosting providerprovider: 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ạngtrang của chúng ta lên mạng
 PublishPublish: Xuất bản trang web: Xuất bản trang web
 WebWeb serverserver là một chương trình đáp ứng yêu cầulà một chương trình đáp ứng yêu cầu
truy xuất tài nguyêntruy xuất tài nguyên
I.I. CÁC KHÁI NIỆM CƠ BẢNCÁC KHÁI NIỆM CƠ BẢN
14

15.  Webserver là dạng phần mềm cài trên máyWebserver là dạng phần mềm cài trên máy
server để phục vụ quản lý các website . Ví dụ :server để phục vụ quản lý các website . Ví dụ :
apache, iis .tích hợp các giao diện lập trìnhapache, iis .tích hợp các giao diện lập trình
bằng một ngôn ngữ cụ thể.bằng một ngôn ngữ cụ thể.
 Web là ứng dụng (trên mạng client-server)Web là ứng dụng (trên mạng client-server)
được chia sẽ trên mạng internetđược chia sẽ trên mạng internet
15

16.  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 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.comwww.microsoft.com
– URL tuyệt đốiURL 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ẫnhoặ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.htmwww.microsoft.com/ms.htm..
– URL tương đốiURL 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ươngcó 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ẢNCÁC KHÁI NIỆM CƠ BẢN
16

17. II.II. GIỚI THIỆU KHÁI QUÁT VỀ WEBGIỚI THIỆU KHÁI QUÁT VỀ WEB
 WebWeb 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 httpkhá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ữ HTMLcấ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 taglà 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ệtHTML 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ưuweb 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.
 WebsiteWebsite: 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 đó
17

18. II.II. GIỚI THIỆU KHÁI QUÁT VỀ WEBGIỚI THIỆU KHÁI QUÁT VỀ WEB
 HTMLHTML (HyperText makup Language)(HyperText makup 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ởichuẩn được quy ước để thiết kế Web và được hiển thị bởi
trình duyệt Webtrình duyệt Web
– HypertextHypertext (Hypertext link)(Hypertext link) là một từ hay một cụmlà 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 webtừ đặc biệt dùng để tạo liên kết giữa các trang web
– MarkMark upup: 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.
– LanguageLanguage:: tập những quy luật để định dạng văn bảntập những quy luật để định dạng văn bản
trên trang web.trên trang web.
 TrìnhTrình soạnsoạn thảothảo trangtrang webweb ::Có thể soạn thảo web trênCó thể soạn thảo web trên
bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPagebất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage
hoặc Dreamweaver.hoặc Dreamweaver. 18

19. CÁC QUY TẮC CHUNGCÁC QUY TẮC CHUNG
 Nhiều dấu cách liền nhau cũng chỉ có tác dụng nhưNhiều dấu cách liền nhau cũng chỉ có tác dụng như
một dấu cách. Bạn phải sử dụng thẻ để thể hiện nhiềumột dấu cách. Bạn phải sử dụng thẻ để thể hiện nhiều
dấu giãn cách liền nhau.dấu giãn cách liền nhau.
 Gõ Enter để xuống dòng được xem như một dấu cách,Gõ Enter để xuống dòng được xem như một dấu cách,
để xuống hàng thì chúng ta phải sử dụng thẻ tươngđể xuống hàng thì chúng ta phải sử dụng thẻ tương
ứngứng
 Có thể viết tên thẻ không phân biệt chữ in thường vàCó thể viết tên thẻ không phân biệt chữ in thường và
in hoa.in hoa.
 Vì các kí tự dấu lớn hơn "Vì các kí tự dấu lớn hơn ">>", dấu nhỏ hơn "", dấu nhỏ hơn "<<" đã" đã
được dùng làm thẻ đánh dấu, do đó để hiển thị các kíđược dùng làm thẻ đánh dấu, do đó để hiển thị các kí
tự này HTML quy định cách viết: &gt; &lt;tự này HTML quy định cách viết: &gt; &lt;
19

20. III.III. TAGTAG HTMLHTML
 Cú pháp:Cú pháp:
<tagName ListProperties> Object </tagName><tagName ListProperties> Object </tagName>
– TagNameTagName : 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ắngkhông có khoảng trắng
– ObjectObject :đối tượng hiển thị trên trang Web:đối tượng hiển thị trên trang Web
– ListPropetiesListPropeties: danh sách thuộc tính của Tag: danh sách thuộc tính của Tag
20

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

22. IV.IV. CẤU TRÚC CƠ BẢN CỦA TRANG WEBCẤU TRÚC CƠ BẢN CỦA TRANG WEB
<HTML><HTML>
<HEAD><HEAD>
Nội dung thông tin của trang webNội dung thông tin của trang web
</HEAD></HEAD>
<BODY><BODY>
Nội dung hiển thị trên trình duyệtNội dung hiển thị trên trình duyệt
</BODY></BODY>
</HTML></HTML>
22

23. V.V. CÁC TAG HTML CƠ BẢNCÁC TAG HTML CƠ BẢN
1.1. <Title> :<Title> : Hiển thị nội dung tiêu đề của trang webHiển thị nội dung tiêu đề của trang web
trên thanh tiêu đề của trình duyệttrên thanh tiêu đề của trình duyệt
Cú phápCú 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 đặtTạo header, gồm 6 cấp header, được đặt
trong phần BODYtrong phần BODY
Cú phápCú pháp
<Hn ALIGN= “Direction”><Hn ALIGN= “Direction”>
Nội dung của HeaderNội dung của Header
</Hn> 23

24. 3.3. <P> :<P> : Dùng để ngắt đoạn và bắt đầu đoạn mớiDùng để ngắt đoạn và bắt đầu đoạn mới
Cú pháp:Cú pháp:
<PALIGN =<PALIGN = ””left|center|rightleft|center|right””>>
Nội dung của đoạnNội dung của đoạn
</P></P>
4.4. <BR>:<BR>: Ngắt dòng tại vị trí của tag.Ngắt dòng tại vị trí của tag.
5.5. <HR>: K<HR>: Kẻ đường ngang trangẻ đườ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>
24

25. 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ạngtrí muốn định dạng
Cú phápCú 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>
25

26. 7.7. <BODY > :<BODY > : Chứa nội dung của trang webChứa nội dung của trang web
 Cú phápCú pháp::
<BODY><BODY>
Nội dung chính của trang webNộ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:BgColor: thiết lập màu nền của trangthiết lập màu nền của trang
– Text:Text: thiết lập màu chữthiết lập màu chữ
– Link:Link: màu của siêu liên kếtmàu của siêu liên kết
– Vlink:Vlink: màu của siêu liên kết đã xem quamàu của siêu liên kết đã xem qua
– Background:Background: load một hình làm nền cho trangload một hình làm nền cho trang
– LeftMargin:LeftMargin: Canh lề tráiCanh lề trái
– TopMargin:TopMargin: Canh lề trên của trangCanh lề trên của trang
26

27. Ví dụ:Ví dụ:
<HTML><HTML>
<HEAD><HEAD>
<TITLE> Learning HTML</TITLE><TITLE> Learning HTML</TITLE>
</HEAD></HEAD>
<<BODYBODY BGCOLORBGCOLOR=”#0000FF”=”#0000FF” texttext=”yellow”>=”yellow”>
<FONT<FONT COLORCOLOR = LIMEGRREN>= LIMEGRREN>
Welcome to HTMLWelcome to HTML
</FONT></FONT>
</BODY></BODY>
</HTML></HTML> 27

28. 8.8. <IMG> : C<IMG> : Chèn một hình ảnh vào trang Webhèn một hình ảnh vào trang Web
Cú phápCú pháp::
<Img<Img srcsrc=”URL=”URL ofof Image”Image” altalt=”Text”=”Text” widthwidth=value=value
heightheight=value=value borderborder=value>=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ở trangthanh này sẽ được phát mỗi khi người sử dụng mở trang
Web.Web.
Cú phápCú pháp::
<BgSound<BgSound srcsrc=”filenhac”=”filenhac” LoopLoop=value>=value>
10.10. <EMBED>:<EMBED>: Cho phép đưa âm thanh trực tiếp vào trangCho phép đưa âm thanh trực tiếp vào trang
WEB.WEB.
28

29. Cú phápCú 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>
29

30. Thuộc tính Mô tả
SRC=”URL” Tên và đường dẫn đến tệp video
HEIGHT=n Chiều cao của khung hình chiếu video
WIDTH=n Chiều rộng của khung hình chiếu video
AUTOPLAY=true|
false
Đặt cho video tự chạy khi bắt đầu nạp tài
liệu (không bắt buộc)
CONTROLLER=true|
flase
Cho hiện giao diện điều khiển của phần
mềm video ở liền ngay phía dưới khung
hình. Thuộc tính này không bắt buộc.
Mặc định là true.
LOOP=true|false
Thiết lập việc lặp lại nhiều lần hay chỉ
một lần 30

31. 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 Webchạy một cách tự động trên trang Web
Cú phápCú pháp::
<Marquee >Object</Marquee><Marquee >Object</Marquee>
11.11. <!-- Ghi chú -->:<!-- Ghi chú -->: không hiển thị trong trangkhông hiển thị trong trang
Cú phápCú 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ápCú pháp
<B> Nội dung chữ đậm</B><B> Nội dung chữ đậm</B>
31

32. 13.13. Tag <I>: Tag <I>: Định dạng chữ nghiêngĐịnh dạng chữ nghiêng
Cú phápCú pháp::
<I> <I> Nội dung chữ nghiêngNội dung chữ nghiêng</I></I>
13.13. Tag <U>: Tag <U>: Gạch chân văn bảnGạch chân văn bản
CúCú pháppháp::
<U> <U> Nội dung chữ gạch chânNội dung chữ gạch chân</U></U>
13.13. Tag <BIG> và <SMALL>: Tag <BIG> và <SMALL>: Chỉnh cở chữ toChỉnh cở chữ to
hoặc nhỏ hơn cở chữ xung quanhhoặc nhỏ hơn cở chữ xung quanh
Cú phápCú pháp
<BIG> <BIG> Nội dung chữ toNội dung chữ to </BIG> </BIG>
<SMALL> <SMALL> Nội dung chữ nhỏNội dung chữ nhỏ </SMALL> </SMALL>
32

33. 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ườngxuống thấp so với văn bản bình thường
Cú phápCú pháp::
<SUP> <SUP> Nội dung chữ dưa lên caoNội dung chữ dưa lên cao </SUP> </SUP>
<SUB> <SUB> Nội dung chữ đưa xuống thấpNội dung chữ đưa xuống thấp </SUB> </SUB>
17.17. <STRIKE>: <STRIKE>: Gạch ngang văn bảnGạch ngang văn bản
Cú phápCú pháp::
<STRIKE><STRIKE>
Nội dung văn bản bị gạch ngangNội dung văn bản bị gạch ngang
</STRIKE></STRIKE>
33

34. 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ướiDò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ườngdạng văn bản bình thường
 Cú phápCú pháp::
<CODE><CODE>
Nội dung văn bản muốn định dạngNội dung văn bản muốn định dạng
</CODE></CODE>
 Ví dụ:Ví dụ:
<CODE><CODE>
If A &lt; BIf A &lt; B
Then <BR>Then <BR>
A = A + 1A = A + 1
</CODE></CODE> 34

35. 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 đồngriê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ăngthờ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) 35

36. Cú pháp:Cú pháp:
<BLOCKQUOTE><BLOCKQUOTE>
Nội dung khối văn bản nhấn mạnhNộ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ảngdò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ả địnhNộ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àngdạng khoảng cách, xuống dòng và ngắt hàng
</PRE></PRE>
36

37. Ví dụ:Ví dụ:
<HTML><HTML>
<HEAD><TITLE>Learning<HEAD><TITLE>Learning
HTML</TITLE><HEAD>HTML</TITLE><HEAD>
<BODY><BODY>
<PRE><PRE>
Trường Đại Học Công Nghiệp TP.HCMTrường Đại Học Công Nghiệp TP.HCM
Khoa Công Nghệ Thông TinKhoa Công Nghệ Thông Tin
</PRE></PRE>
</BODY></BODY>
</HTML></HTML>
37

38. 23.23. <DIV> <SPAN>: <DIV> <SPAN>: Chia văn bản thành các khối,Chia văn bản thành các khối,
có chung một định dạngcó chung một định dạng
– <DIV> chia văn bản thành một khối bắt<DIV> chia văn bản thành một khối bắt
đầu từ một dòng mới.đầu từ một dòng mới.
– <SPAN> tách khối nhưng không bắt đầu từ<SPAN> tách khối nhưng không bắt đầu từ
một dòng mớimột dòng mới
Cú phápCú pháp::
<DIV><DIV>
Nội dung của khối bắt đầu từ một dòng mớiNội dung của khối bắt đầu từ một dòng mới
</DIV> </DIV>
38

39. Ví dụ:Ví dụ:
<HTML><HTML>
<HEAD><TITLE> Learning HTML</TITLE></HEAD><HEAD><TITLE> Learning HTML</TITLE></HEAD>
<BODY><BODY>
<DIV align = center><DIV align = center>
<FONT size = 4 color = hotpink face = Arial><FONT size = 4 color = hotpink face = Arial>
Trường Đại Học GTVT TP.HCMTrường Đại Học GTVT TP.HCM
</FONT></FONT>
</DIV> Khoa Công Nghệ Thông Tin</DIV> Khoa Công Nghệ Thông Tin
</BODY></BODY>
</HTML></HTML>
39

40. <SPAN><SPAN>
Nội dung của khối trong 1 dòngNội dung của khối trong 1 dòng
</SPAN></SPAN>
Ví dụVí dụ::
<HTML><HTML>
<HEAD><TITLE> Learning HTML</TITLE></HEAD><HEAD><TITLE> Learning HTML</TITLE></HEAD>
<BODY><BODY>
<SPAN STYLE = “FONT-SIZE:25; Color:BLUE”><SPAN STYLE = “FONT-SIZE:25; Color:BLUE”>
Creating Web PagesCreating Web Pages
</SPAN><font size=6 color=red > With HTML</font></SPAN><font size=6 color=red > With HTML</font>
</BODY></BODY>
</HTML></HTML>
40

41. 24. 24. Định dạng phần địa chỉĐịnh dạng phần địa chỉ
 Thẻ định dạng:Thẻ định dạng: <ADDRESS>…<ADDRESS>…
</ADDRESS></ADDRESS>
 Ví dụ:Ví dụ:
<ADDRESS><ADDRESS>
Newsletter editor <BR>Newsletter editor <BR>
J.R. Brown<BR>J.R. Brown<BR>
JimquickPost Neưs, Jumquick, CT 01234<BR>JimquickPost Neưs, Jumquick, CT 01234<BR>
Tel (123) 456 7890Tel (123) 456 7890
</ADDRESS></ADDRESS>
41

42. Danh sách không đánh số thứ tựDanh sách không đánh số thứ tự
 Cú pháp:Cú pháp:
<UL><UL>
<LI> Mục thứ 1<LI> Mục thứ 1
<LI> Mục thứ 2<LI> Mục thứ 2
…………
</UL></UL>
 Cặp thẻ <UL>…</UL> đánh dấu bắt đầu và kết thúcCặp thẻ <UL>…</UL> đánh dấu bắt đầu và kết thúc
danh sách. Nó có tác dụng lùi lề trái danh sách vàodanh sách. Nó có tác dụng lùi lề trái danh sách vào
sâu hơn.sâu hơn.
 Các thẻ <LI> có tác dụng thể hiện bắt đầu một dòngCác thẻ <LI> có tác dụng thể hiện bắt đầu một dòng
mới với một chấm tròn.mới với một chấm tròn. 42

43.  Ví dụ:Ví dụ:
<UL><UL>
<LI> Mục thứ 1<LI> Mục thứ 1
<LI> Mục thứ 2<LI> Mục thứ 2
<LI> Mục thứ 3<LI> Mục thứ 3
</UL></UL>
Cú pháp:Cú pháp:
<UL TYPE=<UL TYPE=DISC|CIRCLE|SQUAREDISC|CIRCLE|SQUARE>>
hoặchoặc
<<LLI TYPE=I TYPE=DISC|CIRCLE|SQUAREDISC|CIRCLE|SQUARE>>
43
• Mục thứ 1
• Mục thứ 2
• Mục thứ 3

44. Danh sách đánh số thứ tựDanh sách đánh số thứ tự
 Cú pháp:Cú pháp:
<OL><OL>
<LI> Mục thứ 1<LI> Mục thứ 1
<LI> Mục thứ 2<LI> Mục thứ 2
…………
</OL></OL>
44
Chữ in hoa A,B,C,…
(TYPE=A)
Chữ in thường a,b,c,…
(TYPE=a)
Chữ số La mã lớn I,II,III,…
(TYPE=I)
Chữ số La mã nhỏ i, ii, iii,…
(TYPE=i)
Số thứ tự 1,2,3,4,…
(TYPE=1), đây là lựa chọn
mặc định
1. Mục thứ 1
2. Mục thứ 2
3. Mục thứ 3

45. Bảng biểuBảng biểu
Chủ giải Code
Giới hạn bảng <TABLE>…</TABLE>
Định nghĩa một hàng <TR>…</TR>
Định nghĩa một ô <TD>…</TD>
Ô chứa tiêu đề TH>…</TH>. (H=Header)
Đầu đề của bảng <CAPTION>…</CAPTION>
45

46. Ví dụ:Ví dụ:
<TABLE><TABLE>
<TR><TR>
<TH> Họ và tên </TH><TH> Họ và tên </TH>
<TH> Lớp </TH><TH> Lớp </TH>
<TH> Quê quán </TH><TH> Quê quán </TH>
</TR></TR>
<TR><TR>
<TD> Bùi Thanh Trúc </TD><TD> Bùi Thanh Trúc </TD>
<TD> K50CA </TD><TD> K50CA </TD>
46
<TD> K50CA </TD>
<TD> Hà Nội </TD>
</TR>
<TR>
<TD> Nguyễn Mai Hương<TD> Nguyễn Mai Hương
</TD></TD>
<TD> K50CB </TD><TD> K50CB </TD>
<TD> Thanh Hóa </TD><TD> Thanh Hóa </TD>
</TR></TR>
</TABLE></TABLE>
Họ và tên Lớp Quê quán
Bùi Thanh Trúc K50CA Hà Nội
Nguyễn Mai Hương K50CB Thanh Hóa

47. Các thuộc tínhCác thuộc tính
Thẻ/Thuộc tính Ý nghĩa
<TABLE BORDER=n
CELLSPACING=n
CELLPADDING=n
BGCOLOR="#rrggbb">
BORDER - Đặt khung xung quanh
bảng. Đặt BORDER=0 sẽ làm mất
biên bao quanh.
CELLSPACING - Đặt độ dầy của
dòng kẻ ngang trong bảng.
CELLPADDING - Đặt kích thước
của một ô.
BGCOLOR - Đặt màu nền của bảng.
ALIGN=MIDDLE|RIGHT Nếu nằm trong <TR>, <TH> hay
<TD> có giá trị LEFT, CENTER hay
RIGHT và điều khiển việc đặt nội
dung của ô căn bên trái, vào giữa ô
hay căn bên phải. 47

48. Các thuộc tínhCác thuộc tính
Thẻ/Thuộc tính Ý nghĩa
VALIGN=TOP|BOTTOM Nếu nằm trong <TR>, <TH> hay <TD>
có thể có các giá trị TOP, MIDDLE,
BOTTOM hay BASELINE
WIDTH=n% Thuộc tính dùng kèm các thẻ <TH> hay
<TD> để đặt độ rộng của ô.
COLSPAN=n Thuộc tính dùng kèm các thẻ <TH> hay
<TD> để giãn một ô theo chiều ngang
chiếm nhiều cột hơn các ô trên dòng
khác.
ROWSPAN=n Thuộc tính dùng kèm các thẻ <TH> hay
<TD> để giãn một ô theo chiều đứng
chiếm nhiều dòng hơn các ô ở cột khác
48

49. Các ký tự đặc biệtCác ký tự đặc biệt
Ký tự Cách viết
< &lt;
> &gt;
“ &quot;
Ký tự trắng &nbsp;
& &amp;
49

50. 24.24. Các ký tự đặc biệt:Các ký tự đặc biệt:
a)a) Lớn hơn (>): &gt;Lớn hơn (>): &gt;
Ví dụ:Ví dụ:
<CODE><CODE>
If A &gt; BIf A &gt; B
Then <BR>Then <BR>
A = A + 1A = A + 1
</CODE></CODE>
b)b) Nhỏ hơn (<): &lt;Nhỏ hơn (<): &lt;
Ví dụ:Ví dụ:
<CODE><CODE>
If A &lt; BIf A &lt; B
Then <BR>Then <BR>
A = A + 1A = A + 1
</CODE></CODE> 50

51. c)c) Cặp nháy””: &quot;Cặp nháy””: &quot;
Ví dụ:Ví dụ:
<BODY><BODY>
&quot; To be or not to be? &quot; That is the&quot; To be or not to be? &quot; That is the
questionquestion
</BODY></BODY>
d)d) Ký tự và &: &ampKý tự và &: &amp;;
Ví dụ:Ví dụ:
<P> William &amp; Graham went to the fair<P> William &amp; Graham went to the fair
e)e) Ký tự khoảng trắng: &nbspKý tự khoảng trắng: &nbsp;;
51

52. – Cách load lại trang Web: Click biểu tượng Refresh (F5) trênCách load lại trang Web: Click biểu tượng Refresh (F5) trên
thanh công cụ.thanh công cụ.
– Chỉnh size chữ hiển thị trên trang: Chọn Menu View->TextChỉnh size chữ hiển thị trên trang: Chọn Menu View->Text
sizesize
– Chỉnh lại font chữ: Chọn Menu View->EnCodingChỉnh lại font chữ: Chọn Menu View->EnCoding
– Nếu trang Web không hiển thị được Font tiếng Việt:Nếu trang Web không hiển thị được Font tiếng Việt:
• Chọn menu Tool chọn Internet Options->Chọn TabChọn menu Tool chọn Internet Options->Chọn Tab
FontsFonts chọn Font tiếng Việtchọn Font tiếng Việt
• Hoặc chọn Menu ViewHoặc chọn Menu View>EnCoding>EnCodingchọn các fontchọn các font
như User defined,Vietnamese….như User defined,Vietnamese….
– Các tuỳ chọn khác cho trang Web: ToolsCác tuỳ chọn khác cho trang Web: Tools  Internet optionInternet option
• Chọn trang web mặc định khi mở trình duyệtChọn trang web mặc định khi mở trình duyệt 52
CÁC THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆTCÁC THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆT

53. 53

54. 54

55.  Tab General(Hình 1):Tab General(Hình 1): thiết lập các tùy chọn cho trình duyệtthiết lập các tùy chọn cho trình duyệt
– Use CurrentUse Current: chọn trang hiện tại để load lên mỗi lần khởi động IE: chọn trang hiện tại để load lên mỗi lần khởi động IE
– Use DefaultUse Default: địa chỉ trang Web mặc định mỗi khi mở trình duyệt: địa chỉ trang Web mặc định mỗi khi mở trình duyệt
Ví dụVí dụ
Khi mở IE thì tự động hiển thị trang Web Yahoo thì trong ôKhi mở IE thì tự động hiển thị trang Web Yahoo thì trong ô
Address nhập:Address nhập: http://yahoo.comhttp://yahoo.com , nếu chọn Use Blank thì hiển, nếu chọn Use Blank thì hiển
thị trang trắng .thị trang trắng .
 HistoryHistory:: lưu lại các trang web đã duyệt qua tại máy Clientlưu lại các trang web đã duyệt qua tại máy Client
và thông tin đăng nhập của user hiện hành…Nếu khôngvà thông tin đăng nhập của user hiện hành…Nếu không
muốn lưu lại: Chọn Delete Cookies và Delete Files.muốn lưu lại: Chọn Delete Cookies và Delete Files.
 Days to keep pages in historyDays to keep pages in history: thiết lập khoảng thời gian: thiết lập khoảng thời gian
lưu trữ trang trong đối tượng Historylưu trữ trang trong đối tượng History
55

56.  Tab AdvanceTab Advance((HìnhHình 2): có thể chọn các tùy chọn khác như:2): có thể chọn các tùy chọn khác như:
– Ngăn chặn không cho tải hình xuống trang webNgăn chặn không cho tải hình xuống trang web
– Màu liên kết, cách thể hiện liên kết trên trangMàu liên kết, cách thể hiện liên kết trên trang
 Hiệu chỉnh trang Web: View source->hiệu chỉnhHiệu chỉnh trang Web: View source->hiệu chỉnhchọn Filechọn File
 Save để lưu lạiSave để lưu lại F5 để cập nhật lại nội dung vừa hiệuF5 để cập nhật lại nội dung vừa hiệu
chỉnhchỉnh
56