Heather Lee's
HTML Lesson 2
The HTML Document
There are three main sections in a web page. First of all, the entire page is defined by the <html> tag. Basically the browser is being told that everything written between the opening <html> tag, and the closing </html> tag is to be read as a web page.
The Head
The next area is the head of the web page. It is defined by the <head></head> tags. The head holds information that isn't necessarily visible on the finished page, but it can be read by the browser and search engines. It holds information like the title (that comes up in searches), key words that search engines use to index your page, and other relevant information like the page authors name. The Head can also hold things like javascripts (little programs that run when you load the page; for example, buttons that light up) and CSS (cascading style sheets) which are designed to control the visual appearance of the web page. Both of these properties are extremely important to the design of most web pages.
The Body
The last area is the body of the web page. Surprise, it is defined by the <body></body> tags :) The body of the web page is where the stuff you see when you look at the page goes. So this is the area you put your text in, the tags that define where images should be displayed, the colors you want, etc... It can also hold things like javascripts and CSS. The body is also the area where links are located. Links make the web what it is by allowing the user to jump instantly from one place in a document to another, or to a new web site entirely.
Your First Page
Alright, thats enough chat for now. Its time to put together your first (super simple) web page. You will need to open a text editor to create your page in. If you are running windows you should be able to find one under Start, Programs, Accessories, Notepad. When you open it up it will create a nice new blank text file. Click on "File" and select "Save As". Save the file as "page_01.html". Save it into a directory that you can easily remember (you should probably make one just for this). For the sake of simplicity I'll refer to the directory as "mysite".
Now its time to put in some content. You can just highlight copy (Ctrl "c") and paste (Ctrl "v") the tags in if you have trouble typing, but I highly recommend typing them in (you will learn them faster). Type in the following:
<head>
<title>My First Page</title>
</head>
<body>
<h1>My First Page.</h1>
<p>Hi, Welcome to my first home online. There isn't much to browse here yet, but check back soon!</p>
<a href="http://www.w3.org/">World Wide Web Consortium</a>
</body>
</html>
Now save the file and close it. Now I want you to go to the directory you saved the file in and click on it. Because you gave the file the extension .html it should open automatically in your default browser. A trick to opening the file in your text editor or you browser is to change the file extension back and forth between .html and .txt. Depending on your operating system you may also be able to right click and select "open with" to choose the program.
Thats all there is to it, congratulations you have just created your first page. It should have a title, a very short paragraph, and a link to the World Wide Web Consortium. Here is the demo page I built, if you are having trouble open it up and right click on the background and select "view source" to see its code.
On to Lesson 3
| Lesson 1, 2, 3, 4, 5, 6, 7 | Lesson Links | Lesson Clip Art |
You have probably noticed that these lessons require at least basic knowledge of how to use a computer. If you are having difficulties understanding something send a message to cind_rella@hotmail.com and I will see what I can do.
