บทที่ 2 การเรม่ิ ต้นกบั HTML ร้จู กั กบั ภาษา HTML HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์ (Hypertext Document : ข้อความในเอกสารที่เชื่อมโยงถึง ข้อมูลต่างๆ ได้) ซึ่งพัฒนาขึ้นมาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee ในปี ค. ศ. 1990 ซึ่งใช ้ในระบบของ CERN (Conseil Europeen pour la Recherche Nucleaire) เบื้องต้นได้เริ่มใช้ที่สวิตเซอร์แลนด์ จากนั้นก็ได้แพร่ขยายออกไป ระบบนี้ได้ถูกตั้งชื่อว่า World Wide Web : WWW ทเ่ี รารจู้ ักกันจนมาถึงยคุ ปัจจบุ ัน HTML = Hypertext+SGML HTML เกิดจากการสร้างเอกสาร Hypertext โดยพัฒนาจากภาษา SGML ภาษา HTML ได้รับการ พัฒนาและถกู นำไปใช้อยา่ งแพรห่ ลาย จงึ ทำให้เกดิ มาตรฐานในเวอรช์ นั่ ตา่ งๆ ดงั นี้ HTML 1.0 เกิดขึ้นในปี 1993 โดย Tim Berners-Lee และ Dave Raggett ได้กำหนดให้ เอกสาร HTML ที่ได้พัฒนาขึ้นแม้จะเขียนด้วยมาตรฐานใดๆ ก็ตาม ต้องไม่ทำให้เอกสารที่สร้างนั้นอ่านไม่ ได้ \"Any standard must not make existing documents (as far as possible) unreadable.\" HTML 2.0 เกิดขึ้นในปี 1995 ถูกพัฒนาขึ้นโดย IETF (Internet Engineering Task ForceX) ซึ่ง มงุ่ หวงั ใหส้ ามารถเปดิ แสดงผลกับบราวเซอรท์ ใี่ ชง้ านทั่วไปได้ HTML 3.0 ในปี 1995 ได้พัฒนา HTML ให้มีความสามารถเพิ่มขึ้น โดยการเพิ่มการทำงานเกี่ยวกับ ตาราง การปรับข้อความล้อมรอบภาพ และแสดงส่วนที่มีความซับซ้อนได้ดีขึ้น รวมทั้งช่วยให้บราวเซอร์ ย้อนกลับไปดูเวบ็ เพจหนา้ ที่เคยชมมาก่อนได้ดีกวา่ เวอช่ัน 2.0 หรอื ทเ่ี รียกวา่ Backward HTML 3.2 ในปี 1996 ได้มีการเพิ่ม Element และ Attribute ที่สามารถทำงานร่วมกับหลายๆ บราวเซอร์ไดม้ ากขนึ้ และมีชื่อเรยี กโค้ดแบบนีว้ า่ \"Wilbur\" HTML 4.0 ในปี 1997 ได้มีการพัฒนาและดูแลมาตรฐานของ HTML ด้วยองค์กรกลางที่ชื่อว่า W3C (The World Wide Web Consortium) เพื่อพัฒนาเทคโนโลยี WWW ให้ล้ำหน้ายิ่งขึ้น โดยได้มีการเพ่ิม ประสิทธิภาพในการทำงานด้วย Style sheet, Frame, การฝังออบเจก็ ต์ของโปรแกรมเสรมิ เพ่อื แสดงและเสียง การสรา้ งฟอรม์ และการใชง้ านร่วมกบั ภาษา Script แบบต่างๆ HTML 4.01 ในปี 1997 เช่นเดียวกนั ได้ปรบั การทำงานท่ีผิดพลาดให้สมบูรณ์ยิ่งข้ึน (หลงั จาก HTML 4.01 องค์กร W3C ได้หยุดพัฒนา HTML โดยเปลี่ยนไปพัฒนาภาษามาตรฐานใหม่ที่ชื่อว่า XHTML มาใช้ใน
การสร้างเวบ็ เพอื่ จะขยายการใชเ้ วบ็ ไปสู่อปุ กรณ์ต่างๆ ได้เพิม่ มากข้ึน แตก่ ็ยงั คงให้บราวเซอร์ใช้งานโปรแกรม ภาษา HTML ไดเ้ ช่นเดิม ลักษณะของภาษา HTML องค์ประกอบของภาษา HTML สามารถแบ่งออกเป็น 2 ส่วน คอื สว่ นทีเ่ ปน็ ขอ้ ความท่ัวๆไป และส่วน ทเี่ ปน็ คำสัง่ ทีใ่ ช้ในการกำหนดรปู แบบของขอ้ ความที่แสดง ซง่ึ เราเรยี กคำสั่งนีว้ า่ แทก็ (Tag) โดยแท็กคำสั่งของ HTML จะอยใู่ นเครื่องหมาย < และ > ซง่ึ มหี ลกั ในการเขียน คือ รปู แบบแทก็ จะแยกเปน็ 2 สว่ น โดยจะต้องมี สว่ นเร่ิมต้นของแทก็ เรยี กวา่ \"แท็กเปิด\" และสว่ นจบของแท็ก เรียกวา่ \"แทก็ ปดิ \" โดยสว่ นของแทก็ ปิดจะต้องมี เครื่องหมาย Slash (/) ดังน้ี < แทก็ เปดิ > ขอ้ ความ <แทก็ ปิด> เช่น <title>...</title> ในกรณที ี่เราต้องการใช้แท็กซ้อนกันมากกว่า 1 แทก็ เราจะต้องใช้แท็กปดิ ปิดแทก็ ในสุดก่อน แลว้ จงึ ไล่ปดิ แท็กอนื่ ๆ ตามลำดบั เช่น บางแท็กอาจจะไม่ต้องมีแท็กปิดก็สามารถใช้งานได้ เช่น <br> เราสามารถพิมพ์เป็นตัวเล็ก หรือตัว ใหญ่ก็ได้ (เวอร์ชัน 4 ขึ้นไป) เช่น <HTML>, <html>, <Html> จะมีความหมายเหมือนกัน บางแท็กจะมี ตัวกำหนดคุณสมบัติเรียกว่า แอตทริบิวต์ (Attribute) และค่าที่ถูกำหนดให้ใชใ้ นแท็ก (Value) โดยจะเขียนไว้ หลังแท็ก เช่น <hr width=600 size=5> แท็ก hr เป็นการกำหนดเส้นคั่นทางแนวนอน แอตทริบิวต์ width กำหนดคุณสมบตั ิความยาวของเสน้ ค่าทีก่ ำหนดใหใ้ ช้ 600 ค่าความยาวของเส้น
โครงสร้างพนื้ ฐานของ HTML โครงสรา้ งของภาษา HTML แบง่ ออกได้เปน็ 4 สว่ นหลัก ดงั น้ี <html> <head> <title> หัวขอ้ เว็บเพจ </title> </head> <body> สว่ นทีม่ เี นอื้ หา และข้อมลู เก่ยี บกบั ภาพ Link ทปี่ รากฏในเวบ็ เพจ </body> </html> <html>...</html> เป็นแทก็ แรกท่ีต้องมีในภาษา HTML ซง่ึ บ่งบอกว่าน่ีคือภาษา HTML โดยจะอยู่ ทจ่ี ุดเรม่ิ ตน้ ของเอกสารและท้ายเอกสารในแต่ละแฟ้ม <head>...</head> เป็นสว่ นกำหนดรายละเอยี ดหัวเอกสาร HTML เชน่ * การกำหนดชอื่ เพจ โดยใชแ้ ทก็ <title>...</title> ซ่งึ ขอ้ ความภายในแท็กนี้จะเป็นช่ือหัวเรื่องเว็บเพจท่ี ต้องการ ซง่ึ จะต้องมคี วามยาวไมเ่ กิน 64 ตัวอักษร ข้อความนจ้ี ะไปปรากฏท่ี title bar ของบราวเซอร์ทเี่ ราใช้ งานอยู่ และปรากฏบน Bookmark ของโปรแกรมบราวเซอร์ดว้ ย * การกำหนดรปู แบบของข้อความและเลย์เอาต์ในหนา้ เว็บเพจ ท่ีเรียกวา่ สไตลช์ ีต ซึ่งจะกล่าวถงึ ในบทน้ัน *การแทรก หรือใส่สคริปตโ์ ปรแกรม เชน่ JavaScript ซึ่งจะกล่าวในบทน้นั อกี ครง้ั <body>...</body> ส่วนน้เี ปน็ ส่วนของเนื้อหาเว็บเพจของเรา ไม่วา่ จะเปน็ ข้อความ รปู ภาพ ตาราง และการ เช่อื มตอ่ ไปยงั เอกสารอืน่ ๆ ที่จะไปแสดงผลที่เวบ็ บราวเซอร์ โปรแกรมทใี่ ช้สรา้ งเว็บเพจ โปรแกรมท่ีชว่ ยในการสร้างเว็บเพจมอี ยหู่ ลายโปรแกรม ขึ้นอยูก่ บั รปู แบบของการสรา้ งเว็บ เพจ ดงั น้ี โปรแกรมท่ีใช้เขยี นโค้ดเวบ็ เพจด้วยภาษา HTML โปรแกรม Notepad เปน็ โปรแกรมเพอ่ื สร้างเว็บ เพจ โดยการเขยี นดว้ ยภาษา HTML ซ่งึ เป็นโปรแกรม Text Editor ทม่ี าพร้อมกับระบบปฏิบตั ิการ Windows.
โปรแกรมที่ใชส้ ร้างเวบ็ เพจและจัดองค์ประกอบบนหน้าเวบ็ ปัจจุบันได้มีผู้ผลิตโปรแกรมสำเร็จรูปที่ช่วยสร้างงานเว็บไซต์ได้อย่างง่ายๆ โดยแค่นำภาพ และ ข้อความท่ีต้องการมาวางบนเว็บเพจไดเ้ ลย แถมยังมเี ครื่องมือทีช่ ่วยจัดวางหน้าเว็บได้อยา่ งสวยงาม และลูกเลน่ ในการใส่เสียง หรือภาพเคลื่อนไหวได้ด้วย โดยโปรแกรมที่ใช้ในการสร้างเว็บไซต์ ได้แก่ Macromedia Dreamweaver, Microsoft FrontPage และ NetObjects Fusion เป็นต้น ซึ่งโปรแกรมเหล่านี้จะเป็น โปรแกรมประเภท What You See Is What You Get (WYSIWYG) คือ เราจัดวางภาพ หรือข้อความแบบ ใหน โปรแกรมจะทำการเขียนโคด้ HTML ใหอ้ ัตโนมัติ
การใชง้ าน Notepad เบือ้ งตน้ ต่อไปนี้เป็นการเขียนภาษา HTML โดยเริ่มต้นเปิดโปรแกรม Notepad แล้วเขียนเอกสาร HTML ดัง รูป วธิ ีเปดิ โปรแกรม Noteapd และพิมพภ์ าษา HTML แรก เลอื ก Start > All Programs. เลือก Accessories > Notepad
พมิ พเ์ อกสาร HTML ดังตวั อยา่ ง วธิ ีการบนั ทกึ เอกสาร เมื่อสร้างเอกสารเสร็จแล้ว จะต้องบันทึกเป็นเอกสาร HTML โดยบันทึกเป็นนามสกุล .html หรือ .htm ดังนี้ เลอื กเมนู File > Save As ทำตามขั้นตอนดังภาพ
การต้งั ชื่อไฟล์ เราจะต้งั โดยการทำตามลำดับภาพขา้ งต้นก็ไดค้ ือ ตงั้ ช่อื ไฟล์ เชน่ พิมพ์ first.html หรือ พิมพ์ \"first.html\" โดยแบบที่ 2 เราจะมีการพิมพ์เครื่องหมายคำพูด \"...\" มาครอบชื่อไฟล์ไว้ ซึ่งเราจะไม่ จำเป็นต้องไปเลือกชนิดของไฟล์ (Save as Type) เลย จะเป็นการบังคับให้ Notepad บันทึกเป็น first.html ให้เรา แต่ถ้าไม่ใส่เครื่องหมายคำพูด และไม่เลือกชนิดไฟล์ว่า All File (*.*) Notepad จะบันทึกไฟล์เป็น first.html.txt ซึ่งนามสกลุ txt ไม่ใชน่ ามสกุลท่เี ราตอ้ งการ ดงั ภาพ หลงั จากทีเ่ ราบนั ทึกเอกสารเรยี บร้อยแลว้ ให้เราดับเบิลคลิกที่ไฟล์เว็บเพจที่เราสร้าง เว็บบราวเซอร์ก็ จะทำการแปลไฟลเ์ ว็บเพจทเ่ี ขยี นดว้ ยภาษา HTML กลายเปน็ รปู แบบทเ่ี ราตอ้ งการ ดบั เบลิ คลกิ ทไ่ี ฟลเ์ วบ็ เพจท่ีเราสร้าง
การเปิดเว็บเพจมาแก้ไข ในกรณีที่เราปิดไฟล์เว็บเพจจากโปรแกรม Notepad ที่เราสร้างมาก่อน หน้านน้ั ไปแล้ว และเราต้องการแก้ไขไฟลเ์ ว็บเพจ ให้เราทำการเปิดไฟล์ Notepad ข้นึ มาใหมแ่ ลว้ ไปที่เมนู File > Open แล้วเลือกตำแหน่งไฟล์เว็บเพจที่เราบันทึกไว้ในคอมพิวเตอร์ของเรา แล้วทำการแก้ไข และบันทึ ก โดยบันทึกที่ Save ในกรณีที่เราไม่ต้องการเปลี่ยนชื่อไฟล์ใหม่ และในกรณีที่เราต้องการเปลี่ยนเปลี่ยนช่ือไฟล์ ใหม่ ก็ให้เลือก Save As แล้วตัง้ ชื่อไฟล์ใหม่ และบนั ทกึ ดงั รูป
หากเราตอ้ งการแก้ไขเวบ็ เพจให้เรากลับไปที่ Notepad และทำการแกไ้ ขได้เลย หลังจากท่ีเราได้แก้ไข แล้ว ไม่ปรากฏเป็นภาษาไทย ให้เรากำหนดการแสดงผลของบราวเซอร์ใหม่ โดยการคลิกเมาส์ขวาเลือกคำส่ัง Encoding>Thai(Windows) ดงั รูป
Search
Read the Text Version
- 1 - 12
Pages:
