HTML Examples

Also see: this in the Midterm Study Guide

Presentation tags
- bold tag <b>
- italic tag <i>
- underline tag <u>
- font tags
  - font face tag: <font face="name of font face">content</font>
    - comic sans ms font face
    - arial font face
    - tahoma font face
    - Old English Text MT font face
    - Jokerman font face
    - garamond font face
    - Freestyle Script font face
    - Franklin Gothic Book tahoma font face
    - Cooper Black font face
  - font size tag: <font size="digit 1 thru 7">content</font>
    - font size="1"
    - font size="2"
    - font size="3"
    - font size="4"
    - font size="5"
    - font size="6"
    - font size="7"
  - font color tag: <font color="color specification">content</font>
    here for the 147 CSS 2 Color Names
    - color="rgb(255,0,0)" red
    - color="rgb(0,255,0)" green
    - color="rgb(0,0,255)" blue
    - color="rgb(255,255,0)" yellow
    - color="rgb(255,0,255)" magenta
    - color="rgb(0,255,255)" cyan
    - color="rgb(63,63,53)" dark gray
    - color="rgb(127,127,127)" medium gray
    - color="rgb(204,204,204)" light gray
      click here for the 147 CSS 2 Color Names
    - color="Cornflower Blue"
    - color="CadetBlue"
    - color="DarkGoldenRod"
    - color="SandyBrown"
    - color="SpringGreen"
- pre tag: fixed width bytes, cr/lf and multiple contiguous spaces are recognized
```
<pre>
1 2 3 4 5 6 7 8 9 0 abc  def   ghi
1   2   3   4   5   jlk  mno   pqr
abc
def
ghi
</pre>
   
```
- center tag: <center>content</center> content
- superscript tag: <sup>content</sup> e.g., E=mc²
- subscript tag: <sub>content</sub> e.g., E=mc₂
structural definition
- headings
  
  Headings using the <h1> tag
  
  Headings using the <h2> tag
  
  Headings using the <h3> tag
  
  Headings using the <h4> tag
  
  Headings using the <h5> tag
  
  Headings using the <h6> tag
dividers
- paragraph tag <p>
  ...some text then we<p>
  insert this content inside a break tag before and after this content<p>
  then we have more text...
- break tag <br>
  ...some text then we<br>
  insert this content inside a break tag before and after this content<br>
  then we have more text...
- horizontal rule <hr>
  makes this horizontal line:
  
  <hr width="100">
  makes this horizontal line that is exactly 100 pixels wide:
- prevent line breaks <nobr> text that will all appear on a single line no matter how wide the browser window </nobr>
  abcdefghijklmnopqrstuvwxysz abcdefghijklmnopqrstuvwxysz abcdefghijklmnopqrstuvwxysz abcdefghijklmnopqrstuvwxysz abcdefghijklmnopqrstuvwxysz abcdefghijklmnopqrstuvwxysz abcdefghijklmnopqrstuvwxysz

lists

unordered lists (i.e., bullets)
```
     <ul>
        <li> first list item
        <li> second list item
        <li> third list item
     </ul>
     
```
looks like this:
- first list item
- second list item
- third list item
Nested lists change the type of bullet used at each level (first disc, then circles, then squares thereafter)
```
<ul>
   <li> first list item (1st level)
   <ul>
   <li> first list item  (2nd level)
   <li> second list item (2nd level)
      <ul>
      <li> first list item  (3rd level)
         <ul>
         <li> first list item  (4th level)
         <li> second list item (4th level)
         <li> third list item  (4th level)
         </ul>
      <li> second list item (3rd level)
      <li> third list item  (3rd level)
      </ul>
    <li> third list item  (2nd level)
    </ul>
   <li> second list item (1st level)
   <li> third list item (1st level)
 </ul>
```
looks like this:
- first list item (1st level)
  - first list item (2nd level)
  - second list item (2nd level)
    - first list item (3rd level)
      - first list item (4th level)
      - second list item (4th level)
      - third list item (4th level)
    - second list item (3rd level)
    - third list item (3rd level)
  - third list item (2nd level)
- second list item (1st level)
- third list item (1st level)
You can specify any bullet type by using the type attribute. like this:
<ul type="disc">
or
<ul type="circle">
or
<ul type="square">

ordered lists

Default order lists use the <ol> tag like this:

<ol>
   <li> first list item (1st level)
   <ol>
   <li> first list item  (2nd level)
   <li> second list item (2nd level)
      <ol>
      <li> first list item  (3rd level)
         <ol>
         <li> first list item  (4th level)
         <li> second list item (4th level)
         <li> third list item  (4th level)
         </ol>
      <li> second list item (3rd level)
      <li> third list item  (3rd level)
      </ol>
    <li> third list item  (2nd level)
    </ol>
   <li> second list item (1st level)
   <li> third list item (1st level)
 </ol>

looks like this:

first list item (1st level)
1. first list item (2nd level)
2. second list item (2nd level)
  1. first list item (3rd level)
    1. first list item (4th level)
    2. second list item (4th level)
    3. third list item (4th level)
  2. second list item (3rd level)
  3. third list item (3rd level)
3. third list item (2nd level)
second list item (1st level)
third list item (1st level)

Alternatively, you can order the lists by using:

<ol type="a"> to get list that order in lower case alphabetic order
<ol type="A"> to get list that order in upper case alphabetic order
<ol type="i"> to get list that order in lower case Roman numeral order
<ol type="I"> to get list that order in upper case Roman numeral order

like this:

<ol type="A">
   <li> first list item (1st level)
   <ol type="a">
   <li> first list item  (2nd level)
   <li> second list item (2nd level)
      <ol type="I">
      <li> first list item  (3rd level)
         <ol type="i">
         <li> first list item  (4th level)
         <li> second list item (4th level)
         <li> third list item  (4th level)
         </ol>
      <li> second list item (3rd level)
      <li> third list item  (3rd level)
      </ol>
    <li> third list item  (2nd level)
    </ol>
   <li> second list item (1st level)
   <li> third list item (1st level)
 </ol>

looks like this:

first list item (1st level)
1. first list item (2nd level)
2. second list item (2nd level)
  1. first list item (3rd level)
    1. first list item (4th level)
    2. second list item (4th level)
    3. third list item (4th level)
  2. second list item (3rd level)
  3. third list item (3rd level)
3. third list item (2nd level)
second list item (1st level)
third list item (1st level)

Further, you can change the starting number by using the start attribute like this:

<ol start=7">
   <li> first list item (1st level)
   <ol start="17">
   <li> first list item  (2nd level)
   <li> second list item (2nd level)
      <ol start="27">
      <li> first list item  (3rd level)
         <ol start="37">
         <li> first list item  (4th level)
         <li> second list item (4th level)
         <li> third list item  (4th level)
         </ol>
      <li> second list item (3rd level)
      <li> third list item  (3rd level)
      </ol>
    <li> third list item  (2nd level)
    </ol>
   <li> second list item (1st level)
   <li> third list item (1st level)
 </ol>

looks like this:

first list item (1st level)
1. first list item (2nd level)
2. second list item (2nd level)
  1. first list item (3rd level)
    1. first list item (4th level)
    2. second list item (4th level)
    3. third list item (4th level)
  2. second list item (3rd level)
  3. third list item (3rd level)
3. third list item (2nd level)
second list item (1st level)
third list item (1st level)

The start attribute does NOT apply to alphabetic or Roman numeral ordering.

Also see this in the Midterm Study Guide

tables

table tag : tables start with a <table> tag and end with a </table> tag
table tag attributes:
- width : specifies the table witdh in pixels or %
- bgcolor : set background color of the entire table
- border : sets the border around the table in pixels
- bordercolor :sets the border color of the table
- cellspacing : specifies the spacing between table cells in pixels
- cellpadding : specifies the spacing between table cell contents and the table cell border in pixels
<table border="2" width="200" bgcolor="rgb(204,204,204)" border="1" bordercolor="rgb(255,0,0)" cellspacing="5" cellpadding="5">
<tr><td>cell 1,1</td><td>cell 1,2</td></tr>
<tr><td>cell 2,1</td><td>cell 1,2</td></tr>
</table>
makes this:

cell 1,1 cell 1,2

cell 2,1 cell 1,2
table row tag : table rows start with a <tr> tag and end with a </tr> tag
table row tag attributes:
- table row width : specifies the table witdh in pixels or %; all row with are the widest row's width
- table row bgcolor : set background color of the entire table row
- table row valign : sets content vertical alignment in the row's cells: top|middle|bottom (default is middle)
- table row align : sets content horizontal alignment in the row's cells: left|center|right (default is left)

table cell tag : table cells start with a <td> and end with a </td> tag

table cell tag attributes:

table cell width : specifies the table cell
table cell bgcolor : set background color of the table cell
table cell valign : sets content vertical alignment in the cell: top|middle|bottom (default is middle)
table cell align : sets content horizontal alignment in the cell: left|center|right (default is left)

Table tag attributes are over-ridden by table row attributes which are over-ridden by table cell attributes

<table border="1" width="400">
<tr width="200" bgcolor="rgb(204,204,0)" align="right">
  <td>                cell 1,1<br>some text<br>some more text</td>
  <td valign="top">   cell 1,2<br>some text</td>
  <td>                cell 1,3<br>some text</td>
  <td valign="bottom">cell 1,4<br>some text</td>
</tr>
<tr bgcolor="rgb(204,204,204)"           align="center">
  <td>                cell 2,1<br>some text<br>some more text</td>
  <td valign="top">   cell 1,2<br>some text</td>
  <td>                cell 2,3<br>some text</td>
  <td valign="bottom">cell 1,4<br>some text</td>
