Atestat Profesional Maria Complet

7/30/2019 Atestat Profesional Maria Complet

1/63

Colegiul National ,,Calistrat Hogas"Piatra Neamt

PROIECT PENTRU

OBTINEREA ATESTATULUI

DE COMPETENTAPROFESIONALA

IN INFORMATICA

Profesor coordonator: Candidat: Oslobanu Maria

Alina Zaharia Clasa: a XII-a

CUPRINS


2/63

Introducere Despre HTML Primii pai Fonturi Blocuri de text Imagini Legturi Liste Tabele Ferestre Formulare Stiluri Javascript Tag-uri Teste

Introducere pagina web

Paginile de Web sunt scrise ntr-un limbaj numit HTML(Hypertext Markup Language limbaj de marcare hipertext).HTML permite utilizatorilor s produc, pagini care includtexte, grafic i indicatori la alte pagini de Web. Vom ncepes studiem HTML eu aceti indicatori, pentru c ei reprezinttocmai mecanismul care ine Web-ul conectatURL- Uniform Resource Locators

O pagin de Web poate s conin referine la altepagini. S explicm cum sunt implementate aceste referine.nc de la crearea Web-ului a fost clar c pentru a avea opagin care s indice spre alt pagin este necesar unmecanism care s permit numirea i regsirea paginilor. n


3/63

particular sunt trei ntrebri la care trebuie sa se rspundnainte de a se putea afia o pagin:l. Cum se numete pagina ?2. Cum este localizat pagina ?

3. Cum se face accesul la pagin ?Dac fiecare pagin ar avea un nume unic, atunci nu arexista nici o ambiguitate n identificarea paginilor. Totui,problema nu este nc rezolvat. S considerm de exempluo paralel ntre oameni i pagini. n SUA aproape fiecarepersoan are un numr de asigurare social; care este unidentificator unic, astfel nct nu exist dou persoane cuacelai numr. Totui, cunoscnd numai numrul respectivnu exist nici o posibilitate de a gsi adresa persoaneirespective, i sigur nu se poate afla dac persoanei

respective trebuie s i se scrie n englez, spaniol sauchinez. Web-ul are practic acelai fel de probleme.

Soluia aleas identific paginile ntr-un mod carerezolv toate trei problemele n acelai timp. Fiecare paginare un URL (Uniform Resource Locater - adresa uniformpentru localizarea resurselor) care funcioneaz ca nume alpaginii general valabil. Un URL are trei componente:protocolul, numele DNS al mainii pe care este memoratfiierul i un nume local, care indic n mod unic pagina (de

obicei numele fiierului care conine pagina). De exemplu,URL-ul departamentului din care face parte autorul este:http://www.cs.vu.nl/welcome.html

Acest URL este format din trei componente: protocolul(http), numele DNS al serverului (www.cs.vu.nd) i numelefiierului (welcome.html), cu semnele de punctuaiecorespunztoare.

Se utilizeaz notaii care reprezint prescurtristandard. De. exemplu user/ poate s fie pus ncoresponden cu directorul WWW al utilizatorului user,folosind convenia c o referin la directorul respectivimplic un anumit fiier, de exemplu index.html. De exemplupagina autorului poate s fie referit ca:http://www.cs.vu.nl/~ast/

chiar dac de fapt numele fiierului este diferit. Pemulte servere un nume de fiier indic implicit pagina


4/63

organizaiei creia i aparine serverul.Acum ar trebui s fie clar cum funcioneaz hipertextul.

Pentru a face o poriune de text selectabil, cel care scriepagina trebuie s furnizeze dou elemente: textul prin care

se face selecia i URL-ul paginii care trebuie adus dactextul este selectat. Cnd se face selecia, programul denavigare caut numele serverului utiliznd DNS-ul. Pe bazaadresei IP a serverului, programul de navigare stabilete oconexiune TCP spre server. Utiliznd aceast conexiune, setransmite numele fiierului utiliznd protocolul specificat.Bingo. Acum sosete pagina.

Protocolul http este protocolul nativ pentru Web; e1este utilizat de ctre serverele de HTTP.

Protocolul ftp este utilizat pentru accesul la fiiere prinFTP (File Transfer Protocol - -protocol pentru transferul defiiere), protocolul Internet de transfer de fiiere. FTP esteutilizat de peste douzeci de ani i este foarte rspndit.Numeroase servere de FTP din toat lumea permit ca deoriunde din Internet s se fac o conectare i s se aducorice fiier plasat pe un server FTP. Web-ul nu aduceschimbri aici, face doar ca obinerea fiierelor s se facmai uor, pentru c FT'P are o interfa mai puin

prietenoas. n viitor probabil c FTP-ul va dispare, deoarecenu exist nici un avantaj pentru o organizaie s aib unserver de FTP n loc de un server de HTTP, care poate s factot ce face un server de FTP, i chiar mai mult (desigur maiexist nite argumente legate de eficien).

Este posibil s se fac acces la un fiier local ca la opagin de Web, fie utiliznd protocolul file (fiier), sau pur isimplu utiliznd numele fiierului. Aceast abordare estesimilar utilizrii protocolului FTP, dar nu implic existenaunui server. Desigur funcioneaz numai pentru fiierelocale.

{Protocolul news permite unui utilizator de Web sciteasc un articol din tiri ca i cum ar fi o pagin de Web.Aceasta nseamn de fapt c un program de navigare este nacelai timp i un cititor de tiri. De fapt multe programe denavigare au butoane sau elemente de meniu care permit


5/63

citirea tirilor USENET mai uor dect daca se utilizeazcititoare de tiri obinuite.

Protocolul news admite dou formate. Primul formatspecific un grup de tiri si poate sa fie utilizat pentru a

obine o list de articole de la un server de tiripreconfigurat. Al doilea format cere identificatorul unuiarticol, de exemplu [email protected]. Programulde navigare aduce articolul de la serverul corespunztorutiliznd protocolul NNTP.

Protocolul gopher este utilizat de sistemul Gopher, carea fost proiectat la universitatea Minnesota. Numele este celal echipei atletice a universitii, the Golden Gopher, deasemenea acest nume este utilizat n argou pentru go for;adic o comand de aducere Gopher-ul a precedat Web-ul cu

civa ani. Este o metod de regsire a informaiei, similarconceptual cu cea utilizat de Web, dar acceptnd numaitext i imagini. Cnd un utilizator se conecteaz la un serverde Gopher, va avea la dispoziie un meniu de fiiere idirectoare, fiecare intrare putnd s fie conectat la oricemeniu de Gopher oriunde n lume.

Marele avantaj al Gopher-ului n raport cu Web-ul estec funcioneaz foarte bine cu terminale ASCII care afieaz25 x 80 caractere si din care exist nc foarte multe n

lume. Pentru c este bazat pe text, Gopher este foarte rapid.De aceea n lume exist multe servere de Gopher. Utilizatoriide Web pot s acceseze un server de Gopher i s vadfiecare meniu Gopher ca o pagin Web cu intrri selectabile.Dac nu ai lucrat cu Gopher-ul utilizai maina favorit decutare n Web pentru a cuta cuvntul gopher.

Este posibil s se trimit cerere de cutare completunui server de Gopher utiliznd un protocol gopher+. Ce seva afia este rezultatul cererii transmise serverului deGopher.

Ultimele dou protocoale nu unt de fapt protocoalepentru aducerea unor pagini de Web i nu sunt suportate deorice program de navigare, dar sunt utile. Protocolul mailtopermite transmiterea de pot dintr-un program de navigare.Pentru a face aceast operaie se selecteaz butonul OPEN ise specific un URL constnd din mailto: urmat de adresa


6/63

destinatarului. Majoritatea programelor de navigare vorrspunde cu un formular care are intrri corespunztoaresubiectului i altor informaii din antet i spaiu pentrumesaj.

Protocolul telnet este utilizat pentru stabilirea uneiconexiuni pe o main aflat la distan. Se utilizeaz nacelai fel ca i programul Telnet, ceea ce nu constituie osurpriz, deoarece majoritatea programelor de navigareutilizeaz programul Telnet.}

Pe scurt URL-urile au fost proiectate nu numai pentru apermite utilizatorilor s navigheze prin Web, dar i pentru autiliza FTP, news, Gopher, email i telnet, ceea ce face inutileinterfeele specializate pentru aceste protocoale integrnd

astfel ntr-un singur program, navigatorul n Web, aproapetoate tipurile de acces n Internet. Dac metoda nu ar fi fostproiectat de un fizician ar fi putut s par produsuldepartamentului de publicitate al unei companii de software.

n ciuda tuturor acestor proprieti, creterea Web-uluiscoate n eviden i o slbiciune a metodei utilizrii URL-urilor. Pentru o pagin care este foarte des referit, ar fi depreferat s existe mai multe copii pe servere diferite, pentrua reduce traficul n reea. Problema este c URL-urile nu

ofer nici o posibilitate de indicare a unei pagini fr s sespecifice unde este localizat pagina respectiv. Nu existnici o metod pentru a spune ceva de genul: Vreau paginaxyz, dar nu m intereseaz de unde o aduci. Pentru arezolva aceast problem i a permite multiplicarea paginilorIETF lucreaz la un sistem de URL (Universal ResourceIdentifiers - identificatori universali de resurse). Un URLpoate s fie privit ca un URL generalizat. Acest subiect este

n curs de cercetare.

01. Despre HTML. ?

Unul din primele elemente fundamentale ale WWW (World WideWeb) este HTML ( Hypertext Markup Language ), care descrie formatul


7/63

primar n care documentele sunt distribuite i vzute pe Web. Multedin trsturile lui, cum ar fi independena fa de platform,structurarea formatrii i legturile hipertext, fac din el unfoarte bun format pentru documentele Internet i Web.

Primele specificaii de baz ale Web-ului au fost HTML, HTTPi URL. HTML a fost dezvoltat iniial de Tim Berners-Lee laCERN n 1989. HTML a fost vzut c o posibilitate pentrufizicienii care utilizeaz computere diferite i schimb ntre eiinformaie utiliznd Internetul. Erau prin urmare necesarecteva trsturi : independena de platform, posibilitihypertext i structurarea documentelor. Independena deplatform nseamn c un document poate fi afiat n modasemntor de computere diferite ( deci cu fonte, grafica iculori diferite ), lucru vital pentru o audienta att de variata.

Hipertext nseamn c orice cuvnt, fraz, imagine sau altelement al documentului vzut de un utilizator (client) poateface referin la un alt document, ceea ce uureaz multnavigarea ntre multiple documente sau chiar n interiorulunui aceluiai document. Structurarea riguroas adocumentelor permite convertirea acestora dintr-un format

n altul precum i interogarea unor baze de date formate dinaceste documente.

SGML i HTMLTim Berners-Lee a utilizat c model SGML ( Standard GeneralizedMarkup Language ), un standard internaional n plindezvoltare. SGML avea avantajul unei structurri avansate ial independenei de platform dar proiectarea lui a avut nvedere mai mult structura semantic a documentului dectmodul de formatare. Flexibil, SGML putea fi descris c ospecificare pentru descrierea altor formate. Utilizatoriiputeau crea noi formate (DTD, Document Type Definitions)care puteau fi nelese de orice produs soft SGML pur isimplu prin citirea mai nti a definiiilor noilor formate.

HTML este puri simplu un DTD, deci o aplicaie a SGML.n primii ani de evoluie HTML a crescut lent, n principalpentru c i lipseau posibilitile de a descrie publicaiielectronice profesionale; limbajul permitea oarece controlasupra fontelor dar nu permitea nserarea graficii. n 1933,


8/63

NCSA a mbogit limbajul pentru a permite inserarea graficiii au construit primul navigator grafic, Mosaic. Au urmat apoicontribuii ad hoc ale diverselor firme care au adus adugirilimbajului HTML (adugiri i nu mbogiri pentru c unele

taguri nu erau n conformitate cu principiile generale aleSGML) astfel nct, prin 1994 limbajul prea scpat de subcontrol. Urmarea a fost c la prima conferin WWW dinGeneva ( Elveia ) s-a constituit un grup ( HTML WorkingGroup ) a crui prima misiune a fost formalizarea HTML ntr-un DTD al SGML, lucru care s-a concretizat n HTML Level 2( sau HTML 2.0; Nivelul 1, deci HTML 1.0, a fost proiectat de

Tim Berners-Lee ). Importana aciunii acestui grup const nfaptul c, odat standardizat, limbajul poate fi apoi extins

ntr-un mod mai controlat la alte nivele.

Standardul oficial HTML este World Wide Web Consoriu (W3C),care este afiliat la Internet Engineering Task Force (IETF).W3C a enunat cteva versiuni ale specificaiei HTML, printrecare i HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 i, cel mairecent, HTML 4.01. n acelai timp, autorii de browsere, cumar fi Netscape i Microsoft, au dezvoltat adesea propriile"extensii" HTML n afara procesului standard i le-au

ncorporat n browserele lor. n unele cazuri, cum ar fi tagulNetscape, aceste extensii au devenit standarde de facto

adoptate de autorii de browsere.HTML 2.0, elaborat n Iunie 1994, este standardul pe care ar trebuis-l suporte toate browserele curente -- inclusiv cele modtext. HTML 2.0 reflect concepia original a HTML c unlimbaj de marcare independent de obiectele existente pentruaezarea lor n pagin, n loc de a specifica exact cum artrebui s arate acestea. Dac dorii s fii siguri c toivizitatorii vor vedea paginile aa cum trebuie, folosii tagurileHTML 2.0.

Specificaia HTML 3.0, enunat n 1995, a ncercat sdezvolte HTML 2.0 prin adugarea unor faciliti precumtabelele i un mai mare control asupra textului din jurulimaginilor. Dei unele din noutile HTML 3.0 erau dejafolosite de autorii de browsere, multe nu erau nc. n unelecazuri, taguri asemntoare implementate de autorii debrowsere au devenit mai rspndite dect tagurile "oficiale".


9/63

Specificaia HTML 3.0 acum a expirat, deci nu mai este unstandard oficial.

n Mai 1996, W3C a scos pe piaa specificaia HTML 3.2 , careera proiectat s reflecte i s standardizeze practicile

acceptate la scar larg. Deci, HTML 3.2 include tagurileHTML 3.0 ce erau adoptate de autorii de browsere cNetscape i Microsoft plus extensii HTML rspndite. nBilanul asupra HTML, W3C recomand c providerii deinformaii s utilizeze specificaia HTML 3.2. Versiunilecurente ale majoritii browserelor ar trebui s suporte toate,sau aproape toate aceste taguri.

De asemenea exist extensii Netscape i Microsoft care nufac parte din specificaia HTML 3.2, ori pentru c sunt maipuin utilizate, ori au fost omologate dup apariia HTML 3.2.

Pentru c navigatorul Netscape a fost printre primelebrowsere care suporta anumite taguri HTML 3.0, iarNetscape deine n jur de 70% din piaa de browsere, muliau crezut eronat c toate extensiile Netscape (incluzndtaguri ca i faciliti ca ferestrele) fac parte din HTML 3.0 sauHTML 3.2.

La momentul apariiei acestui tutorial, HTML 4.0 este largutilizat i au fost deja publicate specificaiile HTML 4.01.

Documentele HTML sunt documente n format ASCII i prin

urmare pot fi create cu orice editor de texte. Au fost nsdezvoltate editoare specializate care permit editarea ntr-unfel de WYSIWYG dei nu se poate vorbi de WYSIWYG attavreme ct navigatoarele afieaz acelai document oarecumdiferit, n funcie de platforma pe care ruleaz. Au fost deasemenea dezvoltate convertoare care permit formatareaHTML a documentelor generate ( i formatate ) cu alteeditoare. Evident conversiile nu pot pstra dect parialformatrile anterioare deoarece limbajul HTML este ncincomplet

02. Primii pai

TAGURI DE BAZA

Orice document HTML ncepe cu notaia i se termin


10/63

cu notaia . Aceste "chestii" se numesc n literaturade specialitate "TAG-uri". Prin convenie, toate informaiileHTML ncep cu o parantez unghiular deschis " < " i setermin cu o parantez unghiular nchis " > ".

Tag-urile ntre aceste paranteze transmit comenzi ctre browserpentru a afia pagina ntr-un anumit mod. Unele blocuriprezint delimitator de sfrit de bloc, n timp ce pentru alteblocuri acest delimitator este opional sau chiar interzis.ntre cele dou marcaje i vom introduce douseciuni:- seciunea de antet ... i - corpuldocumentului .... Blocul ...cuprinde coninutul propriu-zis al paginii HTML, adic ceea ceva fi afiat n fereastra browser-ului.

O etichet poate fi scris att cu litere mici, ct i culitere mari.Adic = = . Caracterele "spaiu" i"CR/LF" ce apar ntre etichete sunt ignorate de ctrebrowser. Deci un prim document HTML ar fi ceva de genulasta:

n primul rnd, titlul unei pagini se obine insernd n seciunea... a urmtoarei linii:

Aceasta este prima mea pagin de Web

n plus, n seciunea ... putem scrie textect dorim. Dac nu ntlnim nici un marcaj < sau > atunciinterpretorul HTML le va lua c texte simple i le va afia pe

ecran. S vedem o nou versiune a paginii noastre:

Aceasta este prima mea pagin deWeb


11/63

Bine ai venit n pagina mea de Web!

TITLUL PAGINII

Coninutul blocului ... va aprea n barade titlu a ferestrei browser-ului. Dac acest bloc lipsete ntr-o pagin HTML, atunci n bara de titlu a ferstrei browser-uluiva aprea numele fiierului.

Dac introducem mai multe linii ntr-o pagin browser-ulva afia ntr-un singur rnd, ntruct caracterele " CR/LF "sunt ignorate de browser. Trecerea pe o linie nou se face lao comand explicit, care trebuie s apar n pagina html.

INTRERUPERE DE LINIEAceast comand este marcajul
( de la " line break

" - ntrerupere de linie ).Folosind aceleai operaii c mai sus, vizualizai noua pagin!Vei vedea textul ce apare n fereastra navigatorului. n plus,pagina dvs. va avea un titlu nou, cel introdus de dvs.

titlul paginii

Bine ai venit n
pagina mea de Web!

BLOCURI PREFORMATATE

Pentru c browser-ul s interpreteze corect caracterele "spaiu ", " tab " i " CR/LF " ce apar n cadrul unui text, acesttext trebuie inclus ntr-un bloc ....

bloc preformatat

Prima linie


12/63

A doua linieA treia linie

CULOARE DE FOND

O culoare poate fi precizat n doua moduri: Printr-un nume de culoare. Sunt disponibile cel puin 16 nume de

culori: aqua, black, fuchsia, gray, green lime, maroon,navy, olive, purple, red, silver, teal, white i yellow.

Prin construcia " #rrggbb " unde r (red), g (green), sau b(blue) sunt cifre hexazecimale i pot lua valorile: 0, 1, 2,3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se potdefini astfel 65536 de culori.

Culoarea unei pagini se precizeaz prin intermediul unui atribut aletichetei . Culoarea fondului paginii Web sestabilete cu atributul bgcolor al etichetei , de exemplu:.Urmtorul exemplu realizeaz o pagin cu fondul de culoaregri.

culoare de fond

O pagin Web cu fondul GRI!

CULOAREA TEXTULUI

Acest lucru se face prin intermediul atributului text al etichetei dup sintaxa . n urmtorul exemplu

textul are culoarea roie.

culoare textului


13/63

Un text de culoare roie.

ETICHETA

O etichet poate avea mai multe atribute. De exemplu, oetichet cu trei atribute arat astfel: .Urmtorul exemplu prezint o pagin cu fondul de culoarealbastr i textul de culoare galben.

atribute multiple

Fond de culoare albastr i text de culoare galben.

Textul afiat este caracterizat de urmtoarele atribute: Mrime( size), Culoare (color) Font (style).

Acestea sunt atribute ale etichetei . Este o etichetsingular (fr delimitator de sfrit de bloc).

unde: numr- poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic i

7 pentru fontul cel mai mare); culoare - este o culoare precizat prin nume sau printr-o

construcie RGB; font- poate fi un font generic c " serif ", " san serif ", "

cursive ", " monospace ", "fantasy " sau un font specific

instalat pe calculatorului clientului, c " Times NewRoman ", " Helvetica " sau " Arial ".Se accept cvaloare i o lista de fonturi separate prin virgul, deexemplu:" Times New Roman, serif, monospace ".

Domeniul de valabilitate al caracteristicelor precizate de aceastetichet se ntinde de la locul n care apare eticheta pn la


14/63

sfritul paginii sau pn la urmtoarea etichet.

Dac acest atribut lipsete atunci textul din pagina Webare atribute prestabilite sau atribute precizate de browserul

utilizat.Atributele prestabilite sunt: size = 3, color = black, i style = " TimesNew Roman " .Poziionarea coninutului paginii Web fa de marginileferestrei browserului se poate face cu ajutorul a douatribute ale etichetei :

leftmargin ( stabilete distana dintre marginea stnga ferestrei browserului i marginea stng aconinutului paginii );

topmargin ( stabilete distana dintre marginea de sus aferestrei browserului i marginea de sus a coninutuluipaginii );

Configurarea textului i stabilirea marginii

Textul are atribute implicite.
Textul este scris cu fontul "Arial", culoare albastru imarime 6.

STILURILE PENTRU BLOCURILE DE TEXT

Pentru c un bloc de text s apar n pagin evideniat(cu caractere aldine), trebuie inclus ntre delimitatorii... ( b vine de la "bold" = indraznet ).

Pentru c un text s fie scris cu carcatere mai mari cu ounitate dect cele curente acesta trebuie inclus ntr-un bloc delimitatde etichetele ....

Pentru c un text s fie scris cu carcatere mai mici cu ounitate dect cele curente acesta trebuie inclus ntr-un blocdelimitat de etichetele ....Pentru c un text s fie scris cu carcatere cursive acesta


15/63

trebuie inclus ntr-un bloc delimitat de etichetele ... (i vine de la " italic ").Pentru a insera secvente de text aliniate c indice (sub-script) sau cexponent (super-script), aceste fragmente trebuie delimitate de

etichetele ..., respectiv .... Pentru a insera un blocde caractere subliniate se utilizeaza etichetele ... (u vine de la "underline ").

Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele... sau ....

STILURI FIZICEI LOGICE

Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text,numite i stiluri fizice ntruct nu s-a acordat nici o ateniesemnificaiei informaiei coninute de aceste blocuri. n

continuare sunt prezentate stilurile utilizate la formatarea unuibloc.Aceste stiluri tin cont de semnificatia pe care o are blocul n cadrul paginiiWeb.Pentru a pune n evidenta ( prin silul cursiv ) fragmente de text se utilizeazaetichetele:

... ( " cite " inseamna citat); ... (em vine de la " emphasize " = a evidentia).n locul lor se poate utiliza eticheta echivalenta ....

Urmatoarele etichete au efecte similare.Ele permit scrierea fragmentului detext cu caractere monospatiate ( de tipul celor folosite de o masina de scris ): ... ( " code " inseamna cod sau sursa); ... ( kbd vine de la " keyboard " = tastatura); ... ( tt vine de la " teletype " = teleprinter).Eticheta de tip bloc ... delimiteaz fragmenete de text

clipitoare. Aceasta eticheta functioneaza numai n browserul NetscapeCommunicator.

Exemplul urmtor ilustreaz c etichetele pot fi imbricate. un fragment de text poate fi scris cu aldine i cursive n aceli

timp; pentru un fragment de text se pot folosi simultan stilurile subliniat,

exponent, mrit i cursiv.Blocul ... permite inserarea n-line a citatelor.Aceste citate suntafisate de ctre browser cu caractere cursive." q " vine de la " n-line quotation " (citate inserate n-line);


16/63

i blocurile " q " pot fi imbricate.

03. Fonturi

Un font este caracterizat de urmtoarele atribute: culoare (stabilit prin atributul color); tipul sau stilul (stabilit prin atributul face); mrimea (definit prin atributul size); mrimea n puncte tipografice (stabilit prin atributul

point-size); grosime (definit prin atributul weight).

Toate aceste atribute aprin etichetei, care permite inserarea deblocuri de texte personalizate.

Culori

O culoare poate fi precizata n doua moduri:1. printr-un nume de culoare.2. printr-o constant conform standardului de culoare RGB

(Red, Green,Blue). O astfel de constant se formeazastfel: #rrggbb, unde r, g i b sunt cifre hexazecimale

Culorea fontului

Pentru a scrie un fragment de text cu caractere de o anumit culoarese ncadreaz acest fragment ntre delimitatorii ... avndstabilit atributul color la valoarea necesar. De exemplu:fragment de text de culoare rosie

Familia de fonturi

Pentru a scrie un text ntr-o pagin pot fi folosite mai multefonturi (stiluri de caractere). Exist cinci familii generice defonturi care sunt de regul disponibile pe toatecalculatoarele utilizatorilor: serif, sans serif, cursive,monospace i fantasy. Tipul de font necesar poate fi stabilitprin atributul face al etichetei. Pot fi introduse mai multe fonturiseparate prin virgul.n acest caz browserul va utiliza primul font pe care l cunoate.


17/63

Marimea fontului

Pentru a stabili mrimea unui font se utilizeaz atributul sizeal etichetei. Valorile acestui atribut pot fi:

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font i 7 pentru cel mai

mare); +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fa de

valoarea curent; -1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de

valoarea curenta.Mrimea unui font poate fi stabilit exact cu ajutorulatributului point-size. Valorile acceptate de acest atribut pot fi oricenumere naturale pozitive.Numrul astfel precizat reprezintmrimea fontului n puncte tipografice.

Acest atribut functioneaz numai cu Netscape Communicator.Grosimea fontului

Grosimea unui caracter poate fi definit cu ajutorul atributuluiweight al etichetei.

Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600,700, 800 i 900 (100 pentru fontul cel mai subire i 900pentru cel mai gros).

04. Blocuri de text

Aceste etichete nu se refer la particularitiile caracterelorce compun textul, ci la funciile pe care le poate avea unbloc de text n cadrul paginii Web.Toate aceste etichete produc automat trecerea la un rnd nou iadaugarea unui spaiu suplimentar.

Inserarea unei adreseDac ntr-o pagina web trebuie inclus o adresa, atunciputem utiliza facilitile oferite de o eticheta dedicat:

....


18/63

Adresa

Adresa institutiei noastre este : Colegiul

Universitar
Str: Victor Babes , Nr:62/A
Baia Mare Romania

Indentarea unui bloc

Pentru c un bloc de text s fie indentat ( marginea dinstnga a textului s fie deplasat la dreapta la o anumitdistan fa de marginea paginii ), acesta trebuie inclus

ntre etichetele ....Textul ce urmeaz este indentat:Aceste

etichete nu se refer la particularitiile caracterelor cecompun textul, ci la funciile pe care le poate avea un blocde text n cadrul paginii Web. Toate aceste etichete producautomat trecerea la un rnd nou i adaugarea unui spaiusuplimentar.

Blocul preformatat

ntr-un bloc ..., semnificaia marcajelor HTML sepstreaz.Blocul ... este indicat pentru a insera rndurivide ( spaiu ntre rndurile succesive ). Caracterul " spaiu "poate fi luat n considerare de browser dac este inseratexplicit prin .ntr-un fiier HTML, caracterele "" au o semnificaiespecial pentru browser. Ele ncadreaz comenzile iatributele de afiare a elementelor ntr-o pagin. Dac dorimca un fragment de text s conin astfel de caractere, acestfragment trebuie ncadrat de una dintre perechile de etichete:

... ( 80 de caractere pe rnd ); ... ( 120 de caractere pe rnd ).

Aceste marcaje interpreteaz corect caracterele " spaiu ", "eticheta " i "CR/LF ". Textul afiat n pagin estemonospaiat.


19/63

Blocuri paragraf

Cu ajutorul etichetei paragraf

este posibil trecerea la o linie nou ipermite:

inserarea unui spaiu suplimentar nainte de blocul

paragraf; inserarea unui spaiu suplimentar dup blocul paragraf,

dac se folosete delimitatorul
(acesta fiindopional);
alinierea textului cu ajutorul atributului align, avnd valorileposibile " left ", " center " sau " right ".

Paragraf aliniat n centru.

Blocuri de titlu

ntr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutoruletichetelor . , , , , .Toate aceste etichete se refer la un bloc de text i trebuie nsoitede o etichet de ncheiere similar. Aceste etichete acceptatributul align pentru alinierea titlului blocului de text la stnga (n mod

prestabilit ) , n centru i la dreapta. Tag-ul permite scriereaunui titlu cu caractere mai mari i aldine, pe cnd folosete caracterele cele mai mici.

Linii orizontale

ntr-o pagin Web pot fi inserate linii orizontale.acest lucru seface cu ajutorul etichetei . Pentru a configura o linieorizontal se utilizeaz urmtorele atribute ale etichetei:

align permite alinierea liniei orizontal. Valorile posibile sunt" left " ," center " i " right ";

width permite alegerea lungimii liniei; size permite alegerea grosimii liniei; noshade cnd este prezent definete o linie fr umbr;

color permite definirea culorii liniei.Blocuri

Blocul introdus de etichetele ... aliniaz centrat toateelementele pe care le conine.


20/63

Linii orizontale

Blocuri

Blocul de text cuprins ntre etichetele ... va fi afiat pe osingur linie.

Blocul

O singur linie.

Blocuri

Modalitatea cea mai eficient de delimitare i de formatare aunui bloc de text este folosirea delimitatorilor.... Un parametru foarte foarte util pentrustabilirea caracteristicilor unui bloc ( diviziune ) estealign ( aliniere ).Valorile posibile ale acestui parametru sunt:

" left " ( aliniere la stnga ); " center " ( aliniere central ); " right " ( aliniere la dreapta ).Un bloc ... poate include alte subblocuri. n acest caz ,

alinierea precizat de atributul align al blocului are efect asupra

tuturor subblocurilor incluse n blocul ;Un bloc ... admite atributul " nowrap " care interzicentreruperea rndurilor de ctre browser.

Blocul


21/63

Aceast linie este o linie normal.Urmtorul bloceste aliniat la dreapta.

O singura linie.

Bloc aliniat pe centru.

05. Imagini

Imaginile sunt stocate n fiiere cu diverse formate. Formateleacceptat de browsere pentru fiierele imagine sunt:

GIF (Graphics Interchange Format) cu extensia .gif; JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; XPM (X PixMap) cu extensia .xmp; XBM (X BitMap) cu extensia .xbm; BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

Cele mai rspndite formate sunt GIF(8biti pentru o culoare,

256 culori posibile) i JPEG (24bii pentru o culoare,16777216 de culori posibile).

Adresa URL a unei imagini

URL ( "Uniform Resourse Locator" = identificator unic al resursei ) este unstandard folosit n identificarea unic a unei resurse n Internet.

Toate imaginile cu care vom lucra vor avea adresa URLexprimat n funcie de directorul ce conine documentulHTML care face referire la imagine.

Pentru a insera o imagine ntr-o pagin, se utilizeaz eticheta(de la "image"=imagine).Pentru a putea fi identificat imaginea care va fi inserat, seutilizeaz un atribut al etichetei i anume src (de la"source"=sursa).

Dac imaginea se afl n acelai director cu fiierulHTML care face referire la imagine, atunci adresa URL a


22/63

imaginii este format numai din numele imaginii, inclusivextensia.

Chenarul i dimensionarea unei imagini

Dac dorii s adaugai un chenar n jurul imaginii,

folosii atributul border al etichetei .Valorile acestor atribute sunt numere ntregi pozitive.

O imagine are anumite dimensiuni pe orizontal i vertical,stabilite n momentul crerii ei.Dac nu se cere altfel , aceste dimensiuni sunt respectate nmomentul afirii ei n pagina Web.Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediulatributelorwidthi height.

Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului align carepoate lua urmtorele valori:

" left " - aliniere la stnga; celelalte componente sunt dispuse npartea dreapt;

" right " - aliniere la dreapta; celelalte componente sunt dispuse npartea stnga;

" top " - aliniere deasupra; partea de sus a imaginii se aliniaz cupartea de sus a textului ce precede imaginea;

" middle " - aliniere la mijloc; mijlocul imaginii se aliniaz cu liniade baz a textului ce precede imaginea.

" bottom " - aliniere la baz; partea de jos a imaginii sealiniaz cu linia de baz a textului.

Atributele hspacei vspace precizeaz distana n pixeli peorizontal , respectiv pe vertical, dintre imagine i restulelementelor din pagin.

Atributul alt admite c valoare un text care va fi afiat nlocul imaginii.

Imagini pentru fondul unei pagini

O imagine poate fi utilizat pentru a stabili fondul uneipagini Web. n acest scop se folosete atributul backgroundal etichetei, avnd c valoare adresa URL a imaginii.Imaginea se multiplic pe orizontal i pe vertical pnumple ntregul ecran


23/63

Imagini folosite ca legturi

O legtura (link) introduce n pagina Web o zon activ.Efectund click cu butonul mouse-ului pe aceast zon nbrowser se va ncrca o alt pagin. n mod prestabilit

imaginea utilizat pe post de zona activ este nconjurat deun chenar avnd culoarea unei legturi. Dac stabilim pentruatributul border al etichetei 0 acest chenar dispare.

Utilizri speciale ale imaginilor

Imaginile pot fi utilizate pentru a obine efecte deosebite ntr-opagin web.Printre aceste utilizri speciale putem enumera:

- Linii orizontale formate cu ajutorul imaginilor .- Simboluri speciale pentru elementele unei liste neordonate

06. Legturi

Legturile (link-urile) reprezint partea cea maiimportant a unei pagini Web. Ele transform un textobinuit n hipertext sau hiperlegtur, care permite trecerearapid de la o informaie aflat pe un anumit server la altinformaie memorat pe un alt server aflat oriunde n lume.Legturile sunt zone active ntr-o pagin Web, adic zone depe ecran sensibile la apsarea butonului stng al mouse-ului.O legtura ctre o pagin aflat n acelai director. Olegtur ctre o pagin aflat n acelai director se formeazcu ajutorul etichetei (de la "anchor"=ancora). Pentru apreciza pagina indicat de legtur se utilizeaz un atribut aletichetei numit href, care ia valoarea numele fiierului HTMLaflat n acelai director. Zona activ care devine sensibil laapsarea butonului stng al mouse-ului este format dintextul cuprins ntre etichetele .... Prezena

etichtetei de sfrit este obligatorie.Dac pagina referit se afl pe acelai disc local, dar

ntr-un alt director atunci pentru a preciza poziia ei nstructura de directoare se poate folosi adresarea relativ.


24/63

O legtur ctre un site particular

n exemplul urmtor se utilizeaz adresa URLwww.eddy.cugir.ro care ncarc pagina de start din site-ul deresurse umane.

Link ctre site-ul de resurse umaneLink ctre site-ul de resurse umane Centrul Pentru Informarea Resurselor Umane

Ancore

Intr-o pagin foarte lung pot exista puncte de reper ctrecare se definesc legturi. O ancor se definete deasemenea prin eticheta . Pentru a defini ancora seutilizeaz atributul name care primete ca valoare un numeatribuit ancorei (de exemplu "leg1"). Pentru a insera olegtur ctre "leg1" definit n aceeai pagin se utilizeaz

eticheta avnd atributul href de valoare "#leg1". Pentru aintroduce o legtur ctre o ancor definit n alt document(alt pagin) aflat n acelai director, atributul hrefprimete ovaloare de forma "nume_fiier.html#nume_ancora".

Ancore definite prin atributul id. Atributul id este un atribut universal,adic poate fi ataat oricrui element al unei pagini Web.Acest atribut va nlocui complet atributul name, care putea fiataat numai anumitor elemente. Atributul id primete cavaloare un nume (de exemplu "id1") care identific n mod

unic un element. Atributul id poate fi utilizat pe post deancor ntr-o pagin Web conform sintaxei: ... Link ctre elementul "id1" unde "eticheta" poate fi orice element .


25/63

Alegerea culorilor pentru legturi

n mod prestabilit se utilizeaz trei culori pentru legturi: oculoare pentru legturile nevizitate (nu s-a efectuat nici unclic pe ele), o culoare pentru legturile vizitate (s-a efectuat

cel puin un clic pe ele), o culoare pentru legturile active(deasupra crora se afl mouse-ul la un moment dat). Acesteatribute pot fi stabilite cu ajutorul a trei atribute ale etichetei:linkpentru legturile nevizitate; vlinkpentru legturile vizitate;alinkpentru legturile active.Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sauconform standardului RGB.

Utilizarea potei electronice

ntr-o pagin Web se poate afla legturi care permitlansarea n execuie a aplicaiei de expediere a mesajelorelectronice. Pentru aceasta se utilizeaz n construciaadresei URL serviciul Internet mailto: urmat de o adresa e-mail valid.

Legturi ctre fiiere oarecare

O pagin Web poate conine legturi ctre orice tip defiiere aflate pe orice servere din Internet. Pentru aceasta seutilizeaz eticheta avnd valoarea atributului hrefegalcu adresa URL a fiierului destinaie. Atunci cnd seefectueaz clic pe legtura din exemplul urmtor browserulva deschide o caseta de dialog - File download - care vapermite: s salvai pe discul local fiierul, s lansai nexecuie aplicaia capabil s interpreteze corect fiierele detipul respectiv

Legaturi ctre fiiere oarecareLegaturi ctre fiiere oarecare
Link ctre fiierul fiier.zip


26/63

Atributul title

Atributul title aparine etichetei i comand apariia

unei mici ferestre n pagin Web cnd mouse-ul se afl pe olegatur, fereastr n care este afiat valoarea dat acestuiatribut.Acest atribut are astfel menirea de a furniza informaii suplimentaredespre semnificaia unei legturi.

Legturi ctre fiiere de sunet

Sunetele pot fi stocate n fiiere n diverse formate:AU/m-law cu extensia .au;AIFF/AIFC cu extensiile .aiff, .aif;WAVE/WAV cu extensia .wav;MPEG Audio cu extensia .mpeg2, sau .mp2;MIDI cu extensia .mid sau .midi;

O legtur ctre un fiier de sunet se realizeaz folosindeticheta destinat legturilor ctre orice tip de fiiere,unde atributul hrefva avea valoarea egal cu adresa URL afiierului de sunet.De exemplu: Link ctre fiierul desunet

Legturi ctre fiiere videoclipuri

Videoclipurile sunt stocate n fiiere diverseformate.Formatele i extensiile corespunazatoare pentrufiierele utilizabile n paginile Web sunt urmatoarele: MPEGcu extensia .mpeg sau mpg; QuickTime cu extensia .mov;AVI cu extensia .avi.

O legtur ctre un fiier de sunet se realizeaza folosindeticheta destinata legturilor ctre orice tip de fiiere,

unde atributul href va avea valoarea egala cu adresa URL afiierului videoclip.De exemplu: Link ctre fiierulvideoclip

07. Liste


27/63

Unul din cele mai obinuite elemente din documentele cumai multe pagini este un set de definiii, referine sauindexuri. Glosarele sunt exemple clasice n acest sens;cuvintele sunt listate n ordine alfabetic, urmate de definiii

ale termenilor respectivi. n HTML, ntreaga seciune a unuiglosar va fi gestionat printr-o list de definiii, care esteinclus ntr-o pereche de marcaje de lista de definiii:... (de la "definition list" = lista de definiii).

Liste neordonate

O list neordonat este un bloc de text delimitat de etichetelecorespondente ... (" ul " vine de la " unordered list" = lista neordonat). Fiecare element al listei este iniiat deetichet (list item). Lista va fi indentat fa de restulpaginii Web i fiecare element al listei ncepe pe un rnd nou.

listex_2O lista neordonataGlosar de termeni de World Wide WebCulori uzuale disponibile prin numeBlack White Red Green Blue YellowPurple Aqua

Tag-urile i pot avea un atribut type care stabiletecaracterul afiat n faa fiecrui element al listei. Valorileposibile al acestui atribut sunt:"circle" (cerc)"disc" (disc plin) (valoarea prestabilita);"square" (patrat)

Listele neordonate pot fi imbricate pe mai multe nivelurilistex_3O lista neordonata de listeneordonate

Glosar de termeni de World Wide WebElemente i atribute a unei pagini HTMLFrameset Atribute: cols rows border


28/63

Frame Atribute: src name scrolling

Liste ordonate

O lista ordonat de elemente este un bloc de text delimitat deetichetele corespondente ... (" ol " vine de la "ordered list " = list ordonat). Fiecare element al listei esteiniiat de etichet (list item). Lista va fi indentat fade restul paginii Web i fiecare element al listei ncepe pe unrnd nou.

listex_4O lista ordonataCulori uzuale disponibile prin numeBlack White Red Green Blue YellowPurple Aqua

Tag-urile i pot avea un atribut type care stabilete tipulde caractere utilizate pentru ordonarea listei.Valorile posibilesunt:" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );" I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari );" i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici );" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - optiune

prestabilita );O list de meniuri este un bloc delimitat de etichete

corespondente .... Fiecare element al listeieste iniiat de etichet ( list item ). Cele mai multebrowsere afieaz lista de meniuri ca pe o list neordonat.O list de directoare este un bloc delimitat de etichetecorespondente ... (de la " director "). Fiecareelement al listei este iniiat de etichet ( list item ). Cele


29/63

mai multe browsere afieaz lista de directoare ca pe o listneordonat.(Nu se recomand utilizarea acestori tipuri de liste).

Utilizri speciale ale listelor

Dac ntr-o list, n loc de elementele acesteia introduse prin, se insereaza un bloc de text, acesta va fi indentat( ntocmai ca elementele unei liste).

08. Tabele

Tabelele ne permit s cream o reea dreptunghiular dedomenii, fiecare domeniu avnd propriile opiuni pentruculoarea fondului, culoarea textului, alinierea textului etc.

Pentru a insera un tabel se folosesc etichetele corespondente.... Un tabel este format din rnduri. Pentru a insera un rndntr-un tabel se folosesc etichetele ... ( de la " table row "= rnd detabel ).Folosirea etichetei de sfrit este opional.Un rnd este format din mai multe celule ce conin date.O celul dedate se introduce cu eticheta ...

tabelex_1Un tabel simplu format din 4 linii i

2 coloane cell 11 cell 11 cell 21 cell 22 cell 31 cell 32 cell 41 cell 42

n mod prestabilit, un tabel nu are chenar. Pentru a aduga un

chenar unui tabel, se utilizeaz un atribut al etichetei numit border. Acest atribut poate primi ca valoareorice numr ntreg ( inclusiv 0 ) i reprezint grosimea npixeli a chenarului tabelului. Dac atributul border nu este urmatde o valoare atunci tabelul va avea o grosime prestabilit egal cu 1pixel, o valoare egal cu 0 a grosimii semnific absena


30/63

chenarului. Cnd atributul border are o valoare nenulchenarul unui tabel are un aspect tridimensional.

tabelex_2Un tabel simplu cu chenar cell 11 cell 11 cell 21 cell 22 cell 31 cell 32 cell 41 cell 42

Alinierea tabelului

Pentru a alinia un tabel ntr-o pagin Web se utilizeaz atributulalign al etichetei , cu urmtoarele valori posibile: "left " ( valoarea prestabilit ), " center " i "right ".

Alinierea este important pentru textul ce nconjoar tabelul.Astfel : dac tabelul este aliniat stnga ( ), atunci textul care urmeaz dup punctul deinserare al tabelului va fi dispus n partea dreapt a

