HTML .ใส่รูปภาพ (Image) ประเภทของไฟล์รูปภาพ HTML

Website AB191 update story HTML Of HTML .ใส่รูปภาพ (Image) ประเภทของไฟล์รูปภาพ HTML Wednesday, May 29, 2013 Story at now !!!

รูปภาพ (Image)

ประเภทของไฟล์รูปภาพ

1) GIF (Compuserve Graphic Interchange Format) มีนามสกุล .gif สามารถแสดงสีได้สูงสุดเพียง 256 สี จึงไม่สามารถไล่ระดับสีได้มากนัก นิยมสร้างเป็นภาพการ์ตูน ตัวอักษร ภาพเคลื่อนไหว สามารถทำพื้นโปร่งใสได้ (transparent)

2) JPEG (Joint Photographic Experts Group) มีนามสกุลเป็น .jpg สามารถแสดงสีได้สูงสุด ถึง 16.7 ล้านสี จึงเหมาะกับภาพถ่าย หรือภาพที่ใช้สีจำนวนมาก ไม่สามารถทำภาพโปร่งใส หรือภาพเคลื่อนไหวได้ 

การแสดงรูปภาพ

มีรูปแบบการใช้งานดังนี้

<img src="ไฟล์รูปภาพ" alt="คำอธิบายรูปภาพ" width="number" height="number">

หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้

<img src="ไฟล์รูปภาพ" alt="คำอธิบายรูปภาพ" width="number" height="number" />

attribute ของรูปภาพ ได้แก่
- src="ไฟล์รูปภาพ" 
- alt="คำอธิบายรูปภาพ" 
- width="number" ความกว้างของรูป 
- height="number" ความสูงของรูป 
ค่าของ attribute width และ height เป็นตัวเลข หน่วยเป็น px หรือ %ของหน้าจอหรือ containner ที่บรรจุรูปภาพอยู่ 
- align = "top" | "middle" | "bottom" จัดวางตำแหน่งรูปภาพกับข้อความ
- border="number" ขนาดกรอบของรูป
- vspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวตั้ง
- hspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวนอน

Example แสดงรูปภาพ และคำอธิบาย

<img src="../images/flower.jpg" alt="ภาพดอกไม้ทิวลิป" />

Outputลองเอาเมาส์วางบนรูป จะมีคำอธิบายแสดงขึ้นมาค่ะ

Example แสดงรูปภาพ และขอบ

<img src="../images/flower.jpg" border="3"/>

OutpuT

Example ปรับขนาดรูปภาพ ด้วย attribute width และ height

<img src="../images/flower.jpg" width="200px" height="200px" />
<img src="../images/flower.jpg" width="200px" height="240px" />
<img src="../images/flower.jpg" width="50%" />

Output

 

การจัดวางตำแหน่งรูปภาพกับข้อความ

Example ข้อความอยู่ด้านบน

ข้อความหน้ารูปภาพ<img src="images/ryoma.jpg" />

<img src="../images/ryoma.jpg" />ข้อความหลังรูปภาพ

รูปภาพ<img src="../images/ryoma.jpg" />ระหว่างข้อความ

รูปภาพ<img src="../images/ryoma.jpg" align="top" />ระหว่างข้อความ จัดให้วางด้านบน align top

รูปภาพ<img src="../images/ryoma.jpg" align="middle" />ระหว่างข้อความ จัดให้วางตรงกลาง align middle

รูปภาพ<img src="../images/ryoma.jpg" align="bottom" />ระหว่างข้อความ จัดให้วางด้านล่าง align bottom

Output

ข้อความหน้ารูปภาพ 

ข้อความหลังรูปภาพ 

รูปภาพระหว่างข้อความ 


รูปภาพระหว่างข้อความ จัดให้วางด้านบน align top 

รูปภาพระหว่างข้อความ จัดให้วางตรงกลาง align middle 

รูปภาพระหว่างข้อความ จัดให้วางด้านล่าง align bottom

กำหนดระยะห่างระหว่างรูปกับข้อความ

Example

ให้ข้อความ<img src="../images/ryoma.jpg" vspace="20" />วางห่างออกมาจากรูป ในแนวตั้ง

ให้ข้อความ<img src="../images/ryoma.jpg" hspace="20" />วางห่างออกมาจากรูป ในแนวนอน 

Output

ให้ข้อความวางห่างออกมาจากรูป ในแนวตั้ง 


ให้ข้อความวางห่างออกมาจากรูป ในแนวนอน

Update Story at Wednesday, May 29, 2013 In Category HTML Story HTML .ใส่รูปภาพ (Image) ประเภทของไฟล์รูปภาพ HTML