2.เริ่มต้นกับ xhtml และ xhtml

เริ่��มต้�นกับ HTML & XHTML

ชั้�นมธยมศึ�กัษา กัลุ่��มสาริ่ะกัาริ่งานพื้��นฐานอาชั้�พื้แลุ่ะเทคโนโลุ่ย�จัดท&าขึ้��นเพื้��อใชั้�เป็*นส��อป็ริ่ะกัอบกัาริ่เริ่�ยนกัาริ่สอน โดย นาย

อศึวิ�น ขึ้ดชั้��มแสง

กัาริ่สริ่�างเวิ,บเพื้จัโดยใชั้�ภาษา HTML

HTML ย่�อมาจากคำาว่�า Hypertext Markup Language เป็�นภาษาหลั�กที่��ใช้�ในการสร�างไฟลั เว่!บเพจHTML = Hypertext + SGML HTML เก$ดจากการสร�างเอกสาร Hypertext โดย่พ�ฒนามาจากภาษา SGML

กัาริ่สริ่�างเวิ,บเพื้จัโดยใชั้�ภาษา HTML

กัาริ่สริ่�างเวิ,บเพื้จัโดยใชั้�ภาษา HTML สามาริ่ถท&าได�โดยกัาริ่ใชั้�โป็ริ่แกัริ่ม Text Editor ต้�าง ๆ ท��ม�อย1�แลุ่�วิในริ่ะบบป็ฏิ�บต้�กัาริ่ Windows เชั้�น

- Notepad - Editplus ในส��อกัาริ่สอนน�� จัะใชั้�โป็ริ่แกัริ่ม Notepad เพื้ริ่าะม�ขึ้นาด

เลุ่,กัแลุ่ะม�อย1�แลุ่�วิในวิ�นโดวิ3

ลุ่กัษณะขึ้องภาษาHTML

Computer and Internet (310101) 4

ภาษา HTML ม�องค3ป็ริ่ะกัอบท��ส&าคญ 2 ส�วิน ค�อ

ส�วินท��เป็*นขึ้�อควิาม แสดงบนจัอภาพื้

ส�วินท��เป็*นค&าส�ง เริ่�ยกัวิ�า แท,กั ( tag )

