HTML SI CSS

8/3/2019 HTML SI CSS

1/131


2/131

the emphasis tag using the emphasis tag

embed

object

(Tip)

embed

object

Music will begin

playing when your page

is loaded and will only

play one time. A controlpanel will be displayed

to enable your visitors

to stop the music.

fontExample

Example (Tip)

fontExample Example(Tip)

fontExample Example(Tip)

form

Name:
Email:

Name: (Tip)

Email:

heading

1

heading

2

heading

3

heading

4

heading

5heading

6

Heading 1 Example

Heading 2 ExampleHeading 3 Example

Heading 4 Example

Heading 5 ExampleHeading 6 Example

heading

of

HTML

documen

t

Contains elements describing thedocument

Nothing will show


3/131

horizont

al rule

Contents of your web

page (Tip)


page

horizont

al rule


page


page

horizont

al rule


page


page

(InternetExplorer)

horizontal rule


pageContents of your web

page

(InternetExplorer)

horizont

al rule


page


page

hypertex

t markup

language

Title of your web page

HTML web page contents

Contents of your webpage

italic Example Example

image

(Tip)

input

field

Example 1:

Example 1: (Tip)
http://www.web-source.net/216_color_chart.htm.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm.htmhttp://www.web-source.net/216_color_chart.htm


4/131

(Internet

Explorer)

input

field

Example 2:

Example 2: (Tip)

input

field

Example 3:

Example 3: (Tip)

inputfield

Example 4:

Enter Your Comments:

Example 4: (Tip)

inputfield

Example 5:

Select an option:

option 1

option 2option 3

option 4

option 5

Example 5: Tip)

Select an option:


5/131

option 6

input

field

Example 6:

Select an option:

Option 1

Option 2

Option 3

Select an option:

Selection 1

Selection 2

Selection 3

Example 6: (Tip)

Select an option:

Option 1

Option 2

Option 3

Select an option:

Selection 1

Selection 2

Selection 3

list item

Example 1:

List item 1

List item 2

List item 3

Example 2:

List item 1List item 2

List item 3

List item 4

Example 1: (Tip)

List item 1

o List item 2

List item 3

Example 2:

i. List item 1ii. List item 2

iii. List item 3

iv. List item 4

link


6/131

href="style.css" />

(InternetExplorer)

scrolling

text

ExampleMarquee

(Tip)

menu


List item 3

List item 1

o List item 2

List item 3

meta

Nothing will show (Tip)

meta

Nothing will show (Tip)

metaNothing will show (Tip)

meta Nothing will show (Tip)



ordered

list

Numbered


List item 3

List item 4

Numbered Special Start


List item 3

List item 4

Numbered

1. List item 1

2. List item 2

3. List item 34. List item 4

Numbered Special

Start

5. List item 16. List item 2

7. List item 3

8. List item 4

Lowercase Letters
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm


7/131

Lowercase Letters

List item 1


List item 4

Capital Letters

List item 1

List item 2

List item 3

List item 4

Capital Letters Special Start

List item 1

List item 2


Lowercase Roman Numerals

List item 1


List item 4

Capital Roman Numerals


List item 3

List item 4

a. List item 1b. List item 2

c. List item 3

d. List item 4

Capital Letters

A. List item 1

B. List item 2

C. List item 3

D. List item 4

Capital Letters Special

Start

C. List item 1D. List item 2E. List item 3

F. List item 4

Lowercase Roman

Numerals

i. List item 1

ii. List item 2

iii. List item 3

iv. List item 4

Capital Roman

Numerals

I. List item 1

II. List item 2III. List item 3

IV. List item 4

Capital Roman

Numerals SpecialStart

VII. List item 1

VIII. List item 2

IX. List item 3

X. List item 4


8/131

Capital Roman Numerals Special Start

List item 1

List item 2List item 3List item 4

listbox

option

Select an option:

option 1

option 2option 3

option 4

option 5option 6

Select an option: (Tip)

paragrap

h

This is an example displaying the use of the

paragraph tag.

This will create a linebreak and a space between lines.

Attributes:

Example 1:

This is an example

displaying the use

of the paragraph tag.

Example 2:

This is an example

displaying the use


Example 3:

This is an example

This is an example

displaying the use of theparagraph tag.

This will create a line

break and a space

between lines.

Attributes:

Example 1:

This is an example

displaying the use


Example 2:

This is an example

displaying the useof the paragraph tag.


9/131

displaying the use

Example 3:

This is an example

displaying the use


small

(text)Example Example(Tip)

deleted

textExample Example

strong

emphasisExample Example

table Example 1:

Column 1

Column 2

Example 2: (Internet Explorer)

Column 1

Column 2

Example 3:

Column 1

Column 2

Row 2

Row 2

Example 1: (Tip)

Column 1 Column 2

Example 2: (Tip)

Column 1 Column 2

Example 3: (Tip)

Column 1 Column 2

Row 2 Row 2
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm


10/131

tabledata

Column 1

Column 2

Column 1 Column 2

table

header

Column 1

Column 2

Column 3

Row 2

Row 2Row 2

Row 3

Row 3

Row 3

Row 4Row 4

Row 4

Colum

n 1

Colum

n 2

Colum

n 3

Row 2 Row 2 Row 2

Row 3 Row 3 Row 3

Row 4 Row 4 Row 4

documen

t titleTitle of yourHTML page

Title of your web page

will be viewable in the

title bar. (Tip)

table row

Column 1Column 2

Column 1 Column 2

teletype Example Example


11/131

underlin

eExample Example

unordere

d list

Example 1:

List item 1

List item 2

Example 2:

List item 1

List item 2

List item 3

List item 4

Example 1:

List item 1 List item 2

Example 2:

List item 1

List item 2

o List item

3

o List item4

If you're looking for a great way to spice up your HTML tables, this HTML mouseover

code may be just what you're looking for.

Place your mouse pointer over each of the HTML table cells below to view this HTML

mouseover effect. The HTML table cells will change to a specified color when you placeyour pointer overthe cells.

This HTML code will enable you to give your HTML tables a more professional lookand feel, as it will greatly improve the presentation of your HTML table data.

