Thẻ img trong HTML

672 lượt xem

KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?

Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!

>>>> Tham khảo khóa học đã giúp mình tại:

Học HTML5/CSS3, BOOTSTRAP 4 và học cắt Web từ file thiết kế

Học HTML5/CSS3, BOOTSTRAP 4 và học cắt Web từ file thiết kế

599.000₫
Buy now
unica.vn

Description

Khóa học HTML5/CSS3 BOOTSTRAP 4 và cắt Web từ file thiết kế giúp nắm vững kiến thức về CSS HTML hiểu rõ Bootstrap và kỹ năng cắt Web với Illustrate Pix

Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40

Còn bây giờ thì vào bài viết thôi!

Trong bài viết này hãy cùng webaffiliatevn.com tìm hiểu thẻ img trong html nhé.

     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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”LYNZqJp” default_tab=”html,result” user=”davidkhai”]See the Pen LYNZqJp by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]

     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 đó:

src Xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web
alt 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
border Xác định độ dày của đường viền bao xung quanh tấm hình
width Thiết lập chiều rộng cho tấm hình
height Thiết lập chiều cao cho tấm hình
vspace Xác định khoảng cách lề phía trên và lề phía dưới của tấm hình
hspace Xác định khoảng cách lề bên trái và lề bên phải của tấm hình
align Xác định vị trí của tấm hình so với các văn bản xung quanh
usemap Xá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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”bGpeZdj” default_tab=”html,result” user=”davidkhai”]See the Pen bGpeZdj by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]

          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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”poybYyB” default_tab=”html,result” user=”davidkhai”]See the Pen poybYyB by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]

          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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”eYZzXBY” default_tab=”html,result” user=”davidkhai”]See the Pen eYZzXBY by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]

          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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”zYqBbNr” default_tab=”html,result” user=”davidkhai”]See the Pen zYqBbNr by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]

          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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”XWdKGRm” default_tab=”html,result” user=”davidkhai”]See the Pen XWdKGRm by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]

          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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oNxLVww” default_tab=”html,result” user=”davidkhai”]See the Pen oNxLVww by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]

 

– 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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”abNZMLm” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/abNZMLm’>abNZMLm</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]   – 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:

 

left Tấm hình sẽ được đẩy sang bên trái
right Tấm hình sẽ được đẩy sang bên phải
top Văn bản sẽ nằm ở vị trí cao nhất so với tấm hình
middle Văn bản sẽ nằm ở vị trí giữa so với tấm hình
bottom Vă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;
}
Đánh giá post
Lượt xem: 2.769

Các kênh thông tin của chúng tôi

Disclaimer: Thông tin trong bài viết không phải là lời khuyên đầu tư từ Coin98 Insights. Hoạt động đầu tư tiền mã hóa chưa được pháp luật một số nước công nhận và bảo vệ. Các loại tiền số luôn tiềm ẩn nhiều rủi ro tài chính.

Bài viết cùng chủ đề:

You cannot copy content of this page

Contact Me on Zalo