เอกสารประกอบการสอน รายวิชา การโปรแกรมเว็บเบื้องต้น-full

รายวชิ า การโปรแกรมเวบ็ เบื้องตน จดั ทาํ โดย นางสาววริ ยา สขี าว 1

รายวชิ า การโปรแกรมเวบ็ เบ้ืองตน จดั ทําโดย นางสาววริ ยา สีขาว คาํ นาํ 2 เอกสารประกอบการสอนนีจัดทําขึนเพื อให้นักศึกษาได้ศึกษาและปฏิบัติเกียวกับ หลักการโปรแกรมเว็บเบืองต้น หลักการระบบเว็บไซต์ (Client-Server) การเขียนโปรแกรม รองรับการแสดงผลฝงไคลเอนต์ (Front-end) เรียนรู้และจัดการองค์ประกอบต่าง ๆ ของ เว็บไซต์(Element) เบืองต้น และการเขียนโปรแกรมประมวลผลฝงเซิร์ฟเวอร์ (Back-end) เบืองต้น คําสังพื นฐาน ตัวแปรตัวดําเนินการ เงือนไขและการทําซํา การจัดการด้านเวลา การ สร้างและจัดการไฟล์ การสรา้ งและใช้งานฟงกช์ นั เบอื งต้น การอพั โหลดไฟลข์ นึ เซิร์ฟเวอร์ ซึงใช้ ภาษา HTML5 และ ภาษา PHP อา้ งองิ แหลง่ ข้อมูลจาก https://www.w3schools.com นางสาววริ ยา สีขาว ผูจ้ ัดทาํ

รายวิชา การโปรแกรมเวบ็ เบอ้ื งตน จดั ทําโดย นางสาววริ ยา สขี าว 3 สารบัญ หนา้ คําอธบิ ายรายวชิ า 3 ความร้เู บืองตน้ เกียวกับเวบ็ ไซต์ 4 การวางแผนและออกแบบเวบ็ ไซต์ 8 ภาษา HTML 23 HTML Headings 28 HTML Paragraphs 29 HTML Style 32 HTML List 34 HTML colors 39 HTML Style-CSS 50 HTML Links 60 HTML Tables 69 HTML Iframes 84 HTML Block and Inline Elements 87 HTML Media 89 HTML Layout Elements and Techniques 95 HTML Forms 107 ภาษา PHP 118

รายวชิ า การโปรแกรมเวบ็ เบื้องตน จดั ทําโดย นางสาววิรยา สีขาว 4 รหัสวชิ า 30900-0001 1-4-3 โดย นางสาววริ ยา สีขาว หลักสูตรประกาศนียบตั รวิชาชพี ชันสงู พุ ทธศกั ราช 2563 ประเภทวิชาเทคโนโลยีสารสนเทศและการสอื สาร สาขาวชิ าเทคโนโลยีสารสนเทศ ประกาศนยี บตั รวชิ าชพี ชันสูง (ปวส.) จาํ นวน 3 หนว่ ยกติ 5 ชัวโมง/สัปดาห์ จํานวนชัวโมง รวม 90 ชัวโมง ---------------------------------------------------------------------------------------------- ----------------------- คาํ อธิบายรายวิชา ศึกษาและปฏิบัติเกียวกับหลักการโปรแกรมเว็บเบืองต้น หลักการระบบเว็บไซต์ (Client-Server) การเขียนโปรแกรมรองรับการแสดงผลฝงไคลเอนต์ (Front-end) เรียนรู้ และจัดการองค์ประกอบต่าง ๆ ของเว็บไซต์(Element) เบืองต้น และการเขียนโปรแกรม ประมวลผลฝงเซิร์ฟเวอร์ (Back-end) เบืองต้น คําสังพื นฐาน ตัวแปรตัวดําเนินการ เงือนไข และการทําซํา การจัดการด้านเวลา การสร้างและจัดการไฟล์ การสร้างและใช้งานฟงก์ชัน เบืองตน้ การอัพโหลดไฟล์ขนึ เซริ ์ฟเวอร์ จุดประสงคร์ ายวชิ า เพื อให้ 1. มีความรคู้ วามเขา้ ใจเกียวกบั การโปรแกรมเว็บเบอื งตน้ 2. สามารถพั ฒนาการโปรแกรมเวบ็ เบอื งตน้ 3. มีกิจนิสัยในการทํางานด้วยความประณีต รอบคอบและปลอดภัย ตระหนักถึงคุณภาพ ของงานและมจี ริยธรรมในงานอาชพี สมรรถนะรายวิชา 1. แสดงความรูเ้ กียวกับการโปรแกรมเว็บเบอื งตน้ 2. ตดิ ตงั เครอื งมอื สาํ หรับการโปรแกรมเวบ็ เบอื งตน้ 3. เขียนโปรแกรมเว็บ 4. ทดสอบโปรแกรมและแกไ้ ขข้อผิดพลาด

รายวชิ า การโปรแกรมเวบ็ เบอื้ งตน จัดทาํ โดย นางสาววิรยา สีขาว 5 ประวัตคิ วามเปนมา อนิ เทอรเ์ นต็ มจี ดุ เรมิ ต้นมาจากเหตุผลทางการทหาร เนอื งจากในยคุ สงครามเยน็ เมอื ประมาณ พ.ศ.2510 (ค.ศ. 1969) ระหวา่ งฝายคอมมิวนิสต์ และฝายเสรปี ระชาธปิ ไตย ซงึ นําโดย สหรฐั อเมรกิ า โดยต่างฝาย ตา่ งกก็ ลวั ขีปนาวุธ ของอีกฝายหนงึ โดยผนู้ าํ สหรฐั อเมรกิ า วติ กวา่ ถา้ หากทางฝายรฐั เซีย ยงิ ขปี นาวุธนวิ เคลยี รเ์ ข้ามา ถลม่ จดุ ยทุ ธศาสตร์บางจดุ ของตนเองขึนมา อาจจะทําใหค้ อมพิ วเตอร์ ทีเชอื มตอ่ กันเสยี หายได้ จึงได้สงั ให้มีการวจิ ัย เพือสร้างเครอื ข่าย คอมพิ วเตอร์ ชนิดใหมข่ นึ มา เพือปองกนั ความเสยี หาย โดยมจี ุดประสงคว์ ่า ถ้าคอมพิ วเตอร์ เครืองใดเครืองหนึง ถกู ทําลาย แตเ่ ครืองอืนกจ็ ะตอ้ งใช้งานตอ่ ไปได้ หนว่ ยงานทีทําหนา้ ทดี แู ล ระบบเครอื ขา่ ย ในขณะนันมีชอื วา่ ARPA (Advanced Research Projects Agency) ดังนันชอื เครอื ข่ายในขณะนัน จงึ ถูกเรยี กว่า ARPANET ตอ่ มาในป พ.ศ. 2547 เครอื ข่ายขยายใหญ่โต เพิมมากขึน จากการระดม นกั วิจัยเพือสร้างมาตรฐานใหมข่ นึ มา เพือความเหมาะสม จึงได้ มาตรฐาน TCP/IP และนอกจากประโยชน์ด้านงานวิจัย และทางทหารแลว้ ยงั ได้นาํ มาใช้ ประโยชนท์ างดา้ นธรุ กจิ และการพาณชิ ย์อกี ดว้ ย ต่อมาในป พ.ศ.2532ไดเ้ ปลียนชอื เปน เครอื ขา่ ยอนิ เทอร์เนต็ และนํามาใชป้ ระโยชน์ ในการติดต่อขอ้ มูลข่าวสารมากมาย สาํ หรบั ใน ประเทศไทยได้มีการเริมตน้ ติดตงั ระบบอนิ เทอร์เนต็ เปนครังแรกทีมหาวทิ ยาลัยสงขลานครนิ ทร์ วทิ ยาเขตหาดใหญ่ เพือใชใ้ นการศกึ ษาของมหาวิทยาลัยโดยติดตอ่ กับสถาบนั เทคโนโลยแี หง่ เอเชียโดยเชอื มตอ่ เครืองมนิ คิ อมพิ วเตอร์ เพือรบั สง่ จดหมายอเิ ลก็ ทรอนกิ ส์ กบั มหาวิทยาลยั เมลเบิรน์ ประเทศออสเตรเลีย ในป พ.ศ.2530 ต่อมากระทวงวทิ ยาศาสตรเ์ ทคโนโลยีและพลงั งาน ไดม้ อบหมายให้ ศูนย์เทคโนโลยี อเิ ล็กทรอนิกสแ์ ละคอมพิวเตอรแ์ หง่ ชาต(ิ NECTEC) ใหท้ นุ สนับสนนุ แกส่ ถาบนั เทคโนโลยีพระ จอมเกลา้ เจ้าคุณทหารลาดกระบัง เพือศกึ ษา เชอื มต่อคอมพิวเตอร์ของสถาบนั การศึกษาของ รฐั โดยมีชอื วา่ เครือข่ายไทยสาร (Thai Social/Scientific Academic and Research Network : ThaiSARN) และมหาวทิ ยาลัยดา้ นวทิ ยาศาสตร์ 12 แหง่ เข้าเปนเครือข่ายเดียวกนั เมอื พ.ศ. 2531 หลงั จากนนั จฬุ าลงกรณม์ หาวทิ ยาลัย ไดเ้ ปนเกตเวยอ์ ินเทอรเ์ นต็ ในประเทศ ไทยและเรมิ ใหบ้ ริการทางอนิ เทอร์เนต็ เต็มรปู แบบในเดือนกรกฎาคม พ.ศ. 2535 และต่อมาเมอื ป พ.ศ.2537 การสอื สารแหง่ ประเทศไทย รว่ มลงทุนกับหนว่ ยงานของรัฐ และเอกชน เปด ใหบ้ รกิ ารอินเทอร์เนต็ เชิงพาณิชย์ 2 รายคือบริษทั อินเทอรเ์ น็ตประเทศไทย จํากัด และบรษิ ัท อินเทอรเ์ นต็ คอมเมอรเ์ ชียล แอนด์โนวเ์ ลจเซอรว์ สิ จํากดั ภายหลังเปลยี นชอื เปน KSC คอม

รายวิชา การโปรแกรมเว็บเบือ้ งตน จัดทาํ โดย นางสาววริ ยา สขี าว เมอร์เชียลอนิ เทอรเ์ นต็ จาํ กัด ThaiSarn ในระยะแรก มหาวิยาลัยสงขลานครนิ ทร์ จุฬาลงกรณ์ 6 มหาวทิ ยาลัย สถาบันเทคโนโลยแี หง่ เอเชีย (AIT) มหาวิทยาลัยธรรมศาสตร์ และ มหาวิทยาลยั เกษตรศาสตร์ ในป พ.ศ. 2538 ได้มีการบริการอนิ เทอร์เนต็ เชิงพาณิชย์ขนึ โดย บริษทั อินเทอร์เนต็ ไทยแลนด์ (Internet Thailand) เปนผใู้ หบ้ รกิ ารอินเทอร์เนต็ (Internet Service Provider: ISP) เปนบริษัทแรก Internet Service Provider (ISP) ISP หรอื Internet Service Provider คือ หนว่ ยงานหรือบรษิ ทั ฯ ทีใหบ้ ริการอนิ เตอร์เนต็ ซงึ ในประเทศไทยจะมเี พี ยงไม่กีรายเทา่ นนั โดยจะแบ่งแยกการใหบ้ ริการอนิ เตอรเ์ นต็ หลกั ๆ ออกเปน 2 ประเภท คอื อินเตอรเ์ นต็ ตามบา้ น และ อินเตอรเ์ นต็ สาํ หรบั หนว่ ยงานทางธุรกิจและ องคก์ รตา่ งๆ TCP/IP การเชอื มโยงตอ่ เครือขา่ ยยอ่ ยจํานวนมาก จะเชอื มโยงการสอื สารระหว่างกนั ดว้ ยระบบมาตรฐาน การควบคุม การส่งผ่านขอ้ มลู ระหวา่ งเครอื ข่ายทเี รยี กว่า โปรโคตอล ทซี ีพี/ไอพี (TCP/IP : transmission control protocol / internet protocol) ซงึ ใชห้ ลักการรบั ส่งข้อมลู โดย อสิ ระ โดยแบ่งเวลาอยา่ งเทา่ เทียมกัน IP Address มาตรฐานการรับส่งข้อมูลโดยใชโ้ ปรโตคอล TCP/IP นัน เครืองคอมพิ วเตอร์ทกุ เครอื งที เชือมต่อกันนันจะต้องมีหมายเลขประจําตัว เพื อใช้เปนหมายเลขตําแหน่งสําหรับอ้างอิง เปรียบเทียบกับ หมายเลขประจาํ ตวั ประชาชน โดยเรียกว่า หมายเลขไอพี (IP Address) ในแต่ ละเครอื งตอ้ งมีเลขทีไม่ซํากัน หมายเลขไอพี ประกอบด้วยเลขฐานสอง จํานวน 4 ชุด ชุดละ 8 บิตรวมทังหมด 32 บิต หรือ 4,294,967,296 หมายเลข ตังแต่ 0.0.0.0 ถึง 255.255.255.255 Domain name system :DNS เปนระบบของชือทีใช้เรียกแทนการเรียกหมายเลขไอพี ซึงยุ่งยากแก่การจดจําในการใช้ งานระบบเครอื ขา่ ยอินเตอร์เน็ต จึงได้พั ฒนาระบบชือทีเปนอักษรแทนระบบหมายเลขไอพี ช่วย ให้สะดวกกับผู้ใช้งานในระบบ แต่ระหว่างเครืองคอมพิ วเตอร์ยังคงใช้หมายเลขไอพี ในการ ติดต่อสือสารกัน โดยจะมีเครืองคอมพิ วเตอร์ทีทําหน้าทีเปลียนระหว่างระบบหมายเลขไอพี กับ ระบบชอื โดเมน เรียกวา่ โดเมนเนม เซริ ฟ์ เวอร์ (Domain Name Server)โดยแต่ละประเทศจะ มีหน่วยงานรับผิดชอบการจดทะเบียนชือโดเมน ประเทศไทยหน่วยงานทีรับผิดชอบการดูแลชือ โดเมน คือ ศูนย์สารสนเทศเครือข่ายประเทศไทย (THNIC,Thailand NetworkInformation Center)

