Giáo trình Thiết kế web (Nghề Tin học ứng dụng - Trình độ Cao đẳng) - CĐ GTVT Trung ương I

Giáo trình Thiết kế web cung cấp cho người đọc những kiến thức cơ bản nhất, hiểu được cấu tạo và cách thiết kế một trang web đơn giản. Bên cạnh đó là những lời khuyên để giúp những người mới bước chân vào chưa có kinh nghiệm, có được định hướng, từ đó tạo ra những trang web có giao diện đẹp, phù hợp với tiêu chí, mục đích của trang web và thu hút nhiều người xem. Mời các bạn cùng tham khảo.

TRINH DO CAO DANG

Ban hành theo Quyết định số 498/QD-CDGTVTTWI-DT ngay

25/03/2019 của Hiệu trướng Trường Cao đẳng GTVT Trung ương Ï

TUYEN BO BAN QUYEN

Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dẫn dùng cho các mục đích về đào tạo và tham khảo

Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cắm

Ma tai ligu: THUD —- MH22

LOI NOI DAU

Ngày nay, khi Internet đã trở nên quen thuộc và gần gũi với con người trong

xã hội, thậm chí là công cụ không thế thiếu trong cuộc sống hiện đại thì việc đưa

thông tin quảng bá, tìm kiếm thông tin, giao dịch mua bán trên Internet là những

hoạt động thường xuyên của các dân cư mạng Chính vì vậy nhu cầu thiết kế được

những trang web hấp dẫn, thu hút nhiều người truy cập là mục tiêu và mơ ước của rất nhiều người

Xuất phát từ nhu cầu đó, cuốn giáo trình trước hết sẽ cung cấp cho người đọc

những kiến thức cơ bản nhất, hiểu được cấu tạo và cách thiết kế một trang web đơn giản Bên cạnh đó là những lời khuyên để giúp những người mới bước chân vào chưa có kinh nghiệm, có được định hướng, từ đó tạo ra những trang web có giao diện đẹp, phù hợp với tiêu chí, mục đích của trang web và thu hút nhiều người xem Đồng thời cuốn giáo trình này cung cấp cho các em học sinh sinh viên những kiến thức về Thương mại điện tử, hiện đang là một trong những phương thức kinh doanh mang lại nhiều lợi ích cho nhân loại và là phương thức kinh doanh đại diện

cho nền kinh tế tri thức

Giáo trình “ Thiết kế Website” không những sử dụng làm giáo trình nội bộ trong Nhà trường mà còn được sử dụng cho việc giảng dạy và học tập của giảng viên, học sinh - sinh viên ngành Tin học ứng dụng trình độ Cao đẳng - Trường Cao đẳng nghề GTVT Trung ương I

Giáo trình Thiết kế Website là tập hợp nhiều giáo trình căn bản gồm:

Chương 1: Thiết kê website băng ngôn ngữ HTML

Chương 2: Thiết kế website bằng chương trình Microsoft FrontPage

Chương 3: Thiết kê website băng Dreamwearer

Mặc dâu có rất nhiều cố gắng khi biên soạn, nhưng không thể tránh khỏi những sai

sót, vì vậy rât mong nhận được sự góp ý của độc giả đê giáo trình hoàn thiện hơn

Xin chan thành cảm ơn!

NHÓM BIÊN SOẠN

MUC LUC

CHUONG I: GIỚI THIỆU NGÔN NGỮ HTMIL - «se 10

1 GIỚI THIỆU VÈ NGÔN NGỮ HTML À 2-2+222++222ze+ 10

2 CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU 2 2- 2£ 10

d Sử dụng màu sắc trong thiết kế trang web -zc-+ 22

e Chọn kiểu chữ cho văn bản 2-2 ©s+++zx+trxrrrxrerxrerrrrre 26

f Khái niệm văn bản siêu liên kết 2 2 2+ 2+ z+Ez+Ez+E+EEeEEzErxsrxrrsrx 28

g Địa chỉ tương đối 22 22-22 sex 2 2121121211212 32

h Kết nối mailfO - 2-22 s2+EE++EEEeSEEEEEE+eEEEeErxrtrxrerkrerrrrrrrrrrrrcrr

i Vẽ đường thắng năm ngang

6 CAC THE CHEN AM THANH HÌNH ẢNH 2© 2x22 35

a Giới thiệu -2-22-©2222C+eEEveEEEcEEEEEEEEEEEEEEErEEErerrrrrrrrrrrrrrrrrrrree 35

b Đưa âm thanh vào một tài liệu HTML + + + 2 s+s+s+szszs 35

c Chèn một hình ảnh vào tài liệu HTML 5-55 2= =+s+<++ 37

7 CÁC THẺ ĐỊNH DẠNG BẢNG BIÊU .-22-2©zz2c5zz+ee 39

a Ý nghĩa của form trong trang Web và cách khởi tạo 46

b Các thành phần trong form - 22-2 2©2+22+2E+++E+++2z++zxe+zxeerzree 47

CHƯƠNG II: THIET KE WEB BANG CHUONG TRÌNH MICROSOFT FRONTPAGE

1 GIỚI THIỆU CHƯƠNG TRINH MICROSOFT FRONTPAGE 54

a Giới thiệu về Mierosoft frontpage 2 s+©zz+czretzrerrxerrvree 54 b: Céethanh c6ng CU) sss:ccssccecasscsnarncsmasnnsnnnnsmaemmnnacene 54

c Phương thức Xem frang - - +5 + ++s se sex như 56

2 TẠO BỘ WEB ĐƠN GIẢN 2-22 ©222©+zeEEEeEEEvrxrerrrrrrrrerrrre 56

a Thao tác tạo bộ web đơn giản . - - 5S sttererekrrerekrrke 56

b Các thao tác tạo trang web -. -scttneH HH rrrệc 57

c Tạo liên kết các trang web đơn 2-2 s©s++x+rxeerxerxerrxrrseee 58

c Dinh dang header; footer scssissssssssvsassseveevosvassssavsusswesvevensatvesovensvasvesnveve 59

d Xem bộ web bằng trình đuyệt - 2-22 ©2+£x+rxrerxrerzrree 59

x3 h5 59

4 THAO TAC TREN TRANG WEB .sssssssssssesssseessntetseceessnenetsseeenseee 59

7

a Chén nội dung văn bản vào trang web s+c<s+xsxsessreev 60

b Chèn hình ảnh vào trang web - ¿+ 55s sseeeerrrerrrererevl 60

c Chèn bảng vào trang web - - + sxsrrerevevekekrkrkrerkrkrkrerkrevl 61

d Chèn các công cụ đặc biệt vào trang web -c+c+cccsxce 61

e Siu TEM Ket cece ecceecssecsseecssecsseesssccsscessecsnecssecessecsueesseessecsueeesneesees 61

5 TẠO MẪU WEB THIẾT KÉ CÓ SÃN ¿2+czz+czeeczzeee 62

a Tạo nhanh một bộ web cá nhân

b Thay đối chỉ tiết thành phần Them

f Ô nhập liệu nhiều dòng .-2 2¿2+E++2EE££EEz+E+ztEvxezrxerrreerrl 68

g Thay tên Submit, Reset 68

h Cách gửi biếu mẫu 68

7 TẠO KHUNG TRANG WEEB ©22-2222CEEEEEEEEEEEEErrrrrrrkerrrco 69

a Trang KhUNg : ‹:::ccccsccccccsosocsccesinEvESS5626s02615410138616605056655455416130556608656 360 69

Db Tao trang KAUng oo 69

c Nội dung trong khung ceeseseeeeecseescseseescsescseeseneneeas 70

d Hiệu chỉnh trong khung, . - + 55 2+2 S+Esrerrrrrrrrrrrke 74

CHƯƠNG II: THIẾT KÉ WEB BẰNG DREAMWEA VER - 75

1 GIỚI THIỆU CHUNG VẺ DREAMWEAVER 5-5525 75

2 THIẾT KÉ WEB BẰNG DREAMWEAVER 2 2ccc5cce- 76

a Lập kế hoạch thiết kế web - 2-2 ©+2++z+txxetrxetrxerrxrrrrxrrrree 76

Nhập nội dung và định dạng văn bản - - 55555 <+x<+s+<x+ 76

Hình ảnh trong trang web - + 5-5 xxx 78 I0, (8) 78

HTML động - 22222 2222221221222111111122211111122217111112 1.1.1 79

008611) 880 x HĂẬH , 79

; 00 ốốốốốốố

Chia khung với Frames

Quản lý và sử dụng A ssefs ngư 83 Quin LY Site 83

CHUONG I: GIOI THIEU NGON NGU HTML

1 GIGI THIEU VE NGON NGU HTML

HTML (tiếng Anh, viét tat cho HyperText Markup Language, hay là "Ngôn ngữ

Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các

trang web với các mẫu thông tin được trình bày trên World Wide Web HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn Internet

do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới

nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5

hứa hẹn mang lại diện mạo mới cho Web

Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản — có thể gõ vào ngay từ những dòng đầu tiên— cho đến những công cụ xuất bản WYSIWYG phir tap

HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày

2 CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU

a Thé HTML

Một trang HTML sẽ được đánh dấu bắt đầu bằng thẻ <HTMI> và kết thúc bởi

thẻ </HTML> Như vậy, các nội dung đặt ngoài cặp thẻ này đều không hợp lệ Thẻ

<HTMI> được gọi là thẻ mở, thẻ </HTML> được gọi là thẻ đóng Bên trong hai thẻ này, bạn có thể khai báo và sử dụng hầu hết các thẻ HTML khác

Cấu trúc : <HTML> </HTML> Hoặc <html> </html>

b Thẻ HEAD

Phần đầu: Phần đầu bắt đầu bằng thẻ <HEAD> và kết thúc bởi thẻ</HEAD>

Phan này chứa tiêu đề hiển thị trên thanh điều hướng của trangWeb Tiêu đề là phần khá quan trọng Các mốc được dùng dé đánh dấu một Website, trình duyệt sử dụng tiêu đề để lưu trữ các mốc này Do đó,khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từkhoá chính yếu cho việc tìm kiếm

Cấu trúc : <HEAD> </HEAD> Hoặc <head> </head>

10

c — ThẻTITLE

Nội dung được hiện thị trên thanh tiêu đề

Cấu trúc: <TITLE> Nội dung tiêu đề </TITLE> hoặc <title> </title>

d Thé BODY

Dữ liệu của website được viết vào trong thẻ này

Phần thân: Phần này nằm sau phần tiêu đề Phần thân bao gồm văn

bản,hình ảnh và các liên kết mà bạn muốn hiển thị trên trang Web của mình Phần thân bắt đầu bằng thẻ <BODY> và kết thúc bằng thẻ </BODY>

Cấu trúc: <BODY> Dir liệu website <BODY> hoac <body> <body>

Cấu trúc tổng quan trang HTML

<htm1> 4

<head> <title>Tiéu dé trang Web</title> 7 các mô tả về ; [ Phân đầu: chứa

</head> +” | trang Web Định

| - nghĩa

<body> _ ` Rl Phan than: một

<p>Day là trang Web dau chứa nội dung trang

tiên</b> LJ trang Web HTML

Cấu trúc : <p> </p> cặp thẻ này cho phép định dạng cho doạn văn bản bằng các

thuộc tính bên trong thẻ, khi kết thúc đoạn được đánh dấu bằng thé </p> dữ liệu

trình bày sẽ tự động xuống dòng

11

Vi du, ban muốn căn lề cho đoạn văn bản, bạn có thể sử dụng thuộc tính align của thẻ <p> Giá trị của thuộc tính align có bón gid tri: center/justify/left/right

- _ Center: Căn đoạn văn bản ra giữa

- Justify: Can doan van ban sang déu 2 bén

- Left: Can doan van ban sang bén trai

- Right: Can doan van ban sang bén phai

<p align="justify">Day là đoạn văn thứ nhất ví dụ về

cách sử dụng các ký hiệu đặc biệt trong HTML và được canh lễ

bằng thuộc tính align của thẻ &lt;p&gt;</p>

<p align="right">Day là đoạn văn thứ hai ví dụ về cách sử dụng các ký hiệu đặc biệt trong HTML &copy; và được canh lề

bằng thuộc tính align cua thé &lt;p&gt;</p>

HTML định nghĩa sẵn sáu cấp độ của tiêu dé: <hI> </h1>, <h2> </h2>,

„ <h6> </h6> với độ lớn giảm dần từ h1 đến h6 Kết thúc thẻ tiêu đề, nội dung

trình bày cũng tự động xuống dòng

12

'®viau 1-2-3 - Mozilla Firefox pss

File Edit View History Bookmarks Tools Help - () Vidy 1-2-3 | +| val

| ©) tile///D./TLGD TKWeb/vidu1-2-3.html œŒ||Z- Search Resuits P|\ te | | e® -

[2) Most Visited “_} Getting Started

@ Disable- dy Cookies- Y CSS- [J Forms- [Gi Images-~ @ Information- @ Miscellaneous-

Dùng để xuống dòng doạn văn bản, ngoài thẻ <BR> thì thẻ <p>chúng ta vừa nói

ở trên cũng có tác dụng tương tự như thẻ <br>

Chú ý: Thé <BR> chỉ có thẻ mở, không có thẻ đóng

d Thé PRE

13

Để giới hạn đoạn văn bản được định dạng sẵn bạn có thể sử dụng thẻ <PRE>

Van ban ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh

vào, ví dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ <PRE> sẽ có ý nghĩa chuyền sang dòng mới (trình duyệt sẽ không coi chúng như dấu cách)

- <ol></ol> 1a viết tắt của chữ "ordered list" có nghĩa là danh sách có thứ tự

-_ <lï></li> viết tắt của chữ "list item" có nghĩa là mục của danh sách

Danh sách sau đây gọi là danh sách có thứ tự:

<li>Ca léc kho tiêu</li>

<li>Cá rô kho tộ</li>

<li>Cá thu chiên xoài bằm</li>

<li>Cá điêu hồng nấu ngót</li>

</ol>

</body>

</html>

b Danh sach khéng co thie tw

Để thể hiện danh sách không có thứ tự ta sử dụng cặp thé: <ul></ul> va

<li></li>, trong do:

<ul></ul> 1a viết tắt của chit: unordered list có nghĩa là danh sách không có thứ tự

<li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách

Danh sách sau đây gọi là danh sách không có thứ tự:

Upper Roman <li type= 1>

Lower Roman <li type = i>

Uppercase <li type=A >

Lowercase <li type = a>

Bắt đầu với một số khác lớn hơn 1 <ol start=n>

Trong đó thuộc tính start xác định sô khởi tạo ban đâu của danh sách

Ví dụ:

<OL START = 5>

<LI> Creating forms</li>

<LI> Working with Frames<li>

</OL>

c Cấu trúc thẻ danh sách có thứ tự và không có thứ tự

Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau Cấu trúc phải theo các nguyên tắc sau đây:

- _ Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:

+ Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>

+ Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>

16

- Bén trong thé <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất

<li></li>

- _ Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên

không được chứa một số thẻ sau day: <html></html>, <meta></meta>,

<body></body>, <title></title>, <link></link> Va mot số thẻ không nên chứa như: <style></style>, <script></script>

<big> </big> In chữ lớn hơn bình thường

<small> </small> In chữ nhỏ hơn bình thường

 Định dạnh chỉ số trên

<sub> <sub> Dinh dạng chỉ số dưới

<fone> </fone> Chọn kiểu phông chữ

17

<B><I>Chit in dam va nghiéng</I></B><BR>

<U><B>Chit in dém và được gạch chân</B></U><BR>

<I<U>Chữ in nghiêng và được gạch chân</I></U>

</BODY>

</HTML>

Két qua hién thi

18

Chữ được gach chan

Chat in dam va nghieng

Chit in dam va duoc gach chan

Chitin nghiéng va dugc gach chan

BỊ

fF | EE My Computer ⁄

b Can lé van ban trong trang web

Trong trình bày trang web luôn luôn phải chú ý đến việc căn lề các văn bản đê

trang website có được bố cục đẹp Một số các thẻ định dạng đều có thuộc tính tham

số align cho phép bạn căn lề các văn bản năm trong phạm vi giới hạn của các thẻ

định dạnh đó

Giá trị của thuộc tính align có bốn giá trị: center/justify/lefright

- _ Center: Căn đoạn văn bản ra giữa

- Justify: Can doan van ban sang déu 2 bén

- Left: Can doan van ban sang bén trai

- Right: Can doan van ban sang bén phai

World Wide Web còn viết tắt là WWW, là một dịch vụ Internet, được xây dựng trên

một tập các giao thức thông dụng, nó cho phép cấu hình các máy tính server theo một cách đặc biệt đề phân phối các bản tin trên mạng theo một cách thức chuẩn

| Bie Edt View Bo Favoles Help [

| ‹ * 6 Beck Forverd Stop Refresh Home đ\ | Search Favorites 6G History (3 Chan

4

World Wide Web cén viết tất là WWW, là một dịch vu Internet, được xây

dựng trên rnột tập các giao thức thông dụng, nó eho phép cấu hình cấc mấy

tính server theo rnột cách đặc biệt để phân phối các bắn tin trên mạng theo

một cách thức chuẩn

gy

Ngoài ra chúng ta có thẻ CENTER để căn giữa trang một số văn bản

Cú pháp: <CENTER>Van ban se duoc can giua trang</CENTER>

Thời gian trôi qua mau chỉ còn những kỷ niệm<BR>

Kỷ niệm thân yêu ơi sẽ còn nhớ mãi tiếng thầy cô<BR>

20

Bạn bè mến thương ơi sẽ còn nhớ mãi lúc giận hờn<BR>

Dé réi mai chia xa lòng chợt dâng niềm thiết tha<BR>

Nhớ bạn bè, nhớ mái trường xua <BR>

Z Căn giữa trang - Microsoft Internet Explorer

| Bile Edt View Bo Favorites Help E

Mong ước kỷ niệm xưa

Thời gian trôi qua rnau chỉ còn những kỷ niệm

Kỷ niệm thân yêu ơi sẽ còn nhớ rãi tiếng thay cô

Ban bè mến thưng ơi sẽ còn nhớ rnãi lúc giận hờn

Để rồi mai chia xa lòng chợt dang niém thiết tha

Thớ bạn bè, nhớ rnấi trường xưa

My Computer — ¿

c Các ký tự đặc biệt

Trong ngôn ngữ HTML, một số ký tự đặc biệt bạn không thể gõ từ bàn phím Ví

dụ nếu chỉ gõ khoảng cách giữa các từ là một ký tự khoảng trắng hay nhiều ký tự khoảng trắng thì kết quả hiển thị lên trình duyệt là như nhau Vì vậy, nếu bạn muốn

có nhiều khoảng trắng liên tục thì phải thực hiện gọi mã HTML cho ký hiệu đặc

biệt Sau đây là bảng liệt kê một số ký hiệu đặc biệt thường dùng:

d Sứ dụng màu sắc trong thiết kế trang web

Một màu sắc được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh

lá cây (Green), Xanh nước biển (Blue) Trong HTML một giá trị màu là một số

nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau:

#RRGGBB trong đó:

RR: Giá trị màu đỏ

GG: Giá trị màu xanh lá cây

BB: Là giá trị màu xanh nước biển

Bảng màu cơ bản

| frén mau Trị Tên màu Ì | oH

Black Den #000000 mg Olive Nau vang #808000 Lm

Red Đỏ #FFoooo mm Teal Nau sam #008080 [ta]

Blue Xanh #0000FF t=] Maroon Nau #800000 [==] Navy X.Dam #000800 Gray | Xam | #808080 m¬ Lime V.Chanh #FFFFOO = Fuchsia | Héng | #FFOOFF =¬ White T ring, #FFFFFE White Green La #008000 [=]

Rurple D.Tia | #800080 EBmại Siwr | Bạc Í zcococo sư Yellow Vàng | 4#FFFFOO = Aqua Ngọc #00FFFF | _Ị_

Có thể sử dụng các giá trị màu nói trên để quy định màu trữ , màu nền cho

trang web Cú pháp đầy đủ của thẻ BODY cho phép ta đặt ảnh nền , màu nền , màu

chữ, màu văn bản siêu liên kết, hay đặt lề cho văn bản

Alink Chỉ định màu của văn bản siêu liên kêt đang đang chon Viink Chi định màu của văn bản siêu liên kêt đã từng mở

Background Chỉ định địa chỉ của ảnh dùng làm nên

Bgcolor Chỉ định màu nên

Text Chỉ định màu của văn bản trong tài liệu

Topmargin Lê trên

Rightmargin Lê phải

Leftmargin Lé trai

23

Text color: YELLOW<BR>

Background color: ROYALBLUE

</B>

</BODY>

Két qua hién thi:

Trong ví dụ này, chúng ta sẽ sử dụng tệp ảnh bgroundl gi:

để làm nền cho trang Web của mình

Vào khoảng thời gian World Wide Web ra đời ở Phòng thí nghiệm Vật lý hạt tại

Thuy; Sĩ thì một công ty đóng tại California, có tên gọi Sun Microsystems, cting lao

vào cuộc phiêu lưu với công nghệ mới của họ Mặc du được tiễn hành riêng và với

những mục đích hoàn toàn khác nhau, World Wide Web và Java của Sun đã sát cánh bên nhau trong gần bốn năm sau, và cùng tạo nên một sự hứa hẹn về một cuộc

cách mạng tin học thứ hai: Web tương tác thực

</BODY>

</HTML>

Két qua hién thi

25

Đặt ảnh nền cho trang Web - Microsoft Internet Explorer

| Eile Ect View Go Favorites Help

ees B 8512 1211122) Stop ‘Refresh Home Search Favorites Hi Qa

& Ễ icp

Java va World Wide Web

'Vào khoảng thời gian World Wide Web ra đời ở Phòng thí nghiệm

Vat ly hat tại Thuy Sĩ thì một sông ty đóng tại California, có tên gọi

Sun Mioerosysterns, cũng lao vào cuộc phiêu lưu với công nghệ rnới

của họ Mặc dù được tiến hành riêng và với những rnục đích hoàn

toần khác nhau, World W ide Web và Java của Sun đã sát cánh bên

nhau trong gần bốn năm sau, và cùng tạo nền một sự hứa hẹn về

một cuộc cách rnang tin học thứ hai: Web tương tấc thực

AB My Computes — ¿

e Chọn kiếu chữ cho văn bản

Để có được một trang Web đẹp ngoài các công việc như thiết kế bố cục, trang trí

màu sắc, hình ảnh, thì việc lựa chọn các kiểu chữ phù hợp cho từng nội dung văn

bản cần trình bày là rất quan trọng Đề chọn phông chữ hiền thị cho một văn bản

bạn có thể sử dụng thẻ FONT (tuy nhiên để trình duyệt có thể hiển thị đúng phông

chữ quy định thì yêu cầu hệ thống phải được cài đặt phông chữ đó)

Font-name: Là tên của fone chữ

Color: Là màu của chữ

N: Kích thước của fone chữ

26

<FONT FACE=" Arial" COLOR=#0000FF SIZE=4>

Day la phéng chit VnArial

</FONT>

</P>

</BODY>

</HTML>

Két qua hién thi:

“& Chon phéng chit - Microsoft Internet Explorer

Day 1a phéng chit VnTime

Đây là phông chữ VnArial

27

{ Khái niệm văn bản siêu liên kết

Van ban siêu liên kết hay còn gọi là siêu văn bản là một từ, một cụm từ hay một

câu trên trang Web được dùng để liên kết tới một trang Web khác Khi chúng ta nhắn chuột lên một siêu văn bản, lập tức trình duyệt Web sẽ cho mở trang Web được liên kêt với siêu văn bản đó Thông thường các siêu văn bản sẽ có màu sắc phân biệt với các văn bản bình thường (chúng ta có thê chỉ định màu sắc này) va

được gạch chân, khi con chuột di chuyển trên một siêu văn bản nó sẽ có hình dạng

một bàn tay

Siêu liên két — Hyperlink — là mối liên kết giữa hai phần tử thông tin trong một siêu

văn bản Có 3 loại siêu liên kết:

Liên kết trong (Internal link): liên kết

các phần tử thông tin trong cùng một

tài liệu

Liên kết ngoài (External link): liên kết

đến một tài liệu khác, tài liệu được liên

kết tới có thể nằm trong cùng một

Website hoặc liên kết ra Website khác

Liên kết có thể thực thi được

(Executable): liên kết gọi thực thi một

chương trình hoặc một đoạn mã lệnh

Liên kết này cho phép truy xuất đến cơ

Đôi khi nội dung trang Web qua dài, chiếm nhiều trang màn hình, nhưng các

phần nội dung lại có mi liên hệ chặt chẽ Khi đó ta cần đặt các liên kết để khi cần

người dùng có thể click chọn phần nội dung họ quan tâm mà không cần phải kéo

thanh trượt để tìm kiếm đoạn đó

Để thực hiện điều này, trước tiên cần định nghĩa vị trí đích — nơi sẽ được liên kết

dén, ta sir dung thé <a> </a> theo cú pháp:

bên dưới

@ Vidy 1-3-1- Mozilla Firefox —_—— = | © jet

5 Edit View History Bookmarks Tools Help

em Most Visited {> Getting Started

1 ki: 4 con=- # C6 Ed Ferns: IB imager: @ formations B Miscellaneous: 7

| Tim hiéu về siêu liên kết

| Siêu liên kết — Hyperlink — là mối liên kết giữa hai phan tử thông tin trong một siêu văn

bản Có 3 loại siêu liên kết:

|

| a Liên kết tr internal link’

b Lién két ngoai (External oài (External link link)

c Liên kết có thê thực thi được (Executable) thê thực thi được (Executable)

<p align="center"><font color="viclet" size="6"><a

name="dautrang">Tìm hiểu về siêu liên kết</a></#ont></p>

<p align="Justify">

Siêu 1ién két - Hyperlink - 1a méi liên kết giữa hai phan

tử thông tin trong một siêu văn bản Có 3 loại siêu liên

<p align="justify"><a name="1L">Liên kết trong (Tnternal

link):</a> liên kết các phần tử thông tín trong cùng một tải

liệu.</p>

Hinh ảnh mính họa liên kết trong: <br>

<img src="hinhanh/lien ket trong.png">

<p align="justify"><a name="EL">Lién két ngodi (External link) :</a> lién két in một tài liệu khác, tài liệu được liên

kêt tới có thể nằm trong cùng một Website hoặc liên kết ra

Website khác.</p>

Hình ảnh minh họa liên kết ngoài: <br>

<img src="hinhanh/lien ket ngoai.png">

<p align="justify"><a name="EX">Lién k&t cé thé thye thi

được (Executable): </a>liên kết gọi thực thi một chương trình

hoặc một đoạn mã lệnh Liên kết này cho phép truy xuất đến cơ

sở đữ liệu.</p>

Hinh anh minh hoa liên kêt có thể thực thi được: <br>

<img sre="hinhanh/lien ket co the thuc thi.png">

<a href="#dautrang">vé déu trang</a>

URL có thể là địa chỉ tương đối hoặc tuyệt đối, có thể là đường dẫn đến một tập

tin HTML khác trong cùng một Website hay địa chỉ của một Website khác

30

Target là thuộc tính quy định cách mở liên kết Mặc định là mở trên chính trang

hiện hành _parent /_ seft Nếu bạn muốn hiển thị nội dung sắp được liên kết đến

trong một khung nào đó (định nghĩa khung sẽ được nói rõ ở phần sau) thì hãy đặt target chính bằng tên khung

<a href="Vidul-2-1.htm1l">Ví dụ thẻ div</a> <br>

<a href="vidul-2-2.htm1">Ví dụ thẻ p</a><br>

<a href="vidul-2-3.html">Ví dụ các thẻ Heading</a><br>

<a href="vidui-2-4.htm1">Ví dụ các thẻ định dạng

chữ</a><br>

<a href="vidul-2-5.html">Vi dụ thé marquee</a><br>

<a href="vidul-2-6.htmi">Vi dy thé ul</a><br>

<a href="vidul-2-7.html">Vi dy thé ol</a><br>

<a href="vidul-2-8.html">vVi dy thé img</a><br>

<a href="vidul-2-9.html">Vi dy thé bgsound va

embed</a><br>

<a href="vidul-3-1.html">Vi dy lién x&t trong</a><br>

<a href="vidul-3-2.html">Vi dy liên kết ngoài</a><br>

Danh sách liên kết Website:<br>

<a href="http://google.com">Tìm kiêm với google</a><br>

<a href="http://tvu.edu.vn">Website trường Đại hoc Tra

@ Vi dy 1-3-2 - Mozilla Firefox neon x |

File Edit View History Bookmarks Tools Help

[E)Vidu1-3-2 + s— _ `

© ˆ` file///D:/TLGD_TKWeb/vidu1-3-2.html C || P = Search Resuits P || |, „

[2 Most Visited £7) Getting Started

@ disabley b Coolies- Z CSS* [Ä Forms> Gi Images* @ Information [ij Miscellaneous~ Outline!

Ví dụ về liên kêt ngoài

Tìm kiểm với google

Website trường Đại học Tra Vinh

g Địa chỉ tương đối

URL được trình bày ở trên là URL tuyệt đối Ngoài ra còn có URL tương đối hay còn gọi là URL không đầy đủ Địa chỉ tương đối sử dụng sự khác biệt tương đối

giữa văn bản hiện thời và văn bản cần tham chiếu tới Các thành phần trong URL

được ngăn cách bằng ký tự ngăn cách (ký tự gạch chéo /) Để tạo ra URL tương đối, đầu tiên phải sử dụng ký tự ngăn cách URL đầy đủ hiện tại sẽ được sử dụng để tạo nên URL đầy đủ mới Nguyên tắc là các thành phần bên trái dấu ngăn cách của URL hiện tại được giữ nguyên, các thành phần bên phải được thay thế bằng thành phần URL tương đối Chú ý rằng trình duyệt không gửi URL tương đối, nó bổ sung

vào URL cơ sở được xác định trước thành phần URL tương đối xác định sau thuộc

tính href= Ký tự đầu tiên sau dấu bằng sẽ xác định các thành phần nào của URL

hiện tại sẽ tham gia để tạo nên URL mới.

Vi du, néu URL day đủ 1a: http://it-department vnuh.edu vn/HTML/index.htm thi:

- Dau hai chấm (:) chỉ dịch vụ giữ nguyên nhưng thay đổi phần còn lại Ví dụ

1⁄/www.fpt.com/ sẽ tải trang chủ của máy phục vụ www.fpt.com với cùng dịch vụ http

- Dấu gạch chéo (/) chỉ dịch vụ và máy phục vụ giữ nguyên nhưng toàn bộ đường

dẫn thay đổi Ví dụ /Javascript/index.htm sẽ tải file index.htm của thư mục

Javascript trên máy phục vụ www.it-department.vnuh.edu.vn

- Không có dấu phân cách chỉ có tên file là thay đổi Ví dụ index1.htm sẽ tải file

indexI.htm ở trong thư mục HTML của máy phục vụ www.it-

thư mục cha của thư mục hiện tại)

URL co s6 có thể được xác định bằng thẻ <BASE>

¡ Vẽ đường thẳng năm ngang

Để vẽ một đường thang nam ngang phân chia các phần trong một trang Web, chúng ta sử dụng thẻ HR

Align Căn lề

Color Đặt màu cho đường thăng

Noshade Không có bóng

Size Độ dày của đường thăng

<HEAD><TITLE>Vẽ đường thắng</TITLE><HEAD>

<BODY BGCOLOR="WHITE" TEXT="NAVY">

<H1>Web Browser</H1|>

<HR ALIGN="LEFT" COLOR="RED" SIZE=2 WIDTH="80%">

<P>

Web Browser là chương trình có khả năng thực hiện một số chức năng cơ bản nào

đó, chẳng hạn như tìm kiếm và mở các trang Web, hiển thị các trang Web theo

Web Browser la chung trinh 06 kha nang thyc hign mt eố ehứo răng og ban

nao 46, chang han nhy tim kiém va m& cdc trang Web, hién thi c4c tang Web

b.Ề Đưa âm thanh vào một tài liệu HTML

Âm thanh trên Web cũng được phân làm hai loại: âm thanh nền cho Web và âm thanh được mở trên Web như một trình hát nhạc

Đối với âm thanh nền hay còn gọi là nhạc nền, khi trang Web vừa được tải lên sẽ

xuất hiện âm thanh chạy ngầm bên trong Bạn cần khai báo thẻ này trong phần

<head> của trang Web với tên thẻ là <bgsound>, đây là một thẻ đơn Tuy nhiên không phải trình duyệt nào cũng hỗ trợ loại thẻ HTML này

<bgsound src=“URL” loop=“n”>

Trong đó:

URL là đường dẫn đến tập tin làm âm thanh nền cho Web, file âm thanh có đuôi:

* mepg, *.avi, *.mov, *.au, *.mid, *.mp3

n là số lần lặp lại của file âm thanh, n = -l nếu muốn lặp lại vô tận

Trường hợp bạn muốn mở tập tin âm thanh trên Web với một trình hát nhạc, bạn có thể sử dụng cặp thẻ <embed> </embed>

Trong đó:

URL là đường dẫn đến tập tin âm thanh

Autostart: ty chinh chế độ phát tự động (true) hay chờ nhắn nút play (false)

Loop: thiết lập chế độ tự động phát lại (true) hay không phát lại (false)

Hidden: cho phép ẩn chương trình hát nhạc (true) hay hiển thị trình hát nhạc trên

Web (false), mac dinh hidden = “false” Đối với một số trình duyệt không hỗ trợ thẻ

<bgsound> bạn có thể cho phát nhạc nền bằng cách cho chế độ hidden = “true” Width va height la hai thuộc tính chỉ định độ rộng và chiều cao của chương trình hát

nhạc trên Web

Ngoài ra, nếu bạn muốn chèn các tập tin flash hoặc phim ảnh lên Web, thẻ

<embed> vẫn có thể thực hiện tốt Tuy nhiên, do các tập tin này có những thông số

đặc biệt và tùy theo ý định hiển thị, bạn cần kết hợp thém cap thé <object>

</object> dé được hỗ trợ thêm nhiều thuộc tính hiển thị hơn

Ví dụ 1-2-9: chèn âm thanh bằng <bgsound> và <embed>

<embed src="AMTHANH/nhac2.mp3" autostart="false"

loop="false" width="200" height="100" ></embed>

</body>

</html>

Trinh duyét Internet Explorer hỗ trợ tốt cả <hgsound> và <embed> Mozilla Firefox

chỉ hỗ trợ <embeá>

36

File Edit View Favorites Tools Help

x +] 2) © O1BOX =| Elrsesee [jnwe Bh vourube canes » EY

ill tal Zan

c Chén m6t hinh anh vao tai ligu HTML

Hình ảnh trên Web được phân làm hai dang Dạng thứ nhất là hình ảnh làm nền, tức là chúng ta có thể viết chữ lên hình Ở dạng này, chúng ta có thể chèn hình trong

thuộc tính background của một số thẻ hỗ trợ ảnh nền như <body>, <table>, <td>,

Dạng thứ hai, hình ảnh được xem như một đối tượng trên Web, nó chiếm một vị trí trên Web như một nội dung của trang Trong trường hợp này, chúng ta dùng thẻ

<img>, đây là một thẻ HTML đơn với cú pháp như sau:

URL: là đường dẫn đến tập tin hình ảnh cần đưa lên Web

Lefi/right/top/middle/bottom: canh lề cho ảnh; absbottom/absmiddle/texttop: canh

lề cho văn bản xung quanh hình.Chuỗi trong title sẽ hiển thị khi đưa con trỏ chuột vào hình

S6/phan trim trong width và height chỉ định độ lớn của ảnh tương ứng theo chiều

rộng và chiều cao Nếu bỏ qua hai thuộc tính này, trình duyệt sẽ hiển thị hình ảnh

với kích thước thật của ảnh

Chuỗi trong alt sẽ được hiền thị thay cho hình khi hình không được hỗ trợ hiển thị

lên Web

37

Nếu muốn hình ảnh có đường viền, bạn nhập n là một số nguyên đương Mặc định n

là 0, nghĩa là ảnh không có đường viễn

Website hoa viên cây cảnh

<img align="absmiddle" src="hinhanh/hoasu.jpg"

border="3">

Website hoa viên cây cảnh

<img align="top" src="hinhanh/hoasu.jpg" title="hoa st

Thé <img> chén được các tập tin ảnh dạng *.jpg, *.jpeg, *.gif, *.png

Trong hình, lần chèn ảnh thứ 3, ảnh có phần mở rộng là tif không được hỗ trợ hiển thị nên dòng chữ trong thuộc tính alt sẽ được hiển thị thay thế ảnh được gọi

trong sre Trong trường hợp bạn gọi một hình ảnh không được hỗ trợ hiển thị bởi

trình duyệt, nhưng không sử dụng thuộc tính alt thì tại vị trí gọi hình, sẽ hiển thị

dạng file bị lỗi:

@ Vidy 1-2-8 - Mozilla Firefox ——

File Edit View History Bookmarks Tools Help

Website hoa viên cây Website hoa viên cây cảnh

ÍE! Í tập tin anh * tif =| Hinh 1-2-8: Trang Vidul-2-8.html

38

7 CÁC THẺ ĐỊNH DẠNG BẢNG BIÊU

a Tạo bảng

Khi bạn muốn thiết kế bảng dữ liệu trên trang Wrb, bạn cần phải khai báo thẻ

<table> Sau khi khai báo thẻ này, bạn phải khai báo các thẻ dòng <tr> và thẻ cột

<td> hoặc <th> Trong đó, <th> sẽ xác định nội dung bên trong nó là tiêu đề, tức là nội dung mặc định được ¡in đậm và canh giữa

Thuộc tính trong thẻ bảng <table>

Khi thiết lập một bảng biểu trên Web, bạn cần chú ý đến các thuộc tính sau đây:

39

cellpadding Khoảng cách từ nội dung trong ô đến đường viễn

cellspacing Khoảng cách giữa các ô trong bảng

align Canh lề cho bảng (center, left, right)

width Xác định chiều rộng cho toàn bảng,

Xác định chiều cao cho bảng Ttuy nhiên khi thiết kế bảng, bạn chỉ cần

height quan tâm đến chiều rộng chứ không quan tâm đến chiều cao, bởi vì

chiều cao của bảng phụ thuộc vào dữ liệu bạn có

background Chèn ảnh nên cho bảng

bgcolor Tô màu nền cho bảng

Tô màu đường viễn cho bảng Lưu ý một số trình duyệt không hỗ trợ

a hiển thị màu viễn

id id nhận đạng dùng để phân biệt các bảng dữ liệu trên cùng một trang

BECO Tô màu nền cho dòng Lưu ý, trong dòng chỉ có thể tô màu nền chứ

8 không thê gọi ảnh nên cho đòng

a Tô mau đường viên dòng Lưu ý một sô trình duyệt không hồ trợ hiên

background Goi anh nén cho 6

bgcolor T6 mau nền cho 6

Tô màu đường viền cho 6 Lưu ý một số trình duyệt không hỗ trợ hiển

bordercolor thi ¡ màu viên màu viề

colspan Gôm cột Ta có colspan= “n” với n là số cột muốn thành một ô

rowspan Gém hang Ta có rowspan= “n” với n là số đòng muốn thành một ô

id id nhận dạng dé phân biệt giữa các ô

width Xác định chiều rộng của ô

Xác định chiều cao của ô Tuy nhiên, đối với ô cột thì ta thường ít

height quan tâm đến chiều cao vì chiều cao của ô / cột chính bằng chiều cao

41