Quick Guide to Basic html

Compiled by Stephen Wilson, Professor,Conceptual/Information Arts, SFSU

General html Specs


Basic Page Elements

<html>

<head>
<title>  title of this  </title>
</head>

<body>

---
----
</body>
</html>


headings

headings should primarily to indicate hierarchial levels of importance.  size should be indicated with font tags or styles.
 

<h1>  THIS IS h1</h1>

<h2>  THIS IS LEVEL 2 </h2>

<h3>  THIS IS LEVEL 3  </h3>

<h4> THIS IS LEVEL 4 </h4>

<h5> THIS IS LEVEL 5</h5>
<h6> THIS IS LEVEL 6 </h6>
--------

headings can include align value     (**Only in browsers 3.0 +)
 

<h3 align = "RIGHT">  THIS IS ALIGNED TO RIGHT </h3>

<h5  align = "center">  THIS IS ALIGNED IN THE center </h5>

Paragraphs and breaks

Use the break  when you want only a single carriage return <br>
The next line goes here.

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 = "RIGHT">
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>


<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>









Use of div tag

Entire sections can be indicated with the div tag (**only browsers 3.0++).  align values can be assinged and Names applied.  The names can be addressed in style sheets and scripting.

 <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 and pre

<blockquote>
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>
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).

Lists

html offers 3 main kinds of lists - ordered, unordered, and definition.

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>

    1 <li> This illustrates the basic ordered list. </li>
    2 <li>Everything is slightly indented </li>
    3 <li> Each item gets a sequential label. </li>
</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>

<dt>Here is a definition title </dt>
<dd>Then here is the explanatory material that would explain it.</dd>

 
<dt>Here is a second defintion title</dt>
<dd>Then here is the second explanatory material.</dd>

 

</dl>


Horizontal Rules <hr>

<hr/> tags insert a horizontal line.

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/>



You can also specify color  <hr width = "50%" color = "red"/> 
** see section below on color names.  Color may not show up in some browsers.






Character Formatting

browsers provide a variety of character formats (specifying a physical appearance) and logical formats (indicating meanings which may be rendered differently by various browsers.

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.
 

< =  &#60; or &lt;
> =  &#62; or &gt;
& = &#38; or &amp;
" = &#34; or &quote;
copyright = &#169;

------
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.


 Standard colors

Here are the 16 standard color names.  Navigator and Explorer also recognize additional sets of names
 



Links

 The basic link can load new page by using the anchor tags.

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/" />


 Images

The basic image tag contains an src listing a url for the image.  The url can be full or relative.
<img src="http://userwww.sfsu.edu/~infoarts/main.gif">

------
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>


backgrounds

You can control the color background and background image .  Use the bgcolor= color name or rgb within the <body> tag to indicate a color.  Use the background= url   within the <body> tag to draw in an image to serve as a backdrop.  The image will be tiled to fill the window.  The color of text and links can also be controlled.  be careful that the combinations you chose are readable.  Also be wary of an over complicated background image that will make text and links hard to read.

<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
(http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu 
- More information about the Conceptual/Information Arts program is available at (http://userwww.sfsu.edu/~infoarts/)
- The url of this page is (http://userwww.sfsu.edu/~infoarts/technical/howtof/wilson.quickhtml.html)