 |
|
 |  |
| Aeronautica | Comunicatii | Drept | Informatica | Nutritie | Sociologie |
| Tehnica mecanica |
Html
|
Qdidactic » stiinta & tehnica » informatica » html Tabele - folosirea imaginilor in tabele |
Tabele - folosirea imaginilor in tabele
Lectia - Tabele
Tabelele sunt folosite atat pentru o machetare eficienta cat si pentru a face mai atractive diversele elemente componente ale unei pagini web. Tabelele permit o impartire a paginii in sectiuni si o pozitionare precisa a textului sau imaginilor in interiorul paginii. Sa presupunem ca vreti sa realizati o pagina web care sa contina un meniu de navigare in partea stanga si continutul ( text, imagini,etc. ) in partea dreapta. Aceasta machetare se poate realiza si cu ajutorul cadrelor, dar folosirea unui tabel este mai indicata deoarece aveti mai mult control asupra elementelor. Astfel, puteti imparti pagina in doua coloane, cu meniul de navigare in stanga si continutul propriu-zis in dreapta, textul fiind aliniat la stanga. Puteti crea margini sau borduri de diferite dimensiuni si culori. De asemenea, se poate incapsula continutul in celulele tabelului pentru a permite alinierea textului si a limita lungimea liniilor.
Deoarece bordura tabelelor nu este totdeauna necesara si uneori poate avea un aspect neplacut, se poate renunta la ea prin folosirea atributului ' BORDER = 0 ' . Atunci cand folositi tabele, puteti sa setati o latime fixa, in pixeli, sau o latime relativa la dimensiunea ecranului, in procente. De exemplu, daca folositi atributul WIDTH=80% , continutul va fi afisat pe 80% din latimea ecranului. In acest caz, afisarea continutului se adapteaza mai usor la diferitele tipuri de monitoare sau rezolutii ale acestora.
Setarea latimii in procente se face mai ales la paginile unde exista mult text si unde nu este necesara o formatare precisa. Pe de alta parte, tabelele definite cu o latime fixa in pixeli vor ramane neschimbate. In acest caz, daca se foloseste o rezolutie marita va apare un spatiu alb, in afara tabelului care va da uneori o imagine neplacuta. In schimb, setarea unei latimi fixe va permite un control ridicat al printarii, realizand o tiparire fara intreruperi laterale ale paginii web respective.
Folosirea imaginilor in tabele
Cand intr-una din celulele tabelului aveti inserata o imagine, inscrierea dimensiunilor acesteia are o mare importanta ( atributele 'WIDTH' si ' HEIGHT' ). Aceasta deoarece exista posibilitatea ca browserul, dupa ce construieste structura tabelului, sa constate ca dimensiunile imaginii sunt prea mari pentru a completa o celula. In acest caz, browserul va reface pagina pe care o incarca, iar cititorul va vedea o pagina care apare si apoi dispare . Mai trebuie luat in considerare si faptul ca atunci cand exista un tabel intr-o pagina web, browserul asteapta sa incarce tot continutul tabelului si abia dupa aceea il afiseaza cititorului. Folosirea uneia sau mai multor imagini de dimensiuni mari intr-un tabel poate duce la cresterea exagerata a timpului de incarcare (uneori peste 1 minut).
De aceea, este recomandat sa puneti aceste imagini in afara tabelului principal sau in tabele separate, pentru ca browserul sa le incarce concomitent. Atunci cand proiectati o pagina web cu tabele, este bine sa evitati pe cat posibil folosirea de tabele imbricate ( un tabel in interiorul altuia ). In afara aspectului neatragator, pot apare si erori care sunt greu de depistat . Pentru a obtine o punere in pagina eficienta, incercati sa experimentati mai multe tipuri de tabele cu latimi, margini si borduri diferite. In final, alegeti solutia care ofera o flexibilitate maxima si creeaza efectul pe care l-ati dorit. Mai multe informatii interesante despre tabele puteti gasi vizitand urmatoarele situri :
https://www.webhelp.org/tables/
https://www.killersites.com/tutorial/
https://www.bagism.com/tablemaker/
https://www.pagetutor.com/pagetutor/tables/index.html
https://www.botany.hawaii.edu/tables/
https://www.december.com/html/demo/tablehi.html
https://www.pageresource.com/html/table3.htm
https://www.htmlgoodies.com/tutors/tbl.html
In final, ceea ce conteaza este mesajul pe care reusiti sa-l transmiteti. Acest lucru puteti sa-l faceti folosind o pagina simpla, cadre, tabele sau combinatii ale acestora. Important este sa realizati un sit web atragator, indiferent de modul de aranjare in pagina .
Cadre ( frames )
Cadrele va permit sa afisati doua sau mai multe pagini web, in acelasi timp, prin impartirea ecranului in mai multe sectiuni independente. Initial, cadrele au fost o inovatie a firmei Netscape. Pe parcurs, ele au fost folosite din ce in ce mai mult si in prezent sunt acceptate de majoritatea browserelor. Ele reprezinta o metoda controversata de machetare a unei pagini web. In randul webdesignerilor exista sustinatori si adversari ai folosirii cadrelor , ca o solutie eficienta de aranjare in pagina.De aceea, inainte de a va hotara, analizati modul cum doriti sa organizati si sa structurati paginile web. Folosirea cadrelor prezinta atat avantaje cat si dezavantaje.
Avantajele folosirii cadrelor :
Cadrele se pot folosi cu succes atunci cand continutul sitului se modifica frecvent. In acest caz, un cadru va fi folosit pentru meniul de navigare iar in celalalt cadru va apare continutul
propriu-zis. Cand doriti modificarea sau actualizarea continutului, este suficient sa modificati numai un fisier. Nu este nevoie sa schimbati fiecare pagina a sitului pentru a actualiza legaturile. Pentru cititori navigarea va fi usoara, deoarece ei vor sti in orice moment unde se afla legaturile si cum este structurat situl. Folosirea cadrelor permite utilizatorilor sa aleaga ce vor sa vada.
De exemplu, sa presupunem ca vreti sa prezentati un film in pagina web. In loc sa folositi o singura pagina, care se va incarca foarte greu din cauza dimensiunii mari a fisierului,
puteti sa folositi numai o legatura in pagina principala. Daca urmeaza aceasta legatura, vizitatorul va fi trimis intr-un alt cadru unde va putea urmari filmul, bineinteles dupa incarcarea fisierului respectiv .
Dezavantajele folosirii cadrelor :
Multi webmasteri nu recomanda folosirea cadrelor datorita urmatoarelor dezavantaje:
flexibilitate limitata si posibila confuzie a cititorilor
aparitia bordurilor care reduc spatiul afisat pe ecran
browserele mai vechi ( NN 1.0 , IE 1.0 , IE 2.0 ) nu recunosc siturile care contin cadre
timpul de incarcare al paginilor este mai mare
uneori se pot obtine rezultate neasteptate. Astfel, daca folositi butonul ' Back ' veti reveni in interiorul cadrului in loc sa vedeti pagina precedenta .
puteti intampina dificultati atunci cand vreti sa salvati sau sa tipariti o pagina care contine cadre.
Cand salvati o pagina web care v-a interesat aveti doua optiuni :
sa salvati toata pagina
sa salvati numai un anumit cadru folosind comanda 'Save frame as ' .
cand vreti sa faceti un semn de carte ( bookmark ) la o pagina care contine cadre , veti vedea ca veti face semn numai pe pagina index (cea care contine setarile- frameset si nu pe pagina cu continutul propriu-zis .
Daca totusi va hotarati sa realizati machetarea paginii cu ajutorul cadrelor, pentru evitarea acestor neplaceri, puteti sa realizati si o versiune alternativa a sitului, fara cadre. Pentru aceasta folositi marcajul NOFRAMES. Pe pagina principala veti pune o legatura explicita catre aceasta versiune. Alte informatii referitoare la folosirea cadrelor in machetarea paginilor web le puteti obtine daca accesati urmatoarele pagini web :
https://www.builder.cnet.com/Authoring/Frames/index.htm
https://www.pagetutor.com/pagetutor/frames/index.html
https://www.manda.com/frames/
https://www.home.netscape.com/assist/net_sites/frames.html
https://www.sharkysoft.com/tutorials/frames/
https://www.htmlhelp.com/design/frames/
Exemplu de sit web
In machetarea sitului web https://www.afaceri.net am optat pentru folosirea tabelelor.
Astfel, am impartit spatiul paginii in doua tabele principale, a caror latime am stabilit-o in procente (100%). Acest lucru conduce la vizualizarea paginii pe intreaga latime a ecranului, indiferent de rezolutia acestuia. In tabelul superior am inserat logo-ul, harta grafica si o imagine. Tabelul inferior, l-am impartit in alte doua tabele. In partea stanga a acestuia am inclus sistemul de navigare, chestionarul, lista cu produse oferite gratuit si contoarele de trafic ( Trafic si Sitemeter). Tabelul din partea dreapta l-am impartit, la randul lui, in alte trei randuri.
Randul de sus l-am folosit pentru inserarea continutului propriu-zis al paginii web, in randul din mijloc am introdus sagetile de navigare (inainte-inapoi) iar in ultimul rand am introdus legaturile text catre paginile de nivel 1 ale sitului si informatiile legate de copyright.
Pentru titluri si subtitluri am folosit randuri separate, setate la o latime de 100%. Fundalul randurilor si culoarea textului am stabilit-o ulterior. Pentru ca textul sa nu inceapa direct din marginea celulei tabelului, am folosit acolo unde a fost cazul, atributul CELLPADDING = '5', care introduce un spatiu de 5 pixeli in interiorul celulei. Pentru ca marginea tabelelor sa nu poata fi vizualizata, bordura am setat-o la valoarea zero folosind atributul BORDER = '0'. O machetare similara se poate realiza si cu ajutorul cadrelor. Dupa parerea mea, folosirea unui tabel este mult mai eficienta deoarece puteti avea mai mult control asupra elementelor paginii web.
Tabelele sunt folosite atat pentru o machetare eficienta cat si pentru a face mai atractive diversele elemente componente ale unei pagini web. Tabelele permit o impartire a paginii in sectiuni si o pozitionare precisa a textului sau imaginilor in interiorul paginii. Sa presupunem ca vreti sa realizati o pagina web care sa contina un meniu de navigare in partea stanga si continutul ( text, imagini,etc. ) in partea dreapta. Aceasta machetare se poate realiza si cu ajutorul cadrelor, dar folosirea unui tabel este mai indicata deoarece aveti mai mult control asupra elementelor. Astfel, puteti imparti pagina in doua coloane, cu meniul de navigare in stanga si continutul propriu-zis in dreapta, textul fiind aliniat la stanga. Puteti crea margini sau borduri de diferite dimensiuni si culori. De asemenea, se poate incapsula continutul in celulele tabelului pentru a permite alinierea textului si a limita lungimea liniilor.
Deoarece bordura tabelelor nu este totdeauna necesara si uneori poate avea un aspect neplacut, se poate renunta la ea prin folosirea atributului ' BORDER = 0 ' . Atunci cand folositi tabele, puteti sa setati o latime fixa, in pixeli, sau o latime relativa la dimensiunea ecranului, in procente. De exemplu, daca folositi atributul WIDTH=80% , continutul va fi afisat pe 80% din latimea ecranului. In acest caz, afisarea continutului se adapteaza mai usor la diferitele tipuri de monitoare sau rezolutii ale acestora.
Setarea latimii in procente se face mai ales la paginile unde exista mult text si unde nu este necesara o formatare precisa. Pe de alta parte, tabelele definite cu o latime fixa in pixeli vor ramane neschimbate. In acest caz, daca se foloseste o rezolutie marita va apare un spatiu alb, in afara tabelului care va da uneori o imagine neplacuta. In schimb, setarea unei latimi fixe va permite un control ridicat al printarii, realizand o tiparire fara intreruperi laterale ale paginii web respective.
Folosirea imaginilor in tabele
Cand intr-una din celulele tabelului aveti inserata o imagine, inscrierea dimensiunilor acesteia are o mare importanta ( atributele 'WIDTH' si ' HEIGHT' ). Aceasta deoarece exista posibilitatea ca browserul, dupa ce construieste structura tabelului, sa constate ca dimensiunile imaginii sunt prea mari pentru a completa o celula. In acest caz, browserul va reface pagina pe care o incarca, iar cititorul va vedea o pagina care apare si apoi dispare . Mai trebuie luat in considerare si faptul ca atunci cand exista un tabel intr-o pagina web, browserul asteapta sa incarce tot continutul tabelului si abia dupa aceea il afiseaza cititorului. Folosirea uneia sau mai multor imagini de dimensiuni mari intr-un tabel poate duce la cresterea exagerata a timpului de incarcare (uneori peste 1 minut).
De aceea, este recomandat sa puneti aceste imagini in afara tabelului principal sau in tabele separate, pentru ca browserul sa le incarce concomitent. Atunci cand proiectati o pagina web cu tabele, este bine sa evitati pe cat posibil folosirea de tabele imbricate ( un tabel in interiorul altuia ). In afara aspectului neatragator, pot apare si erori care sunt greu de depistat . Pentru a obtine o punere in pagina eficienta, incercati sa experimentati mai multe tipuri de tabele cu latimi, margini si borduri diferite. In final, alegeti solutia care ofera o flexibilitate maxima si creeaza efectul pe care l-ati dorit. Mai multe informatii interesante despre tabele puteti gasi vizitand urmatoarele situri :
https://www.webhelp.org/tables/
https://www.killersites.com/tutorial/
https://www.bagism.com/tablemaker/
https://www.pagetutor.com/pagetutor/tables/index.html
https://www.botany.hawaii.edu/tables/
https://www.december.com/html/demo/tablehi.html
https://www.pageresource.com/html/table3.htm
https://www.htmlgoodies.com/tutors/tbl.html
In final, ceea ce conteaza este mesajul pe care reusiti sa-l transmiteti. Acest lucru puteti sa-l faceti folosind o pagina simpla, cadre, tabele sau combinatii ale acestora. Important este sa realizati un sit web atragator, indiferent de modul de aranjare in pagina .
Cadre ( frames )
Cadrele va permit sa afisati doua sau mai multe pagini web, in acelasi timp, prin impartirea ecranului in mai multe sectiuni independente. Initial, cadrele au fost o inovatie a firmei Netscape. Pe parcurs, ele au fost folosite din ce in ce mai mult si in prezent sunt acceptate de majoritatea browserelor. Ele reprezinta o metoda controversata de machetare a unei pagini web. In randul webdesignerilor exista sustinatori si adversari ai folosirii cadrelor , ca o solutie eficienta de aranjare in pagina.De aceea, inainte de a va hotara, analizati modul cum doriti sa organizati si sa structurati paginile web. Folosirea cadrelor prezinta atat avantaje cat si dezavantaje.
Avantajele folosirii cadrelor :
Cadrele se pot folosi cu succes atunci cand continutul sitului se modifica frecvent. In acest caz, un cadru va fi folosit pentru meniul de navigare iar in celalalt cadru va apare continutul
propriu-zis. Cand doriti modificarea sau actualizarea continutului, este suficient sa modificati numai un fisier. Nu este nevoie sa schimbati fiecare pagina a sitului pentru a actualiza legaturile. Pentru cititori navigarea va fi usoara, deoarece ei vor sti in orice moment unde se afla legaturile si cum este structurat situl. Folosirea cadrelor permite utilizatorilor sa aleaga ce vor sa vada.
De exemplu, sa presupunem ca vreti sa prezentati un film in pagina web. In loc sa folositi o singura pagina, care se va incarca foarte greu din cauza dimensiunii mari a fisierului,
puteti sa folositi numai o legatura in pagina principala. Daca urmeaza aceasta legatura, vizitatorul va fi trimis intr-un alt cadru unde va putea urmari filmul, bineinteles dupa incarcarea fisierului respectiv .
Dezavantajele folosirii cadrelor :
Multi webmasteri nu recomanda folosirea cadrelor datorita urmatoarelor dezavantaje:
flexibilitate limitata si posibila confuzie a cititorilor
aparitia bordurilor care reduc spatiul afisat pe ecran
browserele mai vechi ( NN 1.0 , IE 1.0 , IE 2.0 ) nu recunosc siturile care contin cadre
timpul de incarcare al paginilor este mai mare
uneori se pot obtine rezultate neasteptate. Astfel, daca folositi butonul ' Back ' veti reveni in interiorul cadrului in loc sa vedeti pagina precedenta .
puteti intampina dificultati atunci cand vreti sa salvati sau sa tipariti o pagina care contine cadre.
Cand salvati o pagina web care v-a interesat aveti doua optiuni :
sa salvati toata pagina
sa salvati numai un anumit cadru folosind comanda 'Save frame as ' .
cand vreti sa faceti un semn de carte ( bookmark ) la o pagina care contine cadre , veti vedea ca veti face semn numai pe pagina index (cea care contine setarile- frameset si nu pe pagina cu continutul propriu-zis .
Daca totusi va hotarati sa realizati machetarea paginii cu ajutorul cadrelor, pentru evitarea acestor neplaceri, puteti sa realizati si o versiune alternativa a sitului, fara cadre. Pentru aceasta folositi marcajul NOFRAMES. Pe pagina principala veti pune o legatura explicita catre aceasta versiune. Alte informatii referitoare la folosirea cadrelor in machetarea paginilor web le puteti obtine daca accesati urmatoarele pagini web :
https://www.builder.cnet.com/Authoring/Frames/index.htm
https://www.pagetutor.com/pagetutor/frames/index.html
https://www.manda.com/frames/
https://www.home.netscape.com/assist/net_sites/frames.html
https://www.sharkysoft.com/tutorials/frames/
https://www.htmlhelp.com/design/frames/
Exemplu de sit web
In machetarea sitului web https://www.afaceri.net am optat pentru folosirea tabelelor.
Astfel, am impartit spatiul paginii in doua tabele principale, a caror latime am stabilit-o in procente (100%). Acest lucru conduce la vizualizarea paginii pe intreaga latime a ecranului, indiferent de rezolutia acestuia. In tabelul superior am inserat logo-ul, harta grafica si o imagine. Tabelul inferior, l-am impartit in alte doua tabele. In partea stanga a acestuia am inclus sistemul de navigare, chestionarul, lista cu produse oferite gratuit si contoarele de trafic ( Trafic si Sitemeter). Tabelul din partea dreapta l-am impartit, la randul lui, in alte trei randuri.
Randul de sus l-am folosit pentru inserarea continutului propriu-zis al paginii web, in randul din mijloc am introdus sagetile de navigare (inainte-inapoi) iar in ultimul rand am introdus legaturile text catre paginile de nivel 1 ale sitului si informatiile legate de copyright.
Pentru titluri si subtitluri am folosit randuri separate, setate la o latime de 100%. Fundalul randurilor si culoarea textului am stabilit-o ulterior. Pentru ca textul sa nu inceapa direct din marginea celulei tabelului, am folosit acolo unde a fost cazul, atributul CELLPADDING = '5', care introduce un spatiu de 5 pixeli in interiorul celulei. Pentru ca marginea tabelelor sa nu poata fi vizualizata, bordura am setat-o la valoarea zero folosind atributul BORDER = '0'. O machetare similara se poate realiza si cu ajutorul cadrelor. Dupa parerea mea, folosirea unui tabel este mult mai eficienta deoarece puteti avea mai mult control asupra elementelor paginii web.
|
Tagul pentru sfarsit de rand este <br>. Acest tag nu are
un altul pentru inchidere.
Exemplu fara tag de sfarsit de rand:
O cafea. Doua Cafele. Trei cafele.
Sursa:
O cafea.
Doua cafele.
Trei cafele.
Exemplu cu tag de sfarsit de rand:
O cafea.
Doua cafele.
Trei cafele.
Sursa:
O cafea.<br>
Doua cafele.<br>
Trei cafele.<br>