tabelului.dac tabelul este aliniat dreapta ( ),atunci textul care urmeaz dup punctul de inserare altabelului va fi dispus n partea stnga a tabelului; dactabelul este aliniat pe centru ( ),atunci textul care urmeaz dup punctul de inserare altabelului va fi afiat pe toat limea paginii, imediat subtabel.

Distana dintre tabel i celelalte elemente din paginaWeb poate fi stabilit cu ajutorul atributelor hspacei vspace aletichetei . Valoarea atributului hspace poate fi orice numr pozitiv,inclusiv 0, i reprezint distana pe orizontal dintre tabel icelelalte elemente ale paginii Web.

Valoarea atributului vspace poate fi orice numr pozitiv, inclusiv0, i reprezint distana pe vertical dintre tabel i celelalteelemente ale paginii Web. Aceste atribute funcioneaz


31/63

numai cu Netscape Communicator.

Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu ajutorul atributului bgcolor, care poate fi

ataat ntregului tabel prin eticheta , unei linii prineticheta sau celule de date prin eticheta .Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.

Dac n tabel sunt definite mai multe atribute bgcolor,atunci prioritatea este urmtoarea: , , ( cuprioritate cea mai mic ).

tabelex_4Un tabel simplu colorat

verde 11 rosu 11 albastru 21 galben 22 cell 31 cell 32 cell 41 cell 42

Culoarea textului din fiecare celul se pote stabili cu ajutorul

expresiei: ....Dimensionarea celulei unui tabel

Distana dintre dou celule vecine se definete cu ajutorulatributului cellspacing al etichetei .Valorile acestui atribut pot finumere ntregi pozitive, inclusiv 0, i reprezint distana n pixelidintre dou celule vecine. Valorea prestabilit a atributuluicellspacing este 2.

tabelex_5Un tabel far chenar de celulealipite gri 11 rosu 12 albastru 21 galben 22


32/63

Distana dintre marginea unei celule i coninutul ei

poate fi definit cu ajutorul atributului cellpadding al etichetei.Valorile acestui atribut pot fi numere ntregi pozitive, ireprezint distana n pixeli dintre celule i continutul ei.Valorea prestabilit a atributului cellpadding este 1.

tabelex_6Un tabel de celule mari gri 11 rosu 12 albastru 21 galben 22

Dimensionarea unui tabel

Dimensiunile unui tabel - limea i nlimea - pot fi stabiliteexact prin intermediul a dou atribute , width i height, aleetichetei .

Valorile acestor atribute pot fi: numere ntregi pozitive reprezentnd

limea respectiv nlimea n pixeli a tabelului;numere ntregi ntre 1 i 100, urmate de semnul %, reprezentndfraciunea din limea i nlimea total a paginii.

tabelex_7Un tabel de de 200 pixeli X 50% cell 11 cell 12 cell 21 cell 22

n exemplul urmtor se utilizeaz un truc care permite afiareantr-o pagin Web a unui text poziionat n centrul paginii.


33/63

tabelex_8Un text centrat ntr-o pagina Text centrat.

Titlul unui tabel

Unui tabel i se poate ataa un titlu cu ajutorul etichetei ( de la "table caption" = titlu tabel ).Aceast etichet trebuie plasat n interiorul etichetelor..., dar nu n interiorul etichetelor sau

Titlul unui tabel poate fi aliniat cu ajutorul atributuluialign al etichetei care poate lua una dintre valorile:

" bottom " ( sub tabel );" top " ( deasupra tabelului );" left " ( la stnga tabelului );" right " ( la dreapta tabelului ).

Cap de tabel

Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste

celule sunt introduse de eticheta ( de la " tabel header" = cap de tabel ) n loc de . Toate atribute care pot fiataate etichetei pot fi de asemenea ataate etichetei. Coninutul celulelor definite cu este scris cucaractere aldine i centrat.

Alinierea coninutului unei celule

Alinierea pe orizontal a coninutului unei celule se face cuajutorul atributului align care poate lua valorile:

" left " ( la stnga );" center " ( centrat , valoarea prestabilita );" right " ( la dreapta );" char " ( alinierea se face fata de un caracter ).

Alinierea pe vertical a coninutului unei celule se face cuajutorul atributului valign care poate lua valorile:

" baseline " ( la baza );


34/63

" bottom " ( jos );" middle " ( la mijloc, valoarea prestabilita );" top " ( sus ).

Aceste atribute pot fi ataate att etichetei pentru a defini

tuturor elementelor celulelor unui rnd, ct i etichetelor i pentru a stabili alinierea textului ntr-o singurcelula.

tabelex_11Un tabel avand continutul celuleloraliniateAici aliniereaestecentrudreapta

stngacentrusus josaicialinierea estecentrustnga (implicita)

Dimensionarea exact a celulelor unui tabel

Dimensiunea unei celule de tip sau de tip pot fi stabilite exact cuajutorul a dou atribute ale acestor etichete: width pentru limei height pentrunlime.Valorile posibile ale acestor atribute sunt: numere ntregi pozitive ( inclusiv0 ) reprezentnd dimensiunea n pixeli a limii, respectiv a nlimiiunei celule; procente din limea , respectiv nlimeatabelului.

Tabele de forme oarecare

Un tabel trebuie privit c o reea dreptunghiular de celule.Cuajutorul a dou atribute ale etichetelor i , ocelula se poate extinde peste celule vecine.

Astfel: extinderea unei celule peste celulele din dreapta ei se face cuajutorul atributului colspan, a crui valoare determin numrul decelule care se unific. Extinderea unei celule peste celulelededesubt se face cu ajutorul atributului rowspan, a crui


35/63

valoare determin numrul de celule care se unific. Suntposibile extinderi simultane ale unei celule pe orizontal ipe vertical. n acest caz , n etichetele i vor fiprezente ambele atribute colspan i rowspan.

Atributul " nowrap "Atributul nowrap aparine elementelor i ; el interzice

ntreruperea unei linii de text. Astfel, n tabel pot apreacoloane cu o lime orict de mare.

tabelex_14Un tabel cu celule de latimemare

cell 11 cell 12 cell 21 cell 22 este foarte lata,aceastacelula este foaret lata.

Celule vide ale unui tabel

Dac un tabel are celule vide, atunci aceste celule vor aprea

n tabel fr un chenar de delimitare. n scopul de a afia unchenar pentru celule vide se utilizeaz urmtoarele trucuri:dup se pune ;dup se pune
.

Caracterul ( no break space ) este de fapt caracterul spaiu.Un spaiu introdus prin intermediul acestui caracter nu va fiignorat de browser.

tabelex_15Un tabel cu celule vide cell 11 cell 12cell 13


36/63

Atribute Internet Explorer pentru tabele

Urmtoarele atribute ale etichetei funcioneaz cuInternet Explorer 4.0 , 5.0, dar nu cu NetscapeCommunicator 4.5:

background permite stabilirea unei imagini pentru fondul unui tabelprimete ca valoare adresa URL a imaginii folosite pentrufond; bordercolor permite stabilirea culorii pentru chenarulunui tabel; bordercolorlight permite stabilirea culorii pentruchenarul 3D al unui tabel; bordercolordark permite stabilirea culorii pentruchenarul 3D al unui tabel;

Grupuri de coloane

Blocul ... permite definirea unui grup de coloane.Atributele acceptate de sunt: span determin numrul decoloane dintr-un grup; width determin o lime unicpentru coloanele din grup; align determin un tip unic dealiniere pentru coloanele din grup.Exemplu:

ntr-un bloc , coloanele pot avea configurri diferite

dac se utilizeaz elementul , care admite atributele:span identifica acea coloan din grup pentru care se face

configurarea. Dac lipsete, atunci coloanele suntconfigurate n ordine; width determina o lime pentrucoloana identificat prin span; align determin o aliniere pentrucoloana identificat prin span.

Atributele frame i rules

Atributul frame al etichetei permite specificarea prilor dinchenarul unui tabel care vor fi afiate. Valorile posibile aleacestui atribut sunt:

void - elimina toate muchiile exterioare ale tabelului;above - afieaz o muchie n partea superioar acadrului tabelului;

below - afieaz o muchie n partea inferioar acadrului tabelului;hsides - afieaz cte o muchie n partea superioari inferioar cadrului tabelului;


37/63

lhs - afieaz o muchie n partea din stnga acadrului tabelului;rhs - afieaz o muchie n partea din dreapta acadrului tabelului;

vsides - afieaz o muchie n partea din stnga i dindreapta a cadrului tabelului;box - afieaz o muchie pe toate laturile cadruluitabelului;

border - afieaz o muchie pe toate laturile cadruluitabelului;

Atributul rules al etichetei permite alegerea unor delimitatoripentru celulele unui tabel. Valorile posibile sunt: none - elimin toatemuchiile interioare ale tabelului; groups - afieaz muchiiorizontale ntre toate grupurile din tabel.Grupurile sunt

specificate prin elementele , , i; rows - afieaz muchii orizontale ntre toate liniiletabelului; cols - afieaz muchii verticale ntre toate coloaneletabelului; all - afieaz muchii ntre toate liniile i coloanele;

tabelex_18Atributele frames i rules cell 11 cell 12cell 13

cell 21 cell 22cell 23

Subblocurile unui tabel

n specificaiile HTML 4.0, coninutul unui tabel poate fiimprit n subblocuri prin elementele:

... ( un singur rnd );... ( un singur rnd );... ( oricate rnduri );

ntr-un tabel exist un singur subbloc de tipul i unsingur subbloc de tipul , dar pot exista mai multe subblocuri detip .

09. Ferestre n HTML


38/63

Ferestrele sau (cadrele) ne permit s definim n fereastrabrowserului subferstre n care s fie ncrcate documenteHTML diferite. Ferestrele sunt definite ntr-un fiier HTMLspecial , n care blocul ... este inlocuit deblocul .... n interiorul acestui bloc,fiecare cadru este introdus prin eticheta .

Un atribut obligatoriu al etichetei este src, care primeste cvaloare adresa URL a documentului HTML care va fi ncrcat

n acel frame. Definirea cadrelor se face prin mprireaferestrelor (i a subferestrelor) n linii i coloane: mprireaunei ferestre ntr-un numr de subferestre de tip coloan seface cu ajutorul atributului cols al etichetei ce descrie aceafereastr; mprirea unei ferestre ntr-un numr de

subferestre de tip linie se face cu ajutorul atributului rows aletichetei ce descrie acea fereastr; valoare atributelor colsi rows este o list de elmente separate prin virgul , caredescriu modul n care se face mprirea. Elementele listeipot fi: un numr ntreg de pixeli; procente din dimensiuneaferestrei (numr ntre 1 i 99 terminat cu %); n* careinseamna n pri din spatiul ramas;

Exemplu 1: cols=200,*,50%,* nseamn o mprire n 4subferestre , dintre care prima are 200 pixeli , a treia ocup

jumtate din spaiul total disponibil, iar a doua i a patraocupa n mod egal restul de spaiu rmas disponibil.Exemplu 2: cols=200,1*,50%,2* nseamn o mprire n 4subferestre , dintre care prima are 200 pixeli , a treia ocup

jumatate din spaiul total disponibil iar a doua i a patraocup n mod egal restul de spaiu rmas disponibil, care se

mparte n trei pri egale , a doua fereastr ocupnd o parte, iar a patra ocupnd 2 pri.

Observaii:-dac mai multe elemente din lista sunt configurate cu *,

atunci spaiul disponibil rmas pentru ele se va pri nmod egal.

-o subfereastr poate fi un cadru (folosind )n carese va ncrca un document HTML sau poate fi imprit larndul ei la alte subfereste (folosind ).

n exemplul urmtor este creat o pagina Web cu trei


39/63

cadre orizontale.Pentru al doilea cadru valoarea atributului srceste adresa URL a unei imagini.

ferex_2

n exemplul urmtor este creat o matrice de 4 cadre (2 x2).Pentru a realiza acest lucru, se folosesc simultan celedou atribute colsi rows.

ferex_3

n exemplul urmtor este creat o pagin Web cu trei

cadre mixte. Pentru a o crea se procedeaz din aproape naproape. Mai nti, pagina este mprit n dou subferestrede tip coloan, dup care a doua subfereastr este mprit

n dou subferestre de tip linie.ferex_4

Culori pentru chenarele cadrelor i dimensionarea chenaruluiunui cadru. Pentru a stabili culoarea chenarului unui cadru seutilizeaz atributul bordercolor. Acest atribut primete ca valoare


40/63

un nume de culoare sau o culoare definit n conformitate cumodelul de culoare RGB. Atributul bordercolor poate fi ataatatt etichetei pentru a stabili culoarea tuturorchenarelor cadrelor incluse, ct i etichetei pentru a stabili

culoarea chenarului pentru un cadru individual.Atributul border al etichetei permite configurarea limiichenarelor tuturor cadrelor la un numr dorit de pixeli.Valoarea prestabilit a atributului border este de 5 pixeli. Ovaloare de 0 pixeli va defini un cadru far chenar.

Pentru a obine cadre fr chenar se utilizeazborder="0". n mod prestabilit, chenarul unui cadru esteafiat i are aspect tridimensional. Afiarea chenarului unuicadru se poate dezactivata dac se utilizeaz atributulframeborder cu valoare "no". Acest atribut poate fi ataat

att etichetei (dezactivarea fiind valabil pentrutoate cadrele incluse) ct i etichetei (dezactivareafiind valabil numai pentru un singur cadru).Valorile posibile ale atributului frameborder sunt:

"yes" -echivalent cu 1;"no" -echivalent cu 0;

Bare de defilare

Atributul scrolling al etichetei este utilizat pentru a adauga unui

cadru o bara de derulare care permite navigarea n interiorul documentuluiafisat n interiorul cadrului.Valorile posibile sunt:

"yes" - barele de derulare sunt adaugate ntotdeauna;"no" - barele de derulare nu sunt utilizabile;"auto" - barele de derulare sunt vizibile atunci cnd este necesar

Atributul noresize al etichetei (fr nici o valoaresuplimentar) dac este prezent, inhib posibilitatea prestabilit autilizatorului de a redimensiona cadrul cu ajutorul mouse-ului. Pozitionareadocumentului ntr-un cadru.Atributele marginheight i marginwidth ale etichetei permitstabilirea distanei n pixeli dintre coninutul unui cadru imarginile verticale, respectiv orizontale ale cadrului.Valori posibile:

-numr de pixeli;-procent din latimea, respectiv din naltimea cadrului;


41/63

Exist browsere care nu suport cadre pentru aceasta seutilizeaz n interiorul blocului eticheta. Dac programul de navigare tie sinterpreteze cadre, va ignora ce se gsete n aceastporiune, iar dac nu, materialul cuprins n zona... va fi singurul care va fi neles iafiat.

De precizat este faptul c ntre ... se pot introduce orice alte tag-uri HTML (inclusiv imagini,hiperlink-uri, tabele).

Cadre interne

Un cadru intern este specificat prin intermediul blocului

.... Un cadru intern se insereaz ntr-o pagin Webn mod asemntor cu o imagine sau n modul n care sespecific marcajul , aa cum rezult din urmtorulexemplu:

n acest caz, am specificat c doresc o fereastr de cadru interncare are 40%din nlimea i 50% din limea paginiicurente.

Atributele aceptate de eticheta sunt n parte preluate de laetichetele i , cum ar fi: src, border,frameborder, bordercolor, marginheight, marginwidth, scrolling, name,noresize; sau de la eticheta vspace, hspace, align, width, height;

inte pentru legturi

n mod prestabilit, la efectuarea unui clic pe o legtur nou pagina(ctre care indic legtura) o nlocuiete pe cea curent naceeai fereastr (acelai cadru). Acest comportament sepoate schimba n dou moduri:

prin plasarea n blocul ... a unui element careprecizeaz, prin atributul target numele ferestrei (cadrului) n care sevor ncarc toate paginile noi referite de legturile din paginacurent conform sintaxei:

prin plasarea n etichet a atributului target, care


42/63

precizeaz numele ferestrei (cadrului) n care se va ncrcapagina nou referit de legtura, conform sintaxei:

...

Observaie:-dac este prezent att un atribut target n ct iun atribut target n , atunci cele precizate de atributul targetdin sunt prioritare. Numele unui cadru este stabilit prin atributul name aletichetei conform sintaxei:

Valori pentru atributul target

Atributul target al etichetei accepta anumite valori predefinite de ovaloare deosebit pentru creatorii de pagini Web, ceste valorisunt:

"_self" (ncarcarea noii pagini are loc n cadrul curent);"_blank" (ncarcarea noii pagini are loc ntr-o fereastra nouaanonima);"_parent" (ncarcarea noii pagini are loc n cadrul parinte alcadrului curent dac acesta exista, altfel are loc nfereastra browserului curent);"_top" (ncarcarea noii pagini are loc n fereastra browserului cecontine cadrul curent);

10. FormulareUn formular este un ansamblu de zone active alctuit din butoane,

casete de selecie, cmpuri de editare etc. Formularele vasigur construirea unori pagini Web care permit utilizatorilors introduc efectiv informaii i s le transmit serverului.

Formularele pot varia de la o simpl caset de text, pentruintroducerea unui ir de caractere pe post de cheie decutare - element caracteristic tuturor motoarelor de cautaredin Web - pn la o structur complex, cu multiple seciuni,care ofer faciliti puternice de transmisie a datelor. Osesiune cu o pagin web ce conine un formular cuprindeurmtoarele etape:

1. Utilizatorul completeaz formularul i l expedieaz unuiserver.2. O aplicaie dedicat de pe server analizeaz formularul


43/63

completat i (dac este necesar) stocheaz datele ntr-obaz de date.3. Dac este necesar serverul expedieaz un rspunsutilizatorului.

Un formular este definit ntr-un bloc delimitat de etichetele corespondente i .Atribute eseniale ale elementului

Exista dou atribute eseniale ale elementului .1. Atributul action precizeaz ce se va ntmpla cu datele

formularului odat ce acestea ajung la destinaie. Deregul ,valoarea atributului action este adresa URL a unuiscript aflat pe un srver WWW care primete dateleformularului, efectueaz o prelucrare a lor i expedieazctre utilizator un rspuns.

.Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell.

2. Atributul method precizeaz metoda utilizat de browserpentru expedierea datelor formularului. Sunt posibileurmtoarele valori: get (valoarea implicita). n acest caz, datele dinformular sunt adugate la adresa URL precizat de atributulaction;

- nu sunt permise cantiti mari de date (maxim 1 Kb)- ntre adresa URL i date este inserat un "?".

Datele sunt adugate conform sintaxei: nume_cmp =valoare_cmp. Intre diferite seturi de date este introdus un"&".

Exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1= valoare1&nume2 = valoare2";

post n acest caz datele sunt expediate separat. Sunt permise cantiti maride date (ordinul MB). Pentru ca un formular s fie funcional,trebuie precizat ce se va ntmpla cu el dup completarea iexpediere. Cel mai simplu mod de utilizare a unui formulareste expedierea acestuia prin pota electronic (e-mail).Pentru aceasta se folosete un atribut al etichetei : ianume action care primete ca valoare " mailto: " concatenat cuo adresa valid de e-mail ctre care se va expedia formularulcompletat. Un formular cu un cmp de editare i un buton deexpediere. Majoritatea elementelor unui formular suntdefinite cu ajutorul etichetei . Pentru a preciza tipul


44/63

elementului se folosete atributul type al etichetei . Pentruun cmp de editare, acest atribut primeste valoarea "text". Alte atribute

pentru un element sunt:atributul name, permite ataarea unui nume fiecrui

element al formularului.atributul value, care permite atribuirea unei valori iniialeunui element al formularului.

Un buton de expediere al unui formular se introduce cu ajutoruletichetei , n care atributul type este configurat la valoarea "submit".Acest element poate primi un nume prin atributul name. Pe buton apare scris"Submit Query" sau valoarea atributului value, dac aceast valoare afost stabilit.

Pentru elementul de tipul cmp de editare (type = "text") ,alte dou atribute pot fi utile:

atributul size specifica limea cmpului de editaredepaete aceast lime, atunci se execut automat oderulare acestui cmp;

atributul maxlength specific numrul maxim de caracterepe care le poate primi un cmp de editare; caractereletastate peste numrul maxim sunt ignorate.

Observaii:

-dac atributul type lipsete ntr-un element , atuncicmpul respectiv este considerat n mod prestabilit ca fiind de tip "text".-formularele cu un singur cmp (de tip text) nu au nevoie de un buton

de expediere, datele sunt expediate automat dup completarea iapsarea tastei ENTER.

Butonul Reset

Dac un element de tip are atributul typeconfigurat la valoarea "reset", atunci n formular se introduceun buton pe care scrie "Reset". La apsarea acestui buton,toate elementele din formular primesc valorile prestabilite(definit odat cu formularul ), chiar dac aceste valori aufost modificate de utilizator.

Un buton Reset poate primi un nume cu ajutorul atributului name i ovaloare printr-un atribut value. Un asemenea buton afieaztextul "Reset" dac atributul value lipsete, respectiv valoarea


45/63

acestui atribut n caz contar.

Cmp de editare de tip "password"

Dac se utilizeaz eticheta avnd atributul type

configurat la valoarea "password" , atunci n formular seintroduce un element asemntor cu un cmp de editareobinuit (introdus prin type="text"). Toate atributele unuicmp de editare rmn valabile. Singura deosebire const nfaptul c acest cmp de editare nu afieaz caracterele nclar, ci numai caractere *,care ascund de privirile altuiutilizator aflat n apropiere valoarea introdusa ntr-unasemenea cmp. La expedierea formularului ns, valoareatastat ntr-un cmp de tip "password" se transmite n clar.

Butoane radio

Butoanele radio permit alegerea, la un moment dat, a unei singurevariante din mai multe posibile. Butoanele radio se introduc prin eticheta cu atributul type avnd valoarea "radio".La expedierea formularului se va transmite una dintre perechile "sex=b" sau"sex=f",n funcie de alegerea fcut de utilizator.

Casete de validare

O caseta de validare (checkbox)permite selectarea sau deselctarea

