EZ

EZNotes

🖼️ Practical 76: Creating a graphical hyperlink

Learn how to create graphical hyperlinks using images and styled HTML elements that users can click to navigate.

🎯 Aim

To create an HTML webpage that demonstrates how to create graphical hyperlinks using images and styled HTML elements as clickable links.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • An image file (for image-based links)

📖 Introduction

A graphical hyperlink is a clickable graphic element that navigates to another page or resource. There are two main ways to create them:

  • Image as a link — wrapping an <img> tag inside an <a> tag.
  • Styled HTML element as a link — using CSS to style <div>, <span>, or <button> elements as clickable links.
💡 Tip: Graphical links are more engaging than text links. They can be used for navigation menus, social media icons, logo links, and call-to-action buttons.

📊 Preview of the Output

🖼️ Graphical Hyperlinks

🖼️ Image as a Link
🏠 Home
Click to go Home
📄 About
Click to learn About
⚙️ Services
Click to view Services
📧 Contact
Click to Contact us
🎨 Styled HTML Elements as Links
📚 Courses Browse our courses 📝 Notes Study materials 🎯 Tests Practice tests 📈 Results Check your results
📊 Image Link with Border & Hover Effect
Hover Me
Visit our store
Hover Me
View our gallery

📝 Step‑by‑Step: Creating the HTML Page

Method 1: Image as a Link

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following code:
<!-- Method 1: Image as a Link --> <html> <head> <title>Graphical Links - Image</title> </head> <body> <h1>🖼️ Image as a Link</h1> <!-- Simple image link --> <p> Click the image below to visit our website: </p> <a href="https://www.example.com" target="_blank" title="Visit Example.com"> <img src="logo.png" alt="Example.com Logo" width="200" height="100"> </a> <!-- Image link with border --> <h2>Image with Border</h2> <a href="https://www.google.com" target="_blank"> <img src="google-logo.png" alt="Google Logo" style="border: 4px solid #3498db; border-radius: 8px; width: 200px; height: 80px;"> </a> <!-- Image link with hover effect --> <h2>Image with Hover Effect</h2> <style> .hover-image { transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s; border-radius: 8px; } .hover-image:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.3); opacity: 0.9; } </style> <a href="https://www.youtube.com" target="_blank"> <img src="youtube-logo.jpg" alt="YouTube Logo" class="hover-image" width="200" height="80"> </a> </body> </html>

Method 2: Styled HTML Elements as Links

  1. In Notepad++, write the following code:
