What this session is about
On this page you should (hopefully)...- Learn how HTML tags work
- Find out what the basic HTML tags are
- See the basic structure of a web page
What are Tags and how do they work?
If you type a paragraph of text into a file and display it in your browser (as explained here) it will display exactly as you type it (possibly in a different font). To make your browser alter the text, you enclose some of the text in tags.
To the right or above this text is an example tag, it starts with a "less-than symbol <", some text (coloured in blue) and ended with a "greater-than symbol >". Every tag is displayed like that one; they have an "opening bracket", the tag name and then the "closing bracket".
What you've just seen is the "opening tag", there is also a "closing tag" which is used to close off a section of HTML. The diagram below shows how tags are used:-
The part numbered (1) we've already seen, it's the opening tag. Part (2) is what the tag affects and part (3) is the closing tag. I think the effects that this had are best seen with an example:-
This is some text, <strong>some of it is inside strong tags</strong>, some of it is not.
This is some text, some of it is inside strong tags, some of it is not.
A few more tags
That's really how simple HTML is, you write some text, you put tags around it and it looks different. Here are some other simple tags that you might like.| Tag | Effect |
|---|---|
| <em> | Text, some italic Text and finally some more text still |
| <u> | Text, some underlined Text and finally some more text still |
Combining Tags
It's quite possible to combine two or more tags together, for example:-
Some text, <strong>some bold and <em>some italic too</em></strong>!
Some text, some bold and some italic too!
It should however be noted that you cannot do this
Some text, <strong>some bold and <em>some italic</strong> too</em>!
Once a tag is opened, you must either open a new tag or close the last tag opened. You cannot Open a tag, open another and then close the first. While sometimes it will display as you want it to, more often than not it will not (especially as we use more complicated tags).
HTML Pages
While simply typing text into a file and tagging it is all well and fun, we're not actually creating correct HTML files. To use an analogy you'll hopefully understand, it's like serving a Roast Dinner but leaving out the Potatoes (Potatoes are always useful). A slightly more accurate analogy would be creating a building but leaving out the frame of the building. Yes, we have not put in the framework of the HTML page yet!I've put below a blank template for an HTML file, if displayed it'll be rather basic.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
Content goes here
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
Content goes here
</body>
</html>
The first item on the page is the "Doctype", this tells the browser what language it is using. There are a lot of doctypes, detailing the different versions of HTML. If you look closely you'll probably notice that this says "xhtml". This simply means you use a stricter set of rules when writing pages, these rules makes sense and also make it easier to manage larger sites.
On a web page, all the "code" should be placed inside a pair of <html> tags, much like bold text is placed inside <strong> tags. Putting something inside <html> tags means that it will be seen as html (and thus work as we want it to). Ignore all "xmlns" stuff, that'll make more sense with time, for now .
Inside the <html> tags we can split the page into two very different parts, the <head> and the <body>. The <head> tags contain information about the page, much like the cooking labels on food (otherwise, how would I know how long it takes to cook a pizza?). Inside our <head> tags we have a <title> tag and a <meta> tag. For now, ignore the meta tag, we'll cover it later, the <title> tag is one of these bits of information, it is shown in the window of the browser you view the page with, yep, that's it, that's all it does.
The second and more important half of the page is inside a pair of <body> tags. Very simply, they are the content, they hold what you see on the page, the very text you are reading right now sits between a pair of <body> tags. If you put code outside of <body> tags then it may not display properly or even at all. To continue our earlier analogy, the <body> section is the food itself.
