SlideShare a Scribd company logo
1 of 14
เริ่มต้นกับ
HTML & XHTML
ชั้นมัธยมศึกษา กลุ่มสาระการงานพื้นฐานอาชีพและเทคโนโลยี
จัดทาขึ้นเพื่อใช้เป็นสื่อประกอบการเรียนการสอน โดย นาย อัศวิน ขัดชุ่มแสง
HTML ย่อมาจากคาว่า Hypertext Markup Language เป็นภาษาหลักที่
ใช้ในการสร้างไฟล์เว็บเพจ
HTML = Hypertext + SGML
HTML เกิดจากการสร้างเอกสาร Hypertext โดยพัฒนามาจากภาษา SGML
การสร้างเว็บเพจโดยใช้ภาษา HTML
การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทาได้โดยการใช้โปรแกรม Text
Editor ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น
- Notepad
- Editplus
ในสื่อการสอนนี้ จะใช้โปรแกรม Notepad เพราะมีขนาดเล็กและมีอยู่แล้วในวินโดว์
ลักษณะของภาษา HTML
Computer and Internet (310101) 4
ภาษา HTML มีองค์ประกอบที่สาคัญ 2 ส่วน คือ
ส่วนที่เป็นข้อความ แสดงบนจอภาพ ส่วนที่เป็นคาสั่ง เรียกว่า แท็ก ( tag )
รูปแบบแท็กจะแยกเป็น 2 ส่วน คือ
1. ส่วนเริ่ม “แท็กเปิด”
2. ส่วนจบ “แท็กปิด” ** ในส่วนของแท็กปิด ต้องมีเครื่องหมาย Slash ( / ) **
- บางแท็กอาจจะไม่ต้องมีแท็กปิดก็ใช้งานได้
เช่น <br>
- เราสามารถพิมพ์ตัวเล็กหรือใหญ่ก็ได้ (v.4 ขึ้นไป)
- บางแท็กจะมีตัวกาหนดคุณสมบัติ เรียกว่า
แอททริบิวท์ ( 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>
คาสั่งหรือข้อมูลที่ต้องการแสดง
</BODY>
</HTML>
แบ่งออกเป็น 4 ส่วนหลัก ดังนี้
เครื่องมือที่ใช้สร้างเอกสาร HTML
การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทาได้โดยการใช้โปรแกรม Text
Editor ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น
- Notepad
- Editplus
ในสื่อการสอนนี้ จะใช้โปรแกรม Notepad เพราะมีขนาดเล็กและมีอยู่แล้วในวินโดว์
Notepad นี้จัดเป็นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรือเขียนภาษา
HTML ได้ และ Notepad นี้เป็นโปรแกรมที่สามารถใช้งานได้ง่าย และเป็นโปรแกรมที่
ทางานบนระบบ Windows
1. คลิกที่ Start -->
2. เลือก Programs -->
3. เลือก Accessories -->
4. เลือก Notepad
พิมพ์เอกสารตามตัวอย่าง
1. เปิดโปรแกรม Notepad แล้วลองเขียนเอกสาร ดังนี้
2. การบันทึกเอกสาร HTML
- Save เป็นนามสกุล .html
หรือ .htm
home.html
XHTML
XHTML (Extensible HyperText Markup Language)คือที่ปรับปรุงมาจาก
ภาษาHTML ที่เอาไว้เขียนสร้างเว็บเพจ ที่มีปัญหาเรื่องการแสดงผล
ทาง องค์กร W3C ได้นาเอา ภาษา HTML มาปรับปรุงใหม่ โดยยึดหลักการ
ของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การใช้งานมีความเข้มงวด และเป็น
มาตรฐานยิ่งขึ้น และปูทางให้ตลาดบราวเซอร์ (browser) ปัจจุบัน และในอนาคต ที่
ออกบราวเซอร์ใหม่ ให้ใช้มาตรฐานเดียวกัน ในการแสดงผล ได้อย่างถูกต้อง นั้นคือ
มาตรฐานXHTML
โครงสร้างการเขียน XHTML
ชื่อหัวเรื่อง
เนื้อหาที่ต้องการให้แสดง
การกาหนด DOCTYPE
( Document Type Definition )
DOCTYPE คือ การประกาศว่าเอกสารนี้ จัดอยู่ในประเภทใด และ
ตรวจสอบความถูกต้องกับ DTD เพื่อในกรณี กับ Browser ประเภทต่างๆ
การประกาศ DOCTYPE ของ XHTML ในส่วนบนสุดบรรทัดของทุกๆเพจ
ข้อแตกต่าง ระหว่าง HTML กับ XHTML
- อีลิเมนต์(element) และแอตทริบิวต์(attributes) จะต้องเขียนเป็นตัว พิมพ์เล็ก
เท่านั้น
- อีลิเมนต์ ของ XHTML ที่ไม่ใช่อีลิเมนต์ว่าง (empty element)หรือไม่มีการเก็บ
ข้อมูล
XHTML จะต้องเว้นช่องว่าง และมีแท็กปิด "< />" ด้วย
จาก ของเดิม checked เปลี่ยนเป็น checked="checked" checked>
เป็น checked="checked" />
จะต้องเว้นช่องว่าง และมีแท็กปิด "< />" ด้วย

More Related Content

What's hot

หน่วยการเรียนรู้ที่ 5
หน่วยการเรียนรู้ที่ 5หน่วยการเรียนรู้ที่ 5
หน่วยการเรียนรู้ที่ 5arachaporn
 
สอบกลางภาค
สอบกลางภาคสอบกลางภาค
สอบกลางภาคNattawat Cjd
 
สอบกลางภาค
สอบกลางภาคสอบกลางภาค
สอบกลางภาคNon Thanawat
 
สอบกลางภาค
สอบกลางภาคสอบกลางภาค
สอบกลางภาคMart Supanatt
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาคThitima Kpe
 
การเขียนโปรแกรมภาษา
การเขียนโปรแกรมภาษาการเขียนโปรแกรมภาษา
การเขียนโปรแกรมภาษาN'Name Phuthiphong
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาคDai Punyawat
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาคPimlapas Kimkur
 
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บการเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บKhon Kaen University
 
ใบงานที่5
ใบงานที่5ใบงานที่5
ใบงานที่5nichaphat22
 
ประวัต Html
ประวัต Htmlประวัต Html
ประวัต Htmlkrurit9
 

What's hot (17)

หน่วยการเรียนรู้ที่ 5
หน่วยการเรียนรู้ที่ 5หน่วยการเรียนรู้ที่ 5
หน่วยการเรียนรู้ที่ 5
 
สอบกลางภาค
สอบกลางภาคสอบกลางภาค
สอบกลางภาค
 
Html
HtmlHtml
Html
 
Test1
Test1Test1
Test1
 
สอบกลางภาค
สอบกลางภาคสอบกลางภาค
สอบกลางภาค
 
สอบกลางภาค
สอบกลางภาคสอบกลางภาค
สอบกลางภาค
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาค
 
การเขียนโปรแกรมภาษา
การเขียนโปรแกรมภาษาการเขียนโปรแกรมภาษา
การเขียนโปรแกรมภาษา
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาค
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาค
 
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บการเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บ
 
สอบคอมม5
สอบคอมม5สอบคอมม5
สอบคอมม5
 
สอบคอมม5
สอบคอมม5สอบคอมม5
สอบคอมม5
 
สอบ
สอบสอบ
สอบ
 
ใบงานที่5
ใบงานที่5ใบงานที่5
ใบงานที่5
 
Javascripts
JavascriptsJavascripts
Javascripts
 
ประวัต Html
ประวัต Htmlประวัต Html
ประวัต Html
 

Viewers also liked

การสร้างเว็บเพจด้วยภาษา(Html
การสร้างเว็บเพจด้วยภาษา(Htmlการสร้างเว็บเพจด้วยภาษา(Html
การสร้างเว็บเพจด้วยภาษา(HtmlBeerza Kub
 
Dixon's flipbook
Dixon's flipbookDixon's flipbook
Dixon's flipbookdixra
 
Martin cooper sang penemu ponsel ria
Martin cooper sang penemu ponsel riaMartin cooper sang penemu ponsel ria
Martin cooper sang penemu ponsel riaRiaArdiana
 
Holly Bruce slideshow
Holly Bruce slideshowHolly Bruce slideshow
Holly Bruce slideshowHolly Bruce
 
Pha0128 Ophthalmic Drugs Market Forecast 2016-2026
Pha0128  Ophthalmic Drugs Market Forecast 2016-2026Pha0128  Ophthalmic Drugs Market Forecast 2016-2026
Pha0128 Ophthalmic Drugs Market Forecast 2016-2026Visiongain
 
กลุ่มที่4 ระบบois 402
กลุ่มที่4 ระบบois 402กลุ่มที่4 ระบบois 402
กลุ่มที่4 ระบบois 402Beerza Kub
 
Psicanalise- psicologia social2
Psicanalise- psicologia social2Psicanalise- psicologia social2
Psicanalise- psicologia social2Daniele Rubim
 

Viewers also liked (15)

การสร้างเว็บเพจด้วยภาษา(Html
การสร้างเว็บเพจด้วยภาษา(Htmlการสร้างเว็บเพจด้วยภาษา(Html
การสร้างเว็บเพจด้วยภาษา(Html
 
Dixon's flipbook
Dixon's flipbookDixon's flipbook
Dixon's flipbook
 
Args deductivos-e-inductivos
Args deductivos-e-inductivosArgs deductivos-e-inductivos
Args deductivos-e-inductivos
 
Martin cooper sang penemu ponsel ria
Martin cooper sang penemu ponsel riaMartin cooper sang penemu ponsel ria
Martin cooper sang penemu ponsel ria
 
Holly Bruce slideshow
Holly Bruce slideshowHolly Bruce slideshow
Holly Bruce slideshow
 
The Vihuela
The VihuelaThe Vihuela
The Vihuela
 
Pha0128 Ophthalmic Drugs Market Forecast 2016-2026
Pha0128  Ophthalmic Drugs Market Forecast 2016-2026Pha0128  Ophthalmic Drugs Market Forecast 2016-2026
Pha0128 Ophthalmic Drugs Market Forecast 2016-2026
 
Rs engineering
Rs engineeringRs engineering
Rs engineering
 
El proceso Inductivo y deductivo
El proceso Inductivo y deductivoEl proceso Inductivo y deductivo
El proceso Inductivo y deductivo
 
Cantigas of Santa María
Cantigas of Santa MaríaCantigas of Santa María
Cantigas of Santa María
 
File2
File2File2
File2
 
Ben cameron
Ben cameronBen cameron
Ben cameron
 
กลุ่มที่4 ระบบois 402
กลุ่มที่4 ระบบois 402กลุ่มที่4 ระบบois 402
กลุ่มที่4 ระบบois 402
 
Psicanalise- psicologia social2
Psicanalise- psicologia social2Psicanalise- psicologia social2
Psicanalise- psicologia social2
 
El sustantivo
El sustantivoEl sustantivo
El sustantivo
 

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

Session1 part2
Session1 part2Session1 part2
Session1 part2maovkh
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2Ton TC Tmsb
 
หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmldevilp Nnop
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์chiton2535
 
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQLเอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQLPhranakornsoft
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
ใบงานที่5555
ใบงานที่5555ใบงานที่5555
ใบงานที่5555M'Mod Ta Noy
 
ใบงานที่5555
ใบงานที่5555ใบงานที่5555
ใบงานที่5555M'Mod Ta Noy
 
หน่วยที่ 1
หน่วยที่ 1หน่วยที่ 1
หน่วยที่ 1Meaw Sukee
 
โปรแกรม dream 8
โปรแกรม dream 8โปรแกรม dream 8
โปรแกรม dream 8kruppp46
 

Similar to 2.เริ่มต้นกับ xhtml และ xhtml (20)

Session1 part2
Session1 part2Session1 part2
Session1 part2
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
 
Html 2
Html 2Html 2
Html 2
 
หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
 
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQLเอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
Lernning 13
Lernning 13Lernning 13
Lernning 13
 
ใบงานที่5555
ใบงานที่5555ใบงานที่5555
ใบงานที่5555
 
ใบงานที่5555
ใบงานที่5555ใบงานที่5555
ใบงานที่5555
 
HTML
HTMLHTML
HTML
 
ICT with Web site
ICT with Web siteICT with Web site
ICT with Web site
 
ภาษา xhtml
ภาษา xhtmlภาษา xhtml
ภาษา xhtml
 
หน่วยที่ 1
หน่วยที่ 1หน่วยที่ 1
หน่วยที่ 1
 
Pai02
Pai02Pai02
Pai02
 
Php basic
Php basicPhp basic
Php basic
 
โปรแกรม dream 8
โปรแกรม dream 8โปรแกรม dream 8
โปรแกรม dream 8
 

More from Beerza Kub

.Security Electric
.Security Electric.Security Electric
.Security ElectricBeerza Kub
 
ใบงานที่ 1-5 ม.1 1/61
ใบงานที่ 1-5 ม.1 1/61ใบงานที่ 1-5 ม.1 1/61
ใบงานที่ 1-5 ม.1 1/61Beerza Kub
 
สรุปผลการดำเนินงานภาคเรียนที่ 1
สรุปผลการดำเนินงานภาคเรียนที่ 1สรุปผลการดำเนินงานภาคเรียนที่ 1
สรุปผลการดำเนินงานภาคเรียนที่ 1Beerza Kub
 
หน่วยการเรียนรู้ที่ 1 ทักษะและกระบวนการทำงาน
หน่วยการเรียนรู้ที่ 1 ทักษะและกระบวนการทำงานหน่วยการเรียนรู้ที่ 1 ทักษะและกระบวนการทำงาน
หน่วยการเรียนรู้ที่ 1 ทักษะและกระบวนการทำงานBeerza Kub
 
ปฏิทินกลุ่มสาระ 61
ปฏิทินกลุ่มสาระ 61ปฏิทินกลุ่มสาระ 61
ปฏิทินกลุ่มสาระ 61Beerza Kub
 
Ebook ชิสุ
Ebook ชิสุEbook ชิสุ
Ebook ชิสุBeerza Kub
 
สื่อการสอน เรื่อง เครื่องดื่มเพื่อสุขภาพ
สื่อการสอน เรื่อง เครื่องดื่มเพื่อสุขภาพสื่อการสอน เรื่อง เครื่องดื่มเพื่อสุขภาพ
สื่อการสอน เรื่อง เครื่องดื่มเพื่อสุขภาพBeerza Kub
 
สื่อการสอน เรื่อง งานประดิษฐ์
สื่อการสอน เรื่อง งานประดิษฐ์สื่อการสอน เรื่อง งานประดิษฐ์
สื่อการสอน เรื่อง งานประดิษฐ์Beerza Kub
 
หน่วยที่ 2 เรื่อง เสื้อผ้าและการแต่งกาย
หน่วยที่ 2 เรื่อง เสื้อผ้าและการแต่งกายหน่วยที่ 2 เรื่อง เสื้อผ้าและการแต่งกาย
หน่วยที่ 2 เรื่อง เสื้อผ้าและการแต่งกายBeerza Kub
 
การซักผ้า (Washing)
การซักผ้า (Washing)การซักผ้า (Washing)
การซักผ้า (Washing)Beerza Kub
 
การรีดผ้า(Ironing)
การรีดผ้า(Ironing)การรีดผ้า(Ironing)
การรีดผ้า(Ironing)Beerza Kub
 
การพับผ้า (Shirt folding)
การพับผ้า (Shirt folding)การพับผ้า (Shirt folding)
การพับผ้า (Shirt folding)Beerza Kub
 
การตากผ้า (Clothes drying)
การตากผ้า (Clothes drying)การตากผ้า (Clothes drying)
การตากผ้า (Clothes drying)Beerza Kub
 
การจัดเก็บเสื้อผ้า
การจัดเก็บเสื้อผ้าการจัดเก็บเสื้อผ้า
การจัดเก็บเสื้อผ้าBeerza Kub
 
สื่อการสอน บทที่ 2 การดูแลรักษาเสื้อผ้า
สื่อการสอน บทที่ 2 การดูแลรักษาเสื้อผ้าสื่อการสอน บทที่ 2 การดูแลรักษาเสื้อผ้า
สื่อการสอน บทที่ 2 การดูแลรักษาเสื้อผ้าBeerza Kub
 
หน่วยที่ 2 เรื่อง บ้านน่าอยู่
หน่วยที่ 2 เรื่อง บ้านน่าอยู่หน่วยที่ 2 เรื่อง บ้านน่าอยู่
หน่วยที่ 2 เรื่อง บ้านน่าอยู่Beerza Kub
 
ครอบครัวอบอุ่น
ครอบครัวอบอุ่นครอบครัวอบอุ่น
ครอบครัวอบอุ่นBeerza Kub
 
มัลติมีเดีย
มัลติมีเดียมัลติมีเดีย
มัลติมีเดียBeerza Kub
 
อาการเสียและวิธีแก้ปัญหาคอมพิวเตอร์เบื้องต้น
อาการเสียและวิธีแก้ปัญหาคอมพิวเตอร์เบื้องต้นอาการเสียและวิธีแก้ปัญหาคอมพิวเตอร์เบื้องต้น
อาการเสียและวิธีแก้ปัญหาคอมพิวเตอร์เบื้องต้นBeerza Kub
 
โครงสร้างคอมพิวเตอร์และหลักการทำงานเบื้องต้น
โครงสร้างคอมพิวเตอร์และหลักการทำงานเบื้องต้นโครงสร้างคอมพิวเตอร์และหลักการทำงานเบื้องต้น
โครงสร้างคอมพิวเตอร์และหลักการทำงานเบื้องต้นBeerza Kub
 

More from Beerza Kub (20)

.Security Electric
.Security Electric.Security Electric
.Security Electric
 
ใบงานที่ 1-5 ม.1 1/61
ใบงานที่ 1-5 ม.1 1/61ใบงานที่ 1-5 ม.1 1/61
ใบงานที่ 1-5 ม.1 1/61
 
สรุปผลการดำเนินงานภาคเรียนที่ 1
สรุปผลการดำเนินงานภาคเรียนที่ 1สรุปผลการดำเนินงานภาคเรียนที่ 1
สรุปผลการดำเนินงานภาคเรียนที่ 1
 
หน่วยการเรียนรู้ที่ 1 ทักษะและกระบวนการทำงาน
หน่วยการเรียนรู้ที่ 1 ทักษะและกระบวนการทำงานหน่วยการเรียนรู้ที่ 1 ทักษะและกระบวนการทำงาน
หน่วยการเรียนรู้ที่ 1 ทักษะและกระบวนการทำงาน
 
ปฏิทินกลุ่มสาระ 61
ปฏิทินกลุ่มสาระ 61ปฏิทินกลุ่มสาระ 61
ปฏิทินกลุ่มสาระ 61
 
Ebook ชิสุ
Ebook ชิสุEbook ชิสุ
Ebook ชิสุ
 
สื่อการสอน เรื่อง เครื่องดื่มเพื่อสุขภาพ
สื่อการสอน เรื่อง เครื่องดื่มเพื่อสุขภาพสื่อการสอน เรื่อง เครื่องดื่มเพื่อสุขภาพ
สื่อการสอน เรื่อง เครื่องดื่มเพื่อสุขภาพ
 
สื่อการสอน เรื่อง งานประดิษฐ์
สื่อการสอน เรื่อง งานประดิษฐ์สื่อการสอน เรื่อง งานประดิษฐ์
สื่อการสอน เรื่อง งานประดิษฐ์
 
หน่วยที่ 2 เรื่อง เสื้อผ้าและการแต่งกาย
หน่วยที่ 2 เรื่อง เสื้อผ้าและการแต่งกายหน่วยที่ 2 เรื่อง เสื้อผ้าและการแต่งกาย
หน่วยที่ 2 เรื่อง เสื้อผ้าและการแต่งกาย
 
การซักผ้า (Washing)
การซักผ้า (Washing)การซักผ้า (Washing)
การซักผ้า (Washing)
 
การรีดผ้า(Ironing)
การรีดผ้า(Ironing)การรีดผ้า(Ironing)
การรีดผ้า(Ironing)
 
การพับผ้า (Shirt folding)
การพับผ้า (Shirt folding)การพับผ้า (Shirt folding)
การพับผ้า (Shirt folding)
 
การตากผ้า (Clothes drying)
การตากผ้า (Clothes drying)การตากผ้า (Clothes drying)
การตากผ้า (Clothes drying)
 
การจัดเก็บเสื้อผ้า
การจัดเก็บเสื้อผ้าการจัดเก็บเสื้อผ้า
การจัดเก็บเสื้อผ้า
 
สื่อการสอน บทที่ 2 การดูแลรักษาเสื้อผ้า
สื่อการสอน บทที่ 2 การดูแลรักษาเสื้อผ้าสื่อการสอน บทที่ 2 การดูแลรักษาเสื้อผ้า
สื่อการสอน บทที่ 2 การดูแลรักษาเสื้อผ้า
 
หน่วยที่ 2 เรื่อง บ้านน่าอยู่
หน่วยที่ 2 เรื่อง บ้านน่าอยู่หน่วยที่ 2 เรื่อง บ้านน่าอยู่
หน่วยที่ 2 เรื่อง บ้านน่าอยู่
 
ครอบครัวอบอุ่น
ครอบครัวอบอุ่นครอบครัวอบอุ่น
ครอบครัวอบอุ่น
 
มัลติมีเดีย
มัลติมีเดียมัลติมีเดีย
มัลติมีเดีย
 
อาการเสียและวิธีแก้ปัญหาคอมพิวเตอร์เบื้องต้น
อาการเสียและวิธีแก้ปัญหาคอมพิวเตอร์เบื้องต้นอาการเสียและวิธีแก้ปัญหาคอมพิวเตอร์เบื้องต้น
อาการเสียและวิธีแก้ปัญหาคอมพิวเตอร์เบื้องต้น
 
โครงสร้างคอมพิวเตอร์และหลักการทำงานเบื้องต้น
โครงสร้างคอมพิวเตอร์และหลักการทำงานเบื้องต้นโครงสร้างคอมพิวเตอร์และหลักการทำงานเบื้องต้น
โครงสร้างคอมพิวเตอร์และหลักการทำงานเบื้องต้น
 

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

  • 1. เริ่มต้นกับ HTML & XHTML ชั้นมัธยมศึกษา กลุ่มสาระการงานพื้นฐานอาชีพและเทคโนโลยี จัดทาขึ้นเพื่อใช้เป็นสื่อประกอบการเรียนการสอน โดย นาย อัศวิน ขัดชุ่มแสง
  • 2. HTML ย่อมาจากคาว่า Hypertext Markup Language เป็นภาษาหลักที่ ใช้ในการสร้างไฟล์เว็บเพจ HTML = Hypertext + SGML HTML เกิดจากการสร้างเอกสาร Hypertext โดยพัฒนามาจากภาษา SGML
  • 3. การสร้างเว็บเพจโดยใช้ภาษา HTML การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทาได้โดยการใช้โปรแกรม Text Editor ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น - Notepad - Editplus ในสื่อการสอนนี้ จะใช้โปรแกรม Notepad เพราะมีขนาดเล็กและมีอยู่แล้วในวินโดว์
  • 4. ลักษณะของภาษา HTML Computer and Internet (310101) 4 ภาษา HTML มีองค์ประกอบที่สาคัญ 2 ส่วน คือ ส่วนที่เป็นข้อความ แสดงบนจอภาพ ส่วนที่เป็นคาสั่ง เรียกว่า แท็ก ( tag )
  • 5. รูปแบบแท็กจะแยกเป็น 2 ส่วน คือ 1. ส่วนเริ่ม “แท็กเปิด” 2. ส่วนจบ “แท็กปิด” ** ในส่วนของแท็กปิด ต้องมีเครื่องหมาย Slash ( / ) ** - บางแท็กอาจจะไม่ต้องมีแท็กปิดก็ใช้งานได้ เช่น <br> - เราสามารถพิมพ์ตัวเล็กหรือใหญ่ก็ได้ (v.4 ขึ้นไป) - บางแท็กจะมีตัวกาหนดคุณสมบัติ เรียกว่า แอททริบิวท์ ( Attribute ) = ตัวกาหนดคุณสมบัติ รูปแบบ <แท็กเปิด> ข้อความ <แท็กปิด> เช่น <title>…….</title>
  • 6. ตัวอย่าง < hr width=600 = size=5 > Element (แท็ก) Attribute (กาหนดคุณสมบัติ) Vale (ค่าที่กาหนดให้ใช้) เมื่อประโยค HTML ข้างต้นทางานสีพื้นหลัง (Background color) ของ หน้า เพจ (Page) จะเป็นสีม่วง Lavender
  • 7. โครงสร้างพื้นฐานของ HTML Computer and Internet (310101) 7 <HTML> <HEAD> <TITLE> ชื่อหัวเรื่องที่ต้องการแสดง</TITLE> </HEAD> <BODY> คาสั่งหรือข้อมูลที่ต้องการแสดง </BODY> </HTML> แบ่งออกเป็น 4 ส่วนหลัก ดังนี้
  • 8. เครื่องมือที่ใช้สร้างเอกสาร HTML การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทาได้โดยการใช้โปรแกรม Text Editor ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น - Notepad - Editplus ในสื่อการสอนนี้ จะใช้โปรแกรม Notepad เพราะมีขนาดเล็กและมีอยู่แล้วในวินโดว์
  • 9. Notepad นี้จัดเป็นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรือเขียนภาษา HTML ได้ และ Notepad นี้เป็นโปรแกรมที่สามารถใช้งานได้ง่าย และเป็นโปรแกรมที่ ทางานบนระบบ Windows 1. คลิกที่ Start --> 2. เลือก Programs --> 3. เลือก Accessories --> 4. เลือก Notepad
  • 10. พิมพ์เอกสารตามตัวอย่าง 1. เปิดโปรแกรม Notepad แล้วลองเขียนเอกสาร ดังนี้ 2. การบันทึกเอกสาร HTML - Save เป็นนามสกุล .html หรือ .htm home.html
  • 11. XHTML XHTML (Extensible HyperText Markup Language)คือที่ปรับปรุงมาจาก ภาษาHTML ที่เอาไว้เขียนสร้างเว็บเพจ ที่มีปัญหาเรื่องการแสดงผล ทาง องค์กร W3C ได้นาเอา ภาษา HTML มาปรับปรุงใหม่ โดยยึดหลักการ ของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การใช้งานมีความเข้มงวด และเป็น มาตรฐานยิ่งขึ้น และปูทางให้ตลาดบราวเซอร์ (browser) ปัจจุบัน และในอนาคต ที่ ออกบราวเซอร์ใหม่ ให้ใช้มาตรฐานเดียวกัน ในการแสดงผล ได้อย่างถูกต้อง นั้นคือ มาตรฐานXHTML
  • 13. การกาหนด DOCTYPE ( Document Type Definition ) DOCTYPE คือ การประกาศว่าเอกสารนี้ จัดอยู่ในประเภทใด และ ตรวจสอบความถูกต้องกับ DTD เพื่อในกรณี กับ Browser ประเภทต่างๆ การประกาศ DOCTYPE ของ XHTML ในส่วนบนสุดบรรทัดของทุกๆเพจ
  • 14. ข้อแตกต่าง ระหว่าง HTML กับ XHTML - อีลิเมนต์(element) และแอตทริบิวต์(attributes) จะต้องเขียนเป็นตัว พิมพ์เล็ก เท่านั้น - อีลิเมนต์ ของ XHTML ที่ไม่ใช่อีลิเมนต์ว่าง (empty element)หรือไม่มีการเก็บ ข้อมูล XHTML จะต้องเว้นช่องว่าง และมีแท็กปิด "< />" ด้วย จาก ของเดิม checked เปลี่ยนเป็น checked="checked" checked> เป็น checked="checked" /> จะต้องเว้นช่องว่าง และมีแท็กปิด "< />" ด้วย