วันพุธที่ 24 กันยายน พ.ศ. 2557

สอนเขียน html ใน notepad เบื้องต้น - YouTube

ตัวอย่าง code ภาษา html

โค๊ด ภาษา HTML ที่เราได้เรียนในภาคเรียนที่แล้ว ให้นักเรียนทบทวน ดังนี้

1. คัดลอก code ของครูไปจัดเก็บในโปรแกรม Text Editor ถ้าเป็นระบบปฏิบัติการ Windows ให้นักเรียนใช้ Note pad

2. save เป็น file นามสกุล html (จำได้หรือไม่ว่าถ้าเป็นหน้า Home page ต้องตั้งชื่อ File เป็น index.html

3. เปิด Web Browser และทำการ Run เพื่อดูการทำงานของ code คำสั่งแต่ละคำสั่ง

<HTML>

<HEAD><TITLE>ยินดีต้อนรับเข้าสู่เว็บไซต์ของเรา</TITLE></HEAD>

<BODY BGCOLOR="FF0000"><H1>โรงเรียนเบ็ญจะมะมหาราช อำเภอเมือง จังหวัดอุบลราชธานี

</H1>

<A HREF="HTTP://WWW.BENCHAMA.AC.TH">เว็บไซต์โรงเรียนเรา</A>

<MARQUEE>PHONPHIMOL</MARQUEE>

<MARQUEE><A HREF="HTTP://WWW.BENCHAMA.AC.TH">เว็บไซต์โรงเรียนเรา</A></MARQUEE>

</BODY>

</HTML>

ความรู้ทั่วไปเกี่ยวกับภาษา HTML

ภาษา HTML (HpyerText Markup Language) เป็นภาษาหลักที่ใช้ในการสร้างเว็บเพจ (Web Page) เป็นภาษาประเภท Markup Language เกิดขึ้นจากการพัฒนาระบบ Word Wide Web ในเดือนมีนาคม 1989 โดยนักวิจัยจากสถาบัน CERN (Conseil European Pour La Recherche Nuclcaire) ซึ่งเป็นห้องทดลองในเมืองเจนีวา ประเทศสวิสเซอร์แลนด์ ชื่อ ทิม เบอร์เนอร์ – ลี (Tim Berners -Lee) ซึ่งทิม เบอร์เนอร์ – ลี ได้นำแนวความคิดในเรื่อง Hypertext ของ Vannevar Bush และ Ted Nelson มาใช้เพื่อกระจายข้อมูลในองค์ ต่อมามีการพัฒนาและกำหนดมาตรฐานโดยองค์กรที่ชื่อว่า W3C (World Wide Web Consortium)

ภาษา HTML เป็นภาษาที่มีลักษณะของข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปของเอกสารข้อความ (Text Document) จึงกำหนดรูปแบบและโครงสร้างได้ง่าย ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Lever 1 (รุ่นดั้งเดิม), HTML 2.0, HTML 3.0, HTML 3.2 , HTML 4.0, HTML 4.01 และ XHTML ก่อนที่จะมาถึง XHTML ทาง W3C ผู้พัฒนาเทคโนโลยี ได้พบข้อจำกัดของ HTML จึงได้สร้างภาษามาตรฐานใหม่ ชื่อว่า XML สามารถใช้ได้หลายแพลตฟอร์ม ต่อมาเมื่อมีความต้องการให้การเขียนเว็บเพจมีรูปแบบที่รัดกุมมากยิ่งขึ้น จึงได้รวบรวมคำสั่ง HTML 4.0 กับมาตรฐานของ XML เข้าไว้ด้วยกันเกิดเป็นภาษา HTML ที่มีกฎระเบียบมากยิ่งขึ้น และตั้งชื่อใหม่เป็น XHTML (Extensible HyperText Markup Language) คำสั่งต่าง ๆ ใน XHTML ยังสามารถใช้คำสั่งในภาษา HTML 4.0 ได้ แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษา โดยมีsyntaxสอดคล้องกับ XML เนื่องจาก HTML นั้นใช้โครงสร้างของ SGML ที่ค่อนข้างยืดหยุ่น ในขณะที่ XHTML นั้นพัฒนาจาก XML ซึ่งเป็นภาษาที่คล้ายกับ SGML แต่เข้มงวดมากกว่า เราสามารถมองว่า XHTML เป็นการแปลง HTML เดิมให้มาอยู่ในโครงสร้างของ XML ก็ได้XHTML 1.0 ได้เข้ามาเป็นส่วนหนึ่งของ World Wide Web Consortium (W3C) ในวันที่ 26 มกราคม พ.ศ. 2543 และกลายมาเป็น W3C recommendation เมื่อ 31 พฤษภาคม พ.ศ. 2544อย่างไรก็ตาม XHTML 2.0 หยุดพัฒนาในปี 2552 โดยพัฒนา HTML 5 แทนที่ เอกซ์เอชทีเอ็มแอล(XHTML : Extensible HyperText Markup Language) เป็นภาษามาร์กอัปที่มีลักษณะการใช้งานเหมือน HTML

ภาษา HTML สามารถสร้างขึ้นได้จากโปรแกรมสร้างไฟล์ข้อความ (Text Editor) ทั่ว ๆ ไปเช่น Notepad หรือ WordPad ได้ อีกทั้งง่ายต่อการเรียนรู้เพราะภาษา HTML ไม่มีโครงสร้างความเป็น Programming เลยแม้แต่น้อย และไฟล์ที่ได้จากการสร้างเอกสาร HTML ยังมีขนาดเล็กอีกด้วย นามสกุลของไฟล์ HTML จะเป็นไฟล์นามสกุล .htm หรือ .html ซึ่งใช้ในทั้งระบบปฏิบัติการยูนิกซ์ (UNIX) และระบบปฏิบัติการ Windows และเรียกใช้งานได้จากเว็บบราวเซอร์ (Web Browser)

โครงสร้างคำสั่งของ HTML

HTML

การใช้งาน

 ในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้

1. คำสั่ง หรือ Tag

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

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

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

 <tag> เราเรียกว่า tag เปิด

 </tag> เราเรียกว่า tag ปิด

2. Attributes

 Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น ... เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย

3. not case sensitive

 หมายถึง คุณจะพิมพ์ หรือ ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน

โครงสร้างของหลักของ HTML

โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ

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

 2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web brower โดยตรง

<html>

 <head>

 คำสั่งในหัวข้อของ head

 </head>

 <body>

 คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล

 </body>

</html>

1. คำสั่งในหัวข้อของ head (Head Section)

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

<HEAD>

 <TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE>

 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

 <META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ">

 <META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2 ">

</HEAD>

TITLE

 ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser

META

 Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการจัดอันดับบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine เช่น google , yahoo)

 charset=TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้ charset=TIS-620 หรืออาจเป็น charset=windows-874 ก็ได้ ตอนนี้แนะนำให้ใช้เป็น charset=utf-8

 keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คำได้โดยใช้เครื่องหมาย (,) ในการคั่นระหว่างคำ

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

2. คำสั่งในส่วนของ (Body Section)

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

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

กลุ่มคำสั่งเกี่ยวกับการจัดรูปแบบเอกสาร

กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร

กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)

กลุ่มคำสั่งเกี่ยวกับการทำลิงค์

กลุ่มคำสั่งจัดการรูปภาพ

กลุ่มคำสั่งจัดการตาราง (Table)

กลุ่มคำสั่งควบคุมเฟรม

กลุ่มคำสั่งอื่นๆ

วันศุกร์ที่ 19 กันยายน พ.ศ. 2557

ประวัติความเป็นมาของภาษา HTML

                 ปี ค.ศ. 1961 อินเตอร์เน็ตได้เกิดและเติบโตขึ้น พร้อมกับภาษาคอมพิวเตอร์และโปรโตคอล (Protocol) จำนวนมาก เพื่อรองรับกับ การเติบโตอย่างรวดเร็วของอินเตอร์เน็ต หนึ่งในภาษาคอมพิวเตอร์และโปรโตคอลนั้นคือ ภาษา HTML และ TCP/IP (Transmission Control Protocol/ Internet Protocol) ทั้งนี้เพราะ World Wide Web แม้จะเป็นเพียงส่วนหนึ่งของอินเตอร์เน็ต แต่ได้รับความนิยม อย่างสูง และรวดเร็ว โปรโตคอล HTTP (ซึ่งเป็นส่วนย่อยของโปรโตคอล TCP/IP) จึงได้รับการพัฒนาเพื่อสนับสนุนภาษา HTML ซึ่ง ใช้ในการจัดเก็บเอกสารบน World Wide Web
               ภาษา HTML ในยุคแรกเริ่ม ถูกใช้เพื่อจัดทำรูปแบบตัวอักษรบนเอกสารประเภท Hypertext ความสามารถจึงยังคงจำกัดอยู่มาก เพียงทำได้แต่ การกำหนดรูปแบบ heading แต่สำหรับตัวอักษรทำได้แค่ bold และ italic เท่านั้น
              ความที่ภาษา HTML เป็นภาษาที่ได้รับการพัฒนาอย่างต่อเนื่อง จนปัจจุบันมาถึง เวอร์ชัน 4.0 จึงได้เพิ่มขีดความสามารถจากเดิม ที่มีความสามารถเพียงเพื่อจัดรูปแบบตัวอักษร กลายเป็นภาษาที่มีความสามารถในการจัดรูปแบบเอกสารอย่างเต็มรูปแบบ สิ่งกระตุ้น แรกที่ก่อให้เกิดการพัฒนาดังกล่าว เกิดขึ้นในปี 1993 เมื่อโปรแกรม Web browser มีความสามารถจะดูเอกสารแบบ Hypertext พร้อมกับมีรูปภาพประกอบได้พร้อมๆ กัน และในระยะหลังจากนั้นอีก 5 ปี ภาษา HTML ก็ได้พัฒนาตนเองมาเรื่อยๆ จนเป็นเวอร์ชัน ปัจจุบัน -- เวอร์ชัน 4.0
             สิ่งที่ทำให้ HTML เวอร์ชันปัจจุบัน มีความสามารถในการจัดรูปแบบเอกสารอย่างเต็มรูปแบบ คือ ความสามารถในการใช้ Cascading Style Sheet เพิ่มเติมจากเวอร์ชันก่อนหน้านี้ (เวอร์ชัน 3.2) ซึ่งมีความสามารถจัดรูปแบบเอกสารอยู่ในขั้นมาตรฐาน
              ในอดีต สิ่งที่ทำให้ผู้เขียนภาษา HTML ประสบกับปัญหามากมาย คือ การที่โปรแกรม browser หลักๆ ยังคงมีความแตกต่างทาง ด้านเทคโนโลยีกันอย่างมาก และต่างก็ได้พัฒนาภาษา HTML ของตนเพิ่มเติมจากมาตรฐานในเวอร์ชัน 3.2 กันเอง โดยไม่ได้มีการตกลง ระหว่างกัน เป็นผลให้ผู้เขียนภาษา HTML โดยถือตามมาตรฐาน หรืออ้างอิงค่ายใดค่ายหนึ่งไม่สามารถจะแสดงรูปแบบของเอกสาร ให้เป็นอย่างที่ต้องการได้ ในปัจจุบัน ปัญหาดังกล่าวกลับไม่ลดน้อยลงไป แม้ว่าจะได้มีการจัดตั้งคณะกรรมการ เพื่อกำหนดมาตรฐาน ให้โปรแกรม browser ในเวอร์ชันใหม่ๆ นำเอา HTML เวอร์ชัน 4.0 เป็นมาตรฐานก็ตาม แต่ปัญหายังคงมีอยู่ ต่อไป ด้วยเหตุที่คณะกรรมการชุดดังกล่าวไม่สามารถผลักดันให้โปรแกรม browser รับเอามาตรฐานดังกล่าวไปใช้อย่างรวดเร็ว เพียงพอ