Ghid de Initiere in Limbajul HTML

by endy for TorrentsMD.com

Ghid de initiere in limbajul HTML

1.Introducere

Am scris acest tutorial pentru ca stiu cat de mult va doriti unii dintre voi sa gasiti tutoriale in limba romana si desigur pentru a-mi reimprospata cunostintele. Nota:Acest ghid este destinat intregii clase de utilizatori,dar este special conceput pentru incepatori.Pe parcursul ghidului veti exemple de pagini HTML,copiati ceea ce se afla intre elementele de marcare si inclusiv aceste elemente si salvati totul intrun fisier cu extensia .htm sau .html.Daca lucrati in notepad in momentul in care salvati fisierul puneti numele fisierului intre ghilimele : fisier.htm sau selectati la Save as type modul all files si salvati asa fisierul dar de data aceasta fara ghilimele,deoarece Notepad-ul are obiceiul de a adauga extensia .txt la fisierele care au fost editate cu el.Si un ultim lucru inainte de a incepe,majoritatea exemplelor vor fi prezentate fara a fi cuprinse intre elementele de marcare la inceputul unui fisier HTML,deci aceste elemente vor trebui scrise de catre dumnevoastra.

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 alte cuvinte, Web este o colectie de milioane de documente legate intre ele, care se gasesc pe calculatoare raspindite in intreaga lume (Web = pinza de paianjen). Cind se parcurg site-uri din Web cu ajutorul unui browser se pot vizualiza elemente de tip text, grafica, video sau audio (cunoscute sub numele de hipermedia).Internetul este vehiculul care permite comunicarea intre calculatoarele din intreaga lume. Web-ul este deci un sistem de comunicare global care permite calculatoarelor sa transfere date hipermedia in Internet. Altfel spus, Web-ul se poate considera un sistem de documente sau programe legate 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 pentru fizica particulelor de la Geneva, Tim Berners-Lee a fost nevoit sa gaseasca o cale de a transmite informatii catre cercetatorii din domeniul fizicii energiilor inalte aflati n diverse zone geografice si o modalitate de a simplifica procesul de gasire a informatiilor pe Internet.In acest scop, el a propus un "sistem hipertext" de comunicatie intre calculatoare. Sistemul propus urma sa lege documentele prin intermediul unei retele de calculatoare, pentru utilizarea n comun a rezultatelor cercetarii stiintifice. CERN a promovat Web-ul, avind in vedere eventuala sa dezvoltare de la o retea locala la o retea globala, accesibila din intreaga lume. Prima utilizare publica a Web-ului a avut loc in ianuarie 1992, la Geneva, Elvetia, unde cercetatorii au avut acces la date Web din siteurile Web ale CERN. Prin proiectul Web al lui Berns-Lee, au fost stocate documente pe unul sau mai multe calculatoare, numite servere Web. Cercetatorii au avut acces la aceste date utilizind un program special numit browser Web.Astazi, utilizind Internet-ul, utilizatorii se conecteaza la un server Web si solicita anumite documente Web. Serverul Web ca raspuns, livreaza documentul utilizatorului, acesta putind sa-l parcurga si sa-l afiseze cu ajutorul unui program browser. Un server poate raspunde la cererile mai multor utilizatori in acelasi timp. In aprilie 1993, dupa aproape un an si jumatate de la introducerea Web-ului, existau 60 de servere Web. Astazi se estimeaza 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 acesta. Aceste pagini contin in principal informatii sub forma de text dar si sub forma video (imagini statice sau animatii) sau audio. Aceste informatii sint stocate pe Web sub un format special denumit HTML. HTML (HyperText Markup Language) este limbajul cu care "comunica" Web-ul. Formatul HTML a aparut odata cu aparitia Web-ului, si este un format special, este lizibil, adica este inteligibil de catre om. Cind vizualizam o pagina Web aceasta este in format HTML, iar browser-ul o traduce in imagini, sunete, texte etc. Pentru a crea pagini Web avem nevoie de un editor simplu de texte in care sa scriem pur si simplu ceea ce dorim in formatul HTML. Un singur inconvenient al realizarii paginilor Web cu ajutorul editoarelor de texte este faptul ca trebuie cunoscut limbajul HTML. Un alt mod de creare a paginilor Web este folosirea unui program pentru crearea paginilor Web. Aceste programe difera de la unul la altul dar unul dintre cele mai raspindite este FrontPage, un program al firmei Microsoft care apartine, deja, de pachetul de programe Microsoft Office, si este de tipul WYSIWYG - What You See Is What You Get - ceea ce vezi este ceea ce vei obtine.Pentru a putea face publice paginile Web este necesara utilizarea unui server de Web care sa stocheze pagina utilizatorului. Asemenea servere exista pe Web si pot fi gasite foarte usor. Web-ul este singura parte din Internet, in afara de e-mail, accesibila pentru majoritatea utilizatorilor. Multi nu vor vedea niciodata un meniu gropher si probabil nici nu vor simti nevoia. Nu vor avea niciodata placerea de a citi rezultatul unui WAIS. Toata atentia se indreapta spre Web. O pagina Web este asemenea multor documente care le aveti pe calculatorul dumneavoastra. Insa nu incarcati pagina web de pe calculatorul propriu ci de pe un server Web. Un Site Web este o alta denumire folosita pentru un anumit server Web. Este vorba despre un calculator conectat la Internet in asa fel incit sa puteti avea acces la paginile de Web pe care le contine. Fiecare pagina Web contine text,


imagini si scurtaturi.O scurtatura catre o pagina Web poate sa transfere un fisier, sa afiseze o imagine, sa redea sunete sau sa prezinte un film. Numarul de lucruri catre care conduce o scurtatura intr-o pagina Web este practic nelimitat.

Ce se poate gasi pe Web ?

Divertisment. Exista o multime de situri total nefolositoare, dar distractive, asemenea peretilor pe care oamenii scrijelesc diferite remarci. Reviste. Orice revista de pe un stand are o pagina Web. Majoritatea revistelor, cotidianelor si emisiunilor de stiri sunt 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. Microsoft, Hewlett Packard, Compaq, IBM sunt doar citeva exemple. Puteti gasi programe gratuite in unele dintre aceste situri. Cercetare. Studentii din intreaga lume pot folosi Web pentru cercetare in domenii ca literatura, matematica, chimie sau filozofie. Multe institutii de invatamint cum ar fi Universitatea Indiana, ofera informatii folositoare pentru studenti. Servicii. Exista o gama larga de servicii disponibile in Web. Puteti afla starea coletelor trimise prin FedEx sau UPS, sa cautati un prieten, sa aflati ultimele informatii despre starea vremii in zona dumneavoastra sau sa cautati numarul de telefon al unei firme.

Despre URL-uri

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


unde: protocol - reprezinta modul de acces la resursa; nod - reprezinta adresa unei masini din Internet; port - reprezinta portul pe care se realizeaza conexiunea cu calculatorul respectiv cale - reprezinta calea cu specificarea directoarelor si eventual a fisierului si a unei sectiuni specificate din 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 fi unul din urmatoarele: http (Hypertext Transfer Protocol). Este metoda cea mai des utilizata pentru accesarea informatiilor in Internet care sunt pastrate pe servere WWW (World Wide Web). De fapt, http este protoclul "implicit" al WWW. Adica, daca un URL nu contine partea de protocol, aceasta se considera ca fiind http. Acesta presupune rularea unui program corespunzator pe calculatorul destinatie care intelege protocolul respectiv. Fisierul destinatie trebuie sa fie un document HTML (HyperText Markup Language),un fisier grafic, de sunet,de animatie,un program executabil 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 o modalitate standard de a transfera fisierele binare din Internet. FTP nu necesita codarea fisierelor inainte de a fi incarcate, asa cum se intimpla in cazul fisierelor din e-mail sau de la grupuri de discutii. mailto Permite transmiterea de mesaj electronic. Navigatorul prezinta o forma pentru introducerea si transmiterea mesajului. In acest caz ceea ce urmeaza dupa mailto: este chiar adresa electronica a destinatarului mesajului. file Permite accesarea unui fisier pe calculatorul local. Se foloseste pentru vizualizarea unui fisier HTML pe un calculator care are un navigator dar nu este un server. In cazul in care pe calculatorul local ruleaza un sistem de operare Microsoft (MS-DOS, Windows3.x, Windows 95/NT), caracterul ":" care urmeaza literei unitatii de disc se inlocuieste cu "|". Exemplu: file:///C|/Users/Radu/Carte/Internet/Cap1.txt gopher Permite accesarea unor fisiere pe servere Gopher.


telnet Permite cuplarea la un nod, asemanator comenzii telnet. WAIS (Wide Area Reprezinta un fisier pe un server WAIS. Information Server)

news (USENET News) Se refera la un server de grupuri de discutii sau la un grup de discutii situat pe un astfel de server. In acest 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.ro este o adresa care se refera la masina cu numele "Edu" din domeniul "ro". In cazul transferului cu ftp se specifica si parola sub forma: nume:parola@nod La 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 servicii (programe server) au ca porturi valori prestabilite (Ex:HTTP - 80, FTP - 21, serverul de mail - 25). Daca folosim aceste valori, portul poate lipsi din schema URL -ului. Daca, insa, programul server "asculta" pe un port altul decat cel prestabilit, valoarea portului trebuie sa apara in adresarea corecta. Exemplu: http://localhost:8080 adreseaza 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-ului respectiv. In unele cazuri ea poate sa contina chiar o referire la o anumita sectiune a unui document (Dar despre aceata, mai tarziu...).


In cazul in care aceasta parte a unui URL lipseste, serverul Web cauta fisierul radacina al sau, fisier care - de cele mai multe ori - poarta numele "index.html sau "default.html". Daca un asenea fisier nu exista, sau nu a fost definit ca fisier implicit in cadrul serverului (situatie foarte rar intalnita), acesta din urma poate sa intoarca utilizatorului care a cerut URL-ul respectiv un mesaj de eroare, o lista a fisierelor disponibile la adresa respectiva sau un alt raspuns, depinde de serverul Web folosit. Exemple de URL: 1. http://www.sandia.gov/sci_compute/htm_ref.html Reprezinta documentul HTML cu numele html_ref.html in directorul sci_compute pe serverul WWW cu 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 despre Internet. 3. ftp://rtfm.mit.edu/usenet/news.answers/ftp-list/faq Reprezinta un document cu numele faq care contine cele mai frecvente intrebari si raspunsuri despre ftp. Documentul 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 pe diferite calculatoare conectate prin Internet la reteaua World Wide Web - se numeste browser. De fapt un browser este alcatuit dintr-un set de programe care permite manevrarea innformatiilor bazate pe text si elemente de grafica si rularea unor programe pe care documentele le pot include (appleturi, scripturi). Fiecare browser are o caseta de text unde utilizatorul introduce adresa documentului dorit. In cazul in care utilizatorul nu cunoaste adresa exacta de identificare a documentului, acesta poate introduce un text semnificativ pe care documentul ar trebui sa il contina. Browserul transmite acest text unor programe speciale existente in Web, programe numite motoare de cautare. Acestea cauta in multitudinea de documente existente respectivul text, oferind apoi ca rezultat o lista de adrese a unor documente 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 cele mai 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, si anume de editoare HTML sau utilitare si aplicatii pentru crearea de butoane si meniuri. In continuare voi prezenta cateva editoare de acest gen. Adobe GoLive!5.0 Realizat de compania Adobe, a carei experienta in domeniul graficii este bine cunoscuta, editorul GoLive dispune de o cantitate mare de obiecte, atat HTML standard cat si proprii. De asemenea, lucrul cu frame este foarte accesibil, acestea putand fi adaugate sau sterse foarte usor. Datorita interfetei asemanatoare Photoshop-ului, utilizatorii familiarizati cu acest program de grafica nu vor avea probleme la crearea unui site nou. Cool Page 2.7 Programul este destinat in primul rand celor care nu au cunostinte si timp pentru crearea graficii unui site web. Aceasta deoarece este livrat cu o multime de animatii GIF sau Flash, imagini si icon-uri gata de folosit in cadrul paginilor. De asemenea, datorita posibilitatilor de editare drag & drop, o pagina web poate 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 si Dreamweaver de la Macromedia. Cu toate ca orientarea sa este mai degraba spre un nivel mediu spre inalt de cunostinte in domeniu, el poate fi folosit cu succes si de un incepator. Dispune de un mare numar de template-uri care simplifica semnificativ munca de "schitare" a site-ului. Si pentru paginile web aveti la dispozitie mai multe modele pe care le puteti prelua, modificand doar informatia prezentata. Pagina web: www.macromedia.com HotDog PageWiz 1.04 Desi la prima vedere poate parea un program complicat, PageWiz este un instrument util pentru un utiilizator cu mai putina experienta, din cel putin doua puncte de vedere. In primul rand este o modalitate utila de invatare, pentru ca include o documentatie a limbajului HTML bine pusa la punct si care ajuta in timp real utilizatorul. In al doilea rand pentru ca include un "editor-vrajitor" foarte rapid care 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 cat mai repede si fara prea mare efort. Gama de functii oferite de Fusion este absolut satisfacatoare - daca nu ai pretentii prea mari. Tocmai multitudinea de functii de help face ca si novicii si utilizatorii mai putini versati sa obtina extrem de repede rezultate reprezentative. Fusion lucreaza cu obiecte, pe care le imbinati prin drag&drop, realizand astfel un site. Se poate spune, deci, ca incepatorii si designerii, care sunt presati de timp, vor fii cu adevarat incantati de NetObjects Fusion. Interfata simpla si intuitiva face ca erorile de utilizator sa fie excluse din start. Pagina web: www.netobjects.com HomeSite Editorul HomeSite produs anterior de compania Allaire (acum membra a Macromedia) se adreseaza in primul rand webdesignerilor, care dispun deja de tehnicii de programare si HTML. In ciuda unui cuprins imens de functii, datorita interfetei deosebit de reusite, utilizatorul va putea avea in permanenta o privire de ansamblu asupra intregului proiect.


HomeSite este practic opusul lui NetObjects Fusion sau a lui GoLive!: de aceasta data nu veti lucra cu obiecte grafice, ci direct in codul sursa al paginii web si trebuie sa stiti in permanenta ce pas parcurgeti. Acestea fiind spuse, este clar ca HomeSite nu prea este potrivit pentru incepatori si pentru adeptii Wysiwyg, in schimb este un editor absolut recomandabil tuturor celorlalti webdesigneri. Unul dintre avantajele programului il reprezinta codul sursa "curat", pe care il creeaza. CoffeCup Free HTML Free HTML este un program destinat in primul rand incepatorilor fara cunostinte HTML si programare web. Paginiile web pot fi realizate foarte usor, prin intermediul unor vrajitorii care va ofera posibilitatea de a plasa elementele paginii prin drag&drop.Stabilirea aspectului unitar al paginilor se poate face la fel de usor, prin aplicarea de diverse teme asupra acestora. Cam acestea ar fi optiunile pe care le ofera programul si de aceea incepatorii vor fi incantati de el, dar cei care dispun de cunostinte avansate vor cauta o alternativa. Totusi, faptul ca se pot crea rapid pagini web nu foarte complicate si mai ales gratuitatea, 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 in alte editoare fara a modifica marcajele create de utilizator. Codarea de mana este la fel de confortabila ca si design-ul. Se vor putea autoindenta elementele de cod, balansa simbolurile de punctuatie, indenta linii multiple simultan prin selectie. Exista functii java-script predefinite accesibile prin butoanele din ferestrele de asistenta. Pentru cod se aplica highligh de sintaxa, evidentiidu-se portiunile de cod unde este java-script sau alte script-uri. Pentru depanarea codului de java-script este prevazut un depanator care permite introspectia in executia care poate fi in Internet Explorer sau Netscape Navigator permitand astfel intelegerea functionarii fiecarui browser. Front Page Microsoft FontPage va ofera puterea de a adauga continut dinamic cu ajutorul unei componente de galerie foto, serviciul de componente Web din Microsoft MSN, Expedia, bCentral. Chiar daca sunteti un expert 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(Standard Generalized Markup Language) care este un limbaj de marcare mai avansat si a fost mult timp favoritul DoD(Department of Defense).Problema schimbului de informatie intre doua sau mai multe calculatoare este o problema extrem de complexa. Rezolvarea acestei probleme implica existenta unor "reguli de comunicare" pe care


calculatoarele sa le respecte. O comunicare reala intre doua parti - fie ele calculatoare sau nu - se bazeaza pe faptul ca informatia oferita de una dintre parti poate fi preluata si mai apoi inteleasa de catre cealalta. Regulile dupa care doua calculatoare care ruleaza sub diferite sisteme de operare comunica sunt stabilite de catre protocoale. Despre acestea am vorbit pe scurt in capitolul precedent. Dar in afara acestor reguli mai apare nevoia existentei unui "limbaj" pe care ambele calculatoare sa-l inteleaga. In WWW acesta este limbajul HTML.Redus la esenta, HTML (Limbajul de Marcare HiperText) este alcatuit dintr-un set de marcaje, coduri speciale inserate in continutul unui text, care ofera unui program numit interpretor de HTML informatii despre modul de formatare a continutului unui document si despre legaturile acestuia cu alte fisiere.

Elemente de marcare

