Hình ảnh trong HTML

Thẻ <img> để thêm hình ảnh

Trong HTML, muốn thêm hình ảnh vào trang web bạn dùng thẻ <img>. Thẻ <img> chỉ có thẻ mở và có thêm các tham số để mô tả hình ảnh.

Cách khai báo thẻ <img>:

<img src="/url" alt="some_text">

Thuộc tính src (viết tắt của source) dùng để định nghĩa đường dẫn tới ảnh thông qua url của nó. Thuộc tính alt là dòng văn bản thay thế như đã nói ở những phần trước.

Kích thước của hình ảnh

Nếu bạn muốn hình ảnh của mình có kích thước (chiều rộng và chiều cao) cố định hãy điều chỉnh bằng các thuộc tính width, height hoặc dùng style:

Ví dụ không dùng style:

<img src="/logo_TBit.png" alt="Logo của TBit" width="100" height="30">

Ví dụ dùng style:

<img src="/logo_TBit.png" alt="Logo của TBit" style="width:100px;height:30px;">

Chú ý: Không nên co giãn kích thước của bức ảnh khác với tỉ lệ vốn có giữa chiều cao và chiều rộng. Cách tốt nhất bạn chỉ điều chỉnh 1 tham số, hoặc là width hoặc là height.

Hình ảnh ở một thư mục khác

Nếu file nguồn của bạn ở cùng cấp với hình ảnh bạn muốn chèn thì url chỉ là tên của file ảnh bạn muốn chèn. Tuy nhiên, nếu hình ảnh ở thư mục khác so với file nguồn của trang thì phải chỉ rõ trong url.

Ví dụ:

<img src="/images/logo.png" alt="Logo">

Hình ảnh ở thư mục con tên là images so với thư mục chứa file nguồn của trang.

<img src="/../images/logo.png" alt="Logo">

Hình ảnh ở thư mục images ngang cấp với thư mục chứa file nguồn của trang. Dấu ../ là chỉ đường dẫn lên thư mục cha.

Chú ý: Nếu không định nghĩa chính xác vị trí của bức ảnh thì sẽ xuất hiện kí hiệu báo lỗi không tìm thấy ảnh và có thể hiển thị đoạn văn bản trong thuộc tính alt.

Hình ảnh ở một website khác

Đôi khi bạn muốn lấy ảnh từ một website khác để chèn vào trong bài viết của mình. Chẳng hạn bạn copy ảnh từ diễn đàn khác, ảnh bạn tải lên Flickr, Photobuckets... Cách đơn giản nhất là bạn hãy lấy địa chỉ của bức ảnh và dán vào phần url.

Ví dụ:

Ảnh động trên trang web

Hình ảnh động thường có phần mở rộng là .GIF và được chèn vào như hình ảnh khác.

Ví dụ:

Hình ảnh trôi nổi trên trang

Bình thường khi chèn hình ảnh vào trang web, hình ảnh sẽ cố định tại vị trí bạn đã chọn. Tuy nhiên, nếu bạn muốn hình ảnh của mình trôi nổi sang bên phải (hoặc bên trái) của trang web thì có thể dùng thêm style để định dạng.

Ví dụ:

Bản đồ ảnh trong HTML

Đôi khi bạn muốn chia hình ảnh của mình ra thành nhiều phần khác nhau. Thẻ <map> trong HTML sẽ giúp các bạn làm được điều này.

Ví dụ: