html si css
TRANSCRIPT
-
8/3/2019 HTML SI CSS
1/131
-
8/3/2019 HTML SI CSS
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
-
8/3/2019 HTML SI CSS
3/131
horizont
al rule
Contents of your web
page (Tip)
Contents of your web
page
horizont
al rule
Contents of your web
page
Contents of your web
page
horizont
al rule
Contents of your web
page
Contents of your web
page
(InternetExplorer)
horizontal rule
Contents of your web
pageContents of your web
page
(InternetExplorer)
horizont
al rule
Contents of your web
page
Contents of your web
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 -
8/3/2019 HTML SI CSS
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:
-
8/3/2019 HTML SI CSS
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
-
8/3/2019 HTML SI CSS
6/131
href="style.css" />
(InternetExplorer)
scrolling
text
ExampleMarquee
(Tip)
menu
List item 1List item 2
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)
meta Nothing will show (Tip)
meta Nothing will show (Tip)
ordered
list
Numbered
List item 1List item 2
List item 3
List item 4
Numbered Special Start
List item 1List item 2
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 -
8/3/2019 HTML SI CSS
7/131
Lowercase Letters
List item 1
List item 2List item 3
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
List item 3List item 4
Lowercase Roman Numerals
List item 1
List item 2List item 3
List item 4
Capital Roman Numerals
List item 1List item 2
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/3/2019 HTML SI CSS
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 exampledisplaying the use
of the paragraph tag.
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
of the paragraph tag.
Example 2:
This is an example
displaying the useof the paragraph tag.
-
8/3/2019 HTML SI CSS
9/131
displaying the use
of the paragraph tag.Example 3:
This is an example
displaying the use
of the paragraph tag.
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 -
8/3/2019 HTML SI CSS
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
-
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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.
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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.
Edit the text indicated in bold to suit your needs.
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 -
8/3/2019 HTML SI CSS
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.
Edit the text indicated in bold to suit your needs.
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 -
8/3/2019 HTML SI CSS
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:
Edit the text indicated in bold to suit your needs.
HTML vertical rules provide a great way to divide your web page contect areas and add a bit ofcolor to your web page.
-
8/3/2019 HTML SI CSS
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.
Edit the text indicated in bold to suit your needs.
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 -
8/3/2019 HTML SI CSS
22/131
Edit the text indicated in bold to suit your needs.
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 -
8/3/2019 HTML SI CSS
23/131
-
8/3/2019 HTML SI CSS
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.
Edit the text indicated in bold to suit your needs.
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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.
-
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
31/131
-
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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
Edit the text indicated in red to suit your needs.
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/ -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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
-
8/3/2019 HTML SI CSS
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
Change the text where indicated in red.
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 -
8/3/2019 HTML SI CSS
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
Edit the text indicated in red to suit your needs.
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/ -
8/3/2019 HTML SI CSS
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/ -
8/3/2019 HTML SI CSS
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.
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. -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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/ -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
50/131
Change the text where indicated in red.
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
-
8/3/2019 HTML SI CSS
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.
-
8/3/2019 HTML SI CSS
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
-
8/3/2019 HTML SI CSS
53/131
Browser View
Column 1 Column 2
Row 2 Row 2
The HTML TABLE tag is the opening tag used to create a table within a web page.
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
The HTML TABLE tag is the opening tag used to create a table within a web page.
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 -
8/3/2019 HTML SI CSS
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
-
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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 -
8/3/2019 HTML SI CSS
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