Bazele html (partea a II-a)

Autor: andrewboy

Partea I : http://www.e-computer.ro/readarticle.php?article_id=4

(continuare tabele)

1.Exemple tabele

---------------------------------------------
Telefon gratis
<table border="5">
<tr>
<td>
telefon<br>mobil<br>gratuit gratuit gratuit gratuit
</td>
</tr>
</table>
Telefon gratis
---------------------------------------------
Secventa de cod de mai sus produce afisarea tabelului de mai jos, care contine o singura celula. Tabelul are acelasi fundal ca si pagina în care e inclus. Chenarul are grosimea de 5 pixeli. Textul este aliniat la stânga, aceasta fiind setarea implicită

Observaţie: Tabelul nostru apare după textul "Telefon gratis". Tabelul e afisat în mod automat pe rândul următor, în stânga paginii, fără să fie necesară prezenta unui <br>. Similar, textul ce urmează tabelului e afisat automat pe rândul următor.

Culoarea chenarului a fost stabilită de browser. Dacă dorim să stabilim noi culoarea chenarului, vom folosi atributul bordercolor. Scriind <table border="5" bordercolor="steelblue">

2. <Tbody>, <Caption>, <Colgroup>


Intre etichetele <th> si </th> este cuprins header-ul tabelului.

Exemplu:
---------------------------------------------------------------------------
<table border="5" bordercolor="blue" bgcolor="fuchsia">
<tr> <th colspan="2" axis="Elevi">Clasa a XI-a E</th></tr>
<tr><td>Fete</td><td>Baieti</td></tr>
<tr><td>15</td><td>14</td></tr>
<table>
----------------------------------------------------------------------------
Atributul axis stabileste ca numele header-ului este "Elevi", nume ce poate fi pronuntat de un sintetizator de voce pentru uzul unei persoane handicapate sau ocupate cu alte activitati. Verificati rezultatul.



<thead>

Grupeaza linii in header-ul unui tabel. E un container, asa ca se foloseste (dar nu obligatoriu) eticheta de inchidere </thead>.


<tbody>

Grupeaza linii in corpul unui tabel. E un container care are obligatoriu eticheta de inchidere.

<tfoot>

Grupeaza linii intr-un footer. E un container, ca si precedentele etichete.

<caption>

Acest tag produce afisarea unui text deasupra tabelului sau sub tabel.
Exemplu:

<caption>Productie</caption>
<caption align=bottom>Fructe</caption>
<tr><td>Mere</td><td>Pere</td></tr>
<tr><td>150 kg</td><td>140 kg</td></tr>
<table>

Aceasta secventa de cod va produce afisarea urmatorului tabel, in care sunt prezente doua elemente header. In IE 5.5, primul va aparea deasupra tabelului si al doilea (cel în a cărui eticheta am precizat: align=bottom) sub tabel. In Netscape Navigator 4.75, ambele elemente header vor aparea deasupra tabelului.

Evident, poate lipsi oricare dintre elementele caption.

<colgroup>
Intr-un tabel, coloanele pot avea latimi diferite, iar textul poate fi aliniat in mod diferit. Tag-ul discutat acum realizeaza asemenea performante.
Exemplu:
<colgroup width="20px" align=left span=3>
Primele 3 coloane au latimea de 20 pixeli si alinierea textului se face la stanga. Atributul span ia o valoare egala cu numarul coloanelor implicate.

Observatie: După cum ati observat, tabelele de mai sus au fost folosite pentru dispunerea datelor. Totusi, in pagina web, tabelul are un rol important: rolul de machetă a paginii. Mai exact, informatia oricărei pagini web e dispusă într-un tabel invizibil, pe mai multe coloane, tabel ce joacă rol de machetă. Puteti studia detaliat acest lucru intrând pe diverse pagini web si citindu-le sursele. Fac exceptie, de putin timp, paginile care folosesc div-uri pentru dispunerea informatii.

2. Frames

1.Avantaje/dezavantaje

Avantajele folosirii cadrelor:
o cadrele usurează navigarea prin pagini
o usurează operatiunile de actualizare si de întretinere a sitului
o încărcarea continutului e mai rapidă, deoarece partea fixă se încarcă doar la început, nu la fiecare click
o informatia importantă ( o reclamă sau adresă de contact etc.) poate fi pastrata tot timpul sub ochii vizitatorului
Dezavantaje:
* Paginile cu frames prezinta adesea aspecte diferite în navigatoare diferite si la rezolutii diferite
* Se reduce spatiul de afisare.
* Indexarea sitului de către unele (nu prea multe) motoare de căutare e anevoioasă. După indexare, surferii ce ajung în situl dvs folosind un motor de căutare vor ajunge, de fapt, într-unul din fisierele componente ale paginii principale, eveniment generator de disconfort pentru surfer, din multiple motive (design-ul, lipsa link-urilor etc). O solutie a fost furnizata de dl. Emanuel Baruch, cu urmatorul rezultat: "cand cineva deschide o astfel de pagina, browser-ul o va reincarca incluzand-o in frameset-ul din care trebuie sa faca parte. Acest script este o combinatie JavaScript-PHP, asadar va functiona doar pe serverele care ofera aceasta facilitate". Puteti gasi codul necesar in articolul "Seturi de cadre (frameset-uri) avansate cu Javascript si PHP" publicat de dl. Emanuel Baruch in revista "PC Magazine" nr. 1 din 2003, pag. 96 sau la adresa pcmagazine.ro/pcmag5-1/ipro3.shtml
* Bookmarking-ul (trecerea pagini la Favorites) e dificil.

