การสร้างเวบ็ ไซต์HTML5&CSS3
4หน่วยที่ การสร้างเวบ็ ไซต์ด้วยโปรแกรมภาษา HTMLสาระสาคญั ภาษา*HTML*เป็ นภาษาหลกั และภาษาพ้ืนฐานในการสร้างเว็บเพจ จาํ เป็ นตอ้ งเรียนรู้โครงสร้างและรูปแบบของภาษา HTML*ซ่ึงใชแ้ ทก็ (Tag) ในควบคุมการแสดงผลขอ้ ความ รูปภาพหรืออื่น ๆ เวบ็ ไซต์ส่วนใหญ่มีพ้ืนฐานการเขียนมาจากภาษา HTML การสร้างเวบ็ ไซต์สามารถพฒั นาได้จากโปรแกรม Text*Editor เช่น Notepad*หรือ EditPlus ส่วนการแสดงผลใช้เวบ็ บราวเซอร์ เช่น Internet Explorer หรือ Google Chrome หรือ Mozilla Firefox*เป็นตน้จุดประสงค์การเรียนรู้ จุดประสงค์ทว่ั ไป เพ่อื ใหม้ ีความรู้ความเขา้ ใจเก่ียวกบั การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML จุดประสงค์เชิงพฤตกิ รรม 1. อธิบายโครงสร้างภาษา HTML ได้ 2. บอกเครื่องมือท่ีใชส้ ร้างเอกสาร HTML ได้ 3. สามารถวางเลยเ์ อาท์ (Layout) หนา้ เวบ็ เพจได้ 4. อธิบายไฟลร์ ูปภาพแตล่ ะชนิดที่นาํ มาใชบ้ นเวบ็ ไซตไ์ ด้ 5. อธิบายเก่ียวกบั การจดั การรูปภาพได้ 6. สามารถสร้างขอ้ ความเคลื่อนไหวภายในเวบ็ เพจได้ 7. สามารถจดั รูปแบบเอกสารและรูปแบบขอ้ ความภายในเวบ็ เพจได้ 8. สามารถสร้างการเชื่อมโยงแบบตา่ ง ๆ ได้
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 132สาระการเรียนรู้ 4.1 โครงสร้างภาษา HTML 4.2 เครื่องมือท่ีใชส้ ร้างเอกสาร HTML 4.3 เร่ิมตน้ สร้างเวบ็ ไซตด์ ว้ ยภาษา HTML 4.3.1 การจดั เลยเ์ อาท์ (Layout) หนา้ เวบ็ เพจ 4.3.2 ไฟลร์ ูปภาพท่ีนิยมมาใชบ้ นเวบ็ ไซต์ 4.3.3 การจดั การรูปภาพ 4.3.4 การสร้างขอ้ ความเคลื่อนไหว 4.3.5 การจดั รูปแบบเอกสารและรูปแบบขอ้ ความ 4.3.6 การสร้างการเชื่อมโยง 4.4 บทสรุป
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 133 4หน่วยที่ การสร้างเวบ็ ไซต์ด้วยโปรแกรมภาษา HTML HTML ยอ่ มาจากคาํ ว่า Hypertext Markup Language เป็ นภาษาหลกั ที่ใช้ในการสร้างเวบ็ ไซตโ์ ดยคาํ สั่งในภาษา HTML ทาํ หนา้ ที่ควบคุมการแสดงผลของขอ้ มูลในเวบ็ ไซต์ โดยคาํ ส่ังที่ใช้ควบคุ มก ารแสดงผลใ น *HTML*เรี ยก ว่า*แท็ก*(Tag)*ซ่ึ งในแต่ละ แท็กมีหน้าที่แสดงผลตามรูปแบบของคาํ สั่ง เช่น การจดั รูปแบบขอ้ ความ การสร้างตาราง การใส่รูปภาพลงในเวบ็ เพจการเชื่อมโยงเวบ็ เพจ เป็นตน้4.1 โครงสร้างภาษา HTML HTML (Hypertext Markup Language) เป็ นภาษาหลกั ที่ออกแบบมาเพ่ือใช้ในการสร้างเวบ็ เพจ ภาษาน้ีพฒั นาและกาํ หนดมาตรฐานโดยองคก์ ร World Wide Web Consortium (W3C)โดยใช้แท็ก (Tag) ควบคุมการแสดงผลขอ้ ความ รูปภาพ เสียง หรืออื่น ๆ สามารถเรียกดูผ่านเวบ็ บราวเซอร์ HTML ไดร้ ับการพฒั นาและถูกนาํ ไปใชง้ านแพร่หลาย จึงทาํ ให้เกิดมาตรฐานในรุ่นต่าง ๆต้งั แต่ HTML1.0, HTML2.0, HTML3.0, HTML3.2, HTML4.0, HTML4.1 และล่าสุดคือ HTML5มีการเพมิ่ คุณลกั ษณะใหม่ ๆ ที่น่าสนใจดงั น้ี (ดวงพร เก๋ียงคาํ , 2560 : 204) Audio/Video Support ใน HTML 5 รองรับมลั ติมีเดียไดส้ มบูรณ์มากข้ึน โดยไดเ้ พ่ิมแท็กสาํ หรับการแสดงภาพและเสียงโดยตรง New Form Input*ในการสร้างฟอร์มไดเ้ พ่ิมการรับขอ้ มูลชนิดใหม่เขา้ มา เพ่ือรับขอ้ มูลรูปแบบน้นั ๆ โดยตรง เช่น email, number, datetime เป็นตน้ ช่วยใหร้ ับขอ้ มลู ไดถ้ ูกตอ้ งมากข้ึน Semantic Markup Page Layout เป็ นการจดั กลุ่มแท็กใชใ้ นการจดั โครงสร้างหนา้ เวบ็ เพจที่สื่อความหมายของส่วนต่าง ๆ เช่น <header>, <nav>, <article>, <section>, <aside> และ<footer>เป็ นตน้ Canvas Graphics ใชว้ าดรูปกราฟิ กรูปแบบตา่ ง ๆ ตามที่ตอ้ งการบนหนา้ เวบ็ เพจไดง้ ่าย และสะดวกข้ึน
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 134 Drag*&*Drop*รองรับการใช้เมาส์ในการลากแลว้ วางวตั ถุบนหน้าเว็บเพจ โดยใช้คาํ ส่ังจาวาสคริปต์ (JavaScript) ควบคุมกระบวนการ Web Storage เป็ นกลไกจดั เก็บขอ้ มูลในฝั่งบราวเซอร์แบบใหม่ ซ่ึงสามารถจดั เก็บขอ้ มูลแบบซบั ซอ้ นไดด้ ีกวา่ เดิมที่จดั เก็บแบบคุกก้ี Geolocation เป็นการหาคา่ ละติจูดและลองจิจูด เพือ่ ระบุตาํ แหน่งของอุปกรณ์บนพ้ืนโลก <mark> สาํ หรับเนน้ ขอ้ ความโดยทาํ ไฮไลทพ์ ้ืนหลงั ของขอ้ ความ <meter> สาํ หรับการวดั ค่า <progress> สาํ หรับการแสดงความคืบหนา้ ของงาน ส่วนแทก็ เก่าบางส่วนไดถ้ ูกยกเลิก เพราะบางแทก็ ไม่รองรับ HTML5 และบางแทก็ ไม่ไดใ้ ช้เน่ืองจากการกาํ หนดรูปแบบการแสดงผลใช้ CSS แทน เช่น <acronym>, <applet>, <basefont>,<big>, <center>, <font>, <dir>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>,<object> และ <xmp> เป็นตน้ โครงสร้างของภาษา HTML น้นั เป็ นโครงสร้างที่ใชง้ านง่าย ซ่ึงการสร้างเอกสาร HTMLมีองค์ประกอบ หรืออิลิเมนต์ (Element) ประกอบด้วย 2 ส่วน คือ (จารุนนั ท์ เรืองกิจวณิชกุล,2557: 30) 4.1.1*ส่วนที่เป็ นข้อมูลที่ต้องการแสดง เช่น ข้อความ รูปภาพ เสียง ภาพเคล่ือนไหวเป็ นตน้ 4.1.2*ส่วนที่เป็ นคาํ ส่ังแท็ก เป็ นคาํ ส่ังเพื่อกาํ หนดส่วนต่าง ๆ ในเอกสาร และเขียนอยู่ในเครื่องหมาย < > ในรูปแบบ <คาํ ส่ัง> เช่น <html>, <br> เป็ นตน้ โดยแต่ละแท็กทาํ หนา้ ที่แตกต่างกนั แบง่ ออกเป็น 2 ลกั ษณะดงั น้ี 4.1.2.1*แท็กเดี่ยว เป็ นรูปแบบคาํ ส่ังที่มีเพียงคาํ สั่งเดียวหรือมีแท็กเดียวสามารถใชง้ านได้ เช่น <br>, <img> เป็นตน้ 4.1.2.2*แท็กเปิ ดและปิ ด เป็ นรูปแบบคาํ ส่ังท่ีประกอบด้วยแท็กเปิ ดและแท็กปิ ดโดยแทก็ ปิ ดมีเคร่ืองหมาย Slash ( / ) กาํ กบั ไวห้ นา้ แทก็ น้นั ๆ เช่น <html>……</html> เป็นตน้
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 135 องคป์ ระกอบ (Element)แทก็ เปิ ด เน้ือหา แทก็ ปิ ด <h1> My name is Peeraya Dunkhuntod </h1> รูปท่ี 4-1 องคป์ ระกอบ (Element) ของคาํ สง่ั HTML ส่วนของแท็กคาํ ส่ังอาจไม่สามารถกาํ หนดอะไรไดม้ าก ดงั น้นั ในแต่ละแท็กคาํ ส่ังอาจมีการกาํ หนดคาํ สั่งเสริมเพ่ือกาํ หนดคุณลกั ษณะ (attribute) ของแท็กคาํ ส่ังน้นั ๆ เพื่อให้แท็กน้นัทาํ งาน หรือแสดงผลไดต้ ามวตั ถุประสงค์ ซ่ึงการกาํ หนดคุณลกั ษณะเขียนอยใู่ นรูปแบบดงั น้ีกรณีแทก็ เด่ียว <tag attributename= “value”>กรณีแทก็ เปิ ดและปิ ด <tag attributename= “value”> content </tag> รูปที่ 4-2 รูปแบบการกาํ หนดคุณลกั ษณะใหก้ บั แทก็ คาํ สงั่ HTML เม่ือ attributename เป็ นชื่อของ attribute และ value เป็ นค่าที่กาํ หนดให้กบั attribute โดยattribute เขียนถดั จากแท็กคาํ ส่ัง โดยการเวน้ วรรค และเขียนอยใู่ นแท็กเปิ ดเท่าน้นั ซ่ึงสามารถใส่attribute ไดม้ ากกวา่ 1 คาํ ส่ัง โดยการเวน้ วรรค <tag attribute1= “value” attribute2= value”>รูปที่ 4-3 รูปแบบการกาํ หนดคุณลกั ษณะมากกวา่ 1 คาํ สงั่ ใหก้ บั แทก็ คาํ สั่ง HTML
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 136 attribute name value attribute name value <img src=“pic1.jpg” alt=“photo of me”> แทก็ คาํ สงั่ คุณลกั ษณะ (attribute) คุณลกั ษณะ (attribute) รูปท่ี 4-4 ตวั อยา่ งการกาํ หนดคุณลกั ษณะใหก้ บั แทก็ คาํ สง่ั HTML ลักษณะโครงสร้างพ้ืนฐานขอ้ มูลเว็บเพจตามแบบของ HTML5 มีโครงสร้างและแท็กมาตรฐานที่ตอ้ งกาํ หนดไวท้ ุกเวบ็ เพจดงั น้ี <!DOCTYPE html> <html> <head> <mata charset=“utf-8”> <title> ขอ้ ความท่ีตอ้ งการแสดงบนแถบชื่อเรื่อง (Title Bar) </title> </head> <body> ขอ้ ความและคาํ สั่งที่ตอ้ งการสร้างเน้ือหา </body> </html> รูปท่ี 4-5 โครงสร้างของภาษา HTML5 <!DOCTYPE html> เป็นการประกาศชนิดของเอกสารเวบ็ เพจเพ่ือใหเ้ วบ็ บราวเซอร์ใชว้ ธิ ีการประมวลผลสาํ หรับหนา้ เวบ็ เพจไดอ้ ยา่ งถูกตอ้ ง <html>…..</html> เป็นแทก็ แรกที่ตอ้ งมีในภาษา HTML เป็นคาํ สง่ั กาํ หนดจุดเร่ิมตน้และจุดสิ้นสุดของไฟล์ HTML
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 137 <head>…..</head> เป็ นส่ วนกําหนดรายละเอียดหัวเอกสาร หรื อก่อนเริ่ มเน้ือหาของเวบ็ เพจประกอบไปดว้ ยแท็ก <title></title>, <meta>, <link> และ CSS Style และ JavaScriptเป็ นตน้ <body>…..</body> เป็นส่วนของเน้ือหาเวบ็ เพจ ประกอบไปดว้ ยขอ้ ความ รูปภาพตาราง และการเช่ือมไปท่ีเอกสารอื่น ๆ ที่แสดงผลที่เวบ็ บราวเซอร์4.2 เคร่ืองมอื ทใ่ี ช้สร้างเอกสาร HTML ในการสร้างเวบ็ เพจดว้ ย HTML ตอ้ งมีเคร่ืองมือในการเขียนและแกไ้ ขโคด้ เรียกวา่ TextEditor เป็ นโปรแกรมท่ีช่วยในการกาํ หนดขอ้ ความและรูปแบบคาํ ส่ังต่าง ๆ ในมาตรฐานของHTML ซ่ึงมีหลายโปรแกรมดงั น้ี 4.2.1*Notepad เป็นโปรแกรมขนาดเลก็ ท่ีมีอยบู่ น Windows ทุกเวอร์ชนั รูปที่ 4-6 การใชโ้ ปรแกรม Notepad สร้างเวบ็ เพจ 4.2.2*Notepad++ เป็ นโปรแกรมท่ีดาวน์โหลดและติดต้งั มาใชง้ านบน Windows โดยไม่เสียค่าใชจ้ ่าย ขอ้ ดี คือ มี Highlight Syntax หรือการแสดงสี Syntax หรือแท็กแต่ละส่วนแยกกนัเป็นคนละสี เพ่ือใหอ้ า่ นโคด้ ไดส้ ะดวกข้ึน
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 138 รูปที่ 4-7 การใชโ้ ปรแกรม Notepad++ สร้างเวบ็ เพจ 4.2.3 EditPlus เป็นโปรแกรมที่ใชง้ านง่ายและสะดวก เนื่องจากมีการใชส้ ีเพือ่ แยกแทก็คาํ ส่งั ต่าง ๆ รูปที่ 4-8 การใชโ้ ปรแกรม EditPlus สร้างเวบ็ เพจ
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 1394.3 เร่ิมต้นสร้างเวบ็ ไซต์ด้วยภาษา HTML จากข้นั ตอนการสร้างเว็บไซต์ เมื่อได้กําหนดโครงร่างเว็บไซต์ กาํ หนดการเช่ือมโยงระหวา่ งหนา้ เวบ็ เพจและออกแบบหนา้ เวบ็ เพจแต่ละหนา้ แลว้ ข้นั ตอนต่อไป คือ การสร้างเวบ็ เพจซ่ึงในการสร้างเวบ็ เพจดว้ ยภาษา HTML น้นั มีการใชแ้ ทก็ คาํ สั่งดงั น้ี 4.3.1 การจดั เลยเ์ อาท์ (Layout) หนา้ เวบ็ เพจ การจดั เลย์เอาท์หน้าเว็บเพจมีลกั ษณะคล้ายกบั การจัดหน้าหนังสือ มีการจดั วางเน้ือหา ขอ้ ความ และรูปภาพใหอ้ ยใู่ นตาํ แหน่งท่ีเหมาะสม สวยงาม อ่านง่าย สาํ หรับการจดั เลยเ์ อาท์หนา้ เวบ็ เพจใชภ้ าษา HTML ร่วมกบั CSS 4.3.1.1 การจดั เลยเ์ อาทด์ ว้ ย HTML5 การจดั เลยเ์ อาทด์ ว้ ย HTML5 มี Semantic Markup Page Layout ใชใ้ นการจดั โครงสร้างของเวบ็ เพจ และสื่อความหมายของส่วนต่าง ๆ ดงั น้ี <header> กาํ หนดขอบเขตของส่วนเริ่มตน้ หรือส่วนหวั ของเวบ็ ไซต์ <nav> ใชก้ าํ หนดส่วนของเมนูเพ่ือเช่ือมโยงหนา้ เวบ็ เพจ <section> ใชก้ าํ หนดส่วนในเอกสาร <article> กาํ หนดขอบเขตของตวั เน้ือหาหรือบทความภายในเวบ็ เพจ <aside> กาํ หนดขอบเขตของเน้ือหาเสริม นอกเหนือจากเน้ือหาปกติ <footer> กาํ หนดขอบเขตของส่วนทา้ ยของเวบ็ ไซต์ เช่น กาํ หนดลิขสิทธ์ิตา่ ง ๆ <header> <aside> <nav><section><article> <footer>รูปท่ี 4-9 การจดั เลยเ์ อาท์ (Layout) ดว้ ย Semantic Elements
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 140 สําหรับการจดั เลยเ์ อาทด์ ้วยแท็กกลุ่ม Semantic Elements น้ีอาจทาํ ให้หน้าเว็บเพจแสดงผลไม่สวยงามตามท่ีต้องการ ซ่ึงการจัดรูปแบบต้องใช้*CSS*Style*Sheetมาเสริมเพ่อื ใหก้ ารแสดงผลส่วนตา่ ง ๆ ทาํ ไดส้ วยงามและเหมาะสม 4.3.1.2 การจดั หนา้ เวบ็ เพจดว้ ย CSS (Cascading Style Sheet) การจดั หนา้ เวบ็ เพจดว้ ย CSS เป็ นคาํ สั่งท่ีนาํ มาใชร้ ่วมกบั แทก็ HTML เพื่อจดั รูปแบบของเน้ือหาต่าง ๆ บนเวบ็ เพจให้สวยงาม ใช้งานง่าย สะดวกรวดเร็ว ซ่ึง CSS เป็ นมาตรฐานหน่ึงภายใตก้ ารดูแลของ W3C (World Wide Web Consortium) ปัจจุบนั เป็ นเวอร์ชนัCSS3 โดยมีรูปแบบการเขียน CSS สาํ หรับการจดั หนา้ เวบ็ เพจดงั น้ี 1)*รูปแบบการเขียน CSS (CSS Syntax) ที่ใชจ้ ดั รูปแบบและวิธีกาํ หนดคุณสมบตั ิดงั น้ี (1)*Selector*เป็ นส่ วนท่ีใช้ในการกําหนดองค์ประกอบสําหรับจดั รูปแบบ ซ่ึงเป็นช่ือแทก็ HTML, ชื่อ Class, ช่ือ ID เป็นตน้ (2)*Declaration*เป็ นส่วนที่กาํ หนดรูปแบบว่าเป็ นอย่างไร ประกอบไปดว้ ย Property (คุณสมบตั ิ) และ Value (คา่ ) ของคุณสมบตั ิน้นั (3)*Property*เป็ นการกาํ หนดคุณสมบตั ิ ซ่ึงในแต่ละ Property คน่ั ดว้ ยเครื่องหมาย semi-colon ( ; ) หากมีการกาํ หนดมากกวา่ 1 คุณสมบตั ิสามารถเขียนต่อกนั ไปได้ภายใตเ้ ครื่องหมายปี กกา {…..} เท่าน้นั h1 { color: blue; font-size: 12 px;} Property Value Property ValueSelector Declarationรูปที่ 4-10 รูปแบบการเขียน CSS (CSS Syntax) 2)*ประเภทของ CSS Selector Selector เป็นส่วนหน่ึงของ CSS Syntax ใชใ้ นการกาํ หนดองคป์ ระกอบสําหรับจดั รูปแบบ มีลกั ษณะการเขียนหลายแบบสามารถเลือกใช้งานไดต้ ามความตอ้ งการ โดยแบ่งออกเป็น 3 ประเภทดงั น้ี
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 141 (1) Tag Selector เป็ นการจดั รูปแบบท่ีอา้ งอิงกบั แทก็ HTML โดยตรงเช่น <h1>, <p> เป็นตน้ตวั อยา่ ง การเขียน Tag Selector กาํ หนดคุณสมบตั ิของแทก็ h1 มากกวา่ 1 คุณสมบตั ิ คือ สีขอ้ ความเป็นสีน้าํ เงิน และจดั วางขอ้ ความใหอ้ ยกู่ ่ึงกลางบรรทดั กาํ หนดคุณสมบตั ิของแท็ก p ใหส้ ีขอ้ ความเป็นสีเขียว การเรียกใช้ CSS รูปที่ 4-11 การเขียน Tag Selector ผลลพั ธท์ ่ีไดจ้ ากการเขียน Tag Selector รูปท่ี 4-12 ผลลพั ธ์ของการเขียน Tag Selector
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 142 (2)*ID Selector เป็ น Selector ท่ีอา้ งอิงกบั ID attribute เพื่อกาํ หนดคุณสมบัติแบบเฉพาะเจาะจงให้กับ*HTML*Element*ผ่าน*ID*attribute*ใช้กับ*Element*ท่ีมีเพยี งส่วนเดียวในเอกสาร HTML การสร้างหรือต้งั ช่ือตอ้ งใชเ้ ครื่องหมาย # นาํ หนา้ตวั อยา่ ง การเขียน ID Selector กาํ หนดคุณสมบตั ิแบบ ID Selector เรียกใช้ CSS รูปที่ 4-13 การเขียน ID Selector ผลลพั ธท์ ่ีไดจ้ ากการเขียน ID Selector รูปท่ี 4-14 ผลลพั ธ์ของการเขียน ID Selector
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 143 (3)*Class Selector เป็นการกาํ หนดรูปแบบโดยใช้ Selector แบบ Classสามารถนาํ ไปใชร้ ่วมกบั แทก็ อื่น ๆ เพื่อใหแ้ ทก็ น้นั มีคุณสมบตั ิตามที่กาํ หนด การเขียน ClassSelector ใหใ้ ส่จุด ( . ) หนา้ ชื่อ Selectorตวั อยา่ ง การเขียน Class Selector การกาํ หนดคุณสมบตั ิแบบ Class Selector เรียกใช้ CSS รูปที่ 4-15 การเขียน Class Selector ผลลพั ธ์ท่ีไดจ้ ากการเขียน Class Selector รูปท่ี 4-16 ผลลพั ธ์ของการเขียน Class Selector
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 144 3) ลกั ษณะการใชง้ านของ CSS มี 3 ลกั ษณะดงั น้ี (1)*Inline*Style*เป็ นการกําหนดรูปแบบของ CSS โดยระบุคําส่ังอยใู่ นช่วงของแทก็ <body> เทา่ น้นั การเขียน CSS โดยการฝังลงไปใน line บรรทดั ของแทก็ HTMLและใช้ attribute Style ตามดว้ ยค่า Value ท่ีตอ้ งการตวั อยา่ ง การใช้ CSS แบบ Inline Style การเขียน CSS แบบ Inline Style รูปที่ 4-17 ลกั ษณะการใชง้ าน CSS แบบ Inline Style ผลลพั ธท์ ่ีไดจ้ ากการเขียน CSS แบบ Inline Style รูปที่ 4-18 ผลลพั ธ์ของ CSS แบบ Inline Style (2) Internal Style Sheet เป็นการกาํ หนดรูปแบบของ CSS ใหก้ บั คาํ สั่งHTML โดยเขียนไวท้ ่ีส่วนแทก็ <head> ….…. </head> ของหนา้ เวบ็ เพจ และใชง้ านไดเ้ ฉพาะหนา้ เวบ็ เพจน้นั เวบ็ เพจเดียว
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 145ตวั อยา่ ง การเขียน Internal Style Sheet การเขียน CSS แบบ Internal Style Sheet โดยเขียนไวท้ ่ีส่วน ของแท็ก <head>…</head> เรียกใช้ CSS รูปที่ 4-19 ลกั ษณะการใชง้ าน CSS แบบ Internal Style Sheet ผลลพั ธ์ท่ีไดจ้ ากการเขียน CSS แบบ Internal Style Sheet รูปท่ี 4-20 ผลลพั ธ์ของ CSS แบบ Internal Style Sheet (3) External Style Sheet เป็ นการกาํ หนดรูปแบบของ CSS ท่ีเขียนแยกไฟล์ไวต้ ่างหาก เป็ นไฟล์ .css ซ่ึงสามารถเรียกมาใช้กบั หน้าเว็บเพจใด ๆ ตามท่ีตอ้ งการโดยการเช่ือมโยงไปที่ไฟล์ .css น้นัตวั อยา่ ง การเขียน External Style Sheet เรียกใช้ CSS ช่ือ mystyle.css รูปที่ 4-21 ลกั ษณะการใชง้ าน CSS แบบ External Style Sheet
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 146 mystyle.css การกาํ หนดคุณสมบตั ิของ CSS และต้งั ช่ือไฟล์ mystyle.css รูปที่ 4-22 ไฟลเ์ อกสารชื่อ mystyle.css ผลลพั ธท์ ี่ไดจ้ ากการเขียน CSS แบบ External Style Sheet รูปที่ 4-23 ผลลพั ธ์ของ CSS แบบ External Style Sheet 4) คาํ สงั่ CSS Style พ้นื ฐาน คาํ ส่งั CSS Style ทวั่ ไปส่วนใหญเ่ ป็ นคาํ สงั่ พ้นื ฐานเพ่ือกาํ หนดคา่ ของเน้ือหา (Content) ที่ใชบ้ ่อย ๆ และใชก้ บั Element และ Tag ตา่ ง ๆ ดงั น้ี (1) CSS margins การกาํ หนดระยะของขอบดา้ นต่าง ๆ ซ่ึงใชก้ บัElement อื่น ๆ เช่น <h1>, <p>, <div> เป็นตน้ สามารถกาํ หนดไดด้ งั น้ี margin-top ระยะขอบบน margin-bottom ระยะขอบขวา margin-right ระยะขอบล่าง margin-left ระยะขอบซา้ ย เช่น p { margin-top: 100px; }
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 147ตวั อยา่ ง การใช้ CSS margins การกาํ หนดระยะของขอบดา้ นตา่ ง ๆ รูปท่ี 4-24 การใช้ CSS margins ผลลพั ธ์การใช้ CSS margins รูปท่ี 4-25 ผลลพั ธ์การใช้ CSS margins (2) CSS padding เป็นการกาํ หนดระยะห่างจากขอบดา้ นในของ BoxModel กบั เน้ือหาดา้ นในของ HTML Element สามารถกาํ หนดไดด้ งั น้ี padding-top ระยะห่างขอบบน padding-right ระยะห่างขอบขวา padding-bottom ระยะห่างขอบล่าง padding-left ระยะห่างขอบซา้ ย เช่น p { padding-right: 30px; }
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 148ตวั อยา่ ง การใช้ CSS padding การกาํ หนดระยะห่างจากขอบดา้ นในของ Box Model กบั เน้ือหาดา้ นในของ HTML Element รูปที่ 4-26 การใช้ CSS padding ผลลพั ธท์ ่ีไดจ้ ากการใช้ CSS padding รูปท่ี 4-27 ผลลพั ธ์การใช้ CSS padding (3) CSS width และ height เป็นการกาํ หนดค่าความกวา้ ง ความสูง โดยระบุคา่ เป็น px หรือ cm หรือ % ดงั น้ี height ความสูง width ความกวา้ ง
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 149 เช่น div { height: 200px; width: 50%; }ตวั อยา่ ง การใช้ CSS width และ height การใช้ CSS width และ height กาํ หนดความกวา้ งและความสูง รูปที่ 4-28 การใช้ CSS width และ height ผลลพั ธ์ท่ีไดจ้ ากการใช้ CSS width และ height รูปที่ 4-29 ผลลพั ธ์การใช้ CSS width และ height
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 150 (4) CSS font properties เป็ นการกาํ หนดคุณสมบตั ิรูปแบบการแสดงผลให้กบั ตวั ษร*เน่ืองจากแท็ก font ท่ีใช้ใน HTML ไดถ้ ูกยกเลิกและมาใชก้ ารจดั รูปแบบดว้ ย CSSเพราะสามารถแกไ้ ข ปรับปรุงคุณสมบตั ิของการแสดงผลจากจุดเดียวทาํ ให้ใชง้ านง่าย และสะดวกรวดเร็ว ดงั รายละเอียดตารางที่ 4-1ตารางที่ 4-1 คุณสมบตั ิของ fontคุณสมบตั ิ คา่ ท่ีใช้ หนา้ ที่font-family font name or type ระบุช่ือ font หรือแบบตวั อกั ษรfont-style normal, italic ลกั ษณะของ font เช่น ตวั เอียงfont-variant normal, small-caps การระบุตวั พมิ พ์ เช่น ตวั พิมพเ์ ล็กfont-weight normal, bold น้าํ หนกั หรือความหนาfont-size [xx-large, x-large, large, ขนาดของตวั อกั ษร medium, small, x-small, xx-small] [larger, smaller] percentage, lengthตวั อยา่ ง การใช้ CSS font properties กาํ หนดคุณสมบตั ิของ font รูปท่ี 4-30 การใชง้ าน CSS font properties
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 151 ผลลพั ธ์ท่ีไดจ้ ากการใช้ CSS font propertiesค่าสี 3 รูปแบบดงั น้ี รูปที่ 4-31 ผลลพั ธ์การใช้ CSS font properties (5) CSS color เป็นการกาํ หนดคุณสมบตั ิเก่ียวกบั สี สามารถกาํ หนด รูปแบบที่ 1 Color Name เป็นการกาํ หนดจากช่ือของสีมาตรฐาน เช่น Red, Green , Blue เป็นตน้ รูปที่ 4-32 Color Name ที่มา : World Wide Web Consortium (W3C), ม.ป.ป. รูปแบบท่ี 2 RGB (Red, Green, Blue) เป็นการกาํ หนดค่าสี โดยวธิ ีการผสมค่าสี RGB ตามความเขม้ ของค่าสีระหวา่ ง 0 ถึง 255 เช่น RGB (0, 255,0) แสดงเป็นสีเขียว เนื่องจากสีเขียวต้งั คา่ เป็ น 255 และสีแดงกบั น้าํ เงินต้งั ค่าเป็น 0 เป็นตน้ รูปที่ 4-33 RGB (Red, Green, Blue) ที่มา : World Wide Web Consortium (W3C), ม.ป.ป.
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 152 รูปแบบท่ี 3 Hexadecimal Color เป็นการกาํ หนดสีจากรหสั เลขฐาน 16 ใชอ้ า้ งอิงในระบบสี RGB โดยแทนรหสั ดว้ ยเลขฐาน 16 ในช่วง 0, 1, 2,….., 9, A, B, C,D, E, F ตามลาํ ดบั รูปท่ี 4-34 Hexadecimal Color ที่มา : World Wide Web Consortium (W3C), ม.ป.ป.ตวั อยา่ ง การใช้ CSS color การใช้ CSS color รูปท่ี 4-35 การใช้ CSS color
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 153 ผลลพั ธ์ท่ีได้ จากการใช้ CSS color รูปท่ี 4-36 ผลลพั ธ์การใช้ CSS color (6) CSS background เป็นการกาํ หนดสีพ้ืนหลงั ใหก้ บั เวบ็ เพจดงั รายละเอียดตารางที่ 4-2ตารางท่ี 4-2 คุณสมบตั ิของ CSS backgroundคุณสมบตั ิ คา่ ท่ีใช้ หนา้ ที่background-color คา่ สีมี 3 รูปแบบ เป็นการกาํ หนดสีให้ Color Name กบั พ้ืนหลงั RGB (Red, Green, Blue) Hexadecimal Color เช่น background-color: #008000;background-image url (“รูปภาพที่ใชง้ าน”) เป็นการกาํ หนดให้รูปภาพ เช่น background-image: url(\"paper.gif\"); เป็นพ้ืนหลงัbackground-repeat repeat รูปภาพนาํ มาใชจ้ นเตม็ เป็นการกาํ หนดรูปแบบ repeat-x รูปภาพนาํ มาใชจ้ นเตม็ ของรูปภาพใชค้ ูก่ บั ในแนวนอน background-image เพ่อื สงั่ ให้ repeat-y รูปภาพนาํ มาใชจ้ นเตม็ พ้ืนหลงั นาํ รูปภาพมาใชซ้ ้าํ ในแนวต้งั no-repeat รูปภาพถูกใชค้ ร้ังเดียว เช่น background-repeat : repeat-y;
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 154ตารางท่ี 4-2 คุณสมบตั ิของ CSS background (ต่อ)คุณสมบตั ิ คา่ ที่ใช้ หนา้ ที่ เป็นการกาํ หนดรูปแบบbackground-attachment scroll รูปภาพเล่ือนไปตาม scroll ของรูปภาพใชค้ ูก่ บั background-image fixed รูปภาพไมเ่ ลื่อนอยกู่ บั ที่ เหมือนกนั เพ่ือกาํ หนด รูปภาพใหอ้ ยกู่ บั ท่ี หรือ เช่น background-attachment: fixed; เคลื่อนตามเมาส์ เป็นการกาํ หนดตาํ แหน่ง background-position left, right, top, bottom และcenter ท่ีแสดงรูปภาพ เช่น background-position: right center;ตวั อยา่ ง การใช้ CSS background การใช้ CSS background รูปท่ี 4-37 การใช้ CSS background
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 155 ผลลพั ธท์ ี่ไดจ้ ากการใช้ CSS backgroundรูปท่ี 4-38 ผลลพั ธ์การใช้ CSS background
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 156 ก า ร จัด เ ล ย์เ อ า ท์ห น้า เ ว็บ เ พ จ ด้ว ย *HTML5*แ ล ะ *CSS3*ส า ม า ร ถ นํา ม าประยกุ ตใ์ ชร้ ่วมกนั เพอ่ื จดั หมวดหมู่ของเน้ือหาในหนา้ เวบ็ เพจใหอ้ ยใู่ นตาํ แหน่งท่ีถูกตอ้ ง และเป็ นระเบียบ อีกท้งั ทาํ ให้ Search Engine คน้ หาเน้ือหาภายในเวบ็ เพจไดง้ ่ายตวั อยา่ ง การจดั หนา้ เวบ็ เพจดว้ ยภาษา HTML และ CSS รูปท่ี 4-39 การจดั เลยเ์ อาท์ (Layout) หนา้ เวบ็ เพจดว้ ยภาษา HTML
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 157 mystyle.cssรูปที่ 4-40 การจดั รูปแบบหนา้ เวบ็ เพจดว้ ย CSS
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 158 รูปที่ 4-41 ผลลพั ธ์การจดั หนา้ เวบ็ เพจดว้ ยภาษา HTML และ CSS 4.3.2 ไฟลร์ ูปภาพที่นิยมมาใชบ้ นเวบ็ ไซต์ ไฟล์รูปภาพที่นาํ มาใช้บนเวบ็ ไซต์ตอ้ งเลือกมาใช้ตามความเหมาะสม โดยควรทาํความเขา้ ใจความแตกตา่ งระหวา่ งไฟลร์ ูปภาพแต่ละชนิด ไฟลท์ ี่นิยมใชง้ านบนเวบ็ ไซตม์ ีดงั น้ี 4.3.2.1 ฟอร์แมต GIF 1)*ถูกพฒั นาโดย CompuServe ในปี 1980 เพอ่ื บีบอดั ขอ้ มลู ภาพลายเส้น 2)*มีขอ้ จาํ กดั ใชง้ านอยทู่ ่ี 256 สีเทา่ น้นั (8 บิต) 3)*ใช้การบีบอดั แบบพาเลต (Palette) สีข้ึนใหม่ ทาํ ให้ไม่สูญเสียคุณภาพของรูปภาพเพราะไม่มีการตดั สีภาพออก แต่เป็ นลกั ษณะการแทนสีภาพในแต่ละพิกเซลดว้ ยสีที่กาํ หนดข้ึนใหม่ ดงั น้นั คุณภาพไฟลจ์ ึงไม่เสีย 4)*แสดงรูปภาพโปร่งใส และภาพเคลื่อนไหวได้ รูปที่ 4-42 ฟอร์แมต GIF (200309-51.gif) ที่มา : http://glitter.kapook.com/content.php?lang=th&id=10118&category_id=183
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 159 4.3.2.2 ฟอร์แมต JPEG 1)*พัฒนาข้ึนโดย*Joint*Photographic*Experts*Group*เพื่อจุดประสงค์ในการบีบอดั ขอ้ มูลของไฟล์รูปภาพ มีจุดเด่นคือหลงั จากการบีบอดั สามารถใชส้ ีไดถ้ ึง 16.7 ลา้ นสีในขณะท่ีฟอร์แมต GIF ใชไ้ ดเ้ พียง 256 สี เทา่ น้นั 2)*รองรับขอ้ มลู สีไดม้ ากถึง 16.7 ลา้ นสี 3)*ลกั ษณะการบีบอดั เป็ นการลบขอ้ มลู ส่วนที่ซ้าํ ซอ้ นกนั มากท่ีสุดออกจากภาพนิ่ง ยงิ่ มีการบีบอดั ขอ้ มลู มากข้ึนเทา่ ไหร่ คุณภาพยอ่ มสูญเสียมากข้ึนเท่าน้นั รูปที่ 4-43 ตวั อยา่ งไฟล์ JPEG (meaw.jpg) 4.3.2.3 ฟอร์แมต PNG 1)*พฒั นาโดย Thomas Boutell และ Tom Lane วตั ถุประสงคเ์ พ่ือการทาํ งานขา้ มระบบ 2)*บีบอดั ขอ้ มลู ไดด้ ีกวา่ ฟอร์แมต GIF 20-30 เปอร์เซ็นต์ 3)*สามารถเลือกการจดั เก็บขอ้ มูลไดท้ ้งั แบบ 8 บิต 24 บิต และ 32 บิตต่างกบั ฟอร์แมต GIF 4)*แสดงผลไดเ้ ร็วกวา่ แบบฟอร์แมต GIF เพราะรูปภาพในฟอร์แมต GIFเริ่มแสดงผลเม่ือดาวนโ์ หลดขอ้ มูลมาได้ 1 ใน 18 ส่วน ขณะท่ีฟอร์แมต PNG เริ่มแสดงผลเม่ือขอ้ มลูถูกโหลดเขา้ มา 1 ใน 64 ส่วน 5)*ใชก้ บั รูปภาพโปร่งใสได้
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 160 รูปที่ 4-44 ฟอร์แมต PNG (Computer.png) ท่ีมา: Fabricatorz LLC, 25504.3.3 การจดั การรูปภาพการแทรกรูปภาพเพอื่ แสดงบนเวบ็ เพจ ช่วยดึงดูดความสนใจใหแ้ ก่ผเู้ ย่ยี มชมเวบ็ ไซต์ในส่วนของการแทรกรูปภาพบนเวบ็ เพจ ควรเตรียมรูปภาพให้เรียบร้อย ใช้รูปภาพนามสกุลใดควรพิจารณาถึงความเหมาะสม และทาํ ความเขา้ ใจเกี่ยวกบั รูปแบบของแทก็ คาํ สั่งและแอตตริบิวต์ต่าง ๆ ดงั รายละเอียดตารางท่ี 4-3ตารางท่ี 4-3 การจดั การรูปภาพแทก็ คาํ ส่งั (Tag) แอตตริบิวต์ (attribute) หนา้ ที่<img src= “ชื่อไฟลภ์ าพ”> การแทรกรูปภาพ width= \"คา่ ตวั เลข\" กาํ หนดความกวา้ งของรูปภาพ height= \"ค่าตวั เลข\" กาํ หนดความสูงของรูปภาพ alt= \"ขอ้ ความกาํ กบั ระบุขอ้ ความกาํ กบั รูปภาพ รูปภาพ\" align= \"ตาํ แหน่งรูปภาพ\" การจดั ตาํ แหน่งรูปภาพ สามารถกาํ หนด เป็น left, right, middle, top, bottom border= \"ความหนา\" การใส่กรอบใหก้ บั รูปภาพ
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 161 การแทรกรูปภาพในเวบ็ เพจตอ้ งใชแ้ ท็ก <img src= “ชื่อไฟล์รูปภาพ” > ซ่ึงไฟล์รูปภาพควรอยใู่ นไดร์ฟ และโฟลเดอร์น้นั ดว้ ย ดงั ตวั อยา่ ง รูปภาพอยใู่ นโฟลเดอร์ image ดงั น้นัควรอา้ งชื่อโฟลเดอร์ก่อนที่จะระบุช่ือไฟลร์ ูปภาพ เช่น <img src=\"image/activity.jpg\">ตวั อยา่ ง การแทรกรูปภาพ การแทรกรูปภาพ รูปท่ี 4-45 ตวั อยา่ งการแทรกรูปภาพ รูปภาพท่ีไดจ้ ากการใชแ้ ทก็ คาํ สง่ั <img> รูปท่ี 4-46 ผลลพั ธ์จากการแทรกรูปภาพ 4.3.4 การสร้างขอ้ ความเคลื่อนไหว การกาํ หนดใหข้ อ้ ความเคล่ือนไหวบนหนา้ เวบ็ เพจ โดยการใชค้ าํ ส่งั marquee ดงั น้นัควรทาํ ความเขา้ ใจเกี่ยวกบั แทก็ คาํ ส่ัง และแอตตริบิวตต์ า่ ง ๆ ดงั รายละเอียดตารางท่ี 4-4
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 162ตารางท่ี 4-4 การสร้างขอ้ ความเคลื่อนไหวแทก็ คาํ สง่ั (Tag) แอตตริบิวต์ (attribute) หนา้ ที่ แทก็ เปิ ดขอ้ ความเคลื่อนไหว<marquee> กาํ หนดรูปแบบการเคล่ือนไหว มี 3 รูปแบบดงั น้ี behavior scroll ขอ้ ความท่ีเคลื่อนไหวจากดา้ นขวา ไปดา้ นซา้ ย และหายไปที่ดา้ นซา้ ย direction slide ขอ้ ความที่เคล่ือนไหวจากดา้ นขวา แลว้ หยดุ ที่ดา้ นซา้ ย และไม่เคลื่อนไหวอีก width alternate ขอ้ ความเร่ิมเคลื่อนไหวจาก height ดา้ นขวามาดา้ นซา้ ย พอถึงดา้ นซา้ ยจะ hspace เคล่ือนไหวไปทางขวา เคลื่อนไหวไปมา สลบั กนั ไมม่ ีที่สิ้นสุด vspace กาํ หนดทิศทางการเคล่ือนท่ี left, right, up และdown loop กาํ หนดความกวา้ งของกรอบ scrollamount=n กาํ หนดความสูงของกรอบ กาํ หนดระยะห่างของขอ้ ความที่ scrolldelay=n เคลื่อนไหว ทางดา้ นซา้ ยและขวา กาํ หนดระยะห่างของขอ้ ความ</marquee> ท่ีเคล่ือนไหวในแนวบนและล่าง กาํ หนดจาํ นวนรอบการเคล่ือนไหว กาํ หนดความเร็วของการเคล่ือนที่ โดยคา่ n คือ ตวั เลข หากกาํ หนดตวั เลข มากทาํ ใหเ้ คลื่อนท่ีเร็ว กาํ หนดเวลารอเป็นหน่วย Milliseconds โดยคา่ n คือ ตวั เลข หากกาํ หนดตวั เลข มาก ขอ้ ความจะแสดงผลชา้ แทก็ ปิ ดขอ้ ความเคล่ือนไหว
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 163ตวั อยา่ ง การสร้างขอ้ ความเคล่ือนไหว สร้างขอ้ ความเคล่ือนไหวดว้ ยแทก็ คาํ สงั่ <marquee> รูปที่ 4-47 การสร้างขอ้ ความเคล่ือนไหว ขอ้ ความเริ่มเคล่ือนไหวจากดา้ นขวามาดา้ นซา้ ย พอถึงดา้ นซา้ ยจะเคล่ือนไหวไปทางขวา เคล่ือนไหวไปมาสลบั กนั ไมม่ ีที่สิ้นสุด รูปท่ี 4-48 ผลลพั ธ์ของการสร้างขอ้ ความเคลื่อนไหว 4.3.5 การจดั รูปแบบเอกสารและรูปแบบขอ้ ความ การจดั รูปแบบเอกสารและรูปแบบข้อความให้สวยงาม อ่านง่าย เป็ นส่ิงจาํ เป็ นสําหรับการเขียนเว็บเพจเพราะช่วยดึงดูดความสนใจของผู้ใช้ ซ่ึงการจัดรูปแบบเอกสารประกอบด้วยการกาํ หนดหัวเรื่อง การจดั การเก่ียวกบั ขอ้ ความ การข้ึนบรรทดั ใหม่ การย่อหน้าการจดั วางตาํ แหน่งขอ้ ความ และการกาํ หนดรูปแบบของขอ้ ความ เป็นตน้
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 164 4.3.5.1 การกาํ หนดหวั เรื่อง (Heading) ดว้ ยแทก็ <h> การกาํ หนดหวั เร่ืองเป็ นการกาํ หนดขนาดให้กบั ขอ้ ความท่ีตอ้ งการให้เป็ นหวั เรื่อง โดยมีรูปแบบดงั น้ี รูปแบบ <hn> ขอ้ ความหวั เรื่อง </hn> โดยกาํ หนดให้ n เป็นตวั เลขกาํ หนดขนาด และระดบั ความสาํ คญัของหวั เร่ืองจากขนาดใหญ่สุดมีค่าเท่ากบั 1 จนถึงขนาดเลก็ ท่ีสุดมีค่าเท่ากบั 6ตวั อยา่ ง การกาํ หนดหวั เร่ือง กาํ หนดหวั เร่ืองดว้ ยแท็ก <h> รูปที่ 4-49 การกาํ หนดหวั เร่ือง (Heading) ดว้ ยแทก็ <h> ผลลพั ธท์ ี่ไดจ้ ากการใชแ้ ทก็ <h> รูปท่ี 4-50 ผลลพั ธ์ของการกาํ หนดหวั เรื่อง (Heading) ดว้ ยแทก็ <h> 4.3.5.2 การข้ึนบรรทดั ใหม่ (Line Break) ดว้ ยแทก็ <br> การพมิ พข์ อ้ ความในเอกสาร HTML มีการจดั รูปแบบการพิมพเ์ อกสารดว้ ยการกด Enter เพื่อข้ึนบรรทดั ใหม่ แต่เวบ็ บราวเซอร์ยงั คงถือวา่ เป็นขอ้ ความที่ต่อเน่ือง
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 165หากตอ้ งการใหเ้ วบ็ บราวเซอร์ตดั ขอ้ ความใหข้ ้ึนบรรทดั ใหม่ ณ ตาํ แหน่งที่ตอ้ งการให้ใชแ้ ทก็ <br>ไวท้ ี่ดา้ นหนา้ หรือดา้ นหลงั ขอ้ ความ หรือยอ่ หนา้ ที่ตอ้ งการข้ึนบรรทดั ใหม่ โดยมีรูปแบบดงั น้ี รูปแบบ <p> ขอ้ ความ 1 <br> ขอ้ ความ 2 <br> </p>ตวั อยา่ ง การข้ึนบรรทดั ใหม่ ใชแ้ ทก็ <br> เพอ่ื ใหข้ ้ึนบรรทดั ใหม่ รูปท่ี 4-51 การข้ึนบรรทดั ใหม่ (Line Break) ดว้ ยแทก็ <br> ผลลพั ธ์ท่ีไดจ้ ากการใชแ้ ทก็ <br> รูปท่ี 4-52 ผลลพั ธ์การใชแ้ ทก็ <br> 4.3.5.3 การข้ึนยอ่ หนา้ ใหม่ (Paragraph Break) ดว้ ยแทก็ <p> การจดั การเก่ียวกบั ขอ้ ความเอกสาร HTML นอกจากมีคาํ ส่งั เกี่ยวกบั การข้ึนบรรทดั ใหม่ ยงั สามารถกาํ หนดส่วนของขอ้ ความในเอกสารจดั เป็นยอ่ หนา้ ใหม่ โดยมีรูปแบบดงั น้ี รูปแบบ <p> ขอ้ ความ </p>
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 166ตวั อยา่ ง การข้ึนยอ่ หนา้ ใหม่ ใชแ้ ทก็ <p> เพ่ือข้นึ ยอ่ หนา้ ใหม่รูปที่ 4-53 การข้ึนยอ่ หนา้ ใหม่ (Paragraph Break) ดว้ ยแทก็ <p> ผลลพั ธจ์ ากการใชแ้ ทก็ <p> รูปท่ี 4-54 ผลลพั ธ์การใชแ้ ทก็ <p>4.3.5.4 การตีเส้นแนวนอน (Horizontal Line) ดว้ ยแทก็ <hr> การตีเส้นแนวนอนเพอ่ื แยกเอกสารออกเป็นส่วน ๆ เพอื่ ใหด้ ูสวยงาม โดยมีรายละเอียดดงั ตารางท่ี 4-5ตารางท่ี 4-5 สร้างเส้นคนั่แทก็ คาํ สงั่ (Tag) แอตตริบิวต์ (attribute) หนา้ ท่ี<hr> แทก็ เปิ ดเส้นคน่ั width=\"30\" หรือ กาํ หนดความยาวของเส้นคนั่ มี width=\"30%\" หน่วยแป็นพกิ เซล หรือเปอร์เซ็นต์ size=\"3\" กาํ หนดความหนาของเส้นคน่ั มีหน่วยเป็นพกิ เซล noshade=\"noshade\" กาํ หนดใหเ้ ป็ นเส้นคน่ั สีเดียวกนั ท้งั เส้น หรือเรียกวา่ เส้นคนั่ ทึบ align กาํ หนดตาํ แหน่งของเส้นให้อยู่ center (ก่ึงกลาง), left (ชิดซา้ ย), และ right (ชิดขวา)
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 167ตวั อยา่ ง การตีเส้นแนวนอน การตีเสน้ แนวนอนรูปท่ี 4-55 การตีเส้นแนวนอน (Horizontal Line) ดว้ ยแทก็ <hr> ผลลพั ธจ์ ากการใชแ้ ท็ก <hr> รูปที่ 4-56 ผลลพั ธ์การใชแ้ ทก็ <hr> 4.3.5.5 การกาํ หนดสัญลกั ษณ์ และเลขลาํ ดบั การกาํ หนดสญั ลกั ษณ์ และลาํ ดบั เลขเพอ่ื กาํ หนดเป็ นหวั ขอ้ หลกั หวั ขอ้ ยอ่ ยเพ่ือเป็ นการแบง่ ขอ้ มลู ออกเป็นหวั ขอ้ ทาํ ใหเ้ อกสารดูเป็ นระเบียบ และดึงดูดความสนใจไดม้ ากข้ึนสามารถแบ่งไดเ้ ป็น 2 รูปแบบดงั น้ี 1) การกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้ (UL – Unorder List) การกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้ ใหก้ บั ขอ้ ความของแต่ละรายการแบบไมม่ ีหมายเลข ซ่ึงมีสญั ลกั ษณ์ 3 ชนิด ดงั น้ี (1) วงกลมทึบ ( disc) (2) วงกลมโปร่ง ( circle) (3) สี่เหล่ียมทึบ ( square)
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 168ตารางท่ี 4-6 การกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้แทก็ คาํ สัง่ (Tag) แอตตริบิวต์ (attribute) หนา้ ท่ี เปิ ดแทก็ สญั ลกั ษณ์หนา้ หวั ขอ้<ul > มี 3 ชนิด คือ disc, circle, square แทก็ สาํ หรับขอ้ มูลในลาํ ดบั type=\"ชนิดของสัญลกั ษณ์\" ปิ ดแทก็ สญั ลกั ษณ์หนา้ หวั ขอ้<li>…</li></ul>ตวั อยา่ ง การกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้ การกาํ หนดสญั ลกั ษณ์หนา้ หวั ขอ้ แบบวงกลมทึบ รูปท่ี 4-57 การกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้ (UL – Unorder List) ผลลพั ธ์ท่ีไดจ้ ากการกาํ หนดสญั ลกั ษณ์หนา้ หวั ขอ้ แบบวงกลมทึบ รูปท่ี 4-58 ผลลพั ธ์จากการกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้ (UL – Unorder List) 2) การกาํ หนดหมายเลขหนา้ หวั ขอ้ (OL – Ordered List) การกาํ หนดหมายเลขหนา้ หวั ขอ้ เป็นการกาํ หนดเลขลาํ ดบั หนา้ ขอ้ ความแตล่ ะรายการ ท่ีไมม่ ีสญั ลกั ษณ์หนา้ ขอ้ ความ แต่เป็นตวั เลขอารบิก ตวั เลขโรมนั หรือตวั อกั ษรมีลกั ษณะดงั น้ี
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 169 (1) แสดงเป็นตวั อกั ษรพิมพใ์ หญ่ (\"A\") (2) แสดงเป็นตวั อกั ษรพมิ พเ์ ล็ก (\"a \") (3) แสดงตวั เลขโรมนั ตวั พิมพใ์ หญ่ (\"I\") (4) แสดงตวั เลขโรมนั ตวั พิมพเ์ ลก็ (\"i\") (5) แสดงเป็นตวั เลข (\"1\")ตารางท่ี 4-7 การกาํ หนดหมายเลขหนา้ หวั ขอ้แทก็ คาํ สั่ง (Tag) แอตตริบิวต์ (attribute) หนา้ ท่ี แทก็ เปิ ดกาํ หนดหมายเลขหนา้<ol> หวั ขอ้ มี 5 ชนิด คือ\"A\", \"a \", \"I\",\"i\",\"1\" type=\"ชนิดหมายเลขหนา้ หวั ขอ้ \" แทก็ สาํ หรับขอ้ มลู ในลาํ ดบั แทก็ ปิ ดกาํ หนดหมายเลขหนา้<li>…</li> หวั ขอ้</ol>ตวั อยา่ ง การกาํ หนดหมายเลขหนา้ หวั ขอ้ การกาํ หนดหมายเลขหนา้ หวั ขอ้ รูปท่ี 4-59 การกาํ หนดหมายเลขหนา้ หวั ขอ้ (OL – Ordered List)
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 170 ผลลพั ธท์ ี่ไดจ้ ากการกาํ หนดหมายเลขหนา้ หวั ขอ้ รูปท่ี 4-60 ผลลพั ธ์การกาํ หนดหมายเลขหนา้ หวั ขอ้ (OL – Ordered List) 4.3.5.6 การสร้างตาราง (Table) การนาํ ตารางมาใช้ในภาษา*HTML*เหมาะสําหรับกรณีท่ีมีขอ้ มูลจาํ นวนมาก ทาํ ให้การแสดงข้อมูลเข้าใจง่ายและเป็ นระเบียบเรียบร้อย ซ่ึงในการสร้างตารางใช้แท็ก<table> ในการกาํ หนดขอบเขตของตาราง และใช้คาํ สั่งย่อยกาํ หนดแถวและคอลมั น์ โดยใชแ้ ท็ก<tr> และ <td> มีรูปแบบดงั น้ี รูปแบบ <table> <tr> <td> เน้ือหาในเซลล์ </td> </tr> </table> ส่วนแอตตริบิวต์ (attribute) ของตารางมีดงั น้ี colspan เป็นการรวมเซลลจ์ ากหลาย ๆ คอลมั น์ rowspan เป็นการรวมเซลลจ์ ากหลาย ๆ แถว width, height เป็นการกาํ หนดความกวา้ ง และความสูง ในส่วนของการกาํ หนดคุณสมบตั ิการแสดงผลใหก้ บั ตารางแบบยดื หยนุ่ใช้ CSS มาช่วยจดั รูปแบบของตารางดงั รายละเอียดในตารางที่ 4-8
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 171ตารางที่ 4-8 คุณสมบตั ิของการสร้างตารางคุณสมบตั ิ ค่าท่ีใช้ หนา้ ท่ี เป็นการกาํ หนดขนาดของเส้นขอบborder length style color รูปแบบ และสีเส้นขอบ เป็นการกาํ หนดลกั ษณะของเส้นขอบ เช่น border: 1px solid red; โดยแยกเป็น 2 เส้น หรือเส้นเดียวborder-collapse คา่ ท่ีสามารถเลือกมี 2 แบบคือ เป็นการกาํ หนดระยะห่างระหวา่ งขอบ ของวตั ถุดา้ นในกบั ขอ้ ความท่ีอยู่ separate แยกเป็น 2 เส้น ใน Box Model เป็นการกาํ หนดรูปแบบการจดั ขอ้ ความ collapse รวมเป็นเส้นเดียว ในแนวนอน เช่น border-collapse: separate; เป็นการกาํ หนดรูปแบบการจดั ขอ้ ความ ในแนวต้งัpadding length เป็นการกาํ หนดระยะระหวา่ งตาราง เช่น padding: 15px; และขอบ แนวนอน และแนวต้งั เป็นการกาํ หนดสีพ้ืนหลงั ของเวบ็ เพจtext-align รูปแบบการจดั ขอ้ ความ มีดงั น้ี หรือ พ้ืนหลงั ของตาราง left ชิดซา้ ยvertical-align center ก่ึงกลางborder-spacing right ชิดขวาbackground-color justify จดั หนา้ หลงั เทา่ กนั เช่น text-align: left; รูปแบบการจดั ขอ้ ความ มีดงั น้ี top ดา้ นบน middle ก่ึงกลาง bottom ดา้ นล่าง เช่น vertical-align: middle; length length เช่น border-spacing: 2px 5px; ค่าสีมี 3 รูปแบบ Color Name, RGB (Red, Green, Blue) และ Hexadecimal Color เช่น background-color: #008000;
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 172ตวั อยา่ ง การจดั รูปแบบการแสดงผลของตารางดว้ ย CSS การจดั รูปแบบตารางดว้ ย CSS การจดั รูปแบบตารางดว้ ย CSS กาํ หนดความกวา้ งตาราง 100% การรวมเซลลจ์ าก 2 แถวเขา้ ดว้ ยกนั รูปท่ี 4-61 การจดั รูปแบบการแสดงผลตารางดว้ ย CSS ผลลพั ธ์ท่ีไดจ้ ากการจดั รูปแบบการแสดงผลตารางดว้ ย CSS รูปที่ 4-62 ผลลพั ธ์จากการจดั รูปแบบการแสดงผลตารางดว้ ย CSS
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 1734.3.5.7 การจดั รูปแบบขอ้ ความ (HTML Text Formatting) การจดั รูปแบบขอ้ ความภายในเวบ็ เพจ มีกลุ่มแทก็ ในการจดั รูปแบบขอ้ ความ ดงั รายละเอียดตารางที่ 4-9ตารางที่ 4-9 การจดั รูปแบบขอ้ ความแทก็ คาํ ส่งั (Tag) แอตตริบิวต์ (attribute) หนา้ ที่<b> - จดั ขอ้ ความเป็นตวั หนา<strong> - เนน้ ขอ้ ความใหห้ นกั ข้ึน หรือ เนน้ ความสาํ คญั<i> - จดั ขอ้ ความเป็นตวั เอียง<em> - เนน้ ขอ้ ความเป็ นตวั เอียง<mark> - จดั ขอ้ ความเป็นตวั ไฮไลทส์ ี<small> - จดั ขอ้ ความเป็นตวั เลก็<del> - ขีดฆา่ ขอ้ ความ<ins> - แทรกขอ้ ความใชค้ ู่กบั <del> ขอ้ ความ มีขีดเส้นใต้<sub> - จดั ขอ้ ความเป็นตวั ห้อย<sup> - จดั ขอ้ ความเป็นยกกาํ ลงัตวั อยา่ ง การจดั รูปแบบขอ้ ความ การจดั รูปแบบขอ้ ความ รูปที่ 4-63 การจดั รูปแบบขอ้ ความ
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 174 ผลลพั ธ์จากการจดั รูปแบบขอ้ ความ รูปที่ 4-64 ผลลพั ธ์จากการจดั รูปแบบขอ้ ความ 4.3.5.8 การใส่ขอ้ ความ Comment การใส่ขอ้ ความ Comment หรือหมายเหตุแทรกลงไปในโคด้ ให้สังเกตจากสีของขอ้ ความท่ีไดเ้ ป็ นสีเขียว และขอ้ ความ Comment น้นั ไม่แสดงผลบนเวบ็ บราวเซอร์มีรูปแบบดงั น้ี รูปแบบ <!-- ขอ้ ความ -->ตวั อยา่ ง การใส่ขอ้ ความ Comment การใส่ขอ้ ความ Comment รูปที่ 4-65 การใส่ขอ้ ความ Comment รูปท่ี 4-66 ขอ้ ความ Comment ไม่แสดงผลบนเวบ็ บราวเซอร์
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 175 4.3.6 การสร้างการเชื่อมโยง การเช่ือมโยงหน้าเวบ็ เพจเป็ นการกาํ หนดส่วนของขอ้ ความ รูปภาพ หรือสัญลกั ษณ์ไวเ้ ป็ นจุดเช่ือมโยงไปที่เอกสารต่าง ๆ ขอ้ ความท่ีเป็ นจุดเช่ือมโยงแสดงเป็ นสีน้าํ เงินและขีดเส้นใต้หรือจุดเชื่อมโยงอาจเป็ นรูปภาพ เม่ือเลื่อนเมาส์ช้ีบริเวณขอ้ ความหรือรูปภาพท่ีมีการเชื่อมโยงแสดงเป็นสัญลกั ษณ์นิ้วมือ เม่ือเล่ือนเมาส์ช้ีบริเวณขอ้ ความท่ีเป็ นจุดเช่ือมโยงแสดงเป็ นสญั ลกั ษณ์นิ้วมือ รูปที่ 4-67 ตวั อยา่ งการสร้างการเชื่อมโยง 4.3.6.1 ส่วนประกอบของการเชื่อมโยง การเช่ือมโยงประกอบดว้ ยส่วนสาํ คญั 2 ส่วน ดงั น้ี 1) จุดเชื่อมโยง (Link) เป็นส่วนของเอกสารที่ใชเ้ ป็นจุดเช่ือมโยงไปที่ส่วนอื่น ๆ ซ่ึงอาจเป็ นขอ้ ความหรือรูปภาพ 2) เป้ าหมาย (Target) เป็นส่วนท่ีกาํ หนดเป้ าหมาย ซ่ึงเป้ าหมายอาจอยใู่ นเวบ็ เพจเดียวกนั หรือเวบ็ เพจอื่นในเวบ็ ไซตเ์ ดียวกนั หรือ เวบ็ ไซตอ์ ่ืน เป็ นตน้ ____________________ ____________________ __จุดเช่ือมโยง(Link)_____ เป้ าหมาย (Target) ___________________ ___________________ ___________________ รูปที่ 4-68 ส่วนประกอบของการเช่ือมโยง
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 176 4.3.6.2 การสร้างจุดเช่ือมโยง การสร้างจุดเช่ือมโยงสามารถสร้างได้ 2 แบบ ดงั น้ี 1) การสร้างจุดเช่ือมโยงเป็ นขอ้ ความ (Text Link) เป็นการกาํ หนดให้ขอ้ ความใด ๆ เป็นจุดเชื่อมโยง ซ่ึงเรียกวา่ Hypertext Link โดยมีรูปแบบดงั น้ี รูปแบบ <a href= “url”> ขอ้ ความจุดเชื่อมโยง </a> 2) การสร้างจุดเชื่อมโยงใหเ้ ป็นรูปภาพ (Graphic Link) เป็นการกาํ หนดให้รูปภาพใด ๆ ที่ตอ้ งการใชเ้ ป็ นจุดเช่ือมโยงทาํ ใหเ้ วบ็ เพจน่าสนใจ และสื่อความหมายไดด้ ียง่ิ ข้ึน โดยมีรูปแบบดงั น้ี รูปแบบ <a href= “url”> <img src = “ช่ือไฟลร์ ูปภาพ”> </a>ตวั อยา่ ง การสร้างจุดเช่ือมโยงดว้ ยขอ้ ความและรูปภาพ สร้างจุดเช่ือมโยงเป็ นรูปภาพ สร้างจุดเชื่อมโยงเป็ นขอ้ ความ รูปที่ 4-69 การสร้างจุดเชื่อมโยงดว้ ยขอ้ ความและรูปภาพ
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 177 เมื่อนาํ เมาส์คลิกที่รูปภาพ หรือ ขอ้ ความสาํ หรับเช่ือมโยงไปที่ เวบ็ ไซตข์ องวทิ ยาลยั เทคนิค จนั ทบุรี รูปท่ี 4-70 ผลลพั ธ์ที่ไดห้ นา้ เวบ็ ไซตจ์ ากการสร้างจุดเชื่อมโยงดว้ ยขอ้ ความและรูปภาพ 4.3.6.3 ลกั ษณะการเช่ือมโยงไปท่ีตาํ แหน่งตา่ ง ๆ การกาํ หนดการเช่ือมโยงไปท่ีตาํ แหน่งตา่ ง ๆ มีหลายรูปแบบดงั น้ี 1) การเชื่อมโยงขอ้ มูลภายในเวบ็ เพจหนา้ เดียวกนั ในกรณีการเช่ือมโยงแบบน้ี ใช้ในกรณีหนา้ เวบ็ เพจที่ยาว มีการเลื่อนข้ึนบน หรือลงล่างไปที่ตาํ แหน่งขอ้ มูลน้ันอยู่ ซ่ึงการสร้างการเช่ือมโยงเพ่ือให้ผูใ้ ช้งานสามารถเช่ือมโยงไปที่จุดที่กาํ หนดไว้ ซ่ึงมีข้นั ตอนดงั น้ี (1) สร้างจุดปลายทางก่อน โดยกาํ หนดให้แอตตริบิวต์ name ของแทก็<a> ช่ือวา่ address (หรือต้งั ช่ือที่ตอ้ งการ) (2) กาํ หนดการเช่ือมโยงตามปกติแต่เปลี่ยนการอา้ งอิงปลายทางใหอ้ ยู่ในรูปแบบ #address
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 178 การเชื่อมโยงขอ้ มลู ภายในเวบ็ เพจหนา้ เดียวกนั มีรูปแบบดงั น้ี<body> กาํ หนดการเชื่อมโยงไป ท่ีอย:ู่ <a href= \" #address \" > คลิกเลย </a> ที่จุดหมายปลายทาง ………..<!--ช่วงระหวา่ งน้ีตอ้ งมีขอ้ มูลเยอะ ๆ เกินหน่ึงหนา้ ถึงสามารถเห็นผลการทาํ งาน->……….. <a name= \" address \" > [email protected] </a> สร้างจุดปลายทาง</body> รูปท่ี 4-71 รูปแบบการเช่ือมโยงขอ้ มูลภายในเวบ็ เพจหนา้ เดียวกนัตวั อยา่ ง การเชื่อมโยงขอ้ มลู ภายในเวบ็ เพจหนา้ เดียวกนั จุดเชื่อมโยง จุดปลายทาง รูปที่ 4-72 การเช่ือมโยงขอ้ มูลภายในเวบ็ เพจหนา้ เดียวกนั
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 179 เมื่อคลิกท่ีจุดเช่ือมโยง “Jump to Chapter4” สามารถเช่ือมโยงไปที่เน้ือหา “Chapter4” รูปท่ี 4-73 ผลลพั ธ์ของการเช่ือมโยงขอ้ มลู ภายในเวบ็ เพจหนา้ เดียวกนั 2) การเช่ือมโยงขอ้ มลู ในเวบ็ เพจหนา้ อ่ืนภายในเวบ็ ไซตเ์ ดียวกนั การเช่ือมโยงไปที่เวบ็ เพจอ่ืนภายในเวบ็ ไซต์เดียวกนั ควรเก็บรายชื่อไฟล์ไวใ้ นไดร์ฟและโฟลเดอร์เดียวกนั เพ่ือสะดวกในการคน้ หา รูปแบบของคาํ สั่งการเชื่อมโยงไปที่เวบ็ เพจอื่น มีรูปแบบดงั น้ี <a href= \" ชื่อไฟลป์ ลายทางที่ตอ้ งการเช่ือมโยง \" > ขอ้ ความ </a>
Search
