Category: Creating websites with HTML

In this lesson we’ll understand how more complex modern websites are created.
Now we have created our first website, with two basic pages and a navigation bar that lets us move between them. We understand how to add images, and how to structure our HTML documents. And the importance of keeping our HTML neat and clean.

Use the buttons below to navigate through the lesson

[show_slider name=how-are-complex-html-websites-created]
[the_ad id=”13518″]

However, before we move onto our next topic – which is CSS in much more detail – you may be wondering how more complex websites are created.

You will have noticed that editing HTML directly in Notepad is difficult, and that the internet is more complicated than the basic HTML files we are currently making.

This is because most of the HTML we load into our browsers when we navigate modern websites is automatically generated by the server.

When the internet was first invented webpages were just simple HTML files like the ones you have been creating. However it became difficult to maintain, so server-side languages were invented that generate the HTML automatically.

These are programming languages such as PHP or ASP.NET or Ruby on Rails. When a request comes in to a server running one of these languages the server checks the rules written in PHP (or whatever language the server uses) and generates the HTML that is then sent to your browser.

So is it a waste of time learning HTML if it is automatically generated nowadays?

No, not at all. In order to program well in a server-side language such as PHP or ASP.NET you must understand HTML very well, so practicing by creating your own web pages in a simple tool like Notepad is ideal!

It is a good idea to try and create a complex webpage first in HTML just to understand the problems you have. If you try and make for yourself a whole homepage, with an “About me” and a “Contact” page and some other pages, you’ll soon find that you become frustrated at how much HTML you have to ensure is the same on every page.

Remember our <nav> bar? We had to copy that into every page, so if we change our <nav> we have to change every file on our website.

Similarly with our CSS – we haven’t yet learned how to share CSS between multiple different pages. The difference here is that it’s easy to share CSS using pure HTML, but it’s impossible to share a <nav> bar across pages without using a server-side language.

Once you’ve completed this course and learned all about HTML, CSS and JavaScript you might want to look into learning a server side language such as ASP.NET or PHP.

I hope this helps you to understand how modern webpages are created.

In the next part of our course we will study CSS and practice styling our sample website.

[the_ad id=”13518″]

In this lesson we’ll learn about class and ID attributes, and two tags that are useful for structuring our HTML.  If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.

Use the buttons below to navigate through the lesson

[show_slider name=class-id-and-div-and-span-in-html]
[the_ad id=”13518″]

Classes and IDs

Class and ID are two very important attributes that can go on any HTML element.

Class is used to group together elements that are alike in some way.

ID is used to identify one particular element that we want to interact with.

For example, earlier we added an ID to our <section> element, like so:

<section id=”content”>…blah blah blah…</section>

This is so we can tell this <section> element apart from any other <section> elements we might add later. What this says is “this section element is called ‘content’”.

IDs are referred to using the “#” symbol, so the correct way to describe this element using its id is #content. This means “the element with the ID ‘content’”. This is called a selector.

There can only be one element with a particular ID on each page. In other words IDs specify an element that is unique.

Classes are used to group together alike elements that share a characteristic.

For example, our page might have many <li> elements. (remember <li>? <li> is a list item – an item that appears as part of a list). Imagine a page with lots of different lists on it, all with lots of <li> elements.

What if we wanted to do something with just ONE group of the list elements? Well, we could add a class to those list elements. Something like this:

<ul>
<li class=”special”>Item One</li>
<li class=”special”>Item Two</li>
<li class=”special”>Item Three</li>
</ul>

Now we can specify the list items that have the class “special”. The selector for classes uses the symbol “.” so in this example our selector would be .special

Classes do not have to be unique, they can be shared by any element that you want to be part of the same class.

It will be important to understand classes and IDs when we start learning CSS in detail later.

The <div> and <span> elements

We have already seen the <div> element: it acts as a group, to collect together multiple elements that we want to keep together.

The <span> element is similar, except that it acts inline where <div> acts as a block. Later in the course we will study the block model so we can understand this statement in detail.

For now, we just need to know that <span> can go inline as part of text without any effect. For example:

On our index.html page, we could add a <span> around some of the text, like so:

<p>It is possible to make websites using these extremely simple tools. This is <span class=”important”>great news</span> as it means everyone can learn to make websites.</p>

Replace your <p> tag in index.html with the above HTML and hit refresh.

