s1/c11 Pagini web

Curs 11
Pagini Web



Folosind un motor de cautare, de exemplu www.google.com cu cererea “Free website template”, sau www.templastesbox.com sau www.homestead.com puteti obtine informatii si explicatii legate de cerintele unei pagini web
Aceste site-uri ofera informatii , unele gratuite despre continutul si descarcarea unei pagini web personalizate functie de optiunile utilizatorului cu gazduire pentru o perioada limitata de timp. Folositi pentru aceasta motorul de cautare www.google.com cu cererea: “Free hosting web page”.


1.Generalitati
Exista mai multe programe specializate care permit construirea de pagini Web, si care fac parte din grupul de aplicatie Macromedia:
Dreamweaver – construire texte
Fireworks -
Flash -
Sau
Microsoft Front Page

2. Crearea unei pagini Web
Procedeu general
- Editarea fisierului html folosind un editor de texte obisnuit ( Word) sau unul dedicat (Nestcape)
- Salvarea paginii Web cu extensia .html sau htm
3. Document hipertext
Hipertextul reprezinta o forma de document electronic in care datele sunt memorate intr-o retea de noduri (data se folosesc si mesaje muzicale, sau secvente de film hipertextul se numeste si hipermedia). Un nod reprezinta o colectie de informatii sub forma de text grafic, secvente muzicale, secvente video, animatie sau programe. Nodurile sunt conectare prin intermediul legaturilor (ancore bidirectionale sau unidirectionale).
Localizarea informatiilor se realizeaza folosind o serie de identificatori de resurse URL (in realitate o adresa , o cale, o biblioteca desemnate prin identificatori ) ex:http://www.arteiasi.ro
Unde : http – defineste protocolul HTTP pentru accesarea resurselor paginii Web
arteiasi.ro – defineste domeniul de resurse (un server de date , o adresa IP)
Informatiile specifice unui domeniu de specializare dorit pot fi adunate intr-o pagina de Web care sa ofere in plus: servicii de posta electrnica, curs valutar, starea meteo, liste de discutii de tip messanger etc.Astfel de domenii se numesc portaluri.
Un document hipertext este un document obisnuit, scris intr-un editor oarecare, care este incadrat intre niste etichete scrise intre paranteze unghiulare,care in definesc ca document html
[htlm]
[Head ]
[Title]
.. titlul documentului
[/Title]
[/Head]
[Body]
.. Corpul documentului
[IMG SRC=”nume fotografie”]-insereaza o fotografie
[A HREF=”document html”][/A] legatura hipertext
[/Body]
[/html]

4. Obiectivele unui site Web
Un site web urmareste o actiune de atentionare a publicului care navigheaza pe Internet a informtiilor pe care le poate oferi persoana care a construi site-ul Cu alte cuvinte construirea unui site trebuie sa aiba in vedere urmatoarele obiectiv;
- identificarea publicului tinta
- stabilirea scopului site-ului
- planul informatiilor strict necesare pe site.
Persoanele care navigheaza pe internet pot fi utlizatori locali pentru care o structura prea complexa a site-ului va duce la abandonarea citirii informatiilor sau cercetarea cu amanuntime a informatiilor chiar daca le sunt utile. Utilizatorii frecventi doresc un acces direct si rapid la informatiile paginii deci vor fi interesati de gradul si acuratetea informatiilor oferite. Daca exista un public tinta international, pagina va trebui sa ofere informatii intr-o limba de circulatie internationala (cu evitarea termenilor tehnice sau a elementelor de jargon dintr-o limba). Important este ca utilizatorii sa poata reveni rapid in pagina principala a site-ului sau sa sara la puncte importante ale site-ului. Legaturile intre pagini trebuie facute prin butoane grafice, ancore de text sau bara de meniuri.
5. Legaturi pentru pagini Web
Legaturile (link-urile) reprezinta faza cea mai importanta a unei pagini Web. Aceste legaturi transforma un text intr-un hipertext. Legaturile sunt zone active dintr-o pagina Web care devin sensibile (desenul mouse-ului se transforma in imaginea umei palme ) . Un click pe o legatura insemna o cerere adresata serverului pentru o apelare a unei noi pagini Web
Internetul foloseste notiunea de resursa. O resursa este un document, o baza de date, un serviciu. Pentru a lega o resursa , se foloseste termenul de URI (Universal Resurse Identifier), Daca legam o locatie (adresa) folosim termenul de URL (Universal Rerource Locator). Daca legam un nume folosim termenul de URN (Universal Resource Name).
Internetul se bazeaza pe notiunea de cerere / raspuns. Cererea este amisa de un client; acesta stabileste o conexiune cu un server caruia i se trimite cererea. Serverul raspunde cu un mesaj . Legatura intre client si server se realizeaza printr-o conexiune de tip:
- proxy – un echipament dupa calculatorul client, care primeste cererea, o examineaza , rescrie parti din cerere apoi o trimite catre server (clientii care trec prin proxy, devin invizibili pentru server)
- gateway – este un echipament in fata serverului care selecteaza tipul de mesaj si-l orienteaza catre serverul
Adresarea unei resurse http se face dupa urmatorul model:
http://adresa_calc_in_retea/cale/document.
Pentru accesarea unei resurse se aplica unad din metodele urmatoare:
- OPTIONS – defineste optiuni de comunicare cu serverul
- GET – aduce ceva de la resursa (citeste date dintr-o baza de date de pe server)
- PUT – spune serverului sa memoreze datele trimise cu un nume specificat URL
- COPY,MOVE,DELETE – resursa specificata poate fi copiata, mutata, stearsa
- POST - resursei i se cere sa isi subordoneze datele in entitatea care insoteste cererea
- PATCH - conrine date pentru refacerearesursei
- LINK - leage doua resurse
- TRACE - verifica conexiunea
- WRAPPED - trimite o cerere, asteapta un raspuns

O legatura se realizeaza in felul urmator:
- in pagina html se insereaza o legatura prin intermediul unei etichete [a] si a unui atribut href care primeste valoarea dresei URL a resursei solicitate.
Ex: [a href = www.netscape.com> zona [/a]
- in pagina web apar legaturi active care se vizualizeaza sub forma unei maini cand se face un click mouse
- serverul WWW primeste noua resursa si o incarca calculatorului client
O legatura catre o pagina aflata in acelasi director se realizeaza cu ajurorul ancorei ,ex: [a href=”p2.html” ] [zona activa ] [/a]
O legatura catre un fisier de pe acelasi disk dar de pe alt director se realizeaza folosind adresare relativa, ex: [a href = “..\subdirector\nume.fis] [zona activa] [/a]
In aceast caz este bine sa definim directorul de baza fata de care se vor face referirile (adresarea relativa) folosind eticheta base:
Ex: [base href=www.edu.ro]
[a href=”imagini/img.gif”] [zona activa] [/a]
Este posibil ca si o imagine sa devina zona activa intre etichetele .. ,
Ex: [a href = “p/html”] [img src=”nume.gif”] [/a]
Daca se acceseaza un fisier html aflat pe calculatorul clientului de pe care este lansat in executie browserul, atunci se utilizeaza serviciul: file://
Ex: [a href=”file://c:/cale/nume.fis] [zona activa] [/a]
Daca se acceseaza un server specializat in transferuri de fisiere (serveer FTP) atunci se poate folosi serviciul ftp://
Ex: [a href = “ftp://ftp.netscape.com”] [zona activa] [/a]
Daca se utilizeaza legatura catre un serviciul de posta electronica atunci se foloseste forma: [a href = mailto:nume@edu.ro] [mesaj] [/a]
Daca dorim sa facem legatura catre un fisier de sunet, vom folosi aceeasi metoda
[a href =”music.au”] [zona activa *.wav] [/a]
Unele videoclipuri sunt recunoscute de browsere si pot fi inserate intr-o pagina web. Formatele recunoscute de browsere sunt:
- format MPEG cu extensiile: *.,peg ; *.mpg
- format QuickTime cu extensia *.mov
- format AVI cu extensia *.avi
O legatura catre un videoclip se face prin urmatoarea forma:
[a href =”nume.avi” ] [ fisier *.avi] [/a]
Daca pagina de web trebuie insotita de un sunet de fond vom folosi forma:
[bgsound src=”nume.au” loop=”-1”]
Obs. Scriputile sunt programe care ruleaza pe un server sau fac legatura cu alte servere.
Obs. Protocolul pentru transmiterea documentelor hipertext prin Internet se numeste HTTP
Un document html care contine text, imagini, butoane, liste etc. se numeste forma si se evidentiaza prin:
[Form]
document
[/form]

6. Harti de imagini
Imaginile sunt stocate in fisiere de diverse formate: GIF, JPEG, XPM, BMP, TIFF, PCX.
O imagine poate fi utilizata pentru a defini o zona activa. Exista si posibilitatea ca numai anumite zone dintr-o imagine sa fie declarate zone active. O harta este in acest caz o suma de zone. Fiecare zona este descrisa prin eticheta atribut, unde atribut inseamna :
- pentru zona dreptunghiulara
[area nume=”rect” coords=”x1,x2,x3,x4” href=”nume”]
unde x1,x2 –sunt coordonatele coltului din stinga sus
x3,x4 – sunt coordonatele coltului din dreapta jos
- pentru zona circulara
[area nume=”circle” coords=” c1,c2,r3,” href=”nume”]
unde c1,c2,r3 sunt coordonatele centrului si raza
- pentru zona poligonala
[area nume=”poly” x1,x2,x3,x4 x5,x6,x7,x8….”” href=”nume”]
unse x1,x2 sunt coordonatele varfurilor liniei poligonale
Acest lucru presupune parcurgerea urmatorilor pasi:
a) definirea unei imagini ca “harta de imagini” folosind eticheta
- atributul src primeste valoarea adresei URL a imaginii
b) definirea hartii in interiorul unui bloc special de etichete
- atributul usermap primeste un nume generic “#harta” descris de atributul [area]
ex: [imr src=”nume.gif”
usemap=”#harta1”]
[map name=”harta1”]
[area zona=”rect”
coords=”100,100,200,200” href=”p.html”]
[/map]
Pentru harti sensibile se foloseste eticheta [MAP].. [/MAP]

7. Construire formulare de culegere date
Elementele de control intr-o pagina sunt: butoane, meniuri, elemente de control. Inserarea unui fosmular intr-un document html se face cu eticheta

..

Butoanele (radio, de validare etc.) se pot introduce in docuemntul html cu eticheta HTML INPUT
Ex: [P] Nume si prenume
[INPUT TYPE=TEXT NAME=”nume”]
are ca efect:
Nume si prenume:
Sau
[P] Sexul:
[P] [INPUT TYPE=RADIO VALUE =”M”] Masculin
[P] [INPUT TYPE=RADIO VALUE=”F” CHECKED] Feminin
are ca efect:
Sexul:
Masculin
Feminin
Sau
[P] Nume utilizator
[P] TYPE =TEXT NAME=”user”]
[P] Password
[INPUT TYPE=PASSWORD NAME=”parola”]
are ca efect:
Nume utilizator
Password:
Sau
[P] [INPUT TYPE=SUBMIT VALUE=”OK”]
are ca efect:


Elementul BUTTON cu atributele principale: NAME, VALUE, TYPE (cu valori SUBMIT, RESET, BUTTON) are aceeasi semnificatie ca elementul INPUT

8. Liste
O lista oarecare este un text delimitat de etichetele [ul] si [/ul]
Fiecare elemt al listei este precedata de eticheta

Ex:
[ul] Acest exemplu reprezinta o lista
[li] Randul 1 este subliniat
[li] Urmatoarele sunt inngrosate
[/ul]
Daca lista cuprinde si elemente de titlu atunci ea poate fi descrisa in urmatoarul exemplu:
[html]
[head]
[title] EXEMPLU
[/title]
[/head]
[body] Caractere normale
[br]
[b] Caractere bold
[/b]
[i] Italic
[/i]
[/body]
[li] Randul 1
[li]Randul 2
[/ul]
[/html]

9. Utilizarea stilurilor de formatare CSS
Avantajul utilizarii formatelor CSS este legat de posibilitatea de a declara de la inceput un anumit format care sa fie valabil pe tot documentul html , ceea ce face ca o modificare intr-o zona sa fie valabila asupra intregului document html.
Definitia unui stil contine un element HTML si una sau mai multe declaratii care definesc modul de vizualizare a documentului respectiv Declara]iile sunt incluse intre paranteze si sunt separate prin caracterul “;” O declaratie are doua parti: o parte numita proprietate si o alta care este valoarea proprietatii respective – proprietatea este separata prin “:” de valoarea atribuita ei.
Ex: P {color: RED}
Se utilizeaza un limbaj de descrierea stilurilor de formatare CSS, recunoscut de o pagina WEB prin intermediul unei declaratii META
[META HTTP-EQUIV=”Content-Style-Type”
CONTENT =”text/css”]
Precizarea stilurilor intr-un document Html se poate face urmatoarele metode:
- specificarea stilului in cadrul unei linii:
[P STYLE=”TEXT-ALIGN: CENTER; COLOR: RED”]
- specificarea stilurilor in antet
[STYLE TYPE =”text/css”]
P (FONT : 12 PT Arial; FONT-STYLE:Italic; TEXT-ALIGN: Left)
[/STYLE]
- specificarea stilurilor extern
[LINK TYPE=”text/css” REL=”stylesheet”, HREF=unstil.css”]

