Net-Ads Beginner's HTML Tutorial

Below is a simple guide to HTML formating tags. It is by no means an exhaustive list, but provides enough information to allow most webmasters to create stunning, original pages. This guide may be printed out for individuals' personal, non-commercial use, but cannot otherwise be reformatted, redistributed or reproduced in any form without the prior written permission of Curiosity Cave Pty Ltd.

Starting Out

<html> </html> - place at the beginning and end of HTML file.

<head> </head> - surrounds the TITLE and META tage.

<title> </title> - place page title between these tags. Keep the title under 70 characters in length, but be descriptive enough to provide search engine users with a clear idea as to what this particular page of your website represents.

<meta name="author" content="your_name_here"> - specifies author's name

<meta name="keywords" content="enter_keywords_here"> - 'talk' to search engine robots with these keywords. This tag is virtually ignored these days, as it was commonly abused by keyword-stuffing practices, but if you have time, it can still be worth adding the tag to clarify the key focus of the page.

<meta name="description" content="enter_description_here"> - some search engines will list this as your site's desciption. Both Google and Bing strongly recommend that website publishers continue to use this tag, and to keep it brief, but richly descriptive.

<body> </body> - surrounds the remainder of the document (all except those parts surrounded by the head tag).

<body bgcolor="#rrggbb" text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb" background="image.gif"> - allows you to specify background, text, link, visited link, active link colors, as well as allowing you to place an image in the background. Each of these variables is optional. With the broad adoption of CSS in recent years, it's often best to leave these style elements out of the body tag and to deal with them through stylesheets instead, for ease of editing in the future, but on some simple sites, basic color choices and background specifications may be established this way.

 - Organise your HTML code with comments. They cannot be read or displayed by the browser.

Formating Text

<h1-6> </H1-6> - allows you to specify heading size. h1 tags are the largest and most significant header tags, while the numbers that follow indicate smaller sub-headings, that can be nested to provide logical structure to a document. Both Google and Bing recommend that every page on your website should have an h1 tag present, to make it clear to the search engines - and to readers - what is the primary heading for a given content page.

<h1-6 align="left/center/right/justify> </h1-6> - heading alignment.

<p> </p> - surrounds paragraphs of text, leaving space before text block.

<p align="left/center/right/justify> </P> - paragraph alignment.

<br> - Line break. (can use to create smaller breaks than what would be created by adding an empty paragraph tag combination)

<hr width="xxx" size="xxx"> - Horizontal Line (width & size tags optional)

<blockquote> </blockquote> - indents the paragraph on both sides.

<font face="font, second choice"> </font> - allows you to specify font styles. You have the option to add a second or third choice font, which will appear if the reading computer does not have a particular font installed (eg "Arial, Helvetica"). As with the other font styling tags noted below, best practice these days is to leave font tags out of HTML markup and to use CSS to style text instead, but these tags are still widely supported and provide a quick and easy way to style copy.

<font size="-3/-2/-1/0/+1/+2/+3/+4"> </font> - allows you to specify font size.

<font color="#rrggbb"> </font> - specify color according to red, green and blue settings, ranging in value from 00 to ff. For common colors, the word will suffice (eg color="green").

<tt> </tt> - Typewriter Text - monospaced (eg Courier).

<strong> </strong> - Make text appear bold.

<u> </u> - Underline

<em> </em> - Add emphasis to text (generally italic, according to other formating)

<big> </big> - Large font size.

<small> </small> - Small font size.

<strike> </strike> or <S> </S> - ~~Strikeout~~.

<sub> </sub> - _Subscript

<sup> </sup> - ^Superscript

Linking and Using Graphics

<a href="https://URL"> </a> - Hyperlinking. Use this to assign links to images or text elements, to enable readers to easily jump to a related page on your website, or from your site to an external resource that you're referencing.

<a href="mailto:email@address"> </a> - Linking to an email address. WHen visitors click on this, it will generally trigger their default mail client (such as Outlook or Mail) to open so that they can send an email directly to the specified recipient.

<a href="news:news.group"> </a> - Link to a newsgroup. These aren't widely used in the modern web, where social media sites and news aggregators such as Reddit or niche discussion forums are the places that people go for news updates.

<a href="#xxx> </a> - Linking to a target within the page. This allows you to provide readers with the ability to quickly jump up or down to spots within a single page, which can be useful if you present long-form content.

<a name="#xxx> </a> - This is the tag that you use to set a target for the # in-page linking that was described above. You could assign a name to indicate your "#introduction", for example, to allow people to jump to the start of your article.

<img src="image_location" alt="alternate_text" width="xxx" height="xxx"> - Insert image. The alt tag is displayed when image not loaded. Setting optional Width and Height specifications allows the page to load faster, by setting aside a specific block of space for the image to occupy once it has loaded.

<embed src=object_location" width="xxx" height="xxx"> - Inserts non-image object onto page (eg MIDI files or browser-compatible video formats).

Lists

<ul> </ul> - Start and end of an "unnumbered" bullet list.

<ul type="disc/circle/square"> </ul> - Specify bullet type.

<ol> </ol> - Start and end of "ordered", or numbered list.

<ol type="A/a/I/i/1"> </ol> - Specify numbering system.

<li> </li> - Places a bullet/number and indent before text.

<dl> </dl> - Start and end of definition list.

<dt> </dt> - Specifies definition term.

<dd> </dd> - Definition.

Tables

<table> </table> - If you wish to present data in a tabular format for ease of reference, define the start and end of the table structure using these tags.

<table border="xx" width="xxx"> </table> - Sets border size and table width. Width can be in % or pixels, and is an optional setting.

<table cellpadding="xxx" cellspacing="xxx"> </table> - Cellpadding is space within cell that surrounds data. Cellspacing specifies the gap between cells.

<table bgcolor="#rrggbb"> </table> - Specify table background color.

<th> </th> - Table Header.

<th colspan="xx" rowspan="xx"> </th> - Specify how many columns and rows are spanned by the header cell.

<th align="left/middle/right" valign="top/middle/bottom"> </th> - Specify alignment and vertical alignment.

<th bgcolor="#rrggbb" nowrap> </th> - Header cell background color. nowrap specifies that you don't want linebreaks to occur.

<tr> </tr> - Surrounds table row.

<td> </td> - Surrounds individual cell contents.

<td colspan="xx" rowspan="xx"> </td> - Specify how many columns and rows are spanned by the individual cell. This is similar to what would be accomplished by merging cells in a spreadsheet program, such as Microsoft Excel.

<th bgcolor="#rrggbb"> </th> - Define the cell's background color.

<caption align="top/bottom"> </caption> - Define the table's caption and the alignment of the caption text.

^ Return to top ^