Saturday, April 9, 2011

HTML Tutorial

HTML enables us to create forms. This is where our websites can become more than just a nice advertising brochure. Forms allow us to build more dynamic websites that allow our users to interact with it.
An HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from a preset options.
In HTML, a form is defined using the <form></form> tags. The actual form elements are defined between these two tags.

The Input Tag

This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.

Text

Text fields are used for when you want the user to type text or numbers into the form.

<input type="text" />

Radio Buttons

Radio buttons are used for when you want the user to select one option from a pre-determined set of options.

<input type="radio" name="lunch" value="pasta" /><br />
<input type="radio" name="lunch" value="rissotto" />

Checkboxes

Checkboxes are similar to radio buttons, but enable the user to make multiple selections..

<input type="checkbox" name="lunch" value="pasta" /><br />
<input type="checkbox" name="lunch" value="rissotto" />

Submit

The submit button allows the user to actually submit the form.

<input type="submit" />

Select Lists

A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.
The select list is created using the select in conjunction with the option tag.

<select>
  <option value ="sydney">Sydney</option>
  <option value ="melbourne">Melbourne</option>
  <option value ="cromwell">Cromwell</option>
  <option value ="queenstown">Queenstown</option>
</select>

Form Action

Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.
Creating an action page is outside the scope of this tutorial. In any case, many web hosts provide scripts that can be used for action page functionality, such as emailing the webmaster whenever the form has been completed. For now, we will simply look at how to submit the form to the action page.
You nominate an action page with the action attribute.
Example HTML Code:

<form action="/html/tags/html_form_tag_action.cfm" method="get">
First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>

This results in:

Oh, one last thing. You may have noticed the above example uses a method attribute. This attribute specifies the HTTP method to use when the form is submitted.
Possible values are:

get (the form data is appended to the URL when submitted)
post (the form data is not appended to the URL)

Providing this attribute is optional. If you don't provide it, the method will be post.

HTML Tables

<table>
<tr>
<td> this is first column  </td>
<td> this is my column second column </td>
</tr>
</table>



this is first column this is second column

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

In HTML, frames enable you present multiple HTML documents within the same window. For example, you can have a left frame for navigation and a right frame for the main content.
Frames are achieved by creating a frameset page, and defining each frame from within that page. This frameset page doesn't actually contain any content - just a reference to each frame. The HTML frame tag is used to specify each frame within the frameset. All frame tags are nested with a frameset tag.
So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files - 1 file for each frame, and 1 file to specify how they fit together.

Creating Frames

Two Column Frameset

HTML Code:

The frameset (frame_example_frameset_1.html):
The left frame (frame_example_left.html):
The right frame (frame_example_right.html):

<html>
<body style="background-color:yellow">
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>

<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left.html).</p>
</body>
</html>

<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
  <frame src ="frame_example_left.html" />
  <frame src ="frame_example_right.html" />
</frameset>
</html>

Add a Top Frame

You can do this by "nesting" a frame within another frame.
HTML Code:

The frameset (frame_example_frameset_2.html):
The top frame (frame_example_top.html):
(The left and right frames don't change)

<html>
<body style="background-color:maroon">
<p>This is the Top frame (frame_example_top.html).</p>
</body>
</html>

<html>
<head>
<title>Frameset page</title>
</head>
<frameset rows="20%,*">
  <frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
  <frame src ="/html/tutorial/frame_example_left.html" />
  <frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>

Remove the Borders

You can get rid of the borders if you like. Officially, you do this using frameborder="0". I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the frameborder, border, and framespacing attributes.
HTML Code:

The frameset (frame_example_frameset_3.html):
(The left, right, and top frames don't change)

<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
  <frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
  <frame src ="/html/tutorial/frame_example_left.html" />
  <frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>

Load Another Frame

Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).
This is achieved using the name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the target attribute.
Tip: You could use base target="content" at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.
HTML Code:

The frameset (frame_example_frameset_4.html):
The left frame (frame_example_left_2.html):
The yellow frame (frame_example_yellow.html):
The lime frame (frame_example_lime.html):

<html>
<body style="background-color:Lime">
<p>This is the lime frame (frame_example_lime.html).</p>
</body>
</html>

<html>
<body style="background-color:yellow">
<p>This is the yellow frame (frame_example_yellow.html).</p>
</body>
</html>

<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left_2.html).</p>
<p>
<a target="content" href="frame_example_yellow.html">Yellow</a><br />
<a target="content" href="frame_example_lime.html">Lime</a>
</p>
</body>
</html>

<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">
  <frame src ="/html/tutorial/frame_example_left_2.html" />
  <frame name="content" src ="/html/tutorial/frame_example_yellow.html" />
</frameset>
</html>

Tag Reference

Here's some more info on the above tags.

The frameset Tag

In your frameset tag, you specify either cols or rows, depending on whether you want frames to go vertically or horizontally.

Attribute	Description
rows	Specifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100%
cols	Specifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100%

The frame Tag

For each frame you want to display, you specify a frame tag. You nest these within the frameset tag.

Attribute	Description
name	Assigns a name to a frame. This is useful for loading contents into one frame from another.
longdesc	A long description - this can elaborate on a shorter description specified with the title attribute.
src	Location of the frame contents (for example, the HTML page to be loaded into the frame).
noresize	Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not).
scrolling	Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values: auto yes no
frameborder	Whether the frame should have a border or not. Possible values: 1 (border) 0 (no border)
marginwidth	Specifies the margin, in pixels, between the frame's contents and it's left and right margins.
marginheight	Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins.

The noframe Tag

The noframes tag is used if the user's browser doesn't support frames. Anything you type in between the noframes tags is displayed in their browser.
HTML Code:

<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
  <noframes>
  <body>Your browser doesn't support frames.
  Therefore, this is the noframe version of the site.</body>
  </noframes>
  <frame src ="frame_example_left.html" />
  <frame src ="frame_example_right.html" />
</frameset>
</html>

                         <<---Previous

HTML Tutorial

