Motoare de Cautare pe Web Si Elemente ale Limbajului Html

Informatica

Motoare de Cautare pe Web Si Elemente ale Limbajului Html

Byadmin ianuarie 1, 2024

LUCRARE DE LICENȚĂ

Motoare de cautare pe web si elemente ale limbajului HTML

Lista figurilor

Cap. 1 Motoare de cautare pe web

Cap.2 Elemente si particularitati ale limbajului html

2.1 Istoric al Limbajului HTML

2.1.1 SGML si HTML

2.2 Descriere

2.2.1 Taguri de baza

2.2.2 Titlul unei pagini

2.2.3 Blocuri preformatate2.2.4

Culoarea de fond2.2.5

Culoarea textului

2.2.6 Etichete

2.3 Fonturi

2.3.1 Culori

2.3.2 Culoarea fontului

3.3 Familia fontului

2.3.4 Marimea fontului

2.3.5 Grosimea unui font

2.4 Blocuri de text

2.4.1 Indentarea unui bloc

2.4.2 Blocul preformatat

2.4.3 Blocuri paragraph

2.4.4 Blocuri de titlu

2.5 Imagini

2.5.1 Chenarul si dimensionarea unei imagini

2.6 Tabele

2.6.1 Inserarea Tabelelor2.6.2 Chenarul unui tabel2.6.3 Alinierea tabelului

2.6.4 Definirea culorilor de fond pentru un tabel

2.6.5 Dimensionarea celulei unui tabel

2.6.6 Dimensionarea unui tabel

2.6.7 Titlul unui tabel

2.6.8 Cap de tabel

2.6.9 Alinierea continutului unei celule

2.6.10 Tabele de forme oarecare2.

6.11

Celule vide ale unui tabel

2.6.12 Grupuri de coloane

2.6.13 Atributele “frame” si “rules”

2.7 Sintaxa CSS

2.7.1 Stiluri dedicate

2.7.2 Clase de stiluri

2.7.3 Stiluri “identificate”

2.7.4 Stiluri in-line

2.7.5 Stiluri definite in fisiere externe

Bibliografie

Lista figurilor

Fig. 1 Yahoo

Fig. 2 Mail

Fig. 3 Hotbot

Fig. 4 Google

Fig. 5 GoogleMaps

Fig. 6 StreetView

Fig. 7 GoogleEarth

Fig. 8 Marele Zid ChinezescFig. 9 Planeta Marte

Fig. 10 GoogleMail

Fig. 11 GoogleTranslate

Fig. 12 Bing

Fig. 13 DuckDuck

Fig. 14 Titlul unei pagini

Fig. 15 Blocuri preformatate

Fig. 16 Culoare de fond

Fig. 17 Culoarea textului

Fig. 18 Etichete

Fig. 19 Familia fontului

Fig. 20 Marimea fontului

Fig. 21 Grosimea unui font

Fig. 22 Identarea unui bloc

Fig. 23 Blocul preformatat

Fig. 24 Text monospatiat afisat in pagina

Fig. 25 Blocuri paragraphFig. 26 Blocuri de titlu

Fig. 27 BlocuriFig. 28 Inserarea tabelelor

Fig. 29 Chenarul unui tabel

Fig. 30 Alinierea tabeluluiFig. 31 Definirea culorilor de fond pentru un tabel

Fig. 32 Dimensionarea celulei unui tabel

Fig. 33 Dimensionarea unei celule de tabel

Fig. 34 Dimensionarea unui tabel

Fig. 35 Titlul unui tabel

Fig. 36 Cap de tabel

Fig. 37 Tabel de forma oarecare

Fig. 38 Celula vida intr-un tabel

Fig. 39 Grup de coloane

Fig. 40 Frame si Rules

Cap. 1 Motoare de cautare pe web

Un motor de cautare este un program de cautare apelabil, care acceseaza internetul in mod automat si frecvent si care stocheaza titlul, cuvintele cheie, partial chiar si continutul paginilor web intr-o baza de date. In momentul cand un utilizator apeleaza la un motor de cautare pentru a afla o informatie, o fraza sau un cuvant, motorul de cautare se va uita in acesta baza de date si functie de anumite criterii de prioritate, va crea si afisa o lista de rezultate. Acest lucru nu este foarte usor deoarece :

* exista deja peste 100 milioane de site-uri web, insumand in total miliarde de pagini web, distribuite pe tot globul

* continutul acestor pagininu este static, ci extrem de dinamic

* raspunsul la o comanda de cautare trebuie sa vina repede, in mai putin de o jumatate de secunda, chiar si-atunci cand lista de rezultate contine, spre exemplu, zeci de mii de pagini web potrivite la criteriile de cautare folosite.

Odata cu aparitia Internetului a avut loc o adevarata revolutie in domeniul accesului la informatii a publicului larg, cat si a posibilitatii de a interschimba date si mesaje. Chiar Tim Berners-Lee, inventatorul World Wide Web, afirma : « Internetul a aparut ca urmare a necesitatii de a avea acces si de a exista un spatiu comun de informatii ». Internetul reprezinta o mare cantitate de informatii, interconectate prin legaturi invizibile numite link-uri. Prin intermediul sau, o persoana poate practic sa gaseasca raspuns la orice problema ; insa marea dificultate, tinand cont de cantitatea mare de pagini, este de a sti de unde sa incepi cautarea pentru a gasi exact raspunsul necesar. In aceste conditii, nu este de mirare ca urmatoarea cerinta fireasca, generata de acesta crestere substantiala de informatii inter-legate in spatiul « www » a fost aparitia unor unelte care sa ajute utilizatorul sa ajunga la ceea ce il intereseaza. Aceste unelte au primit numele de motoare de cautare. La inceput, acestea au fost alcatuite doar din liste de servere sau prezentand liste de URL-uri, instrumentele de cautare perfectionandu-se continuu, in ideea de a aduce utilizatorului raspunsul pe care il cauta, exact informatia dorita.

In anul 1994 World Wide Web Worm primea aproximativ 1500 de cereri de cautare zilnic.Deja in anul 1997, Altavista afirma ca proceseaza peste 20 de milioane de cautari. Observam asadar cresterea exponentiala in popularitate si utilizatori, pe care a inregistrat-o internetul inca din primii ani de existenta a sa. Odata cu expansiunea internetului, motoarele de cautare au trebuit sa devina din ce in ce mai performante pentru a putea, pe de o parte sa indexeze cantitatea imensa de informatie si pe de alta parte sa raspunda in timp util la din ce in ce in mai multe cereri din partea utilizatorilor.

In continuare, va voi prezenta o lista cronologica a celor mai importante tool-uri de cautare, aparute din 1990 si pana in prezent :

Primul tool a aparut in anul 1990 si s-a numit « Archie » (de la archieves ), fiind creat de Alan Emtage. Archie este un tool pentru indexarea arhivelor FTP, permitand oamenilor sa gaseasca anumite fisiere. Acest serviciu a inceput ca un proiect pentru studentii si personalul voluntar de la Universitatea McGill, Facultatea de Informatica in 1987, atunci cand Deutsch, Emtage si Heelan au fost rugati sa conecteze Facultatea de Informatica la internet .Primele versiuni Archie au fost scrise de Alan Emtage.Bill Heelan si Peter Deutsch au scris un script care sa permita oamenilor sa se autentifice si sa gaseasca informatii colectate utilizand protocolul telnet « archie.mcgill.ca » [132.206.2.3].Serverele pot fi accesate in mai multe moduri : folosind un client local (cum ar fi archie sau xarchie), telneting la un server in mod direct, trimiterea de cereri de posta electronica si mai tarziu printr-o interfata Wolrd Wide Web. In momentul de apogeu, motorul de cautare Archie a reprezentat 50% din traficul de pe Internet de la Montreal.In 1992, Alan Emtage impreuna cu Peter Deutsch dar si cu beneficiu financiar de la Universitatea McGill au pus bazele primei companii din lume – Bunyip Information Systems – fondata in mod expres si dedicata pentru a furniza servicii Internet cu o versiune Archie licentiata comercial folosita de milioane de oameni din intreaga lume.La scurt timp dupa aceasta li s-a alaturat si Bill Heelan, unde impreuna cu Bibi Ali si Sandro Mazzucato au facut parte din asa numitul Archie Group.Grupul actualiza in mod semnificativ baza de date archie si indexa paginile web.Lucrul pe acest motor de cautare a fost stopat la sfarsitul anilor 1990.

