เนื้อหา

• ที่จะก้าว
• วิธีที่ 1 จาก 2: เขียนโค้ด HTML
• วิธีที่ 2 จาก 2: ทำความเข้าใจโค้ด HTML

ด้วยโค้ด HTML เพียงบรรทัดเดียวคุณสามารถเพิ่มรูปภาพที่คลิกได้ในเกือบทุกเว็บไซต์ มีสองสิ่งที่คุณจะต้องใช้ในการทำงานนี้ คุณต้องมี URL สำหรับรูปภาพและ URL ของเว็บไซต์

ที่จะก้าว

วิธีที่ 1 จาก 2: เขียนโค้ด HTML

1. สร้างไฟล์ HTML เปิดโปรแกรมแก้ไขข้อความแล้วสร้างไฟล์ใหม่ บันทึกไฟล์เป็น index.html
   •คุณสามารถใช้โปรแกรมแก้ไขข้อความใดก็ได้ที่คุณต้องการแม้แต่โปรแกรมแก้ไขข้อความธรรมดาของ Windows (Notepad) และ Mac OS X (TextEdit)
   •หากคุณต้องการใช้โปรแกรมแก้ไขข้อความสำหรับทำงานกับ HTML คลิกที่นี่เพื่อดาวน์โหลด Atom โปรแกรมแก้ไขข้อความสำหรับ Windows, Mac OS X และ Linux
   •หากคุณกำลังใช้ TextEdit ให้คลิกเมนูรูปแบบก่อนสร้างไฟล์ HTML จากนั้นคลิกสร้างข้อความธรรมดา การตั้งค่านี้ช่วยให้มั่นใจได้ว่าไฟล์ HTML โหลดอย่างถูกต้องในเว็บเบราว์เซอร์
   •โปรแกรมประมวลผล Word เช่น Microsoft Word ไม่เหมาะสำหรับการเขียน HTML เพราะเพิ่มอักขระที่มองไม่เห็นและการจัดรูปแบบที่อาจทำให้ไฟล์ HTML เสียหายและทำให้แสดงผลอย่างไม่ถูกต้องในเว็บเบราว์เซอร์
2. คัดลอกและวางโค้ด HTML มาตรฐาน เลือกและคัดลอกโค้ด HTML ด้านล่างแล้ววางลงใน index.html ที่เปิดไว้
   

   a href = "target url"> img src = "image url" /> / a>

3. ค้นหา URL ของรูปภาพของคุณ ค้นหาภาพบนเว็บคลิกขวาและ (ขึ้นอยู่กับเบราว์เซอร์ของคุณ) คลิก Copy Image URL, Copy Image Address หรือ Copy Image Location
   • Firefox และ Internet Explorer ใช้คัดลอกตำแหน่งรูปภาพ Chrome ใช้ Copy Image URL Safari ใช้ Copy Image Address
4. เพิ่ม URL ของรูปภาพ ในไฟล์ index.html ให้คลิกและลากเพื่อเลือก URL ของรูปภาพด้วยเมาส์ของคุณจากนั้นกด CTRL + V เพื่อวาง URL
5. เพิ่ม URL เป้าหมาย ใน index.html ลบ URL เป้าหมายและประเภท https://www.startpage.com.
   •คุณสามารถใช้ URL ใดก็ได้เป็น URL เป้าหมาย
6. บันทึกไฟล์ HTML
7. เปิดไฟล์ HTML ในเว็บเบราว์เซอร์ คลิกขวาที่ index.html จากนั้นเปิดไฟล์นี้ในเว็บเบราว์เซอร์ที่คุณเลือก
   •หากเบราว์เซอร์เปิดขึ้น แต่คุณไม่เห็นภาพตรวจสอบให้แน่ใจว่าคุณสะกดชื่อไฟล์ภาพในไฟล์ index.html อย่างถูกต้อง
   •เมื่อเบราว์เซอร์เปิดขึ้น แต่คุณเห็นโค้ด HTML แทนที่จะเป็นภาพพื้นหลัง index.html ของคุณจะถูกบันทึกเป็นไฟล์. rtf (ไฟล์ rich text) ลองแก้ไขไฟล์ HTML ในโปรแกรมแก้ไขข้อความอื่น

วิธีที่ 2 จาก 2: ทำความเข้าใจโค้ด HTML

1. ทำความเข้าใจแท็กจุดยึด โค้ด HTML ประกอบด้วยแท็กเปิดและปิด แท็ก href = ""> คือแท็กเริ่มต้นและ / a> คือแท็กปิดท้าย สิ่งนี้เรียกว่าแท็กจุดยึดและใช้สำหรับการเพิ่มลิงก์ไปยังหน้าเว็บ
   • ก บอกให้เบราว์เซอร์สร้างลิงค์ href เป็นคำย่อสำหรับการอ้างอิง HTML ซึ่งเป็นไฟล์ = บอกให้เบราว์เซอร์เปลี่ยนทุกอย่างระหว่าง ’ ’ สร้างลิงค์ สามารถวาง URL ใดก็ได้ระหว่างเครื่องหมายคำพูดทั้งสอง
   • / a> บอกเบราว์เซอร์ว่าปิดแท็ก Anchor
   • เมื่อคุณเพิ่มข้อความระหว่าง a href = ""> และ / a> ข้อความนั้นจะกลายเป็นลิงก์ที่คลิกได้บนหน้าเว็บ ตัวอย่างเช่น: a href = "https://www.google.com"> Google / a> สร้างลิงก์ไปยัง Google
2. ทำความเข้าใจแท็กรูปภาพ แท็ก img> เป็นแท็กปิด คุณสามารถปิดได้โดยใช้ img src = "" /> หรือ img src = ""> / img>
   • img แท็กบอกให้เบราว์เซอร์แสดงภาพ src เป็นคำย่อของ source, de = บอกให้เบราว์เซอร์ลบทุกอย่างระหว่างไฟล์ ’ ’ และดึงภาพจากตำแหน่งนั้น
   • /> บอกให้เบราว์เซอร์ปิดแท็กรูปภาพ
   • ตัวอย่างเช่น: {samp [} รับภาพจาก URL นั้นจากนั้นแสดงในเว็บเบราว์เซอร์
3. ใช้รหัสนี้ทุกที่ ตอนนี้คุณรู้รหัสนี้แล้วคุณก็ทำได้ a href = "target url"> img src = "image url" /> / a> สำหรับการเพิ่มรูปภาพที่คลิกได้ในหน้าเว็บใด ๆ ด้วยโค้ด HTML