รายวิชา การโปรแกรมเว็บเบือ้ งตน จดั ทาํ โดย นางสาววิรยา สขี าว เทคโนโลยีเว็บเพจ : Html อกั ษรวเิ ศษของทมิ 7 WWW ถูกพั ฒนาขึนมาครงั แรกในป ค.ศ.1989 โดย ทมิ เบอรเ์ นอรส์ -ลี (Tim Berners-Lee) แหง่ ศูนยป์ ฏบิ ัติการวิจัยทางอนภุ าคฟสกิ สข์ องยุโรป (CERN) ซงึ ตงั อยู่ทีกรุง เจนีวา สวิตเซอรแ์ ลนด์ ในครังแรก ทมิ เพี ยงคิดอาํ นวยความสะดวกให้แก่บรรดา นักวิทยาศาสตร์ของสถาบันให้คน้ หาข้อมูลง่ายขนึ จงึ คิดประดิษฐ์ตวั อักษรทีมีความสามารถใน การสอื สารขอ้ มลู ได้ เรยี กวา่ \"ไฮเปอรเ์ ท็กซ์\" (Hypertext) Browser เมือได้ตัวอักษรทีมีคุณสมบัติพิ เศษแล้ว สิงทีพั ฒนาขึนต่อจากไฮเปอร์เทกซ์ก็คือ เครืองมือสําหรับอ่านตัวอักษรทีเขาประดิษฐ์ขึน และเรียกเครืองมือนีว่า \"บราวเซอร์\" (Browser) เพี ยง 3 ปหลังจากกําเนิดไฮเปอร์เท็กซ์ขึนมา โปรแกรมบราวเซอร์ตัวแรกชือ Mosaic ซึงทํางานบนระบบ X-Windows ก็สร้างปรากฏการณ์ใหม่ขึนมาในระบบการสือสาร ข้อมูลบนอินเทอร์เน็ต และยังเปนแม่แบบของบราวเซอร์ตัวอืนๆ เช่น Netscape Communicator, Internet Explorer, Opera, Firefox, Mozilla เปนต้น ก่อให้เกิดกระแส โลกไร้พรมแดนขนึ มาจนถงึ ปจจุบัน โปรแกรมชว่ ยสร้างเว็บเพจ แบง่ เปน 2 กลุ่ม คือ 1. โปรแกรมช่วยในการเขียนดว้ ยภาษา Html เชน่ Notepad, EditPlus , Html Assistant, Homesite, Coffeecup, ThaiHtml ขอ้ ดีคือ ใหผ้ ลตรงกบั ทผี อู้ อกแบบต้องการมากทีสุด มี ไฟล์เล็กกว่า แต่กต็ ้องจดจําคําสังภาษา HTML 2. โปรแกรมช่วยในการเขยี นแบบเหน็ อย่างไรไดอ้ ย่างนัน (WYSIWYG :What You See It, What You Get) โปรแกรมทีนิยมใชค้ ือ FrontPage ,Dreamweaver, NamoWebEditor เปนตน้ ขอ้ ดี สามารถทาํ ได้ง่าย คําสงั พื นฐานของภาษา HTML มดี งั นี 1. HTML (ยอ่ มาจาก Hyper Text Markup Language) เปน ภาษาทีใชส้ าํ หรับสรา้ งเว็บเพจ มโี ครงสร้างประกอบไปด้วย tag และ attribute ตา่ งๆ ทใี ช้ ในการควบคมุ การแสดงผลของข้อความ รปู ภาพ หรอื วตั ถอุ ืน ๆ ภาษา HTML นันเปนภาษา ประเภท Markup ไมจ่ ัดเปนภาษาประเภท Programming สามารถทีจะเรยี นรูไ้ ด้ง่าย

รายวิชา การโปรแกรมเว็บเบ้อื งตน จัดทําโดย นางสาววิรยา สขี าว 2. CSS (ย่อมาจาก Cascading Style Sheets) 8 เปนภาษาทีมรี ปู แบบการ เขียน Syntax ทีเฉพาะ ถกู กําหนดขนึ เพือใช้เสริมภาษา HTML ให้สามารถจดั รปู แบบการแสดงผลใหก้ บั เอกสาร HTML ไดส้ มบูรณ์แบบมากขนึ 3. XHTML (ย่อมาจาก Extensible HyperText Markup Language) เปน มาตรฐานใหม่ของ HTML คาํ สงั ตา่ งๆนนั กย็ งั เหมือนกับ HTML แต่จะมคี วาม เขม้ งวดในเรืองโครงสรา้ งภาษามากกวา่ และมีการตัด tag และ attribute ทีลา้ สมยั ออกไป ชนิดของภาษาของเวบ็ ไซต์ Static Website : เว็บไซตท์ ีตอบสนองทางเดยี ว ไม่มีการติดต่อกับฐานข้อมูล และไม่สามารถ เก็บข้อมูลได้ เปนการนําเสนอข้อมูลแบบทางเดียว เหมือนกับการอ่านหนังสือ ซึงเว็บไซต์จะ พั ฒนาด้วย HTML หรือ DHTML เปนหลัก และเนืองจาก Static Website มีการนําเสนอ ข้อมูลแบบตายตัวนีเอง ไม่เปนทีสนใจของผพู้ บเห็น ปจจบุ ันไม่คอ่ ยเหน็ เว็บไซต์ประเภทนีมากนัก เนืองจากไม่สามารถบริหารข้อมูลได้สะดวก จึงทําให้เว็บไซต์ทีพั ฒนาด้วยวิธีนี ไม่ค่อยประสบ ความสําเร็จ และปดตวั เองไป หรือพั ฒนาใหม่ในรปู แบบ Dynamic Website Dynamic Website: เว็บไซต์ทีสามารถตอบสนองระหว่างผู้ใช้กับเว็บไซต์ได้ มีการติดต่อและ เก็บข้อมูลลงในฐานข้อมูล ซึงเว็บไซต์จะพั ฒนา ด้วย Web Programming (ASP, PHP, ASP.net, อืนๆ) อาจกล่าวได้ว่า Dynamic Website เปนเว็บไซต์ทีมีระบบจัดการข้อมูล (ฺ Backoffice) สําหรับให้ผู้ใช้สามารถแก้ไขข้อมูลได้โดยง่ายผ่านทาง Login ในหน้าเว็บไซต์ โดย ผู้ใช้จะได้รับ Username และ Password ส่วนตัวสําหรับเข้าไปแก้ไขข้อมูล ในฐานะ Administrator รูปแบบของเว็บไซต์ประเภทนี มีตังแต่รูปแบบของ ร้านค้าออนไลน์ (E- Commerce), เว็บข่าว หรือแม้แต่ Corporate Website ทีเน้นการสร้างความน่าเชือถือ และ ให้ขอ้ มลู ทีรวดเร็วแก่ลกู ค้า เชน่ ราคา โปรโมชนั ตา่ งๆ Active Web Document: เว็บเพจพวกนีเปนเวบ็ เพจทีมสี ่วนของ Java Applet, Active X เปนตน้ โดยสว่ นใหญ่จะเนน้ Java เปนหลัก(De Facto Standard) Active Web Document มลี ักษณะเดน่ คอื การโหลด เว็บจะเปนการโหลด ซอร์สโปรแกรม มาประมวล ที เครืองไคลเอ้น (Web Browser) ดว้ ย Web Browser ต้องมีตวั ประมวลผล ซอร์สโปรแกรม เช่น Java Runtime หรอื อนื ๆ นอกเหนือจาก HTML สามารถเขยี นซอรส์ โปรแกรม ให้ รีเฟรช เฉพาะขอ้ มูลได้ โดยไมต่ อ้ งโหลดหน้าเวบ็ มาใหมเ่ หมอื น Dynamic Web เมอื ประมวลผลผา่ น Web Browser ซอร์สโปรแกรม สามารถทําไดท้ กุ อย่างภายในกรอบที Java Runtime กําหนด พั ฒนายากกวา่ ทังสองแบบ

รายวิชา การโปรแกรมเวบ็ เบือ้ งตน จดั ทําโดย นางสาววริ ยา สขี าว 9 โครงสรา้ งและการออกแบบเวบ็ ไซน์ อยากเปนเว็บมาสเตอร์ตอ้ งเตรยี มตัวอยา่ งไร • ศึกษาข้อมลู เกียวกับขนั ตอนและองคป์ ระกอบในการพั ฒนาบรหิ ารและดแู ลเวบ็ ไซต์ • เพิมเตมิ ความร้ใู นเรืองของเครอื งมือต่างๆ ทีใช้ในการพั ฒนาเว็บไซต์ • คน้ ควา้ หาแนวคดิ ใหมๆ่ เทคนิควธิ กี ารนําเสนอใหมๆ่ หรอื แนวโนม้ ของการพัฒนาเว็บไซต์ ในอนาคต • เขา้ ใจจุดเดน่ และจุดด้อยของเทคโนโลยี ตลอดจนสามารถปรบั ให้เขา้ กับสภาพทีเหมาะสม ทีสุดได้ ในการจดั การเวบ็ ไซตต์ อ้ งมกี ารออกแบบโครงสรา้ งของเว็บไซต์ก่อนทุกครงั เพือ กอ่ ให้เกิดความแน่นอนและครบองคป์ ระกอบเว็บ ซงึ กระบวนการในการสรา้ งและออกแบบ เว็บจะมกี ระบวนการพืนฐานอยดู่ ว้ ยกนั 6 ขนั ตอนคือ 1. การวางแผน (Planning) เปนขนั ตอนรวบรวมข้อมูล 2. การออกแบบ (Design) ลงมอื วาด 3. การพั ฒนา(Development)ใช้โปรแกรม 4. Upload สู่ Internet 5. Promote เว็บไซต์ใหเ้ ปนทีรู้จัก 6. การบํารุงรกั ษา (Maintenance) ตดิ ตามดูผล การออกแบบและพั ฒนาเว็บเพจ • จัดระบบขอ้ มลู – จดั กล่มุ และระบบชอื เนอื หา • จัดทําโครงสรา้ งข้อมูล – จดั ทํารายการโครงสร้างของไซท์ – จดั ทาํ แผนผังโครงสร้างเวบ็ ไซท์ – วางแนวทางการเคลอื นทภี ายในเว็บไซท์ – สร้างระบบเนวิเกชนั • Interface Design – สร้างแบบจาํ ลองรายละเอียดขอ้ มูลในหนา้ เว็บ – จัดแบ่งพืนทีในหนา้ เวบ็ (Page Layout) – ออกแบบโครงร่างหน้าเวบ็ เพจ (Design Sketch)

