Deși a început ca un experiment militar, în mai puțin de un deceniu, chiar înainte de mileniul trei, rețeaua globală de rețele de calculatoare… [303784]

1. INTRODUCERE

1.1. Justificarea temei alese

Deși a [anonimizat], [anonimizat] (cunoscută și sub numele Internet) a [anonimizat], în rândul diverselor catgorii sociale și profesionale.

Începând cu anii ’95, Internetul, [anonimizat], a cunoscut o amploare greu de imaginat.

[anonimizat], în zilele noastre aspectul acestora s-a schimbat radical. După doar 10 ani, [anonimizat] a acestora. [anonimizat] o [anonimizat].

Lucrarea de față își propune în primul rând să fie o [anonimizat], [anonimizat].

1.2. [anonimizat] (W3 sau simpul Web) s-a născut în martie 1989 [anonimizat] l-a propus ca sistem de comunicare de informații pentru comunitatea fizicienilor de la CERN (The European Organization for Nuclear Research)

[anonimizat] : Wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.

Sistemul este bazat pe extinderea tehnicii hypertext (hypertext)la nivel de rețele. Un document hypertext este un fișier normal de text care are însa particularitatea următoare :

conține legături la alte părți ale documentului sau la alte documente.

Descrierea unui document Web se face prin HyperText Markup Language (HTML). Conținutul său îl constituie textul documentului împreună cu diverse comenzi de formatare.

Sistemul WWW utilizează modelul client/server:

[anonimizat] a sistemului care rulează pe alt calculator;

un client WWW (Explorer, Netscape, Mosaic) – este un program care permite utilzatorului transmisia de cereri către un server WWW și vizualizarea rezultatului.

Protocolul utilizat pentru comunicare între client și server se numește HTTP (HyperText Transmission Protocol)

Important : Nu există o sesiune permanentă între client și server

2. LIMBAJUL HTML

2.1. [anonimizat]-ul web este un “must”. [anonimizat] o identitate vizuală în mediul online. Un site web poate fi creat cu ajutorul limbajului HTML (HyperText Markup Language). [anonimizat], este indexat foarte bine de motoarele de căutare. Pentru a crea un site cu ajutorul HTML sunt necesare:
un editor de text pentru a scrie codul HTML
un browser web pentru a [anonimizat]. [anonimizat]++, phpDesigner 7 sau Sublime Text. Scopul unui browser web ([anonimizat]) este de a citi documentele de tip HTML. [anonimizat], ci doar interpretarea lor.
Crearea unui document stă la îndemâna oricui, indiferent dacă are sau nu noțiuni de administrare a unui server . În prezent, tendința este ca, așa cum o adresa de e-mail este un lucru obișnuit pentru utilizatorii de Internet, home-page-urile, documente HTML care oferă informații despre persoane, institutii, diverse grupuri etc să fie exploatate pe scară cât mai largă.

HTML nu este, de fapt, un limbaj de programare. Specificațiile lui definesc un set de “tag”-uri (comenzi) si regulile de scriere ale acestora. Cu ajutorul limbajului HTML formatăm un document pentru a putea fi accesat prin Internet realizând următoarele:

documente independente de platforma (sistemul de operare)

legături la alte documente de pe Internet

introducerea de imagini, sunet și video

interactivitate între cititorul documentului și document

Documentele WWW sunt de fapt texte ASCII care conțin diferite elemente ale acestui limbaj de formatare (HTML). De regulă, documentele HTML au extensia .html, dar si .htm. Documentele HTML pot fi create manual folosind un editor de texte ASCII (de exemplu “Notepad” din Windows), poate fi convertit din alte formate folosind diverse editoare HTML sau pot fi create dinamic de un server WWW sau de un script.

Un document HTML lucrează extrem de simplu. El “spune” programului de navigare prin Internet pe care-l folosim (browser), prin intermediul “tag”-urilor, ce să facă cu textul, imaginile, sunetul, sau celelalte elemente cuprinse în document.

Limbajul HTML este utilizat pentru a descrie structura documentului și referințele conținute de acesta.

Învățarea limbajului HTML are trei mari avantaje:

este foarte simplă și nu necesită mult timp

oferă controlul absolut asupra realizării paginii web

oferă posibilitatea folosirii în cadrul paginilor realizate secvențe de cod HTML ”împrumutate” de la alte pagini web.

2.2. Sintaxa limbajului HTML

HTML nu ține cont de forma originală a textului. Nu contează cum arată textul când este scris, ci cum va arăta pe ecran în fața unui privitor. Nu conteaza tab-urile, spațiile multiple, nu se ține cont de sfârșitul de linie etc. Pentru realizarea aspectului obținut de regulă cu ajutorul acestor caractere se folosesc tag-uri.

Toate instrucțiunile sau tag-urile sunt scrise între paranteze unghiulare: <nume-tag>. Ele transmit comenzi către browser pentru a afișa pagina într-un anumit mod.

Aceste tag-uri sunt de două feluri: de început <nume-tag> și de sfârșit </nume-tag> și au efect asupra obiectului descris între ele (paragraf de text, imagine, etc).

O etichetă/instrucțiune/tag poate fi scrisă atât cu litere mici, cât și cu litere mari. ea acționează asupra textului până la închiderea ei </>.

După numele tag-ului de început mai pot fi scrise și o serie de atribute, astfel:

Dacă într-un tag există mai multe atribute, acestea trebuie separate prin spațiu.

Obs. Parantezele pătrate […] semnifică faptul că obiectul încadrat între ele poate lipsi. Uneori valorile atributelor pot fi date și fără ghilimele “ ” .

Atributele pot fi definite ca niște proprietăți ale tag-urilor. Ele se adaugă numai în tag-ul de început. Dacă un tag nu are niciun atribut, atunci browser-ul va lua în considerare valorile implicite ale tag-ului respective.

2.3. Elemente de bază pentru construirea unei pagini HTML

Pentru primul document de cod hypertext se vor folosi doar câteva etichete (tags) de bază. Pentru descrierea documentului este nevoie de un editor de text simplu (xterm, NotePad etc). Fișierul trebuie salvat cu extensia *.html (*.htm) pentru a fi recunoscut și vizualizat de browser.

Întreaga dezvoltare a limbajului HTML s-a facut în ideea creșterii calității fără sacrificarea simplității. Fiecare document HTML este structurat în două părți: antetul – “head” și conținutul – “body”. Structura unui document HTML arată astfel:

<html>

<head>

…antetul documentului…

</head>

<body>

…corpul documentului…

</body>

</html>

2.4. Definiție structurală

Marchează începutul, respectiv sfârșitul unui document HTML sau XHTML. Acest tag poate include tag-urile <HEAD> și <BODY>.

Include antetul (header-ul) documentului HTML. Acest tag poate include tag-urile <TITLE> și <META>.

Cuprinde titlul documentului.

Cuprinde informația suplimentară despre acest document. De exemplu, acest tag poate conține cuvintele cheie pentru acest document, deosebit de importante pentru facilizarea accesibilității acestuia pe Internet. Mai poate conține numele autorului documentului, descrierea documentului HTML etc.

Atributele:

NAME – specifică numele informației suplimentare

CONTENT – definește conținutul informației suplimentare

Exemplu:

<META name=”Facultatea de matematică-informatică” content=”În 1991-1992, Secția Știința Calculatoarelor (Facultatea de matematică) a devenit Facultatea de Știința Calculatoarelor. Această facultate a avut la început două secții: Știința Calculatoarelor (învățământ de lungă durată) și Colegiul de Tehnologia Informației (învățământ de scurtă durată). Din 1994, Colegiul de Birotică, înființat anterior (ca secțiune a altei facultăți), a fost intergrat ca secție a Facultății de Ștința Calculatoarelor”><META name="keywords" content=" Educație, Facultate, Știința Calculatoarelor, Secția">

Se poate observa că acest tag nu are corespondent un tag de închidere </META>, el fiind închis normal prin paranteză unghiulară.

Definește atributele “corpului” documentului.

Atributele:

BACKGROUND – definește o imagine utilizată ca fundal;

Ex: BACKGROUND=”fundal.jpg”

Imaginea “fundal.jpg” utilizată ca fundal;

BGCOLOR – definește culoarea fundalului documentului

Ex: BGCOLOR=#FF0000

fundalul paginii va fi de culoare roșie (culoare scrisă în hexa);

BGCOLOR=Yellow

fundalul paginii va fi de culoare galbenă (culoare scrisă în clar);

Culori în hexa:

TEXT – indică culoarea textului normal

Ex: TEXT=#FF0000

textul pe pagină va fi de culoare roșie (culoare scrisă în hexa);

TEXT=Yellow

textul pe pagină va fi de culoare galbenă (culoare scrisă în clar);

LINK – indică culoarea textului corespunzător unei hyperlegături nevizitate

Ex: LINK=#FF0000

textul corespunzător unei hyperlegături nevizitate va fi de culoare roșie (culoare scrisă în hexa);

LINK=Yellow

textul de hyperlegătură nevizitată va fi de culoare galbenă (culoare scrisă în clar);

ALINK – indică culoarea textului corespunzător unei hyperlegături active (în curs de procesare)

Ex: ALINK=#FF0000

textul corespunzător unei hyperlegături active va fi de culoare roșie (culoare scrisă în hexa);

ALINK=Yellow

textul de hyperlegătura activă va fi de culoare galbenă (culoare scrisă în clar);

VLINK – indică culoarea textului corespunzător unei hyperlegături vizitate

Ex: VLINK=#FF0000

textul corespunzător unei hyperlegături vizitate va fi de culoare roșie (culoare scrisă în hexa);

VLINK=Yellow

textul corespunzător unei hyperlegături vizitate va fi de culoare galbenă (culoare scrisă în clar);

Exemplu:

<body bgcolor=#ffffff text=#000000 link=blue alink=red vlink=#C0C0C0>

Acest tag va defini fundalul paginii de culoare albă, scrisul pe pagina de culoare neagră, textul de legătură albastru, textul de legătură activă roșu și textul pentru legătura vizitată de culoare gri.

2.5. Divizori de text, comentarii, citate

În general, textele conținute de o pagină se pot găsi în mai multe paragrafe. Un paragraf se introduce între tag-urile <P>text</P>.

