|
<html>
<head>...</head>
<body>...</body>
</html> |
HTML Structure
Basic structure for any HTML document |
|
<title>...</title> |
Document Title
Goes inside the <head>...</head> |
|
<body bgcolor=#XXXXXX> |
Solid Color Background
Color the background of the web page. |
|
<body background=
"filename.gif"> |
Texture File Background
Use a graphic image to repeatedly "tile" and fill the web browser page. |
|
<body
TEXT=#XXXXXX
LINK=#YYYYYY
VLINK=#00HH00> |
Colored Text and Hyperlinks
Color all of the text or hypertext items to any color the reader desires. |
|
Text Formatting |
|
<Hn>...</Hn>
<Hn align=center>...</Hn> |
Heading
Section heading of variable text size, where n=1 to 6. align=center for aligning the heading in the center of the page. |
|
<b>...</b>
<i>...</i>
<tt>...</tt> |
Style
Apply bold, italic, or typewriter (monospaced font) |
|
<address>...</address> |
Address
Italicized and offset text for page footers |
|
<blockquote>...
</blockquote> |
Blockquote
Indents and offsets text for long quotations |
|
<pre>...</pre> |
Preformatted Text
Displays in monsospaced font with all space and carriage returns preserved. |
|
&xxxx; |
Special Characters
Codes for special character sets and diacritical marks |
|
<blink>...</blink> |
Blink
Flashes text in a very annoying manner. |
|
<font size=X>...
</font> |
Font Size
Change the size of a selection of text where X=1-7. Can also use relative size changes ( -1, +2, -1, -2, etc...) to current <basefont=Z> value. |
|
<big>...</big>
<small>...</small> |
Font Size
Change the size of a selection of to a size greater or smaller then the normal sized text. |
|
<font color=#XXXXXX>
...
</font> |
Font Color
Change the color of a selection of text where XXXXXX is the hexadecimal code for the colors RGB values. |
|
<sup>...</sup>
<sub>...</sub> |
Superscript/Subscript
Create superscripts (i.e. x3 + 2xy + y2 = 0) or subscripts (i.e. H2SO4) |
|
Text Breaks / Divisions |
|
<p> |
Paragraph
Forces new paragraph with one blank line separator |
|
<br> |
Line Break
Forces new line without blank line separator |
|
<hr>
<hr width=X size=X
align=left|right
noshade> |
Hard Rule
Forces new line with solid line separator. Optional attributes width specifies the width of the line on the page, where X is absolute number of pixels or "X%" for a width relative to the browser window; size specifies the thickness of the line in pixels; align forces the line to be aligned to a side of the page rather than the center; noshade draws a solid line without 3D shading |
|
<center>...
</center>
<p align=center>...
</p> |
Center Alignment
Aligns everything to the center of the page |
|
<div align=
left|center|right> ... </div> |
Division
Aligns everything to left, center, or right side of page |
|
<table border> ...</table>
<table>...</table>
<table border=X
cellpadding=Y
cellspacing=Z>... </table>
<tr>...</tr>
<td align=left|center|right
valign=top|middle|bottom
rowspan=X colspan=Y
</td> |
Table
Simple table draws single pixel-width border and cell-wall divisions. Omitting the border attribute, or setting border=0 creates an invisble table. Values for border greater than 1 will create a thivker border around the table/ cellpadding is the amount of space (in pixels) between the cell contents and its walls. cellspacing determines the width of the inner cell walls. <tr> are table row defintions and <td> are table data definitions (one cell). Options for the <td> tags are for horizontal and vertical alignment within the cell. rowspan and colspan aatributes can be used to create cells that stretch across more than one other cell. |
|
Lists |
|
<ul> <ol>
<li> <li>
<li> <li>
</ul> </ol> |
Item Lists
Unordered Lists <ul> for bulleted items, ordered lists <ol> for numbered items |
|
<ul type=xxxx>
<li type=xxxx> |
Bullets for Unordered Lists
Over-ride the default bullets:
type=circle ; type=square; type=disc
|
|
<ol type=X>
<li type=X> |
Number Styles for Ordered Lists
Use different characters for lists:
type=1 (1,2,3...); type=A (A,B,C,...); type=a (a,b,c,...); type=I (I,II,III,...)
type=i (i,ii,iii,...)
|
|
<ol start=i>
<li value=j> |
Number Values for Ordered Lists start will begin a list with any positive number. value will renumber the list from the item and following with the new value. |
|
<dl>
<dt> <dd> <dt> <dd>
</dl> |
Descriptive Lists
Lists with text items <dt> and indented definitions <dd> |
|
Graphics |
|
<img src="file.gif">
<img src="file.gif"
alt="###"
align=top|middle|bottom|
left|right
height=x width=y> |
Inline Image
Display a picture within web page. src (source) is the name, file path, or URL for the image file; alt (alternative) is a string of text displayed for non-graphic browsers or users with image loading turned off; align controls relation of image and surrounding text (top/middle/bottom will align ONE line of succeeding text; left/right will place image to side of page and wrap text around it); height and width are the dimensions of the image measured in pixels. |
|
Hyper-Links |
|
<a href="file.htm">
hypertext</a> |
Local Hypertext Link
Link to another document. |
|
URL |
Uniform Resource Locator. Address for Internet resources |
|
<a href="URL">
hypertext</a> |
Internet HyperText Link
Link to another Internet Site, specified by URL |
|
<a name="xyz"<...> |
Named Anchor. Marks a section of text within a document with name "xyz" |
|
<a href="file.htm#xyz">
hypertext</a> |
Link to Named Anchor
Jump to a named anchor within the same or another document |
|
<a href="url">
<img scr="file.gif">
border=0</a> |
Internet HyperGraphic Link
Inline image acts as hyperlink to site specified by URL. Including the border=0 attribute will suppress the display of a bounding box around the image |
|
<a href="mailto:
"doe@xyz.edu">... </a> |
Internet Mail Link
Sets up email message to specified address |
|
<img src="image.gif"
usemap="#map_name">
<map name="map_name">
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL><area shape="rect"
coords="x1,y1,x2,y2"
HREF=URL></map> |
Client-Side Image Map
Clickable image map interpreted by browser. can occur anywhere in this or another HTML file. Coordinates are top left and lower right corners of rectangular shaped region |