7/21/2019 C1_AI_2011_12

1/7

C1 AI Limbajul HTML

Stocarea informaiilor pe Web este realizat sub un format special denumit HTML. entru a !izualiza opa"in Web aceasta trebuie s fie #n format HTML pentru ca bro$ser%ul s o poat traduce #n ima"ini& sunete& te'teetc.

HTML (HyperText Markup Language)a aprut la #nceputul anilor ()*& ca urmare a necesitii e'isteneiunui limba+ uni!ersal care s poat permite accesarea documentelor la ni!el "lobal. Crearea HTML a determinat

dez!oltarea spectaculoas a Internetului. Limba+ul HTML a aprut odata cu apariia Web%ului& fiind utilizat ca unlimba+ de ,comunicare, pe Web.

1. IstoricHTMLa fost dez!oltat iniial& #n anul 1)-)& de Tim erners%Lee /cercettor la Consiliul 0uropean pentru

Cercetare uclear %C02& laboratorul european pentru fizica particulelor de la 3ene!a4. Acesta fiind ne!oit s"aseasc o cale de a transmite informaii #ntre cercettorii din domeniul fizicii ener"iilor #nalte din diferite zone"eo"rafice 5i totodat de a "si o modalitate de a simplifica procesul de "sire a informaiilor pe Internet a propus,un sistem hypertext, de comunicare #ntre calculatoare. Acest sistem crea posibilitatea s se le"e documente prinintermediul unei reele de calculatoare& pentru utilizarea #n comun a rezultatelor cercetrilor 5tiintifice. C02 apromo!at Web%ul& urmrind e!entuala sa dez!oltare de la o reea local la o reea "lobal& accesibil #n #ntrea"alume. Web%ul a fost utilizat public pentru prima oar #n ianuarie 1))6& la 3ene!a& oferind acces la datele e'istente #nsite%urile Web ale C02. 7n cadrul acestui proiect documentele erau stocate pe unul sau mai multe calculatoare&numite ser!ere Web& iar acces la acestea se realiza utiliz8nd un pro"ram special numit bro$ser Web. Astfel prin

intermediul Internet%ului utilizatorii se puteau conecta la un ser!er Web pentru a solicita anumite documente Web.Ser!erul Web ca rspuns& li!ra documentul utilizatorului& acesta put8nd s%l parcur" 5i s%l afi5eze cu a+utorulpro"ramului browser. 9n ser!er putea rspunde la cererile mai multor utilizatori #n acela5i timp. In aprilie 1)):&dupa aproape un an 5i +umatate numrul ser!erelor a a+uns la peste un milion.

Web%ul este utilizat de ctre bro$ser%ul utilizatorului pentru a putea !izualiza pa"inile de pe Internet. Acestepa"ini conin #n principal informaii sub form de te't dar 5i sub form !ideo /ima"ini statice sau animaie4 sauaudio.

2. Trsturile limbajului HTMLHTML%ul este un set de con!enii pentru marcarea poriunilor de document astfel #nc8t fiecare poriune s apar

cu format distinct atunci c8nd documentul este accesat de un pro"ram de analiza sintactica /parser4. HTML estelimba+ul de marcare ce stabile5te aspectul documentelor /orld ide eb4& iar prin intermediul bro$ser%elor se poate !edea documentul "ata formatat.

e parcursul anilor& limba+ul a e!oluat& oferind cu fiecare !ersiune noi faciliti.

La acest limba+ se remarc c8te!a trsturi cum ar fi; independena de platform/modul de afi5are al documentului este acela5i& indiferent de calculator&

adic cu acela5i font& "rafic 5i culori4< structurarea formatrii< posibilitile hypertext /orice cu!8nt& ima"ine sau alt element al documentului !izualizat de

utilizator poate fi referin la un alt document& ceea ce u5ureaz na!i"area #n cadrul aceluia5i document sau#ntre documente diferite4.

HTML este un limba+ simplu& compus din coduri speciale /marcaje4 care se insereaz #ntr%un te't pentru aadau"a informaii despre formatare. 0ste deri!at din SGML (Standard Generalized Markup Lanuae!& un sistempentru definirea tipurilor de documente structurate& destinat s reprezinte instae ale acestor tipuri de documente. Labaza SGML5i a"#MLse afl acela5i principiu; descrierea coninutului unui document se face #ntr%un fi5ier te'tobi5nuit /ASCII4. S%a urmrit ca aceste fi5iere s poat fi create cu editoare de te't simple cum este de e'emplu

otead 5i Wordad. Modul de apelare al acestui editor este prezentat #n fi"ura 6.

=i"ura 6. Apelarea editorului otepad

7/21/2019 C1_AI_2011_12

2/7

9n document HTML este un fi5ier te't cu e'tensia !tml sau !tm& cu urmtoarea sinta';,numefi5ier.>tml,. 9n sin"ur incon!enient al realizarii pa"inilor Web cu a+utorul editoarelor de te'te este faptul ctrebuie cunoscut limba+ul HTML.

