Sunteți pe pagina 1din 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 calculatorul dumneavoastra. HTML este acronimul de la HyperText Markup Language, care e numele unui limbaj de marcare ce a nlocuit SGML-ul. A fost conceput n 1989 de Tim Berners-Lee (v. foto) , licentiat la Oxford, pe atunci fizician la CERN. Fiind si expert n software, Berners-Lee e acum director al World Wide WEb Consortium (pe scurt, W3C), adica al organizatiei care coordoneaza dezvoltarea web-ului (n principal, prin impunerea de standarde pentru limbaje etc.). HTML-ul a cunoscut o popularitate 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 (ca Fox-ul), ci etichete, acestea fiind numite si balize, elemente sau tag-uri. Sintaxa oricarui tag este: <TAG atribut1="val" atribut2="val">Text</TAG> In unele cazuri, atributele pot lipsi. In altele, poate lipsi tag-ul de nchidere: </TAG> O pagina web poate 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 care suporta 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 un browser 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.com cererea 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 fisierul index.html si daca tastam doar: http://www.geocities.com/dioan12 deoarece, n mod implicit, la accesarea unui sit se ncarc fisierul index.html. (Nota: Nestiind ce sistem de operare e instalat pe serverul pe care intentioneaza sa faca upload-ul sitului propriu, unii webdesigneri salveaza fisierul index.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. Daca sunteti ncepator, nu va bateti nsa prea tare capul cu aceste chestiuni.)

Breviar teoretic 2 Vom 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 sau natura?" 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) 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), NoteTab Light sau 1st Page 2000 . Ultimile trei sunt distribuite freeware (gratuit). Dealtfel, de pe siturile de download puteti descrca un mare numr de editoare HTML, unele n regim freeware, 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. 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, s zicem, istoric.htm. Deschideti fisierul istoric.htm n Microsoft Internet Explorer. Pentru a aduce modificari fisierului, executati click-dreapta pe suprafata acestuia si veti obine codul-sursa. Dupa modificarea fisierului, salvati-l.

Un fisier html se poate realiza:

Cum realizm prima pagin web ?


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 <BODY>, <body>, <BOdy> sau <boDy> etc., pentru ca n HTML nu se face distinctia ntre literele mari si cele mici.

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

Breviar teoretic Exemplu :

<a href="texte/CV.htm" target="new" title="CV-ul meu"> Click aici !</a>Intre primele dou ghilimele 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 sau una creat pe loc. Dac atributul target lipseste, fisierul CV.htm va fi deschis n fereastra fisierului apelant, 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-ul meu". Asadar, elementul <a> suport urmtoarele atribute:

Atributul href indic URL-ul fisierului (adresa acestuia). Adresa poate fi absolut sau relativ. 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 urmtoarele notatii:
o o o

target="_blank" : fisierul se ncarc ntr-o nou fereastr, fr nume target="_self" : fisierul se ncarc n fereastra curent target="_top" : fisierul se ncarc n ntreaga fereastr a navigatorului, nemprtit n frames target="_parent": fisierul se ncarc n fereastra ce e printele ferestrei care contine link-ul

Cuvintele parent, top, self, blank sunt 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 apsnd simultan tasta "Alt" si tasta corespunztoare caracterului respectiv. Atributul style ajut la realizarea unui control mai fin asupra link-ului, a crui culoare poate fi setat astfel. Evident, aceasta presupune folosirea CSS.

Breviar teoretic

Etichete uzuale Html, head, title


Orice fisier ncepe cu eticheta <html> si se termin cu eticheta </html>. Fisierul e compus din: 1. header, inclus ntre etichetele <head> si </head> 2. corp, inclus ntre etichetele <body> si </body> In linii mari, un fisier numit index.html va arta ca n dreptunghiul alturat. Din toate aceste linii de cod, browserul va afisa doar: Bla-bla-bla. Textul "Pagina lui Georgica" nu va aprea n pagin, ci n bara de titlu (deasupra meniurilor). Dac etichetele sunt continute n head, ntre acestea se va trece numele fisierului. Acest nume nu va fi afisat n fereastr, ci deasupra barei de meniuri. Dar title poate fi ntlnit nu numai ca tag propriu-zis, ci si ca atribut al unui alt tag, asa cum puteti vedea mai jos.

Body
Acest tag nu poate lipsi din nici o pagin web. <body bgcolor="#C0C0C0" link="red" alink="blue" vlink="green" text="black">Culoarea paginii va fi gri (stabilit prin bgcolor="#C0C0C0"), link-urile vor fi rosii, link-ul activ albastru iar link-urile vizitate verzi. Textul va fi afisat cu negru. De multe ori , nu se precizeaz culoarea fundalului/textului/link-urilor, ceea ce conduce la afisarea u nui fundal alb, a unor fonturi negre si a unor link-uri albastre. Aceasta e setarea implicit. Se observ c orice culoare poate fi exprimat att printr-un cuvnt, ct si printr-un set de 6 caractere precedate de diez (#). Aceast notatie se datoreaz existentei 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 celor trei componente alctuiesc un sistem de 6 caractere. Tag-ul de sus poate fi scris si ca: <body bgcolor="#C0C0C0" link="#FF0000" alink="#0000FF" vlink="#008000" text="#000000"> Pentru a seta marginile de sus si de jos ale paginii la valorile de 5, respectiv 10 pixeli, vom scrie: <body topmargin="5" bottommargin="10">Topmargin ne da distanta dintre partea de sus a paginii si 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 mod obisnuit, aceste atribute ale tagului <body> iau valori nule, astfel nct textul si imaginile s umple tot spatiul ferestrei. Pentru a va lamuri in privinta acetor atribute, realizati o pagina web cu foarte mult text si dati diferite valori atributelor discutate. Binenteles, toate aceste caracteristici pot fi setate n cadrul aceluiasi tag <body>:<body background="." link="." alink="" vlink="." text="." bgproperties="." topmargin="." bottommargin="."> Intre ghilimele, se va trece valoarea fiecarui atribut. <body background="marmura.gif" bgcolor="green" text="white">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 un fundal de culoare verde. Textul va aprea, att pe fundal verde ct si pe marmur, afisat cu caractere albe.

Breviar teoretic <html> <head><title>Print.htm</title> <SCRIPT <!-var position function { position++; scroll(0,position); clearTimeout(timer); var timer = } // <body onload="scroller()" </body> </html>

5 LANGUAGE="JavaScript"> = 0; scroller()

setTimeout("scroller()",3); bgcolor="white">

timer; --> Bla-bla-bla......bla

Se observ definirea n header a functiei scroller() si apelarea acesteia n cadrul tag-ului <body>. Functia va fi executat la ncrcarea complet a documentului. Pagina web se va deplasa n sus. Dac ns sunteti nceptor, nu v bateti prea tare capul cu atributul onload al tag-ului discutat. Si nici cu atributul 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 functie corect definit. Concluzie: Tag-ul are sintaxa generala: <body onload="numefunctie1" onunload="numefunctie2" background="imagine.extensie" bgcolor="numeculoare" link="culoare1" alink="culoare2" vlink="culoare3" text="culoare" bgproperties="valoare" topmargin="val1" bottommargin="val2" leftmargin="val3">Oricare dintre aceste atribute poate lipsi.

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

Font Font Font Font Font


Efectul este afisarea a diferite tipuri de fonturi: Arial, Impact, Courier, Comic Sans MS. Acestea sunt fonturi comune, ce pot fi afisate de orice PC. Pe lng acestea, puteti gsi pe web nenumrate alte tipuri de font, gratuite sau nu. Se recomand prudent fat de acestea, deoarece vizitatorul va trebui mai nti s instaleze pe PC-ul su noul font, abia apoi urmnd afisarea paginii. Dac pagina dvs. e foarte interesant, e posibil s fac acest lucru. Dar nu e bine s contati pe rbdarea sa. In general, se recomand prudent n folosirea atributului face.

Breviar teoretic <font face="ABC,Impact,Arial"

6 size="7" color="steelblue">Font</font>Efect:

Font

Fontul ABC nu exist. L-am introdus ns din necesitti de ordin didactic. In locul su, puteti introduce orice alt nume de font. Dar pe lng ABC, am precizat alte dou nume de fonturi (Impact si 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 <H1> e cel mai mare, iar <H6> e cel mai mic. Caracterele cuprinse ntre <h1> (sau <h2> etc) si tag-ul corespunztor de nchidere vor aprea ngrosate, iar textul ce urmeaz tag-ului de nchidere va trece automat dou rnduri mai jos. De aceea, aceste tag-uri sunt recomandate pentru titluri si subtitluri. Produce ngrosarea elementului ncadrat de <b> si </b>. Elementul ncadrat de <i> si </i> va aprea nclinat (cu italice). Elementul ncadrat de <u> si </u> va aprea subliniat.

Tag-urile br,p,div
<center> Produce asezarea n centrul paginii a Exemplu: <center>Salut !</center> In browser, veti vedea cuvntul Salut !, afisat n centrul paginii. elementului ncadrat.

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

Interzice Produce trecerea Exemplu:

<nobr> trecerea pe rndul urmtor. <p> acestuia.

nu

pe

rndul

urmtor,

ci

pe

cel

care

urmeaz

<p align=center>Pesti exotici din Caraibe</p>In loc de left, putem avea right sau left. Valoarea implicit este left.

Liste
<li> Indic un Exemplu: <li type="circle"> Acest tag suport atributele:

element

dintr-o

list

(ne)numerotat.

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

Breviar teoretic Atributul value: precizeaz Folosit n listele numerotate. <ol> List Exemplul 1: <ol start="7">

7 valoarea numeric a elementului din list considerat.

numerotat.

Atributul start precizeaz valoarea de la care pleac numerotarea elementelor din list. <ul> List Exemplul <ul <li>Cirese <li>Visine <li>Pepene </ul> </center> Are loc afisarea urmtoarei liste:

1:

nenumerotat. <center> type="disc">

Cirese Visine Pepene 2: <ul type="disc">

Atributul type mai poate lua valorile disc sau circle. Exemplul <u>Fructe</u> <li>Mere <li>Pere <li>Citrice <ol> <li>Lamai <li>Grapes </ol> </ul> Aceast secvent de cod produce ncuibarea unei liste cu citrice n lista cu fructe: Fructe

Mere Pere Citrice 1. Lamai 2. Grapes

Linia orizontal

Breviar teoretic <hr> Produce afisarea unei linii orizontale. Exemplul 1:

<hr size="3" width="60%" align="center" noshade color="black">

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 exprima procentual (ca mai sus) sau n pixeli. Atributul noshade lipseste linia de relief. Atributul color precizeaz culoarea liniei. Oricare dintre aceste atribute poate lipsi.

Simboluri
Diacritice Codul Reprezentarea &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; , &Ccedil; , &ETH; , &Ntilde; &Ecirc; , &Euml; &Egrave; , &Igrave; , &Iacute; , &Icirc; , &Iuml; &Ograve; , &Oacute; , &Ocirc; , &Ouml; &Ugrave; , &Uacute; , &Ucirc; , &Uuml; &#462; &#acirc; &icirc; &#355; &#351;

Breviar teoretic

Matematice &frac14 &frac12 &frac34 1/2 , 1/3, 3 /4 &divide , &times; &plusmn; sau &#177; &lt , &gt <> &le &ge &equiv; &ne; &asymp; &int; &part; &radic; &cap;

Breviar teoretic Alfabetul grecesc &Alpha; , &alpha; , &Beta; , &beta; , &Gamma; , &gamma; , &Delta; , &delta; , &Epsilon; , &epsilon; , &Zeta; , &zeta; , &Eta; , &eta; , &Theta; , &theta; , &Iota; , &iota; , &Kappa; , &kappa; , &Lambda; , &lambda; , &Mu; , &mu; , &Nu; , &nu; , &Xi; , &xi; , &Omicron; , &omicron; , &Pi; , &pi; ,

10

Breviar teoretic &Rho; , &rho; , &Sigma; , &sigma; , &Tau; , &tau; , &Upsilon; , &upsilon; , &Phi; , &phi; , &Chi; , &chi; , &Psi; , &psi; , &Omega; , &omega; ,

11

Sgeti &larr; , &uarr; , &rarr; , &darr; , &harr; , &crarr; , &lsaquo; , &rsaquo; , Altele &cent; &yen; &pound; &euro; &copy &reg &trade " &deg &curren; &macr;

Breviar teoretic &amp &loz; & &infin; &dagger &iquest; &iexcl; &spades &clubs &hearts &diams &#180; &#167; &#169;

12

Cadrele (frames)
In webdesign, diavolul se numeste frames. Webdesignerii recomand, n quasi-unanimitate, s nu v gnditi la asa ceva; n csuta dvs. postal de pe Yahoo vi se ofer posibilitatea de a le evita, iar n formularea problemei IP0004, redactorii de la PC Magazine precizeaz conditia principal: "mai ales, fr a folosi frames". Dac nc; nu v-ati speriat si vreti s stiti despre ce e vorba, uitati-v cu atentie la pagina northdragon.com si veti vedea c prezint dou prti: partea de sus (care nu se schimb), si partea de jos. 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 o o

cadrele usureaz navigarea prin pagini usureaz operatiunile de actualizare si de ntretinere a sitului ncrcarea continutului e mai rapid, deoarece partea fix se ncarc doar la nceput, nu la fiecare click informatia important (o reclam sau adres de contact etc.) poate fi pastrata tot timpul sub ochii vizitatorului

Dezavantaje:

Paginile cu frames prezinta adesea aspecte diferite n navigatoare diferite si la rezolutii diferite Se reduce spatiul de afisare. Indexarea sitului de ctre unele (nu prea multe) motoare de cutare e anevoioas. Dup indexare, surferii ce ajung n situl dvs folosind un motor de cutare vor ajunge, de fapt, ntr-

Breviar teoretic 13 unul din fisierele componente ale paginii principale, eveniment generator de disconfort pentru surfer, din multiple motive (design-ul, lipsa link-urilor etc). O solutie a fost furnizata de 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. Acest script este o combinatie JavaScript-PHP, asadar va functiona doar pe serverele care ofera aceasta 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 adresa pcmagazine.ro/pcmag5-1/ipro3.shtml

Bookmarking-ul (trecerea pagini la Favorites) e dificil.

Frameset si frame
<frameset> Acest tag divide fereastra n subspaii dreptunghiulare numite cadre (=frames). Tag-ul <frameset> urmeaz tag-ului </head> i nlocuiete tag-ul <body>. Atribute:

Atributul rows precizeaz spaiul ce va fi ocupat de fiecare rnd. Se exprim n pixeli sau n procente. Varianta procentelor e cea recomandabil, deoarece monitoarele au dimensiuni diferite. Atributul cols precizeaz spaiul ce va fi ocupat de fiecare coloan. Similar atributului rows.

<frame> 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 fiier video, unei imagini (.gif, .jpg etc) sau unui alt obiect. Totui, ultimele 3 variante nu sunt recomandabile. Pentru ca fiierul video etc. s fie accesibil persoanelor cu handicap i s fie mai bine indexat de motoarele de cutare, e de dorit s fie introdus ntr-un fiier html. Acesta va constitui coninutul cadrului. Atributul longdesc are drept valoare URL-ul unde se afl descrierea detaliat a coninutului cadrului. Rar folosit. Atributul frameborder poate lua valoarea 1 (cea implicit) sau 0. Dac lum frameborder="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 determina apariia/dispariia barei de scroll a cadrului. Atributele marginwidth, marginheight seteaz distana dintre text i marginea cadrului.

Breviar teoretic 14 <noframe> Unele browsere nu suport cadrele. Acestora li se adreseaz un mesaj cuprins ntre tag-urile <noframes> i </noframes>. Mesajul e vizibil numai cnd cadrele nu sunt afiate. Totui, browserele moderne nu au aceast problem.

Exemple de frames
Exemplul Imprirea pe vertical a unei pagini n dou cadre numite stanga i dreapta se face astfel: <html> <head><title>index.html</title></head> <frameset <frame name="stanga" <frame name="dreapta" </frameset> </html>

1:

src="sta.htm" src="dre.htm"

noresize noresize

cols="20%,*"> scrolling='auto'> scrolling='auto'>

Tag-ul <frameset cols="20%,*"> precizeaz c pagina se mparte n doua coloane. Prima coloan 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 e recomandabil, 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 fi afiat fiierul sta.htm. Aceast fereastr nu poate fi redimensionat, lucru stabilit prin atributul noresize. Dac acesta lipsete, fereastra poate fi redimensionat. Pentru bara de scroll, 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 fereastr va 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 obine astfel 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 n partea din dreapta a paginii, aa cum e normal. Dac acest atribut lipsete, fiierul-int va fi ncrcat n fereastra-apelant ("stanga"), ceea ce nu e de dorit.

Exemplul 2: <html> <head><title>index.html</title></head> <frameset <frame name="sus" <frame name="centru" <frame name="jos" <noframes> Despre cadre (frames) in HTML

src="x.htm" src="y.htm" src="z.htm"

noresize noresize noresize

rows="10%,80%,*"> scrolling='no'> scrolling='auto'> scrolling='no'>

Breviar teoretic </noframes> </frameset> </html>

15

Aceast secven de cod mparte pagina n trei ferestre orizontale, numite "sus", "centru" si "jos". La ncrcarea fiierului index.html, n aceste trei ferestre vor fi ncrcate fiierele x,y i z. Ferestrele de sus 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: <html> <head><title>index.html</title></head> <frameset rows="100,*,40"> <frame name="sus" src="a.htm" noresize scrolling='no'> <frameset cols="50,*"> <frame name="stanga" src="b.htm" scrolling='no'> <frame name="dreapta" src="c.htm" scrolling='auto'> </frameset> <frame name="jos" src="d.htm" noresize scrolling='no'> </frameset> </html>

Fereastra de sus are dimensiunea de 100 pixeli i se numeste "sus". In aceast fereastr, va fi afiat 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 afia coninutul 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, se ntlnete frecvent. Dac nu vrei s v batei capul cu codul necesar frame-urilor, intrai n www.google.com i dai drept cuvinte de cutare frames maker download.

Tag-ul iframe
Atributele tag-ului <iframe>:

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 a coninutului ferestrei.

Breviar teoretic 16 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, se stabilete poziia noii ferestre. Atributul scrolling poate lua una dintre valorile: yes|no|auto. Scriind scrolling=auto, fereastra va avea bara de scroll doar dac va fi necesar. Atributele marginwidth i marginheight iau valori numerice care exprim distana (n pixeli) 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 fereatra realizat folosind <iframe>, 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 <iframe> i afieaz necorespunztor textul din fereastra realizat folosind CSS. Tag-ul <iframe> are multe n comun cu tag-ul <object>. Acesta din urm e ns suportat mai mult dect <iframe> de browsere i e inclus i n HTML 4.0 Strict. In fisierul afisat cu <iframe>, 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 <iframe> e recomandat numai n siturile cu webhosting-ul pltit.

Tabele Tag-urile table, tr, td


1)<table> Tag-urile <table>,<td> si <tr> sunt singurele tag-uri indispensabile realizrii unui tabel. Orice tabel va incepe cu <table> si se va incheia cu </table>. Tag-ul <table> suporta mai multe atribute. Exemplu: <table bgcolor="red" width="60%" border="5" cellpadding="5" align="right" height="20"> bordercolor="blue" cellspacing="10"

Efect: aparitia (dup completarea codului) unui tabel cu fundalul rosu, cu un chenar albastru avnd grosimea 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 de pixeli, 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.

Breviar teoretic 17 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)<tr>Orice linie din tabel va fi marcata prin <tr> la inceput si prin </tr> la sfarsit. O linie poate contine una sau mai multe celule. Tabelele au acelasi numar de celule pe fiecare linie/coloana. Nu sunt permise tabelele in forma de L. Pot exista insa celule goale (sau continand doar &nbsp;). 3)<td>Orice celula e delimitata de tag-urile <td> si </td>. Fiecare celula poate avea alta culoare de fundal. O celula poate contine alt tabel care poate contine alt tabel etc. Desigur, o celula poate contine 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 atribut seteaza alinierea textului din celula respectiva..