ร(ป็แบบแที่!กจะแย่กเป็�น 2 ส�ว่น คำ+อ 1. ส�ว่นเร$�ม แที่!กเป็,ด“ ”2. ส�ว่นจบ แที่!กป็,ด “ ” ** ในส�ว่นของแที่!กป็,ด ต้�องม�เคำร+�องหมาย่ Slash ( / ) **

- บางแท,กัอาจัจัะไม�ต้�องม�แท,กัป็6ดกั,ใชั้�งานได�

เชั้�น <br>

- เริ่าสามาริ่ถพื้�มพื้3ต้วิเลุ่,กัหริ่�อใหญ�กั,ได� (v.4 ขึ้��นไป็)

- บางแท,กัจัะม�ต้วิกั&าหนดค�ณสมบต้� เริ่�ยกัวิ�า

แอททริ่�บ�วิท3 ( Attribute ) = ต้วิกั&าหนดค�ณสมบต้�

ร(ป็แบบ <แที่!กเป็,ด> ข�อคำว่าม <แที่!กป็,ด> เช้�น<title>…….</title>

ต้วิอย�าง < hr width=600 = size=5 >

Element(แที่!ก) Attribute

(กาหนดคำ/ณสมบ�ต้$)

Vale(คำ�าที่��กาหนดให�

ใช้�)

เม��อป็ริ่ะโยค HTML ขึ้�างต้�นท&างานส�พื้��นหลุ่ง (Background color) ขึ้องหน�า เพื้จั (Page) จัะเป็*นส�ม�วิง Lavender

โคริ่งสริ่�างพื้��นฐานขึ้อง HTML

Computer and Internet (310101) 7

<HTML> <HEAD> <TITLE> ชั้��อหวิเริ่��องท��ต้�องกัาริ่แสดง</TITLE> </HEAD>

<BODY> ค&าส�งหริ่�อขึ้�อม1ลุ่ท��ต้�องกัาริ่แสดง </BODY> </HTML>

แบ�งออกเป็�น 4 ส�ว่นหลั�กด�งน�1

เคริ่��องม�อท��ใชั้�สริ่�างเอกัสาริ่ HTML

กัาริ่สริ่�างเวิ,บเพื้จัโดยใชั้�ภาษา HTML สามาริ่ถท&าได�โดยกัาริ่ใชั้�โป็ริ่แกัริ่ม Text Editor ต้�าง ๆ ท��ม�อย1�แลุ่�วิในริ่ะบบป็ฏิ�บต้�กัาริ่ Windows เชั้�น

- Notepad - Editplus ในส��อกัาริ่สอนน�� จัะใชั้�โป็ริ่แกัริ่ม Notepad เพื้ริ่าะม�ขึ้นาด

เลุ่,กัแลุ่ะม�อย1�แลุ่�วิในวิ�นโดวิ3

Notepad น�1จ�ดเป็�นโป็รแกรมป็ระเภที่ Text Editor สามารถสร�างไฟลั หร+อเข�ย่นภาษา HTML ได� แลัะ Notepad น�1เป็�นโป็รแกรมที่��สามารถใช้�งานได�ง�าย่ แลัะเป็�นโป็รแกรมที่��ที่างานบนระบบ Windows

1. คลุ่�กัท�� Start -->2. เลุ่�อกั Programs --> 3. เลุ่�อกั Accessories --> 4. เลุ่�อกั Notepad

พ$มพ เอกสารต้ามต้�ว่อย่�าง

1. เป็6ดโป็ริ่แกัริ่ม Notepad แลุ่�วิลุ่องเขึ้�ยนเอกัสาริ่ ดงน��

2. กัาริ่บนท�กัเอกัสาริ่ HTML - Save เป็*นนามสกั�ลุ่ .html หริ่�อ .htm

home.html

XHTML XHTML (Extensible HyperText Markup Language)ค�อท��ป็ริ่บป็ริ่�งมาจัากัภาษาHTML ท��เอาไวิ�เขึ้�ยนสริ่�างเวิ,บเพื้จั ท��ม�ป็8ญหาเริ่��องกัาริ่แสดงผลุ่ ทาง องค3กัริ่ W3C ได�น&าเอา ภาษา HTML มาป็ริ่บป็ริ่�งใหม� โดยย�ดหลุ่กักัาริ่ ขึ้อง XML แลุ่ะได�เพื้��มกัฎเกัณฑ์3บางอย�าง เพื้��อให�กัาริ่ใชั้�งานม�ควิามเขึ้�มงวิด แลุ่ะเป็*นมาต้ริ่ฐานย��งขึ้��น แลุ่ะป็1ทางให�ต้ลุ่าดบริ่าวิเซอริ่3 (browser) ป็8จัจั�บน แลุ่ะในอนาคต้ ท��ออกับริ่าวิเซอริ่3ใหม� ให�ใชั้�มาต้ริ่ฐานเด�ยวิกัน ในกัาริ่แสดงผลุ่ ได�อย�างถ1กัต้�อง น�นค�อ มาต้ริ่ฐานXHTML

โคริ่งสริ่�างกัาริ่เขึ้�ยน XHTML

ช้+�อห�ว่เร+�อง

เน+1อหาที่��ต้�องการให�แสดง

การกาหนด DOCTYPE ( Document Type Definition )

DOCTYPE ค�อ กัาริ่ป็ริ่ะกัาศึวิ�าเอกัสาริ่น�� จัดอย1�ในป็ริ่ะเภทใด แลุ่ะ ต้ริ่วิจัสอบควิามถ1กัต้�องกับ DTD เพื้��อในกัริ่ณ� กับ Browser ป็ริ่ะเภทต้�างๆ

กัาริ่ป็ริ่ะกัาศึ DOCTYPE ขึ้อง XHTML ในส�วินบนส�ดบริ่ริ่ทดขึ้องท�กัๆเพื้จั

ขึ้�อแต้กัต้�าง ริ่ะหวิ�าง HTML กับ XHTML

- อ�ลุ่�เมนต้3(element) แลุ่ะแอต้ทริ่�บ�วิต้3(attributes) จัะต้�องเขึ้�ยนเป็*นต้วิ พื้�มพื้3เลุ่,กั เท�าน�น - อ�ลุ่�เมนต้3 ขึ้อง XHTML ท��ไม�ใชั้�อ�ลุ่�เมนต้3วิ�าง (empty element)หริ่�อไม�ม�กัาริ่เกั,บขึ้�อม1ลุ่ XHTML จัะต้�องเวิ�นชั้�องวิ�าง แลุ่ะม�แท,กัป็6ด "< />" ด�วิย จัากั ขึ้องเด�ม checked เป็ลุ่��ยนเป็*น checked="checked" checked> เป็*น checked="checked" /> จัะต้�องเวิ�นชั้�องวิ�าง แลุ่ะม�แท,กัป็6ด "< />" ด�วิย

2.เริ่มต้นกับ xhtml และ xhtml

Technology

Transcript of 2.เริ่มต้นกับ xhtml และ xhtml