However, when using this HTML code, please ensure that you only use light colorswithin your HTML table cells to ensure your text can be easily viewed.

HTML table data 1

HTML table data 2

HTML table data 3

Place the following code within the or tag of your HTML table code:

onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'"

Your table code might look something like this:

Your Table Data
http://www.web-source.net/changing_table_colors.htmhttp://www.web-source.net/changing_table_colors.htm


12/131

Your Table DataYour Table Data

Change the text indicated in bold to suit your needs. However, make sure you select abackground color that will enable your text to be easily viewed.

If you're looking for a way to display a web page within a web page, this HTML codemay be just what you're looking for.

As you can see in the example below, we are displaying a web page within the web pagethat you are viewing right now.

This HTML code will enable you to display rotating tips, images or whatever you'd like.

Copy and paste the code below into your web page where you would like to embed the

additional page.

Copy and paste the code below into your web page where you would like to embed the additional

page.

Error:Embedded data could not be displayed.

Change the text indicated in bold to suit your needs.

The "tabindex" value determines the order in which you will tab through the text

boxes.
http://www.web-source.net/embedding_web_pages.htmhttp://www.web-source.net/embedding_web_pages.htm


13/131

If you would like the tab order to skip a certain area, such as check boxes and radio

buttons, simply use a negative value beginning with "-1" then "-2" and so on. Eachnegative value will be bypassed when tabbing through your form.

Copyright Shelley Lowery

About the Author:

Shelley Lowery is a successful well-known Internet Marketer and owner of severalsuccessful sites, including www.Web-Source.net.

Would you like to learn how to design a web site?

Learn at your own pace with 100's of copy and paste codes, screen shots and

examples. Get your web site up fast with over 100 professionally designed web sitetemplates. Visit the Web Design Mastery site to download your free chapters (77

pages)!

A gradient background effect will display your selected HTMLbackground colors in ascending ordescending color variations - from lightest to darkest or darkest to lightest.

This powerful HTML code effect can be used to give your web pages a unique look and feel.However, it must be used very cautiously.

Please ensure that you select your HTML web page background colors very carefully, as yourtext must be clearly visible through the background colors you select.

In addition, you must select one light color and another color that is several shades lighter inorder for this HTML gradient background effect to display properly.

This effect can be used for your entire web page background, or within your table cells.To use the gradient effect asyour web page background, use the following BODY tag:

To use the gradient effect within your HTML tables, place the following code within your table tag:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2',startColorstr='#FFFFFF', gradientType='0');"

Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradienteffect to display properly, you must select one light color and another color that is several shadeslighter.
http://www.web-source.net/?synhttp://www.webdesignmastery.com/http://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/?synhttp://www.webdesignmastery.com/http://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/html_background_gradient.htm


14/131

If you're using a list management system that requires specific text to be placed within the emailsubject or body of your email, this HTML code is for you.

Many times, if you request your visitors to type in a specific email subject or body text in order tosubscribe to your publication, they may not type the required text correctly. This mistake willcause you to lose your subscriber, as your system will reject the subscription request.

To prevent this problem, you can create an email link that will automatically fill in the subject lineand body when clicked on.

[email protected] the following code to your HTML.

[email protected]

If you're looking for a way to open a new window when you leave a web page, this code may bewhat you're looking for.

This HTML code will open the web page you specify as soon as you leave the original web page.

This provides a great way to gain new subscribers to your publication, introduce a product orwhatever you'd like.

Opening a new window on page unload, or in other words, when your visitor is leaving your pageis also a great way to make one last try to make a sale. You're visitor is leaving your site anyway,so this is your last chance to sell them. Make it count.

If you don't have a special offer of your own to introduce, use the window to open an affiliate site

that you may be promoting. This provides a great way to bring the affiliate site to their attentionand even make a sale.

Place the following code, indicated in bold, withinyour web page's BODY tag:

Change the web address to the page you would like to open.
http://www.web-source.net/html_email_subject2.htmmailto:[email protected]?subject=Your%20Subject&body=Message%20for%20the%20body.http://www.web-source.net/html_window_unload.htmhttp://www.web-source.net/html_window_unload.htmhttp://www.web-source.net/html_email_subject2.htmmailto:[email protected]?subject=Your%20Subject&body=Message%20for%20the%20body.http://www.web-source.net/html_window_unload.htm


15/131

If you're in need of an HTML code that will enable you to specify the spacing between yourimages, this HTML code is for you.

In the example below, although the images are the same, they aren't diplaying the same, as theirvertical and horizontal alignment is different.

These images haven't been placed within an HTML table and aren't aligned via CSS. They arebeing displayed via the HSPACE and VSPACE attributes, which will enable you to specify thehorizontal and vertical spacing between your images.

You can specify the horizontal and vertical spacing by editing the VSPACE and HSPACE values.

Contact Us

If you're displaying youremail address on your web site, you may be unknowingly setting yourselfup to receive a ton of spam email. Unfortunately, spam robots are continuously crawling theInternet in search of email addresses they can use to not only send spam, but also sell to otherspammers.

However, although it's very difficult to protect yourself from receiving spam email, there is a wayyou can still display your email address on your web site and protect it at the same time.
mailto:[email protected]://www.web-source.net/html_protect_email.htmhttp://www.web-source.net/html_protect_email.htmmailto:[email protected]://www.web-source.net/html_protect_email.htm


16/131

Instead of displaying the usual mailto:[email protected] email link withinyour web page, usethe following code within your HTML:

Contact Us

When your email link is clicked on, it will display your email address correctly.

Change the email address in the example above to the email address you would like to display.

By using this simple little code, you can protect your email address from spam bots.

If you're linking to other web sites within your web pages, you certainly don't want to just give yourvisitors away. For this reason, it is highly recommended that you open links to other web siteswithin in new window.

This will enable your web page to stay open within a window, even if your visitor clicks on anoutside link, and prevent you from completely losing your visitors.

The following HTML code will enable you to open a web page in a new window:

Your Text

Edit the text in red and add TARGET="_blank" to your link code.

Open all links in a new window

