หน่วยที่ 1ความรู้เบื้องต้นเกี่ยวกับการออกแบบเว็บไซต์

Logo หน่วยท่ี 1 ความรู้เบือ้ งต้นเกย่ี วกบั การออกแบบเวบ็ ไซต์ วชิ า การออกแบบและพฒั นาเวบ็ เพจ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์

Logo บทนา : การพฒั นาเวบ็ เพจ นับเป็ นศาสตร์หน่ึงทน่ี ักคอมพวิ เตอร์และผู้สนใจทจ่ี ะศึกษา เพื่อสร้างสรรค์ผลงาน ชิ้นงานผ่านเครือข่ายอนิ เตอร์เน็ต การ ออกแบบและพฒั นาเวบ็ เพจ สามารถทาได้หลายระบบ ขนึ้ อย่กู บั ลกั ษณะของข้อมูล ความชอบของผู้พฒั นา ตลอดจน กล่มุ เป้าหมาย ทต่ี ้องการนาเสนอ ดงั น้ันการศึกษาถงึ หลกั การ พฒั นาเวบ็ เพจจึงเป็ นสิ่งทจี่ าเป็ นและสาคญั อย่างยง่ิ www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo คาทีค่ วรรู้จักก่อนสร้างเวบ็ ไซต์ เวบ็ ไซต์ (Website) คือ ชุดของขอ้ มูลท่ีตอ้ งนำเสนอบนระบบ อินเตอร์เนต็ ประกอบดว้ ย เวบ็ เพจ (Web Page) ต้งั แต่ 1 หนำ้ ข้ึนไป เวบ็ เพจ (Webpage) คือ ไฟล์ HTML 1 ไฟลท์ ี่แสดงผลบน บรำวเซอร์นนั่ เอง โฮมเพจ(Homepage) คือ เวบ็ เพจหนำ้ แรกของเวบ็ ไซต์ หรือ เปรียบหนำ้ เหมือหนำ้ ปกหนงั สือ www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยคี อมพวิ เตอร์

ตัวอย่าง Logo Website Homepage Webpage วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์

Logo คาที่ควรรู้จกั ก่อนสร้างเวบ็ ไซต์ URL (Universal Resource Location) คือ มำตรฐำนในกำรกำหนด ที่อยขู่ องเวบ็ ไซตใ์ นเครือข่ำยอินเทอร์เน็ต หรือเรียกอีกอยำ่ งวำ่ ที่ อยขู่ องเวบ็ ไซต์ (Internet Address) เช่นhttp://www.hi.ac.th บรำวเซอร์ (Browser) คือ โปรแกรมแสดงเวบ็ เพจหรือหนำ้ เวบ็ ไซตท์ ่ีถูกสร้ำงข้ึนมำจำกภำษำ HTML เช่น Internet Explorer, Mozilla Firefox, Opera, Netscape www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยคี อมพวิ เตอร์

Logo คาทคี่ วรรู้จกั ก่อนสร้างเวบ็ ไซต์ (ต่อ) HTML(Hyper Text Markup Language)คือ ภำษำมำตฐำนที่ใช้ ในกำรสร้ำงเวบ็ เพจ เพื่อนำไปแสดงบนบรำวเซอร์ FTP (File Transfer Protocol) คือ โปรโตคอลหรือมำตรฐำน รูปแบบหน่ึงที่ใชใ้ นกำรรับ-ส่งขอ้ มูลระหวำ่ งเคร่ือง คอมพวิ เตอร์ผำ่ นเครือข่ำยอินเทอร์เน็ต www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์