รายวชิ า การโปรแกรมเว็บเบอื้ งตน จดั ทําโดย นางสาววริ ยา สีขาว ขันตอนการพั ฒนาเวบ็ เพจ 10 การจัดระบบขอ้ มลู ในเวบ็ ไซต์ • วางแผน/กําหนดหวั ขอ้ และเนือหาทีจะนาํ เสนอ • สรา้ งความสมั พั นธ์ของขอ้ มูล แบบรากตน้ ไม้ Home Page ประวตั ิ ผลงาน งานอดิเรก • กําหนดไดเรกทรอร/ี โฟลเดอร์ (Directory/folder) • มีการจดั เกบ็ ทีเปนระบบ/ระเบยี บ • สามารถเรียกใชง้ านได้สะดวก • ตอ้ งเปนการจดั เกบ็ ทีเหมาะสม ไม่มโี ฟลเดอรม์ ากเกนิ ไป หรอื นอ้ ยเกินไป ดคู วาม เหมาะสมตามเนอื หาของเวบ็ • ความไม่เหมาะสม เช่น เนอื หาเว็บนอ้ ยมีโฟลเดอร์มาก หรอื เนือหาเวบ็ มากแต่จดั การด้วย โฟลเดอรน์ อ้ ย การเรมิ ต้นทีดีเรมิ จากการจัดเก็บทีดี • สรา้ งโฟลเดอร์เฉพาะสําหรับเอกสารเว็บแต่ละชดุ /เรอื ง • ในโฟลเดอรท์ ีสรา้ ง สามารถสร้างโฟลเดอรย์ ่อย เพือเกบ็ ไฟล์ใหเ้ ปนระบบระเบยี บได้ • จัดหาภาพ หรอื สร้างภาพทีเกียวข้องกบั เนอื หา • สรา้ งดว้ ยโปรแกรมกราฟก เช่น Adobe Photoshop • คดั เลือกจาก ClipArt For Web เช่น CD-Rom รวมภาพสาํ หรับเว็บ • ภาพทเี ลือกใช้งานทงั หมด ตอ้ งเก็บไว้ในโฟลเดอรท์ ีสร้างไว้กอ่ นแลว้ • สรา้ งเอกสารเวบ็ โดยการลงรหัส HTML หรือใชโ้ ปรแกรมช่วย • ไฟล์เอกสาร HTML ทกุ ไฟลจ์ ะต้องบนั ทึกไวใ้ นโฟลเดอรท์ ีสรา้ งไวก้ อ่ น รวมกับรูปภาพที จัดเตรยี มไว้แลว้

รายวชิ า การโปรแกรมเว็บเบ้อื งตน จดั ทาํ โดย นางสาววิรยา สขี าว การกาํ หนดชอื ไฟล์ และนามสกลุ ของไฟล์เอกสารเวบ็ 11  ชอื ไฟลแ์ ละนามสกุลของไฟลเ์ อกสารเว็บ จะถูกควบคุมจาก Web Administer  ควรใช้ตัวอกั ษร a - z หรอื ตวั เลข 0 - 9 หรอื ผสมกนั  ชอื และนามสกลุ ทใี ช้ เปนภาษาอังกฤษตัวพิ มพ์ เลก็ ไมม่ ีชอ่ งวา่ ง  ตวั อกั ษร a - z ควรเปนตวั พิ มพ์เลก็  หา้ มตงั ชอื ไฟล์เปนภาษาไทย  ชอื ไฟล์แรกของเอกสารเว็บ มกั จะใชช้ อื index หรอื default  หา้ มเว้นวรรค หา้ มใชเ้ ครอื งหมายอืนใด ยกเวน้ underscore (ขดี ลา่ ง), Dash (ขดี กลาง)  นามสกลุ มี .htm และ .html  การเขียนเว็บดว้ ยภาษาชนั สูง .asp , .php ฯลฯ กาํ หนดชอื ไฟลข์ องเอกสารเว็บ – ชอื ไฟล์และนามสกุลของไฟลเ์ อกสารเว็บ จะถกู ควบคุมจาก Web Administor – นามสกลุ ของไฟล์เอกสาร HTML มี 2 แบบคือ .htm, .html - การเขียนเวบ็ ดว้ ยภาษาชนั สูง .asp , .php ฯลฯ – ชอื และนามสกุลทีใช้ เปนภาษาองั กฤษตวั พิ มพ์ เลก็ ไม่มีช่องวา่ ง – ไมค่ วรใชส้ ญั ลกั ษณพ์ ิ เศษใดๆ ยกเวน้ เครอื งหมาย“ขดี -” – ไฟล์แรกมกั จะใชช้ อื index หรือ Default กาํ หนดชอื ไฟลข์ องเอกสารเวบ็ การตังชอื ควรใหส้ อดคลอ้ งกับเนือหา เพือให้ง่ายต่อการจาํ และการเรียกใชเ้ อกสารเว็บ • จัดหาภาพ หรอื สรา้ งภาพทีเกียวข้องกับเนอื หา • ตรวจสอบขนาดของภาพก่อนนํามาใช้ • ถา้ ภาพมขี นาดใหญ่ให้ลดขนาดไฟลก์ อ่ น • ตรวจสอบชอื ของภาพ ถกู ตอ้ งตามหลักหรือไม่ • ภาพทเี ลอื กใชท้ งั หมด ตอ้ งเก็บไว้ในโฟลเดอร์ทีสรา้ งไวก้ ่อนแลว้

รายวชิ า การโปรแกรมเวบ็ เบื้องตน จัดทาํ โดย นางสาววิรยา สขี าว ปญหาการอา้ งองิ Path 12 ถ้าการจดั เกบ็ ขอ้ มูล หรอื การเรียกใช้ไฟลจ์ ากไดร์ฟอืนๆ ทไี มใ่ ช่โฟลเดอร์หลกั ของเว็บ เพจ โปรแกรมทีใช้อาจจะอ้างองิ เสน้ ทางตามไดรฟ์ นันๆ ขอ้ นตี ้องระวังเพราะว่าเมือนําไปอพั โหลดแลว้ จะไม่สามารถแสดงไฟลน์ ันได้ เนอื งจากการอา้ งองิ เปนเส้นทางบนเครอื งทีทาํ งาน ไมใ่ ชบ่ น Web Server ทีนาํ ขนึ ไป โครงสร้างของเวบ็ โดยพื นฐานจะมี 2 ลักษณะคอื 1. โครงสรา้ งเว็บแบบตืน เปนโครงสรา้ งเวบ็ ในลกั ษณะทีมกี ารเชอื มโยงจากหน้าแรกหรอื หนา้ ที หลกั ไปยังเนือหาโดยตรง โดยไม่มีเว็บเพจทีเปนเนือหาเชอื มโยงตอ่ ไปอีกมากนกั 2. โครงสรา้ งเว็บแบบลกึ เปนโครงสรา้ งทีมกี ารเชอื มโยงตอ่ เนอื งกนั ไปในเนือหาเดียวกันโดย ตลอดหลาย ๆ เว็บ เนืองจากมเี นอื หามากและเปนลาํ ดับตอ่ เนอื ง ทาํ ใหโ้ ครงสรา้ งของเวบ็ ต้อง ลงลึกไปเรอื ย ๆ หลักการออกแบบเว็บไซต์ สามารถแบ่งได้ 5 ลักษณะ คือ 1. แบบลาํ ดับขัน (Hierarchy) เปนการจัดแสดงหน้าเวบ็ เรียงตามลําดบั กงิ กา้ น แตกแขนง ตอ่ เนอื งไปเหมือนตน้ ไมก้ ลบั หวั

รายวชิ า การโปรแกรมเว็บเบอื้ งตน จัดทาํ โดย นางสาววิรยา สขี าว 13 2. แบบเชงิ เส้น (Linear) เปนการจัดแสดงหน้าเวบ็ เรียงต่อเนอื งไปในทิศทางเดียว 3. แบบผสม (Combination) เปนการจดั หน้าเวบ็ ชนดิ ผสมระหว่างแบบลาํ ดบั ขนั และแบบเชงิ เสน้ 4. แบบตะแกรง (Grid) เว็บไซตท์ ีแต่ละหน้าสามารถเชอื มโยงไปยงั เพจอืนๆ ลกั ษณะเหมอื น ตะแกรง 5. แบบใยแมงมุม เวบ็ ไซต์ทีแต่ละหนา้ สามารถเชอื มโยงไปยงั เพจอืนๆ ไดท้ กุ เพจโดยไมต่ ้องผ่าน หัวข้อหลกั กไ็ ด้ หนา้ ตาและสสี นั ของเว็บไซต์ • เวบ็ ไซตส์ ว่ นใหญจ่ ะมโี ครงสร้างทียอมรับว่าเปนมาตรฐานอยู่ 3 แบบ คอื • แบบที 1 จะประกอบดว้ ยพืนทีส่วนหวั ของหนา้ ด้านบน (สฟี า) เมนูทางซา้ ยมือ (สเี ขียว) และส่วนแสดงเนือหา (สเี หลือง) ในด้านขวามือ • แบบที 2 จะคลา้ ยกบั แบบที 1 แตจ่ ะเพิมผังรายละเอยี ดด้านขวามอื ขึนมา โดยมีสว่ น เนอื หาอยู่ตรงกลางหนา้ (เว็บสาํ เร็จรปู หลายแบบนยิ มใช้ เหมาะกบั การทําหน้าแรกที ตอ้ งการเสนอประเดน็ สาํ คัญทีน่าสนใจ สามารถคลิกไปดรู ายละเอยี ดในหน้าถดั ไปได้)

รายวิชา การโปรแกรมเวบ็ เบือ้ งตน จัดทาํ โดย นางสาววริ ยา สีขาว • แบบที 3 จะตดั ส่วนเมนซู า้ ยขวาออก นําเอาเมนไู ปแทรกไวท้ ีส่วนหัวเรืองและในสว่ นทา้ ย 14 หน้าแทน (เหมาะกบั เว็บไซตเ์ ล็กๆ ทตี อ้ งการแสดงความสวยงามในการออกแบบภาพ กราฟฟก มากกว่าเนือหาภายใน) โครงสรา้ งทัง 3 แบบจะมสี ่วนประกอบหลกั อยู่ 3 สว่ น คอื • ส่วนหัวเรือง เปนส่วนทีจะบรรจตุ รา/เครืองหมาย/สัญลกั ษณ์ของเวบ็ ไซต์นนั (หน่วยงาน หรอื องค์กร) ซงึ มีความนยิ มวางไวท้ ตี าํ แหน่งมุมซ้ายบนจะเหมาะสมทสี ดุ (ในวงกลม) (ผลจากการวจิ ยั ตําแหนง่ ทีไดร้ บั ความนยิ มในการวางโลโกค้ ือ ซา้ ย 74% กลาง 20% ขวา 6%) ดา้ นขวามืออาจวางแบนเนอร์โฆษณากจิ กรรมตา่ งๆ ได้ • ส่วนเมนู เปนส่วนทีจะนาํ พาผู้ชมเขา้ ไปยงั หมวดหมูเ่ นอื หาทีจดั ไวไ้ ดอ้ ยา่ งสะดวก รวดเร็ว ทาํ หนา้ ทเี หมือนกบั ถนนหรือแผนผังเส้นทางเดนิ หรือหนา้ สารบญั ในหนงั สอื อาจวางไว้ ในตาํ แหน่งบนสดุ ใต้ส่วนหวั เรอื ง หรือแทรกในสว่ นหัวเรืองกไ็ ด้ และทําเมนปู ลีกย่อยไว้ใน สว่ นซา้ ยของหนา้ หรือสว่ นล่างของหน้า ส่วนเนือหา เปนส่วนทจี ะแสดงรายละเอียดของเนอื หาแตล่ ะเรอื งสมั พั นธก์ บั เมนู ประกอบไปดว้ ย ขอ้ ความ ภาพประกอบ ตารางแสดงขอ้ มลู ต่างๆ ซงึ จะตอ้ ง รูปแบบการจดั แบง่ พื นทหี นา้ Homepage • ไม่มหี ลักเกณฑ์ตายตัว ขนึ อยูก่ ับเนือหาและการออกแบบเวบ็ ไซต์ทีนยิ มมี 3-4 แบบ • แบง่ พื นทีใช้งานออกเปน 3 ส่วน แบง่ พื นทีใชง้ านออกเปน 2 ส่วน แบ่งพื นทีใช้งานออกเปน 1 สว่ น

