The basic structure of a web page.
Lesson 1
Browser = the program that you use to visit web pages. If you are an AOL customer, you will most likely be using the AOL browser.
If you are not an AOL customer, you probably use Internet Explorer.
Web page = When you are using your browser to view something on the internet, the thing that you are viewing is a web page.
Please create a new folder on your computer. Double click on your new folder to work within your folder.
The first step is to prepare your folder to create an html file..
To do this you must tell windows NOT to hide file extensions. Here's how
At the top if your folder you will see a tool bar. Click on "tools" on your toolbar. A menu will appear. On that menu, select Folder Options.
A new window will appear with these tabs at the top. Click on the View tab.
The default setting here is to have Hide extensions for known file types checked. Uncheck it and click ok.
Using your RIGHT mouse button, click in the folder. A menu will appear. One of the items on this menu is "New". Click on New and another short menu will appear. One of the items on the new menu will be "Text Document". Click on Text Document.
Create a new text file. Rename this text file index.html
When this is done, your new text file will have the icon for your default browser.
Please open a program that you have on your computer called Notepad and open your new index.html. We will be using notepad to edit our pages.
Please open your new index.html in your default browser. Your page will be a blank white page. We will be using your browser to view our pages. So you need the same index.html open in BOTH programs. Notepad and browser at the same time.
Please make your notepad window active (ready to edit).
The very first bit of code on any web page is <html> This is called an opening html tag. HTML stands for HyperText Markup Language.
The last bit of code is </html> This is called a closing html tag.
Please note the difference.
<html>
</html>
The closing html tag has a / in front of it
This indicates to your code the beginning and the end of your web page.
All of the code that we add now will be between the opening and closing html tags.
There are 2 sections on a web page. The head and the body.
We will show these sections by using opening and closing tags.
The head is above the body so lets add the head sections
<html>
<head>
</head>
</html>
I have added the opening and closing head tags to show the head section of my page.
Now I will add the title of my page. That goes in the head section. I will show the beginning and end of my title by using opening and closing title tags.
<html>
<head>
<title>The title of my page</title>
</head>
</html>
As we get more advanced, we will learn about other things that can go in the head section, but for now we will add only the title.
Lets add our body section now. This will go under the head section.
<html>
<head>
<title>The title of my page</title>
</head>
<body>
</body>
</html>
The body section is created by using opening and closing body tags as shown above.
The "meat" of your web page will be added to the body section of your page. The meat is the stuff that others will see when they visit your page on the internet.
At this time please save your index.html in your notepad. This is needed after each step for your browser to show the changes that you have made.
Make your browser active and refresh your page. Since we have not added anything in the body section, your page will still be a blank white page. We did however add the title. Please look at the upper left corner of your page. If your page title has changed to the title that you gave it in your title section....
DANCE!