Elementele de marcare sunt principalele componente ale limbajului HTML. Ele apar in document sub forma de etichete (tag-uri) sau controale HTML. Numele elementului apare in controlul de inceput (sub forma ) si in cel de sfarsit (sub forma ). Exemplu: si Portiunea din document incadrata de controalele HTML se mai numeste continutul elementului marcat si este partea de document asupra caruia actioneaza respectivul mod de formatare.Anumite elemente nu necesita etichete de sfarsit (Ex: P), iar altele nu au etichete de sfarsit, in general pentru ca nu au un continut pe care sa-l incadreze (Ex: BR). Exista, de asemenea, elemente prezente in document care pot sa nu fie marcate cu ajutorul etichetelor, prezenta lor in cadrul documentului fiind implicita (Ex: BODY).Limbajul HTML nu face distinctie intre literele mari si literele mici ale alfabetului. De aceea formularile
,
sau
desemneaza acelasi control.

Atribute

Atributele reprezinta proprietati ale elementelor de marcare scrise sub forma unor perechi de nume si 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 creatorul documentului conform dorintei acestuia. Ele pot fi, de asemenea, modificate dinamic, in timpul interactiunii 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 true Exemplu: Formularea sau marcheaza 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 alfabetul limbii engleze, numite si caractere speciale, (cum ar fi , sau ) se folosesc marcaje speciale numite referinte de entitati sau referinte de caracter. Spre deosebire de controalele de marcaj despre care am vorbit in sectiunile anterioare, referintele de entitate nu sunt incadrate de caracterele "". Ele incep intotdeauna cu caracterul ampresand "&" urmat de un text in stransa legatura cu caracterul pe care il reprezinta sau un cod numeric si se termina cu caracterul ";".De asemenea, caracterele folosite in marcajele HTML (, &) se pot insera in cadrul documentului numai cu ajutorul referintelor de entitate. Iata cateva din caracterele speciale, impreuna cu marcajele care le reprezinta: & sau = & < sau < = < > sau > = > " sau &@34 = " =


Comentarii

Reprezinta texte care apar in fisierul sursa HTML, dar care nu vor fi afisate de catre browser catre utilizator. Ele au rolul de a expune diferite aspecte legate de document in vederea realizarii unui fisier sursa 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 "--" deoarece aceasta genereaza confuzie.

Exemplu:

Alinierea

Pentru a specifica modul in care un element (antet,imagine,tabel,etc) va fi pozitionat pe orizontala relativ la elementul "container " care il contine se foloseste atributul align. Valorile acordate acestui atribut pot fi: left - pentru alinierea la stanga center - pentru pentru pozitionarea centrata right - pentru alinierea la dreapta Implicit, alinierea se realizeaza la stanga, cu exceptia cazului in care elementul de pozitionat contine text a carui directie de scriere este de la dreapta la stanga, optiune realizata prin setarea in interiorul controlului a atributului dir la valoarea "rtl" (Right-ToLeft). In acest caz alinierea implicita este la dreapta. Pentru a determina alinierea pe verticala a unui element in cadrul elementului container se foloseste atributul valign cu urmatoarele valori posibile: middle - pentru pozitionarea centrata top - pentru alinierea la partea de sus a containerului


bottom - pentru alinierea la partea de jos a containerului

Culorile

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

Exemplu: Este de preferat ca atunci cand utilizati culori sa apelati la una din cele 16 culori numite "sigure". Iata un tabel cu numele si codul lor: Aqua #00ffff Black #000000 Blue #0000ff Fuchsia #ff00ff Gray #808080 Green #00ff00 Lime #008000 Maroon #800000 Navy #000080 Olive #808000 Purple #800080 Red #ff0000 Silver #c0c0c0


Teal #008080 White #ffffff Yellow #ffff00

Dimensiunile

Dimensiunile unor elemente prezente in documentul HTML se pot preciza in trei moduri: 1.Dimensiunea absoluta este referita in pixeli. De exemplu o exprimare de forma "width = 300" denota ca un anumit element are latimea de 300 pixeli 2.Dimensiunea relativa (procentuala) este referita in procente. Astfel textul "width = 50%" exprima faptul ca elementul referit va avea ca latime 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. Ea se exprima sub forma "i*", unde i este un numar care arata cate "parti" din total sunt revendicate. De exemplu, pe un spatiu de 60 de pixeli disponibili, dimensiunile notate 1*, 2*, 3* insumeaza 6 unitati in care spatiul disponibil va fi impartit. Fiecare unitate contine 10 pixeli. Astfel ca cele trei dimensiuni exprimate mai sus reprezinta 10 pixeli, 20 pixeli si, respectiv, 30 pixeli.

Valori data-ora

Formatul pentru scrierea acestor valori este : YYYY-MM-DDThh:mm:ssTZD unde YYYY - reprezinta anul scris cu 4 cifre MM - reprezinta luna (Ianuarie = 01, .., Decembrie = 11)


DD - reprezinta ziua din luna, cu valori de la 01 la 31 T - ramane caracter scris cu litera mare pentru a marca inceputul scrierii orei hh - 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 valoare este 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 folosit Subcod (optional) - specifica o versiune a limbajului respectiv Cele doua componente vor fi separate de cracterul "-". Iata cateva exemple: en = limba engleza en-US = limba engleza -varianta americana fr = limba franceza de = limba germana it = limba italiana es = limba spaniola


pt = limba portugheza

4.Structura unui document

Sectiunile unui document HTML

Un document HTML este impartit in trei sectiuni: Sectiunea de informatii HTML Sectiunea de antet a documentului Corpul documentului Controalele si incadreaza antetul si corpul documentului .Ele comunica interpretorului HTML ca blocul de text cuprins intre ele este scris si formatat in limbajul HTML standard. Prezenta acestor 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.


Sectiunea de informatii

Sectiunea de informatii HTML ofera informatii asupra versiunii limbajului HTML folosit. Multe editoare de HTML insereaza automat textul necesar la inceputul documentului Exemplu:

Antetul documentului

Sectiunea de antet a documentului este incadrata de controalele si . Prezenta celor doua controale in document este optionala, insa ea ajuta la o impartire mai clara a documentului pe sectiuni.Antetul documentului cuprinde, in general, informatii precum titlul documentului (pentru a fi afisat pa baza de sus a a ferestrei programului de navigare sau pentru ca documentul sa poata fi mai usor identificat de catre utilizator), cuvinte-cheie care folosesc motoarelor de cautare de documente, precum si alte informatii legate de documentul creat. Informatiile folosite in aceasta sectiune nu sunt afisate 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 de exporare sau va putea fi folosit de utilizatori pentru pastrarea documentului in listele specifice ale acestui program. si ofera asa-numitele meta-informatii despre document declarand anumite proprietati impreuna cu valorile acelor proprietati. Daca valoarea unei proprietati este definita intern se va folosi controlul , iar daca valoarea va fi luata dintr-o locatie oarecare din exterior se va folosi controlul . Succesul folosirii acestor doua controale depinde in mare masura de interpretorul de HTML utilizat de catre utilizator. De exemplu, cu ajutorul elementului META se pot preciza informatiile care vor fi trimise in "header-ul" documentului, adica informatii specifice protocolului HTTP si pe care browserul le "citeste" pentru a pregati afisarea documentului.Se folosesc formularile: http-equiv= pentru numele informatiei meta


content= pentru continutul (valoarea) informatiei respective. In exemplul de mai jos se foloseste informatia meta Content-Type pentru a preciza: tipul documentului setul de caractere folosit Tipul documentului este pentru un document HTML "text/html". Setul de caractere reprezinta o multime de caractere folosite in alfabetul diferitelor limbi, caractere identificate printr-un numar de cod. De aceea, pentru ca browserul sa poata descifra corect informatia pe care 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 pentru Standardizare) 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 alfabetului latinsi este cel mai des intalnit ISO 8859-5 - alfabetul chirilic ISO 8859-6 - alfabetul arab ISO 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 de indexare a paginii de catre paianjeni sau motoare de cautare Web. Exemplu:

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 de controalele si . Chiar daca marcarea corpului documentului cu cele doua etichete este optionala, 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 culoarea textului. 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. Daca acesta exista, el va fi afisat si multiplicat pentru a acoperi intreaga suprafata a documentului, culoarea de fond fiind vizibila numai daca fondul imagini este transparent. Daca nu, fondul documentului va fi dat de 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 stanga Pentru Netscape Navigator: marginheight - pentru marginea de sus marginwidth - pentru marginea din stanga Pentru Internet Explorer exista posibilitatea de a atasa unui document un fond sonor. Aceasta se poate realiza prin folosirea in antetul documentului a elementului BGSOUND. Doua dintre atributele acestuia sunt foarte importante: src - determina fisierul audio care va fi rulat de catre browser la incarcarea documentului in fereastra loop - determina de cate ori va fi repetata secventa de sunet respectiva. O valoare egala cu -1 determina repetarea continua a sunetului Exemplu:Document cu imagine de fundal


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

Exemplu:Document cu setarea culorii fundalului si a dimensiunii marginilor