Logo คาทค่ี วรรู้จกั ก่อนสร้างเวบ็ ไซต์ (ต่อ) เวบ็ เซิร์ฟเวอร์ (Web server) คือ เคร่ืองคอมพิวเตอร์เคร่ือง หน่ึงในเครือข่ำยอินเทอร์เนต็ ท่ีทำหนำ้ ที่เกบ็ รวบรวมเวบ็ ไซต์ ต่ำง ๆ เอำไว้ เพอ่ื ใหผ้ ชู้ มสำมำรถเขำ้ มำเปิ ดดูเวบ็ ไซตน์ ้นั ได้ ช่ือโดเมน (Domain name) คือ ชื่อท่ีใชอ้ ำ้ งถึงเวบ็ ไซตแ์ ทน IP Address เพอ่ื ใหจ้ ดจำไดง้ ่ำย โดยรูปแบบคือ ชื่อ.รหสั โดเมน www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์

รหสั โดเมน รู้จกั รหัสโดเมน Logo ตวั อย่าง ใช้สาหรับ com กลุ่มการค้าและเวบ็ ไซต์ทวั่ ไป Pantip.com edu สถาบันการศึกษา Ucla.edu gov หน่วยงานของรัฐทไ่ี ม่ใช่หน่วยงานทางการทหาร mil หน่วงงานทางการทหาร Nasa.gov Army.mil net หน่วยงานเกยี่ วกบั เครือข่าย Isp.net org หน่วยงานทไ่ี ม่หวงั ผลกาไร Unesco.org co.th บริษัททจ่ี ดทะเบยี นในประเทศไทย Infopress.co.th www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์

Logo โปรแกรมสร้างเวบ็ เพจ ❖เดิมการพฒั นาเวบ็ เพจจะใช้โปรแกรมประเภท Text Editor โดยผู้พฒั นาจะต้องศึกษาภาษา HTML(HyperText Markup Language) ซึ่งสร้างภาระให้แก่ผู้สนใจในกล่มุ ทไ่ี ม่ได้ศึกษาด้าน ไอทมี าโดยตรง ❖ดังน้ัน นักโปรแกรมเมอร์ จึงพฒั นา เคร่ืองมือพฒั นาเวบ็ เพจ มา เผยแพร่ให้กบั ผู้สนใจเพื่อเลือกใช้งาน www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยีคอมพวิ เตอร์

Logo เครื่องมือพฒั นาเวบ็ เพจ ❖การพฒั นาเวบ็ เพจด้วยการลงรหัส HTML ด้วยโปรแกรม Simple Text Editors ❖การพฒั นาเวบ็ เพจด้วยคาสั่ง Save as HTML… ❖การพฒั นาเวบ็ เพจด้วย Browser-Based HTML Editor ❖การพฒั นาเวบ็ เพจด้วยคาส่ัง Web Server/Developer Platforms ❖WYSIWYG HTML(What You See Is What You Get) www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo หลกั การออกแบบเวบ็ เพจ ❖หลกั การออกแบบ สามารถทาได้หลายระบบ ขนึ้ อยู่กบั ลกั ษณะ ของข้อมูล ความชอบของผู้พฒั นา ตลอดจนกล่มุ เป้าหมาย ที่ ต้องการนาเสนอ เช่น หากกล่มุ เป้าหมายเป็ นเดก็ วยั รุ่นและ นาเสนอข้อมูลเกยี่ วกบั ความบนั เทงิ อาจจะออกแบบให้มที ศิ ทางการไหลของหน้าเวบ็ เพจ ทห่ี ลากหลายให้ลกู เล่นได้มากกว่า เวบ็ ทน่ี าเสนอให้กบั ผู้ใหญ่ หรือเวบ็ ด้านวชิ าการ www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยีคอมพวิ เตอร์

Logo หลกั การออกแบบเวบ็ เพจ (ต่อ) สามารถแบ่งได้ 3 ลกั ษณะ ❖1. แบบลาดบั ข้นั (Hierarchy) เป็ นการจัดแสดงหน้าเวบ็ เรียงตามลาดับกงิ่ ก้านแตกแขนงต่อเน่ืองไปเหมือนต้นไม้กลบั หัว วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยคี อมพวิ เตอร์