If you're linking to a lot of other web sites within your web page and would like to open all of yourlinks in a new window, this HTML code is for you.

The following HTML code will enable you to open all of your links in a new window. Place thiscode between your and tags within your HTML:

If you need to redirect your visitors to a new page, this HTML redirect code may be just whatyou're looking for.

When designing a web site, many times you must change the location of a web page. However, ifthe page is popular, your visitors may have already linked to it. In addition, the Search Engines
http://www.web-source.net/html_protect_email.htmhttp://www.web-source.net/html_protect_email.htmhttp://www.web-source.net/html_new_window.htmhttp://www.web-source.net/html_protect_email.htmhttp://www.web-source.net/html_new_window.htm


17/131

have most-likely already indexed the page.

For this reason, it is best to replace your page with a new page that will redirect your visitors tothe new page. This provides a great way to provide your visitors with the information they werelooking for and prevent you from losing your traffic.

However, when using this HTML redirect code, please ensure that you don't use it to trick theSearch Engines, as this could get your web site banned. It is always best to workhard and learnquality ways in which to drive traffic to your web site.

Place the following HTML redirect code between the and tags of your HTMLcode.

The above HTML redirect code will redirect your visitors to another web page instantly. Thecontent="0; may be changed to the number of seconds you want the browserto wait before

redirecting.

Are you looking for a way to spice up your HTML forms? You can change the colors ofyour web page's text boxes to match the look of your web site.

Although you can change the color of your text boxes, it is highly recommended that youonly use background and font colors that will enable the text to be easily viewed. Forexample, if you'd like to use a darkerbackground color, you may want to consider usingwhite for your text color.

Edit the text indicated in bold to suit your needs.
http://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_colored_boxes.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_colored_boxes.htm


18/131

If you're using an HTML form on your web site and would like to use an image submit buttoninstead of the boring standard submit button, this HTML code is for you.

In order for your form's input box and your image submit button to line up properly, you will needto place it within an HTML table. In addition, unless your image has a transparent background,you will need to set the table background colorto the same color as the image background sothat it will seamlessly blend together.

Note: In order for your form to function properly, you must have a form processing scriptthat resides on your web server and then link to it within your form code. If you don'thave one or aren't familiar with HTML forms, you may want to contact your serveradministrator for assistance.


Using an image submission button within your HTML web page forms will enable you toeasily spice up your forms.

(Internet Explorer)

The HTML web page horizontal rule , also known as a line divider, is used to divide contentareas within a web page.

These HTML horizontal rules can be used to divideyour web page content subjects, products,
http://www.web-source.net/html_image_submit.htmhttp://www.web-source.net/html_customizing_horizontal_rules.htmhttp://www.web-source.net/html_customizing_horizontal_rules.htmhttp://www.web-source.net/html_image_submit.htmhttp://www.web-source.net/html_customizing_horizontal_rules.htm


19/131

navigational menus or whatever you'd like. They provide a great way to add color to your pageswithout using images and will enable you to improve the appearance of your web pages.

If you're using line dividers (horizontal rules) within your web page, you can change the color,width and height of the line dividers by adding some attributes to your HTML code.

The examples below show various styles of the HTML tag. They are displayed in a tableand the width attributes span the set percentage of the table. When used without a table, thewidth will span the set percentage of the entire web page.


Using customized HTML web page horizontal rules or line dividers will enable you to quickly andeasily spice up your web pages.

In addition, you can also use an image to create a horizontal rule within your HTML code.

The image below, which looks like this (a tiny blue dot): is a 2 pixel by 2 pixel image. This singleimage can be used to create an HTML vertical or horizontal line within your web page simply bychanging the HTML image code HEIGHT and WIDTH attributes.

Note: In order for this HTML code to workproperly, you will need to create an image that is 2pixels by 2 pixels in size and upload it to your web server. You will then need to link to the imagewithin your HTML image code.
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/html_vertical_rule.htmhttp://www.web-source.net/html_vertical_rule.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/html_vertical_rule.htm


20/131

If you'd like to use the image in this example, you're welcome to copy it.

Here's how:

Place your mouse pointer over the little blue dot (enlarged to assist you) below. Right click, andgo to 'Save Picture As.' A window will load and enable you to select the folder on your computerin which you'd like to save the image.

Here's the image:


HTML vertical rules provide a great way to divide your web page contect areas and add a bit ofcolor to your web page.


21/131

HTML web page tables are used within a web page to organize content. They can be displayedwithbackground colors, with or without borders, and can contain rows and columns displayed inan unlimited number of ways.

For example, if you look toward the top of this web page, right below the tabs, you will see ournavigational links displayed within an HTML web page table with a grey background. We usecolor table backgrounds throughout this web site.

HTML Web Page Table

In this example, the HTML table below contains 2 columns and 1 row. The left column has thebackground color set to #72A4D2. The right column has the background color set to #EAE8E8.

This is an example of a table withbackground colors. This HTML table has 2columns and 1 row.


Using HTML web page tables with color backgrounds is a great way to add color toyour webpageswithout using graphics.

HTML tables are displayed within a web page to neatly align content. They can contain imagebackgrounds, colored backgrounds, borders of different sizes, and an unlimited number of rowsand columns.

In this example, the HTML table below contains 2 columns and 1 row. The left column containsthe image. The original image appears below to enable you to see the actual size.

This is an example of an HTML table withan image background. This HTML tablehas 2 columns and 1 row.
http://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htm


22/131


This is the actual image used within the above table:

Notice how the image duplicated itself to fill the table's background? Keep this in mind whencreating your own image.

If you'd like to use the above image as an example to assist you in creating your own image,you're welcome to copy it.

Here's how:

Place your mouse pointer over the image above and right click on your mouse. Go to 'SavePicture As' - a window will load and enable you to select the folder on your computer in whichyou'd like to save the image.

(Internet Explorer)

If you're using HTML tables withinyour web page and would like to add a color border, this HTMLcode will assist you.

In this example, the table below contains 1 column and 1 row. Thebackground coloris set to#EAE8E8 and the border color is set to #C6C6C6.

