EZ

EZNotes

💾 Practical 54: Writing HTML in Notepad++, saving with double quotes, and opening in a browser

Learn the correct way to write, save (using double quotes in the filename), and view your HTML file in a web browser.

🎯 Aim

To write an HTML program in Notepad++, save it as an .html file using double quotes in the filename, and then open it in a web browser.

🛠️ What You Need

  • Notepad++ installed on your PC
  • A web browser (Chrome, Firefox, Edge, etc.)
  • Basic knowledge of HTML structure

📖 Introduction

When saving an HTML file, it is important to use the correct file extension (.html) and to enclose the filename in double quotes if it contains spaces or special characters. This ensures the file is saved exactly as you intend and is recognized by the browser.

📝 Step‑by‑Step Instructions

Step 1: Open Notepad++ and Write HTML Code

  1. Launch Notepad++ from the Start menu or desktop shortcut.
  2. Set the language to HTML (Language → H → HTML) for syntax highlighting.
  3. Write or paste the following simplified HTML code into the editor:
<!-- Practical 54: My HTML Page --> <html> <head> <title>My Saved Page</title> </head> <body> <h1>Hello, World!</h1> <p>This file was saved using double quotes in the filename.</p> <p>Now I will open it in a web browser. 🚀</p> </body> </html>

Step 2: Save the File Using Double Quotes

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location on your computer (e.g., Desktop or Documents).
  3. In the File name field, type your filename. Important: Enclose the entire name in double quotes like this:
    "my first webpage.html"
    ⚠️ Notice that the filename includes spaces. The double quotes tell Windows to save the file with that exact name, including the spaces.
  4. In the Save as type dropdown, select All types (*.*).
  5. Click Save.
✅ Success! Your file is now saved as "my first webpage.html" — with spaces and the correct .html extension.

Step 3: Locate the Saved File

  1. Open File Explorer and navigate to the folder where you saved the file.
  2. You should see a file named my first webpage.html (with the browser's icon).
  3. If the file extension is not visible, enable File name extensions in the View tab of File Explorer.
💡 Tip: If the filename appears as my first webpage.html.txt, it means the file was saved as a text file. You need to save it with the correct extension as shown in Step 2.

Step 4: Open the HTML File in a Browser

  1. Double‑click the file my first webpage.html.
  2. It will open in your default web browser.
  3. You should see the rendered HTML page with the heading and paragraphs.
💡 Alternative: Right‑click the file → Open with → Choose your preferred browser (Chrome, Firefox, Edge, etc.).

Step 5: Make Changes and Refresh

  1. Go back to Notepad++ and modify the HTML (e.g., change the heading).
  2. Save the file (Ctrl+S).
  3. In the browser, press F5 or click the Refresh button.
  4. Your changes will appear immediately!

📊 Why Use Double Quotes When Saving?

Scenario Without Double Quotes With Double Quotes
Filename with spaces my first webpage.html → may save as my (truncated) "my first webpage.html" → saves the full name correctly
Filename with special characters May cause errors or unexpected behavior Preserves special characters
Ensuring .html extension May default to .txt if not careful Explicitly saves as .html
⚠️ Common Mistake: Forgetting to add .html at the end of the filename. Always check that your file ends with .html so the browser recognizes it as a web page.

📊 Troubleshooting: File Doesn't Open in Browser

Problem Cause Solution
File opens as plain text Saved with .txt extension Rename the file to .html
Filename shows as my first webpage.html.txt "Save as type" was set to Text Document Re‑save with "All types (*.*)" and add .html
Browser shows "File not found" File was moved or deleted Locate the file or save it again
Double quotes appear in the filename You typed the quotes in the filename field but didn't save correctly Make sure to enclose the name with quotes in the Save As dialog

📊 Observations

  • Using double quotes in the Save As dialog ensures that the filename is saved exactly as typed, including spaces.
  • The .html extension is essential for the browser to render the page correctly.
  • Notepad++ makes it easy to write and edit HTML with syntax highlighting.
  • You can quickly preview changes by saving and refreshing the browser.

✅ Result

You have successfully:

  • Written an HTML program in Notepad++
  • Saved it as an .html file using double quotes around the filename
  • Opened it in a web browser to view the rendered page
📌 Important: Always use the .html extension and double quotes when your filename contains spaces or special characters. This is a good practice that will save you from many common file‑saving issues.
💡 Next Steps: Try creating another HTML file with a different name, e.g., "about me.html" or "contact.html". Practice saving and opening multiple files to build your confidence!

🎯 مقصد

Notepad++ میں HTML پروگرام لکھنا، اسے ڈبل کوٹس کے ساتھ .html فائل کے طور پر محفوظ کرنا، اور پھر اسے ویب براؤزر میں کھولنا۔

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

  • آپ کے پی سی پر Notepad++ انسٹال ہو
  • ایک ویب براؤزر (Chrome، Firefox، Edge وغیرہ)
  • HTML ڈھانچے کی بنیادی معلومات

📖 تعارف

HTML فائل محفوظ کرتے وقت صحیح فائل ایکسٹینشن (.html) استعمال کرنا اور اگر فائل نام میں اسپیس یا خاص حروف ہوں تو اسے ڈبل کوٹس میں لکھنا بہت ضروری ہے۔ اس سے فائل کو آپ کی مرضی کے مطابق محفوظ کیا جا سکتا ہے اور براؤزر اسے صحیح طریقے سے پہچان لیتا ہے۔

📝 مرحلہ وار ہدایات

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

  1. Start مینو یا ڈیسک ٹاپ شارٹ کٹ سے Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML) تاکہ سنٹیکس ہائی لائٹنگ ہو۔
  3. نیچے دیا گیا آسان HTML کوڈ ایڈیٹر میں لکھیں یا پیسٹ کریں:
