วันจันทร์ที่ 16 สิงหาคม พ.ศ. 2553

บทที่ 2 การออกแบบเว็บเพจเบื้องต้น

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

หลักการออกแบบเว็บเพจ
หลักการออกแบบเว็บเพจ การออกแบบและพัฒนาเว็บเพจ สามารถทำได้หลายระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของผู้พัฒนา ตลอดจนกลุ่มเป้าหมายที่ต้องการนำเสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่น และนำเสนอ ข้อมูลเกี่ยวกับความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บที่หลากหลายใช้ลูกเล่นได้มากกว่าเว็บ ที่นำเสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ ทั้งนี้หลักการออกแบบเว็บเพจ สามารถแบ่งได้สามลักษณะ คือ

แบบลำดับขั้น ( Hierarchy ) เป็นการจัดแสดงหน้าเว็บเรียงตามลำดับกิ่งก้าน แตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว เหมาะสำหรับการนำเสนอข้อมูล ที่มีการแบ่งเป็นหมวดหมู่ที่ไม่มากนัก และมีข้อมูลย่อยไม่ลึกมาก เช่นเว็บไซต์แนะนำ ประวัติส่วนตัว ที่มีข้อมูล 4 - 5 หน้าเป็นต้น



แบบเชิงเส้น ( Linear ) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว เหมาะสำหรับการนำเสนอข้อมูลที่เป็นรูปภาพ เช่นเว็บไซต์นำเสนอสไลด์จาก Microsoft PowerPoint



แบบผสม ( Combination ) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลำดับขั้น และแบบเชิงเส้น มักจะเป็นแบบที่นิยมใช้กันอย่างแพร่หลายในปัจจุบัน เนื่องจากสามารถควบคุมการนำเสนอและการเรียกดูได้สะดวก และรวดเร็ว



ขั้นตอนการพัฒนาเว็บเพจ

ขั้นตอนการพัฒนาเว็บเพจ เกี่ยวข้องกับระบบปฏิบัติการหลายระบบ การพัฒนาเว็บเพจที่ดีควรมีการวางแผนก่อนเสมอ เพื่อให้การ แสดงผลได้ถูกต้องตรงกับความต้องการเพราะขบวนการพัฒนาเว็บเพจจะต้องเกี่ยวข้องกับระบบปฏิบัติการ (Operating System:OS) หลายระบบ กล่าวคือขณะที่สร้างเอกสารเว็บเพจผู้พัฒนาอาจจะใช้คอมพิวเตอร์ที่มีระบบปฏิบัติการ ดอส (DOS) หรือระบบปฏิบัติการ Windows แต่หลังจากที่พัฒนาแล้วเสร็จจะต้องทำการโอนเอกสารเว็บไปเก็บไว้ในเครื่อง แม่ข่าย ซึ่งส่วนมากจะเป็นระบบปฏิบัติการ Unix หรือ Windows NT โดยเอกสารเว็บที่ทำการโอนไปยังเครื่องแม่ข่ายอาจจะถูกเรียกดูจากคอมพิวเตอร์ระบบอื่นๆ เช่น Macintosh เป็นต้น
จากความสัมพันธ์ดังกล่าว นักพัฒนาเว็บเพจจึงควรจะศึกษาถึงข้อกำหนดพื้นฐานที่ควรทราบก่อนอันได้แก่ การกำหนด ชื่อโฟลเดอร์ไฟล์เอกสารเว็บไฟล์ภาพกราฟิกตลอดจนไฟล์อื่นๆที่จะนำมาใช้ในการทำเว็บเพจเพราะระบบปฏิบัติการUNIX มีลักษณะการตั้งชื่อแบบ Case-Sensitive หมายถึง ตัวอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก (A และ a) จะถือว่าเป็นตัวอักษร คนละตัวกัน ไม่เหมือนกับระบบปฏิบัติการ DOS หรือ Windows ที่ถือว่าเป็นตัวอักษรตัวเดียวกัน ดังนั้นหาก ผู้พัฒนาใช้ Windows เป็นระบบปฏิบัติการของเครื่องในการสร้างเอกสารเว็บ และกำหนดชื่อไฟล์ Index.htm แต่ขณะที่ป้อนคำสั่งเพื่อลิงก์ ไฟล์ผ่านแป้นพิมพ์เป็น index.html เมื่อโอนถ่ายเอกสารเว็บนั้นๆไปยังเครื่องแม่ข่ายที่ใช้ UNIX เป็นระบบปฏิบัติการจะเกิด
ปัญหาในการแสดงผลได้ เพราะระบบปฏิบัติการที่เครื่องแม่ข่ายจะเห็นเป็นไฟล์ที่แตกต่างกันเนื่องจากชื่อไฟล์ไม่ เหมือนกัน จากที่กล่าวมาข้างต้นขั้นตอนการพัฒนาเว็บเพจเพื่อให้ได้ผลลัพธ์ที่ถูกต้องและตรงกับความต้องการของผู้ใช้สามารถสรุปเป็น หัวข้อได้ดังนี้
1. วางแผนการพัฒนาเว็บเพจ
2. กำหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ
3. สร้างภาพหรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหา แล้วจัดเก็บไว้ในไดเร็กทรอรี่ตามข้อ
4. สร้างเอกสารเว็บ โดยกำหนดชื่อไฟล์เอกสารเว็บ ตามข้อกำหนดของผู้ดูแลระบบเครือข่ายและจัดเก็บไว้ในไดเร็กทรอรี่
ตามข้อ
5. ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์
6. ส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server) และทำการตรวจสอบผลการเรียกดูจากเครื่องแม่ข่าย

รายละเอียดต่างๆในขั้นตอนการพัฒนาเว็บนี้ มีหลายประการที่ต้องขึ้นอยู่กับผู้ดูแลระบบ (Web System Administrator) ดังนั้นก่อนดำเนินการพัฒนาเว็บเพจผู้พัฒนาควรติดต่อขอข้อมูลเหล่านี้จากผู้ดูแลระบบก่อนเพื่อไม่ให้เกิดปัญหาภายหลัง
การพัฒนาเว็บเพจที่ดี ควรมีการวางแผนก่อนเสมอ เพื่อให้การแสดงผลเว็บถูกต้อง ตรงกับความต้องการ เพราะขบวน การพัฒนาเว็บเพจ จะต้องเกี่ยวข้องกับระบบปฏิบัติการ (Operating System : OS) หลายระบบ กล่าวคือ ขณะที่สร้างเอกสาร เว็บผู้พัฒนาอาจจะใช้คอมพิวเตอร์ที่มีระบบปฏิบัติการดอส (DOS) หรือไม่ก็ใช้ระบบปฏิบัติการ Windows 95 แต่หลังจาก ที่พัฒนาเสร็จแล้วจะต้องทำการโอนเอกสารเว็บไปเก็บไว้ในเครื่องแม่ข่าย ซึ่งมักจะเป็นระบบปฏิบัติการ Unix หรือไม่ก็ Windows NT เอกสารเว็บที่ทำการโอนไปยังเครื่องแม่ข่ายนี้ อาจจะถูกเรียกดูจากคอมพิวเตอร์ระบบอื่นๆ เช่น Macintosh ซึ่งใช้ระบบปฏิบัติการ System 7จะเห็นได้ว่าเอกสารเว็บจะต้องเกี่ยวข้องกับระบบปฏิบัติการหลายระบบดังนั้นการพัฒนา เว็บเพจต้องคำนึงถึงสิ่งเหล่านี้ด้วย

จากความสัมพันธ์ดังกล่าว นักพัฒนาเว็บเพจ จึงควรจะศึกษาถึง ข้อกำหนดพื้นฐานที่ควรทราบก่อน อันได้แก่ การ กำหนดชื่อโฟลเดอร์, ไฟล์เอกสารเว็บ,ไฟล์ภาพกราฟิก ตลอดจนไฟล์อื่นๆ ที่จะนำมาใช้ใน การทำเว็บเพจ เพราะระบบ ปฏิบัติการ UNIX มีลักษณะการตั้งชื่อแบบ Case-Sensitive หมายถึง ตัวอักษรตัวพิมพ์ใหญ่ และตัวพิมพ์เล็ก (A และ a) จะถือว่าเป็นตัวอักษรคนละตัวกัน ไม่เหมือนกับระบบปฏิบัติการดอส, Windows 3.1, Windows 95 จะถือว่าเป็นตัวอักษร ตัวเดียวกัน ดังนั้นหากผู้พัฒนาใช้ Windows 3.1 เป็นระบบปฏิบัติการของเครื่องที่ใช้สร้างเอกสารเว็บ และกำหนดชื่อไฟล์ Index.htm แต่ขณะที่ป้อนคำสั่ง เพื่อลิงก์ไฟล์ผ่านแป้นพิมพ์เป็น index.html เมื่อโอนถ่ายเอกสารเว็บนั้นๆ ไปยังเครื่องแม่ข่ายที่ใช้ UNIX เป็นระบบปฏิบัติการ จะเกิดปัญหาในการเรียกดูได้ เพราะระบบปฏิบัติการที่เครื่องแม่ข่าย จะเห็นเป็น ไฟล์คนละไฟล์ เนื่องจากชื่อไฟล์ไม่เหมือนกัน


ขั้นตอนการพัฒนาเว็บเพจ เพื่อให้ได้ผลลัพธ์ที่ถูกต้อง และตรงกับความต้องการของผู้ใช้ สามารถจำแนกเป็น
หัวข้อได้ดังนี้


- วางแผนการพัฒนาเว็บเพจ
- กำหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ
- สร้างภาพ หรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหา แล้วจัดเก็บไว้ในไดเร็กทรอรี่ที่สร้างไว้
- สร้างเอกสารเว็บ โดยกำหนดชื่อไฟล์เอกสารเว็บ ตามข้อกำหนดของผู้ดูแลระบบเครือข่าย (Web System Administrator)
และจัดเก็บไว้ในไดเร็กทรอรี่ที่สร้างไว้
- ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์
- ส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server) และทำการตรวจสอบผลการเรียกดูจากเครื่องแม่ข่าย

รายละเอียดต่างๆ ในขั้นตอนการพัฒนาเว็บนี้ มีหลายประการที่ต้องขึ้นอยู่กับผู้ดูแลระบบ (Web System Administrator) ดังนั้นก่อนดำเนินการพัฒนาเว็บเพจ ผู้พัฒนาควรติดต่อขอข้อมูลเหล่านี้จากผู้ดูแลระบบก่อน เพื่อไม่ให้เกิดปัญหาภายหลัง

ลักษณะโครงสร้างของเว็บเพจ

โครงสร้างของเว็บเพจ (Site Structure)

โครงสร้างแบบลำดับชั้น
ตัวอย่างโครงสร้างของเว็บเพจ เวิลด์ ไวด์ เว็บ แบบลำดับชั้น

