บทที่2 เริ่มต้นกับ HTML และ XHTML

แบบฝึกหัดก่อนเรียน
1.HTML  มาจากคำว่าอะไร
     ก.Hypertext Markap  languag
     ข.Hypertext languag  Markap
     ค.Hypertext Markap  language
     ง.Hypertext Markup  languag
2.สามารถแบ่งองค์ประกอบของ HTML ได้กี่ส่วน
     ก.1ส่วน
     ข.2ส่วน
     ค.3ส่วน
     ง.4ส่วน
3.หน้าที่ของ text editor คือข้อใด
     ก.กำหนดรูปแบบคำสั่งและข้อความ
     ข.กำหนดตัวอักษรพิเศษ
     ค.กำหนดพื้นหลัง
     ง.ถูกทุกข้อ
4.Web Browser มีหน้าที่อะไร
     ก.ใช้เรียกเอกสาร
     ข.ใช้ในการเก็บข้อมูล
     ค.ใช้ในการแก้ไขข้อมูล
     ง.หน้าแรกของ html
5.เครื่องมือที่ใช้ในการสร้างเอกสาร html ประกอบด้วยอะไรบ้าง
     ก.text editor
     ข.web browser
     ค.notepad
     ง.ถูกทั้งข้อ ก และ ข
6.xhtml เป็นภาษาที่เกิดจากสาเหตุได
     ก.การนำเอา shtml และ html มารวมกัน    
     ข.การนำเอา xml และ html มารวมกัน
     ค.การนำเอา shtml มาเป็น html
     ง.ถูกทุกข้อ
7.ส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมด
     ก.ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  
     ข.ส่วนหัวเรื่อง (Head)
     ค.ส่วนเนื้อหา (Body)
     ง.ถูกทุกข้อ
8.ส่วนที่แสดงข้อความที่แถบหัวเรื่องของหน้าเว็บเพจ
     ก.ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  
     ข.ส่วนหัวเรื่อง (Head)
     ค.ส่วนเนื้อหา (Body)
     ง.ถูกทุกข้อ
9.รูปแบบแท็กมีส่วนเริ่มต้นของแท็ก เรียกว่า อะไร
     ก.แท็กเปิด
     ข.แท็กปิด
     ค.แท็ก html
     ง.ถูกทุกข้อ
10.รูปแบบแท็กมีส่วนสิ้นสุดของแท็ก เรียกว่า อะไร
     ก.แท็กเปิด
     ข.แท็กปิด
     ค.แท็ก html
     ง.ถูกทุกข้อ
เฉลย
1.ค     2.ข     3.ก     4.ก     5.ง     6.ข     7.ค     8.ข     9.ก     10.ข
    
