HTML is written in “elements”, these are commonly referred to as "tags". A "tag" is a command to the browser for how to display something. Tags usually (but not always) come in pairs: one that turns on the command, and one that turns it off. Whatever you want to display is in between the two. The very first tag we'll need then is then one that tels the browser which version of HTML we are using. The "DOCTYPE" begins the HTML document. According to web-standards, each HTML document should have a document type declaration:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This declares the document to be XHTML 1.0
The next tag we'll need then, is the one that tells the browser where the HTML starts:<html>
then you've got all the other junk in your page, and at the very end:</html>
tells the browser that it's reached the end of the HTML in that file.
An important concept in writing HTML is "nesting". Tags can fit inside each other; they have to since all other tags must be able to fit within the HTML tags. When you nest tags, you have to be sure that for every "on" there is an "off" (if an "off" is available), and that they are in the correct order:<tag1><tag2><tag3> yackety-yak </tag3></tag2></tag1>
You see how they have to be turned off in the opposite order that they were turned on? If the order gets mixed up, the browser gets confused and doesn't turn off a feature when it should so your entire page will end up in italics, for example. This will be come clearer in a second as we add in some more tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Welcome to my web page
Check here for more stuff coming soon.
Notice how "title" was closed before I closed "head". "title" in this case is what shows up at the top of the browser window, it does not show up on the page itself. That's why the "title" tag is nested in the "head" tag, you will also see the "meta" tag which in this case sets the character set1 to be used is closed by the "/" at the end of the tag (it might help to think of a "character set" as an alphabet). Whatever is within the "body" tag is what will actually show up on the page.
Anything that is within the < and > will not be displayed on the page since the browser will assume it's HTML. So how did those signs appear in the example? You have to tell the browser specifically that you want the symbols and that they are not part of the HTML for the page. The HTML you would use to make those symbols appear is:
< for a "<"
> for a ">"
And yes, there was also a number code used to make the ampersand visible in the example. How do you find out what the number codes are for all the various symbols?
There are two ways you can find out the number codes, and this is a good opportunity to teach you a handy feature of your browser. Whenever you see something interesting in a page and wonder how they did it, in most cases you can look at the HTML for that page. Put your mouse over this page. PC users: right click on your mouse. A menu will appear. Click on "View page source". Mac users: go to the view menu, then select "View Source". The little clump of junk before the HTML tag is the code you need to create a <. You can also get all the codes for symbols and punctuation here.