This is an example of an HTML table with a colorborder and background.

This is an example of an HTML table with thestandard border.
http://www.web-source.net/html_colored_borders.htmhttp://www.web-source.net/html_colored_borders.htmhttp://www.web-source.net/html_colored_borders.htmhttp://www.web-source.net/html_colored_borders.htmhttp://www.web-source.net/html_colored_borders.htmhttp://www.web-source.net/html_colored_borders.htmhttp://www.web-source.net/html_colored_borders.htm


23/131


24/131

(Internet Explorer)

If you'd like to display a stationary image behind your text, you can do so by adding attributes toyour HTML body tag.

Stationary background images remain in one place even when scrolling through the page. Onlythe text will move. To create this effect, place the code below within your tag.


When selecting your background image, keep in mind that your text will be moving over yourimage, so try to select an image that won't make your text difficult to read. To prevent yourbackground image from tiling (repeating), place the following code between your and tags.

Using a stationary image background provides a great way to enhance your web page.

If you're looking for a way to spice up your HTML list bullets, this HTML tip is for you. You can usegraphic bullets to replace the standard text bullets by using the "Definition List" tag.

The key to using this technique effectively is to select or create a small graphic that willcompliment your list text and enhance your visitors experience on your web site.

Copy and paste the following HTML list code into the HTML portion of your web page.

List ItemOneList ItemTwo
http://www.web-source.net/html_stationary_background.htmhttp://www.web-source.net/html_stationary_background.htmhttp://www.web-source.net/html_stationary_background.htmhttp://www.web-source.net/html_stationary_background.htm


25/131

List ItemThreeList ItemFour

Edit the text indicated in red to suit your needs.

Using graphic bullets within your HTML web pages will enable you to give your lists your owncustomized look.

If you've ever tried to display an HTML table with borders within your web page, you may havediscovered that unless you are displaying some text or an image within a table cell, the border willnot display. However, this HTML tip will enble you to display an HTML table with borders even ifsome of your cells are empty.

Following is an HTML table that contains some empty table cells. Notice the borders do notdisplay within the empty table cells.

Your Text Your Text

Your Text

Simply by adding the special character code within your HTML code, your HTML tablecells will be visible.

Your Text Your Text

Your Text

Copy and paste the following HTML code into the HTML portion of your web page.

Your TextYour Text
http://www.web-source.net/html_table_placeholder.htmhttp://www.web-source.net/html_table_placeholder.htm


26/131

Your Text

Place the character within the table cells that will be empty.

HTML web page tables can be a bit tricky sometimes, but they will enable you to give your webpages a great layout and are well worth the trouble.

If you're trying to place text directly beside an image within your web page HTML code, you mayhave discovered it's not as easy as it appears. When you place your image HTML code and textwithin your HTML code, instead of the text and image displaying side by side like a newspaper, itwill display like this:

The text is displaying at thebottom of the image.

To enable your image and text to display properly together, you will need to add an ALIGNattribute to your image HTML code.

Following is an example image displaying on the left with the text wrapping around the image tothe right.

By placing the above codewithin your HTML, your imagewill be displayed on the lefthand side with your textdisplayed on the right.

As you continue to type yourtext, it will automatically formatitself to wrap around the right

side and the bottom of your image. Thisexample has been set up with a table to keepthe text neatly aligned within a limited amount ofspace. This table's width is set up to span 50%of the page width.


27/131

To align your image to left and your text to the right, add ALIGN="left" to your image HTML codelike this:

Your Text

Following is an example image displaying on the right with the text wrapping around the image tothe left.

By placing the above codewithin your HTML, your imagewill be displayed on the righthand side with your textdisplayed on the left.

As you continue to type yourtext, it will automatically formatitself to wrap around the leftside and the bottom of your image. Thisexample has been set up with a table to keepthe text neatly aligned within a limited amount ofspace.This table's width is set up to span 50%of the page width.

To align your image to right and your text to the left, add ALIGN="right" to your image HTML codelike this:

Your Text

Wrapping your text around your image will enable you to give your content a much moreprofessional look.

If you would like to provide your web site visitors with a simple way to contact you from your website, but really don't want to display youremail address, this HTML form code may be what you'relooking for.

You can create a simple form, as displayed below, to enable your visitors to send you comments,questions, product support requests, or whatever you'd like.

Name:
http://www.web-source.net/html_text_image.htmhttp://www.web-source.net/html_text_image.htmhttp://www.web-source.net/html_email_form.htmhttp://www.web-source.net/html_text_image.htmhttp://www.web-source.net/html_text_image.htmhttp://www.web-source.net/html_email_form.htm


28/131

Email:

Comment:

Copy and paste the following HTML code into the HTML portion ofyour web page:

Name:Email:Comment:
http://www.web-source.net/html_email_form.htmhttp://www.web-source.net/html_email_form.htmhttp://www.web-source.net/html_email_form.htmhttp://www.web-source.net/html_email_form.htm


29/131

Change the text indicated in red to your email address.

Displaying an email form on your web page provides a great way to enable your visitors tocontact you.

When designingyour web pages, there may be a time when you will want to remove theunderline of an individual text hyperlink. Although it is always best to leave hyperlinks at theirdefault settings, as this is what your visitors will be used to, this HTML tip will assist you removingthe link underline.

Following is an example of a link displayed without the underline:

Example Link

To remove a link underline, add STYLE="TEXT-DECORATION: NONE" to your link code:

YourLink

Although the above code will enable you to remove the underline within a hyperlink, please usethis code with caution to ensure that you don't confuse your visitors.

When designing web pages, there may be times when you would like to change the standard webpage hyperlink color to a color that will match your web site design. Although it is always best toleave your link colors at their default settings, as this is what your visitors are used to, thefollowing html tip will assist you in changing your link color.

Following is an example link that is displayed in a different color than the default:

Example Link

To change the color of an individual link, add a FONT tag within your link code:
http://www.web-source.net/html_link_underline.htmhttp://www.web-source.net/html_link_underline.htmhttp://www.web-source.net/html_style_tags.htmhttp://www.web-source.net/html_style_tags.htmhttp://www.web-source.net/html_link_underline.htmhttp://www.web-source.net/html_style_tags.htmhttp://www.web-source.net/html_style_tags.htm


