Html 4

แผนการสอนรายวิชา

ชื่อรายวิชา การเขียนเว็บเพจด้วยภาษา HTML

รหัสวิชา 3204 – 2201

ระดับชั้น ปวส . 1

สาขาวิชา คอมพิวเตอร์ธุรกิจ

หน่วยกิต 3

จำนวนชั่วโมงรวม 80 ชั่วโมง

ภาคเรียนที่ 2

ปีการศึกษา 2547

 

จุดประสงค์รายวิชา
•  มีความรู้ความเข้าใจเกี่ยวกับการเขียนภาษา HTML
•  มีทักษะในการเขียนภาษา HTML
•  เห็นคุณค่าของภาษา HTML ในการพัฒนาเว็บเพจ

มาตรฐานรายวิชา
•  อธิบายหลักการของภาษา HTML
•  สามารถเขียนเว็บเพจด้วยโปรแกรมภาษา HTML

คำอธิบายรายวิชา ศึกษาและปฏิบัติเกี่ยวกับหลักการสร้างเว็บเพจด้วยภาษา hypertext markup Language (HTML) โครงสร้างของการเขียน HTML ประเภทของ TAG คำสั่งการพิมพ์ การจัดและการแต่งข้อความ การบรรจุภาพ การสร้างตาราง การเชื่อมโยงหน้า การจัดสร้างเฟรม การใส่เทคนิคพิเศษด้วย DHTML การขอพื้นที่เว็บไซต์และการ Upload เว็บเพจ

ผลการเรียนรู้ ด้านพุทธิพิสัย
•  เพื่อให้มีความรู้ความเข้าใจเกี่ยวกับการเขียนโปรแกรมภาษา HTML
•  เพื่อให้มีความรู้ความเข้าใจโครงสร้างของโปรแกรม
• เพื่อให้มีความรู้ความเข้าใจเกี่ยวกับไวยากรณ์ของภาษา HTML

ด้านทักษะพิสัย
•  เพื่อให้สามารถเขียนโปรแกรมเว็บเพจด้วยภาษา HTML ได้
•  เพื่อให้สามารถเขียนโปรแกรมภาษา HTML จัดการเว็บเพจได้
•  เพื่อให้สามารถขอพื้นที่เว็บไซต์และ Upload เว็บเพจได้

บทที่1 เริ่มต้นกับการสร้างเว็บเพจ

เว็บเพจคืออะไร

                เว็บเพจ  คือ เอกสารที่ใช้ในการเผยแพร่ข้อมูลข่าวสาร  ซึ่งประกอบด้วยทางเครือข่ายอินเทอร์เน็ต  เว็บเพจจะถูกนำมาใช้ประโยชน์ในการ

ประชาสัมพันธ์และนำเสนอข้อมูลความรู้ต่างๆ  จึงส่งผลทำห้แต่ละเว็บเพจมีความแตกต่างกันไปตามวัตถุประสงค์ของการนำไปใช้งานนั้นเอง

 

ประโยชน์ของเว็บเพจ

                เนื่องจากเว็ลเพจสามารถเผยแพร่ข้อมูลได้ด้วยข้อความ  ภาพ เสียง  และภาพยนตร์  ดังนั้นเราจึงพบเห็นการนำเว็บเพจไปสร้างและพัฒนา  เพื่อนำเสนอข้อมูล  และข่าวสารในรูปแบบต่างๆ  ได้อย่างมากมายดังนี้

                -ข่าวและเหตุการณ์ในปัจจุบัน

                                เว็บข่าวในปัจจุบัน  สามารถนำเสนอได้อย่างฉับไว  ทันต่อเหตุการณ์  ทำให้เราสามารถรู้เรื่องราวที่เกิดขึ้นจากที่ต่างๆ  จากทั่วทุกมุมโลกได้อย่างรวดเร็ว  ทั้งภาพนิ่งหรือเป็นภาพวิดีโอที่มีทั้งภาพและเสียง

                -ข้อมูลความรู้และห้องสมุด

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

                -ประชาสัมพันธ์บริษัทและองค์กร

                                เป็นเว็บเพจที่แนะนำความเป็นมา  สินค้า  บริการ  ที่อยู่ที่ติดต่อ และข่าวประชาสัมพันธ์องค์กร

                -ความบันเทิง

                                เนื่องจากเว็บเพจมีทั้งภาพ  เสียง  และวิดีโอ  จึงทำให้การนำเสนอความบันเทิงไม่ใช่เรื่องยาก  ไม่ว่าจะเป็นเว็บวิทยุ  ฟังเพลงออนไลน์  เว็บนำเสนอภาพยนตร์  เกม   และเว็บเรื่องตลกขำขันต่างๆ  เป็นต้น

                -การเงิน  การลงทุน

                                เป็นเว็บที่นำเสนอข้อมูลทางการเงินและการลงทุน  รวม