La afișare, două paragrafe consecutive vor fi separate printr-o linie goală.

Tag-ul </P> poate lipsi; un nou paragraf poate fi detectat prin tag-ul <P>.

În cadrul unui fișier HTML, Enter-ul nu are nici un efect. De asemenea, dacă două cuvinte ale unui paragraf sunt separate prin mai multe spații sau alte caractere albe (enter-uri, tab-uri), browser-ul afișează doar un singur spațiu.

Atributele:

ALIGN – definește alinierea paragrafului

ALIGN=center

Paragraf aliniat pe centru;

ALIGN=left

Paragraf aliniat la stânga;

ALIGN=right

Paragraf aliniat la dreapta.

Acest tag (“Brake”) forțează terminarea rândului. Când navigatorul (browser-ul) întâlnește acest tag, afișează textul care urmează începând de la marginea din stânga, indiferent unde anume este această margine.

Specifică un text în care nu sunt permise ruperile de rând.

Tag-ul <HR> are ca efect crearea unei linii orizontale pe pagină. Liniile orizontale pot fi utilizate pentru separarea diferitelor secțiuni ale unei pagini Web sau pentru punerea în evidența a unor porțiuni de document cum ar fi liste, meniuri, informații de contact.

Atributele:

WIDTH – indică lățimea liniei orizontale în pixeli.

Ex: WIDTH=630

SIZE – definește înălțimea liniei orizontale în pixeli.

Ex: SIZE=5

ALIGN – definește alinierea liniei orizontale

ALIGN=left

Alinierea la stânga a liniei orizontale;

ALIGN=center

Alinierea pe centru a liniei orizontale;

ALIGN=right

Alinierea la dreapta a liniei orizontale;

COLOR – definește culoarea liniei orizontale.

Ex: COLOR=red

Exemplu:

Codul HTML:

Permite divizarea textului, cu sau fără aliniere.

Permite inserarea de adnotari în documente HTML. Comentariile sunt ignorate de navigator și se pot extinde pe mai multe rânduri.

Definește un citat. Punerea în evidență a citatelor se face de regulă prin indentare diferită față de restul textului din documentul HTML.

Definește un citat. Punerea în evidență a citatelor se face fără indentare diferită față de restul textului din documentul HTML.

Exemplu:

Codul HTML:

2.6. Format de prezentare

Antetele (headings) sunt utilizate pentru a ierarhiza diferite secțiuni de text, diferite titluri. HTML definește șase nivele pentru antete. în funcție de numărul de după H mărimea fontului diferă (<H1> utilizează fontul de dimensiune maximă, <H6> fontul de dimensiune minimă), iar textul care apare între tag-uri este scris îngroșat (bold).

Definește centrarea unei porțiuni de document (text, tabele, imagini), față de dimensiunile curente ale ferestrei.

Defineste aspectul textului cuprins între tag-urile de început și de sfârșit.

Atributele:

COLOR – specifică culoarea textului

Ex: COLOR=#FF0000

textul va fi de culoare roșie (culoare scrisă în hexa)

COLOR=Yellow

textul va fi de culoare galbenă (culoare scrisă în clar)

FACE – definește tipul de caractere

Ex: FACE=Arial

tipul de caracter folosit (font);

Obs. Cele mai des întalnite fonturi pentru documentele HTML sunt Arial, Times New Roman, Verdana, Helvetica, Courier, etc.

SIZE – definește dimensiunea textului

Ex: SIZE=2

Obs. Dimensiunile variază între 1 si 7 si pot fi prefixate cu + sau -, caz în care specifică distanța dintre dimensiunea fontului curent și fontul de bază.

EXEMPLU:

<font face=Arial size=2 color=red>

Textul va fi afisat pe monitor de dimensiunea 10 puncte cu caractere Arial de culoare rosie.

</font>

Permite schimbarea dimensiunii fontului de baza.

Atributele:

SIZE – definește dimensiunea fontului de bază

Obs. Dimensiunile fonturilor de bază variază între 1 și 7, dar nu pot fi prefixate cu + sau –

Definește stilul de text îngroșat (bold). Un tag sinonim al lui <B> este:

<STRONG> text </STRONG>

Definește stilul de text înclinat (italic). Tag-uri sinonime ale lui <I> sunt: <EM>text</EM>, <DFN>text</DFN>, <CITE>text</CITE>.

Definește text subliniat (underline).

Tag-ul <FONT> poate include printre alte tag-uri si tag-urile <B>, <I> si <U>.

Are rolul de a afișa subliniat textul cuprins între cele două tag-uri ale sale. Este un tag sinonim al lui <U>.

Are rolul de a afișa tăiat (cu o linie orizontală) textul cuprins între cele două tag-uri ale sale. Un tag sinonim al lui <S> este: <DEL>text</DEL>

Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai mare decât textul în care este cuprins.

Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai mic decât textul în care este cuprins.

Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus (ca o putere).

Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus (ca un indice).

Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus monospațiat (toate caracterele ocupă aceeași lungime – practic, se folosește fontul Courier New).

Definește un text preformatat. Majoritatea documentelor HTML conțin text formatat cu tag-uri. Asta înseamnă că textul respectiv este afectat de restricțiile HTML, adică toate spațiile suplimentare, taburi etc să fie ignorate de către navigator. Afișarea textelor, exact ața cum sunt ele se poate face cu ajutorul tag-ului <PRE> care permite chiar afișarea unei grafici rudimentare obținute cu caractere ASCII.

2.7. Liste în HTML

Listele permit ca anumite enunțuri (texte, elemente) să fie numerotate sau marcate într-un anumit fel.

2.7.1. Liste nenumerotate

Sunt liste în care elementele nu sunt numerotate, ci în dreptul fiecăruia este afișat un marcator.

Tag-ul <UL> definește o listă nenumerotată.

Atributul TYPE permite inserarea de buline de tip disc, cerc sau pătrat-umplut în fața elementelor listei cu excepția celor care au atributul TYPE în linia de definiție a elementului (tag-ul <LI>). Valoarea implicită este disk. Daca atributul TYPE lipsește, bulina inserată în față va fi un disk.

TAG-ul <LI> definește un element de listă nenumerotată.

Atributul TYPE are aceeași semnificație ca la tag-ul <UL>, însă afectează doar elementul listei definit de tag-ul <LI> curent.

2.7.2. Liste ordonate

Sunt liste în care elementele sunt numerotate.

Definește o listă numerotată.

Atributele:

TYPE – permite generarea de tipuri diverse de liste numerotate

TYPE=A – elementele vor fi notate cu litere majuscule (A,B,C,…)

TYPE=a – elementele vor fi notate cu litere mici (a,b,c,…)

TYPE=1 – elementele vor fi numerotate cu cifre arabe (1,2,3,…)

TYPE=I – elementele vor fi numerotate cu cifre romane (I,II,III,…)

START – definește valoarea de start (literă sau număr)

Tag-ul <LI> definește un element de lista ordonată.

2.7.3. Liste de definiții

Au rolul de a descrie o listă de definiții.

Inserarea lor în cadrul documentului HTML se face prin tag-urile <DL>…</DL>.

Elementele listelor de definiție sunt de două tipuri:

Termenul care este definit (antetul) – introdus de tag-ul <DT>…</DT> (tag-ul de sfârșit nefiind obligatoriu);

Definiția propriu-zisă (subantetul) – introdusă de tag-ul <DD>…</DD> (tag-ul de sfârșit nefiind obligatoriu).

2.7.4. Imbricarea listelor

Listele pot conține în interiorul lor alte liste.

2.8. Grafică și link-uri

2.8.1. Imagini

Imaginile sunt stocate în fișiere cu diverse formate. Formatele acceptate de browserele pentru imagini sunt:

GIF (Graphics Interchange Format) cu extensia .gif;

JPEG (Joint Photografic Experts Group) cu extensia .jpg;

PNG (Portable Network Graphics) cu extensia .png;

BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);

XPM (X PixMap) cu extensia .xmp;

TIFF (Tagged Image File Format) cu extensia .tif.

Tag-ul inserează o imagine (format GIF sau JPG). Acest tag nu este un tag pereche (nu are corespondent un tag de închidere </IMG>).

Atributele:

SRC – specifică calea către imagine, respectiv fișierul care conține imaginea (URL-ul imaginii);

Ex: SRC=”imagine_color.gif”

LOWSRC – specifică calea și fișierul care conține o imagine care va fi încărcată înainte de a se încărca imaginea specificată in atributul SRC. Aceasta este de regula aceeasi imagine, dar de o rezoluție mai slabă sau chiar aceeași imagine, dar în tonuri de gri sau numai în alb-negru;

Ex: LOWSRC=”imagine_simpla.gif”

ALT – textul care va fi afișat de navigatoarele care nu lucrează în modul grafic;

Ex: ALT=”Facultatea de Informatica”

WIDTH – definește lățimea imaginii în pixeli. Daca imaginea este de altă latime, ea va fi scalată să încapă în spațiul rezervat;

Ex: WIDTH=200

HEIGHT – definește înălțimea imaginii în pixeli. Dacă imaginea este de altă înălțime, ea va fi scalată sa încapă în spațiul rezervat;

Ex: HEIGHT=50

BORDER – specifică dimensiunea în pixeli a unui chenar în jurul imaginii;

Ex: BORDER=2

2.8.2. Link-uri (legături/referințe)

O caracteristică importantă a HTML-ului o reprezintă abilitatea lui de legare a unei porțiuni de text de alte documente, de a purta cu el referințe. Acest lucru este realizat cu hyperlink-uri. Browserul afișeaza textele care fac legături sau referințe cu alte culori și/sau subliniate pentru a evidenția faptul ca sunt legături hypertext.

Link-urile reprezintă mecanismul prin care:

un vizitator al paginii, prin executarea unui click, să poată accesa rapido altă pagină, și, dacă acesta dorește, să poată reveni în pagina inițială prin apăsarea butonului Back al browser-ului de Internet;

un vizitator al paginii să primească un anumit fișier, de orice tip, care se găsește pe site-ul respectiv (download);

un vizitator al paginii să poată asculta un mesaj sonor sau chiar să poată viziona un film;

un vizitator al paginii, printr-un click, să poata vizualiza pagina (inclusiv cea curentă) doar dintr-un anumit loc, fără a folosi barele de derulare;

un vizitator al paginii, prin accesarea unui click, să poată trimite un e-mail administratorului paginii.

Fiecare referință (hyperlink) într-un document HTML este definită de două componente:

elementul de activare, de tip text sau de tip grafic, prin intermediul căruia (cu ajutorul mouse-ului sau a tastaturii) se activează legătura;

elementul URL care descrie adresa documentului adresat și eventual a punctului de intrare în document (ancora), dupa ce hyperlink-ul este activat.

Există posibilitatea de a realiza o legătură între un anumit punct al unui document si un alt anumit punct al aceluiași sau al altui document. Acest lucru se realizează prin crearea unei ancore în locul din document unde dorim sa ne conducă legătura și apoi în realizarea unei legături care va indica atât documentul referit, cât și paragraful (sau secțiunea de document) la care facem referire.

Tag-ul ancoră marchează textului activ (sau imaginea activă) în documentul HTML inițial (de la care pornește legătura).

Cele mai întâlnite atribute sunt:

HREF – precizează calea de legătură

TARGET – indică unde se deschide documentul către care se face legătura; poate avea valorile:

_blank: deschide noua pagina într-o fereastră nouă;

_self: deschide noua pagină în aceeași fereastră cu legătura;

_parent: deschide noua pagină într-un cadru superior link-ului;

_top: deschide noua pagina în toată fereastra navigatorului, anulând toate cadrele.

2.8.2.1. Legătura între pagini

<A HREF=”URL”> text </A>

URL – numele paginii HTML către care se face legătura

2.8.2.2. Legătura către un site

<A HREF=”URL”> text </A>

URL – adresa site-ului către care se face legătura

2.8.2.3. Utilizarea poștei electronice

<A HREF=”mailto:adresa_email”> text </A>

2.8.2.4. Legături către alte tipuri de fișiere

<A HREF=”numefisier”> text </A>

numefisier – reprezinta denumirea (inclusiv extensia) unui fișier audio, video, arhivă etc.

2.8.2.5. Legături către secțiuni din interiorul aceluiași document (ancore)

Dacă o pagină este foarte lungă, pentru a evita folosirea barelor de derulare, se folosesc ancorele.

Se specifică numele secțiunii (ancorei)

<A NAME=”sirdecaractere”></A>

NAME = sirdecaractere, asociază un nume ancorei curente, astfel încât să poată constitui ținta unui alt link. Numele trebuie să fie unic în cadrul documentului.

Se specifică codul linkului

<A NAME=”#sirdecaractere”> text </A>

În mod analog se pot face și linkuri cu nume declarate în alte fișiere.

Pagina din care se face legătura:

Pagina către care se face legătura, la secțiunea Partea 3:

2.9. Tabele în HTML

Tabelele reprezintă o modalitate de aranjare a textului, imaginilor și altor elemente care compun documentul HTML.

Orice tabel se definește cu tag-ul pereche <TABLE> </TABLE>, iar conținutul tabelului său care poate avea un număr oarecare de rânduri și un număr oarecare de coloane.

Atributele:

BORDER – definește chenarul tabelului, exprimat în pixeli

Ex: BORDER=3

CELLSPACING – specifică spațiul dintre celulele tabelului, exprimat în pixeli;

Ex: CELLSPACING=3

CELLPADDING –specifică spațiul dintre marginile celulelor și continutul lor, exprimat în pixeli;

Ex: CELLPADDING=2

WIDTH – specifică lățimea tabelului pe pagină, în pixeli sau în procente față de lățimea totală a ecranului monitorului, exprimată în pixeli.

Ex: WIDTH=500 sau WIDTH=75%

Orice tabelel HTML e specificat rând cu rând. Fiecare rând conține definiții pentru fiecare celulă. Pentru a defini un tabel: se definește primul rând din partea de sus, celulă cu celulă, apoi se definește al doilea rând, celulă cu celulă etc. Coloanele sunt calculate automat conform numarului de celule care formează rândurile.

<TR> – “Table Row” definește o linie din tabel.

<TH> – ”Table Head” specifică o celulă de tip antet.

<TD> – ”Table Data” definește o celulă normală din tabel.

Atributele:

ALIGN – specifică alinierea orizontală

ALIGN=left

Este utilizat pentru alinierea orizontală la stânga;

ALIGN=center

Este utilizat pentru alinierea orizontală pe centru;

ALIGN=right

Este utilizat pentru alinierea orizontală la dreapta;

VALIGN – specifică alinierea verticală

VALIGN=top

Este utilizat pentru alinierea verticală în partea de sus a celulei;

VALIGN=middle

Este utilizat pentru alinierea verticală în partea de mijloc a celulei;

VALIGN=bottom

Este utilizat pentru alinierea verticală în partea de jos a celulei.

Pentru a obține tabele complex organizate, celulele pot fi extinse atât orizontal (pe mai multe coloane), cât și vertical (pe mai multe rânduri) cu ajutorul atributelor COLSPAN, respectiv ROWSPAN utilizate în tag-ul <TD>.

COLSPAN crează o celulă care se extinde peste câteva coloane.

ROWSPAN crează o celulă care se extinde peste câteva rânduri.

Valorile atributelor reprezintă numărul de coloane, respectiv rânduri peste care se dorește a fi extinsă celula.

Tabelele pot fi incluse unul în altul prin inserarea tag-ului <TABLE> în interiorul unei intrări <TD>.

2.10. Divizarea în cadre (Frame-uri)

Cadrele sau frame-urile( frames) împart fereastra activă a navigatorului (browser-ului) în mai multe ferestre mai mici.

Lucrul cu frame-uri permite realizarea unor documente HTML mai sofisticate, care pot facilita navigarea prin spațiul WWW. Folosirea cadrelor permite navigarea simultană prin mai multe documente HTML în cadrul aceluiasi browser. Acest lucru s-ar putea face și fără frame-uri, deschizând succesiv mai multe ferestre ale unui browser.

Într-un documet HTML cu frame-uri, tag-urile <BODY> si </BODY> sunt înlocuite de <FRAMESET> și </FRAMESET>. Aceste tag-uri definesc documentul de mai sus ca un document de tip frame. La vizualizarea unui astfel de document cu un browser care nu recunoaște stilul frame, va apărea o fereastra complet albă.

În momentul încărcării unui document de tip frame, navigatorul întâi împarte fereastra în frame-uri și apoi documentele specificate în <FRAME> vor fi încarcate și afișate în interiorul cadrelor.

Acest tag înlocuiește tag-urile <BODY> si </BODY> și realizează declarația împărțiri in frame-uri a ferestrei browser-ului. El conține o declarație de cadre orizontale sau o declarație de cadre verticale.

Atributele:

ROWS=”dim1,dim2,…,*” reprezintă în câte cadre va fi împărțită fereastra navigatorului pe direcția orizontală. dim1,dim2 este dimensiunea în pixeli a cadrelor, * este diferența dintre dimensiunea totală a ecranului de monitor și suma celorlalte cadre.

COLS=”dim1,dim2,…,*” reprezintă în câte cadre va fi împărțită fereastra navigatorului pe direcția orizontală.

BORDER specifică dimensiunea în pixeli a chenarului din jurul tuturor cadrelor.

BORDERCOLOR stabilește culoarea chenarului tuturor cadrelor.

EXEMPLU:

<FRAMESET ROWS=”35,20%,*,*”>

atunci documentul va fi împărțit în linii astfel:

există patru linii (rânduri);

toate liniile au aceeasi lățime, respectiv lățimea ferestrei active a navigatorului;

rândul de sus are înalțimea egală cu 35 de pixeli;

al doilea rând este 20% din înălțimea totală a ferestrei active;

restul de înaltime este împărtit între rândurile 3 și 4, în mod egal.

Acest tag indică browser-ului ce să pună în cadrele definite cu tag-ul <FRAMESET>. Trebuie sa existe un singur tag <FRAME> și numai unul singur pentru fiecare cadru specificat în lista de coloane si de linii. Tag-ul <FRAME> neînsoțit de atribute generează împarțirea ecranului fără introducerea vreunui conținut.

Atributele:

SRC – Definește calea către documentul care va fi afișat de navigator în cadrul respectiv;

NAME – Determină numele cadrului respectiv. Folosirea numelor pentru frame-uri face ca orice pagină web să se încarce în interiorul acelui cadru precizand atributul target=”nume cadru” pentru tagul <A HREF>;

NORESIZE – Indică faptul ca frame-ul nu poate fi redimensionat;

SCROLLING – specifică existența sau nu a barelor de rulare

SCROLLING=yes

Barele de rulare (scroll-bars) exista la nivelul unui frame;

SCROLLING=no

Barele de rulare (scroll-bars) nu exista la nivelul unui frame;

SCROLLING=auto

Barele de rulare (scroll-bars) la nivelul unui frame vor fi afișate numai dacă documentul nu poate fi afișat în întregime în interiorul cadrului;

BORDERCOLOR stabilește culoarea chenarului frame-ului.

Cadrele imbricate se obțin prin includerea unui bloc <FRAMESET> în cadrul altui bloc <FRAMESET>.

Definirea unei subferestre în interiorul unei pagini web se face prin intermediul cadrelor interne, utilizând tag-ul <IFRAME>:

Introducerea tag-ului se face in interiorul corpului <BODY>…</BODY>

Atributele:

SRC – Definește calea către documentul care va fi afișat de navigator în cadrul respectiv;

NAME – Determină numele cadrului respectiv. Folosirea numelor pentru frame-uri face ca orice pagină web să se încarce în interiorul acelui cadru precizând atributul target=”nume cadru” pentru tagul <A HREF>;

NORESIZE – Indică faptul ca frame-ul nu poate fi redimensionat;

SCROLLING – specifică existența sau nu a barelor de rulare

SCROLLING=yes

Barele de rulare (scroll-bars) exista la nivelul unui frame;

SCROLLING=no

Barele de rulare (scroll-bars) nu exista la nivelul unui frame;

SCROLLING=auto

Barele de rulare (scroll-bars) la nivelul unui frame vor fi afișate numai dacă documentul nu poate fi afișat în întregime în interiorul cadrului;

WIDTH – definește lățimea cadrului în pixeli;

HEIGHT – definește înălțimea cadrului în pixeli;

