I. TẠO LIÊN KẾT TỚI CÁC TRANG HTML KHÁC (HYPER LINK)
1. Liên kết ngoại trang: Cặp thẻ <a></a>
Định nghĩa và sử dụng
Tag <a> xác định một siêu liên kết (hyperlink).
Được dùng để:
Link từ trang này tới trang khác.
Link anchor (link neo) từ vị trí này tới vị trí khác.
Link để mở (hay download) một file nào đó (file word, excel, pdf, image, ...), mở một cửa sổ window hay một object nào đó,...
Cấu trúc: <a href="#">Đây là link</a>
- href
- target
Thẻ target là một trong những thẻ phổ biến trong html cũng như lập trình web. Thẻ này dùng vào mục đính điều hướng liên kết theo 4 cách thường được sử dụng trên tất cả các website.
Thẻ target là một trong những thẻ phổ biến trong html cũng như lập trình web. Thẻ này dùng vào mục đính điều hướng liên kết theo 4 cách thường được sử dụng trên tất cả các website.
Với thẻ target bạn chỉ sử dụng được trong thẻ a của website mà thôi
Ví dụ:
<a href="https://tuhoclaptrinhweb-php.blogspot.com/" target="_blank">Tự học lập trình web</a>
- Thẻ target=”_blank”
Khi bạn sử dụng thẻ target=”_blank” thì điều đầu tiên dễ nhận thấy đó là bạn click vào link hoặc ảnh sử dụng thẻ này nó sẽ chuyển link đó sang tab mới của trình duyệt. Thẻ này được trình duyệt nhận diện đó là tab mới.
Nhưng không phải chỗ nào bạn cũng dùng được vì đơn giản đối với danh sách các bài viết mới mà bạn dùng như vậy sẽ khiến trình duyệt của người truy cập mở nhiều tab mới và như vậy làm người truy cập không còn thích thú đối với website của bạn và dẫn đến bạn sẽ mất khách truy cập tiềm năng.
Chính vì vậy thẻ target=”_blank” thường được dùng để chèn các liên kết và quảng cáo ngoài website của bạn.
- Thẻ target=”_self”
Đối với target=”_self” nó cũng tương tự với target=”_blank” nhưng nó sẽ loại chuyển liên kết ngay trại trang bạn đang sử dụng mà không mở sang tab mới trên trình duyệt.
- Thẻ target=”_parent”
Với thẻ target=”_parent” thì nó sẽ chuyển link tới tab mở tab hiện tại. Ta còn hay gọi là tab cha của tab hiện tại
- Thẻ target=”_top”
Thẻ target=”_top” thì nó sẽ nhảy tới tab hiện tại và thường dùng trong iframe khi muốn thoát khỏi iframe và chạy tới trang gốc luôn.
- Title: Mô tả cho liên kết
- Name:
Phương pháp đánh dấu nội trang
Khai báo điểm đánh dấu bằng cú pháp
<a name=”Tên điểm đánh dấu”>Điểm đánh dấu</a>
Truy suất điểm đánh dấu nội trang:
<a href=”#Tên điểm đánh dấu:>Tên đường dẫn trở về</a>
Phương pháp đánh dấu ngoại trang
Khai báo điểm đánh dấu bằng cú pháp:
<a name=”Tên điểm đánh dấu”>Điểm đánh dấu</a>
Truy suất điểm đánh dấu ngoại trang:
<a href=”Tên File HTML có đánh dấu #Tên điểm đánh dấu”>Tên đường dẫn trở về</a>
II. ĐƯA HÌNH ẢNH VÀO MỘT TRANG HTML
1. Làm việc với thẻ IMG và các thuộc tính của nó
Tag <img /> dùng để nhúng một image vào văn bản HTML.
Tag <img /> có 2 thuộc tính cần thiết là src và alt, trong đó:
- src: đường dẫn tham chiếu tới image.
- alt: được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn). Chú ý là alt không phải dùng để hiển thị khi di chuyển chuột lên image, muốn văn bản hiển thị khi di chuyển chuột lên image thì ta dùng thuộc tính title thay thế.
Cấu trúc: <img src="" alt="" />
Ví dụ
Html viết:
<p><img src="images/img_sakura.jpg" alt="Sakura" /></p>
Hình ảnh có tên "img_sakura.jpg" được đặt trong thư mục "images"
Thuộc tính
|
Giá trị
|
Ví dụ
|
Mô tả
|
Thuộc tính như HTML4.01
|
|||
height
|
pixels
% |
height="50px"
|
Xác định chiều cao của image
|
ismap
|
ismap
|
ismap="ismap"
|
Sử dụng thuộc tính này thì khi click lên
image, tọa độ vị trí click chuột sẽ gửi lên server như một chuổi truy vấn
URL.
|
longdesc
|
URL
|
longdesc="des.html"
|
Xác định một trang có chứa mô tả chi tiết
nội dung của image thông qua tham số URL.
|
usemap
|
#mapname
|
usemap=" #mapName"
|
Xác định một image thuộc khu vực image
map khi sử dụng
|
width
|
pixels
% |
width="50px"
|
Xác định chiều rộng của image
|
Thuộc tính không hỗ trợ trong
HTML5
|
|||
align
|
top
bottom middle left right |
align="top"
|
Không hỗ trợ trong HTML5.Sử dụng thuộc tính text-align của css để thay thế.
|
border
|
pixels
|
border="1px"
|
Không hỗ trợ trong HTML5.Sử dụng thuộc tính border của css để thay thế.
|
hspace
|
pixels
|
hspace="5px"
|
Không hỗ trợ trong HTML5.Sử dụng thuộc tính padding của css để thay thế.
|
vspace
|
pixels
|
vspace="5px"
|
Không hỗ trợ trong HTML5.Sử dụng thuộc tính padding của css để thay thế.
|
>>Xem bài tiếp theo: Bài 4 - LÀM VIỆC VỚI TABLE (BẢNG) TRONG HTML
No comments:
Post a Comment