Basic HTML: Text
go to: Structure | Text | Tables | Links | Images |
Here are some of the most basic code you'll need. Note that I show the html in orange with a courier font for clarity about what you would actually type to use the command. Most commands have additional parameters - consult a good guide for the complete list.
Paragraph <p> ... </p>
This is a paragraph. It is the most basic element on a text page - if you don't do anything fancier use this tag to surround your text.
The <p> tag is a block element meaning that it creates a separate block and cannot be used within a line. Note that it wraps itself to fit the space available.
Line Break <br />
Generally use paragraphs and styling to get the look you want and don't try to format your layout with Breaks - it's annoying for people that may not be using the same browser, font size etc that you are.
This paragraph has no line breaks until I put one in here
for no reason except to show you what it looks like.
<p>This paragraph has no line breaks until I put one in here <br />
for no reason except to show you what it looks like.</p>
Note that this tag contains the opening and closing tag in one tag since it cannot contain anything else.
Headers <h1>...</h1> , <h2> ... </h2> through <h6>... </h6>
H1 is used for the "Basic HTML" title of this page and H3 is used for each of the commands such as Headers . Headers are also block elements, meaning that you cannot have a header on part of a line, they always stand alone on a line. Note also that headers are a basic part of organizing your page for easy visual or aural (screen readers) scanning. Always organize your page with headers in appropriate descending size to indicate your organization.
Un-ordered list <ul><li>...</li><li>...</li></ul>
- list item
- another list item
Ordered (Numbered) list <ol><li>...</li><li>...</li></ol>
- list item
- next list item
Preformatted <pre>... </pre> and
Blockquote <blockquote>...</blockquote>
In preformatted text the white space is significant so that the following lines are displayed exactly as typed without needing line break:
Professor Smith
516 High St
Bellingham, WA 98225
<pre>
Professor Smith
516 High St
Bellingham, WA 98225
</pre>
and is also excellent for poetry:
The world is too much with us; late and soon,
Getting and spending, we lay waste our powers;
Little we see in Nature that is ours;
We have given our hearts away, a sordid boon!
However blockquote, which is generally displayed indented, is used when you want to set off a quote, but is not intended to maintain white space or line breaks:
Disobedience, the rarest and most courageous of the virtues, is seldom distinguished from neglect, the laziest and commonest of the vices. - George Bernard Shaw
<blockquote><p>Disobedience, the rarest and most courageous of the virtues, is seldom distinguished from neglect, the laziest and commonest of the vices. - George Bernard Shaw</p></blockquote>
A plea: please do NOT overuse this tag. Poetry, quotes, make sense, but don't use it just to get an indent because you like indents.
Definition List <dl><dt>..</dt><dd>..</dd></dl>
where:
- dl defines the start and end of the definition list,
- dt defines the word or term, and
- dd defines the definition.
It is usually formatted to look like this:
- height
- the display height of the image in pixels - if this doesn't match the image you may get distortion
- width
- the display width of the image in pixels - if this doesn't match the image you may get distortion
Is done with this code:
<dl>
<dt>height</dt>
<dd>the display height of the image in pixels - if this doesn't match the image you may get distortion</dd>
<dt>width</dt>
<dd>the display width of the image in pixels - if this doesn't match the image you may get distortion</dd>
</dl>
Comment <!-- .... -->
A comment does NOT display on the page but it useful for you and other programmers when trying to understand the code. It can be multiple lines. Use comments freely to clarify what you're doing in the code.
<!-- This section contains the navigation for the page.
Note that all navigation links should be list elements -->
Horizontal Rule (or line) <hr />
This is simply a horizontal line on your page, like thus:
Nothing else can be on the same line of the page. It has some styling, but these options are deprecated in favor of using css to style the line. This one shows dashed because that's how I styled it in css. Without styling the horizontal line will show as a solid 1 px line in most browsers.
Note that like <br /> and <img /> this tag closes itself since it cannot contain anything else.
go to: Structure | Text | Tables | Links | Images |