บทที่ 5 การแทรกมัลตมิ เี ดียและเชอ่ื มโยงเอกสาร ไฟล์ภาพที่นิยมบนเว็บ ปกติไฟล์ภาพที่ใช้งานอยู่ทั่วไป จะมีอยู่หลายนามสกุลด้วยกัน เช่น tif,bmp,jpg,gif,png ซง่ึ แตล่ ะนามสกลุ ของไฟล์ภาพเหล่าน้ีจะบง่ บอกถงึ คุณภาพของไฟลภ์ าพดงั กลา่ ว โดยไฟล์ ภาพที่นยิ มนำมาใช้บนเว็บเพจจะมีดังน้ี 1. ไฟล์ภาพชนิด JPEG ภาพชนิด JPEG มักจะบันทึกเป็นนามสกุล jpeg หรือ jpg ได้รับความนิยม สงู มาก รองรบั จำนวนสีท่ีมีความแตกต่างได้มากถึง 24 บติ (16 ลา้ นส)ี ซ่ึงนอกจากจะแสดงผลภาพที่ดีแล้ว ยัง มคี วามจุต่ำ ดังนั้น จงึ มกั ถกู นำไปใชเ้ พื่อการบันทกึ ภาพถ่ายต่างๆ 2. ไฟล์ภาพชนิด GIF ภาพ GIF รองรับจำนวนสีสูงสุดเพียง 8 บิต (256 สี) ดังนั้น จึงเหมาะกับภาพ พื้นฐานทั่วไป ที่ระดับความละเอียดและสีต่างๆ จำนวนไม่มาก เช่น ภาพประเภทตราสัญลักษณ์ (Logo) ภาพ การ์ตูนคลิปอาร์ต หรือภาพอื่นๆ ที่มีรายละเอียดสีไม่ ซับซ้อน ซึ่งนอกจากจะมีความจุต่ำแล้วยังสามารทำเปน็ ภาพ้ืนหลังโปรง่ ใสและนำมาสรา้ งภาพเคลือ่ นไหวได้ 3. ไฟล์ภาพชนดิ PNG เปน็ การนำคุณสมบัติเดน่ ของ JPG และ GIF มารวมเขา้ ไวด้ ว้ ยกนั รองรบั สีที่มี จำนวนมากถึง 24 บติ เหมือน JPG อกี ท้ังยังสามารถกำหนดพนื้ หลงั ให้เป็นแบบโปร่งใสได้เชน่ เดียวกับ GIF ใน ขณะเดียวกนั ก็มคี วามจุตำ่ คำสัง่ แทรกรปู ภาพในเว็บเพจ <img src> คำสง่ั แทรกรปู ภาพในเวบ็ เพจ การใชค้ ำสงั่ แทรกรูปภาพในภาษา html เพื่อนำภาพมาแสดง ส่งิ ที่ต้อง ระวงั คือ ไฟลร์ ูปภาพจะต้องอยู่ภายใน โฟลเดอร์หลกั เดียวกันกับไฟล์คำส่งั ภาษา html โดยมรี ูปแบบดงั น้ี <img src=\"ชือ่ รูปภาพ\"> หรือหากรูปภาพอยู่ในโฟลเดอร์ยอ่ ยในโฟลเดอรห์ ลัก ใหร้ ะบุชือ่ โฟลเดอร์ย่อยด้วย แตไ่ ฟล์ที่บนั ทกึ ต้อง อยู่ใน โฟลเดอรห์ ลัก ห้ามบนั ทึกลงในโฟลเดอรย์ อ่ ยท่เี ก็บรูปภาพ ดงั รปู แบบดังน้ี <img src=\"ชอื่ โฟลเดอร์/ชื่อรปู ภาพ\"> คำสั่งการแทรกรปู ภาพ สามารถมี Attribute กำกับเพิ่มเติมได้ ไมว่ า่ จะเปน็ ขนาดความกวา้ ง ความสงู ของรูปภาพว่า ต้องการใหแ้ สดงขนาดกวา้ งและสงู เท่าไหร่ ซึ่งถา้ ไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของภาพ
ต้นฉบับ นอกจากนี้ ยงั สามารถใส่ขอบของภาพและกำหนดระยะห่างระหว่างรปู ภาพกับข้อความได้อีกดว้ ย โดยมีรปู แบบดังนี้ <img src=\"ชือ่ รูปภาพ\" alt=\"คำอธิบายรูปภาพ\" align=\"ตำแหน่ง รปู ภาพกับขอ้ ความ\" width=\"ความกวา้ ง\" height=\"ความสงู \" hspace=\"ช่องวา่ งระหวา่ งรูปภาพกับขอ้ ความแนวนอน vspace=\"ช่องว่างระหวา่ งรูปภาพกบั ขอ้ ความแนวตงั้ border=\"ขนาด ขอบรปู ภาพ\" > ซ่ึง การกำหนดคุณลักษณะเพิ่มเตมิ (Attribute) ของคำส่ัง สามารถอธบิ ายไดด้ ังน้ี align คอื การกำหนดตำแหน่งของรปู ภาพกับขอ้ ความ ประกอบด้วย top เปน็ การกำหนดให้ข้อความอยดู่ า้ นบนของรูปภาพ middle เป็นการกำหนดให้ข้อความอยู่กงึ่ กลางของรูปภาพ bottom เป็นการกำหนดใหข้ อ้ ความอยู่ด้านลา่ งของรูปภาพ left เป็นการกำหนดใหข้ ้อความอยู่ดา้ นซ้ายของรปู ภาพ right เปน็ การกำหนดให้ข้อความอยูด่ า้ นขวาของรปู ภาพ alt คือ การกำหนดขอ้ ความอธิบายรปู ภาพ โดยข้อความนนั้ จะปรากฎเมื่อนำเมาส์มาวางยัง ตำแหนง่ ของภาพ width คือ การกำหนดความกวา้ งของรูปภาพ เมอ่ื ต้องการย่อหรือขยายรูปภาพ หนว่ ยเป็น pixel หรือเปอรเ์ ซ็นต์ height คือ การกำหนดความยาวของรปู ภาพ เมื่อต้องการย่อหรือขยายรูปภาพ หนว่ ยเปน็ pixel หรอื เปอร์เซน็ ต์ hspace คอื การกำหนดตัวเลขระยะช่องว่างระหว่างรูปภาพกบั ข้อความทางด้านแนวนอน เพื่อ ไม่ให้ติดกนั จนเกินไป vspace คือ การกำหนดตัวเลขระยะช่องวา่ งระหว่างรูปภาพกบั ข้อความทางด้านแนวต้ัง เพ่อื ไม่ให้ ติดกัน จนเกนิ ไป border คือ การกำหนดเส้นกรอบของรปู ภาพ โดยกำหนดไดต้ ัง้ แต่ 0 – 10 ตวั อยา่ งท่ี 4.1 การแทรกรปู ภาพในเว็บเพจ <html> <head> <title> การแทรกรปู ภาพในเวบ็ เพจ </title> </head>
<body> <h3>รูปดอกบัวปกติ</h3> <img src=\"lotus3.jpg\" align=left> บัวเป็นดอกไม้ทีม่ คี วามเก่ยี วข้องกับพระพทุ ธเจา้ ต้ังแตก่ ารประสูติ ตรสั รู้ และปรินิพพาน <br> ดังนัน้ พทุ ธศาสนกิ ชนจึงใชด้ อกบัวเพื่อบูชาพระ และในพิธีกรรมทางศาสนา บวั จึงเปรียบเสมือน <br> เปน็ สัญลกั ษณ์ ของความบริสทุ ธ์ิและคุณงามความดี <br><br><br> <hr><br> <h3>รูปดอกบวั ทกี่ ำหนดขนาดความกว้าง ความสูง <br>การเว้นระยะหา่ งระหวา่ งรปู กับข้อความ และเสน้ ขอบ</h3> <img src=\"lotus3.jpg\" align=left width=120 height=80 hspace=30 vspace=10 border=3> บวั เปน็ ดอกไม้ทมี่ คี วามเก่ียวขอ้ งกับพระพุทธเจา้ ตง้ั แต่การประสูติ ตรัสรู้ และปรินพิ พาน <br> ดงั นั้นพทุ ธศาสนกิ ชนจงึ ใชด้ อกบัวเพื่อบชู าพระ และในพธิ ีกรรมทางศาสนา บัวจงึ เปรยี บเสมือน <br> เปน็ สัญลักษณ์ ของความบรสิ ุทธิ์และคณุ งามความดี </body> </html> ผลลัพท์ที่ได้
การปรับขนาดภาพ (width&height) ในบางครั้งภาพทีแ่ ทรกลงบนหนา้ เวบ็ เพจอาจมีขนาด เลก็ ไป หรอื ใหญ่ไป เราสามารถปรับขนาดของรูปภาพไดด้ งั นี้ <img src= “ชื่อไฟล์รปู ภาพ” width= “ความกว้าง” height=“ความสูง” > ตวั อย่างการใช้งาน <img src=\"images/diary.jpg\" width=\"160\" height=\"100\" /> ผลลัพท์ทไ่ี ด้ การใส่กรอบหรือเสน้ ขอบรูปภาพ (border) ถา้ ต้องการใสเ่ ส้นกรอบใหก้ ับรูปภาพ สามารถทำได้ดังนี้ <img src=“ช่อื ไฟลร์ ปู ภาพ” border=“ความหนาของกรอบ” > ตัวอยา่ งการใชง้ าน <html> <head> <title> Insert Images : ตำแหน่งและเสน้ ขอบรูปภาพ </title> </head> <body> <div align=\"center\"> ตำแหน่งและเส้นขอบรูปภาพ<br> <img src=\"kerokero.gif\" border=\"3\"> </div>
</body> </html> ผลลพั ท์ทีไ่ ด้ การจดั ตำแหน่งรูปภาพ (align) การนำภาพมาแสดงในเวปเพจน้นั เป็นเพียงข้นั ตอนแรก ๆ ต่อไปน้ี เราต้องจัดภาพให้เขา้ กบั เนื้อหาที่มีอยู่ ใน HTML โดยมรี ปู แบบคำส่ังดงั น้ี <img src=“ช่ือไฟล์รปู ภาพ” align=“ค่าท่ีกำหนดให้ใช้” > คา่ ที่กำหนดใหใ้ ช้ bottom = ใหข้ อบลา่ งภาพเสมอขอบลา่ งข้อความ left = จดั ภาพอยดู่ า้ นซ้าย middle = ให้ก่ึงกลางภาพเสมอข้อความ right = จดั ภาพอยู่ด้านขวา top = ให้ขอบบนภาพเสมอขอบบนข้อความ ตัวอยา่ งการใช้งาน <html> <head> <title> การแทรกรูปภาพในเว็บเพจ </title> </head> <body>
<h3>รปู ดอกบวั ปกติ</h3> <img src=\"lotus3.jpg\" align=left > บัวเปน็ ดอกไม้ทม่ี คี วามเกย่ี วข้องกบั พระพทุ ธเจ้า ตัง้ แตก่ ารประสูติ ตรัสรู้ และปรินพิ พาน <br> ดังนั้นพทุ ธศาสนกิ ชนจึงใชด้ อกบัวเพื่อบูชาพระ และในพิธีกรรมทางศาสนา บัวจึงเปรียบเสมือน <br> เป็นสัญลักษณ์ ของความบริสทุ ธิ์และคุณงามความดี <br><br><br> <hr><br> <h3>รูปดอกบวั ทก่ี ำหนดขนาดความกว้าง ความสูง <br>การเว้นระยะหา่ งระหว่างรูปกับข้อความ และเสน้ ขอบ</h3> <img src=\"lotus3.jpg\" align=left width=120 height=80 hspace=30 vspace=10 border=3> บัวเปน็ ดอกไม้ทีม่ ีความเกยี่ วข้องกับพระพุทธเจา้ ตง้ั แต่การประสตู ิ ตรัสรู้ และปรินิพพาน <br> ดงั นนั้ พทุ ธศาสนกิ ชนจงึ ใชด้ อกบวั เพื่อบชู าพระ และในพิธีกรรมทางศาสนา บัวจึงเปรยี บเสมือน <br> เป็นสัญลกั ษณ์ ของความบรสิ ุทธ์ิและคุณงามความดี </body> </html> ผลลัพท์ทไี่ ด้ การเพิม่ ระยะระหวา่ งรูปภาพกบั ข้อความ (vspace&hspace) การเพ่มิ ระยะห่างของภาพกบั ข้อ ความสามารถกำหนดได้ 2แบบ คือ การกำหนดระยะหา่ งแนวต้งั (Vertical space) ใช้แอททรบิ ิวท์ vspace เปน็ การกำหนดด้านบนกบั ด้านลา่ ง และการกำหนดระยะห่างแนวนอน (Honrizontal space) ใชแ้ อททรบิ ิวท์ hspace เปน็ การกำหนดด้านซา้ ยและขวา
<img src=“ชื่อไฟลร์ ปู ภาพ” vspace=“ระยะห่างขอบบนลา่ ง” hspace=“ระยะหา่ งขอบซ้ายขวา”> คา่ ท่กี ำหนดใหใ้ ช้ = ขนาดของความห่างขอบกำหนดเป็นพกิ เซล ตัวอย่างการใช้งาน <html> <head> <title> การแทรกรูปภาพในเวบ็ เพจ </title> </head> <body> <h3>รูปดอกบัวปกติ</h3> <img src=\"lotus3.jpg\" align=left > บัวเป็นดอกไม้ท่ีมีความเก่ียวข้องกับพระพุทธเจา้ ต้ังแต่การประสตู ิ ตรัสรู้ และปรินพิ พาน <br> ดงั นั้นพทุ ธศาสนิกชนจึงใช้ดอกบัวเพือ่ บูชาพระ และในพิธกี รรมทางศาสนา บัวจึงเปรยี บเสมือน <br> เป็นสญั ลกั ษณ์ ของความบริสทุ ธแ์ิ ละคณุ งามความดี <br><br><br> <hr><br> <h3>รูปดอกบวั ทกี่ ำหนดขนาดความกวา้ ง ความสูง <br>การเวน้ ระยะหา่ งระหวา่ งรปู กบั ข้อความ และเส้นขอบ</h3> <img src=\"lotus3.jpg\" align=left width=120 height=80 hspace=30 vspace=10 border=3> บัวเปน็ ดอกไม้ท่ีมคี วามเกี่ยวข้องกับพระพุทธเจ้า ตงั้ แตก่ ารประสูติ ตรัสรู้ และปรนิ พิ พาน <br> ดงั น้ันพทุ ธศาสนิกชนจึงใชด้ อกบวั เพ่ือบชู าพระ และในพธิ กี รรมทางศาสนา บัว จงึ เปรียบเสมอื น <br> เป็นสญั ลักษณ์ ของความบรสิ ทุ ธ์ิและคุณงามความดี </body> </html>
ผลลพั ท์ท่ไี ด้ ใส่ภาพพื้นหลัง background คำสัง่ กำหนดรปู ภาพให้เปน็ พ้ืนหลังของเว็บเพจ การกำหนดรปู ภาพ สำหรับใช้เปน็ พื้นหลัง (Background) ของเว็บเพจนัน้ ทำใหเ้ วบ็ เพจดนู า่ สนใจและสวยงาม เพ่ิมข้ึน สามารถทำ ได้โดยกำหนดเพิม่ เติมในสว่ นคณุ ลกั ษณะพิเศษของคำสั่ง โดยมรี ูปแบบการใชง้ านดังนี้ <body background=\"ชือ่ รูปภาพ\"> แฟม้ รปู ภาพทนี่ ยิ มนำมาใชเ้ ป็นพืน้ หลงั ของเอกสารนน้ั คือแฟม้ ข้อมลู ชนดิ .gif หรือ .jpg ซง่ึ แฟม้ ข้อมูลรปู ภาพ ทีน่ ำมา ใช้เป็นพ้นื หลังนน้ั จะมขี นาดเล็กหรือขนาดใหญ่โปรแกรมสำหรบั แสดงผลเอกสาร
เว็บหรอื โปรแกรม เว็บเบราวเ์ ซอร์ จะนำเอารูปภาพเหลา่ นน้ั มาเรียงตอ่ กนั จนเต็มหน้าจอการแสดงผลโดย อัตโนมัติ อกี คำสง่ั หน่งึ คือ bgpropertier=fixed โดยคำสั่งนจ้ี ะเป็นการกำหนดใหร้ ูปภาพที่ใชพ้ ืน้ หลังใหค้ งท่ี กล่าวคือ หากข้อมลู ท่ที ำการแสดงผลน่นั ไม่สามารถแสดงผลในหน่งึ หน่้จอได้ รปู ภาพท่ีนำมาใชเ้ ปน็ พนื้ หลังจะ ไม่มี การเคล่อื นท่ตี าม เม่ือมีการเล่ือนแถบเลือกขอ้ มลู ด้านแนวต้งั (Vertical Scroll Bar) และ จะกำหนด ระยะก้นั ซา้ ย และบนได้ โดยใช้คำส่ัง Leftmargin และ Topmargin รว่ มด้วย โดยมีรปู แบบการใช้งานดังนี้ <body background=\"ชอ่ื รปู ภาพ\" bgproperties=fixed topmargin=\"ระยะก้นั บน\" leftmargin=\"ระยะกัน้ ซ้าย\" > ตัวอย่างท่ี 4.2 การกำหนดรูปภาพเป็นพืน้ หลังเวบ็ เพจ <html> <head> <title>การกำหนดรูปภาพเปน็ พืน้ หลงั เว็บเพจ</title> </head> <body background=\"lotus22.jpg\" bgproperties=fixed> <img src=\"lotus1.jpg\" align=left hspace=40 vspace=20><font color=\"#0000ff\"> <b>ดอกบวั </b> ถอื เป็นดอกไมท้ ส่ี วยงาม ประชาชนหาซือ้ ไปบูชาพระมากกวา่ ดอกไมช้ นดิ อนื่ เพราะสามารถคงความงามไว้ได้นานกวา่ ดอกไมห้ ลายชนิด <br><br> <b>รากบัว </b> นยิ มนำมา เชอื่ มแห้งกินเปน็ ของหวาน หรือนำไปตม้ กบั น้ำตาลกรวด แกร้ อ้ นใน ชาวอินเดยี จะให้เดก็ ดม่ื นำ้ รากบัว เพอื่ ระงบั อาการท้องร่วง <br><br> <b> สายบวั </b> สามารถปรุงอาหารแทนผักได้หลายชนิด ทั้ง แกงส้มสายบัว แกงสายบัวกับปลาทู ฯลฯ ชาวอินเดีย กินเพื่อแกอ้ าการทอ้ งรว่ ง <br><br> <b>ใบบวั </b> นยิ มนำมาห่อข้าว ห่อของ เช่น ข้าวห่อใบบัว ส่วนใบออ่ นสามารถนำมากนิ เป็นผักสดแกล้ม
นำ้ พรกิ หรอื นำมาห่ันฝอย ๆ ชงดม่ื แทนนำ้ ชา ชว่ ยแกร้ ้อนในกระหายน้ำได้เป็นอย่างดี<br><br> </font> </body> </html> ผลลัพท์ที่ได้ การแสดงภาพพ้ืนหลงั แบบคงท่ี (bgproperties) เป็นการเพม่ิ ลกู เล่นให้กบั ภาพพื้นหลังโดยการ แสดงภาพพนื้ หลังในตำแหน่งเดิมตลอด แม้เราจะเลื่อนแถบเลื่อน (Scrollbar) ขน้ึ หรอื ลงภาพพ้นื หลังกอ็ ยู่ท่ี เดมิ ตลอดไม่เลื่อนขน้ึ หรอื ลงตามเนื้อหาบนหน้าเวบ็ เพจ <body background=“ช่อื ไฟลร์ ปู ภาพ” bgproperties= “fixed”> ค่าท่กี ำหนดให้ใช้ = มคี า่ เดยี ว คือ fixed
ตวั อย่างการใชง้ าน ผลลัพท์ทไี่ ด้ ภาพท่ี 1
ภาพที่ 1 โครงสร้างและคำสงั่ ในการสร้างตาราง โครงสร้างของตารางนัน้ จะประกอบไปดว้ ยแถว (Row) และ คอลัมน์ (Column) โดยชอ่ งข้อมลู ท่ีอย่ใู นแนวนอนเดียวกันคอื แถว และช่องขอ้ มลู ทีอ่ ยูต่ รงกันในแนวต้ังคอื คอลมั น์ โดยใชค้ ำสงั่ ต่างๆ เป็นตัวกำหนดตำแหนง่ ของแถวและคอลมั น์ มีรูปแบบการใชง้ านดังน้ี <table> <caption>......</caption> <tr> <th>......</th> <th>......</th> </tr> <tr> <td>......</td> <td>......</td> </tr> <tr> <td>......</td> <td>......</td>
</tr> </table> จากโครงสร้างคำส่งั ใชง้ านข้างต้น สมารถสร้างตารางท่มี ีจำนวนแถว เทา่ กบั 3 แถว และจำนวน คอลัมน์เท่ากับ2 คอมลัมน์ โดยสามารถอธิบายคำส่ังท่เี ก่ียวกับตารางมดี งั นี้ <table> เปน็ การกำหนดสรา้ งตาราง และมีคำส่งั ปิดคอื </table> <caption> เป็นการกำหนดคำอธิบายตาราง และมีคำส่งั ปดิ คือ </caption> (จะมหี รือไม่มีก็ได)้ <tr> เป็นการกำหนดแถวของตาราง และมีคำสั่งปดิ คือ </tr> <th> เปน็ การกำหนดหวั เร่อื งในคอลัมน์ และมีคำส่งั ปิดคือ </th> (จะมหี รอื ไมม่ ีกไ็ ด้) <td> เปน็ การกำหนดข้อมลู ในคอลมั น์ของตาราง และมีคำสั่งปิดคอื </td> ตัวอย่างการใช้งาน <html> <head> <title> การสรา้ งตารางในเวบ็ เพจ </title> </head> <body bgcolor=\"#ccccff\"> <table> <caption>ยอดขายรถยนต์ บริษัทโตโยตา้ ไทยเย็น จำกัด แยกเปน็ ไตรมาส</caption> <tr> <th>รายการ</th> <th>ไตรมาสที่ 1</th>
<th>ไตรมาสท่ี 2</th> <th>ไตรมาสท่ี 3</th> <th>ไตรมาสท่ี 4</th> </tr> <tr> <td>TOYOTA VIOS</td> <td>10</td> <td>20</td> <td>15</td> <td>35</td> </tr> <tr> <td>TOYOTA YARIS</td> <td>3</td> <td>10</td> <td>5</td> <td>15</td> </tr> <tr> <td>TOYOTA VIGO</td> <td>20</td> <td>10</td> <td>7</td> <td>40</td> </tr> </table> </body> </html>
ผลลพั ท์ทไี่ ด้ การเช่อื มโยงเวบ็ เพจหนา้ เดียวกัน เวบ็ เพจท่ีปรากฏบนอินเทอรเ์ นต็ จะหมดความนา่ สนใจทันที ถ้า ขาดการเช่ือมโยงถงึ กนั โดยใชล้ ิงก์ (Link) โดยผู้ใช้อนิ เทอร์เนต็ สามารถเขา้ ไปดูเนื้อหาบนหนา้ เว็บเพจต่างๆ ที่ สนใจผ่านการคลิกลิงก์ (Link) โดยไม่ต้องสนใจว่าหนา้ เวบ็ เพจท่ีเราดูอย่นู ั้น อยู่ทีไ่ หนบนอินเทอร์เน็ตและนี่คอื ส่ิงทที่ ำให้เว็บเพจแตกต่างจากเอกสารธรรมดา ในเน้อื หานี้จะกลา่ วถงึ การสรา้ งลงิ ก์ (Link) รูปแบบตา่ งๆ เพอื่ เชือ่ มโยงหน้าเวบ็ เพจเข้าด้วยกัน การสรา้ งลิงก์ <a> รปู แบบคำส่งั แท็ก a (Anchor) ในการสรา้ งลงิ ก์ มีดงั น้ี ช่ือแทก็ : href ตำแหน่งของแท็ก: อยภู่ ายในแท็กเปิด <body>…</body> รปู แบบใน HTML: <a href=\"ชอื่ ไฟล์\" >ขอ้ ความท่ีปรากฏบนหน้าเว็บ</a> ค่ากำหนดให้ใช้: ช่ือไฟลห์ รือชอื่ ตำแหน่งทตี่ ้องการเชื่อมโยง 1. การเชอื่ มโยงข้อมูลภายในเว็บเพจหน้าเดียวกนั หากเราต้องการเชื่อมโยงข้อมูลท่อี ยู่ในหนา้ เว็บเพจเดียวกัน โดยการคลิกลงิ กเ์ พื่อเลื่อนขึ้นหรือลง หรอื ไปตำแหน่งทต่ี อ้ งการภายในหนา้ เดียวกนั การสร้างลงิ ก์แบบน้เี หมาะกับหน้าเวบ็ เพจทม่ี ีเน้อื หาท่เี ยอะๆ ใหเ้ รา ใช้คำส่งั ดงั น้ี ชื่อแท็ก : href,name ตำแหนง่ ของ อยู่ในแท็กเปดิ <a..> แท็ก:
รูปแบบใน <a name=\" jump\" >..</a> (สร้างจดุ หมายปลายทางช่ือ jump) HTML: <a href=\"#jump\" >..</a> (เช่อื มโยงไปยังจดุ ปลายทางช่ือ jump) คา่ กำหนดใหใ้ ช้: ชอื่ จดุ หมายปลายทาง ทีไ่ ม่ซำ้ ชอ่ื อื่นที่อยใู่ นหน้าเวบ็ เดยี วกนั ตัวอยา่ งการใชง้ าน <body> <b>รายชอื่ เวบ็ ไซต์ท่นี ่าสนใจ</b> <!—กำหนด Link กระโดดไปยงั จดุ เชื่อมโยงตา่ ง ๆ ในเว็บเพจ—><br > <a href=#a> คอมพิวเตอร์คืออะไร </a> <br> <a href=#b> ประเภทของคอมพิวเตอร์ </a> <br> <a href=#c> วิวัฒนาการอคอมพวิ เตอร์ </a> <br> <hr> <!—กำหนดชือ่ จดุ เช่ือมโยง จดุ หมายปลายทาง(target)—> <a name=a> </a> คอมพิวเตอรค์ ืออะไร <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <a name=b> </a> ประเภทของคอมพิวเตอร์ <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <a name=c></a> ววิ ัฒนาการอคอมพิวเตอร์ <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> </body>
ผลลพั ทท์ ี่ได้ เม่อื เราคลิกท่ลี ิงก์ Web browser จะเลอื่ นขน้ึ เลื่อนลงไปยังสว่ นท่ถี กู ตง้ั ช่ือไว้เปน็ จุดหมายปลายทาง การสร้างลงิ ก์แบบนี้ จะแสดงผลลพั ธ์ก็ต่อเมื่อในหน้าเว็บเพจจะต้องมเี น้อื หาทเี่ กนิ กว่าจะแสดงผลไดห้ มด ภายในหนา้ เดียวคือต้องมีแถบเลอื่ น(scroll bar) เพ่อื เล่ือนขึ้น เลือ่ นลง จากตัวอย่างดา้ นบนเราอาจทำการย่อ หนา้ ต่าง Web browser ใหเ้ ล็กลงเพื่อแสดงผลลัพธ์ก็ได้ การเชอ่ื มโยงข้อมลู ไปเว็บเพจหน้าอนื่ ทีอ่ ยู่ในเวบ็ ไซตเ์ ดยี วกัน ถ้าเราตอ้ งการเชือ่ มโยงเว็บเพจจาก หน้าหนง่ึ ไปยงั หนา้ เวบ็ เพจอืน่ ทอี่ ยู่ในเวบ็ ไซตเ์ ดยี วกนั เชน่ เรามเี ว็บเพจอยูจ่ ำนวน 3 หนา้ ที่ต้องการเช่ือมโยงถึง กัน สามารถทำไดด้ ังนี้ ชื่อแท็ก : href,name ตำแหน่งของแท็ก: อยู่ในแท็กเปดิ <a..> รูปแบบใน HTML: <a href=\"ชอ่ื ไฟลเ์ วบ็ เพจ\" >ขอ้ ความท่ีปรากฏหนา้ เว็บ</a> ค่ากำหนดใหใ้ ช:้ ช่ือไฟล์เว็บเพจท่ตี ้องการเช่อื มโยง ตวั อยา่ งการใชง้ าน <body> <img src=s.jpg> สตีเวน พอล จอบส์ หรือท่รี ู้จกั ในชอ่ื สตฟี จอบส์ เป็นผู้นำธรุ กิจและนกั ประดษิ ฐ์ชาวอเมรกิ นั ผูร้ ่วม กอ่ ตัง้ ประธาน อดีตประธานบริหารของแอปเปิลคอมพิวเตอร์ <a href=\"p1.html\"> คลิกอา่ นต่อ </a> <br>
<img src=b.jpg> วลิ เลียม เฮนรี เกตส์ ท่ีสาม หรือที่มักเปน็ ที่รู้จักในชื่อ บิล เกตส์ เป็นนกั ธุรกจิ ชาวอเมรกิ ัน และหน่งึ ในผู้ กอ่ ตง้ั บริษทั ไมโครซอฟท์ <a href=\"p2.html\"> คลกิ อ่านต่อ </a> </body> ผลลัพท์ท่ีได้
Search
Read the Text Version
- 1 - 19
Pages:
