Page 53 - การสร้างเว็บไซต์

14.กำรสร้ำงเว็บไซต์ด้วยภำษำ HTML 15.กำรสร้ำงหน้ำโฮมเพจ

็
็
สิ่งแรกที่เรำจะต้องเข้ำใจในกำรท�ำเว็บไชต์ คือ โครงสร้ำงของไฟล์ซึ่งจะเปนที่เกบไฟส์ทั้งหมด
็
ู
ื
ู
ทั้งรปภำพและไฟล์เอกสำรต่ำงๆ ที่อยู่ในเว็บไชต์ ควรจะถูกรวมอยู่ใน Folder เดียวกัน เพ่อให้ง่ำย ส�ำหรับหน้ำโฮมเพจจะเปนหน้ำแรกของเว็บไซต์ ซึ่งจะตั้งชื่อว่ำ :index.html โดยมีรปแบบและ
ื
้
ในกำรค้นหำ กำรเรียกใช้ กำรลิงก์ และกำรจัดเกบข้อมล ส�ำหรับชื่อไฟล์นั้นควรเปนภำษำอังกฤษทุกไฟล์ รำยละเอียดของเนอหำ
ู
็
็
ื
ส�ำหรับในหนังสือเล่มนจะสร้ำงโครงสร้ำงไฟส์ของเว็บไซต์ ดังน ้ ี สำมำรถดำวน์โหลดโค้ดโปรแกรมได้ที่http:/c.mc.ac.thเพ่อน�ำโปรแกรมมำใช้ในกำรทด
้
ี
ี
็
็
ี
- โฟลเดอร์ที่เกบเว็บไชด์ซึ่งเปนโฟลเดอร์หลักให้มชื่อว่ำ html ใช้เกบไฟล์ต่ำงๆ ลองและศึกษำกำรท�ำงำนของโปรแกรมส�ำหรับกำรออกแบบส่วนต่ำงๆ ของโฮมเพจนั้น ได้มกำร
็
้
ึ
ึ
ี
็
ู
็
- โฟลเดอร์ที่เกบรปภำหซึ่งระอยู่ภำยในโฟลเดอร์ html อีกทีหน่ง ให้มชื่อว่ำ imges ซึ่งจะใช้เกบ วำงโครงร่ำงซึ่งได้มีกำรสร้ำงโครงร่ำงขนมำโดยให้มีชื่อในทุกๆส่วนซึ่งจะท�ำให้ง่ำยต่อกำรวำงอิลิเมน
็
่
ี
ื
รปภำพและสื่อต่ำงๆ ต์ต่ำงๆให้เปนไปตำมต้องกำรและสำมำรน�ำไปเขยน CSS ได้ เม่อออกแบบต�ำแหนงในกำรวำงข้อ
ู
ู
ี
ิ
มลต่ำงๆของโฮมเพจแล้วต่อไปกจะเริมเขยนตัวควบคุมกำรแสดงผลของเว็บเพจ โดยเปดโปรแกรม
็
ึ
ี
ื
้
็
็
เม่อสร้ำงโฟลเดอร์ส�ำหรับกบไฟล์ต่ำงๆ ของเว็บไชต์เสรจแล้ว ขั้นต่อไปกจะเปนกำรสร้ำงเว็บเพจ Notrpad++ ขนมำแล้วสร้ำงไฟล์ไหม่เพอเขยน CSS โดยใช้ชื่อว่ำ syle.css และเกบไฟไว้ที่โฟลเดอร์
็
็
็
ื
ื
ี
ี
็
็
็
ี
้
ี
ี
ี
โดยกำรเขยนจำกภำษำ HTML ซึ่งจะต้องม Editor ที่ใช้เขยน ในหนังสือเล่มนจะใช้โปรถกรม Nokpad+ เม่อเขยน CSS เสรจแล้ว ต่อไปกจะเปนกำรสร้ำงเว็บเพจโดยกำรเขยนด้วยภำษำ HTML ซึง
็
็
ี
ื
+ซึ่งสำมำรถดำวน์โหลดจำกอินเทอร์เนตเปนโปรแกรมฟริไม่เสียค�ำใช้จ่ำย โดยสำมำรถเลือกดำวน์โหลด ยังใข้โปรแกรม Notepad++ เปนโปรแกรมหรือเปนอิติเตอร์ส�ำหรับเขยนเหมอนเดิม โดย กำรสร้ำง
็
็
ี
้
ี
้
ี
็
ึ
้
ได้ จำกเว็บไซต์ http//notepad-ples-plas ang/ ไปที่เมน Downbad แล้วเลือกโปรแกรมNotrpad++ ร่น ไฟล์ใหม่ขนมำอีก 1 ไฟส์ โดยให้ไฟส์นมชื่อว่ำ index htm! สำเหตุที่ใช้ชื่อนเพรำะว่ำต้องกำรให้เปนหน้ำ
ู
ุ
ี
็
้
ี
็
ส่ำสดมำใช้งำน เม่อดำวน์โหลดมำแล้วกท�ำกำรติคตั้งลงที่เครื่องคอมพวเตอร์ให้เรจเรียบร้อย เมอคิคตั้ง แรกของโฮมเพจซึ่งทุกครั้งที่มคนเข้ำมำดูเว็บไซต์หน้ำนกจะถูกเรียกมำแสดงเปนหน้ำแรก ก่อนที่จะลิง
ิ
ุ
ื
็
ื
็
ี
็
ี
็
็
เสรจแล้วกเริ่มใช้งำนได้ทันที ชนดของไฟล์ในหนังสือนจะใช้เปนนำมสกล html เพรำะสร้ำงมำจำกภำษำ กไปยังหน้ำต่อๆ ไปที่มกำรลิงก์ในเว็บไซต์ โดยสำมำรถเขยนได้ดังน ้ ี
ิ
็
ี
ุ
้
็
็
็
ี
ื
ุ
ิ
HTML แต่ำสร้ำงมำจำกภำษำ PHP กจะเปนนำมสกล pp ซึงนำมสกลของไฟล์หรือชนดของไฟส์นั้น จะ เม่อเขยนโปรแกรม HTMLเสรจแล้วกทดสอบดูผลที่แสดงออกมำว่ำเปนไปตำมที่ได้ออกแบ
็
ุ
็
็
ิ
็
ื
็
็
้
ขนอยู่กับอย่ำงไรกใด้ แต่กควรจะสอดคล้องกับเนอหำในเพจนั้นๆ และต้องเปนภำษำอังกฤษเท่ำนั้น เช่น บไว้หรือไม่ โดยเปดที่โปรแกรมเบรำว์เซอร์ใดๆ กได้ เช่น IE, Chrome, Firefox เปนต้น ซึ่งเม่อรัน
้
ึ
็
ื
็
็
ถ้ำเปนน�ำหน้ำสร้ำงไฟล์มำจำกภำษำอะไรหรือไปรแกรมอะไร เม่อใด้ไฟล์แรกเปนindex.html แล้ว ไฟลืต่ ิ โปรแกรมแล้ว
ื
ไปจะตั้งชื่อเว็บเพจเก่ยวกับบคลำกรอำจจะตั้งชื่อว่ำ perso.html กได้
ุ
็
ี
48 49