(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 e aliniat la stanga, aceasta fiind setarea implicita
Observatie: 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. Aceasta secventa de cod va produce afisarea urmatorului tabel:
Clase a XI-a E
Fete Baieti
15 14
<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.
Fructe 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" noresize scrolling='auto'>
<frame name="dreapta" src="dre.htm" noresize scrolling='auto'>
</frameset>
</html>
• Tag-ul <frameset cols="20%,*"> precizeazǎ cǎ pagina se împarte în doua 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" noresize scrolling='no'>
<frame name="centru" src="y.htm" noresize scrolling='auto'>
<frame name="jos" 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" noresize scrolling='no'>
<frameset cols="50,*">
<frame name="stanga" src="b.htm" scrolling='no'>
<frame name="dreapta" src="c.htm" scrolling='auto'>
</frameset>
<frame name="jos" 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" width="30%" height="40" 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" 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 top100.ro !
</iframe>
<!--Pentru browserele ce nu suportǎ tag-ul <iframe>:--> Bine ati venit în pagina mea !<br> Votati-ne în top100.ro !
Atributele tag-ului <iframe>:
• Atributul src precizeazǎ adresa paginii ce va fi încǎrcatǎ î 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 ma pricep la CSS dar cand voi invata voi veni cu completari!!
• 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ã. Practic, în pagina pe care o aveti sub ochi, se aflã 3 rânduri de bannere. De aceea, tag-ul <iframe> e recomandat numai în siturile cu webhosting-ul plãtit.
Acasa 
