Sunteți pe pagina 1din 25

Ce este HTML?

HTML este un limbaj pentru a descrie paginile web. HTML vine de la Hyper Text Markup Language. HTML nu este un limbaj de programare, este un limbaj de marcare. Un limbaj de markup este un set de tag-uri de marcare. HTML utilizeaz marcatori de marcare pentru a descrie pagini web Tag-uri HTML HTML tag-uri de marcare sunt de obicei numite tag-uri HTML: tag-uri HTML sunt cuvinte cheie nconjurate de paranteze unghiulare ca <html>; tag-uri HTML sunt n mod normal n perechi ca <b> i </ b>; tag-ul primul dintr-o pereche este tagul de nceput, tag-ul al doilea este tag-ul final; de nceput i de sfrit sunt numite tag-uri, de asemenea, de deschidere i nchidere tag-uri n limbajul de marcare a hipertextului totul se rezum la structur. Un limbaj de marcare este folosit pentru a descrie care este rolul fiecrei pri din document n raport cu celelalte. Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot conine text, grafic sau alte elemente. Tag-urile sunt de forma pereche nceput-sfrit:

<tag>.............................</tag>
coninut arbitrar tagul de nceput Scrierea perechilor de legturi:

tagul de sfrit care are caracterul slash (/ )

<tag1> <tag2> CORECT </tag2> </tag1>

<tag1> <tag2> INCORECT </tag1> </tag2>

Tag-uri din cadrul documentului HTML


Fiecare document HTML, nc de la creare are dou pri principale: un antet i un corp. Chiar dac nu sunt special delimitate, HTML presupune existena lor. HTML ofer de asemenea ansa de a aduga i alte componente funcionale paginii, sub forma foilor de stil, scripturilor i seturilor de cadre. Dei fac parte din definirea unui document HTML, dou etichete exist n afara structurii documentului: doctype i html. Prima identific versiunea de HTML folosit pentru pagina respectiv i regulile pe care acestea le respect. A doua etichet identific un limbaj global i

direcia textului pentru documentul respectiv, n plus marcheaz nceputul i sfritul coninutului HTML. Documentul HTML se indic prin tag-ul HTML <HTML>.........................</HTML> Vom prezenta numai o parte din tag-urile HTML, care sunt importante in realizarea unui design atragator. Se considera ca limbajul HTML este stapinit de catre student, avindu-se in vedere ca au absolvit cursul de Tehnici multimedia.

Culori, fonturi, margini


O pagin Web poate fi setat prin: - alegerea culorii de fond - alegerea culorii textului i - alegerea dimensiunilor paginii Documente HTML = Pagini Web Documentele HTML descrie paginile web. Documentele HTML contin tag-uri HTML i text simplu. Documentele HTML sunt, de asemenea, numite pagini web. Scopul unui browser web (cum ar fi Internet Explorer sau Firefox) este de a citi documente HTML i a le afia n paginile web. Browser-ul nu se afieaz etichetele HTML, dar folosete taguri pentru a interpreta coninutul paginii:

Exemplu: Textul ntre <html> i </html> descrie pe pagina web. Textul ntre <body> i </body> este coninutul paginii vizibile. Textul dintre <h1> i </h1> este afiat ca o rubric. Textul ntre <p> i </p> este afiat ca un paragraf Editare HTML n acest tutorial vom folosi un editor de text simplu (ca Notepad) pentru a edita HTML. Credem ca aceasta este cel mai bun mod de a nva HTML. Cu toate acestea, dezvolttorii web profesionali prefer adesea editoare HTML cum ar fi FrontPage sau Dreamweaver, n loc de a scrie text simplu.

HTM sau. HTML. Care este corect? Cnd salvai un fiier HTML, putei utiliza fie. htm sau extensia html. Noi folosim. Htm n exemplele noastre. Este un obicei din trecut, atunci cnd software-ul nu permitea scrierea doar a trei caractere pentru extensiile de fiiere. Cu software-ul nou este perfect sigur de utilizat i HTML. Atributele n HTML Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tag-ului respectiv. Pentru a intelege mai bine notiunea de atribut sa vedem cateva exemple.

