Skills in this lesson: html, head, title, body, text
Instruction:
Web pages are created using tags. Tags are commands that tell your browser what to do to make your document display the way you intend it. In a html document, tags are those things that are surrounded by arrow brackets <>. Anything not within arrow brackets is text that will show up somewhere.
Tags must be closed -- you close a tag by using a slash in front of the closing tag name </name>. One way to understand why tags must be closed is to remember that these are commands. Think of a light switch. You flip it on and the light will stay on until you flip the switch back off.
There are three main tags that should be in every HTML document:
the HTML tag,
the HEAD tag,
and the BODY tag.
<html>: Think of the html tag as the "whole" tag. It is an html page's beginning and its end. EVERYTHING in your page goes in between the opening html tag and the closing html tag.
<head> and <body>: Within the html tags of your page are two tags that divide your document into the informational section of your page and the "meat" of your page. Everything you put in the head serves an important purpose, but none of it actually "shows up" on your web page when it's loaded in a browser.
The head comes before the body. The first thing you will typically do in the head is a title tag. This is the only thing you put in the head that "kinda" shows up. It is not the name of your file, but the title of your page. This title shows up across the very top of your browser window. It shows up exactly as you type it in html -- and you may of course use spaces and capital letters.
The body is the part of the html document actually seen in the browser window. Everything you want displayed must be within the opening and closing body tags.
The beginning of a basic page would look like this:
<html>
<head>
<title>This is my very first page</title>
</head>
<body>This is my first web page</body>
</html>
Some notes on the above: In this case, the words between the opening and closing title tags will show up in the top of the browser window.
Notice that I don't bother with capital letters inside my tags. They are not case sensitive....you can use capitals or lower case letters. I tend to use lowercase because it is easier to type. Some designers like to use ALL CAPS, because it makes the tags stick out from the rest of the document.
Also, adding extra spaces between words does not matter. You can enter one space in html -- anything more is ignored.
Notice that for every tag I "opened", I have a closing "tag" in the appropriate place. This is crucial.
There are firm rules that dictate where tags go. The title tags will always go within the head. There are more tags that can go within the head that we will discuss later.
Saving and viewing your page: Go to file and choose "Save as". Now, saving html files is slightly more complicated that saving other program files. To understand why, you must first understand what an extension is.
The extension of a file name is simply the part of the name that appears after the "dot." For example, Microsoft Word documents have a .doc extension, notepad documents have a .txt extension, and html documents have, well, a variety of extensions, but we will stick with the old standard ".html"
It is important to notice that when you save your file, you save it as the correct type with the correct extension. The File Type should be "all files" (NOT Text!) and you will have to name your file and maually enter it's html extension. Ex: first-day.html