Navigation |
|
|
|
|
Design's
|
|
|
Download
|
|
|
|
|
Songs & Movies
|
|
Code's For Website
|
|
|
|
|
|
|
|
|
|
|
|
|
Software Key's
|
|
|
Software+Keygen
|
|
|
|
|
|
|
|
FOUNDATION TAGS
GENERAL COMMENTS: These tags are the foundation of a web page, and as such they must be included in every page. |
Video |
|
|
|
<!DOCTYPE ... |
The doctype 'tells' the browser how to read and interpret the HTML (markup*) code. |
Video |
<html> ... </html> |
Creates the HTML page |
|
<head> ... </head> |
|
|
<title> ... </title> |
Sets the page title |
|
<body> ... </body> |
What you see on the page falls between these tags |
|
About 'markup' : |
Web pages can be written in either HTML or XHTML ... both are 'markup' languages. |
|
COMMONLY USED TAGS
GENERAL COMMENTS: Keeping with the goal of 'real-world-web design', this page of HTML CODES starts with the tags that are by far the most often used.
Note: keep in mind that most tags work in pairs - that is to say, they have an opening tag and a closing tag. Ex: <p> text </p>. |
|
|
|
|
<p>...</p> |
PARAGRAPH TAGS VIDEO |
2:34 |
<a href="URL">...</a> |
HYPER LINK TAG VIDEO |
6:52 |
<div> ... </div> |
DIV TAGS VIDEO |
8:17 |
<span> ... </span> |
SPAN TAGS VIDEO |
2:36 |
<h1> ... <h1> |
Header tag (h1 - h6) |
Video |
comments: header tags are used to create headers (think: 'headlines' or 'titles') and can range in level of importance from 1 to 6; as in <h1> ... </h1> to <h6> ... </h6>. Where h1 is the most important and h6 is the least. |
|
|
|
|
<img src="..." border="0" /> |
Image tag |
Video |
|
|
|
LIST TAGS |
|
|
<ol><li> ... </li></ol> |
HTML LIST TAGS VIDEO |
4:51 |
<ul><li> ... </li></ul> |
comments: both list types are made up of one sub-tag, called the 'list item': <li> ... </li>. List item tag pairs appear once for every item in the list. |
|
|
|
|
<dl><dt>...</dt> <dd>... </dd> </dl> |
Definition List tags |
Video |
comments: made up of two sub-tags - the 'definition title': <dt> ... </dt> and the 'definition data': <dd> ... </dd> tags. |
|
TABLE TAGS
GENERAL COMMENTS: Tables should not be used for page layout; you should be using CSS. Tables should only be used to display tabular data - data (ex: a price list) that you might see in a spread sheet. |
|
|
|
|
<table> ... </table> |
The root table tag - creates the table |
Video |
ROOT TABLE-TAG ATTRIBUTES |
Video |
cellpadding="#" |
Sets amount of space between a cell's border and its contents |
|
cellspacing="#" |
Sets amount of space between table cells |
width="# or %" |
Sets the horizontal width of the table |
|
|
|
SUB TABLE TAGS |
|
<tr> ... </tr> |
Creates a row in the table |
Video |
<td> ... </td> |
Creates a cell in the table row |
Video |
<td colspan=#> |
Sets number of columns a cell should span - defaults to 1 |
|
<td rowspan=#> |
Sets number of rows a cell should span - defaults to 1 |
|
<th> ... </th> |
Creates a cell with the text bold and centered |
Video |
|
|
|
FORM TAGS
GENERAL COMMENTS: Forms are used to collect information from people through a series of text boxes, list and buttons. Once a form is filled in and submitted (transmitted) to the server, a script (like a PHP page) can process this information and do all kinds of things; like store the information in a database or email it to someone.
Forms do nothing more than send the information to the server. You'll need a server-side script (PHP, ASP, CGI) to actually do something with the information.
Read this article to learn more about HTML forms. |
|
|
|
<form method="post/get" action="..." > ... </form> |
Video |
|
|
SUB FORM TAGS |
|
<select name="..." ><option value="...">...</option></select> |
Video |
optional element: 'multiple' - allows user to select more than one item from the select list |
|
|
|
<input type="radio" name="..." value="..."> |
Video |
<input type="checkbox" name="..." value="..."> |
Video |
<input type="submit"> |
Video |
<input type="reset" value="..."> |
Video |
<input type="text" size="..." > |
Video |
<textarea name="..." rows="..." cols="..." > ... </textarea> |
Video |
|
|
<input type="file" name="..." size="..." /> |
Video |
Comment: allows users to select a file to upload with the form. You will still need a server-side script to process the form and 'grab' the file. I would suggest using one of the following server side scripting options: PHP, JSP, ASP, Cold Fusion, and last but not least, CGI.
About CGI: CGI was the first way to process form data on the Internet. It had its day, but its day has long passed. If you do things with CGI (usually with the PERL scripting language,) you will be jumping into into a world of pain! CGI is old, tedious, slow, and much harder to work with than any of the modern languages like PHP and JSP. |
|
|
|
<input type="hidden" name="..." value="..." /> |
Video |
Comment: used to hide information in a form |
|
|
|
<input type="image" src="..." name="..." alt="..." /> |
Video |
Comment: using an image to submit a form |
|
|
|
<fieldset><legend align="left" > ...</legend> ... </fieldset> |
Video |
Comment: used to group form elements |
|
|
|
FORM TAG OPTIONS |
|
tabindex="#" - sets the tab order of form elements |
Video |
accesskey="..." - lets users select items using their keyboard |
Video |
disabled="disabled" - used to disable form elements |
Video |
readonly="readonly" - keeps form elements from being changed |
Video |
MISC. TAGS
GENERAL COMMENTS: What can I say, these are just cool tags that are pretty sweet ... sweet like candy! |
|
|
|
|
<iframe src="page.html" >...</iframe> |
Inline frame tag |
Video |
options: width, height, name |
|
|
|
|
|
<sup> ... </sup> |
superscript tag |
Video |
<sub> ... </sub> |
subscript tag |
Video |
<a href="mailto:emailAddress?subject=..."> ... </a> |
Video |
Comment: creates a link that causes the browser to launch the user's default email program.
About the 'subject' option: used to automatically fill in the 'subject' field in the email program. |
|
|
|
|
<a name="NAME"></a> |
creates target location |
Video |
<a href="#NAME"></a> |
links to target location |
Video |
<br /> |
inserts a line break |
|
CSS CHEAT SHEET - much more to come!
GENERAL COMMENTS: CSS is now the way to style and layout your pages. If you are not familiar with CSS, then you should visit my CSS tutorial website. |
|
|
|
|
class="..." |
assigns a class to a tag |
Video |
Comments: a css class can be applied to many tags on a page. |
|
|
|
|
id=" ... " |
assigns an ID to a tag |
Video |
Comments: a css ID can be applied to only one tag on the page - it is meant to be a unique identifier on the page. Use to 'tag' tags with an ID if you want to uniquely identify it. |
|
|
|
cursor: |
Video |
ex: <a href=”helpPage.html” style="cursor: help"> Help </a> |
|
|
|
cursor: auto; |
N/A |
Returns control to the User Agent |
cursor: crosshair; |
|
Crosshairs, usually used for precision placement |
cursor: default; |
|
The system's default cursor, usually an arrow |
cursor:
pointer; |
|
A hand, used to indicate a clickable object |
cursor: move; |
|
Indicates a moveable object |
cursor: text; |
|
Selectable or editable text |
cursor: wait; |
|
An hourglass, used to show the system is busy and the user should wait |
cursor: help; |
|
A help question mark, to indicate help information |
cursor: e-resize; |
|
Resize right |
cursor: ne-resize; |
|
Resize up and right |
cursor: n-resize; |
|
Resize up |
cursor: nw-resize; |
|
Resize up and left |
cursor: w-resize; |
|
Resize left |
cursor: sw-resize; |
|
Resize left and down |
cursor: s-resize; |
|
Resize down |
cursor: se-resize; |
|
Resize down and right |
|
Comments: css has a bunch of propeties that can do some nifty things - like change the mouse cursor when someone moves their mouse over a tag. |
|
COMMON HTML TAGS THAT SHOULD NOT BE USED
GENERAL COMMENTS: The following is a short list of commonly used tags that should not be used.
Most of these tags can be replaced with CSS. Do yourself a favor if you still use these tags, stop using them and learn CSS!
|
|
|
|
|
<b>...</b> |
Bold tag |
Video |
<i> ... </i> |
Italic tag |
|
<font> ... </font> |
Font tag |
|
<center> ... </center> |
|
|
<applet> ... </applet> |
Used to insert Java applets - mini programs written in Java. Today you should use the <object> tag.
Java applets are just a pain in the neck anyway because of Java runtime compatibility issues ... use Flash MX instead. |
<u> ... </u> |
Underlined text |
|
<frameset> <frame src="..." /> </frameset> |
|
Comments: framesets were largely used to format pages due to the limitations of HTML - limitations that no longer exist. Use CSS and iframes and forget about frames! |
|
|
|
|
|
|
|
|
Today, there have been 26756 visitors (67630 hits) on this page!
|
|
|
|
|
|
|
|