 
|
Support Page
HTML Tips
HTML - the Hypertext Markup Language - is the lingua franca for
publishing on the World Wide Web. Having gone through several stages of e
volution, today's HTML has a wide range of features reflecting the needs
of a very diverse and international community wishing to make information
available on the Web.
Note: All the tags are in bold
Start with a title
Every HTML document needs a title. Here is what you need to type:
<title> My first HTML document </title>
Change the text from "My first HTML document" to suit your own needs.
The title text is preceded by the start tag <title> and ends with
the matching end tag </title>. The title should be placed at
the beginning of your document.
Add headings and paragraphs
If you have used Microsoft Word, you will be familiar with the buigt in styles for
headings of differing importance. In HTML there are six levels of headings. H1
is the most important, H2 is slightly less important, and so on down to H6, the
least important.
ere each character has the same width. If you define a style rule for the pre element,
some browsers forget to use the monospace font, necessitating the use of the font-family
property. For instance if you want to render all pre elements in green you can define
the style rule:
Here is how to add an important heading:
<h1>An important heading</h1>
and here is a slightly less important heading:
<h2>A slightly less important heading</h2>
Each paragraph you write should start with a <p> tag. The </p>
is optional, unlike the end tags for elements like headings. For example:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
Adding a bit of emphasis
You can emphasize one or more words with the <em> tag, for instance:
This is a really <em>interesting</em> topic!
Adding interest to your pages with images
Images can be used to make your Web pages distinctive and greatly help to get your message
across. The simple way to add an image is using the <img> tag. Let's assume
you have an image file called "me.jpg" in the same folder/directory as your HTML file. It is 200
pixels wide by 150 pixels high.
<img src="me.jpg" width="300" height="250">
The src attribute names the image file. The width and height aren't strictly necessary but
help to speed the display of your Web page. Something is still missing! People who can't see the
image need a description they can read in its absence. You can add a short description as follows:
<img src="me.jpg" width="200" height="150" alt="My Picture">
The agt attribute is used to give the short description, in this case "My picture". For
complex images, you may need to also give a longer description. Assuming this has been written
in the file "aboutme.html", you can add one as follows using the longdesc attribute:
<img src="me.jpg" width="300" height="250" alt="My Picture" longdesc="aboutme.html">
You can create images in a number of ways, for instance with a digital camera, by scanning an image in,
or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer
browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network,
you should avoid using large image files.
Generally speaking, JPEG is best for photographs and other smoothly varying images, while
GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three
formats support options for progressive rendering where a crude version of the image is sent
first and progressively refined.
Adding links to other pages
What makes the Web so effective is the ability to define links from one page to another,
and to follow links at the click of a button. A single click can take you right across the world!
Links are defined with the <a> tag. Lets define a link to the page
defined in the file "about.html":
This a link to <a href="about.html">About Me</a>.
The text between the <a> and the </a> is used as
the caption for the link. It is common for the caption to be in blue underlined text.
To link to a page on another Web site you need to give the full Web address
(commonly called a URL), for instance to link to www.ArisHost.com you need to write:
This is a link to <a href="http://www.ArisHost.com/">ArisHost</a>.
You can turn an image into a hypertext link, for example, the following allows you to click on the company
logo to get to the home page:
<a href="/"><img src="logo.gif" alt="home page"></a>
Three kinds of lists
HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list.
It uses the <ul> and <li> tags, for instance:
<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>
Note that you always need to end the list with the </ul>
end tag, but that the </li> is optional and can be left off.
The second kind of list is a numbered list, often called an ordered list. It uses the
<ol> and <li> tags. For instance:
<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>
Like bulletted lists, you always need to end the list with the </ol>
end tag, but the </li> end tag is optional and can be left off.
The third and final kind of list is the definition list. This allows you to list terms
and their definitions. This kind of list starts with a <dl> tag and ends
with </dl> Each term starts with a <dt> tag and each
definition starts with a <dd>. For instance:
<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>
The end tags </dt> and </dd> are optional
and can be left off. Note that lists can be nested, one within another. For instance:
<ol>
<li>the first list item</li>
<li>
the second list item
<ul>
<li>first nested item</li>
<li>second nested item</li>
</ul>
</li>
<li>the third list item</li>
</ol>
You can also make use of paragraphs and headings etc. for longer list items
How to force line breaks
Just occasionally, you will want to force a line break. You do this using
the br element, for example when you want to include a postal address:
<p>ArisHost<br>
8 Rich Avenue<br>
Domain Corner<br>
Los Angeles, CA</p>
The br element never needs an end-tag. In general, elements that don't take end-tags
are known as empty elements.
How to introduce non-breaking spaces
Browsers automatically wrap text to fit within the margins. Line breaks can be introduced
wherever space characters appear in the markup. Sometimes you will want to prevent the browser
from wrapping text between two particular words. For instance between two words in a brand name
such as "Coke Cola". The trick is to use in place of the space character, for example:
Sweetened carbonated beverages, such as Coke Cola,
have attained world-wide popularity.
Linking into the middle of Web pages
Imagine you have written a long Web page with a table of contents near the start.
How do you make the entries in the table contents into hypertext links to the corresponding
sections?
Let's assume that each section starts with a heading, for instance:
<h2>Business Online</h2>
You make the heading into a potential target for a hypertext link by enclosing its
contents with <a name=identifier> .... </a>
<h2><a name="business-online">Business
Online</a></h2>
The name attribute specifies the name you will use to identify the link target,
in this case: "business-online".
The table of contents can now include a hypertext link using this name, for instance:
<ul>
...
<li><a href="#business-online">Business
Online</a></li>
...
</ul>
The # character is needed before the target name. If the target is in a different
document, then you need to place the web address of that document before the # character.
For example if the document is in "http://www.mybusiness.com/", then the link becomes:
<a href="http://www.mybusiness.com/#business-online">Business
Online</a>
In the future, you will eventually be able to define link targets without the need
for the <a> element. The new method is much easier, as all you need to
do is to add an id attribute to the heading, for instance:
<h2 id="night-spots">Business Online</h2>
This method doesn't work for 4th generation or earlier browsers, so it should be used
with care while these browsers are still in use!
Preformatted Text
One of the advantage of the Web is that text is automatically wrapped into lines fitting
within the current window size. Sometimes though, you will want to disable this behavior.
For example when including samples of program code. You do this using the pre element.
For instance:
<pre>
void Node::Remove()
{
if (prev)
prev->next = next;
else if (parent)
parent->SetContent(null);
if (next)
next->prev = prev;
parent = null;
}
</pre>
Which renders as:
void Node::Remove()
{
if (prev)
prev->next = next;
else if (parent)
parent->SetContent(null);
if (next)
next->prev = prev;
parent = null;
}
The text and background colors were set via the style sheet. Note that all line breaks
and spaces are rendered exactly as they appear in the HTML. The exception is a newline
immediately after the start tag <pre> and immediately before the end
tag </pre>, which are discarded. This means that the following two
examples are rendered identically:
<pre>preformatted text</pre>
<pre>
preformatted text
</pre>
Preformatted text is generally rendered using a monospaced font where each character
has the same width. If you define a style rule for the pre element, some browsers forget to
use the monospace font, necessitating the use of the font-family property. For instance if
you want to render all pre elements in green you can define the style rule:
USEFUL LINKS
Hot Tips - Design
We asked 13 HotWired designers - past and present - for their favorite design tips. Today,
we see what seven of them have to say for themselves.
HTML Teaching Tool
Learn, and then practice, all the standard HTML: how to bold, italicize, indent, link,
change font color, and more!
|
|
