TOPIC: Key Concepts
Basic HTMLDocument Structure
HTML Tags Example

<html>
<head>
<title>Title for top menu bar </title>
</head>
<body>
Main Content
</body>
Simple Content Formatting
HTML Tags   Example
  <h1>Header one</h1>    

Header one

 
  <h2>Header Two</h2>    

Header Two

 
  <h3>Header Three</h3>    

Header Three

 
  <h4>Header Four</h4>    

Header Four

 
  <h5>Header Five</h5>    
Header Five
 
  <h6>Header Six</h6>>    
Header Six
 
  Normal size text     Normal size text  
  <u>Underlined Text</u>     Underlined Text  
  <b>Text that is Bold</b> and text that is not bold   Text that is Bold and text that is not bold  
  <i>Text is italics </i>     Text is italics  
  A hard rule <hr> is a horizontal line    A hard rule
is a horizontal line  
The FONT tag The font tag can be used to set the color of text using the color option. Color may be specified using many defined text-colors such as red
HTML Tags   Example
<font color="red">This text will be red</font>
or may be specified using a tripple of rgb hex-pairs to specify an amount of red, green, and blue.
<font color="#5566AA">This as "55" red, "66" green, and "AA" blue </font>
This text will be red
or may be specified using a tripple of rgb hex-pairs to specify an amount of red, green, and blue.
This as "55" red, "66" green, and "AA" blue

The font tag can also be used to set size of the font, either to a more absolute pt size or a size relative to the default point size. tr>
HTML Tags   Example
This is a normal size font and this <font size=+2> text is +2 bigger</font>
This is a normal size font and this text is +2 bigger
This is a normal size font and this <font size=-2> text is -2 smaller</font>
This is a normal size font and this text is -2 smaller

The font tag has additional options; once you reach a certain point with HTML development you will want to use style sheets instead of many of the html tags.
Basic TABLEs A Table can be created using the <table> and </table> tags. Each row begins with <tr> and ends with a </tr> tag. Each row is made up of one or more columns using the <td> and </td> tags. This is an example of a one-row, two-column table:
HTML Tags   Example
<table border=1>
<tr><td>Row one, column 1</td>
     <td>Row one, column 2</td>
     </tr>
</table>
Row one, column 1 Row one, column 2


Table headers can be specified using <th> and </th> tags instead of <td> and </td> tags. Generaly the text between the <th> and </th> tags will be displayed as bold and centered. This is an example of a two-row, three-column table using table headings.
HTML Tags   Example
<table border=1>
<tr><th>Heading for Column 1</th>
      <th>Heading for Column 2</th>
     <th>Heading for Column 3<</th>
      </tr>
     <td>Data col two</td>
     <td>Data col three</td>
     </tr>
     <td>More data col two</td>
     <td>More data col three</td>
     </tr>
</table>
Heading for Column 1 Heading for Column 2 Heading for Column 3
Data col one Data col two Data col three
More data col one More data col two More data col three


There are additional table options, such as setting a table to have no border: <table border=0> or a thicker border <table border=4>.


Columns can be combined using the colspan=2 option, as shown below:
HTML Tags   Example
<table border=1>
<tr><th>Heading for Column 1</th>
      <th>Heading for Column 2 </th>
     <th>Heading for Column 3 </th>
      </tr>
<tr><td>Data col one</td>
     <td colspan=2>Data col two spanning into col 3 </td>
     </tr>
 <tr> td>More data col one</td>
     <td>More data col two</td>
     <td>More data col three</td>
     </tr>
</table>
Heading for Column 1 Heading for Column 2 Heading for Column 3
Data col one Data col two spanning into col 3
More data col one More data col two More data col three


Cells between rows can be combined using the rowspan option as shown below:
HTML Tags   Example
<table border=1>
<tr><th>Heading for Column 1</th>
      <th>Heading for Column 2</th>
     <th>Heading for Column 3</th>
      </tr>
<tr><td rowspan=2>Data col one
spanning into the next row.</td>
     <td>Data col two</td>
     <td>Data col three</td>
     </tr>
<tr><td>More data col two</td>
     <td>More data col three</td>
     </tr>
</table>
Heading for Column 1 Heading for Column 2 Heading for Column 3
Data col one
spanning into the next row.
Data col two Data col three
More data col two More data col three

Lists
Unordered Lists
HTML Tags   Example
<ul>Unordered List
    <li><b>item 1</b>: description 1
    <li><b>item 2</b>: description 2
    <li><b>item 3</b>: description 3
    <li><b>item 4</b>: description 4
    <li><b>item 5</b>: description 5
    </ul>
    Unordered List
  • item 1: description 1
  • item 2: description 2
  • item 3: description 3
  • item 4: description 4
  • item 5: description 5

