Basic HTML Page

The following How To’s show some basic steps for some of the more common tasks in HTML.

Basic Web Page

The following code can be used to frame a basic web page and includes the DOCTYPE, character encoding, title, and some content:

<!DOCTYPE_cc html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> _cc
<html>
   <head>
     <meta_cc http-equiv="Content-Type" content="text/html; charset=utf-8"> _cc
     <title>title goes here</title>
   </head>

   <body>
     <p>content goes here</p>
   </body>
</html>

Create a New Paragraph

The following example uses paragraph tags to start a new paragraph. Here are the steps:

  1. Type <p> to start a new paragraph
  2. Type the desired text
  3. Type </p> to close the paragraph

Example

<p>This is my Paragrah Text</p>

This produces the following result:

This is my Paragrah Text

Add a Line Break

The following example show you how to make a line break with in a text or a paragraph.

  1. Type <br /> in front of the line of text where the new line should appear
  2. Type additional <br /> wherever a line break is desired

Example

<p>This is my<br />Paragrah Text</p>

Following the result of the above example

This is my
Paragrah Text

Insert a Blank Space

Blank spaces can be inserted with a line of text to indent or add emphasis to the text.

  1. Type   in the text where the blank space should appear
  2. Type additional   entities to add another space

Example

<p>Hello   World!</p>

Following the result of the above example

Hello   World!

Insert Preformatted Text

Preformatted text can be inserted by using the <pre> and </pre> tags. This will allow the preservation of line breaks and spaces within the text.

  1. Type <pre> above the text to keep intact
  2. Type </pre> below the text

Example

<pre>
This My Code Text Line 1
  This My Code Text Line 2
    This My Code Text Line 3
</pre>

Following the result of the above example

This My Code Text Line 1
  This My Code Text Line 2
    This My Code Text Line 3

Create a New Heading

Headings can be used to help clarify information on a page, organize text, or create visual structure. There are six heading levels ranging from level 1 (<h1>), the largest, to level 6 (<h6>), the smallest. Here are the steps to insert a level 1 heading:

  1. Type <h1> to start a new heading
  2. Type the desired text for the heading
  3. Type </h1> to close the heading

Example

<h1>heading text</h1>
<p>paragraph text</p>

Following the result of the above example

heading text

paragraph text

Insert a Comment

Comments can be used to add notes within an HTML document, but do not display on the web page.

  1. Type <!-- to start a new comment
  2. Type the desired text
  3. Type --> to close the comment

Example

<!-- comment text -->
<p>This is My paragraph text</p>

Following the result of the above example

This is My paragraph text

Insert a Special Character

Special characters can be inserted into web page by using HTML codes. These codes are also called entities. Each entity consist of a name or number code preceded by an ampersand and ending with a semicolon.

Type the name or number code for the character, with an ampersand (&) before the code and a semicolon (;) following the code.

Example

© Copyright 1988
® registered trademark

Following the result of the above example

© Copyright 1988
® registered trademark

Insert a Bulleted List

Use a bulleted list to set a list of items apart from the rest of the page of text.

  1. Type <ul> above the text you want to turn into a bulleted list
  2. Type <li> in front of each item in the list
  3. Type </li> at the end of each item in the list
  4. Type </ul> after the list text

Example

<ul>
<li>Listing Item 1</li>
<li>Listing Item 2</li>
<li>Listing Item 3</li>
</ul>

Following the result of the above example

  • Listing Item 1
  • Listing Item 2
  • Listing Item 3