Document cu culoare de fond Aceasta 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 Internet Explorer si de Netscape Navigator


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

5.Despre aspectul unui document

Generalitati

In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica a elementelor care constitue documentul HTML. Trebuie subliniat faptul ca aspectul cat mai atragator al 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, aspectul documentului afisat utilizatorului nu coincide cu aspectul fisierului sursa. Pentru a obtine asezarea dorita a componentelor documentului in fereastra programului de navigare, se folosesc controalele de separare
si care determina desfasurarea continutului pe linii si paragrafe. Astfel, pentru a marca trecerea la un nou paragraf folositi controlul , iar pentru a marca trecerea la o linie noua folositi controlul
. Aceste doua controale nu necesita marcaj de inchidere (terminare). Pentru a insera in document un numar oarecare de spatii libere se foloseste caracterul special (NonBreakingSpace). Spatiile 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 controalele si cu rolul de a marca inceputul si sfarsitul sectiunii de text care va fi afisata pe o singura linie. Nu toate browserele recunosc aceste controale, asa ca - daca se poate - evitati sa le folositi!

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


Linii si paragrafe Paragraf1: Acest text va fi afisat pe o singura linie. Paragraf2:
O linie de text
Alta linie de text Paragraf3:
..dupa 4 linii libere... Paragraf4:
Intrecuvinte exista suficientspatiu Paragraf5:


bla-bla-bla-bla bla-bla bla bla bla-bla-bla bla-bla-bla-bla bla-bla bla-bla-bla-bla bla-bla-bla- bla-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 mai naturala este folosirea marcajelor de formatare a subtitlurilor.Titlurile si subtitlurile sectiunilor documentului se vor marca folosind elementele de la H1 la H6, in ordine descrescatoare a importantei, dimensiunea fontului folosit descrescand si ea. La afisare, programul de navigare va lasa linii goale inainte si dupa fiecare marcaj pentru titlu si subtitlu.

Exemplu:Antete de sectiune

Element H1 Element H2 Element H3 Element H4 Element H5 Element H6

Rigla orizontala

Pentru o mai vizibila impartire a corpului documentului se voloseste rigla orizontala marcata cu controlul . Prezenta acestui control produce desenarea unei linii orizontale subtiri pe toata latimea documentului. Dimensiunile riglei pot fi controlate cu ajutorul atributelor width si size, care seteaza dimensiunile pe orizontala si, respectiv, pe vericala a liniei in pagina. Pentru a elimina


aspectul tridimensiunal al riglei se poate 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 utile 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! Pentru recalmatii contactati-ne la
[email protected]

Controalele si

Controlul este folosit in document pentru a grupa intr-un bloc "logic" o parte din continutul documentului in vederea atribuirii unitare a caracteristicilor legate de stilul de prezentare, sau pentru a identifica respectivul bloc de continut in vederea utilizarii lui de catre scripturile prezente in document. Browserul va trece la line noua inainte si dupa terminarea acestui marcaj.De asemenea acest controle se mai poate folosi alaturi de proprietatile de stil pentru pozitionare pentru a creea in cadrul documentului "straturi" de dimensiuni variabile ce pot fi pozitionate in diferite locatii ale documentului, suprapuse, ascunse sau expuse, in functie de necesitatile designer-ului. Controlul are rolul de a "extrage" o portiune de document - de obicei inclusa intrun bloc marcat de controale HTML si care, eventual, are specificate un anumit numar de atribute - pentru a o identifica sau 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 numai atat, 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 continutului unui document HTML de forma in care este el prezentat. Acest lucru este posibil prin utilizarea foilor de stil, a stilurilor definite in antetele documentului, sau prin gruparea proprietatilor legate de forma de prezentare in cadrul unui singur atribut: style. Utilizarea acestuia in interiorul unui control HTML - aproape toate care se pot gasi in interiorul corpului documentului, cu putine exceptii ( sau ) se face respectand urmatorul tipar de scriere: Aceasta este o pagina de cadre. Din pacate... Exemplu:Cadre pe orizontala si verticala src="IndexSus.html" src="Pagina3.html" marginwidth="0" marginwidth="0" scrolling="auto" scrolling="auto"


Aceasta este o pagina de cadre. Din pacate... Exemplu:Pagina cu cadre imbricate src="IndexStangaImbri.html" name="contents" id="contents" marginwidth="10" marginwidth="10" marginwidth="10" marginheight="10" marginheight="10" marginheight="10"

Acest document contine cadre, dar....

Elementul cadru

Pentru a marca un cadru intr-o pagina de cadre se folosesc controalele si . Atributele care specifica modul de afisare a unui cadru sunt:


name identifica un cadru pentru a putea fi folosit ca valoare a atributului target a unei ancore sursa. Exista si posibilitatea de a predefini tintele referintelor la nivel de document cu ajutorul aceluiasi atribut aplicat elementului BASE. Astfel, o formulare de genul: face ca toate ancorele prezente in documentul respectiv sa aiba ca tinta cadrul "cadruA", cu exceptia celor care specifica ele insele o alta tinta. Pentru a afisa un document in fereastra mare, nedivizata in cadre, folositi valorile "_parent" sau _top pentru atributul target al elementului ancora. src specifica URL-ul documentului care va fi afisat in cadru la incarcarea paginii de cadre in fereastra. noresize reprezinta un atribut e tip boolean care, prin prezenta sa, impune imposibilitatea de a redimensiona cadrul. scrolling determina afisarea sau nefisarea barelor de defilare pe mariginea cadrului. Urmatoarele optiuni sunt posibile: auto determina aparitia barelor de defilare doar in momentul in care o parte din document nu este vizibila in cadru (optiune implicita) yes determina afisarea cadrului cu bare de defilare, indiferent de dimensiune documentului continut no determina afisarea cadrului fara bare de defilare, indiferent de dimensiune documentului continut frameborder determina afisrea sau neafisarea unei borduri de demarcare intre cadre adiacente. Optiunile posibile sunt:


1 determina afisarea bordurii (valoare implicita). 0 determina neafisarea bordurii. marginwidth si marginheight stabilesc spatiul pe orizontala si, respectiv, pe verticala lasat liber intre marginile cadrului si continutul sau.

Cadre in interiorul unui document obisnuit

Exista si posibilitatea de a afisa in interiorul unei pagini HTML uzuale o fereastra care sa contina un alt document. Acest lucru se realizeaza prin folosirea elementului numit "fereastra interna" si marcat cu ajutorul controalelor si .In afara atributelor prezentate in paragraful precedent, elementul IFRAME mai dispune de cateva specifice: width si height determina dimensiunile pe orizontala si verticala ale ferestrei. align determina pozitionarea ferestrei in document in raport cu elementele adiacente . Valorile si modul de pozitionare sunt analoage celor descrise la alinierea imaginilor. Ferestrele interne nu pot fi redimensionate si de aceea ele nu poseda atributul noresize. O alta modalitate de a insera un document HTML sau un alt tip de document, o imagine sau un applet intr-o pagina Web este folosirea elementului OBJECT. Atributul data reprezinta URL-ul fisierului de incarcat in cazul documentelor sau al imaginilor, iar width si 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 ati fost rugati politicos sa va introduceti numele, varsta, adresa sau o parola. Toate aceste date erau "colectionate" de catre un calculator numit "server" si mai apoi procesate, utilizatorul primind ca raspuns - in general - o pagina de confirmare sau una care


semnaleaza prezenta erorilor in receptionarea acestor date sau erori legate de valorile introduse de utilizator. Deoarece folosirea acestui tip de comunicare necesita publicarea documentelor pe un server Web si folosirea unor tipuri de programe care depasesc scopul acestei documentatii, exemplele prezentate nu sunt functionale. Ele se pot folosi doar pentru studierea 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, elemente cu ajutorul caruia utilizatorul specifica informatia care urmeaza a fi trimisa serverulului. Formularele sunt marcate cu ajutorul controalelor si . Ele prezinta doua atribute esentiale pentru comunicarea cu serverul: action reprezinta un URL al unui fisier ce urmeaza a procesa informatia trimisa de utilizator. Acesta poate fi un program de tip CGI (programe care creeaza dinamic pagini HTML) sau asa numitele programe de script pe server cum sunt fisierele de tip asp sau jsp. method reprezinta metoda HTTP prin care se realizeaza trimiterea datelor catre programele de procesare. Valorile aproape unanim folosite sunt "get" si "post". Trebuie stiut ca datele introduse in formular sunt "expediate" ca perechi de forma nume=valoare, numarul perechilor fiind egal cu numarul datelor din formular 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 caracterul "?", pe cand metoda post lasa URL-ul de destinatie intact, informatia trimisa fiind inglobata in asa numitul "corp al formularului". Aceste amanunte sunt necesare celor care scriu programele ce urmeaza a primi datele utilizatorului pentru a sti in ce mod sa extraga din "pachetul" receptionat aceste date. Alte atribute folosite sunt: enctype specifica metoda de compactare utilizata pentru informatiiile continute in corpul formularului (daca metoda aleasa e "post"). Valoarea implicita e "application/x-www-formurlencoded". In cazul in care informatia trimisa este de tipul "file" valoarea acestui atribut ar trebui sa fie "multipart/form-data". name sau id


Identifica formularul in vederea folosirii lui in scripturi. Este de preferat folosirea celei de-a doua variante, ea prezentand avatajul posibilitatii folosirii formularului in eventualele scripturi prezente in document. target, title, style, lang si dir Aceste 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 ale unor valori oferite. Iata lista controalelor pe care le puteti folosi in interiorul unui formular: Butoane Exista trei tipuri de butoane care pot aparea intr-un formular: SUBMIT (buton de transmitere) - este butonul a carui activare declansaza operatiunea de trimitere a datelor catre server RESET (buton de resetare) - este butonul a carui activare readuce controalele din formular la valorile lor initiale BUTTON (buton fara actiune predefinita) - este butonul folosit de catre designer pentru a declansa operatiuni controlate de catre acesta, de obicei cu ajutorul scripturilor Imagini Imaginile folosite pe post de controale in formular sunt folosite ca alternativa mai atragatoare din punct de vedere estetic pentru butonul de tip "SUBMIT". Campuri de introducere a textului Exista trei tipuri de casete de introducere a textului: TEXT - este caseta care permite introducerea textului pe o singura linie PASSWORD - este similara controlului TEXT, diferente constand in faptul ca datele introduse de utilizator vor fi afisate printr-un caracter "masca" (ex: "*") pentru a oferi un anumit grad de confidentialitate. Este folosit de obicei la introducerea unor parole TEXTAREA - este caseta de introducere a textului pe linii multiple Casute de validare


Sunt controalele prin care se confirma sau se infirma o optiune prezentata utilizatorului Butoane radio Sunt asemanatoare casutelor de validare, insa sunt grupate in mod logic cu ajutorul numelui. Toate butoanele radio avand acelasi nume apartin unui aceluiasi grup, iar intr-un asemenea grup doar un singur buton poate fi selectat la un moment dat. Meniuri derulante Reprezinta liste de valori din care utilizatorul poate selecta una sau mai multe valori, in functie de tipul meniului Selectoare de fisiere Sunt controalele care dau posibilitatea utilizatorului sa selecteze un fisier care urmeaza a fi trimis serverului Controale ascunse Reprezinta 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 de marcare HTML: INPUT. De aceea numarul atributelor acestui element este destul de mare, iar semnificatia lor poate sa varieze de la un control la altul. Iata cateva dintre ele: type Specifica tipul controlului folosit. Valorile posibile sunt: text password checkbox radio submit reset


button image hidden file

name Specifica numele controlului respectiv. Numele controlului va fi trimis impreuna cu valoarea introdusa de utilizator catre programul de procesare a datelor de pe server. In cazul butoanelor radio, fiecare buton al unui grup trebuie sa aiba aceeasi valoare pentru acest atribut. value Specifica valoarea initiala a controlului respectiv. Acest atribut este optional, exceptie facand butoanele radio si casutele de validare pentru care setarea acestui atribut este obligatorie. In cazul butoanelor ea reprezinta eticheta butonului respectiv. Valoarea finala a controalelor este valoarea pe care acestea o au in momentul in care s-a actionat butonul de tip "SUBMIT". Transmisia valorilor catre programul de procesare de pe server se face conform urmatoarelor reguli: campurile de editare de text transmit ca valoare textul continut butoanele radio si casutele de validare transmit doar valorile controalelor selectate selectorul de fisiere transmite ca valoare continutul fisierului codificat conform metodei de compactare specificate de atributul enctypes controalele dezactivate nu transmit valori size Determina numarul de caractere ocupat ca dimensiune pe orizontala de casetele de introducere a textului. In cazul in care utilizatorul introduce un numar mai mare de caractere are loc o delpasare a textului spre stanga, oferindu-se vizibilitate pozitiei curente a cursorului. maxlength Determina numarul maxim de caractere pe care utilizatorul le poate introduce intr-o casuta de text checked


Determina selectarea implicita a unui control de tip buton radio sau casuta de validare src 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 tastei "tab" disabled Atribut de tip "marcaj" a carui aparitie duce la aparitia dezactivata a controlului in formular, deci utilizatorul nu va avea posibilitatea interactiunii cu controlul respectiv accept Specifica tipul de fisiere acceptate pentru incarcare de catre un control input de tip file. Valorea acestui atribut este o lista de tipuri MIME separate prin virgula(Ex:"image/jpg, text/plain"). Mai trebuie specificat faptul ca pentru a utiliza un contrrol de tip file, formularul container trebuie sa aiba valoarea proprietatii enctype egala cu "multipart/formdate", iar metoda formularului trebuie sa fie post. id class style title Aceste atribute au fost analizate in lectiile precedente

Exemplu:Folosirea elementului INPUT in formulare

Formular de inregistrare:


Nume Parola Sex: Feminin Masculin Pensionar


Elementul BUTTON

Elementul BUTTON este folosit pentru a introduce in formular un buton care ofera posibilitati de a fi afisat intr-o maniera ceva mai pretentioasa. Si asta deoarece, spre deosebire de elementul INPUT, acesta are un continut care poate sa cuprinda text sau imagine. E bine ca imaginile sa fie insotite de un text alternativ pentru ca afisarea butoanelor in fereastra programului de explorare Web sa poat fi concludenta si in cazul in care imaginile nu vor fi afisate. Marcarea acestui element necesita atat eticheta de inceput cat si eticheta de sfarsit a controlului corespunzator.

Exemplu:Folosirea elementului BUTTON

Introduceti numele cautat Cauta

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


SUBMIT RESET BUTTON name value disabled tabindex acceskey id class title

Meniuri derulante

Un meniu derulant este o lista de optiuni prestabilite din care utilizatorul poate sa aleaga una sau mai multe valori, in functie de modul in care meniul respectiv a fost declarat in interiorul formularului. Marcarea meniului se realizeaza cu ajutorul elementului SELECT. Fiecare optiune a meniului respectiv se marcheaza cu ajutorul elementului OPTION. Un meniu trebuie sa contina cel putin un element OPTION. In cazul in care lista contine un numar mare de optiuni, acestea se pot grupa cu ajutorul elementului OPTGROUP.

Exemplu:Folosirea meniurilor derulante

Orasul:


Judetul Alba Arad Arges Bacau Bihor Bistrita-Nasaud Brasov Braila Buzau Calarasi Cluj Altele... O.K Sterge


Atributele specifice elementului SELECT sunt: name sau id Specifica numele sau identificatorul meniului size Specifica numarul de linii vizibile in acelasi timp din cadrul listei oferite de meniu multiple Prezenta sa determina posibilitatea selectiei multiple in cadrul listei. In mod implicit un meniu permite selectia a unui singur element. disabled Determina afisarea controlului in forma dezactivata, deci fara posibilitatea ca utilizatorul sa interactioneze cu acesta style tabindex class title Atribute care au fost prezentate in sectiunile anterioare Un element de tip OPTION marcheaza o optiune din cadrul unei liste derulante. Principalele atribute ale acestui element sunt: selected Aparitia acestui atribut determina ca elementul respectiv sa devina optiunea preselectata a listei label Ofera textul care va fi folosit pentru scrierea elementului in cadrul listei in locul continutului elementului value


Determina valoarea initiala a elementului. In caz ca acest atribut nu apare, valoare initiala se considera a fi continutul elementului id class style title lang dir Atribute care au fost prezentate in sectiunile anterioare ale documentatiei

Casuta de text multilinie

Casuta de text multilinie este folosita atunci cand utilizatorul trebuie sa introduca text a carui asezare necesita scrierea pe mai multe linii. Marcarea acestui control se face cu ajutorul elementului TEXTAREA care trebuie sa aiba atat eticheta de inceput cat si cea de sfarsit. Continutul cuprins intre cele doua etichete reprezinta valoarea initiala a acestui element. Atributele folosite pentru specificarea proprietatilor casutei de text multilinie sunt: name sau id Specifica numele sau identificatorul elementului rows Determina numarul liniilor de text vizibile. In cazul in care utilizatorul introduce mai multe linii de text caseta de text va fi prevazuta cu bare de defilare verticale cols Specifica numarul de "coloane" a casetei de text. O coloana reprezinta latimea medie a unui caracter. wrap Determina modul de trecere la linie noua in caseta de text. Valorile posibile sunt: on - determina trecerea pe linia urmatoare atunci cand textul atinge marginea din dreapta a casetei de text


