HTML Takes the Form of a Combination of Text, and Tags. the Tags Indicate How the Browser

HTML Basics

PART 1

HTML is Hyper Text Markup Language, and as such isn't really a programming language. It is simply a way of 'marking up' hypertext - and hypertext is similar to text, all that means is it is a way of getting text (or other content) to look the way you want it, for instance Bold. When you open a HTML file in a web browser, the browser converts the HTML into the page you wanted to see. As HTML is just a markup language, you can write it in any text editor, for instance notepad. Other software like Dreamweaver offer enhanced editing tools to make your life easier.

HTML takes the form of a combination of text, and tags. The tags indicate how the browser should treat the text. Normally tags come in pairs, with an opening tag and a closing tag. The text in between the two tags is treated accordingly. The name of each tag is surrounded by pointy brackets like this;

Notice the '/' character by the second tag - this indicates it is a closing tag. The HTML tag is an important tag, as this needs to surround the whole file (or webpage) as it indicates that everything inside is written in HTML. Within the HTML file, the page is normally separated into a head and a body. Most of the things in the head won't actually be seen on the webpage, whereas the body is where the content is placed. So you could start your first webpage by opening a text editor and pasting in the following;

Within the Body tags you can write anything you want to appear on the page, whereas in the head we could start by placing the title of the page - which will appear as the title of the browser page;

<HTML>
<HEAD>
<TITLE>My First Webpage</TITLE>
</HEAD>
<BODY>
Welcome to my first webpage!
</BODY>
</HTML>

Give it a go! Save your file with the extension '.htm' and then open it using your web browser.

PART 2

In part 1 of this guide, you created your first HTML webpage - but it wasn't very interesting! Here we will look at how to make the text on your page more attractive. As we mentioned in Part 1, HTML files are a combination of tags and text, with the tags there to tell the browser how to display the text. First up, the paragraph tag, which is normally used for general paragraph text;

<P> This is paragraph text. </P>

A line break will appear following the closing 'P' tag, but beyond this, the Paragraph tag does little. Most pages have headings, and then some sub headings. HTML initially offers us 6 different heading types, each numbered with the H tag. Experiment to see what each does by pasting the following into the body section of your webpage;

<H1> This is a H1 heading </H1>
<H2> This is a H2 heading </H2>
<H3> This is a H3 heading </H3>
<H4> This is a H4 heading </H4>
<H5> This is a H5 heading </H5>
<H6> This is a H6 heading </H6>

You can use headings to break up your text. As well as using headings, you can change the style of your text using various style tags, for instance;

<Strong> This makes your text bold </Strong>
<em> This emphasizes some text </em>
<center> </center> - This would center your text
<ul> </ul> This can be used to create a list (an unordered list)
<li> </li> Inside the 'ul' tag, each element in the list should be placed in 'li' tags, to create the following;

List Item 1
List Item 2

There are more, but you can use this list to start making your page look more interesting.

PART 3

In Part 2 of this guide, we had a look at some ways to make the text on the page more interesting, but having a webpage with just text on it, is still pretty boring! So lets add some pictures.

Again for pictures there is just a different tag to use - the 'img' tag, but this tag is a little different. First, there is no need for a closing tag - afterall you just want to place the image on the page, you don't need to indicate when you have finished putting the image on the page! Second and more importantly, you need to add some parameters to the tag. What are parameters? Parameters allow us to add more information to the image tag - in this case we want to specify which image to add to the page - otherwise known as the source, or 'src', of the image.

This line of code would add a picture saved as 'logo.jpg' to the page, assuming there is a picture called that saved in the same directory as the htm file. Alternatively if you want to store all your images in their own folder, you could use the following;

We should also add some other parameters to this tag - for instance an indication of the size of the picture (width/height), and a tag to explain what the picture shows for any user that can't see the image. This second parameter is the 'alt' parameter, which also has some use when you come to do search engine optimisation.

There, now you have an image on your page. You still probably have some problems with the layout of your page, which we will address later, but next lets add the other key thing to your page - links!

PART 4

Last time we saw how to add pictures to the site, so now our site should have different types of text, and images on it. Now its time to add links.

The internet is a mass of interconnected webpages, and users can 'surf' there way around the web by following links. Therefore it is important that you add links to your page to allow users to move on - but also important that others can link back to your page and find it! Adding links is easy - just another tag!

The link tag is the 'a' tag - a here is for 'anchor'. It has an opening and closing tag, around the text (or image) that you want to form the link. It also has a parameter to indicate where you want the link to go to, the 'href' parameter (for html reference).

A further optional parameter is the 'title' parameter. While often it won't appear on your page, the title tag can provide more information about the page you are linking to;

<a href=" title="Course Information">Click Here!</a>

Again that can help when it comes to search engine optimisation later. If you are adding a link away from your page, you might want it to open in a new browser window - for this just add the 'target' parameter as below;

<a href=" title="Course Information" target="_blank" >Click Here!</a>

Finally, you might not want to link to the top of the page, instead you might want to create a link to a section lower down the page. To do this, you first have to create an anchor in the position you want to link to - again using the 'a' tag. For instance you may want to create a link back to the top of the page;

Then add the anchor name to your href, including a # before the anchor name;

Now you should be able to link your page in with the rest of the web! Great! But you might be a bit embarrassed by how your page looks. We’ll deal with style in coming weeks with CSS – Cascading Style Sheets.