ค ำน ำค ำน ำ เอกสารประกอบการสอนว ชา...

ค ำน ำ เอกสารประกอบการสอนวชา การเขยนเวบไซต รหสวชา ง33203 ชนมธยมศกษาปท 6 มจ านวนทงหมด 7 เลม เลมท 1 เรอง ควำมรเบองตนเกยวกบกำรเขยนเวบเพจและภำษำHTML ซงไดจดท าขนตามหลกสตร การศกษาขนพนฐานพทธศกราช 2551 โดยท าความเขาใจหลกการจดมงหมาย มาตรฐานการเรยนร ตวชวด ศกษาแนวทางการจดการเรยนรโดยมเนอหาทสอดคลอง กบการเรยน ทยดหลกการแกปญหาเปนส าคญบนพนฐานการใชหลกการและทฤษฏเปนหลกตามทกษะขนตอนกระบวนการการท างาน ซงจะเปนคณสมบตตดตวผเรยนตลอดไป สามารถน าความรทไดมา ใชในชวตประจ าวนเกดทกษะกระบวนการ เกดความช านาญ

การจดท า เอกสารประกอบการสอนวชาการเขยนเวบไซต รหสวชา ง33203 เรอง ความรเบองตนเกยวกบการเขยนเวบเพจและภาษาHTML ชนมธยมศกษาปท 6 เลมน ผจดท า หวงเปนอยางยงวา จะเปนประโยชนตอนกเรยนและผสนใจ เพอน าไปสการพฒนาการเรยนการสอน ใหมประสทธภาพสงผล ถงคณภาพผเรยนในล าดบตอไป

นางจรภา ศรนวล ครช านาญการ

โรงเรยนทาเรอพทยาคม

ก

สำรบญ เรอง หนำ ค าน า ก สารบญ ข สารบญรปภาพ ค ค าแนะน าการใชเอกสารประกอบการสอนส าหรบครผสอน ง ค าแนะน าการใชเอกสารประกอบการสอนส าหรบนกเรยน จ จดประสงคการเรยนร ฉ สาระส าคญ ฉ มาตรฐานการเรยนร ฉ แบบทดสอบกอนเรยน 1 ความรเบองตนเกยวกบเวบเพจและภาษาHTML 5 กจกรรมท 1 17 กจกรรมท 2 18 กจกรรมท 3 19 แบบทดสอบหลงเรยน 20 บรรณานกรม 24 ภาคผนวก 25 เฉลยแบบทดสอบกอนเรยน 26 เฉลยแบบทดสอบหลงเรยน 27 เฉลยกจกรรมท 1 28 เฉลยกจกรรมท 2 29

เฉลยกจกรรมท 2 30

ข

สำรบญรปภำพ

หนำ

รปภำพท 1 แบบล าดบขน ( Hierarchy ) 7

รปภำพท 2 แบบเชงเสน ( Linear ) 8

รปภำพท 3 แบบผสม ( Combination ) 8

รปภำพท 4 ก าหนดโครงสรางของเอกสารHTML 10

รปภำพท 5 สวนหวของเอกสารเวบ 11

รปภำพท 6 การสรางเวบเพจเบองตน 12

รปภำพท 7 ก าหนดขอความและสวนหว 14

รปภำพท 8 การใสสพนหลงเอกสาร 15

รปภำพท 9 กจกรรมท 3 19

รปภำพท 10 เฉลยกจกรรมท 3 29

ค

ค ำแนะน ำกำรใชเอกสำรประกอบกำรสอนส ำหรบครผสอน

เอกสารประกอบการสอนวชา การเขยนเวบไซต รหสวชา ง33203 เรอง ความรเบองตนเกยวกบการเขยนเวบเพจและภาษาHTML ชนมธยมศกษาปท 6 ประกอบดวยเอกสารจ านวน 7 เลม เลมท 1 เรอง ความรเบองตนเกยวกบการเขยนเวบเพจและภาษาHTML เลมท 2 เรอง การก าหนดลกษณะและตวอกษร เลมท 3 เรอง การก าหนดหวขอ เลมท 4 เรอง การน าเสนอรปภาพ เลมท 5 เรอง การเชอมโยงเอกสาร เลมท 6 เรอง การสรางตาราง เลมท 7 เรอง การสรางเฟรม

ขอควรปฏบตในกำรใชเอกสำรประกอบกำรสอน

1. ครศกษาเอกสารประกอบการสอนและอานเนอหาสาระอยางรอบคอบพรอมทง ท าความเขาใจเนอหาทกเลม กอนการใชงาน

2. ครเตรยมเอกสารประกอบการสอนใหครบถวนเพยงพอกบจ านวนนกเรยน 3. ครเตรยมเครองมอวดผลประเมนผลเพอทราบความกาวหนาของนกเรยน 4. ครชแจงใหนกเรยนทราบล าดบขนตอนและวธการสอนโดยใชเอกสารประกอบ

การสอนอยางชดเจน และประโยชนทไดรบจากบทบาทของนกเรยนในการสอน โดยใชเอกสารประกอบการสอน

5. ครชแจงผลการเรยนรใหนกเรยนทราบ 6. ครด าเนนการสอนตามกจกรรมการเรยนรทก าหนดไวในแผนจดการเรยนร 7. ครใหนกเรยนท าแบบทดสอบกอนเรยน ศกษาเนอหาเอกสารประกอบการสอนและ

ท าแบบฝกหดทายเลม เพอประเมนความกาวหนา 8. ครสงเกตความตงใจของนกเรยน ความสนใจการเรยน ความรบผดชอบในการท างาน

ของนกเรยนอยางใกลชด

ง

ค ำแนะน ำกำรใชเอกสำรประกอบกำรสอนส ำหรบนกเรยน

เอกสารประกอบการสอนวชา การเขยนเวบไซต รหสวชา ง33203 เรอง ความรเบองตนเกยวกบการเขยนเวบเพจและภาษาHTML ชนมธยมศกษาปท 6 ประกอบดวยเอกสารจ านวน 7 เลม เลมท 1 เรอง ความรเบองตนเกยวกบการเขยนเวบเพจและภาษา HTML เลมท 2 เรอง การก าหนดลกษณะและตวอกษร เลมท 3 เรอง การก าหนดหวขอ เลมท 4 เรอง การน าเสนอรปภาพ เลมท 5 เรอง การเชอมโยงเอกสาร เลมท 6 เรอง การสรางตาราง เลมท 7 เรอง การสรางเฟรม

ขนตอนทนกเรยนตองปฏบตในกำรศกษำเอกสำรประกอบกำรสอน