</tr>
<tr bgcolor="rgb(0,204,204)">
  <td>                cell 3,1<br>some text<br>some more text</td>
  <td valign="top">   cell 3,2<br>some text</td>
  <td>                cell 3,3<br>some text</td>
  <td valign="bottom">cell 1,4<br>some text</td>
</tr>
</table>

makes this:

cell 1,1
some text
some more text cell 1,2
some text cell 1,3
some text cell 1,4
some text

cell 2,1
some text
some more text cell 1,2
some text cell 2,3
some text cell 1,4
some text

cell 3,1
some text
some more text cell 3,2
some text cell 3,3
some text cell 1,4
some text

row and column spanning : an attribute of table cells that allows table cells to extend across multiple row and/or cols

Usage is:

...<td rowspan="number of rows spanned by this cell" colspan="number of columns spanned by this cell">

<table border="1" width="400">

<tr>
<td colspan="4" align="center">cell 1,1 spans 4 columns</td>
</tr>

<tr>
<td rowspan="3" align="center">cell 2,1<br>spans<br>3<br>rows</td>
<td>cell 2,2</td>
<td>cell 2,3</td>
<td>cell 2,4</td>
</tr>

<tr>
<td>cell 3,2</td>
<td colspan="2" rowspan="2" align="center">cell 3,3<br>spans 2 rows<br>and<br>2 columns</td>
</tr>

<tr>
<td>cell 4,2</td>
</tr>

</table>

makes this:

cell 1,1 spans 4 columns

cell 2,1
spans
3
rows cell 2,2 cell 2,3 cell 2,4

cell 3,2 cell 3,3
spans 2 rows
and
2 columns

cell 4,2

background color : <tag bgcolor="color specification">

can be used as an attribute if the BODY, TD, TR, and TABLE tags

<table bgcolor="red" border="1">
<tr>
  <td>cell 1,1</td>
  <td>cell 1,2</td>
  <td>cell 1,3</td>
</tr>
<tr bgcolor="yellow">
  <td>cell 1,1</td>
  <td>cell 1,2</td>
  <td>cell 1,3</td>
</tr>
<tr>
  <td bgcolor="blue">cell 1,1</td>
  <td>cell 1,2</td>
  <td bgcolor="green">cell 1,3</td>
</tr>
</table>

makes this:

cell 1,1 cell 1,2 cell 1,3

cell 2,1 cell 2,2 cell 2,3

cell 3,1 cell 3,2 cell 3,3

Also see this in the Midterm Study Guide

forms see this in the Midterm Study Guide
images : <img src="URL of image">
<img src="captsm.gif">
make this:

We can add attributes:
- width or height
  <img src="captsm.gif width="50">
  OR
  <img src="captsm.gif height="50">
  OR
  <img src="captsm.gif height="50" width="20">
  OR
  <img src="captsm.gif height="20" width="50">
  make these:
- image border
  <img src="captsm.gif border="2">
  makes this bordered image:
links <a href="URL">text to click</a>
<a href="http://www.uh.edu">UH Homepage</a>
makes this link:
UH Homepage
You can also use an image rather than text to make a link. Like this:
<a href="http://www.bauer.uh.edu/parks/mis3371.htm"><img src="captsm.gif"></a>
make this clickable image:
special characters : &#?; (where ? is the ISO 8859-1 code) See ISO-8859-1 Reference and Math, Greek and others
Can be either: a number (normally means the location in the ASCII table) or an entity name.
For example, the copyright symbol: © can be © (an ASCII table location number) or an entity name ©
- less than : < : <
- greater than : > : >
- ampersand : & : &
- double quote : " : "
- single quote (apostrophe) : ' : '
- Registered TM : ® : ®
- Registered TM : &#reg :®
- Copyright : © : ©
- Copyright : © : ©
- Non-Breaking Space : a blank byte :   [used to make multiple spaces]
- left arrow : ← : ←
- right arrow : → : →
- up arrow : ↑ : ↑
- down arrow : ↓ : ↓

cell 1,1 some text some more text	cell 1,2 some text	cell 1,3 some text	cell 1,4 some text
cell 2,1 some text some more text	cell 1,2 some text	cell 2,3 some text	cell 1,4 some text
cell 3,1 some text some more text	cell 3,2 some text	cell 3,3 some text	cell 1,4 some text

cell 1,1 spans 4 columns
cell 2,1 spans 3 rows	cell 2,2	cell 2,3	cell 2,4
	cell 3,2	cell 3,3 spans 2 rows and 2 columns
	cell 4,2

cell 1,1	cell 1,2	cell 1,3
cell 2,1	cell 2,2	cell 2,3
cell 3,1	cell 3,2	cell 3,3

Headings using the <h1> tag

Headings using the <h2> tag

Headings using the <h3> tag

Headings using the <h4> tag

Headings using the <h5> tag

Headings using the <h6> tag