LIMBAJUL HTML

 

PREZENTARE GENERALĂ

 

            Paginile web sunt scrise într-un limbaj numit ”Limbajul HTML”, acronimul de la HyperText Markup Language. HTML permite utilizatorilor să realizeze pagini care includ texte, grafică şi indicatori la alte pagini de web.

            Pentru realizarea documentelor HTML poate fi utilizat editorul text Notepad din Windows, care permite crearea paginilor web, manual, folosiind niște comenzi  numite tag-uri, sau pot fi utilizate editoare create special pentru paginile web, editoare ce pot dispune de funcţii sofisticate pentru partea vizuală sau pentru verificarea legăturilor în întreaga pagină web. Cele mai cunoscute editoare HTML sunt editorul Netscape, creat de firma Netscape Communications și Front Page Editor, creat de firma Microsoft.

      În continuare voi trata modul de realizare manuală a paginilor web folosind editorul Notepad. În acesta vor fi scrise tag-uri, fiecare tag având rolul lui.

Un tag HTML constă din paranteza deschisă <, numele tag-ului îi paranteza închisă >. El poate fi singular cum ar fi tag-ul <BR>, altele sunt perechi: <HEAD> și </HEAD>. Primul tag (de început) activează o anumită caracteristică, de exemplu scrierea textului aferent,iar cel de-al doilea tag (de sfarsit), cu numele identic cu al perechii sale doar că e precedat de /, dezactivează caracteristica respectivă. Există situații când unele tag-uri sunt recunoscute indiferent dacă au fost scrise sub formă singulară, sau sub formă pereche.

Exemplu:        tag-rile <B>,<I>,<TR>, sau <B>   </B<   ,<I>   ,< /I>,<TR>   </TR>.

Unele tag-uri pot fi însoțite de atribute, care furnizează informații adiționale și sunt incluse în tag-ul de început, dacă e vorba de tag-uri perechi.

Exemplu:        < BODY bgcolor=”silver” > , unde bgcolor este atribut și indică faptul că fundalul paginii Web va fi de culoare gri. (silver în engleză)

Atât tag-urile, cât și atributele pot fi scrise cu litere mici, sau cu majuscule, sau chiar combinat. Ele vor fi recunoscute.

Exemplu:        < BODY> sau < Body> sau < BOdy>.

Editorul Notepad, va fi lansat din meniul   Start-Programs-Accessories-Notepad.

Dupa ce s-a creat baza de început a unui document si s-au setat proprietățile, trebuie să salvat fișierul. Salvarea trebuie facută într-un format pe care browser-ul îl poate recunoaște. Extensia standard pentru un fisier care reprezintă o pagina web este ".htm" sau ".html". De obicei folosesc (".html").

 Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alegeti din meniul File comanda Save și salvati fișierul cu orice nume doriți, dar cu extensia html (sau "htm") - (La File name: scrieți și numele și extensia ".html", exemplu: index.html). Dacă nu scrieți extensia, NotePad va salva documentul în format "txt".

Pentru a vedea documentul ca o pagina web, duceți-vă in directorul în care a-ți salvat fișierul și deschideți-l pur și simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera,etc). Sau deschide-ți browser-ul și din comanda Open deschideți documentul pe care l-ați salvat.

Pentru a continua munca, a face modificări paginii, sau pentru a adauga altceva în documentul HTML, deschideți documentul cu NotePad. Una din metode este să deschideți aplicația NotePad și din meniul File alegeți Open, apoi gasiți fișierul pe care vreți să-l modificați și dați clic pe butonul Open. După ce terminați modificările salvați, astfel dacă redeschideți documentul ca o pagină Web acesta va fi deschis cu noul format.

 


 

1.      STRUCTURA DOCUMENTULUI HTML

 

        Orice document HTML începe cu tag-ul <html> și se termină cu tag-ul</html>.

Între cele două marcaje <html> și </html> vom introduce doua secţiuni:

-secțiunea de antet <head>…</head> și –corpul documentului <body>…</body>.

        Blocul <body>…</body> cuprinde conţinutul propriu-zis al paginii HTML, adică ceea ce va fi afişat în fereastra browser-ului.

 

            O etichetă poate fi scrisă atât cu litere mici, cât și cu litere mari.

            Cea mai simplă pagină Web apare ca-n exemplu următor:

 

EFECT

            Conţinutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului.

        Dacă acest bloc lipseşte într-o pagina HTML, atunci în bara de titlu a ferestrei browser-ului va apărea numele fişierului.

        Dacă introducem mai multe linii într-o  pagina browser-ul va afişa într-un singur rând, întrucât caracterele “ CR/LF “ sunt ignorate de browser. Trecerea pe o linie  nouă se face la o comanda explicită, care trebuie sa apară în pagina html.

        Aceasta comandă este marcajul <br> ( de la “ line break “ – întrerupere de linie ).

        Folosind aceleaşi operaţii ca mai sus, textul va apare în fereastra navigatorului. În plus, în pagina va avea un titlu nou, cel introdus de noi.

        Exemplu:

EFECT

Blocuri preformatate

 

        Pentru ca browser-ul să interpreteze caracterele “ spaţiu “, “ tab “ și “ ce apar în cadrul unui text, acest text trebuie inclus într-un bloc <pre>…</pre>.

EFECT

Culoarea de fond

 

            O culoare poate fi precizată în două moduri:

·         Prîntr-un nume de culoare. Sunt disponibile cel puţin 16 nume de culori:

-aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red,

silver, teal, white și yellow.

·         Prin construcţia “ #rrggbb “ unde r (red), g (green), sau b (blue) sunt cifre

hexazecimale și pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C,

 d, D, e, E, f, F; se pot defini astfel 65536 de culori.

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

        Culoarea fondului paginii Web se stabileşte cu atributul bgcolor al etichetei <body>,

 de exemplu: <body bgcolor = culoare>.

        Următorul exemplu realizează o pagină cu fondul de culoare gri.

 

EFECT

 

Culoarea textului

 

        Acest lucru se face prin intermediul atributului text al etichetei <body> după sintaxa <body text=culoare>. În următorul exemplu textul are culoarea roşie.

EFECT

            O etichetă poate avea mai multe atribute. De exemplu , o eticheta cu trei atribute arată astfel:

    <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>.

            Următorul exemplu prezintă o pagina cu fondul de culoare albastră și textul de culoare galbenă.

 

EFECT

 

        Textul afişat este caracterizat de următoarele atribute: Mărime ( size), Culoare ( color ), Font (style).

        Acestea sunt atribute ale etichetei <basefont>.Este o etichetă singulară (fără delimitator de sfîrşit de bloc).

        <basefont size = număr color = culoare style = font>

unde:

·         număr – poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic și 7 pentru fontul cel mai mare);

·         culoare – este o culoare precizata prin nume sau prîntr-o  construcţie RGB;

·         font – poate fi un font generic ca “ serif “, “ san serif “, “ cursive “, “ monospace “, “fantasy “ sau un font specific instalat pe calculatorului clientului, ca “ Times New Roman “, “ Helvetica “ sau “ Arial “.Se acceptă ca valoare și o listă de fonturi separate, de exemplu:

·         “ Times New Roman, serif, monospace “.

        Domeniul de valabilitate al caracteristicilor precizate de aceasta etichetă se întinde de la locul în care apare eticheta pâna la sfarşitul paginii sau pâna la următoarea etichetă <basefont>.

        Dacă acest atribut lipseşte atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browser-ul utilizat.

Atributele prestabilite sunt: size = 3, color = black, şi style = “ Times New Roman “ .

        Poziţionarea conţinutului paginii Web față de marginile ferestrei browser-ului se poate face cu ajutorul a două atribute ale etichetei<body>:

·         leftmargin ( stabileşte distanța dintre marginea stânga a ferestrei browser-ului și marginea stângă a conţinutului paginii );

·         topmargin ( stabileşte distanța dintre marginea de sus a ferestrei browser-ului și marginea de sus a conţinutului paginii );

EFECT

 

Stiluri pentru blocurile de text

 

        Pentru ca un bloc de text să apară în pagină evidenţiat (cu caractere aldine), trebuie inclus între delimitatorii <b>...</b> ( b vine de la "bold" = îndrăzneţ).

        Pentru ca un text să fie scris cu caractere mai mari cu o unitate decât cele curente acesta trebuie inclus într-un bloc delimitat de etichetele <big>...</big>.

        Pentru ca un text să fie scris cu caractere mai mici cu o unitate decât cele curente acesta trebuie inclus într-un bloc delimitat de etichetele <small>...</small>.

        Pentru ca un text să fie scris cu caractere cursive acesta trebuie inclus într-un bloc delimitat de etichetele <i>...</i> ( i vine de la " italic ").

        Pentru a insera secvenţe de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>.

        Pentru a insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> (u vine de la " underline ").

        Pentru a insera un bloc de caractere tăiate se utilizează etichetele <strike>...</strike> sau <s>...</s>.

        În exemplul următor se utilizează toate etichetele menţionate anterior.

EFECT

 

Stiluri fizice și logice

 

        Am prezentat 8 stiluri de scriere a caracterelor unui bloc de text, numite și stiluri fizice, întrucât nu s-a acordat nicio atenție semnificației informației conținute de aceste blocuri, în continuare sunt prezentate stilurile utilizate la formatarea unui bloc.

            Aceste stiluri țin cont de semnificația pe care o are blocul în cadrul paginii Web.

            Pentru a pune în evidență ( prin stilul cursiv ) fragmente de text se utilizează etichetele:

·         <cite>...</cite> ( " cite " înseamna citat);

·         <em>...</em> (em vine de la " emphasize " = a evidenția).

            În locul lor se poate utiliza eticheta echivalentă <i>...</i>.

            Următoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere

    monospațiate (de tipul celor folosite de o maşină de scris):

    <code>...</code> ( " code " înseamna cod sau sursă);

    <kbd>...</kbd> ( kbd vine de la " keyboard " = tastatura);

    <tt>...</tt> ( tt vine de la " teletype " = teleprinter).

Eticheta de tip bloc <blink>...</blink> delimitează fragmente de text clipitoare. Această etichetă funcţionează numai în browser-ul Netscape Communicator.

EFECT

 

            Exemplul următor ilustrează că etichetele pot fi imbricate.

            Un fragment de text poate fi scris cu aldine şi cursive în acelaşi timp. Pentru un fragment de

    text se pot folosi simultan stilurile subliniat, exponent, mărit și cursiv.