Everything looks EXACTLY the same. That’s because we haven’t told the browser what a span with class important means!

Inside our <style> element in the <head> add the following line:

span.important { font-weight: bold; color: red; }

With our understanding of selectors we can probably guess what this CSS means – if we have a <span> with class important (i.e. span.important) then make it bold and red. If you save and refresh then you can see the text now shows as red and bold:

What if the <span> was a <div>? Try changing the <span> to <div> like so:

<p>It is possible to make websites using these extremely simple tools. This is <div class=”important”>great news</div> as it means everyone can learn to make websites.</p>

Save and refresh and we get this:

Ok. So the <div> has put “great news” on it’s own line. This is what we mean when we say <div> acts as a block – it is now a separate block between the other two lines, instead of being inline like the <span> tag was. This is the essential difference between <div> and <span> – <div> starts a new line for all of its content. Technically it’s a little more complicated than that, as we’ll see when we study the block model in more detail. But for now that gives us a good understanding to work from.

Wait, why isn’t my important text bold and red anymore?

That’s the other change – now our text isn’t getting the “important” change we made before with our “important” class.

If you remember the line of CSS we added, we said span.important – we specified that it must be a <span> element with a class important. If we remove the word “span” so it just says “.important” let’s see what happens.

Change the line of CSS you added earlier to read:

.important { font-weight: bold; color: red; }

Now our “important” class is working again!

Of course, we don’t want to keep this as a <div> as we want the text to appear in line. So change it back to a span and save, so it looks like this:

Now you can see how to use <div> and <span> to group content in your own websites, and we have begun to learn about classes and IDs.

[the_ad id=”13518″]

In this lesson we’ll add navigation between our two simple HTML web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.
Our link at the top looks a little lost and alone. Most websites have more than one page, so let’s add an element that lets us navigate between multiple pages. In the process we’ll meet some more new tags, and even add our first CSS style.

Use the buttons below to navigate through the lesson

[show_slider name=how-to-add-navigation-to-a-simple-html-page]
[the_ad id=”13518″]

Make the following changes to your index.html:

<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>
<body>
<nav>
<ul>
<li><a href=”Index.html”>Home</a></li>
<li><a href=”About.html”>About</a></li>
</ul>
</nav>
<section id=”content”>
<h1>FOTC Website Tutorial</h1>
<div>
<h2>Making our first page</h2>
<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>
<p>For now we only have a simple page, but later we will make it more complex and interesting.
</div>
<div>
<h2>What have we learned so far?</h2>
<p>So far we have learned a few simple tags for placing text onto a page.</p>
</div>
</section>
</body>
</html>

You’ll note that I’ve removed our old <a> tag from inside the <section>. I’ve added an id attribute to the section – don’t worry about that for now, we’ll need it later.

I’ve also added a new <nav> element which contains some HTML.

Make the same changes to about.html – remove the old link, add the SAME <nav> element and the id attribute to section.

Now both pages should have a list at the top that looks like this:

Let’s look in detail at these changes.

The <nav>, <ul> and <li> elements

The <nav> element is a special grouping element. It doesn’t do anything technically to the site, but it allows computers and search engines to understand how to get around your site. It is short for navigation. Each webpage should have one <nav> element which contains links to the different sections of your website.

Inside our <nav> element we’ve used another new tag, the <ul> tag.

This tag stands for unordered list – it is used whenever we have a LIST of items… such as a list of sections for our website. There are other kinds of list tags, such as an ordered list or a numbered list, but the most appropriate list for navigation links is an unordered list because it doesn’t matter what order the links are written in.

Inside the unordered list we have two <li> tags. These stand for list items – a <ul> must have one <li> for each item in the list. And each list item contains our links.

Now whenever we want to add a new page to our site we just have to add a new <li> to our list which contains the appropriate link. For example, if we wanted a Contact page, we might create Contact.html and add: <li><a href=”Contact.html”>Contact</a></li>

I’m sure you can think of many other pages you might want to add to your own sites.

Styling our navigation list

We are going to look at CSS in more detail later. For now let’s just add some to make our navigation look a little nicer.

Inside our <head> element on both pages, add the following HTML:

<head>
<title>FOTC First Website</title>
<style>
html { font-family: Arial; }
body { padding: 10px 30px; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.2em; }
nav { background: black; padding: 5px; }
nav ul { list-style: none; }
nav ul li { display: inline; margin-left: 15px; font-weight: bold; }
nav ul li a { color: white; }
nav ul li a:visited { color: white; }
nav ul li a:hover { color: orange; }
a { text-decoration: none; color: blue; }
a:visited { color:purple; }
a:hover { color: orange; }
</style>
</head>

Now if you save and refresh you’ll see we have a navigation bar on both of our pages, and the pages all look much prettier.

For now, don’t worry about understanding the code we’ve just added. All of the unfamiliar looking text is CSS, which we will cover in a future lesson. You may notice the names of colours we’ve added – you can change those colours and save and refresh and see what happens!

Experiment by setting the colour names to different colours and seeing how it affects your website. See what combinations you like!

Wait, didn’t you say NOT to put styling in our HTML? What is this <style> element then?

You’re right, I DID say not to do that. If you’ve experimented with changing the colours and swapping between the pages then maybe you’ll realise why! The <style> element lets you put CSS code into your pages, and the CSS code changes the way your page looks.

HOWEVER, we have to put the same CSS code into every page. If you tried changing colours then you probably found that you had to make the same changes on both pages – which is annoying and difficult to remember. Imagine if you had 100 pages on your site… you’d have to change 100 files every time you wanted to change how your site looks.

So, we have in this case used a <style> element in our HTML, but hopefully you can see why it’s a bad idea. Later in the course we will replace our <style> element with a better solution – but for now we haven’t yet learned how to do that so we’ll just keep our <style> element until then.
[the_ad id=”13518″]

In this lesson we’ll learn some HTML tags that allow us to add links and images to our web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.
It’s time to start making our webpage a little more functional!

Use the buttons below to navigate through the lesson

[show_slider name=adding-links-and-images-in-html]
[the_ad id=”13518″]

Do you remember how we created the index.html file originally? Right-click inside your folder and choose New -> Text Document. We’re going to repeat this process to create a second html file. Call this file “about.html” and paste the following HTML code inside:

<!DOCTYPE html>

<html>

<head>

<title>FOTC First Website</title>

</head>

<body>

<section>

<h1>About Me</h1>

<div>

<h2>Mr Smith</h2>

<p>I am currently following a course to learn all about HTML!</p>

</div>

</section>

</body>

</html>

There’s nothing here you don’t already know. We’re just showing different text. You can replace “Mr Smith” with your own name, and say whatever you like about yourself. Make the text in the <p> tag personal!

Let’s add something new – how about a picture of ourselves?

Copy a picture you’d like to display into the folder, and give it the name “me.jpg”. If it’s not a .jpg file then replace .jpg with whatever the current extension for your picture is. I’m using a PNG file so I’ll call it “me.png” like so:

We want to add this image to our About page. To do this we’re going to use a new tag, the <img> tag.

The <img> tag

The <img> tag is a self-closing tag that uses attributes to determine how it displays. If you don’t remember about self-closing tags and attributes then go back and revise our “Introduction to HTML” lesson from earlier in the course.

We want to add this tag:

<img src=”me.png” title=”A picture of me” alt=”A picture of me” />

We can see that the image tag has several attributes. Of these, the most important is the src attribute. This tells the browser what the source of the image is – in this case, our image is “me.png”.

The title/alt attributes tell the browser more about the image. When you hover an image with your mouse the title text is displayed, and the alt text displays instead of an image if the browser can’t find the image, or for people who use screen readers to look at the web, such as the visually impaired.

It’s good practice to always include a title and alt attributes, which should describe the image.

Let’s put the image in at the end of our “About Me” <div>:

<div>

<h2>Mr Smith</h2>

<p>I am currently following a course to learn all about HTML!</p>

<img src=”me.png” title=”A picture of me” alt=”A picture of me” />

</div>

So our HTML should look like this:

And now our About page looks like this in the browser:

Troubleshooting: If your image doesn’t load properly then use the F12 Developer Tools to see the error. The browser will tell you where it is looking for the image – check that it’s looking in the correct place. If not then you can move your image to where it IS looking, or change your img src to point to where the image actually is. If you see funny characters like %E2%80%9D in your error, then it means your quote marks around the “src” attribute aren’t the right kind of quotemark… try deleting them and typing them again. Sometimes when we copy-paste we copy characters that LOOK the same but the computer treats differently! We will look at why this is in a future lesson.

Next – the <a> tag

So we’ve added an image to our ‘About’ page. But what if we wanted to get between the Index and About pages? We need a LINK.

We all use links all the time to navigate the web – we’re so used to clicking text to take us to other pages we often don’t stop to think about how they work.

Links are just simple HTML tags that tell the browser “when someone clicks here, go to this page”. The tag is the <a> tag – one of the most important HTML tags there is.

Here’s an example <a> tag:

<a href=”About.html”>About</a>

As you can see, we have another attribute to learn: the href attribute. This tells the browser where the link is pointing to. The contents of the element is what is displayed that you can click on. Of course, this doesn’t have to be just text: if you put an <img> tag inside an <a> tag then the image acts as the link!

Let’s add one link to each of our pages.

1. Put <a href=”About.html”>About</a> into our index.html
2. Put <a href=”Index.html”>Index</a> into our about.html

You can put them wherever you like. I’ve added mine before the start of the <section> element, so it looks like this:

Now our pages both have links, so we can click from one to another!

Save both your files, and hit F5 to refresh. Try clicking from one page to the next, and back again. It’s starting to feel more like a real webpage!
[the_ad id=”13518″]

In this lesson we’ll learn about some HTML tags that help us structure text in our web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, just like we did a couple of lessons ago.

Use the buttons below to navigate through the lesson

[show_slider name=adding-text-to-our-html-page]
[the_ad id=”13518″]

It’s time to start making our page more interesting. Replace the text in your <body> tag with the following:

<body>

<section>

<h1>FOTC Website Tutorial</h1>

<div>

<h2>Making our first page</h2>

<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>

</div>

</section>

</body>

You will notice that I’ve indented the new tags. This means I’ve pressed the TAB key in notepad to leave a gap at the beginning of each tag. This makes it easy to tell which tags are nested (contained) within other tags. In this diagram I’ve marked the TAB indentations in green.

When our web pages get more complex it’s VERY important to keep the HTML as readable as possible. For example, if I didn’t indent the HTML, look how messy it could get:

<body><section><h1>FOTC Website Tutorial</h1><div><h2>Making our first page</h2><p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p></div></section></body>

This HTML is exactly the same as the previous example. See how much easier it is to read when we use indentation properly?

You should get into the habit of using indentation to make your HTML readable. When you come back to make changes to your website – or if another developer needs to – you will thank yourself for putting in the time to make your website as clean as possible. Clean HTML is much easier to work with.

Now it’s time to save our changes in Notepad and hit refresh (F5) in the browser. You should see this:

Let’s look in more detail at what we have added.

First we can see several new tags: <section>, <div>, <h1>, <h2> and <p>

The <section> and <div> tags

These tags are known as grouping elements, because they group related tags together inside them.

They are very similar tags, but <section> is used to group related items together. If you want to create a section of your page that contains similar information then you should use a <section> tag. For example, a list of blog article titles would be one <section>, while the part of the page that contains the actual blog articles would be another <section>.

Meanwhile, a <div> tag is used to group elements together that aren’t necessarily semantically related. Perhaps they are unrelated information that are kept in the same part of a page, or perhaps it’s a sub group of data that you want to group. The use of this tag will become more clear when we start styling our page using CSS.

The <h1> and <h2> tags

These are known as ‘title’ or ‘heading’ tags. They specify different levels of heading on the page. The lower the number the more important the heading is. For example, <h1> may specify the main heading on your page, while <h2> may be used to specify the subtitles of the different parts of your page.

As you can see, the headings are automatically displayed in bigger bolder text by the browser.

It is possible to have heading tags for up to 6 different levels of heading, from <h1> as the biggest to <h6> as the smallest.

The < p> tag

The <p> tag is short for a “paragraph” tag. As the name suggests, you use this tag when you have a paragraph of text.

Putting all this together

We can now add some more text to our page, now that we understand the new tags we have used. Replace your <body> text with the following. Don’t forget to check your indentation!

<body>

<section>

<h1>FOTC Website Tutorial</h1>

<div>

<h2>Making our first page</h2>

<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>

<p>For now we only have a simple page, but later we will make it more complex and interesting.

</div>

<div>

<h2>What have we learned so far?</h2>

<p>So far we have learned a few simple tags for placing text onto a page.</p>

</div>

</section>

</body>

Now we have some more text to play with. You can see how the headings are displayed as headings and how the paragraphs automatically separate.

Can I make this look better with just HTML?

Technically it is possible to style a page using pure HTML. You can add tags that make the text bold, or italic, or change the font or the colour. However, this is a very bad idea. As a result, I’m not even going to show you the tags that can do this as you should never style your page using just HTML.

Why can I not style a page using HTML?

It’s best not to style a page using HTML for several reasons:

1. Styling a page using HTML is very limited. You can’t make it look very good, however you try.
2. Styling a page using HTML is a lot of work. It takes way more effort to style using the HTML style tags.
3. Styling a page using HTML is very difficult to change. Once you start changing the layout and the look of your page in HTML it is very hard to go back and edit, especially once you add multiple pages to a site.

As a result, we have to be patient. Currently our pages look ugly, but that’s ok – we’re just using them to learn the basic HTML. Later in the course once we’ve mastered the simple HTML we will start using the power of CSS to make our pages look pretty!

[the_ad id=”13518″]

In this lesson we’ll learn about some of the simplest HTML tags and how they function.

So far we have a very simple index.html:

<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>

<body>
This is our first FOTC web page.
</body>

</html>

Let’s look in more detail at this HTML.

Use the buttons below to navigate through the lesson

[show_slider name=understanding-basic-html]
[the_ad id=”13518″]

First, we can see a strange-looking tag that says <!DOCTYPE html>

This is an unusual tag as it has an exclamation symbol at the beginning, and it doesn’t have a matching end tag anywhere. That’s because this is not technically a HTML tag. Instead it tells our web browser what language we’re using to communicate with it. In this case, we are using HTML.

The DOCTYPE declaration must always come first in a HTML page. There are other possible values for DOCTYPE. If you look at webpages using the F12 Developer Tools (see earlier in the course for an example of how to do this) you will see a variety of different DOCTYPEs. For the purposes of our course we are not interested in these other DOCTYPES: <!DOCTYPE html> tells browsers that we want to use the updated version of HTML, which is currently HTML 5.

After the DOCTYPE declaration we can see our first HTML tag: <html>.

If we look at the very end of the document we see the matching closing tag: </html>.

This means that everything else in the document is inside our <html> tag. The <html> tag acts as a container. It tells the browser that everything inside it is to be rendered (displayed) as HTML.

Putting tags inside other tags is often referred to as nesting. We say that the other tags are nested inside the <html> tag.

Inside the <html> tag we put two very important tags: <head> and <body>.

This is the fundamental structure of every HTML page. They all must have a DOCTYPE declaration, then a single <html> tag, which contains <head> and <body> tags.

 

The <head> Tag

The <head> tag can contain a number of other special tags. We will learn about more of those in later lessons.

The important fact to remember about the <head> tag is that it contains data that is not directly displayed as part of the page. Often it tells the browser about extra resources the browser needs to fetch to display the page properly, such as additional CSS or JavaScript files. The <head> tag is also where we put metadata about the page.

Metadata is a fancy way of saying ‘data about the web page’. For example, in our <head> tag we have a <title> tag. The <title> tag contains some metadata: in this case, the title of the page. You can see the title in your browser tab:

So the <title> tag is one of the tags that can go in the <head> tag, and it defines the title of the web page. We will see more of these metadata tags in future lessons.

The <body> Tag

The <body> tag is where we put the body of the website. In other words, all the data that is displayed as part of the web page. As you can imagine, for complex websites this can be a LOT of data. At the moment our web page body is only a simple sentence… but from the next lesson we will start to add much more.

Conclusion

We now have the foundation of every website: a simple index.html with the basic structure of a HTML document. Before you move on, make sure you understand how the <html>, <head> and <body> tags are formed and what kinds of data we put in <head> and <body>.

[the_ad id=”13518″]

In this lesson we will walk through creating an empty HTML document and learn about HTML document structure and some simple HTML tags.

Use the buttons below to navigate through the lesson

[show_slider name=creating-our-first-html-document]
[the_ad id=”13518″]

 

First, create a place to put our simple website on your computer. Right-click your desktop and select New -> Folder, like this:

You may have different programs installed or be on a different version of Windows so your options may be different, but you will have New Folder. If you’re on a different operating system such as OSX or Linux you can still follow this tutorial: just choose a place of your own to store the files we’re going to create.

Name your folder with a name you’ll remember. We’re going to use this folder to keep all our files in for this whole project. I’ve named mine “FOTC Website Tutorial”:

Open your new folder, and right-click inside it. Again go to New, but this time click “Text Document”, like this:

Rename the text document to “index.html”. You need to replace the “.txt” extension with “.html” – when you do this you’ll be prompted if it’s ok to change the extension. We want to make a HTML file so click Yes.

Note: If you cannot change the file extension, you need to enable the option to show file extensions in Windows – by default file extensions are invisible. When working in web development it is useful to have file extensions visible so it is recommended to change this setting. Instructions for changing it (and a handy utility you can download that will change it for you automatically!) are available at this link: https://support.microsoft.com/kb/865219

Right click the HTML file and click ‘Edit’. This will open it in Notepad. If you can’t find Edit, you can open Notepad through the start menu, then use File – Open to open the index.html file you’ve just created.

When you’ve done this you should have an empty document in Notepad like this:

You can use much more advanced software than Notepad to do this, but an important part of this lesson is that you can use very simple tools to make websites, so we’re going to use Notepad. If you have a preferred text editor, such as TextMate, Notepad++ or another, then feel free to use those instead.

Copy the following text into your index.html file and save it:

<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>

<body>
This is our first FOTC web page.
</body>

</html>
Once you’ve hit save you can close Notepad.

Now if you double-click your HTML file it should open in your local browser. If this doesn’t work you can open a browser (such as Chrome, Firefox, Internet Explorer) and drag your file into it to open it.

Here’s how the file appears when I open it in my web browser.

 

You can see that the location of the website starts with file:/// instead of the http:// we’re used to. (If you can’t remember what HTTP:// means then go back and review the lesson on “What is HTTP” earlier in this course). Now that you understand what HTTP is you can understand that we don’t need to use HTTP to access our index.html because the file exists on our own computer: HTTP is used for talking to other computers.

So we can guess that “file:///” means that the browser is accessing a file on our local computer.
The rest of the web address is then the location of the file on our own computer.

Underneath that we can see our web page. It’s not very exciting at the moment, as it just has a single sentence.

Go back to editing your notepad document and change the HTML contents of the <body> tag, like this (you can change it to whatever you like):

Make sure to save your index.html in Notepad. Then go back to your browser window and press F5 to refresh.

As you can see the text is changed on our simple webpage:

You can put whatever text you like in and it will appear on the web page.

This cycle of editing-in-Notepad, saving-in-Notepad, and then pressing F5 in your browser to refresh is the simplest way of making websites. Of course when it comes to making more complex websites we will need to learn more complex tools, but this is an excellent way to understand the fundamentals of HTML.

In the next lesson we will look in more detail at the HTML we have so far in our simple webpage.
[the_ad id=”13518″]

In this lesson we learn how to view HTML using the free Developer Tools in our browser.
Before we begin building our own websites let’s look at the HTML that websites are already sending us.
Doing this helps us to ‘demystify’ HTML and to realise that websites aren’t magic – we can understand them and learn to build them ourselves!

Use the buttons below to navigate through the lesson

[show_slider name=viewing-website-html-in-our-browsers]
[the_ad id=”13518″]
All modern browsers – for example Google Chrome, Mozilla Firefox and Internet Explorer – have built in tools that let us look at the HTML sent to us from a web server.
Let’s try using these tools now.
I’m going to use the Free Online Training Courses lesson “What is HTTP” (https://free-online-training-courses.com/what-is-http/) as my example. But you can use the current lesson.
Each browser is slightly different. In my example I’m using Google Chrome, so what you see might be different.

First I see the webpage I’m looking at:

In order to see the HTML that this page is made up of I PRESS F12. This works in Google Chrome and in modern versions of Firefox and Internet Explorer. If this doesn’t work for you you might want to try upgrading your browser or installing another one.

Pressing F12 brings up the Developer Tools, which looks like this.

I have highlighted the Developer Tools in red. Let’s take a closer look at it.

We can see there are many tabs we can click, each of which shows different information about the webpage we’re looking at (again if you’re in a different browser this may look different for you – be brave, click and explore the Developer Tools until you can find the HTML! ).

For now, we’re only interested in the “Elements” tab – we want to see the HTML elements that make up this page.

Because my “Console” tab is selected at the bottom I have to press ESCAPE to hide it. Now I can see the Elements tab more clearly:

Hopefully you can recognise that we’re looking at some HTML tags like the ones we learned about in the previous lesson.

You can see that the HTML here is more complex than our previous examples, but they are still the same principle: elements made up of tags that have attributes and contents.

Take some time to explore the HTML of a few of your favourite websites. It’s ok if you don’t understand it – for now we just want to get used to what HTML looks like, and to become familiar with using Developer Tools to view HTML that our browser is displaying.
[the_ad id=”13518″]

In this lesson we learn about one of the main types of data websites send to our computers over the internet: HTML.
If you haven’t completed the first part of our Website Design course “What is the internet” make sure you read those first to get a good understanding of how websites are sent to your browser.

Use the buttons below to navigate through the lesson

[show_slider name=introduction-to-html]
[the_ad id=”13518″]

Remember what HTML stands for? It stands for HyperText Markup Language.

Let’s look in more detail what this means.

‘Markup’ in computing means adding extra data to text in order to tell computers more information about that text. For example, in HTML we tell the computer which parts of the HTML document are to be displayed, which parts make up the navigation, even which parts are titles and which are content.

What is a HTML document?

A HTML document is just what it sounds like – a document that contains HTML! It’s nothing more special than that. All we have to do is type our HTML into a document in a writing program – for example Notepad, or even Microsoft Word – and we have a HTML document.

Starting from the next lesson of this course we’re going to make our own simple HTML pages on our own computers, and learn all about HTML as we go.

First let’s understand what makes HTML special.

What are HTML tags?

HTML is just normal text, with additional information. This additional information is delivered through tags. Tags are the fundamental building blocks of HTML.

A tag looks like this:

<tag>

Anything inside the “<” and “>” symbols defines the tag.

Can anything be a HTML tag?

Yes and no. Technically you could put anything inside a “<” and “>” symbol. However, browsers only understand certain tags, so unless you use the tags that are officially defined as part of HTML then your tags will not work correctly.

We will learn all about the important HTML tags as we proceed through this course.

More about tags

Tags can be both opened and closed. For example, let’s look at a <span> tag (don’t worry about what a <span> tag is for now – we’ll get to it later):

<span>This is inside my span! I can put anything I like here.</span>

You can see that a tag is opened by having an initial tag such as <span>. It is then closed with a second tag that has an additional “/” symbol. Anything can go between the opening and closing tags – this is known as the tag contents.

This whole example from the opening tag to the tag contents to the closing tag is known as a HTML element. In this case we have created a span element, because we are using a span tag to define the element.

Elements are made up of tags.

Self-closing Tags

Some tags don’t require opening and closing tags, they can effectively open and close themselves in just one tag. These are often known as self-closing tags.

Technically in HTML 5, which is currently the most advanced version of HTML, self-closing tags don’t actually close themselves, but it’s a helpful way to picture what is happening. (If you’re interested in why: it’s because HTML is similar to a markup language called XML. In XML tags are required to either be closed in a pair, or to self-close. HTML is not as strict as XML, so you don’t have to self-close your tags. However, it doesn’t hurt, and keeps your HTML neat so it is not a bad habit to have.)

A self-closing tag looks like this: <tag />

Tags that can exist on their own, i.e. be self-closed include: <img />, <link /> and <meta />, amongst others.

Again, we will understand more about each of these tags as we encounter them when we start building our own website!

Tag attributes

The last important concept to understand about tags is that tags can have attributes as well as contents. Let’s add an attribute to our <span> tag from before:

<span class=”exampleTag”>This is inside my span! I can put anything I like here.</span>

Now our tag has a class attribute. Attributes can have values. In this case our attribute has the value exampleTag.

As with tag names, attributes can technically be anything. For example, we could have said:

<span lemon=”fruityAttribute”>This is inside my span! I can put anything I like here.</span>

This gives our <span> tag an attribute named “lemon” and with a value of “fruityAttribute”.

However, just like with tags there are certain attributes that are important and have meaning. We will learn about these as we learn about each tag.

Putting it all together

Here we can see all of the parts that make up an element.

Make sure you understand which part of the element is a tag, which part is an attribute, which part is an attribute value and which part is the element contents.

We will be referring to all of these throughout the course so try and memorise these now.
[the_ad id=”13518″]