Writing Your First HTML Code

Creating your first HTML webpage is simple and exciting! Follow this step-by-step guide to write and run your first HTML code.

1. Setup

Before writing your HTML code, you need:

  • A text editor (e.g., Notepad, Visual Studio Code, Sublime Text).
  • A web browser (e.g., Chrome, Firefox, Edge).

2. Write Your HTML Code

  1. Open Your Text Editor:
    Open a text editor of your choice. For simplicity, let’s use Notepad (Windows) or TextEdit (Mac).
  2. Write Your Code:
    Type the following code:

    <!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my first webpage.</p>
  <a href="https://example.com" target="_blank">Click here to visit Example</a>
</body>
</html>

    Try It Now

Explanation:

  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html>: The root element of your webpage.
  • <head>: Contains metadata, such as the title of the page.
  • <title>: Sets the title shown in the browser tab.
  • <body>: Contains the content displayed on the webpage.
  • <h1>: A heading.
  • <p>: A paragraph.
  • <a>: A hyperlink to an external website.

3. Save Your File

  1. Save the File:
    • Go to File > Save As.
    • Choose a location (e.g., Desktop).
    • Enter a file name, such as index.html.
      Ensure the extension is .html.
    • Set the file type to All Files (if using Notepad).
  2. Check Your File:
    • The file icon should look like your browser’s icon (e.g., Chrome or Edge) if saved correctly.

4. Open Your Webpage

  1. Locate the File:
    Navigate to where you saved the file (e.g., Desktop).
  2. Open in a Browser:
    • Double-click the file, and it will open in your default web browser.
    • You should see:
      • A heading: “Hello, World!”
      • A paragraph: “Welcome to my first webpage.”
      • A link to “Example.”

5. Edit and Update Your Webpage

  1. Make Changes:
    • Open the index.html file in your text editor.
    • Add more content, like another heading or image: 
      <h2>About Me</h2>
<p>I am learning HTML!</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">

      Try It Now

  2. Save the Changes:
    • Save the file (Ctrl + S or Cmd + S).
  3. Refresh the Browser:
    • Go back to your browser and refresh the page to see the updates.

6. Try These Enhancements

  1. Add a List 
    <ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

    Try It Now

  2. Style the Text: 
    <p style="color:blue;">This is blue text.</p>

    Try It Now

  3. Embed a Video: 
    <iframe width="560" height="315" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" 
        title="YouTube video" frameborder="0" allowfullscreen>
</iframe>

    Try It Now

Tips

  • Practice Regularly: Try writing different tags to understand their use.
  • Experiment: Modify attributes (like style, href) to see changes.
  • Learn Incrementally: After basics, move to forms, multimedia, and responsive design.