Basic HTML
HTML - "lots of tools/tons of browsers"
·Plain HTML is usable in every browser, doesn't need to be Java
enabled
·if you want control things -> hand-coded HTML is best
HTML provides (HTML 3.2 or greater):
·Text flow around images (Like Microsoft Publisher)
·Paragraph alignment
·Tables (only sure way to format for ALL browsers)
·Clickable maps
·Explicit control over fonts
HTML extensions:
· .htm is for DOS
· .html is for UNIX
GENERIC HTML DOCUMENT
<html> -> should start with this
<head> -> this section is displayed with things like mouse over
commands, not displayed in main browser
<title> TITLE </title> -> page may not be indexed without,
title should be included
</head>
<body> -> this section is what is displayed in main browser window
</body>
</html> -> should end with this
STEPS TO PUBLISH HTML DOCUMENT (UNIX example):
1) create a document using text editor
-notepad
-pico
-MS Word (better save as Text file and then save as .html file)
2) place document in web accessible location
3) verify that document is legal
UNIX at UMD
-use elvis or skye
1) logon and create 'public_html' (mkdir public_html)
2) permit directory and account (does not take away ability to have
private files)
chmod g+r,g+x,o+r,o+x . -> must have space and then period at
end
chmod g+r, g+x, o+r, o+x public_html
3) put files in 'public_html'
skye -> default name is index.html
elvis -> default name is welcome.html
ls -l -> UNIX command to check read/write/others status
chmod g-w, o-w test.html -> command to change permissions
IMPORTANT NOTE: Windows/MS Word is NOT case sensitive while UNIX
is. Keep this in mind when coding.
INFORMATION IN <head> SECTION-----------------------------·
<title> </title> => indexing comes from here
· <base href = "http://www.engin.umd.edu/CIS"> => acts as default "return to"
page
· <meta http-equiv = "content-type" content = "text/html">
· <meta http-equiv = "refresh" content = 1800; URL = "http://.."> => refreshes page after 1800
seconds, URL is page to
refresh to
· <meta name="keywords" content = "CIS, www, 525"> => for search engine indexing,
content contains words to
search for
· <meta name="description" content="desc here">
INTRODUCTION TO FRAMES----------------------
General frames:
<html>
<head>
</head>
<frameset>
<noframes> <= to account for non-frames supporting browser
<body>
</body>
</noframes>
</frameset>
</html>
options:
<frameset rows="40%,60%"> <= replace one with asterisk, uses remaining space
<frame src="something.html" <= or gif or jpg file
<frameset col = "*,*">
<frame src = "file.html">
<frame src = "file.html" name="Main"> <= name assigns a name to the frame
</frameset>
<a href = "intro.html" target = "new" > <= should open new window
-or- target = _blank
-or- target = _top <= replaces top frame
-or- target = _parent
-or- target = _self
To prevent framing of document (Javascript)
<SCRIPT LANGUAGE = "Javascript">
<!-- if (top.frames.length > 0)
top.location.location
//-->
</SCRIPT>
INFORMATION IN <body> SECTION
-----------------------------
· <body background="jpg, gif file" > =>this will tile background with
jpg image
also...bgcolor = "FFFFFF" => specifies background color
text = "FFFFFF" => specifies font color
link = "FFFFFF" (unvisited link) => color for unvisited link
vlink = "FFFFFFF" (visited link) => color for visited link
NOTE: All of the above can be stated in the <body > tag
· <font face="arial" => specifies font to be used
(Netscape and Internet
Explorer 3.0 & above only!)
color="red" => font color
size = 2 > => this is not in pixels,
set amount
· <center> (can also use 'right' or 'left') => used for alignment
· <p> </p> => paragraph => creates paragraph with blank
space above and below
can also do...
<p align = "center"> </p> => creates paragraph like above
as well as aligning text
HEADINGS
--------
<h1> </h1> => heading tags, runs from H1 (largest) to
H6 (smallest)
to format...
<h1> line1 <br>line2 </h1> where <br> is the line break
can also do <h1 align=" ">
· <pre> </pre> => preformatted paragraph that maintains
whitespace from source document, can do
some html tag stuff in here
· <blockquote> </blockquote> => for left and right indent for things such as
long quotes
· <HR> => horizontal rules, divides sections with
horizontal line across browser
LISTS
-----
1) ORDERED LIST
<ol> </ol> => the more of these that are nested, the more
indentations you will get
EXAMPLE:
<ol>
<li> intro </li> => <li> is 'list item'
<li> chap 2 </li>
<li> final </li>
</ol>
Above will display like:
1. intro
2. chap 2
3. final
2) UNORDERED LIST
EXAMPLE:
<ul>
<li> intro </li>
<li> chap 2 </li>
<li> final </li>
</ul>
will display like:
· intro
· chap 2
· final
DICTIONARY
----------
<DL> </DL> => dictionary or glossary list
<DL>
<DT> pizza => term listed here
<DD> definition here => definition listed here
</DD>
<DT> beer
<DD> definition here
</DD>
</DL>
TABLES
------
· Tables better for formatting
<table> </table> =>table tag
EXAMPLE:
<table: border = 1> => change the 1 to 0 for a frameless table
<tr> => table row
<td> one </td>
<td> two </td>
<td> three </td> => table data
</tr>
<tr> <!-Row Two --!>
<td> four </td>
<td> five </td>
</tr>
</table>
Above will display like:
TABLE OPTIONS
<table border = 1
align = " "
width = #pixels or %
cellspacing = #pixels >
EXAMPLE:
<table>
<tr>
<td colspan = "2"> 2 cols </td>
<td colspan = "2"> 2 cols </td>
</tr>
<tr>
<td rowspan = "2" > 2 rows </td>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> D </td>
<td> E </td>
<td> F </td>
</tr>
</table>
Above will display like:
| 2 cols |
2 cols |
| 2 rows |
A |
B |
C |
| D |
E |
F |
<caption align = "bottom"> <= places a caption on a table
</caption>
TABLE ROW FUNCTIONS
-------------------
<tr align = left (right or center also)
valign = top (middle or bottom also)
width = # in pixels
height = # in pixels
nowrap = true or false <= prevents wrapping of text
</tr>
TEXT FUNCTIONS
--------------
Logical styles (older browsers) Physical styles
------------------------------------------------------------------------------------------
<strong> </strong> <b> </b> <= bold
<em> emphasis </em> <i> </i> <=italics
<samp> sample program output </samp> <tt> <tt> <=fixed space font
<code> program code </code>
<u> </u> <=underline
<big> </big> <= increases font 1 size
<small> </small> <= decreases font 1 size
<sub> </sub> <= subscript
<sup> </sup> <= superscript
<strike> </strike> <= strikethrough
<cite> italicized </cite>
LINKING
-------
<a href = "http://----.html">
text, image, link
</a>
If on your own directory: ../ will move up one directory
./ will look in current directory
hrefs can link within a document:
<a name ="COBOL"> <= this means 'COBOL' is somewhere in the document
<a href = "http://george.html#COBOL">
link to strange language </a>
if want to link to picture instead:
<a href = "http://george.html#COBOL">
<img-src = "maxim.gif"> strange link </a> <=this will cause text to be highlighted
A good idea to do for users that don't process pictures:
<img src = "maxim.gif"
alt = "[Image=strangeprofessor]"
align = "top"
width = # in pixels
height = # in pixels
border = # in pixels >
CLICKABLE REGIONS (Maps)
------------------------
<img src = "something.gif"
alt =
width = 385
height = 170
usemap = "#Kansas"
border = 0 >
<map name = "Kansas" > <= this sets us clickable areas
<area href = "0"
shape = "rect"
coord "0,0,192,85"
alt = 0 >
</map>
To bring in an applet:
<applet code="X" <= 'X' needs to be the compiled code!
width =
height =
name =
hspace= <= horizontal space (left, right) for placement of applet
vspace = > <= vertical space (top,bottom)
</applet>
Plug-ins:
<embed src=" " <= avi, wav, or pdf file
height =
width =
autostart = true or false <= default is false
</embed>