Master AI & Build your First Coding Portfolio with SkillReactor | Sign Up Now

Lesson 4 - Writing Your First HTML Page

4.1 Writing Your First HTML Page

In this lesson, we're going to create a simple webpage that incorporates everything we've learned so far.

Let's follow the example below:

<!DOCTYPE html>
  <title>List of Fruits</title>
  <h1>List of Fruits Page</h1>
  <p>This page contains a list of fruits.</p>
  <img src="" alt="Fruits" width="350" height="200">
  <h2>My Favorite Fruits</h2>
  <button>Click Me!</button>

In this example:

  • We start with <!DOCTYPE html>, which specifies the document type and is necessary for browsers to understand the version of HTML being used.
  • Inside <html>, we have <head> and <body> sections. The <head> contains metadata such as the webpage title, set by <title>List of Fruits</title>.
  • Inside <body>, we have structured our content:
    • <h1> and <p> tags provide a heading and a paragraph introducing the page.
    • <img> displays an image of fruits with specified dimensions (width="350" and height="200"), enhancing visual appeal.
    • <h2> and <ul> with <li> items create a list titled "My Favorite Fruits".
    • Finally, a <button> element is included for interactivity.

This basic structure demonstrates how to organise content within HTML tags to create a cohesive webpage. In our next lesson, we'll explore CSS to enhance the design and style of our page.