<!-- Method 2: Styled HTML Elements as Links --> <html> <head> <title>Graphical Links - Styled</title> <style> .nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; padding: 20px; max-width: 800px; margin: 0 auto; } /* Styled link card */ .link-card { display: block; padding: 20px; background: #f8f9fa; border-radius: 10px; text-align: center; text-decoration: none; color: #2c3e50; border: 2px solid #e9ecef; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .link-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); border-color: #3498db; } .link-card .icon { font-size: 2.5em; display: block; margin-bottom: 6px; } .link-card .title { font-weight: 700; font-size: 1.1em; } .link-card .desc { font-size: 0.85em; color: #888; } </style> </head> <body> <h1>🎨 Styled HTML Elements as Links</h1> <!-- Grid of styled link cards --> <div class="nav-grid"> <a href="#" class="link-card"> <span class="icon">🏠</span> <span class="title">Home</span> <span class="desc">Return to homepage</span> </a> <a href="#" class="link-card"> <span class="icon">📚</span> <span class="title">Courses</span> <span class="desc">Browse all courses</span> </a> <a href="#" class="link-card"> <span class="icon">📝</span> <span class="title">Notes</span> <span class="desc">Study materials</span> </a> <a href="#" class="link-card"> <span class="icon">📧</span> <span class="title">Contact</span> <span class="desc">Get in touch with us</span> </a> </div> </body> </html>

Step 2: Save the File

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location (e.g., Desktop).
  3. Name the file: "graphical_links.html" or "practical76.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the graphical_links.html file.
  3. It will open in your default web browser.
  4. You will see the graphical hyperlinks and can click them to test.

📊 Types of Graphical Hyperlinks

Type Description Example
Image Link An image wrapped in <a> tag <a href="#"><img src="logo.jpg"></a>
Icon Link An icon (emoji, FontAwesome, etc.) inside <a> <a href="#">🏠 Home</a>
Card Link A styled block with icon, title, and description Styled <a> with CSS grid/flexbox
Button Link A styled button that acts as a link <a href="#" class="btn">Click Me</a>
Logo Link A logo image that links to the homepage <a href="index.html"><img src="logo.svg"></a>

📊 CSS Styling for Graphical Links

<!-- CSS styling for graphical links --> <style> /* Button-like link */ .btn-link { display: inline-block; padding: 12px 24px; background: #3498db; color: white; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.3s, transform 0.2s; } .btn-link:hover { background: #2980b9; transform: scale(1.05); } /* Image link with overlay */ .image-link-container { position: relative; display: inline-block; } .image-link-container .overlay { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; padding: 8px; text-align: center; transition: opacity 0.3s; opacity: 0; } .image-link-container:hover .overlay { opacity: 1; } </style>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Missing href in <a> tag Link won't work Always include href
Forgetting alt text for image links Poor accessibility Always add descriptive alt text
Not using target="_blank" for external image links User leaves your site Use target="_blank" for external
Image too large Slow page load Optimize images for web
Styling only with :hover without base styles Links may lack basic styling Always define base styles first

📊 Observations

  • Graphical hyperlinks make websites more visually appealing and user-friendly.
  • You can use any HTML element inside an <a> tag — images, icons, text, or styled blocks.
  • Adding CSS transitions (hover effects) makes links more interactive.
  • Image links should always have descriptive alt text for accessibility.
  • Styled block links are great for navigation menus, feature cards, and call-to-action buttons.
  • Using target="_blank" is important for external links.

✅ Result

You have successfully:

  • Created graphical hyperlinks using both images and styled HTML elements.
  • Used CSS to style links with hover effects.
  • Created navigation cards with icons and descriptions.
  • Learned about different types of graphical links.
  • Viewed and tested all links in a browser.
📌 Important: Always include the href attribute in links. Use descriptive alt text for image links. Add hover effects with CSS to make graphical links more interactive and user-friendly.
💡 Next Steps: Try creating a social media icon bar with clickable icons. Create a featured content grid where each card is a clickable link. Use CSS animations for more advanced hover effects. Learn about image sprites for faster loading!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو تصاویر اور اسٹائل شدہ HTML عناصر کو کلک کرنے کے قابل لنکس کے طور پر استعمال کرتے ہوئے گرافیکل ہائپر لنکس بنانے کا طریقہ ظاہر کرتا ہے۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • ایک تصویری فائل (تصویر پر مبنی لنکس کے لیے)

📖 تعارف

گرافیکل ہائپر لنک ایک کلک کرنے کے قابل گرافک عنصر ہے جو کسی دوسرے صفحے یا وسائل پر تشریف لے جاتا ہے۔ ان کو بنانے کے دو اہم طریقے ہیں:

  • تصویر بطور لنک — <img> ٹیگ کو <a> ٹیگ کے اندر لپیٹنا۔
  • اسٹائل شدہ HTML عنصر بطور لنک — <div>، <span>، یا <button> عناصر کو کلک کرنے کے قابل لنکس کے طور پر اسٹائل کرنے کے لیے CSS کا استعمال۔
💡 مشورہ: گرافیکل لنکس ٹیکسٹ لنکس سے زیادہ دلکش ہیں۔ انہیں نیویگیشن مینوز، سوشل میڈیا آئیکنز، لوگو لنکس، اور ایکشن کے لیے کال بٹنز کے لیے استعمال کیا جا سکتا ہے۔

📊 آؤٹ پٹ کا پیش منظر

🖼️ گرافیکل ہائپر لنکس

🖼️ تصویر بطور لنک
🏠 ہوم
ہوم جانے کے لیے کلک کریں
📄 تعارف
تعارف جاننے کے لیے کلک کریں
⚙️ خدمات
خدمات دیکھنے کے لیے کلک کریں
📧 رابطہ
ہم سے رابطہ کرنے کے لیے کلک کریں
🎨 اسٹائل شدہ HTML عناصر بطور لنکس
📚 کورسز ہمارے کورسز دیکھیں 📝 نوٹس مطالعہ کا مواد 🎯 ٹیسٹ پریکٹس ٹیسٹ 📈 نتائج اپنے نتائج چیک کریں
📊 بارڈر اور ہوور اثر کے ساتھ تصویری لنک

📝 مرحلہ وار: HTML صفحہ بنانا

طریقہ 1: تصویر بطور لنک

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا کوڈ لکھیں:
<!-- طریقہ 1: تصویر بطور لنک --> <html> <head> <title>Graphical Links - Image</title> </head> <body> <h1>🖼️ تصویر بطور لنک</h1> <!-- سادہ تصویری لنک --> <p> ہماری ویب سائٹ ملاحظہ کرنے کے لیے نیچے دی گئی تصویر پر کلک کریں: </p> <a href="https://www.example.com" target="_blank" title="Example.com ملاحظہ کریں"> <img src="logo.png" alt="Example.com لوگو" width="200" height="100"> </a> <!-- بارڈر کے ساتھ تصویری لنک --> <h2>بارڈر کے ساتھ تصویر</h2> <a href="https://www.google.com" target="_blank"> <img src="google-logo.png" alt="Google لوگو" style="border: 4px solid #3498db; border-radius: 8px; width: 200px; height: 80px;"> </a> <!-- ہوور اثر کے ساتھ تصویری لنک --> <h2>ہوور اثر کے ساتھ تصویر</h2> <style> .hover-image { transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s; border-radius: 8px; } .hover-image:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.3); opacity: 0.9; } </style> <a href="https://www.youtube.com" target="_blank"> <img src="youtube-logo.jpg" alt="YouTube لوگو" class="hover-image" width="200" height="80"> </a> </body> </html>