entru a putea !izualiza un pro"ram scris #ntr%un editor oarecare se !a proceda #n modul urmtor;1. se copiaz pro"ramul cu 0dit?Cop@6. se desc>ide otepad prin Start?ro"rams?Accessories?otepad:. se transfer pro"ramul #n otepad cu 0dit?aste

. se sal!eaz pro"ramul cu e'tensia .>tmlB. se porne5te etscape a!i"ator sau Internet 0'plorer 5i se parcur"e urmtoarea sec!en& dup cum sepoate !edea #n fi"ura : ;

a4 se d "T#L$% 5i se desc>ide fereastra %pentmlG 5i se termin cu F?>tmlG. Aceste marca+e se numesc #nliteratura de specialitate tag-uri /adic marca+ #n limba en"leza4& scrise #ntre paranteze un">iulare de forma&nume'marcaj. rin con!enie& toate marca+ele HTML #ncep cu o parantez un">iular desc>is ,F, 5i se termincu o parantez un">iular #nc>is , G ,. arantezele un">iulare sunt elementele care indica prezena unui marca+.umele marca+elor poate fi scris oricum& limba+ul nefiind senziti! la literele mari?mici /case sensiti)e4& adicF>tmlG FHTMLGFHtmlGFHtmLG.

Caracterele ,spaiu, 5i ,*+#*,, ce apar #ntre marca+e sunt i"norate de ctre browser.Marca+ele dintre aceste paranteze transmit comenzi ctre bro$ser pentru a afi5a pa"ina #ntr%un anumit mod.

Aceste marca+e sunt de dou tipuri; indi!iduale /e'. &br4 perec>i /e'. &p---&.p4 % de mentionat c sf8r5itul unui marca+ este indicat prin utilizarea

caracterului ,?, #n faa numelui de marca+.7n funcie de modul de formatare a pa"inii& a!em marca+e de tip;

blocD; este afi5at sub elementul anterior /e'. &p4 inline; este afi5at dupa elementul anterior /e'. &span4 table; este afi5at sub forma unui tabel.

7/21/2019 C1_AI_2011_12

3/7

Marca+ele de tip perec>e pot fi imbricate;&nume'marcaj%&nume'marcaj/

----------------&.nume'marcaj/&.nume'marcaj%

ro$ser%ul i"nor marca+ele 5i opiunile pe care nu le recunoa5te.

9nele marca+e permit utilizarea unor atribute care se !or scrie #n marca+ul de #nceput;&nume'marcaj optiune%0)aloare% optiune/0)aloare/ ---................&.nume'marcaj

*. +tructura unui program9n document HTML are urmtoarea structur;

1. seciunea de antet "*12& delimitata de marca+ele ,H-/0 ,H-/02. seciunea cu coninutul documentului 3425& delimitata de marca+ele ,&%/30 ,&%/30 sau

F=2AM0S0TG F?=2AM0S0TGro"ramul HTML prezentat #n fi"ura prezint structura cadru HTML. Jizualiz8nd acest pro"ram Internet

0'plorer !a arta o pa"in "oal.

=i"ura . Structura unui pro"ram HTML

*.1. +ec4iunea 5e antetSeciunea de antet este cuprins #ntre marca+ele ,!ea50 ,!ea50. Informaiile cuprinse #n aceast seciune

nu !or fi afi5ate de bro$ser& cu e'cepia marca+ului ,title0. Marca+ul ,title0este obli"atoriu 5i poate apare doar #nseciunea H-/. 0l !a conine un titlu rele!ant pentru pa"in& fiind deosebit de important pentru motoarele decutare.

Eintre marca+ele care nu sunt afi5ate de bro$ser e'istente #n seciune H-/ sunt; ,M-T0% poate conine cu!inte c>eie& o descriere a pa"inii& numele autorului pa"inii& frec!ena

/teoretic4 cu care motoarele de cutare ar trebui s reinde'eze pa"ina& etc. Eeclaraiile M0TA implic #n"eneral declararea unei proprieti 5i a !alorii asociate acelei proprieti.,M-T 6M-78nume8 "%6T-6T78continut80

,base0% stabileste 92L%ul de ,baza, al documentului. Toate referinele din documentul respecti! !or fidesc>ise relati! la marca+ul &base. /&a href06nume'paina-html6&.a& respecti!

&im src06nume'imaine-if64

