ghid de initiere in html

7/31/2019 Ghid de Initiere in HTML

1/43

Ghid de initiere in limbajul HTMLAutor: j00

1.Introducere

Am scris acest tutorial pentru ca stiu cat de mult va doriti unii dintre voi sa gasiti tutoriale in limbromana si desigur pentru a-mi reimprospata cunostintele.

Nota:Acest ghid este destinat intregii clase de utilizatori,dar este special conceput pentru incepatori.Pparcursul ghidului veti exemple de pagini HTML,copiati ceea ce se afla intre elementele de marca si inclusiv aceste elemente si salvati totul intr-un fisier cu extensia .htm sa.html.Daca lucrati in notepad in momentul in care salvati fisierul puneti numele fisierului intre ghilimelefisier.htm sau selectati la Save as type modul all files si salvati asa fisierul dar de data aceasta faghilimele,deoarece Notepad-ul are obiceiul de a adauga extensia .txt la fisierele care au fost editate cel.Si un ultim lucru inainte de a incepe,majoritatea exemplelor vor fi prezentate fara a fi cuprinse intelementele de marcare la inceputul unui fisier HTML,deci aceste elemente vor trebui scrise de catdumnevoastra.

2.World Wide Web (WWW)

Ce este World Wide Web ?

World Wide Web (sau Web) este cel mai mare rezervor de informatie electronica din lume. Cu alcuvinte, Web este o colectie de milioane de documente legate intre ele, care se gasesc pe calculatoarraspindite in intreaga lume (Web = pinza de paianjen). Cind se parcurg site-uri din Web cu ajutorul unbrowser se pot vizualiza elemente de tip text, grafica, video sau audio (cunoscute sub numele dhipermedia).Internetul este vehiculul care permite comunicarea intre calculatoarele din intreaga lumWeb-ul este deci un sistem de comunicare global care permite calculatoarelor sa transfere dahipermedia in Internet. Altfel spus, Web-ul se poate considera un sistem de documente sau programlegate intre ele, asezate la nivelul superior al Internet-ului (hardware si software).

Nasterea Web-ului

Pe cind lucra la Consiliul European pentru Cercetare Nucleara (CERN), laboratorul european pentrfizica particulelor de la Geneva, Tim Berners-Lee a fost nevoit sa gaseasca o cale de a transmiinformatii catre cercetatorii din domeniul fizicii energiilor inalte aflati n diverse zone geografice si modalitate de a simplifica procesul de gasire a informatiilor pe Internet.In acest scop, el a propus u"sistem hipertext" de comunicatie intre calculatoare. Sistemul propus urma sa lege documentele printermediul unei retele de calculatoare, pentru utilizarea n comun a rezultatelor cercetarii stiintificCERN a promovat Web-ul, avind in vedere eventuala sa dezvoltare de la o retea locala la o retea globalaaccesibila din intreaga lume. Prima utilizare publica a Web-ului a avut loc in ianuarie 1992, la GenevaElvetia, unde cercetatorii au avut acces la date Web din site-urile Web ale CERN. Prin proiectul Web al lBerns-Lee, au fost stocate documente pe unul sau mai multe calculatoare, numite servere WeCercetatorii au avut acces la aceste date utilizind un program special numit browser Web.Astazi, utilizinInternet-ul, utilizatorii se conecteaza la un server Web si solicita anumite documente Web. Serverul We

ca raspuns, livreaza documentul utilizatorului, acesta putind sa-l parcurga si sa-l afiseze cu ajutorul unprogram browser. Un server poate raspunde la cererile mai multor utilizatori in acelasi timp. In april1993, dupa aproape un an si jumatate de la introducerea Web-ului, existau 60 de servere Web. Astazi sestimeaza numarul serverelor la peste un milion.

La ce foloseste Web-ul ?

Web-ul este utilizat de catre browserul utilizatorului pentru a putea vizualiza paginile de pe acestaAceste pagini contin in principal informatii sub forma de text dar si sub forma video (imagini statice saanimatii) sau audio. Aceste informatii sint stocate pe Web sub un format special denumit HTML. HTM(HyperText Markup Language) este limbajul cu care "comunica" Web-ul. Formatul HTML a aparut odatcu aparitia Web-ului, si este un format special, este lizibil, adica este inteligibil de catre om. Cinvizualizam o pagina Web aceasta este in format HTML, iar browser-ul o traduce in imagini, sunete, tex


2/43

etc. Pentru a crea pagini Web avem nevoie de un editor simplu de texte in care sa scriem pur si simpceea ce dorim in formatul HTML. Un singur inconvenient al realizarii paginilor Web cu ajutorul editoarelde texte este faptul ca trebuie cunoscut limbajul HTML. Un alt mod de creare a paginilor Web esfolosirea unui program pentru crearea paginilor Web. Aceste programe difera de la unul la altul dar undintre cele mai raspindite este FrontPage, un program al firmei Microsoft care apartine, deja, de pachetude programe Microsoft Office, si este de tipul WYSIWYG - What You See Is What You Get - ceea ce veeste ceea ce vei obtine.Pentru a putea face publice paginile Web este necesara utilizarea unui server dWeb care sa stocheze pagina utilizatorului. Asemenea servere exista pe Web si pot fi gasite foarte usoWeb-ul este singura parte din Internet, in afara de e-mail, accesibila pentru majoritatea utilizatoriloMulti nu vor vedea niciodata un meniu gropher si probabil nici nu vor simti nevoia. Nu vor avea niciodaplacerea de a citi rezultatul unui WAIS. Toata atentia se indreapta spre Web. O pagina Web esasemenea multor documente care le aveti pe calculatorul dumneavoastra. Insa nu incarcati pagina wede pe calculatorul propriu ci de pe un server Web. Un Site Web este o alta denumire folosita pentru uanumit server Web. Este vorba despre un calculator conectat la Internet in asa fel incit sa puteti aveacces la paginile de Web pe care le contine. Fiecare pagina Web contine text, imagini si scurtaturiscurtatura catre o pagina Web poate sa transfere un fisier, sa afiseze o imagine, sa redea sunete sau sprezinte un film. Numarul de lucruri catre care conduce o scurtatura intr-o pagina Web este practnelimitat.

Ce se poate gasi pe Web ?

Divertisment.

Exista o multime de situri total nefolositoare, dar distractive, asemenea peretilor pe care oamenscrijelesc diferite remarci.Reviste.

Orice revista de pe un stand are o pagina Web. Majoritatea revistelor, cotidianelor si emisiunilor de stsunt prezentate in Web. Time Warner, Ziff-Daviss si CNN sunt exemple de de mass-media in Web.Multimedia.

Acesta este un lucru cu adevarat remarcabil in Web. Veti gasi filme, sunete si imagini superbe.Informatii despre produse.

Majoritatea firmelor de calculatoare ofera asistenta si informatii despre produsele lor prin Web. MicrosofHewlett Packard, Compaq, IBM sunt doar citeva exemple. Puteti gasi programe gratuite in unele dintraceste situri.Cercetare.

Studentii din intreaga lume pot folosi Web pentru cercetare in domenii ca literatura, matematica, chimsau filozofie. Multe institutii de invatamint cum ar fi Universitatea Indiana, ofera informatii folositoarpentru studenti.Servicii.

Exista o gama larga de servicii disponibile in Web. Puteti afla starea coletelor trimise prin FedEx sau UPSsa cautati un prieten, sa aflati ultimele informatii despre starea vremii in zona dumneavoastra sau scautati numarul de telefon al unei firme.

Despre URL-uri

Pentru referirea la o resursa din Internet se foloseste termenul generic URI (Universal ResourcIdentifier) care specifica fie o locatie, caz in care vorbim de un URL (Uniform Resource Locator) fie unume, caz in care avem un URN (Universal Resource Name). Un URL are urmatorul format:

protocol://nod : port/caleunde:protocol - reprezinta modul de acces la resursa;nod - reprezinta adresa unei masini din Internet;port - reprezinta portul pe care se realizeaza conexiunea cu calculatorul respectivcale - reprezinta calea cu specificarea directoarelor si eventual a fisierului si a unei sectiuni specificatdin respectivul fisier aflat pe masina respectiva.In continuare vom explica putin mai detaliat elementele din formatul mentionat.

1."Protocol" Descrie protocolul care se foloseste pentru accesarea informatiei. Cuvantul protocol poate unul din urmatoarele:http (Hypertext Transfer Protocol).


3/43

Este metoda cea mai des utilizata pentru accesarea informatiilor in Internet care sunt pastrate pservere WWW (World Wide Web). De fapt, http este protoclul "implicit" al WWW. Adica, daca un URL ncontine partea de protocol, aceasta se considera ca fiind http. Acesta presupune rularea unui progracorespunzator pe calculatorul destinatie care intelege protocolul respectiv. Fisierul destinatie trebuie sfie un document HTML (HyperText Markup Language),un fisier grafic, de sunet,de animatie,un prograexecutabil pe server-ul respectiv sau un editor de texte.ftp (File Transfer Protocol).

Descrie un transfer de fisiere normal sau anonim. FTP (Protocol de transfer al fisierelor) este modalitate standard de a transfera fisierele binare din Internet. FTP nu necesita codarea fisierelor inaintde a fi incarcate, asa cum se intimpla in cazul fisierelor din e-mail sau de la grupuri de discutii.mailtoPermite transmiterea de mesaj electronic. Navigatorul prezinta o forma pentru introducerea transmiterea mesajului. In acest caz ceea ce urmeaza dupa mailto: este chiar adresa electronica destinatarului mesajului.file

Permite accesarea unui fisier pe calculatorul local. Se foloseste pentru vizualizarea unui fisier HTML pun calculator care are un navigator dar nu este un server. In cazul in care pe calculatorul local ruleazun sistem de operare Microsoft (MS-DOS, Windows3.x, Windows 95/NT), caracterul ":" care urmeazliterei unitatii de disc se inlocuieste cu "|".Exemplu:file:///C|/Users/Radu/Carte/Internet/Cap1.txtgopher

Permite accesarea unor fisiere pe servere Gopher.telnetPermite cuplarea la un nod, asemanator comenzii telnet.WAIS (Wide Area Information Server)

Reprezinta un fisier pe un server WAIS.news (USENET News)

Se refera la un server de grupuri de discutii sau la un grup de discutii situat pe un astfel de server. Iacest caz nod reprezinta adresa server-ului, iar cale reprezinta numele grupului de discutii respectiv.x-exec

Se refera la un program executabil.

2."Nod" Reprezinta adresa nodului de destinatie sau numele calculatorului respectiv.Exemplu:http://www.Edu.roeste o adresa care se refera la masina cu numele "Edu" din domeniul "ro". In cazul transferului cu ftp sspecifica si parola sub forma:nume:parola@nodLa ftp anonim se specifica doar adresa server-ului ftp. In unele situatii se specifica si portul sub forma:nod:port