EFECT

 

            Blocul <q>...</q> permite inserarea in-line a citatelor. Browser-ul afişează citatele în

    ghilimele. " q " vine de la " in-line quotation " (citate inserate in-line).

            Şi blocurile " q " pot fi imbricate.       Exemplu(de sine stătător) sunt &-consecutivităţiile

            Simbolurile "<" şi ">" sunt percepute de sistemele browser ca începuturi şi sfârşituri de

    HTML-taguri. Apare întrebarea, cum să reprezentăm aceste simboluri pe ecran? În limbajul HTML

    aceasta se poate realiza cu ajutorul &- consecutivităţilor (ele se mai numesc obiecte simbolice).

            Ghilimelele(") se codifică - &quot;

            Există mai multe metode de a include semnele diacritice române în documentele HTML. Cea

    mai simplă este codificarea directă a lor prin &-consecutivităţi:

            Ă- &#258;

            ă - &#259;

            Î - &Icirc;

            î - &icirc;

            Ş - &#350;

            ş - &#351;

            Ţ - &#354;

            ţ - &#355;

            Â - &Acirc;

            â - &acirc;

          Exemplu:

EFECT

 

        Comentarii

        Sistemele browser ignoră reproducerea oricărui text situat între <!-- şi -->. Este o opţiune specială pentru introducerea în textul documentului HTML a unor comentarii, ce nu vor fi afişate pe ecran. Exemplu:

        <!--Acesta e un comentariu -->

 

2.      FORMATAREA CARACTERELOR, ORGANIZAREA TEXTULUI

 

            Un font este caracterizat de următoarele atribute:

·         culoare (stabilită prin atributul color);

·         tipul sau stilul (stabilit prin atributul face);

·         mărimea (definită prin atributul size);

·         mărimea în puncte tipografice (stabilită prin atributul point-size);

·         grosime (definită prin atributul weight).

        Toate aceste atribute aparţin etichetei <font>, care permite inserarea de blocuri de texte personalizate.

Culori

 

            O culoare poate fi precizat în două moduri:

·         prin într-un nume de culoare.

·         prîntr-o  constantă conform standardului de culoare RGB (Red, Green, Blue). O astfel de constantă se formează astfel: #rrggbb, unde r, g și b sunt cifre hexazecimale.

        Culoarea fontului

            Pentru a scrie un fragment de text cu caractere de o anumită culoare se încadrează acest fragment între delimitatorii <font>...</font>având stabilit atributul color la valoarea necesară. De exemplu:

<font color=red>fragment de text de culoare rosie</font>

 

Familia fontului

 

        Pentru a scrie un text într-o pagină pot fi folosite mai multe fonturi (stiluri de caractere). Există cinci familii generice de fonturi care sunt de regulă disponibile pe toate calculatoarele utilizatorilor: serif, sans serif, cursive, monospace şi fantasy.

Tipul de font necesar poate fi stabilit prin atributul face al etichetei <font>.

Pot fi introduse mai multe fonturi separate prin virgula.

    <font face = " Arial, serif, monospace ">

    În acest caz browser-ul va utiliza primul font pe care îl cunoaşte.

 

EFECT

 

Mărimea fontului

 

        Pentru a stabili mărimea unui font se utilizează atributul size al etichetei <font>. Valorile acestui atribut pot fi:

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

·         +1, +2, etc. pentru a mări dimensiunea fontului cu 1, 2, etc. fata de valoarea curentă;

·         -1, -2, etc. pentru a micşora dimensiunea fontului cu 1, 2, etc. fata de valoarea curentă.

        Mărimea unui font poate fi stabilită exact cu ajutorul atributului point-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numărul astfel precizat reprezintă mărimea fontului în puncte tipografice.

        Acest atribut funcţionează numai cu Netscape Communicator.

 

EFECT

 

Grosimea unui font

 

        Grosimea unui caracter poate fi definită cu ajutorul atributului weight al etichetei <font>.

Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 și 900 (100 pentru fontul cel mai subţire și 900 pentru cel mai gros).

        Acest atribut funcţionează numai cu Netscape Communicator.

EFECT

3.     BLOCURI DE TEXT

 

            Aceste etichete nu se referă la particularitățiile caracterelor ce compun textul, ci la funcțiile pe

    care le poate avea un bloc de text în cadrul paginii Web.

    Toate aceste etichete produc automat trecerea la un rând nou și adăugarea unui spațiu suplimentar.

Inserarea unei adrese

Dacă într-o pagină web trebuie inclusă o adresă ,atunci putem utiliza facilitatile oferite de o eticheta dedicată: <address>...</address>.

 

EFECT

Indentarea unui bloc

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

 

EFECT

Blocul preformatat

         Într-un bloc <pre>...</pre>, semnificația marcajelor HTML se pastreaza. 
Blocul <pre>...</pre> este indicat pentru a insera randuri vide ( spatiu intre randurile succesive ). Caracterul " spatiu " poate fi luat în considerare de browser Dacă este inserat explicit prin &nbsp;.

 

EFECT

 

        Într-un fişier HTML, caracterele "<"şi ">" au o semnificaţie specială pentru browser. Ele încadrează comenzile şi atributele de afişare a elementelor într-o  pagina. Dacă dorim ca un fragment de text să conţină astfel de caractere, acest fragment trebuie încadrat de una dintre perechile de etichete:

·         <xmp>...</xmp> ( 80 de caractere pe rând );

·         <listing>...</listing> ( 120 de caractere pe rând ).

    Aceste marcaje interpretează corect caracterele " spațiu ", " etichetă "şi "CR/LF ".

    Textul afişat în pagina este monospaţiat.

 

 EFECT

 

Blocuri paragraf

 

        Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie nouă și permite:

·         inserarea unui spațiu suplimentar înainte de blocul paragraf;

·         inserarea unui spațiu suplimentar după blocul paragraf, dacă se folosește delimitatorul </p> (acesta fiind opțional);

·         alinierea textului cu ajutorul atributului align, având valorile posibile " left ", " center " sau " right ".

 EFECT

 

 

 

Blocuri de titlu

 

        Într-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor <h1>. <h2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se referă la un bloc de text și trebuie însoțite de o etichetă de încheiere similară.

        Aceste etichete acceptă atributul align pentru alinierea titlului blocului de text la stânga (în mod prestabilit ) , în centru și la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari și aldine, pe când <h6> folosește caracterele cele mai mici.

EFECT

 

Linii orizontale

        Într-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>.

        Pentru a configura o linie orizontală se utilizează următorele atribute ale etichetei <hr>:

·         align permite alinierea liniei orizontala. Valorile posibile sunt " left " ," center " și " right ";

·         width permite alegerea lungimii liniei;

·         size permite alegerea grosimii liniei;

·         noshade cand este prezent defineste o linie fara umbra;

·         color permite definirea culorii liniei.

EFECT

 

Blocuri <center>

 

        Blocul introdus de etichetele <center>...</center> aliniază centrat toate elementele pe care le conține.

EFECT

Blocuri <nobr>

        Blocul de text cuprins între etichetele <nobr>...</nobr> va fi afisat pe o singura linie.

 

EFECT

Blocuri <div>

        Modalitatea cea mai eficientă de delimitare și de formatare a unui bloc de text este folosirea delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc <div> ( diviziune ) este align ( aliniere ). Valorile posibile ale acestui parametru sunt:

·         left " ( aliniere la stânga );

·         center " ( aliniere centrală );

·         right " ( aliniere la dreapta ).

        Un bloc <div>...</div> poate include alte subblocuri. În acest caz , alinierea precizată de atributul align al blocului are efect asupra tuturor subblocurilor incluse în blocul <div>;

        Un bloc <div>...</div> admite atributul " nowrap " care interzice întreruperea rândurilor de către browser.

EFECT

 LISTE. NOŢIUNI ŞI MARCAJE UTILIZATE

 

       Unul din cele mai obișnuite elemente din documentele cu mai multe pagini este un set de definiții, referințe sau indexuri. Glosarele sunt exemple clasice în acest sens; cuvintele sunt listate în ordine alfabetică, urmate de definiții ale termenilor respectivi. în HTML, intreaga secțiune a unui glosar va fi gestionată printr-o lista de definiții, care este inclusa într-o pereche de marcaje de lista de definiții<dl>...</dl> (de la "definition list" = lista de definiții). 
 Observații: 
  - Un termen al listei este inițiat de eticheta <dt> (de la "definition term" = termen definit); 
  - Definitia unui termen este inițiata de eticheta <dd> (de la "definition description" = descrierea definiției); 
- Definitia unui termen incepe pe o linie noua și este indentată;
EFECT

Liste neordonate

        O lista neordonată este un bloc de text delimitat de etichetele corespondente <ul>…</ul>     (“ ul “ vine de la “ unordered list “ = lista neordonata). Fiecare element al listei este iniţiat de eticheta <li> (list item). Lista va fi intentata față de restul paginii Web și fiecare element al listei începe pe un rând nou.

EFECT

        Tag-urile <ul> și <li> pot avea un atribut type care stabileşte caracterul afişat în faţa fiecărui element al listei. Valorile posibile al acestui atribut sunt:

·         “circle” (cerc)

·         “disc” (disc plin) (valoarea prestabilită);

·         “square” (pătrat)

            Listele neordonate pot fi imbricate pe mai multe niveluri:

EFECT

 

Liste ordonate

 

        O listă ordonată de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> (" ol " vine de la " ordered list " = lista ordonată). Fiecare element al listei este iniţiat de eticheta <li> (list item).

Lista va fi identată faţă de restul paginii Web şi fiecare element al listei începe pe un rând nou.

EFECT

 

        Tag-urile <ol> și <li> pot avea un atribut type care stabileşte tipul de caractere utilizate pentru ordonarea listei. Valorile posibile sunt:

·         " A " pentru ordonare de tipul A , B , C , D, etc. ( litere mari );

·         " a " pentru ordonare de tipul a , b , c , d, etc. ( litere mici );

·         " I " pentru ordonare de tipul I , II , III , IV, etc. ( cifre romane mari );

·         " i " pentru ordonare de tipul i , ii , iii , iv, etc. ( cifre romane mici );

·         " 1" pentru ordonare de tipul 1, 2, 3, 4, etc. ( cifre arabe ).

            Următorul exemplu este o listă ordonată cu cifre romane:

EFECT

 

        Tag-ul <ol> poate avea un atribut start care stabileşte valoarea iniţiala a secvenţei de ordonare. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.

        Următorul exemplu este o listă ordonată cu litere mari, începând de la valoarea C.

EFECT

 

Tag-ul <li> poate avea un atribut value care stabilește valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie să fie un numar intreg pozitiv (vezi următorul exemplu): EFECT

 

Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca în exemplul următor: 

EFECT

 

 

 

O listă de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare element al listei este inițiat de eticheta<li> ( list item ). Cele mai multe browsere afişează lista de meniuri ca pe o listă neordonată.

        O listă de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la " director "). Fiecare element al listei este iniţiat de eticheta <li> (list item). Cele mai multe browsere afişează lista de directoare ca pe o listă neordonată. (Nu se recomanda utilizarea acestori tipuri de liste).

