Ce Este HTML

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 ¢ £ © « ® ° ± ² ³ µ ¶ ¹ » ¼ ½
Nume ¢ £ © « ® ° ± ² ³ µ ¶ ¹ » ¼ ½
¾ Â Î × Ø â î ÷ ø Ş ş Ţ ţ €
¾ Â Î × Ø â î ÷ ø
€
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ţ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

Ce Este HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ce Este HTML

Uploaded by

Copyright:

Available Formats

Ce este HTML?

tagul de sfrit care are caracterul slash (/ )

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

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

Tag-uri din cadrul documentului HTML

Culori, fonturi, margini

Culoare pentru tag-ul body

Pentru liste ordonate se aplica urmtorul exemplu:

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

Salturi n cadrul listelor organizate

Referin pentru inserarea de imagini

Organizarea informaiilor n tabele

Bazele formatrii tabelelor

Marcaj TABLE BORDER=n

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

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

cod culoare nume culoare nume font

Culoarea fontului Tipul fontului

Antetul documentului Linie orizontala Alinierea orizontala a liniei

color size width

Culoarea liniei nlimea liniei Limea liniei

value <LI> <META> content name

Valoare input Element al unei liste Metainformatii

text author description keywords

Lista de selecii Permite selecia mai multor elemente

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

date de tip caracter numr

background URL bgcolor colspan height rowspan valign

cols name rows <TITLE> <TR> align

numr date de tip caracter numr

<U> <UL> type circle disc square

You might also like

¾ Â Î × Ø â î ÷ ø