Structura site-urilor Web

Fisa de documentare 1.1 Elemente de conținut

Pentru a realiza un site sunt folosite o serie de tehnici cu ajutorul carora paginile sunt concepute, din punct de vedere vizual, din punct de vedere al organizarii legaturilor si al amplasarii continutului in pagini. Dupa ce se stabileste structura unui site este indicat sa se realizeze o schita a intregului site. Se realizeaza apoi o lista a elementelor grafice care vor fi incluse: imagini, formulare, fisiere multimedia, formulare, tabele, cadre, legaturi, insotite de indicatii privind asezarea lor in pagina.

O metoda eficienta pentru a realiza schita site-ului o constituie graficul (sau harta) site-ului. Se deseneaza cate un dreptunghi pentru fiecare pagina din site, specificand in interiorul sau scopul si obiectivele paginii, elementele si aranjarea lor in pagina. Se unesc apoi dreptunghiurile prin sageti pentru a specifica traseele pe care le poate parcurge utilizatorul. Sagetile reprezinta de fapt legaturile dintre pagini. Spre pagina Home trebuie asigurata o legatura cu ea din orice pagina a site-ului.

Modul cum sunt aranjate elementele constitutive ale unei pagini Web: conținut, grafica, legaturi, sistem de navigare, elemente multimedia este definita de noțiunea de machetare a unei pagini web.

O pagina web poate sa fie simpla sau imparțita in:

cadre

tabele simple

tabele multiple sau imbricate

o combinație a acestor elemente

Pentru un site Web sunt importante urmatoarele elemente:

stilul imprimat paginilor. Elementele componente ale unei pagini web

conținut

grafica

imagini GIF & JPEG

fundal

animații

harți grafice

logo si icon-uri

legaturi

sistem de navigare

elemente multimedia

cadre (frames)

tabele

Documentele care se citesc online trebuie sa fie concise si structurate pentru o scanare rapida. Informațiile cele mai importante trebuiesc puse in primul paragraf, pentru ca cititorul sa le gaseasca cel mai repede.

Pagina web nu trebuie sa arate ca un bloc masiv de text. Este indicata imparțirea conținutului in paragrafe, separate intre ele și de titlu prin spații goale.

Stilul de scriere (felul fonturilor, dimensiunea, culorile, etc.) trebuie sa fie similar pentru toate paginile. Fonturile uzuale sunt ARIAL si TIMES NEW ROMAN

Conținutul unui sit web - In construcția unui site trebuie acordata o atenție deosebita conținutului, deoarece pe baza acestuia se dezvolta structura site-ului și machetarea paginii.

Principalul motiv pentru care oamenii acceseaza Internetul este cautarea de informații intr-un domeniu sau altul.

Pentru o mai buna organizare a site-ului și dezvoltarea unei structuri de navigare corespunzatoare, conținutul site-ului va fi imparțit pe categorii si subcategorii. La realizarea unui site complex, apar dificultați in imparțirea conținutului in categorii clare și distincte, care sa fie ușor de ințeles de catre cititori Titlurile acestor categorii pot deveni etichete pentru butoanele sau harțile grafice utilizate pentru navigare.

Grafica se folosește pentru imbunatațirea aspectului unui site și creșterea atractivitații acestuia. Imaginile mai sunt folosite si pentru sublinierea unui text sau al mesajului transmis de o pagina web. Este indicat ca un site sa conțina numai imaginile absolut necesare și care sunt valoroase.

Dimensiunile fișierelor grafice trebuie sa fie reduse la minimum posibil, fara a afecta calitatea acestora, pentru a micșora timpul de incarcare al acestora.

Pentru reducerea timpul de incarcare al fișierelor grafice sunt folosite atributele 'HEIGHT' si 'WIDTH' alaturate etichetei 'IMG'. In acest caz, browserul cunoaște cat de mult spațiu este atașat fiecarei imagini și incepe incarcarea textului imediat, in paralel cu incarcarea imaginii respective, cititorii vor putea sa inceapa citirea textului fara sa aștepte incarcarea tuturor imaginilor. In caz in care nu sunt folosite aceste opțiuni browserul va calcula mai intai dimensiunile imaginii in comparație cu celelalte elemente și apoi va incepe incarcarea efectiva a imaginii respective.

Cele mai folosite fișiere grafice si care sunt acceptate de toate browserele web sunt:

GIF (Graphics Interchange Format) - pentru grafice si imagini cu o rezoluție mai redusa

JPEG (JPG) - pentru imagini fotografice sau cu o varietate de tonuri de culori,

Alegerea formatului corect are importanța pentru calitatea și claritatea imaginii folosite cat și pentru pastrarea unei dimensiuni reduse a fișierului grafic .

Fișierelor GIF au urmatoarele caracteristici:

imaginile folosesc numai culori pe 8 biti

se folosește o metoda de compresie numita 'lossless', deci nu se pierde nici o informație, iar imaginea obținuta se poate recomprima din nou

se pot reduce dimensiunile imaginilor folosind mai puține culori

culoare din imagine poate fi setata ca fiind și culoarea fundalului(transparenta).

se pot crea imagini animate, folosind combinații de mai multe imagini GIF

Imaginile in format GIF se folosesc pentru obținerea unor elemente grafice ca:

banere

logo

titluri

iconuri simple

imagini animate

Imagini JPEG se folosesc pentru grafice complicate sau imagini complexe, cu multe nuanțe de culori(fotografiile). Pentru a pastra dimensiunea redusa a fișierelor grafice se folosește procedeul ' built-in compression'. Imaginile JPEG mai sunt folosite pentru realizarea unor efecte metalice (auriu, argintiu, etc.), sau cand se dorește obținerea de tonalitați de culori diferite.

