SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
วิชา การเขียนเว็บเพจด้วยภาษา HTML




  ผู้สอน อ.บดินทร์ชัย ปิยโชติอมรชัย
ในเบื้องต้นก่อนที่จะเริ่มสร้างเว็บเพจ
ผู้เรียนจาเป็นที่จะต้องทราบและเข้าใจเกี่ยวกับความรู้
เบื้องต้นในการสร้างเว็บเพจ เพื่อให้เกิดการศึกษา
และเรียนรู้ คุณสมบัติของเว็บเพจ ส่วนประกอบ
ของเว็บเพจ และสามารถแยกแยะความแตกต่าง
ระหว่าง เว็บเพจและเว็บไซต์ได้อย่างถูกต้อง รวมถึง
ทราบและเข้าใจเกี่ยวกับภาษาคอมพิวเตอร์ที่ใช้ในการ
สร้างเว็บเพจ
1)   เพื่อให้ผู้เรียนสามารถอธิบายลักษณะหรือ
     คุณสมบัติของเว็บเพจได้อย่างถูกต้อง
2)   เพื่อให้ผู้เรียนสามารถอธิบายส่วนประกอบของเว็บ
     เพจได้อย่างถูกต้อง
3)   เพื่อให้ผู้เรียนสามารถแยกแยะความแตกต่างของ
     เว็บเพจและเว็บไซต์ได้อย่างถูกต้อง
4)   เพื่อให้ผู้เรียนสามารถเขียนภาษา HTML เบื้องต้นได้
     อย่างถูกต้อง
เว็บเพจ หมายถึง ข้อมูลเอกสาร ที่บรรจุเนื้อหา
เช่น ตัวอักษร ข้อความ รูปภาพ เสียง อื่นๆ โดย
อยู่ในรูปแบบเอกสารออนไลน์ ซึ่งใช้โปรแกรมเว็บ
บราวเซอร์ (Web Browser) ในการเปิดดูเอกสาร
เว็บ Browser เป็นโปรแกรมที่ถูกสร้างขึ้นมาเพื่อใช้งานด้านเอกสารเว็บเพจ
โดยเฉพาะ สามารถเปิดชมเอกสารเว็บเพจที่มีนามสกุลไฟล์ต่อไปนี้ เช่น
HTML,PHP , ASP เป็นต้น โดยปัจจุบัน web browser ในยุค internet
ก็ได้ถูกสร้างขึ้นมาให้เลือกใช้หลายโปรแกรมเช่น ดังต่อไปนี้



    Internet Explorer
    Mozilla Firefox
    Google Chrome
    Opera
    Safari
เอกสารเว็บเพจนั้นจะมีส่วนประกอบที่สาคัญอยู่ โดยส่วนประกอบของเว็บ
เพจนั้นเป็นสิ่งที่จาเป็นเพื่อการสื่อสารถ่ายทอดและสนับสนุนการใช้งานเว็บ
แก่ผู้ใช้ ส่วนประกอบของเว็บเพจมีดังต่อไปนี้




    Head (Title Bar)
    Banner
    Menu (Navigator)
    Content
Title Bar
คาอธิบายเอกสาร

Banner
โลโก้ ป้ายเว็บ



Menu (navigator)
เมนูเลือกเนื้อหา




Content
เนื้อหาเว็บเพจ
เอกสารเว็บเพจนั้นจะมีส่วนประกอบที่สาคัญอยู่ โดยส่วนประกอบของเว็บ
เพจนั้นเป็นสิ่งที่จาเป็นเพื่อการสื่อสารถ่ายทอดและสนับสนุนการใช้งานเว็บ
แก่ผู้ใช้ ส่วนประกอบของเว็บเพจมีดังต่อไปนี้




    Head (Title Bar)
    Banner
    Menu (Navigator)
    Content
เว็บเพจ (Web Page) หมายถึง เอกสารหน้าเว็บ
หนึ่งหน้า

เว็บเพจหลายๆหน้า มีเนื้อหาสอดคล้องและ
สัมพันธ์กันเรียกว่า เว็บไซต์ (Web site)

                  website




webpage   1   2     3       4   5
ในการสร้างเว็บเพจเบื้องต้น จะใช้ภาษาคอมพิวเตอร์ในการเขียนและ
Complie ผลลัพธ์ออกมาเป็นเว็บเพจ โดยภาษาที่ใข้คือภาษา HTML


HTML (Hypertext markup Language)


    ภาษาทีใช้สาหรับในการเขียนเว็บเพจเบื้องต้นโดย
          ่
    โปรแกรมที่นิยมเขียนคือ โปรแกรม NOTEPAD
โครงสร้างภาษา HTML แบ่งออกเป็น 4 ส่วนที่ขาดไม่ได้ได้แก่
1. ส่วนเปิดภาษา <htMl>…..</html>
2. ส่วนหัวเว็บเพจ    <head>….</head>
3. ส่วนคาอธิบายชื่อเอกสารเว็บเพจ     <title>….</title>
4. ส่วนเนื้อหาเอกสารเว็บเพจ <body>….</body>

    <html>
          <head>
                 <title> คาอธิบายเอกสาร </title>
           </Head>
    <Body>
                เนื้อหาเอกสาร
    </Body>
    </Html>
Tag หมายถึง ส่วนคาสั่งของภาษา HTML โดยในแต่ละคาสั่ง จะใช้
เครื่องหมายน้อยกว่า < จากนั้นจึงเป็นคาสั่ง และปิดด้วย เครื่องหมาย >
โดย 1 คาสั่งจะมี Tag เปิด และ Tag ปิด



    ตัวอย่าง Tag
    <b> ……………………</b>
    <center>………………………</center>
    <i>…………………………..</i>
1.HTML ย่อมาจากคาว่าอะไร
2.Tag ในภาษา HTML มีลักษณะเป็นอย่างไร
3.โครงสร้างภาษา HTML ประกอบไปด้วย
คาสั่งกี่สวน อะไรบ้าง
          ่
4.จงเขียนโครงสร้างภาษา HTML เบื้องต้น

Weitere ähnliche Inhalte

Was ist angesagt?

เฉลยแบบฝึกหัดหน่วยที่ 3
เฉลยแบบฝึกหัดหน่วยที่ 3เฉลยแบบฝึกหัดหน่วยที่ 3
เฉลยแบบฝึกหัดหน่วยที่ 3Thanawut Rattanadon
 
สมุดเล่มเล็ก
สมุดเล่มเล็กสมุดเล่มเล็ก
สมุดเล่มเล็กGed Gis
 
หัวกระดาษข้อสอบ
หัวกระดาษข้อสอบหัวกระดาษข้อสอบ
หัวกระดาษข้อสอบworapanthewaha
 
แบบทดสอบ Excel
แบบทดสอบ Excelแบบทดสอบ Excel
แบบทดสอบ Excelthanakornmaimai
 
ตัวอย่างแผนการสอนคอมพิวเตอร์
ตัวอย่างแผนการสอนคอมพิวเตอร์ตัวอย่างแผนการสอนคอมพิวเตอร์
ตัวอย่างแผนการสอนคอมพิวเตอร์srkschool
 
หลักสูตรแกนกลางภาษาไทย
หลักสูตรแกนกลางภาษาไทยหลักสูตรแกนกลางภาษาไทย
หลักสูตรแกนกลางภาษาไทยน้อง มัดไหม
 
การบ้านป.1
การบ้านป.1การบ้านป.1
การบ้านป.1krumolticha
 
7.แผนการสอนแบบบูรณาการโดยใช้กิจกรรรมโครงงานตามหลักของปรัชญาเศรษฐกิจพอเพียง ม.3
7.แผนการสอนแบบบูรณาการโดยใช้กิจกรรรมโครงงานตามหลักของปรัชญาเศรษฐกิจพอเพียง ม.37.แผนการสอนแบบบูรณาการโดยใช้กิจกรรรมโครงงานตามหลักของปรัชญาเศรษฐกิจพอเพียง ม.3
7.แผนการสอนแบบบูรณาการโดยใช้กิจกรรรมโครงงานตามหลักของปรัชญาเศรษฐกิจพอเพียง ม.3Wareerut Hunter
 