30/131

Your Link

Although the above code will enable you to change the color of an individual hyperlink, pleaseuse this code with caution, as you don't want to confuse your visitors.

When designing a web page, many times you may want to create a link from one section of aweb page to another. This isn't a standard link we're referring to, but a link that actually takes youto another section within the same web page. For example, maybe you have information at thetop ofyour web pageand would like to link to further information at the bottom of your web page.This html code will enable you to do just that.

You can create a link within the same web page. The example link below is linked to a word atthe bottom of this page.

Example Link

Step #1

Select the area of text that you want the link to take you to when clicked on. In the aboveexample, the text we linked to below is HTML, which is located within the "Submit your HTMLcode snippets" sentence below.

Once you select the word that you would like to link to, you will need to create an anchor link likethis:

Text

The text indicated in bold will be the text you select, which in our example on this page was

HTML. Although you can change the text indicated in red to whatever you'd like, it's a bit easier toremember if you just use the same text a what you have selected your anchor text to be. Soagain, in the above example, we used HTML. When we created our anchor, it looked like this:Submit yourHTML code snippets.

Step #2
http://www.web-source.net/html_link_anchors.htmhttp://www.web-source.net/html_link_anchors.htmhttp://www.web-source.net/html_link_anchors.htm#HTMLhttp://www.web-source.net/html_link_anchors.htmhttp://www.web-source.net/html_link_anchors.htm#HTML


31/131


32/131

recommended, as yourfile sizewill be the same.

Following is an example of a standard image and then the same image resized by changing theHEIGHT and WIDTH values:

Original Image

Resized Image

When resizing a web page image, please ensure that you make the same amount of change toboth the HEIGHT and the WIDTH values to ensure the image will display properly.

If you would like to change or remove your web page margins, you can change them

by placing the following attributes within your tag.

To change or remove the top, bottom and side page margins on a web page, place

the following code within your tag:

This code is compatible with both Internet Explorer and Netscape Navigator.

Internet Explorer supports:

topmargin=0bottommargin=0

leftmargin=0

rightmargin=0
http://www.web-source.net/html_resizing_images.htmhttp://www.web-source.net/html_resizing_images.htmhttp://www.web-source.net/html_full_screen.htmhttp://www.web-source.net/html_resizing_images.htmhttp://www.web-source.net/html_full_screen.htm


33/131

Netscape Navigator supports:

marginheight=0

marginwidth=0

Make sure you use them all to enable your web page to be properly viewed in bothbrowsers.

You can create a web page HTML mouseover text description, similar to an image alt

tag, that will be viewed when your mouse is placed over the text link. Not only will

this provide your visitors with further information in regard to your link, but it alsoprovides a good way to place additional keywords within your web page for better

Search Engine ranking.

Example:

Your TextPlace "TITLE="your text description"" within your HTML link code.

YourText

In addition, you can display your description text in a list by adding the

characters following each text line.

Your Text

http://www.web-source.net/html_full_screen.htmhttp://www.web-source.net/html_mouseover_text.htmhttp://www.yourdomain.com/http://www.web-source.net/html_full_screen.htmhttp://www.web-source.net/html_mouseover_text.htmhttp://www.yourdomain.com/


34/131

The above TITLE description would be displayed like this when you place your mouseover the link:

Your Text

You can display your link description in the status bar of your browser. When the

mouse is placed over a link, the link description will be viewed in the status bar.

Example:

Place your mouse over this linkLook within the lower left-hand side of the status bar to view the link description.

Copy and paste the following code into the HTML portion ofyour web page whereyou would like the link to appear:

Yourlinked text

Change the text where indicated in red.

Another great use for this code is to hide an affiliate address. Many times, you will

find that if your visitors see a link you are referencing is an affiliate link, they won'tclick on it. To alleviate this problem, you can use this HTML tip to hide your affiliate

address.

Example:Recommended Link

Recommended Link
http://www.yourdomain.com/http://www.web-source.net/html_status_description.htmhttp://www.domain.com/http://www.web-source.net/html_status_description.htmhttp://www.affiliatedomain.com/?youraffiliateidhttp://www.yourdomain.com/http://www.web-source.net/html_status_description.htmhttp://www.domain.com/http://www.web-source.net/html_status_description.htmhttp://www.affiliatedomain.com/?youraffiliateid


35/131

Change the text where indicated in red as follows:

http://www.affiliatedomain.com/?youraffiliateid- This link should be changed to youractual affiliate address.http://www.affiliatedomain.com- This link should be changed to the link or text you

would like your visitors to see within their status bar when they place their mousepointer over the link.

Recommended Link- This text should be changed to the text you would like to bedisplayed within your web page.

If you're using a list management system that requires a certain subject line withinan email message, many times, you'll find that if you request that a certain word be

placed within the subject of an email, it won't be provided. This code can be used toensure that your email subject is filled in exactly as you require.

Example:

Click Here to test the auto-fill emaillink

Copy and paste the following code into the HTML portion ofyour web page whereyou would like the email link to appear:

Edit the text in red to suit your needs.
http://www.web-source.net/html_email_subject.htmhttp://www.web-source.net/html_email_subject.htmmailto:[email protected]?subject=Autofilled%20Subjecthttp://www.web-source.net/html_email_subject.htmhttp://www.web-source.net/html_email_subject.htmhttp://www.web-source.net/html_email_subject.htmmailto:[email protected]?subject=Autofilled%20Subjecthttp://www.web-source.net/html_email_subject.htm


36/131

If you're looking for a way to highlight certain links and/or text within your webpage, this HTML tip may be your answer. You can highlight your links and text in any

color you'd like simply by using STYLE tags.

Highlighting a Link:

http://www.yourdomain.com/

Copy and paste the following code into the HTML portion of your web page where

you would like the link to appear:

Linked Text

Edit the text in bold to suit your needs.

Highlighting Text:

Example: Example of highlighted text

Copy and paste the following code into the HTML portion of your web page where

you would like the link to appear:

Example of highlighted

text

Edit the text in bold to suit your needs. However, keep in mind, the text must be

visible through the background color you select, so please ensure you select a lightcolor.
http://www.web-source.net/html_highlight_ffa.htmhttp://www.web-source.net/html_highlight_ffa.htmhttp://www.yourdomain.com/http://www.web-source.net/html_highlight_ffa.htmhttp://www.web-source.net/html_highlight_ffa.htmhttp://www.web-source.net/html_highlight_ffa.htmhttp://www.yourdomain.com/http://www.web-source.net/html_highlight_ffa.htm


37/131

Tracking your advertising strategies is an important part of doing business. However, purchasingan ad tracking software program can be expensive. If you're looking for a simple way to track youradvertising, this HTML tip may be your answer.

You can track your classified ads using a simple code; however, you must have access to yourweb site logs to view your results. When you place your ads, instead of using your regular webaddress, use something similar to the code below:

http://www.yourdomain.com?ad_one

Change the name after the question mark for each ad you place. When you view your logs, youwill be able to see exactly which ads are effective and which ads aren't.

If you're looking for a way to prevent browser cache, this HTML tip will assist you.

Meta tags are used to give detailed instructions in regard to a web page to theSearch Engines and browsers.

When you get visitors coming to your web site, your visitors browser will cache ormake a copy of your web site for faster viewing their next visit. This will prevent

your regular visitors from seeing your new content unless they manually reload their

browser.

If you don't regularly update your web site, browser cache may not be a problem.However, if you're continuously updating your web site, you may want to prevent

browser cache to ensure your regular visitors will see the latest version of your web

site.

You can prevent browser cache simply by including a special META tag within your

HTML code.

Add the following code between the and tags of your HTML.
http://www.web-source.net/html_no_cache.htmhttp://www.web-source.net/html_no_cache.htm


38/131

If you're looking for a way to prevent Search Engines from indexing certain webpages within your web site, this HTML tip is for you.

Meta tags are used to give detailed instructions in regard to a web page to theSearch Engines and browsers.

Many times, you may have a web page that you don't want the Search Engines to

index, such as download pages or private membership sites. To help with thisproblem, add one of the following META tag codes between the and

tags of your HTML.

The following META tag tells the Search Engine robots not to index this page and not

to follow any links within the page:

The following META tag tells the Search Engine robots not to index this page, butfollow any links within the page:

WEB PAGE TEXT

The FONT tag is used to display your text in a specific style.

Although you may specify the font style you would like your text to be displayed,

please keep in mind, if your visitor doesn't have the font face you specify on theircomputer, the text will be displayed in the users default font setting.

To make sure your pages are being viewed as you intended, you should includealternative fonts within your HTML web page font tag.
http://www.web-source.net/html_no_index.htmhttp://www.web-source.net/html_no_index.htm


39/131

Your Text

The code above tells the browser to display your text in Verdana, but if your visitor

doesn't have Verdana to display your text in Helvetica and so on.

By including font alternatives, you can ensure your page will be displayed exactly as

you had intended.

The HEADING tag is used to display your heading text in a larger font with being the largest down to being the smallest.

Some Search Engines place relevance on text displayed within the tags, soplace some of your most relevant keywords within any of the 6 tags.

Example:

Your Guide to Health & Fitness

Browser View:

Your Guide to Health & Fitness

When using the HEADING tags, you don't have to use the for your first

heading. You may begin with the heading size of your choice. However, for yoursecondary headings, you should not use a larger heading than you began with. In

other words, if you're using for your primary heading, then your secondaryheadings should be or and not or .

Although you can enlarge web page text with the FONT tag, you also use the BIGtag.

The BIG tag is used to increase the size of your font. You can add additional BIG

tags, side by side, to increase your font size even further. For each additional BIGtag you use, your font size will increase.
http://www.web-source.net/web_design_tips/displaying_web_page_text_font_style.htmhttp://www.web-source.net/web_design_tips/displaying_web_page_text_font_style.htm


40/131

HTML Code:

Your Text

Browser View:

Your Text

HTML Code:

Your Text

Browser View:

Your Text

The BIG tag can be used in place of the FONT tag, as they both perform the sametask.

Example Font Tag:

You can highlight your HTML web page text in the color of your choice by adding theSTYLE attribute to your HTML code.

Example: Example of highlighted text

Copy and paste the following code into the HTML portion ofyour web page where

you would like the text to appear:

Example of highlightedtext

You can change the colors to whatever you'd like, but keep in mind, the text must bevisible through the background color.
http://www.web-source.net/web_design_tips/highlighting_html_web_page_text.htmhttp://www.web-source.net/web_design_tips/highlighting_html_web_page_text.htm


41/131

If you've ever tried to display an image with your text wrapping around it, you haveprobably discovered it won't work with just a plain image tag.

To do so, you must include the ALIGN attribute within your image tag.

Image Displayed on Left:

Your Text

By placing the above code within your HTML, your image willbe displayed on the left hand side with your text displayed on

the right.

As you continue to type your text, it will automatically formatitself to wrap around the right side and the bottom of your

image. This example has been set up with a table to keep thetext neatly aligned within a limited amount of space. The

table's width is set up to span 50% of the page width.

Image Displayed on Right:

Your Text

By placing the above code within your HTML, your image will

be displayed on the right hand side with your text displayedon the left.

As you continue to type your text, it will automatically format

itself to wrap around the left side and the bottom of yourimage. This example has been set up with a table to keep the

text neatly aligned within a limited amount of space. Thetable's width is set up to span 50% of the page width.
http://www.web-source.net/web_design_tips/wrapping_text_image_html_web_page.htmhttp://www.web-source.net/web_design_tips/wrapping_text_image_html_web_page.htmhttp://www.web-source.net/web_design_tips/wrapping_text_image_html_web_page.htmhttp://www.web-source.net/web_design_tips/wrapping_text_image_html_web_page.htm


42/131

The tag will enable you to indent your text from the left and rightmargins within your web page. However, it won't enable you to indent your text from

just one side.