Culoarea de fond
Culoarea se obtine din amestecul a celor trei culori fundamentale: rou, verde i albastru. Culoarea de fond a unei pagini Web se specific utilizand : nume de culoare. Astfel sunt disponibile cel puin 16 nume de culori, astfel avem urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy, olive, purple, silver, teal, white i yellow. secventa hexazecimala #rrggbb unde r,g sau b sunt cifre hexazecimale i pot lua valorile din multime {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F};astfel se pot defini 65536 de culori. functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale {0,1,2255}

Culoare pentru tag-ul body


Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichete <body>. Sintaxa: <body bgcolor = culoare>, unde culoare se stabilete dup modelul precizat mai sus. Exemplu a unei pagini Web cu fondul de culoare cyan:

Unul dintre lucrurile simple pe care le putei face astfel nct pagina dumneavoastr Web s arate mai elevat este s-i dai un titlu adecvat, cu ajutorul controlului <TITLE>. Titlul apare de obicei pe bara de sus a ferestrei afiate pe calculatorul utilizatorului. Marcajul <TITLE> v permite s definii exact titlul dorit al documentului. Este un marcaj pereche i apare n cadrul blocului de informaii <HEAD></HEAD> conform exemplului de mai jos. <HEAD> <TITLE>Prima pagina</TITLE> </HEAD> n exemplu de mai jos este afiat titlul pagini i modul n care este vizualizat linia orizontal. Un control foarte bun pentru organizarea vizual a documentului este marcajul de rigl orizontal: <HR>. Plasat oriunde ntr-un document Web, acest marcaj produce o linie subire orizontal afiat pe ntreaga lime a paginii.

Putei utiliza rigla orizontal de mai multe ori ntr-un document Web, ca i orice alt element de marcare sau de proiectare. Utilizat judicios. Marcajul <HR> este extreme de util pentru crearea paginilor. Definirea subtitlului Fiecare nivel de subtitlu are un control de deschidere i unul de nchidere. Marcajul pentru nivelul cel mai de sus este <H1>; cel mai de jos (pentru cea mai redus i mai puin important seciune) este <H6>.

Definirea paragrafului Cele mai importante i mai folosite sunt marcajele care specific faptul c dorii trecerea la un paragraf nou sau linie nou. Exist diverse variante ale acestor controale, dar putei crea documente Web lizibile i utile utiliznd doar cele dou marcaje <P> i <BR>. Pentru a specifica trecerea la un paragraf nou, utilizai controlul <P>.

Stiluri de text Prin stiluri de text nelegem specificarea caracterelor ngroate, italice i a modificrilor care pot fi fcute asupra textului. Comenzile de formatare din HTML se pot utiliza oriunde, dar o strategie mai bun este s le utilizai acolo unde sunt cele mai adecvate. Multe pagini Web tind deja s fie prea ncrcate, iar utilizarea n exces a caracterelor italice i ngroate face ca diversitatea s fie i mai neplcut. Formatarea ngroat i cea pentru scriere nclinat necesit marcaje HTML pereche: Marcajul de formatare italic nclinat este <I>, cu marcajul pereche</I> Marcajul de formatare ngroat este <B>, cu marcajul pereche</B> <html> <body>

<p><b>Acest text este ingrosat</b></p> <p><strong>Acest text este scris cu caractere puternice</strong></p> <p><big>Acest text este mare</big></p> <p><i>Acest text este inclinat</i></p> <p><small>Acesta este mic</small></p> <p>Textul este<sub> indice</sub> si <sup>exponent</sup></p> </body> </html> Codul HTML de mai sus va fi vizualizat n felul urmtor:

Utilizarea dimensiunilor, culorilor i a corpurilor de liter Toate modificrile caracteristicilor fontului se fac prin diverse variante ale marcajului <FONT>. Marcajele HTML pot avea atribute specifice date prin perechi de forma nume = valoare. <font size=7> este scris cu cele mai mari caractere </font> Fontul implicit este SIZE=3 pentru majoritatea programelor de navigare. Modificrile relative nu pot reduce fontul sub SIZE=1 sau peste SIZE=7. Fontul poate fi specificat i n mod absolut.

<font size=+1> este scris cu cele mai mari caractere </font> Acest cod HTML va mari fontul cu o unitate fa de cel precedent. (dac nu a fost definit fontul are valoarea SIZE=3 iar prin utilizarea comenzii FONT SIZE=+1 fontul va avea valoarea SIZE=4) n mod similar se poate specifica o culoare pentru o poriune de text, prin folosirea unui alt atribut al marcajul <FONT>. Numele este color iar secvena de utilizare este: <FONT COLOR=BLUE> scrie cu culoarea albastra</FONT>. Marcajele HTML care au atribute, au o proprietate util a limbajului de marcare i anume este posibil specificarea mai multor atributen acela marcaj. <font size=7 color=blue> este scris cu cele mai mari caractere si colorat</font> Alt atribut al marcajului <FONT>este specificarea FACE a unui corp de liter. La acest atribut trebuie specificat numele exact al fontului. <font face=ARIAL> este scris cu caractere diferite</font> sau <font size=7 color=blue face=Arial> este scris cu cele mai mari caractere si colorat</font> <html> <head> <title>Formatarea</title> </head> <body> <font size=7> Acesta este un text</font> <p> <font size=+1> Acesta este un text cu caractere mai mari</font> decat cele implicite <p><font size=6 color=blue>Acesta este un text</font> <p><font face="VERDANA"> Acesta este un text</font> <p><font size=5 color=blue face="MONOTYPE CORSIVA">Acesta este un text</font> </body> </html>

Liste i caractere speciale Listele cel mai des utilizate sunt listele marcate numite i liste neordonate. Listele neordonate ncep cu <UL> i se ncheie cu </UL>, iar fiecare element al listei este definit prin controlul <LI>.
<ul> <li>Cafea</li> <li>Lapte</li> </ul>

Pentru liste ordonate se aplica urmtorul exemplu:


<ol> <li>Coffee</li> <li>Milk</li> </ol>

Caractere speciale Caracterele speciale i diacriticele sunt sunt entiti care nu sunt incluse ntre paranteze unghiulare (<>) ele ncep ntotdeauna cu (&) i se tremin cu (;). Iat n continuare codurile HTML pentru cele mai folosite caractere si simboluri, care nu se gsesc pe tastatura calculatorului: Simbol Cod HTML Numar &#160; &#162; &#163; &#169; &#171; &#174; &#176; &#177; &#178; &#179; &#181; &#182; &#185; &#187; &#188; &#189;

Nume &nbsp; &cent; &pound; &copy; &laquo; &reg; &deg; &plusmn; &sup2; &sup3; &micro; &para; &sup1; &raquo; &frac14; &frac12;

&#190; &#194; &#206; &#215; &#216; &#226; &#238; &#247; &#248; &#350; &#351; &#354; &#355; &#8364;

&frac34; &Acirc; &Icirc; &times; &Oslash; &acirc; &icirc; &divide; &oslash;

&euro;

Acum dup ce am vzut codurile pentru diverse caractere pe care le vom folosi n cadrul paginilor noastre web, s vedem cum arat codul paginii noastre de la nceput, dac textul va fi scris cu diacritice: <HTML> <HEAD> <TITLE>Prima mea pagina web</TITLE> </HEAD> <BODY> Bine ai venit!<BR> Vom &#238nv&#259&#355;a &#238mpreun&#259 limbajul HTML. Aceasta este prima mea pagin&#259 web! </BODY> </HTML>

Referine ctre alte pagini Web Marcajul HTML principal pentru referine externe este <A>, marcajul ancor. Acesta trebuie s conin atribute. Fr atribute, marcajul <A> nu are sens i nu afecteaz formatarea informaiei. Urmtorul exemplu va avea efect ca afiare fr formatarea textului: Acum putei vizita <A> Casa Alba</A> on line! Pentru ca aceast legtur s devin activ, adic s comande programului de navigare s execute ceva, trebuie s specificai un atribut de referin hipertext: HREF="valoare".