ตัวอย่างการสร้างข้อสอบ
ตัวอย่างการสร้างข้อสอบตัวอย่างการสร้างข้อสอบ
ตัวอย่างการสร้างข้อสอบwanchalerm sotawong
 
แบบฝึกหัดเศรษฐศาสตร์
แบบฝึกหัดเศรษฐศาสตร์แบบฝึกหัดเศรษฐศาสตร์
แบบฝึกหัดเศรษฐศาสตร์ธนิสร ยางคำ
 
ใบงานที่ 7 การคำนวณในตารางทำงาน
ใบงานที่ 7  การคำนวณในตารางทำงานใบงานที่ 7  การคำนวณในตารางทำงาน
ใบงานที่ 7 การคำนวณในตารางทำงานMeaw Sukee
 
04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงานTanyarad Chansawang
 
เรื่อง คำประสม ระดับชั้นมัธยมศึกษาปีที่ ๑
เรื่อง คำประสม ระดับชั้นมัธยมศึกษาปีที่ ๑เรื่อง คำประสม ระดับชั้นมัธยมศึกษาปีที่ ๑
เรื่อง คำประสม ระดับชั้นมัธยมศึกษาปีที่ ๑พัน พัน
 
สรุปเนื้อหาภาษาไทย..ม.ต้น
สรุปเนื้อหาภาษาไทย..ม.ต้นสรุปเนื้อหาภาษาไทย..ม.ต้น
สรุปเนื้อหาภาษาไทย..ม.ต้นTook Took Rachataporn
 
บทที่ 5 สรุปผล และข้อเสนอแนะ
บทที่ 5 สรุปผล และข้อเสนอแนะบทที่ 5 สรุปผล และข้อเสนอแนะ
บทที่ 5 สรุปผล และข้อเสนอแนะKittichai Pinlert
 

Was ist angesagt? (20)

เฉลยแบบฝึกหัดหน่วยที่ 3
เฉลยแบบฝึกหัดหน่วยที่ 3เฉลยแบบฝึกหัดหน่วยที่ 3
เฉลยแบบฝึกหัดหน่วยที่ 3
 
สมุดเล่มเล็ก
สมุดเล่มเล็กสมุดเล่มเล็ก
สมุดเล่มเล็ก
 
หัวกระดาษข้อสอบ
หัวกระดาษข้อสอบหัวกระดาษข้อสอบ
หัวกระดาษข้อสอบ
 
แบบทดสอบ Excel
แบบทดสอบ Excelแบบทดสอบ Excel
แบบทดสอบ Excel
 
ตัวอย่างแผนการสอนคอมพิวเตอร์
ตัวอย่างแผนการสอนคอมพิวเตอร์ตัวอย่างแผนการสอนคอมพิวเตอร์
ตัวอย่างแผนการสอนคอมพิวเตอร์
 
หลักสูตรแกนกลางภาษาไทย
หลักสูตรแกนกลางภาษาไทยหลักสูตรแกนกลางภาษาไทย
หลักสูตรแกนกลางภาษาไทย
 
ใบงาน 1 คอมพิวเตอร์เบื้องต้น
ใบงาน 1 คอมพิวเตอร์เบื้องต้นใบงาน 1 คอมพิวเตอร์เบื้องต้น
ใบงาน 1 คอมพิวเตอร์เบื้องต้น
 
การบ้านป.1
การบ้านป.1การบ้านป.1
การบ้านป.1
 
172 130909011745-
172 130909011745-172 130909011745-
172 130909011745-
 
ใบงาน 1.4 คอมพิวเตอร์และอุปกรณ์
ใบงาน 1.4 คอมพิวเตอร์และอุปกรณ์ใบงาน 1.4 คอมพิวเตอร์และอุปกรณ์
ใบงาน 1.4 คอมพิวเตอร์และอุปกรณ์
 
7.แผนการสอนแบบบูรณาการโดยใช้กิจกรรรมโครงงานตามหลักของปรัชญาเศรษฐกิจพอเพียง ม.3
7.แผนการสอนแบบบูรณาการโดยใช้กิจกรรรมโครงงานตามหลักของปรัชญาเศรษฐกิจพอเพียง ม.37.แผนการสอนแบบบูรณาการโดยใช้กิจกรรรมโครงงานตามหลักของปรัชญาเศรษฐกิจพอเพียง ม.3
7.แผนการสอนแบบบูรณาการโดยใช้กิจกรรรมโครงงานตามหลักของปรัชญาเศรษฐกิจพอเพียง ม.3
 
ตัวอย่างการสร้างข้อสอบ
ตัวอย่างการสร้างข้อสอบตัวอย่างการสร้างข้อสอบ
ตัวอย่างการสร้างข้อสอบ
 
แบบฝึกหัดเศรษฐศาสตร์
แบบฝึกหัดเศรษฐศาสตร์แบบฝึกหัดเศรษฐศาสตร์
แบบฝึกหัดเศรษฐศาสตร์
 
ใบงานที่ 7 การคำนวณในตารางทำงาน
ใบงานที่ 7  การคำนวณในตารางทำงานใบงานที่ 7  การคำนวณในตารางทำงาน
ใบงานที่ 7 การคำนวณในตารางทำงาน
 
04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน04 บทที่ 4-ผลการดำเนินโครงงาน
04 บทที่ 4-ผลการดำเนินโครงงาน
 
12. บทที่ 4 ผลการวิเคราะห์ข้อมูล
12.  บทที่ 4 ผลการวิเคราะห์ข้อมูล12.  บทที่ 4 ผลการวิเคราะห์ข้อมูล
12. บทที่ 4 ผลการวิเคราะห์ข้อมูล
 
เรื่อง คำประสม ระดับชั้นมัธยมศึกษาปีที่ ๑
เรื่อง คำประสม ระดับชั้นมัธยมศึกษาปีที่ ๑เรื่อง คำประสม ระดับชั้นมัธยมศึกษาปีที่ ๑
เรื่อง คำประสม ระดับชั้นมัธยมศึกษาปีที่ ๑
 
สรุปเนื้อหาภาษาไทย..ม.ต้น
สรุปเนื้อหาภาษาไทย..ม.ต้นสรุปเนื้อหาภาษาไทย..ม.ต้น
สรุปเนื้อหาภาษาไทย..ม.ต้น
 
009 รายงาน
009 รายงาน009 รายงาน
009 รายงาน
 
บทที่ 5 สรุปผล และข้อเสนอแนะ
บทที่ 5 สรุปผล และข้อเสนอแนะบทที่ 5 สรุปผล และข้อเสนอแนะ
บทที่ 5 สรุปผล และข้อเสนอแนะ
 

Ähnlich wie ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmldevilp Nnop
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์Nichakorn Sengsui
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
ใบความรู้ที่ 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
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา HtmlRungnapha Naka
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์chiton2535
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power pointNooCake Prommali
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอมpim1122
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอมkongdang
 

Ähnlich wie ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ (20)

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์ภาษาในการพัฒนาเว็บไซต์
ภาษาในการพัฒนาเว็บไซต์
 
คู่มือ Word
คู่มือ Wordคู่มือ Word
คู่มือ Word
 
Website
WebsiteWebsite
Website
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
Webbasic
WebbasicWebbasic
Webbasic
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2
ใบความรู้ที่ 2ใบความรู้ที่ 2
ใบความรู้ที่ 2
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา Html
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
 
Lernning 13
Lernning 13Lernning 13
Lernning 13
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 
Html
HtmlHtml
Html
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอม
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอม
 

ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