7/30/2019 103894966 Documentatie C

1/24

Breviar teoretic

Introducere

HTML este limbajul n care sunt scrise paginile web. Paginile web sunt fisiere cu extensia.html sau .htm care rezida, de obicei, pe serverele de internet, dar care pot rezida si pe calculatoruldumneavoastra.

HTML este acronimul de la HyperText Markup Language, care e numele unui limbaj demarcare ce a nlocuit SGML-ul. A fost conceput n 1989 de Tim Berners-Lee (v. foto) , licentiat laOxford, pe atunci fizician la CERN. Fiind si expert n software, Berners-Lee e acum director alWorld Wide WEb Consortium (pe scurt, W3C), adica al organizatiei care coordoneaza dezvoltareaweb-ului (n principal, prin impunerea de standarde pentru limbaje etc.). HTML-ul a cunoscut opopularitate rapid, aproape toate paginile web fiind scrise n acest limbaj.

Fiind un limbaj de marcare, HTML nu utilizeaza instructiuni (ca Pascal-ul sau C-ul) ori comenzi (caFox-ul), ci etichete, acestea fiind numite si balize, elemente sau tag-uri. Sintaxa oricarui tag este:

Text

In unele cazuri, atributele pot lipsi. In altele, poate lipsi tag-ul de nchidere: O pagina webpoate contine:

text

imagini

fisiere audio

fisiere video

Paginile web se vizualizeaz n browsere, care sunt niste programe de vizitare. Cele mai populare

browsere sunt: Netscape Navigator, care a cunoscut mai multe versiuni, cele mai reusite fiind 4.75 si 4.76

care aveau, totusi, defectul ca nu suportau diacriticele. Acestora le-a urmat versiunea 6.0 caresuporta diacriticele.

Microsoft Internet Explorer, care a ajuns la versiunea 6.2.

In 2001, a aparut browserul Opera, deocamdat putin folosit. Unii folosesc Lynx care, fiind unbrowser negrafic, nu recunoaste imaginile, ceea ce duce la o ncarcare mult mai rapida a textului.Informatii suplimentare despre browsere gasiti la adresa

Dupa tastarea adresei si apasarea tastei "Enter", browserul dvs. i trimite serverului geocities.comcererea de a i se furniza o pagina web. In cazul a, serverul trimite pagina sa proprie. In cazul b,trimite pagina index.html a sitului dioan12 pe care l gazduieste gratuit. In cazul b, ar fi trimis fisierulindex.html si daca tastam doar: http://www.geocities.com/dioan12 deoarece, n mod implicit, laaccesarea unui sit se ncarc fisierul index.html. (Nota: Nestiind ce sistem de operare e instalat peserverul pe care intentioneaza sa faca upload-ul sitului propriu, unii webdesigneri salveaza fisierulindex.html si ca index.htm, default.htm, default.html. Dupa care fac upload-ul tuturor acestor fisiere,urmnd ca serverul sa furnizeze clientilor, la accesarea sitului, unul dintre aceste 4 fisiere. Dacasunteti ncepator, nu va bateti nsa prea tare capul cu aceste chestiuni.)

1

7/30/2019 103894966 Documentatie C

2/24

Breviar teoreticVom folosi, n paginile urmatoare, termenul de sit si nu cel de site, din urmatoarele motive:

1. Etimonul sau este latinescul situs, care desemna un loc geografic.

2. Varianta sit e prima aparuta n limba romna. Figureaza, de exemplu, n cartea "Omul saunatura?" de Edouard Bonnefous (Editura Politica, Bucuresti, 1976, traducator Adrian Costa,),iar n anii '80, era vehiculata n presa culturala din Romnia. Circulatia sa era, asadar,restrnsa la mediile cultivate, n timp ce varianta site e folosita azi pe scara larga.

Intr-un fisier html, se pot include:

programe n JavaScript

scripturi CSS

tag-uri care sa seteze parametrii unui applet (program scris n Java si care rezida pe retea)

Un fisier html se poate realiza:

manual, scriind tag dup tag n Notepad

cu ajutorul editoarelor HTML precum Homesite, Adobe Golive, Microsoft Frontpage '98

sau 2000, Macromedia Dreamweaver (aplicatia cea mai apreciata de profesionisti),CoffeeCup HTML Editor , Netscape Composer (recomandat doar ncepatorilor), NoteTabLight sau 1st Page 2000 . Ultimile trei sunt distribuite freeware (gratuit). Dealtfel, de pesiturile de download puteti descrca un mare numr de editoare HTML, unele n regimfreeware, altele n regim shareware. Editoarele v usureaz munca, dar nu v nvat HTML,as c e de dorit s le evitati la nceputul activittii dvs. de webdesigner.

Cum realizm prima pagin web ?

Alocati un director sitului pe care intentionati s-l realizati.

Click pe butonul Start, apoi pe Programs, Accessories, Noteped.

Introduceti textul si etichetele.

Salvati fisierul cu extensia .htm sau .html n directorul dedicat. Fisierul va aprea ca, szicem, istoric.htm.

Deschideti fisierul istoric.htm n Microsoft Internet Explorer. Pentru a aduce modificarifisierului, executati click-dreapta pe suprafata acestuia si veti obine codul-sursa. Dupamodificarea fisierului, salvati-l.

Dou ultime observatii:

1. HTML-ul e independent de platform.

2. HTML-ul nu e un limbaj case-sensitive, asa c putem scrie la fel de bine , , sau etc., pentru ca n HTML nu se face distinctia ntre literele mari si celemici.

Ancora

Este una dintre cele mai importante etichete. Produce legarea de alt pagin a elementului ncadrat.

2

7/30/2019 103894966 Documentatie C

3/24

Breviar teoreticExemplu :

Click aici !Intre primele doughilimele e dat calea pn la documentul-tint, n cazul nostru fisierul CV.htm din directorul texte.Acest fisier va fi deschis n fereastra numit "new". Aceast fereastr poate fi una deja existent sauuna creat pe loc. Dac atributul target lipseste, fisierul CV.htm va fi deschis n fereastra fisieruluiapelant, adic n locul paginii n care v aflati. Atributul title produce aparitia unui dreptunghi

continnd un text, atunci cnd mouse-ul trece peste un link. In cazul nostru, textul va fi "CV-ulmeu".

Asadar, elementul suport urmtoarele atribute:

Atributul href indic URL-ul fisierului (adresa acestuia). Adresa poate fi absolut saurelativ.

Atributul type indic tipul fisierului (.html, audio, video etc.)

Atributul title furnizeaz o scurt descriere a fisierului.

Atributul target precizeaz fereastra n care va fi ncrcat fisierul. Sunt curente urmtoarelenotatii:

o target="_blank" : fisierul se ncarc ntr-o nou fereastr, fr nume

o target="_self" : fisierul se ncarc n fereastra curent

o target="_top" : fisierul se ncarc n ntreaga fereastr a navigatorului, nemprtit nframes

o target="_parent": fisierul se ncarc n fereastra ce e printele ferestrei care continelink-ul

Cuvintele parent, top, self, blanksunt cuvinte rezervate. Atributul name marcheaz destinatia link-ului. Folosit, de obicei, pentru navigarea n cadrul

aceleiasi pagini.

Atributul hreflang precizeaz limba n care e scris fisierul legat. Atribut putin uzual.

Atributul accesskey ia o valoare care este un caracter. Link-ul poate fi accesat apsndsimultan tasta "Alt" si tasta corespunztoare caracterului respectiv.

Atributul style ajut la realizarea unui control mai fin asupra link-ului, a crui culoare poatefi setat astfel. Evident, aceasta presupune folosirea CSS.

3

7/30/2019 103894966 Documentatie C

4/24

Breviar teoretic

Etichete uzuale

Html, head, titleOrice fisier ncepe cu eticheta si se termin cu eticheta . Fisierul e compus din:

1. header, inclus ntre etichetele si

2. corp, inclus ntre etichetele si

In linii mari, un fisier numit index.html va arta ca n dreptunghiul alturat. Din toate aceste linii decod, browserul va afisa doar: Bla-bla-bla. Textul "Pagina lui Georgica" nu va aprea n pagin, ci nbara de titlu (deasupra meniurilor). Dac etichetele sunt continute n head, ntre acestea se va trecenumele fisierului. Acest nume nu va fi afisat n fereastr, ci deasupra barei de meniuri. Dar titlepoate fi ntlnit nu numai ca tag propriu-zis, ci si ca atribut al unui alt tag, asa cum puteti vedea maijos.

Body

Acest tag nu poate lipsi din nici o pagin web.

Culoarea paginiiva fi gri (stabilit prin bgcolor="#C0C0C0"), link-urile vor fi rosii, link-ul activ albastru iar link-urilevizitate verzi. Textul va fi afisat cu negru. De multe ori , nu se precizeaz culoareafundalului/textului/link-urilor, ceea ce conduce la afisarea u nui fundal alb, a unor fonturi negre si aunor link-uri albastre. Aceasta e setarea implicit. Se observ c orice culoare poate fi exprimat attprintr-un cuvnt, ct si printr-un set de 6 caractere precedate de diez (#). Aceast notatie se datoreazexistentei unui sistem bazat pe rosu, verde si albastru (Red, Green, Blue). Sistemul se numeste RGB.In acest sistem, fiecare component are o valoare cuprins ntre 00 si FF. Impreun, valorile celortrei componente alctuiesc un sistem de 6 caractere. Tag-ul de sus poate fi scris si ca:

Pentru a seta marginile de sus si de jos ale paginii la valorile de 5, respectiv 10 pixeli, vom scrie:

Topmargin ne da distanta dintre partea de sus a paginiisi partea de sus a ferestrei.Bottommargin distanta dintre partea de jos a paginii si partea de jos a ferestrei.Leftmargin ne da distanta dintre partea din stanga a paginii si partea din stanga a ferestrei. In modobisnuit, aceste atribute ale tagului iau valori nule, astfel nct textul si imaginile s umpletot spatiul ferestrei. Pentru a va lamuri in privinta acetor atribute, realizati o pagina web cu foartemult text si dati diferite valori atributelor discutate. Binenteles, toate aceste caracteristici pot fi

setate n cadrul aceluiasi tag : Intre ghilimele, se va trece valoarea fiecaruiatribut.

Cnd fundalul e o imagine,aceasta se poate ncrca greu. De aceea, se prefer scrierea unei secvente precum cea de mai sus.Efect: pn la ncrcarea imaginii marmura.gif, care va constitui fundalul, surferul va vedea unfundal de culoare verde. Textul va aprea, att pe fundal verde ct si pe marmur, afisat cu caracterealbe.

4

7/30/2019 103894966 Documentatie C

5/24

Breviar teoreticPrint.htm Bla-bla-bla......bla

Se observ definirea n header a functiei scroller() si apelarea acesteia n cadrul tag-ului .

Functia va fi executat la ncrcarea complet a documentului. Pagina web se va deplasa n sus. Dacns sunteti nceptor, nu v bateti prea tare capul cu atributul onload al tag-ului discutat. Si nici cuatributul onunload, care are ca valoare numele functiei ce se execut la prsirea documentului.Acest al doilea atribut e rar folosit. Binenteles, n locul functiei scroller poate fi orice alt functiecorect definit.

Concluzie: Tag-ul are sintaxa generala: Oricare dintre aceste atribute poate lipsi.

Formatarea textului

Font Font Font Font Font

Atributul face ia o valoare care e numele fontului. Atributul size indic mrimea corpului de liter sipoate lua valori ntre 1 si 7, valoarea implicit fiind 3. Atributul color precizeaz culoareafontului.Codul culorilor poate fi gsit la webdiner.com. Pentru ca un anumit tip de fonturi s poat fiafisat n pagin, trebuie ca acesta s fi fost instalat deja pe calculatorul vizitatorului. De aceea, desiwebdesigner-ii produc nencetat noi tipuri de font, e de dorit s folositi n paginile dvs. fonturileobisnuite (Times New Roman, Arial, Courier, Impact). Efectul secventei de cod de mai sus:

Font Font Font Font FontEfectul este afisarea a diferite tipuri de fonturi:Arial, Impact, Courier, Comic Sans MS. Acesteasunt fonturi comune, ce pot fi afisate de orice PC. Pe lng acestea, puteti gsi pe web nenumratealte tipuri de font, gratuite sau nu.

Se recomand prudent fat de acestea, deoarece vizitatorul va trebui mai nti s instaleze pe PC-ulsu noul font, abia apoi urmnd afisarea paginii. Dac pagina dvs. e foarte interesant, e posibil sfac acest lucru. Dar nu e bine s contati pe rbdarea sa. In general, se recomand prudent nfolosirea atributului face.

5

http://www.webdiner.com/annexe/hexcode/hexcode.htmhttp://www.ilovethisplace.com/webdesign/fonts.htmlhttp://www.ilovethisplace.com/webdesign/fonts.htmlhttp://www.myfonts.com/category/myfonts/index.htmlhttp://alis.isoc.org/web_ml/html/fontface.en.htmlhttp://www.webdiner.com/annexe/hexcode/hexcode.htmhttp://www.ilovethisplace.com/webdesign/fonts.htmlhttp://www.myfonts.com/category/myfonts/index.htmlhttp://alis.isoc.org/web_ml/html/fontface.en.html

7/30/2019 103894966 Documentatie C

6/24

Breviar teoreticFontEfect:

Font.Fontul ABC nu exist. L-am introdus ns din necesitti de ordin didactic. In locul su, putetiintroduce orice alt nume de font. Dar pe lng ABC, am precizat alte dou nume de fonturi (Impactsi Arial). De ce ? Cum pe masina dvs nu e instalat tipul ABC, browser-ul va afisa textul cu Impact.

Dac nici acesta nu ar fi fost instalat, s-ar fi recurs la al treilea tip de fonturi (n cazul nostru, Arial).Aceste tag-uri seteaz mrimea fonturilor. Tag-ul e cel mai mare, iar e cel mai mic.Caracterele cuprinse ntre (sau etc) si tag-ul corespunztor de nchidere vor apreangrosate, iar textul ce urmeaz tag-ului de nchidere va trece automat dou rnduri mai jos. Deaceea, aceste tag-uri sunt recomandate pentru titluri si subtitluri.

Produce ngrosarea elementului ncadrat de si . Elementul ncadrat de si va apreanclinat (cu italice). Elementul ncadrat de si va aprea subliniat.

Tag-urile br,p,div

Produce asezarea n centrul paginii a elementului ncadrat.Exemplu: Salut !In browser, veti vedea cuvntul Salut !, afisat n centrul paginii.

Provine din englezescul break si produce ruperea rndului si trecerea pe rndul urmtor.

Interzice trecerea pe rndul urmtor.

Produce trecerea nu pe rndul urmtor, ci pe cel care i urmeaz acestuia.Exemplu:

Pesti exotici din Caraibe

In loc de left, putem avea right sau left. Valoareaimplicit este left.

ListeIndic un element dintr-o list (ne)numerotat.Exemplu:

Acest tag suport atributele:

Atributul type: poate lua valorile disc, circle, square sau A, A, I, i, 1. Folosit n listelenenumerotate.

6

7/30/2019 103894966 Documentatie C

7/24

Breviar teoretic Atributul value: precizeaz valoarea numeric a elementului din list considerat.

Folosit n listele numerotate.

List numerotat.Exemplul 1:

Atributul start precizeaz valoarea de la care pleac numerotarea elementelor din list.

List nenumerotat.Exemplul 1: CireseVisinePepene

Are loc afisarea urmtoarei liste:

Cirese

Visine

Pepene

Atributul type mai poate lua valorile disc sau circle.

Exemplul 2: FructeMerePereCitrice

LamaiGrapes

Aceast secvent de cod produce ncuibarea unei liste cu citrice n lista cu fructe:

Fructe

Mere

Pere

Citrice

1. Lamai

2. Grapes

Linia orizontal

7

7/30/2019 103894966 Documentatie C

8/24

Breviar teoreticProduce afisarea unei linii orizontale.

Exemplul 1:

Aceast secvent de cod produce afisarea urmtoarei linii:

Atributul size precizeaz grosimea n pixeli a liniei.

Atributul width precizeaz ct din ltimea ferestrei va ocupa linia. Se poate exprimaprocentual (ca mai sus) sau n pixeli.

Atributul noshade lipseste linia de relief.

Atributul color precizeaz culoarea liniei. Oricare dintre aceste atribute poate lipsi.

SimboluriDiacritice

Codul

Reprezentarea

, , ,

, ,

, , ,

, , ,

, , ,

acirc;

8

7/30/2019 103894966 Documentatie C

9/24

Breviar teoretic

Matematice

&frac14 &frac12 &frac341/2 , 1/3, 3 /4

&divide ,

sau

&lt , &gt< >

&le &ge

9

7/30/2019 103894966 Documentatie C

10/24

Breviar teoretic

Alfabetul grecesc

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

10

7/30/2019 103894966 Documentatie C

11/24

Breviar teoretic , ,

, ,

,

, , ,

, ,

, ,

,

,

, ,

Sgeti

, ,

, ,

, ,

, ,

Altele

&copy &reg &trade"

&deg

11

7/30/2019 103894966 Documentatie C

12/24

Breviar teoretic&amp &

&dagger

&spades &clubs &hearts &diams

Cadrele (frames)In webdesign, diavolul se numeste frames. Webdesignerii recomand, n quasi-unanimitate, s nu vgnditi la asa ceva; n csuta dvs. postal de pe Yahoo vi se ofer posibilitatea de a le evita, iar nformularea problemei IP0004, redactorii de la PC Magazine precizeaz conditia principal: "maiales, fr a folosi frames".

Dac nc; nu v-ati speriat si vreti s stiti despre ce e vorba, uitati-v cu atentie la paginanorthdragon.com si veti vedea c prezint dou prti: partea de sus (care nu se schimb), si partea dejos. Acestea sunt cele dou frames (=cadre) ce alctuiesc pagina web a firmei Northdragon

Imprtirea pe frames a paginii web se face n fisierul index.html care, de obicei, nu contine si

informatii de alt gen.Avantajele folosirii cadrelor:

o cadrele usureaz navigarea prin pagini

o usureaz operatiunile de actualizare si de ntretinere a sitului

o ncrcarea continutului e mai rapid, deoarece partea fix se ncarc doar la nceput, nu lafiecare click

o informatia important (o reclam sau adres de contact etc.) poate fi pastrata tot timpul subochii vizitatorului

Dezavantaje:

Paginile cu frames prezinta adesea aspecte diferite n navigatoare diferite si la rezolutiidiferite

Se reduce spatiul de afisare.

Indexarea sitului de ctre unele (nu prea multe) motoare de cutare e anevoioas. Dupindexare, surferii ce ajung n situl dvs folosind un motor de cutare vor ajunge, de fapt, ntr-

12

http://www.3dstate.com/http://www.3dstate.com/

7/30/2019 103894966 Documentatie C

13/24

Breviar teoreticunul din fisierele componente ale paginii principale, eveniment generator de disconfortpentru surfer, din multiple motive (design-ul, lipsa link-urilor etc). O solutie a fost furnizatade dl. Emanuel Baruch, cu urmatorul rezultat: cand cineva deschide o astfel de pagina,browser-ul o va reincarca incluzand-o in frameset-ul din care trebuie sa faca parte. Acestscript este o combinatie JavaScript-PHP, asadar va functiona doar pe serverele care oferaaceasta facilitate. Puteti gasi codul necesar in articolul Seturi de cadre (frameset-uri)avansate cu Javascript si PHP publicat de dl. Emanuel Baruch in revista PC Magazine nr.

1 din 2003, pag. 96 sau la adresapcmagazine.ro/pcmag5-1/ipro3.shtml Bookmarking-ul (trecerea pagini la Favorites) e dificil.

Frameset si frameAcest tag divide fereastra n subspaii dreptunghiulare numite cadre (=frames). Tag-ul urmeaz tag-ului i nlocuiete tag-ul . Atribute:

Atributul rows precizeaz spaiul ce va fi ocupat de fiecare rnd. Se exprim n pixeli sau nprocente. Varianta procentelor e cea recomandabil, deoarece monitoarele au dimensiunidiferite.

Atributul cols precizeaz spaiul ce va fi ocupat de fiecare coloan. Similar atributului rows.

Acest tag definete fiecare cadru. Are urmtoarele atribute:

Atributul name - precizeaz numele cadrului curent.

Atributul src are ca valoare un URL. Acesta poate aparine unui fiier HTML, unui fiiervideo, unei imagini (.gif, .jpg etc) sau unui alt obiect. Totui, ultimele 3 variante nu suntrecomandabile. Pentru ca fiierul video etc. s fie accesibil persoanelor cu handicap i s fiemai bine indexat de motoarele de cutare, e de dorit s fie introdus ntr-un fiier html. Acestava constitui coninutul cadrului.

Atributul longdesc are drept valoare URL-ul unde se afl descrierea detaliat a coninutuluicadrului. Rar folosit.

Atributul frameborder poate lua valoarea 1 (cea implicit) sau 0. Dac lumframeborder="0", cadrul nu va avea margine. In caz contrar, va avea.

Atributul noresize nu ia valori. Prezena sa n cadrul tag-ului discutat nu e recomandabil,deoarece face ca vizitatorul s nu-i poat regla dimansiunile cadrelor dup gust.

Atributul scroll poate lua una dintre valorile: yes|no|auto. Folosindu-l, putem determinaapariia/dispariia barei de scroll a cadrului.

Atributele marginwidth, marginheight seteaz distana dintre text i marginea cadrului.

13

http://www.pcmagazine.ro/pcmag5-1/ipro3.shtmlhttp://www.pcmagazine.ro/pcmag5-1/ipro3.shtml

7/30/2019 103894966 Documentatie C

14/24

Breviar teoreticUnele browsere nu suport cadrele. Acestora li se adreseaz un mesaj cuprins ntre tag-urile i . Mesajul e vizibil numai cnd cadrele nu sunt afiate. Totui, browserelemoderne nu au aceast problem.

Exemple de frames

Exemplul 1:Imprirea pe vertical a unei pagini n dou cadre numite stanga i dreapta se face astfel:

index.html

Tag-ul precizeaz c pagina se mparte n doua coloane. Primacoloan urmeaz s ocupe 20% din suprafaa monitorului, iar a doua restul. In loc de procent,putem pune dimensiunea pe orizontal a ferestrei (n pixeli), dar acest lucru nu erecomandabil, deoarece pagina dvs. va fi vizualizat la rezoluii diferite.

Tag-ul urmtor se refer la fereastra care poart numele sugestiv de "stanga" i n care va fiafiat fiierul sta.htm. Aceast fereastr nu poate fi redimensionat, lucru stabilit prinatributul noresize. Dac acesta lipsete, fereastra poate fi redimensionat. Pentru bara descroll, s-a preferat valoarea auto. Alte valori posibile sunt yes i no.

Tag-ul care urmeaz se refer la fereastra din dreapta, numit "dreapta". In aceast fereastrva fi ncrcat fiierul dre.htm. Gndii-v la ferestrele din componena paginii ca la dou

farfurii goale numite "stanga" i "dreapta", n care urmeaz s se pun fiierul sta.htm,respectiv dre.htm.

Executai click-dreapta pe suprafaa ferestrei din stnga, apoi "View source". Vei obineastfel sursa fiierului sta.htm. Se observ c, n interiorul fiecrui link, exist atributul target,cruia i s-a atribuit valoarea "dreapta". Aceasta indic faptul c fiierul-int va fi ncrcat npartea din dreapta a paginii, aa cum e normal. Dac acest atribut lipsete, fiierul-int va fincrcat n fereastra-apelant ("stanga"), ceea ce nu e de dorit.

Exemplul 2:

index.html

Despre cadre (frames) in HTML

14

7/30/2019 103894966 Documentatie C

15/24

Breviar teoretic

Aceast secven de cod mparte pagina n trei ferestre orizontale, numite "sus", "centru" si "jos". Lancrcarea fiierului index.html, n aceste trei ferestre vor fi ncrcate fiierele x,y i z. Ferestrele desus i de jos nu vor avea bara de scroll, iar cea de la mijloc va avea numai dac este cazul.Browserele care nu suport cadre vor afia doar:

Despre cadre (frames)in HTML

Exemplul 3:

index.html

Fereastra de sus are dimensiunea de 100 pixeli i se numeste "sus". In aceast fereastr, va fiafiat fiierul a.htm.

Fereastra de jos are dimensiunea de 40 pixeli, se numete "jos" i va conine fiierul d.htm.

Fereastra de la mijloc e mparit n alte doua ferestre, care poart numele de "stanga" i"dreapta".

Prima va ocupa 50 de pixeli din dimensiunea pe orizontal a paginii, iar cealalt restul; vor afiaconinutul fiierelor c.htm i d.htm. Nici o fereastr nu prezint bara de scroll, cu excepia ferestrei"dreapta".

Desigur, acest exemplu nu e uzual i nu recomandm folosirea sa. Primul exemplu, n schimb, sentlnete frecvent. Dac nu vrei s v batei capul cu codul necesar frame-urilor, intrai nwww.google.com i dai drept cuvinte de cutare frames maker download.

Tag-ul iframeAtributele tag-ului :

Atributul src precizeaz adresa paginii ce va fi ncrcat fereastra astfel definit. Atributele width i height definesc lrgimea i nlimea ferestrei. exprimate n pixeli.

Atributul width se poate exprima i n procente.

Atributul name precizeaz numele ferestrei deschise astfel.

Atributul longdesc ia o valoare care e URL-ul paginii unde gsii o descriere mai lung aconinutului ferestrei.

15

7/30/2019 103894966 Documentatie C

16/24

Breviar teoretic Atributul frameborder poate lua dou valori: 0 i 1. Valoarea 1 e valoarea implicit; n

acest caz, fereastra va avea margine.

Atributul align poate lua una dintre valorile: top|middle|bottom|left|right. In acest fel, sestabilete poziia noii ferestre.

Atributul scrolling poate lua una dintre valorile: yes|no|auto. Scriind scrolling=auto, fereastrava avea bara de scroll doar dac va fi necesar.

Atributele marginwidth i marginheight iau valori numerice care exprim distana (npixeli) dintre textul din noua fereastr i marginile acesteia.

Observaii:

O asemenea fereastr poate fi realizat i folosind CSS. Diferente:

a) In fereatra realizat folosind CSS e afiat un text scris n fierul HTML curent. In fereatrarealizat folosind , e afiat un fiier HTML extern, soluie mai avantajoas din

punctul de vedere al dimensiunii n KB. b) Netscape Navigator nu afieaz textul din fereatra realizat cu i afieaz

necorespunztor textul din fereastra realizat folosind CSS.

Tag-ul are multe n comun cu tag-ul . Acesta din urm e ns suportat maimult dect de browsere i e inclus i n HTML 4.0 Strict.

In fisierul afisat cu , serverul-gazd introduce bannere, ca si n pagina principal.Practic, n pagina pe care o aveti sub ochi, se afl 3 rnduri de bannere. De aceea, tag-ul e recomandat numai n siturile cu webhosting-ul pltit.

Tabele

Tag-urile table, tr, td1)Tag-urile , si sunt singurele tag-uri indispensabile realizrii unui tabel. Orice tabelva incepe cu si se va incheia cu . Tag-ul suporta mai multe atribute.

Exemplu:

Efect: aparitia (dup completarea codului) unui tabel cu fundalul rosu, cu un chenar albastru avndgrosimea de 5 pixeli. Tabelul va fi plasat n dreapta paginii; distanta dintre celule va fi de 10 pixeli,iar distanta dintre text si marginea celulei de 5 pixeli. Inltimea tabelului ar trebui s fie de 20 depixeli, dar browserele rareori tin seama de atributul height.

Atributul bgcolor a setat culoarea fundalului.

Atributul width poate fi exprimat procentual (ca mai sus) sau in valoare absoluta (in pixeli)si stabileste cat din latimea paginii va ocupa tabelul.

16

7/30/2019 103894966 Documentatie C

17/24

Breviar teoretic Atributul border stabileste grosimea chenarului.

Atributul bordercolor stabileste culoarea chenarului.

Atributul cellspacing stabileste distanta dintre celule.

Atributul cellpadding stabileste distanta dintre continutul unei celule si marginea celulei.

Atributul align produce alinierea tabelului la dreapta, la stanga sau in centrul paginii. Atributul height stabileste inaltimea tabelului. In acest exemplu, ia valoarea de 10 pixeli, dar

poate fi stabilit si in procente din inaltimea ferestrei.

2)Orice linie din tabel va fi marcata prin la inceput si prin la sfarsit. O linie poatecontine una sau mai multe celule. Tabelele au acelasi numar de celule pe fiecare linie/coloana. Nusunt permise tabelele in forma de L. Pot exista insa celule goale (sau continand doar ).

3)Orice celula e delimitata de tag-urile si . Fiecare celula poate avea alta culoare defundal. O celula poate contine alt tabel care poate contine alt tabel etc. Desigur, o celula poatecontine atat text cat si imagini. In interiorul acestui tag, ca si in interiorul tag-ului anterior, poate fi

