การจัดการรูปภาพในภาษา HTML มีการแทรกรูปภาพและข้อความกำกับภาพ การกำหนดตำแหน่งข้อความกับรูปภาพ การกำหนดภาพบนพื้นหลังหน้าเว็บเพจ
การแทรกรูปภาพ
เป็นการนำภาพมาแทรกบนส่วนต่างๆ ที่ได้ทำการออกแบบไว้สามารถกำหนดเส้นทางของไฟล์รูปภาพโดยใช้แอตทริบิวต์ src="/ชื่อไฟล์รูปภาพ" อยู่ภายใต้แท็ก <img> ทำให้เว็บไซต์เกิดความสวยงามน่าสนใจยิ่งขึ้นเป็นแท็กเดี่ยวมีเพียงแท็กเปิดเท่านั้น
รูปแบบการใช้งาน
<img src= “ชื่อไฟล์รูปภาพ”>
ตัวอย่าง
<body>
<h1>แสดงรูปภาพ</h1>
<img src= “images/cat.jpg”>
</body>
การกำหนดข้อความกำกับภาพ
การใส่ข้อความกำกับภาพ (alternative text) เพื่อเป็นการอธิบายภาพกรณีไม่พบไฟล์ภาพหรือเกิดความผิดพลาดของบราวเซอร์ไม่สามารถแสดงผลรูปภาพได้จะปรากฏข้อความกำกับรูปภาพทั้งยังช่วยในกรณีรูปภาพแสดงภาพไม่สมบูรณ์สามารถอ่านข้อความกำกับรูปภาพทำให้คาดเดาในสิ่งที่ไม่ปรากฏเป็นรูปภาพ สามารถกำหนดได้โดยใช้์แอตทริบิวต์ alt การกำหนดจะต้องอยู่ในแท็ก
รูปแบบการใช้งาน
<img src= “ชื่อไฟล์รูปภาพ” alt= “ข้อความกำกับภาพ”>
ตัวอย่าง
<body>
<h1>ข้อความกำกับรูปภาพ</h1>
<img src= “cat.jpg” alt= “Maincoon”>
</body>
การกำหนดขนาดรูปภาพ
สามารถกำหนดขนาดรูปภาพให้มีขนาดคงที่ และเป็นการย่อรูปภาพให้มีขนาดที่เหมาะสมตามต้องการโดยการระบุความกว้าง และความยาวของรูปภาพสามารถใช้แอตทริบิวต์ width และ height กำหนดภายในแท็ก <img>
รูปแบบการใช้งาน
<img src= “ชื่อไฟล์รูปภาพ” width= “ความกว้างของรูปภาพ” height= “ความสูงของรูปภาพ>
ตัวอย่าง
<body>
<h1>การกำหนดขนาดรูปภาพ</h1>
<img src= “images/cat.jpg”> <!--ไม่ได้กำหนดขนาดของรูปภาพ-->
<img src= “images/cat.jpg” width= “150” height= “200”>
</body>
การกำหนดกรอบรูปภาพ
เพื่อเป็นการเน้นขอบของรูปภาพให้มีความชัดเจนนั้นสามารถกำหนดกรอบของรูปภาพด้วยการใช้แอตทริบิวต์ border กำหนดภายในแท็ก <img>
รูปแบบการใช้งาน
<img src= “ชื่อไฟล์รูปภาพ” border= “ความหนาของกรอบรูปภาพ”>
ตัวอย่าง
<body>
<h1>การกำหนดกรอบให้กับภาพ</h1>
<img src= “images/cat.jpg”
alt= “Maincoon” border= “2” >
</body>
การกำหนดตำแหน่งของรูปภาพ
เป็นการกำหนดการจัดวางรูปในตำแหน่งต่าง ๆ ใช้แอตทริบิวต์ align โดยค่าที่ใช้กำหนด คือ กำหนดให้ข้อความเสมอขอบบนของรูปภาพ (top), กำหนดให้ข้อความอยู่กึ่งกลางของรูปภาพ (middle), กำหนดให้ข้อความเสมอขอบล่างของรูปภาพ (bottom), กำหนดให้ภาพอยู่ด้านซ้าย (left), กำหนดให้ภาพอยู่ด้านขวาของข้อความ (right)
รูปแบบการใช้งาน
<img src= “ชื่อไฟล์รูปภาพ” align= “ตำแหน่ง”>
ตัวอย่าง
<body>
<img src= “images/mainecoon.jpg” alt= “Maincoon”
align= “top”>ชื่อของพันธุ์ มาจากชื่อเมือง Maine กับคำว่า
Raccoon <b> ::ข้อความจะอยู่ด้านบนของรูปภาพ</b><hr>
<img src= “images/mainecoon.jpg” alt= “Maincoon” align= “middle”>
ชื่อของพันธุ์ มาจากชื่อเมือง Maine กับคำว่า Raccoon
<b> ::ข้อความจะอยู่กึ่งกลางของรูปภาพ</b><hr>
<img src= “images/mainecoon.jpg” alt= “Maincoon” align= “bottom”>
ชื่อของพันธุ์ มาจากชื่อเมือง Maine กับคำว่า Raccoon
<b> ::ข้อความจะอยู่ด้านล่างของรูปภาพ</b><hr>
<img src= “images/mainecoon.jpg” alt= “Maincoon” align= “right”>
ชื่อของพันธุ์ มาจากชื่อเมือง Maine กับคำว่า Raccoon
<b> ::รูปภาพจะอยู่ด้านขวาของข้อความ</b><hr>
<img src= “images/mainecoon.jpg” alt= “Maincoon” >
ชื่อของพันธุ์ มาจากชื่อเมือง Maine กับคำว่า Raccoon
<b>::รูปภาพจะอยู่ด้านซ้ายของข้อความและข้อความจะอยู่ด้านบนของรูปภาพ</b>
</body>
การกำหนดระยะห่างของรูปภาพ
เป็นการเว้นระยะห่างให้กับรูปภาพการจัดเรียงไม่ชิดติดกันจนเกินไปทำให้การจัดวางรูปภาพเกิดความสวยงามมากยิ่งขึ้นใช้แอตทริบิวต์ vspace การกำหนดระยะห่างแนวตั้ง (vertical space) ด้านบนและล่าง hspace การกำหนดระยะห่างแนวนอน (horizontal space) ด้านซ้ายและขวา
รูปแบบการใช้งาน
<img src= “ชื่อไฟล์รูปภาพ”
vspace= “ระยะห่างบน-ล่าง”
hspace= “ระยะห่างซ้าย-ขวา”>
ตัวอย่าง
<body>
<img src=”images/mainecoon.jpg” alt=”Maincoon” >
ชื่อของพันธุ์ มาจากชื่อเมือง Maine กับคำว่า Raccoon<br>
<img src=”images/mainecoon.jpg” alt=”Maincoon”
vspace=”50” hspace=”50”>
ชื่อของพันธุ์ มาจากชื่อเมือง Maine กับคำว่า Raccoon<br>
<img src=”images/mainecoon.jpg” alt=”Maincoon”
vspace=”100” hspace=”100”>
ชื่อของพันธุ์ มาจากชื่อเมือง Maine กับคำว่า Raccoon<br>
</body>
การกำหนดระยะข้อความให้พ้นขอบเขตรูปภาพ
การแทรกรูปภาพกับข้อความหากต้องการกำหนดข้อความให้พ้นระยะขอบเขตของรูปภาพโดยข้อความจะอยู่ใต้รูปภาพ ซึ่งเป็นการขึ้นบรรทัดใหม่ ดังนั้นจะต้องกำหนดแอตทริบิวต์ clear ภายในแท็ก
และสามารถกำหนดตำแหน่งข้อความได้อีกด้วย
รูปแบบการใช้งาน
<br clear= “ตำแหน่ง”>
การกำหนดตำแหน่งของรูปภาพ
| ตำแหน่ง | ความหมาย |
|
left |
ขึ้นบรรทัดใหม่ในบริเวณด้านซ้ายไม่มีวัตถุใดวางอยู่ |
| right | ขึ้นบรรทัดใหม่ในบริเวณด้านขวาไม่มีวัตถุใดวางอยู่ |
| all |
ขึ้นบรรทัดใหม่ในบริเวณด้านซ้ายและขวาไม่มีวัตถุใดวางอยู่ |
| none | ขึ้นบรรทัดใหม่แบบธรรมดา โดยปกติจะกำหนดให้อัตโนมัติ หรือเป็นค่าเริ่มต้น |
ตัวอย่าง
<body>
<img src=”images/mainecoon.jpg” align=”top”>
แมวเมนคูน (Maine Coon) เป็นแมวที่ผสมพันธุ์กันในอเมริกา
เมนเนื่องจากพบแม่พันธุ์ที่รัฐริมมหาสมุทรแอตแลนติก ด้านอเมริกาเหนือ
คือ รัฐเมน ส่วนชื่อ คูน มาจากพวงหางมีลักษณะเป็นพวงเหมือนตัวแรคคูน
<img src=”images/mainecoon.jpg” >
แมวเมนคูน (Maine Coon) เป็นแมวที่ผสมพันธุ์กันในอเมริกา
เมนเนื่องจากพบแม่พันธุ์ที่รัฐริมมหาสมุทรแอตแลนติก <br clear=”all”>
ด้านอเมริกาเหนือ คือ รัฐเมน ส่วนชื่อ คูน มาจากพวงหางมีลักษณะเป็นพวงเหมือนตัวแรคคูน
</body>
การกำหนดพื้นหลังบนเว็บ
การกำหนดพื้นหลังให้เป็นรูปภาพสามารถกำหนดได้โดยใช้แอตทริบิวต์ background กำหนดในส่วนของแท็ก หากภาพมีขนาดเล็กจะจัดเรียงภาพจนเต็มพื้นหลังให้กับเว็บเพจ ดังนั้นจึงควรใช้ภาพที่มีรายละเอีียดที่ไม่ซับซ้อน และสีควรเป็นสีอ่อน เพราะอาจจะทำใหมองแล้วไม่สบายตาเป็นผลทำให้เว็บเพจความสวยงาม และความน่าสนใจลดลง
รูปแบบการใช้งาน
<body backgroud= “ไฟล์รูปภาพ”>
ข้อความ
</body>
ตัวอย่าง
<body background= “images/bg.jpg” >
<img src=”images/mainecoon.jpg” align= “top”>
แมวเมนคูน (Maine Coon) เป็นแมวที่ผสมพันธุ์กันในอเมริกา
เมนเนื่องจากพบแม่พันธุ์ที่รัฐริมมหาสมุทรแอตแลนติก ด้านอเมริกาเหนือ
คือ รัฐเมน ส่วนชื่อ คูน มาจากพวงหางมีลักษณะเป็นพวงเหมือนตัวแรคคูน
<img src= “images/mainecoon.jpg” >
แมวเมนคูน (Maine Coon) เป็นแมวที่ผสมพันธุ์กันในอเมริกา
เมนเนื่องจากพบแม่พันธุ์ที่รัฐริมมหาสมุทรแอตแลนติก ด้านอเมริกาเหนือ
คือรัฐเมน ส่วนชื่อ คูน มาจากพวงหางมีลักษณะเป็นพวงเหมือนตัวแรคคูน
</body>
การกำหนดภาพพื้นหลังให้คงที่
เราสามารถนำภาพมากำหนดให้เป็นพื้นหลังนั้น กรณีภาพมีขนาดเล็กภาพนั้นจะสามารถเลื่อนไปตามขนาดของบราวเซอร์ ดังนั้นวิธีการกำหนดให้ภาพพื้นหลังไม่มีการเคลื่อนย้ายสามารถกำหนดได้โดยใช้แอตทริบิวต์ bgproperties กำหนดอยู่ในส่วนของแท็ก ค่าที่ใช้กำหนดให้ภาพพื้นหลังคงที่ fixed เพียงค่าเดียวเท่านั้นซึ่งการกำหนดค่าคงที่ให้กับภาพพื้นหลังนั้นทำได้กับบราวเซอร์ Internet Exprolorer (IE) โดยบราวเซอร์อื่นจะไม่รู้จัก เนื่องจากเป็นคุณสมบัติพิเศษของบราวเซอร ์ Internet Exporlorer เท่านั้น
รูปแบบการใช้งาน
<body bgproperties= “กำหนดค่า”>
ข้อความ
</body>
ตัวอย่าง
<body background= “images/bg.jpg” bgproperties= “fixed”>
<img src=”images/mainecoon.jpg” align= “top”>
แมวเมนคูน (Maine Coon) เป็นแมวที่ผสมพันธุ์กันในอเมริกา
เมนเนื่องจากพบแม่พันธุ์ที่รัฐริมมหาสมุทรแอตแลนติก ด้านอเมริกาเหนือ
คือรัฐเมน ส่วนชื่อ คูน มาจากพวงหางมีลักษณะเป็นพวงเหมือนตัวแรคคูน
<img src= “images/mainecoon.jpg” >แมวเมนคูน (Maine Coon)
เป็นแมวที่ผสมพันธุ์กันในอเมริกา เมนเนื่องจากพบแม่พันธุ์ที่รัฐริมมหาสมุทรแอตแลนติก
ด้านอเมริกาเหนือ คือรัฐเมน ส่วนชื่อ คูน มาจากพวงหางมีลักษณะเป็นพวงเหมือนตัวแรคคูน
</body>
