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



  สาระสำคัญ

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



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

1.  ภาษา HTML

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

     ภาษา HTML  เป็นภาษาที่มีลักษณะของโค้ด
กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของนหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูป
ของเอกสารข้อความ (Text Document) ดังนั้นจึงทำให้ง่ายต่อการเรียนรู้ สามารถกำหนดรูปแบบและโครงสร้าง
ได้ง่ายด้วยภาษา HTML  นี้ได้ถูกพัฒนามาอย่างต่อเนื่องเพื่อให้ใช้ได้ง่ายขึ้นและตอบสนองต่อการใช้ภาพทางกราฟิก
โดยเริ่มพัฒนามาตั้งแต่รุ่น 1.0,2.0,3.0 จนถึงรุ่น5.0 ในปัจจุบันนอกจากรี้ภาษา HTML ยังมีลักษณะที่พิเศษ
ควรทราบดังนี้

  • สามารถใช้ได้กับโปรแกรมสร้างและแก้ไขไฟล์ข้อมูล (Text Editor) ได้แก่ Notepad, Word Processing
    ต่างๆซึ่งง่ายต่อการเรียนรู้ และไฟล์ที่จะได้มีขนาดเล็ก
  • HTML ที่ถูกบันทึกใน Tex Editor จะมรชนิดของไฟล์เป็น htm หรือ html ในระบบปฏิบัติการยูนิกส์และวินโดวส์
  • สามารถทำงานได้บนเว็บเบราว์เซอร์ทุกตัวที่สนับสนุน HTML ได้แก่ Microsoft internet Explorer, Google
    Chrome, Mozilla Firox, Safari เป็นต้น      

       1.1  HTML5

               HTML5 เริ่มต้นถูกพัฒนาโดย Apple, Mozilla Foundation, และ Opera Software โดยต่างคนต่างพัฒนา
รู้จักกันดีในนาม Web HypertextApplication Technology Working Group (WHATWG) ภายหลัง W3C
ได้นำเอกสารการพัฒนาของ WHATWG มาเริ่มกำหนดข้นเป็นข้อกำหนดขึ้นเป็นข้อกำหนดของ HTML (HTML
Specification)
                HTML5 ไม่เป็นแต่ภาษาHTML อีกภาษาหนึ่ง แต่ถูกใช้ในบริบทของ Web applications เป็นภาษาที่ได้รับ
การปรับโฉมของ HTML ขึ้นใหม่อย่างสมบูรณ์ ด้วยการเพิ่มความสามารถใหม่ๆแต่ยังคงเก็บข้อมูลสำคัญข้อมูล ทั้งหมด
ที่มีอยู่ใน HTML4  ไว้เพื่อให้ใช้ได้กับเบราว์เซอร์รุ่นก่อนได้ ยิ่งไปกว่านั้น HTML5 ยังใช้รูปแบบคำสั่งที่เข้ากันทั้ง HTML
และ XHTML แต่ในช่วงเวลาที่ผ่านมาเว็บเบราว์เซอร์รุ่นเก่าๆยังคงถูกใช้กันอยู่ทำให้การรับรองของ HTML5
อาจเกิดปัญหาจึงต้องมีการเปิดบริการทดสอบ เช่น “HTML5test” เพื่อตรวจสอบการรับรองของเบราว์เซอร์
                HTML5 ให้ได้ความสำคัญไม่ใช่แต่กับโครงสร้างและองค์ประกอบที่เป็นสื่อผสมหรือมัลติมีเดีย
(multimedia) เท่านั้น แต่ยังรวมถึง(Application programming interfaces (APLS) ซึ่งจะช่วยให้ผู้พัฒนาเว็บ
ที่พอจะมีความรู้ทางการเขียนโปรแกรมสามารถพัฒนาโปรแกรมให้กับเว็บไซต์ของตนเองได้อีกด้วย

       1.2  ความสามารถเด่นๆของ HTML5

               HTML5 ได้เพิ่มความสามารถใหม่ๆ เช่น

               Audio/Video Support                                                                                                                                                            
               รองรับมัลติมีเดียได้อย่างเต็มรูปแบบหรือสมบูรณ์มากขึ้นโดยได้พิ่มคำสั่งสำหรับการแสดงภาพและเสียงโดยตรง

               New Form input                                                                                                                                                  
  
               ในการสร้างฟอร์มได้เพิ่มการรับรองข้อมูลชนิดใหม่ๆเข้ามามากมายเพื่อรับข้อมูลรูปแบบนั้นๆโดยตรง เช่น
email, number, datetime เป็นต้นนอกจากนี้จะช่วยให้เรารับข้อมูลที่ถูกต้องแล้วยังลดขั้นตอนของการเขียนสคริปต์
(JavaScript หรือ PHP) เพื่อตรวจสอบความถูกต้องของข้อมูลด้วย

                Semantic Markup Page Layout                                                                                                                                                                              
              เป็นองค์ประกอบเชิงความหมาย (Semantic element) ช่วยในการจัดหน้าแบบแบ่งส่วนได้โดยง่าย เช่น
<header>,<nav>,<article>,section>,<aside>,และ <footer>

               Canvas Graphics                            
                                                                                       

               ช่วยให้เราวาดรูปกราฟิกแบบต่างๆ ตามที่ราต้องการบนหน้าเว็บเพจได้ง่ายและสะดวกขึ้น

               Drag&Drop       
                                                                                                                                   

               HTML5 นั้นรองรับการใช้เมาส์ในการลากแล้ววางวัตถุบนหน้าเว็บ(Drag&Drop) โดยใช้คำสั่ง
จาวาสคริป (JavaSript) ควบคุมกระบวนการ

               Web Storage
                                                                                                                                                      
               เป็นกลไกลการจัดเก็บข้อมูลในฝั่งเบราว์เซอร์แบบใหม่ซึ่งสามารถจัดเก็บข้อมูลแบบซับซ้อนได้ดีกว่าเดิม
ที่จัดเก็บแบบคุกกี้