introdus atributul align, acesta putand lua valorile left, right, center, middle, bottom. Acest atributseteaza alinierea textului din celula respectiva..

Tag-urile th, tbody, thead, tfootIntre etichetele si este cuprins header-ul tabelului.

Exemplu:

Clasa a XI-a

E FeteBaieti 1514

Atributul axis stabileste ca numele header-ului este "Elevi", nume ce poate fi pronuntat de unsintetizator de voce pentru uzul unei persoane handicapate sau ocupate cu alte activitati.

Grupeaza linii in header-ul unui tabel. E un container, asa ca se foloseste (dar nu obligatoriu)eticheta de inchidere .

tbody>Grupeaza linii in corpul unui tabel. E un container care are obligatoriu eticheta de inchidere.

tfoot>Grupeaza linii intr-un footer. E un container, ca si precedentele etichete.Caption si colgroup

Acest tag produce afisarea unui text deasupra tabelului sau sub tabel.

Exemplu:

17

7/30/2019 103894966 Documentatie C

18/24

Breviar teoreticProductieFructe

MerePere150 kg140 kg

Evident, poate lipsi oricare dintre elementele caption.

Intr-un tabel, coloanele pot avea latimi diferite, iar textul poate fi aliniat in mod diferit. Tag-uldiscutat acum realizeaza asemenea performante.

Exemplu:

Primele 3 coloane au latimea de 20 pixeli si alinierea textului se face la stanga. Urmatoarele douacoloane au latimea de 60 pixeli si textul e plasat in centru.

Urmatoarele 4 coloane au latimea de 25 de pixeli si alinierea caracterelor se face in punct zecimal,iar ultimele 5 coloane ocupa tot spatiul ramas si sunt aliniate la dreapta. Se observa ca atributul spania o valoare egala cu numarul coloanelor implicate.

Observatii privind tabeleleTabelele servesc rareori pentru prezentarea unor date precum cele de mai sus. Mult mai des, suntfolosite pentru a dispune textul si imaginea in modul dorit de autor.

Se observa ca tabelul prezinta doua linii. Prima contine un header intins pe latimea a trei coloane,cea de-a doua contine trei celule: doua cu text, care o incadreaza pe cea care contine un gif animat.Marginea tabelului se ia egala cu zero. Acesta e un tabel invizibil. Orice pagina web realizat deun profesionist contine unul sau mai multe tabele invizibile.

2) Cand avem o imagine de mari dimensiuni, e de dorit sa o taiem in felii aproximativ egale, pe caresa le dispunem intr-un tabel. Slice me nice, vorba cntecului. In felul acesta, vizitatorul paginii vaincarca imaginea mai usor. In interiorul tag-ului , vom preciza ca marginea tabelului e zero,distanta dintre celulele tabelului e zero si ca distanta dintre imagine si marginea tabelului e totzero.Pasii lucrarii:

deschideti programul Paint Shop Pro

deschideti fisierul grafic vizat cu File, Open; il vom numi 1.gif click pe instrumentul "selection" din bara cu instrumente aflata in stanga (e reprezentat

printr-un dreptunghi) selectati o felie din imagine, sa zicem cincimea din extrema stanga Edit, Cut Edit, Paste As New Image ati obtinut o noua imagine, pe care o veti salva sub numele 11.gif reveniti la 1.gif si selectati a doua cincime s.a.m.d. in final, veti avea imaginile 11.gif, 12.gif,...,15.gif salvate in acelasi director

18

7/30/2019 103894966 Documentatie C

19/24

Breviar teoretic in fisierul html in care vreti sa includeti imaginea, scrieti urmatoarea secventa de cod:

Am presupus ca prima felie are lungimea de 100 de pixeli si inaltimea de 200. Celorlalte felii dinimaginea initiala le-am atribuit aceeasi inaltime si lungimi diferite. Din moment ce am facut selectiape orizontala, e necesar ca feliile sa aiba aceeasi inaltime.

Daca facem selectia pe verticala, feliile trebuie sa aiba aceeasi lungime.

Imagini

Observatii1. In paginile web pot fi introduse doar imagini cu extensia .gif, .jpg, .bmp sau .png. Bmp-urile

nu sunt recomandabile datorit dimensiunii mari (n KB) a fisierelor. Cu ct un fisier e maimare, cu att vizitatorul paginii l ncarc mai greu.

2. In cartea sa "Adobe Photoshop 5. Ghid practic", Carla Rose face o comparatie ntredimensiunile fisierelor, dup ce a salvat acelasi fisier n format .bmp, .jpg, .pdf etc.Comparatia e exprimat n tabelul urmtor:

Format Dimensiunea fisierului

