ถ้าต้องการปรับขนาดของช่องรับข้อมูลในเว็บเพจต้องกำหนดด้วยแอททริบิวต์ attribute ใด

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

รู้จักกับภาษาhtml

HTML ย่อมาจากคำว่า Hypertext Markup Language ซึ่งพัฒนาขึ้นมาจากภาษา SGML (Standard Generalized
Markup Language) โดย นักฟิสิกส์ชื่อ Tim Berners - Lee ในปี ค.ศ. 1990 แห่งสถาบันวิจัย CERN(Conseil Europeen Pour
la Recherche Nucleaire) ใช้สำหรับนักวิจัยในสถาบันเพื่อแบ่งปันข้อมูลกัน จากนั้นก็ได้แพร่ขยายออกไป และถูกพัฒนา
เรื่อยๆ ระบบนี้ได้ถูกตั้งชื่อว่า World Wide Web:WWW ที่เรารู้จักกันจนถึงปัจจุบัน

HTML เป็นภาษามาตรฐานที่ใช้พัฒนาเอกสารในรูปแบบของเว็บเพจโดยสามารถนำเสนอข้อมูลตัวอักษร ภาพเสียง
และไฟล์ในรูปแบบอื่นๆ บนระบบเครือข่ายอินเทอร์เน็ต การเรียกใช้เอกสารเหล่านี้ทำได้โดยการใช้โปรแกรมเว็บบราวเซอร์
(Web Browser) เช่น Internet Explorer ,Mozilla Firefox , Google Chrome ฯลฯ เรียกดูแฟ้มที่สร้างด้วยภาษา HTML ข้อดีของ HTML คือสามารถใช้ได้กับเครื่องคอมพิวเตอร์ และระบบปฏิบัติการได้หลากหลายชนิด

มาตรฐาน html และเวอร์ชั่นของ html

ภาษา HTML ได้รับการพัฒนาและถูกนำไปใช้อย่างแพร่หลาย จึงทำให้เกิดมาตรฐานในเวอร์ชั่นต่างๆดังนี้

HTML 1.0	เกิดขึ้นในปี 1993 โดย Tim Berners-Lee และ Dave Raggett ได้กำหนดให้เอกสาร HTML ที่ได้พัฒนา ขึ้นแม้จะเขียนด้วยมาตรฐานใดๆ ก็ตาม ต้องไม่ทำให้เอกสารที่สร้างนั้นอ่านไม่ได้
HTML 2.0	เกิดขึ้นในปี 1995 ถูกพัฒนาขึ้นโดย IETF (Internet Engineering Task ForceX)ซึ่งมุ่งหวังให้สามารถ เปิดแสดงผลกับบราเซอร์ทั่วไปได้
HTML 3.0	ในปี 1995 ได้มีการพัฒนา HTML ให้มีความสามารถเพิ่มขึ้น โดยการเพิ่มการทำงานเกี่ยวกับตาราง การปรับข้อความล้อมรอบภาพ และแสดงส่วนที่ซับซ้อนได้ดีขึ้น
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 ได้เช่นเดิม)

xhtml ภาษามาตรฐานใหม่ที่จะมาแทนที่ html

XHTML (ย่อมาจาก Extensible HyperText Markup Language) XHTML เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML (Extensible Markup Language) และ HTML มารวมกันกลายเป็นมาตรฐานใหม่ของ HTML
คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป

จากข้อเสียของ HTML ที่เมื่อแสดงผลผ่านบราวเซอร์ของค่ายต่างๆ เช่น Internet Explorer, Firefox, Netscape, Opera และอื่นๆ ได้ผลที่แตกต่างกัน เว็บเพจที่ออกแบบมาอย่างดีของเรา อาจดูสวยงามถูกต้องใน IE แต่กลับผิดเพี้ยนไปเมื่อดูด้วย Firefox