3."Port" Reprezinta "canalul" prin care se realizeaza comunicarea dintre calculatoare.Unele servi(programe server) au ca porturi valori prestabilite (Ex:HTTP - 80, FTP - 21, serverul de mail - 25). Dacfolosim aceste valori, portul poate lipsi din schema URL -ului. Daca, insa, programul server "asculta" pun port altul decat cel prestabilit, valoarea portului trebuie sa apara in adresarea corecta.Exemplu:

http://localhost:8080adreseaza serverul web instalat pe propriul calculator si care asculta la portul 8080.

4."Cale" Reprezinta calea obisnuita pentru accesarea unui fisier, pornind de la radacina server-ulrespectiv. In unele cazuri ea poate sa contina chiar o referire la o anumita sectiune a unui docume(Dar despre aceata, mai tarziu...).In cazul in care aceasta parte a unui URL lipseste, serverul Web cauta fisierul radacina al sau, fisier ca- de cele mai multe ori - poarta numele "index.html sau "default.html". Daca un asenea fisier nu existsau nu a fost definit ca fisier implicit in cadrul serverului (situatie foarte rar intalnita), acesta din urmpoate sa intoarca utilizatorului care a cerut URL-ul respectiv un mesaj de eroare, o lista a fisiereldisponibile la adresa respectiva sau un alt raspuns, depinde de serverul Web folosit. Exemple de URL:1. http://www.sandia.gov/sci_compute/htm_ref.htmlReprezinta documentul HTML cu numele html_ref.html in directorul sci_compute pe server-ul WWW c


4/43

adresa: www.sandia.gov.2. ftp://ftp.sura.net/pub/nic/Reprezinta directorul pub/nic pe server-ul ftp cu adresa ftp.sura.net, unde se gasesc informatii despInternet.3. ftp://rtfm.mit.edu/usenet/news.answers/ftp-list/faqReprezinta un document cu numele faq care contine cele mai frecvente intrebari si raspunsuri despre ftDocumentul se gaseste pe server-ul ftp cu adresa rtfm.mit.edu in directorul usenet/news.answers.

Browsere