.bmp 891 K

.jpg (calitate nalt) 344 K.jpg (calitate redus) 60 K

.png (ntretesut) 837 K

.png (nentretesut) 495 K

1. Imaginea poate fi:a) O fotografie ce a fost scanat si, eventual, prelucrat ntr-un program de grafic precumPaint Shop Pro, Adobe Photoshop, Adobe Illustrator b) O creatie original, realizat ntr-un program de grafic

2. Cele mai populare formate pentru imagini sunt .gif si .jpg. Primele folosesc numai 256 culori,

pot fi animate si pot avea un fundal transparent, ceea ce le face usor de plasat n pagin. Inimaginile .jpg pot aprea 16 milioane de culori, dar nu pot fi animate si nu pot avea fundaltransparent. Spre deosebire de gifuri, jpg-urile sunt comprimate, ceea ce nseamn c au, deobicei, un volum mai mic dect giful care nftiseaz aceeasi imagine.

3. Imaginile se pot mprti n:

o Imagini statice

19

7/30/2019 103894966 Documentatie C

20/24

Breviar teoretico Imagini animate (=gifuri animate). Un gif animat e alctuit din mai multe

imagini statice care se succed ntr-o anumit ordine. Se poate realiza cu usurint ntr-un program de animatie precum Animation Shop, produs de firma Jasc si difuzatshareware, mpreun cu Paint Shop Pro, pe CD-urile revistelor CHIP, PC Magazine,PC World.

4. Un caz particular de imagini l reprezint bannerele, care fac reclam unui produs si pe care

le puteti vedea, de obicei, n partea de sus a paginilor web. Se realizeaz tot n AnimationShop, cu Banner Wizard.

5. Imaginile 3D nu fac obiectul studiului nostru, dar nu ni se pare inutil s precizm ca se potrealizea n VRML (Virtual Reality Modelling Language), precum si n alte limbaje.

Tag-ul imgDorim s introducem imagini n situl nostru ? Acest tag produce afisarea unei imagini n pagina webcurent.

Exemplu:

Atributul src precizeaz adresa relativ a fisierului ce va fi ncrcat.

Atributul alt se adreseaz browserelor negrafice precum Lynx, care n locul imaginii vorafisa textul: Andreea Marin si Andreea Esca. Acest atribut este suportat si de browserulInternet Explorer, textul aprnd ca un tooltip.

Atributul align pozitioneaz imaginea n document si poate lua valorile left sau

right.Valoarea implicit este left, ceea ce nseamn c etotuna cu . Pentru a pozitiona o imagine n centrul paginii web, apelati laoricare dintre aceste trei metode:

o includeti imaginea ntr-un tabel pozitionat n centrul paginii

o includeti imaginea ntr-un element , folosind codul de mai jos:

includeti imaginea ntr-un element

, folosind codul de mai jos:

Atributul border precizeaz grosimea n pixeli a chenarului imaginii.

20

7/30/2019 103894966 Documentatie C

21/24

Breviar teoretic Atributele width si height iau valori ce exprim lungimea, respectiv nltimea imaginii.

Pentru a le afla, deschideti fisierul n Irfanview sau ACDSee (care sunt cele mai buneviewere) si cititi dimensiunile imaginii n pixeli. In cadrul tag-ului discutat, le puteti trece peacestea sau (sub)multipli ai acestora. Dac aceste atribute nu sunt precizate, imaginea sencarc avnd dimensiunile proprii.

Atributele vspace si hspace precizeaz intervalul liber (n pixeli) lsat ntre imagine si text

pe vertical, respectiv pe orizontal.

Tag-urile area si mapAcest tag definete o regiune a unei imagini. Click-ul pe o asemenea regiune produce o anumitaciune.

Exemplu:

Urmtoarea secven de cod produce ncrcarea fiierului x.htm ntr-o nou fereastr, numit "new"atunci cnd se execut click pe o regiune dreptunghiular ale crei coluri au coordonatele 1,2,7,8.

Atributul shape definete forma regiunii. Implicit, ia valoarea "rect". Cand ia valoarea"default", e vorba de ntreaga imagine. Dac ia valoarea "poly", regiunea e poligonal, iarcoordonatele sale vor fi de forma "x1, x2,...xn". Acest atribut poate lua i valoarea "circle",raza cercului fiind mai mic dect dimensiunile imaginii.

Atributul coords definete coordonatele regiunii. Cnd regiunea ia forma de dreptunghi,coordonatele sale vor de forma "stanga, sus, dreapta, jos". Punctul de referin e vrful dinstnga-sus. Coordonatele se pot exprima n pixeli sau n procente.

Atributul hrefprecizeaz adresa fiierului accesat prin click de mouse pe regiunea discutat. Atributul title descrie pe scurt coninutul. Atributul nohrefarat c regiunea nu constituie un link. Atributul alt furnizeaz un text alternativ browserelor ce nu ncarc imagini. Atributul target precizeaz n ce fereastr se ncarc fiierul accesat. Atributul tabindex ia o valoare numeric ntre 0 i 32767 care-i stabilete ordinea n hart. O

regiune cu tabindex=0 sau fr tabindex va fi vizitat, folosind tasta Tab, dup elementele cuun tabindex pozitiv.

Fisierele audioFiierele audio sunt, n linii mari, de dou tipuri:

Fiier de tip "form de und"

Aceste fiiere stocheaz forma semnalului audio. Acesta e digitizat pentru a permite stocareai prelucrarea sa pe calculator.

Fiier de tip MIDI (= Musical Instrument Digital Interface)

Aceste fiiere au extensia .mid sau .midi. Nu descriu forma de und, ci conin instruciunilenecesare generrii notelor. Notele sunt interpretate de un sintetizator care, executndu-le,produce muzic. Deoarece sunt extrem de comprimate, fiierele MIDI ocup un volum mic.