Logo หลกั การออกแบบเวบ็ เพจ (ต่อ) 2. แบบเชิงเส้น (Linear) เป็ นการจดั แสดงหน้าเวบ็ เรียง ต่อเน่ืองไปในทิศทางเดยี ว www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo หลกั การออกแบบเวบ็ เพจ (ต่อ) ❖3. แบบผสม (Combination) เป็ นการจดั หน้าเวบ็ ชนิดผสม ระหว่างแบบลาดบั ข้นั และแบบเชิงเส้น www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo แนวคิดในกำรออกแบบ ❖เรียนรู้จากเวบ็ ไซต์ต่างๆ ❖ประยุกต์รูปแบบจากส่ิงพมิ พ์ ❖ใช้แบบจาลองเปรียบเทียบ ❖ออกแบบอย่างสร้างสรรค์ www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo หลกั ในกำรออกแบบเวบ็ ไซต์ ❖สร้างลาดับช้ันความสาคญั ขององค์ประกอบ ❖สร้างรูปแบบ บุคลกิ และสไตล์ ❖สร้างความสมา่ เสมอตลอดท้งั ไซต์ ❖จดั วางองค์ประกอบทส่ี าคญั ไว้ในส่วนบนของหน้าเสมอ ❖สร้างจุดสนใจด้วยความแตกต่าง ❖จดั แต่งหน้าเวบ็ ให้เป็ นระเบียบและเรียบง่าย ❖ใช้กราฟิ กอย่างเหมาะสม www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์

Logo สิ่งทตี่ ้องคานึงถึงในการออกแบบเวบ็ เพจทด่ี ี ❖1. ความแปลก ความแตกต่าง (Contrast) คือแยกความแตกต่างที่ อยู่บนจอภาพให้เหน็ ชัดเจน เช่นการใช้ตัวหนังสือ เส้น สี ขนาด ฯลฯ เพราะจะสามารถดงึ ดูดความสนใจได้ดี ❖2. การยา้ ซ้า (Repetition) คือแบบแผนหรือสไตล์ของผู้ออกแบบ จะต้องมลี กั ษณะรูปแบบ สอดคล้องกนั ท้งั หมด วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยคี อมพวิ เตอร์

Logo สิ่งทตี่ ้องคานึงถึงในการออกแบบเวบ็ เพจทดี่ ี(ต่อ) ❖3. การจดั แถว การวางแนว (Alignment) คือ การจดั วาง องค์ประกอบต่าง ๆ ต้องไม่สะเปะสะปะ ไร้เหตุผล ไม่ขดั กบั ความรู้สึก ของผู้อ่าน จัดให้ดูสะอาด ❖4. ความใกล้เคยี ง ความเกย่ี วเน่ือง (Proximity) คือ การจดั วาง องค์ประกอบทเี่ กย่ี วเน่ืองกนั ให้เป็ นกล่มุ ก้อนเดยี วกนั วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยีคอมพวิ เตอร์

Logo องค์ประกอบของการออกแบบเวบ็ ไซต์ ❖1. ความเรียบง่าย ❖2. ความสมา่ เสมอ ❖3. ความเป็ นเอกลกั ษณ์ ❖4. เนื้อหาทมี่ ปี ระโยชน์ ❖5. ระบบเนวเิ กชันทใี่ ช้งานง่าย ❖6.ลกั ษณะทนี่ ่าสนใจ หน้าตาของเวบ็ ไซต์จะต้องมคี วามสัมพนั ธ์ กบั คุณภาพขององค์ประกอบต่างๆ วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo องค์ประกอบของการออกแบบเวบ็ ไซต์ (ต่อ) ❖7. การใช้งานอย่างไม่จากดั ผู้ใช้ส่วนใหญ่สามารถเข้าถงึ ได้ มากท่ีสุด ❖8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียง เนื้อหาอย่างรอบคอบ ❖9.ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสาหรับกรอก ข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo กระบวนการสร้างและออกแบบเวบ็ เพจ 1. การวางแผน (Planning) ผสู้ ร้ำงเวบ็ จะตอ้ งรวบรวมขอ้ มูลท่ีตอ้ งกำรจะ นำมำสร้ำงเวบ็ กำหนดวตั ถุประสงคแ์ ละกลุ่มเป้ำหมำย 2. การออกแบบ (Design) กำรลงมือปฏิบตั ิ จดั พมิ พเ์ น้ือหำ และ คุณลกั ษณะอื่นที่ตอ้ งใชใ้ นเวบ็ กำรออกแบบกจ็ ะเนน้ ที่กำรจดั หนำ้ จอ ของเวบ็ ใหส้ อดคลอ้ งกนั 3. การพฒั นา (Development) เนน้ ไปท่ีกำรตกแต่งและเสริมเครื่องมือต่ำง ๆ สำหรับเวบ็ วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยคี อมพวิ เตอร์

Logo กระบวนการสร้างและออกแบบเวบ็ เพจ 4. การติดต้ัง (Publishing) กำรนำเวบ็ ที่ไดส้ ร้ำงข้ึนเขำ้ ไปติดต้งั ในเวบ็ เซอร์เวอร์เพื่อใหแ้ สดงผลไดใ้ นระบบอินเทอร์เนต็ หรือจะเรียกวำ่ กำร อบั โหลด (Up load) 5. การบารุงรักษา (Maintenance) เป็นข้นั ตอนประเมินผลและติดตำมผล กำรติดต้งั เวบ็ ไซตว์ ำ่ มีขอ้ ขดั ขอ้ งหรือตอ้ งปรับปรุงเปล่ียนแปลงเวบ็ เพิม่ เติมใหท้ นั สมยั อยเู่ สมอ อำจจะเรียกไดว้ ำ่ ข้นั ตอนกำรอบั เดท (Up date) วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์

Logo กำรกำหนดชื่อไฟล์ และนำมสกุลของไฟลเ์ อกสำรเวบ็ ❖ควรใช้ตวั อกั ษร a - z หรือตวั เลข 0 - 9 หรือผสมกนั ❖ตวั อกั ษร a - z ควรเป็ นตวั พมิ พ์เลก็ ❖ห้ามต้งั ชื่อไฟล์เป็ นภาษาไทย ❖ช่ือไฟล์แรกของเอกสารเวบ็ มกั จะใช้ช่ือ index หรือ default www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยีคอมพวิ เตอร์

Logo ขั้นตอนการพฒั นาเวบ็ เพจ • วางแผนการพฒั นาเวบ็ เพจ • กาหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้ เกบ็ เอกสารเวบ็ • สร้างภาพ หรือจดั หาภาพท่เี กย่ี วข้องกบั เนื้อหา แล้วจดั เกบ็ ไว้ ในไดเร็กทรอร่ีทีส่ ร้างไว้ www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยคี อมพวิ เตอร์

Logo ขน้ั ตอนการพฒั นาเวบ็ เพจ • วางแผนการพฒั นาเวบ็ เพจ • กาหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ทใี่ ช้เกบ็ เอกสารเวบ็ • สร้างภาพ หรือจดั หาภาพทเ่ี กยี่ วข้องกบั เนื้อหา แล้วจดั เกบ็ ไว้ในไดเร็กทรอร่ีทสี่ ร้างไว้ • สร้างเอกสารเวบ็ โดยกาหนดช่ือไฟล์เอกสารเวบ็ ตามข้อกาหนดของผู้ดูแลระบบ เครือข่าย (Web System Administrator) และจดั เกบ็ ไว้ในไดเร็กทรอรี่ทส่ี ร้างไว้ • ตรวจสอบผลเอกสารเวบ็ ผ่านเบราเซอร์ • ส่งข้อมูลขนึ้ เคร่ืองแม่ข่าย (Server) และทาการตรวจสอบผลการเรียกดูจากเคร่ืองแม่ข่าย www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยีคอมพวิ เตอร์

