link to contentlink to content menuLearning Disabilities Resource Community logo
HelpHelp
 ( Francais | Espanol )

Help

Basic HTML

How to use HTML in Article and Project Submissions

It is necessary to use at least basic HTML formatting when submitting articles and projects. Below are a number of basic HTML examples that are commonly used. We suggest you create your pages and add HTML formatting in a text editor, word processor, or HTML editor, then cut and paste your work into the textarea on the submission page. This will save you from the aggravation of loosing your work should your network connection waver during the submission process.

Contents

Headings

Heading formatting is accomplished with a set of 6 header tags, ranging in from 1 to 6. In the example below level 1 to 3 headings are demonstrated. They will produce the following result:

Heading level 1

Heading level 2

Heading level 3

<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3>

Paragraphs and line breaks

Paragraph tags are necessary to separate blocks of text. Without at least paragraph tags in your article, blocks of text will run into each other to form a single large block. Paragraph tags will insert space around a paragraph while a line break tag will not. The example HTML markup below demonstrates how to use paragraph tags and line breaks.
This is the HTML that was used to produce this paragraph.

<p>Paragraph tags are necessary to separate blocks of text. Without at least paragraph tags in your article, blocks of text will run into each other to form a single large block. Paragraph tags will insert space around a paragraph while a line break tag will not. The example HTML markup below demonstrates how to use paragraph tags and line breaks. <br>This is the HTML that was used to produce this paragraph.</p>

Links and Anchors

Hyperlink markup can be used to create links to other Web sites, or other pages on the LDRC site, while anchor markup can be used to create links within a Web page. Anchors are useful for creating a table of contents that links to points within the page. The Contents links at the top of this page were created with the markup like the following:

An Anchor link <a href="#heading">Headings</a>

Which links to an anchor further down the page created with the following markup:

An Anchor <a name="heading"></a>

Links to other pages are created in a similar fashion to those used to link to anchors, except they include the URL as the value of the href tag instead of the anchor reference. The example below demonstrates how a link to another page is created.

The LDRC Web site

<a href="http://www.ldrc.ca">The LDRC Web site</a>

Images

In addition to including images with the images fields that accompany the article submission form, it is possible to include external images within articles using the HTML image tag. The example below demonstrates how to link to an image found in another location. In most cases you will want to insert images included with articles during the submission process by simply including the image number in square brackets, such as [2]. This produces a thumbnail of the image and a link to the full size image. If you choose to link to an external image that was not included during the article submission process, use the following markup, replacing the image source "src" with the URL to the image you wish to insert. Be sure to include height and width information, as well as ALT text that will replace the image if a visitor is using assistive technology or a text based browser.

LDRC Home page image

<img src="http://www.ldrc.ca/images/ldrc_top1v1.2.jpg" height="88" width="350" alt="LDRC Home page image">

Lists

Both ordered and unordered list can be included within articles and projects. An unordered list presents list items with bullets preceeding them, while ordered list present list items with numbers preceeding them. In most cases an unordered list should be used, except where the order of list items is important.

Unordered List (this is the markup used to produce the table of contents at the top of the page) <ul> <li><a href="#heading">Headings</a></li> <li><a href="#para">Paragraphs and line breaks</a></li> <li><a href="#links">Links and anchors</a></li> <li><a href="#images">Images</a></li> <li><a href="#lists">Lists</a></li> <li><a href="#view">View Source</a></li> </ul>
Ordered List (this is the markup used to produce the table of contents below) <ol> <li><a href="#heading">Headings</a></li> <li><a href="#para">Paragraphs and line breaks</a></li> <li><a href="#links">Links and anchors</a></li> <li><a href="#images">Images</a></li> <li><a href="#lists">Lists</a></li> <li><a href="#view">View Source</a></li> </ol>
  1. Headings
  2. Paragraphs and line breaks
  3. Links and anchors
  4. Images
  5. Lists
  6. View Source

View Source

Perhaps the best way to learn HTML is to view the source code of a page that has a feature you would like to duplicate. This is accomplished by selecting "View Source" from the "View" menu in your browser (browsers vary in the terminolgy they use, and the location of the View Source feature). For beginning HTML coders, it is best to view the source of simple pages to start with. Pages such as those throughout the LDRC site, can be very complex and confusing to the uninitiated.



( to top )
LDRC Contributors
ATRC logo LDAO logo LDAC logo OLT logo