21

7/30/2019 103894966 Documentatie C

22/24

Breviar teoreticFiierele sonore pot cuprinde voce, secvene instrumentale sau mixri ale acestora. Se pot crean popularele programe FruittyLoops i Foundry Sound Forge, ultimul fiind difuzat i pe CD-urileCHIP.Redarea fiierului audio este realizat de o aplicaie numit player, cel mai cunoscut player de subWindows fiind Winamp.Pentru a asculta un fiier audio de pe net, exist dou posibiliti:a) Descrcarea de pe internet a fiierului i ascultarea ulterioar a acestuia. Extensia fiierului poate

fi .mp3 (un format foarte popular, dar de volum mare), .wav, .wma etc.b) Ascultarea fiierului n timp ce se ncarc, acest lucru fiind posibil cnd extensia fisierului este.asf, .rm sau .ra.Acest tag produce includerea n pagina curent a unui fiier sonor.Exemplu:

Prin atributul src, se specific adresa relativ a fiierului alpha.wav, aflat n directorul"sunete".

Atributul loop precizeaz de cte ori se reia clipul. Valoarea -1 produce redarea la infinit afiierului audio.

Pentru ca muzica s nceap n momentul ncrcrii complete a fiierului i s se aud o singur dat,

vom scrie:

Acest tag poate produce includerea n pagin att a unui fiier sonor, ct i a altui obiect.

Exemplu:

Atributele prezente n acest tag au aceeai semnificaie ca n cazul tag-ului .

Acest tag se adreseaz browserelor care nu pot reda obiectul introdus cu icrora li se furnizeaz o explicaie. Acest tag amintete de atributul alt prezent n cadrul tag-ului.

Exemplu:

Fisier sonor cu extensia .wav

FormeGeneralitti

o Tag-ul buttono Tag-ul inputo Exemple de folosire a tag-ului inputo Tag-urile legend,fieldseto Tag-urile textarea

22

7/30/2019 103894966 Documentatie C

23/24

Breviar teoretico Tag-urile option, optgroupo Tag-ul select

Alte etichete

o Tag-urile abbr, acronym, addresso Tag-urile base, basefont, big, blinko Tag-urile cite, code, dd, del, dir, dl, dto Tag-urile em, ins, kbd, marquee, menu, noscript, preo Tag-urile script, small, strike, style, sub, supo Tag-urile tt, var. Comentariul

Cele mai multe motoare de cutare folosesc programe-robot (= spideri) pentru indexarea paginilorweb. Aceste programe-robot citesc metatag-urile din paginile dvs. web. In functie de acestea, vortrece situl dvs. ntr-o categorie sau n alta, unde va fi gsit de utilizatorii respectivului motor decutare. Scriind cu atentie continutul metatag-urilor, puteti ajunge n categoria dorit, n care s fitigsit usor.

Metatag-urile sunt elemente HTML ce furnizeaz descrierea sitului, numele autorului, cuvintele-cheie etc. Se scriu ntre etichetele si . De obicei, dup .

In scrierea metatag-urilor, e util respectarea urmtoarelor reguli, formulate de ctre webdesigneri cuexperient:

dati prioritate cuvintelor cheie

nu repetati cuvinte

fiti concisi

Prezenta metatag-urilorkeywords i description e absolut obligatorie dac doriti ca situl dvs. s fieindexat.

IncheiereCa orice alt limbaj, HTML a cunoscut mai multe versiuni, cea mai recent fiind versiunea 4.0.

Parcurgnd paginile anterioare, ai observat, desigur, redundana unor etichete. Etichetele i produc acelai efect, adic apariia unei linii orizontale peste textul ncadrat. Etichetele i produc ngroarea textului, iar i afiarea cu italice.

Acest exces de etichete i atitudinea diferit fa de frames se afl la originea scindrii limbajuluiHTML 4.0 n trei variante, care exist concomitent:

HTML 4.0

Nu accept frames i nu include elementele basefont, center, font, s, strike, u, applet, dir,isindex, menu. Primelor ase li se prefer elementele CSS, iar urmtoarelor li se preferelementele object, ul, input, ul.Aceast variant de HTML este cea recomandat deconsoriul W3C. Folosind-o, vei realiza pagini web care nu vor avea nevoie derecondiionare mai mult timp dect cele scrise n alte variante de HTML.Un document scris

23

7/30/2019 103894966 Documentatie C

24/24

Breviar teoreticn HTML 4.0 Strict va avea n codul surs, naintea etichetei , urmtoarealinie:

HTML 4.0 Transitional

Conine toate elementele din HTML 4.0 Strict, plus unele atribute (cum ar fi atributul"target" al tag-ului ) i elementele deczute. Faptul c un document e scris naceast variant a HTML-ului se declar astfel:

HTML 4.0 Frameset

E o variant a lui HTML 4.0 Transitional pentru documentele ce folosesc frames.Documentele scrise n aceast variant de HTML se declar astfel:

Nu ni se pare inutil s precizm c browserele actuale recunosc i unele dintre versiunile anterioareale HTML-ului.

HTML nu e singurul limbaj de marcare folosit pe web. Pe lng HTML, exist i XML (eXtensibleMarkup Language), precum i XHTML (eXtensible Hypertext Markup Language). Acesta din urmeste considerat de unii autori "un document XML cu vocabular HTML" (vezi "Cine se teme de X ?"de Molly E. Holzschlag n "PCMagazine" din octombrie 2001). Practic, XHTML folosete totetichetele HTML, dar ntr-un mod mai riguros: toate elementele nevide au etichete de nchidere,etichetele se scriu numai cu minuscule, ghilimelele sunt obligatorii etc.

24