Beginner HTML - Creating Your First Web Page

Now that you've learned about HTML tags, attributes, inputs, and comments, it's time to combine these elements and create your very first web page.

This exercise will help you understand how to put everything together.

Your Homepage

In this exercise, we will create a basic version of your own personal site. People will come to find out a little about you and we can have a little form for users to contact you (this won't be working but you'll see the structure).

We will build it up using a few pieces that you have already seen:

• h1 for your heading.
• p for an introduction to yourself.
• h2 for a subheading.
• ul/li for a list of your favorite websites.
• img for an image section.
• form/label/input for a contact form.

You can use CodePen for free to paste this HTML, edit it and save it to make your own:

<!-- Main heading of the page -->
<h1>Welcome to My First Web Page</h1>

<!-- Introduction paragraph -->
<p>This is a simple HTML page created as a learning exercise.</p>

<!-- List of favorite websites -->
<h2>My Favorite Websites</h2>
<ul>
  <li><a href="https://www.codu.co">Codú Articles</a></li>
  <li><a href="https://developer.mozilla.org/en-US/">MDN</a></li>
</ul>

<!-- Image section -->
<h2>Here is an image:</h2>
<img src="https://cdn.pixabay.com/photo/2024/05/26/15/27/anime-8788959_1280.jpg" alt="A anime street in a urban area">

<!-- Contact form -->
<h2>Contact Me</h2>
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" placeholder="Enter your name"><br>

  <label for=" email">Email:</label>
  <input type="email" id="email" placeholder="Enter your email"><br>

  <button type="submit">Submit</button>
</form>

Here's my completed version:

Homework

As homework, customize and alter the HTML, add better notes, or see if you can find a URL for a different image.

When you are done, share a link to your CodePen in the comments below or the Codú Discord so I can see it!

In the next article, we will learn about some hidden tags that are found in most websites that help browsers (and not users) use our websites.

We will also create real HTML files and open them in the browser so you can understand formatting files for the web.