นกเรยนตองท าแบบทดสอบวดผลสมฤทธทางการเรยนกอนเรยน จ านวน 60 ขอ เมอท าเสรจแลวบนทกผลคะแนนกอนทจะเรมศกษาเอกสารประกอบการสอนแตละเลม

ขอควรปฏบตในกำรใชเอกสำรประกอบกำรสอน

1. ศกษาท าความเขาใจ จดประสงคการเรยนรในแตละเรองใหครบถวน 2. ท าแบบทดสอบกอนเรยน 3. ศกษาเนอหาอยางละเอยด 4. ท ากจกรรมทก าหนด 5. ตอบค าถามลงในใบกจกรรม 6. รวมอภปรายกบเพอนในชนเรยน เพอสรปบทเรยน 7. ท าแบบทดสอบหลงเรยน

จ

เพอน ๆ อยาลมปฏบต

ตามค าแนะน า..นะคะ

เมอนกเรยนศกษาเอกสารประกอบการสอนครบทง 7 เลมแลว นกเรยนท าแบบทดสอบวดผลสมฤทธทางการเรยนหลงเรยนแลวบนทกผลคะแนน เพอเปรยบเทยบคะแนนวดผลสมฤทธทางการเรยนกอนเรยนและหลงเรยน

จดประสงคกำรเรยนร

1. นกเรยนมความรเบองตนเกยวกบการเขยนเวบเพจและภาษาHTML 2. นกเรยนสามารถอธบายเกยวกบหลกการออกแบบเวบเพจได 3. นกเรยนยอมรบความคดเหนของผอนน ามาปรบปรงอยเสมอ และมนสยรกการท างาน

สำระส ำคญ

กอนการสรางเวบเพจ ผทท าการสรางจะตองทราบเกยวกบการออกแบบเวบเพจเบองตน ความหมายของอนเตอรเนตเทคโนโลยเวบเพจ ความหมายของเวบไซต ความหมายของโฮมเพจ ความหมายของเวบเพจ ความหมายของเวบเบราวเซอร หลกการออกแบบเวบเพจ การจดเตรยมภาพทเกยวของกบเนอหาเวบ การใชโปรแกรมภาษาHTML โครงสรางของเอกสารHTML สวนของหวเรองของเอกสารเวบ การสรางเวบเพจเบองตน ค าสงเบองตนส าหรบการสรางเวบเพจ ค าสงเรมตน ค าสงก าหนดสวนหวของเอกสาร ค าสงก าหนดเนอหาเอกสารเวบ การก าหนดสของพนหลงและสของตวอกษร การก าหนดสพนหลงของเอกสาร ในโปรแกรมภาษาHTML

มำตรฐำนกำรเรยนร

มาตรฐาน ง 1.1 เขาใจการท างาน มความคดสรางสรรค มทกษะกระบวนการท างาน ทกษะ การจดการ ทกษะกระบวนการแกปญหา ทกษะการท างานรวมกนและทกษะการแสวงหาความร มคณธรรมและลกษณะนสยในการท างาน มจตส านกในการใชพลงงานทรพยากรและสงแวดลอม เพอการด ารงชวตและครอบครว

มาตรฐาน ง 3.1 เขาใจเหนคณคาและใชกระบวนการเทคโนโลยการสบคนขอมลการเรยนร การสอสารการแกปญหา การท างานและอาชพอยางมประสทธภาพ ประสทธผลและมคณธรรม

มาตรฐาน ง 4.1 เขาใจ มทกษะทจ าเปน มประสบการณ เหนแนวทางในงานอาชพ ใชเทคโนโลยเพอพฒนาอาชพ มคณธรรมและมเจตคตทดตออาชพ

ฉ

แบบทดสอบกอนเรยน

เรอง ควำมรเบองตนเกยวกบเวบเพจและภำษำHTML

ค ำชแจง : ขอสอบฉบบนเปนขอสอบปรนยแบบเลอกตอบ 4 ตวเลอกจ านวน 10 ขอ ค ำสง : ใหนกเรยนเขยนเครองหมาย X ทบขอ ก. ข. ค. หรอ ง. หนาค าตอบท

ถกทสดเพยงขอเดยว

1. อนเตอรเนต คออะไร ก. ระบบปฏบตการ ข. เครอขายการสอสารขอมลขนาดใหญ ค. ฮารดแวรคอมพวเตอร ง. ระบบสอสารขอมล

2. เวบเพจ ( Webpage) คอ ขอใด ก. เอกสารหนาแรก ข. เอกสารขอมลในแตละหนา ค. ทอยของเอกสาร ง. ทอยของหนาเวบเพจหลาย ๆหนาทมการเชอมโยงกน

3. เวบไซด (Web size) คอ ขอใด ก. เอกสารหนาแรก ข. เอกสารขอมลในแตละหนา ค. ทอยของเอกสาร ง. ทอยของหนาเวบเพจหลาย ๆหนาทมการเชอมโยงกน

4. โฮมเพจ ( Home Page ) คอ ขอใด ก. เอกสารหนาแรก ข. เอกสารขอมลในแตละหนา ค. ทอยของเอกสาร ง. ทอยของหนาเวบเพจหลาย ๆหนาทมการเชอมโยงกน

1

5. HTML ยอมาจากภาษาองกฤษวาอะไร ก. Home Text Markup Language ข. Home Taxt Mar Language ค. Homepage Markup Language ง. Homepage Taxt Mar Language

6. เวบเบราวเซอร (Web browser) คอ ขอใด ก. เครองมอในการใชอนเตอรเนต ข. โปรแกรมทท าหนาทส าหรบเปดเวบเพจ ค. เอกสารหนาแรก ง. การสอสารชนดหนง

7. ค าสงใด ก าหนดขอความในสวนหวของโปรแกรมเวบเบราวเซอร ก. <TITLE>…</TITLE> ข. <BODY>…</BODY> ค. <HTML>…</HTML> ง. <B>…</B>

8. ค าสงใด ก าหนดสของพนหลงเอกสาร ก. <TITLE> ข. <BODY> ค. <HTML> ง. <BGCOLOR>

9. โปรแกรมในขอใดใชสรางเวบเพจดวยภาษา HTML ก. ไมโครซอฟตเพาเวอรพอยท (Microsoft PowerPoint) ข. โนตแพด (Notepad) ค. ไมโครซอฟตวนโดวส (Microsoft Windows) ง. อนเทอรเนต เอกซโพลเรอร(Internet Explorer)

2

