โครงงานคอมพวเตอร เรอง สอเวปไซตเพอการศกษาอาเซยน

โดย

นางสาว ณชชาภรณ อรญวงศ เลขท 22

ชนมธยมศกษาปท 5/2

เสนอ คณคร

โรงเรยนก าแพงเพชรพทยาคม

รายงานฉบบนเปนสวนประกอบ ของโครงงาน

คอมพวเตอร

โครงงาน เรอง เวปไซตเพอการศกษาอาเซยน ประเภทของโครงงาน โครงงานพฒนาสอเพอการศกษา ผจดทาโครงงาน นางสาว ณชชาภรณ อรญวงศ ปการศกษา 2556

บทคดยอ การจดท าโครงงานในครงนมวตถประสงค เพอ ใหความรแกผทสนใจเกยวกบประชาคม

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

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

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

กตตกรรมประกาศ โครงงานฉบบนส าเรจไดดวยความกรณาของคณะผบรหารและคณะอาจารยหมวด

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

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

นางสาว ณชชาภรณ อรญวงศ

ผจดท าโครงงาน

สารบญ หนา

บทคดยอ กตตกรรมประกาศ สารบญ บทท 1. บทน า 1.1 ทมาและความส าคญของโครงงาน 1.2 วตถประสงค 1.3 ขอบเขตของโครงงาน 1.4 เครองมอทใชในการพฒนา 1.5 ประโยชนทคาดวาจะไดรบ 2. หลกการและทฤษฎ 2.1 ประชาคมอาเซยน 2.2 ภาษา HTML 3. วธด าเนนการ 3.1 ขนตอนการด าเนนการ 3.2 ระยะเวลาด าเนนการ 3.3 งบประมาณ 3.4 แนวทางการด าเนนงาน 4. ผลการศกษา 4.1 ตวอยางหนาเวปไซต 5.สรปผลและขอเสนอแนะ 5.1 สรปผล 5.2 ขอเสนอแนะ 5.3 ปญหาและอปสรรค บรรณานกรม

บทท 1 บทน า

1.1 ทมาและความส าคญของโครงงาน

ปจจบนนสถานการณโลกเปลยนแปลงไปอยางรวดเรว ประเทศตาง ๆ ใหความส าคญกบการรวมตวกนในภมภาคเพอเพมอ านาจตอรองและเพมขดความสามารถในการแขงขนระหวางประเทศ อาเซยนจงตองปรบตวใหเทาทนสถานการณเพอใหสามารถรบมอกบความเปลยนแปลงตาง ๆ ทเกดขนได

เอเชยตะวนออกเฉยงใต จงก าหนดใหมการสรางประชาคมอาเซยนขนมาทประกอบไปดวย 3 เสาหลก ไดแก ประชาคมการเมองความมนคงอาเซยน ประชาคมเศรษฐกจอาเซยน และประชาคมสงคมและวฒนธรรมอาเซยน ภายในป 2563 ซงตอมาไดเลอนก าหนดเวลาสาหรบการรวมตวกนใหเรวขนเปนป 2558 ประเทศไทยเปนหนงในประเทศสมาชกประชาคมอาเซยน เพอเปนการเตรยมความพรอมในการกาวสประชาคมอาเซยนทสงผลตอดานเศรษฐกจ ดานการเมอง วฒนธรรม และ ความมนคง

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

1.2 วตถประสงค

1. เพอจดท าสอทใหความรแกผทสนใจเกยวกบประชาคมอาเซยน 2. เพอใหผจดท าไดฝกฝนการเขยนเวปไซตดวยภาษา HTML

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

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

1.4 เครองมอทใชในการพฒนา

คอมพวเตอรทสามารถเชอมตอเครอขายอนเตอรเนตได CPU :: ทมความเรว 1 GHz (ทงแบบ 32 และ 64-bit) เปนอยางต า Ram :: Ram 1 GB (ส าหรบ 32-bit) และ Ram 2 GB (ส าหรบ 64-bit) เปนอยางต า พนทวางของ Harddisk :: ไมนอยกวา 16 GB (ส าหรบ 32-bit) และ 20 GB (ส าหรบ 64-bit) Program :: โปรแกรมแกไขขอความ (Text Editor) Notepad (หรอโปรแกรมเขยนเวปอนๆ) Web Browser :: IE (หรอเบราเซอรอนๆ)

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

บทท 2 หลกการและทฤษฎ

ในการจดท าโครงงานคอมพวเตอร เวปไซตเพอการศกษาอาเซยน ใหความรเกยวกบประชาคม

อาเซยน ผจดท าไดศกษาขอมล เอกสารทเกยวของ ดงน 2.1 ประชาคมอาเซยน 2.2 ภาษา HTML

2.1 ประชาคมอาเซยน ประชาคมอาเซยน หรอ สมาคมประชาชาตแหงเอเชยตะวนออกเฉยงใต (Association of South East Asian Nations : ASEAN) เปนองคกรระหวางประเทศระดบภมภาคเอเชยตะวนออกเฉยงใต มจดเรมตนโดยประเทศไทย มาเลเซย และฟลปปนส ไดรวมกนจดตง สมาคมอาสา (Association of South East Asia) เมอเดอน ก.ค.2504 เพอการรวมมอกนทาง เศรษฐกจ สงคมและวฒนธรรม แตด าเนนการไปไดเพยง 2 ป กตองหยดชะงกลง เนองจากความผกผนทางการเมองระหวางประเทศอนโดนเซยและประเทศมาเลเซย จนเมอมการฟนฟสมพนธทางการฑตระหวางสองประเทศ จงไดมการแสวงหาหนทางความรวมมอกนอกครง แตหากทานหมายถง “AEC ประชาคมเศรษฐกจอาเซยน”

สมาคมประชาชาตแหงเอเชยตะวนออกเฉยงใต จงกอตงขนเมอวนท 8 ส.ค.2510 หลงจากการลงนามในปฎญญาสมาคมประชาชาตแหงเอเชยตะวนออกเฉยงใต (Declaration of ASEAN Concord) หรอเปนทรจกกนในอกชอหนงวา ปฏญญากรงเทพ (The Bangkok Declaration) โดยสมาชกผกอตงม 5 ประเทศ ไดแก อนโดนเซย ฟลปปนส สงคโปร และไทย ซงผแทนทง 5 ประเทศทรวมลงนามในปฏญญากรงเทพ ประกอบดวย 1.นายอาดม มาลก รฐมนตรตางประเทศอนโดนเซย 2.ตน อบดล ราชก บน ฮสเซน รองนายกรฐมนตร รฐมนตรกลาโหมและรฐมนตรกระทรวงพฒนาการแหงชาตมาเลเซย 3.นายนาซโซ รามอส รฐมนตรตางประเทศฟลปปนส 4.นายเอส ราชารตนม รฐมนตรตางประเทศสงคโปร 5.พนเอก (พเศษ) ถนด คอมนตร รฐมนตรวาการกระทรวงการตางประเทศ จากประเทศไทย

หลงจากจดตง ประชาคมอวเซยนเมอ 8 ส.ค.2510 แลว อาเซยนไดเปดรบสมาชกใหมจากประเทศในภมภาคเอเชยตะวนออกเฉยงใตเพมเตมเปนระยะ ตามล าดบไดแก

-บรไนดารสซาลาม เขาเปนสมาชกเมอ 8 มกราคม 2527 -สาธารณรฐสงคมนยมเวยดนาม เขาเปนสมาชกเมอ 28 กรกฏาคม 2538 -สาธารณรฐประชาธปไตยประชาชนลาว เขาเปนสมาชกเมอ 23 กรกฎาคม 2540

-สหภาพพมา เขาเปนสมาชกเมอ 23 กรกฏาคม 2540 -ราชอาณาจกรกมพชา เขาเปนสมาชกเมอ 30 เมษายน 2542