Utilizări speciale ale listelor

 

        Dacă într-o listă, în loc de elementele acesteia introduse prin <li>, se inserează un bloc de text, aceasta va fi identat ( întocmai ca elementele unei liste), exemplu:

 

EFECT

 

 

            În exemplu următor lista de definiții are itemii <dt> și <dd> multipli:

 

EFECT

 

 

         Ultimul exemplu este o listă neordonată personalizată pe post de elemente, imagini și texte.

 

EFECT

 

 

5. TABELE. NOŢIUNI ŞI MARCAJE UTILIZATE

 

        Tabelele ne permit să cream o reţea dreptunghiulară de domenii, fiecare domeniu având propriile opţiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.

        Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este format din rânduri. Pentru a insera un rând într-un tabel se folosesc etichetele <tr>...</tr>      ( de la " table row "= rând de tabel ). Folosirea etichetei de sfârşit </tr> este opţională.

        Un rând este format din mai multe celule ce conţin date. O celula de date se introduce cu eticheta <td>..</td>.  Exemplu:

 

EFECT

 

 

            În mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează

    un atribut al etichetei <tabel> numit border.

    Acest atribut poate primi ca valoare orice număr întreg ( inclusiv 0 ) și reprezintă grosimea în pixeli

    a chenarului tabelului.

            Dacă atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilită

    egală cu 1 pixel, o valoare egală cu 0 a grosimii semnifică absența chenarului.

            Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional.           Exemplu:

 

EFECT

 

Alinierea tabelului

 

        Pentru a alinia un tabel într-o  pagină Web se utilizează atributul align al etichetei <table>, cu următoarele valori posibile:

·         "left " ( valoarea prestabilită );

·         "center ";

·         "right ".

         Alinierea este importantă pentru textul ce înconjoară tabelul.

         Astfel:

·         Dacă tabelul este aliniat stânga ( <table align="left"> ), atunci textul care urmează după punctul de inserare al tabelului va fi dispus în partea dreapta a tabelului.

·         Dacă tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care urmează după punctul de inserare al tabelului va fi dispus în partea stânga a tabelului.

·         Dacă tabelul este aliniat pe centru ( <table align="center"> ), atunci textul care urmează după punctul de inserare al tabelului va fi afişat pe toată lăţimea paginii, imediat sub tabel.

 

EFECT

 

 

        Distanța dintre tabel şi celelalte elemente din pagina Web poate fi stabilită cu ajutorul atributelor hspace și vspace al etichetei <table>. Valoarea atributului hspace poate fi orice număr pozitiv, inclusiv 0, și reprezintă distanța pe orizontală dintre tabel și celelalte elemente ale paginii Web.

        Valoarea atributului vspace poate fi orice număr pozitiv, inclusiv 0, și reprezintă distanța pe verticala dintre tabel și celelalte elemente ale paginii Web. Aceste atribute funcţionează numai cu Netscape Communicator.

 

Definirea culorilor de fond pentru un table

 

        Culoarea de fond se stabileşte cu ajutorul atributului bgcolor, care poate fi atașat întregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>.

Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.

Dacă în tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este următoarea: <td>, <tr>, <table>(cu prioritate cea mai mica).

 

EFECT

 

        Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:

        <font color="valoare">...</font>.

 

Dimensionarea celulei unui tabel

 

        Distanța dintre două celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei <table>. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, și reprezintă distanța in pixeli dintre două celule vecine.

Valoarea prestabilită a atributului cellspacing este 2.

 

EFECT

 

 

        Distanța dintre marginea unei celule și conţinutul ei poate fi definită cu ajutorul atributului cellpadding al etichetei <table>.  Valorile acestui atribut pot fi numere întregi pozitive, și reprezintă distanța în pixeli dintre celule și conţinutul ei.

        Valoarea prestabilită a atributului cellpadding este 1.

 

EFECT

 

 

Titlul unui tabel

 

        Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> ( de la "table caption" = titlu tabel ). Aceasta eticheta trebuie plasată în interiorul etichetelor <table>...</table>, dar nu în interiorul etichetelor <tr> sau <td> Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile:

·         " bottom " ( sub tabel );

·         " top " ( deasupra tabelului );

·         " left " ( la stânga tabelului );

·         " right " ( la dreapta tabelului ).

 

EFECT

 

 

Cap de tabel

 

        Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la " tabel header " = cap de tabel ) în loc de <td>. Toate atributele care pot fi ataşate etichetei <td> pot fi de asemenea ataşate etichetei <th>. Conţinutul celulelor definite cu <th> este scris cu caractere aldine și centrat.

 

EFECT

 

 

Alinierea conţinutului unei celule

 

        Alinierea pe orizontală a conţinutului unei celule se face cu ajutorul atributului align care poate lua valorile:

·         "left" ( la stânga );

·         "center" ( centrat , valoarea prestabilită );

·         "right" ( la dreapta );

·         "char" ( alinierea se face fata de un caracter ).

        Alinierea pe verticala a conţinutului unei celule se face cu ajutorul atributului valign care poate lua valorile:

·         "baseline" ( la baza );

·         "bottom" ( jos );

·         "middle" ( la mijloc, valoarea prestabilită );

·         "top" ( sus ).

        Aceste atribute pot fi ataşate atât etichetei <tr> pentru a definirea tuturor elementelor celulelor unui rând, cât și etichetelor <td> și <th>pentru a stabili alinierea textului într-o  singură celulă.

 

EFECT

 

 

 

Dimensionarea exactă a celulelor unui table

 

        Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilită exact cu ajutorul a două atribute ale acestor etichete: width pentru lățime şi height pentru înălţime.

Valorile posibile ale acestor atribute sunt:

·         numere întregi pozitive ( inclusiv 0 ) reprezentând dimensiunea în pixeli a lățimii, respectiv

a înălțimii unei celule;

·         procente din lățime , respectiv înălțimea tabelului.

 

EFECT

 

 

 

Tabele de forme oarecare

 

        Un tabel trebuie privit ca o retea dreptunghiulară de celule. Cu ajutorul a două atribute ale etichetelor <td> și <th>, o celula se poate extinde peste celule vecine.

Astfel:

·         extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a cărui valoare determină numărul de celule care se unifică.

·         extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a cărui valoare determină numărul de celule care se unifică.

        Sunt posibile extinderi simultane ale unei celule pe orizontală și pe verticală. In acest caz , în etichetele <td> și <th> vor fi prezente ambele atribute colspan şi rowspan.

 

EFECT

 

 

Atributul " nowrap "

 

        Atributul nowrap aparține elementelor <td> și <th> ; el interzice întreruperea unei linii de text. Astfel , în tabel pot apărea coloane cu o lăţime oricât de mare.

 

Celule vide ale unui tabel

 

        Dacă un tabel are celule vide, atunci aceste celule vor apărea în tabel fară un chenar de delimitare.

În scopul de a afişa un chenar pentru celule vide se utilizează urmtoarele trucuri:

·         după <td> se pune &nbsp;;

·         după <td> se pune <br>.

        Caracterul &nbsp; ( no break space ) este de fapt caracterul spațiu. Un spaţiu întrodus prin intermediul acestui caracter nu va fi ignorat de browser.

 

EFECT

 

 

Atribute Internet Explorer pentru tabele

 

        Următoarele atribute ale etichetei <table> funcționează cu Internet Explorer 4.0 , 5.0, dar nu cu Netscape Communicator 4.5:

·         background  permite stabilirea unei imagini pentru fondul unui tabel. Primeste ca valoare adresa URL a imaginii folosite pentru fond;

·         bordercolor permite stabilirea culorii pentru chenarul unui tabel;

·         bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;

·         bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel;

 

EFECT

 

Grupuri de coloane

 

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

·         span determină numărul de coloane dintr-un grup;

·         width determină o lățime unică pentru coloanele din grup;

·         align determină un tip unic de aliniere pentru coloanele din grup.

Exemplu:
<colgroup span="3" width="100"></colgroup>

        Într-un bloc <colgroup>, coloanele pot avea configurări diferite dacă se utilizează elementul <col>, care admite atributele:

·         span -identifică acea coloană din grup pentru care se face configurarea. Dacă lipseşte, atunci coloanele sunt configurate în ordine;

·         width -determină o lățime pentru coloana identificată prin span;

·         align determină o aliniere pentru coloana identificată prin span.

EFECT

 

Atributele frame și rules

 

        Atributul frame al etichetei <table> permite specificarea părţilor din chenarul unui tabel care vor fi afişate.

     Valorile posibile ale acestui atribut sunt:

·         void - elimină toate muchiile exterioare ale tabelului;

·         above - afişează o muchie în partea superioară a cadrului tabelului;

·         below - afişează o muchie în partea inferioară a cadrului tabelului;

·         hsides - afişează câte o muchie în partea superioară și inferioară cadrului tabelului;

·         lhs - afişează o muchie în partea din stânga a cadrului tabelului;

·         rhs - afişează o muchie în partea din dreapta a cadrului tabelului;

·         vsides - afişează o muchie în partea din stânga și din dreapta a cadrului tabelului;

·         box - afişează o muchie pe toate laturile cadrului tabelului;

·         border - afişează o muchie pe toate laturile cadrului tabelului;

     Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru celulele unui tabel.

     Valorile posibile sunt:

·         none - elimină toate muchiile interioare ale tabelului;

·         groups - afişează muchii orizontale între toate grupurile din tabel. Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot>și<colgroup>.

·         rows - afişează muchii orizontale între toate liniile tabelului;

·         cols - afişează muchii verticale între toate coloanele tabelului;

·         all - afişează muchii între toate liniile și coloanele;

 

EFECT

 

Subblocurile unui tabel

        În specificațiile HTML 4.0, continutul unui tabel poate fi împărţit în subblocuri prin elementele:

·         <thead><tr><td>...</thead> ( un singur rând );

·         <tfoot><tr><td>...</tfoot> ( un singur rând );

·         <tbody><tr><td>...</tbody> ( oricâte rânduri );

        Într-un tabel există un singur subbloc de tipul <thead> şi un singur subbloc de tipul <tfoot>, dar pot exista mai multe subblocuri de tip<tbody>.

 

6.      OPERAREA CU OBIECTE. INSERAREA IMAGINILOR, SUNETELOR ŞI VIDEOCLIPURILOR.

 

