rowspan is an attribute to span multiple rows and colspan to span multiple columns.

i.e. with rowspan you can make a row span over multople columns and with colspan you can make a column span over multiple columns.

<th> tag can be used to give header to the columns

Example:

• <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 Rowspan:

Cell Padding and Spacing

cellpadding and cellspacing attributes are used 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.

Example:

• <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:

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

Example:

• <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:

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.

Table Tags

---

[Translate]

Gif stand for Graphics Interchange Format.

Gifs are used for banners, clip art, and buttons. gifs can have a transparent background and so we can place them above any content on the website. But also gifs are usually larger files, not as compressed as a jpeg, which calls for slow load times and large transfer rates.Moreover Gifs can have only 256 colors.

Jpegs, have an unlimited color wheel, and have a high compression rate downsizing your load times and saving hard drive space. But Jpegs don’t allow for transparent backgrounds. Its best to use Jpegs for photo galleries, or artwork to allow the viewer to catch that extra bit of detail. Avoid Jpegs for graphical design, stick to using them for thumbnails and backgrounds.

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

How it looks in a browser:

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

Headings in a Table

Headings in a table are defined with the <th> tag.

How it looks in a browser:

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

How it looks in a browser:

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

How it looks in a browser:

---

[Translate]

Thumbnail is a low quality small sized image which represents a high quality and larger image on a web page. Thumbnails are used for the faster loading of the web page. They are small in size so they load quickly as the page loads. They serve as a link to the high resolution image and if in case a user want to see the actual image they can click on the thumbnail and can see the real image.

Example:

• <a href=”sunset.gif”>
• <img src=”thmb_sunset.gif”>
• </a>

---

[Translate]

To align the images according to the content in your website you can use the align attribute.

1.         align (Horizontal)

• right
• left
• center

2.         valign (Vertical)

• top
• bottom
• center

Example:

• <p>This is paragraph 1, yes it is…</p>
• <p><img src=”sunset.gif” align=”right”>The image will appear along the…isn’t it?</p>
• <p>This is the third paragraph that appears…</p>

Image Wrap Arond:

This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works.

The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren’t talking about that, so it’s rather a waste, isn’t it?

This is the third paragraph that appears below the paragraph with the image!

---

[Translate]

Images are always a plus point in your website. They highlight the effect of the contents. so it is very important that you use them properly.

<img /> tag is used to place an image on your web page.

the src attribute takes the address of the image to be displayed and the browser shows the image in its place.

Example:

• <img src=”sunset.gif” />

Image:

Image src

Src stands for source, the source of the image or more appropriately, the address of the image.

We can use local images as well as the global images. ie. we can use the images inside our domin with a relative address or we can use an image at some other location or some other website by providing the exact or the complete URL.

The first one is called relative addressing, and the second is called absolute addressing.

URL Types:

With relative addressing you will have to keep everything in your domain only which means a lot of space requirement

whereas in absolute adressing you don’t need to worry about the space in your domain. But absolute addressing poses a problem if the web master(s) of the other site happen to change the physical location of the picture file.

The decision depends on you, which factor to consider.

Alternative Attribute

Whenever you use images and graphics on your website it makes the loading of the page slow.sometimes the browser doesn’t support the content you have put there, in such cases the area remains blank and the user doesn’t know anything what goes there.

In such cases we use the alt attribute.

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.

Example:

• <img src=”http://example.com/brokenlink/sunset.gif” alt=”Beautiful Sunset” />

Alternative Text:

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:

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.

Image Tags

Image Height and Width

You can define the height and width of the image, rather than letting the browser compute the size.

height and width attributes of an image element helps in providing the width and height you want to give tou your image.

Example:

• <img src=”sunset.gif” height=”50″ width=”100″>

By informing the browser of the image dimensions it knows to set aside a place for that image. Without defining an image’s dimensions your site may load poorly; text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture.

---

[Translate]

Download links are same as text links. Problems come when you want to place image links for download.

The solution for this problem is to use a thumbnail link for the images.

Example:

• <a href=”http://www.xyz.com/pics/htmlT/blanktext.zip”>Text Document</a>

Download a Text Document:

• Text Document

Default Links; Base

<base> tag is used to provide a default link for all the other links on your page

It’s a good practice to set a base tag just in case your links become bugged somewhere down the line.

the base is usually set to the home page.

Example:

• <head>
• <base href=”http://www.xyz.com/”>
• </head>

---

[Translate]

While defining an email link you can even provide some additional information like the subject or even the body also.

you can define a uniform subject which users can automatically have when they click the link.

