หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 180ตวั อยา่ ง การเชื่อมโยงขอ้ มูลเวบ็ เพจหนา้ อื่นภายในเวบ็ ไซตเ์ ดียวกนั คลิกท่ีขอ้ ความ “ติดต่อเรา” เพือ่ เปิ ดหนา้ เวบ็ เพจ contact.html รูปที่ 4-74 การเชื่อมโยงขอ้ มูลเวบ็ เพจหนา้ อ่ืนภายในเวบ็ ไซตเ์ ดียวกนั เปิ ดไฟลเ์ วบ็ เพจ contact.html โดยแสดง ที่หนา้ จอบราวเซอร์เดิมแทนที่ไฟล์ index.html รูปท่ี 4-75 ผลลพั ธ์ท่ีไดจ้ ากการเช่ือมโยงมาท่ีหนา้ ติดตอ่ เรา
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 181 การกาํ หนดการเช่ือมโยงในไฟล์ index.html เพอ่ื เชื่อมโยงไป ที่หนา้เวบ็ เพจติดต่อเรา (contact.html) ไดด้ งั รูปที่ 4-76 index.html กาํ หนดการเชื่อมโยงไปที่หนา้ contact.html รูปท่ี 4-76 การกาํ หนดการเช่ือมโยงในไฟล์ index.html 3) การเชื่อมโยงขอ้ มูลไปที่เวบ็ ไซตอ์ ่ืน การเช่ือมโยงไปที่เว็บไซต์อ่ืน ที่อยู่นอกเว็บไซต์ท่ีสร้างข้ึน*สามารถเช่ือมโยงไปท่ีเว็บไซต์ต่าง*ๆ*เช่น*เชื่อมโยงไปที่เว็บไซต์ที่ต้องการ*ซ่ึงมีรูปแบบของคาํ ส่ังการเชื่อมโยงไปท่ีเวบ็ ไซตอ์ ่ืน มีรูปแบบดงั น้ี <a href=\"http://ชื่อเวบ็ ไซตท์ ี่ตอ้ งการเชื่อมโยง\"> ขอ้ ความ </a>ตวั อยา่ ง การเชื่อมโยงขอ้ มลู ไปที่เวบ็ ไซตอ์ ื่น กาํ หนดการเชื่อมโยงไปท่ีเวบ็ ไซต์ http://www.facebook.com รูปที่ 4-77 การเช่ือมโยงขอ้ มูลไปท่ีเวบ็ ไซตอ์ ่ืน คลิกที่ขอ้ ความ “Facebook” รูปที่ 4-78 การเช่ือมโยงไปเวบ็ ไซต์ http://www.facebook.com
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 182 รูปที่ 4-79 ผลลพั ธ์ที่ไดจ้ ากการเช่ือมโยงมาเวบ็ ไซต์ http://www.facebook.com 4) การเช่ือมโยงไปท่ี e-Mail Address การเชื่อมโยงไปที่ e-Mail Address เป็นการอาํ นวยความสะดวกใหก้ บัผใู้ ชใ้ นกรณีที่ตอ้ งการส่งจดหมายติดต่อสอบถาม ซ่ึงมีรูปแบบการใชค้ าํ ส่ังดงั น้ี <a href=\"mailto: eMail Address\"> ขอ้ ความ </a>ตวั อยา่ ง การเช่ือมโยงไปท่ี e-Mail Address กาํ หนดการเชื่อมโยงไปท่ี e-Mail Address รูปท่ี 4-80 การเชื่อมโยงไปที่ e-Mail Address
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 183 คลิกที่ขอ้ ความ “e-Mail Address” รูปท่ี 4-81 การเชื่อมโยงไปที่ e-Mail Address จากรูปที่ 4-81 เม่ือคลิกที่ขอ้ ความ “e-Mail Address” จะเปิ ดโปรแกรมเขียน e-Mail Address ตามที่ไดต้ ิดต้งั ไวใ้ นระบบเครื่องน้นั ๆ เช่น Microsoft Outlook เป็นตน้ 5) การเชื่อมโยงเพื่อดาวน์โหลดไฟล์ การเชื่อมโยงเพื่อดาวน์โหลด เป็นการอาํ นวยความสะดวกใหก้ บั ผเู้ ขา้ ใช้งานเวบ็ ไซต์ กรณีที่ตอ้ งการดาวน์โหลดเอกสาร มีรูปแบบการใชค้ าํ สง่ั ดงั น้ี <a href=\"ชื่อไฟลด์ าวนโ์ หลด\"> ขอ้ ความ </a>ตวั อยา่ ง การเชื่อมโยงเพ่ือดาวนโ์ หลดไฟล์ กาํ หนดการเช่ือมโยงเพื่อดาวน์โหลดไฟล์ รูปท่ี 4-82 การเชื่อมโยงเพือ่ ดาวนโ์ หลดไฟล์ คลิกท่ีขอ้ ความ “ดาวน์โหลด” รูปท่ี 4-83 การดาวน์โหลดไฟลเ์ อกสาร
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 184 รูปที่ 4-84 ผลลพั ธ์ท่ีไดจ้ ากการดาวน์โหลดไฟลเ์ อกสาร .pdf 4.3.6.4 การกาํ หนดคุณสมบตั ิ CSS Link การกาํ หนดคุณสมบตั ิการเชื่อมโยงไปท่ีหนา้ เวบ็ เพจ เวบ็ ไซต์ หรือเน้ือหาสามารถกาํ หนดคุณสมบตั ิ CSS Link มีรูปแบบ 4 สถานะดงั น้ี 1) a:link สถานะการเช่ือมโยงเร่ิมตน้ 2) a:visited สถานะการเช่ือมโยงท่ีเคยคลิกเขา้ ไปชมเวบ็ ไซตแ์ ลว้ 3) a:hover สถานะเม่ือเล่ือนเมาส์ไปบนจุดเช่ือมโยง 4) a:active สถานะขณะกาํ ลงั คลิกเมาส์ท่ีจุดเชื่อมโยง
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 185ตวั อยา่ ง การกาํ หนดคุณสมบตั ิ CSS Link การกาํ หนดสถานะ CSS Link รูปที่ 4-85 การกาํ หนดคุณสมบตั ิ CSS Link การกาํ หนดสถานะ a:link สถานะลิงคเ์ ร่ิมตน้ รูปที่ 4-86 การกาํ หนดสถานะ a:link การกาํ หนดสถานะ a:visited สถานะลิงคท์ ี่เคยคลิกเขา้ ไปชมแลว้ รูปที่ 4-87 การกาํ หนดสถานะ a:visited
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 186 การกาํ หนดสถานะ a:hover สถานะเมื่อเลื่อนเมาส์ไปบนลิงค์ รูปที่ 4-88 การกาํ หนดสถานะ a:hover การกาํ หนดสถานะ a:active สถานะขณะกาํ ลงั คลิกท่ีลิงค์ รูปท่ี 4-89 การกาํ หนดสถานะ a:active 4.3.6.5 การกาํ หนดหนา้ จอบราวเซอร์แสดงผล การกาํ หนดหนา้ จอบราวเซอร์แสดงผลใชส้ าํ หรับการระบุเป้ าหมาย (Target)ท่ีโหลดไฟล์เช่ือมโยงควรเปิ ดไฟล์น้ันกับหน้าจอใดบนเว็บบราวเซอร์ โดยสามารถเลือกกาํ หนดค่าได้ 4 รูปแบบดงั น้ี 1) _blank เปิ ดลิงคใ์ นหนา้ จอใหมห่ รือแทบ็ ใหม่ 2) _self เปิ ดลิงคใ์ นหนา้ จอหนา้ เดิมท่ีคลิกลิงคน์ ้นั 3) _parent เปิ ดลิงคใ์ นหนา้ เอกสารที่คลิกลิงคม์ ีลกั ษณะคลา้ ยกบั _selfแตใ่ ชใ้ นกรณีแบง่ หนา้ เวบ็ แบบเฟรม 4) _top เปิ ดลิงคใ์ นหนา้ เอกสารที่คลิกลิงคแ์ บบเตม็ หนา้ จอ กรณีแบ่งหนา้เวบ็ แบบเฟรมตวั อยา่ ง การกาํ หนดหนา้ จอบราวเซอร์แสดงผล กาํ หนดหนา้ จอบราวเซอร์แสดงผล รูปท่ี 4-90 การกาํ หนดหนา้ จอบราวเซอร์แสดงผล
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 187 คลิกท่ีขอ้ ความ “วทิ ยาลยั เทคนิคจนั ทบุรี” จากน้นั เปิ ดลิงคใ์ นหนา้ จอใหมห่ รือแท็บใหม่ รูปที่ 4-91 การเชื่อมโยงเพื่อกาํ หนดหนา้ จอบราวเซอร์แสดงผลรูปท่ี 4-92 ผลลพั ธ์จากการกาํ หนดการแสดงผลในหนา้ จอใหม่หรือแทบ็ ใหม่
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 1884.4 บทสรุป HTML ยอ่ มาจากคาํ วา่ Hypertext Markup Language เป็ นภาษาหลกั ที่ใชใ้ นการสร้างเว็บไซต์ *โดยคาํ สั่งในภาษา*HTML*ทาํ หน้าท่ีควบคุมการแสดงผลของขอ้ มูลในเว็บไซต์ โดยคาํ ส่ังท่ีใช้ควบคุมการแสดงผลใน HTML เรียกว่า แท็ก ซ่ึงในแต่ละแท็กมีหนา้ ท่ีแสดงผล ตามรูปแบบของคาํ ส่ังน้นั ๆ ซ่ึงการสร้างเวบ็ เพจแต่ละหน้าตอ้ งมีเครื่องมือในการเขียนและแกไ้ ขโคด้เรียกวา่ Text Editor เช่น Notepad, Notepad++, EditPlus เป็นตน้ การสร้างเวบ็ ไซตด์ ว้ ยภาษา HTML ให้น่าสนใจควรมีการจดั วางเลยเ์ อาทแ์ ละจดั รูปแบบการแสดงผลดว้ ย CSS เช่น การจดั รูปแบบเอกสาร รูปแบบขอ้ ความ สีขอ้ ความ สีพ้ืนหลงั การสร้างตาราง และการเช่ือมโยงหนา้ เวบ็ เพจ เป็นตน้ นอกจากน้ีการนาํ รูปภาพมาใช้งานบนเวบ็ ไซต์มีส่วนสําคญั เพราะสามารถส่ือความหมายได้ดีเมื่อรวมกับข้อความที่แสดงบนเว็บไซต์ สําหรับไฟล์รูปภาพท่ีนิยมใช้งานบนเว็บไซต์มีนามสกลุ .gif, .jpg และ .png เพราะไฟลร์ ูปภาพมีขนาดเลก็ สามารถแสดงผลไดเ้ ร็ว
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 189 บรรณานุกรมกงั วาน อศั วไชยวศิน และอรพนิ ประวตั ิบริสุทธ์ิ.**คู่มือสร้างเวบ็ ไซต์ด้วย HTML5 CSS3&Java Script ฉบบั สมบูรณ์.**กรุงเทพฯ*:*โปรวชิ นั่ ,*2556.จารุนนั ท*์ *เรืองกิจวณิชกลุ .**การสร้างเวบ็ ไซต์.**กรุงเทพฯ*:*ศนู ยส์ ่งเสริมวชิ าการ,*2557.ดวงพร**เกี๋ยงคาํ .**คู่มือการออกแบบและสร้างเวบ็ ไซต์ ฉบับสมบูรณ์.**นนทบุรี*:*ไอดีซีฯ, 2560.บญั ชา ปะสีละเตสัง.**สร้างเวบ็ ไซต์ด้วย HTML5 ร่วมกบั CSS3 และ JQuery.**กรุงเทพฯ*:* ซีเอด็ ยเู คชนั่ ,*2556.ปริญญา เสง่ียมจิตร์.**พฒั นาเวบ็ ไซต์ให้เหนือช้ันด้วย HTML5 & CSS3.**กรุงเทพฯ*:* ซีเอด็ ยเู คชน่ั ,*2555.ฝ่ ายตาํ ราวชิ าการคอมพิวเตอร์.**(บรรณาธิการ).**การสร้างเวบ็ เพจ HTML.**กรุงเทพฯ*:* ซีเอด็ ยเู คชน่ั ,*2555.ฟอร์แมต GIF.**[ออนไลน์] (ม.ป.ป.).**[สืบคน้ วนั ที่ 25 กรกฎาคม 2557].**จาก http://glitter.kapook.com/content.php?lang=th&id=10118&category_id=183เริงชยั **เรืองกิจวณิชกลุ *และจารุนนั ท*์ *เรืองกิจวณิชกุล.**การสร้างเวบ็ เพจด้วย HTML.** กรุงเทพฯ *:*ศนู ยส์ ่งเสริมวชิ าการ,*2555.วฤษาย์ ร่มสายหยดุ .**พฒั นาเวบ็ ไซต์ด้วย HTML5 ฉบบั มืออาชีพ.**กรุงเทพฯ*:* ซีเอด็ ยเู คชน่ั ,*2556.ศุภชยั **สมพานิช.**HTML 5 with CSS3 and jQuery.**กรุงเทพฯ*:*ไอดีซีพรีเมียร์,*2556.Fabricatorz LLC.**ฟอร์แมต PNG.**[ออนไลน์] 2550.**[สืบคน้ วนั ที่ 25 กรกฎาคม 2557].** จาก https://openclipart.org/detail/4714/a-new-computerWorld Wide Web Consortium (W3C).**Learn CSS.** [ออนไลน์] (ม.ป.ป.).**[สืบคน้ วนั ท่ี 17 กรกฎาคม 2557].**จาก http:// www.w3.org/2006/Talks/0718-aaai-tbl/ Overview.html#(14)
Search