If you would like to indent your text from the left margin only, you can use the tag (the same tag you would use to create a bulleted list). The only difference is that

you won't use the tags with it. Your text will be indented just as a bulleted listis, but there won't be any bullets.

This example is displayed using the tag without the tags. Noticehow the text is indented from the left margin.

Place your text between the and


43/131

Edit the text in bold to suit your needs.

Place the following code after the text you would like to align:

The percentage specifies a percentage of the distance to the line height above or

below the normal line height. It raises or lowers the baseline by a percentage of theline-height to the next line. For example, a value of 50% will raise the baseline to

halfway between the normal baseline and the baseline of the line above. A value of

-100% will lower the baseline to the same height as the baseline of the line below.30% or -30% looks about right for things like scientific notation.

HTML LINKS

You can display your HTML link description in the status bar of your browser. When

the mouse is placed over a link, the text link description will be viewed in the status

bar.

Yourlinked text

Example:

Place your mouse over this link


This code will enable you to hide affiliate links, display a special links descriptions orwhatever you'd like.

You can create an HTML mouseover text description, similar to an image alt tag orpop up text description, that will be viewed when your mouse is placed over the text

link. Place "title="your text description"" within your HTML link code.
http://www.web-source.net/web_design_tips/html_status_bar_link_description.htmhttp://www.yourdomain.com/http://www.web-source.net/web_design_tips/html_mouse_over_text_description.htmhttp://www.web-source.net/web_design_tips/html_status_bar_link_description.htmhttp://www.yourdomain.com/http://www.web-source.net/web_design_tips/html_mouse_over_text_description.htm


44/131

YourText

Example:

Your Text

In addition, you can display your description text in a list by adding these characters

.

Your Text

The above TITLE description would be displayed like this when you place your mouseover the link:

Example:

Your Text


If your web site gets trapped within someone's frames, you can create a link to help

your visitor escape. Place the following code within your HTML where you would likethe link to appear.

Escape FromFrame

You're actually just creating a link to your own website with the TARGET set to "Top."

At one time, there were many sites designed with frames. However, as more and

more people have realized that frames are not a good choice for designing a web

site, the number of sites designed in frames has dropped considerably. For thisreason, the chance of your site being trapped within someone's frames is slim.

However, you may still want to include this link at the bottom of your site.
http://www.yourdomain.com/http://www.yourdomain.com/http://www.yourdomain.com/http://www.yourdomain.com/


45/131

You can create a link within the same page by adding the following codes.

STEP 1

Select the area you want the link to take you to when clicked on and place thefollowing code within your HTML. Change the name indicated in bold to anything

you'd like. This will create an anchor for your link.

Your Text

STEP 2

Create your link and make sure you use the same name as you used in your anchor.

Click Here

You can remove the underline of an individual HTML web page link, also known as a

hyperlink, by adding the STYLE tag to your link HTML.

Example Code:

Your Link

Browser View:

Your Link
http://www.yourdomain.com/http://www.yourdomain.com/


46/131

You can change the color of an individual HTML web page link by adding a font tag infront of your linked text.

Example Code:

Your

Link

Browser View:

Your Link

Although you can change the link, keep in mind, your visitors are used to the

standard links colors and may become confused if you change it. Use this code withcaution.

You can create an HTML mailto email link that will automatically fill in an emailsubject line when clicked on. Add the following code to your HTML.

[email protected]

Example:

Click Here to test the auto-fill email link.

Many times, you'll find that if you request that a certain word be placed within the

subject of an email, it won't be provided. This code can be used to ensure that youremail subject is filled in exactly as you require.

The ANCHOR tag is used to create a hyperlink within a web page.

To link to a web page within the same directory of your web site, you only need toinclude the page name within your HTML code.

Text
http://www.yourdomain.com/mailto:[email protected]?subject=Your%20Subject&body=Message%20for%20the%20body.http://www.yourdomain.com/mailto:[email protected]?subject=Your%20Subject&body=Message%20for%20the%20body.


47/131

When linking to a web page within your web site in a different directory, you mustinclude the directory name with your page name.

Text

When linking to another web site, you must include the full URL.

Text

You can display your HTML web page links in the color of your choice by adding the

STYLE attribute to your HTML code.

Example: http://www.yourdomain.com/

Copy and paste the following code into the HTML portion ofyour web page whereyou would like the link to appear:

http://www.yourdomain.com/

You can change the colors to whatever you'd like, but keep in mind, the text must be

visible through the background color.

If you have a file you would like to enable your visitors to download, most web

servers will allow you to link directly to a download file.

File

If you have access to ftp, you can create a download link like this:

File
http://www.yourdomain.com/http://www.web-source.net/web_design_tips/highlighting_html_web_page_links.htmhttp://www.yourdomain.com/http://www.web-source.net/web_design_tips/highlighting_html_web_page_links.htm


48/131

If you don't have access to ftp, you can create a download link like this:

File

Instruct your visitors to hold the "shift" key down while they click on the downloadlink.

Would you like to display an email address on a web page, but need a way to protectit from spammers? This tip is for you.

Displaying your email address on your web site is an important part of good

customer service. However, the fear of spam robots harvesting email addressesprevents many webmasters from doing so.

If you would like to display your email address within your web pages and not worry

about it being harvested, you can protect yourself. Instead of displaying the usualmailto:[email protected], use the following code within your HTML:

Contact Us

When clicked on, it will display your email address correctly.

WEB PAGE WINDOWSWhen designing a web site, your first consideration should be browser compatibility.Your web site may look great when viewed with Internet Explorer, but when viewed

with Netscape Navigator, everything may not be formatted properly.

All web browsers are not created equally. View your site through different browsersand screen resolutions so you will see how your visitors will view your site.

A good way to see how your web site will look through both browsers is to download

and install a copy of both Internet Explorer and Netscape Navigator.

Netscape
http://www.web-source.net/web_design_tips/web_site_browser_compatibility.htmhttp://www.netscape.com/download/http://www.web-source.net/web_design_tips/web_site_browser_compatibility.htmhttp://www.netscape.com/download/


49/131

Microsoft

Visit the following web sites to view your web site through different browsers and