รายวชิ า การโปรแกรมเว็บเบื้องตน จดั ทาํ โดย นางสาววิรยา สขี าว การออกแบบเว็บไซต์ใหด้ ูดไี ดอ้ ยา่ งไร 15 1 สสี นั (Color) จะทําใหผ้ ชู้ มเว็บรับรอู้ ารมณข์ องเว็บ และเรอื งราวทนี ําเสนอได้ ควรเลอื กสีให้ เหมาะสมกบั เนอื หา แตล่ ะสีใหค้ วามรู้สึกทีแตกตา่ งกนั เช่น – สีฟา สีเหลอื ง ใหค้ วามรู้สกึ สดใส และอบอนุ่ – สแี ดงใหค้ วามรสู้ ึกสนุกสนาน ร้อนแรง – สนี ําเงนิ มังคง เขม้ แข็ง 2. มคี วามเปนเอกลักษณ์ จะทาํ ใหผ้ ู้ชมเว็บไซต์จดจาํ เวบ็ ได้งา่ ยขนึ โดยอาจใชโ้ ทนสี รปู ประกอบ Theme ทีคลา้ ยๆ กนั ทกุ หน้า กาํ หนดรปู แบบมาตรฐาน(Theme) – การสรา้ งเวบ็ ไซต์ควรสรา้ งให้มรี ปู แบบเดยี วกนั ในทกุ ๆ ส่วน ดว้ ยการสรา้ งไฟลต์ น้ แบบ (Template)มาตรฐานไวแ้ ลว้ นาํ ไปบนั ทึกเปนชอื ไฟล์อืน ๆ ตามทีตอ้ งการจะทาํ ให้ผ้ชู ม รู้สกึ ดีในการเยียมชม ไม่คดิ ว่าหลดุ ไปยังเว็บอืน ๆ แลว้ – การสรา้ งเปนไฟล์ต้นแบบ ได้แก่ การกาํ หนด Meta tag การกาํ หนดรหัสภาษา สสี ันของ พืนหลัง ตัวอกั ษร จดุ เชอื มโยง ตา่ ง ๆ ขันตอนการพั ฒนาเวบ็ เพจ • ส่งขอ้ มลู ขึนเครอื งแม่ขา่ ย (Server) • ตรวจสอบผลการเรยี กดจู ากเครอื งแม่ข่าย การเตรยี ม Web server สําหรบั เผยแพรผ่ ลงาน • จัดตงั Web server ขนึ มาเอง • เช่า Web server จากผใู้ ห้บริการ • ขอใชพ้ ืนทีจาก Web server จากหน่วยงานทีสงั กดั • ขอใช้พืนทีฟรีจาก Free Web Server (www.tripod.com) บัญญตั ิ 10 ประการของเว็บมาสเตอร์ 1. ใชแ้ บก็ กราวด์สะอาด เรยี บงา่ ย - ขนาดทีไมเ่ หมาะสม - หลกี เลียงการใชล้ วดลาย - เลือกสีทีเหมาะสม 2. คดิ ก่อนใช้เอฟเฟคทต์ า่ ง ๆ 3. ใชต้ วั อักษรทคี มชัด 4. ออกแบบกราฟฟกใหม้ ขี นาดไฟลเ์ ล็ก ๆ 5. วางแผนและออกแบบก่อนลงมอื สรา้ ง 6. ควบคุมขนาดของเพจใหด้ ี - เรียนร้ขู ้อจาํ กดั ของผู้ชม

รายวิชา การโปรแกรมเวบ็ เบื้องตน จัดทําโดย นางสาววิรยา สขี าว - วางรปู แบบโครงรา่ งทเี หมาะสม 16 - ออกแบบเฟรมทีหยืดหยุ่น 7. ชนี ําผ้ชู มดว้ ยวธิ ีการงา่ ย ๆ 8. อย่าพยายามทาํ ตวั ลาํ หนา้ เกินไป - อย่าสร้างเว็บไซดด์ ว้ ยเทคโนโลยลี าํ ยคุ - จากมันสมองและสองมอื ของคุณ - ดําเนนิ ตามมาตรฐานสากล 9. งา่ ย ๆ แต่จริงใจ - ของดี ๆ ไม่จาํ เปนตอ้ งยากเสมอไป 10. อยา่ ลืมปรบั ปรงุ ความสดใส - จัดสลบั ลาํ ดบั เนือหาทีมอี ยู่ - อย่าละเลยผลตอบรบั ของผชู้ ม - ใส่ตวั เลขนบั จาํ นวนผ้ชู มและตวั วดั สถติ เิ ขา้ ไปดว้ ย ประเภทของภาพกราฟก ภาพทเี ห็นในคอมพิวเตอร์มีดว้ ยกัน 2 ประเภท 1. ภาพกราฟกแบบ 2 มิติ เสน้ ตรง เปนภาพทีเกิดจากการแสดงภาพทมี ลี กั ษณะโครงสร้างเปนรูปทรงเรขาคณิต วงกลม เปนภาพทีพบเหน็ โดยทัวไปรวมถงึ การต์ ูนต่างๆ ในโทรทัศน์ เชน่ ภาพถา่ ย รูปวาด ภาพลายเสน้ สัญลักษณ์ กราฟ มอี ยู่ 2 ประเภท คือ ภาพเวคเตอร์ (vector) และภาพบิตแมป (bitmap) . ภาพกราฟกแบบ 3 มติ ิ เปนภาพชนดิ เวกเตอร์มมี มุ มองภาพเหมอื นจริง (สรา้ งภาพจากแกน x y z = ความลึก ของภาพ) เปนภาพกราฟกทีใชโ้ ปรแกรมสรา้ งภาพ 3 มิติโดยเฉพาะ เชน่ โปรแกรม 3Ds max โปรแกรม Maya เปนต้น ซงึ จะทําใหไ้ ด้ภาพมสี แี ละแสงเงาเหมือนจรงิ เหมาะกบั งานดา้ น สถาปตยกรรมและการออกแบบต่างๆ รวมถึงการสร้างเปนภาพยนตร์การต์ ูนหรือโฆษณาสินคา้ ตา่ งๆ เช่น การ์ตูนเรือง Nemo The Bug และปงปอนดแ์ อนเิ มชนั เปนตน้

รายวชิ า การโปรแกรมเว็บเบือ้ งตน จัดทาํ โดย นางสาววริ ยา สขี าว การสร้างภาพกราฟกดว้ ยคอมพิ วเตอร์ มีวิธกี ารสรา้ ง 2 แบบ คือ 17 รปู แบบของภาพในคอมพิ วเตอร์ 1. แบบบิตแมป (Bit Mapped) บิตแมป (Bitmap ) หรือ Rastor จะประกอบไปดว้ ยพิ กเซลเรียงต่อเนอื งกนั ภายในแต่ ละพิ กเซลจะมีองคป์ ระกอบทีใชใ้ นการแสดงสี รูปทรง รูปแบบไฟล์ เราเรียกองค์ประกอบของ พิ กเซลนีวา่ บิต ( Bit) ภาพบิตแมปนันเราอาจเรียกว่า ราสเตอร์ (Rastor ) หรอื เพนตไ์ ทป (Paint-type) กไ็ ด้ สาํ หรบั ข้อดขี องบิตแมป คือ จะมคี วามเรว็ ในการแสดงสงู ใช้หนว่ ยความจํา น้อยกว่า ตัวอย่างโปรแกรมกราฟกประเภทบิตแมป เชน่ Adobe Photoshop , Fractal Design Painter , Paint Shop Pro , L-View เปนตน้ ตัวอยา่ งชนดิ ของไฟล์ภาพ เชน่ bmp GIF JPEG TIFF PICT Raw ในปจจุบนั นยิ มใช้แบบ JPEG file format (Joint Photographic Experts Group) เนอื งจากภาพทไี ด้มีคณุ ภาพเหมอื นจรงิ และไฟลม์ ขี นาดเลก็ เพราะมกี ารบบี อัดทีดี และสามารถ กําหนดคุณภาพงานได้ทงั หมด 10 ระดบั ขนึ อยกู่ บั ความเหมาะสม สําหรบั งานอืน ๆ จะใช้ GIFs file format(Graphical Interchange Format) เปน ไฟล์มาตรฐานทีมีอยูน่ านแล้วอกี ทงั สามารถแสดงเปนภาพเคลอื นไหวได้ แต่สามารถแสดงสีได้ เพี ยง 256 สเี ท่านนั นามสกุลทใี ชเ้ ก็บภาพแบบ Raster นามสกุลทใี ชเ้ ก็บ ลักษณะงาน โปรแกรมทีใช้สร้าง .JPG, JPEG, JPE ใช้สาํ หรบั รูปภาพทัวไป งานเวบ็ เพจ และงานทีมี Photoshop, , .GIF ความจํากดั ด้านพืนทีหน่วยความจํา PaintShopPro .TIFF , TIF Illustrator เหมาะสําหรับงานด้านนิตยสาร เพราะมีความ ละเอยี ดของภาพสูง .BMP , DIB ไฟลม์ าตรฐานของระบบปฏิบัตกิ ารวนิ โดว์ PaintShopPro , Illustrator

รายวชิ า การโปรแกรมเว็บเบ้อื งตน จัดทาํ โดย นางสาววิรยา สีขาว 2. แบบเวกเตอร์ (Vector) 18 เวกเตอร์ (Vector) ภาพเชงิ วัตถุ (object-oriented graphics) เปนภาพทีสรา้ งด้วย สว่ นประกอบของเสน้ ในลักษณะตา่ งๆ และคณุ สมบัติทีเกียวกับสขี องเสน้ นนั ๆ ซงึ สรา้ งจากการ คํานวณทางคณิตศาสตร์ เชน่ ภาพของดอกไม้ กจ็ ะถูกสรา้ งดว้ ยจดุ ของเสน้ โคง้ และเส้นตรง หลายๆ จุด เปนลกั ษณะโครงร่างภาพ (Outline) ภาพเวกเตอร์จะมีความละเอยี ดในการ แสดงสงู มาก ไมว่ ่าเราจะยอ่ หรอื ขยาย จะไมท่ ําใหภ้ าพเพียนไปได้ แตก่ ารแสดงผลจะช้ามาก ตัวอยา่ งโปรแกรมกราฟกประเภทเวกเตอร์ เช่น Adobe Illustrator , Macromedia Freehand , Corel Draw เปนต้น ตวั อยา่ ง ภาพของคน กจ็ ะถูกสร้างด้วยจดุ ของเส้นหลายๆ จุด เปนลกั ษณะของโครงรา่ ง (Outline) และสขี องคนกเ็ กิดจาก สขี องเส้นโครงรา่ งนันๆ กับ พืนทีผวิ ภายในนันเอง เมอื มีการแก้ไขภาพ ก็จะเปนการแกไ้ ขคณุ สมบัตขิ องเสน้ ทาํ ใหภ้ าพไม่ สญู เสียความละเอยี ด เมอื มกี ารขยายภาพ ชนิดไฟลภ์ าพ เชน่ ภาพ .wmf ซงึ เปน clipart ของ Microsoft Office นามสกุลทใี ชเ้ กบ็ ภาพแบบ Vector นามสกลุ ทใี ช้เกบ็ ลกั ษณะงาน โปรแกรมทีใชส้ ร้าง .AI ใช้สาํ หรบั งานทตี อ้ งการความละเอยี ดของภาพ โปรแกรม .EPS มาก เชน่ การสรา้ งการต์ ูน การสรา้ งโลโก เปน Illustrator ต้น โปรแกรม .WMF CorelDraw ไฟล์มาตรฐานของระบบปฏบิ ัติการวนิ โดว์

รายวิชา การโปรแกรมเว็บเบ้ืองตน จดั ทําโดย นางสาววิรยา สขี าว Bitmap VS Vector 19 Bitmap แสดงภาพให้เหน็ ได้เรว็ กว่า Vector การเปลียนแปลงขนาดภาพใหโ้ ตขึนหรอื เลก็ ลงกวา่ ภาพเดมิ Bitmap จะทําไดไ้ มม่ ากและทาํ ให้ภาพผดิ เพียนไปจากเดิม แต่ภาพ Vector จะทําได้มากกวา่ โดยสัดสว่ นของภาพยงั คงเดมิ รปู แบบของไฟลรูปภาพ 1. BMP (Bitmap) ไฟลภ์ าพแบบ Bitmap (*.BMP) เปนไฟลภ์ าพทไี ดม้ าจาก Microsoft (Windows) เหมาะกบั การนาํ ไปใช้บันทึกภาพตนั ฉบบั ทีต้องการเก็บรายละเอียดของภาพทังหมด ขอ้ ดคี ือ สามารถใช้งานกบั โปรแกรมไดแ้ ทบทุกประเภท นอกจากนียังเกบ็ รายละเอียดได้เหมือนกบั ต้อน ฉบับแทบทุกประการโดยไมท่ ําให้คณุ ภาพลดลง จงึ ทําใหเ้ ปนไฟล์ชนิดหนึงทมี ีคนนิยมใชง้ านมาก ใช้เทคนิค RLE-Encoding ในการบีบไฟล์ได้ ขอ้ เสยี ของไฟลภ์ าพแบบ Bitmap คอื ไมส่ ามารถ ทาํ งานในโหมด CMYK ได้ นอกจากนียงั เก็บรายละเอียดต่าง ๆ ไดไ้ มเ่ ท่าไฟล์ TIF อาทิ Alpha Channel, Path, Layer เปนต้น • ข้อดี • โปรแกรมบนวินโดวท์ ุกตวั สามารถเรยี กใช้ไดห้ มด • Color dept 1-24 bit(16 ล้านส)ี • ขอ้ เสีย • ไฟลม์ ขี นาดใหญม่ าก ไม่เหมาะในการนาํ ไปใช้ในอนิ เตอร์เนต็ 2. EPS (Encapsulated PostScript) ใช้ตัวยอ่ ว่า EPS (อ่านวา่ อพี ี เอส ) หมายถงึ ภาพทีสร้างขนึ ดว้ ยภาษาโพสต์สคริปต์ (PostScript) โปรแกรมประเภทนใี ช้เนอื ทีเก็บในหน่วยความจาํ มาก แต่มลี กั ษณะคมชดั กว่าภาพ ชนดิ อืน ราคาคอ่ นข้างแพง มักใชน้ ามสกุล (file type) ว่า EPS การสงั พิ มพ์ ภาพประเภทนี ตอ้ งใช้เครอื งพิ มพ์ เลเซอรบ์ างชนดิ เท่านัน 3.GIF (Graphics Interchange Format) - GIF (Graphics Interchange Format) เปนแฟมภาพทเี ปนทีนยิ มมากทีสดุ สาํ หรับเกบ็ ภาพ ทีจะแสดง บนเวบ็ และทีอืนๆบนอนิ เทอรเ์ นต นอกเหนือจากรูปแบบแฟม JPEG แฟม GIF กลายเปนรปู แบบมาตรฐานของแฟมภาพ ใชว้ ธิ ีการบบี อัดขอ้ มูล แบบ LZW - แฟม animated GIF (Graphics Interchange Format) เปนแฟมภาพ ทีเคลอื นไหวไดบ้ นเว็บเพจ