Inserarea imaginilor. Atribute

        Folosirea imaginilor sporeşte atractivitatea şi designul paginii, duce la o mai bună inţelegere a mesajului, dar trebuie luat în consideraţie şi faptul că excesul de imagini va duce la încărcarea greoaie a site-ului. Există numeroase formate grafice, dar cele mai răspândite sunt:

·         GIF (Graphics Interchange Format) introdus de Compuserve

·         JPEG (Joint Photographic Expert Group)

·         PNG (Portable Network Graphic – Format Grafic portabil în reţea)

        Aceste formate sunt dependente de platformă. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informaţie de imagine. Fiecare pixel necesită un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numărul de culori, compresia, transparenţa, întreţeserea şi animaţia. Asemănările şi deosebirile dintre cele trei formate grafice sunt:

·         Imaginile GIF pot utiliza doar 256 de culori, având nevoie de 8 biţi, în timp ce formatele JPEG şi PNG pot utiliza milioane de culori, având 24 de biţi de culoare, respectiv 32 de biţi /pixeli de culoare. Ceea ce face formatul GIF atât de utilizat nu este numai paleta mică de culori (256), dar şi posibilitatea reducerii numărului de culori, astfel, dacă este nevoie doar de 2 culori, se utilizează numai un bit, ceea ce reduce dimensiunea fişierului de 8 ori.

·         Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fişierelor. Comprimarea se poate face, în mod diferit, pentru fiecare format, şi, din aceste motive, ele pot avea dimensiuni mai mici într-un format decât în altul.

·         Formatele GIF şi PNG admit culoarea transparentă, în timp ce formatul JPEG nu admite transparenţa.

·         Formatele GIF şi PNG admit animaţia, în timp ce, cu formatul JPEG, nu se poate obţine animaţie. De exemplu, pentru a obţine animaţie pentru imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder.

·         Toate cele trei formate acceptă întreţeserea. De exemplu, când se vizualizează o pagină web, se pot observa imaginile care apar linie cu linie, de la forma brută până la redarea finală, aceasta reprezintă întreţeserea. Deşi dimensiunea fişierelor creşte cu până la 10%, cu ajutorul acestei întreţeseri, vizitatorul poate să-şi facă o imagine despre ceea ce se va descărca.

Având în vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi recomandate:

·         GIF – pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorită dimensiunii mici a fişierelor.

·         JPEG pentru fotografii, când se doreşte să se redea cât mai exact culoarea reală a imaginii.

·         PNG – pentru desene complexe, dar şi pentru fotografii, acesta fiind formatul care îmbină caracteristicile celor două.

        Imaginile pot fi descărcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezintă standarde de identificare a resurselor (de exemplu, fişiere) şi pot fi adrese URL absolute şi relative.

 

Adrese URL absolute

 

        Adresele absolute identifică locaţia unui fişier imagine de pe Internet sau alte calculatoare conectate la Internet şi au sintaxa:protocol/nume_locație/cale/nume_fişier

Un exemplu de adresă URL absolută: http://lectiivirtualeopris.ro/profa.jpg

unde:

·         htpp:// – este protocolul Internet utilizat;

·         școalaHoghiz– este numele locației;

·         images – este directorul până la fişierul imagine dorit;

·         eu.jpg – este fişierul imagine.

Adrese URL relative

 

        O adresă relativă identifică locaţia unei imagini, descriind o cale relativă la directorul curent unde se află fişierul imagine. Adresele relative se referă la localizarea fişierului imagine de pe calculatorul personal şi are sintaxa: cale/nume_fişier.

        Referirea la: – directorul părinte se poate face prin “../”

– directorul rădăcină se poate face prin “/”

    Un exemplu de adresă URL relativă: /../../../friend.jpg sau se mai poate scrie

     c:/windows/web/wallpaper/friend.jpg

            Toate imaginile cu care vom lucra vor avea adresa URL exprimată în funcţie de directorul ce

     conţine documentul HTML care face referire la imagine, adică adresă relativă.

    Imaginile se inseraeză în pagini cu ajutorul tag-ului <img>, care este un element inline, adică poate

    fi inserat oriunde în pagină. Sintaxa acestui element este: <img atribute>.

            În continuare este prezentat un exemplu de utilizare a elementului <img>:

 

EFECT

 

        Pentru ca acest exemplu să poată fi executat, trebuie ca fişierul Taj_Mahal.jpg să fie în acelaşi folder cu pagina, deoarece nu s-a indicat nicio adresă.

 

Atributele elementului img

 

            Atributele elementului <img> sunt: src, alt, align, border, height, width,hspace, vspace.

    În continuare vor fi descrise succint aceste atribute.

 

Atributul src


        Atributul src este un atribut obligatoriu al elementului IMG, care identifică fişierul ce conţine imaginea care se doreşte a fi inserată. Fişierele imagine pot avea extensia: .jpg, jpeg, png etc. Fişierul care conţine imaginea se găseşte în directorul curent (ca în exemplul de mai sus), în alt folder din calculatorul curent sau în reţeaua web. În cazul în care fişierul se află:

·         în altă locaţie decât directorul curent, numele fişierului trebuie precedat de calea relativă la directorul curent;

·         în reţeaua web, trebuie dată adresa URL absolută, ca de exemplu: http://lectiivirtualeopris.ro/profa.jpg.

 

Atributul alt

 

        Există posibilitatea ca imaginile să nu se poată încărca din diferite motive, situaţie în care se foloseşte atributul alt al elementului <img>. Valoarea acestui atribut este un text, care va fi afişat în locul imaginii.

 

EFECT

 

Atributul align

 

        Atributul  align  indică browser-ului cum va fi aliniată poza faţă de text. În lipsa unei  opţiuni, poza este plasată acolo unde este scrisă în cod (<img>este element inline, iar textul începe de la baza pozei).Valorile atributului sunt:

·         left – aliniere la stânga şi textul „curge” pe lângă imagine în dreapta ei, începând din partea superioară;

·         right – aliniere la dreapta şi textul „curge” pe lângă imagine în stânga ei, începând din partea superioară ;

·         top – textul este plasat în partea superioară a imaginii;

·         middle – textul are plasat, la mijlocul imaginii, numai primul rând, restul continuând sub imagine;

·         bottom textul este plasat în partea de jos a imaginii şi continuă sub imagine.

În exemplul următor se poate vedea modul de aliniere a imaginii într-o pagină:

 

EFECT

 

Atributul border

 

        Atunci când se inserează o imagine, browser-ul o va afişa fără chenar. Pentru a adăuga un chenar unei imagini se foloseşte atributulborder=”nr_pixeli”, unde nr_pixeli reprezintă grosimea chenarului în pixeli. Valoarea implicită este 0. Dacă în exemplul de mai sus se mai adaugă acest atribut <img src="Taj_Mahal.jpg" height ="150" width = "150" border = "4"> browser-ul va afişa o bordură în jurul imaginii cu grosimea de 4.

 

Atributele width şi height

 

        Imaginea este transferată de browser-e de la adresele URL la adresa de unde se vizualizează pagina, la dimensiunile ei reale. Pentru a redimensiona o imagine pe lăţime se foloseşte atributul width, iar pe înălţime se foloseşte atributul height. Redimensionarea unei imagini se face în mod absolut în pixeli sau prin raportare la ecran, astfel că valorile acestor atribute pot fi date în:

·         Numere naturale, ce reprezintă dimensiunea în pixeli;

·         În procente, ce reprezintă o fracţiune din dimensiunea ferestrei.

     OBSERVAŢII!

1.      Dacă se modifică doar o dimensiune, imaginea va fi afişată de browser proporţional;

2.      Dacă se modifică ambele dimensiuni, imaginea va fi afişată de browser deformată.

Un exemplu de redimensionare a imaginii este dat mai jos.

EFECT

 

Atributele hspace şi vspace

 

            Aceste atribute au acelaşi efect ca şi atributele cu acelaşi nume ale elementului <table>, şi

    anume, asigură distanţa de la imagine la celelalte componente din pagină, pe orizontală (hspace) şi

    pe verticală (vspace), adică definesc spaţii albe în jurul imaginilor.

            Un exemplu în care sunt folosite aceste atribute este dat mai jos.

 

EFECT

 

Atributul clear al elementului BR

 

         Dacă se doreşte a se şterge textul din jurul unei imagini se foloseşte elementul <br clear=”valoare”>, unde valoare poate fi:

·         all – se şterge tot textul din jurul imaginii

·         left – se şterge tot textul din stânga imaginii

·         right – se şterge tot textul din dreapta imaginii

·         none – se lasă textul din jurul imaginii

În exemplul de mai sus se adaugă <BR clear=right>, după elementul <img>

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

         Imaginea se multiplică pe orizontală şi pe verticală până umple întregul ecran.

 

EFECT

 

Inserarea sunetelor și videoclipurilor

 

            Multimedia se prezintă într-o multitudine de formate, iar pe Internet veţi găsi multe dintre

    aceste elemente înglobate în pagini web. Browser-ele actuale oferă suport pentru multe dintre aceste

    formate, dar nu pentru toate. Suportul pentru sunete, animaţii şi video este tratat în mod diferit de

    browsere diferite. Unele elemente pot fi manevrate intern, altele necesită anumite plug-in-uri, în

    vreme ce altele pot solicita activarea anumitor controale ActiveX.

            Elementele multimedia (precum sunetele şi video) sunt stocate în fişiere media. Modalitatea

    cea mai simplă de a determina tipul unui fişier media este de a analiza extensia fişierului respectiv .

 

Formatul fişierelor multimedia ce conţin sunete

 

            Sunetele pot fi stocate în diferite formate de fişiere.

     Astfel deosebim:

    a)  Formatul MIDI

         MIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de informaţii muzicale între dispozitive electronice muzicale (precum sintetizatoare) şi plăcile de sunet ale calculatoarelor.Formatul MIDI a fost implementat în 1982 de către industria muzicală. Acest format este foarte flexibil şi poate fi folosit pentru (aproape) orice, de la crearea unor sunete foarte simple, până la crearea unora cu adevărat profesionale. Fieşierele MIDI nu conţin sunete, ci un set de instrucţiuni digitale muzicale (note muzicale) care pot fi interpretate de plăcile de sunet ale calculatoarelor.Dezavantajul la acest tip de fişiere constă în faptul că nu pot stoca muzică (în toată complexitatea ei), ci doar note muzicale.Avantajul îl constituie mărimea mică a acestor fişiere, prin urmare se pot încărca uşor într-o pagină web, precum şi faptul că acest format este suportat de majoritatea sistemelor de operare şi de cele mai populare browsere de Internet. Fişierele de tip MIDI au extensia .mid sau .midi.

