Notiuni introductive HTML

Notiuni introductive HTML

1.1. Tabele si cadre

Daca se doreste existenta unor date adiacente într-o pagina de exemplu text pe mai multe coloane solutia optima o reprezinta tabelele.

1.1.Bazele formatarii tabelelor

Trebuie început prin specificarea parametrilor tabelului, apoi parametrii fiecarei linii ti fiecare celula trebuie înconjurata de marcaje <TD> </TD> date de tabel.

Consideram secventa de mai jos în care datele sunt plasate pe acelasi rând    delimitat de maarcajele <TD></TD>.

<B> Canale de televiziune uzuale </B>

<TABLE BORDER=1>

<TR>

<TD>PROTV</TD>

<TD>ANTENA1</TD>

<TD>PRIMA</TD>

<TD>ACASA</TD>

</TR>

</TABLE>

În secventa urmatoare aceleasi date sunt organizate sub forma unui element pe fiecare rând.

<B> Canale de televiziune uzuale </B>

<TABLE BORDER=1>

<TR>

<TD>PROTV</TD>

</TR>

<TR>

<TD>ANTENA1</TD>

</TR>

<TR>

<TD>PRIMA</TD>

</TR>

<TR>

<TD>ACASA</TD>

</TR>

</TABLE>

Fiecare dintre liniile de mai sus poate avea o aliniere specificata prin ALIGN= iar marcajul TABLE poate avea urmatoarele optiuni:

Controlul latimii tabelului se poate realiza cu WIDTH pentru specificare lungime exacta tabel pe ecran indiferent de continut respectiv CELLPADDING care indica spatiul în pixeli dintre marginea interioara a chenarului unei celule ti marerialul continut în celula sau CELLSPACING care se refera la latimea liniilor de caroiaj dintre celulele de date.

Ex. <B> Canale de televiziune uzuale </B>

<TABLE BORDER=1 WIDTH= >   

sau <TABLE BORDER=1 CELLPADDING=10>

<TR><TD>PROTV</TD></TR>

<TR><TD>ANTENA1</TD></TR>

<TR><TD>PRIMA</TD></TR>

<TR><TD>ACASA</TD></TR>

</TABLE>

n cadrul unui tabel se pot specifica antete de coloane prin intermediul marcajului TH care înlocuieste marcajul TD în definitia liniei. TH este aproape identic cu cu TD cu 2 exceptii si anume textul din cadrul unui marcaj TH este scris cu aldine si centrat orizontal într-o celula.

Se mai poate specifica si alinierea orizontala a celulelor de date cu optiunea ALIGNcare poate lua valorile- center, right. VALIGN poate permite specificarea alinierii pe verticala - top, bottom, middle. Liniile si coloanele se pot întinde pe mai multe unitati din tabel de exemplu specificând COLSPAN=2 pot extinde o noua celula de date pe 2 coloane.

Ex.

<TABLE BORDER=5 WIDTH= >   

<TR>   

<TD COLSPAN=2

ALIGN=Center><FONT SIZE=5>Film & muzica</FONT></TD></TR>

<TH>Filmul</TH><TH>Ziua</TH>

<TR ALIGN=CENTER><TD>Independence Day</TD><TD>Marti</TD></TR>

<TR ALIGN=CENTER><TD>Volcano</TD><TD>Marti</TD></TR>

</TABLE>

1.1.2.Formatarea avansata a tabelelor

Pentru crearea tabelelor exista si optiuni suplimentare. Una dintre cele mai importante este controlul culorilor din tabele, adica culoarea de fond a celulelor. Culorile din cadrul unei celule apar în cadrul marcajului <TD>.

Ex. <TD> BGCOLOR=red>Text pe fond rosu</TD>

Atributul COLSPAN a fost discutat mai sus, pentru întelegerea utilizarii ROWSPAN -extindere celula de date pe mai multe rânduri, se considera exemplul de mai jos în care în celula multilinie se include o imagine grafica.

Ex.

<TABLE BORDER=1 CELLPADDING= >

<TR><TD

BGCOLOR=blue rowspan='5><IMG' SRC= grafice/programe.gif"</TD>

<TR><TD>PROTV</TD></TR>

<TR><TD>ANTENA1</TD></TR>

<TR><TD>PRIMA</TD></TR>

<TR><TD>ACASA</TD></TR>

</TABLE>

Internet Explorer adauga marcajele BACKGROUND ce permite grafice de fond în interiorul celulelor din tabele, BORDERCOLOR ce permite controlul detaliat al culorii chenarului, ofera si posibilitatea de a defini cele doua culori utilizate pentru chenar prin BORDERCOLORBLACK si BORDERCOLORLIGHT, si specificarea unei imagini grafice de fond în cadrul celulelor individuale de date prin BACKGROUND=fisier_grafic.

Ex.

<TABLE BORDERCOLOR=blue BORDER=5 CELLPADDING=20>

<TR>

<TD BACKGROUND="fond.gif">

<FONT SIZE=5 COLOR=teal>Drumul e lung si pana ajung.</FONT></TD>

</TR>

</TABLE>

<HR>

<TABLE BORDERCOLORLIGHT=yelow BORDERCOLORDARK=red CELLPADDING=10 BORDER=10>

<TR><TD>

<FONT SIZE=4>Rock'n Roll</FONT></TD></TR>

</TABLE>

Exista doua atribute ce pot fi folosite pentru controlul precis al chenarului din jurul tabelelor - FRAME si al caroiajului dintre celulele de date - RULES. Valorile lor sunt prezentate în tabelul Rezumat 1.

1.1.3.Cadre - pagini în pagini

O notiune noua care face ca tabelele sa fie mai usor de înteles este cea de cadru. Practic cadrele raspund la întrebarea ce se întampla daca fiecare celula din tabel ar fi o pagina proprie Web deci în momentul în care avem pagini în cadrul paginilor.

Cadrul individual este specificat printr-un marcaj <FRAME> care la rîndul sau este inserat într-un specificator <FRAMESET> ce indica volumul de spatiu alocat fiecarui panou de informatie. În exemplul de mai jos se separa ecranul în doua sectiuni prima de 75 pixeli iar cealalta ocupând întreg ecranul.

EX.

<HTML>

<FRAMESET ROWS="75,*">

<FRAME SRC="frames/sus.html">

<FRAME SRC="frames/jos.html">

</FRAMESET>

</HTML>

unde

sus.html

jos.html

<BODY BGCOLOR=yellow>

<BODY BGCOLOR=blue TEXT=white>

<CENTER><h2> partea de sus !</h2>

<TABLE WIDTH=100% HEIGHT=100%>

</CENTER>

<TR><TD ALIGN=center VALIGN=center>

</BODY><h2>partea de jos !!</h2>

</TD></TR>

</TABLE>

</BODY>

Observati artificiul din pagina jos.html în care se specifica un tabel care are 100% din înatime si latime ecran dar informatia trebuie centrata orizontal si vertical deci cea ce trebuie afisat va apare în centul ecranului indiferent cât de mare este acesta.

Marcajul <FRAMESET> creaza un grup de cadre în care se va împarti o pagina Web. Se pot utiliza optiunile ROWS pentru împartire în panouri orizontale si COLS pentru specificare panouri verticale. Puteti utiliza în cadrul atributelor trei valori diferite - numar care specifica dimensiunea dorita în pixeli, asterisc pentu specificare rest spatiu si n% pentru specificare un procent din latime.

Ex.   

<HTML>

<FRAMESET COLS=" ,*">

<FRAMESET ROWS="30% %">

<FRAME SRC="frames/sus.html">

<FRAME SRC="frames/jos.html">

</FRAMESET>

<FRAMESET ROWS="33% %,*">

<FRAME SRC="frames/img1.html">

<FRAME SRC="frames/img2.html">

<FRAME SRC="frames/img3.html">

</FRAMESET>

</FRAMESET>

</HTML>   

Exista câteva atribute care pot fi specificate la definirea cadrelor din care cel mai important este NAME=, prin care se atribuie câte un    nume unic fiecarui cadru care poate fi utilizat ca mijloc de a controla care dintre ferestre sa fie afectata de anumite actiuni.

EX.

<HTML>

<FRAMESET COLS="20%,*">

<FRAME SRC="frames/animale.html">

<FRAME SRC="frames/implicit.html" NAME=main>

</FRAMESET>

</HTML>

unde implict.html are forma

<BODY BGCOLOR=white>

<IMG SRC="animal.gif">

</BODY>

iar animale.html este

<BODY BGCOLOR=yellow>

<CENTER>

<FONT SIZE=6 COLOR=blue>

<B>Alege un animal</B>

</FONT>

<P>

<FONT SIZE=5>

<A HREF="caine.html" target=main> Caine</A>

<P>

<A HREF="pisica.html" target=main> Pisica</A>

<P>

<A HREF="pasare.html" target=main> Pasare</A>

<P>

<A HREF="implicit.html">[home]</A>

</FONT>

</CENTER>

</BODY>

Observati efectul clic buton home si respectiv buton Back program de navigare pentru determinare utilitate atribut Target !!

Marcajul FRAME are doua atribute importante. Primul permite specificarea latimii unei margini a cadrului - FRAMEBORDER cu un atribut în pixeli. Al doilea SCROLLING permite fortarea unei bare de derulare sau eliminarea acesteia.

Ex.    

<HTML>

<FRAMESET COLS="20%,*">

<FRAME SRC="animale.html" FRAMEBORDER=5 SCROLLING=on>

<FRAME SRC="implicit.html" name=main>

</FRAMESET>

</HTML>

Pentru programele de navigare care nu recunosc cadrele, pentru a ocoli problema unor pagini vide în cadrul paginii principale sa includeti o sectiune care contine optiunea NOFRAMES. Daca programul de navigare stie interpreta cadrele va ignora ce este in portiunea respectiva daca nu afiseaza materialul din zona NOFRAMES.

EX.    

<HTML>

<FRAMESET COLS="20%,*">

<FRAME SRC="FRAMES/animale.html" FRAMEBORDER=5 SCROLLING=on>

<FRAME SRC="FRAMES/implicit.html" name=main>

</FRAMESET>

<NOFRAMES>

<BODY>

<CENTER>

<h2>Ne pare rau locatia e proiectata pentru un program de navigare cu

cadre </h2> incercati sa va actualizati soft/ul!

</CENTER>

</BODY>

</NOFRAMES>

</HTML>

Pentru mai multe detalii despre cadre - Microsoft ofera informatii despre la adresa https:// www.microsoft.com/workshop/author/newhtml/ iar lectiile Netscape despre cadre le puteti gasi la adresa https://www.netscape.com/assist/net_sites/frames.html .

Rezumat 1

1.1.4.Tabele avansate

Exista si propietati suplimentare ale tabelelor care pot fi utilizate. Consideram exemplul :

<HTML>

<BODY>

De-a lungul timpului, calculatoarele s-au dezvoltat si au ajuns din ce in ce mai sofisticate. Incercam sa prezentam mai jos cateva dintre procesoarele calculatoarele care se utilizeaza in prezent si preturile acestora.

<TABLE BORDER=1 WIDTH=75% ALIGN=left HSPACE=10 VSPACE=10>

<TR BGCOLOR=#cccccc>

<TH>Pret</TH><TH>Procesor</TH></TR>

<TR ALIGN=center>

<TD>$200</TD><TD>Pentium 1</TD>

</TR><TR ALIGN=center>

<TD>$300</TD><TD>Pentium 2</TD>

</TR><TR ALIGN=center>

<TD>$400</TD><TD>Pentium 3</TD>

</TR><TR ALIGN=center>

<TD>$500</TD><TD>Pentium 4</TD>