ไปถึงบริการสำหรับทำธุรกรรมการเงินออนไลน์ผ่านเครือข่ายอินเทอร์เน็ต

                -ซื้อ-ขายสินค้า  และบริการ

                                เป็นเว็บที่เหมือนร้านค้าสำหรับขายสินค้า  และบริการต่างๆ  รวมทั้งยังบริการรับฝากขายสินค้าผ่านร้านเหล่านี้ได้อีกด้วย

                -ดาวน์โหลดข้อมูล

                                เป็นเว็บที่ไห้บริการดาวน์โหลดไฟล์ต่างๆ เช่น  ไฟล์โปแกรม  ไฟล์ภาพ และไฟล์เพลง  เป็นต้น

                -บริการติดต่อสื่อสาร

                                เป็นเว็บที่ให้บริการในการติดต่อสื่อสารถึงกัน  เข่น  การรับส่งจดหมายอิเล็กทรอนิกส์ (E-mail) เว็บบอร์ด และเว็บแช็ตสนทนาต่างๆ เป็นต้น

เว็บเพจทำงานได้อย่างไร

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

คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บเพจ

                คือ  คำศัพท์ต่างๆ  ที่วยทำให้เราเข้าใจและสามารถศึกษาการสร้างเว็บเพจได้อย่างถูกต้อง

ไคลเอนต์-เซิร์ฟเวอร์ (Client-Server)

                มีการติดต่อสื่อสารอยู่ 2 แบบ  คือ แบบส่งข้อมูลและรับข้อมูล  โดยเครื่องคอมพิวเตอร์ที่ทำการส่งข้อมูล เรียกว่า  เครื่องให้บริการ  Server และเครื่องคอมพิวเตอร์ที่รับข้อมูล เราจะเรียกว่า เครื่องรับบริการ Client

เครือข่ายใยแมงมุม  WWW  (world  wide  web)

                WWW หรือเรียกสั้นๆว่า  เว็บ  การให้บริการในรูปแบบนี้  คือ  การเรียกบราวเซอร์  เช่น  internet Explorer หรือ Firefox จากเครื่องของเราและระบุ  URL เพื่อใช้ในการอ้างที่อยู่ที่เก็บเว็บ

เว็บไซต์  Web site

                กลุ่มของหน้าเว็บ  หรือเว็บหลายๆหน้ารวมกัน  โดยจะมีการกำหนดหน้าเว็บเพจหน้าหนึ่งไว้เป็นหน้าแรก  ที่เรียกว่าโฮมเพจ ที่เป็นช่องทางเข้าเว็บเพจทั้งหมดภายในเว็บไซต์นั้น

เว็บบราวเซอร์  และเว็บเซิร์ฟเวอร์ Web Browser &Web Server

                เว็บบราวเซอร์ คือ โปรแกรมที่เป็นประตูเข้าสู่โลก World Wide Web เป็นโปรแกรมที่อยู่ในเครื่องคอมพิวเตอร์ลูกข่าย ที่มีหน้าที่ในการส่งข้อมูลร้องขอและนำเสนอข้อมูลเว็บ

                เว็บเซิร์ฟเวอร์  เป็นที่เก็บเว็บเพจ  เมื่อต้องาการเปิดดูเว็บเพจ  ต้องใช้บราวเซอร์ดึงข้อมูล

โดเมนเนม Domain Name

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

ประเภทของบโดเมนเนม

                โดเมนเนมเป็นชื่อของเว็บไซต์ เราเผยแพร่ข้อมูล  จะไม่ซ้ำใครในโลก  มีการแบ่งโดเมนเนมเป็น  2  ประเภทตามลักษณะ

โดเมนเนม 2 ระดับ  จะมีรูปแบบ เช่น success media.com

                คือ  คำย่อของประเภทองค์กร  ซึ่งคำย่อของประเภทองค์กรที่จะพบบ่อย

ตัวย่อ

ประเภทองค์กร

.com

บริษัทหรือองค์กรพาณิชย์  เช่น  บริษัท  ไอบีเอ็ม  มีอินเทอร์เน็ตแอดเดรสเป็น  ibm.com

.edu

สถาบันการศึกษา เช่น  มหาวิทยาลัยฮาร์วาร์ด  มีอินเทอรืเน็ตแอดเดรสเป็น  harvard.edu

.gov

องค์กรรัฐบาล  เช่น  องค์กรนาว่า  มีอินเทอร์เน็ตแอดเดรสเป็น  nasa.gov

.mil

องค์กรทางทหาร  เช่น  af.mil  เป็นอินเทอร์เน็ตแอดเดรสของกองทัพอากาศสหรัฐ

.net

องค์กรที่ทำหน้าที่เป็นเกตเวย์  หรือจุดเชื่อมต่อเครือข่าย  เช่น  mci.net

.org

องค์กรที่ไม่เข้าข่ายประเภทองค์กรทั้งหมดที่ได้กล่าวถึง

.biz

บริษัทหรือองค์กรทางธุรกิจ

.info

ใช้ในโอกาสโปรโมทสินค้า   เหตุการณ์สำคัญ  เช่น  บอกข้อมูลส่วนลดของสินค้า 

โดเมนเนม  3 ระดับ  จะมีรูปแบบ เช่น  success.co.Th

                โดยคำย่อในส่วนที่ 2 หลังเครื่องหมายจถดใช้ระบุประเภทขององค์กร  และคำย่อส่วนที่  3  หลังเครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กรนั้น เช่น

ตัวย่อส่วนที่2

ตัวย่อส่วนที่3

.co

บริษัทหรือองค์กรพาณิชย์

.cn

จีน

.ac

สถาบันการศึกษา

.th

ไทย

.go

องค์กรรัฐบาล

.jp

ญี่ปุ่น

.or

องค์กรไม่แสวงผลกำไร

.au

ออสเตรเลีย

.net

องค์กรที่ให้บริการเครือข่าย

รายละเอียดเกี่ยวกับ  URL

                http://www.disney.com/Disneylnteractive/Hercules/index.html

     http://   คือ content identifier ส่วนที่แจ้งให้บราวเซอร์ทราบว่าต้องจัดการกับข้อมูลที่พบอย่างไร  สำหรับเว็บเพจใน world  wide  web  จะใช้โปรโตคอลมาตรฐาน

     WWW.Disney.com  คือ host  name  ส่วนที่ระบุชื่อของเว็บไซต์ที่ทำหน้าที่เผยแพร่
เว็บเพจ

     Disneyland  คือ ส่วนระบุตำแหน่ง  ระบุที่เก็บข้อมูลเว็บในเครื่อง

     index.HTML  คือ ชื่อไฟล์ข้อมูล  ส่วนสุดท้ายของ UPL เป็นชื่อไฟล์ข้อมูล

โปรแกรมที่ใช้สร้างเว็บเพจ

       ขึ้นอยู่กับรูปแบบของการสร้างเว็บเพจ  ดั้งนี้

                โปรแกรมที่ใช้เขียนโค้ตเว็บเพจด้วยภาษา  html

                                การเขียนภาษา  html  เพื่อสร้างเว็บเพจ  เพื่อให้เราสามารถเข้าใจโครงสร้างของภาษาและคำสั่ง จะนำไปสู่การเป็นนักพัฒนาเว็บต่อไป

                โปรแกรมที่ใช้สร้างเว็บเพจและจัดองค์ประกอบบนหน้าเว็บ

                                คือ Macro media  Dream weaver, Microsoft Front Page และ Net Objects  Fusion  เป็นต้น  เราจัดวางภาพ  หรือข้ความแบบไหน  โปรแกรมจะทำการเขียนโค้ด  html ให้อัตโนมัติ

หลักการออกแบบเว็บไซต์

                กำหนดขนาดของเว็บเพจ

                                1.ขนาดของเว็บไซต์แบบ 800x600 pixels ซึ่งเป็นขนาดมาตรฐานที่ใช้กับหน้าจอคอมพิวเตอร์ได้ทุกขนาด

                                2.ขนาดของเว็บไซต์แบบ1024x768pixels  การออกแบบและสร้างเว็บไซต์
                ออกแบบและสร้างเว็บเพ็จ  เป็นขั้นตอนการนำเอาข้อมูลทั้งหมดมาสร้างเป็นเว็บไซด์ด้วยภาษา  HTML  หรือ  เครื่องมือการสร้างเว็บอื่น ๆ  หลักสำคัญในการออกแบบและสร้างเว็บไซด์  คือ
     1.กำหนดจุดประสงค์ของเว็บไซด์  โดยวางเป้าหมายของผู้เข้าชมว่าจะเป็นกลุ่มใด  เช่น  เว็บไซด์ด้านการท่องเที่ยว  เว็บไซด์ด้านเผยแผ่ธรรมะ  เว็บไซด์ขายสินค้าโอทอป  เว็บไซด์ขายหนังสือเก่า  ฯลฯ  ซึ่งเว็บไซด์แต่ละประเภทจะมีกลุ่มคนที่สนใจอยู่กลุ่มหนึ่ง  ผู้สร้างเว็บไซด์ควรกำหนดลงไปให้ชัดเจนตั้งแต่แรกว่า  ผู้ชมกลุ่มเป้าหมายหลักเป็นใคร  จำนวนประมาณเท่าไร
     2.เลือกเว็บเบราว์เซอร์  เป็นการเลือกเว็บเบราว์เซอร์ที่ใช้แสดงผลเว็บไซด์  จะได้กำหนดขนาดกว้าง  ยาว  และลักษณะการวางองค์ประกอบเว็บให้สวยงาม  แสดงผลได้เร็ว
     3.วางโครงร่างของเว็บไซด์  กำหนดโครงร่างของเว็บไว้ว่าจะมีทั้งหมดกี่เว็บเพ็จ  แต่ละเว็บเพจมีเนื้อหาอะไรบ้าง  ควรเขียนเป็นแผนผังเว็บไซด์ออกมาบนกระดาษ
     4.ออกแบบหน้าตาของเว็บ  เป็นขั้นตอนการลงมือสร้างเว็บเพ็จแต่ละหน้าตามที่ได้ออกแบบไว้  พร้อมกับทดสอบผ่านเว็บเบราว์เซอร์  (แบบ offline   
การออกแบบและสร้างเว็บไซต์     ออกแบบและสร้างเว็บเพ็จ  เป็นขั้นตอนการนำเอา ข้อมูลทั้งหมดมาสร้างเป็นเว็บไซด์ด้วยภาษา  HTML  หรือ เครื่องมือการสร้างเว็บอื่น ๆ  หลักสำคัญในการออกแบบและสร้างเว็บไซด์  คือ 
     1.  กำหนดจุดประสงค์ของเว็บไซด์  โดยวางเป้าหมายของผู้เข้าชมว่าจะเป็นกลุ่มใด  เช่น  เว็บไซด์ด้านการท่องเที่ยว  เว็บไซด์ด้านเผยแผ่ธรรมะ  เว็บไซด์ ขายสินค้าโอทอป  เว็บไซด์ขายหนังสือเก่า  ฯลฯ  ซึ่งเว็บไซด์แต่ละประเภทจะมีกลุ่ม คนที่สนใจอยู่กลุ่มหนึ่ง  ผู้สร้างเว็บไซด์ควรกำหนด ลงไปให้ชัดเจนตั้งแต่แรกว่า  ผู้ชมกลุ่มเป้าหมาย หลักเป็นใคร  จำนวนประมาณเท่าไร 
     2.  เลือกเว็บเบราว์เซอร์  เป็นการเลือกเว็บเบราว์เซอร์ที่ใช้แสดงผลเว็บไซด์  จะได้กำหนดขนาดกว้าง  ยาว  และลักษณะการวางองค์ประกอบเว็บให้สวยงาม  แสดง ผลได้เร็ว 
     3.  วาง โครงร่างของเว็บไซด์  กำหนดโครงร่างของเว็บไว้ ว่าจะมีทั้งหมดกี่เว็บเพ็จ  แต่ละเว็บเจพมีเนื้อหา อะไรบ้าง  ควรเขียนเป็นแผนผังเว็บไซด์ออกมาบนกระดาษ 
     4.  ออกแบบหน้าตาของเว็บ  เป็นขั้นตอนการลงมือสร้างเว็บเพ็จแต่ละหน้าตามที่ได้ออกแบบไว้  พร้อมกับทดสอบผ่านเว็บเบราว์เซอร์  (แบบ

 

แบบฝึกหัดหลังเรียน

1.ความหมายของเว็บเพจตรงกับข้อใด

                ก.เป็นช่อง ทางเข้าเว็บเพจทั้งหมดภายในเว็บไซต์

                ข.กลุ่มของหน้าเว็บ หรือเว็บหลายๆหน้ารวมกัน

                ค.เอกสารที่ ใช้ในการเผยแพร่ข้อมูลข่าวสาร

                ง.เป็นที่เก็บเว็บเพจเมื่อต้องการเปิดดูเว็บเพจ

2.ประโยชน์ของเว็บเพจคือข้อใด

                ก.การแสดงผล ของเว็บเพจ

                ข.เอกสารที่ ใช้ในการเผยแพร่ข้อมูลข่าวสาร 
                ค.ประชา สัมพันธ์บริษัทและองค์กร
                ง.เป็นที่เก็บเว็บเพจ

3. .com เป็นตัวย่อขององค์กรใด

                ก.องค์กร รัฐบาล

      ข.สถาบันการศึกษา

                ค.บริษัท หรือองค์กรพาณิชย์

                ง.บริษัทหรือองค์กรทางธุรกิจ

4. .gov   เป็นตัวย่อขององค์กรใด

      ก.สถาบันการศึกษา

                ข.บริษัทหรือองค์กรพาณิชย์

                ค.องค์กร รัฐบาล

                ง.บริษัทหรือองค์กรทางธุรกิจ

5. บริษัทหรือองค์กรทางธุรกิจใช้ตัวย่อใด

                ก. .org

      ข. .imfo

                ค. .biz

                ง. .net

6. องค์กรที่ทำหน้าที่เป็นเกตเวย์ หรือจุดเชื่อมต่อเครือข่าย ใช้ตัวย่อใด

                ก..info
                ข..biz

      ค..net

                ง..org

7. Domain Name มีกี่ระดับ

                ก. 1 ระดับ

                ข. 2 ระดับ

                ค. 3ระดับ

                ง. 4ระดับ

8.การออกแบบโครงสร้างมีกี่รูปแบบ        
               ก. 1 รูปแบบ
               ข. 2รูปแบบ
               ค. 4รูปแบบ
               ง. 8รูปแบบ
9.โดเมนเนม  3 ระดับ  จะมีรูปแบบ เช่นไร
              ก.ส่วนที่ 2 หลังเครื่องหมายจุดใช้ระบุประเภทขององค์กร
              ข.คำย่อของประเภท องค์กร  ซึ่งคำย่อของประเภทองค์กรที่จะพบบ่อย
              ค.ส่วนที่ 2 หลังเครื่องหมายจุดใช้ระบุประเภทขององค์กร  และคำย่อส่วนที่  3  หลังเครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กร 
              ง.ส่วนที่  3  หลัง เครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กร
10.ออสเตรเลีย ใช้ตัวย่ออะไร
               ก..th
              ข..cn
              ค..au
              ง..jp