Learning Resources
Lesson
In Unit 1, you had a brief look at web page structure. Now that you have been making web pages for some time with FrontPage it is time to take a closer look.
Web Pages
Word Processors and most other programs store files in a proprietary binary encoding format. They do this for several reasons. One of the major reasons is so that competitors cannot see the inner workings of how the program structures files, and therefore cannot make competing products that can use their files. Saving files this way does not allow separation of the content from the codes that are used to format the content.
Web pages are designed to separate the content from the formatting information. It doesn't so much separate it as allow you to read it in the same file. Web pages are saved as ASCII (American Standard for Computer Information Interchange), or plain text files. That means they can be opened in any text editor. Not only can you read the content, but you can also read the HTML (hypertext mark-up language) codes. If you right click on this page in your browser, and select View Source, Notepad will open and you will see the contents of this page, along with all the code that is used to format it.
Web Pages and Web Browsers
Without a browser, web pages are just text files. The browser reads the HTML code and formats the file onscreen so that you can read it. It does this every time you open the file. So a major function of the browser is to present the page on screen.
Since the content and the HTML code are plain text, the browser needs a way to separate content from code. All HTML code is enclosed in these brackets <> (found on the , and . keys). Ending codes use </>. The codes are instructions to the browser, and the browser will perform the formatting actions in the order that it reads them in the file. The order that codes are placed in the file will affect how the page is formatted and how long it takes to do that.
You should realize that the time required to load a web page depends on
- how long it takes to get the file from the web site
- how long it takes the browser to format the file onscreen.
The first factor is determined by connection speed and other internet factors. The second factor is determined by how fast your computer is, and how the coding is done.
Structure of a Web Page
HTML code is enclosed in the brackets <>. < is on the , key, and > is on the . key. Most of the codes instruct the browser to format the page contents. One code is used for comments. People often put comments in documents to remind themselves why they did something. A comment looks like this
<!--- this is a comment --->
When the browser sees <!--- it knows that this is a comment and it will not show it onscreen.
Web pages start and end with an HTML declaration, using the code <html> and </html>.
Between those two codes, web pages are divided into these major sections
- Head. Information in the head section is used by the browser to set up the document, and enclosed between <head>and </head> codes
- Body. Information in the body section is used by the browser to draw the page on screen, and is enclosed between <body> and </body> codes
The code for a basic page structure without any content looks like this. HTML codes are in red and comments are in green.
<html> <!------ The HTML doc starts here>
<head> <!------ The head starts here>
</head> <!------ The head ends here><body> <!------ The body starts here>
</body> <!------ The body ends here></html> <!------ The HTML doc ends here>
Different levels of indenting are often used to make the code easier to read. Many HTML editors do this, and the often colour the code. Since most codes require the starting and closing codes, some editors (including FrontPage) give the code a different colour if a starting code is found and no closing code is found for it.
For additional Information
You will find additional information concerning web page formatting at these locations
- HTML Mini Tutorials Click the link at the bottom of the page to go to the next mini chapter
- Another The Anatomy of a Web Page Scroll down the page for content. Note that this page covers many more HTML codes than are used in this lesson.
- Yet another The Anatomy of a Web Page. A completely different kind of discussion
Activity
Activities for this lesson are included in Lesson 2
Test Yourself
Test for this lesson included in Lesson 2