Tehnologii Web Noiuni HTML

Chiinu, 2009

CUPRINS
Intorducere Capitolul 1 Structura unui document HTML simplu Capitolul 2 Paragrafe Capitolul 3 Organizarea textului n documentele HTML Capitolul 4 Legturi ntre fiierele HTML Capitolul 5 Prelucrarea culorilor Capitolul 6 Antetul HTML. Elemente invizibile Capitolul 7 Imagini n documentele HTML Capitolul 8 Tabele Capitolul 9 Casete n documentele HTML Capitolul 10 Formulare Anex Taguri frecvent utilizate 5 7 12 19 23 27 29 34 38 45 54 62

Introducere
Aceste note sunt concepute ca baza unui curs de lecii pentru cei ce ncep studierea posibilitilor de creare i prelucrare a ediiilor electronice n reeaua Internet. Documentele plasate n Reea sunt accesibile unui numr enorm de utilizatori (conform datelor statistice n 1996 numrul calculatoarelor conectate la Reea a depit numrul de 10 mln, iar n 2000 s-a dublat. Numrul utilizatorilor Reelei n aceeai ani a fost de aproximativ 400 000 000 i 1 000 000 000 respectiv). Pentru publicarea electronic a unei ediii (n continuare vom folosi noiunea de document fiier care conine un anumit tip de date) este suficient plasarea ei legal pe un server informaional, conectat la Reea, capabil s transmit i s recepioneze informaii n formatul (protocolul) http (HyperText Transfer Protocol). Totalitatea serverelor informaionale care posed aceast proprietate a primit numele World Wide Web (www) / paingeni global / Plasarea documentului n reea prezint ultima etap a publicrii lui. Preprocesarea poate fi realizat iniial la orice calculator, indiferent de faptul este el conectat la Reea sau nu. Prelucrarea primar a textului este posibil n orice procesor de texte, apoi, n dependen de structura documentului poate fi realizat trecerea n formatul HTML sau completarea documentului cu elemente speciale n aplicaiile specializate.

Ce este HTML
Termenul HTML (HyperText Markup Language) se traduce din englez ca Limbajul de marcare a hipertextului. Prima versiune HTML a fost realizat de colaboratorul Laboratorului European pentru fizica particulelor elementare Tim Berners-Ly. Ca orice alt limbaj, HTML a cunoscut o dezvoltare continu. Astfel au aprut specificaiile 2.0, 3.0, 4.0. Este important c orice versiune ulterioar susine prelucrarea documentelor create n versiunile precedente. Specificarea curent a limbajului poate fi obinut

oricnd pe serverul http://www.w3.org/.

Ce este necesar pentru studierea HTML

n general studierea HTML presupune o anumit experien de utilizare a calculatorului cel puin la nivelul procesoarelor de text (Notepad, WordPad, Microsoft Word etc.), procesoarelor grafice (Adobe PhotoShop, Corel PhotoPaint), cunotine n clasificarea caracterelor digitale, a noiunilor de codificare binar i cod binar al caracterelor. Aparatul soft necesar este minim un procesor de text n care vei prelucra sursa documentului i un program browser n care vei realiza controlul asupra rezultatelor programrii (n calitate de browser standard poate fi folosit Microsoft Internet Explorer sau Netscape Communicator /Aceste dou sisteme de navigare sunt folosite de circa 90% a utilizatorilor de reea/). Suplimentar, dup acumularea experienei de creare a documentelor electronice vei putea nsui i un soft specializat pentru programare HTML, cum ar fi, de exemplu, Macromedia Flash. n calitate de instrument hard putei utiliza orice calculator cu sistem operaional Windows 95 sau superior, dotat cu monitor color, care funcioneaz n regim de 256 culori, Highcolor sau Truecolor. Tipologia proiectrii procesoarelor HTML. Exist dou principii de creare a documentelor HTML: 1. Tehnologia nchis. Se utilizeaz sisteme de tipul WYSIWYG (Wtat You See Is What You Get) ce vezi, aceea i vei primi (Microsoft Front page, Word, Netscape Editor). Utilizatorul nu are acces la sursa documentului, - el vede doar rezultatul. 2. Tehnologia deschis . Procesoare HTML propriu-zise. Utilizatorul ndeplinete rolul de programator crearea documentului este realizat direct prin modelarea sursei i utilizarea instruciunilor limbajului.

Capitolul 1 Structura unui document HTML simplu

Documentele HTML sunt fiiere text obinuite cu extensia *.html (n

sistemul UNIX *.htmll, iar n DOS *.htm). simplu document HTML are urmtoarea structur: <HTML> <HEAD> Antet </HEAD> <BODY>

Cel mai

Corp

</BODY> </HTML> Un exemplu de document HTML cu structur elementar este prezentat mai jos:
Exemplul 1.1
<html> <head> <title> Exemplul 1 </title> <H1> Exemplul 1 </H1> </head>

<body> <H1> SALUT! </H1> <P> E primul pas n lumea publicaiilor electronice. </P> <P> <B> Exercitiu </B> Scriei acest fiier ntr-un procesor de texte, salvai-l, i deschidei o copie a lui n Internet Explorer. </P> </body> </html>

Fig. 1 Exemplul 1.1 vizualizat n Internet Explorer

Tagurile (instruciunile-semne speciale utilizate pentru formatarea documentului) sunt separate pe linii aparte doar pentru comoditatea nelegerii. Sistemele browser ignoreaz spaiile suplimentare i semnele sfrinului de rnd din fiierele HTML. fiierul din exemplu ar putea arta i astfel:
<html> <head> <title> Exemplul 1 </title> </head> <body> <H1> SALUT! </H1> <P> E primul pas n lumea publicaiilor electronice. </P>

<P> <B>Exerciiu: </B> Scriei acest fiier ntr-un procesor de texte, salvai-l, i deschidei o copie a lui n Internet Explorer. </P> </body> </html>

E uor de observat c toat informaia despre formatul documentului se conine n tag-urile lui i nu n modul de aranjare a datelor surs (cum se ntmpl n documentele scrise). Tagurile se marcheaz cu semnele "<" i ">". De cele mai multe ori tagurile sunt pare , adic pentru fiecare <tag> de deschidere exist tagul de nchidere </tag> cu acelai nume, dar cu adugarea "/". Tagurile pot fi scrise att cu majuscule, ct i cu minuscule browserul le va nelege n acelai fel. Exemplu: <body>, <BODY> i <Body> sunt identice. Mai multe taguri conin, n afar de numele su atribute elemente, care poart informaii suplimentare despre aceea cum trebuie s fie prelucrat tagul. n exemplul propus asemenea atribute lipsesc, dar vor fi introduse n compartimentele urmtoare.

Taguri obligatorii
<html> ... </html> Tagul <html> deschide orice document HTML. La fel, tagul </html> nchide un document HTML. <head> ... </head> Aceast pereche de taguri marcheaz nceputul i sfritul prii de serviciu a documentului. De cele mai multe ori acest compartiment conine pe lng titlul (vezi descrierea tagului <title>) documentului mai multe date de serviciu, despre care vom vorbi n capitolele urmtoare. <title> ... </title> Toat informaia plasat ntre tagurile <title> i </title>, va fi interpretat ca titlul documentului. Majoritatea sistemelor browser vor include titlul n titlul ferestrei la deschiderea documentului, iar n cazul tiparului vor plasa acest titlu pe fiecare pagin a documentului tiprit. n general pentru titlu se recomand o secven din nu mai mult de 64 simboluri.

10

<body> ... </body> Aceast pereche indic nceputul i, respectiv sfritul corpului (coninutului) documentului HTML. <H1> ... </H1> <H6> ... </H6> Tagurile de tip <Hi> (i o cifr de la 1 la 6) descriu subtitluri de 6 nivele diferite (dup dimensiunea caracterelor). Subtitlul de nivel H1 este cel mai mare, respectiv de nivel H6 cel mai mrunt. <P> ... </P> Descrie un paragrag. Totul ce este inclus ntre o pereche <P> i </P> va fi considerat ca un singur paragraf. Tagurile <Hi> i <P> pot conine atributul auxiliar ALIGN (aliniere), de exemplu: <H1 ALIGN=CENTER> alinierea subtitlului pe centru </H1> sau <P ALIGN=RIGHT> Paragraf aliniat dup marginea dreapt </P> Vom totaliza acum cele studiate mai sus n urmtorul exemplu: Exemplul 1.2
<html> <head> <title> Exemplul 1.2</title> <H1 ALIGN=CENTER> Un document HTML putin mai complicat </H1> </head> <body> <H1 ALIGN=CENTER> Salut </H1> <H2> Este un exemplu mai complicat al documentului HTML </H2> <P> Acum noi cunoatem c textul poate fi aliniat nu numai la stinga </P> <P ALIGN=CENTER>dar i pe centru</P> <P ALIGN=RIGHT>sau pe partea dreapta </P> </body> </html>

11

Acum cunoatei suficient pentru a crea documente cu o structur elementar, ce conin text n formatul HTML. n cele ce urmeaz vom dezvolta aceste cunotine. Vom ncepe cu prelucrarea paragrafelor.

Fig. 2 Exemplul 1.2 vizualizat n browserul Intermet Explorer

12

Capitolul 2 Paragrafe
Taguri unitare (neperechi) Acest compartiment este destinat studierii tagurilor care nu se supun celor dou reguli principale HTML: ele sunt neperechi, iar unele (aa-numitele &- consecutiviti) se introduc doar cu simboluri minuscule. <BR> Acest tag se utilizeaz pentru a realiza trecerea forat n rndul urmtor fr nchiderea paragrafului. E comod n cazul scrierii versurilor, notelor etc. (vezi exemplul 2.1)
<html> <head> <title>Exemplul 2.1</title> </head> <body> <H1> Vers </H1> <H2> Femeia? Mr de ceart </H2> <H2 align=right> Femeia? Mr de ceart </H2> <P> Femeia? Ce mai este i acest mr de ceart <BR> Cu masca ei de cear i mintea ei deart,<BR> Cu-nfricoate patimi n fire de copil<BR> Cu fapta fr noim, cnd crud, cnd cu mil, <BR> A visurilor proprii etern jucrie? - </P> </body> </html>

Fig. 3 Exemplul 2.1 vizualizat n browserul Internet Explorer

13

<HR> Tagul <HR> descrie o linie orizontal: Tagul poate avea atribute auxiliare SIZE - determin limea liniei n pixeli WIDTH - determin lungimea liniei n % fa de limea ecranului, sau, n lipsa semnului % - n pixeli. Exemplul 2.2 v propune o colecie de linii orizontale.
<html> <head> <title>Exemplul 2.2</title> </head> <body> <H1>O colecie de linii orizontale </H1> <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=2 WIDTH=100><BR> <HR SIZE=4 WIDTH=50%><BR> <HR SIZE=4 WIDTH=50><BR> <HR SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=12%><BR> </body> </html>

Fig. 4 Linii n documentele HTML. Dup exemplul 2.2

14