screen resolutions:

AnyBrowser - Provides a variety of free services for your web site, including browsercompatibility testing, link check, HTML check, meta tag creator and more.

Make sure you view your first web page in different browsers and screen resolutions.

Once you get it looking great for everyone, you can use it as a template for the restof your web site. This technique can save you a great deal of time.

When linking to a web address that isn't a part of your web site, open the web site in

a new window. Your web site will remain open in the original window and preventyou from completely losing your visitors.

To open a web page in a new window, add the following code to your link.

Your Link

Try it:

Click here to open a link in a new window.

Although this code is good to use if you're linking to a site outside of your own, you

won't want to use it when navigating through your own site, as you want your webpages to open within the same window.

It's a proven fact that the use of popup windows is an effective marketing technique

that produces great results. However, they can be very irritating to your visitors.How can you use this powerful marketing technique without offending your visitors?Compromise and use a popup window that only displays the first time your visitor

enters your site.

Place the following code within the ofyour web page.
http://www.microsoft.com/downloads/search.asp?http://www.anybrowser.com/http://www.web-source.net/web_design_tips/web_site_browser_compatibility.htmhttp://www.web-source.net/http://www.web-source.net/web_design_tips/first_visit_web_page_pop_up_window.htmhttp://www.microsoft.com/downloads/search.asp?http://www.anybrowser.com/http://www.web-source.net/web_design_tips/web_site_browser_compatibility.htmhttp://www.web-source.net/http://www.web-source.net/web_design_tips/first_visit_web_page_pop_up_window.htm


50/131


The "yourpage.htm" text specifies the popup window url.

Change the height and width to your preferred window size.

HTML TABLES

Without using a placeholder within your blank HTML table cells, your empty table cell

borders will not display. By simply adding the character code within yourHTML, your table cell will be visible.

Example HTML Code With No Placeholders:

Your Text

Your Text


51/131

Your Text

Browser View With No Placeholders:

Your Text Your Text

Your Text

Example Code With Placeholders:

Your Text

Your Text

Your Text

Browser View With Placeholders:

Your Text Your Text

Your Text

You can add an image background to your HTML table cells by adding

BACKGROUND="yourimage.gif" to your tag.

Example HTML Code:

This example

displays your text over your image background.


52/131

Browser View:

This example displays your text over yourimage background.

Example HTML Code:

This example displays your text next to your imagebackground.

Browser View:

This example displays your textnext to your image background.

The HTML TABLE tag is the opening tag used to create a table within a web page.

To add color to your HTML TABLE cells, add BGCOLOR="#color code" within the

tag.

Column 1Column 2

Row 2

Row 2


53/131

Browser View

Column 1 Column 2

Row 2 Row 2


You can add color to your HTML TABLE borders by adding

BORDERCOLOR="#colorcode" within your TABLE tag.

HTML Table Code:

Column 1

Column 2

You can find a 216 safe color chart here.

Browser View:

Column 1 Column 2


You can specify your HTML TABLE width as a set number value or use a percentage.

Set HTML Table Width in Pixels

Column 1
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/web_design_tips/html_table_border_colors.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/web_design_tips/html_table_border_colors.htm


54/131

Column 2

Browser View:

Column 1 Column 2

Set HTML Table Width as a Percentage

Column 1

Column 2

Browser View:

Column 1 Column 2

Set HTML Table Column Width in Pixels

Column 1

Column 2

Browser View:

Column 1 Column 2

Set HTML Table Column Widths as a Percentage

In addition, you can set the widths of your TABLE columns to display your columns at

a specific width. In the following example, the column widths are set to 50%.

Column 1

Column 2


55/131

Browser View:

Column 1 Column 2

In the following example, the first column width is set to 25% and the second

column is set to 75%.

Column 1

Column 2

Browser View:

Column 1 Column 2

HTML SPECIAL EFFECTS

You can create a stationary HTML web page background within your web page.

Stationary background images remain in one place even when scrolling through thepage. Only the text will move. To create this effect, place the following code within

your tag.

When selecting your background image, keep in mind that your text will be moving

over your image, so try to select an image that won't make your text difficult toread.

To prevent your background image from tiling (repeating), place the following codebetween your and tags.
http://www.web-source.net/web_design_tips/stationary_html_web_page_background.htmhttp://www.web-source.net/web_design_tips/stationary_html_web_page_background.htmhttp://www.web-source.net/web_design_tips/stationary_html_web_page_background.htmhttp://www.web-source.net/web_design_tips/stationary_html_web_page_background.htm


56/131

Replace the text indicated in red with your image file.

You can use an image to create a vertical or horizontal line within an HTML web

page.

Create a 2 pixel by 2 pixel image in the color of your choice. This single image canbe used to create a vertical or horizontal line on your web page simply by changing

the HEIGHT and WIDTH attributes.

Example Code:

Browser View:

Example Code:

Browser View:

When creating a vertical line, you'll need to set up a table.

Example Code:
http://www.web-source.net/web_design_tips/html_horizontal_vertical_lines.htmhttp://www.web-source.net/web_design_tips/html_horizontal_vertical_lines.htm


57/131

This portion of the table can be used to display your text. Make sure that

you set a specific table width so that your text will wrap and display beside yourline image.

Browser View:

This portion of the tablecan be used to display your

text. Make sure that youset a specific table width so

that your text will wrap anddisplay beside your line

image.

The HTML MARQUEE tag is used to scroll text vertically or horizontally within a web

page.

You can change the marquee background color, width, the number of times your

message will scroll, and the speed that your text scrolls, by adding the followingattributes within your MARQUEE tag.

BGCOLOR="#CCCCCC" - background color

LOOP - Determines how many times the text will scroll. -1 is indefinite and willcontinuously scroll. You can set this to whatever you'd like.

SCROLLAMOUNT - Determines the speed your text will scroll.

WIDTH - Determines the width of your marquee.

HEIGHT - Determines the height of your marquee.

Direction - Determines the direction in which the text should scroll - up or down.

Horizontal Scrolling Text Marquee

HTML SI CSS

Documents

Transcript of HTML SI CSS