Hình ảnh trong HTML Hình ảnh là rất quan trọng trong diễn tả và làm đẹp các khái niệm phức tạp theo một cách đơn giản nhất trên trang Web của bạn.. Chương này sẽ đưa bạn qua các bước để
Trang 1Hình ảnh trong HTML
Hình ảnh là rất quan trọng trong diễn tả và làm đẹp các khái niệm phức tạp theo một cách đơn giản nhất trên trang Web của bạn Chương này sẽ đưa bạn qua các bước để sử dụng hình ảnh trong trang của mình
Chèn hình ảnh trong HTML - Thẻ img trong HTML
Bạn có thể chèn bất cứ hình ảnh nào vào trang Web của bạn bằng cách sử dụng
thẻ <img> Dưới đây là cú pháp đơn giản để sử dụng thẻ này
<img src = "đường dẫn url tới nơi chứa hình ảnh" danh-s á ch-thu ộ c-t í nh />
Thẻ <img> này là một thẻ trống, nghĩa là nó chỉ có thể chứa danh sách các thuộc tính và không có thẻ đóng
Ví dụ
Bạn thử ví dụ sau:
<!DOCTYPE html> <html> <head> <title> Hinh anh trong HTML </title> </head> <body>
<p> Vi du the img trong HTML </p> <img src = "./images/logo3.png" alt = "Hình ảnh trong HTML" /> </body> </html>
Kết quả hiển thị:
Vi du the img trong HTML
Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF trên cơ sở sở thích của mình
nhưng chắc chắn rằng bạn xác định rõ tên file ảnh trong thuộc tính src Tên file là phân biệt
chữ hoa và thường
Thuộc tính alt là một thuộc tính ủy quyền, nếu hình ảnh không hiển thị, nó sẽ xác định một
văn bản thay thế cho hình ảnh đó
Trang 2Thiết lập vị trí của hình ảnh trong HTML
Chúng ta thường giữ tất cả hình ảnh trong một thư mục riêng Vì thế hãy lưu các file HTML
(test.htm) trong thư mục chính và tạo thư mục phụ imagetrong thư mục chính để lưu file
hình ảnh (test.png)
Ví dụ
Giả sử vị trí tệp hình ảnh của chúng ta là "image/test.png", bạn thử ví dụ sau:
<!DOCTYPE html> <html> <head> <title> Hinh anh trong HTML </title> </head> <body>
<p> Vi du the img trong HTML </p> <img src = "./images/logo3.png" alt = "Hình ảnh trong HTML" /> </body> </html>
Nó sẽ tạo ra kết quả là:
Vi du the img trong HTML
Thiết lập chiều cao/độ rộng hình ảnh trong HTML
Bạn có thể thiết lập chiều cao/độ rộng của hình ảnh trên cơ sở sử dụng thuộc
tính width vàheight Bạn có thể xác định chiều độ rộng, chiều cao của hình sử dụng mối
quan hệ hoặc là với Pixel hoặc là với kích thước thật của hình đó
Ví dụ
<!DOCTYPE html> <html> <head> <title> Thiet lap chieu cao va do rong hinh
anh </title> </head> <body> <p> Vi du xac dinh do rong va chieu cao cho hinh anh </p> <img src = "./images/logo3.png" alt = "Hình ảnh trong HTML" width = "150" height = "100" /> </body> </html>
Kết quả hiển thị là:
Vi du xac dinh do rong va chieu cao cho hinh anh
Trang 3Thiết lập Border cho hình ảnh trong HTML
Theo mặc định thì sẽ có một Border quanh hình ảnh, bạn có thể xác định độ dày của viền
bằng Pixel sử dụng thuộc tính border Nếu độ dày bằng 0, nghĩa là sẽ không có Border
quanh hình ảnh
Ví dụ
<!DOCTYPE html> <html> <head> <title> Thiet lap border cho hinh anh trong
HTML </title> </head> <body> <p> Vi du thiet lap border cho hinh anh </p> <img
src = "./images/logo3.png" alt = "Hình ảnh trong HTML" border = "3" /> </body> </html>
Chạy đoạn mã trên sẽ tạo ra kết quả sau:
Vi du thiet lap border cho hinh anh
Căn chỉnh hình ảnh trong HTML
Theo mặc định thì hình ảnh sẽ được căn chỉnh theo cạnh trái của trang web, nhưng bạn có
thể sử dụng thuộc tính align để thiết lập lại sự căn chỉnh này: trung tâm hoặc bên phải
Ví dụ
<!DOCTYPE html> <html> <head> <title> Can chinh hinh anh trong HTML </title>
</head> <body> <p> Vi du can chinh hinh anh </p> <img src = "./images/logo3.png" alt = "Hình ảnh trong HTML" border = "3" align = "right" /> </body> </html>
Nó sẽ tạo ra kết quả sau:
Vi du can chinh hinh anh
Trang 4Loạt bài hướng dẫn học lập trình HTML cơ bản và nâng cao của chúng tôi dựa trên
nguồn tài liệu của: Tutorialspoint
Follow https://www.facebook.com/vietjackteam/ để tiếp tục theo dõi các loạt bài mới nhất
về Java,C,C++,Javascript,HTML,Python,Database,Mobile mới nhất của chúng tôi
Click http://click.accesstrade.vn/adv.php?rk=0002k20003u4 để đăng ký tham gia các khóa học trực tuyến về tất cả các ngôn ngữ lập trình, thiết kế web, photoshop tại tổ hợp công nghệ giáo dục TOPICA, cũng như để ủng hộ cho website vietjack.com