Download
1 / 19
190 likes | 344 Views
CHƯƠNG II. SIÊU LIÊN KẾT-HÌNH ẢNH. I. 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ừ trang web này đến trang web khác . Một liên kết gồm 3 phần :
E N D
CHƯƠNG II SIÊU LIÊN KẾT-HÌNH ẢNH
I.SIÊU LIÊN KẾT • Siêuliênkếtchophépngườitruycậpcóthểduyệttừtrang web nàyđếntrang web khác. Mộtliênkếtgồm 3 phần: • Nguồn: chứanội dung hiểnthịkhingườidùngtruycậpđến, cóthểlàmộttrang web khác, mộtđoạn film, mộthìnhảnhhoặcmộthộpthoạiđểgữi mail… • Nhãn: cóthểlàdòngvănbảnhoặchìnhảnhđểngườidùng click vàokhimuốntruycậpđếnliênkết, nếunhãnlàvănbảnthìthườngđượcgạchdưới • Đíchđến (target): xácđịnhvịtríđểnguồnhiểnthị.
I. SIÊU LIÊN KẾT • CÁC LOẠI LIÊN KẾT • Internal Hyperlink:(Liênkếttrong) làcácliênkếtvớicácphầntrongcùngmộttàiliệuhoặcliênkếtcáctrangtrongcùngmột web site. • External Hyperlink (Liênkếtngoài) làcácliênkếtvớicáctrangtrên web site khác. • TẠO SIÊU LIÊN KẾT Cúpháp: <A HREF=”URL”> Nhãn </A> • URL: Địachỉcủatrangliênkết • Nhãn: Cóthểlàdòng text hoặchìnhảnhhoặcmột button
I. SIÊU LIÊN KẾT • DùngURL tươngđốiđểliênkếtđếncáctrangtrongcùngmột website Vídụ: <HTML> <HEAD> <TITLE> Using links</TITLE></HEAD> <BODY> <A HREF = “Page1.htm”> Open Page1 </A> </BODY> </HTML>
I. SIÊU LIÊN KẾT • DùngURL tuyệtđốiđểliênkếtđếncáctrangtrong website khác Vídụ: <html> <head><title>Link</title></head> <body> <A href="http://www.google.com">Trang Google</A> <br> <A href="http://www.yahoo.com">Trang Yahoo</A> </body> </html>
I. SIÊU LIÊN KẾT • LIÊN KẾT VỚI BOOKMARK CỦA TRANG KHÁC Cúpháp: <A href=”http://www.site.com/path/Page.htm#BookmarkName”> Vídụ: Trang main.htm <BODY> <A HREF = “C:\Doc1.htm#Internet”>Internet</A><br> <A HREF = “C:\Doc1.htm#HTML”>Introduction to HTML</A><br> </BODY>
II. HÌNH ẢNH TRÊN TRANG WEB • Liênkếtđếnhộpthư Cúpháp: <A href=”mailto:địa chỉ Email”>Nhãn</A> Vídụ: <html> <body> <A href='mailto:nguyenhoang@yahoo.com'>E-mail</A> </body> </html>
II. HÌNH ẢNH TRÊN TRANG WEB • Cácloạiảnh : • Ảnh .Gif (Graphics Interchange Format): đượcsửdụngphổbiếnnhấttrongcáctàiliệu HTML, dễchuyểntải, hổtrợ 256 màu GIF. Các file GIF đượcđịnhdạngkhôngphụthuộcphầnnền • Ảnh JPEG (Joint PhotoGraphic Expert Group) cóphầnmởrộng .JPG, làloạiảnhnénmấtthôngtin. Tuynhiên, trongquátrìnhphátlạithìảnhcũngrõgầnnhưảnhgốc. JPEG hỗtrợhơn 16 triệumàuvàthườngđượcsửdụngchocácảnhcómàuthực. • Ảnh PNG (Portable Network Graphics) nénkhôngmấtdữliệu
II. HÌNH ẢNH TRÊN TRANG WEB • Chènhìnhảnh Cúpháp: <IMG Src=URL > • URL: thườngsửdụngđịachỉtươngđối • Nếuhìnhchứatrongthưmụcimagevàtập tin .htmchứatrongthưmụchtml thìđịachỉcủahìnhchèncódạngSrc=“../image/hinh1.gif” • Nếuhìnhvàtập tin .html chứatrongcùngmộtthưmụcthìđịachỉhìnhchèncódạng: Src=“hinh1.gif”
II. HÌNH ẢNH TRÊN TRANG WEB Vídụ: <html> <head><title>Image</title></head> <body> <imgsrc="../image/Blue%20hills.jpg" width="150" height="150“ border=1> </body> </html>
II. HÌNH ẢNH TRÊN TRANG WEB • Cácthuộctínhcủaảnh: • Dànvănbảnquanhhìnhảnh: • <IMG SRC=URL Align= left> Nội dung vănbảnquanhhìnhảnh • Vídụ :hìnhnằmbêntráivănbản • <IMG SRC=URL Align= Right> Nội dung vănbảnquanhhìnhảnh • Vídụ:hìnhnằmbênphảivănbản
II. HÌNH ẢNH TRÊN TRANG WEB • Chặnvănbảnbaoquanhhình: • Canhlềkhidànvănbảnxungquanhmộtảnhsẽtácđộngđếntấtcảcácvănbảnsauđónếukhôngchènvàomộtdòngkẽđặcbiệt. Thuộctính CLEAR trong tag BR làmchovănbảnkhôngbắtđầunếulềcụthểkhôngbịxóađi (nghĩalàtạicạnhdướicủaảnh) • Cúpháp: • <BR CLEAR=Right> : Ngănchặnvănbảndànbênlềphảicủaảnh • <BR CLEAR=Left> : Ngănchặnvănbảndànbênlềtráicủaảnh • <BR CLEAR=All> : Ngănchặnvănbảndànhaibênlềcủaảnh
II. HÌNH ẢNH TRÊN TRANG WEB • Thêmkhoảngtrốngxungquanhảnh • Nếukhôngmuốnvănbảndànxungquanhlềtráicủaảnhthìtacóthểthêmkhoảngtrắngxungquanhảnh • Cúpháp: • <IMG SRC=URL HSPACE=n VSPACE=m> • HSPACE=n: Khoảngtrắngđượctínhbằng pixel sẽthêmvàocảbênphảivàbêntráicủaảnh • VSPACE=m: Khoảngtrắngđượctínhbằng pixel sẽthêmvàocảbêntrênvàbêndướicủaảnh
II. HÌNH ẢNH TRÊN TRANG WEB • Canhlềchoảnh: Cóthểcanhlềchoảnh so vớimộtdòngvănbảntrongmộtđọan Cúpháp: • <IMG SRC=URL ALIGN= “Direction”>Vănbảnmuốncanhlề so vớiảnh • Direction: gồmcácgiátrị: top, bottom, middle, texttop
II. HÌNH ẢNH TRÊN TRANG WEB • Dùngảnhlàmliênkết:Cóthểdùnghìnhảnhđểtạomộtliênkếtđếnmộttrangkhác, hoặcnếuảnhlớn, bạncóthểtạoảnhnhỏhơnhoặcmộtbiểutượngchonóđểnócóthểhiểnthịnhanhchóngtrêntrang web, sauđótạoliênkếtđểđưangườitruycậpđếnảnhcókíchthướcthật • Cúpháp: <A HREF=”Địachỉtrangliênkết”> <IMG SRC=URL Alt=”nội dung thaythế”>Nhãn </A>
II. HÌNH ẢNH TRÊN TRANG WEB • Bảnđồảnh: làmộtảnhtrongtrang web đượcchiaralàmnhiềuvùng, mỗivùngkhi click vàosẽliênkếtđếnmộtđịachỉ URL • Cáchtạo:Trướchếtphảichènvàotrangmộtảnhvàđặtnhãnchoảnh <IMG UseMap=”Label”> <Map Name=”Label”> <Area Shape= “type” coords=”x1,y1,x2,y2, …” href=”URL”> </Map>
II. HÌNH ẢNH TRÊN TRANG WEB Trongđó: • Label: têncủabảnđồảnh • Type:hìnhdạngcủacácvùngtrênảnh, gồmcácloại: • Rect: Vùnghìnhchữnhật • Circle: Vùnghìnhtròn • Poly: Vùnghìnhđagiác • Coords:toạđộcácđỉnhcủahình • Rect: (x1, y1, x2, y2) làtoạđộ 2 đỉnhchéocủavùnghình CN • Circle: (x, y, r) lầnlượtlàtoạđộtâmvàbánkínhcủavùnghìnhtròn • Poly: (x1, y1, x2, y2, x3, y3, …) làcácđỉnhcủavùnghìnhđagiác
II. HÌNH ẢNH TRÊN TRANG WEB Vídụ: <html> <head> <title>Image</title> </head> <body> <imgsrc="../image/Blue%20hills.jpg" width="150" height="150" border="0" usemap="#Map1"> <map name="Map1"> <area shape="rect" coords="73,3,149,66" href="B1.htm"> <area shape="poly" coords="152,81,71,75,62,109,97,123" href="B3.htm"> <area shape="circle" coords="37,32,27" href="b2.htm"> </map> </body> </html>
II. HÌNH ẢNH TRÊN TRANG WEB • Hìnhnền : Tronghầuhếtcáctrang web thườngsửdụngnềnmàu, vớimụcđíchlàlàmnổibậtnội dung trangđó. Tuynhiêncũngcóthểsửdụnghìnhảnhđểlàmnềnbằngthuộctính BACKGROUND củathẻ BODY. <BODY BACKGROUND= “bgimage.gif”>
