smaranda.belciug@inf.ucv.

ro Laborator 1 Tehnologii Web si Programare Client Server

! Aa NU !

smaranda.belciug@inf.ucv.ro

grafic foarte complex interfaa tip revist

De ce NU? se downloadeaz foarte greu sunt destul de dificil de modificat i de updatat pagina are meniul n josul paginii, dar nu este vizibil deoarece pagina este mai mare dect fereastra browser-ului, deci utilizatorul trebuie s foloseasc scroll-ul pentru a-l vedea.

! Aa DA!

De ce DA? design bun uor de creat i de actualizat n HTML uor de navigat

smaranda.belciug@inf.ucv.ro

Procesul de design n 5 pai o o o o o Definire Design Dezvoltare Testare i Lansare Mentenan

Pasul 1. Definire. Pasul 1 trebuie s fie o perioad de cercetare, unde se definesc scopurile afacerii i se ncearc s se neleag nevoile clienilor crora le este destinat pagina. n aceast faz trebuie strnse ct mai multe informaii.

Tips & Tricks F o lista! Utilizatorul trebuie s se poat nregistra Abilitatea de a putea folosi log in / log out S se poat face actualizari la pagin zilnic Adaug prioriti: 1 trebuie neaprat s aib, 2 ar fi drgu dac ar avea, 3 ar putea fi adugat mai trziu

Pasul 2. Design. Cnd cumperi sau primeti o jucrie cadou etichetat necesit asamblare, i dai seam c ai de a face cu treab care necesit folosirea creierului. Majoritatea oamenilor pierd cam o jumtate de or i ncearc s asambleze jucria far s citeasc manualul cu instruciuni. Partea de design a unei pagini Web este ansa ta de a scrie manualul de instruciuni, nainte de a te apuca s aranjezi pixelii pe ecran.

Pasul 3. Dezvoltarea. Aici ajungem la partea n care ncepem s scriem codul HTML pentru ca pagina noastra s prind via.

smaranda.belciug@inf.ucv.ro

La fel ca o moned o pagin Web are dou fee: una drgu pe care o vede toat lumea i codul HTML care o face s funcioneze.

Pasul 4. Testarea i lansarea. nainte de a lansa un site online trebuie s te asiguri c totul funcioneaz. Este timpul pentru testare si debugging!

Pasul 5. Mentenan. Dup ce site-ul a fost lansat online urmeaz partea de mentenan, deci ntreinerea lui. Pe lnga a avea grij s nu apar erori, coninutul site-ului trebuie schimbat din cnd n cnd.

smaranda.belciug@inf.ucv.ro

(X)HTML i CSS

De reinut! HTML HyperText Markup Language CSS Cascading Style Sheets HTML fundaia unei pagini Web Grafica, coninutul alte informaii sunt crmizile paginii Web CSS i spune paginii Web cum trebuie s arate toate acestea Fiierele HTML care produc o pagin Web sunt doar nite fiiere text, la fel ca i fiierele XHTML i CSS

Hypetext Anumite instruciuni n HTML permit unor linii text (adic un link) s indice ctre un alt loc din cyberspace. Aceste linii se numesc hyperkinks. Hyperlink-urile sunt ceea ce formeaz World Wide Web-ul. n browser ele apar cu culoarea albastr i sunt subliniate. Dac le apsm ne conduc ctre altceva. Hypertext sau nu, o pagin Web este un fiier text, deci deschide un editor de texte ca Notepad sau TextEdit pentru a ncepe lucrul la pagina ta.

smaranda.belciug@inf.ucv.ro

Atenie! Nu folosii editoare de text cum ar fi WordPad sau MS Word pentru a scrie cod HTML, deoarece ele pot introduce alte linii de cod n pagina Web, linii de care nu ai nevoie i pe care nu le vrei. Markup Browserele Web au fost special create pentru scopul de a citi instruciuni HTML (cunoscute i sub denumirea de markup) i pentru a afia pagina Web rezultat din aceste instruciuni. Markup triete n fiierul text pentru a da ordine browserului. Browser Browserele sunt folosite pentru a afia paginile Web. Servere Web Paginile tale HTML nu sunt foarte bune dac nu le ari i altora. Serverele Web fac acest lucru posibil. Un server Web este un computer care: Se conecteaz la Internet Ruleaz software Web-server Rspunde la cererile browserelor Web pentru paginile Web Anatomia unui URL Web este format din miliarde de resurse, i se poate ajunge la fiecare dintre ele. Locaia exact a unei resurse este cheia pentru a face legtura cu ea. Far adresa exact (Uniform Resource Locator, sau URL), nu poi folosi Address bar-ul din browser pentru a vizita pagina Web dorit. URL-ul este sistemul standard de adresare pentru resursele Web. Fiecare resurs (pagin Web, site sau fiier individual) are un URL unic. URL-ul lucreaz exact ca o adres postal. Mai jos avem anatomia unui URL:

Protocol: specific protocolul urmat de browser pentru a cere un fiier. Protocolul pentru paginile Web este: http:// (aa ncep n general toate URLurile) Domain: indic site-ul Web general (n cazul de fa www.sun.com) unde se gsete fiierul. Un domeniu poate s aib cteva fiiere (ca o pagina Web personal) sau milioane de fiiere (ca site-uri corporatiste). Path: numete secvena de directoare care trebuie urmat pentru a ajunge la fiierul cutat. Filename: specific ce fiier din cale trebuie accesat de browser.

smaranda.belciug@inf.ucv.ro Prile componente ale unui (X)HTML Urmtoarea parte va ridica misterul lui X. Aceast seciune va arata: Diferenele dintre HTML i XHTML Cum este scris HTML-ul (sintaxa) Reguli Cele mai importante pri de markup ale HTML-ului i XHTML-ului Cum s foloseti cel mai corect i cel mai bine capabilitile (X)HTMLului

HTML i XHTML: Care e diferena? HTML este HyperText Markup Language, o notaie care a aprut la sfritul anilor 80, nceputul anilor 90. HTML este acum consacrat n numeroase specificaii ale World Wide Web Consortium (W3C). Ultima specificaie HTML a fost finalizat In 1999. Cnd punem X n faa lui HTML avem XHTML-ul, o versiune nou, mbuntit a HTML-ului, bazat pe eXtensible Markup Language (XML). HTML-ul are niste neregulariti care pot crea probleme software-ului care citete documentele HTML. Pe de alt parte XHTML-ul are o sintax foarte clar i previzibil i astfel nu creeaz probleme software-ului. Sintax i Reguli HTML i XHTML au trei tipuri de componente: Elemente: identific anumite pri ale paginii HTML folosind etichete (tags) Atribute: informaie despre instana unui element Entiti: caractere NON-ASCII DE REINUT Pe msur ce se vor prezenta coduri pentru HTML, XHTML i CSS, se vor folosi anumite culori pentru o nelegere mai bun a instruciunilor. Violet: indica declararea DOCTYPE folosit n documentele (X)HTML. Verde deschis: indic markup obinuit al HTML-ului sau XHTML-ului. Verde nchis: indic markup XML. Portocaliu: indic markup CSS Albastru: indic JavaScript

Elemente Elementele sunt folosite pentru a descrie fiecare parte de text din pagina Web. Elementele sunt formate din tag-uri (etichete) i ce se gsete ntre aceste etichete. Exist dou categorii de elemente: Elemente care au text cuprins ntre o pereche de tag-uri Elemente care insereaz ceva n pagin folosind doar un tag

smaranda.belciug@inf.ucv.ro

Exemplu Perechi de tag-uri Elemente care descriu un anumit coninut folosesc o pereche de tag-uri pentru a marca nceputul i sfritul unui element. Tag-urile de nceput i de sfrit arat astfel: <tag> </tag> Eticheta de nceput: <tag> i spune browser-ului, Elementul ncepe aici Eticheta de final: </tag> i spune browser-ului, Elementul se termin aici <p> Ed started writing about computing subjects in 1986 for a Macintosh oriented monthly magazine. By 1989 he had contributed to such publications as LAN Times, Network World, Mac World, and LAN Magazine. He worked on his first book in 1991, and by 1994 had contributed to over a dozen different titles.</p> Exemplul anterior arat cum se scrie un paragraf n (X)HTML. Tag-uri simple Elementele care insereaz ceva n pagin se numesc elemente vide, deoarece nu au niciun coninut, i folosesc un singur tag, astfel: <tag /> Acum apare prima diferen ntre HTML i XHTML, deoarece n XHTML toate elementele vide trebuie s se termine cu un slash / nainte de simbolul >. Acest lucru este necesar deoarece XHTML-ul se bazeaz pe XML i o regul a XML-ului este c elementele vide se nchid astfel. De reinut c pentru ca toate browserele s recunoasc acest tag trebuie inserat un spaiu ntre tag-ul propriu-zis i /. <img src=images/header.gif alt=header graphic width=794 height=160 /> Atribute Atributele permit varietatea elementelor. <img src=images/header.gif alt=header graphic width=794 height=160 /> n exemplul anterior atributele width i height dau dimensiunile imaginii, n timp ce atributul alt d o alternativ, un titlu care s fie afiat n cazul n care imaginea nu poate fi afiat (browser text-only) <tag attribute=value attribute=value> Entiti American Standard Code for Information Interchange (ASCII) definete un anumit numr de caractere. Exist totui anumite caractere care fac parte din codul ASCII (caractere cu accent etc.) Spre exemplu: pagina de mai jos conine text scris n limba german, mai precis trei caractere u cu umlauts ().

smaranda.belciug@inf.ucv.ro

Textul ASCII nu conine umlauts i deci HTML-ul folosete entiti pentru a afia astfel de caractere. Fiecare entitate ncepe cu & i se termin cu ;.
<html> <head> <style> body { font-family: sans-serif; font-size: large; } </style> <title>Ed auf Deutsch</title> </head> <body> <p>Ed Tittel hat seinen technischen Schriften im Jahre 1986 angefangen, als er f&uuml;r einen Macintosh monatlichen Zeitschrift Artikeln schrieb. In drei mehr Jahren, hat er auch f&uuml;r anderen Journalen wie <cite>LAN Times</cite>, <cite>Network World</cite>, und <cite>LAN Magazine</cite> merhrere Artikeln beigetragen. Er fertigte seinen ersten Buch im Jarhe 1991, und beim Ende des Jahres 1994 hat er auf ein Dutzend B&uuml;cher gearbeitet.</p> </body> </html>

DE REINUT Pentru a afia efectiv caracterele <, > i & se vor folosi urmtoarele entiti: Pentru < : &lt; Pentru >: &gt; Pentru &: &amp;

Din ce sunt formate pagini Web? Comentariile include text n fiierele (X)HTML, text ce nu este afiat n pagina Web. Pentru a scrie comentarii se folosesc urmtoarele semne: <!Incepe comentariul se termina comentariul--> Prile componente ale unei pagini Web sunt:

smaranda.belciug@inf.ucv.ro

<html> <!-- Aceast etichet trebuie s fie ntotdeauna la nceputul unui document HTML --> <head> <!-- Elementul head aduce informaii necesare pentru etichetarea ntregului document HTML --> <title>Welcome to Ed Tittel.com</title> <!-- Textul dintre tag-urile title apare n bara de titlu a browser-ului cnd pagina este vizualizat --> </head> <!-- nchide elementul head --> <body> <!-- Coninutul care apare n orice pagin Web apare sau este invocat n elementul body --> <h1>Contact:</h1> <!-- insereaz primul nivel de header --> <!-- Urmtoarele patru linii de text sunt desprite la finalul lor folosind elementul <br />, i fiecare linie ncepe cu identificarea textului scris cu bold, cuprins ntre etichetele <b> i </b> --> <p><b>Email:</b> etittel at yahoo dot com<br /> <b>Address:</b> 2443 Arbor Drive, Round Rock, TX 78681-2160<br /> <b>Phone:</b> 512-252-7497 (No solicitors, please)<br /> <b>List of publications available in:</b> <a href=docs/v_et.doc>MS Word</a><br /> <b>Resume available in:</b> <a href=docs/Resu-et13.doc>MS Word</a> </p> <!-- Finalul paragrafului--> </body> <!-- Finalul seciunii body --> </html> <!-- Finalul documentul HTML -->

Crearea i vizualizarea unei pagini Web nainte de a ncepe Creezi pagina Web ntr-un editor de text sau de HTML Vizualizezi pagina ntr-un browser Web Chiar dac majoritatea editoarelor HTML, cum ar fi Dreamweaver sau HTMLKit au browser preview, este important s-i vizualizezi pagin ntr-un browser ca Firefox, Opera, Chrome sau Internet Explorer.

Cum crem o pagin Web din nimic? Pasul 1. Planific-i design-ul paginii Web Pasul 2. Combin HTML-ul i textul ntr-un editor de texte, pentru a transforma design-ul de la pasul 1 n realitate Pasul 3. Salveaz pagina. Pasul 4. Vizualizeaz pagina ntr-un browser Web

10

smaranda.belciug@inf.ucv.ro

Exemplu

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>HTML Makes the Web Go Round</title> </head> <body type=text/css style=color: white; background-color: teal; font-size: 1.2; font-family: sans-serif> <h1>Hello World!</h1> <p>Blah blah blah </p> <p> Blah blah blah </p> <p> Blah blah blah </p> <p>Sincerely,<br /> Bla bla </p> </body> </html>

Saving...

11

smaranda.belciug@inf.ucv.ro

Planificarea site-ului nainte de ncepe s-i creionezi design-ul site-ului ntreab-te urmtoarele lucruri: De ce creezi acest site? Ce vrei s le transmii utilizatorilor? Cine sunt utilizatorii target? o Ce vrst au utilizatorii? o Ct de bine tiu s foloseasc Internetul? De cte pagini ai nevoie n site-ul tu? Ce fel de ierarhie vei folosi pentru a-i organiza paginile?

Formatarea paginilor Web folosind (X)HTML-ul

n aceast seciune se va studia: Creearea unei structuri de baz a unui document (X)HTML Definirea header-ului (X)HTML Creearea unui document (X)HTML ntreg Stabilirea structurii unui document

12

smaranda.belciug@inf.ucv.ro O declaraie care identific documentul ca fiind document (X)HTML Un header Un body Declararea documentului ca fiind (X)HTML La nceputul documentului (X)HTML se scrie Document Type Declaration sau DOCTYPE declaration. Aceast linie de cod specific ce versiune de HTML sau (X)HTML foloseti i permite browserelor s tie cum s interpreteze documentul. Vom folosi XHTML 1.0 pentru ca este foarte utilizat . Cum se declar un HTML DOCTYPE? HTML 4.01 Transitional: conine toate elementele de structura HTML i pe cele de prezentare
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>

HTML 4.01 Strict: exclude toate elementele de prezentare n favoarea style sheet-urilor
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>

HTML 4.01 Frameset: ncepe cu HMTL 4.01 i adaug toate elementele care fac posibile frame-urile
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd>

Cum se declar un XHTML DOCTYPE? XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

XHTML 1.0 Strict

<!DOCTYPE html -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

XHTML 1.0 Frameset:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>

Elementul <html> Dup ce specifici ce versiune de (X)HTML se folosete, se adaug un element <html> care conine toate celelalte elemente ale paginii.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html>

</html>

Adugarea unui namespace XHTML

13

smaranda.belciug@inf.ucv.ro Un namespace este o colecie de nume folosit de elementele i atributele dintr-un document XML. XHTML folosete o colecie special de nume; deci are nevoie de un namespace care arata astfel:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml>

</html>

Definire metadata Cuvntul cheie metadata se refer la datele despre date. n contexul Web-ului, asta nseamn date care descriu pagina ta Web. Metadata unei pagini poate s includ: Cuvinte cheie Descrierea paginii Informatii despre autorul paginii Aplicaia software folosit pentru crearea paginii
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Jeffs Web Design Services</title> <meta name=keywords content=Web consulting, page design, site construction /> <meta name=description content=Synopsis of Jeffs skills and services /> </head> </html>

Text i Liste Formatarea textului HTML-ul este o colecie gigantic de blocuri text. Fiecare bucat de coninut din pagina ta Web trebuie s fac parte dintr-un bloc de elemente Fiecare bloc de elemente st n interiorul elementului <body>. HTML-ul recunoate o serie de blocuri text pe care poi s le foloseti n pagin: Paragrafe Heading-uri Liste Tabele Forme

14

smaranda.belciug@inf.ucv.ro Paragrafe Paragrafele apar mai des n paginile Web dect oricare alt bloc text. Pentru a crea un paragraf nou trebuie s foloseti tag-ul <p> pentru a spune browserului s separe coninutul text i pentru a-l nchide se folosete tag-ul </p>. Formatarea Pentru a crea un paragraf, trebuie urmai urmtorii pai: 1. Adaug <p> n interiorul body-ului documentului. 2. Tasteaz coninutul paragrafului Adaug </p> pentru a nchide paragraful. Exemplu

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>All About Blocks</title> </head> <body> <p>This is a paragraph. Its a very simple structure that you will use time and again in your Web pages.</p> <p>This is another paragraph. What could be simpler to create? </p> </body> </html>

Aranjarea n pagin n mod implicit, paragrafele sunt aliniate la stnga. Poi s foloseti atributul de aliniere cu valorile: left, center, right sau justify pentru a controla aranjarea n pagin. Exemplu
<p align=center>This paragraph is centered.</p> <p align=right>This paragraph is right-justified.</p> <p align=justify>This paragraph is left- and right-justified; to show this effect at work, we need several lines of text. Notice that both right and left margins end up flush when you use this particular value for the align attribute. In particular, the second and third lines of text show extra space between the words.</p>

15

smaranda.belciug@inf.ucv.ro Heading-uri Heading-urile sparg documentul n seciuni. Heading-urile Creeaz o structur organizat Asigur o vizulizare mai bun a seciunilor unei pagini Dau indicii vizuale asupra modului n care sunt grupate informaiile Heading-urile conin 6 elemente. Exemplu
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>All About Blocks</title> </head> <body> <h1>First-level heading</h1> <h2>Second-level heading</h2> <h3>Third-level heading</h3> <h4>Fourth-level heading</h4> <h5>Fifth-level heading</h5> <h6>Sixth-level heading</h6> </body> </html>

Controlarea blocurilor text Blocurile text construiesc fundaia paginii tale. Poi s spargi aceste blocuri n blocuri mai mici pentru a ghida mai bine cititorii prin pagina ta. Block quotes Un block quote este un citat pe care-l l aezi n pagina detaat de restul coninutului. Pentru acest lucru se folosete elementul <blockquote>.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>Famous Quotations</title> </head> <body> <h1>An Inspiring Quote</h1> <p>When I need a little inspiration to remind me of why I spend my days in the classroom, I just remember what Lee Iococca said:</p> <blockquote> In a completely rational society, the best of us would be teachers and the rest of us would have to settle for something else.

16

smaranda.belciug@inf.ucv.ro
</blockquote> </body> </html>

Text preformatat HTML-ul ignora spaiile din documente.

<p>This is a paragraph with a lot of white space thrown in for fun (and as a test of course).</p>

Elementul de preformatare a textului <pre> i spune browser-ului s pstreze toate spaiile albe exact cum au fost introduse de utilizator.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>White space</title> </head> <body> <pre>This is a paragraph with a lot of white space thrown in for fun (and as a test of course). </pre> </body> </html>

Line breaks Pentru a trece pe rndul urmtor n text se va folosi elementul <br/>.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title> Shakespeare in HTML</title> </head> <body> <h1>Shakespeares Sonnets XVIII: Shall I compare thee to a summers day? </h1> <p> Shall I compare thee to a summers day? <br /> Thou art more lovely and more temperate. <br /> Rough winds do shake the darling buds of May, <br /> And summers lease hath all too short a date. <br /> Sometime too hot the eye of heaven shines, <br /> And often is his gold complexion dimmd; <br /> And every fair from fair sometime declines, <br /> By chance or natures changing course untrimmd; <br />

17

smaranda.belciug@inf.ucv.ro
But thy eternal summer shall not fade <br /> Nor lose possession of that fair thou owst; <br /> Nor shall Death brag thou wanderst in his shade, <br /> When in eternal lines to time thou growst: <br /> So long as men can breathe or eyes can see, <br /> So long lives this, and this gives life to thee. <br /> </p> </body> </html>

