Transcript รายวิชา ง40201 การเขียนโปรแกรมบนเว็บ

้
การสร ้างเว็บไซต ์เบืองต้
น
้
่
ความรู ้เบืองต้
นเกียวกับ
อินเทอร ์เน็ ต
่
• ระบบการแทนชือในอิ
นเทอร ์เน็ ต
• การติดต่อเข้ากับอินเตอร ์เน็ ต
่
่
• บริการด้านการสือสารและแลกเปลี
ยน
ข้อมู ล
่
ระบบการแทนชือในอิ
นเทอร ์เน็ ต
• คอมพิวเตอร ์ในอินเตอร ์เน็ ตติดต่อกันโดยใช้
โปรโตคอลแบบ ทีซพ
ี ี (Transmission Control)
่ ยกรวม ๆ
และไอพี (Internet Protocol) ซึงเรี
กันว่า ทีซพ
ี /ี ไอพี (TCP/IP)
่
• หมายเลขประจาเครืองคอมพิ
วเตอร ์ใน
อินเตอร ์เน็ ตเรียกว่า หมายเลขไอพี (IP
่ อมาจาก อินเตอร ์เน็ ตโปรโตคอล
address) ซึงย่
(Internet Protocol)
• IP Address มีขนาด 32 บิต แบ่งเป็ น 4 ส่วนๆ ละ
8 บิต ในการอ้างถึงก็จะแปลงเป็ นเลขฐานสิบ
้ วเลขในแต่ละส่วนนี จะมี
้ คา่ ตังแต่
้
ดังนันตั
0 ถึง
้
่
ระบบการแทนชือในอิ
นเทอร ์เน็ ต
• หมายเลขไอพีจดจาได้ยาก
้ อเป็
่ นตัวอกั ษรขึนมาแทน
้
• แก้ปัญหาโดยตังชื
่
หมายเลขไอพี เรียกว่า ระบบชือโดเมน
(Domain Name System) หรือ ดีเอ็นเอส
(DNS)
• หน่ วยงาน InterNIC ( Internet Network
Information Center ) ได้กาหนดโดเมนระดับ
บนสุด ให้เป็ นมาตรฐานใช้รว่ มกันสาหร ับ
หน่ วยงาน และประเทศต่าง ๆ โดยจะบอกถึง
่
่ อข่าย
ประเภทขององค ์กร หรือชือประเทศที
เครื
้ ่
ตังอยู
้
่
ความรู ้เบืองต้
นเกียวกับการเขี
ยน
เว็บ
่
คาทีควรทราบ
่ ้
- Web browser คือ โปรแกรมทีใช
แปลภาษา html (interpreter) เช่น Internet
Explorer , Netscape , Mozilla Firefox ,
Opera , etc.
่ ่ (Address) ของเว็บไซต ์ เช่น
- URL คือ ทีอยู
www.hotmail.com เป็ นต ้น
้
่
ความรู ้เบืองต้
นเกียวกับการเขี
ยน
เว็บ
่
คาทีควรทราบ
่
่ ้บริการ
- Server คือ เครืองคอมพิ
วเตอร ์ทีให
่
ต่างๆ เช่น Web Server จะให ้บริการเกียวกั
บ
เว็บไซต ์ , Database Server จะให ้บริการ
่
เกียวกั
บการจัดการฐานข ้อมูล เป็ นต ้น
่
- Client คือ เครืองคอมพิ
วเตอร ์ลูกข่าย เป็ น
่ ใช
่ ้บริการ server
เครืองที
้
ความรู ้เบืองต้
น
่
เกียวกับการเขี
ยนโปรแกรมบนเว็บ
่
คาทีควรทราบ
่
- Web Server คือ เครืองคอมพิ
วเตอร ์หรือ
่ ้บริการเว็บไซต ์ ผูใ้ ช ้เรียกชมหน้า
โปรแกรมซึงให
เว็บไซต ์ได ้โดยใช ้โปรโตคอล HTTP ผ่านทางเว็บ
เบราว ์เซอร ์(Web browser)
1 www.bsru.ac.th
่
ผู ใ้ ช้ / เครืองลู
กข่าย
(User / Client)
2
index.html
่
เครืองให้
บริการ
(Server)
index.html
page2.html
contact.html
board.php
vote.php
test.aspx
pagex.aspx
3 แปลงโค้ด html ให้เป็ นรู ปภาพ
และข้อความ
สร ้างเว็บใช้ซอฟต ์แวร ์อะไรบ้าง
1. Adobe Dreamweaver
2. หรือ Notepad หรือ EditPlus
3. Adobe PhotoShop (อาจใช ้หรือไม่ก็ได ้
สาหร ับตกแต่งภาพ)
4. Adobe Flash (อาจใช ้หรือไม่ก็ได ้ สาหรบั
่ กเล่น)
เพิมลู
เทคโนโลยีเว็บเพจ (Web
Pages)
ถูกค ้นคิดโดย เซอร ์ทิโมที จอห ์น
เบอร ์เนิ ร ์ส-ลี (Sir Timothy John BernersLee) หรือ ทิม เบอร ์เนิ ร ์ส-ลี
• ช่วงปลายปี 1989 ทีมงานจากห ้องปฏิบต
ั ก
ิ ารทาง
ฟิ สิกส ์อนุ ภาคแห่ง
ยุโรป (European Particle Physics Labs) ทีรู่ ้จัก
กันในนาม CERN (Conseil European pour la
Recherche Nucleaire) ประเทศสวิตเซอร ์แลนด ์
• พัฒนาการนาเสนอข ้อมูลในระบบ WWW (World
Wide Web)
่ ้สนับสนุ นการเผยแพร่เอกสารของ
• พัฒนาภาษาทีใช
ลักษณะเด่นของการนาเสนอข ้อมูลบน
เว็บเพจ
่
่ บนหน้าเว็บ
• สามารถเชือมโยงข
้อมูลไปยังจุดอืนๆ
• ไม่ยด
ึ ติดกับระบบปฏิบต
ั ก
ิ าร
• สามารถเผยแพร่ได ้รวดเร็ว
และกว ้างไกล
ทำควำมรู ้จักกับเอกสำรเว็บ
เอกสารเว็บ
• ไฟล ์ข ้อความ (Text File)
• ควบคุมการแสดงผลด ้วยคาสัง่
่ ยกว่า “แท็ก - Tag”
ภาษา HTML ทีเรี
• มีสว่ นขยายเฉพาะ.html หรือ .htm
• ทางานได ้ทุกระบบปฏิบต
ั ก
ิ าร
• แสดงผลผ่านโปรแกรมเฉพาะ
เรียกว่า “เว็บเบราเซอร ์”
เว็บเบราเซอร ์ (Web Browser)
• โปรแกรมแปลคาสัง่ HTML และแสดงผลบนจอภาพ
• มีผูพ
้ ฒ
ั นาหลายค่าย ได ้แก่
–
–
–
–
Internet Explorer
FireFox
Chrome
Opera
• เว็บเบราเซอร ์แต่ละค่าย แต่ละรุน
่
รู ้จักภาษา HTML ไม่เท่ากัน
การออกแบบเว็บเพจ
• ใช ้ภาษา HTML
่
– ป้ อนคาสังภาษา
HTML ด ้วย
โปรแกรม Text Editor
เช่น NotePad
่ ้ตามต ้องการ
• ใส่คาสังได
• ไม่เหมาะสาหร ับผูพ
้ ฒ
ั นา
ในระดับต ้น
การออกแบบเว็บเพจ
• ใช ้โปรแกรมสร ้างเอกสารเว็บ
(Web Generator)
– เช่นโปรแกรม
Microsoft Office,
Adobe Dreamweaver
• ไม่ต ้องศึกษาภาษา HTML
• จุดด ้อยคือ โปรแกรมจะไม่รู ้จักคาสัง่
HTML ใหม่ๆ
ขัน
้ ตอนกำรออกแบบเว็บเพจ
• วำงแผน/กำหนดหัวข ้อ และเนือ
้ หำทีจ
่ ะนำเสนอ
ผมจะทำเว็บข ้อมูลสว่ นตัว เอ๋! จะมีหวั ข ้ออะไร
อ ้อนึกได ้แล ้ว ประวัต,ิ หน ้ำทีก
่ ำรงำน, ผลงำน,
ควำมภำคภูมใิ จ เท่ำนีก
้ ็พอมัง้ ใชไ่ หมครับ เพ
ขัน
้ ตอนกำรออกแบบเว็บเพจ
ั พันธ์ของข ้อมูล
• สร ้ำงผังควำมสม
แบบรำกต ้นไม ้
Home
Page
ประวัต ิ
หน ้ำที่
กำร
งำน
ผลงำ
น
งำน
อดิเรก
ควำม
ภำคภู
มิใจ
้
ขันตอนการออกแบบเว็
บเพจ
่
• กาหนดชือไฟล
์ของเอกสารเว็บ
่
– ชือไฟล
์และนามสกุลของไฟล ์เอกสารเว็บ
จะถูกควบคุมจาก Web Administrator
– นามสกุลของไฟล ์เอกสาร HTML มี 2 แบบคือ .htm,
.html
่
่ ้ เป็ นภาษาอังกฤษตัวพิมพ ์เล็ก ไม่มี
– ชือและนามสกุ
ลทีใช
ช่องว่าง
่
– ไม่ควรใช ้สัญลักษณ์พเิ ศษใดๆ ยกเว ้นเครืองหมาย
“ขีด -”
– ไฟล ์แรกมักจะใช ้ชือ่ index
ขัน
้ ตอนกำรออกแบบเว็บเพจ
ื่ ไฟล์ของเอกสำรเว็บ
• กำหนดชอ
Index.
html
p01.ht
ml
p02.ht
ml
p03.h
tml
p04.h
tml
p05.h
tml
้
ขันตอนการออกแบบเว็
บเพจ
• สร ้างโฟลเดอร ์เฉพาะสาหร ับเอกสารเว็บแต่ละชุด/
่
เรือง
่ ้าง สามารถสร ้างโฟลเดอร ์ย่อย เพือ่
• ในโฟลเดอร ์ทีสร
เก็บไฟล ์ให ้เป็ นระบบระเบียบได ้
– ตัวอย่างสร ้างโฟลเดอร ์ชือ่ myweb บนเดสท็อปของ Windows
• คลิกปุ่ มขวาของเมาส ์บนทีว่่ างของเดส
• เลือกรายการคาสัง่ New, Folder
่
• พิมพ ์ชือโฟลเดอร
์ myweb
แล ้วกดปุ่ ม <Enter> 1 ครง้ั
้
ขันตอนการออกแบบเว็
บเพจ
่ ยวข
่
้
• จัดหาภาพ หรือสร ้างภาพทีเกี
้องกับเนื อหา
– สร ้างด ้วยโปรแกรมกราฟิ ก เช่น Adobe PhotoShop
– คัดเลือกจาก ClipArt for Web เช่น CD-ROM รวม
ภาพสาหร ับเว็บ
่ อกใช ้ทังหมด
้
่ ้าง
• ภาพทีเลื
ต ้องเก็บไว ้ในโฟลเดอร ์ทีสร
ไว ้ก่อนแล ้ว
Copy to….
้
ขันตอนการออกแบบเว็
บเพจ
• สร ้างเอกสารเว็บ โดยการลงรหัส HTML หรือใช ้
โปรแกรมช่วย
• ไฟล ์เอกสาร HTML ทุกไฟล ์จะต ้องบันทึกไว ้ใน
่ ้างไว ้ก่อน รวมกับรูปภาพทีจั
่ ดเตรียมไว ้
โฟลเดอร ์ทีสร
แล ้ว
Index.
html
Save...
้
ขันตอนการออกแบบเว็
บเพจ
• ตรวจสอบผลเอกสาร HTML ด ้วยเว็บเบราเซอร ์ห
ลายค่าย หลายรุน
่
• เว็บเบราเซอร ์แต่ละค่าย แต่ละรุน
่ รู ้จักคาสัง่ HTML
ไม่เท่ากัน
้
ขันตอนการออกแบบเว็
บเพจ
้
่
• ส่งข ้อมูลขึนเครื
องแม่
ขา่ ย (Server)
่
• ตรวจสอบผลการเรียกดูจากเครืองแม่
ขา่ ย
Web Hosting คืออะไร ?
่ ญาตให ้ผูใ้ ช ้บริการ สามารถ
รูปแบบการให ้บริการทีอนุ
นาเว็บเพจ รูปภาพ หรือ โปรแกรมต่าง ๆ มาเก็บไวท้ ี่
เว็บเซิร ์ฟเวอร ์ (web server) ของผูใ้ ห ้บริการที่
่
่ั
เชือมต่
อกับอินเตอร ์เน็ ต ตลอด 24 ชวโมง
้ อก
่
่ งว่า HSP ย่อมาจาก Hosting
ว็บโฮสนี มี
ี ชือหนึ
Service Provider หรือผูใ้ ห ้บริการโฮสติง้ เป็ นธุรกิจที่
นาเอาเทคโนโลยีทจี่ าเป็ นสาหร ับงานสร ้างเว็บไซต ์ มา
่ ้เว็บไซต ์นั้น
ให ้บริการ โดยมีวต
ั ถุประสงค ์เพือให
สามารถมองเห็นได ้บนอินเตอร ์เน็ ต
Free Web Hosting
www.freewebhostingarea.com
www.justfree.com
LAB 1
้ กั
่ บฟรีเว็บ
ให ้นิ สต
ิ ทาการสมัครขอใช ้พืนที
โฮสติง้
โดยให ้ทาการเข ้าไปสมัครที่
www.freewebhostingarea.com
่
ให ้กาหนดชือโดเมน
ดังนี ้
bsรหัสนิ สต
ิ .xp3.biz
www.freewebhostingarea.com
29
http://noadsbiz.freewebhostingarea.com/ftp/
30