CONTINUT TEHNIC

2.1. Elemente generale ale limbajului HTML

Limbajul HTML include o diversitate de marcatori (tag-uri sau etichete) sub forma :

<Nume_Tag>…….</Nume_Tag

TAG-ul este un identificator care furnizeaza browser-ului instructiuni de formatare a documentului.

Tag-urile pot fi :

singulare – cand se gaseste numai la incepu (< >)
pereche – reprezentat prin tag de inceput (< >) si tag de sfarsit (</ >)

OBSERVAŢIE : Unele TAG-uri contin parametri (atribute) care pot lua diverse valori.

Structura unui document HTML este urmatoarea

<HTML> - inceput document HTML

<HEAD> - inceput antet document

…………………………………………..

< /HEAD> - sfarsit antet document

<BODY> - inceput corp document

…………………………………………

</BODY> - sfarsit corp document

</HTML> - sfarsit document HTML

ANTETUL documentului se regaseste reprezentat intre TAG-urile :

<TITLE> …. </TITLE> pentru a specifica titlul documentului;

CORPUL documentului se gaseste reprezentat intre TAG-urile :

contine esenta documentului HTML.

OBSERVAŢIE : Pentru a putea personaliza continutul corpului de document vom folosi parametrii – ATRIBUTE – care pot lua diverse valori alfanumerice.

Atribute :

BACKGROUND=URL – sir de caractere care indica adresa WEB a unei imagini ;
BGCOLOR=culoare – stabileste culoarea de fundal;
TEXT=culoare – stabileste culoarea textului;
LINK=culoare – stabileste culoarea pentru link-urile nevizitate;
VLINK=culoare – stabileste culoarea pentru link-urile vizitate;
ALINK=culoare – stabileste culoarea pentru link-ul activ;
LANG=cod_limba – stabileste limba de redactat (exe. en – engleza).

OBSERVAŢIE : Putem introduce in corpul unui document HTML si comentarii,

folosind TAG-ul <! … ->. Acest TAG se poate insera oriunde in document iar comentariul nu va fi afisat!

Formatarea paragrafelor

Delimitarea paragrafelor se face folosind perechea de TAG-uri :

OBSERVAŢIE : TAG-ul de sfarsit </P> nu este obligatoriu sa fie inserat; deci, daca dorim sa incepem un paragraf, vom insera TAG-ul <P>, dupa care vom edita continutul acestuia.

Atribute :

ALIGN=LEFT / CENTER / RIGHT / JUSTIFY – realizeaza alinierea paragrafului, iar ca valoare putem avea left/center/right/justify;

Utilizarea paragrafelor de titlu

Se foloseste perechea de TAG-uri :

i = 1,2,3,4,5,6 – valori pentru definirea nivelului paragrafului titlu in structura

documentului. Valoarea 1 este corespunzatoare unui nivel mare, valoarea 6 este corespunzatoare unui nivel mic.

Atribute :

ALIGN

Formatarea la nivel de caracter

Se foloseste perechea de TAG-uri :

Atribute :

SIZE=valoare – stabileste valoarea fontului, mai exact 1,2,3,4,5,6,7,+n,-n ;

OBSERVAŢIE : Valoarea implicita, care se obtine in cazul in care nu specifica o valoare anume, este 3.

COLOR=culoare – stabileste culoarea textului;
FACE=lista_fonturi – stabileste lista de fonturi separate prin virgula

Aplicarea unor efecte asupra textului

Pentru a aplica unei zone de text un anumit efect, se incadreaza textul intre TAG-ul de inceput si cel de sfarsit, corespunzatoare efectului respectiv. Astfel, avem :

<I> ….. </I> - stabileste stilul italic (inclinat) ;

<B> ….. </B> - stabileste stilul bold (ingrosat);

<U> ….. </U> - stabileste stilul underline (subliniat);

LISTELE

Listele pot fi, la randul lor, de trei tipuri : liste ordonate, liste neordonate si liste de definitii.

<Li> text1

<Li> text2

…………………

</OL>

Atributul TYPE defineste modul de numerotare a elementelor listei in care « t » poate lua urmatoarele valori : 1 – pentru cifre ; A – pentru caractere alfabetice majuscule ; a – caractere alfabetice minuscule ; I – pentru numerotare cu cifre romane mari ; i – numerotare cu cifre romane mici.

Atributul START defineste prin valoarea « s » valoarea de inceput.

Listele neordonate au forma generala a tag-ului :

<LI> text 1

<LI> text 2