In anul 1991 au aparut inca 3 motoare de cautare : « Gopher » de Mark McCahill, ce indexa documente text ; « Veronica » (Very Easy Rodent-Oriented Net-wide Index to Computerized Archives) si “Jughead” (Jonzy`s Universal Gopher Hierarchy Excavation and Display). Ultimele doua utilizau fisierele stocate in sistemul de indexare Gopher si returnau utilizatorilor doar rezultate din cadrul acestora.

Doi ani mai tarziu, studentul MIT Matthew Gray a creat ceea ce este considerat primul robot, numit “Wolrd Wide Web Wandered”. Acesta este un program, creat initial pentru a stabili dimensiunea web-ului si care numara serverele web inter-conectate, alcatuind o lista cu acestea.

Excite : acesta a fost creat in anul 1993 de catre 5 studenti – Graham Spencer, Joe Kraus, Ben Lutch, Mark Van Haren, Ryan McIntyre si Martin Reinfried – din cadrul Universitatii Stanford, California in cadrul unui proiect de curs denumit Architext Software; in cele din urma, acesta a falimentat in anul 2001.

Yahoo – Yet Another Hierarchical Officious Oracle: a fost creat in anul 1994 tot in campusul Universitatii Stanford, California de 2 studenti – David Filo si Jerry Yang;pentru inceput, s-au folosit de informatiile utilizate in elaborarea lucrarii de doctorat pentru a putea tine evidenta link-urilor “WWW”. Prima denumire sub care s-a lansat este cea de “Jerry and David`s Guide to the World Wide Web” insa a fost redenumit ulterior Yahoo. In toamna anului 1994, site-ul a fost accesat intr-o singura zi de 100.000 de vizitatori (imens la vremea respectiva). In 1995 s-a fondat Yahoo Inc. care a ajuns astazi sa aiba peste 350 de milioane de utilizatori lunar, fiind al doilea motor de cautare.

Servicii si aplicatii oferite de Yahoo: Mail, News, Sports, Finance, Weather, Games, Groups, Answer, Screen, Flickr, Mobile, Celebrity, Shine, Movies, Music, TV, Health, Shopping, Travel, Autos, Homes, Food, Tech, Jobs, Travel, Dating, Search, Education, etc

Fig. 1

Mail este un serviciu oferit gratuit de posta electronica online, inaugurat in anul 1997; serveste peste 280 de utilizatori in prezent. Momentan este cel mai mare serviciu de posta electronica online, avand cel mai mare numar de utilizatori, urmat imediat de catre competitorul sau Windows Live Hotmail.Incepand cu anul 2008, Yahoo Mail ofera spatiu de stocare nelimitat pentru e-mail-uri atat utuilizatorilor serviciului comercial Yahoo ! Mail Plus cat si utilizatorilor neplatitori. In data de 27 iunie 2009, serviciul de mesagerie instant Yahoo! Messenger a fost integrat cu Yahoo ! Mail Beta, acest lucru inseamnand ca ele pot fi accesate in acelasi loc. Acum este posibila transmiterea de mesaje instante dinrect din clientul Yahoo ! Mail fara a fi nevoie de a descarca sau instala ceva, schimbarea intre cele doua servicii fiind rapida si simpla. Acesta functionalitate nu este adusa serviciului Mail Classic insa este disponobila in interfata cea noua a clientului.

Fig. 2

Altavista: a fost lansat pe data de 15 decembrie 1995 de catre cercetatorii de la Digital Equipment Corporation`s Western Research Laboratory din Palo Alto, California; era furnizorul unei baze de date indexabila ce continea peste 16 milioane de documente. La sfarsitul zilei in care a fost lansat, avea déjà peste 300.000 de utilizatori ce vizitasera pagina iar dupa primul an de functionare Altavista servea peste 19 milioane de cereri de cautare zilnic. In anul 2003 a fost cumparata de Ouverture pesntru suma de 140 milioane dolari iar la sfarsitul anului 2003 Yahoo a cumparat Ouverture, astfel ca Altavista a sfarsit prin a avea « motorizare » Yahoo.

Hotbot – a fost lansat in luna mai a anului 1996 de catre Wired Magazine si avea in spate bazele de date Inktomi, LookSmart si Open Directory (din anul 1999). A fost cumparat de catre Lycos in anul 1998 si datorita aplicarii unei tehnici de marketing gresite, compania a ajuns aproape de faliment. Din anul 2002 a fost relansat iar in prezent ofera informatii avand ca baza de date cele detinute de Google, si Ask Jeeves (Teoma).

Fig. 3

Google – numele provine de la termenul « goolgol », insemnand 10100, cu referire la domeniul sau de scalabilitate. Acest domeniu, www.google.com, a fost inregistrat pe data de 14 septembrie 1997 de Larry Page si Sergey Brin, doi studenti tot de la Unversitatea Stanford, California. In cadrul unui proiect din anul 1996 le-a venit ideea de indexare a paginilor de INTERNET dupa numarul de legaturi spre acea pagina provenite de pe alte pagini WWW, nu dupa numarul de aparitii al termenului de cautare in continutul lor ; acest lucru sta la baza algoritmului PageRank, algoritmul de cautare al Google – pe baza acestuia, fiecare pagina web poate avea un anumit rang cuprins intre 0 (minim) si 10 (maxim). Cu cat rangul este mai mare cu atat aceasta apare mai repede la o cautare pe WWW. In 1998 a fost creat Google Corporation si in decurs de 13 ani a ajuns cel mai cunoscut motor de cautare de pe WWinseamnand ca ele pot fi accesate in acelasi loc. Acum este posibila transmiterea de mesaje instante dinrect din clientul Yahoo ! Mail fara a fi nevoie de a descarca sau instala ceva, schimbarea intre cele doua servicii fiind rapida si simpla. Acesta functionalitate nu este adusa serviciului Mail Classic insa este disponobila in interfata cea noua a clientului.

Fig. 2

Altavista: a fost lansat pe data de 15 decembrie 1995 de catre cercetatorii de la Digital Equipment Corporation`s Western Research Laboratory din Palo Alto, California; era furnizorul unei baze de date indexabila ce continea peste 16 milioane de documente. La sfarsitul zilei in care a fost lansat, avea déjà peste 300.000 de utilizatori ce vizitasera pagina iar dupa primul an de functionare Altavista servea peste 19 milioane de cereri de cautare zilnic. In anul 2003 a fost cumparata de Ouverture pesntru suma de 140 milioane dolari iar la sfarsitul anului 2003 Yahoo a cumparat Ouverture, astfel ca Altavista a sfarsit prin a avea « motorizare » Yahoo.

Hotbot – a fost lansat in luna mai a anului 1996 de catre Wired Magazine si avea in spate bazele de date Inktomi, LookSmart si Open Directory (din anul 1999). A fost cumparat de catre Lycos in anul 1998 si datorita aplicarii unei tehnici de marketing gresite, compania a ajuns aproape de faliment. Din anul 2002 a fost relansat iar in prezent ofera informatii avand ca baza de date cele detinute de Google, si Ask Jeeves (Teoma).

Fig. 3

Google – numele provine de la termenul « goolgol », insemnand 10100, cu referire la domeniul sau de scalabilitate. Acest domeniu, www.google.com, a fost inregistrat pe data de 14 septembrie 1997 de Larry Page si Sergey Brin, doi studenti tot de la Unversitatea Stanford, California. In cadrul unui proiect din anul 1996 le-a venit ideea de indexare a paginilor de INTERNET dupa numarul de legaturi spre acea pagina provenite de pe alte pagini WWW, nu dupa numarul de aparitii al termenului de cautare in continutul lor ; acest lucru sta la baza algoritmului PageRank, algoritmul de cautare al Google – pe baza acestuia, fiecare pagina web poate avea un anumit rang cuprins intre 0 (minim) si 10 (maxim). Cu cat rangul este mai mare cu atat aceasta apare mai repede la o cautare pe WWW. In 1998 a fost creat Google Corporation si in decurs de 13 ani a ajuns cel mai cunoscut motor de cautare de pe WWW.

Fig. 4

In prezent, Google detine suprematia in domeniul motoarelor de cautare, fiind cel mai popular intre utilizatorii din intreaga lume.Va prezint cateva date, prezentate in descrierea oficiala Google :

* are aproximativ 8 miliarde de pagini indexate

* are aproximatix 1 miliard de pagini

* indexeaza numeroase tipuri de documente, precum html, pdf, ps, xls, ppt, doc, stf, swf etc

* are suport in peste 100 de limbi (cautare doar in documentele scrise intr-o anumita limba)

* are in jur de 82 milioane de utilizatori pe luna

Inca de la inceput, printr-o simpla cautare, se pot observa calitatile sale: viteza, acuratete, obiectivitate si usurinta de utilizare. Aproape instantaneu dupa introducerea unui text de cautat, utilizatorul primeste o lista de rezultate, paginate, cu link si descriere sumara a continutului.Insa marele sau succes se explica prin inovatia in maniera de sortare a rezulatelor obtinute in urma cautarii : PageRank. Astfel, o pagina este clasificata in functie de importanta sa, importanta acumulata in functie de numarul de link-uri catre ea de pe alte pagini. Cu cat o pagina care pointeaza catre ea este mai importanta la randul ei, cu atat link-ul respectiv va valora mai mult. Importanta unei pagini in sistemul Google este data de numarul de voturi, link-uri, catre ea, cat si de calitatea, importanta, acestora. Pentru a stabili pozitia finala a unei pagini in lista de rezultate oferite utilizatorului, Google analizeaza deasemenea si continutul paginii in sine. Motorul de cautare beneficiaza de o tehnologie care ii permite sa analizeze in detaliu pagina, privind la detalii precum fonturile, subdiviziuni si locatia precisa a fiecarui cuvant in parte; in plus analizeaza si paginile invecinate, pentru a se asigura ca reintoarce cele mai potrivite rezultate cu nevoia de informatie a utilizatorului sau uman.Scalabilitatea si rapiditatea sa sunt asigurate de arhitectura sa de PC-uri legate intre ele, in locul utilizarii a cateva servere performante. Toate aceste se combina pentru a cera cel mai puternic motor de cautare disponibil, ce aduce rezultate relevante, permanent actualizate si mereu imbunatatite.

In anul 2000 este lansat AdWords precum si bara de instrumente Google. In urmatorii ani lanseaza diverse servicii : googne news, froogle, google labs. In 2004 se lanseaza Gmail, un serviciu gratuit de e-mail cu diverse facilitati si un spatiu mare de stocare. Alte servicii si aplicatii de mare importanta sunt : Google Maps, Google Earth, Google Play, Google Drive, Google Print, Google Street View, Google Translate. Acestea se numara printre cele mai cunoscute servicii oferite gratuit de motorul de cautare, insa mai sunt cateva nu foarte familiare : What Do You Love, Google Health, Google HotPot, Google Mars, Panoramio, Google Correlate.

In continuare voi explica cateva servicii si aplicatii oferite de Google :

GoogleMaps este o aplicatie gratuita de cartografiere ce poate fi accesata la adresa http://maps.google.com . Istoria acesteia ia nastere o data cu achizitionarea de catre Google la sfarsitul anului 2004 a companiei Where 2 Technologies. Fiind vorba de o aplicatie web, pentru a o utiliza este necesar sa ai un calculator si o conexiune internet. Cu ajutorul acestei aplicatii se pot vedea sosele de pet to globule, sensuri de circulatie, infromatii din trafic cum ar fi strazi inchise circulatiei sau care se afla in reparatie, accidente si multe altele. Aplicatia este foarte utilza atunci cand vrei sa afli distanta dintre doua sau mai multe puncte de pe harta (indiferent daca alegi mersul pe jos, transportul public sau cu masina personala) cu evitarea autostrazilor sau traseelor cu taxa. GoogleMaps ofera indicatii rutiere pretioase si iti sugereaza diverse trasee care sunt exprimate in km sau mile, functie de preferintele fiecaruia, dar si durata aproximativa acestor trasee. Exista trei moduri diferite de a vizualiza hartile : Harta, Satelit si Teren.Indiferent de modul ales daca duci cursorul deasupra butonului « Mai multe .. » poti adauga pe harta elemente ca : fotografii, materiale video, camere web si/sau informatii preluate de pe site-ul www.wikipedia.com .

Exemplu :

Fig. 5

Pe langa acestea, se pot cauta companii, adrese si locatii de interes.Prin intermediul carasteristicii intitulata StreetView (imagine stradala) sunt afisate pe monitor imagini panoramice de 360° din mai multe orase de pe glob. Exemplu :

Fig. 6

Venind in intimpinarea posesorilor de dispozitive mobile, Google a lansat in anul 2006 o aplicatie denumita Google Maps Mobile bazata pe mediul de programare Java. Aceasta se poate instala pe orice terminal ce ruleaza :

* Windows Mobile

* Symbian

* IPhone OS

* Android

* Palm OS dar si pe dispozitivele BlackBerry

Cel mai familiar este Google Maps Mobile de pe IPhone; avantajul oferit de aceasta aplicatie este acela ca telefonul nu trebuie sa fie dotat neaparat cu receptor GPS ca in cazul disozitivelor de navigatie GPS. Dezavantajul este ca hartile se incarca direct de pe internet, ceea ce presupune ca trebuie sa fii conectat la retea ; acesta este gratuit in locurile cu hotspot-uri daca telefonul este dotat cu Wi-Fi sau direct prin intermediul tehnologiei 3G. Problema apare atunci cand la sfarsitul lunii vine factura si s-ar putea sa fie ceva mai « consistenta » decat in mod normal …

Google Earth afiseaza imagini din satelit, cu diferite rezolutii, de pe suprafata Pamantului si le permite celor ce il folosesc sa vada orase, case sau alte constructii oriunde pe glob. Spre deosebire de Google Maps care este o aplicatie web ce ruleaza in browser, Google Earth este un program de sine statator. Exista trei versiuni :

* Google Earth

* Google Earth Pro

* Google Earth Enterprise

Functia de cautare integrata in Google Earth este utila deoarece poti cauta de la tari si orase pana la munti, lacuri, etc.

Exemplu :

Fig. 7

Avem posibilitatea de a afisa drumuri, granite, locatii de interes cum ar fi: cafenele, cluburi, restaurante, banci, benzinarii, farmacii, parcuri si locuri de agrement plus multe altele.

Prin intermediul lui Google Earth sunt afisate imagini panoramice 360° cu ajutorul functiei Street View. Daca bifezi optiunea initulata « Cladiri 3D » vei avea surpiza sa observi ca apar o multime de cladiri tridimensionale.

Exemplu :

Fig. 8

Odata cu noile versiuni Google Earth au fost implementate o serie de noi facilitati.Spre exemplu, pasionatii de astronomie vro gasi interesant modul Sky cu care pto explora toata bolta cereasca in timp ce oceanografii pot explora adancurile oceanelor. Odata cu versiunea 5.0 planeta Marte este disponibila tuturor celor ca doresc sa o « viziteze » iar cu ocazia aniversarii a 40 de ani de la misiunea navetei Apollo 11, Google a lansat un update prin care se poate explora si suprafata lunii.

Exemplu :

Fig. 9

Gmail este o aplicatie web de e-mail si POP3 oferita gratuit de Google si sustinuta prin intermediul anunturilor publicitare. Serviciul a fost lansat pe data de 1 aprilie 2004, nu e pacaleala , ca versiune beta privata (cu acces pe baza doar de invitatie) si a fost deschis publicului la 7 februarie 2007; atractia utilizatorilor catre acest serviciu este dat de gratuitatea utilizarii lui si de un spatiu de stocare in continua crestere.

Fig. 10

Google Translate este un serviciu oferit gratuit de Google, fiind o « masina » de tradus dintr-o limba intr-alta.

Fig. 11

Bing – este proprietatea Microsoft si a fost lansat de catre CEO Steve Ballmer pe data de 28 mai 2009. Prima denumirea a fost Live Search dupa care a devenit MSN Search pentru ca apoi sa se transforme in Windows Live Search. MSN Search a fost lansat in 1998 si timp de un an a depins de baza de date Inktomi iar din 1999 a avut « motorizare » Altavista. Incepand cu anul 2006, MSN Search a devenit Windows Live Search cu « motorizare » Microsoft. In momentul de fata, toate cautarile pe WWW sunt monitorizate de Google, Yahoo si Mocrosoft, primele 2 tehnologii fiind aparute la Stanford University, California.

Fig. 12

Pe langa aceste motoare de cautare, mai exista o multime altele specializate : Scour.com, greplin.com, icerocket.com, blogpulse.com, ebuzzing labs (retele sociale, blog-uri) ; picsearch.com, tineye.com (imagini) ; mixturtle.com, songboxx.com, music-map.com, audiogalaxy.com, podscope.com, blinkx.com (muzica, continut video), etc .

Motorul de cautare duckduckgo.com te ajuta sa gasesti informatii fara ca la celalalt capat sa se stie de tine ; aceasta variana este aleasa si de hackerii de la Anonymous.

Fig. 13

Un motor de cautare opereaza in urmatoarea ordine :

1. Crawler web (“vizita” web)

2. Indexare

3. Cautare

Motoarele de cautare web functioneaza prin stocarea de informatii despre paginile web, pe care le preia din fisierele html. Paginile sunt preluate de catre un crawler web (uneori cunoscut si sub denumirea de “spider”) – un browser web automatizat, care urmareste fiecare legatura din site. Excluderile pot fi facute prin utilizarea de robots.txt; continutul tuturor paginilor este analizat pentru a determina modul in care acesta ar trebui sa fie indexat (de exemplu sunt extrase cuvinte din titluri sau campuri special numite meta tag-uri). Datele despre paginile web sunt stocate in indexul unei baze de date, pentru a fi utilizate mai tarziu in interogari; o interogare poate fi un singur cuvant. Scopul unui index este sa permita informatiilor sa fie gasite cat mai repede posibil.Unele motoare de cautare cum ar fi Google, stocheaza sursele paginilor in intregime sau partial, precum si informatii despre paginile web, in timp ce altele, cum ar fi Alta Vista stocheaza fiecare cuvant a fiecarei pagini gasite.

Când un utilizator introduce o interogare ȋntr-un motor de căutare (de obicei folosind cuvinte cheie), motorul ȋși examinează indexul și oferă o listă a celor mai potrivite pagini web ȋn funcție de criteriile sale, de obicei, cu un scurt rezumat care conține titlul documentului și uneori texte parțiale. Indexul este construit din informațiile stocate cu datele și metoda prin care informația este indexată. Din păcate nu există un motor de căutare care să permită căutarea documentelor după dată. Majoritatea motoarelor de căutare permit folosirea operatorilor booleeni (AND, OR sau NOT) pentru a specifica interogarea. Operatorii booleeni suntfolosiți pentru căutăriliterale care permit utilizatorului să perfecționeze și să extindă termenii de căutare. motorul caută cuvinte sau fraze exeact așa cum au fost introduse ȋn câmpul de căutare. Unele motoare oferă o facilitațe avansată de căutare numită căutare de proximitate care permite utilizatorilor să definească dinstanța dintre cuvintele cheie. Există, de asemena, conceptul bazat pe căutarea de cercetare, unde căutarea implică folosirea analizelor statistice pe paginile care conțin cuvintele sau frazele de căutare.

Utilitatea unui motor de căutare depinde de relevanța rezultatelor. Deși pot exista milioane de pagini web care includ un cuvânt sau o frază, unele pagini pot fi mai relevante, mai populare sau mai autoritare decât altele. Majoritatea motoarelor de căutare utilizează metode de clasificare a rezultatelor pentru a oferi, ȋn top, cele mai bune rezultate. Modalitatea prin care un motor de căutare decide care pagini sunt cele mai potrivite și ȋn ce ordine sunt afișate, variază mult de la un motor la altul. De asemenea, metodele se modifică ȋn timp pe măsură ce se schimbă utilizarea Internetului și pe măsură ce evoluează tehnologia. Există două tipuri principale de motoare de căutare care au evoluat. Unul este un sistem de cuvinte cheie predefinite și aranjate ierarhic pe care oamenii le-au programat pe larg. Celălalt este un sistem care generează un index inversat care alalizează textul localizat.

Cele mai multe motoare de căutare web sunt „societăți” comerciale susținute de venituri din publicitate, și, ca urmare, unele folosesc practica de a permite agenților de publicitate să plătească bani pentru a le afișa site-urile ȋn primele căutări. Acele motoare de căutare care nu acceptă bani pentru rezultate bune ȋn motorul de căutare, fac bani prin rularea de rezultate ȋnrudite (ads), alături de rezultatele obișnuite. Motoarele de căutare fac bani de fiecare dată când cineva face click pe unul din anunțurile ads.

Cap.2 Elemente si particularitati ale limbajului html

2.1 Istoric al Limbajului HTML

Unul din primele elemente fundamentale ale WWW ( World Wide Web) este HTML ( Hyper Text Markup Language ), care descrie formatul primar in care documentele sunt distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma,structurarea formatarii si legaturile hypertext,fac din ele un foarte bun format pentru documentele Internet si Web.

Primele specificatii de baza ale Web-ului au fost HTML, HTTP si URL. HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si schimba intre ei informatie utilizand Internetul. Erau prin urmare necesare cateva trasaturi : Independenta de platforma, posibilitati hypertext si structurarea documentelor. Independenta de platforma inseamna ca un document poate fi afisat in mod asemanator de computere diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta atat de variata.

HiperText inseamna ca orice cuvant, fraza, imagine sau alt element al documentului vazut de un utilizator ( client ) poate face referinta la un alt document, ceea ce usureaza mult navigarea intre multiple documente sau chiar in interiorul aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul, precum si interogarea unor baze de date formate din aceste documente.

2.1.1 SGML si HTML

Tim Berners-Lee a utilizat ca model SGML ( Standard Generalized Markup Language), un standard international in plina dezvoltare. SGML avea avantajul unei structurari avansate si al independentei de platforma dar proiecterea lui a avut in vedere mai mult structura semantica a documentului decat modul de formatare. Flexibil, SGML putea fi descris ca o specificare pentru descrierea altor formate. Utilizatorii puteau creea noi formate ( DTD, Document Type Definitions ) care puteau fi intelese de orice produs soft SGML pur si simplu prin citirea mai intai a definitiilor noilor formate.

HTML este pur si simplu un DTD, deci o aplicatie a SGML. In primii ani de evolutie HTML a crescut lent, in principal pentru ca ii lipseauposobilitatile de a descrie publicatii electronice profesionale; limbajul permitea oarece control asupra fontelor dar nu permitea inserarea graficii. In 1933, NCSA a imbogatit limbajul pentru a permite inserarea graficii si au construit primul navigator grafic, Mosaic. Au urmat apoi contributii ad hoc ale diverselor firme care au adus adaugiri limbajului HTML (adaugiri si nu imbogatiri pentru ca unele taguri nu erau in conformitate cu principiile generale ale SGML ) astfel incat, prin 1994 limbajul parea scapat de sub control. Urmarea a fost ca la prima conferinta WWW din Geneva ( Elvetia ) s-a construit un grup ( HTML Working Group ) a carui prima misiune a fost formalizarea HTML intr-un DTD al SGML, lucru care s-a concretizat in HTML Level 2 ( sau HTML 2.0; Nivelul 1, deci HTML 1.0, a fost proiectat de Tim Berners-Lee ). Importanta actiunii acestui grup consta in faptul ca, odata standardizat, limbajul poate fi apoi extins intr-un mod mai controlat la alte nivele.

Standardul official HTML este World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task Force (IETF). W3C a enuntat cateva versiuni ale specificatiei HTML, printer care si HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelasi timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile “extensii” HTML in afara procesului standard si le-au incorporate in browserele lor. In unele cazuri, cum ar fi tagul Netscape, aceste extensii au devenit standarde adoptate de autorii de browsere.

HTML 2.0, elaborat in iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele curente – inclusive cele mod text. HTML 2.0 reflecta conceptia originala a HTML ca un limbaj de marcare independent de obiectele existente pentru asezarea lor in pagina, in loc de a specifica exact cum ar trebui sa arate acestea.

Specificatia HTML 3.0, enuntata in 1995, a incercat sa dezvolte HTML2.0 prin adaugarea unor facilitate precum tabelele si un mai mare control asupra textului din jurul imaginilor. Desi unele din noutatile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau inca folosite. In unele cazuri, taguri asemanatoare implementate de autorii de browsere au devenit mai raspandite decat tagurile “oficiale”. Specificatia HTML 3.0 acum a expirat,deci nu mai este un standard official.

In mai 1996, W3C a scos pe piata specificatia HTML 3.2, care era proiectata sa reflecte si sa standardizeze practicile acceptatela scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape si Microsoft plus extensii HTML raspandite. In bilantul asupra HTML, W3C recomanda ca providerii de informatii sa utilizeze specificatia HTML 3.2.

Versiunile curente ale majoritatii browserelor ar trebui sa suporte toate, sau aproape aceste taguri. HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce pot fi afisate intr-un browser (sau navigator). HTML este folosit pentru prezentarea unui continut (text, imagine) intr-o pagina web, furnizeaza mijloacele prin care continutul unui document poate fi structurat si adnotat cu diverse tipuri de metadate si indicatii de redare si afisare. Aceste indicatiile pot varia de la decoratiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori introducerea unei imagini, pana la adaugarea de elemente sofisticate, tabele, harti de imagini, formulare si cod CSS sau scripturi JavaScript.

Metadatele pot include informatii despre titlul si autorul documentului, informatii structurale despre cum este impartit documentul in diferite segmente, paragrafe, liste, titluri etc. si informatii esentiale care permit ca documentul sa poata fi legat de alte documente pentru a forma astfel hiperlink-uri. HTML este un format text proiectat pentru a putea fi citit si editat utilizand un editor de text simplu, editarea si intelegerea paginilor in acest fel necesita cunostinte de HTML, pe care le puteti obtine studiind lectiile din acest curs.
Exista si editoare grafice, de tip WYSIWYG (What You See Is What You Get – "ceea ce vezi este ceea ce obtii"), cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage, care permit ca paginile web sa fie tratate asemanator cu documetele Word si genereaza ele cod HTML pentru continutul paginii, dar aceste programe genereaza un cod HTML care este de multe ori prea incarcat si de proasta calitate. HTML este de asemenea utilizat in e-mail. Majoritatea aplicatiilor de e-mail folosesc un editor HTML incorporat pentru compunerea e-mail-urilor si un motor de prezentare a e-mail-urilor de acest tip.

Dupa mai multi ani de experienta cu HTML 4 si XHTML, HTML5 a venit cu tag-uri noi pentru o mai buna structra a documentului si a formularelor, pentru desen si continut multimedia. Multe din noile elemente HTML5 nu sunt inca suportate de principalele navigatoare web, dar treptat acestea implementeaza noile caracteristici din HTML5.

HTML5 audio tag – Tag-ul <audio> se foloseste pt. a adauga sunet, muzica in pagina web.
Poate folosi aceste atribute:

autoplay (autoplay="autoplay") – Sunetul, muzica va incepe automat.

controls (controls="controls") – Controalele audio (play / pauza, etc.) vor fi afisate.

loop (loop="loop") – Muzica va incepe din nou dupa ce se termina.

preload (preload="auto|metadata|none") – Specifica daca si cum va fi incarcat fisierul audio cand pagina se incarca. Atributul "preload" este ignorat daca se adauga "autoplay".
("auto" – incarca tot fisierul audio cand pagina se incarca; "metadata" – incarca numai metadata cand pagina se incarca; "none" – browser-ul nu ar trebui sa incarce fisierul audio cand se incarca pagina).

src (src="url") – Adresa URL a fisierului audio.

Elementul <audio> foloseste tag-ul <source> ca sa specifice sursa fisierului audio si fisiere alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP3; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV).

Exemplu:

Browser-ul dv. nu recunoaste tag-ul audio, dar puteti <a href="audio_file.mp3"> Descarca fisierul </a>.

</audio>

Textul dintre <audio> si </audio> va fi afisat in navigatoarele web care nu recunosc tag-ul audio. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <audio>, va fi afisat in acel loc un link de download.

HTML5 video tag – Tag-ul <video> este un element multimedia folosit pt. a adauga in pagina web video clipuri si alt continut video.

Tag-ul HTML5 <video> poate folosi aceste atribute:

autoplay (autoplay="autoplay") – Filmul /videoclip-ul va incepe automat.

controls (controls="controls") – Butoanele de control (play / pauza, etc.) vor fi afisate.

height (height="pixeli") – Inaltimea player-ului, in pixeli.

width (width="pixeli") – Lungimea player-ului, in pixeli.

muted (muted="muted") – Sunetul din film va fi pe mut, nu e redat.

poster (poster="URL") – Specifica o imagine care sa fie afisata in timp ce filmul se incarca, sau pana cand e apasat butonul play. Daca acest atribut nu e adaugat, va fi afisat primul cadru din film.

loop (loop="loop") – Filmul va porni de la inceput dupa ce se termina.

preload (preload="auto|metadata|none") – Specifica daca si cum va fi incarcat filmul cand pagina se incarca. Atributul "preload" este ignorat daca se adauga "autoplay".
("auto" – incarca tot fisierul video cand pagina se incarca; "metadata" – incarca numai metadata cand pagina se incarca; "none" – browser-ul nu ar trebui sa incarce filmul cand se incarca pagina).

src (src="url") – Adresa URL a fisierului video.

Elementul <video> foloseste tag-ul <source> ca sa specifice sursa fisierului video si fisiere alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP4; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV)

Exemplu:

Browser-ul dv. nu recunoaste tag-ul video, dar puteti <a href="video/video_file.mp4"> Descarca filmul</a>.

</video>

Textul dintre <video> si </video> va fi afisat in navigatoarele web care nu recunosc tag-ul video. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <video>, va fi afisat in acel loc un link de download.

HTML5 embed tag – Tag-ul <embed> se foloseste pentru a adauga in pagina aplicatii cu continut interactiv, cum sunt prezentarile flash SWF, plug-inuri, sau fisiere cu imagini.

Poate sa foloseasca aceste atribute:

height (height="pixeli") – Inaltimea cadrului in care e afisat continutul, in pixeli.

width (width="pixeli") – Lungimea cadrului in care e afisat continutul, in pixeli.

type (type="MIME_type") – Tipul MIME al continutului.

src (src="url") – Adresa URL a fisierului.

Exemplu:

Tag-ul canvas – Elementul <canvas> poate fi utilizat ca sa adauge in pagina desene grafice folosind script-uri (de obicei JavaScript), sau compozitii foto si animatii simple.

Atribute:

height (height="pixeli") – Lungimea cadrului canvas, in pixeli.

