หน่วยท่ี 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 188 4.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-computer World Wide Web Consortium (W3C).**Learn CSS.** [ออนไลน]์ (ม.ป.ป.).**[สืบคน้ วนั ท่ี 17 กรกฎาคม 2557].**จาก http:// www.w3.org/2006/Talks/0718-aaai-tbl/ Overview.html#(14)
Search