<!-- Practical 54: My HTML Page --> <html> <head> <title>My Saved Page</title> </head> <body> <h1>Hello, World!</h1> <p>This file was saved using double quotes in the filename.</p> <p>Now I will open it in a web browser. 🚀</p> </body> </html>

دوسرا قدم: ڈبل کوٹس کے ساتھ فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. اپنے کمپیوٹر پر ایک مقام منتخب کریں (مثلاً Desktop یا Documents)۔
  3. File name فیلڈ میں اپنا فائل نام ٹائپ کریں۔ اہم: پورے نام کو ڈبل کوٹس میں اس طرح لکھیں:
    "my first webpage.html"
    ⚠️ نوٹ کریں کہ فائل نام میں اسپیس ہیں۔ ڈبل کوٹس ونڈوز کو بتاتے ہیں کہ فائل کو اس عین نام کے ساتھ محفوظ کیا جائے، بشمول اسپیس۔
  4. Save as type ڈراپ ڈاؤن میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔
✅ کامیابی! آپ کی فائل "my first webpage.html" کے نام سے محفوظ ہو گئی ہے — اسپیس کے ساتھ اور صحیح .html ایکسٹینشن کے ساتھ۔

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

  1. File Explorer کھولیں اور اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. آپ کو my first webpage.html (براؤزر کے آئیکن کے ساتھ) نظر آئے گی۔
  3. اگر فائل ایکسٹینشن نظر نہیں آ رہی تو File Explorer کے View ٹیب میں File name extensions کو فعال کریں۔
💡 مشورہ: اگر فائل کا نام my first webpage.html.txt نظر آئے تو اس کا مطلب ہے کہ فائل ٹیکسٹ فائل کے طور پر محفوظ ہوئی ہے۔ آپ کو اسے صحیح ایکسٹینشن کے ساتھ دوبارہ محفوظ کرنا ہوگا جیسا کہ مرحلہ 2 میں دکھایا گیا ہے۔

چوتھا قدم: HTML فائل کو براؤزر میں کھولیں

  1. فائل my first webpage.html پر ڈبل‑کلک کریں۔
  2. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  3. آپ کو رینڈر شدہ HTML صفحہ نظر آئے گا جس میں سرخی اور پیراگراف ہوں گے۔
💡 متبادل: فائل پر دائیں کلک کریں → Open with → اپنا پسندیدہ براؤزر منتخب کریں (Chrome، Firefox، Edge وغیرہ)۔