รายวชิ า การโปรแกรมเว็บเบอ้ื งตน จัดทําโดย นางสาววริ ยา สีขาว - แฟม animated GIF เปนแฟมทีมรี ูปแบบตามข้อกําหนด GIF89a ในแฟม 20 หนึงๆประกอบดว้ ยภาพหลายภาพทีถูกนําเสนอตามลาํ ดับทไี ดม้ กี ารกาํ หนดไว้ แลว้ และให้หยดุ หรอื ใหว้ นไปไมส่ นิ สดุ กไ็ ด้ - เครืองมอื อืนทีสามารถใช้ในการทาํ ภาพเคลือนไหวไดแ้ ก่ Java และ Flash แต่ animated GIF จะสร้างไดง้ า่ ยกว่า และมกั จะมีขนาดเลก็ กวา่ ทาํ ให้แสดงภาพได้เรว็ กว่า เปนไฟลก์ ราฟกมาตรฐานทที าํ งานบนอินเทอรเ์ นต็ มกั จะใช้เมอื • ต้องการไฟลท์ มี ีขนาดเลก็ • จาํ นวนสีและความละเอยี ดของภาพไมส่ ูงมากนัก • ตอ้ งการพืนแบบโปร่งใส • ตอ้ งการแสดงผลแบบโครงรา่ งกอ่ น แลว้ ค่อยแสดงผลแบบละเอียด • ตอ้ งการนาํ เสนอภาพแบบภาพเคลอื นไหว ไฟล์ .GIF มี 2 สกลุ ได้แก่ GIF87 พั ฒนาขึนในป ค.ศ. 1987 เปนไฟลก์ ราฟกรุ่นแรกที สนบั สนุนการนําเสนอบนอนิ เทอร์เนต็ เปนไฟลท์ มี ขี นาดเลก็ และแสดงผลสีไดเ้ พี ยง 256 สี และ กําหนดให้แสดงผลแบบโครงรา่ งได้ (Interlace) GIF89A พั ฒนาขึนในป ค.ศ. 1989 เปนไฟล์กราฟกทีพั ฒนาตอ่ จาก GIF87 โดยเพิม ความสามารถการแสดงผลแบบพืนโปรง่ ใส ( Transparent) และการสรา้ งภาพเคลือนไหว (GIF Animation) ซงึ เปนไฟลก์ ราฟกทีมคี วามสามารถพิ เศษโดยนาํ เอาไฟล์ภาพหลายๆ ไฟล์มา รวมกันและนําเสนอภาพเหล่านัน โดยอาศัยการหน่วงเวลา มีการใส่รปู แบบการนาํ เสนอลักษณะ ตา่ งๆ ( Effects) ในลักษณะภาพเคลอื นไหว จุดเดน่  มีขนาดไฟลต์ าํ  สามารถทําพืนของภาพใหเ้ ปนพืนแบบโปร่งใสได้ ( Transparent)  มรี ะบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอยี ดในระบบ Interlace  มีโปรแกรมสนบั การสร้างจาํ นวนมาก  เรยี กดไู ด้กับ Graphics Browser ทุกตัว  ความสามารถดา้ นการนาํ เสนอแบบภาพเคลือนไหว ( Gif Animation) จุดด้อย แสดงสีไดเ้ พี ยง 256 สี 4. JPEG (Joint Photographic Experts Group) - ถูกพั ฒนาขึนโดย Joint Photographic Experts Group เพือจุดประสงค์ในการ บีบอัดข้อมูล ของไฟลร์ ูปภาพให้มีขนาดเล็กลง คณุ ภาพของภาพสามารถกาํ หนดได้ - ผู้ใช้สามารถกําหนดคณุ ภาพของภาพได้ ถา้ ตอ้ งการคณุ ภาพสงู แฟมจะมีขนาดใหญ่ ผ้ใู ชต้ อ้ งตัดสินใจเลอื กระหว่าง คณุ ภาพ (image quality) กับขนาดของแฟมภาพ (file size) ทีตอ้ งการ - JPEG เปนชนดิ ของแฟมภาพทีสอื สารบน World Wide Web มกั จะเปนแฟมทีมี

รายวชิ า การโปรแกรมเว็บเบอ้ื งตน จดั ทําโดย นางสาววริ ยา สีขาว สว่ นขยายหรือนามสกลุ เปน .jpg เราสามารถสรา้ ง progressive JPEG ไดค้ ล้ายคลงึ กับ 21 interlaced GIF JPEG หรอื Joint Photographic Experts Group บ้างกเ็ รยี ก JPG กลุ่ม นีจะสีสนั สดใสกวา่ ด้วยวา่ แบ่งเฉดสไี ด้ถึง 16 bit ดีเดยี ว การเก็บขอ้ มูลนเี พือใหร้ ปู ถา่ ยสีสด สมจริงโดยไม่ตอ้ งอาศัยวธิ ี Dither ทาํ ให้มกี ารผสมฉดี เฉดต่าง ๆ ได้กลมกลืนทเี ดยี ว หลกั การบีบอดั นันคอ่ นข้างซบั ซ้อน หลกั การบีบอัดกง็ า่ ย ๆ โดยทําเปนเลือกไม่จํา รายละเอยี ดของภาพ โดยจะสามารถเลอื กเปนระดบั ได้ เช่น ถ้าเลอื ก 0% compression คือ ไมบ่ ีบอัดเลย ภาพจะคมชดั เท่าตน้ ฉบับ ถา้ compression มาก ๆ ก็จะไม่ชดั เลยเพราะวา่ รายละเอียดหาย แตว่ า่ ถา้ ไมบ่ ีบอัดเลยก็จะมขี นาด file ใหญ่มาก ดังนันแลว้ จึงพบว่าการบีบอัด ขอ้ มลู ที 60% นันให้ผลลัพธ์สมดุล คอื ไมใ่ หญแ่ ละไม่มวั การ interlaced นัน แมว้ ่าจะทาํ ไดแ้ ตว่ า่ ไมส่ ามารถทํา animation และ transparency ได้เหมือนกนั GIF จึงนยิ มเกบ็ ไวเ้ กบ็ ภาพถา่ ยแตอ่ ยา่ งเดยี วครับ สาํ หรบั พวก graphic ทีมีสเี ดียวกนั ใหญ่ ๆ ไมค่ วรเกบ็ ในรปู JPG เพราะขอบภาพจะเบลอเนอื งจากมนั พยายามจะให้สลี ะเอียดเกนิ จนไล่สีมากไป ขาดความคมชดั เปนอีกไฟล์หนงึ ทีนยิ มใชบ้ น Internet มกั ใชก้ รณี 1. ภาพทตี อ้ งการความละเอยี ดสูงและใชส้ จี ํานวนมาก(สนบั สนุนถงึ 24 bit color) 2. ต้องการบบี ไฟล์ตามความตอ้ งการของผ้ใู ช้ 3.ไฟล์ชนิดนมี กั จะใช้กบั ภาพถ่ายทีนํามาสแกน และต้องการนําไปใชบ้ นอนิ เทอร์เน็ต เพราะใหค้ วามคมชัดและความละเอยี ดของภาพสูง ไฟลภ์ าพแบบ JPEG (*.JPG) เปนไฟล์ ภาพทมี ีผนู้ ิยมใช้มากในอินเทอรเ์ นต็ เนืองจากสามารถบบี อดั รายละเอียดเพือลดขนาดไฟลใ์ หเ้ ล็ก ลงได้มาก จงึ ทาํ ให้แสดงผลได้อย่างรวดเรว็ กวา่ ไฟลช์ นิดอืน ๆ นอกจากนียงั สามารถทํางานใน โหมด CMYK ได้ แตข่ อ้ เสียของไฟล์ JPEG กค็ อื จะทาํ ใหค้ ุณภาพของไฟลล์ ดลงทกุ ครงั ที บนั ทกึ จงึ ไม่เหมาะจะใชก้ บั งานทีตอ้ งการคณุ ภาพสงู อย่างงานสิงพิ มพ์ เปนตน้ ลกั ษณะและจดุ เด่น • สนับสนุนสีได้ถงึ 24 bit • สามารถกําหนดค่าการบบี ไฟลไ์ ดต้ ามทีตอ้ งการ • มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปส่ลู ะเอยี ดในระบบ Progressive • มโี ปรแกรมสนับสนุนการสร้างจาํ นวนมาก • เรยี กดูไดก้ ับ Graphics Browser ทุกตัว • ตงั ค่าการบีบไฟลไ์ ด้ ( compress files) • เหมาะสมกับการนาํ เสนอทงั ระบบสอื มลั ติมีเดีย และเวบ็ ไซต์ • สว่ นขยายของไฟลร์ ูปแบบนคี อื .jpg หรอื .jpeg จดุ ดอ้ ย • ทาํ ใหพ้ ืนของรปู โปรง่ ใสไม่ได้ • ขนาดไฟลต์ ้องกําหนดให้เหมาะสมกบั การนาํ ไปใชง้ าน

รายวชิ า การโปรแกรมเวบ็ เบ้อื งตน จัดทาํ โดย นางสาววริ ยา สีขาว ขอ้ เสยี ของการบีบไฟล์ ( Compress File) 22 กาํ หนดค่าการบีบไฟลไ์ วส้ งู ( 1 - 10) แม้ว่าจะช่วยใหข้ นาดของไฟลม์ ีขนาดตาํ แต่กม็ ี ขอ้ เสีย คอื เมอื มีการสง่ ภาพจาก Server ไปแสดงผลที Client จะทําให้การแสดงผลชา้ มาก เพราะตอ้ งเสียเวลาในการคลายไฟล์ ดงั นันการเลือกคา่ การบีบไฟล์ ควรกาํ หนดให้เหมาะสมกบั ภาพแตล่ ะภาพ 5. PNG (Portable Network Graphics) รปู แบบลา่ สดุ ในการนาํ เสนอภาพผ่านเครือข่ายอินเทอร์เน็ต สามารถแสดงผลได้ในระบบสี เต็มพิ กัด (True Color), มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ตามทีต้องการ มีการ กําหนดให้พื นภาพเปนพื นโปร่งใสได้ (Transparent) รวมทังการแสดงผลแบบหยาบสู่ละเอียด (Interlaced) สว่ นขยายของไฟล์รปู แบบนคี อื .png แฟม PNG มกี ารบบี อัดขอ้ มลู โดยไมส่ ูญเสยี คณุ ภาพเช่นเดียวกับแฟม GIF แต่บบี อัด ข้อมลู ไดด้ ีกวา่ PNG ทาํ ใหส้ มี ีความโปร่งใส (transparency) แลว้ ยงั สามารถควบคุมองศา ของความโปรง่ ใส (opacity) ไดด้ ้วย PNG format ไมส่ นับสนุนภาพเคลือนไหว เพราะไม่ สามารถเก็บภาพหลายภาพไว้ด้วยกนั ไดแ้ ตส่ ามารถขยายขีดความสามารถ (extensible) ได้ จดุ เด่น • สนับสนนุ สไี ด้ถึงตามคา่ True color (16 bit, 32 bit หรอื 64 bit) • สามารถกําหนดคา่ การบบี ไฟลไ์ ดต้ ามทีตอ้ งการ • มรี ะบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสลู่ ะเอียด ( Interlace) • สามารถทาํ พืนโปรง่ ใสได้ จุดด้อย • หากกําหนดคา่ การบีบไฟล์ไว้สูง จะใชเ้ วลาในการคลายไฟล์สูงตามไปดว้ ย แต่ ขนาดของไฟลจ์ ะมีขนาดตาํ • ไมส่ นับสนุนกบั Graphic Browser รนุ่ เกา่ สนบั สนนุ เฉพาะ IE 4 และ Netscape 4 • ความละเอียดของภาพและจาํ นวนสีขนึ อยกู่ ับ Video Card • โปรแกรมสนับสนนุ ในการสรา้ งมนี ้อย 6. TIFF (Tagged – Image File Format) - TIFF (Tag Image File Format) เปนรปู แบบทวั ไปของแฟมทใี ช้ในการแลกเปลียน ภาพแบบราสเตอร์ หรอื บทิ แมป ระหว่างโปรแกรมประยกุ ต์รวมทังโปรแกรมทีใช้จัดการภาพทีได้ จากการกวาดดว้ ยสแกนเนอร์ - พั ฒนามาตงั แต่ป 1986 มกั ใชใ้ นงาน desktop publishing, faxing, 3-D

รายวชิ า การโปรแกรมเว็บเบ้อื งตน จดั ทําโดย นางสาววิรยา สีขาว applications และ medical imaging applications TIFF files มหี ลายประเภทเชน่ gray 23 scale, color palette และ RGB full color ไฟล์ภาพแบบ TIF (*.TIF) เปนไฟลภ์ าพทใี ห้รายละเอียดสูงและสมบูรณแ์ บบมากทีสดุ ชนดิ หนึงใน ปจจบุ ัน โดยในไฟลส์ ามารถเก็บเกียวรายละเอียดต่าง ๆ ได้อย่างสมบูรณ์แบบเหมือนตน้ ฉบบั แทบทกุ ประการไม่ว่าจะเปน Path Selection หรือแมแ้ ต่ เลเยอรใ์ น Photoshop เองกต็ าม นอกจากนีไฟล์ยงั รองรับการทาํ งานในโหมดภาพแบบ CMYK และสามารถเปดไดท้ ังในระบบของ McIntosh และ Windows จึงสามารถใชใ้ นงานสงิ พิ มพ์ ตา่ ง ๆ ได้เปนอย่างดี • ข้อดี • ใช้ไดก้ ับทุกระบบปฏิบตั กิ าร • ความลกึ สมี ากถึง 64 บติ • เหมาะกบั งานคุณภาพสูง ในงานระดับมืออาชพี • สามารถตังค่าความลึกสไี ดส้ ูงสุดถึง 64 บติ • ใชเ้ ทคนิค LZW-Encoding ในการบีบไฟล์ได้ • ขอ้ เสยี ไฟล์มขี นาดใหญม่ าก ไม่เหมาะในการนําไปใช้ในอินเตอรเ์ นต็ 7. RAW Format การถ่ายภาพแบบทีเปน Raw File คือ \" the uncompressed, unprocessed data file capture by the camera\" ดงั นัน ภาพทีไดจ้ งึ ยังไมม่ ีการปรงุ แต่ง หรอื ลดขนาดความจุ ปรับโทนสี ปรับความสวา่ ง / มืด ฯลฯ แต่อย่างใด

รายวชิ า การโปรแกรมเว็บเบือ้ งตน จัดทําโดย นางสาววริ ยา สีขาว 24 HTML5 (อังกฤษ: HTML5; อ่านว่า เอชทีเอ็มแอลไฟฟ หรือ เอชทีเอ็มแอลห้า) เปน มาตรฐานตัวต่อไปของ HTML ทีอยู่ในระหว่างการพั ฒนา โดยมีลักษณะเหมือนมาตรฐานตัว ก่อนหน้าทงั HTML 4.01 และ XHTML 1.1 ทีใช้ในการจัดโครงสร้างและการแสดงผลของเนือหา สาํ หรบั เวลิ ด์ไวดเ์ วบ็ มาตรฐานใหมจ่ ะมีคณุ ลักษณะเด่นทีสําคัญได้แก่ การใช้งานวิดีโอ การ แสดงตําแหน่งทางภูมิศาสตร์ การเก็บไฟล์ในลักษณะออฟไลน์ การแสดงกราฟกส์ input types แบบใหม่ เช่น search, number, range, color, tel, url, email, date, month, week, time, datetime, datetime-local โดยคุณสมบัติเด่นหลายอย่างไม่จําเปนต้อง ติดตังซอฟต์แวร์เพิ ม เช่น เกียรส์ แฟลช หรือ ซิลเวอร์ไลต์ เหมือนทีผ่านมาในการใช้งาน HTML4 และปจจบุ ันไดพ้ ั ฒนามาถงึ HTML5 ซงึ เอกสารประกอบการเรียนนีจะเขียนเปนรูปแบบ ในภาษา HTML5 Markup Language HTML5 ได้มกี ารแนะนํา เอเลเมนตใ์ หมห่ ลายตัวเพือตอบสนองการใชง้ านของเว็บไซต์รุ่น ใหม่ โดยเอเลเมนต์ใหม่ส่วนหนึงเปนซีแมนติกทดแทนการใช้งานของบล็อกทัวไป (<div>) และ เอเลเมนต์อินไลน์ (<span>) ยกตัวอย่างเช่น <nav> (บล็อกสําหรับเมนูบอกทาง) และ <footer> (ส่วนด้านล่างของเว็บเพจ) เอเลเมนต์ส่วนอืนแสดงถึงการใช้งาน เช่น เอเลเมนต์ ทางด้านสอื <audio> และ <video>[1][2][3] เอเลเมนต์บางตัวทีตกรุ่นสําหรับ HTML 4.01 ได้ ถูกยกเลิก เช่น <font> , <center> ซงึ ถูกทดแทนดว้ ยการทาํ งานผ่านซเี อสเอส ทีมา : https://th.wikipedia.org/wiki/เอชทเี อ็มแอล5 HTML มีชือเรียกเต็มๆ ว่า Hypertext Markup Language เปนภาษาโครงสร้างเว็บเพจ โดย HTML นันจัดเปนภาษาประเภท กําหนดสัญลักษณ์ หรือทีเรียกว่า มาร์กอัพ (Markup Language) ทีอยูใ่ นรูปแบบของแทก็ (Tag) ตา่ งๆ เชน่ <html>, <head>, <body> เปนต้น ภาษา HTML ได้พั ฒนามาหลายเวอรช์ นั จนล่าสดุ มาเปนเวอร์ชัน 5 คือ HTML5 นันเอง เรามาทราบกนั ก่อนว่า ความเปนมาของ HTML นันมคี วามเปนมาอย่างไรกนั กอ่ นเลยดกี ว่า 1. ประวัติความเปนมาของ ภาษา HTML ในป ค.ศ. 1990 Tim Berners-Lee นักวิทยาศาสตร์ชาวอังกฤษ ได้นําเสนอการ จัดรูปแบบเอกสารทีเรียกว่า \"HTML Tag\" โดยใช้พื นฐานมาจากภาษาSGML (Standard Generalized Markup Language) ซงึ เปนภาษาในการจดั โครงสร้างของเอกสารทีมีอยู่แล้ว ในขณะนัน ทังรูปแบบภาษา HTML ที Tim Berners-Lee นําเสนอนีได้ถูกนําไปใช้เปน ข้อกาํ หนดในการสรา้ งเว็บไซตต์ วั แรกคือ NCSA Mosaic ในเวลาตอ่ มา Tim Berners-Lee ได้ จดั ตงั หน่วยงานแรกชอื World Wide Web Consortium (W3C) ขนึ ทีสถาบนั MIT เพือเข้า มาควบคุมดูแล และกําหนดมาตรฐานต่าง ๆ ของ ภาษา HTML โดยเฉพาะ แต่อย่างไรก็ตาม

รายวชิ า การโปรแกรมเวบ็ เบือ้ งตน จดั ทาํ โดย นางสาววริ ยา สขี าว เนอื งจากหลักการต่างๆ ของ ภาษา HTML ทีสร้างขึนมาใหม่นียังไม่ชัดเจนและสมบูรณ์มากนัก ดังนันจึงมีการปรับปรุงแก้ไขกันเรือยา จนถึงในป 1994 ได้พั ฒนาเปน HTML 2.0 ซึงถือเปน 25 การเปลียนแปลงครังสําคัญทีให้ ภาษา HTML ถูกนําไปใช้กันอย่างแพร่หลาย เนืองจากมีการ เพิมเติมลกั ษณะใหม่ ทีน่าสนใจหลายอย่าง เชน่ การแทรกรปู ภาพ,ทําฟอร์มในการรับข้อมูล, การ ใช้ตารางในการจัดรูปแบบ หลังจากนัน ภาษา HTML ก็ได้รับการพั ฒนาโดยลําดับเปนเวอร์ชัน 3.0, 3.2, 4.0, 4.01 และ XHTML ในป ค.ศ. 2004 กลุ่มบริษัทผู้สร้างเว็บเบราเซอร์ (Web Browse) ได้แก่ Apple, Mozilla และ Opera ได้รวมตัวกันก่อตังหน่วยงานทีมีชือว่า Web Hypertext Application Technology Working Group (WHATWG) เพื อสร้างมาตรฐานใหม่ และ ขยายขีดความสามารถของ ภาษา HTML ใหม้ ากขนึ กวา่ เดมิ ในขณะทีหน่ายงาน W3C นันเดิมมี โครงการทีจะพั ฒนา XHTML 2.0 แต่ต่อมาได้ยกเลิกโครงการดังกล่าว แล้วหันมาสนับสนุน กลุ่ม WHATWG แทน จนกระทังป ค.ศ. 2007 จึงได้มีการเผยแพร่ข้อกําหนดใหม่ของภาษา HTML เปนครังแรก ซงึ ถือวา่ เปนการเปลียนแปลงทีสําคัญอกี ครงั หนึงของ HTML โดยในเวอร์ ชนั นีกาํ หนดใหม้ ีชอื วา่ HTML5 และ ใชโ้ ลโกต้ ามรูปดา้ นลา่ งนี ทีมา: https://sites.google.com/site/namsunsan/html5-ni-kar-phathna-websit 2. ความหมายของ HTML HTMLหรือ HyperText Markup Language เปนภาษาคอมพิ วเตอร์รูปแบบหนึง ทีมี โครงสร้างการเขียนโดยอาศัยตัวกาํ กับ (Tag) ควบคมุ การแสดงผลขอ้ ความ, รูปภาพ หรือวตั ถุ อืนๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยายทีเรียกว่า Attribute สําหรับระบุ หรอื ควบคุมการแสดงผล ของเว็บได้ดว้ ย HTML เปนภาษาทีถูกพั ฒนาโดย World Wide Web Consortium (W3C) จาก แ ม่ แ บ บ ข อ ง ภ า ษ า SGML ( Standard Generalized Markup Language) โ ด ย ตั ด ความสามารถบางส่วนออกไป เพื อให้สามารถทําความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็น ดังกล่าว ทาํ ให้บริการ WWW เตบิ โตขยายตัวอยา่ งกวา้ งขวางตามไปดว้ ย Tag 3. Tag Tag เปนลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคําสัง หรือการลงรหัสคําสัง HTML ภายในเครืองหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที Tag HTML แบง่ ได้ 2 ลกั ษณะ คือ Tag เดยี ว เปน Tag ทีไมต่ ้องมกี ารปดรหัส เชน่ <img>, <BR> เปนตน้ Tag เปด/ปด เปน Tag ทีประกอบดว้ ย Tag เปด และ Tag ปด โดย Tag ปด จะมี เครืองหมาย slash ( / ) นําหน้าคําสังใน Tag นันๆ เช่น <B>…</B>, <P></P>เปนตน้

รายวชิ า การโปรแกรมเว็บเบื้องตน จัดทําโดย นางสาววริ ยา สขี าว 4. โครงสร้างพื นฐานของภาษา HTML 26 <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> ตวั อยา่ งการเขยี น <!DOCTYPE html> <html> <head> <title>Page Title(สว่ นนจี ะแสดงทไี ตเตลิ บาร์)</title> </head> <body> <!-- เนอื หาของเว็บเพจเริมตน้ ทีตรงนี --> <h1> This is a Heading (หวั ขอ้ )</h1> <p>This is a paragraph.(เนอื หา)</p> <!-- และสนิ สดุ ลงทตี รงนี --> </body> </html>

รายวิชา การโปรแกรมเวบ็ เบอ้ื งตน จดั ทําโดย นางสาววริ ยา สขี าว 27 ภาพแสดงโครงสรา้ งพื นฐานของภาษา HTML 5.อธิบายคําสงั <!DOCTYPE html> การประกาศให้เปน HTML5 <HTML></HTML> คําสงั ทีใช้กําหนดวา่ เปนเอกสาร HTML <HEAD></HEAD> คาํ สงั ทีใชก้ าํ หนดสว่ นอธิบายเอกสาร <TITLE> </TITLE> คําสงั ทีใช้กําหนดชอื หรอื ไตเตลิ ของเอกสาร <BODY></BODY> คาํ สงั ทีใช้บอกว่าเปนสว่ นของรายละเอยี ด <BR> คําสงั ทีใช้กําหนดให้ขนึ บรรทัดใหม่ <H1></H1> คาํ สงั กําหนดหัวขอ้ ระดบั 1 <P></P> คาํ สงั กําหนดใหเ้ ปนส่วนของเนือหา ยอ่ หนา้ <!-- หมายเหตุ --> ใชบ้ อกใหร้ ู้ว่าเปนหมายเหตุไมต่ ้องแสดงออกมาในเวบ็ เพจ 6. โปรแกรมทีใช้เขยี นภาษา HTML5 Notepad เปนโปรแกรมพืนฐานบน Windows : Open Start > Programs > Accessories > Notepad