</TR>

<CAPTION ALIGN=bottom>Oare sunt corecte aceste preturi?</CAPTION>

</TABLE>

<P>

<B>Evident ca nu !! </B>

<P>

Preturile din tabel au fost introduse doar pentru a putea evidentia modul de implementare al unui tabel cu atribute suplimentare. Puteti sa va informati despre preturi daca luati date direct de la producatori.

</BODY>

</HTML>

Se utilizeaza urmatoarele marcaje - <TH> marcaj de antet de tabel, <TR> în cadrul caruia s-a utilizat BGCOLOR pentru a specifica ca prima linie a tabelului sa fie prezentata pe un fond gri. De asemenea textul paginii curge în jurul tabelului datorita atributului ALIGN=left. Atributele HSPACE si VSPACE permit specificarea pixelilor suplimentari pentu chenar pentru a mari spatiul dintre tabel si textul ânconjurator.atît pe verticala cât si pe orizontala. Un alt element este <CAPTION> care permite specificarea unui text explicativ pozitionat fata de tabel unde dorim prin atribut ALIGN ce poate lua valorile bottom(parte inferioara), left(partea stânga), right(partea dreapta), top(parte superioara).

Putem sa luam pentru exemplificarea propietatilor suplimentare consideram urmatorul exemplu.

<TABLE BORDER=1 CELLSPACING=o CELLPADDING=3 ALIGN=center HEIGHT=300>

<TR><TD COLSPAN=3 BGCOLOR=#999999 ALIGN=center>

<FONT size=+2><B>Locuri unde se poate manca intr-o casa</TD></TR>

<TR BGCOLOR=#cccccc><TH>Loc</TH>

<TD rowspan='6 WIDTH=1' BGCOLOR=black>$nbsp</TD>

<TH>Comentariu</TH></TR>

<TR><TD>Sufragerie</TD>

<TD VALIGN=top>Ce omenesc.</TD></TR>

<TR><TD>Salon</TD>

<TD VALIGN=baseline>Neasteptat, dar greu de curatat</TD></TR>

<TR><TD>Camera<br>de<br>sport</TD>

<TD>Daca nu te deranjeaza sa-ti curga transpiratia pe mancare</TD></TR>

<TR><TD>Bucatarie</TD>

<TD>Excelenta pentru mancat rapid</TD></TR>

<TR><TD>Birou</TD><TD NOWRAP>De acord este un lucru obisnuit al anilor '90 cand ajungi sa mananci in timp ce lucrezi.. </TD></TR>

</TABLE>

Elementul ROWSPAN poate fi utilizat pentru a obtine bare verticale în cadrul tabelului. Utilizând CELLPADDING înseamna ca marimea barei verticale este de 2 ori aceasta valoare (definind fiecare parte), plus 1 pixel pentru latimea în sine specificata. S-a utilizat &nbsp marcajul pentru spatiu pentru ca celula sa dispuna de un continut. Alinierea verticala s-a realizat Top pentru prima celula, Baseline pentru a doua si Center pentru restul. Atributul Nowrap forteaza programul de navigare sa nu desparta textul de pe linii în nici un fel.

Specificare numarului exact si al dimensiunii fiecarei tabele din pagina se face prin combinatii de marcaje <COLGROUP> si <COL> din carul marcajului <TABLE>. De ce trebuie specificat numarul de coloane- deoarece programul de navigare nu resa prima linie a tabelului pâna nu receptioneaza fiecare element de informatie. Daca tabelul e mic o întâryiere de o secunda doua nu este sesizabila, daca tabelele sunt mari se pot utiliza marcajele de mai sus.

<TABLE BORDER=1>

<COLGROUP>

<COL WIDTH=3"*">

<COL WIDTH=3"*">

<COL><COL WIDTH=15%><COL WIDTH=150>

</COLGROUP>

<TR><TD>The</TD><TD>rain</TD><TD>in</TD><TD>SPAIN</TD></TR>