องค์กร W3C จึงได้นำ HTML 4.0 มาปรับปรุงใหม่ โดยยึดหลักการของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การ ใช้งานมีความเข้มงวด และเป็นมาตรฐานยิ่งขึ้น ซึ่งจะเป็นแนวทางให้บราวเซอร์ค่ายต่างๆ พัฒนาโปรแกรม
เว็บบราวเซอร์ โดยใช้มาตรฐานเดียวกัน รวมไปถึงเว็บบราวเซอร์ที่ติดตั้งบน Platforms ต่างๆ เช่น PDA
โทรศัพท์มือถือ ด้วย

ข้อดีของ XHTML

ใช้งานไม่ยุ่งยากเพราะพัฒนามาจาก HTML 4 เพียงแต่ใช้รูปแบบการเขียนเหมือน XML
มีการใช้คำสั่งและโมดูลร่วมกันได้ คือในภาษา XHTML จะให้เราสามารถพัฒนา Element,Attribute และโมดูลการทำงานของเราเองได้ และสามารถส่งต่อให้ผู้อื่นนำไปใช้ได้ไม่ต้องเสียเวลาคิดใหม่
การพัฒนาบราว์เซอร์ทำได้ง่านและสะดวก เพราะ ภาษา XHTMLมีรูปแบบที่แน่นอนตายตัว
การทำงานเข้ากับทุกระบบ เพราะภาษา XHTML เป็นภาษาที่ไม่ซับซ้อนและมีความแน่นอน จึงไม่จำเป็นต้อง
ใช้บราวเซอร์และโปรเซสเซอร์ในการประมวลผลที่สูงมากนัก ส่งผลทำให้อุปกรณ์ต่างๆ พัฒนาระบบให้สามารถ
เปิดใช้เว็บได้มากยิ่งขึ้น

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

html 5

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

ลักษณะของภาษาhtml

องค์ประกอบของภาษา html สามารถแบ่งออกเป็น 2 ส่วน คือ ส่วนที่เป็นข้อความทั่วๆ ไป กับส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบข้อความที่แสดง ซึ่งเราเรียกคำสั่งนี้ว่า แท็ก (Tag) โดยแท็กคำสั่งของ HTML จะอยู่ในเครื่องหมาย < และ > โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ

รูปแบบ <แท็กเปิด> ข้อความ <แท็กปิด> เช่น <title> ชื่อหัวเว็บ </title>

Tag เดี่ยว

เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น

Tag เปิด/ปิด

รูปแบบของ Tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag> เราเรียกว่า tag เปิด
</tag> เราเรียกว่า tag ปิด

ในกรณีที่เราต้องการใช้แท็กซ้อนกันมากกว่า 1 แท็ก เราจะต้องใช้แท็กปิด ปิดแท็กในสุดก่อน แล้วจึงไล่ปิดแท็กอื่น ๆ
ตามลำดับ เช่น

เราสามารถพิมพ์เป็นตัวเล็ก หรือ ตัวใหญ่ก็ได้ (เวอร์ชั่น 4 ขึ้นไป) เช่น <HTML>,<html>,<Html> จะมีความหมายเหมือนกัน แต่ควรจะพิมพ์ตัวเล็กทั้งหมด เพื่อให้รองรับกับเอกสาร XHTML ด้วย

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

แท็ก	hr	เป็นการกำหนดเส้นขั้นทางแนวนอน
แอททริบิวท์	width	กำหนดคุณสมบัติความยาวของเส้น
ค่าที่กำหนด	600	ค่าความยาวของเส้น

โครงสร้างพื้นฐานของภาษา html

โครงสร้างของภาษา html แบ่งได้เป็น 4 ส่วนหลัก ดังนี้

แท็ก html <html>..</html>
เป็นแท็กแรกที่ต้องมีในภาษา html ซึ่งบ่งบอกว่านี่คือภาษา html โดยจะอยู่ที่จุดเริ่มต้นของเอกสาร และท้ายเอกสาร
ในแต่ละแฟ้ม

ส่วนหัวของเอกสาร(header) <head> ..</head>
คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง

การกำหนดชื่อเว็บเพจ โดยใช้แท็ก <title>…</title> ซึ่งข้อความภายในแท็กนี้จะเป็นชื่อหัวเรื่องเว็บเพ็จที่ต้องการ ซึ่งจะต้องมีความยาวไม่เกิน 64 ตัวอักษร ข้อความนี้จะไปปรกฏที่ title bar ของ บราวเซอร์ที่เราใช้งานอยู่
การกำหนดรูปแบบของข้อความและเลย์เอาท์ในหน้าเว็บเพจ ที่เรียกว่า สไตล์ชีต
การแทรกหรือใส่สคริปต์โปรแกรม เช่น javaScript

เนื้อหา(body) <body>..</body>
เป็นส่วนเนื้อหาที่จะไปแสดงผลบนหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล
เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ

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

เครื่องมือที่ใช้สร้างภาษา Html

ในการสร้างเว็บเพจด้วย HTML นั้น เราจะต้องมีเครื่องมือที่ใช้ในการเขียนและแก้ไขโค้ด ที่เรียกว่า Text Editor ซึ่งเป็นโปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความ ปัจจุบันมีโปรแกรมอยู่มากมายที่ใช้สำหรับแก้ไขโค้ด HTML โดยเฉพาะ เช่น Notepad EditPlus และ Dreamweaver เป็นต้น

1.โปรแกรม Notepad

                 Notepad คือโปรแกรม text editor ที่เรียกใช้งานได้ง่าย มีขนาดเล็ก มีในทุกเครื่องที่ใช้ Windows Notepad นั้นมีข้อจำกัด
อยู่บ้างเช่น
            - Undo (ย้อนคืนการทำงานล่าสุด) ได้แค่ครั้งเดียว เช่น เรา ลบ และพิมพ์ใหม่สองรอบ เราจะย้อนไปได้แค่รอบล่าสุด
เท่านั้น ลึกกว่านั้นไม่ได้
           - ไม่มี syntag hilight เช่น HTML PHP C หรือภาษาอื่นใด ไม่ว่าตำแหน่งใด บรรทัดใด คำสั่งอะไรก็มีแต่สีดำทั้งหมด
           - ไม่มีหมายเลขกำกับ บรรทัด หรือ Line Number นั่นเอง

2.โปรแกรม EditPlus

โปรแกรม EditPlus เป็นโปรแกรม Editor ตัวหนึ่งที่ใช้สำหรับการพิมพ์หรือแก้ไขเอกสารหรือสคริปต์ต่างๆ เช่น
Text ,Html , PHP ,ASP ,ASP.NET ฯลฯ ที่ได้รับความนิยมมาก เพราะฟรีและมีขนาดเล็ก

คุณสมบัติเด่นของโปรแกรม Editplus

             - แยกคำสั่งต่างๆ ด้วยการแสดงสีที่ไม่เหมือนกัน
             - เมื่อเขียนเวบด้วยภาษา HTML เสร็จแล้ว สามารถดูการแสดงผลได้เลยทันที
             - เปิดไฟล์ได้ทีละหลายๆไฟล์พร้อมกัน
             - สามารถค้นหาและแทนที่ (Find & Replace) ข้อความเดียวกันได้ทีละหลายๆไฟล์พร้อมกัน
             - มีหมายเลขกำกับ บรรทัด (Line Number)ทำให้ดูง่าย

3. โปรแกรม Macromedia Dreamweaver

Macromedia Dreamweaver เป็นโปรแกรม ที่มีการออกแบบ มาสำหรับการออกแบบเว็บไซต์ในรูปแบบ WYSIWYG คือมีเครื่องมือและแถบคำสั่งให้เราเลือกใช้ได้ เหมือนกับ Word Processor จึงช่วยให้สามารถเว็บเพจด้วยความสะดวก
และรวดเร็ว

