วิ�ชา การสรางเวิ�บเพจวิ�ชา การสรางเวิ�บเพจรหั�สวิ�ชา รหั�สวิ�ชา

2201-24142201-2414

ส�ปดาหั�ที่�� ส�ปดาหั�ที่�� 111.11.1หัลั�กการออกแบบหัลั�กการออกแบบ

เวิ�บเพจเวิ�บเพจ

- สามารถอธิบายหลั�กการออกแบบเว็�บเพจได้� - สามารถบอกคว็ามหมายของอนเทอร�เน�ตได้� - สามารถบอกค!าศั�พท�ท#$เก#$ยว็ข�องก�บการสร�างเว็�บเพจได้� - สามารถร�บผิด้ชอบในงานท#$ร �บมอบหมายได้�เป็)นอย*างด้# - ป็ฏิบ�ตงานแลัะร*ว็มกจกรรมเป็)นอย*างด้#

จ�ดประสงค์�การเร�ยนร จ�ดประสงค์�การเร�ยนร

1.1.11.1.1ค์วิามหัมายของ ค์วิามหัมายของ InternetInternet

ค์วิามหัมายของอ�นเที่อร�เน�ตค์วิามหัมายของอ�นเที่อร�เน�ต

ค์วิามหัมายของอ�นเที่อร�เน�ตค์วิามหัมายของอ�นเที่อร�เน�ต– อ�นเตอร�เน�ต (Internet) ค-อ เคร-อข*าย

คอมพว็เตอร� ระบบต*าง ๆ ท#$เช-$อมโยงก�น มาจากค!าว็*า Inter Connection Network อนเตอร�เน�ต (Internet) เป็)นระบบเคร-อข*ายคอมพว็เตอร� ท#$ม#ขนาด้ใหญ่* เคร-$องคอมพว็เตอร�ท1กเคร-$องท�$ว็โลัก สามารถตด้ต*อส-$อสารถ2งก�น ได้�โด้ยใช�มาตรฐาน ในการร�บส*งข�อม4ลัท#$เป็)นหน2$งเด้#ยว็ หร-อท#$เร#ยกว็*าโป็รโตคอลั (Protocol) ซึ่2$งโป็รโตคอลั ท#$ใช�บนระบบเคร-อข*ายอนเตอร�เน�ต ม#ช-$อว็*า ท#ซึ่#พ#/ไอพ# (TCP/IP : Transmission Control Protocol/Internet Protocol)

1.1.21.1.2ค์$าศั�พที่�ที่��เก��ยวิของค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจก�บการสรางเวิ�บเพจ

• Browser : โป็รแกรมท#$ม#ไว็�ส!าหร�บชมข*าว็สารต*างๆ หร-อท#$เราร4 �จ�กก�นในระบบ WWW บนอนเตอร�เน�ต เน-$องจากข�อม4ลัท#$มาจากเคร-อข*ายน�6น เป็)นเพ#ยงไฟลั�ภาษา HTML แลัะไฟลั�ต*างๆ ท#$ย�งไม*ได้�ร�บการป็ระมว็ลัผิลั ฉะน�6นจ!าเป็)นท#$จะต�องผิ*าน โป็รแกรม เบราเซึ่อร� น#6เส#ยก*อน ท*านจ2งจะสามารถชม เว็�บไซึ่ต�ต*างๆ บนอนเตอร�เน�ตได้�

• Client : ค-อ คอมพว็เตอร� ต�ว็ลั4ก หร-อคอมพว็เตอร�ในส*ว็นของผิ4�ใช�บรการท#$ม#การ เช-$อมต*อก�บ เคร-$องคอมพว็เตอร�อ#กต�ว็หน2$งท#$เร#ยกก�นว็*า ต�ว็แม* ( Server Host ) หร-อ คอมพว็เตอร� ผิ4�ให�บรการ

ค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจ

• Interne Address : ค-อ ท#$อย4*บนอนเตอร�เน�ต หร-อจะป็รากฏิด้�ว็ยช-$อของผิ4�ใช�คอมพว็เตอร� (User) แลัะช-$อของอนเตอร�เน�ต (Internet Name) โด้ยม#ร4ป็แบบค-อ ผิ4�ใช�@ช-$อของอนเตอร�เน�ต

4. IP Address : ค-อ หมายเลัขอนเตอร�เน�ตจะเป็)นรห�สป็ระจ!าต�ว็เคร-$องคอมพว็เตอร�ท#$ต*อเข�าก�บอนเตอร�เน�ต โยหมายเลัขน#6จะม#รห�สไม*ซึ่!6าก�น ป็ระกอบด้�ว็ยต�ว็เลัข 4 ช1ด้ ท#$ค� $นด้�ว็ยเคร-$องหมาย ( . ) ต�ว็อย*างเช*น

5. DNS : Domain Name Server ค-อ ช-$ออ�างถ2งคอมพว็เตอร�ท#$ต*อเข�าก�บอนเตอร�เน�ต เน-$องจาก IP address

เป็)นต�ว็เลัข 4 ช1ด้ ท#$ยากต*อการจด้จ!าไม*สะด้ว็กต*อการใช� ซึ่2$ง DNS น#6จะท!าให�จด้จ!าได้�ง*ายข26น เป็)น rmu.ac.th rmu ค-อช-$อเคร-อข*ายท�องถ$น , ac ค-อช-$อซึ่�บโด้เมน , th ค-อช-$อโด้เมน

ค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจ

ค์วิามหัมายของโดเมนค์วิามหัมายของโดเมนcom กลั1*มองค�กรการค�า (commercial)edu กลั1*มการศั2กษา (Education)gov กลั1*มองค�การร�ฐบาลั (Govemental)mit กลั1*มองค�การทหาร (Military)net กลั1*มองค�การบรหารเคร-อข*าย (Network Services)org กลั1*มองค�กรอ-$น ๆ (Organizations)

ค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจ

โดเมนที่��เป'นช(�อของประเที่ศัที่��น)าสนใจau ออสเตรเลั#ย (Australia)fr ฝร�$งเศัส (France)hk ฮ่*องกง (Hong Kong)jp ญ่#$ป็1=น (Japan)th ไทย (Thailand)sg สงค�โป็ร� (Singapore)uk อ�งกฤษ (United Kingdom)

ค์วิามหัมายของซั�บเมนac สถาบ�นการศั2กษา (Academic)co องค�กรธิ1รกจ (Commmercial)or องค�กรอ-$น ๆ (Organization)net ผิ4�ว็างระบบเน�ตเว็ร�ก (Networking)

ค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจ

6. World Wide Web (WWW) : ค-อ การเข�าส4*ระบบข�อม4ลัอย*างหน2$งท#$ก!าลั�งเป็)นท#$ฮ่ตส1ด้บนอนเตอร�เน�ต ข�อม4ลัน#6จะอย4*ในร4ป็ของ Interactive Multimedia ค-อ ม#ท�6งร4ป็ภาพ ข�อคว็าม ภาพเคลั-$อนไหว็ เส#ยง แลัะว็#ด้#โอ อ#กท�6งข�อม4ลัเหลั*าน#6ย�งใช�ระบบท#$เร#ยกว็*า hypertext กลั*าว็ค-อ จะม#ค!าส!าค�ญ่หร-อร4ป็ภาพในข�อม4ลัน�6นท#$จะช*ว็ยให�ท*านเข�าส4*รายลัะเอ#ยด้ท#$ลั2กแลัะกว็�างขว็างย$งข26น ค!าส!าค�ญ่ด้�งกลั*าว็จะเป็)นค!าท#$เป็)นต�ว็หนา หร-อข#ด้เส�นใต� เพ#ยงแต*ท*านเลั-อกกด้ท#$ค!าท#$เป็)นต�ว็หนาหร-อข#ด้เส�นใต� น�6น ๆ ท*านก�สามารถเข�าส4*ข�อม4ลัเพ$มเตมได้�(ข�อม4ลัเหลั*าน#6จะม#ผิ4�สร�างข26นมาแลัะเก�บไว็�ในคอมพว็เตอร�ต*างๆ ท�$ว็โลัก)

ค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจ

7. เวิ�บไซัต� (Web site) : เว็�บไซึ่ต� ถ4กเร#ยกเป็)นต!าแหน*งท#$อย4*ของผิ4�ท#$ม#เว็�บเพจเป็)นของต�ว็เองบนระบบอนเทอร�เน�ต ซึ่2$งได้�จากการลังทะเบ#ยนก�บผิ4�ให�บรการเช*าพ-6นท#$บนระบบอนเทอร�เน�ตเม-$อลังทะเบ#ยนในช-$อท#$ต�องการแลั�ว็ ก�สามารถจ�ด้ท!าเว็�บเพจแลัะส*งให�ศั4นย�บรการน!าข26นไป็ไว็�บนอนเทอร�เน�ตซึ่2$งถ-อว็*าม#เว็�บไซึ่ต�เป็)นของตนเองแลั�ว็ แลัะเว็�บไซึ่ต�ก�ค-อแหลั*งท#$รว็บรว็มเว็�บเพจจ!านว็นมากมายหลัายหน�าในเร-$องเด้#ยว็ก�นมารว็มอย4*ด้�ว็ยก�น แต*ส$งหน2$งในการเสนอเร-$องราว็ท#$อย4*บนเว็�บไซึ่ต�ท#$แตกต*างไป็จากโป็รแกรมโทรท�ศัน� เน-6อหาในนตยสาร หร-อหน�งส-อพมพ� เน-$องจากการท!างานบนเว็�บจะไม*ม#ว็�นส6นส1ด้ ท�6งน#6เน-$องจากเราสามารถเป็ลั#$ยนแป็ลังแลัะเพ$มสารสนเทศับนเว็�บไซึ่ต�ได้�ตลัอด้เว็ลัา แลัะแต*ลัะเว็�บเพจจะม#การเช-$อมโยงก�นภายในเว็�บไซึ่ต�หร-อไป็ย�งเว็�บไซึ่ต�อ-$นๆ เพ-$อให�ผิ4�อ*านสามารถอ*านได้�ในเว็ลัาอ�นรว็ด้เร�ว็

ค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจ

8. เวิ�บเพจ (Web page) : ค-อหน�าหน�งส-ออเลั�กทรอนกส�บนเว็�บ ท#$เจ�าของเว็�บเพจ ต�องการจะใส*ลังไป็ในหน�าหน�งส-ออเลั�กทรอนกส�น�6น เช*น ข�อม4ลัแนะน!าต�ว็เองซึ่2$งอาจเป็)นบ1คคลัหร-อองค�กรท#$ต�องการให�ผิ4�อ-$นได้�ทราบ หร-อข�อม4ลัท#$น*าสนใจ เป็)นต�น โด้ยท#$ข�อม4ลัท#$แสด้งเป็)นได้�ท�6งข�อคว็าม เส#ยง ภาพน$ง แลัะภาพเคลั-$อนไหว็แลัะข�อม4ลัท#$น!าเสนอสามารถเช-$อมโยงในร4ป็ของไฮ่เพอร�เท�กซึ่� ค-อ เช-$อมโยงไป็ย�งเว็�บเพจอ-$นท#$จะให�ข�อม4ลัน�6นๆ ในระด้�บลั2กลังไป็ได้�เร-$อยๆแลัะเว็�บเพจจะต�องม#ท#$อย4*อเลั�กทรอนกส�บนเคร-อข*ายเฉพาะของตน ซึ่2$งแหลั*งท#$อย4*น#6เร#ยกว็*า URL (Uniform ResourceLocator)

ค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจ

9. Uniform Resource Locator (URL) : ค-อท#$อย4*ของข�อม4ลับน WWW ซึ่2$งถ�าเราจะหาข�อม4ลัเราต�องทราบท#$อย4*ของ homepage หร-อ URL ก*อน ต�ว็อย*างท#$อย4*ของ homepage ของโรงเร#ยนค-อ http://www.sbac.ac.th/

10. Home page (โฮมเพจ): โด้ยท�$ว็ไป็แลั�ว็ในแต*ลัะเว็�บไซึ่ต�จะม#โฮ่มเพจ หร-อ หน�าต�อนร�บ (welcome

page) ซึ่2$งป็รากฏิเป็)นหน�าแรกเม-$อเป็?ด้เว็�บไซึ่ต�น�6นข26นมา เป็ร#ยบเสม-อนก�บสารบ�ญ่แลัะค!าน!า ท#$เจ�าของเว็�บไซึ่ต�สร�างข26นเพ-$อใช�ป็ระชาส�มพ�นธิ�องค�กรของตนว็*าให�บรการในส$งใด้บ�าง นอกจากน#6ภายในโฮ่มเพจก�อาจม#เอกสารข�อคว็ามท#$เช-$อมโยงต*อไป็ย�งเว็�บเพจอ-$นได้�อ#ก ซึ่2$งโฮ่มเพจ สามารถเช-$อมโยงก�บเว็�บเพจแลัะเว็�บไซึ่ต�อ-$นๆอ#กเป็)นจ!านว็นมาก

 

ค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจค์$าศั�พที่�ที่��เก��ยวิของก�บการสรางเวิ�บเพจ