In HTML, colors can be added by using the style attribute. You can specify a color name (eg, blue), a hexadecimal value (eg, #0000ff), or an RGB value (eg rgb(0,0,255)).

Syntax

Foreground Color

To add color to an HTML element, you use style="color:{color}", where {color} is the color value. For example:

<h3 style="color:blue">HTML Colors</h3>

This results in:

HTML Colors

Background Color

To add a background color to an HTML element, you use style="background-color:{color}", where {color} is the color value. For example:

<h3 style="background-color:blue">HTML Colors</h3>

This results in:

HTML Colors

Border Color

To add a colored border to an HTML element, you use style="border:{width} {color} {style}", where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the border. For example:

<h3 style="border:1px blue solid;">HTML Colors</h3>

This results in:

HTML Colors

Color Names

The most common methods for specifying colors are by using the color name or the hexadecimal value. Although color names are easier to remember, the hexadecimal values and RGB values provides you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.
There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows these color names and their corresponding hexadecimal value.

Color Name	Hexadecimal Value	Color Name	Hexadecimal Value
Black	#000000	Green	#008000
Silver	#c0c0c0	Lime	#00ff00
Gray	#808080	Olive	#808000
White	#ffffff	Yellow	#ffff00
Maroon	#800000	Navy	#000080
Red	#ff0000	Blue	#0000ff
Purple	#800080	Teal	#008080
Fushia	#ff00ff	Aqua	#00ffff

You can make up your own colors by simply entering any six digit hexadecimal value (preceeded by a hash). In the following example, we're using the same code as above. The only difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent (which is #0000ff):

<h3 style="color:#0000ff">HTML Colors</h3>

This results in:

HTML Colors

If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like this:

<h3 style="color:#000069">HTML Colors</h3>

This results in:

HTML Colors

Choosing Colors - The Easy Way

By using hexadecimal or RGB color values, you have a choice of over 16 million different colors. You can start with 000000 and increment by one value all the way up to FFFFFF. Each different value represents a slightly different color.

Links, otherwise known as hyperlinks, are defined using the <a> tag - otherwise known as the anchor element.
To create a hyperlink, you use the a tag in conjunction with the href attribute (href stands for Hypertext Reference). The value of the href attribute is the URL, or, location of where the link is pointing to.
Example HTML Code:

Visit the <a href="http://www.graafix.blogspot.com/">Natural Environment Blog</a>

This results in:

Visit the Graafix.blogspot.com

Hypertext references can use absolute URLS, relative URLs, or root relative URLs.

absolute: This refers to a URL where the full path is provided. For example, http://www.worldwebdesigner.blogspot.com/html/tutorial/index.html
relative: This refers to a URL where only the path, relative to the current location, is provided. For example, if we want to reference the http://www.worldwebdesigner.blogspot.com/html/tutorial/index.html URL, and our current location is http://www.worldwebdesigner.blogspot.com/html, we would use tutorial/index.cfm
root relative: This refers to a URL where only the path, relative to the domain's root, is provided. For example, if we want to reference the http://www.worldwebdesigner.blogspot.com/html/tutorial/index.cfm URL, and the current location is http://www.worldwebdesigner.blogspot.com/html, we would use /html/tutorial/index.cfm. The forward slash indicates the domain's root. This way, no matter where your file is located, you can always use this method to determine the path, even if you don't know what the domain name will eventually be.

Link Targets

You can nominate whether to open the URL in a new window or the current window. You do this with the target attribute. For example, target="_blank" opens the URL in a new window.
The target attribute can have the following possible values:

_blank	Opens the URL in a new browser window.
_self	Loads the URL in the current browser window.
_parent	Loads the URL into the parent frame (still within the current browser window). This is only applicable when using frames.
_top	Loads the URL in the current browser window, but cancelling out any frames. Therefore, if frames were being used, they aren't any longer.

Example HTML Code:

Visit the <a href="http://www.graafix.blogspot.com.com" target="_blank">Natural Environment</a>

This results in:

Visit the Graafix.blogspot.com

Named Anchors

You can make your links "jump" to other sections within the same page. You do this with named anchors.
To use named anchors, you need to create two pieces of code - one for the hyperlink (this is what the user will click on), and one for the named anchor (this is where they will end up).
This page uses a named anchor. I did this by performing the steps below:

I created the named anchor first (where the user will end up) Example HTML Code:
<h2>Link Targets<a name="link_targets"></a></h2>
I then created the hyperlink (what the user will click on). This is done by linking to the name of the named anchor. You need to preceed the name with a hash (#) symbol. Example HTML Code:
<a href="#link_targets">Link Targets</a>

This results in:

Link Targets

When you click on the above link, this page should jump up to the "Link Targets" section (above). You can either use your back button, or scroll down the page to get back here.

You're back? Good, now lets move on to email links.

Email Links

You can create a hyperlink to an email address. To do this, use the mailto attribute in your anchor tag.
Example HTML Code:

<a href="mailto:king_kong@example.com">Email King Kong</a>

This results in:

Email King Kong

Clicking on this link should result in your default email client opening up with the email address already filled out.

You can go a step further than this. You can auto-complete the subject line for your users, and even the body of the email. You do this appending subject and body parameters to the email address.
Example HTML Code:

<a href="mailto:king_kong@example.com?subject=Question&body=Hey there">Email King Kong</a>

This results in:

Email King Kong

Base href

You can specify a default URL for all links on the page to start with. You do this by placing the base tag (in conjunction with the href attribute) in the document's head.
Example HTML Code:

<head>
<base url=http://www.worldwebdesigner.blogspot.com>
</head>

Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.
To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the <img /> tag, specifying the actual location of the image.

Example of Image Usage
HTML Code:

<img src="smile.gif" width="100" height="100" alt="Smile" /> 
This results in:














The img above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:

src Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
width Optional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
height Optional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
alt Alternate text. This specifies text to be used in case the browser/user agent can't render the image.


Image Alignment
You can determine how your images will be aligned, relative to the other content on the page (such as a paragraph of text). You do this using the align attribute.
HTML Code:



<p>
<img src="smile.gif"
 width="100" height="100" alt="Smile" align="right"/>
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.</p> </p>This can be used to produce
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.</p><p> Otherwise,
the image will just hang below the text and may look funny.</p>



This results in:


Here is a paragraph of text to demonstrate HTML images and how they can  be aligned to the right of a paragraph (or paragraphs) if you so desire.


This can be used to produce some nice layout effects, especially if you have a lot of text, and it runs right past the image. 


Otherwise, the image will just hang below the text and may look funny.


Image Links

You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code. 

HTML Code:



<a href=http://www.worldwebdesigner.blogspot.com>
<img src="smile.gif"
 width="100" height="100" alt="Smile" />
</a>


This results in:







Removing the Border
You might notice that this has created a border around the image. This is default behaviour for most browsers. If you don't want the border, specify border="0".
HTML Code:



<a href=http://www.worldwebdesigner.blogspot.com>
<img src="smile.gif"
 width="100" height="100" alt="Smile" border="0" />
</a>


This results in:






 

 

 

Creating Images
The above examples assumed that you already had an image to embed into your web page. To learn about 


Meta tags allow you to provide metadata about your HTML pages. This can be very useful for search engines and can assist the "findability" of the information on your website.

What is Metadata?
Metadata is information about, or that describes, other data or information.
If we relate this to a web page, if you think about it for a moment, you could probably come up with a lot more information about a web page than what you're actually displaying to the reader. For example, there could be a number of keywords that are related to the page. You could probably give the page a description. The page also has an author - right? All these could be examples of metadata.

Metadata on the Web
Metadata is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look at any metadata attached to a page - especially keywords - and rank it higher than another page with less relevant metadata, or with no metadata at all.

Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags. The can include the following attributes:


Attribute Description
Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content Specifies the property's value.
scheme Specifies a scheme to use to interpret the property's value (as declared in the content attribute).
http-equiv Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.


Example HTML Code:

Keywords:

<meta name="keywords" content="HTML, meta tags, metadata" /> 

Description:

<meta name="description" content="Contains info about meta tags" /> 

Revision date (last time the document was updated):

<meta name="revised" content="Quackit, 6/12/2002" /> 

Refresh the page every 10 seconds:

<meta http-equiv="refresh" content="10" /> 
The above examples are some of the more common uses for the meta tag.



Before we go any further, I'd like to introduce the concept of comments. Although comments are optional, they can assist you greatly.
Comments are a part of the HTML code and is used to explain the code. This can be helpful for other HTML coders when trying to interpret someone elses code. It can also be useful for yourself if you have to revisit your code in many months, or even years time. Comments aren't displayed in the browser - they are simply there for the programmer's benefit.
You write comments like this:

<!-- Write your comment here --> 
Comments always start with <!-- and end with -->. This tells the browser when a comment begins and ends.
Example HTML Code:



<-- Display a happy image --->
<img src="smile.gif"
 width="100" height="100" alt="Smile" />


This results in:








As you can see, the comment is invisible to the user viewing the page in the browser. It is there, simply for the HTML coder's benefit.
Well, we have now finished the first part of this tutorial. We have covered a lot, and by now, you have learned enough to build a website.
If you'd like to learn some of the more advanced HTML techniques, such as, how to create tables, frames, forms etc, please continue!

Attribute	Description
Name	Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content	Specifies the property's value.
scheme	Specifies a scheme to use to interpret the property's value (as declared in the content attribute).
http-equiv	Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

              <<--Previous        Next-->>

HTML Tutorials

OK, lets get straight into it. Here, you will learn just how easy it is to create a web page. In fact, by the time you've finished with this web page, you will have created your own web page!
When you create a web page you will usually do something like this:

Create an HTML file
Type some HTML code
View the result in your browser
Repeat the last 2 steps (if necessary)

Creating a Webpage

OK, let's walk through the above steps in more detail.

Create an HTML file
An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).
1. Open up your computer's normal plain text editor (this will probably be Notepad if you're using Windows or TextEdit if you're using a Mac). You could use a specialized HTML editor such as DreamWeaver or FrontPage if you prefer.
2. Create a new file (if one wasn't already created)
3. Save the file as html_tutorial_example.html

Type some HTML code

Type the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>

View the result in your browser
Either...
1. Navigate to your file then double click on it
...OR...
1. Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).
2. Select File > Open, then click "Browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "Open".
Repeat the last 2 steps until you're satisfied with the result
It's unrealistic to expect that you will always get it right the first time around. Don't worry - that's OK! Just try again and again - until you get it right.

Explanation of code

OK, before we get too carried away, I'll explain what that code was all about.
We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an opening and closing tag.
All HTML documents should at least contain all of the tags we've just coded and in that order.

HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.
HTML consists of almost 100 tags. Don't let that put you off though - you will probably find that most of the time, you only use a handful of tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.
OK, lets look more closely at the example that we created in the previous lesson.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>

Explanation of the above code:

The <!DOCTYPE... > element tells the browser which version of HTML the document is using.
The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).
The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the <title> tag is displayed in the browser's title bar (right at the very top of the browser).
The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.
The <p> tag declares a paragraph. This contains the body text.