پانچواں قدم: تبدیلیاں کریں اور ریفریش کریں

  1. Notepad++ پر واپس جائیں اور HTML میں ترمیم کریں (مثلاً سرخی تبدیل کریں)۔
  2. فائل محفوظ کریں (Ctrl+S)۔
  3. براؤزر میں F5 دبائیں یا Refresh بٹن پر کلک کریں۔
  4. آپ کی تبدیلیاں فوراً نظر آئیں گی!

📊 فائل محفوظ کرتے وقت ڈبل کوٹس کیوں استعمال کریں؟

صورت حال ڈبل کوٹس کے بغیر ڈبل کوٹس کے ساتھ
اسپیس والا فائل نام my first webpage.html → my کے طور پر محفوظ ہو سکتا ہے (کٹ جاتا ہے) "my first webpage.html" → پورا نام صحیح محفوظ ہوتا ہے
خاص حروف والا فائل نام غلطیاں یا غیر متوقع رویہ ہو سکتا ہے خاص حروف کو محفوظ رکھتا ہے
.html ایکسٹینشن کو یقینی بنانا اگر توجہ نہ دی جائے تو .txt ڈیفالٹ ہو سکتا ہے واضح طور پر .html کے طور پر محفوظ کرتا ہے
⚠️ عام غلطی: فائل نام کے آخر میں .html شامل کرنا بھول جانا۔ ہمیشہ چیک کریں کہ آپ کی فائل .html پر ختم ہوتی ہے تاکہ براؤزر اسے ویب صفحہ کے طور پر پہچان سکے۔

📊 مسئلہ حل: فائل براؤزر میں نہیں کھلتی

مسئلہ وجہ حل
فائل سادہ متن کے طور پر کھلتی ہے .txt ایکسٹینشن کے ساتھ محفوظ ہوئی فائل کا نام .html کریں
فائل کا نام my first webpage.html.txt دکھاتا ہے "Save as type" Text Document پر سیٹ تھا "All types (*.*)" کے ساتھ دوبارہ محفوظ کریں اور .html شامل کریں
براؤزر "File not found" دکھاتا ہے فائل منتقل یا ڈیلیٹ ہو گئی فائل کو تلاش کریں یا دوبارہ محفوظ کریں
فائل نام میں ڈبل کوٹس نظر آتے ہیں آپ نے Save As ڈائیلاگ میں نام کو کوٹس میں ٹائپ کیا لیکن صحیح محفوظ نہیں ہوا یقینی بنائیں کہ Save As ڈائیلاگ میں نام کو کوٹس کے ساتھ محفوظ کریں

📊 مشاہدات

  • Save As ڈائیلاگ میں ڈبل کوٹس کا استعمال اس بات کو یقینی بناتا ہے کہ فائل کا نام بالکل ویسے ہی محفوظ ہو جیسا کہ ٹائپ کیا گیا، بشمول اسپیس۔
  • .html ایکسٹینشن براؤزر کے لیے صفحہ کو صحیح طریقے سے رینڈر کرنے کے لیے ضروری ہے۔
  • Notepad++ سنٹیکس ہائی لائٹنگ کے ساتھ HTML لکھنے اور ایڈٹ کرنے کو آسان بناتا ہے۔
  • آپ محفوظ کرکے اور براؤزر کو ریفریش کرکے فوری تبدیلیاں دیکھ سکتے ہیں۔

✅ نتیجہ

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

  • Notepad++ میں HTML پروگرام لکھا
  • اسے ڈبل کوٹس کے ساتھ .html فائل کے طور پر محفوظ کیا
  • اسے ویب براؤزر میں کھول کر رینڈر شدہ صفحہ دیکھا
📌 اہم: ہمیشہ .html ایکسٹینشن استعمال کریں اور جب فائل نام میں اسپیس یا خاص حروف ہوں تو ڈبل کوٹس کا استعمال کریں۔ یہ ایک اچھی عادت ہے جو آپ کو بہت سی عام فائل‑سیونگ مسائل سے بچائے گی۔
💡 اگلے اقدامات: مختلف نام کے ساتھ ایک اور HTML فائل بنانے کی کوشش کریں، مثلاً "about me.html" یا "contact.html"۔ متعدد فائلوں کو محفوظ کرنے اور کھولنے کی مشق کریں تاکہ آپ کا اعتماد بڑھے!
⬅ Back to Practical Notebooks