Sunday, November 28, 2010

HTML Colors

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.


ColorColor NameHexadecimal Value  ColorColor NameHexadecimal 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.

But don't worry - you won't need to remember every single hexadecimal color! The HTML color picker and color chart make it easy for you to choose colors for your website.

HTML 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.quackit.com">Quackit Website</a>


This results in:




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:

AttributeDescriptionPossible Values
classUsed with Cascading Style Sheets (CSS)(the name of a predefined class)
styleUsed with Cascading Style Sheets (CSS)(You enter CSS code to specify how the way the HTML element is presented)
titleCan 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).


You will see more attributes being used as we cover off some of the more advanced HTML elements.

HTML Formatting

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:


  1. List item 1
  2. List item 2
  3. List item 3


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

Saturday, November 27, 2010

Now we will try to create a table with one column having a background image



Example Code:


<table border=1 bgcolor=green>


<tr>

<td>

This is 1st row 1st column

</td>

<td>

This is 1st row 2nd column

</td>

</tr>




<tr>

<td>

This is 2nd row 1st column

</td>

<td background="./test.jpg">

This is 2nd row 2nd column
<br><br>

Nice background


</td>

</tr>


</table>



Result:

The result for above tag will be as
Table Size We can set the size of the table based of pixels or percentage. First we will see how to set size based on pixels. The attribute width and height will be used. Example Code: <table border=1 bgcolor="green" width=300 height=100> <tr height=30> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr height=70> <td> This is 2nd row 1st column </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Now we have set the total table width as 300 and height as 100 and split them as 30 to first row and 70 to second row. Result:
This is 1st row 1st column This is 1st row 2nd column
This is 2nd row 1st column This is 2nd row 2nd column

Nice background
This is 1st row 1st column This is 1st row 2nd column
This is 2nd row 1st column This is 2nd row 2nd column

Nice background
Table Size in percentage Table width and height can be set using percentage. e.g: width=60%. This means that the table with be drawn to 60% width of the current component. i.e. if we are drawing a table inside a body tag and using width as 100%, then the width of the table will be equal to the browser width. Table can be drawn inside tables. We will see about it later. Example Code: <table border=1 bgcolor="green" width=80% height=20%> <tr height=30%> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr height=70%> <td> This is 2nd row 1st column </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Now we have set the total table width as 80% and height as 30% and split the height as 30% to first row and 70% to second row. To explain in depth, say we have the component size as width=500,height=500 so the table will now take 80% of 500 (400) as its total width and 30% of 500 (150) as its total height. Then it will split that 150 height in to 30% for first row and 70% for second row. Result: Table Alignment Tables can be aligned to the left/right/center using the attribute "align" inside table tag. Example Code: <table border=1 bgcolor="green" width=300 height=100 align=center> <tr height=30> <td> HAI </td> <td> Hello </td> </tr> <tr height=70> <td> Table Alignment </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Result:

This is 1st row 1st column

This is 1st row 2nd column

This is 2nd row 1st column

This is 2nd row 2nd column

Nice background
HAI Hello
Table Alignment
This is 2nd row 2nd column

Nice background
Aligning Content (text) in columns The content (text,image,etc..) inside the columns can be aligned horizontally using the tag attribute "align" The content (text,image,etc..) inside the columns can be aligned vertically using the tag attribute "valign" ALIGN can take the values as LEFT/RIGHT/CENTER VALIGN can take the values as TOP/BOTTOM/CENTER Example Code: <table border=1 bgcolor="green" width=80% height=30%ALIGN=center> <tr height=20%> <td align=center> center </td> <td align=right> right </td> </tr> <tr height=70% > <td valign=top> top </td> <td valign=bottom align=right background="./test.jpg"> Bottom <br><br> </td> </tr> </table> Result:

Basic HTML Code

Explanation




Attribute: behavior

This sets the background color for marquee path.

It takes values SCROLL or SLIDE or ALTERNATE

Example Code:

<marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate> Moving Text</marquee>


Result:

Moving Text





Attribute: scrollamount

This controls the amount of movement (in pixels) between the successive displays that give the impression of animation.

Example Code:

<marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate scrollamount=5> Moving Text Tag </marquee>


Result with scrollamount as 5:

Moving Text Tag

Result with scrollamount as 50:

Moving Text Tag



Attribute: srolldelay

This controls the delay (in milliseconds) between the successive displays that give the impression of animation.

Example Code:

<marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate scrolldelay=5> Scrolling Text Tag </marquee>


Result with scroll delay as 5:

Scrolling Text Tag

Result with scroll delay as 500:

Scrolling Text Tag



Moving Image

Similarly image can be moved. Instead of text in between marquee tags give an image. It will scroll/move

Example Code:


<marquee width=100 height=20> <img src="./test.jpg"> </marquee>

Result: Scrolling Images








blink: <blink> </blink>


If you want blinking text, use this tag.

The tag used is "blink"



Example Code:

<blink> blinking text tag</blink>




Result:

blinking text tag



[Note: This may not work on few browsers]


Table is most beautiful concept in html.

Now a days, most of the websites are created using table structure.

The concept of table is very simple, just rows and columns.

We will split the window in to so many number of rows and columns as required.





Table

This tag can not act alone. It needs "tr" and "td" tags with in it.

Example Code:


<table> </table>

As we know that table is a set of rows and columns, we introduce rows inside the table using
<tr> </tr>.
Also each row can have any number of columns. one to n..., so we introduce columns inside the rows using the tags <td> </td>



So putting things together we define a table with a row and column as follows



Code:


<table>

<tr>

<td>
This is first column

</td>

</tr>

</table>



Result:

The result for above tag will be as
center right
top bottom right
This is first column
Table with border To make things much clear, we will put border to the table using the attribute "border". This attribute should be added in "table" tag. Example Code: <table border=1> <tr> <td> This is first column </td> <td> This is second column </td> </tr> </table> Result: The result for above tag will be as
This is first column This is second column
This is first column This is second column
Table with 2 row 2 col Now we will try to create a table with 2 row and 2 cols each Example Code: <table border=1> <tr> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr> <td> This is 2nd row 1st column </td> <td> This is 2nd row 2nd column </td> </tr> </table> Result: The result for above tag will be as
This is 1st row 1st column This is 1st row 2nd column
This is 2nd row 1st column This is 2nd row 2nd column



Table with color

We can add background color to the table using the attribute "bgcolor".

This attribute can be added in "table"/"tr"/"td" tag.
The color can be set on the whole to table or to rows and column



Example Code:


<table border=1 bgcolor="green">

<tr>


<td>

This is first column

</td>

<td bgcolor="yellow">

This is second column

</td>

</tr>

</table>




Result:

The result for above tag will be as
This is first column This is second column



Table with background image