Ảnh đè ảnh trong html

Viết chữ lên hình ảnh trong HTML giúp bạn trang trí website đẹp hơn. Để làm được điều này bạn hãy tham khảo bài viết chèn text lên ảnh với các bước hướng dẫn dễ hiểu dưới đây.

Nội dung chính Show

Thuộc tính width và height - điều chỉnh cỡ ảnh <img>
Đường viền khung ảnh - border
Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML
Một số thuộc tính trong thẻ img
Một số kết với giữa thẻ img với thẻ khác thường dùng

Có 2 trường hợp xảy ra ở đây

1. Chèn chữ lên một bức ảnh

Bạn sẽ thực hiện chạy đoạn code này

<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: #fff;
position: absolute;
top: 10px
}
</style>
</head>
<body>

<h2 class="text">Đây là đoạn văn bản</h2>
<img src="https://quachquynh.com/wp-content/uploads/2019/12/Quachquynh.com__background-dep-cho-may-tinh-laptop-va-pc-7.jpg" width="100%"/>

</body>
</html>

Kết quả:

Giải thích:

Đoạn code này sẽ dùng thuộc tính postition absolute, khi đặt top 10px nó sẽ lùi xuống 10px mà không để lại khoảng trống.

Bạn sẽ dùng 2 giá trị là top và left để căn chỉnh vị trí. Thêm left: 50px để xem kết quả có gì thay đổi không.

2. Chèn chữ lên background

Đối với background để lồng hình vào chữ cũng tương tự bạn cũng dùng Position relative