Definirea intelor ntr-un document Web Cel mai mare avantaj al acestor atribute din marcajele de formatare este c putei asigura o excelent consisten a interfeei i a prezentrii informaiei. De exemplu, legturile din pagina s conduc ctre alte pagini Web, alte legturi l conduc pe aceeai pagin i restul legturilor n conduc spre documente de pe propriul server. Toate legturile vor avea aceeai form (vor avea culoarea albastr i vor fi subliniate) i aceeai funcie. O asemenea abordare a proiectrii documentelor Web conduce la pagini uor de parcurs. Uneori este imposibil ca un document s nu ocupe mai multe ecrane. Una dintre problemele pe care proiectanii de pagini Web trebuie s le rezolve este si dea seama cnd anume este optim plasarea unui document ntr-un fiier HTML unic i cnd este optim organizarea sa ca un set de fiiere. Regula este separarea paginilor prin puncte logice de salt i minimizarea timpului de ncrcare pentru cititori. intele salturilor interne din documente Web sunt cunoscute sub numele de ancore cu nume. Marcajul HTML pentru un punct-ancor este o variant a marcajului <A>: <A name=valoare>. Valoarea poate fi orice secven de caractere. Corespondena unei ancore HTML este marcajul de formatare care definete saltul sau legtura activ din cadrul documentului. Aceasta este o variant a marcajului <A>, atributul necesar este o alt referin hipertext de tip HREF, URL-ul fiind nlocuit de data aceasta cu numele ancorei, prefaat de sinbolul diez (#). Dac ancora la care dorii s v conectai este specificat prin <a name=capitolul 1>, saltul n pagin ar trebui specificat prin <a href=#capitolul 1>capitolul 1</a>. <TITLE>Prima mea pagina web</TITLE> </HEAD> <BODY> <center> <H1>Referinte interne</H1>

<font size=2> <a href=#cap1>Capitolul 1 </a> | <a href=#cap2>Capitolul 2 </a> | <a href=#cap3>Capitolul 3 </a> | <a href=#cap4>Capitolul 4</a> </font> </center> <br> <blockquote> <DL> <a name="cap1">Capitolul 1:</a> <DD>Se descrie informatia din capitolul 1.</DL> <br> <DL> <a name="cap2">Capitolul 2:</a> <DD>Se descrie informatia din capitolul 2.</DL> <br> <DL> <a name="cap3">Capitolul 3:</a> <DD>Se descrie informatia din capitolul 3.</DL> <br> <DL> <a name="cap4">Capitolul 4:</a> <DD>Se descrie informatia din capitolul 4.</DL> <br> </blockquote> </BODY> </HTML>

Salturi n cadrul listelor organizate


Ancorele i punctele de salt sunt folosite frecvent i pentru a-i ajuta pe cititori s navigheze n liste de dimensiuni mari, cu informaii sortate alfabetic. S considerm urmtoarea redactare simpl a unei agende telefonice: <HTML> <HEAD> <TITLE>Carte de telefoane</TITLE> </HEAD> <BODY> <H1>Carte de telefoane</H1> <br> Ordonarea: <A HREF="#a-c">[A-C]</A> <A HREF="#d-h">[D-H]</A> <A HREF="#i-l">[I-L]</A> <A HREF="#m-n">[M-N]</A> <A HREF="#o-s">[0-S]</A> <A HREF="#t-z">[T-Z]</A><BR> <H2><A NAME="a-c">A-C</A></H2> Benson, George (07220...)<BR> Coleman, Ornette (07660...)<BR> Coltrane, John (07400...) <H2><A NAME="d-h">D-H</A></H2> Dorsey, Tom (07220...)<BR> Eilington, Duke (07660...)<BR> Getz, Stan (07660...)<BR> <H2><A NAME="i-l">I-L</A></H2> Jackson,.Milt (07400...)<BR> Laffite, Guy (07220...) <BR> <H2><A NAME="m-n">M-N</A></H2> Monk, Thelonious (07400...)<BR> Noorie, Jitnmy (07220...)<BR> <H2><A NAME="o-s">0-S</A></H2> Parker, Charlie (07660...)<BR> Peterson, Oscar (07400...)<BR> Reinhardt, Django (07220...)<BR> <H2><A NAME="t-z">T-Z</A></H2> Taylor, Billy (07400...)<BR> Tyner, McCoy (07220...)<BR> Waller, Fats (07660...)<BR> </body> </html>

Referin pentru inserarea de imagini


nainte de a trece mai departe la marcajul HTML n sine, este important s acordm puin timp formatelor grafice acceptabile, aceasta deoarece exist sute de formate diferite, dintre care numai dou sunt larg nelese de software-ul de navigare Web. Cele dou formate permise de HTML sunt: GIF: Graphics Interchange Format introdus de Compuserve JPEG: formatul introdus de Joint Photographic Expert Group Comparaia performanelor formatelelor GIF i JPEG const n a aprecia subtilitile acestora. Imaginile GIF pot utiliza doar 256 de culori, pe cnd JPEG permite milioane de culori distincte ntr-o imagine (dei afiarea lor corect depinde de tipul de display pe care utilizatorul l are n sistemul su de calcul). Ambele formate grafice comprim imaginile pentru a reduce dimensiunea fiierelor dar, deoarece comprimarea se face n mod diferit, unele imagini vor avea dimensiuni mult mai mici ntr-un format dect n cellalt. Motivul principal pentru care formatul de imagine GIF este att de atractiv pentru proiectanii de Web nu este paleta mic de culori, ci faptul c putei reduce paleta pn la minimul necesar pentru o imagine specific, ceea ce conduce la o scdere dramatic a dimensiunii fiierului. Imaginile grafice sunt construite din pixeli: puncte distincte de informaie din imagine. n cazul unei imagini GIF, fiecare pixel poate avea una din cele maxim 256 de culori distincte, dar ce se ntmpl dac imaginea utilizeaz doar dou culori n loc de 256? Poate fi o sigl a unei companii sau ceva similar. n acest caz, putei reduce destul de mult dimensiunea imaginii GIF: fiecare pixel necesit un singur bit de informaie (un

octet are 8 bii), comparativ cu 8 bii de informaie pentru opiunea complet de 256 de culori. Cu alte cuvinte, ai redus dimensiunea fiierului la o optime din dimensiunea iniial. n general, formatul GIF este utilizat pentru majoritatea imaginilor din Web, n special pentru butoane, panouri publicitare (banners) i alte elemente similare, datorit dimensiunii mai mici a fiierelor. Formatul JPEG este necesar atunci cnd dorii s imitai ct mai exact culorile exacte ale imaginii originale. De exemplu, un prieten are o locaie Web n care i etaleaz unele dintre excelentele sale fotografii dup natur, iar pentru reproduceri fotografice este obligatoriu s foloseasc formatul JPEG pentru toate imaginile. n caz contrar s-ar pierde nuanele culorilor. Includerea imaginilor ntr-un document Web este imediat utilizai marcajul de formatare <IMG> (imagine). La fel ca la marcajul ancor <A>, marcajul IMG are un singur atribut esenial, SRC=numegrafic i la fel ca rigla orizontal <HR>, nu are marcaj-pereche pentru nchidere.

Sunt adugate i alte opiuni pentru marcajul <IMG>. Una dintre opiunile noi v permite s specificai limea (WIDTH) i nlimea (HEIGHT) imagini, nainte ca aceasta s fie ncrcat, ceea ce face ca documentul s fie redat mai rapid pe ecran, chiar nainte ca graficul s fei recepionat. Valorile sunt specificate n pixeli. Dar programul Lynx nu poate afia imagini grafice. Ca urmare, este permis un atribut suplimentar al marcajului <IMG>, special pentru aceast situaie. Secvena magic este MT=text-alternativ. Ceea ce apare pe post de text-alternativ este afiat n situaia n care utilizatorul nu poate vizualiza imagini sau opteaz pentru eliminarea ncrcrii graficelor, pentru a accelera navigarea n Web (aproximativ 10% din utilizatori fac acest lucru n mod curent). Opiuni de aliniere a imaginii Dar ce s-ar ntmpla dac ai dori o alt aliniere? Sa dac utilizai diverse alinieri pentru grafice multiple? V putei atepta la un al treilea atribut al marcajului de formatare <IMG>, ALIGN, care v ofer un control precis al alinierii. Cele trei alinieri standard sunt ALIGN=top, ALIGN=middle i ALIGN=bottom. n mod implicit, imaginile i materialele adiacente sunt aliniate la baza imaginii, aa cum se vede n figura de mai jos. Urmtoarea secven HTML exemplific aceste trei opiuni de aliniere: <HTML> <HEAD> <TITLE>Carte de telefoane</TITLE> </HEAD> <BODY>

<H1>Opriuni de aliniere a imaginilor</H1> <H2>Align=top</H2> Doriti sa continuati?<A HREF="referinte.html"> <IMG SRC="buton.gif" ALIGN=top B0RDER=0></A> Tastati litera A (ALIGN=top) <H2>Align=middle</H2> Doriti sa continuati?<A HREF=referinte.html"> <IMG SRC="buton.gif" ALIGN=middle BORDER=O></A> Tastati litera A (ALIGN=middle) <H2>Align=bottom</H2> Doriti sa continuati?<A HREF=referinte.html"> <IMG SRC="buton.gif" ALIGN=bottom BORDER=O></A> Tastati litera A (ALIGN=bottom) </BODY> </HTML>

Atunci cnd poziionai imaginile dumneavoastr, amintii-v c diversele programe de navigare au diferite limi de ecran i c aceste programe sunt libere s deplaseze elementele pentru ca s ncap pe ecran. O greeal clasic ntr-o pagin, altfel foarte artoas, este s o vizualizai ntr-o fereastr relativ ngust i s tragei concluzia c totul arat bine. Un utilizator care are un ecran uria va vedea toate graficele i textele nghesuite n partea de sus - un aranjament care compromite aspectul general al paginii.

Iat o regul empiric simpl pentru imagini: Dac dorii ca n dreapta unei imagini s nu apar nimic, adugai un marcaj <BR> la sfritul secvenei HTML care specific acel grafic.

Organizarea informaiilor n tabele


Tabelele reprezint o extensie important a limbajului HTML. Dar, spre deosebire de tabelele din procesorul dumneavoastr favorit de texte, tabelele HTML pot s v solicite destul de mult.

Bazele formatrii tabelelor


Dei tabelele ofer o mulime de posibiliti interesante, au i un dezavantaj: sunt destul de greu de construit. Trebuie s specificai parametrii tabelului, apoi parametrii fiecrei linii iar, n final, fiecare celul trebuie nconjurat de marcajele <TD></TD> date de tabel. Iat un exemplu simplu de tabel: <HTML> <HEAD> <TITLE>Carte de telefoane</TITLE> </HEAD> <BODY> <B>Produse</B> <TABLE BORDER=1> <TD>Lapte</TD> <TD>Paine</TD> <TD>Miere</TD> <TD>Sunca</TD> </TR> </TABLE> </BODY> </HTML>

Acest cod plaseaz toate datele pe aceeai linie (adic pe acelai rnd, delimitat de <TR> i </TR>), dup cum se vede n figur. Dac dorim s scriem informaia sub forma unui element pe fiecare rnd (adic linie), codul devine mai complex:

<HTML> <HEAD> <TITLE>Carte de telefoane</TITLE> </HEAD> <BODY> <B>Produse</B> <TABLE BORDER=1> <TR> <TD>Lapte</TD> </TR> <TR> <TD>Paine</TD> </TR> <TR> <TD>Miere</TD> </TR> <TR> <TD>Sunca</TD> </TR> </TABLE> </BODY> </HTML>

Marcaj TABLE BORDER=n

Semnificaie Limea zonei umbrite din jurul tabelului. Dac BORDER=O, atunci se elimin i caroiajul din interiorul tabelului.

CELLSPACING=n Spaierea dintre celule (pixeli) CELLPADDING=n Spaierea dintre chenar si coninutul celulei (pixeli)

WIDTH=n

Limea dorit, prioritar fa de limea calculat (pixeli sau procente)

Mai putei specifica i alinierea orizontal a celulelor de date, cu ajutorul opiunii ALIGN. Opiunile sunt ALIGN=left (la stnga, implicit), ALIGN=center (centrat) i ALIGN=right (la dreapta), aa cum se arat n fragmentul HTML urmtor. VALIGN v permite s specificai alinierea pe vertical - VALIGN=top, de exemplu, face ca toate celulele dintr-o linie s conin informaia aliniat n partea superioar, n loc de opiunea implicit de centrare pe vertical. Opiunile pentru VALIGN sunt top (sus), middle (centrat) i bottom (jos).
<TABLE BORDER=5 WIDTH=50%> <TR> <TH>Show</TH><TH>Day On A&E</TH> </TR> <TR ALIGN=CENTER> <TD>Sherlock Holmes</TD> <TD>Monday</TD> </TR> <TR ALIGN=CENTER> <TD>Lovejoy</TD> <TD>Monday</TD> </TR> </TABLE>

Liniile i coloanele se pot ntinde pe mai multe uniti de tabel, dac este nevoie, deci am putea aduga un antet mai frumos pentru tabelul precedent, specificnd C0LSPAN=2 pentru o nou celul de date extins pe dou coloane: <TABLE BORDER=5 WIDTH=50%> <TR> <TD COLSPAN=2 ALIGN=center> <FONT SIZE=5>Arts & Entertainment</FONT></TD> </TR> <TH>Show</TH><TH>Day On A&E</TH> <TR ALIGN=CENTER> <TD>Sherlock Holmes</TD><TD>Monday</TD>

</TR><TR ALIGN=CENTER> <TD>Lovejoy</TD><TD>Monday</TD> </TR> </TABLE>

Exist mai multe opiuni suplimentare de formatare care v ajut s nvai cum s exploatai eficient acest set de proprieti ale grupului de marcaje specifice tabelelor. Una din cele mai importante o reprezint controlul culorilor n tabele - mai precis, culoarea de fond a celulelor. Culorile dintr-o anumit celul de date apar n marcajul <TD> ntr-un mod care nu v va surprinde: <TD BGCOLOR=yellow>text pe fond galben</TD> Atributul COLSPAN este destul de uor de neles, adevrata provocare la nivel conceptual este nelegerea utilizrii atributului ROWSPAN, care v permite s extindei o celul de date pe mai multe linii ale tabelului. <TABLE BORDER=5 CELLPADDING=5> <TR> <TD BGCOLOR=RED ROWSPAN=5>Programe TV</TD> <TD>MTV</TD></TR> <TR><TD>SPORT 1</TD></TR> <TR><TD>SPORT 2</TD></TR> </TABLE> </CENTER>

n tabelul urmtor vor fi prezentate cele mai utilizate tag-uri mpreuna cu cele mai importante atribute ale lor: Nume tag Nume Valoare atribut Detalii atribut <A> href target URL _blank _self _parent _top Ancora Adresa ctre care vrem s fie legtura Fereastra n care se va face afiarea

<B> <BODY> background adresa imaginii bgcolor leftmargin cod culoare nume culoare procent din limea paginii numr de pixeli

Text bold Cuprinsul documentului Imaginea de fond Culoarea fondului Distanta dintre marginea din stnga a ferestrei browserului i marginea din stnga a paginii

topmargin

procent din nlimea Distanta dintre marginea de sus a paginii numr de ferestrei browserului si marginea de sus pixeli a paginii cod culoare nume culoare cod culoare nume culoare cod culoare nume culoare cod culoare nume culoare Culoarea textului Culoarea legturilor active (atunci cnd mouse-ul se afla deasupra lor) Culoarea legturilor nevizitate (nu s-a efectuat nici un click pe ele) Culoarea legturilor vizitate (s-a efectuat cel puin un click pe ele) Sfritul rndului Afiarea n centrul paginii Fontul textului

text alink link vlink <BR> <CENTER> <FONT> color face size <FORM> action

cod culoare nume culoare nume font

Culoarea fontului Tipul fontului

un numr de la 1 la 7 Mrimea fontului Formular interactiv URL Adresa scriptului care prelucreaz datele din cadrul formularului

method <FRAME>

GET POST

Metoda de prelucrare a datelor formularului Cadru (fereastra) Cadrul are sau nu are chenar Spaiu deasupra si sub un cadru Spaiu la stnga i la dreapta unui cadru Sursa cadrului Mulime de ferestre numrul i mrimea relativa a coloanelor

frameborder 1 sau 0 marginheight numr de pixeli marginwidth numr de pixeli src <FRAMESET> cols procent din limea paginii numr de pixeli URL

rows

procent din nlimea numrul i mrimea relativa a rndurilor paginii numr de pixeli Titluri in cadrul documentului

H1, H2, H3, H4, H5, H6 align left center right justify

Alinierea titlului

<HEAD> <HR> align left center right cod culoare nume culoare numr de pixeli procent din limea paginii numr de pixeli

Antetul documentului Linie orizontala Alinierea orizontala a liniei

color size width

Culoarea liniei nlimea liniei Limea liniei

<HTML> <I> <IMG> align left right top middle bottom text numr de pixeli

Document HTML Text italic Adugarea unei imagini Alinierea imaginii in pagina: left (stnga) sau right (dreapta) Alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos) Text ce va fi afisat in locul imaginii, in cazul in care, aceasta nu este afisata Marimea chenarului din jurul imaginii