รายวิชา การโปรแกรมเวบ็ เบอ้ื งตน จดั ทําโดย นางสาววริ ยา สีขาว การบันทกึ ไฟล์ ตอ้ งกาํ หนด file type .htm หรือ html 28 กาํ หนด encoding เปน UTF-8 เพือรองรบั ภาษาไทย เมอื เปดไฟล์ทีบนั ทกึ จะได้ดงั ภาพ 7. Attributes Attributes เปนส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครืองหมาย < > ในส่วน Tag เปดเท่านัน Tag คําสัง HTML แต่ละคําสัง จะมี Attribute แตกต่างกันไป มี จํ า น ว น ไ ม่ เ ท่ า กั น ก า รระบุ Attribute ม า ก ก ว่ า 1 Attribute ให้ ใช้ช่อ ง ว่ า ง เ ปน ตั ว คั น องคป์ ระกอบ HTML ทังหมดสามารถมแี อตทรบิ วิ ตค์ ณุ สมบตั ิให้ขอ้ มลู เพิ มเติม คุณสมบัติทีระบุ ไว้เสมอในแท็กเริมต้น แอททริบิวมักมาในชือคู่ / ค่าเช่น: name = \"value\" เช่น คําสัง <img src=\"img_girl.jpg\" width=\"500\" height=\"600\"> img คือ tag Src คอื attributes ทีใช้ระบุเสน้ ทางของภาพ width and height เปนattributes ทีระบุ ความกว้าง และสงู มหี นว่ ยพืนฐานเปน Pixels หรอื เปน % 8.property property คอื ตวั ระบุคุณสมบตั ทิ ีอยากเปลียนหรอื กําหนดคา่ โดยใสv่ alue คือคา่ ทกี ําหนดให้แก่ property โดยต้องมี colon (:) คันระหว่างชือ property กับค่าทีกาํ หนด แลว้ ปดดว้ ย Semicolon (;) property ในอีกรูปแบบใน tag <style></style> การเขียน property และ ค่าของมนั ต้องใสไ่ ว้ในเครอื งหมายวงเล็บปกกา ตวั อยา่ งเชน่ แบบที 1 <h1 style=\"font-size:40px;\">หัวขอ้ 1</h1> แบบที 2 <style> P { text-align: left; } </style>

รายวิชา การโปรแกรมเว็บเบื้องตน จัดทาํ โดย นางสาววิรยา สีขาว 29 Headings ใชใ้ นการกาํ หนดขนาดใหก้ ับข้อความทเี ปนหัวขอ้ เรือง ในเอกสารทีมีหวั ขอ้ เปนปลกี ย่อย สามารถแยกเปนลําดับของหวั เรืองได้อยา่ งชดั เจน รปู แบบ<hx> ... </hx>X = หมายเลขของหัวทีต้องการ 1–6 ตัวอยา่ งการเขียน การแสดงผล <!DOCTYPE html> <html><body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body></html> Bigger Headings ถ้าต้องการกําหนดหัวข้อให้มีขนาดใหญ่มากกว่าทีกําหนดใน 6 ระดับ จะต้องมีการ กําหนดคุณสมบัติ property ด้วยคําสัง font-size เปนการกําหนด attribute ด้วยคําสัง style เปนแบบ CSS ในภาษา html5 โดยการกําหนดใหเ้ ปน Pixel ตัวอย่างคําสงั <h1 style=\"font-size:60px;\">Heading 1</h1> HTML Horizontal Rules Horizontal Rules คือ เส้นคันแนวนอน โดยใช้ในการแบ่งเนือหาหรือคันเพื อความ สวยงามและความเปนระเบยี บของเนอื หา รูปแบบ<hr> ตวั อย่าง <!DOCTYPE html> <html> <head><title>การเขยี นคําสงั เสน้ คนั </title></head> <body> การแสดงผล <h1 style=\"font-size:40px;\">หัวขอ้ 1</h1> <p>เนอื หาสว่ นที 1 </p> <hr> <h2>This is heading 2</h2> <p>เนอื หาสว่ นที 2 </p> <hr> <h2>This is heading 2</h2> <p>เนอื หาสว่ นที 3</p> </body></html>

รายวิชา การโปรแกรมเว็บเบือ้ งตน จดั ทําโดย นางสาววริ ยา สขี าว 30 HTML Paragraphs คือ คําสังในการขึนย่อหน้า การเขียนภาษา HTML ในส่วนของเนือหา <P> </P> เปนการสังให้ขึนย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ) การกําหนดย่อหน้า ต้องใช้ คําสงั <P> รูปแบบการพิ มพ์ การเยือง ทีพิ มพ์ ในโปรแกรมเขียนเว็บจะแสดงรูปแบบออกมา ใน การเวน้ บรรทัด <br> คําสงั ทีใชก้ ําหนดใหข้ นึ บรรทัดใหม่ การเวน้ บรรทัดในโปรแกรมเขียนเว็บจะ ไม่มผี ลตอ่ รูปแบบของเนือหาทีแสดง การแสดงผล The HTML <pre> Element <PRE>...</PRE> การแสดงข้อความตามทีจัดจัดรูปแบบไว้ในไฟล์ต้นฉบับ เปนการกําหนด ตําแหนง่ การแสดงผลตามรูปแบบทีเราได้ทําการจัดในไฟล์ต้นฉบับ โดยในคําสังนีเราสามารถจัด ตําแหน่งทีเราต้องการให้แสดงผล โดยเรากําหนดด้วยคําสัง <PRE> ปด </PRE> จะทําให้เรา สามารถกําหนดตาํ แหนง่ การแสดงผลได้

รายวิชา การโปรแกรมเว็บเบื้องตน จัดทาํ โดย นางสาววิรยา สีขาว ตัวอยา่ ง 31 <!doctype html> <html><head><title>หนา้ แรก</title></head> การแสดงผล <body > <pre> รายรับ ขายของ 20000 บาท ดอกเบีย 30000 บาท รวม 7000 บาท </pre> </body></html> 12. HTML Text Formatting Formatting Elements คําสังในการจัดรูปแบบของข้อความในภาษา HTML5 มี ดว้ ยกันหลายคาํ สงั ดังนี  <b> - Bold text แสดงขอ้ ความเปนตัวหนา  <strong> - Important text แสดงข้อความสาํ คญั  <i> - Italic text แสดงขอ้ ความเปนตวั เอยี ง  <em> - Emphasized text แสดงขอ้ ความทีเนน้  <mark> - Marked text แสดงการระบายเน้นข้อความ  <small> - Small text แสดงข้อความขนาดเล็ก  <del> - Deleted text แสดงเสน้ ขดี ทบั ข้อความ  <ins> - Inserted text แสดงขอ้ ความแทรก  <sub> - Subscript text แสดงข้อความเปนตัวหอ้ ย  <sup> - Superscript text แสดงข้อความเปนตัวยกกําลัง ตัวอยา่ งการเขียน <!DOCTYPE html> <html><body> <b> - Bold text แสดงขอ้ ความเปนตวั หนา </b> <br> <strong> - Important text แสดงขอ้ ความสําคญั </strong> <br> <i> - Italic text แสดงขอ้ ความเปนตัวเอียง </i><br> <em> - Emphasized text แสดงข้อความทีเนน้ </em><br> <mark> - Marked text แสดงการระบายเนน้ ข้อความ </mark><br> <small> - Small text แสดงข้อความขนาดเล็ก </small><br> <del> - Deleted text แสดงเสน้ ขดี ทับข้อความ </del> <br> <ins> - Inserted text แสดงข้อความแทรก </ins><br> - Subscript text แสดงขอ้ ความเปนตวั หอ้ ย H₂O<br> - Superscript text แสดงข้อความเปนตวั ยกกําลัง 10² <br> </body></html>

การแสดงผล รายวชิ า การโปรแกรมเว็บเบ้อื งตน จัดทําโดย นางสาววริ ยา สขี าว 32

รายวชิ า การโปรแกรมเวบ็ เบ้ืองตน จดั ทาํ โดย นางสาววริ ยา สีขาว 33 The HTML Style Attribute Style เปน attribute ทีใช้กาํ หนดสี รปู แบบตวั อักษร ขนาด ตวั อักษรและการจดั รปู แบบอนื ๆให้กบั คาํ สงั ตา่ งๆในภาษา HTML5 The HTML style attribute has the following syntax: <tagname style=\"property:value;\"> ตวั อย่าง <p style=\"color:red\">I am a paragraph.</p> ตัวอยา่ งการเขยี น การแสดงผล <!DOCTYPE html> <html><body> <p>I am normal</p> <p style=\"color:red;\">I am red</p> <p style=\"color:blue;\">I am blue</p> <p style=\"font-size:50px;\">I am big</p> </body></html> HTML Background Color background-color เปน property ในการกาํ หนดสพี ืนหลังในองค์ประกอบ HTML ตัวอยา่ งการเขยี น การแสดงผล <!DOCTYPE html> <html> <body style=\"background-color:powderblue;\"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body></html> HTML Text Color Text Color การกําหนดสขี องข้อความ เปน property ในการกําหนดสพี ืนของ ข้อความในองคป์ ระกอบ HTML ตัวอยา่ งการเขยี น การแสดงผล <!DOCTYPE html> <html><body> <h1 style=\"color:blue;\">This is a heading</h1>

รายวิชา การโปรแกรมเวบ็ เบอ้ื งตน จดั ทําโดย นางสาววิรยา สขี าว <p style=\"color:red;\">This is a paragraph.</p> 34 </body></html> HTML Fonts การกาํ หนดรปู แบบของตวั อักษร เดมิ ใช้ tag Font แตร่ ปู แบบใหม่ของ HTML5 จะใช้ CSS Font-Family เปน property ในการกาํ หนดรปู แบบของข้อความในองคป์ ระกอบ HTML ตัวอย่างการเขียน การแสดงผล <!DOCTYPE html> <html><body> <h1 style=\"font-family:verdana;\">This is a heading</h1> <p style=\"font-family:courier;\">This is a paragraph.</p> </body></html> HTML Text Size การกาํ หนดขนาดตวั อกั ษร จะใช้ CSS Font-Size เปน property ในการกําหนดขนาด ของขอ้ ความในองคป์ ระกอบ HTML ตวั อย่างการเขยี น การแสดงผล <!DOCTYPE html> <html><body> <h1 style=\"font-size:300%;\">This is a heading</h1> <p style=\"font-size:160%;\">This is a paragraph.</p> </body></html> HTML Text Alignment การจดั ตําแหน่งขอ้ ความ จะใช้ CSS Text-align เปน property ในการกําหนดการจัด ตําแหน่งของขอ้ ความในองคป์ ระกอบ HTML ตวั อย่างการเขยี น การแสดงผล <!DOCTYPE html> <html><body> <h1 style=\"text-align:center;\">Centered Heading</h1> <p style=\"text-align:center;\">Centered paragraph.</p> </body></html> อธิบายคําสงั style attribute คําสงั ทีใช้สาํ หรับกําหนดรปู แบบในภาษา HTML elements background-color คาํ สงั ทีใชส้ าํ หรบั ใสส่ พี ืนหลงั

รายวชิ า การโปรแกรมเวบ็ เบ้อื งตน จัดทาํ โดย นางสาววริ ยา สขี าว color คําสงั ทีใช้กําหนดสขี องข้อความ 35 font-family คาํ สงั ทีใชก้ าํ หนดรูปแบบของขอ้ ความ font-size คําสงั ทีใชก้ าํ หนดขนาดของตัวอักษร text-align คําสงั ทีใชจ้ ัดตาํ แหนง่ ของขอ้ ความ Unordered HTML List การแสดงขอ้ มูลแบบรายการดว้ ย <ul> <ul> เปนแท็กเรมิ ต้นสําหรับการแสดงรายการเครอื งหมายด้วยสญั ลักษณแ์ สดงหัวขอ้ ย่อย (วงกลมสดี ําขนาดเล็ก) โดยค่าเริมตน้ แต่ละรายการเริมตน้ ดว้ ยแท็ก <li> (tag แบบเปด/ปด) ตวั อยา่ ง <ul> <li>ข้อมูล1</li> <li> ขอ้ มูล2 </li> <li> ขอ้ มูล3 </li> </ul> ตัวอยา่ งการเขียน การแสดงผล <!DOCTYPE html> <html><body> <h2>An ordered HTML list</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body></html> Unordered HTML List - Choose List Item Marker การใช้ CSS ดว้ ย property : list-style-type เพือกําหนดรปู แบบรายการทแี สดง ดงั นี:  Value Description  disc กําหนดค่ารายการเปนวงกลมสีดาํ (default)  Circle กาํ หนดค่ารายการเปนวงกลม  square กาํ หนดค่ารายการเปนสเี หลยี มสีดาํ  None ไม่แสดงสญั ลักษณห์ น้ารายการ

Example - Disc รายวชิ า การโปรแกรมเวบ็ เบื้องตน จดั ทาํ โดย นางสาววริ ยา สขี าว Example - Circle 36 Example - Square Example - None Nested HTML Lists ลาํ ดบั รายการทซี ้อนกัน