………….

</UL>

Atributul TYPE defineste semnul care va precede elementele listei si poate lua urmatoarele valori : SQUARE – patrat; CIRCLE – cerc vid; DISC – cerc plin.

Listele cu definitii au forma generala a tag-ului :

<DL>

<DT> termen de definit1

<DD> definire termen1

<DT> termen de definit2

<DD> definire termen2

……………..

</DL>

Legãturi hipertext

Legaturile hipertext permit vizualizarea unor fisiere (obiecte), prin executarea unui clic de mouse pe un cuvant, fraza sau imagine.

Legaturile se pot realiza :

intern – in cadrul aceluiasi document;
local – catre un document aflat pe acelasi server.
extern – catre un document aflat pe un alt server.

Elemente – TAG-uri – de legatura :

A – creeaza o legatura catre o resursa intr-un document ;

<A> ….. </A> ancora (anchor), TAG-ul care stabileste o legatura, o ancorare.

Atribute :

HREF=URL (Hypertext Reference) – specifica adresa URL-ului, adica a resursei la care se face legatura.

Legatura internã se realizeaza intre campurile/elementele aceluiasi document sau catre un anumit punct tinta al altui document. Aceasta presupune :

crearea unei ancore in punctul tinta :

<A NAME=“cuvant_cheie”>Inapoi</A>

realizarea unei legaturi efective, prin care se specifica fisierul/ancora unde se realizeaza legatura :

<A HREF=#“cuvant cheie“> CLICK</A>

q se fixeaza ancora "cuvant cheie" intr-un spatiu al documentului, dupa care, la efectuarea unui click de mouse pe cuvantul CLICK, se realizeaza legatura/revenirea la zona in care a fost inserata ancora vida "cuvant cheie".

Legatura localã se realizeaza intre campurile/elementele a doua documente HTML, aflate pe acelasi server.

Foloseste atributul HREF=URL – pentru a specifica adresa locala (calea) si numele documentului la care se face lagatura.

< A HREF=”[cale]/Fisier2.html”>CLICK</A>

q La executarea unui click de mouse pe cuvantul CLICK, se va face legatura cu fisierul "Fisier2.html".

Legatura externã se realizeaza intre campurile/elementele a doua documente HTML, aflate pe servere diferite.

Foloseste atributul HREF=URL – pentru a specifica adresa externa si numele documentului la care se face lagatura.

< A HREF=”http://stec.utm.ro/studenti/grup5/Fisier2.html”>CLICK</A>

q La executarea unui click de mouse pe cuvantul CLICK, se va face legatura cu fisierul "Fisier2.html", care se gaseste la adresa de web specificata.

Inserarea imaginilor in documente HTML

<IMG> - TAG-ul care are rolul de a insera o imagine intr-un document HTML

Atribute :

SRC=URL – specifica adresa fisierului care contine imaginea.

Fisierul imagine poate fi de tipul (adica poarta extensia):

JPEG : Joint Photographic Expert’s Group
GIF : Graphic Interchange Format

ALT=text – specifica un text alternativ care va fi afisat, in cazul in care imaginile nu pot fi vizualizate.

HEIGHT=dimensiune – defineste inaltimea imaginii de inserat

WIDTH=dimensiune – defineste latimea imaginii de inserat

OBSERVAŢIE : Dimensiunile se pot exprima atat in numar de pixeli, cat si in

procente. In cazul in care dimensiunile sunt exprimate in procente, procentajul se refera la spatial disponibil pe orizontala sau pe verticala si nu la dimensiunile originale ale imaginii.

ALIGN=valoare – specifica modul de aliniere in raport cu textul

TOP
MIDDLE
BOTTOM
LEFT
RIGHT

Inserarea unei legaturi pe o imagine

TAG-ul <IMG> se foloseste drept continut al TAG-ului ancora <A>. Astfel se insereaza in document o legatura pe imagine. Mai exact, la efectuarea unui click de mouse pe imagine va fi accesat fisierul de destinatie (specificat prin atributul HREF).

Exemplu : <A HREF= "Fisier2.html"><IMG SRC="desen.bmp"></A>

Formulare

Se folosesc pentru crearea de pagini Web interactive.

Un formular este construit din elemente speciale, denumite elemente de control (butoane radio, butoane de validare, campuri text, meniuri etc.). Astfel, folosind aceste elemente de control, se pot transmite informatii catre server-ul care gazduieste pagina Web respectiva.

Transmiterea datelor introduse intr-un formular

Atribute

ACTION = URL – specifica adresa programului CGI (Common Gateway Interface)

METHOD = GET/POST – stabileste modalitatea in care sunt transmise informatiile respective catre server

POST – informatiile introduse, memorate sub forma perechilor

(nume_camp, valoare), sunt incluse in corpul formularului si transmise catre programul CGI care va realiza prelucrea lor.

GET – informatiile introduse sunt atasata adresei URL care specifica

programul ce va realiza prelucrarea lor, separate prin ?, apoi acest nou URL este transmis catre programul CGI de prelucrare a informatiilor.

Elemente de control

Butoane de comanda

<INPUT> ………

Pot fi butoane de comanda de tip :

SUBMIT – cand este activat acest buton, se transmit informatiile inscrise in formular

catre un server

RESET – cand este activat acest buton, toate datele inscrise in formular se pierd,

campurile formularului fiind completate cu valorile lor initiale (nu se

transmite nici o informatie)

PUSH – cand este activat acest buton, se executa o actiune specificata

Butoane de validare

<INPUT> ……..

Acest tip de butoane permite selectarea sau nu a unor optiuni din formular, prin

activarea sau dezactivarea unor butoane.

OBSERVAŢIE : Selectia se face fara excludere, deci putem alege din lista de optiuni a

formularului cate valori dorim.

Butoane radio

<INPUT> ……..

Acest tip de butoane permite selectarea unei singure optiuni din formular, prin

activarea selectiva a unui singur buton.

OBSERVAŢIE : Selectia se face cu excludere, deci putem alege din lista de optiuni a

formularului doar o singura valoare.

Meniuri

Prezinta o lista de optiuni.

</SELECT>

Campuri text

<INPUT> ….. – pentru text format dintr-o singura linie

<TEXTAREA> …..</TEXTAREA> – pentru text format din mai multe linii

Permit introducerea unui text format dintr-o singura linie sau mai multe linii.

Elemente de control ascunse

<INPUT> ……..

Acest tip de elemente nu se pot vizualiza, dar permit transmiterea unor informatii utile,

in acelasi timp cu transmiterea informatiilor scrise in formular.

INPUT – permite inserarea elementelor de control

Atribute

NAME = sir_de_caractere – asociaza elementului de control un nume

VALUE = sir_de_caractere – specifica valoarea initiala a elementului de control

este un atribut optional
nu se foloseste pentru butoanele de tip radio ;

SIZE = valoare – specifica dimensiunea initiala a elementului de comanda

dimensiunea este specificata in pixeli (pentru campuri de tip Image) sau in numar de caractere (pentru campuri de tip Text, File, Password)

MAXLENGHT = valoare – specifica numarul maxim de caractere care se pot introduce (pentru campuri de tip Text, Password)

CHECKED – specifica faptul ca elementul de control respectiv este activat (pentru butoane de tip Radio, Checkbox)

SRC = URL – specifica adresa fisierului care contine imaginea ce reprezinta butonul utilizat din elementul de comanda ( pentru campuri de tip Image)

TYPE = TEXT/RADIO/CHECKBOX/PASSWORD/SUBMIT/RESET/BUTTON/

IMAGE/ FILE/HIDDEN

specifica tipul elementului de comanda creat;

EXEMPLE :

- pentru TYPE=text

- pentru TYPE=radio

- pentru TYPE=Checkbox (permite introducerea butoanelor de validare)

<INPUT TYPE=Checkbox VALUE=a CHECKED> …..

<INPUT TYPE=Checkbox VALUE=b> …..

- pentru TYPE=Password (permite inserarea unui camp de introducere a parolei)

…….. <INPUT TYPE=text NAME=user>

…….. <INPUT TYPE=Password NAME=parola>

- pentru TYPE=Submit/Reset/Button (permit inserarea butoanelor de comanda, de

tip Submit/Reset/Push)

- pentru TYPE=Image (permite folosirea unei imagini pentru butonul de tip Submit)

…….. <INPUT TYPE=Image VALUE=OK SRC=desen.bmp ALIGN=Middle

HEIGHT=50 WIDTH=50>

- pentru TYPE=File (permite specificarea unui fisier ce va fi transmis prin

intermediul formularului)

SELECT – permite inserarea intr-un formular a meniurilor

Atribute

NAME = sir_de_caractere – asociaza un nume elementului de comanda

SIZE = valoare – specifica numarul de optiuni vizibile in fereastra derulanta in care e

vizualizat meniul

MULTIPLE – permite selectarea mai multor optiune din meniu

OPTION – se foloseste impreuna cu TAG-ul SELECT si are rolul de a permite introducerea optiunilor din care este constituit meniul

Atribute

SELECTED – indica faptul ca initial aceasta optiune este selectata

VALUE = sir_de_caractere – specifica valoarea initiala a elementului de comanda

LABEL = sir_de_caractere – specifica o denumire mai scurta decat continutul acesteia (eticheta) pentru aceasta optiune

EXEMPLE :

<OPTION VALUE=Matematica>Matematica</OPTION>

<OPTION SELECTED VALUE=Informatica>Informatica</OPTION>

<OPTION>Finante</OPTION>

<OPTION>Geografie</OPTION>

<OPTION>Contabilitate</OPTION>

</SELECT>

TEXTAREA – permite inserarea unui camp text construit din mai multe linii

Atribute

ROWS = numar_de_linii – specifica numarul de linii vizibile

COLS = numar_de_caractere – specifica numarul maxim de caractere pe o linie

OBSERVAŢIE : Daca textul depaseste 5 linii pe verticala sau 40 de caractere pe orizontala, dupa caz campul text va fi prevazut cu o bara de defilare pe verticala, respectiv pe orizontala.

EXEMPLE :

………

</TEXTAREA>

2.2. STRUCTURA UNUI SITE WEB

Schita site-ului

Odata ce s-a decis asupra modului in care va fi structurat site-ul este foarte bine ca inainte de a incepe scrierea efectiva a codului HTML pentru fiecare pagina in parte, să se realieze o schita a intregului site.

Se poate folosi in acest scop Microsoft Word sau orice alt procesor de text. Pentru inceput se crează un document nou in care se listeză punctele majore pe care se dorește să se acopere in pagina Home.

Se face de asemenea o lista a elementelor grafice pe care se intentionează să se includă, insotite de indicatii privind asezarea lor in pagina. Se stabilește care sunt paginile de nivel unu si care sunt informatiile oferite in cadrul lor, precum si paginile subordonate acestora care vor cuprinde detalierea subiectelor anuntate in paginile de nivel unu.

Pentru a avea o imagine cat mai exacta a structurii site-ului inca din faza de schitare a sa este recomandat sa folositi bara de instrumente Outlining din meniul Tools > Customize din Word. Aceasta va permite sa stabiliti nivelul paginilor si sa realizati cu usurinta ramificarea lor in adancime.

La fiecare pagina trebuie sa va puneti urmatoarele intrebari:

Ce doresc sa afle vizitatorul din aceasta pagina?
Ce doresc sa faca vizitatorul in acest moment?
Ce doresc sa simta vizitatorul parcurgand pagina?
Unde doresc sa mearga vizitatorul in continuare?

Pagina de intrare in site (pagina intro)

Exista multe site-uri care inainte de pagina Home au o pagina de intrare in site, numita pagina intro. Scopul unei astfel de pagini este identificarea rapida a obiectului site-ului in timp ce se incarca restul de date. Pagina splash are pentru site acelasi rol pe care il are coperta unei carti sau prima pagina a unei reviste. Aceasta prima pagina trebuie sa se incarce rapid, sa aiba un impact vizual puternic si sa comunice esentialul despre subiectul site-ului sau compania careia ii apartine site-ul.

Pagina Home

Desi aspectul si continutul paginii Home poate varia foarte multe de la un site la altul, exista cateva elemente comune prezente in orice pagina de start:

Identificarea firmei sau companiei careia ii apartine site-ul
Descrierea scopului site-ului
Descrierea structurii site-ului. Pagina Home are si functia de Cuprins al site-ului oferind indicatii vizitatorilor asupra subiectelor abordate

Stabilirea relatiilor intre sectiunile de nivel unu ale site-ului si cele subordonate lor. Aceasta se realizeaza prin intermediul barelor de navigare, butoanelor, hartilor de imagini sau listelor de legaturi.

Paginile din interior

Paginile de nivel unu reprezinta diviziunile majore ale subiectului general al site-ului. Exista tentatia de a include prea multe informatii detaliate la acest nivel. Daca site-ul acopera un subiect vast, cu o cantitate mare de informatii specifice, este bine sa lasati detalierea acestora pentru paginile de nivel doi. Paginile de nivel unu trebuie sa contina o descriere succinta a subiectului acoperit precum si legaturi catre paginile de nivel doi care detaliaza fiecare parte a subiectului. O tehnica des utilizata este plasarea resurselor suplimentare in pagini de nivelul trei. De exemplu o pagina de nivelul doi care ofera pe langa text si imagini explicative ale unui anumite notiuni poate fi legata de pagini de nivel trei care contin imaginile. Cand vizitatorul face click pe un anumit text aflat in pagina de nivel doi se deschide pagina de nivel trei cu imaginea explicativa. Avantajul acestei abordari este descongestionarea paginilor de nivelul doi care cuprind detalierea subiectului.