Logo หลกั เกณฑใ์ นกำรเลือกภำพ Graphic ❖ ขนาดไฟล์ไม่ควรเกนิ 80 กโิ ลไบต์ เพื่อความรวดเร็วในการแสดงผล ❖ ใช้ไฟล์แบบ JPEG สาหรับรูปถ่าย หรือรูปทม่ี สี ีเกนิ 256 สี ❖ ใช้ไฟล์แบบ GIF สาหรับภาพวาดหรือภาพการ์ตูนทม่ี ีสีไม่เกนิ 256 สี ❖ เลือกภาพทม่ี คี วามน่าสนใจและดึงดูด เพื่อไม่ให้เสียเวลาทเ่ี สียไปในการ Download ❖ ภาพเปล่าประโยชน์ www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo ไฟลภ์ ำพกรำฟิ กท่ีนำมำใชใ้ นกำรทำเวบ็ ❖ไฟล์ฟอร์แมต JPG, JPEG ❖ไฟล์ฟอร์แมต GIF ❖ไฟล์ฟอร์แมต PNG www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo ไฟลส์ กลุ JPG (Joint Photographer’s Experts Group) ❖จุดเด่น ▪ แสดงสีไดส้ ูงสุด16.7 ลำ้ นสี (สนบั สนุนสีไดถ้ ึง 24 bit) ▪ สำมำรถกำหนดคำ่ กำรบีบไฟลไ์ ดต้ ำมที่ตอ้ งกำร ▪ มีระบบแสดงผลแบบหยำบและค่อยๆ ขยำยไปสู่ละเอียดในระบบ Progressive ▪ มีโปรแกรมสนบั สนุนกำรสร้ำงจำนวนมำก ▪ เรียกดูไดก้ บั Graphics Browser ทุกตวั ▪ ต้งั คำ่ กำรบีบไฟลไ์ ด้ (compress files) ❖จุดดอ้ ย ▪ ทำใหพ้ ้ืนของรูปโปร่งใสไม่ได้ วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์ www.themegallery.com

Logo ไฟลส์ กลุ GIF (Graphics Interlace File) ❖ จุดเด่น ▪ แสดงสีไดส้ ูงสุด 256 สี ▪ สำมำรถใชง้ ำนขำ้ มระบบ (Cross Platform) หมำยควำมวำ่ คอมพวิ เตอร์ทุก ระบบ ไม่วำ่ จะใช้ Windows, Unix กส็ ำมำรถเรียกใชไ้ ฟลภ์ ำพสกลุ น้ีได้ ▪ มีขนำดไฟลต์ ่ำ จำกเทคโนโลยกี ำรบีบอดั ภำพ ทำใหส้ ำมำรถส่งไฟลภ์ ำพได้ รวดเร็ว ▪ สำมำรถทำพ้นื ของภำพใหเ้ ป็ นพ้นื แบบโปร่งใสได้ (Transparent) ▪ มีระบบแสดงผลแบบหยำบและคอ่ ยๆ ขยำยไปสู่ละเอียดในระบบ Interlace ▪ มีโปรแกรมสนบั สนุนกำรสร้ำงจำนวนมำก ▪ เรียกดูไดก้ บั Graphics Browser ทุกตวั ▪ ควำมสำมำรถดำ้ นกำรนำเสนอแบบภำพเคล่ือนไหว (GIF Animation) www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยคี อมพวิ เตอร์

