SlideShare ist ein Scribd-Unternehmen logo
1 von 3
Downloaden Sie, um offline zu lesen
ใบความรูที่ 1
                                      เรื่อง การเขียนเว็บเพจดวยภาษา HTML
....................................................................................................................................................
จุดประสงค 1. สามารถอธิบายโครงสรางและคําสั่งหลักของภาษา HTML ได
                   2. อธิบายและใชคําสั่งเบื้องตนในการเขียนโปรแกรมภาษา HTML ได
                   3. สามารถสรางเว็บเพจดวยภาษา HTML
                   4. สามารถแสดงผลลัพธบนเว็บเบราวเซอรไดอยางถูกตอง
                   5. สามารถใชโปรแกรม Notepad ในการพิมพไฟลเอกสาร HTML ได
....................................................................................................................................................

       HTML ยอมาจากคําวา "HyperText Markup Language" เปนภาษาที่ใชในการเขียน
โปรแกรมภาษาหนึ่งของคอมพิวเตอร ที่แสดงผลในลักษณะของเว็บเพจ ซึงสามารถแสดงผลไดใน
                                                                 ่
รูปแบบตาง ๆ ไมวาเปนภาพกราฟก ภาพนิง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซตอื่น ๆ
                                      ่

       ภาษา HTML เปนภาษาทีมลักษณะของโคด กลาวคือ จะเปนไฟลที่เก็บขอมูลที่เปนตัวอักษร
                              ่ ี
ในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยูในรูปแบบของเอกสารขอความ จึงสามารถ
กําหนดรูปแบบและโครงสรางไดงาย
                            

การสรางเว็บเพจ

เราสามารถสรางเว็บเพจได 2 ทาง คือ

      1. TextEditor โดยเราตองรูคําสั่งของภาษา HTML แลวพิมพโปรแกรมเขาไปทางTextEditor เชน
         Notepad เปนตน
      2. ตัวชวยสราง โดยใชโปรแกรมที่มีความสามารถในการสรางเว็บเพจโดยเราไมจําเปนตองรู
         ภาษา HTML เพราะโปรแกรมเหลานี้จะทําการแปลงใหเราอัตโนมัติ

ขั้นตอนในการสรางเว็บเพจ

      1. เปดโปรแกรม TextEditor แลวทําการพิมพคําสั่ง HTML แลวบันทึกเปนไฟลนามสกุล .htm
         หรือ .html
      2. เปดโปรแกรม WebBrowser เพื่อใชในการดูผลลัพธที่ไดจากการเขียนภาษา HTML จากที่ได
         เขียนจาก TextEditor
โครงสรางของภาษา HTML
ไฟลเอกสาร HTML ประกอบดวยสวนประกอบสองสวนคือ Head กับ Body โดยสามารถเปรียบเทียบ
ไดงาย ๆ ก็คือ สวน Head จะคลายกับสวนที่เปน Header ของหนาเอกสารทัวไป หรือบรรทัด Title ของ
                                                                      ่
หนาตางการทํางานในระบบ Windows สําหรับสวน Body จะเปนสวนเนื้อหาของเอกสารนั้นๆ โดยทั้ง
สองสวนจะอยูภายใน Tag <HTML>…</HTML>
                

ลักษณะของภาษา Html
         - คําสั่งของภาษา Html จะอยูในเครื่องหมาย < > เสมอ
         - ในแตละคําสัง (tags) สวนใหญจะมีคําสังเปด < > และคําสั่งปด </ > เสมอ เชน <u>
                        ่                        ่
ขอความ </u>
         - สามารถใชอักษรตัวใหญ หรือตัวเล็กก็ได เชน <BR> หรือ <br> จะไดผลลัพธเชนเดียวกัน
ขอตกลงในการอาน
         - ขอความที่เปนตัวหนาจะเปนคําสั่งภาษา Html ตัวธรรมดาจะเปนขอความธรรมดาทีไม   ่
