ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

              การจัดการรูปภาพในภาษา HTML มีการแทรกรูปภาพและข้อความกำกับภาพ การกำหนดตำแหน่งข้อความกับรูปภาพ การกำหนดภาพบนพื้นหลังหน้าเว็บเพจ

arrow2 การแทรกรูปภาพ

            เป็นการนำภาพมาแทรกบนส่วนต่างๆ  ที่ได้ทำการออกแบบไว้สามารถกำหนดเส้นทางของไฟล์รูปภาพโดยใช้แอตทริบิวต์ src="/ชื่อไฟล์รูปภาพ" อยู่ภายใต้แท็ก <img> ทำให้เว็บไซต์เกิดความสวยงามน่าสนใจยิ่งขึ้นเป็นแท็กเดี่ยวมีเพียงแท็กเปิดเท่านั้น 

 

รูปแบบการใช้งาน

 <img src= “ชื่อไฟล์รูปภาพ”>

  ตัวอย่าง

 <body>
<h1>แสดงรูปภาพ</h1>
<img src= “images/cat.jpg”>
</body>

      img basic

arrow2 การกำหนดข้อความกำกับภาพ

                    การใส่ข้อความกำกับภาพ  (alternative text)  เพื่อเป็นการอธิบายภาพกรณีไม่พบไฟล์ภาพหรือเกิดความผิดพลาดของบราวเซอร์ไม่สามารถแสดงผลรูปภาพได้​จะปรากฏข้อความกำกับรูปภาพทั้งยังช่วยในกรณีรูปภาพแสดงภาพไม่สมบูรณ์สามารถอ่านข้อความกำกับรูปภาพทำให้คาดเดาในสิ่งที่ไม่ปรากฏเป็นรูปภาพ  สามารถกำหนดได้โดยใช้์แอตทริบิวต์  alt  การกำหนดจะต้องอยู่ในแท็ก  

 

รูปแบบการใช้งาน

 <img src= “ชื่อไฟล์รูปภาพ” alt= “ข้อความกำกับภาพ”>

ตัวอย่าง

 <body>
<h1>ข้อความกำกับรูปภาพ</h1>
<img src= “cat.jpg” alt= “Maincoon”>
</body>

      img alt

arrow2 การกำหนดขนาดรูปภาพ

              สามารถกำหนดขนาดรูปภาพให้มีขนาดคงที่ ​​​​​​​​​​​​​ และเป็นการย่อรูปภาพให้มีขนาดที่เหมาะสมตามต้องการโดยการระบุความกว้าง  และความยาวของรูปภาพสามารถใช้แอตทริบิวต์  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>

     

img width hight

arrow2 การกำหนดกรอบรูปภาพ

                เพื่อเป็นการเน้นขอบของรูปภาพให้มีความชัดเจนนั้นสามารถกำหนดกรอบของรูปภาพด้วยการใช้แอตทริบิวต์ border กำหนดภายในแท็ก <img>

 

รูปแบบการใช้งาน

 <img src= “ชื่อไฟล์รูปภาพ” border= “ความหนาของกรอบรูปภาพ”>

 ตัวอย่าง

 <body>
<h1>การกำหนดกรอบให้กับภาพ</h1>
<img src= “images/cat.jpg”
alt= “Maincoon” border= “2” >
</body>

arrow2 การกำหนดตำแหน่งของรูปภาพ

               เป็นการกำหนดการจัดวางรูปในตำแหน่งต่าง  ๆ  ใช้แอตทริบิวต์  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>

      img align

arrow2 การกำหนดระยะห่างของรูปภาพ

               เป็นการเว้นระยะห่างให้กับรูปภาพการจัดเรียงไม่ชิดติดกันจนเกินไปทำให้การจัดวางรูปภาพเกิดความสวยงามมากยิ่งขึ้นใช้แอตทริบิวต์  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>

img v h space

 

arrow2 การกำหนดระยะข้อความให้พ้นขอบเขตรูปภาพ

               การแทรกรูปภาพกับข้อความหากต้องการกำหนดข้อความให้พ้นระยะขอบเขตของรูปภาพโดยข้อความจะอยู่ใต้รูปภาพ  ซึ่งเป็นการขึ้นบรรทัดใหม่ ดังนั้นจะต้องกำหนดแอตทริบิวต์  clear  ภายในแท็ก  
 และสามารถกำหนดตำแหน่งข้อความได้อีกด้วย

 

รูปแบบการใช้งาน

 <br clear= “ตำแหน่ง”>

 

arrow3 การกำหนดตำแหน่งของรูปภาพarrow3

ตำแหน่ง ความหมาย

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>

img br clear

arrow2 การกำหนดพื้นหลังบนเว็บ 

               การกำหนดพื้นหลังให้เป็นรูปภาพสามารถกำหนดได้โดยใช้แอตทริบิวต์  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>

      body background

arrow2 การกำหนดภาพพื้นหลังให้คงที่

               เราสามารถนำภาพมากำหนดให้เป็นพื้นหลังนั้น  กรณีภาพมีขนาดเล็กภาพนั้นจะสามารถเลื่อนไปตามขนาดของบราวเซอร์ ดังนั้นวิธีการกำหนดให้ภาพพื้นหลังไม่มีการเคลื่อนย้ายสามารถกำหนดได้โดยใช้แอตทริบิวต์  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>

 bgproperties