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 <แimทก็ gคาสsง่ัrc=“pic1.jpg”แaทlก็ tค=าส“ง่ั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 ตอ้ งมีเครื่องมือในการเขียนและแกไ้ ขโคด้ เรียกว่า Text Editor เป็ นโปรแกรมที่ช่วยในการกาหนดข้อความและรูปแบบคาส่ังต่าง ๆ ในมาตรฐานของ 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 139 4.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 Value Selector 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 สามารถนาไปใชร้ ่วมกบั แทก็ อ่ืน ๆ เพอื่ ใหแ้ ทก็ น้นั มีคุณสมบตั ิตามทก่ี าหนด การเขยี น Class Selector ให้ใส่จดุ ( . ) หนา้ ช่ือ 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 เป็ นการกาหนดระยะห่างจากขอบดา้ นในของ Box Model กบั เน้ือหาดา้ นในของ 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, 2550 4.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; รูปแบบ และสีเสน้ ขอบ border-collapse ค่าที่สามารถเลือกมี 2 แบบคอื เป็นการกาหนดลกั ษณะของเสน้ ขอบ separate แยกเป็น 2 เสน้ โดยแยกเป็น 2 เสน้ หรือเสน้ เดียว collapse รวมเป็นเสน้ เดียว เช่น border-collapse: separate; padding length เป็นการกาหนดระยะห่างระหวา่ งขอบ เช่น padding: 15px; ของวตั ถุดา้ นในกบั ขอ้ ความทอ่ี ยู่ ใน Box Model text-align รูปแบบการจดั ขอ้ ความ มีดงั น้ี เป็นการกาหนดรูปแบบการจดั ขอ้ ความ left ชิดซา้ ย ในแนวนอน center ก่ึงกลาง right ชิดขวา justify จดั หนา้ หลงั เทา่ กนั เช่น text-align: left; vertical-align รูปแบบการจดั ขอ้ ความ มีดงั น้ี เป็ นการกาหนดรูปแบบการจดั ขอ้ ความ top ดา้ นบน ในแนวต้งั middle ก่ึงกลาง bottom ดา้ นล่าง เช่น vertical-align: middle; border-spacing length length เป็นการกาหนดระยะระหวา่ งตาราง เช่น border-spacing: 2px 5px; และขอบ แนวนอน และแนวต้งั background-color ค่าสีมี 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 173 4.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>
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 180 ตวั อยา่ ง การเชื่อมโยงขอ้ มูลเวบ็ เพจหนา้ อื่นภายในเวบ็ ไซตเ์ ดียวกนั คลิกท่ีขอ้ ความ “ติดต่อเรา” เพื่อเปิดหนา้ เวบ็ เพจ contact.html รูปที่ 4-74 การเชื่อมโยงขอ้ มูลเวบ็ เพจหนา้ อื่นภายในเวบ็ ไซตเ์ ดียวกนั เปิดไฟลเ์ วบ็ เพจ contact.html โดยแสดง ที่หนา้ จอบราวเซอร์เดิมแทนท่ีไฟล์ index.html รูปท่ี 4-75 ผลลพั ธท์ ไี่ ดจ้ ากการเช่ือมโยงมาทหี่ นา้ ตดิ ต่อเรา
Search
