Last updated on

Hey thanks for joining me! Today we’re going to take a look at HTML which is the language which all web pages are made from. 

We’re going to actually build a simple web page in this tutorial but i’m going to warn you now – it won’t look pretty!

There will be several exercises in today’s tutorial so I would encourage you to follow along if you can.  Programming / web development is definitely something that needs to be practiced.

So by the time we’ve finished the tutorial you will:

WHAT IS HTML?

web-page-mockup

So I know you’ve probably heard of HTML before but just to clarify it stands for HyperText Markup Language and it’s not technically a programming language but more of a descriptive language which helps to describe what content can be found within a web page.

And that’s exactly what you do with HTML, you describe what headings, text, images, buttons, forms and many other elements are present on a particular web page. 

For example on this particular page you are reading this on, there is a menu bar at the top, a large image with a big title and then of course these paragraphs of text.

All this has been written in HTML and your web browser, whether it’s Chrome, Firefox, Safari or Edge, will load the HTML and interpret it to display the page.  It’s kinda the same as a pianist taking a piece of sheet music and playing the notes on the piano so you can hear the song or a baker following a recipe to bake you a rather delicious cake. 

websites-like-cake

HTML is like cake.

A QUICK NOTE ON WEB BROWSERS

Taking the example of a baking a cake, you would expect every other baker to make the exact same cake right? Well, you would probably get a pretty similar cake but every baker has their own style and way of interpreting a recipe so no two bakers would bake the exact same cake. 

This is exactly the same with browsers too!

They each have their own way of interpreting HTML and displaying the contents you put in a page. 

There is a lot to learn about web browser compatibility but this is generally more of an issue when you work with CSS and/or JavaScript. 

For now, just be aware that if you use a different browser to Chrome (which is what I’m using for this tutorial) then the pages you create might look a little bit different.

A web browser takes the HTML code you write and produces a web page from it.  The technical term for this is parsing but you don’t really need to worry about that. 

Just write some HTML code in a text file, open it up in your browser and let the browser do it’s magic.  So let’s do just that…

EXERCISE: A QUICK DIP INTO HTML

Right, time to get started writing that web page.  To get started really quickly, follow these steps:

    1. Open a text editor on your computer (Notepad on Windows or TextMate on Mac – not Microsoft Word!)

open_notepad

    1. Type the following lines into your file (you can copy and paste if you like):
<h1>My first webpage</h1>
<p>I’m learning about HTML</p>

first_text

    1. Save the file to your desktop and name the file page1.html

save_page

    1. Double click the file from your desktop

page1_result

  1. Behold the awesomeness of your first web page!

Remember that warning I gave at the start? Well yeah, I told you it wouldn’t look that great.

But…

You have just taken your first step to learning the fundamentals of building web pages!

Great stuff!

We’ll be looking at making your web page look a lot prettier in the Ultimate Beginner’s CSS Tutorial.

(If you didn’t get the result above, just let me know in the comments below and I’ll help you out).

So hopefully you can see what’s happened here:

If you like you can try changing the text within the tags – the words displayed will change but the way the browser interprets and displays them will be the same.

OK, so we’ve made a start on your web page.  What other tags are available?

SOME MORE HTML TAGS

more-tags

As you’ll have probably noticed from using other websites there are usually more elements than just headings and paragraphs on a web page. 

Before we look at some of the most commonly used tags, let’s just talk about the types of tags available.

Tags can either come as a pair of opening and closing tags e.g. <h1>Headings need to be opened and closed</h1>.  With this pair formatting, it’s important to make sure that the closing tag is there – otherwise the browser won’t know when to stop treating your text as a heading.

Some tags don’t need a closing tag e.g. the <hr> tag which puts a horizontal rule on the page.  These sorts of tags are said to be self-closing.

Also, a tag will have a display type of either block or inline.  A block element will start a new line on your web page and take up all the available space to the right of it.  An inline element won’t start a new line and will only take up as much space as the content inside it.

Finally, I guess you could say that a tag could fall in to one of 3 categories:

OK, so now you know about what types of tags you might come across, here is a list of some commonly used tags and you can see the result here on the page:

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<span>A specific bit of text</span>

<br> Line break

<a>Link to another page</a>

<strong>Make text bold</strong>

<em>Emphasise text (make italic)</em>

<img> Add an image to the site

<div>A document division</div>

<ul> An un-ordered list (i.e. bullet points)</ul>

<ol> An ordered list (i.e. 1,2,3,4…)</ol>

<li>A list item within an ordered or un-ordered list</li>

<video> Some video content

<audio> Some audio content

So now you know about some more HTML tags, let’s add them to your web page.

EXERCISE: USING DIFFERENT TYPES OF HTML TAGS

To make your web page slightly more exciting follow these steps to add some more content to it.  If you save your file after each step and then refresh the page in your browser you can see what each tag is doing at each step to the page.

    1. Add a horizontal rule <hr> tag below the paragraph you created in the last exercise:
<h1>My first webpage</h1>
<p>I’m learning about HTML</p>
<hr>
<h1>My first webpage</h1>
<p>I’m learning about HTML</p>
<hr>
<h2>This is what I will have learnt at the end of the tutorial:</h2>
<h1>My first webpage</h1>
<p>I’m learning about HTML</p>
<hr>
<h2>This is what I will have learnt at the end of the tutorial:</h2>
<ul>
<li> have created your own web page </li>
<li> have learnt how web pages are structured </li>
<li> know some of the most commonly used HTML tags </li>
<li> be able to write a well structured HTML page </li>
	</ul>

 

 

<h1>My first webpage</h1>
<p>I’m learning about HTML</p>
<hr>
<h2>This is what I will have learnt at the end of the tutorial:</h2>
<ul>
<li> have created your own web page </li>
<li> have learnt how web pages are structured </li>
<li> know some of the most commonly used HTML tags </li>
<li> be able to write a well structured HTML page </li>
</ul>
<img src="http://lorempixel.com/200/200/cat/1">

 

 

<h1>My first webpage</h1>
<p>I’m learning about HTML</p>
<ul>
<li> have created your own web page </li>
<li> have learnt how web pages are structured </li>
<li> know some of the most commonly used HTML tags </li>
<li> be able to write a well structured HTML page </li>
</ul>
<img src="http://lorempixel.com/200/200/cat/1">
<span>I like cats too!</span>

If you haven’t already, save your file and refresh the page in your browser to see your updated page.

end_exercise_2

Your page should now be looking pretty similar to the above with some more text, a bullet point list and also a cat!

Purrrfect!

So there are a few things I want you to take away from this exercise:

In the exercise you told the <img> tag to get the image from a website called http://lorempixel.com which is a website that provides placeholder images when designing your pages. 

You can use your own images on from your computer simply by giving the src attribute the name of the image file.  So if you had a file called cat.jpg you would set the tag as <img src=”cat.jpg>.  The only thing to be careful of is the file needs to be in the same place (e.g. your Desktop) as the page1.html file you created. 

If the cat.jpg isn’t in the same place as page1.html your web browser won’t be able to find your image file.

In the next section I’ll show you how to customise your tags by adding attributes.