width (width="pixeli") – Inaltimea cadrului canvas, in pixeli.

Exemplu (creaza un patrat albastru):

Acest text e afisat daca browser-ul nu recunoste elementul HTML5 Canvas.

</canvas>

var canvas=document.getElementById('cvs1');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#0102fe';

ctx.fillRect(0,0,80,80);

</script>

Textul dintre <canvas> si </canvas> va fi afisat daca navigatorul web nu recunoaste canvas.

HTML5 figure tag – Tag-ul <figure> se foloseste pentru a adauga in pagina un grup de elemente care au un contint de sine statator, cum ar fi diagrame, poze, cod, etc. Continutul din elementul <figure> e atasat la derularea paginii, dar pozitia lui este independenta. Dace e sters nu ar trebui sa afecteze cursul paginii. Tag-ul <figure> poate sa contina elementul <figcaption> ca sa adauge o scurta descriere la ceea ce e adaugat in <figure>.

Exemplu:

<figcaption>Curs HTML: www.marplo.net/html/</figcaption>

</figure>

HTML5 hgroup tag – Tag-ul <hgroup> se foloseste pentru a grupa mai multe tag-uri H1 – H6.

Exemplu:

<h2>Bine ai venit pe www,narplo.net</h2>

<h3>Cursuri gratuite, Jocuri, Anime</h3>

</hgroup>

<p>Restul continutului…</p>

HTML5 mark tag – Tag-ul <mark> defineste un text marcat, se foloseste cand doriti sa scoateti in evidenta parti din text,

Exemplu:

<p>Cursuri gratuite si tutoriale: <mark>www.marplo.net</mark> pt. Web Development.</p>

Tag-ul progress – Elementul <progress> adauga in pagina o bara de progres. De obicei e folosit impreuna cu script-uri JavaScript. Poate folosi aceste atribute:

max (max="nr") – Specifica totalul de unitati din bara de progres.

value (value="nr") – Specifica numarul de unitati completate din bara de progres.

Exemplu:

Tag-ul ruby – Elementul <ruby> specifica o adnotare rubin. Adnotarile Ruby sunt folosite in scrierile din Asia de Est, pentru a arata pronuntia caracterelor est-asiatice. Acest tag se foloseste impreuna cu tag-urile <rt> si <rp>.

– <rt> – defineste o explicatie sau pronuntia caracterelor dintr-o adnotare rubin.
– <rp> – defineste ce sa afiseze daca navigatorul web nu recunoaste elementul <ruby>.

Exemplu:

<ruby>

漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>

</ruby>

Tag-ul WBR – Elementul <wbr> (Word Break Opportunity) specifica unde in text ar putea fi adaugat rand nou, indica: "Browser-ul poate adauga aici un rand nou daca e necesar". Daca browser-ul nu considera ca trebuie adaugat un nou rand, nu afecteaza cu nimic.
De exemplu, se poate folosi <wbr> ca sa adauge oportunitatea de rand nou la un cuvant prea lung, sau ca sa evitati adaugarea de catre browser a unui rand nou intr-un loc nepotrivit.

Exemplu:

<p>Pentru a crea Pagini<wbr>Web profesionale, un Web<wbr>Master ar trebui sa stie HTML si CSS.</p>

2.2 Descriere

2.2.1 Taguri de baza

Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Acestea se numesc in literaturatura de specialitate “TAG-uri”. Prin conventie, toate informatiile HTML incep cu o paranteza unghiulara deschisa “<” si se termina cu o paranteza unghiulara inchisa “>”.

Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.

Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:

-sectiunea de antet <head>…</head> si – corpul documentului <body>…</body>.

Blocul <body>…</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.

O eticheta poate fi scrisa atat cu litere mici, cat si cu litere mari.

Adica <HTML>=<HtmL>=<html>. Caracterele “spatiu”si “CR/LF” ce apar intre etichete sunt ignorate de catre browser.

Exemplu de prim document HTML:

<html>

<head>

</head>

<body>

</body>

</html>

2.2.2 Titlul unei pagini

Se obtine inserand numele in sectiunea <head>…</head>

Exemplu:

<title>Aceasta este prima mea pagina de Web</title>

Exemplu:

<html>

<head>

<title>Aceasta este prima mea pagina de Web</title>

</head>

<body>

Bine ati venit in pagina mea de Web!

</body>

</html>

Continutul blocului <title>…</title> va aparea in bara de titlu a ferestrei browser-ului. Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferestrei browser-ului va aparea numele fisierului.

Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa apara in pagina html. Aceasta comanda este marcajul <br> ( de la “line break”–inrerupere de linie).

Exemplu:

<html>

<head>

<title>titlul paginii</title>

</head>

<body>

Bine ati venit in <br> pagina mea de Web!

</body>

</html>

Fig. 14

2.2.3 Blocuri preformatate

Pentru ca browser-ul sa interpreteze corect caracterele “spatiu”, “tab” si” CR/LF” ce apar in cadrul unui text trebuie inclus intr-un bloc <pre>…</pre>.

<html>

<head>

<title>bloc preformatat</title>

</head>

Prima linie

A doua linie

A treia linie

</pre></body>

</html>

Fig. 15

2.2.4 Culoarea de fond

O culoare poate fi precizata in doua moduri:

Printr-un nume de culoare. Sunt disponibile cel putin 16 numere de culori : aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

Prin constuctia “#rrggbb” unde r (red), g(green), sau b(blue) sunt cifre hexazecimale si 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 pot defini astfel 65536 de culori.

Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei <body>.

Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei <body>, de exemplu : <body bgcolor=culoare>.

Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.

<html>

<head>

<title>culoare de fond</title>

</head>

O pagina Web cu fondul GRI!

</body>

</html>

Fig. 16

2.2.5 Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> dupa sintaxa <body text=culoare>. In urmatorul exemplu, textul are culoarea rosie.

<html>

<head>

<title>culoare textului</title>

</head>

Un text de culoare rosie.

</body>

</html>

Fig. 17

2.2.6 Etichete

O eticheta poate avea mai multe atribute. De exemplu, o eticheta cu trei atribute arata astfel : <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>. Urmatorul exemplu prezinta o pagina cu fondul de culoare albastru si textul de culoare galbena.

<html>

<head>

<title>atribute multiple </title></head>

<body bgcolor=blue text=yellow>Fond de culoare albastra si text de culoare galbena.

</body>

</html>

Fig. 18

Textul afisat este caracterizat de urmatoarele atribute: Marime ( size ), culoare ( color ), font ( style ). Acestea sunt atribute ale etichetei <basefont>. Este o eticheta singulara (fara delimitator de sfarsit de bloc).

unde :

numar – poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic si 7 pentru cel mai mare );

culoare – este o culoare precizata prin nume sau printr-oconstructie RGB;

font – poate fi un font generic ca “serif”, “san serif”, ”cursive”, “monospace”, “fantasy” sau un font specific instalat pe calculatorul clientului, ca “Times New Roman”, “Helvetica” sau “Arial”. Se accepta ca valoare si o lista de fonturi separate prin virgule, de exemplu :

“Times New Roman, serif, monospace”.

Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale etichetei <body> :

leftmargin ( stabileste distanta dintre marginea stanga a ferestrei browserului si marginea stanga a continutului paginii );

topmargin ( stabileste distanta dintre marginea de sus a ferestrei browserului si marginea de sus a continutului paginii );

Exemplu :

<html>

<head>

<title>Configurarea textului si stabilirea marginii</title>

</head>

Textul are atribute implicite. <br><basefont style=”Arial” color=”blue” size=”6”>

Textul este scris cu fontul “Arial”,culoare albastru si marime 6.</body>

</html>

2.3 Fonturi

Un font este caracterizat de urmatoarele atribute :

● culoare ( stabilita prin atributul color );

● tipul sau stilul ( stabilit prin atributul face );

● marimea ( definita prin atributul size )

● grosime ( definita prin atributul weight ).

● Toate aceste atribute apartin etichetei, care permite inserarea de blocuri de texte personalizate.

2.3.1 Culori

O culoare poate fi precizata in doua moduri:

-printr-un nume de culoare.

-printr-o constanta conform standardului de culoare RGB ( Red, Green , Blue). O astfel de constanta se formeaza astfel : #rrggbb, unde r, g si b sunt cifre hexazecimale.

2.3.2 Culoarea fontului

Pentru a scrie un fragment de text cu caractere de o anumita culoare se incadreaza acest fragment intre delimitatorii … avand stabilit atributul color la valoarea necesara.

3.3 Familia fontului

Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi ( stiluri de caractere ). Exista cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor : serif, sans serif, cursive, monospace si fantasy. Tipul de font necesar poate fi stability prin atributul face al etichetei. Pot fi introduce mai multe fonturi separate prin virgula.

In acest caz browserul va utiliza primul font pe care il cunoaste.

<html>

<head>

<title>Culoarea si familia fontului</title>

</head>

<body>

Aceasta linie este scrisa cu caractere normale.

<br>

<span style="color:red;">Aceasta linie este rosie.</span>

<br>Aici <span style="color:green;">fiecare</span>

<span style="color:blue;">cuvant</span>

<span style="color:pink;">culoare.</span>

<br>

<span style="font-family: Monospace;">Linie scrisa cu caractere monospatiate.</span>

<br>

<span style="font-family: Arial;">Linie scrisa cu caractere arial.</span>

</body>

</html>

Fig. 19

2.3.4 Marimea fontului

Pentru a stabili marimea unui font se utilizeaza atributul size al etichetei. Valorile acestui atribut pot fi :

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare );

+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;

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

Marimea unui font poate fi stabilita exact cu ajutorul atributului point-size.

Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numarul astfel precizat reprezinta marimea fontului in puncte tipografice. Acest atribut functioneaza numai cu Netscape Communicator.

<html>

<head>

<title>Marimea fontului</title>

</head>

<body>

Aceasta linie este scrisa cu caractere normale.<br>

<span style="font-size:20;">Fonturi de marime 20.</span><br>

<span style=font-size:12;">Fonturi de marime 12.</span><br>

<span style="font-size:32;">Fonturi de marime 32.</span><br>

<span style="font-size:18;">Fonturi de marime 18.</span><br>

</body>

</html>

Fig. 20

2.3.5 Grosimea unui font

Grosimea unui caracter poate fi definita cu ajutorul atributului weight al etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800, 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai gros).— fara valori doar cu bold

<html>

<head>

<title>Grosimea fontului</title>

</head>

Aceasta linie este scrisa cu caractere normale.<br>

<span style="font-weight: bold;">Fonturi cu grosime bold.</span><br>

</body>

</html>

Fig. 21

2.4 Blocuri de text

Aceste etichete nu se refera la particularitatile caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web.Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar.

2.4.1 Indentarea unui bloc

Pentru ca un bloc de text sa fie indentat (marginea din stanga a textului sa fie deplasata la dreapta la o anumita distanta fata de marginea paginii ), acesta trebuie inclus intre etichetele <blockquote>…</blockquote>.

<html>

<head>

<title>Indentarea unui bloc</title>

</head>

<body>

Textul ce urmeaza sa fie indentat: <blockquote> Aceste etichete nu se refera la particularitatile caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar. </blockquote>

</body>

</html>

Fig. 22

2.4.2 Blocul preformatat

Intr-un bloc <pre>…</pre>, semnificatia marcajelor HTML se pastreaza.

Blocul <pre>…</pre> este indicat pentru a insera randuri vide ( spatiu intre randurile succesive ).

<html>

<head>

<title>Bloc preformatat</title>

</head>

<body>

Orar: <pre>

Ora/Ziua Luni Marti Miercuri

8:00 Romana Matematica Sport

9:00 Geografie Istorie Fizica</pre>

</body>

</html>

Fig. 23

Intr-un fisier HTML, caracterele “<” si “>” au o semnificatie speciala pentru browser. Ele incadreaza comenzile si atributele de afisare a elementelor intr-o pagina. Daca dorim ca un fragment de text sa contina astfel de caractere , acest fragment trebuie incadrat de una dintre perechile de etichete :

<xmp…</xmp> ( 80 de caractere pe rand );

<listing>…</listing> ( 120 de caractere pe rand ).

Aceste marcaje interpreteaza corect caracterele “spatiu”, “eticheta” si “CR/LF”. Textul afisat in pagina este monospatiat.

<html>

<head>

<title>xmp si listing</title>

</head>

<body>

Un fisier html standard arata astfel : <xmp><html>

<head>

</head>

<body>

O pagina Web …

</body>

</html> </xmp> </body>

</html>

Fig. 24

2.4.3 Blocuri paragraph

Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua si permite :

– inserarea unui spatiu suplimentar inainte de blocul paragraf ;

– inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste

delimitatorul </p> ( acesta find optional ) ;

– alinierea textului cu ajutorul atributului align, avand valorile posibile “left”,

”center” sau “right”.

<html>

<head>

<title>Blocuri paragraf</title>

</head>

<body>

Prima linie

<div style="text-align:left;"> Linie generata de un paragraf ( implicit paragraful este aliniat la stanga).</p>

<div style="text-align:right;"> Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. </p>

<div style="text-align:center;"> Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. </p>

</body>

</html>

Fig. 25

2.4.4 Blocuri de titlu

Intr-un text titlurile ( headers ) de capitole pot fi introduce cu ajutorul etichetelor <h1>, <2>, <h3>, <h4>, <h5>, <h6>.

Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de incheiere similara. Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga ( in mod prestabilit ), in centru si la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari si aldine, pe cand <h6> foloseste caracterele cele mai mici.

<html>

<head>

<title>Blocuri de titlu</title>

</head>

<body>

<h1 style="text-align:center;">Titlu de marime 1 aliniat in centru </h1>

<h2 style="text-align:right;">Titlu de marime 2 aliniat la dreapta. </h2>

<h4>Titlu de marime 4 aliniat la stanga (implicit) </h4>

</body>

</html>

Fig. 26

2.4.4.1 Blocuri <div>

Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor <div>…</div>. Un parametru foarte util pentru stabilirea caracteristicilor unui bloc <div> ( diviziune ) este align ( aliniere ).

Valorile posibile ale acestui parametru sunt :

“left” ( aliniere la stanga );

“center” ( aliniere centrala );

“right” ( aliniere la dreapta ).

Un bloc <div>…</div> poate include alte subblocuri. In acest caz , alinierea precizata de atributul align al blocului are effect asupra tuturor subblocurilor incluse in blocul <div>;

Un bloc <div>…</div> admite atributul “nowrap” careinterzice intreruperea randurilor de catre browser.

<html>

<head>

<title>Blocul<div></title>

</head>

<body>

Aceasta linie este o linie normala. Urmatorul bloc este aliniat la dreapta.

O singura linie. O singura linie. O singura linie. O singura linie.<br>

</div>

Bloc aliniat pe centru.Bloc aliniat pe centru.<br>

</div>

</body></html>

Fig. 27

2.5 Imagini

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate de browsere pentru fisierele 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 raspandite formate sunt GIF( 8 biti pentru o culoare, 256 culori posibile) si JPEG ( 24 biti pentru o culoare, 16777216 de culori posibile ).

Adresa URL a unei imagini URL ( “Uniform Resourse Locator” = identificator unic al resursei ) este un standard folosit in identificarea unica a unei resurse in Internet.

Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la “image” = imagine ). Pentru a putea identifica imaginea care va fi inserata , se utilizeaza un atribut al etichetei <img> si anume src ( de la “source”= sursa ).

Ex :

2.5.1 Chenarul si dimensionarea unei imagini

Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei <img>. Valorile acestor atribute sunt numere intregi positive. O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul creearii ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate in momentul afisarii ei in pagina Web.

2.5.1.1 Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatoarele valori :

“left” – aliniere la stanga; celelalte componente sunt dispuse pe partea dreapta;

“right” – aliniere la dreapta; celelalte componente sunt dispuse pe partea stanga;

“top” – aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea;

“middle” – aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea;

“bottom” – aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.

Alinieri :

Pe verticala :

La mijloc: <img src=”w3.gif” align=”middle”>

Jos: <img src=”w3.gif” align=”bottom”>Text dupa imagine.

2.5.1.2 Imagini pentru fondul unei pagini

O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei< body>, avand ca valoare adresa URL a imaginii.

Imaginea se multiplica pe orizontala si verticala pana umple intregul ecran.

1

2

3

4

5

6

7

8

9

</body>

2.5.1.3 Imagini folosite ca legaturi

O legatura( link) introduce in pagina Web o zona active.

Efectuand click cu butonul mouse-ului pe aceasta zona in browser se va incarca o alta pagina.

Pentru a utilize imaginea “umb 1.jpg” drept legatura catre pagina index.html utilizam sintaxa:

In mod prestabilit imaginea utilizata pe post de activa este inconjurata de un chenar avand culoarea unei legaturi.

Daca stabilim pentru atributul border al etichetei <img> acest chenar dispare.

2.6 Tabele

2.6.1 Inserarea Tabelelor

Tabelele ne permit sa creeam o retea dreptunghiulara de domenii, fiecare domeniu avand propriile optiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.

Pentru a insera un table se folosesc etichetele corespondente <table>…</table>. Un tablel este format din randuri. Pentru a insera un rand intr-un table se folosesc etichetele <tr>…</tr> ( de la “table row”= rand de tabel ); folosirea etichetei de sfarsit </tr> este optionala. Un rand este format din mai multe cellule ce contin date. O celula de date se introduce cu eticheta <td>…</td>.

<html>

<head>

<title>tabel_ex3</title>

</head>

<body>

<h1 style="text-align:center;">Un tabel aliniat la dreapta</h1><hr>

Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de table. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.

Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.<br>

<tr>

</tr>

