L o g o

การพั�ฒนาเว็บเพัจการพั�ฒนาเว็บเพัจ (Web Page)

ว็ ชา การสร�างเว็บด้�ว็ยโปรแกรม ว็ ชา การสร�างเว็บด้�ว็ยโปรแกรม Text EditorText Editor

รหั�สว็ ชา งรหั�สว็ ชา ง2020520205ความรู้� �เบื้�องต้�นเกี่��ยวกี่�บื้กี่ารู้ออกี่แบื้บื้เว�บื้ไซต้�

L o g o

www.themegallery.com

บทน�า : การพั�ฒนาเว็บเพัจ น�บเป�นศาสตร�หัน !งท"!น�กคอมพั ว็เตอร�

และผู้(�สนใจท"!จะศ กษา เพั+!อสร�างสรรค�ผู้ลงาน ช ,นงานผู้-านเคร+อข่-ายอ นเตอร�เนต การออกแบบและพั�ฒนาเว็บเพัจ สามารถท�าได้�หัลายระบบ ข่ ,นอย(-ก�บล�กษณะข่องข่�อม(ล คว็ามชอบข่องผู้(�พั�ฒนา ตลอด้จนกล2-มเป3าหัมาย ท"!ต�องการน�าเสนอ ด้�งน�,นการศ กษาถ งหัล�กการพั�ฒนาเว็บเพัจจ งเป�นส !งท"!จ�าเป�นและส�าค�ญอย-างย !ง

L o g o

www.themegallery.com

ค�าท"!คว็รร(�จ�กก-อนสร�างเว็บไซต� เว�บื้ไซต้� (Website) คอ ชุ�ดของข�อม�ลที่��ต้�องน!าเสนอบื้นรู้ะบื้บื้อ$นเต้อรู้�เน�ต้ ปรู้ะกี่อบื้ด�วย เว�บื้เพจ (Web Page) ต้��งแต้( 1 หน�า ข*�นไปเว�บื้เพจ (Webpage) คอ ไฟล� HTML 1 ไฟล�ที่��แสดงผลบื้นบื้รู้าวเซอรู้�น��นเอง โฮมเพจ(Homepage) คอ เว�บื้เพจหน�าแรู้กี่ของเว�บื้ไซต้� หรู้อเปรู้�ยบื้หน�าเหมอหน�าปกี่หน�งสอ

L o g o

ต�ว็อย-างHomepage

Webpage

Website

L o g o

www.themegallery.com

ค�าท"!คว็รร(�จ�กก-อนสร�างเว็บไซต� URL (Universal Resource Location) คอ มาต้รู้ฐานในกี่ารู้กี่!าหนดที่��อย�(ของเว�บื้ไซต้�ในเครู้อข(ายอ$นเที่อรู้�เน�ต้ หรู้อเรู้�ยกี่อ�กี่อย(างว(าที่��อย�(ของเว�บื้ไซต้� (Internet Address) เชุ(นhttp://www.hi.ac.th

บื้รู้าวเซอรู้� (Browser) คอ โปรู้แกี่รู้มแสดงเว�บื้เพจหรู้อหน�าเว�บื้ไซต้�ที่��ถู�กี่สรู้�างข*�นมาจากี่ภาษา HTML เช-น Internet Explorer,

Mozilla Firefox, Opera, Netscape

L o g o

www.themegallery.com

ค�าท"!คว็รร(�จ�กก-อนสร�างเว็บไซต� (ต-อ)

HTML(

Hyper Text Markup Language) คอ ภาษามาต้ฐานที่��ใชุ�ในกี่ารู้สรู้�างเว�บื้เพจ เพ�อ

น!าไปแสดงบื้นบื้รู้าวเซอรู้�FTP (File Transfer Protocol) คอโปรู้โต้คอลหรู้อมาต้รู้ฐานรู้�ปแบื้บื้หน*�งที่��ใชุ�ในกี่ารู้รู้�บื้-ส(งข�อม�ลรู้ะหว(างเครู้�องคอมพ$วเต้อรู้�ผ(านเครู้อข(ายอ$นเที่อรู้�เน�ต้

L o g o

www.themegallery.com

ค�าท"!คว็รร(�จ�กก-อนสร�างเว็บไซต� (ต-อ)

เว�บื้เซ$รู้�ฟเวอรู้� (Web server) คอเครู้�องคอมพ$วเต้อรู้�เครู้�องหน*�งในเครู้อข(ายอ$นเที่อรู้�เน�ต้ที่��ที่!าหน�าที่��เกี่�บื้รู้วบื้รู้วมเว�บื้ไซต้�

ต้(าง ๆ เอาไว� เพ�อให�ผ��ชุมสามารู้ถูเข�ามาเป6ดด�เว�บื้ไซต้�น��นได�

ชุ�อโดเมน (Domain name) คอ ชุ�อที่��ใชุ� อ�างถู*งเว�บื้ไซต้�แที่น IP Address เพ�อให�

จดจ!าได�ง(าย โดยรู้�ปแบื้บื้คอ ชุ�อ.รู้ห�สโดเมน

L o g o

www.themegallery.com

ร(�จ�กรหั�สโด้เมนรหั�สโด้เมนcomedugov

ใช�ส�าหัร�บ

กล2-มการค�าและเว็บไซต�ท�!ว็ไปสถาบ�นการศ กษาหัน-ว็ยงานข่องร�ฐท"!ไม-ใช-หัน-ว็ยงานทางการทหัารหัน-ว็งงานทางการทหัารหัน-ว็ยงานเก"!ยว็ก�บเคร+อข่-ายหัน-ว็ยงานท"!ไม-หัว็�งผู้ลก�าไรบร ษ�ทท"!จด้ทะเบ"ยนในประเทศไทย

ต�ว็อย-าง

Pantip.comUcla.eduNasa.govArmy.milIsp.net

Unesco.orgInfopress.c

o.th

milnetorg

co.th

L o g o

www.themegallery.com

โปรแกรมสร�างเว็บเพัจ เด้ มการพั�ฒนาเว็บเพัจจะใช�โปรแกรม

ประเภท Text Editor โด้ยผู้(�พั�ฒนาจะต�องศ กษาภาษา HTML(HyperText Markup Language) ซ !งสร�างภาระใหั�แก-ผู้(�สนใจในกล2-มท"!ไม-ได้�ศ กษาด้�านไอท"มาโด้ยตรง

ด้�งน�,น น�กโปรแกรมเมอร� จ งพั�ฒนา เคร+!องม+อพั�ฒนาเว็บเพัจ มาเผู้ยแพัร-ใหั�ก�บผู้(�สนใจเพั+!อเล+อกใช�งาน

L o g o

www.themegallery.com

เคร+!องม+อพั�ฒนาเว็บเพัจการพั�ฒนาเว็บเพัจด้�ว็ยการลงรหั�ส HTML ด้�ว็ย

โปรแกรม Simple Text Editorsการพั�ฒนาเว็บเพัจด้�ว็ยค�าส�!ง Save as HTML…การพั�ฒนาเว็บเพัจด้�ว็ย - Browser Based

HTML Editorการพั�ฒนาเว็บเพัจด้�ว็ยค�าส�!ง Web

Server/Developer Platforms WYSIWYG HTML(What You See Is

What You Get)

L o g o

www.themegallery.com

หัล�กการออกแบบเว็บเพัจหัล�กการออกแบบ สามารถท�าได้�หัลาย

ระบบ ข่ ,นอย(-ก�บล�กษณะข่องข่�อม(ล คว็ามชอบข่องผู้(�พั�ฒนา ตลอด้จนกล2-มเป3าหัมาย ท"!ต�องการน�าเสนอ เช-น หัากกล2-มเป3าหัมายเป�นเด้กว็�ยร2-นและน�าเสนอข่�อม(ลเก"!ยว็ก�บ คว็ามบ�นเท ง อาจจะออกแบบใหั�ม"ท ศทางการไหัลข่องหัน�าเว็บเพัจ ท"!หัลากหัลายใหั�ล(กเล-นได้�มากกว็-าเว็บท"!น�าเสนอใหั�ก�บผู้(�ใหัญ- หัร+อเว็บด้�านว็ ชาการ

L o g o

www.themegallery.com

หัล�กการออกแบบเว็บเพัจ (ต-อ)สามารถแบ-งได้� 3 ล�กษณะ 1. แบบล�าด้�บข่�,น (Hierarchy) เป�นการจ�ด้

แสด้งหัน�าเว็บ เร"ยงตามล�าด้�บก !งก�านแตกแข่นงต-อเน+!องไปเหัม+อนต�นไม�กล�บหั�ว็

L o g o

www.themegallery.com

หัล�กการออกแบบเว็บเพัจ (ต-อ) 2. แบบเช งเส�น (Linear) เป�นการจ�ด้

แสด้งหัน�าเว็บเร"ยงต-อเน+!องไปในท ศทางเด้"ยว็

L o g o

www.themegallery.com

หัล�กการออกแบบเว็บเพัจ (ต-อ) 3. แบบผู้สม (Combination)

เป�นการจ�ด้หัน�าเว็บชน ด้ผู้สมระหัว็-างแบบล�าด้�บข่�,นและแบบเช งเส�น

L o g o

www.themegallery.com

แนวค$ดในกี่ารู้ออกี่แบื้บื้แนวค$ดในกี่ารู้ออกี่แบื้บื้เร"ยนร(�จากเว็บไซต�ต-างๆประย2กต�ร(ปแบบจากส !งพั มพั�ใช�แบบจ�าลองเปร"ยบเท"ยบออกแบบอย-างสร�างสรรค�

L o g o

www.themegallery.com

หล�กี่ในกี่ารู้ออกี่แบื้บื้เว�บื้ไซต้�หล�กี่ในกี่ารู้ออกี่แบื้บื้เว�บื้ไซต้�สร�างล�าด้�บช�,นคว็ามส�าค�ญข่ององค�ประกอบสร�างร(ปแบบ บ2คล ก และสไตล�สร�างคว็ามสม�!าเสมอตลอด้ท�,งไซต�จ�ด้ว็างองค�ประกอบท"!ส�าค�ญไว็�ในส-ว็นบน

ข่องหัน�าเสมอสร�างจ2ด้สนใจด้�ว็ยคว็ามแตกต-างจ�ด้แต-งหัน�าเว็บใหั�เป�นระเบ"ยบและเร"ยบง-ายใช�กราฟิ;กอย-างเหัมาะสม

L o g oส !งท"!ต�องค�าน งถ งในการออกแบบเว็บเพัจท"!

ด้" 1. คว็ามแปลก คว็ามแตกต-าง

(Contrast) ค+อแยกคว็ามแตกต-างท"!อย(-บนจอภาพัใหั�เหันช�ด้เจน เช-นการใช�ต�ว็หัน�งส+อ เส�น ส" ข่นาด้ ฯลฯ เพัราะจะสามารถด้ งด้(ด้คว็ามสนใจได้�ด้"

2.  การย�,าซ�,า (Repetition) ค+อแบบแผู้นหัร+อสไตล�ข่องผู้(�ออกแบบ จะต�องม"ล�กษณะร(ปแบบ สอด้คล�องก�นท�,งหัมด้

L o g oส !งท"!ต�องค�าน งถ งในการออกแบบเว็บเพัจท"!

ด้"(ต-อ) 3. การจ�ด้แถว็ การว็างแนว็

(Alignment) ค+อ การจ�ด้ว็างองค�ประกอบต-าง ๆ ต�องไม-สะเปะสะปะ ไร�เหัต2ผู้ล ไม-ข่�ด้ก�บคว็ามร(�ส ก ข่องผู้(�อ-าน จ�ด้ใหั�ด้(สะอาด้

4. คว็ามใกล�เค"ยง คว็ามเก"!ยว็เน+!อง (Proximity) ค+อ การจ�ด้ว็างองค�

ประกอบท"!เก"!ยว็เน+!องก�น ใหั�เป�นกล2-มก�อนเด้"ยว็ก�น

L o g o

องค�ประกอบข่องการออกแบบเว็บไซต� 1. คว็ามเร"ยบง-าย 2. คว็ามสม�!าเสมอ 3. คว็ามเป�นเอกล�กษณ� 4. เน+,อหัาท"!ม"ประโยชน� 5. ระบบเนว็ เกช�นท"!ใช�งานง-าย 6.ล�กษณะท"!น-าสนใจ หัน�าตาข่องเว็บไซต�

จะต�องม"คว็ามส�มพั�นธ์�ก�บค2ณภาพัข่ององค�ประกอบต-างๆ

L o g oองค�ประกอบข่องการออกแบบเว็บไซต�

(ต-อ)7. การใช�งานอย-างไม-จ�าก�ด้ ผู้(�ใช�ส-ว็น

ใหัญ-สามารถเข่�าถ งได้�มากท"!ส2ด้8. ค2ณภาพัในการออกแบบ การ

ออกแบบและเร"ยบเร"ยงเน+,อหัาอย-างรอบคอบ

9.ระบบการใช�งานท"!ถ(กต�อง การใช�แบบฟิอร�มส�าหัร�บกรอกข่�อม(ลต�องสามารถกรอกได้�จร ง ใช�งานได้�จร ง

L o g o

กระบว็นการสร�างและออกแบบเว็บเพัจ 1 . การว็างแผู้น (Planning) ผ��สรู้�างเว�บื้จะ

ต้�องรู้วบื้รู้วมข�อม�ลที่��ต้�องกี่ารู้จะน!ามาสรู้�างเว�บื้ กี่!าหนดว�ต้ถู�ปรู้ะสงค�และกี่ล�(มเป8าหมาย 2. การออกแบบ (Design) กี่ารู้ลงมอปฏิ$บื้�ต้$ จ�ดพ$มพ�เน�อหา และค�ณล�กี่ษณะอ�นที่��ต้�องใชุ�ในเว�บื้ กี่ารู้ออกี่แบื้บื้กี่�จะเน�นที่��กี่ารู้จ�ดหน�าจอของเว�บื้ให�สอดคล�องกี่�น

3 . การพั�ฒนา (Development) เน�นไปที่��กี่ารู้ต้กี่แต้(งและเสรู้$มเครู้�องมอต้(าง ๆ ส!าหรู้�บื้เว�บื้

L o g o

กระบว็นการสร�างและออกแบบเว็บเพัจ 4. การต ด้ต�,ง (Publishing) กี่ารู้น!าเว�บื้ที่��ได�สรู้�างข*�นเข�าไปต้$ดต้��งในเว�บื้เซอรู้�เวอรู้�เพ�อให�แสดงผลได�ในรู้ะบื้บื้อ$นเที่อรู้�เน�ต้ หรู้อจะเรู้�ยกี่ว(า กี่ารู้อ�บื้โหลด   (Up load) 5. การบ�าร2งร�กษา (Maintenance) เป;นข��นต้อนปรู้ะเม$นผลและต้$ดต้ามผลกี่ารู้ต้$ดต้��งเว�บื้ไซต้�ว(าม�ข�อข�ดข�องหรู้อต้�องปรู้�บื้ปรู้�งเปล��ยนแปลงเว�บื้เพ$�มเต้$มให�ที่�นสม�ยอย�(เสมอ อาจจะเรู้�ยกี่ได�ว(าข��นต้อนกี่ารู้อ�บื้เดที่ (Up date)

L o g o

www.themegallery.com

กี่ารู้กี่!าหนดชุ�อไฟล� และนามสกี่�ลของไฟล�เอกี่สารู้กี่ารู้กี่!าหนดชุ�อไฟล� และนามสกี่�ลของไฟล�เอกี่สารู้เว�บื้ เว�บื้

คว็รใช�ต�ว็อ�กษร a - z หัร+อต�ว็เลข่ 0 - 9 หัร+อผู้สมก�น

ต�ว็อ�กษร a - z คว็รเป�นต�ว็พั มพั�เลก หั�ามต�,งช+!อไฟิล�เป�นภาษาไทยช+!อไฟิล�แรกข่องเอกสารเว็บ ม�กจะใช�

ช+!อ index หัร+อ default

L o g o

www.themegallery.com

ข่�,นตอนการพั�ฒนาเว็บเพัจข่�,นตอนการพั�ฒนาเว็บเพัจ ว็างแผู้นการพั�ฒนาเว็บเพัจ ก�าหันด้ได้เรกทรอร"! หัร+อโฟิลเด้อร� (Directory/Folder) ท"!ใช�เกบเอกสารเว็บ

สร�างภาพั หัร+อจ�ด้หัาภาพัท"!เก"!ยว็ข่�องก�บเน+,อหัา แล�ว็จ�ด้เกบไว็�ในได้เรกทรอร"!ท"!สร�างไว็�

L o g o

www.themegallery.com

ข่�,นตอนการพั�ฒนาเว็บเพัจข่�,นตอนการพั�ฒนาเว็บเพัจ ว็างแผู้นการพั�ฒนาเว็บเพัจ ก�าหันด้ได้เรกทรอร"! หัร+อโฟิลเด้อร�

(Directory/Folder) ท"!ใช�เกบเอกสารเว็บ สร�างภาพั หัร+อจ�ด้หัาภาพัท"!เก"!ยว็ข่�องก�บเน+,อหัา แล�ว็จ�ด้เกบ

ไว็�ในได้เรกทรอร"!ท"!สร�างไว็� สร�างเอกสารเว็บ โด้ยก�าหันด้ช+!อไฟิล�เอกสารเว็บ ตามข่�อ

ก�าหันด้ข่องผู้(�ด้(แลระบบเคร+อข่-าย (Web System Administrator) และจ�ด้เกบไว็�ในได้เรกทรอร"!ท"!สร�างไว็�

ตรว็จสอบผู้ลเอกสารเว็บผู้-านเบราเซอร� ส-งข่�อม(ลข่ ,นเคร+!องแม-ข่-าย (Server) และท�าการตรว็จ

สอบผู้ลการเร"ยกด้(จากเคร+!องแม-ข่-าย

L o g o

www.themegallery.com

หล�กี่เกี่ณฑ์�ในกี่ารู้เลอกี่ภาพ หล�กี่เกี่ณฑ์�ในกี่ารู้เลอกี่ภาพ Graphic Graphic ข่นาด้ไฟิล�ไม-คว็รเก น 80 ก โลไบต� เพั+!อคว็าม

รว็ด้เรว็ในการแสด้งผู้ล ใช�ไฟิล�แบบ JPEG ส�าหัร�บร(ปถ-าย หัร+อร(ปท"!ม"ส"เก น

256 ส" ใช�ไฟิล�แบบ GIF ส�าหัร�บภาพัว็าด้หัร+อภาพัการ�ต(นท"!

ม"ส"ไม-เก น 256 ส" เล+อกภาพัท"!ม"คว็ามน-าสนใจและด้ งด้(ด้ เพั+!อไม-ใหั�เส"ย

เว็ลาท"!เส"ยไปในการ Download ภาพัเปล-าประโยชน�

L o g o

www.themegallery.com

ไฟล�ภาพกี่รู้าฟ6กี่ที่��น!ามาใชุ�ในกี่ารู้ที่!าเว�บื้ ไฟล�ภาพกี่รู้าฟ6กี่ที่��น!ามาใชุ�ในกี่ารู้ที่!าเว�บื้ ไฟิล�ฟิอร�แมต JPG, JPEG ไฟิล�ฟิอร�แมต GIFไฟิล�ฟิอร�แมต PNG

L o g o

www.themegallery.com

ไฟล�สกี่�ล ไฟล�สกี่�ล JPG JPG ((Joint Photographer’s Experts GroupJoint Photographer’s Experts Group ) )จ�ดเด(น

แสดงส�ได�ส�งส�ด16.7 ล�านส� (สน�บื้สน�นส�ได�ถู*ง 24 bit) สามารู้ถูกี่!าหนดค(ากี่ารู้บื้�บื้ไฟล�ได�ต้ามที่��ต้�องกี่ารู้ ม�รู้ะบื้บื้แสดงผลแบื้บื้หยาบื้และค(อยๆ ขยายไปส�(ละเอ�ยดใน

รู้ะบื้บื้ Progressive ม�โปรู้แกี่รู้มสน�บื้สน�นกี่ารู้สรู้�างจ!านวนมากี่ เรู้�ยกี่ด�ได�กี่�บื้ Graphics Browser ที่�กี่ต้�ว ต้��งค(ากี่ารู้บื้�บื้ไฟล�ได� (compress files )

จ�ดด�อย ที่!าให�พ�นของรู้�ปโปรู้(งใสไม(ได�

L o g o

www.themegallery.com

ไฟล�สกี่�ล ไฟล�สกี่�ล GIF GIF ((Graphics Interlace Graphics Interlace FileFile ) ) จ�ดเด(น

แสดงส�ได�ส�งส�ด 256 ส� สามารู้ถูใชุ�งานข�ามรู้ะบื้บื้ (Cross Platform ) หมายความว(า คอมพ$วเต้อรู้�

ที่�กี่รู้ะบื้บื้ ไม(ว(าจะใชุ� Windows, Unix กี่�สามารู้ถูเรู้�ยกี่ใชุ�ไฟล�ภาพสกี่�ลน��ได� ม�ขนาดไฟล�ต้!�า จากี่เที่คโนโลย�กี่ารู้บื้�บื้อ�ดภาพ ที่!าให�สามารู้ถูส(งไฟล�ภาพได�

รู้วดเรู้�ว สามารู้ถูที่!าพ�นของภาพให�เป;นพ�นแบื้บื้โปรู้(งใสได� (Transparent ) ม�รู้ะบื้บื้แสดงผลแบื้บื้หยาบื้และค(อยๆ ขยายไปส�(ละเอ�ยดในรู้ะบื้บื้ Interlace ม�โปรู้แกี่รู้มสน�บื้สน�นกี่ารู้สรู้�างจ!านวนมากี่ เรู้�ยกี่ด�ได�กี่�บื้ Graphics Browser ที่�กี่ต้�ว ความสามารู้ถูด�านกี่ารู้น!าเสนอแบื้บื้ภาพเคล�อนไหว (GIF Animation )

จ�ดด�อย ไฟล�ชุน$ดน��กี่�ม�จ�ดด�อยในเรู้�องของกี่ารู้แสดงส� ซ*�งแสดงได�เพ�ยง 256 ส�

ที่!าให� กี่ารู้น!าเสนอภาพถู(าย หรู้อภาพที่��ต้�องกี่ารู้ความคมชุ�ดหรู้อภาพสดใส จะต้�องอาศั�ยฟอรู้�แมต้อ�น

L o g o

www.themegallery.com

ไฟล�สกี่�ล ไฟล�สกี่�ล PNG PNG ((Portable Network Portable Network GraphicsGraphics ) )

จ�ดเด(น แสดงส�ได�ส�งส�ด 16.7 ล�านส� สน�บื้สน�นส�ได�ถู*งต้ามค(า True color (16 bit, 32 bit หรู้อ 64 bit ) สามารู้ถูกี่!าหนดค(ากี่ารู้บื้�บื้ไฟล�ได�ต้ามที่��ต้�องกี่ารู้ ม�รู้ะบื้บื้แสดงผลแบื้บื้หยาบื้และค(อยๆ ขยายไปส�(ละเอ�ยด (Interlace ) สามารู้ถูที่!าพ�นโปรู้(งใสได�

จ�ดด�อย หากี่กี่!าหนดค(ากี่ารู้บื้�บื้ไฟล�ไว�ส�ง จะใชุ�เวลาในกี่ารู้คลายไฟล�ส�งต้ามไปด�วย แต้(

ขนาดของไฟล�จะม�ขนาดต้!�า ไม(สน�บื้สน�นกี่�บื้ Graphic Browser รู้� (นเกี่(า สน�บื้สน�นเฉพาะ IE 4 และ

Netscape 4 ความละเอ�ยดของภาพและจ!านวนส�ข*�นอย�(กี่�บื้ Video Card โปรู้แกี่รู้มสน�บื้สน�นในกี่ารู้สรู้�างม�น�อย

L o g o

www.themegallery.com

กี่ารู้ออกี่แบื้บื้รู้ะบื้บื้เนว$เกี่ชุ�นกี่ารู้ออกี่แบื้บื้รู้ะบื้บื้เนว$เกี่ชุ�นระบบเนว็ เกช�นแบบล�าด้�บข่�,น (Hierarchical)

ระบบเนว็ เกช�นแบบโกลบอล (Global)

ระบบเนว็ เกช�นแบบโลคอล (Local)ระบบเนว็ เกช�นเฉพัาะท"! (Ad Hoc)

L o g o

www.themegallery.com

HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language)

HTML เป�นภาษาท"!ใช�ในการพั�ฒนาเว็บเพัจ เพั+!อใหั�โปรแกรมเว็บ บราว็เซอร�

(web brower) ต-างๆ สามารถแปลงค�าส�!ง แสด้งผู้ลในล�กษณะข่องร(ปภาพั ต�ว็อ�กษร เส"ยง ภาพัเคล+!อนไหัว็ โด้ยไฟิล�ท"!สร�างจะม"นามสก2ล .htmlหัร+อ .htm กได้�

L o g o

www.themegallery.com

HTML (Hyper Text Markup HTML (Hyper Text MarkupLanguage)Language)

<html><head><title>Hello</title></head><body>

<p>สว�สด�</p>

</body></html>

<HTML> หัมายถ ง การระบ2ว็-า เอกสารใช�ภาษา HTML และ

บรรท�ด้ส2ด้ท�ายจะต�องม"</HTML>

<HEAD> เพั+!อระบ2ช+!อเว็บเพัจ โด้ยจะต�องใช�ค�าส�!ง <TITLE>เป�นต�ว็บอก และบรรท�ด้ส2ด้ท�ายจะ

ต�องม" </TITLE> </ HEAD>

<body> เป;ด้ส-ว็นเน+,อหัา </body> next

L o g o

www.themegallery.com

TagTag Tag เป�นล�กษณะเฉพัาะข่องภาษา HTML ใช�ในการระบ2ร(ปแบบค�าส�!ง หัร+อการลงรหั�สค�าส�!ง HTML ภายในเคร+!องหัมาย less-than bracket ( < )และ greater-than bracket ( > ) โด้ยท"! Tag HTML แบ-งได้� 2 ล�กษณะ ค+อ

Tag เด้"!ยว็เป;น Tag ที่��ไม(ต้�องม�กี่ารู้ป6ดรู้ห�ส เชุ(น <P>, <HR> เป;นต้�น

Tag เป;ด้/ป;ด้เป;น Tag ที่��ปรู้ะกี่อบื้ด�วย Tag เป6ด และ Tag ป6ด โดย Tag ป6ด จะม�เครู้�องหมาย slash (/) น!าหน�าค!าส��งใน Tag น��นๆ เชุ(น <B>…</B>, <P>…</P> เป;นต้�น back