CIS525 Lecture #2 Notes September 11, 2000
<![CDATA[
HTML - REVIEW
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
----------------------
<html>
<head> </head>
<frameset>
</frameset>
<no frame> => addresses browsers that do
<body> not support frames
</body>
</noframe>
</html>
NOTE: Replace <frameset> with <script> and <noframe> with <noscript> to support Javascript.
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
· Can specify option in for how items should be numbered (1,2,3 or I, II, III) as well as stating
what number list should start at (ex. Start with 3 instead of 1)
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:
]]>
<![CDATA[
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 |