off - trecerea pe linie noua nu se face decat atunci cand utilizatorul apasa tasta "CR". In cazul in care latimea liniei o depaseste pe cea a casutei de text aceasta din urma va avea o bara de defilare pe orizontala readonly Determina afisarea controlului fara posibilitatea ca textul continut sa poata fi modificat de utilizator. Textul, insa, va fi trimis programului de procesare de pe server ca valoare a acestui element. disabled class style title lang dir acceskey Atribute care au fost prezentate in sectiunile anterioarea ale documentatiei

Exemplu:Folosirea casutei de text multilinie

Mesaje prin posta electronica Adresa destinatarului: Mesajul:


id=TextMesaj

name=TextMesaj

rows=7

Corecteaza

Etichetele controalelor

Unele controale din formulare au o eticheta automata (ex: butoanele), in timp ce altele nu dispun de asa ceva, limbajul HTML urmarind numai "legarea" controlului de valoarea pe care o are nu si de semnificatia sa pentru utilizator. De aceea s-au introdus etichetele afisate cu ajutorul elementului LABEL. Pentru marcarea acestui element sunt necesare atat eticheta de inceput cat si cea de sfarsit. Proprietatea cea mai importanta a controlului este for, proprietate care leaga explicit eticheta de un control din formular identificat cu ajutorul atributului id sau name.


Exemplu:Folosirea etichetelor pentru controalele unui formular

Introduceti numele si parola: Nume:
Parola:

13.Proprietati de stil

Cel mai important castig al variantei 4.0 a limbajului HTML este, fara discutie, folosirea modelelor de stiluri. Definirea proprietatilor elementelor care apar intr-un document HTML cu ajutorul modelelor de stiluri ofera o mult mai mare flexibilitate creatorilor de pagini Web in a stabili aspectul final pe care pagina respectiva o va avea in fereastra programului de navigare Web. Modelele de stiluri nu reprezinta in mod practic o parte a limbajului HTML ci se prezinta ca limbaj de sine statator. Exista diferite limbaje de modele de stiluri, cel mai cunoscut si utilizat fiind Modelele de Stiluri in Cascada (Cascading Style Sheets - CSS) . Pentru a stabili limbajul implicit de modele de stiluri pentru un document se foloseste elementul META in antetul documentului. De exemplu, pentru a desemna limbajul implicit ca fiind CSS se foloseste urmatoarea sintaxa: Oricum, in caz ca in antetul sau in header-ul HTTP al documentului nu se specifica un limbaj de modele de stiluri aplicat, limbajul implicit se considera a fi CSS. Prezentarea proprietatilor de stil se poate face in 3 moduri: la nivel de element, prin folosirea atributului style


la nivel de document, prin folosirea elementului STYLE definit in antetul documentului prin creearea unui fisier de stiluri cu extensia "css" care poate fi aplicat mai multor documente HTML. Gruparea unuia sau mai multor modele de stil intr-un fisier extern sau in antetul unui document HTML formeaza o asa numita foaie de stil

Folosirea atributului style

Aplicarea proprietatilor de stil la nivelul fiecarui element in parte se realizeaza cu ajutorul atributului style. Valoarea acestui atribut este formata dintr-o multime de perechi de forma proprietate:valoare separate prin caracterul ";". Exemplu: Text foarte important Trebuie stiut ca proprietatile de stil se mostenesc prin incluziune, adica o proprietate aplicata unui element "parinte" este valabila si pentru elementele pe care acesta le include, cu exceptia cazurilor in care elementele continute nu definesc ele insele valori pentru aceasta proprietate. Pentru a specifica valori ale atributelor care reprezinta URL-uri ale unor fisiere se foloseste sintaxa url(cale spre fisier), unde "cale spre fisier" reprezinta URL-ul relativ sau absolut al fisierului referit.Exemplu:

Inglobarea foilor de stil in antetul documentului

Cu ajutorul elementului STYLE amplasat in sectiunea de antet a documentului se pot defini modele de stiluri aplicabile unuia sau mai multor elemente din cadrul acelui document. Un model de stil se poate aplica: unui singur element din document tuturor elementelor de acelasi tip ale documentului unei submultimi de elemente ale documentului care pot fi de acelasi tip sau de tipuri diferite


Pentru a aplica un model de stil unui singur element se foloseste atributul id de identificare a elementului in cadrul documentului. Exemplu: PARAGRAFUL

2

