Limbajul HTML Tag Uri

download Limbajul HTML Tag Uri

of 130

Transcript of Limbajul HTML Tag Uri

  • 8/13/2019 Limbajul HTML Tag Uri

    1/130

    HTML Tags Chart

    To use any of the following HTML tags, simply select the HTML code you'd like andcopy and paste it into your web page.

    Tag Name Code Example Browser View

    "othing will show #Tip$

    Example

    ontents of your web page #Tip$

    /efinition Term/efinition of theterm

    /efinition Term/efinition of theterm

  • 8/13/2019 Limbajul HTML Tag Uri

    2/130

    the emphasis tag using the emphasis tag

  • 8/13/2019 Limbajul HTML Tag Uri

    3/130

  • 8/13/2019 Limbajul HTML Tag Uri

    4/130

    &

  • 8/13/2019 Limbajul HTML Tag Uri

    5/130

  • 8/13/2019 Limbajul HTML Tag Uri

    6/130

    href0%style.css% (< head(

    #Tip$

    N'm#ered 3pecial 3tart

  • 8/13/2019 Limbajul HTML Tag Uri

    7/130

    Lowercase Letters

    Capital Letters 3pecial 3tart

    Capital 6oman N'merals

  • 8/13/2019 Limbajul HTML Tag Uri

    8/130

    Capital 6oman N'merals 3pecial 3tart

    option = option 8 option 4

  • 8/13/2019 Limbajul HTML Tag Uri

    9/130

    displaying the use -ample

    -ample =& #?nternet -plorer$

  • 8/13/2019 Limbajul HTML Tag Uri

    10/130

    < tr(Col'mn ,Col'mn ,

    < tr(< table(

    Col'mn + Col'mn ,

  • 8/13/2019 Limbajul HTML Tag Uri

    11/130

  • 8/13/2019 Limbajul HTML Tag Uri

    12/130

    &our Table Data&our Table Data

    "hange the te6t indicated in bold to suit your needs! However7 'a(e sure you select abac(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 codemay be ust what you're looking for.

    5s you can see in the e-ample below, we are displaying a web page within the web pagethat 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 theadditional page.

    "o8y and 8aste the code below into your web 8age where you would li(e to e'bed the additional

    8age!

    Error:Embedded data could not be displayed.

    "hange the te6t indicated in bold to suit your needs!

  • 8/13/2019 Limbajul HTML Tag Uri

    13/130

    I3 %o 2o + i4e t)e tab o,+e, to s4ip a ce,tain a,ea5 s c) as c)ec4 boxes an+ ,a+iob 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,as 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 sitetemp 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 ordescending 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 yourte6t '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 inorder 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:

    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 #7start"olorstr=# #FFFFFF #7 gradientTy8e=#3# ?

    )lthough you can edit the gradient colors indicated in red7 (ee8 in 'ind7 in order for the gradienteffect to dis8lay 8ro8erly7 you 'ust select one light color and another color that is several shadeslighter!

    http://www.web-source.net/?synhttp://www.webdesignmastery.com/http://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/?synhttp://www.webdesignmastery.com/http://www.web-source.net/html_background_gradient.htmhttp://www.web-source.net/html_background_gradient.htm
  • 8/13/2019 Limbajul HTML Tag Uri

    14/130

    .f you#re using a list 'anage'ent syste' that re;uires s8ecific te6t to be 8laced within the e'ailsub9ect 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 tosubscribe to your 8ublication7 they 'ay not ty8e the re;uired te6t correctly! This 'ista(e willcause 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 lineand body when clic(ed on!

    you@yourdo'ain!co' )dd the following code to your HTML!

  • 8/13/2019 Limbajul HTML Tag Uri

    15/130

    .f you#re in need of an HTML code that will enable you to s8ecify the s8acing between youri'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 theirvertical and horiContal align'ent is different!

    These i'ages haven#t been 8laced within an HTML table and aren#t aligned via " ! They arebeing dis8layed via the H P)"+ and E P)"+ attributes7 which will enable you to s8ecify thehoriContal and vertical s8acing between your i'ages!

  • 8/13/2019 Limbajul HTML Tag Uri

    16/130

  • 8/13/2019 Limbajul HTML Tag Uri

    17/130

    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 tothe new 8age! This 8rovides a great way to 8rovide your visitors with the infor'ation they wereloo(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( theearch +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 and tags of your HTMLcode!

    The above HTML redirect code will redirect your visitors to another web 8age instantly! Thecontent= 3? 'ay be changed to the nu'ber of seconds you want the browser to wait beforeredirecting!

    )re you loo(ing for a way to s8ice u8 your HTML for'sA &ou can change the colors ofyour 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 youonly use bac(ground and font colors that will enable the te6t to be easily viewed! %ore6a'8le7 if you#d li(e to use a dar(er bac(ground color 7 you 'ay want to consider usingwhite for your te6t color!

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

    http://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_colored_boxes.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_redirect.htmhttp://www.web-source.net/html_colored_boxes.htm
  • 8/13/2019 Limbajul HTML Tag Uri

    18/130

    .f you#re using an HTML for' on your web site and would li(e to use an i'age sub'it buttoninstead 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 needto 8lace it within an HTML table! .n addition7 unless your i'age has a trans8arent bac(ground7you will need to set the table bac(ground color to the sa'e color as the i'age bac(ground sothat it will sea'lessly blend together!

  • 8/13/2019 Limbajul HTML Tag Uri

    19/130

    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 color7width and height of the line dividers by adding so'e attributes to your HTML code!

    The e6a'8les below show various styles of the HTML tag! They are dis8layed in a tableand the width attributes s8an the set 8ercentage of the table! 1hen used without a table7 thewidth will s8an the set 8ercentage of the entire web 8age!

    7!? 9E >

    +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 andeasily 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 singlei'age can be used to create an HTML vertical or horiContal line within your web 8age si'8ly bychanging 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'agewithin 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!

    http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/html_vertical_rule.htmhttp://www.web-source.net/html_vertical_rule.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/html_vertical_rule.htm
  • 8/13/2019 Limbajul HTML Tag Uri

    20/130

    Here#s how:

    Place your 'ouse 8ointer over the little blue dot enlarged to assist you below! Right clic(7 andgo to # ave Picture )s!# ) window will load and enable you to select the folder on your co'8uterin which you#d li(e to save the i'age!

    Here#s the i'age:

  • 8/13/2019 Limbajul HTML Tag Uri

    21/130

    HTML web 8age tables are used within a web 8age to organiCe content! They can be dis8layedwith bac(ground colors 7 with or without borders7 and can contain rows and colu'ns dis8layed inan 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 ournavigational lin(s dis8layed within an HTML web 8age table with a grey bac(ground! 1e usecolor 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 thebac(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 withbac(ground colors! This HTML table has -colu'ns and 2 row!

    +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 web8ages without using gra8hics!

    HTML tables are dis8layed within a web 8age to neatly align content! They can contain i'agebac(grounds7 colored bac(grounds7 borders of different siCes7 and an unli'ited nu'ber of rowsand colu'ns!

    .n this e6a'8le7 the HTML table below contains - colu'ns and 2 row! The left colu'n containsthe 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 withan i'age bac(ground! This HTML tablehas - colu'ns and 2 row!

    http://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htmhttp://www.web-source.net/html_colored_tables.htm
  • 8/13/2019 Limbajul HTML Tag Uri

    22/130

    +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 whencreating 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'age7you#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 # avePicture )s# a window will load and enable you to select the folder on your co'8uter in whichyou#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 HTMLcode 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 colorborder and bac(ground!

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

  • 8/13/2019 Limbajul HTML Tag Uri

    23/130

  • 8/13/2019 Limbajul HTML Tag Uri

    24/130

    .nternet +68lorer

    .f you#d li(e to dis8lay a stationary i'age behind your te6t7 you can do so by adding attributes toyour HTML body tag!

    tationary bac(ground i'ages re'ain in one 8lace even when scrolling through the 8age! ,nlythe te6t will 'ove! To create this effect7 8lace the code below within your tag!

    +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 youri'age7 so try to select an i'age that won#t 'a(e your te6t difficult to read! To 8revent yourbac(ground i'age fro' tiling re8eating 7 8lace the following code between your and tags!

    < T&L+ T&P+= te6t5css >: >7>E5 to your lin( code:

  • 8/13/2019 Limbajul HTML Tag Uri

    30/130

    DF7>1C7@73'5#FF00005 &our Lin( D/F7>1

    )lthough the above code will enable you to change the color of an individual hy8erlin(7 8leaseuse 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 aweb 8age to another! This isn#t a standard lin( we#re referring to7 but a lin( that actually ta(es youto another section within the sa'e web 8age! %or e6a'8le7 'aybe you have infor'ation at theto8 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 atthe botto' of this 8age!

    +6a'8le Lin(

    !tep # elect the area of te6t that you want the lin( to ta(e you to when clic(ed on! .n the abovee6a'8le7 the te6t we lin(ed to below is HTML7 which is located within the ub'it your HTMLcode 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(ethis:

    1e t

    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 tore'e'ber if you 9ust use the sa'e te6t a what you have selected your anchor te6t to be! oagain7 in the above e6a'8le7 we used HTML! 1hen we created our anchor7 it loo(ed li(e this:ub'it your D > E'5?1 @5 ?1 @D/ code sni88ets!

    !tep #2

    http://www.web-source.net/html_link_anchors.htmhttp://www.web-source.net/html_link_anchors.htmhttp://www.web-source.net/html_link_anchors.htm#HTMLhttp://www.web-source.net/html_link_anchors.htmhttp://www.web-source.net/html_link_anchors.htm#HTML
  • 8/13/2019 Limbajul HTML Tag Uri

    31/130

    &our final ste8 will be to create your actual lin( that when clic( on will ta(e you to your anchorte6t:

    "lic( Here

    .n the e6a'8le above7 we selected HTML for our anchor te6t and the #+6a'8le Lin(# te6t abovewas used to create the lin(! 1hen clic(ed on7 the 8age will 9u'8 to the HTML anchor te6t weselected below!

    1hen you create your lin(7 you 'ust use the same name within your lin, as you used in youranchor! .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: D ?3EF'5#?1 @5 E ample @in,D/

    &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 'eansyour site is stuc( in their fra'e with their infor'ation dis8laying within another fra'e7 you (nowhow frustrating this can be! &ou want your visitors to visit your web site within their standardbrowser window not within another web site#s fra'e! However7 there is a way you can enableyour 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! However7the (ey is to 8lace T)R0+T= Kto8 within your lin( code! This will dis8lay your web site in its ownwindow and not so'eone else#s fra'e!

    +6a'8le Lin(

  • 8/13/2019 Limbajul HTML Tag Uri

    32/130

    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 theH+.0HT and 1.DTH values:

    ,riginal .'age

  • 8/13/2019 Limbajul HTML Tag Uri

    33/130

    !ets a e !a#igator su orts:

    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 !

  • 8/13/2019 Limbajul HTML Tag Uri

    34/130

    T)e abo1e TIT0E +esc,iption 2o + be +isp a%e+ i4e t)is 2)en %o p ace %o , mo seo1e, 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)emo 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,?

  • 8/13/2019 Limbajul HTML Tag Uri

    35/130

    C)ange t)e text 2)e,e in+icate+ in ,e+ as 3o o2s?

    )ttp?//222!a33i iate+omain!com/ %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 %o

    2o + i4e %o , 1isito,s to see 2it)in t)ei, stat s ba, 2)en t)e% p ace t)ei, mo sepointe, 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 ,e i,es a ce,tain s b ect ine 2it)inan emai message 5 man% times5 %o 9 3in+ t)at i3 %o ,e est t)at a ce,tain 2o,+ bep ace+ 2it)in t)e s b ect o3 an emai 5 it 2on9t be p,o1i+e+! T)is co+e can be se+ toens ,e t)at %o , emai s b ect is 3i e+ in exact % as %o ,e i,e!

    Exa$ le:

    C ic4 He,e to test t)e a to-3i emaiin4

    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,?

  • 8/13/2019 Limbajul HTML Tag Uri

    36/130

    I3 %o 9,e oo4ing 3o, a 2a% to )ig) ig)t ce,tain in4s an+/o, text 2it)in %o , 2ebpage 5 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,?

  • 8/13/2019 Limbajul HTML Tag Uri

    37/130

    Trac(ing your advertising strategies is an i'8ortant 8art of doing business! However7 8urchasingan ad trac(ing software 8rogra' can be e68ensive! .f you#re loo(ing for a si'8le way to trac( youradvertising7 this HTML ti8 'ay be your answer!

    &ou can trac( your classified ads using a si'8le code? however7 you 'ust have access to yourweb site logs to view your results! 1hen you 8lace your ads7 instead of using your regular webaddress7 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 youwill 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,e1entb,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

  • 8/13/2019 Limbajul HTML Tag Uri

    38/130

    I3 %o 9,e oo4ing 3o, a 2a% to p,e1ent .ea,c) Engines 3,om in+exing ce,tain 2ebpages 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 toin+ex5 s c) as +o2n oa+ pages o, p,i1ate membe,s)ip sites! To )e p 2it) t)isp,ob em5 a++ one o3 t)e 3o o2ing META tag co+es bet2een t)e

  • 8/13/2019 Limbajul HTML Tag Uri

    39/130

  • 8/13/2019 Limbajul HTML Tag Uri

    40/130

    / 60 7ode:

  • 8/13/2019 Limbajul HTML Tag Uri

    41/130

    I3 %o 91e e1e, t,ie+ to +isp a% an image 2it) %o , text 2,apping a,o n+ it5 %o )a1ep,obab % +isco1e,e+ it 2on9t 2o,4 2it) 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:

  • 8/13/2019 Limbajul HTML Tag Uri

    42/130

    T)e

  • 8/13/2019 Limbajul HTML Tag Uri

    43/130

    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?

  • 8/13/2019 Limbajul HTML Tag Uri

    44/130

  • 8/13/2019 Limbajul HTML Tag Uri

    45/130

    @o can c,eate a in4 2it)in t)e same page b% a++ing t)e 3o o2ing co+es!

    - E 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)e3o 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!

  • 8/13/2019 Limbajul HTML Tag Uri

    46/130

    @o can c)ange t)e co o, o3 an in+i1i+ a HTM0 2eb page in4 b% a++ing a 3ont tag in3,ont o3 %o , in4e+ text!

    Exa$ le 7ode:

  • 8/13/2019 Limbajul HTML Tag Uri

    47/130

    8)en in4ing to a 2eb page 2it)in %o , 2eb site in a +i33e,ent +i,ecto,%5 %o m stinc +e t)e +i,ecto,% name 2it) %o , page name!

  • 8/13/2019 Limbajul HTML Tag Uri

    48/130

    I3 %o +on9t )a1e access to 3tp5 %o can c,eate a +o2n oa+ in4 i4e t)is?

  • 8/13/2019 Limbajul HTML Tag Uri

    49/130

    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 ,esto3 %o , 2eb site! T)is tec)ni 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 ina 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!

  • 8/13/2019 Limbajul HTML Tag Uri

    50/130

  • 8/13/2019 Limbajul HTML Tag Uri

    51/130

  • 8/13/2019 Limbajul HTML Tag Uri

    52/130

  • 8/13/2019 Limbajul HTML Tag Uri

    53/130

    8rowser iew

    Co mn 6 Co mn 'Ro2 ' 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++ing8 ;9E;7 0 ;="( olor ode" 2it)in %o , TAG0E tag!

    / 60 able 7ode:

  • 8/13/2019 Limbajul HTML Tag Uri

    54/130

  • 8/13/2019 Limbajul HTML Tag Uri

    55/130

    8rowser iew:

    olumn 1 olumn =

    In t)e 3o o2ing examp e5 t)e 3i,st co mn 2i+t) is set to 'L an+ t)e secon+

    co mn is set to L !

  • 8/13/2019 Limbajul HTML Tag Uri

    56/130

    --GOD@ Q bac4g,o n+-image? , ; youri$age+. g SGOD@ Q bac4g,o n+-,epeat? no-,epeat SGOD@ Q bac4g,o n+-position? cente, S--

  • 8/13/2019 Limbajul HTML Tag Uri

    57/130

  • 8/13/2019 Limbajul HTML Tag Uri

    58/130

    Horizontal Scrolling Text Marquee Browser View

    Bouncing Text Marquee p-B padding right& >p-Bfont family& 5rialBfont si7e& 12p-BW

    (

    < +TDL (

    "otice the te-t highlighted in #old S This is a class name ? made up. Dou can call itwhate er you'd like. +imply add &o'rtext following your selector.

    To put this style into action or call it, simply place the following code within your HTMLwhere you would like the style to be used&

  • 8/13/2019 Limbajul HTML Tag Uri

    103/130

    headings to paragraphs and HTML tables.

    This file might look something like this&

    J*/D Vfont family& 5rialBfont si7e& 1=p-BWH1 Vfont family& IeorgiaBfont si7e& 14p-Bfont weight& boldB color& blueWG V font weight& normalBcolor& blueW

    This file should be sa ed as style.css and uploaded to your ser er where you store yourHTML files.

    Nhen using a style sheet, you must place a link to your style.css file within your HTML between your

  • 8/13/2019 Limbajul HTML Tag Uri

    104/130

    element of that code will be e-plained below, as it is important that you understand whatthese codes are and what they mean.

    Here is the code that you should copy and paste into your te-t editor&

  • 8/13/2019 Limbajul HTML Tag Uri

    105/130

    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-tstep will be to sa e the document into the new folder you created. ?f your new web pagewill be your main or starting page, you should sa e it as index htm or index html , as

    index is the file name most web ser ers will look for when someone types your webaddress into a web browser. +econdary pages should be sa ed using the pages mostrele ant keyword phrase. Kor e-ample, if your page is about dog grooming tips, then youmight sa e your page as dogUgroomingUtips.htm.

    "e-t, place some content in your new web page between the

  • 8/13/2019 Limbajul HTML Tag Uri

    106/130

    each paragraph with the

  • 8/13/2019 Limbajul HTML Tag Uri

    107/130

    This 7s ContentThis is content that others will be able to see when they isit your webpage. Nhencontent is pasted in, it won't ha e any formatting. ?t will ust 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 andunderstand. Fse any article or content that you ha e written, and simply copy and paste itinto the HTML document that you ha e created.

    ?f any of your tags appear within the document when you iew it in your browser, thisusually means that you didn't close a tag that you opened. "ow, you are ready to learnhow to use ++.

    mbedding ascading +tyle +heets within a web page can be done in two ways with the

    code placed between the the

  • 8/13/2019 Limbajul HTML Tag Uri

    108/130

    E+it t)e text in bo + to s it %o , nee+s!

    T&L+= bac(ground: yellow ? +pecifies the background color of the linked te-t.color: blac, +pecified the 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.

    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 embeddingstyle tags between the

  • 8/13/2019 Limbajul HTML Tag Uri

    109/130

    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 yourweb page between the

    Here is how your page should look&

  • 8/13/2019 Limbajul HTML Tag Uri

    110/130

    Jy using the

  • 8/13/2019 Limbajul HTML Tag Uri

    111/130

    )or'atting the Bac(groun" an" )oregroun" !olor of a WebPage 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-adecimalnumbers, and each one represents a color. Kor instance, the he-adecimal for the colorwhite is ;KKKKKK. The he-adecimal is always represented with the ; sign followed by acombination 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 alsooptional. This should only be defined if you'd like a background color other than thedefault 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, theymust be separated with a semicolon.

    ?n our e-ample, we are first defining the background color. Kollowing the backgroundcolor 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.

    http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/css_tutorial/cascading_style_sheets_css_web_page_formatting.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/css_tutorial/cascading_style_sheets_css_web_page_formatting.htm
  • 8/13/2019 Limbajul HTML Tag Uri

    112/130

    )or'atting the Margin of a Web Page with !asca"ing StyleSheets #!SS$

    ?n the ne-t e-ample, we will be defining the web page margins. Type in margin= +;;px .G 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"ingStyle Sheets #!SS$

    "e-t, we need to gi e our fonts more style. Ne are still working in the

  • 8/13/2019 Limbajul HTML Tag Uri

    113/130

  • 8/13/2019 Limbajul HTML Tag Uri

    114/130

  • 8/13/2019 Limbajul HTML Tag Uri

    115/130

    "ow, the paragraphs will be indented fi e spaces, and the spacing between each letterwill 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 pagein ways that HTML doesn't allow. ?n the following lessons, you will learn how tomanipulate other HTML tags with ++.

    ?n HTML, to create a list, you use either the

  • 8/13/2019 Limbajul HTML Tag Uri

    116/130

  • 8/13/2019 Limbajul HTML Tag Uri

    117/130

    a&acti e Vcolor& ;ff2222B te-t decoration& underlinedWa&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 theweb 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 beunderlined, 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&

    < style(

    < head(

  • 8/13/2019 Limbajul HTML Tag Uri

    118/130

    Tables are commonly used in HTML because they define the lay out of the web page.?nstead of ust ha ing a heading and te-t that runs from left to right and top to bottom, wecan ha e pages that ha e a block of te-t here, and another block of te-t o er there, and soon. Jut the use of tables can be ery comple- and time consuming and they aren'tnecessarily search engine friendly. +o, instead of using tables, learn to use ++ classes

    and include the (< style(

    < head(

  • 8/13/2019 Limbajul HTML Tag Uri

    119/130

    < 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, whichwill 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 acodename 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&

  • 8/13/2019 Limbajul HTML Tag Uri

    120/130

    to appear, which in this case is =2p- from the top of the page and 12 pi-els from the leftside. 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 le tcol'mn code name we set up. +ince we' e set our positionas absolute, the ++ will align it ust as we specified.

    The following code should be added to our HTML document&

  • 8/13/2019 Limbajul HTML Tag Uri

    121/130

    < style(

    < head(

  • 8/13/2019 Limbajul HTML Tag Uri

    122/130

    is used for plain HTML documents, while ?/'s are usually used for documents thatcontain 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 theclass. 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 wouldchange .leftcolumn to ;leftcolumn.

    Dou can use either classes or ?/'s with ust about any HTML tag. ?t can be used with the

  • 8/13/2019 Limbajul HTML Tag Uri

    123/130

  • 8/13/2019 Limbajul HTML Tag Uri

    124/130

  • 8/13/2019 Limbajul HTML Tag Uri

    125/130

  • 8/13/2019 Limbajul HTML Tag Uri

    126/130

    bothnone

    cursor urlautocrosshair

    default pointer mo ee resi7ene resi7enw resi7en resi7ese resi7esw resi7es resi7ew resi7e

    5llows you to determine what type of cursorappears on the users screen.

    display noneinline

    block list itemrun incompactmarker tableinline tabletable row grouptable header grouptable footer grouptable rowtable column grouptable columntable celltable caption

    /etermines how an element is displayed, or e en ifit is displayed.

    float leftrightnone

    /etermines where te-t or an image will appearwithin a separate element.

    position staticrelati eabsolutefi-ed

    bottomcliplefto erflowright

    /etermines how an element will be positioned.

  • 8/13/2019 Limbajul HTML Tag Uri

    127/130

    topertical align7 inde-

    isibility isiblehidden

    collapse

    /etermines whether an element is isible, in isible,or collapsed.

    height autolength3

    /etermines the height of an element.

    line height normalnumber length3

    /etermines the space between lines.

    ma- height nonelength

    3

    /etermines the ma-imum height of an element.

    width auto3length

    /etermines the ma-imum width of an element.

    ma- width nonelength3

    /etermines the minimum width of an element.

    min height length3

    /etermines the minimum height of an element.

    min width length3

    /etermines the minimum width of an element.

    font font stylefont ariantfont weightfont si7e line heightfont familycaptioniconmenumessage bo-small captionstatus bar

    /etermines all font properties.

    font family family namegeneric family

    /etermines fonts that will be used. ?f a font is notinstalled on a user's computer, the browser will tryeach font in the font family until one is found.

    font si7e -- small- smallsmallmedium

    /etermines the si7e of the font.

  • 8/13/2019 Limbajul HTML Tag Uri

    128/130

    large- large-- largesmaller larger

    length3font si7ead ustment

    nonenumber

    Fsed to ad ust the font si7e if other elements orfactors change the si7e of it.

    font style normalitalicobliEue

    /etermines the si7e of the fonts.

    font stretch normalwider narrower ultra condensede-tra condensedcondensedsemi condensedsemi e-pandede-pandede-tra e-pandedultra e-panded

    Fsed to shrink or enlarge the span of the fonts.

    font ariant normalsmall caps

    Fsed to cause fonts to be displayed either as fontsin small capital letters or in normal letters.

    font weight normal

    bold bolder lighter 122=22:22822>22422@22C22

    A22

    /etermines the weight or boldness of a font.

    content stringurlcounter#name$counter#name, liststyle type$counters#name,string$

    reates specific content in a document.

  • 8/13/2019 Limbajul HTML Tag Uri

    129/130

    counters#name,string, list style type$attr# $open Euoteclose Euote

    no open Euoteno close EuoteEuotes none

    string string/etermines the type of Euotation marks used.

    list style list style typelist style positionlist style image

    /etermines the style of a list.

    list styleimage

    noneurl

    /etermines what image should be used for a list.

    list style

    position

    inside

    outside

    /etermines whether the list element is on the inside

    or the outside of the list item.list style type nonedisccirclesEuaredecimaldecimal leading 7erolower romanupper romanlower alphaupper alpha

    lower greek lower latinupper latinhebrewarmeniangeorgianc k ideographichiraganakatakanahiragana irohakatakana iroha

    /etermines the style of a list.

    margin margin bottommargin topmargin leftmargin right

    Fsed to determine and set margins on the page.

    outline outline color outline styleoutline width

    /etermines the properties of an outline.

    padding padding top +ets padding properties.

  • 8/13/2019 Limbajul HTML Tag Uri

    130/130

    padding right padding bottom padding left

    te-t color direction

    line heightletter spacingte-t alignte-t decorationte-t indentte-t shadowte-t transformFnicode bidiwhite spaceword spacing

    /etermines te-t properties.

    a &link & isited&focus&ho er &first child&lang&acti e

    /etermines link properties.