Tag-urile th, tbody, thead, tfoot


<th> Intre etichetele <th> si </th> este cuprins header-ul tabelului. Exemplu: <table border="5" bordercolor="blue" bgcolor="fuchsia"> <tr> <th E</th></tr> <table> Atributul axis stabileste ca numele header-ului este "Elevi", nume ce poate fi pronuntat de un sintetizator de voce pentru uzul unei persoane handicapate sau ocupate cu alte activitati. <thead>Grupeaza linii in header-ul unui tabel. E un container, asa ca se foloseste (dar nu obligatoriu) eticheta de inchidere </thead>. 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. colspan="2" axis="Elevi">Clasa a XI-a <tr><td>Fete</td><td>Baieti</td></tr> <tr><td>15</td><td>14</td></tr>

Caption si colgroup
<caption> Acest tag produce afisarea unui text deasupra tabelului sau sub tabel. Exemplu:

Breviar teoretic 18 <table border="5" bordercolor="blue" bgcolor="fuchsia" align="center"> <caption>Productie</caption> <caption align=bottom>Fructe</caption> <tr><td>Mere</td><td>Pere</td></tr> <tr><td>150 kg</td><td>140 kg</td></tr> <table> Evident, poate lipsi oricare dintre elementele caption. <colgroup> Intr-un tabel, coloanele pot avea latimi diferite, iar textul poate fi aliniat in mod diferit. Tag-ul discutat acum realizeaza asemenea performante. Exemplu: <colgroup width="20px" <colgroup width="60px" <colgroup width="25px" align=char <colgroup width="100%" align=right span=5> align=left align=center span=4 align=char span=3> span=2> char=".">