10. หลกการออกแบบเวบเพจ แบบผสม (Combination) คอ ขอใด ก. เปนการจดแสดงหนาเวบเรยงตามล าดบกงกาน แตกแขนงตอเนองไปเหมอนตนไม ข. เปนการจดแสดงหนาเวบเรยงตอเนองไปในทศทางเดยว ค. เปนการจดหนาเวบชนดผสมระหวางแบบล าดบขน และแบบเชงเสน ง. เปนการจดเรยงโดยไมมแบบแผน ตามแตความถนดของผใช

3

กระดำษค ำตอบ

เรอง ควำมรเบองตนเกยวกบเวบเพจและภำษำHTML

ชอ...............................................................เลขท.............ชนมธยมศกษาปท 6

แบบทดสอบกอนเรยน

ขอ ก ข ค ง 1 2 3 4 5 6 7 8 9 10

ตำรำงคะแนน

ท สรปผลกำรเรยน คะแนนเตม 10 1 แบบทดสอบกอนเรยน 2 แบบทดสอบหลงเรยน

4

วชา การเขยนเวบไซต

รหสวชา ง33202

เรอง ความรเบ องตนเกยวกบ

เวบเพจและภาษาHTML

ควำมรเบองตนเกยวกบเวบเพจและภำษำHTML

ควำมหมำยของอนเตอรเนต

อนเทอรเนต Internet) นนยอมาจาก ค าวา International network หรอ Inter Connection network หมายถง เครอขายคอมพวเตอรขนาดใหญทเชอมโยงเครอขายระบบคอมพวเตอรทวโลกเขาไวดวยกน โดยอาศยเครอขายโทรคมนาคมเปนตวเชอมโยงดวย TCP/IP (Transmission Control Protocol/Internet Protocol) เดยวกนเปนขอก าหนด เพอใหเกด การสอสารและการแลกเปลยนขอมลรวมกน วธการตดตอสอสารระหวางคอมพวเตอรในระบบเครอขาย ดวยโปรโตคอลนจะชวยใหคอมพวเตอรทมฮารดแวรทแตกตางกนสามารถตดตอถงกนได

ในสงคมยคขาวสารเชนปจจบนน แทบจะไมมใครไมเคยไดยนค าวาอนเตอรเนตเหตเพราะอนเตอรเนตไดกลายเปนสวนหนงในชวตประจ าวนของคนจ านวนมากในโลกนไปแลว ประมาณกนวา ในแตละวนมผคนมากกวา 50 ลานคน ในประเทศตางๆกวา 150 ประเทศทวโลกก าลงใชอนเตอรเนต กนอยอาจเปนนกศกษาคนหนงในประเทศออสเตรเลยทก าลงสบคนขอมลจากหองสมดแหงหนง ในประเทศองกฤษหรอเปนอาจารยมหาวทยาลยคนหนงในประเทศญปนก าลง สงซอหนงสอจากประเทศไทยเปนตน การประกอบกจกรรมตางๆในอนเตอรเนตดงทไดกลาวมาน เปนตวอยาง ทสะทอนใหเหนภาพของการสอสารทไรพรมแดนไดอยางชดเจน การใชอนเตอรเนตในปจจบนไดขยายวงกวางออกไปมากขน โดยไดกาวลวงเขาไปในทกสาขาอาชพไมไดจ ากดอยเฉพาะดานการศกษาหรอการวจยเหมอนเมอเรมมการใชอนเตอรเนตใหมๆ ดวยคณสมบตการเขาถงกลมเปาหมายจ านวนมากๆ ไดในเวลาอนรวดเรว และใชตนทนในการลงทนต าท าใหอนเตอรเนตเปนสงทพงปรารถนาขององคกรทงหลาย ไดมความพยายามน าอนเตอรเนตมาใชเพอประโยชนส าหรบหนวยงานของตนในรปแบบตางๆอาท การประชาสมพนธ องคกร การโฆษณาสนคา การคาขาย การตดตอสอสาร ฯลฯ นอกจากนอนเตอรเนตยงกลายเปนอกสอหนงของความบนเทงภายในครอบครวไปดวย ไมวาจะเปนการฟงวทย ดโทรทศน หรออานหนงสอพมพกตาม ลวนแลวแตสามารถกระท าผานอนเตอรเนตไดทงสน

เทคโนโลยเวบเพจ

การน าเสนอขอมลในระบบ WWW (World Wide Web) พฒนาขนมาในชวงปลายป 1989 โดยทม เบอรเนอร ล นกวศวกรรมซอฟตแวร จาก หองปฏบตการทางจลภาคฟสกสแหงยโรป หรอทรจกกนในนาม CERN (Conseil European pour la Recherche Nucleaire) ประเทศ

5

สวตเซอรแลนด และไดมการพฒนาภาษาทใชสนบสนน การเผยแพรเอกสาร ของนกวจย หรอเอกสารเวบ (Web Document) จากเครองแมขาย (Server) ไปยง สถานทตางๆ ในระบบ WWW เรยกวา ภาษาHTML (HyperText MarkupLanguage)

การเผยแพรขอมลทางอนเทอรเนต ผานสอประเภทเวบเพจ (WebPage) เปนทนยมกนอยางสงในปจจบน ไมเฉพาะขอมลโฆษณาสนคา ยงรวมไปถงขอมลทางการแพทย การเรยน งานวจยตางๆ เพราะเขาถงกลมผสนใจไดทวโลก ตลอดจนขอมลทน าเสนอออกไป สามารถเผยแพรไดทงขอมลตวอกษร ขอมลภาพ ขอมลเสยง และภาพเคลอนไหว มลกเลนและ เทคนคการน าเสนอทหลากหลาย อนสงผลใหระบบ WWW เตบโตเปนหนงในรปแบบบรการ ทไดรบความนยมสงสดของระบบอนเทอรเนต

ควำมหมำยของเวบไซต ( web site )

เวบไซต (องกฤษ: website, web site, Web site) หมายถง หนาเวบเพจหลายหนา ซงเชอมโยงกนผานทางไฮเปอรลงก สวนใหญจดท าขนเพอน าเสนอขอมลผานคอมพวเตอร โดยถกจดเกบไวในเวลดไวดเวบ หนาแรกของเวบไซตทเกบไวทชอหลกจะเรยกวา โฮมเพจ เวบไซตโดยทวไป จะใหบรการตอผใชฟร แตในขณะเดยวกนบางเวบไซตจ าเปนตองมการสมครสมาชกและเสยคาบรการเพอทจะดขอมลในเวบไซตนน ซงไดแก ขอมลทางวชาการ ขอมลตลาดหลกทรพย หรอขอมลสอตางๆ ผท าเวบไซตมหลากหลายระดบ ตงแตสรางเวบไซตสวนตว จนถงระดบเวบไซตส าหรบธรกจหรอองคกรตางๆ การเรยกดเวบไซตโดยทวไปนยมเรยกดผานซอฟตแวรในลกษณะของ เวบเบราวเซอร

