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:
- have created your own web page
- know some of the most commonly used HTML tags
- be able to write a well-structured HTML page
- be able to link multiple pages together
WHAT IS HTML?
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.
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.
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:
- Open a text editor on your computer (Notepad on Windows or TextMate on Mac – not Microsoft Word!)
- 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>
- Save the file to your desktop and name the file page1.html
- Double click the file from your desktop
- 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.
You have just taken your first step to learning the fundamentals of building web pages!
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:
- You have 2 lines of text “My first webpage” and “I’m learning about HTML”
- Each line is wrapped in what is referred to as an HTML tag
- The first line is bold and has a large font size because the <h1> tag tells the browser to interpret the content inside the tag as a level 1 heading
- The second line has a smaller font size and doesn’t stand out as much because we have told the browser to interpret that line as a paragraph of text by using a <p> tag
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
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:
- A content tag that wraps around some text to give it meaning
- A structural tag that wraps around other content tags to group them together
- A general tag that doesn’t add any content to the web page directly but provides additional information to the browser (you’ll see some of these later)
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.
- 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>
- Add a level 2 heading after the <hr> tag:
<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>
- Add an unordered list (just below the paragraph you created in the last exercise) like so:
<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>
- Add an image below the unordered list:
<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">
- Add a final bit of text wrapped in a tag at the end:
<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.
Your page should now be looking pretty similar to the above with some more text, a bullet point list and also a cat!
So there are a few things I want you to take away from this exercise:
- Can you see how the <Ii> content tags are nested inside the structural <ul> tag? Because the HTML has been written this way, the web browser knows to interpret each <li> as a bullet point rather than a number. Try changing the <ul></ul> tag to an <ol></ol> tag and you’ll see the difference.
- We needed to tell the self-closing <img> tag where to get the image from. This is done by providing the <img> tag with a src attribute which contains a URL of where that cat picture is found (you’ll learn more about attributes in the next section).
- Even though the final line with the <span> tag is on a separate line in the HTML code, they both appear on the same line when the page is opened in the browser. This is because they are both inline elements whereas <h1>, <h2> and <ul> elements are all block elements.
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.