b)  Formatul RealAudio

         Formatul RealAudio a fost dezvoltat pentru Internet de către Real Media. Acest format suportă chiar şi video.Formatul permite difuzarea de informaţii audio (muzică on-line, Internet radio) cu lăţime de bandă joasă. Din cauza acestei lăţimi de bandă, calitatea este, de cele mai multe ori, slabă.Fişierele de tip RealAudio au extensia .rm sau .ram.

c)  Formatul AU

         Acest formatul a fost dezvoltat de către Sun Microsystems şi este suportat de majoritatea sistemelor de operare.Aceste fişierele au extensia .au.

d)  Formatul AIFF

         AIFF (Audio Interchange File Format) a fost dezvoltat de către Apple. Acest tip de fişiere nu sunt suportate de toate browser-ele.Aceste fişierele au extensia .aif sau .aiff.

e)  Formatul SND

         SND (Sound) a fost dezvoltat, de asemenea, de către Apple şi au acelaşi dezavantaj, şi anume că nu sunt suportate de toate browser-ele.Aceste fişierele au extensia .snd.

f)  Formatul WAVE

         WAVE (waveform) a fost dezvoltat de către IBM şi Microsoft. Este un format suportat de toate computerele pe care rulează Windows şi este recunoscut de majoritatea browsere-lor.Fişierele de tip WAVE au extensia .wav.

g)  Formatul MP3

         Fişierele MP3 sunt de fapt fişiere MPEG, dezvoltate iniţial pentru video de către Moving Pictures Experts Group. Se poate afirma că fişierele MP3 reprezintă partea de sunet dîntr-un fişiere video în format MPEG.MP3 este în prezent unul dintre cele mai populare formate folosite la înregistrarea muzicii. Sistemul de codificare MP3 combină o bună compresie (ce duce la fişiere mici) cu calitate înaltă. Este de aşteptat ca pe viitor toate sistemele de operare să ofere suport pentru acest tip de format.Fişierele de tip MP3 au extensia .mp3 sau .mpga.

Formatul fişierelor multimedia ce conţin video

            Şi imaginile video pot fi stocate în diferite formate de fişiere.

   Astfel deosebim:

a)  Formatul AVI

         Formatul AVI (Audio Video Interleave) a fost dezvoltat de către Microsoft. Este un format suportat de toate computerele pe care rulează Windows şi este recunoscut de majoritatea browsere-lor. Deşi este un format des întâlnit pe Internet, nu este întotdeauna suportat de calculatoarele cu sisteme de operare non-Windows.Fişierele de tip AVI au extensia .avi.

b)  Formatul Windows Media

         Acest formatul a fost dezvoltat de către Microsoft. Şi acest format este unul suportat de toate computerele pe care rulează Windows, dar nu este suportat de calculatoarele cu sisteme de operare non-Windows decât în urma instalării unor extra componente (playere specializate).Fişierele de tip Windows Media au extensia .wmv.

c)  Formatul MPEG

         Formatul MPEG  (Moving Pictures Expert Group) este în prezent unul dintre cele mai populare formate folosite pe Internet. Acest format este suportat de majoritatea sistemelor de operare şi de cele mai populare browsere de Internet. Fişierele de tip MPEG au extensia .mpg sau .mpeg.

d)  Formatul QuickTime

         Formatul QuickTime a fost dezvoltat de către Apple şi nu poate rula pe platformele Windows fără instalarea unui player specializat. Fişierele de tip QuickTime au extensia .mov sau .qtm.

 e)  Formatul RealVideo

         Formatul RealVideo a fost dezvoltat pentru Internet de către Real Media.Formatul permite difuzarea de informaţii video (video on-line, Internet video) cu lăţime de bandă joasă. Din cauza acestei lăţimi de bandă, calitatea este, de cele mai multe ori, slabă.Fişierele de tip RealVideo au extensia .rm sau .ram.

 f)  Formatul Shockwave (Flash)

         Formatul Shockwave a fost dezvoltat de către Macromedia. Acest format necesită instalarea unui player specializat pentru a putea rula. În prezent, această componentă este oferită preinstalată de ultimele versiuni ale browsere-lor Netscape şi Internet Explorer. Fişierele de tip Shockwave au extensia .swf.

Adăugarea de informaţii multimedia unei pagini web

 

            Informaţiile multimedia pot fi redate direct de browser sau prin intermediul unui program

   ajutător (un player specializat), în funcţie de elementul HTML şi de formatul fişierului multimedia

   folosit.

            Cea mai simplă cale de a realiza acest lucru este prin folosirea unei ancore (link) care să ducă la

   sursa elementului multimedia. Este cea mai “prietenoasă” metodă întrucât oferă posibilitatea

   vizitatorilor de a alege între a vedea o pagină web cu elemente multimedia sau fără acestea. În acest

   caz pagina se încarcă mult mai repede nemaifiind nevoie să se încarce toate informaţiile multimedia.

         O metodă specifică, mai complexă, ce are ca rezultat includerea în pagina web (ca parte integrantă din aceasta) a unor informaţii multimedia, se realizează prin intermediul elementului <OBJECT>.

Notă: Deşi, în funcţie de browser-ul folosit, mai pot fi folosite şi alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, şi <EMBED>, recunoscut de Internet Explorer şi Netscape, consorţiul W3C (World Wide Web Consortium) recomandă utilizarea elementului <OBJECT>.

Atributele utilizate cu acest element sunt:

Atribut: 

·         archive                        Precizează locaţia (URL-ul) fişierelor arhivă

·         classid             Precizează locaţia (URL-ul) obiectului. Valorile posibile depind de proiectantul elementului de control. În Windows, aceste valori sunt înscrise în regiştri şi pot fi accesate cu aplicaţia Registry Editor

·         codebase         Precizează calea (URI-ul) în care se găseşte clasa obiectului specificat prin atributele classid, data şi archive

·         codetype          Specifică tipul fişierului specificat prin atributul classid

·         data     Precizează numele şi locaţia (URL-ul) obiectului. Se poate folosi împreună sau ca o alternativă a atributului classid, în funcţie de tipul obiectului

·         declare                        Cînd este prezent, acet atribut face ca definiţia curentă introdusă de elementul <OBJECT> să fie tratată ca o simplă declaraţie

·         height  Specifică înălţimea suprafeţei în care va fi afişat obiectul

·         name               Precizează denumirea obiectului (când acesta este cuprins într-un formular)

·         standby            Precizează textul ce va fi afişat până când este încărcat obiectul

·         tabindex           Precizează poziţia elementului curent în document (ordinea în care va fi focalizat de utilizator când se foloseşte tastatura)

·         type                  Determină tipul MIME asociat cu fişierul respectiv. Este un atribut opţional dar recomandat când se foloseşte atributul data

·         width               Specifică lăţimea suprafeţei în care va fi afişat obiectul

         Acest element necesită în mod obligatoriu tag-ul de închidere corespunzător </OBJECT>. Împreună cu elementul <OBJECT> (în interiorul acestuia) se foloseşte şi elementul asociat <PARAM> care defineşte parametrii elementului <OBJECT>.

Atributele utilizate cu acest element sunt:Descriere

·         id                Precizează un identificator unic pentru element

·         name          Precizează o denumire pentru element

·         type            Determină tipul conţinutului

·         value          Specifică valoarea parametrului

·         valuetype    Specifică tipul valoarii parametrului

         Elementul <OBJECT> poate suporta diferite tipuri de informaţii multimedia, cum ar fi imagini, sunete, video, pagini web etc. În funcţie de tipul acestor informaţii, diferă şi sintaxa folosită în limbajul HTML. Astfel, pentru a insera o imagine (în format .jpg), prin intermediul elementului <OBJECT>, se foloseşte următoarea sintaxă:

<OBJECT HEIGHT="..." WIDTH="..." TYPE="image/jpeg" DATA="nume_fisier.jpg">

</OBJECT>

Pentru a insera un sunet (în format .wav) se foloseşte următoarea sintaxă:

 <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

<PARAM NAME="FileName" VALUE="nume_fisier.wmv">

</OBJECT>

Pentru a insera un film (în format .wmv) se foloseşte următoarea sintaxă:

 <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">

<PARAM NAME="FileName" VALUE="nume_fisier.wmv">
</OBJECT>

Pentru a insera o pagină web se foloseşte următoarea sintaxă:

<OBJECT TYPE="text/html" HEIGHT="..." WIDTH="..." DATA="http://www.pagina_web.com">

</OBJECT>

Pentru a insera o animaţie creată în Flash (în format .swf) se foloseşte următoarea sintaxă:

<OBJECT WIDTH="..." HEIGHT="..." CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<PARAM NAME="SRC" VALUE=" nume_fisier.swf">

</OBJECT>

Inserarea unui film QuickTime într-o pagină web

         Formatul QuickTime a fost dezvoltat de către Apple şi, deşi este un format des întâlnit pe Internet, nu poate rula pe platformele Windows fără instalarea unui player specializat. Fişierele de tip QuickTime au extensia .mov sau .qtm. Cu ajutorul elementului <OBJECT> poate fi uşor adăugat cod într-o pagină web astfel încât un film QuickTime să poată fi inserat într-o pagină web. Astfel, se poate seta instalarea automată a unui player QuickTime în cazul în care nu este deja instalat. Sintaxa folosită în mod uzual este de forma următoare:

<OBJECT WIDTH="240" HEIGHT="300" CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM NAME="src" VALUE="sample.mov">

<PARAM NAME="autoplay" VALUE="true">

<PARAM NAME="controller" VALUE="true">

</OBJECT>

         Atributele width şi height trebuie setate astfel încât să corespundă dimensiunii fimului QuickTime (în pixeli).

         Atributul classid identifică în mod unic software-ul ce va rula filmul. Trebuie setat "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" astfel încât să identifice controlul ActiveX ce trebuie instalat pe computer înainte ca filmul să poată fi rulat. Dacă utilizatorul nu are instalat respectivul control ActiveX, browser-ul poate în mod automat să-l descarce şi să-l instaleze.

         Atributul codebase specifică calea (URI-ul) în care se găseşte clasa obiectului specificat prin atributul clsid. Internet Explorer foloseşte acest atribut pentru a specifica locaţia de unde poate fi descărcat player-ul corespunzător.

         În acest caz, trebuie setată "http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind locaţia unde se găseşte ultima variantă a player-ului QuickTime.

         Parametrul src trebuie să se orienteze asupra fişierului ce conţine filmul.

         Parametrul autoplay se setează "true" în cazul în care se doreşte ca filmul să înceapă să ruleze automat. La fel şi parametrul controller se setează "true" în cazul în care se doreşte să fie afişată bara de control a player-ului.

 