เกี่ยวกับภาษา Html
รูปแบบโครงสรางของภาษา Html
ทุกครั้งที่เราจะเขียนโฮมเพจดวยภาษา Html เราจะตองพิมพโครงสรางตอไปนี้ลงไปกอนทุกครั้ง

               <HTML>
               <HEAD>
               <TITLE> หัวขอโฮมเพจที่จะแสดงที่ title bar</TITLE>
               </HEAD>
               <BODY>
                     สวนของเนื้อหา
               </BODY>
               </HTML>
จากโครงสรางดังกลาวสามารถอธิบายไดดงนี้
                                    ั

    •   คําสั่ง <HTML> กับ </HTML> จําเปนตองพิมพลงไปทุกครั้งเพื่อบอกวาเริ่มคําสั่ง html แลว
        และ จบคําสั่ง html แลวโดย <HTML> มักจะอยูบรรทัดแรกเสมอเพื่อบอกวาเริ่มตนทีนี่ กับ
                                                                                         ่
        </HTML> มักจะอยูบรรทัดลางสุดเสมอเพือบอกวาจบสวนของภาษา html แลว
                                                ่
    •   คําสั่ง <HEAD> และ </HEAD> ใชสําหรับประกาศหัวของโฮมเพจวาเขียนโดยใคร โฮมเพจ
        ชื่อวาอะไร ฯลฯ เราเรียกวาสวนหัวของโปรแกรม
•   คําสั่ง <TITLE> และ </TITLE> จะใชสําหรับบอกวาโฮมเพจนีมีเนื้อหาเกี่ยวกับอะไร โดย
                                                              ้
       ขอความทีพิมพลงไประหวาง <TITLE> ... </TITLE>จะแสดงในสวนของ title bar
                  ่
   •   คําสั่ง <BODY> และ </BODY> ขอมูลที่อยูระหวาง <BODY> และ </BODY> จะเปนสวน
       ของขอมูลที่เราตองการแสดงในเว็บเพจ

เอกสารอางอิง
ภิญู กําเนิดหลม,เขียน Webpage ดวย HTML.กรุงเทพฯ:3495 บุคเซ็นเตอร,2546; หนา 8-9.

Weitere ähnliche Inhalte

Was ist angesagt?

บทที่ 2 html introduction
บทที่ 2 html introductionบทที่ 2 html introduction
บทที่ 2 html introductionNattipong Siangyen
 
บทที่ 2 html introduction
บทที่ 2 html introductionบทที่ 2 html introduction
บทที่ 2 html introductionNattipong Siangyen
 
ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์Nichakorn Sengsui
 
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTMLใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTMLผ่องนภา มณีธร
 
สรุป2 html
สรุป2 htmlสรุป2 html
สรุป2 htmlSchool
 
การสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา Htmlการสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา HtmlFair Kung Nattaput
 
รายงาน
รายงานรายงาน
รายงานnoopim
 
Doc content 247_วิธีการ_save_ข้อมูล_ลงแผ่น_cd
Doc content 247_วิธีการ_save_ข้อมูล_ลงแผ่น_cdDoc content 247_วิธีการ_save_ข้อมูล_ลงแผ่น_cd
Doc content 247_วิธีการ_save_ข้อมูล_ลงแผ่น_cdprangkupk
 
การเขียนเว็บเพจด้วยภาษา HTML
การเขียนเว็บเพจด้วยภาษา HTMLการเขียนเว็บเพจด้วยภาษา HTML
การเขียนเว็บเพจด้วยภาษา HTMLMjjeje Mint
 

Was ist angesagt? (15)

บทที่ 2 html introduction
บทที่ 2 html introductionบทที่ 2 html introduction
บทที่ 2 html introduction
 
Webpage by html
Webpage by htmlWebpage by html
Webpage by html
 
บทที่ 2 html introduction
บทที่ 2 html introductionบทที่ 2 html introduction
บทที่ 2 html introduction
 