alt border

height hspace src vspace width <INPUT> maxlength name size src type

procent numr de pixeli numr de pixeli URL numr de pixeli procent numr de pixeli numr date de tip caracter numr URL text password checkbox radio submit reset file hidden image button date de tip caracter

nlimea imaginii Spaiu pe orizontala in jurul imaginii Adresa imaginii Spaiu pe verticala in jurul imaginii Limea imaginii Element al formularului Numar maxim de caractere Numele elementului formularului Mrimea elementului formularului Adresa pentru o imagine Tip input

value <LI> <META> content name

Valoare input Element al unei liste Metainformatii

text author description keywords

Descrie valoarea atributului name Autor Descriere Cuvinte cheie Lista ordonata Cu ce valoare ncepe numerotarea Tipul numerotrii: A, a, I, i, 1 (implicit) Paragraf Alinierea paragrafului

<OL> start type <P> align left center right justify numar A, a, I, i, 1

<SELECT> multiple

Lista de selecii Permite selecia mai multor elemente

name size <STRONG> <SUB> <SUP> <TABLE> align

date de tip caracter numr

Numele listei de selecii Numrul de elemente ale listei Text evideniat Text indice Text exponent Tabel

left center right cod culoare nume culoare procent numr de pixeli cod culoare nume culoare numr de pixeli numr de pixeli numr numr de pixeli numr de pixeli procent numr de pixeli left center right cod culoare nume culoare numr numr de pixeli numr top middle bottom numr de pixeli

