<title> title of this </title>
headings can include align value (**Only in
browsers 3.0 +)
Use the paragraph marker to indicates bigger breaks between sections
Here is the next line
In browsers before 3.0 often the <p> and <br> tags were used without an ending tag. Now the specs call for enclosing the text with opening and closing tags.
Here is some text that represents a paragraph. It needs to run on for several lines so it can illustrate the method of enclosing text with the paragraph tags. </p>
The paragraph tag can now include align attribute. (**browsers after 3.0+)
<p align = "center">
Here is some text that represents a paragraph. It needs to run on for several lines so it can illustrate the method of enclosing thext with the paragraph tags. </p>
<div align="center" NAME="intro.section">All this text will be centered until the close of the div tag.
That will happen after this line.
<blockquote>The preformatted tag <pre> has the special property of maintaining all spacing and returns without the requirement for html tags. For example, it will keep these spaces. Normal html would eliminate them. (** note the pre and blockquote are deprecated in favor of style sheets and may not be supported after html 4).
blockquote will enclose text. Usually is rendered slightly indented. Can include the align attribute and be named so it can be manipulated by stylesheets (** bvrowsers 3.0++).
Ordered lists are enclosed in the <ol> tags. Each item is enclosed in the <li> tags. The browser automatically puts in the sequential labels.
You can modify by indicating the type of labeling to be used and the
Choises include numbers, letters, small letters, and roman numerals. You can also arbitrarily indicated a start to the sequence. Numbers are the default. They are indicated like this:
<ol type="A" > <ol type="I" > <ol type="a" start = "d">
Unordered lists are enclosed in the <ul> tags. Each item is enclosed in the <li> tags. The browser automatically puts in the markers.
You can modify by indicating the type of markers to be used
Choises include circles, squares, and discs. Circles are the default. They are indicated like this:
<ul type="square" > <ul type="disc" >
Definiton lists create a glossary kind of entry. The
term labeled the <dt> and then the definition data labeled
The defintiion data is indented The whole defintion is enclosed
You can specify thickness in pixels <hr size =8/>
You can specify length in pixels or percentages via the width attribute: <hr width = "50%" />
You can specify alignment for those that don't span whole window:
width = "150" align = "center"/>
You can specify no shading. Also you can mix specs.
width = "50%" noshade size=4/>
Here are character formats
<b> bold </b>
<u> Underlined (careful - may confuse standard link indications) </u>
<STRIKE> Strikethrough </STRIKE>
<sup> basetext Superscript </sup>
<sub> basetext Subscript </sub>
<big> Increased size </big>
<small> Descreased size from standard </small>
Here are Logical formats
<em> Emphasized </em>
<strong> Strong </strong>
<cite> Cite </cite>
< CODE> Code < /CODE>
<dfn> Definiton </dfn>
<kbd> Keyboard </kbd>
<samp> Sample </samp>
< var> Variable <var>
Characters that are part of tags and special formats need special
Many more are available online - for example european language marks.
< = < or <
> = > or >
& = & or &
" = " or "e;
copyright = ©
Advanced font tags. <font>
Starting with browsers 3.0 & 4.0, much more explicit control
fonts became available. colors, sizes, and font families could be
indicated. With style sheets even more control is available - for
example, point sizes. Coverage is not standardize so check
browser capabilities. Any amount of text can be controlled by
in the font tag. be careful about choices that are invisible with
the background you choose. Also be careful not to interfere with
the conventions that indicate links.
**Note the use of color and size in font tag is deprecated in favor of style sheets and may disappear in future html standards; it is still recognized in html 4
color can be indicated via one of the 16 standardized names or via RGB indications"
**see official color names below. Also note that there is a palette of 216 "safe" colors that will render on most systems. Web-safe palette
<font color="RED"> This is an example of
<font color= "#009900"> This is example of green specified in RGb format (hexadecimal duplets for each color) </font>
Here is sample of color disappearing into grey with intense green
<font color = "#00FF00"> Here is a sample of a bad color choice. This light green disappears with grey background. </font>
size can be indicated by indicating one of the relative sizes 1 = smallest 7 = largest
<font size= 7> This is large font <font>
<font size= 2> This is small font <font>
size can also be indicated relative to the starndard size font by using + and -
<font size = "+1"> This size is slightly
You can change the basic font for the document. The browsers assume size 3. You can create a <bASEfont = "2"> tag placed in the <head> section to reset this for the whole document.
For example you could visit our Conceptual/Information Arts page with this link. <A href = "http://userwww.sfsu.edu/~infoarts/welcome.html"> Learn about CIA program </a>
Learn about our CIA program
If a page existed in the same directory as the current page, you can omit the whole specification and concentrate on the file name only. <a href = "index.html"> Index to CIA program </a>
Relative links into subdirectories.
The relative link can also specify subdirectories using the / to indicate path:
<a href = "technical/howtoindex.html"> How to guide </a>
Links to particular sections:
The link can go to a marker in the document if the author has placed one with the NAME tag
<a href = "imagehow.html#jpegexplain"> JPEG explanation </a>
The author would have had to have placed a name tag in the document
<a NAME="jpegexplain"> anytext for viewer to see </a>
types of links
Documents to link to a variety of Internet resources
Http, file, Ftp, gopher, mailto, news, telnet
colors of links
Default link colors can be controlled by tags placed in body tag. Use standard names or rgb hexidecimal indications for colors. be careful about color combinations that are impossible to read. LINK means possible link; ALINK means the color it turns temporarily when clicked; and VLINK means the links already visited.
<body link="blue" alink="red" vlink = "#009A00">
Links can arrange to load pages into a specific frame if a frameset has been set up and frames given names. See later section on frames.
<A href="contactinfo.html" target = "bottomsection"> Contact info </a>
NAMES and IDs
Links can be addressed by stylesheets and scripting if given names or ids.
<A href="contactinfo.html" NAME = "contactlink"> Contact info </a>
The whole document can be forced to use a particular base URL to use for relative linking.
The base tag is put in the head section and all relative links build on this stem.
<base href="http://www.sfsu.edu/" />
The img tag can contain a variety of options. The align tag can control where text appears next to the image - at the top, middle, or bottom.
<img src="test.gif" align="top"> or "middle" or "bottom"
Netscape & IE offer some other non standardized options:
<img src="test.gif" align="Texttop">
"Texttop" puts the top of image even with tallest text. "baseline" puts the bottom of image at bottom of text.
"Absmiddle" puts the text in the absolute middle of all text & images. "Absmiddle" puts it in the absolute middle.
To align images in the center use the <p align="center"> or <div align="center"> tags to enclose the image. Using align="center" within the tag can be unclear.
align = LEFT and RIGHT places the image at the left or right border
and allows text to fill the space next to the image. Without
options, the text will jump below the image if it runs on.
<img src="test.jpeg" align= "RIGHT">
You must use the <br clear="RIGHT"/> (or "ALL" or "LEFT") to force text to skip below an image that is aligned right or left (because the text will try to fill the space next to the image otherwise).
height & width - hspace & vspace
These options inside the img tag can control size and pixel buffer size.
<img src= "test.gif" height="240" width="180"> will force the image to any pixel size you want including strange distortions. It is advisable to include the height & width opitons even if you are rendering the image at its real size. Specifying the size lets the browser lay out everything even before the image loads.
<img src= "test.gif" hspace =10 vspace=8 > sets up a 10 pixel buffer around the right & left side of the image and a 8 pixel space on the top and bottom.
The border option controls the size of the border around the
in pixels. 0 is an option to have no border.
<img src= "test.gif" border=8 >
You can indicate a small, quickloading, low-res image that will be loaded first to occupy the image space while the real image is loading
<img src= "test.gif" lowsrc = "lowtest.gif">
You can indicate text that will load instead of the image if people have non graphic browsers or have image loading turned off. It also is essential for visually impaired users who rely on speech synthesizers to read text.
<img src= "test.gif" alt="Image of the art building at SFSU">
CLASS - NAME - ID
You can include these options to make the image available for style sheet control or scripting access
Image as link
The image can become a link by including it inside <a> anchors. The user can click on the image to be transported to the indicated url. Typically a border appears around the image. The border can be omitted by using the border=0 option.if desired.
<a href="index.html"> <img src ="Description of links" border=0> List of Links </a>
<body bgcolor="#CC0087" text="red" link = "blue" vlink =
- This page created by Stephen
Wilson, Professor Conceptual/Information Arts, SFSU