1. กำเนิด World Wide Web
2. เวิลด์ ไวด์ เว็บ เซิร์ฟเวอร์ (Word Wide Web Server)
2.1 World Wide Web Server ของจุฬาลงกรณ์มหาวิทยาลัย ใส่รูป p01.jpg
(http://www.chula.ac.th)
2.2 World Wide Web Server ของหอสมุดคณะแพทยศาสตร์ ใส่รูป p02.jpg
(http://md3.md.chula.ac.th)
2.3 World Wide Web Server ของสำนักข่าว CNN ใส่รูป p03.jpg
(http://www.cnn.com)
2.4 World Wide Web Server ของบริษัทไมโครซอฟท์ ใส่รูป p04.jpg
(http://www.microsoft.com)
2.5 World Wide Web Server ของ Discovery Online ใส่รูป p05.jpg
(http://www.discovery.com)
3. รหัสการสืบค้น (URL : Uniform Resource Locator) 4. เอชทีทีพี (HTTP)
5. โฮมเพจ (Home Page) ภาพแสดงตำแหน่งของ Home Page (pic06.jpg),
6. เว็บเพจ (Web Page)
7. เว็บไซต์
8. เอชทีเอ็มแอล (HTML)
9. ไฮเปอร์เท็กซ์ (Hypertext)
10. โปรแกรมเวิลด์ไวด์เว็บเบราเซอร์ (WWW Browser)
11. การสืบค้นข้อมูลบนเวิลด์ไวด์เว็บ
12. การใช้เว็บไซต์ ประเภทสืบค้นข้อมูล
12.1 http//www.yahoo.com เว็บสืบค้นยาฮู
12.2 http//www.lycos.com เว็บสืบค้นไลคอส
12.3 http//www.infoseek.com เว็บสืบค้นอินโฟซีค
12.4 http//www.Excite.com เว็บสืบค้นเอ็กไซท์
12.5 http//www.AltaVista.com เว็บสืบค้นอัลต้า วิสต้า
12.6 http//www.LookSmart.com เว็บสืบค้นลุคสมาร์ท
12.7 http//www.Netscape เว็บสืบค้นเน็ตสเคป

โครงสร้างแบบแผนผัง (Sitemap)


การกำหนดโฟลเดอร์สำหรับเก็บข้อมูล
การกำหนดโฟลเดอร์ก่อนที่จะทำการสร้างชุดเอกสารเว็บเพจนั้น เป็นลำดับขั้นตอนที่ควรกระทำทุกครั้ง เพื่อให้เอกสาร เว็บแต่ละชุดนั้นมีระบบการจัดเก็บที่เป็นระบบ สามารถค้นหาเรียกใช้งานและแก้ไขข้อมูลภายหลังได้โดยสะดวก โดยที่ ในการสร้างชุดเอกสารเว็บแต่ละชุดนั้นจะประกอบไปด้วยแฟ้มข้อมูลจำนวนมาก ทั้งเอกสารเอชทีเอ็มแอล แฟ้มข้อมูล รูปภาพ เสัยง ภาพเคลื่อนไหว และอื่น ๆ ที่เกี่ยวข้องกับเว็บเพจ ดังนั้นแฟ้มข้อมูลทั้งหมดนี้ควรจัดเก็บไว้อย่างเป็นหมวด หมู่ โดยอาจสร้างเป็นโฟลเดอร์ย่อยเพื่อทำการแยกกลุ่มแฟ้มข้อมูล แต่จะต้องสร้างภายใต้โฟลเดอร์หลักของโปรแกรม ทั้งหมด ไม่ควรแยกไว้คนละตำแหน่งกัน เพราะจะทำให้การจัดการเกี่ยวกับเวบเพจนั้นมีปัญหายุ่งยากได้ โดยทำการ สร้างโฟลเดอร์ 1 โฟลเดอร์ ต่อเว็บไซต์ 1 เว็บไซต์
ตัวอย่าง การสร้างโฟลเดอร์ชื่อ WEB-SITE ไว้ที่ desktop ของ Windows
- ที่หน้าจอของคอมพิวเตอรจะแสดง Desktop ของ Windows
- นำเมาส์ไปชี้ตรงตำแหน่งพื้นที่ว่างบน Desktop จากนั้นให้กดปุ่มเมาส์ทางด้านขวาเพื่อแสดงเมนูลัด
- ทำการเลือกคำสั่ง New จากนั้นเลือก Folder
- ปรากฏไอคอนของโฟลเดอร์ว่าง
- ใหทำการพิมพ์ชื่อของโฟลเดอร์ ในที่นี้คือ WEB-SITE จากนั้นทำการกดปุ่ม ENTER
จะปรากฏโฟลเดอร์ชื่อ WES-SITE
การจัดเตรียมภาพที่เกี่ยวข้องกับเนื้อหาเว็บ

เอกสารเว็บโดยทั่วไปแล้วจะต้องเกี่ยวข้องกับรูปภาพโดยตรง เพื่อใช้ในการสื่อสารความหมายกับผู่ใช้งานได้ชัดเจนมากกว่าการสื่อความหมายด้วยตัวอักษรเพียงอย่างเดียว อีกทั้งเป็นการดึงดูดคสามสนใจของผู้ใช้งาน ดังนั้นเมื่อทำการสร้างรูปภ าพหรือจัดหารูปภาพเป็นที่เรียบร้อยแล้ว ควรที่จะทำการคัดลอกมาเก็บไว้ในโฟลเดอร์ ที่ได้จัดเตรียมไว้ เพื่อให้สะดวกในการเรียกใช้งานรูปภาพนั้นและสะดวกต่อการบริหารเว็บไซต์ในอนาคต แฟ้มข้อมูลรูปภาพที่นำมาใช้ในการทำเว็บเพจนั้น ปัจจุบันนิยมใช้อยู่ 2 รูปแบบคือ
- ไฟล์ฟอร์แมต JPEG (Joint Photographer's Experts Group File)
- ไฟล์ฟอร์แมต GIF (Graphics Interlace File)
การจัดหารูปภาพที่นำมาใช้ในการจัดทำเว็บเพจนั้น สามารถจัดเตรียมได้หลายวิธี เช่น
- สร้างรูปภาพโดยโปรแกรมกราฟฟิกต่าง ๆ เช่น PhotoShops, Corel Draw เป็นต้น ในการสร้างแฟ้มข้อมูลรูปภาพ
ซึ่งจะได้ภาพที่ตรงกับความต้องการ แต่ใช้เวลาในการสร้างภาพมากขึ้น
- เลือกรูปภาพจากชุดภาพสำเร็จรูป ที่มีการวางจำหน่ายในลักษณะคลังรูปภาพสำหรับทำเว็บเพจ (Web ClipArt)
ซึ่งสะดวกรวดเร็วและง่ายต่อการใช้งาน แต่อาจจะได้ภาพที่ไม่ตรงกับความต้องการมากนัก
- นำรูปภาพจากโปรแกรมอื่น หรือเว็บเพจอื่นมาใช้งาน ซึ่งสะดวกรวดเร็วต่อการใช้งานเช่นกันแต่อาจเกิดปัญหา
ทางด้านลิขสิทธิ์ของภาพ

การสร้างเอกสารเว็บ
งานเทคโนโลยีเพื่อการศึกษา และพัฒนาทรัพยากรมนุษย์ (AP5) ฝ่ายประยุกต์เทคโนโลยี หน่วยงานในสังกัดศูนย์ เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ ที่มีหน้าที่หลักในการพัฒนาบุคลากร และเผยแพร่เทคโนโลยี โดยใช้รูปแบบจัดฝึกอบรม ตลอดจนเป็นศูนย์กลางการให้บริการวิชาการด้านเทคโนโลยีอิเล็กทรอนิกส์คอมพิวเตอร์ โทรคมนาคมและสารสนเทศ ให้แก่หน่วยงานทั้งภาครัฐ ภาคเอกชน และบุคคลทั่วไป บนพื้นฐานขององค์ความรู้ การปฏิบัติงาน และ ประสบการณ์ เพื่อพัฒนาขีดความสามารถในการแข่งขันของบุคลากรของประเทศ ได้เล็งเห็นความสำคัญของการพัฒนา บุคลากร และถ่ายทอดความรู้ จึงได้จัดทำระบบe-Learning เพิ่มเติมจากการจัดฝึกอบรมภายในหน่วยงานให้กับผู้สนใจทุกคน

ระบบ e-Learning ของ AP5 จัดทำในลักษณะสื่อเติม (Complementary Media) คือ ผู้เรียนสามารถเลือกเรียนได้ตาม ความต้องการ และผู้สอน (วิทยากรของเนคเทค) สามารถเพิ่มเติมเนื้อหาได้ตลอดเวลา นอกเหนือจากการบรรยายปกติในห้องเรียน โดยใช้เทคโนโลยีเว็บเพจที่มีลักษณะครอบคลุมลักษณะสำคัญของ e-Learning คือ

- Anywhere, Anytime and Anybody คือ ผู้เรียนจะเป็นใครก็ได้ มาจากที่ใดก็ได้ และเรียนเวลาใดก็ได้ตามความ ต้องการของผู้เรียน เพราะหน่วยงานได้เปิดเว็บไซต์ให้บริการตลอด 24 ชั่วโมง รวมทั้งบริการจัดทำเป็นชุด CD เพื่อใช้ ในลักษณะ Offline ให้กับโรงเรียนหรือสถานศึกษาที่สนใจ แต่ยังไม่พร้อมในระบบ อินเทอร์เน็ต
- Multimedia สื่อที่นำเสนอในเว็บ ประกอบด้วยข้อความ ภาพนิ่ง ภาพเคลื่อนไหว และเสียง ตลอดจนวีดิทัศน์ อันจะ
ช่วยกระตุ้นการเรียนรู้ของผู้เรียนได้เป็นอย่างดี
- Non-Linear ผู้เรียนสามารถเลือกเรียนเนื้อหาที่นำเสนอได้ตามความต้องการ
- Interactive ด้วยความสามารถของเอกสารเว็บที่มีจุดเชื่อม (Links) ย่อมทำให้เนื้อหามีลักษณะโต้ตอบกับผู้ใช้โดย
อัตโนมัติอยู่แล้ว และผู้เรียนยังเพิ่มส่วนติดต่อกับวิทยากรผ่านระบบเมล์ ICQ, Microsoft Messenger และสมุดเยี่ยม
ทำให้ผู้เรียนกับวิทยากรสามารถติดต่อกันได้อย่างรวดเร็ว

แนะนำเว็บไซต์ AP5-NECTEC e-Learning



เว็บไซต์การเรียนรู้ และฝึกอบรมระบบ e-learning (AP5-NECTEC e-Learning) ซึ่งมี URL คือ http://www. nectec.or.th/ite แบ่งรูปแบบการนำเสนอเป็น 2 ส่วนหลักๆ ได้แก่ เว็บไซต์แนะนำหน่วยงาน และกิจกรรมต่างๆ ของหน่วยงาน เว็บไซต์ให้ความรู้ผ่านเครือข่ายอินเทอร์เน็ต
ทั้งนี้เนื้อหาต่างๆ ที่นำเสนอในเว็บไซต์สามารถแบ่งเป็นหมวดหมู่ได้ ดังนี้ ข่าวใหม่ – นำเสนอข่าวสารและกิจกรรมต่างๆ ของหน่วยงานที่จะมีขึ้น ตลอดจนแนะนำหนังสือที่จัดทำโดยหน่วยงาน และแนะนำเว็บไซต์ที่น่าสนใจของเนคเทค และเว็บไซต์ด้านการศึกษาจากหน่วยงานอื่นๆ
* หลักสูตรอบรม – นำเสนอข้อมูลการอบรมด้านคอมพิวเตอร์ที่หน่วยงานดำเนินการ พร้อมตารางการอบรม
และแบบฟอร์มการสมัครผ่านเครือข่ายอินเทอร์เน็ต ทั้งนี้หลักสูตรอบรมของหน่วยงาน มีหลากหลายกลุ่ม สามารถแบ่ง
ได้ดังนี้

- Systems/Networking, Linux/ Windows NT, Security Professional, Cisco Systems Series, Microsoft Certified, JAVA,
Application Development, Database, Spreadsheet, Microsoft Access, Graphics & Multimedia, Web Application,
Project Management



บทที่ 3 ความรู้เบื้องต้นเกี่ยวกับภาษาHTML

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

ภาษา HTML

เอชทีเอ็มแอล (HTML,Myper Text Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียน โดยอาศัยป้ายระบุ (Tag) หรือคำสั่งสำหรับควบคุมการแสดงผลข้อความรูปภาพ หรือวัตถุอื่นผ่านโปรแกรมเว็บเบราว์เซอร์ ซึ่งป้ายระบุ หรือคำสั่งแต่ละคำสั่งนั้น อาจจะมีส่วนขยายที่ใช้สำหรับบอกคุณสมบัติพิเศษ สำหรับระบุหรือควบคุมลักษณะ การแสดงผลเพิ่มเติมได้ โดยแต่ละคำสั่งจะมีแตกต่างกันออกไป

ป้ายระบุ

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

- ป้ายระบุเดี่ยว หมายถึงป้ายระบุที่เป็นคำสั่งสำหรับควบคุมการแสดงผล เช่นคำสั่งการขึ้นบรรทัดใหม่ < BR > เป็นต้น
- ป้ายระบุเปิด/ปิด หมายถึงป้ายระบุที่เป็นคำสั่งสำหรับการควบคุมการแสดงผลเป็นกลุ่มเช่นกำหนดให้กลุ่มตัวอักษรเป็น
ตัวหนา < B > .....< /B > หรือตัวเอียง < I >....< /I> เป็นต้น โดยใช้เครื่องหมายทับ (Slash) นำหน้าคำสั่งที่ต้องการควบคุม
จะอยู่ระหว่างป้ายระบุเปิด และป้ายระบุปิด


ลักษณะพิเศษ

ลักษณะพิเศษ (Attributes) เป็นส่วนที่จะทำหน้าที่ขยายความสามารถของป้ายระบุ (Tag) หรือคำสั่ง โดยการบอกลักษณะ พิเศษในเครื่องมายมากกว่า หรือ น้อยกว่า ในส่วนของป้ายระบุเปิดหรือป้ายระบุเดี่ยว โดยคำสั่งของภาษาเอชทีเอ็มแอล แต่ละคำสั่งจะมีการบอกลักษณะพิเศษ ที่แตกต่างกัน การระบุลักษณะพิเศษนั้นสามารถกำหนดได้มากกว่า 1 ลักษณะ โดย ใช้ช่องว่างเป็นตัวแยกแต่ละลักษณะพิเศษ ตัวอย่าง เช่น ลักษณะพิเศษ ของป้ายระบุ หรือคำสั่งที่เกี่ยวกับการจัดย่อหน้าหรือคำสั่ง < P > ประกอบด้วยลักษณะพิเศษดังนี้คือ

ALIGN = "Left/Right/Center/Justify" สามารถเขียนคำสั่งสำหรับการจัดย่อหน้าได้ดังนี้
< P ALIGN = "Left" > การจัดย่อหน้าชิดซ้าย< /P>หรือ
< P ALIGN = "Right" > การจัดย่อหน้าชิดขวา< /P>หรือ
< P ALIGN = "Center" > การจัดย่อหน้าให้อยู่กึ่งกลางหน้าเอกสาร< /P>

โครงสร้างของเอกสารเอชทีเอ็มแอล
โครงสร้างของเอกสารเอชทีเอ็มแอลนั้นจะประกอบด้วยส่วนประกอบด้วยส่วนประกอบ 2 ส่วนคือ ส่วนหัวของเอกสาร
(Head Section)และส่วนเนื้อหาของเอกสาร (Body Section) โดยส่วนหัวของเอกสารจะอยู่ภาายใต้ป้ายระบุหรือคำสั่ง
BODY..../BODYโดยทั้งสองส่วนจะอยู่ภาายในป้ายระบุหรือคำสั่ง HTML/HTML ซึ่งเป็นส่วนที่ใใช้สำหรับบอกว่าเอกสาร
นี้เป็นเอกสารเอชทีเอ็มแอล


ส่วนหัวเรื่องของเอกสารเว็บ
ส่วนหัวเรื่องของเอกสารเว็บ(Head Section)เป็นส่วนที่ใช้สำหรับการอธิบายข้อมูลเฉพาะที่เกี่ยวกับเอกสารเว็บนั้น
เช่นชื่อเรื่องของเอกสารเว็บ (Title)ชื่อของผู้จัดทำเว็บ (Author)คำสำคัญหรือคีย์เวิร์ด(Keyword)เพื่อใช้สำหรับให้ผู้ใช้งาน
คนอื่นค้นหาข้อมูลเกี่ยวกับเว็บเพจที่ได้ทำการสร้างขึ้น บนระบบเครือข่ายอินเตอร์เน็ต โดยป้ายระบุ(Tag)หรือคำสั่งที่สำคัญ
คือ

- META เป็นส่วนที่ไม่ปรากฏผลบนโปรแกรมเว็บเบราว์เซอร์ ส่วนนี้จะเป็นส่วนที่ใช้ในการทำคลังบัญชีเว็บเพจ สำหรับใช้
ในการสืบค้นเว็บเพจ (Search Engine)จากผู้อื่น
- TITLE ใช้สำหรับบอกชื่อเรื่องของเอกสารเว็บ โดยข้อความนี้จะปรากฏที่แถวชื่อด้านบนสุดของโปรแกรมเว็บเบารว์เซอร์
โดยข้อความนี้ควรครอบคลุมถึงเนื้อหาทั้งหมดของเอกสารเว็บ


การพิมพ์ชุดคำสั่งของภาษาเอชทีเอ็มแอล(HTML)สามารถใช้ตัวอักษรพิมพ์เล็กและตัวอักษรพิมพ์ใหญ่ หรือผสมกันทั้ง
สองแบบ และสามารถใช้ย่อหน้า เว้นบรรทัด หรือช่องว่างสามารถทำได้อย่างอิสระ โปรแกรมเว็บเบราว์เซอร์จะไม่สนใจ
เกี่ยวกับระยะเว้นบรรทัด ย่อหน้าหรือช่องว่าง แต่จะเป็นประโยชน์สำหรับการอ่านคำสั่งของผู้สร้างเอกสารเว็บ และ
ประโยชน์ทำการพัฒนาเว็บเพจ
ส่วนเนื้อหาเอกสารเว็บ
ส่วนเนื้อหาเอกสาร(Body Section)เป็นส่วนเนื้อหาหลักของเอกสารเว็บ โดยส่วนนี้จะเป็นส่วนที่นำไปแสดงผลบน
โปรแกรมเว็บเบราว์เซอร์ ซึ่งการแสดงผลนั้นจะใช้ป้ายระบุหรือคำสั่งเป็นตัวควบคุมรูปแบบการแสดงผล ไม่ว่าจะเป็น
ข้อมูลที่เป็นข้อความ รูปภาพ หรือ เสียง

การเขียนป้ายระบุ (Tag)หรือคำสั่ง จะไม่มีข้อความจำกัดสามารถป้อนคำสั่งติดกันหลายคำสั่งในหนึ่งบรรทัด หรือจะมีเพียง
1 บรรทัดต่อ 1 คำสั่งก็ได้ โดยทั่งไปแล้วจะยึดหลักการจัดวางที่ทำให้ผู้ที่สร้างเอกสารเว็บนั้นสามารถทำความเข้าใจได้ง่าย
เช่นทำการจัดย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกันให้อยู่ในย่อหน้าระดับเดียวกัน ซึ่งคำสั่งที่ใช้กำหนดรูปแบบการแสดงผล
ทั้งหมด ที่เป็นส่วนของเนื้อหาของเอกสาร จะอยู่ระหว่างป้ายระบุ (Tag)หรือคำสั่ง BODY/BODY สามารถแบ่งกลุ่มคำสั่งได้
ดังนี้



- กลุ่มคำสั่งการจัดการย่อหน้า
- กลุ่มคำสั่งจัดควบคุมรูปแบบตัวอักษร
- กลุ่มคำสั่งการจัดทำเอกสารแบบรายการ
- กลุ่มคำสั่งการเชื่อมโยงเอกสาร
- กลุ่มคำสั่งจัดการรูปภาพ
- กลุ่มคำสั่งจัดการตาราง
- กลุ่มคำสั่งการแบ่งส่วนของเอกสาร
- กลุ่มคำสั่งอื่น ๆ

การสร้างเอกสารเว็บเพจเบื้องต้น

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



คำสั่งเบื้องต้นสำหรับการสร้างเว็บเพจ

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


คำสั่งกำหนดส่วนหัวของเอกสารเว็บ
ดังที่กล่าวมาเอกสารเอชทีเอ็มเอลนั้น แบ่งออกเป็น 2 ส่วน คืดส่วนเรื่องของเอกสารเว็บและส่วนเนื้อหาของเอกสารเว็บ โดยคำสั่งที่ใช้บอกหัวเรื่องของเอกสารเว็บนั้น คือคำสั่ head../headซึ่งคำสั่งที่อยู่ภายในส่วนหัวของเอกสารเว็บนั้นเป็นคำสั่ง ที่ใช้กำหนดข้อความที่ใช้เป็นชื่อเรื่องของเอกสารเอชทีเอ็มเอล และคำสั่งที่ใช้สำหรับบอกคำสำคัญ(Kryword) ของเอกสาร เอชทีเอ็มเอล เพื่อใช้ในการค้นหาเอกสารนั้นบนระบบเครือข่ายอินเทอร์เน็ต




คำสั่งกำหนดข้อความในส่วนหัวของโปรแกรมเว็บเบราว์เซอร์
คำสั่งที่ใช้สำหรับกำหนดข้อความที่จะปรากฏบนหัวของโปรแกรมเว็บเบราว์เซอร์ คือคำสั่ง TITLE.../TITLE หากต้องการให้ข้อความใดปรากฏที่ตำแหน่งส่วนหัวของโปรแกรมเว็บเบราว์เซอร์ ทำได้โดยเอาข้อความที่ต้องการแสดงผลนั้นใส่เข้าไประหว่างคำสั่งเปิด TITLE และคำสั่งปิด TITLE ซึ่งคำสั่งนี้จะอยู่ในส่วนหัวของเอกสารเว็บ


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







การกำหนดสีของพื้นหลังและสีของตัวอักษร
การกำหนดสีพื้นหลังและการกำหนดสีของตัวอักษรของเอกสารเว็บนั้น สามารถทำได้โดยกำหนดเป็นการอธิบาย ลักษณะพิเศษ (Attribute)ของคำสั่ง BODY โดยมีวิธีการกำหนดสีของถพื้นหลังของเอกสารและสีของตัวอักษรในเอกสาร ได้ดังนี้


การกำหนดสีของพื้นหลังเอกสาร
การกำหนดสีพื้นหลังของเอกสารเว็บหรือเอกสารเอชทีเอ็มแอล นั้นสามารถทำได้โดยใช้การอธิบายลักษณะพิเศษ(Attribute)คือBGCOLOR ซึ่งการกำหนดสีพื้นของเอกสารเอชทีเอ็มแอลนั้น สามารถกำหนดภายใต้คำสั่งเปิดของคำสั่ง BODY โดยการกำหนดสีของพื้นหลังของเอกสารเอชทีเอ็มแอลสามารถแสดงได้ดังนี้



บทที่ 4 การกำหนดลักษณะและตัวอักษร

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

ข้อความเรื่อง

การกำหนดข้อความให้เป็นหัวเรื่องของเนื้อหา (Heading) สามารถทำได้โดยใช้ป้ายระบุ (Tag) หรือคำสั่ง Hn…/Hn โดย n หมายถึงตัวเลขขนาดของตัวอักษรที่ใช้เป็นหัวเรื่อง ซึ่งตัวเลขจะมีค่าตั้งแต่ 1-6 โดยตัวเลข 1 จะเป็นหัวข้อหัว เรื่องที่มีขนาดของตัวอักษรที่มีขนาดใหญ่ที่สุดและตัวเลข 6 จะเป็นข้อความหัวเรื่องที่มีขนาดของตัวอักษรเล็กที่สุด ซึ่งใช้เพื่อจุดประสงค์สำหรับการกำหนด ชื่อบท ชื่อหัวข้อต่าง ๆ เป็นต้น มีรูปแบบคำสั่งดังนี้


การกำหนดของข้อความหัวเรื่อง สามารถทำการกำหนดลักษณะพิเศษ (Attribute) สำหรับรูปแบบการแสดงผลคือ Align ซึ่งใช้สำหรับจัดตำแหน่งในการแสดงผล โดยสามารถกำหนดให้กึ่งกลาง (Aling = center) ชิดขวา (Aligo = right) และชิดซ้าย (Alight = left) โดยถ้าไม่กำหนดลักษณะพิเศษ Alight นี้จะเป็นการจัดให้เป็นข้อความหัวเรื่องอยู่ใน ตำแหน่งชิดซ้าย


การขึ้นบรรทัดใหม

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

การขึ้นย่อหน้าใหม

การใช้คำสั่งนี้คือเมื่อการขึ้นบรรทัดใหม่เหมือนกับคำสั่ง BR แต่จะทำการเว้นบรรทัดใหม่เพิ่มขึ้นให้อีกหนึ่งบรรทัด โดยคำสั่ง P นั้นสามารถใช้ได้ทั้งเป็นป้ายระบุเดี่ยวและป้ายระบุเปิด/ปิดก็ได้ โดยหากต้องการกำหนดลักษณะพิเศษเพิ่ม เติมจะต้องใช้ลักษณะของป้ายระบุเปิด/ปิดเท่านั้น ตัวอย่างคือ P align = "align type" …/P โดย align type นั้นสามารถใช้ ได้ดังนี้คือ center, left หรือ right


คำสั่งนี้จะใส่ไว้ยังตำแหน่งของเนื้อหาเอกสาร ที่ต้องการจะให้ขึ้นบรรทัดใหม่ในขั้นตอนของการแสดงผล โดยการขึ้นบรรทัดใหม่นี้จะไม่สนใจการกด Enter ในการขึ้นบรรทัดใหม่แต่จะสนใจเพียงคำสั่ง BR เท่านั้น


คำสั่งนี้จะใส่ไว้ยังตำแหน่งของเนื้อหาเอกสาร ที่ต้องการจะให้ขึ้นบรรทัดใหม่ในขั้นตอนของการแสดงผลโดยการ
ขึ้นบรรทัดใหม่นี้จะไม่สนใจการกด Enter ในการขึ้นบรรทัดใหม่แต่จะสนใจเพียงคำสั่ง BR เท่านั้น

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



จากการกำหนดคุณลักษณะเพิ่มเติมของคำสั่ง HR สามารถอธิบายได้ดังนี้
ALIGN คือการจัดตำแหน่งของเส้นว่าจะอยู่ตำแหน่งใดของจอภาพ
CENTER,LEFT,RIGHT COLOR คือการกำหนดสีของเส้นคั่น
SIZE คือการกำหนดขนาดความหนาของเส้นคั่น
WIDTH คือการกำหนดความยาวของเส้นคั่น
NOSHADE คือการกำหนดให้เส้นคั่นเป็นเส้นทึบ

การจัดรูปแบบตัวอักษร
การกำหนดตัวอักษรตัวหนา
การกำหนดลักษณะของตัวอักษรเพื่อให้แสดงผลเป็นตัวอักษรแบบตัวหนา (Bold) เพื่อใช้ประโยชน์ในการเน้นข้อความ
ในประโยค การกำหนดลักษณะของตัวอักษรที่แสดงผลให้เป็นตัวหนานั้น สามารถกำหนดโดยใช้คำสั่ง B…/B




การขีดเส้นใต้ข้อความ
การขีดเส้นใต้ข้อความ (Underline) เพื่อประโยชน์ในการเน้นข้อความในเอกสารเว็บเช่นเดียวกับคำสั่งที่เน้นตัวอักษร เป็นตัวหนา การขีดเส้นใต้ข้อความภายในเอกสารเว็บนั้นสามารถ ทำได้โดยการใช้คำสั่ง U…/Uโดยมีรูปแบบการใช้คำสั่ง

ดังตัวอย่าง


การกำหนดตัวอักษรเป็นตัวเอียง
การกำหนดตัวอักษรในเอกสารเว็บให้เป็นตัวเอียง (Halic) ใช้ประโยชน์ในการเน้นข้อความเช่นเดียวกับตัวอักษรตัว หนาและขีดเส้นใต้ ซึ่งสามารถทำได้โดยการใช้คำสั่ง I…/I โดยรูปแบบการใช้งานคำสั่งดังตัวอย่าง
การกำหนดตัวอักษรกะพริบ
การกำหนดข้อความที่แสดงผลบนโปรแกรมเว็บเบราว์เซอร์ให้แสดงผลแบบกระพริบ ทำได้โดยใช้คำสั่ง BLINK…/BLINK โดยคำสั่งนี้จะมีผลกับการแสดงผลเอกสารเว็บโดยใช้โปรแกรมเบราว์เซอร์ Netscape แต่จะไม่มีผลกับการแสดงผลเอกสารเว็บโดยใช้โปรแกรมเว็บเบราว์เซอร์ Internet Explorer



การกำหนดตัวอักษรเป็นตัวห้อย
การกำหนดรูปแบบการแสดงผลให้เป็นตัวอักษรตัวห้อย ใช้ประโยชน์ในกรณีที่ต้องการแสดงผลที่ระดับต่ำกว่า ระดับปกติและมีขนาดเล็กกว่าตัวอักษรปกติ สามรถทำได้โดยการใช้คำสั่ง SUB…/SUB รูปแบบการใช้งานคำสั่งสามารถ แสดงผลได้ดัง ตัวอย่าง



การกำหนดตัวอักษรเป็นตัวยก
การกำหนดรูปแบบการแสดงผลให้เป็นตัวอักษรตัวยก ใช้ประโยชน์ในกรณีที่ต้องการแสดงผลที่ระดับสูงกว่าระดับ ปกติและมีขนาดเล็กกว่าตัวอักษรปกติ สามารถ ทำได้โดยการใช้คำสั่ง SUP…/SUP รูปแบบการใช้คำสั่งสามารถ แสดงได้ดังตัวอย่าง



การกำหนตัวอักษรเคลื่อนที่
การกำหนดแสดงผลของข้อความให้มีการเคลื่อนที่ของตัวอักษรหรือข้อความ โดยปกติการเคลื่อนที่ของตัวอักษร นั้นจะเคลื่อนที่จากขวาไปซ้าย การแสดงผลในรูปแบบนี้สามารถทำได้โดยการใช้คำสั่ง MARQUEE…/MARQUEE ซึ่งคำสั่งนี้สามารถแสดงผลเมื่อใช้โปรแกรมเบราว์เซอร์ Imternet Explorer เท่านั้น โดยมีรูปแบบการใช้งานคำสั่งนี้



การกำหนดลักษณะของตัวอักษร
การกำหนดลักษณะของตัวอักษรที่แสดงผลบนโปรแกรมเว็บเบราว์เซอร์เช่นสีของตัวอักษร ฟอนต์ของตัวอักษร สามารถกำหนดได้โดยการใช้คำสั่งFONT…/FONT จากนั้นทำการกำหนดลักษณะต่าง ๆ เหล่านั้น โดยการระบุลักษณะ พิเศษ (Attribute) ลงไปตรงป้ายระบุเปิดคำสั่ง FONT

การกำหนดฟอนต์ของตัวอักษร
การกำหนดฟอนต์ของตัวอักษรที่ต้องการแสดงผลบนโปรแกรมเว็บเบราว์เซอร์นั้นสามารถทำการกำหนดได้โดย ระบุลักษณะพิเศษ (Attribute) คือ FACE ลงไป จากนั้นทำการระบุชื่อของฟอนต์ที่ต้องการแสดงผล เช่น "Ms Sans Serit", "Tahoma" เป็นต้น โดยคำสั่ง FACE นี้จะอยู่ภายใต้คำสั่ง FONT สามารถแสดงได้ดังนี้





การกำหนดสีของตัวอักษร
การกำหนดสีของตัวอักษร สามารถทำการกำหนดได้โดยการกำหนดลักษณะพิเศษ(Attribute) ที่ชื่อว่า Color ลงไป จากนั้นตามด้วยชื่อของสี เช่น red, blue, green , yellow เป็นต้นอาจทำกำหนดรหัสของสีที่ต้องการลงไป เช่น #9935A5, แสดงได้ดังนี้


บทที่ 5 การกำหนดหัวข้อ

บทที่ 6 การนำเสนอรูปภาพ

ชนิดของแฟ้มข้อมูลรูปภาพ

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

ชนิดของแฟ้มข้อมูลรูปภาพ
รูปภาพที่ใช้ประกอบในเนื้อหาของเว็บเพจนั้น ถือว่าเป็นส่วนประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ เพราะจะทำให้ เว็บเพจนั้นมีความน่าสนใจยิ่งขึ้น โดยทั่วไปแล้วแฟ้มข้อมูลรูปภาพที่นิยมนำมาใช้ประกอบในการสร้างเว็บเพจนั้น มีอยู่ 2 ประเภทคือ ไฟล์เจพีจี ไฟล์จีไอเอฟ
ไฟล์เจพีจี ( Joint Photographic Experts Group JPEG)
แฟ้มข้อมูลรูปภาพชนิดเจพีจีเป็นแฟ้มข้อมูลที่ผ่านกระบวนการบีบอัดข้อมูล โดยนำเอา ข้อมูลส่วนที่ไม่สำคัญออกไป และทำการบีบอัดข้อมูลในอัตราส่วน 10:1 โดยขนาดของแฟ้มข้อมูลที่นำมาใช้นั้นอาจมีขนาดลดลงเหลือเพียง 10-30% ของขนาดแฟ้มข้อมูลที่จะทำการบีบอัดข้อมูล โดยระดับของการบีบอัดนั้นจะมี 3 ระดับคือ High, Middle, Low compressionโดยแฟ้มข้อมูลที่มีการบีบอัดข้อมูลมากจะทำให้แฟ้มข้อมูลมีขนาดเล็กลงมาก แต่คุณภาพของรูปภาพนั้นก็จะลดลงตามไป ด้วยหากต้องการคงคุณภาพของรูปภาพที่ทำการบีบอัดแล้วมีคุณภาพดีขนาดของแฟ้มข้อมูลก็จะมีขนาดใหญ่ตามไปด้วย มักนิยมใช้กับรูปภาพที่เป็นลักษณะของภาพถ่าย
ไฟล์จีไอเอฟ (Graphics Interchange Format, GIF)
แฟ้มข้อมูลรูปภาพชนิดจีไอเอฟเป็นแฟ้มข้อมูลชนิดบิตแมป ที่ใช้เทคนิคการบีบอัดภาพ การเก็บภาพนั้นจะเก็บค่าของ จุดสี ที่เรียงต่อกันจนเกิดเป็นรูปภาพ แฟ้มข้อมูลชนิดนี้ ส่วนใหญ่นิยมใช้กับภาพถ่ายและภาพการ์ตูน นอกจากนั้นสามารถ ทำการรวมเอาภาพชนิดจีไอเอฟนี้หลายภาพมาทำการรวมเป็นแฟ้มข้อมูลเดียวกัน ซึ่งจะทำให้สามารถแสดงผลเป็นภาพ เคลื่อนไหวได้ ชนิดของแฟ้มข้อมูลรูปภาพจีไอเอฟ มีอยู่ 2 ชนิดคือ
1.GIF87a เป็นแฟ้มข้อมูลที่ใช้งานทั่วไป
2. GIF89a เป็นแฟ้มข้อมูลชนิดที่สนับสนุนการทำภาพเคลื่อนไหว (Animation GIF)
นอกจากนี้แฟ้มข้อมูลรูปภาพแบบจีไอเอฟ ยังสามารถปรับการแสดงผลได้อีก 3 แบบ
1.Transparent Background เป็นการแสดงรูปภาพโดยไม่ต้องแสดงสีพื้นหลัง
2. Progressive เป็นการแสดงภาพอย่างหยาบก่อน แล้วจึงแสดงภาพอย่างละเอียด
3.Interlaced เป็นการแบ่งการแสดงผลรูปภาพออกเป็นช่วง ๆ เพื่อที่จะรวมเป็นการแสดงภาพทั้งหมด

คำสั่งสำหรับการแทรกรูปภาพ ในเอกสาร
การนำข้อมูลที่เป็นแฟ้มข้อมูลรูปภาพเพื่อแสดงผลบนโปรแกรมเว็บเบราว์เซอร์ สามารถทำได้โดยใช้คำสั่ง IMG
โดยกำหนดชื่อของแฟ้มข้อมูลที่ต้องการจะนำไปแสดงผลลงไปภายใต้คำสั่งสำหรับการกำหนดคุณลักษณะพิเศษ SRC
เพื่อทำให้รูปภาพนั้นสามารถใช้แสดงผลร่วมกับข้อมูลที่เป็นข้อความหรือตัวอักษร ซึ่งจะทำให้เว็บเพจนั้นมีความน่า
สนใจมากยิ่งขึ้น โดยมีรูปแบบดังต่อ ไปนี้


รูป แสดงการใช้งานคำสั่ง IMG


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


รูปแสดงการใช้คำสั่ง IMG โดยการใช้ร่วมกับการกำหนดคุณลักษณะเพิ่มเติม Alt


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

Align เป็นการกำหนดตำแหน่งของข้อความกับการแสดงผลของรูปภาพ
- Top เป็นการกำหนดข้อความให้อยู่ด้านบนของรูปภาพ
- Middle เป็นการกำหนดข้อความให้อยู่กึ่งกลางของรูปภาพ
- Bottoom เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ
- Left เป็นการกำหนดให้รูปภาพอยู่ด้านขวาของหน้าจอ
- Right เป็นการกำหนดให้รูปภาพอยู่ด้านขวาของหน้าจอ

รูปแสดงการใช้คำสั่ง IMG โดยใช้ร่วมกับ Align = Top

รูปแสดงการใช้คำสั่ง IMG โดยใช้ร่วมกับ Align = middle

คำสั่งสำหรับกำหนดพื้นหลังของเอกสารให้เป็นรูปภาพ

การกำหนดรูปสำหรับใช้เป็นภาพพื้นหลัง (Background) ของเอกสารนั้นสามารถทำได้โดยการกำหนดเพิ่มเติม ในส่วนของการกำหนดลักษณะพิเศษของคำสั่ง BODY ที่ใช้สำหรับบอกจุดเริ่มต้นส่วนเนื้อหาของเอกสารเว็บ คำสั่งที่ ใช้กำหนดพื้นหลังคือ Background โดยรูปแบบการใช้งานคำสั่งดังนี้

แฟ้มข้อมูลรูปภาพที่นิยมนำมาใช้เป็นพื้นหลังของเอกสาร คือแฟ้มข้อมูลชนิด gif หรือ jpg ซึ่งแฟ้มข้อมูลรูปภาพที่ นำมาใช้เป็นพื้นหลังนั้นจะมีขนาดเล็กหรือขนาดใหญ่ โปรแกรมสำหรับแสดงผลเอกสารเว็บหรือโปรแกรมเว็บ บราวเซอร์ จะนำเอารูปภาพเหล่านั้นมาเรียงต่อกันจนเต็มหน้าจอการแสดงผล

รูป ภาพที่ต้องการจะนำมาแสดงใช้เป็นพื้นหลัง

รูป แสดงการใช้คำสั่งสำหรับกำหนดพื้นหลังของเอกสารให้เป็นรูปภาพ

อีกคำสั่งหนึ่งคือ BGproperties=fixed โดยคำสั่งนี้จะเป็นการกำหนดรูปภาพที่ใช้เป็นพื้นหลังให้คงที่ กล่าวคือหาก ข้อมูลที่ทำการแสดงผลนั้นไม่สามารถแสดงผลในหนึ่งหน้าจอได้ รูปที่นำมาใช้เป็นพื้นหลังจะไม่มีการเคลื่อนที่ตามเมื่อ มีการเลื่อนแถบเลือกข้อมูลด้านแนวตั้งและจำทำการกำหนดระยะกั้นซ้าย และบนได้โดยใช้คำสั่ง Leftmargin และ Topmargin ร่วมด้วย


บทที่ 7 การเชื่อมโยงข้อมูล

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

รูป แสดงรูปแบบของตัวชี้ที่อยู่ในตำแหน่งต่าง ๆ ของอกสาร

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

รูป แสดงรูปแบบของตัวชี้ที่อยู่ในตำแหน่งต่าง ๆ ของอกสาร

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

รูป แสดงรูปแบบของตัวชี้ที่อยู่ในตำแหน่งต่าง ๆ ของอกสาร

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

รูป แสดงรูปแบบของตัวชี้ที่อยู่ในตำแหน่งต่าง ๆ ของอกสาร

ประเภทของการเชื่อมโยง


ประเภทของการเชื่อมโยงของเอกสารเอชทีเอ็มแอลนั้น สามารถแบ่งลักษณะของการเชื่อมโยงออกเป็น 2ประเภท
คือ
- การเชื่อมโยงภายในเว็บไซต์ของตนเอง
- การเชื่อมโยงไปยังเว็บไซต์อื่น
โดยการเชื่อมดยงนี้ ยังสามารถแบ่งได้ 2 ชนิด คือการเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน และเชื่อมโยงข้อมูลทาง
เอกสาร

การเชื่อมโยงข้อมูลต่าง ๆ เอกสาร

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



การเชื่อมโยงนอกเว็บไซต์

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




รูป แสดงการใช้งานคำสั่งสำหรับเชื่อมโยงไปังเอกสารอื่น

รูปแสดงผลที่ได้จาการเลือก " ไปยังเอกสารของบทที่ 6 " โดยไม่ระบุTaget=_Blank


การเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน

คำสั่งที่ใช้สำหรับเชื่อมโยงข้อมูลภานในเอกสารเดียวกัน มีรูปแบบการใช้งานเช่นเดียวกับการเชื่อมโยงข้อมูลเอกสาร
ต่างกันเพียงส่วนของการกำหนดคุณลักษณะเพิ่มเติมนั้น จะใช้สัญลักษณ์ # นำหน้าชื่อที่ใช้สำหรับเชื่อมโยงเอกสารภายใน หน้าเดียวกัน ซึ่งมีรูปแบบการใช้งานดังนั้

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




รูปแสดงการใช้งานคำสั่งการเชื่อมโยงเอกสารในหน้าเดียวกัน

การเชื่อมโยงแบบอี-เมล์

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

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



รูป แสดงการใช้งานคำสั่งเชื่อมโยงแบบอี-เมล

รูป เมื่อคลิกเมาส์ตรงตำแหน่งที่เชื่อมโยงไปยังการส่งอี-เมล์ จะเรียกใช้งานโปรแกรมส่งอี-เมล์

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


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

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

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