Science and Engineering at The University of Edinburgh |
||||
|
||||
![[University Logo]](/icons/unilogo_25476c.gif "Link to The University of Edinburgh Home Page"){kind=icon}
Section Contents
- Edit Overview
- Page Anatomy
- Edit Mode
New Tools
More Tools
A Simple HTML Page
The table below illustrates the structure of a single HTML document. Each such document has a head area, most of which is not seen by the end user, and a body area, containing the visible content.
| document content | comments | <html> | html start tag |
|---|---|
|
<head> <title>An example Page</title> </head> | head area the title appears in the browser Title Bar |
| <body> <h3>A heading (level 3)</h3> <p>A paragraph.</p> </body> |
body area typically headings and paragraphs |
| </html> | html end tag |
The items between opening and closing angle brackets are called tags. The tag values are defined by the HTML specification. Tags may also have attributes, for example <p align="center">.
Browsers display content according to the mark-up tags and do their best to display malformed HTML, for example if there are typographical errors in tag values or attributes. However, different browsers may display malformed HTML differently, or not at all, so it is always best to validate a HTML document using an on-line validator.
A School HTML Page
Complex web pages are typically constructed from tables, where individual cells may themselves contain tables, and so on ad infinitum. The School web pages are constructed using a table with the following layout:
| banner area | |
| menu area | content area |
| footer area | |
The Banner, menu and footer areas are generated automatically and most users do not need to worry about them. The content area is edited using a simple form interface. This has some advantages and disadvantages!