การลิ้งค์ไปยังหน้าต่างๆด้วยภาพ ภาษา php html

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

aegmongkol
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 644
ลงทะเบียนเมื่อ: 02/08/2021 10:05 am

การลิ้งค์ไปยังหน้าต่างๆด้วยภาพ ภาษา php html

โพสต์ที่ยังไม่ได้อ่าน โดย aegmongkol »

ในการสร้างเว็บไซต์ต่างๆการสร้างลิ้งค์นั้นถือว่าสำคัญมากเนื่องจากเป็นตัวกลางไปการไปยังหน้าต่างๆภายในเว็บไซต์ที่ทำให้ผู้ใช้ใช้งานได้สะดวกซึ่ง การสร้างลิ้งค์ขึ้นในการเขียนเว็บไซต์นั้นไม่จำเป็นที่ต้องต้องสร้างลิ้งค์ที่เป็นปุ่มกด หรือ ลิ้งค์ที่เป็นตัวอักษร สามารถทำให้รูปภาพนั้นมีการลิ้งค์ไปยังหน้าอื่นๆได้ซึ่งการเขียนนี้จะต้องใช้ภาษา html และ php ซึ่งถ้าเราจะทำลิ้งค์ที่เป็นรูปภาพได้อย่างแรกที่ต้องทำคือ สามารถ ใส่รูปภาพด้วย php ลงไปในเว็บไซต์ได้


การทำรูปภาพให้เป็นลิ้งค์
สร้างไฟล์
สร้างไฟล์
2_1.JPG (6.34 KiB) Viewed 2664 times
1. ให้เราทำการสร้างไฟล์ที่จะทำการเขียนโค้ดขึ้นมาก่อนโดยเราจะตั้งชื่อว่าอะไรก็ได้ในที่นี้จะใช้ชื่อว่า image.php

เพิ่มรูปภาพ

โค้ด: เลือกทั้งหมด

้<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/kk.jpg" alt="">
    <img src="img/kk.jpg" alt="">
    <img src="img/kk.jpg" alt="">
    <img src="img/kk.jpg" alt="">
   
</body>
</html>
2. เปิดแท็ก html ขึ้นมาเพื่อใช้ในการเขียนโค้ดแล้วใช้ฟังก์ชั่นในการใส่รูปภาพ ซึ่งในหน้านี้เราจะใส่ 4 รูปภาพเพื่อให้เห็นถึงความแตกต่าง



ผลลัพธ์
ผลลัพธ์
2_2.JPG (35.91 KiB) Viewed 2664 times
3. ทำการแสดงผลลัพธ์จะมีรูปที่เราเพิ่มเข้าไป 4 รูป



สร้างไฟล์
สร้างไฟล์
2_3.JPG (5.66 KiB) Viewed 2664 times
4. จากนั้นให้เราสร้างอีกไฟล์นึงที่ชื่อ link.php เพื่อเป็นตัวลิ้งค์



คำสั่ง ลิ้งค์

โค้ด: เลือกทั้งหมด

้<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="image.php">
    <img src="img/kk.jpg" alt="">
    </a>
</body>
</html>
5. จากนั้นให้เราทำการเขียนโค้ดในหน้าของ link.php ให้เหมือนกับหน้าของ image.php แต่จะลดรูปภาพให้เหลือรูปเดียว และจะเพิ่มโค้ด <a href="image.php"> เพื่อทำการลิ้งค์ไปยังหน้าของ image.php



ผลลัพธ์
ผลลัพธ์
2_4.JPG (8.3 KiB) Viewed 2664 times
6. เมื่อเราลองแสดงผลจะเห็นว่ารูปภาพนั้นสามารถกดได้แสดงว่ามีลิ้งค์รองรับอยู่



ผลลัพธ์
ผลลัพธ์
2_5.JPG (33.74 KiB) Viewed 2664 times
7. เมื่อเราทำการกดที่รูปภาพแล้วจะทำการลิ้งค์ไปยังหน้าของ image.php ที่เราได้ใส่รูปภาพไว้หลายๆรูป






การสร้างลิ้งค์ขึ้นในการทำเว็บไซต์สามารถทำได้หลายวิธี อย่างที่ยกตัวอย่าง การรลิ้งค์ด้วยรูปภาพซึ่งต้องทำการใส่รูปภาพและทำการเชื่อมลิ้ง ซึ่งเป็นการสร้างลิ้งค์ที่ง่ายเหมาะสำหรับมือใหม่ที่กำลังศึกษาการเขียนโค้ดด้วยภาษา html หรือ php


อ้างอิง
http://www.nr.ac.th/learning/htmlforweb/learning8.html
https://pantip.com/topic/34138339
https://marketingtangtruong.com/%E0%B8%AA%E0%B8%AD%E0%B8%99-php-html-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A5%E0%B8%B4%E0%B9%89%E0%B8%87%E0%B8%84%E0%B9%8C%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%9E-how-to-use-an-ima/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 75