Deoarece valoarea atributului id este unica in interiorul unui document stilul se aplica cel mult unui singur element din cadrul documentului in al carui antet este definit modelul de stil. Pentru a defini un model de stil ce urmeaza a se aplica tuturor elementelor de acelasi tip se rescriu proprietatile care urmeaza a defini caracteristicile tipulului respectiv. De exemplu, daca dorim ca toate elementele de antet h1 sa fie scrise cu culoare rosie pe fond galben se foloseste sintaxa: H1{ Pentru a aplica un model de stil mai multor elemente fara a fi nevoie ca acele elemente sa fie de acelasi tip se definesc clase de stiluri aplicabile apoi unui element cu ajutorul atributului class, atribut pe care il au toate elementele care compun corpul unui document HTML. O clasa de stil poate fi aplicata obiectelor de acelasi tip sau poate fi aplicata unor obiecte de tipuri diferite, lucrul acesta depinzand de modul de definire al clasei. De exemplu, pentru a defini un stil aplicabil anumitor elemente antet H1, dar nu in mod obligatoriu tuturor elementelor H1 se foloseste formularea: H1.special{ ..... PARAGRAFUL 3

2


Astfel, elementul h1 corespunzator paragrafului 2 va avea proprietatile definite de clasa de stil "special", pe cand elementul h1 corespunzator paragrafului 3 nu va fi afectat de declaratia de stil din antet. Pentru a defini o clasa de stil aplicabila unor tipuri diferite de elemente se defineste clasa de stil fara a specifica un anume tip de element HTML: .special{ background:Yellow ;color:Red} ..... PARAGRAFUL 2 ..... Asa cum se specifica in paragraful 2 ... ..... Aceeasi clasa de stil este aplicata acum pentru a formata aspectul unui antet de tipul H1 si a unui bloc de text marcat cu elementul SPAN.

Referirea foilor de stil externe

Modalitatea care ofera creatorilor de documente HTML cea mai mare flexibilitate in crearea si apoi intretinerea unuia sau mai multor documente legate intre ele si eventual prezentate in cadrul aceluiasi "site" este definirea unor modele de stiluri in fisiere de sine statatoare asa numitele Foi de Stil Externe - si referirea lor din cadrul oricarui document care necesita acest lucru. In acest fel, pentru a modifica aspectul unui document fara a modifica continutul acestia, e suficient sa se modifice fisierul foii de stil externe, modificarea afectand automat toate documentele care fac referire la foaia de stil respectiva. Referirea unei foi de stil se face cu ajutorul elementului LINK din antetul documentului. Atributul href al elementului va reprezenta URL-ul foii de stil externe, iar atributul rel va lua valoarea "stylesheet". Optional mai pot fi prezente si atributul type pentru a desemna limbajul de stil folosit, sau title pentru a identifica foaia de stil . Exemplu: Trebuie stiut ca folosirea foilor de stil externe mareste timpul necesar incarcarii documentului in fereastra programului de navigare Web, metoda cea mai putin pretentioasa din acest punct de vedere fiind definirea stilurilor la nivelul fiecarui element.


Concurenta stilurilor in interiorul documentului

In cazul in care un element cade in incidenta mai multor modele de stil definite in interiorul sau in exteriorul documentului stilul final va fi format dintr-o suma a proprietatilor care apar in fiecare dintre modelele de stil respective. In cazul in care aceeasi proprietate ia valori diferite in modelele de stil care se aplica aceluiasi element valoarea finala va fi data dupa urmatoarele reguli: valorile din modelele de stil definite prin elementul STYLE au prioritate fata de valorile prezente in modelele de stil externe si sunt, la randul lor, inlocuite de valorile aparute in stilurile definite la nivel de element. daca aceeasi proprietate apare in doua sau mai multe modele de stil inglobate in antetul documentului atunci modelul de stil definit prin identificator are prioritate fata de clasa de stil, care, la randul ei, are prioritate fata de stilul definit pe tipuri de elemente. Exemplu: .special{ ..... PARAGRAFUL

2

In exemplul de mai sus toate cele trei modele de stil sunt aplicabile elementului H1 din document, dar valoarea finala a proprietatii "background" va fi "Blue".

Recunoasterea proprietatilor de stil

Deoarece firmele producatoare ale programelor de explorare Web si-au luat libertatea de a implementa dupa cum au crezut ele de cuviinta limbajele de modele de stil, adaugand fiecare dintre ele propriile proprietati de stil, este foarte dificil de prezentat lista tuturor proprietatilor de stil pe care le puteti folosi in documentele pe care le veti creea. Ceea ce va propun eu este un set de proprietati de stil pe care variantele 6.0 ale programelor Netscape Navigator si Internet Explorer le recunosc. Pentru o documentatie completa asupra acestui subiect vizitati site-urile oficiale ale celor doua companii producatoare.In cazul in care vreti sa va asigurati ca documentul dumneavoastra va putea fi interpretat fara erori de catre variantele mai vechi ale browserelor sau de catre browsere care nu


recunosc deloc modelele de stil, intercalati definitiile stilurilor intre marcajele de comentariu: { { color: color: type="text/css"> blue } green}

Proprietati de stil pentru fundal

Pentru a specifica unele caracteristici care privesc fundalul unor elemente se folosesc proprietatile: background-color - pentru a stabili culoarea fondului pasajului de text respectiv background-image - pentru a stabili imaginea care va fi afisata in spatele textului background-position - pentru a specifica pozitia imaginii de fundal cu ajutorul a doua valori, una specificand asezarea pe verticala, iar cea de-a doua asezarea pe orizontala background-repeat - determina modul in care imaginea din fundal va fi multiplicata in cazul in care nu acopera tot spatiul elementului. Optiunile posibile sunt: repeat no-repeat repeat-x repeat-y background-attachment - determina modul de dispunere a fundalului in momentul in care continutul elementului este derulat pe orizontala sau verticala. Optiunile posibile sunt: scroll - imaginea din fundal se deplaseaza odata cu continutul elementului fixed - imaginea din fundal ramane fixa atunci cand continutul elementului se deplaseaza

Proprietati de stil ale textelor si blocurilor de text


Pentru a specifica proprietatile legate de prezentarea textelor in cadrul atributului style se folosesc urmatoarele proprietati de stil: font-family - pentru alegerea corpului de litera. font-syze - pentru alegerea dimensiunii fontului. Valorile acestei proprietati pot fi exprimate in pixeli, procentual, sau ca ajutorul catorva valori predefinite: xx-small x-small small medium large x-large xx-large font-style pentru alegerea stilului de font cu variantele normal italic font-weightpentru specificarea grosimii fontului. Valorile atribuite pot fi: normal bold multiplii de 100, de la 100 la 900 direction pentru stabilirea directiei de scriere, avand ca valori posibile ltr pentru scrierea de la stanga la dreapta rtl pentru scrierea de la dreapta la stanga text-alignpentru alinierea pe orizontala a textului text-indent pentru indentarea textului fata de marginea stanga sau deapta (in functie de directia de scriere) a elementului "container" care contine textul text-transform pentru realizarea optiunilor litere mari-litere mici asupra textului. Valorile posibile sunt:


capitalize pentru a scrie primul caracter al fiecarui cuvant cu litera mare lowercase pentru a folosi in scriere doar litere mici uppercase pentru a folosi in scriere doar litere mari none pentru a folosi modalitatea implicita (normala) de scriere text-decoration pentru a specifica unele efecte simple aplicate textului. Astfel, puteti folosi: underline pentru a sublinia textul line-through pentru a taia textul overline pentru a trasa o linie deasupra textului ( neimplementat in varianta Netscape 4.0) none pentru anularea acestor efecte color pentru a stabili culoarea textului display pentru a alege modul de afisare a portiunii de text astfel: none daca se vrea ca textul sa nu fie afisat block pentru a oferi textul sub forma de "bloc de text". In felul acesta browser-ul va trece la linie noua inainte si dupa afisarea continutului blocului. list-item pentru a prezenta continutul sub forma de element al unei liste. inline pentru afisa textul fara a trece la linie noua, asezarea sa in interiorul elementului "container" fiind decisa doar de dimensiunea continutului sau (neimplementat in versiunea Netscape 4.7).

Proprietati de stil aplicabile listelor

In general, proprietatile de stil pentru formatarea textului raman valabile si pentru liste, cu conditia de bun simt ca elementele acestor liste sa fie de tip text. In plus exista cateva proprietati de stil specifice listelor si care se refera indeosebi la semnul de marcare al itemilor unei liste: list-style-tipe pentru a selecta tipul marcajului pentru item dintre cele prestabilite: disc circle


square decimal lower-roman upper-roman lower-alpha upper-alpha none list-style-position pentru a stabili modul de aliniere al marcajului de item in cazul in care textul cuprins in item ocupa doua sau mai multe randuri: outside pentru ca marcajul sa ramana in afara blocului de text (valoare implicita) inside pentru ca marcajul sa fie cuprins in interiorul blocului de text list-style-image pentru a stabili imaginea (iconita) aplicata marcajului de item Aceste proprietati sunt aplicabile listelor ordonate si neordonate. Daca o lista are specificate atat atributul Type cat si proprietatea de stil list-style-type, marcajul de item va fi decis de proprietatea de stil. Atributele si proprietatile de stil pot fi aplicate intregii liste sau doar unor itemi ai listei, in functie de doleantele realizatorului documentului

Proprietati de stil pentru bordurile obiectelor

Desi par numeroase, proprietatile de stil care vizeaza bordurile obiectelor se pot retine usor deoarece ele stabilesc doar trei atribute care se aplica fie tuturor bordurilor, fie uneia dintre cele 4 borduri posibile. Iata aceste proprietati: border-color - determina culoarea bordurilor obiectului. Numarul de valori si semnificatia lor sunt sunt analoage celor prezentate la atributul "margin" border-style - determina stilul liniei de bordura. Acelasi stil se va aplica celor 4 borduri ale obiectului. Optiunile posibile sunt: none - nu se afieaza bordura dotted - bordura se afiseaza cu linie punctata pe platforme Machintosh si cu linie continua pe platforma Windows sau Unix


dashed - bordura se afiseaza cu linie intrerupta pe Machintosh si cu linie continua pe platforma Windows sau Unix solid - bordura se afiseaza cu linie continua double bordura se afiseaza cu Pentru a oferi un aspect tridimensional bordurilor folositi valorile: groove ridge inset outset border-width stabileste grosimea liniei de bordura. Numarul si semnificatia valorilor este analoaga celor prezentate la atributul "margin". border - stabileste caracteristicile bordurii printr-un numar de 3 valori separate prin spatiu, valori specificand, in ordine, dimensiunea, stilul si culoarea bordurii. Exemplu: Aceleasi proprietati se pot specifica fiecarei borduri in parte folosindu-va de : border-top border-right border-bottom border-left lie dubla

Proprietati de stil pentru pozitionare

Pozitionarea elementelor in cadrul documentului este una dintre sarcinile cele mai delicate ale unui creator de pagini Web care doreste sa ofere un aspect atragator documentului creat. Proprietatile de stil permit multa flexibilitate in aceasta privinta. Iata Cateva dintre acestea: position - determina modul de pozitionare al elementului. Optiunile posibile sunt: absolute - elementul este pozitionat relativ la obiectul container care il contine relative - elementul este pozitionat relativ la pozitia pe care ar trebui in mod normal sa o ocupe in document


top - determina pozitia elementului in functie de marginea de sus a elementului relativ la care se face pozitionarea bottom - determina pozitia elementului in functie de marginea de jos a elementului relativ la care se face pozitionarea left - determina pozitia elementului in functie de marginea din stanga a elementului relativ la care se face pozitionarea right - determina pozitia elementului in functie de marginea din dreapta a elementului relativ la care se face pozitionarea height - determina dimensiunea pe verticala a obiectului width - determina dimensiunea pe orizontala a obiectului clip - determina afisarea doar a unei portiuni "decupata" din elementul respectiv. Dreptunghiul decupat se exprima sub forma rect(sus,dreapta,jos,stanga), unde fiecare dintre cele 4 valori poate fi inlocuita cu valoarea auto, care lasa marginea respectiva nedecupata. Formularea clip:auto afisaza obiectul nedecupat. Aceasta proprietate este aplicabila doar obiectelor care au atributul position:absolute. visibility - determina afisarea sau neafisarea elementului in document. Valorile posibile sunt: inherit - obiectul isi mosteneste proprietatea de la elementul "parinte" visible - obiectul este vizibil hidden - obiectul nu este vizibil z-index - determina modul de suprapunere a obiectelor care au atributul position:absolute si care impart o aceeasi suprafata din document. Obiectele avand valoarea z-index mai mare vor fi asezate "deasupra" obiectelor cu z-index mai mic. Doua obiecte care se suprapun si au aceeasi valoarea pentru z-index vor fi asezate in ordinea in care apar in document. clear - stabileste daca un bloc de text admite sau nu obiecte in stanga sau in dreapta sa. Optiunile posibile sunt: none - sunt permise obiecte in stanga si in dreapta left - textul se deplaseaza in jos pozitionandu-se sub un eventaual obiect situat in stanga sa right - textul se deplaseaza in jos pozitionandu-se sub un eventual obiect situat in dreapta sa


both - textul se deplaseaza in jos pozitionandu-se astfel incat sa nu existe obiecte nici in stanga si nici in dreapta sa margin - determina dimensiunile pe care le va avea marginile unui obiect. Pot fi specificate: o singura valoare care va fi aplicata tuturor celor 4 margini doua valori - prima pentru marginile de sus si de jos, iar a doua pentru marginile din stanga si dreapta trei valori - prima pentru marginea de sus, a doua pentru marginile din stanga si dreapta si a treia pentru marginea de jos patru valori - in ordine pentru marginile de sus, dreapta, jos, stanga margin-top margin-right margin-bottom margin-right padding - determina spatiul lasat intre marginile (eventual bordura) unui obiect si continutul sau. Numarul si semnificatia valorilor specificate sunt identice cu cele prezentate la proprietatea "margin" padding-top padding-right padding-bottom padding-left

14.Pagini Web dinamice cu ajutorul scripturilor

Un script este un program care poate insoti documentul HTML sau poate fi inclus in acesta si care este executat pe calculatorul utilizatorului. Programul poate fi executat atunci cand documentul este incarcat in fereastra programului de explorare Web, sau in momentul in care utilizatorul interactioneaza cu un anumit element din cadrul documentului (de exemplu apasarea unui buton). Exista mai multe limbaje pentru scripturi, insa cel mai util si mai raspandit dintre ele este JavaScript, acesta fiind implementat atat de Netscape Navigator cat si de Internet


Explorer. Cele doua programe pun la dispozitia limbajelor de script un set de obiecte impreuna cu proprietatile si metodele lor, obiecte care sunt - in general - corespondente ale elementelor HTML ale documentului. Acest set este cunoscut sub numele de Document Object Model. Din nefericire, acesta este destul de voluminos si - ceea ce e mai neplacut difera de la un program la altul. Pentru a studia documentatia referitoare la Document Object Model vizitati site-urile celor doua companii.

Script inclus in document

Pentru a include un bloc de script in cadrul documentului se folosesc marcajele si . Continutul aflat intre cele doua etichete trebuie sa contina comenzi valide, comenzi care vor fi interpretata si executate de un "interpretor". Ca o masura suplimentara de siguranta - in caz ca programul de explorare Web nu ar putea sa execute scriptul respectiv - continutul scriptului se poate incadra intre marcajele care definesc un comentariu in limbajul HTML.In acest fel, daca browserul recunoaste limbajul folosit executa comenzile, iar daca nu-l recunoaste omite pur si simplu pasajul respectiv, tratandu-l ca pe un comentariu. Exista si un element alternativ scriptului, care se marcheaza cu controalele HTML si si care va fi utilizat in cazul in care programul de explorare Web nu include suport pentru script. Proprietatile importante ale elementului SCRIPT sunt: type Specifica limbajul de script.Iata cateva valori posibile: text/javascript text/vbscript Pentru a specifica limbajul de script implicit al documentului se poate folosi urmatoarea sintaxa in antetul documentului: langauage Defineste varianta limbajului de script. Acest atribut nu mai este recomandat deoarece nu exista o standardizare a valorilor sale posibile charset Specifica setul de caractere folosit Daca blocul de comenzi script apare in corpul documentului si nu este incadrat intr-o functie sau procedura, atunci comenzile se vor executa in momentul incarcarii


documentului de catre browser. Daca blocul de comenzi este incadrat in functii sau proceduri, indiferent ca el apare in antetul sau in corpul documentului, ele vor fi executate ca urmare a apelului functiei respective. Exemplu: function ...

Fisiere externe pentru script

O modalitate foarte eleganta de gestiune a scripturilor este aceea de a creea fisiere de script. Aceste fisierea contin functii si proceduri care sa poata fi apelate din interiorul unuia sau mai multor documente cu conditia ca in antetul documentului sa fie specificata o referinta catre fiserul de script respectiv. Aceasta referinta se creaza cu ajutorul elementului SCRIPT. Proprietatea src a elementului SCRIPT, reprezinta calea spre fisierul de script care urmeaza a fi folosit in interiorul documentului, Exemplu:

Evenimente atasate elementelor HTML

Iata care sunt evenimentele care pot fi specificate ca atribute de comportament ale elementelor HTML: onload Se produce atunci cand browserul a incarcat documentul sau toate cadrele unei pagini de cadre. Acest eveniment se asociaza numai elementelor BODY si FRAMESET. onunload


Se produce atunci cand browserul scoate documentul sau toate cadrele unei pagini de cadre din fereastra sa. Acest eveniment se asociaza numai elementelor BODY si FRAMESET. onclick Se produce atunci cand se executa un "click" cu mouse-ul pe un element. In Internet Explorer aproape toate elementele uni document recunosc acest eveniment. In Netscape Navigator numai butoanele, butoanele radio, casutele de validare si ancorele sursa recunosc evenimentul. Pentru a aplica eveniemntul unui alt obiect (de exemplu o imagine) incadrati obiectul respecyiv intre etichetele de marcare ale unei ancore si atribuiti evenimentul acele ancore. Exemplu: Observati forma pe care o are valoarea atributului href. "javascript" reprezinta protocolul care determina rularea uni script ca actiune asupra obiectului ancora, iar "void(0)" reprezinta functia a carei apelare nu produce nici un efect. Ea a fost folosita deoarece actiunea dorita a fost plasata in cadrul expresiei "onclick". ondblclick Se produce atunci cand se executa un "dublu click" cu mouse-ul pe un element. Modul in care elementele documentului recunosc acest eveniment este explicat in cadrul evenimentului "onclick". onmousedown Se produce atunci cand utilizatorul apasa butonul mouse-ului. Modul in care elementele documentului recunosc acest eveniment este explicat in cadrul evenimentului "onclick" onmousup Se produce atunci cand utilizatorul ridica butonul mouse-ului. Modul in care elementele documentului recunosc acest eveniment este explicat in cadrul evenimentului "onclick" onmouseover Se produce atunci cand utilizatorul pozitioneaza cursorul deasupra unui element. Modul in care elementele documentului recunosc acest eveniment este explicat in cadrul evenimentului "onclick" onmousemove Se produce atunci cand utilizatorul deplaseaza cursorul deasupra unui element. Modul in care elementele documentului recunosc acest eveniment este explicat in cadrul evenimentului "onclick" onmouseout


Se produce atunci cand utilizatorul scoate cursorul de deasupra unui element. Modul in care elementele documentului recunosc acest eveniment este explicat in cadrul evenimentului "onclick" onfocus Se produce atunci cand un element devine elementul activat al documentului. Acest eveniment se poate asocia elementelor : A, AREA, LABEL, INPUT, ELECT, TEXTAREA, si BUTTON. onblur Se produce atunci cand un element a pierdut proprietatea de element activat al documentului. Se aplica elementelor enumerate la evenimentul onfocus onkeypress Se produce atunci cand o tasta este apasata si eliberata in timp ce elementul caruia i s-a asociat acest eveniment este elementul activat onkeydown Se produce atunci cand o tasta este apasata in timp ce elementul caruia i s-a asociat acest eveniment este elementul activat onkeyup Se produce atunci cand o tasta este eliberata in timp ce elementul respectiv este elementul activat onsubmit Se produce atunci cand este actionat butonul de tip "submit" al unui formular. Se aplica doar elementului FORM. onreset Se produce atunci cand este actionat butonul de tip "reset" al unui formular. Se aplica doar elementului FORM. onselect Se produce atunci cand utilizatorul selecteaza o portiune de text dintr-o caseta de introducere a textului. Se aplica elementelor INPUT si TEXTAREA onchange Se produce atunci cand valoarea unui control al unui formular a fost modificata si controlul nu mai este activat. Se aplica elementelor INPUT, SELECT si TEXTAREA


Trebuie stiut faptul ca implementarea limbajului JAVASCRIPT pe Internet Explorer si Netscape Navigator este diferita. Netscape Navigator in versiunile 4.x s-a indepartat de standardele propuse de W3C. Versiunea 6 a sa accepta o oarecare standardizare a DOM, insa pastreaza diferente majore fata de Internet Explorer in ceea ce priveste posibilitatea modificarii in-line a proprietatilor elementelor documentelor. In IE proprietatile unui obiect sunt disponibile ca sub-proprietati a proprietatii "style". Pentru Navigator, singura posibilitate de a modifica proprietatile unui element fara a reincarca documentul in browser este aceea de a folosi etichetele si cu ajutorul carora se creeaza straturi in document care pot fi afisate, ascunse sau suprapuse. Insa aceasta eticheta nu a fost inclusa in lmbajul HTML standard si se pare ca Netscape nu o va sustine in continuare. Pentru mai multe informatii privind modalitatea efectiva de lucru cu limbajul JAVASCRIPT pe cele doua browsere consultati documentatia de specialitate.

Date post:	22-Jul-2015
Category:	Documents
Upload:	dumitrita-jalba
View:	161 times
Download:	0 times

Ghid de Initiere in Limbajul HTML

Documents