__________
/ ===== |
~~~~|O ===== |
\__________|
|
<html> and other tags |
__________
/ ===== |
~~~~|O ===== |
\__________|
|
To make a 'real' .html file, we have to start making tags. The first one is the <html> tag. Anything within a .html file which has those pointy brackets (< and >) around it, is called a tag. With tags, you can make (and change) everything inside a web page. The size of letters, the letter type, the colour of the page and the colour of the letters, pictures, everything.
To make the best use of the newest inventions in Markup Languages, it has now been decided that tags should be typed in lower case. Tags in upper case might mean something different from what you think, one day.
In HTML, you have opening tags and closing tags. An opening tag is used at the beginning of something (like: "here I want the letters to change colour from black to red"), and a closing tag is used at the end of something (like: "here I want the letters to change colour back from red to black"). So that's what a tag does, really: it switches on a certain characteristic, and then at the end it switches this characteristic off again.
An opening tag in HTML just has the brackets: e.g. <html>, signalling the beginning of a proper .html file. A closing tag needs a forward slash inside the brackets: e.g. </html> to signal the end of the file.
Let's make a real .html file, with the html-tags to open and close the file properly.
<html> Just a test. Just to see what happens with double (or treble or more) spaces, and carriage returns. What happens with a long-ish story? Where do the cut-offs go? Do you get any formatting at all? What if you make the browser window smaller? </html>
| Click | here | to see the result in the box below. |
As you can see, the result doesn't look anything like what you have typed in. You can't see the tags (which is good, because they were just there to open and close the file, remember?), but you also can't see the extra spaces and empty line. The sentences just run to the end of the window. The browser decides the formatting for you. If you want to influence this, you will have to use more tags!
Because tags are so important, you should remember that you can't use the pointy brackets for anything but the tags. Otherwise a browser might get very confused, and might not be able to show what you wanted. If you really must use the pointy brackets for something else (e.g. if you are showing complicated maths, or if you are writing a web course and want to show the pointy brackets in the text), you must use special characters. As you can see in the previous sentence, they are described somewhere else, hence the click-link to 'special characters'.
There are a few tags which do not influence the text of your document as such. They may add things (like pictures, or lines), but they do not have an effect on the letters in any way. These tags are the so-called empty tags. These do not have a proper closing tag (because there is nothing really they can enclose), so they are closed by putting a space and a slash in the opening tag, e.g. <br />.
The same tag can have more than one function (e.g. some letters may have a different colour and a different size from the rest of a text). These functions are called attributes of the tag. Attributes also have a value, e.g. the colour is "red", or the size is "6". The values must always have double-quotes around them in HTML (see later).
What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces
| Course created by Maria Turkenburg | TurkenburkiePower!!!©2001-2005 |