BORDER – specifică dimensiunea în pixeli a chenarului cadrului;

BORDERCOLOR stabilește culoarea chenarului frame-ului.

Legături în frame-uri

Într-un document HTML normal, când este selectată o legătura (link) navigatorul înlocuiește documentul curent cu un nou document. În cazul documentelor tip frame, când un link într-un frame este selectat, browserul poate modifica frame-ul conținând acea legatură, un alt frame, un grup de frame-uri sau întreaga fereastra. Acest lucru poate fi specificat cu ajutorul unui nou atribut TARGET al tag-ului <HREF>. Pentru fiecare legătura, se poate specifica atât documentul care să se încarce, cât și unde să fie afișat (încărcat) acel document.

EXEMPLU:

<A HREF=”URL_document” TARGET=”nume_tinta”>Hyperlink Text</A>

unde “nume_tinta” poate fi un nume de frame sau un nume implicit.

Exemplu:

Codul HTML

Codul 024legaturi1.html:

Codul 024legaturi2.html:

Se construiește pagina. Când se accesează link-urile, paginile respective se vor afișa în cadrul numit ”cadrumobil” (de aceea s-a folosit în interiorul link-ului atributul target).

Introducerea sunetelor și a deplasărilor textului

2.11.1. Mișcarea textului

Tag-ul permite deplasarea textului de la dreapta la stânga.

Atributele:

DIRECTION – direcția de mișcare a textului, valoarea implicită este “left”;

BEHAVIOR – tipul de scroll aplicat ce poate avea valorile:

scroll – valoarea implicită, conținutul se mișcă de la o margine la alta și apoi reapare;

slide – când se atinge marginea opusă, mișcarea se oprește;

alternate – conținutul se mișcă alternativ între cele 2 margini și este întotdeauna vizibil;

Ex: <MARQUEE BEHAVIOR=”alternate”> textul animat </MARQUEE>

SCROLLDELAY – permite stabilirea vitezei de derulare a animației, cu cât valoarea este mai mare – tranziția este mai lentă (scrolldelay=”1” deplasarea are viteza foarte mare; scrolldelay=”1000” viteza este foarte mică);

SCROLLAMOUNT – reprezintă numărul de pixeli cu care se mută textul la fiecare pas – o valoare mai mare implică o viteză mărită de mișcare; valoarea implicită este “;

LOOP – numărul de parcurgeri ale textului, valoarea implicită fiind “infinite”. Atributul behavior trebuie să specifice ca la ultimul ciclu animația să se oprească atunci când atinge marginea respectivă;

Ex: <MARQUEE Loop=3 BEHAVIOR=Slide>Adrese Web utile</MARQUEE>

WIDTH, HEIGHT – stabilesc dimensiunile casetei în care se produce animarea textului. Aceste dimensiuni pot fi stabilite în pixeli sau în procente din dimensiunile ferestrei de afișare a browser-ului;

BGCOLOR – permite specificarea culorii casetei în care se produce animarea textului.

Ex: <MARQUEE WIDTH=60% BGCOLOR=red SCROOLDELAY=200>Adrese Web utile</MARQUEE>

2.11.2. Introducerea sunetelor

Sunetele utilizate în pagini web pot avea extensiile: .mp3, .mid, .midi, .wav, .au, .ra.

Permite introducerea în pagină a unui sunet.

Atributele:

SRC – Definește calea către fișierul sunet care va fi accesat de navigator în cadrul respectiv;

AUTOSTART – Stabilește dacă sunetul va începe sau nu după încărcarea paginii web. Poate avea valoare true sau false;