ควำมหมำยของโฮมเพจ (Home page)

โฮมเพจ (Home Page) คอเวบเพจหนาแรกซงเปนทางเขาหลกของเวบไซต ปกตเวบเพจทกๆ หนาในเวบไซทจะถกลงค (โดยตรงหรอโดยออมกตาม) มาจากโฮมเพจ ดงนนบางครงจงมผใชค าวาโฮมเพจโดยหมายถงเวบไซททงหมด แตความจรงแลวโฮมเพจหมายถงหนาแรกเทานน ถาเปรยบกบรานคา โฮมเพจกเปนเสมอนหนารานนนเอง ดงนนจงมกถกออกแบบใหโดดเดนและนาสนใจมากทสด

ควำมหมำยของเวบเพจ (Web Page)

เวบเพจ (Web Page) หมายถง หนาเอกสารของบรการ WWW ซงตามปกตจะถกเกบอยในรปแบบไฟล HTML (Hyper Text Markup Language)โดยไฟล HTML 1 ไฟลกคอ เวบเพจ 1 หนานนเอง ภายในเวบเพจอาจประกอบไปดวยขอความ ภาพ เสยง วดโอ และภาพเคลอนไหวแบบมลตมเดย นอกจากนเวบเพจแตละหนาจะมการเชอมโยงหรอ “ลงค” (Link) กน เพอใหผชมเรยกดเอกสารหนาอนๆ ทเกยวของไดสะดวกอกดวย

6

แบบล ำดบขน ( Hierarchy ) เปนการจดแสดงหนาเวบเรยงตามล าดบกงกาน แตกแขนง

ตอเนองไปเหมอนตนไมกลบหว เหมาะส าหรบการน าเสนอขอมล ทมการแบงเปนหมวดหมทไมมากนก และมขอมลยอยไมลกมาก เชนเวบไซตแนะน า ประวตสวนตว ทมขอมล 4 - 5 หนาเปนตน

รปภำพท 1 แบบล าดบขน ( Hierarchy )

ควำมหมำยของเวบบรำวเซอร (Web browser)

เ ว บ เ บ ร า ว เ ซ อ ร ( Web browser) คอ ซอฟตแวรหรอรปแบบของเวบโปรแกรมคอมพวเตอรทใชในการเขาถงขอมลและตดตอสอสารกบระบบสารสนเทศทอยในเพจ ซงอยบนเครอขายคอมพวเตอรทชอวา World Wide Web (WWW)

หลกกำรออกแบบเวบเพจ

หลกการออกแบบเวบเพจ การออกแบบและพฒนา เวบเพจ สามารถท าไดหลายระบบ ขนอยกบลกษณะของขอมล ความชอบของผพฒนา ตลอดจนกลมเปาหมายทตองการน าเสนอ เชน หากกลมเปาหมายเปนเดกวยรน และน าเสนอ ขอมลเกยวกบความบนเทง อาจจะออกแบบใหมทศทางการไหลของหนาเวบทหลากหลาย ใชลกเลนไดมากกวาเวบ ทน าเสนอใหกบผใหญ หรอเวบดานวชาการ ทงนหลกการออกแบบเวบเพจ สามารถแบงไดสามลกษณะ คอ

7

เกรดความร ในปจจบนมโปรแกรมเวบเบราวเซอร (Web browser) ทนยมใชมากมาก เชน Firefox, Internet Explorer, Opera, Safari, Google chrome ลองเลอกใชกนดนะคะ

แบบเชงเสน (Linear) เปนการจดแสดงหนาเวบเรยงตอเนองไปในทศทางเดยวเหมาะส าหรบการน าเสนอ ขอมลทเปนรปภาพ เชนเวบไซตน าเสนอสไลดจาก Microsoft PowerPoint

รปภำพท 2 แบบเชงเสน ( Linear )

แบบผสม (Combination) เปนการจดหนาเวบชนดผสมระหวางแบบล าดบขน และแบบเชงเสน มกจะเปนแบบทนยม ใชกนอยางแพรหลายในปจจบน เนองจากสามารถควบคมการเสนอและการเรยกดไดสะดวก และรวดเรว

รปภำพท 3 แบบผสม (Combination)

กำรจดเตรยมภำพทเกยวของกบเนอหำเวบ

เอกสารเวบโดยทวไปแลวจะตองเกยวของกบรปภาพโดยตรง เพอใชในการสอสารความหมายกบผใชงาน ไดชดเจนมากกวาการสอความหมายดวยตวอกษรเพยงอยางเดยว อกทงเปน การดงดดความสนใจของผใชงาน ดงนนเมอท าการสรางรปภาพหรอจดหารปภาพเปนทเรยบรอยแลว ควรทจะท าการคดลอกมาเกบไวในโฟลเดอร ทไดจดเตรยมไว เพอใหสะดวกในการเรยกใชงานรปภาพนนและสะดวกตอการบรหารเวบไซตในอนาคต

แฟมขอมลรปภาพทน ามาใชในการท าเวบเพจนน ปจจบนนยมใชอย 2 รปแบบคอ - ไฟลฟอรแมต JPEG (Joint Photographer's Experts Group File) - ไฟลฟอรแมต GIF (Graphics Interlace File)

8

ควำมหมำยของภำษำHTML

ภาษาHTML ยอมาจาก เอชทเอมแอล (HTML,Myper Text Markup Language) เปนภาษาคอมพวเตอรรปแบบหนง ทมโครงสรางการเขยน โดยอาศยปายระบ (Tag) หรอค าสงส าหรบควบคมการแสดงผลขอความรปภาพ หรอวตถอนผานโปรแกรมเวบเบราวเซอร ซงปายระบหรอค าสง แตละค าสงนน อาจจะมสวนขยายทใชส าหรบบอกคณสมบตพเศษ ส าหรบระบหรอควบคมลกษณะ การแสดงผลเพมเตมได โดยแตละค าส งจะมแตกตางกนออกไปปายระบ (Tag) หรอค าส ง เปนลกษณะเฉพาะของภาษาHTML เปรยบเสมอนค าสงส าหรบก าหนดรปแบบ

การแสดงผล โดยปายระบหรอค าส งนน จะอยภายใต เครองหมายนอยกวา ( <) และเครองหมายมากกวา (>) โดยปายระบ หรอค าสงของภาษาHTML นนแบงเปน 2 ประเภทคอ

- ปายระบเดยว หมายถง ปายระบทเปนค าสงส าหรบควบคมการแสดงผล เชน ค าสงการขนบรรทดใหม <BR> เปนตน

- ปายระบเปด/ปด หมายถง ปายระบทเปนค าสงส าหรบการควบคมการแสดงผลเปนกลมเชนก าหนดใหกลมตวอกษรเปน ตวหนา <B> ...</B> หรอตวเอยง <I>....</I> เปนตน โดยใชเคร องหมายทบ (Slash) น าหน าค าส งท ต องการควบคมจะอย ระหว างป ายระบ เปด และ ปายระบปด ลกษณะพเศษ (Attributes) เปนสวนทจะท าหนาทขยายความสามารถของปายระบ (Tag) หรอค าสงโดยการบอกลกษณะ

พเศษในเครองมายมากกวา หรอ นอยกวา ในสวนของปายระบเปดหรอปายระบเดยว โดยค าสงของภาษาHTML แตละค าสงจะมการบอกลกษณะพเศษ ทแตกตางกน การระบลกษณะพเศษนนสามารถก าหนดไดมากกวา 1 ลกษณะ โดยใชชองวางเปนตวแยกแตละลกษณะพเศษ ตวอยาง เชน ลกษณะพเศษ ของปายระบ หรอค าสงทเกยวกบการจดยอหนา หรอค าสง <P> ประกอบดวยลกษณะพเศษดงน คอ

ALIGN = "Left/Right/Center/Justify" สามารถเขยนค าสงส าหรบการจดยอหนาไดดงน <P ALIGN = "Left"> การจดยอหนาชดซาย </P> <P ALIGN = "Right"> การจดยอหนาชดขวา </P> <P ALIGN = "Center"> การจดยอหนาใหอยกงกลางหนาเอกสาร </P>

9

โครงสรำงของเอกสำรHTML

โครงสรางของเอกสารHTML นนจะประกอบดวยสวนประกอบดวยสวนประกอบ 2 สวนคอ สวนหวของเอกสาร (Head Section) และสวนเนอหาของเอกสาร (Body Section) โดยสวนหวของเอกสารจะอยภายใตปายระบหรอค าสง <BODY>....</BODY> โดยทงสองสวนจะอยภายใน ปายระบหรอค าสง <HTML>…</HTML> ซงเปนสวนทใชส าหรบบอกวาเอกสารนเปนเอกสารHTML

รปภำพท 4 ก าหนดโครงสรางของเอกสารHTML

สวนหวเรองของเอกสำรเวบ

- META เปนสวนทไมปรากฏผลบนโปรแกรมเวบเบราวเซอร สวนนจะเปนสวนทใชใน การท าคลงบญชเวบเพจ ส าหรบใช ในการสบคนเวบเพจ (Search Engine) จากผอน - TITLE ใชส าหรบบอกชอเรองของเอกสารเวบ โดยขอความนจะปรากฏทแถวชอ ดานบนสดของโปรแกรมเวบเบราวเซอร โดยขอความนควรครอบคลมถงเนอหาทงหมดของเอกสารเวบ

สวนหวเรองของเอกสารเวบ(Head Section)เปนสวนทใชส าหรบการอธบายขอมลเฉพาะทเกยวกบเอกสารเวบนน เชนชอเรองของเอกสารเวบ (Title) ชอของผจดท าเวบ (Author)ค าส าคญหรอคยเวรด(Keyword)เพอใชส าหรบใหผใชงาน คนอนคนหาขอมลเกยวกบเวบเพจทไดท าการสรางขน บนระบบเครอขายอนเตอรเนต โดยปายระบ(Tag)หรอค าสงทส าคญ คอ

10

รปภำพท 5 สวนหวของเอกสารเวบ

การพมพชดค าสงของภาษาHTML สามารถใชตวอกษรพมพเลกและตวอกษรพมพใหญ หรอผสมกนทงสองแบบ และสามารถใชยอหนา เวนบรรทด หรอชองวางสามารถท าไดอยางอสระ โปรแกรมเวบเบราวเซอรจะไมสนใจ เกยวกบระยะเวนบรรทด ยอหนาหรอชองวาง แตจะเปนประโยชนส าหรบการอานค าสงของผสรางเอกสารเวบ และประโยชนท าการพฒนาเวบเพจ

สวนเนอหาเอกสาร (Body Section)เปนสวนเนอหาหลกของเอกสารเวบ โดยสวนนจะเปนสวนทน าไปแสดงผลบนโปรแกรมเวบเบราวเซอร ซงการแสดงผลนนจะใชปายระบหรอค าสง เปนตวควบคมรปแบบการแสดงผล ไมวาจะเปน ขอมลทเปนขอความ รปภาพ หรอ เสยง

การเขยนปายระบ (Tag) หรอค าสง จะไมมขอความจ ากดสามารถปอนค าสงตดกนหลายค าสงในหนงบรรทด หรอจะมเพยง 1 บรรทดตอ 1 ค าสงกได โดยทวไปแลวจะยดหลกการจดวางทท าใหผทสรางเอกสารเวบนนสามารถท าความเขาใจไดงาย เชนท าการจดยอหนาในชดค าสงทเกยวของกนใหอยในยอหนาระดบเดยวกน ซงค าสงทใชก าหนดรปแบบการแสดงผลทงหมด ทเปนสวนของเนอหาของเอกสารจะอยระหวางปายระบ (Tag)หรอค าสง <BODY>…</BODY> สามารถแบงกลมค าสงไดดงน - กลมค าสงการจดการยอหนา - กลมค าสงจดควบคมรปแบบตวอกษร - กลมค าสงการจดท าเอกสารแบบรายการ - กลมค าสงการเชอมโยงเอกสาร - กลมค าสงจดการรปภาพ - กลมค าสงจดการตาราง

11

- กลมค าสงการแบงสวนของเอกสาร - กลมค าสงอน ๆ

กำรสรำงเอกสำรเวบเพจเบองตน

ขนตอนแรกในการสรางเอกสารเวบ คอ การรางเนอหาทประกอบอยภายในของเอกสารเวบและจดแบงขอมลออกเปนสวน โดยแบงเปนหนาคลายกบหนากระดาษของหนงสอ ซงจ านวนของขอมลในเอกสารแตละหนาของเอกสารเวบ ไมควรมขนาดใหญมากนก เพราะจะท าใหขนาดของ เอกสารเวบทเปนแฟมขอมลภาษาHTML นนมขนาดใหญ ซงจะท าใหเวลาส าหรบการดงเอกสารเวบเพจ จากระบบเครอขายเพอมาแสดงผลบนโปรแกรมเวบเบราวเซอร ใชเวลามาก และเอกสารเวบเพจ ทมขอมลเปนจ านวนมากในแตละหนาของเอกสาร จะท าใหไมสามารถแสดงผลขอมล ทงหมด ในหนาเดยว ซงจะตองใชแถบเลอนส าหรบดขอมลของเอกสารเวบในสวนทเลอกซงอาจท าใหผทเปดดเอกสารเวบเพจรสกไมสะดวกในการดเอกสารเวบ โดยเอกสารเวบเพจทดควรแบงเนอหาในแตละหนาให เหมาะสมกบการใชงาน

รปภำพท 6 การสรางเวบเพจเบองตน

เมน (หนำหลก) Index html

ควำมเปนมำของระบบ

คอมพวเตอร History

ระบบฮำรดแวร Hardware html

ระบบซอฟตแวร Software html

บคลำกรทำงดำนคอมพวเตอร ppl html

อปกรณอนพต Input html

อปกรณเอำทพท

Output html

ระบบปฏบตกำร OS html

โปรแกรมประยกต

Application

12

ค ำสงเบองตนส ำหรบกำรสรำงเวบเพจ

ค ำสงเรมตน

ค าสงเรมตนทบอกวาเอกสารนน คอเอกสารเวบทเปนภาษาHTML คอค าสง <HTML> และใชค าสง </HTML> เปนการบอกจดสนสดของเอกสารHTML โดยค าสงนจะไมแสดงผลในโปรแกรมเวบเบราวเซอรแตเขยนเพอบอกใหทราบวาเอกสารนเปนเอกสารของภาษาHTML กลาวคอขอความ ทอยระหวางค าสง <HTML> และ</HTML>เปนเอกสารทเปนเอกสารภาษาHTML นนเอง

ค ำสงก ำหนดสวนหวของเอกสำรเวบ

ดงทกลาวมาเอกสารHTMLนน แบงออกเปน 2 สวน คอสวนเรองของเอกสารเวบและสวนเนอหาของเอกสารเวบ โดยค าสงทใชบอกหวเรองของเอกสารเวบนน คอค าส ง <HEAD>..</HEAD> ซงค าสงทอยภายในสวนหวของเอกสารเวบนน เปนค าสงทใชก าหนดขอความทใชเปนชอเรองของเอกสารHTML และค าสงทใชส าหรบบอกค าส าคญ (Kryword) ของเอกสารHTML เพอใชในการคนหาเอกสารนนบนระบบเครอขายอนเทอรเนต

ค ำสงก ำหนดขอควำมในสวนหวของโปรแกรมเวบเบรำวเซอร

ค าสงทใชส าหรบก าหนดขอความทจะปรากฏบนหวของโปรแกรมเวบเบราวเซอร คอค าสง <TITLE>...</TITLE> หากตองการใหขอความใดปรากฏทต าแหนงสวนหวของโปรแกรมเวบเบราวเซอร ท าไดโดยเอาขอความทตองการแสดงผลนนใสเขาไประหวางค าสงเปด <TITLE> และค าสงปด </TITLE> ซงค าสงนจะอยในสวนหวของเอกสารเวบ

ค ำสงก ำหนดสวนเนอหำเอกสำรเวบ

ค าสงทใชก าหนดสวนเปนเนอหาของเอกสารเวบคอ ค าสง <BODY>...</BODY>ซงใชเปนค าสงส าหรบบอกแกโปรแกรมเวบเบราวเซอรวา สวนทอยระหวางค าสงนเปนสวนทจะน าไปแสดงผล บนโปรแกรมเวบเบราวเซอร ซงประกอบไปดวย ตวอกษร รปภาพ เปนตน

<HEAD> ค ำสงยอยส ำหรบสวนหวของเอกสำร </HEAD>

<TITLE> ขอควำมทตองกำรใหปรำกฏทสวนหวของโปรแกรมเวบเบรำวเซอร </TITLE>

<BODY> เนอหำ </BODY>

13

รปภำพท 7 ก าหนดขอความและสวนหว

กำรก ำหนดสของพนหลงและสของตวอกษร

การก าหนดสพนหลงและการก าหนดสของตวอกษรของเอกสารเวบนน สามารถท าไดโดยก าหนดเปนการอธบาย ลกษณะพเศษ (Attribute) ของค าสง <BODY> โดยมวธการก าหนดสของ พนหลงของเอกสารและสของตวอกษรในเอกสาร ไดดงน

กำรก ำหนดสของพนหลงเอกสำร

การก าหนดสพนหลงของเอกสารเวบหรอเอกสารHTML นนสามารถท าไดโดยใช การอธบายลกษณะพเศษ (Attribute) คอBGCOLOR ซงการก าหนดสพนของเอกสารHTMLนน สามารถก าหนดภายใตค าสงเปดของค าสง <BODY> โดยการก าหนดสของพนหลงของเอกสารHTMLสามารถแสดงไดดงน

<BODY BGCOLOR=สทตองกำร> จะม “สตองกำร. หรอไมมเครองหมำย “ ” กได ……. </BODY>

14

รปภำพท 8 การใสสพนหลงเอกสาร

ตวอยำง ตารางชอสและรหสส

ทมำ อำงองจำก https://sites.google.com/site/easyhtmllanguage/tarang-rhas-si-thi-chi-ni-phasa-html

15

ทมำ อำงองจำก http//school.obec.go.th/shanikarn/e_learning/HTML/ColorName_Code.htm#ColorName

16

กจกรรมท 1

ค ำชแจง : ใหนกเรยนศกษาเนอหา เรอง ความรเบองตนเกยวกบเวบเพจและภาษาHTML

1. จงบอกความหมายของค าวาอนเตอรเนต

2. จงอธบายค าวาเทคโนโลยเวบเพจ

3. จงบอกความหมายของค าวา เวบเพจ

4. เวบเบราวเซอร คอ อะไร

5. จงอธบายหลกการออกแบบ มกขนตอน อะไรบาง

17

กจกรรมท 2

ค ำชแจง : ใหนกเรยนเขยนเครองหมาย (ถก) หนาขอทถกและเขยนเครองหมาย (ผด) หนาขอทผด

................1 อนเตอรเนต มาจากค าวาInternational Network เปนเครอขายของการสอสารขอมล ขนาดใหญ ................2 เทคโนโลยเวบเพจ การน าเสนอขอมลในระบบ WWW (World Wide Web) พฒนา

ขนมาในชวงปลายป 1989 ................3 เอชทเอมแอล (HTML) เปนภาษาคอมพวเตอรทใชสรางเวบเพจ ยอมาจาก

Hyperpage Mar Language ................4 เวบเพจ (Web page) หมายถง หนาเวบเพจหลายหนา ซงเชอมโยงกนผานทาง

ไฮเปอรลงก ................5 โฮมเพจ (Home Page) คอเวบเพจหนาแรกซงเปนทางเขาหลกของเวบไซต ................6 เวบไซต (Web site) หมายถง หนาเอกสารของบรการ WWW ซงตามปกตจะถกเกบ

อยในรปแบบไฟล HTML ................7 หลกการออกแบบเวบเพจ แบบล าดบขน ( Hierarchy ) เปนการจดแสดงหนาเวบเรยง

ตามล าดบกงกาน แตกแขนงตอเนองไปเหมอนตนไมกลบหว ................8 ค าสง <BODY> ใชส าหรบใสสพนหลง ................9 ค าสง <TITLE>…</TITLE> ก าหนดขอความในสวนหวของโปรแกรมเวบเบราวเซอร ................10 การเขยนเวบเพจ โปรแกรมภาษาHTML ขอมลรปภาพสามารถใชไดแคนามสกล

.JPG และ .GIF เทานน

18

กจกรรมท 3

ค ำชแจง : จงเขยนเวบเพจดวยภาษาHTML เพอแสดงผลลพธตามค าสงทก าหนดให ค ำสง : ใหนกเรยน บนทกชอไฟลชอ T1.html ก าหนดหวเวบชอ ภาษาHTML และใสขอความ วชำกำรเขยนเวบไซต รหสวชำ ง33203 โปรแกรมภำษำHTML ในเวบเพจ

รปภำพท 9 กจกรรมท 3

19

แบบทดสอบหลงเรยน

เรอง ควำมรเบองตนเกยวกบเวบเพจและภำษำHTML

ค ำชแจง : ขอสอบฉบบนเปนขอสอบปรนยแบบเลอกตอบ 4 ตวเลอกจ านวน 10 ขอ ค ำสง : ใหนกเรยนเขยนเครองหมาย X ทบขอ ก. ข. ค. หรอ ง. หนาค าตอบท

ถกทสดเพยงขอเดยว

1. เวบเพจ ( Webpage) คอ ขอใด ก. เอกสารหนาแรก ข. เอกสารขอมลในแตละหนา ค. ทอยของเอกสาร ง. ทอยของหนาเวบเพจหลาย ๆหนาทมการเชอมโยงกน

2. อนเตอรเนต คออะไร ก. ระบบปฏบตการ ข. เครอขายการสอสารขอมลขนาดใหญ ค. ฮารดแวรคอมพวเตอร ง. ระบบสอสารขอมล

3. HTML ยอมาจากภาษาองกฤษวาอะไร ก. Home Text Markup Language ข. Home Taxt Mar Language ค. Homepage Markup Language ง. Homepage Taxt Mar Language

4. เวบไซด (Web size) คอ ขอใด ก. เอกสารหนาแรก ข. เอกสารขอมลในแตละหนา ค. ทอยของเอกสาร ง. ทอยของหนาเวบเพจหลาย ๆหนาทมการเชอมโยงกน

20

5. เวบบราวเซอร (Web browser) คอ ขอใด ก. เครองมอในการใชอนเตอรเนต ข. โปรแกรมทท าหนาทส าหรบเปดเวบเพจ ค. เอกสารหนาแรก ง. การสอสารชนดหนง

6. หลกการออกแบบเวบเพจ แบบผสม ( Combination ) คอ ขอใด ก. เปนการจดแสดงหนาเวบเรยงตามล าดบกงกาน แตกแขนงตอเนองไปเหมอนตนไม ข. เปนการจดแสดงหนาเวบเรยงตอเนองไปในทศทางเดยว ค. เปนการจดหนาเวบชนดผสมระหวางแบบล าดบขน และแบบเชงเสน ง. เปนการจดเรยงโดยไมมแบบแผน ตามแตความถนดของผใช

7. ค าสงใด ก าหนดขอความในสวนหวของโปรแกรมเวบเบราวเซอร ก. <TITLE>…</TITLE> ข. <BODY>…</BODY> ค. <HTML>…</HTML> ง. <B>…</B>

8. ค าสงใดก าหนดสของพนหลงเอกสาร ก. <TITLE> ข. <BODY> ค. <HTME> ง. <BGCOLOR>

9. โฮมเพจ ( Home Page ) คอ ขอใด ก. เอกสารหนาแรก ข. เอกสารขอมลในแตละหนา ค. ทอยของเอกสาร ง. ทอยของหนาเวบเพจหลาย ๆหนาทมการเชอมโยงกน

21

10. โปรแกรมในขอใดใชสรางเวบเพจดวย ภาษาHTML ก. ไมโครซอฟตเพาเวอรพอยท (Microsoft PowerPoint) ข. โนตแพด(Notepad) ค. ไมโครซอฟตวนโดวส(Microsoft Windows) ง. อนเทอรเนต เอกซโพลเรอร(Internet Explorer)

22

กระดำษค ำตอบ

เรอง ควำมรเบองตนเกยวกบเวบเพจและภำษำHTML

ชอ...............................................................เลขท.............ชนมธยมศกษาปท 6

แบบทดสอบกอนเรยน

ขอ ก ข ค ง 1 2 3 4 5 6 7 8 9 10

ตำรำงคะแนน

ท สรปผลกำรเรยน คะแนนเตม 10 1 แบบทดสอบกอนเรยน 2 แบบทดสอบหลงเรยน

23

บรรณำนกรม

กระทรวงศกษาธการ. (2552). หลกสตรแกนกลำงกำรศกษำขนพนฐำน พทธศกรำช 2551. กรงเทพฯ: ชมนมสหกรณการเกษตรแหงประเทศไทย จ ากด. กตต ภกดวฒนะกล. (2540). สรำง Web แบบมออำชพดวย HTML. กรงเทพฯ: หจก.ไทยเจรยการพมพ. ณชพงศ อทอง. (2548). กำรสรำงเวบเพจ(ภำษำ HRTML). กรงเทพฯ: บรษท ส านกพมพ เอกพน จ ากด. ฝายต าราวชาการคอมพวเตอร. (2555). กำรสรำงเวบเพจ (HTML). กรงเทพฯ: ซเอดยเคชน. ภญญ ก าเนดหลม. (2546). เขยนเวบเพจ ดวย HTML. กรงเทพฯ: บรษท บคเซนเตอร จ ากด. สคนธ สนธพานนท. (2553). นวตกรรมกำรเรยนกำรสอนเพอพฒนำคณภำพของเยำวชน. กรงเทพฯ: หางหนสวนจ ากด 9119 เทคนคพรนตง. ส านกวชาการและมาตรฐานการศกษา. ส านกวชาการและมาตรฐานการศกษา,กระทรวงศกษาธการ. (2551). ตวชวดและกลมสำระ กำรเรยนรแกนกลำง กลมสำระกำรเรยนรกำรงำนอำชพและเทคโนโลย ตำมหลกสตร แกนกลำงกำรศกษำขนพนฐำน พทธศกรำช 2551. กรงเทพฯ: ชมนมสหกรณการเกษตร แหงประเทศไทย จ ากด. Code ส HTML. [ออนไลน]. https://sites.google.com/site/easyhtmllanguage/tarang-rhas-si-thi-chi-ni-

phasa-html สบคนเมอวนท 11 มกราคม 2557. HTML color. [ออนไลน]. http//school.obec.go.th/shanikarn/e_learning/HTML/

ColorName_Code.htm#ColorName สบคนเมอวนท 11 มกราคม 2557.

24

ภำคผนวก

25

เฉลยแบบทดสอบกอนเรยน

ขอ 1 ข

ขอ 6 ข

ขอ 2

ข ขอ 7 ก

ขอ 3

ง ขอ 8 ง

ขอ 4

ก ขอ 9 ข

ขอ 5

ก ขอ 10 ค

26

เฉลยแบบทดสอบหลงเรยน

ขอ 1 ข

ขอ 6 ค

ขอ 2

ข ขอ 7 ก

ขอ 3

ก ขอ 8 ง

ขอ 4

ง ขอ 9 ก

ขอ 5

ข ขอ 10 ข

27

เฉลยกจกรรมท 1

ค ำชแจง : ใหนกเรยนศกษาเนอหา เรอง ความรพนฐานเกยวกบเวบเพจและการออกแบบ เวบเพจเบองตน

1. จงบอกความหมายของค าวาอนเตอรเนต อนเตอรเนต มาจากค าวา International Network เปนเครอขายของการสอสารขอมลขนาดใหญ อนประกอบดวย เครอขายคอมพวเตอรจ านวนมาก เชอมโยงแหลงขอมลจากองคกรตางๆ ทวโลกเขาดวยกน

2. จงอธบายค าวาเทคโนโลยเวบเพจ การน าเสนอขอมลในระบบ WWW (World Wide Web) พฒนาขนมาในชวงปลายป 1989 โดยทม เบอรเนอร ล นกวศวกรรมซอฟตแวร จาก หองปฏบตการทางจลภาคฟสกสแหงยโรป (EuropeanParticle Physics Labs) หรอทรจกกน ในนาม CERN (Conseil European pour la Recherche Nucleaire)

3. จงบอกความหมายของค าวา เวบเพจ เวบเพจ (Web Page) หมายถง หนาเอกสารของบรการ WWW ซงตามปกตจะถกเกบอยในรปแบบไฟล HTML (Hyper Text Markup Language) โดยไฟล HTML 1 ไฟลกคอเวบเพจ 1 หนานนเอง ภายในเวบเพจอาจประกอบไปดวยขอความ ภาพ เสยง วดโอ และภาพเคลอนไหวแบบมลตมเดย

4. เวบเบราวเซอร คอ อะไร ซอฟตแวรหรอโปรแกรมคอมพวเตอรทใชในการเขาถงขอมลและตดตอสอ สารกบระบบสารสนเทศทอยในรปแบบของเวบเพจ ซงอยบนเครอขายคอมพวเตอรทชอวา World Wide Web (WWW)

5. จงอธบายหลกการออกแบบ มกขนตอน อะไรบาง ม 3 ขนตอน - แบบล าดบขน ( Hierarchy)

. - แบบเชงเสน ( Linear ) . - แบบผสม ( Combination )

28

เฉลยกจกรรมท 2

ค ำชแจง : ใหนกเรยนเขยนเครองหมาย (ถก) หนาขอทถกและเขยนเครองหมาย (ผด) หนาขอทผด

............ ....1 อนเตอรเนต มาจากค าวาInternational Network เปนเครอขายของการสอสาร ขอมลขนาดใหญ ................2 เทคโนโลยเวบเพจ การน าเสนอขอมลในระบบ WWW (World Wide Web)

พฒนาขนมาในชวงปลายป 1989 ................3 เอชทเอมแอล (HTML) เปนภาษาคอมพวเตอรทใชสรางเวบเพจ ยอมาจาก

Hyperpage Mar Language ................4 เวบเพจ (Web page) หมายถง หนาเวบเพจหลายหนา ซงเชอมโยงกนผานทาง

ไฮเปอรลงก ................5 โฮมเพจ (Home Page) คอเวบเพจหนาแรกซงเปนทางเขาหลกของเวบไซต ................6 เวบไซต (Web site) หมายถง หนาเอกสารของบรการ WWW ซงตามปกตจะถกเกบ

อยในรปแบบไฟล HTML ................7 หลกการออกแบบเวบเพจ แบบล าดบขน ( Hierarchy ) เปนการจดแสดงหนาเวบเรยง

ตามล าดบกงกาน แตกแขนงตอเนองไปเหมอนตนไมกลบหว ................8 ค าสง <BODY> ใชส าหรบใสสพนหลง ................9 ค าสง <TITLE>…</TITLE> ก าหนดขอความในสวนหวของโปรแกรมเวบเบราวเซอร ................10 การเขยนเวบเพจ โปรแกรมภาษา HTML ขอมลรปภาพสามารถใชไดแคนามสกล

.JPG และ .GIF เทานน

29

เฉลยกจกรรมท 3

ค ำชแจง : จงเขยนเวบเพจดวยภาษาHTML เพอแสดงผลลพธตามค าสงทก าหนดให ค ำสง : ใหนกเรยน บนทกชอไฟลชอ T1.HTML ก าหนดหวเวบชอ ภำษำHTML และใสขอความ วชำกำรเขยนเวบไซต รหสวชำ ง33203โปรแกรมภำษำHTML ในเวบเพจ

รปภำพท 11 เฉลยกจกรรมท 3

30