HTML is the most basic language of the internet, and allows the programmer to simply display infomation on a webpage. It displays much like this site before CSS was intragrated, for those useres who have been with use
since the begining. It is also important to include this code at the top of everyfile of HTML code. <!doctype html publick "-//w3c//dtd HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">
Tag
Explanation
<html> </html> (The HTML tag)
This is the tag that tells the web browser that it is reading a page that will display on the screen graphically.
<head> </head> (The head tag)
This tag contains the upper part of a webpage. For example, on this webpage where the HTML logo is, it is part of the head tag.
*Note that although you are not required to have the head tag, it is good practice to include it in your code.
<title></title (The title tag)
Like the tag implies, this changes the title, or name of your webpage. This is located either on the active tab or in the upper left hand conner of the browser window.
<body></body> (The body tag)
This tag, just like the body of a paper or a letter, encompasses most of the code and infomation that is displayed on the webpage. For example, everything on this page, except for
the title and the Logo, is written in the body tag of this document.
onload="JavaScriptFunction() or small amount of HTML code"
Tells the browser to execute a small amount of code on completion of loading the page.
onblur="JavaScriptFunction() or small amount of HTML code"
When the HTML page with this code in it is no longer the main screen on the client computer, thus blur, it will preform a specific action (a.ka. the selected screen).
onfocus="JavaScriptFunction() or small amount of HTML code"
Tells the browser to execute a small amount of code, or a Javascript function when the page is the main screen on the client comptuer (a.ka. the selected screen).
Old tag: <b></b> New Tag: <strong> </strong> (The bold tag)
<b> is an the older tag that is now being phased out and replaced with the <strong> tag. What these tags do is make the text bold. Though in most browsers <b> will work
it is highly recommended that you use <strong> since that will work in all browers for sure.
<h1></h1> (The heading tag)
This tag allows for a preset, bold text to be displayed on the webpage. You can place the numbers 1-6 after the h, with h1 being the largest bold font and h6 being the smallest bold font.
For example,
<h1>
<h6>
...
*Note: An extra line is placed directly after the text placed between the open tag and the close tag.
<i></i> (The italics tag)
Italializes font. Example, italic text
<ol></ol> (The ordered list tag)
Tells the browser that there is going to be an ordered list (numbered).
<ul></ul> (The unordered list tag)
Tells the browser that there is going to be an unordered list (bullets).
<li></li> (The list tag)
This tag goes inside of <ol> or <ul>, tells the browser to number or bullet the item in between the open and close tag.
Example of a Unordered list:
Dog
Cat
Example of a ordered list:
Dog
Cat
<dl></dl> (The definition list tag)
Tells the browser that there is going to be a list of definitions.
<dt></dt> (The definition of a term tag)
Goes inside of the <dl> tag and tells the browser that a term is going to be defined.
<table></table> (The table tag)
Tells the browser that there is going to be a table displayed on the page.
<tr></tr> (The table row tag)
Is placed inside of the <table> tag and tells the browser that there is going to be a table row.
<td></td> (The table cell tag)
Tells the browser that there is going to be a cell of infomation. This tag is placed inside of the <tr> tags and any infomation that is placed between the <td> tags
will show up as a cell on the table.
Example of 2x2 table:
Cell one
Cell two
*Note: that there are attributes that can be added to the table, they will be discussed later.
cellpadding="5"(pixels)
Tells the browser how much space to put between the infomation and the walls of the cell. For example:
cellpadding="20"
hi
Hi
hi again
*This attribute goes inside of the table tag and applies to the whole table.
celspan="2 (integer number)"
Makes the cell of a table span across a specified number of columns.
<form></form> (The Form Tag)
Tells the browser that there is going to be a form used. (explain form)
onfocus="JavaScriptFunction() or small amount of HTML code"
Tells the browser to execute a small amount of code, or a Javascript function when the page is the main screen on the client comptuer (a.ka. the selected screen).
onreset="JavaScriptFunction() or small amount of HTML code"
Sets all fields in the form back to the orginal state. Blank or with the orginal text from when the page first loads.
onselect="JavaScriptFunction() or small amount of HTML code"
Detects when a field is selected and performs an action either with JavaScript or a small amount of HTML code.
onsubmit="JavaScriptFunction() or small amount of HTML code"
Detects when the form is submited and executes JavaScript code or a small amount of HTML code.
<input></input> (The input tag)
The input tag tells the browser that there is going to be some type of input. The different input types (attributes) are described below.
<input type='button' value='Name of button'> Tells the browser that the input device, the device to be clicked, is to be a button. Example:
<input type='select' value='item one','item 2'> Tells the browser that the input device is a select list. Example:
*Note: Input fields do not need to be placed inside of forms to work, they may be placed anywhere in the HTML code.
<img src="filepath.imgExtension" alt="descriptonOfImg"> (The Image Tag)
Tells the browser that there is going to be an image on the page. This tag should always be written in the format above for ease of reading and for proper display
on the page.
alt="descriptionOfImg" (Description of an Image)
This provides a description of the graphic if it were not to display and is used to tell blind users what the graphic is.
onclick="JavaScriptFunction() or small amount of HTML code"
Detects mouse clicks within the tag this event is placed.
ondblclick="JavaScriptFunction() or small amount of HTML code"
Detects double mouse clicks within the tag this event is placed.
onmousedown="JavaScriptFunction() or small amount of HTML code"
Detects when the mouse button is depressed within the event is placed.
onmousemove="JavaScriptFunction() or small amount of HTML code"
Detects when the cursor is moved within the tag event is placed.
onmouseout="JavaScriptFunction() or small amount of HTML code"
Detects when the mouse moves outside of the tag the event is placed in.
onmouseover="JavaScriptFunction() or small amount of HTML code"
Detects when the mouse moves over the tag with the event in it.
ondblclick="JavaScriptFunction() or small amount of HTML code"
Detects double mouse clicks within the tag this event is placed.
<hr> (The Horizontal Rule Tag)
Places a horizontal bar across the webpage based on pixes or a percentage. For example:
Horizontal rule 200 pixles wide (<hr width="200">):
Horizontal rule 50% of cell width (<hr width="50%">):
<!-- --> (The Comment Tag)
Comment tag, allows the programmer to place comments inside of the code.
width="percent or number of pixles"
Tells the browser how wide a window, table, etc should be, based on the number of pixles or by a percentage of the window.
height="percent or number of pixles"
Tells the browser how tall a window, table, etc should be, based on the number of pixles or by a percentage of the window.