This type of facility can be provided while taking feedback from the users visiting your website, or in case you want to take some survey.

·           Subject – Populates the subject of the email with the information that you provide.

·           Body – Populates the body of the email with the information that you provide.

Example:

• <a href= “mailto: a@b.com?subject=Web Page Email&body=This email is from your website” >2nd Email Example</a>

Complete Email:

• 2nd Email Example

Example:

• <a href=”mailto:email@xyz.com?subject=Feedback&body=Good work!”>
• Email@xyz.com</a>

Complete Email:

• Email@xyz.com

---

[Translate]

<a></a> tag is used to define the start and ending of an anchor.the link is given as the value of the href attribute. The text you place between the opening and closing tags will be shown as the link on a page.

Example:

• <a href=”http://www.xyz.com/” target=”_blank” >XYZ Home</a>
• <a href=”http://www.espn.com/” target=”_blank” >ESPN Home</a>
• <a href=”http://www.yahoo.com/” target=”_blank” >Yahoo Home</a>

Email Links

We can make email links. whenever a user will click on the link he will be directed to a blank mail composing page with the to and the subject already filled up.

There actually is not a separate HTML tag for creating an HTML email link. Instead you use a standard HTML anchor tag <a> and set the href property equal to the email adddress, rather than specifying a web URL.

these things are done in case you want to take feedback from anyone visiting your webpage.

Example:

• <a href=”mailto:email@xyz.com?subject=Feedback” >Email@xyz.com</a>

Email Links:

• Email@xyz.com

---

[Translate]

An anchor can be given a name of its own, this name is used for the internal linking within the page.

• <h2>HTML Links and Anchors<a name=”top”></a></h2>
• <h2>HTML Text Links<a name=”text”></a></h2>
• <h2>HTML Email<a name=”email”></a></h2>

Now create the reference links, placing the # symbol followed by the name of the anchor in the href of the new link.

Anchor Code:

• <a href=”#top”>Go to the Top</a>
• <a href=”#text”>Learn about Text Links</a>
• <a href=”#email”>Learn about Email Links</a>

Local Links:

• Go to the Top
• Learn about Text Links
• Learn about Email Links

---

[Translate]

The href attribute in an anchor tag defines a reference, an address that the link refers to. Basically this is where the user will be taken if they click this link.

Hypertext references can be Internal, Local, or Global.

·           Internal – Links to the current page