unei opiuni.Pentru inserarea unei casete de validare se utilizeaz eticheta cu atributul type configurat la valoarea "checkbox". Observaii:

fiecare caset poate avea un nume definit prin atributul name. fiecare caset poate avea valoarea prestabilit "selectat"

definit prin atributul checked.

Casete de fiiere

Intr-o pereche "name = value" a unui formular se poate folosi ntregulcontinut al unui fiier pe post de valoare.Pentru aceasta se insereaza un element ntr-un formular , cuatributul avand valoarea "file" (fiier).Atributele pentru un element de tip caseta de fiiere:

-atributul name permite ataarea unui nume-atributul value primete c valoare adresa URL a fiierului


46/63

care va fi expediat o data cu formularul. Aceastavaloare poate fi -atribuit direct atributului value, sepoate fi tastat ntr-un cmp de editare ce apare o datacu formularul sau poate fi selectat prin intermediul

unei casete de tip File Upload sau Choose File careapare la apsarea butonului Browse... din formular;-atributul enctype precizeaz metoda utilizat la criptareafiierului de expediat.Valoarea acestui atribut este"multipart/form-data".

Liste de selecieO list de selecie permite utilizatorului s aleag unul

sau mai multe elemente dntr-o list finit. Lista de selecieeste inclus n formular cu ajutorul etichetelorcorespondente i .O list de selecie

poate avea urmtoarele atribute:atributul name, care ataeaza listei un nume (utilizat n

perechile "name=value" expediat serverului); atributul size,care precizeaz (printr-un numr ntreg pozitiv , valoareaprestabilit fiind 1) cte elemente din list sunt vizibile la unmoment dat pe ecran (celelalte devenind vizibile prinacionarea barei de derulare ataate automat listei).Elementele unei liste de selecie sunt incluse n lista cuajutorul etichetei . Dou atribute ale etichetei

option se dovedesc utile: atributul value primete ca valoare untext care va fi expediat server-ului n perechea"name=value"; dac acest atribut lipseste ,atunci ctreserver va fi expediat textul ce urmeaza dupa ;atributul selected (far alte valori) permite selectareaprestabilita a unui element al listei. Lista de selecie cuselecii multiple. O lista de selecie ce permite selecii multiplese creeaz ntocmai ca o lista de selecie obinuit. n plus,eticheta are un atribut multiple (far alte valori).Cnd formularul este expediat ctre server pentru fiecareelement selectat al listei care este se insereaz cte opereche "name=value" unde name este numele listei.Cmpuri de editare multilinie

ntr-un formular cmpuri de editare multilinie pot fi incluse cuajutorul etichetei . Eticheta are urmatoarele atribute:

atributul cols, care specific numrul de caractere afiate


47/63

ntr-o linie; atributul rows, care specific numrul de linii afiatesimultan; atributul name, care permite ataarea unui numecmpului de editare multilinie; atributul wrap, (de la "wordwrap"=trecerea cuvintelor pe rndul urmtor, care determin

comportamentul cmpului de editare fa de sfritul delinie. Acest atribut poate primi urmtoarele valori:a) " off "; n acest caz:

ntreruperea cuvintelor la marginea dreapt a editorului seproduce numai cnd dorete utilizatorul;caracterul de sfrit de linie este inclus n textultransmis serverului odat cu formularul;

b) " hard "; n acest caz:se produce ntreruperea cuvintelor la marginea dreapta a

editorului ; caracterul de sfrit de linie este inclus ntextul transmis serverului o data cu formularul;

c) " soft "; n acest caz:se produce ntreruperea cuvintelor la marginea dreapta aeditorului ;nu se include caracterul de sfrit de linie n textul transmisserverului o data cu formularul;

Un formular complex

n exemplul urmtor este prezentat un formular coninnd

elemente prezentate anterior. Cmpurile formularului suntincluse n celule unui tabel pentru a obtine o aliniere dorita.Butoane

ntr-un formular pot fi afisate butoane.Cnd utilizatorul apasa unbuton, se lanseaza n executie o functie de tratare a acestui eveniment.Limbajul HTML nu permite scrierea unor astfel de funcii (acest lucrueste posibil dac se utilizeaz limbajele Javascript sau Java).Pentru a insera un buton ntr-un formular , se utilizeazeticheta avand atributul type configurat la valoarea"button".Alte dou atribute ale elementului "button" sunt:Atributul name, care permite ataarea unui nume butonului; atributulvalue, care primete c valoare textul ce va fi afisat pe buton.Un buton pentru lansarea n execuie a unei aciuni poate fiintrodus ntr-un formular prin elementul avndatributul type configurat la valoarea "button", aa cum s-a vzut mai

nainte. Exist o a doua modalitate de a introduce ntr-o


48/63

pagin Web un buton de apsat, i anume prin intermediulblocului .... Un astfel de buton poate fiinserat ntr-un formular, n acest caz declannd aciunilegate de acel formular, sau poate fi introdus oriunde n

pagin pentru iniierea unor aciuni independente deformulare.Atributele posibile ale elementului "button" sunt: name acorda elementuluiun nume; value precizeaz textul care va fi afiat pe buton; typeprecizeaz aciunea ce se va executa la apsarea butonuluidac acesta este inclus ntr-un formular.Valorile posibilepentru acest atribut sunt: -"button" , -"submit" ,-"reset". ncorpul blocului ... se poate afla un textsau un marcaj de inserare a unei imagini. Observaii finale:

- elementul poate avea un atribut target, care primete cvaloare numele unei ferestre a browserului n care va fi

ncrcat rspunsul trimis serverului WWW la expedierea unuiformular.

- toate elementele cuprinse ntr-un formular pot avea un atributdisabled care permite dezactivarea respectivului element.

- toate elementele de tip text cuprinse ntr-un formular pot avea unatribut readonly care interzice modificarea coninutului acestor elemente.

11. StiluriStilurile pun la dispoziia creatorilor de site-uri noi posibiliti depersonalizare a paginilor Web. Un stil reprezint un mod de ascrie un bloc de text ( adic anumite valori pentru font,mrime culoare, aliniere, distane fa de margini etc).Exista dou modaliti de a defini un stil: sintaxa CSS(Cascading Style Sheets); sintaxa Javascript.Cascading Style Sheets nseamn "foi n stilul cascad".

Stiluri dedicate

Aceste stiluri se aplic blocurilor de text pentru care sunt definite. Deexemplu:

h1 {text-align:center; color:red;}


49/63

Toate titlurile care apar n fiier ca fiind de mrime 1 vor fi deculoare roie i centrate. Dac dorim ca acelai stil s fieutilizat de ctre mai multe elemente (de ex. "h1", "h2", i"p") atunci se utilizeaz o list a acestor elemente, separate

prin virgul:h1, h2, p {text-align:center; color:red;}

Clase de stiluri

Aceste stiluri permit definirea unui stil general i folosirea lui oriundeeste necesar. Exemplu: Definim o clas de stiluri "ac"(albastru i centrat) n interiorul blocului ...,aflat la rndul lui n blocul ...:

all.ac {text-align:center; color:blue;}

La utilizarea clasei de stiluri n cadrul unui element se foloseteatributul class avnd c valoare numele clasei de stil. Acestaeste un atribut universal adic este aplicabil tuturorelementelor.

Observaii:n interiorul unui bloc ..., comentariile sunt blocuri

delimitate de /* i */ ( c n C, C++, Java i Javascript).Dac dorim ca o clas de stiluri s fie aplicabil numai pentruanumite elemente ale documentului (de exemplu "p") atunci

n construcie va aprea acest element ( de exemplu "p.ac").

Stiluri "identificate "

Toate elementele unui document admite un atribut universal numit id.Atributul id poate identifica stilul utilizat de un element.Pentru a utiliza un stil "identificat" procedai astfel: n blocul

... introducei definiia stilului conform sintaxei:#rosu { color: red }

n elementul n care se dorete utilizarea locala a acestui stil ,folosii atributul id care primete valoare numele stilului


50/63

definit anterior. Dac dorim c un stil " identificat " s fieaplicabil numai pentru anumite elemente ale documentului( de exemplu "h2") atunci n construcia selectorului vaaprea acest element (de exemplu "h2#ac").

Stiluri n-line

Stilurile n-line sunt definite chiar n eticheta ce initiaza blocul n care dorims se aplice aceste stiluri. Pentru aceasta se utilizeazatributul universal style (comun practic tuturor etichetelor cepar ntr-un document HTML). Valoarea data atributului styleeste tocmai descrierea stilului, cuprins nu ntre acolade {..}ci ntre ghilimele "...".

Dac dorim utilizarea unui anumit style pentru unfragment de text, atunci includem acest text ntr-un bloc cuajutorul delimitatorilor ..., dup careutilizm atributul style pentru eticheta .

Stiluri definite n fiiere externe

Stilurile definite n interiorul unui bloc ... pot fi transferatentr-un fiier extern existnd astfel posibilitatea utilizrii lor nmai multe fiiere HTML. Pentru a utiliza un stil definit ntr-unfiier extern se procedeaz astfel: se creaz un fiier care sconin numai descrierea stilurilor i se salveaz cu

extensia .css sau .html. Coninutul acestui fiier coincide cuconinutul unui bloc ... , fr ca acetidelimitatori s fie inclui. n fiierul HTML care utilizeazstilurile definite n fiierul creat la punctul 1 , se include nblocul ... o eticheta avnd treiatribute.atributul rel cu valoarea "stylesheet"; atributul href avand c valoareadresa URL a fiierului creat la punctul 1 ; atributul type cuvaloarea "text/css". Se utilizeaz titlurile definite n fiierul

extern c i cum ar fi definite n fiierul HTML curent ntr-unbloc ....Pentru c numai anumite legturi s utilizeze un stil se

pot folosi urmtoarele dou metode:a: link.CLASA1 {...} combinat cu ...a: link#ID1 {...} combinat cu ...

n browsere cursorul mouse-ului are n general o forma simpl,


51/63

lund pe parcursul vizionrii paginii respective maximumdou nfiri diferite:Mna - atunci cnd este poziionat pe o legturaBara vertical - atunci cnd este poziionat pe alt obiect dect

o legtura.Acestea nsa sunt formele implicite. Desigur exista cazuri n care am dori cbrowser-ul s aiba o alta forma dect una dintre acestea. Lafel c multe alte probleme care privesc modul n care opagina arata i aceasta i gsete rezolvarea n folosireaCSS, c limbaj de descriere a formei unui document.Proprietatea care gestioneaz forma cursorului se numestesimplu: cursor i poate fi introdus n orice element style alunui tag html. De exemplu pentru obinerea unei imagini acursorului de tipul unei sgei orientat Est-Vest la trecerea

mouse-ului peste un link iat codul ce va trebui folosit:< a href=" fiier.html" style=" cursor :e-resize" " Legatura< /a>Iat deci cum va arat (doar pentru IE 4.x sau mai mare):

Legtura

Nu este, ns singurul exemplu, n continuare avei toatecodurile pentru formele de cursor pe care le putei folosi: autoutilizeaz setrile implicite ale utilizatorului; crosshair creeaz ocruce; default setrile implicite ale browserului; e-resize sgeat

