[Series Html] Bài 3: Hình ảnh và liên kết trong html

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!

Chào các bạn! Tiếp tục series học Html cơ bản, chúng ta sẽ đến với bài 3.Trong bài này chúng ta cùng tìm hiểu về hình ảnh và liên kết trong html.

Hình ảnh và liên kết trong html - học html cơ bản - AnonyHome

1) Thẻ hình ảnh <img />

– Cú pháp: <img src=“Đường_dẫn_ảnh” />
– Thuộc tính
+ src=”url”: Đường dẫn của ảnh cần hiển thị(Mình có hướng dẫn phần này trong Bài 2 của series, bạn nào quên có thể xem lại.)
+ border=“giá_trị”: Đường viền của ảnh. Ví dụ border=“0”.
+ width=“giá_trị”: Độ rộng của ảnh, đơn vị pixel.
+ height=“giá_trị”: Độ cao của ảnh, đơn vị pixel.
+ alt=“”: Nội dung hiển thị thay thế khi ảnh không được hiển thị(Do sai đường dẫn,ảnh không được tải về,… ).
+ title=”” : Tiêu đề của ảnh( Khi di chuột qua ảnh sẽ hiển thị tiêu đề)
+ vspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài( Theo chiều dọc)
+ hspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài( Theo chiều ngang)
Chú ý: Khi sử dụng thẻ <img /> nên đặt thuộc tính alt và title trong mọi trường hợp. 2 thuộc tính này có tác dụng SEO cho website, đồng thời chuẩn web mà w3c đưa ra yêu cầu mọi ảnh phải có.

Ví dụ1: Giống với ví dụ trong bài 2 của series. Ngoài Desktop mình có một file index.html và một thư mục images, bên trong có một file ảnh img1.jpg.
Khi đó file index.html có nội dung như sau:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 3</title>
</head>
<body>

<img src="images/img1.jpg" border="2" title="Tiêu đề của ảnh" alt="Nội dung thay thế khi ảnh không hiển thị">

</body>
</html>

Nội dung hiển thị khi chạy file index.html trên trình duyệt:

Hình ảnh và liên kết trong html - học html cơ bản - AnonyHome


ví dụ2: tương tự ví dụ1 nhưng trong ví dụ 2 này, mình sẽ cố tình để đường dẫn ảnh sai là <img src=”img1.jpg” border=”2″ title=”Tiêu đề của ảnh” alt=”Nội dung thay thế khi ảnh không hiển thị”>. Để mọi người thấy được chức năng của thuộc tính “atl”.

Khi đó nội dung hiển thị trên trình duyệt sẽ như sau:

Hình ảnh và liên kết trong html - học html cơ bản - AnonyHome

2. Thẻ liên kết.

– Cú pháp: <a href=“đường_dẫn”>Nội dung</a>
– Thuộc tính:
+ href=“url”: Đường dẫn.

+ target=“giá_trị”: Phương thức khi mở liên kết. Gồm các giá trị sau:

_self( mở liên kết ở tab hiện tại), 
_blank( mở với 1 cửa sổ mới), 
_parent( mở với frame), 
_top( khác với _parent, _top mở với cả trang)

+ title: Tiêu đề của liên kết

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 3</title>
</head>
<body>

<a href=“ https://www.facebook.com/” target=“_blank” title=“VSNet”> Ấn để truy cập Facebook</a>

</body>
</html>

Kết quả:

Hình ảnh và liên kết trong html - học html cơ bản - AnonyHome

– Liên kết là hình ảnh: Trong trường hợp liên kết là 1 hình ảnh, chúng ta có thể thay “Nội dung” bằng cú pháp của thẻ hình ảnh.
Ví dụ:

<html>
<head>

<title>Bài 3</title>
</head>
<body>
<a href="https://crthang.blogspot.com/" target="_blank" title="Tin tuc,cong nghe, lap trinh">
<img src="https://1.bp.blogspot.com/-s64Xi0mlUYk/WgXBdyOv5qI/AAAAAAAAA9A/8_JL_JUnyTcJyS_YCktUrTfgvXeaW3O1wCLcBGAs/s1600/huong-dan-hoc-html-can-ban-01.jpg%20" />
</a>

</body>
</html>

Kết quả: 

Hình ảnh và liên kết trong html - học html cơ bản - AnonyHome

– Liên kết neo (Anchor Link)

Liên kết neo nghĩa là một liên kết trong siêu văn bản sẽ dẫn đến một vị trí đặc biệt trong cùng tài liệu mà không phải tải lại hoặc mở một tài liệu mới. 

Một liên kết neo sẽ 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ụ: <p id=”dau_trang”> </p>).

+ Liên kết neo, được khai báo bằng thẻ <a> nhưng có thuộc tính là href nhưng giá trị là có dấu # và tên id của khu vực cần truy cập đến.
 (ví dụ: <a href=”#dau_trang”>Lên đầu trang</a>).

Kết thúc bài hôm này mình đã giới thiệu cho các bạn về thẻ hình ảnh và liên kết trong html. Mọi thắc mắc vui lòng vui lòng để lại bình luận bên dưới.
Bài tiếp theo sẽ tiết tục được mình cập nhật.  Cám ơn các bạn đã theo dõi!

Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
Người dùng mạng Viettel giờ đây…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x