[HTML] Bài 7 - Nhóm Thẻ INLINE - Đưa Hình Ảnh vào tài liệu

1. Thẻ IMG:

Cú Pháp: <IMG SRC="URL" />

Thuộc tính SRC (source) là đường dẫn đến nơi chứa File hình ảnh. Giá trị của thuộc tính SRC phụ thuộc vào giá trị của URL, URL là một địa chỉ trên máy tính hay trên Internet, nó chỉ ra nơi lưu trữ tập tin hình ảnh cần chèn vào.

Địa chỉ URL chỉ cho trình duyệt biết cần lấy tệp hình ảnh ở đâu.

Nếu hình ảnh nằm trên máy tính của bạn thì cần ghi rõ đường dẫn

Ví Dụ:

<img src="C:\Documents and Settings\Administrator\My Documents\Downloads\logo.png"/>

Chú ý nếu hình ảnh của bạn và file HTML của bạn cùng nằm ở 1 Folder mẹ hay nơi lưu trữ thì chỉ cần chỉ ra nơi lưu trữ tới hình ảnh bắt đầu từ nơi lưu trữ File HTML

Ví Dụ: File HTML của bạn và File logo.png cùng nằm trong foder web thì code là:

<img src="logo.png">

Nếu hình ảnh nằm trên internet thì phải ghi đầy đủ địa chỉ URL
Ví Dụ:

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" />

 2. Thuộc Tính của tag IMG:

2.1 Thuộc Tính ALT
Thuộc tính ALT – ALTernative cho phép ta chèn một đoạn chữ thay thế vào chỗ có hình và hiện lên xâu chú thích khi đưa trỏ chuột vào ảnh. Thuộc tính này dùng trong trường hợp trình duyệt không hiển thị được hình ảnh thì sẽ hiện dòng văn bản thay thế.
Cú Pháp: <IMG SRC="URL" ALT="...." />
Ví Dụ:
Code HTML:

<img src="linktaolao.png" alt="hình ảnh không tồn tại" />

Hiển Thị Trên Trình Duyệt:




2.2 Thuộc Tính WIDTH và HEIGHT
Thuộc tính WIDTH và HEIGHT dùng để xác định chiều rộng và chiều cao của ảnh. Giá trị này có thể tính theo phần trăm (%) hoặc pixel.
Ví Dụ:

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="50px" height="30px"/>
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="60px" height="40px"/>
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="80px" height="50px"/>
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="90px" height="70px"/>
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="200px" height="100px"/>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

2.3 Thuộc Tính ALIGN
Thuộc tính ALIGN cho phép bạn tùy chỉnh vị trí ảnh theo chiều ngang và chiều dọc.
Theo Chiều Dọc có các thuộc tính: ALIGN=MIDDLE, ALIGN=TOP, ALIGN=BOTTOM
Ví Dụ: (bạn so sánh vị trính của ảnh với chữ "chu dinh vi tri" để thấy sự khác biệt)

chu dinh vi tri
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="90px" height="70px" ALIGN=MIDDLE />
chu dinh vi tri
<br/>
<hr/>
<br/>
chu dinh vi tri
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="90px" height="70px" ALIGN=TOP />
chu dinh vi tri
<br/>
<hr/>
<br/>
chu dinh vi tri
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="90px" height="70px" ALIGN=BOTTOM />
chu dinh vi tri

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Theo chiều ngang: ALIGN=LEFT, ALIGN=RIGHT

chu dinh vi tri
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="90px" height="70px" ALIGN=LEFT />
chu dinh vi tri
<br/>
<hr/>
<br/>
chu dinh vi tri
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s1600/550.jpg" width="90px" height="70px" ALIGN=RIGHT />
chu dinh vi tri

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen