Ngôn ngữ HTML - Hình ảnh HTML

Thiết lập hình ảnh trong HTML

1. Khái quát

  • Các kiểu tập tin hình ảnh cho phép:  .jpg,gif,.png,.bmp
  • Sử dụng hình ảnh cần cân nhắc: SL ảnh/1trang, kích thước và độ phân giải,  nhằm cải thiện tốc độ truy cập.
  • Phải lưu hình ảnh ở vị trí nào đó trong thư mục chính của Website

2. Thiết lập ảnh nền cho trang
Sử dụng thuộc tính Background trong thẻ BODY

<BODY Background="Tên tập tin"  Bgproperties =Fixed>


Tên tập tin : Là địa chỉ tuyệt đối or tương đối của tập tin ảnh
Bgproperties =Fixed : Hình ảnh mờ bất động  

Ví dụ:  

 Bổ sung thuộc tính ảnh nền vào 1 trang html bất kỳ. Giả sử tập tin ảnh lưu trong thư mục Images.  Tập tin Htm lưu trong thư mục Htmls 

<BODY Background ="../Images/Bgr06.JPG" >


3. Chèn hình ảnh vào trang Web

<IMG Src="Tên tập tin"  title="Câu chú thích">
  • Tên tập tin : Là địa chỉ tuyệt đối or tương đối của ảnh
  • Câu chú thích: Hiển thị trên trình duyệt khi trỏ Mouse vào hình

Ví dụ:  

<img Src="../Images/P02.jpg">
<img Src="../Images/P06.jpg"  title="Đây là Bill Gates">

Định kích thước ảnh chèn

<IMG Src="Tên tập tin"  Width="n1"  Height="n2">

n1, n2 : Là tỷ lệ % so với kích thước đối tượng chứa nó hoặc kích thước tính theo Pixel.

Ví dụ:  <img  Src="../Images/P03.jpg" Width="150" Height="100">

  • Ảnh chèn kích thước rộng 150Pixel cao 100Pixel
  • <IMG Src="Images/P03.jpg" Width="30%" Height="50%">
  • Ảnh chèn kích thước rộng =30% chiều rộng cửa sổ. 50% Chiều cao cửa sổ.

Tạo khung viền cho ảnh

<IMG Src="Tên tập tin" Border="n">

n : Độ dày đường viền 

Canh lề hình ảnh.

<IMG Src="Tên tập tin" Align="Hướng">
Hướng Giải thích
Top Phần đầu thẳng hàng với dòng đầu văn bản.
Bottom Phần cuối thẳng hàng với dòng đầu văn bản.
Left Biên trái ảnh căn thẳng lề trái trang, văn bản bao quanh bên phải ảnh.
Right Biên phải ảnh căn thẳng lề phải trang, văn bản bao quang bên trái ảnh
Mặc định Nếu không khai báo mặc định là thuộc tính Bottom


Ví dụ:

<HTML>
<HEAD><TITLE> </TITLE></HEAD>
<BODY  >
 <H3 Align=Center>Máy tính "bó tay" với tài sản của Bill Gates</H3> 
<Img src="images/billgates.jpg" Align=Right Width=120
 	title="Bill Gates (trái) và Tổng thống Bồ Đào Nha" Border=1>
<P Align=Justify>
Bill Gates, người sáng lập Công ty phần mềm Microsoft và là người giàu nhất thế giới, cho biết cơ quan thuế của Mỹ phải lưu trữ các dữ liệu tài chính của ông vào một máy tính đặc biệt, bởi tài sản của ông quá nhiều.<BR>Phát biểu tại một hội nghị do Microsoft tổ chức ở Lisbon, thủ đô Bồ Đào Nha, ông nói rằng một máy tính thông thường không thể xử lý đúng các số liệu tài chính của ông ...</P>
</BODY>
</HTML>

Xem ví dụ

Các trình duyệt hộ trợ thẻ img