Howtosignup
HowtosignupHowtosignup
Howtosignup
 
ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์
 
Web Accessibility Coding
Web Accessibility CodingWeb Accessibility Coding
Web Accessibility Coding
 
Test
TestTest
Test
 
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTMLใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
 
สรุป2 html
สรุป2 htmlสรุป2 html
สรุป2 html
 
ใบความรู้ที่ 2
ใบความรู้ที่ 2ใบความรู้ที่ 2
ใบความรู้ที่ 2
 
การสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา Htmlการสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา Html
 
รายงาน
รายงานรายงาน
รายงาน
 
Wordpress google docs
Wordpress google docsWordpress google docs
Wordpress google docs
 
Doc content 247_วิธีการ_save_ข้อมูล_ลงแผ่น_cd
Doc content 247_วิธีการ_save_ข้อมูล_ลงแผ่น_cdDoc content 247_วิธีการ_save_ข้อมูล_ลงแผ่น_cd
Doc content 247_วิธีการ_save_ข้อมูล_ลงแผ่น_cd
 
การเขียนเว็บเพจด้วยภาษา HTML
การเขียนเว็บเพจด้วยภาษา HTMLการเขียนเว็บเพจด้วยภาษา HTML
การเขียนเว็บเพจด้วยภาษา HTML
 

Ähnlich wie Pai01

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmldevilp Nnop
 
รายงาน
รายงานรายงาน
รายงานkongdang
 
รายงาน
รายงานรายงาน
รายงานpim1122
 
รายงาน
รายงานรายงาน
รายงานpim1122
 
รายงาน เรื่อง css
รายงาน เรื่อง cssรายงาน เรื่อง css
รายงาน เรื่อง cssnongnan
 
รายงาน
รายงานรายงาน
รายงานkongdang
 
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้ารายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้าPoppy Love
 
รายงาน กลุ่ม คอม ป๊อบ
รายงาน กลุ่ม คอม ป๊อบรายงาน กลุ่ม คอม ป๊อบ
รายงาน กลุ่ม คอม ป๊อบPoppy Love
 
รายงาน กลุ่ม คอม ป๊อบ
รายงาน กลุ่ม คอม ป๊อบรายงาน กลุ่ม คอม ป๊อบ
รายงาน กลุ่ม คอม ป๊อบPoppy Love
 
CSS คืออะไร?
CSS คืออะไร?CSS คืออะไร?
CSS คืออะไร?Somsak Phusririt
 
เริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTMLเริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTMLssuseraa96d2
 
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา 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
 
Hyper text markup language
Hyper  text  markup  languageHyper  text  markup  language
Hyper text markup languageungpao
 
Session1 part2
Session1 part2Session1 part2
Session1 part2maovkh
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์chiton2535
 

Ähnlich wie Pai01 (20)

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน เรื่อง css
รายงาน เรื่อง cssรายงาน เรื่อง css
รายงาน เรื่อง css
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้ารายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
 
Html
HtmlHtml
Html
 
รายงาน กลุ่ม คอม ป๊อบ
รายงาน กลุ่ม คอม ป๊อบรายงาน กลุ่ม คอม ป๊อบ
รายงาน กลุ่ม คอม ป๊อบ
 
รายงาน กลุ่ม คอม ป๊อบ
รายงาน กลุ่ม คอม ป๊อบรายงาน กลุ่ม คอม ป๊อบ
รายงาน กลุ่ม คอม ป๊อบ
 
CSS คืออะไร?
CSS คืออะไร?CSS คืออะไร?
CSS คืออะไร?
 
Lernning 13
Lernning 13Lernning 13
Lernning 13
 
เริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTMLเริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTML
 
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQLเอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
 
Lesson 1
Lesson 1Lesson 1
Lesson 1
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
Hyper text markup language
Hyper  text  markup  languageHyper  text  markup  language
Hyper text markup language
 