รายวิชา การโปรแกรมเว็บเบ้อื งตน จดั ทาํ โดย นางสาววริ ยา สขี าว 37 HTML Ordered Lists การเขยี นเรยี งลาํ ดบั รายการดว้ ยตวั เลข/ตัวอักษร แท็ก HTML <ol> กาํ หนดรายการด้วย ตัวเลขหรือตวั อักษร โดยคา่ เริมตน้ แต่ละรายการเรมิ ต้นดว้ ยแท็ก <li> (tag แบบเปด/ปด) โดย คา่ เริมต้นจะเปนตัวเลข <ol> <li>ข้อมลู 1</li> <li> ข้อมลู 2 </li> <li> ขอ้ มลู 3 </li> </ol> :ตัวอยา่ ง

รายวชิ า การโปรแกรมเวบ็ เบอื้ งตน จัดทําโดย นางสาววิรยา สีขาว 38 Ordered HTML List - The Type Attribute กาํ หนดประเภทของตัวรายการ <OL> tag <OL>กาํ หนดประเภทของตัวทาํ เครืองหมายรายการ ดว้ ย attribute type : Type Description type=\"1\" เรยี งลําดบั รายการแบบเปนตัวเลขค่าเริมต้น (default) type=\"A\" เรียงลาํ ดับรายการแบบเปนตัวอกั ษรตวั ใหญ่ เริมจาก A type=\"a\" เรยี งลําดบั รายการแบบเปนตวั อักษรตัวเล็ก เริมจาก a type=\"I\" เรยี งลาํ ดับรายการแบบเปนตัวเลขโรมนั เริมจาก I type=\"i\" เรียงลําดับรายการแบบเปนตัวเลขโรมัน เริมจาก i Ordered List with Numbers Ordered List with Letters

รายวชิ า การโปรแกรมเว็บเบ้อื งตน จดั ทาํ โดย นางสาววริ ยา สขี าว 39 Ordered List with Roman Numbers Control List Counting การกําหนดตัวนับรายการ การเรยี งลําดบั รายการจะเรมิ จาก 1 attribute start จะสามารถกาํ หนดเลขเริมต้นเองได้

รายวิชา การโปรแกรมเว็บเบื้องตน จัดทําโดย นางสาววิรยา สขี าว HTML Description Lists การเรยี งลําดบั รายการดว้ ย DL <dl>เปน tag เริมต้นการกาํ หนดรายการ <dt>เปน tag กําหนดคาํ (ชอื ) และ <dd> เปน tag 40 อธิบายแต่ละคํา:

รายวชิ า การโปรแกรมเว็บเบื้องตน จัดทาํ โดย นางสาววริ ยา สีขาว 41 HTML colors สามารถระบเุ ปนชอื สี และยงั มีโหมดสที ใี ห้เลือกหลายโหมดสี RGB, HEX, HSL, RGBA, HSLA ซงึ พั ฒนามาเพิมใน HTML เวอร์ชนั ใหมๆ่ Color Names ในการกําหนดสตี ่างๆ คําสงั ในภาษา HTML ปกติจะมีชอื สไี มก่ ีชอื เช่น red ,Green , Blue แต่ HTML5 พั ฒนาชอื สีใหไ้ ด้ใช้จํานวนมาก ตัวอย่างชอื สีบางส่วน Background Color การกําหนดสพี ื นดว้ ยชอื สี ตัวอย่างการเขยี น <!DOCTYPE html> <html><body> <h1 style=\"background-color:Tomato;\">Tomato</h1> <h1 style=\"background-color:Orange;\">Orange</h1> <h1 style=\"background-color:DodgerBlue;\">DodgerBlue</h1> <h1 style=\"background-color:MediumSeaGreen;\">MediumSeaGreen</h1> <h1 style=\"background-color:Gray;\">Gray</h1> <h1 style=\"background-color:SlateBlue;\">SlateBlue</h1> <h1 style=\"background-color:Violet;\">Violet</h1> <h1 style=\"background-color:LightGray;\">LightGray</h1> </body></html> การแสดงผล

รายวชิ า การโปรแกรมเว็บเบื้องตน จดั ทาํ โดย นางสาววริ ยา สขี าว 42 Text Color การกาํ หนดสตี ัวอกั ษรด้วยชอื สี การแสดงผล ตวั อยา่ งการเขียน <!DOCTYPE html> <html> <body> <h3 style=\"color:Tomato;\">HTML Colors</h3> <p style=\"color:DodgerBlue;\">การใช้ style ดว้ ย property สี Color โดยใชช้ อื สี</p> </body> </html> Border Color การใสเ่ สน้ ขอบ 2px ขนาดของเส้น 2 pixels Solid การกาํ หนดรปู แบบเส้นแบบทบึ ตัวอยา่ งการเขยี น การแสดงผล Color Values ในภาษา HTML โหมดสสี ามารถใช้ไดท้ ัง RGB values, HEX values, HSL values, RGBA values, and HSLA values: ตัวอย่างการกําหนดคา่ สี \"Tomato“ โดยใช้ระบตุ วั เลขของแตล่ ะโหมดส:ี <h1 style=\"background-color:rgb(255, 99, 71);\">...</h1> <h1 style=\"background-color:#ff6347;\">...</h1> <h1 style=\"background-color:hsl(9,100%, 64%);\">...</h1>

รายวชิ า การโปรแกรมเวบ็ เบื้องตน จัดทาํ โดย นางสาววริ ยา สขี าว 43 การระบใุ หส้ มี คี วามโปร่งใส 0.5 (1 คือ สที บึ แบบ 100%,0.5 คอื โปรง่ ใส 50%) <h1 style=\"background-color:rgba(255, 99, 71, 0.5);\">...</h1> <h1 style=\"background-color:hsla(9, 100%, 64%, 0.5);\">...</h1> HTML RGB and RGBA Colors RGB Color Values : rgb(red, green, blue) การกําหนดค่าสีในแตล่ ะชอ่ งจะเปนการระบคุ ่า สแี ดง , เขยี ว และนําเงนิ ตวั เลขทรี ะบจุ ะเรมิ ที 0 ถงึ 255 จะได้ระดับสีถา้ คาํ นวณ คอื 256 x 256 x 256 = 16,777,216 สี ตัวอยา่ งคา่ สี : RGB ระดบั ค่าสดี ํา ไป ขาว ตัวอย่าง การกําหนดคา่ สีตา่ งๆ

รายวิชา การโปรแกรมเวบ็ เบ้อื งตน จดั ทําโดย นางสาววิรยา สขี าว 44 การแสดงผล ตวั อยา่ ง การกําหนดคา่ สี ระดับสีเทาตา่ งๆ การแสดงผล

รายวชิ า การโปรแกรมเว็บเบื้องตน จัดทําโดย นางสาววริ ยา สขี าว 45 RGBA Color Values rgba(red, green, blue, alpha) Alpha เปนการระบคุ วามโปรง่ ใส เรมิ จาก 0.0 (โปร่งใส 100%) ถงึ 1.0 (ไม่โปรง่ ใส สแี บบทึบ 100%) ตัวอยา่ งการเขยี น การแสดงผล HSL Value hsl(hue, saturation, lightness)

รายวิชา การโปรแกรมเวบ็ เบือ้ งตน จัดทาํ โดย นางสาววริ ยา สีขาว Hue คอื เนือสี จาก 0 ถงึ 360. 0 คือสีแดง, 120 คอื สีเขียว, และ 240 คอื สนี ําเงนิ . 46 Saturation ค่าความสดของส,ี 0% คือจะมสี เี ทา, 100% คอื สสี ดไม่ผสมสเี ทา Lightness ค่าความมดี ไปสว่างของสี 0% สดี าํ , 100% คือสขี าว ตัวอย่างการเขียน การแสดงผล

รายวชิ า การโปรแกรมเว็บเบอ้ื งตน จดั ทําโดย นางสาววิรยา สขี าว 47 Saturation คา่ ความสดของสี ความอิมตวั ของสี คือเปนลกั ษณะความเขม้ ของสี ความสดของสี ลกั ษณะการกําหนดเปน % 100% เปนสีทีบริสุทธิไม่มเี ฉดสเี ทา 50% เปนสเี ทา 50% แตย่ ังสามารถเห็นสีได้ 0% เปนสีเทาทังหมด และจะไมเ่ ห็นสอี ีกต่อไป แสดงการกําหนด Saturation Lightness คา่ ความมดื ไปสวา่ งของสี ความสวา่ งของสีสามารถอธบิ ายได้วา่ เราตอ้ งการใหแ้ สงสเี ทา่ ใดโดยที จะเปนลกั ษณะ การผสมสดี ํา และขาวลงในสใี นการกําหนด % ของ Lightness เชน่ 0% หมายถงึ ไม่มแี สง (สีดาํ ), 50% หมายถึง แสง 50% (ไม่มดื หรอื สวา่ ง) 100% หมายถึง ความสวา่ งเตม็ ที (สีขาว) ตัวอยา่ งแสดงการกําหนด Lightness การกาํ หนดระดับสเี ทา เฉดสีเทามกั ถูกกาํ หนดโดยการตังคา่ เฉดสแี ละความอิมตวั ของสเี ปน 0 และปรับความสว่าง จาก 0% ถึง 100% เพือให้ไดเ้ ฉดสีเข้ม / จาง: ตัวอย่างแสดงการกําหนดระดบั สีเทา

รายวชิ า การโปรแกรมเวบ็ เบอ้ื งตน จดั ทาํ โดย นางสาววิรยา สขี าว 48 HSLA Value hsla(hue, saturation, lightness, alpha) Alpha เปนการระบคุ วามโปรง่ ใส เรมิ จาก 0.0 (โปรง่ ใส 100%) ถงึ 1.0 (ไมโ่ ปรง่ ใส สแี บบทบึ 100%)ตัวอยา่ ง ตัวอยา่ งการเขียน การแสดงผล HTML HEX Colors

รายวิชา การโปรแกรมเว็บเบือ้ งตน จดั ทาํ โดย นางสาววริ ยา สขี าว HEX Color Values HTML มีการกําหนดสเี ปนเลขฐาน 16 ซงึ เปนทนี ยิ มใช้ โดยมีค่าจาก 49 :#rrggbb rr (red),gg (green) และ bb (blue) เลขฐาน 16 เริมจาก 00 (ตวั เลขฐาน16 คอื 0-9) และ ff (ตัวเลข 10-15 คือ a-f) ตัวอย่าง #ff0000 เปนสแี ดง เพราะวา่ ระดบั ค่าสี สูงสดุ (ff) ค่าระดบั สีตําสดุ คือ(00)เมอื แมส่ อี นื เปน00 ก็จะไมแ่ สดงสี จงึ แสดงแค่สแี ดง ตัวอยา่ งการกาํ หนดคา่ สี การแสดงผล

รายวชิ า การโปรแกรมเวบ็ เบือ้ งตน จดั ทาํ โดย นางสาววิรยา สขี าว ตวั อย่าง ค่าสีระดับสีดาํ ไป ขาว การแสดงผล 50 ตัวอย่างสที รี องรับทกุ บราวเซอร์ เบราวเ์ ซอรส์ มยั ใหม่ทงั หมดรองรบั ชอื สี 140 รายการต่อไปนี AliceBlue #DEB887 DarkGray DarkSlateGray #FF00FF CadetBlue #A9A9A9 #2F4F4F Gainsboro #F0F8FF #5F9EA0 DarkGrey #DCDCDC AntiqueWhite Chartreuse #A9A9A9 DarkSlateGrey GhostWhite #7FFF00 DarkGreen #2F4F4F #F8F8FF #FAEBD7 Chocolate #006400 Aqua #D2691E DarkKhaki DarkTurquoise Gold #BDB76B #00CED1 #FFD700 #00FFFF Coral DarkMagenta DarkViolet GoldenRod Aquamarine #FF7F50 #8B008B #9400D3 #DAA520 CornflowerBlu DarkOliveGree DeepPink #7FFFD4 #FF1493 Gray Azure e n #808080 #6495ED #556B2F DeepSkyBlue #F0FFFF Cornsilk DarkOrange #00BFFF Grey Beige #FFF8DC #FF8C00 DimGray #808080 Crimson DarkOrchid #696969 #F5F5DC #DC143C #9932CC DimGrey Green Bisque DarkRed #696969 #008000 Cyan #8B0000 GreenYellow #FFE4C4 #00FFFF DarkSalmon DodgerBlue #ADFF2F Black DarkBlue #E9967A #1E90FF HoneyDew #00008B DarkSeaGreen FireBrick #F0FFF0 #000000 DarkCyan #8FBC8F #B22222 HotPink #008B8B DarkSlateBlue #FF69B4 BlanchedAlmond DarkGoldenRo #483D8B FloralWhite IndianRed #FFFAF0 #CD5C5C #FFEBCD d Blue #B8860B ForestGreen Indigo #228B22 #4B0082 #0000FF Fuchsia BlueViolet #8A2BE2 Brown #A52A2A BurlyWood