<tr>

</tr>

</table>

<br><br><br>Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.

</body>

</html>

Fig. 28

2.6.2 Chenarul unui tabel

In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tablel, se utilizeaza un atribut al etichetei <tabel> numit “border”. Acest atribut poate primi ca valoare orice numar intreg ( inclusiv 0 ) si reprezinta grosimea in pixeli a chenarului tabelului. Daca atributul “border” nu este urmata de o valoare atunci tabelul va avea o grosime prestabilita egala cu 1 pixel, o valoare egala cu 0 a grosimii semnifica absenta chenarului.

Cand atributul “border”are o valoare nenula chenarul unui table are un aspect tridimensional.

<html>

<head>

<title>tabel_ex2</title>

</head>

<body>

<h1 align=center>Un tabel simplu cu chenar</h1><hr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Fig. 29

2.6.3 Alinierea tabelului

Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul “align” al etichetei <table>, cu urmatoarele valori posibile : “left” ( valoare prestabilita), “center” si “right”. Alinierea este importanta pentru textul ce inconjoara tabelul.

Astfel :

daca tabelul este aliniat la stanga ( <table align=”left”> ), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului;

daca tabelul este aliniat la dreapta ( <table align=”right”> ), atunci textul care urmeaza dupa punctual de inserare al tabelului va fi dispus in partea stanga a tabelului;

daca tabelul este aliniat pe centru ( <table align=”center”> ), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi afisat pe toata latimea paginii, imediat sub table.

<html>

<head>

<title>tabel_ex3</title

</head>

<body>

<h1 align=center>Un table aliniat la dreapta</h1><hr>

Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de table. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.

Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.

<tr>

</tr>

<tr>

</tr>

</table>

Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel.

</body>

</html>

Distanta dintre tabel si celelalte elemente din pagina Web poate fi stabilita cu ajutorul atributelor “hspace” si “vspace” al etichetei <table>. Valoarea atributului “hspace” poate fi orice numar pozitiv, inclusive 0 si reprezinta distant ape orizontala dintre tabel si celelalte elemente ale paginii Web.

Valoarea atributului “vspace” poate fi orice numar pozitiv, inclusive 0, si reprezinta distanta pe verticala dintre tabel si celelalte elemente ale paginii Web. Aceste attribute functioneaza numai cu Netscape Communicator.

Fig. 30

2.6.4 Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu ajutorul atributului “bgcolor”, care poate fi atasat intregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>. Valorile pe care le poate primi “bgcolor” sunt cele cunoscute pentru o culoare. Daca in tabel sunt definite mai multe atribute “bgcolor”, atunci prioritatea este urmatoarea : <td>, <tr>, <table> ( cu prioritate cea mai mica ).

<html>

<head>

<title>tabel_ex4</title>

</head>

<body>

<h1 style="text-align:center;">Un tabel simplu colorat</h1><hr>

<tr>

<td style="color:purple;">purple 11</td>

</tr>

<td>albastru 21</td>

<td style="color:yellow;">galben 22</td>

</tr>

</tr>

<tr>

<td style="color:white;">white 41</td>

<td style="color:orange;">orange 42</td>

</tr>

</table></body>

</html>

Fig. 31

2.6.5 Dimensionarea celulei unui tabel

Distanta dintre doua celule vecine se defineste cu ajutorul atributului “cellspacing” al etichetei <table>. Valorile acestui atribut pot fi numere intregi positive, inclusive 0 si reprezinta distanta in pixeli dintre doua celule vecine. Valoarea prestabilita a atributului “cellspacing” este 2.

<html>

<head>

<title>tabel_ex5</title>

<html>

<head>

<title>tabel_ex5</title>

</head>

<body>

<h1 align=center>Un tabel fara chenar de celule alipite</h1><hr>

<tr>

<td bgcolor=”gray” style="color:gold;">auriu 11</td>

</tr>

<td style="color:violet;">violet 21</td>

<td bgcolor="pink" style="color:black;">negru 22</td>

</tr>

</table>

</body>

</html>

Fig. 32

Distanta dintre marginea unei celule si continutul ei poate definite cu ajutorul atributului “cellpadding” al etichetei <table>. Valorile acestui atribut pot fi numere intregi positive si reprezinta distanta in pixeli dintre celule si continutul ei. Valoarea prestabilita a atributului “cellpadding” este 1.

<html>

<head>

<title>tabel_ex6</title>

</head>

<body>

<h1 align=center>Un tabel de celule mari</h1><hr>

<style>

table,th,td

{

border:1px solid black;

}

</style>

</head>

<body>

<p>Table without cellpadding:</p>

<table>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

<p>Table with cellpadding:</p>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

</body>

</html>

Fig. 33

2.6.6 Dimensionarea unui tabel

Dimensiunile unui tabel – latimea si inaltimea – pot fi stabilite exact prin intermediul a doua atribute : “width” si “height”, ale etichetei <table>.

Valorile acestor atribute pot fi :

* numere intregi positive reprezentand latimea respectiv inaltimea in pixeli a tabelului;

* numere intregi intre 1 si 100, urmate de semnul %, reprezentand fractiunea din latimea si inaltimea totala a paginii.

<html>

<head>

<title>tabel_ex7</title></head>

<body>

<h1 align=center>Un tabel de 500 pixeli</h1><hr>

<tr><td width="25%">Column 1</td><td>Column 2</td></tr>

<tr><td>Column 1</td><td>Column 2</td></tr>

<tr><td>Column 1</td><td>Column 2</td></tr></table>

</table>

</tr>

</table></body></html>

Fig. 34

2.6.7 Titlul unui tabel

Unui tabel i se poate atasa un titlu cu ajutorul etichetei <caption> (de la “table caption”= titlu tabel). Aceasta eticheta trebuie plasata in interiorul etichetelor <table>…</table>, dar nu in interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi aliniat cu ajutorul atributului “align” al etichetei <caption> care poate lua una dintre valorile :

“bottom” ( sub tabel );

“top” ( deasupra tabelului );

“left” ( la stanga tabelului );

“right” ( la dreapta tabelului );

<html>

<head>

<title>tabel_ex8</title>

</head>

<body>

<h1 align=center>Un tabel cu titlu</h1>

<table border><caption align=”top”>Masini

<tr>

<td>Mercedes</td>

<td>Citroen</td>

<td>Jaguar</td>

</tr>

<tr>

<td>Volvo</td>

<td>Renault</td>

</tr>

</table>

</body>

</html>

Fig. 35

2.6.8 Cap de tabel

Un tabel poate avea celule cu semnificatia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la “tabel header”= cap de tabel) in loc de <td>. Toate atributele care pot fi atasate etichetei <td> pot fi desemenea atasate etichetei <th>. Continutul celulelor definite cu <th> este scris cu caractere aldine si centrat.

<html>

<head>

<title>tebel_ex9</title>

</head>

<body>

<h1 align=center>Un tabel cu titlu si cap de tabel</h1>

<table border><caption align=”bottom>Preturile masinii

<tr>

<th>Citroen</th>

<th>Jaguar</th>

<th>Volvo</th>

</tr>

<tr>

<th>In dolari

</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Fig. 36

2.6.9 Alinierea continutului unei celule

Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului “align” care poate lua valorile :

“left” ( la stanga );

“center” ( centrat – valoare prestabilita );

“right” ( la greapta );

“char” ( alinierea se face fata de un caracter ).

Alinierea pe verticala a continutului unei celule se face cu ajutorul atributului “align” care poate lua valorile :

“baseline” ( la baza );

“bottom” ( jos );

“middle” ( la mijloc – valoare prestabilita );

“top” ( sus ).

Aceste atribute pot fi atasate atat etichetei <tr> pentru a defini tuturor elementelor celulelor unui rand, cat si etichetelor <td> si <th> pentru a stabili alinierea textului intr-o singura celula.

2.6.10 Tabele de forme oarecare

Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelor <td> si <th>, o celula se poate extinde peste celule vecine.

Astfel :

Extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului “colspan”, a carui valoare determina numarul de cellule care se unifica;

Extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului “rowspan”, a carui valoare determina numarul de celule care se unifica.

Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. In acest caz , in etichetele <td> si <th> vor fi prezente ambele atribute “colspan” si “rowspan”.

<html>

<head>

<title>tabele_ex10</title>

</head>

<body>

<h1 align=center>Un tabel simplu cu chenar</h1><hr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Fig. 37

2.6.11 Celule vide ale unui tabel

Daca un tabel are celule vide, atunci aceste celule vor aparea in tabel fara un chenar de delimitare. In scopul e a afisa un chenar pentru celule vide se utilizeaza urmatoarele trucuri :

dupa <td> se pune “&nbsp”;

dupa <td> se pune <br>.

Caracterul “&nbsp”( no break space ) este de fapt caracterul spatiu. Un spatiu introdus prin intermediul acestui character nu va fi ignorat de browser.

<html>

<head>

<title>tabele_ex11</title>

</head>

<body>

<h1 align=center>Un tabel cu cellule vide</h1><hr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Fig. 38

2.6.12 Grupuri de coloane

Blocul <colgroup>…</colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt :

“span” determina numarul de coloane dintr-un grup;

“width” determina o latime unica pentru coloanele grup;

“align” detrmina un tip unic de aliniere pentru coloanele din grup.

Exemplu :

Intr-un bloc <colgroup>, coloanele pot avea configurari diferite daca se utilizeaza elemental <col>, care admite atributele :

“span” identifica acea coloana din grup pentru care se face configurarea. Daca lipseste, atunci coloanele sunt configurate in ordine

