86
คคคคคคคคคคคคคคคค คคคคคคคคคคคคค คคคคคคคคค

ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Embed Size (px)

DESCRIPTION

ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี. Outline. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต HTML วิธีสร้างเว็บไซต์ ขนาดหน้าของเว็บเพจ พื้นที่ของเว็บเพจ ส่วนประกอบของเว็บ ขั้นตอนในการพัฒนาเว็บไซต์ ข้อแนะนำในการทำเว็บไซต์ ประเภทของเว็บไซต์. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต. - PowerPoint PPT Presentation

Citation preview

Page 1: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นเกี่��ยวกี่�บื้เว�บื้เทคโนโลย�

Page 2: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Outline• ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้• HTML• ว�ธี�สรู้�างเว�บื้ไซต้�• ขนาดหน�าของเว�บื้เพจ• พ�นท��ของเว�บื้เพจ• ส&วนปรู้ะกี่อบื้ของเว�บื้• ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• ปรู้ะเภทของเว�บื้ไซต้�

Page 3: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• เว�บื้เทคโนโลย� (Web Technology) –คื�อ บริ�การิหนึ่� งในึ่ริ�ปแบบต่�างๆของการิให�

บริ�การิของอ�นึ่เต่อริ�เนึ่�ต่ สำ�าหริ�บผู้��พั�ฒนึ่าเว็�บ หริ�อผู้��ที่# ต่�องการิเข#ยนึ่โปริแกริมเพั� อต่�ดต่�อสำ� อสำาริผู้�านึ่เว็�บ หริ�อ อ�นึ่เต่อริ�เนึ่�ต่ แล้�ว็จะต่�องริ� �แล้ะเข�าใจเริ� องเก# ยว็ก�บโปรู้โต้คอล (Protocol)

Page 4: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• โปริโต่คือล้ คื�อ ข�อต่กล้งริะหว็�าง 2 ฝ่,ายที่# ให�เคืริ� องคือมพั�ว็เต่อริ� สำามาริถสำ� อสำาริก�นึ่ได�อย�างถ�กต่�อง แล้ะริาบริ� นึ่มากที่# สำ/ด

• การิใช้�บริ�การิเว็�บจะที่�างานึ่ภายใต่� โปรู้โต้คอล HTTP

• โดยโปริโต่คือล้จะเป2นึ่ต่�ว็ก�าหนึ่ดว็�ธี#การิสำ�งข�อม�ล้หริ�อไฟล้� ริะหว็�างเคืริ� องคือมพั�ว็เต่อริ�ที่# เป2นึ่ Client แล้ะ Server ริว็มถ�งการิก�าหนึ่ด กฎริะเบ#ยบในึ่การิต่�ดต่�อ โปริแกริมปริะเภที่ Browser เป2นึ่ต่�ว็ช้�ว็ยในึ่การิต่�ดต่�อสำ� อสำาริได�ง�ายข�6นึ่

Page 5: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• อ�นเทอรู้�เน�ต้ หมายถ�ง ล้�กษณะของการิเช้� อมต่�อของเคืริ�อข�ายคือมพั�ว็เต่อริ�ที่�6งเล้�กแล้ะใหญ่�จ�านึ่ว็นึ่มากเข�าด�ว็ยก�นึ่ โดยม#ข�อก�าหนึ่ดว็�าที่/กเคืริ�อข�ายที่# เช้� อมต่�อถ�งก�นึ่ จะต่�องอย��ภายใต่�มาต่ริฐานึ่ของการิเช้� อมต่�อ(โปรู้โต้คอล) ที่# ถ�กสำริ�างข�6นึ่มาเพั� อใช้�งานึ่บนึ่เคืริ�อข�ายแบบนึ่#6โดยเฉพัาะ ซึ่� งเริ#ยกว็�า TCP/IP

Page 6: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

Page 7: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• จากมาต่ริฐานึ่การิเช้� อมต่�อก�นึ่นึ่#6เอง จ�งม#ผู้ล้ที่�าให�เคืริ�อข�ายคือมพั�ว็เต่อริ�สำามาริถต่�ดต่�อสำ� อสำาริแล้กเปล้# ยนึ่ข�อม�ล้ริะหว็�างก�นึ่ได�อย�างริว็ดเริ�ว็ม#ปริะสำ�ที่ธี�ภาพั แล้ะไม�ม#ข#ดจ�าก�ดที่างด�านึ่เว็ล้าแล้ะสำถานึ่ที่#

Page 8: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• โปรู้โต้คอล HTTP (Hypertext Transfer Protocol)– เป2นึ่โปริโต่คือล้ที่# ใช้�ในึ่การิกริะจายแล้ะที่�างานึ่

ริ�ว็มก�นึ่ของข�อม�ล้ที่# ในึ่อย��ในึ่ริ�ปสำ� อที่# สำามาริถเช้� อมโยงถ�งก�นึ่ได� เนึ่� องจากโปริโต่คือล้ HTTP สำามาริถที่# จะใช้�ในึ่การิริ�บสำ�งข�อม�ล้ที่# เป2นึ่ข�อคืว็าม ริ�ป ภาพั หริ�อภาพัเคืล้� อนึ่ไหว็ได� จ�งที่�าให�แหล้�งข�อม�ล้สำ�ว็นึ่ใหญ่�ในึ่ WWW อนึ่/ญ่าต่ให�เข�าถ�งได�โดยผู้�านึ่โปริโต่คือล้ HTTP

Page 9: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• WWW (World Wide Web) อาจเริ#ยกสำ�6นึ่ๆ ว็�า เว�บื้ เปริ#ยบเสำม�อนึ่เป2นึ่ห�องสำม/ดขนึ่าดใหญ่�ที่# ริว็บริว็มข�อม�ล้ที่# มากที่# สำ/ดในึ่โล้กก�ว็�าได� สำามาริถคื�นึ่หาข�อม�ล้ที่# ต่�องการิได�เก�อบที่/กอย�างจากบริ�การิเว็�บ

Page 10: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• ข�อม�ลในเว�บื้จะอย��ในึ่ริ�ปแบบที่# เริ#ยกว็�า Hypertext แล้ะที่�ากี่ารู้เช้�อมโยง (Links) ข�อคืว็ามหริ�อ ริ�ปภาพั เข�าก�บเอกสำาริอ� นึ่ๆ อย�างเป2นึ่อ�สำริะต่�อก�นึ่

Page 11: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• ภาพัหริ�อข�อคืว็ามที่# แสำดงบนึ่หนึ่�าจอจะแสำดงได�ที่#ล้ะหนึ่�า ซึ่� งเริ#ยกว็�า เพจ (Page) หริ�ออาจม#การิเช้� อมโยงด�ว็ยการิล้�งคื� (Links) เพั� อคื�นึ่หาข�อม�ล้จากอ#กเพัจหนึ่� งที่# อย��ห�างออกไปไกล้ๆได�

Page 12: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• เว�บื้ไซต้� เว็�บเปริ#ยบเหม�อนึ่เป2นึ่ห�องสำม/ดขนึ่าดใหญ่� เว็�บไซึ่ต่�

จะเปริ#ยบเสำม�อนึ่หนึ่�งสำ�อหนึ่� งเล้�มในึ่ห�องสำม/ดนึ่�6นึ่ สำามาริถเล้�อกหย�บหนึ่�งสำ�อเล้�มใดก�ได�ในึ่ห�องสำม/ดเว็�บข�6นึ่มาอ�านึ่• โดยริะบ/ช้� อหนึ่�งสำ�อในึ่ล้�กษณะที่# เริ#ยกว็�า

URL(อ&านว&า ย� อารู้� แอล) • เช้�นึ่ เว็�บไซึ่ต่�ของมหาว็�ที่ยาล้�ยริาช้ภ�ฏเช้#ยงริายม#

URL หริ�อม#ช้� อเป2นึ่www.cru.in.th เป2นึ่ต่�นึ่

Page 13: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• เว�บื้เพจ (Web Page) และโฮมเพจ (Home Page)

• ถ�าเว็�บไซึ่ต่� คื�อ หนึ่�งสำ�อหนึ่� งเล้�ม เว็�บเพัจก�คื�อ หนึ่�ากริะดาษต่�างๆ ที่# บริริจ/เนึ่�6อหาในึ่หนึ่�งสำ�อเล้�มนึ่�6นึ่สำ�ว็นึ่

• โฮมเพัจ คื�อ ปกหนึ่�าของหนึ่�งสำ�อ ปกต่�แล้�ว็เม� อเริ� มเป?ดโปริแกริม Web Browser โปริแกริมจะนึ่�าเข�าสำ��หนึ่�าแริกของเว็�บใดเว็�บหนึ่� งให�โดยอ�ต่โนึ่ม�ต่�

• หนึ่�าแริกนึ่�6นึ่จะถ�อว็�าเป2นึ่โฮมเพัจด�ว็ยเช้�นึ่เด#ยว็ก�นึ่ สำามาริถเปล้# ยนึ่โฮมเพัจของโปริแกริม Web Browser ที่# ใช้�อย��นึ่#6ให�ไปย�งเว็�บไซึ่ต่�ใดก�อนึ่ก�ได�

Page 14: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้• เว�บื้เพจ (Web Page) และโฮมเพจ

(Home Page)

Page 15: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• โปรู้แกี่รู้มเว�บื้บื้รู้าวเซอรู้� (Web Browser) การิแสำดงผู้ล้ข�อม�ล้ต่�างๆ บนึ่อ�นึ่เที่อริ�เนึ่�ต่ในึ่ริ�ปของ HTML ไม�สำามาริถที่# จะแสำดงผู้ล้ข�อม�ล้ออกมาโดยต่ริงได� จะต่�องใช้�โปริแกริมเว็�บบริาว็เซึ่อริ�เป2นึ่ต่�ว็กล้างที่# จะที่�าหนึ่�าที่# แปล้งคื�าสำ� งก�อนึ่แล้�ว็แสำดงผู้ล้คื�าสำ� งให�ออกมาเป2นึ่ริ�ปภาพั เสำ#ยง แล้ะข�อม�ล้ต่�างๆ

• บริาว็เซึ่อริ�ที่# ผู้��ใช้�นึ่�ยมใช้�ก�นึ่ก�จะม#โปริแกริม Internet Explorer แล้ะ Netscape Navigator

Page 16: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้• โปรู้แกี่รู้มเว�บื้บื้รู้าวเซอรู้� (Web Browser)

Page 17: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• DNS-Domain Name System คื�อ ริะบบการิต่�6งช้� อบนึ่อ�นึ่เที่อริ�เนึ่�ต่ ที่ริ�พัยากริบนึ่อ�นึ่เที่อริ�เนึ่�ต่

• โดยเฉพัาะเคืริ� องคือมพั�ว็เต่อริ�ที่# ต่�ออย��นึ่� 6นึ่ต่�องม#หมายเล้ขปริะจ�าเคืริ� อง ซึ่� งหมายเล้ขนึ่#6เริ#ยกว็�า IP โดยการิที่# จะจดจ�าหมายเล้ขปริะจ�าเคืริ� องนึ่�6นึ่ที่�าได�ยาก จ�งม#ว็�ธี#การิต่�6งช้� อให�จดจ�าแล้ะใช้�งานึ่ง�าย ริะบบช้� อจ�งถ�กก�าหนึ่ดให�เป2นึ่มาต่ริฐานึ่

• โดยแบ�งต่ามล้�าด�บข�6นึ่ต่ามสำภาพัภ�ม�ศาสำต่ริ� เป2นึ่ปริะเที่ศ ปริะเภที่ขององคื�กริ แล้ะช้� อองคื�กริ

• เช้�นึ่ www.cru.in.th th คื�อ ช้� อปริะเที่ศไที่ย in คื�อ ปริะเภที่องคื�กริ cru คื�อ ช้� อองคื�กริ

Page 18: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• Domain ท��น�ยมใช้�กี่�นอย�&ในป/จจ0บื้�น เช้�นึ่– .com = กล้/�มธี/ริก�จการิคื�า (Commercial)– .edu = กล้/�มการิศ�กษา (Education)– .gov = กล้/�มองคื�กริริ�ฐบาล้

(Government)

Page 19: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• ความหมายของ Sub Domain เช้�นึ่– .co = องคื�การิธี/ริก�จ (Commercial)– .ac = สำถาบ�นึ่การิศ�กษา (Academic)– .go = หนึ่�ว็ยงานึ่ริ�ฐบาล้ (Government)– .or = องคื�กริอ� นึ่ ๆ (Organizations)

Page 20: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ความรู้��เบื้�องต้�นกี่ารู้ใช้�งานอ�นเทอรู้�เน�ต้

• Domain Name ช้�อย&อของปรู้ะเทศ เช้&น– .th = Thailand – .hk = Hong Kong– .jp = Japan – .sg = Singapore

Page 21: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

HTML• HTML ย�อมาจาก Hyper Text Markup

Language เป2นึ่ภาษาที่# ใช้�ในึ่การิพั�ฒนึ่าเว็�บเพัจเพั� อให�โปรู้แกี่รู้มเว�บื้บื้รู้าวเซอรู้� (Web Browser) ต่�างๆ สำามาริถแปล้งคื�าสำ� งแล้ะแสำดงผู้ล้เป2นึ่ริ�ปภาพั เสำ#ยง หริ�อข�อม�ล้ได�

• ม#โปริแกริมเว็�บบริาว็เซึ่อริ�มากกว็�า 10 โปริแกริมที่# สำามาริถอ�านึ่หริ�อเข�าใจในึ่ภาษา HTML ซึ่� งเป2นึ่ข�อคืว็าม Text ก�บริห�สำที่# อย��ในึ่เคืริ� องหมาย < > แล้ะม#นึ่ามสำก/ล้เป2นึ่ .html โดยเม� อเริาเป?ดโปริแกริมเว็�บบริาว็เซึ่อริ� เริาจะไม�สำามาริถพับริห�สำเหล้�านึ่#6ได�เล้ยบนึ่จอภาพั แต่�ริห�สำเหล้�านึ่#6จะเป2นึ่คื�าสำ� งที่# บอกโปริแกริมเว็�บบริาว็เซึ่อริ�ของเริาว็�า ริ�ปแบบของข�อคืว็ามเป2นึ่อย�างไริ ริว็มไปถ�งการิสำริ�างจ/ดเช้� อมโยงหริ�อล้�งคื� (Link) ที่# เช้� อมโยงต่�อไปย�งเว็�บเพัจอ� นึ่ๆ

Page 22: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

HTML

• สำ�าหริ�บการิสำริ�างไฟล้� HTML จะต่�องอาศ�ยโปริแกริมที่# ม#คื/ณสำมบ�ต่�เป2นึ่ Text Editor โดยเริาจะใช้�โปริแกริมเหล้�านึ่#6สำ�าหริ�บเข#ยนึ่คื�าสำ� งต่�างๆ หริ�อริายล้ะเอ#ยดของข�อม�ล้ที่# ต่�องการิให�แสำดงผู้ล้บนึ่จอภาพั แล้ะเก�บเป2นึ่ไฟล้�โดยจะต่�องม#นึ่ามสำก/ล้เป2นึ่ .html จากนึ่�6นึ่ก�ที่ดสำอบไฟล้�ในึ่โปริแกริมเว็�บบริาว็เซึ่อริ�ต่�อไป แต่�ในึ่ปAจจ/บ�นึ่ได�ม#การิพั�ฒนึ่าโปริแกริมที่# ผู้��ใช้�งานึ่ไม�ต่�องเข#ยนึ่คื�าสำ� งเองก�สำามาริถที่# จะสำริ�างเว็�บเพัจอย�างง�ายๆ ได�เล้ย

• เช้�นึ่ Microsoft Frontpage Netscape Composer Macromedia Dreamweaver Adobe Golive

Page 23: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

HTML

• เอกสำาริ HTML เป2นึ่เอกสำาริที่# ปริะกอบไปด�ว็ยข�อม�ล้ที่# เริาต่�องการิเผู้ยแพัริ�ผู้�านึ่ WWW แล้ะ ภาษา HTML ที่# ใช้�ก�าหนึ่ดการิแสำดงผู้ล้ของข�อม�ล้ด�งกล้�าว็

• ภาษา HTML เป2นึ่ภาษาที่# อย�ในึ่ริ�ปของ แที่Bก (Tag) ที่# ใช้�ห�อห/�มข�อม�ล้ที่# เริาต่�องการิเผู้ยแพัริ�ผู้�านึ่ WWW ซึ่� งการิแสำดงผู้ล้ของเอกสำาริ HTML เริาสำามาริถที่# จะด�ได�โดยใช้�โปริแกริมที่# เริ#ยกว็�า เว็�บ บริาว็เซึ่อริ� (Web Browser)

Page 24: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

HTML

• โคืริงสำริ�างของภาษา HTML จะปริะกอบไปด�ว็ย 3 สำ�ว็นึ่ ด�งนึ่#6–สำ�ว็นึ่ที่# ใช้�บอกจดเริ� มต่�นึ่แล้ะจ/ดสำ�6นึ่สำ/ดของ

เอกสำาริ คื�อ แที่Bก <html></html> –สำ�ว็นึ่ห�ว็ของเอกสำาริ HTML คื�อ แที่Bก

<head></head> ซึ่� งเริาจะแสำดงห�ว็เริ� องของ เอกสำาริ HTML ไว็�ในึ่สำ�ว็นึ่นึ่#6–สำ�ว็นึ่ที่# ใช้�บอกจดเริ� มต่�นึ่แล้ะจ/ดสำ�6นึ่สำ/ดของเนึ่�6อหา

คื�อ แที่Bก <body></body>

Page 25: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

HTML

Page 26: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ว�ธี�สรู้�างเว�บื้ไซต้�• สำริ�างเว็�บไซึ่ต่�ด�ว็ย Web Hosting• สำริ�างเว็�บไซึ่ต่�ด�ว็ยโปริแกริมกริาฟฟ?ก• สำริ�างเว็�บไซึ่ต่�ด�ว็ยภาษา HTML แล้ะ JavaScript

Page 27: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ขนาดหน�าของเว�บื้เพจ• ขนึ่าดหนึ่�าของเว็�บเพัจที่# นึ่�ยมใช้�ในึ่ปAจจ/บ�นึ่ม# 2

ขนึ่าด คื�อ–ขนึ่าด 800X600 pixels จะสำามาริถแสำดง

หนึ่�าเว็�บได�คืริบถ�ว็นึ่ก�บหนึ่�าจอที่# ม#ขนึ่าด 15 นึ่�6ว็ข�6นึ่ไป–ขนึ่าด 1024X768 pixels เป2นึ่ขนึ่าดของ

หนึ่�าเว็�บเพัจที่# นึ่�ยมมากที่# สำ/ดในึ่ปAจจ/บ�นึ่ เพัริาะสำามาริถแสำดงข�อม�ล้ของเว็�บได�มากข�6นึ่แล้ะง�ายต่�อการิออกแบบด�ว็ย

Page 28: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

พ�นท��ของเว�บื้เพจ• การิจ�ดสำริริพั�6นึ่ที่# ของเว็�บเพัจสำามาริถที่�าได�หล้ายริ�ป

แบบ แต่�ที่# นึ่�ยมใช้�ก�นึ่จริ�งๆจะม#อย�� 3 แบบ คื�อ–การิแบ�งแบบอ�สำริะ–การิแบ�ง 2 สำ�ว็นึ่–การิแบ�ง 3 สำ�ว็นึ่

Page 29: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ส&วนปรู้ะกี่อบื้ของเว�บื้

Page 30: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ส&วนปรู้ะกี่อบื้ของเว�บื้

• โลโกี่� (Logo)

Page 31: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ส&วนปรู้ะกี่อบื้ของเว�บื้• ส&วนห�วของเว�บื้เพจ (Page Header)

Page 32: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ส&วนปรู้ะกี่อบื้ของเว�บื้• เมน�หล�กี่ (Link Menu)

Page 33: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ส&วนปรู้ะกี่อบื้ของเว�บื้• ส&วนท��ใช้�แสดงเน�อหาของเว�บื้ (Page Body)

Page 34: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ส&วนปรู้ะกี่อบื้ของเว�บื้• ส&วนล&างส0ดของเว�บื้ไซต้� (Page Footer)

Page 35: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ส&วนปรู้ะกี่อบื้ของเว�บื้• ช้&องทางกี่ารู้โฆษณาของเว�บื้ไซต้� (Banner)

Page 36: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�

Page 37: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• เต้รู้�ยมเน�อหาท��จะน+าเสนอ –ก�อนึ่อ� นึ่ต่�องม#เปCาหมายก�อนึ่ว็�าจะที่�าเว็�บไซึ่ต่�

เก# ยว็ก�บเริ� องอะไริแล้ะเนึ่�6อหาต่�างๆ ม#อะไริบ�าง แล้�ว็จ�ดเต่ริ#ยมสำ� งต่�างๆ ซึ่� งหมายถ�ง ข�อคืว็าม, ภาพัปริะกอบ, เสำ#ยง แล้ะอ� นึ่ ๆ

Page 38: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• ออกี่แบื้บื้หน�าต้าของเว�บื้ไซต้� –ว็�าต่�องการิให�ม#ล้�กษณะเป2นึ่อย�างไริ เช้�นึ่ จะม#

การิแบ�งเฟริมหริ�อไม� สำ# ของ Background แล้ะต่�ว็อ�กษริเป2นึ่สำ#อะไริ จะจ�ดว็างอะไริไว็�ต่ริงสำ�ว็นึ่ไหนึ่ จะม# Link ที่# ใดบ�างแล้ะแต่�ล้ะ Link เช้� อมโยงไปหาสำ�ว็นึ่ใด เป2นึ่ต่�นึ่

Page 39: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• ออกี่แบื้บื้หน�าต้าของเว�บื้ไซต้�

Page 40: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• ออกี่แบื้บื้หน�าต้าของเว�บื้ไซต้�

Page 41: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• ออกี่แบื้บื้หน�าต้าของเว�บื้ไซต้�

Page 42: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• เข�ยนและทดสอบื้ –ล้งม�อเข#ยนึ่โดยใช้�โปริแกริมสำ�าหริ�บเข#ยนึ่เว็�บไซึ่ต่�

แล้�ว็ที่�าการิที่ดสำอบการิแสำดงผู้ล้แล้ะ Link ต่�างๆ ว็�าเช้� อมโยงได�ถ�กต่�องหริ�อไม� ในึ่ข�6นึ่ต่อนึ่นึ่#6ถ�าม#ปริ�มาณข�อม�ล้มากแล้ะม#การิเช้� อมโยงที่# ซึ่�บซึ่�อนึ่ก�จะใช้�เว็ล้าคื�อนึ่ข�างมากเพัริาะต่�องคือยปริ�บแก�อย��เริ� อย ๆ

Page 43: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• ลงทะเบื้�ยนช้�อเว�บื้ไซต้�และจ�ดหาพ�นท��เกี่�บื้ข�อม�ล • น+าเว�บื้ไซต้�ท��สรู้�างข5�น Upload ข5�น Server

และต้รู้วจสอบื้ความเรู้�ยบื้รู้�อย –คื�อ การิคื�ดล้อกข�อม�ล้ จากเคืริ� องของเริาไป

เก�บไว็�ในึ่เคืริ� อง Server ซึ่� งการิคื�ดล้อกนึ่#6เริ#ยกว็�า Upload โดยใช้�โปริแกริมสำ�าหริ�บการิUpload – เช้�นึ่ โปริแกริม WinSCP, CuteFtp,

WS_FTP (โปริแกริม Dreamweaver ม#คืว็ามสำามาริถนึ่#6อย��แล้�ว็)

Page 44: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�• ปรู้ะกี่าศให�โลกี่รู้�บื้รู้�� – เม� อต่ริว็จสำอบคืว็ามเริ#ยบริ�อยแล้�ว็ ก�ถ�งคืริาว็ที่#

จะช้�กช้ว็นึ่ให�ผู้��คืนึ่มาช้มเว็�บไซึ่ต่� โดยปริะช้าสำ�มพั�นึ่ธี�ผู้�านึ่ที่างสำ� อต่�างๆ เช้�นึ่ แล้ก Link ก�บเว็�บไซึ่ต่�อ� นึ่ๆ ฝ่ากข�อคืว็ามช้�กช้ว็นึ่ไว็�ต่ามกริะดานึ่ข�าว็ต่�างๆ หริ�อจะเพั� มช้� อเว็�บไซึ่ต่�ให�ก�บแหล้�งริว็มข�อม�ล้บนึ่อ�นึ่เที่อริ�เนึ่�ต่อย�าง yahoo หริ�อ google

Page 45: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�

Page 46: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• กี่ารู้เลอกี่เน�อหาเว�บื้ไซต้� –ถ�อเป2นึ่สำ�ว็นึ่สำ�าคื�ญ่ในึ่การิเริ� มต่�นึ่ที่�าเว็�บไซึ่ต่� ที่�6ง

การิจ�ดโคืริงสำริ�าง แล้ะ คืว็ามนึ่�ยมของเว็�บไซึ่ต่� สำ�าหริ�บผู้��เริ� มต่�นึ่ ซึ่� งไม�แนึ่�ใจว็�าจะเล้�อกห�ว็ข�อใด –คืว็ริเริ� มต่�นึ่จาก การิสำ�าริว็จต่�ว็เองว็�า ช้อบ หริ�อ

สำนึ่ใจสำ� งใด มากที่# สำ/ด หริ�อ ม#คืว็ามริ� �เช้# ยว็ช้าญ่ด�านึ่ใดมากที่# สำ/ด

Page 47: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• โครู้งสรู้�างของเว�บื้ไซต้� –ม#จ/ดม/�งหมายสำ�าคื�ญ่ คื�อ การิที่# จะที่�าให� ผู้��เข�า

เย# ยมช้ม สำามาริถคื�นึ่หาข�อม�ล้ ในึ่เว็�บไซึ่ต่�ได�อย�างเป2นึ่ริะบบ ปริะการิแริกต่�องพั�จาริณาถ�ง คืว็ามเป2นึ่ไปได�ของปริะเภที่ของผู้��เข�าเย# ยมช้มเพัริาะผู้��เย# ยมช้มแต่�ล้ะปริะเภที่ ก�จะคื�นึ่หาข�อม�ล้ที่# แต่กต่�างก�นึ่ –ด�งนึ่�6นึ่สำ� งที่# คืว็ริจะที่�าก�คื�อการิจ�ดกล้/�มของข�อม�ล้

โดยให�ริว็มห�ว็ข�อย�อยต่�างๆ ให�อย��ในึ่ห�ว็ข�อหล้�ก โดยม#จ/ดม/�งหมายให� จ+านวนข�อหล�กี่น�อย ท��ส0ด นึ่อกจากนึ่#6การิจ�ดไฟล้�แล้ะไดเริ�กที่อริ# ก�จะช้�ว็ยให�การิด�แล้ริ�กษาแล้ะการิต่ริว็จสำอบคืว็ามผู้�ดพัล้าดของเว็�บไซึ่ต่�ง�ายย� งข�6นึ่

Page 48: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• โครู้งสรู้�างของเว�บื้ไซต้� – เช้�นึ่ การิจ�ดไฟล้�ริ�ปภาพัไว็�ที่# เด#ยว็ก�นึ่ หริ�อ จ�ด

เว็�บไซึ่ต่�ที่# เป2นึ่เริ� องเด#ยว็ก�นึ่ไว็�ในึ่ไดเริ�กที่อริ# เด#ยว็ก�นึ่ เป2นึ่ต่�นึ่

Page 49: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• โครู้งสรู้�างของเว�บื้ไซต้�

Page 50: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• สามารู้ถด�เว�บื้ไซต้�ได�ในหลายบื้รู้าวเซอรู้� –การิที่�าเว็�บไซึ่ต่�คืว็ริจะที่�าเพั� อให�สำามาริถด�ได�จาก

ที่/กๆ Version ของ Software ต่�างๆ ไม�ว็�าจะเป2นึ่ Netscape, Communicator, Internet Explorer หริ�อ อ� นึ่ๆ การิที่�าให�ที่/กคืนึ่ด�ได�นึ่#6 ถ�อว็�าเป2นึ่การิขยายฐานึ่ของผู้��เข�าเย# ยมช้ม

Page 51: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• ความเรู้�วในกี่ารู้โหลดเว�บื้ไซต้� –สำ�าหริ�บหนึ่�าแริกของเว็�บไซึ่ต่�ไม�คืว็ริให�โหล้ด

ข�อม�ล้ช้�า ปAจจ�ยที่# จะกริะที่บต่�อคืว็ามเริ�ว็ ได�แก� ขนึ่าดของริ�ปภาพัที่# ใช้� จ�านึ่ว็นึ่ของริ�ปภาพัที่# ใช้� แล้ะปริ�มาณของต่�ว็อ�กษริที่# อย��บนึ่หนึ่�านึ่�6นึ่ๆ อนึ่� งคืว็ามเริ�ว็ในึ่การิโหล้ดเว็�บไซึ่ต่� อาจอย��ที่# Server ที่# เว็�บไซึ่ต่�นึ่�6นึ่ๆอย��ว็�าม#คืว็ามสำามาริถสำ�งเพั#ยงใด ขนึ่าดของริ�ปภาพัที่# ใช้�คืว็ริจะม#ขนึ่าดไม�เก�นึ่ 20-30K ต่�อริ�ป –สำ�ว็นึ่ปริะเภที่ของริ�ปนึ่�6นึ่คืว็ริเป2นึ่ GIF หริ�อ

JPEG ถ�าขนึ่าดของริ�ปภาพัใหญ่�เก�นึ่ไป อาจต่�ดแบ�งให�ขนึ่าดเล้�กล้ง แล้ะใช้�ต่าริางช้�ว็ยในึ่การิจ�ดริ�ปภาพันึ่�6นึ่ๆ

Page 52: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• ความง&ายในกี่ารู้ค�นหาข�อม�ล –ปAจจ�ยหล้�กนึ่�6นึ่ข�6นึ่อย��ก�บโคืริงสำริ�างของเว็�บไซึ่ต่�

ต่�6งแต่�ต่อนึ่แริกที่# ม#การิจ�ดโคืริงสำริ�างแล้ะจ�ดกล้/�มของข�อม�ล้ นึ่อกจากนึ่#6ย�งม#ปAจจ�ยอ� นึ่ๆ อ#ก– เช้�นึ่ การิม# Navigator bar หริ�อ แถบนึ่�าที่าง

ในึ่ที่/กๆหนึ่�าของเว็�บไซึ่ต่� แล้ะถ�าสำามาริถให�บริ�การิ Search แล้ะ Sitemap ได�ก�จะเป2นึ่สำ� งที่# จะช้�ว็ยให�คื�นึ่หาข�อม�ล้ได�ง�ายย� งข�6นึ่

Page 53: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• ต้�วอ�กี่ษรู้, ฉากี่หล�ง และ ส� –สำ�าหริ�บริ�ปแบบที่# นึ่�ยมใช้�คื�อ ต่�ว็อ�กษริสำ#ด�า บนึ่

ฉากหล้�งขาว็ ถ�าต่�องการิก�าหนึ่ดปริะเภที่ของต่�ว็อ�กษริคืว็ริใช้�ที่# เป2นึ่สำากล้นึ่�ยม – เช้�นึ่ ในึ่กริณ#ภาษาอ�งกฤษ อาจใช้� Arial

หริ�อTimes News Roman เป2นึ่ต่�นึ่ สำ�ว็นึ่ภาษาไที่ย อาจใช้� MS Sans Serif –การิเล้�อกใช้�ต่�ว็อ�กษริภาษาไที่ยนึ่�6นึ่ต่�องริะว็�งเป2นึ่

พั�เศษเพัริาะในึ่กริณ#ที่# เคืริ� องผู้��เย# ยมช้มไม�ม#ต่�ว็อ�กษรินึ่�6นึ่ๆ อาจที่�าให�ผู้��เข�าเย# ยมช้มไม�สำามาริถอ�านึ่ต่�ว็อ�กษริได�เล้ย

Page 54: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• รู้�ปภาพ –ม#ใช้�ก�นึ่อย�� 2 ปริะเภที่ คื�อ GIF หรู้อ JPEG

หนึ่� งในึ่หล้�กการิพั�จาริณาการิใช้�ปริะเภที่เพั� อปริะสำ�ที่ธี�ภาพัสำ�งสำ/ด คื�อ จ�านึ่ว็นึ่สำ#ของริ�ปภาพันึ่�6นึ่ๆ –ถ�าเป2นึ่ภาพัแต่�งหริ�อภาพัถ�ายที่# ม#สำ#มากๆ ก�คืว็ริ

ใช้�ไฟล้�ปริะเภที่ JPEG –แต่�ถ�าเป2นึ่เพั#ยงป/,มหริ�อปCายที่# ม#สำ#ไม�มากก�คืว็ริใช้�

GIF พัริ�อมก�บพั�จาริณาเริ� องขนึ่าดของไฟล้�ด�ว็ย –อนึ่� งคืว็ริจะม#การิคืะเนึ่ขนึ่าดของริ�ปภาพัที่# จะใสำ�

บนึ่เว็�บไซึ่ต่�ก�อนึ่ เพั� อจะได�ใช้�ขนึ่าด แล้ะอ�ต่ริาสำ�ว็นึ่ ที่# พั�งพัอใจมากที่# สำ/ด

Page 55: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• ส&วนปรู้ะกี่อบื้ท��ขาดไม&ได�ของเว�บื้ไซต้� – เช้�นึ่ ห�ว็ข�อที่# เก# ยว็ก�บผู้��จ�ดที่�า อาจเป2นึ่ปริะว็�ต่�

คืว็ามเป2นึ่มา แล้ะ/หริ�อ ข�อม�ล้ปAจจ/บ�นึ่ (About us) เหล้�านึ่#6ช้�ว็ยเพั� มคืว็ามนึ่�าเช้� อถ�อให�ก�บผู้��เข�าเย# ยมช้ม แล้ะเพั� มเต่�มเก# ยว็ก�บแถบนึ่�าที่าง Search Sitemap แล้ะย�งม#ห�ว็ข�ออ� นึ่ๆ อ#ก – เช้�นึ่ ข�อเสำนึ่อแนึ่ะ (Feedback) คื�าถามที่# ถ�ก

ถามบ�อย (FAQ - Frequently Asked Questions)

Page 56: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• กี่&อนท��จะน+าเว�บื้ไซต้� Upload ไปย�ง Server

ควรู้จะม�กี่ารู้ทดสอบื้ – โดยใช้�ที่�6ง Netscape Communicator แล้ะ

Internet Explorer เพั� อด�คืว็ามเริ�ว็ในึ่การิโหล้ดว็�าช้�าหริ�อเริ�ว็เพั#ยงใด Link ที่�6งภายในึ่ แล้ะ ภายนึ่อกถ�กต่�องหริ�อไม� ริ�ปภาพัถ�กต่�องหริ�อไม� พั�สำ�จนึ่�อ�กษริ แล้ะอ�านึ่ข�อม�ล้ เพั� อให�แนึ่�ใจว็�าข�อม�ล้ต่�างๆ ถ�กต่�อง

Page 57: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ข�อแนะน+าในกี่ารู้ท+าเว�บื้ไซต้�• หล�งจากี่ท��เว�บื้ไซต้� Publish –ถ�าเป2นึ่ไปได�คืว็ริที่ดสำอบ เหม�อนึ่ก�บที่# ที่ดสำอบ

ก�อนึ่ที่# จะ Publish เพั� อคืว็ามแนึ่�ใจอ#กคืริ�6ง นึ่อกจากการิที่ดสำอบแล้�ว็ –สำ� งที่# จะต่�องกริะที่�าหล้�ง Publish คื�อ การิ

สำ�าริว็จ ปริ�บปริ/ง แล้ะด�แล้ริ�กษาเว็�บไซึ่ต่� เม� อพับคืว็ามคื�ดด#ๆ ที่# อาจนึ่�ามาปริ�บปริ/งเว็�บไซึ่ต่�ได�ก�คืว็ริจะจดบ�นึ่ที่�กไว็� ถ�าเป2นึ่การิแก�ไขนึ่�ดหนึ่�อยก�คืว็ริที่�าการิแก�ไขที่�นึ่ที่# แต่�ถ�าเป2นึ่การิแก�ไขที่# ต่�องใช้�เว็ล้านึ่านึ่คืว็ริริอสำ�กริะยะริว็บริว็มสำ� งที่# ต่�องการิแก�ไขที่�6งหมด

Page 58: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ปรู้ะเภทของเว�บื้ไซต้�• การิออกแบบแล้ะการิสำริ�างเว็�บไซึ่ต่�จะต่�องม#การิ

ก�าหนึ่ดจ/ดปริะสำงคื�หริ�อเปCาหมายที่# แนึ่�นึ่อนึ่ก�อนึ่ เช้�นึ่–ต่�องการิสำ� อถ�งอะไริ–บ/คืคืล้กล้/�มไหนึ่ที่# เป2นึ่เปCาหมาย

• จ�งจะสำามาริถเริ� มต่�นึ่สำริ�างเว็�บไซึ่ต่�ได�

Page 59: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

ปรู้ะเภทของเว�บื้ไซต้�• เว็�บไซึ่ต่� สำามาริถแบ�งออกต่ามจ/ดปริะสำงคื�การิจ�ด

ที่�าเว็�บไซึ่ต่� ออกเป2นึ่ 5 ปริะเภที่ คื�อ– เว็�บไซึ่ต่�สำ�ว็นึ่ต่�ว็– เว็�บไซึ่ต่�ปริะเภที่บ�นึ่เที่�ง– เว็�บไซึ่ต่�ปริะเภที่ว็�ช้าการิ– เว็�บไซึ่ต่�ปริะเภที่ให�บริ�การิ– เว็�บไซึ่ต่�ปริะเภที่คื�นึ่หาข�อม�ล้

Page 60: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

เว�บื้ไซต้�ส&วนต้�ว• เป2นึ่เว็�บไซึ่ต่�ที่# ออกแบบแล้ะสำริ�างข�6นึ่เพั� อนึ่�าเสำนึ่อ

ข�อม�ล้ของเจ�าของเว็�บไซึ่ต่�เป2นึ่หล้�ก โดยสำ�ว็นึ่มากจะนึ่�าเสำนึ่อปริะว็�ต่� หริ�อข�อม�ล้ของเจ�าของเว็�บไซึ่ต่� จ/ดปริะสำงคื�เพั� อแสำดงผู้ล้งานึ่ หริ�อข�อม�ล้ของเจ�าของเว็�บไซึ่ต่�

Page 61: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

เว�บื้ไซต้�ปรู้ะเภทบื้�นเท�ง• เป2นึ่เว็�บไซึ่ต่�ที่# ออกแบบแล้ะสำริ�างข�6นึ่เพั� อเนึ่�นึ่คืว็าม

บ�นึ่เที่�งเป2นึ่หล้�ก โดยจะนึ่�าเสำนึ่อข�อม�ล้เก# ยว็ก�บล้ะคืริ, ดาริา, ข�าว็, เพัล้ง, ภาพัยนึ่ต่ริ� แล้ะอ� นึ่ๆ ริว็มที่�6งเริ� องที่# เป2นึ่สำ� งที่# นึ่�าสำนึ่ใจในึ่สำ�งคืมปAจจ/บ�นึ่

• ผู้��ที่# เข�ามาช้มเว็�บนึ่#6ม�กจะเป2นึ่ขาปริะจ�า เนึ่� องจากเว็�บไซึ่ต่�ปริะเภที่นึ่#6จะม#การิปริ�บปริ/งเนึ่�6อหาภายในึ่เว็�บให�ที่�นึ่สำม�ยต่ล้อดเว็ล้า

Page 62: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

เว�บื้ไซต้�ปรู้ะเภทว�ช้ากี่ารู้• เป2นึ่เว็�บไซึ่ต่�ที่# ออกแบบแล้ะสำริ�างข�6นึ่เพั� อริว็บริว็ม

ข�อม�ล้ที่# เป2นึ่ปริะโยช้นึ่�ต่�างๆที่# ต่�องการิเผู้ยแพัริ�ให�เป2นึ่ปริะโยช้นึ่�แกผู้��เข�ามาช้มเว็�บไซึ่ต่� แล้ะย�งต่�องเป2นึ่ข�อม�ล้ที่# ถ�กต่�อง เช้� อถ�อได� ม#แหล้�งอ�างอ�ง

• ต่�ว็อย�างเช้�นึ่ การิศ�กษา, สำ/ขภาพั, คือมพั�ว็เต่อริ� เป2นึ่ต่�นึ่

• โดยอาจจะริว็มไปถ�งเว็�บที่# ม#การิอนึ่/ญ่าต่ให�ผู้��ใช้�งานึ่สำามาริถแล้กเปล้# ยนึ่คืว็ามคื�ดเห�นึ่ได�อย�างอ�สำริะในึ่ด�านึ่ว็�ช้าการิ

Page 63: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

เว�บื้ไซต้�ปรู้ะเภทให�บื้รู้�กี่ารู้• เป2นึ่เว็�บไซึ่ต่�ที่# ออกแบบแล้ะสำริ�างข�6นึ่เพั� อให�บริ�การิ

เก# ยว็ก�บเริ� องริาว็ต่�างๆ • เช้�นึ่ การิที่�องเที่# ยว็, เบอริ�โที่ริศ�พัที่�, การิซึ่�6อ-ขาย

ของผู้�านึ่อ�นึ่เต่อริ�เนึ่�ต่, โที่ริศ�พัที่�ม�อถ�อ การิฝ่ากไฟล้� เป2นึ่ต่�นึ่

Page 64: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

เว�บื้ไซต้�ปรู้ะเภทค�นหาข�อม�ล• เว็�บไซึ่ต่�ปริะเภที่คื�นึ่หาข�อม�ล้ หริ�อ Search

Engine• เป2นึ่เว็�บไซึ่ต่�ที่# ออกแบบแล้ะสำริ�างข�6นึ่เพั� อสำ�บคื�นึ่

ข�อม�ล้จากเว็�บไซึ่ต่�ต่�างๆได�ที่� ว็โล้ก• เช้�นึ่ เว็�บไซึ่ต่�, ริ�ปภาพั, ข�อม�ล้, โปริแกริม เป2นึ่ต่�นึ่

Page 65: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

บ/คืล้ากริที่# เก# ยว็ข�องก�บเว็�บไซึ่ต่�• บ/คืล้ากริที่# เก# ยว็ข�องก�บเว็�บไซึ่ต่� ม#อย�� 4 แบบ คื�อ–ผู้��ด�แล้แล้ะริ�บผู้�ดช้อบเก# ยว็ก�บเว็�บไซึ่ต่� (Web

Master)–ผู้��ออกแบบหนึ่�าต่าที่�6งหมดของเว็�บไซึ่ต่� (Web

Design)–นึ่�กเข#ยนึ่โปริแกริม (Programmer)–นึ่�กเข#ยนึ่แล้ะบริริณาธี�การิที่# ด�แล้ด�านึ่เนึ่�6อหาของ