10. Utilizarea scripturilor Javascript
Un script este un program scris in limbajul Javascript (elaborat de Netscape Comunication Corporation), care poate fi inserat intr-un document HTML si care este executat de calculator la incarcarea documentului html sau la producerea unui eveniment (clic mouse).
Limbajul Javascript este un limbaj de descriere orientat pe obiect care permite imbunata]irea performantelor si aspectul unei pagini Web.
Un script este un program Java orientat pe eveniment , mai simplu , interpretat de browser-ul de pe calculatorul utilizatorului.
Incarcarea unui script, odata cu incarcarea docuemntului Html se realizeaza prin intermediul elementului SCRIPT cuprins intre eticheta
Elementul de definirea a sriptului SCRIPT are urmatoarele variabile:
TYPE = sir de caractere – specifica limbajul de descriere a scriptului
SRC= URL – da adresa fisierului care contine script-ul
Ex:
[SCRIPT TYPE=”text/javascript”]
document.write(“HELLO”)
[/SCRIPT]
In cazul in care dorim aparitia scriptului la aparitia unui eveniment (clic mouse), putem specifica o serie de atribute in documentul html:
ONLOAD = script , ce permite incarcarea unui script dupa incarcarea intregului document html
ONUNLOAD = script , care permite descarcarea scriptului dupa eliminarea docuemntului html din fereastra
ONCLICK = script , care produce incarcarea scritpului in momentul apasarii unui clic (buton, link-)
ONMOUSEDOWN= script , care activeaza scriptul in momentul actionarii mouse-ului
ONMOUSEUP=script, care activeza scriptul in momentul actionarii mouse-ului
ONMOUSEOVER=script, care activeaza scriptul in momentul deplasarii mouse-ului
ONFOCUS=script , care activeaza un script in momentul in care un element de control al unui formular devine activ.
ONKEYPRESS=script, care activeaza un script in momentul apasarii unei taste
ONSELECT=script, care activeaza un script in momentul selectarii unui cimp dintr-un document html
ONCHANGE=script, care activeaza un script in momentul schimbarii unei valori dintr-un formular html (se aplica elementelor INPUT, SELECT, TEXTAREA )
Descrierea unui script foloseste elemente de limbajul C++
Ex:
Function Interval(s,x,d)
{var varsta = false
if (!parseInt(s.value))
alert(“Introduceti varsta”)
else
if (parseInt(s.value) > d)
alert (“Varsta trebuie sa fie mai mica de “+d)
else
varsta=true
return varsta }
care introdusa intr-un document html devine:
[HEAD]
[SCRIPT TYPE=”text/JavaScript”]
[INPUT TYPE=NAME=”varsta” SIZE=5
ONCHANGE=”Interval(this.form.varsta,0,100)”]
…
[/HEAD]

Aveti o imagine a unui document construit care foloseste programul dreamweaver. Programul dispune de un meniu general si de optiuni care permit evidentierea textului html in care s-a descris site-ul.



11. Front Page
Este un editor care ofera o imagine care va contine desenul principal pe pagina de web personalizata.
Medore de construire a paginii:
1. Creare paginii:
La deschiderea utilitarului Front page apare o pagina noua cu 3 ferestre in partea de jos a paginii:
Normal – mod obisnuit de desenare;
HTML – afisarea textului in format hipertext
Preview – vizualizarea paginii pe Internet

Folosind modul de lucru Normal, putem scrie text si insera imagini. Fisierul trebuie salvat din File-Save As cu extensia nume.htm
In meniul Format- form avem elemente de legatura intre pagini: Push Button, Buton redio etc. Dupa selectarea elementului , click dreapta mouse da hiperlink, care permite setarea legaturii intre elementele desenate sau intre pagini