EZ

EZNotes

🔗 Practical 77: Creating hyperlinks to three different websites

Learn how to create hyperlinks to three different websites using the <a> tag with proper attributes and styling.

🎯 Aim

To create an HTML webpage that demonstrates how to create hyperlinks to three different websites using the <a> (anchor) tag with proper attributes and styling.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • Internet connection to visit the websites

📖 Introduction

In this practical, you will create links to three different websites. The websites can be:

  • Search Engines: Google, Bing, Yahoo
  • Social Media: Facebook, Twitter, Instagram
  • Educational: Wikipedia, Khan Academy, Coursera
  • Any three websites you choose
💡 Tip: Always use target="_blank" for external links so they open in a new tab, keeping your page open for the user. Use descriptive link text so users know what to expect.

📊 Preview of the Output

🔗 Links to Three Websites

🌐 Popular Websites
🔍 Google Search the world's information google.com 📚 Wikipedia Free online encyclopedia wikipedia.org 🎬 YouTube Watch and share videos youtube.com
📋 Simple List of Links
Google Search Engine - google.com
Wikipedia Encyclopedia - wikipedia.org
YouTube Video Platform - youtube.com

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following simplified HTML code:
<!-- Practical 77: Hyperlinks to Three Different Websites --> <html> <head> <title>Links to Three Websites</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.8; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } /* Style for link cards */ .link-card { display: inline-block; padding: 15px 25px; margin: 10px; background: #3498db; color: white; border-radius: 8px; text-decoration: none; font-weight: bold; transition: background 0.3s, transform 0.2s; } .link-card:hover { background: #2980b9; transform: scale(1.05); } /* Style for link list */ .link-list { list-style-type: none; padding: 0; } .link-list li { padding: 10px; margin: 5px 0; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #3498db; } .link-list li a { text-decoration: none; font-weight: 600; color: #2c3e50; } .link-list li a:hover { color: #3498db; text-decoration: underline; } .link-list li .desc { color: #888; font-size: 0.85em; } </style> </head> <body> <h1>🔗 Links to Three Websites</h1> <!-- Method 1: Button-style links --> <h2>🎨 Method 1: Button-Style Links</h2> <p> <a href="https://www.google.com" target="_blank" class="link-card">🔍 Google</a> <a href="https://www.wikipedia.org" target="_blank" class="link-card">📚 Wikipedia</a> <a href="https://www.youtube.com" target="_blank" class="link-card">🎬 YouTube</a> </p> <!-- Method 2: List-style links --> <h2>📋 Method 2: List-Style Links</h2> <ul class="link-list"> <li> <a href="https://www.google.com" target="_blank">Google</a> <span class="desc">- Search Engine (google.com)</span> </li> <li> <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a> <span class="desc">- Free Encyclopedia (wikipedia.org)</span> </li> <li> <a href="https://www.youtube.com" target="_blank">YouTube</a> <span class="desc">- Video Platform (youtube.com)</span> </li> </ul> <!-- Method 3: Graphical cards --> <h2>🖼️ Method 3: Graphical Cards</h2> <div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;"> <!-- Google Card --> <a href="https://www.google.com" target="_blank" style="text-decoration: none; color: #2c3e50; background: #f8f9fa; padding: 20px; border-radius: 10px; border: 2px solid #e9ecef; text-align: center; width: 200px; transition: transform 0.3s, box-shadow 0.3s;"> <div style="font-size: 3em;">🔍</div> <div style="font-weight: 700; font-size: 1.2em;">Google</div> <div style="font-size: 0.8em; color: #888;">Search the web</div> </a> <!-- Wikipedia Card --> <a href="https://www.wikipedia.org" target="_blank" style="text-decoration: none; color: #2c3e50; background: #f8f9fa; padding: 20px; border-radius: 10px; border: 2px solid #e9ecef; text-align: center; width: 200px; transition: transform 0.3s, box-shadow 0.3s;"> <div style="font-size: 3em;">📚</div> <div style="font-weight: 700; font-size: 1.2em;">Wikipedia</div> <div style="font-size: 0.8em; color: #888;">Free Encyclopedia</div> </a> <!-- YouTube Card --> <a href="https://www.youtube.com" target="_blank" style="text-decoration: none; color: #2c3e50; background: #f8f9fa; padding: 20px; border-radius: 10px; border: 2px solid #e9ecef; text-align: center; width: 200px; transition: transform 0.3s, box-shadow 0.3s;"> <div style="font-size: 3em;">🎬</div> <div style="font-weight: 700; font-size: 1.2em;">YouTube</div> <div style="font-size: 0.8em; color: #888;">Watch videos</div> </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: "three_links.html" or "practical77.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 three_links.html file.
  3. It will open in your default web browser.
  4. Click on any link to visit the website.

📊 Types of Link Presentations

Method Description Best For
Button-Style Links styled as clickable buttons Call-to-action, navigation
List-Style Links organized in a list format Resource lists, directories
Graphical Cards Links with icons and descriptions Feature grids, homepages
Simple Text Plain text links with href Inline links, paragraphs

📊 Important Attributes for Links

Attribute Purpose Example
href Destination URL (required) href="https://google.com"
target Where to open the link target="_blank"
title Tooltip text on hover title="Visit Google"
rel Relationship to the linked page rel="noopener"

📊 Example: Three Different Websites

<!-- Three websites as examples --> <!-- You can replace these with any websites --> <!-- Option 1: Search Engines --> <a href="https://www.google.com" target="_blank">Google</a> <a href="https://www.bing.com" target="_blank">Bing</a> <a href="https://www.yahoo.com" target="_blank">Yahoo</a> <!-- Option 2: Social Media --> <a href="https://www.facebook.com" target="_blank">Facebook</a> <a href="https://www.twitter.com" target="_blank">Twitter</a> <a href="https://www.instagram.com" target="_blank">Instagram</a> <!-- Option 3: Educational --> <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a> <a href="https://www.khanacademy.org" target="_blank">Khan Academy</a> <a href="https://www.coursera.org" target="_blank">Coursera</a>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Missing href attribute Link won't work Always include href
Forgetting http:// or https:// Link may try to open as a local file Use full URL: https://google.com
Not using target="_blank" User leaves your site Use target="_blank"
Using "click here" as link text Poor accessibility and SEO Use descriptive link text
Not adding security rel attribute Security risk Use rel="noopener" with _blank

📊 Observations

  • <a> is the anchor tag used for creating hyperlinks.
  • The href attribute is required for the link to work.
  • Use target="_blank" for external links to open in a new tab.
  • You can style links using CSS to look like buttons, cards, or any design.
  • Using descriptive link text improves accessibility and SEO.
  • You can link to any website by providing its full URL.
  • For security, use rel="noopener" with target="_blank".

✅ Result

You have successfully:

  • Created an HTML webpage with hyperlinks to three different websites.
  • Used the href, target, and title attributes.
  • Presented links in multiple styles: buttons, lists, and graphical cards.
  • Viewed and tested all links in a browser.
📌 Important: Always include the href attribute for links. Use target="_blank" for external links to keep users on your site. Use descriptive link text (not "click here") for better accessibility and SEO. Add rel="noopener" for security when using _blank.
💡 Next Steps: Try linking to three websites of your choice — maybe your favorite learning platforms, news sites, or social media. Experiment with different CSS styles for your links. Create a resources page with links to helpful websites!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو تین مختلف ویب سائٹس کے لیے ہائپر لنکس بنانے کا طریقہ <a> (اینکر) ٹیگ کے ساتھ مناسب صفات اور اسٹائلنگ کے ساتھ ظاہر کرتا ہے۔

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

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • ویب سائٹس ملاحظہ کرنے کے لیے انٹرنیٹ کنکشن

📖 تعارف

اس عملی میں، آپ تین مختلف ویب سائٹس کے لنکس بنائیں گے۔ ویب سائٹس ہو سکتی ہیں:

  • سرچ انجن: گوگل، بنگ، یاہو
  • سوشل میڈیا: فیس بک، ٹویٹر، انسٹاگرام
  • تعلیمی: وکی پیڈیا، خان اکیڈمی، کورسیرا
  • آپ کی پسند کی کوئی تین ویب سائٹس
💡 مشورہ: بیرونی لنکس کے لیے ہمیشہ target="_blank" استعمال کریں تاکہ وہ نئی ٹیب میں کھلیں، جس سے آپ کا صفحہ صارف کے لیے کھلا رہے۔ وضاحتی لنک ٹیکسٹ استعمال کریں تاکہ صارفین کو معلوم ہو کہ کیا توقع کرنی ہے۔

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

🔗 تین ویب سائٹس کے لنکس

🌐 مشہور ویب سائٹس
🔍 گوگل دنیا کی معلومات تلاش کریں google.com 📚 وکی پیڈیا مفت آن لائن انسائیکلوپیڈیا wikipedia.org 🎬 یوٹیوب ویڈیوز دیکھیں اور شیئر کریں youtube.com
📋 لنکس کی سادہ فہرست
گوگل سرچ انجن - google.com
وکی پیڈیا انسائیکلوپیڈیا - wikipedia.org
یوٹیوب ویڈیو پلیٹ فارم - youtube.com

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

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 77: Hyperlinks to Three Different Websites --> <html> <head> <title>Links to Three Websites</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.8; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } /* لنک کارڈ کے لیے اسٹائل */ .link-card { display: inline-block; padding: 15px 25px; margin: 10px; background: #3498db; color: white; border-radius: 8px; text-decoration: none; font-weight: bold; transition: background 0.3s, transform 0.2s; } .link-card:hover { background: #2980b9; transform: scale(1.05); } /* لنک فہرست کے لیے اسٹائل */ .link-list { list-style-type: none; padding: 0; } .link-list li { padding: 10px; margin: 5px 0; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #3498db; } .link-list li a { text-decoration: none; font-weight: 600; color: #2c3e50; } .link-list li a:hover { color: #3498db; text-decoration: underline; } .link-list li .desc { color: #888; font-size: 0.85em; } </style> </head> <body> <h1>🔗 تین ویب سائٹس کے لنکس</h1> <!-- طریقہ 1: بٹن طرز کے لنکس --> <h2>🎨 طریقہ 1: بٹن طرز کے لنکس</h2> <p> <a href="https://www.google.com" target="_blank" class="link-card">🔍 گوگل</a> <a href="https://www.wikipedia.org" target="_blank" class="link-card">📚 وکی پیڈیا</a> <a href="https://www.youtube.com" target="_blank" class="link-card">🎬 یوٹیوب</a> </p> <!-- طریقہ 2: فہرست طرز کے لنکس --> <h2>📋 طریقہ 2: فہرست طرز کے لنکس</h2> <ul class="link-list"> <li> <a href="https://www.google.com" target="_blank">گوگل</a> <span class="desc">- سرچ انجن (google.com)</span> </li> <li> <a href="https://www.wikipedia.org" target="_blank">وکی پیڈیا</a> <span class="desc">- مفت انسائیکلوپیڈیا (wikipedia.org)</span> </li> <li> <a href="https://www.youtube.com" target="_blank">یوٹیوب</a> <span class="desc">- ویڈیو پلیٹ فارم (youtube.com)</span> </li> </ul> <!-- طریقہ 3: گرافیکل کارڈز --> <h2>🖼️ طریقہ 3: گرافیکل کارڈز</h2> <div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;"> <!-- گوگل کارڈ --> <a href="https://www.google.com" target="_blank" style="text-decoration: none; color: #2c3e50; background: #f8f9fa; padding: 20px; border-radius: 10px; border: 2px solid #e9ecef; text-align: center; width: 200px; transition: transform 0.3s, box-shadow 0.3s;"> <div style="font-size: 3em;">🔍</div> <div style="font-weight: 700; font-size: 1.2em;">گوگل</div> <div style="font-size: 0.8em; color: #888;">ویب تلاش کریں</div> </a> <!-- وکی پیڈیا کارڈ --> <a href="https://www.wikipedia.org" target="_blank" style="text-decoration: none; color: #2c3e50; background: #f8f9fa; padding: 20px; border-radius: 10px; border: 2px solid #e9ecef; text-align: center; width: 200px; transition: transform 0.3s, box-shadow 0.3s;"> <div style="font-size: 3em;">📚</div> <div style="font-weight: 700; font-size: 1.2em;">وکی پیڈیا</div> <div style="font-size: 0.8em; color: #888;">مفت انسائیکلوپیڈیا</div> </a> <!-- یوٹیوب کارڈ --> <a href="https://www.youtube.com" target="_blank" style="text-decoration: none; color: #2c3e50; background: #f8f9fa; padding: 20px; border-radius: 10px; border: 2px solid #e9ecef; text-align: center; width: 200px; transition: transform 0.3s, box-shadow 0.3s;"> <div style="font-size: 3em;">🎬</div> <div style="font-weight: 700; font-size: 1.2em;">یوٹیوب</div> <div style="font-size: 0.8em; color: #888;">ویڈیوز دیکھیں</div> </a> </div> </body> </html>

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

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

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

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

📊 لنک پیش کرنے کی اقسام

طریقہ وضاحت کے لیے بہترین
بٹن طرز کلک کرنے کے قابل بٹنوں کے طور پر اسٹائل شدہ لنکس ایکشن کے لیے کال، نیویگیشن
فہرست طرز فہرست کی شکل میں منظم لنکس وسائل کی فہرستیں، ڈائریکٹریز
گرافیکل کارڈز آئیکنز اور وضاحتوں کے ساتھ لنکس فیچر گرڈز، ہوم پیجز
سادہ متن href کے ساتھ سادہ ٹیکسٹ لنکس ان لائن لنکس، پیراگراف

📊 لنکس کے لیے اہم صفات

صفت مقصد مثال
href منزل کا URL (ضروری) href="https://google.com"
target لنک کہاں کھلنا ہے target="_blank"
title ہوور پر ٹولٹپ متن title="گوگل ملاحظہ کریں"
rel لنک شدہ صفحے سے تعلق rel="noopener"

📊 مثال: تین مختلف ویب سائٹس

<!-- مثال کے طور پر تین ویب سائٹس --> <!-- آپ انہیں کسی بھی ویب سائٹ سے تبدیل کر سکتے ہیں --> <!-- آپشن 1: سرچ انجن --> <a href="https://www.google.com" target="_blank">گوگل</a> <a href="https://www.bing.com" target="_blank">بنگ</a> <a href="https://www.yahoo.com" target="_blank">یاہو</a> <!-- آپشن 2: سوشل میڈیا --> <a href="https://www.facebook.com" target="_blank">فیس بک</a> <a href="https://www.twitter.com" target="_blank">ٹویٹر</a> <a href="https://www.instagram.com" target="_blank">انسٹاگرام</a> <!-- آپشن 3: تعلیمی --> <a href="https://www.wikipedia.org" target="_blank">وکی پیڈیا</a> <a href="https://www.khanacademy.org" target="_blank">خان اکیڈمی</a> <a href="https://www.coursera.org" target="_blank">کورسیرا</a>

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
href صفت غائب لنک کام نہیں کرے گا ہمیشہ href شامل کریں
http:// یا https:// بھول جانا لنک مقامی فائل کے طور پر کھلنے کی کوشش کر سکتا ہے مکمل URL استعمال کریں: https://google.com
target="_blank" کا استعمال نہ کرنا صارف آپ کی سائٹ چھوڑ دیتا ہے target="_blank" استعمال کریں
"click here" کو لنک ٹیکسٹ کے طور پر استعمال کرنا خراب رسائی اور SEO وضاحتی لنک ٹیکسٹ استعمال کریں
سیکیورٹی rel صفت شامل نہ کرنا سیکیورٹی خطرہ _blank کے ساتھ rel="noopener" استعمال کریں

📊 مشاہدات

  • <a> ہائپر لنکس بنانے کے لیے استعمال ہونے والا اینکر ٹیگ ہے۔
  • href صفت لنک کے کام کرنے کے لیے ضروری ہے۔
  • بیرونی لنکس کے لیے target="_blank" استعمال کریں تاکہ نئی ٹیب میں کھلے۔
  • آپ CSS کا استعمال کرتے ہوئے لنکس کو بٹن، کارڈز، یا کسی بھی ڈیزائن کی طرح اسٹائل کر سکتے ہیں۔
  • وضاحتی لنک ٹیکسٹ کا استعمال رسائی اور SEO کو بہتر بناتا ہے۔
  • آپ اس کا مکمل URL فراہم کرکے کسی بھی ویب سائٹ سے لنک کر سکتے ہیں۔
  • سیکیورٹی کے لیے، target="_blank" کے ساتھ rel="noopener" استعمال کریں۔

✅ نتیجہ

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

  • تین مختلف ویب سائٹس کے ہائپر لنکس کے ساتھ ایک HTML ویب صفحہ بنایا۔
  • href، target، اور title صفات کا استعمال کیا۔
  • لنکس کو متعدد اسٹائلز میں پیش کیا: بٹن، فہرست، اور گرافیکل کارڈز۔
  • تمام لنکس کو براؤزر میں دیکھا اور ٹیسٹ کیا۔
📌 اہم: لنکس کے لیے ہمیشہ href صفت شامل کریں۔ صارفین کو آپ کی سائٹ پر رکھنے کے لیے بیرونی لنکس کے لیے target="_blank" استعمال کریں۔ بہتر رسائی اور SEO کے لیے وضاحتی لنک ٹیکسٹ استعمال کریں ("یہاں کلک کریں" کے بجائے)۔ سیکورٹی کے لیے _blank استعمال کرتے وقت rel="noopener" شامل کریں۔
💡 اگلے اقدامات: اپنی پسند کی تین ویب سائٹس سے لنک کرنے کی کوشش کریں — شاید آپ کے پسندیدہ لرننگ پلیٹ فارمز، نیوز سائٹس، یا سوشل میڈیا۔ اپنے لنکس کے لیے مختلف CSS اسٹائلز کے ساتھ تجربہ کریں۔ مددگار ویب سائٹس کے لنکس کے ساتھ ایک وسائل کا صفحہ بنائیں!
⬅ Back to Practical Notebooks