HTML 11 – Thẻ Liên kết và Hình ảnh trong HTML

0
101
Xin chào các bạn, ở bài trước chúng ta đã nói về Các thẻ định dạng kiểu danh sách trong văn bản HTML, và bài số 11 tiếp theo này, chúng ta sẽ đi tìm hiểu cụ thể về các thẻ Liên kết cũng như thẻ Hình ảnh trong HTML nhé. Nội dung bài viết có 2 phần: + Phần 1: Thẻ liên kết trong văn bản HTML + Phần 2: Thẻ hình ảnh trong văn bản HTML

Thẻ liên kết trong văn bản HTML

Thẻ liên kết được dùng để chuyển sang 1 website khác, hoặc 1 nguồn tài nguyên khác như hình ảnh, video, file nhạc, … Liên kết có thể được đại diện bới 1 cụm từ hoặc 1 hình ảnh.

Cách tạo liên kết

Để tạo 1 liên kết trong văn bản HTML, chúng ta sử dụng cặp thẻ <a></a> với các thuộc tính để định dạng cho liên kết đó:
  • Thuộc tính href: giá trị là đường dẫn muốn liên kết tới
  • Thuộc tính target: kiểu mở liên kết, giá trị “_blank” giúp chuyển tab mới, giá trị _self mở liên kết ở ngay tab hiện tại
  • Thuộc tính title: mô tả đường dẫn

Ví dụ về thẻ liên kết

Thẻ hình ảnh trong văn bản HTML

Chúng ta có thể chèn hình ảnh thuộc các định dạng quen thuộc như: jpeg, png, gif (hình động), … vào website. Để đưa hình ảnh vào trong văn bản HTML, chúng ta sử dụng thẻ đơn <img/> với các thuộc tính đi kèm như sau:
  • Thuộc tính src: giá trị là đường dẫn ảnh
  • Thuộc tính width: độ rộng ảnh
  • Thuộc tính height: độ cao ảnh
  • Thuộc tính alt: dùng để hiển thị 1 đoạn văn bản trong trường hợp load tấm ảnh thất bại (hoặc đường dẫn ảnh sai, không tồn tại).
  • Thuộc tính border: đường viền của ảnh
  • Thuộc tính align: vị trí của ảnh (left, right)
  • Thuộc tính hspace: khoảng cách theo trục x, chiều ngang
  • Thuộc tính vspace: khoảng cách theo trục y, chiều dọc
Ví dụ
Trong đó, chiều rộng width và chiều cao height được xác định theo đơn vị px (pixel), ngoài ra, các bạn có thể sử dụng các đơn vị khác sẽ được học cụ thể trong CSS sau nhé (ví dụ như %). Trong trường hợp thiết lập kích thước cho ảnh, bạn chỉ xác định độ rộng width của ảnh thì thuộc tính chiều ngang height còn lại sẽ tự động được xác định theo tỷ lệ của bức ảnh nhé. Bài hôm nay như vậy là xong rồi, rất hay đúng không nào. Hẹn gặp lại các bạn ở những nội dung tiếp theo nhé. Chúc các bạn học tập tốt !  

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây