More Related Content
Similar to แำไแไำแำไ (10)
แำไแไำแำไ
- 4. โครงสร้างพื้นฐานของ HTML
โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคาสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head)
และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคาสั่งดังนี้
การจัดโครงสร้างแฟ้มเอกสาร
ในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากาหนดนอก
จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่
โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทางานได้เสมือนมี
โครงสร้างทั่งนี้เป็นเพราะว่าตัวโปรแกรมเว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML
เป็นส่วนเนื้อหาทั้งสิ้น
ยกเว้นใน ส่วนหัว ที่ต้อง มีการกาหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คาสั่ง หรือ
ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทาตาแหน่ง
ใดมีการ ทาตาแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ ถูกกาหนด
โดยใช้คาสั่งให้ตรงกับ รหัสที่กาหนดเท่านั้น
- 5. การแสดงผลที่เว็บเบราเซอร์
หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล
.htmหรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทาการทดสอบ ข้อมูลที่เราสร้างจะถูก
นามาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น
ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จา
เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทาการ
ประมวลผลและแสดงผลออกมาใหม่ ในคาสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมายน้อยกว่า
<ตามด้วยคาสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า >และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ
เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคาสั่งนั้นๆ เช่น คาสั่ง <BODY>จะมี </BODY>เป็นคาสั่งปิด
เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คาสั่งผิด จะส่งผลให้การทางานของโปรแกรมผิดพลาดทันที
คาสั่งเริ่มต้นสาหรับ HTML
คาสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า
<ตามด้วย ชื่อคาสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทาหน้าที่ตกแต่งข้อความ เพื่อ
การแสดงผลข้อมูล โดยทั่วไปคาสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คาสั่งเท่านั้น
ที่มีรูปแบบคาสั่งอยู่เพียงตัวเดียว ในแต่ละคาสั่ง จะมีคาสั่งเปิดและปิด คาสั่งปิดของแต่ละ คาสั่งจะมี
รูปแบบเหมือนคาสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นาหน้าคาสั่ง ปิดให้ดู แตกต่าง เท่านั้น
และในคาสั่งเปิดบางคาสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่
ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร
- 6. 1.คาสั่งเริ่มต้น
รูปแบบ <HTML>.....</HTML>
คาสั่ง <HTML>เป็นคาสั่งเริ่มต้นในการเขียนโปรแกรม และ
</HTML>เป็นคาสั่งจุดสิ้นสุดโปรแกรมเหมือนคาสั่ง Beignและ End ใน Pascal
2.คาสั่งการทาหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง<!-- END WEBSTAT CODE --
>ข้อความที่อยู่ในคาสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
3.ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กาหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคาสั่งนี้จะมีคาสั่งย่อย อีกหนึ่งคาสั่ง คือ <TITLE>
4.กาหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE>บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทางานอยู่ ข้อความ ที่กาหนด ในส่วนนี้
จะไม่ถูกนาไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar)
ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กาลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
5.ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
- 7. ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คาสั่ง <BODY>และจบลงด้วย </BODY>ภายในคาสั่งนี้
คือ ส่วนที่จะ แสดงทางจอภาพ
การเติมสีสันให้เอกสาร
ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ
จะเป็น ตัวอักษรสีดา บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ
เราสามารถ ทา ได้โดย การกาหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้จะเป็น
กลุ่มตัว เลขฐาน 16 จานวน 3 ชุด โดยชุดที่ หนึ่ง ทาหน้าที่ แทนค่าสีแดง ชุดที่สอง ทาหน้าที่
แทนสีเขียว และชุดที่สาม ทาหน้าที่แทนสี น้าเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน
และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ
สีของพื้นฉากหลัง
รูปแบบ BGCOLOR=#สีที่ต้องการ
ตัวอย่าง <BODY BGCOLOR="#FF0000">
เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY>ซึ่งจะทาให้เกิดสีตามที่เราเลือก
ลักษณะเป็นฉากสีอยู่ข้างหลัง
สีของตัวอักษรบนเว็บ
รูปแบบ Text=#รหัสสี
ตัวอย่าง <BODY TEXT="#00FF00">
เรากาหนดเช่นเดียวกับการทาสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ
<BODY>แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY
TEXT="#00FF00">ในการ ทาสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด
- 8. สีของตัวอักษรเฉพาะที่
รูปแบบ <FONT COLOR="#สีที่ต้องการ">...</FONT>
ตัวอย่าง <font color="#FF0000">สีแดง</font>
คาสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น
ๆ เช่น <FONT
COLOR="#FF0000">สีแดง</FONT>ตัวหนังสือคาว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทั
นที
สีของตัวอักษรที่เป็นจุดคลิกเมาส์
รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"
ตัวอย่าง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00"
ALIGN="#0077FF" VLINK="#22AA22">
กาหนดอยู่ในส่วนของ BODY โดยกาหนดให้
LINK = สีของตัวอักษรก่อนมีการคลิก
ALIGN = สีของตัวอักษรขณะถูกคลิก
VLINK = สีของอักษรหลังจากคลิกแล้ว
- 9. รูปแบบ ของตัวอักษร
ในบทนี้เราจะมาทราบถึงวิธีการทาแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา ตัวเอน ตัวใหญ่
ตัวเล็ก ซึ่งลักษระต่างๆ เหล่านี้จะทาให้เว็บเพจ ของเราสวยงามยิ่งขึ้น
หัวเรื่อง
รูปแบบ <Hx>ข้อความ</Hx>
ตัวอย่าง <H1>หัวข้อใหญ่สุด</H1>
ในการกาหนดขนาดให้หัวเรื่องนั้นมีการกาหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x
แทนตัวเลขแต่ละลาดับโดย H1 มีขนาดใหญ่ที่สุด H6
เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง <Hx>....</Hx>
ขนาดตัวอักษร
รูปแบบ <FONT SIZE=x>ข้อความ</FONT>
ตัวอย่าง <FONT SIZE=2>bcoms.net</FONT>
- 10. เราสามารถกาหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ <FONT
SIZE=value>มากาหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก
ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7
ตัวหนา (Bold)
รูปแบบ <B>ข้อความ</B>
ตัวอย่าง <B>bcoms.net</B>
จะทาให้ข้อความที่อยู่ใน <B>....</B>มีความหนาเกิดขึ้น เช่น bcoms.net
ตัวเอน (Itatic)
รูปแบบ <I>ข้อความ</I>
ตัวอย่าง <I>bcoms.net</I>
ทาให้ข้อความที่อยู่ใน<I>....</I>เกิดเป็นตัวเอนขึ้น เช่น bcoms.net
ตัวขีดเส้นใต้ (Underline)
รูปแบบ <U>ข้อความ</U>
ตัวอย่าง <U>bcoms.net</U>
ทาให้ข้อความที่อยู่ใน <U>.....<U>มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้น เช่น bcoms.net
ตัวอักษรมีขนาดคงที่ (Typewriter text)
รูปแบบ <TT>ข้อมความ</TT>
ตัวอย่าง <TT>bcoms.net</TT>
- 11. ทาให้ ข้อความ ที่อยู่ใน<TT>.....</TT>มีลักษณะเป็น fixed space เกิดขึ้น เช่น
bcoms.net
แบบของตัวอักษร
รูปแบบ <FONT FACE="font name>ข้อความ</FONT>
c <FONT FACE="AngsanaUPC">bcoms.net</FONT>
Font name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น <FONT
FACE="AngsanaUPC"> bcoms.net</FONT>และเราสามารถใส่ชื่อ Font หลาย
ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)
ขนาด Font ทั้งเอกสาร
รูปแบบ Basefont size="X">
ตัวอย่าง <Basefont size=3>
เป็นการกาหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร
เพื่อสะดวกเราจะได้ไม่ต้องกาหนดบ่อย ๆ ปกติแล้วจะกาหนดขนาดเป็น 3
โดยไม่ต้องมีตัวปิดเหมือนคาสั่งอื่น ๆ (X แทนตัวเลข)
ตัวอักษรแบบพิเศษ
รูปแบบ
<แทนด้วย <
>แทนด้วย >
&แทนด้วย &
" แทนด้วย "
- 12. เว้นวรรค แทนด้วย
ตัวอย่างเช่น "bcoms.net" จะเป็น "bcoms.net"
การจัดรูปแบบโฮมเพจ
ในการเขียนคาสั่งเพื่อให้แสดงผลด้วยเว็บเบราเซอร์การกด ปุ่ม Enter
ที่แป้นพิมพ์เพื่อขึ้นบรรทัดใหม่ในขณะที่สร้าง
ไฟล์นั้นยังไม่มีโปรแกรมเว็บเบราเซอร์ตัวใดรู้จักคาสั่งที่ขึ้นบรรทัดใหม่ที่เกิดจาก
การกดแป้นพิมพ์เลยดังนั้น เราจึง ต้องมี การเขียนคาสั่งขึ้นซึ่งในบทนี้เราจะมารู้ถึงคาสั่งที่ใช้ใน
การกาหนด รูปแบบต่างเพื่อให้ เว็บเพจ มีความสวยงามมากยิ่งขึ้น
การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคาสั่งสาหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คาสั่งนี้ในตาแหน่งที่เราต้องการ
ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
- 13. ย่อหน้าใหม่
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คาสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR>แต่จะทาการ
เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คาสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคาสั่ง ปิด
จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คาสั่ง <P ALIGN=align
type>ต้องมีคาสั่ง ปิด</P>ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ
RIGHT ก็ได้ เช่น <P ALIGN=CENTER>ข้อความนี้ ก็จะอยู่ตรงกลาง</P>
เส้นคั้น
รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>
เราสามารถกาหนดตาแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกาหนดแบบเส้นทึบ ก็ได้ โดย
โดย X = ค่าต่าง ๆ เหล่านี้
<ALIGN> = CENTER , LEFT , RIGHT
COLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-B
SIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7
WIDTH = กาหนด ความหนา ของเส้นเป็น เปอร์เซนต์
NOSHADE = กาหนด ให้เส้น เป็น เส้นทึบ
- 14. การใส่รูปภาพลงในเว็บเพจ
เมื่อเริ่ม เข้าไป ยังโฮมเพจ ของ เว็บไซต์ แต่ละแห่ง บนอินเตอร์เนต สิ่งแรก ที่มัก เป็นที่
ติดตา ของผู้ ใช้ บริการ ก็คือ การที่ แต่ละ โฮมเพจ จะมี รูปภาพ สวย ๆ แสดง ออกมา มีการ จัดรูปภาพ
และข้อความ ที่เป็น ระเบียบ ทาให้อ่าน ง่ายเข้าใจ เนื้อหา ที่ต้องการ ได้อย่าง รวดเร็ว ก่อนที่ เราจะ
มารู้ ถึงคาสั่ง ในการ ใส่รูปภาพ ลงในเว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา
จะนามาใส่ในเว็บเพจเสียก่อน รูปภาพที่จะนามาใช้ใส่ลงในเว็บเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF
และ JPG ไฟล์
รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์
ชนิดบิตแมป (Bitmap) เป็นเทคนิค การเก็บภาพ โดยให้ จุดสี(pixet) ต่าง ๆ เรียง ต่อกัน จนเกิด
เป็นภาพ ไฟล์ GIF นี้ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน
- 15. ปัจจุบันมี โปรแกรม สาหรับทา หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนา
ภาพมา แสดง ทาให้เกิด เป็นภาพ เคลื่อนไหวขึ้น
ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group
เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นาเอา ข้อมูล ส่วนที่ ไม่สาคัญ
ออกไป แล้วทาการ บีบอัด ข้อมูล ในอัตรา ส่วน 10:1 โดยขนาด ของไฟล์ ที่เรา นามา ใช้งาน นั้น
อาจมีขนาด เหลือเพียง 10 - 30 % ของขนาดไฟล์ ก่อนจะมีการ บีบ ย่อ ข้อมูล ขนาดของ การบีบ
ข้อมูล มีได้ 3 ระดับ (Hight,Middle,Low Compression) ไฟล์ที่ มีการ บีบย่อ ข้อมูล
มากที่สุด จะได้ ไฟล์ที่มีขนาด เล็กที่สุด แต่คุณภาพ ก็ลดลง ตาม ไปด้วย หากต้องการ ภาพที่มี
คุณภาพดี ที่สุด ขนาดของ ไฟล์ก็จะ ใหญ่ ที่สุดเช่นกัน
การใส่รูปภาพลงในเว็บเพจ
รูปแบบ <IMG ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n
HSPACE=n VSPACE=n SRC=address ALT=text>
ALIGN = align-type(ตาแหน่ง) เป็นการ กาหนด ตาแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่
ข้อความ นั้นจะ อยู่ ที่ตาแหน่ง ส่วนล่าง ของภาพ ทางขวา มือเสมอ เราสามารถ กาหนดได้
โดยใช้คาต่าง ๆ เหล่านี้
LEFT = วางภาพที่ตาแหน่งทางซ้าย
RIGHT = วางภาพที่ตาหน่งทางขวา
TOP = วางภาพ ที่ตาแหน่ง ด้านบน
- 16. MIDDLE = วางภาพ ที่ตาหน่ง กึ่งกลาง
BOTTOM = วางภาพ ที่ตาแหน่ง ด้านล่าง
BORDER = n เป็นการ กาหนดกรอบให้ รูปภาพnมีค่ามาก กรอบจะ มีความหนา มากขึ้น
HEIGHT = n เป็นการ กาหนด ความสูง ของภาพ
WIDTH = n เป็นการ กาหนด ความกว้างของภาพ ถ้าต้องกา ให้ภาพได้สัดส่วน
ให้กาหน เป็นเปอร์เซนต์ โดยไม จากัดความสูง
VSPACE = n กาหนด ระยะ ห่างบน ล่างของ ภาพ
HSPACE = n กาหนด ระยะ ห่าง ซ้าย - ขวา ของภาพ
SRC = ใส่รูปภาพที่ต้องการลงไป
ALT = text ใส่ข้อควา
เพื่อเป็นคาอธิบายรูปภาพที่นามาวางสาหรับผู้ใช้อินเตอร์เนตแบบเท็กซ์
ข้อสังเกต ALIGN ไม่สามารถ กาหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง
การให้ อยู่ตาแหน่งดังกล่าว ให้ใช้คาสั่ง <CENTER>...<CENTER>
การแสดงภาพฉากหลัง
รูปแบบ BACKGROUND="picture"
กาหนด แอตทริบิวต์BACKGROUND="picture" ในคาสั่งของ <BODY>เช่น <BODY
BACKGROUND="hot.gif">
- 17. การเชื่อมโยงข้อมูล (Link)
เป็นที่ทราบดีอยู่แล้วว่าการที่อินเตอร์เน็ตได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็
ผลมาจากความ สามารถในการเชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง
ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง
และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน
ข้อความ ที่ถูกกาหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ
บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป และอาจจะมี
ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดา ปนขาว
(หรือสีเทา) แต่สาหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้าเงิน หรือ อย่างอื่น ตาม
- 18. ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่งมีการเชื่อมโยงของรูปแบบ ตัวชี้จะเปลี่ยนจาก
สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง
จะแสดงถึงตาแหน่งของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น
ประเภทการเชื่อมโยง
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail
การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>
*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A
HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>
การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF="http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="http://www.bcoms.net">บีคอม</A>
*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกาหนด target="_blank"
ตัวอย่าง <a href="http://www.driverzone.com" target="_blank">
Driver Zone </a>
- 19. การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>
การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto:
bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>
การสร้างตาราง
การสร้างตาราง ลงในเว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นาไปใช้ได้หลายอย่าง
เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง
ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทาตารางอย่างไร
ก็สามารถสั่งให้เว็บเพจของเรา ทาอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ
นาเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สาหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้
นิ้วมือของเรา เป็นผู้พิมพ์คาสั่ง สาหรับสร้างตารางขึ้นมา
โครงสร้างตาราง
- 23. <TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif"
WIDTH="200" HEIGHT="44"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="50"
HEIGHT="50"></TD>
<TR>
</TABLE>
การปรับขนาดรูปภาพให้พอดีกับตาราง
เราเคยเรียน มาแล้ว ว่า เรานั้น สามารถ ปรับขนาด รูปภาพได้ ในการนา รูปภาพ ใส่เข้า
ไปในตาราง เราก็ กาหนด ขนาดของ รูปภาพ กว้าง ยาว ให้เท่ากัน ทุกด้าน จะทาให้ภาพ ที่แสดง
ออกมา มีขนาด เท่ากัน เช่น
<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5"
WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif"
WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="80"
HEIGHT="80"></TD>
- 24. <TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif"
WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="80"
HEIGHT="80"></TD>
<TR>
</TABLE>
การเชื่อมโยงข้อมูลในตาราง
เหมือนกับ ข้อมูลที่อยู่ นอกตาราง ข้อมูลที่อยู่ในตาราง ก็สามารถ ไปเชื่อม โยงกับข้อ มูล
จากแหล่ง ข้อมูล อื่นได้ เช่น เดียวกัน เมื่อเรานา ส่วนเชื่อม โยงข้อมูล ทั้งตัว อักษร รูปภาพ หรือผสมกัน
ก็ได้ มาบรรจุในตารางเท่านั้น เช่น
<table border=2cellpadding=5cellspacing=5 width="50%">
<tbody>
<tr>
<td width="50%"><a href="../index.asp"><img height=20src="34.gif"
width=20 border=0></a></td>
<td width="50%"><a href="../index.asp">กลับไปหน้าแรก</a></td>
</tr>
