|Uploading Files| Creating a Webpage | Webspace FAQ|
HTML uses instructions known as tags to tell the browser how to format the document. These tags are placed in the document itself, at the start and end of the text to be modified. A tag consists of both a left anglebracket (<) and a right angle bracket(>) surrounding the tag name, and are usually paired (e.g. <h1> header</h1>). The "/" before the name in a tag denotes the end of the tag.
Some tags will include a attribute to specify more information for the tag (link location, colour, font, etc.). This will be added after the tag name in the starting (or opening) tag.
NOTE: HTML also allows you to place graphics, photographs, and multimedia into your web page by using the appropriate tags.
ANCHOR (<a>, </a>)Anchor tags allow you to create links between documents. To anchor a link to another location,
The link will then look like this Windows 95
Links to other pages on your own website can also be created using the anchor tag. If, for example, you wanted to create a link to your second document, page2.htm, you could use the following syntax;
The link will then look like this Next Page
Hyperlinks in anchor tags can also be modified with the "target" attribute to change the window that displays the document.
To open a document in a new browser window, the tag would look like this:
The link will then look like this Next Page except when clicked on the link will open in a new browser window
BLOCKQUOTE (<blockquote>, </blockquote>)The blockquote tag is most commonly used to indent a block of text on a web page. For example,
BODY (<body>, </body>)The body tag surrounds the content of your web page. It often contains a number of attributes that modify what the body tag does. For example:
Background colors can be specified as a word, ie; "white" or "black", but it is preferable to use the hexidecimal notation. A complete list of available colors and their corresponding hexidecimal values is available here
Background Image - allows you to specify an image to appear as your web page's background. Bear in mind that images used as backgrounds are tiled to fit the browser window, so plain backgrounds work best.
If you had an image called "paper.gif" in a folder called "images" in your webspace directory and you wanted it to appear as your web page's background the tag would look like this:
Link color - allows you to set the colors that hypertext links on your web page will appear. There are three link modifiers; alink, vlink and link.
BOLD (<b>, </b>)The bold tag will bold text that is placed between the opening and closing tags. For example,
BREAK (<br>, </br>)The break tag will force a linebreak with no extra (white) space between lines. For example:
CAPTION (<caption>, </caption>)This tag creates a plain line of text above a table. It is inserted right after the opening table tag.
CENTER (<center>, </center>)Any text or images contained within the center tags will appear centered on the web page. For example:
COMMENT (<!--comment goes here-->)Comment tags allow you to place text within the source code of your web page that the browser will ignore. It is often used by html programmers to illustrate important points within a document. For example,
DEFINITION LISTS (<dl>, </dl>)Definition list tags are used to format a list of terms by using alternating definition term (<dt>) and definition definition (<dd>) tags. Web browsers will indent each new line on the list. For example:
DIVISION (<div>, </div>)Used to break up portions of text for the purpose of alignment. Text contained within these tags can be aligned left, center or right. For example:
FONT (<font>, </font>)The font tag defines the style of text contained within the tags. Size and color attributes can also be added to define the text size and color. For example:
There are currently 216 "web safe" colors that can be used in your font tag. A complete list of these colors and their corresponding hexidecimal values is available here.
HEAD (<head>, </head>)This tag identifies the first part of your HTML document, known as the head. The head also typically contains the title tag.
HEADERS (<h1>, </h1>)Header tags are used to create titles in your document and are often used to divide sections of a web page. There are 6 sizes of header tags available (h1 - h6); the largest is h1, the smallest is h6.
<h1>This is a header</h1>
<h2>This is a header</h2>
<h3>This is a header</h3>
<h4>This is a header</h4>
<h5>This is a header</h5>
<h6>This is a header</h6>
HORIZONTAL RULE (<hr>)The horizontal rule tag produces a horizontal line that runs the width of the browser window, often used to divide sections of a web page. A number of attributes can be added to the horizontal rule to define thickness and width. For example:
<hr size="2" width="50%"> will produce a line 2 pixels wide that covers 50% of the width of the browser window.
HTML (<html>, </html>)This tag tells your browser that the file or document contains HTML code.
IMAGE (<img>, </img>)The image tag allows pictures or artwork to be displayed on a web page. It always contains a src attribute to identify the location (source) of the image. There are also a number of modifiers that can be added to the image tag to define the size of the image, and the text to be displayed when the mouse pointer is placed over the image. For example:
In this example, the image tag refers to a picture called "picture.gif", located in a folder called "images", that is 100 pixels wide by 100 pixels high. When someone places their mouse over the image, a small window will become visible containing the text in the alt attribute.
Images can also be used as links to other web pages on your site by using the anchor tag. For example:
In this example, a visitor could click on the image (filename.gif) and be taken to page2.htm.
ITALIC (<i>, </i>)The italic tag will italicize text that is placed within the opening and closing tags. For example,
LIST ITEM (<li>, </li>)There are three types of lists that can be incorporated into a web page using list tags. Examples include unordered lists, ordered lists and definition lists.
ORDERED LIST (<ol>, </ol>)Ordered lists allow you to create a numbered list. For example:
PARAGRAPH (<p>, </p>)The paragraph tag defines individual paragraphs on your web page.
TABLES (<table>, </table>)Tables are used quite often in web page design to align text and images, defined by various table tags. Tables consist of headers <th>, table data <td> columns <colspan> and rows <tr>.
Table tags often contain modifiers that define the width of the table, background color and whether the table will have a border. For example;
The above example defines a 500 pixel wide table with a 2 pixel wide border and a black background. Because the table's width has been specified using pixels, it will not be scaleable if the browser window is resized.
The other way of defining the width of a table is to use percentage. Using a percentage instead of a fixed width allows a table to "scale" when a browser window is increased or decreased in size.
A complete table might look like this;
TITLE (<title>, </title>)This tag contains the title of your web page, and is placed within the head. The title will display in the title bar of the browser window when the web page is accessed.
UNORDERED LIST (<ul>, </ul>)Unordered lists are most commonly used to create a bulleted list. For example,