Session1 part2
Session1 part2Session1 part2
Session1 part2
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
 

Mehr von Krupetch Songkwamjarearn

เอกสารประกวดราคา 1-2561
เอกสารประกวดราคา 1-2561เอกสารประกวดราคา 1-2561
เอกสารประกวดราคา 1-2561Krupetch Songkwamjarearn
 
ประกาศโรงเรียนสามโก้วิทยาคม
ประกาศโรงเรียนสามโก้วิทยาคมประกาศโรงเรียนสามโก้วิทยาคม
ประกาศโรงเรียนสามโก้วิทยาคมKrupetch Songkwamjarearn
 
ประกาศแผนการจัดซื้อจัดจ้างเพื่อเผยแพร่ขึ้นเว็บไซต์
ประกาศแผนการจัดซื้อจัดจ้างเพื่อเผยแพร่ขึ้นเว็บไซต์ประกาศแผนการจัดซื้อจัดจ้างเพื่อเผยแพร่ขึ้นเว็บไซต์
ประกาศแผนการจัดซื้อจัดจ้างเพื่อเผยแพร่ขึ้นเว็บไซต์Krupetch Songkwamjarearn
 
ราคากลางห้องเรียนอัจฉริยะอาเซียน
ราคากลางห้องเรียนอัจฉริยะอาเซียนราคากลางห้องเรียนอัจฉริยะอาเซียน
ราคากลางห้องเรียนอัจฉริยะอาเซียนKrupetch Songkwamjarearn
 
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557Krupetch Songkwamjarearn
 
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557Krupetch Songkwamjarearn
 
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557Krupetch Songkwamjarearn
 
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557Krupetch Songkwamjarearn
 
รายงานประจำปีของสถานศึกษา
รายงานประจำปีของสถานศึกษารายงานประจำปีของสถานศึกษา
รายงานประจำปีของสถานศึกษาKrupetch Songkwamjarearn
 
01ปกรายงานประจำปีของสถานศึกษา
01ปกรายงานประจำปีของสถานศึกษา01ปกรายงานประจำปีของสถานศึกษา
01ปกรายงานประจำปีของสถานศึกษาKrupetch Songkwamjarearn
 
01ปกรายงานประจำปีของสถานศึกษา
01ปกรายงานประจำปีของสถานศึกษา01ปกรายงานประจำปีของสถานศึกษา
01ปกรายงานประจำปีของสถานศึกษาKrupetch Songkwamjarearn
 
02หนังสือรับรองผ่านความเห็นชอบ คำนำ-สารบัญ
02หนังสือรับรองผ่านความเห็นชอบ คำนำ-สารบัญ02หนังสือรับรองผ่านความเห็นชอบ คำนำ-สารบัญ
02หนังสือรับรองผ่านความเห็นชอบ คำนำ-สารบัญKrupetch Songkwamjarearn
 
ประกาศรับสมัครครูศิลปศึกษา
ประกาศรับสมัครครูศิลปศึกษาประกาศรับสมัครครูศิลปศึกษา
ประกาศรับสมัครครูศิลปศึกษาKrupetch Songkwamjarearn
 

Mehr von Krupetch Songkwamjarearn (17)

เอกสารประกวดราคา 1-2561
เอกสารประกวดราคา 1-2561เอกสารประกวดราคา 1-2561
เอกสารประกวดราคา 1-2561
 
ประกาศโรงเรียนสามโก้วิทยาคม
ประกาศโรงเรียนสามโก้วิทยาคมประกาศโรงเรียนสามโก้วิทยาคม
ประกาศโรงเรียนสามโก้วิทยาคม
 
ประกาศแผนการจัดซื้อจัดจ้างเพื่อเผยแพร่ขึ้นเว็บไซต์
ประกาศแผนการจัดซื้อจัดจ้างเพื่อเผยแพร่ขึ้นเว็บไซต์ประกาศแผนการจัดซื้อจัดจ้างเพื่อเผยแพร่ขึ้นเว็บไซต์
ประกาศแผนการจัดซื้อจัดจ้างเพื่อเผยแพร่ขึ้นเว็บไซต์
 
ราคากลางห้องเรียนอัจฉริยะอาเซียน
ราคากลางห้องเรียนอัจฉริยะอาเซียนราคากลางห้องเรียนอัจฉริยะอาเซียน
ราคากลางห้องเรียนอัจฉริยะอาเซียน
 
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
 
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
 
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
ผลรายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
 
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
รายงานการวิเคราะห์ผลจัดซื้อ จ้าง-ปี-2557
 
รายงานประจำปีของสถานศึกษา
รายงานประจำปีของสถานศึกษารายงานประจำปีของสถานศึกษา
รายงานประจำปีของสถานศึกษา
 
01ปกรายงานประจำปีของสถานศึกษา
01ปกรายงานประจำปีของสถานศึกษา01ปกรายงานประจำปีของสถานศึกษา
01ปกรายงานประจำปีของสถานศึกษา
 
01ปกรายงานประจำปีของสถานศึกษา
01ปกรายงานประจำปีของสถานศึกษา01ปกรายงานประจำปีของสถานศึกษา
01ปกรายงานประจำปีของสถานศึกษา
 
02หนังสือรับรองผ่านความเห็นชอบ คำนำ-สารบัญ
02หนังสือรับรองผ่านความเห็นชอบ คำนำ-สารบัญ02หนังสือรับรองผ่านความเห็นชอบ คำนำ-สารบัญ
02หนังสือรับรองผ่านความเห็นชอบ คำนำ-สารบัญ
 
ประกาศรับสมัครครูศิลปศึกษา
ประกาศรับสมัครครูศิลปศึกษาประกาศรับสมัครครูศิลปศึกษา
ประกาศรับสมัครครูศิลปศึกษา
 
การใช้งาน Google
การใช้งาน  Googleการใช้งาน  Google
การใช้งาน Google
 
Storyboard
StoryboardStoryboard
Storyboard
 
Pai04
Pai04Pai04
Pai04
 
Pai03
Pai03Pai03
Pai03
 

