10 Things about HTML, 1 big page.
TAG:html
<html>
The Hyper Text Markup Language requires this tag at the top of the code.
</html>
This is the tag that ends the HTML code.
Notice the slash [/] before the tag, this always indicates the ending tag of
the pair of tags that begin or end the use or implementation of that tag.
text
No special tag is needed to place text on the browser screen, it only needs
to be between the html tags.
Example Code:
<html>
Hello World
</html>
Shows This:
Headings Format
h1, h2, h3, h4, h5, h6
Special tags fot text format
<h1></h1> :Begins and Ends the largest Heading(skips a line)
<h6></h6> :Begins and Ends the smallest Heading(skips a
line)
Example Code:
<html>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Note the funny spacing and line breaks.
</html>
Shows This:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Note the funny spacing and line breaks. |
Text Format Tags
b, i, u, sub, sup, p, br, tt
Special tags fot text format
<b></b> :Begins and Ends Bold
<i></i> :Begins and Ends Italic
<u></u> :Begins and Ends Underline
<sup></sup> :Begins and Ends Superscripted
<sub></sub> :Begins and Ends Subscripted
<p></p> :Begins and Ends a Paragraph(skips a
line)
<br> :A line Break(skips to next line, an End tag may skip a line)
<tt></tt> :Begins and Ends Teletype(non-proportional text, all characters same size)
Example Code:
<html>
<p>Text with <sup>Superscript</sup></p>
<p>Text with <sub>Subscript</sub></p>
<p><s>Text in Strikethrough</s></p>
<b>Text in Bold</b><br>
<i>Text in Italics</i><br>
<u>Text Underlined (Never use this)</b><br>
<tt>Text in Teletype(non-proportional takes more space)(Note wrap around)</tt><br>
Text with no special tags.<br>
</html>
Shows This:
|
Text with Superscript
Text with Subscript
Text in Strikethrough
Text in Bold
Text in Italics
Text Underlined (Never use this)
Text in Teletype(non-proportional takes more space)(Note wrap around)
Text with no special tags.
|
Font Format Tags and Attributes
font, size, color, face
<font></font> :Begins and Ends a font change
size="3" :Attribute - 1 is small, 6 is vey large
color="red" :Attribute - Some colors can be named
color="#000000" :Attribute - Hexadecimal value colors, #000000 is
black
face="Verdana, Arial" :Attribute - A specific font(list alternates)
Some font type faces may not exist on the user's computer or browser
Example Code:
<html>
<font color="#000000" size="1" face="Courier New">
font color="#000000" size="1" face="Courier New"(size
1 may have problems)</font><br>
<font color="red" size="2" face="Times New Roman">
font color="red" size="2"
face="Times New Roman"</font><br>
<font color="#006600" size="3" face="Arial">
font color="#006600" size="3"
face="Arial"</font><br>
<font color="yellow" size="4" face="Georgia">
font color="yellow" size="4" face="Georgia"</font><br>
<font color="#00FFFF" size="5" face="Helvetica">
font color="#00FFFF" size="5" face="Helvetica"</font><br>
<font color="pink" size="6" face="Lucida Console">
font color="pink" size="6" face="Lucida Console"</font><br>
font color="pink" size="6" face="Lucida Console"</font><br>
<font color="black" size="3" face="Arial">
<b>Black </b><i>Arial </i>size<sup>3</sup>
Bold-Italic-Superscript
</font><br>
</html>
Shows This:
font color="#000000"
size="1" face="Courier New" (size 1 may have problems)
font color="red" size="2"
face="Times New Roman"
font color="#006600" size="3"
face="Arial"
font color="yellow" size="4" face="Verdana"
font color="#00FFFF" size="5" face="Helvetica"
font color="pink" size="6" face="Lucida Console"
Black Arial size3 Bold-Italic-Superscript
|
Hyper Link
Navigates the browser to a different page on your computer or across the web
The current page closes, but you can return by clicking back in the next page
<a href="URL">On Screen Label</a> :Begins and Ends a link
: The URL may be "http://www.unm.edu/~olit525/mypage.htm"
: The On Screen Label will be a new color and underlined
:Clicking on the label transfers you to a different page
:Remember this Action takes you away from the present page
Example Code:
<html>
Click to change pages <a href="playme.htm">Go to playme</a>
</html>
Shows This:
Images
Images Tags - img, src
<img src="URL"> :Inserts an Image in a page
: The Source URL and image name src="http://www.unm.edu/~olit525/sky.gif"
: There are also alignment, height, and width attributes
Example Code:
<html>
See the sky<br> <img src="sky.jpg">
</html>
Shows This:
See the sky
|
Tables
Table Tags - table, tr, td
<table></table> :Begins and Ends a Table
<tr></tr> :Begins and Ends a table Row
<td>Any cell data</td> :Begins and Ends a table Data cell(place data between these)
Example Code:
<table border="1">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>first</td>
<td>second</td>
<td>third</td>
</tr>
</table>
Shows This:
| one |
two |
three |
| first |
second |
third |
Forms
How users enter data?
What kind of data?
Can we get this data?
Forms
<form NAME=></form> :Begins and Ends a form
Forms allow the user to enter data that can be:
1) Transfered(posted) to the server and processed by a CGI program like PERL
2) Emailed automatically to an email address
3) Processed on the user's browser with Javascript or VBscript interpreter program, and posted,
or Examples like: Quiz graded, or online calculator results without posting to server
<form name="NAME">
A form Name should be a uniq variable name and may be used by a program
Inside the form tags
Input text, textarea, checkbox, target, buttons , select option
FORM input_text
<input type=text name="VariableName" size=20> :User inputs
a line of text
The 20 character size can actually hold more characters
The VariableName should be uniq and may be used by a program
Example Code:
<FORM Name="FORMA">
Enter Your Name:<INPUT TYPE="text" name="myName" size="25">
<br> Try this button:
<INPUT TYPE="reset" >
</FORM>
Shows This:
FORM input_textarea
<textarea name="NAME" cols=40 rows=8></textarea>
:User multi-line input area for text
The 8 lines of 40 character size can actually hold more characters and lines
The Name should be a uniq variable name and may be used by a program
Example Code:
<FORM Name="FORMA">
Enter Address:<textarea name="myAdd" rows="4" cols="40"></textarea>
<br> Try this button:
<INPUT TYPE="reset" >
</FORM>
Shows This:
FORM input_selection
<select name="NAME"> :Begins a pulldown menu so user can
Select an Option of choices.
The Name should be a uniq variable name and may be used by a program
<option> myOption1:Each menu choice must hava a separate text Option.
</select> :Ends the Select list.
Example Code:
<FORM Name="FORMA">
Select Number of Children:<select name="mySelect" >
<option> blank
<option> none
<option> one
<option> two
<option> three
<option> more
</select>
<br> Pick option other than blank and try this button:<INPUT TYPE="reset"
>
</FORM>
Shows This:
FORM input_checbox
<input type="checkbox" name="NAME">:User input checkbox,
toggles on/off
Followed by text choices, may be used in groups, pick MANY.
The Name should be a uniq variable name and may be used by a program
Example Code:
<FORM Name="FORMA">
Click my checkbox:<input type="checkbox" name="myT">I like
Red
<br> Try this button:
<INPUT TYPE="reset" >
</FORM>
Shows This:
FORM input_radiobutton
<input type="radio" name="NAME">:User input bull's-eye radiobutton,
toggles on/off
Followed by text choices, may be used in groups, pick ONE.
The Name should be a uniq variable name and may be used by a program
Example Code:
<FORM Name="FORMB">
Click my radiobutton:<input type="radio" name="myRB"> Single
<br> Try this button:
<INPUT TYPE="reset" >
</FORM>
Shows This:
FORM action_button
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">:User
can click the Button
The Action of pressing the button must be linked with an event program
The Value is a label on the button and a name that may be used by a program
Example Code:
<FORM Name="FORMB" >
Click my button: <input type="button" value="myButton">
I do nothing without a Javascript program
</FORM>
Shows This:
FORM action_reset
<INPUT TYPE="reset" >:User can click this special Button
The Action of pressing the button empties all data entered into the form.
The Action of pressing the button may also be linked with an event program
You can see examples of the [reset] button in some of the previous form examples.
FORM action_submit
<INPUT TYPE="submit" >:User can click this special Button
The Action of pressing the button can post the data entered to a server program
or E-Mail
Study the Mail and POST Actions associated withe Submit, any good HTML or JAVASCRIPT book.
The Action of pressing the button may also be linked with an event program
form_example
Example Code:
<FORM Name="FORMX" >
This form has a little of everything<br>
Enter Your Name:<INPUT TYPE="text" name="myName" size="25"><br>
Enter Address:<textarea name="myAdd" rows="3" cols="40"></textarea><br>
Select Number of Children:<select name="mySelect" >
<option> blank <option> none <option> one <option> two
<option> three <option> more
</select><br>
Click my checkbox:<input type="checkbox" name="myT">I
like Red<br>
Click my radiobutton: <input type="radio" name="myRB">
Single<br>
Click my button: <input type="button" value="myButton">I
do nothing without a Javascript program
<br> This button clears all entries: <INPUT TYPE="reset" >
</FORM>