Logo ไฟลส์ กลุ GIF (Graphics Interlace File) ❖จุดดอ้ ย ▪ ไฟลช์ นิดน้ีก็มีจุดดอ้ ยในเรื่องของกำรแสดงสี ซ่ึงแสดงไดเ้ พียง 256 สี ทำให้ กำรนำเสนอภำพถ่ำย หรือภำพที่ตอ้ งกำรควำมคมชดั หรือ ภำพสดใส จะตอ้ งอำศยั ฟอร์แมตอื่น www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo ไฟลส์ กลุ PNG (Portable Network Graphics) ❖จุดเด่น ▪ แสดงสีไดส้ ูงสุด 16.7 ลำ้ นสี ▪ สนบั สนุนสีไดถ้ ึงตำมค่ำ True color (16 bit, 32 bit หรือ 64 bit) ▪ สำมำรถกำหนดคำ่ กำรบีบไฟลไ์ ดต้ ำมที่ตอ้ งกำร ▪ มีระบบแสดงผลแบบหยำบและค่อยๆ ขยำยไปสู่ละเอียด (Interlace) ▪ สำมำรถทำพ้ืนโปร่งใสได้ www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo ไฟลส์ กลุ PNG (Portable Network Graphics) ❖จุดดอ้ ย ▪ หำกกำหนดคำ่ กำรบีบไฟลไ์ วส้ ูง จะใชเ้ วลำในกำรคลำยไฟลส์ ูงตำม ไปดว้ ย แต่ขนำดของไฟลจ์ ะมีขนำดต่ำ ▪ ไม่สนบั สนุนกบั Graphic Browser รุ่นเก่ำ สนบั สนุนเฉพำะ IE 4 และ Netscape 4 ▪ ควำมละเอียดของภำพและจำนวนสีข้ึนอยกู่ บั Video Card ▪ โปรแกรมสนบั สนุนในกำรสร้ำงมีนอ้ ย www.themegallery.com วชิ า การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยคี อมพวิ เตอร์

Logo กำรออกแบบระบบเนวิเกชนั ❖ระบบเนวเิ กชันแบบลาดบั ข้นั (Hierarchical) ❖ระบบเนวเิ กชันแบบโกลบอล (Global) ❖ระบบเนวเิ กชันแบบโลคอล (Local) ❖ระบบเนวเิ กชันเฉพาะท่ี (Ad Hoc) www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยคี อมพวิ เตอร์

Logo HTML (Hyper Text Markup Language) HTML เป็ นภาษาทใี่ ช้ในการพฒั นาเวบ็ เพจ เพื่อให้ โปรแกรมเวบ็ บราวเซอร์ (web brower) ต่างๆ สามารถ แปลงคาส่ัง แสดงผลในลกั ษณะของรูปภาพ ตวั อกั ษร เสียง ภาพเคลื่อนไหว โดยไฟล์ที่สร้างจะมีนามสกลุ .html หรือ .htm กไ็ ด้ www.themegallery.com วิชา การออกแบบและพฒั นาเวบ (3128-2016) แผนกวชิ าเทคโนโลยีคอมพวิ เตอร์

Logo HTML (Hyper Text Markup Language) <html> <HTML> หมายถงึ การระบุว่าเอกสารใช้ภาษา <head> HTML และบรรทดั สุดท้ายจะต้องมี </HTML> <title>Hello</title> <HEAD> เพ่ือระบุช่ือเวบ็ เพจ โดยจะต้องใช้คาสั่ง </head> <TITLE> เป็ นตัวบอก และบรรทดั สุดท้ายจะต้องมี <body> </TITLE> </HEAD> <p>สวสั ดี</p> </body> <body> เปิ ดส่วนเนื้อหา </body> </html> www.themegallery.com วิชา การออกแบบnแeละxพt ฒั นาเวบ (3128-2016) แผนกวิชาเทคโนโลยีคอมพวิ เตอร์

Logo Tag Tag เป็ นลกั ษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคาส่ัง หรือการลงรหสั คาส่ัง HTML ภายในเคร่ืองหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลกั ษณะ คือ ▪ Tag เดย่ี ว เป็ น Tag ท่ีไมต่ อ้ งมีกำรปิ ดรหสั เช่น <P>, <HR> เป็ นตน้ ▪ Tag เปิ ด/ปิ ด เป็ น Tag ที่ประกอบดว้ ย Tag เปิ ด และ Tag ปิ ด โดย Tag ปิ ด จะมี เครื่องหมำย slash (/) นำหนำ้ คำสง่ั ใน Tag น้นั ๆ เช่น <B>…</B>, <P>…</P> เป็ นตน้ วิชา การออกแบบและพฒั นาเวบ (3128-2016) www.themegallery.com แผนกวิชาเทคโนโลยคี อมพวิ เตอร์