Ordered Lists
HTML Tags   Example
<ul>Ordered List
    <li><b>item 1</b>: description 1
    <li><b>item 2</b>: description 2
    <li><b>item 3</b>: description 3
    <li><b>item 4</b>: description 4
    <li><b>item 5</b>: description 5
    </ol>
    Ordered List
  1. item 1: description 1
  2. item 2: description 2
  3. item 3: description 3
  4. item 4: description 4
  5. item 5: description 5
Basic Form Elements HTML forms collect data from the user and send the collected data to a web server, or perform another specified action. The main fields of the
tag are method=post or method=get and the action=action_to_perform. For example:
HTML Tags   Example
<form method=post action=prog0.php>
   details of a form
 <input type=submit>
 </form>
details of a form
When the user presses the submit button all form data will be sent to the server, where a program named prog0.php will be executed, and passed all of the fields send by the form. The web browser will send the data to the server as a list of name=value pairs. These are the most common types of form elements to collect user data. All <input> tags should use the name="fieldName" specification so that input will be passed to the form's action,
HTML Form Field Tags   Sample HTML   Example
Text field
Accepts a text string, the length of the textbox can be specified.
<input type=text size = 5>
Textarea
A multi-line Text Block where the size of the area can be specified and treated as one message field.
<textarea name="message" rows="5" cols="48" ></textarea>>
Submit Buttons
When a submit button is pressed the form will perform some action - usually the action that is specied by the <form action=program> field.
<input type="submit" value="Submit">
Radio Buttons
Radio buttons allow the user to make a single selection among multiple choices. When one radio button is selected it will un-select any previous selection. Radio buttons can be grouped by using the same name in the input tag and specifying different values.
<input type=radio name=size value="s">Small
<input type=radio name=size value="m">Medium
<input type=radio name=size value="l" checked>Large
<input type=radio name=size value="xl">XL
Small
Medium
Large
XL
Check Boxes
Check boxes are used to allow the user to make selections where the selection of one check-box is independent of selecting other check-boxes. Each input field is given its own name. Name=value pairs for checkboxes are usually sent to a server when the user checks the check-box.
<input type=checkbox name=pens value="yepper">Pens (2)
<input type=checkbox name=folder checked>Two-pocket Folder
Pens (2)
Two-pocket Folder
Pull-down Select Box
The <Select> input type provides the user with a pull-down list of available choices. The choice selected from the <option> field becomes the value of the select box. Only one item may be selected.
<select name=color>
<option value="White">White</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
</select>

Pull-down Select Box with multiple selections
<select multiple > input type provides the user with a pull-down list of available choices and allows the user to selected one or more options.
<select name=otherCar[] multiple size=4>
<option value="mono"gt;Monogrammed Front</option>
<option value="name"gt;Last Name on Back</option>
<option value="strip"gt;Black Stipe on Sleves</option>
<option value="hood"gt;Hood</option>
<option value="vneck"gt;V-neck</option>
</select>
Basic Form Example
HTML Tags   Example
Sample HTML Form
<h2>Order your free School T-Shirt</h2>
<form action="/IBCS/T2/HTML/prog0.php" method="post">
<p><strong>Name:</strong><br>
<input type="text" name="user"></p>
<p><strong>Enter Shipping Information:</strong><br>
<textarea name="message" rows="5" cols="48" ></textarea>
</p>
Shirt Size:<br>
<input type=radio name=size value="s">Small
<input type=radio name=size value="m">Medium
<input type=radio name=size value="l" checked>Large
<input type=radio name=size value="xl">XL
<p>
Additional Items with Mascot:<br>
<input type=checkbox name=pens value="yepper">Pens (2)
<input type=checkbox name=folder checked>Two-pocket Folder
<br>
<p></p>Shirt Color
<select name=color>
<option value="White">White</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
</select><p>
<p> Select additional options<br>
<select name=otherCar[] multiple size=4>
<option value="mono">Monogrammed Front</option>
<option value="name">Last Name on Back</option>
<option value="strip">Black Stipe on Sleves</option>
<option value="hood">Hood</option>
<option value="vneck">V-neck</option>
</select>
<br>
<input type="submit" value="Submit">
</form>
Sample HTML Form

Order your free School T-Shirt

Name:

Enter Shipping Information:

Shirt Size:
Small Medium Large XL

Additional Items with Mascot:
Pens (2) Two-pocket Folder

Shirt Color

Select additional options