รายวชิ า การโปรแกรมเว็บเบอื้ งตน จดั ทําโดย นางสาววริ ยา สขี าว Ivory LightSlateGrey MediumViolet #FFEFD5 SlateBlue 51 #6A5ACD #FFFFF0 #778899 Red PeachPuff SlateGray #708090 Khaki LightSteelBlue #C71585 #FFDAB9 SlateGrey #708090 #F0E68C #B0C4DE MidnightBlue Peru Snow Lavender LightYellow #191970 #CD853F #FFFAFA SpringGreen #E6E6FA #FFFFE0 MintCream Pink #00FF7F SteelBlue LavenderBlush Lime #F5FFFA #FFC0CB #4682B4 #FFF0F5 #00FF00 MistyRose Plum Tan #D2B48C LawnGreen LimeGreen #FFE4E1 #DDA0DD Teal #7CFC00 #32CD32 Moccasin PowderBlue #008080 LemonChiffon Linen #FFE4B5 #B0E0E6 Thistle #D8BFD8 #FFFACD #FAF0E6 NavajoWhite Purple Tomato #FF6347 LightBlue Magenta #FFDEAD #800080 Turquoise #40E0D0 #ADD8E6 #FF00FF Navy RebeccaPurple Violet LightCoral Maroon #000080 #663399 #EE82EE #F08080 #800000 OldLace Red Wheat #F5DEB3 LightCyan MediumAqua #FDF5E6 #FF0000 White #E0FFFF Marine Olive RosyBrown #FFFFFF WhiteSmoke LightGoldenRo #66CDAA #808000 #BC8F8F #F5F5F5 Yellow dYellow MediumBlue OliveDrab RoyalBlue #FFFF00 YellowGreen #FAFAD2 #0000CD #6B8E23 #4169E1 #9ACD32 LightGray MediumOrchid Orange SaddleBrown #D3D3D3 #BA55D3 #FFA500 #8B4513 LightGrey MediumPurple OrangeRed Salmon #D3D3D3 #9370DB #FF4500 #FA8072 LightGreen MediumSeaGr Orchid SandyBrown #90EE90 een #DA70D6 #F4A460 LightPink #3CB371 PaleGoldenRo SeaGreen #FFB6C1 MediumSlateBl d #2E8B57 LightSalmon ue #EEE8AA SeaShell #FFA07A #7B68EE PaleGreen #FFF5EE LightSeaGreen MediumSpring #98FB98 Sienna #20B2AA Green PaleTurquoise #A0522D LightSkyBlue #00FA9A #AFEEEE Silver #87CEFA MediumTurqu PaleVioletRed #C0C0C0 LightSlateGray oise #DB7093 SkyBlue #778899 #48D1CC PapayaWhip #87CEEB ทีมาขอ้ มูลสี https://www.w3schools.com/tags/ref_colornames.asp
รายวิชา การโปรแกรมเว็บเบอื้ งตน จัดทําโดย นางสาววริ ยา สีขาว 52 CSS ย่อมาจาก Cascading Style Sheet มกั เรียกโดยยอ่ วา่ \"สไตล์ชตี \" คือภาษาทีใช้ เปนส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที CSS กําหนดกฎเกณฑ์ในการ ระบุรูปแบบ (หรือ \"Style\") ของเนือหาในเอกสาร ซึงการกําหนดรูปแบบ หรือ Style นีใช้ หลักการของการแยกเนือหาเอกสาร HTML ออกจากคําสังทีใช้ในการจัดรูปแบบการแสดงผล กําหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึนอยู่กับเนือหาของเอกสาร เพื อให้ง่ายต่อการ จัดรูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีทีมีการเปลียนแปลงเนือหา เอกสารบ่อยครัง หรือต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของ ความสมําเสมอทวั กนั ทุกหนา้ เอกสารภายในเว็บไซตเ์ ดียวกัน โดยกฎเกณฑ์ในการกําหนดรูปแบบ (Style) เอกสาร HTML ถกู เพิมเข้ามาครังแรกใน HTML 4.0 เมือปพ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ทีกาํ หนดโดย องคก์ ร World Wide Web Consortium หรอื W3C CSS SYNTEX Selector ระบชุ นิดของ เนอื หาที/ตอ้ งการจัดรปู แบบ เช่น tag, id, class Selector Property ระบุรูปแบบของ Style ที/ต้องการนํามาใชก้ บั Selector เช่น colors, fonts, alignment Value ระบุค่าสาํ หรับ Property เชน่ blue กาํ หนดใหก้ ับ color property Styling HTML with CSS CSS แบง่ ออกเปน 3 รูปแบบ Inline – การเขยี นแบบ style attribute ใน tag ของ HTML Internal – การเขยี นแบบ tag <style> ไวใ้ ช้โดยใส่ไว้ในสว่ นหัว<head> External – การเขียนไฟล์ CSS แยกเปนอีกไฟล์และเรียกใช้ การเรียกใช้จะกําหนดไวท้ ี สว่ นหัวของเอกสารซงึ เปนทีนิยมเพราะจดั การงา่ ย สามารถเรียกใชไ้ ดท้ ุกหน้า เมือมีการ เปลียนแปลงรูปแบบแกเ้ พี ยงจดุ เดยี ว หน้าทเี รยี กใช้จะเปลยี นตามทีแกใ้ ห้ทงั หมด Inline CSS ตวั อยา่ ง Inline CSS กําหนดหวั ขอ้ ระดับที 1 ให้ขอ้ ความเปนสีนาํ เงนิ <h1 style=\"color:blue;\">This is a Blue Heading</h1> การเขยี นแบบ tag <style> ไว้ใชโ้ ดยใส่ไวใ้ นส่วนหวั <head>
ตวั อยา่ งการเขยี น รายวิชา การโปรแกรมเวบ็ เบื้องตน จัดทําโดย นางสาววิรยา สีขาว 53 การแสดงผล ตัวอยา่ งการเขยี น การแสดงผล ข้อสังเกต tag <h1> จะไม่แสดงรปู แบบระบุ แต่ tag <p> ทังหมดจะแสดงรปู แบบ ไม่วา่ จะมี การระบุ id หรอื class External CSS การเขียนไฟล์ CSS แยกไฟล์และเรยี กใช้ การเรยี กใชจ้ ะกําหนดไวท้ ีส่วนหัวของเอกสาร ดว้ ยคาํ สัง link ใน tag <head> เช่น <link rel= “stylesheet\" href=\"styles.css\">
รายวชิ า การโปรแกรมเวบ็ เบื้องตน จดั ทาํ โดย นางสาววริ ยา สขี าว ตัวอยา่ งการเขยี น 54 การแสดงผล styles.css จะอยู่ในโฟลเดอร์ในเอกสารทเี ขียนอ้างถงึ โดยพิ มพ์ คําสงั ดงั นี ตวั อยา่ งการเขยี น การแสดงผล
CSS Border การใสเ่ ส้นขอบให้ข้อความ รายวิชา การโปรแกรมเวบ็ เบ้อื งตน จัดทาํ โดย นางสาววริ ยา สขี าว ตัวอย่างการเขยี น 55 การแสดงผล CSS Padding ช่องว่างระหวา่ งเสน้ กับขอ้ ความ ตัวอยา่ งการเขยี น การแสดงผล
รายวิชา การโปรแกรมเว็บเบ้อื งตน จัดทาํ โดย นางสาววิรยา สีขาว CSS Margin ช่องว่างระหว่างเสน้ ขอบดา้ นนอก ตัวอย่างการเขียน 56 การแสดงผล ID SELECTOR } กําหนด Selector ขึนตน้ ดว้ ย # ตามด้วยชอื id { ระบุ properties ทีตอ้ งการ; ตวั อย่างการระบุ id #Menu { border-width: 2px; border-style: solid; } ใช้ id ทีสร้างขนึ <div id=\"Menu\">...</div> The id Attribute กําหนดรูปแบบไว้ที tag style เพือระบุ id attribute ใน tag head ตัวอย่างการกําหนด id <style> #p01 { color: blue; } </style> การใชค้ า่ id ระบชุ อื id ทีกําหนดไว้ <p id=\"p01\">I am different</p>
ตัวอยา่ งการเขยี น รายวชิ า การโปรแกรมเว็บเบ้อื งตน จัดทาํ โดย นางสาววริ ยา สขี าว 57 การแสดงผล ตวั อย่างการเขยี น การแสดงผล
รายวชิ า การโปรแกรมเวบ็ เบือ้ งตน จัดทาํ โดย นางสาววริ ยา สีขาว HTML The class Attribute 58 การกําหนด Class <style> p.error { color: red; } </style> การใช้ค่า Class ระบุชอื Class ทีกําหนดไว้ <p class=\"error\">I am different too.</p> ตัวอย่างการเขยี น การแสดงผล tag ต่างๆสามารถใช้ Class ได้ การแสดงผล
ตัวอยา่ งการเขยี น รายวิชา การโปรแกรมเว็บเบอ้ื งตน จดั ทาํ โดย นางสาววริ ยา สขี าว 59 การแสดงผล ตัวอย่าง การกําหนด class ขนึ ตน้ ดว้ ย tag p จะใช้ไดก้ ับ tag p paragraph เท่านัน ใน tag h1 ทีเรยี กใช้ class กไ็ ม่แสดง style ออกมา
ตัวอยา่ งการเขียน รายวชิ า การโปรแกรมเว็บเบอื้ งตน จัดทําโดย นางสาววริ ยา สขี าว 60 การแสดงผล External References การอา้ งอิง CSS ทีอยภู่ ายนอก กรณรี ะบุ CSS ด้วย URL <link rel=\"stylesheet\" href=\"https://www.w3schools.com/html/styles.css\"> กรณรี ะบุ CSS ทีอยูใ่ นตาํ แหนง่ โฟลเดอร์อนื ๆ <link rel=\"stylesheet\" href=\"/html/styles.css\"> กรณรี ะบุ CSS ทีอย่ใู นตําแหนง่ เดยี วกันไม่ระบุโฟลเดอร์ <link rel=\"stylesheet\" href=\"styles.css\"> ตัวอย่างการเขียน การแสดงผล
รายวิชา การโปรแกรมเวบ็ เบ้อื งตน จัดทําโดย นางสาววริ ยา สขี าว External style sheets 61 ไฟลช์ อื styles.css จะอย่ใู น URL/โฟลเดอร์ ในเอกสารทเี ขยี นอา้ งถงึ ไฟล์เอกสาร html เชน่ index.html ไฟล์เอกสาร css ชอื ไฟล์ mystyle.css การแสดงผล MULTIPLE SELECTORS สามารถระบุ selectors ไดห้ ลายอันพร้อมกนั h1 {font-family: Impact, Charcoal, sans-serif;font-size: 40px;} h2 {font-family: Impact, Charcoal, sans-serif;font-size: 20px;} h1, h2 {font-family: Impact, Charcoal, sans-serif;}
รายวชิ า การโปรแกรมเวบ็ เบ้ืองตน จัดทาํ โดย นางสาววริ ยา สขี าว 62 HTML Links - Hyperlinks การเชอื มโยงเอกสารเว็บด้วยการ Links โดยใชเ้ มาสค์ ลิกที ข้อความ หรอื รปู ภาพ ปุมต่างๆ เพือเขา้ ไปดูเอกสารอนื ๆ ซึงการ Links เปนส่วนสาํ คญั ของการ ทําเว็บไซตท์ ตี ้องจดั การ Navigation ให้เขา้ ถึงเนือหามีประสิทธิภาพ ซึงมีการเชอื มโยงทงั ภายในหน้าเดียวกัน คนละหน้า หรอื เชอื มโยงไปด้วย URL ในเวบ็ ไซต์อืนๆ HTML Links - Syntax Hyperlinks ใช้ tag <a> :<a href=\"url\">link text</a> Local Links การเชอื มโยงไปยังเนือหาในเว็บ/ไดเรกทรอรเี ดยี วกนั <a href=“index.html\">Click</a> ตวั อย่างการเขยี น การแสดงผล HTML Links - The target Attribute target เปน attribute ทีระบกุ ารวิธีเปดเอกสารทที ําการเชอื มโยง ซึงมีดังนี _blank เปดการเชอื มโยงเอกสารจะเปดแทบ๊ ใหมโ่ ดยไมท่ บั หน้าเดมิ ตวั อยา่ งโคด้ : <a href=\"..........\" target=\"_blank\"> _self เปดการเชอื มโยงโดยคลกิ แลว้ เนอื หาในหน้าเปดจะแทนทีหนา้ เดมิ ทีกําลงั เปด ซึงจะเปน ค่าพืนฐานของการเชอื มโยงแม้จะไมร่ ะบุ target นี ตวั อยา่ งโคด้ : <a href=\"..........\" target=\"_self\">
รายวชิ า การโปรแกรมเว็บเบอื้ งตน จดั ทําโดย นางสาววริ ยา สขี าว _parent เปดการเชอื มโยงเอกสารไปยงั เฟรมหลกั (กรณีทแี บ่งเฟรมในหนา้ นัน) 63 ตัวอย่างโคด้ : <a href=\"..........\" target=\"_parent\"> _top เปดการเชอื มโยงเอกสารแบบเต็มหนา้ ของหน้าตา่ งๆเอกสารนนั ตัวอยา่ งโคด้ : <a href=\"..........\" target=\"_top\"> framename เปดการเชอื มโยงเอกสารดว้ ยการใช้ชอื เฟรมทีกําหนดไว้ (กรณแี บ่งเฟรม) ตวั อยา่ งโคด้ : <a href=\"..........\" target=“mainframe\"> HTML Links - Image as a Link การใช้รปู ภาพในการเชือมโยงเอกสาร Tag <img src =“ระบุไดเรกทรอรีภาพ” > Tag alt เปนคาํ อธบิ ายภาพ ตวั อย่างการเขยี น การแสดงผล Button as a Link การสร้างปุมในการเชือมโยง ในการระบุการ Tag <button> ใช้สําหรับสร้างปุมในการเชือมโยงเอกสาร มี attribute เชอื มโยงใช้ onclick ตัวอย่างการเขยี น การแสดงผล
รายวชิ า การโปรแกรมเวบ็ เบอื้ งตน จดั ทาํ โดย นางสาววิรยา สขี าว Link Titles การใส่ชอื เรืองการเชอื มโยง 64 title เปน attribute เปนการกาํ หนดรายละเอียดทจี ะแสดงเมอื นําเมาส์ชไี ปยัง ตําแหนง่ ที เชอื มโยง จะมขี อ้ ความแสดงตามทีกําหนดเอาไวใ้ น title ตัวอย่างการเขยี น การแสดงผล External Paths การเชือมโยงไปยังเอกสารภายนอก การเชือมโยงไปยังหน้าเอกสารสามารถอ้างอิงได้ทัง URL เปนชือเว็บไซต์ หรือไปยังหน้านันๆ บนเวบ็ ไซตจ์ ริงๆ ตวั อย่าง การเชอื มโยงบนเว็บเพจ การเชอื มโยงไปยังทีอยขู่ องไฟล์ทีอย่ใู นโฟลเดอร์ data บนเว็บไซต์เดยี วกนั : <a href=\"/data/web01.html\">HTML tutorial</a> การเชอื มโยงไปยงั ทีอยูข่ องไฟล์ทีอยู่ในโฟลเดอรเ์ ดยี วกนั บนเวบ็ ไซต์เดียวกัน : <p><a href=\"web02.html\">HTML Link</a></p> / จะใช้คนั ในโฟลเดอร์/ไดเรกทรอรยี อ่ ยๆ จนระบุตาํ แหน่งเอกสารได้ ตวั อยา่ งการเขยี น การแสดงผล
ตวั อย่างการเขยี น รายวชิ า การโปรแกรมเว็บเบอ้ื งตน จัดทาํ โดย นางสาววริ ยา สีขาว 65 การแสดงผล HTML Links - Different Colors การกําหนดสีใหก้ บั การเชือมโยง ปกตกิ ารกําหนดการเชอื มโยงจะมีสีพืนฐานทแี สดงเมือชเี มาสไ์ ปทจี ดุ ทีกาํ หนดการเชอื มโยง จะมีสนี ําเงนิ และขีดเสน้ ใต้ เมือคลิกแลว้ จะมสี ีมว่ งและขดี เสน้ ใต้ ลิงค์ทีกาํ ลงั ใช้ จะมีสีแดง และ ขีดเส้นใต้ ซึงเราสามารถกําหนดสใี ห้เปนสีทเี ราตอ้ งการได้ การเปลียนสี Link ดว้ ย CSS ตวั อย่างการเขียน <!DOCTYPE html> <html><head> <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent;
รายวชิ า การโปรแกรมเวบ็ เบ้อื งตน จดั ทาํ โดย นางสาววิรยา สีขาว text-decoration: underline; 66 } การแสดงผล a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style></head> <body> <h2>Link Colors</h2> <p>You can change the default colors of links</p> <a href=\"html_images.asp\" target=\"_blank\">HTML Images</a> </body></html> Link Buttons การสร้างปมุ Link ด้วย CSS ตวั อยา่ งการเขียน การแสดงผล
รายวิชา การโปรแกรมเว็บเบ้ืองตน จัดทาํ โดย นางสาววิรยา สขี าว HTML Links - Create Bookmarks การเชือมโยงด้วยการสรา้ ง Bookmarks 67 การสร้าง Bookmarks กรณเี นือหาในหน้าเวบ็ มคี วามยาว หรือต้องการใหเ้ ข้าถึงเนือหาในหนา้ ทีอาจจะแบ่งหัวข้อยอ่ ยไว้ หรอื มีหวั ขอ้ ย่อยทีอา้ งถงึ อยู่คนละหนา้ จะต้องสรา้ ง bookmark ก่อน แลว้ จงึ กําหนดการเชอื มโยงเมือคลกิ link แถบเลือนจะเคลอื นทขี นึ ลงตามตําแหน่งทีทาํ bookmark ไว้ สร้าง bookmark ดว้ ย attribute id ไวท้ ตี าํ แหนง่ ทตี อ้ งการในหน้าเว็บ : <h2 id=\"C4\">Chapter 4</h2> แล้วเขยี นคําส่งเชอื มโยงไปยงั ตาํ แหน่ง : <a href=\"#C4\">Jump to Chapter 4</a> การเขียนเชอื มโยง bookmarks ไปยงั หนา้ อนื ๆทอี ยใู่ นเว็บ <a href=“index.html#C4\">Jump to Chapter 4</a> ตวั อย่างการเขยี น การแสดงผล
รายวิชา การโปรแกรมเว็บเบ้อื งตน จัดทําโดย นางสาววิรยา สีขาว Horizontal List with CSS 68 การเขียนรายการแบบแนวนอนดว้ ย CSS การเขยี นรายการด้วย HTML สามารถนาํ ไปเขียน รปู แบบต่างๆด้วย CSSโดยการใชร้ ปู แบบ style ในการเขยี นรายการแนวนอนเพือทําเมนูบาร์ ด้วย List navigation menu การเขียนเมนู Property อธิบายเพิ มเตมิ text-decoration นันสาํ หรบั เพิมลูกเล่นใหก้ บั ขอ้ ความ โดยจะมคี า่ ดงั นี (Value) none : ไมท่ ําอะไรกับขอ้ ความ underline : ขีดเส้นใต้ขอ้ ความ overline : ขีดเส้นเหนือขอ้ ความ line-through : ขีดเสน้ ทับข้อความ blink : ข้อความกระพริบ
รายวิชา การโปรแกรมเว็บเบ้อื งตน จดั ทาํ โดย นางสาววริ ยา สีขาว Overflow :ข้อความเกนิ หรือ ลน้ สามารถกาํ หนดว่าจะเกบ็ เนอื หาหรอื เพิมแถบเลือน เมอื เนอื หามีขนาดใหญม่ ากเกนิ ไปหรือล้น ทีจะพอดกี บั พืนทีทีกาํ หนด คุณสมบตั ขิ อง overflow มี 69 ค่าตอ่ ไปนี (Value) visible = ชดั เจน คอื คา่ เริมตน้ overflow ไม่ไดถ้ กู ตัดเนอื หา และแสดงเนอื หา ภายนอก element จนลน้ ออกมา hidden = ซ่อน คือ จะซ่อนส่วนทีเกินเนอื หา ทีเหลือจะไมใ่ ห้ปรากฏให้เหน็ เหมอื นกบั การตดั ออกไปเลย จะแสดงเท่ากบั พืนทีกาํ หนดไวเ้ ท่านัน scroll = เลอื น คอื เนอื หาทีลน้ จะถกู ตดั และจะมีแถบเลือนมาชว่ ยในการเลือนดูเนอื หา ทีถูกตัดออกไป auto = อัตโนมตั ิ คอื เมอื มีเนือหามากเกนิ ไป จะมกี ารปรับให้มีแถบเลอื นมาชว่ ยโดย อัตโนมัตเิ ลย ทนั ที คล้ายกับ scroll แต่ขนึ อยกู่ บั เนือหามากหรือน้อย Margin, Padding Property Description margin-top ใชก้ าํ หนดระยะห่างระหวา่ งขอบของวัตถุดา้ นบน กบั วัตถอุ ืนๆ Values autolength เชน่ 5px, 5pt,5cm margin-bottom ใช้กาํ หนดระยะห่างระหวา่ งขอบของวตั ถดุ ้านล่าง กับวัตถุอืนๆ margin-left ใช้กาํ หนดระยะห่างระหว่างขอบของวัตถุดา้ นซ้าย กับวตั ถอุ ืนๆ margin-right ใชก้ ําหนดระยะหา่ งระหว่างขอบของวตั ถดุ า้ นขวา กับวัตถอุ ืนๆ margin ใชก้ าํ หนดระยะหา่ งระหว่างขอบของวตั ถทุ ีต้องการ ทัง 4 ด้าน กับวตั ถุ อืน ๆ ในคําสงั เดียว padding-top ใชก้ าํ หนดระยะห่างระหวา่ งขอบของวตั ถุด้านในเส้นบน กับ ขอ้ ความทีอยู่ในกรอบ padding-bottom ใช้กาํ หนดระยะห่างระหว่างขอบของวตั ถุด้านในเส้นลา่ ง กบั ข้อความทีอยใู่ นกรอบ padding-left ใช้กําหนดระยะห่างระหว่างขอบของวัตถดุ ้านในเสน้ ซา้ ย กับ ขอ้ ความทีอย่ใู นกรอบ padding-right ใช้กําหนดระยะห่างระหว่างขอบของวตั ถดุ ้านในเสน้ ขวา กับ ข้อความทีอยู่ในกรอบ padding ใชก้ ําหนดระยะห่างระหว่างขอบของวัตถดุ า้ นใน กบั ข้อความทีอยูใ่ นกรอบ (ไม่เกยี วขอ้ งกับวัตถดุ ้านนอก) Float กําหนดวัตถุลอย property Float Value จะมี 4 ตวั คือ left กค็ อื สังให้ลอยชดิ ซ้าย right คือ สงั ให้ลอยชิดขวา inherit คือ ค่าทสี ืบทอดมา none คือ ไมต่ อ้ งลอย [ซงึ ปรกติ element ทัวไปจะเปน none
รายวชิ า การโปรแกรมเว็บเบ้ืองตน จัดทําโดย นางสาววริ ยา สขี าว display คือ การจดั รปู แบบของ Box ใหเ้ ปนแแบบแนวตงั แนวนอน และมพี ืนทีดา้ นใน 70 display: inline เรียงกนั แนวนอน และมีพืนทจี ํากัด display: inline-block เรียงกนั แนวนอนและมพี ืนทีด้านใน ตามทีเรากําหนด display: block เรียงกนั แนวตัง และมีพืนทจี ํากดั hover คือ คาํ สงั ในภาษา CSS ใชใ้ นกรณีทตี ้องการดักจบั เหตกุ ารณ์ ผู้ใชง้ านวางเมาสไ์ วบ้ น Elements ต่างๆ ตัวอย่าง ถ้าเมาส์ชแี ลว้ ใหเ้ ปลียนสกี ็จะตอ้ งกาํ หนดดังนี li a:hover { background-color: #111111; } ตัวอย่างคําสงั นีจะเกิดขนึ ที Li ทีมกี ารใช้คาํ สงั เชือมโยง tag <a href =””> เทา่ นัน โดยจะ เปลียนสีพืนเปนสี #111111 เหตุการณท์ เี กดิ ขนึ เมอื เมาส์ชที ีขอ้ ความใน List ทีมีการเชอื มโยง ถา้ ต้องการเหตุการณ์อนื กใ็ ส่ Property อืนๆ หรือต้องการใหเ้ ปลียนสที ี tag อืนๆ ก็ใส่ tag นันๆ เขา้ ไป
รายวิชา การโปรแกรมเวบ็ เบื้องตน จดั ทําโดย นางสาววิรยา สีขาว 71 การสรา้ งตาราง ใชส้ ําหรับขอ้ มลู ทีเปนตาราง และใช้จดั ขอ้ มูลการกบั เนอื หา ในการแบง่ ส่วนตา่ งๆในหน้าจอ เพือใส่รปู หรอื เนือหา ประกอบดว้ ย tag ดังนี Tag <table> ............</table> เพือเริมสร้างตาราง Tag <tr> ใช้สําหรับสร้างแถวให้กับตาราง จํานวน 1 ชุด tag คือ 1 แถว เช่น <tr>.............</tr> tag<th> ใชก้ าํ หนดให้สว่ นทีใช้ คอื หัวของตาราง จาํ นวน 1 ชุด tag คือ 1 คอลัมน์ ถ้ามี การแบ่งเปน 2 คอลัมน์ตอ้ งพิ มพ์ 2 ชดุ เชน่ <th>หวั ข้อ1 </th> <th>หัวขอ้ 2 </th> tag<td> ใช้กําหนดในส่วนทีต้องการให้เปนเนือหาในตาราง จํานวน 1 ชุด tag คือ 1 คอลมั น์ ถา้ มกี ารแบง่ เปน 2 คอลมั นต์ อ้ งพิ มพ์ 2 ชดุ เชน่ <td>ข้อมูล1 </td> <td>ข้อมลู 2 </td> ซงึ การใช้ tag มที ังเปด/ปด tag ต้องเปด และปด tag ใหถ้ กู ตอ้ ง ตวั อยา่ งการเขียน การแสดงผล
รายวิชา การโปรแกรมเว็บเบื้องตน จัดทําโดย นางสาววิรยา สีขาว HTML Table - Adding a Border 72 การใสเ่ สน้ ขอบให้กบั ตาราง ถา้ เราไม่กําหนดเสน้ ขอบให้ตาราง ตารางทีสรา้ งก็จะไมแ่ สดงเสน้ ขอบ การใสเ่ ส้นขอบด้วย CSS ใช้ property border ตวั อย่าง table, th, td { border: 1px solid black; } ตัวอย่างการเขยี น การแสดงผล HTML Table - Collapsed Borders การใชเ้ สน้ ขอบแบบเส้นบาง ถา้ ตอ้ งการใหเ้ สน้ มขี นาดบาง ใช้ property ดว้ ย CSS tag border-collapse ตวั อย่าง table, th, td { border: 1px solid black; border-collapse: collapse; }
ตัวอย่างการเขยี น รายวชิ า การโปรแกรมเว็บเบือ้ งตน จดั ทําโดย นางสาววิรยา สขี าว 73 การแสดงผล HTML Table - Adding Cell Padding การเพิ มชอ่ งวา่ งระหวา่ งเซลลใ์ ห้กบั เสน้ ขอบ การเพิ มชอ่ งว่างระหวา่ งเซลล์ให้กับเส้น ขอบรปู แบบ CSS property : padding ตวั อยา่ ง th, td { padding: 15px; }
ตวั อยา่ งการเขยี น รายวิชา การโปรแกรมเว็บเบ้อื งตน จัดทาํ โดย นางสาววริ ยา สขี าว 74 การแสดงผล
รายวิชา การโปรแกรมเวบ็ เบอื้ งตน จัดทําโดย นางสาววริ ยา สขี าว HTML Table - Adding Border Spacing 75 การเพิ มชอ่ งวา่ งให้กบั เสน้ ขอบ Border spacing เปน property ในการเพิมช่องวา่ งให้กับ เส้นขอบ ในตาราง ดว้ ยรปู แบบ CSS border-spacing ตวั อย่าง table { border-spacing: 5px; } ตวั อย่างการเขยี น การแสดงผล
รายวิชา การโปรแกรมเว็บเบ้ืองตน จัดทําโดย นางสาววิรยา สขี าว HTML Table - Cells that Span Many Columns 76 การผสานเซลลห์ ลายคอลมั น์ ถา้ จะทาํ การผสานเซลลท์ ีมากกวา่ 1 คอลมั น์ จะใช้ attribute: colspan <th colspan=“จาํ นวนคอลัมนท์ ีผสานเซลล\"์ >......</th> ตวั อยา่ งการเขียน การแสดงผล
รายวิชา การโปรแกรมเวบ็ เบ้อื งตน จดั ทาํ โดย นางสาววิรยา สีขาว HTML Table - Cells that Span Many Rows 77 การผสานเซลลห์ ลายแถว ถ้าจะทาํ การผสานเซลล์ทมี ากกวา่ 1 แถว จะใช้ attribute: rowspan <th rowspan =“จํานวนคอลัมน์ทีผสานเซลล\"์ >......</th> ตัวอยา่ งการเขียน การแสดงผล
รายวิชา การโปรแกรมเวบ็ เบื้องตน จัดทาํ โดย นางสาววริ ยา สีขาว HTML Table - Adding a Caption 78 การหัวข้อใหก้ บั ตาราง การใสห่ วั ข้อใหต้ าราง ใฃ้ tag: <caption> ตวั อย่าง <caption>Monthly savings</caption> ตวั อยา่ งการเขียน การแสดงผล A Special Style for One Table การกาํ หนดรปู แบบพิ เศษให้กบั ตาราง ตัวอย่างการกาํ หนด Style ดว้ ย CSS โดยใช้ id ตวั อย่างที 1 กาํ หนดความกว้างและสตี าราง ตัวอย่างที 2 กําหนดความกว้างและสีของแถวตารางใหส้ ลับสีกัน
รายวชิ า การโปรแกรมเวบ็ เบอื้ งตน จดั ทําโดย นางสาววริ ยา สีขาว A Special Style for One Table 79 การกาํ หนดรูปแบบพิ เศษให้กบั ตาราง ตวั อยา่ งการเขียน การแสดงผล Horizontal Dividers การใช้ CSS เพือเพิมคณุ สมบตั เิ ส้นขอบด้านลา่ งใหก้ บั <th> และ <td>สําหรับตวั แบ่งแนวนอน: th, td { border-bottom: 1px solid #ddd; }
ตวั อยา่ งการเขียน รายวชิ า การโปรแกรมเว็บเบื้องตน จดั ทาํ โดย นางสาววริ ยา สขี าว 80 การแสดงผล
รายวชิ า การโปรแกรมเวบ็ เบอ้ื งตน จดั ทําโดย นางสาววริ ยา สขี าว Hoverable Table 81 ใช้ตวั เลอื ก :hover บน <tr> เพือไฮไลตแ์ ถวของตารางเมอื เมา้ ส์ชตี ําแหนง่ แถวนนั ๆ: ตวั อย่างการเขยี น การแสดงผล
รายวชิ า การโปรแกรมเวบ็ เบอ้ื งตน จดั ทาํ โดย นางสาววิรยา สีขาว Striped Table สําหรับตารางทีมีลายทางมา้ ลายใหใ้ ชต้ ัวเลือก nth-child () และเพิมสีพืนหลังให้กบั แถวตารางคู่ 82 (หรอื ค)ี :ตวั อยา่ งการเขยี น <!DOCTYPE html> <html> <head> การแสดงผล <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;} </style> </head> <body> <h2> ตารางลายทาง </h2> <p> สาํ หรบั ตารางลายทางม้าลายใหใ้ ช้ตัวเลอื ก nth-child () และเพิมสีพืนหลังให้กบั แถวตารางแบบทกุ แถว (หรอื คี): </p> <table> <tr> <th>ชอื </th> <th>สกุล</th> <th>รายได้</th> </tr> <tr> <td>วริ ยา</td> <td>สขี าว</td> <td>15,000.-</td> </tr> <tr> <td>สมชาย</td> <td>เรอื งรอง</td> <td>25,000.-</td> </tr> <tr> <td>สมหญงิ </td> <td>ดาวเดอื น</td> <td>20,000.-</td> </tr> </table> </body></html>
รายวชิ า การโปรแกรมเว็บเบือ้ งตน จัดทําโดย นางสาววริ ยา สขี าว Table Color 83 ตวั อยา่ งด้านล่างระบุสีพืนหลงั และสขี ้อความขององคป์ ระกอบ <th>: ตัวอยา่ งการเขียน
รายวชิ า การโปรแกรมเวบ็ เบื้องตน จดั ทาํ โดย นางสาววริ ยา สีขาว 84 HTML iframe คือการแสดงหน้าเว็บอืนๆ ซ้อนเขา้ ไปในหนา้ อนื ดว้ ย tag :<iframe> Iframe Syntax : <iframe src=\"URL\"></iframe> Iframe - Set Height and Width height ความสงู และ width ความกว้าง attributes เพือกาํ หนดขนาดให้ iframe ซงึ ค่า พืนฐานจะเปน Pixels ตวั อยา่ งการเขียน การแสดงผล กําหนด height และwidth tag iframe ด้วย CSS
การแสดงผล รายวชิ า การโปรแกรมเวบ็ เบ้อื งตน จดั ทําโดย นางสาววริ ยา สขี าว 85 Iframe - Remove the Border คา่ พืนฐานของ border ใน iframe จะมีเสน้ รอบๆเฟรม ถ้าไมต่ อ้ งการเสน้ ขอบให้กําหนด attribute ด้วย style CSS property ดว้ ย border:none; การแสดงผล การกําหนดสีและขนาดใหเ้ สน้ ขอบ iframe การกําหนดสแี ละขนาดให้เสน้ ขอบ iframe ด้วย CSS สามารถกําหนดขนาดและสี ด้วย border
รายวชิ า การโปรแกรมเว็บเบื้องตน จดั ทําโดย นางสาววริ ยา สขี าว การแสดงผล 86 Iframe - Target for a Link iframe สามารถระบุดว้ ย link หน้าจากเวบ็ ไซตไ์ ดด้ ว้ ย tag <a> และใช้โดยกาํ หนดชอื เฟรม ที attribute target : การแสดงผล
รายวิชา การโปรแกรมเวบ็ เบ้อื งตน จดั ทาํ โดย นางสาววิรยา สขี าว 87 Block-level Elements การใช้บล็อกจะเรมิ ตน้ ทีบรรทดั ใหม่เสมอและมคี วามกวา้ งเตม็ หน้าจอทมี อี ยู่ (ขยายไป ทางซา้ ยและขวาเท่าทีจะทาํ ได)้ <div> เปนบล็อกทใี ชใ้ นการสรา้ งขอบเขตใหเ้ นือหา การแสดงผล The <div> Element Tag <div> จะสรา้ งขนึ เพือใช้เกบ็ tag อืนๆ ใน HTML ซงึ ใน <div> จะไม่มี attributes ใน การกําหนดค่าอืนๆ แตส่ ามารถระบุ รูปแบบ CSS style ในการกําหนดคา่ blocks ได้ การแสดงผล
รายวชิ า การโปรแกรมเวบ็ เบือ้ งตน จัดทําโดย นางสาววิรยา สีขาว Inline Elements 88 inline element จะเปนรปู แบบของการสร้างขอบเขตใหก้ ับข้อความในบรรทัดทีระบุเท่านัน ซึง จะไม่ขึนบรรทดั ใหมส่ าํ หรับ tag <span> ซงึ จะเปนองคป์ ระกอบในยอ่ หนา้ การแสดงผล The <span> Element Tag <span> มกั นาํ ไปใช้กับข้อความบางส่วน attributes อืนๆ ใน tag <span>จะไม่มี ให้ใช้แต่จะกําหนดดว้ ย แตส่ ามารถใชร้ ปู แบบ style, class and id ไดป้ กติ การใช้ CSS style ใน<span> จะเกิดขนึ กบั ขอ้ ความทีระบ:ุ การแสดงผล
รายวิชา การโปรแกรมเวบ็ เบื้องตน จดั ทาํ โดย นางสาววริ ยา สขี าว 89 HTML Multimedia Common Video Formats Common Audio Formats
รายวิชา การโปรแกรมเว็บเบือ้ งตน จัดทําโดย นางสาววริ ยา สขี าว HTML Video 90 The HTML <video> Element จะมีปุมควบคุมเสียงจะปุมเล่น ปมุ หยุด และปุมเสียง attributes width และ height ควรกําหนดความกว้างและความสงู ไว้ หากไมไ่ ด้ตงั ค่าความ สูงและความกวา้ งหน้าเวบ็ อาจกะพริบในขณะทีวดิ โี อโหลด tag <source> จะเปนทางเลือกให้ บราวเซอรเ์ ลือกไฟลว์ ีดโี อไปเล่นทีรองรบั กบั บราวเซอร์ และข้อความทีกาํ หนดใน tag < video > และ</video> จะแสดงกต็ ่อเมอื บราวเซอร์ไม่รองรบั tag < video > เท่านัน การแสดงผล HTML <video> Autoplay การใหว้ ดี โี อเลน่ อตั โนมตั ใิ ช้ attribute autoplay : การแสดงผล
รายวิชา การโปรแกรมเวบ็ เบ้ืองตน จดั ทาํ โดย นางสาววริ ยา สขี าว HTML Video - Methods, Properties, and Events 91 การกาํ หนดวิธีการ คณุ สมบตั ิ เหตุการณ์ ของวีดโี อ การแสดงผล HTML Video Tags Tag Description <video> กาํ หนดให้ใส่วดี โี อ <source> เปนการกาํ หนดเส้นทางเลอื กหลายๆเส้นทางใหเ้ ปดวีดีโอที <track> เหมาะสม กําหนดข้อความในแทรก็ มีเดยี
รายวิชา การโปรแกรมเว็บเบ้อื งตน จดั ทําโดย นางสาววริ ยา สีขาว HTML Audio 92 The HTML <audio> Element จะมีปุมควบคุมเสียงจะปุมเลน่ ปุมหยุด และปมุ เสยี ง tag <source> จะเปนทางเลอื กให้บราวเซอรเ์ ลือกไฟลเ์ สียงไปเล่นทีรองรับกบั บราวเซอร์ ขอ้ ความที กาํ หนดใน tag <audio> และ</audio> จะแสดงกต็ ่อเมอื บราวเซอร์ไมร่ องรบั tag <audio> เทา่ นัน การแสดงผล HTML Plug-ins ปลกั อนิ ถกู ออกแบบมาเพือใช้สาํ หรับวัตถุประสงค์ทีแตกต่างกันแลว้ แตก่ ารใชง้ าน : การรนั Java applets การรัน Microsoft ActiveX controls เล่นไฟล์ Flash movies การแสดง maps scan for viruses การตรวจสอบ id The <object> Element Tag <object> รองรบั ไดก้ ับทุกบราวเซอร์ ใช้กําหนดการฝงของวตั ถุในเอกสาร HTML มนั ถูก ออกแบบมาเพือฝงปลกั อนิ (เช่น Java applets, โปรแกรมอา่ น PDF และเลน่ Flash) ในหน้า เว็บ แต่ยงั สามารถใช้เพือรวม HTML ใน HTML ได:้ การเขียน HTML แบบรวมหน้ากันด้วย <object>
รายวชิ า การโปรแกรมเว็บเบอ้ื งตน จัดทําโดย นางสาววริ ยา สีขาว การแสดงผล 93 การใช้<object> แทรกรปู ภาพ การแสดงผล The <embed> Element Tag <embed> ได้รับการสนบั สนนุ ในเบราว์เซอรห์ ลักทังหมดและยงั ใช้กําหนดวตั ถุฝง ตัวภายในเอกสาร HTML ซงึ เปน tag ทีใชม้ านานแล้ว ตัวอยา่ งการใสภ่ าพดว้ ย Tag <embed> การแสดงผล การเขยี น HTML แบบรวมหนา้ กนั ด้วย <embed>
รายวิชา การโปรแกรมเว็บเบ้อื งตน จัดทาํ โดย นางสาววริ ยา สีขาว การแสดงผล 94 HTML YouTube Videos ในการเลน่ วดิ ีโอ Youtube บนหน้าเวบ็ ใหท้ าํ ดังตอ่ ไปน:ี Upload the video to YouTube คดั ลอก video id กําหนด tag <iframe> บนเวบ็ เพจ กาํ หนด attribute src ดว้ ย video URL ใช้ attributes width และ height กาํ หนดความกวา้ งและความสูงในการเลน่ กําหนด parameters อืนๆ ใน URL เพิมเตมิ การแสดงผล การแสดงผล
รายวิชา การโปรแกรมเว็บเบื้องตน จัดทาํ โดย นางสาววริ ยา สขี าว 95 HTML5 มกี ารกําหนดสว่ นตา่ งๆ ในหนา้ เว็บเพจ เพือแบ่งเนือทีในการแสดงผลในหนึงหน้า ออกเปนส่วนๆเช่น สว่ นหวั ของเวบ็ ไซต์ ส่วนเนือหา ส่วนท้าย สว่ นของปุมนาํ ทางเว็บ เปนตน้ HTML Layout Techniques ในการสร้างเคา้ โครงหน้าแบบหลายคอลมั น์ มี 4 เทคนิค แตล่ ะแบบกจ็ ะมขี อ้ ดขี ้อเสยี ตา่ งกนั ไป ดังนี CSS framework ,CSS float property ,CSS flexbox และ CSS grid Tag ใน HTML5 section - บง่ บอกเซคชันของเนือหา article - กําหนดขอบเขตของตัวเนอื บทความ aside - กาํ หนดขอบเขตของเนอื หาเสริม (ลอ้ มกรอบ) header - กาํ หนดขอบเขตของสว่ นเริมต้นหรอื สว่ นหวั ของเว็บไซต์ (อย่าสับสนกับ <head>) footer - กาํ หนดขอบเขตของสว่ นทา้ ยของเว็บไซต์ พวกข้อความกําหนดสทิ ธิต่างๆ nav - บอกวา่ มนั เปนสว่ นนําทางของเวบ็ ไซต์ figure - บอกว่าเปนภาพหรือวดิ โี อประกอบเนอื หา (ขา้ งในสามารถซอ้ นแทก็ img หรือ video พร้อมคาํ อธิบายไดอ้ ีกชนั ) CSS Float Layout โครงหน้า เวบ็ แบบลอยตวั โครงร่างเวบ็ โดยใชค้ ณุ สมบัติ CSS float โฟลตนนั ง่ายตอ่ การเรยี นรู้ - แคต่ อ้ งจําไวว้ ่า คณุ สมบตั ิของโฟลตและเคลยี รน์ ันทาํ งานอย่างไร ขอ้ เสีย: องค์ประกอบลอยตวั จะเชอื มโยงกับ ผงั เอกสารซงึ อาจเปนจะมปี ญหาต่อความยืดหยุ่นในอปุ กรณท์ ีแตกตา่ งกัน
ตวั อยา่ งการเขยี น รายวชิ า การโปรแกรมเวบ็ เบื้องตน จดั ทําโดย นางสาววริ ยา สขี าว 96
รายวชิ า การโปรแกรมเวบ็ เบื้องตน จดั ทาํ โดย นางสาววริ ยา สขี าว 97
การแสดงผล รายวชิ า การโปรแกรมเว็บเบอ้ื งตน จัดทําโดย นางสาววริ ยา สขี าว 98 การแสดงผล CSS Flexbox Layout โครงร่างหนา้ แบบ Flexbox Flexbox เปนโหมดโครงร่างใหม่ใน CSS การใช้ flexbox ชว่ ย ใหม้ นั ใจได้วา่ องค์ประกอบตา่ งๆนันจะทํางานปรบั เปลยี นไดอ้ ยา่ งถกู ต้อง เมือเคา้ โครงหนา้ ต้อง รองรบั ขนาดหนา้ จอทีแตกตา่ งกัน
ตวั อยา่ งการเขยี น รายวชิ า การโปรแกรมเวบ็ เบื้องตน จดั ทําโดย นางสาววริ ยา สขี าว 99
รายวชิ า การโปรแกรมเวบ็ เบ้อื งตน จดั ทาํ โดย นางสาววริ ยา สขี าว 100
Search
Read the Text Version
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
