html: สิงหาคม 2012

รูปแบบโค้ดในการแทรกรูปภาพ

การใส่รูปในเว็บเพจ

HTML

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

ฟอร์ตแมตของไฟต์ที่เราจะเห็นกันบ่อยๆ
 1.JPEG เหมาะสำหรับภาพถ่าย หรือภาพที่มีความละเอียดและจำนวนสีมากๆ
 2.GIF เหมาะสำหรับภาพลายเส้น เช่นการ์ตูน ตัวหนังสือ หรือภาพที่ต้องการสร้างให้ภาพโปร่งใส หรือ ทำให้เคลื่อนไหวได้
 3.PNG เหมาะสำหรับภาพที่ต้องการให้โปร่งแสง ขนาดไฟล์จะใหญ่กว่า JPEG แต่คุณภาพจะดีกว่า JPEG
สำหรับการเปลี่ยนฟอร์ตแมตของภาพเราจะใช้โปรแกรมเช่น Photoshop ในการเปลี่ยนซึ่งเรื่องนี้เราจะไปศึกษากันที่หัวข้อ Photoshop กันต่อไป ซึ่งฟอร์ตแมตของภาพจะมีผลมากต่อการทำเว็บไซต์ของเรา
 2.ใส่รูปจาก directory ที่ต่างกัน
จะเห็นว่าการใส่รูปจาก directory ที่ต่างกันใช้หลักการเดียวกับการเขียน hyperlink นั่นเอง ซึ่งหากไม่เข้าใจสามารถกลับไปดูได้ที่หัวข้อ เชื่อมต่อเอกสารของเราด้วย hyperlink
 3.The Alt Attribute
รูปแบบ <img src="boat.gif" alt="Big Boat"> เราใช้ alt Attribute เพื่อแสดงผลในกรณีที่ไม่สามารถโหลดรูปได้ และแสดงผลเมื่อมีเมาส์ไปอยู่ด้านบน นอกจากนั้นยังไม่ผลต่อการคนหาของ google อีกด้วย
 4.การใส่รูปพื้นหลัง
รูปพื้นหลังจะถูกแสดงผลซ้ำกันเองโดยเราแม้ว่ารูปจะรูปจะมีขนาดเล็ก หรือสั้นเพียงใดก็ตาม
 5.การจัดตำแหน่งของรูปในตัวอักษร
จะเป็นการจัดตำแหน่งของรูปในตัวอักษร เมื่อเรามีตัวอักษรกับภาพอยู่ด้วยกัน เราจะใช้ Align Attribute เพื่อจัดตำแหน่งของภาพ
 6.การจัดตำแหน่งของรูปให้ชิดซ้าย หรือขวา
จะเป็นการจัดรูปของเราให้ชิดซ้ายหรือชิดขวา เมื่อแสดงผล
 7.การใช้คำสั่งกำหนดขนาดของรูป
การใส่ขนาดของรูปนั้นเราจะใส่หรือไม่ใส่ก็ได้ ถ้าเราใส่ขนาด การแสดงผลของรูปก็จะเปลี่ยนแปลงตามที่เราใส่ แต่ขนาดของรูปจริงๆจะไม่เปลี่ยนแปลง
 8.ทำให้รูปภาพเป็น hyperlink
การทำให้รูปภาพเป็น hyperlink ก็ให้ใส่คำสั่งของ hyperlink ครอบคำสั่งแสดงภาพ เท่านั้นเอง
 9.คำสั่งที่ใช้ในการแสดงพิกัดในภาพ
เป็นการแสดงพิกัดที่อยู่ในภาพโดยจะแสดงที่ status bar เป็นพิกัดค่า X,Y ตามจุดที่เมาส์ของเราอยู่ด้านบน โดยจุด 0,0 จะอยู่ที่ด้ายซ้ายบนของภาพ
 10.สร้าง hyperlink ด้วยพิกัดในรูปภาพ
ในหัวข้อที่แล้วเราทราบพิกัดจุดของภาพแล้ว ในหัวข้อนี้จะใช้พิกัดจุดในภาพมาสร้าง hyperlink ซึ่งในตัวอย่างจะเห็นว่ามี hyperlink ในรูปภาพอยู่ 2 ที่คือ keyboard , mouse.