طریقہ 2: اسٹائل شدہ HTML عناصر بطور لنکس

  1. Notepad++ میں، نیچے دیا گیا کوڈ لکھیں:
<!-- طریقہ 2: اسٹائل شدہ HTML عناصر بطور لنکس --> <html> <head> <title>Graphical Links - Styled</title> <style> .nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; padding: 20px; max-width: 800px; margin: 0 auto; } /* اسٹائل شدہ لنک کارڈ */ .link-card { display: block; padding: 20px; background: #f8f9fa; border-radius: 10px; text-align: center; text-decoration: none; color: #2c3e50; border: 2px solid #e9ecef; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .link-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); border-color: #3498db; } .link-card .icon { font-size: 2.5em; display: block; margin-bottom: 6px; } .link-card .title { font-weight: 700; font-size: 1.1em; } .link-card .desc { font-size: 0.85em; color: #888; } </style> </head> <body> <h1>🎨 اسٹائل شدہ HTML عناصر بطور لنکس</h1> <!-- اسٹائل شدہ لنک کارڈز کا گرڈ --> <div class="nav-grid"> <a href="#" class="link-card"> <span class="icon">🏠</span> <span class="title">ہوم</span> <span class="desc">ہوم پیج پر واپس جائیں</span> </a> <a href="#" class="link-card"> <span class="icon">📚</span> <span class="title">کورسز</span> <span class="desc">تمام کورسز دیکھیں</span> </a> <a href="#" class="link-card"> <span class="icon">📝</span> <span class="title">نوٹس</span> <span class="desc">مطالعہ کا مواد</span> </a> <a href="#" class="link-card"> <span class="icon">📧</span> <span class="title">رابطہ</span> <span class="desc">ہم سے رابطہ کریں</span> </a> </div> </body> </html>

دوسرا قدم: فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. ایک مقام منتخب کریں (مثلاً Desktop)۔
  3. فائل کا نام رکھیں: "graphical_links.html" یا "practical76.html"۔
  4. "Save as type" میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔

تیسرا قدم: براؤزر میں کھولیں

  1. اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. graphical_links.html فائل پر ڈبل‑کلک کریں۔
  3. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  4. آپ کو گرافیکل ہائپر لنکس نظر آئیں گے اور آپ انہیں ٹیسٹ کرنے کے لیے کلک کر سکتے ہیں۔

📊 گرافیکل ہائپر لنکس کی اقسام

قسم وضاحت مثال
تصویری لنک <a> ٹیگ میں لپیٹی گئی تصویر <a href="#"><img src="logo.jpg"></a>
آئیکن لنک <a> کے اندر ایک آئیکن (ایموجی، فونٹ اوسم وغیرہ) <a href="#">🏠 ہوم</a>
کارڈ لنک آئیکن، عنوان اور وضاحت کے ساتھ ایک اسٹائل شدہ بلاک CSS گرڈ/فلیکس کے ساتھ اسٹائل شدہ <a>
بٹن لنک ایک اسٹائل شدہ بٹن جو لنک کا کام کرتا ہے <a href="#" class="btn">کلک کریں</a>
لوگو لنک ایک لوگو تصویر جو ہوم پیج سے لنک کرتی ہے <a href="index.html"><img src="logo.svg"></a>

📊 گرافیکل لنکس کے لیے CSS اسٹائلنگ

<!-- گرافیکل لنکس کے لیے CSS اسٹائلنگ --> <style> /* بٹن کی طرح لنک */ .btn-link { display: inline-block; padding: 12px 24px; background: #3498db; color: white; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.3s, transform 0.2s; } .btn-link:hover { background: #2980b9; transform: scale(1.05); } /* اوورلے کے ساتھ تصویری لنک */ .image-link-container { position: relative; display: inline-block; } .image-link-container .overlay { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; padding: 8px; text-align: center; transition: opacity 0.3s; opacity: 0; } .image-link-container:hover .overlay { opacity: 1; } </style>

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
<a> ٹیگ میں href غائب لنک کام نہیں کرے گا ہمیشہ href شامل کریں
تصویری لنکس کے لیے alt ٹیکسٹ بھول جانا ناقص رسائی ہمیشہ وضاحتی alt ٹیکسٹ شامل کریں
بیرونی تصویری لنکس کے لیے target="_blank" کا استعمال نہ کرنا صارف آپ کی سائٹ چھوڑ دیتا ہے بیرونی کے لیے target="_blank" استعمال کریں
تصویر بہت بڑی صفحہ لوڈ سست ویب کے لیے تصاویر کو بہتر بنائیں
بنیادی اسٹائل کے بغیر صرف :hover کے ساتھ اسٹائل کرنا لنکس میں بنیادی اسٹائل کی کمی ہو سکتی ہے ہمیشہ پہلے بنیادی اسٹائل کی وضاحت کریں

📊 مشاہدات

  • گرافیکل ہائپر لنکس ویب سائٹس کو مزید بصری طور پر دلکش اور صارف دوست بناتے ہیں۔
  • آپ <a> ٹیگ کے اندر کسی بھی HTML عنصر کو استعمال کر سکتے ہیں — تصاویر، آئیکنز، متن، یا اسٹائل شدہ بلاکس۔
  • CSS ٹرانزیشنز (ہوور اثرات) کا اضافہ لنکس کو مزید انٹرایکٹو بناتا ہے۔
  • تصویری لنکس میں ہمیشہ رسائی کے لیے وضاحتی alt ٹیکسٹ ہونا چاہیے۔
  • اسٹائل شدہ بلاک لنکس نیویگیشن مینوز، فیچر کارڈز، اور ایکشن کے لیے کال بٹنز کے لیے بہترین ہیں۔
  • بیرونی لنکس کے لیے target="_blank" کا استعمال اہم ہے۔

✅ نتیجہ

آپ نے کامیابی سے:

  • تصاویر اور اسٹائل شدہ HTML عناصر دونوں کا استعمال کرتے ہوئے گرافیکل ہائپر لنکس بنائے۔
  • ہوور اثرات کے ساتھ لنکس کو اسٹائل کرنے کے لیے CSS کا استعمال کیا۔
  • آئیکنز اور وضاحتوں کے ساتھ نیویگیشن کارڈز بنائے۔
  • مختلف اقسام کے گرافیکل لنکس کے بارے میں سیکھا۔
  • تمام لنکس کو براؤزر میں دیکھا اور ٹیسٹ کیا۔
📌 اہم: لنکس میں ہمیشہ href صفت شامل کریں۔ تصویری لنکس کے لیے وضاحتی alt ٹیکسٹ استعمال کریں۔ گرافیکل لنکس کو مزید انٹرایکٹو اور صارف دوست بنانے کے لیے CSS کے ساتھ ہوور اثرات شامل کریں۔
💡 اگلے اقدامات: کلک کرنے کے قابل آئیکنز کے ساتھ سوشل میڈیا آئیکن بار بنانے کی کوشش کریں۔ ایک فیچرڈ کنٹنٹ گرڈ بنائیں جہاں ہر کارڈ ایک کلک کرنے کے قابل لنک ہو۔ مزید جدید ہوور اثرات کے لیے CSS اینیمیشنز کا استعمال کریں۔ تیز لوڈنگ کے لیے امیج اسپرائٹس کے بارے میں سیکھیں!
⬅ Back to Practical Notebooks