วตถประสงคในการกอตงประชาคมอาเซยน ประชาคมอาเซยน กอตงขนโดยมวตถประสงคเรมแรกเพอสรางสนตภาพในภมภาคเอเชยตะวนออกเฉยงใต อนน ามาซงเสถยรภาพทางการเมอง และความเจรญกาวหนาทางเศรษฐกจ สงคม และวฒนธรรม และเมอการคาระหวางประเทศในโลกมแนวโนมกดกนการคารนแรงขน ท าใหอาเซยนไดหนมามงเนนกระชบและขยายความรวมมอดานเศรษฐกจการคาระหวางกนมากขน วตถประสงคหลกทก าหนดไวในปฏญญาอาเซยน (The ASEAN Declaration) ม 7 ประการ ดงน

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

2.2 ภาษา HTML HTML ยอมาจากค าวา Hypertext Markup Language พฒนามาจากภาษา SGML (Standard

Generalized Markup Language) โดย นาย Tim Berners - Lee เปนภาษามาตรฐานทใชพฒนาเอกสารในรปแบบของเวบเพจบนระบบเครอขายอนเทอรเนต การเรยกใชเอกสารเหลานท าไดโดยการใชโปรแกรมเวบบราวเซอร (Web Browser) เชน Mosaic , Opera , Nescape navigator , Internet Explorer ฯลฯ เรยกดแฟมทสรางดวยภาษา HTML ขอดของ HTML คอสามารถใชไดกบเครองคอมพวเตอร และระบบปฏบตการไดหลากหลายชนด

แฟมขอมลทเขยนดวยภาษา HTML นนจะมการน าค าสง HTML ทเรยกวา แทก (Tag) มาก าหนดลกษณะและรปแบบของเอกสารทแสดงบนจอภาพ แทก (Tag) ประกอบดวย เครองหมายนอยกวา (<) ตามดวยชอแทก ปดทายดวยเครองหมายมากกวา (>) เชน <HTML>, <HEAD>, <BODY> ชอแทกนนอาจจะเปนตวเลกหรอตวใหญกได แทกในภาษา HTML สามารถแบงออกไดเปนสองชนดเดยวคอ แทกทประกอบดวยแทกเปดและแทกปด เชน <HTML> เปนแทกเปด สวน</ HTML> เปนแทกปด แทกทไมมแทกปด เชน แทก <BR> ไมตองมแทก </BR>

รปแบบของการเขยน HTML ในการเขยน HTML นนเราจะตองจดวางรปแบบของแทกตาง ๆ ใหถกตองโดยแทกพนฐานทตองมในการเขยน HTML ไดแก tag รายละเอยด

<HTML>…</HTML> เปนแทกก าหนดถงจดเรมตนและจดสนสดของเอกสาร HTML

<HEAD>…</HEAD> เปนแทกก าหนดจดเรมตนและจดสนสดของสวนก าหนดคาเรมตนของเอกสาร HTML เชน ชอของเอกสาร

<TITLE>…<TITLE> เปนแทกก าหนดชอของเอกสาร

<BODY>…</BODY> เปนแทกก าหนดจดเรมตนและจดสนสดของสวนแสดงขอมลของเอกสาร

ซงเราจะตองจดวางต าแหนงของแทกตาง ๆ ดงตอไปน(โครงสราง) ตวอยาง 1.1 การจดวางต าแหนงของแทก

<HTML> <HEAD><TITLE>ชอเอกสาร</TITLE></HEAD> <BODY> ขอมลเอกสาร </BODY> </HTML>

ขนตอนการเขยนโฮมเพจดวย HTML ในการเขยนโฮมเพจดวย HTML โดยใชโปรแกรมแกไขขอความ (Text Editor) Notepad มขนตอนดงน

1. เปดโปรแกรมแกไขขอความ (Text Editor) Notepad 2. พมพแทก HTML 3. บนทกแฟมขอมล โดยมนามสกลเปน .htm หรอ .html 4. เปดโปรแกรมเวบเบราเซอร (Internet Explorer หรอ Netscape Navigator) แลวท าการเปด

แฟมขอมลทบนทกไวจากขอ 3. เพอตรวจสอบผลลพธบนจอภาพวาแสดงผลไดตามทตองการหรอไม

บทท 3 วธการด าเนนการ

การจดท าโครงงานคอมพวเตอร สอเพอการศกษาอาเซยน คณะผจดทาโครงงานมวธการดาเนนงาน

โครงงาน ตามขนตอน ดงตอไปน 3.1 ขนตอนการด าเนนงาน

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

3.2 ระยะเวลาด าเนนงาน

ขนตอนการด าเนนงาน

ระยะเวลาในการด าเนนงาน

มถนายน 2556 กรกฎาคม2556 สงหาคม2556

1 2 3 4 1 2 3 4 1 2 3 4

1. เลอกหวขอโครงงานเพอน าเสนออาจารยทปรกษา

2. ศกษาคนควารวบรวมขอมล ทเกยวของกบประชาคมอาเซยน

3. ศกษาภาษาHTML เพมเตมจากในหองเรยน 4. จดท าโครงรางโครงงานเสนออาจารยทปรกษา 5. ออกแบบผงการท างานเวปไซต 6. จดท าโครงงานสรางเวปไซตโดยใชภาษา HTML เรอง เวปไซตเพอการศกษาอาเซยน

7. สรปรายงานโครงงาน จดทารปเลม

3.4 งบประมาณ คาแผนCD รอม 3.5 แนวทางการด าเนนงาน

ผงการท างานเวปไซต

รป

ลงค

ลงค

ลงค

ลงค

ลงค

ลงค

สวนแสดงผล

สวนตกแตง javascript

สวนประกอบของหนาเวป รป :: เปนHeadder ของหนาจอ

ลงค :: แบงเปนหวขอตางๆ สวนแสดงผล :: จะแสดงเนอหาจากหนาลงคตางๆ สวนตกแตง :: นาฬกา ปฏทน :: ไปหวขอกอนหนา

:: ไปหนาหลก :: ไปหวขอถดไป

บทท 4 ผลการศกษา

4.1 ตวอยางหนาเวปเพจชนงาน การพฒนาโครงงาน สอเพอการศกษาอาเซยน เพอเผยแพรความรเกยวกบประชาคมอาเซยน ท

ประเทศไทยไดเขารวม และจะกาวสประชาคมอาเซยนในพทธศกราช 2558 น ผจดท าไดด าเนนงานตามขนตอนการดาเนนงานทไดวางแผนไว

ภาพผลงานสอเวปไซตเพอการศกษาอาเซยน

บทท 5 สรปผลการด าเนนงานและขอเสนอแนะ

การจดท าโครงงานคอมพวเตอร สอเวปไซตเพอการศกษาอาเซยน สามารถสรปผลการด าเนนงาน

โครงงานและขอเสนอแนะ ดงน 5.1 สรปผล

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

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

1. ระหวางด าเนนการจดท ามบางสวนของโคดทไมเขาใจ

บรรณานกรม ประชาคมอาเซยน.สบคนเมอ วนท 21 กรกฎาคม 2556 จาก

เวบไซต:http://th.wikipedia.org/wiki/ สมาคมประชาชาตเอเชยตะวนออกเฉยงใต รจก ประเทศอาเซยน กอนกาวส ประชาคมอาเซยน 2558.สบคนเมอ วนท 21 กรกฎาคม 2556 จาก เวบไซต:http://hilight.kapook.com/view/67028 โคดสHTML.สบคนเมอ วนท 21 กรกฎาคม 2556 จาก เวบไซต:http://ict.kpru.ac.th/ictkpru/index.php?option=com_content&view=article&id=33%3Acolorcodehtml&catid=28%3A-opensource&Itemid=93 การเขยน Code HTML.สบคนเมอ วนท 21 กรกฎาคม 2556 จาก เวบไซต: http://www.yakyaihost.net/hp/make3.html