File Structure
A web page is a document designed to be viewed using a web browser. It can be found on the Internet, an intranet, or on a local source like a hard drive or USB drive.
A web page is written in the HTML language (HyperText Markup Language). HTML uses plain text - so it can be easily viewed using a simple text editor. Throughout the information in a HTML document there are special plain-text codes that are "interpreted" by a web browser.
Everything in a web page is made of elements. An element is any "object" that is somehow different from the "objects" around it. Almost all elements have a start tag and an end tag. Here is an example:
<p>My words in <i>italic</i>.</p>
- The <p> … </p> defines a paragraph element.
- The <i> … </i> defines an italic text element.
Elements can have attributes, which appear inside the start tag. For example:
<p>My words in <font color="red">colour</font>.</p>
- The <font> … </font> defines a font element (an element that changes the font compared to nearby text).
- The color="red" is an attribute that sets the colour to red.
A web page must have three elements:
<html>
<head>
</head>
<body>
</body>
</html>
- The <html> … </html> defines the whole web page.
- The <head> … </head> defines the "header" - the "hidden info" that a page might need.
- The <body> … </body> defines the "body" - the stuff that a page wants to display.
For simple pages, everything that is to be shown to readers appears inside the <body> … </body>.
Document Structure
Nothing happens in a web page without a tag. This means you can space things out with spaces, tabs and enter characters, and these do not affect the way the page is shown.
To create structure in a web page, you use the following tags:
| <p> … </p> | A paragraph |
| <h1> … </h1> | A major heading |
| <h2> … </h2> | A big heading |
| <h3> … </h3> | A medium heading |
| <h4> … </h4> | A subheading |
| <h5> … </h5> | A small subheading |
| <h6> … </h6> | A very tiny subheading |
| <br /> | A line break (notice it has no separate end tag!) |
| <hr /> | A horizontal rule or line (notice it also has no separate end tag!) |
Headings and paragraphs are called block elements - they define new blocks of text, separate from the blocks of text before and after.
There are very few elements that do not have end tags. However, the elements <br /> and <hr /> are two of these. Instead of writing <br> … </br>, we write <br />, which is a way of showing that the start tag "ends itself".
Text Formatting
HTML allows for the same basic types of formatting we expect from any modern word processor. These include:
| <b> … </b> | Bold |
| <i> … </i> | Italic |
| <u> … </u> | Underline |
| <s> … </s> | Strikethough |
| <tt> … </tt> | TeleType (computer type) |
| <sup> … </sup> | Superscript |
| <sub> … </sub> | Subscript |
| <big> … </big> | Bigger (can be nested up to 3 times) |
| <small> … </small> | Smaller (can be nested up to 3 times) |
These are known as physical formats. They are specific and literal - bold is bold, and that's it! There are another set of formats known as logical formats, which highlight an idea or concept. For example:
| <cite> … </cite> | A Citation |
| <address> … </address> | An Address |
| <em> … </em> | Emphasised text |
| <ins> … </ins> | Text inserted since last revision |
In some cases these logical formats reproduce the physical formats (for example, <em> … </em> is most often shown as italic). In others, the logical formats do not change the text from normal. The point of these is to add logical structure to a document. They also make it easier to use style sheets.
Lists
There are three kinds of list - bullet, numbered and definition. Bullet and number lists are very similar in structure, whereas definition lists are more complicated.
An unordered list (or bullet list) is defined using <ul> … </ul>. However, inside this you need a <li> … </li> for each separate item in the list. For example:
|
… makes … |
|
An ordered list (or number list) is defined using <ol> … </ol>. As for unordered lists, you need a <li> … </li> for each separate item in the list. For example:
|
… makes … |
|
A definition list is generally used for a glossary of words, a reference list, or something similar. It is defined using <dl> … </dl>. Inside a definition list can be definition titles (using <dt> … </dt>) and definitions (using <dd> … </dd>). For example:
|
… makes … |
|