&-consecutivit;<i
Simbolurile "<" i ">" sunt percepute de sistemele browser ca nceputuri i sfrituri de HTML-taguri. Apare ntrebarea, cum s reprezentm aceste simboluri pe ecran? n limbajul HTML aceasta se poate realiza cu ajutorul &consecutivitilor (ele se mai numesc obiecte simbolice sau escapeconsecutiviti). Exist mai multe consecutiviti de acest tip: "<" - &lt; ">" - &gt; "&" (ampersand) &amp; Ghilimelele(") se codific - &quot; Pentru escape-consecutiviti sunt dou restricii suplimentare: 1. Fiecare consecutivitate se scrie numai cu minuscule 2. Sfritul fiecrei consecutiviti este marcat de ; n general, asemenea consecutiviti exist pentru toate simbolurile cu codurile ASCII mai mari dect 127. Motivul este c unele servere nu susin transmiterea datelor cte 8 bii. Exist mai multe metode de a include semnele diacritice romne n documentele HTML. Cea mai simpl este codificarea direct a lor prin &-consecutiviti: > - &#258; A - &#350; - &Acirc; Exemplul 2.3:
<html > <head> <h2>Codificarea semnelor diacritice rom&acirc;ne&#351;ti &icirc;n limbajul HTML</h2> </head>

; - &#259; B - &#351; - &acirc;

- &Icirc; C - &#354;

- &icirc; < - &#355;

15

<p>Codificarea semnelor diacritice rom&acirc;ne&#351;ti &icirc;n limbajul HTML</p> <p> <b>&#258;</b> - &amp;&#35;258;</p> <p> <b>&#259; </b> - &amp;&#35;259;</p> <p> <b> &Icirc;</b> - &amp;Icirc;</p> <p> <b> &icirc;</b> - &amp;icirc;</p> <p> <b> &#350; </b> - &amp;&#35;350;</p> <p> <b> &#351; </b> - &amp;&#35;351;</p> <p> <b> &#354; </b> - &amp;&#35;354;</p> <p> <b> &#355; </b> - &amp;&#35;355;</p> <p> <b> &Acirc; </b> - &amp;Acirc;</p> <p> <b>&acirc; </b> - &amp;acirc;</p> </body> </html>

Alte metode de codificare a semnelor diacritice romne, utilizate pentru documentele cu un volum mare de text vor fi studiate n capitolul 6.

Comentarii Sistemele browser ignor reproducerea oricrui text situat ntre <!-- i -->. Este o opiune special pentru introducerea n textul documentului HTML a unor comentarii, ce nu for fi afiate pe ecran.
<!--Acesta e un comentariu --> Formatarea caracterelor HTML permite dou tipuri de formatare a fragmentelor de text. Primul tip direct: Pentru un careva fragment se indic toate caracteristicile necesare textului / caracter, dimensiune, variaie etc./ el de al doilea tip prin stiluri logice definite aparte i atribuite fragmentelor de text. Vom exemplifica aceste metode. Stiluri fizice

16

Prin stil fizic se nelege o directiv sistemului browser pentru modificare caracterelor dintr-un anumit fragment.

17

De exemplu: tot ce se conine n interiorul tagurilor <B> i </B>, se va scrie cu caractere semigrase. Fragmentul dintre tagurile <I> i </I> va fi nclinat. Un sens aparte l au tagurile <TT> i </TT>. Textul cuprins ntre aceste taguri se va scrie cu simboluri ce imit simbolurile mainii de scris caractere cu limea fix. Pentru prelucrarea manual a caracterelor este folosit perechea de taguri <FONT> ... </FONT>, care determin caracteristicile corpului de liter n fragmentul cuprins de aceast pereche. Tagul <FONT> este nsoit de mai multe atribute, principalele dintre ele fiind: FACE=[nume caracter] fixeaz corpul de liter (fontul) utilizat n fragment. Putei indica oricare din fonturile prezente pe calculatorul la care realizai pagina, dar s nu ateptai o prezentare identic a ei la alte staii de lucru. n cazul cnd la calculatorul, care ncarc pagina, lipsesc seturile respective de caractere, ele vor fi nlocuite de caracterele standard pentru sistemul local (de obicei Times, Verdana sau Arial pentru Windows, Helvetica pentru UNIX.) COLOR=[numele sau codul culorii] stabilete culoarea fragmentului. Mai detaliat despre fixarea culorii se vorbete n capitolul 5. SIZE=[indicele dimensiunii sau +|- ] dimensiunea caracterelor. Variaz ntre 1 i 7. n caz dac nu este stabilit, dimensiunea se stabilete egal cu 3 (ceea ce corespunde dimensiunii de 12 pt.). Dac se utilizeaz caracteristicile +|- are loc mrirea|micorarea caracterelor fa de dimensiunea fragmentului precedent. n tabelul ce urmeaz sunt prezentate stilurile fizice des utilizate (unele dintre ele nu sun susinute de toate sistemele browser, deci nu poate fi garantat rezultatul identic al afirii documentului n diferite medii) Formatarea Semigras Tagurile <B> </B> Comentarii

18

Italic Subliniat

<I> </I> <U> </U>

Deseori nu este susinut

19

Taiat Taiat Indice superior Indice inferior Masina de tapat Formatat Latime (caractere) Centrarea Licaritor Dimensiunea caracterelor Modificarea dimensiunii caracterului Dimensiunea de baza Selectarea caracterului Culoarea caracterului

<STRIKE> </STRIKE> <S> </S> <SUP> </SUP> <SUB> </SUB> <TT> </TT> <PRE> </PRE> <PRE WIDTH=?> </PRE> <CENTER> </CENTER> <BLINK> </BLINK> <FONT SIZE=?> </FONT> <FONT SIZE=+|-?> </FONT> <BASEFONT SIZE=?> <FONT FACE=***> </FONT> <FONT COLOR=#$$$$$$> </FONT>

Deseori nu este susinut

Caracter de masina pastreaza formatarea cum este latimea in simboluri si pentru grafica nu se recomanda de la 1 la 7

de la 1 la 7 (de regul 3)

Stiluri logice n cazul utilizrii stilurilor logice autorul documentului nu poate cu siguran spune, ce va apare pe monitorul cititorului. Diferite sisteme browser interpreteaz aceste stiluri n mod diferit. Se poate ntmpla c unele stiluri sunt ignorate i n locul or apare text standard, fr elemente de formatare. Dintre cele mai utilizate stiluri logice vom meniona urmtoarele:

20

<EM> ... </EM> text accentuat <STRONG> ... </STRONG> text puternic accentuat <CODE> ... </CODE> e recomandat pentru afiarea fragmentelor surselor documentelor <SAMP> ... </SAMP> - de la sample (eng.) Se recomand pentru demonstrarea comunicrilor afiate de programe. <KBD> ... </KBD> de la keyboard (eng.) tastatur. Se recomand pentru evidenierea fragmentelor, ce trebuie introduse de la tastatur. <VAR> ... </VAR> de la variable variabil. Se recomand pentru a scrie numele variabilelor. Exemplul 2.3. Vom generaliza cunotinele despre stilurile fizice i logice cu ajutorul exemplului de mai jos:
<html> <head> <title>Exemplul 2.3</title> </head> <body> <H1>Marcarea i formatarea fragmentelor de text</H1> <P>Acum cunoatem, c fragmentele de text pot fi evideniate <B>semigras</B> , <I>cursiv</I> sau <U> subliniat </U>. De asemenea pot fi introduse fragmente cu caractere de lime fix <TT>(imitarea mainii de dactilografiat)</TT></P> <P>Mai exist i stiluri logice:</P> <P><EM>EM de la englezul emphasis - accent </EM><BR> <STRONG> STRONG de la englezul strong emphasis - accent puternic </STRONG><BR> <CODE>CODE pentru fragmente de cod</CODE><BR> <SAMP>SAMP de la englezul sample - exemplu </SAMP><BR> <KBD>KBD - de la englezul keyboard tastatur </KBD><BR> <VAR>VAR - de la englezul variable - variabil </VAR></P> </body> </html>

21

Capitolul 3 Organizarea textului n documentele HTML

Limbajul HTML v permite s structurai paragrafele de text, incluznd n ele liste cu numerotare sau fr ea, sau deplasnd marginea stng a paragrafului fa de linia stng de baz a documentului. Liste f;r; numerotare: <UL> ... </UL> Textul inclus ntre tagurile <UL> i </UL>, este perceput ca o list fr numerotare. Fiecare element al listei ncepe cu tagul nepereche <LI>. De exemplu, pentru a obine lista: Jurnalistica; Comunicare; Biblioteconomie Va fi nevoie de urmtoarea secven HTML: <UL> <LI>Jurnalistica; <LI>Comunicare; <LI>Biblioteconomie </UL> Pentru o amplasare mai compact a elementelor listei fr numerotare vom folosi n tagul <UL> atributul COMPACT: <UL COMPACT> </UL> Schimbarea elementului pentru marcare se realizeaz prin atributul TYPE= DISC | CIRCLE | SQUARE la tagul <UL> (pentru toat lista) i la tagul <LI> pentru elementele, ncepnd cu cel curent <UL TYPE=DISC> ... </UL> <UL TYPE=DISC> ... <LI TYPE=SQUARE> </UL> Liste numerotate: <OL> ... </OL> Listele numerotate se obin exact la fel ca cele fr numerotare, att c n locul marcherilor la nceputul fiecrui element

22

al listei va apare cifra corespunztoare.

23

Astfel, secvena: <OL> <LI>Jurnalistica; <LI>Comunicare; <LI>Biblioteconomie </OL> va genera urmtorul fragment HTML 1. Jurnalistica; 2. Comunicare; 3. Biblioteconomie Ca i n cazul listelor fr numerotare, vom obine o amplasare mai compact a elementelor prin atributul COMPACT n tagul <OL>. Tipul de numerotare poate fi indicat prin atributul <OL TYPE= A | a | I | i | 1 > pentru toat lista i <LI TYPE= A | a | I | i | 1 > pentru elementele ncepnd cu cel curent. Exist cinci tipuri de numerotare: prin elemente ale alfabetului (Majuscule i minuscule), cu numere romane (utiliznd litere mari i mici), cu numere arabe. Numerotarea listei poate starta automat (de la A, a, I, i, 1) sau de la un numr specificat de noi prin atributul <OL START=?> (pentru toat lista) sau <LI VALUE=?> (pentru elementele, ncepnd cu cel curent) Liste de defini<ii: <DL> ... </DL> Listele de definiii au o structur deosebit de celelalte tipuri de liste. Penttru marcarea elementelor listelor de definii se vor folosi tagurile <DT> (de la definition term noiune definit) i <DD> (de la definition definition definiia noiunii). Vom cerceta un exemplu Fie c ne este dat urmtorul fragment de text HTML: <DL> <DT>HTML <DD>Noiunea HTML (HyperText Markup Language) se descifreaz ca Limbaj de marcare a hipertextelor. Prima versiune a limbajului HTML a fost elaborat de colaboratorul Laboratorului European de Fizic a particulelor Elementare Tim Berners-Ly.

24

<DT>Document HTML

25

<DD>Fiier text cu extensie *.html (n alte sisteme operaionale denumirea fiierului e nsoit de extensia *.htmll sau *.htm). </DL> Fragmentul va apare pe monitor n modul urmtor: HTML Noiunea HTML (HyperText Markup Language) se descifreaz ca Limbaj de marcare a hipertextelor. Prima versiune a limbajului HTML a fost elaborat de colaboratorul Laboratorului European de Fizic a particulelor Elementare Tim Berners-Ly. Document HTML Fiier text cu extensie *.html (n alte sisteme operaionale denumirea fiierului e nsoit de extensia *.htmll sau *.htm). La fel ca tagul <LI>, tagurile <DT> i <DD> sunt nepereche. n cazul, cnd noiunea definit este suficient de scurt poate fi utilizat formatul listei de definire <DL COMPACT>, care micoreaz deplasarea textului definiieifa de marginea stng. Liste incluse Orice element al unei liste poate conine n sine liste integrale subordonate. Numrul de nivele pentru listele subordonate nu este limitat, dar trebuie s inei cont de dimensiunile fizice ale paginilor. Acest tip de liste este des utilizat pentru generarea cuprinsurilor, planurilor etc. Pentru a generaliza cunotinele noastre despre liste vom genera exemplul 3.1:
<html> <head> <title>Exemplul 3.1</title> </head> <body> <H1>HTML poate lucra cu cteva tipuri de liste</H1> <DL> <DT><B>Liste fr numerotare </B> <DD>Elementele listelor fr numerotare se evideniaz prin deplasare spre dreapta i un semn special:

<UL> <LI>Element 1 <LI>Element 2 <LI>Element 3 </UL> <DT><B>Liste cu numerotare </B> <DD>Elementele listei cu numerotare se marcheaz prin deplasare spre stnga i un numr: <OL> <LI>Element 1 <LI>Element 2 <LI>Element 3 </OL> <DT><B>Liste de definiii </B> <DD>Acest tip de liste este mai complicat dect precedentele, dar ne ofer mai multe posibiliti n lucru. <P>Listele pot fi incluse una n alta, dar nu facei abuz de aceast posibilitate. </P> <P>Un element al listei poate conine mai multe paragrafe. n acest caz toate vor ncepe din aceeai poziie de stnga </P> </DL> </body> </html>

Textul preformatat: <PRE> ... </PRE> n unul din capitolele precedente am vorbit despre aceea, c limbajul HTML ignor spaiile excesive i semnele de sfrit a rndului. Exist totui o excepie: textul marcat de tagurile <PRE> i </PRE> (de la preformatted formatat prealabil), va fi expus de browser pe monitor exact aa cum a fost scris: cu toate spaiile, semnele de tabulare i de trecere din un rnd n altul.De cele mai multe ori acest stil se utilizeaz pentru crearea tabelelor simple. Text deplasat: <BLOCKQUOTE> ... </BLOCKQUOTE> Textul amplasat ntre tagurile <BLOCKQUOTE> i

</BLOCKQUOTE>, va fi deplasat spre dreapta fa de linia stng de baz a paragrafului

Capitolul 4 Legturi ntre fiierele HTML Lincajul

n capitolele precedente am vorbit destul de mult despre posibilitile de marcare a textului n fiierele HTML. S nu uitm ns i de posibilitile limbajului de prelucrare a hipertextului. Ce este hypertextul? Este un text, care, spre deosebire de textul clasic (care se citete consecutiv), permite trecerea (i citirea) secvenial. Dup acest principiu sunt organizate sistemele HELP pentru majoritatea produselor soft, i desigur documentele HTML cu structur desfurat. n documentele HTML trecerea de la un fragment al textului la altul se realizeaz prin tagurile: <A HREF="[adresa de trecere]"> fragment de text evideniat </A> Parametrul [adresa de trecere] poate fi de cteva tipuri. Cel mai simplu tip numele altui document HTML la care se face trecerea. Forma general: <A HREF="nume fiBier">Comentariu</A> Exemplu: <A HREF="index.html">Trecere la index</A> Acest fragment de HTML text va genera apariia n document a unui fragment marcat (de regul - albastru,subliniat ex: Trecere la index). La apsarea butonului stng mouse pe acest fragment se va realiza trecerea la fiierul index.html. Remarc; Dac n adresa de trecere nu este indicat calea la fiier, cutarea adresei se va face doar n dosarul curent! Dac n adresa de trecere nu este indicat serverul, cutarea se va realiza pe

serverul curent. Urmeaz o concluzie important: Dac ai pregtit pentru publicaie un grup de documente HTML cu lincaje reciproce

numai dup nume, i care sunt stocate n acelai dosar vei obine acelai mod de lucru a lor la copierea dosarului pe orice alt calculator, n reea local sau Internet. De aici rezult i principiul de baz al pregtirii coleciilor de documente HTML pentru publicare n Internet: elaborarea i ajustarea documentelor i legturilor se va realiza ... fr Reea! Colecia poate fi amplasat pe Internet doar dup finalizarea etapei de elaborare. Un alt tip de adresare este o pozi<ie interioar; specificat; (fie n documentul curen, fie n alt document HTML). Pentru a realiza acest tip de trecere, poziia de adresare trebuie marcat prin o ancor; (punct de reper). Ancora se declar n felul urmtor: <A NAME="nume ancor;">Comentariu</A> iar trecerea: <A HREF="nume fiBier#nume ancor;">Comentariu</A> Vom cerceta un exemplu. Fie c din fiierul trebuie s realizm trecere 1.html la fragmentul Sfritul trecerii din fiierul 2.html (Fiierele se afl n acelai catalog). Mai nti se creaz ancora n fiierul 2.html: <A NAME="AAA">Sfritul trecerii</A>. La aceast etap n documentul 2.html fragmentul Sfritul trecerii nu este evideniat n raport cu restul textului La urmtorul pas n fiierul 1.html (sau oricare altul) vom defini adresarea la ancora din 2.html: <A HREF="2.html#AAA">Trecerea la ancora din 2.html AAA</A> Pentru trecerea la un loc fix n interiorul aceluiai document este suficient s definim ancora la el n modul urmtor: <A NAME="nume ancor;">Comentariu</A> Trecerea: <A HREF="#nume ancor;">Comentariu</A> Exemplu: <A HREF="#AAA">Trecerea la ancora AAA</A>

Utilizarea trecerilor n interiorul documentelor este foarte comod n cazul crerii documentelor de volum mare: La nceputul paginii se creaz cuprinsul ei, format din treceri la anumite ancore plasate la nceputul fiecrei secii a documentului. Note: Utilizai pentru denumirile ancorelor doar litere ale alfabetului englez, respectnd pentru toate apariiile numelui ancorei acelai mod de scriere a lui: majoritatea sistemelor browser difereniaz majusculele i minusculele din numele anchorelor. n afar de adresrile la documentele HTML sunt acceptate i adresri la alte tipuri de documente. Dac, de exemplu, colecia de documente conine o bibliotec de fiiere (arhive, imagini etc.) pentru care e permis transferul la cererea clientului pe discul lui, activarea transferului o putei realiza prin: <A HREF="ftp://<nume fiBier>"> Comentariu</A> server>/<cale directory>/ <nume

Exemplu <A HREF="ftp://server/directory/ fiierul</A>

<nume

fiier>">

Copiai

Aceast consecutivitate, inclus n documentul HTML va activa protocolul de transfer al fiierelor i va realiza copierea fiierului <nume fiier> din dosarul <cale directory> plasat pe serverul <nume server> pe discul local al clientului . <A HREF="mailto:user@mail.box">Comentariu</A> Dac va fi activat o asemenea adresare pe calculatorul local al clientului se va activa programul lui potal, secia de trimitere a mesajelor. n compartimentul To (Cui) va fi inclus adresa user@mail.box. Vom generaliza cunotinele despre legturi cu ajutorul exemplului 4.1.
<HTML> <HEAD> <A NAME=Begin >

<TITLE>Exemplul 4.1</TITLE> </HEAD> <BODY> <H1>Legturi </H1> <P>Cu ajutorul indicilor poate fi realizat trecerea la alte documente HTML (de exemplu la <A HREF="Exemplu6.html"> Exemplul precedent </A>).</P> <P> Avei posibilitatea s transferai fiiere (de exemplu, <A HREF="ftp://www.nokia.com/ usersguide/3310.pdf"> Ghidul de utilizare pentru Nokia 3310 n format PDF</A>) prin protocolul FTP.</P> <P>Putei permite clientului s trimit un mesaj (de exemplu, <A HREF="mailto:scorlat@mail.md"> autorului </A>).</P> <P>Putei reveni la inceputul documentului <A HREF=#Begin>Revenire la inceput </A>).</P> </BODY> </HTML>

Capitolul 5 Prelucrarea culorilor

Gama de culori n documentele HTML La fel ca majoritatea altor sisteme, limbajul HTML v permite s prelucrai culorile elementelor documentului, pentru a-i atribui un aspect elegant. Pentru atribuirea i prelucrarea culorilor se folosete un set special de atribute, aplicate la tagurile de baz. De cele mai multe ori ns nu putei fi siguri de rezultatul afirii culorilor pe monitorul utilizatorului din motivul c ele pot fi modificate de presetrile sistemului browser, instalat pe calculatorul lui. Atributele de stabilire a culorii sunt urmtoarele: Bgcolor - determin culoarea fonului documentului. Text culoarea textului link - culoarea fragmentului de text, care corespunde unei treceri n document sau n afara lui. Vlink - culoarea fragmentului de text, care corespunde unei treceri n document sau n afara lui, care a fost deja prelucrat. alink - culoarea fragmentului de text, care corespunde unei treceri n document sau n afara lui n momentul trecerii cursorului pe suprafaa ei. Culoarea se indic prin numele su (pentru culorile de baz: Red, Blue, Green, etc.) sau prin un cod din 6 simboluri cte 2 pentru fiecare din culorile primare ale standardului RGB (rou, verde, albastru) marcnd gradul intensitii culorii de la 00 (0) la FF (255). n general pentru indicarea intensitii culorii primare se utilizeaz codul hexazecimal al unui numr zecimal ntre 0 i 255. Culorile mixte se formeaz prin amestecul culorilor primare. Nuanele dorite pot fi obinute prin modificarea intensitilor culorilor primare. O metod simpl de determinare a intensitii dorite a culorii este obinerea nuanei n unul din sistemele grafice (Adobe Photo Shop, Corel Photo Paint), i stabilirea gradului de

intensitate a culorilor primare n acest

sistem. Dup stabilirea intensitii pentru culorile primare calculai codul hexazecimal al intensitilor i utilizai-l n documentul HTML. n unele cazuri putei utiliza numele culorii de baz prefixate de light sau dark, pentru a obine nuanele mai deschise sau mai ntunecate ale culorii, fr a executa experimentarea prin coduri hexazecimale. Atributele de gestionare a culorilor se includ n tagul <BODY>: <BODY bgcolor=#FFFFFF > Culoarea fonului. Intensitatea culorii roii, verzi, albastre este aceeai FF (255). Rezultatul culoarea alb. <BODY text=#000000 > Culoarea textului. Intensitatea culorii roii, verzi, albastre este aceeai 00 (0). Rezultatul culoarea neagr. <BODY link=#0000FF > Culoarea unui link. Pentru culoarea albastr intensitatea este FF (255), pentru verde i rou 00 (0). Rezultat culoarea albastr. n unele cazuri n afar de culorile uniforme, definite direct, poate fi folosit i un fon bazat pe imagine (tapet). Imaginea este de obicei de dimensiuni mici i este multiplicat de sistemul browser pe toat suprafaa documentului. Pentru a evita rupturile de fon urmeaz s selectai imagini, care au o structur simetric. Formatul grafic recomandat pentru imaginile tapet este GIF sau JPG. Anexarea tapetului se va realiza prin atributul background="nume fisier imagine" n tagul <BODY>. Este important faptul c fonul uniform sau tapet nu se imprim n cazul tiparului pe hrtie. Din acest motiv urmeaz s evitai utilizarea textului de culoare alb. n calitate de exemple pentru acest capitol putei utiliza documentele propuse n capitolul 9 al acestei lucrri.

Capitolul 6 Antetul HTML. Elemente invizibile

n general, antetul documentului nu este vzut de utilizator, dar conine unele elemente utile pentru documentul propriu-zis. Antetulconine un set (volumul lui nu este limitat) de metainstruciuni. <META NAME="description" CONTENT="Documentul contine informatii din domeniul istoriei "> Aceast META instruciune determin variabila description, care conine o descriere succint a documentului. Majoritatea sistemelor de cutare scaneaz resursele INTERNET, cutnd n documente aceast variabil, o plsaeaz n bazele sale de date i transmit informaia despre sursa respectiv la apariia cererilor de cutare. Astfel se realizeaz procesul de cutare pe serverele google.com, rambler.ru, altavista.com, yandex.com etc. <META NAME="keywords" CONTENT="Internet, HTML, WWW, hipertext, manual"> META-instruciunea definete variabila keywords, ce conine cuvintele cheie, care descriu documentul. Procesul de cutare n sistemele specializate se realizeaz dup coninutul acestei variabile. Alt grup de META-instruciuni determin echivalentele protocolului de transmitere a hipertextului. De exemplu: <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251"> Browserul va interpreta datele recepionate ca text HTML n codificare Windows/1251. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r">

Browserul va interpreta datele recepionate ca text HTML n codificare koi8-r. <META HTTP-EQUIV="Refresh" CONTENT="[timp]; URL=[adres document]"> META-instruciunea se interpreteaz astfel: dac la expirarea intervalului de timp [timp] (n secunde) dup ncrcarea documentului curent utilizatorul nu trece la alt document HTML, va ncepe ncrcarea automat a documentului dat de [adres document]. Exemplu <META HTTP-EQUIV="Refresh" CONTENT="30; URL=http://www.usm.md> Dac n 30 secunde dup ncrcarea documentului curent nu va apare nici o aciune din partea utilizatorului, va ncepe n mod automat ncrcarea paginii http://www.usm.md META-instruciunea Refresh poate fi folosit n cazurile, cnd ai deplasat pagina de pe un server pe altul. Pentru a nu pstra o copie a paginii pe serverul vechi, putei lsa un mesaj scurt despre readresare, care va conine instruciunea Refresh i noua adres a documentului. Dac n calitate de [nume fiier] vom indica un fiier de sunet, peste [timp] secunde dup ncrcarea documentului HTML va ncepe pomparea , iar apoi derularea pe calculatorul utilizatorului (cu condiia c sistemul browser, utilizat de el susine acest format de sunet) a fiierului cu date sonore. Este comod de utilizat n calitate de apeluri de salut. Exemplul care va urma (exemplul 6.1) este format din mai multe (cinci) fiiere HTML. Vom organiza un slide-show al acestor fiiere, utiliznd meta instruciunea Refresh (fiierele se vor numi e0009.html, e0009a.html e0009b.html, e0009c.html, i e0009d.html), stoparea procesului demo poate fi realizat,

folosind oricare din lincurile de trecere spre fiierul de start sau final.

<HTML> <!--fisierul e0009.html --> <HEAD> <TITLE>Exemplul 9</TITLE> <H1> Fisierul pentru startarea slide-show </h1> </HEAD> <BODY > <H2> A fost odata un BIT. <br> Stiti ce a fost mai apoi? <br> Pentru a afla activati link-ul respectiv </H2> <P align=center> [<A HREF="e0009a.html">Start</A> ]</P> </BODY> </HTML><!- - sfirsitul e0009.html --> <HTML><!--fisierul e0009a.html --> <HEAD> <TITLE>Exemplul 9a</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="5; URL=e0009b.html"> </HEAD> <BODY> <H1>Slide-show al documentelor HTML <BR> realizat prin META instructiunea Refresh </H1> <font size=6> <P><b>Generatia 1</b> BIT-ul s-a divizat in 3 <br> Astfel au devenit 3 </P> </font> <P>[<A HREF="e0009.html">Revenire spre inceput</A>| <A HREF="e0009d.html">Spre sfirsit</A>]</P> </BODY> </HTML><!--sfirsit fisier e0009a.html --> <HTML><!--fisierul e0009b.html --> <HEAD> <TITLE>Exemplul 9b</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="5; URL=e0009c.html"> </HEAD> <BODY> <H1>Slide-show al documentelor HTML <BR> realizat prin META instructiunea Refresh </H1> <font size=6> <P><b>Generatia 2</b> Fiecare din cei 3 biti s-a divizat in 3<br> Astfel au devenit 9 </P>

</font> <P>[<A HREF="e0009.html">Revenire spre inceput</A>| <A HREF="e0009d.html">Spre sfirsit</A>]</P> </BODY> </HTML><!--sfirsit fisier e0009b.html --> <HTML><!--fisierul e0009c.html --> <HEAD> <TITLE>Exemplul 9c</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="5; URL=e0009a.html"> </HEAD> <BODY> <H1>Slide-show al documentelor HTML <BR> realizat prin META instructiunea Refresh </H1> <font size=6> <P><b>Generatia 3</b> Cei 9 biti au format un BYTE si un BIT <br> BYTE-ul a codificat un simbol, lasind BIT-ul singur </P> </font> <P>[<A HREF="e0009.html">Revenire spre inceput</A>| <A HREF="e0009d.html">Spre sfirsit</A>]</P> </BODY> </HTML><!--sfirsit fisier e0009c.html --> <HTML> <!--fisierul e0009d.html --> <HEAD> <TITLE>Exemplul 9d</TITLE> <H1> Fisierul slide-show final</h1> </HEAD> <BODY > <H2 align=center> Este ultima parte din Istoria UNUI BIT. <br> MEMORY OVERFLOW ERROR! </H2> </BODY> </HTML><!- - sfirsitul e0009d.html -->

Semnele diacritice romneBti n META instruc<iuni. n unul din capitolele precedente am vorbit deja despre codificarea direct a semnelor diacritice prin &consecutiviti. O alt metod este indicarea n meta instruciune a paginii de codificare utilizate pentru documentul dat:

<meta http-equiv=Content-Type content="text/html; charset=windows-1250"> Acest tip de codificare este util n cazul documentelor de volum mare, ce conin un numr considerabil de semne diacritice, deoarece reduce volumul codului total al documentului. Exemplul 6.2:
<html > <head> <meta http-equiv=Content-Type content="text/html; charset=windows1250> <h2>Codificarea semnelor diacritice romneti n limbajul HTML</h2> </head> <p>Codificarea semnelor diacritice romneti n limbajul HTML</p> <p> <b></b> - </p> <p> <b> </b> - </p> <p> <b> </b> - </p> <p> <b> </b> - </p> <p> <b> </b> - </p> <p> <b> </b> - </p> <p> <b> </b> - </p> <p> <b> </b> - </p> <p> <b> </b> - </p> <p> <b> </b> - </p> </body> </html>

Nu uitai, c pentru a vizualiza corect coninutul paginii utilizatorul trebuie s fixeze tipul respectiv de codificare i n sistemul su de navigare (n cazul nostru Central European ISO sau Windows). n cazul, cnd documentul conine fragmente mari de text cu semne diacritice, o soluie mai comod ar fi prepararea fragmentelor respective n procesorul de text WORD cu memorizare ulterioar ca document HTML. n acest caz, ns, dimensiunea documentului va fi mult mai mare, datorit codului HTML excesiv generat de procesorul de text.

Capitolul 7 Imagini n documentele HTML

Exist mai multe standarde grafice ale imaginilor, dar, de cele mai multe ori, ncercrile de a plasa o imagine n format grafic ce nu permite compresarea datelor va duce la mrirea nemotivat a spaiului de memorie ocupat de documentul respectiv. La moment se accept pentru includere n documentele HTML imagini n formatele GIF i JPG, formate care permit compresarea intern a datelor din imagine. Standardul de culoare a imaginii nu este primordial, dar vom recomanda (pentru imaginile color) standardul RGB. Majoritatea absolut a dispozitivelor pentru obinerea imaginilor digitale (scanere, camere video, aparate foto) utilizeaz acest standard i tot el este folosit pentru reproducerea culorilor la monitor (pentru monitoarele cu tub electronic). n cele ce urmeaz vom presupune c imaginea exist, * e plasat n dosarul curent sau se cunoate calea spre ea. Fie c trebuie s includem n document imaginea picture.gif, plasat n acelai dosar cu documentul HTML. Vom folosi n acest caz tagul: <IMG SRC="picture.gif"> Tagul <IMG SRC="[numele fiBierului]"> poate conine atributul adiional ALT="[text]", de exemplu: <IMG SRC="picture.gif" ALT="Se transmite"> ntlninn n documentul HTML un asemenea tag sistemul browser va afia mai nti textul Se ncarc... apoi va ncepe ncrcarea imaginii din fiierul picture.gif. Acest atribut este comod n special cnd vizualizarea se efectuiaz pe un browser vechi, ce nu permite vizualizarea imaginilor sau n cazul cnd ncrcarea automat a imaginilor este deconectat (pentru a mri viteza de acces.). n cazul cnd fiierul imagine se afl n alt dosar sau pe alt server n tag se va indica calea complet la el:
*

n procesul de realizare a exemplelor ulterioare, n care se utilizeaz imagini, vei nlocui numele imaginilor din exemple prin numele imaginilor reale, prezente pe

staia de lucru. n cazul lipsei imaginilor, pe pagin va apare un dreptunghi care va marca locul ipotetic al ampalsrii imaginii

<IMG SRC="calea la fiBier" > Exemplu: <IMG SRC="C:\Album\Cars\v2108.jpg" > Urmtorul exemplu (7.1) va ilustra plasarea simpl a imaginii n document.
<HTML> <HEAD> <TITLE>Exemplul 7.1</TITLE> </HEAD> <BODY> <H1>Imagini</H1> <P>Imaginea se plaseaz simplu de tot: </P> <P><IMG SRC="picture.gif"></P> <P>Adiional, imaginea poate fi activ adic se va deschide n o fereastr separat la realizarea unui click pe imagine :</P> <P><A HREF="picture.gif"> <IMG SRC= "picture.gif"> </A></P> </BODY> </HTML>

n cea de a doua parte a exemplului se ilustreaz cum imaginea devine de facto un buton la apsarea cruia se realizeaz trecerea dup legtura stabilit. Pentru aceasta trecerea va fi plasat ntre tagurile <A HREF="..."> i </A>. Dac dimensiunile imaginii sunt prea mari, putem fixa forat nlimea i limea spaiului ocupat de imagine pe suprafaa documentului HTML. Este suficient s indicm n tagul <IMG SRC> atributele WIDTH=? i HEIGHT=?, care vor fixa limea i corespunztor nlimea imaginii n pixeli. Un exemplu de utilizare a acestor atribute l vei ntlni n capitolul urmtor, la crearea galeriilor de imagini cu ajutorul tabelelor. Alinierea imaginii fa de marginile documentului se realizeaz la fel ca i pentru text, cu ajutorul atributului ALIGN=LEFT | CENTER | RIGHT. Utilizarea referinelor grafice permite optimizarea ncrcrii paginii ce conine imagini. Pe pagina de baz se includ copii de dimensiuni mici i rezoluie joas ale imaginilor (ele se vor transmite mult mai repede dect originalele) i prin intermediul lor se fac referine la imaginile originale. Fie c avem imaginea calitativ 1.jpg

i copia ei de rezoluie joas 1a.jpg. Vom folosi referirea:

<P><A HREF="1.jpg"> <IMG SRC= "1a.jpg"> </A></P>

Pe pagin va fi afiat copia de rezoluie joas, dar imediat ce pe aceast copie se realizeaz un click, pe o pagin aparte se ncarc originalul imaginii. Amplasarea comun a imaginii i textului depinde n general de alinierea textului i a imaginii. Dac dup amplasarea imaginii este suficient loc n partea paginii, dup care se aliniaz textul, el se va plasa alturi de imagine. n caz contrar se va plasa sub ea. Realizai urmtorul exemplu, urmrii rezultatul, apoi excludei alinierea imaginii dup partea dreapt. Observai care va fi efectul amplasrii elementelor paginii: Exemplul 7.2
<HTML> <HEAD> <H1> Imagini si text </H1> <body bgcolor=lightyellow> </HEAD> <BODY> <H1> Caracteristica tehnica a vehiculului <font color=lightgreen face="Arial Black"> VAZ 2108 </font> </H1> <IMG SRC="imagini\16.jpg" align=right height=400 width=300> <P> Este unul din cele mai reusite modele ale vehiculelor de clasa medie pentru mijlocul anilor 80 ai secolului trecut in spatiul postsovietic. Produsa la uzina de automobile din orasul Toliatti a castigat rapid piata sovietica de automobile, raminind si pana in prezent unul din cele mai populare si neperetentioase modele de autovehicul. </P> <UL> <LI> Capacitate motor - 1300 cm³ <LI> Usi - 3 <LI> Viteza maxima - 160 km/h <LI> Consum mediu - 7 l / 100 km <LI> Numar de locuri - 5 <LI> Masa totala - 960 kg <LI> Dotare suplimentara - casetofon </ul> </BODY> </html>

Fig. 5 Exemplul 7.2 vizualizat n browserul Internet Explorer

Capitolul 8 Tabele
Tabelele sunt elemente pseudografice (sau grafice, n dependen de modul de construcie i codificare a separatorilor) n care informaia este stocat n celule aparte, fiecare celul avnd caracteristicile sale proprii(dimensiunile, culoarea, formatul textului, ). De aici i principala destinaie prezentarea structurat a textului. Mai sunt ns i alte moduri, mai puin cunoscute, de utilizare a tabelelor. Un exemplu ar fi prezentarea informaiei din documentul HTML n mai multe coloane. Alt utilizare evidenierea unor fragmente de text sau crearea n celulele tabelului a unei galerii fotografice. n general divizarea informaiei n tabel se face pe linii, iar n interiorul liniilor pe celule. De aici i principalele elemente de dirijare pentru tabele: tagurile <TR> ... </TR> pentru marcarea nceputului i sfritului liniei de tabel i <TD> ... </TD> pentru marcarea inceputului i sfritului celulei. Structura tabelului Exemplul 8.1
<HTML> <HEAD> <TITLE>Exemplul 10</TITLE> </HEAD> <H1>Un tabel elementar</H1> <TABLE BORDER=1> <!--nceputul --> <CAPTION> <!--Antetul tabelului--> Tabelul poate avea antet </CAPTION> <TR> <!--nceputul liniei--> <TD> <!--nceputul celulei--> Linia 1 Coloana 1 </TD> <!--Sfritul celulei 1--> <TD> <!--1nceputul celulei 2-->

Linia 1 Coloana 2

</TD> <!--Sfritul celulei 2--> </TR> <!--Sfritul liniei 1--> <TR> <!--nceputul liniei 2--> <TD> <!-- nceputul celulei 1--> Linia 2 Coloana 1 </TD> <!-- Sfritul celulei 1--> <TD> <!-- nceputul celulei 2--> Linia 2 Coloana 2 </TD> <!-- Sfritul celulei 2--> </TR> <!-- Sfritul liniei 2--> </TABLE> <!-- Sfritul tabelului--> </BODY> </HTML>

<TABLE> ...</TABLE>. - marcheaz nceputul i sfritul tabelului. Tagul <TABLE> poate fi nsoit de cteva atribute: ALIGN Fixeaz aranjarea tabelului fa de marginile paginii documentului. Permite alinierea la stnga (ALIGN=LEFT) centru (ALIGN=CENTER) i dreapta (ALIGN=RIGHT) WIDTH - limea tabelului. Poate fi indicat n puncte (pixeli) sau n procente de la limea paginii: (WIDTH=500 limea de 500 puncte) (WIDTH=60% - 60% din limea paginii). BORDER fixeaz limea liniilor de separare ntre elementele tabelului i pe perimetrul lui. Dac atributul BORDER nu este indicat tabelul va apare fr linii de separare. CELLSPACING Fixeaz distana ntre frontierele a dou celule alturate n puncte. Exemplu (CELLSPACING=2). CELLPADDING Fixeaz distana dintre frontiera celulei i textul din ea n puncte. Exemplu (CELLPADDING=10).

Tabelul poate avea un antet (este marcat de perechea de taguri <CAPTION> ... </CAPTION>). Tagul <CAPTION> permite utilizarea atributului ALIGN. Valori admisibile: <CAPTION ALIGN=TOP> (de asupra tabelului) i <CAPTION ALIGN=BOTTOM> (sub tabel). nceputul unei linii a tabelului este marcat de tagul <TR> iar sfritul de tagul </TR>. Tagul <TR> permite utilizarea urmtoarelor atribute: ALIGN fixeaz alinierea textului (sau altor elemente) n celulele tabelului. Variante: ALIGN=LEFT (la stnga), ALIGN=CENTER (la centru), ALIGN=RIGHT (spre dreapta). VALIGN Fixeaz alinierea vertical a textului (sau altor elemente) n celulele rndului. Variante: VALIGN=TOP (dup marginea de sus), VALIGN=MIDDLE (dup mijloc), VALIGN=BOTTOM (dup partea de jos). Celulele tabelului se marcheaz prin perechea de taguri <TD> ...</TD>. Pentru tagul <TD> pot fi utilizate urmtoarele atribute: NOWRAP tot coninutul celulei va fi plasat fr ruperi ntr-un singur rnd. COLSPAN - fixeaz "extinderea" celulei pe orizontal (cte celule vecine vor fi asimilate de celula curent). Exemplu, COLSPAN=4 celula se va extinde pe 4 coloane. ROWSPAN - fixeaz "extinderea" celulei pe vertical (cte rnduri vecine vor fi asimilate de celula curent).Exemplu ROWSPAN=2 celula ocup dou linii. ALIGN fixeaz alinierea textului n celul. Variante: ALIGN=LEFT (spre stnga), ALIGN=CENTER (dup centru), ALIGN=RIGHT (spre dreapta).

VALIGN - Fixeaz alinierea vertical a textului (sau altor elemente) n celul. Variante: VALIGN=TOP (dup marginea de sus), VALIGN=MIDDLE (dup mijloc), VALIGN=BOTTOM (dup partea de jos). WIDTH fixeaz limea celulei n puncte (pixeli). Exemplu (WIDTH=200). HEIGHT - fixeaz nlimea celulei n puncte (pixeli). Exemplu (HEIGHT=40). Dac n celul nu este informaie, n jurul ei nu apare contur. Pentru a evita situaiile de asimetrie n cazul utilizrii celulelor libere, introducei n calitate de informaie simbolul &nbsp (nonbreaking space spaiu fix). Celula va rmne liber, dar conturul ei va fi prezent. Not;: Tabelele pot fi incluse - in orice celul a tabelului putei insera un alt tabel. Exemplul 8.2 Tabele formatate
<HTML> <HEAD> <TITLE>Exemplul 10a</TITLE> </HEAD> <H1>Un tabel elementar cu elemente de formatare</H1> <TABLE BORDER=2 width=800> <CAPTION align=bottom> Tabelul poate avea antet plasat sub el </CAPTION> <TR> <TD align=center colspan=8> <Font size=5 ><B>Municipiul</b> </font> </TD> </TR> <TR align=center> <TD colspan=2 > &nbsp </TD> <TD align=center colspan=2 > <b>Chisinau </b></TD> <TD colspan=2 ><b> Balti </b> </TD> <TD colspan=2 > <b> Cahul </b></TD> </TR> <TR> <TD colspan=2 width=100 align=center valign=middle> Anul </TD>

<TD > Utilizatori total </TD> <TD > Cu acces Internet </TD> <TD > Utilizatori total </TD> <TD > Cu acces Internet </TD> <TD > Utilizatori total </TD> <TD > Cu acces Internet </TD> </TR> <TR align=right> <TD rowspan=3 width=100 > <A HREF="nokia.jpg"> <img src="nokia.jpg" width=100 height=100 > </A></TD> <TD> 1999</TD> <TD > 35 700 </TD> <TD > 20 000 </TD> <TD > 9 800 </TD> <TD > 1 300 </TD> <TD > 6 700</TD> <TD > 800 </TD> </TR> <TR align=right> <TD> 2000</TD> <TD > 45 500 </TD> <TD > 26 100 </TD> <TD > 10 120 </TD> <TD > 1 540 </TD> <TD > 9 400</TD> <TD > 950 </TD> </TR> <TR align=right> <TD> 2001</TD> <TD > 51 2500 </TD> <TD > 29 200 </TD> <TD > 11 260 </TD> <TD > 1 800 </TD> <TD > 10 200</TD> <TD > 1 350 </TD> </TR> </TABLE> </BODY> </HTML>

Exemplul 8.3. Utilizarea tabelelor pentru crearea galeriilor de imagini.

<HTML> <HEAD> <TITLE>Exemplul 10a</TITLE> </HEAD> <H1>Albume fotografice in tabele</H1> <TABLE BORDER=1 width=800> <TR align=center > <TD> <a href= "imagini\1.jpg"> <img src="imagini\1.jpg" height=100 width=75> </a></TD> <TD> <a href="imagini\2.jpg"> <img src= "imagini\2.jpg" height=100 width=75> </a></TD> <TD> <a href="imagini\3.jpg"> <img src= "imagini\3.jpg" height=100 width=75> </a></TD> <TD> <a href="imagini\4.jpg"> <img src= "imagini\4.jpg" height=75 width=100> </a></TD>

<TD> <a href="imagini\5.jpg"> <img src= "imagini\5.jpg" height=75 width=100> </a></TD> </TR> <TR align=center > <TD> <a href="imagini\6.jpg"> <img src= "imagini\6.jpg" height=75 width=100> </a></TD> <TD> <a href="imagini\7.jpg"> <img src= "imagini\7.jpg" height=100 width=75> </a></TD> <TD> <a href="imagini\8.jpg"> <img src= "imagini\8.jpg" height=100 width=75> </a></TD> <TD> <a href="imagini\9.jpg"> <img src= "imagini\9.jpg" height=75 width=100> </a></TD> <TD> <a href="imagini\10.jpg"> <img src= "imagini\10.jpg" height=75 width=100> </a></TD> </TR> <TR align=center > <TD> <a href="imagini\11.jpg"> <img src= "imagini\11.jpg" height=100 width=75> </a></TD> <TD> <a href="imagini\12.jpg"> <img src= "imagini\12.jpg" height=100 width=75> </a></TD> <TD> <a href="imagini\13.jpg"> <img src= "imagini\13.jpg" height=75 width=100> </a></TD> <TD> <a href="imagini\14.jpg"> <img src= "imagini\14.jpg" height=75 width=100> </a></TD> <TD> <a href="imagini\15.jpg"> <img src= "imagini\15.jpg" height=100 width=75> </a></TD> </TR> </TABLE> </BODY> </HTML>

De multe ori tabelele sunt folosite pentru a cadra pagina, diviznd-o n blocuri independente de dimensiune stabilit prin perametrii celulelor. Este o alternativ a utilizrii casetelor (vezi capitolul urmtor), care permite divizarea paginii n cadrul unui singur document: Exemplul 8.4: Tabla de ah 4 x 4 modelat prin tabel:
<html> <body> <table> <tr> <td width=80 height=80 color=darkgreen> </td>

<td width=80 height=80 color=lightyellow> </td> <td width=80 height=80 color=darkgreen> </td> <td width=80 height=80 color=lightyellow> </td> </tr> <tr> <td width=80 height=80 color=lightyellow> </td> <td width=80 height=80 color=darkgreen> </td> <td width=80 height=80 color=lightyellow> </td> <td width=80 height=80 color=darkgreen> </td> </tr> <tr> <td width=80 height=80 color=darkgreen> </td> <td width=80 height=80 color=lightyellow> </td> <td width=80 height=80 color=darkgreen> </td> <td width=80 height=80 color=lightyellow> </td> </tr> <tr> <td width=80 height=80 color=lightyellow> </td> <td width=80 height=80 color=darkgreen> </td> <td width=80 height=80 color=lightyellow> </td> <td width=80 height=80 color=darkgreen> </td> </tr> </table></body></html>

Fig. 6. Exemplul 8.4 vizualizat n browserul IE

Capitolul 9 Casete n documentele HTML

Structura liniar a documentelor HTML simplific mult procesul lor de elaborare, dar lipsete utilizatorul de unele elemente de structur, care ar face accesul la informaia din document mai rapid i comod. Pentru divizarea documentului n mai multe casete (compartimente) poate fi utilizat tagul frameset. Cel mai simplu mod de utilizare al acestui tag este deschiderea n aceeai fereastr a ctorva documente, fiecare din ele rulnd n o regiune aparte. Operaia se realizeaz prin secvena: <FRAMESET COLS="x%, y%" <FRAME SRC="fisier 1"> <FRAME SRC="fisier 2" NAME="titlu"> </FRAMESET> <NOFRAMES> La afiarea acestei secvene fereastra sistemului browser se va diviza n 2 casete prima cu limea din limea ferestrei, a doua cu limea de din fereastr. n prima caset fa fi plasat coninutul documentului fisier 1, n cea de a doua coninutul documentului fisier 2. Atributele tagului <frameset> cols fixeaz crearea casetelor verticale. Limea casetelor este specificat n % din limea documentului sau n pixeli (n lipsa semnului %) rows fixeaz crearea casetelor orizontale. nlimea casetelor este specificat n % din nlimea documentului plasat pe ecran sau n pixeli (n lipsa semnului %) Exemplul 9.1: Vom crea o pagin, format dein 3 documente HTML: 1. main.html fiierul pentru organizarea paginii 2. frame1.html fiierul cu indicii autorilor publicaiilor incluse

3.

frame2.html - fiierul cu indicii publicaiilor incluse i referinele la publicaii

<HTML> <!--fiierul main.html --> <FRAMESET COLS="25%, 75%" > <FRAME SRC="frame1.html"> <FRAME SRC="frame2.html"> </FRAMESET> <NOFRAMES> </HTML> <!--sfritul fiierului main.html --> <HTML> <!--fiierul frame1.html --> <HEAD> <H2> <Font face="Arial Black"> Biblioteca electronica <br> AUTORI </font></H2> </HEAD> <body bgcolor=lightgreen> <A name="begin"> </a> <H3> <font face="Arial Black">Autori si editii </H3> <UL type=disk> <FONT FACE="Arial"> <LI> <a href="#Moraru"> Victor MORARU </a> <LI> <a href="#Marin"> Constantin MARIN </a> <LI> <a href="#Coval"> Dumitru COVAL </a> <LI> <a href="#Coval"> Sergiu CORLAT </a> </UL> </font> <hr> <FONT FACE="Arial"> <A name="Moraru"> <b> Victor MORARU </B> <p> </p> <img src="moraru1.jpg" width=200 height=160> <P> Doctor habilitat in politologie, decan al Facultatii de Jurnalism si Stiinte ale Comunicarii. Autor a mai multe manuale, monografii, articole stiintifice. In varianta electronica sunt prezentate lucrarile: <ul> <li> Repere Italiene <li> Mass-Media vs Politica </ul> <a href="#begin"> Spre inceput </a> <hr> <A name="Marin"> <b> Constantin MARIN </B>

<p> </p> <img src="marin1.jpg" width=200 height=160> <P> Doctor in istorie, sef catedra Comunicare. Autor a mai multe manuale, monografii, articole stiintifice. In varianta electronica sunt prezentate lucrarile: <ul> <li> Comunicare institutionala </ul> <a href="#begin"> Spre inceput </a> <hr> <A name="Coval"> <b> Dumitru COVAL </B> <p> </p> <img src="coval1.jpg" width=200 height=160> <P> Doctor habilitat in jurnalistica, sef catedra Jurnalism. Autor a mai multe manuale, monografii, articole stiintifice. In varianta electronica sunt prezentate lucrarile: <ul> <li> Jurnalism de investigatie </ul> <a href="#begin"> Spre inceput </a> <hr> <A name="Corlat"> <b> Sergiu CORLAT </B> <p> </p> <img src="corlat1.jpg" width=200 height=160> <P> Seful Centrului Tehnologii Informationale al Facultatii de Jurnalism si Stiinte ale Comunicarii. Autor de articole stiintifice, manuale. In varianta electronica sunt prezentate lucrarile: <ul> <li> Documente electronice in format HTML <li> Sisteme editoriale <li> Designul editiilor scrise </ul> <a href="#begin"> Spre inceput </a> </font> </body> </HTML> <!--sfritul fiierului frame1.html -->

<HTML> <!--fiierul frame2.html --> <HEAD> <H2> <Font face="Arial Black"> Biblioteca electronica a facultatii </font></H2> </HEAD> <body bgcolor=lightyellow> <H3> <font face="Arial Black">Compartimentele bibliotecii </H3> <UL type=disk> <FONT FACE="Arial"> <LI> <b> Presa</b> <UL > <LI> <a href="se.html"> Sisteme Editoriale </a> <Li> <a href="des.html"> Designul editiilor scrise </a> </UL> <LI> <b>Jurnalism TV </b> <LI> <b> Jurnalism Radio </b> <LI> <b> Comunicare </b> <UL > <LI> <a href="def_HTML.html"> Documente electronice in format HTML </a> </UL> <LI> <b> Bibliologie </b> </UL> </font> </body> </HTML> > <!--sfritul fiierului frame2.html -->

Not;: Paginile cu elemente <Frameset> nu conin taguri <DY>. <FRAME SRC="b.html" NAM="main"> n acest fragment se indic numele casetei NAME=nume i fiierul care urmeaz s fie plasat n aceast caset: SRC=nume fiier html. Pentru a realiza o pagin, n care referinele la careva documente HTML (cuprinsul) apar ntr-o caset, n timp ce documentele propriu- zise apar n alt caset a aceleiai pagini (coninutul) vom aduga la referine atributul \]RGET=numele casetei n care va apare documentul (n exemplul de mai sus TARG="main"). n cazul, cnd se activeaz o alt referin, care apare n aceeai caset, coninutul casetei se nlocuiete

automat.

Atributele tagului <FR]^_> N]^_= definete numele casetei. Pentru a plasa un document HTML n aceast caset vei indica n referina la document atributul TARGET=numele casetei ^]RGINWITH= este un atribut analogic atributului CELLPADDING=. pentru tabele. Fixeaz spaiul ntre frontierele laterale ale casetei i coninutul ei ^]RGINHEIGHT= Fixeaz spaiul ntre frontierele verticale ale casetei i coninutul ei SCROLLING= activeaz / dezactiveaz benzile de rulare n caset. Opiunile: SCROLLING =YES, SCROLLING =YES prezena permanent a benzilor de rulare, indiferent de necesitatea lor. SCROLLING =N, lipsa benzilor de rulare. Dac volumul documentului este mai mare dect spaiul rezervat pentru caset, el va fi prezentat doar parial. SCROLLING =U. sistemul browser va determina automat dac este necesar sau nu aplicarea benzilor de rulare n caset. NORESIZE interzice utilizatorului modificarea dimensiunilor casetei. SR`= - indic fiierul surs, care va fi plasat n caset Exemplul 9.2:

main.htm

autori.ht

opere.ht op_em.ht op_al.ht

continut.html vers1.htm vers2.htm vers3.htm

vers4.htm

Fiierul main.html conine trei casete destinate prezentrii listei de autori (autori.html), listei ediiilor incluse (cuprins.html ) i a coninutului operelor selectate (continut.html). Lista de opere a autorului selectat apare n caseta din mijloc, iar coninutul operei selectate n caseta din dreapta. Urmeaz sursele fiierelor, care, fiind reconstruite, v vor permite s obinei urmtoarea structur:

FiBierul main.html
<HTML> <FRAMESET COLS="25%, 25%, 50%"> <FRAME SRC="autori.html"> <FRAME SRC="cuprins.html" NAME="cuprins"> <FRAME SRC="continut.html" NAME="opere"> </FRAMESET> </HTML>

FiBierul cuprins.html
<html> <body bgcolor=lightyellow> <p> OPERE</p> </body>

</html>

FiBierul continut.html
<html> <body bgcolor="#FF8080"> <p> CONTINUT</p> </body> </html>

FiBierul autori.html
<HTML> <body bgcolor=lightblue > <p><B>AUTORI</b> </p> <ul > <li ><a href="op_em.html" target="cuprins">Mihai EMINESCU </a> <li ><a href="op_al.html" target="cuprins"> Vasile ALECSANDRI</a> </ul> </body> </HTML>

FiBierul op_em.html
<html> <body bgcolor=lightyellow> <p> OPERE</p> <ul type=square> <li> <a href="vers1.html" target="opere"><i>CE-&#354;I DORESC EU &#354;IE, ... </i> </a> <li> <a href="vers2.html" target="opere"><i>DOINA </i> </a> </ul> </body> </html>

FiBierul op_al.html
<html> <body bgcolor=lightyellow> <p> OPERE</p> <ul type=square> <li> <a href="vers3.html" target="opere"><i>ANDRII POPA </i> </a> <li> <a href="vers4.html" target="opere"><i>TATARUL </i> </a> </ul> </body> </html>

FiBierul vers1.html
<html> <body bgcolor="#FF8080"> <hr> <p> <i> Ce-&#355;i doresc eu &#355;ie, dulce Rom&acirc;nie,<br> &#354;ara mea de glorii, &#355;ara mea de dor?<br> Bra&#355;ele nervoase, arma de t&#259;rie,<br> La trecutu-&#355;i mare, mare viitor!<br> Firab&#259; vinu-n cupe, spumege pocalul,<br> Dac&#259; fiii-&#355;i m&acirc;ndri aste le nutresc;<br> C&#259;ci r&#259;m&acirc;ne st&acirc;nca, de&#351;i moare valul, <br> Dulce Rom&acirc;nie, asta &#355;i-o doresc.<br> &nbsp<br> Vis de r&#259;zbunare negru ca morm&acirc;ntul<br> Spada ta de s&acirc;nge du&#351;man fumeg&acirc;nd<br> &#351;i deasupra idrei fluture ca v&acirc;ntul <br> Visul t&#259;u de glorii falnic triumf&acirc;nd, <br> Spun&#259; lumii large steaguri tricolore, <br> Spun&#259; ce-i poporul mare rom&acirc;nesc, <br> C&acirc;nd s-aprinde sacru candida-i v&acirc;ltoare, <br> Dulce Rom&acirc;nie, asta &#355;i-o doresc. </p></i> ........................................... <hr> </i></p> </body> </html>

FiBierul vers2.html
<html> <body bgcolor="#FF8080"> <hr> <p> <i> De la Nistru pan' la Tisa <br> Tot romanul plansu-mi-s-a <br> Ca nu mai poate strabate <br> De-atata strainatate. <br> Din Hotin si pan' la mare <br> Vin muscalii de-a calare, <br> De la mare la Hotin <br> Mereu calea ne-o atin; <br> Din Boian la Vatra-Dornii <br> Au umplut omida cornii, <br> Si strainul te tot paste <br> De nu te mai poti cunoaste; <br> Sus la munte, jos pe vale, <br> Si-au facut dusmanii cale, <br> Din Satmar pan-in Sacele <br> Numai vaduri ca acele. <br> Vai de biet roman saracul!<br> Indarat tot da ca racul, <br> Nici ii merge, nici se-ndeamna, <br> Nici ii este toamna toamna, <br> Nici e vara vara lui <br> Si-i strain in tara lui. </p></i>

........................................ <hr> </i></p> </body> </html>

FiBierul vers3.html
<html> <body bgcolor="#FF8080"> <hr> <p> <i> Cine trece Valea Saca <br> Cu hangerul fara teaca <br> Si cu pieptul dezvelit? <br> Andrii Popa cel vestit <br> &nbsp<br> Septe ani cu voinicie <br> Si-au batut joc de domnie <br> Si tot prada ne-ncetat <br> Andrii Popa, hot barbat! </p></i> ........................................ <hr> </i></p> </body> </html>

FiBierul vers4.html
<html> <body bgcolor="#FF8080"> <hr> <p> <i> Mai tatare, tine-ti calul, <br> Mai tatare, stringe-ti fraul <br> Mai tatare, lasa malul <br> Nu cerca a trece riul <br> Ca, pe crucea sfintei lege!<br> De voi doi peste hotare <br> Nimic, zau, nu s-a alege, <br> Mai tatare, mai tatare! </p></i> ........................................ <hr> </i></p> </body> </html>

Capitolul 10 Formulare
Utilizarea formularelor Formularul este un instrument cu ajutorul cruia din documentul HTML se realizeaz transmiterea unor informaii structurate o adres exterioar, fixat apriori. Informaia primit pe aceast adres este apoi prelucrat (de cele mai multe ori n regim automat de programe soft speciale) Formularele ocup un compartiment aparte n limbajul HTML, cel puin din motivul, c utilizarea eficient a lor cere i cunotine din domeniul programrii. Crearea unei forme este mult mai simpl dect crearea sistemelor de prelucrare a datelor transmise prin forme. De cele mai multe ori adresa exterioar (la care este transmis informaia din form) prezint un program scris n Limbajele PERL, JAVA, C. Programele de acest tip sunt numite CGI- scripturi, de la (Common Gateways Interface), ce se traduce ca "Interfa comun de ecluze". De cele mai multe ori scrierea programelor CGIcere o cunoatere bun a limbajelor respective i a particularitilor sistemului operaional UNIX. O metod mai simpl de prelucrare a formularelor este utilizarea instruciunilor limbajului specializat PHP/FI, care se includ direct n documentele HTML. n acest caz documentele capt extensiunea *.pht sau *.php. Formularele transmit datele pentru sistemele de prelucrare n form de perechi [nume variabil]=[valoare variabil]. Numele variabilelor sunt date cu litere ale alfabetului englez. Valorile variabilelor, indiferent de coninutul lor, sunt prelucrate de sistem ca variabile de tip ir de caractere (string). Structura formularelor Formularele sunt marcate de perechea de taguri <FORM> ...

</FORM>. Este permis utilizarea mai multor formulare ntr-un

singur document HTML, dar nu sunt permise formularele incluse (formular n formular). n interiorul formularelor este permis utilizarea fragmentelor de text HTML, inclusiv taguri. Tagul <FORM> poate fi completat cu trei atribute, unul dintre ele fiind obligatoriu: ACTION Atribut obligatoriu. Localizeaz sistemul de prelucrare a formei METHOD Determin modul de transmitere (protocolul de transmitere a hipertextului) a datelor din formular la sistemul de prelucrare. Valori permise: METHOD=POST i METHOD=GET. dac nu se fixeaz valoarea, se atribuie METHOD=GET. ENCTYPE Determit standardul de codificare a datelor pentru transmitere la sistemul de prelucrare. Dac valoarea atributului nu este fixat, se consider c valoarea e ENCTYPE=application/x-www-form-urlencoded. Formulare elementare. Procesul de completare a datelor din formular este logic urmat de instruciunea de iniializare a transmiterii datelor: <INPUT TYPE=submit> Efectul utilizrii acestui tag este apariia n documentul HTML a butonului cu inscripia Submit (subscrie), la activarea creia toate datele din formular vor fi transmise sistemei de prelucrare, indicate n <FORM>. Inscripia de pe buton poate fi modificat prin introducerea n tag a atributului VALUE="[text]" (valoare), de exemplu: <INPUT TYPE=submit VALUE="Hopa Hop!">

Folosind datele acumulate, putem forma un formular elementar

Exemplul 10.1
<HTML> <HEAD> <TITLE>Exemplul 10.1</TITLE> </HEAD> <H1>Un formular elementar </H1> <FORM ACTION="tabel2.html"> <!--inceput --> <INPUT TYPE=submit VALUE="La tabele, la tabele!..."> </FORM> <!--sfirsit--> </BODY> </HTML>

Inscripia asociat butonului poate fi transmis prin includerea n descrierea butonului a atributului NAME=[nume], de exemplu: <INPUT TYPE=submit NAME=button VALUE="Apasa repede"> Forma poate conine mai multe butoane cu nume i valori diferite. Astfel, sistemul de prelucrare a formelor poate realiza unele sau alte aciuni, n dependen de butoanele activate de utilizator. Acumularea datelor d; c;tre formular Exist mai multe tipuri de elemente <INPUT>. Fiecare element <INPUT> conine atributul obligatoriu NAME=[nume], care determin numele elementului (i, corespunztor , numele variabilei, care va fi transmis sistemului de prelucrare). Numele va conine doar semne ale alfabetului latin, fr semne diacritice. Un alt atribut al tagului <INPUT> este VALUE="[valoare]", care determin valoarea ce va fi transmis sistemului de prelucrare. Acest atribut nu este obligatoriu pentru elementele <INPUT TYPE=text> i <INPUT TYPE=password>, deoarece n aceste cazuri vizualizarea nu se realizeaz direct. Atribute utilizate cu tagul <INPUT>:

TYPE=text Determin o fereastr pentru introducerea textului. Poate conine atribute suplimentare SIZE=[numr] (limea ferestrei de introducere n simboluri) i MAXLENGTH=[numr] (lungimea maxim admis pentru rndul de simboluri). Exemplu: <INPUT TYPE=text VALUE="Scrie textul aici"> SIZE=20 NAME=user

Definete o fereastr cu limea de 20 simboluri pentru introducerea textului. La momentul apariiei ferestrei n ea se afieaz textul "Scrie textul aici", care mai apoi poate fe redactatUlterior textul (redactat sau predefinit) va fi transmis la sistemul de prelucrare prin variabila user. TYPE=password Definete o fereastr pentru introducerea parolei. Efectul este acelai, unica deosebire este c pe ecran n locul simbolurilor introduse apar (*). Exemplu: <INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10> Definete o fereastr pentru introducerea parolei cu o lungime de 20 simboluri. Numrul de simboluri n parol nu poate depi 10. Parola introdus este transmis sistemului de prelucrare prin variabila pw. TYPE=radio Definete un buton radio. Poate conine atributul suplimentar checked (indic dac butonul este selectat). n un grup de butoane radio cu nume identice poate fi doar un buton selectat Exemplu: <INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 bit/s <INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 bit/s <INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 bit/s Definete un grup din trei butoane radio, marcate 9600 bit/s, 14400 bit/s i 28800 bit/s. La apariia grupului de butoane pe pagin, va

fi marcat primul din ele. Dac utilizatorul nu va selecta alt buton,

sistemului de prelucrare i se va transmite variabila modem cu valoarea 9600. Dac se selecteaz unul din butoanele iniial inactive se va transmite valoarea corespunztoare butonului ales TYPE=checkbox Definete un box, care poate fi bifat. Ca i atributul precedent (radio) poate conine atributul suplimentar checked (bifarea apriori a boxului). Spre deosebire de butoanele radio, n grupul de boxuri pot exista mai multe elemente bifate apriori. Exemplu: <INPUT TYPE=checkbox NAME=comp VALUE="PC"> Staii terminale <INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Statii de lucru <INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Server al reelei Intrenet <INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Servere Internet Definete un box din patru elemente. Sunt marcate elementele 2 i 4. Dac nu vor fi bifate alte butoane sau demarcate butoanele 2 i 4, sistemul de prelucrare va primi variabila comp=WS i comp=IS.

TYPE=hidden Definete un element invizibil pentru utilizator. elementul nu se modific n procesul de completare a formei i servete n calitate de resurs informaional doar pentru sistemul de prelucrare, de exemplu n situaiile cnd structura formei se modific n timp, pentru determinarea versiunii formei.
Exemplu: <INPUT TYPE=hidden NAME=version VALUE="1.1"> Definete variabila ascuns version, care se transmite sistemei de prelucrare valoarea 1.1.

TYPE=reset Definete butonul, activarea cruia reseteaz coninutul formei fr a transmite datele sistemului de prelucrare. Spre deosebire de alte atribute, se poate lipsi de atributul name. Exemplu: <INPUT TYPE=reset VALUE="Resetarea coninutului formei"> n afar de elementele <INPUT>, mai pot fi utilizate elementele <SELECT> i <TEXTAREA>. Meniul <SELECT> din n elemente are forma: <SELECT NAME="[nume]"> <OPTION VALUE="[valoare 1]">[text 1] <OPTION VALUE="[valoare 2]">[text 2] ... <OPTION VALUE="[valoare n]">[text n] </SELECT> Meniul ncepe cu tagul <SELECT> i sfrete cu </SELECT>. Tagul <SELECT> conine atributul obligatoriu NAME, care definete variabila generat de meniu. Tagul<SELECT> poate conine i atributul MULTIPLE, care permite selectarea concomitent a ctorva elemente din meniu. Majoritatea sistemelor de navigare prezint meniul <SELECT MULTIPLE> n forma unei ferestre (nlimea ferestrei n linii este determinat de atributul suplimentar SIZE=[numr]). Meniul <SELECT> apare ca un meniu derulant vertical. Tagul <OPTION> definete un element al meniului. Atributul obligatoriu VALUE definete valoarea, care va fi transmis sistemului de prelucrare, dac a fost ales elementul corspunztor al meniului. Tagul <OPTION> poate conine atributul checked, care fixeaz c elementul este predefinit marcat.

Vom cerceta exemplul. <SELECT NAME="selection"> <OPTION VALUE="option1" checked>Variantul 1 <OPTION VALUE="option2"> Variantul 2 <OPTION VALUE="option3"> Variantul 3 </SELECT> Fragmentul defineteun meniu din trei elemente: Variantul 1, Variantul 2 i Variantul 3. Este preselectat elementul Variantul 1. sistemei de prelucrare i se va transmite variabila selection cu valoarea option1 (predefinit), option2 sau option3. Destul de simpl este i utilizarea tagului <TEXTAREA> <TEXTAREA NAME=address ROWS=5 COLS=50> Introducai aici adresa... </TEXTAREA> Atributele sunt obligatorii. NAME definete numele variabilei prin care informaia se transmite sistemului de prelucrare, (address). ROWS definete nlimea ferestrei n linii (5). COLS definete limea ferestrei n simboluri (50). Textul plasat ntre <TEXTAREA> i </TEXTAREA>, este inclus automat n fereastra de text. El poate fi redactat sau lichidat de ctre utilizator.

Exemplul 10.2:
<HTML> <HEAD> <TITLE>Exemplul 10.2</TITLE> </HEAD> <H1>Un formular... simplu de tot </H1> <FORM ACTION="adresa calculatorului pe care se afla sistemul de prelucrare" METHOD=post>

<H2>Unele date biografice...</H2> <P>Datele pot fi inventate </P> <P>Nume:&nbsp &nbsp &nbsp<INPUT TYPE=text SIZE=40 NAME=fn><BR> Prenume: <INPUT TYPE=text SIZE=40 NAME=ln><BR> Sex: <INPUT TYPE=radio NAME=gender VALUE="male" checked>masculin <INPUT TYPE=radio NAME=gender VALUE="female">feminin<BR> Virsta: <INPUT TYPE=text SIZE=5 NAME=age> ani<BR> <INPUT TYPE=submit VALUE="Transmiteti formularul"> </P> </FORM> </BODY> </HTML>

FORMULARE prin poBte electronic; Pentru utilizatorii nceptori, care nu posed deprinderi de scriere a sistemelor de prelucrare formularele prezint, la prima vedere, un instrument inutil. Totui, exist situaii, n care utilizarea lor este motivat. Astfel, dac n calitate de aciune a formularului vom indica adresa cutiei potale i modul de codificare a datelor, coninutul formei va fi trimis n cutia potal indicat, iar mai apoi prelucrat manual. <FORM ACTION=mailto:user@mail.box ENCTYPE=text/plain> Crearea formelor este un pas spre trecerea le elementele de DHTML (Dynamic HTML) limbaj, care permite prelucrarea datelor direct n document, fr a trimite informaia n afar. Acest tip de forme este utilizat pentru generarea diferitor tipuri de teste.

Taguri frecvent utilizate Elemente bazice

Tipul documentului Numele Antetul Corpul <HTML> </HTML> <TITLE> </TITLE> <HEAD> </HEAD> <BODY> </BODY>

Anex;

nceputul i sfritul fiierului Se include n antet Descrierea documentului Coninutul paginii

Taguri de structur;
Subtitlu Aliniere Sec<ie Citat Eviden<iere Eviden<iere puternic; Trimitere, citat Cod Exemple rezultat Input de la tastatur; Variabile befini<ii Adrese Caractere mari Caractere mici <H?> </H?> <... ALIGN= LEFT | CENTER | RIGHT> ...> <DIV> </DIV> <BLOCKQUOTE> </BLOCKQUOTE> <EM> </EM> <STRONG> </STRONG> <CITE> </CITE> <CODE> </CODE> <SAMP> </SAMP> <KBD> </KBD> <VAR> </VAR> <DFN> </DFN> <ADDRESS> </ADDRESS> <BIG> </BIG> <SMALL> </SMALL> Unele sisteme nu susin tagul respectiv De obicei adresa autorului ? variaz de la 1 la 6. Difer prin dimensiune Atribut suplimentar n subtitluri, secii sau text de paragraf Un bloc separat de text Se evideniaz prin deplasare fa de marginea liniei De obicei cursiv De obicei semigras De obicei cursiv. Se deosebete de Citat prin dimensiune Pentru surese program

Elemente de design
Semigras Cursiv Subliniat T;iat Indice superior Indice inferior Caracterul de maBin; Caracter preformatat L;<ime Centrare Clipirea textului Dimensiunea caracterului Schimbarea dimensiunii Dimensiunea standard Culoarea caracterelor Selectaea fontului <B> </B> <I> </I> <U> </U> <STRIKE> </STRIKE> sau <S> </S> <SUP> </SUP> <SUB> </SUB> <TT> </TT> <PRE> </PRE> <PRE WIDTH=?> </PRE> <CENTER> </CENTER> <BLINK> </BLINK> <FONT SIZE=?> </FONT> <FONT SIZE=+ | - ?> </FONT>

Nu ntotdeauna este susinut Nu ntotdeauna este susinut

<BASEFONT SIZE = ?> <FONT COLOR = #******> </FONT> <FONT FACE = #*******> </FONT>

Caractere de lime fix Pstreaz formatarea iniial a textului ? numrul de simboluri i pentru elemente grafice A nu fi folosit! Fixseaz dimensiunea caracterului 1 7 Mrete sau micoreaz dimensiunea caracterului cu ? De la 1 la 7. Dac nu se fixseaz este 3. #****** numele culorii n englez #****** numele fontului

Referin<e Bi elemente grafice

Referin<; Ancor; Referin<; la ancor; Rela<ie <A HREF=referin> coment</A> <A NAME=nume> coment </A> <A HREF=referin#ancor> coment </A> <A REL=****> </A> Trecere la referin Definirea unei ancore Trecerea la poziia definit de ancor Nu ntotdeauna este susinut

Rela<ie invers; Plasrea imaginii Aranjarea imaginii Alternativ; Dimensiunile imaginii Frontiera Deplasare Preimagine

<A REV=****> </A> <IMG SRC=nume fisier> <IMG SRC=nume fisier ALIGN= TOP | BOTTOM | MIDDLE | LEFT | RIGHT> <IMG SRC=nume ALT=text> <IMG SRC=nume WIDTH=? HEIGTH=?> <IMG SRC=nume BORDER=?> <IMG SRC=nume HSPACE=? VSPACE=?> <IMG SRC=nume LOWSRC=nume>

Nu ntotdeauna este susinut Se va indica numele sau calea

Dac nu se ncar imaginea apare textul ? n pixeli ? n pixeli ? n pixeli Pentru Netscape Communicator

Separatori
Paragraf Aliniere n paragraf Rupere rnd Anularea alinierii Separator orizontal Aliniere separator Grosime L;<ime L;<ime % Linie plan; <P> </P> <P ALIGN= LEFT | CENTER | RIGHT> </P> <BR> </BR> <BR CLEAR= LEFT | > CENTER | RIGHT | ALL> <HR> <HR ALIGN= LEFT | RIGHT | CENTER> <HR SIZE=?> <HR WIDTH=?> <HR WIDTH=%> <HR NOSHADE>

? n pixeli ? n pixeli n procente

Liste
F;r; numerotare Compact Tip marcher <UL> <LI> </UL> <UL COMPACT> </UL> <UL TYPE= DISC | CIRCLE | Tagul <LI> se pune n faa fiecrui element Pentru toat lista

Tip marcher Cu numerotare Compact Tip numerotare Tip numerotare nceputul numerot;rii nceputul numerot;rii List; de defini<ii Compact; Meniu Compact Catalog Compact

SQUARE> <LI TYPE= DISC | CIRCLE | SQUARE> <OL> <LI> </OL> <OL COMPACT> </OL> <OL TYPE= A | a | I | i | 1 > <LI TYPE= A | a | I | i | 1 > <OL START=?> <LI VALUE=?> <DL> <DT> <DD> </DL> <DL COMPACT> <DT> <DD> </DL> <MENU> <LI> <MENU> <MENU COMPACT> <LI> <MENU> <DIR> <LI> </DIR> <DIR COMPACT> <LI> </DIR>

Pentru elementele, ncepnd cu cel curent Tagul <LI> se pune n faa fiecrui element Pentru toat lista Pentru elementele, ncepnd cu cel curent ? numrul cu care ncepem ? numrul de la care pornim cu elementul curent DT noiunea, DD definiia DT noiunea, DD definiia LI la fiecare element LI la fiecare element LI la fiecare element LI la fiecare element

Fonuri Bi culori
Desen Fon Culoare FON Culoare Text Culoare link Culoare link cercetat Culoare link activ <BODY BACKGROUND=nume fiier> <BODY BGCOLOR=culoare> <BODY TEXT=culoare> <BODY LINK=culoare> <BODY VLINK=culoare> <BODY ALINK=culoare>

Simboluri speciale
Simbol special < > & Spa<iu fix 1/4 3/4 | 1/2 &#? &lt; &gt; &amp; &quot; &reg; &copy; &nbsp; &sect &plusmn &fract14 &fract34 &times &brvbar &fract12 &deg ? codul simbolului

Formulare
Definirea formularului Cmpul de introducere Numele cmpului Valoarea cmpului Marcat Dimensiunea cmpului Lungime maxim; Lista de variante Numele listei Num;rul de variante <Form ACTION=nume fisier METHOD= GET | POST> </FORM> <INPUT TYPE= TEXT | PASSWORD | CHECKBOX | RADIO | IMAGE | HIDDEN |SUBMIT |RESET > <INPUT NAME=nume> <INPUT VALUE=valoare> <INPUT CHECKED> <INPUT SIZE=?> <INPUT MAXLENGTH=?> <SELECT> </SELECT> <SELECT NAME=nume> </SELECT> <SELECT SIZE=?> </SELECT> Pentru boxurile tip checkbox, radio ? n simboluri ? n simboluri

Selectare multipl; Op<iuni Op<iune preselectat; Regiune text (dimensiune) Titlul regiunii text

<SELECT MULTIPLE> <OPTION> <OPTION SELECTED> <TEXTAREA ROWS=? COLS=?> </TEXTAREA> <TEXTAREA NAME=nume> <TEXTAREA>

Tabele
Definirea tabelei Frontiera Distan<a celule Complementare L;<imea (dorit;) L;<imea (%) Linie de tabel Aliniere Celul; Aliniere celul; Interzicerea ruperii ntinderea for<at; coloan; ntinderea for<at; linie Culoare celul; L;<ime celul; Titlul tabelei Aliniere titlu Interzicerea ruperii ntinderea for<at; coloan; ntinderea for<at; linie Avantitlu tabel Aliniere <TABLE> </TABLE> <TABLE BORDER=?> </TABLE> <TABLECELLSPACING=?> <TABLECELLPADDING=?> <TABLE WIDTH=?> <TABLE WIDTH= %> <TR> </TR> <TR ALIGN= LEFT | RIGHT | CENTER | MIDDLE | BOTTOM> <TD> </TD> <TD ALIGN= LEFT | RIGHT | CENTER | MIDDLE | BOTTOM> <TD NOWARP> <TD COLSPAN=?> <TD ROWSPAN=?> <TD BGCOLOR=culoarea> <TD WIDTH=?> <TH> </TH> <TH ALIGN= LEFT | RIGHT | CENTER | MIDDLE | BOTTOM> <TH NOWARP> <TH COLSPAN=?> <TH ROWSPAN=?> <CAPITON> </CAPITON> <CAPITON ALIGN=TOP | BOTTOM> </CAPITON> n puncte

n pixeli n procente

n interiorul rndului

Casete /Freim-uri/
Document cu blocuri n;l<imea rndurilor n;l<imea rndurilor L;<imea coloanelor L;<imea coloanelor L;<imea frontierei Frontiera Culoarea Frontierei L;<imea frontierei n;l<imea frontierei Benzi scrolloing Demarcarea frontierei Con<inut n afara blocurilor Definirea blocului Definirea blocului document Nume bloc <FRAMESET> </FRAMESET> <FRAMESET ROWS= ?,?,?,?> </FRAMESET> <FRAMESET ROWS= ?> </FRAMESET> <FRAMESET COLS= ?,?,?,?> </FRAMESET> <FRAMESET COLS= ?> </FRAMESET> <FRAMESET BORDER= ?> </FRAMESET> <FRAMESET FRAMEBORDER= yes | no> </FRAMESET> <FRAMESET BORDERCOLOR= culoare> </FRAMESET> <FRAME MARGINWIDTH=?> <FRAME MARGINHEIGHT=?> <FRAME SCROLLING= yes | no | auto> <FRAME FRAMEBORDER= yes | no> </FRAMESET> <NOFRAMES> </NOFRAMES> <FRAME> <FRAME SRC= cale> <FRAME NAME=nume | _blank | _self | _parent | _top> nlocuiete BODY ? puncte ? dimensiunea relativ ? puncte ? dimensiune relativ ? puncte

Frontiere de stnga i dreapta Frontiere de sus i jos