in the href attribute we give the name of the anchor we need to link to in our page, preceeded by a hash (#)

·           Local – Links to other pages within your domain

in the href attribute we give a relative address of our own domain

·           Global – Links to other domains outside of your site

in the href attribute we provide the full URL of the web page we are making a link to.

Example:

Internal – href=”#anchorname”

Local – href=”../pics/picturefile.jpg”

Global – href=”http://www.xyz.com/”

Target Attribute

The target attribute defines where to open the linked document or page., ie on the same page or on a new page or in some frame if frmaes are used.

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

Example:

---

[Translate]

A webpage is nothing without connections. In fact, its web because its connected just like a spider web. There are lots and lots of web pages and much more links to move from one page to another.

Think of a scenarion if we don’t have any links. then we either need to have all the names of different pages or the pages itself will go so long that you will go on scrolling and scrolling.

In a practical way its not possible at all to build a website without any links. We have different kind of websites with different matter in each of them. Even a single site is very varid in terms of content, and each type of content is kept in a different page. We constantly need to navigate between different pages to collect information we want.

Links take us to different pages from a single point and let us come back anytime we need.

Links are basically providing a third dimension to the web pages, ie the depth, we can go any deeper we want to in a web page.

HTML links are defined with the <a> tag. Its called the anchor tag

Note: The link address is provided as an attribute.

An anchor can be anything , a text, a letter, a paragraph, images, graphics, animations, depending upon our choice and use.

---

[Translate]

The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.

Hexadecimal Color Values:

Giving hexadecimal values:

bgcolor=”#FFFFFF”

This code represents white color.

The letter “F” is the maximum amount that we can give to each color .

The following formula can be used to calculate the numeric equivalent of a hexadecimal.

The value 255 is the maximum allowed for any primary color.

Hexadecimal Formula:

• (code * 16) + (code) = value in decimal

Take the first value (F) or 15 multiply it by 16 and add it to the second value, 15.

Example 2:

• bgcolor=”#CC7005″

• CC is the two digit code for the red part of the color and c stands for 12 so in the above formula we put 12 in place of code.

• (12 * 16) + (12) = 204

Similarly for the green part we do

• 70(GG – Green)
• (7 * 16) + (0) = 112

and for the blue part we have to do

• 05(BB – Blue)
• (0 * 16) + (5) = 5

Hexadecimal codings are much consistent while working on different browsers. So its a good practice to use this coding only, it helps maintaining a consistency in the look and feel of the web pages.

Further If you dont want  your colors to be changed even slightly, then use the hexadecimal values in pairs for color. Examples: “#0011EE”, “#44HHFF”, or “#117788″. These are called True Colors, since they will stay true in hue from browser to browser.

---

[Translate]

This coloring scheme has 6 digits, including 0-9 numeric characters and alphabets A,B,C,D,E, and F

Like in RGB coding we used 3 digits to represent a single color, here we use only 2 digits to represent that color, however the sequencing is RGB only. ie The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

To distinguish that a code is an hexadecimal color code, the digits are preceeded by english alphabet “x”

The hexadecimal system is complex and difficult to understand at first.

That means a hexadecimal code for a red color will be
xff0000
where x represents that its an hexadecimal code, ff means red color is in full, 00 means no green color and 00 further means no blue color also.

---

[Translate]

Note: We do not recommend that you use RGB for safe web design because non-IE browsers do not support HTML RGB.

It stands for RedGreenBlue. Each color is represented as a combination of these three colors. Its a set of 9 digits, 3 for each color whose value ranges from 0 to 255

The value 0 says that theres none of that color and 255 shows that the particular color is in full.

The format for RGB is – rgb(RED, GREEN, BLUE).

Red, Green, and Blue Values:

---

[Translate]

We can color the text of our documents using the html colors.

We can use them in 3 different ways.

We can use Generic names for the colors like black, green, yellow etc.

We can use the RGB codes.

We can use their hexadecimal code.

Generic terms of colors is the simplest of all. Generic colors are preset HTML coded colors where the value is simply the name of each color. Here is a sample of the most widely supported colors and their respective name values.

The 16 Basic Colors:

---

[Translate]

Customize your fonts to achieve any of your desired looks.

Example:

<p><font size=”7″ face=”Georgia, Arial” color=”maroon”>C</font>ustomize

your font to achieve a desired look.</p>

Customize your font to achieve a desired look.

Style Examples:

·           Background Color

·           <body style=”background-color:yellow”>

·           The style attribute defines a style for the <body> element.

Font Family, Color and Size

·           <p style=”font-family:courier new; color:red; font-size:20px”>

·           The style attribute defines a style for the <p> element.

·           The new style attribute makes the old <font> tag obsolete.

Text Alignment

·           <h1 style=”text-align:center”>

·           The style attribute defines a style for the <h1> element.

·           The new style attribute makes the old “align” attribute obsolete.

·           A link is the “address” to a document (or a resource) on the web.

---

[Translate]

This attribute sets the color of your text.

Example:

• <font color=”#990000″>This color has the hexadecimal value #990000</font>
• <br />
• <font color=”red”>This text is red</font>

This color has the hexadecimal value #990000
This text is red

Font Face

This attribute changes the font face of the text.If the font face name provided is not present in the system the page text will be formatted in Times New Roman.

We can provide multiple values within double quotes separated by commas. They will be prefferred according to their places i.e. If the first ont face is available the text will be formatted in that, if not then the second font face will be tried and so on, if none of the given font face is available the text will be shown in the default Times New Roman font.

An option is to choose some fonts which are similar in appearance and we can provide all of them as the value and any of them is available the contents will be formatted in that font.

Example:

• <p>
• <font face=”Bookman Old Style, Book Antiqua, Garamond”>This paragraph
• has had its font…</font>
• </p>

Font Face:

This paragraph has had its font formatted by the font tag!

---

[Translate]

This attribute Set the size of your font with.

The range of accepted values is from 1 to 7. 1 is the smallest font size and 7 is the largest

The default size of a font is 3.

Example:

• <p>
• <font size=”5″>Here is a size 5 font</font>
• </p>

Here is a size 5 font.

---

[Translate]

The <font> tag is used to add style, size, and color to the text on your site. Use the size, color, and face attributes to customize your fonts.

a <basefont> tag is used to format all of your text to a general formatting ie size, color, and face.

The font and basefont tags are deprecated and should not be used. Instead, use css styles to manipulate your font.

---

[Translate]

In HTML 4, some tags and attributes are deprecated. Deprecated means that they will not be supported in future versions of HTML and XHTML.

We should avoid the use of deprecated tags and attributes.

---

[Translate]