Est-Vest; hand mn; help semnul ntrebrii; move cruce cu sgei lacapete; n-resize sgeat sud-nord; ne-resize sgeat SudVest NordEst; nw-resize sgeat SudEst NordVest; pointer mn; s-resize sgeat Nord Sud; se-resize sgeat NordVest SudEst;sw-resize sgeat NordEst SudVest; text bara vertical dincmpurile de introducere a datelorw-resize sgeat Est-Vest; wait clepsidra.

12. Javascript

Javascript este un limbaj de programare simplu , de tip script, pentrudefinirea comportamentului elementelor dntr-o pagina Web. Nu este acelasilucru cu mult mai complexul limbaj de programare Java. Javascript poatespecifica , n mod obisnuit n doar cateva rnduri , raspunsurile la actiuni sauevenimente cum ar fi deschiderea unei pagini, deplasarea mouse-ului ntr-unanumit punct sau stergerea unui anumit cmp dintr-un formular. Cea mai


52/63

simplas aplicatie Javscript este aceea care determina apariria i derulareaunui mesaj. Scriptul este ncadrat de marcajele... i totul este inglobat ntr-un comentariuastfel nct programele de navigare care nu nterpreteaza

Javascript nu sunt derutate de scriptul n sine. Multe evenimente pot figestionate cu Javascript.Eveniment se desfasoara atunci cnd Handler de eveniment blur

utilizatorul elimina controlul de intare de pe un element al unui formularonBlur, click utilizatorul executa un click pe un element al unui formular sau

pe o legtur onClickchange utilizatorul modifica valoarea unui text zona de text sau element deselectie onChange.

Focus utilizatorul atribuie unui element de formular control de intrareonFocus, load utilizatorul ncarca pagina n progarmul de navigare onLoad,

mouseover utilizatorul deplaseaza indicatorul mouse-ului deasupra uneilegturi sau a unei ancore onMouseover, select utilizatorul selecteazacmpul de intare al unui element de formular onSelect, submit utilizatorultransmite un formular onSubmit, unload utilizatorul abandoneaza paginaonUnload.

n urmtorul exemplu folosim evenimentul click.

Acest exemplu citeste numele i il saluta.

Un alt exemplu care modific culoarea de fond a paginii. nexemplul urmtor modificm o imagine atunci cnd cursoruleste pozitionat pe aceasta. Elementul cheie este acela cexista dou versiuni ale fiecrei imagini: imaginea "on"(corespunztoare cursorului poziionat deasupra imaginii) i oimagine "off" (corespunzatoare cursorului poziionat n exteriorulimaginii).

Elementul esenial n acest exemplu este modul n care sepun n coresponden evenimentele de activare idezactivare cu evenimentele specifice: OnMouseOver iOnMouseOut. Primul invoc procedura Javascript activateatunci cnd mouse-ul este plasat deasupra imaginii, iar celde-al al doilea comut imaginea la situaia iniial atuncicnd mouse-ul este n exteriorul acesteia.

13. Tag-uri


53/63

Marcaje de baza Definete un fiier n formatWeb

Antetul documentului Tilul documentului

Corpul paginii HTMLBGCOLOR = culoare Culoarea de fond a paginiiTEXT=culoare Culoarea textului pe paginiiLINK=culoare Culoarea legturiilor nevizitate din paginiVLINK=culoare Culoarea legturiilor vizitate din paginiALINK=culoare Culoarea legturiilor pe durata cliculuiexacutat de utilizatorBACKGROUND = url Imaginea de fond pentru pagin

Paragraf Nivel de subtitlu al documentului (n = 1-6)

Specific atribute ale textului ncadratSIZE=n Dimensiunea textului este 1-7FACE="a,b" Specific fontul: a, dac este disponibil, sau bCOLOR=s Culoarea textului: fie un nume de culoare , fie o valoareRGB
Linie nou Informaie preformatat Comenatriu HTML Centreaz materialul n pagin

Rigl orizontalSIZE=x nlimea riglei n pixeliWIDTH=x Limea riglei n pixeli sau n procente

NOSHADE Dezactiveaz afiarea umbrei pentru riglaorizontalALIGN=x Alinierea riglei orizontala n pagina (left, center, right)COLOR=x Culoarea riglei orizontale (numai pentru IE) Marcaj de tip ancorHREF=url Referin hipertextHREF=#nume Referin ctre o ancor intern

Name=nume Definiia unei ancore interne

Marcaje pentru liste Descriere definiie List de tip definiie Termen de definiie Element de list


54/63


55/63

MARGINWIDTH=x Spaiu suplimetar la stnga i ladreapta unui anumit cadru Seciunea de pagin afiatpentru utilizatorii care nu pot vedea un cadru

Cadru intern (numai pentru (IE)SRC=url Sursa cadruluiNAME=s Numele ferestrei (util pentru TARGET)HEIGHT=x nlimea cadrului nglobatWIDTH=x Limea cadrului nglobat

Marcaje pentru tabele Tabel HTMLBORDER=x Chenarul tabeluluiCELLPADDING=x Spaiul suplimentar n cadrul celulelortabelului

CELLSPACING=x Spaiul suplimentar ntre celuleletabeluluiWIDTH=x Limea impus tabeluluiFRAME=valoare Ajustarea fin a tabeluluiRULES=valoare Ajustarea fin a riglelor tabeluluiBORDERCOLOR = culoare Specific culoarea chenaruluitabeluluiBORDERCOLORLIGHT = culoarea: cea mai deschis culoare dincele dou culori specificate

BORDERCOLORDARK = culoarea: cea mai nchis culoare dincele dou culori specificateALIGN=left Aliniaz tabelul la marginea din stnga apaginii, iar textul curge n partea dreaptaALIGN=right Aliniaz tabelul la marginea din dreapta apaginii, iar textul curge n partea stngaHSPACE=x Spaiu suplimetar pe orizontal n jurultabeluluiVSPACE=x Spaiu suplimetar pe vertical n jurul tabeluluiCOLS=x Specific numrul de coloane ale unui tabel Definete un set de definiiide coloane cu ajutorul marcajului Definete limea unei coloaneexprimat n pixeli Definete titlul tabelului Definete corpul tabelului


56/63


57/63

HSPACE=x Spaiul suplimentar pe orizontal din jurulimaginii (n pixeli)VSPACE=x Spaiul suplimentar pe vertical din jurulimaginii (n pixeli)

Marcaje pentru formulare Formular HTML activACTION=url Programul CGI de pe serverul care recepioneazdateleMETHOD=metoda Modul n care datele sunt transmiseserverului(GET sau POST)


58/63

TABINDEX=x Specific ordinea elementelor atunci cndutilizatorul apas tasta TabACCESKEY=c Specific tasta care asigur comanda rapidde la tastatur asociat unui anumit element

DISABLED Elementul este inactiv, dar este afiat pe ecranREADONLY Elementul este afiat pe ecran dar nu poate fieditatHTML avansat Specific informaiireferitoare modelul de stiluriTYPE=val Tipul modelului de stiluri. De regul "text/css" Include un script de regul Javascript, npagina WebLANGUAGE=limbaj Limbajul utilizatEVENT=eveniment Eveniment care declaneaz execuia unor

scripturi specificeFOR=numeobiect Numele obiectului din pagina asupra cruiaacioneaz scriptul.

13. Teste

Test 1

I. Unde este situata Romania?1 la intersectia paralelei de 45 latitudine nordica cu meridianul de 25

longitudine estica2 la intersectia paralelei de 43 latitudine nordica cu meridianul de 28

longitudine estica3 la intersectia paralelei de 40 latitudine nordica cu meridianul de 23

longitudine estica

II.Bauxitele, din care se extrage aluminiul, se gasesc in:1 Muntii Fagaras2 Muntii Banatului3 Muntii Apuseni

III.Muntii Poiana Rusca apartin de:1 Carpatii Occidentali2 Carpatii Meridionali


59/63

3 Carpatii Orientali

IV.Climatul Romaniei este:1 temperat continental-moderat2 temperat continental

3 mediteranean

V.Cati kilometri parcurge Dunarea pe teritoriul tarii noastre?1 10652 10353 1075

Raspunsuri:I. 1II. 3

III. 1IV. 1V. 3

Test 2

I.Curentii care lipsesc Marii Negre sunt:1 curentii de compensatie2 curentii verticali3 curentii de suprafata

II.Ce animal este specific pentru padurile de foioase de la noi?1 lupul2 ursul3 cerbul

III.Cine a avut initiativa de a infiinta Parcul National Retezat?1 Grigore Antipa2 Alexandru Borza3 Simion Mehedini

IV.Care este cea mai joasa altitudine a Campiei Romane?


60/63

1 5-10 m2 10-20 m3 15-20 m

V.Raul Mures strabate podisul:1 Mehedini2 Getic3 Transilvaniei

Raspunsuri:I. 2II. 1III. 2

IV. 2V. 3

Test 3

I.La recensamantul din anul 1948 populatia Romaniei avea:1 15,3 milioane locuitori

2 15,8 milioane locuitori3 16,2 milioane locuitori

II.Orasul Botosani are intre:1 50.000-100.000 locuitori2 100.000-150.000 locuitori3 150.000-200.000 locuitori

III.Care este proportia de terenuri agricole din suprafata totala a

Romaniei?1 55%2 68%3 62%

IV.De cate secole este introdus porumbul in cultura tarii noastre?1 1


61/63

2 23 3

V.Cartoful este originar din:

1 America de Sud2 America de Nord3 Uniunea Europeana

Raspunsuri:I. 2II. 2III. 3IV. 3

V. 1

Test 4

I.Sibiul are o veche traditie in ceea ce priveste:1 industria conservelor

2 industria lemnului3 industria lnii

II.Principala zona de exploatare a gazului metan este:1 Judetul Prahova2 Podisul Transilvaniei3 Campia de Vest

III.Principalul bazin de extractie al huilei se afla in:

1 Petrosani2 Petrila3 Lupeni

IV.Hidrocentrala Portile de Fier II se afla la:1 Anina2 Ostrovul Mare


62/63

3 Calafat

V.Hidrocentrala Vidraru este situata pe raul:1 Olt

2 Bega3 Arges

Raspunsuri:I. 3II. 2III. 1IV. 2V. 3

Test 5

I. Ce fel de clima este in Europa:1.rece2.tropicala3.temperata

II.Cate continente exista:1.62.83.7

III.Care este cel mai inalt munte din Europa:1.Elbrus2.Alpi3.Bucegi

IV. De unde izvoraste Dunarea:1.Bucegi2.Slovacia3.Mtii Padurea Neagra


63/63

V.In ce scop sunt folosite fluviile Europene:1.pescuit2.extractii petroliere3. transport

Raspunsuri:I. 3II. 3III. 1IV. 3V. 3

Date post:	14-Apr-2018
Category:	Documents
Upload:	cosmin-dumitrache
View:	219 times
Download:	0 times

Atestat Profesional Maria Complet

Documents