,!ea50 ,base !re978!ttp:'''.ace.uc;.roin5ex.p!p8 target781> "-80

,M-T name78key'or5s8 content78curs? !tml? anul

7/21/2019 C1_AI_2011_12

4/7

Marcatorii e'isteni #n aceast seciune sunt #n numr de & ,!10? ,!20? ,!0? ,!*0? ,!B0? ,!C0prezentai#n fi"ura & indic8nd dimensiunea de scriere a te'tului pentru a da posibilitatea e!idenierii titlului pa"inii fa de altete'te din pa"in.

"o5ul pentru e5itorul 6otepa5 @iDualiDarea 5e Internet -xplorer

F>1G 2I0CT F?>1G E#%I-"TF>6G 2I0CT F?>6G EroiectF>:G 2I0CT F?>:G roiectF>G 2I0CT F?>G roiectF>BG 2I0CT F?>BG Eroiect

F>G 2I0CT F?>G Eroiect

=i"ura . Marca+e folosite #n seciunea de antet

Eac introducem mai multe linii de te't #ntr%o pa"in de pro"ram& bro$ser%ul !a afi5a te'tul pe un sin"urr8nd& #ntruc8t caracterele ,0T02, sunt i"norate de acesta.

Trecerea pe o linie nou se face la comanda e'plicit prin marca+ul ,br0/de la ,line breaD, care #nseamn#ntrerupere de linie4 care trebuie s apar #n pa"in.

entru centrarea titlului #n cadrul pa"inii se folose5te marca+ul ,center0iar pentru terminarea aciunii seutilizeaz ,center0.

Ca #n orice limba+ de pro"ramare 5i #n HTML e'ist posibilitatea de a introduce comentarii& folosind marca+ul,F$$ textul comentariului $$0

=olosind marca+ele prezentate pro"ramul !a arata ca #n fi"ura.

=i"ura . 9tilizarea marca+elor seciunii de antet

*.2. +ectiunea &%/3Aceast seciune este cuprins #ntre marca+ele &body------ &.body5i poate a!ea urmtoarele atribute;

&body 7 3189G,4:+206adresa'imaine6; 7 3G84L4,06#06

,!tml0

,!ea50

,title0,center0E#%I-"T,center0,title0

,!ea50

,bo5y0

...........

,bo5y0

7/21/2019 C1_AI_2011_12

5/7

culoare poate fi precizat #n dou moduri; printr%unnume de culoare& conform sinta'ei;

,!tml0

,!ea50

,title0 "urs HTML ,title0

,M-T name78aut!or8 content78"amelia Maican80

,M-T name78copyrig!t8 content78= 2>1> "-80

,M-T name78key'or5s8 content78curs? !tml? anul topmargin7>0

,FLinia prece5ent nu este a9iJat 5e bro'ser $$0

,p0Textul primului paragra9 ,p0

,p0Textul urmtorului paragra9 ,p0

,bo5y0 ,Fcest marcaj 5e s9KrJit al corpului 5ocumentului nu este

obligatoriu 0

,!tml0

7/21/2019 C1_AI_2011_12

6/7

culoareK poate fi precizat prin nume sau constant 23< fontK poate fi un font "eneric ca ,Times e$ 2oman,& ,Hel!etica, sau ,Arial, < se

accept ca !aloare 5i o list de fonturi separate prin !ir"ula& de e'emplu ; , Times e$ 2oman&Hel!etica& serif& courier,.

Acest marca+ este sin"ular& fr delimitator de sf8r5it de bloc. Eomeniul de !alabilitate al caracteristicilorprecizate de aceast etic>et se #ntinde de la locul #n care apare marca+ul p8n la sf8r5itul pa"inii sau p8n la un noumarca+ ,base9ont0.

Eac acest marca+ lipse5te atunci te'tul din pa"ina Web are atributele implicite stabilite de bro$ser%ul utilizat.Atributele implicite sunt;size 0 C color 0 black5istyle 0 ,Times 6e' #oman,.7n e'emplul din fi"ura a aparut un marca+ nou ,p0/para"raf4. entru formatarea te'tului pot fi folosite

diferite stiluri utiliz8nd urmtoarele marca+e; ,b0...,b0% blocul de te't apare cu caractere #n"ro5ate ,i0...,i0% blocul de te't apare cu caractere inclinate ,u0...,u0% blocul de te't apare cu caractere subliniate ,s0...,s0% blocul de te't apare cu caractere ,taiate, ,pre0...,pre0% marca+ul de informie preformatat

o conser!a toata caracterele 5i spaierile de liniio utilizeaz un font diferit /Courier4

,sup0...,sup0 % sec!en de te't aliniat ca e'ponent ,sub0...,sub0 % sec!en de te't aliniat ca indice ,br0% te'tul dup acest marca+ este trecut pe o linie nou 5i poate apare oriunde #n

te't ,!r0% traseaz o linie subire orizontal

ro"ramul din fi"ura - e!ideniaz efectele marca+elor menionate mai sus.

". ontul unui textTe'tul scris pe o pa"in poate fi realizat utiliz8nd di!erse fonturi /stiluri de caractere4 pentru care se !or

preciza atributele. 7n cazul #n care sunt utilizate mai multe fonturi& acestea !or fi separate prin !ir"ul.9n font este caracterizat de urmtoarele atribute;

o 8uloarea& stabilit prin atributul color& se precizeaz prin dou moduri similar culorii te'tului