Closing your tags

As mentioned in a previous lesson, you'll notice that all of these tags have opening and closing tags, and that the content of the tag is placed in between them. There are a few exceptions to this rule.
You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (/) after the <. This tells the browser that this tag closes the previous one.

UPPERCASE or lowercase?

Although most browsers will display your page regardless of the case you use, you should always code in lowercase. This helps keep your code XML compliant (but that's another topic).

You may be familiar with some of the formatting options that are available in word processing applications such as Microsoft Office, and desktop publishing software such as QuarkXpress. Well, many of these formatting features are available in HTML too! This lesson contains some of the more common formatting options.

Headings

There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from h1 for the most important, to h6 for the least important.
Typing this code:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Results in this:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Bold

You specify bold text with the <b> tag.
Typing this code:

<b>This text is bold.</b>

Results in this:

This text is bold.

Italics

You specify italic text with the <i> tag.
Typing this code:

<i>This text is italicised.</i>

Results in this:

This text is italicised.

Line Breaks

Typing this code:

<p>Here is a...<br />line break.</p>

Results in this:

Here is a
line break.

Horizontal Rule

Typing this code:

Here's a horizontal rule... <hr /> ...that was a horizontal rule :)

Results in this:

Here's a horizontal rule...

...that was a horizontal rule :)

