TOPIC: Key Concepts

Basic HTML

Document 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 item 1: description 1 item 2: description 2 item 3: description 3 item 4: description 4 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

Header one

Header Two

Header Three

Header Four

Header Five

Header Six

Order your free School T-Shirt