Inserarea unui film Real Video într-o pagină web

 

         Formatul RealVideo a fost dezvoltat pentru Internet de către Real Media. Formatul permite difuzarea de informaţii video (video on-line, Internet video) cu lăţime de bandă joasă. Din cauza acestei lăţimi de bandă, calitatea este, de cele mai multe ori, slabă.Fişierele de tip RealVideo au extensia .rm sau .ram. Cu ajutorul elementului <OBJECT> se introduce codul în pagina web astfel încât filmele Real Video să poată fi inserate într-o pagină web. Spre deosebire de formatul QuickTime, nu se poate seta instalarea automată a player-ului corespunzător în cazul în care nu este deja instalat. Prin urmare, înainte de a putea rula un film în format Real Video, este necesară instalarea programului RealPlayer. Versiunea pentru Windows poate fi descărcată de la adresa http://uk.real.com/?mode=rp . Sintaxa folosită în mod uzual este de forma următoare:

<OBJECT WIDTH="320" HEIGHT="240" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">PARAM NAME="controls" VALUE="All">

â<PARAM NAME="autostart" VALUE="true">

<PARAM NAME="src" VALUE="sample.rm">

</OBJECT>

         Atributele width şi height trebuie setate astfel încât să corespundă dimensiunii fimului Real Video (în pixeli).

         Atributul classid identifică în mod unic software-ul ce va rula filmul. Trebuie setat "clsid: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" astfel încât să identifice controlul ActiveX ce trebuie instalat pe computer înainte ca filmul să poată fi rulat.

         Parametrul src trebuie să se orienteze asupra fişierului ce conţine filmul.

         Parametrul autostart se setează "true" în cazul în care se doreşte ca filmul să înceapă să ruleze automat.

         Parametrul controls se setează "All" în cazul în care se doreşte să fie afişată bara de control a player-ului sau "ImageWindow " în cazul în care NU se doreşte să fie afişată bara de control a player-ului.

Tag-ul <Video>

            Eticheta specifică video, cum ar fi un clip video sau a altor fluxuri video.    În prezent, există 3

   formatele video suportate de elementul<Video>: MP4, WebM, și Ogg:

Exemplu<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">  Browser-ul nu suportă tag-ul video.</video>

 

Alte metode de inserare a unor sunete într-o pagină web

 

         Pentru introducerea de sunete într-o pagină web mai pot fi folosite şi alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, şi <EMBED>, recunoscut de Internet Explorer şi Netscape.Elementul <BGSOUND> este folosit pentru a insera un sunet pe fundalul unei pagini web. Fişierele suportate de acest element pot fi în format WAV, AU sau MID. Atributele caracteristice acestui element sunt:Atrcriere

·         Balance           -Precizează balansul. Poate lua valori între -10000 (100% stânga) şi +10000 (100% dreapta)

·         Delay               -Defineşte timpul de pauză dintre repetiţii

·         Id                     -Defineşte un identificator atribuit sunetului

·         Loop                -Precizează de câte ori va fi repetat sunetul (-1 = infinit)

·         Src                   -Precizează locaţia (URL-ul) fişierului ce conţine sunete

·         Title                 -Precizează un titlu atribuit sunetului

·         Volume            -Precizează volumul. Poate lua valori între 0 (max.) şi -10000 (min.)

Sintaxa folosirii acestui element este foarte simplă:

   <html>
   <body>
   <H2>Muzica in fundal </H2>

<BGSOUND SRC="http://www.bestmusic.ro/loredana /Aniela.mid">

</body>
</html>

         Folosind codul de mai sus obţinem o pagină web pe fundalul cărei se va auzi o piesă instrumentală.Elementul <EMBED> este folosit pentru a insera elemente multimedia într-o pagină web în cazul browsere-lor care nu suportă elementul <OBJECT>. Elementul <OBJECT> poate fi folosit cu browserele mai noi, care suportă controale ActiveX (Internet Explorer), în vreme ce elementul <EMBED> este recomandat să fie folosit pentru browserele mai vechi. Pentru compatibilitate, se recomandă folosirea simultană a celor două elemente. În această situaţie, un browser care recunoaşte elementul <OBJECT> va ignora elementul <EMBED>.

            Atributele caracteristice acestui element sunt:

·         autostart          Stabileşte dacă obiectul multimedia porneşte în mod automat la încărcarea paginii web. Poate lua valorile true sau false

·         height              Specifică înălţimea suprafeţei în care va fi afişat obiectul

·         hidden             Stabileşte dacă obiectul multimedia este vizibil pentru vizitatorul paginii web. Poate lua valorile true sau false

·         src                   Precizează locaţia (URL-ul) fişierului ce conţine sunete

·         width               Specifică lăţimea suprafeţei în care va fi afişat obiectul

·         volume                        Precizează volumul. Poate lua valori între 0 (max.) şi -10000 (min.)

         Împreună cu elementul <EMBED> se recomandă folosirea elementului <NOEMBED> care ar trebui să conţină informaţii ce vor fi afişate în cazul în care browser-ul nu suportă elementul <EMBED>. Din nefericire, un browser care suportă elementul <EMBED> va ignora elementul <NOEMBED>, chiar dacă este incapabil să afişeze obiectul introdus de elementul <EMBED>.

 

7.      REFERINŢE. REFERINŢE INTERNE ŞI EXTERNE

 

Referinţele au următoarele roluri:

·         Permit trecerea de la o pagină la alta de pe Web şi revenire la pagina iniţială prin apăsarea butonului Back al browser-ului;

·         Permit trecerea de la o pagină la alta de pe calculatorul propriu;

·         Permit trecerea la fişiere non web de pe Internet (ftp, telnet etc.);

·         Permit trecerea la fişiere non HTML (.txt, .jpg, .pdf etc.);

·         Permit vizitarea unei pagini оncepând dîntr-un anumit loc, renunţând la barele de defilare;

·         Permit trimiterea unui e-mail.

 

 

 

 

Marcajul <a>

 

         Pentru a crea o legătură se foloseşte marcajul <a> ancoră, care are sintaxa:    <a atribute> conţinut </a>

Conţinutul dintre marcajele <a> şi </a> poate fi text şi/sau imagine, este afişat de browser sub formă de legătură (colorat şi subliniat), şi poate accepta comenzi de la mouse (un clic) sau de la tastatură (ENTER). Când este deasupra unei legături, cursorul grafic ia forma unei mâini, indicându-ne astfel că browser-ul este pregătit să descarce resursa Internet de la adresa URL indicată.    Dacă un document are mai multe legături ne putem deplasa de la una la alta şi cu mouse-ul şi cu ajutorul tastei TAB, iar pentru a face o legătură activă se execută clic cu butonul stâng pe legătură sau se tastează ENTER.

Atributele tag-ului <a> sunt:

·         href;

·         target;

·         title;

·         name;

Atributul href

         Atributul href (referinţă hipertext) este obligatoriu pentru tag-ul legătură (ca src pentru elementul <img>), are sintaxa href="adresa URL"şi are rolul de a identifica o adresă URL absolută (de pe Internet) sau relativă (locală). În exemplul de mai jos dăm o referinţă către un fişier local, flori.jpg,  şi către pagina tich.ro, de pe WEB:

 

EFECT

 

Atributul target

 

         Când utilizatorul activează o legătură, browser-ul înlocuieşte fereastra care conţine legătura cu o nouă fereastră, specificată de adresa URL din href. Atributul target face să se schimbe această operaţie implicită  şi el are sintaxa target="nume", unde nume defineşte fereastra în care va fi încărcată  nouă pagină. Numele este orice şir de caractere sau valori constante:

·         _blank pagina va fi încărcată într-o nouă fereastră;

·         _parent pagina va fi încărcată în fereastra părinte;

·         _top pagina va fi încărcată în fereastra top a cadrului;

·         _self pagina va fi încărcată în aceeaşi fereastră(implicită).

EFECT

           

Atributul title

 

            Acest atribut are un caracter general şi poate fi ataşat la majoritatea elementelor HTML. Sintaxa acestui element este:title="valoare".

    Când mouse-ul este deasupra conţinutului tag-ului <a> conţinut </a> se transformă într-o mână şi va

    afişa valoarea atributului title, într-o sugestie de instrument (într-un cadru).

 

Atributul name

 

         Acest atribut este utilizat pentru a defini o ancoră în interiorul unei pagini. Sintaxa acestui atribut este: name="valoare".

 

Referinţe către alte pagini Web

 

         Dacă se doreşte accesarea unei pagini de pe alt site, valoarea atributului href este o adresă URL absolută.

         Amintim că o adresa URL absolută are sintaxa: protocol /nume-calculator/cale/fişier unde protocol poate fi, de exemplu, http.

 

Referinţe cu imagini

         O legătură poate fi creată şi cu ajutorul unei imagini. Ca şi în cazul în care conţinutul unei legături este un text, şi în cazul în care conţinutul este o imagine, accesarea paginii se face cu un clic, sau un ENTER pe imagine. Exemplu:

EFECT

 

Referinţe cu adrese URL relative

 

         Adresele URL relative sunt acele adrese care fac referire la pagini de pe calculatorul propriu, indicând cale/nume-fişier, fără a fi prefixate de protocol şi nume calculator. În adresele relative putem folosi caracterele ../ – pentru a urca un nivel în structura de directoare(către directorul părinte). Se cunoaşte faptul că un site poate să aibă paginile (fişierele) organizate într-o structură arborescentă de directoare. Să presupunem că avem următoarea structura arborescentă :

http://ciobanu.cich.md/images/ierarhie.png

         Conform structurei arboriscente date din pagina pag6.html din mapa M5 se pot accesa celelalte pagini, utilizând următoarele referinţe:

1.      ../../pag1.html

2.      ../../M1/pag2.html

3.      ../../M3/M6/pag7.html

4.      ...

 

 

 

Referinţe către informaţii non Web

 

         Se pot face referinţe şi la adrese URL absolute de pe Internet, care nu sunt resurse Web. În adresele URL absolute se înlocuieşte protocolul http cu alte protocoale non Web (ftp, telnet, gopher etc.).

 

8.      OPERAREA CU FORMULARE. MARCAJE UTILIZATE.

 

         Un formular este un ansamblu de zone active alcatuit din butoane ,casete de selecţie,câmpuri de editare etc.

         Formularele va asigura construirea unori pagini Web care permit utilizatorilor să introducă efectiv informaţii şi să le transmită serverului. Formularele pot varia de la o simplă casetă de text, pentru introducerea unui şir de caractere pe post de cheie de cautare - element caracteristic tuturor motoarelor de căutare din Web - până la o structură complexă ,cu multiple secţiuni, care oferă facilităţi puternice de transmisie a datelor. O sesiune cu o pagină web ce conţine un formular cuprinde următoarele etape:

