I. HTML Links
1. HTML Links - Hyperlinks (Siêu liên kết)
Như đã trình bày ta sẽ gọi liên kết bằng thẻ a và thuộc tính href
<a href="https://hung1001.github.io/web">Visit our HTML tutorial</a>Lưu ý: Nếu không có dấu gạch chéo ở các địa chỉ con, bạn có thể tạo ra hai yêu cầu tới máy chủ. Nhiều máy chủ sẽ tự động thêm một dấu gạch chéo tới địa chỉ, và sau đó tạo một yêu cầu mới.
2. HTML Link Colors
Theo mặc định, một liên kết sẽ xuất hiện như sau
- Liên kết chưa được nhấn được gạch chân và màu xanh lam (a:link)
- Một liên kết truy cập được gạch chân và tím (a:visited)
- Một liên kết đang hoạt động được gạch chân và màu đỏ (a:active)
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
3. HTML Links - The target Attribute (Thuộc tính target)Thuộc tính này xác định nơi mở tài liệu
- _blank - Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới
- _self - Mở tài liệu được liên kết trong cùng một cửa sổ/tab khi nó được nhấp vào (đây là mặc định)
- _parent - Mở tài liệu được liên kết trong khung cha
- _top - Mở tài liệu được liên kết trong toàn bộ "body" của cửa sổ
- framename - Mở tài liệu được liên kết trong một khung đã đặt tên
<a href="https://hung1001.github.io/web" target="_blank">Visit me!</a>4. HTML Links - Image as Link (Chèn liên kết cho ảnh)
Rất đơn giản bạn chỉ cần đặt thẻ <img /> nằm bên trong thẻ a thì ảnh sẽ trở thành 1 liên kết
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>5. Link Titles (Tiêu đề cho link)
Thêm thuộc tính title vào thẻ a để tạo tiêu đề cho link khi hover chuột
<a href="https://hung1001.github.io/" title="Go to my site">Visit our</a>6. HTML Links - Create a Bookmark (tạo dấu trang)
Dấu trang HTML được sử dụng để cho phép người đọc chuyển sang các phần cụ thể của trang Web.
Dấu trang có thể hữu ích khi nội dung trang web quá dài
Khi liên kết được nhấp, trang sẽ di chuyển đến vị trí có dấu trang
<!-- First, create a bookmark with the id attribute: -->
<h2 id="C4">Chapter 4</h2>
<!-- Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page -->
<a href="#C4">Jump to Chapter 4</a>
II, HTML Images
Ảnh trong tài liệu HTML đã được nhắc đến ở các bài viết trước như
The alt Attribute
<img src="img_chania.jpg" alt="Flowers in Chania">Image Size - Width and Height
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">Width and Height, or Style ?
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Có thể chèn ảnh động
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">Chèn liên kết cho ảnh
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>1. Image Maps
Đây là phần khá hay, nó cho ta chèn liên kết vào ảnh nhờ định ra các vector
<img alt="Workplace" src="workplace.jpg" usemap="#workmap" /> <map name="workmap"> <area alt="Computer" coords="34,44,270,350" href="computer.htm" shape="rect"></area> <area alt="Phone" coords="290,172,333,250" href="phone.htm" shape="rect"></area> <area alt="Coffee" coords="337,300,44" href="coffee.htm" shape="circle"></area> </map>2. Background Image
Dùng nó để chèn ảnh nền cho đối tượng
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
3. The <picture> Element- HTML5 giới thiệu phần tử <picture> để thêm tính linh hoạt hơn khi chỉ định các tài nguyên hình ảnh.
- Phần tử <picture> chứa một số phần tử <source>, mỗi tham chiếu đến các nguồn hình ảnh khác nhau. Bằng cách này trình duyệt có thể chọn hình ảnh phù hợp nhất với chế độ xem
- Mỗi phần tử <source> có thuộc tính mô tả khi nào hình ảnh của chúng phù hợp nhất.
- Trình duyệt sẽ sử dụng phần tử <source> đầu tiên có các giá trị thuộc tính phù hợp
<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
Đón đọc các bài viết tiếp theo ...
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên