Universitatea Tehnic a Moldovei Catedra Automatic i Tehnologii Informaionale

RAPORT
Stagiu de practic Tema: Practic n producie

A efectuat : A verificat:

studenta grupei TI-101 Artiom Lidia lector superior Lisnic Inga

Chiinu 2012

Cuprins
Introducere: ................................................................................................................................................................................. 3 Noiuni introductive: ................................................................................................................................................................... 3 Ce este HTML ?...................................................................................................................................................................... 3 Noiuni de baz ................................................................................................................................................................... 4 Elementele de marcare ........................................................................................................................................................ 5 Tag-uri ................................................................................................................................................................................ 5 Ce este CSS ? .......................................................................................................................................................................... 8 CSS- fonetic de referin ................................................................................................................................................. 12 CSS Selectors.................................................................................................................................................................... 13 Measurement Values......................................................................................................................................................... 15 Ce este JavaScript ................................................................................................................................................................. 16 Elementele de baz ale limbajului .................................................................................................................................... 16 Tipuri de date .................................................................................................................................................................... 16 Funcii ............................................................................................................................................................................... 19 My Web Page ........................................................................................................................................................................... 22 Rezultate ............................................................................................................................................................................... 27 Comncluzie: .............................................................................................................................................................................. 33 Bibliografie: .............................................................................................................................................................................. 33

Tema lucrrii de practic: Crearea unui Web Site Scopul lucrrii:

Introducere:
Importanta unui site. In perioada actual prezenta unui site web pe piata online, tinde s devin tema de activitate a multor companii ce inteleg, necesitatea extinderii propriei afaceri, ctre o piat reprezentat de milioane de potentiali clienti. Astfel, detinerea unei pagini web reprezint calea cea mai usoar de ofertare a noilor clienti. Interactionarea cu vizitatorii site-ului, prezentarea serviciilor, produselor si avantajelor furnizate de compania dvs, poate reprezenta cheia succesului pentru afacerea dvs online, transformand astfel, aceast mic investitie intr-o afacere profitabil pentru compania pe care o reprezentati. Prezenta unui site web pe internet, trebuie sa contureze si s transmit mesajul pe care doriti s-l transmiteti clientului. Proiectarea, dezvoltarea si detinerea unei pagini web are rolul sa stimuleze si s dezvolte afacerea in asa mod ca ea sa devin generatoare de venituri , deci cu alte cuvinte, profitabil. Fie c este vorba despre un simplu site de prezentare sau de un magazin online, puteti creste semnificativ volumul vanzrilor si autorietatea companiei dvs. Pentru c acest lucru s se intample, este important ca site-ul s indeplineasc toate cerintele specifice domeniului de activitate si s se adapteze noilor tendinte conforme cu mediul social actual. Pe scurt, realizarea, optimizarea si promovarea unui site in conditii optime va aduce clientul in firma dumneavoastr, crescand considerabil dimensiunile pietei potentiale pentru afacerea pe care o conduceti. Principalele argumente ale antreprenorilor ce ezit achiziionarea unui site web i a unei identiti virtuale sunt n general bazate pe presupuneri eronate, o pia netestat i probabil o uoar nencredere n tot ceea ce ine de Internet. i totui, studiile de caz i cele de pia arat c orice tara este, chiar i n vreme de criz, din ce n ce mai orientat spre tot ceea ce ine de online. n plus, datorit evoluiei extrem de rapide a tehnologiilor IT i diversificrii impresionante a soluiilor web disponibile, preurile achiziionrii, ntreinerii i promovrii unui site au devenit neglijabile. Astfel, prezena online s-a transformat dintr-un moft, ntr-o necesitate pentru orice companie cu intenii serioase. Aa cum spunea Churchill, Nu e de ajuns c facem totul ct se poate de bine. Cteodat trebuie s facem i ceea ce suntem obligai.. Piaa migreaz spre Internet companiile sunt obligate s fac acest pas i ele pentru a supravieui cererii.

Noiuni introductive:
Ce este HTML ?
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afiate ntr-un browser (sau navigator). Scopul HTML este mai degrab prezentarea informa?iilor paragrafe, fonturi, tabele .a.m.d. dect descrierea semanticii documentului. Specifica?iile HTML sunt dictate de World Wide Web Consortium (W3C). HTML este o form de marcare orientat ctre prezentarea documentelor text pe o singura pagin, utiliznd un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaz mijloacele prin care coninutul unui document poate fi adnotat cu diverse tipuri de metadate i indicaii de redare. Indicaiile de redare pot varia de la decoraiuni minore ale textului, cum ar fi specificarea faptului c un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus, pn la scripturi sofisticate, hri de imagini i formulare. Metadatele pot include informaii despre titlul i autorul documentului, informaii structurale despre cum este mprit documentul n diferite segmente, paragrafe, liste, titluri etc. i informaii cruciale care permit ca documentul s poat fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).

HTML este un format text proiectat pentru a putea fi citit i editat de oameni utiliznd un editor de text simplu. Totui scrierea i modificarea paginilor n acest fel solicit cunotine solide de HTML i este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemntor cu documetele Word, dar cu observaia c aceste programe genereaz un cod HTML care este de multe ori de proast calitate. HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului, wiki-uri iforumuri web genereaz pagini HTML. HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-mail folosesc un editor HTML ncorporat pentru compunerea e-mail-urilor i un motor de prezentare a e-mail-urilor de acest tip. Folosirea email-urilor HTML este un subiect controversat i multe liste de mail le blocheaz intenionat.
Noiuni de baz

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri i au extensia .html sau .htm .n marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> i alta de nchidere </eticheta>, mai exist i cazuri n care nu se nchid, atunci se folosete <eticheta /> browserul interpreteaz aceste etichete afind rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea ntre litere mici i mari). Pagina principala a unui domeniu este fisierul index.html respectiv index.htm Aceast pagin este setat a fi afiat automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afiat pagina www.nume.ro/index.html. Unele etichete permit utilizarea de atribute care pot avea anumite valori: <eticheta atribut="valoare"> ... </eticheta> Componenta unui document HTML este: 1. versiunea HTML a documentului 2. zona head cu etichetele <head> </head> 3. zona body cu etichetele <body> </body> sau <frameset> </frameset> Versiunea HTML poate fi:

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 5

<!DOCTYPE HTML> Toate paginile HTML ncep i se termin cu etichetele <html> i </html>. n interiorul acestor etichete gsim perechile <head>, </head> i <body>, </body>. head conine titlul paginii ntre etichetele <title> i </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi i linkuri ctre fisiere externe (de exemplu scripturi, fiiere de tip CSS sau favicon). Etichetele de tip meta conin cuvinte cheie, descrierea paginii, date despre autor, informaii utile motoarelor de cutare i au urmtorul format: <META NAME="nume" CONTENT="continut"> Exemplu: link ctre un fisier extern CSS: <link rel="stylesheet" type="text/css" href="css.css">

body gzduiete practic toate etichetele afiate de browser pe ecran. Exemplu: o pagin HTML cu titlul Exemplu iar coninutul Coninut pagin <html> <head> <title>Titlu</title> </head> <body> Continut pagina </body> </html> i n HTML poate fi introdus un comentariu, care bineneles nu va fi afiat de browser. Elementele de marcare Mai jos sunt tipurile de elemente de marcare n HTML: Marcare structural. Descrie scopul unui text. De exemplu: <h1>Fotbal</h1> Direcioneaza browserul pentru a reda "Fotbal" ca pe cel mai important titlu. Marcarea structural nu are un anumit stil predefinit, dar cele mai multe browsere web au standardizat modul n care acestea sunt afiate. De exemplu, titlurile importante (h1, h2, etc.) sunt aldine i mai mari dect restul textului.De notat c "h1" este folosit doar o singur dat per pagin deoarece cu el este marcat titlul ei. Marcare pentru prezentare. Descrie cum apare un text, indiferent de funciile sale. De exemplu: <strong>ngroat</strong> Va afia textul "ngroat" cu litere groase, aldine.Not: Html a inceput n ultimii ani s nceap s nu mai foloseasc acest gen de tag-uri pentru c "b" nu d sens paginii, pe cnd tag-ul "strong" (adic strong emphasis) d un neles paginii, i mai important, asemenea tag-uri pentru prezentare doar ncarc o pagin cu informaii i o fac astfel mai greu de ncrcat, iar apoi dac ataezi un document CSS la pagin, o singur modificare la CSS (de ex: de la "font-weight:italic" la "font-weight:bold" va schimba tot textul selectat, i de exemplu, link-urile vor trece de la text nclinat la text ngroat, plus c n CSS avem avantajul de a putea preciza ct de mari sau mici s fie literele n pixeli px, n puncte pt, etc.)avem acelai efect ca i cnd am avea de schimbat toate tag-urile de "i" de pe pagin n tag-uri de "b", munc care chiar i la un website mic este enorm, ce s mai vorbim de unul de genul wikipedia. Aa c dac vrei s ncepei o carier n html sau un hobby (i s avei succes) nu folosii aceste taguri, nu degeaba s-a inventatCSS-ul. Marcare pentru hiperlink. Leag pri ale unui document cu alte documente. De exemplu: <a href="http://ro.wikipedia.org/">Wikipedia Romneasc</a> Va reda Wikipedia romneasc ca hiperlink ctre un URL specificat. Elemente speciale (widget). Creeaz obiecte, cum ar fi butoanele i listele. Doar marcatorii de prezentare (mpreun cu foile de stiluri - CSS) determin cum coninutul din interiorul marcatorului va fi prezentat. Ceilali marcatori spun browserului ce obiecte s redea sau ce funcii s execute.

Tag-uri

HTML Basic Document

<!DOCTYPE html>

<html> <head> <title>Title of document goes here</title> </head> <body> Visible text goes here... </body> </html> Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Smallest Heading</h6>

Text Elements <p>This is a paragraph</p> <br /> (line break) <hr /> (horizontal rule) <pre>This text is preformatted</pre> Logical Styles <em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code> Physical Styles <b>This text is bold</b> <i>This text is italic</i> Links Ordinary link: <a href="http://www.example.com/">Link-text goes here</a> Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a> Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a> A named anchor: <a name="tips">Tips Section</a> <a href="#tips">Jump to the Tips Section</a> Unordered list <ul> <li>Item</li> <li>Item</li> </ul> Ordered list <ol> <li>First item</li> <li>Second item</li> </ol> Definition list <dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl> Tables <table border="1"> <tr> <th>Tableheader</th> <th>Tableheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table> Iframe <iframe src="demo_iframe.htm"></iframe> Forms

<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50" /> <input type="password" /> <input type="checkbox" checked="checked" /> <input type="radio" checked="checked" /> <input type="submit" value="Send" /> <input type="reset" /> <input type="hidden" /> <select> <option>Apples</option> <option selected="selected">Bananas</option> <option>Cherries</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form> Entities &lt; is the same as < &gt; is the same as > &#169; is the same as Other Elements <!-- This is a comment --> <blockquote> Text quoted from a source. </blockquote> <address> Written by W3Schools.com<br /> <a href="mailto:us@example.org">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address> HTML Versions: Since the early days of the web, there have been many versions of HTML: Version Year HTML HTML+ HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 HTML5 XHTML5 1991 1993 1995 1997 1999 2000 2012 2013

Ce este CSS ?
Stilurile CSS au fost recent adaugate in limbajul HTML cu scopul de a adauga mai multe facilitati pentru controlul modului de aparitie al paginii. Incepand cu HTML 4 toate instructiunile de formatare pot fi definite in afara documentului HTML intr-o structura denumita foaie de stil. In literatura de specialitate foile de stil sunt referite de acronimul CSS care vine de la Cascading Style Sheets. Cuvantul Cascading inseamna in cascada si se refera la modul de aplicare al acestor stiluri asupra elementelor din pagina web atunci cand sunt folosite simultan mai multe foi de stil. Avantajele folosirii foilor de stil: *Separarea instructiunilor de formatare de structura documentului HTML *Documentele HTML care folosesc foi de stil pot avea dimensiuni mai mici *Site-uri mai usor de mentinut. Prin folosirea unui set comun de foi de stil pentru toate paginile HTML se poate schimba infatisarea unui site care contine sute de pagini web prin editarea unui singur fisier. Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, deasemenea putem crea un layout (un suoport pentru elementele HTML) personalizat adaugand margine culoare sau imagine de fond si multe altele. In concluzie CSS te poate scapa de multe batai de cap, ajutandute in a mentine codul html cat mai simplu si mai ordonat. Cascading Style Sheets pe numele lui mic CSS se foloseste pentru a personaliza tagurile HTML.. In principiu HTML a fost conceput pentru a marca elementele unei pagini: <html> <head> <title>......</title> </head> <body> <h1>......</h1> <p>........</p> </body> </html> Odata cu introducerea HTML 3.2 au fost introduse si atributele de personalizare a tag-urilor precum "font", "color" etc. A fost atunci cand limbajul de programare HTML a devenit greoi. Fiecare pagina a websitului trebuia luata separat si modificate proprietatile elementelor principale. Aceasta problema a fost rezolvata in versiunea 4.0 a HTML-ului. Toate atributele de personalizare au fost scoase si salvate intr-un fisier extern cu extensia ".css". In felul acesta modificand un singur fisier putem schimba forma in care sunt afisate toate paginile unui website. Putem schimba culoarea textului, fontul, marimea, putem personaliza div-uri, formulare si multe altele.
Same list sorted by Hex values Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 Color Shades Shades Shades Shades Shades Shades Shades Shades Shades Mix Mix Mix Mix Mix Mix Mix Mix Mix

BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen

#FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

Fuchsia Gainsboro C GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine

#FF00FF #DCDCD #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna

#0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen

#C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

CSS- fonetic de referin

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Property azimuth Description Values CSS 2

Seteaz n cazul n care sunetul ar trebui s angle vin de la left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards Sets the cue properties in one declaration Specific un sunet dup ce a fost derulat continutului unui element Specifies a sound to be played before speaking an element's content Sets where the sound should come from cue-before cue-after none url none url angle below level above

cue cue-after cue-before elevation

2 2 2 2

higher lower pause pause-after pause-before pitch Sets the pause properties in one declaration Specifies a pause after speaking an element's content Specifies a pause before speaking an element's content Specifies the speaking voice pause-before pause-after time % time % frequency x-low low medium high x-high 2 2 2 2

pitch-range play-during

Specifies the variation in the speaking number voice. (Monotone voice or animated voice?) Specifies a sound to be played while speaking an element's content auto none url mix repeat number normal none spell-out

2 2

richness speak

Specifies the richness of the speaking voice. (Rich voice or thin voice?) Specifies whether content will render aurally

2 2

speak-header

Specifies how to handle table headers. always Should the headers be spoken before every once cell, or only before a cell with a different header than the previous cell Specifies how to speak numbers Specifies how to speak punctuation characters Specifies the speed of the speaking digits continuous none code number x-slow slow medium fast x-fast faster slower number specific-voice generic-voice number % silent x-soft soft medium loud x-loud

speak-numeral speak-punctuation speech-rate

2 2 2

stress voice-family volume

Specifies the "stress" in the speaking voice Specifies the voice family of the speaking Specifies the volume of the speaking

2 2 2

CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style. The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).

Selector .class #id * element element,elem ent element elem ent element>elem ent element+elem ent [attribute] [attribute=val ue] [attribute~=v alue] [attribute|=va lue] :link :visited :active :hover :focus :first-letter :first-line :first-child :before :after :lang(languag e) element1~ele ment2 [attribute^=v alue] [attribute$=va lue] [attribute*=va lue] :first-of-type ] ]

Example .intro #firstname * p div,p div p div>p div+p [target] [target=_blank [title~=flower] [lang|=en] a:link a:visited a:active a:hover input:focus p:first-letter p:first-line p:first-child p:before p:after p:lang(it) p~ul a[src^="https" a[src$=".pdf"]

Example description SS Selects all elements with class="intro" Selects the element with id="firstname" Selects all elements Selects all <p> elements Selects all <div> elements and all <p> elements Selects all <p> elements inside <div> elements Selects all <p> elements where the parent is a <div> element Selects all <p> elements that are placed immediately after <div> elements Selects all elements with a target attribute Selects all elements with target="_blank" Selects all elements with a title attribute containing the word "flower" Selects all elements with a lang attribute value starting with "en" Selects all unvisited links Selects all visited links Selects the active link Selects links on mouse over Selects the input element which has focus Selects the first letter of every <p> element Selects the first line of every <p> element Selects every <p> element that is the first child of its parent Insert content before the content of every <p> element Insert content after every <p> element Selects every <p> element with a lang attribute value starting with "it" Selects every <ul> element that are preceded by a <p> element Selects every <a> element whose src attribute value begins with "https" Selects every <a> element whose src attribute value ends with ".pdf"

C 1 1 2 1 1 1 2 2 2 2 2 2 1 1 1 1 2 1 1 2 2 2 2 3 3 3 3 3

a[src*="w3sch Selects every <a> element whose src attribute ools"] value contains the substring "w3schools" p:first-of-type Selects every <p> element that is the first <p>

element of its parent :last-of-type :only-of-type :only-child :nth-child(n) :nth-lastchild(n) :nth-oftype(n) :nth-last-oftype(n) :last-child :root :empty :target :enabled :disabled :checked :not(selector) ::selection p:last-of-type p:only-of-type p:only-child p:nth-child(2) p:nth-lastchild(2) p:nth-oftype(2) p:nth-last-oftype(2) p:last-child :root p:empty #news:target input:enabled input:disabled input:checked :not(p) ::selection Selects every <p> element that is the last <p> element of its parent Selects every <p> element that is the only <p> element of its parent Selects every <p> element that is the only child of its parent Selects every <p> element that is the second child of its parent Selects every <p> element that is the second child of its parent, counting from the last child Selects every <p> element that is the second <p> element of its parent Selects every <p> element that is the second <p> element of its parent, counting from the last child Selects every <p> element that is the last child of its parent Selects the documents root element Selects every <p> element that has no children (including text nodes) Selects the current active #news element (clicked on a URL containing that anchor name) Selects every enabled <input> element Selects every disabled <input> element Selects every checked <input> element Selects every element that is not a <p> element Selects the portion of an element that is selected by a user 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

Measurement Values
Unit % in cm mm em Description percentage inch centimeter millimeter 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses one ex is the x-height of a font (x-height is usually about half the fontsize) pt pc px point (1 pt is the same as 1/72 inch) pica (1 pc is the same as 12 points) pixels (a dot on the computer screen)

ex

Ce este JavaScript JavaScript este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcionaliti n paginile web, codul Javascript din aceste pagini fiind rulat de ctre browser. Limbajul este binecunoscut pentru folosirea sa n construirea siturilor web, dar este folosit i pentru acesul la obiecte ncastrate (embedded objects) n alte aplicaii. A fost dezvoltat iniial de ctre Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, i denumit n final JavaScript. n ciuda numelui i a unor similariti n sintax, ntre JavaScript i limbajul Java nu exist nicio legtur. Ca i Java, JavaScript are o sintax apropiat de cea a limbajului C, dar are mai multe n comun cu limbajul Self dect cu Java. Pn la nceputul lui 2005, ultima versiune existent a fost JavaScript 1.5, care corespunde cu Ediia a 3-a a ECMA-262, ECMAScript, cu alte cuvinte, o ediie standardizat de JavaScript. Versiunile de Mozilla ncepnd cu 1.8 Beta 1 au avut suport pentru E4X, care este o extensie a limbajului care are de a face cu XML, definit n standardul ECMA-357. Versiunea curent de Mozilla, 1.8.1 (pe care sunt construite Firefox i Thunderbird versiunile 2.0) suport JavaScript versiunea 1.7. Schimbarea numelui din LiveScript n JavaScript s-a fcut cam n acelai timp n care Netscape ncorpora suport pentru tehnologia Java n browserul web Netscape Navigator. Microsoft a implementat limbajul JavaScript sub numele de JScript, cu o serie de modificri i extensii fa de implementarea Netscape. Pe platforma Windows, JScript este unul din limbajele executabile de ctre Windows Script i, deci, poate fi folosit pentru scriptarea aplicaiilor ce suport Windows Script, de exemplu Internet Explorer, sau chiar sistemul de operare Windows. Elementele de baz ale limbajului Comentarii Sintaxa unui comentariu este aceeai ca i n C++ i multe alte limbaje: // Scurt, o linie de comentariu / * Acesta este un lung, multi-linie de comentariu despre script-ul meu. Mai, ntr-o zi minunat * / / * Comentarii / * nu pot fi imbricate * / Eroare de sintaxa * / Tipuri de date Nedefinit Valoarea de "undefined" este atribuit la toate variabilele neiniializate, i, de asemenea, ntr-un context boolean, valoarea undefined este considerat o valoare de fals. var test ; // variabila declarata, dar nu este definita Null Spre deosebire de nedefinit, nul este de multe ori setat pentru a indica faptul c ceva a fost declarat, dar a fost definit pentru a fi gol. ntr-un context boolean, valoarea nul este considerat o valoare de fals n JavaScript. String Un string (sau ir) n Javascript este o secven de caractere cuprins ntre ghilimele duble sau single. var greeting = "Hello, world!" ; var anotherGreeting = 'Greetings, people of Earth.' ;

Putei accesa caractere individuale dintr-un ir utiliznd charAt metoda (furnizate de String.prototype ). Aceasta este metoda preferat atunci cnd accesarea de caractere individuale din cadrul unui ir, pentru c, de asemenea, funcioneaz non-moderne browsere: var h = greeting. charAt ( 0 ) ; n browsere moderne, caractere individuale din cadrul unui ir pot fi accesate (ca siruri de caractere, cu doar un singur caracter), prin notaia matrice ca: var h = greeting [ 0 ]; Cu toate acestea, siruri de caractere JavaScript sunt imuabile : greeting [ 0 ] = "H" ; // Nu are efect. Aplicarea operatorul de egalitate ("==="), pentru dou iruri returneaza true daca siruri de caractere au acelai coninut, ceea ce nseamn: de aceeai lungime i aceleai cazuri (pentru alfabete). Astfel: var x = "world"; var compare1 = ( "Hello, " + x === "Hello, world" ) ; // Acum, compare1 conine adevrat. var compare2 = ( "Hello, " + x === "hello, world" ) ; // Acum, compare2 conine ... // ... fals, deoarece ... // ... primele caractere ... // ... de ambii operanzi ... // ... nu sunt de acelai tip. Nu putei utiliza citate de acelai tip n interiorul citate cu excepia cazului n care folosii secvene escape. var x = '"Hello, world!" he said.' // bine.. var x = "" Hello , world ! " he said." // Nu e bine.. var x = " \" Hello, world! \" he said." // care acioneaz prin nlocuirea "cu \"! Este posibil de a crea un ir utiliznd String constructor: var greeting = new String ( "Hello, world!" ) ; Aceste obiecte au o metod valueOf care ntoarce irul de primitiv nfurat n ele: var s = new String ( "Hello !" ) ; typeof s ; // este 'object'. typeof s. valueOf () ; // este "string". Egalitatea de valori ntre dou String obiecte nu se comport ca i primitive de coarde: var s1 = new String ( "Hello !" ) ; var s1 = new String ("Salut!"); var s2 = new String ( "Hello !" ) ; var s2 = new String ("Salut!"); s1 === s2 ; // este fals, deoarece acestea sunt dou obiecte distincte. s1. valueOf () === s2. valueOf () ; // este adevrat.

Variabile Variabilele n standard, JavaScript nu au tip ataat, i orice valoare poate fi stocat n orice variabil. Variabilele sunt declarate cu un var declaraie, mai multe variabile pot fi declarate la o dat. Un identificator trebuie s nceap cu o liter, de subliniere (_), sau semnul dolar ($); caractere ulterioare pot fi, de asemenea, cifre (0-9). Deoarece JavaScript este case-sensitive, scrisori include caracterele "A" la "Z" (cu majuscule) i caracterele "A" la "Z" (cu litere mici). Variabilele declarate n afara oricrei funcii sunt globale. n cazul n care o variabil este declarat ntr-un domeniu de aplicare mai mare, ea poate fi accesat de ctre funciile apelate de domeniu. Aici este un exemplu de declaraii variabile i valori globale: var x = 0 ; // o variabil global, deoarece nu este n nici o funcie function f () { var z = 'foxes' , r = 'birds' ; // 2 variabile locale m = 'fish' ; // variabil global, deoarece nu a fost declarat nainte de nicieri function child () { var r = 'monkeys' ; // Aceast variabil este local i nu afecteaz "birds" r a functiei mam. z = 'penguins' ; // Funcia copil este capabil de a accesa variabilele din funcia mam } twenty = 20 ; //Aceast variabil este declarat pe urmtoarea linie, dar utilizabil oriunde n funcia child () ; return x ; //Putem folosi x aici, deoarece este global } Cnd JavaScript ncearc s rezolve un identificator, se pare, n funcie de domeniul de aplicare local. Dac acest identificator nu este gsit, se pare, n funcia de exterior, care a declarat una local, i aa mai departe de-a lungul lanului de domeniul de aplicare pn cnd ajunge la domeniul global n cazul n care variabila este global. Dac nu este nc gsit, Javascript va ridica o excepie ReferenceError. Atunci cnd atribuirea unui identificator, Javascript face exact acelai proces pentru a prelua acest identificator, cu excepia faptului c n cazul n care nu se gsete n domeniul global, se va crea "variabila", ca o proprietate a obiectului la nivel global. Declararea unei variabile (cu cuvntul cheie var), n afara corpului oricrei funcii, va crea, de asemenea, o variabil nou la nivel mondial. Mesaje de eroare Mesaje de eroare personalizate pot fi create folosind clasa Error: throw new Error ("Ceva a mers prost."); Imbricate n instruciunile condiionate, aceste instane pot nlocui blocurile try/catch: var emailAddress = ("Va rugam sa introduceti adresa de e-mail:", ""); if ( ! emailAddress || emailAddress. length === 0 ) { throw new Error ("Ne pare ru. Trebuie s introducei o adres de e-mail pentru a continua"); }

Funcii Fiecare funcie n Javascript este o instanta a obiectului Function: //x,y este argumentul. 'return x+y' este corpul funciei, care este ultimul n lista de argumente. var add = new Function ( 'x' , 'y' , 'return x+y' ) ; var t = add ( 1 , 2 ) ; alert ( t ) ; //3 Funcia add de mai sus poate fi, de asemenea, definit folosind urmtorul model. function add ( x , y ) { return x + y ; } var t = add ( 1 , 2 ) ; alert ( t ) ; //3 O instan a unei funci are proprieti i metode. function subtract ( x , y ) { return x - y ; } alert ( subtract. length ) ; //2,expected amount of arguments. alert ( subtract. toString () ); /* function subtract(x, y) { return x - y; } */ Operatori Operatorul "+" este suprancrcat: acesta este folosit pentru concatenarea irurilor de caractere i pentru operaia aritmetic de adunare. Acest lucru poate cauza probleme atunci cnd din greeal se amestec iruri de caractere i numere. Problema se poate evita prin conversia unui ir de caractere numeric la un numr. // Concatenarea a 2 iruri de caractere alert ( 'He' + 'llo' ) ; // afieaz Hello // Adun dou numere alert ( 2 + 6 ) ; // afieaz 8 // Concatenarea dintre o expresie numeric i una de tip un ir de caractere alert ( 2 + '2' ) ; // afieaz 22 alert ( '$' + 3 + 4 ) ; // afieaz 34 $, dar $ 7 poate fi de ateptat

alert ( '$' + ( 3 + 4 ) ) ; // afieaz $7 alert // Conversia unui ir la un numr alert ( + '2' ==== 2 ) ; // afieaz true alert ( + 'Hello' ) ; // afieaz Nan <pre> ====Operatori aritmetici==== JavaScript accept urmtorii operatori aritmetici binari: * + Adunare * - cdere * * nmulirea * / mprirea (returneaz o valoare n virgul mobil) * &% Modulo (returneaz restul ntreg) JavaScript accept urmtorii operatori aritmetici unari: * + Conversia unar de la string la numr * - Negare unar(inverseaz semnul) * ++ Increment (poate fi prefix sau postfix) * -- Decrement (poate fi prefix sau postfix) <pre> var x = 1 ; alert ( ++ x ) ; // afieaz: 2 alert ( x ++ ) ; // afieaz: 2; apoi x devine 3 alert ( x ) ; // afieaz: 3 alert ( x -- ) ; // afieaz 3; apoi x devine 2 alert ( x ) ; // afieaz: 2 alert ( -- x ) ; // afieaz: 1 Atribuirea += Adaug i atribuie -= Scade i atribuie *= nmulete i atribuie /= mparte i atribuie %= Modulo i atribuie Atribuirea de tipuri primitive

var x = 1 ; x *= 3 ; alert ( x ) ; // afieaz: 3 x /= 3 ; alert ( x ) ; // afieaz: 1 x -= 1 ; alert ( x ) ; // afieaz: 0 Comparaie = Egal != Nu este egal > Mai mare dect >= Mai mare sau egal cu

< Mai mic dect <= Mai mic sau egal cu ==== Identice (egale i de acelai tip) !=== Nu sunt identice Atunci cnd se compar variabile de tipuri diferite, chiar dac valorile lor sunt aceleai: var obj1 = {a: 1}; var obj2 = {a: 1}; var obj3 = obj1; alert(obj1 === obj2); //false alert(obj3 === obj1); //true Operatori logici JavaScript ofer patru operatori logici: negatia unara ( NOT = !a ) disjuncia binar ( OR = a || b ) conjuncia binar ( AND = a && b ) condiionala ternar ( c ? t : f )

My Web Page
Pentru crearea Site-lui nostru, noi trebuie sa stim exact ceea ce dorim, sa facem o mica schita a design-lui , adica aspectul pe care dorim sa-l avem ca rezultat. Pentru ca sa obtinem rezultatele dorite intr-un timp mai scurt, si ca sa intelegem mai bine ceea ce facem este foarte important sa pastram curatenia. Daca site-ul nostru va contine imagini, trebuie mai intai sa colectam toate imaginele intr-un folder numit images , iar daca situl nostru va dispune de o galerie foto, atunci vom avea nevoie si de o mapa gallery. De asemenea, numele fiecarei imagini, pagini, document css, sau altei surse trebuie sa ne sugereze provenienta, sau ce contine aceasta sursa.

Prima pagini a Site-lui trebuie sa ne vorbeasca deja despre continutul intregului site. De asemene este necesar ca prima pagina sa fie prietenoasa cu utilizatorii , sa capteze atentia, si sa motiveze vizitatorul ca sa acceseze si celelalte pagini, pentru detalii si contact. In continul paginii din lucrarea prezentata aici , in partea de sus, top se contine si denumirea firmei de mobila, care are prefixul Mob , ceea ce ne face automat sa ne gandim la mobila. Cea mai importanta parte din pagina este continuta de o galerie de imagini, care sunt alese cu bun gust, din diferite ramuri ale catalogului cu scopul de a face o reclama deosebita firmei.

Codul sursa:
<!DOCTYPE html><!-- HTML5 --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" />

<!--[if IE]><meta http-equiv="ImageToolbar" content="False" /><![endif]--> <link rel="stylesheet" type="text/css" href="style/template.css" media="screen" /> <link rel="stylesheet" type="text/css" href="style/menu.css" media="screen" /> <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="style/ie.css" media="screen" /><![endif]--> <script type="text/javascript" src="res/swfobject.js"></script> <script type="text/javascript" src="res/jquery.js?1939"></script> <script type="text/javascript" src="res/x5engine.js?1939"></script> <script type="text/javascript" src="res/x5cartengine.js?1939"></script> <script type="text/javascript" src="res/l10n.js?1939_634829121409597622"></script> <script type="text/javascript" src="res/x5settings.js?1939_634829121409597622"></script>

<title>WebDesign </title> <link rel="stylesheet" type="text/css" href="pcss/index.css" media="screen" /> </head> <body> <div id="imPage"> <div id="imHeader"> <h1 class="imHidden">WebDesign </h1> </div> <a class="imHidden" href="#imGoToCont" title="Skip the main menu">Go to content</a> <a id="imGoToMenu"></a><p class="imHidden">Main menu</p> <div id="imMnMn" class="auto"> <ul class="auto"> <li id="imMnMnNode0" class="imMnMnCurrent"> <a href="index.html"> <span class="imMnMnFirstBg"> <span class="imMnMnTxt"><span class="imMnMnImg"></span>Home </span> </span> </a> </li> <li id="imMnMnNode3"> <a href="about-us.html"> <span class="imMnMnFirstBg"> <span class="imMnMnTxt"><span class="imMnMnImg"></span>About us</span> </span> </a> </li> <li id="imMnMnNode6"> <span class="imMnMnFirstBg"> <span class="imMnMnTxt"><span class="imMnMnImg"></span>Galerie<span class="imMnMnLevelImg"></span></span>

</span> <ul class="auto"> <li id="imMnMnNode7" class="imMnMnFirst"> <a href="living-room.html"> <span class="imMnMnBorder"> <span class="imMnMnTxt"><span class="imMnMnImg"></span>Living Room</span> </span> </a> </li> <li id="imMnMnNode8" class="imMnMnMiddle"> <a href="dormitoare.html"> <span class="imMnMnBorder"> <span class="imMnMnTxt"><span class="imMnMnImg"></span>Dormitoare</span> </span> </a> </li> <li id="imMnMnNode9" class="imMnMnLast"> <a href="bucatarii.html"> <span class="imMnMnBorder"> <span class="imMnMnTxt"><span class="imMnMnImg"></span>Bucatarii</span> </span> </a> </li> </ul> </li> <li id="imMnMnNode5"> <a href="contacts.html"> <span class="imMnMnFirstBg"> <span class="imMnMnTxt"><span class="imMnMnImg"></span>Contacts</span> </span> </a> </li> </ul><script type="text/javascript">x5engine.imQueue.push_init("x5engine.utils.imPreloadImages(['menu/in dex_h.png','menu/aboutus_h.png','menu/contacts_h.png','menu/galerie_h.png','menu/sub.png','menu/sub_h.png','menu/ sub_f.png','menu/sub_f_h.png','menu/sub_l.png','menu/sub_l_h.png','menu/sub_m.png','menu/su b_m_h.png','res/imLoad.gif','res/imClose.png'])",false);</script> </div> <div id="imContentGraphics"></div> <div id="imContent"> <a id="imGoToCont"></a> <div style="float: left;"> <div id="imCell_1" class="imGrid[0, 0]"><div id="imCellStyleGraphics_1"></div><div id="imCellStyle_1"> <div id="imObjectGallery_1"

style="width: 942px; height: 480px;"><div id="imObjectGalleryContainer_1"></div></div><script type="text/javascript">var flashvars = {containerId: "imObjectGallery_1", filexml: "gallery/gallery.xml"}; var params = {quality: "high", bgcolor: "#ffffff", play: "true", loop: "true", wmode: "transparent", scale: "noscale", menu: "true", devicefont: "false", salign: "lt", allowscriptaccess: "sameDomain", allowFullScreen: "true"}; var attributes = {id: "imObjectGalleryContentMovie_1", name: "imObjectGalleryContentMovie_1", align: "middle"}; swfobject.embedSWF("res/imGallery.swf", "imObjectGalleryContainer_1", "885", "480", "10.0.0", "res/expressInstall.swf", flashvars, params, attributes);</script></div></div> </div> <div id="imBtMn"><a href="index.html">Home </a> | <a href="aboutus.html">About us</a> | <a href="living-room.html">Galerie</a> | <a href="contacts.html">Contacts</a> | <a href="imsitemap.html">General Site Map</a></div> <div class="imClear"></div> </div> </div> <div id="imFooterBg"> <div id="imFooter"> </div> </div> <span class="imHidden"><a href="#imGoToCont" title="Read this page again">Back to content</a> | <a href="#imGoToMenu" title="Read this site again">Back to main menu</a></span> </body> </html>

Fiecare imagine care apare pe pagina de pornire, adica Home page, trebuie sa fie pastrata in mapa gallery atat cu dimensiunea marita, cat si cu cea micsorata. Deci, o data ce am vazut o imagine in partea drapta a site-ului, si am facut click pe ea, urmad ca pe fundal sa apra imaginea marita, nu insemna ca imaginea sa marit, ci ca imaginea mica re un rol de linck, iar la butonarea uneia din imaginile mici, se va deschide imaginea marita.

Rezultate :

Pentru protectia codului sursa, este bine ca sa nu se contina tot codul in pagina de index, de aceea vom crea niste fisiere gallery.xml pentru fiecare galerie care este accesata din meniu. Astfel pentru rularea galeriei din Home page vom crea fisierul gallery.xml care va contine codul sursa:
<gallery width="767" height="480"> <video> <integrate>WebSiteX5</integrate> <cpindex>15397261</cpindex> </video> <options> <guicolor>0x000000</guicolor> <background>0x000000</background> <font>Verdana</font> <fontcolor>0xffffff</fontcolor> <guialpha>1</guialpha> <fontsize>8</fontsize> <autoplay>true</autoplay> <tposition>right</tposition> <tsize>118</tsize> <tnumber>4</tnumber> <music /> <buttons>true</buttons> <random>true</random> <fullscreen>false</fullscreen> </options> <slides> <slide url="gallery/b1.jpg" type="image" effect="" autoplay="5000" thumb="gallery/b1_thumb.png">

</slide> <slide url="gallery/b2.jpg" type="image" effect="" autoplay="5000" thumb="gallery/b2_thumb.png"> </slide> <slide url="gallery/b3.jpg" type="image" effect="" autoplay="5000" thumb="gallery/b3_thumb.png"> </slide> <slide url="gallery/d1.jpg" type="image" effect="" autoplay="5000" thumb="gallery/d1_thumb.png"> </slide> <slide url="gallery/d2.jpg" type="image" effect="" autoplay="5000" thumb="gallery/d2_thumb.png"> </slide> <slide url="gallery/d3.jpg" type="image" effect="" autoplay="5000" thumb="gallery/d3_thumb.png"> </slide> <slide url="gallery/d4.png" type="image" effect="" autoplay="5000" thumb="gallery/d4_thumb.png"> </slide> <slide url="gallery/d7.jpg" type="image" effect="" autoplay="5000" thumb="gallery/d7_thumb.png"> </slide> <slide url="gallery/d8.jpg" type="image" effect="" autoplay="5000" thumb="gallery/d8_thumb.png"> </slide> <slide url="gallery/d9.jpg" type="image" effect="" autoplay="5000" thumb="gallery/d9_thumb.png"> </slide> <slide url="gallery/l1.jpg" type="image" effect="" autoplay="5000" thumb="gallery/l1_thumb.png"> </slide> <slide url="gallery/l2.jpg" type="image" effect="" autoplay="5000" thumb="gallery/l2_thumb.png"> </slide> <slide url="gallery/l4.jpg" type="image" effect="" autoplay="5000" thumb="gallery/l4_thumb.png"> </slide> <slide url="gallery/l5.jpg" type="image" effect="" autoplay="5000" thumb="gallery/l5_thumb.png"> </slide> <slide url="gallery/l9.jpg" type="image" effect="" autoplay="5000" thumb="gallery/l9_thumb.png"> </slide> <slide url="gallery/l10.jpg" type="image" effect="" autoplay="5000" thumb="gallery/l10_thumb.png"> </slide> </slides> </gallery>

Fisierul CSS al paginii,contine informatia despre site, stilurile site-ului, iar in acest

caz poarta aceeasi denumire cu pagina (nu e obligatoriu, dar e mai bine asa, pentru ca s pastreaza ordine fisierilor, si subintelesul lor), doar ca are extensia .css . Pentru pagina de start, adica index, fisierul poarte denumirea: index.css, si are codul sursa: #imCell_1 { display: block; position: relative; overflow: hidden; width: 948px; min-height: 486px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; borderleft: 3px solid transparent; border-right: 3px solid transparent;} #imCellStyle_1 { position: relative; width: 942px; min-height: 480px; padding: 3px 3px 3px 3px; text-align: center; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 2;} #imCellStyleGraphics_1 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;} #imContent #imObjectGallery_1 a:link, #imContent #imObjectGallery_1 a:hover, #imContent #imObjectGallery_1 a:visited, #imContent #imObjectGallery_1 a:active { border: none; background-color: transparent; text-decoration: none; }

Pentru pagina Contacts, este un pic mai complicat, deoarece intalnim casete de introducere a textului cu numr de caractere limitat, adresa de email, si password, dar cel ami important este expedierea measajului. Fisierul poarte denumirea: contacts.css, si are codul sursa:
h2#imPgTitle {float: left; margin-left: 6px; margin-right: 6px; width: 942px;} #imCell_1 { display: block; position: relative; overflow: hidden; width: 471px; min-height: 223px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; borderleft: 3px solid transparent; border-right: 3px solid transparent;} #imCellStyle_1 { position: relative; width: 465px; min-height: 217px; padding: 3px 3px 3px 3px; text-align: center; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 2;} #imCellStyleGraphics_1 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;} #imObjectForm_1 { font-family: Tahoma, sans serif; font-size: 8pt; text-align: left; } #imObjectForm_1 label, #imObjectForm_1 .checkbox, #imObjectForm_1 .radiobutton { color: #000000; font-family: Tahoma, sans serif; font-size: 8pt; } #imObjectForm_1 fieldset { margin: 0; padding: 10px 0 0 0; } #imObjectForm_1 fieldset.first { margin: 0; padding: 0; } #imObjectForm_1 div.legend { color: #000000; font-family: Tahoma, sans serif; font-size: 8pt; border-bottom: 1px solid #808080; } #imObjectForm_1 input, #imObjectForm_1 select, #imObjectForm_1 textarea { margin: 2px 0 3px; color: #000000; border: 1px solid #808080; background-color: #FFFFFF; font-family: Tahoma, sans serif; font-size: 8pt; padding-left: 1px; padding-right: 1px;} #imObjectForm_1 input[type="checkbox"], #imObjectForm_1 input[type="radio"] { border: 0; background-color: transparent; } #imObjectForm_1 input.imFormFocus, #imObjectForm_1 select.imFormFocus, #imObjectForm_1 textarea.imFormFocus { color: #000000; background-color: #FFFFE0; } #imObjectForm_1 input[type="checkbox"].imFormFocus, #imObjectForm_1 input[type="radio"].imFormFocus { border: 0; background-color: transparent; } #imObjectForm_1 input.imFormMark, #imObjectForm_1 textarea.imFormMark { border: 1px solid #FF0000; } #imObjectForm_1 input[type="submit"], #imObjectForm_1 input[type="reset"], #imObjectForm_1 input[type="button"] { padding: 0; cursor: pointer; color: #000000; border: 1px solid

#808080; background-color: #D3D3D3; vertical-align: top; line-height: 8px;height: 20px; } #imCell_2 { display: block; position: relative; overflow: hidden; width: 471px; min-height: 223px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; borderleft: 3px solid transparent; border-right: 3px solid transparent;} #imCellStyle_2 { position: relative; width: 465px; min-height: 217px; padding: 3px 3px 3px 3px; text-align: center; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 2;} #imCellStyleGraphics_2 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;} #imObjectForm_2 { font-family: Tahoma, sans serif; font-size: 8pt; text-align: left; } #imObjectForm_2 label, #imObjectForm_2 .checkbox, #imObjectForm_2 .radiobutton { color: #000000; font-family: Tahoma, sans serif; font-size: 8pt; } #imObjectForm_2 fieldset { margin: 0; padding: 10px 0 0 0; } #imObjectForm_2 fieldset.first { margin: 0; padding: 0; } #imObjectForm_2 div.legend { color: #000000; font-family: Tahoma, sans serif; font-size: 8pt; border-bottom: 1px solid #808080; } #imObjectForm_2 input, #imObjectForm_2 select, #imObjectForm_2 textarea { margin: 2px 0 3px; color: #000000; border: 1px solid #808080; background-color: #FFFFFF; font-family: Tahoma, sans serif; font-size: 8pt; padding-left: 1px; padding-right: 1px;} #imObjectForm_2 input[type="checkbox"], #imObjectForm_2 input[type="radio"] { border: 0; background-color: transparent; } #imObjectForm_2 input.imFormFocus, #imObjectForm_2 select.imFormFocus, #imObjectForm_2 textarea.imFormFocus { color: #000000; background-color: #FFFFE0; } #imObjectForm_2 input[type="checkbox"].imFormFocus, #imObjectForm_2 input[type="radio"].imFormFocus { border: 0; background-color: transparent; } #imObjectForm_2 input.imFormMark, #imObjectForm_2 textarea.imFormMark { border: 1px solid #FF0000; } #imObjectForm_2 input[type="submit"], #imObjectForm_2 input[type="reset"], #imObjectForm_2 input[type="button"] { padding: 0; cursor: pointer; color: #000000; border: 1px solid #808080; background-color: #D3D3D3; vertical-align: top; line-height: 8px;height: 20px; } #imCell_3 { display: block; position: relative; overflow: hidden; width: 471px; min-height: 317px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; borderleft: 3px solid transparent; border-right: 3px solid transparent;} #imCellStyle_3 { position: relative; width: 465px; min-height: 309px; padding: 3px 3px 5px 3px; text-align: center; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 2;} #imCellStyleGraphics_3 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;} #imTextObject_3 { line-height: 1px; font-size: 1pt; font-style: normal; color: black; fontweight: normal; } #imTextObject_3 a { color: inherit; } #imTextObject_3 ul { list-style: disc; margin: 0px; padding: 0px; } #imTextObject_3 ul li { margin: 0px 0px 0px 15px; padding: 0px; font-size: 9pt; lineheight: 19px;} #imTextObject_3 table { margin: 0 auto; padding: 0; border-collapse: collapse; borderspacing:0; line-height: inherit; } #imTextObject_3 table td { padding: 4px 3px 4px 3px; margin: 0px; line-height: 1px; fontsize: 1pt; } #imTextObject_3 p { margin: 0; padding: 0; } #imTextObject_3 img { border: none; margin: 0px 0px; vertical-align: text-bottom;} #imTextObject_3 img.fleft { float: left; margin-right: 15px; vertical-align: baseline;}

#imTextObject_3 img.fright { float: right; margin-left: 15px; vertical-align: baseline;} #imTextObject_3 .imUl { text-decoration: underline; } #imTextObject_3 .ff0 { font-family: "Tahoma"; } #imTextObject_3 .ff1 { font-family: "Tahoma"; } #imTextObject_3 .ff2 { font-family: "Times New Roman"; } #imTextObject_3 .ff3 { font-family: "Arial"; } #imTextObject_3 .cf1 { color: #000000; } #imTextObject_3 .cf2 { color: #FFFFFF; } #imTextObject_3 .cf3 { color: #000000; } #imTextObject_3 .fs20 { vertical-align: baseline; font-size: 10pt; line-height: 20px; } #imTextObject_3 .fs24 { vertical-align: baseline; font-size: 12pt; line-height: 23px;} #imTextObject_3 .cb1 { background-color: #000000; } #imTextObject_3 .cb2 { background-color: transparent; } #imTextObject_3 .cb3 { background-color: #000000; } #imCell_4 { display: block; position: relative; overflow: hidden; width: 471px; min-height: 317px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; borderleft: 3px solid transparent; border-right: 3px solid transparent;} #imCellStyle_4 { position: relative; width: 465px; min-height: 311px; padding: 3px 3px 3px 3px; text-align: center; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 2;} #imCellStyleGraphics_4 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;} #imTextObject_4 { line-height: 1px; font-size: 1pt; font-style: normal; color: black; fontweight: normal; } #imTextObject_4 a { color: inherit; } #imTextObject_4 ul { list-style: disc; margin: 0px; padding: 0px; } #imTextObject_4 ul li { margin: 0px 0px 0px 15px; padding: 0px; font-size: 9pt; lineheight: 19px;} #imTextObject_4 table { margin: 0 auto; padding: 0; border-collapse: collapse; borderspacing:0; line-height: inherit; } #imTextObject_4 table td { padding: 4px 3px 4px 3px; margin: 0px; line-height: 1px; fontsize: 1pt; } #imTextObject_4 p { margin: 0; padding: 0; } #imTextObject_4 img { border: none; margin: 0px 0px; vertical-align: text-bottom;} #imTextObject_4 img.fleft { float: left; margin-right: 15px; vertical-align: baseline;} #imTextObject_4 img.fright { float: right; margin-left: 15px; vertical-align: baseline;} #imTextObject_4 .imUl { text-decoration: underline; } #imTextObject_4 .ff0 { font-family: "Tahoma"; } #imTextObject_4 .ff1 { font-family: "Times New Roman"; } #imTextObject_4 .ff2 { font-family: "Tahoma"; } #imTextObject_4 .ff3 { font-family: "Times New Roman"; } #imTextObject_4 .ff4 { font-family: "Arial"; } #imTextObject_4 .cf1 { color: #000000; } #imTextObject_4 .cf2 { color: #FFFFFF; } #imTextObject_4 .cf3 { color: #000000; } #imTextObject_4 .fs20 { vertical-align: baseline; font-size: 10pt; line-height: 20px; } #imTextObject_4 .fs24 { vertical-align: baseline; font-size: 12pt; line-height: 23px;} #imTextObject_4 .cb1 { background-color: #000000; } #imTextObject_4 .cb2 { background-color: transparent; } #imTextObject_4 .cb3 { background-color: #000000; }

Comncluzie:
In perioada actual prezenta unui site web pe piata online, tinde s devin tema de activitate a multor companii ce inteleg, necesitatea extinderii propriei afaceri, ctre o piat reprezentat de milioane de potentiali clienti. Astfel, detinerea unei pagini web reprezint calea cea mai usoar de ofertare a noilor clienti. Proiectarea, dezvoltarea si detinerea unei pagini web are rolul sa stimuleze si s dezvolte afacerea in asa mod ca ea sa devin generatoare de venituri , deci cu alte cuvinte, profitabil. Pentru executarea unei pagini web trebuie sa cunoastem cateva medii de generare a codului, in functie de conditiile de compatibilitate cu aplicatiile moderne. De asemnea pentru estetica unei pagini este necesar ca sa ne informam in privinta unui design reusit, care sa fie capabil sa cuprinda o varietate mai larga de preferinte ale clientilor, pentru diferite varste.

Bibliografie:
1. 2. 3. 4. 5. 6. 7. http://w3schools.com/ Manuela Carpen, Afrodita Gioca: <HTML 4.0 / XHTML 1.0>, Editura Timpul Iai 2010 Manuela Carpen, Daniela Carda: CSS , Editura Timpul Iai 2010 http://htmlbook.ru/ http://ru.html.net/ http://www.w3.org/html/ http://www.w3.org/Style/CSS/