Lab 2 - HTML
Sample HTML Tags





Basic Text Formatting
HTML
Resulting Output
This is regular text
This is regular text 
<b>This is bold text</b>
This is bold text 
<i>This is in italics</i>
This is in italics 
<u>This is underlined</u>
This is underlined


Font Sizes
HTML
Resulting Output
<font size=-2>-2 Sized Font</font>
-2 Sized Font 
<font size=-1>-1 Sized Font</font>
-1 Sized Font 
Regular Sized Font
Regular Sized Font 
<font size=+1>+1 Sized Font</font>
+1 Sized Font 
<font size=+2>+2 Sized Font</font>
+2 Sized Font 
<font size=+3>+3 Sized Font</font>
+3 Sized Font


Font Colors
For more colors see this page.
HTML
Resulting Output
<font color=#000000>Black</font>
Black 
<font color=#FF0000>Red</font>
Red 
<font color=#00FF00>Green</font>
Green 
<font color=#0000FF>Blue</font>
Blue 
<font color=#FFFF00>Yellow</font>
Yellow 
<font color=#FF00FF>Magenta</font>
Magenta 
<font color=#00FFFF>Cyan</font>
Cyan


Background Colors/Images
For more colors see this page.
HTML
Resulting Output
<body bgcolor=#000000>...</body>
 
<body bgcolor=#FF0000>...</body>
 
<body bgcolor=#00FF00>...</body>
 
<body bgcolor=#0000FF>...</body>
 
<body bgcolor=#FFFF00>...</body>
 
<body bgcolor=#FF00FF>...</body>
 
<body bgcolor=#00FFFF>...</body>
 
<body background=buzz.gif>...</body>
 
 
 
 


Paragraph Alignment
HTML
Resulting Output
<p align=center>Centered</p>

Centered 

<p align=left>Left Aligned</p>

Left Aligned 

<p align=center>Right Aligned</p>

Right Aligned 

<p align=justify>Justified</p>

Justified



Lists
HTML
Resulting Output
<ul> <li> Unordered List Item 1 </li>
     <li> Unordered List Item 2 </li>
     <li> Unordered List Item 3 </li></ul>
  • Unordered List Item 1
  • Unordered List Item 2
  • Unordered List Item 3 
<ol> <li> Ordered List Item 1 </li>
     <li> Ordered List Item 2 </li>
     <li> Ordered List Item 3 </li></ol>
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3 
<ul> <li> Unordered List Item 1 </li>
          <ol><li> Nested Item 1a </li>
              <li> Nested Item 1b </li></ol>
     <li> Unordered List Item 2 </li>
     <li> Unordered List Item 3 </li></ul>
  • Unordered List Item 1
    1. Nested Item 1a
    2. Nested Item 1b
  • Unordered List Item 2
  • Unordered List Item 3


Form Items
See the Lab 2 page for more details on forms.
HTML
Resulting Output
<input type=checkbox name=my_checkbox value=1>Checkbox
 Checkbox 
<input type=hidden name=my_hidden  value=10>Hidden
 Hidden 
<input type=radio name=my_radio  value=1>Radio 1
 Radio 1 
<input type=radio name=my_radio  value=2>Radio 2
 Radio 2 
<input type=reset>	
<input type=submit>	
<input type=text name=my_text value="enter text">
 
<textarea name=my_textarea cols=25 rows=5>
  Default Text</textarea>


Misc. Text Formatting
HTML
Resulting Output
<pre>
This is pre-formatted t e x t
        it looks cool, no?
</pre>
 
This is pre-formatted t e x t
        it looks cool, no?
<!-- This is a comment within
  the HTML & can't be seen -->
  
This has a <br> line-break in it.
This has a
line-break in it.
This has a <hr> horizontal-rule in it.
This has a
horizontal-rule in it.