HTML Tutorial - So, you want to make a Web Page!

สอนคนงี่เง่าบัดซบ..เรียนรู้วิธีสร้างเว็บเพจ !

เอาละ ท่านอยากจะทำเว็บเพจ !

บทที่ 5

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

Chef

ผมจะไม่รวบรัด แต่บอกให้ท่านทำตามเป็นขั้น เป็นขั้น ด้วยวิธีนี้ท่านจะเข้าใจและจะไม่หลง ลำดับแรก วางแท็ก สำหรับภาพลงไป แท็กของภาพคือ <IMG>(คำ img ย่อมาจากคำ image แปลว่าภาพ )

<BODY>
<IMG>
</BODY>

ขั้นต่อไปเราต้องแจงรายละเอียดลงไปในแท็ก<img> ถึงแหล่งของภาพ คือSource ตัวย่อคือ SRC ว่าเอาภาพจากใหนมาใส่ และระบุขนาดของภาพลงไป(WIDTH แปลว่าความกว้าง HIGHTH แปลว่าความสูง)

<BODY>
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>

ผลจะแสดงขึ้นมาบนจอดังนี้...

คำถาม: ผมจะหาขนาดกว้าง และขนาดสูง ของภาพได้อย่างไร?
คำตอบ: ทำได้สองสามวิธี วิธีแรกก็คือทำการดาวน์โหลด เอาโปรแกรมตบแต่งภาพที่เรียกว่า graphics viewer/editor เข้ามาใช้ อันที่ผมโปรดปราณคือIrfan View. และอันที่เป็นที่นิยมใช้กันมากก็คือ โปรแกรม Paint Shop Pro. อันหลังนี้เป็น shareware ที่จำกัดอายุเวลาใช้งาน แต่เป็นโปรแกรมที่ให้ผลงานออกมาประณีต รุ่นที่ผมโปรดปราณมากเห็นจะเป็นโปรแกรมเก่า เป็น รุ่นที่ไม่จำกัดอายุเวลาการใช้ รุ่นนี้ท่านดาวน์โหลดได้จาก. ตรงนี้.

อีกวิธีหนึ่งใช้โปรแกรมที่ผมใช้อยู่และผมชอบมากคือ NoteTab,

ผมขอให้ข้อสังเกตุว่า source หรือแหล่งที่มานั้น เราจะระบุลงไปว่าเป็นภาพอะไร?และภาพนั้นอยู่ที่ไหน? ที่เราพิมพ์ลงไปว่า"chef.gif", หมายความว่าให้บราวเซ่อร์หาภาพที่ชื่อ chef.gif ซึ่งเก็บอยู่ในแฟ้มหรือโฟลเดอร์เดียวกัน (หรืออีกนัยหนึ่งใน directoryเดียวกัน ) กับแฟ้ม HTML ที่ใช้สร้างเว็บเพจที่ว่า ข้างล่างนี้แสดง ไดอะแกรมการอ้างอิงแฟ้ม.....

SRC="chef.gif"อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่ในแฟ้มเดียวกัน (New Folder)กับเอกสาร HTML ที่สร้างเว็บ

SRC="images/chef.gif"อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่ในแฟ้ม images อีกที ซึ่งอยู่ล่างลงไปหนึ่งชั้นจากเอกสาร HTML ที่ใช้สร้างเว็บ. แฟ้มอาจอยู่ล่างลงไปหลายชั้นก็อ้างอิงได้

SRC="../chef.gif"อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่สูงขึ้นไป 1 ชั้นจากแฟ้มที่เก็บเอกสาร HTML ที่ใช้สร้างเว็บ

SRC="../../chef.gif"อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่สูงขึ้นไปสองชั้นจากแฟ้มที่เก็บเอกสาร HTML ที่ใช้สร้างเว็บ.

SRC="../images/chef.gif"อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่ในแฟ้ม images ซึ่งแฟ้มที่เก็บเอกสาร HTMLที่สร้างเว็บ เก็บอยู่สูงขึ้นไปอีกชั้นหนึ่ง

SRC="../../../other/images/chef.gif"อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่ในแฟ้ม images ซึ่งเก็บอยู่ในแฟ้ม other อีกที และต้องขึ้นไปอีกสามชั้นจึงจะถึงแฟ้มที่เก็บเอกสาร HTML ที่ใช้สร้างเว็บ
อันหลังนี้ทำให้งงๆได้เหมือนกัน เวลาทำจริงค่อยเปิด diagram ข้างบนนี้ขึ้นมาดูก็แล้วกัน

มีอีกวิธีหนึ่งที่สามารถระบุ source หรือแหล่งที่เก็บภาพ ด้วยการ ระบุรหัส URL ของภาพลงไปเต็มๆเลย ตัวอย่างเช่นระบุลงไปว่า ภาพอยู่ที่http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif

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

คำถาม: ทันทีที่ผมอัพโหลด บรรดาไฟล์ทั้งหมดของผมขึ้นไปบนเว็บ บรรดาตัวเชื่อมของภาพต่างๆก็ไม่เชื่อม (ภาพไม่ขึ้น) เวลาผมโหลดภาพขึ้นไปผมระบุเป็นรหัส URL เต็มๆ เป็นเพราะอะไร ?

คำตอบ: ฟังดูเข้าใจว่า น่าจะเป็นเฉพาะกรณีของคุณ ให้ผมเล่าอะไรให้ฟังเผื่อเป็นแนวทางแก้ไข ถ้าเป็นระบบวินโดว์แล้ว ภาพที่ชื่อ Chef.gif จะเหมือนกับภาพ CHEF.GIF และจะเหมือนกับภาพ chef.gif แต่ถ้าคุณเอาภาพนี้ขึ้นไปไว้ในเว็บ ผ่านทาง UNIX server แล้ว ภาพนี้จะมีชื่อจำเพาะเป็นสามภาพที่ไม่เหมือนกัน ขณะที่คุณบอกกับ server ว่าคุณต้องการหาภาพ Chef.gif ... server จะหาไม่พบเพราะมีแต่ภาพ CHEF.GIF
จะแก้อย่างไร ? อยากจะแนะว่า เวลาตั้งชื่อภาพแล้ว ฝึกให้เป็นนิสสัยคือพิมพ์ด้วยตัวพิมพ์เล็กทั้งหมดแล้วปัญหาจะหมดไป
และนิสสัยที่ดีอีกอย่างคือพยายามหลีกเลี่ยงที่จะไม่เคาะวรรคชื่อของภาพ ถ้าจะเว้นวรรคก็ให้ใช้เครื่องหมายขีดเส้นใต้เข้าไปเชื่อมไว้แทน เช่นชื่อภาพว่า My Mommy.gif ให้แก้เป็น my_mommy.gif เป็นต้น

รายละเอียดหรือ attribute ที่จะแจงลงไปในแท็ก IMG ที่ควรจะได้กล่าวถึงอีกอันหนึ่งคือ ALT...(มาจากคำว่า alternate แปลว่า ตัวแทน หรือตัวสำรอง)

<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">

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

บางสิ่งบางอย่างที่ท่านควรเรียนรู้เรื่องภาพ

ลองดูอันนี้...

<BODY>
<IMG SRC="chef.gif">
</BODY>

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

คุณโจ ! พอแล้ว มีอะไรอีก ผมเริ่มหาวแล้ว คุณยังมีอะไรดีๆ อีกละ!

อีกนิดเดียวก็จบแล้ว คุณลองดูตัวเลขขนาดของรูปที่ผมพิมพ์ลงไปข้างล่างนี้...

<BODY>
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>

<BODY>
<IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
</BODY>

คุณจะพบว่าคุณสามารถกำหนดขนาดของภาพได้ตามอัธยาศัย ซึ่งการกำหนดลงไปอาจถึงขนาดไปบิดเบี้ยวสัดส่วนของภาพ
ผมมีภาพเล็กที่สุดมาให้ท่านดูภาพหนึ่ง ตามที่ลูกศรชี้ ภาพนี้เป็นภาพจุดสีแดงเล็กๆ -> ภาพนี้มีขนาดเพียง 1 x 1 สี่เหลี่ยมจตุรัส ดูซิว่าผมสามารถขยายความกว้างยาวของภาพนี้ได้อย่างไร...

<BODY>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=1>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=2>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=8>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200>
</BODY>

ผลที่แสดงบนจอ จะเป็นอย่างนี้

เห็นไหม เท็คนิคนี้ สำหรับคุณนำไปลากเส้นนอนและเส้นดิ่งได้

<--หน้าที่แล้ว หน้าต่อไป-->

	`SRC="chef.gif"`อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่ในแฟ้มเดียวกัน (New Folder)กับเอกสาร HTML ที่สร้างเว็บ
	`SRC="images/chef.gif"`อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่ในแฟ้ม images อีกที ซึ่งอยู่ล่างลงไปหนึ่งชั้นจากเอกสาร HTML ที่ใช้สร้างเว็บ. แฟ้มอาจอยู่ล่างลงไปหลายชั้นก็อ้างอิงได้
	`SRC="../chef.gif"`อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่สูงขึ้นไป 1 ชั้นจากแฟ้มที่เก็บเอกสาร HTML ที่ใช้สร้างเว็บ
	`SRC="../../chef.gif"`อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่สูงขึ้นไปสองชั้นจากแฟ้มที่เก็บเอกสาร HTML ที่ใช้สร้างเว็บ.
	`SRC="../images/chef.gif"`อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่ในแฟ้ม images ซึ่งแฟ้มที่เก็บเอกสาร HTMLที่สร้างเว็บ เก็บอยู่สูงขึ้นไปอีกชั้นหนึ่ง
	`SRC="../../../other/images/chef.gif"`อันนี้หมายความว่าภาพที่ต้องการเก็บอยู่ในแฟ้ม images ซึ่งเก็บอยู่ในแฟ้ม other อีกที และต้องขึ้นไปอีกสามชั้นจึงจะถึงแฟ้มที่เก็บเอกสาร HTML ที่ใช้สร้างเว็บ อันหลังนี้ทำให้งงๆได้เหมือนกัน เวลาทำจริงค่อยเปิด diagram ข้างบนนี้ขึ้นมาดูก็แล้วกัน