รู้จักกับ  HTML
        HTML  ย่อมาจากคำว่า  Hypertext  Markup  Language  เป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจ  โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์   (Hypertext  Document:  ข้อความในเอกสารที่เชื่อมโยงถึงข้อมูลต่างๆ  ได้ซึ่งพัฒนาขึ้นมาจากภาษา  SGML  (Standard  Generalized  Markup  Language)  โดย  Tim  Burners-Lee  ในปี ค.ศ. 1990  ซึ่งใช้ในระบบของ  CERT (Consent  European  pour  la  Recherche  Nucleation) เบื้องต้นได้เริ่มใช้ที่สวิตเซอร์แลนด์  จากนั้นก็ได้แพร่ขยายออกไป  ระบบนี้ได้ถูกตั้งชื่อว่า  World  Wide  Web: WWW  ที่เรารู้จักกันจนมึงยุคปัจจุบัน
     ง.การนำเอา xml มาเป็น html
ลักษณะของภาษา HTML
                องค์ประกอบของภาษา HTML สามารถแบ่งออกได้เป็น 2 ส่วน คือ ส่วนที่เป็นข้อความทั่วๆไป และส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกคำสั่งนี้ว่า แท็ก (Tag) โดยแท็กคำสั่งของ HTML จะอยู่ในเครื่องหมาย < และ > ซึ่งมีหลักในการเขียนดังนี้
                รูปแบบแท็กจะแยกเป็น 2 ส่วน โดยจะต้องมีส่วนเริ่มต้นของแท็ก เรียกว่า "แท็กเปิด" และส่วนจบของแท็ก เรียกว่า "แท็กปิด" โดยส่วนของแท็กปิดจะต้องมีเครื่องหมาย Slash (/)
โครงสร้างพื้นฐานของภาษา HTML มีดังนี้


 
โครงสร้างของภาษา HTML ประกอบด้วย 3 ส่วน คือ
        1. ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  ซึ่งจะมีแท็ก <html>…</html> กำกับอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของ แฟ้มข้อมูล       2. ส่วนหัวเรื่อง (Head) เป็นส่วนที่กำหนดให้แสดง ข้อความที่แถบหัวเรื่องของหน้าเว็บเพจนั้น ๆ เช่น แท็ก <title>....</title> และเก็บ แท็กพิเศษอื่น ๆ
       3. ส่วนเนื้อหา (Body) เป็นส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมด ซึ่งประกอบด้วย ข้อความและแท็กต่าง ๆ เช่น แท็กสำหรับจัดการกับรูปแบบของข้อความ ตาราง รูปภาพ กราฟิกต่างๆ สีของตัวอักษร สีพื้น เป็นต้น
เครื่องมือที่ใช้ในสร้างเอกสาร HTML ซึ่งประกอบไปด้วย
    1. เท็กเอดิเตอร์ (Text Editor) ส่วนของโปรแกรมที่ช่วยในการกำหนดข้อ ความ และรูปแบบ
คำสั่งต่างๆในเอกสาร ส่วนมากนิยมใช้โปรแกรม Notepad บน window เป็นหลัก  การบันทึกไฟล์ กำหนดไฟล์เป็น .htm หรือ  .HTML
    2. เว็บบราวเซอร์ (Web Browser) ใช้เรียกหรืออ่านเอกสาร HTML ออกมาแสดงผลที่จอภาพใน
ระบบอินเตอร์เน็ตเพื่อให้ได้ผลลัพธ์ตามที่ต้องการ
ทดลองสร้างเว็บเพจอย่างง่ายตามขั้นตอนต่อไปนี้
     1.สร้าง Folder สำหรับเก็บข้อมูลที่ไดร์ฟ D: ชื่อ HTML1  
     2.เปิดโปรแกรม Notepad และนำคำสั่ง (Tag) ต่อไปนี้ไปใส่ในโปรแกรมและทำการจัดเก็บ (Save)
   ชื่อ MyWeb2.HTML
<html>
<head>
<title>การสร้างเว็บเพจอย่างง่าย...</title>
</head>
<body>
เว็บเพจ หมายถึง หน้าเอกสาร HTML หน้าต่าง ๆ
โฮมเพจ หมายถึง หน้าเอกสาร HTML หน้าแรกของเว็บไซต์
เว็บไซต์ หมายถึง กลุ่มของโฮมเพจและเว็บเพจ หรือแหล่งข้อมูลองค์กรต่าง ๆ
</body>
</html
 
     3. แสดงผลการทำงานในข้อ 2 โดยใช้โปรแกรม Internet Explorer  
        เปิดโปรแกรม Internet Explorer และเปิดหน้าเว็บเพจจากข้อ 2 ชื่อ MyWeb2.html ที่เก็บในไดร์ฟ D:โฟลเดอร์
HTML1  ขึ้นมาแสดงผลการทำงานโดยขยายหน้าต่างการแสดงผลให้เต็มจอภาพ  และให้สังเกตความสัมพันธ์ของคำสั่ง
       ในภาษา HTML กับผลการทำงานในโปรแกรม Internet Explorer เพื่อเปรียบเทียบกับการเพิ่มคำสั่งใหม่ต่อไป
 
XHTML  ภาษามาตรฐานใหม่ที่มาแทน HTML
       XHTML (ย่อมาจาก Extensible HyperText Markup Language)

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


ตัวอย่างการเขียนโปรแกรมโครงสร้างหลักของภาษา HTML 
 



แบบฝึกหัดหลังเรียน
1.HTML  มาจากคำว่าอะไร
     ก.Hypertext Markap  languag
     ข.Hypertext languag  Markap
     ค.Hypertext Markap  language
     ง.Hypertext Markup  languag
2.สามารถแบ่งองค์ประกอบของ HTML ได้กี่ส่วน
     ก.1ส่วน
     ข.2ส่วน
     ค.3ส่วน
     ง.4ส่วน
3.หน้าที่ของ text editor คือข้อใด
     ก.กำหนดรูปแบบคำสั่งและข้อความ
     ข.กำหนดตัวอักษรพิเศษ
     ค.กำหนดพื้นหลัง
     ง.ถูกทุกข้อ
4.Web Browser มีหน้าที่อะไร
     ก.ใช้เรียกเอกสาร
     ข.ใช้ในการเก็บข้อมูล
     ค.ใช้ในการแก้ไขข้อมูล
     ง.หน้าแรกของ html
5.เครื่องมือที่ใช้ในการสร้างเอกสาร html ประกอบด้วยอะไรบ้าง
     ก.text editor
     ข.web browser
     ค.notepad
     ง.ถูกทั้งข้อ ก และ ข
6.xhtml เป็นภาษาที่เกิดจากสาเหตุได
     ก.การนำเอา shtml และ html มารวมกัน    
     ข.การนำเอา xml และ html มารวมกัน
     ค.การนำเอา shtml มาเป็น html
     ง.ถูกทุกข้อ
7.ส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมด
     ก.ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  
     ข.ส่วนหัวเรื่อง (Head)
     ค.ส่วนเนื้อหา (Body)
     ง.ถูกทุกข้อ
8.ส่วนที่แสดงข้อความที่แถบหัวเรื่องของหน้าเว็บเพจ
     ก.ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  
     ข.ส่วนหัวเรื่อง (Head)
     ค.ส่วนเนื้อหา (Body)
     ง.ถูกทุกข้อ
9.รูปแบบแท็กมีส่วนเริ่มต้นของแท็ก เรียกว่า อะไร
     ก.แท็กเปิด
     ข.แท็กปิด
     ค.แท็ก html
     ง.ถูกทุกข้อ
10.รูปแบบแท็กมีส่วนสิ้นสุดของแท็ก เรียกว่า อะไร
     ก.แท็กเปิด
     ข.แท็กปิด
     ค.แท็ก html
     ง.ถูกทุกข้อ
เฉลย
1.ค     2.ข     3.ก     4.ก     5.ง     6.ข     7.ค     8.ข     9.ก     10.ข