ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
แค่เขียนโค้ด HTML บรรทัดเดียว คุณก็เปลี่ยนรูปภาพในแทบทุกเว็บ เป็นลิงค์ที่คลิกได้ แต่จะทำได้ต้องอาศัย 2 สิ่งสำคัญ นั่นคือ URL ของรูป และ URL ของเว็บไซต์นั่นเอง
ขั้นตอน
-
สร้างไฟล์ HTML. เปิด text editor แล้วสร้างไฟล์ใหม่ จากนั้นเซฟไฟล์เป็น index.html
- • จะใช้ text editor ไหนก็ได้ที่ถนัด กระทั่ง text editor ที่ติดมากับ Windows แต่แรก อย่าง Notepad และ TextEdit ของ Mac OS X
- • ถ้าอยากใช้ text editor สำหรับเขียนโค้ด HTML โดยเฉพาะ ให้ คลิกที่นี่
เพื่อดาวน์โหลด Atom เป็น text editor ที่ใช้ได้ทั้งในระบบปฏิบัติการ Windows, Mac OS X และ Linux เลย
- • ถ้าใช้ TextEdit ก่อนจะเริ่มเขียนโค้ดในไฟล์ HTML ให้คลิกเมนู Format แล้วคลิก Make Plain Text ซะก่อน เพื่อให้แน่ใจว่าไฟล์ HTML จะโหลดในเบราว์เซอร์ได้ครบถ้วนสมบูรณ์
- • Word processor อย่าง Microsoft Word นั้น ไม่ค่อยเหมาะกับการเขียนโค้ด HTML เพราะมี "อักขระล่องหน" แทรกเข้าไป แถมจัดฟอร์แมตเอกสารแบบที่ทำไฟล์ HTML เสียได้เลย จนแสดงผิดพลาดในเบราว์เซอร์ได้
-
copy แล้ว paste โค้ด HTML มาตรฐาน. เลือกแล้ว copy โค้ด HTML ต่อไปนี้ ไป paste ในไฟล์ index.html ที่เปิดไว้
< a href = "DESTINATION URL" >< img src = "IMAGE URL" /></ a >
-
หา URL ของรูป. หารูปในอินเทอร์เน็ต จากนั้นคลิกขวาที่รูป แล้วคลิก Copy Image URL, Copy Image Address หรือ Copy Image Location แล้วแต่เบราว์เซอร์ที่ใช้
- • ถ้าเป็น Firefox กับ Internet Explorer จะเป็น Copy Image Location ส่วน Chrome จะเป็น Copy Image URL และ Safari จะเป็น Copy Image Address
-
ใส่ URL ของรูป. ในไฟล์ index.html ให้คลิกแล้วลากเมาส์เลือก IMAGE URL จากนั้นกด CTRL + V เพื่อ paste URL ของรูป
-
ใส่ URL ของเว็บ. ในไฟล์ index.html ให้ลบ DESTINATION URL แล้วพิมพ์ https://www.google.com
- • ให้ใช้ URL ไหนก็ได้ที่ต้องการ เป็น destination URL หรือ URL ปลายทาง
-
เซฟไฟล์ HTML.
-
เปิดไฟล์ HTML ในเบราว์เซอร์. คลิกขวาที่ไฟล์ index.html แล้วเปิดในเบราว์เซอร์ที่ถนัด
- • พอเปิดเบราว์เซอร์แล้ว ถ้าไม่เห็นรูป ให้เช็คก่อนว่าสะกดชื่อไฟล์ถูกแล้ว ในหน้าต่าง text editor ของ index.html
- • พอเปิดเบราว์เซอร์แล้ว ถ้าขึ้นเป็นโค้ด HTML แทนรูปพื้นหลัง แสดงว่าเซฟไฟล์ index.html เป็นเอกสาร rich text แนะนำให้แก้ไขไฟล์ HTML ใน text editor อื่น
โฆษณา
-
รู้จัก anchor tag. โค้ด HTML นั้นประกอบด้วยแท็กเปิด (open tag) และแท็กปิด (closed tag) โดยแท็ก <a href=""> นั้นเป็นแท็กเปิด ส่วน </a> เป็นแท็กปิด แท็กแบบนี้เรียกว่า anchor tag ใช้ใส่ลิงค์ในหน้าเว็บ [1] X แหล่งข้อมูลอ้างอิง
- <a ใช้บอกเบราว์เซอร์ให้ render หรือสร้างลิงค์ ส่วน href นั้นย่อมาจาก HTML reference และ = ใช้บอกเบราว์เซอร์ให้สร้างลิงค์จากทุกอย่างใน " " คุณใส่ URL ไหนก็ได้ระหว่างกลางเครื่องหมายคำพูด
- </a> ใช้บอกเบราว์เซอร์ว่าปิด anchor tag แล้ว
- พอคุณพิมพ์ข้อความระหว่างกลาง <a href=""> กับ </a> จะได้เป็นข้อความที่เป็นลิงค์คลิกได้ อยู่ในหน้าเว็บ เช่น <a href="https://www.google.com">Google</a> จะได้ออกมาเป็นลิงค์ไปยัง Google
-
รู้จัก image tag. แท็ก <img> เป็นแท็กปิดในตัวเอง ปิดได้โดยพิมพ์ <img src="" /> หรือโดยพิมพ์ <img src=""></img> [2] X แหล่งข้อมูลอ้างอิง
- แท็ก <img ใช้บอกเบราว์เซอร์ให้ render หรือสร้างรูป โดย src นั้นย่อมาจาก source ส่วน = นั้นใช้บอกให้เบราว์เซอร์ดึงรูปมาจากตำแหน่งที่พิมพ์ไว้ใน " "
- /> ใช้บอกเบราว์เซอร์ให้ปิด image tag
- เช่น {{samp[|<img src="https://www.google.com/images/srpr/logo11w.png" />}} จะดึงรูปจาก URL นั้น มาแสดงในเบราว์เซอร์
-
ใช้โค้ดนี้ที่ไหนก็ได้. พอรู้จักโค้ดนี้แล้ว ให้ใช้ <a href="DESTINATION URL"><img src="IMAGE URL" /></a> เพื่อใส่รูปแบบคลิกได้ แล้วไปยังหน้าเว็บที่ render โค้ด HTML ได้โฆษณา
ข้อมูลอ้างอิง
โฆษณา
