How To's
The following How To's show some basic
steps for some of the more common tasks in HTML.
Frame a 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
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"> <title>title goes
here</title> </head> <body> <p>content goes here</p>
</body> </html>
HTML5 has simplified the DOCTYPE and
character encoding, so a basic web page for HTML5 would look like the
following:
<!DOCTYPE
html> <html> <head> <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
2. Type the desired text
3. Type </p> to close the paragraph
<p>paragraph
text</p>
This produces the following result:
paragraph text
Add a Line Break
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
2. Type additional <br /> wherever a line break is desired
<p>paragraph<br
/>text</p>
This produces the following result:
paragraph
text
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
2. Type additional entities to add another space
<p>some text</p>
This produces the following result:
some text
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
2. Type </pre> below the text
<pre>preformatted
text line 3 with spaces </pre>
This produces the following result:
preformatted text line 3 with spaces
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
2. Type the desired text for the heading
3. Type </h1> to close the heading
<h1>heading
text</h1> <p>paragraph text</p>
This produces the following result:
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
2. Type the desired text
3. Type --> to close the comment
<!--
comment text --> <p>paragraph text</p>
This produces the following result:
paragraph text
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
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
<ul>
<li>item 1</li> <li>item 2</li> </ul>
This produces the following result:
§ item 1
§ item 2