<!DOCTYPE html>
<html>
<head>
<style>
.content {
height: 400px;
width: 100%;
background-image:url(https://quachquynh.com/wp-content/uploads/2019/12/Quachquynh.com__background-dep-cho-may-tinh-laptop-va-pc-7.jpg) ;
background-size: cover
}
.text {
color: #fff;
position: absolute;
top: 10px;
left: 70px;
}
</style>
</head>
<body>

<div class="content">
<h2 class="text">Đây là đoạn văn bản chèn chữ lên ảnh</h2>
</div>

</body>
</html>

Khá đơn giản phải không! Đây là một phần kiến thức cần biết trong CSS để thiết kế giao diện web. Hãy bắt tay vào thực hành ngay sau khi đọc xong bài viết này nhé!

Thẻ <img> được dùng để nhúng một hình ảnh vào trang HTML. Thẻ này có vài thuộc tính và nó không có phần đóng thẻ. Địa chỉ URL dẫn đến vị trí của ảnh được xác định thông qua thuộc tính src. Cú pháp chèn ảnh có dạng:

<img src="image.jpg" />

Vị trí URL ảnh phải nằm giữa dấu nháy kép "...", ví dụ bạn có một ảnh có tên "flower.jpg" lưu trữ cùng thư mục với file HTML, thì hiện thị ảnh có thể có dạng:

<html>
   <head>
      <title>Ví dụ về ảnh</title>
   </head>
   <body> 
      <img src="flower.jpg" alt="" />
   </body>
</html>

Trong trường hợp ảnh không hiện thị được (ví dụ ảnh bị xóa ...) thì thuộc tính alt là một văn bản thay thế sẽ hiện thị thay cho ảnh. Nói chung bất kỳ ảnh nào trong HTML thì thuộc tính alt yêu cầu nên có.

Thuộc tính width và height - điều chỉnh cỡ ảnh <img>

Điều chỉnh cỡ ảnh hiện thị bạn có thể chỉ ra chiều rộng và chiều cao của ảnh thông qua thuộc tính width và height. Đơn vị sử dụng là pixel px hoặc phần trăm %

<html>
   <head>
      <title>Thẻ IMG</title>
   </head>
   <body> 
      <img src="flower.jpg" height="150px" width="150px" alt="" />
      <!-- hoặc -->
      <img src="flower.jpg" height="50%" width="50%" alt="" />
   </body>
</html>

Khi sử dụng ảnh trong trang web, sẽ mất thời gian để tải ảnh về và hiện thị, nên bạn cần lưu ý chọn cỡ ảnh gốc sao cho phù hợp với yêu cầu hiện thị của trang

Đường viền khung ảnh - border

Mặc định, anh không có đường viền bao quanh. Để tạo đường viền bao quanh ảnh sử dụng thuộc tính border và chỉ ra kích cỡ của đường viền theo đơn vị px

Viết code HTML, có một số URL ảnh sau:

https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-004.png
https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-005.png
https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-006.png

Hãy viết code hiện thị ảnh và xem kết quả ra sao ở hộp sau:

Với 1 trang web bất kỳ, ngoài nội dung hấp dẫn thì cần phải có những hình ảnh để minh họa cho nội dung. Chính vì thế khi làm web với HTML bạn cũng cần biết chèn hình ảnh vào trong HTML để làm cho trang web đẹp hơn.

Việc chèn hình ảnh trong HTML có khó không? Thẻ nào hỗ trợ chèn hình ảnh trong HTML? Chúng ta cùng tìm hiểu trong bài viết này nhé.

Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML

Trong HTML có 1 thẻ hỗ trợ bạn chèn hình ảnh đó chính là thẻ <img/>. Mỗi khi cần chèn hình ảnh vào HTML bạn chỉ cần sử dụng thẻ <img/> theo cú pháp sau đây:

<img src="đường dẫn url tới nơi lưu ảnh" các-thuộc-tính-khác/>

Thẻ <img/> là thẻ không cần thẻ đóng. Trong thẻ img có các thuộc tính như src, alt, width, height,… trong đó thuộc tính src là thuộc tính bắt buộc dùng để khai báo đường dẫn url của hình ảnh.

Ví dụ

<img src="./img/logo.png" alt="blog-cong-dong"/>

Tham khảo thêm

Tìm hiểu về cấu trúc thẻ và thuộc tính trong HTML
Các thẻ tạo danh sách (list) trong HTML
Các thẻ định dạng văn bản trong HTML

Một số thuộc tính trong thẻ img

Thẻ img trong HTML có 1 số thuộc tính cơ bản sau đây bạn cần biết

Thuộc tính src

Đây là thuộc tính bắt buộc phải có. Nó là thuộc tính khai báo đường dẫn file ảnh. Các loại tập tin hình ảnh được hỗ trợ gồm png, jpg, gif,… Giá trị của URL hình ảnh có thể để ở dạng đường dẫn tuyệt đối hoặc tương đối.

Ví dụ

Đường dẫn tuyệt đối: https://nguyenhung.net/wp-content/uploads/2016/03/logo.png
Đường dẫn tương đối: ./wp-content/uploads/2016/03/logo.png

Thuộc tính alt

Đây là thuộc tính mô tả thông tin cho hình ảnh bằng chữ. Thuộc tính này sẽ hiển thị cho người dùng thấy khi đường dẫn hình ảnh bị lỗi. Đặc biệt nó rất quan trọng trong SEO hình ảnh, nó giúp các Search Engine hiểu được hình ảnh của bạn nói về cái gì.

Ví dụ

<img src="url_hinh_anh_loi" alr="chèn ảnh trong html"/>

Thuộc tính width và height

Đây là thuộc tính giúp thiết lập độ rộng (width) và chiều cao (height) cho hình ảnh.

Ví dụ

<img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" width="500px" height="500px"/>

Thuộc tính align

Mặc định khi chèn hình ảnh trong HTML thì ảnh sẽ được căn trái vì vậy nên nếu bạn muốn căn chỉnh lại vị trí hình ảnh thì cần dùng đến thuộc tính align để thiết lập.

<img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" align="right"/>

Các giá trị của thuộc tính align gồm có: top, bottom, middle, left, right

Thuộc tính border

Thuộc tính border giúp xác định độ dày của đường viền xung quanh hình ảnh.

Ví dụ

<img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" border="1px"/>

Một số kết với giữa thẻ img với thẻ khác thường dùng

Kết hợp với thẻ a tạo image link

Bạn thường thấy khi click vào hình ảnh sẽ được dẫn đến 1 link nào đó đúng không? Đó là người ta sử dụng kết hợp thẻ a và thẻ img để tạo đó. Để làm điều đó chúng ta chỉ cần cho thẻ a bao quanh thẻ img như sau

<a href="https://nguyenhung.net">
    <img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" alt="blog cộng đồng"/>
</a>

Kết hợp thẻ a với thẻ map để gán link vào 1 vùng trên ảnh

Giả sử ở đây mình sẽ gán link vào chữ b và chữ o trong logo nguyenhung.net để khi click chuột vào chữ b hoặc chữ o thì bạn được đưa tới trang chủ Nguyễn Hùng, còn khi click vào các vùng khác sẽ không có gì hết.

Ví dụ

<img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" alt="blog cộng đồng" usemap="#logoblog"/>
<map name="logoblog">
  <area shape="rec" coords="26,0,68,56" href="https://nguyenhung.net" target="_blank"/>
  <area shape="circle" coords="104,43,13" href="https://nguyenhung.net" target="_blank"/>
</map>

Trong đoạn code trên chúng ta có:

Thẻ img có thêm thuộc tính usemap=”#logoblog”. Nó giúp chỉ định map có giá trị name=”logoblog” được áp dụng vào hình này.

Thẻ map sẽ có thuộc tính name=”logoblog” giúp thẻ img nhận diện đồng thời nằm bên trong nó còn có thẻ area giúp xác định hình khối bằng tọa độ và link đích.

Trong thẻ area có các thuộc tính sau giúp xác định vùng ảnh được chọn

shape: Xác định dạng hình khối cần chọn. Có các giá trị rec (hình chữ nhật), circle (hình tròn), poly (hình đa giác)
href: Link đích khi click vào vùng ảnh
coords: Tọa độ các điểm tạo thành vùng chọn với các xác định tùy thuộc vào dạng shape bên dưới

rect = x1, y1, x2, y2

Trong đó: x1, y1 là tọa độ góc trên bên trái của hình chữ nhật, x2, y2 là tọa độ góc dưới bên phải của hình chữ nhật. VD: Hình chữ nhật có tọa độ góc trên bên trái là 26,0 và tọa độ góc dưới bên phải là 68,56. Giá trị thuộc tính là coords=”26,0,68,56″.

circle = xc, yc, radius

Trong đó: xc, yc là các tọa độ của tâm vòng tròn và radius là bán kính vòng tròn. VD: Tâm của vòng tròn có tọa độ 104, 43 và có bán kính là 13 thì thuộc tính coords=”104,43,13″.

poly = x1, y1, x2, y2, x3, y3, … xn, yn

Trong đó các cặp x, y là tọa độ để xác định các đỉnh của hình đa giác nối từ điểm này đến điểm khác.

=> Tất cả các tọa độ đều lấy điểm trên cùng bên trái là gốc với tọa độ (0,0). Để xác định tọa độ của hình ảnh bạn có thể sử dụng photoshop hoặc phần mềm chỉnh sửa ảnh nào đó để xác định.

Lời kết

Như vậy qua bài viết này bạn đã có thể sử dụng thẻ img để chèn hình ảnh trong HTML rồi nhé. Ngoài ra, bạn có thể kết hợp thẻ img với một số thẻ khác để tạo ra những chức năng hữu ích với hình ảnh. Hi vọng với những chia sẻ của NguyenHung.Net bạn có thể tự học HTML tốt hơn tại nhà. Chúc bạn thành công!

Internet là nơi mình học được những gì về Wordpress, SEO, SEM, MMO và kiến thức máy tính. Những chia sẻ của mình là những thứ mình học được và đã làm thành công, có thể nó chưa được hoàn hảo nhưng nó sẽ hữu ích với bạn.