Caracteristicele fișierelor JPG sunt:

pot avea pana la 16.7 milioane de culori ( 24 biti )

folosesc o metoda de compresie numita 'lossy' ,deci unele detalii se pot pierde sau pot apare unele mici distorsiuni, ceea ce duce implicit la o scadere ușoara a calitații imaginii respective. Majoritatea editoarelor grafice permit un control al raportului compresie / calitate

nu permit realizarea unui fundal transparent

Harta grafica reprezinta o imagine, care permite utilizatorilor sa acceseze diferite pagini web in interiorul unui site. La un clic cu mouse-ul pe una dintre diferitele porțiuni ale imaginii grafice se acceseaza o hiperlegatura catre o alta pagina. Ele pot fi realizate in format GIF sau JPEG. in ultimul timp, sunt folosite ca metoda de navigare deoarece se incarca mai repede decat un set de butoane de navigare si sunt mai atractive. Harțile grafice nu se vor folosi niciodata ca singur mod de navigare, datorita urmatoarelor :

mulți utilizatori au dezactivata opțiunea 'Load images' pentru a incarca paginile mai repede

se mai folosesc inca browsere bazate pe text și care nu incarca imaginile grafice

motoarele de cautare nu pot urmari legaturile furnizate de o harta grafica

Un logo este un nume, un simbol sau o marca inregistrata a unei companii sau organizații. O imagine bine aleasa are un impact mult mai puternic decat cuvintele. Logo se folosește pentru stimularea memoriei vizuale a audientei. Un logo trebuie sa fie simplu, unic si ușor de recunoscut.

Un logo poate fi realizat in mai multe feluri:

un simplu text

imagine stilizata cu numele companiei respective

un text in jurul unei imagini

un simbol

combinație a acestora

Prin folosirea iconurilor (simboluri grafice) se imbunatațește aspectul unei pagini web. Cele mai cunoscute iconuri:

sagețile direcționale

simbolul 'casa' pentru pagina inițiala

simbolul 'cutie poștala' pentru transmiterea de emailuri

simbolul 'carte' pentru guestbook

Pentru a fi eficiente, iconurile trebuie sa indeplineasca anumite caracteristici:

sa foloseasca un design simplu si elocvent

sa aiba o dimensiune redusa a fișierului

poziționarea in fiecare pagina sa ramana neschimbata

sa fie ușor de recunoscut

sa fie dublate de un sistem de meniuri alternativ (legaturi text)

La alegerea unui fundal se au in vedere urmatoarele:

culoarea fundalului nu trebuie sa interfereze cu culoarea textului

pentru text și fundal se folosesc culori contrastante, care sa permita citirea ușoara a conținutului

imaginile pentru fundal, trebuie sa fie fișiere GIF sau JPEG de dimensiuni mici, pentru a reduce timpul de incarcare a paginii

imaginea folosita pentru fundal trebuie sa fie in concordanța, din punct de vedere cromatic, cu aspectul paginii web si restul imaginilor

nu este recomandabila folosirea imaginilor animate pentru fundal

Culoarea standard pe care un browser o afișeaza pentru fundal este gri.

Imaginile animate, se folosesc pentru a sublinia un mesaj sau pentru a da un impact deosebit unei pagini web. Cu toate ca animațiile atrag cititorii, pagina web trebuie sa atraga cititorii prin conținutul ei ,nu prin folosirea unor imagini animate viu colorate.

Restricții impuse in folosirea imaginilor animate:

dimensiunea fișierului folosit

utilitatea lor

browserele folosite - nu toate browserele suporta animații

In realizarea unui site Web se acorda o mare atenție legaturilor (hyper - legaturi). Acestea pot fi:

interne (catre alte pagini din interiorul site-ului)

externe (catre alte situri din Internet)

Pentru a crea o legatura externa trebuie sa se cunoasca URL-ul site-ului respectiv. Textul legaturilor trebuie sa fie scurt și la obiect. Toate legaturile interne si externe trebuie sa fie testate.

Internetul, prin chiar natura sa, permite saltul de la o pagina web la alta cu ajutorul butoanelor de navigare. Meniul de navigare este o reprezentare grafica sau de tip text a conținutului si este incorporat in tema generala a site-ului. Meniul principal trebuie sa furnizeze trimiteri rapide și directe la secțiunile și informațiile disponibile dintr-un site web. Locul de amplasare a meniului principal este, de obicei, in partea stanga a ecranului dar el mai poate fi plasat și in partea dreapta sau in partea superioara a paginii web. El trebuie repetat pe fiecare pagina exact in același loc, pentru a nu deruta vizitatorii.

Cele mai des intalnite scheme de navigare cuprind :

legaturi text

harți grafice

butoane de navigare

meniuri tip lista derulanta (generate cu Javascript)

pagini generate dinamic

harta site-ului (site map)

Butoanele de navigare dau atractivitate paginilor web. Pot fi folosite ca mijloc de navigare si de catre persoanele care au dezactivata opțiunea de incarcare a imaginilor. Butoanele de navigare pot fi create cu ajutorul editoarelor grafice.

Meniurile tip lista derulanta sunt realizate cu ajutorul limbajului Javascript sau folosind scripturi CGI.

Principalele dezavantaje:

versiunile mai vechi de browsere nu suporta Javascript

la folosirea scripturilor CGI trebuie aleasa o gazda care dispune de un server care suporta scripturile CGI

Avantaj :

ocupa un spațiu minim, nefiind afișate toate variantele in același timp. La accesare va apare o lista cu toate opțiunile posibile. Fiecare opțiune reprezinta o legatura catre o alta pagina sau secțiune a site-ului.

