Sponsors

Looking for something?

If your looking for a post or article but can't seem to find it anywhere, then why not check the archives? All older posts that no longer appear on the frontpage will be archived.

Go to Archives

Top 5 Most popular posts/articles

Entry RSS

Recent Comments/Trackbacks

Comments RSS
HTML Tutorials
Articles
CSS Tutorials
Website Development Tools
Resources

HTML Quick List

September 12th, 2008 Tutorials, XHTML 4 Comments

- Post was last modified on June 3rd, 2009.
post-thumb

Here is probably one of the most effective ways of remembering key elements and attributes by using a quick list. We explain various elements and attributes in tutorials but wouldn't it be nice to have a page that lists every HTML tag, element and attribute with explanation of what they are? The HTML quick list will do just that, each element and attribute in HTML is listed with a explanation and of course a example of it's use. Dive into the HTML quick list as your about to get everything downloaded into your brain!

The basic HTML structure - This is the structure that any html document must follow to be proper HTML. It is crucial that it is not overlooked:

<html>
<head>
<title>HTML Document</title>
<body>
Webpage content here.....
</body>
</html>

Header elements - Headers can be set in HTML using header elements using the scale of h1 - h6 (h1 being the biggest and h6 being the smallest):

<h1>I am the biggest header</h1>
<h2>I am the second biggest header</h2>
<h3>I am the third biggest header</h3>
<h4>I am the fourth biggest header</h4>
<h5>I am the fifth biggest header<h5>
<h6>I am the smallest header of them all</h6>

Text elements - Text elements in HTML are elements you must use in order to place text content within your HTML properly:

<p> - Creates a automatic paragraph spacing when placed within text
<hr> - Generates a line (horizontal rule) that could be used as a content seperator
<br> - Creates a line break that forces any content below the line break down by one line
<pre> - Makes any content within preformatted

Text styles - Styles can be applied to text in HTML to make them differ from other text content on a webpage

<b> - Makes text bold
<i> - Makes text italic
<u> - Makes text underlined
<strong> - Makes text strong
<em> - Makes text emphasized
<strike> - Makes text to appear with a line strike though it

Anchor elements - To generate links in HTML you would use the anchor tag

<a href="http://google.com">Google</a> - This is a anchor text link and clicking on it would take you to google

<a href="http://google.com"><img src="image.gif"></a> - This is a anchor link combined with a image. The image would become clickable and it would take you to the url specified in the href

<a href="mailto:someone@microsoft.com">Email Link</a> - This is a anchor link using the property mailto. The mailto property defines the link as a email address, so when clicking on it, the clients default email program will automatically load up and open a blank message with this email address in the href in the To field

<a name="story">My Story</a> - Creates a place marker to where the below link will jump to

<a href="#story">Jump to my story</a> - Using a standard link and having # followed by the name of the title (In this case it's "story") will allow this standard link to move the page to the location of the <a name="story">My Story</a>

Frames - HTML can use frames to produce content

<frameset> - Defines that a frame is going to be produced
<frame> - Defines what frame this tag is

Example:

<frameset cols="20%,80%">
<frame src="page1.htm">
<frame src="page2.htm"
</frameset>

Lists elements - You can create lists in HTML. There are few different list types.

<ul> - Creates a un-ordered list (Bullet point style)
<li> - Followed after the <ul> tag to create the lists content

Example:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<ol> - Creates a ordered list (Numbered list)
<li> - Followed after the <ol> tag to create the lists content

Example:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<dl> - Creates a defition list
<dt> - Definition Term
<dd> - The definition of the term above

Example:

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Second Term</dt>
<dd>Definition</dd>
</dl>

Tables - Can be created in HTML to produce data in a organised format

<table> - Creates a table
<tr> - Structures the below tags to form a correct table
<th> - Creates a table header
<td> - Table content goes here

Example:

<table border="1">
<tr>
<th>Table Column 1</th>
<th>Table Column 2</th>
</tr>
<tr>
<td>Data for table column 1</td>
<td>Data for table column 2</td>
</tr>
</table>

Forms - Can display various content in different ways such as drop down menus and input fields

<form> - Creates a form enviorment
<input> - Defines what input the form will be

Input types:

<input type="text"> - Creates a text field
<input type="password"> - Creates a password field
<input type="checkbox"> - Creates a checkbox
<input type="radio"> - Creates a circular checkbox button
<input type="submit"> - Creates a submit button
<input type="reset"> - Creates a reset button
<input type="hidden"> - Makes input information within it hidden

Example:

<form action="http://www.nonexistantpage.com/login.php" method="post">
<input type="text" name="username" value="user" size="30" maxlength="50">
<input type="password">
<input type="submit">
</form>

<select> - Creates a drop down menu
<option> - Creates a drop down option within the menu

Example:

<select>
<option selected>Select option:
<option>Option 1
<option>Option 2
<option>Option 3
</select>

<textarea> - Creates a text box

Example:

<textarea rows="60" cols="20">This produces a nice text box</textarea>

Other Elements - Any other elements that HTML uses

<!-- This is a comment --> - This text will not be displayed in a browser but can be seen in a pages source code

<blockquote> - Automatically formats text to a quote format

Example:

This is my famous quote of the day:
<blockquote>Well I'll be damned</blockquote>

<address> - Formats content within the tag to a address format that you may find on a letter

Example:

<address>
House number and road<br>
Town<br>
City<br>
</address>

4 Reader Comments, Why not join the party?

Leave a Reply





Please Note:

Comments are moderated by both human and automatic resources, to help control the amount of spam comments, as well as unsuitable comments. When you post a comment it should appear instantly, but a comment may be held for moderation if it is deemed suspect for a variety of reasons such as spam, or contains content that may be unsuitable for display. If this is the case you will be notified when you post your comment. Comments are reviewed on a daily basis. For information about comments on James' Blog please click here to read the comments policy.