Anatomy of a Web Page
This tutorial is a description of the basic structure of a web page and the anatomy of a web page. Here you will learn a web page basic structure.
The Anatomy of a Web Page
To make it easier for the beginner, below is an image of the anatomy of a web page. Click the image to see a larger view.
Starting at the top of the web page, let's go through the anatomy of a web page:
Page Title
The page tile is set using the <title> </title> set of tags in the head section of the html coding. This is the only web page element within the head section of the web page the visitor will see.
URL (Domain Name)
The URL is the domain name of the website. If the visitor just typed www.domainname.com they would be taken to the home page of the website.
File Name
File name is the web page file name. It cannot contain any spaces! The file name can be written as one long name (e.g. basichtmlarticles.htm), with hyphens (e.g. basic-html-articles.htm, as shown in the image above) or with underscores (e.g. basic_html_articles.htm).
When you create a web page you have to give it a name. The file name has what is called an extension at the end of it.
The extension at the end of the file name tells the browser what kind of file it is. A HTML document would have an extension of .htm or html. If your web page uses a certain programming language it would have the appropriate extension. e.g. .php is for the PHP programming language, .asp is for the ASP programming language.
Note: Servers and some browsers will not render (show) your page if you refer to it differently in your links than the way it is actually named. Basic-Html-Articles.htm is different from basic-html-articles.htm to some servers and browsers. To combat this problem always name your files with lower case letters. This way you don't have to remember how you capitalized a file name.
Scroll Bars
Scroll bars are on the right side and bottom of the browser window. If there is a scroll bar at the bottom (horizontal scroll bar) your web page content is too wide for the browser window.
A web page layout should be designed so there is no horizontal scroll bar. You need to test your web page at different resolutions and on different operating systems to see if the way the page is laid out will result in horizontal scroll bars when viewed at smaller resolutions or by different operating systems.
One way to avoid this problem is to use a flexible (fluid) design. A flexible design will adjust to the browser window size. As long as all your elements add up to less than the browser width there will not be a horizontal scroll bar.
Next, we will look at the web page content portion of the anatomy of a web page.
Header
The header is at the very top of the web page. It usually contains a logo for the website.
Navigation
A website can use a left navigation system, a right navigation system or a navigation system that spans horizontally right under the header or above the header.
The navigation system of a website has to be consistent throughout the website so the visitor will learn your navigation system. Changing the navigation system from page to page is confusing to the visitor and they will get frustrated and leave!
Web Page Content
Web page content includes everything between the <body> and </body> tags. We have already looked at some of the web page content, the header and navigation system. Also considered web page content is the web page footer (we will discuss this next) and the center section of this page that you are looking at now.
Footer
The footer is the bottom section of the web page.
This section is where you usually put your copyright notice, link to your privacy policy and your website contact information.
Summary of Anatomy of a Web Page
In this tutorial we have looked at the anatomy of a web page from top to bottom. We started with the page title, moved onto the website URL and web page file name, discussed vertical and horizontal scroll bars, then moved onto the web page content. The web page content portion of the anatomy of a web page consists of everything between the <body> and </body> tags including the header, navigation, center web page content and the web page footer.
If you found this web page a useful resource for your own website please link as follows:
A description of the basic structure of the
anatomy of a web page. Page title, URL, file name, header, footer, navigation,
web page content are all parts to the anatomy of a web page.
URL:
