Thẻ img trong HTML

     1. Thẻ <img> trong HTML

– Thẻ <img> dùng để chèn hình ảnh vào trang web.

– Ví dụ: Các hình ảnh bên dưới được chèn vào trang web chính là nhờ vào thẻ <img>.

ảnh thiên nhiên

ảnh git thác nước

ảnh động vật

– Một thẻ <img> sẽ tương đương với một tấm hình.

– Thẻ <img> không có thẻ đóng.

– Để sử dụng thẻ <img>, ta dùng cú pháp như sau:

<img src=“đường dẫn hình ảnh mà bạn muốn chèn vào trang web”>

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg">
</body>
</html>

See the Pen LYNZqJp by DavidKhai (@davidkhai) on CodePen.dark

     2. Các thuộc tính của thẻ

- Thẻ  có chín thuộc tính cơ bản:

- Dưới đây là bảng mô tả sơ lược về chín thuộc tính đó:
srcXác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web
altXác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác
borderXác định độ dày của đường viền bao xung quanh tấm hình
widthThiết lập chiều rộng cho tấm hình
heightThiết lập chiều cao cho tấm hình
vspaceXác định khoảng cách lề phía trên và lề phía dưới của tấm hình
hspaceXác định khoảng cách lề bên trái và lề bên phải của tấm hình
alignXác định vị trí của tấm hình so với các văn bản xung quanh
usemapXác định một “bản đồ hệ thống tọa độ của các vùng” để kết hợp với tấm hình, tạo ra một bản đồ ảnh. Bạn sẽ được tìm hiểu rõ về thuộc tính này trong bài thẻ 

 & 

          2.1. Thuộc tính src

- Thuộc tính src dùng để xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web.

(Đường dẫn đến tập tin hình ảnh có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Thẻ img bên dưới sử dụng đường dẫn tuyệt đối</p>
    <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg">
    <p>- Thẻ img bên dưới sử dụng đường dẫn tương đối</p>
    <img src="../wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg">
</body>
</html>

See the Pen bGpeZdj by DavidKhai (@davidkhai) on CodePen.dark

          2.2. Thuộc tính alt

- Thuộc tính alt dùng để xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/giphy-1504888368602.gif" alt="Hình ảnh không tồn tại">
    <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/giphy-1504888368602-25.gif" alt="Hình ảnh không tồn tại">
</body>
</html>

See the Pen poybYyB by DavidKhai (@davidkhai) on CodePen.dark

          2.3. Thuộc tính border

- Thuộc tính border dùng để xác định độ dày của đường viền bao xung quanh tấm hình.

(Mặc định, giá trị của thuộc tính border được tính theo đơn vị pixel)

Ví dụ: Tấm hình bên dưới sẽ có đường viền dày 10px

 
<!DOCTYPE html>
<html>
<body>
    <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg" border="10">
</body>
</html>

See the Pen eYZzXBY by DavidKhai (@davidkhai) on CodePen.dark

          2.4. Thuộc tính width

- Thuộc tính width dùng để thiết lập chiều rộng cho tấm hình.

- Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị:
  • px (pixel)
  • (tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó)
Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Tấm hình bên dưới sẽ có chiều rộng bằng 300 pixel</p>
    <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg" width="400px">
    <p>- Tấm hình bên dưới sẽ có chiều rộng bằng 100% chiều rộng phần nội dung của phần tử cha của nó (tức là phần tử body)</p>
    <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg" width="100%">
</body>
</html>

See the Pen zYqBbNr by DavidKhai (@davidkhai) on CodePen.dark

          2.5. Thuộc tính height

- Thuộc tính height dùng để thiết lập chiều cao cho tấm hình.

- Giá trị của thuộc tính height có thể xác định theo một trong hai loại đơn vị:
  • px (pixel)
  • (tỷ lệ phần trăm chiều cao phần nội dung của phần tử cha của nó)
Lưu ý: Nếu thiết lập giá trị của thuộc tính height theo đơn vị % thì phần tử cha của nó phải có chiều cao được xác định.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Tấm hình bên dưới sẽ có chiều cao bằng 100 pixel</p>
    <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/giphy-1504888368602.gif" width="120px">
    <p>- Tấm hình bên dưới sẽ có chiều cao bằng 50% chiều cao phần nội dung của phần tử cha của nó.</p>
    <div style="border:1px solid red;height:320px">
        <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/giphy-1504888368602.gif" height="50%">
    </div>
</body>
</html>

See the Pen XWdKGRm by DavidKhai (@davidkhai) on CodePen.dark

          2.6. Thuộc tính vspace

- Thuộc tính vspace dùng để xác định khoảng cách lề phía trên và lề phía dưới của tấm hình.

Ví dụ: Tấm hình bên dưới sẽ có lề trên và lề dưới là 100px

<!DOCTYPE html>
<html>
<body>
    <div style="display:inline-block;border:1px solid #555">
        <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/110510_1_QSES.jpg" vspace="80">
    </div>
</body>
</html>

See the Pen oNxLVww by DavidKhai (@davidkhai) on CodePen.dark

 

- Lưu ý: Ta có thể sử dụng thuộc tính margin-top & margin-bottom trong CSS để thay thế.

          2.7. Thuộc tính hspace

- Thuộc tính hspace dùng để xác định khoảng cách lề bên trái và lề bên phải của tấm hình.

Ví dụ: Tấm hình bên dưới sẽ có lề trái và lề phải là 100px

 
<!DOCTYPE html>
<html>
<body>
    <div style="display:inline-block;border:1px solid #555">
        <img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/110510_1_QSES.jpg" hspace="80">
    </div>
</body>
</html>

See the Pen abNZMLm by DavidKhai (@davidkhai) on CodePen.dark

 

Lưu ý: Ta có thể sử dụng thuộc tính margin-left & margin-right trong CSS để thay thế.

          2.8. Thuộc tính align

- Thuộc tính align dùng để xác định vị trí của tấm hình so với các văn bản xung quanh.

- Thuộc tính align có năm giá trị cơ bản:

leftTấm hình sẽ được đẩy sang bên trái
rightTấm hình sẽ được đẩy sang bên phải
topVăn bản sẽ nằm ở vị trí cao nhất so với tấm hình
middleVăn bản sẽ nằm ở vị trí giữa so với tấm hình
bottomVăn bản sẽ nằm ở vị trí thấp nhất so với tấm hình

    3. Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <img> với định dạng CSS như sau:

Ví dụ:

 
img { 
    display: inline-block;
}

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *