P. 1
html

html

|Views: 473|Likes:
Published by aurellia_7

More info:

Published by: aurellia_7 on Mar 25, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

01/13/2013

pdf

text

original

Introducere

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce pot fi afisate intr-un browser (sau navigator). HTML este folosit pentru prezentarea unui continut (text, imagine) intr-o pagina web, furnizeaza mijloacele prin care continutul unui document poate fi structurat si adnotat cu diverse tipuri de metadate si indicatii de redare si afisare. Aceste indicatiile pot varia de la decoratiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori introducerea unei imagini, pana la adaugarea de elemente sofisticate, tabele, harti de imagini, formulare si cod CSS sau scripturi JavaScript. Metadatele pot include informatii despre titlul si autorul documentului, informatii structurale despre cum este impartit documentul in diferite segmente, paragrafe, liste, titluri etc. si informatii esentiale care permit ca documentul sa poata fi legat de alte documente pentru a forma astfel hiperlink-uri. HTML este un format text proiectat pentru a putea fi citit si editat utilizand un editor de text simplu, editarea si intelegerea paginilor in acest fel necesita cunostinte de HTML, pe care le puteti obtine studiind lectiile din acest curs. Exista si editoare grafice, de tip WYSIWYG (What You See Is What You Get - "ceea ce vezi este ceea ce obtii"), cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage, care permit ca paginile web sa fie tratate asemanator cu documetele Word si genereaza ele cod HTML pentru continutul paginii, dar aceste programe genereaza un cod HTML care este de multe ori prea incarcat si de proasta calitate. HTML este de asemenea utilizat in e-mail. Majoritatea aplicatiilor de e-mail folosesc un editor HTML incorporat pentru compunerea e-mail-urilor si un motor de prezentare a e-mail-urilor de acest tip. Acest curs prezinta elementele de baza ale limbajului HTML si modul de lucru cu acesta, va ajuta sa invatati cum sa creati pagini web folosind aceasta tehnologie. Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de exemplu Mozilla Firefox, care este gratuit. Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare exemplu prezentat si creati si altele pornind de la acestea. Retineti ca acest curs reprezinta o baza si un punct de

pornire pentru invatarea HTML, ne fiind prezentate aici toate proprietatile si elementele HTML. Pentru o cunoastere mai amanuntita a acestora, vizitati site-ul W3C HTML.

Principalele elemente HTM L
1. Ce este HTML? (Hypertext Markup Language) - Este un set de coduri logice care constituie apariţia unui document web si a informatiilor pe care le deţine. Codurile sunt scrise intre "<" (paranteza deschisa) si ">" (paranteza inchisa), cu toate ca nu sunt chiar paranteze, aşa se numesc si arata aşa: < >. Exemplu: <BODY> sau <FONT> - Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere si un element de închidere distins prin "/" in interiorul parantezei deschise "<". Exemplu: <FONT> ... </FONT> - Primul cuvânt care apare înăuntru "<" se numeşte element sau eticheta HTML si spune browser-ului sa facă ceva, precum <FONT> - Cuvintele care urmeaza după element in interiorul "< >"se numesc atribute care descriu proprietăţile elementului. Cum ar fi : culoarea, mărimea, etc. - Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care sunt scrise, intre ghilimele (" ") valorile atributelor. - Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori. - In urmatorul exemplu elementul este FONT atributul COLOR si valoarea BLUE: <FONT COLOR="BLUE">Acest text va fi albastru</FONT> 2. Structura documentului HTML - Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor. - La început un element HTML cuprinde (înconjoară ) datele documentului. Acest element conţine doua subelemente principale: HEAD si BODY. In HEAD se poate adauga titlul paginii web si alte elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri CSS. In BODY se adauga continutul documentului care va fi afisat in pagina web. Exemplu: <html> <head> <title>Titlu Documentului</title> </head> <body> Continutul paginii </body> </html>

Structura generala a unui document HTML <HTML> <HEAD> Acesta are si el mai multe sub-elemente: <TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se încheie cu </TITLE> <BASE> Poate fi folosit pentru a înregistra locaţia documentului in forma URL. (Necesar daca documentul nu este accesat in locaţia lui originala). Se încheie cu </BASE> <LINK> Indica o relaţie dintre document si alte obiecte de pe WEB. Se încheie cu </LINK> <META> Aici sunt scrise informaţii cum ar fi tastatura (limbaj) folosita, descrierea si cuvinte cheie care pot fi găsite de motoarele de căutare. Se încheie cu </META> <SCRIPT> Conţine oricare din JavaScript sau VB Script. Se încheie cu </SCRIPT> <STYLE> Conţine informaţii privind stilul, grafica informaţiilor care vor apărea pe pagina. Se încheie cu </STYLE> Aici se încheie elementele adaugate in HEAD </HEAD> <BODY> Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt incluse in acest element. Aici pot fi puse si elemente cum ar fi: <SCRIPT> </SCRIPT> Se încheie cu </BODY> </HTML>- Lectia 1

Crearea si editarea paginii HTML
Sunt mai multe programe cu care se pot crea pagini web, chiar fara a cunoaste limbjul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver. Editoarele de text sunt programele de baza, si cele mai folosite, pentru editarea paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare câteva din codurile invizibile ale limbajului HTML, astfel se creaza documente rapid si usor, in plus ocupa foarte putin spatiu si resurse de memorie, acestea insa necesita cunoasterea limbajului HTML. Dintre editoarele de text cunoscute cel mai folosit este NotePad, care este folosit si pentru acest curs, dar poate fi utilizat orice editor de text. Pentru începatori si pentru usurinta cu care se lucreaza, eu recomand folosirea aplicatie NotePad sau Notepad++, dar cei avansati pot folosi si altele cum ar fi Dreamweaver. 1. Crearea bazei de început a unui document Cum ati vazut in Lectia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea unui

Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic continut in pagina: <html> <head> <title>MarPlo.net . copiati acest cod intr-o pagina noua deschisa cu Notepad si apoi salvati fisierul cu extensia . Dupa ce a fost salvat fisierul. si in BODY un text "Continut". deschideti-l cu un browser (trebuie sa mearga cu dublu-click pe el). are HEAD si BODY in interiorul bazei <HTML>.All Files. exemple si explicatii. Pentru început deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web. Fiecare 2 unitati ale codului reprezinta una din culorile RGB. Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii. pe care ar trebui sa-l completati cu un text reprezentativ ca titlu al documentului dv. 2.: "pagina. sa nu depaseasca 70 caractere. si indicat. Green.Proprietatile documentului pot fi controlate de atributele elementului BODY. Jocuri si Anime</title> </head> <body> <h1>Pagina HTML</h1> Lectii. de exemplu cum ar fi culorile pentru fondul paginii. In interiorul elementului HEAD are elementul TITLE. </body> </html> . La TITLE puteti pune orice text. pentru text si diferite faze ale link-urilor. Blue). care va fi afisat in browser. Culorile sunt setate folosind culorile de baza: rosu. acestea sunt reprezentate ca valori hexadecimale si sunt scrise intre ghilimele (" "). . la inceput trebuie adaugat caracterul '#'. dar este bine sa scrieti ceva care sa descrie cat mai bine obiectul si continutul paginii deoarece este ceea ce cauta si indexeaza multe portaluri de cautare de pe internet. . a-l salva alegeti la "Save as type" . Setarea proprietarilor documentului .html"). Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra meniurilor). Aceasta este: <html> <head> <title> Titlul </title> </head> <body> Continut </body> </html> Acum pagina dv.Cursuri. Daca nu stiti deja..<h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.Ca sa vedeti rezultatul. expresia folosita RGB (Red. verde si albastru.document HTML.html. pt. apoi la "File name" ii scrieti numele si extensia (ex.

o . o .Pentru a seta culoare fondului paginii adaugati in eticheta <BODY> atributul BGCOLOR. VLINK .Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra: <body bgcolor="#0000ff"></body> • Culoarea textului o .Acestui element ii puteti adauga informatii care sa defineasca culoarea sau imaginea din fondul paginii.De exemplu: #00aa11 reprezinta o culoare care nu are Rosu (00).Iata un exemplu in care culoarea fondului va fi albastru si culoarea textului va fi rosu. Elementul BODY • .Acesta va afecta tot textul din document care nu este colorat de alte elemente. VLINK si ALINK) o . • .culoarea initiala a link-ului. • .Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va prezenta culorile standard. cum ar fi link-ul.Aceste atribute controleaza culoarea link-ului in diferite stari 1. o . o . atributul TEXT va fi adaugat astfel: <body bgcolor="#0000ff" text="#ff0000"></body> • Link-uri (LINK. 3. Standard este rosu. • . ALINK . Standard este purpuriu. textul si culoarea link-urilor.Modul de setare al acestor atribute este urmatorul: .Culoarea standard pentru text este Negru. Standard este albastru 2. de obicei fondul este alb. are Verde (aa) si Albastru mai putin (11).culoarea link-ului in momentul activarii.Atributul TEXT controleaza culoarea textului normal din document.culoarea unui link vizitat. LINK .

Daca imaginea este mai mica decât dimensiunile paginii atunci imaginea va fi multiplicata pana va acoperi întreg cadru documentului.Un exemplu de cod HTML cu imagine pentru background este urmatorul: <body background="imagine.html").gif" bgcolor="#ffffff"></body> In acest exemplu fondul pagini va fi dat de imaginea fisierului "imagine. in NotePad alegeti din meniul File comanda Save si salvati fisierul cu orice nume doriti dar cu extensia html (sau "htm") .htm" sau ".gif" si de asemenea am setat BGCOLOR astfel incat in timpul procesului de încarcare a imaginii culoarea fondului va fi alba. o . Folosirea unei imagini va da un aspect placut documentului. Extensia standard pentru un fisier care reprezinta o pagina web este ". Salvarea trebuie facuta intr-un format pe care browserul îl poate recunoaste. textul rosu.html).jpg. . Daca nu scrieti extensia. Dupa ce a-ti creat baza de început a unui document si a-ti setat proprietatile.Pentru a salva documentul ca sa arate ca o pagina web.html". Este indicat ca imaginea sa fie in format *. . De obicei folosesc (". linkurile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul activarii va fi galben.Pentru a vedea documentul ca o pagina web.<body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff" alink="#ffff00"></body> Rezultatul va fi o pagina cu fondul alb.Elementul body ofera posibilitatea înlocuiri fondului paginii cu o imagine (Background image). Pentru a vedea cum arata un document al carui fond este o imagine click aici. exemplu: index.(La File name: scrieti si numele si extensia ". trebuie sa salvati fisierul. NotePad va salva documentul in format "txt". duceti-va in directorul in care a-ti .gif sau *. link-urile albastre.html". • Folosirea unei imagini ca fond pentru pagina (background) o .

in <H1> pana la foarte mic in <H6>. • . elementele Headings sunt folosite ca titluri sau pentru o mai buna impartire a continutului paginii. Paragraf <p> .. Opera).salvat fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse). Un nou rând.. Aici puteti vedea structura generala a unei pagini Web Titluri. Sau deschide-ti browser-ul si din comanda Open deschideti documentul pe care l-ati salvat. (headings) unde 'x' este un numar intre 1 si 6. </p> . </Hx> • . Una din metode este sa deschideti aplicatia NotePad si din meniul File alegeti Open apoi gasiti fisierul pe care vreti sa-l modificati si dati clic pe butonul Open.. • .In cadrul elementului BODY. Dupa ce terminati modificarile salvati. astfel daca redeschideti documentul ca o pagina web acesta va fi deschis cu noul format. . Internet Explorer.. deschideti documentul cu NotePad. Linie orizontala 1.Pentru a continua munca. Paragrafe. Titluri <Hx> . a face modificari paginii sau pentru a adauga altceva in documentul HTML. acesta va fi deschis automat de browser-ul pe care-l folositi (Mozilla Firefox.Mărimea textului înconjurat de elementul Heading variază de la foarte mare.Pentru titluri din continutul documentului HTML este indicat folosirea etichetelor <Hx>. Mai jos puteti vedea exemplu: Cod HTML <html> <head> <title>Titlu documentului</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> Cum apare in pagina Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 2.

.<br> este un Element Gol dar poate sa conţin atribut..Tag-ul <br> permite sa decizi unde textul va incepe un nou rând... Paragraf 2 .Paragrafele permit sa adaugi text in document astfel incat lungimea de afisare a textului va fi ajustata de marimea deschiderii browser-ului si fiecare paragraf va incepe un nou rând. Un nou rand <br> • Cum apare in pagina Paragraf 1 Paragraf 2 Paragraf 3 Paragraf 4 .Distanta dintre doua paragrafe succesive este mare deoarece browser-ul le afiseaza cu un rând gol intre ele. Mai jos puteti vedea exemplu: Cod HTML <html> <head> <title>Titlu documentului</title> </head> <body> <p>Paragraf 1</p> <p>Paragraf 2</p> <p>Paragraf 3</p> <p>Paragraf 4</p> </body> </html> 3. • . • . </p> <p>Paragraf 2</p> </body> </html> Cum apare in pagina Heading 1 Paragraf 1 Linie 2 Linie 3 .• . nu se foloseste </br> Mai jos puteti vedea exemplu: Cod HTML <html> <head> <title>Titlu documentului</title> </head> <body> <h1>Heading 1</h1> <p>Paragraf 1<br> Linie 2<br> Linie 3<br> . astfel se forteaza începerea unui nou rând. <br> nu are si nu cere element de închidere.

Center.COLOR = seteaza culoarea liniei Mai jos puteti vedea exemplu: Cod HTML <html> <head> <title>Titlu documentului</title> </head> <body> <h1>Heading 1</h1> <p>Paragraf 1<br> Linie 2<br> Linie 3<br> . in pixeli sau procente din lungimea afisarii paginii (standard 100%) o . valoarea LEFT va muta cursorul jos la prima linie din marginea ştanga...Elementul <hr> foloseste urmatoarele atribute: o .. 4.ALIGN = aliniaza linia (Left.. Linie orizontala <hr> • .WIDTH = lungii liniei.Elementul <br> foloseşte un singur atribut – CLEAR care poate avea valoarea LEFT.. Daca o imagine este aşezata in partea stanga a paginii. adica Stanga.NOSHADE = afiseaza linia fara a avea un aspect 3D o . Centru sau Dreapta paginii ( Standard centru) o . in pixeli (standard este 2) o . si sunt folosite daca este o imagine pe pagina.SIZE = latimea liniei.Acest element afiseaza o linie orizontala in document • . Paragraf 2 Formatul textului .Acest element nu foloseşte element de închidere [</hr>] • . RIGHT sau ALL. </p> <hr> <hr color="#1111fe" size="4" width="50%"> <p>Paragraf 2</p> </body> </html> Cum apare in pagina Heading 1 Paragraf 1 Linie 2 Linie 3 . Right). Atributul CLEAR forţează o linie in jos.

Underline (subliniat) <u> ..Bold (ingrosat) <b> . semnele "+" sau "-".. tag-uri si atribute. Bold.Marimea textului poate fi modificata cu elementul FONT si atributul SIZE. Italic..... puteti modifica aspectul textului. </b> . • Exemplu : <font color="#00dd00">Acest text are culoarea verde</font> 2. 1. Tag-ul <FONT> . ca valoare relativa. </i> . </u> Exemple: <b> Bold </b> <i> Italic </i> <u> Underline </u> Alte elemente folosite pentru formatul textului sunt: .Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR. • Exemplu : <font face="Arial Black">Acesta este tipul de font Arial Black</font> • . Underline si alte elemente Elemente des folosite pentru formatul textului sunt: • • • .HTML contine mai multe elemente. marimea si culoarea textului. pentru afisarea textului in mai multe formate cu aspecte grafice diferite. Atributul SIZE poate lua valorile numerice de la 1 la 7 si pe langa acestea poate folosi.. </FONT> Cu acest element.Italic (inclinat) <i> . <FONT>. • Exemplu : <font size="+2"> Doua mărimi mai mare</font> • . Textul normal (daca nu este specificat acest atribut) are valoarea 3.Tipul fontului poate fi modificat cu elementul FONT si atributul FACE. cum sunt tipul fontului folosit.. • .

Textul incadrat de elementul PRE este prezentat intrun singur font.Italic .<i> Italic </i> . in interiorul elementului FONT • .<u> Subliniat </u> <font color="#ff0000"> Colorat </font><br> <em>Accentut</em> . cum ar fi <br> pentru o noua linie si &nbsp.<em> Accentuare (Emphasis) </em> . Paragraful <p>… </p> si Linia orizontala <hr> . Alinierea Câteva elemente pot avea atributul (ALIGN) pentru aliniere. <html> <head> <title>titlu documentului</title> </head> <body> <p><font size="+1">O singura marire</font>.normal <font size="-1">O singura micsorare</font><br> <b>Bold</b>.Tele type Citatie 3. • . indiferent de fontul ales cu atributul FACE.• . Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente: . oricare ar fi atributul FACE. pentru mai mult spaţiu intre cuvinte.Strong . ne mai fiind nevoie de alte elemente adiţionale.Colorat Accentut . Spatiile mai lungi si liniile necesare sunt prezentate aşa cum sunt scrise in NotePad.O singura micsorare Bold.Browser-ul de obicei arata aces element ca italic • . browser-ul prezinta acesta intr-un singur tip de font.<cite> Citatie </cite> . Cele trei valori ale atributului ALIGN sunt: LEFT.<pre> Performated </pre> .Reprezinta o citatie din document.Subliniat .In browser va fi afisat asa: O singura marire.Ca si PRE. Mai jos puteti vedea câteva exemple de coduri si modul lor de afisare in browser. RIGHT si CENTER.<strong> Strong </strong> Browser-ul de obicei arata aces element ca bold • . cum ar fi Titlurile <Hx> . &nbsp.<strong> Strong </strong> <tt>Tele type</tt><br> <cite> Citatie </cite></p> </body> </html> .normal .<tt> Teletype </tt> .

<strike> Text taiat </strike> . </center> Va centra elementele 4.. Alte etichete HTML pentru formatul textului • • . Tot ce este poziţionat cu elementul DIV poate fi aliniat oriunde-n pagina.<div align="valoare"> .• .<sub> Afisaza textul in pozitia subscript </sub> • .Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu aplicatii tehnice • .<small> Prezinta textul intr-un font mic </small> • .. indiferent daca in acel loc se afla si alt ceva (Imagine. Text.<sup> Aseaza textul in pozitia superscript </sup> In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.<center> .In browser va fi afisat asa: Text taiat Prezinta textul intr-un font mare Prezinta textul intr-un font mic Aseaza textul in pozitia subscript normal Aseaza textul in pozitia superscript .<code> Folosit pentru extragerea unui cod de program </code> . </div> Poate conţine cele mai multe elemente.<big> Prezinta textul intr-un font mare </big> • .. <html> <head> <title>Titlu documentului</title> </head> <body> <p> <strike> Text taiat </strike><br> <big> Prezinta textul intr-un font mare </big><br> <small> Prezinta textul intr-un font mic </small><br> <sub> Aseaza textul in pozitia subscript </sub> normal <sup> Aseaza textul in pozitia superscript </sup><br> </p> </body> </html> . …).<dfn> Defineste exemplu de termen inchis </dfn> • .. • .

</samp> • .<var> Folosit pentru variabile sau argumente de comenzi </var> In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser. </address> . </q> .Folosit pentru citate scurte.<blockquote> . creaza spatiu pentru text. <html> <head> <title>Titlu documentului</title> </head> <body> <p> <dfn> Definite exemplu de termen inchis </dfn><br> <code> Folosit pentru extragerea unui cod de program </code><br> <samp> Folosit pentru simple productii de programe. etc.<kbd> Folosit pentru text care va fi scris de utilizator </kbd> • . scripturi .. </samp><br> <kbd> Folosit pentru text care va fi scris de utilizator </kbd><br> <var> Folosit pentru variabile sau argumente de comenzi </var><br> </p> </body> </html> .. </blockquote> Folosit pentru incadrarea de citate mai lungi.• .<q> . Folosit pentru text care va fi scris de utilizator Folosit pentru variabile sau argumente de comenzi . scripturi . <html> <head> <title>Titlu documentului</title> . • . • . etc. Pentru a crea mai mult spatiu puteti adauga de mai multe ori acest element.<address> ...In browser va fi afisat asa: Definite exemplu de termen inchis Folosit pentru extragerea unui cod de program Folosit pentru simple productii de programe. In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser. scripturi . etc..Alte elemente pentru formatul textului: • ..<samp> Folosit pentru simple productii de programe.Cu acest element se specifica informatii cum ar fi autorul documentului si detalii pentru contact.

• . <br> Aceasta este prima zi din restul vietii tale. Suite 130 Toronto.. orice este posibil.</q> <blockquote> Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie.</head> <body> <p> <q>Daca vrei si crezi. 1.Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai multe elemente <li> . 180 Attwell Dr. Prin acestea textul este mai usor de citit si evidentiat. Suite 130 <br> Toronto. <html> <head> <title>titlu documentului</title> . Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie. ON <br> M9W 6A9</address> </center> </p> </body> </html> . Mai jos puteti vedea exemplu. </li> (list element). </blockquote> <center> <address>180 Attwell Dr.. orice este posibil. • . ON M9W 6A9 Marcatori si numerotare HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Fara atributul "type" specificat in "<ul>" acestea prezintă un marcaj ca un bullet. Elementele pentru marcatori si numerotare Un element des folosit in formarea listelor (neordonate) este <ul>.<ul> este elementul de început si dupa scrierea listei se incheie cu </ul>. Aceasta este prima zi din restul vietii tale.In browser va fi afisat asa: Daca vrei si crezi.

Un alt element folosit pentru formarea listelor (ordonate) este <ol>. • .</li> <li>List item 2 .Exemplu: <html> <head> <title>titlu documentului</title> </head> <body> <ul type="square"> <li>List item 1 .</li> <li>List item 3 .......<ol> ..  List item 2 .</li> </ul> </body> </html> ...In pagina web apare asa:  List item 1 ...In pagina web apare asa: • List item 1 ... ... • List item 2 .  List item 3 .</head> <body> <ul> <li>List item 1 . • .</li> <li>List item 2 .... circle (cerc) si square (patrat) ...Sunt 3 tipuri de marcaje: disc.</li> <li>List item 3 ..Impreuna cu <ol> se foloseste <li> ...Tipul de marcaj care se doreste folosit se introduce prin atributul type in eticheta <ul> ... Elementele din lista sunt numerotate automat.. </ol> este un element de numerotare...</li> </ul> </body> </html> . </li> Iata un exemplu: <html> <head> <title>titlu documentului</title> . • List item 3 .

... 3. Exemplu: <html> <head> <title>titlu documentului</title> </head> <body> <ol type="a"> <li>List item 1 ..stil: i. List item 3 .</li> </ol> . 2.. .. II.... List item 1 .</li> <li>List item 3 . . iii. List item 2 . ii.Alta lista: <ol type="I" start="3"> <li>List item 1 .. De asemenea se poate specifica numarul de inceput al numerotarii printr-o valoare data atributului start.. b... III. Acestea sunt controlate de atributul "type care este adaugat in elementul <ol>.. c. 3.. List item 3 .. .</li> </ol> </body> </html> .</li> <li>List item 2 ....</head> <body> <ol> <li>List item 1 .</li> </ol> </body> </html> .. type="a" .. . le puteti vetea mai jos: • • • • - type="1" ... List item 1 .. c...</li> <li>List item 3 .. type="I" .Alta lista: ..stil: a. Sunt mai multe tipuri de numerotare care pot fi folosite.. List item 2 ..... b.</li> <li>List item 2 . type="i" . 2.stil: 1.In pagina web apare asa: a.stil: I....</li> <li>List item 3 ..</li> <li>List item 2 . .In pagina web apare asa: 1..

In urmatorul exemplu puteti vedea cum se folosesc aceste elemente : <html> <head> <title>titlu documentului</title> </head> <body> <dl> <dt>HTML</dt> <dd> ..<dl> . care cuprinde in el elementele <dt> si <dd> • .. </dl> este folosit (impreuna cu "dt" si "dd") pentru definirea si incadrarea unei liste de definitii. Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea face o separare mai buna a continutului.. </dt> Defineste elementul din lista.Limbaj pentru pagini web</dd> <dt>Dog</dt> <dd>dog = caine</dd> <dd>animal de casa</dd> <dl> </body> </html> ... introducand elementele <ul> si <ol> imbricate (unele in celelalte) impreuna cu elementele <li> Exemplu: <html> <head> <title>titlu documentului</title> .. List item 3 ..Hyper Text Markup Language</dd> <dd> .<dt> .Hyper Text Markup Language . 2... folosite pentru descrierea elementului definit. </dd>. • . Fiecare tip de astfel de element trebuie precedad de unul sau mai multe elemente <dd> . List item 1 . IV.. V. List item 2 ..In pagina web apare asa: HTML .Limbaj pentru pagini web Dog dog = caine animal de casa Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare.III. Alte elemente pentru asezarea textului in pagina Alte elemente pentru asezarea textului sunt: tag-ul <dl>..

PCX 2.. </img> împreuna cu urmatoarele atribute : • .Observati ca tot ce contine "<ol> .. </ol>" este adaugat in cadrul unui "<li> </li>" . BMP. .</head> <body> <ul type="square"> <li> List item 1 . JPE).. Alt List item .Valoarea acestui atribut determina locatia fisierului care contine imaginea.. Alte tipuri de formate (folosite mai rar) sunt: • PNG. Adaugare Imagini HTML contine si elemente pentru adaugarea de imagini in pagina web..... </li> </ol></li> <li> List item 5 ...... d..src . </li> <li> Alt List item . Alt List item ...In pagina web apare asa:  List item 1 ... 1.  List item 2 .. </li> </ul> </body> </html> .. TIFF. Formatul imaginilor care pot fi folosite Cele mai folosite formate pentru imaginile adaugate intr-o pagina HTML sun GIF si JPEG (JPG . <ol type="a" start="3"> <li> Alt List item . avantajul acestora este ca imaginile care au aceste extensii au o marime mica (in bytes). c.... </li> <li> List item 2 .  List item 5 . Adaugarea unei imagini intr-o pagina web Pentru a introduce o imagine intr-un format HTML se foloseşte elementul <img> . avand maximum 256 de culori..

de 5 pixel. in pixeli. Right . TextTop . Pot fi folosite urmatoarele optiuni: o Bottom . specificat in pixeli.height . De exemplu o valoare de 5 va pune un spatiu invizibil.width . • . Top .La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de unele browsere) sau cand utilizatorul va pozitiona. ABSMiddle .• . in pârtile verticale ale imaginii. Daca nu este scris imaginea va fi prezentata cu inaltimea originala.Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii. specificat in pixeli. Left . ABSBottom • .vspace . mouse-ul peste imagine.border .Valoarea acestui atribut reprezinta lungimea imaginii. • .Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii. • . in pârtile orizontale ale imaginii. valoarea acestui atribut reprezinta grosimea chenarului. de 5 pixel. In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o pagina web si cum pot fi folosite atributele : <html> <head> <title>titlu documentului</title> </head> <body> <img src="imagine.alt . De exemplu o valoare de 5 va pune un spatiu invizibil. • .hspace .Prin adaugarea acestui atribut imaginea va aparea înconjurata de un chenar. in pixeli.In pagina web va aparea: . Daca nu este scris imaginea va fi prezentata cu lungimea originala.jpg" alt="puteti adauga orice text" align="top" width="100" height="120" border="4" hspace="10" vspace="7"></img> </body> </html> . • .align . in browser. Baseline .Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii. in pixeli.Acest atribut permite asezarea imagini in locuri diferite pe pagina. Middle .

vezi Lectia 10 Culoarea link-urilor poate fi schimbata de următoarele atribute.a este elementul specific pentru crearea link-urilor .reprezinta culoarea link-ului când acesta este activat. care trebuie scrise in interiorul elementului <BODY> • link="#0000ff .Titlu link este textul ascuns care apare cand este pozitionat mouse-ul deasupra link-ului .Incercati singuri mai multe exemple. Sunt foarte importante in crearea de pagini web.net) .Lectia 6 Crearea de link-uri Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini. In loc de acest text se poate folosi si o imagine. Forma generala pentru crearea unui link este urmatoarea: • <a href="url" title="Titlu link">Nume</a> . • alink="#ff0000 .href este atributul care marcheaza indicarea adresei link-ului ..url este adresa link-ului (a paginii care va fi deschisa).extensie"> Cand documentul este alcatuit din mai multe cadre se foloseste si atributul target.marplo.title este atributul prin care se da un titlu link-ului (un text ascuns. • Exemplu: . • vlink="#00ffff . sari de la un document la altul sau la alt site. care apare numai cand este pozitionat mouse-ul deasupra link-ului) .reprezinta culoarea link-ului in browser. folosind si alte atribute si valori prezentate mai sus.reprezinta culoarea link-ului când pagina respectiva a fost / este vizitata. De exemplu (http://www.Nume este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul. astfel "Nume" va fi inlocuit cu <img src="nume_imagine.

asa: • <a href="http://nume_site/pagina" title="Titlu link">Nume</a> 2. Link-uri interne . care sunt si ele de doua feluri: a) Link-uri externe câtre pagini ale aceluiasi site. De exemplu: • .nume./nume_fisier.com". adresa URL din link trebuie sa contina si domeniul (numele site-ului) paginii tinta..extensi e" title="Titlu link">Nume</a> b) Link-uri externe câtre alte site-uri.sunt link-uri câtre alte texte din aceeasi pagina. . Se folosesc când pagina respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina. codul va fi scris asa: o <a href="director/nume_fisier.daca documentul tinta se afla intr-un director din cel care se afla fisierul in care se scrie link-ul. codul va fi scris asa: o <a href="nume_fisier. ci se poate folosi doar cale in directoare.daca documentul tinta se afla intr-un director anterior celui in care se afla fisierul in care se scrie link-ul. Aici. de exemplu.(sunt cele mai utilizate).Pentru creare de link-uri interne trebuie urmati urmatorii pasi: • 1.extensie" title="Titlu link">Nume</a> • .<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00"> Link-urile sunt de doua feluri: 1.extensie" title="Titlu link">Nume</a> • . Se scrie urmatorul cod la textul tinta. codul va fi scris asa: o <a href=". Pentru acestea URL-ul poate sa nu includa si domeniul site-ului. numele si extensia documentului la care se face saltul. cum ar fi "http://www. care marcheaza locatia unde se va face saltul si se afla in aceeasi pagina cu linkul .daca documentul tinta se afla in acelasi director cu fisierul in care se scrie linkul. codul HTML se va scrie. Link-uri externe .

e un fel de semn care indica locatia.mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (in kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data. o .atributul "name" indica tinta pentru link. o Link-urile interne si externe pot fi combinate. Pana aici am prezentat numai avantaje. browserul poate afisea o alta pagina. Astfel putem face saltul câtre un anumit text aflat intr-o alta pagina. dezavantajul . se scrie urmatorul cod: o <a href="#cuvant">Nume</a> o ."Textul tinta" este textul unde se face saltul. se poate folosi o imagine care reprezinta toate acele butoane . In pagina respectiva se scrie codul de la pasul 1. o . la textul ales pentru tinta link-ului. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul câtre textul ales). iar in pagina in care va fi link-ul se scrie: • <a href="adresa_pagina#cuvant">Nume</a> Harti de imagini Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone. trebuie sa fie unic pentru fiecare link.aici "cuvant" este acelasi text scris la pasul 1."cuvant" poate fi orice cuvânt. pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor). in cazul unui click pe zona Brasov se incarca o pagina care descrie diverse obiective turistice din judetul Brasov. apoi in functie de zona pe care se executa click. • 2. iar un click pe o alta zona de judet ar duce la alta pagina care descrie obiectivele turistice din acel judet. De exemplu. O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate.<a name="cuvant">Textul tinta</a> o .

249" href="url"> </map> In tabelul de mai jos puteti vedea atributele care se folosesc si descrierea acestora: Instructiune <img atribute > Atribute ismap Descriere marcaj de includere a imaginilor specifica faptul ca este o harta de imagine pe server (se foloseste mai rar.major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va vedea imaginea si nu va intelege mai nimic (putem totusi folosi marcajul "alt" de specificare a textului alternativ pentru imagini). se adauga in interiorul tag-ului "<img>" atributul "usemap" a carui valoare reprezinta numele hartii.numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care este "impartita" imaginea. Crearea hartii de imagini Pentru formarea unei harti de imagini. 56.unde pt. 200. 156. Totusi acest lucru este foarte rar.in cadrul acestuia se adauga elemente • <area atribute> . apoi se incepe formarea hartii prin elementul: • <map name="nume_harta"> </map> . . 149" href="url"> <area shape="rect" coords="100. URL poate fi orice adresa de site sau pagina a site-ului curent: • <img src="poza. de obicei folosim harti de imagine la client) . In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2 cadre).acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor). 120.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap" .

sus si dr. 0).pentru poly (poligon) se dau coordonatele colturilor poligonului href = "=url=" URL .pentru point (punct) se dau coordonatele punctului . pe care. se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0. In aceasta imagine avem trei zone distincte: dreptunghi. . variaza in functie de SHAPE = forma regiunii: . point (punct). si cand dam click pe ele. avem imaginea de mai jos. cerc si romb (poligon).pentru rect (dreptunghi) se dau coordonatele celor 4 colturi sau a celor din stg. circle sau circ (cerc). le-am definit sa fie tratate ca zone diferite. fiecare deschide cate o pagina diferita (sugerata de numele din zona respectiva). prin codurile HTML de creare a hartii de imagini.ul asociat regiunii specificate din cadrul imaginii. adica x = 0. separate. poly sau polygon (poligon) <map atribute > < / map > coordonatele unei regiuni (in pixeli). apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini alt = "text" Iata un exemplu practic. jos coords = "coordonate" ale regiunii <area atribute > . y = 0).usemap="nume_harta" lowscr = "url" name = "nume_harta" shape = "forma" specifica harta de imagine la client imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape) specifica regiunile unei harti de imagine la client numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>) defineste o regiune a unei harti de imagine forma regiunii: rect sau rectangle (dreptunghi).pentru circ (cerc) se dau coordonatele centrului cercului si raza . in cazul unui clic pe acea regiune se incarca pagina specificata prin URL textul asociat regiunii specificate din cadrul imaginii.

ci prin coordonatele folosite in atributul "coords".257.html" alt="Curs HTML" title="Curs HTML" shape="circle" coords="251.47"> <area href=".php" alt="Date de contact" title="Date de contact" shape="rect" coords="6. 190.184"> <area href="curs. coordonate care au fost alese pentru a se potrivi cu desenul.Observati ca mouse-ul isi schimba forma numai cand este deasupra zonelor care au fost definite ca sa fie suprafete a hartii de imagini.97../index.116.. Codul HTML pentru acest exemplu este urmatorul (studiati cu atentie atributele folosite si coordonatele scrise.257"> </map> </div> Lucru cu tabele Tabelele sunt elemente foarte utile pentru asezarea si prezentarea continutului intr-o pagina web. revizuiti si tabelul de mai sus): <div align="center"> <img src="image_map. Reperul cel mai important este lungimea in pixeli din coltul stanga-sus pana in punctele care formeaza zona dorita.110.143. Aceasta definire nu este facuta prin desen.gif" alt="Harta de imagini" border="0" width="300" height="300" usemap="#map1"> <map name="map1"> <area href="dir/contact.297.html" alt="Pagina principala" title="Pagina principala" shape="poly" coords="150. .217. 150.

bgcolor = defineste culoarea tabelului • . link-uri sau imagini Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel: <table border="1"> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2.coloana 1 linia 4..width = specifica lungimea tabelului (In pixeli sau procente din lungimea paginii) .Linia (randul) Tabelului <tr> .coloana 1 linia 3...... paragrafe. </table> .coloana 2 2. care alcatuiesc structura tabelului.coloana 2</td> </tr> <tr> <td>linia 3. • • • .coloana 2</td> </tr> <tr> <td>linia 4..Titlul Tabelului <th> .Sub-titlu tabelului <caption> .coloana 1</td> <td>linia 3.coloana 2 linia 3. Atributele Tabelului • . </caption> Linia tabelului de obicei contine elementul pentru titlurile tabelului si elementul pentru coloanele tabelului..Coloanele tabelului (datele) <dt> . </tr> . </dt> • ...1.In pagina web apare asa: titlu 1 titlu 2 linia 2.coloana 2 linia 4. </th> .coloana 2</td> </tr> </table> . Crearea de tabele Pentru a crea tabele in paginile web se foloseste elementul <table> .coloana 1 linia 2.coloana 1</td> <td>linia 2.coloana 1</td> <td>linia 4. acesta incadreaza alte patru sub-elemente. cum ar fi cele pentru formatul textului. In cadrul elementelor pentru titluri si coloanele tabelului se pot adauga si alte elemente HTML.

coloana 1</td> <td>linia 2.Sub-titlu tabelului "caption" permite specificarea unei linii de text care va aparea deasupra sau sub tabel.coloana 2 acesta este textul 3.• .bordercolor = culoarea liniei din jurul tabelului • . Atributele specifice elementelor pentru titlu si coloane • . care poate fi si o imagine • .background = controleaza culoarea de fond a tabelului.bordercolordark = culoarea întunecata folosita de doua linii din cele patru care înconjoara tabelul Sub-titlu tabelului .cellpadding = spatiu dintre linia celulei si continutul acesteia (in pixeli) • .rowspan = specifica cat de multe randuri ale tabelului aceasta celula va inlocui .coloana 2</td> </tr> </table> .In pagina web apare asa: titlu 1 titlu 2 linia 2.border = grosimea liniei (in pixeli) ce defineste tabelul si înconjoara fiecare celula • .bordercolorlight = culoarea luminoasa folosita de doua linii din cele patru care înconjoara tabelul • .colspan = specifica cat de multe coloane ale tabelului aceasta celula va inlocui • .align = controlează poziţionarea tabelului in pagina. right. sau center • .cellspacing = spatiu dintre celule (in pixeli) • . cu următoarele atribute : left.coloana 1 linia 2. acest lucru este definit de atributul "align" care poate lua valorile: top (deasupra) bottom (jos) Exemplu: <table border="1" cellpadding="2"> <caption align="bottom">acesta este textul</caption> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2.

sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie .coloana 2 .colorat</td> </tr> </table> .bgcolor = defineste culoarea celulei (dar nu imagine) • .coloana 1</td> <td>linia 3.colorat acesta este textul Exersati singuri si alte exemple de tabele.background = controleaza culoarea de fond a celulei.• .coloana 1 linia 3. middle sau bottom) • .height = specifica inaltimea celulei (In pixeli sau procente din inaltimea paginii) in urmatorul exemplu puteti vedea rezultatul folosirii atributelor: "colspan" "rowspan" si "bgcolor" <table border="1" cellpadding="2"> <caption align="bottom">acesta este textul</caption> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td colspan="2">linia 2. care poate fi si o imagine • . right sau center) • .coloana 1</td> </tr> <tr> <td rowspan="2">linia 3.valign = alinierea datelor celulei pe verticala (top.coloana 1 titlu 2 linia 3.In pagina web apare asa: titlu 1 linia 2.coloana 2 linia 4.coloana 2</td> </tr> <tr> <td bgcolor="#adadff">linia 4.width = specifica lungimea celulei (In pixeli sau procente din lungimea paginii) • . cu mai multe randuri si coloane.align = alinierea datelor celulei pe orizontala (left.Lectia 9 Utilizarea cadrelor Cadrele.coloana 2 . sau frame-uri.

procente din inaltimea ecranului . </FRAMESET> in interiorul documentului HTML... de la alta adresa (ex. Acesta putând fi combinat cu procente sau pixeli. în sectiunea HEAD.htm) iar in al doilea cadru un alt document HTML. doc1. cate unul pentru fiecare divizare a ferestrei din browser.htm) Dupa cum puteti vedea in imaginea de mai jos. folosind (*). <FRAMESET> determina cat din spaţiul ferestrei este atribuit fiecărui cadru. ROWS • Determina numarul de linii si marimea cadrelor care vor fi asezate in linie.*" . De exemplu puteti creea doua cadre intr-o fereastra.afisate mai multe pagini in aceeasi fereastra de browser.pixeli absoluti . Ex : "120.*" sau "30%. Configurarea cadrelor Pentru inceput se adauga un element <FRAMESET> . Fiecare frame prezinta în interior un document propriu (in general un document HTML). începând de sus.25%" . in primul cadru puteti incarca un document HTML (ex. Acesta va conţine elemente <FRAME>. ex : "75%. • Pot fi folosite urmatoarele valori: o . folosind atributele ROWS sau COLS care impart ecranul in Linii sau Coloane. Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML: • <frameset> si <frame> sau <iframe> 1. ex : "360.120" .valori proportionale. doc2. Un frame (cadru) este o parte din suprafata ferestrei browserului.

Determina spatiul vertical dintre continutul cadrului si marginea acestuia.COLS • Determina numarul de coloane si marimea cadrelor care vor fi asezate pe coloane.Marginea cadrelor. începând din stanga. • FRAMESPACING .Aici trebuie scris numele de identificare al cadrului. • Pot fi folosite urmatoarele valori: o . NO. Valori posibile: 0 sau 1 • BORDERCOLOR . Determina spatiul orizontal dintre continutul cadrului si marginea acestuia o MARGINHEIGHT . valoare in pixeli. Elementul <FRAME> • Acest element defineste un singur cadru .Atribut optional. Daca FRAMEBORDER este 0 atunci si acesta trebuie sa aiba valoarea 0 • BORDER .Acest atribut este specificat in pixeli. ex : "33%.77%" .Stabileste afisarea sau nu a unei borduri in jurul cadrelor.procente din lungimea ecranului . valoare in pixeli.Aici trebuie scrisa adresa si numele paginii folosite pentru cadru o NAME . ex : "380. folosind (*).*" Alte atribute ale elementului <FRAMESET> • FRAMEBORDER . Acesta putând fi combinat cu procente sau pixeli. este scris in interiorul elementului <FRAMESET> • Pentru fiecare cadru trebuie scris cate un element <FRAME> • Acesta are urmatoarele atribute: o SRC . 1 sau YES.Atribut optional. Valori posibile: YES .*" sau "30%. Posibile valori: 0. o SCROLLING . o MARGINWIDTH .pixeli absoluti .valori proportionale.120" .Afiseaza un Scroll Bar in cadru. Ex : "120.Acest atribut permite sa alegi culoarea bordurii.

este nevoie de specificarea .*"> <FRAME SRC="baner. Aceasta valoare este cea mai indicata) o NORESIZE . impiedica utilizatorul sa modifice marimea cadrului.htm" NAME="right" SROLLING="YES"> </FRAMESET> <BODY> </BODY> </HTML> De asemenea se poate crea un design de cadre cu o combinatie de linii si coloane. un al doilea element "<FRAMESET>" va fi scris in locul elementului "<FRAME>" care descrie a doua linie. In acest caz. NO (nu va fi prezentat nici un Scroll Bar) si AUTO (browser-ul va decide daca este nevoie de Scroll Bar. Atributul target Cand sunt create link-uri care sunt folosite pentru a deschide pagini in cadre.Optional. al doilea element "<FRAMESET>" trebuie urmat de inca doua elemente "<FRAME>" . cel din stânga ocupând 23% din spatiul paginii iar cel din dreapta 77% <HTML> <HEAD> <TITLE> TITLU PAGINII </TITLE> </HEAD> <FRAMESET COLS="23%.Pentru o mai buna intelegere puteti studia exemplu de mai jos. Al doilea element <FRAMESET> va divide spatiul ramas in doua coloane.77%"> <FRAME SRC="doc1. Pentru aceasta.(permite afisarea Scroll Bar-ului).htm" NAME="date"> </FRAMESET> </FRAMESET> <BODY> </BODY> </HTML> 2.*"> <FRAME SRC="Meniu.htm" NAME="meniu"> <FRAME SRC="Continut. prin selectarea marginii acestuia si mutarea in stânga sau dreapta ori sus sau jos.htm"> <FRAMESET COLS="120. care creaza o pagina ce contine trei cadre: <HTML> <HEAD> <TITLE> TITLU PAGINII </TITLE> </HEAD> <FRAMESET COLS="120. Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre.htm" NAME="left" SROLLING="NO"> <FRAME SRC="doc2.

Adaugarea cadrelor iframe Pentru crearea unui cadru cu "<iframe>" puteti folosi.htm"> Numele link-ului </a> .acesta va încarca link-ul in aceeasi fereastra de unde a fost actionat. De exemplu. pagina se va deschide in cadrul curent . • target="_parent" o . disparând astfel cadrele. daca avem un link in Meniu. ca exemplu.acesta va încarca link-ul in toata fereastra browser-ului. 3. daca acesta nu exista atunci link-ul se va deschide in actuala fereastra de browser. Special Target: • Sunt 4 nume speciale de TARGET. Atributul target foloseste ca valoare textul din atributul NAME al elementului FRAME in care se va deschide noua pagina. acesta spune browser-ului in ce cadru sa deschida pagina.htm in spaţiul in care se afla celalat cadru. astfel ramanand deschisa si vechea fereastra. de exemplu Continut. • target="_top" o . codul HTML pentru link va arata astfel in Meniu.unui atribut in eticheta de link "<a>" numit target. in locul unde doriti sa apara frame-ul): .atributul TARGET trebuie sa aiba acelasi nume specificat in codul HTML. urmatoarea sintaxa (aceasta se adauca in sectiunea BODY.cadrul "_parent" este cadrul anterior de la care a fost deschis noul cadru. Fiecare are o functie speciala.htm care vrem sa deschidă pagina Doc3.htm: • <a href="Doc3. • target="_blank" o .acesta va încarca link-ul intr-o noua fereastra de browser.daca nu se specifica atributul TARGET . care nu pot fi asociate cu atributul NAME. • target="_self" o .htm" target="numele cadrului Continut.htm. ca si atributul NAME din FRAME-ul in care se doreste afisarea paginii.

Lectia 10 • Curs HTML Home Engleza Spaniola CSS PHP-MySQL JavaScript AJAX Flash Anime Jocuri Forum þÿ Cautare Nume: Parola: þÿ Autentifica Tine-ma minte Recuperare parola Inregistrare Crearea formularelor De cele mai multe ori formularele HTML sunt create pentru a fi folosite impreuna cu alte programe si scripturi web. JavaScript si altele. Elementul <form> . 1. program care trebuie sa accepte datele din FORM . ... 0=nu). cum sunt PHP.. Tag-ul FORM Pentru a crea un formular in HTTML se foloseşte elementul <form> .aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI).. "frameborder" specifica daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da. "scrolling" reprezinta permisiunea de derulare a paginii din cadru (yes sau no). in cadrul acestuia se vor adauga celelalte elemente specifice. "width" si "height" reprezinta lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli). le proceseaza si trimite înapoi raspunsul la browser. </form> nu contine atribute pentru format.. iar "nume_frame" este numele cadrului (necesar pentru atributul "TARGET" in link-uri sau cand frame-ul este folosit de JavaScript). foloseste insa urmatoarele atribute: • action . </form>.- <iframe src="url_pagina" width="600" height="200" align="center" scrolling="yes" frameborder="0" name="nume_frame"> </iframe> Unde "iframe" este elementul principal care indica adaugarea unui frame in pagina. ."url_pagina" e adresa paginii care va fi incarcata in iframe.

numele elementului respectiv de formular. folosit de scripturile la care sunt trimise datele • value . </input> • type .. Casete de text ..specifica daca un buton sau alta forma va fi initial selectata (bifata).datele (valoarea) asociate acelui element de formular si care sunt trimise. • target . folosit de scripturi VB (Visula Basic) sau JavaSript.determina mecanismul folosit pentru a codifica continutul transmis din formular.Este numele formularului. impreuna cu numele. JavaScript) • size . dupa transmiterea datelor din form.specifica numarul de caractere care dau lungimea zonei de text • maxlength . </input> Proprietatile elementului <input> .• method . Aceste valori specifica ce metoda HTTP va fi folosita pentru a trimite continutul formularului la server.folosit pentru campuri de tip text.aici putem scrie get . • readonly . • enctye . casete.. • name . buton si altele .) • name . sau post..tipul de FORM folosit (caseta text.impedica folosirea campului care are aceasta proprietate. catre scripturi (PHP. Va fi vizibil dar nu va putea fi folosit. necesare pentru a aduna datele care vor fi trimise la aplicatie pe server.numarul maxim de caractere acceptate • checked . Cele mai multe se creaza prin atributul type al elementului <input> . butoane in pagina web. 2.. datele acestuia nu vor fi trimise din formular la vreun script. CGI.Este tinta cadrului (frame) unde pagina va fi vizualizata.. impedica modificarea valorii (textului) din acel camp • disabled . Elementele de formular In continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea diferite campuri.

numarul maxim de caractere acceptate sa fie adaugate de utilizator Camp textarea • . .standard este OFF.text o name ."textarea" este un element ce creaza un camp in pagina.Acest element foloseste urmatoarele atribute: o name . astfel ca textul wraps in browser sa fie prezentat exact cum este scris de utilizator.Acest element foloseste urmatoarele atribute: o type . Dar poate avea valorile : "VIRTUAL" sau "PHYSICAL".este folosit pentru a crea in pagina un camp pentru text (cu o singura linie).numele casutei de text.numarul de linii a zonei de text o cols .specifica numarul de caractere care dau lungimea casutei de text (default 20) o maxlength . folosit de scriptul la care sunt trimise datele o value .numele campului de text. • . • .Codul este <textarea. folosit de scriptul la care sunt trimise datele o rows .Codul este <input type="text"></input> In browser va apare: • þÿ .• .></textarea> In browser va apare: • . in care utilizatorul poate adauga mai multe linii de text.va reprezenta propriul context ca valoare aleasa.numarul de coloane a zonei de text o wrap . Un sir de text care apare in casuta de text o size .

"hidden" este folosit pentru a adauga in formular date care sa nu fie vizibile in browser si care sunt trimise la scripturi impreuna cu celelalte date din formular. • . pentru a nu se vedea parola scrisa.Codul este <input type="password"></input> In browser va apare: • . • . . Caracterele adaugate in aceasta caseta nu sunt afisate cu valoarea lor reala. adaugarea parolei (default 20) o maxlength . folosit de scriptul la care sunt trimise datele o value .valoarea care se doreste sa fie transmisa prin acea caseta ascunsa. va reprezenta parola default din acea caseta.Acest element foloseste urmatoarele atribute: o type . o size .Acest element foloseste urmatoarele atribute: o type .numele casutei ascunse.Casete pentru parole • .Codul este <input type="hidden"></input> • .specifica numarul de caractere care dau lungimea casutei pt. folosit de scriptul la care sunt trimise datele o value .hidden o name .de obicei nu este adaugat.password o name . Daca este scris.numarul maxim de caractere acceptate sa fie adaugate de utilizator Casete de formular ascunse • .numele casutei pentru parole."password" este folosit pentru a permite adaugarea de parole.

valoarea casetei radio respective. caseta checkbox respectiva este selectata (bifata). .daca este adaugat acest atribut. caseta radio respectiva este selectata (bifata).Check box • . folosit de scriptul la care sunt trimise datele o value . Radio button • .checkbox o name .valoarea casetei checkbox respective.este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege una singura • .numele casutei radio.Codul este <input type="radio"></input> In browser va apare: • .este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege (oricate din ele) prin bifarea lor • .Acest element foloseste urmatoarele atribute: o type .Acest element foloseste urmatoarele atribute: o type .Codul este <input type="checkbox"></input> In browser va apare: • .radio o name .daca este adaugat acest atribut. folosit de scriptul la care sunt trimise datele o value . care poate fi selectata (bifata) o checked . care poate fi selectata (bifata) o checked .numele casutei checkbox.

specifica numarul de caractere care dau lungimea casutei upload.Casete pentru upload • . Aceasta caseta este insotita de un buton "Browse" prin care se alege documentul care va fi transferat pe server.acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune când este apasat • . Buton simplu • .Acest element foloseste urmatoarele atribute: o type .Codul este <input type="file"></input> In browser va apare: • .Acest element foloseste urmatoarele atribute: o type .numele casutei upload. folosit de scriptul la care sunt trimise datele o size . CGI) • .numele butonului.textul care apare pe buton.Codul este <input type="button" value="Buton"></input> In browser va apare: • .button o name . Buton Submit • . (upload-ul se face tot prin intermediul unui script (PHP."file upload" este folosit pentru a permite utilizatorului sa incarce alte documente pe serverul web. necesar pentru a fi folosit de script o value .file o name .acest element face ca prin apasarea lui browser-ul sa trimita numele si valoarea tuturor celorlalte elemente din formular la scriptul de pe server .

textul care apare pe buton.submit o name .textul care apare pe buton. Imagine pentru buton Submit • . poate fi folosit de scriptul la care se trimit datele o value .Codul este <input type="submit" value="Trimite"></input> Trimite In browser va apare: • .numele butonului.reset o value .Acest element foloseste urmatoarele atribute: o type . Buton Reset • . poate fi folosit de scriptul la care se trimit datele o src .permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente din formular • .Codul este <input type="image" src="locatie_imagine"></input> • .Codul este <input type="reset" value="Sterge"></input> Sterge In browser va apare: • . Elemente select .numele butonului.• .locatia imaginii folosite.Acest element foloseste urmatoarele atribute: o type .Acest element foloseste urmatoarele atribute: o type .image o name .permite aplicarea unei imagine in locul butonului Submit standard • .

Cele doua tipuri de elemente Select sunt: • 1.specifica valoarea variabilei numita in optiunea respectiva (necesara pt.Atributete elementului "<select>" sunt: o name .seteaza inaltimea elementului Select. scriptul care va primi datele).cand acesta este adaugat. In browser va apare: þÿ .• . necesar pentru a fi folosit de scriptul la care sunt trimise datele o size . • .numele acestui element.sunt doua tipuri de elemente Select. care reprezinta si numarul de optiuni din lista care vor fi vizibile initial o multiple . • .unde "name" este atributul care defineste numele acestui tag SELECT.Codul este: <select name="select"> <option>Optiune 1</option> <option>Optiune 2</option> </select> o . un meniu.<option> </option> foloseste doua atribute: o selected .prezenta acestui atribut specifica faptul ca utilizatorul poate selecta mai multe optiuni.pentru acest element se foloseste tagul "<select></select>". care formeaza o lista. iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare. • . optiunea respectiva este selectata când pagina web este initial incarcat."<select></select>" este folosit impreuna cu elemente "<option> </option>" care reprezinta lista elementelor ce sunt adaugate si afisate in lista de selectare. este indicat folosirea acestui atribut doar cu una singura. o value . unde diferenta o face folosirea atributului SIZE • . cu date ce pot fi selectate. • . Drop Down List (Lista de derulare) o . Cand sunt adaugate mai multe optiuni.

unde "name" este atributul care defineste numele acestui tag SELECT. (numite si "meta tag-uri). iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare. In continuare sunt prezentate exemple de meta tag-uri care sunt indicate sa fie adaugate in fiecare pagina HTML: <meta content="text/html. marquee. charset=UTF-8" http-equiv=Content-Type> .. acestea au 2 atribute: name (care determina tipul meta tag-ului) si content (care determina continutul meta tag-ului). In browser va apare: þÿ .• 2. List Box o . object Codul HTML contine si anumite elemente speciale.Toate aceste elemente trebuie incadrate in tag-ul "<form> . Cel mai important este tag-ul <title></title> Alte elemente importante pentru motoarele de cautare sunt cele META. unele folosite pentru optimizarea paginii in vederea unei cat mai bune indexari in motoarele de cautare sau altele pentru adaugarea de aplicatii audio si video ori alte elemente in pagina. </form>"!. atributul "size" determina inaltimea elementului select care determina si numarul de optiuni vizibile initial..Codul este: <select name="select" size="4"> <option>Optiune 1</option> <option>Optiune 2</option> </select> o .Lectia 11 Elemente speciale meta. embed. 1. Elemente pentru optimizarea indexarii paginii Aceste elemente de optimizare se adauga in sectiunea HEAD a documentului HTML.

separate."). pentru fiecare pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o fraza (cea de la name="description" content="o fraza care descrie . de cuvinte. etc"> • .textul adaugat cu acest tag pentru descriere are prioritate inaintea frazelor din continut. virgula"> • .url=http://www. (folositi maxim 40. motorul va indexa dupa prima fraza din pagina. dar nu strica sa-l folositi. daca nu avem in marcajul META acea fraza. e-mail..indica browserului ca este un fisier HTML • . tot ea va fi data la o eventuala cautare. </title> este bine sa se regaseasca si in meta tag-urile "keywords". Un alt meta tag care este cateodata necesar.motoarele de cautare tin cont de cuvintele din meta "keywords" in momentul indexarii site-ului pentru atunci cand sunt afisate rezultate de cautari. "description" cat si in titlurile din continutul paginii.acesta nu este neaparat necesar... <meta name="author" content="numele dvs.. acesta are urmatoarea forma: <meta http-equiv="Refresh" content="4. • . motorul de cautare ne da o lista de pagini. (folositi maxim 1520 cuvinte). Recomandare: Cuvintele din tag-ul <title> .. 50 caractere). dar exista si altele.nume_site/pagina"> . este "Refresh".charset stabileste tipul de caractere (in general se foloseste ISO-8859-1 sau UTF-8).• . Arata autorul documentului. prin. <meta name="keywords" content="lista. dar nu are legatura cu motoarele de cautare.in cazul unei cautari dupa cuvintecheie. <meta name="description" content="O fraza care descrie pe scurt continutul paginii"> • .

ofera posibilitatea alegerii mai multor controale care includ: console. 2. Adaugarea de sunet la o pagina HTML Pentru a adauga sunet intr-o pagina web.movs". are urmatoarele atribute: • src .afiseaza o consola pentru sunet.defineste de cate ori se va repeta sunetul • delay .defineste de cate ori se va repeta sunetul • volume . Exemplu: <embed src="sunet.inaltimea in pixeli a consolei • width .acesta determina browser-ul sa incarce o noua pagina. la "src" scriti calea catre fisierul video.movs".defineste timpul dintre repetari • title . care au extensiile ". Exemplu: <bgsound src="sunet. Diferenta e ca nu .midi" loop="3" title="titlul melodiei" derlay="5"> 2. dupa un anumit numar de secunde (aici 4).introduce un background (fundal) audio in pagina.cand este TRUE va ascunde controalele.mpeg" sau ". are urmatoarele atribute: • src .midi" width="145"height="60" autostart="truie" volume"100" controls="console" hidden="false"> . Se adauga similar ca si sunetul.au sau wav) • loop .Defineste locatia fisierului audio folosit (midi .lungimea in pixeli a consolei.au sau wav) • controls . butoane de play si altele • autostart . <embed></embed> .Tag-ul "<embed>" poate fi folosit si pentru afisarea de imagini video. <bgsound></bgsound> . console mici.Textul care va descrie sunetul. puteti folosi elementele <embed> sau <bgsound>: 1.nume_site/pagina).• .seteaza volumul sunetului (sonorul) • height .Defineste locatia fisierului audio folosit (midi . cea care este adaugata la url-ul din acest tag (aici http://www. Practic.avi". face un redirect. recomandat este ". standard este FALSE • loop .cand este TRUE sunetul incepe in timp ce sunetul este descarcat de browser • hidden . ".

Iata un exemplu de cod prin care puteti adauga imagini flash in pagina web: <object width="580" height="400"> <param name="movie" value="fisier.swf" width="580" height="400"> </embed> </object> Unde "width" si "height" sunt dimensiunile cadrului in care este afisata imaginea flash. in milisecunde. daca acesta nu este deja instalat. up.defineste cum se va misca textul (scroll.swf"> <embed src="fisier.trebuie folosit atributul "hidden" iar pentru "width" si "height" dimensiunile nu trebuie sa fie mai mici decat dimensiunile in care este salvat fisierul video. intre refreshuri de miscare.Totusi. 3. Exemplu de miscare pe orizontala <marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee text</marquee> In pagina va arata asa: .defineste de cate ori se va misca textul • height .culoarea zonei in care se misca textul • direction . alternate) • scrolldelay . right.(stanga.inaltimea in pixeli a zonei in care se misca textul • width . . pentru aceasta este incadrat in alt element. afisarea de imagini video necesita mai mult timp deoarece fisierele video au dimensiuni destul de mari. Are urmatoarele atribute: • loop . slide.Afisarea in pagina a elementelor cu EMBED necesita folosirea unui plug-in.seteaza numarul. prin care puteti crea un efect de miscare a unui text (sau imagine) care este incadrat de a cest element. este ceruta automat incarcarea lui de catre browser. <marquee> </marquee>. dreapta. Elemente de animatie text HTML are un tag special. <object> </object> -."<embed>" se foloseste si pentru adaugarea de imagini flash (cu extensia ". -.swf" (trebuie scrisa aceeasi cale la ambele atribute).swf"). down) . sus. . jos) • behavior .directia de miscare (left. iar la atributele "value" si "src" se scrie calea catre fisierul ". care de cele mai multe ori.lungimea in pixeli a zonei in care se misca textul • bgcolor .

Lectia 12 Stiluri CSS in HTML Cu HTML 4.Iata un alt exemplu unde miscarea se face pe verticala: <marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100" height="100">Marquee text</marquee> In pagina va arata asa: . este faptul ca acelasi continut HTML poate fi inclus in mai multe pagini din site.In loc de text poate fi folosit si o imagine. Acestea ajuta la afisarea grafica si incadrarea continutului in pagina. pentru cei care fac site-uri doar cu HTML. cu una din formulele de mai sus (tag-ul "<iframe>" sau "<object>") se adauga in fiecare fisier al paginilor. De exemplu. Includerea unei pagini HTML externe In afara de modalitatea cu folosirea tag-ului <iframe> pentru afisarea in pagina web HTML a continutului din alta pagina HTML Ex. in cazul unui Meniu ce trebuie afisat in toate paginile site-ului.: <iframe src="url_pagina.exista si o alta solutie.html". iar la o eventuala modificare a meniului se va face doar in codul acestuia din "meniu. .html") apoi. data de tag-ul <object> folosit cu atributele "data" si "type". codul acestuia poate fi scris intr-un fisier special ("meniu.0 au aparut specificatiile pentru modele de stiluri. inlocuind textul (aici "Marquee text") cu tagul "<img> pentru imagine.CSS).Avantajul utilizarii uneia din aceste 2 metode.html" width="600" height="200" align="center" scrolling="yes"> </iframe> . 4. Urmatorul cod HTML este sintaxa generala de afisare intr-o pagina web a continutului HTML aflat in alta pagina externa: <object data="adresa_pagina_externa" type ="text/html" width="600" height="400"> </object> . cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets . fiind scris o singura data..

Modelele de stiluri pot fi aplicate in mai multe moduri: 1.Proprietatile si valorile de sti CSS se introdul in acest element STYLE. Intern . • .direct in eticheta HTML • . folosind proprietati si valori specifice codului CSS.} --> </style> . unele din ele sunt prezentate in tabelul de jos al paginii.">Exemplu h4</h4> • In pagina va apare Exemplu h4 2. In antetul (header-ul) fisierului • .. proprietate:valoare.Pana la acea data."></element> • . </style>. Aceasta spune browser-ului ca sunt adaugate elemente de stil CSS.Exemplu: <h4 style="color:#ff1111.Aceasta metoda este utila cand se doreste folosirea acelorasi stiluri pentru mai multe elemente din pagina astfel sunt scrise o singura data si nu la fiecare element. folosind urmatoarea sintaxa: o <element style="proprietate:valoare.Pentru adaugarea unui STYLE intern la un element se foloseste atributul style urmat de proprietati si valori. textdecoration:underline. culoarea si marimea textului puteau fi date cu instructiunea "font" si cu atributele sale: "face". dupa cum puteti vedea in exemplul urmator: <html> <head> <title>titlu</title> <style type="text/css"> <!-h2 {color:blue.. "color". • .In acest caz se adauga in sectiunea HEAD a documentului HTML urmatoarea sintaxa <style type="text/css"> . Modelele de stiluri pot fi aplicate aproape oricarei etichete HTML. forma. "size".

fiind scrise o singura data. text-decoration:none. NU se mai adauga eticheta "style".. } a:visited { color:#008080. font-family: Arial.Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi coduri de stil pot fi folosite de mai multe pagini din site.css" a:link { color:#0000ff.css" : • Se scrie intr-o pagina noua. chiar tot site-ul.</head> <body> </body> </html> • . font-size:15px. font-weight:normal.In fisierul extern CSS se scriu direct elementele cu proprietatile si valorile dorite. text-decoration:none. • . font-weight:normal. 3.Conform acestui cod.Aici proprietatile si valorile pentru diverse stiluri sunt specificate intr-un fisier extern special. urmatoarele. • . de obicei cu extensia "css" (pe care il putem construi cu un editor de simplu texte gen Notepad). -->" pentru browserele care nu recunosc elementul "<style>" si astfel il ignora. si se salveaza fisierul cu extensia ".. Extern • . In plus ajuta la micsorarea ca marime (in bytes) a documentului HTML care astfel se incarca mai repede. toate textele "h2" din pagina vor avea culoarea albastra si vor fi subliniate. font-size: 15px. • . font-family: Arial. • Exemplu de model pentru creare unui fisier ". } .Se foloseste (optional) "<!-. deschisa cu NotePad..

unde la "href" se scrie calea si numele fisierului css folosit. line-height: 12pt. Diferenta dintre id si class este faptul ca se poate folosi acelasi atribut "class" pentru mai multe elemente HTML.a:active { color:#b54090. Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure etichete HTML. </head>) urmatoarea comanda: o <link href="fisier. iar altul sa poata fi aplicat mai multor etichete HTML de tipuri diferite. font-weight:normal. adaugati in sectiunea HEAD a documentului HTML care va folosi acel fisier cu stiluri. Exemplu pentru "class" <html> <head> <title>Titlul</title> <style type="text/css"> <!-. text-indent: 20px.css" rel="stylesheet" type="text/css"> • . text-decoration:underline. Pentru aceasta se foloseste atributul id sau class in interiorul etichetelor HTML la care vrem sa aplicam un anumit stil. text-decoration:underline. } p{ font-weight: normal. dext-decoration:underline. } • Pentru a adauga acest stil CSS intr-o pagina web. font-family: Arial.cuvant { color:#1111fe. font-size: 15px. font-family: Arial. } a:hover { color:#b54090. (intre <head> .. } --> </style> . pe cand acelasi "id" se foloseste numai pentru un singur element HTML.. font-size: 11pt.

</h2> </body> </html> . • Important: selectorul (aici "cuvant") in STYLE trebuie sa inceapa cu punct (. stilul creat pentru "idh" va fi folosit doar pentru primul element "h2" care contine 'id="idh"' • Important: Pentru stilurile definite de ID. stilul creat poate fi folosit doar de elementele unde vom adauga comanda class="cuvant"...In acest exemplu..... In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi modificate cu STYLE Atribut background Color font-family Descriere imagini sau culori de fundal culoarea textului tipul fontului Valori URL-ul (imaginii) sau culori date prin nume sau valoare RGB nume sau valoare RGB Numele fontului sau al familiei de .</h2> <h3 class="cuvant">Alt text . celelalte elemente nefiind afectate. Incercati singuri aceste exemple pentru a vedea rezultatul. selectorul (aici "idh") trebuie sa inceapa cu #. </h3> </body> </html> . dext-decoration:overline..) Exemplu pentru "id" <html> <head> <title>Titlul</title> <style type="text/css"> <!-#idh { color:#fe1111..</h2> <h2>Alt text . text-align:center.In exemplu de sus. } --> </style> </head> <body> <h2 id="idh">Text .</head> <body> <h2 class="cuvant">Text .

ridge. procent(%) data in puncte(pt). medium. right(dreapta).Pentru aplicarea unui stil css asupra unei portiuni dintr-un text.fonturi font-size font-style font-weight line-height margin-left margin-right margin-top text-align textdecoration text-indent border-style border-width border-color dimensiunea fontului text cursiv grosimea fontului distanta dintre liniile de baza ale randurilor distanta fata de marginea din stanga a paginii distanta fata de marginea din dreapta a paginii distanta fata de textul precedent sau fata de marginea de sus a paginii alinierea textului evidentierea textului distanta primului rand fata de marginea din stanga tipul chenarului grosimea chenarului culoarea chenarului data in puncte(pt). double. dashed. centimetri(cm). inch(in). centimetri(cm). pixeli(px) nume sau valoare RGB 72 pt=1 inch = 25. inch(in). inch(in). outset data in puncte(pt). pixeli(px) normal. centimetri(cm). line-through(taiat) data in puncte(pt). se foloseste eticheta <span> </span>.4 mm. centimetri(cm). DIV si SPAN . light. pixeli(px).in acest exemplu se pot aplica elemente de stil css clasei (. centimetri(cm). solid. pixeli(px) left(stanga). pixeli(px) none. . un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea superioara a literei N sau h si partea inferioara a literei y sau j . justify none(nimic). inset. inch(in). pixeli(px) data in puncte(pt). inch(in). centimetri(cm). center(centru).cls) care vor afecta doar portiunea de text inclusa intre tag-ul "<span>". centimetri(cm). underline(subliniat). demi-bold. studiati lectiile de la Curs CSS. demi-light. inch(in). italic(cursiv). extra-bold data in puncte(pt). pixeli(px) data in puncte(pt). groove. italic extra-light. Pentru mai multe informatii despre lucru cu stiluri CSS. inch(in). ca in exemplu urmator: O fraza <span class="cls"> cu orice text</span> si caractere. dotted. bold.

unul contine un formular iar celalalt o lista "<ul></ul>". formulare. in combinatie cu CSS pot crea aspecte grafice importante. 1. background:#88aafe. DIV si SPAN nu au nici un efect major. dimensiuni stabilite si margini diferite. aceasta deoarece in combinatie cu proprietati CSS poate crea efecte grafice deosebite. ambele pot folosi atributul style (cu proprietati CSS) ori atributele id sau class ca identificator pentru stiluri CSS."> <form action="" method="post"> Nume: <input type="text"></input><br> E-mail:<input type="text"></input><br> <input type="submit" value="Trimite"></input> </form> </div> Alt DIV <div style="width:180px. justify (distanta textului fata de margini egala). Iata un exemplu in care avem 2 div-uri. . linii sau alte DIV-uri.Tag-ul DIV creaza sectiuni de blocuri in pagina. aliniere pe orizontala) care poate avea urmatoarele valori: left (stanga). iar in interiorul lui pot fi incluse oricare elemente HTML: tabele. Tag-ul DIV Tag-ul <div></div> este unul din cele mai folosite elemente HTML.Tag-urile <div></div> si <span></span> nu au efecte importante daca sunt folosite singure. Are doar un singur atribut HTML. background:#aaee88. inaltime si margini cu diferite linii. Cadrul in care acestea sunt adaugate poate avea propriul fundal (background). putand fi folosit si ca o "classa" cu CSS. center (centru). fiecare DIV cu proria culoare de fundal. <div style="width:250px. marcatori."> <ul> <li>Linie 1</li> <li>Linie 2</li> <li>Linie 3</li> </ul> </div> . lungime. border:1px solid blue. align (pt. right (dreapta). border:5px outset #888888. Pentru aceasta. . Singur nu are nici un efect vizual poropriu si nu foloseste nici un atribut HTML special. al caror forma si grafica de continut pot fi manipulate pentru fiecare separat. Chiar daca folosite singure.Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un context.

mai multe detalii vezi Margini si chenare CSS).">Titlu .">Titlu Exemplu</div> </div> In acest exemplu avem un prim DIV cu atributul "style" in care avem o proprietate de pozitionare relativa (pt. • margin . fundal si bordura). In interiorul acestui DIV avem alte 3 div-uri.care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si elementele din jurul lui (pt. margin-left:0.">Titlu Exemplu</div> <div style="position:absolute.Exemplu</div> <div style="position:absolute. a pozitiona toate celelalte elemente pe care el le incadreaza dupa contextul scris anterior) si o alta proprietate pentru marimea textului. margin-top:-1. Acest cod va afisa intr-o pagina web urmatorul rezultat: Nume: E-mail: Trimite þÿ þÿ Alt DIV • Linie 1 • Linie 2 • Linie 3 Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul tag-ului <div> </div> oriunde in pagina. iar prin culoare diferita (cu proprietatea "color") data textului din fiecare "div" va apare in pagina web urmatorul rezultat: .Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este . mai multe detalii vezi Pozitionare CSS). font-size:21px. fixed sau absolute (pt. margin-left:-2."> <div style="position:absolute. margin-top:0. pozitionate absolut si care incadreaza fiecare cate un text identic. color:white. folosind proprietati CSS precum: • position .In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al fiecarui DIV (lungime in pixeli. relative. Prin pozitionarea absoluta div-urile se suprapun. putem afisa in pagina un titlu cu aspect grafic deosebit.care poate lua valorile: static. color:black. margin-left:2. Codul este urmatorul: <div style="position:relative. la o distanta stabilita de proprietatile "margin-top" si "margin-left". Iata un exemplu in care. margin-top:1.. prin folosirea mai multor DIV-uri pozitionate suprapus. color:silver.

Tag-ul SPAN Cu tag-ul <span></span> puteti adauga stiluri grafice unei anumite portiuni dintr-un context. Pentru a intelege mai bine.necesar sa cunoasteti proprietatile CSS de baza (pentru fonturi.Am adaugat portiunea din context (aici textul "Curs HTML") intr-un tag SPAN pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul continutului.net. fontweight:bold.</h4> <ul> <li>Linia 1</li> <li><span> Linie 2. Aceasta este o lectie din <span style="background:#88fe88. in span </span></li> <li>Linia 5</li> </ul> </body> </html> .). in span </span></li> <li>Linia 3</li> <li><span> Linie 4.">Cursul HTML</span> de pe MarPlo. } </style> </head> <body> <h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul frazei. Astfel. Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. background) pe care le puteti invata la Cursul CSS din acest site. proprietatile adaugate elementului "span" intr-o foaie de stil vor fi transferate tuturor elementelor din pagina care sunt incadrate in tag-uri "<span></span>". pozitionare. Pentru aceasta trebuie folosit impreuna cu proprietati CSS care pot fi adaugate printr-un atribut "style" in interiorul etichetei "<span>" (sau in foi de stil). padding:1px.net. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii adaugam proprietatile dorite. borduri. in pagina web va fi afisat textul in felul urmator: Aceasta este o lectie din Cursul HTML de pe MarPlo. prin proprietatile adaugate in "style" (background:#88fe88. iata un exemplu in care se scoate in evidenta anumite cuvinte dintr-un text. Iata un exemplu <html> <head> <title>Titlul</title> <style type="text/css"> span { border:2px solid red. color:#1111fe. si fontweight:bold. . ca in exemplul urmator. 2. margini.Astfel. .

Observati cum a fost adaugat elementul "span" in tag-ul "<style> </style>" din sectiunea HEAD a codului HTML. . <br> continua cu linia a doua.De aceea este indicata folosirea tag-ului "<span></span>" pentru continut din interiorul unei linii. atribuim aceeasi proprietate grafica (bordura rosie) unui tag DIV si unui tag SPAN."> Fraza pe mai multe linii. continua cu linia a doua. se termina cu linia a treia. . ."> Fraza pe mai multe linii. Pentru DIV aceasta incadreaza exteriorul sectiunii (blocul) div-ului.Observati diferenta. Diferenta dintre DIV si SPAN . <br> se termina cu linia a treia. continua cu linia a doua. iar pentru SPAN bordura este afisata pe fiecare linie. <br> se termina cu linia a treia.Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document sub forma unui bloc iar SPAN incadreaza o portiune din context sub forma de linii.' <div style="border:1px solid #fe1111. • Linia • Linie • Linia • Linie • Linia 1 2. </span> . .Acum cu SPAN: Fraza pe mai multe linii.Acest cod va afisa intr-o pagina web urmatorul rezultat: Exemplu de text cu eticheta SPAN in interiorul frazei. in span 5 3. se termina cu linia a treia. in span 3 4. modul in care este afisata bordura. </div> <br> . <br> continua cu linia a doua. . Iata un exemplu din care se poate intelege mai bine.In pagina web va apare Fraza pe mai multe linii..Acum cu SPAN:<br><br> <span style="border:1px solid #fe1111. Acest element face referire la toate tag-urile "<span></span>" din document si le transmite aceleasi proprietati.

Scriere cod CSS. respectand regulile de sintaxa XHTML.folosit pentru o sinntaxa stricta.> . De la HTML la XHTML Explicatiile din acest tutorial sunt pentru cei care cunosc deja limbajul HTML. fiind aproape identic cu HTML 4.dtd". prezentat detaliat in lectiile si tutorialele precedente din acest curs.este tipul cel mai comun si indicat. un DTD (Document Type Definitions) ce contine regulile standard ale elementelor din pagina. acesta trebuie sa aibe la inceput (prima linie) o declaratie !DOCTYPE.w3. Daca stiti deja limbajul HTML. mai stricta. Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS. fiind o varianta avansata a acestuia.org/TR/xhtml1/DTD/xhtml1-strict. Este mai eficient decat sa scrieti in fiecare "<div>" si "<span>" cate un atribut "style". Reguli de sintaxa XHTML 1. Transitional si Frameset.> • Transitional . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. puteti studia prima lectie de la Cursul CSS. Acestora le acordati proprietati CSS o singura data in sectiunea HEAD sau intr-un fisier CSS extern.org/TR/xhtml1/DTD/xhtml1-strict. se poate spune ca stiti si XHTML.Pentru ca un document XHTML sa fie considerat valid.. XHTML este un inlocuitor modern al HTML-ului.dtd". prezentate mai jos.Cand aveti mai multe elemente <div></div> si <span></span> in pagina. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. . Sunt 3 tipuri de DTD ce pot fi folosite: Strict. fara vreun element ce nu e specific XHTML. ce trebuie sccris in prima linie din pagina: • Strict . dar cu o sintaxa putin diferita.w3.01.0 Strict//EN" "http://www. Acesta permite in pagina si elemente HTML ce nu sunt stricte XHTML.0 Strict//EN" "http://www. o combinatie intre HTML si XML. Iata cod-ul specifc fiecaruia. XHTML (eXtensible HyperText Markup Language) are acelasi rol si capacitati ca HTML. Principala diferenta ce trebuie avuta in vedere la XHTML fata de HTML este la sintaxa acestuia. este indicat folosirea atributului "id" sau "class".

/> <br /> <hr /> <input /> <img ...w3.w3. cum se vede in urmatorul exemplu (structura standard ce trebuie sa o aibe o pagina de site XHTML): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Spre deosebire de HTML. iar unele nici nu trebuie sa aibe inchidere.dtd"> <html xmlns="http://www.0 Transitional//EN" "http://www. </body> </html> 2.. charset=utf-8" /> <title>Titlul paginii</title> <meta name="description" content="Descrierea paginii" /> <meta name="keywords" content="cuvinte..Valorile tuturor atributelor trebuie scrise intre ghilimele.> Dupa una din aceste declaratii se adauga codul pentru structura documentului XHTML.0 Frameset//EN" "http://www.. In XHTML <meta . • • Corect: <div> Incorect: <DIV> Corect: <tag atribut="valoare"> Incorect: <tag Atribut="valoare"> 3.dtd".> <br> <hr> <input> <img .org/TR/xhtml1/DTD/xhtml1-frameset.• Frameset . • • Corect: <tag width="80"> Incorect: <tag width=80> 4. /> In HTML <meta . .org/1999/xhtml" lang="ro"> <head> <meta http-equiv="content-type" content="text/html. acest tip e pentru cazuri cand in pagina se folosesc frameuri. care apare in fereastra navigatorului web..org/TR/xhtml1/DTD/xhtml1-transitional. in acelasi tag.mai putin folosit.. principale. . pagina" /> </head> <body> Continutul paginii. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. in care elementele sunt inchise cu un al doilea tag (identic) de inchidere. .w3.> . din.Toate elementele si atributele trebuie scrise cu litera mica. in XHTML toate elementele trebuie inchise si exista tag-uri specifice care au inchidere singulara..

precum <p> </p>. .Toate atributele trebuie sa fie insotite de o valoare. <span> </span>. precum "checked". Iata cateva din cele mai folosite: In XHTML checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" nowrap="nowrap" noresize="noresize" In HTML checked declare readonly disabled selected nowrap noresize 7.Atributul name din tag-urile <a> si <map> a fost inlocuit cu id. codul hexa sau cel decimal (pentru hexadecimal se adauga in fata caracterul # iar pentru decimal se foloseste sintaxa rgb(r. • • Corect: <b>Ceva <i>altceva</i></b> Incorect: <b>Ceva <i>altceva</b></i> 6. sunt la fel. . prin cod HTML si CSS. .La inchiderea tag-urilor trebuie sa se respecte ordinea simetrica de deschidere. puteti utiliza o culoare folosind oricare din cele 3 reprezentari. dar si in alte aplicatii cum ar fi editoare de imagini sau flash. etc. g. 5. daca doriti sa folositi intr-un stil o nuanta de albastru deschis (luam DeepSkyBlue). puteti adauga intr-un cod CSS una din urmatoarele expresii. Cod Hexazecimal (perechi de numere de la 0 la 9 si litere de la A la F).Lectia 15 Coduri culori pentru site Aici gasiti un tabel cu mai multe culori ce pot fi utilizate in designul paginilor web. folosind denumirea culorii.. Fiecare culoare are 3 reprezentari: Denumirea (in engleza).. . Astfel.Celelalte. ) . studiati exemplele urmatoare: De exemplu. Cod Decimal (numere de la 0 la 255). <div> </div>. b)... In HTML fiind atribute. Daca nu stiti cum. care sunt scrise fara vreo valoare.

Tabel Culori Nume culoare (en. background-color: #00FF7F. color: rgb(0. 255). color: #00BFFF. In general asa se folosesc aceste coduri de culori. de exemplu. 127). 255.color: DeepSkyBlue. de data asta o culoare spre verde (am ales SpringGreen) background-color: SpringGreen. 191. cu proprietatea "background-color". pentru cod HTML la "font" (aici nu se foloseste decimal): <font color="DeepSkyBlue">Text de culoare DeepSkyBlue</font> <font color="#00BFFF">Text de culoare DeepSkyBlue</font> Iata inca un exemplu pt. CSS.) Cod Hexadecimal R G B CD 5C 5C F0 80 80 FA 80 72 E9 96 7A FF A0 7A DC 14 3C FF 00 00 B2 22 22 8B 00 00 FF C0 CB FF B6 C1 FF 69 B4 FF 14 93 C7 15 85 DB 70 93 FF A0 7A Cod Decimal R G B 205 92 92 240 128 128 250 128 114 233 150 122 255 160 122 220 20 60 255 0 0 178 34 34 139 0 0 255 192 203 255 182 193 255 105 180 255 20 147 199 21 133 219 112 147 255 160 122 Culori cu fond Rosu IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed Culori cu fond Roz Pink LightPink HotPink DeepPink MediumVioletRed PaleVioletRed LightSalmon Culori cu fond Portocaliu . background-color: rgb(0.

) Culori cu fond Purpuriu (mov) .Coral Tomato OrangeRed DarkOrange Orange FF 7F 50 FF 63 47 FF 45 00 FF 8C 00 FF A5 00 FF D7 00 FF FF 00 FF FF E0 FF FA CD FA FA D2 FF EF D5 FF E4 B5 FF DA B9 EE E8 AA F0 E6 8C BD B7 6B E6 E6 FA D8 BF D8 DD A0 DD EE 82 EE DA 70 D6 FF 00 FF FF 00 FF BA 55 D3 93 70 DB 8A 2B E2 94 00 D3 99 32 CC 8B 00 8B 80 00 80 4B 00 82 Cod Hexadecimal 255 127 80 255 99 71 255 69 0 255 140 0 255 165 0 255 215 0 255 255 0 255 255 224 255 250 205 250 250 210 255 239 213 255 228 181 255 218 185 238 232 170 240 230 140 189 183 107 230 230 250 216 191 216 221 160 221 238 130 238 218 112 214 255 0 255 255 0 255 186 85 211 147 112 219 138 43 226 148 0 211 153 50 204 139 0 139 128 0 128 75 0 130 Cod Decimal RGB Culori cu fond Galben Gold Yellow LightYellow LemonChiffon LightGoldenrodYellow PapayaWhip Moccasin PeachPuff PaleGoldenrod Khaki DarkKhaki Lavender Thistle Plum Violet Orchid Fuchsia Magenta MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo Nume culoare (en.

RGB Culori cu fond Verde GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen Green DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen Aquamarine MediumAquamarine DarkSeaGreen LightSeaGreen DarkCyan Teal Aqua Cyan LightCyan PaleTurquoise Turquoise MediumTurquoise DarkTurquoise AD FF 2F 7F FF 00 7C FC 00 00 FF 00 32 CD 32 98 FB 98 90 EE 90 00 FA 9A 00 FF 7F 3C B3 71 2E 8B 57 22 8B 22 00 80 00 00 64 00 9A CD 32 6B 8E 23 80 80 00 55 6B 2F 7F FF D4 66 CD AA 8F BC 8F 20 B2 AA 00 8B 8B 00 80 80 00 FF FF 00 FF FF E0 FF FF AF EE EE 40 E0 D0 48 D1 CC 00 CE D1 173 255 47 127 255 0 124 252 0 0 255 0 50 205 50 152 251 152 144 238 144 0 250 154 0 255 127 60 179 113 46 139 87 34 139 34 0 128 0 0 100 0 154 205 50 107 142 35 128 128 0 85 107 47 127 255 212 102 205 170 143 188 143 32 178 170 0 139 139 0 128 128 0 255 255 0 255 255 224 255 255 175 238 238 64 224 208 72 209 204 0 206 209 Culori cu fond Albastru .

CadetBlue SteelBlue LightSteelBlue PowderBlue LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue RoyalBlue Blue MediumBlue DarkBlue Navy MidnightBlue Nume culoare (en.) 5F 9E A0 46 82 B4 B0 C4 DE B0 E0 E6 AD D8 E6 87 CE EB 87 CE FA 00 BF FF 1E 90 FF 64 95 ED 7B 68 EE 41 69 E1 00 00 FF 00 00 CD 00 00 8B 00 00 80 19 19 70 Cod Hexadecimal RGB FF F8 DC FF EB CD FF E4 C4 FF DE AD F5 DE B3 DE B8 87 D2 B4 8C BC 8F 8F F4 A4 60 DA A5 20 B8 86 0B CD 85 3F D2 69 1E 8B 45 13 A0 52 2D 95 158 160 70 130 180 176 196 222 176 224 230 173 216 230 135 206 235 135 206 250 0 191 255 30 144 255 100 149 237 123 104 238 65 105 225 0 0 255 0 0 205 0 0 139 0 0 128 25 25 112 Cod Decimal RGB Culori cu fond Maro Cornsilk BlanchedAlmond Bisque NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown Sienna 255 248 220 255 235 205 255 228 196 255 222 173 245 222 179 222 184 135 210 180 140 188 143 143 244 164 96 218 165 32 184 134 11 205 133 63 210 105 30 139 69 19 160 82 45 .

secvente escape .Brown Maroon A5 2A 2A 80 00 00 FF FF FF FF FA FA F0 FF F0 F5 FF FA F0 FF FF F0 F8 FF F8 F8 FF F5 F5 F5 FF F5 EE F5 F5 DC FD F5 E6 FF FA F0 FF FF F0 FA EB D7 FA F0 E6 FF F0 F5 FF E4 E1 DC DC DC D3 D3 D3 C0 C0 C0 A9 A9 A9 80 80 80 69 69 69 77 88 99 70 80 90 2F 4F 4F 00 00 00 165 42 42 128 0 0 255 255 255 255 250 250 240 255 240 245 255 250 240 255 255 240 248 255 248 248 255 245 245 245 255 245 238 245 245 220 253 245 230 255 250 240 255 255 240 250 235 215 250 240 230 255 240 245 255 228 225 220 220 220 211 211 211 192 192 192 169 169 169 128 128 128 105 105 105 119 136 153 112 128 144 47 79 79 000 Culori cu fond Alb White Snow Honeydew MintCream Azure AliceBlue GhostWhite WhiteSmoke Seashell Beige OldLace FloralWhite Ivory AntiqueWhite Linen LavenderBlush MistyRose Culori cu fond Gri Gainsboro LightGrey Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black Caractere speciale .

&#198.ca sa afisati in pagina simbolul ½ (jumatate) se adauga secventa escape &frac12.) . Nume ISO Latin1 &#193 &#225. &Auml. De exemplu: . &Agrave. se poate folosi codul &lt.In tabelul din aceasta pagina este o lista cu mai multe caractere speciale (simboluri. (sau codul ISO &#189. Nume Aacute aacute Acirc acirc acute AElig aelig Agrave agrave amp Aring aring Atilde atilde Auml Sintaxa &Aacute &aacute. &atilde. (sau codul ISO &#169. &#224. &#194. &#229. &Acirc. &aring. &acirc. diacritice si caractere specifice altor limbi straine) si codurile lor specifice HTML si ISO.pentru caracterul < (mai mic). &aelig. ca browser-ul sa nul confunde cu inceputul de tag. &#197. Aceste caractere pot fi adaugate si afisate corespunzator in orice pagina web. &agrave. &#192. &AElig. &#180. &#195. &Atilde. &Aring. putand fi introduse cu aceste coduri cunosute si cu denumirea de Secvente Escape.) . &#230. &acute. &#38.ca sa afisati in pagina simbolul © (copyright) se adauga secventa escape &copy. &#196. &#226. &amp. &#227. Descriere A ascutit (Á) a ascutit (á) A circumflex (Â) a circumflex (â) accent grav (´) ligatura AE (Æ) ligatura ae (æ) A grav (À) a grav (à) ampersand (&) A cu inel (Å) a cu inel (å) A tilda (Ã) a tilda (ã) A umlaut (Ä) .

&curren. &#164. &#190. &#231.) en spatiu ( ) Eth nordic (Ð) eth nordic (ð) E umlaut (Ë) e umlaut (ë) jumatate (½) sfert (¼) trei sferturi (¾) . &Eacute. &#203. &#235. &eth. &#176. &egrave. &#240. &copy. &#166.auml brvbar Ccedil ccedil cent copy curren deg div Eacute eacute Ecirc ecirc Egrave egrave emdash emsp endash ensp ETH eth Euml euml frac12 frac14 frac34 &auml. &eacute. &#200. &#169. &emsp. &Ecirc. a umlaut (ä) bara intrerupta (¦) C sedila (Ç) c sedila (ç) cent (¢) copyright (©) valuta generala (¤) grad (°) impartire (÷) E ascutit (É) e ascutit (é) E circumflex (Ê) e circumflex (ê) E grav (È) e grav (è) em dash (&emdash) em spatiu ( ) en dash (&endash. &ccedil. &euml. &div. &#188. &#202. &emdash. &frac14. &#162. &frac34. &#234. nedefinit nedefinit nedefinit nedefinit &#208. &#247. &Egrave. &ETH. &brvbar. &#201. &#189. &#233. &deg. &Euml. &#199. &Ccedil. &#232. &#228. &ecirc. &cent. &frac12. &ensp. &divide. &endash.

gt Iacute iacute Icirc icirc iexcl Igrave igrave iquest Iuml iuml laquo lt macr micro middot nbsp not Ntilde ntilde Oacute oacute Ocirc ocirc Ograve ograve

&gt; &Iacute; &iacute; &Icirc; &icirc; &iexcl; &Igrave; &igrave; &iquest; &Iuml; &iuml; &laquo; &lt; &macr; &micro; &middot; &nbsp; &not; &Ntilde; &ntilde; &Oacute; &oacute; &Ocirc; &ocirc; &Ograve; &ograve;

nedefinit &#205; &#237; &#206; &#238; &#161; &#204; &#236; &#191; &#207; &#239; &#171; &#60; &#175; &#181; &#183; &#160; &#172; &#209; &#241; &#211; &#243; &#212; &#244; &#210; &#242;

mai mare decât (>) I ascutit (Í) i ascutit (í) I circumflex (Î) i circumflex (î) exclamatie inversata (¡) I grav (Ì) i grav (ì) intrebare inversata (¿) I umlaut (Ï) i umlaut (ï) paranteza unghiularã dublã stângã («) mai mic decât (<) macron ( ¯ ) micro (µ) punct la mijloc (·) spatiu nonbreaking negatie (¬) N tilda (Ñ) n tilda (ñ) O ascutit (Ó) o ascutit (ó) O circumflex (Ô) o circumflex (ô) O grav (Ò) o grav (ò)

ordf ordm Oslash oslash Otilde otilde Ouml ouml para plusmn pound quot raquo reg sect shy sup1 sup2 sup3 szlig THORN thorn times trade Uacute uacute

&ordf; &ordm; &Oslash; &oslash; &Otilde; &otilde; &Ouml; &ouml; &para; &plusmn; &pound; &quot; &raquo; &reg; &sect; &shy; &sup1; &sup2; &sup3; &szlig; &THORN; &thorn; &times; &trade; &Uacute; &uacute;

&#170; &#186; &#216; &#248; &#213; &#245; &#214; &#246; &#182; &#177; &#163; &#34; &#187; &#174; &#167; &#173; &#185; &#178; &#179; &#223; &#222; &#254; &#215; nedefinit &#218; &#250;

ordinal feminin (ª) ordinal masculin (º) O tãiat (Ø) o tãiat (ø) O tilda (Õ) o tilda (õ) O umlaut (Ö) o umlaut (ö) paragraf (¶) plus minus (±) lira sterlina (£) ghilimele (") paranteza unghiularã dublã dreapta (») marca inregistrata (®) semn sectiune (§) soft hyphen () 1 superior (¹) 2 superior (²) 3 superior (³) sharp s (ß) Thorn nordic (Þ) thorn nordic (þ) inmultire (×) trademark (™) U ascutit (Ú) u ascutit (ú)

Ucirc ucirc Ugrave ugrave uml Uuml uuml Yacute yacute yen yuml

&Ucirc; &ucirc; &Ugrave; &ugrave; &uml; &Uuml; &uml; &Yacute; &yacute; &yen; &yuml;

&#219; &#251; &#217; &#249; &#168; &#220; &#252; &#221; &#253; &#165; &#255;

U circumflex (Û) u circumflex (û) U grav (Ù) u grav (ù) umlaut (¨) U umlaut (Ü) u umlaut (ü) Y ascutit (Ý) y ascutit (ý) yen (¥) y umlaut (ÿ)

XHTML - Tag-uri si atributele lor
In aceasta pagina gasiti o lista, clasificata pe grupe de elemente cu tag-urile XHTML si atributele ce po fi folosite pentru fiecare TAG. Aceasta lista poate fi de folos mai ales cand doriti sa creati pagini web valide XHTML (Transitional), oferind o referinta la ce atribute pot fi folosite cu un anume TAG. - Structura <html> </html> - Tag-ul radacina, ce contine toate celelalte tag-uri si indica browser-ului ca acesta este inceputul /sfarsitul documentului (X)HTML.
• xmlns • dir • lang • xml:lang

<head> </head> - Contine meta informatii (meta-tags), tag-ul "<title> </title>" si alte tag-uri pt. scripturi si stiluri CSS. Toate acestea, cu exceptia Titlului, nu sunt afisate de navigatorul web.
• xml:lang • profile

cuvinte cheie. si altele. • name • content • http-equiv • xml:lang • scheme <link /> .In acest tag se adauga continutul ce va fi afisat in pagina web. autor. • xml:lang <meta /> . prezentate in continuare. Acest continut poate fi alcatuit si din alte tag-uri.Contine Titlul ce va fi afisat in bara de sus a browser-ului. • class • id • style • title • onmousedown • onmouseover • onkeypress • onkeyup • onmouseup • onload . • type • media .Este folosit in tag-ul <head> pentru a face legatura cu (sau a include) o resursa externa. in general CSS (Cascading Style Sheet).Adauga meta informatii despre document.Tag-uri ce pot fi incluse in zona <head> <title> </title> . precum: descriere.<body> </body> . • class • id • style • title • href • xml:lang • hreflang • charset • type • rel • rev • media <style> </style> .Este folosit pentru a defini proprietati de stil CSS pentru elementele din pagina.

<h2> </h2>. descrescand treptat pana la "<h6>". • class • id • style • title • xml:lang <br /> . Textul apare ingrosat si mare pt.• dir • title • lang • xml:lang .Un paragraf cu o linie noua in plus inainte si dupa el. • class • id • style • title • xml:lang <p> </p> . • class • id • style • title • xml:lang <h1> </h1>. Singur nu face nimic. "<h1>".Folosit in general pentru titluri si sub-titluri in pagina web. <h4> </h4>.Text <span> </span> . un cadru cu linie noua inainte si dupa el.O sectiune in document. • class • id • style . <h3> </h3>. de aceea este adesea folosit cu un "id" sau "class" pentru ca sa-i fie aplicate proprietati CSS. fara linie noua la inceput si sfarsit. • class • id • style • title • xml:lang <div> </div> . de aceea este adesea folosit cu un "id" sau "class" pentru ca sa-i fie aplicate proprietati CSS.Adauga o linie noua dupa el.O sectiune in document. <h5> </h5> si <h6> </h6> . Singur nu face nimic.

• title <blockquote> </blockquote> .Afiseaza textul subliniat.Poate fi folosit pentru a prezenta coduri de program. • class • id • style • title • xml:lang • cite <q> </q> . acest tip.Acest Tag poate fi folosit pentru citate /fraze lungi. • class • id • style • title • xml:lang • cite <code> </code> . . • class • id • style • title • xml:lang <i> </i> . Cadrul definit de acesta lasa un anumit spatiu in exterior (stanga si dreapta).Afiseaza textul inclinat. ce vor fi afisate intre ghilimele. • class • id • style • title • xml:lang <b> </b> . • class • id • style • title • xml:lang <u> </u> . citate.Afiseaza textul ingrosat.In acest tag se adauga de obicei fraze scurte. textul fiind afisat distinct pt.

Afiseaza textul in partea de sus a liniei randului. • class • id • style • title • xml:lang <sub> </sub> . • class • id • style • title • xml:lang • accesskey • charset • type . si mai mic. • class • id • style • title • xml:lang <sup> </sup> . • class • id • style • title • xml:lang <em> </em> . si mai mic. • class • id • style • title • xml:lang <a> </a> .Afiseaza textul ingrosat (similar cu <b>).Afiseaza textul inclinat (similar cu <i>).Afiseaza textul in partea de jos a liniei randului.Creaza o legatura catre alta pagina web sau zona din pagina curenta (link intern).• class • id • style • title • xml:lang <strong> </strong> .

numerotate. cerc. • class • id • style • title • xml:lang <dt> </dt> . • class • id • style • title • xml:lang <ul> </ul> .Tag utilizat pentru afisarea unei liste neordonate numeric.• href • hreflang • onblur • rev • rel • shape • coords • tabindex • onfocus • onclick .Tag folosit pentru afisarea unei liste ordonate. fiind adaugat in cadrul acestora.Creaza o lista de definitii.Liste <ol> </ol> . ci cu simboluri gen: disc.Defineste un element in liste <ol> sau <ul>.Defineste un termen pentru lista de definitii. • class • id • style • title • xml:lang <li> </li> . . Trebuie sa contina tag-urile <dt> si <dd>. patrat. • class • id • style • title • xml:lang <dl> </dl> .

• class • id • style • title • xml:lang .Tabele <table> </table> .Folosit pentru a include in pagina elemente multimedia.Este adaugat in cadrul tag-ului <object> si e folosit pentru a trimite parametri la obiectul respectiv. coloane. • class • id • style • title • xml:lang • usemap • name • height • width • classid • codebase • data • type • codetype • standby • tabindex • archive <param /> . • value • type • valuetype • id • name . celule de tabel.Defineste un tabel in care pot fi adaugate randuri. inclus in pagina XHTML. .Se adauga in cadrul tag-ului <dt> si prezinta lista de definitii pentru termenul definit de acel tag. titluri.• class • id • style • title • xml:lang <dd> </dd> .Obiecte <object> </object> .

• class • id • style • title • xml:lang • border • align • summary • width • dellpadding • cellspacing • frame • rules <thead> </thead> . unde se pot include linii si coloane. unde se pot include linii si coloane. • class • id • style • title • xml:lang • char • charoff . • class • id • style • title • xml:lang • char • charoff • align • valign <tfoot> </tfoot> . unde se pot include linii si coloane.Defineste corpul tabelului.Defineste zona de Header (Antet) a tabelului.Defineste zona de subsol a tabelului. • class • id • style • title • xml:lang • char • charoff • align • valign <tbody> </tbody> .

Se foloseste pt. a crea coloane si celule in randurile tabelului.• align • valign <tr> </tr> . celule cu titlu pentru coloane. in care se includ coloane. Afiseaza un scris mai ingrosat.Se foloseste pt.Creaza o linie noua in tabel. • class • id • style • title • xml:lang • axis • abbr • headers • rowspan • colspan • scope • char • charoff • align • valign <td> </td> . Trebuie adaugat in cadrul tag-ului <tr>. • class • id • style • title • xml:lang • axis • abbr • headers • rowspan • colspan • scope • char • charoff . • class • id • style • title • xml:lang • char • charoff • align • valign <th> </th> .

Defineste un titlu pentru tabel. specificata la atributul "type". • class • id • style • title • xml:lang • for • accesskey • onfocus • onblur <input /> . • class • id • style • title • xml:lang .Formular <form> </form> .Defineste o eticheta ce va corespunde unei casute de formular a carui "id" e adaugat in atributul "for". Cand se da click pe textul din eticheta sa. • class • id • style • title • xml:lang • action • enctype • method • onsubmit • onreset • accept • accept-charset <label /> .Incepe crearea unui formular in care pot fi incluse diferite casute si butoane. • class • id • style • title .Adauga o casuta in formular.• align • valign <caption> </caption> . Acest tag trebuie adaugat imediat dupa eticheta <table> si poate fi adaugat doar unul singur. comuta controlul la acea casuta de formular.

Adauga lista cu optiuni in tag-ul <select>.Creaza o lista de selectare optiuni. • class • id • style • title • xml:lang • disabled • selected • label • value <textarea> </textarea> . Aceste optiuni sunt adaugate cu tag-ul <option>. .• xml:lang • name • value • checked • disabled • readonly • size • maxlenght • src • alt • usemap • tabindex • accesskey • accept • onfocus • onblur • onselect • onchange <select> </select> . • class • id • style • title • xml:lang • name • disabled • multiple • size • tabindex • onfocus • onblur • onchange <option> </option> .Creaza un camp pentru adaugare de text.

Alte tag-uri <img /> . • class • id • style • title • src • alt • height • width • xml:lang • longdesc • usemap • ismap <script> </script> .Afiseaza textul din el daca browserul nu stie sa lucreze cu un anumit script.Include o imagine in documentul XHTML.• class • id • style • title • xml:lang • name • disabled • rows • cols • readonly • tabindex • accesskey • onfocus • onblur • onchange • onselect . • type • src • defer • charset • xml:lang <noscript> </noscript> . de obicei JavaScript. • class • id • style • title .Folosit pentru a adauga un script in document.

• xml:lang .

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->