Linii orizontale Elementul linie orizontala (<hr/> te ajut s incluzi o linie orizontal n pagina ta.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>Horizontal Rules</title> </head> <body> <p>This is a paragraph followed by a horizontal rule.</p> <hr /> </p>This is a paragraph preceded by a horizontal rule.</p> </body> </html>

Atribute Patru atribute diferite controleaz modul n care arat linia orizontala: Width Size Align Noshade Aceste atribute sunt depite, fiind nlocuite de atribute CSS.
<p>This is a paragraph followed by a horizontal rule.</p> <hr width=45% size=4 align=center noshade=noshade /> <p>This is a paragraph preceded by a horizontal rule.</p>

Organizarea Informaiei Listele sunt o unealt puternic pentru a aranja elementele similare mpreun, i dau posibilitatea utilizatorilor s vd mai bine informaia. HTML-ul are trei tipuri de liste: Liste numerotate Liste cu bullet-uri Liste cu definiii

18

smaranda.belciug@inf.ucv.ro Liste numerotate O lista numerotat conine cel puin dou obiecte, fiecare prefaa de un numr. <ol> specific c este vorba de o list numerotata lista de obiecte se noteaz cu <li>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>Numbered Lists</title> </head> <body> <h1>Things to do today</h1> <ol> <li>Feed cat</li> <li>Wash car</li> <li>Grocery shopping</li> </ol> </body>

Numerotarea Listele numerotate au atribute prin care se poate controla afiarea listei: start: specifica primul numr din list type: specific stilul de numerotare din list. Se poate alege dintre: o 1: numere decimale o a: litere mici o A: majuscule o i: cifre romane scrise cu litere mici o I: cifre romane scrise cu majuscule
<ol start=5 type=I> <li>Wash car</li> <li>Feed cat</li> <li>Grocery shopping</li> </ol>

Bulleted lists O list cu bullet-uri este o list de obiecte precedate de un bullet (un punct mare). Se folosete n momentul n ce ordine sunt afiate.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>Bulleted Lists</title> </head> <body> <h1>Things to do today</h1>

19

smaranda.belciug@inf.ucv.ro
<ul> <li>Feed cat</li> <li>Wash car</li> <li>Grocery shopping</li> </ul> </body> </html>

Stiluri Exist mai multe tipuri de bullet-uri: disc square circle

<ul type=square> <li>Feed cat</li> <li>Wash car</li> <li>Grocery shopping</li> </ul>

Definition lists Listele cu definiie grupeaz termenii i definiiile ntr-o singur list i necesit trei elemente pentru a completa lista: <dl>: lista de definiii <dt>: definete un termen din list <dd>: definete o definiie a unui termen
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>Definition Lists</title> </head> <body> <h1>Markup Language Definitions</h1> <dl> <dt>SGML</dt> <dd>The Standard Generalized Markup Language</dd> <dt>HTML</dt> <dd>The Hypertext Markup Language</dd> <dd>The markup language you use to create Web pages.</dd> <dt>XML</dt> <dd>The Extensible Markup Language</dd> </dl> </body> </html>

Nested lists

20

smaranda.belciug@inf.ucv.ro
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>Nested Lists</title> </head> <body> <h1>Things to do today</h1> <ol> <li>Feed cat</li> <ul> <li>Rinse bowl</li> <li>Open cat food</li> <li>Mix dry and wet food in bowl</li> <li>Deliver on a silver platter to Fluffy</li> </ul> <li>Wash car</li> <ul> <li>Vacuum interior</li> <li>Wash exterior</li> <li>Wax exterior</li> </ul> <li>Grocery shopping</li> <ul> <li>Plan meals</li> <li>Clean out fridge</li> <li>Make list</li> <li>Go to store</li> </ul> </ol> </body> </html>

Alte tag-uri utile <strike>, </strike> - trage o linie peste cuvant <u>, </u> - underline <blink>, </blink> - face ca textul sa clipeasca <basefont size = 7> Text scris cu 7 <basefont size = 4>O <basefont size = -1>nu <basefont size = -1>ma <basefont size = -1>micsorez </basefont> A, inapoi la normal! - nu merge in orice tip de browser <font size = 7>C</font> - marimea font-ului <font color="#FFFF00">sun</font>! - schimba culoarea font-ului <font face="Arial">oare cu ce font </font>scriu acum?

21

smaranda.belciug@inf.ucv.ro

Link-uri Hyperlink-urile, sau mai simplu link-urile, conecteaz paginile (X)HTML la alte resurse din Web. Cnd incluzi un link n pagina ta, utilizatorii pot s cltoreasc de la pagina ta ctre alte site-uri, ctre alt pagin din site-ul tu, sau, chiar la alt locaie din aceeai pagin. Fr link-uri, o pagin este de sine stttoare, deconectat de restul Web-ului. Cu link-uri, pagina devine parte a coleciei de informaii fr margini.

Link-uri de baz Pentru a crea un link ai nevoie de: O adres Web (URL) a site-ului Web sau a fiierului cu care vrei s stabileti legtura. Acesta de obicei ncepe cu: http://. Nite text n pagina ta Web care s descrie sau s eticheteze link-ul. ncearc s alegi un text care s fie folositor utilizatorului. 22

smaranda.belciug@inf.ucv.ro Un element ancor (<a>) cu un atribut href pentru a le lega pe toate mpreun. Elementul care se folosete pentru a crea link-uri se numete ancor, deoarece l foloseti pentru a ancora un URL de un anumit text din pagina ta. De exemplu, dac avem o pagin Web care descrie standardele HTML, poi s le dai drept referin surferilor Web, pagina Web a World Wide Web Consortium (W3C) organizaia care guverneaz toate lucrurile legate de standardele (X)HTML-ului. O legtur de baza ctre site-ul W3C-ului, www.w3.org, arat astfel:
<p>The <a href=http://www.w3.org>World Wide Web Consortium</a> is the standards body that oversees the ongoing development of the XHTML specification.</p>

Link-uri opiuni Poi s ai o varietate de resurse online: Alte pagini (X)HTML (ori de pe site-ul tu Web sau de pe alt site) Locaii diferite n aceeai pagin (X)HTML Resurse care nici mcar nu sunt pagini (X)HTML, ca: adrese de e-mail, poze i fiiere text Link-uri absolute Un link absolut folosete un URL complet pentru a conecta browser-ul la o pagin Web sau la o resurs online. Link-urile care folosesc un URL complet pentru a ajunge la o resurs se numesc absolute deoarece ele dau o cale complet, de sine stttoare ctre o alt resursa Web. Cnd vrei s faci legtura cu o pagin de pe alt site Web, browser-ul Web are nevoie tot URL-ul. Browser-ul ncepe cu domeniul din URL i nainteaz pn la fiierul respectiv. Cnd vrei s faci legtura cu fiierele de pe un alt site, trebuie ntotdeauna s foloseti URL-ul absolut n atributul href al elementul ancor. De exemplu:
http://www.website.com/directory/page.html

Link-uri relative Un link relativ folosete un fel de scurttur pentru a specifica URL resursei cutate. Urmtoarele sfaturi sunt pentru a avea link-uri relative n pagina ta (X)HTML: Creezi link-uri relative ntre resurse care au acelai domeniu Deoarece ambele surse au acelai domeniu, poi s omii informaia legat de el n URL Un URL relativ folosete locaia resursei de la care vrei s faci legtur pentru a identifica locaia resursei cu care vrei s faci legtura. Legturi simple Dac vrei s faci legtura dintre http://www.mysite.com/home.html i http://www.mysite.com/about.html, poi folosi aceast URL relativ simplificat:

23

smaranda.belciug@inf.ucv.ro

<p>Learn more <a href=about.html>about</a> our company.</p>

Folosirea link-urilor Poi s foloseti link-urile astfel: S deschizi documente ntr-o nou fereastr S faci legtura dintre diferite locaii din pagina ta Web S faci legtura cu alte fiiere (nu (X)HTML), cum ar fi: o Portable Document Format (PDF) o Fiiere arhivate o Documente Word Ferestre noi Web-ul merge deoarece poi s faci legtura dintre site-ul tu i alte site-uri. Dar, n momentul n care tu te conectezi cu un alt site, vizitatorii prsesc site-ul tu. Pentru a ine vizitatorii pe site-ul tu, HTML-ul poate s deschid o pagina cerut ntr-o alt fereastr. Acest lucru se obine foarte uor astfel:
<p>The <a href=http://www.w3.org target=_blank>World Wide Web Consortium</a> is the standards body that oversees the ongoing development of the XHTML specification.</p>

n momentul n care valoarea atributului target este _blank, acest lucru i spune browser-ului s: Menin pagina de la care se face legtur deschis n fereastra curent S deschid pagina cu care se face legtura ntr-o nou fereastra De reinut Ferestrele care se deschid (gen Pop-ups) i irit pe unii utilizatori!

Legturile din pagina Web pot fi fcute prin link-uri ctre: Aceeai pagin Acelai site Web Alt site Web

Denumirea link-urilor Pentru a identifica i crea un link ntr-o pagina cu acces direct:
<a name=top></a>

Exemplu

- n aceeai pagin

<html> <head> <title>Intradocument hyperlinks at work</title>

24

smaranda.belciug@inf.ucv.ro
</head> <body> <h1><a name=top></a>Web-Based Training</h1> <p>Given the importance of the Web to businesses and other organizations, individuals who seek to improve job skills, or fulfill essential job functions, are turning to HTML and XML for training. We believe this provides an outstanding opportunity for participation in an active and lucrative adult and continuing education market.</p> <p><a href=#top>Back to top</a></p> </body> </html>

Exemplu

- n acelai site

<p>Review the <a href=home.html#descriptions>document descriptions</a>to find the documentation for your particular product.</p>

Exemplu

- n alte site-uri

<p>Find out how to <a href=http://www.yourcompany.com/training/online.htm#register> register</a> for upcoming training courses led by our instructors.</p>

Resurse non-HTML Link-urile fac legtura ctre orice fel de fiier: Documente text Spreadsheet-uri PDF-uri Fiiere arhivate Multimedia Download-ul de fiiere
<h1>Download the new version of our software</h1> <p><a href=software.zip>Software</a></p> <p><a href=doc.pdf>Documentation</a></p>

Nu poi s tii cum va rspunde browser-ul utilizatorului n momentul cnd utilizatorul va face click pe un fiier non (X)HTML. Browser-ul poate: S i dea posibilitatea utilizatorului s salveze fiierul S afieze fiierul fr s-l downloadeze (PDF) S afieze un mesaj de eroare (n cazul n care browser-ul nu recunoate tipul fiierului) Pentru a ajuta utilizatorii s descarce cu succes, trebuie s: Afiezi ct mai multe informaii despre formatul fiierului folosit Afiezi numele software-ului care merge cu fiierele respective

25

smaranda.belciug@inf.ucv.ro

Exemplu
<h1>Download our new software</h1> <p> <a href=software.zip>Software</a> <br /> <b>Note:</b> You need a zip utility such as <a href=http://www.winzip.com>WinZip</a> (Windows) or <a href=http://www.maczipit.com>ZipIt</a> (Macintosh) to open this file.</p> <p><a href=doc.pdf>Documentation</a> <br /> <b>Note:</b>You need the free <a href=http://www.adobe.com/products/ acrobat/readstep2.html>Adobe Reader</a> to view this file.</p>

Adrese de e-mail Un link ctre o adres de e-mail o s deschid automat un nou e-mail adresat exact persoanei respective. Acesta este un mod foarte bun pentru a ajuta utilizatorii s i trimit mail-uri cu comentarii sau cereri. Un link ctre un e-mail folosete elementul ancor standard i atributul href. Valoarea atributului href este prefaat de mailto:

<p>Send us your <a href=mailto:comments@mysite.com>comments</a>.</p>

26

smaranda.belciug@inf.ucv.ro

Folosirea imaginilor Designerii de pagini Web folosesc imaginile pentru a transmite informatii importante, si pentru a da o nfiare ct mai plcut site-ului. Folosirea elementului <img /> Elementul pentru imagini <img /> este un element vid, pe care l plasezi n pagin acolo unde vrei s fie afiat imaginea.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>CDs at Work</title> </head> <body> <h1>CD as a Storage Medium</h1> <p>CD-ROMs have become a standard storage option in todays computing world because they are inexpensive and easy to use.</p> <img src=07fg02-cd.jpg /> <p>To read from a CD, you only need a standard CD-ROM drive, but to create CDs, you need either a CD-R or a CD-R/W drive.</p> </body> </html>

Fiierul 07fg02-cd.jpg este salvat n acelai director ca i pagina (X)HTML. Adugarea de text alternativ Textul alternativ descrie o imagine astfel nct cei care nu o pot vizualiza pentru un anumit motiv s poat s aib un text alternativ din care s afle mai multe despre imagine. A aduga un text alternativ (alt text) este foarte bine, deoarece: Pentru utilizatorii nevztori, care nu pot s vad imaginile i trebuie s se bazeze pe un cititor text-to-speech care s le citeasc Utilizatorii care acceseaz pagina de pe telefon i au grafic redus Utilizatorii care au conexiuni slabe i crora nu li se afieaz imaginile

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> <title>Inside the Orchestra</title> </head> <body> <p>Among the different sections of the orchestra you will find:</p> <p><img src=07fg03-violin.jpg alt=violin /> Strings</p> <p><img src=07fg03-trumpet.jpg alt=trumpet /> Brass</p> <p><img src=07fg03-woodwinds.jpg alt=clarinet and saxophone /> Woodwinds</p> </body>

27

smaranda.belciug@inf.ucv.ro
</html>

Specificarea dimensiunii imaginii Poi s foloseti atributele height i width cu elementul <img /> pentru a-i transmite browser-ului la ce dimensiune s afieze imaginea (n pixeli):
<p><img src=07fg03-trumpet.jpg width=50 height=70 alt=trumpet />Brass</p>

Setarea marginii unei imagini n mod obinuit, fiecare imagine are o margine de 1 care nu apare n majoritatea browserelor, pn cnd acea imaginea nu se transform ntr-un link (se va discuta ulterior). Se poate folosi atributul border cu elementul <img /> pentru a avea un control mai bun asupra marginii afiate de browser.
<img src=07fg03-woodwinds.jpg width=100 height=83 alt=clarinet and saxophone border=10 />

Controlarea aranjamentului n pagin al imaginii Atributul align se folosete cu elementul <img /> pentru a controla aranjarea imaginii n pagin. Valorile posibile pentru acest atribut sunt: top: aliniaz textul n jurul imaginii, poziionnd imaginea n partea de sus middle: aliniaz textul n jurul imaginii, poziionnd imaginea n mijloc bottom: aliniaz textul n jurul imaginii, poziionnd imaginea n partea de jos left: imaginea st n stnga, iar textul n dreapta ei right: imaginea st n dreapta, iar textul n stnga ei

<p> <img src=07fg09-mouse.jpg alt=mouse with top-aligned text height=63 width=100 align=top /> This text is aligned with the top of the image. </p> <p> <img src=07fg09-mouse.jpg alt=mouse with middle-aligned text height=63 width=100 align=middle /> This text is aligned with the middle of the image. </p> <p> <img src=07fg09-mouse.jpg alt=mouse with bottom-aligned text height=63 width=100 align=bottom /> This text is aligned with the bottom of the image. </p> <p> <img src=07fg09-mouse.jpg alt=mouse with left-aligned text height=63 width=100 align=left /> This image floats to the left of the text. </p> <p> <img src=07fg09-mouse.jpg alt=mouse with right-aligned text height=63 width=100 align=right /> This image floats to the right of the text, and overlaps with the image to the left.

28

smaranda.belciug@inf.ucv.ro
</p>

Setarea spaiului din jurul imaginii Majoritatea browserelor las cam 1 pixel de spaiu alb ntre imagine i text sau ntre imagini. Poi s lai spatiu n jurul imaginii cu ajutorul: atributului vspace (spaiu vertical) atributului hspace (spaiu orizontal)
<p>This text doesnt crowd the image on top.<br /> <img src=07fg09-mouse.jpg height=63 width=100 hspace=20 vspace=25 alt=mouse on a white background /> And this text is a little further away from the sides. </p>

Imagini Link Paginile Web folosesc cteodat imagini pentru navigare. Sunt mai drgue dect link-urile cu text, i astfel poi aduga la pagina ta form i funcionalitate cu un singur element. Pentru a crea o imagine care este un link, se nlocuiete elementul <img /> cu textul care ar trebui s fie ancora link-ului. Astfel:
<p><a href=http://www.w3.org>Visit the W3C</a></p>

se nlocuiete cu:
<p><a href=http://www.w3.org><img src=w3.jpg alt=Visit the W3C Web Site height=48 width=315 border=1 /></a> </p>

29

smaranda.belciug@inf.ucv.ro

Crearea de image maps imagini hart Cnd foloseti un element <img /> pentru a crea o imagine link, poi s ataezi doar un singur link la acea imagine. Pentru a crea o imagine mai mare care conecteaz linkuri la diferite regiuni din pagin ai nevoie de un image map (imagine hart). Pentru a crea un image map, ai nevoie de dou lucruri: o imagine care s fie nteleas de utilizatori ( de exemplu: o imagine a unui parc poate s nsemne un loc de joac, o zon de picnic etc.) un markup pentru a mapa diferitele regiuni din hart (map) cu diferite URLuri Elemente i atribute Folosete elementul <img /> pentru a aduga imaginea hart n pagina ta, la fel ca i cum ai aduga o alt imagine. Pe lng acest lucru, trebuie s incluzi atributul usemap pentru a permite browser-ului s tie c este vorba de un image map. Valoarea atributului usemap este numele hrii tale. Se folosesc dou elemente i o colecie de atribute pentru a defini un image map: <map> conine informatii despre hart. Elementul <map> folosete numele atributului pentru a defini harta. Valoarea numelui trebuie s fie identic cu valoarea atributului usemap din elementul <img /> folosit anterior. <area /> face legtura dintre pri specifice ale hrii cu URL-uri. Elementul <area /> ia urmtoarele atribute pentru a defini particularitiile fiecarei seciuni din hart: o shape: specific forma regiunii (un punct pe care se poate face click din hart). Se poate alege dintre: rect (dreptunghi), circle, poly (un triunghi sau un
poligon)

o coords: definete coordonatele regiunii. o href: specific URL-ul cu care se face legtura o alt: text alternativ pentru poze
<img src=07fg12-navmap.gif width=302 height=30 usemap=#NavMap border=0 /> <map name=NavMap /> <area shape=rect coords=0,0,99,30 href=home.html alt=Home /> <area shape=rect coords=102,0,202,30 href=about.html alt=About /> <area shape=rect coords=202,0,301,30 href=products.html alt=Products /> </map>

30

smaranda.belciug@inf.ucv.ro

Cascading Style Sheets

Scopul CSS-ului este acela de a separa stilul unei pagini Web de structur i acela de a face mentenana paginii mult mai uoar. Elementele structurale ale unei pagini, cum ar fi heading-urile (<h1> - <h6>) i textul cuprins n seciunea body nu afecteaz modul n care arat aceste elemente. Aplicndu-le stiluri, putem specifica cum arat layout-ul acelui element iar n plus putem atribui atribute de design (cum ar fi fonturi, culori etc).

Avantajele unui CSS Capacitatea de formatare a HTML-ului este limitat. Cnd faci design-ul unui layout n HTML eti limitat la tabele, font-uri i cteva stiluri cum ar fi bold i italic. Cu ajutorul CSS-ului poi: S controlezi fiecare aspect al afirii pagini: specifici ct spaiu s fie ntre linii, ct spaiu s fie ntre caractere, marginile paginii etc. Poi de asemenea s specifici poziia elementelor n pagin Poi s aplici schimbrile global: astfel design-ul va fi unitar n toate paginile site-ului.

31

smaranda.belciug@inf.ucv.ro Poi s comunici mai uor cu browser-ul dndu-i mult mai multe informaii despre cum vrei s arate pagina ta Web, dect atunci cnd foloseti HTML-ul Creezi pagini dinamice: dac foloseti JavaScript sau alt limbaj de scripting mpreun cu CSS poi crea text sau orice alt coninut care se mic, apare, dispare etc. Ce poate s fac CSS-ul pentru o pagina Web? 1. Poi s defineti reguli ntr-un style sheet n care s specifici cum vrei s arate coninutul unui anumit element. 2. Poi s faci legtura ntre regulile de style i markup 3. Restul l face browser-ul Cu CSS poi s: Specifici tipul de font, culoare, mrime i alte efecte S setezi culori de background sau imagini S controlezi multe aspecte de layout de text, incluznd aliniere i spaiu S setezi margini S controlezi modul n care este afiat o list S defineti layout-ul i afiarea unui tabel S generezi automat coninut pentru elemente de pagin standard cum ar fi counters i footers S controlezi cum este afiat cursorul Structura i sintaxa CSS-ului Un style sheet este format din reguli de style (stil). Fiecare regul are dou pri: Selector: specific elementul de markup cruia i se aplic regulile Declaratie: specific cum trebuie s arate coninutul markup-ului Sintaxa unei reguli urmeaz urmtorul tipar:
selector {declaraie;}

O declaraie este format la rndul ei din dou pri: Proprietile ( mrimea fontului, culoarea din background) Valori: (24, galben)

selector {property: value;}

Exemplu
h1 {color: teal;} h2 {color: maroon;} h3 {color: black;}

32

smaranda.belciug@inf.ucv.ro
h1 {font-size: 16px;} h2 {font-size: 12px;} h3 {font-size: 10px;}

Selectori i declaraii
h1 {color: teal;} h1 {font-family: Arial;} h1 {font-size: 36px;} h1 {color: teal; font-family: Arial; font-size: 36px;}

h1, h2, h3 {color: teal; font-family: Arial; font-size: 36px;}

schimbrile se aplica lui h1,h2,h3

Cum se lucreaz cu clase de stil Cteodat ai nevoie de reguli de stil aplicate doar anumitor instane de markup. De exemplu, vrei o anumit regul de stil care se aplic doar paragrafelor care conin informaii cu privire la copyright, ai nevoie de o modalitate de a-i spune browser-ului c acea regul se aplic doar n anumite situaii. Un paragraf obinuit (fr atributul class)
<p>This is a regular paragraph.</p>

Un atribut class cu valoarea copyright:

<p class=copyright>This is a paragraph of class copyright.</p>

O clas se creeaz astfel:

p.copyright {font-family: Arial; font-size: 12px; color: white; background: teal;}

Se pot crea clase de stiluri fr s le fie asociate un anumit element.

.warning {font-family: Arial; font-size: 14px; background: blue; color: white;}

Exemplu
<p>This is a paragraph without the warning class applied.</p> <blockquote>This is a block quote without a defined class.</blockquote> <h1 class=warning>Warnings</h1>

33

smaranda.belciug@inf.ucv.ro
<p class=warning>This is a paragraph with the warning class applied.</p>

Stiluri motenite n momentul n care atribui un stil unui element, acelai still este aplicat tuturor elementelor care se afl n interiorul acelui element. De exemplu, o regul de stil pentru elementul body care seteaz backgroundul, culoarea textului, mrimea fontului, font-ul, marginile, arat astfel:
body {background: teal; color: white; font-size: 18px; font-family: Garamond; margin-left: 72px; margin-right: 72px; margin-top: 72px;} <body> <p>This paragraph inherits the page styles.</p> <h1>As does this heading</h1> <ul> <li>As do the items in this list</li> <li>Item</li> <li>Item</li> </ul> </body>

Style Sheets Interne Un style sheet intern se afl n pagina HTML. Doar trebuie adugate regulile de stil elementului <style> din header-ul documentului.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Internal Style Sheet Example</title> <style type=text/css> body {background: black; color: white; font-size: 16px; font-family: Garamond; margin-left: 72px; margin-right: 72px; margin-top: 72px;} h1, h2, h3 {color: teal; font-family: Arial; font-size: 36px;} p.copyright {font-family: Arial; font-size: 12px; font-color: white; background: black;} .warning {font-family: Arial;

34

smaranda.belciug@inf.ucv.ro
font-size: 16px; font-color: red;} </style> </head> <body> <!-- Document content goes here --> </body> </html>

Style Sheet-uri Externe Un style sheet extern conine toate regulile de stil ntr-un document text separat. Este recomandat folosirea style sheet-urilor externe. Linking Pentru a face legtura cu un style sheet extern:
<html> <head> <title>External Style Sheet Example</title> <link rel=stylesheet type=text/css href=styles.css /> <head> <body> <!-- Document content goes here --> </body> </html> <style> @import http://www.somesite.edu/stylesheet.css; </style>

35