<head>
<title> title of this </title>
</head>
<body>
---
----
</body>
</html>
headings can include align value (**Only in
browsers 3.0 +)
Use the paragraph marker to indicates bigger breaks between sections
<p>
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.
<p>
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.
</div>
<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++).
</blockquote>
Ordered lists are enclosed in the <ol> tags. Each item is enclosed in the <li> tags. The browser automatically puts in the sequential labels.
<ol>
You can modify by indicating the type of labeling to be used and the
START item
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
definition
term labeled the <dt> and then the definition data labeled
>dd>.
The defintiion data is indented The whole defintion is enclosed
in
<DL> tags.
<dl>
</dl>
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:
<hr
width = "150" align = "center"/>
You can specify no shading. Also you can mix specs.
<hr
width = "50%" noshade size=4/>
Here are character formats
<I> Italics</I>
<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
indications.
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
over
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
current
browser capabilities. Any amount of text can be controlled by
enclosure
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
red
</font>
<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
#00FF00
<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
bigger than
normal </font>
--
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.
Absolute addressing:
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
Relative links:
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
like this
<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">
---
Targets
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>
------
base
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/" />
------
align
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:
eg
<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.
<p align="center">
<img src="test.jpeg">
</p>
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
these
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.
--------
border
The border option controls the size of the border around the
image
in pixels. 0 is an option to have no border.
<img src= "test.gif" border=8 >
----
lowsrc
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">
---------
alt
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 =
"yellow"
alink= "black">
<body background="backsmall.gif">
- This page created by Stephen
Wilson, Professor Conceptual/Information Arts, SFSU
|