How To Create An HTML Project For Beginners (guided tutorial)

1.6K

Ready to build your first HTML project?

If you don’t know where to start, then you are at the right place. We will walk you through creating a complete HTML web page that is purely HTML.

There are lots of HTML project tutorials out there – but many of them include CSS in the mix. Though HTML and CSS go hand in hand, anyone starting out at HTML would appreciate solidifying those skills first.

And that’s where this project comes in. It will include a variety of HTML elements you would have already seen at THT like images, lists, tables, and forms.

HTML elements covered in this project

• Media (image & embedded YouTube video)
• Text emphasis
• Unordered & Ordered Lists
• Table (2-columns)
• Hyperlink
• Form (HTML entity & button)

HTML Project: Terrestrial Aliens

Tip: make this web page about something you like! It certainly doesn’t need to be about blue whales (no matter how cool they are).

1) Start by creating a new HTML file in your code editor.

Need help? We show you how to do it in Download A Code Editor In 4 Easy Steps (Coding For Beginners)

2) Add a title for the tab.

<title>Terrestrial Aliens</title>

3) Create a heading and subheading for your web page by using h1 and h2 respectively.

<h1>Great Blue Whales</h1>
	        
<h2>Mysteries of the Deep</h2>

Tip: add your keyword – what your content is going to be about – in the h1 for website ranking. (Hint: our keyword is “blue whales”).

Currently, the heading and subheading are, by default, left-aligned. Let’s center them using the align attribute. Add align="center" to both headings.

<h1 align="center">Great Blue Whales</h1>	        
<h2 align="center">Mysteries of the Deep</h2>

4) Let’s include two different types of media so our web page isn’t too boring (a hazard when not adding styles to content).

First, we’ll add an image by copying the image address from a google image – we show you exactly how to do this here.

<img src="https://oceana.org/sites/default/files/blue_whale_0.jpg">

Depending on the size of your image, it will probably be huge like ours.

Scale the image by setting a width using the width attribute. Play around until you get the size you want.

 <img src="https://oceana.org/sites/default/files/blue_whale_0.jpg" width="650">

Second, let’s embed a YouTube video by using an iframe. Note that if you add an iframe like shown below, you will get a broken connection.

<iframe src="https://www.youtube.com/results?search_query=great+blue+whale"></iframe>

That’s because you need to use the embed option YouTube provides. Here’s how you do that:

1. Click on the YouTube video you want to embed in your HTML project.
2. Then under “SHARE” select “Embed” and you will get a preview of the iframe on the left side with the embed iframe code to copy & paste on the right.

<iframe width="560" height="315" src="https://www.youtube.com/embed/qGK6a6_tQEI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

5) Include a short intro or description (or go the lorem ipsum way).

We added emphasis to our text by italicizing (<em>) and bolding (<strong>) a section and italicizing the name of the source.

<p>The great blue whale is the leviathan of the seas, a beast so colossal it rivals the size of some large dinosaurs. According to David Attenborough, its <em><strong>'tongue weighs as much as an elephant, its heart is the size of a car, and some of its blood vessels are so wide that you can swim down them'.</strong></em> - <em>A Short History of Nearly Everything</em>, Bill Bryson</p>

To signal the end of the header section, use a horizontal line <hr />

Note: the backslash isn’t necessary; <hr> works just as well. It merely signals the end of a self-closing tag.

So far this is all we have on our HTML project web page:

Let’s add some lists, a table, and a button to our HTML Project

6) Start with a section for your unordered list by giving it a title and creating an unordered HTML list using <ul>.

<h3>About Blue Whales</h3>

<ul>
   <li><strong>From:</strong> Unknown Ocean Depths</li>
   <li><strong>Occupation:</strong>Be Mysterious</li>
   <li><strong>Known For:</strong>Titanic Size</li>
</ul>

<hr /> 

7) Now add an ordered list to the page using <ol>.

<h3>Top Facts</h3>

<ol>
   <li>Largest animal ever recorded to live on earth</li>
   <li>80 to 100 feet long & 441,000 pounds</li>
   <li>Live 80 to 90 years on average</li>
</ol>
        
<hr />

8) Make an HTML table with 2 columns using the <table> tag.

<table>
  <thead>
     <tr>
	<th>Blue Whale Property</th>
	<th>Awesome Fact</th>
     </tr>
  </thead>

  <tbody>
     <tr>
        <td>Common Name:</td>
	<td>Blue Whale</td>
     </tr>
     <tr>
	<td>Scientific Name:</td>            
	<td><em>Balaenoptera musculus</em></td>                
     </tr>                
     <tr>                
	<td>Type:</td>           
	<td>Mammals</td>            
     </tr>            
     <tr>                
	<td>Group Name:</td>                
	<td>Pod</td>              
     </tr>            
  </tbody>           
</table>

9) Finish off by adding a link to an outside website. For our purposes we linked to the article we got the table facts from.

<p>Want to know more? Take a look at <a href="https://www.nationalgeographic.com/animals/mammals/facts/blue-whale">National Geographic</a></p>

Notice we section off only the part of the text we want to be a link, so the <a> tag is nested within the parent <p> tag.

Want to know more about the structure of HTML documents? Click here.

Add a dummy button using an HTML form with an input of a type of button.

Note: You can just use <button>, but we want to practice our basic HTML form skills!

<form>
   <label for="dummy">Or check out Wikipedia &rarr;</label>
   <input type="button" id="dummy" value="Click Here">
</form>

We used the HTML entity for a right arrow to point at the button that says “Click Here”.

---

Congrats! You just completed your first HTML web page.

Take a good look because, even though it doesn’t look fancy, that’s how every single web page looks when stripped from styles. HTML is the bare bones that ironically contain the meat of every web page.

You are now ready to use CSS to add visual flair. Who’s excited? We sure are!