Alinierea tabelului

background URL bgcolor border bordercolor cellpadding cellspacing cols hspace vspace width <TD> align

Imaginea de fond pentru tabel Culoarea fondului pentru tabel Chenarul tabelului Culoarea chenarului Spaiu ntre coninutul celulelor tabelului si marginile lor Spatiu ntre celulele tabelului Numrul de coloane ale unui tabel Spaiu pe orizontala n jurul tabelului Spaiu pe verticala n jurul tabelului Limea tabelului Celula de tabel Alinierea coninutului celulei pe orizontal Imaginea de fond pentru celula Culoarea fondului pentru celula Numrul de coloane pe care se ntinde celula nlimea celulei Numrul de linii pe care se ntinde celula Alinierea coninutului celulei pe vertical Limea celulei Cmp de editare multilinie

background URL bgcolor colspan height rowspan valign

width <TEXTAREA>

cols name rows <TITLE> <TR> align

numr date de tip caracter numr

Numrul de coloane Numele cmpului de editare multilinie Numrul de rnduri Titlu document Rnd tabel

left center right cod culoare nume culoare top middle bottom

Alinierea coninutului celulelor pe orizontal Culoarea fondului pentru tot rndul Alinierea coninutului celulelor pe vertical Text subliniat Lista neordonata

bgcolor valign

<U> <UL> type circle disc square

Forma marcajului