Web Development For Beginners: 2013

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>:

Nothing is more frustrating than reading pages and pages and pages about programming before you actually get your hands dirty. So without further adeu, let's write our very first HTML page. I'm going to assume you are, at least, computer literate enough to create directories and files and open them in some sort of editor.

Step 1 - Create a directory for your code

Create a new directory for your code. Call it "development" if you fancy - it has a nice ring to it after all!

Step 2 - Open a text editor

Open your text editor. If you are using Windows, then open Notepad (you can do this rather quickly by holding down the Windows Key and 'r' and then, in the "Run" box that comes up type "notepad.exe" and hit Enter). If you are OSX, then open TextEdit.

Step 3 - Write the HTML

Type the following in to your text editor

<html>
This is my first HTML page
</html>

Step 4 - Save your work

Save the file into the directory you created in step 1. Call it "index.html".

Step 5 - Open it in the browser

Use Windows Explorer or Finder to navigate to the directory and then double-click on the "index.html" file you create. Your default browser should open and you should see something similar to this:

Summary

This might seem like a very simple first HTML page - and it is! However, even in the smallest snippet of code above, we've learned a lot:

Code is just text

The first thing we learned is that HTML code is just text, and that it can be written in the most basic of text editors. You don't need any special tools, though it has to be said, some text editors make creating HTML easier - we will explore these in the future.

Code has a syntax

All code has a syntax. To put it another way, code can be considered a language, a little bit like music in a way. There are specific ways of writing things that make a piece of text HTML rather than just a piece of text. When we are dealing with HTML, our syntax uses "tags". Tags are simple - in the above example <html> and </html> are the tags. Tags are enclosed in the "greater than" and "less than" signs and usually have some other text between them. Tags usually have an opening tag and a corresponding closing tag - somewhat akin to writing a sentence - you start with a capital letter and end with a full stop (or other punctuation). Notice how the second tag has a forward slash before the "html" part - this signifies that we are closing the tag or ending the sentence.

Code has a vocabulary

All code has a vocabulary - be it the simplest HTML page through to the most complex piece of C code. All code has a vocabulary - these are often called keywords or reserved words. The vocabulary of the code tells the computer what to do with your code. In the above example, we used only one keyword - "html" - this told the web browser to treat our code as an html page.

Extra credit

It might not seem like much at the moment, but you have taken the first step towards creating your own website from scratch. Now it's time to for you to experiment - code is about practice, so even at this stage it is important to practice what you know. Here are a few ideas to play with:

Change the text from "This is my first HTML page" to something else and see what happens (hint, you need to hit reload/refresh on your browser to see the changes
Change the tags (the parts that say "html" to something else and see if there is any effect.
Create a new file and try to type the above example from memory.
Rename index.html to something else. Does it have any effect? If so, what?
Change the file extension of index.html and see if that has any effect. If so, what? You might need to change your Windows Explorer options to "show file extension" to do this.

Web Development For Beginners

Monday 18 February 2013

Learning HTML Tags