LOOP – Stabilește numărul de repetiții ale sunetului (loop=”infinite” rulează sunetul la nesfârșit;

VOLUME – Permite reglarea volumului sonor, poate lua valori între 0 și 100.

2.12. Formulare în HTML

Formularele sunt folosite în scopul obținerii informației de la vizitatorii site-ului.

Un formular este o secțiune a unui document Web în care utilizatorul poate introduce informații. Acestea sunt trimise către serverul Web unde pot fi înregistrate într-o bază de date pentru utilizări ulterioare sau pentru controlul informațiilor returnate utilizatorului.

Formularele HTML pot realiza: introducerea de text sau alegerea dintr-o paletă de opțiuni, colectarea mai multor elemente de informație împreună, restrângerea răspunsurilor utilizatorului la un set de valori bine definite, structurarea informației furnizate de utilizator pentru procesarea automată, implementarea GUI (Graphical User Interfaces) pentru aplicatii de rețea sau pentru navigarea pe site-uri Web.

Formularul este alcătuit din:

câmpuri de text;

meniuri ce se pot derula;

butoane radio;

casete de validare.

Tag-ul definește un formular:

Atributele:

ACTION – precizează script-ul care va fi declanșat după validarea cererii;

METHOD – precizează modul în care datele vor fi transmise script-ului destinatar;

METHOD = get – informațiile sunt transmise ca parametri ai script-ului destinatar

Metoda get creeaza o variabilă de mediu Query-String în care sunt memorate datele, variabilă care poate fi examinată de script-ul server.

Inconvenient: dacă informațiile sunt voluminoase se pot pierde porțiuni din acestea

METHOD = post – informațiile sunt transmise către intrarea standard (stdin). Pentru a le recepționa, script-ul server trebuie să aibă acces la fluxul datelor de intrare standard.

2.12.1. Câmpuri de intrare și butoane

Câmpurile de intrare sunt variabile (zone) care pot recepționa informații de tip text introduse de către utilizatorul formularului. Fiecare câmp are asociată o fereastră pe ecranul formularului.

Butoanele sunt obiecte care permit setarea unor opțiuni ce urmează a fi transmise script-ului server sau lansarea unor operații speciale – transmisia datelor formularului (butonul de validare) sau reinițilizarea datelor cu valorile lor implicite (butonul reset).

2.12.1.1. Câmpuri de intrare simple și butoane

Câmpurile de intrare simple se caracterizează prin aceea că în fereastra asociată câmpului respectiv nu pot fi introduse mai multe linii de text.

Atributele:

TYPE – definește tipul datelor ce pot fi introduse în zona (câmpul) de intrare sau tipul de buton

Valori:

TYPE=”text” – desemnează un câmp în fereastra căruia se va introduce un șir normal de caractere;

TYPE=”password” – caracterele introduse sunt afișate prin *-uri (formează o parolă);

TYPE=”hidden” – caracterele introduse nu sunt vizualizate;

TYPE=”checkox” – desemnează o casetă ()de maracare (). Daca formularul conține mai multe casete “checkbox”, pot fi marcate la un moment dat mai multe astfel de butoane;

TYPE=”radio” – desemnează un buton () ce poate fi activat (apasat) (). Dacă formularul conține mai multe butoane “radio”, doar unul va fi activ la un moment dat;

TYPE=”submit” – desemnează un buton de validare;

TYPE=”reset” – desemnează un buton care permite reinițializarea tuturor variabilelor (atribute), definite în zona formularelor cu valorile lor implicite;

NAME – permite atribuirea unui nume simbolic câmpului de intrare. Acest nume nu apare pe formular (afișat), dar poate fi utilizat în script-ul server pentru reperarea câmpului de intrare sau a butonului. Atributul NAME nu poate fi utilizat în combinație cu tipul “submit” sau “reset” ;

VALUE – Pentru tipul “text”, “password” sau “hidden” definește o valoare implicita;

Pentru tipul “radio” permite desemnarea valorii care va fi afectată când butonul radio va fi activat;

Pentru tipul “checkbox” permite desemnarea valorii care va fi afectată când boxa va fi marcata;

Pentru tipul “submit” sau “reset” permite denumirea butoanelor altfel decât <submit> sau <reset>;

SIZE – permite indicarea lungimii câmpului de intrare de tip “text”, “password” sau “hidden”. Daca SIZE nu este prezent, valoarea implicita este 20 caractere. Size nu limitează de fapt lungimea textului sau parolei, ci fereastra de vizualizare;

CHECKED – este utilizat în combinatie cu butoane radio sau casete de marcare. Semnifică faptul ca aceste butoane sau boxe sunt implicit active respectiv marcate.

MAXLENGTH – indică numărul maxim de caractere ce pot fi conținute de un câmp de tip “text” sau “password”. Valoarea implicită este nelimitată.

2.12.1.2. Câmpuri de intrare multilinii

Câmpurile de intrare multilinii se caracterizează prin aceea că în fereastra asociată cu câmpul respectiv pot fi introduse mai multe linii de text. Tastarea <ENTER> marchează sfârșitul unei linii de text.

Atributele:

NAME – permite atribuirea unui nume simbolic câmpului de intrare. Acest nume nu apare afișat pe formular, dar poate fi utilizat în script-ul server pentru reperarea câmpului de intrare.

ROWS – definește numărul de linii ale ferestrei asociate câmpului (dimensiunea pe verticală)

COLS – definește numărul de coloane ale ferestrei asociate câmpului (dimensiunea pe orizontală)

WRAP – stabilește trecerea cuvintelor pe rândul următor, determinând comportamentul câmpului la sfârșitul liniei;

Valori:

WRAP=”off” – întrerupe cuvintele la marginea dreaptă numai când dorește utilizatorul;

WRAP=”hard” – determină întreruperea cuvintelor la marginea dreaptă, caracterul de sfârșit de linie este inclus în textul transmis serverului odată cu formularul;

WRAP=”soft” – determină întreruperea cuvintelor la marginea dreaptă, nu este inclus caracterul de sfârșit de linie în textul trasnmis serverului odată cu formularul.

2.12.2. Liste de selecție

Permit operarea unei selecții între mai multe opțiuni.

Tag-ul <SELECT> definește o listă de opțiuni.

Atributele:

NAME – este obligatoriu; asignează un nume listei;

SIZE – indică numarul opțiunilor vizibile în fereastra asociată listei de opțiuni

Valori:

SIZE=1 – lista are forma unui meniu grafic

SIZE=n>1 – opțiunile listei apar într-o fereastra cu scroll vertical

MULTIPLE – permite selecționarea mai multor opțiuni

TAG-ul <OPTION> definește o opțiune.

Atributele:

VALUE – asignează un nume listei;

SELECTED – permite selectarea prestabilită a unui element din listă.