เว็�บไซึ่ต่� (Content Writer/Editer)

Page 66: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

เน�อหาท��ควรู้ม�ในเว�บื้ไซต้�• ข�อม�ล้พั�6นึ่ฐานึ่ที่# คืว็ริม#ในึ่เว็�บไซึ่ต่�ปริะกอบด�ว็ย–ข�อม�ล้เก# ยว็ก�บบริ�ษ�ที่ องคื�กริ หริ�อผู้��จ�ดที่�า

(About us)– ริายล้ะเอ#ยดของผู้ล้�ต่ภ�ณพั�หริ�อบริ�การิ

(Product/Service Information)–ข�าว็สำาริ (News/ Press Release)–คื�าถามคื�าต่อบ (Frequently Asked

Question)–ข�อม�ล้ในึ่การิต่�ดต่�อ (Contact

Information)

Page 67: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

หล�กี่กี่ารู้ออกี่แบื้บื้เว�บื้ไซต้�• การิออกแบบเว็�บไซึ่ต่�ม# 2 องคื�ปริะกอบ คื�อ–การิออกแบบโคืริงสำริ�างเว็�บไซึ่ต่� (Site

Structure Design)–การิออกแบบริะบบเนึ่ว็�เกช้� นึ่ (Site

Navigation Design)