Unordered (un-numbered) List

Typing this code:

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

Results in this:

List item 1
List item 2
List item 3

Ordered (numbered) List

Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).
Typing this code:

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

Results in this:

List item 1
List item 2
List item 3

We will be covering more HTML tags throughout this tutorial, but before we do that, you should know about attributes.

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.

Example

Consider this example:

<body style="background-color:orange">

OK, we've already seen the body tag in previous lessons, but this time we can see that something extra has been added to the tag - an attribute. This particular attribute statement, style="background-color:orange", tells the browser to style the body element with a background color of orange.

The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard Cascading Style Sheets code) for setting the color.

Another Example

Here's another example of adding an attribute to an HTML tag. In this example, we use the <a> tag to create a hyperlink to the Quackit website.

<a href="http://www.worldwebdesigner.blogspot.com">World Web Designer Blog</a>

This results in:

Quackit Website

Many attributes are available to HTML elements, some are common across most tags, others can only be used on certain tags. Some of the more common attributes are:

Attribute	Description	Possible Values
class	Used with Cascading Style Sheets (CSS)	(the name of a predefined class)
style	Used with Cascading Style Sheets (CSS)	(You enter CSS code to specify how the way the HTML element is presented)
title	Can be used to display a "tooltip" for your elements.	(You supply the text)

You don't need to fully comprehend these just yet. The good thing about attributes is that, in most cases, they are optional. Many HTML elements assign a default value to its attributes - meaning that, if you don't include that attribute, a value will be assigned anyway. Having said that, some HTML tags do require an attribute (such as the hyperlink example above).

Therefore...	Good:	`<head>`
	Bad:	`<HEAD>`

Next ---->>

src	Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
width	Optional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
height	Optional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
alt	Alternate text. This specifies text to be used in case the browser/user agent can't render the image.

Saturday, April 9, 2011

HTML Tutorial

The Input Tag

Text

Radio Buttons

Checkboxes

Submit

Select Lists

Form Action

HTML Tables

Creating Frames

Two Column Frameset

Add a Top Frame

Remove the Borders

Load Another Frame

Tag Reference

The frameset Tag

The frame Tag

The noframe Tag

HTML Tutorial

Syntax

Foreground Color

HTML Colors

Background Color

HTML Colors

Border Color

HTML Colors

Color Names

HTML Colors

HTML Colors

Choosing Colors - The Easy Way

Link Targets

Named Anchors

Email Links

Base href

Example of Image Usage

Image Alignment

Image Links

Removing the Border

Creating Images

What is Metadata?

Metadata on the Web

Adding Meta Tags to Your Documents

Example HTML Code:

HTML Tutorials

Creating a Webpage

Create an HTML file

Type some HTML code

View the result in your browser

Repeat the last 2 steps until you're satisfied with the result

Explanation of code

Closing your tags

UPPERCASE or lowercase?

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Bold

Italics

Line Breaks

Horizontal Rule

Unordered (un-numbered) List

Ordered (numbered) List

Example

Another Example