Ở bài viết trước vì nó quá dài nên phần còn lại của bài viết trước đều được viết ở đây. Ở bài viết này tôi sẽ viết về màu liên kết (Link Colors), hình ảnh dưới dạng liên kết (Image as Link), liên kết neo (Anchor Link) và các bài tập.
1. Màu liên kết (Link Colors)
Theo mặc định, một liên kết sẽ hiển thị như sau (trong tất cả các trình duyệt):
Liên kết chưa được truy cập hiển thị là dấu gạch chân và màu xanh lam (blue)
Một liên kết đã được truy cập hiển thị là dấu gạch chân và tím (purple)
Một liên kết vừa được truy cập hiển thị là dấu gạch chân và màu đỏ (red)
Bạn có thể thay đổi màu mặc định, bằng cách sử dụng thẻ <style> như hình dưới
Hình trên là một ví dụ về việc thay đổi màu của một liên kết. (Về phần này, tôi sẽ viết kỹ trong series CSS)
2. Hình ảnh dưới dạng liên kết (Image as Link)
Để dùng hình ảnh đại diện cho một liên kết ta có cú pháp cơ bản sau:
<a href=”URL1″><img src=”URL2″></a>
trong đó:
URL1 – đường dẫn đến một địa chỉ web nào đó.
URL2 – đường dẫn đến tập tin hình ảnh làm đại diện cho liên kết.
Lưu ý thêm rằng URL1, URL2 bạn có thể viết dưới dạng đường dẫn tương đối hoặc đường dẫn tuyệt đối.
Để các bạn dễ hiểu tôi sẽ ví dụ như hình dưới
Ở bài này chủ yếu là viết về liên kết còn về phần hình ảnh dùng thẻ <img> với các thuộc tính trong đó cái này tôi sẽ viết kỹ ở bài viết kế tiếp.
3. Liên kết neo (Anchor Link)
Liên kết neo có nghĩa là khi bạn bấm vào liên kết nó sẽ dẫn đến một vị trí nào đó trong cùng một tập tin (mà không phải tải lại hoặc mở một tập tin mới).
Liên kết neo sẽ rất hữu ích khi tập tin của bạn là rất dài ví dụ như một tập tin về Truyện chữ, về sách cờ tướng …
Cấu trúc của một liên kết neo gồm có hai phần:
– Khu vực được neo, được khai báo bằng thẻ bất kỳ với thuộc tính id (ví dụ: <h2 id=”C5″>Chương 5</h2>).
– Liên kết neo, được khai báo bằng thẻ <a> với thuộc tính là href có giá trị là dấu # cộng tên id của khu vực cần truy cập đến (ví dụ: <a href=”#C5″>Chuyển đến chương 5</a>).
4. Bài tập về liên kết
4.1 Bài tập 1
Hãy liên kết dưới đây đến http://binhnet.com
<!DOCTYPE html> <html> <body> <a>Bấm vào đây để đến trang web của nguyenbinh.</a> </body> </html>
Gợi ý của bài tập 1
Gợi ý: Thêm thuộc tính href.
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <body> <a href="http://binhnet.com">Bấm vào đây để đến trang web của nguyenbinh.</a> </body> </html>
4.2 Bài tập 2
Thay đổi đường dẫn tuyệt đối bên dưới thành đường dẫn tương đối
<!DOCTYPE html> <html> <body> <a href="http://ift.tt/2vjerI5">Hình ảnh HTML</a> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html> <html> <body> <a href="html/html_hinhanh.jpg">Hình ảnh HTML</a> </body> </html>
4.3 Bài tập 3
Thay đổi liên kết bên dưới để mở trong một cửa sổ mới.
<!DOCTYPE html> <html> <body> <a href="http://ift.tt/2vjerI5">Hình ảnh HTML</a> </body> </html>
Gợi ý của bài tập 3
Gợi ý: Thêm thuộc tính target.
Câu trả lời của bài tập 3
<!DOCTYPE html> <html> <body> <a href="http://ift.tt/2vjerI5" target="_blank">Hình ảnh HTML</a> </body> </html>
4.4 Bài tập 4
Thêm liên kết vào hình ảnh bên dưới (làm cho nó đi đến địa chỉ “http://ift.tt/2wLehsf; nếu bạn nhấp chuột vào nó).
<!DOCTYPE html> <html> <body> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> </body> </html>
Câu trả lời của bài tập 4
<!DOCTYPE html> <html> <body> <a href="http://binhnet.com"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> </a> </body> </html>
5. Lời cuối bài
Qua bài này chắc các bạn đã hiểu biết thế nào là màu liên kết, liên kết neo là gì? … Bài viết sau tôi sẽ viết về những gì liên quan đến hình ảnh trong HTML.
The post [HTML bài 17] Màu liên kết, hình ảnh dưới dạng Liên kết, liên kết neo appeared first on Học online.
from WordPress http://ift.tt/2vuECYg
via IFTTT
Không có nhận xét nào:
Đăng nhận xét