Page 68: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

กี่ารู้ออกี่แบื้บื้โครู้งสรู้�างเว�บื้ไซต้� (Site Structure Design)

• โครู้งสรู้�างเว�บื้ไซต้� (Site Structure)– เป2นึ่แผู้นึ่ผู้�งของการิล้�าด�บเนึ่�6อหาหริ�อการิจ�ด

ว็างต่�าแหนึ่�งเว็�บเพัจที่�6งหมด ซึ่� งจะที่�าให�เริาที่ริาบว็�าเว็�บไซึ่ที่�ปริะกอบด�ว็ยเนึ่�6อหาอะไริบ�าง แล้ะม#เว็�บเพัจหนึ่�าไหนึ่ที่# เก# ยว็ข�องเช้� อมโยงก�นึ่–การิออกแบบโคืริงสำริ�างเว็�บไซึ่ต่�เปริ#ยบเสำม�อนึ่

ก�บการิเข#ยนึ่แบบอาคืาริก�อนึ่ที่# จะล้งม�อสำริ�าง

Page 69: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

กี่ารู้ออกี่แบื้บื้โครู้งสรู้�างเว�บื้ไซต้� (Site Structure Design)

• ว็�ธี#จ�ดโคืริงสำริ�างเว็�บไซึ่ต่�สำามาริถที่�าได� 2 แบบ คื�อ –จ�ดต่ามหล้/�มเนึ่�6อหา (Content-based

Structure)–จ�ดต่ามกล้/�มผู้��ช้ม (User-based

Structure)

Page 70: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

กี่ารู้ออกี่แบื้บื้โครู้งสรู้�างเว�บื้ไซต้� (Site Structure Design)

• ริ�ปแบบของโคืริงสำริ�างเว็�บไซึ่ต่� สำามาริถว็างได�หล้ายริ�ปแบบต่ามคืว็ามเหมาะสำม เช้�นึ่–แบบเริ#ยงล้�าด�บ (Sequence)–แบบล้�าด�บช้�6นึ่ (Hierarchy)–แบบผู้สำม (Combination)

Page 71: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

กี่ารู้ออกี่แบื้บื้รู้ะบื้บื้เนว�เกี่ช้��น (Site Navigation Design)

• เปCาหมายของการิออกแบบริะบบเนึ่ว็�เกช้� นึ่ คื�อ ช้�ว็ยให�ผู้��เช้�าช้มเว็�บไซึ่ต่�สำามาริถเข�าถ�งข�อม�ล้ได�อย�างริว็ดเริ�ว็แล้ะไม�หล้งที่าง

• การิออกแบบริะบบเนึ่ว็�เกช้� นึ่ม# 2 สำ�ว็นึ่ คื�อ– เคืริ� องนึ่�าที่าง (Navigation)– เคืริ� องบอกต่�าแหนึ่�ง (Location Indicator)

Page 72: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

กี่ารู้ออกี่แบื้บื้รู้ะบื้บื้เนว�เกี่ช้��น (Site Navigation Design)

• เครู้�องน+าทาง (Navigation)– เคืริ� องนึ่�าที่าง คื�อ เคืริ� องม�อสำ�าหริ�บให�ผู้��ช้มเป?ด

ไปย�งเว็�บเพัจต่�างๆ โดยแยกออกเป2นึ่• เมนึ่�หล้�ก• เมนึ่�เฉพัาะ• เคืริ� องม�อเสำริ�ม

Page 73: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

กี่ารู้ออกี่แบื้บื้รู้ะบื้บื้เนว�เกี่ช้��น (Site Navigation Design)

• เครู้�องบื้อกี่ต้+าแหน&ง (Location Indicator)– เป2นึ่สำ�ว็นึ่ที่# แสำดงให�ผู้��ช้มเว็�บไซึ่ต่�ที่ริาบว็�าอย��สำ�ว็นึ่

ใดของเว็�บไซึ่ต่� – เคืริ� องบอกต่�าแหนึ่�งม#หล้ายริ�ปแบบ เช้�นึ่

ข�อคืว็าม ริ�ปภาพักริาฟฟ?ก

Page 74: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

กี่�จกี่รู้รู้ม• ให�นึ่�กศ�กษาก�าหนึ่ดล้�ษณะของเว็�บไซึ่ต่�ที่# จะสำริ�าง

ซึ่� งปริะกอบด�ว็ย–ว็�ต่ถ/ปริะสำงคื�ของการิสำริ�างเว็�บไซึ่ต่�–กล้/�มผู้��เข�าช้มเว็�บไซึ่ต่�– โคืริงสำริ�างของเว็�บไซึ่ต่�– เอกล้�กษณ�ของเว็�บไซึ่ต่�–ฟAงก�ช้� นึ่การิใช้�งานึ่

Page 75: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

LAB

Page 76: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test1.html

<html><head><title> ช้�อของ Web page </title> </head>

<body> เน�อหาของ Web page จะพ�มพ�

อย�&ในส&วนน��</body></html>

Page 77: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test2.html

<html><head><title> Test 2

</title> </head><body> เน�อหาของ Web page จะพ�มพ�

อย�&ในส&วนน��ข�อความน��เข�ยนเพ��มเต้�ม</body></html>

Page 78: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test3.html

<html><head><title> Test 3

</title> </head><body> ข��นต้อนในกี่ารู้พ�ฒนาเว�บื้ไซต้�

1. เต้รู้�ยมเน�อหาท��จะน+าเสนอ 2. ออกี่แบื้บื้หน�าต้าของเว�บื้ไซต้� 3. เข�ยนและทดสอบื้ 4. ลงทะเบื้�ยนช้�อเว�บื้ไซต้�และจ�ดหาพ�นท��เกี่�บื้ข�อม�ล 5. Upload เว�บื้ไซต้�และต้รู้วจสอบื้ความเรู้�ยบื้รู้�อย 6. ปรู้ะกี่าศให�โลกี่รู้�บื้รู้��

</body></html>

Page 79: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test4.html

<html><head><title> Test 4

</title> </head><body> อ�นเทอรู้�เน�ต้ หมายถ5ง ล�กี่ษณะของ

กี่ารู้เช้�อมต้&อของเครู้อข&ายคอมพ�วเต้อรู้�ท��งเล�กี่และใหญ่&จ+านวนมากี่เข�าด�วยกี่�น โดยม�ข�อกี่+าหนดว&าท0กี่เครู้อข&ายท��เช้�อมต้&อถ5งกี่�น จะต้�องอย�&ภายใต้�มาต้รู้ฐานของกี่ารู้เช้�อมต้&อ(โปรู้โต้คอล) ท��ถ�กี่สรู้�างข5�นมาเพ�อใช้�งานบื้นเครู้อข&ายแบื้บื้น��โดยเฉพาะ ซ5�งเรู้�ยกี่ว&า TCP/IP

</body></html>

Page 80: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test5.html<html><head><title> Test 5 </title>

</head><body> ข5�นบื้รู้รู้ท�ดใหม& 1 แท:กี่ <br> ข5�นบื้รู้รู้ท�ดใหม& 2 แท:กี่ <p> ข5�นบื้รู้รู้ท�ดใหม& 3 แท:กี่ <p>&nbsp;</p>ข�อความ</body></html>

Page 81: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test6.html

<html><head><title> Test 6 </title>

</head><body> ข�อความน��ไม&ได�จ�ดต้+าแหน&ง<p align=“left”> ข�อความน��กี่+าหนด

ให�ช้�ดซ�าย </p><p align=“center”> ข�อความน��

กี่+าหนดให�ช้�ดกี่5�งกี่ลาง </p><p align=“right”> ข�อความน��

กี่+าหนดให�ช้�ดขวา </p></body></html>

Page 82: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test7.html

<html><head><title> Test 7 </title>

</head><body> ข�อความน��ไม&ได�จ�ดต้+าแหน&ง< div align=“left”> ข�อความน��

กี่+าหนดให�ช้�ดซ�าย </div>< div align=“center”> ข�อความ

น��กี่+าหนดให�ช้�ดกี่5�งกี่ลาง </div>< div align=“right”> ข�อความน��

กี่+าหนดให�ช้�ดขวา </div></body></html>

Page 83: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test8.html

<html><head><title> Test 8

</title> </head><body> ข�อความน��ไม&ได�จ�ดต้+าแหน&ง<dd> ข�อความน��ม�กี่ารู้จ�ดต้+าแหน&งให�ย&อ

หน�าด�วยแท:กี่ เป;นต้�วอย&างกี่ารู้ย&อหน�าแบื้บื้ง&าย โดยจะย&อหน�าปรู้ะมาณ 5 ต้�วอ�กี่ษรู้ ท+าให�เกี่�ดความสวยงามได�

</body></html>

Page 84: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test9.html

<html><head><title> Test 9 </title>

</head><body> ข�อความน��ไม&ได�จ�ดต้+าแหน&ง< blockquote> ข�อความน��ม�กี่ารู้จ�ด

ต้+าแหน&งกี่ารู้เย�องของข�อความด�วยแท:กี่ จะเป;นต้�วอย&างกี่ารู้เย�องข�อความเข�ามา < /blockquote>

</body></html>

Page 85: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test10.html

<html><head><title> Test 10 </title>

</head><body> ข�อความน��ไม&ได�จ�ดต้+าแหน&ง< blockquote> ข�อความน��ม�กี่ารู้จ�ด

ต้+าแหน&งให�ย&อหน�าด�วยแท:กี่ เป;นต้�วอย&างกี่ารู้ย&อหน�าแบื้บื้ง&าย โดยจะย&อหน�าปรู้ะมาณ 5 ต้�วอ�กี่ษรู้ ท+าให�เกี่�ดความสวยงามได�

< blockquote> <dd>ข�อความน��ม�กี่ารู้จ�ดต้+าแหน&งกี่ารู้เย�องและกี่ารู้ย&อหน�าของข�อความด�วยแท:กี่ เพ�อให�เกี่�ดความสวยงามมากี่ย��งข5�น

< /blockquote> < /blockquote> </body></html>

Page 86: ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

Test11.html

<html><head><title> Test 11 </title>

</head><body> เส�นข�างล&างน��ไม&ใช้� attribute อะไรู้เลย<hr>เส�นข�างล&างกี่+าหนดความหนา attribute size= 10

px<hr size=“10px”> เส�นข�างล&างกี่+าหนดความหนา attribute size= 10

px และให�เป;นเส�นท5บื้ด�วยnoshade<hr size=“10px” noshade> เส�นข�างล&างกี่+าหนดความกี่ว�าง attribute width=

80%<hr width =“80%”> เส�นข�างล&างกี่+าหนดความกี่ว�าง attribute width=

300 px<hr width= “300px”> เส�นข�างล&างกี่+าหนดความกี่ว�าง attribute width=

300 px และจ�ดซ�ายด�วย align= left<hr width= “300px” align=“left”> </body></html>