Primele 3 coloane au latimea de 20 pixeli si alinierea textului se face la stanga. Urmatoarele doua coloane 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 span ia o valoare egala cu numarul coloanelor implicate.

Observatii privind tabelele


Tabelele servesc rareori pentru prezentarea unor date precum cele de mai sus. Mult mai des, sunt folosite 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 de un 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 care sa le dispunem intr-un tabel. Slice me nice, vorba cntecului. In felul acesta, vizitatorul paginii va incarca imaginea mai usor. In interiorul tag-ului <table>, vom preciza ca marginea tabelului e zero, distanta dintre celulele tabelului e zero si ca distanta dintre imagine si marginea tabelului e tot zero.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

Breviar teoretic 19 in fisierul html in care vreti sa includeti imaginea, scrieti urmatoarea secventa de cod: <table <tr> <td><img <td><img <td><img <td><img <td><img <tr><table> border="0" src="11.gif" src="12.gif" src="13.gif" src="14.gif" src="15.gif" cellspacing="0" width="100" width="100" width="110" width="120" width="105" cellpadding="0"> height="200"><td> height="200"><td> height="200"><td> height="200"><td> height="200"><td>

Am presupus ca prima felie are lungimea de 100 de pixeli si inaltimea de 200. Celorlalte felii din imaginea initiala le-am atribuit aceeasi inaltime si lungimi diferite. Din moment ce am facut selectia pe orizontala, e necesar ca feliile sa aiba aceeasi inaltime. Daca facem selectia pe verticala, feliile trebuie sa aiba aceeasi lungime.

Imagini Observatii
1. 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 mai mare, cu att vizitatorul paginii l ncarc mai greu. 2. In cartea sa "Adobe Photoshop 5. Ghid practic", Carla Rose face o comparatie ntre dimensiunile fisierelor, dup ce a salvat acelasi fisier n format .bmp, .jpg, .pdf etc. Comparatia e exprimat n tabelul urmtor: Format .bmp .jpg (calitate nalt) .jpg (calitate redus) .png (ntretesut) .png (nentretesut) Dimensiunea fisierului 891 K 344 K 60 K 837 K 495 K

1. Imaginea poate fi: a) O fotografie ce a fost scanat si, eventual, prelucrat ntr-un program de grafic precum Paint 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. In imaginile .jpg pot aprea 16 milioane de culori, dar nu pot fi animate si nu pot avea fundal transparent. Spre deosebire de gifuri, jpg-urile sunt comprimate, ceea ce nseamn c au, de obicei, un volum mai mic dect giful care nftiseaz aceeasi imagine. 3. Imaginile se pot mprti n:
o

Imagini statice

Breviar teoretic 20 o 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 ntrun program de animatie precum Animation Shop, produs de firma Jasc si difuzat shareware, 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 Animation Shop, cu Banner Wizard. 5. Imaginile 3D nu fac obiectul studiului nostru, dar nu ni se pare inutil s precizm ca se pot realizea n VRML (Virtual Reality Modelling Language), precum si n alte limbaje.

Tag-ul img
<img> Dorim s introducem imagini n situl nostru ? Acest tag produce afisarea unei imagini n pagina web curent. Exemplu: <img src="imag/poza2.jpg" alt="Andreea Marin si Andreea Esca" width="500" height="350" border="0" align="center">

Atributul src precizeaz adresa relativ a fisierului ce va fi ncrcat. Atributul alt se adreseaz browserelor negrafice precum Lynx, care n locul imaginii vor afisa textul: Andreea Marin si Andreea Esca. Acest atribut este suportat si de browserul Internet 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 <img src="a.gif" align="left"> e totuna cu <img src="a.gif">. Pentru a pozitiona o imagine n centrul paginii web, apelati la oricare dintre aceste trei metode:
o o

includeti imaginea ntr-un tabel pozitionat n centrul paginii includeti imaginea ntr-un element <div>, folosind codul de mai jos:

<div align=center> <img src="imag/poza2.jpg"> </div> includeti imaginea ntr-un element <p>, folosind codul de mai jos: <p align=center> <img src="imag/poza2.jpg"> </p>

Atributul border precizeaz grosimea n pixeli a chenarului imaginii.

Breviar teoretic 21 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 bune viewere) si cititi dimensiunile imaginii n pixeli. In cadrul tag-ului discutat, le puteti trece pe acestea sau (sub)multipli ai acestora. Dac aceste atribute nu sunt precizate, imaginea se ncarc 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 map


<area> Acest tag definete o regiune a unei imagini. Click-ul pe o asemenea regiune produce o anumit aciune. Exemplu: <area shape="rect" coords="1,2,7,8" href="x.htm" title='Cea mai buna gimnasta' alt="Nadia Comaneci" target="new" tabindex="32111"> 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, iar coordonatele 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 din stnga-sus. Coordonatele se pot exprima n pixeli sau n procente. Atributul href precizeaz adresa fiierului accesat prin click de mouse pe regiunea discutat. Atributul title descrie pe scurt coninutul. Atributul nohref arat 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 cu un tabindex pozitiv.

Fisierele audio
Fiierele 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 stocarea i 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 instruciunile necesare generrii notelor. Notele sunt interpretate de un sintetizator care, executndu-le, produce muzic. Deoarece sunt extrem de comprimate, fiierele MIDI ocup un volum mic.

Breviar teoretic 22 Fiierele sonore pot cuprinde voce, secvene instrumentale sau mixri ale acestora. Se pot crea n popularele programe FruittyLoops i Foundry Sound Forge, ultimul fiind difuzat i pe CD-urile CHIP. Redarea fiierului audio este realizat de o aplicaie numit player, cel mai cunoscut player de sub Windows 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. <bgsound>Acest tag produce includerea n pagina curent a unui fiier sonor. Exemplu: <bgsound src="sunete/alpha.wav" loop="-1"> 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 a fiierului audio.

Pentru ca muzica s nceap n momentul ncrcrii complete a fiierului i s se aud o singur dat, vom scrie: <bgsound src="sunete/alpha.wav"> <embed> Acest tag poate produce includerea n pagin att a unui fiier sonor, ct i a altui obiect. Exemplu: <embed src="sunete/alpha.wav" width="200" height="300" align="left" vspace="20" hspace="20" border="5"> Atributele prezente n acest tag au aceeai semnificaie ca n cazul tag-ului <img>.

<noembed>Acest tag se adreseaz browserelor care nu pot reda obiectul introdus cu <embed> i crora li se furnizeaz o explicaie. Acest tag amintete de atributul alt prezent n cadrul tag-ului <img>. Exemplu: <noembed>Fisier sonor cu extensia .wav</noembed>

Forme
Generalitti
o o o o o

Tag-ul button Tag-ul input Exemple de folosire a tag-ului input Tag-urile legend,fieldset Tag-urile textarea

Breviar teoretic o Tag-urile option, optgroup o Tag-ul select

23

Alte etichete
Tag-urile abbr, acronym, address Tag-urile base, basefont, big, blink Tag-urile cite, code, dd, del, dir, dl, dt Tag-urile em, ins, kbd, marquee, menu, noscript, pre Tag-urile script, small, strike, style, sub, sup Tag-urile tt, var. Comentariul Cele mai multe motoare de cutare folosesc programe-robot (= spideri) pentru indexarea paginilor web. Aceste programe-robot citesc metatag-urile din paginile dvs. web. In functie de acestea, vor trece situl dvs. ntr-o categorie sau n alta, unde va fi gsit de utilizatorii respectivului motor de cutare. Scriind cu atentie continutul metatag-urilor, puteti ajunge n categoria dorit, n care s fiti gsit usor.
o o o o o o

Metatag-urile sunt elemente HTML ce furnizeaz descrierea sitului, numele autorului, cuvintelecheie etc. Se scriu ntre etichetele <head> si </head>. De obicei, dup </title>. In scrierea metatag-urilor, e util respectarea urmtoarelor reguli, formulate de ctre webdesigneri cu experient:

dati prioritate cuvintelor cheie nu repetati cuvinte fiti concisi

Prezenta metatag-urilor keywords i description e absolut obligatorie dac doriti ca situl dvs. s fie indexat.

Incheiere
Ca 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 <s> i <strike> produc acelai efect, adic apariia unei linii orizontale peste textul ncadrat. Etichetele <b> i <strong> produc ngroarea textului, iar <i> i <cite> afiarea cu italice. Acest exces de etichete i atitudinea diferit fa de frames se afl la originea scindrii limbajului HTML 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 prefer elementele object, ul, input, ul.Aceast variant de HTML este cea recomandat de consoriul W3C. Folosind-o, vei realiza pagini web care nu vor avea nevoie de recondiionare mai mult timp dect cele scrise n alte variante de HTML.Un document scris

Breviar teoretic 24 n HTML 4.0 Strict va avea n codul surs, naintea etichetei <html>, urmtoarea linie: <!DOCTYPE HTML PUBLIC "-//W3C//DTD "http://www.w3.org/TR/REC-html40/strict.dtd">

HTML

4.0//EN"

HTML 4.0 Transitional Conine toate elementele din HTML 4.0 Strict, plus unele atribute (cum ar fi atributul "target" al tag-ului <a href=" ">) i elementele deczute. Faptul c un document e scris n aceast variant a HTML-ului se declar astfel: <!DOCTYPE HTML PUBLIC "-//W3C//DTD "http://www.w3.org/TR/REC-html40/loose.dtd"> HTML 4.0 Transitional//EN"

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> Nu ni se pare inutil s precizm c browserele actuale recunosc i unele dintre versiunile anterioare ale HTML-ului. HTML nu e singurul limbaj de marcare folosit pe web. Pe lng HTML, exist i XML (eXtensible Markup Language), precum i XHTML (eXtensible Hypertext Markup Language). Acesta din urm este 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 tot etichetele HTML, dar ntr-un mod mai riguros: toate elementele nevide au etichete de nchidere, etichetele se scriu numai cu minuscule, ghilimelele sunt obligatorii etc.