HTML Codes Cheat Sheet
This page contains a list of up-to-date HTML tags / codes, complete with comments and mini video tutorials - just click on the corresponding links to launch the video.
This page is a work in progress ... now 40 minutes of free of videos.
Websites you may want to check out:
Web design basics video tutorial: Beginners Web Design
Beginner's tutorial on web design: www.how-to-build-websites.com.
|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.|
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|
|<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.|
|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|
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="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|
|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|
|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.|
|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.|
|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!|
|<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!|
If you’ve read any of my web design articles, you probably picked up on the fact that there are quite a few tags in HTML that need to be forgotten.
You see, HTML and web design was put together on a ‘nerd to use’ (need to use) basis. Basically, when the powers that be (a bunch of nerds) figured we needed to do something in our web pages (like give text color for example,) they came up with a new tag.
Now this approach of creating new tags along the way worked for a while, but it quickly created a big mess that we called HTML. This big mess of tags made web design tedious and time-consuming.
Unfortunately, most web designers still use (and web design courses teach) this ‘bear skins and stone knives’ method of web design … I don’t and so the tags list reflects that.
- 514-932-8091 (10 to 5)
Questions about the videos:
Hosting and domain name support:
- (480) 624-2500
PayPal Customer Support: 1-888-221-1161
Killersites.com has been a PayPal Verified Merchant since 2001. We also accept payment via check or money order.
Please send payment to:
Killersites.com Inc. 4156 Dorchester #2 Westmount, Quebec Canada H3Z 1V1
The more you learn, the more you earn!