View
162
Download
0
Category
Preview:
Citation preview
อิ�นเทอิร์�เน�ต (Internet) หมายถึ�งร์ะบบเคร์�อิข่�ายคอิมพิ�วเตอิร์�ท��เชื่��อิมโยงกั�นท��วโลกัจนเป็#นเคร์�อิข่�ายคอิมพิ�วเตอิร์�ข่นาดใหญ่�
ซึ่��งค(าว�าอิ�นเทอิร์�เน�ตมาจากัค(าว�า “Inter Connection Network”
โดยเคร์��อิงคอิมพิ�วเตอิร์�ท)กัเคร์��อิงท��เชื่��อิมต�อิเข่*ากั�บร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตน�+นสามาร์ถึต�ดต�อิส��อิสาร์ถึ�งกั�นได* โดยใชื่*มาตร์ฐานในกัาร์ร์�บ
ส�งข่*อิม/ลหร์�อิท��เร์�ยกัว�า โป็ร์โตคอิล (Protocol) ในร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตม�ชื่��อิว�า ท�ซึ่�พิ�/ไอิพิ� (TCP/IP, Transmission Control
Protocol/Internet Protocol)
เคร์�อิข่�ายข่อิงร์ะบบอิ�นเทอิร์�เน�ตน�+นเป็ร์�ยบเสม�อินกั�บเคร์�อิข่�ายใยแมงม)มท��คร์อิบคล)มไป็ท��วโลกั แต�ละจ)ดท��เชื่��อิมต�อิเข่*าไป็ย�งร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตน�+น สามาร์ถึส��อิสาร์กั�นได*หลายเส*นทาง โดยไม�ม�กัาร์กั(าหนดแน�นอิน กัาร์ต�ดต�อิส��อิสาร์ร์ะหว�างคอิมพิ�วเตอิร์�ในร์ะบบเคร์�อิข่�ายน�+นไม�จ(าเป็#นต*อิงเชื่��อิมต�อิกั�นโดยตร์ง แต�อิาจต�ดต�อิโดยผ่�านจ)ดเชื่��อิมต�อิอิ��น และกัาร์ต�ดต�อิร์ะหว�างคอิมพิ�วเตอิร์�ในร์ะบบเคร์�อิข่�ายน�+น สามาร์ถึเล�อิกัเส*นทางในกัาร์เชื่��อิมต�อิได*หลายเส*นทาง กัล�าวได*ว�า กัาร์ต�ดต�อิส��อิสาร์ผ่�านร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตน�+น เป็#นกัาร์ต�ดต�อิส��อิสาร์แบบไร์*พิร์มแดนหร์�อิไซึ่เบอิร์�สเป็ซึ่ (Cyberspace)
รู�ปที่�� 1.1 แสดงแบบจำ��ลองก�รูก�รูเชื่��อมต่�อรูะบบเครู�อข่��ยอ�นเที่อรู�เน ต่
ป็2จจ)บ�นร์ะบบอิ�นเทอิร์�เน�ตน�+นม�ความส(าค�ญ่ต�อิชื่�ว�ตป็ร์ะจ(าว�นมากัมายหลายด*าน ไม�ว�าจะเป็#นด*านกัาร์ศึ�กัษา ด*านธุ)ร์กั�จ ด*านกัาร์แพิทย� และอิ��น ๆ สามาร์ถึอิธุ�บายได*พิอิส�งเข่ป็ด�งน�+ ทางด*านกัาร์ศึ�กัษา สามาร์ถึใชื่*เป็#นแหล�งค*นคว*าหาข่*อิม/ลทางด*านว�ชื่ากัาร์ต�าง ๆ ท��สนใจ เชื่�นทางกัาร์แพิทย� ทางว�ศึวกัร์ร์มศึาสตร์� ทางดาร์าศึาสตร์� และอิ��น ๆ ท��น�าสนใจ นอิกัจากัน�+น มหาว�ทยาล�ยท�+งหลายจะใชื่*ร์ะบบอิ�นเทอิร์�เน�ตน�+เป็#นชื่�อิงทางในกัาร์น(าเสนอิงานว�จ�ยต�าง ๆ ข่อิงมหาว�ทยาล�ย ด�งน�+นร์ะบบอิ�นเทอิร์�เน�ตจ�งเป็ร์�ยบเสม�อินเป็#นห*อิงสม)ดข่นาดใหญ่� น�กัศึ�กัษาสามาร์ถึท(ากัาร์ค*นหาข่*อิม/ลท��กั(าล�งศึ�กัษาอิย/�ได*โดย
ผ่�านร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต ร์วมไป็ถึ�งค*นหาชื่�อิงทางส(าหร์�บศึ�กัษาต�อิใ น ร์ ะ ด� บ ต� า ง ป็ ร์ ะ เ ท ศึ
รู�ปที่�� 1.2 แสดงเว็ บไซต่�ข่องสถ�นศึ&กษ�
ทางด*านธุ)ร์กั�จ สามาร์ถึใชื่*ป็ร์ะโยชื่น�ส(าหร์�บค*นหาข่*อิม/ลเพิ��อิชื่�วยในกัาร์ต�ดส�นใจทางด*านธุ)ร์กั�จ นอิกัจากัน�+นย�งสามาร์ถึใชื่*ส(าหร์�บท(ากัาร์ซึ่�+อิข่ายส�นค*าผ่�านร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต และย�งสามาร์ถึเป็7ดให*บร์�กัาร์เพิ��อิสน�บสน)นล/กัค*าผ่�านร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต เชื่�นบร์�กัาร์ให*ค(าแนะน(าและตอิบป็2ญ่หาต�าง ๆ ให*แกั�ล/กัค*า ร์วมไป็ถึ�งย�งสามาร์ถึใชื่*เป็#นชื่�อิงทางส(าหร์�บกัาร์ป็ร์ะชื่าส�มพิ�นธุ�บร์�ษ�ท
รู�ปที่�� 1.3 แสดงเว็ บไซต่�ข่องหน�ว็ยง�นที่�งด)�นธุ+รูก�จำ
รู�ปที่�� 1.4 แสดงเว็ บไซต่�ข่องสถ�น�โที่รูที่-ศึน�และหน-งส�อพิ�มพิ�
ทางด*านบ�นเท�ง สามาร์ถึใชื่*เป็#นชื่�อิงทางส(าหร์�บกัาร์พิ�กัผ่�อินหย�อินใจ เชื่�นกัาร์อิ�านวาร์สาร์หร์�อิน�ตยสาร์ผ่�านร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต ร์วมไป็ถึ�งหน�งส�อิพิ�มพิ�และข่�าวสาร์อิ��น ๆ ซึ่��งเป็ร์�ยบเสม�อินว�าจอิคอิมพิ�วเตอิร์�น�+นค�อิหน*าข่อิงวาร์สาร์หร์�อิหน�งส�อิพิ�มพิ� นอิกัจากัน�+นถึ*าหากักัาร์เชื่��อิมต�อิเข่*าส/�ร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตม�กัาร์เชื่��อิมต�อิด*วยความเร์�วส/งแล*วน�+น จะท(าให*สามาร์ถึท(ากัาร์ฟั2งเพิลงร์วมไป็ถึ�งชื่มภาพิยนตร์�ผ่�านทางร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตได*
หม�ยเลข่ไอพิ�
มาตร์ฐานกัาร์ร์�บส�งข่*อิม/ลโดยใชื่*โป็ร์โตคอิล ท�ซึ่�พิ�/ไอิพิ� น�+น เคร์��อิงคอิมพิ�วเตอิร์�ท)กัเคร์��อิงท��เชื่��อิมต�อิกั�นจะต*อิงม�หมายเลข่ป็ร์ะจ(าต�ว เพิ��อิใชื่*เป็#นหมายเลข่ต(าแหน�งส(าหร์�บกัาร์อิ*างอิ�ง ให*กั�บเคร์��อิง
คอิมพิ�วเตอิร์�อิ��นในร์ะบบ เป็ร์�ยบเท�ยบได*กั�บหมายเลข่ป็ร์ะจ(าต�วป็ร์ะชื่าชื่นข่อิงบ)คคลแต�ละคน โดยหมายเลข่อิ*างอิ�งน�+ม�ชื่��อิเร์�ยกัว�าหมายเลข่ไอิพิ� (IP Address) โดยหมายเลข่ไอิพิ�ข่อิงเคร์��อิงคอิมพิ�วเตอิร์�แต�ละเคร์��อิงน�+นต*อิงเป็#นหมายเลข่ท��ไม�ซึ่(+ากั�น
ล�กัษณะข่อิงหมายเลข่ไอิพิ�น�+น จะป็ร์ะกัอิบด*วยเลข่ฐานสอิงจ(านวน 4 ชื่)ด ชื่)ดละ 8 บ�ต ร์วมท�+งหมด 32 บ�ต ซึ่��งสามาร์ถึใชื่*แทนค�าได* 232 หร์�อิ 4294967296 หมายเลข่ ค�อิต�+งแต� 0.0.0.0 ถึ�ง 255.255.255.255
โดยสามาร์ถึแบ�งเป็#นกัล)�ม หร์�อิท��เร์�ยกัว�า คลาส (Class) ได* 5 คลาสด�งน�+
กล+�ม (Class) ชื่�ว็งข่องต่-ว็เลข่A 0.0.0.0-127.255.255.255B 128.0.0.0-191.255.255.255C 192.0.0.0-223.255.255.255D 224.0.0.0-239.255.255.255E 240.0.0.0-247.255.255.255
รูะบบชื่��อโดเมน
ร์ะบบชื่��อิโดเมน (Domain Name System) หมายถึ�งร์ะบบข่อิงชื่��อิท��ใชื่*เร์�ยกัแทนกัาร์เร์�ยกัหมายเลข่อิ�นเทอิร์�เน�ตหร์�อิหมายเลข่ไอิพิ� (IP Address) เน��อิงจากัหมายเลข่ไอิพิ�ม�ความย)�งยากัส(าหร์�บกัาร์จดจ(า ท(าให*ข่ณะท��ใชื่*งานร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตจะท(าให*เกั�ดความย)�งยากั จ�งได*ม�กัาร์พิ�ฒนาน(าเอิาร์ะบบชื่��อิท��เป็#นต�วอิ�กัษร์มาใชื่*แทนหมายเลข่ไอิพิ� เพิ��อิให*กัาร์ใชื่*งานร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตเป็#นไป็ได*อิย�างสะดวกัย��งข่�+น โดยท��วไป็ชื่��อิท��ใชื่*เร์�ยกัแทนหมายเลข่ไอิพิ�น�+นม�กัจะส��อิความหมายถึ�งหน�วยงานหร์�อิเจ*าข่อิงเว�บไซึ่ต� เชื่�น เว�บไซึ่ต�ข่อิงสถึาบ�น
เทคโนโลย�ร์าชื่มงคล ม�หมายเลข่ไอิพิ�ค�อิ 202.44.130.164 ซึ่��งยากัต�อิกัาร์จดจ(า แต�จะใชื่*ชื่��อิโดเมนเร์�ยกัแทนเป็#น www.rit.ac.th เพิ��อิ ให*ง�ายต�อิกัาร์จดจ(า
ร์ะบบชื่��อิโดเมนน�+นจะชื่�วยอิ(านวยความสะดวกัให*กั�บผ่/*ใชื่*งานร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตสามาร์ถึใชื่*งานได*สะดวกัย��งข่�+น แต�กัาร์ต�ดต�อิร์ะหว�างเคร์��อิงคอิมพิ�วเตอิร์�ในร์ะบบเคร์�อิข่�ายน�+นย�งคงใชื่*หมายเลข่ไอิพิ�เชื่�นเด�ม โดยในร์ะบบเคร์�อิข่�ายน�+นจะม�เคร์��อิงคอิมพิ�วเตอิร์�เคร์��อิงหน��งท��ท(าหน*าท��ให*บร์�กัาร์ส(าหร์�บกัาร์เป็ล��ยนร์ะหว�างร์ะบบหมายเลข่ไอิพิ�กั�บร์ะบบชื่��อิโดเมน โดยเคร์��อิงคอิมพิ�วเตอิร์�ท��ท(าหน*าท��ในกัาร์ให*บร์�กัาร์น�+เร์�ยกัว�า โดเมนเนม เซึ่�ร์�ฟัเวอิร์� (Domain Name Server)
ชื่��อิโดเมนในร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตน�+นจะไม�ซึ่(+ากั�น โดยแต�ละป็ร์ะเทศึจะม�หน�วยงานร์�บผ่�ดชื่อิบกัาร์จดทะเบ�ยนชื่��อิโดเมน ส(าหร์�บในป็ร์ะเทศึไทยหน�วยงานท��ร์ �บผ่�ดชื่อิบกัาร์ด/แลชื่��อิโดเมนค�อิศึ/นย�สาร์สนเทศึเคร์�อิข่�ายป็ร์ะเทศึไทย (THNIC, Thailand Network
Information Center)
รู�ปที่�� 1.5 แสดงแบบจำ��ลองก�รูแบ�งชื่��อต่�มรูะบบโดเมน
ชื่��อิโดเมนน�+นจะถึ/กัแบ�งอิอิกัเป็#นส�วน โดยแต�ละส�วนจะถึ/กัแบ�งด*วยจ)ดและต(าแหน�งท*ายส)ดข่อิงชื่��อิโดเมนจะหมายถึ�งชื่��อิข่อิงเคร์��อิงคอิมพิ�วเตอิร์�ในร์ะบบเคร์�อิข่�าย ต�วอิย�างข่อิงชื่��อิโดเมน เชื่�น www.rit.ac.th จากัชื่��อิโดเมนคอิมพิ�วเตอิร์�เคร์��อิงน�+ม�ชื่��อิว�า www
Nontri.ku.ac.th จากัชื่��อิโดเมนคอิมพิ�วเตอิร์�เคร์��อิงน�+ม�ชื่��อิว�า nontri
ชื่��อิโดเมนท��อิย/�ต(าแหน�งข่วาส)ดหร์�อิโดเมนร์ะด�บบนส)ด (Top
Level Domain) สามาร์ถึแบ�งอิอิกัได*เป็#น 2 ล�กัษณะ ค�อิ แบ�งตามล�กัษณะข่อิงอิงค�กัร์ และแบ�งตามป็ร์ะเทศึท��หน�วยงานท��เป็#นเจ*าข่อิงเคร์��อิงคอิมพิ�วเตอิร์�น�+นต�+งอิย/�
ชื่��อโดเมนที่��แบ�งต่�มองค�กรู
ร์ะยะแร์กัท��ม�กัาร์น(าร์ะบบอิ�นเทอิร์�เน�ตมาใชื่*งานน�+นย�งไม�ได*ม�กัาร์ใชื่*งานไป็ท��วโลกั กัาร์แบ�งชื่��อิข่อิงโดเมนน�+น จะแบ�งตามล�กัษณะข่อิงอิงค�กัร์ท��เป็#นเจ*าข่อิงเคร์��อิงคอิมพิ�วเตอิร์�น�+น โดยโดเมนร์ะด�บบนส)ดท��ใชื่*เป็#นกัาร์บอิกัล�กัษณะข่อิงอิงค�กัร์ม�ด�งน�+
.com หมายถึ�งหน�วยงานท��เป็#นภาคเอิกัชื่น
.edu หมายถึ�งหน�วยงานท��เป็#นสภาบ�นกัาร์ศึ�กัษา
.gov หมายถึ�งหน�วยท��เป็#นหน�วยงานข่อิงร์�ฐบาล
.mil หมายถึ�งหน�วยงานท��เป็#นหน�วยงานทางด*านกัาร์ทหาร์
.org หมายถึ�งหน�วยงานท��เป็#นหน�วยงานท��ไม�แสวงหาผ่ลกั(าไร์
.net หมายถึ�งหน�วยงานท��เป็#นหน�วยงานท��ให*บร์�กัาร์เกั��ยวกั�บอิ�นเทอิร์�เน�ต (ISP)
ชื่��อโดเมนที่��แบ�งต่�มปรูะเที่ศึ
เม��อิร์ะบบอิ�นเทอิร์�เน�ตได*ร์�บความน�ยมแพิร์�หลายไป็ท��วโลกั กัาร์แบ�งชื่��อิโดเมนตามล�กัษณะข่อิงหน�วยงานอิาจไม�เพิ�ยงพิอิส(าหร์�บกัาร์ส��อิถึ�งความหมายข่อิงหน�วยงานในร์ะบบเคร์�อิข่�าย กัาร์แบ�งชื่��อิโดเมนอิ�กัล�กัษณะหน��ง ค�อิกัาร์แบ�งตามป็ร์ะเทศึท��เป็#นท��ต� +งข่อิงหน�วยงานท��เป็#นเจ*าข่อิงเคร์��อิงคอิมพิ�วเตอิร์�ท��ให*บร์�กัาร์ข่*อิม/ลผ่�านทางร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต โดยชื่��อิโดเมนร์ะด�บบนส)ดท��ใชื่*เป็#นกัาร์บอิกัชื่��อิข่อิงป็ร์ะเทศึท��ต� +งข่อิงหน�วยงานน�+น สามาร์ถึยกัต�วอิย�างเชื่�น
.th หมายถึ�งหน�วยงานท��ม�ท��ต� +งอิย/�ในป็ร์ะเทศึไทย
.jp หมายถึ�งหน�วยงานท��ม�ท��ต� +งอิย/�ในป็ร์ะเทศึญ่��ป็)<น
.au หมายถึ�งหน�วยงานท��ม�ท��ต� +งอิย/�ในป็ร์ะเทศึอิอิสเตร์เล�ย
.br หมายถึ�งหน�วยงานท��ม�ท��ต� +งอิย/�ในป็ร์ะเทศึบร์าซึ่�ล
.tw หมายถึ�งหน�วยงานท��ม�ท��ต� +งอิย/�ในป็ร์ะเทศึไต*หว�น
.uk หมายถึ�งหน�วยงานท��ม�ท��ต� +งอิย/�ในป็ร์ะเทศึอิ�งกัฤษ
ชื่��อโดเมนรูะด-บที่�� 2 ในปรูะเที่ศึไที่ย
หล�งจากัท��ได*ม�กัาร์แบ�งชื่��อิโดเมนตามป็ร์ะเทศึแล*ว โดยหน�วยงานท��ม�ท��ต� +งอิย/�ในป็ร์ะเทศึไทยจะใชื่*ชื่��อิโดเมนร์ะด�บบนส)ด (Top Level Domain)
เป็#น .th หล�งจากัน�+นกั�จะแบ�งหน�วยงานท��ต� +งอิย/�ในป็ร์ะเทศึไทยอิอิกัเป็#นป็ร์ะเภทต�าง ๆ ซึ่��งในป็ร์ะเทศึอิ��นกั�เชื่�นกั�น โดยจะม�หน�วยงานข่อิงป็ร์ะเทศึน�+น ๆ เป็#นผ่/*พิ�จาร์ณาว�าจะแยกัอิอิกัเป็#นกั��ป็ร์ะเภท และแต�ละป็ร์ะเภทจะม�ชื่��อิโดเมนว�าอิย�างไร์ ต�วอิย�าง โดเมนร์ะด�บท�� 2 ในป็ร์ะเทศึไทยม�ด�งน�+
.ac หมายถึ�งหน�วยงานท��เป็#นสถึานศึ�กัษา
.go หมายถึ�งหน�วยงานร์าชื่กัาร์
.or หมายถึ�งหน�วยงานท��เป็#นอิงค�กัร์ท��ไม�แสวงหาผ่ลกั(าไร์
.co หมายถึ�งหน�วยงานเป็#นหน�วยงานภาคเอิกัชื่น
ต�วอิย�างข่อิงชื่��อิโดเมนท��ม�ท��ต� +งอิย/�ในป็ร์ะเทศึไทย เชื่�น www.rit.ac.th , www.nectec.or.th,www.moph.go.th,www.itv.co.th
เป็#นต*น
เที่คโนโลย�เว็ บเพิจำ
กัาร์น(าเสนอิข่*อิม/ลบนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตท��ร์/ *จ�กักั�นด�ค�อิ ร์ะบบข่อิงเว�ลด�ไวด�เว�บ (WWW: World Wide Web) โดยร์ะบบน�+ได*ร์�บกัาร์พิ�ฒนาข่�+นมาในชื่�วงป็ลายป็> 1980 โดยท�มงานจากัห*อิงป็ฏิ�บ�ต�กัาร์ทางจ)ลภาคฟั7ส�กัส�แห�งย)โร์ป็หร์�อิท��ร์/ *จ�กักั�นในนาม CERN (Conseil
European Pour la Recherche Nucleaire) ป็ร์ะเทศึสว�ตเซึ่อิร์�แลนด� เพิ��อิเป็#นภาษาท��ใชื่*ส(าหร์�บกัาร์เผ่ยแพิร์�เอิกัสาร์ข่อิงน�กัว�จ�ยหร์�อิเอิกัสาร์เว�บ (Web Document) จากัเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�ายไป็ย�งสถึานท��อิ��นในร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต โดยเร์�ยกัภาษาท��ได*ท(ากัาร์พิ�ฒนาข่�+นว�า ภาษาเอิชื่ท�เอิ�มแอิล (HTML , Hyper Text Markup
Language)
กัาร์เผ่ยแพิร์�ข่*อิม/ลทางร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต ผ่�านส��อิท��เป็#นเอิกัสาร์เว�บหร์�อิเว�บเพิจ(Webpage) ได*ร์�บความน�ยมเป็#นอิย�างส/งในป็2จจ)บ�น ไม�ว�าจะเป็#นข่*อิม/ลกัาร์โฆษณาส�นค*า ข่*อิม/ลทางกัาร์แพิทย� กัาร์เร์�ยน กัาร์ว�จ�ย ร์วมไป็ถึ�งข่*อิม/ลอิ��นท��ม�ป็ร์ะโยชื่น� เน��อิงจากัสามาร์ถึเข่*าถึ�งกัล)�มผ่/*สนใจได*
ท��วโลกั ตลอิดจนข่*อิม/ลท��น(าเสนอิน�+นสามาร์ถึเผ่ยแพิร์�ได*ท�+งข่*อิม/ลท��เป็#นต�วอิ�กัษร์ ข่*อิม/ลท��เป็#นร์/ป็ภาพิ ข่*อิม/ลเส�ยงและภาพิเคล��อินไหว ร์วมไป็ถึ�งม�เทคน�คกัาร์น(าเสนอิท��หลากัหลายท(าให*สามาร์ถึด�งด/ดความสนใจข่อิงผ่/*ท��เข่*าด/ข่*อิม/ล ส�งผ่ลให*ร์ะบบกัาร์น(าเสนอิข่*อิม/ลแบบเว�บเพิจเป็#นร์/ป็แบบท��ได*ร์�บความน�ยมอิย�างส/งบนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต
รู�ปที่�� 1.6 แสดงล-กษณะข่องภ�ษ�เอชื่ที่�เอ มแอล
รู�ปที่�� 1.7 แสดงโฮมเพิจำที่��น��เสนอรู�ยละเอ�ยดข่องส�นค)� ล�กัษณะเด�นอิ�กัป็ร์ะกัาร์หน��งข่อิงกัาร์น(าเสนอิข่*อิม/ลโดยใชื่*เว�บเพิจ ค�อิสามาร์ถึเชื่��อิมโยงข่*อิม/ลไป็ย�งจ)ดอิ��นบนหน*าเว�บอิ��นเว�บไซึ่ต�เด�ยวกั�น ตลอิดจนสามาร์ถึเชื่��อิมโยงไป็ย�งเว�บเพิจข่อิงเว�บไซึ่ต�อิ��นในร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต จ�งเป็#นท��มาข่อิงค(าว�า “Hyper Text” หมายถึ�งข่*อิความท��ม�ความสามาร์ถึมากักัว�าข่*อิความป็กัต� โดยเม��อิผ่/*ใชื่*งานใชื่*ร์ะบบเว�ลด�ไวด�เว�บ จะเสม�อินว�าผ่/*ท��กั(าล�งใชื่*งานเอิกัสาร์เว�บ สามาร์ถึโต*ตอิบกั�บเอิกัสาร์น�+นเอิงตลอิดเวลาท��ม�กัาร์ใชื่*งาน
กัาร์น(าเสนอิข่*อิม/ลผ่�านทางเว�บเพิจน�+น สามาร์ถึเชื่��อิมโยงไป็ย�งเอิกัสาร์ข่อิงเว�บไซึ่ต�อิ��นโดยใชื่*ร์ะบบกัร์าฟั7กั ซึ่��งจะท(าให*ข่*อิม/ลน�+นน�าสนใจแกั�ผ่/*ใชื่*งาน โดยต(าแหน�งท��อิย/�ทางอิ�นเทอิร์�เน�ตข่อิงร์ะบบเว�บเพิจ เร์�ยกัว�า ย/อิาร์�แอิล (URL:Uniform Resource Locator) ส�วนโป็ร์แกัร์มท��ใชื่*ส(าหร์�บด/เอิกัสาร์เว�บบนร์ะบบเคร์�อิข่�ายเร์�ยกัว�าโป็ร์แกัร์มค*นด/หร์�อิเบร์าว�เซึ่อิร์� (Browser) เม��อิเอิกัสาร์เว�บแสดงผ่ลผ่�านโป็ร์แกัร์ม
เบร์าว�เซึ่อิร์�แล*ว ผ่/*ใชื่*สามาร์ถึคล�กัเล�อิกัร์ายกัาร์หร์�อิข่*อิม/ลท��สนใจ อิ�นเป็#นกัาร์ท(างานแบบโต*ตอิบกั�บผ่/*ใชื่*โดยตร์งหร์�อิท��เร์�ยกัว�าร์ะบบเชื่�งโต*ตอิบ (Interactive)
รู�ปที่�� 1.8 แสดงแบบจำ��ลองก�รูเชื่��อมต่�อรูะบบเครู�อข่��ยจำ�กเครู��องคอมพิ�ว็เต่อรู�หล�ยรูะบบ
ข่*อิม/ลท��น(าเสนอิผ่�านทางเว�บเพิจน�+น จะไม�ย�ดต�ดกั�บร์ะบบป็ฏิ�บ�ต�กัาร์ (Operating System,OS) ข่อิงคอิมพิ�วเตอิร์� เน��อิงจากัข่*อิม/ลเหล�าน�+นถึ/กัจ�ดเกั�บเป็#นแฟัAมข่*อิม/ลต�วอิ�กัษร์ (Text File) ด�งน�+นไม�ว�าเอิกัสาร์เว�บจะถึ/กัเกั�บไว*ในคอิมพิ�วเตอิร์�ท��ใชื่*ร์ะบบป็ฏิ�บ�ต�กัาร์ชื่น�ดใด ไม�ว�าจะเป็#นร์ะบบ Windows ร์ะบบ UNIX หร์�อิร์ะบบป็ฏิ�บ�ต�กัาร์อิ��น กั�สามาร์ถึท��จะเร์�ยกัด/จากัเคร์��อิงคอิมพิ�วเตอิร์�ท��ใชื่*ร์ะบบป็ฏิ�บ�ต�กัาร์ต�างจากัคอิมพิ�วเตอิร์�ท��เป็#นเคร์��อิงแม�ข่�ายได*
ข่*อิม/ลท��น(าเสนอิในเคร์�อิข่�ายอิ�นเทอิร์�เน�ตเป็#นข่*อิม/ลท��ม�ป็ร์�มาณมากั จากัท��วท)กัม)มโลกั โดยผ่/*ใชื่*งานจากัสถึานท��ต�าง ๆ สามาร์ถึเชื่��อิมต�อิเข่*าร์ะบบอิ�นเทอิร์�เน�ตได* และสามาร์ถึเร์�ยกัด/ข่*อิม/ลท��สนใจได*ตลอิดเวลา ด�งน�+นข่*อิม/ลในร์ะบบอิ�นเทอิร์�เน�ตจ�งสามาร์ถึเผ่ยแพิร์�ได*อิย�างร์วดเร์�ว
เม��อิเว�บเพิจเป็#นส��อิส(าหร์�บน(าเสนอิข่*อิม/ลอิอิกัทางร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต ท��ได*ร์�บความสนใจเป็#นอิย�างมากั ด�งน�+นกัาร์เร์�ยนร์/ *เทคโนโลย�ด*านน�+เพิ��อิน(ามาพิ�ฒนาในกัาร์สร์*างเว�บเพิจจ�งเป็#นส��งท��น�าสนใจ โดยภาษาคอิมพิ�วเตอิร์�ท��ใชื่*ส(าหร์�บกัาร์พิ�ฒนาเว�บเพิจ ค�อิภาษาท��เร์�ยกัว�าภาษาเอิชื่ท�เอิ�มแอิล (HTML) และโป็ร์แกัร์มท��ใชื่*ส(าหร์�บตร์วจสอิบเว�บเพิจท��ได*พิ�ฒนาข่�+น เร์�ยกัว�าโป็ร์แกัร์ม เว�บเบร์าว�เซึ่อิร์� (Web Browser)
ภ�ษ�เอชื่ที่�เอ มแอล
ภาษาเอิชื่ท�เอิ�มแอิล (HyperText Markup Language :
HTML)เป็#นภาษาคอิมพิ�วเตอิร์�ภาษาหน��ง เพิ��อิใชื่*น(าเสนอิเอิกัสาร์เผ่ยแพิร์�ในร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตท��เป็#นล�กัษณะเหม�อินใยแมงม)มท��เชื่��อิมต�อิกั�นท��วโลกั (World Wide Web : WWW) โคร์งสร์*างกัาร์เข่�ยนภาษาน�+นจะอิาศึ�ยต�วกั(ากั�บเร์�ยกัว�า แท�กั (Tag) หร์�อิป็Aายร์ะบ)กัาร์แสดงผ่ล เป็#นต�วควบค)มกัาร์แสดงผ่ลข่อิงข่*อิความ ร์/ป็ภาพิ หร์�อิว�ตถึ)อิ��นท��แสดงผ่ลผ่�านทางโป็ร์แกัร์มเบร์าว�เซึ่อิร์� (Browser)
ป3�ยรูะบ+ก�รูแสดงผล
ป็Aายร์ะบ)กัาร์แสดงผ่ลหร์�อิ แท�กั เป็#นล�กัษณะเฉพิาะข่อิงภาษาเอิชื่ท�เอิ�มแอิล ใชื่*ส(าหร์�บกัาร์ร์ะบ)ร์/ป็แบบข่อิงค(าส��งหร์�อิกัาร์ลงร์ห�สค(าส��งข่อิงภาษาเอิชื่ท�เอิ�มแอิล ซึ่��งงจะอิย/�ร์ะหว�างเคร์��อิงหมายน*อิยกัว�า (<)
และเคร์��อิงหมาย (>) โดยท��ป็Aายร์ะบ)กัาร์แสดงผ่ลหร์�อิ แท�กั ข่อิงภาษาเอิชื่ท�เอิ�มแอิลน�+ สามาร์ถึแบ�งได* 2 ล�กัษณะค�อิ
1. ป็Aายร์ะบ)กัาร์แสดงผ่ลเด��ยวหร์�อิแท�กัเด��ยว เป็#นป็Aายร์ะบ)กัาร์แสดงผ่ลท��ไม�ต*อิงม�กัาร์ป็7ดร์ห�ส เชื่�น <P> , <HR>
เป็#นต*น2. ป็Aายร์ะบ)กัาร์แสดงผ่ลเป็7ด/ป็7ดหร์�อิแท�กัเป็7ด/ป็7ด เป็#นป็Aายร์ะบ)
กัาร์แสดงผ่ลท��ป็ร์ะกัอิบด*วยป็Aายร์ะบ)กัาร์แสดงผ่ลเป็7ดหร์�อิแท�กัเป็7ด และป็Aายร์ะบ)กัาร์แสดงผ่ลป็7ดหร์�อิแท�กัป็7ด โดยป็Aายร์ะบ)กัาร์แสดงผ่ลป็7ดจะม�เคร์��อิงหมาย สแลชื่ (Slash,/) น(าหน*าค(าส��งในป็Aายร์ะบ)กัาร์แสดงผ่ลน�+น ๆ เชื่�น <H1>…</H1>,<B>…</B> เป็#นต*น โดยถึ*าท(ากัาร์เป็7ดด*วยค(าส��งใด จะต*อิงท(ากัาร์เป็7ดด*วยค(าส��งน�+น
ก�รูก��หนดค+ณล-กษณะพิ�เศึษเพิ��มเต่�มข่องค��ส-�ง
กัาร์กั(าหนดค)ณล�กัษณะพิ�เศึษเพิ��มเต�มข่อิงค(าส��ง (Attributes) เป็#นส�วนข่ยายความสามาร์ถึข่อิงป็Aายร์ะบ)กัาร์แสดงผ่ลหร์�อิแท�กั ซึ่��งจะอิย/�ภายใต*เคร์��อิงหมาย < > ในส�วนแท�กัเป็7ดเท�าน�+น โดยแท*กัค(าส��งเอิชื่ท�เอิ�มแอิล (HTML) ในแต�ละค(าส��งจะม�กัาร์กั(าหนดค)ณล�กัษณะพิ�เศึษเพิ��มเต�มแตกัต�างกั�นอิอิกัไป็ และกัาร์ร์ะบ)กัาร์กั(าหนดค)ณล�กัษณะพิ�เศึษเพิ��มเต�มท��มากักัว�า 1
ค)ณล�กัษณะ จะใชื่*ชื่�อิงว�างเป็#นต�วแยกั ต�วอิย�างเชื่�น แท�กัส(าหร์�บควบค)มเกั��ยวกั�บร์/ป็ภาพิ ค�อิ <IMG> ม�กัาร์กั(าหนดค)ณล�กัษณะพิ�เศึษเพิ��มเต�มด�งน�+
<IMG SRC=“filename” WIDTH= “HEIGHT=“n” ALT= “text” BORDER=“n”>
SRC ใชื่*ส(าหร์�บกั(าหนดแฟัAมข่*อิม/ลร์/ป็ภาพิท��จะน(ามาแสดงผ่ล
WIDTH ใชื่*ส(าหร์�บกัาร์กั(าหนดความกัว*างข่อิงภาพิ
HEIGHT ใชื่*ส(าหร์�บกัาร์กั(าหนดความส/งข่อิงภาพิ
ALT ใชื่*ส(าหร์�บกัาร์กั(าหนดค(าอิธุ�บายภาพิ
BORDER ใชื่*ส(าหร์�บกัาร์กั(าหนดข่นาดข่อิงเส*นข่อิบข่อิงภาพิ
แฟัAมเอิกัสาร์ท��เป็#นภาษาเอิชื่ท�เอิ�มแอิล (HTML) น�+น เป็#นแฟัAมข่*อิม/ลชื่น�ดข่*อิความร์/ป็แบบหน��ง (Text Files) ท��เกั�บชื่)ดค(าส��งภาษาเอิชื่ท�เอิ�มแอิล ด�งน�+นกัาร์สร์*างเอิกัสาร์เอิชื่ท�เอิ�มแอิล จ�งสามาร์ถึใชื่*โป็ร์แกัร์มส(าหร์�บจ�ดกัาร์แฟัAมข่*อิม/ลต�วอิ�กัษร์ (Text Editor) ท��วไป็ในกัาร์แกั*ไข่เอิกัสาร์เอิชื่ท�เอิ�มแอิลได* เชื่�น โป็ร์แกัร์ม Notepad,โป็ร์แกัร์ม WordpadThai เป็#นต*น
โปรูแกรูมเว็ บเบรู�ว็�เซอรู� (Web Browser)
เอิกัสาร์ท��สร์*างโดยใชื่*ภาษาเอิชื่ท�เอิ�มแอิลน�+น จะต*อิงอิาศึ�ยโป็ร์แกัร์มส(าหร์�บใชื่*ในกัาร์แสดงผ่ลบนจอิภาพิ โดยโป็ร์แกัร์มท��ท(าหน*าท��แสดงผ่ลเอิกัสาร์เอิชื่ท�เอิ�มแอิลน�+เร์�ยกัว�า โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� (Web
Browser) โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�ได*ถึ/กัสร์*างจากัหลายบร์�ษ�ท แต�ท��ได*ร์�บความน�ยมและใชื่*กั�นอิย�างแพิร์�หลาย เชื่�น โป็ร์แกัร์ม Netscape
Navigator, Netscape Communicator ข่อิงบร์�ษ�ท Netscape
หร์�อิโป็ร์แกัร์ม Microsoft Explorer ข่อิงบร์�ษ�ทไมโคร์ซึ่อิฟัต� นอิกัจากัน�+ย�งม�อิ�กัหลายโป็ร์แกัร์ม เชื่�น Mosaic , Lynx , Mac Web , Cello ,
Opera เป็#นต*น
โปรูแกรูมสรู)�งเอกส�รูเว็ บ
กัาร์พิ�ฒนาเว�บเพิจน�+นสามาร์ถึกัร์ะท(าได*โดยกัาร์เข่�ยนด*วยภาษาเอิชื่ท�เอิ�มแอิล (HTML) ซึ่��งม�ล�กัษณะเหม�อินกั�บกัาร์เข่�ยนโป็ร์แกัร์มภาษาคอิมพิ�วเตอิร์�ท��วไป็ ซึ่��งอิาจสร์*างโดยใชื่*โป็ร์แกัร์มส(าหร์�บจ�ดกัาร์เกั��ยวกั�บแฟัAมข่*อิความต�วอิ�กัษร์ (Text Editor) เชื่�น โป็ร์แกัร์ม Notepad
ในป็2จจ)บ�นม�โป็ร์แกัร์มส(าหร์�บใชื่*เป็#นเคร์��อิงม�อิในกัาร์ชื่�วยพิ�ฒนาเว�บเพิจมากัมาย ท�+งแบบชื่�วยลงร์ห�สภาษาเอิชื่ท�เอิ�มแอิล และแบบสร์*างเว�บเพิจแบบอิ�ตโนม�ต� (Wizard) ท�+งน�+สามาร์ถึจ(าแนกัว�ธุ�กัาร์พิ�ฒนาเว�บเพิจด*วยโป็ร์แกัร์มได* 3 ว�ธุ� ค�อิ
ก�รูใชื่)โปรูแกรูมจำ-ดก�รูแฟ้3มข่)อคว็�มต่-ว็อ-กษรู (TEXT Editor)
กัาร์ใชื่*โป็ร์แกัร์มจ�ดกัาร์แฟัAมข่*อิความต�วอิ�กัษร์ (Text
Editor) เชื่�น Notepad , Q-editor น�+นเป็#นว�ธุ�ท��เหมาะส(าหร์�บผ่/*ท��ม�ความร์/ *เกั��ยวกั�บภาษาเอิชื่ท�เอิ�มแอิล ซึ่��งสามาร์ถึจ�ดวางต(าแหน�งหร์�อิใส�ค)ณล�กัษณะพิ�เศึษให*กั�บเว�บเพิจตามต*อิงกัาร์ เพิร์าะสามาร์ถึควบค)มต(าแหน�งและจ(านวนร์ห�สค(าส��งได*อิ�สร์ะ อิย�างไร์กั�ตามว�ธุ�น�+ไม�เหมาะส(าหร์�บผ่/*พิ�ฒนาในร์ะด�บต*น เพิร์าะต*อิงศึ�กัษาค(าส��งภาษาเอิชื่ท�เอิ�มแอิลและใชื่*เวลาในกัาร์พิ�ฒนานานพิอิสมควร์ในแต�ละหน*าเว�บ และไม�เห�นผ่ลล�พิธุ�จากักัาร์ป็Aอินค(าส��งท�นท� แต�จะต*อิงท(ากัาร์เร์�ยกัผ่�านโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� แต�ถึ*าหากัท(ากัาร์เร์��มต*นฝึDกักัาร์พิ�ฒนาเว�บเพิจด*วยว�ธุ�กัาร์น�+ โดยม�ผ่/*ท��ม�ความร์/ *คอิยแนะน(า จะท(าให*สามาร์ถึเข่*าใจกัาร์ท(างานข่อิงเอิกัสาร์เว�บได*ล�กัซึ่�+งมากัย��งข่�+น
ก�รูใชื่)โปรูแกรูมเอชื่ที่�เอ มแอล อ�ด�เต่อรู� (HTML Editor)
โป็ร์แกัร์มเอิชื่ท�เอิ�มแอิล อิ�ด�เตอิร์� จะชื่�วยท(าให*กัาร์ลงร์ห�สภาษาเอิชื่ท�เอิ�มแอิลน�+น กัร์ะท(าได*สะดวกัและร์วดเร์�วมากัย��งข่�+น เน��อิงจากัจะม�ป็)<มค(าส��งควบค)มต�าง ๆ ข่อิงภาษาเอิชื่ท�เอิ�มแอิล ซึ่��งคล*ายกั�บป็)<มค(าส��งในกัาร์ป็ร์ะมวลผ่ลค(า เชื่�น กัล)�มข่อิงโป็ร์แกัร์มไมโคร์ซึ่อิฟัต�อิอิฟัฟั7ศึ (Microsoft
Office) โป็ร์แกัร์มกัล)�มน�+จะม�จ)ดด*อิยท�� หากัม�ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลใหม�เกั�ดข่�+น จะย�งไม�ม�ป็)<มส(าหร์�บค(าส��งใหม�เหล�าน�+ ผ่/*สร์*างเอิกัสาร์เว�บด*วยว�ธุ�กัาร์น�+ย�งต*อิงพิ�มพิ�ค(าส��งภาษาเอิชื่ท�เอิ�มแอิล เชื่�นเด�ม ต�วอิย�างข่อิงโป็ร์
แกัร์มเอิชื่ท�เอิ�มแอิล อิ�ด�เตอิร์� เชื่�น โป็ร์แกัร์ม HTML Assistant ,
โป็ร์แกัร์ม Hotdog Professional เป็#นต*น
ก�รูใชื่)โปรูแกรูมสรู)�งเอกส�รูเว็ บแบบอ-ต่โนม-ต่� (HTML
Generator)
โป็ร์แกัร์มส(าหร์�บสร์*างเอิกัสาร์เว�บแบบอิ�ตโนม�ต� เป็#นโป็ร์แกัร์มท��ได*ร์�บกัาร์พิ�ฒนาข่�+นเพิ��อิชื่�วยให*กัาร์พิ�ฒนาเอิกัสาร์เว�บน�+น สามาร์ถึท(าได*สะดวกัและร์วดเร์�ว กัาร์ใชื่*งานโป็ร์แกัร์มเหล�าน�+ จะคล*ายกั�บกัาร์สร์*างเอิกัสาร์ในโป็ร์แกัร์มป็ร์ะมวลค(าท��วไป็ เชื่�น โป็ร์แกัร์มไมโคร์ซึ่อิฟัต�เว�ร์�ด (Microsoft
Word) และม�ป็)<มค(าส��งท��คล*ายคล�งกั�น และผ่/*ท��ท(ากัาร์สร์*างเว�บเพิจน�+นสามาร์ถึเห�นผ่ลจากักัาร์ใชื่*ค(าส��งได*ท�นท� โดยโป็ร์แกัร์มป็ร์ะเภทน�+จะท(ากัาร์แป็ลงเอิกัสาร์น�+นให*เป็#นเอิกัสาร์เอิชื่ท�เอิ�มแอิลโดยอิ�ตโนม�ต� ซึ่��งท��ผ่/*ท��ท(ากัาร์สร์*างเว�บเพิจไม�ต*อิงย)�งยากักั�บกัาร์นศึ�กัษาชื่)ดค(าส��งภาษาเอิชื่ท�เอิ�มแอิล แต�โป็ร์แกัร์มในกัล)�มน�+กั�ม�จ)ดด*อิยท��ว�า ชื่)ดค(าส��งภาษาเอิชื่ท�เอิ�มแอิลท��แต�ละโป็ร์แกัร์มสร์*างข่�+นมาน�+นจะม�ข่*อิจ(ากั�ดต�าง ๆ มากัมาย และบางโป็ร์แกัร์มย�งไม�สน�บสน)นกัาร์ท(างานกั�บภาษาไทย อิาจต*อิงท(ากัาร์ป็ร์�บป็ร์)งโป็ร์แกัร์มกั�อิน จ�งจะใชื่*งานกั�บภาษาไทยได* ต�วอิย�างข่อิงโป็แกัร์มในกัล)�ม เชื่�น กัล)�มโป็ร์แกัร์มไมโคร์ซึ่อิฟัต�อิอิฟัฟั7ศึ , โป็ร์แกัร์ม Microsoft FrontPage ,
โป็ร์แกัร์ม Netscape Editor , โป็ร์แกัร์ม Macromedia
Dreamweaver เป็#นต*น
ใบง�นหน�ว็ยก�รูเรู�ยนรู�)ที่�� 1
ก�รูที่��ง�นข่องรูะบบเว็ บเพิจำ
ว็-ต่ถ+ปรูะสงค�
1. ม�ท�กัษะในกัาร์ใชื่*งานโป็ร์แกัร์มเว�บบร์าว�เซึ่อิร์� ในกัาร์ค*นหาท��อิย/�ทางอิ�นเทอิร์�เน�ตข่อิงแต�ละอิงค�กัร์
2. บอิกัความแตกัต�างร์ะหว�างชื่��อิโดเมนข่อิงแต�ละอิงค�กัร์อ+ปกรูณ� เคร์��อิงคอิมพิ�วเตอิร์� ท��ม�ค)ณสมบ�ต�ด�งต�อิไป็น�+
1. สามาร์ถึเชื่��อิมต�อิกั�บร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต2. ต�ดต�+งโป็ร์แกัร์มเว�บบร์าว�เซึ่อิร์�
ก�รูที่ดลอง
1. ท(ากัาร์เป็7ดโป็ร์แกัร์มเว�บบร์าว�เซึ่อิร์� ในท��น�+ค�อิโป็ร์แกัร์ม Internet Exploer
2. พิ�มพิ�ท��อิย/�ทางอิ�นเทอิร์�เน�ตข่อิงเว�บเพิจท��ใชื่*ส(าหร์�บค*นหาข่*อิม/ล เชื่�น www.google.co.th
3.ท(ากัาร์ค*นหาต(าแหน�งท��อิย/�ทางอิ�นเทอิร์�เน�ตข่อิงร์ะบบเว�บเพิจ เร์�ยกัว�า ย/อิาร์�แอิล (URL:Uniform
Resource Locator) ข่อิงอิงค�กัร์ด�งต�อิไป็น�+ พิร์*อิมท�+งบอิกัชื่��อิข่อิงอิงค�กัร์มาอิย�างละ 2 แห�ง
3.1 สถึานศึ�กัษา 1
……………………………………………………………………………………………………. ……………………………………………………………………………………………………. …………………………………………………………………………………………………….
3.2 หน�วยงานข่อิงร์�ฐบาล
……………………………………………………………………………………………………. ……………………………………………………………………………………………………. …………………………………………………………………………………………………….
3.3 บร์�ษ�ทเอิกัชื่น
……………………………………………………………………………………………………. …………………………………………………………………………………………………….
…………………………………………………………………………………………………….
สร์)ป็ ความแตกัต�างข่อิงชื่��อิโดเมนข่อิงแต�ละอิงค�กัร์ ……………………………………………………………………………………………………. ……………………………………………………………………………………………………. ……………………………………………………………………………………………………. ……………………………………………………………………………………………………. ……………………………………………………………………………………………………. ……………………………………………………………………………………………………. …………………………………………………………………………………………………….
แบบปรูะเม�นต่นเอง
ชื่��อิ-
สกั)ล……………………………………………………………………
…………………………………
ร์ะด�บชื่�+น เลข่………………………………………
ท��………………………………………………………..
ค(าชื่�+แจง
ให*น�กัเร์�ยนท(าแบบฝึDกัห�ดและใบงานป็ร์ะจ(าบทเร์�ยน จากัน�+นท(ากัาร์ป็ร์ะเม�นตนเอิงตามความจร์�งในห�วข่*อิต�อิไป็น�+
ห�วข่*อิร์ะด�บความร์/ *และความเข่*าใจ
ด�มากั(4)
ด�(3)
ป็านกัลาง(2)
พิอิใชื่*(1)
ป็ร์�บป็ร์)ง
(0)อิ�นเทอิร์�เน�ต
ความส(าค�ญ่ข่อิงอิ�นเทอิร์�เน�ตหมายเลข่ไอิพิ�ร์ะบบชื่��อิโดเมนเทคโนโลย�เว�บเพิจภาษาเอิชื่ท�เอิ�มแอิลโป็ร์แกัร์มสร์*างเอิกัสาร์เว�บ
ร์ะด�บคะแนนเฉล��ย =…………………………………………………………..
0-0.5 = ต*อิงป็ร์�บป็ร์)ง
0.6-1.5 = พิอิใชื่*
1.6-2.5 = ป็านกัลาง
2.6-3.5 = ด�
3.6-4.0 = ด�มากั
แบบปรูะเม�นผลก�รูเรู�ยนรู�)
1. ข่*อิใดกัล�าวถึ�งอิ�นเทอิร์�เน�ต ไม�ถึ/กัต*อิง กั. อิ�นเทอิร์�เน�ต หมายถึ�ง ร์ะบบเคร์�อิข่�ายคอิมพิ�วเตอิร์�ท��เชื่��อิมโยงกั�นท��วโลกั ข่. อิ�นเทอิร์�เน�ต เป็ร์�ยบเสม�อินห*อิงสม)ดข่นาดใหญ่�ท��ม�แหล�งข่*อิม/ลมากัมาย ค. อิ�นเทอิร์�เน�ต หมายถึ�ง เคร์��อิงคอิมพิ�วเตอิร์�ท��ม�หน*าท��เป็#นเคร์��อิงแม�ข่�าย ง. อิ�นเทอิร์�เน�ต ม�ร์ะบบโป็ร์โตคอิลท��ใชื่*เป็#นมาตร์ฐานในกัาร์ร์�บส�งข่*อิม/ลในร์ะบบเคร์�อิข่�าย 2. ข่*อิใดหมายถึ�งหมายเลข่ท��ใชื่*ร์�บกัาร์อิ*างอิ�งให*กั�บเคร์��อิงคอิมพิ�วเตอิร์�ท��เชื่��อิมต�อิกั�นซึ่��งจะไม�ซึ่(+า กั�บเคร์��อิงอิ��น ๆ กั. หมายเลข่ไอิพิ� ข่. หมายเลข่โดเมน ค. หมายเลข่โป็ร์โตคอิล ง. หมายเลข่เคร์��อิง3. ข่*อิใดหมายถึ�งข่*อิกั(าหนดในกัาร์ส��อิสาร์ข่*อิม/ลร์ะหว�างเคร์��อิงคอิมพิ�วเตอิร์�แต�ละเคร์��อิงใน ร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต กั. ไอิพิ� ข่. โดเมน ค. โป็ร์โตคอิล ง. ภาษาเคร์��อิง4. ข่*อิใดค�อิหมายเลข่ไอิพิ� (IP Address) ท��ไม�ถึ/กัต*อิง กั. 1.2.3.4
ข่. 123.45.67.89
ค. 12.34.56.78
ง. 12.34.56.789
5. ชื่��อิโดเมนร์ะด�บท�� 1 ท��ใชื่* .gov น�+นหมายถึ�งอิงค�กัร์ในข่*อิใด กั. หน�วยงานข่อิงร์�ฐบาล ข่. หน�วยงานเอิกัชื่น ค. หน�วยงานทางด*านทหาร์ ง. หน�วยงานทางกัาร์ศึ�กัษา
6. ชื่��อิโดเมนร์ะด�บท�� 2 ในป็ร์ะเทศึไทยท��ใชื่* .ac น�+นหมายถึ�งอิงค�กัร์ในข่*อิใด กั. หน�วยงานข่อิงร์�ฐบาล ข่. หน�วยงานเอิกัชื่น ค. หน�วยงานทางด*านทหาร์ ง. หน�วยงานทางกัาร์ศึ�กัษา7. โป็ร์โตคอิลใดท��ใชื่*กั�บร์ะบบอิ�นเทอิร์�เน�ตในป็2จจ)บ�น กั. DARPA
ข่. ARPA
ค. TCP/IP
ง. UDP
8. ร์ะบบอิ�นเทอิร์�เน�ตในป็ร์ะเทศึไทยได*ถึ/กัน(ามาใชื่*งานในหน�วยงานใดเป็#นหน�วยงานแร์กั กั. หน�วยงานทางกัาร์ศึ�กัษา ข่. หน�วยงานข่อิงเอิกัชื่น ค. หน�วยงานข่อิงร์�ฐบาล ง. หน�วยงานทางด*านทหาร์9. หน�วยงานใดเป็#นผ่/*ร์ �บผ่�ดชื่อิบในกัาร์ด/แลร์ะบบชื่��อิโดเมน (Domain
Name) ในป็ร์ะเทศึไทย กั. ศึ/นย�บร์�กัาร์และด/แลโดเมนแห�งป็ร์ะเทศึไทย
ข่. ศึ/นย�สาร์สนเทศึเคร์�อิข่�ายป็ร์ะเทศึไทย ค. ส(าน�กังานสาร์สนเทศึ ง. สถึาบ�นเทคโนโลย�สาร์สนเทศึและเคร์�อิข่�าย10. ข่*อิใดค�อิความหมายข่อิงค(าว�า Hyper Text ท��ถึ/กัต*อิงท��ส)ด กั. เอิกัสาร์ท��ใชื่*ส(าหร์�บกัาร์น(าเสนอิข่*อิม/ลโดยใชื่*ร์ะบบเว�บเพิจ ข่. เอิกัสาร์ท��เสม�อินว�าผ่/*ใชื่*งานสามาร์ถึท(ากัาร์โต*ตอิบกั�บเอิกัสาร์น�+นได* ค. เอิกัสาร์ท��สามาร์ถึเชื่��อิมโยงไป็ย�งจ)ดอิ��นบนเว�บไซึ่ต�เด�ยวกั�น ง. เอิกัสาร์ท��เกั�บไว*บนเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�ายข่อิงร์ะบบอิ�นเทอิร์�เน�ต11. เอิชื่ท��เอิ�มแอิล (HTML) ค�อิอิะไร์ กั. ภาษาคอิมพิ�วเตอิร์�ท��ใชื่*ส(าหร์�บควบค)มกัาร์แสดงเอิกัสาร์บนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต ข่. ว�ธุ�กัาร์เชื่��อิมโยงข่*อิม/ลร์ะหว�างเคร์��อิงคอิมพิ�วเตอิร์�บนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต ค. เคร์��อิงคอิมพิ�วเตอิร์�ท��ท(าหน*าท��ให*บร์�กัาร์เอิกัสาร์เว�บบนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต ง. ร์ะบบป็ฏิ�บ�ต�กัาร์ท��น�ยมใชื่*บนเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�ายข่อิงร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต12. ข่*อิใดใชื่*ส(าหร์�บควบค)มกัาร์แสดงผ่ลข่อิงร์ะบบข่อิงเอิชื่ท�เอิ�มแอิล (HTML)
กั. ป็Aายร์ะบ)กัาร์แสดงผ่ล หร์�อิแท�กั ข่. โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� ค. ร์ะบบป็ฏิ�บ�ต�กัาร์ท��ใชื่*งานบนเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�าย ง. เคร์��อิงคอิมพิ�วเตอิร์�ท��ใชื่*ส(าหร์�บแสดงผ่ลข่*อิม/ล13. ป็Aายร์ะบ)กัาร์แสดงผ่ล (Tag) ในข่*อิใด เป็#นป็Aายร์ะบ)กัาร์แสดงผ่ลเด��ยว กั. <B>
ข่. <BR>
ค. <TITLE>
ง. <BODY>
14. ป็Aายร์ะบ)กัาร์แสดงผ่ลค/� ในส�วนข่อิงป็Aายร์ะบ)กัาร์แสดงผ่ลป็7ดน�+นจะใชื่*เคร์��อิงหมายใดน(าหน*า ค(าส��งเพิ��อิท(ากัาร์ป็7ดค(าส��ง กั. เคร์��อิงหมาย \ ข่. เคร์��อิงหมาย / ค. เคร์��อิงหมาย * ง. เคร์��อิงหมาย #15. โป็ร์แกัร์มในข่*อิใดใชื่*ส(าหร์�บจ�ดกัาร์แฟัAมเอิกัสาร์ท��เป็#นแฟัAมข่*อิม/ลต�วอิ�กัษร์ ข่อิง ร์ะบบป็ฏิ�บ�ต�กัาร์ไมโคร์ซึ่อิฟัต�ว�นโดวส� (Microsoft Windows)
กั. ไมโคร์ซึ่อิฟัต� เว�ร์�ด (Microsoft Word)
ข่. ไมโคร์ซึ่อิฟัต� เพิาเวอิร์� พิอิยต� (Microsoft Power Point)
ค. โน*ตแพิ�ด (Notepad)
ง. อิ�นเทอิร์�เน�ต เอิ�กัซึ่�โพิลเร์อิร์� (Internet Explorer)
16. ข่*อิใดค�อิโป็ร์แกัร์มเว�บบร์าว�เซึ่อิร์� ท��ใชื่*ส(าหร์�บแสดงผ่ลข่*อิม/ลภาษาเอิชื่ท�เอิ�มแอิล ร์ะบบป็ฏิ�บ�ต�กัาร์ไมโคร์ซึ่อิฟัต�ว�นโดวส� (Microsoft Windows)
กั. อิ�นเทอิร์�เน�ต เอิ�กัซึ่�โพิลเร์อิร์� (Internet Explorer)
ข่. เนตสแค�ป็ เนว�เกัเตอิร์� (Netscape Navigator)
ค. โมเซึ่อิ�กั (Mosaic)
ง. ถึ/กัท)กัข่*อิ17. ข่*อิใดกัล�าวไม�ถึ/กัต*อิงในกัาร์ใชื่*โป็ร์แกัร์มจ�ดกัาร์แฟัAมข่*อิความอิ�กัษร์ในกัาร์สร์*างเอิกัสาร์เว�บ
กั. ผ่/*ท��สร์*างเอิกัสาร์เว�บสามาร์ถึควบค)มต(าแหน�งและจ(านวนข่อิงร์ห�สได*อิย�างอิ�สร์ะ ข่. ผ่/*ท��สร์*างเอิกัสาร์เว�บสามาร์ถึเห�นผ่ลท��เกั�ดจากัค(าส��งท��กั(าหนดกัาร์แสดงผ่ลได*โดยท�นท� ค. หากัผ่/*ท��เร์��มต*นสร์*างเอิกัสาร์เว�บ เร์��มต*นจากัว�ธุ�กัาร์น�+จะสามาร์ถึเข่*าใจกัาร์ท(างานได*ด�ข่�+น ง. เหมาะส(าหร์�บผ่/*ท��ม�ความร์/ *เกั��ยวกั�บภาษาเอิชื่ท�เอิ�มแอิล ในกัาร์สร์*างเอิกัสาร์เว�บ18. โป็ร์แกัร์มท��ใชื่*ในกัาร์สร์*างเอิกัสาร์เว�บในข่*อิใด ม�ป็)<มควบค)มต�าง ๆ คล*ายกั�บโป็ร์แกัร์ม ไมโคร์ซึ่อิฟัต� อิอิฟัฟั7ศึ (Microsoft Office)
กั. Q-Editor
ข่. Notepad
ค. HTML Editor
ง. ถึ/กัท)กัข่*อิ19. โป็ร์แกัร์มคอิมพิ�วเตอิร์�ในข่*อิใด จ�ดอิย/�ในกัล)�มข่อิงโป็ร์แกัร์มสร์*างเอิกัสาร์เว�บแบบอิ�ตโนม�ต� (HTML Generator)
กั. Ms-Office 97
ข่. FrontPage
ค. Macromedia Dreamweaver
ง. ถึ/กัท)กัข่*อิ20. ข่*อิใดกัล�าวถึ�งป็ร์ะโยชื่น�ในกัาร์น(าเอิาร์ะบบอิ�นเทอิร์�เน�ตเข่*ามาใชื่*ในด*านธุ)ร์กั�จ
กั. ใชื่*ในกัาร์ค*นหาข่*อิม/ลเพิ��อิชื่�วยในกัาร์ต�ดส�นใจทางด*านข่*อิม/ล ข่. ใชื่*เป็#นชื่�อิงทางในกัาร์ป็ร์ะชื่าส�มพิ�นธุ�บร์�ษ�ท ค. ใชื่*ส(าหร์�บเป็#นชื่�อิงทางในกัาร์ซึ่�+อิข่ายส�นค*าผ่�านทางร์ะบบอิ�นเทอิร์�เน�ต ง. ถึ/กัท)กัข่*อิ
ต่อนที่�� 2 ต่อบค��ถ�มต่�อไปน�61. อิธุ�บายความหมายข่อิงร์ะบบอิ�นเทอิร์�เน�ตมาพิอิส�งเข่ป็ ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. …………………………………………………………………………………………………………….
……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. …………………………………………………………………………………………………………….
2. อิธุ�บายความหมายข่อิงโดเมน (Domain) ด�งต�อิไป็น�+ โดเมนชื่��อิย�อิป็ร์ะเทศึ 2.1 .th แทนชื่��อิป็ร์ะเทศึ………………………………………………….
2.2 .fr แทนชื่��อิป็ร์ะเทศึ…………………………………………………..
2.3 .uk แทนชื่��อิป็ร์ะเทศึ…………………………………………………..
2.4 .jp แทนชื่��อิป็ร์ะเทศึ…………………………………………………..
2.5 .au แทนชื่��อิป็ร์ะเทศึ…………………………………………………..
โดเมนย�อิยแทนอิงค�กัร์ในป็ร์ะเทศึ 2.6 .ac เป็#นหน�วยข่อิงอิงค�กัร์………………………………………………
2.7 .co เป็#นหน�วยข่อิงอิงค�กัร์………………………………………………
2.8 .co เป็#นหน�วยข่อิงอิงค�กัร์………………………………………………
2.9 .net เป็#นหน�วยข่อิงอิงค�กัร์………………………………………………
2.10 .gov เป็#นหน�วยข่อิงอิงค�กัร์………………………………………………
3. จงอิธุ�บายความหมายข่อิงหมายเลข่ไอิพิ� (IP Address) และโดเมนเนม (Domain Name) มาพิอิส�งเข่ป็ ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. …………………………………………………………………………………………………………….
4. กัาร์สร์*างและพิ�ฒนาเอิกัสาร์เว�บสามาร์ถึท(าได*กั��ว�ธุ�อิะไร์บ*าง พิร์*อิมท�+งอิธุ�บายพิอิส�งเข่ป็ ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. …………………………………………………………………………………………………………….
……………………………………………………………………………………………………………. ……………………………………………………………………………………………………………. …………………………………………………………………………………………………………….
5. จงหาต(าแหน�งท��อิย/�ทางอิ�นเทอิร์�เน�ตข่อิงร์ะบบเว�บเพิจ เร์�ยกัว�า ย/อิาร์�แอิล (URL : Uniform Resource
Locator) ข่อิงอิงค�กัร์ด�งต�อิไป็น�+ พิร์*อิมท�+งบอิกัชื่��อิข่อิงอิงค�กัร์มาอิย�างละ 2 แห�ง 5.1 สถึานศึ�กัษา ……………………………………………………………………………………………………………. …………………………………………………………………………………………………………….
5.2 หน�วยงานข่อิงร์�ฐบาล ……………………………………………………………………………………………………………. …………………………………………………………………………………………………………….
5.3 บร์�ษ�ทเอิกัชื่น ……………………………………………………………………………………………………………. …………………………………………………………………………………………………………….
หน�ว็ยที่�� 2ก�รูออกแบบเว็ บเพิจำเบ�6องต่)น
หล-กก�รูออกแบบเว็ บเพิจำ ว�ธุ�กัาร์อิอิกัแบบและพิ�ฒนาเว�บเพิจน�+นสามาร์ถึท(าได*หลายร์/ป็แบบ ข่�+นอิย/�กั�บล�กัษณะข่อิงข่*อิม/ลท��ใชื่*ใชื่*น(าเสนอิในเอิกัสาร์เว�บ ความ
พิ�งพิอิใจข่อิงผ่/*ท��ท(ากัาร์สร์*าง ตลอิดจนกัล)�มเป็Aาหมายหล�กัท��ต*อิงกัาร์ให*เป็#นผ่/*อิ�านข่*อิม/ลในเอิกัสาร์เว�บเหล�าน�+น ต�วอิย�างเชื่�น หากักัล)�มเป็Aาหมายเป็#นเด�กัว�ยร์) �น ควร์น(าเสนอิข่*อิม/ลเกั��ยวกั�บความสนใจข่อิงกัล)�มว�ยร์) �น เชื่�น ข่*อิม/ลทางด*านบ�นเท�ง และควร์อิอิกัแบบให*ม�ล)กัเล�นท��หลากัหลาย ม�ส�ส�นสดใสเป็#นท��น�าสนใจส(าหร์�บว�ยร์) �น เป็#นต*น หากัเป็#นเว�บเพิจท��เกั��ยวข่*อิงทางด*านว�ชื่ากัาร์ จะให*ความส(าค�ญ่กั�บเน�+อิหาท��ข่*อิความมากักัว�าส�ส�นท��ใชื่*ในเว�บเพิจ กัาร์อิอิกัแบบและพิ�ฒนาเว�บเพิจน�+นควร์ม�กัาร์วางแผ่นกั�อินกัาร์พิ�ฒนาเสมอิ เน��อิงจากัร์ะบบคอิมพิ�วเตอิร์�ท��ใชื่*งานอิย/�บนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ตน�+นเป็#นร์ะบบท��หลากัหลาย ร์ะบบป็ฏิ�บ�ต�กัาร์ (Operating
System : OS) ท��ใชื่*งานในร์ะบบเคร์�อิข่�ายกั�หลากัหลาย ต�วอิย�าง เชื่�น หากัข่ณะท��สร์*างเอิกัสาร์เว�บน�+น ผ่/*ท��ท(ากัาร์พิ�ฒนาเว�บใชื่*คอิมพิ�วเตอิร์�ท��ม�ร์ะบบป็ฏิ�บ�ต�กัาร์ท��เป็#นโป็ร์แกัร์มไมโคร์ซึ่อิฟัต�ว�นโดวส� (Microsoft
Windows)
หล�งจากัท��ท(ากัาร์พิ�ฒนาเสร์�จแล*วต*อิงท(ากัาร์โอินย*ายเอิกัสาร์เว�บเหล�าน�+นไป็เกั�บไว*บนเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�าย ซึ่��งส�วนใหญ่�แล*วจะเป็#นร์ะบบป็ฏิ�บ�ต�กัาร์ย/น�กัซึ่� (Unix) หร์�อิบางคร์�+งอิาจเป็#นร์ะบบป็ฏิ�บ�ต�กัาร์ท��เป็#นว�นโดวส� และเอิกัสาร์เว�บท��ถึ/กัน(าไป็เกั�บบนเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�ายน�+อิาจถึ/กัเร์�ยกัใชื่*งานเอิกัสาร์จากัคอิมพิ�วเตอิร์�ท��ใชื่*ร์ะบบป็ฏิ�บ�ต�กัาร์ท��ต�างกั�นอิอิกัไป็ จะเห�นได*ว�าเอิกัสาร์เว�บน�+นจะต*อิงเกั��ยวข่*อิงกั�บร์ะบบป็ฏิ�บ�ต�กัาร์หลายร์ะบบ ด�งน�+นในกัาร์พิ�ฒนาเว�บเพิจน�+นจะต*อิงค(าน�งถึ�งส��งเหล�าน�+ด*วย ผ่/*ท��ท(ากัาร์สร์*างเอิกัสาร์เว�บน�+น ควร์จะต*อิงศึ�กัษาถึ�งข่*อิกั(าหนดพิ�+นฐานท��ควร์ทร์าบกั�อิน เชื่�น กัาร์กั(าหนดชื่��อิข่อิงโฟัล�เดอิร์� ป็ร์ะเภทข่อิงแฟัAมข่*อิม/ลท��เป็#นเอิกัสาร์เว�บ ป็ร์ะเภทข่อิงแฟัAมข่*อิม/ลร์/ป็ภาพิท��สามาร์ถึแสดงผ่ลได* ตลอิดจนแฟัAมข่*อิม/ลป็ร์ะเภทอิ��นสามาร์ถึน(ามาใชื่*ป็ร์ะกัอิบในกัาร์ท(าเว�บเพิจ
ในร์ะบบป็ฏิ�บ�ต�กัาร์ย/น�กัซึ่�หร์�อิร์ะบบป็ฏิ�บ�ต�กัาร์ล�น)กัซึ่� ล�กัษณะกัาร์ต�+งชื่��อิแฟัAมข่*อิม/ลน�+นจะเป็#นแบบให*ความส(าค�ญ่กั�บล�กัษณะข่อิงต�วอิ�กัษร์ (Case-Sensitive) กัล�าวค�อิต�วอิ�กัษร์พิ�มพิ�ใหญ่�และต�วอิ�กัษร์พิ�มพิ�เล�กั จะถึ�อิว�าเป็#นต�วอิ�กัษร์คนละต�วกั�นซึ่��งต�างจากัร์ะบบป็ฏิ�บ�ต�กัาร์ว�นโดวส� (Windows) หร์�อิร์ะบบป็ฏิ�บ�ต�กัาร์ดอิส (Dos) เชื่�น แฟัAมข่*อิม/ลท��ชื่��อิว�า “index.html” กั�บ “INDEX.HTML” ในร์ะบบป็ฏิ�บ�ต�กัาร์ย/น�กัซึ่�จะถึ�อิว�าเป็#นชื่��อิข่อิงแฟัAมคนละแฟัAมข่*อิม/ลกั�น แต�ถึ*าเป็#นร์ะบบป็ฏิ�บ�ต�กัาร์ว�นโดวส�หร์�อิดอิส จะถึ�อิว�าเป็#นแฟัAมข่*อิม/ลเด�ยวกั�น ด�งน�+นหากัผ่/*ท��สร์*างเว�บเพิจ ใชื่*เคร์��อิงคอิมพิ�วเตอิร์�ท��ม�ร์ะบบป็ฏิ�บ�ต�กัาร์ว�นโดวส�ในกัาร์ส*ร์างเอิกัสาร์เว�บ และกั(าหนดชื่��อิแฟัAมข่*อิม/ลเป็#น “NextPage.html” เม��อิป็Aอินค(าส��งส(าหร์�บกัาร์เชื่��อิมโยงแฟัAมข่*อิม/ลโดยให*เชื่��อิมโยงไป็ย�งแฟัAมข่*อิม/ลผ่�านแป็Aนพิ�มพิ�เป็#น “nextpage.html”
ข่ณะท��ท(ากัาร์ทดสอิบบนเคร์��อิงคอิมพิ�วเตอิร์�ท��ใชื่*ในกัาร์สร์*างเอิกัสาร์เว�บน�+นสามาร์ถึท(างานได*โดยไม�ม�ข่*อิบกัพิร์�อิง แต�เม��อิท(ากัาร์โอินถึ�ายเอิกัสาร์เว�บน�+ไป็ย�งเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�ายท��เป็#นร์ะบบป็ฏิ�บ�ต�กัาร์ย/น�กัซึ่� จะเกั�ดป็2ญ่หาในกัาร์เร์�ยกัด/เอิกัสาร์ไม�ได*เพิร์าะบนร์ะบบป็ฏิ�บ�ต�กัาร์ข่อิงเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�าย จะถึ�อิว�าเป็#นแฟัAมข่*อิม/ลคนละแฟัAมข่*อิม/ลกั�น
ข่-6นต่อนก�รูพิ-ฒน�เว็ บเพิจำ
ล(าด�บข่�+นตอินส(าหร์�บกัาร์พิ�ฒนาเว�บเพิจ สามาร์ถึจ(าแนกัเป็#นล(าด�บข่�+นตอินได*ด�งน�+
1. วางแผ่นกัาร์พิ�ฒนาเว�บเพิจ2. กั(าหนดโฟัลเดอิร์�ท��ใชื่*ส(าหร์�บเกั�บแฟัAมข่*อิม/ลท��เกั��ยวกั�บเว�บเพิจ
3. จ�ดหาภาพิท��เกั��ยวข่*อิงกั�บเน�+อิหาและจ�ดเกั�บไว*ในโฟัลเดอิร์�ได*กั(าหนดไว*4. สร์*างเอิกัสาร์เว�บโดยกั(าหนดชื่��อิข่อิงแฟัAมข่*อิม/ลเอิกัสาร์เว�บ ให*เป็#น
ไป็ตามข่*อิกั(าหนดและจ�ดเกั�บไว*ในโฟัลเดอิร์�ท��ได*กั(าหนดไว*5. ตร์วจสอิบผ่ลเอิกัสาร์เว�บผ่�านทางโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�6. น(าข่*อิม/ลข่�+นไป็เกั�บไว*บนเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�าย (Server) และ
ท(ากัาร์ตร์วจสอิบผ่ลกัาร์เร์�ยกัด/เอิกัสาร์เว�บท��อิย/�บนเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�าย
ร์ายละเอิ�ยดข่อิงข่�+นตอินกัาร์พิ�ฒนาเว�บเพิจม�หลายข่�+นตอินท��ต*อิงข่�+นอิย/�กั�บผ่/*ด/แลร์ะบบ (Web System Administrator) เป็#นผ่/*กั(าหนดว�ธุ�กัาร์ ด�งน�+นกั�อินด(าเน�นกัาร์สร์*างเว�บเพิจควร์ต�ดต�อิข่อิข่*อิม/ลเหล�าน�+จากัผ่/*ด/แลร์ะบบกั�อิน
ล-กษณะโครูงสรู)�งข่องเว็ บเพิจำ ล�กัษณะโคร์งสร์*างข่อิงเว�บเพิจโดยท��วไป็แล*ว สามาร์ถึแบ�งได* 3 ล�กัษณะด�งน�+ค�อิ
1. แบบล(าด�บชื่�+น เป็#นกัาร์จ�ดแสดงหน*าเอิกัสาร์เว�บในล�กัษณะเร์�ยงตามล(าด�บเป็#นกั��งกั*านแตกัแข่นงต�อิเน��อิง เป็ร์�ยบได*กั�บต*นไม*กัล�บห�ว
2. แบบเชื่�งเส*น เป็#นกัาร์จ�ดแสดงหน*าเอิกัสาร์เว�บ โดยเร์�ยงต�อิเน��อิงกั�นไป็ในท�ศึทางเด�ยวไม�ม�กัาร์แตกัอิอิกัเป็#นกั��งกั*านสาข่า
3. แบบผ่สม เป็#นกัาร์จ�ดเร์�ยงหน*าข่อิงเอิกัสาร์เว�บโดยผ่สมผ่สานร์ะหว�างแบบล(าด�บชื่�+นและแบบเชื่�งเส*น ท�+งน�+กั�ข่�+นอิย/�กั�บผ่/*ท��ท(ากัาร์อิอิกัแบบ ว�าจะจ�ดเร์�ยงล(าด�บข่อิงร์/ป็แบบเอิกัสาร์เว�บในล�กัษณะใด
ก�รูว็�งแผนพิ-ฒน�เว็ บเพิจำ กัาร์วางแผ่นส(าหร์�บกัาร์พิ�ฒนาเว�บเพิจน�+น ถึ�อิว�าเป็#นข่�+นตอินส(าค�ญ่ข่�+นตอินหน��ง เน��อิงจากัเอิกัสาร์เว�บท��สร์*างข่�+นน�+นจะม�จ(านวนเพิ��มข่�+นเร์��อิย ๆ และจะม�จ)ดเชื่��อิม (Link) เป็#นจ(านวนมากั หากัไม�ม�กัาร์วางแผ่นไว*กั�อินจะท(าให*กัาร์ป็ร์�บป็ร์)งและพิ�ฒนาในภายหล�งเกั�ดป็2ญ่หาข่�+นได*ง�าย ต�วอิย�าง เชื่�น แฟัAมข่*อิม/ลม�จ(านวนมากัท(าให*ไม�สามาร์ถึจดจ(าชื่��อิข่อิงแฟัAมข่*อิม/ลท��เคยสร์*างไว*แล*วได* ซึ่��งจะส�งผ่ลให*กัาร์ท(ากัาร์เชื่��อิมโยงเอิกัสาร์เกั�ดป็2ญ่หาข่�+น เพิ��อิป็Aอิงกั�นป็2ญ่หาด�งกัล�าวน�+ควร์ม�กัาร์วางแผ่นและอิอิกัแบบเอิกัสาร์เว�บบนกัร์ะดาษ และท(ากัาร์กั(าหนดชื่��อิแฟัAมข่*อิม/ลข่อิงแต�ละเอิกัสาร์เว�บให*เร์�ยบร์*อิย จะท(าให*ผ่/*ท��ท(ากัาร์สร์*างเว�บเพิจสามาร์ถึมอิงเห�นภาพิกัาร์ไหลข่อิงข่*อิม/ล (Data Flow) ภายในเว�บเพิจได*ชื่�ดเจน และสามาร์ถึท(ากัาร์พิ�จาร์ณาต�อิไป็ได*ว�าเอิกัสาร์เว�บ
แต�ละแฟัAมข่*อิม/ลน�+นม�ความส�มพิ�นธุ�กั�บเอิกัสาร์อิ��นอิย�างไร์ และส�มพิ�นธุ�กั�บแฟัAมข่*อิม/ลเอิกัสาร์เว�บใดบ*างต�วอิย�าง ต*อิงกัาร์สร์*างเว�บเพิจเพิ��อิน(าเสนอิความร์/ *เกั��ยวกั�บคอิมพิ�วเตอิร์�เบ�+อิงต*น อิาจสามาร์ถึท(ากัาร์อิอิกัแบบได*ด�งน�+กัาร์กั(าหนดชื่��อิและนามสกั)ลข่อิงแฟัAมข่*อิม/ลเอิกัสาร์เว�บ ข่*อิกั(าหนดส(าหร์�บกัาร์ต�+งชื่��อิข่อิงแฟัAมข่*อิม/ลน�+น นอิกัจากัจะข่�+นอิย/�กั�บความสามาร์ถึข่อิงร์ะบบป็ฏิ�บ�ต�กัาร์แล*ว ย�งต*อิงข่�+นอิย/�กั�บข่*อิกั(าหนดข่อิงผ่/*ด/แลร์ะบบข่อิงเคร์��อิงแม�ข่�ายท��ให*บร์�กัาร์เว�บเพิจ (Web
Administrator) ด*วย ด�งน�+นผ่/*ท��สร์*างเว�บเพิจจ�งต*อิงสอิบถึามกัฎกัาร์ต�+งชื่��อิเหล�าน�+โดยละเอิ�ยด โดยท��วไป็แล*วม�หล�กักัาร์ด�งน�+ ควร์ใชื่*ต�วอิ�กัษร์ a-z หร์�อิต�วเลข่ 0-9 ในกัาร์ต�+งชื่��อิไม�ควร์ใชื่*อิ�กัข่ร์ะพิ�เศึษ ต�วอิ�กัษร์ a-z ท��ใชื่*ในกัาร์ต�+งชื่��อิ ควร์เป็#นต�วอิ�กัษร์พิ�มพิ�เล�กั ไม�ควร์เว*นวร์ร์คชื่�อิงว�างภายในชื่��อิ ห*ามใชื่*อิ�กัข่ร์ะพิ�เศึษในกัาร์ต�+งชื่��อิ ยกัเว*น Underscore (ข่�ดล�าง)
หร์�อิ Dash (ข่�ดกัลาง)
ชื่��อิแฟัAมข่*อิม/ลแร์กัข่อิงเว�บเพิจ ม�กัจะใชื่*ชื่��อิ index.html หร์�อิ index.htm
นามสกั)ลข่อิงแฟัAมข่*อิม/ลเอิกัสาร์เว�บม� 2 ร์/ป็แบบ ค�อิ .htm และ .html ส�วนแฟัAมข่*อิม/ลป็ร์ะเภทอิ��น ผ่/* ท��ท(ากัาร์สร์*างเว�บเพิจควร์สอิบถึามจากัผ่/*ด/แลเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�ายว�าเคร์��อิงคอิมพิ�วเตอิร์�แม� ข่�าย (Server) น�+สามาร์ถึใชื่*งานเกั�บเอิกัสาร์ท��ม�นามสกั)ลข่อิงแฟัAมข่*อิม/ลเป็#นร์/ป็แบบใดได*อิ�กั เชื่�น .php , .asp เป็#นต*นนอิกัจากักัาร์วางโคร์งร์�างข่อิงเว�บเพิจข่*างต*นแล*ว ส��งท��ควร์จะท(ากัาร์พิ�จาร์ณาต�อิไป็ค�อิ
- รู�ปแบบก�รูแสดงผลข่องหน)�เว็ บเพิจำ หม�ยถ&งล-กษณะก�รูว็�งเน�6อห� และรู�ยก�รูเล�อกต่��ง ๆ บนหน)�เว็ บ ซ&�งม�ได)หล�กหล�ยรู�ปแบบ เชื่�น - กัาร์แสดงผ่ลเน�+อิหาท�+งหมดร์วมในหน*าเด�ยวกั�น ซึ่��งกัาร์แสดงผ่ลแบบน�+จะร์วมเอิาร์ายกัาร์เล�อิกั และเน�+อิหาไว*ในหน*าเด�ยวกั�น- กัาร์แสดงผ่ลด*วยตาร์าง กัาร์แสดงผ่ลร์/ป็แบบน�+จะแยกัร์ะหว�างร์ายกัาร์เล�อิกัหร์�อิเมน/ (Menu) ไว* ด*านหน��งข่อิงตาร์าง และเน�+อิหาข่*อิความจะอิย/�อิ�กัด*านหน��ง- กัาร์แสดงผ่ลด*วยเฟัร์ม กัาร์แสดงผ่ลร์/ป็แบบน�+คล*ายกั�บกัาร์แสดงผ่ลแบบตาร์างแต�ร์ายกัาร์เล�อิกั หร์�อิเมน/น�+นจะถึ/กัตร์�งกั�บท�� จะไม�ม�กัาร์เคล��อินย*ายเม��อิท(ากัาร์เล��อินจอิภาพิหร์�อิเล�อิกัเน�+อิหาท�� ต*อิงกัาร์แสดงผ่ล แต�จะท(างานได*เฉพิาะโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�เท�าน�+น
- ข่)อคว็�มที่��ใชื่)ส��หรู-บแสดงห-ว็เรู��องข่องเว็ บเพิจำ หม�ยถ&งข่)อคว็�มที่��ปรู�กฏในส�ว็นห-ว็ข่องหน)�ต่��ง เอกส�รูเว็ บ (Title Bar) โดยข่)อคว็�มส�ว็นน�6จำะถ�กน��ไปใชื่)เป:นค��ส��ค-ญ (Keyword) ที่��ใชื่)ในก�รู ค)นห�เว็ บเพิจำจำ�กบ+คคลอ��น ข่)อคว็�มที่��น��ม�ก��หนดเป:นเรู��องข่องเว็ บเพิจำน-6น คว็รูม�ล-กษณะ ด-งต่�อไปน�6 - สามาร์ถึเป็#นข่*อิความภาษาไทยหร์�อิภาษาอิ�งกัฤษ - ม�ความยาวไม�เกั�น 64 ต�วอิ�กัษร์ - เป็#นข่*อิความท��ส��อิความหมายท��กัร์ะชื่�บเกั��ยวกั�บเน�+อิหาในหน*าเว�บน�+น
- ล�กัษณะข่อิงหน*าเว�บ หมายถึ�งกัาร์กั(าหนดส�ข่อิงพิ�+นข่อิงเอิกัสาร์เว�บ (Background Color) หร์�อิร์/ป็ภาพิท��จะน(ามาใชื่*เป็#นพิ�+นหล�งข่อิงเอิกัสาร์เว�บ (Background Image) ส�ข่อิงต�วอิ�กัษร์ป็กัต� (Normal Text) ส�ข่อิงต�วอิ�กัษร์ท��ใชื่*เป็#นจ)ดเชื่��อิม (Link Text) เพิ��อิให*เอิกัสาร์เว�บแต�ละหน*าม�กัาร์แสดงผ่ลท��สวยงาม และด�งด/ดความสนใจข่อิงผ่/*ใชื่*งาน
ก�รูก��หนดโฟ้ลเดอรู�ส��หรู-บเก บข่)อม�ล กัาร์กั(าหนดโฟัลเดอิร์�กั�อินท��จะท(ากัาร์สร์*างชื่)ดเอิกัสาร์เว�บเพิจน�+น เป็#นล(าด�บข่�+นตอินท��ควร์กัร์ะท(าท)กัคร์�+ง เพิ��อิให*เอิกัสาร์เว�บแต�ละชื่)ดน�+นม�ร์ะบบกัาร์จ�ดเกั�บท��เป็#นร์ะบบ สามาร์ถึค*นหาเร์�ยกัใชื่*งานและแกั*ไข่ข่*อิม/ลภายหล�งได*โดยสะดวกั โดยท��ในกัาร์สร์*างชื่)ดเอิกัสาร์เว�บแต�ละชื่)ดน�+นจะป็ร์ะกัอิบไป็ด*วยแฟัAมข่*อิม/ลจ(านวนมากั ท�+งเอิกัสาร์เอิชื่ท�เอิ�มแอิล แฟัAมข่*อิม/ลร์)ป็ภาพิ เส�ยง ภาพิเคล��อินไหว และอิ��น ๆ ท��เกั��ยวข่*อิงกั�บเว�บเพิจ ด�งน�+นแฟัAมข่*อิม/ลท�+งหมดน�+ควร์จ�ดเกั�บไว*อิย�างเป็#นหมวดหม/� โดยอิาจสร์*างเป็#นโฟัลเดอิร์�ย�อิยเพิ��อิท(ากัาร์แยกักัล)�มแฟัAมข่*อิม/ล แต�จะต*อิงสร์*างภายใต*โฟัลเดอิร์�หล�กัข่อิงเว�บเพิจท�+งหมด ไม�ควร์แยกัไว*คนละต(าแหน�งกั�น เพิร์าะจะท(าให*กัาร์จ�ดกัาร์เกั��ยวกั�บเว�บเพิจน�+นม�ป็2ญ่หาย)�งยากัได* โดยท(ากัาร์สร์*างโฟัลเดอิร์� 1 โฟัลเดอิร์� ต�อิเว�บไซึ่ต� 1 เว�บไซึ่ต� ต�วอิย�างกัาร์สร์*างโฟัลเดอิร์�ชื่��อิ WEB-SITE ไว*ท�� desktop ข่อิง Windows
- ท��หน*าจอิข่อิงคอิมพิ�วเตอิร์�จะแสดง Desktop ข่อิง Windows
- น(าเมาส�ไป็ชื่�+ตร์งต(าแหน�งพิ�+นท��ว�างบน Desktop จากัน�+นให*กัดป็)<มเมาส�ทางด*านข่วาเพิ��อิแสดงเมน/ล�ด
- ท(ากัาร์เล�อิกัค(าส��ง New จากัน�+นเล�อิกั Folder
- ป็ร์ากัฏิไอิคอินข่อิงโฟัลเดอิร์�ว�าง
- ให*ท(ากัาร์พิ�มพิ�ชื่��อิข่อิงโฟัลเดอิร์� ในท��น�+ ค�อิ WEB-SITE จากัน�+นท(ากัาร์กัดป็)<ม ENTER
จะป็ร์ากัฏิโฟัลเดอิร์�ชื่��อิ WEB-SITE
ก�รูจำ-ดเต่รู�ยมภ�พิที่��เก��ยว็ข่)องก-บเน�6อห�เว็ บ เอิกัสาร์เว�บโดยท��วไป็แล*วจะต*อิงเกั��ยวข่*อิงกั�บร์/ป็ภาพิโดยตร์ง เพิ��อิใชื่*ในกัาร์ส��อิความหมายกั�บผ่/*ใชื่*งานได*ชื่�ดเจนมากักัว�ากัาร์ส��อิความหมายด*วยต�วอิ�กัษร์เพิ�ยงอิย�างเด�ยว อิ�กัท�+งเป็#นกัาร์ด�งด)ดความสนใจข่อิงผ่/*ใชื่*งาน ด�งน�+นเม��อิท(ากัาร์สร์*างร์/ป็ภาพิหร์�อิจ�ดหาร์/ป็ภาพิเป็#นท��เร์�ยบร์*อิยแล*วควร์ท��จะท(ากัาร์ค�ดลอิกัมาเกั�บไว*ในโฟัลเดอิร์�ท��ได*จ�ดเตร์�ยมไว* เพิ��อิให*สะดวกัในกัาร์เร์�ยกัใชื่*งานร์/ป็ภาพิน�+นและสะดวกัต�อิกัาร์บร์�หาร์เว�บไซึ่ต�ในอินาคต แฟัAมข่*อิม/ลร์/ป็ภาพิท��น(ามาใชื่*ในกัาร์ท(าเว�บเพิจน�+น ป็2จจ)บ�นน�ยมใชื่*อิย/� 2 ร์/ป็แบบ ค�อิ - ไฟัล�ฟัอิร์�แมต JPEG (Joint Photographer’s
Experts Group File)
- ไฟัล�ฟัอิร์�แมต GIF (Graphics Interlace File)
กัาร์จ�ดหาร์/ป็แบบท��น(ามาใชื่*ในกัาร์จ�ดท(าเว�บเพิจน�+น สามาร์ถึจ�ดเตร์�ยมได*หลายว�ธุ� เชื่�น
- สร์*างร์/ป็ภาพิโดยโป็ร์แกัร์มกัร์าฟั7กัต�าง ๆ เชื่�น PhotoShop ,
Corel Draw เป็#นต*น ในกัาร์สร์*างแฟัAมข่*อิม/ลร์/ป็ภาพิ ซึ่��งจะได*ภาพิท��ตร์งกั�บความต*อิงกัาร์ แต�ใชื่*เวลาในกัาร์สร์*างภาพิมากัข่�+น
- เล�อิกัร์/ป็ภาพิจากัชื่)ดภาพิส(าเร์�จร์/ป็ ท��ม�กัาร์วางจ(าหน�ายในล�กัษณะคล�งร์/ป็ภาพิส(าหร์�บท(าเว�บเพิจ (Web ClipArt) ซึ่��งสะดวกัร์วดเร์�วและง�ายต�อิกัาร์ใชื่*งาน แต�อิาจจะได*ภาพิท��ไม�ตร์งกั�บความต*อิงกัาร์มากัน�กั
- น(าร์/ป็ภาพิจากัโป็ร์แกัร์มอิ��น หร์�อิเว�บเพิจอิ��นมาใชื่* ซึ่��งสะดวกัร์วดเร์�วต�อิกัาร์ใชื่*งาน เชื่�นกั�น แต�อิาจเกั�ดป็2ญ่หาทางด*านล�ข่ส�ทธุ�Fข่อิงภาพิ
ก�รูสรู)�งเอกส�รูเว็ บ กัาร์สร์*างเอิกัสาร์เว�บน�+น หากัผ่/*ท��ท(ากัาร์สร์*างไม�ใชื่�ผ่/*ด/แลร์ะบบเคร์��อิงคอิมพิ�วเตอิร์�ท��ให*บร์�กัาร์เกั��ยวกั�บเว�บเพิจ (Web
Administrator) แล*ว กัาร์กั(าหนดชื่��อิแฟัAมข่*อิม/ลข่อิงเอิกัสาร์เว�บต*อิงเป็#นไป็ตามข่*อิกั(าหนดข่อิงผ่/*ด/แลร์ะบบ และจ�ดเกั�บไว*ในโฟัลเดอิร์�ท��ผ่/*ด/แลร์ะบบเตร์�ยมไว*เท�าน�+นด�งน�+นจะต*อิงม�กัาร์ป็ร์ะสานงานกั�บผ่/*ด/แลร์ะบบกั�อินท��จะน(าเอิกัสาร์เว�บน�+นเข่*าส/�ร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต แฟัAมข่*อิม/ลเอิกัสาร์เว�บน�+นจะเข่�ยนโดยใชื่*ภาษาเอิชื่ท�เอิ�มแอิล (HTML) ซึ่��งกั�ค�อิแฟัAมข่*อิม/ลข่*อิความหร์�อิแฟัAมข่*อิม/ลต�วอิ�กัษร์ (Text File) ด�งน�+นกัาร์สร์*างเอิกัสร์เว�บน�+น สามาร์ถึใชื่*โป็ร์แกัร์มท��สามาร์ถึจ�ดกัาร์เกั��ยวกั�บแฟัAมข่*อิม/ลต�วอิ�กัษร์ใดกั�ได* ในกัาร์ชื่�วยส(าหร์�บกัาร์เข่�ยนร์ห�สค(าส��งภาษาเอิชื่ท�เอิ�มแอิล เชื่�น Notepad , Wordpad
เป็#นต*น นอิกัจากัน�+ในป็2จจ)บ�นม�โป็ร์แกัร์มชื่�วยในกัาร์สร์*างเอิกัสาร์เว�บอิ�กัมากัมาย เชื่�น โป็ร์แกัร์มไมโคร์ซึ่อิฟัต� ฟัร์อินต�เพิจ (Front Page)
เป็#นต*น เอิกัสาร์เว�บน�+นเป็#นเอิกัสาร์ท��เป็#นล�กัษณะเป็#นแฟัAมข่*อิความป็กัต� ท��เกั�บร์ห�สค(าส��งข่อิงภาษาเอิชื่ท�เอิ�มแอิล (HTML) ด�งน�+นเพิ��อิเป็#นกัาร์บอิกัให*โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�ทร์าบว�า เอิกัสาร์น�+เป็#นแฟัAมข่*อิม/ลเฉพิาะส(าหร์�บกั(าหนดร์/ป็แบบกัาร์แสดงผ่ลผ่�านอิ�นเทอิร์�เน�ต จะใชื่*ส�วนข่อิงนามสกั)ลหร์�อิส�วนข่ยายข่อิงไฟัล� (File Extension) เป็#นต�ว
บอิกัแกั�โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� โดยนามสกั)ลหร์�อิส�วนข่ยายข่อิงแฟัAมข่*อิม/ลค�อิ .htm หร์�อิ .html โดยเอิกัสาร์เว�บหน*าแร์กัข่อิงเว�บไซึ่ต�น�+นน�ยมต�+งเป็#นชื่��อิว�า “index.html” , “index.htm” หร์�อิ “default.html” เป็#นต*น ท�+งน�+กั�ข่�+นอิย/�กั�บผ่/*ด/แลร์ะบบ ส(าหร์�บกัาร์ต�+งชื่��อิและนามสกั)ลข่อิงแฟัAมข่*อิม/ลท��เป็#นเอิกัสาร์เว�บน�+น ไม�ควร์ท(ากัาร์ต�+งชื่��อิเป็#นภาษาไทย เน��อิงจากัว�าร์ะบบป็ฏิ�บ�ต�กัาร์หลายร์ะบบไม�สน�บสน)นภาษาไทย และควร์ใชื่*ต�วอิ�กัษร์พิ�มพิ�เล�กัในกัาร์กั(าหนดชื่��อิและนามสกั)ลข่อิงแฟัAมข่*อิม/ล เพิ��อิป็Aอิงกั�นป็2ญ่หาท��เกั�ดจากักัาร์ท(างานข่*ามร์ะบบป็ฏิ�บ�ต�กัาร์ เน��อิงจากัร์ะบบอิ�นเทอิร์�เน�ตจะใชื่*ร์ะบบป็ฏิ�บ�ต�กัาร์หลายร์ะบบร์�วมกั�น โดยเฉพิาะย/น�กัซึ่� (Unix) จะถึ�อิว�าต�วอิ�กัษร์พิ�มพิ�ใหญ่�และต�วอิ�กัษร์พิ�มพิ�เล�กัน�+นม�ความหมายท��ต�างกั�น (Case-Sensitive)
ใบงานหน�วยกัาร์เร์�ยนร์/ *ท�� 2กัาร์อิอิกัแบบเว�บเพิจเบ�+อิงต*น
ว�ตถึ)ป็ร์ะสงค� ม�ท�กัษะในกัาร์ใชื่*งานโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�ท(ากัาร์ค*นหาข่*อิความหร์�อิร์/ป็ภาพิท��จะน(ามาป็ร์ะกัอิบในกัาร์สร์*างเว�บเพิจอิ)ป็กัร์ณ� เคร์��อิงคอิมพิ�วเตอิร์� ท��ม�ค)ณสมบ�ต�ด�งต�อิไป็น�+
1. สามาร์ถึเชื่��อิมต�อิกั�บร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต2. ต�ดต�+งโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�
กัาร์ทดลอิง1. ท(ากัาร์เป็7ดโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� ในท��น�+ค�อิโป็ร์แกัร์ม
Internet Explorer
2. พิ�มพิ�ท��อิย/�ทางอิ�นเทอิร์�เน�ตข่อิงเว�บเพิจท��ใชื่*ส(าหร์�บค*นหาข่*อิม/ล เชื่�น WWWgoogle.co.th
3. ท(ากัาร์เล�อิกัท��ต(าแหน�งข่อิงร์/ป็ภาพิ4. ท(ากัาร์พิ�มพิ�ชื่��อิข่อิงร์/ป็ภาพิท��ต*อิงกัาร์ค*นหา5. ท(ากัาร์เล�อิกัให*ค*นหาร์/ป็ภาพิท��ต*อิงกัาร์โดยกัดป็)<มค*นหา6. ผ่ลท��ได*จากักัาร์ท(างานค�อิ
…………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… ……………………………………………………………………………………………………………
7. ท(ากัาร์บ�นท�กัร์/ป็ภาพิท��สนใจไว*ในเคร์��อิงคอิมพิ�วเตอิร์� สร์)ป็ ว�ธุ�กัาร์จ�ดเตร์�ยมร์/ป็ภาพิส(าหร์�บใชื่*ป็ร์ะกัอิบในกัาร์สร์*างเว�บเพิจ สามาร์ถึท(าได*โดย
…………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… ……………………………………………………………………………………………………………
แบบปรูะเม�นต่นเอง
ชื่��อิ-
สกั)ล……………………………………………………………………
…………………………………
ร์ะด�บชื่�+น เลข่………………………………………
ท��………………………………………………………..
ค(าชื่�+แจง
ให*น�กัเร์�ยนท(าแบบฝึDกัห�ดและใบงานป็ร์ะจ(าบทเร์�ยน จากัน�+นท(ากัาร์ป็ร์ะเม�นตนเอิงตามความจร์�งในห�วข่*อิต�อิไป็น�+
ห�วข่*อิร์ะด�บความร์/ *และความเข่*าใจ
ด�มากั(4)
ด�(3)
ป็านกัลาง(2)
พิอิใชื่*(1)
ป็ร์�บป็ร์)ง
(0)หล�กักัาร์อิอิกัแบบเว�บเพิจข่�+นตอินกัาร์พิ�ฒนาเว�บเพิจ
ล�กัษณะโคร์งสร์*างข่อิงเว�บเพิจกัาร์กั(าหนดโฟัลเดอิร์�ส(าหร์�บเกั�บข่*อิม/ลกัาร์จ�ดเตร์�ยมภาพิท��เกั��ยวข่*อิงกั�บเน�+อิหาเว�บกัาร์สร์*างเอิกัสาร์เว�บ
ร์ะด�บคะแนนเฉล��ย =…………………………………………………………..
0-0.5 = ต*อิงป็ร์�บป็ร์)ง
0.6-1.5 = พิอิใชื่*
1.6-2.5 = ป็านกัลาง
2.6-3.5 = ด�
3.6-4.0 = ด�มากั
แบบปรูะเม�นผลก�รูเรู�ยนรู�)
ตอินท�� 1 เล�อิกัข่*อิท��ถึ/กัต*อิงท��ส)ดเพิ�ยง 1 ข่*อิ
1. กัาร์ใชื่*เคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�ายท��ใชื่*ร์ะบบป็ฏิ�บ�ต�กัาร์ล�น)กัซึ่� ส��งท��ควร์ค(าน�งถึ�งเกั��ยวกั�บกัาร์อิอิกัแบบเว�บเพิจ ค�อิ ข่*อิใดกั. กัาร์จ�ดเกั�บแฟัAมข่*อิม/ลข่. ชื่��อิข่อิงแฟัAมข่*อิม/ลค. กัาร์ค*นหาแฟัAมข่*อิม/ลง. กัาร์แกั*ไข่ข่*อิม/ล
2. ข่*อิใดค�อิข่�+นตอินแร์กัข่อิงกัาร์พิ�ฒนาเว�บเพิจกั. จ�ดหาข่*อิม/ลและภาพิท��เกั��ยวข่*อิงกั�บเว�บเพิจข่. วางแผ่นเกั��ยวกั�บกัาร์สร์*างเว�บเพิจค. ตร์วจสอิบผ่ลกัาร์แสดงผ่ลข่อิงเอิกัสาร์ง. จ�ดเตร์�ยมเคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�าย
3. โดยท��วไป็แล*วแฟัAมข่*อิม/ลท��เป็#นหน*าแร์กัข่อิงเว�บเพิจ จะม�ชื่��อิแฟัAมข่*อิม/ลตร์งกั�บข่*อิใดกั. index.html
ข่. menu.html
ค. page1.html
ง. first.htnl
4. ร์ะบบป็ฏิ�บ�ต�กัาร์ข่อิงเคร์��อิงคอิมแม�ข่�ายในข่*อิใด ท��ให*ความส(าค�ญ่กั�บล�กัษณะข่อิงต�วอิ�กัษร์ (Case-Sensitive)
กั. DOS
ข่. UNIX
ค. Windows 2000 Server
ง. Windows XP Professional
5. กัาร์แสดงผ่ลในร์/ป็แบบใด ท��โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�ร์) �นแร์กั ๆ ไม�สามาร์ถึแสดงผ่ลได*กั. กัาร์แสดงผ่ลแบบหน*าเด�ยวข่. กัาร์แสดงผ่ลแบบตาร์างค. กัาร์แสดงผ่ลแบบเฟัร์มง. สามาร์ถึแสดงผ่ลได*ท)กัร์/ป็แบบ
6. โคร์งสร์*างข่อิงเว�บเพิจแบบใด ม�โคร์งสร์*างท��เร์�ยงต�อิเน��อิงกั�นไป็ในท�ศึทางเด�ยว ไม�ม�กัาร์แตกั อิอิกัเป็#นกั��งกั*านสาข่ากั. แบบล�างข่�+นบนข่. แบบล(าด�บชื่�+นค. แบบผ่สมง. แบบเชื่�งเส*น
7. โคร์งสร์*างข่อิงเว�บเพิจแบบใด ม�โคร์งสร์*างเป็#นล�กัษณะจ�ดแสดงหน*าเอิกัสาร์เว�บในล�กัษณะเร์�ยง
ตามล(าด�บเป็#นกั��งกั*าน แตกัแข่นงต�อิเน��อิง เป็ร์�ยบได*กั�บต*นไม*กัล�บห�ว
กั. แบบล�างข่�+นบนข่. แบบล(าด�บชื่�+นค. แบบผ่สมง. แบบเชื่�งเส*น
8. ล�กัษณะโคร์งสร์*างเว�บเพิจในป็2จจ)บ�นโดยท��วไป็เป็#นล�กัษณะใด
กั. แบบล(าด�บชื่�+น
ข่. แบบเชื่�งเส*น
ค. แบบผ่สม
ง. แบบข่�+นบ�นได
9. อิ�กัข่ร์ะพิ�เศึษในข่*อิใดสามาร์ถึน(ามาท(ากัาร์ต�+งชื่��อิข่อิงแฟัAมข่*อิม/ล ในร์ะบบเว�บเพิจได*
กั. ค(าถึาม (?)
ข่. เท�ากั�บ (=)
ค. ข่�ดกัลาง (-)
ง. มากักัว�า (>)
10. ข่*อิใดกัล�าวไม�ถึ/กัต*อิงเกั��ยวกั�บแฟัAมข่*อิม/ลเอิกัสาร์เว�บ
กั. ไม�ควร์ต�+งชื่��อิเป็#นภาษาไทย เน��อิงจากัร์ะบบป็ฏิ�บ�ต�กัาร์หลายร์ะบบไม�สน�บสน)นภาษาไทย
ข่. ควร์ต�+งชื่��อิแฟัAมข่*อิม/ลให*ส��อิกั�บเน�+อิหาข่อิงเอิกัสาร์
ค. สามาร์ถึใชื่*อิ�กัข่ร์ะพิ�เศึษ เชื่�น #,$,& ในกัาร์ต�+งชื่��อิแฟัAมข่*อิม/ลได*
ง. นามสกั)ลข่อิงแฟัAมข่*อิม/ลเอิกัสาร์เว�บมาตร์ฐานท�� 2 นามสกั)ล ค�อิ .htm และ .html
11. ข่*อิความท��ใชื่*ส(าหร์�บเป็#นห�วเร์��อิงข่อิงเว�บเพิจ ควร์ม�ล�กัษณะตร์งกั�บข่*อิใด
กั. เป็#นข่*อิความท��กัล�าวสร์)ป็โดยย�อิเกั��ยวกั�บเน�+อิหาในเว�บเพิจน�+น
ข่. ควร์ม�ความยาวไม�เกั�น 64 ต�วอิ�กัษร์
ค. สามาร์ถึใชื่*ได*ท�+งข่*อิความภาษาอิ�งกัฤษและข่*อิความท��เป็#นภาษาท*อิงถึ��น เชื่�น ภาษาไทย
ง. ถึ/กัท)กัข่*อิ
12. แฟัAมข่*อิม/ลร์/ป็ภาพิในข่*อิใด น�ยมใชื่*ป็ร์ะกัอิบในกัาร์สร์*างเว�บเพิจ
กั. .JPEG
ข่. .GIF
ค. .BMP
ง. ถึ/กัท�+งข่*อิ กั และ ข่*อิ ข่
13. กัาร์เตร์�ยมภาพิกัร์าฟั7กัส(าหร์�บใชื่*ในกัาร์ป็ร์ะกัอิบเอิกัสาร์เว�บ ในข่*อิใดสามาร์ถึท(าได*อิย�างสะดวกั
ร์วดเร์�ว
กั. สร์*างร์/ป็ภาพิโดยใชื่*โป็ร์แกัร์มกัร์าฟั7กัต�าง ๆ
ข่. กัาร์เล�อิกัภาพิจากัชื่)ดภาพิส(าเร์�จร์/ป็
ค. กัาร์น(าภาพิจากัโป็ร์แกัร์มอิ��นหร์�อิเว�บเพิจอิ��น
ง. ถึ/กัท�+งข่*อิ ข่ และ ข่*อิ ค
14. กัาร์เตร์�ยมภาพิกัร์าฟั7กัส(าหร์�บใชื่*ในกัาร์ป็ร์ะกัอิบเอิกัสาร์เว�บ ในข่*อิใดต*อิงร์ะว�งเร์��อิงกัาร์ละเม�ด
ล�ข่ส�ทธุ�F
กั. สร์*างร์/ป็ภาพิโดยใชื่*โป็ร์แกัร์มกัร์าฟั7กัต�าง ๆ
ข่. กัาร์เล�อิกัภาพิจากัชื่)ดภาพิส(าเร์�จร์/ป็
ค. กัาร์น(าภาพิจากัโป็ร์แกัร์มอิ��นหร์�อิเว�บเพิจอิ��นมาใชื่*
ง. ถึ/กัท�+งข่*อิ ข่ และ ข่*อิ ค
15. กัาร์เตร์�ยมภาพิกัร์าฟั7กัส(าหร์�บใชื่*ในกัาร์ป็ร์ะกัอิบเอิกัสาร์เว�บ ในข่*อิใดจะได*ภาพิท��ตร์งกั�บความ
ต*อิงกัาร์มากัท��ส)ด
กั. สร์*างร์/ป็ภาพิโดยใชื่*โป็ร์แกัร์มกัร์าฟั7กัต�าง ๆ
ข่. กัาร์เล�อิกัภาพิจากัชื่)ดภาพิส(าเร์�จร์/ป็
ค. กัาร์น(าภาพิจากัโป็ร์แกัร์มอิ��นหร์�อิเว�บเพิจอิ��น
ง. ถึ/กัท�+งข่*อิ ข่ และ ข่*อิ ค
16. เหต)ผ่ลส(าค�ญ่ในกัาร์กั(าหนดชื่��อิข่อิงโฟัล�เดอิร์� ท��ใชื่*ส(าหร์�บกัาร์สร์*างเว�บเพิจ ค�อิข่*อิใด
กั. เพิ��อิให*เกั�ดความสวยงามและเป็#นร์ะเบ�ยบ
ข่. เพิ��อิให*เกั�ดความสะดวกัในกัาร์ค*นหาและเร์�ยกัใชื่*งาน
ค. ม�เน�+อิท��เพิ��มข่�+นและสามาร์ถึเกั�บแฟัAมข่*อิม/ลได*มากัข่�+น
ง. ถึ/กัท)กัข่*อิ
17. หากัต*อิงกัาร์สร์*างโฟัล�เดอิร์�ส(าหร์�บเกั�บข่*อิม/ลร์/ป็ภาพิ ควร์ต�+งชื่��อิตร์งกั�บข่*อิใด
กั. Homepage
ข่. Command
ค. Image
ง. Content
18. ข่*อิใดค�อินามสกั)ลข่อิงแฟัAมข่*อิม/ลเอิกัสาร์ภาษาเอิชื่ท�เอิ�มแอิล (HTML) ท��สามาร์ถึแสดงผ่ลผ่�านร์ะบบ
เคร์�อิข่�ายอิ�นเทอิร์�เน�ต (Internet)
กั. .gif
ข่. .txt
ค. .doc
ง. .html
19. ข่*อิใดกัล�าวไม�ถึ/กัต*อิงเกั��ยวกั�บกัาร์อิอิกัแบบเว�บเพิจบนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต
กั. เคร์��อิงคอิมพิ�วเตอิร์�แม�ข่�ายบนร์ะบบอิ�นเทอิร์�เน�ตน�ยมใชื่*ร์ะบบป็ฏิ�บ�ต�กัาร์ย/น�กัซึ่� (UNIX)
ข่. กัาร์ต�+งชื่��อิแฟัAมข่*อิม/ลบนร์ะบบป็ฏิ�บ�ต�กัาร์ย/น�กัซึ่� (UNIX)
ข่นาดข่อิงต�วอิ�กัษร์จะไม�ม�ความส(าค�ญ่
ค. กัาร์จ�ดเกั�บแฟัAมข่*อิม/ลท��เกั��ยวกั�บเว�บเพิจ ควร์จ�ดเกั�บไว*เป็#นหมวดหม/�
ง. แฟัAมข่*อิม/ลร์/ป็ภาพิ .jpg สามาร์ถึใชื่*ในกัาร์ป็ร์ะกัอิบกัาร์สร์*างเว�บเพิจได*
20. ข่*อิใดกัล�าวถึ/กัต*อิงเกั��ยวกั�บเอิกัสาร์เอิชื่ท�เอิ�มแอิล
กั. เป็#นโป็ร์แกัร์มท��สามาร์ถึส��งให*ท(างานโดยไม�ต*อิงใชื่*โป็ร์แกัร์มอิ��น
ข่. เป็#นแฟัAมข่*อิม/ลร์/ป็ภาพิ
ค. เป็#นแฟัAมข่*อิม/ลต�วอิ�กัษร์
ง. เป็#นแฟัAมข่*อิม/ลท��เป็#นภาพิเคล��อินไหว
ตอินท�� 2 ตอิบค(าถึามต�อิไป็น�+
1. ล�กัษณะโคร์งสร์*างข่อิงเว�บเพิจม�กั��ล�กัษณะ พิร์*อิมท�+งอิธุ�บายความหมายพิอิส�งเข่ป็………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
2. ข่�+นตอินกัาร์พิ�ฒนาเว�บเพิจม�อิะไร์บ*าง พิร์*อิมท�+งอิธุ�บายพิอิส�งเข่ป็………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
3. อิธุ�บายกัาร์กั(าหนดชื่��อิข่อิงแฟัAมข่*อิม/ลและนามสกั)ลข่อิงแฟัAมข่*อิม/ลเอิกัสาร์เว�บเพิจมาพิอิส�งเข่ป็…………………………………………………………………………………………………..…………………………………………………………………………………………………..…………………………………………………………………………………………………..
…………………………………………………………………………………………………..…………………………………………………………………………………………………..…………………………………………………………………………………………………..…………………………………………………………………………………………………..…………………………………………………………………………………………………..…………………………………………………………………………………………………..…………………………………………………………………………………………………..…………………………………………………………………………………………………..
4. จงอิธุ�บายร์/ป็แบบกัาร์แสดงผ่ล หร์�อิล�กัษณะกัาร์วางเน�+อิหา และร์ายกัาร์เล�อิกัแบบต�าง ๆ บนหน*าเว�บเพิจมาพิอิส�งเข่ป็……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..
……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..……………………………………………………………………………………………………..
5. จงบอิกัว�ธุ�กัาร์จ�ดเตร์�ยมร์/ป็ภาพิส(าหร์�บใชื่*ป็ร์ะกัอิบในกัาร์สร์*างเว�บเพิจมาพิอิส�งเข่ป็ ……………………………………………………………………………………………………... ……………………………………………………………………………………………………... ……………………………………………………………………………………………………... ……………………………………………………………………………………………………... ……………………………………………………………………………………………………... ……………………………………………………………………………………………………... ……………………………………………………………………………………………………...
……………………………………………………………………………………………………... ……………………………………………………………………………………………………... ……………………………………………………………………………………………………... ……………………………………………………………………………………………………... ……………………………………………………………………………………………………...
หน�ว็ยก�รูเรู�ยนรู�)ที่�� 3คว็�มรู�)เบ�6องต่)นเก��ยว็ก-บภ�ษ�เอชื่ที่�เอ มแอล
ภาษาเอิชื่ท�เอิ�มแอิล (HTML , Hyper Text
Markup Language) เป็#นภาษาคอิมพิ�วเตอิร์�ร์/ป็แบบหน��ง ท��ม�โคร์งสร์*างกัาร์เข่�ยนโดยอิาศึ�ยป็Aายร์ะบ) (Tag) หร์�อิค(าส��งส(าหร์�บควบค)มกัาร์แสดงผ่ลข่*อิความ ร์/ป็ภาพิ หร์�อิว�ตถึ)อิ��นผ่�านโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� ซึ่��งป็Aายร์ะบ) หร์�อิค(าส��งแต�ละค(าส��งน�+น อิาจจะม�ส�วนข่ยายท��ใชื่*ส(าหร์�บบอิกัค)ณล�กัษณะพิ�เศึษ (Attribute) ส(าหร์�บร์ะบ)หร์�อิควบค)มล�กัษณะกัาร์แสดงผ่ลเพิ��มเต�มได* โดยแต�ละค(าส��งจะม�แตกัต�างกั�นอิอิกัไป็
ป3�ยรูะบ+ ป็Aายร์ะบ) (Tag) หร์�อิค(าส��ง เป็#นล�กัษณะเฉพิาะข่อิงภาษาเอิชื่ท�เอิ�มแอิล (HTML) เป็ร์�ยบเสม�อินค(าส��งส(าหร์�บกั(าหนดร์/ป็แบบกัาร์แสดงผ่ล โดยป็Aายร์ะบ) หร์�อิค(าส��งน�+น จะอิย/�ภายใต*เคร์��อิงหมาย น*อิยกัว�า (<) และเคร์��อิงหมาย (>) โดยป็Aายร์ะบ) หร์�อิค(าส��งข่อิงภาษาเอิชื่ท�เอิ�มแอิล(HTML) น�+นแบ�งเป็#น 2 ป็ร์ะเภท ค�อิ - ป็Aายร์ะบ)เด��ยว หมายถึ�งป็Aายร์ะบ)ท��เป็#นค(าส��งเด��ยวส(าหร์�บควบค)มกัาร์แสดงผ่ล เชื่�น ค(าส��ง กัาร์ข่�+นบร์ร์ท�ดใหม� <BR> เป็#นต*น - ป็Aายร์ะบ)เป็7ด/ป็7ด หมายถึ�งป็Aายร์ะบ)ท��เป็#นค(าส��งส(าหร์�บควบค)มกัาร์แสดงผ่ลเป็#นกัล)�ม เชื่�น กั(าหนดให*กัล)�มอิ�กัษร์เป็#นต�วหนา <B>…….</B> หร์�อิต�วเอิ�ยง <I>…….</I>
เป็#นต*น โดยใชื่*เคร์��อิงหมายท�บ (slash) น(าหน*าค(าส��งท��ต*อิงกัาร์จบล�กัษณะกัาร์แสดงผ่ลท��ป็ร์ะกัอิบไป็ด*วยป็Aาย โดยกัล)�มข่อิงต�วอิ�กัษร์ท��ต*อิงกัาร์ควบค)มจะอิย/�ร์ะหว�างป็Aายร์ะบ) เป็7ด และป็Aายร์ะบ)ป็7ด ล-กษณะพิ�เศึษ
ล�กัษณะพิ�เศึษ (Attributes) เป็#นส�วนท��ท(าหน*าท��ข่ยายความสามาร์ถึข่อิงป็Aายร์ะบ) (Tag) หร์�อิค(าส��ง โดยกัาร์บอิกัล�กัษณะพิ�เศึษเหล�าน�+จะถึ/กัร์ะบ)ภายในเคร์��อิงหมายมากักัว�าน*อิยกัว�า ในส�วนข่อิงป็Aายร์ะบ)เป็7ดหร์�อิป็Aายร์ะบ)เด��ยว โดยค(าส��งข่อิงภาษาเอิชื่ท�เอิ�มแอิล(HTML) แต�ละค(าส��งจะม�กัาร์บอิกัล�กัษณะพิ�เศึษ ท��แตกัต�างกั�นไป็และม�จ(านวนไม�เท�ากั�น กัาร์ร์ะบ)ล�กัษณะพิ�เศึษน�+นสามาร์ถึกั(าหนดได*มากักัว�า 1 ล�กัษณะ โดยใชื่*ชื่�อิงว�างเป็#นต�วแยกัแต�ละล�กัษณะพิ�เศึษ ต�วอิย�างเชื่�น ล�กัษณะพิ�เศึษ ข่อิงป็Aายร์ะบ) หร์�อิค(าส��งท��เกั��ยวกั�บกัาร์จ�ดย�อิหน*าค�อิค(าส��ง <P> ป็ร์ะกัอิบด*วยล�กัษณะพิ�เศึษด�งน�+ค�อิ ALIGN = “Left/Right/Center/justify”
สามาร์ถึเข่�ยนค(าส��งส(าหร์�บกัาร์จ�ดย�อิหน*าได*ด�งน�+ <P ALIGN = “Left”> กัาร์จ�ดย�อิหน*าชื่�ดซึ่*าย </P>
หร์�อิ <P ALIGN = “Right”> กัาร์จ�ดย�อิหน*าชื่�ดข่วา </P>
หร์�อิ <P ALIGN = “Center”> กัาร์จ�ดย�อิหน*าให*อิย/�กั��งกัลางหน*าเอิกัสาร์ </P>
โครูงสรู)�งข่องเอกส�รูเอชื่ที่�เอ มแอล โคร์งสร์*างข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิลน�+นจะป็ร์ะกัอิบด*วยส�วนป็ร์ะกัอิบ 2 ส�วน ค�อิ ส�วนห�วข่อิงเอิกัสาร์ (Head Section) และส�วนเน�+อิหาข่อิงเอิกัสาร์ (Body Section) โดยส�วนห�วข่อิงเอิกัสาร์จะอิย/�ภายใต*ป็Aายร์ะบ)หร์�อิค(าส��ง <HEAD>….</HEAD>
และส�วนเน�+อิหาข่อิงเอิกัสาร์จะอิย/�ภายใต*ป็Aายร์ะบ)หร์�อิค(าส��ง <BODY>….</BODY> โดยท�+งสอิงส�วนจะอิย/�ภายในป็Aายร์ะบ)
หร์�อิค(าส��ง <HTML>….</HTML> ซึ่��งเป็#นส�วนท��ใชื่*ส(าหร์�บบอิกัว�าเอิกัสาร์น�+เป็#นเอิกัสาร์เอิชื่ท�เอิ�มแอิล
ส�ว็นห-ว็เรู��องข่องเอกส�รูเว็ บ
ส�วนห�วเร์��อิงข่อิงเอิกัสาร์เว�บ (Head Section) เป็#นส�วนท��ใชื่*ส(าหร์�บอิธุ�บายข่*อิม/ลเฉพิาะท��เกั��ยวกั�บเอิกัสาร์เว�บน�+น เชื่�น ชื่��อิเร์��อิงข่อิงเอิกัสาร์เว�บ (Title) ชื่��อิข่อิงผ่/*จ�ดท(าเว�บ (Author) ค(าส(าค�ญ่หร์�อิค�ย�เว�ร์�ด (Keyword) เพิ��อิใชื่*ส(าหร์�บให*ผ่/*ใชื่*งานคนอิ��นค*นหาข่*อิม/ลเกั��ยวกั�บเว�บเพิจท��ได*ท(ากัาร์สร์*างข่�+น บนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต โดยป็Aายร์ะบ) (Tag)
หร์�อิค(าส��งท��ส(าค�ญ่ค�อิ
- META เป็#นส�วนท��ไม�ป็ร์ากัฏิผ่ลบนโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� ส�วนน�+จะเป็#นส�วนท��ใชื่*ในกัาร์ท(าคล�งบ�ญ่ชื่�เว�บเพิจ ส(าหร์�บใชื่*ในกัาร์ส�บค*นเว�บเพิจ (Search Engine) จากัผ่/*อิ��น
<HTML>
<HEAD>
<ค(าส��งท��อิย/�ในส�วนห�วข่อิงเอิกัสาร์>
</HEAD>
<BODY>
<ค(าส��งท��อิย/�ในส�วนเน�+อิหาข่อิงเอิกัสาร์>
</BODY>
</HTML>
- TITLE ใชื่*ส(าหร์�บบอิกัชื่��อิเร์��อิงข่อิงเอิกัสาร์เว�บ โดยข่*อิความน�+จะป็ร์ากัฏิท��แถึวชื่��อิด*านบนส)ดข่อิงโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� โดยข่*อิความน�+ควร์คร์อิบคล)มถึ�งเน�+อิหาท�+งหมดข่อิงเอิกัสาร์เว�บ
กัาร์พิ�มพิ�ชื่)กัค(าส��งข่อิงภาษาเอิชื่ท�เอิ�มแอิล (HTML) สามาร์ถึใชื่*ได*ท�+งต�วอิ�กัษร์พิ�มพิ�เล�กัและต�วอิ�กัษร์พิ�มพิ�ใหญ่�หร์�อิผ่สมกั�นท�+งสอิงแบบ และสามาร์ถึใชื่*ย�อิหน*า เว*นบร์ร์ท�ด หร์�อิชื่�อิงว�าง สามาร์ถึท(าได*อิย�างอิ�สร์ะ โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�จะไม�สนใจเกั��ยวกั�บร์ะยะเว*นบร์ร์ท�ด ย�อิหน*า หร์�อิชื่�อิงว�าง แต�จะเป็#นป็ร์ะโยชื่น�ส(าหร์�บกัาร์อิ�านค(าส��งข่อิงผ่/*สร์*างเอิกัสาร์เว�บ และป็ร์ะโยชื่น�ท(ากัาร์พิ�ฒนาเว�บเพิจ
ส�ว็นเน�6อห�เอกส�รูเว็ บ
ส�วนเน�+อิหาเอิกัสาร์ (Body Section) เป็#นส�วนเน�+อิหาหล�กัข่อิงเอิกัสาร์เว�บ โดยส�วนน�+จะเป็#นส�วนท��น(าไป็แสดงผ่ลบนโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� ซึ่��งกัาร์แสดงผ่ลน�+นจะใชื่*ป็Aายร์ะบ)หร์�อิค(าส��งเป็#นต�วควบค)มร์/ป็แบบกัาร์แสดงผ่ล ไม�ว�าจะเป็#นข่*อิม/ลท��เป็#นข่*อิความ ร์/ป็ภาพิ หร์�อิ เส�ยง
กัาร์เข่�ยนป็Aายร์ะบ) (Tag) หร์�อิค(าส��ง จะไม�ม�ข่*อิความจ(ากั�ดสามาร์ถึป็Aอินค(าส��งต�ดกั�นหลายค(าส��งในหน��งบร์ร์ท�ด หร์�อิจะม�เพิ�ยง 1
บร์ร์ท�ดต�อิ 1 ค(าส��งกั�ได* โดยท��วไป็แล*วจะย�ดหล�กักัาร์จ�ดวางท��ท(าให*ผ่/*ท��สร์*างเอิกัสาร์เว�บน�+นสามาร์ถึท(าความเข่*าใจได*ง�าย เชื่�นท(ากัาร์จ�ดย�อิหน*าใน
<HEAD>
<META NAME = “Author” CONTENT = “ชื่��อิผ่/*สร์*างเว�บเพิจ”>
<META NAME = “Key Words” CONTENT = “ค(าส(าค�ญ่ 1, ค(าส(าค�ญ่ 2,….”>
<TITLE> ข่*อิความท��ใชื่*เป็#นข่*อิความห�วเร์��อิงข่อิงเอิกัสาร์
ชื่)ดค(าส��งท��เกั��ยวข่*อิงกั�นให*อิย/�ในย�อิหน*าร์ะด�บเด�ยวกั�น ซึ่��งค(าส��งท��ใชื่*กั(าหนดร์/ป็แบบกัาร์แสดงผ่ลท�+งหมดท��เป็#นส�วนข่อิงเน�+อิหาข่อิงเอิกัสาร์ จะอิย/�ร์ะหว�างป็Aายร์ะบ) (Tag) หร์�อิค(าส��ง <BODY>…..</BODY>
สามาร์ถึแบ�งกัล)�มค(าส��งได*ด�งน�+
- กัล)�มค(าส��งกัาร์จ�ดกัาร์ย�อิหน*า
- กัล)�มค(าส��งจ�ดควบค)มร์/ป็แบบต�วอิ�กัษร์
- กัล)�มค(าส��งกัาร์จ�ดท(าเอิกัสาร์แบบร์ายกัาร์
- กัล)�มค(าส��งกัาร์เชื่��อิมโยงเอิกัสาร์
- กัล)�มค(าส��งจ�ดกัาร์ร์/ป็ภาพิ
- กัล)�มค(าส��งจ�ดกัาร์ตาร์าง
- กัล)�มค(าส��งกัาร์แบ�งส�วนข่อิงเอิกัสาร์
- กัล)�มค(าส��งอิ��น ๆ
ก�รูสรู)�งเว็ บเพิจำเบ�6องต่)น
ข่�+นตอินแร์กัในกัาร์สร์*างเอิกัสาร์เว�บเพิจ ค�อิ กัาร์ร์�างเน�+อิหาท��ป็ร์ะกัอิบอิย/�ภายในข่อิงเอิกัสาร์เว�บ และจ�ดแบ�งข่*อิม/ลอิอิกัเป็#นส�วน โดยแบ�งเป็#นหน*าคล*ายกั�บหน*ากัร์ะดาษข่อิงหน�งส�อิ ซึ่��งจ(านวนข่อิงข่*อิม/ลในเอิกัสาร์แต�ละหน*าข่อิงเอิกัสาร์เว�บไม�ควร์ม�ข่นาดใหญ่�มากัน�กัเพิร์าะจะท(าให*ข่นาดข่อิงเอิกัสาร์เว�บท��เป็#นแฟัAมข่*อิม/ลภาษาเอิชื่ท�เอิ�มแอิลท (HTML) น�+นม�ข่นาดใหญ่� ซึ่��งจะท(าให*เวลาส(าหร์�บกัาร์ด�งเอิกัสาร์เว�บจากัร์ะบบเคร์�อิข่�าย เพิ��อิมาแสดงผ่ลบนโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�ใชื่*เวลามากั และเอิกัสาร์เว�บท��ม�ข่*อิม/ลเป็#นจ(านวนมากัในแต�ละหน*าข่อิงเอิกัสาร์ จะท(าให*ไม�สามาร์ถึแสดงผ่ลข่*อิม/ลท�+งหมดในหน*าเด�ยว ซึ่��งจะต*อิงใชื่*แถึบเล��อินส(าหร์�บด/ข่*อิม/ลข่อิงเอิกัสาร์เว�บในส�วนท��เหล�อิซึ่��งอิาจท(าให*ผ่/*ท��เป็7ดด/เอิกัสาร์เว�บร์/ *ส�กัไม�สะดวกัใน
กัาร์ด/เอิกัสาร์เว�บ โดยเอิกัสาร์เว�บท��ด�ควร์แบ�งเน�+อิหาในแต�ละหน*าให*เหมาะสมกั�บกัาร์ใชื่*งาน
ค��ส-�งเบ�6องต่)นส��หรู-บก�รูสรู)�งเว็ บเพิจำ
ค��ส-�งเรู��มต่)น
ค(าส��งเร์��มต*นท��ใชื่*ส(าหร์�บกัาร์บอิกัว�าเอิกัสาร์น�+น ค�อิเอิกัสาร์เว�บท��เป็#นภาษาเอิชื่ท�เอิ�มแอิล ค�อิค(าส��ง <HTML> และใชื่*ค(าส��ง </HTML>
เป็#นกัาร์บอิกัจ)ดส�+นส)ดข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิล โดยค(าส��งน�+จะไม�แสดงผ่ลในโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� แต�เข่�ยนเพิ��อิบอิกัให*ทร์าบว�าเอิกัสาร์น�+เป็#นเอิกัสาร์ข่อิงภาษาเอิชื่ท�เอิ�มแอิล (HTML) กัล�าวค�อิข่*อิความท��อิย/�ร์ะหว�างค(าส��ง <HTML> และ </HTML> เป็#นเอิกัสาร์ท��เป็#นภาษาเอิชื่ท�เอิ�มแอิลน��นเอิง
ค��ส-�งก��หนดส�ว็นห-ว็ข่องเอกส�รูเว็ บ
ด�งท��กัล�าวมาแล*วว�าเอิกัสาร์เอิชื่ท�เอิ�มแอิลน�+น แบ�งอิอิกัเป็#น 2 ส�วน ค�อิส�วนห�วเร์��อิงข่อิงเอิกัสาร์เว�บและส�วนเน�+อิหาเอิกัสาร์เว�บ โดยค(าส��งท��ใชื่*บอิกัส�วนห�วเร์��อิงข่อิงเอิกัสาร์เว�บน�+น ค�อิค(าส��ง <HEAD>….</HEAD> ซึ่��งค(าส��งท��อิย/�ภายในส�วนห�วข่อิงเอิกัสาร์เว�บน�+น เป็#นค(าส��งท��ใชื่*กั(าหนดข่*อิความท��ใชื่*เป็#นชื่��อิเร์��อิงข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิล และค(าส��งท��ใชื่*ส(าหร์�บบอิกัค(าส(าค�ญ่ (Keyword) ข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิล เพิ��อิใชื่*ในกัาร์ค*นหาเอิกัสาร์น�+นบนร์ะบบเคร์�อิข่�ายอิ�นเทอิร์�เน�ต
<HTML> (ภาษาเอิชื่ท�เอิ�มแอิล) </HTML>
<HTML> (ภาษาเอิชื่ท�เอิ�มแอิล) </HTML>
<HEAD> (ค(าส��งย�อิยส(าหร์�บส�วนห�วข่อิงเอิกัสาร์) </HEAD>
ค��ส-�งก��หนดข่)อคว็�มในส�ว็นห-ว็ข่องโปรูแกรูมเว็ บเบรู�ว็�เซอรู�
ค(าส��งท��ใชื่*ส(าหร์�บกั(าหนดข่*อิความท��จะป็ร์ากัฏิบนส�วนห�วข่อิงโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� ค�อิค(าส��ง <TITLE>…</TITLE> หากัต*อิงกัาร์ให*ข่*อิความใดป็ร์ากัฏิท��ต(าแหน�งส�วนห�วข่อิงโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� ท(าได*โดยเอิาข่*อิความท��ต*อิงกัาร์แสดงผ่ลน�+นใส�เข่*าไป็ร์ะหว�างค(าส��งเป็7ด <TITLE> และค(าส��งป็7ด </TITLE> ซึ่��งค(าส��งน�+จะอิย/�ในส�วนห�วข่อิงเอิกัสาร์เว�บ
ค(าส��งกั(าหนดส�วนท��เป็#นเน�+อิหาข่อิงเอิกัสาร์เว�บ ค�อิ ค(าส��ง <BODY>…</BODY> ซึ่��งใชื่*เป็#นค(าส��งส(าหร์�บบอิกัแกั�โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�ว�า ส�วนท��อิย/�ร์ะหว�างค(าส��งน�+เป็#นส�วนท��จะน(าไป็แสดงผ่ลบนโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� ซึ่��งอิาจป็ร์ะกัอิบไป็ด*วย ต�วอิ�กัษร์ ร์/ป็ภาพิ เป็#นต*น
<TITLE> (ข่*อิความท��ต*อิงกัาร์ให*ป็ร์ากัฏิท��ส�วนห�วข่อิงโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�) </TITLE>
<BODY> …..</BODY>
<!-- ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.1 -->
<HTML>
<HEAD> ชื่��อิเร์��อิงข่อิงเอิกัสาร์ HTML </TITLE>
</HEAD>
<BODY>
เอิกัสาร์ HTML เอิกัสาร์แร์กั
</BODY>
</HTML>
ก�รูก��หนดส�ข่องพิ�6นหล-งและส�ข่องต่-ว็อ-กษรู
กัาร์กั(าหนดส�พิ�+นหล�งและกัาร์กั(าหนดส�ข่อิงต�วอิ�กัษร์ข่อิงเอิกัสาร์เว�บน�+น สามาร์ถึท(าได*โดยกั(าหนดเป็#นกัาร์อิธุ�บายล�กัษณะพิ�เศึษ (Attribute) ข่อิงค(าส��ง <BODY> โดยม�ว�ธุ�กัาร์กั(าหนดส�ข่อิงพิ�+นหล�งข่อิงเอิกัสาร์และส�ข่อิงต�วอิ�กัษร์ในเอิกัสาร์ได*ด�งน�+
ก�รูก��หนดส�ข่องพิ�6นหล-งเอกส�รู
กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์เว�บหร์�อิเอิกัสาร์เอิชื่ท�เอิ�มแอิล น�+นสามาร์ถึท(าได*โดยใชื่*กัาร์อิธุ�บายล�กัษณะพิ�เศึษ (Attribute) ค�อิ BGCOLOR ซึ่��งกัาร์กั(าหนดสส�พิ�+นข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิลน�+น สามาร์ถึกั(าหนดภายใต*ค(าส��งเป็7ดข่อิงค(าส��ง <BODY> โดยกัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิลสามาร์ถึแสดงได*ด�งน�+
โดยส�ท��ต*อิงกัาร์กั(าหนดน�+ สามาร์ถึท(างานกั(าหนดได* 2 ว�ธุ� ค�อิ
- ร์ะบ)ชื่��อิข่อิงส�ท��ต*อิงกัาร์ เชื่�น Blue, Green, Red, Yellow
เป็#นต*น
ต�วอิย�างท�� 3.2 กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิล โดยกัาร์ร์ะบ)ชื่��อิ
<BODY BGCOLOR = ส�ท��ต*อิงกัาร์> จะม� ส�ท��ต*อิงกัาร์ หร์�อิไม�ม�“ ”
เคร์��อิงหมาย “ “
กั�ได*
………
ร์ะบ)ต�วเลข่โดยใชื่*กัาร์กั(าหนดค�าส�ในร์ะบบเลข่ฐาน 16 จ(านวน 6 หล�กั ส(าหร์�บกัาร์ผ่สมส� (RGB) โดยค�าต�วเลข่ 2 หล�กัแร์กัหมายถึ�งร์ะด�บข่อิงส�แดง ต�วเลข่ 2 หล�กั ต�อิมาหมายถึ�งร์ะด�บข่อิงส�เข่�ยว และต�วเลข่ 2 หล�กัส)ดท*าย หมายถึ�งร์ะด�บข่อิงส�น(+าเง�น
ต่-ว็อย��งที่�� 3.3 ก�รูก��หนดส�พิ�6นหล-งข่องเอกส�รูเอชื่ที่�เอ มแอล โดยก�รูรูะบ+ต่-ว็เลข่
<! - - ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.3 - ->
<HTML>
<HEAD>
<! - - ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.2 - ->
<HTML>
<HEAD>
<TITLE> กัาร์กั(าหนดส�พิ�+นหล�งโดยกัาร์กั(าหนดส�</TITLE>
</HEAD>
<BODY>
BGCOLOR = Yellow>
กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์ โดยกัาร์กั(าหนดเป็#นส�เหล�อิง
</BODY>
<! - - ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.3 - ->
<HTML>
<HEAD>
<TITLE> กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์ โดยกัาร์ร์ะบ)ต�วเลข่</TITLE>
</HEAD>
<BODY BGCOLOR = #00FFFF>
<TITLE> กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์ โดยกัาร์ร์ะบ)ต�วเลข่</TITLE>
</HEAD>
<BODY BGCOLOR = #00FFFF>
กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์ โดยกัาร์ร์ะบ)ต�วเลข่เป็#น 00FFFF
</BODY>
</HTML>
รู�ปที่�� 3.5 ผลที่��ได)จำ�กก�รูแสดงผล ต่-ว็อย��งที่�� 3.3 โดยใชื่)โปรูแกรูมเว็ บเบรู�ว็�เว็อรู�
ก�รูก��หนดส�ข่องต่-ว็อ-กษรูกัาร์กั(าหนดส�ข่อิงต�วอิ�กัษร์ท�+งหมดข่อิงเอิกัสาร์เว�บหร์�อิเอิกัสาร์เอิชื่ท�เอิ�มแอิลน�+น สามาร์ถึท(าได*โดยใชื่*กัาร์อิธุ�บายล�กัษณะพิ�เศึษ (Attribute)
ค�อิ TEXT ซึ่��งกั(าหนดอิย/�ท��ต(าแหน�งค(าส��งเป็7ดข่อิงค(าส��ง <BODY> ร์/ป็แบบข่อิงค(าส��งส(าหร์�บกัาร์กั(าหนดส�ข่อิงเอิกัสาร์เว�บ สามาร์ถึท(าได*ด�งน�+
<BODY TEXT = ส�ท��ต*อิงกัาร์> จะม�เคร์��อิงหมาย “ ”
หร์�อิไม�ม�กั�ได* …………….</BODY>
โดยส�ท��ต*อิงกัาร์กั(าหนดน�+ สามาร์ถึท(ากัาร์กั(าหนดได* 2 ว�ธุ� ค�อิ
ร์ะบ)ชื่��อิข่อิงส�ท��ต*อิงกัาร์ เชื่�น Blue , Green , Red , Yellow
เป็#นต*น
<! - - ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.3 - ->
<HTML>
<HEAD>
<TITLE> กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์ โดยกัาร์ร์ะบ)ต�วเลข่</TITLE>
</HEAD>
<BODY BGCOLOR = #00FFFF>
ร์ะบ)ต�วเลข่ โดยใชื่*กัาร์กั(าหนดค�าส�ในร์ะบบเลข่ฐาน 16
ต�วอิย�างท�� 3.4 กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิล โดยกัาร์ร์ะบ)ต�วเลข่
<! - - ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.3 - ->
<HTML>
<HEAD>
<TITLE> กัาร์กั(าหนดส�พิ�+นหล�งข่อิงเอิกัสาร์ โดยกัาร์ร์ะบ)ต�วเลข่ </TITLE>
</HEAD>
<BODY BGCOLOR = #00FFFF>
BGCOLOR = Yellow>
ร์/ป็ท�� 3.6 ผ่ลท��ได*จากักัาร์แสดงผ่ล ต�วอิย�างท�� 3.4 โดยใชื่*โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�
ต�วอิย�างท�� 3.5 กัาร์กั(าหนดส�ต�วอิ�กัษร์ข่อิงเอิกัสาร์เอิชื่ท�เอิ�มแอิล โดยกัาร์ร์ะบ)ต�วเลข่
<! - - ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.5 - ->
<HTML> <HEAD>
<TITLE> กัาร์กั(าหนดส�ข่อิงต�วอิ�กัษร์ โดยกัาร์ร์ะบ)ร์ห�สส� </TITLE> </HEAD> <BODY TEXT = #FF00FF>
กัาร์กั(าหนดส�ข่อิงต�วอิ�กัษร์ โดยกัาร์ร์ะบ)ร์ห�สส�เป็#น FF00FF </BODY>
<! - - ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.4 - ->
<HTML> <HEAD>
<TITLE> กัาร์กั(าหนดส�ข่อิงต�วอิ�กัษร์ โดยกัาร์กั(าหนดส� </TITLE> </HEAD> <BODY TEXT = Blue> BGCOLOR = Yellow>
กัาร์กั(าหนดส�ข่อิงต�วอิ�กัษร์ โดยกัาร์กั(าหนดให*เป็#นส�น(+าเง�น </BODY></HTML>
</HTML>
ร์/ป็ท�� 3.7 ผ่ลท��ได*จากักัาร์แสดงผ่ล ต�วอิย�างท�� 3.5 โดยใชื่*โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�
ต่-ว็อย��งที่�� 3.6 ก�รูก��หนดส�พิ�6นหล-งและส�ต่-ว็อ-กษรูข่องเอกส�รูเอชื่ที่�เอ มแอล
<! - - ค(าส��งภาษาเอิชื่ท�เอิ�มแอิลส(าหร์�บต�วอิย�างท�� 3.6 - ->
<HTML> <HEAD>
<TITLE> กัาร์กั(าหนดส�ข่อิงพิ�+นหล�งและต�วอิ�กัษร์ข่อิงเอิกัสาร์ </TITLE>
</HEAD> <BODY BGCOLOR = yellow TEXT = #FF00FF>
กัาร์กั(าหนดส�พิ�+นหล�งและต�วอิ�กัษร์ </BODY> </HTML>
รู�ปที่�� 3.8 ผลที่��ได)จำ�กก�รูแสดงผล ต่-ว็อย��งที่�� 3.6 โดยใชื่)โปรูแกรูมเว็ บเบรู�ว็�เซอรู�
ใบง�นหน�ว็ยที่�� 3
คว็�มรู�)เบ�6องต่)นเก��ยว็ก-บภ�ษ�เอชื่ที่�เอ มแอล
ว็-ต่ถ+ปรูะสงค� ม�ท�กัษะในกัาร์สร์*างเว�บเพิจเบ�+อิงต*น โดยกัาร์ใชื่*โป็ร์แกัร์ม Notepad
อ+ปกรูณ� เคร์��อิงคอิมพิ�วเตอิร์� ท��ม�ค)ณสมบ�ต�ด�งต�อิไป็น�+
1. ม�โป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�2. ม�โป็ร์แกัร์ม Text Editor เชื่�น Notepad
ก�รูที่ดลอง1. จงท(ากัาร์สร์*างแฟัAมข่*อิม/ลต�วอิ�กัษร์ ด*วยโป็ร์แกัร์ม Notepad
โดยม�ข่*อิม/ลภาษาเอิชื่ท�เอิ�มแอิล ด�งต�อิไป็น�+
2. บ�นท�กัข่*อิม/ลลงในเคร์��อิงคอิมพิ�วเตอิร์�โดยต�+งชื่��อิว�า Lab03.html
3. ใชื่*โป็ร์แกัร์ม Internet Explorer ท(ากัาร์เป็7ดแฟัAมข่*อิม/ล “Lab03.html”
4. ผ่ลท��ได*จากักัาร์แสดงผ่ลค�อิ (วาดร์/ป็ภาพิป็ร์ะกัอิบ)
………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………
………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………
5. ท(ากัาร์เข่�ยนค(าส��งภาษาเอิชื่ท�เอิ�มแอิลอิย�างสมบ/ร์ณ� เพิ��อิท(ากัาร์แสดงผ่ลข่*อิม/ลด�งต�อิไป็น�+
5.1 กั(าหนดให*ส�ข่อิงต�วอิ�กัษร์เป็#นส�น(+าเง�น 5.2 กั(าหนดให*พิ�+นหล�งเป็#นส�เหล�อิง 5.3 แถึบด*านบนส)ดข่อิงโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์� แสดงข่*อิความว�า กัาร์เข่�ยนโป็ร์แกัร์มภาษา“
เอิชื่ท�เอิ�มแอิล”
5.4 แสดงชื่��อิข่อิงน�กัเร์�ยนอิย/�กัลางหน*ากัร์ะดาษ เม��แสดงผ่ลด*วยโป็ร์แกัร์มเว�บเบร์าว�เซึ่อิร์�
………………………………………………………………………………………………….………..
…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………
สร์)ป็ กัาร์สร์*างและกัาร์แสดงผ่ลเอิกัสาร์ภาษาเอิชื่ท�เอิ�มแอิล สามาร์ถึท(าได*โดย
………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………
………………………………………………………………………………………………….………..…………………………………………………………………………………………………………………
Recommended