“width” determina o latime pentru coloana identificata prin “span”;

“align” determina o aliniere pentru coloana identificata prin “span”;

<html>

<head>

<title>tabel_ex13</title>

</head>

<body>

<h1 align=center>Grupuri de coloane</h1><hr>

<tr>

<td valign=top>Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana.

</td>

<td valign=top>Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in coloana a doua.

</td>

<td valign=top>Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia.

</td>

</tr>

</table>

</body>

</html>

Fig. 39

2.6.13 Atributele “frame” si “rules”

Atributul “frame” al etichetei <table> permite specificarea partilor din chenarul unui tabel care vor fi afisate.

Valorile posibile ale acestui atribut sunt :

Void – elimina toate muchiile exterioare ale tabelului;

Above – afiseaza o muchie in partea superioara a cadrului tabelului;

Below – afiseaza o muchie in partea inferioara a cadrului tabelului;

Hsides – afiseaza cate o muchie in partea superioara si inferioara cadrului tabelului;

Lhs – afiseaza o muchie in partea din stanga a cadrului tabelului;

Rhs – afiseaza o muchie in partea din dreapta a cadrului tabelului;

Vsides – afiseaza o muchie in partea din stanga si din dreapta a cadrului tabelului;

Box – afiseaza o muchie pe toate laturile cadrului tabelului;

Border – afiseaza o muchie pe toate laturile cadrului tabelului;

Atributul “rules” al etichetei <table> permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt :

None – elimina toate muchiile interioare ale tabelului;

Groups – afiseaza muchii orizontale intre toate grupurile unui tabel. Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot> si <colgroup>;

Rows – afiseaza muchii orizontale intre toate liniile tabelului;

Cols – afiseaza muchii verticale intre toate coloanele tabelului;

All – afiseaza muchii intre toate liniile si coloanele;

<html>

<head>

<title>tabele_ex14</title>

</head>

<body>

<h1 align=center>Atributele frames si rules</h1>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Fig. 40

2.7 Sintaxa CSS

Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de personalizare a paginilor Web. Un stil reprezinta un mod de a scrie un bloc de text ( adica anumite valori pentru font, marime, aliniere, distante fata margini etc ).

Exista doua modalitati de a defini un stil :

Sintaxa CSS ( Cascading Style Sheets );

Sintaxa JavaScript.

Cascading Style Sheets inseamna “foi in stilul cascada”.

2.7.1 Stiluri dedicate

Aceste stiluri se aplica blocurilor text pentru care sunt definite.

De exemplu :

<style>

H3{text-align:center; color:blue;}

</style>

Toate stilurile care apar in fisier ca fiind de marime 3 vor fi de culoare albastra si centrate. Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente (de ex. “h1”, “h2” si “p”) atunci se utilizeaza lista acestor elemente, separate prin virgule :

<style>

h1, h2, p{text-align:center; color:blue;}

</style>

2.7.2 Clase de stiluri

Aceste stiluri permit definirea unui stil general si folosirea lui oriunde este necesar. Definim o clasa de stiluri “ac” ( verde si centrat ) in interiorul blocului <style>…</style>,aflat la randul lui in blocul <head>…</head> :

<style>

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

</style>

Daca orim un titlu de marimea 4 sa foloseasca clasa de stiluri “ac” atunci scriem:

<h2 class = ac>Acesta este un header de marime 4 verde si centrat</h2>

“all” aflat in fata clasei de stiluri “ac” indica faptul ca aceasta clasa este aplicabila tuturor blocurilor de text, atunci cand acest lucru este necesar. La utilizarea clasei de stiluri in cadrul unui element se foloseste atributul “class” avand ca valoare numele clasei de stil. Acesta este un atribut universal, adica este aplicabila tuturor elementelor.

2.7.3 Stiluri “identificate”

Toate elementele unui document admite un atribut universal numit “id”. Atributul “id” poate identifica stilul utilizat de un element. Pentru a utilize un stil “identificat” procedam astfel :

in blocul <style>…</style> introduceti definitia stilului conform sintaxei :

<style>

#galben {color:yellow}

</style>

in elementul in care se doreste utilizarea locala a acestui stil, se foloseste atributul “id” care primeste valoare numele stilului definit anterior. Daca dorim ca un stil “identificat” sa fie aplicabil numai pentru anumite elemente ale documentului ( de exemplu “h2” ), atunci in constructia selectorului va aparea acest element ( de exemplu “h2#ac”).

2.7.4 Stiluri in-line

Stilurile in-line sunt definite chiar in eticheta ce initiaza blocul in care dorim sa se aplice aceste stiluri. Pentru aceasta se utilizeaza atributul universal “style” ( comun practic tuturor etichetelor ce apar intr-un document HTML ). Valoarea data atributului “style” este tocmai descrierea stilului, cuprinsa nu intre acolade {…} ci intre ghilimele “…”.

De exemplu :

Acest header de marimea 1 este de culoare negru si este centrat.</h2>

Daca dorim unui anumit style pentru un fragment de text, atunci includem acest text intr-un bloc cu ajutorul delimitatorilor <span>…</span>, dupa care utilizam atributul “style” pentru eticheta <span>.

2.7.5 Stiluri definite in fisiere externe

Stilurile definite in interiorul unui bloc <style>…</style> pot fi transferate intr-un fisier extern existand astfel posibilitatea utilizarii lor in mai multe fisiere HTML. Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel :

Se creeaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia .css sau .html. Continutul acestui fisier coincide cu continutul unui bloc <style>…</style>, fara ca acesti delimitatori sa fie inclusi. In fisierul HTML care utilizeaza stilurile definite in fisierul creeat la punctul 1, se include in blocul <head>…</head> o eticheta <link> avand trei atribute.

Atributul “rel” cu valoarea “stylesheet”;

Atributul “href” avand ca valoare adresa URL a fisierului creeat la punctul 1;

Atributul “type” cu valoarea “text/css”.

Se utilizeaza titlurile definite in fisierul extern ca si cum ar fi definite in fisierul HTML curent intr-un bloc <style>…</style>.

Bibliografie

[1] http://www.egirl.ro/lifestyle/tehnologie-si-internet/istoria-motoarelor-de-cautare-488

[2] http://en.wikipedia.org/wiki/Archie_search_engine, « The First Search Engine, Archie » .Archived from the original on 21 June 2007.Retrieved 2007-05-2006

[3] http://en.wikipedia.org/wiki/Archie_search_engine “In Russian : History of the Internet.The First Search Engine” Retrieved 2012-02-23

[4] http://en.wikipedia.org/wiki/Archie_search_engine “Peter Deutsch : archie – An Electronic Directory Service for the Internet” retrieved 2012-02-23

[5] http://www.savetz.com/articles/ibj_bunyip.php – Life Before (And After) Archie

[6] http://www.giz.ro

[7] www.microsoft.com

[8] www.worklance.com

[9] www.w3schools.com

[10] www.google.com

[11] www.Manastiri.ro

[12] www.Referate.ro

[13] Brian Danchilla, Beginning WebGL for HTML5, Apress 2012

[14] Matthew David, HTML5, Focal Press, 2011

[15] Ed Tittel, Chris Minnick, Beginning HTML5 and CSS3 For Dummies, For Dummies 2013

[16] Vanessa Wang, Frank Salim, Peter Moskovits, The Definitive Guide to HTML5 WebSocket, Apress 2013

[17] Matthew David, HTML5 Tag Structure, Focal Press 2013

[18] Bruce Lawson, Remy Sharp, Introducing HTML5, Second Edition, New Riders 2011

Bibliografie

[1] http://www.egirl.ro/lifestyle/tehnologie-si-internet/istoria-motoarelor-de-cautare-488

[2] http://en.wikipedia.org/wiki/Archie_search_engine, « The First Search Engine, Archie » .Archived from the original on 21 June 2007.Retrieved 2007-05-2006

[3] http://en.wikipedia.org/wiki/Archie_search_engine “In Russian : History of the Internet.The First Search Engine” Retrieved 2012-02-23

[4] http://en.wikipedia.org/wiki/Archie_search_engine “Peter Deutsch : archie – An Electronic Directory Service for the Internet” retrieved 2012-02-23

[5] http://www.savetz.com/articles/ibj_bunyip.php – Life Before (And After) Archie

[6] http://www.giz.ro

[7] www.microsoft.com

[8] www.worklance.com

[9] www.w3schools.com

[10] www.google.com

[11] www.Manastiri.ro

[12] www.Referate.ro

[13] Brian Danchilla, Beginning WebGL for HTML5, Apress 2012

[14] Matthew David, HTML5, Focal Press, 2011

[15] Ed Tittel, Chris Minnick, Beginning HTML5 and CSS3 For Dummies, For Dummies 2013

[16] Vanessa Wang, Frank Salim, Peter Moskovits, The Definitive Guide to HTML5 WebSocket, Apress 2013

[17] Matthew David, HTML5 Tag Structure, Focal Press 2013

[18] Bruce Lawson, Remy Sharp, Introducing HTML5, Second Edition, New Riders 2011

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Motoare de Cautare pe Web Si Elemente ale Limbajului Html (ID: 150060)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Motoare de Cautare pe Web Si Elemente ale Limbajului Html

Copyright Notice

Importanta Retelelor de Calculatoare din Prisma Utilizatorului Final

Lucrul cu Baze de Date la Distanta Sub Limbajul Java

Sistem Inteligent de Administrare a Traficului

Prezentarea Softului Femm (finite Element Method Magnetics)

Managementul Resurselor Intr O Retea de Calculatoare

Retele Neuronale

Copyright Notice

Similar Posts