EZ

EZNotes

📋 Practical 57: HTML tags to display name, school name and address

Learn how to use various HTML tags to present personal information — name, school, and address — in a well‑structured webpage.

🎯 Aim

To write an HTML program that displays a person's name, school name, and address using appropriate HTML tags.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result

📖 Introduction

In this practical, you will learn how to display personal information using various HTML tags. The name is typically displayed as a heading, the school name as a subheading or paragraph, and the address using line breaks or paragraph tags.

💡 Tip: Use <h1> or <h2> for the name, <p> for school name, and <br> or <p> tags for address lines to make the information clear and well‑structured.

📊 Preview of the Output

Muhammad Ali

Government High School, Lahore

🏠 Address:

House # 42, Street # 5

Gulberg III, Lahore

Punjab, Pakistan - 54000

📝 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 57: Display name, school name, and address --> <html> <head> <title>Name, School & Address</title> </head> <body> <h1>Muhammad Ali</h1> <h2>Government High School, Lahore</h2> <hr> <p>Address:</p> <p>House # 42, Street # 5</p> <p>Gulberg III, Lahore</p> <p>Punjab, Pakistan - 54000</p> </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: "profile.html" or "practical57.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 profile.html file.
  3. It will open in your default web browser.
  4. You will see the name, school name, and address displayed with proper formatting.

Step 4: Customize with Your Own Information

  1. Replace "Muhammad Ali" with your own name.
  2. Replace "Government High School, Lahore" with your school name.
  3. Replace the address lines with your own address.
  4. Save and refresh the browser to see your personalized page!

📊 HTML Tags Used in This Practical

Tag Purpose Example
<h1> Main heading (for name) <h1>Muhammad Ali</h1>
<h2> Subheading (for school name) <h2>Government High School</h2>
<p> Paragraph (for address lines) <p>House # 42</p>
<hr> Horizontal rule (separator) <hr>
<strong> Bold text (label) <strong>Address:</strong>
<br> Line break (alternative for address) House # 42<br>Street # 5

📊 Alternative Ways to Display Address

<!-- Using <br> tags instead of <p> for address --> <p>Address:<br> House # 42, Street # 5<br> Gulberg III, Lahore<br> Punjab, Pakistan - 54000</p>
<!-- Using <address> tag (semantic HTML) --> <address> Muhammad Ali<br> Government High School, Lahore<br> House # 42, Street # 5<br> Gulberg III, Lahore<br> Punjab, Pakistan - 54000 </address>
💡 Tip: The <address> tag is a semantic HTML element specifically designed for contact information. It's a great choice for displaying addresses!

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using <h1> for everything Breaks heading hierarchy Use <h1> for name, <h2> for school
Putting entire address in one paragraph Hard to read and style Use separate <p> tags or <br>
Forgetting to close tags Invalid HTML Always close tags: <p>...</p>
Using <br> for everything Creates messy code Use block-level elements for structure

📊 Observations

  • The <h1> tag is used for the name as it's the most important information.
  • The <h2> tag is used for the school name as a subheading.
  • The <p> tag is used for address lines to create clear separation.
  • The <hr> tag creates a visual separator between the heading section and the address.
  • Semantic tags like <address> can be used for better accessibility and SEO.

✅ Result

You have successfully:

  • Created an HTML page that displays a person's name, school name, and address.
  • Used appropriate heading, paragraph, and formatting tags.
  • Viewed and customized the page with your own information.
📌 Important: Using the right HTML tags for different types of content makes your page more readable, accessible, and SEO‑friendly. Always choose the most appropriate tag for each piece of information!
💡 Next Steps: Try adding more information to your page — like email, phone number, or a profile picture using the <img> tag. Experiment with different heading levels and formatting tags!

🎯 مقصد

ایک HTML پروگرام لکھنا جو کسی شخص کا نام، اسکول کا نام، اور پتہ مناسب HTML ٹیگز کا استعمال کرتے ہوئے ظاہر کرے۔

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

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

📖 تعارف

اس عملی میں، آپ مختلف HTML ٹیگز کا استعمال کرتے ہوئے ذاتی معلومات ظاہر کرنا سیکھیں گے۔ نام عام طور پر ہیڈنگ کے طور پر ظاہر کیا جاتا ہے، اسکول کا نام ذیلی ہیڈنگ یا پیراگراف کے طور پر، اور پتہ لائن بریک یا پیراگراف ٹیگز کا استعمال کرتے ہوئے۔

💡 مشورہ: نام کے لیے <h1> یا <h2>، اسکول کے نام کے لیے <p>، اور پتے کی لائنوں کے لیے <br> یا <p> ٹیگز استعمال کریں تاکہ معلومات واضح اور اچھی طرح سے ساختہ ہوں۔

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

محمد علی

گورنمنٹ ہائی اسکول، لاہور

🏠 پتہ:

گھر نمبر 42، گلی نمبر 5

گلبرگ III، لاہور

