Cách chèn hình ảnh và liên kết vào trang web HTML

LongAnIT 5/27/2019
Chúng ta có thể chèn hình ảnh thuộc các định dạng như: jpg, png, gif (hình động),.... vào trang web của mình. Trong bài viết hôm nay phần chuyên mục HTML và CSS căn bản mình xin giới thiệu với các bạn một số mã cơ bản để chèn hình ảnh, link vào trong website.

1. Cách chèn hình ảnh vào trong website

Để đưa hình ảnh vào trang html ta dùng thẻ <img> với cú pháp cơ bản như sau

<img src="Liên kết đến ảnh " />

Một số thuộc tính đi kèm như sau

  • Width: Chiều rộng của ảnh sẽ hiển thị trên trình duyệt ( tính bằng pixel hoặc % so với chiều rộng toàn trang web )
  • Height: Chiều cao mà ảnh sẽ hiển thị trên trình duyệt.
  • Border (Đường biên hay đường viền) :Thuộc tính này quy định độ dày của đường biên bao quanh ảnh ( tính bằng pixel ). Nếu không có thuộc tính này, ảnh sẽ không có đường biên bao quanh.
  • Alt : Tiêu đề cho ảnh, khi bạn rê chuột vào ảnh, tiêu đề của ảnh sẽ hiện ra. Tuy nhiên "alt" không có tác dụng trong một số trình duyệt, vì vậy để chắc ăn, bạn nên dùng thuộc tính sau.
  • Title : Tương tự như "Alt".

Vậy cú pháp đầy đủ để đưa một bức ảnh vào trang html là

<img src="Dường dẫn đến ảnh" width="Độ rộng" height="chiều dài" border="độ dày" title="Tiêu đề ảnh" >

2. Chèn Link/Liên kết vào webiste


Để chèn một liên kết vào trang web, ta sử dụng thẻ <a> với cú pháp như sau


<a href="https://www.longanit.com" target=" "> LonganIT </a>

Khi bạn sử dụng thẻ này ta có một số chú ý sau


  • Liên kết đến một trang web nào đó phải có http:// đi trước.
  • Thuộc tính target sẽ xác định xem liên kết của bạn sẽ được mở ở đâu khi kích hoạt.
  • Giá trị thường dùng là "_blank" - Mở trong một tab mới
  • Nếu không có thuộc tính này, liên kết sẽ được mở trên trang hiện tại.
  • Trên trình duyệt sẽ chỉ hiển thị đoạn "text", đoạn text này sẽ đại diện cho liên kết, khi bạn click vào "text", liên kết sẽ được mở như ví dụ trên  của tôi text là "LonganIT"

Bạn có thể thay thế đoạn text bằng một bức ảnh theo cú pháp sau

<a href="liên kết" target="new"><img src="link ảnh"></a>

3. Liên kết gửi email

Khi bạn click vào một liên kết, bạn sẽ được đưa đến một trang tài liệu hoặc một trang web. Nhưng giả sử một người đọc bài viết của bạn, và họ muốn liên hệ với bạn để trao đổi thêm. Lúc này, bạn nên để lại một "dấu vết" để giúp họ liên hệ với bạn.

  • Tạo lệnh có tên là mailto: <a href="mailto:Địa chỉ email của bạn"> text </a>
  • Khi người dùng click vào dòng text, họ sẽ được đưa đến trang gửi email, khi họ đăng nhập vào email của họ, thì email của bạn sẽ được đặt sẵn trong phần Email đích.
Cuối cùng là bạn xem đoạn code ví dụ dưới đây mình demo nhé

<a href="https://www.longanit.com/p/contact.html" target="new"><img src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" /></a>

No comments:

Post a Comment

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây