Bài giảng Thiết kế Web: Chương 2 - Từ Thị Xuân Hiền

Siêu liên kết (link) là một thuật ngữ rất phổ biến trong ngôn ngữ máy tính hiện nay. Siêu liên kết cho phép người truy cập có thể duyệt từ trang web này đến trang web khác. Trong chương này chúng ta sẽ cùng tìm hiểu về siêu liên kết, cách tạo siêu liên kết và cách tạo hình ảnh trên trang web. Mời các bạn cùng tham khảo.

Trang 1

SIÊU LIÊN K THÌNH NH Ế Ả

CH ƯƠ NG II

Trang 2

I SIÊU LIÊN K T SIÊU LIÊN K T Ế Ế

1 GI I THI U SIÊU LIÊN K TGI I THI U SIÊU LIÊN K TỚ Ớ Ệ Ệ Ế Ế

Siêu liên k t cho phép ngế ười truy c p có th duy t t ậ ể ệ ừ

Siêu liên k t cho phép ngế ười truy c p có th duy t t ậ ể ệ ừtrang web này đ n trang web khác. M t liên k t g m ế ộ ế ồ

trang web này đ n trang web khác. M t liên k t g m ế ộ ế ồ

film, m t hình nh ho c m t h p tho i đ g i mail…ộ ả ặ ộ ộ ạ ể ữ

 Nhãn: có th là dòng văn b n ho c hình nh đ ng: có th là dòng văn b n ho c hình nh đ ngểể ảả ặặ ảả ểể ườười i

dùng click vào khi mu n truy c p đ n liên k t, n u ố ậ ế ế ế

dùng click vào khi mu n truy c p đ n liên k t, n u ố ậ ế ế ếnhãn là văn b n thì thả ường được g ch dạ ưới

nhãn là văn b n thì thả ường được g ch dạ ưới

 Đích đ n đ n ế ế (target): xác đ nh v trí đ ngu n hi n th (target): xác đ nh v trí đ ngu n hi n th ịị ịị ểể ồồ ểể ịị

Trang 3

2 CÁC LO I LIÊN K TCÁC LO I LIÊN K TẠ Ạ Ế Ế

 Internal Hyperlink:(Liên k t trong) là các liên k t v i :(Liên k t trong) là các liên k t v i ếế ế ớế ớ

các ph n trong cùng m t tài li u ho c liên k t các ầ ộ ệ ặ ế

các ph n trong cùng m t tài li u ho c liên k t các ầ ộ ệ ặ ếtrang trong cùng m t web site.ộ

URL: Đ a ch c a trang liên k tị ỉ ủ ế

Nhãn: Có th là dòng text ho c hình nh ho c m t ể ặ ả ặ ộ

button

Trang 5

 Dùng URL t URL t ươ ươ ng đ i ng đ i ố ố đ liên k t đ n các trang trong đ liên k t đ n các trang trong ểể ế ếế ếcùng m t website ộ

Trang 6

 Dùng URL tuy t đ i URL tuy t đ i ệ ố ệ ố đ liên k t đ n các trang trong đ liên k t đ n các trang trong ểể ế ếế ế

Trang 7

4 LIÊN K T Đ N CÁC PH N TRONG CÙNG 1 TRANG LIÊN K T Đ N CÁC PH N TRONG CÙNG 1 TRANGẾ Ế Ế Ế Ầ Ầ

N u n i dung c a trang quá dài thì nên t o các Bookmark ế ộ ủ ạ

đ khi xem, ngể ười dùng click vào bookmark đ nh y đ n ể ả ế

m t ph n c th nào đó trên chính trang đó: g m 2 bộ ầ ụ ể ồ ước

 T o BookMarkT o BookMarkạ ạ :

<A name=”tên Bookmark”> Tiêu đ </A> N i dung ề ộ

ph n văn b nầ ả

 T o liên k t đ n BookmarkT o liên k t đ n Bookmarkạ ạ ế ế ế ế :

<A Href =”#tên Bookmark”>Nhãn c a liên k t</A>ủ ế

Trang 8

Internet là m t m ng c a các m ng. Nghĩa là, các m ng máy tính đ ộ ạ ủ ạ ạ ượ c liên k t ế

v i các m ng khác, n i các n ớ ạ ố ướ c và ngày nay là toàn c u. Giao th c truy n thông ầ ứ ề

là TCP/IP cung c p liên k t v i t t c các máy tính trên th gi i ấ ế ớ ấ ả ế ớ

<A name = 'HTML'>Introduction to HTML</A>

Ngôn ng đánh d u siêu văn b n là ngôn ng chu n mà web s d ng đ t o và ữ ấ ả ữ ẩ ử ụ ể ạ

nh n ra tài li u. M c dù không ph i là m t t p con c a ngôn ng nâng c p tiêu ậ ệ ặ ả ộ ậ ủ ữ ấ

chu n t ng quát (SGML), ngôn ng đánh d u siêu văn b n cũng có liên quan v i ẩ ổ ữ ấ ả ớ

SGML. SGML là m t ph ộ ươ ng pháp trình bày các ngôn ng đ nh d ng tài li u. ữ ị ạ ệ

HTML là ngôn ng đánh d u đ ữ ấ ượ ử ụ c s d ng đ t o tài li u HTML. Các h ể ạ ệ ướ ng

d n ch rõ m t trang web nên đ ẫ ỉ ộ ượ c hi n th nh th nào trong trình duy t ể ị ư ế ệ

</BODY>

</HTML>

Trang 9

5 LIÊN K T V I BOOKMARK C A TRANG KHÁC LIÊN K T V I BOOKMARK C A TRANG KHÁCẾ Ế Ớ Ớ Ủ Ủ

Trang 10

6 LIÊN K T Đ N H P THLIÊN K T Đ N H P THẾ Ế Ế Ế Ộ Ộ Ư Ư

Cú pháp:

<A href=”mailto:đ a ch Email”>Nhãn</A>ị ỉ

Trang 11

 Nên t o chú thích cho liên k t giúp ngNên t o chú thích cho liên k t giúp ngạạ ếế ườ ọườ ọi đ c bi t i đ c bi t ếế

 Khi link không ch t i trang html mà t i m t tài li u Khi link không ch t i trang html mà t i m t tài li u ỉ ớỉ ớ ớớ ộộ ệệ

nh Word, Excel, PDF thì b n nên t o bi u tư ạ ạ ể ượng

c a nó bên c nh link.ủ ạ

 Đ ng t o link t i trang đang xây d ng.Đ ng t o link t i trang đang xây d ng.ừừ ạạ ớớ ựự

Trang 12

II HÌNH NH TRÊN TRANG WEB HÌNH NH TRÊN TRANG WEB Ả Ả

1 Các lo i nh :Các lo i nh :ạ ả ạ ả

 Ả Ảnh .Gifnh .Gif (Graphics Interchange Format): đ (Graphics Interchange Format): đượ ửượ ửc s c s

d ng ph bi n nh t trong các tài li u HTML, d ụ ổ ế ấ ệ ễ

d ng ph bi n nh t trong các tài li u HTML, d ụ ổ ế ấ ệ ễchuy n t i, ngay c các k t n i s d ng MODEM t c ể ả ả ế ố ử ụ ố

chuy n t i, ngay c các k t n i s d ng MODEM t c ể ả ả ế ố ử ụ ố

đ ch m, h tr 256 màu GIF. Các file GIF độ ậ ổ ợ ược đ nh ị

d ng không ph thu c ph n n nạ ụ ộ ầ ề

 Ả Ảnh JPEG nh JPEG (Joint PhotoGraphic Expert Group) có

ph n m r ng .JPG, là lo i nh nén m t thông tin, ầ ở ộ ạ ả ấ

ph n m r ng .JPG, là lo i nh nén m t thông tin, ầ ở ộ ạ ả ấnghĩa là nh sau khi b nén không gi ng nh nh g c. ả ị ố ư ả ố

nghĩa là nh sau khi b nén không gi ng nh nh g c. ả ị ố ư ả ốTuy nhiên, trong quá trình phát l i thì nh cũng rõ g n ạ ả ầ

Tuy nhiên, trong quá trình phát l i thì nh cũng rõ g n ạ ả ầ

nh nh g c. JPEG h tr h n 16 tri u màu và ư ả ố ỗ ợ ơ ệ

thường đượ ử ục s d ng cho các nh có màu th c.ả ự

 Ả Ảnh PNG nh PNG (Portable Network Graphics) nén không

m t d li uấ ữ ệ

Trang 13

2 Chèn hình nhChèn hình nhả ả

Cú pháp:

URL: ththườường s d ng đ a ch tng s d ng đ a ch tử ụử ụ ịị ỉ ươỉ ương đ i ng đ i ốố

– N u hình ch a trong th m c N u hình ch a trong th m c ếế ứứ ư ụư ụ image và t p tin và t p tin ậậ

Trang 14

</body>

</html>

Trang 15

3 Các thu c tính c a nh:Các thu c tính c a nh:ộ ộ ủ ả ủ ả

a) Dàn văn b n quanh hình nh: Dàn văn b n quanh hình nh: ả ả ả ả

Trang 16

b) Ch n văn b n bao quanh hình Ch n văn b n bao quanh hình ặ ặ ả ả :

Canh l khi dàn văn b n xung quanh m t nh s ề ả ộ ả ẽ

Canh l khi dàn văn b n xung quanh m t nh s ề ả ộ ả ẽtác đ ng đ n t t c các văn b n sau đó n u không ộ ế ấ ả ả ế

tác đ ng đ n t t c các văn b n sau đó n u không ộ ế ấ ả ả ếchèn vào m t dòng k đ c bi t. Thu c tính ộ ẽ ặ ệ ộ

chèn vào m t dòng k đ c bi t. Thu c tính ộ ẽ ặ ệ ộCLEAR trong tag BR làm cho văn b n không b t ả ắ

CLEAR trong tag BR làm cho văn b n không b t ả ắ

đ u n u l c th không b xóa đi (nghĩa là t i ầ ế ề ụ ể ị ạ

c nh dạ ướ ủ ải c a nh)

 Cú pháp :

– : Ngăn ch n văn b n dàn bên : Ngăn ch n văn b n dàn bên ặ ặ ả ả

l ph i c a nh ề ả ủ ả

l ph i c a nh ề ả ủ ả – : Ngăn ch n văn b n dàn bên : Ngăn ch n văn b n dàn bên ặ ặ ả ả

l trái c a nh ề ủ ả

l trái c a nh ề ủ ả – : Ngăn ch n văn b n dàn hai : Ngăn ch n văn b n dàn hai ặ ặ ả ả

bên l c a nh ề ủ ả

Trang 17

c) Thêm kho ng tr ng xung quanh nh Thêm kho ng tr ng xung quanh nh ả ả ố ố ả ả

N u không mu n văn b n dàn xung quanh l trái c a ế ố ả ề ủ

nh thì ta có th thêm kho ng tr ng xung quanh nh

ảnh thì ta có th thêm kho ng tr ng xung quanh nhể ả ắ ả

 Cú pháp:

– HSPACE=n: Kho ng tr ng đKho ng tr ng đảả ắắ ượược tính b ng c tính b ng ằằ

pixel s thêm vào c bên ph i và bên trái c a ẽ ả ả ủ

pixel s thêm vào c bên ph i và bên trái c a ẽ ả ả ủnh

ảnh

ả

– VSPACE=m: Kho ng tr ng đKho ng tr ng đảả ắắ ượược tính b ng c tính b ng ằằ

pixel s thêm vào c bên trên và bên dẽ ả ướ ủi c a

pixel s thêm vào c bên trên và bên dẽ ả ướ ủi c a nh

ảnhả

Trang 18

d) Canh l cho nh: Canh l cho nh: ề ề ả ả Có th canh l cho nh so v i m t Có th canh l cho nh so v i m t ểể ềề ảả ớớ ộộ

mu n canh l so v i nhố ề ớ ả

– Direction: g m các giá tr : top, bottom, middle, Direction: g m các giá tr : top, bottom, middle, ồ ồ ị ị

texttop

Trang 19

 Dùng nh làm liên k t:Dùng nh làm liên k t:ả ả ế ế

 Có th dùng hình nh đ t o m t liên k t đ n m t trang Có th dùng hình nh đ t o m t liên k t đ n m t trang ểể ảả ể ạể ạ ộộ ế ếế ế ộộ

khác, ho c n u có m t nh l n, b n có th t o nh nh ặ ế ộ ả ớ ạ ể ạ ả ỏ

h n ho c m t bi u tơ ặ ộ ể ượng cho nó đ nó có th hi n th ể ể ể ị

h n ho c m t bi u tơ ặ ộ ể ượng cho nó đ nó có th hi n th ể ể ể ịnhanh chóng trên trang web, sau đó t o liên k t đ đ a ạ ế ể ư

nhanh chóng trên trang web, sau đó t o liên k t đ đ a ạ ế ể ư

người truy c p đ n nh có kích thậ ế ả ước th tậ

 Cú pháp:

 <A HREF=”Đ a ch trang liên k t”><A HREF=”Đ a ch trang liên k t”>ị ị ỉ ỉ ế ế

 <IMG SRC=URL Alt=”n i dung thay th ”>Nhãn<IMG SRC=URL Alt=”n i dung thay th ”>Nhãnộ ộ ế ế

 </A>

Trang 20

1 B n đ nh:B n đ nh:ả ả ồ ả ồ ả

 B n đ nh là m t nh trong trang web đB n đ nh là m t nh trong trang web đảả ồ ảồ ả ộ ảộ ả ượược chia ra làm c chia ra làm

nhi u vùng, m i vùng khi click vào s liên k t đ n m t ề ỗ ẽ ế ế ộ

Trang 21

 Trong đó:

Label: tên c a b n đ nh : tên c a b n đ nh ủ ủ ả ả ồ ả ồ ả

Type: hình d ng c a các vùng trên nh, g m các lo i: hình d ng c a các vùng trên nh, g m các lo i: ạ ạ ủ ủ ả ả ồ ồ ạ ạ

Rect: Vùng hình ch nh t ữ ậ

Circle: Vùng hình tròn

Poly: Vùng hình đa giác

Coords:to đ các đ nhc a hình :to đ các đ nhc a hình ạ ộ ạ ộ ỉ ỉ ủ ủ

Rect: (x1, y1, x2, y2) là to đ 2 đ nh chéo c a vùng hình CN ạ ộ ỉ ủ

Circle: (x, y, r) l n l ầ ượ t là to đ tâm và bán kính c a vùng hình ạ ộ ủ

tròn Poly: (x1, y1, x2, y2, x3, y3, …) là các đ nh c a vùng hình đa giác ỉ ủ

Poly: (x1, y1, x2, y2, x3, y3, …) là các đ nh c a vùng hình đa giác ỉ ủ

Trang 23

I SIÊU LIÊN K T SIÊU LIÊN K T Ế Ế

 Hình n n : Hình n n : ề ề

 Trong h u h t các trang web thTrong h u h t các trang web thầầ ếế ườường s d ng n n màu, ng s d ng n n màu, ử ụử ụ ềề

v i m c đích là làm n i b t n i dung trang đó. Tuy nhiên ớ ụ ổ ậ ộ

v i m c đích là làm n i b t n i dung trang đó. Tuy nhiên ớ ụ ổ ậ ộcũng có th s d ng hình nh đ làm n n b ng thu c ể ử ụ ả ể ề ằ ộ

cũng có th s d ng hình nh đ làm n n b ng thu c ể ử ụ ả ể ề ằ ộ

tính BACKGROUND c a th BODY.ủ ẻ

 <BODY BACKGROUND= “bgimage.gif”>

Định dạng
Số trang	23
Dung lượng	622,57 KB