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.
|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.
Welcome to American Meadow's Equestrian Center. American Meadow's EC is located in Oakland Meadows. (a world I built) We have been working on fully moving there since the beginning of August. We were located in Appaloosa Plains but we were happy to move to a bigger lot. We have a lot of stables here at AMEC including the training stables. August 25th, 2012american meadow's equestrian center. Mountain Meadow Equestrian Center, Maryville, Tennessee. Dedicated horse people supplying the utmost of care for your horse or pony. Horseback Riding in Anchorage, AK. Meadows Equestrian Center is a small, private barn run by Taylor Aulabaugh. She is currently the only trainer but is remarkable and has the experience to help the rider and horse reach their goal. She is currently working on getting her Bachelors Degree in Equine Science. Taylor is also working to complete Equus Online University taught. Applications open on the 9th of August and will be open until the 25th of August. After that we will choose new owners. (applications are currently closed) I'm happy to announce my August foal crop. This month is shared between myself and Alex over at EVA my partner stables. There will be 2 Arabian's, 3 Hanoverian's from myself.
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.|
HTML CHEAT SHEET Berners-Lee invented it back in 1991. Today HTML5 is the standard version and it's supported by all modern web browsers. Our HTML cheat sheet gives you a full list of all the HTML elements, including descriptions, code examples and live previews. Simply scroll down to browse all HTML tags alphabetically or browse tags by their. HTML is the language in which most websites are written. HTML is used to create pages and make them functional. The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you how to build rather than design. Part of Creating Web Pages For Dummies Cheat Sheet. When you’re creating Web pages, you use HTML — a lot! The following sample shows the HTML formatting and codes you use to create headings and titles, lists, lines, and images as well as boldface and italicized type, not to mention how to include a link. The HTML editor on the bottom of the page gives you a live preview as you edit your HTML and CSS code. We have listed the most common code generators. Set up your preferences and easily generate HTML code for iframe, table, link (anchor), list or image.
|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.