پنجاب، پاکستان - 54000

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 57: Display name, school name, and address --> <html> <head> <title>Name, School & Address</title> </head> <body> <h1>محمد علی</h1> <h2>گورنمنٹ ہائی اسکول، لاہور</h2> <hr> <p>پتہ:</p> <p>گھر نمبر 42، گلی نمبر 5</p> <p>گلبرگ III، لاہور</p> <p>پنجاب، پاکستان - 54000</p> </body> </html>

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

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

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

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

چوتھا قدم: اپنی معلومات کے ساتھ تخصیص کریں

  1. "محمد علی" کو اپنے نام سے تبدیل کریں۔
  2. "گورنمنٹ ہائی اسکول، لاہور" کو اپنے اسکول کے نام سے تبدیل کریں۔
  3. پتے کی لائنوں کو اپنے پتے سے تبدیل کریں۔
  4. محفوظ کریں اور براؤزر کو ریفریش کریں تاکہ آپ کا ذاتی صفحہ دیکھ سکیں!

📊 اس عملی میں استعمال ہونے والے HTML ٹیگز

ٹیگ مقصد مثال
<h1> مرکزی ہیڈنگ (نام کے لیے) <h1>محمد علی</h1>
<h2> ذیلی ہیڈنگ (اسکول کے نام کے لیے) <h2>گورنمنٹ ہائی اسکول</h2>
<p> پیراگراف (پتے کی لائنوں کے لیے) <p>گھر نمبر 42</p>
<hr> افقی لکیر (جداکن) <hr>
<strong> بولڈ ٹیکسٹ (لیبل) <strong>پتہ:</strong>
<br> لائن بریک (پتے کے لیے متبادل) گھر نمبر 42<br>گلی نمبر 5

📊 پتہ ظاہر کرنے کے متبادل طریقے

<!-- پتے کے لیے <p> کی بجائے <br> ٹیگز کا استعمال --> <p>پتہ:<br> گھر نمبر 42، گلی نمبر 5<br> گلبرگ III، لاہور<br> پنجاب، پاکستان - 54000</p>
<!-- <address> ٹیگ کا استعمال (سیمینٹک HTML) --> <address> محمد علی<br> گورنمنٹ ہائی اسکول، لاہور<br> گھر نمبر 42، گلی نمبر 5<br> گلبرگ III، لاہور<br> پنجاب، پاکستان - 54000 </address>
💡 مشورہ: <address> ٹیگ ایک سیمینٹک HTML عنصر ہے جو خاص طور پر رابطے کی معلومات کے لیے ڈیزائن کیا گیا ہے۔ یہ پتے ظاہر کرنے کے لیے ایک بہترین انتخاب ہے!

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
ہر چیز کے لیے <h1> کا استعمال ہیڈنگ کی درجہ بندی کو توڑتا ہے نام کے لیے <h1>، اسکول کے لیے <h2>
پورا پتہ ایک پیراگراف میں ڈالنا پڑھنے اور اسٹائل کرنے میں مشکل الگ <p> ٹیگز یا <br> استعمال کریں
ٹیگز بند کرنا بھول جانا غلط HTML ہمیشہ ٹیگز بند کریں: <p>...</p>
ہر چیز کے لیے <br> کا استعمال گندا کوڈ بناتا ہے ساخت کے لیے block‑level عناصر استعمال کریں

📊 مشاہدات

  • <h1> ٹیگ نام کے لیے استعمال کیا جاتا ہے کیونکہ یہ سب سے اہم معلومات ہے۔
  • <h2> ٹیگ اسکول کے نام کے لیے ذیلی ہیڈنگ کے طور پر استعمال کیا جاتا ہے۔
  • <p> ٹیگ پتے کی لائنوں کے لیے استعمال کیا جاتا ہے تاکہ واضح علیحدگی ہو۔
  • <hr> ٹیگ ہیڈنگ سیکشن اور پتے کے درمیان ایک بصری جداکن بناتا ہے۔
  • <address> جیسے سیمینٹک ٹیگز بہتر رسائی اور SEO کے لیے استعمال کیے جا سکتے ہیں۔

✅ نتیجہ

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

  • ایک HTML صفحہ بنایا جو کسی شخص کا نام، اسکول کا نام، اور پتہ ظاہر کرتا ہے۔
  • مناسب ہیڈنگ، پیراگراف، اور فارمیٹنگ ٹیگز کا استعمال کیا۔
  • صفحہ کو اپنی معلومات کے ساتھ دیکھا اور تخصیص کیا۔
📌 اہم: مختلف قسم کے مواد کے لیے صحیح HTML ٹیگز کا استعمال آپ کے صفحے کو مزید پڑھنے کے قابل، قابل رسائی، اور SEO‑دوستانہ بناتا ہے۔ ہمیشہ معلومات کے ہر ٹکڑے کے لیے سب سے مناسب ٹیگ کا انتخاب کریں!
💡 اگلے اقدامات: اپنے صفحے میں مزید معلومات شامل کرنے کی کوشش کریں — جیسے ای میل، فون نمبر، یا <img> ٹیگ کا استعمال کرتے ہوئے پروفائل تصویر۔ مختلف ہیڈنگ لیولز اور فارمیٹنگ ٹیگز کے ساتھ تجربہ کریں!
⬅ Back to Practical Notebooks