จุดเด่นของโปรแกรม Macromedia Dreamweaver

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

วิธีการใช้งานโปรแกรม notepad สร้างเอกสาร html

1. การเรียกใช้งานโปรแกรม Notepad สามารถทำได้ดังนี้

คลิกที่ Start > เลือก Programs > เลือก Accessories > เลือก Notepad

2. จะได้โปรแกรม Notepad สำหรับเขียนเว็บเพจ ดังนี้

3. ก่อนที่จะเริ่มเขียนชุดคำสั่ง ควรทำการกำหนดค่าตัวอักษรเสียก่อน โดยไปที่ Format เลือก Font จะได้ดังภาพ
แล้วทำการปรับ รูปแบบฟอนต์ และขนาดตัวอักษรให้เหมาะสมในการใช้งาน แล้วกดปุ่ม OK

4. แล้วทำการพิมพ์ชุดคำสั่งตามภาพด้านล่าง

2 วิธีการบันทึกเอกสาร

เมื่อสร้างเอกสารเสร็จแล้ว จะต้องบันทึกเป็นเอกสาร html โดยบันทึกเป็นนามสกุล .html หรือ .htm ดังนี้

การเปิดไฟล์ html ด้วย โปรแกรมเว็บเบราเซอร์

หลังจากที่เราบันทึกเอกสารเรียบร้อยแล้ว ให้เราดับเบิ้ลคลิกที่ไฟล์เว็บเพจที่เราสร้าง หรือทำการ
คลิกขวา >เลือกคำสั่ง Open With > เลือกเปิดผ่านเบราเซอร์ที่ต้องการ กรณีที่มีเว็บเบราเซอร์ในเครื่องคอมพิวเตอร์ มากกว่าหนึ่งตัว

ผลลัพธ์ที่ได้ คือ ไฟล์ที่เราบันทึกไว้จะถูกเปิดผ่านโปรแกรมเว็บเบราเซอร์ที่เราเลือก ดังรูป

ลองทำดู : คลิก download ไฟล์ ดังภาพ

หากพบว่า เนื้อหาที่เราเขียนในเว็บเพจไม่สามารถแสดงผลเป็นภาษาไทยเหมือนที่ต้องการ ทำให้เราไม่สามารถ
อ่านข้อมูลได้ เราสามารถแก้ไขได้ดังนี้ (กรณีเปิดผ่าน Internet Exproler ส่วนเบราเซอร์ตัวอื่นก็หลักการคล้ายกัน) คลิ้กที่เมนู
View หรือ คลิ๊กขวา --> เลือก Encoding --> เลือก Thai (Windows)

หากต้องการแก้ไขเว็บเพจ ให้กลับไปแก้ไขไฟล์ที่อยู่ใน โปรแกรม notepad แล้วทำการแก้ไข แล้วบันทึกไฟล์ (save) ทำการเปิดบราวเซอร์อีกครั้ง หรือกรณีที่ยังไม่ปิดเว็บเบราเซอร์ให้ กดปุ่ม refresh หรือ F5 ที่คีย์บอร์ด เพื่อโหลดหน้าเว็บใหม่

แสดงชุดคำสั่งภาษา HTML ผ่านทางหน้าเว็บเพจ

กรณีที่เราต้องการอยากจะดูซอสโค๊ต ชุดคำสั่งเพื่อตรวจทานความถูกต้องโดยไม่ต้องกลับไปดูที่ โปรแกรมNotepad
เราสามารถดู ชุคคำสั่ง html ผ่านทางหน้าเว็บเพจบน เว็บเบราเซอร์Internet Explorer ได้ ดังนี้ เลือก view ที่ menu bar >> เลือก
source หรือ คลิกขวา เลือกคำสั่ง View Source ดังภาพ

Top