Hình ảnh trong HTML

  • Nguyễn Lê Điệp
  • 25-12-2016
  • 501
  • 0
  • 2
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.
    Hình ảnh trong HTML được xác định bởi thẻ <img>. Thẻ này chỉ tồn tại với thẻ mở và chứa các thuộc tính như alt, title,... và không có thẻ đóng.

    Cú pháp thẻ img

    <img src="địa chỉ hình" alt="tên thay thế hình" title="tên hiển thị">

    Thuộc tính alt

    Đối với thuộc tính alt này chúng ta có thể hiểu đó là một đoạn văn bản thay thế mô tả hình ảnh khi kết nối mạng bị chậm hoặc với một lý do nào đó trình duyệt không thể tải hình thì đoạn văn nằm trong thuộc tính này sẽ hiển thị cho người dùng nhìn thấy.
    <img src="/home/images/icon.png" alt="Logo Kennis.vn" style="width:50px;height:50px">
    Xem ví dụ

    Kích thước hình

    Bạn có thể quy định kích thước hình theo chiều rộng và chiều cao với thuộc tính style. Chúng ta thường dùng với đơn vị là px để đo điểm ảnh cho hình.
    <img src="/home/images/icon.png" alt="Logo Kennis.vn" style="width:50px;height:50px">
    Xem ví dụ
    Ngoài ra bạn cũng có thể sử dụng các thuộc tính như width và height để cấu hình chiều rộng và chiều cao cho ảnh của mình.
    <img src="/home/images/icon.png" alt="Logo Kennis.vn" width="50px" height="50px">
    Xem ví dụ

    Style đối với hình

    Bạn có thể sử dụng các thuộc tính như width, height hoặc style để định dạng kích thước cho hình ảnh của mình nhưng tốt nhất bạn nên sử dụng với một style đề dễ dàng định dạng lại hình trong tương lai.
    <!DOCTYPE html>
    <html>
    <head>
    	<style>
    		img {
    			width:100%;
    		}
    	</style>
    </head>
    <body>
    	<h3>Dưới đây là các cách định dạng kích thước cho hình ảnh</h3>
    	<p>Sử dụng style trong phần tử HTML</p>
    	<img src="/home/images/icon.png" alt="Logo Kennis.vn" style="width:50px;height:50px;">
    	<p>Sử dụng thuộc tính chiều rộng và chiều cao</p>
    	<img src="/home/images/icon.png" alt="Logo Kennis.vn" width="100" height="100">
    </body>
    </html>
    Xem ví dụ

    Hình trong thư mục khác

    Bạn cũng có thể trỏ tới địa chỉ hình ảnh ở thư mục khác ngoài thư mục home/images ở ví dụ bên trên.
    <img src="/home/images/tryit/try/icon.png" alt="Logo Kennis.vn" style="width:50px;height:50px;">
    Xem ví dụ

    Hình ở trang khác

    Bạn cũng có thể trỏ tới địa chỉ hình ảnh ở một trang khác ngoài trang hiện tại của bạn bằng một đường dẫn tuyệt đối.
    <img src="http://kennis.vn/home/images/icon.png" alt="Logo Kennis.vn" style="width:50px;height:50px;">
    Xem ví dụ

    Hình ảnh động

    Bạn cũng có thể chèn hình ảnh động với phần mở rộng .gif vào trong HTML.
    <img src="/home/images/tryit/try/icon.gif" alt="Logo động Kennis.vn" style="width:50px;height:50px;">
    Xem ví dụ

    Hình ảnh trong liên kết

    Với một hình ảnh bạn có thể biến nó thành một liên kết như sau
    <a href="/topic/hoc-html">
      	<img src="/home/images/icon.png" alt="Học HTML tại Kennis.vn" style="width:50px;height:50px;border:0;">
    </a>
    Xem ví dụ

    Hình ảnh với văn bản

    Chúng ta cũng có thể chèn hình ảnh ngang hàng với một dòng văn bản bằng cách sử dụng thuộc tính float trong CSS.
    <p>Đây là dòng văn bản có hình ảnh nằm bên phải <img src="/home/images/icon.png" alt="Logo động Kennis.vn" style="width:25px;height:25px;float:right"></p>
    <p>Hình ảnh nằm bên trái dòng văn bản này <img src="/home/images/icon.png" alt="Logo động Kennis.vn" style="width:25px;height:25px;float:left"></p>
    Xem ví dụ

    Bản đồ hình ảnh

    Bạn có thể sử dụng hình ảnh giống như một bản đồ thu nhỏ ở đó có các điểm ảnh bạn có thể click vào đó để chuyển sang một trang khác. Ở đây bạn sử dụng thẻ <map> và sử dụng thuộc tính usemap trong thẻ <img> để vận dụng.
    <img src="/home/images/tryit/try/logohoadao.png" alt="Logo có hoa Đào" usemap="#map" style="width:150px;height:150px;">
    <map name="map">
    	<area shape="rect" coords="90,83,6,54" alt="Hoa Đào" href="/home/tryit/try/html-hoadao.html">
    </map>
    Xem ví dụ
    Chúc các bạn học tốt!laugh
    Từ khóa:

    Hình ảnh trong HTML

    Hình ảnh trong HTML

    Hình ảnh trong HTML

    Hình ảnh trong HTML
    Hình ảnh trong HTML
    2 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    219
    - Hôm qua:
    425
    - Tuần này:
    2.719
    - Tuần trước:
    3.197
    - Tháng này:
    10.367
    - Tháng trước:
    19.065
    - Năm này:
    234.050
    - Năm trước:
    17.373
    - Tổng cộng:
    251.423