Bài giảng Thiết kế Web tĩnh - Phần 1: Ngôn ngữ HTML - Chương 2: Siêu liên kết, hình ảnh

 CHƯƠNG II 
SIÊU LIÊN KẾT - HÌNH ẢNH 
I. SIÊU LIÊN KẾT 
1. GIỚ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ừ 
 trang web này đến trang web khác. Một liên kết gồm 3 
 phần: 
  Nguồn: chứa nội dung hiển thị khi người dùng truy cập 
 đến, có thể là một trang web khác, một đoạn 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ười 
 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 
  Đích đến (target): xác định vị trí để nguồn hiển thị. 
2. CÁC LOẠI LIÊN KẾT 
  Internal Hyperlink:(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 
 trang trong cùng một web site. 
  External Hyperlink (Liên kết ngoài) là các liên kết với 
 các trang trên web site khác. 
3. TẠO SIÊU LIÊN KẾT 
  Cú pháp: 
 Nhãn 
 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 
 Internal and External links 
 - - - - - 
 - - 
- - - - - 
- - - - - - - 
 - - 
- - - - - 
- - - - - - - 
 - - 
 - - - - - - - - - - - - - - - 
 - - - - - - 
- - - - - - - - - - 
- - - - 
 Dùng URL tương đối để liên kết đến các trang trong cùng 
 một website 
Ví dụ: 
 Using links 
 Open Page1 
 Dùng URL tuyệt đối để liên kết đến các trang trong 
 website khác 
 Ví dụ: 
 Link 
 Trang Google 
 Trang Yahoo 
4. 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 BookMark: 
 Tiêu đề Nội dung 
 phần văn bản 
  Tạo liên kết đến Bookmark: 
 Nhãn của liên kết 
Ví dụ 
 Using htm links 
Internet 
Introduction to HTML 
Internet 
 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 
Introduction to HTML 
 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 
5. LIÊN KẾT VỚI BOOKMARK CỦA TRANG KHÁC 
Cú pháp: 
Ví dụ: Trang main.htm 
 Main document 
 Internet 
 Introduction to 
 HTML 
6. LIÊN KẾT ĐẾN HỘP THƯ 
 Cú pháp: 
 Nhãn 
 Ví dụ: 
 E-mail 
 Nên tạo chú thích cho liên kết giúp người đọc biết 
 được trang cần tới. 
 Nên dùng một màu thống nhất cho tất cả các liên 
 kết. 
 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. 
II. HÌNH ẢNH TRÊN TRANG WEB 
1. Các loại ảnh : 
  Ảnh .Gif (Graphics Interchange Format): được sử 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 độ 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 (Joint PhotoGraphic Expert Group) có 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. 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 (Portable Network Graphics) nén không mất 
 dữ liệu 
II. HÌNH ẢNH TRÊN TRANG WEB 
 2. Chèn hình ảnh 
 Cú pháp: 
 URL: thường sử dụng địa chỉ tương đối 
 – Nếu hình chứa trong thư mục image và tập tin .htm 
 chứa trong thư mục html thì địa chỉ của hình chèn 
 có dạng Src=“../image/hinh1.gif” 
 – Nếu hình và tập tin .html chứa trong cùng một thư 
 mục thì địa chỉ hình chèn có dạng: Src=“hinh1.gif” 
II. HÌNH ẢNH TRÊN TRANG WEB 
Ví dụ: 
 Image 
 <img src="../image/Blue%20hills.jpg" width="150" 
 height="150“ border=1> 
II. HÌNH ẢNH TRÊN TRANG WEB 
 3. Các thuộc tính của ảnh: 
 a) Dàn văn bản quanh hình ảnh: 
 Nội dung văn bản quanh 
 hình ảnh 
 Ví dụ :hình nằm bên trái văn bản 
 Nội dung văn bản 
 quanh hình ảnh 
 Ví dụ :hình nằm bên phải văn bản 
II. HÌNH ẢNH TRÊN TRANG WEB 
 b) 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ẽ 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 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 lề 
 phải của ảnh 
 – : Ngăn chặn văn bản dàn bên lề 
 trái của ảnh 
 – : Ngăn chặn văn bản dàn hai bên lề 
 của ảnh 
II. HÌNH ẢNH TRÊN TRANG WEB 
 c) 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 
  Cú pháp: 
 – HSPACE=n: Khoảng trắng được tính bằng pixel 
 sẽ thêm vào cả bên phải và bên trái của ảnh 
 – VSPACE=m: Khoảng trắng được tính bằng pixel 
 sẽ thêm vào cả bên trên và bên dưới của ảnh 
II. HÌNH ẢNH TRÊN TRANG WEB 
 d) Canh lề cho ảnh: Có thể canh lề cho ảnh so với một 
 dòng văn bản trong một đọan 
  Cú pháp: 
 Văn bản muốn 
 canh lề so với ảnh 
 – Direction: gồm các giá trị: top, bottom, middle, 
 texttop 
II. HÌNH ẢNH TRÊN TRANG WEB 
  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 
 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ị 
 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: 
 
 Nhãn 
 
II. HÌNH ẢNH TRÊN TRANG WEB 
1. Bản đồ ảnh: 
 Bản đồ ảnh là một ảnh trong trang web đượ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 địa 
 chỉ URL 
 Cách tạo:Trước hết phải chèn vào trang một ảnh và đặt 
 nhãn cho ảnh 
 <Area Shape= “type” coords=”x1,y1,x2,y2, …” 
 href=”URL”> 
II. HÌNH ẢNH TRÊN TRANG WEB 
 Trong đó: 
 Label: 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: 
 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 
 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 
I. SIÊU LIÊN KẾT 
 Ví dụ: 
 Image 
 <img src="../image/Blue%20hills.jpg" width="150" height="150" 
 border="0" usemap="#Map1"> 
 <area shape="poly" coords="152,81,71,75,62,109,97,123" 
 href="B3.htm"> 
I. SIÊU LIÊN KẾT 
  Hình nền : 
 Trong hầu hết các trang web thườ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 
 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. 
