Chèn ảnh Trong HTML | Tìm ở đây

Trang chủ » Chèn Html » Chèn ảnh Trong HTML | Tìm ở đây

Có thể bạn quan tâm

Ảnh trong HTML

Ảnh JPG

pic_mountain

Ảnh GIF

html5

Ảnh PNG

pic_graph

Ví dụ:

<!DOCTYPE html> <html> <body><h2>Núi hùng vĩ</h2> <img src=“pic mountain.gif” alt=“Mountain View” style=“width:304px;height:228px;”></body> </html>

Xem kết quả

mách giúp Luôn đặt chiều rộng và chiều cao của một ảnh. Nếu chiều rộng và chiều cao không được xác định, trang sẽ nhấp nháy trong khi ảnh tải lên.

Cú pháp chèn ảnh trong HTML

Trong HTML, ảnh được định nghĩa với thẻ <img>.

Thẻ <img> là trống, nó chỉ chứa các thuộc tính, và không có thẻ đóng.

Các thuộc tính src xác định URL ( địa chỉ web) của ảnh:

<img src=“url“ alt=“some_text“>

 Các thuộc tính alt

Thuộc tính alt định nghĩa một văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiện thị được.

Thuộc tính alt cung cấp thông tin thay thế cho một hình ảnh, nếu một người vì lí do nào đó không thể xem nó (vì kết nối mạng chậm, hoặc  lỗi trong thuộc tính src, hoặc nếu người dùng sử dụng một trình đọc màn hình).

Nếu trình duyệt không thể tìm thấy ảnh, nó sẽ hiển thị nội dung chứa trong alt:

Ví dụ:

<img src=“wrongname.gif” alt=“HTML5 Icon” style=“width:128px;height:128px;”>

Xem kết quả

Thuộc tính alt là bắt buộc. Một trang web sẽ không hợp lệ nếu thiếu nó.

Trình đọc màn hình trong HTML

Trình đọc màn hình là một chương trình phần mềm mà có thể đọc mọi thứ hiển thị trên màn hình.

Trình đọc màn hình này rất có ích cho người mù, khiếm thị hoặc học dạng khiếm thính.

mách giúp Trình đọc màn hình có thể đọc thuộc tính alt.

Kích thước ảnh – Width và  Height

Bạn có thể sử dụng thuộc tính style để xác định chiều rộng và chiều cao cho một ảnh.

Các giá trị được quy định tại  các điểm ảnh pixel (sử dụng px sau giá trị):

Ví dụ

<img src=“htnl5.gif” alt=“HTML5 Icon” style=“width:128px;height:128px;”>

Xem kết quả

Ngoài ra bạn có thể sử dụng thộc tính width và height. Tại đây, giá trị được đặt mặc định theo đơn vị pixel:

Ví dụ:

<img src=“html5.gif” alt=“HTML5 Icon” width=“128” height=“128”>

Xem kết quả

Width and Height or Style?

Tất cả thuộc tính width, height, and style là phù hợp trong các tiêu chuẩn HTML5 mới nhất.

Chúng tôi gợi ý bạn nên sử dụng thuộc tính style. Nó sẽ tránh được việc thay đổi định kiểu được định ngĩa trong style sheet.

Ví dụ:

<!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body><img src=“html5.gif” alt=“HTML5 Icon” style=“width:128px;height:128px;”> <img src=“html5.gif” alt=“HTML5 Icon” width=“128” height=“128”></body> </html>

Xem kết quả

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

Nếu chỉ rõ đường dẫn, trình duyệt sẽ tìm các ảnh trong cùng thư mục với trang web .

Tuy nhiên, thường lưu trữ các ảnh trong thư mục con. Vì thế, bạn phải cho cả tên thư mục con vào trong thuộc tính src:

Ví dụ:

<img src=“/images/html5.gif” alt=“HTML5 Icon” style=“width:128px;height:128px;”>

Xem kết quả

Ảnh trên máy chủ khác

Một số trang web lưu trữ hình ảnh của họ trên các máy chủ hình ảnh.

Thực vậy, bạn có thể truy cập hình ảnh từ bất kỳ địa chỉ web trên thế giới:

Ví dụ:

<img src=“https://timoday.edu.vn/wp-content/uploads/2015/09/logo11.png” alt=“timoday.edu.vn”>

Xem kết quả

Ảnh động

Chuẩn GIF cho phép tạo ảnh động:

Ví dụ:

<img src=“programming.gif” alt=“Computer Man” style=“width:48px;height:48px;”>

Xem kết quả

Lưu ý  cú pháp chèn hình ảnh động không khác gì với chèn hình ảnh không bình thường.

Sử dụng ảnh như là một liên kết (link)

Để sử dụng ảnh như một liên kết, đơn giản chỉ là thẻ <img> nằm trong thẻ <a>:

Ví dụ:

<a href=“timoday.edu.vn”> <img src=“smiley.gif” alt=“Tìm ở đây” style=“width:42px;height:42px;border:0;”> </a>

Xem kết quả

mách giúp Thêm “border: 0;” để tránh trình duyệt IE9 (và phiên bản cũ hơn) hiển thị đường viền xung quanh hình ảnh.

Ảnh nổi

Sử dụng các thuộc tính CSS để các hình ảnh nổi lên.

Các ảnh có thể nổi sang phải hoặc sang trái của văn bản::

Ví dụ:

<p> <img src=“smiley.gif” alt=“Smiley face” style=“float:right;width:42px;height:42px;”> Ảnh sẽ nổi sang bên phải của văn bản. </p><p> <img src=“smiley.gif” alt=“Smiley face” style=“float:left;width:42px;height:42px;”> Ảnh sẽ nổi sang bên trái của văn bản. </p>

Xem kết quả

Bản đồ ảnh

Sử dụng thẻ <map> để định nghĩa một bản đồ ảnh. Bản đồ ảnh là một ảnh mà ở đó chúng ta có thể kích được.

Tên thuộc tính của thẻ <map>kết hợp với thẻ <img> là thuộc tính “usemap” và tạo một mối quan hệ giữa ảnh và bản đồ.

Thẻ <map>chứa một số thẻ <area>, xác định các khu vực có thể kích vào trong bản đồ ảnh:

Ví dụ:

<img src=“planets.gif” alt=“Planets” usemap=“#planetmap” style=“width:145px;height:126px;”>

<map name=“planetmap”> <area shape=“rect” coords=“0,0,82,126” alt=“Sun” href=“sun.htm”> <area shape=“circle” coords=“90,58,3” alt=“Mercury” href=“mercur.htm”> <area shape=“circle” coords=“124,58,8” alt=“Venus” href=“venus.htm”> </map>

Xem kết quả

Tóm tắt

  • Sử dụng thẻ <img> để định nghĩa một ảnh
  • Sử dụng thuộc tính src xác định URL  ( địa chỉ web) của ảnh
  • Sử dụng thuộc tính alt để xác định văn bản thay thế cho ảnh, nếu ảnh không hiển thị
  • Sử dụng thuộc tính width và height để xác định kích thước của ảnh
  • Sử dụng CSS width và height để xác định kích thước ảnh (cách khác)
  • Sử dụng CSS float để đặt ảnh nổi
  • Sử dụng thẻ <map> để định nghĩa một bản đồ ảnh
  • Sử dụng thẻ <area> để định nghĩa một vùng kích được  trong bản đồ ảnh
  • Sử dụng thẻ <img> với thuộc tính usemap để chỉ tới một bản đồ ảnh
mách giúp Nạp ảnh mất nhiều thời gian. Các hình ảnh lớn có thể làm chậm trang của bạn. Sử dụng các ảnh phải cẩn thận.

Các thẻ ảnh trong HTML

Thẻ Mô tả
<img> Định nghĩa một ảnh
<map> Định nghĩa một ảnh bản đồ
<area> Định nghĩa vùng kích được trong bản đồ ảnh

Từ khóa » Chèn Html