<TR><TD>falls</TD><TD>mainly</TD><TD>on</TD><TD>the</TD><TD>plain</TD></TR>

<TR><TD>and where is that plain?</TD><TD>in Spain! In Spain!</TD>

</TR>

</TABLE>

Marcajul COL este util si in specificarea latimii unei coloane. De asemenea se pot specifica si alte atribute pentru o anumita coloana ca in exmplul de mai jos.

<TABLE BORDER=1>

<COLGROUP>

<COL ALIGN=right><COL ALIGN=char CHAR=":">

<THEAD>

<TR><TH>Actiune<TH>Ora

<TBODY>

<TR><TD>Trezire<TD>8:30 am

<TR><TD>Merg cu masina la servici<TD>9:00 am

<TR><TD>Masa de pranz<TD>12:00

<TR><TD>Ma intorc acasa<TD>6:00 pm

</TABLE>

În exemplul de mai sus s-au omis marcajele de terminare dar au fost adaugate THEAD si TBODY. Optiunea ALIGN specifica alinierea la un caracter, cel implicit considerat este punctul zecimal.

1.1.5.Cadre avansate

Pentru eliminarea chenarului din jurul fiecarui cadru implementate în cadrul aceleiasi ferestre pentru Netscape Navigator se adauga atributul BORDER=0 în cadrul marcajului <FRAMESET> iar Internet Ex plorer în cadrul aceluiasi marcaj se vor utiliza atributele FRAMEBORDER=0 si FRAMESPACING=0. Daca doriti sa faceti experimente cu rezultate interesante încercati sa utilizati cele 2 atribute separat.

Daca se doreste deplasarea continutului paginii fata de marginile cadrului se vor utiliza combinatii ale atributelelor MARGINHEIGHT si MARGINWIDTH care specifica în pixeli sau procentual cât de departe de marginea superioara si cea din stânga este pozitionat continutul.

Ex.

<FRAMESET COLS="40%, 60%">

<FRAME SRC="continut1.html">

<FRAME SRC="continut2.html" MARGINHEIGHT=50 MARGINWIDTH=100>

</FRAMESET>

O alta optiune utila ce poat fi utilizata este atributul NORESIZE pe care îl puteti specifica în cazul în care nu doriti ca utilizatorii sa nu poata redimensiona cadrul. Daca îl combinati cu atributul SCROLLING=no se poate elimina o parte a unei imagini sau pagini. Cele doua atribute de mai sus se vor specifica în cadrul marcajului <FRAME>.

Pentru indicarea evenimentelor dintr-un cadru utiliyând marcajul <FRAME> prin atributul NAME= si specificare nume cadru sau folosind atribut TARGET= ca parte a lui HREF pentru a determinaca evenimentele sa afecteze cadrul specificat nu cel în care lucrati. Pentru atributul TARGET se pot utiliza valorile din tabelul de mai jos.

O fereastra Web cu cadre si un buton pe care scrie no frames, codul sau corespunzator paote fi urmatorul:

<A HREF="noframes.html" TRAGET=_top>no frames</A>

1.1.6.Cadre interne

Internet Explorer utilizeaza notiunea de cadru intern ca fiind o fereastra de cadre complet înconjurata de o fereastra exterioara. Pentru specificarea lui se utilizeaza marcajul <IFRAME> care este asemanator cu <FRAME>.

Ex.

<IFRAME SRC="info.html" HEIGHT=40% WIDTH=50%>

Optiunile marcajului <IFRAME> ce se utilizeaza sunt FRAMEBORDER cu valorile 0 sau 1 în functie de dorinta de a avea sau nu chenar, MARGINWIDTH si MARGINHEIGHT ce asigura controlul fin al spatierii dintre marginile cadrului intern si continutul acestuia, SCROLLING. O alta optiune pe careo puteti utiliza este faptul ca puteti atribui cadrului intern un nume prin NAME si puteti specifica legaturi catre acesta cu ajutorul atributului TARGET.

Rezumat 1 bis