 |
|
 |  |
| Aeronautica | Comunicatii | Drept | Informatica | Nutritie | Sociologie |
| Tehnica mecanica |
Html
|
Qdidactic » stiinta & tehnica » informatica » html Grafica in realizarea unui site-web |
Grafica in realizarea unui site-web
Lectia
Grafica se foloseste, in principal, pentru imbunatatirea aspectului unui sit si cresterea atractivitatii acestuia. Imaginile mai sunt folosite si pentru sublinierea unui text sau al mesajului transmis de o pagina web. Este recomandat sa includeti insa, numai imaginile absolut necesare si care sunt intr-adevar valoroase. Nu trebuie ca pagina web sa arate ca o simpa insiruire de imagini, oricat cat de remarcabile ar fi acestea, luate individual. In aceasta situatie, pagina va arata ca un brad de Craciun, iar mesajul pe care vreti sa-l transmiteti va fi mult diluat. Exista si exceptii, reprezentate de siturile web specializate si construite exclusiv pentru oferirea de imagini grafice, gratuite sau contracost. In acest caz, se folosesc thumbnails. Thumbnails ( versiuni miniaturale ale imaginilor ).
Acestea sunt folosite cu succes atunci cand se afiseaza o galerie cu imagini. Se poate realiza astfel, o buna machetare a paginii iar cititorii nu sunt fortati sa astepte pana se incarca imaginile la dimensiunea normala, ei dispunand totusi de o reprezentare recognoscibila a fiecarei imagini. Atunci cand se folosesc fotografii sau imagini de mari dimensiuni, vizitatorii vor decide daca vor sa le vada. Si in acest caz, este recomandat sa se foloseasca ' thumbnails '. Acestea ofera in afara de previzualizare si legaturi catre imaginile cu dimensiuni normale . De asemenea, este bine sa avertizati cititorii asupra dimensiunii fisierului grafic pe care urmeaza sa-l incarce. Puteti face acest lucru prin afisarea dimensiunii fisierului langa ' thumbnail ', mai ales atunci cand depasesc valoarea de 50 Kb.
Dimensiunea fisierelor grafice
Dimensiunea fisierelor grafice este determinata de suma informatiilor oferite de o imagine. Astfel, fisierul grafic aferent unei imagini de dimensiuni mari, dar avand numai cateva culori poate sa fie mai mic decat un fisier aferent unei imagini mult mai mici dar avand un numar mare de culori.
DE RETINUT:
Dimensiunile fisierelor grafice trebuie sa fie reduse la minimum posibil, fara a afecta insa calitatea acestora. Este bine ca suma acestor fisiere sa nu depaseasca 30-40 Kb. La aceste dimensiuni ele se incarca relativ repede. Din pacate insa, imaginile mari sau animatiile pot avea chiar si 75-100 Kb. Cu un modem avand o rata de transfer redusa, aceste imagini se incarca in aproximativ 30 de secunde. Acesta este un timp suficient de lung pentru ca un vizitator sa-si piarda rabdarea si sa renunte la vizitarea sitului.
Daca aveti cunostinte despre HTML, puteti sa folositi cateva trucuri pentru reducerea timpul de incarcare al fisierelor grafice. In acest mod, cititorii vor putea sa inceapa citirea textului fara sa astepte incarcarea tuturor imaginilor. Astfel, este recomandabila folosirea atributelor 'HEIGHT' si 'WIDTH' alaturate etichetei 'IMG'. In acest caz, browserul cunoaste cat de mult spatiu este atasat fiecarei imagini si incepe incarcarea textului imediat, in paralel cu incarcarea imaginii respective. Daca nu specificati aceste atribute, browserul va calcula mai intai dimensiunile imaginii in comparatie cu celelalte elemente si ulterior va incepe incarcarea efectiva a imaginii respective .
Puteti sa folositi si extensia Netscape numita ' LOWSRC ' care permite browserului sa incarce mai intai imaginea, la o rezolutie scazuta, aflata in locatia specificata de acest atribut. Aceasta imagine va trebui sa o modificati in prealabil cu un program de prelucare a imaginilor (trebuiesc reduse rezolutia si numarul de culori folosite). Evident ca este de o calitate mult mai scazuta, dar se incarca mai repede. In final, dupa ce a incarcat si restul paginii, browserul va reveni si va incarca imaginea in forma finala aflata in locatia specificata de atributul ' SRC' .
Folosirea acestei extensii este indicata mai ales atunci cand vreti sa utilizati o imagine de dimensiuni mari, care dureaza mult timp pana se incarca. In acest caz, utilizatorul va putea vedea la inceput, imaginea respectiva la o rezolutie mai scazuta. Daca vreti sa anulati chenarul care apare in jurul unei imagini folosite ca legatura, si care uneori poate avea un aspect neplacut, puteti sa folositi atributul 'BORDER=0', atasat etichetei IMG respective.
DE RETINUT:
In final , eticheta IMG va avea un format de felul urmator : <IMG SRC='fisier_grafic.gif'
LOWSRC='grafic_rezolutie_scazuta.gif' ALT='denumirea imaginii' BORDER='0' WIDTH='400' HEIGHT='300' >
Imagini GIF si JPEG
Atunci cand selectati forma de compresie a imaginilor grafice trebuie sa aveti in vedere tipul de imagine folosit. Cele mai folosite fisiere grafice si care sunt acceptate de toate browserele web sunt:
GIF ( Graphics Interchange Format ) - o schema de compresie folosita pentru grafice si imagini cu o rezolutie mai redusa , dezvoltata de Compuserve .
JPEG ( JPG ) - o metoda de compresie folosita pentru imagini fotografice sau cu o varietate de tonuri de culori , dezvoltata de Joint Photographic Expert Group
Alegerea formatului corect are o mare importanta atat pentru calitatea si claritatea imaginii folosite cat si pentru pastrarea unei dimensiuni reduse a fisierului grafic .Daca doriti sa folositi imagini pe care le-ati vazut pe un alt sit web, este bine sa cereti in prealabil acordul webmasterului respectiv. In caz contrar, riscati sa fiti acuzati de incalcarea dreptului de autor, in cazul in care imaginea respectiva a fost realizata intr-adevar de acea persoana.
Imagini GIF
Caracteristicile fisierelor GIF sunt urmatoarele :
imaginile folosesc numai culori pe 8 biti ( o paleta maxima de 256 culori )
se foloseste o metoda de compresie numita 'lossless', ceea ce inseamna ca nu se pierde nici o informatie, iar imaginea obtinuta se poate recomprima din nou, obtinand un fisier mai mic .
se pot reduce dimensiunile imaginilor folosind mai putine culori
o culoare din imagine poate fi setata ca fiind si culoarea fundalului. Acest efect este numit transparenta.
un alt efect interesant se poate obtine folosind procedeul interlace ( to interlace = a impleti ). In acest caz, imaginea initiala apare ca o pata incetosata care apare din ce in ce mai clara pe masura ce fisierul se incarca. In timp ce este incarcata, imaginea nu sufera o pierdere a calitatii.
se pot crea imagini animate, folosind o combinatie de mai multe imagini GIF .
Imaginile in format GIF se folosesc atunci cand se doreste obtinerea unor elemente grafice, ca de exemplu :
banere
logo
titluri
iconuri simple
imagini animate.
Imagini JPEG
Acestea se folosesc pentru grafice complicate sau imagini complexe, cu multe nuante de culori, ca de exemplu fotografiile. Pentru a pastra dimensiunea redusa a fisierelor grafice se foloseste un procedeu numit ' built-in compression ' . Imaginile JPEG mai sunt folosite pentru realizarea unor efecte metalice ( auriu, argintiu, etc. ), sau cand se doreste obtinerea de gradiente ( tonalitati de culori diferite ).
Caracteristicele fisierelor JPG sunt :
pot avea pana la 16.7 milioane de culori ( 24 biti ) folosesc o metoda de compresie numita ' lossy ' ( to lose = a pierde ). Aceasta inseamna ca unele detalii se pot pierde sau pot apare unele mici distorsiuni, ceea ce duce implicit la o scadere usoara a calitatii imaginii respective .
majoritatea editoarelor grafice permit un control al raportului compresie / calitate
nu permit realizarea unui fundal transparent .
In general, o imagine complexa cu multe culori va fi mai mica in format JPEG decat in format GIF. Pentru a se reduce dimensiunile unei imaginii se va folosi un editor grafic. Daca se incearca numai modificarea atributelor HEIGHT / WIDTH , fara reducerea corespunzatoare a dimensiunilor imaginii respective, pot apare unele distorsiuni sau pierderi ale culorilor. Este recomandat sa folositi aceeasi paleta de culori pentru toate imaginile din situl web.
Exemplu de sit web
In fiecare pagina am cautat sa folosesc una sau doua imagini sugestive care sa simbolizeze, pe cat posibil, titlul sau subiectul principal din pagina respectiva. Pe aceasta cale am dorit sa imbunatatesc aspectul paginii si sa subliniez intr-un fel ideea principala. Pagina web nu trebuie sa arate, in nici un caz, ca un bloc masiv de text deoarece cititorii vor obosi foarte repede si vor renunta sa-l citeasca pana la capat. Am cautat sa reduc dimensiunile fisierelor grafice pentru ca paginile web sa se incarce intr-un timp cat mai scurt. Din acelasi motiv am folosit atributele ' HEIGHT ' si ' WIDTH ' alaturate etichetei ' IMG'. In acest mod, browserul cunoaste cat de mult spatiu este atasat fiecarei imagini si incepe incarcarea textului imediat , in paralel cu incarcarea imaginii respective. Daca nu specificati aceste atribute, browserul va calcula mai intai dimensiunile imaginii.
Pentru ca imaginile sa nu apara cu o bordura in jurul lor, am setat atributul ORDER='0'.
In acest sit web am folosit multe imagini preluate din librariile grafice, disponibile pe Internet. Este suficient sa dati o cautare pe orice motor de cautare dupa cuvintele 'images', 'clipart', 'graphics' si veti obtine in cateva secunde liste cu cateva mii de astfel de resurse. Dupa ce ati incarcat aceste imagini in calculatorul dvs., este bine sa le grupati pe categorii pentru a putea sa le gasiti mai usor. In continuare, nu va ramane decat sa inserati aceste imagini in pagina dvs., acolo unde considerati ca este necesar . Printre cele mai vizitate librarii online mentionez urmatoarele :
https://www.arttoday.com/
https://www.free-graphics.com/
https://www.clipartconnection.com/
https://www.clipart.com/
https://www.clipartcastle.com
https://www.clipsahoy.com
https://www.topclipart.net
https://www.100clipart.com
https://www.freegraphicland.com
https://www.free-graphics.com/
https://www.cooltext.com/
https://www.mediabuilder.com/
Grafica se foloseste, in principal, pentru imbunatatirea aspectului unui sit si cresterea atractivitatii acestuia. Imaginile mai sunt folosite si pentru sublinierea unui text sau al mesajului transmis de o pagina web. Este recomandat sa includeti insa, numai imaginile absolut necesare si care sunt intr-adevar valoroase. Nu trebuie ca pagina web sa arate ca o simpa insiruire de imagini, oricat cat de remarcabile ar fi acestea, luate individual. In aceasta situatie, pagina va arata ca un brad de Craciun, iar mesajul pe care vreti sa-l transmiteti va fi mult diluat. Exista si exceptii, reprezentate de siturile web specializate si construite exclusiv pentru oferirea de imagini grafice, gratuite sau contracost. In acest caz, se folosesc thumbnails. Thumbnails ( versiuni miniaturale ale imaginilor ).
Acestea sunt folosite cu succes atunci cand se afiseaza o galerie cu imagini. Se poate realiza astfel, o buna machetare a paginii iar cititorii nu sunt fortati sa astepte pana se incarca imaginile la dimensiunea normala, ei dispunand totusi de o reprezentare recognoscibila a fiecarei imagini. Atunci cand se folosesc fotografii sau imagini de mari dimensiuni, vizitatorii vor decide daca vor sa le vada. Si in acest caz, este recomandat sa se foloseasca ' thumbnails '. Acestea ofera in afara de previzualizare si legaturi catre imaginile cu dimensiuni normale . De asemenea, este bine sa avertizati cititorii asupra dimensiunii fisierului grafic pe care urmeaza sa-l incarce. Puteti face acest lucru prin afisarea dimensiunii fisierului langa ' thumbnail ', mai ales atunci cand depasesc valoarea de 50 Kb.
Dimensiunea fisierelor grafice
Dimensiunea fisierelor grafice este determinata de suma informatiilor oferite de o imagine. Astfel, fisierul grafic aferent unei imagini de dimensiuni mari, dar avand numai cateva culori poate sa fie mai mic decat un fisier aferent unei imagini mult mai mici dar avand un numar mare de culori.
DE RETINUT:
Dimensiunile fisierelor grafice trebuie sa fie reduse la minimum posibil, fara a afecta insa calitatea acestora. Este bine ca suma acestor fisiere sa nu depaseasca 30-40 Kb. La aceste dimensiuni ele se incarca relativ repede. Din pacate insa, imaginile mari sau animatiile pot avea chiar si 75-100 Kb. Cu un modem avand o rata de transfer redusa, aceste imagini se incarca in aproximativ 30 de secunde. Acesta este un timp suficient de lung pentru ca un vizitator sa-si piarda rabdarea si sa renunte la vizitarea sitului.
Daca aveti cunostinte despre HTML, puteti sa folositi cateva trucuri pentru reducerea timpul de incarcare al fisierelor grafice. In acest mod, cititorii vor putea sa inceapa citirea textului fara sa astepte incarcarea tuturor imaginilor. Astfel, este recomandabila folosirea atributelor 'HEIGHT' si 'WIDTH' alaturate etichetei 'IMG'. In acest caz, browserul cunoaste cat de mult spatiu este atasat fiecarei imagini si incepe incarcarea textului imediat, in paralel cu incarcarea imaginii respective. Daca nu specificati aceste atribute, browserul va calcula mai intai dimensiunile imaginii in comparatie cu celelalte elemente si ulterior va incepe incarcarea efectiva a imaginii respective .
Puteti sa folositi si extensia Netscape numita ' LOWSRC ' care permite browserului sa incarce mai intai imaginea, la o rezolutie scazuta, aflata in locatia specificata de acest atribut. Aceasta imagine va trebui sa o modificati in prealabil cu un program de prelucare a imaginilor (trebuiesc reduse rezolutia si numarul de culori folosite). Evident ca este de o calitate mult mai scazuta, dar se incarca mai repede. In final, dupa ce a incarcat si restul paginii, browserul va reveni si va incarca imaginea in forma finala aflata in locatia specificata de atributul ' SRC' .
Folosirea acestei extensii este indicata mai ales atunci cand vreti sa utilizati o imagine de dimensiuni mari, care dureaza mult timp pana se incarca. In acest caz, utilizatorul va putea vedea la inceput, imaginea respectiva la o rezolutie mai scazuta. Daca vreti sa anulati chenarul care apare in jurul unei imagini folosite ca legatura, si care uneori poate avea un aspect neplacut, puteti sa folositi atributul 'BORDER=0', atasat etichetei IMG respective.
DE RETINUT:
In final , eticheta IMG va avea un format de felul urmator : <IMG SRC='fisier_grafic.gif'
LOWSRC='grafic_rezolutie_scazuta.gif' ALT='denumirea imaginii' BORDER='0' WIDTH='400' HEIGHT='300' >
Imagini GIF si JPEG
Atunci cand selectati forma de compresie a imaginilor grafice trebuie sa aveti in vedere tipul de imagine folosit. Cele mai folosite fisiere grafice si care sunt acceptate de toate browserele web sunt:
GIF ( Graphics Interchange Format ) - o schema de compresie folosita pentru grafice si imagini cu o rezolutie mai redusa , dezvoltata de Compuserve .
JPEG ( JPG ) - o metoda de compresie folosita pentru imagini fotografice sau cu o varietate de tonuri de culori , dezvoltata de Joint Photographic Expert Group
Alegerea formatului corect are o mare importanta atat pentru calitatea si claritatea imaginii folosite cat si pentru pastrarea unei dimensiuni reduse a fisierului grafic .Daca doriti sa folositi imagini pe care le-ati vazut pe un alt sit web, este bine sa cereti in prealabil acordul webmasterului respectiv. In caz contrar, riscati sa fiti acuzati de incalcarea dreptului de autor, in cazul in care imaginea respectiva a fost realizata intr-adevar de acea persoana.
Imagini GIF
Caracteristicile fisierelor GIF sunt urmatoarele :
imaginile folosesc numai culori pe 8 biti ( o paleta maxima de 256 culori )
se foloseste o metoda de compresie numita 'lossless', ceea ce inseamna ca nu se pierde nici o informatie, iar imaginea obtinuta se poate recomprima din nou, obtinand un fisier mai mic .
se pot reduce dimensiunile imaginilor folosind mai putine culori
o culoare din imagine poate fi setata ca fiind si culoarea fundalului. Acest efect este numit transparenta.
un alt efect interesant se poate obtine folosind procedeul interlace ( to interlace = a impleti ). In acest caz, imaginea initiala apare ca o pata incetosata care apare din ce in ce mai clara pe masura ce fisierul se incarca. In timp ce este incarcata, imaginea nu sufera o pierdere a calitatii.
se pot crea imagini animate, folosind o combinatie de mai multe imagini GIF .
Imaginile in format GIF se folosesc atunci cand se doreste obtinerea unor elemente grafice, ca de exemplu :
banere
logo
titluri
iconuri simple
imagini animate.
Imagini JPEG
Acestea se folosesc pentru grafice complicate sau imagini complexe, cu multe nuante de culori, ca de exemplu fotografiile. Pentru a pastra dimensiunea redusa a fisierelor grafice se foloseste un procedeu numit ' built-in compression ' . Imaginile JPEG mai sunt folosite pentru realizarea unor efecte metalice ( auriu, argintiu, etc. ), sau cand se doreste obtinerea de gradiente ( tonalitati de culori diferite ).
Caracteristicele fisierelor JPG sunt :
pot avea pana la 16.7 milioane de culori ( 24 biti ) folosesc o metoda de compresie numita ' lossy ' ( to lose = a pierde ). Aceasta inseamna ca unele detalii se pot pierde sau pot apare unele mici distorsiuni, ceea ce duce implicit la o scadere usoara a calitatii imaginii respective .
majoritatea editoarelor grafice permit un control al raportului compresie / calitate
nu permit realizarea unui fundal transparent .
In general, o imagine complexa cu multe culori va fi mai mica in format JPEG decat in format GIF. Pentru a se reduce dimensiunile unei imaginii se va folosi un editor grafic. Daca se incearca numai modificarea atributelor HEIGHT / WIDTH , fara reducerea corespunzatoare a dimensiunilor imaginii respective, pot apare unele distorsiuni sau pierderi ale culorilor. Este recomandat sa folositi aceeasi paleta de culori pentru toate imaginile din situl web.
Exemplu de sit web
In fiecare pagina am cautat sa folosesc una sau doua imagini sugestive care sa simbolizeze, pe cat posibil, titlul sau subiectul principal din pagina respectiva. Pe aceasta cale am dorit sa imbunatatesc aspectul paginii si sa subliniez intr-un fel ideea principala. Pagina web nu trebuie sa arate, in nici un caz, ca un bloc masiv de text deoarece cititorii vor obosi foarte repede si vor renunta sa-l citeasca pana la capat. Am cautat sa reduc dimensiunile fisierelor grafice pentru ca paginile web sa se incarce intr-un timp cat mai scurt. Din acelasi motiv am folosit atributele ' HEIGHT ' si ' WIDTH ' alaturate etichetei ' IMG'. In acest mod, browserul cunoaste cat de mult spatiu este atasat fiecarei imagini si incepe incarcarea textului imediat , in paralel cu incarcarea imaginii respective. Daca nu specificati aceste atribute, browserul va calcula mai intai dimensiunile imaginii.
Pentru ca imaginile sa nu apara cu o bordura in jurul lor, am setat atributul ORDER='0'.
In acest sit web am folosit multe imagini preluate din librariile grafice, disponibile pe Internet. Este suficient sa dati o cautare pe orice motor de cautare dupa cuvintele 'images', 'clipart', 'graphics' si veti obtine in cateva secunde liste cu cateva mii de astfel de resurse. Dupa ce ati incarcat aceste imagini in calculatorul dvs., este bine sa le grupati pe categorii pentru a putea sa le gasiti mai usor. In continuare, nu va ramane decat sa inserati aceste imagini in pagina dvs., acolo unde considerati ca este necesar . Printre cele mai vizitate librarii online mentionez urmatoarele :
https://www.arttoday.com/
https://www.free-graphics.com/
https://www.clipartconnection.com/
https://www.clipart.com/
https://www.clipartcastle.com
https://www.clipsahoy.com
https://www.topclipart.net
https://www.100clipart.com
https://www.freegraphicland.com
https://www.free-graphics.com/
https://www.cooltext.com/
https://www.mediabuilder.com/
|
Atentie! Caracterul ; (punct si virgula) este obligatoriu la sfarsit!
Aplicarea unor efecte asupra texlului
Pentru a aplica unei zone de text un anumit efect, se incadreaza textul intre eticheta de inceput si cea de sfarsit, corespunzatoare efectului respectiv. Cele mai utilizate efecte se pot aplica asupra textului in HTML sunt:
Descriere
<I> Textul este scris cursive</I>
Efect
Textul este scris cursiv
Descriere
<U> Textul este scris subliniat </U>
Efect
Textul este scris subliniat
Descriere
<B> Textul este scris ingrosat </B> Efect
Textul este scris ingrosat
Descriere
<BIG> Textul este scris mai mare </BIG> Efect
Textul este scris mai mare
Descriere
<SMALL> Textul este scris mai mic </SMALL> Efect
Textul este scris mai mic
Descriere