Pagini generate dinamic reprezinta o metoda de navigare ce se folosește in siturile web care dispun de o baza de date. De exemplu, magazinele on-line pun la dispoziția utilizatorilor o funcție de cautare. Atunci cand se dorește afișarea caracteristicilor unui produs, utilizatorul va introduce cuvantul cheie aferent. in urma cautarii se va genera dinamic pagina web corespunzatoare produsului respectiv.

Principalul dezavantaj al acestei scheme de navigare este faptul ca realizarea si intreținerea unui astfel de site sunt costisitoare. in plus, este dificila promovarea cu ajutorul motoarelor de cautare deoarece acestea nu pot urmari legaturile generate dinamic.

Harta site-ului (site MAP) - trebuie sa fie clara și logica și sa afișeze corect structura site-ului. Poate fi realizata sub forma de tabel sau arbore de legaturi.
Harta este utila si atunci cand se dorește cautarea rapida a unei informații sau a unui subiect, fara a fi nevoie sa se navigheze prin tot site-ul. Este necesara furnizarea in meniul principal a unei legaturii directe catre pagina web care conține harta site-ului.

Tabelele sunt folosite pentru o machetare eficienta și pentru a face mai atractive diversele elemente componente ale unei pagini web. Tabelele permit imparțirea paginii in secțiuni și o poziționarea precisa a textului sau imaginilor in interiorul paginii.

Se poate imparți pagina in doua coloane, cu meniul de navigare in stanga si conținutul propriu-zis in dreapta, textul fiind aliniat la stanga. Se pot crea margini sau borduri de diferite dimensiuni și culori. Se poate incapsula conținutul in celulele tabelului pentru a permite alinierea textului și limitarea lungimii liniilor.

Cadrele permit afișarea a doua sau mai multe pagini web, in același timp, prin imparțirea ecranului in mai multe secțiuni independente.

Avantajele folosirii cadrelor

Cadrele se pot folosi atunci cand conținutul site-ului se modifica frecvent.
Un cadru va fi folosit pentru meniul de navigare iar in celalalt cadru va apare conținutul propriu-zis. La modificarea sau actualizarea conținutului, este suficient sa se modifice numai un fișier.

Nu este necesara schimbarea fiecarei pagini a site-ului pentru a actualiza legaturile. Folosirea cadrelor permite utilizatorilor sa aleaga ce vor sa vada.

Dezavantajele folosirii cadrelor

flexibilitate limitata si posibila confuzie a cititorilor

apariția bordurilor care reduc spațiul afișat pe ecran

browserele mai vechi nu recunosc siturile care conțin cadre

timpul de incarcare al paginilor este mai mare

Exista multe programe ce pot fi folosite la crearea paginilor web. Editoarele de text sunt cele mai simple editoare care permit crearea si salvarea fisierelor fara coduri de formatare ascunse, care pot afecta modul de afisare a unei pagini web in browsere.

Editoarele specializate HTML le permit utilizatorilor sa creeze documente web intr-un mod rapid si usor. Aceste programe genereaza ele insele acest cod in locul programatorului, reprezinta unelte excelente pentru dezvoltatorii web cu experienta.

Pentru editarea paginilor Web și dezvoltarea site-urilor Web exista o mare varietate de limbaje, dar la baza oricarei pagini Web este limbajul HTML.

Activitatea de invatare 1.1.1. Elemente de conținut ale site-ului

Competenta: Formateaza elementele de conținut ale sistemului cu ajutorul software-lui specific

Obiectivul/obiective vizate:

La sfarșitul acestei activitați vei fi capabil sa:

identifici diferitele elemente de conținut ale unui site web

caracterizezi fiecare element de conținut

utilizezi elementele de conținut

organizezi diferite elemente de conținut

Durata: 40 minute

Tipul activitatii: Reducere

Sugestii:

elevii vor lucra individual

Sarcina de lucru:

Cititi cu atentie textul urmator. La final realizati un rezumat care sa contina informații legate de elemente de conținut ale unui site web: text, imagini, sunet, filme, harți de imagini, obiecte ce conțin animații și interactivitate, formulare, tabele, cadre, baze de date, fișiere, legaturi. Pentru fiecare element se va nota:

Rolul sau intr-o pagina web

Descriere

Poziția in pagina

Reguli ce vor fi respectate

Pentru a realiza un site sunt folosite o serie de tehnici cu ajutorul carora paginile sunt concepute, din punct de vedere vizual, din punct de vedere al organizarii legaturilor si al amplasarii continutului in pagini. Dupa ce se stabileste structura unui site este indicat sa se realizeze o schita a intregului site. Se realizeaza apoi o lista a elementelor grafice care vor fi incluse: imagini, formulare, fisiere multimedia, formulare, tabele, cadre, legaturi, insotite de indicatii privind asezarea lor in pagina.

O metoda eficienta pentru a realiza schita site-ului o constituie graficul (sau harta) site-ului. Se deseneaza cate un dreptunghi pentru fiecare pagina din site, specificand in interiorul sau scopul si obiectivele paginii, elementele si aranjarea lor in pagina. Se unesc apoi dreptunghiurile prin sageti pentru a specifica traseele pe care le poate parcurge utilizatorul. Sagetile reprezinta de fapt legaturile dintre pagini. Spre pagina Home trebuie asigurata o legatura cu ea din orice pagina a site-ului.

Modul cum sunt aranjate elementele constitutive ale unei pagini Web: conținut, grafica, legaturi, sistem de navigare, elemente multimedia este definita de noțiunea de machetare a unei pagini web.

O pagina web poate sa fie simpla sau imparțita in:

cadre

tabele simple

tabele multiple sau imbricate

o combinație a acestor elemente

Pentru un site Web sunt importante urmatoarele elemente:

stilul imprimat paginilor. Elementele componente ale unei pagini web

conținut

grafica

imagini GIF & JPEG

fundal

animații

harți grafice

logo si icon-uri

legaturi

sistem de navigare

elemente multimedia

cadre (frames)

tabele

Documentele care se citesc online trebuie sa fie concise si structurate pentru o scanare rapida. Informațiile cele mai importante trebuiesc puse in primul paragraf, pentru ca cititorul sa le gaseasca cel mai repede.

Pagina web nu trebuie sa arate ca un bloc masiv de text. Este indicata imparțirea conținutului in paragrafe, separate intre ele și de titlu prin spații goale.

Stilul de scriere (felul fonturilor, dimensiunea, culorile, etc.) trebuie sa fie similar pentru toate paginile. Fonturile uzuale sunt ARIAL si TIMES NEW ROMAN

Conținutul unui sit web - In construcția unui site trebuie acordata o atenție deosebita conținutului, deoarece pe baza acestuia se dezvolta structura site-ului și machetarea paginii.

Principalul motiv pentru care oamenii acceseaza Internetul este cautarea de informații intr-un domeniu sau altul.

Pentru o mai buna organizare a site-ului și dezvoltarea unei structuri de navigare corespunzatoare, conținutul site-ului va fi imparțit pe categorii si subcategorii. La realizarea unui site complex, apar dificultați in imparțirea conținutului in categorii clare și distincte, care sa fie ușor de ințeles de catre cititori Titlurile acestor categorii pot deveni etichete pentru butoanele sau harțile grafice utilizate pentru navigare.

Grafica se folosește pentru imbunatațirea aspectului unui site și creșterea atractivitații acestuia. Imaginile mai sunt folosite si pentru sublinierea unui text sau al mesajului transmis de o pagina web. Este indicat ca un site sa conțina numai imaginile absolut necesare și care sunt valoroase.

Dimensiunile fișierelor grafice trebuie sa fie reduse la minimum posibil, fara a afecta calitatea acestora, pentru a micșora timpul de incarcare al acestora.

Pentru reducerea timpul de incarcare al fișierelor grafice sunt folosite atributele 'HEIGHT' si 'WIDTH' alaturate etichetei 'IMG'. In acest caz, browserul cunoaște cat de mult spațiu este atașat fiecarei imagini și incepe incarcarea textului imediat, in paralel cu incarcarea imaginii respective, cititorii vor putea sa inceapa citirea textului fara sa aștepte incarcarea tuturor imaginilor. In caz in care nu sunt folosite aceste opțiuni browserul va calcula mai intai dimensiunile imaginii in comparație cu celelalte elemente și apoi va incepe incarcarea efectiva a imaginii respective.

Cele mai folosite fișiere grafice si care sunt acceptate de toate browserele web sunt:

GIF (Graphics Interchange Format) - pentru grafice si imagini cu o rezoluție mai redusa

JPEG (JPG) - pentru imagini fotografice sau cu o varietate de tonuri de culori,

Alegerea formatului corect are importanța pentru calitatea și claritatea imaginii folosite cat și pentru pastrarea unei dimensiuni reduse a fișierului grafic .

Fișierelor GIF au urmatoarele caracteristici:

imaginile folosesc numai culori pe 8 biti

se folosește o metoda de compresie numita 'lossless', deci nu se pierde nici o informație, iar imaginea obținuta se poate recomprima din nou

se pot reduce dimensiunile imaginilor folosind mai puține culori

culoare din imagine poate fi setata ca fiind și culoarea fundalului(transparenta).

se pot crea imagini animate, folosind combinații de mai multe imagini GIF

Imaginile in format GIF se folosesc pentru obținerea unor elemente grafice ca:

banere

logo

titluri

iconuri simple

imagini animate

Imagini JPEG se folosesc pentru grafice complicate sau imagini complexe, cu multe nuanțe de culori(fotografiile). Pentru a pastra dimensiunea redusa a fișierelor grafice se folosește procedeul ' built-in compression'. Imaginile JPEG mai sunt folosite pentru realizarea unor efecte metalice (auriu, argintiu, etc.), sau cand se dorește obținerea de tonalitați de culori diferite.

Caracteristicele fișierelor JPG sunt:

pot avea pana la 16.7 milioane de culori ( 24 biti )

folosesc o metoda de compresie numita 'lossy' ,deci unele detalii se pot pierde sau pot apare unele mici distorsiuni, ceea ce duce implicit la o scadere ușoara a calitații imaginii respective. Majoritatea editoarelor grafice permit un control al raportului compresie / calitate

nu permit realizarea unui fundal transparent

Harta grafica reprezinta o imagine, care permite utilizatorilor sa acceseze diferite pagini web in interiorul unui site. La un clic cu mouse-ul pe una dintre diferitele porțiuni ale imaginii grafice se acceseaza o hiperlegatura catre o alta pagina. Ele pot fi realizate in format GIF sau JPEG. in ultimul timp, sunt folosite ca metoda de navigare deoarece se incarca mai repede decat un set de butoane de navigare si sunt mai atractive. Harțile grafice nu se vor folosi niciodata ca singur mod de navigare, datorita urmatoarelor :

mulți utilizatori au dezactivata opțiunea 'Load images' pentru a incarca paginile mai repede

se mai folosesc inca browsere bazate pe text și care nu incarca imaginile grafice

motoarele de cautare nu pot urmari legaturile furnizate de o harta grafica

Un logo este un nume, un simbol sau o marca inregistrata a unei companii sau organizații. O imagine bine aleasa are un impact mult mai puternic decat cuvintele. Logo se folosește pentru stimularea memoriei vizuale a audientei. Un logo trebuie sa fie simplu, unic si ușor de recunoscut.

Un logo poate fi realizat in mai multe feluri:

un simplu text

imagine stilizata cu numele companiei respective

un text in jurul unei imagini

un simbol

combinație a acestora

Prin folosirea iconurilor (simboluri grafice) se imbunatațește aspectul unei pagini web. Cele mai cunoscute iconuri:

sagețile direcționale

simbolul 'casa' pentru pagina inițiala

simbolul 'cutie poștala' pentru transmiterea de emailuri

simbolul 'carte' pentru guestbook

Pentru a fi eficiente, iconurile trebuie sa indeplineasca anumite caracteristici:

sa foloseasca un design simplu si elocvent

sa aiba o dimensiune redusa a fișierului

poziționarea in fiecare pagina sa ramana neschimbata

sa fie ușor de recunoscut

sa fie dublate de un sistem de meniuri alternativ (legaturi text)

La alegerea unui fundal se au in vedere urmatoarele:

culoarea fundalului nu trebuie sa interfereze cu culoarea textului

pentru text și fundal se folosesc culori contrastante, care sa permita citirea ușoara a conținutului

imaginile pentru fundal, trebuie sa fie fișiere GIF sau JPEG de dimensiuni mici, pentru a reduce timpul de incarcare a paginii

imaginea folosita pentru fundal trebuie sa fie in concordanța, din punct de vedere cromatic, cu aspectul paginii web si restul imaginilor

nu este recomandabila folosirea imaginilor animate pentru fundal

Culoarea standard pe care un browser o afișeaza pentru fundal este gri.

Imaginile animate, se folosesc pentru a sublinia un mesaj sau pentru a da un impact deosebit unei pagini web. Cu toate ca animațiile atrag cititorii, pagina web trebuie sa atraga cititorii prin conținutul ei ,nu prin folosirea unor imagini animate viu colorate.

Restricții impuse in folosirea imaginilor animate:

dimensiunea fișierului folosit

utilitatea lor

browserele folosite - nu toate browserele suporta animații

In realizarea unui site Web se acorda o mare atenție legaturilor (hyper - legaturi). Acestea pot fi:

interne (catre alte pagini din interiorul site-ului)

externe (catre alte situri din Internet)

Pentru a crea o legatura externa trebuie sa se cunoasca URL-ul site-ului respectiv. Textul legaturilor trebuie sa fie scurt și la obiect. Toate legaturile interne si externe trebuie sa fie testate.

Internetul, prin chiar natura sa, permite saltul de la o pagina web la alta cu ajutorul butoanelor de navigare. Meniul de navigare este o reprezentare grafica sau de tip text a conținutului si este incorporat in tema generala a site-ului. Meniul principal trebuie sa furnizeze trimiteri rapide și directe la secțiunile și informațiile disponibile dintr-un site web. Locul de amplasare a meniului principal este, de obicei, in partea stanga a ecranului dar el mai poate fi plasat și in partea dreapta sau in partea superioara a paginii web. El trebuie repetat pe fiecare pagina exact in același loc, pentru a nu deruta vizitatorii.

Cele mai des intalnite scheme de navigare cuprind :

legaturi text

harți grafice

butoane de navigare

meniuri tip lista derulanta (generate cu Javascript)

pagini generate dinamic

harta site-ului (site map)

Butoanele de navigare dau atractivitate paginilor web. Pot fi folosite ca mijloc de navigare si de catre persoanele care au dezactivata opțiunea de incarcare a imaginilor. Butoanele de navigare pot fi create cu ajutorul editoarelor grafice.

Meniurile tip lista derulanta sunt realizate cu ajutorul limbajului Javascript sau folosind scripturi CGI.

Principalele dezavantaje:

versiunile mai vechi de browsere nu suporta Javascript

la folosirea scripturilor CGI trebuie aleasa o gazda care dispune de un server care suporta scripturile CGI

Avantaj :

ocupa un spațiu minim, nefiind afișate toate variantele in același timp. La accesare va apare o lista cu toate opțiunile posibile. Fiecare opțiune reprezinta o legatura catre o alta pagina sau secțiune a site-ului.

Pagini generate dinamic reprezinta o metoda de navigare ce se folosește in siturile web care dispun de o baza de date. De exemplu, magazinele on-line pun la dispoziția utilizatorilor o funcție de cautare. Atunci cand se dorește afișarea caracteristicilor unui produs, utilizatorul va introduce cuvantul cheie aferent. in urma cautarii se va genera dinamic pagina web corespunzatoare produsului respectiv.

Principalul dezavantaj al acestei scheme de navigare este faptul ca realizarea si intreținerea unui astfel de site sunt costisitoare. in plus, este dificila promovarea cu ajutorul motoarelor de cautare deoarece acestea nu pot urmari legaturile generate dinamic.

Harta site-ului (site MAP) - trebuie sa fie clara și logica și sa afișeze corect structura site-ului. Poate fi realizata sub forma de tabel sau arbore de legaturi.
Harta este utila si atunci cand se dorește cautarea rapida a unei informații sau a unui subiect, fara a fi nevoie sa se navigheze prin tot site-ul. Este necesara furnizarea in meniul principal a unei legaturii directe catre pagina web care conține harta site-ului.

Tabelele sunt folosite pentru o machetare eficienta și pentru a face mai atractive diversele elemente componente ale unei pagini web. Tabelele permit imparțirea paginii in secțiuni și o poziționarea precisa a textului sau imaginilor in interiorul paginii.

Se poate imparți pagina in doua coloane, cu meniul de navigare in stanga si conținutul propriu-zis in dreapta, textul fiind aliniat la stanga. Se pot crea margini sau borduri de diferite dimensiuni și culori. Se poate incapsula conținutul in celulele tabelului pentru a permite alinierea textului și limitarea lungimii liniilor.

Cadrele permit afișarea a doua sau mai multe pagini web, in același timp, prin imparțirea ecranului in mai multe secțiuni independente.

Avantajele folosirii cadrelor

Cadrele se pot folosi atunci cand conținutul site-ului se modifica frecvent.
Un cadru va fi folosit pentru meniul de navigare iar in celalalt cadru va apare conținutul propriu-zis. La modificarea sau actualizarea conținutului, este suficient sa se modifice numai un fișier.

Nu este necesara schimbarea fiecarei pagini a site-ului pentru a actualiza legaturile. Folosirea cadrelor permite utilizatorilor sa aleaga ce vor sa vada.

Dezavantajele folosirii cadrelor

flexibilitate limitata si posibila confuzie a cititorilor

apariția bordurilor care reduc spațiul afișat pe ecran

browserele mai vechi nu recunosc siturile care conțin cadre

timpul de incarcare al paginilor este mai mare

Exista multe programe ce pot fi folosite la crearea paginilor web. Editoarele de text sunt cele mai simple editoare care permit crearea si salvarea fisierelor fara coduri de formatare ascunse, care pot afecta modul de afisare a unei pagini web in browsere.

Editoarele specializate HTML le permit utilizatorilor sa creeze documente web intr-un mod rapid si usor. Aceste programe genereaza ele insele acest cod in locul programatorului, reprezinta unelte excelente pentru dezvoltatorii web cu experienta.

Pentru editarea paginilor Web și dezvoltarea site-urilor Web exista o mare varietate de limbaje, dar la baza oricarei pagini Web este limbajul HTML.

Fisa de documentare 1.2 Marcarea elementelor

Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Acestea se numesc in literatura de specialitate 'TAG-uri'. Prin conventie, toate informatiile HTML incep cu o '<' si se termina cu '>'.

Tag-urile dintre aceste simboluri transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.

Tag-urile sunt de forma pereche inceput-sfarsit:

Intre marcajele <html> si </html> se introduc doua sectiuni:

sectiunea de antet <head></head>

corpul documentului <body></body>.

Blocul <body></body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in fereastra browser-ului.

O eticheta poate fi scrisa atat cu litere mici, cat si cu litere mari, adica

<HTML> = <HtmL> = <html>.

Caracterele 'spatiu' si 'CR/LF' ce apar intre etichete sunt ignorate de catre browser.

Titlul unei pagini se obtine inserand in sectiunea <head></head> a urmatoarei linii:

<title> TITLU </title>

In sectiunea <body></body> se pot scrie texte. Daca nu apare nici un marcaj < sau >,  atunci interpretorul HTML le va considera texte simple si le va afisa pe ecran.

Continutul blocului <title></title> va aparea in bara de titlu a ferestrei browser-ului.
Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferestrei browser-ului va aparea numele fisierului

Daca introducem mai multe linii intr-o pagina, browser-ul va afisa intr-un singur rand, intrucat caracterele ' CR/LF ' sunt ignorate de browser. Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa apara in pagina html, marcajul <br> (' line break ' - intrerupere de linie ).

Pentru ca browser-ul sa interpreteze corect caracterele ' spatiu ', ' tab ' si ' CR/LF ' ce apar in cadrul unui text, acesta trebuie inclus intr-un bloc <pre></pre>. Acesta realizeaza formatarea existenta in documentul sursa.

Un font este caracterizat de urmatoarele atribute:

