Showing posts with label HTML. Show all posts

Saturday, 30 July 2011

Part 9 - Colors | HTML

Posted by Muhammad Abbas at 13:21

HTML Color - bgcolor

The bgcolor attribute is used to control the background of an HTML elmement, specifically page and table backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest you only use it for your page's main background (<body>) and in tables. For additional background styling. The HTML to change the background color is simple:

Syntax

<TAGNAME bgcolor="value">

Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden.

HTML Code:

<body bgcolor="Silver">

<p>We set the background...</p>

</body>

Paragraph Bgcolor:

We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!

Adding Color to Your Tables

This example shows how to add a background color for an entire table using generic values of color.

HTML Code:

<table bgcolor="lime" border="1"><tr>
<td>A lime colored table background using color names.</td>
</tr></table>

<table bgcolor="#ff0000" border="1"><tr>
<td>A red colored table background using hexadecimal values "#FF0000".</td>
</tr></table>

<table bgcolor="rgb(0, 0, 255)" border="1"><tr>
<td>A blue colored table background using RGB values "rgb(0, 0, 255)".</td>
</tr></table>

Table Bgcolors:

A lime colored table background using color names.

A red colored table background using hexadecimal values "#FF0000".

A blue colored table background using RGB values "rgb(0, 0, 255)".

Adding Color to Table Rows & Columns

Here's a few common examples of "bgcolor" and font color

HTML Code:

<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table>

Alternating Colors:

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

Background Color and Font Color Together!

Check out this "Scoreboard" we made with the use of font color and bgcolor!

HTML Code:

<table bgcolor="#000000">
<tr><td bgcolor="#009900">
<font color="#FFFF00" align="right">Green Bay</font></td>
<td><font color="#FFFFFF">13</font></td></tr>
<tr><td bgcolor="#0000FF">
<font color="#DDDDDD" align="right">New England</font></td>
<td><font color="#FFFFFF">27</font></td></tr>
</table>

Scoreboard:

Green Bay	13
New England	27

HTML Code:

<table bgcolor="#777777">
<tr><td>
<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">
This paragraph tag has...
</font></p>
</td></tr>
</table>

Colored Paragraph:

This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts.

HTML - Background

Images can be placed within elements of HTML. Tables, paragraphs, and bodys may all have a background image. To accomplish this, we use the background attribute as follows.

HTML Code:

<table height="100" width="150"
 background="http://www.tizag.com/pics/htmlT/background.jpg" >
<tr><td>This table has a background image</td></tr>
</table>

Background Image:

This table has a background image

HTML - Background Repeat

In the first example we happen to be lucky because our image and our table had exactly the same size pixel dimensions. Everything looks great. When your HTML element is larger than the dimensions of your picture, the image simply begins to repeat itself.

HTML Code:

<table height="200" width="300"
 background="http://www.tizag.com/pics/htmlT/background.jpg" >
<tr><td>This table has a background image</td></tr>
</table>

Repeating Background:

This table has a background image

It is obvious this is often not the desired outcome, however, it can also be quite useful as you will see in the following example.

HTML - Patterned Backgrounds

Repeating a generic image as a background doesn't have much practical use. We either need to find an image to fit exactly as our background or have an image editing program to adjust the dimensions of our image.
From a different angle, we can use this default attribute to our benefit say if we wanted to have some sort of pattern as our background. In an image editing program such as Adobe Photosop, or Paint Shop Pro, we could create a very small (perhaps 4X4 pixels) and create a couple of basic patterns.

4x4 Image:

Now here is the same image set as the background to our same table.

HTML Code:

<table height="100" width="150"
 background="http://www.tizag.com/pics/htmlT/pattern.jpg" >
<tr><td>This table has a background patterned image</td></tr>
</table>

Pattern:

This table has a background patterned image

This technique is definitely one for the pros.

HTML - Transparent Background

Another great techinique, along the same lines as the patterned images, is that of transparent, colored backgrounds. Most image editors have some sort of transparency device to create images that appear see through. We're not going to cover how to do this with every single program, however, most of the time all you need to do is fill your canvas with the color you would like and then set the opacity to something below 100%. Then make sure you save your file as a gif not a jpeg, and all systems should be go.
Now that you have had the crash course on creating transparent files, you place them onto your websites the exact same way as you would a repeating background.

HTML Code:

<table background="http://www.tizag.com/pics/htmlT/transparent.gif" >
<tr><td>This table has a red transparent background image</td></tr>
</table>

HTML Color Chart

Below is the hexadecimal representation for an array of HTML background colors. The hexadecimal value that you see displayed in each box represents the value to get the background color of that cell.

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF

#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF

#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF

#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF

#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF

#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFF

Part 8 - Forms | HTML

Posted by Muhammad Abbas at 13:15

0 comments

Forms

A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.

<form>
.
input elements
.
</form>

Input

The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

How it looks in a browser:
Male
Female Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

How it looks in a browser:
Male
Female Note that only one option can be chosen.

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

How it looks in a browser:
I have a bike:
I have a car:
I have an airplane:

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form name="input" action="html_form_submit.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

How it looks in a browser:
Username: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_submit.asp". The page will show you the received input.

Form Tags

Tag	Description
<form>	Defines a form for user input
<input>	Defines an input field
<textarea>	Defines a text-area (a multi-line text input control)
<label>	Defines a label to a control
<fieldset>	Defines a fieldset
<legend>	Defines a caption for a fieldset
<select>	Defines a selectable list (a drop-down box)
<optgroup>	Defines an option group
<option>	Defines an option in the drop-down box
<button>	Defines a push button
<isindex>	Deprecated. Use <input> instead

Part 7 - Tables | HTML

Posted by Muhammad Abbas at 13:11

0 comments

HTML Tables Tables may seem difficult at first, but after working through this lesson you'll see how they aren't too bad. The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags. Tables are a handy way to create a site's layout, but it does take some getting used to. Here's how to make a table.

HTML Code:

<table border="1">
<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>

Basic Table:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

Content is placed within tables cells. A table cell is defined by <td> and </td>.The border attribute defines how wide the table's border will be.

Spanning Multiple Rows and Cells

Use rowspan to span multiple rows and colspan to span multiple columns.
Note: if you would like to place headers at the top of your columns, use the <th> tag as shown below. By default these headers are bold to set them apart from the rest of your table's content.

HTML Code:

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Colspan and

Colspan

:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Cell Padding and Spacing

With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within. Color has been added to the table to emphasize these attributes.

HTML Code:

<table border="1" cellspacing="10"

 bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 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>

Cellspacing and Padding:

Row 1 Cell 1	Row 1 Cell 2
Column 1	Column 2
Row 2 Cell 1	Row 2 Cell 2

And now we will change the cellpadding of the table and remove the cellspacing from the previous example.

HTML Code:

<table border="1" cellpadding="10"
 bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 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>

Cell Pads:

Column 1	Column 2
Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

The value you specify for padding and spacing is interpreted by the browser as a pixel value you. So a value of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use pixels.

Part 6 - Lists | HTML

Posted by Muhammad Abbas at 13:08

0 comments

HTML Lists
There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.

<ul> - unordered list; bullets
<ol> - ordered list; numbers
<dl> - definition list; dictionary

HTML Ordered Lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list below demonstrates.

HTML Code:

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>

Numbered list:

Goals

Find a Job
Get Money
Move Out

Start your ordered list on any number besides 1 using the start attribute.

HTML Code:

<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>

Numbered List Start:

Goals

Buy Food
Enroll in College
Get a Degree

Nothing fancy here, start simply defines which number to begin numbering with.

HTML Ordered Lists Continued

There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numberals or letters, both capital and lower-case. Use the type attribute to change the numbering.

HTML Code:

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Ordered List Types:

Lower-Case Letters	Upper-Case Letters	Lower-Case Numerals	Upper-Case Numerals
Find a Job Get Money Move Out	Find a Job Get Money Move Out	Find a Job Get Money Move Out	Find a Job Get Money Move Out

HTML Unordered Lists

Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.

HTML Code:

<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

Unordered Lists:

Shopping List

Milk
Toilet Paper
Cereal
Bread

Here's a look at the other flavors of unordered lists may look like.

HTML Code:

<ul type="square">
<ul type="disc">
<ul type="circle">

Unordered List Types:

type="square"	type="disc"	type="circle"
Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread

HTML Definition Term Lists

Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word just above the definition itself for a unique look. It's wise to bold the terms to displace them further.

<dl> - defines the start of the list
<dt> - definition term
<dd> - defining definition

HTML Code:

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>

HTML Code:

Fromage
French word for cheese.
Voiture
French word for car.

Part 5 - Links & Images | HTML

Posted by Muhammad Abbas at 13:01

0 comments

Hyperlinks, Anchors, and Links

In web terms, a hyperlink is a reference (an address) to a resource on the web.

Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.

An anchor is a term used to define a hyperlink destination inside a document.

The HTML anchor element <a>, is used to define both hyperlinks and anchors .

We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an address inside a document. .
An HTML Link

Link syntax:

<a href="url">Link text</a>
The start tag contains attributes about the link .

The element content (Link text) defines the part to be displayed .

Note: The element content doesn't have to be text. You can link from an image or any other HTML element .
The href Attribute

The href attribute defines the link "address" .

This <a> element defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The code above will display like this in a browser:

Visit W3Schools!
The target Attribute

The target attribute defines where the linked document will be opened .

The code below will open the document in a new browser window:
Example

<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
The name Attribute

When the name attribute is used, the <a> element defines a named anchor inside a HTML document .

Named anchor are not displayed in any special way. They are invisible to the reader .
Named anchor syntax:

<a name="label">Any content</a>

The link syntax to a named anchor:

<a href="#label">Any content</a>

The # in the href attribute defines a link to a named anchor .
Example:

A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

A link to the Useful Tips Section from the same document:

<a href="#tips">

A link to the Useful Tips Section from another document:

<a href="http://www.w3schools.com/html_tutorial.htm#tips">
The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
The syntax of defining an image:

<img src="url" />

The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.

The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat" />
The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Basic Notes - Useful Tips

If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.
Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Part 4 - Formatings Elements | HTML

Posted by Muhammad Abbas at 12:49

0 comments

HTML - Formatting Elements
As you begin to place more and more elements onto your web site, it will become necessary to make minor changes to the formatting of those elements. In our HTML Attributes lesson we discussed ways to add some flavor with attributes and align elements within other elements. Several tags exist to further amplify text elements. These formatting tags can make text bold, italic, sub/superscripted, and more.

Bold, Italic and More

HTML Code:

<p>An example of <b>Bold Text</b></p>
<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>
<p>An example of <sup>superscripted Text</sup></p>
<p>An example of <sub>subscripted Text</sub></p>
<p>An example of <del>struckthrough Text</del></p>
<p>An example of <code>Computer Code Text</code></p>

HTML Formatting:

An example of Bold Text
An example of Emphasized Text
An example of Strong Text
An example of Italic Text
An example of ^{superscripted Text}
An example of _{subscripted Text}
An example of ~~struckthrough Text~~
An example of Computer Code Text

All of these tags add a pinch of flavor to paragraph elements. They can be used with any text type element.

HTML - Formatting Tag Usage

These tags should be used sparingly. And what we mean by that is that you should only use them to bold or italicize one or two words in your elements at a time. If you wish to bold an entire paragraph a better solution would involve Cascading Style Sheets, and you should consult how to do that in our CSS Tutorial. Ultimately the decision is yours, the web developer. Being a voice of experience, keep the use of these tags quick and sparse.

Part 3 - Heading & Paragraphs of HTML

Posted by Muhammad Abbas at 12:46

0 comments

HTML - Headings:
A heading in HTML is just what you might expect, a title or subtitle. By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text depends on the number of heading (1-6). Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.

HTML Code:

<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>

Place these lines into your HTML file and you should get what is displayed below.

Headings

are

great

for

titles

and subtitles

Notice that each heading has a line break before and after each heading display. This is a built in attribute so to speak associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag exactly the same as with <p> tags.

Essay Walkthrough

Let's tie together headings and paragraphs to form an essay. Copy(Highlight, then Ctrl C) or code the following in the body of your page or a new page. Or make your own essay paragraphs.

HTML Code:

<h1 align="center">Essay Example</h1>
<p>Avoid losing floppy disks with important school/work projects...</p>
<p>For instance, let's say you had a 
HUGE school or work project to complete.  Off ...</p>

HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example

<p>This is a paragraph</p>
 <p>This is another paragraph</p>

Note: Browsers automatically adds an empty line before and after paragraphs.

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

Example

<p>This is a paragraph
<p>This is another paragraph

The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br />a para<br />graph with line breaks</p>

The <br /> element is an empty HTML element. It has no end tag.

<br> or <br />

In XHTML, XML, and future versions of HTML, HTML elements with no end tag (closing tag) are not allowed.
Even if <br> works in all browsers, writing <br /> instead is more future proof.

HTML Output - Useful Tips

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one space, and any number of spaces count as one space.

HTML Tag Reference

W3Schools' tag reference contains additional information about HTML elements and their attributes.

Tag	Description
<p>	Defines a paragraph
<br />	Inserts a single line break

Part 2 - Elements & Attributes of HTML

Posted by Muhammad Abbas at 12:42

0 comments

HTML Elements

An HTML element is everything from the start tag to the end tag:

Start tag *	Element content	End tag *
<p>	This is a paragraph	</p>
<a href="/default.htm" >	This is a link	</a>
<br />

* The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax

An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes

(You will learn about element attributes in the next chapter of this tutorial)

Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.

HTML Document Example

<html>

<body>

<p>This is my first paragraph</p>

</body>
</html>

The example above contains 3 HTML elements.

Example Explained

The <p> element:

<p>This is my first paragraph</p>

The <p> element defines a paragraph in the HTML document
The element has a start tag <p> and an end tag </p>
The element content is: This is my first paragraph

The <body> element:

<body>

<p>This is my first paragraph</p>
</body>

The <body> element defines the body of the HTML document
The element has a start tag <body> and an end tag </body>
The element content is another HTML element (a paragraph)

The <html> element:

<html>

<body>

<p>This is my first paragraph</p>

</body>

</html>

The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>
The element content is another HTML element (the body)

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

<p>This is a paragraph

<p>This is a paragraph

Empty HTML Elements

HTML elements without content are called empty elements. Empty elements can be closed in the start tag.
<br> is an empty element without a closing tag (it defines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding a slash to the start tag, like <br />, is the proper way of closing empty elements, accepted by HTML, XHTML and XML.
Even if <br> works in all browsers, writing <br /> instead is more future proof.

HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. Plenty of web sites use uppercase HTML tags in their pages.
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in future versions of (X)HTML.

HTML Attributes

HTML elements can have attributes
Attributes provide additional information about the element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"

Attribute Example

HTML links are defined with the <a> tag. The link address is provided as an attribute:

<a href="http://www.YourSite.com">This is a link</a>

Always Quote Attribute Values

Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also allowed.
In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:
name='John "ShotGun" Nelson'

HTML Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive.
However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation
Newer versions of (X)HTML will demand lowercase attributes.

HTML Attributes Reference

A full list of legal attributes for each HTML element is listed in our:
Complete HTML Reference
Below is a list of some attributes that are standard for most HTML elements:

Attribute	Value	Description
class	class_rule or style_rule	The class of the element
id	id_name	A unique id for the element
style	style_definition	An inline style definition
title	tooltip_text	A text to display in a tool tip

For more information about standard attributes:
HTML Standard Attributes Reference

Part 1 - Introduction of HTML

Posted by Muhammad Abbas at 12:37

0 comments

What is HTML?

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags.

HTML Documents = Web Pages

HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

<html>

 <body>


 <h1>My First Heading</h1>


 <p>My first paragraph</p>


 </body>

 </html>

Example Explained

The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph

What Do You Need?

You don't need any tools to learn HTML at W3Schools.

You don't need any HTML editor
You don't need a web server
You don't need a web site

Editing HTML

In this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe this is the best way to learn HTML.
However, professional web developers often prefer HTML editors like FrontPage or Dreamweaver, instead of writing plain text.

Use Your Test Web For Learning

We suggest you experiment with everything you learn at W3Schools by editing your web files with a text editor (like Notepad).
Note: If your test web contains HTML markup tags you have not learned, don't panic. You will learn all about it in the next chapters.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We use .htm in our examples. It is a habit from the past, when the software only allowed three letters in file extensions.
With new software it is perfectly safe to use .html.

Saturday, 30 July 2011

HTML Color - bgcolor

Syntax

HTML Code:

Paragraph Bgcolor:

Adding Color to Your Tables

HTML Code:

Table Bgcolors:

Adding Color to Table Rows & Columns

HTML Code:

Alternating Colors:

Background Color and Font Color Together!

HTML Code:

Scoreboard:

HTML Code:

Colored Paragraph:

HTML - Background

HTML Code:

Background Image:

HTML - Background Repeat

HTML Code:

Repeating Background:

HTML - Patterned Backgrounds

4x4 Image:

HTML Code:

Pattern:

HTML - Transparent Background

HTML Code:

HTML Color Chart

Forms

Input

Text Fields

Radio Buttons

Checkboxes

The Form's Action Attribute and the Submit Button

Form Tags

HTML Code:

Basic Table:

Spanning Multiple Rows and Cells

HTML Code:

Colspan and

Colspan

:

Cell Padding and Spacing

HTML Code:

Cellspacing and Padding:

HTML Code:

Cell Pads:

HTML Ordered Lists

HTML Code:

Numbered list:

Goals

HTML Code:

Numbered List Start:

Goals

HTML Ordered Lists Continued

HTML Code:

Ordered List Types:

HTML Unordered Lists

HTML Code:

Unordered Lists:

Shopping List

HTML Code:

Unordered List Types:

HTML Definition Term Lists

HTML Code:

HTML Code:

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Tag Description <img> Defines an image <map> Defines an image map <area Defines a clickable area inside an image map

Bold, Italic and More

HTML Code:

HTML Formatting:

HTML - Formatting Tag Usage

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map

Tag Description

<img> Defines an image

<map> Defines an image map

<area Defines a clickable area inside an image map