Un program cu ajutorul caruia se poate "naviga" prin Web - adica se pot vizualiza documente plasate pdiferite calculatoare conectate prin Internet la reteaua World Wide Web - se numeste browser. De fapt ubrowser este alcatuit dintr-un set de programe care permite manevrarea innformatiilor bazate pe text elemente de grafica si rularea unor programe pe care documentele le pot include (appleturi, scripturiFiecare browser are o caseta de text unde utilizatorul introduce adresa documentului dorit. In cazul care utilizatorul nu cunoaste adresa exacta de identificare a documentului, acesta poate introduce utext semnificativ pe care documentul ar trebui sa il contina. Browserul transmite acest text unprograme speciale existente in Web, programe numite motoare de cautare. Acestea cauta multitudinea de documente existente respectivul text, oferind apoi ca rezultat o lista de adrese a unodocumente care contin respectiva "cheie" de cautare. Utilizatorului nu ii ramane decat sa aleaga eventual prin incercari - locatia corecta. Exista mai multe astfel de programe de navigare Web, dar cemai cunoscute sunt Internet Explorer si Netscape Navigator.

Editoare HTML

Daca v-ati hotarat sa creati un site web, in afara de spatiu de stocare mai aveti nevoie de ceva, anume de editoare HTML sau utilitare si aplicatii pentru crearea de butoane si meniuri. In continuare vprezenta cateva editoare de acest gen.Adobe GoLive!5.0

Realizat de compania Adobe, a carei experienta in domeniul graficii este bine cunoscuta, editorul GoLivdispune de o cantitate mare de obiecte, atat HTML standard cat si proprii. De asemenea, lucrul cu frameste foarte accesibil, acestea putand fi adaugate sau sterse foarte usor. Datorita interfetei asemanatoaPhotoshop-ului, utilizatorii familiarizati cu acest program de grafica nu vor avea probleme la crearea unsite nou.

Cool Page 2.7Programul este destinat in primul rand celor care nu au cunostinte si timp pentru crearea graficii unusite web. Aceasta deoarece este livrat cu o multime de animatii GIF sau Flash, imagini si icon-uri gata dfolosit in cadrul paginilor. De asemenea, datorita posibilitatilor de editare drag & drop, o pagina wepoate fi construita in cateva minute.Macromedia Dreamweaver 4.01

Atunci cand vine vorba despre realizarea unei pagini HTML nu se poate sa nu aducem in discutie Dreamweaver de la Macromedia. Cu toate ca orientarea sa este mai degraba spre un nivel mediu sprinalt de cunostinte in domeniu, el poate fi folosit cu succes si de un incepator. Dispune de un manumar de template-uri care simplifica semnificativ munca de "schitare" a site-ului. Si pentru paginiweb aveti la dispozitie mai multe modele pe care le puteti prelua, modificand doar informatia prezentataPagina web: www.macromedia.comHotDog PageWiz 1.04

Desi la prima vedere poate parea un program complicat, PageWiz este un instrument util pentru uutiilizator cu mai putina experienta, din cel putin doua puncte de vedere. In primul rand este modalitate utila de invatare, pentru ca include o documentatie a limbajului HTML bine pusa la punct care ajuta in timp real utilizatorul. In al doilea rand pentru ca include un "editor-vrajitor" foarte rapicare permite construirea unei pagini web intr-un timp foarte scurt.NetObjects Fusion

NetObjects Fusion este potrivit pentru titi webdesignerii, care doresc sa obtina o pagina de internet cmai repede si fara prea mare efort. Gama de functii oferite de Fusion este absolut satisfacatoare - dacnu ai pretentii prea mari. Tocmai multitudinea de functii de help face ca si novicii si utilizatorii mai putiversati sa obtina extrem de repede rezultate reprezentative. Fusion lucreaza cu obiecte, pe care imbinati prin drag&drop, realizand astfel un site. Se poate spune, deci, ca incepatorii si designerii, carsunt presati de timp, vor fii cu adevarat incantati de NetObjects Fusion. Interfata simpla si intuitiva fac


5/43

ca erorile de utilizator sa fie excluse din start. Pagina web: www.netobjects.comHomeSite

Editorul HomeSite produs anterior de compania Allaire (acum membra a Macromedia) se adreseaza primul rand webdesignerilor, care dispun deja de tehnicii de programare si HTML. In ciuda unui cuprinimens de functii, datorita interfetei deosebit de reusite, utilizatorul va putea avea in permanenta o privirde ansamblu asupra intregului proiect. HomeSite este practic opusul lui NetObjects Fusion sau a lGoLive!: de aceasta data nu veti lucra cu obiecte grafice, ci direct in codul sursa al paginii web si trebusa stiti in permanenta ce pas parcurgeti. Acestea fiind spuse, este clar ca HomeSite nu prea este potrivpentru incepatori si pentru adeptii Wysiwyg, in schimb este un editor absolut recomandabil tuturcelorlalti webdesigneri. Unul dintre avantajele programului il reprezinta codul sursa "curat", pe carecreeaza.CoffeCup Free HTML

Free HTML este un program destinat in primul rand incepatorilor fara cunostinte HTML si programarweb. Paginiile web pot fi realizate foarte usor, prin intermediul unor vrajitorii care va ofera posibilitatede a plasa elementele paginii prin drag&drop.Stabilirea aspectului unitar al paginilor se poate face la fde usor, prin aplicarea de diverse teme asupra acestora. Cam acestea ar fi optiunile pe care le ofeprogramul si de aceea incepatorii vor fi incantati de el, dar cei care dispun de cunostinte avansate vocauta o alternativa. Totusi, faptul ca se pot crea rapid pagini web nu foarte complicate si mai algratuitatea, vor fii factori care vor determina alegerea acestui program.Dream Weaver

Se castiga acces simultan la vizualizarea de design si sursa HTML. Se pot deschide documente create alte editoare fara a modifica marcajele create de utilizator. Codarea de mana este la fel de confortabi

ca si design-ul. Se vor putea autoindenta elementele de cod, balansa simbolurile de punctuatie, indenlinii multiple simultan prin selectie. Exista functii java-script predefinite accesibile prin butoanele dferestrele de asistenta. Pentru cod se aplica highligh de sintaxa, evidentiidu-se portiunile de cod undeste java-script sau alte script-uri. Pentru depanarea codului de java-script este prevazut un depanatcare permite introspectia in executia care poate fi in Internet Explorer sau Netscape Navigator permitanastfel intelegerea functionarii fiecarui browser.Front Page

Microsoft FontPage va ofera puterea de a adauga continut dinamic cu ajutorul unei componente dgalerie foto, serviciul de componente Web din Microsoft MSN, Expedia, bCentral. Chiar daca sunteti uexpert in pagini web sau un novice, veti gasi ca FrontPage este usor de invatat si se poate utiliza rapid.

3.Bazele limbajului HTML

Ce este limbajul HTML ?

HTML nu este un limbaj de programare.HTML s-a dezvoltat ca un subdomeniu al SGML(StandaGeneralized Markup Language) care este un limbaj de marcare mai avansat si a fost mult timp favoritDoD(Department of Defense).Problema schimbului de informatie intre doua sau mai multe calculatoareste o problema extrem de complexa. Rezolvarea acestei probleme implica existenta unor "reguli dcomunicare" pe care calculatoarele sa le respecte. O comunicare reala intre doua parti - fie ecalculatoare sau nu - se bazeaza pe faptul ca informatia oferita de una dintre parti poate fi preluata mai apoi inteleasa de catre cealalta.Regulile dupa care doua calculatoare care ruleaza sub diferite sisteme de operare comunica sunt stabilitde catre protocoale. Despre acestea am vorbit pe scurt in capitolul precedent. Dar in afara acestor regumai apare nevoia existentei unui "limbaj" pe care ambele calculatoare sa-l inteleaga. In WWW aces

este limbajul HTML.Redus la esenta, HTML (Limbajul de Marcare HiperText) este alcatuit dintr-un set dmarcaje, coduri speciale inserate in continutul unui text, care ofera unui program numit interpretor dHTML informatii despre modul de formatare a continutului unui document si despre legaturile acestuia calte fisiere.

Elemente de marcare

Elementele de marcare sunt principalele componente ale limbajului HTML. Ele apar in document suforma de etichete (tag-uri) sau controale HTML. Numele elementului apare in controlul de inceput (suforma ) si in cel de sfarsit (sub forma ). Exemplu: si Portiunea din document incadrata de controalele HTML se mai numeste continutul elementului marcat


6/43

este partea de document asupra caruia actioneaza respectivul mod de formatare.Anumite elemente nnecesita etichete de sfarsit (Ex: P), iar altele nu au etichete de sfarsit, in general pentru ca nu au ucontinut pe care sa-l incadreze (Ex: BR). Exista, de asemenea, elemente prezente in document care psa nu fie marcate cu ajutorul etichetelor, prezenta lor in cadrul documentului fiind implicita (EBODY).Limbajul HTML nu face distinctie intre literele mari si literele mici ale alfabetului. De aceeformularile
,
sau
desemneaza acelasi control.

Atribute

Atributele reprezinta proprietati ale elementelor de marcare scrise sub forma unor perechi de nume valori in interiorul etichetei de inceput, dupa numele elementului referit. Exemplu:Prezenta ghilimelelor la valorile atributelor este optionala.Fiecare control HTML are anumite atribute cu valori presetate care pot fi modificate de catre creatordocumentului conform dorintei acestuia. Ele pot fi, de asemenea, modificate dinamic, in timpinteractiunii cu utilizatorul, cu ajutorul scripturilor. Dar despre ele, mai tarziu...Atributele ale caror valori sunt de tip boolean (adica adevarat sau fals) sunt setate in felul urmator:- absenta lor in eticheta de inceput a marcajului echivaleaza cu valoarea false presetata- prezenta lor echivaleaza cu setarea valorii trueExemplu:Formularea

saumarcheaza atribuirea valorii true atributului selected, atribut al elementului option.Daca valoarea unui atribut nu este una valida ea va fi ignorata.

Referinte de entitati

Pentru a introduce in continutul documentelor HTML unele caractere care nu fac parte din alfabetlimbii engleze, numite si caractere speciale, (cum ar fi , sau ) se folosesc marcaje speciale numitreferinte de entitati sau referinte de caracter. Spre deosebire de controalele de marcaj despre care avorbit in sectiunile anterioare, referintele de entitate nu sunt incadrate de caracterele "". Eincep intotdeauna cu caracterul ampresand "&" urmat de un text in stransa legatura cu caracterul p

care il reprezinta sau un cod numeric si se termina cu caracterul ";".De asemenea, caracterele folosite marcajele HTML (, &) se pot insera in cadrul documentului numai cu ajutorul referintelor de entitateIata cateva din caracterele speciale, impreuna cu marcajele care le reprezinta:& sau = &< sau < = sau > = >" sau &@34 = " =

ComentariiReprezinta texte care apar in fisierul sursa HTML, dar care nu vor fi afisate de catre browser catutilizator. Ele au rolul de a expune diferite aspecte legate de document in vederea realizarii unui fisiesursa cat mai clar si mai usor de inteles si corectat. Comentariile sunt incadrate de marcajele "". E foarte important ca in interiorul comentariului sa nu existe secventa de caractere "--" deoarecaceasta genereaza confuzie.

Exemplu:

Alinierea

Pentru a specifica modul in care un element (antet,imagine,tabel,etc) va fi pozitionat pe orizonta


7/43

relativ la elementul "container " care il contine se foloseste atributul align. Valorile acordate acestatribut pot fi:left - pentru alinierea la stangacenter - pentru pentru pozitionarea centrataright - pentru alinierea la dreaptaImplicit, alinierea se realizeaza la stanga, cu exceptia cazului in care elementul de pozitionat contine tea carui directie de scriere este de la dreapta la stanga, optiune realizata prin setarea in interiorcontrolului a atributului dir la valoarea "rtl" (Right-To-Left). In acest caz alinierea implicita este dreapta. Pentru a determina alinierea pe verticala a unui element in cadrul elementului container foloseste atributul valign cu urmatoarele valori posibile:middle - pentru pozitionarea centratatop - pentru alinierea la partea de sus a containeruluibottom - pentru alinierea la partea de jos a containerului

Culorile

Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fprin codul hexazecimal al culorii respective, fie prin numele uneia dintre cele 16 culori "sigure", adicacele culori care vor fi recunoscute si afisate de majoritatea calculatoarelor.Exprimarea numerica realizeaza prin codul RGB ( adica RED-GREEN-BLUE) al culorii.Codul este alcatuit din 3 numere cuprinsintre 0 si 255 scrise in baza 16, fiecare exprimand prezenta cantitativa a uneia dintre cele trei nuantcare definesc codul culorii respective.

Exemplu:

Este de preferat ca atunci cand utilizati culori sa apelati la una din cele 16 culori numite "sigure". Iata utabel cu numele si codul lor:Aqua #00ffffBlack #000000Blue #0000ffFuchsia #ff00ffGray #808080Green #00ff00Lime #008000Maroon #800000Navy #000080Olive #808000Purple #800080Red #ff0000Silver #c0c0c0Teal #008080White #ffffffYellow #ffff00

Dimensiunile

Dimensiunile unor elemente prezente in documentul HTML se pot preciza in trei moduri:

1.Dimensiunea absolutaeste referita in pixeli. De exemplu o exprimare de forma "width = 300" denota ca un anumit element alatimea de 300 pixeli2.Dimensiunea relativa (procentuala)este referita in procente. Astfel textul "width = 50%" exprima faptul ca elementul referit va avea clatime jumatate din latimea disponibila a elementului in care este incadrat.3.Dimensiunea proportionala (multidimensiunea)este folosita atunci cand doua sau mai multe elemente impart un anumit numar de pixeli disponibili. Ese exprima sub forma "i*", unde i este un numar care arata cate "parti" din total sunt revendicate. Dexemplu, pe un spatiu de 60 de pixeli disponibili, dimensiunile notate 1*, 2*, 3* insumeaza 6 unitati care spatiul disponibil va fi impartit. Fiecare unitate contine 10 pixeli. Astfel ca cele trei dimensiuexprimate mai sus reprezinta 10 pixeli, 20 pixeli si, respectiv, 30 pixeli.


8/43

Valori data-ora

Formatul pentru scrierea acestor valori este :YYYY-MM-DDThh:mm:ssTZDundeYYYY - reprezinta anul scris cu 4 cifreMM - reprezinta luna (Ianuarie = 01, .., Decembrie = 11)DD - reprezinta ziua din luna, cu valori de la 01 la 31T - ramane caracter scris cu litera mare pentru a marca inceputul scrierii oreihh - repreinta ora scrisa cu doua cifre, de la 00 la 23. Nu se admit formulari care contin AM sau PM.mm - reprezinta minutele cu valori intre 00 si 59.ss - reprezinta secundele cu valori intre 00 si 59.TZD - reprezinta precizarea fusului orar si poate lua urmatoarele valori:"Z" pentru Coordinated Universal Time (UTC)+hh:mm pentru un fus orar in avans cu hh ore si mm minute fata de UTC.-hh:mm pentru un fus orar in devans cu hh ore si mm minute fata de UTC.Exemplu:1994-11-05T08:15:30-05:00

Coduri de limbaje

Pentru a specifica limba in care un anumit text este scris se foloseste atributul lang a carui valoaeste codul de limbaj al tarii respective. Codul de limbaj este alcatuit din doua parti:Cod principal - cu ajutorul caruia se identifica tara in care limbaujul este folositSubcod (optional) - specifica o versiune a limbajului respectivCele doua componente vor fi separate de cracterul "-". Iata cateva exemple:en = limba englezaen-US = limba engleza -varianta americanafr = limba francezade = limba germanait = limba italianaes = limba spaniolapt = limba portugheza

4.Structura unui document

Sectiunile unui document HTML

Un document HTML este impartit in trei sectiuni:Sectiunea de informatii HTMLSectiunea de antet a documentuluiCorpul documentuluiControalele si incadreaza antetul si corpul documentului .Ele comunica interpretorulHTML ca blocul de text cuprins intre ele este scris si formatat in limbajul HTML standard. Prezenacestor etichete in document este optionala.Structura explicata a unui document HTML:

Structura Documentului HTML

Salut. Aceasta este o pagina Web cat se poate de simpla.


9/43

Sectiunea de informatii

Sectiunea de informatii HTML ofera informatii asupra versiunii limbajului HTML folosit. Multe editoade HTML insereaza automat textul necesar la inceputul documentuluiExemplu:

Antetul documentului

Sectiunea de antet a documentului este incadrata de controalele si . Prezencelor doua controale in document este optionala, insa ea ajuta la o impartire mai clara a documentulupe sectiuni.Antetul documentului cuprinde, in general, informatii precum titlul documentului (pentru aafisat pa baza de sus a a ferestrei programului de navigare sau pentru ca documentul sa poata fi mausor identificat de catre utilizator), cuvinte-cheie care folosesc motoarelor de cautare de documentprecum si alte informatii legate de documentul creat. Informatiile folosite in aceasta sectiune nu suafisate de catre browser, ele avand doar rol informativ. Astfel:

indica titlul documentului. Textul aflat aici va fi - de obicei- afisat pe bara de titlu al programului dexporare sau va putea fi folosit de utilizatori pentru pastrarea documentului in listele specifice ale acest

program. si ofera asa-numitele meta-informatii despre document declarand anumite proprietati impreuna cu valoriacelor proprietati. Daca valoarea unei proprietati este definita intern se va folosi controlul , iadaca valoarea va fi luata dintr-o locatie oarecare din exterior se va folosi controlul . Succesfolosirii acestor doua controale depinde in mare masura de interpretorul de HTML utilizat de catutilizator.De exemplu, cu ajutorul elementului META se pot preciza informatiile care vor fi trimise in "header-udocumentului, adica informatii specifice protocolului HTTP si pe care browserul le "citeste" pentru pregati afisarea documentului.Se folosesc formularile:http-equiv= pentru numele informatiei metacontent= pentru continutul (valoarea) informatiei respective.

In exemplul de mai jos se foloseste informatia meta Content-Type pentru a preciza:tipul documentuluisetul de caractere folositTipul documentului este - pentru un document HTML - "text/html".Setul de caractere reprezinta o multime de caractere folosite in alfabetul diferitelor limbi, caracteidentificate printr-un numar de cod. De aceea, pentru ca browserul sa poata descifra corect informatia pcare o primeste este recomandabil ca acest atribut sa fie specificat in antetul fiecarui document.Seturile de caractere sunt niste standarde stabilite de catre ISO (Organizatia Internationala pentStandardizare) si reprezinta reguli de codificare a caracterelor.Printre cele mai folosite astfel de seturi aminitim:ISO 8859-1 -(sau ISO Latin-1) reprezinta setul care contine cele mai raspandite extensii ale alfabetullatinsi este cel mai des intalnitISO 8859-5 - alfabetul chirilic

ISO 8859-6 - alfabetul arabISO 646 - codificarea ASCII restransa (pe 7 biti, adica 128 de caractere)Exemplu:

Pentru alte tipuri de informatii meta cuprinse in antet se va utiliza formularea

In acest mod se pot specifica informnatii privind autorul paginii respective, sau informatii in scopuri dindexare a paginii de catre paianjeni sau motoare de cautare Web.Exemplu:


10/43

Despre elementul LINK vom vorbi intr-unul din capitolele urmatoare.

Corpul documentului

Corpul documentului este locul unde se plaseaza continutul efectiv al documentului si este incadrat dcontroalele si . Chiar daca marcarea corpului documentului cu cele doua etichete esoptionala, folosirea lor va determina o mai mare claritate in impartirea documentului pe sectiuni.Controlul poate sa contina atribute referitoare la fondul si marginile documentului sau culoaretextului. Astfel:background= "imagine.jpeg" seteaza imaginea de fond a documentului.bgcolor= "#0000ff" seteaza culoare fondului documentului (Aqua).In cazul in care ambele sunt prezente, browserul cauta fisierul mentionat ca imagine de fond. Dacacesta exista, el va fi afisat si multiplicat pentru a acoperi intreaga suprafata a documentului, culoarede fond fiind vizibila numai daca fondul imagini este transparent. Daca nu, fondul documentului va fi dde culoarea setata de catre bgcolor.text= "#ff0000" seteaza culoarea textului existent in document.Pentru a seta dimensiunile marginilor din stanga si de sus ale documentului se folosesc atributele:Pentru Internet Explorer:topmargin - pentru marginea de sus

leftmargin - pentru marginea din stangaPentru Netscape Navigator:marginheight - pentru marginea de susmarginwidth - pentru marginea din stangaPentru Internet Explorer exista posibilitatea de a atasa unui document un fond sonor. Aceasta se poatrealiza prin folosirea in antetul documentului a elementului BGSOUND. Doua dintre atributele acestusunt foarte importante:src - determina fisierul audio care va fi rulat de catre browser la incarcarea documentului in fereastraloop - determina de cate ori va fi repetata secventa de sunet respectiva. O valoare egala cu -1 determinrepetarea continua a sunetuluiExemplu:Document cu imagine de fundal

Document cu imagine si sunet de fundalAcest document are o imagine in fundal

Exemplu:Document cu setarea culorii fundalului si a dimensiunii marginilor

Document cu culoare de fondAceasta pagina are culoarea de fond "aqua". Textul va fi tiparit cu culoare albastra
Marginile documentului au fost fixate la "0" prin setari care vor fi acceptate si de InternExplorer si de Netscape Navigator


11/43

In cazul in care in corpul documentului interpretorul HTML gasete o eticheta pe care nu o recunoaste (eticheta scrisa gresit, inexistenta sau o eticheta de sfarsit care nu are eticheta de incepcorespunzatoare) el nu o va lua in considerare, tiparind doar eventualul continut marcat de eticherespectiva. Insa aceste etichete "scapate" in corpul documentului pot provoca diferente semnificativintre forma dorita si cea obtinuta a continutului afectat!

5.Despre aspectul unui documentGeneralitati

In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica elementelor care constitue documentul HTML. Trebuie subliniat faptul ca aspectul cat mai atragator materialului prezentat trebuie insotit si de o prezentare a informatiei cat mai logica si usor de urmarit.

Impartirea documentului in linii si paragrafe

Programele de explorare Web ignora caracterele Enter, taburile si spatiile multiple. Astfel, aspectdocumentului afisat utilizatorului nu coincide cu aspectul fisierului sursa. Pentru a obtine asezarea doria componentelor documentului in fereastra programului de navigare, se folosesc controalele de separa

si

care determina desfasurarea continutului pe linii si paragrafe. Astfel, pentru a marctrecerea la un nou paragraf folositi controlul

, iar pentru a marca trecerea la o linie noua folosicontrolul
. Aceste doua controale nu necesita marcaj de inchidere (terminare). Pentru a insera document un numar oarecare de spatii libere se foloseste caracterul special (NonBreakingSpaceSpatiile astfel inserate au proprietatea de a nu permite browserului trecerea la linie noua.Pentru a forta afisarea unei parti de text mai lunga pe o singura linie se mai pot folosi controale si cu rolul de a marca inceputul si sfarsitul sectiunii de text care va fi afisata pe singura linie. Nu toate browserele recunosc aceste controale, asa ca - daca se poate - evitati sa folositi!

Exemplu:Folosirea paragrafelor a liniilor de text si a spatiilor libere

Linii si paragrafe

Paragraf1:Acest text va fi afisatpe o singura linie.

Paragraf2:
O linie de text
Alta linie de text

Paragraf3:
..dupa 4 linii libere...

Paragraf4:
Intrecuvinteexistasuficientspatiu

Paragraf5:


12/43

bla-bla-bla-bla bla-bla bla bla bla-bla-bla bla-bla-bla-bla bla-bla bla-bla-bla-bla bla-bla-blbla-bla- bla-bla- bla-bla- bla-bla-bla- bla pe o singura linie

Antetele de sectiune

In cazul in care informatia prezentata trebuie impartita in sectiuni si sub-sectiuni, alegerea cea mnaturala este folosirea marcajelor de formatare a subtitlurilor.Titlurile si subtitlurile sectiunildocumentului se vor marca folosind elementele de la H1 la H6, in ordine descrescatoare a importantedimensiunea fontului folosit descrescand si ea. La afisare, programul de navigare va lasa linii goainainte si dupa fiecare marcaj pentru titlu si subtitlu.

Exemplu:Antete de sectiune

Element H1Element H2Element H3Element H4Element H5Element H6

Rigla orizontala

Pentru o mai vizibila impartire a corpului documentului se voloseste rigla orizontala marcata ccontrolul . Prezenta acestui control produce desenarea unei linii orizontale subtiri pe toata latimedocumentului.Dimensiunile riglei pot fi controlate cu ajutorul atributelor width si size, care seteaza dimensiunile porizontala si, respectiv, pe vericala a liniei in pagina. Pentru a elimina aspectul tridimensiunal al riglei spoate utiliza optiunea noshade care elimina efectul de "umbrire" a riglei.

Exemplu:rigle orizontale

Controlul

Acest control este folosit de obicei la sfarsitul documentului pentru a plasa informatii ut

utilizatorului pentru a contacta autorul paginii sau informatii de copyright.

Exemplu:Folosirea elementului Address

Draga cititorule,

Bla-bla-bla...

Bla-bla-bla...

Bla-bla-bla...

Cu drag, Seful!


13/43

Pentru recalmatii contactati-ne la
[email protected]

Controalele si

Controlul este folosit in document pentru a grupa intr-un bloc "logic" o parte din continutdocumentului in vederea atribuirii unitare a caracteristicilor legate de stilul de prezentare, sau pentru identifica respectivul bloc de continut in vederea utilizarii lui de catre scripturile prezente in documenBrowserul va trece la line noua inainte si dupa terminarea acestui marcaj.De asemenea acest controle smai poate folosi alaturi de proprietatile de stil pentru pozitionare pentru a creea in cadrul documentulu"straturi" de dimensiuni variabile ce pot fi pozitionate in diferite locatii ale documentului, suprapusascunse sau expuse, in functie de necesitatile designer-ului.Controlul are rolul de a "extrage" o portiune de document - de obicei inclusa intr-un bloc marcade controale HTML si care, eventual, are specificate un anumit numar de atribute - pentru a o identificsau apentru a-i oferi un format de afisare diferit de restul blocului din care face parte.

Exemplu:identificarea blocurilor de text cu ajutorul elementelor Div si Span

ElementulDiv

Certificatul de deces consemneaza la rubrica "Profesia" - fermier. Daca ar fi fost numaiatat, azi nu s-ar mai vorbi nimic de Elementul Span.

Folosirea atributului style

Ultimele versiuni ale limbajului HTML au optat in mod categorig pentru despartirea continutulunui document HTML de forma in care este el prezentat. Acest lucru este posibil prin utilizarea foilor dstil, a stilurilor definite in antetele documentului, sau prin gruparea proprietatilor legate de forma dprezentare in cadrul unui singur atribut: style.Utilizarea acestuia in interiorul unui control HTML - aproape toate care se pot gasi in interiorul corpuldocumentului, cu putine exceptii ( sau ) se face respectand urmatorul tipar d

scriere:


14/43

6.Stiluri de text

In documentele pe care la veti creea veti folosi diferite stiluri de text pentru a pune in evidenanumite cuvinte sau pentru a le acorda o seminficatie dorita (citate, nume, etc). Pentru aceasta vespecifica explicit valori pentru unele din atributele ale unui font:corpul de literaculoare fontuluistilul fontuluidimensiunea fontului

Controale pentru stilul fontului

Cel mai usor mod de a marca un anumit stil corespunzator unui text in documentul dumneavoastreste de a folosi controalele care modifica stilul fontului dupa cum urmeaza: se foloseste pentru scrierea cu caractere ingrosate (Bold). se folooseste pentru scrierea cu caractere inclinate (Italics). este folosit atunci cand se doreste ca un anumit pasaj din text sa fie subliniat. indica folosirea fontului monospatiu, adica acea forma de scriere in care fiecare caracter ocupa platime acelasi spatiu. Acest tip de font este asemanator cu cel utilizat se catre masinile de scris. se foloseste pentru scrierea indicilor inferiori. se foloseste pentru scrierea indicilor superiori. este folosit pentru scriere unui text "taiat" cu o linie orizontala.

Este obligatorie prezenta etichetelor de sfarsit a controalelor mai sus mentionate pentru a putea delimiportiunea de text asaupra careia se aplica stilul de font dorit.

Exemplu:Utilizarea controalelor pentru stilul fontului

aceste cuvinte sunt ingrosate
aceste cuvinte sunt inclinate
aceste cuvinte sunt subliniate
etc.

Controlul

Acest control permite specificare atributelor care privesc tipul caracterelor, dimensiunea si culoarelor. El se aplica pentru a formata un bloc de text in vedrea afisarii lui cu anumite caracteristici dorite dcatre creatorul documentului. Atributele pe care le avem la indemana sunt:Facefolosit pentru alegerea corpului de litera utilizat. Valoarea atribuita acestei proprietati trebuie sa fie unume de font valid. Este recomandabil sa folositi fonturile "clasice" pentru a va asigura ca browserul vrcunoaste tipul de font specificat.Exemplu:Deoarece diferitele sisteme (Windows, Machintosh, etc) nu recunosc aceleasi fonturi, se pot atribproprietatii Face una sau mai multe valori separate prin virgula. Astfel sistemul va alege primul fovalid gasit in lista.Sizefolosit pentru a specifica dimensiunea fontului utilizat si poate lua valori de la 1 la 7. Valoare atribuitdimensiunii fontului poate fi de doua tipuri:absoluta- specifica dimensiunea exacta a fontului.Exemplu:relativa- specifica dimensiunea fontului fata de cea a fontului actual.Exemplu:In exemplul de mai sus dimensiunea fontului este majorata cu o unitate.


15/43

In cazul in care valoarea specificata este mai mica decat 1 sau mai mare decat 7, interpretorul HTML vva lua ca dimensiune valida pe 1, respectiv 7.Valoarea imlicita a dimensiunii fontului este, de obicei, 3.Coloreste atributul cu ajutorul caruia se poate stabili culoarea textului marcat. Valorile acestei proprietati spot scrie fie cu ajutorul codului hexazecimal al culorii, fie cu ajutorul numelui celor 16 culori de baza.Exemplu:Utilizarea culorilor in text nu trebuie sa genereze situatii ambigue. Astfel, un text afisat cu culoaalbastra va avea acelasi aspect cu cel al unei legaturi catre un alt fisier. De asemenea, folosirea in excculorilor poate da documentului un aspect neplacut si obositorExemplu:Utilizarea atributelor fontuluiscris cu arial marimea 4. red
scris cu courier culoarea lime ,

Controlul

Daca dorim sa alegem un anumit tip de font, o anumita dimensiune sau culoare a fontului care sa fvalabile pe intreg continutul documentului, se va utiliza marcajul BASEFONT.Exemplu:

...Astfel textul continut in documentul de mai sus va fi afisat cu culoarea albastra si va avea dimensiunede 5 unitati. Exceptie fac doar tabelele si acele pasaje de text care au controale HTML de formatare textului care impun alte atribute de afisare.

Stiluri logice de formatare a textuluiExista cateva stiluri predefinite de punere in evidenta a unui text:

pentru evidentiere puternica

pentru scriere cu caractere italice pentru inserare de citate pentru listing de program pentru definitie de cuvant pentru a pune in evidenta un bloc de text. Blocul de textul va fi indentat spre dreaptfata de marginea stanga a elementului care il contine. folosit pentru afisarea textului "preformatat". Textul marcat de etichetele de inceput si sfarsit aacestui control va fi afisat de catre browser intr-o forma aproape identica cu aceea in care a fost scris sursa documentului HTML. Astfel, se vor respecta spatiile libere si trecerea la linie noua, dar caracterevor fi afisate cu font de tip monospatiu.Mai trebuie sa amintim aici si posibilitatea de a marca modificarile aparute in versiunile ulterioare adocumentului cu ajutorul controalelor si . Dar despre ele nu putem spune ca aplica un stpredefinit textului pe care il marcheaza, deoarece modalitatea in care acesta este afisat in fereast

programului de explorare Web difera foarte mult de la program la program. De obicei aceste marcajcontin atributul datetime pentru a informa despre data de la care sunt valabile modificarile pe caaceste controale le notifica.

Exemplu:folosirea stilurilor logice de formatare a textului

Folosirea elementului STRONG
Folosirea elementului em
Folosirea elementului CITE
Folosirea elementului codepublic class Exemplu
{


16/43

public int i;
for (i = 0;i!=10;i++)
System.out.println("Rezultat = " +2*i);
}folosirea elementului pre,observati cum spatiile multiple nu mai sunt ignorate

7.Liste

De multe ori, in redactarea unor documente ajungem in punctul in care trebuie sa enumeram un set d

elemente care formeaza, din punct de vedere logic, o multime. Prezentarea acestora trebuie realizata asa fel incat relatiile dintre ele, sau dintre ele si eventualiele "subelemente" sa fie cat mai clar exprimadin punct de vedere vizual. Pentru aceasta se folosesc diferitele tipuri de liste.

Liste neordonate

Probabil cele mai intalnite liste in cadrul documentelor HTML sunt cele neordonate. Pentru a marcinceputul si sfarsitul unei liste neordonate se foloseste elementul UL. Fiecare lista contine un set delemente numite "itemi", prezenta unui item in cadrul unei liste marcandu-se cu ajutorul elementului L

Exemplu:Prezentarea informatiei sub forma de lista neordonata

John LennonPaul MccartneyRingo StarGeorge Harrison

Liste imbricate:

element 1

element 1.1

element 1.2element 1.2.1element 1.2.2

element 1.3

element 2element 3

element 3.1

Folosirea atributului "type":

IanuarieFebruarieMartie

Fiecare element al listei este indentat fata de marginea din stanga (sau dreapta, daca directia de scrieeste de la drapta la stanga) listei; astfel, prezentarea ei devine foarte clara si atractiva. Mai mult, ficaitem al listei va avea un marcaj in fata sa, corespunzator nivelului de subordonare al listei. Acest marc


17/43

poate fi ales cu ajutorul atributului Type, iar valorile posibile sunt:disc - pentru un cerculet plincircle - pentru un cerculet golsquare - pentru un patratel plinImplicit, prgramele de explorare Web folosesc tipul disc pentru primul nivel de subordonare (srespectiv, de indentare), circle pentru al doilea nivel si square pentru urmatoarele nivele. Eticheta dsfarsit a unui element al listei() nu este obligatorie, elementul respectiv considerandu-se incheiat momentul aparitiei unei noi etichete sau a etichetei care incheie lista. Elementul UL inlocuieselementele DIR si MENU din versiunile mai vechi ale limbajului HTML.

Liste ordonate

Listele ordonate se aseamana foarte mult cu cele neordonate, diferenta majora constand in faptul clistele ordonate atribuie ca marcaj fiecarui item un element (numar, litera) prin care se evidentiazordinea sa in cadrul listei. Listele ordonate sunt marcate in interiorul documentului cu ajutorelementului OL.Pentru a stabili care va fi marcajul de ordonare in lista al fiecarui item se foloseste atributul TypValorile acestuia pot fi:1 pentru cire arabe: 1,2,3,... (valoare implicita)a pentru litere mici: a,b,c,...A pentru litere mari: A,B,C,...i pentru cifre romane tiparite cu litere mici: i,ii,iii,iv,...

I pentru cifre romane tiparite cu litere mari: I,II,III,IV,...

Exemplu:Folosirea listelor ordonate

Lista ordonata implicita:

element 1element 2

element 2.1element 2.2

element 3

element 3.1

element 3.1.1element 3.1.2

Folosirea atributului "type":

element 1element 2

element 2.1element 2.2

element 3

element 3.1

element 3.1.1element 3.1.2


18/43

element 3.2

Folosirea atributului "value"

Element 1Element 2

Element 2.1Element 2.2

Element 3

Se pot folosi si marcajele aplicate itemilor listelor neordonate, dar in felul acesta notiunea de "lisordonata" isi pierde sensul.In mod implicit valoarea marcajului de ordine al elementelor listei incepe de la "1"(sau "a") si creste cuunitate la fiecare item adaugat. Pentru a modifica valoarea de start a numerotarii elementelor listei sfoloseste atributul Start asociat elementului OL. Astfel, formularea

are ca rezultat faptul ca primul element al listei va avea marcajul de ordine "2" ("b", "ii",etc), celelaltcontinuand in mod normal, prin adaugarea cate unei unitati. Pentru a forta marcarea unei alte valoari dreptul unui item se foloseste atributul Value asociat elementului LI. Valoarea acordata acestui atribut vfi numarul (sau ordinea caracterului) scris in fata elementului respectiv.Trebuie mentionat faptul ca numerotarea elementelor unei liste ordonate nu tine cont de prezenitemilor din listele subordonate, numerotarea facandu-se separat pe fiecare nivel de subordonare

Liste de definitii

Se pot folosi si marcajele aplicate itemilor listelor neordonate, dar in felul acesta notiunea de "lisordonata" isi pierde sensul.In mod implicit valoarea marcajului de ordine al elementelor listei incepe de la "1"(sau "a") si creste cuunitate la fiecare item adaugat. Pentru a modifica valoarea de start a numerotarii elementelor listei sfoloseste atributul Start asociat elementului OL. Astfel, formulareaare ca rezultat faptul ca primul element al listei va avea marcajul de ordine "2" ("b", "ii",etc), celelaltcontinuand in mod normal, prin adaugarea cate unei unitati. Pentru a forta marcarea unei alte valoari dreptul unui item se foloseste atributul Value asociat elementului LI. Valoarea acordata acestui atribut vfi numarul (sau ordinea caracterului) scris in fata elementului respectiv.Trebuie mentionat faptul ca numerotarea elementelor unei liste ordonate nu tine cont de prezenitemilor din listele subordonate, numerotarea facandu-se separat pe fiecare nivel de subordonare

Exemplu:Lista de definitii

marfruct rosu

8.Legaturi si referinte

Aspectele prezentate pana acum certifica faptul ca un document HTML prezinta proprietati de formatasi structurare care sa permita prezentarea informatiei de tip text intr-o forma cat mai logica si reusitdin punct de vedere vizual-estetic.Insa caracteristica cea mai importanta a documentelor HTML esaceea de a putea contine in interiorul lor legaturi catre alte documente (sau programe) care se pot gape acelasi calculator sau pe unul dintre calculatoarele din imensa retea a Web-ului. Mai mult, exis


19/43

posibilitatea ca un anumit element din continutul documentului sa contina o legatura catre un aelement din cadrul aceluiasi document. Despre toate acestea in cele ce urmeaza.

Referinte externe

Sunt sigur ca ati intilnit situatii in care, intr-o carte, atunci cand autorul face referire la un citat sa informatie dintr-o alta carte sau un dintr-un alt document acesta insereaza intr-o paranteza numelucrarii referite, eventual pagina sau sectiunea referita. Daca informatia respectiva prezinta interpentru utilizator, acesta nu are decat sa caute in rafturile bibliotecii sale (in cazul cel mai fericit) sau aaltor biblioteci, materialul amintit. Aceasta maniera fragmentata de a primi informatia este singuposibila in cazul textelor obisnuite a caror expunere se realizeaza pe cele doua dimensiuni ale suprafetplane reprezentate de foaia de hartie.Limbajul HTML rezolva aceasta problema prin introducerea notiunii de hipertext. Hiper-textul difera dtextul obisnuit prin introducere in interiorul documentului a unor elemente de legatura cu alte documenexistente in Web. Prin activarea acestor elemente cu ajutorul mouse-ului sau tastaturii se realizeaztrecerea instantanee de la documentul initial (documentul sursa) la cel vizat (documentul destinatiefiind oricand posibila revenirea la documentul initial. Orice legatura are doua capete numite ancore si usens. Primul capat (elementul care refera) este ancora sursa, iar al doilea capat (elementul referit) esancora destinatie. Ancora sursa se numeste referinta si ea poate fi externa sau interna, dupa cum ancodestinatie se gaseste in afara sau in interiorul documentului care contine referinta.Prezenta unei referinte in interiorul documentului se marcheaza cu ajutorul perechii de controale HTM si . Pentru ca marcajul de referinta sa fie functional, acesta trebuie sa contina atributul Hre

numit atribut de referinta hipertext. Valoarea acestuia este un URL care localizeaza documentul referit.Exemplu:Legatura cu..Legaturile unui document nu sunt limitate la legaturi cu alte documente. El poate sa contina legaturi dtip "mail" sau legaturi catre fisiere de tip "program" care vor fi executate atunci cand utilizatoractiveaza referinta de legatura corespunzatoare.

URL-uri relative

Despre URL-uri am vorbit in introducerea acestei documentatii. Insa acum, inainte de a trece la catevexemple simple, e cazul sa vorbim despre URL-uri relative.Daca informatia pe care o puneti la dispozitutilizatorilor in Web este alcatuita din mai multe documente corelate, ea trebuie structura

corespunzator intr-o formula de directoare si subdirectoare care sa va ofere o distribuire cat mai logica materialelor. Aceasta structura formeaza un "site".Sa presupunem ca directorul radacina al site-ului se numeste "Radacina". El contine directoare"Produse" si "Informatii" si documentul "index.html". In interiorul directorului "Produse" se gasedocumentele "Carti.html" si "Muzica.html", iar in directorul "Informatii" se gaseste document"Preturi.html". Un URL relativ este URL-ul in care nu se trece decat calea de la fisierul curent la fisierdestinatie. Calculatorul va completa automat calea catre documentul curent, construind astfel URL-complet. In cazul trecerii catre directorul parinte se foloseste expresia "..". Exemplu:Daca fisierul curent este "index.html", pentru a referii documentul "Carti.html" se foloseste expres"Produse/Carti.html".Daca fisierul curent este "Carti.html", pentru a referi documentul "Muzica.html" de foloseste expres"Muzica.html"Daca fisierul curent este "Carti.html", pentru a referi documentul "index.html" de foloseste expres

"../index.html"Daca fisierul curent este "Carti.html", pentru a referi documentul "Preturi.html" de foloseste expres"../Informatii/Preturi.html"Folosirea URL-urilor relative este foarte convenabila deoarece, atunci cansite-ul este publicat, locatia sa pe server poate fi schimbata de catre administratorul calculatoruluaceasta modificare afectand doar calea catre radacina site-ului, si nicidecum relatiile si legaturile dinteriorul site-ului. Exista posibilitatea de a fixa un URL de baza relativ la care sa se calculeze toate URurile relative intr-un document. Acest lucru este posibil prin folosirea in sectiunea de antet documentului a controlului de marcaj , al carui atribut href fixeaza baza de formare documentului. De exemplu, daca in in documentul "Carti.html" se fixeaza


20/43

inseamna ca toate URL-urile relative se calculeaza fata de documentul "index.html", o referinta catdocumentul "Preturi.html" avind forma:Preturile sunt urmatoarele...Folosirea acestei optiuni trebuie facuta doar daca dumneavoastra controlati schimbarile efectuate amplasarea site-ului pe server. Altfel, documentele referite nu vor mai fi gasite, iar in fereastra va afisata o pagina continand mesajul de eroare corespunzator.In interiorul documentului, textul elementului referinta (interna sau externa) este scris de obicei cculoare albastra si subliniat. Pentru a alege culoarea de prezentare a referintelor intr-o pagina folosesc urmatoarele atribute ale elementului Body:link - pentru culoare textului referintelor nevizitatevlink - pentru culoarea textului referintelor care au fost deja vizitatealink - pentru culoarea textului referintei in momentul in care aceasta care este activata.In momentul in care activam o referinta catre un document HTML, acesta va fi afisat in fereastprogramului de explorare Web, in locul documentului initial.Daca vrem sa controlam fereastra in care va fi afisat noul document putem sa folosim atributul targetelementului ancora. Valorile posibile ale acestui atribut sunt:_self - pentru a afisa documentul destinatie in fereastra documentului sursa (valoare implicita)_blank - pentru a afisa documentul destinatie intr-o noua fereastra deschisa de programul de explorare_parent - folosita la cadre de ferestre_top - folosita, de asemenea, la cadre de frestre.

Referinte interne

Activarea unei referinte catre un documet face ca acel document sa fie afisat in fereastra programulde explorare. Dar daca apare situatia in care din documentul referit ne intereseaza un anumit element vrem ca acesta sa fie afisat incepand cu prima linie a ferestrei? In acest caz trebuie sa definim in acedocument o ancora destinatie numit "tinta".O tinta se marcheaza cu ajutorul elementului ancora (A) caruia i se atribuie un nume de identificare cajutorul atributului Name sau Id.Exemplu:IntroducerePentru a creea in acelasi document o referinta catre tinta definita mai sus nu ramane decat sa scriecorect atributul de referinta hipertext.Exemplu:Partea 1.Introducere Daca referinta este creata in alt document ea trebuie sa contina URL-ul documentului care contine tintsi numele de identificare a tintei. Exemplu:Partea 1.Introducere Este foarte important ca numele de identificare a unei tinte sa fie unic in cadrul unui document. In cacontrar destinatia referintei nu mai este valida.

Specificarea unei relatii intre documente

Elementul LINK este folosit in antetul documentului pentru a specifica o relatie intre documentul curesi alte documente sau programe din Web. Elementul LINK nu are continut si nu va fi afisat in interiordocumentului, dar el este folosit de catre programele de navigare Web in diverse scopuri, depinzand d

valoarea atributul rel, valoare ce defineste relatia cu documentul referit. Iata cateva dintre valorposibile ale acestui atribut:Alternatedefineste o alternativa la documentul curent si este folosita de obicei impreuna cu atributul hreflanpentru a specifica limba in care este scris documentul. Exemplu:The manual in English


21/43

Stylesheetdefineste o legatura cu un document de tip "foaie de stil", despre care vom vorbi mai tarziuStartdefineste primul document dintr-o colectie de documenteNext si Previousdefinesc care sunt urmatorul si, respectiv, precedentul document intr-o ordonare liniara a colectiei ddocumenteContents, Index, si Glosarydefinsesc documente de tipul "Cuprins" , "Index" si "Glosar".Exemplu:Capitolul 4Modul in care informatia oferita de elementul Link este folosita depinde foarte mult de programul dnavigare si motoarele de cautare in Web.

9.Utilizarea imaginilor

In lectia precedenta ati invatat cum sa folositi elementul esential al unui document HTML: legatura calte documente sau programe. Insa va lipseste posibilitatea de a da documentului un aspect cat matractiv pentru cei ce il viziteaza. Pentru a realiza acest lucru va trebui sa "impodobiti" documentul cimagini, fie ele statice sau dinamice. Trebuie stiut insa faptul ca incarcarea imaginilor in document esteoperatiune care costa timp - fara sa mai vorbim ca exista programe de explorare Web care nu lucreazcu imagini! - si de aceea va trebui sa faceti o alegere echilibrata intre numarul si dimensiunea imaginil-pe de o parte - si timpul de incarcare a documentului - pe de-alta parte.

Inserarea unei imagini

Pentru a marca prezenta unei imagini in document se foloseste elementul IMG, al carui atribut Src esURL-ul fisierului imagine. Tipurile de fisiere-imagine compatibile cu HTML sunt GIF, JPEG si PNG.

Exemplu:Elementul IMG nu are eticheta de incheiere deoarece elementul nu are continut pe care sa-l includa. Ar bine ca atunci cand inserati o imagine sa folositi si atributul Alt care specifica un text care va fi afisat locul imaginii in cazul in care browser-ul nu lucreaza decat in mod text sau in cazul in care utilizatorudecide sa renunte la incarcarea imaginilor (optiune oferita de programele de navigare Web). Daimaginea este afisata, valoarea atributului Alt va fi folosita ca mesaj "tool-tip" .In cazul in care doriti sprezentati in cadrul documentului un anumit numar de imagini a caror dimensiune ar afecta dramattimpul de incarcare al documentului in fereastra programului de explorare se poate aplica urmatoaretehnica:Se creeaza copii de dimensiuni mici ale acestor imagini. Aceste copii vor fi incarcate in document si voavea rolul unor legaturi catre fisierele ce contin imaginile in dimensiunea lor initiala. Atunci canutilizatorul va activa una dintre aceste legaturi in fereastra se va incarca fisierul imagine dorit

Pentru a aranja imaginea in raport cu textul din vecinatatea sa se foloseste atributul align. Valorposibile sunt:bottompentru alinierea textului la baza inferioara a imaginii (valoare implicita)middle sau centerpentru alinierea textului pe centrul imaginiitoppentru alinerea textului la baza superioara a imaginiileftpentru a plasa imaginea in extremitatea stanga a elementului container, iar blocul de text eventuexistent dupa marcajul imaginii respective ocupand spatiul liber din dreapta si de sub ea.right


22/43

pentru a plasa imaginea in extremitatea dreapta a elementului container, iar blocul de text eventuexistent dupa marcajul imaginii respective ocupand spatiul liber din stanga si de sub ea. In cazultimelor doua valori poate aparea situatia in care un bloc de text trebuie "fortat sa coboare" pe primlinie de sub imagine. In acest caz se foloseste atributul clear al elementului BR care apare inainteblocului de text pe care vrem sa il translatam. Valorile acestui atribut pot fi:leftpentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din stanga este liberarightpentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din dreapta este liberaallpentru ca textul sa fie deplasat in jos pana in pozitia in care ambele margini sunt liberePentru a controla spatiul vertical sau orizontal din jurul imaginii inserate in document se foloseatributele vspace si hspace . Valorile atribuite desemneaza numarul de pixeli care vor distanta imaginede elementele adiacente ei in cadrul documentului Atributele width si height stabilesc dimensiunisuprafetei din document care va fi ocupata de imagine. Precizarea acestor atribute determina o mrapida incarcare a documentului in fereastra programului de explorare, dar in cazul precizarii undimensiuni care nu corespund dimensiunilor reale ale imaginii aceasta va fi deformata pentu a acoperexact suprafata precizata. Folosirea atributului border determina afisarea unui chenar care va incadimaginea. Valoarea acestui atribut va reprezenta grosimea chenarului, o valoare egala cu 0 (valoaimplicita) determinand afisarea imaginii fara chenar.

Folosirea imaginilor ca elemente ancora

In documentele HTML se folosesc frecvent imaginile pe post de ancore, adica legaturi catre aldocumente sau programe. Acest lucru se poate realiza foarte usor prin plasarea imaginii in interiorunui element ancora (A). Exemplu:Observati introducerea textului alternativ care devine obligatoriu in cazul in care imaginea nu poate afisata de catre browser.In momentul incadrarii elementului imagine intre controalele si browserele adauga imaginii o bordura. Pentru a evita aparitia ei folositi atributul border cu o valoaatribuita egala cu 0.

Folosirea clipurilor video

Internet Explorer permite inserarea foarte simpla a fisierelor de tip "imagine dinamica" (clipuri video) acelasi mod in care se insereaza o imagine statica. Astfel, pentru elementul IMG se folosesc atributele:dynsrc - pentru a determina URL-ul fisierului imagineloop - pentru a determina de cate ori va fi rulat clipul respectiv. Valoare implicita este "1". O valoaregala cu 0 sau -1 determina rularea continua a clipuluistart - determina momentul de start al clipului. Acesta poate fi "fileopen" ( valoare implicita) pentpornirea clipului odata cu incarcarea paginii in browser, sau "mouseover" pentru pornirea lui atunci cancursorul mouse-ului este pozitionat deasupra sa.Pentru a insera in document un clip video sau audio care sa poata fi redat si de alte browsere se poafolosi elementul embed cu atributele:src - pentru a preciza sursa fisierului audio sau video folositwidth si height - pentru a preciza dimensiunea ocupata de obiectul respectiv in document.Reusita inserarii unui astfel de clip depinde ded extensia fisierului folosit si de versiunea browserulu

Pentru fisierele video e preferabil sa folositi extensiile "mpg" sau "mov" , iar pentru cele audio format"mp3".

Exemplu:folosirea a doua fisiere video

Folosirea elementului OBJECT


23/43

10.Tabele

In capitolul dedicat listelor am prezentat una dintre posibilitatile pe care le aveti de a prezenta interiorul documentului informatia structurata. Insa folosirea listelor este utila doar atunci cand structurinformatiei nu prezinta un grad mare de complexitate. De aceea apare necesitatea unui instrument casa poata rezolva aceasta problema. Insa, asa cum veti vedea in cadrul acestui capitol, tabelele au si alutilizari, jucand un rol foarte important printre instrumentele pe care le au la indemana relizatopaginilor Web.

Marcarea unui tabel

Un tabel este marcat in document de perechea de controale si .Pentru a specifica principalele proprietati ale tabelului se folosesc urmatoarele atribute:width si heightStabilesc dimensiunile tabelului si pot fi exprimate in mod absolut sau in mod relativ. Dimensiunile pcare tabelul le va avea in cadrul documentului vor fi calculate de catre programul de explorare Wetinand cont de optiunile specificate prin cele doua atribute, dar si de dimensiunile elementelor dinteriorul tabelului in asa fel incat acestea sa fie vizibile.align

Determina pozitionarea pe orizontala a tabelului in cadrul documentului. Optiunile posibile au foprezentate in capitolul al II-lea

borderStabileste grosimea in pixeli a chenarului care inconjoara tabelul. In cazul in care s-a ales valoarea tabelul nu va afisa nici chenar, nici linii de demarcare in interiorul sau.frameStabileste care laturi ale chenarului care incadreaza tabelul vor fi vizibile. Optiunile posibile sunt:void - nici o laturaabove - latura de susbelow - latura de joshsides - laturile de sus si de josvsides - laturile din stanga si din dreaptalhs - latura din stangarhs - latura din dreapta

box - toate laturileborder - toate laturilerulesdetermina care dintre liniile de demarcare dintre celulele tabelului vor fi vizibile. Optiunile posibile sunt:none - nici o liniegroups - liniile dintre grupurile definite ale tabelului. Cum de defineste un grup vom vedea putin matarziu.rows - liniile orizontalecols - liniile vericaleall - toate liniilecellspacingstabileste spatiul (in pixeli) dintre doua celule vecine ale unui tabel precum si spatiul dintre marginitabelului si celulele din apropiere.

cellpadingstabileste spatiul dintre marginile unei celule si continutul acesteia.bgcolorstabileste culoarea de fond a tabelului.background

stabileste imaginea de fond a tabelului.Elementele care constitue un tabel sunt:eticheta de tabelantetul tabeluluicorpul tabeluluisubsolul tabelului


24/43

Corpul tabelului

Corpul tabelului este partea cea mai importanta, el continand informatia propriu-zisa afisata in tabeSe marcheaza cu ajutorul controalelor si . Pentru a avea consistenta, acesta trebusa contina cel putin o linie din tabel. Marcarea corpului tabelului nu este obligatorie, prezenta sa fiinimplicita in cadrul tabelului in momentul marcarii primei linii a lui.O linie in tabel se marcheaza cajutorul controalelor si . Ea contine una sau mai mule celule marcate prin controalele


25/43

a lui Netscape Navigatoraligndetermina pozitionarea pe orizontala a continutului in cadrul unei celulevaligndetermina pozitionarea pe vericala a continutului unei celule. Optiunile posibile sunt:top - alinierea se face la baza superioara a celulei.middle - pozitionare centrata in celula.bottom - alinierea se face la baza inferioara a celulei.Elementul TR marcheaza prezenta unei linii de date intr-un tabel si reprezinta elementul container celulelor care contin informatia propriu-zisa a tabelului. Lui i se pot atasa, de asemenea, atributele case refera la culoarea de fond a celulelor pe care le contine sau la pozitionarea elementelor in interioracestor celule.Celulele unui tabel pot sa contina in interiorul lor text, imagini, ancore de legaturi, sau chiar alte tabelIn afara proprietatilor mentionate la liniile tabelului, celulele au doua atribute foarte importante capermit formatarea si structurarea informatiei in interiorul tabelului:colspandetermina numarul de coloane ocupate de celula. Valoarea implicita este "1".rowspandetermina numarul de linii ocupate de celula. Valoarea implicita este "1".Atunci cand intr-un tabel se fac extinderi ale celulelor pe linii si coloane trebuie avut in vedere ca ncumva doua celule diferite sa pretinda spatiul unei aceleasi celule.width si height

recomanda programului de explorare web dimensiunile celulei. Nu uitati ca dimensiunile afisate acelulelor se fac atat in functie de optiunile exprimate prin atributele specifice, cat si tinand seama ddimensiunile elementelor care constitue continutul acestor celule.

Eticheta de tabel

Eticheta de tabel este folosita pentru a afisa deasupra tabelului un text scurt care - de obicei informeaza despre datele continute in tabel. Ea se marcheaza cu ajutorul controalelor . Ecest element trebuie sa apara imediat dupa controlul de inceput care marcheaza tabeluUn tabel nu poate avea decat o singura eticheta.Cel mai important atribut al etichetei de tabel este alignAcesta determina pozitionarea etichetei fata de tabel si are urmatoarele valori posibile:top - determina pozitionarea etichetei in centru, deasupra tabelului (valoare implicita)bottom - determina pozitionarea etichetei sub tabelleft - determina pozitionarea etichetei deasupra tabelului, aliniata la stangaright - determina pozitionarea etichetei deasupra tabelului, aliniata la dreapta

Antetul si subsolul tabelului

Antetul si subsolul tabelului sunt componente ale tabelului care contin in general informatii desprdatele prezentate, spre deosebire de corpul tabelului care contine respectivele date. Antetul si subsolsunt formate din una sau mai multe linii, linii care, la randul lor, contin una sau mai multe celule.Antetul este marcat de controalele si , iar subsolul tabelului este marcat dcontroalele si . Aceste controale trebuie sa apara inaintea controlului de incepcare marcheaza corpul tabelului.(In Netscape 4.7 subsoloul tabelului trebuie pozitionat dupa corpacelui tabel.)

In mod normal, THEAD, TBODY si TFOOT contin acelasi numar de coloane.Antetul si subsolul unui tabel trebuie sa contina cel putin o linie de tabel marcata cu ajutorul elementulTR. Celulele care intra in componenta antetului sau a subsolului tabelului se marcheaza de obicei ccontroalele si , dar este posibila si folosirea marcajelor pentru celulele folosite in corptabelului, deoarece, in mare masura, cele doua elemente sunt echivalente.Atributele cele mai importante ale antetului si subsolului tabelului sunt cele legate de pozitionardimensionare sau fond si au fost prezentate in sectiunea dedicata corpului tabelului.

Grupuri de coloane

Antetul corpul si subsolul tabelului reprezinta modalitati de a grupa pe orizontala informatia prezentatintr-un tabel. Exista si posibilitatea de a grupa coloanele unui tabel prin definirea unuia sau mai multo


26/43

grupuri de coloane. Un grup de coloane se marcheaza prin controalele si marcajul de inchidere putand sa lipseasca. Pentru a specifica numarul de coloane incluse in grup se pofolosi doua modalitati:prin folosirea atributului span a carui valoare determina numarul de coloane continute de grupprin specificarea explicita a coloanelor din grup cu ajutorul elementului COL. astfel, numarul de coloanal grupului va fi egal cu nmarul de elemente COL care urmeaza unui element COLGROUP.In cazul in care nici una dintre aceste doua optiuni nu este prezenta se considera ca grupul de coloancontine o singura coloana.Grupurile de coloane se introduc in document inaintea antetului sau a corpului tabelului si ele pot continatribute referitoare la pozitionarea continutului in interiorul celulelor sau la dimensiunea coloanelor pcare acestea le contin. Astfel, atributul width recomanda latimea pe care ar trebui sa o aiba toacoloanele grupului. Valoarea "0*" determina alocarea fiecarei coloane a grupului a unui spatiu minim porizontala astfel incat continutul celulelor sa fie vizibil.De asemenea, in cazul in care grupul de coloane se construieste prin specificarea separata a elementulCOL pentru fiecare coloana acest element poate sa contina atributele referitoare la dimensionarefiecarei coloane in parte sau la pozitionarea continutului in interiorul celulelor. Trebuie stiut ca, in moimplicit, programul de explorare calculeaza dimensiunile coloanelor la valori minime necesare pentru celementele din interiorul celulelor sa fie vizibile.

11.Pagina de cadre si cadre in pagina

In lectia dedicata referintelor si legaturilor am vazut ca atunci cand se activeaza o ancora de legatura c

un alt document, acesta din urma (documentul destinatie) este incarcat de catre programul de exploraWeb in fereastra documentului sursa sau intr-o fereastra noua. Ambele optiuni prezinta neajunsul de nu putea avea ambele documente deschise simultan in aceeasi fereastra pentru a putea avea acces cusurinta la fiecare dintre ele.Elementele introduse in aceasta lectie rezolva in mod foarte elegant aceasta problema.

Pagina de cadre

O pagina de cadre este un document HTML care va permite sa vizualizati in ceeasi fereastra mai multdocumente, fiecare asezat in propriul cadru, cadru care este de fapt o fereastra de sine-statatoare si carpermite derularea documentului sau incarcarea unui alt document. Intr-o pagina de cadre lipseselementul BODY, continutul paginii fiind marcat cu ajutorul controalelor si .

Ficare cadru din interiorul documentului este marcat cu ajutorul controalelor si .

Pozitionarea si dimensionarea cadrelor

Pentru a da informatii despre asezarea si dimensiunea cadrelor continute se folosesc urmatoareatribute ale elementului FRAMESET:rowsdetermina spatiul pe verticala pus la dispozitia fiecarui cadru si are forma unei liste de valori absolutrelative sau proportionale ale inaltimii fiecarui cadru. Caracterul "*" in cadrul listei acorda cadrulcorespunzator spatiul liber ramas.De exemplu, formulareadetermina impartirea documentului pe vericala in doua cadre, primul avind inaltimea de 60% din spati

vertical disponibil in fereastra, iar al doilea de 40% din acelasi spatiu.colsdetermina spatiul pe orizontala pus la dispozitia fiecarui cadru si are forma unei liste de valori absolutrelative sau proportionale ale latimii fiecarui cadru.Numarul valorilor separate de virgula trebuie sa fie acelasi cu numarul cadrelor care impart pe verticasau pe orizontala documentul. In cazul in care se specifica valori pentru ambele atribute documentul vfi impartit atat pe orizontala cat si pe verticala, ordinea in care vor fi asezate cadrele in pagina fiindeterminata de ordinea atributelor rows si cols si de ordinea elementelor FRAME in cadrul elementulFRAMESET.

Exemplu:Cadre pe orizontala


27/43

Acesta este un document de cadre. Din pacate...Exemplu:Cadre pe verticala

Aceasta este o pagina de cadre. Din pacate...Exemplu:Cadre pe orizontala si verticala

Aceasta este o pagina de cadre. Din pacate...Exemplu:Pagina cu cadre imbricate

Acest document contine cadre, dar....

Elementul cadru

Pentru a marca un cadru intr-o pagina de cadre se folosesc controalele si


28/43

specifica URL-ul documentului care va fi afisat in cadru la incarcarea paginii de cadre in fereastra.noresizereprezinta un atribut e tip boolean care, prin prezenta sa, impune imposibilitatea de a redimensioncadrul.scrolling

determina afisarea sau nefisarea barelor de defilare pe mariginea cadrului. Urmatoarele optiuni suposibile:autodetermina aparitia barelor de defilare doar in momentul in care o parte din document nu este vizibila cadru (optiune implicita)yesdetermina afisarea cadrului cu bare de defilare, indiferent de dimensiune documentului continutnodetermina afisarea cadrului fara bare de defilare, indiferent de dimensiune documentului continutframeborderdetermina afisrea sau neafisarea unei borduri de demarcare intre cadre adiacente. Optiunile posibisunt:1determina afisarea bordurii (valoare implicita).0determina neafisarea bordurii.marginwidth si marginheight

stabilesc spatiul pe orizontala si, respectiv, pe verticala lasat liber intre marginile cadrului si continutusau.

Cadre in interiorul unui document obisnuit

Exista si posibilitatea de a afisa in interiorul unei pagini HTML uzuale o fereastra care sa contina ualt document. Acest lucru se realizeaza prin folosirea elementului numit "fereastra interna" si marcat cajutorul controalelor si .In afara atributelor prezentate in paragraful precedenelementul IFRAME mai dispune de cateva specifice:width si heightdetermina dimensiunile pe orizontala si verticala ale ferestrei.aligndetermina pozitionarea ferestrei in document in raport cu elementele adiacente . Valorile si modul dpozitionare sunt analoage celor descrise la alinierea imaginilor.Ferestrele interne nu pot fi redimensionate si de aceea ele nu poseda atributul noresize. O almodalitate de a insera un document HTML sau un alt tip de document, o imagine sau un applet intrpagina Web este folosirea elementului OBJECT.Atributul data reprezinta URL-ul fisierului de incarcat in cazul documentelor sau al imaginilor, iar width height determina dimensiunile alocate obiectului in pagina.

12.Formularele HTML

Sunt sigur ca ati intalnit in Web pagini in care nu vi se ofera ci vi se cere informatie. Pagini in care afost rugati politicos sa va introduceti numele, varsta, adresa sau o parola. Toate aceste date era"colectionate" de catre un calculator numit "server" si mai apoi procesate, utilizatorul primind ca raspun

- in general - o pagina de confirmare sau una care semnaleaza prezenta erorilor in receptionarea acestdate sau erori legate de valorile introduse de utilizator. Deoarece folosirea acestui tip de comunicarnecesita publicarea documentelor pe un server Web si folosirea unor tipuri de programe care depasesscopul acestei documentatii, exemplele prezentate nu sunt functionale. Ele se pot folosi doar pentstudierea documentului sursa si pentru a avea o imagine generala asupra folosirii formularelor.

Formulare HTML

Formularele reprezint un "container" in interiorul caruia se gasesc elemente numite controale, elementcu ajutorul caruia utilizatorul specifica informatia care urmeaza a fi trimisa serverulului. Formularesunt marcate cu ajutorul controalelor si . Ele prezinta doua atribute esentiale pentcomunicarea cu serverul:


29/43

actionreprezinta un URL al unui fisier ce urmeaza a procesa informatia trimisa de utilizator. Acesta poate fi uprogram de tip CGI(programe care creeaza dinamic pagini HTML) sau asa numitele programe de scripe server cum sunt fisierele de tip asp saujsp.methodreprezinta metoda HTTP prin care se realizeaza trimiterea datelor catre programele de procesarValorile aproape unanim folosite sunt "get" si "post". Trebuie stiut ca datele introduse in formular su"expediate" ca perechi de forma nume=valoare, numarul perechilor fiind egal cu numarul datelor dformular trimise spre procesare. Diferenta intre cele doua metode este urmatoarea:Metoda get adauga aceste perechi la sfarsitul URL-ului de destinatie, despartite de acesta prin caracter"?", pe cand metoda post lasa URL-ul de destinatie intact, informatia trimisa fiind inglobata in asnumitul "corp al formularului".Aceste amanunte sunt necesare celor care scriu programele ce urmeaza a primi datele utilizatorulpentru a sti in ce mod sa extraga din "pachetul" receptionat aceste date.Alte atribute folosite sunt:enctypespecifica metoda de compactare utilizata pentru informatiiile continute in corpul formularului (dacmetoda aleasa e "post"). Valoarea implicita e "application/x-www-form-urlencoded". In cazul in cainformatia trimisa este de tipul "file" valoarea acestui atribut ar trebui sa fie "multipart/form-data".name sau idIdentifica formularul in vederea folosirii lui in scripturi. Este de preferat folosirea celei de-a douvariante, ea prezentand avatajul posibilitatii folosirii formularului in eventualele scripturi prezente

document.target, title, style, lang si dirAceste atribute au fost prezentate in lectiile anterioare.

Controalele unui formular

Exista mai multe tipuri de controale cu ajutorul carora utilizatorul introduce date sau alege variante aunor valori oferite. Iata lista controalelor pe care le puteti folosi in interiorul unui formular:ButoaneExista trei tipuri de butoane care pot aparea intr-un formular:SUBMIT (buton de transmitere) - este butonul a carui activare declansaza operatiunea de trimitere datelor catre serverRESET (buton de resetare) - este butonul a carui activare readuce controalele din formular la valorile linitialeBUTTON (buton fara actiune predefinita) - este butonul folosit de catre designer pentru a declanoperatiuni controlate de catre acesta, de obicei cu ajutorul scripturilorImaginiImaginile folosite pe post de controale in formular sunt folosite ca alternativa mai atragatoare din punde vedere estetic pentru butonul de tip "SUBMIT".Campuri de introducere a textuluiExista trei tipuri de casete de introducere a textului:TEXT - este caseta care permite introducerea textului pe o singura liniePASSWORD - este similara controlului TEXT, diferente constand in faptul ca datele introduse de utilizatovor fi afisate printr-un caracter "masca" (ex: "*") pentru a oferi un anumit grad de confidentialitate. Esfolosit de obicei la introducerea unor parole

TEXTAREA - este caseta de introducere a textului pe linii multipleCasute de validareSunt controalele prin care se confirma sau se infirma o optiune prezentata utilizatoruluiButoane radioSunt asemanatoare casutelor de validare, insa sunt grupate in mod logic cu ajutorul numelui. Toabutoanele radio avand acelasi nume apartin unui aceluiasi grup, iar intr-un asemenea grup doar usingur buton poate fi selectat la un moment dat.Meniuri derulanteReprezinta liste de valori din care utilizatorul poate selecta una sau mai multe valori, in functie de tipmeniuluiSelectoare de fisiereSunt controalele care dau posibilitatea utilizatorului sa selecteze un fisier care urmeaza a fi trim


30/43

serveruluiControale ascunseReprezinta posibilitatea de a transmite serverului date utile, fara ca utilizatorul sa le vada pe ecran

Elementul INPUT

Cea mai mare parte a controalelor unui formular se poate marca cu ajutorul unui singur element dmarcare HTML: INPUT. De aceea numarul atributelor acestui element este destul de mare, isemnificatia lor poate sa varieze de la un control la altul. Iata cateva dintre ele:typeSpecifica tipul controlului folosit. Valorile posibile sunt:textpasswordcheckboxradiosubmitresetbuttonimagehiddenfile

nameSpecifica numele controlului respectiv. Numele controlului va fi trimis impreuna cu valoarea introdusa dutilizator catre programul de procesare a datelor de pe server. In cazul butoanelor radio, fiecare buton unui grup trebuie sa aiba aceeasi valoare pentru acest atribut.valueSpecifica valoarea initiala a controlului respectiv. Acest atribut este optional, exceptie facand butoaneradio si casutele de validare pentru care setarea acestui atribut este obligatorie. In cazul butoanelor ereprezinta eticheta butonului respectiv.Valoarea finala a controalelor este valoarea pe care acestea o au in momentul in care s-a actionbutonul de tip "SUBMIT". Transmisia valorilor catre programul de procesare de pe server se face conforurmatoarelor reguli:campurile de editare de text transmit ca valoare textul continutbutoanele radio si casutele de validare transmit doar valorile controalelor selectateselectorul de fisiere transmite ca valoare continutul fisierului codificat conform metodei de compactaspecificate de atributul enctypescontroalele dezactivate nu transmit valorisizeDetermina numarul de caractere ocupat ca dimensiune pe orizontala de casetele de introducere textului. In cazul in care utilizatorul introduce un numar mai mare de caractere are loc o delpasare textului spre stanga, oferindu-se vizibilitate pozitiei curente a cursorului.maxlengthDetermina numarul maxim de caractere pe care utilizatorul le poate introduce intr-o casuta de textcheckedDetermina selectarea implicita a unui control de tip buton radio sau casuta de validaresrc

Este folosit pentru a localiza fisierul sursa a unei imagini atunci cand controlul este de tip "image"tabindex

Determina numarul de ordine al unui control in parcurgerea controalelor formularului cu ajutorul tast"tab"disabled

Atribut de tip "marcaj" a carui aparitie duce la aparitia dezactivata a controlului in formular, deutilizatorul nu va avea posibilitatea interactiunii cu controlul respectivaccept

Specifica tipul de fisiere acceptate pentru incarcare de catre un control input de tip file. Valorea acestatribut este o lista de tipuri MIME separate prin virgula(Ex:"image/jpg, text/plain"). Mai trebuie specificfaptul ca pentru a utiliza un contrrol de tip file, formularul container trebuie sa aiba valoarea proprietaenctype egala cu "multipart/form-date", iar metoda formularului trebuie sa fie post.


31/43

idclassstyletitleAceste atribute au fost analizate in lectiile precedente

Exemplu:Folosirea elementului INPUT in formulare

Formular de inregistrare:

Nume

Parola

Sex:Feminin

Masculin

Pensionar

Elementul BUTTONElementul BUTTON este folosit pentru a introduce in formular un buton care ofera posibilitati de a afisat intr-o maniera ceva mai pretentioasa. Si asta deoarece, spre deosebire de elementul INPUT, acesare un continut care poate sa cuprinda text sau imagine. E bine ca imaginile sa fie insotite de un tealternativ pentru ca afisarea butoanelor in fereastra programului de explorare Web sa poat fi concludent

si in cazul in care imaginile nu vor fi afisate. Marcarea acestui element necesita atat eticheta de incepcat si eticheta de sfarsit a controlului corespunzator.

Exemplu:Folosirea elementului BUTTON

Introduceti numele cautatCauta


32/43

Cateva din atributele specifice acestui element vor fi enumerate in cele ce urmeaza, ele avand - marea lor majoritate - aceeasi seminficatie ca in cazul elementului INPUT:type - avind optiuni posibile:SUBMITRESETBUTTONnamevaluedisabledtabindexacceskeyidclasstitle

Meniuri derulante

Un meniu derulant este o lista de optiuni prestabilite din care utilizatorul poate sa aleaga una sau m

multe valori, in functie de modul in care meniul respectiv a fost declarat in interiorul formularuluMarcarea meniului se realizeaza cu ajutorul elementu

ghid de initiere in html

Documents