Fragmentarea informatiilor

Omul poate procesa o cantitate limitata de informatii intr-o anumita unitate de timp. Din acest motiv, una dintre sarcinile specifice in designul Web este fragmentarea informatiilor in secvente care sa nu depaseasca posibilitatile de cuprindere ale utilizatorului. Cantitatea de informatii cuprinsa intr-o pagina nu trebuie sa-l copleseasca pe vizitatorul paginii sau sa mareasca timpul ei de incarcare. De asemenea, modul de fragmentare al informatiei trebuie sa focalizeze atentia vizitatorului asupra principalelor subiecte abordate in pagina si sa il ajute sa ia cunostinta in mod gradat de subiectul prezentat. Fragmentarea corecta a informatiilor este in avantajul designerului , deoarece il ajuta sa creeze pagini reutilizabile .

Continutul paginii trebuie sa fie cat mai usor de citit.

Abuzul de culori sau de texte scrise cu caractere aldine fac pagina incarcata si greoaie. Este indicat sa se limiteze la un numar redus de tipuri de font. Cele mai apreciate sunt Verdana si Arial , deoarece sunt lizibile si elegante.

Legarea paginilor

Modul in care se va realiza legaturile dintre pagini depinde de structura site-ului. Daca se optează pentru o structura ierarhica, legaturile din interiorul site-ului vor fi adaptate acestei structuri. Avantajul structurii ierarhice este ca ofera utilizatorului posibilitatea unei navigari logice, plecand de la informatiile generale catre cele particulare. Dezavantajul acestei tehnici este ca utilizatorul trebuie sa urmeze o cale prestabilita pentru a ajunge la o anumita informatie, care se poate afla cateva link-uri distanta de pagina Home .

O alta maniera de a realiza legaturile din interiorul site-ului este de a lega fiecare pagina de toate celelalte. Veti obtine astfel o structura ne-ierarhica care are avantajul ca fiecare pagina se afla la distanta de un link de oricare alta, inclusiv de pagina Home . Pentru site-urile de dimensiuni reduse o astfel de structura poate functiona bine, insa pentru site-urile cu un mare numar de pagini numarul de legaturi creste rapid iar navigarea in interiorul site-ului devine foarte dificila. In plus, utilizatorul nu are la dispozitie o cale ierarhica prin care poate ajunge la o informatie specifica.

Instrumentele de navigare

Pentru a realiza o navigare logica si eficienta in cadrul site-ului instrumentele de navigare trebuie sa fie perfect adaptate modului in care sunt create legaturile dintre pagini si in plus, sa ofere indicii vizuale asupra functiei lor. Pentru a crea un aspect vizual unitar al intregului site si pentru a nu deruta vizitatorul, este recomandat ca instrumentele de navigare sa fie aceleasi in toate paginile.

Instrumentele de navigare trebuie sa fie cat mai usor de inteles si localizat. Daca se va folosi o bara de navigare aceasta va fi plasată acolo unde vizitatorii sunt obisnuiti sa o caute: in partea superioara a paginilor, in stanga sau in dreapta paginii.

De asemenea, daca se va folosi o structura ierarhica, este utila prezenta unui instrument suplimentar care sa informeze vizitatorul asupra locului unde se afla in cadrul site-ului si a caii prin care a ajuns aici, in maniera urmatoare:

Home > Pagina de nivel unu > Pagina de nivel doi > Pagina curenta.

Informatiile despre site si pagina curenta

Fiecare pagina a site-ului trebuie sa contina indicatii privind scopul si obiectivele site-ului precum si obiectivele specifice acelei pagini. In faza de planificare ati colectat informatii privind publicul tinta, ati formulat scopul si obiectivele intregului site. Acestea reprezinta elementele fundamentale in jurul carora este construit site-ul . Fiecare pagina a sa are drept scop indeplinirea unuia dintre obiective. Aceste informatii trebuie comunicate in pagina respectiva. Vizitatorul nu trebuie fortat sa ghiceasca ce rol are o anumita pagina in cadrul site-ului.

LAZAR FELICIA