BTECH HTML Reference Card

 

 

Text Tags

line break                 <br>

paragraph break     <p>

rule                          <hr>                                         Draws a horizontal line

Headings                 <h3>example</h3>                  h1=largest; h6=smallest

Centering                 <center>example</center>     example

Indented                  <ul>example</ul>                         example

boldface                  <b>example</b>                      example

Italic                                         <i>example </i>                       example

bold italic                 <i><b>example</i></b>                           example

larger font               <FONT SIZE="+1">example</FONT>   example

smaller font             <FONT SIZE="-1">example</FONT>       example

Large letter              <FONT SIZE="+3">E</FONT>xample   Example

subscript                 H<sub>2</sub>O                   H2O

superscript              cm<sup>2</sup>                   cm2

Color text                 <font color="#ff0000">example</font>  example

 

Inline graphics

Display sun.gif                        <img src="sun.gif">            

Graphic on right                      <img align=right src="sun.gif">

Graphic on left                        <img align=left src="sun.gif"> 

Display centered image           <center><img src="sun.gif"></center>

Graphic in folder                     <img src="folder/sun.gif">    

Display image.jpg                    <img src="image.jpg">

Graphic as hyperlink               <a href="page.html"><img src="sun.gif"></a>

 

Hyperlinks

Link to page.html in same directory:
<a href="page.html">LINK TEXT</a>

Link to page.html stored in subdirectory "directoryname":
<a href="directoryname/page.html">LINK TEXT</a>

Link to page.html in higher-level directory:
<a href="../page.html">LINK TEXT</a>

"Absolute" reference to another server (e.g. The White House):
<a href="http://www.whitehouse.gov/">The White House</a>

Link to page.html with sun.gif as a graphic hyperlink:
<a href="page.html"><img src="sun.gif"></a>

 

"Mailto" link to send email to a specified email address:
<a href="mailto:to2@umail.umd.edu">Send email to Tom O'Haver</a>

In each of the above, LINK TEXT is the underlined blue text that you click on.

 

Background and text colors

Replace <BODY> tag with <BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX">

000000 = black                        ffffff = white                           404040 = dark gray

808080 = medium gray            B0B0B0 = light gray                ff0000 = red

ff8080 = pink                           00ff00 = green                        80ff80 = pale green

0000ff = blue                           8080ff = pale blue                   ffff00 = yellow

ffff80 = pale yellow                ff00ff = magenta                     00ffff = cyan

800080 = purple                      401000 = brown                     ff7000 = orange

 

Background patterns

To use xxxx.gif as background pattern, replace <BODY> tag with:
<BODY background="xxxx.gif">

Example

<html>

<head>

<title>Document Title</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

 

<body bgcolor="#FFFFFF" text="#000000">

<p align="center"><b>This is a web Page. </b>

<p align="left">Table:

<table width="200" border="1" cellspacing="0" cellpadding="0">

  <tr>

    <td>TEXT</td>

    <td><a href="http://www.thebeatbox.org">LINK</a></td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>

Image: <br>

<img src="assets/pics/building3.gif" width="348" height="125">

</body>

</html>

Results: