askvity

How to Create a Website Using HTML on Notepad?

Published in Web Development 3 mins read

Creating a website using HTML on Notepad is a straightforward process, perfect for learning the fundamentals of web development. Here's how you can do it:

Steps to Create a Website with HTML on Notepad:

  1. Open Notepad:

    • Launch Notepad on your Windows computer. This simple text editor will be your coding environment.

  2. Write Your HTML Structure:

    • Start with the basic HTML structure. This includes the <!DOCTYPE html>, <html>, <head>, and <body> tags.
    <!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>This is my first website created with Notepad.</p>

</body>
</html>
    • <!DOCTYPE html>: Declares the document type and version of HTML.
    • <html>: The root element of an HTML page.
    • <head>: Contains meta-information about the HTML document, such as the title. The title appears in the browser tab.
    • <body>: Contains the visible page content.

  3. Save Your HTML File:

    • Click "File" > "Save As..." in Notepad.
    • In the "Save As" dialog box:
      • Choose a location to save your file.
      • In the "File name" field, enter a name for your file, ending with the .html extension (e.g., index.html).
      • Crucially, change the "Save as type" dropdown to "All Files (*.*)" to prevent Notepad from saving the file as a .txt file.
      • Select UTF-8 encoding (usually found next to the save as type dropdown) to ensure proper character display.
    • Click "Save".

  4. View Your Website:

    • Locate the saved index.html file in your file explorer.
    • Double-click the file to open it in your default web browser (e.g., Chrome, Firefox, Edge). You should see "Hello, World!" displayed.

  5. Make Changes and Refresh:

    • Return to Notepad, make changes to your HTML code (e.g., add more text, change the heading), and save the file again (File > Save).
    • In your web browser, refresh the page (usually by pressing F5 or clicking the refresh button) to see the updated content.

  6. Adding More Content:

  • You can add more HTML elements such as:
    • Paragraphs: <p>This is another paragraph.</p>
    • Headings: <h2>Smaller Heading</h2>
    • Images: <img src="image.jpg" alt="My Image"> (Make sure the image file is in the same directory or specify the correct path).
    • Links: <a href="https://www.example.com">Visit Example</a>
    • Lists: <ul><li>Item 1</li><li>Item 2</li></ul> (unordered list) or <ol><li>Item 1</li><li>Item 2</li></ol> (ordered list)

  1. Learning More:

    • To further enhance your website, learn about CSS (Cascading Style Sheets) for styling and JavaScript for interactivity. Many online resources are available to help you learn these technologies.

Example: Adding an Image

To add an image, ensure the image file (e.g., myimage.jpg) is in the same folder as your index.html file. Then, add the following line to your HTML body:

<img src="myimage.jpg" alt="Description of the image">

Remember to replace "Description of the image" with a relevant description for accessibility.

Key Considerations:

  • File Extension: Always save your HTML file with the .html extension.
  • "Save as type": Change "Save as type" to "All files" when saving.
  • UTF-8 Encoding: Using UTF-8 encoding ensures proper display of characters.
  • Folder Structure: Organizing your files into folders helps manage larger projects. Place images and other assets in their respective folders and update the paths in your HTML accordingly.

By following these steps, you can create a basic website using HTML and Notepad. This is a great way to learn the fundamentals of web development.

Related Articles