หน่วยที่ 5 การเชื่อมโยงเนือหาในหน้...
TRANSCRIPT
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
หนวยท 5 การเชอมโยงเนอหาในหนาเวบเพจ
ผลการเรยนรทคาดหวง 1. บอกรปแบบคาสงของ การเชอมโยงแบบตางๆ ได 2. สามารถเขยนคาสง (Tag) กาหนดรปแบบการเชอมโยงจากตวอกษรขอความหรอรปภาพ
ไดถกตอง
สาระสาคญ การทเครอขาย อนเทอรเนตไดรบความนยมมากมายจากผคนทวโลกนน กเพราะคณสมบต
ของการเชอมโยงขอมล (Links) จากฐานขอมลหนงไปยงอกฐานขอมลหนงไดอยางรวดเรว หรออาจเปนการเชอมโยงขอมลจากจดหนงไปยงอกจดหนง ซงอาจจะอยในเอกสารเดยวกน หรอตาง เอกสาร หรอตางแหลงขอมลกนกได ทาใหเ กดการเชอมโยงไปดงใยแมงมม
การเชอมโยงไปยงเวบเพจในหนาตางๆ นนสามารถเชอมโยงไดทงจากตวอกษรขอความ และรปภาพ ภายในหนาเวบเพจเดยวกน หรอเวบไซตเดยวกน หรอเชอมโยงไปยงเวบเพจอนๆ
คดแลวตอบ ถานกเรยนสรางเวบไซตแลวตองการใหผชมไดดเนอหาทเกยวของกบเนอหาทเรา
กลาวถงในเวบไซตอน นกเรยนควรทาจดเชอมโยงไปยงเวบไซตนนดวยการเปดหนาตางใหม หรอแทนทเวบไซตเรา....
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
72
การสรางการเชอมโยงเวบไซต ในการสรางเวบเพจ ถาเราตองการเชอมโยงขอมลจากจดหนงไปยงอกจดหนงดวยขอความ
หรอรปภาพกได โดยปกตจด เชอมโยงนนๆ จะมสแตกตางจาก ขอความทวไป เพอใหสงเกตงาย ถาเปนภาพอาจมสขอบภาพ ทงนขนอยกบการกาหนดดวยคาสงพเศษ แตจะสงเกตไดงายๆ วาจดใด เปนจดเชอมโยงโดยการเลอนเมาสไปทบบนขอความหรอรปภาพ ถาเมาสเปลยนจากสญลกษณลกศรไปเปนรปมอ แสดงวา จดนนคอจดทเชอมโยงไปยงสวนอนๆ ได และทแถบสถานะของเวบ บราวเซอรดานลางสดมมซาย จะแสดงขอความวาจดหมายของการเชอมโยงขอมลอยทใด
คณสมบตทโดดเดนของเวบเพจคอการเชอมโยงเนอห าเขาดวยกน ซงทาใหการศกษาเรองราวตางๆ ทมความสมพนธกนทาไดโดยงายดาย ในบทนเราจะศกษาเกยวกบการเชอมโยงใน รปแบบตางๆ ทงเชอมโยงจากขอความและรปภาพ
ลกษณะของการเชอมโยง การเชอมโยงขอมลของเวบเพจจะมอย 2 ประเภท คอ 1. Internal Links เปนการเชอมโยงขอมลทเรยกใชขอมลตางๆ ภายในเวบไซตเดยวกน
มาแสดงผล เหมอนกบการพลกหนาหนงสอไปยงอกหนาหนง แตยงอยในเลมเดยวกน วธการเชอมโยงนอาจเปนเนอหาทเกยวของในหนาเดยวกน หรอหนาอนๆ กได
2. External Links เปนการเชอมโยงขอมลทเชอมตอไปยงเวบไซตอน หรอแหลงขอมลอน สงทสาคญทสดของการเชอมโยงแบบนคอ การระบจดเชอมโยงใหถกตอง โดยเฉพาะ ทอยของเวบไซต (URL ตองระบ http:// นาหนาเสมอ) ไดเรกทอรทเกบไฟล /ชอไฟล และมความจาเปนตองตรวจสอบเปาหมายบอยๆ เพราะหากเกดมการเปลยนแปลง เชน เปลยนชอหรอ ยาย URL ขอมลทเราตองการเชอมโยงจะสญหาย กลายเปนจดเชอมโยงทไมมอยจรง อนจะสงผลตอผเขามาชม เวบไซตของเรามากทเดยว
การกาหนดสของจด เชอมโยง สาหรบการกาหนดสของขอความทเชอมโยงขอม ลโดยปกตจะมสของตวอกษร ดงน 1. LINK จะเปนสของตวอกษรกอนมการเชอมโยงกน คอ สนาเงนมการขดเสนใต
ตวอกษร เราจะเหนไดเมอมการพมพ URL หรอ Email ในโปรแกรมไมโครซอฟทเวรด เรยกวา Unvisited Links
2. ALINK (Active Link) จะเปนสของตวอกษรขณะถกเลอก (วางเมาสเหนอตวอกษรขอความจดเชอมโยง) คาปกตคอ สแดง
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
73
3. VLINK (Visited Link) จะเปนสของตวอกษรหลงจากผานการคลก เขาไปชมเนอหาของจดเชอมโยงขอมลเรยบรอยแลว คาปกต คอ สมวง ทาใหผชมทราบไดวาตาแหนงน ตนเคยคลกไปเยยมชมมาแลว
การกาหน ดสของตวอกษรหรอขอความทจะเชอมโยงขอมล จะเหมอนกบการกาหนดส ของตวอกษรทวไป โดยจะระบ ไวในคาสง <BODY> เสมอ (เวนแตจะสรางไฟลกากบการแสดงผล แยกเปนพเศษ Stylesheet ซงจะกลาวถงในบทตอไป ) เมอเราตองการกาหนดส ของตวอกษรสาหรบการเชอมโยงใหตางจากมาตรฐาน โดยเฉพาะเมอเรากาหนดสของ พน หลงเวบไซตใหเปนสอนทไมใช สเทาหรอสขาว ซงมรปแบบดงน
<body LINK=“สกอนการเชอมโยง ” VLINK=“สหลงจากเชอมโยง” ALINK=“สขณะเชอมโยง”> ขอควรระวงในการกาหนดสของจดเชอมโยงคอ ตองไมเปนสเดยวก บสพนหลง มความ
แตกตางใหเหนชดเจนทงกอน /หลงการคลกทจดเชอมโยง สขณะเชอมโยง (ALINK) อาจไมตองกาหนดกได เพราะจะแสดงเพยงชวขณะจนสงเกตไมเหน
คาสงในการเชอมโยง รปแบบคาสง <A HREF=“URL” หรอ “เปาหมายทตองการเชอมโยง”> ขอความ </A>
คาสงในการเชอมโยงขอมล ประกอบไปดวยคาสง 2 คาสงซอนกนอย คอ คาสง anchor หรอ <A> เปนคาสงพนฐานในการเชอมโยงสาหรบการสราง Hyper
links คาสงแอตทรบวต HREF ยอมาจาก Hypertext Reference ซงจะระบตาแหนง เปาหมาย
ของการเชอมโยง คาปกตของขอ ความทตองการใหเชอมโยงภายในคาสง <A HREF> จะถกขดเสนใตโดย
อตโนมต และสของตวอกษรจะมสตามทกาหนดไวในคาสง <BODY LINK> และเมอเคลอนเมาสไปวางบนตาแหนง นสญลกษณของลกศรจะเปลยนเปนรปมอทนท
1. คาสงในการเชอมโยงภายในเอกสารเดยวกน คาสงในการเชอมโยงขอมลภายในเอกสารเดยวกนจะแบงออกเปน 2 สวน คอ
1.1 กาหนดเปาหมายทตองการใหแสดงผล เปนจดทจะแสดงผลเมอมการคลกจดเชอมโยง เราจะกาหนดแอตทรบวตเปน NAME (ใชภาษาองกฤษ) เวบบราวเซอรจะคนหาเปาหมายและแสดงผล
รปแบบคาสง : <A NAME=“Section-name”> เรมตนยอหนาใหมทเปนจด เชอมโยง </A>
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
74
1.2 กาหนดเปาหมายทจะเชอมโยง เปนจดทเมอเราคลกแลวจะกระโดดไปยงเปาหมายทถกกาหนดใน <A NAME>
รปแบบคาสง : <A HREF=“#Section-name”> เชอมโยงขอมลไปสชอเปาหมาย </A>
เราจะทดลองการสรางการเชอมโยงเอกสารในหนาเดยวกนด โดยสรางไฟลตามตวอยางคอ link_in_page.html สงเกตการใชคาสงในการกาหนดเปาหมาย การเชอมโยงไปยงเปาหมายวา ม ขอแตกตางกนอยางไร เสรจแลวจดเกบไฟลและแสดงผลในเวบบราวเซอรด
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
75
2. คาสงในการเชอมโยงไปหนาเอกสารอนภายในเวบไซตเดยวกน
รปแบบคาสง : <A HREF=“ชอไฟล.html”> ไฟลทตองการเชอมโยง </A> เปนการเชอมโยงขอมลภายในเวบไซตของเราเอง โดยมากจะระบไฟลเปาหมายเปนไฟล
HTML ไมตองระบ URL หรอไดเรกทอรทซบซอน
3. คาสงในการเชอมโยงไปหนาเอกสารอนในตางเวบไซต รปแบบคาสง : <A HREF=“URL/ชอไฟล.html”> ไฟลทตองการเชอมโยง </A>
เปนการเชอมโยงขอมลไปยงเวบไซตอน จะตองระบ URL และไฟลเปาหมายใหถกตอง ถาเกบในไดเรกทอรทซบซอน ตองระบใหถกตอง เชน
<A HREF=“http://www.microsoft.com/ie/ie401th/update.htm”> ดขอมลการปรบปรง IE 4.01 Thai ทน </A>
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
76
ขอควรระวง ในการกาหนดการเชอมโยงขอมลไปยงเวบไซตอนๆ นน เปาหมายตอง ชดเจนถกตองทง URL และ Directory เพราะถากาหนดเปาหมายผด เราจะไมสามารถเชอ มโยงขอมลไปสไฟลเปาหมายไดเลย นนคอถาโปรแกรมเวบบราวเซอรหาเวบไซตทตองการไมพบ กจะ รายงานผลความผดพลาดใหทราบทนท ดงรป
การแกไขขอผดพลาด ทเกดขน ของกรณนคอ เราตองแกไขทไฟล HTML ของเราในคาสง <A HREF> ใหชไปยงเป าหมายทถกตอง จากนนเซฟไฟลและทดลอง คลกดผลวาถกตองหรอไม
4. การใชรปภาพแทนขอความในคาสงเชอมโยง รปแบบคาสง : <A HREF=“URL/ชอไฟล.htm”> <IMG SRC=“image”> </A>
สาหรบคาสงนเปนการนาเอารปภาพมาแทนขอความเปนจดเชอมโยง โดยแทรกคาสง <IMG SRC=“image”> เขาไปแทนขอความ และเมอนาเมาสมาชทตาแหนงภาพจะเหนสญลกษณ ลกศรเปลยนไปเปนรปมอทนท
เพอใหเวบเพจของเราดไดดวยบราวเซอรแบบ TEXT จงควรใสแอตทรบวต <ALT> ลงไปหลงรปภาพดวย เพอใหขอความบรรยายภาพมผลเปนจดเชอมโยงในเทกซบราวเซอรดวย ขอสงเกต ภาพทเปนจดเชอมโยงจะมเสนกรอบรอบรอบรป และมสเสนกรอบตามทเรากาหนดใน
คาสง <LINK, VLINK, ALINK> ทกประการ
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
77
ใหสรางไฟลเพอการทดสอบการทาจดเชอมโยงจานวน 2 ไฟลตงชอ ตามตวอยาง
ใหทดลองโดยการจดเกบไฟล ทงสอง แลวเปดบราวเซอรทดสอบไฟลท 1 สามารถคลกไปยงไฟลทสองไดหรอไม ทงการคลกทขอความและรปภาพ สงเกตความแตกตางของผลใน บราวเซอร ทงสองไฟลแตกตางหรอเหมอนกนอยางไร
ทดลองสรางไฟลทมการเชอมโยงไปยงเวบไซตอนๆ เพอทดสอบการเชอมโยง ทงในรปแบบไมกาหนดหนาเปาหมายและแบบทกาหนดหนาเปาหมายไว
เพมเตมจดเชอมโยงในไฟล link_02.html อกหนงจด และสรางไฟลใหมชอ link_03.html ตามตวอยาง ลองทดสอบการแสดงผล สงเกตความแตกตางในคาสงตางๆ
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
78
เมอบนทกไฟลแลวแสดงผลจะไดดงภาพดานลาง
สงเกตผลทเกดจากการคลกลงกในเวบไซตท 1 และ 2 แตกตางจากเวบไซตท 3, 4 และ 5 อยางไร ทาไมจงเปนเชนนน
ตวอยางทนาเสนอมาขางตนเปนการสรางจดเชอมโยงแบบแทนทเดม หมายถงเมอม การคลกทจดเชอมโยงแลวเวบเพจทเปนจดเชอมโยงจะมาแสดงแทนทหนาเวบเพจเดมดงภาพ
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
79
ภาพแสดงผลจากบราวเซอรเมอคลกจดเชอมโยงแบบแทนทหนาเวบเพจเดม
ในบางกรณ เรามความตองการใหเมอคลกจดเชอมโยงแลว หนาเวบเพจนนตองเปดใน
หนาตางใหม หรอในแทป (Tap) แสดงผลใหม โดยหนาเวบเพจเนอหาเดมยงคงอย นยมใชมากใน การสรางจดเชอมโยงไปยงเวบไซตอน เพอใหผชมยงคงอยชมเวบไซตของเรา ไมหลงเพลดเพลน ไปกบเนอหาในเวบไซตอน
<A HREF=“URL/ชอไฟล.html”> ไฟลทตองการเชอมโยง </A> คาสงสาหรบการเชอมโยงยงใชคาสงเด ม เพยงแตเพมสวนขยาย target (เปาหมาย) เขาไป
คอ target=“_blank” ตอทายจากการระบชอไฟล เชน
<a href=“URL/ชอไฟล.html” target=“_blank”> ไฟลทตองการเชอมโยง </a>
คาสง target ยงมการนาไปใชในลกษณะอน เชน เมอสรางเวบเพจทมการแสดงผลแบบเฟรม (Frame) จะมคาสง target ใชงานเพมเตมดงน
target=“_self” การแสดงผลแทนทหนาเดม (เหมอนไมใชคาสง target ในหนาตางเดม)
target=“_top” การแสดงผลแทนทหนาเดม (เหมอนไมใชคาสง target ในหนาตางใหมหรอแทปใหม )
target=“_parent” การแสดงผลแทนทเฟรมเดม (หลดออกจากการแสดงผลแบเฟรมแตยงอยในหนาตางบราวเซอรเดม เฟรมหายไป )
target=“_name” การแสดงผลไปยงเฟรมทกาหนด (ตองกาหนดชอเฟรมไว )
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
80
เวบไซต www.isangate.com ใชการแสดงผลแบบเฟรม เมอคลกทลงกเมนจะแสดงเนอหา ในกรอบขวามอ ซงกาหนดชอเฟรมขวาเปน Content
การจดทาเวบเพจแบบเฟรม เหมาะกบเวบไซตทมเนอหาไมมาก และไมซบซอน การจดทา เวบเพจแบบเฟรมไมเปนทนยมแลวในปจจบน เนองจากมกจะเกดขอผดพลาดไดงายหากผจดทาไม รอบคอบพอ และความเรวในการเชอมตอเครอขายอนเทอรเนตมมากขน มเทคโนโลยในกาจดการ แสดงผลทดมากกวาเดมแลว
5. การเชอมโยงไปยงอเมล ในการจดทาเวบเพจนน หากตองการใหผชมตดตอกบผจดทาเวบไซตหรอองคกรเจาของ
เวบไซตเพอสอบถามปญหาขอของใจ หรอใหคาแนะนาตชมเวบไซต สามารถสรางจดเชอมโยงไปยงอเมลไดดวยคาสง
<a href=“mailto:[email protected]”>ตดตอเราทางอเมลทน </a> เมอผชมคลกทจดเชอมโยงนระบบปฏบตการจะทาการเรยกอเมลไคลเอนท เชน Outlook
Express, Thunder Bird, Mail App ในเครองขนมาเพอเขยนอเมลสงไปยงทอยเมลตามทเรากาหนด ในปจจบนไมนยมทาจดเชอมโยงอเมลแลวเพอปองกนการสงจดหมายขยะ (Spam e-mail)
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
81
ตวอยาง การใชคาสงสราง จดเชอมโยงไปยงทอยอเมล เ มอผชมคลกจดเชอมโยงในหนาเวบเพจกจะทาการเรยกโปรแกรมรบ-สงอเมลขนมา ทางาน
6. สรางจดเชอมโยงไปยงไฟลเอกสาร หรอไฟลอนๆ ในปจจบนการนาเสนอขอมลในเวบเพจนอกจากขอความและรปภาพ แลวยงมการนาเอา
เอกสารอนๆ ทเกยวของมานาเสนอรวมดวย เชน เอกสารการนาเสนอ (Presentation) เอกสารบทความทเกยวของในรปเอกสารประมวลผลคา (Word) หรอตารางทางาน (Spread sheet) หรอเอกสาร PDF เพอใหผชมสามารถคลกเปดดเอกสารนนๆ หรอบนทกไฟลลงเกบไวในเครองเพอ เรยกดในภายหลง เราเรยกวธการนวา จดเชอมโยงเพอการดาวนโหลด รปแบบคาส ง
<a href=“URL/filename.ppt”>ไฟลเอกสารนาเสนอ เรอง....</a> <a href=“URL/filename.doc”>ไฟลเอกสาร เรอง....</a> <a href=“URL/filename.xls”>ไฟลเอกสารตารางทางาน เรอง....</a> <a href=“URL/filename.pdf”>ไฟลเอกสารPDF เรอง....</a>
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
82
คาสงสาหรบการดาวนโห ลดไฟลยงคงเปนรปแบบคาสงการเชอมโยงแบบปกต เพยงแตช เปาไปทไฟลเอกสารตามทตองการใหผชมดาวนโหลด แทนทไฟลหนาเวบเพจ เมอผชมคลกทจดเชอมโยงจะมกรอบหนาตางถามวาจะเปดไฟลขอมลนนดวยโปรแกรมทเกยวของ หรอจะดาวน โหลดเกบบนทกไวใน เครองของผชมดงภาพ
จะมทางเลอกใหกบผชมสองทางคอ การเปดไฟลดวย MS Office Word หรอจดเกบไฟลลงในเครอง
นอกจากไฟลเอกสารแลว ยงสามรถทาจดเชอมโยงไปยงไฟลซอฟทแวรตางๆ ทสามารถดาวนโหลดไปตดตงลงในเครองได รปแบบไฟลท ใหดาวนโหลดนนอาจจะเปนไฟลบบอดขอมลเพอลดขนาดใหเลกลง เชน ไฟลแบบ *.zip, *.rar, *.7z รวมทงไฟลตดตงทเปนสกล *.exe ซงมใหบรการในเวบไซตตางๆ
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
83
ตวอยางเวบไซตทสรางลงกไปยงจดเชอมโยงของไฟลตางๆ ทงไทยและเทศ
การเชอมโยงเนอหาในหนาเวบเพจ
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
84
กจกรรมเสนอแนะ หลงจากการศกษาบทเรยนหนวยท 5 เสรจสนแลว ใหนกเรยน แตละ คน ทากจกรรมดงน 1. ใหนกเรยนลองคนหาขอมลจาก Search engine เพอหาจดเชอมโยงทผดพลาด และ
วเคราะหหาสาเหตของความผดพลาดในแตละกรณ 2. ใหนกเรยนทดลองใชคาสงสรางจดเชอมโยงรปแบบตางๆ ทดลองการเปลยนสพนหลง
ของหนาเวบเพจ เปลยนสกากบจดเชอมโยง แลวทดสอบการแสดงผลผานบราวเซอร
คาถามทายบท 1. อธบายความหมายเมอใชคาสงสรางจดเชอมโยง
LINK ………………………………………………………………………………………….... ………………………………………………………………………………………………….. ALINK …………………………………………………………………………………………. ………………………………………………………………………………………………….. VLINK ………………………………………………………………………………………… …………………………………………………………………………………………………..
2. จงใหความหมายของคาสง Target ตอไปน _BLANK …………………………………………….……………………………………….. _PARENT ……………………………………………………………………………………. _SELF …………………………………………………….………………………………….. _TOP ………………………………………………………………….………………………