Limbajul HTML Tag Uri

HTML Tags Chart
To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page. Tag <! <a <b( <big( <body( Name comment anchor #old Code Example  <a hre !%http&''www.domain.com'%( )isit *ur +ite<"a> <#>,-ample<"#> Browser View "othing will show #Tip$ )isit *ur +ite #Tip$ Example
#ig $text% <#ig>,-ample<"#ig> #od& o HTML <#od&>The content of your HTML doc'men page<"#od&> t line #rea(
,-ample #Tip$
.ontents of your web page #Tip$
<br(
The contents of your The contents of your page<#r>The contents web page of your page The contents of your web page <center>This will center your contents<"center> <dl( <dt(/efinition Term<'dt( <dd>)e inition o the term<"dd> <dt(/efinition Term<'dt( <dd>)e inition o the term<"dd> <'dl( This will center your contents /efinition Term )e inition o the term /efinition Term )e inition o the term /efinition Term /efinition of the term /efinition Term /efinition of the term )e inition Term /efinition of the term )e inition Term /efinition of the term This is an Example of
<center( center de initio n descripti on
<dd(
<dl(
<dl> <dt(/efinition Term<'dt( de initio <dd(/efinition of the term<'dd( n list <dt(/efinition Term<'dt( <dd(/efinition of the term<'dd( <"dl> <dl( <dt>)e inition Term<"dt> de initio <dd(/efinition of the term<'dd( n term <dt>)e inition Term<"dt> <dd(/efinition of the term<'dd( <'dl( emphasis This is an <em>,-ample<"em> of using
<dt(
<em(
the emphasis tag <embed( em#ed o#*ect
using the emphasis tag
<em#ed src0%yourfile.mid% width0%1223% height0%42% align0%center%( #Tip$
<embed(
em#ed o#*ect
Music will begin <em#ed src0%yourfile.mid% autostart0%true% playing when your page hidden0%false% loop0%false%( is loaded and will only <noembed(<bgsound src0%yourfile.mid% play one time. 5 control loop0%1%(<'noembed( panel will be displayed to enable your !isitors to stop the music. < ont face0%Times "ew 6oman%(,-ample<" ont> < ont face0%Times "ew 6oman% si7e0%8%(,-ample<" ont> < ont face0%Times "ew 6oman% si7e0%9:% color0%;ff2222%(,-ample<" ont> < orm action0%mailto&you<yourdomain.com%( "ame& <input name0%"ame% !alue0%% si7e0%12%(<br( ,mail& <input name0%,mail% !alue0%% si7e0%12%(<br( <center(<input type0%submit%(<'center( <" orm> ,-ample #Tip$
<font( <font( <font(
ont ont ont
,-ample #Tip$
,-ample #Tip$
"ame& #Tip$ ,mail&
<form(
orm
<h1( <h=( <h:( <h8( <h>( <h4(
heading + heading , heading heading . heading / heading 0
<h+>Heading 1 ,-ample<"h+> <h,>Heading = ,-ample<"h,> <h->Heading : ,-ample<"h-> <h.>Heading 8 ,-ample<"h.> <h/>Heading > ,-ample<"h/> <h0>Heading 4 ,-ample<"h0>
<head(
heading o <head>.ontains elements describing the HTML document<"head> doc'men t
"othing will show
<hr(
hori1ont <hr "> al r'le
.ontents of your web page #Tip$ .ontents of your web page .ontents of your web page .ontents of your web page .ontents of your web page .ontents of your web page
<hr(
hori1ont <hr width0%>23% si7e0%:% '( al r'le
<hr(
hori1ont <hr width0%>23% si7e0%:% noshade '( al r'le
.ontents of your web <hr( hori1ont <hr width0%@>3% color0%;ff2222% si7e0%8% page #?nternet al r'le '( .ontents of your web ,-plorer$ page .ontents of your web <hr( hori1ont <hr width0%=>3% color0%;44AAff% si7e0%4% page #?nternet al r'le '( .ontents of your web ,-plorer$ page <html> <head( <meta( h&pertex <title(Title of your web page<'title( t mar('p <'head( lang'age <body(HTML we# page contents <'body( <"html> italic image <i>,-ample<"i> <img src0%,arth.gif% width0%81% height0%81% border0%2% alt0%te-t describing the image% '( ,-ample 1& inp't <input( ield <form method0post action0%'cgi bin'e-ample.cgi%( <inp't type0%te-t% si7e0%12% ma-length0%:2%( <inp't type0%+ubmit% !alue0%+ubmit%( <'form( ,-ample 1& #Tip$
<html(
.ontents of your web page
<i( <img(
Example #Tip$
,-ample =& <form method0post action0%'cgi bin'e-ample.cgi%( <inp't type0%te-t% style0%color& ;ffffffB font family& )erdanaB font weight& boldB font si7e& 1=p-B background color& ;@=a8d=B% si7e0%12% ma-length0%:2%( <inp't type0%+ubmit% !alue0%+ubmit%( <'form( ,-ample :& <form method0post action0%'cgi bin'e-ample.cgi%( <table border0%2% cellspacing0%2% cellpadding0%=%(<tr(<td bgcolor0%;C84:ff%(<input type0%te-t% si7e0%12% ma-length0%:2%(<'td(<td bgcolor0%;C84:ff% !align0%Middle%( <input type0%image% name0%submit% src0%yourimage.gif%(<'td(<'tr( <'table( <'form( ,-ample 8& <form method0post action0%'cgi bin'e-ample.cgi%( ,nter Dour .omments&<br( <te-tarea wrap0%!irtual% name0%.omments% rows0: cols0=2 ma-length0122(<'te-tarea(<br( <inp't type0%+ubmit% !alue0%+ubmit%( <inp't type0%6eset% !alue0%.lear%( <'form( ,-ample >& ,-ample >& Tip$ <form method0post action0%'cgi bin'e-ample.cgi%( <center( +elect an option& <select( <option (option 1<'option( <option selected(option =<'option( <option(option :<'option( <option(option 8<'option( <option(option ><'option( +elect an option&
<input( inp't #?nternet ield ,-plorer$
,-ample =& #Tip$
<input(
inp't ield
,-ample :& #Tip$
<input(
inp't ield
,-ample 8& #Tip$
<input( inp't ield
<option(option 4<'option( <'select(<br( <inp't type0%+ubmit% !alue0%+ubmit%(<'center( <'form( ,-ample 4& <form method0post action0%'cgi bin'e-ample.cgi%( +elect an option&<br( <inp't type0%radio% name0%option%( *ption 1 <inp't type0%radio% name0%option% checked( *ption = <inp't type0%radio% name0%option%( *ption : <br( <br( +elect an option&<br( <inp't type0%checkbo-% name0%selection%( +election 1 <inp't type0%checkbo-% name0%selection% checked( +election = <inp't type0%checkbo-% name0%selection%( +election : <inp't type0%+ubmit% !alue0%+ubmit%( <'form( ,-ample 1& <menu( <li type0%disc%(List item 1<"li> <li type0%circle%(List item =<"li> <li type0%sEuare%(List item :<"li> <'M,"F( <li( list item ,-ample =& ,-ample =& <ol type0%i%( <li>List item 1<"li> <li>List item =<"li> <li>List item :<"li> <li>List item 8<"li> <'ol( <link( lin( <head( <link rel0%stylesheet% type0%te-t'css% i. ii. iii. i!. List item + List item , List item List item .
,-ample 4& #Tip$ +elect an option& *ption 1 *ption = *ption : +elect an option& +election 1 +election = +election :
<input(
inp't ield
,-ample 1& #Tip$

o
List item + List item , List item -
href0%style.css% '( <'head( <marEue <mar2'ee bgcolor0%;cccccc% loop0% 1% e( scrolling scrollamount0%=% width0%1223%(,-ample #Tip$ #?nternet text MarEuee<"mar2'ee> ,-plorer$ <men'> <li type0%disc%(List item 1<'li( <li type0%circle%(List item =<'li( <li type0%sEuare%(List item :<'li( <"men'> <meta name0%/escription% content0%/escription of your site%( <meta name0%keywords% content0%keywords describing your site%(
o
List item 1 List item = List item :
<menu( men'
<meta(
meta
"othing will show #Tip$
<meta( <meta( <meta( <meta( <meta( <ol(
meta meta meta meta meta
<meta HTTG ,HF?)0%6efresh% .*"T,"T0%8BF6L0http&''www.yourdoma "othing will show #Tip$ in.com'%( <meta http eEui!0%Gragma% content0%no cache%( <meta name0%rating% content0%Ieneral%( <meta name0%robots% content0%all%( <meta name0%robots% content0%noinde-,follow%( "othing will show #Tip$ "othing will show #Tip$ "othing will show #Tip$ "othing will show #Tip$ N'm#ered 1. =. :. 8. List item 1 List item = List item : List item 8
ordered N'm#ered list <ol> <li(List item 1<'li( <li(List item =<'li( <li(List item :<'li( <li(List item 8<'li( <"ol> N'm#ered 3pecial 3tart <ol start!4/4> <li(List item 1<'li( <li(List item =<'li( <li(List item :<'li( <li(List item 8<'li( <"ol>
N'm#ered 3pecial 3tart >. 4. @. C. List item 1 List item = List item : List item 8
Lowercase Letters a. List item 1
Lowercase Letters <ol t&pe!4a4> <li(List item 1<'li( <li(List item =<'li( <li(List item :<'li( <li(List item 8<'li( <"ol> Capital Letters <ol t&pe!454> <li(List item 1<'li( <li(List item =<'li( <li(List item :<'li( <li(List item 8<'li( <"ol> Capital Letters 3pecial 3tart <ol t&pe!454 start!4-4> <li(List item 1<'li( <li(List item =<'li( <li(List item :<'li( <li(List item 8<'li( <"ol> Lowercase 6oman N'merals <ol t&pe!4i4> <li(List item 1<'li( <li(List item =<'li( <li(List item :<'li( <li(List item 8<'li( <"ol> Capital 6oman N'merals <ol t&pe!474> <li(List item 1<'li( <li(List item =<'li( <li(List item :<'li( <li(List item 8<'li( <"ol>
b. List item = c. List item : d. List item 8 Capital Letters 5. J. .. /. List item 1 List item = List item : List item 8
Capital Letters 3pecial 3tart .. /. ,. K. List item 1 List item = List item : List item 8
Lowercase 6oman N'merals i. ii. iii. i!. List item 1 List item = List item : List item 8
Capital 6oman N'merals ?. ??. ???. ?). List item 1 List item = List item : List item 8
Capital 6oman N'merals 3pecial 3tart )??. )???. ?L. L. List item 1 List item = List item : List item 8
Capital 6oman N'merals 3pecial 3tart <ol t&pe!474 start!484> <li(List item 1<'li( <li(List item =<'li( <li(List item :<'li( <li(List item 8<'li( <"ol> <form method0post action0%'cgi bin'e-ample.cgi%( <center( +elect an option& <select( <option>option 1<"option> <option selected>option =<"option> <option>option :<"option> <option>option 8<"option> <option>option ><"option> <option>option 4<"option> <'select(<br( <'center( <'form(
<option(
list#ox option
+elect an option& #Tip$
<p(
paragrap This is an e-ample displaying the use of the This is an e-ample h paragraph tag. <p( This will create a line displaying the use of the break and a space between lines. paragraph tag. 5ttributes& <p align!4le t4> ,-ample 1&<br '( <br '( This is an e-ample<br( displaying the use<br( of the paragraph tag.<'p( <p align!4right4> ,-ample =&<br( <br( This is an e-ample<br( displaying the use<br( of the paragraph tag.<'p( <p align!4center4> ,-ample :&<br( <br( This is an e-ample<br( This will create a line break and a space between lines. 5ttributes& ,-ample 1& This is an e-ample displaying the use of the paragraph tag. ,-ample =& This is an e-ample displaying the use of the paragraph tag.
,-ample :& displaying the use<br( of the paragraph tag.<'p( This is an e-ample displaying the use of the paragraph tag.
,-ample #Tip$
<small( <strike( <strong( <table(
small $text% deleted text
<small>,-ample<"small> <stri(e>,-ample<"stri(e>
,-ample Example ,-ample 1& #Tip$ .olumn 1 .olumn =
strong <strong>,-ample<"strong> emphasis ta#le ,-ample 1& <ta#le #order!%8% cellpadding0%=% cellspacing0%=% width0%1223%( <tr( <td(.olumn 1<'td( <td(.olumn =<'td( <'tr( <"ta#le> ,-ample =& #?nternet ,-plorer$
,-ample =& #Tip$ .olumn 1 .olumn =
,-ample :& #Tip$
<ta#le #order!%=% bordercolor0%;::44AA% .olumn 1 .olumn = cellpadding0%=% cellspacing0%=% 6ow = 6ow = width0%1223%( <tr( <td(.olumn 1<'td( <td(.olumn =<'td( <'tr( <"ta#le> ,-ample :& <ta#le cellpadding!%=% cellspacing0%=% width0%1223%( <tr( <td bgcolor0%;cccccc%(.olumn 1<'td( <td bgcolor0%;cccccc%(.olumn =<'td( <'tr( <tr( <td(6ow =<'td( <td(6ow =<'td(
<'tr( <"ta#le> <table border0%=% cellpadding0%=% cellspacing0%=% width0%1223%( <tr( <td>Col'mn +<"td> <td>Col'mn ,<"td> <'tr( <'table( <di! align0%center%( <table( <tr( <th>Col'mn +<"th> <th>Col'mn ,<"th> <th>Col'mn -<"th> <'tr( <tr( <td(6ow =<'td( <td(6ow =<'td( <td(6ow =<'td( <'tr( <tr( <td(6ow :<'td( <td(6ow :<'td( <td(6ow :<'td( <'tr( <tr( <td(6ow 8<'td( <td(6ow 8<'td( <td(6ow 8<'td( <'tr( <'table( <'di!(
<td(
ta#le data
Col'mn + Col'mn ,
Col'm Col'm Col'm n+ n, n6ow = 6ow = 6ow = 6ow : 6ow : 6ow : 6ow 8 6ow 8 6ow 8
<th(
ta#le header
<title(
doc'men <title>Title of your HTML page<"title> t title <table border0%=% cellpadding0%=% cellspacing0%=% width0%1223%( <tr> ta#le row <td(.olumn 1<'td( <td(.olumn =<'td( <"tr> <'table( telet&pe <tt>,-ample<"tt>
Title of your web page will be !iewable in the title bar. #Tip$ Col'mn + Col'mn ,
<tr(
<tt(
Example
<u(
'nderlin <u(,-ample<'u( e ,-ample 1&<br( <br( <'l> <li(List item 1<'li( <li(List item =<'li( <"'l> <br( 'nordere ,-ample =&<br( d list <'l t&pe!4disc4> <li(List item 1<'li( <li(List item =<'li( <'l t&pe!4circle4> <li(List item :<'li( <li(List item 8<'li( <"'l> <"'l>
,-ample ,-ample 1&

List item 1 List item =
,-ample =&

<ul(
List item 1 List item = o List item :

o
List item 8
?f you're looking for a great way to spice up your HTML tables, this HTML mouseo!er code may be Must what you're looking for. Glace your mouse pointer o!er each of the HTML table cells below to !iew this HTML mouseo!er effect. The HTML table cells will change to a specified color when you place your pointer o!er the cells. This HTML code will enable you to gi!e your HTML tables a more professional look and feel, as it will greatly impro!e the presentation of your HTML table data. Howe!er, when using this HTML code, please ensure that you only use light colors within your HTML table cells to ensure your te-t can be easily !iewed. HTML table data 1 HTML table data = HTML table data :
Place the following code within the <TR> or <TD> tag of your HTML table code: onMouseover= this!bg"olor=##EEEEEE# onMouseout= this!bg"olor=#$%%%%%%# &our table code 'ight loo( so'ething li(e this: <T)*L+ *,RD+R= - "+LLP)DD./0= - 1.DTH= 2334 > <TR onMouseover= this!bg"olor=##EEEEEE# onMouseout= this!bg"olor=##FFFFFF# > <TD>&our Table Data<5TD> <5TR>
<TR onMouseover= this!bg"olor=##EEEEEE# onMouseout= this!bg"olor=##FFFFFF# > <TD>&our Table Data<5TD> <5TR> <TR onMouseover= this!bg"olor=##EEEEEE# onMouseout= this!bg"olor=##FFFFFF# > <TD>&our Table Data<5TD> <5TR> <5T)*L+> "hange the te6t indicated in bold to suit your needs! However7 'a(e sure you select a bac(ground color that will enable your te6t to be easily viewed!
?f you're looking for a way to display a web page within a web page, this HTML code may be Must what you're looking for. 5s you can see in the e-ample below, we are displaying a web page within the web page that you are !iewing right now. This HTML code will enable you to display rotating tips, images or whate!er you'd like. .opy and paste the code below into your web page where you would like to embed the additional page.
"o8y and 8aste the code below into your web 8age where you would li(e to e'bed the additional 8age!
<ob9ect data=http://www.web-source.net width= 600 height= 400 > <e'bed src=http://www.web-source.net width= 600 height= 400 > <5e'bed> Error: Embedded data could not be displayed. <5ob9ect> "hange the te6t indicated in bold to suit your needs!
<FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <IN#$T t%pe="text" name="name" si&e="'(" max engt)="*(" tabindex="1"" <IN#$T t%pe="text" name="a++,ess" si&e="'(" max engt)="*(" tabindex="2"" <IN#$T t%pe="text" name="emai " si&e="'(" max engt)="*(" tabindex="3"" <IN#$T t%pe="text" name="-, " si&e="'(" max engt)="*(" tabindex="4"" <IN#$T t%pe=".-bmit" /A0$E=".-bmit"" </FORM" T)e "tabin+ex" 1a -e +ete,mines t)e o,+e, in 2)ic) %o- 2i tab t),o-g) t)e text boxes!
I3 %o- 2o- + i4e t)e tab o,+e, to s4ip a ce,tain a,ea5 s-c) as c)ec4 boxes an+ ,a+io b-ttons5 simp % -se a negati1e 1a -e beginning 2it) "-6" t)en "-'" an+ so on! Eac) negati1e 1a -e 2i be b%passe+ 2)en tabbing t),o-g) %o-, 3o,m! Cop%,ig)t 7 .)e e% 0o2e,% About the Author: .)e e% 0o2e,% is a s-ccess3- 2e -4no2n Inte,net Ma,4ete, an+ o2ne, o3 se1e,a s-ccess3- sites5 inc -+ing 222!8eb-.o-,ce!net! Would you like to learn how to design a web site? 0ea,n at %o-, o2n pace 2it) 6((9s o3 cop% an+ paste co+es5 sc,een s)ots an+ examp es! :et %o-, 2eb site -p 3ast 2it) o1e, 6(( p,o3essiona % +esigne+ 2eb site temp ates! /isit t)e 8eb Design Maste,% site to +o2n oa+ %o-, 3,ee c)apte,s ;<< pages=>
) gradient bac(ground effect will dis8lay your selected HTML bac(ground colors in ascending or descending color variations : fro' lightest to dar(est or dar(est to lightest! This 8owerful HTML code effect can be used to give your web 8ages a uni;ue loo( and feel! However7 it 'ust be used very cautiously! Please ensure that you select your HTML web 8age bac(ground colors very carefully7 as your te6t 'ust be clearly visible through the bac(ground colors you select! .n addition7 you 'ust select one light color and another color that is several shades lighter in order for this HTML gradient bac(ground effect to dis8lay 8ro8erly! This effect can be used for your entire web 8age bac(ground7 or within your table cells! To use the gradient effect as your web 8age bac(ground7 use the following *,D& tag: <body style= filter:8rogid:D<.'ageTransfor'!Microsoft!0radient=end"olorstr=##C0CFE2#7 start"olorstr=##FFFFFF#7 gradientTy8e=#3#>? > To use the gradient effect within your HTML tables7 8lace the following code within your table tag: style= filter:8rogid:D<.'ageTransfor'!Microsoft!0radient=end"olorstr=##C0CFE2#7 start"olorstr=##FFFFFF#7 gradientTy8e=#3#>? )lthough you can edit the gradient colors indicated in red7 (ee8 in 'ind7 in order for the gradient effect to dis8lay 8ro8erly7 you 'ust select one light color and another color that is several shades lighter!
.f you#re using a list 'anage'ent syste' that re;uires s8ecific te6t to be 8laced within the e'ail sub9ect or body of your e'ail7 this HTML code is for you! Many ti'es7 if you re;uest your visitors to ty8e in a s8ecific e'ail sub9ect or body te6t in order to subscribe to your 8ublication7 they 'ay not ty8e the re;uired te6t correctly! This 'ista(e will cause you to lose your subscriber7 as your syste' will re9ect the subscri8tion re;uest! To 8revent this 8roble'7 you can create an e'ail lin( that will auto'atically fill in the sub9ect line and body when clic(ed on!
you@yourdo'ain!co'
)dd the following code to your HTML! <) HR+%= 'ailto:you@yourdo'ain!co'Asub9ect= our !ub"ectBbody=#essa$e %or the body >you@yourdo'ain!co'<5a>
.f you#re loo(ing for a way to o8en a new window when you leave a web 8age7 this code 'ay be what you#re loo(ing for! This HTML code will o8en the web 8age you s8ecify as soon as you leave the original web 8age! This 8rovides a great way to gain new subscribers to your 8ublication7 introduce a 8roduct or whatever you#d li(e! ,8ening a new window on 8age unload7 or in other words7 when your visitor is leaving your 8age is also a great way to 'a(e one last try to 'a(e a sale! &ou#re visitor is leaving your site anyway7 so this is your last chance to sell the'! Ma(e it count! .f you don#t have a s8ecial offer of your own to introduce7 use the window to o8en an affiliate site that you 'ay be 8ro'oting! This 8rovides a great way to bring the affiliate site to their attention and even 'a(e a sale! Place the following code7 indicated in bold7 within your web 8age#s *,D& tag: <body on&nload'window.open()http://www.domain.com)*+ sel%.blur(*+> Chan$e the web address to the pa$e you would li,e to open.
.f you#re in need of an HTML code that will enable you to s8ecify the s8acing between your i'ages7 this HTML code is for you! .n the e6a'8le below7 although the i'ages are the sa'e7 they aren#t di8laying the sa'e7 as their vertical and horiContal align'ent is different! These i'ages haven#t been 8laced within an HTML table and aren#t aligned via "DD! They are being dis8layed via the HDP)"+ and EDP)"+ attributes7 which will enable you to s8ecify the horiContal and vertical s8acing between your i'ages!
<.M0 DR"= youri'age!98g hspace'-0 .space'-0 1.DTH= FG H+.0HT= 2HI *,RD+R= 3 ><.M0 DR"= youri'age!98g hspace'/ .space'/ 1.DTH= FG H+.0HT= 2HI *,RD+R= 3 > &ou can s8ecify the horiContal and vertical s8acing by editing the EDP)"+ and HDP)"+ values!
Contact &s
.f you#re dis8laying your e'ail address on your web site7 you 'ay be un(nowingly setting yourself u8 to receive a ton of s8a' e'ail! Jnfortunately7 s8a' robots are continuously crawling the .nternet in search of e'ail addresses they can use to not only send s8a'7 but also sell to other s8a''ers! However7 although it#s very difficult to 8rotect yourself fro' receiving s8a' e'ail7 there is a way you can still dis8lay your e'ail address on your web site and 8rotect it at the sa'e ti'e!
.nstead of dis8laying the usual 'ailto:you@yourdo'ain!co' e'ail lin( within your web 8age7 use the following code within your HTML: <) HR+%= 'ailto:you0#64+yourdo'ain!co' >"ontact Js<5)> 1hen your e'ail lin( is clic(ed on7 it will dis8lay your e'ail address correctly! "hange the e'ail address in the e6a'8le above to the e'ail address you would li(e to dis8lay! *y using this si'8le little code7 you can 8rotect your e'ail address fro' s8a' bots!
.f you#re lin(ing to other web sites within your web 8ages7 you certainly don#t want to 9ust give your visitors away! %or this reason7 it is highly reco''ended that you o8en lin(s to other web sites within in new window! This will enable your web 8age to stay o8en within a window7 even if your visitor clic(s on an outside lin(7 and 8revent you fro' co'8letely losing your visitors! The following HTML code will enable you to o8en a web 8age in a new window: <) HR+%= htt8:55www!yourdo'ain!co' 1234E1'56blan,5>&our Te6t<5a> +dit the te6t in red and add T)R0+T= Kblan( to your lin( code!
7pen all lin,s in a new window

.f you#re lin(ing to a lot of other web sites within your web 8age and would li(e to o8en all of your lin(s in a new window7 this HTML code is for you! The following HTML code will enable you to o8en all of your lin(s in a new window! Place this code between your <H+)D> and <5H+)D> tags within your HTML: <base target= 'ain >
.f you need to redirect your visitors to a new 8age7 this HTML redirect code 'ay be 9ust what you#re loo(ing for! 1hen designing a web site7 'any ti'es you 'ust change the location of a web 8age! However7 if the 8age is 8o8ular7 your visitors 'ay have already lin(ed to it! .n addition7 the Dearch +ngines
have 'ost:li(ely already inde6ed the 8age! %or this reason7 it is best to re8lace your 8age with a new 8age that will redirect your visitors to the new 8age! This 8rovides a great way to 8rovide your visitors with the infor'ation they were loo(ing for and 8revent you fro' losing your traffic! However7 when using this HTML redirect code7 8lease ensure that you don#t use it to tric( the Dearch +ngines7 as this could get your web site banned! .t is always best to wor( hard and learn ;uality ways in which to drive traffic to your web site! Place the following HTML redirect code between the <H+)D> and <5H+)D> tags of your HTML code!
<'eta HTTP:+LJ.E= R+%R+DH content= 3? url=htt8:55www!yourdo'ain!co'5inde6!ht'l > The above HTML redirect code will redirect your visitors to another web 8age instantly! The content= 3? 'ay be changed to the nu'ber of seconds you want the browser to wait before redirecting!
)re you loo(ing for a way to s8ice u8 your HTML for'sA &ou can change the colors of your web 8age#s te6t bo6es to 'atch the loo( of your web site! )lthough you can change the color of your te6t bo6es7 it is highly reco''ended that you only use bac(ground and font colors that will enable the te6t to be easily viewed! %or e6a'8le7 if you#d li(e to use a dar(er bac(ground color7 you 'ay want to consider using white for your te6t color! <./PJT ty8e= te6t DT&L+= color: #FFFFFF? font:fa'ily: Eerdana? font:weight: bold? font:siCe: 2-86? bac(ground:color: #822492? siCe= 23 'a6length= H3 > +dit the te6t indicated in bold to suit your needs!
.f you#re using an HTML for' on your web site and would li(e to use an i'age sub'it button instead of the boring standard sub'it button7 this HTML code is for you! .n order for your for'#s in8ut bo6 and your i'age sub'it button to line u8 8ro8erly7 you will need to 8lace it within an HTML table! .n addition7 unless your i'age has a trans8arent bac(ground7 you will need to set the table bac(ground color to the sa'e color as the i'age bac(ground so that it will sea'lessly blend together!
<%,RM M+TH,D=8ost )"T.,/= /c$i-bin/e:ample.c$i > <T)*L+ *,RD+R= 3 "+LLDP)"./0= 3 "+LLP)DD./0= - > <TR> <TD *0",L,R= #;46<FF ><./PJT ty8e= te6t siCe= -0 ><5TD> <TD *0",L,R= #;46<FF E)L.0/= Middle ><./PJT ty8e= i'age na'e= search src= search.$i% border= 3 ><5TD> <5TR> <5T)*L+> <5%,RM> /ote: .n order for your for' to function 8ro8erly7 you 'ust have a for' 8rocessing scri8t that resides on your web server and then lin( to it within your for' code! .f you don#t have one or aren#t fa'iliar with HTML for's7 you 'ay want to contact your server ad'inistrator for assistance! +dit the te6t indicated in bold to suit your needs! Jsing an i'age sub'ission button within your HTML web 8age for's will enable you to easily s8ice u8 your for's!
=.nternet +68lorer> The HTML web 8age horiContal rule <HR>7 also (nown as a line divider7 is used to divide content areas within a web 8age! These HTML horiContal rules can be used to divide your web 8age content sub9ects7 8roducts7 navigational 'enus or whatever you#d li(e! They 8rovide a great way to add color to your 8ages
without using i'ages and will enable you to i'8rove the a88earance of your web 8ages! .f you#re using line dividers =horiContal rules> within your web 8age7 you can change the color7 width and height of the line dividers by adding so'e attributes to your <HR> HTML code! The e6a'8les below show various styles of the HTML <HR> tag! They are dis8layed in a table and the width attributes s8an the set 8ercentage of the table! 1hen used without a table7 the width will s8an the set 8ercentage of the entire web 8age!
<HR>
<HR 1.DTH= /0= D.M+= < >
<HR 1.DTH= /0= D.M+= < >7!?29E>
<HR 1.DTH= 8/= ",L,R=
9::;;;; D.M+= I >
<HR 1.DTH= 2/= ",L,R=
900<<::% D.M+= 6 >
+dit the te6t indicated in bold to suit your needs! Jsing custo'iCed HTML web 8age horiContal rules or line dividers will enable you to ;uic(ly and easily s8ice u8 your web 8ages!
.n addition7 you can also use an i'age to create a horiContal rule within your HTML code! The i'age below7 which loo(s li(e this =a tiny blue dot>: is a - 8i6el by - 8i6el i'age! This single i'age can be used to create an HTML vertical or horiContal line within your web 8age si'8ly by changing the HTML i'age code H+.0HT and 1.DTH attributes! /ote: .n order for this HTML code to wor( 8ro8erly7 you will need to create an i'age that is 8i6els by - 8i6els in siCe and u8load it to your web server! &ou will then need to lin( to the i'age within your HTML i'age code! .f you#d li(e to use the i'age in this e6a'8le7 you#re welco'e to co8y it!
Here#s how: Place your 'ouse 8ointer over the little blue dot =enlarged to assist you> below! Right clic(7 and go to #Dave Picture )s!# ) window will load and enable you to select the folder on your co'8uter in which you#d li(e to save the i'age! Here#s the i'age:
<.M0 DR"= ima$e.$i% 1.DTH= 2 H+.0HT= 2 *,RD+R= 3 > <.M0 DR"= ima$e.$i% 1.DTH= 200 H+.0HT= 2 *,RD+R= 3 > <.M0 DR"= ima$e.$i% 1.DTH= 200 H+.0HT= / *,RD+R= 3 >
<.M0 DR"= ima$e.$i% 1.DTH= 2 H+.0HT= 200 *,RD+R= 3 >
<.M0 DR"= ima$e.$i% 1.DTH= / H+.0HT= 200 *,RD+R= 3 > +dit the te6t indicated in bold to suit your needs! HTML vertical rules 8rovide a great way to divide your web 8age contect areas and add a bit of color to your web 8age!
HTML web 8age tables are used within a web 8age to organiCe content! They can be dis8layed with bac(ground colors7 with or without borders7 and can contain rows and colu'ns dis8layed in an unli'ited nu'ber of ways! %or e6a'8le7 if you loo( toward the to8 of this web 8age7 right below the tabs7 you will see our navigational lin(s dis8layed within an HTML web 8age table with a grey bac(ground! 1e use color table bac(grounds throughout this web site! HTML Web Page Table .n this e6a'8le7 the HTML table below contains - colu'ns and 2 row! The left colu'n has the bac(ground color set to $N-)ID-! The right colu'n has the bac(ground color set to $+)+O+O! This is an e6a'8le of a table with bac(ground colors! This HTML table has colu'ns and 2 row! <T)*L+ *,RD+R= 3 "+LLP)DD./0= I )L.0/= "enter 1.DTH= P34 > <TR> <TD *0",L,R= #822492 1.DTH= 234 ><5TD> <TD *0",L,R= #E2E;E; ><5TD> <5TR> <5T)*L+> +dit the te6t indicated in bold to suit your needs! Jsing HTML web 8age tables with color bac(grounds is a great way to add color to your web 8ages without using gra8hics!
HTML tables are dis8layed within a web 8age to neatly align content! They can contain i'age bac(grounds7 colored bac(grounds7 borders of different siCes7 and an unli'ited nu'ber of rows and colu'ns! .n this e6a'8le7 the HTML table below contains - colu'ns and 2 row! The left colu'n contains the i'age! The original i'age a88ears below to enable you to see the actual siCe! This is an e6a'8le of an HTML table with an i'age bac(ground! This HTML table has - colu'ns and 2 row!
<T)*L+ *,RD+R= 3 "+LLP)DD./0= I )L.0/= "enter 1.DTH= P34 > <TR> <TD *)"Q0R,J/D= b$.$i% 1.DTH= 234 ><5TD> <TD *0",L,R= #E2E;E; ><5TD> <5TR> <5T)*L+> +dit the te6t indicated in bold to suit your needs! This is the actual i'age used within the above table:
/otice how the i'age du8licated itself to fill the table#s bac(groundA Qee8 this in 'ind when creating your own i'age! .f you#d li(e to use the above i'age as an e6a'8le to assist you in creating your own i'age7 you#re welco'e to co8y it! Here#s how: Place your 'ouse 8ointer over the i'age above and right clic( on your 'ouse! 0o to #Dave Picture )s# : a window will load and enable you to select the folder on your co'8uter in which you#d li(e to save the i'age!
=.nternet +68lorer> .f you#re using HTML tables within your web 8age and would li(e to add a color border7 this HTML code will assist you! .n this e6a'8le7 the table below contains 2 colu'n and 2 row! The bac(ground color is set to $+)+O+O and the border color is set to $"G"G"G! This is an e6a'8le of an HTML table with a color border and bac(ground!
This is an e6a'8le of an HTML table with the standard border!
<T)*L+ *,RD+R= - *,RD+R",L,R= #C6C6C6 "+LLP)DD./0= I )L.0/= "enter 1.DTH= P34 >
<TR> <TD *0",L,R= #E2E;E; >&our Te6t<5TD> <5TR> <5T)*L+> +dit the te6t indicated in bold to suit your needs! Jsing a color border and bac(ground with your HTML web 8age tables loo(s 'uch 'ore 8rofessional than si'8ly using the standard HTML table borders and bac(grounds! 0ive it a try7 you will 'ost li(ely be very 8leased with the new loo(!
=.nternet +68lorer> .f you#re loo(ing for a great way to s8ice u8 your HTML web 8age lin(s7 you can easily do so with style tags! .n this e6a'8le7 the active te6t lin( is underlined with the color set to $3333%%! 1hen the 'ouse is 8laced over the lin(7 the te6t color will change to $%%3333 and the underline disa88ears! Place the <DT&L+> tag between your <H+)D> and <5H+)D> tags!
+6a'8le Lin(
<DT&L+> <R:: ):active S color:#0000FF? te:t-decoration? T ):hover S color:#FF0000? te:t-decoration: none? T 55::> <5DT&L+> +dit the te6t indicated in bold to suit your needs! Dtyle tags 8rovide a great way to add so'e s8ecial effects to your 8ages! &ou can learn 'ore about using style tags within the C!! 1utorial section!
=.nternet +68lorer> .f you#d li(e to dis8lay a stationary i'age behind your te6t7 you can do so by adding attributes to your HTML body tag! Dtationary bac(ground i'ages re'ain in one 8lace even when scrolling through the 8age! ,nly the te6t will 'ove! To create this effect7 8lace the code below within your <*,D&> tag! <body bac(ground = yourima$e.$i% bg8ro8erties= fi6ed > +dit the te6t indicated in bold to suit your needs! 1hen selecting your bac(ground i'age7 (ee8 in 'ind that your te6t will be 'oving over your i'age7 so try to select an i'age that won#t 'a(e your te6t difficult to read! To 8revent your bac(ground i'age fro' tiling =re8eating>7 8lace the following code between your <H+)D> and <5H+)D> tags! <DT&L+ T&P+= te6t5css > <R:: *,D& S bac(ground:i'age: url=yourima$e."p$> T *,D& S bac(ground:re8eat: no:re8eat T *,D& S bac(ground:8osition: center T ::> <5DT&L+> Jsing a stationary i'age bac(ground 8rovides a great way to enhance your web 8age!
.f you#re loo(ing for a way to s8ice u8 your HTML list bullets7 this HTML ti8 is for you! &ou can use gra8hic bullets to re8lace the standard te6t bullets by using the Definition List tag! <DL> The (ey to using this techni;ue effectively is to select or create a s'all gra8hic that will co'8li'ent your list te6t and enhance your visitors e68erience on your web site! "o8y and 8aste the following HTML list code into the HTML 8ortion of your web 8age!
<DL> <DD><.M0 DR"= yourima$e.$i% >@ist Atem 7ne<5DD> <DD><.M0 DR"= yourima$e.$i% >@ist Atem 1wo<5DD>
<DD><.M0 DR"= yourima$e.$i% >@ist Atem 1hree<5DD> <DD><.M0 DR"= yourima$e.$i% >@ist Atem Four<5DD> <5DL> +dit the te6t indicated in red to suit your needs! Jsing gra8hic bullets within your HTML web 8ages will enable you to give your lists your own custo'iCed loo(!
.f you#ve ever tried to dis8lay an HTML table with borders within your web 8age7 you 'ay have discovered that unless you are dis8laying so'e te6t or an i'age within a table cell7 the border will not dis8lay! However7 this HTML ti8 will enble you to dis8lay an HTML table with borders even if so'e of your cells are e'8ty!
%ollowing is an HTML table that contains so'e e'8ty table cells! /otice the borders do not dis8lay within the e'8ty table cells! &our Te6t &our Te6t Di'8ly by adding the s8ecial 0nbsp+ character code within your HTML code7 your HTML table cells will be visible! &our Te6t &our Te6t &our Te6t &our Te6t
"o8y and 8aste the following HTML code into the HTML 8ortion of your web 8age!
<T)*L+ *,RD+R "+LLP)DD./0= I > <TR> <TD> our 1e:t<5TD> <TD>0nbsp+<5TD> <TD> our 1e:t<5TD> <5TR> <TR> <TD>0nbsp+<5TD>
<TD> our 1e:t<5TD> <TD>0nbsp+<5TD> <5TR> <5T)*L+> Place the 0nbsp+ character within the table cells that will be e'8ty! HTML web 8age tables can be a bit tric(y so'eti'es7 but they will enable you to give your web 8ages a great layout and are well worth the trouble!
.f you#re trying to 8lace te6t directly beside an i'age within your web 8age HTML code7 you 'ay have discovered it#s not as easy as it a88ears! 1hen you 8lace your i'age HTML code and te6t within your HTML code7 instead of the te6t and i'age dis8laying side by side li(e a news8a8er7 it will dis8lay li(e this:
The te6t is dis8laying at the botto' of the i'age!
To enable your i'age and te6t to dis8lay 8ro8erly together7 you will need to add an 2@A4> attribute to your i'age HTML code! %ollowing is an e6a'8le i'age dis8laying on the left with the te6t wra88ing around the i'age to the right! *y 8lacing the above code within your HTML7 your i'age will be dis8layed on the left hand side with your te6t dis8layed on the right! )s you continue to ty8e your te6t7 it will auto'atically for'at itself to wra8 around the right side and the botto' of your i'age! This e6a'8le has been set u8 with a table to (ee8 the te6t neatly aligned within a li'ited a'ount of s8ace! This table#s width is set u8 to s8an P34 of the 8age width!
To align your i'age to left and your te6t to the right7 add )L.0/= left to your i'age HTML code li(e this: <.M0 *,RD+R= 3 2@A4>'5@e%t5 DR"= youri'age!98g > &our Te6t
%ollowing is an e6a'8le i'age dis8laying on the right with the te6t wra88ing around the i'age to the left! *y 8lacing the above code within your HTML7 your i'age will be dis8layed on the right hand side with your te6t dis8layed on the left! )s you continue to ty8e your te6t7 it will auto'atically for'at itself to wra8 around the left side and the botto' of your i'age! This e6a'8le has been set u8 with a table to (ee8 the te6t neatly aligned within a li'ited a'ount of s8ace! This table#s width is set u8 to s8an P34 of the 8age width! To align your i'age to right and your te6t to the left7 add )L.0/= right to your i'age HTML code li(e this: <.M0 *,RD+R= 3 2@A4>'53i$ht5 DR"= youri'age!98g > &our Te6t 1ra88ing your te6t around your i'age will enable you to give your content a 'uch 'ore 8rofessional loo(!
.f you would li(e to 8rovide your web site visitors with a si'8le way to contact you fro' your web site7 but really don#t want to dis8lay your e'ail address7 this HTML for' code 'ay be what you#re loo(ing for! &ou can create a si'8le for'7 as dis8layed below7 to enable your visitors to send you co''ents7 ;uestions7 8roduct su88ort re;uests7 or whatever you#d li(e!
Name=
Email= Comment=
"o8y and 8aste the following HTML code into the HTML 8ortion of your web 8age:
<%,RM action= 'ailto:youByourdomain.com 'ethod= 8ost encty8e= te6t58lain > <T)*L+ *,RD+R= 3 "+LLDP)"./0= 3 "+LLP)DD./0= I 1.DTH= F34 > <TR> <TD width= H34 ><D.E align= right > <*>/a'e:<5*> <5D.E> <5TD> <TD width= N34 > <./PJT ty8e= te6t na'e= na'e siCe= -3 > <5TD> <5TR> <TR> <TD><D.E align= right ><*>+'ail:<5*><5D.E> <5TD> <TD> <./PJT ty8e= te6t na'e= e'ail siCe= -3 > <5TD> <5TR> <TR> <TD><D.E align= right > <*>"o''ent:<5*> <5D.E> <5TD> <TD><T+<T)R+) na'e= co''ent cols= H3 wra8= virtual rows= I > <5T+<T)R+)> <5TD><5TR> <TR> <TD>Bnbs8?<5TD> <TD> <./PJT ty8e= sub'it na'e= sub'it value= Dub'it > <./PJT ty8e= reset na'e= reset value= Reset > <5TD><5TR> <5T)*L+> <5%,RM> "hange the te6t indicated in red to your e'ail address!
Dis8laying an e'ail for' on your web 8age 8rovides a great way to enable your visitors to contact you!
1hen designing your web 8ages7 there 'ay be a ti'e when you will want to re'ove the underline of an individual te6t hy8erlin(! )lthough it is always best to leave hy8erlin(s at their default settings7 as this is what your visitors will be used to7 this HTML ti8 will assist you re'oving the lin( underline! %ollowing is an e6a'8le of a lin( dis8layed without the underline:
+6a'8le Lin(
To re'ove a lin( underline7 add !1 @E'51EC1-9EC7321A7>: >7>E5 to your lin( code:
<) HR+%= htt8:55www!yourdo'ain!co' DT&L+= T+<T:D+",R)T.,/: /,/+ >&our Lin(<5)> )lthough the above code will enable you to re'ove the underline within a hy8erlin(7 8lease use this code with caution to ensure that you don#t confuse your visitors!
1hen designing web 8ages7 there 'ay be ti'es when you would li(e to change the standard web 8age hy8erlin( color to a color that will 'atch your web site design! )lthough it is always best to leave your lin( colors at their default settings7 as this is what your visitors are used to7 the following ht'l ti8 will assist you in changing your lin( color! %ollowing is an e6a'8le lin( that is dis8layed in a different color than the default:
+6a'8le Lin(
To change the color of an individual lin(7 add a %,/T tag within your lin( code:
<) HR+%= htt8:55www!yourdo'ain!co' >DF7>1 C7@73'5#FF00005E&our Lin(D/F7>1E<5)> )lthough the above code will enable you to change the color of an individual hy8erlin(7 8lease use this code with caution7 as you don#t want to confuse your visitors!
1hen designing a web 8age7 'any ti'es you 'ay want to create a lin( fro' one section of a web 8age to another! This isn#t a standard lin( we#re referring to7 but a lin( that actually ta(es you to another section within the sa'e web 8age! %or e6a'8le7 'aybe you have infor'ation at the to8 of your web 8age and would li(e to lin( to further infor'ation at the botto' of your web 8age! This ht'l code will enable you to do 9ust that! &ou can create a lin( within the sa'e web 8age! The e6a'8le lin( below is lin(ed to a word at the botto' of this 8age!
+6a'8le Lin( !tep #Delect the area of te6t that you want the lin( to ta(e you to when clic(ed on! .n the above e6a'8le7 the te6t we lin(ed to below is HTML7 which is located within the Dub'it your HTML code sni88ets sentence below! ,nce you select the word that you would li(e to lin( to7 you will need to create an anchor lin( li(e this:
<) /)M+= 1e:t >1e:t<5)> The te6t indicated in bold will be the te6t you select7 which in our e6a'8le on this 8age was HTML! )lthough you can change the te6t indicated in red to whatever you#d li(e7 it#s a bit easier to re'e'ber if you 9ust use the sa'e te6t a what you have selected your anchor te6t to be! Do again7 in the above e6a'8le7 we used HTML! 1hen we created our anchor7 it loo(ed li(e this: Dub'it your D2 >2#E'5?1#@5E?1#@D/2E code sni88ets!
!tep #2
&our final ste8 will be to create your actual lin( that when clic( on will ta(e you to your anchor te6t: <) HR+%= $1e:t >"lic( Here<5)> .n the e6a'8le above7 we selected HTML for our anchor te6t and the #+6a'8le Lin(# te6t above was used to create the lin(! 1hen clic(ed on7 the 8age will 9u'8 to the HTML anchor te6t we selected below! 1hen you create your lin(7 you 'ust use the same name within your lin, as you used in your anchor! .n our e6a'8le7 we used HTML within our anchor tag and HTML within our actual lin(! 1hen we created our lin(7 it loo(ed li(e this: D2 ?3EF'5#?1#@5EE:ample @in,D/2E
&ou can create your own esca8e fro' fro' HTML hy8erlin( within your web 8age! .f you#ve ever discovered that so'eone has lin(ed to your web site within a fra'e7 which 'eans your site is stuc( in their fra'e with their infor'ation dis8laying within another fra'e7 you (now how frustrating this can be! &ou want your visitors to visit your web site within their standard browser window : not within another web site#s fra'e! However7 there is a way you can enable your visitors to esca8e! The following HTML ti8 will assist you! .f your web site gets tra88ed within so'eone else#s fra'es7 you can create a lin( to hel8 the' esca8e! &ou si'8ly create a lin( to your own web site at the botto' of your web 8age! However7 the (ey is to 8lace T)R0+T= Kto8 within your lin( code! This will dis8lay your web site in its own window and not so'eone else#s fra'e!
+6a'8le Lin(
<) HR+%= http://www.yourdomain.com 1234E1'56top5>http://www.yourdomain.com<5)> "hange the te6t indicated in red to your web address! )lthough the nu'ber of web sites designed in fra'es has decreased over the years7 it 'ay still be worth your ti'e to add an esca8e fro' fra'e HTML hy8erlin( to your web 8age!
.f you have a s'all web 8age i'age in UP0 for'at and need to 'a(e it 9ust a little bit s'aller7 you can do so si'8ly by changing your i'age#s H+.0HT and 1.DTH values within your i'age tag! However7 if you need to 'a(e a substantial change in the siCe of your i'age7 this 'ethod is not
reco''ended7 as your file siCe will be the sa'e! %ollowing is an e6a'8le of a standard i'age and then the sa'e i'age resiCed by changing the H+.0HT and 1.DTH values: ,riginal .'age
<.M0 DR"= youri'age!98g 1.DTH= FG H+.0HT= 2HI *,RD+R= 3 >
ResiCed .'age
<.M0 DR"= youri'age!98g 1.DTH= IP H+.0HT= GN *,RD+R= 3 >
1hen resiCing a web 8age i'age7 8lease ensure that you 'a(e the sa'e a'ount of change to both the H+.0HT and the 1.DTH values to ensure the i'age will dis8lay 8ro8erly!
I3 %o- 2o- + i4e to c)ange o, ,emo1e %o-, 2eb page ma,gins5 %o- can c)ange t)em b% p acing t)e 3o o2ing att,ib-tes 2it)in %o-, <bo+%" tag! To c)ange o, ,emo1e t)e top5 bottom an+ si+e page ma,gins on a 2eb page5 p ace t)e 3o o2ing co+e 2it)in %o-, <bo+%" tag? T)is co+e is compatib e 2it) bot) Inte,net Exp o,e, an+ Netscape Na1igato,! Internet Ex lorer su topma,gin=( bottomma,gin=( e3tma,gin=( ,ig)tma,gin=( orts:
!ets"a e !a#igator su ma,gin)eig)t=( ma,gin2i+t)=(
orts:
Ma4e s-,e %o- -se t)em a to enab e %o-, 2eb page to be p,ope, % 1ie2e+ in bot) b,o2se,s! <bo+% to $argin=% botto$$argin=% le&t$argin=% right$argin=% $arginheight=% $arginwidth=%"
@o- can c,eate a 2eb page HTM0 mo-seo1e, text +esc,iption5 simi a, to an image a t tag5 t)at 2i be 1ie2e+ 2)en %o-, mo-se is p ace+ o1e, t)e text in4! Not on % 2i t)is p,o1i+e %o-, 1isito,s 2it) 3-,t)e, in3o,mation in ,ega,+ to %o-, in45 b-t it a so p,o1i+es a goo+ 2a% to p ace a++itiona 4e%2o,+s 2it)in %o-, 2eb page 3o, bette, .ea,c) Engine ,an4ing! Exa$ le:
@o-, Text
# ace "TIT0E="%o-, text +esc,iption"" 2it)in %o-, HTM0 in4 co+e! <A HREF=")ttp?//222!%o-,+omain!com/" TIT0E="@o-, text +esc,iption""@o-, Text</A"
In a++ition5 %o- can +isp a% %o-, +esc,iption text in a ist b% a++ing t)e '(1%)'(13) c)a,acte,s 3o o2ing eac) text ine!
<A HREF=")ttp?//222!%o-,+omain!com/" TIT0E="8ebmaste, Reso-,ces?AB6(CAB6*C AB6(CAB6*C Co-nte,sAB6(CAB6*C :-estboo4sAB6(CAB6*C A-to,espon+e,sAB6(CAB6*C an+ mo,e!!!B6(CAB6*C""@o-, Text</A"
+dit the te6t indicated in red to suit your needs!
T)e abo1e TIT0E +esc,iption 2o- + be +isp a%e+ i4e t)is 2)en %o- p ace %o-, mo-se o1e, t)e in4?
@o-, Text
@o- can +isp a% %o-, in4 +esc,iption in t)e stat-s ba, o3 %o-, b,o2se,! 8)en t)e mo-se is p ace+ o1e, a in45 t)e in4 +esc,iption 2i be 1ie2e+ in t)e stat-s ba,!
Exa$ le: # ace %o-, mo-se o1e, t)is in4

0oo4 2it)in t)e o2e, e3t-)an+ si+e o3 t)e stat-s ba, to 1ie2 t)e in4 +esc,iption! Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e in4 to appea,? <A HREF=")ttp?//222!+omain!com" onmo-seo1e,="2in+o2!stat-s=9@o-, text +esc,iption9C ,et-,n t,-e" onmo-seo-t="2in+o2!stat-s=99C,et-,n t,-e""@o-, in4e+ text</a"
C)ange t)e text 2)e,e in+icate+ in ,e+! Anot)e, g,eat -se 3o, t)is co+e is to )i+e an a33i iate a++,ess! Man% times5 %o- 2i 3in+ t)at i3 %o-, 1isito,s see a in4 %o- a,e ,e3e,encing is an a33i iate in45 t)e% 2on9t c ic4 on it! To a e1iate t)is p,ob em5 %o- can -se t)is HTM0 tip to )i+e %o-, a33i iate a++,ess!
Exa$ le: Recommen+e+ 0in4

<A HREF=")ttp?//222!a33i iate+omain!com/D%o-,a33i iatei+" onmo-seo1e,="2in+o2!stat-s=9)ttp?//222!a33i iate+omain!com9C ,et-,n t,-e" onmo-seo-t="2in+o2!stat-s=99C,et-,n t,-e""Recommen+e+ 0in4</a"
C)ange t)e text 2)e,e in+icate+ in ,e+ as 3o o2s? )ttp?//222!a33i iate+omain!com/D%o-,a33i iatei+ - T)is in4 s)o- + be c)ange+ to %o-, act-a a33i iate a++,ess! )ttp?//222!a33i iate+omain!com - T)is in4 s)o- + be c)ange+ to t)e in4 o, text %o2o- + i4e %o-, 1isito,s to see 2it)in t)ei, stat-s ba, 2)en t)e% p ace t)ei, mo-se pointe, o1e, t)e in4! Recommen+e+ 0in4 - T)is text s)o- + be c)ange+ to t)e text %o- 2o- + i4e to be +isp a%e+ 2it)in %o-, 2eb page!
I3 %o-9,e -sing a ist management s%stem t)at ,eE-i,es a ce,tain s-bFect ine 2it)in an emai message5 man% times5 %o-9 3in+ t)at i3 %o- ,eE-est t)at a ce,tain 2o,+ be p ace+ 2it)in t)e s-bFect o3 an emai 5 it 2on9t be p,o1i+e+! T)is co+e can be -se+ to ens-,e t)at %o-, emai s-bFect is 3i e+ in exact % as %o- ,eE-i,e!
Exa$ le: C ic4 He,e to test t)e a-to-3i emai in4

Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e emai in4 to appea,?
<A HREF="mai to?you*yourdo$ain+"o$Ds-bFect=,our -ub.e"t"" E+it t)e text in ,e+ to s-it %o-, nee+s!
I3 %o-9,e oo4ing 3o, a 2a% to )ig) ig)t ce,tain in4s an+/o, text 2it)in %o-, 2eb page5 t)is HTM0 tip ma% be %o-, ans2e,! @o- can )ig) ig)t %o-, in4s an+ text in an% co o, %o-9+ i4e simp % b% -sing .T@0E tags!
/ighlighting a 0ink: )ttp?//222!%o-,+omain!com/

Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e in4 to appea,? <A HREF="htt :11www+yourdo$ain+"o$" .T@0E="bac4g,o-n+?yellowC co o,?bla"k""0inked 2ext</A" E+it t)e text in bo + to s-it %o-, nee+s!
/ighlighting 2ext: Examp e? Examp e o3 )ig) ig)te+ text

Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e in4 to appea,? <.#AN st% e="GACH:RO$ND-CO0OR? (&&&&%%""Exa$ le o& highlighted text</.#AN" E+it t)e text in bo + to s-it %o-, nee+s! Ho2e1e,5 4eep in min+5 t)e text m-st be 1isib e t),o-g) t)e bac4g,o-n+ co o, %o- se ect5 so p ease ens-,e %o- se ect a ig)t co o,!
Trac(ing your advertising strategies is an i'8ortant 8art of doing business! However7 8urchasing an ad trac(ing software 8rogra' can be e68ensive! .f you#re loo(ing for a si'8le way to trac( your advertising7 this HTML ti8 'ay be your answer! &ou can trac( your classified ads using a si'8le code? however7 you 'ust have access to your web site logs to view your results! 1hen you 8lace your ads7 instead of using your regular web address7 use so'ething si'ilar to the code below: htt8:55www!yourdo'ain!co'AadKone
"hange the na'e after the ;uestion 'ar( for each ad you 8lace! 1hen you view your logs7 you will be able to see e6actly which ads are effective and which ads aren#t!
I3 %o-9,e oo4ing 3o, a 2a% to p,e1ent b,o2se, cac)e5 t)is HTM0 tip 2i assist %o-! Meta tags a,e -se+ to gi1e +etai e+ inst,-ctions in ,ega,+ to a 2eb page to t)e .ea,c) Engines an+ b,o2se,s! 8)en %o- get 1isito,s coming to %o-, 2eb site5 %o-, 1isito,s b,o2se, 2i cac)e o, ma4e a cop% o3 %o-, 2eb site 3o, 3aste, 1ie2ing t)ei, next 1isit! T)is 2i p,e1ent %o-, ,eg- a, 1isito,s 3,om seeing %o-, ne2 content -n ess t)e% man-a % ,e oa+ t)ei, b,o2se,! I3 %o- +on9t ,eg- a, % -p+ate %o-, 2eb site5 b,o2se, cac)e ma% not be a p,ob em! Ho2e1e,5 i3 %o-9,e contin-o-s % -p+ating %o-, 2eb site5 %o- ma% 2ant to p,e1ent b,o2se, cac)e to ens-,e %o-, ,eg- a, 1isito,s 2i see t)e atest 1e,sion o3 %o-, 2eb site! @o- can p,e1ent b,o2se, cac)e simp % b% inc -+ing a specia META tag 2it)in %o-, HTM0 co+e! A++ t)e 3o o2ing co+e bet2een t)e <HEAD" an+ </HEAD" tags o3 %o-, HTM0! <META )ttp-eE-i1="#,agma" content="no-cac)e""
I3 %o-9,e oo4ing 3o, a 2a% to p,e1ent .ea,c) Engines 3,om in+exing ce,tain 2eb pages 2it)in %o-, 2eb site5 t)is HTM0 tip is 3o, %o-! Meta tags a,e -se+ to gi1e +etai e+ inst,-ctions in ,ega,+ to a 2eb page to t)e .ea,c) Engines an+ b,o2se,s! Man% times5 %o- ma% )a1e a 2eb page t)at %o- +on9t 2ant t)e .ea,c) Engines to in+ex5 s-c) as +o2n oa+ pages o, p,i1ate membe,s)ip sites! To )e p 2it) t)is p,ob em5 a++ one o3 t)e 3o o2ing META tag co+es bet2een t)e <HEAD" an+ </HEAD" tags o3 %o-, HTM0! T)e 3o o2ing META tag te s t)e .ea,c) Engine ,obots not to in+ex t)is page an+ not to 3o o2 an% in4s 2it)in t)e page? <META NAME="ROGOT." CONTENT="NOINDEI5NOFO00O8""
T)e 3o o2ing META tag te s t)e .ea,c) Engine ,obots not to in+ex t)is page5 b-t 3o o2 an% in4s 2it)in t)e page? <META NAME="ROGOT." CONTENT="NOINDEI5FO00O8""
N,J G5I, T,LT
T)e FONT tag is -se+ to +isp a% %o-, text in a speci3ic st% e! A t)o-g) %o- ma% speci3% t)e 3ont st% e %o- 2o- + i4e %o-, text to be +isp a%e+5 p ease 4eep in min+5 i3 %o-, 1isito, +oesn9t )a1e t)e 3ont 3ace %o- speci3% on t)ei, comp-te,5 t)e text 2i be +isp a%e+ in t)e -se,s +e3a- t 3ont setting! To ma4e s-,e %o-, pages a,e being 1ie2e+ as %o- inten+e+5 %o- s)o- + inc -+e a te,nati1e 3onts 2it)in %o-, HTM0 2eb page 3ont tag!
<FONT 3ace="3erdana5/el#eti"a5Arial""@o-, Text</FONT" T)e co+e abo1e te s t)e b,o2se, to +isp a% %o-, text in Verdana5 b-t i3 %o-, 1isito, +oesn9t )a1e Verdana to +isp a% %o-, text in Helvetica an+ so on! G% inc -+ing 3ont a te,nati1es5 %o- can ens-,e %o-, page 2i be +isp a%e+ exact % as %o- )a+ inten+e+!
T)e HEADIN: tag is -se+ to +isp a% %o-, )ea+ing text in a a,ge, 3ont 2it) <H6" being t)e a,gest +o2n to <HJ" being t)e sma est! .ome .ea,c) Engines p ace ,e e1ance on text +isp a%e+ 2it)in t)e <HB" tags5 so p ace some o3 %o-, most ,e e1ant 4e%2o,+s 2it)in an% o3 t)e J <Hx" tags! Examp e?
<H*"@o-, :-i+e to Hea t) A Fitness</H*" G,o2se, /ie2?
,our 4uide to /ealth ' 5itness

8)en -sing t)e HEADIN: tags5 %o- +on9t )a1e to -se t)e <H6" 3o, %o-, 3i,st )ea+ing! @o- ma% begin 2it) t)e )ea+ing si&e o3 %o-, c)oice! Ho2e1e,5 3o, %o-, secon+a,% )ea+ings5 %o- s)o- + not -se a a,ge, )ea+ing t)an %o- began 2it)! In ot)e, 2o,+s5 i3 %o-9,e -sing <H*" 3o, %o-, p,ima,% )ea+ing5 t)en %o-, secon+a,% )ea+ings s)o- + be <HK" o, <HL" an+ not <H6" o, <H'"!
A t)o-g) %o- can en a,ge 2eb page text 2it) t)e FONT tag5 %o- a so -se t)e GI: tag! T)e GI: tag is -se+ to inc,ease t)e si&e o3 %o-, 3ont! @o- can a++ a++itiona GI: tags5 si+e b% si+e5 to inc,ease %o-, 3ont si&e e1en 3-,t)e,! Fo, eac) a++itiona GI: tag %o- -se5 %o-, 3ont si&e 2i inc,ease!
/260 7ode:
<GI:"@o-, Text</GI:"
8rowser 3iew:
@o-, Text
/260 7ode: <GI:"<GI:"@o-, Text</GI:"</GI:"
8rowser 3iew:
@o-, Text
T)e GI: tag can be -se+ in p ace o3 t)e FONT tag5 as t)e% bot) pe,3o,m t)e same tas4! Examp e Font Tag? <FONT si&e="*""
@o- can )ig) ig)t %o-, HTM0 2eb page text in t)e co o, o3 %o-, c)oice b% a++ing t)e .T@0E att,ib-te to %o-, HTM0 co+e! Examp e? Examp e o3 )ig) ig)te+ text Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e text to appea,?
<.#AN st% e="GACH:RO$ND-CO0OR? B3333((""Examp e o3 )ig) ig)te+ text</.#AN" @o- can c)ange t)e co o,s to 2)ate1e, %o-9+ i4e5 b-t 4eep in min+5 t)e text m-st be 1isib e t),o-g) t)e bac4g,o-n+ co o,!
I3 %o-91e e1e, t,ie+ to +isp a% an image 2it) %o-, text 2,apping a,o-n+ it5 %o- )a1e p,obab % +isco1e,e+ it 2on9t 2o,4 2it) F-st a p ain image tag! To +o so5 %o- m-st inc -+e t)e A0I:N att,ib-te 2it)in %o-, image tag! I$age 9is layed on 0e&t: <IM: 8:;9E;="%" A0I4!="0e&t" .RC="%o-,image!Fpg""@o-, Text G% p acing t)e abo1e co+e 2it)in %o-, HTM05 %o-, image 2i be +isp a%e+ on t)e e3t )an+ si+e 2it) %o-, text +isp a%e+ on t)e ,ig)t! As %o- contin-e to t%pe %o-, text5 it 2i a-tomatica % 3o,mat itse 3 to 2,ap a,o-n+ t)e ,ig)t si+e an+ t)e bottom o3 %o-, image! T)is examp e )as been set -p 2it) a tab e to 4eep t)e text neat % a igne+ 2it)in a imite+ amo-nt o3 space! T)e tab e9s 2i+t) is set -p to span L(M o3 t)e page 2i+t)! I$age 9is layed on ;ight: <IM: 8:;9E;="%" A0I4!=";ight" .RC="%o-,image!Fpg""@o-, Text G% p acing t)e abo1e co+e 2it)in %o-, HTM05 %o-, image 2i be +isp a%e+ on t)e ,ig)t )an+ si+e 2it) %o-, text +isp a%e+ on t)e e3t! As %o- contin-e to t%pe %o-, text5 it 2i a-tomatica % 3o,mat itse 3 to 2,ap a,o-n+ t)e e3t si+e an+ t)e bottom o3 %o-, image! T)is examp e )as been set -p 2it) a tab e to 4eep t)e text neat % a igne+ 2it)in a imite+ amo-nt o3 space! T)e tab e9s 2i+t) is set -p to span L(M o3 t)e page 2i+t)!
T)e <b oc4E-ote" tag 2i enab e %o- to in+ent %o-, text 3,om t)e e3t an+ ,ig)t ma,gins 2it)in %o-, 2eb page! Ho2e1e,5 it 2on9t enab e %o- to in+ent %o-, text 3,om F-st one si+e! I3 %o- 2o- + i4e to in+ent %o-, text 3,om t)e e3t ma,gin on %5 %o- can -se t)e <$0" tag ;t)e same tag %o- 2o- + -se to c,eate a b- ete+ ist=! T)e on % +i33e,ence is t)at %o- 2on9t -se t)e <0I" tags 2it) it! @o-, text 2i be in+ente+ F-st as a b- ete+ ist is5 b-t t)e,e 2on9t be an% b- ets! T)is examp e is +isp a%e+ -sing t)e <$0" tag 2it)o-t t)e <0I" tags! Notice )o2 t)e text is in+ente+ 3,om t)e e3t ma,gin!
<$0" # ace %o-, text bet2een t)e <$0" an+ </$0 tags 2it)o-t t)e <0I" tags! </$0"
@o- can 1e,tica % a ign %o-, text 2it)in a 2eb page! Superscript Example
:? 12=
# ace t)e 3o o2ing co+e be3o,e t)e text %o- 2o- + i4e to a ign? <span st% e="1e,tica -a ign? 3%<C""*x6('</span" E+it t)e text in bo + to s-it %o-, nee+s! # ace t)e 3o o2ing co+e a3te, t)e text %o- 2o- + i4e to a ign? </span"
Subscript Example CJH6'OJ # ace t)e 3o o2ing co+e be3o,e t)e text %o- 2o- + i4e to a ign? <span st% e="1e,tica -a ign? 3%<C""CJH6'OJ</span"
E+it t)e text in bo + to s-it %o-, nee+s! # ace t)e 3o o2ing co+e a3te, t)e text %o- 2o- + i4e to a ign? </span" T)e pe,centage speci3ies a pe,centage o3 t)e +istance to t)e ine )eig)t abo1e o, be o2 t)e no,ma ine )eig)t! It ,aises o, o2e,s t)e base ine b% a pe,centage o3 t)e ine-)eig)t to t)e next ine! Fo, examp e5 a 1a -e o3 L(M 2i ,aise t)e base ine to )a 32a% bet2een t)e no,ma base ine an+ t)e base ine o3 t)e ine abo1e! A 1a -e o3 -6((M 2i o2e, t)e base ine to t)e same )eig)t as t)e base ine o3 t)e ine be o2! *(M o, -*(M oo4s abo-t ,ig)t 3o, t)ings i4e scienti3ic notation!
HTML L?"O+
@o- can +isp a% %o-, HTM0 in4 +esc,iption in t)e stat-s ba, o3 %o-, b,o2se,! 8)en t)e mo-se is p ace+ o1e, a in45 t)e text in4 +esc,iption 2i be 1ie2e+ in t)e stat-s ba,!
<A HREF=")ttp?//222!+omain!com" onmo-seo1e,="2in+o2!stat-s=9@o-, text +esc,iption9C ,et-,n t,-e" onmo-seo-t="2in+o2!stat-s=99C,et-,n t,-e""@o-, in4e+ text</a" Exa$ le: # ace %o-, mo-se o1e, t)is in4 C)ange t)e text 2)e,e in+icate+ in ,e+! T)is co+e 2i enab e %o- to )i+e a33i iate in4s5 +isp a% a specia in4s +esc,iptions o, 2)ate1e, %o-9+ i4e!
@o- can c,eate an HTM0 mo-seo1e, text +esc,iption5 simi a, to an image a t tag o, pop -p text +esc,iption5 t)at 2i be 1ie2e+ 2)en %o-, mo-se is p ace+ o1e, t)e text in4! # ace "tit e="%o-, text +esc,iption"" 2it)in %o-, HTM0 in4 co+e!
<A HREF=")ttp?//222!%o-,+omain!com/" TIT0E="@o-, text +esc,iption""@o-, Text</A" Exa$ le: @o-, Text In a++ition5 %o- can +isp a% %o-, +esc,iption text in a ist b% a++ing t)ese c)a,acte,s AB6(CAB6*C! <A HREF=")ttp?//222!%o-,+omain!com/" TIT0E="8ebmaste, Reso-,ces?AB6(CAB6*C AB6(CAB6*C Co-nte,sAB6(CAB6*C :-estboo4sAB6(CAB6*C A-to,espon+e,sAB6(CAB6*C an+ mo,e!!!B6(CAB6*C""@o-, Text</A" T)e abo1e TIT0E +esc,iption 2o- + be +isp a%e+ i4e t)is 2)en %o- p ace %o-, mo-se o1e, t)e in4? Exa$ le: @o-, Text E+it t)e text in+icate+ in ,e+ to s-it %o-, nee+s!
I3 %o-, 2eb site gets t,appe+ 2it)in someone9s 3,ames5 %o- can c,eate a in4 to )e p %o-, 1isito, escape! # ace t)e 3o o2ing co+e 2it)in %o-, HTM0 2)e,e %o- 2o- + i4e t)e in4 to appea,!
<A HREF=")ttp?//222!%o-,+omain!com/" TAR:ET="Ntop""Escape F,om F,ame</A" @o-9,e act-a % F-st c,eating a in4 to %o-, o2n 2ebsite 2it) t)e TAR:ET set to "Top!" At one time5 t)e,e 2e,e man% sites +esigne+ 2it) 3,ames! Ho2e1e,5 as mo,e an+ mo,e peop e )a1e ,ea i&e+ t)at 3,ames a,e not a goo+ c)oice 3o, +esigning a 2eb site5 t)e n-mbe, o3 sites +esigne+ in 3,ames )as +,oppe+ consi+e,ab %! Fo, t)is ,eason5 t)e c)ance o3 %o-, site being t,appe+ 2it)in someone9s 3,ames is s im! Ho2e1e,5 %o- ma% sti 2ant to inc -+e t)is in4 at t)e bottom o3 %o-, site!
@o- can c,eate a in4 2it)in t)e same page b% a++ing t)e 3o o2ing co+es! -2E= 1 .e ect t)e a,ea %o- 2ant t)e in4 to ta4e %o- to 2)en c ic4e+ on an+ p ace t)e 3o o2ing co+e 2it)in %o-, HTM0! C)ange t)e name in+icate+ in bo + to an%t)ing %o-9+ i4e! T)is 2i c,eate an anc)o, 3o, %o-, in4!
<A NAME="Anyna$e""@o-, Text</A" -2E= 2 C,eate %o-, in4 an+ ma4e s-,e %o- -se t)e same name as %o- -se+ in %o-, anc)o,! <A HREF="BAnyna$e""C ic4 He,e</A"
@o- can ,emo1e t)e -n+e, ine o3 an in+i1i+-a HTM0 2eb page in45 a so 4no2n as a )%pe, in45 b% a++ing t)e .T@0E tag to %o-, in4 HTM0! Exa$ le 7ode:
<A HREF=")ttp?//222!%o-,+omain!com" -2,0E="2E>2?9E7:;A2I:!: !:!E""@o-, 0in4</A"
8rowser 3iew: @o-, 0in4
@o- can c)ange t)e co o, o3 an in+i1i+-a HTM0 2eb page in4 b% a++ing a 3ont tag in 3,ont o3 %o-, in4e+ text! Exa$ le 7ode: <A HREF=")ttp?//222!%o-,+omain!com""@5:!2 7:0:;="(55%%%%"A@o-, 0in4@15:!2A</A" 8rowser 3iew: @o-, 0in4 A t)o-g) %o- can c)ange t)e in45 4eep in min+5 %o-, 1isito,s a,e -se+ to t)e stan+a,+ in4s co o,s an+ ma% become con3-se+ i3 %o- c)ange it! $se t)is co+e 2it) ca-tion!
@o- can c,eate an HTM0 mai to emai in4 t)at 2i a-tomatica % 3i in an emai s-bFect ine 2)en c ic4e+ on! A++ t)e 3o o2ing co+e to %o-, HTM0!
<) HR+%= 'ailto:you@yourdo'ain!co'Asub9ect= our !ub"ectBbody=#essa$e %or the body >you@yourdo'ain!co'<5a> Exa$ le: C ic4 He,e to test t)e a-to-3i emai in4! Man% times5 %o-9 3in+ t)at i3 %o- ,eE-est t)at a ce,tain 2o,+ be p ace+ 2it)in t)e s-bFect o3 an emai 5 it 2on9t be p,o1i+e+! T)is co+e can be -se+ to ens-,e t)at %o-, emai s-bFect is 3i e+ in exact % as %o- ,eE-i,e!
T)e ANCHOR tag is -se+ to c,eate a )%pe, in4 2it)in a 2eb page! To in4 to a 2eb page 2it)in t)e same +i,ecto,% o3 %o-, 2eb site5 %o- on % nee+ to inc -+e t)e page name 2it)in %o-, HTM0 co+e! <A HREF="your age+ht$l""Text</A"
8)en in4ing to a 2eb page 2it)in %o-, 2eb site in a +i33e,ent +i,ecto,%5 %o- m-st inc -+e t)e +i,ecto,% name 2it) %o-, page name! <A HREF="yourdire"tory1your age+ht$l""Text</A"
8)en in4ing to anot)e, 2eb site5 %o- m-st inc -+e t)e 3- $R0! <A HREF="htt :11www+site+"o$""Text</A"
@o- can +isp a% %o-, HTM0 2eb page in4s in t)e co o, o3 %o-, c)oice b% a++ing t)e .T@0E att,ib-te to %o-, HTM0 co+e! Examp e? )ttp?//222!%o-,+omain!com/ Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e in4 to appea,?
<A HREF=")ttp?//222!%o-,+omain!com/" .T@0E="bac4g,o-n+?%e o2C co o,?b ac4" TAR:ET="b an4"")ttp?//222!%o-,+omain!com/</A" @o- can c)ange t)e co o,s to 2)ate1e, %o-9+ i4e5 b-t 4eep in min+5 t)e text m-st be 1isib e t),o-g) t)e bac4g,o-n+ co o,!
I3 %o- )a1e a 3i e %o- 2o- + i4e to enab e %o-, 1isito,s to +o2n oa+5 most 2eb se,1e,s 2i a o2 %o- to in4 +i,ect % to a +o2n oa+ 3i e! <A HREF=")ttp?//%o-,+omain!com/3i e!exe""Fi e</A"
I3 %o- )a1e access to 3tp5 %o- can c,eate a +o2n oa+ in4 i4e t)is? <A HREF="3tp!%o-,+omain!com/3i e!&ip""Fi e</A"
I3 %o- +on9t )a1e access to 3tp5 %o- can c,eate a +o2n oa+ in4 i4e t)is?
<A HREF=")ttp?//%o-,+omain!com/3i e!&ip""Fi e</A" Inst,-ct %o-, 1isito,s to )o + t)e "s)i3t" 4e% +o2n 2)i e t)e% c ic4 on t)e +o2n oa+ in4!
8o- + %o- i4e to +isp a% an emai a++,ess on a 2eb page5 b-t nee+ a 2a% to p,otect it 3,om spamme,sD T)is tip is 3o, %o-! Disp a%ing %o-, emai a++,ess on %o-, 2eb site is an impo,tant pa,t o3 goo+ c-stome, se,1ice! Ho2e1e,5 t)e 3ea, o3 spam ,obots )a,1esting emai a++,esses p,e1ents man% 2ebmaste,s 3,om +oing so! I3 %o- 2o- + i4e to +isp a% %o-, emai a++,ess 2it)in %o-, 2eb pages an+ not 2o,,% abo-t it being )a,1este+5 %o- can p,otect %o-,se 3! Instea+ o3 +isp a%ing t)e -s-a mai to?%o-O%o-,+omain!com5 -se t)e 3o o2ing co+e 2it)in %o-, HTM0?
<A HREF="mai to?%o-'(B4)%o-,+omain!com""Contact $s</A"
1hen clic(ed on7 it will dis8lay your e'ail address correctly!
N,J G5I, N?"/*N+

8)en +esigning a 2eb site5 %o-, 3i,st consi+e,ation s)o- + be b,o2se, compatibi it%! @o-, 2eb site ma% oo4 g,eat 2)en 1ie2e+ 2it) Inte,net Exp o,e,5 b-t 2)en 1ie2e+ 2it) Netscape Na1igato,5 e1e,%t)ing ma% not be 3o,matte+ p,ope, %! A 2eb b,o2se,s a,e not c,eate+ eE-a %! /ie2 %o-, site t),o-g) +i33e,ent b,o2se,s an+ sc,een ,eso -tions so %o- 2i see )o2 %o-, 1isito,s 2i 1ie2 %o-, site! A goo+ 2a% to see )o2 %o-, 2eb site 2i oo4 t),o-g) bot) b,o2se,s is to +o2n oa+ an+ insta a cop% o3 bot) Inte,net Exp o,e, an+ Netscape Na1igato,! Netscape
Mic,oso3t /isit t)e 3o o2ing 2eb sites to 1ie2 %o-, 2eb site t),o-g) +i33e,ent b,o2se,s an+ sc,een ,eso -tions? An%G,o2se, - #,o1i+es a 1a,iet% o3 3,ee se,1ices 3o, %o-, 2eb site5 inc -+ing b,o2se, compatibi it% testing5 in4 c)ec45 HTM0 c)ec45 meta tag c,eato, an+ mo,e! Ma4e s-,e %o- 1ie2 %o-, 3i,st 2eb page in +i33e,ent b,o2se,s an+ sc,een ,eso -tions! Once %o- get it oo4ing g,eat 3o, e1e,%one5 %o- can -se it as a temp ate 3o, t)e ,est o3 %o-, 2eb site! T)is tec)niE-e can sa1e %o- a g,eat +ea o3 time!
8)en in4ing to a 2eb a++,ess t)at isn9t a pa,t o3 %o-, 2eb site5 open t)e 2eb site in a ne2 2in+o2! @o-, 2eb site 2i ,emain open in t)e o,igina 2in+o2 an+ p,e1ent %o- 3,om comp ete % osing %o-, 1isito,s! To open a 2eb page in a ne2 2in+o25 a++ t)e 3o o2ing co+e to %o-, in4!
<A HREF=")ttp?//222!%o-,+omain!com/" 2A;4E2="Cblank""@o-, 0in4</a" 2ry it: C ic4 )e,e to open a in4 in a ne2 2in+o2! A t)o-g) t)is co+e is goo+ to -se i3 %o-9,e in4ing to a site o-tsi+e o3 %o-, o2n5 %o2on9t 2ant to -se it 2)en na1igating t),o-g) %o-, o2n site5 as %o- 2ant %o-, 2eb pages to open 2it)in t)e same 2in+o2!
It9s a p,o1en 3act t)at t)e -se o3 pop-p 2in+o2s is an e33ecti1e ma,4eting tec)niE-e t)at p,o+-ces g,eat ,es- ts! Ho2e1e,5 t)e% can be 1e,% i,,itating to %o-, 1isito,s! Ho2 can %o- -se t)is po2e,3- ma,4eting tec)niE-e 2it)o-t o33en+ing %o-, 1isito,sD Comp,omise an+ -se a pop-p 2in+o2 t)at on % +isp a%s t)e 3i,st time %o-, 1isito, ente,s %o-, site! # ace t)e 3o o2ing co+e 2it)in t)e <GOD@" o3 %o-, 2eb page!
<.CRI#T 0AN:$A:E="Pa1a.c,ipt"" <>-3-nction :etCoo4ie;name= Q 1a, a,g=nameR"="C 1a, a en=a,g! engt)C 1a, c en=+oc-ment!coo4ie! engt)C 1a, i=(C 2)i e ;i<c en= Q 1a, F=iRa enC i3 ;+oc-ment!coo4ie!s-bst,ing;i5F===a,g= ,et-,n ")e,e"C i=+oc-ment!coo4ie!in+exO3;" "5i=R6C i3 ;i==(= b,ea4C S ,et-,n n- C S 1a, 1isit=:etCoo4ie;"COOHIE6"=C i3 ;1isit==n- =Q 1a, expi,e=ne2 Date;=C 2in+o2!name = "t)is2in"C ne22in=open;"your age+ht$"5 "+isp2in"5 "width=4D%Eheight=4DDEs"rollbars=yesE $enubar=no"=C expi,e=ne2 Date;expi,e!getTime;=R<<<J((((((=C +oc-ment!coo4ie="COOHIE6=)e,eC expi,es="Rexpi,eC S // --" </.CRI#T"
C)ange t)e text 2)e,e in+icate+ in ,e+! T)e "your age+ht$" text speci3ies t)e pop-p 2in+o2 -, ! C)ange t)e height an+ width to %o-, p,e3e,,e+ 2in+o2 si&e!
HTML T5JL,+
8it)o-t -sing a p ace)o +e, 2it)in %o-, b an4 HTM0 tab e ce s5 %o-, empt% tab e ce bo,+e,s 2i not +isp a%! G% simp % a++ing t)e AnbspC c)a,acte, co+e 2it)in %o-, HTM05 %o-, tab e ce 2i be 1isib e! Exa$ le /260 7ode With !o =la"eholders:
<TAG0E GORDER CE00#ADDIN:="K"" <TR" <TD"@o-, Text</TD" <TD"</TD" <TD"@o-, Text</TD" </TR" <TR" <TD"</TD"
<TD"@o-, Text</TD" <TD"</TD" </TR" </TAG0E" 8rowser 3iew With !o =la"eholders: @o-, Text @o-, Text Exa$ le 7ode With =la"eholders: <TAG0E GORDER CE00#ADDIN:="K"" <TR" <TD"@o-, Text</TD" <TD"'nbs )</TD" <TD"@o-, Text</TD" </TR" <TR" <TD"'nbs )</TD" <TD"@o-, Text</TD" <TD"'nbs )</TD" </TR" </TAG0E" 8rowser 3iew With =la"eholders: @o-, Text @o-, Text @o-, Text @o-, Text
@o- can a++ an image bac4g,o-n+ to %o-, HTM0 tab e ce s b% a++ing GACH:RO$ND="%o-,image!gi3" to %o-, <TD" tag! Exa$ le /260 7ode:
<TAG0E GORDER="(" CE00#ADDIN:="'" 8IDTH="L(M"" <TR" <TD GACH:RO$ND="%o-,image!gi3""<FONT CO0OR="8)ite""T)is examp e +isp a%s %o-, text o1e, %o-, image bac4g,o-n+!</FONT" </TD"
</TR" </TAG0E" 8rowser 3iew: T)is examp e +isp a%s %o-, text o1e, %o-, image bac4g,o-n+! Exa$ le /260 7ode: <TAG0E GORDER="(" CE00#ADDIN:="'" 8IDTH="L(M"" <TR" <TD GACH:RO$ND="%o-,image!gi3" 8IDTH="6(M"" </TD" <TD 8IDTH="K(M""T)is examp e +isp a%s %o-, text next to %o-, image bac4g,o-n+! </TD" </TR" </TAG0E" 8rowser 3iew: T)is examp e +isp a%s %o-, text next to %o-, image bac4g,o-n+!
T)e HTM0 TAG0E tag is t)e opening tag -se+ to c,eate a tab e 2it)in a 2eb page! To a++ co o, to %o-, HTM0 TAG0E ce s5 a++ 847:0:;="("olor "ode" 2it)in t)e <TD" tag!
<TAG0E CE00#ADDIN:="'" CE00.#ACIN:="'" 8IDTH="L(M"" <TR" <TD G:CO0OR="BCCCCCC""Co -mn 6</TD" <TD G:CO0OR="BCCCCCC""Co -mn '</TD" </TR" <TR" <TD"Ro2 '</TD" <TD"Ro2 '</TD" </TR" </TAG0E"
8rowser 3iew Co -mn 6 Ro2 ' Co -mn ' Ro2 '
T)e HTM0 TAG0E tag is t)e opening tag -se+ to c,eate a tab e 2it)in a 2eb page! @o- can a++ co o, to %o-, HTM0 TAG0E bo,+e,s b% a++ing 8:;9E;7:0:;="("olor"ode" 2it)in %o-, TAG0E tag! /260 2able 7ode:
<TAG0E GORDER="'" GORDERCO0OR="B**JJTT" CE00#ADDIN:="'" CE00.#ACIN:="'" 8IDTH="L(M"" <TR" <TD"Co -mn 6</TD" <TD"Co -mn '</TD" </TR" </TAG0E" @o- can 3in+ a '6J sa3e co o, c)a,t )e,e! 8rowser 3iew:
Co -mn 6
Co -mn '
T)e HTM0 TAG0E tag is t)e opening tag -se+ to c,eate a tab e 2it)in a 2eb page! @o- can speci3% %o-, HTM0 TAG0E 2i+t) as a set n-mbe, 1a -e o, -se a pe,centage! Set HTML Table Width in Pixels <TAG0E GORDER="'" CE00#ADDIN:="'" CE00.#ACIN:="'" 8IDTH="'(("" <TR" <TD"Co -mn 6</TD"
<TD"Co -mn '</TD" </TR" </TAG0E" 8rowser 3iew:
.olumn 1
.olumn =
Set HTML Table Width as a Percentage <TAG0E GORDER="'" CE00#ADDIN:="'" CE00.#ACIN:="'" 8IDTH="L(M"" <TR" <TD"Co -mn 6</TD" <TD"Co -mn '</TD" </TR" </TAG0E" 8rowser 3iew:
.olumn 1
.olumn =
Set HTML Table Column Width in Pixels <TAG0E GORDER="'" CE00#ADDIN:="'" CE00.#ACIN:="'" 8IDTH="*(("" <TR" <TD 8IDTH="6((""Co -mn 6</TD" <TD 8IDTH="'((""Co -mn '</TD" </TR" </TAG0E" 8rowser 3iew:
.olumn 1
.olumn =
Set HTML Table Column Widths as a Percentage In a++ition5 %o- can set t)e 2i+t)s o3 %o-, TAG0E co -mns to +isp a% %o-, co -mns at a speci3ic 2i+t)! In t)e 3o o2ing examp e5 t)e co -mn 2i+t)s a,e set to L(M!
<TAG0E GORDER="'" CE00#ADDIN:="'" CE00.#ACIN:="'" 8IDTH="6((M"" <TR" <TD 8IDTH="L(M""Co -mn 6</TD" <TD 8IDTH="L(M""Co -mn '</TD" </TR" </TAG0E"
8rowser 3iew:
.olumn 1
.olumn =
In t)e 3o o2ing examp e5 t)e 3i,st co -mn 2i+t) is set to 'LM an+ t)e secon+ co -mn is set to <LM!
<TAG0E GORDER="'" CE00#ADDIN:="'" CE00.#ACIN:="'" 8IDTH="6((M"" <TR" <TD 8IDTH="'LM""Co -mn 6</TD" <TD 8IDTH="<LM""Co -mn '</TD" </TR" </TAG0E" 8rowser 3iew:
.olumn 1
.olumn =
HTML +G,.?5L ,KK,.T+

@o- can c,eate a stationa,% HTM0 2eb page bac4g,o-n+ 2it)in %o-, 2eb page! .tationa,% bac4g,o-n+ images ,emain in one p ace e1en 2)en sc,o ing t),o-g) t)e page! On % t)e text 2i mo1e! To c,eate t)is e33ect5 p ace t)e 3o o2ing co+e 2it)in %o-, <GOD@" tag!
<bo+% bac4g,o-n+ ="%o-,image!gi3" bgp,ope,ties="3ixe+"" 8)en se ecting %o-, bac4g,o-n+ image5 4eep in min+ t)at %o-, text 2i be mo1ing o1e, %o-, image5 so t,% to se ect an image t)at 2on9t ma4e %o-, text +i33ic- t to ,ea+! To p,e1ent %o-, bac4g,o-n+ image 3,om ti ing ;,epeating=5 p ace t)e 3o o2ing co+e bet2een %o-, <HEAD" an+ </HEAD" tags!
<.T@0E T@#E="text/css""
<>-GOD@ Q bac4g,o-n+-image? -, ;youri$age+. g= S GOD@ Q bac4g,o-n+-,epeat? no-,epeat S GOD@ Q bac4g,o-n+-position? cente, S --" </.T@0E" Rep ace t)e text in+icate+ in ,e+ 2it) %o-, image 3i e!
@o- can -se an image to c,eate a 1e,tica o, )o,i&onta ine 2it)in an HTM0 2eb page! C,eate a ' pixe b% ' pixe image in t)e co o, o3 %o-, c)oice! T)is sing e image can be -se+ to c,eate a 1e,tica o, )o,i&onta ine on %o-, 2eb page simp % b% c)anging t)e HEI:HT an+ 8IDTH att,ib-tes! Exa$ le 7ode:
<IM: .RC="%o-,image!gi3" 8IDTH="6((" HEI:HT="K" GORDER="("" 8rowser 3iew:
Exa$ le 7ode: <IM: .RC="%o-,image!gi3" 8IDTH="'((" HEI:HT="'" GORDER="("" 8rowser 3iew:
8)en c,eating a 1e,tica ine5 %o-9 nee+ to set -p a tab e! Exa$ le 7ode: <TAG0E CE00#ADDIN:="'" 8IDTH="'(("" <TR" <TD" <IM: .RC="%o-,image!gi3" 8IDTH="'" HEI:HT="6((""
</TD" <TD"T)is po,tion o3 t)e tab e can be -se+ to +isp a% %o-, text! Ma4e s-,e t)at %o- set a speci3ic tab e 2i+t) so t)at %o-, text 2i 2,ap an+ +isp a% besi+e %o-, ine image! </TD" </TR" </TAG0E" 8rowser 3iew: T)is po,tion o3 t)e tab e can be -se+ to +isp a% %o-, text! Ma4e s-,e t)at %oset a speci3ic tab e 2i+t) so t)at %o-, text 2i 2,ap an+ +isp a% besi+e %o-, ine image!
T)e HTM0 MARU$EE tag is -se+ to sc,o text 1e,tica % o, )o,i&onta % 2it)in a 2eb page! @o- can c)ange t)e ma,E-ee bac4g,o-n+ co o,5 2i+t)5 t)e n-mbe, o3 times %o-, message 2i sc,o 5 an+ t)e spee+ t)at %o-, text sc,o s5 b% a++ing t)e 3o o2ing att,ib-tes 2it)in %o-, MARU$EE tag! 847:0:;="(777777" - bac4g,o-n+ co o, 0::= - Dete,mines )o2 man% times t)e text 2i sc,o ! -6 is in+e3inite an+ 2i contin-o-s % sc,o ! @o- can set t)is to 2)ate1e, %o-9+ i4e! -7;:00A6:F!2 - Dete,mines t)e spee+ %o-, text 2i sc,o ! WI92/ - Dete,mines t)e 2i+t) o3 %o-, ma,E-ee! /EI4/2 - Dete,mines t)e )eig)t o3 %o-, ma,E-ee! 9ire"tion - Dete,mines t)e +i,ection in 2)ic) t)e text s)o- + sc,o - -p o, +o2n!
Horizontal Scrolling Text Marquee

<ma,E-ee bgco o,="Bcccccc" oop="-6" sc,o amo-nt="'" 2i+t)="6((M""Ho,i&onta % .c,o ing Ma,E-ee</ma,E-ee"
<
Horizontal Scrolling Text Marquee Browser View Bouncing Text Marquee <
<ma,E-ee be)a1io,="a te,nate" sc,o amo-nt="'" bgco o,="Bcccccc" 2i+t)="6((M""<a ),e3=")ttp?//222!%o-,+omain!com""T)is is an examp e o3 bo-ncing text</a"!</ma,E-ee"
Bouncing Text Marquee Browser View

P
Vertically Scrolling Marquee

<di!( <marEuee bgcolor0%;2222C2% onMouse*!er0%this.scroll5mount02% onMouse*ut0%this.scroll5mount0=% scrollamount0%=% direction0%up% loop0%true% width0%:23%( <center( <font color0%;ffffff% si7e0%91%(+.6*LL?"I T,LT<'font(<p( <font color0%;ff2222% si7e0%91%(FGN56/<'font(<p( <font color0%;ffffff% si7e0%91%(?+ *", N5D<'font(<p( <font color0%;ffffff% si7e0%91%(T* M5O, D*F6<'font(<p( <font color0%;ffffff% si7e0%91%(+?T,<'font(<p( <font color0%;ff2222% si7e0%91%(+T5"/ *FT<'font(<p( <font color0%;ffffff% si7e0%91%(K6*M TH, 6,+T!<'font( <'center( <'marEuee( <'di!(
Vertically Scrolling Marquee Browser View
Vertically Scrolling Marquee

<di!( <marEuee onMouse*!er0%this.scroll5mount02% onMouse*ut0%this.scroll5mount0=%bgcolor0%;ffffff% scrollamount0%=% direction0%down% loop0%true% width0%:23% height0%122%( <center( <font si7e0%91%(<strong(Te-t scrolling down<'strong(<'font(<p( <a href0%http&''www.web source.net%(+ample link<'a(
<'center( <'marEuee( <'di!(
Vertically Scrolling Marquee Browser View
T)is HTM0 ma,E-ee is comp ete % c-stomi&ab e! C)ange t)e att,ib-tes to c,eate t)e sc,o ing text e33ect %o- +esi,e!
T)e HTM0 0I.T ITEM tag is -se+ to c,eate b- ets to +isp a% %o-, ist text! @o- can c)ange t)e st% e o3 %o-, 2eb page b- ets b% a++ing att,ib-tes to %o-, <0I" tag o, %o-, HTM0 0ist tag! /260 8ullet 7ode:
<Men-" <0I t%pe="+isc""0ist item 6 <0I t%pe="ci,c e""0ist item ' <0I t%pe="sE-a,e""0ist item * </Men-" @o-, ist 2o- + be +isp a%e+ i4e t)is? o 0ist item 6 0ist item ' 0ist item *
To c,eate a b- ete+ ist 2it)in a ist5 %o-, co+e 2o- + oo4 somet)ing i4e t)is?
<$0 t%pe="sE-a,e"" <0I"@o-, text goes <$0 t%pe="ci,c e"" <0I"@o-, text goes <0I"@o-, text goes <0I"@o-, text goes </$0" <0I"@o-, text goes <0I"@o-, text goes </$0"
)e,e )e,e )e,e )e,e )e,e )e,e
@o-, ist 2o- + be +isp a%e+ i4e t)is? @o-, text goes )e,e o @o-, text goes )e,e o @o-, text goes )e,e o @o-, text goes )e,e @o-, text goes )e,e @o-, text goes )e,e
.pice -p %o-, 2eb pages 2it) some c-stomi&e+ HTM0 0ist b- ets! It 2i gi1e %o-, 2eb site a mo,e p,o3essiona appea,ance!
T)e HTM0 IMA:E tag is -se+ to +isp a% images 2it)in %o-, 2eb page! @o- can ,esi&e %o-, images5 g,ap)ics o, p)otos 2it)in %o-, HTM0 2eb pages b% c)anging t)e HEI:HT an+ 8IDTH 1a -es! To ,etain %o-, images o,igina c)a,acte,istics5 ma4e s-,e %o- a+F-st t)e )eig)t an+ t)e 2i+t) eE-a % 2it)in %o-, HTM0! In ot)e, 2o,+s5 i3 %o-, o,igina g,ap)ic +imensions a,e L(x6(( ;2i+t) L( an+ )eig)t 6((=5 to ,e+-ce %o-, image to one )a 3 t)e si&e5 %o- 2o- + c)ange t)e 2i+t) to 'L an+ t)e )eig)t to L(! Note? @o-, image s)o- + be in P#: o, P#E: 3o,mat! Images 3o,matte+ in :IF +o not ,esi&e 2e 5 as t)ei, co o,s )a1e been ,e+-ce+! O,igina Image?
<IM: .RC="%o-,image!gi3" 8IDTH="GB" HEI:HT="134""
Resi&e+ Image?
<IM: .RC="%o-,image!gi3" 8IDTH="HB" HEI:HT="114"" Resi&ing %o-, 2eb page image 2it)in %o-, HTM0 co+e s)o- + on % be -se+ 3o, sma c)anges! 0a,ge image 3i es 2i ,emain a,ge e1en i3 %o- ,esi&e it 2it)in %o-, HTM0!
@o- can c,eate g o2ing )%pe, in4s 2it)in %o-, 2eb page! T)is specia e33ect 2i ma4e %o-, in4s appea, to be g o2ing! # ace t)e 3o o2ing co+e 2it)in %o-, HTM0 2)e,e %o- 2o- + i4e %o-, in4 to appea,!
: o2ing Text 0in4 Examp e

<.#AN .T@0E="position?,e ati1eC 2i+t)?'((C )eig)t?'LC 3i te,?g o2;co o,=B*ATDFA5st,engt)='="" <A ),e3=")ttp?//222!+omain!com"": o2ing Text 0in4 Examp e</A"</.#AN"
C)ange t)e text in+icate+ in ",e+" 3o, c-stomi&ation! C,eating g o2ing 2eb page in4s 2it)in %o-, sa es 2eb pages is a g,eat 2a% to +,a2 attention to %o-, in4s b% )ig) ig)ting t)em! Ho2e1e,5 -se t)is HTM0 co+e ca,e3- %5 as %o- +on9t 2ant to con3-se %o-, 1isito,s!
F,ames can eit)e, comp iment a 2eb site o, ma4e it oo4 -np,o3essiona ! I3 %o- m-st -se 3,ames5 -se t)em spa,ing %! I3 not -se+ p,ope, %5 3,ames can ma4e %o-, content 1e,% +i33ic- t to 1ie2! A1oi+ ma4ing %o-, 1isito,s )a1e to sc,o 3,om si+e to si+e to 1ie2 %o-, content! T)is can be 1e,% i,,itating an+ ca-se %o-, 1isito,s to ea1e an+ ne1e, ,et-,n! Consi+e, -sing sma bo,+e, ess 3,ames at t)e top o, bottom o3 %o-, page t)at b en+ in 2it) t)e ,est o3 %o-, 2eb site! In a++ition5 t,% to on % -se a co-p e o3 3,amesets! A 2eb site +i1i+e+ -p into se1e,a 3,ames not on % oo4s ba+5 b-t is a so 1e,% +i33ic- t to 1ie2 an+ na1igate! In a++ition5 2eb sites -sing 3,ames a,e 1e,% +i33ic- t 3o, t)e .ea,c) Engines to in+ex! I3 %o- m-st -se 3,ames5 o33e, %o-, 1isito,s a c)oice -- F,ames 1e,ses no 3,ames!
@o- can -se sc,ipts 2it)in %o-, pages to spice t)em -p! Ho2e1e,5 a t)o-g) %o- 2i p,obab % be tempte+ to -se a t)e 3anc% tec)niE-es to c,eate specia e33ects5 t,% not to go o1e,boa,+! 8it) eac) sc,ipt o, e33ect %o- a++ to %o-, 2eb page5 it 2i ta4e t)at m-c) onge, 3o, %o-, page to oa+! .e ect %o-, sc,ipts ca,e3- %! Most b,o2se,s no2 s-ppo,t Pa1a.c,ipt5 so -sing t)is t%pe o3 sc,ipt 2i p,obab % be %o-, best c)oice! Heep in min+5 Pa1a.c,ipt an+ Pa1a a,e t2o tota % +i33e,ent ang-ages an+ a,e not in an% 2a% connecte+! I3 %o- m-st -se Pa1a on %o-, site5 -se it spa,ing %! Pa1a can be s o2 an+ )as a ten+enc% to c,as) b,o2se,s! It can a so a++ a ot o3 time to %o-, 2eb page9s oa+ time!
Scripts to Avoid When Designing a Pro essional Site #op -p boxes as4ing 3o, %o-, 1isito,9s name Disab ing t)e b,o2se,s bac4 b-tton Contin-o-s a e,t messages .c,o ing messages in t)e stat-s ba, 0a,ge sc,o ing text Fanc% c-,so,s C-,so, t,ai e,s A-tomatic t,ans3e,s on mo-seo1e,s Mo-seo1e, so-n+s T)is ist ,ep,esents on % a sma po,tion o3 t)e t%pes o3 sc,ipts %o- s)o- + a1oi+! T)ese sc,ipts a,e not on % 1e,% i,,itating5 b-t t)e%9,e a big 2aste o3 %o-, 1isito,s9 time! I3 %o- 2ant %o-, 1isito,s to ,et-,n5 -se sc,ipts t)at 2i comp iment %o-, 2eb site!
I3 %o- 2o- + i4e to enab e %o-, 1isito,s to c ic4 a b-tton to na1igate t)ei, )isto,%5 p ace t)e 3o o2ing co+es 2it)in t)e HTM0 o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e b-ttons to appea,!
8a"k <FORM" <IN#$T t%pe="b-tton" 1a -e="8a"k" onc ic4=")isto,%!bac4;=C"" </FORM" 5orward <FORM" <IN#$T t%pe="b-tton" 1a -e="5orward" onc ic4=")isto,%!3o,2a,+;=C"" </FORM" C)ange t)e text in+icate+ in ,e+ to 2)ate1e, %o-9+ i4e!
Heep in min+5 t)e 3o,2a,+ b-tton 2i on % na1igate to a page %o- )a1e p,e1io-s % 1isite+! G% -sing bac4 an+ 3o,2a,+ )isto,% b-ttons 2it)in %o-, 2eb page5 %o- 2i be a++ing a++itiona 2eb page na1igation 3o, %o-, 1isito,s!
@o- can c,eate a mo-seo1e, a e,t box 2it)in a 2eb page t)at 2i 2)en %o-, 1isito, mo1es t)ei, mo-se o1e, a speci3ie+ in4! Examp e A e,t Gox
oa+ an a e,t box
To 1ie2 t)is examp e5 p ace %o-, mo-se o1e, t)e abo1e in45 b-t +o not c ic4 on it! I3 %o- 2o- + i4e an a e,t box to appea, 2)en %o-, 1isito,s p ace t)ei, mo-se o1e, a in45 p ace t)e co+e be o2 2it)in %o-, HTM0 2)e,e %o- 2o- + i4e t)e in4 to appea,! <a ),e3="" onMo-seO1e,="a e,t;9,our 6essage9=C,et-,n t,-eC""0ink text</a" C)ange t)e text 2)e,e in+icate+ in ,e+ to 2)ate1e, %o-9+ i4e! T)e ",our 6essage" text in+icates t)e text t)at 2i be +isp a%e+ in %o-, a e,t box! T)e "0ink text" text in+icates t)e text t)at 2i be +isp a%e+ 2it) %o-, in4! A t)o-g) %o- can -se t)e abo1e co+e to oa+ a mo-seo1e, a e,t box5 -se it ca,e3- %5 as %o- +on9t 2ant to i,,itate %o-, 1isito,s!
I3 %o- 2o- + i4e to +isp a% t)e ast mo+i3ie+ +ate on %o-, 2eb page5 p ace t)e 3o o2ing co+e 2it)in t)e HTM0 o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e +ate to appea,! Examp e? 2his age was last $odi&ied on: %B11B12%11 %3:3%:3%
0ast 6odi&ied /260 7ode:
<sc,ipt ang-age="Pa1asc,ipt"" +oc-ment!2,ite;"2his age was last $odi&ied on? " R +oc-ment! astMo+i3ie+ R""=C </.CRI#T" C)ange t)e text in+icate+ in ,e+ to 2)ate1e, %o-9+ i4e! I3 %o- 2o- + i4e to -se t)is Pa1a.c,ipt co+e to +isp a% %o-, 2eb page9s ast mo+i3ie+ +ate5 it is p,obab % best to p ace t)e co+e to2a,+ t)e bottom o3 %o-, 2eb page!
I3 %o- 2o- + i4e an a e,t box to +isp a% 2)en %o-, page oa+s5 p ace t)e 3o o2ing co+e 2it)in t)e HTM0 o3 %o-, 2eb page bet2een %o-, <HEAD" an+ </HEAD" tags!
<sc,ipt ang-age="Pa1asc,ipt"" <>-a e,t ;"Alert 6essage"= //--" </sc,ipt" C)ange t)e text in+icate+ in ,e+ to t)e message %o- 2o- + i4e to +isp a%! A t)o-g) %o- can -se t)e abo1e HTM0 co+e to +isp a% an a e,t box 2)en %o-, 2eb page oa+s5 p ease -se it ca-tio-s %5 as %o- +on9t 2ant to i,,itate %o-, 1isito,s!
I3 %o- a,e oo4ing 3o, a 2a% to c,eate a p,int 2eb page b-tton 3o, %o-, 2eb site5 t)is tip is 3o, %o-! @o- can enab e %o-, 1isito,s to p,int o-t %o-, 2eb page -sing Pa1a.c,ipt! # ace t)e 3o o2ing Pa1a.c,ipt co+e 2it)in %o-, HTM0 co+e 2)e,e %o- 2o- + i4e t)e b-tton to appea,?
<.CRI#T 0AN:$A:E="Pa1a.c,ipt"" <>-- Gegin i3 ;2in+o2!p,int= Q +oc-ment!2,ite;9<3o,m"9 R 9<inp-t t%pe="b-tton" name="p,int" 1a -e="=rint 2his =age" 9 R 9onC ic4="Fa1asc,ipt?2in+o2!p,int;=""</3o,m"9=C S // En+ --" </.CRI#T" C)ange t)e text in+icate+ in ,e+ to t)e text t)at s)o- + appea, on %o-, p,int 2eb page b-tton! I3 %o- p-b is) content5 s-c) as a,tic es on %o-, 2eb site5 t)is p,int page b-tton 2i p,o1i+e a g,eat 2a% to enab e %o-, 1isito,s to p,int %o-, content!
.++
@o- can c,eate specia mo-seo1e, in4 e33ects -sing C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! # ace t)e 3o o2ing co+e bet2een t)e <HEAD" an+ </HEAD" tags 2it)in %o-, HTM0 co+e? <.T@0E" <>-A?acti1e Q co o,?B((((FFC text-+eco,ationC S A?)o1e, Q co o,?BFF((((C text-+eco,ation? noneC S //--" </.T@0E" In t)is examp e5 t)e acti1e text in4 is -n+e, ine+ 2it) t)e co o, set to B((((FF! T)is 2i be t)e in4 co o, a3te, a in4 is c ic4e+ on! T)e )o1e, co o, is set to BFF((((! 8)en t)e mo-se is p ace+ o1e, t)e in45 t)e text co o, 2i c)ange an+ t)e -n+e, ine +isappea,s! I3 %o- 2o- + i4e to +isp a% %o-, in4 in a co o, ot)e, t)an t)e +e3a- t5 p ace t)e 3o o2ing co+e 2it)in %o-, <GOD@" tag! I3 %o- t,% to c)ange t)e in4 co o, -sing <FONT" tags5 %o-, <.T@0E" tags 2i not 3-nction p,ope, %! <GOD@ in4="B((((FF""
E+it t)e co o, co+e to s-it %o-, nee+s! T)is is F-st one sma examp e o3 )o2 %o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! Fo, a++itiona in3o,mation on C..5 1isit t)e 7-2utorial section!
T)e FONT tag is -se+ to +isp a% %o-, text in a speci3ic st% e! $sing 3onts 2it)in a tab e ,eE-i,es %o- to a++ t)e FONT tag to eac) in+i1i+-a ce ! T)is tec)niE-e 2i ca-se %o-, page to be a,ge, t)an necessa,%! G% -sing Casca+ing .t% e .)eets5 %o- can not on % sa1e %o-,se 3 a ot o3 time5 b-t 4eep %o-, page si&e +o2n! # ace t)e 3o o2ing co+e bet2een t)e <HEAD" an+ </HEAD" tags o3 %o-, HTM0 page! <.T@0E T@#E="text/css"" <>-TDQ3ont-3ami %? /e,+anaC 3ont-si&e? 6'ptCS --" </.T@0E" G% -sing t)is st% e s)eet5 a t)e text +isp a%e+ in %o-, tab e 2i be +isp a%e+ in %o-, speci3ie+ 3ont an+ si&e! T)is is F-st one sma examp e o3 )o2 %o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! Fo, a++itiona in3o,mation on C..5 1isit t)e 7-2utorial section!
I3 %o- 2o- + i4e to c)ange t)e co o,s o3 %o-, 2eb page9s sc,o ba,s5 a++ t)e 3o o2ing co+e bet2een %o-, <HEAD" an+ </HEAD" tags!
<.T@0E t%pe="text/css""
<>-bo+% Q sc,o ba,-3ace-co o,? B*6<GTCC sc,o ba,-t,ac4-co o,? BV<GKCTC sc,o ba,-a,,o2-co o,? BLKA6CKC sc,o ba,-*+ ig)t-co o,? BGVD<EJC sc,o ba,-s)a+o2-co o,? B6EJ6V(C sc,o ba,-)ig) ig)t-co o,? B<CGCDAC sc,o ba,-+a,4s)a+o2-co o,? B6EJ6V(S //--" </.T@0E" C)ange t)e text in+icate+ in ,e+ to %o-, p,e3e,,e+ co o,s! I3 %o- 2o- + i4e to c)ange t)e co o,s o3 %o-, 3o,m sc,o ba,s5 a++ t)e 3o o2ing co+e to %o-, TEITAREA co+e! @o- can a so c)ange t)e text co o, on %o-, "s-bmit" an+ ",eset" b-ttons as 2e !
<FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <TEITAREA 2,ap="1i,t-a " name="comments" ,o2s=J co s='( -2,0E="s"rollbar? &a"e?"olor: (31H8G7) s"rollbar?tra"k?"olor: (IH847G) s"rollbar?arrow?"olor: (D4A174) s"rollbar?3dlight?"olor: (8I9HEB) s"rollbar?shadow?"olor: (1EB1I%) s"rollbar?highlight?"olor: (H7879A) s"rollbar?darkshadow?"olor: (1EB1I%""T)is examp e +isp a%s t)e sc,o ba,s in an a te,nati1e co o,! @o- can c)ange t)ese co o,s to 2)ate1e, %o-9+ i4e simp % be c)anging t)e )exi+ecima co o, co+es in+icate+ in ,e+!</TEITAREA" <IN#$T t%pe=".-bmit" /A0$E=".-bmit" -2,0E=""olor: (1EB1I%"" <IN#$T t%pe="Reset" /A0$E="Reset" -2,0E=""olor: (1EB1I%"" </FORM" 8rowser 3iew:
+FJM?T
6,+,T
Heep in min+5 i3 %o- c)ange t)e co o,s o3 %o-, sc,o ba,s5 ma4e s-,e %o-, se ecte+ co o,s matc) %o-, 2ebsite9s co o, sc)eme! T)is is F-st one sma examp e o3 )o2 %o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! Fo, a++itiona in3o,mation on C..5 1isit t)e 7-2utorial section!
I3 %o- 2o- + i4e to c)ange t)e co o,s o3 %o-, 2eb page9s sc,o ba,s5 a++ t)e 3o o2ing co+e bet2een %o-, <HEAD" an+ </HEAD" tags!
<.T@0E t%pe="text/css"" <>-bo+% Q sc,o ba,-3ace-co o,? B*6<GTCC sc,o ba,-t,ac4-co o,? BV<GKCTC sc,o ba,-a,,o2-co o,? BLKA6CKC sc,o ba,-*+ ig)t-co o,? BGVD<EJC sc,o ba,-s)a+o2-co o,? B6EJ6V(C sc,o ba,-)ig) ig)t-co o,? B<CGCDAC sc,o ba,-+a,4s)a+o2-co o,? B6EJ6V(S //--" </.T@0E" C)ange t)e text in+icate+ in ,e+ to %o-, p,e3e,,e+ co o,s! I3 %o- 2o- + i4e to c)ange t)e co o,s o3 %o-, 3o,m sc,o ba,s5 a++ t)e 3o o2ing co+e to %o-, TEITAREA co+e! @o- can a so c)ange t)e text co o, on %o-, "s-bmit" an+ ",eset" b-ttons as 2e !
<FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <TEITAREA 2,ap="1i,t-a " name="comments" ,o2s=J co s='( -2,0E="s"rollbar? &a"e?"olor: (31H8G7) s"rollbar?tra"k?"olor: (IH847G) s"rollbar?arrow?"olor: (D4A174) s"rollbar?3dlight?"olor: (8I9HEB) s"rollbar?shadow?"olor: (1EB1I%) s"rollbar?highlight?"olor: (H7879A) s"rollbar?darkshadow?"olor: (1EB1I%""T)is examp e +isp a%s t)e sc,o ba,s in an a te,nati1e co o,! @o- can c)ange t)ese co o,s to 2)ate1e, %o-9+ i4e simp % be c)anging t)e )exi+ecima co o, co+es in+icate+ in ,e+!</TEITAREA" <IN#$T t%pe=".-bmit" /A0$E=".-bmit" -2,0E=""olor: (1EB1I%"" <IN#$T t%pe="Reset" /A0$E="Reset" -2,0E=""olor: (1EB1I%"" </FORM" 8rowser 3iew:
+FJM?T
Heep in min+5 i3 %o- c)ange t)e co o,s o3 %o-, sc,o ba,s5 ma4e s-,e %o-, se ecte+ co o,s matc) %o-, 2ebsite9s co o, sc)eme! T)is is F-st one sma examp e o3 )o2 %o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! Fo, a++itiona in3o,mation on C..5 1isit t)e 7-2utorial section!
@o- can comp ete % c-stomi&e t)e oo4 o3 %o-, 3o,ms simp % b% -sing C.. ;Casca+ing .t% e .)eets= .T@0E tags! T)e 3o o2ing examp e +isp a%s a 3o,m 2it) co o,e+ sc,o ba,s5 b-ttons an+ text! Cop% an+ paste t)e 3o o2ing co+e into %o-, HTM0 an+ c-stomi&e 2)e,e in+icate+ in ,e+!
<FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <TEITAREA 2,ap="1i,t-a " name="comments" ,o2s=J co s='( -2,0E="s"rollbar? &a"e?"olor: (31H8G7) s"rollbar?tra"k?"olor: (IH847G) s"rollbar?arrow?"olor: (D4A174) s"rollbar?3dlight?"olor: (8I9HEB) s"rollbar?shadow?"olor: (1EB1I%) s"rollbar?highlight?"olor: (H7879A) s"rollbar?darkshadow?"olor: (1EB1I%""T)is examp e +isp a%s t)e sc,o ba,s in an a te,nati1e co o,! @o- can c)ange t)ese co o,s to 2)ate1e, %o-9+ i4e simp % be c)anging t)e )exa+ecima co o, co+es in+icate+ in ,e+!</TEITAREA" <IN#$T t%pe=".-bmit" /A0$E=".-bmit" -2,0E=""olor:(555555) ba"kground: (31H8G7) &ont?weight: bold"" </FORM" 8rowser 3iew:
T)e 3o o2ing examp e +isp a%s a 3o,m 2it) co o,e+ sc,o ba,s an+ text! T)e text is +isp a%e+ in a speci3ic 3ont an+ t)e 3ace o3 t)e b-tton +isp a%s an image bac4g,o-n+! Cop% an+ paste t)e 3o o2ing co+e into %o-, HTM0 an+ c-stomi&e 2)e,e in+icate+ in ,e+! <FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <TEITAREA 2,ap="1i,t-a " name="comments" ,o2s=J co s='( -2,0E="s"rollbar? &a"e?"olor: (31H8G7) s"rollbar?tra"k?"olor: (IH847G) s"rollbar?arrow?"olor: (D4A174) s"rollbar?3dlight?"olor: (8I9HEB) s"rollbar?shadow?"olor: (1EB1I%) s"rollbar?highlight?"olor: (H7879A) s"rollbar?darkshadow?"olor: (1EB1I%""T)is examp e +isp a%s t)e sc,o ba,s in an a te,nati1e co o,! @o- can c)ange t)ese co o,s to 2)ate1e, %o-9+ i4e simp % be c)anging t)e )exa+ecima co o, co+es in+icate+ in ,e+!</TEITAREA" <IN#$T t%pe=".-bmit" /A0$E=".-bmit" -2,0E=""olor: (555555) ba"kground: urlJyouri$age+gi&K) &ont?&a$ily: 3erdanaE /el#eti"a) &ont?weight: bold"" </FORM" 8rowser 3iew:
T)e 3o o2ing examp e +isp a%s a 3o,m 2it) a co o,e+ bac4g,o-n+5 sc,o ba,s an+ text! T)e text is +isp a%e+ in a speci3ic 3ont an+ t)e 3ace o3 t)e b-tton +isp a%s an image bac4g,o-n+! Cop% an+ paste t)e 3o o2ing co+e into %o-, HTM0 an+ c-stomi&e 2)e,e in+icate+ in ,e+! <FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <TEITAREA 2,ap="1i,t-a " name="comments" ,o2s=J co s='( -2,0E="ba"kground:(EAEIEI) s"rollbar?&a"e?"olor: (31H8G7) s"rollbar? tra"k?"olor: (IH847G) s"rollbar?arrow?"olor: (D4A174) s"rollbar?3dlight? "olor: (8I9HEB) s"rollbar?shadow?"olor: (1EB1I%) s"rollbar?highlight? "olor: (H7879A) s"rollbar?darkshadow?"olor: (1EB1I%""T)is examp e +isp a%s t)e sc,o ba,s in an a te,nati1e co o,! @o- can c)ange t)ese co o,s to 2)ate1e, %o-9+ i4e simp % be c)anging t)e )exa+ecima co o, co+es in+icate+ in ,e+!</TEITAREA" <IN#$T t%pe=".-bmit" /A0$E=".-bmit" -2,0E=""olor: (555555) ba"kground: urlJyouri$age+gi&K) &ont?&a$ily: 3erdanaE /el#eti"a) &ont?weight: bold"" </FORM" 8rowser 3iew:
Heep in min+5 i3 %o- c)ange t)e co o,s o3 %o-, sc,o ba,s an+ b-ttons5 ma4e s-,e %o-, se ecte+ co o,s matc) %o-, 2ebsite9s co o, sc)eme! In a++ition5 a 2a%s ma4e s-,e %o-, text is c ea, % 1isib e t),o-g) %o-, bac4g,o-n+ co o,s! T)is is F-st one sma examp e o3 )o2 %o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! Fo, a++itiona in3o,mation on C..5 1isit t)e 7-2utorial section!
@o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags to )ig) ig)t 2eb page in4s 2)en %o- p ace %o-, mo-se o1e, t)e in4! I3 %o- 2o- + i4e to )ig) ig)t t)e bac4g,o-n+ o3 %o-, in4s 2)en %o-, mo-se is p ace+ o1e, it5 p ace t)e 3o o2ing co+e bet2een %o-, <HEAD" an+ </HEAD" tags!
<.T@0E T@#E="text/css"" <>-a?)o1e,Qbac4g,o-n+-co o,?(H58853CS --"
</.T@0E" E+it t)e co o, co+e5 in+icate+ in bo +5 to s-it %o-, nee+s! T)is is F-st one sma examp e o3 )o2 %o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! Fo, a++itiona in3o,mation on C..5 1isit t)e 7-2utorial section!
@o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags to +isp a% a non-ti ing bac4g,o-n+ image 2it)in %o-, 2eb page! I3 %o- 2o- + i4e to +isp a% a bac4g,o-n+ image on %o-, 2eb page5 b-t +on9t 2ant it to ti e ;,epeat=5 p ace t)e 3o o2ing co+e bet2een %o-, <HEAD" an+ </HEAD" tags! T)is co+e 2i p,e1ent %o-, image 3,om ti ing an+ 2i cente, it 2it)in %o-, page!
<.T@0E T@#E="text/css"" <>-GOD@ Q bac4g,o-n+-image? -, ;youri$age+. g= S GOD@ Q bac4g,o-n+-,epeat? no-,epeat S GOD@ Q bac4g,o-n+-position? cente, S --" </.T@0E" Cop% an+ paste t)e abo1e co+e into %o-, HTM0 bet2een %o-, <HEAD" an+ </HEAD" tags! T)e text in ,e+ s)o- + ea+ to t)e image on %o-, 2eb se,1e,! =lease note: T)e image m-st ,esi+e on %o-, 2eb se,1e,! I3 %o-, image is in a +i33e,ent +i,ecto,% t)an %o-, 2eb page5 %o- m-st a so inc -+e t)e +i,ecto,% name in 3,ont o3 %o-, image name! Examp e? i$ages1youri$age+. g T)is is F-st one sma examp e o3 )o2 %o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! Fo, a++itiona in3o,mation on C..5 1isit t)e 7-2utorial section!
@o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags to c,eate a +,op capita e33ect 2it)in %o-, 2eb page!
I3 %o- 2o- + i4e to +isp a% t)e 3i,st ette, o3 %o-, pa,ag,ap)s 2it) a +,op caps e33ect5 p ace t)e 3o o2ing co+e 2it)in %o-, HTM0 bet2een %o-, <HEAD" an+ </HEAD" tags!
<st% e" !dro "a ?3i,st- ette,Q 3 oat? e3tC co o,?bla"kC 3ont-si&e?2D%<C S </st% e" C)ange t)e text in+icate+ in ,e+ to %o-, p,e3e,ences! T)e "dro "a " text speci3ies t)e name o3 t)e co+e! @o- can name it 2)ate1e, %o-9+ i4e! Ho2e1e,5 %o- m-st -se t)e same name 2it)in %o-, "p c ass" co+e be o25 as 2e ! # ace t)e 3o o2ing co+e be3o,e %o-, pa,ag,ap)!
"lass="dro "a "A8e come
T)is is F-st one sma examp e o3 )o2 %o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags 2it)in %o-, 2eb page! Fo, a++itiona in3o,mation on C..5 1isit t)e 7-2utorial section!
HTML K*6M+
T)e HTM0 O#TION tag is -se+ to c,eate options iste+ in a +,op +o2n box o3 a 2eb page 3o,m! @o- can se ect a +e3a- t option b% a++ing t)e 2o,+ "se ecte+" 2it)in %o-, O#TION tag!
<.E0ECT" <O#TION"option 6 <O#TION -E0E72E9"option ' <O#TION"option *
<O#TION"option K <O#TION"option L <O#TION"option J </.E0ECT" G,o2se, /ie2?
C,eating a +e3a- t option 2it)in %o-, +,op +o2n box is a g,eat 2a% to +isp a% an option t)at is most- i4e % to be se ecte+! Ho2e1e,5 i3 %o-, 1isito, p,e3e,s anot)e, option5 t)e% can easi % se ect anot)e, option!
@o- can -se C.. ;Casca+ing .t% e .)eets= .t% e Tags to a++ a co o, bac4g,o-n+ to %o-, 3o,m inp-t boxes! T)e IN#$T tag is -se+ to c,eate inp-t 3ie +s 2it)in a 2eb page 3o,m! @o- can c)ange t)e 3ont5 inp-t text co o,5 inp-t text si&e an+ t)e bac4g,o-n+ co o, o3 %o-, IN#$T box b% -sing t)e .T@0E att,ib-te!
<FORM" <IN#$T t%pe="text" .T@0E="co o,? BFFFFFFC 3ont-3ami %? /e,+anaC 3ont-2eig)t? bo +C 3ont-si&e? 6'pxC bac4g,o-n+-co o,? B<'AKD'C" si&e="6(" max engt)="*("" </FORM" 8rowser 3iew: C ic4 insi+e t)is text box an+ t%pe to see an examp e o3 t)e text co o,!
$sing C.. ;Casca+ing .t% e .)eets= .t% e Tags to a++ a bit o3 co o, to %o-, 2eb page 3o,m inp-t box is a g,eat 2a% to en)ance %o-, 3o,m9s appea,ance! $se it 2ise %!
@o- can c-stomi&e t)e si&e o3 %o-, HTM0 3o,m inp-t boxes! T)e IN#$T tag is -se+ to c,eate inp-t 3ie +s 2it)in a 2eb page 3o,m! @o- can speci3% t)e si&e o3 %o-, IN#$T box b% a++ing t)e .IWE att,ib-te an+ a++ing a speci3ic 1a -e! T)e 1a -e %o- speci3% 2it)in %o-, .IWE att,ib-te 2i +ete,mine t)e 2i+t) o3 %o-, inp-t box 2it)in %o-, 2eb page 3o,m!
<IN#$T t%pe="text" -ILE="1%"" G% c-stomi&ing t)e si&e o3 %o-, 2eb page 3o,m inp-t box5 %o- can speci3% t)e si&e o3 %o-, inp-t boxes an+ +isp a% %o-, 3o,m 2it)in a 2eb page tab e at a speci3ic si&e! T)is 2i enab e %o-, 3o,m to )a1e a -ni3o,m appea,ance an+ 3it 2it)in t)e space %o+esi,e!
@o- can speci3% a maxim-m amo-nt o3 text t)at s)o- + be t%pe+ 2it)in a 3o,m inp-t box! T)e IN#$T tag is -se+ to c,eate inp-t 3ie +s 2it)in a 2eb page 3o,m! @o- can speci3% t)e amo-nt o3 text t)at ma% be t%pe+ into an inp-t box b% inc -+ing t)e MAI0EN:TH att,ib-te 2it)in %o-, HTM0 3o,m co+e! Ho2e1e,5 2)en speci3%ing t)e MAI0EN:TH 1a -e5 ma4e s-,e %o- p,o1i+e %o-, 1isito,s 2it) eno-g) space to t%pe in t)e necessa,% in3o,mation! In t)e 3o o2ing HTM0 3o,m examp e5 t)e MAI0EN:TH 1a -e speci3ies t)at %o-, 1isito,s ma% t%pe in K( c)a,acte,s 2it)in t)is pa,tic- a, inp-t box! <IN#$T t%pe="text" .IWE="6(" 6A>0E!42/="4%"" G% -sing t)e max engt) att,ib-te 2it)in %o-, 2eb page 3o,ms5 %o- can speci3% exact % )o2 m-c) text %o- 2ant 2it)in %o-, 3o,m! $se it to %o-, a+1antage!
@o- can +isp a% +e3a- t text 2it)in %o-, 2eb page 3o,m inp-t box! T)e IN#$T tag is -se+ to c,eate inp-t 3ie +s 2it)in a 2eb page 3o,m! 8)en -sing HTM0 3o,ms 2it)in a 2eb page5 man% times %o- ma% nee+ to +isp a%
some 9+e3a- t text9 2it)in %o-, 3o,m to s)o2 %o-, 1isito,s 2)at t)e% s)o- + t%pe in t)e 3o,m 3ie +! T)is can be accomp is)e+ b% a++ing t)e /A0$E att,ib-te to %o-, inp-t 3o,m!
<IN#$T t%pe="text" .IWE="6(" MAI0EN:TH="*(" 3A0FE=",our 2ext"" Disp a%ing +e3a- t text 2it)in %o-, 2eb page 3o,m p,o1i+es a g,eat 2a% to ens-,e %o-, 1isito,s 2i p,o1i+e t)e ,ig)t in3o,mation 2it)in %o-, inp-t box!
T)e IN#$T tag is -se+ to c,eate inp-t 3ie +s 2it)in a 2eb page 3o,m! @o- can c,eate a ,a+io o, c)ec4box se ection ist b% a++ing att,ib-tes to %o-, IN#$T tag!
<IN#$T ty e="radio" name="%o-,Nse ection" 1a -e="Option 6""Option 6 <IN#$T ty e="radio" name="%o-,Nse ection" 1a -e="Option '""Option ' <IN#$T ty e="radio" name="%o-,Nse ection" 1a -e="Option *""Option * G,o2se, /ie2?
*ption 1 *ption = *ption :

<IN#$T ty e=""he"kbox" name="se ection"".e ection 6 <IN#$T ty e=""he"kbox" name="se ection"".e ection ' <IN#$T ty e=""he"kbox" name="se ection"".e ection * G,o2se, /ie2?
+election 1 +election = +election :

@o- can se ect a +e3a- t 1a -e b% a++ing t)e 2o,+ "c)ec4e+" 2it)in %o-, IN#$T tag! <IN#$T t%pe=",a+io" name="option" "he"ked"Option 6 <IN#$T t%pe="c)ec4box" name="se ection" "he"ked".e ection 6 G,o2se, /ie2?
Option 6 .e ection 6
@o- can p,e3o,mat %o-, 2eb page 3o,ms so t)at t)e% 2i +isp a% p,ope, % 2it)in %o-, 2eb page! T)e FORM tag is -se+ to set -p inp-t 3o,ms on %o-, 2eb site! To p,ope, % a ign %o-, 3o,ms5 instea+ o3 -sing a tab e5 -se t)e <#RE" tag 3o, t)e same ,es- ts! @o-, 3o,m 2i be +isp a%e+ exact % as %o- 3o,mat it 2it)in %o-, HTM0! G% p,e3o,matting %o-, 3o,ms5 not on % 2i it sa1e %o- some time5 b-t it 2i a so c-t +o2n on %o-, HTM0 co+e an+ spee+ -p %o-, 2ebsite9s oa+ time!
<FORM" <#RE" Name? <inp-t t%pe="text"" Emai ? <imp-t t%pe="text"" </#RE" </FORM" A t)o-g) t)e <#RE" tag is g,eat 3o, p,e3o,matting %o-, 3o,ms5 %o- can a so -se it 2it) %o-, text an+ ot)e, HTM0 co+es!
Instea+ o3 -sing t)e stan+a,+ 3o,m s-bmit b-tton5 %o- can -se an image! # ace t)e 3o o2ing co+e 2it)in %o-, FORM co+e!
<FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <IN#$T t%pe="text"" <IN#$T ty e=i$age na$e="sub$it" sr"="youri$age+gi&" bo,+e,="("" </FORM" 8rowser 3iew: T)is examp e +isp a%s a text box 2it) an image s-bmit b-tton! Notice t)e -ne1en a ignment!
In t)e next examp e5 t)is same text box an+ image 2i be +isp a%e+ 2it)in a tab e 2it) t)e bac4g,o-n+ co o, set to t)e same co o, as t)e image bac4g,o-n+! <FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <TAG0E GORDER="(" CE00.#ACIN:="(" CE00#ADDIN:="'"" <TR" <TD G:CO0OR="BVKJ*FF"" <IN#$T t%pe="text" si&e="6(" max engt)="*("" </TD" <TD G:CO0OR="BVKJ*FF" /A0I:N="Mi++ e"" <IN#$T ty e=i$age na$e="sear"h" -;7="youri$age+gi&" bo,+e,="("" </TD" </TR" </TAG0E" </FORM"
8)en -sing an image to ,ep ace t)e stan+a,+ s-bmission b-tton5 ma4e s-,e %oinc -+e5 "GORDER=(5" as t)e Netscape b,o2se, 2i s)o2 a bo,+e,!
@o- can +isp a% +e3a- t text 2it)in %o-, text inp-t boxes t)at magica % +isappea,s 2)en %o- c ic4 insi+e t)e box! C ic4 insi+e t)e text box be o2 to 1ie2 t)is examp e!
Cop% an+ paste t)e 3o o2ing co+e into %o-, inp-t text co+e!
<IN#$T t%pe="text" name="-, " 1a -e=")ttp?//222!%o-,+omain!com" si&e="*(" on&o"us="#alue=MM"" C)ange t)e text 2)e,e in+icate+ in ,e+ to t)e default text %o- 2o- + i4e to be +isp a%e+! G% +isp a%ing +e3a- t text 2it)in %o-, HTM0 2eb page 3o,m5 %o- can ens-,e t)at %o-, 1isito,s 2i p,o1i+e co,,ect % 3o,matte+ text 2it)in %o-, 3o,m9s inp-t box!
@o- can set -p %o-, HTM0 2eb page 3o,ms so t)at 2)en %o-, 2eb page oa+s %o-, 1isito,9s c-,so, 2i be 3 as)ing 2it)in %o-, 3o,m! # ace t)e 3o o2ing co+e 2itin %o-, <GOD@" tag! T)is co+e te s t)e b,o2se, to p ace t)e c-,so, 2it)in t)e "c-stome," 3o,m in t)e "emai " text box!
<bo+% on0oa+="3oc-s;=C"usto$er!e$ail!3oc-s;="" T)e "c-stome," text in+icate+ in ,e+5 ,ep,esents t)e name o3 %o-, 3o,m! T)e name att,ib-te s)o- + be a++e+ to %o-, 3o,m i4e t)is?
<3o,m name=""usto$er"" @o- can c)ange t)e name to 2)ate1e, %o-9+ i4e! Ho2e1e,5 ma4e s-,e %o- a so c)ange it 2it)in %o-, <GOD@" tag as 2e 5 as t)e% m-st be t)e same! T)e "emai " text in+icate+ in ,e+5 ,ep,esents t)e name o3 %o-, 3o,m e ement! T)e <inp-t" att,ib-te s)o- + be 2,itten i4e t)is?
<inp-t t%pe="text" name="e$ail"" @o- can c)ange t)e "emai " name to 2)ate1e, %o-9+ i4e! Ho2e1e,5 ma4e s-,e %oa so c)ange it 2it)in %o-, <GOD@" tag as 2e 5 as t)e% m-st be t)e same! G% +isp a%ing a 3 as)ing c-,so, 2it)in %o-, HTM0 2eb page 3o,m5 %o-, 1isito,s attention 2i instant % be +i,ecte+ to %o-, 3o,m!
@o- can enab e %o-, 1isito,s to tab t),o-g) %o-, 3o,m 3ie +s! To 1ie2 t)is examp e5 p ace %o-, c-,so, insi+e t)e Name text box an+ p,ess %o-, tab 4e% on %o-, 4e%boa,+! @o- can tab t),o-g) eac) text box!
Name? A++,ess? Emai ? $R0?
<FORM METHOD=post ACTION="/cgi-bin/examp e!cgi"" <IN#$T t%pe="text" name="name" si&e="'(" max engt)="*(" tabindex="1"" <IN#$T t%pe="text" name="a++,ess" si&e="'(" max engt)="*(" tabindex="2"" <IN#$T t%pe="text" name="emai " si&e="'(" max engt)="*(" tabindex="3"" <IN#$T t%pe="text" name="-, " si&e="'(" max engt)="*(" tabindex="4"" <IN#$T t%pe=".-bmit" /A0$E=".-bmit"" </FORM" T)e "tabin+ex" 1a -e +ete,mines t)e o,+e, in 2)ic) %o- 2i tab t),o-g) t)e text boxes! I3 %o- 2o- + i4e t)e tab o,+e, to s4ip a ce,tain a,ea5 s-c) as c)ec4 boxes an+ ,a+io b-ttons5 simp % -se a negati1e 1a -e beginning 2it) "-6" t)en "-'" an+ so on! Eac) negati1e 1a -e 2i be b%passe+ 2)en tabbing t),o-g) %o-, 3o,m! G% -sing t)is HTM0 co+e5 %o- 2i ma4e na1igating t),o-g) %o-, HTM0 2eb page 3o,ms m-c) easie, on %o-, 1isito,s!
HTML L?+T+
@o- can -se g,ap)ic b- ets to ,ep ace t)e stan+a,+ text b- ets b% -sing t)e "De3inition 0ist" tag!
Exa$ le 7ode:
<D0" <DD"<IM: <DD"<IM: <DD"<IM: <DD"<IM:
.RC="%o-,image!gi3""0ist .RC="%o-,image!gi3""0ist .RC="%o-,image!gi3""0ist .RC="%o-,image!gi3""0ist
Item Item Item Item
one</DD" t2o</DD" t),ee</DD" 3o-,</DD"
</D0" 8rowser 3iew: 0ist 0ist 0ist 0ist Item Item Item Item one t2o t),ee 3o-,
E+it t)e %o-,image!gi3 text to s-it %o-, nee+s! T)is text s)o- + ea+ to a g,ap)ic image t)at ,esi+es on %o-, 2eb se,1e,! G% -sing t)e +e3inition ist tag 2it)in %o-, HTM0 co+e5 %o- can gi1e %o-, 2eb page 3o,ms t)e c-stom oo4 %o- +esi,e!
@o- can c-stomi&e %o-, HTM0 2eb page 3o,m b- ete+ ists! T)e ORDERED 0I.T tag is -se+ to c,eate a n-mbe,e+ ist to +isp a% %o-, ist text! @o- can c-stomi&e %o-, ist st% es b% a++ing t%pe="D" to %o-, ist tag!
/260 7ode: <O0" <0I"0ist <0I"0ist <0I"0ist <0I"0ist </O0" item item item item 6 ' * K
8rowser 3iew:
1. List item 1 =. List item = :. List item : 8. List item 8
To +isp a% %o-, ist 2it) ette,s ;a5b5c5+= instea+ o3 n-mbe,s ;65'5*5K= a++ <t%pe="a"" to t)e <O0" tag!
/260 7ode: <O0 t%pe="a"" <0I"0ist item 6 <0I"0ist item ' <0I"0ist item * <0I"0ist item K </O0"
8rowser 3iew:
a. List item 1 b. List item = c. List item : d. List item 8
To +isp a% %o-, ist 2it) Roman n-me,a s5 a++ <t%pe="i"" to t)e <O0" tag!
/260 7ode: <O0 t%pe="i"" <0I"0ist item 6 <0I"0ist item ' <0I"0ist item * <0I"0ist item K </O0"
8rowser 3iew:
i. ii. iii. i!.
List item 1 List item = List item : List item 8
@o- can c,eate non-in+ente+5 c-stomi&e+ b- ets simp % b% -sing some specia c)a,acte, co+es! I3 %o-9+ ,at)e, not )a1e %o-, b- ets in+ente+ an+ 2o- + i4e to c-stomi&e t)ei, st% e5 %o- can -se an% o3 t)e 3o o2ing co+es? 8rowser 3iew: X Examp e text X Examp e text X Examp e text /260 7ode: AB6KTC Examp e text AB6KTC Examp e text AB6KTC Examp e text
8rowser 3iew: Y Examp e text Y Examp e text Y Examp e text /260 7ode: AB6JKC Examp e text AB6JKC Examp e text AB6JKC Examp e text
8rowser 3iew:
Z Examp e text Z Examp e text Z Examp e text /260 7ode: AB6<6C Examp e text AB6<6C Examp e text AB6<6C Examp e text
8rowser 3iew: [ Examp e text [ Examp e text [ Examp e text /260 7ode: AB6V*C Examp e text AB6V*C Examp e text AB6V*C Examp e text
8rowser 3iew: \ Examp e text \ Examp e text \ Examp e text /260 7ode: AB'6LC Examp e text AB'6LC Examp e text AB'6LC Examp e text Cop% an+ paste %o-, se ecte+ co+e into %o-, HTM0 2)e,e %o- 2o- + i4e %o-, b- ets an+ text to appea,!
N,J G5I, T?G+

I3 %o-9+ i4e %o-, 2eb page to +isp a% 2it)o-t ma,gins5 %o- can set5 ,emo1e o, a+F-st t)em b% p acing t)e 3o o2ing att,ib-tes 2it)in %o-, <bo+%" tag! To ,emo1e t)e top5 bottom an+ si+e page ma,gins on a 2eb page5 p ace t)e 3o o2ing co+e 2it)in %o-, <bo+%" tag?
<bo+% bgco o,="B333333" to $argin=% botto$$argin=% le&t$argin=% right$argin=% $arginheight=% $arginwidth=%" T)is co+e is compatib e 2it) bot) Inte,net Exp o,e, an+ Netscape Na1igato,! Internet Ex lorer su topma,gin=( bottomma,gin=( e3tma,gin=( ,ig)tma,gin=( !ets"a e !a#igator su ma,gin)eig)t=( ma,gin2i+t)=( Ma4e s-,e %o- -se t)em a to enab e %o-, 2eb page to be p,ope, % 1ie2e+ in bot) b,o2se,s! G% speci3%ing %o-, 2eb page ma,gins5 %o- can ens-,e t)at %o-, 2eb page 2i +isp a% exact % as %o- )a+ inten+e+! orts: orts:
@o- can speci3% t)e bac4g,o-n+ co o, o3 an HTM0 2eb page! T)e GOD@ tag 3o o2s t)e HEAD tag 2it)in an HTM0 +oc-ment! T)e contents o3 %o-, 2eb page is +isp a%e+ bet2een t)e GOD@ tags! T)is inc -+es e1e,%t)ing +isp a%e+ 2)en 1ie2e+ t),o-g) a 2eb b,o2se,! @o- can speci3% t)e bac4g,o-n+ co o, o3 an HTM0 2eb page b% a++ing t)e G:CO0OR att,ib-te to %o-, HTM0 GOD@ tag! .peci3%ing t)e bac4g,o-n+ co o, o3 an HTM0 2eb page isn9t necessa,% i3 %o- simp % 2ant t)e bac4g,o-n+ co o, 2)ite5 as t)is is t)e +e3a- t setting! Ho2e1e,5 i3 %o- 2o- + i4e to +isp a% t)e bac4g,o-n+ co o, in an% ot)e, co o,5 %om-st inc -+e t)e G:CO0OR att,ib-te! 8a"kground and 2ext 7olors:
<bo+% 847:0:;="(555555""
E+it t)e co o, co+e in+icate+ in ,e+ to s-it %o-, nee+s! A t)o-g) %o- can speci3% t)e bac4g,o-n+ co o, o3 an HTM0 2eb page5 it is a 2a%s best to +isp a% b ac4 text on a 2)ite bac4g,o-n+!
@o- can speci3% t)e in4 co o,s 2it)in an HTM0 2eb page! T)e GOD@ tag 3o o2s t)e HEAD tag 2it)in an HTM0 2eb page +oc-ment! T)e contents o3 %o-, 2eb page is +isp a%e+ bet2een t)e GOD@ tags! T)is inc -+es e1e,%t)ing +isp a%e+ 2)en 1ie2e+ t),o-g) a 2eb b,o2se,! @o- can speci3% t)e in4 co o,s 2it)in an HTM0 2eb page b% a++ing t)e 0INH5 A0INH5 an+ /0INH att,ib-tes to %o-, HTM0 GOD@ tag! Ho2e1e,5 inc -+ing t)ese att,ib-tes 2it)in %o-, HTM0 GOD@ tag is on % necessa,% i3 %o- 2o- + i4e to +isp a% %o-, in4 co o,s in an% co o, ot)e, t)an t)e +e3a- t! # ease 4eep in min+5 c)anging t)e HTM0 in4 co o,s is not ,ecommen+e+5 as t)e +e3a- t HTM0 in4 co o,s is 2)at %o-, 1isito,s a,e -se+ to! Cop% an+ paste t)e HTM0 in4 att,ib-tes into t)e GOD@ tag o3 %o-, HTM0 co+e!
<bo+% 0ink="(%%%%7%" A0I!N="(%%%%55" 30I!N="(55%%%%""
0I!N - 0in4e+ text A0I!N - Acti1e in4 30I!N - /isite+ in4 E+it t)e co o, co+es in+icate+ in ,e+ to s-it %o-, nee+s! A t)o-g) %o- can speci3% t)e in4 co o,s 2it)in an HTM0 2eb page5 it is a 2a%s best to ea1e t)e in4 co o,s at t)ei, +e3a- t setting5 as t)is is 2)at %o-, 1isito,s a,e -se+ to! C)anging t)e co o,s ma% con3-se t)em!
@o- can speci3% t)e in4 co o,s 2it)in an HTM0 2eb page! T)e GOD@ tag 3o o2s t)e HEAD tag 2it)in an HTM0 2eb page +oc-ment! T)e contents o3 %o-, 2eb page is +isp a%e+ bet2een t)e GOD@ tags! T)is inc -+es e1e,%t)ing +isp a%e+ 2)en 1ie2e+ t),o-g) a 2eb b,o2se,! @o- can speci3% t)e in4 co o,s 2it)in an HTM0 2eb page b% a++ing t)e 0INH5 A0INH5 an+ /0INH att,ib-tes to %o-, HTM0 GOD@ tag! Ho2e1e,5 inc -+ing t)ese att,ib-tes 2it)in %o-, HTM0 GOD@ tag is on % necessa,% i3 %o- 2o- + i4e to +isp a% %o-, in4 co o,s in an% co o, ot)e, t)an t)e +e3a- t! # ease 4eep in min+5 c)anging t)e HTM0 in4 co o,s is not ,ecommen+e+5 as t)e +e3a- t HTM0 in4 co o,s is 2)at %o-, 1isito,s a,e -se+ to! Cop% an+ paste t)e HTM0 in4 att,ib-tes into t)e GOD@ tag o3 %o-, HTM0 co+e!
<bo+% 0ink="(%%%%7%" A0I!N="(%%%%55" 30I!N="(55%%%%""
0I!N - 0in4e+ text A0I!N - Acti1e in4 30I!N - /isite+ in4 E+it t)e co o, co+es in+icate+ in ,e+ to s-it %o-, nee+s! A t)o-g) %o- can speci3% t)e in4 co o,s 2it)in an HTM0 2eb page5 it is a 2a%s best to ea1e t)e in4 co o,s at t)ei, +e3a- t setting5 as t)is is 2)at %o-, 1isito,s a,e -se+ to! C)anging t)e co o,s ma% con3-se t)em!
@o- can +isp a% an image bac4go-n+ 2it)in an HTM0 2eb page! T)e GOD@ tag 3o o2s t)e HEAD tag 2it)in an HTM0 2eb page +oc-ment! T)e contents o3 %o-, 2eb page is +isp a%e+ bet2een t)e GOD@ tags! T)is inc -+es e1e,%t)ing +isp a%e+ 2)en 1ie2e+ t),o-g) a 2eb b,o2se,! @o- can +isp a% an image bac4g,o-n+ 2it)in an HTM0 2eb page b% a++ing t)e GACH:RO$ND att,ib-te to %o-, HTM0 GOD@ tag!
Ho2e1e,5 p ease ens-,e %o- se ect %o-, image 1e,% ca,e3- % an+ ens-,e %o-, text can be easi % 1ie2e+! Ho2e1e,5 p ease 4eep in min+5 t)e best bac4g,o-n+ co o, 3o, a p,o3essiona 2eb page is a 2a%s 2)ite! Cop% an+ paste t)e HTM0 GACH:RO$ND att,ib-te into t)e GOD@ tag o3 %o-, HTM0 co+e!
<bo+% 8A7N4;:F!9="youri$age+gi&"" E+it t)e text in+icate+ in ,e+ to t)e image %o- 2o- + i4e to +isp a% as %o-, 2eb page bac4g,o-n+! A t)o-g) %o- can +isp a% an image bac4g,o-n+ 2it)in %o-, HTM0 2eb page5 it is a 2a%s best to +isp a% b ac4 text on a 2)ite bac4g,o-n+!
@o- can o,gani&e %o-, HTM0 2eb page co+e 2it) t)e comment tag! T)e COMMENT tag is -se+ to +isp a% text 2it)in %o-, HTM0 +oc-ment t)at 2i not be 1isib e on %o-, 2eb page! T)e% enab e %o- to ma,4 t)e beginning an+ en+ o3 sections in %o-, HTM0 co+e 3o, eas% e+iting!
<>--Gegin Na1igation--" @o-, na1igation in4s <>--En+ Na1igation--" $sing comment tags t),o-g) %o-, 2eb page HTM0 co+e p,o1i+es a g,eat 2a% to o,gani&e %o-, content an+ enab e %o- to easi % ocate speci3ic a,eas 2it)in %o-, 2eb page! Fo, examp e5 2)en +esigning a 2eb page5 %o- most i4e % 2i -se HTM0 tab es to o,gani&e %o-, content an+ +isp a% %o-, na1igationa men-s! I3 %o- p ace a comment tag at t)e beginning o3 %o-, content section an+ %o-, na1igationa section5 %o- 2i 4no2 exact % 2)e,e %o-, HTM0 co+e 3o, eac) section begins an+ en+s! T)is a one can sa1e %o- a ot o3 time5 as %o- 2on9t nee+ to sea,c) t),o-g) a o3 %o-, HTM0 co+e to 3in+ t)e section %o- nee+!
@o- can a++ a-+io ;so-n+= to %o-, 2eb page t)at 2i be compatib e 2it) bot) Inte,net Exp o,e, an+ Netscape Na1igato,! A++ t)e 3o o2ing co+e to t)e HTM0 o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e cont,o pane to +isp a%!
<EMGED s,c="your&ile+$id" a-tosta,t="t,-e" oop="3a se" )i++en="3a se"" <noembe+" <bgso-n+ s,c="your&ile+$id" oop="6"" </noembe+" C)ange t)e text in+icate+ in ,e+ to %o-, so-n+ 3i e! T)e "autostart" +ete,mines 2)et)e, o, not t)e m-sic 2i p a% 2)en t)e page oa+s! "T,-e" speci3ies t)at t)e m-sic 2i sta,t on oa+ an+ "Fa se" speci3ies t)at m-sic 2i not sta,t on oa+! T)e "loo " +ete,mines )o2 t)e m-sic s)o- + be p a%e+! "Fa se" speci3ies t)at t)e m-sic s)o- + not oop an+ 2i p a% it t),o-g) one time! "T,-e" speci3ies t)at t)e m-sic s)o- + oop an+ p a% contin-o-s %! It is )ig) % ,ecommen+e+ t)at %o- ea1e t)is set on 3a se! T)e "hidden" speci3ies 2)et)e, o, not t)e m-sic9s cont,o pane s)o- + be +isp a%e+! "T,-e" speci3ies t)at t)e cont,o pane s)o- + be )i++en! "Fa se" speci3ies t)at t)e cont,o pane s)o- + be +isp a%e+! It is )ig) % ,ecommen+e+ t)at %o- ea1e t)is set on 3a se! T)is 2i enab e %o-, 1isito,s to stop t)e m-sic i3 t)e% p,e3e,!
I3 %o-9,e -sing 8in+o2s TLR an+ )a1e a mic,op)one an+ spea4e,s5 %o- can c,eate %o-, o2n a-+io 3i es to p ace on %o-, 2eb page! In 8in+o2s I#R5 c ic4 on "-tart" an+ go to "All =rogra$s" - "A""essories" "Entertain$ent" - "-ound ;e"order+" In 8in+o2s /ista5 c ic4 on t)e ,o-n+ 8in+o2s ogo b-tton on t)e bottom e3t )an+ si+e o3 %o-, +es4top an+ go to "All =rogra$s" - "A""essories" - "-ound ;e"order+" @o- can ,eco,+ %o-, o2n !2a1 3i es to be p ace+ 2it)in %o-, 2eb page 3o, %o-, 1isito,s to )ea,! Once %o-91e c,eate+ %o-, so-n+ 3i e an+ -p oa+e+ it to %o-, se,1e,5 p ace t)e 3o o2ing co+e 2it)in %o-, 2eb page 2)e,e %o- 2o- + i4e t)e cont,o pane to
appea,! T)is co+e is compatib e 2it) bot) Inte,net Exp o,e, an+ Netscape Na1igato,!
<EMGED s,c="your&ile+wa#" a-tosta,t="3a se" oop="3a se" )i++en="3a se"" <noembe+" <bgso-n+ s,c="your&ile+wa#" oop="6"" </noembe+" C)ange t)e text in+icate+ in ,e+ to %o-, so-n+ 3i e! T)e "autostart" +ete,mines 2)et)e, o, not t)e so-n+ 2i p a% 2)en t)e page oa+s! "T,-e" speci3ies t)at t)e so-n+ 2i sta,t on oa+ an+ "Fa se" speci3ies t)at t)e so-n+ 2i not sta,t on oa+! T)e "loo " +ete,mines )o2 t)e so-n+ s)o- + be p a%e+! "Fa se" speci3ies t)at t)e so-n+ s)o- + not oop an+ 2i p a% it t),o-g) one time! "T,-e" speci3ies t)at t)e so-n+ s)o- + oop an+ p a% contin-o-s %! It is )ig) % ,ecommen+e+ t)at %o- ea1e t)is set on 3a se! T)e "hidden" speci3ies 2)et)e, o, not t)e m-sic9s cont,o pane s)o- + be +isp a%e+! "T,-e" speci3ies t)at t)e cont,o pane s)o- + be )i++en! "Fa se" speci3ies t)at t)e cont,o pane s)o- + be +isp a%e+! It is )ig) % ,ecommen+e+ t)at %o- ea1e t)is set on 3a se! T)is 2i enab e %o-, 1isito,s to stop t)e so-n+ i3 t)e% p,e3e,!
I3 %o-9,e oo4ing 3o, a 2a% to +ec,ease o, spee+ -p a 2eb page oa+ time5 t)ese tips a,e 3o, %o-! T)e main page o3 %o-, 2eb site s)o- + oa+ 2it)in V secon+s o, ess 2it) a LJH mo+em! Acco,+ing to t2o s-,1e%s5 con+-cte+ b% Fo,,este, Resea,c) an+ :a,tne, :,o-p5 ecomme,ce sites a,e osing ]6!6 to ]6!* bi ion in ,e1en-e eac) %ea, +-e to c-stome, c ic4-a2a% ca-se+ b% s o2 oa+ing sites! Tips 3o, 4eeping %o-, oa+ time +o2n?
Q A1oi+ a,ge5 s o2 oa+ing g,ap)ics Q A1oi+ -sing too man% g,ap)ics an+/o, banne,s Q A1oi+ -sing too man% animate+ g,ap)ics Q Optimi&e %o-, g,ap)ics Q A1oi+ -sing an% -nnecessa,% co+e Q A1oi+ ma4ing %o-, pages too a,ge Q A1oi+ -sing too m-c) Pa1a Q A1oi+ -sing too man% Pa1a.c,ipts
I3 a page ta4es too ong to oa+5 %o-, potentia c-stome, 2i not 2ait -- - timate % costing %o- b-siness!
.e ecting t)e best bac4g,o-n+ co o, an+ 3ont st% es 3o, a 2eb page is a 1e,% impo,tant pa,t o3 E-a it% 2eb site +esign! 8)en se ecting a bac4g,o-n+ co o, 3o, %o-, 2eb page5 ma4e s-,e %o- se ect a bac4g,o-n+ t)at 2i comp iment %o-, text an+ o1e,a +esign! Selecting the !est !ac"ground or a Web Site
Q G-s% bac4g,o-n+s ma4e text +i33ic- t to ,ea+ an+ +,a2 t)e attention a2a% 3,om t)e
text!
Q A 2a%s be consistent 2it) %o-, bac4g,o-n+ t)eme on eac) page o3 %o-, 2eb site! Q Co o,s a33ect %o-, moo+ an+ 2i )a1e an e33ect on %o-, 1isito,s as 2e ! G,ig)t
co o,s5 s-c) as %e o2 an+ o,ange5 2i ca-se %o- to become mo,e c)ee,3- o, )app%! 8)i e co o,s5 s-c) as b -e an+ p-,p e5 )a1e a ca ming e33ect! Da,4 co o,s s-c) as b,o2n an+ b ac4 ma% ca-se %o- to become +ep,esse+! A goo+ ,- e o3 t)-mb is to se ect co o,s base+ -pon t)e t%pe o3 a33ect %o-9,e t,%ing to ac)ie1e! Selecting the !est #ont St$le or a Web Page 8)en se ecting 3onts 3o, %o-, text5 4eep in min+5 ,ea+ing on a comp-te, sc,een is m-c) mo,e +i33ic- t t)an pape,! T,% to -se a t,-e t%pe 3ont5 s-c) as A,ia o, /e,+ana5 an+ a1oi+ 3anc% 3onts t)at a,e +i33ic- t to ,ea+! T)e appea,ance o3 %o-, 2eb site can mean t)e +i33e,ence bet2een %o-, s-ccess an+ 3ai -,e!
T)e main page o3 %o-, 2eb site s)o- + speci3ica % et %o-, 1isito,s 4no2 exact % 2)at %o-9,e o33e,ing! Ho2 man% times )a1e %o- 1isite+ a site an+ ne1e, 3ig-,e+ o-t exact % 2)at t)e% 2e,e se ingD I3 %o-, potentia c-stome, can9t 3in+ %o-, p,o+-ct o, se,1ice5 t)e% +e3inite % 2on9t 2aste a ot o3 time oo4ing 3o, it! T)e%9 go on to t)e next site an+ p,obab % ne1e, ,et-,n!
T)e%9,e 1isiting %o-, site 3o, a speci3ic p-,pose! T)e% 2ant somet)ing %o-, site o33e,s -- 2)et)e, it is in3o,mation5 a p,o+-ct o, se,1ice! @o-, site s)o- + p,o1i+e %o-, potentia c-stome,s 2it) ta,gete+ E-a it% p,o+-cts o, se,1ices t)at t)e% 2i be inte,este+ in! T)e mo,e ta,gete+ t)e bette,! T)e easie, %o- ma4e %o-, o,+e,ing p,ocess5 t)e mo,e sa es %o-9 ma4e! F,om t)e moment %o-, 1isito, ente,s %o-, 2eb site to comp eting an o,+e,5 eac) step 2i p a% an impo,tant ,o e!
I3 %o-9,e oo4ing 3o, a 2a% to p,otect %o-, 2eb page content5 inc -+ing text an+ g,ap)ics5 t)is tip is 3o, %o-! T)is Pa1a.c,ipt 2i +isco-,age t)e mo,e no1ice Inte,net -se,s 3,om cop%ing %o-, text an+ g,ap)ics! An a e,t box 2i appea, +isp a%ing %o-, cop%,ig)t in3o,mation 2)en t)e ,ig)t mo-se b-tton is c ic4e+! Heep in min+5 t)is sc,ipt 2i not p,otect %o-, content 3,om mo,e expe,ience+ -se,s an+ is 1e,% insec-,e!
HTM0 #,otecto,!
I3 %o- 2o- + i4e to p,otect %o-, ENTIRE 2eb site 3,om Inte,net t)ie1es5 enc,%pt emai a++,esses5 pass2o,+ p,otect 2eb pages5 )i+e #a%#a ,et-,n in4s5 b,ea4 o-t o3 3,ames A mo,e5 1isit
Ho2e1e,5 i3 %o- 2o- + i4e to -se t)e 3o o2ing Pa1a.c,ipt5 cop% an+ #aste t)e 3o o2ing co+e into t)e GOD@ o3 %o-, 2eb page! <.CRI#T ang-age="Pa1a.c,ipt"" <>-1a, message="Cop%,ig)t @ea, b% @o-, .ite! 8ARNIN: > A content containe+ 2it)in t)is site is p,otecte+ b% cop%,ig)t a2s! $na-t)o,i&e+ -se o3 o-, mate,ia is st,ict % p,o)ibite+!"C 3-nction c ic4;e= Q i3 ;+oc-ment!a = Q i3 ;e1ent!b-tton=='^^e1ent!b-tton==*= Q a e,t;message=C ,et-,n 3a seC
S S i3 ;+oc-ment! a%e,s= Q i3 ;e!2)ic) == *= Q a e,t;message=C ,et-,n 3a seC S S S i3 ;+oc-ment! a%e,s= Q +oc-ment!capt-,eE1ents;E1ent!MO$.EDO8N=C S +oc-ment!onmo-se+o2n=c ic4C // --" </.CRI#T" Inse,t %o-, o2n cop%,ig)t in3o,mation 2)e,e in+icate+ in ,e+!
I3 %o- 2o- + i4e to p,e oa+ an image so t)at it 2i +isp a% 2)en t)e page oa+s5 p ace t)e 3o o2ing co+e bet2een %o-, <HEAD" an+ </HEAD" tags!
<.CRI#T ang-age="Pa1a.c,ipt"" <>-1a, p,e oa+=ne2 Image;=C p,e oa+!s,c=";i$age+gi&="C --" </.CRI#T" C)ange t)e text in+icate+ in ,e+ to %o-, image! G% p,e oa+ing %o-, images5 %o- can inc,ease %o-, 2eb site9s oa+ time!
HTML H*6?R*"T5L 6FL,
T)e HORIWONTA0 R$0E tag is -se+ to +i1i+e s-bFects 2it)in a 2eb page! @o- can speci3% t)e )eig)t o3 an HTM0 )o,i&onta ,- e <HR" b% a++ing t)e .IWE att,ib-te to %o-, )o,i&onta ,- e HTM0 tag! In t)e 3o o2ing examp e5 t)e )o,i&onta ,- e is +isp a%e+ 2it) t)e )eig)t set to *?
Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e )o,i&onta ,- e to appea,? <HR -ILE="3"" E+it t)e text in+icate+ in bo + to s-it %o-, nee+s! In t)e next examp e5 t)e )o,i&onta ,- e is +isp a%e+ 2it) t)e )eig)t set to J! Notice )o2 t)e )eig)t inc,eases 2)en t)e .IWE 1a -e is inc,ease+?
Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e )o,i&onta ,- e to appea,? <HR -ILE="B"" E+it t)e text in+icate+ in bo + to s-it %o-, nee+s! C-stomi&ing %o-, )o,i&onta ,- e ine +i1i+e,s 2i enab e %o- to en)ance t)e appea,ance o3 %o-, 2eb site!
T)e HORIWONTA0 R$0E tag is -se+ to +i1i+e s-bFects 2it)in a 2eb page! @o- can speci3% t)e 2i+t) o3 an HTM0 )o,i&onta ,- e <HR" b% a++ing t)e 8IDTH att,ib-te to %o-, )o,i&onta ,- e HTM0 tag! T)e 2i+t) 1a -e ma% be speci3ie+ as a pe,centage o, in pixe s! In t)e 3o o2ing examp e5 t)e )o,i&onta ,- e is +isp a%e+ 2it) t)e 2i+t) set to L(M?
T)is examp e 2i +isp a% %o-, )o,i&onta ,- e ac,oss L(M o3 %o-, page 2i+t)5 o, i3 p ace+ 2it)in a tab e ce 5 L(M o3 t)e tab e ce ! Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e )o,i&onta ,- e to appea,? <HR WI92/="D%<"" E+it t)e text in+icate+ in bo + to s-it %o-, nee+s! In t)e next examp e5 t)e )o,i&onta ,- e is +isp a%e+ 2it) t)e 2i+t) set to '(( pixe s?
Cop% an+ paste t)e 3o o2ing co+e into t)e HTM0 po,tion o3 %o-, 2eb page 2)e,e %o- 2o- + i4e t)e )o,i&onta ,- e to appea,? <HR WI92/="2%%"" E+it t)e text in+icate+ in bo + to s-it %o-, nee+s!
N,J G5I, M,T5 T5I+

I3 %o- 2o- + i4e to p,e1ent 2eb b,o2se,s 3,om p acing a cop% o3 %o-, 2eb page 2it)in %o-, 1isito,9s cac)e 3i e5 t)is 2eb site +esign tip is 3o, %o-! Meta tags a,e -se+ to gi1e +etai e+ inst,-ctions in ,ega,+ to a 2eb page to t)e .ea,c) Engines an+ b,o2se,s! 8)en 1isiting a 2eb site5 a b,o2se, 2i cac)e o, ma4e a cop% o3 t)e 2eb page 3o, 3aste, 1ie2ing t)e next 1isit! T)is 2i p,e1ent %o-, ,eg- a, 1isito,s 3,om seeing %o-, ne2 content -n ess t)e% man-a % ,e oa+ t)ei, b,o2se,!
To p,e1ent t)is p,ob em5 a++ t)e 3o o2ing co+e bet2een t)e <HEAD" an+ </HEAD" tags o3 %o-, HTM0!
<META )ttp-eE-i1="#,agma" content="no-cac)e"" I3 %o- -p+ate %o-, 2eb page 2it) impo,tant in3o,mation on a ,eg- a, basis5 consi+e, -sing t)e no cac)e meta tag to ens-,e %o-, ,eg- a, 1isito,s 2i 1ie2 %o-, -p+ate+ 2eb page an+ not one 2it)in t)ei, cac)e 3i e!
I3 %o- 2o- + i4e to ,e+i,ect %o-, 1isito,s to a ne2 2eb page5 t)is co+e 2i enab e %o- to +o F-st t)at! Meta tags a,e -se+ to gi1e +etai e+ inst,-ctions in ,ega,+ to a 2eb page to t)e .ea,c) Engines an+ b,o2se,s! @o- can a-tomatica % ,e+i,ect %o-, 1isito,s to anot)e, 2eb page b% a++ing t)e 3o o2ing META tag bet2een t)e <HEAD" an+ </HEAD" tags o3 %o-, HTM0!
<META HTT#-EU$I/="Re3,es)" CONTENT="KC$R0=)ttp?//222!%o-,+omain!com/""
T)e CONTENT att,ib-te te s t)e b,o2se, to ,e+i,ect t)e 1isito, to t)e $R0 %o- speci3% in K secon+s! T)is can be c)ange+ to 2)ate1e, %o-9+ i4e! I3 %o- mo1e %o-, 2eb site to a ne2 ocation5 t)is tag p,o1i+es a g,eat 2a% to a-tomatica % ,e+i,ect %o-, 1isito,s!
I3 %o-9,e oo4ing 3o, a 2a% to p,e1ent .ea,c) Engines 3,om in+exing a 2eb page5 t)is 2eb +esign tip is 3o, %o-! Meta tags a,e -se+ to gi1e +etai e+ inst,-ctions in ,ega,+ to a 2eb page to t)e .ea,c) Engines an+ b,o2se,s! Man% times5 %o- ma% )a1e a 2eb page t)at %o- +on9t 2ant t)e .ea,c) Engines to in+ex! To )e p 2it) t)is p,ob em5 a++ one o3 t)e 3o o2ing co+es bet2een t)e <HEAD" an+ </HEAD" tags o3 %o-, HTM0!
<META NAME="ROGOT." CONTENT="NOINDEI5NOFO00O8"" T)is tag te s t)e ,obots not to in+ex t)is page an+ not to 3o o2 an% in4s 2it)in t)e page!
<META NAME="ROGOT." CONTENT="NOINDEI5FO00O8"" T)is tag te s t)e ,obots not to in+ex t)is page5 b-t 3o o2 an% in4s 2it)in t)e page!
I3 %o- 2o- + i4e to spice -p %o-, 2eb pages on ent,%5 se ect one o3 t)e 3o o2ing co+es an+ p ace it bet2een %o-, <HEAD" an+ </HEAD" tags!
<META )ttp-eE-i1="#age-Ente," CONTENT="Re1ea T,ans;D-,ation=K5T,ansition=6="" T)e 9uration +ete,mines t)e engt) o3 time t)e t,ansition 2i ast! T)e "K" in+icate+ in ,e+ sets t)e t,ansition time to K secon+s! T)is can be c)ange+ to 2)ate1e, %o-9+ i4e! Ho2e1e,5 t,% to 4eep t)e n-mbe, at L o, -n+e,! T)e 2ransition +ete,mines 2)ic) t,ansition 2i be +isp a%e+! T)e "6" in+icate+ in ,e+ 2i +isp a% t)e "Gox o-t" t,ansition! .e ect %o-, p,e3e,,e+ t,ansition 3,om t)e ist be o2 an+ ,ep ace t)e "6" in+icate+ in ,e+! 2ransition 0ist ( 6 ' * K L J Gox in Gox o-t Ci,c e in Ci,c e o-t 8ipe -p 8ipe +o2n 8ipe ,ig)t
< V T 6( 66 6' 6* 6K 6L 6J 6< 6V 6T '( '6 '' '*
8ipe e3t /e,tica b in+s Ho,i&onta b in+s C)ec4e,boa,+ ac,oss C)ec4e,boa,+ +o2n Ran+om +isso 1e .p it 1e,tica in .p it 1e,tica o-t .p it )o,i&onta in .p it )o,i&onta o-t .t,ips e3t +o2n .t,ips e3t -p .t,ips ,ig)t +o2n .t,ips ,ig)t -p Ran+om ba,s )o,i&onta Ran+om ba,s 1e,tica Ran+om
$sing meta tags to c,eate 2eb page t,ansitions is a g,eat 2a% to spice -p %o-, 2eb site!
.ascading +tyle +heets, better known as .++, enable you to control the style and layout of a web page. They will enable you to specify link styles, fonts, margins, tables, colors, si7es, alignments and much more throughout your entire web page. They can also be used to create a template like style sheet #stored within a separate file$ that can be used throughout your web site. Dou can simply link to your style sheet within each of your web pages and ha!e the ability to update the styles for your entire web site with Must one file.
The Benefits of sing !asca"ing Style Sheets #!SS$

.++ will sa!e you a great deal of time. Nhen it comes to the ?nternet, there are really only two elements& .ontent and the way that content is presented. Nith HTML, we pro!ide content, and define how that content will be presented within the HTML code. Howe!er, we are !ery limited as to what we can do with HTML. ,ach browser is different and they see things differently. This is why webmasters are
instructed from the !ery beginning to !iew their web pages in many different browsers, such as ?nternet ,-plorer, "etscape, Kirefo-, and *pera #among many others$, to make sure that their web pages appear as they intended and e-pected them to from one browser to another. *!erall, the HTML code on the web page polices the content, and the .++ polices the HTML. This allows you to create web pages that are suitable for all browsers. *ne of the best benefits of using .++ within your web pages is the ease of updating your web pages. ?f you'd like to make a change to your design, instead of ha!ing to change hundreds of web pages on your site, you can make one simple change to the .++ file, and it will automatically update all of the pages on your web site. .++ enables you to do in seconds what would take hours to do in HTML.
!reating !asca"ing Style Sheets #!SS$

Learning, creating, and working with .++ doesn't reEuire much. Dou do not need any type of editor, as .ascading +tyle +heets can be created using a plain te-t editor, such as "ote Gad. Howe!er, you will need a web browser. ?nternet ,-plorer and Kirefo- are the most popular ones, but there are many others. *nce you create your pages and are using .++, you must ensure that you !iew your web pages through multiple browsers to ensure they are displaying Must as you had intended. )isit 5ny Jrowser to !iew your pages through different browsers. Dou may also need a way to upload your pages to your web ser!er. This is typically done with an KTG client, and there are many nice free one's a!ailable. Dou may also upload your files through the control panel of your web hosting ser!ice.
%nternal an" &xternal !asca"ing Style Sheets #!SS$

.++ can be used in two ways. ?t can be used internally, which may be referred to as embedded or inline, or it can be used e-ternally, which is often referred to as a linked style sheet. ?deally, you will be using linked styled sheets when you finish this tutorial.
The only time you may be using embedded .++ is if you would like to change an indi!idual link or te-t, or ha!e a one or two page web site. ?f you will ha!e more than that, howe!er, a linked style sheet is definitely the way to go. .++ can be used in three different ways&
%nline !SS
5dded to your standard HTML tags.
&'be""e" !SS
5n embedded .++ is e-actly as it sounds. The .++ code is actually placed within the HTML web page between the <H,5/( and <'H,5/( tags.
Lin(e" !SS
5 linked style sheet, on the other hand, is a completely separate document that is linked to within a web page.
Prioritizing !SS an" HTML tags

Nhen using .++, certain tags take precedence o!er others. Here's how the tags are prioriti7ed&

HTML tags o!erride all other tags. .++ inline tags o!erride embedded and linked tags.
.++ embedded tags o!erride linked tags. .++ linked tags won't o!erride any other tags.
)or'atting !SS Tags

.++ tags are formatted like this& selector >propert&= ?al'e@A The selector is a browser command and is followed by a propert&. The propert& is a word describing the selector, which further instructs the browser. The ?al'e specifies the !alue of the property. 5lthough this may sound a little confusing, .++ is formatted much like standard HTML. Let's compare the two formats& HTML
< ont si1e0%,%( C33
body >&ont?siOe:1B x)P
5s you can see in the comparison diagram abo!e, the Element is eEui!alent to the Selector, the Attribute is eEui!alent to the Property and the Values are the same.
%nline !asca"ing Style Tags

?nline cascading style tags are used within standard HTML code using the STYLE parameter. The following e-ample will remo!e the underline of an indi!idual link& <5 H6,K0%http&''www.yourdomain.com% 3TBLE!4TECT-)ECD65T7DN= NDNE%(Dour Link<'5(
Browser View= Dour Link The STYLE parameter is added directly to your original HTML link code. ?nline style tags enable you to specify how each indi!idual link will look.
&'be""e" !asca"ing Style Sheets

,mbedded cascading style sheets #.++$ can perform the same tasks as the inline style tags. Howe!er, the coding is placed between the <H,5/( and <'H,5/( tags within your HTML. Dou can specify how your entire page will appear including links, fonts, te-t and more, simply by using embedded style tags. <a href0'http&''d1.open-.org'ck.phpS n0aAa4A2=:TampBcb0?"+,6TU65"/*MU"FMJ,6UH,6,' target0'Ublank'(<img src0'http&''d1.open-.org'a!w.phpS 7oneid0=2:A4CTampBcb0?"+,6TU65"/*MU"FMJ,6UH,6,TampBn0aAa4A2=:' border0'2' alt0'' '(<'a( The following e-ample will display your acti!e te-t links #after a link has been clicked on$ in a specific color. The ho!er color #when the mouse is placed o!er the link$ will be displayed in an alternate color and the underline will disappear. <+TDL,( <! 5&acti!e V color&;2222KKB te-t decorationB W 5&ho!er V color&;KK2222B te-t decoration& noneB W '' ( <'+TDL,( Browser View= ,-ample Link #Glace your mouse o!er the link to !iew this e-ample.$ The abo!e code will display all of your links in a specific style. "otice the code is placed within the comment tagsS .omment tags look like this& <! your te-t ( The comment tags are used to pre!ent older browsers that don't support style tags from
displaying the .++ codes within their page. The great thing about embedding style codes is that you can create your own classes of code. Nhat this means is that you can specify different styles throughout your page and then call them within your page. Kor e-ample, you can add a class of code to a paragraph selector like this& <+TDL,( <! p.padding Vpadding left& >p-B padding right& >p-B font family& 5rialB font si7e& 12p-BW '' ( <'+TDL,( "otice the te-t highlighted in #oldS This is a class name ? made up. Dou can call it whate!er you'd like. +imply add E&o'rtext following your selector. To put this style into action or call it, simply place the following code within your HTML where you would like the style to be used& <p class0%padding%(
Oeep in mind, the te-t you place after your .++ selector #E&o'rtext$ must be the same name as the code you place to call the style. Kor e-ample, if your class code looks like this& pEtext the code you use to call the style will look like this& <p class!4text4> +ee how that worksS
Lin(ing !SS
The linking .++ method in!ol!es creating a file that defines specific styles. This .++ file can be used throughout your entire web site to specify e!erything from body styles and
headings to paragraphs and HTML tables. This file might look something like this& J*/D Vfont family& 5rialB font si7e& 1=p-BW H1 Vfont family& IeorgiaB font si7e& 14p-B font weight& boldB color& blueW G V font weight& normalB color& blueW This file should be sa!ed as style.css and uploaded to your ser!er where you store your HTML files. Nhen using a style sheet, you must place a link to your style.css file within your HTML between your <H,5/( and <'H,5/( tags like this& <html( <head( <title(Dour Gage Title<'title( <lin( rel!st&lesheet hre !4http=""wwwE&o'rdomainEcom"st&leEcss4 t&pe!4text"css4> <'head( <body( Gage .ontent <'body( <'html( Dou can link to your style sheet within as many of your pages as you would like. This will gi!e you the ability to update all of your pages at one time, simply by changing the styles within your style.css file.
!reating a )ol"er for *our Web Page

Grior to creating your web page, your first step should be to create a folder on your desktop or within your My /ocuments folder to hold your new web page files. Dou can call it web site or whate!er you'd like. Dour ne-t step will be to create a basic HTML page. +imply open a plain te-t editor, such as "ote Gad, and type or paste in the HTML code that you see in the bo- below. ,ach
element of that code will be e-plained below, as it is important that you understand what these codes are and what they mean. Here is the code that you should copy and paste into your te-t editor& <html( <head( <title(Dour Gage Title<'title( <'head( <body( Dour Neb Gage .ontent <'body( <'html(
HTML Tags
,!erything you see between the < and ( symbols are html codes, which are also referred to as html tags. These tags are telling the web browser how they should display the page.

The <html( tag tells the browser that it is about to see HTML coding. The <head( tag contains information about the page, such as the T?TL,, M,T5 tags for proper +earch ,ngine inde-ing, +TDL, tags, which determine the page layout, and Xa!a+cript coding for special effects. The <body( tag tells the browser that the part of your web page that should be !iewable by others is about to start. The !arious tags used inside the body tag tell the browser how to display the page.
For a complete list of HTML codes and examples !isit our HTML "odes "#art section$ ,ach HTML tag contains an opening tag and a closing tag. The opening tag is written with the command enclosed with brackets. ,-ample& <HTML( The closing tag contains a forward slash followed by the command enclosed with brackets. ,-ample& <'HTML( The opening tag is telling the browser to begin the specified action and the closing tag is telling the browser to end the action.
Sa+ing *our HTML ,ocu'ent

*nce you ha!e copied and pasted the abo!e HTML code into your te-t editor, your ne-t step will be to sa!e the document into the new folder you created. ?f your new web page will be your main or starting page, you should sa!e it as indexEhtm or indexEhtml, as index is the file name most web ser!ers will look for when someone types your web address into a web browser. +econdary pages should be sa!ed using the pages most rele!ant keyword phrase. Kor e-ample, if your page is about dog grooming tips, then you might sa!e your page as dogUgroomingUtips.htm.
"e-t, place some content in your new web page between the <body( and <'body( tags. The content may be an article or whate!er you'd like& <body( This ?s .ontent. This is content that others will be able to see when they !isit your web page. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. ?n this section, you will learn how to format the te-t so that it is easier to read and understand. Fse any article or content that you ha!e written, and simply copy and paste it into the HTML document that you ha!e created. <'body(
)or'atting HTML Text

"ow, as you can see, the te-t isn't formatted. ?t isn't laid out in paragraphs, and it's not that special. ,!en if you copy te-t in that is formatted and separated into paragraphs, you will find that when you !iew it in a web browser, the formatting is gone. That is because the format reEuires special tags. Heading Tags Let's start with the heading of the page. ?n the e-ample abo!e, the heading says This ?s .ontent. To turn that into something that looks like a heading, we use the heading tags. Heading tags are presented as <H1(<'H1( and may go as high as <H4(<'H4(. The lower the number, the bigger the te-t will appear. The title or heading of the page goes between these tags, so that it appears like this& <H1(This ?s .ontent<'H1(. Faragraph Tags Dour ne-t step will be to di!ide the content into paragraphs. This is done by enclosing
each paragraph with the <p(<'p( tags. The opening <p( tag is used at the beginning of a paragraph, and the closing <'G( tag is used at the end of each paragraph. ?f you'd like to mo!e a sentence or some te-t to the ne-t line, you can do so by using the <br( #break$ tag at the end of or in between your paragraphs.
BoldG 7talics and Hnderline To further format your te-t, you can use additional HTML tags, such as <b(<'b( tag, which will make any te-t between the opening and closing <b( tags bold. To italici7e your te-t, use the <i(<'i( tags. Dou can underline your te-t with the <u(<'u( tags. Dou can find many more tags you can use within the HTML .odes .hart section. This is !ery easy to memori7e& b stands for bold, ? stands for italici7e, and u stands for underline. G stands for paragraph, and br stands for break. H1 stands for heading 1. Jy implementing these tags, you will see that your code looks like the following e-ample& <html( <head( <title(Dour Gage Title<'title( <'head( <body( <u(<H1(This ?s .ontent<'u(<'H1( <p(This is content that others will be able to see when they !isit your webpage. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. <'p( <p(?n this section, you will learn how to <b(<i(format<'i(<'b( the te-t so that it is easier to read and understand. Fse any article or content that you ha!e written, and simply copy and paste it into the HTML document that you ha!e created. <'p( <'body( <'html( 5ll of the HTML tags are in red so that they are easier for you to see, but they will not actually be in red within your HTML document. Nhen you !iew the web page in your browser, you will see that it looks like this&
This 7s Content
This is content that others will be able to see when they !isit your webpage. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. ?n this section, you will learn how to format the te-t so that it is easier to read and understand. Fse any article or content that you ha!e written, and simply copy and paste it into the HTML document that you ha!e created. ?f any of your tags appear within the document when you !iew it in your browser, this usually means that you didn't close a tag that you opened. "ow, you are ready to learn how to use .++. ,mbedding .ascading +tyle +heets within a web page can be done in two ways with the code placed between the the <head( and <'head( tags or inline, which reEuires the code to be placed directly within the HTML tag. Ne will begin with an e-ample of embedding .++ inline.
%nline !asca"ing Style Sheets #!SS$

?nline cascading style tags are used within standard HTML code using the STYLE parameter. The following e-ample will remo!e the underline of an indi!idual link& Dour Link <5 H6,K0%http=""wwwE&o'rdomainEcom% DT&L+=%T,LT /,.*65T?*"& "*",%(Dour Link<'5( ,dit the web address to suit your needs. +TDL,04TECT-)ECD65T7DN= NDNE% +pecifies the te-t decoration of the link.
?n the ne-t e-ample, the linked te-t has a highlightd background&
Linked Te-t
<A HREF="htt :11www+yourdo$ain+"o$" DT&L+= bac(ground:yellow? color:blac, >@in,ed 1e:t<5)>
E+it t)e text in bo + to s-it %o-, nee+s! DT&L+= bac(ground:yellow? +pecifies the background color:blac, +pecified the te-t color of the linked te-t.
color of the linked te-t.
The ne-t e-ample will display an HTML form input bo- with a colored background&
To !iew this e-ample, place your cursor within the abo!e input bo- and type.
<./PJT ty8e= te6t DT&L+= color: #FFFFFF? bac(ground:color: #822492? >
,dit the te-t indicated in bold to suit your needs. +TDL,0%color& 9::::::@ - +pecifies the te-t color when typing in the input bo-. background color& 98,5.),B - +pecifies the input bo- background color. Visit t#e %&' Safe "olors section to find additional color codes$
&'be""ing Style Tags between the Hea" Tags

"ow that you ha!e a basic understanding of inline style tags, we'll mo!e on to embedding style tags between the <head( and <'head( tags. ?n the pre!ious lesson, we focused on creating a basic HTML web page that looks like this& <html( <head( <title(Dour Gage Title<'title( <'head( <body( <u(<H1(This ?s .ontent<'u(<'H1( <p(This is content that others will be able to see when they !isit your webpage. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. <'p( <p(?n this section, you will learn how to <b(<i(format<'i(<'b( the te-t so that it is easier to read and understand. Fse any article or content that you ha!e written, and
simply copy and paste it into the HTML document that you ha!e created. <'p( <'body( <'html( To embed .ascading +tyle +heets #.++$ within your web page, we will start with the basic style tag. Type or copy and paste the following code into the HTML portion of your web page between the <head( and <'head( tags& <style type0 %te-t'css% title0%styleid% media0%all%( <! ( <'style( Here is how your page should look& <html( <head( <title(Dour Gage Title<'title( <style type0 %te-t'css% title0%styleid% media0%all%( <! ( <'style( <'head( <body( <u(<H1(This ?s .ontent<'u(<'H1( <p(This is content that others will be able to see when they !isit your webpage. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. <'p( <p(?n this section, you will learn how to <b(<i(format<'i(<'b( the te-t so that it is easier to read and understand. Fse any article or content that you ha!e written, and simply copy and paste it into the HTML document that you ha!e created. <'p( <'body( <'html(
Jy using the <style( tag, you are telling the browser that you are about to define the style of your page. The additional tags within the <style( tag are pro!iding the browser with some additional information. The first tag is type0 %te-t'css%. This tag tells the browser that the style of the page will be defined using plain te-t. The title0%styleid% portion of the tag isn't for the browser at all. ?t is for you, so that you can define the style that you are using. ?t can be called anything, such as style, mystyle, or anything you want. The last portion of the style tag is media0%all%. This tells the browser how the page should appear. Kor instance, you could Must use the tag media!4screen4 in which case the page would only display suitably on a computer screen. ?f you used the media!4print4 tag, the browser would display the content in a format that was suitable for printing only. Jy using the media0%all% tag, you are specifying that the browser should display the page in a media type that is suitable for e!erything.
!o''ent Tags
The comment tags  enable you to hide certain te-t within a web page. 5lthough it displays within your HTML code, it will not display within the browser !iew of your web page. Kollowing the <style( tag, you will see the following& <! ( ?n the ne-t section, you will learn how to use .++ to specify all aspects of your web page formatting.
)or'atting *our Web Page

.++ will enable you to specify all aspects of your web page formatting, such as your web page background color, font si7e, font color, font face, page margins and much more simply by including special .++ tags between the comments. Let's start with defining the body of the web page. Fsing HTML code, this is done inside the <body( tag. Jut using .++, it is done within the comment section of the <style( tag. Therefore, there is no need to define anything inside the HTML <body( tag. ?n .++, the body tag looks like this& body V W. The information that concerns how the body will be styled goes inside the brackets. The upper portion of your code should now look like this&
<html( <head( <title(Dour Gage Title<'title( <style type0 %te-t'css% title0%styleid% media0%all%( <! ( <'style( <'head( <body( <'body( <'html(
)or'atting the Bac(groun" an" )oregroun" !olor of a Web Page with !asca"ing Style Sheets #!SS$
"e-t, we define the background color of the page. .olors are defined, in both HTML and .++ with a series of letters and numbers. These numbers are referred to as he-adecimal numbers, and each one represents a color. Kor instance, the he-adecimal for the color white is ;KKKKKK. The he-adecimal is always represented with the ; sign followed by a combination of si- letters or numbers. Visit t#e %&' Safe "olors section to find a complete color code c#art$ Nith .++, we can define different colors for the background and foreground of our web page. This is done as follows& Jody V background color& 222222B color& ffffff W *ur page now has a black background with a white foreground. Howe!er, please note, defining a foreground color is optional. ?n addition, defining the background color is also optional. This should only be defined if you'd like a background color other than the default color of white. 5nytime you are defining a format in .++, you must first state what you are defining, followed by a colon, and then the !alue. ?f you would like to include additional tags, they must be separated with a semicolon. ?n our e-ample, we are first defining the background color. Kollowing the background color is a colon, which is followed by the !alue #he-adecimal color code$. 5 semicolon is placed at the end to tell the browser that this definition is complete.
)or'atting the Margin of a Web Page with !asca"ing Style Sheets #!SS$
?n the ne-t e-ample, we will be defining the web page margins. Type in margin= +;;px. GL stands for pi-els and is telling the browser to display the margin at 122 pi-els. Jody V background color& 222222B color& ffffffB margin& 122p- W
)or'atting the )ont )ace within a Web Page with !asca"ing Style Sheets #!SS$
"e-t, we need to gi!e our fonts more style. Ne are still working in the <style( tag, inside the comment tag. +tarting with the font face or typeset, it is important to use font faces that are commonly installed on computers. ?f the font face that you select is not on your user's computer, the page will be displayed with their default font face. Therefore, the te-t may not appear on that user's computer screen as you had intended. Dou can specify more than one font face. Jy doing this, the browser will look to see if the first font is installed on the users computer. ?f it is not, it will look for the second, and then the third, and so on, until it finds one that is installed. ?n .++ terms, this is known as a font family. 5 good selection of fonts would be 5rial, )erdana, Ieorgia, Times "ew 6oman, and +ans +erif. 5dd this to your .++ as follows& Kont family& 5rial, )erdana, Ieorgia, %Times "ew 6oman%, +ans +erifB "ote that each font face is separated by a comma, and Times "ew 6oman is in Euotation marks, while others are not. 5ny time you use a font face that has more than one word in its name separated by spaces, you must use Euotation marks.
)or'atting )ont Size within a Web Page with !asca"ing Style Sheets #!SS$
"e-t, define the si7e of the fonts, either using terms, such as small, or numbers, such as 1 or 91. ?t can also be defined in pi-els. Jrowsers recogni7e and accept font si7ing in a !ariety of ways. Ne will be using pi-els within the following e-ample&
Kont si7e& 1=p-B
)or'atting S-acing between Lines within a Web Page with !asca"ing Style Sheets #!SS$
The spacing between lines can also be defined. ?f you don't want to define the line spacing, it will naturally be set to 1=23 of the si7e of the font. Howe!er, if you want more line spacing than that between lines of te-t, you can specify a different amount.
Line height& 1423 "otice that there is no semicolon after 1423. This is because we are finished defining the body section of the .++. The final definition needs no semicolon after it. The upper portion of your HTML'.++ code should now look like this& <html( <head( <title(Dour Gage Title<'title( <style type0 %te-t'css% title0%styleid% media0%all%( <! body V background color& 222222B color& ffffffB margin& 122p-B font family& 5rial, Ieorgia, %Times "ew 6oman%, )erdana, +ans +erifB font si7e& 1=p-B Line height& 1423 W ( <'style( <'head( <body( <'body( <'html(
)or'atting Hea" Tags within a Web Page with !asca"ing Style Sheets #!SS$
Dou can use .++ to specify how your Head tags should be formatted. Kor e-ample, you can specify the font face and color of the <H1( tag within your web page like this&
H1 V color& ff2222B font family& 5rial, %Times "ew 6oman%B W Dour HTML code would look like this& <html( <head( <title(Dour Gage Title<'title( <style type0 %te-t'css% title0%styleid% media0%all%( <! body V background color& 222222B color& ffffffB margin& 122p-B font family& 5rial, Ieorgia, %Times "ew 6oman%, )erdana, +ans +erifB font si7e& 1=p-B Line height& 1423 W H1 V color& ff2222B font family& 5rial, %Times "ew 6oman%B W ( <'style( <'head( <body( <'body( <'html( 5s you can see, we are still working inside the comment tag of the <style( tags. "ow that the H1 definition has been added, anywhere the H1 tag appears within the web page, the color of that te-t will be red, and it will appear in the 5rial font.
)or'atting Paragra-h %n"entions an" Letter S-acing within a Web Page with !asca"ing Style Sheets #!SS$
Nith .++, you can e!en control the indention of paragraphs and the spacing between letters in words. To define the indention that should be used for each paragraph, include the following code& G V te-t indent& >em W This will cause a fi!e space indention at the beginning of each paragraph. To specify spacing between letters, use the following e-ample& G V te-t indent& >emB Letter spacing& 2.>em W
"ow, the paragraphs will be indented fi!e spaces, and the spacing between each letter will be half a space. This also works when defining headings, such as& H1 Vcolor& ff2222B font family& 5rial, %Times "ew 6oman%B letter spacing& 2.>emW 5s you are beginning to see, .++ allows you to manipulate all of the te-t within the page in ways that HTML doesn't allow. ?n the following lessons, you will learn how to manipulate other HTML tags with .++. ?n HTML, to create a list, you use either the <ul(<'ul( tag or the <ol(<'ol( tag with the <li(<'li( tag used in between to define list items. The <ul(<'ul( tag defines an unordered list, which will ha!e bullet points beside each list item, while the <ol(<'ol( tag defines an ordered list that will ha!e numbers beside each item. The first e-ample below is an HTML unordered list, and the second sample is an ordered list. HTML Hnordered List <ul( <li(?tem one<'li( <li(?tem two<'li( <li(?tem three<li( <'ul( ?n a web browser, this code would appear as&

?tem one ?tem two ?tem Three
HTML Drdered List <ol( <li(?tem one<'li( <li( ?tem two<'li( <li( ?tem three<'li( <'ol( ?n a web browser, this code would appear as& 1. ?tem one =. ?tem two :. ?tem three
Howe!er, you may want to use sEuares instead of round bullet points, or roman numerals instead of numbers. ?n HTML, you must specify this in each <li( tag, using either <li type0%sEuare%( for sEuare bullets or <li type0%?%( for roman numerals. 6emember, in HTML, this must be done inside each HTML <li( tag.
Howe!er, if you are using .++, this can be done once and it will be applied anywhere that the <li( tag occurs within your page. Dou can also use images instead of bullet points, numbers, or roman numerals. Kor e-ample, to use sEuare bullets within an unordered list& ul V list style type& sEuare W ?f you would like to use an image, use the following code& ul Vlist style image& url #images'bullet.gif$W *f course, the image that you use needs to be uploaded to the images directory on your web ser!er before it will appear on your page. 5gain, this code goes in the comment section of the <style( tag, which is inside the <head( tag inside the HTML coding. Links are pieces of te-t that are hyperlinked to other web pages. They are 'clickable' meaning that a user can put their mouse cursor o!er the link, click, and go to the designated web page. There are four states that a link may be in on an HTML web page& the lin(, a !isited lin(, an acti!e lin(, and a #o!ered lin(. The link, of course, is Must the link as it appears when no action has been taken, and the cursor isn't o!er the link. The default color for links is blue, and they are usually underlined. Howe!er, with .++, you can change this. 5 !isited link is one that the user has !isited, and it is usually no longer blue to the user but it is still clickable. 5n acti!e link is a link that has Must been clicked. The link turns a different color between the time that the user clicks the mouse button down and then let's goes of the mouse button, meaning that they ha!e acti!ated the link. 5 ho!ered link refers to the time that the user has their mouse cursor o!er a link, but has not clicked. To manipulate these links, we use the following in our .++&
a&link Vcolor& ;22C222B te-t decoration& noneW a&!isited Vcolor& ;ccccccB te-t decoration& noneW
a&acti!e Vcolor& ;ff2222B te-t decoration& underlinedW a&ho!er Vcolor& ;::22ffB te-t decoration& underlinedW Nhen we put the abo!e code within our HTML web page .++, all of the links on the web page will be green. Nhen the user puts their mouse cursor o!er the link, it will turn blue, and be underlined. Nhen they click the link, it will temporarily turn red and be underlined, and when they return to this page, the link that they clicked will be gray.
The upper portion of the web page code now looks like this& <html( <head( <title(Dour Gage Title<'title( <style type0 %te-t'css% title0%styleid% media0%all%( <! body V background color& 222222B color& ffffffB margin& 122p-B font family& 5rial, Ieorgia, %Times "ew 6oman%, )erdana, +ans +erifB font si7e& 1=p-B Line height& 1423 W H1 V color& ff2222B font family& 5rial, %Times "ew 6oman%B W ul Vlist style image& url #images'bullet.gif$W a&link Vcolor& ;22C222B te-t decoration& noneW a&!isited Vcolor& ;ccccccB te-t decoration& noneW a&acti!e Vcolor& ;ff2222B te-t decoration& underlinedW a&ho!er Vcolor& ;::22ffB te-t decoration& underlinedW ( <'style( <'head( <body( <'body( <'html( HTML allows us to format and manipulate te-t to make our web pages more attracti!e and appealingB howe!er, .ascading +tyle +heets enable us to make them e!en more attracti!e and appealing. This is one of the biggest benefits of .++, other than the fact that using .++ sa!es loads of time when creating or changing web pages. ?n the ne-t section, you'll learn how to display tables with .ascading +tyle +heets.
Tables are commonly used in HTML because they define the lay out of the web page. ?nstead of Must ha!ing a heading and te-t that runs from left to right and top to bottom, we can ha!e pages that ha!e a block of te-t here, and another block of te-t o!er there, and so on. Jut the use of tables can be !ery comple- and time consuming and they aren't necessarily search engine friendly. +o, instead of using tables, learn to use .++ classes and include the <di!( tag where it is appropriate to do so in your HTML code. Here is what we ha!e so far& <html( <head( <title(Dour Gage Title<'title( <style type0 %te-t'css% title0%styleid% media0%all%( <! body V background color& 222222B color& ffffffB margin& 122p-B font family& 5rial, Ieorgia, %Times "ew 6oman%, )erdana, +ans +erifB font si7e& 1=p-B Line height& 1423 W H1 V color& ff2222B font family& 5rial, %Times "ew 6oman%B W ul Vlist style image& url #images'bullet.gif$W a& link Vcolor& ;22C222B te-t decoration& noneW a& !isited Vcolor& ;ccccccB te-t decoration& noneW a& acti!e Vcolor& ;ff2222B te-t decoration& underlinedW a& ho!er Vcolor& ;::22ffB te-t decoration& underlinedW ( <'style( <'head( <body( <u(<H1(This ?s .ontent<'H1(<'u( <p(This is content that others will be able to see when they !isit your webpage. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. <'p( <p(?n this section, you will learn how to <b(<i(format<'i(<'b( the te-t so that it is easier to read and understand. Fse any article or content that you ha!e written, and simply copy and paste it into the HTML document that you ha!e created. <'p( <'body(
<'html( "ow, let's assume that we want to add a na!igational menu on the left hand side of the page. "ormally, using HTML, we would create this with the use of tables. Jut we don't ha!e to do that with .++. Let's say that we want to include the na!igational menu, which will ha!e four links and a green background.
The first thing we want to do is to set up a class. 5 class in .++ is a period followed by a codename for the class. ?n this e-ample, we are going to set up a class called na!igation, so, our code will look like this& <html( <head( <title(Dour Gage Title<'title( <style type0 %te-t'css% title0%styleid% media0%all%( <! body V background color& 222222B color& ffffffB margin& 122p-B font family& 5rial, Ieorgia, %Times "ew 6oman%, )erdana, +ans +erifB font si7e& 1=p-B Line height& 1423 W H1 V color& ff2222B font family& 5rial, %Times "ew 6oman%B W ul Vlist style image& url #images'bullet.gif$W a& link Vcolor& ;22C222B te-t decoration& noneW a& !isited Vcolor& ;ccccccB te-t decoration& noneW a& acti!e Vcolor& ;ff2222B te-t decoration& underlinedW a& ho!er Vcolor& ;::22ffB te-t decoration& underlinedW Ele tcol'mn > position= a#sol'te@ width= +/;px@ top-margin= ,;px@ le t-margin= +;px@ #ac(gro'nd-color= 9;;<<;; A ( <'style( <'head( <body( <'body( <'html( The class that we Must added is in bold green in the sample abo!e. /on't forget the period in front of the codename. "ow, in this class, we ha!e a left column with an absolute position. This means that the element will appear e-actly and absolutely where we want it
to appear, which in this case is =2p- from the top of the page and 12 pi-els from the left side. Howe!er, that isn't Euite enough.
"ow, in the HTML code, we ha!e to specify where we want our na!igation to appear. This is done by using the Ele tcol'mn code name we set up. +ince we'!e set our position as absolute, the .++ will align it Must as we specified. The following code should be added to our HTML document& <a href0%link1.html(Link 1<'a( <a href0%link=.html(Link =<'a( <a href0%link:.html(Link :<'a( <a href0%link8.html(Link 8<'a( "e-t, we need to place the codename into the HTML coding where we would like the .++ na!igational menu to appear& </?) .lass0%leftcolumn%(<'/?)( Here is how the HTML document will look& <html( <head( <title(Dour Gage Title<'title( <style type0 %te-t'css% title0%styleid% media0%all%( <! body V background color& 222222B color& ffffffB margin& 122p-B font family& 5rial, Ieorgia, %Times "ew 6oman%, )erdana, +ans +erifB font si7e& 1=p-B Line height& 1423 W H1 V color& ff2222B font family& 5rial, %Times "ew 6oman%B W ul Vlist style image& url #images'bullet.gif$W a& link Vcolor& ;22C222B te-t decoration& noneW a& !isited Vcolor& ;ccccccB te-t decoration& noneW a& acti!e Vcolor& ;ff2222B te-t decoration& underlinedW a& ho!er Vcolor& ;::22ffB te-t decoration& underlinedW Ele tcol'mn > position= a#sol'te@ width= +/;px@ top-margin= ,;px@ le t-margin= +;px@ #ac(gro'nd-color= 9;;<<;; A (
<'style( <'head( <body( </?) .lass0%leftcolumn%( <a href0%link1.html(Link 1<'a(<br( <a href0%link=.html(Link =<'a(<br( <a href0%link:.html(Link :<'a(<br( <a href0%link8.html(Link 8<'a(<br( <'/?)( <u(<H1(This ?s .ontent<'H1(<'u( +ince we ha!e created a left column, howe!er, we must also create a right column. ?t's actually already there. That portion of the page where we want content. Ne Must ha!e to assign a class to it, as follows& 5dd to C33= .rightcolumn V position& absoluteB top margin& =2p-B left margin& 1>2p-B background color& ;KKKKKK W 5dd to HTML= </?) class0%rightcolumn%( <u(<H1(This ?s .ontent<'H1(<'u( <p(This is content that others will be able to see when they !isit your webpage. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. <'p( <p(?n this section, you will learn how to <b(<i(format<'i(<'b( the te-t so that it is easier to read and understand. Fse any article or content that you ha!e written, and simply copy and paste it into the HTML document that you ha!e created. <'p( <'/?)( <'body( <'html(
.lasses and ?/'s are used much the same way in .++. Howe!er, classes are often used to identify groups of selectors, while ?/'s are used to identify one selector or element. .lass
is used for plain HTML documents, while ?/'s are usually used for documents that contain Xa!a+cript or /ynamic HTML #/HTML$. 5 class is created, as e-plained abo!e, with the use of a period and a codeword for the class. 5n ?/, howe!er, is denoted with the ; symbol, followed by the codeword. +o, using our e-ample abo!e, if you wanted to use an ?/ instead of a class, you would change .leftcolumn to ;leftcolumn. Dou can use either classes or ?/'s with Must about any HTML tag. ?t can be used with the <i(<'i(, <u(<'ul( and <p(<'p( and many others. Kurthermore, e!en if you use tables in your HTML, you can define how those tables beha!e using classes and ?/'s in .++ as well, howe!er, that is more ad!anced.
Lin(e" Style Sheets

Thus far, we ha!e co!ered how to use embedded .++. ,mbedded .++ goes directly into the <head(<'head( tags of the HTML code. Howe!er, one of the wonderful things about .++ is that it can help you to Euickly create or change web pages. ?n this case, you really need to use a separate .++ document along with your HTML document. Kor instance, you wouldn't want to place the .++ within the HTML document, as if you need to make any changes to your design, you would ha!e to change e!ery single HTML document on your web site to make them all look the same. Kor this reason, you will be much better off creating a .ascading +tyle +heet #.++$ file and then link to it within your web pages. This will enable you to change your background color, link colors, or whate!er you'd like simply by changing the code within your .++ file. The changes you make will automatically affect all of your web pages.
Lin(ing to a !asca"ing Style Sheet within a Web Page

Linking your web pages and .++ pages together is incredibly easy. Let's start with the HTML. The HTML document that we started with was& <html( <head( <title(Dour Gage Title<'title( <'head( <body( </?) class0%rightcolumn%( <u(<H1(This ?s .ontent<'H1(<'u(
<p(This is content that others will be able to see when they !isit your webpage. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. <'p( <p(?n this section, you will learn how to <b(<i(format<'i(<'b( the te-t so that it is easier to read and understand. Fse any article or content that you ha!e written, and simply copy and paste it into the HTML document that you ha!e created. <'p( <'/?)( <'body( <'html( "ow, in the <head(<'head( tag, we want to link to the style sheet by adding the following&
<link type0%te-t'css% rel0%stylesheet% href0%mycss.css%( The abo!e code will look something like this within your HTML code& <html( <head( <title(Dour Gage Title<'title( <link type0%te-t'css% rel0%stylesheet% href0%mycss.css%( <'head( <body( </?) .lass0%leftcolumn%( <a href0%link1.html(Link 1<'a(<br( <a href0%link=.html(Link =<'a(<br( <a href0%link:.html(Link :<'a(<br( <a href0%link8.html(Link 8<'a(<br( <'/?)( </?) class0%rightcolumn%( <u(<H1(This ?s .ontent<'H1(<'u( <p(This is content that others will be able to see when they !isit your webpage. Nhen content is pasted in, it won't ha!e any formatting. ?t will Must be te-t that reads from left to right, in one long paragraph. ?t should ha!e a heading, followed by the actual content. <'p( <p(?n this section, you will learn how to <b(<i(format<'i(<'b( the te-t so that it is
easier to read and understand. Fse any article or content that you ha!e written, and simply copy and paste it into the HTML document that you ha!e created. <'p( <'/?)( <'body( <'html( Kor our e-ample web page, that is all of the HTML we need. "ow, we need to make our style sheet. 5ll the style sheet reEuires is the elements that pertain to the HTML document. Fnlike HTML, a style sheet does not reEuire any special tags at the beginning or end of the document to indicate a beginning or ending it simply needs the elements that pertain to your web page.
5lso note, you do not ha!e to tell the web browser what it is seeing. +ince the .++ isn't embedded, you don't need to include the following tag& <style type0 %te-t'css% title0%mycss% media0%all%( Howe!er, if you would like to define the title of the style sheet and the media that should dictate how your pages are displayed, you can also choose to include it. Kinally, here is our finished style sheet to go along with the finished HTML document abo!e& body V background color& 222222B color& ffffffB margin& 122p-B font family& 5rial, Ieorgia, %Times "ew 6oman%, )erdana, +ans +erifB font si7e& 1=p-B Line height& 1423 W H1 V color& ff2222B font family& 5rial, %Times "ew 6oman%B W ul Vlist style image& url #images'bullet.gif$W a& link Vcolor& ;22C222B te-t decoration& noneW a& !isited Vcolor& ;ccccccB te-t decoration& noneW a& acti!e Vcolor& ;ff2222B te-t decoration& underlinedW a& ho!er Vcolor& ;::22ffB te-t decoration& underlinedW .leftcolumn V position& absoluteB width& 1>2p-B top margin& =2p-B left margin& 12p-B background color& ;22AA22 W .rightcolumn V position& absoluteB top margin& =2p-B left margin& 1>2p-B background color& ;KKKKKK W
The abo!e te-t should be placed within any te-t editor, and sa!ed as mycss.css this document and the HTML document, which is named inde-.htm or inde-.html should be uploaded to a web ser!er. That's all there is to it. "ow that you see how easy using and implementing .++ is, you can ha!e the ability to create and edit the style of your web pages !ery Euickly. ?n the following pages, you will find a .++ property inde- that will greatly help you understand what you can do with .++. "ote that these are not the only possible properties. There are literally thousands of different properties that can be used in .++.
C33 T'torial= Cascading 3t&le 3heet Codes Chart - Fropert& 7ndex

Fropert& background Fossi#le Val'es background color background image background repeat background attachment background position border style border color border width border bottom width thin medium thick length color border right width border top width none hidden dotted dashed solid double groo!e ridge inset outset left right )escription +ets all background properties
border
.ontrols border properties
clear
Gre!ents a floating element from being placed near the specified edge of another element.
cursor
display
float
position
both none url auto crosshair default pointer mo!e e resi7e ne resi7e nw resi7e n resi7e se resi7e sw resi7e s resi7e w resi7e none inline block list item run in compact marker table inline table table row group table header group table footer group table row table column group table column table cell table caption left right none static relati!e absolute fi-ed bottom clip left o!erflow right
5llows you to determine what type of cursor appears on the users screen.
/etermines how an element is displayed, or e!en if it is displayed.
/etermines where te-t or an image will appear within a separate element. /etermines how an element will be positioned.
!isibility
height
line height
ma- height
width
ma- width
min height min width font
font family
top !ertical align 7 inde!isible hidden collapse auto length 3 normal number length 3 none length 3 auto 3 length none length 3 length 3 length 3 font style font !ariant font weight font si7e'line height font family caption icon menu message bosmall caption status bar family name generic family -- small - small small medium
/etermines whether an element is !isible, in!isible, or collapsed. /etermines the height of an element.
/etermines the space between lines.
/etermines the ma-imum height of an element.
/etermines the ma-imum width of an element.
/etermines the minimum width of an element.
/etermines the minimum height of an element. /etermines the minimum width of an element. /etermines all font properties.
font si7e
/etermines fonts that will be used. ?f a font is not installed on a user's computer, the browser will try each font in the font family until one is found. /etermines the si7e of the font.
font si7e adMustment font style
font stretch
font !ariant font weight
content
large - large -- large smaller larger length 3 none number normal italic obliEue normal wider narrower ultra condensed e-tra condensed condensed semi condensed semi e-panded e-panded e-tra e-panded ultra e-panded normal small caps normal bold bolder lighter 122 =22 :22 822 >22 422 @22 C22 A22 string url counter#name$ counter#name, list style type$ counters#name, string$
Fsed to adMust the font si7e if other elements or factors change the si7e of it. /etermines the si7e of the fonts.
Fsed to shrink or enlarge the span of the fonts.
Fsed to cause fonts to be displayed either as fonts in small capital letters or in normal letters. /etermines the weight or boldness of a font.
.reates specific content in a document.
counters#name, string, list style type$ attr#L$ open Euote close Euote no open Euote no close Euote Euotes none string string list style list style type list style position list style image list style none image url list style inside position outside list style type none disc circle sEuare decimal decimal leading 7ero lower roman upper roman lower alpha upper alpha lower greek lower latin upper latin hebrew armenian georgian cMk ideographic hiragana katakana hiragana iroha katakana iroha margin margin bottom margin top margin left margin right outline outline color outline style outline width padding padding top
/etermines the type of Euotation marks used. /etermines the style of a list.
/etermines what image should be used for a list. /etermines whether the list element is on the inside or the outside of the list item. /etermines the style of a list.
Fsed to determine and set margins on the page.
/etermines the properties of an outline.
+ets padding properties.
te-t
padding right padding bottom padding left color direction line height letter spacing te-t align te-t decoration te-t indent te-t shadow te-t transform Fnicode bidi white space word spacing &link &!isited &focus &ho!er &first child &lang &acti!e
/etermines te-t properties.
/etermines link properties.

Limbajul HTML Tag Uri

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Limbajul HTML Tag Uri

Hochgeladen von

Copyright:

Verfügbare Formate

HTML Tags Chart

<center( center de initio n descripti on

the emphasis tag <embed( em#ed o#*ect

using the emphasis tag

<em#ed src0%yourfile.mid% width0%1223% height0%42% align0%center%( #Tip$

<font( <font( <font(

ont ont ont

<h1( <h=( <h:( <h8( <h>( <h4(

heading + heading , heading heading . heading / heading 0

heading o <head>.ontains elements describing the HTML document<"head> doc'men t

"othing will show

hori1ont <hr "> al r'le

hori1ont <hr width0%>23% si7e0%:% '( al r'le

hori1ont <hr width0%>23% si7e0%:% noshade '( al r'le

.ontents of your web page

<input( inp't #?nternet ield ,-plorer$

,-ample =& #Tip$

,-ample :& #Tip$

,-ample 8& #Tip$

<input( inp't ield

,-ample 1& #Tip$

List item + List item , List item -

List item 1 List item = List item :

"othing will show #Tip$

<meta( <meta( <meta( <meta( <meta( <ol(

meta meta meta meta meta

Lowercase Letters a. List item 1

+elect an option& #Tip$

<small( <strike( <strong( <table(

small $text% deleted text

,-ample Example ,-ample 1& #Tip$ .olumn 1 .olumn =

,-ample =& #Tip$ .olumn 1 .olumn =

,-ample :& #Tip$

,-ample ,-ample 1&

List item 1 List item =

List item 1 List item = o List item :

7pen all lin,s in a new window

<HR 1.DTH= /0= D.M+= < >

<HR 1.DTH= /0= D.M+= < >7!?29E>

<HR 1.DTH= 8/= ",L,R=

9::;;;; D.M+= I >

<HR 1.DTH= 2/= ",L,R=

900<<::% D.M+= 6 >

<.M0 DR"= ima$e.$i% 1.DTH= 2 H+.0HT= 200 *,RD+R= 3 >

This is an e6a'8le of an HTML table with the standard border!

The te6t is dis8laying at the botto' of the i'age!

<.M0 DR"= youri'age!98g 1.DTH= FG H+.0HT= 2HI *,RD+R= 3 >

<.M0 DR"= youri'age!98g 1.DTH= IP H+.0HT= GN *,RD+R= 3 >

!ets"a e !a#igator su ma,gin)eig)t=( ma,gin2i+t)=(

+dit the te6t indicated in red to suit your needs!

Exa$ le: # ace %o-, mo-se o1e, t)is in4

Exa$ le: Recommen+e+ 0in4

Exa$ le: C ic4 He,e to test t)e a-to-3i emai in4

/ighlighting a 0ink: )ttp?//222!%o-,+omain!com/

/ighlighting 2ext: Examp e? Examp e o3 )ig) ig)te+ text

N,J G5I, T,LT

<H*"@o-, :-i+e to Hea t) A Fitness</H*" G,o2se, /ie2?

,our 4uide to /ealth ' 5itness

<A HREF=")ttp?//222!%o-,+omain!com" -2,0E="2E>2?9E7:;A2I:!: !:!E""@o-, 0in4</A"

8rowser 3iew: @o-, 0in4

1hen clic(ed on7 it will dis8lay your e'ail address correctly!

N,J G5I, N?"/*N+

8rowser 3iew Co -mn 6 Ro2 ' Co -mn ' Ro2 '

<H"@o-, :-i+e to Hea t) A Fitness</H" G,o2se, /ie2?

ption 1 ption = *ption :

HTML H6?R"T5L 6FL,