ความรู้��พื้นฐานเกี่��ยวกี่�บกี่ารู้สรู้�างความรู้��พื้นฐานเกี่��ยวกี่�บกี่ารู้สรู้�างเว�บไซต์�เว�บไซต์�

Create By : Daowruang Srihathai [ Benchamaratrangsarit School ]

E-mail : ajdao@hotmail.com

ศั�พื้ท์�เบองต์�นเกี่��ยวกี่�บเว�บไซต์�ศั�พื้ท์�เบองต์�นเกี่��ยวกี่�บเว�บไซต์� Internet Internet คื�อ ระบบเคืร�อข่ายคือมพิ�วเตอร�ที่��ใหญ่ที่��สุ�ดในโลกเก�ดจากการเชื่��อมคื�อ ระบบเคืร�อข่ายคือมพิ�วเตอร�ที่��ใหญ่ที่��สุ�ดในโลกเก�ดจากการเชื่��อม

โยงโยง ข่องคือมพิ�วเตอร�หลายล#านเคืร��องที่��กระจายอย$ตามที่��ตางๆ ในโลก ข่องคือมพิ�วเตอร�หลายล#านเคืร��องที่��กระจายอย$ตามที่��ตางๆ ในโลก

อ�นเตอร�เน&ตเป็(นแหลงที่��รวมข่องข่#อม$ลมหาศาลและเป็(นชื่องที่างต�ดตอสุ��อสุารอ�นเตอร�เน&ตเป็(นแหลงที่��รวมข่องข่#อม$ลมหาศาลและเป็(นชื่องที่างต�ดตอสุ��อสุาร เพิ��อแลกเป็ล��ยนข่#อม$ลที่��สุะดวกและรวดเร&วบร�การยอดน�ยมบนอ�นเตอร�เน&ต เพิ��อแลกเป็ล��ยนข่#อม$ลที่��สุะดวกและรวดเร&วบร�การยอดน�ยมบนอ�นเตอร�เน&ต ได#แก เว&บเพิจ ได#แก เว&บเพิจ ((wwwwww ) ) อ�เมล� และ อ�เมล� และ Instant Messageing Instant Messageing เชื่น เชื่น MSN Messenger, Yahoo Messenger, ICQ MSN Messenger, Yahoo Messenger, ICQ เป็(นต#นเป็(นต#น

wwwwww (World Wide Web) (World Wide Web) เป็(นบร�การข่#อม$ล โดยข่#อม$ลข่อง เป็(นบร�การข่#อม$ล โดยข่#อม$ลข่อง www www จะอย$ในจะอย$ในร$ป็เอกสุารแบบ ร$ป็เอกสุารแบบ Hypertext Hypertext ซึ่-�งภายในเอกสุารจะม�จ�ดเชื่��อมโยง ซึ่-�งภายในเอกสุารจะม�จ�ดเชื่��อมโยง ((linklink ) ) ไป็ย/งเอกไป็ย/งเอกสุารอ��นๆ ที่��เก��ยวข่#อง เอกสุารตางๆ ที่��เชื่��อมโยงก/นเหม�อนใยแมงม�ม เป็(นที่��มาข่องสุารอ��นๆ ที่��เก��ยวข่#อง เอกสุารตางๆ ที่��เชื่��อมโยงก/นเหม�อนใยแมงม�ม เป็(นที่��มาข่องคื0าวา คื0าวา WebWeb..

HTTPHTTP เป็(นโป็รโตคือลสุ0าหร/บเป็1ดด$ข่#อม$ลจาก เป็(นโป็รโตคือลสุ0าหร/บเป็1ดด$ข่#อม$ลจาก www www เร�ยกใชื่#งานได#โดยระบ�เร�ยกใชื่#งานได#โดยระบ� httphttp :// :// และตามด#วย และตามด#วย URL URL ในชื่องกรอก ในชื่องกรอก Address Address ด#านบนข่องโป็รแกรมเว&บด#านบนข่องโป็รแกรมเว&บ

บราวเซึ่อร�บราวเซึ่อร�

ศั�พื้ท์�เบองต์�นเกี่��ยวกี่�บเว�บไซต์� ศั�พื้ท์�เบองต์�นเกี่��ยวกี่�บเว�บไซต์� ((ต์�อต์�อ))

URLURL ( (Uniform Resource LocatorUniform Resource Locator)) คื�อ ข่#อคืวามที่��คื�อ ข่#อคืวามที่��บอกต0าแหนงข่องข่#อม$ลใน บอกต0าแหนงข่องข่#อม$ลใน Internet Internet ไมวาจะเป็(น ไมวาจะเป็(น Web Web page, File page, File ป็ระเภที่ตางๆ เชื่น ร$ป็ภาพิ เสุ�ยงป็ระเภที่ตางๆ เชื่น ร$ป็ภาพิ เสุ�ยง

URL URL ป็ระกอบด#วย โป็รโตคือล ป็ระกอบด#วย โป็รโตคือล + + domain name domain name + +((directory directory ที่��เก&บไฟล�ที่��เก&บไฟล� ) ) ชื่��อไฟล� เชื่นชื่��อไฟล� เชื่นhttphttp://://wwwwww..enjoydayenjoyday..netnet//webtutorialwebtutorial//csscss//indindexex..htmlhtmlhttphttp://://wwwwww..enjoydayenjoyday..netnet//imagesimages//logologo..jpgjpg

Domain nameDomain name คื�อ ชื่��อเว&บไซึ่ต� คื�อ ชื่��อเว&บไซึ่ต� ((ที่��ไมม�การซึ่03าก/นก/บที่��ไมม�การซึ่03าก/นก/บเว&บไซึ่ต�อ��นๆเว&บไซึ่ต�อ��นๆ ) ) เชื่น เชื่น googlegoogle..com, enjoydaycom, enjoyday..netnet

ศั�พื้ท์�เบองต์�นเกี่��ยวกี่�บเว�บไซต์� ศั�พื้ท์�เบองต์�นเกี่��ยวกี่�บเว�บไซต์� ((ต์�อต์�อ)) WebpageWebpage คื�อ หน#าเอกสุารข่องบร�การ คื�อ หน#าเอกสุารข่องบร�การ www www ที่��อย$ที่��อย$

ในร$ป็แบบ ในร$ป็แบบ HTML HTML ภายในป็ระกอบด#วยข่#อคืวาม ภาพิ ภายในป็ระกอบด#วยข่#อคืวาม ภาพิ ล�งคื� ล�งคื� Web page Web page แตละหน#าจะเชื่��อมโยงก/น เพิ��อให#เราแตละหน#าจะเชื่��อมโยงก/น เพิ��อให#เราเร�ยกด$เอกสุารหน#าอ��นๆ ที่��เก��ยวข่#องได#อยางสุะดวก ไมเร�ยกด$เอกสุารหน#าอ��นๆ ที่��เก��ยวข่#องได#อยางสุะดวก ไมต#องระบ� ต#องระบ� URL URL เองที่�กคืร/3งเองที่�กคืร/3ง

HomepageHomepage คื�อ คื�อ Web page Web page หน#าแรกที่��ผู้$#ใชื่#เห&นหน#าแรกที่��ผู้$#ใชื่#เห&นเม��อเข่#ามาย/ง เม��อเข่#ามาย/ง Web site Web site ม/กถู$กออกแบบให#โดดเดน นาม/กถู$กออกแบบให#โดดเดน นาสุนใจ และม�ล�งคื�เชื่��อมโยงไป็เว&บเพิจหน#าอ��นๆสุนใจ และม�ล�งคื�เชื่��อมโยงไป็เว&บเพิจหน#าอ��นๆ

   WebsiteWebsite คื�อ คื�อ Web page Web page หลายๆ หน#าที่��ม�เน�3อหาหลายๆ หน#าที่��ม�เน�3อหา

เก��ยวข่#องก/น ป็ระกอบเข่#าด#วยก/นเก��ยวข่#องก/น ป็ระกอบเข่#าด#วยก/น

ศั�พื้ท์�เบองต์�นเกี่��ยวกี่�บเว�บไซต์� ศั�พื้ท์�เบองต์�นเกี่��ยวกี่�บเว�บไซต์� ((ต์�อต์�อ)) Web browserWeb browser คอ โปรู้แกี่รู้มส#าหรู้�บเรู้�ยกี่ดู�เว�บเพื้จ โดูยจะแปลค#าส��ง คอ โปรู้แกี่รู้มส#าหรู้�บเรู้�ยกี่ดู�เว�บเพื้จ โดูยจะแปลค#าส��ง HTML HTML

แล�วปรู้ะมวลผลเพื้�อแสดูงผลออกี่มาเป*น แล�วปรู้ะมวลผลเพื้�อแสดูงผลออกี่มาเป*น Web page Web page เช่�น เช่�น Internet Internet Explorer Explorer ((IEIE)), Mozilla Firefox, Safari, Opera, , Mozilla Firefox, Safari, Opera, และ และ Netscape Netscape Navigator Navigator เป*นต์�นเป*นต์�น

Web serverWeb server คอ เครู้�องคอมพื้,วเต์อรู้�ท์��ท์#าหน�าท์��ให�บรู้,กี่ารู้ข้�อม�ลใน คอ เครู้�องคอมพื้,วเต์อรู้�ท์��ท์#าหน�าท์��ให�บรู้,กี่ารู้ข้�อม�ลใน www www ซ/�งเกี่�บ ซ/�งเกี่�บ Web page Web page และโปรู้แกี่รู้มจ�ดูกี่ารู้บรู้,กี่ารู้ เม�อผ��ใช่�ต์�องกี่ารู้ดู� และโปรู้แกี่รู้มจ�ดูกี่ารู้บรู้,กี่ารู้ เม�อผ��ใช่�ต์�องกี่ารู้ดู� Web page Web page ท์��อย��ในท์��อย��ในเครู้�อง เครู้�อง Server Server กี่�จะใช่� กี่�จะใช่� Web browser Web browser เรู้�ยกี่ข้อข้�อม�ลโดูยรู้ะบ0ท์��อย��ข้องข้�อม�ลในเรู้�ยกี่ข้อข้�อม�ลโดูยรู้ะบ0ท์��อย��ข้องข้�อม�ลในล�กี่ษณะท์��เรู้�ยกี่ว�า ล�กี่ษณะท์��เรู้�ยกี่ว�า URLURL

UploadUpload คอ กี่ารู้ส�งข้�อม�ลจากี่เครู้�องข้องเรู้าไปย�ง คอ กี่ารู้ส�งข้�อม�ลจากี่เครู้�องข้องเรู้าไปย�ง Web ServerWeb Server เม�อเรู้าสรู้�าง เม�อเรู้าสรู้�าง Web page Web page แต์�ละหน�าแล�ว ต์�องส�งข้�อม�ลไปเกี่�บไว�ท์�� แต์�ละหน�าแล�ว ต์�องส�งข้�อม�ลไปเกี่�บไว�ท์�� Web Web

Server Server ท์��เป*นเครู้�องคอมพื้,วเต์อรู้�ท์��ให�บรู้,กี่ารู้ข้�อม�ล ท์��เป*นเครู้�องคอมพื้,วเต์อรู้�ท์��ให�บรู้,กี่ารู้ข้�อม�ล www www โดูยอาศั�ยโปรู้แกี่รู้ม โดูยอาศั�ยโปรู้แกี่รู้ม FTPFTP

Search engineSearch engine เป*นเครู้�องมอหรู้อโปรู้แกี่รู้มในกี่ารู้ค�นหาเว�บต์�างๆ โดูยม�กี่ารู้เป*นเครู้�องมอหรู้อโปรู้แกี่รู้มในกี่ารู้ค�นหาเว�บต์�างๆ โดูยม�กี่ารู้เกี่�บ รู้ายช่�อเว�บไซต์� และข้�อม�ลท์��เกี่��ยวข้�องต์�างๆ ข้องเว�บไซต์� และน#ามาจ�ดูเกี่�บไว�ใน เกี่�บ รู้ายช่�อเว�บไซต์� และข้�อม�ลท์��เกี่��ยวข้�องต์�างๆ ข้องเว�บไซต์� และน#ามาจ�ดูเกี่�บไว�ใน server server เพื้�อให�สามารู้ถค�นหาและแสดูงผลไดู�สะดูวกี่รู้วดูเรู้�ว เช่�น เพื้�อให�สามารู้ถค�นหาและแสดูงผลไดู�สะดูวกี่รู้วดูเรู้�ว เช่�น googlegoogle..com, com, yahooyahoo..com, bingcom, bing..com, altavistacom, altavista..com, sanookcom, sanook..com com เป*นต์�นเป*นต์�น

ภาษามาต์รู้ฐานท์��ใช่�ในกี่ารู้ภาษามาต์รู้ฐานท์��ใช่�ในกี่ารู้สรู้�างเว�บเพื้จสรู้�างเว�บเพื้จ

HTMLHTML ( (Hypertext Markup LanguageHypertext Markup Language ) ) คอ ภาษาคอ ภาษามาต์รู้ฐานท์��ใช่�ในกี่ารู้สรู้�างเว�บเพื้จ เพื้�อน#าไปแสดูงผลในมาต์รู้ฐานท์��ใช่�ในกี่ารู้สรู้�างเว�บเพื้จ เพื้�อน#าไปแสดูงผลในโปรู้แกี่รู้ม โปรู้แกี่รู้ม Web browser Web browser เอกี่สารู้เว�บเพื้จจะม�นามสกี่0ลเอกี่สารู้เว�บเพื้จจะม�นามสกี่0ลเป*น เป*น ..htm htm หรู้อ หรู้อ ..html html 

ต์�วอย�างต์�วอย�าง code code ภาษา ภาษา HTML HTML เพื้�อสรู้�างหน�าเว�บเพื้จเพื้�อสรู้�างหน�าเว�บเพื้จ <html><html>

<head> <head> <title> <title>กี่ารู้เรู้,�มต์�นสรู้�างเว�บเพื้จกี่ารู้เรู้,�มต์�นสรู้�างเว�บเพื้จ</title></title>

</head></head> <body><body>

ต์�วอย�างกี่ารู้สรู้�างเว�บเพื้จดู�วย ต์�วอย�างกี่ารู้สรู้�างเว�บเพื้จดู�วย HTML HTML <<//body>body>

<<//html>html>

รู้�ปแบบข้องเว�บไซต์�รู้�ปแบบข้องเว�บไซต์�แบ�งไดู�เป*น แบ�งไดู�เป*น 22 รู้�ปแบบหล�กี่ๆ คอรู้�ปแบบหล�กี่ๆ คอ 1. Static Website1. Static Website 2. 2. DynamicDynamic Website Website

รู้�ปแบบข้องเว�บไซต์�รู้�ปแบบข้องเว�บไซต์�11 . . Static WebsiteStatic Website หมายถ/ง เว�บไซต์�ท์��สรู้�างดู�วยภาษา HTML ธรู้รู้มดูา และบ�นท์/กี่เป*นไฟล�นามสกี่0ล .html    เนอหาข้�อความ รู้�ปภาพื้ในหน�าเว�บเพื้จน�นจะเป*นไปต์ามท์��เรู้าเข้�ยนกี่#าหนดูไว� Static Website เหมาะกี่�บเว�บไซต์�ท์��ม�ข้นาดูไม�ใหญ่� จ#านวนหน�าเว�บเพื้จไม�มากี่ ไม�ม�กี่ารู้เปล��ยนแปลงข้�อม�ลบ�อยๆ  และไม�ม�กี่ารู้ต์,ดูต์�อฐานข้�อม�ล

2. Dynamic Website 2. Dynamic Website หมายถ/ง เว�บไซต์�ท์��หน�าเว�บเพื้จสามารู้ถเปล��ยนแปลงข้�อม�ลเองไดู� โดูยไม�ต์�องเข้�ยนแต์�ละหน�าเว�บเพื้จเอง  เช่�น กี่รู้ะดูานข้�าว (Webboard), รู้ะบบสบค�นข้�อม�ล เว�บไซต์�รู้�ปแบบน�จะถ�กี่สรู้�างดู�วยภาษา Script แบบ Server Side Script เช่�น PHP, ASP, ASP.Net, JSP และอ�นๆ  ไฟล�เอกี่สารู้ท์��ไดู�จะม�นามสกี่0ล .php, .asp เป*นต์�น และม�กี่จะม�กี่ารู้ต์,ดูต์�อกี่�บฐานข้�อม�ลเพื้�อบ�นท์/กี่ข้�อม�ลลงในฐานข้�อม�ล หรู้อน#าข้�อม�ลจากี่ฐานข้�อม�ลข้/นมาแสดูงผลเป*นหน�าเว�บเพื้จ

ส�วนปรู้ะกี่อบข้องหน�าส�วนปรู้ะกี่อบข้องหน�าเว�บเพื้จเว�บเพื้จ

แบ�งเป*น แบ�งเป*น 3 3 ส�วนส�วน ส�วนห�วข้องหน�า ส�วนห�วข้องหน�า (Page Header)(Page Header) ส�วนข้องเนอหา ส�วนข้องเนอหา (Page Body)(Page Body) ส�วนท์�ายกี่รู้ะดูาษ ส�วนท์�ายกี่รู้ะดูาษ (Page Footer)(Page Footer)

11 . . ส�วนห�ว ส�วนห�ว ((Page HeaderPage Header  ) ) จะอย��บรู้,เวณบนส0ดูข้องหน�าจะอย��บรู้,เวณบนส0ดูข้องหน�าเว�บเพื้จ เป*นส�วนท์��แสดูงช่�อ เว�บเพื้จ เป*นส�วนท์��แสดูงช่�อ

เว�บไซต์� โลโกี่� แบนเนอรู้�โฆษณาล,งกี่�ส#าหรู้�บข้�ามไปย�งหน�าเว�บเว�บไซต์� โลโกี่� แบนเนอรู้�โฆษณาล,งกี่�ส#าหรู้�บข้�ามไปย�งหน�าเว�บอ�นอ�น

22 . . ส�วนเนอหา ส�วนเนอหา ((Page BodyPage Body))   จะอย$บร�เวณตอนกลางข่องหน#าเว&บเพิจ จะอย$บร�เวณตอนกลางข่องหน#าเว&บเพิจ ซึ่-�งเป็(นสุวนที่��แสุดงเน�3อหาภายในหน#าเว&บเพิจน/3น โดยป็ระกอบด#วยข่#อคืวาม ซึ่-�งเป็(นสุวนที่��แสุดงเน�3อหาภายในหน#าเว&บเพิจน/3น โดยป็ระกอบด#วยข่#อคืวาม ข่#อม$ล ภาพิเคืล��อนไหว เป็(นต#น ข่#อม$ล ภาพิเคืล��อนไหว เป็(นต#น

33 . . ส�วนท์�าย ส�วนท์�าย ((Page FooterPage Footer))    จะอย��บรู้,เวณดู�านจะอย��บรู้,เวณดู�านล�างส0ดูข้องหน�าเว�บเพื้จ ส�วนมากี่ใช่�ส#าหรู้�บล,งกี่�ล�างส0ดูข้องหน�าเว�บเพื้จ ส�วนมากี่ใช่�ส#าหรู้�บล,งกี่�ข้�อความส�น ๆ เข้�าใจง�าย หรู้อจะม�ช่�อเจ�าข้อง ข้�อความส�น ๆ เข้�าใจง�าย หรู้อจะม�ช่�อเจ�าข้อง เว�บไซต์� อ�เมลแอดูเดูรู้สข้องผ��ดู�แลเว�บไซต์�ส#าหรู้�บเว�บไซต์� อ�เมลแอดูเดูรู้สข้องผ��ดู�แลเว�บไซต์�ส#าหรู้�บต์,ดูต์�อกี่�บท์างเว�บไซต์�ต์,ดูต์�อกี่�บท์างเว�บไซต์�

ข้�นต์อนกี่ารู้พื้�ฒนาเว�บไซต์�ข้�นต์อนกี่ารู้พื้�ฒนาเว�บไซต์� 1. 1. วางแผนกี่ารู้พื้�ฒนาเว�บเพื้จ วางแผนกี่ารู้พื้�ฒนาเว�บเพื้จ

กี่ารู้กี่#าหนดูรู้�ปแบบโครู้งสรู้�างกี่ารู้กี่#าหนดูรู้�ปแบบโครู้งสรู้�าง ออกี่แบบหน�าเว�บแต์�ละหน�าออกี่แบบหน�าเว�บแต์�ละหน�า

2. 2. กี่#าหนดูไดูเรู้�กี่ท์รู้อรู้�� หรู้อโฟลเดูอรู้� กี่#าหนดูไดูเรู้�กี่ท์รู้อรู้�� หรู้อโฟลเดูอรู้� (Directory/Folder) (Directory/Folder) ท์��ใช่�เกี่�บเอกี่สารู้ท์��ใช่�เกี่�บเอกี่สารู้เว�บ เว�บ 3. 3. สรู้�างภาพื้หรู้อจ�ดูหาภาพื้ท์��เกี่��ยวข้�องกี่�บเนอหาแล�วจ�ดูเกี่�บไว�ในไดูเรู้�กี่ท์รู้อรู้��ต์ามสรู้�างภาพื้หรู้อจ�ดูหาภาพื้ท์��เกี่��ยวข้�องกี่�บเนอหาแล�วจ�ดูเกี่�บไว�ในไดูเรู้�กี่ท์รู้อรู้��ต์ามข้�อ ข้�อ 2. 2.

4. 4. สรู้�างเอกี่สารู้เว�บ โดูยกี่#าหนดูช่�อไฟล�เอกี่สารู้เว�บ ต์ามข้�อกี่#าหนดูข้องผ��ดู�แลสรู้�างเอกี่สารู้เว�บ โดูยกี่#าหนดูช่�อไฟล�เอกี่สารู้เว�บ ต์ามข้�อกี่#าหนดูข้องผ��ดู�แลรู้ะบบเครู้อข้�าย รู้ะบบเครู้อข้�าย (Web System Administrator) (Web System Administrator) และจ�ดูเกี่�บไว�ในไดูเรู้�กี่และจ�ดูเกี่�บไว�ในไดูเรู้�กี่ท์รู้อรู้��ต์ามข้�อท์รู้อรู้��ต์ามข้�อ 5. 5. ต์รู้วจสอบผลเอกี่สารู้เว�บผ�านเบรู้าเซอรู้� ต์รู้วจสอบผลเอกี่สารู้เว�บผ�านเบรู้าเซอรู้� 6. 6. ส�งข้�อม�ลข้/นเครู้�องแม�ข้�าย ส�งข้�อม�ลข้/นเครู้�องแม�ข้�าย (Server) (Server) และท์#ากี่ารู้ต์รู้วจสอบผลกี่ารู้เรู้�ยกี่ดู�จากี่และท์#ากี่ารู้ต์รู้วจสอบผลกี่ารู้เรู้�ยกี่ดู�จากี่เครู้�องแม�ข้�ายเครู้�องแม�ข้�าย

กี่ารู้วางแผนพื้�ฒนาเว�บเพื้จกี่ารู้วางแผนพื้�ฒนาเว�บเพื้จ

กี่ารู้วางแผนพื้�ฒนาเว�บเพื้จ กี่ารู้วางแผนพื้�ฒนาเว�บเพื้จ ((ต์�อต์�อ))

ออกแบบโดยใชื่#สุ�สุดใสุมาเร�ยงก/นที่0าให#เว&บไซึ่ต�ด$สุะด�ดตา หล/งจากน/3นผู้$#ที่��เข่#ามาชื่มก&จะเร��มด$เมน$สุวนอ��นๆข่องเว&บไซึ่ต�

ออกแบบโดยสุร#างเมน$เป็(นร$ป็อย$แถูบซึ่#ายม�อ แล#วใชื่# frame เร�ยกข่#อม$ลมาแสุดงบร�เวณตรงกลาง

http://www.prapayneethai.com/th/culture/

http://thai.tourismthailand.org/

http://women.sanook.com/health/

แหล�งอ�างอ,งแหล�งอ�างอ,ง• http://www.art2bdesign.com

• http://ccccccc ccc.bodin.ac.th/

• http://www.krirk.ac.th/