culoare (stabilita prin atributul color

tipul sau stilul (stabilit prin atributul face

marimea (definita prin atributul size

marimea in puncte tipografice (stabilita prin atributul point-size

grosime (definita prin atributul weight

Culoarea se obține din amestecul a celor trei culori fundamentale: rosu, verde si albastru. Specificarea culorii se poate face:

Prin nume de culoare. Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

Prin constructia ' #rrggbb ' unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si 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;

Culoarea se precizeaza prin intermediul unui atribut al etichetei <body>.
Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei <body>, (<body bgcolor = culoare>). Culoarea textului se face prin intermediul atributului text al etichetei <body> (<body text=culoare>).

O eticheta poate avea mai multe atribute

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

Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale etichetei <body>:

leftmargin ( stabileste distanta dintre marginea stanga a ferestrei browserului si marginea stanga a continutului paginii );

topmargin ( stabileste distanta dintre marginea de sus a ferestrei browserului si marginea de sus a continutului paginii );

Stiluri pentru blocurile de text

Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus intre delimitatorii <b></b>

Pentru ca un text sa fie scris cu caractere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big></big>.

Pentru ca un text sa fie scris cu caractere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small></small>.

Pentru ca un text sa fie scris cu caractere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i></i>

Pentru a insera secvente de text aliniate ca indice (sub-script) sau ca exponent (super-script), aceste fragmente trebuie delimitate de etichetele , respectiv .

Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u></u>

Pentru a insera un bloc de caractere sectionate se utilizeaza etichetele <strike></strike> sau <s></s>.

Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi introduce cu tag-ul <hx> text </hx> unde x poate lua valori din mulțimea (<h3>.(bloc de text) .</h3>).Se accepta atributul align de catre aceste etichete pentru alinierea titlului blocului de text la stanga (modul prestabilit), in centru si la dreapta.

Tag-ul <h1> scrie titlul cu caracterele cele mai mari si cele mai ingrosate, iar tag-ul <h6> foloseste caracterele cele mai mici.

Liniile orizontale pot fi inserate intr-o pagina Web, utilizand eticheta <hr>, cu atributele:

• align permite alinierea liniei orizontala. Valorile posibile sunt ' left ' ,' center ' si ' 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.

O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul></ul> (listǎ neordonatǎ). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou.

Tag-urile <ul> si <li> pot avea un atribut type care stabileste caracterul afisat in fata fiecarui element al listei. Valorile pe care le poate lua acest atribut sunt:

• 'circle' (cerc)

• 'disc' (disc plin) (valoarea prestabilita);

• 'square' (patrat)

O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol></ol> (lista ordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou.

Tag-ul <ol> poate avea atributul type care stabileste tipul de caractere utilizat 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)
• ,,1" pentru ordonare de tipul 1, 2, 3, 4 etc. (cifre arabe-optiune prestabilitǎ)

Tag-ul <ol> poate avea atributul start care stabileste valoarea de plecare a secventei de ordonare

Pentru a insera un tabel se utilizeaza eticheta tabel este <table> . < / table>.

Un tabel este format din randuri. Pentru a incepe un rand intr-un tabel se folosesc etichetele <tr> . < / tr > (table row). Randul este format din mai multe celule ce contin date. O celulǎ de date se introduce cu eticheta <td> (table data).

In mod prestabilit un tabel nu are chenar. Pentru a adǎuga un chenar unui tabel, se utilizeazǎ un atribut al etichetei <table> numit border. Acesta poate sǎ nu fie urmat de nici o valoare, caz in care in care tabelul va avea un chenar de grosime prestabilitǎ egalǎ cu 1 pixel, valoare egalǎ cu 0 a grosimii semnificǎ absenta chenarului. Folosirea etichetei de sfarsit < / tr> este optionalǎ. Lǎtimea si inǎltimea pot fi stabilite prin intermediul a doua atribute, width si height ale etichetei <table>.

Valorile acestor atribute pot fi:

numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli a tabelului;

• numere intregi intre 1 si 100, urmate de semnul %, reprezentand fractiunea din latimea si inaltimea totala a paginii.

Zona din jurul unui tabel poate fi stabilita prin valoarea atributului hspace a etichetei <table> ce reprezintǎ distanta pe orizontalǎ dintre imagine si text respectiv valoarea atributului vspace a etichetei <table> ce reprezintǎ distanta pe verticalǎ dintre imagine si text

Titlul unui tabel poate fi definit cu ajutorul etichetei <caption> , eticheta <caption> trebuie plasatǎ in interiorul etichetelor <table>.< / table>, dar nu in interiorul etichetelor <tr> sau <td> .

Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> astfel:

• "bottom" (sub tabel)
• "top" (deasupra tabelului)
• "left" (la stanga tabelului)
• "right" (la dreapta tabelului)

Un tabel poate avea și celule cu semnificatia cap de tabel. Aceste celule sunt introduse in eticheta <th>. Toate atributele care pot fi atasate etichetei <td> pot fi, de asemenea, atasate etichetei<th>.Continutul celulelor definite cu <th> este scris cu caractere aldine si centrat.

Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la 'image'=imagine).

Pentru a putea fi identifica imaginea care va fi inserata, se utilizeaza un atribut al etichetei <img> si anume src (source). Valoarea acestui atribut este adresa URL a imaginii. Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia.

Alinierea unei imagini in pagina Web se face prin intermediul atributului "align" al etichetei <img>, care ia valorile:

"left" - aliniere la stanga

"right" - aliniere la dreapta

"top" - aliniere deasupra .Partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea.

"middle" - aliniere la mijloc

"bottom" sau "baseline" - aliniere la baza

Alinierea textului in jurul unei imagini

Se face cu atributele "hspace" si "vspace" ale etichetei <img> care precizeaza distanta in pixeli pe orizontala si pe verticala, dintre imagine si elementele din pagina.

Imaginea pentru fondul unei pagini Web

Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului "background" al etichetei <body> care ia ca valoare adresa URL a imaginii.

Legaturile in pagina html se insereaza cu ajutorul etichetei speciale <a> si a atributului "href" care ia ca valoare adresa URL a resursei solicitate.

Cand mouse-ul este deasupra unei zone active, el ia forma unei maini. Calculatorul client expediaza cererea , primeste resursa pe care a solicitat-o pe care o va incarca in browser. In acelasi browser, pagina noua va fi inlocuita de cea veche.

Pentru a scoate in evidența site-urile care au fost vizitate se utilizeaza culori pentru legaturi astfel :

• o culoare pentru legaturile nevizitate
• o culoare pentru legaturile vizitate
• o culoare pentru legaturile active

Acestea se stabilesc cu atributele:

• "link" pentru legaturile nevizitate
• "vlink" pentru legaturile vizitate
• "alink" pentru legaturile active

Formularele HTML sunt cele mai frecvent utilizate pentru a colecta informatii de la persoane care viziteaza site-ul. Un formular este un ansamblu de zone active alcatuite din butoane de apasat, casete de selecție, campuri de editare si altele.

O sesiune de lucru cu o pagina Web ce conține un formular cuprinde urmatoarele etape:

1. Se completeaza formularul care se transmite unui server;
2. O aplicație dedicata de pe server analizeaza formularul completat și eventual se stocheaza datele intr-o baza de date.
3. Eventual serverul expediaza un raspuns utilizatorului.

Un formular este delimitat de tag-ul <form>.descriere formular</form>.

Intre tag-ul de intrare si cel de iesire sunt inserate, in principal controalele formularului.

Form-ul are 2 atribute importante: action si method.

<form action = valoare_a method = valoare_m> ..</form>

unde:

- valoare_a poate lua ca si valoare:

adresa URL a unui adresa URL a unui script aflat pe server, care primește datele formularului , se face o prelucrare a datelor si expediaza un raspuns utilizatorului daca e cazul

adresa de mail , caz in care datele formularului sunt transmise prin poșta electronica

- valoare_m poate lua 2 valori:

get este valoare implicita(datele din formular se adauga la adresa URL specificata in action);

post (datele sunt expediate separat; se folosește cand sunt transmise cantitați mari de date ).

Pentru a crea diferite butoane sau casete se folosește tag-ul <input>

<input type = name =value =>

unde

type poate lua valorile urmatoare

text

radio ( atributul checked selecteaza la prima activare a paginii butonul);

checkbox;

submit - trimite

reset - șterge (reseteaza);

password - parola (cand scriem se vad asterix-uri, dar la server(destinatar)se vede totuși parola decodificata).

name - este numele atașat casetei sau butonului . Nu reprezinta conținutul butonului sau casetei

value    - apare scris pe buton sau conținutul castei sau in cazul butoanelor radio numele butoanelor care fac parte din aceiași familie.(conținutul);

Alte atribute ale tag-ului input: -size - specifica lațimea campului de editare;

-maxlenght - specifica maximul de caractere.

Daca lipsește atributul type, rezulta implicit type = text.

Limbajul JavaScript va recunoaște butoanele dupa name.

Liste de selecție <select><option >.. </select>

O lista de selecție permite alegerea unuia sau mai multor elemente dintr-o lista finita.

Are 2 atribute importante : name si size.

Elementele dintr-o lista se introduc cu tag-ul <option>.

<select name = nume size = numar>

<option value = valoare_1 selected> Element_1

<option value = valoare_2 > Element_2.

<option value = valoare_3> Element_3

</select>.

unde:

name - numele listei de selecție

size - este un numar intreg pozitiv, precizeaza cate elemente din lista sunt vizibile la un moment dat

<option > este tag-ul care include elementele listei. Server-ul primește perechea

selected - permite selectarea prestabilita a unui element al listei

Lista de selecție cu selecții multiple - are aceiași sintaxa cu lista de selecție descrisa mai sus, dar in plus are atributul multiple in tag-ul select.

Campuri de editare multiple - Se fac cu tag-ul <textarea >

<textarea liste de atribute> text </textarea>

Din lista de atribute enumeram:

cols (nr de caractere afisate intr-o linie),

rows (nr de linii afișate simultan),

name (permite atașarea unui nume),

wrap care determina comportamentul campului de editare fata de sfarșitul de linie. Atributul poate lua valorile: off, hard, soft..

Cadrele ne permit sa definim in fereastra browserului subferstre in care sa fie incarcate documente HTML diferite. Ferestrele sunt definite intr-un fisier HTML special , in care blocul <body></body> este inlocuit de blocul <frameset></frameset>. In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.

Un atribut obligatoriu al etichetei <frame> este src, care primeste ca valoare adresa URL a documentului HTML care va fi incarcat in acel frame. Definirea cadrelor se face prin impartirea ferestrelor (si a subferestrelor) in linii si coloane:

Activitatea de invatare 1.2.1. Tag-uri html

Competenta: Formateaza elementele de conținut ale sistemului cu ajutorul software-lui specific

Obiectivul/obiective vizate:

La sfarșitul acestei activitați vei fi capabil sa:

identifici tag-urile de baza ale unui document html

sa utilizezi corespunzator aceste tag-uri

Durata:10 minute

Tipul activitatii: Potrivire

Sugestii :

Activitatea se poate face individual, un elev la cate un calculator, folosind fișa de lucru.

Activitatea se poate face și pe grupe sau in perechi

Sarcina de lucru :

1.     Completați tabelul de mai jos cu elementele corespunzatoare din prima linie a tabelului

Activitatea de invatare 1.2.2 Elemente de conținut ale unui document HTML

Competenta: Formateaza elementele de conținut ale sistemului cu ajutorul software-lui specific

Obiectivul/obiective vizate:  

La sfarșitul acestei activitați vei fi capabil sa:

Identifici tipurile de marcaje folosite intr-un document XML

Descrii fiecare element in parte

Utilizezi corect aceste elemente

Durata: 45 minute

 Tipul activitatii: Peer learning - metoda grupurilor de experti

Sugestii:

elevii se vor imparti in 5 grupe

Sarcina de lucru:

Fiecare grupa trebuie sa obtina informatii formatarea diferitelor elemente componente ale unui document html:

1. Font: culoare, tipul sau stilul, marimea, grosime. Titluri.
2. Liste neordonate și liste ordonate, tabele
3. Imagini, legaturi
4. Formulare și cadre
5. Butoane

Fiecare grupa va urmari:

Eticheta cu ajutorul careia se insereaza elementul respectiv

Atributele ce pot fi formatate la elementul respectiv

Modul de formatare

Pentru acest lucru elevii au la dispozitie 15 minute. Dupa ce au devenit "experti" in subtema studiata, se reorganizeaza grupele astfel incat in grupele nou formate sa existe cel putin o persoana din fiecare grupa initiala.

Timp de 30 minute elevii vor imparti cu ceilalti colegi din grupa nou formata cunostintele acumulate la pasul anterior.

La final fiecare elev va prezenta cunostintele acumulate dupa parcurgerea celor doua faze respectand cerințele.