Pai01

  • 1. ใบความรูที่ 1 เรื่อง การเขียนเว็บเพจดวยภาษา HTML .................................................................................................................................................... จุดประสงค 1. สามารถอธิบายโครงสรางและคําสั่งหลักของภาษา HTML ได 2. อธิบายและใชคําสั่งเบื้องตนในการเขียนโปรแกรมภาษา HTML ได 3. สามารถสรางเว็บเพจดวยภาษา HTML 4. สามารถแสดงผลลัพธบนเว็บเบราวเซอรไดอยางถูกตอง 5. สามารถใชโปรแกรม Notepad ในการพิมพไฟลเอกสาร HTML ได .................................................................................................................................................... HTML ยอมาจากคําวา "HyperText Markup Language" เปนภาษาที่ใชในการเขียน โปรแกรมภาษาหนึ่งของคอมพิวเตอร ที่แสดงผลในลักษณะของเว็บเพจ ซึงสามารถแสดงผลไดใน ่ รูปแบบตาง ๆ ไมวาเปนภาพกราฟก ภาพนิง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซตอื่น ๆ ่ ภาษา HTML เปนภาษาทีมลักษณะของโคด กลาวคือ จะเปนไฟลที่เก็บขอมูลที่เปนตัวอักษร ่ ี ในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยูในรูปแบบของเอกสารขอความ จึงสามารถ กําหนดรูปแบบและโครงสรางไดงาย  การสรางเว็บเพจ เราสามารถสรางเว็บเพจได 2 ทาง คือ 1. TextEditor โดยเราตองรูคําสั่งของภาษา HTML แลวพิมพโปรแกรมเขาไปทางTextEditor เชน Notepad เปนตน 2. ตัวชวยสราง โดยใชโปรแกรมที่มีความสามารถในการสรางเว็บเพจโดยเราไมจําเปนตองรู ภาษา HTML เพราะโปรแกรมเหลานี้จะทําการแปลงใหเราอัตโนมัติ ขั้นตอนในการสรางเว็บเพจ 1. เปดโปรแกรม TextEditor แลวทําการพิมพคําสั่ง HTML แลวบันทึกเปนไฟลนามสกุล .htm หรือ .html 2. เปดโปรแกรม WebBrowser เพื่อใชในการดูผลลัพธที่ไดจากการเขียนภาษา HTML จากที่ได เขียนจาก TextEditor
  • 2. โครงสรางของภาษา HTML ไฟลเอกสาร HTML ประกอบดวยสวนประกอบสองสวนคือ Head กับ Body โดยสามารถเปรียบเทียบ ไดงาย ๆ ก็คือ สวน Head จะคลายกับสวนที่เปน Header ของหนาเอกสารทัวไป หรือบรรทัด Title ของ ่ หนาตางการทํางานในระบบ Windows สําหรับสวน Body จะเปนสวนเนื้อหาของเอกสารนั้นๆ โดยทั้ง สองสวนจะอยูภายใน Tag <HTML>…</HTML>  ลักษณะของภาษา Html - คําสั่งของภาษา Html จะอยูในเครื่องหมาย < > เสมอ - ในแตละคําสัง (tags) สวนใหญจะมีคําสังเปด < > และคําสั่งปด </ > เสมอ เชน <u> ่ ่ ขอความ </u> - สามารถใชอักษรตัวใหญ หรือตัวเล็กก็ได เชน <BR> หรือ <br> จะไดผลลัพธเชนเดียวกัน ขอตกลงในการอาน - ขอความที่เปนตัวหนาจะเปนคําสั่งภาษา Html ตัวธรรมดาจะเปนขอความธรรมดาทีไม ่ เกี่ยวกับภาษา Html รูปแบบโครงสรางของภาษา Html ทุกครั้งที่เราจะเขียนโฮมเพจดวยภาษา Html เราจะตองพิมพโครงสรางตอไปนี้ลงไปกอนทุกครั้ง <HTML> <HEAD> <TITLE> หัวขอโฮมเพจที่จะแสดงที่ title bar</TITLE> </HEAD> <BODY> สวนของเนื้อหา </BODY> </HTML> จากโครงสรางดังกลาวสามารถอธิบายไดดงนี้ ั • คําสั่ง <HTML> กับ </HTML> จําเปนตองพิมพลงไปทุกครั้งเพื่อบอกวาเริ่มคําสั่ง html แลว และ จบคําสั่ง html แลวโดย <HTML> มักจะอยูบรรทัดแรกเสมอเพื่อบอกวาเริ่มตนทีนี่ กับ ่ </HTML> มักจะอยูบรรทัดลางสุดเสมอเพือบอกวาจบสวนของภาษา html แลว ่ • คําสั่ง <HEAD> และ </HEAD> ใชสําหรับประกาศหัวของโฮมเพจวาเขียนโดยใคร โฮมเพจ ชื่อวาอะไร ฯลฯ เราเรียกวาสวนหัวของโปรแกรม
  • 3. คําสั่ง <TITLE> และ </TITLE> จะใชสําหรับบอกวาโฮมเพจนีมีเนื้อหาเกี่ยวกับอะไร โดย ้ ขอความทีพิมพลงไประหวาง <TITLE> ... </TITLE>จะแสดงในสวนของ title bar ่ • คําสั่ง <BODY> และ </BODY> ขอมูลที่อยูระหวาง <BODY> และ </BODY> จะเปนสวน ของขอมูลที่เราตองการแสดงในเว็บเพจ เอกสารอางอิง ภิญู กําเนิดหลม,เขียน Webpage ดวย HTML.กรุงเทพฯ:3495 บุคเซ็นเตอร,2546; หนา 8-9.