คำสั่งที่ใช้ประกอบกับคำสั่งแสดงภาพ

1. กำหนดให้ภาพอยู่ทางซ้ายและข้อความ(ที่ตามมา) อยู่ทางขวา เพิ่มคำสั่ง ALIGN=LEFT ไว้ในคำสั่งแสดงภาพ เช่น

2. กำหนดให้ภาพอยู่ทางขวาและข้อความ(ที่ตามมา) อยู่ทางซ้าย เพิ่มคำสั่ง ALIGN=RIGHT ไว้ในคำสั่งแสดงภาพ เช่น

3. กำหนดขนาดของช่องว่างระหว่างภาพกับข้อความ(ที่ล้อมรอบ) ในแนวนอน ใช้คำสั่ง HSPACE=ค่าตัวเลข(pixel) เช่น

4. กำหนดขนาดของช่องว่างระหว่างภาพกับข้อความ(ที่ล้อมรอบ) ในแนวดิ่ง ใช้คำสั่ง VSPACE=ค่าตัวเลข(pixel) เช่น

5. สามารถเขียนคำสั่งในข้อ 1-4 ประกอบกันได้ เช่น

กรณีที่ 1 รูปภาพอยู่ที่เดียวกับไฟล์เว็บเพจ
คือไฟล์รูปภาพที่อยู่ในตัวเครื่อง จะต้องอยู่ใน Folder เดียวกับไฟล์เว็บเพจ

ถ้ารูปภาพอยู่ในโฟลเดอร์เดียวกับไฟล์ HTML ไม่ต้องระบุไดรฟ์และโฟลเดอร์ที่รูปภาพอยู่ ให้ระบุชื่อไฟล์รูปภาพกับสกุลเท่านั้น

ตัวอย่าง การแทรกภาพชื่อ girl1.gif ซึ่งอยู่ในโฟล์เดอร์เดียวกัน

<html>
<body>
<center><h3>การแทรกภาพที่อยู่ในโฟล์เดอร์เดียวกัน </h3>
<img src= "girl1.gif">
</center>
</body>
</html>

ผลจากตัวอย่าง

การแทรกภาพที่อยู่ในโฟล์เดอร์เดียวกัน

ตัวอย่าง การแทรกภาพชื่อ girl2.gif ซึ่งอยู่ในโฟล์เดอร์ย่อยชื่อ pic6

<html>
<body>
<center><h3>การแทรกภาพที่อยู่ในโฟล์เดอร์</h3>
<img src= "pic6/girl1.gif">
</center>
</body>
</html>

ผลจากตัวอย่าง

การแทรกภาพที่อยู่ในโฟล์เดอร์

จากตัวอย่างจะเห็นได้ว่าถ้ารูปภาพอยู่ในโฟล์เดอร์จะต้องระบุชื่อโฟล์เดอร์ด้วย เช่น รูปภาพอยู่ในโฟล์เดอร์ pic6 เราจึงแทรกภาพด้วยคำสั่ง
<img src= "pic6/girl1.gif">

กรณีที่ 2 รูปภาพอยู่คนละที่กับไฟล์เว็บเพจ

รูปแบบโค้ด

<IMG SRC ="N/X.Y"> (โดยที่ Nคือชื่อโฟลเดอร์ที่อยู่ของภาพ/X คือชื่อไฟล์รูปภาพที่ต้องการแสดง.Yคือนามสกุลของภาพ)

เช่น <IMG SRC ="photo/zen2.jpg">

คำสั่ง หรือ Tag

 Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ

 Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, เป็นต้น

 Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่

 <tag> เราเรียกว่า tag เปิด

 </tag> เราเรียกว่า tag ปิด

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

คำสั่ง <IMG SRC = "ชื่อรูปภาพ" ALIGN="ตำแหน่ง" >

align=left หรือ center หรือ Right หรือ top หรือ bottom : เป็นการกำหนดตำแหน่งของรูปว่าจะให้อยู่ด้านซ้าย ขวา หรือ ตรงกลาง ส่วน top กับ bottom ใช้จัดตำแหน่งอักษร เช่น จัดรูปให้อยู่ด้านขวา <img src="sura.jpg" align=right>

ตารางแสดงคำสั่งการจัดตำแหน่งของภาพ

การแสดงผล	คำสั่งที่ใช้กำหนดตำแหน่งข้อความ	ตำแหน่งที่แสดงผลข้อความ
1. แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ	ALIGN = "LEFT"	ตำแหน่งซ้ายของจอภาพ
1. แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ	ALIGN = "RIGHT"	ตำแหน่งขวาของจอภาพ
2. แบบแนวนอนเป็นคำสั่งที่ใช้กับข้อความ	ALIGN = "TOP"	ตำแหน่งบนสุดของรูปภาพ
	ALIGN = "MIDDLE","ABSMIDDLE"	ตำแหน่งกึ่งกลางของรูปภาพ
	ALIGN = "BOTTOM","BASELINE","ABSBOTTOM"	ตำแหน่งล่างสุดของรูปภาพ

<HTML>
<HEAD>
<TITLE> การจัดตำแหน่งภาพ</TITLE>
</HEAD>
<BODY bgcolor=white>

<div align="center">การวางตำแหน่งของภาพ</div>
 <img src = "images/cl_breakdance.gif" align = "TOP">
ข้อความนี้อยู่ส่วนบนของรูปภาพ (align = top) 
<hr>
 <img src = "images/cl_breakdance.gif" align = "MIDDLE">
ข้อความนี้อยู่ส่วนกลางของรูปภาพ (align = middle) 
<hr>
 <img src = "images/cl_breakdance.gif" align = "BOTTOM">
ข้อความนี้อยู่ส่วนล่างของรูปภาพ (align = bottom) 
<hr>
 <img src = "images/cl_breakdance.gif" align = "LEFT">
เป็นการกำหนดรูปภาพให้ชิดซ้าย (align = left) 
 
 <hr>
 <img src = "images/cl_breakdance.gif" align = "RIGHT">
เป็นการกำหนดรูปภาพให้ชิดขวา (align = right) และ ข้อความนี้อยู่ส่วนบนของรูปภาพ 

<div align="center">
 
 
 
<hr>

</BODY>
</HTML>

การวางตำแหน่งของภาพ

ข้อความนี้อยู่ส่วนบนของรูปภาพ (align = top)

ข้อความนี้อยู่ส่วนกลางของรูปภาพ (align = middle)

ข้อความนี้อยู่ส่วนล่างของรูปภาพ (align = bottom)

เป็นการกำหนดรูปภาพให้ชิดซ้าย (align = left)

เป็นการกำหนดรูปภาพให้ชิดขวา (align = right) และ ข้อความนี้อยู่ส่วนบนของรูปภาพ

การเปลี่ยนขนาดรูปภาพ

รูปภาพบนคอมพิวเตอร์ไม่เหมือนกับรูปถ่าย รูปภาพคอมฯประกอบขึ้นจากเม็ดสีเล็กๆจำนวนมาก ซึ่งแต่ละเม็ดสีถูกเรียกสั้นๆว่า พิกเซล(pixel) ดังนั้นให้คุณจำไว้ว่าในบทนี้ ตัวเลขของขนาดที่เราจะพูดถึงอยู่ในรูปของพิกเซล ไม่ได้อยู่ในรูปนิ้วหรือเซนติเมตรหรืออื่นๆ

ภาพในคอมฯทุกๆภาพประกอบขึ้นจากพิกเซลจำนวนมาก ยิ่งจำนวนพิกเซลต่อนิ้วของภาพมีมากขึ้น ภาพนั้นจะมีรายละเอียดมากขึ้น และปรากฎให้เราเห็นได้ แต่ความจุข้อมูลจะมากขึ้น และใช้พื้นที่ในคอมฯของคุณเพิ่มขึ้นเช่นกัน ภาพบนเว็บเกือบทั้งหมดจะมีความละเอียดอยู่ระหว่าง 72 ถึง 100 พิกเซลต่อนิ้ว ซึ่งจะให้ละเอียดน้อยหรือมากกว่านี้ได้ แต่ว่าระดับ 72-100 เป็นจุดที่คุ้มกันระหว่าง ความจุที่ไม่มากไปและรายละเอียดที่กำลังดี

ทุกภาพถูกระบุขนาดเป็นพิกเซล ด้วยเหตุนี้คุณจึง สามารถระบุขนาดใหม่ได้ด้วยตัวเลขพิกเซล ยกตัวอย่างรูปผืนนาที่ผมใช้อยู่ มีความกว้าง 305 พิกเซล และสูง 213 พิกเซล อ้าว !? แล้วผมรู้ได้อย่างไรกัน ...รู้ได้จากโปรแกรม ที่คุณใช้เปิดรูปนั้นครับ เช่น คุณอาจดับเบิ้ลคลิ๊กที่ไฟล์รูป โปรแกรม Photoshop(หรืออื่นๆ) จะเปิดรูปให้คุณ และคุณสามารถกดดูขนาดรูปได้โดยเข้าไปในคำสั่งแก้ไขขนาดรูป จะมีบอกขนาดในแบบพิกเซลของรูปอยู่ แต่จะยุ่งยากครับ ผมแนะนำให้นำรูปมาลงในหน้าเว็บที่คุณสร้าง แล้วเปิดรูปออกมาดู แล้วคลิ๊กขวาที่รูปแล้วกดที่ propeties ซึ่งอยู่ล่างสุด (สำหรับ Internet Explorer) จะเห็นขนาดพิกเซลของรูปอยู่ข้าง Dimension : ลองทำดูสิครับ กับรูปผืนนาข้างบน

การปรับขนาดรูปทำได้โดยการกำหนดขนาดใหม่ ทั้งความกว้างและความสูง ในหน่วยของพิกเซล ด้วยการเพิ่มคำสั่งปรับความกว้าง(Width)และความสูง(Height)ลงในคำสั่ง IMG <IMG WIDTH="##" HEIGHT="##" SRC="na.jpg">
จะวางคำสั่งทั้งสองไว้หลัง SRC="--" ก็ได้ครับ คุณจะแทน ## ด้วยเลขพิกเซลของความกว้างและสูงที่คุณต้องการ หรือจะกำหนดเป็น % ของหน้าจอ (ซึ่งหากเป็น % จะให้ผลในแต่ละเครื่องไม่เท่ากัน เพราะความกว้างและสูงของหน้าจอคอมฯแต่ละเครื่องแตกต่างกันไป)ก็ได้ครับ ข้างล่างคือตัวอย่าง...

รูปภาพขนาดปกติ

รูปภาพขนาดกว้าง 80% ของความกว้างจอ สูง 50 พิกเซล

รูปภาพขนาดกว้าง 600 พิกเซล สูง 300 พิกเซล

รูปภาพขนาดกว้าง 2.52% ของความกว้างจอ สูง 20.5% ของความสูงหน้าจอ

(แต่ส่วนที่ละเอียดสุดของเลขพิกเซลคือ 1 นะครับ การกำหนด 50.1 พิกเซล จะมีค่าเท่ากับ 50 พิกเซล ไม่สามารถกำหนดได้ละเอียดเหมือนแบบ %)
อ้างอิง
http://www.bloggang.com/mainblog.php?id=kunyawat&month=15-05-2008&group=8&gblog=6
http://www.hellomyweb.com/index.php/main/content/2
http://school.obec.go.th/krurenu/html/p4-1.html
http://www.freebsd.sru.ac.th/index.php/macromedia-dreamweaver-8/42-chapter-4-insert-image
http://bu.lpc.rmutl.ac.th/naravit/begin-programming/basic_PHP/Chapter2_intro_HTML.htm
http://www.dwthai.com/Article/broken_img.htm
http://www.yupparaj.ac.th/CAI/32102/image1.html
http://www.aw.ac.th/web_html/010.htm
http://www.kty.ac.th/html/unit6/unit602.html
http://www.freewebs.com/maneemana/h6.html

วันที่ 30 สิงหาคม พ.ศ.2555

html

วันพฤหัสบดีที่ 30 สิงหาคม พ.ศ. 2555

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

การแทรกภาพที่อยู่ในโฟล์เดอร์เดียวกัน

การแทรกภาพที่อยู่ในโฟล์เดอร์

เกี่ยวกับฉัน