Tutorial CSS începând cu HTML + CSS

Cuprins
• • • • • • • • • •

1. Introducere în HTML 2. Adăugarea culorilor 3. Adăugarea fonturilor 4. Bara de navigare 5. Stiluri de link-uri 6. Linie orizontală 7. Stilul Extern CSS 8. Crearea fişierelor separate 9. Rezultatul final Lecturi viitoare

Acest tutorial se adresează celor care vor să înceapă să utilizeze formatul CSS şi nu au mai scris niciodată o pagină Web cu acest stil. Astfel vei putea învăţa baza HTML-ului, pentru a fi capabil să realizezi propriile tale pagini web. Nu explică amănunţit formatul CSS, ci doar cum să creezi un fişier HTML, un fişier CSS şi cum pot fi facute aceastea să lucreze împreună. După aceea, se pot utiliza multe alte tutoriale pentru adăugarea altor particularităţi pentru fişierele HTML şi CSS. Sau se pot utiliza programe specializate de editare HTML sau CSS, care ajută la crearea siturilor complexe. La sfârşitul tutorialului, veţi realiza un fişier HTML, o pagină HTML ordonată şi cu culori, totul cu ajutorul limbajului CSS.

Secţiunile ce conţin semnul de “atenţie!” la început indică faptul că acesta este un material cu noţiuni mai avansate faţă de cel din restul textului. Dacă deja eşti familiarizat cu XML, atunci HTML ţi se va părea uşor de învăţat. Vă sfătuim să nu citiţi tot acest tutorial dintr-o dată, ci să petreceţi un sfert sau o jumătate de oră parcurgând câteva lecţii după care să reflectaţi asupra informaţiei citite şi apoi să treceţi la lucru. Pregătire pentru HTML Crearea documentelor în HTML nu este dificilă. Pentru început nu vei avea nevoie decât de Notepad++ şi puţină dedicaţie. Dacă eşti nou în domeniu şi nu ai parcurs încă Ghidul începătorului, este indicat să petreci câteva minute citindul. Pagini Web

1

Paginile web au multe întrebuinţări. Aici sunt explicate câteva dintre argumente:
• • •

Cea mai simplă cale de a răspândii informaţii pe internet O altă formă de a-ţi amplifica afacerea Poţi face cunoscut lumi că ai ceva de spus într-o pagină personală

Cuvinte de reţinut
• • •

Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea această înfăţişare: <tag> Element - este un tag complet, având un <tag> de deschidere şi unul de închidere </tag>. Attribute - este folosit pentru a modifica valoarea unui element în HTML. De obicei un element are mai multe atribute.

Deocamdată trebuie doar să reţii că un tag este o comandă pe care browser-ul o interpretează, că un element este un tag complet iar un atribut personalizează şi modifică un element în HTML.

Step 1: Scrierea unui document HTML
Pentru acest tutorial se va utiliza doar un simplu editor de text, şi anume, Notepad++. Odată înţelese principiile, se pot utiliza alte programe specializate cum ar fi Style Master, Dreamweaver sau GoLive. Dar pentru început, la scrierea primei pagini în format CSS, este bine să nu fie distrasă atenţia de prea multe particularităţi.

Deschide Notepad++ şi copiază următorul cod:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> Pagina mea WEB</TITLE> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1> Pagina mea WEB </H1> <P>Numele meu este (nume student) şi sunt student al Facultatii de Ingineria Sistemelor Biotehnice. <P><img SRC="IMG_1420.jpg" WIDTH="300" HEIGHT="254"> </BODY> </HTML>

Salvează fişierul cu numele PaginaMea.html şi vizualizează-l în Browserul de Internet.

Elemente HTML

2

Poţi pune orice nume doreşti. de obicei în partea din stânga sus. Totusi vreau să mentionez că <head> poate oferi browserului informaţii foarte utile.paragraful propriu-zis.. muzică şi orice altceva). sunt toate elemente ale acestei pagini. paragrafurile.. Se pot însera aici printre altele coduri Javascript sau CSS. Elementul <title> Pentru ca totul să iasă bine trebuie să pui tag-ul title înăuntrul celui de head.tag-ul de închidere. <p> . </p> . Ai puţină răbdare. Dacă vei salva documentul şi vei încerca să dai un refresh la pagina inţială din browser nu vei nota nici o diferenţă. head. aşa că vom discuta despre acest aspect în tutorialele ulterioare. vom trata pe rând toate aceste elemente de conţinut. Ceea ce vei scrie între cele două tag-uri title (<title> şi </title>) va putea fi vizualizat ca şi numele browser-ului. Vei putea vedea titlul după cum am mai spus în partea din stânga sus la marea majoritate a browser-elor Elementul <body> Elementul body este cel care defineşte începerea conţinutului pagini propriu-zise (titluri. Aceasta este structura standard a unui HTML. <html>element. fotografii. linkurile de navigare la dreapta şi la stânga paginii.tag-ul pentru deschiderea unui paragraf. vei putea vedea prima ta pagină web. în continuare vom studia câteva elemente vizibile.</html> Un document HTML întotdeauna va începe şi va termina cu un tag <html> şi respectiv </html>. Deocamdată tot ce trebuie să reţii este că body încapsulează tot conţinutul paginii. 3. Conţinutul elementului . "Head" nu are nici o funcţie vizibilă. Atâta timp cât îl pui între html şi body totul ar trebui să fie OK. Dacă ai făcut totul bine. conţinutul elementului şi tag-ul de închidere. Tot ceea ce se vede. După cum poti vedea în meniul de la stânga. title şi body. 2. ***Nota: Toate paginile web vor avea cel puţin elementele de bază: html. bannerele. 1.Elementele de HTML au multe ranguri. Elementul <head> Elementul <head> este cel care urmează. doar 3 . Un element are trei părţi: un tag de deschidere. paragrafuri.

Main content --> <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile. Tag-ul <li>“List Item” este începutul listei de itemi. • Step 1. <!--Semneaza şi dateaza pagina! --> <address> 25 Aprilie 2009<br> Realizat de mine.html şi vizualizează-l in Browserul de Internet.html">Links</a> </ul> <!-. Tag-ul <p> “Paragraf” 4 .ţine minte că numele descriptive sunt cele mai uşor de găsit ulterior. Browser-ul il va ignora. introduce o lista în care itemi sunt nenumerotati.01. Vizualizează acum toată isprava. acesta este un document HTML versiunea 4. <ul> “Unordered List”. În principiu. Tagul <body> este locul unde se duce textul actual al documenului.html">Home page</a> <li><a href="musings.Site navigation menu --> <ul class="navbar"> <li><a href="index. Deschide Notepad++ şi copiază următorul cod: <html> <head> <title>Primul meu stil de pagina</title> </head> <body> <!-. după care te invit să parcurgi următoarea secţiune.</address> </body> </html> Salvează fişierul cu numele PrimaPagina1.and -->. dar in sfârşit am un stil de pagina.html">My town</a> <li><a href="links. <p>Aici trebuie sa existe mai multe lucruri. exceptand textul din interiorul <!-. chiar daca nu duc nicaieri deocamdata. În tag-urile din exemplu. dar deocamdata nu prea stiu ce. În acest caz. Si am şi link-uri. Prima linie a unui fişier HTML îi spune browser-ului ce tip de HTML este (DOCTYPE înseamnă DOCument TYPE). orice se afla în interiorul acestui tag va fi afisat.html">Musings</a> <li><a href="town. care serveste drept comentariu pentru noi însine.

<ol> va afisa o lista ordonata în timp ce <ul> una neordonata.Liste nenumerotate O lista nenumerotate se creaza cu ajutorul tagului <ul>. Foloseste atributele type şi start pentru a realiza lista cea mai potrivita cerintelor tale.unsorted list.este un. Listele nenumerotate deasemenea sunt de mai multe tipuri şi anume. numere <dl> . buline şi cerculete. care este folosita pentru crearea unui hyperlink. lista de definitii. iar <a>“Anchor“ reprezinta o ancora. Prin punerea tagurilor <li></li> (list item) între tagurile <ol> şi </ol> se semnalizeaza browser-ului elementele listei. pagina nu este chiar aratoasă … 5 .Valoarea standard redata de majoritatea browser-elor sunt bulinele. patratele. iar pentru a realiza o lista de defnitii se foloseste <dl>. • • • <ul> . După cum se poate vedea. HTML pune la dispozitie trei tipuri de liste. Lista ordonata (numerotata) Se foloseste tag-ul <ol>pentru a începe o lista ordonata. buline <ol> . HTML .ordered list.definition list.

Asadar. background-color: #d8da3d } </style> </head> <body> 6 . deoarece Internet Explorer este singurul Browser care suporta valorile RGB în HTML. Dacă se foloseste un browser care nu este Internet Explorer nu se obtine nici un rezultat. HTML . Deschide Notepad++ şi copiază următorul cod: <html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { color: purple. Trebuie să adaugam un element <style> fişierului HTML.Step 2: Adăugarea culorilor Exista trei feluri distincte de a defini o culoare. • Step 2. Vom începe cu un stil de pagină încorporat în interiorul fişierului HTML.Sistemul de culori RGB Acest cod de culori nu este recomandat. De exemplu: black. Am alaturat mai jos numele de culori care sunt suportate în HTML. vom realiza fişiere separate HTML şi CSS. deoarece face mai usoara utilizarea aceluiasi stil de pagină pentru mai multe fişiere HTML: trebuie indicat stilul paginii doar odata. Cea mai simpla metoda este aceea de a numi culorile (în engleza). urmatoarele doua (GG) sunt verde (green). iar ultimele doua (BB) sunt albastru (blue). vom pastra totul într-o singura pagină. Blue. Liniile ce trebuie adaugate sunt marcate cu rosu (liniile 4 – 8). red. Primele doua caractere (RR) reprezinta valoarea rosu (red). RGB este prescurtarea pentru: Red. Sistemul hexazecimal este o reprezentare de 6 caractere de culoare. vom merge înapoi în ferestra editorului şi adaugam urmatoarele linii în elementul head al fişierului HTML. Green. Dar pentru acest pas. Separarea fişierelor este benefică. şi blue. Fiecare dintre aceste culori poate lua orice valoare între 0 (nu coloreaza deloc) şi 255 (în totalitate acea culoare). Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este de încredere şi este compatibil nu numai în aplicatiile web. şi cu putina practică. green. Mai tarziu. Cu toate aceste te asigur că odata cu trecerea timpului. white. il vei întelege pe deplin. Stilul paginii va fi în interiorul acestui element.Sistemul de culori hexazecimal Sistemul hexazecimal este destul de dificil la prima vedere. HTML .

Site navigation menu --> <ul class="navbar"> <li><a href="index. 2. S-au stabilit două proprietăţi. care specifică ce aspect al traseului este reglat. Stilul paginilor în format CSS este realizat de reguli.</address> </body> </html> Salvează fişierul cu numele PrimaPagina2. 7 . valoarea ('purple' şi '#d8da3d'). dar in sfârşit am un stil de pagina.<!-. selectorul (în exemplu: “body”). Exemplul arată că regulile pot fi combinate.html">My town</a> <li><a href="links. Si am şi link-uri. Cea de-a treia linie seteaza în rosu culoarea textului iar urmatoarea linie seteaza în galben-verde culoarea fundalului. am scris "body".html">Musings</a> <li><a href="town. A doua linie spune că stilul este adaugat elementului “body”. Fiecare regulă are trei părţi: 1. 'color' şi 'background-color' sunt ambele proprietăţi). <!--Semneaza şi dateaza pagina! --> <address> 25 Aprilie 2009<br> Realizat de mine. doar o dată şi am pus proprietăţile şi valorile împreună. <p>Aici trebuie sa existe mai multe lucruri. proprietatea (în exemplu. Pentru mai multe informaţii despre Selectoare. a se vedea capitolul 2 din Lie & Bos. care spune browser-ului care parte a documentului este afectată de regulă. chiar dacă nu duc nicaieri deocamdata. Prima linie introdusă spune că acesta este un stil de pagină şi de aceea este scris în format CSS (“text/css”).html şi vizualizează-l în Browserul de Internet.Main content --> <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile. care dă valoarea proprietăţii stilului.html">Links</a> </ul> <!-. 3. dar deocamdata nu prea stiu ce. astfel încât am putut realiza două reguli separate: body { color: purple } body { background-color: #d8da3d } dar din moment ce ambele reguli afectează elementul “body”.html">Home page</a> <li><a href="musings.

Deci.) un fundal explicit. este de a face distincţie între fonturi pentru diferite elemente ale paginii.) Cum arată un browser de pagini web. că au fost adăugate unele culori. acum. culoarea de fond a întregului document.. şi "face" pentru a personaliza textul. Culorile pot fi specificate în CSS în mai multe moduri. (Vom adăuga alte culori mai târziu. adresa . pe care îl vom seta cu font "Helvetica". 8 . Foloseşte atributele "size". Nu am dat nici unuia din celelalte elemente (p. hai să setam textul cu un font "Georgia". în general se foloseşte Css-ul pentru a stabili atributele textului..Culoarea de fond a elementului “body”va fi. Proprietatea "culoare" setează culoarea textului pentru elementul “corp”. în mod implicit nu vor avea nici unul (sau: va fi transparent). cu excepţia cazului în care în mod explicit aceste proprietăţi sunt suprascrise. li. moştenesc aceasta culoare. astfel încât. În general tag-urile "font" şi "basefont" nu se folosesc prea mult. în timp ce codurile hexazecimale permit peste 16 milioane de culori."color". Step 3: Adăugarea fonturilor Tag-ul <font> este folosit pentru a modifica tipul de text. iar toate celelalte elemente din interiorul “corpului”.Există aproximativ 140 de nume de culori. mărimea şi culoarea. Adding a touch of style explică mai multe despre aceste coduri. de asemenea. cu excepţia celui din rubrica H1. Acest exemplu arată două dintre ele: prin nume ( "violet") şi prin codul hexazecimal ( "# d8da3d"). Foloseste tag-ul <basefont> pentru a seta culoarea. Un alt lucru care este uşor de făcut. mărimea şi stilul întregului tău text.

nu puteţi fi niciodată sigur ce fonturi au pe computerele lor cititorii dumneavoastră. şi dacă nici una dintre aceste nu lucrează. chiar daca nu duc nicaieri deocamdata.html">Home page</a> <li><a href="musings. dar deocamdata nu prea stiu ce. SunSans-Regular. sans-serif } </style> </head> <body> <!-. browser-ul are posibilitatea de a alege orice alt font care este mai mic decât serif. şi.html">Links</a> </ul> <!-. Geneva. dacă tot nu sunt. Deschide Notepad++ şi copiază următorul cod:: <html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { font-family: Georgia.Pe Web. dar in sfârşit am un stil de pagina. atunci browser-ul mai poate utiliza orice alte font cu serifs.html">My town</a> <li><a href="links. <!--Semneaza şi dateaza pagina! --> <address> 25 Aprilie 2009<br> Realizat de mine. Arial şi SunSans-Regular sunt destul de asemănătoare că formă.Site navigation menu --> <ul class="navbar"> <li><a href="index. Geneva. Si am şi link-uri. Times New Roman sau Times.</address> </body> </html> 9 . sunt. "Times New Roman". Times. aşa că vom adăuga unele alternative: dacă Georgia nu este disponibil.Main content --> <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile. de asemenea foarte bune. <p>Aici trebuie sa existe mai multe lucruri. Dacă Helvetica este absent. Arial.html">Musings</a> <li><a href="town. În editorul de text se adaugă următoarele linii (liniile 6-7 şi 10-12): • Step 3. color: purple. serif. background-color: #d8da3d } h1 { font-family: Helvetica.

deoarece "site-ul Web" realizat până în prezent constă doar 10 .. Şi această pagină trebuie să aibă de asemenea unul. Step 4: Adăugarea unui meniu de navigare Lista din partea de sus a paginii HTML este menită să devină un meniu de navigare. Acum.. Dacă salvaţi fişierul din nou şi apăsaţi pe "Reîncărcare" în browser nu ar trebui să fie acum fonturi diferite pentru rubrica H1 şi alte texte. pentru că este un pic mai interesant decât cel de la început . Noi îl vom pune pe partea stângă. Meniul este deja în pagina HTML.html şi vizualizează-l în Browserul de Internet. Multe site-uri Web au un fel de meniu pe partea de sus sau pe partea laterală a paginii.Salvează fişierul cu numele PrimaPagina3. Legăturile din această listă nu funcţionează. textul principal are un alt font faţă de rubrica H1. Acesta este lista <ul> în partea de sus.

html">Musings</a> <li><a href="town. Deschide Notepad++ şi copiază următorul cod: <html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { padding-left: 11em.html">Home page</a> <li><a href="musings. serif.Main content --> <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile.html">My town</a> <li><a href="links. Există şi alte modalităţi de a face acest lucru. în meniu nu ar trebui să fie orice legături.K. left: 1em. pentru scopurile noastre. La un adevarat site Web. veţi găsi mai multe şabloane gata de execuţie. sans-serif } </style> </head> <body> <!-. "left" şi "top" (pentru a deplasa meniul).html">Links</a> </ul> <!-. background-color: #d8da3d } ul. chiar daca nu duc nicăieri deocamdata. "Times New Roman".într-o singură pagină. Proprietăţile formatului CSS pe care le folosim pentru aceasta sunt "padding-left" (pentru a muta corpul de text) şi "position". Si am şi link-uri. dar asta nu contează acum. În fereastra editorului. top: 2em. 11 . Deci. Dar acesta e O. <p>Aici trebuie sa existe mai multe lucruri. color: purple. Dacă vă uitaţi pe "coloana" sau "schema" de pe pagina Learning CSS. desigur. dar deocamdata nu prea stiu ce.navbar { position: absolute. pentru a face loc pentru meniu. width: 9em } h1 { font-family: Helvetica. Geneva. dar in sfârşit am un stil de pagina. SunSans-Regular. Times.Site navigation menu --> <ul class="navbar"> <li><a href="index. font-family: Georgia. Arial. adăugaţi următoarele linii la fişierul HTML (liniile 6 şi 11-15): • Step 4. avem nevoie să trecem lista mai la stânga şi să mutăm restul de text un pic la dreapta.

deoarece aceasta poate să se adapteze în mod automat fontului pe care cititorul se întâmplă să-l utilizeze. Dacă salvaţi fişierul din nou şi il reîncărcăţi în browser. care este în prezent în partea stângă a acestuia în loc de mai sus. atunci "2em" este de 24 de puncte. Acum deja pare mult mai interesant. se spune că elementul “ul” este poziţionat independent de orice alt text care vine înainte sau după în document iar "left" şi "top" indică faptul că aceea este pozitia. În cazul în care meniul este afişat cu un font de 12 puncte.html şi vizualizează-l în Browserul de Internet. Majoritatea browserelor au un meniu pentru creşterea sau reducerea dimensiunii fonturilor. În acest caz. “Em”este o unitate foarte utilă în CSS. ar trebui să aibă în prezent lista de link-uri în partea stânga a textului principal. În 'position: absolute' . nu? Textul principal a fost mutat mai la dreapta. precum şi lista de link-uri.<!--Semneaza şi dateaza pagina! --> <address> 25 Aprilie 2009<br> Realizat de mine:</address> </body> </html> Salvează fişierul cu numele PrimaPagina4. 2em de la început şi 1em din partea stângă a ferestrei. 12 .

3em. doar pentru că putem. "Times New Roman". serif. margin: 0.5em 0. Arial. background-color: #d8da3d } ul. în locul în care au fost bulinele.navbar { list-style-type: none.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } </style> </head> <body> <!-. Deschide Notepad++ şi copiază următorul cod: <html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { padding-left: 11em. Să adăugăm un stil pentru acesta. position: absolute. deci haideţi să adăugăm.Site navigation menu --> 13 .Step 5: Stiluri de linkuri Meniul de navigare încă arată că o listă. color: purple. top: 2em. SunSans-Regular. Vom elimina bulinele din listă şi vom muta elementele în stânga. în loc de un meniu. de asemenea: albastru pentru link-urile pe care utilizatorul nu le-a văzut încă şi violet pentru link-urile deja vizitate (liniile 12-14 şi 22-32): • Step 5. Geneva. (De ce? Fără nici un motiv.) Nu am spus ce culori ar trebui să fie pentru link-uri. padding: 0. De asemenea.navbar li { background: white. left: 1em. font-family: Georgia. vom da fiecărui element propriul fundal alb şi un pătrat negru. Times. margin: 0. border-right: 1em solid black } ul. sans-serif } ul. padding: 0. width: 9em } h1 { font-family: Helvetica.

De obicei. violet pentru pagini pe care leaţi văzut deja. chiar daca nu duc nicaieri deocamdata. Pentru a face diferenţa între link-urile vizitate şi nevizitate. CSS prevede două "pseudo-clase" (:link şi :visited). browser-ul arată hyperlink-urile subliniate şi cu culori.<ul class="navbar"> <li><a href="index. În HTML. 14 . astfel încât ca să se specifice tipul de culori. culorile sunt similare cu ceea ce am specificat aici: albastru pentru link-uri către pagini care nu au fost vizitate încă (sau vizitate cu mult timp în urmă). Tradiţional. <!--Semneaza şi dateaza pagina! --> <address> 25 Aprilie 2009<br> Realizat de mine:</address> </body> </html> Salvează fişierul cu numele PrimaPagina5. <p>Aici trebuie sa existe mai multe lucruri. Ele sunt denumite "pseudo-clase" pentru a le deosebi de clasele de atribute care apar în HTML direct. de clasa = "navbar" în exemplul nostru.html">Musings</a> <li><a href="town. hiperlegăturile sunt create cu <a> elemente. Si am şi link-uri.html">My town</a> <li><a href="links.html">Home page</a> <li><a href="musings. de exemplu. avem nevoie să adăugam o regulă de stil pentru "a".html">Links</a> </ul> <!-. dar deocamdata nu prea stiu ce.Main content --> <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile.html şi vizualizează-l în Browserul de Internet. dar in sfârşit am un stil de pagina.

După cum se va vedea. Rezultatul final. font-family: Georgia. este o regulă pe orizontală creată pentru a separa textul de semnătura din partea de jos. Folosită cu iscusinţă poate da rezultate destul de neaşteptate. în plus pe stilul de pagină. "Times New Roman".Step 6: Adăugarea unei linii orizontale În general se foloseste tag-ul <hr/> pentru a crea o linie orizontală. tot ceea ce face acest tag este să deseneze o linie orizontală separând diferite zone ale conţinutului sau pur şi simplu decorează pagina. Vom utiliza "border-top" pentru a adăuga o linie punctată deasupra elementului <address> (liniile 33-36): • Step 6. Acest tag este similar celui de linebreak <br/>. 15 . Times. Deschide Notepad++ şi copiază următorul cod: <html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { padding-left: 11em. serif.

Main content --> <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile. SunSans-Regular. <p>Aici trebuie sa existe mai multe lucruri.navbar { list-style-type: none. Geneva. margin: 0. border-right: 1em solid black } ul. dar deocamdata nu prea stiu ce. padding-top: 1em. margin: 0.3em. chiar daca nu duc nicaieri deocamdata. position: absolute.5em 0.html">Musings</a> <li><a href="town.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em. width: 9em } h1 { font-family: Helvetica. padding: 0. border-top: thin dotted } </style> </head> <body> <!-. Si am şi link-uri.Site navigation menu --> <ul class="navbar"> <li><a href="index.navbar li { background: white. padding: 0. background-color: #d8da3d } ul.color: purple. left: 1em. <!--Semneaza şi dateaza pagina! --> <address> 25 Aprilie 2009<br> Realizat de mine:</address> </body> </html> 16 .html">Links</a> </ul> <!-. dar in sfârşit am un stil de pagina. Arial.html">Home page</a> <li><a href="musings. sans-serif } ul. top: 2em.html">My town</a> <li><a href="links.

font-family: Georgia. Step 7: Salvarea stilului paginii într-un fişier separat Stilurile definite în interiorul unui bloc <style>... 2. Acum stilul nostru de pagină este complet.html şi vizualizează-l în Browserul de Internet. vom vedea cum se salvează stilul paginii într-un fişier separat. Deschide Notepad++ şi copiază următorul cod: body { padding-left: 11em. În fişierul HTML care utilizează stilurile definite în fişierul creat la punctul 1. Stilurile definite din fişierul CSS extern se activează ca şi cum ar fi stiluri definite în fişierul HTML curent într-un bloc <style>..atributul "href" având ca valoare adresa URL a fişierului creat la punctul 1.</style> pot fi transferate într-un fişier extern existând astfel posibilitatea asocierii lui mai multor fişiere HTML. .navbar { 17 .Salvează fişierul cu numele PrimaPagina6. nu şi formatului CSS. Dar. În prezent avem un fişier HTML cu un stil de pagină încorporat.css". background-color: #d8da3d } ul. Apoi. Nu copiaţi şi <style> </ style>. Se crează un fişier care să conţină numai descrierea stilurilor şi se salvează cu extensia ". Pentru a crea un fişier pagină de stil avem nevoie un alt fişier de text gol... color: purple.</head> o etichetă <link>.. ar trebui să aibă acum pagina de stil completă.</style>... • Step 7. se include în blocul <head>. "Times New Roman". Nu există o metodă mai bună decât copierea paginii de stil în fiecare fişier: dacă am pune în pagina de stil întrun fişier separat. toate paginile pot puncta aceasta. Apoi cut şi paste tot ce este în interiorul elementului <style> din fişierul HTML în noua fereastră. astfel ca şi alte pagini să folosească acest stil de pagină. Pentru a utiliza un stil definit într-un fişier extern se procedează astfel: 1.</style>.atributul "rel" cu valoarea "stylesheet". Noua fereastră redactată. . fără ca aceşti delimitatori să fie incluşi. probabil.atributul "type" cu valoarea "text/css". am dori mai multe pagini cu acelaşi stil de pagină. Times. Conţinutul acestui fişier coincide cu conţinutul unui bloc <style>. având trei atribute: . Puteţi alege "New" din meniul File din editor. Acestea aparţin HTML. dacă site-ul nostru a crescut. serif. pentru a crea o fereastră goală.

pagina de stil salvata ca "StilulMeu. padding: 0. padding-top: 1em. 18 .css. margin: 0.figure p { text-align: center. margin: 0. Când alegeţi "Save As . } div.scaled { width: 100%. border-top: thin dotted } h3 {text-shadow: 0.html. font-size: smaller. } Salvează fişierul cu numele StilulMeu. } img. asiguraţi-vă că este în acelaşi director / folder ca PrimaPagina. padding-top: 10em.3em.list-style-type: none.figure1 { float: left.1em #333} div. padding: 0.css". } div. width: 35%. border: thin silver solid. margin: 0.1em 0.5em. width: 9em } h1 { font-family: Helvetica. Geneva." din meniul File. font-style: italic. font-style: italic. border-right: 1em solid black } ul.5em 0. Arial. padding: 0. position: absolute.. font-size: smaller. top: 2em. left: 1em.banner{ margin-top: 10em.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em.navbar li { background: white.5em.. sans-serif } ul. SunSans-Regular. text-indent: 0.

html">Links</a> </ul> <!-.html şi vizualizează-l în Browserul de Internet. <!--Semneaza şi dateaza pagina! --> <address> 25 Aprilie 2009<br> Realizat de mine. după cum urmează (linia 4): Iată un fişier HTML cu un CSS extern: • Deschide Notepad++ şi copiază următorul cod: <html> <head> <title> Primul meu stil de pagina </title> <link rel="stylesheet" href="StilulMeu. nu ar trebui să vedeţi nici o schimbare: pagina este în acelaşi stil.</address> </body> </html> Salvează fişierul cu numele PrimaPagina7.css" şi deoarece nu este menţionat directorul.Site navigation menu --> <ul class="navbar"> <li><a href="index. dar in sfârşit am un stil de pagina. se găseşte în fişierul numit "StilulMeu. dar deocamdata nu prea stiu ce. Dacă salvaţi fişierul HTML şi-l reîncărcaţi în browser. browser-ul va căuta în acelaşi director unde a găsit de fişierul HTML. chiar daca nu duc nicaieri deocamdata. stilul provine dintr-un fişier extern. Aceasta va spune browser-ului că pagina de stil. Stergeţi tot de la tag-ul <style> până la </ style> şi inclusiv eticheta şi se realizează înlocuirea acestuia cu un element <link>. 19 . Si am şi link-uri. dar acum. <p>Aici trebuie sa existe mai multe lucruri.Acum du-te înapoi la fereastra cu codul HTML.html">My town</a> <li><a href="links.html">Musings</a> <li><a href="town.Main content --> <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile.html">Home page</a> <li><a href="musings.css"> </head> <body> <!-.

Step 8: Crearea fişierelor separate de legatură • Step 8.html">Pasiuni</a> <li><a href="OrasulMeu.Site navigation menu --> <ul class="navbar"> <li><a href="PrimulMeuSite.ro/">Links</a> </ul> 20 .pub.html">Home page</a> <li><a href="Pasiuni.html">Orar</a> <li><a href="CV. Deschide Notepad++ şi copiază următorul cod: <html> <head> <title> Orasul Meu</title> <link rel="stylesheet" href="StilulMeu.pdf">Curriculum Vitae</a> <li><a href="http://isb.html">Orasul meu</a> <li><a href="Orar.css"> </head> <body> <!-.

...jpg" alt="St../...jpg" width="300" height="200" alt="Photo "> <p>Scale model of the romanian village </p> </div> <div class="banner"> <p> <a href=".w3./"><img alt="W3C" src=".../TR/">Tech.html">Orasul meu</a> <li><a href="Orar./">Style</a> <a href=".reports</a> <a href="../.html">Pasiuni</a> <li><a href="OrasulMeu. Tropez"> <p>Saint Tropez and its fort in the evening sun<p/> <a href="http://www.html">Curriculum Vitae</a> <li><a href="http://isb./Consortium/Translation/">Translations</a> <a href="../... • Deschide Notepad++ şi copiază următorul cod: <html> <head> <title> Pasiuni</title> <link rel="stylesheet" href="StilulMeu..&nbsp../.ro/">Links</a> </ul> <div class="figure"> <p><img src="eiffel././Consortium/Activities">Activities</a> <a href="..././Icons/w3c_home"></a> <a href=".pub.<!-.ot-saint-tropez.html">Orar</a> <li><a href="CV./Help/siteindex">Site index</a> <a href=".com/">Apaşa aici</a> </div> </body> </html> Salvează fişierul cu numele OrasulMeu././.org/">Search</a> <em>Nearby:</em> <a href=".../Status">Software</a> <a href="http://search./..html şi vizualizează-l în Browserul de Internet..Main content --> <h1>Acesta este orasul meu</h1> <p>Bine ati venit in Orasul Meu! <div class="figure1"> <p><img class="scaled" src="st-tropez./.jpg" width="116" height="200" alt="Eiffel tower"> <p>Scale model of the Eiffel tower in Parc Mini-France</p> <p><img src="Photo./.html">Home page</a> <li><a href="Pasiuni../.././.css"> </head> <body> <!-./.Site navigation menu --> <ul class="navbar"> <li><a href="PrimulMeuSite...././CSS/">CSS</a> 21 .

html şi vizualizează-l în Browserul de Internet./Programare </td> <td> Desen tehnic/Programare </td> 22 . • Deschide Notepad++ şi copiază următorul cod: <html> <head> <title>Orarul meu</title> <link rel="stylesheet" href="StilulMeu.tricks</a> </div> </body> </html> Salvează fişierul cu numele Pasiuni.css"> </head> <body> <!-.Site navigation menu --> <ul class="navbar"> <li><a href="PrimulMeuSite.pub.html">Curriculum Vitae</a> <li><a href="http://isb. </td> <td> Programare </td> <td> T.ro/">Links</a> </ul> <h1> Orar grupa 714 </h1> <p> Acesta este programul meu de scoala! <table <col <col <col <col <col <col width="100%" border="1"> align="center"></col> align="center"></col> align="center"></col> align="center"></col> align="center"></col> align="center"></c> <thead color="green"> <tr> <th> Ora </th> <th>Luni</th> <th>Marti</th> <th>Miercuri</th> <th>Joi</th> <th>Vineri</th> </tr> </thead> <tbody color="blue" height="50px"> <tr align="center"> <td> 08.M.00-10.html">Pasiuni</a> <li><a href="OrasulMeu.00 </td> <td> &nbsp.<a href="./">tips&nbsp.&nbsp.html">Orasul meu</a> <li><a href="Orar.&amp.html">Orar</a> <li><a href="CV.html">Home page</a> <li><a href="Pasiuni. materialelor – curs </td> <td> T.

00 </td> <td> T.</tr> <tr align="center"> <td> 10.00 </td> <td> Mecanica </td> <td> PEDAGOGIE -curs (op) </td> <td>&nbsp. </td> <td> Mecanica . </td> <td> &nbsp. M. </td> <td> &nbsp. </tdd> </tr> <tr align="center"> <td> 16.00 </td> <td> Desen tehnic</td> <td> Fizica </td> <td> Analiza matematica II – curs <td> &nbsp. </tdd> </tr> </tbody> <tfoot color="red"> <tr> <td> </td> <td> </td> </tr> </tfoot> </table> </body> </html> </td> 23 . P.M.00-20. </tdd> </tr> <tr align="center"> <td> 18.curs </tdd> </tr> <tr align="center"> <td> 12. </td> <td> T. – curs </tdd> </tr> <tr align="center"> <td> 14.00-18.P.</td> <td>Analiza matematica </td> <td> &nbsp.</td> <td> &nbsp.00-12.00-14.00 </td> <td> Sport</td> <td>&nbsp. </td> <td> Engleza </td> <td> &nbsp.00 </td> <td> &nbsp. </td> <td>&nbsp. </td> <td>&nbsp.00-16. </td> <td> &nbsp. </td> <td> Fizica I – curs</td> <td>&nbsp.

dar este posibil să fie necesar să le schimbaţi un pic mai întâi…!!!). depinde de provider-ul vostru de Internet.Salvează fişierul cu numele Orar.html">Orasul meu</a> 24 . Rezultatul final Următorul pas este de a pune toate fişierele realizate în legatură pe site-ul Web. Step 9: Rezultatul Final • Step 9.html">Home page</a> <li><a href="Pasiuni.html">Pasiuni</a> <li><a href="OrasulMeu. (Bine.Site navigation menu --> <ul class="navbar"> <li><a href="PrimulMeuSite. Deschide Notepad++ şi copiază următorul cod: <html> <head> <title> Primul meu site WEB </title> <link rel="stylesheet" href="StilulMeu. Dar cum o veţi face.css"> </head> <body> <!-.html şi vizualizează-l în Browserul de Internet.

Alte informaţii.html şi vizualizează în Browser-ul de Internet.pdf">Curriculum Vitae</a> <li><a href="http://isb. sau Dave Raggett's intro to CSS. incluzând mai multe tutoriale.Main content --> <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p> Nu mai lipsesc imaginile. <P><img SRC="DSCN2824. 25 .html">Orar</a> <li><a href="CV_meu. Si am şi link-uri. in sfârşit am un stil de pagina.jpg" WIDTH="300" HEIGHT="254"> </p> <!-.Semneaza şi dateaza pagina --> <address> 25 Aprilie 2009<br> <font color="WHITE"><marquee direction="left" style="background:purple">Realizat de Andreea Cristea</marquee></font> </address> <form method="get" action="mailto:adresa_mea@yahoo.ro/">Links</a> </ul> <!-. <p>Aici trebuie sa existe mai multe lucruri. se găsesc pe pagina learning CSS . dar deocamdata nu prea stiu ce.<li><a href="Orar.pub.com" > <p>Nume</p> <input type="text" name="autor" size="24" class="form" id="input1" /> <p>URL</p> <input type="text" name="url_autor" value="http://" size="24" class="form" id="input2" /> <p>Adresa de mail</p> <input type="text" name="email_autor" size="24" class="form" id="input3" /> <p>Comentariu</p> <textarea name="comentariu" rows="4" cols="40" class="form" id="input4"></textarea> <input type="hidden" name="id_site" value="646" /> <input type="submit" value="Trimite email " /> </form> </body> </html> Salvează fişierul cu numele PrimulMeuSite. Lecturi viitoare Pentru introducerea în formatul CSS. vezi chapter 2 din Lie & Bos.