2. <frameset>, <frame> ,<noframe>


<frameset>
Acest tag divide fereastra în subspaţii dreptunghiulare numite cadre (=frames). Tag-ul <frameset> urmează tag-ului </head> şi înlocuieşte tag-ul <body>. Atribute: 
- Atributul rows precizează spaţiul ce va fi ocupat de fiecare rând. Se exprimă în pixeli sau în procente. Varianta procentelor e cea recomandabilă, deoarece monitoarele au dimensiuni diferite. 
- Atributul cols precizează spaţiul ce va fi ocupat de fiecare coloană. Similar atributului rows.

<frame>
Acest tag defineşte fiecare cadru. Are următoarele atribute:
� Atributul name - precizează numele cadrului curent.
� Atributul src are ca valoare un URL. Acesta poate aparţine unui fişier HTML, unui fişier video, unei imagini ( .gif, .jpg etc ) sau unui alt obiect. Totuşi, ultimele 3 variante nu sunt recomandabile. Pentru ca fişierul video etc. să fie accesibil persoanelor cu handicap şi să fie mai bine indexat de motoarele de căutare, e de dorit să fie introdus într-un fişier html. Acesta va constitui conţinutul cadrului.
� Atributul longdesc are drept valoare URL-ul unde se află descrierea detaliată a conţinutului cadrului. Rar folosit.
� Atributul frameborder poate lua valoarea 1 (cea implicită) sau 0. Dacă luăm frameborder="0", cadrul nu va avea margine. In caz contrar, va avea.
� Atributul noresize nu ia valori. Prezenţa sa în cadrul tag-ului discutat nu e recomandabilă, deoarece face ca vizitatorul să nu-şi poată regla dimansiunile cadrelor după gust.
� Atributul scroll poate lua una dintre valorile: yes|no|auto. Folosindu-l, putem determina apariţia/dispariţia barei de scroll a cadrului.
� Atributele marginwidth, marginheight setează distanţa dintre text şi marginea cadrului.

<noframe>
Unele browsere nu suportă cadrele. Acestora li se adresează un mesaj cuprins între tag-urile <noframes> şi </noframes>. Mesajul e vizibil numai când cadrele nu sunt afişate. Totuşi, browserele moderne nu au această problemă.

3.Exemple de frame

Impărţirea pe verticală a unei pagini în două cadre numite stanga şi dreapta se face astfel:
<html>
<head><title>index.html</title></head>
<frameset cols="20%,*">
<frame name="stanga" src="sta.htm" mce_src="sta.htm" noresize scrolling='auto'>
<frame name="dreapta" src="dre.htm" mce_src="dre.htm" noresize scrolling='auto'>
</frameset>
</html>
� Tag-ul <frameset cols="20%,*"> precizează că pagina se împarte în două coloane. Prima coloană urmează să ocupe 20% din suprafaţa monitorului, iar a doua restul. In loc de procent, putem pune dimensiunea pe orizontală a ferestrei (în pixeli), dar acest lucru nu e recomandabil, deoarece pagina dvs. va fi vizualizată la rezoluţii diferite.
� Tag-ul următor se referă la fereastra care poartă numele sugestiv de "stanga" şi în care va fi afişat fişierul sta.htm. Această fereastră nu poate fi redimensionată, lucru stabilit prin atributul noresize. Dacă acesta lipseşte, fereastra poate fi redimensionată. Pentru bara de scroll, s-a preferat valoarea auto. Alte valori posibile sunt yes şi no.
� Tag-ul care urmează se referă la fereastra din dreapta, numită "dreapta". In această fereastră va fi încărcat fişierul dre.htm. Gândiţi-vă la ferestrele din componenţa paginii ca la două farfurii goale numite "stanga" şi "dreapta", în care urmează să se pună fişierul sta.htm, respectiv dre.htm.
� Executaţi click-dreapta pe suprafaţa ferestrei din stânga, apoi "View source". Veţi obţine astfel sursa fişierului sta.htm. Se observă că, în interiorul fiecărui link, există atributul target, căruia i s-a atribuit valoarea "dreapta". Aceasta indică faptul că fişierul-ţintă va fi încărcat în partea din dreapta a paginii, aşa cum e normal. Dacă acest atribut lipseşte, fişierul-ţintă va fi încărcat în fereastra-apelantă ("stanga"), ceea ce nu e de dorit.
Exemplul 2:

<html>
<head><title>index.html</title></head>
<frameset rows="10%,80%,*">
<frame name="sus" src="x.htm" mce_src="x.htm" noresize scrolling='no'>
<frame name="centru" src="y.htm" mce_src="y.htm" noresize scrolling='auto'>
<frame name="jos" src="z.htm" mce_src="z.htm" noresize scrolling='no'>
<noframes>
Despre cadre (frames) in HTML
</noframes>
</frameset>
</html>


Această secvenţă de cod împarte pagina în trei ferestre orizontale, numite "sus", "centru" si "jos". La încărcarea fişierului index.html, în aceste trei ferestre vor fi încărcate fişierele x,y şi z. Ferestrele de sus şi de jos nu vor avea bara de scroll, iar cea de la mijloc va avea numai dacă este cazul. Browserele care nu suportă cadre vor afişa doar:
Despre cadre (frames)in HTML
Exemplul 3:

<html>
<head><title>index.html</title></head>
<frameset rows="100,*,40">
<frame name="sus" src="a.htm" mce_src="a.htm" noresize scrolling='no'>
<frameset cols="50,*">
<frame name="stanga" src="b.htm" mce_src="b.htm" scrolling='no'>
<frame name="dreapta" src="c.htm" mce_src="c.htm" scrolling='auto'>
</frameset>
<frame name="jos" src="d.htm" mce_src="d.htm" noresize scrolling='no'>
</frameset>
</html>


� Fereastra de sus are dimensiunea de 100 pixeli şi se numeste "sus". In această fereastră, va fi afişat fişierul a.htm.
� Fereastra de jos are dimensiunea de 40 pixeli, se numeşte "jos" şi va conţine fişierul d.htm.
� Fereastra de la mijloc e împarţită în alte doua ferestre, care poartă numele de "stanga" şi "dreapta".
Prima va ocupa 50 de pixeli din dimensiunea pe orizontală a paginii, iar cealaltă restul; vor afişa conţinutul fişierelor c.htm şi d.htm. Nici o fereastră nu prezintă bara de scroll, cu excepţia ferestrei "dreapta".



4.<iframe>

Un cadru poate fi introdus în interiorul unei pagini obişnuite, folosind tag-ul <iframe>. Acest tag e suportat doar de Internet Explorer.
Exemplul 1:
<iframe src="pagina.html" mce_src="pagina.html" width="30%" height="140" align=center> </iframe>

Noua fereatră are înălţimea de 140 de pixeli şi va ocupa 30% din lăţimea elementului în care se află (în cazul nostru, o celulă a unui tabel invizibil). In interiorul ferestrei, va apărea conţinutul fişierului a.htm. Avantajul folosirii acestui tag e faptul că permite afişarea conţinutului unui fişier extern, dimensiunea în kB a paginii principale rămânând redusă

Exemplul 2:
<iframe src="pagina.html" mce_src="pagina.html" width="200" height="40" align=right frameborder="0" scrolling="auto" marginwidth="10" marginheight="20"> <!--Pentru browserele ce nu suportă tag-ul <iframe>:-->
Bine aţi venit în pagina mea !
Votaţi-ne în top10000.ro !
</iframe>
<!--Pentru browserele ce nu suportă tag-ul <iframe>:--> Bine ati venit în pagina mea !<br> Votati-ne în top10000.ro !

Atributele tag-ului <iframe>:
� Atributul src precizează adresa paginii ce va fi încărcată în fereastra astfel definită.
� Atributele width şi height definesc lărgimea şi înălţimea ferestrei. exprimate în pixeli. Atributul width se poate exprima şi în procente.
� Atributul name precizează numele ferestrei deschise astfel.
� Atributul longdesc ia o valoare care e URL-ul paginii unde găsiţi o descriere mai lungă a conţinutului ferestrei.
� Atributul frameborder poate lua două valori: 0 şi 1. Valoarea 1 e valoarea implicită; în acest caz, fereastra va avea margine.
� Atributul align poate lua una dintre valorile: top|middle|bottom|left|right. In acest fel, se stabileşte poziţia noii ferestre.
� Atributul scrolling poate lua una dintre valorile: yes|no|auto. Scriind scrolling=auto, fereastra va avea bara de scroll doar dacă va fi necesar.
� Atributele marginwidth şi marginheight iau valori numerice care exprimă distanţa (în pixeli) dintre textul din noua fereastră şi marginile acesteia.

Observaţii:
� O asemenea fereastră poate fi realizată şi folosind CSS. Diferente:
Din pacate nu stapânesc CSS, dar curând voi putea veni cu completări. :D 
� Tag-ul <iframe> are multe în comun cu tag-ul <object>. Acesta din urmă e însă suportat mai mult decât <iframe> de browsere şi e inclus şi în HTML 4.0 Strict.
� In fisierul afisat cu <iframe>, serverul-gazdă introduce bannere, ca si în pagina principală. De aceea, tag-ul <iframe> e recomandat numai în siturile cu webhosting-ul plătit.
