Learning HTML Tags

Having created the most basic of HTML pages last time, it's time to add a little more to it. Today, we are going to introduce the building blocks of any web page - the tag!

Last time, we covered the concept of code having a vocabulary. We even used a little vocabulary -

. When writing HTML, this vocabulary has a special name - anything that is include between angled brackets is called a tag. Tags essentially tell the browser how to display various pieces of text, images, video or other media. In a way, you can think of your browser like a TV screen - the HTML page is the signal and the browser is the TV that decodes that signal and displays it. The specifics of each HTML page or web page are shown based on the various tags dotted around the page.

More code, less analogy

Let's cement the idea with another example. Open up your index.htm page that you began creating last time and replace it completely as follows:

<h1>Welcome to my homepage</h1>
<p>I am a bit of text between two HTML tags</p>
<p>em>In here I am a bit of emphasised text</em>, but out here, I am not.</p>

If you save this file and then load it in your browser, you should be greeted with something similar to the following:

What can we learn from this:

• As before, HTML pages are just text.
• Tags affect how text is displayed on the screen - the <h1> tag makes text big and bold (as it should it stands for Heading 1), the <p> tag leaves some nice white-space around our text (as it should - it stands for Paragraph), the <em> tag italicised our text.
• Tags come in pairs - or in other words tags surround a piece of text and they affect the piece of text that they surround.
• The pairs of tags don't look identical - the first one of the pair just has angled brackets around it, the second one of the pair, however has angled brackets and a forward slash.
  • we usually say tags have an opening tag and a closing tag.
  • the closing tag is denoted by the forward slash inside the angled brackets just before the tag name (eg </h1>)
• Tags can be nested inside each other - for example the <em> tag is inside a set of <p> tags.
• You need to close tags in the order of last in first out - in the above piece of code, we open a paragraph tag, then open an emphasis tag, then we have some text, then we close the emphasis tag and only after that can we close the paragraph tag.

Go and play

That's really enough learning for today - however, there is some homework for you:

• Write down, in your own words, what a tag is.
• Examine the above piece of HTML and write down all the tags that were used.
• Create a new page and using the tags you've identified, create a web page and try to make it look exactly like this (click on the image for a larger view>:
  

What does a web server have to do with a cinema?

Image from Wikipedia

Web development is an incredibly broad topic. It spans everything from creating simple home pages using HTML through to more complex "dynamic" pages that use computer programs to display content drawn from a database in response to a user's interaction. Creating simple web pages is a difficult enough hurdle for someone completely new to the field, but when you start introducing actual code into the equation, it gets exponentially more difficult. Some of the barriers you'll encounter include figuring out the difference between client and server side programming. Learning multiple programming languages. Understanding the role of the web server, the web host. Figuring out how to publish your web page. The difference between ftp and http. The list goes on.

Don't be put off though. It is very satisfying to get your own web page up and running and available on the world wide web. And like any great journey, it starts with a single step.

In order to get your website onto the world wide web for all to see, you will need to understand two basic concepts. The first is that you need to create a file (or files if you have lots of pages) that will be your website. The second is that you will need to have a Web server that will show your website when people try to view it.

You can consider this interaction somewhat like a movie. In the old days, movies would be shown on screen using a projector and a reel of film. The reel of film can be thought of as your website - this is the actual content that you want to display to the rest of the world. The projector can be considered as the Web server - this is the thing that lets other people see your website.

Now, most people didn't own large 35mm projectors with which to show private screenings of films in their own home based movie theatre. Instead cinemas would have all the equipment needed to show a film and people would come to the cinema to watch a movie (well they still do, but home cinemas are much more prevalent these days). In a similar way, most people do not have the software needed to actually show their website to the world. Instead most people use a Hosting provider to actually show their websites. The hosting provider has all the necessary software like a web server to make our website available on the internet for all and sundry to view.

Don't worry if this is a bit confusing at first. We will walk through the process one step at a time. After you have put together a few pages and got them hosted, you'll have a better understanding of all these moving parts.