·         Utilizatorul completează formularul şi îl expediează unui server;

·          O aplicaţie dedicată de pe server analizează formularul completat şi (dacă este necesar) stochează datele într-o bază de date;

·         Dacă este necesar serverul expediează un raspuns utilizatorului.

         Un formular este definit într-un bloc delimitat de etichetele corespondente <form>şi </form>.

 

Atribute esenţiale ale elementului <form>

 

Există două atribute esenţiale ale elementului <form>:

1.      Atributul action precizează ce se va întampla cu datele formularului odată ce acestea ajung la destinaţie. De regulă ,valoarea atributului action este adresa URL a unui script aflat pe un srver WWW care primeşte datele formularului, efectuează o prelucrare a lor şi expediează către utilizator un răspuns.

            <form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.

Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell.

2.      Atributul method precizează metoda utilizată de browser pentru expedierea datelor formularului. Sunt posibile următoarele valori:

·         get (valoarea implicită). În acest caz, datele din formular sunt adăugate la adresa URL precizată de atributul action;

-nu sunt permise cantităţi mari de date (maxim 1 Kb);

-între adresa URL şi date este inserat un "?".

         Datele sunt adăugate conform sintaxei: nume_camp = valoare_camp. Între diferite seturi de date este introdus un "&".

         Exemplu:

 "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2";

 

·         post În acest caz datele sunt expediate separat. Sunt permise cantităţi mari de date (ordinul MB)

         Pentru ca un formular să fie funcţional, trebuie precizat ce se va întâmpla cu el după completarea şi expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin poşta electronică (e-mail). Pentru aceasta se foloseşte un atribut al etichetei<form>: şi anume action care primeşte ca valoare " mailto: " concatenat cu o adresă validă de e-mail către care se va expedia formularul completat.

 

Un formular cu un câmp de editare şi un buton de expediere

 

         Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul elementului se foloseşte atributul type al etichetei <input>. Pentru un câmp de editare, acest atribut primeste valoarea "text". Alte atribute pentru un element<input> sunt:

·         name - permite ataşarea unui nume fiecărui element al formularului;

·         value - care permite atribuirea unei valori iniţiale unui element al formularului.

         Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, în care atributul type este configurat la valoarea "submit".Acest element poate primi un nume prin atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value, dacă această valoare a fost stabilită.

 

EFECT

 

         Pentru elementul <input> de tipul câmp de editare (type = "text") , alte doua atribute pot fi utile:

·         size - specifică lăţîmea câmpului de editare ce depăşeşte această lăţâme ,atunci se execută automat o derulare acestui câmp;

·         maxlength - specifică numărul maxim de caractere pe care le poate primi un câmp de editare, caracterele tastate peste numărul maxim sunt ignorate.

    Observaţii:
     
  - dacă atributul type lipseşte într-un element <input>, atunci câmpul respectiv este considerat în mod prestabilit ca fiind de tip "text";

        - formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa completarea şi apăsarea tastei ENTER.

 

Butonul Reset

 

         Dacă un element de tip <input> are atributul type configurat la valoarea "reset", atunci în formular se introduce un buton pe care scrie "Reset". La apăsarea acestui buton, toate elementele din formular primesc valorile prestabilite (definită odata cu formularul ), chiar dacă aceste valori au fost modificate de utilizator.

         Un buton Reset poate primi un nume cu ajutorul atributului name şi o valoare prîntr-un atribut value. Un asemenea buton afişează textul "Reset" dacă atributul value lipseşte, respectiv valoarea acestui atribut în caz contar.

 

EFECT

 

Câmp de editare de tip "password"

 

         Dacă se utilizează eticheta <input> având atributul type configurat la valoarea "password" , atunci în formular se introduce un element asemănător cu un câmp de editare obişnuit introdus prin type="text". Toate atributele unui câmp de editare rămân valabile. Singura deosebire constă în faptul că acest câmp de editare nu afişează caracterele clar, ci numai caractere *, care ascund de privirile altui utilizator aflat în apropiere valoarea introdusă într-un asemenea câmp. La expedierea formularului însă, valoarea tastată într-un câmp de tip "password" se transmite clar.

 

EFECT

 

Butoane radio

 

         Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type având valoarea "radio".

EFECT

         La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", în funcţie de alegerea făcută de utilizator.

 

Casete de validare

 

         O casetă de validare(checkbox) permite selectarea sau deselctarea unei opţiuni. Pentru inserarea unei casete de validare se utilizează eticheta <input> cu atributul type configurat la valoarea "checkbox".

         Observaţii:
- fiecare casetă poate avea un nume definit prin atributul name.

- fiecare casetă poate avea valoarea prestabilită selectat definită prin atributul checked.

 

EFECT

 

Casete de fişiere

 

         Într-o pereche "name = value" a unui formular se poate folosi întregul conţinut al unui fişier pe post de valoare. Pentru aceasta se inserează un element <input> într-un formular, cu atributul type având valoarea "file"(fişier).

Atributele pentru un element de tip casetă de fiiere sunt:

·         name - permite ataşarea unui nume;

·         value - primeşte ca valoare adresa URL a fişierului care va fi expediat o dată cu formularul. Această valoare poate fi atribuită direct atributuluivalue, sau poate fi selectată prin intermediul unei casete de tip File Upload sau Choose File care apare la apăsarea butonului Browse... din formular;

·         enctype - precizează metoda utilizată la criptarea fişierului de expediat.Valoarea acestui atribut este "multipart/form-data".

 

EFECT

 

Liste de selecţie

 

         O listă de selecţie permite utilizatorului să aleagă unul sau mai multe elemente dîntr-o  listă finită. Lista de selecţie este inclusă în formular cu ajutorul etichetelor corespondente <select> și </select>.

         O listă de selecţie poate avea următoarele atribute:

•       name - ataşează listei un nume (utilizat în perechile "name=value" expediat serverului);

•       size - care precizează(prîntr-un număr întreg pozitiv, valoarea prestabilită fiind 1) câte elemente din listă sunt vizibile la un moment dat pe ecran(celelalte devenind vizibile prin acţionarea barei de derulare ataşate automat listei).Elementele unei liste de selecţie sunt incluse în lista cu ajutorul etichetei <option>. Două atribute ale etichetei <option> se dovedesc utile:

·         value - primeşte ca valore un text care va fi expediat server-ului în perechea "name=value", dacă acest atribut lipseşte, atunci către server va fi expediat textul ce urmează după <option>;

·         selected(fara alte valori) - permite selectarea prestabilită a unui element al listei.

 

EFECT

 

Listă de selecţie cu selecţii multiple

 

         O listă de selecţie ce permite selecţii multiple se creează întocmai ca o listă de selecţie obisnuită. În plus, eticheta <select> are un atribut multiple(fară alte valori). Când formularul este expediat către server pentru fiecare element selectat al listei care este se inserează către o pereche "name=value" unde name este numele listei.

 

EFECT

 

Câmpuri de editare multilinie

 

         Într-un formular câmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta are următoarele atribute:

·         cols - specifică numărul de caractere afişate într-o linie;

·         rows - specifică numărul de linii afişate simultan;

·         name - permite ataşarea unui nume câmpului de editare multilinie;

·         wrap - determină comportamentul câmpului de editare faţă de sfârşitul de linie. Acest atribut poate primi urmatoarele valori:

o    "off" - întreruperea cuvintelor se produce la marginea dreaptă a editorului, când doreşte utilizatorul. Caracterul de sfârşit de linie este inclus în textul transmis serverului o data cu formularul;

o    "hard" - întreruperea cuvintelor se produce la marginea dreaptă a editorului. Caracterul de sfârşit de linie este inclus în textul transmis serverului o dată cu formularul;

o    "soft" - întreruperea cuvintelor se produce la marginea dreaptă a editorului. Nu se include caracterul de sfârşit de linie în textul transmis serverului o dată cu formularul.

 

EFECT

 

Butoane

 

            Într-un formular pot fi afişate butoane. Când utilizatorul apasă un buton, se lansează în execuţie

   o funcţie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcţii

   (acest lucru este posibil dacă se utilizează limbajele Javascript sau Java).

   Pentru a însera un buton într-un formular, se utilizează eticheta <input> având atributul type

   configurat la valoarea "button". Alte două atribute ale elementului <input> sunt:

·         name - permite ataşarea unui nume butonului;

·         value -primeşte ca valoare textul ce va fi afişat pe buton.

            Un buton pentru lansarea în execuţie a unei acţiuni poate fi introdus prin elementul <input>

   având atributul type configurat la valoarea "button",

Există o a doua modalitate de a introduce într-o pagina Web un buton, şi anume prin intermediul blocului <button>...</button>. Un astfel de buton poate fi inserat într-un formular, în acest caz declanşând acţiuni legate de acel formular, sau poate fi introdus oriunde în pagină pentru iniţierea unor acţiuni independente de formulare. Atributele posibile ale elementului "button" sunt:

·         name - acordă elementului un nume;

·         value - precizează textul care va fi afişat pe buton;

·         type - precizează acţiunea ce se va executa la apăsarea butonului dacă acesta este inclus într-un formular.Valorile posibile pentru acest atribut sunt:

o    "button";

o    "submit";

o    "reset".

În corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei imagini.


Observaţii finale:

 

- elementul <form> poate avea un atribut target, care primeşte ca valoare numele unei ferestre a browserului în care va fi încărcat răspunsul trimis serverului WWW la expedierea unui formular.

- toate elementele cuprinse într-un formular pot avea un atribut disabled care permite dezactivarea respectivului element.

- toate elementele de tip text cuprinse într-un formular pot avea un atribut readonly care interzice modificarea conţinutului acestor elemente.

9.      FERESTRE ÎN HTML. COMENZI DE CONSTRUIRE A FERESTRELOR(CADRELOR)

 

         Ferestrele sau cadrele ne permit să definim în fereastra browser-ului subferstre în care să fie încărcate documente HTML diferite. Ferestrele sunt definite într-un fişier HTML special , în care blocul <body>...</body> este înlocuit de blocul <frameset>...</frameset>. În interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.

         Un atribut obligatoriu al etichetei <frame> este src, care primeşte ca valoare adresa URL a documentului HTML care va fi încărcat în acelframe. Definirea cadrelor se face prin împărţirea ferestrelor (şi a subferestrelor) în linii şi coloane:

1.      Împărţirea unei ferestre într-un număr de subferestre de tip coloană se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastră;

2.      Împărţirae unei ferestre într-un număr de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastră.

         Valoare atributelor cols şi rows este o listă de elmente separate prin virgulă, care descriu modul în care se face împărţirea. Elementele listei pot fi:

·         un număr întreg de pixeli;

·         procente din dimensiunea ferestrei(număr între 1 și 99 terminat cu %);

·         n* care inseamna n parţi din spaţiul rămas;

Exemplu 1:   cols="200,*,50%,*"  înseamnă o împărţire în 4 subferestre, dintre care prima are 200 pixeli, a treia ocupă jumătate din spaţiul total disponibil, iar a doua şi a patra ocupă în mod egal restul de spaţiu rămas disponibil.

Exemplu 2:   cols="200,1*,50%,2*"  înseamnă o împărţire în 4 subferestre, dintre care prima are 200 pixeli, a treia ocupă jumătate din spaţiul total disponibil iar a doua şi a patra ocupă în mod egal restul din spaţiul rămas disponibil, care se împarte în trei părţi egale, a doua fereastră ocupând o parte, iar a patra ocupând 2 părţi.

 

Observaţii:


- Dacă mai multe elemente din listă sunt configurate cu *, atunci spaţiul disponibil rămas pentru ele se va împarţi în mod egal.

- O subfereastră poate fi un cadru (folosind <frame>) în care se va încarcă un document HTML sau poate fi împărţită la rândul ei în alte subfereste (folosind <frameset>).

 

EFECT

 

         În exemplul următor este creată o pagina Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini.

 

EFECT

         În exemplul următor este creată o matrice de 4 cadre (2 x 2).Pentru a realiza acest lucru, se folosesc simultan cele două atribute cols şi rows.

 

EFECT

 

         În exemplul următor este creată o pagina Web cu trei cadre mixte. Pentru a o crea se procedează din aproape în aproape. Mai întâi, pagina este împărţită în două subferestre de tip coloană, după care a doua subfereastră este împărţită în două subferestre de tip linie.

 

EFECT

 

Culori pentru chenarele cadrelor şi dimensionarea chenarului unui cadru

 

         Pentru a stabili culoarea chenarului unui cadru se utilizează atributul bordercolor. Acest atribut primeşte ca valoare un nume de culoare sau o culoare definită în conformitate cu modelul de culoare RGB. Atributul bordercolor poate fi ataşat atât etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, cât şi etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru individual.

         Atributul border al etichetei <frameset> permite configurarea lăţimii chenarelor tuturor cadrelor la un număr dorit de pixeli. Valoarea prestabilită a atributului border este de 5 pixeli. O valoare de 0 pixeli va defini un cadru fără chenar.

 

EFECT

 

         Pentru a obţine cadre fără chenar se utilizează border="0". În mod prestabilit, chenarul unui cadru este afişat şi are aspect tridimensional. Afişarea chenarului unui cadru poate fi dezactivat dacă se utilizează atributul frameborder cu valoare "no".

         Acest atribut poate fi ataşat atât etichetei <frameset> (dezactivarea fiind valabilă pentru toate cadrele incluse) cât şi etichetei <frame>(dezactivarea fiind valabilă numai pentru un singur cadru).        Valorile posibile ale atributului frameborder sunt:

·         yes - echivalent cu 1;

·         no - echivalent cu 0;

 

EFECT

 

Bare de defilare

 

         Atributul scrolling al etichetei <frame> este utilizat pentru a adaugă unui cadru o bară de derulare care permite navigarea în interiorul documentului afişat în interiorul cadrului. Valorile posibile sunt:

·         yes - barele de derulare sunt adăugate întotdeauna;

·         no - barele de derulare nu sunt utilizabile;

·         auto - barele de derulare sunt vizibile atunci când este necesar.

 

EFECT

 

         Atributul noresize al etichetei <frame> (fără nici o valoare suplimentara) dacă este prezent, inhibă posibilitatea prestabilită a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului.

 

Poziţionarea documentului într-un cadru

 

         Atributele marginheight şi marginwidth ale etichetei <frame> permit stabilirea distanţei în pixeli dintre conţinutul unui cadru şi marginile verticale, respectiv orizontale ale cadrului. Valori posibile:

·         număr de pixeli;

·         procent din lăţimea, respectiv din înălţimea cadrului;

 

EFECT

 

         Există browsere care nu suportă cadre pentru aceasta se utilizează în interiorul blocului <frameset> eticheta <noframes>. Dacă programul de navigare ştie să interpreteze cadre, va ignora ce se găseşte în această porţiune, iar dacă nu, materialul cuprins în zona <noframes>...</noframes> va fi singurul care va fi înţeles şi afişat. De precizat este faptul că între <noframes> ... </noframes> se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).

        

Cadre interne

 

         Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se inserează într-o pagina Web în mod asemănător cu o imagine sau în modul în care se specifică marcajul <frame>, aşa cum rezultă din următorul exemplu:

<iframe src="pagina1.html" height=40% width=50%> </iframe>

În acest caz, am specificat că doresc o fereastră de cadru intern care are 40% din înălţimea şi 50% din lăţimea paginii curente. Atributele acceptate de eticheta <iframe> sunt în parte preluate de la etichetele <frame>şi <frameset>, cum ar fi: src, frameborder,marginheight, marginwidth, scrolling, name, noresize;

sau de la eticheta <img>: vspace, hspace, align, width, height;

 

EFECT

 

 

 

 

Ţinte pentru legături

         În mod prestabilit, la efectuarea unui clic pe o legatură nouă, pagina către care indică legătura o înlocuieşte pe cea curentă, în aceeaşi fereastră(cadru). Acest comportament se poate schimba în două moduri:

1.      prin plasarea în blocul <head>...</head> a unui element <base> care precizează, prin atributul target numele ferestrei(cadrului) în care se vor încărca toate paginile noi referite de legaturile din pagina curentă conform sintaxei:

2.      <base target="nume_ferastra/frame_de_baza">

3.      prin plasarea în eticheta <a> a atributului target, care precizează numele ferestrei (cadrului) în care se va încărca pagina nouă referită de legătură, conform sintaxei:

4.      <a href="legatura" target="nume_fereastra/frame">...</a>

 

Observatie:

 

         Dacă este prezent atât un atribut target în <base> cât şi un atribut target în <a>, atunci cele precizate de atributul target din <a> sunt prioritare. Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei: <farme name="nume_frame">

În exemplul următor este prezentată o pagină Web cu două cadre. Toate legăturile din cadrul 1 încarcă paginile în cadrul 2.

 

EFECT

 

Valori pentru atributul target

 

         Atributul target al etichetei <frame> acceptă anumite valori predefinite de o valoare deosebită pentru creatorii de pagini Web. Aceste valori sunt:

·         _self - încărcarea noii pagini are loc in cadrul curent;

·         _blank - încărcarea noii pagini are loc într-o  fereastră nouă anonimă;

·         _parent - încărcarea noii pagini are loc în cadrul părinte al cadrului curent dacă acesta există, altfel are loc în fereastra browser-ului curent;

·         _top - încărcarea noii pagini are loc în fereastra browser-ului ce conţine cadrul curent;


 

APLICAȚII-HTML

Maparea unei imagini

            În HTML este posibil să împărțim o imagine mai mare în mai multe zone numite puncte fierbinţi (hot spots) cu rol de hyperlink, prin procedeul numit maparea imaginii. Se obține astfel o hartă de imagini (image map). De exemplu, cu clic intr-o zona rectangulară care delimitează un hotel din harta unei staţiuni, se va deschide o nouă pagină web cu informaţii despre acest hotel. Maparea imaginii se realizeaza astfel:

1. Deschidem imaginea într-un editor grafic (ex. Paint) şi stabilim coordonatele colțurilor stânga-sus, respectiv dreapta-jos pentru fiecare mic dreptunghi ce urmează să devină hot-spot.

Coordonatele se masoară in pixeli și sunt de forma (x, y), unde x reprezintă coloana, iar y linia, relativ la coltul stânga-sus al imaginii.

În figura alăturată, coordonatele colţurilor stânga-sus şi dreapta-jos ale hot spot-ului sunt (97, 97) şi (129, 144).

2. Introducem în codul HTML al paginii, eticheta <MAP>, care creaza harta de imagini și definește hot spot-ul. Aceasta are sintaxa:

<MAP NAME=”NAME=”NumeHarta”>

 <AREA HREF=”URL folosit” SHAPE=”forma” COORDS = “coordonate” ALT=”text alternativ”> </MAP>

unde:

            NumeHarta  este numele hărţii de imagini

            URL folosit  este calea către fişierul folosit (ex: o pagina web cu informații despre hotelul respectiv), sau URL-ul acestuia.

            Forma este una din următoarele: RECT (dreptunghi), CIRCLE (cerc) şi POLY (poligon).

            Coordonate este o listă de numere ce defineşte dimensiunile hot spot-ului. În funcţie de forma acestuia, lista conţine:

·         pentru RECT, perechile de coordonate ale colţurilor stânga-sus şi dreapta jos ale dreptunghiului.

·         pentru CIRCLE, coordonatele x, y ale centrului şi raza cercului.

·         pentru POLY, perechile de coordonate ale vârfurilor poligonului.

·         Text alternativ este textul care apare cand punem mouse-ul deasupra hot-spot-ului

3. Introducem in codul HTML al paginii, eticheta <IMG>, prin care precizam imaginea folosita si faptul ca aceasta contine o harta de imagini, conform sintaxei:

<IMG SRC="fisier imagine" USEMAP="#numele hartii de imagini">

Pentru exemplul dat, codul HTML care creaza imaginea mapata este :

<MAP NAME="harta">

<AREA HREF="vulturul.html" SHAPE="RECT" COORDS="97, 97, 129, 144" ALT="Hotel Vulturul">

</MAP>

<IMG SRC="venus.jpg" USEMAP="#harta">

Dacă exista mai multe hot spot-uri, tag-ul <AREA> se repetă în <MAP> pentru fiecare din acestea.

 

Efecte mouse-over

 

            Obținerea de efecte mouse-over deasupra unei imagini se face adaugând în eticheta <IMG> care definește imaginea, atributele:

- Onmouseover: stabilește imaginea care o înlocuiește pe cea inițiala când mouse-ul este în locul respectiv

- Onmouseout: stabilește imaginea vizibilă când mouse-ul nu mai este deasupra (de obicei, se revine la imaginea inițială)

            Exemplu:

            <img src="imagine1.jpg" onmouseover="this.src='imagine2.jpg'"             onmouseout="this.src='imagine1.jpg'">