+ All Categories
Home > Documents > Laborator 10-11 Aplicatii web. HTML Aplicatii

Laborator 10-11 Aplicatii web. HTML Aplicatii

Date post: 13-Apr-2022
Category:
Upload: others
View: 65 times
Download: 3 times
Share this document with a friend
20
Laborator 10-11 Aplicatii web. HTML Aplicatii 1. Creaţi o pagină web care să conţină orarul pe zile de la clasa voastră. În bara de titlu trebuie să apară textul: Orar clasa ... an universitar ... 2. Creaţi o pagină web care să conţină toate zodiile şi perioadele din corespunzătoare. În bara de titlu trebuie să apară textul: Zodii 3. Ce modificări trebuie să faceţi în sursa de mai jos, pentru a obţine o pagină cu prenumele scrise unul sub altul? <HTML> <HEAD> <TITLE> Prenumele prietenilor mei </TITLE> </HEAD> <BODY> Ana Dana Alin Andrei Mircea </BODY> </HTML> 4. Care este efectul codului HTML? <HTML> <HEAD> <TITLE>Zilele saptamanii</TITLE> </HEAD> <BODY BGCOLOR=silver> <font SIZE=4 FACE=CURIER NEW COLOR=red WEIGHT=100> <p>LUNI </p> </font>
Transcript
Page 1: Laborator 10-11 Aplicatii web. HTML Aplicatii

Laborator 10-11

Aplicatii web. HTML

Aplicatii

1. Creaţi o pagină web care să conţină orarul pe zile de la clasa voastră. În bara de titlu trebuie

să apară textul: Orar clasa ... an universitar ...

2. Creaţi o pagină web care să conţină toate zodiile şi perioadele din corespunzătoare. În bara

de titlu trebuie să apară textul: Zodii

3. Ce modificări trebuie să faceţi în sursa de mai jos, pentru a obţine o pagină cu prenumele scrise unul sub altul?

<HTML>

<HEAD>

<TITLE> Prenumele prietenilor mei </TITLE>

</HEAD>

<BODY>

Ana Dana Alin Andrei Mircea

</BODY>

</HTML>

4. Care este efectul codului HTML?

<HTML>

<HEAD>

<TITLE>Zilele saptamanii</TITLE>

</HEAD>

<BODY BGCOLOR=silver>

<font SIZE=4 FACE=CURIER NEW COLOR=red WEIGHT=100>

<p>LUNI </p>

</font>

Page 2: Laborator 10-11 Aplicatii web. HTML Aplicatii

<font SIZE=7 FACE=ARIAL COLOR=blue WEIGHT=900>

<p>MARTI </p>

</font>

<font SIZE=4 FACE=Times New Roman COLOR=#800000 WEIGHT=300>

<p>MIERCURI </p>

</font>

</BODY>

</HTML>

5. Uneori este necesar să folosim caractere diacritice (â, Â, î, Î, ş, Ş, ţ, Ţ, ă, Ă). Aceste caractere

pot fi vizibile în pagini web prin folosirea de coduri asociate caracterelor (tabelul următor).

6.

Caracter Cod

â &#226;

 &#194;

î &#238;

Î &#206;

ş &#351;

Ş &#350;

ţ &#355;

Ţ &#354;

ă &#259;

Ă &#258;

Scrieti in HTML cuvântul Mărţişor .

7. Creaţi o pagină web care să conţină numele şi prenumele vostru pe câte un rând scrise cu

culori, fonturi şi dimensiuni diferite. În bara de titlu trebuie să apară textul: Date

personale.

8. Care este efectul codului HTML?

Page 3: Laborator 10-11 Aplicatii web. HTML Aplicatii

<HTML>

<HEAD>

<TITLE>Pagina Filfizonului</TITLE>

</HEAD>

<BODY BGCOLOR=silver>

<font SIZE=4 FACE=CURIER NEW COLOR=red WEIGHT=100>

<p>Fluturele Filfizon </p>

<IMG SRC="fluture.jpeg">

<p>zboara din floare in floare</p>

</font>

</BODY>

</HTML>

9. Care este efectul codului HTML?

<HTML>

<HEAD>

<TITLE>Pagina Filfizonului</TITLE>

</HEAD>

<BODY BGCOLOR=silver>

<p>Fluturele Filfizon </p>

<IMG SRC="fluture.jpeg" width=140 height=200 border=5>

<p>zboara din floare in floare</p>

</BODY>

</HTML>

10. Căutaţi pe Internet sau pe calculatorul vostru trei poze cu câte o pasăre fiecare. Dacă nu

găsiţi astfel de poze desenaţi voi în Paint şi creaţi fişierele necesare. Apoi creaţi o pagină web

cu informaţii despre fiecare pasăre (nume şi locul unde trăieşte) şi cu poza ei. Textul trebuind

să apară în stânga pozei.

Page 4: Laborator 10-11 Aplicatii web. HTML Aplicatii

11. Sa presupunem că avem două fişiere cu numele pag1.html şi pag2.jpg. Sursele

asociate celor două fişiere, prezentate mai jos, permit trecerea dintr-o pagină în cealaltă.

<HTML>

<HEAD>

<TITLE>Pagina 1</TITLE>

</HEAD>

<BODY>

Suntem in pagina 1<br>

<a href=”pag2.html”>Trecerea in pagina 2</a>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Pagina 2</TITLE>

</HEAD>

<BODY>

Suntem in pagina 2<br>

<a href=”pag1.html”>Trecerea in pagina 1</a>

</BODY>

</HTML>

Page 5: Laborator 10-11 Aplicatii web. HTML Aplicatii

12. 13. Sursa de mai jos prezintă lista primelor patru echipe de la EURO2008, folosind o listă

ordonată.

<HTML>

<HEAD>

<TITLE>EURO2008</TITLE>

</HEAD>

<BODY BGCOLOR=silver >

Semifinalistele Campionatului European de Fotbal 2008<br>

<ol type="a">

<li> Germania

<li> Turcia

<li> Spania

<li> Rusia

</ol>

</BODY>

</HTML>

14. Sursa de mai jos are ca efect afişarea pe ecran a unui tabel cu grupele în care au fost

împărţite echipele de la EURO2008.

<HTML>

<HEAD>

<TITLE>EURO2008</TITLE>

Page 6: Laborator 10-11 Aplicatii web. HTML Aplicatii

</HEAD>

<BODY BGCOLOR=silver >

Grupele Campionatului European de Fotbal 2008<br>

<table border="2">

<tr>

<td><B> Grupa A </B> </td>

<td><B> Grupa B </B> </td>

<td><B> Grupa C </B> </td>

<td><B> Grupa D </B> </td>

</tr>

<tr>

<td>Portugalia</td>

<td>Croatia</td>

<td>Olanda</td>

<td>Spania</td>

</tr>

<tr>

<td>Turcia</td>

<td>Germania</td>

<td>Italia</td>

<td>Rusia</td>

</tr>

<tr>

<td>Cehia</td>

<td>Austria</td>

<td>Romania</td>

<td>Grecia</td>

</tr>

Page 7: Laborator 10-11 Aplicatii web. HTML Aplicatii

<tr>

<td>Elvetia</td>

<td>Polonia</td>

<td>Franta</td>

<td>Suedia</td>

</tr>

</table>

</BODY>

</HTML>

15. Sursa de mai jos are ca efect afişarea pe ecran a unui tabel cu liniile colorate diferit, lăţimea

de 100 pixeli şi înălţimea de 60% din înălţimea totală a paginii.

16.

17. <HTML>

<HEAD>

<TITLE>EURO2008, gr. A, C</TITLE>

</HEAD>

<BODY BGCOLOR=silver>

Grupele Campionatului European de Fotbal 2008<br>

<table border="2" width="400" height="60%">

<tr>

<td><B> Grupa A </B> </td>

<td><B> Grupa C </B> </td>

Page 8: Laborator 10-11 Aplicatii web. HTML Aplicatii

</tr>

<tr bgcolor="red">

<td>Portugalia</td>

<td>Olanda</td>

</tr>

<tr bgcolor="yellow">

<td>Turcia</td>

<td>Italia</td>

</tr>

<tr bgcolor="red">

<td>Cehia</td>

<td>Romania</td>

</tr>

<tr bgcolor="yellow">

<td>Elvetia</td>

<td>Franta</td>

</tr>

</table>

</BODY>

</HTML>

Page 9: Laborator 10-11 Aplicatii web. HTML Aplicatii

18. Creaţi o pagină web care să conţină o tablă de şah cu 4 linii şi 4 coloane, pătrăţelele fiind colorate cu alb şi negru (alternativ).

19. Creaţi o pagină web care să conţină un tabel cu orarul vostru pentru cele 5 zile de facultate

dintr-o săptămână.

20. Creaţi o pagină web cu un tabel care să conţină informaţii despre cei mai buni prieteni ai mei (nume şi număr de telefon). Pe prima coloană se va scrie numele, iar pe a doua numărul de telefon.

HTML - Notiuni de baza

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la

baza paginilor web. Paginile HTML contin elemente (etichete) si au extensia .html sau

.htm.

Puteti scrie astfel de fisiere cu Notepad sau cel mai indicat cu un editor specializat, de

exemplu Crimson Editor, care va indica si numarul liniilor, lucru util la depanarea codului

HTML. Verificati ca nu aveti extensiile ascunse (My Computer -> Tools -> Folder Options

-> View -> debifati Hide extensions for known file types). Pentru a putea crea fisiere

html dati clic dreapta New -> Text Document, apoi il redenumiti index.html.

Elemetele sunt incadrate de tag-uri. Tag-urile sunt simbolurile care marcheaza inceputul

si sfarsitul unui element. Tag-ul pentru inceput este < iar pentru sfarsit este >.

In marea lor majoritate elementele sunt pereche, una de deschidere <eticheta> si alta

de inchidere </eticheta>. Browserul interpreteaza aceste etichete afisand rezultatul pe

ecran. HTML nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari).

Pagina principala a unui domeniu este fisierul index.html. Aceasta pagina este setata a fi

afisata automat la vizitarea unui domeniu.

De exemplu la vizitarea domeniului www.nume.ro este afisata pagina

www.nume.ro/index.html.

Unele etichete permit utilizarea de atribute care pot avea anumite valori:

<eticheta atribut="valoare"> ... </eticheta>

Componenta unui document HTML este:

1. versiunea HTML a documentului

2. zona head cu etichetele <head> </head>

3. zona body cu etichetele <body> </body> sau <frameset> </frameset>

Page 10: Laborator 10-11 Aplicatii web. HTML Aplicatii

Versiunea HTML poate fi:

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Toate paginile HTML incep si se termina cu etichetele <html> si </html>.

In interiorul acestor etichete gasim perechile <head>, </head> si <body>, </body>.

head contine titlul paginii intre etichetele <title> si </title>, descrieri de tip <meta>,

stiluri pentru formatarea textului, scripturi si linkuri catre fisiere externe (de exemplu

scripturi, fisiere de tip CSS sau favicon).

Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor,

informatii utile motoarelor de cautare si au urmatorul format:

<META NAME="nume" CONTENT="continut">

Exemplu: link catre un fisier extern CSS:

<link rel="stylesheet" type="text/css" href="css.css">

body gazduieste practic toate etichetele afisate de browser pe ecran.

Exemplu: o pagina HTML cu titlul Exemplu iar continutul Continut pagina

<html>

<head>

<title>Titlu</title>

</head>

<body>

Continut pagina

</body>

</html>

Comentariul in HTML, care bineinteles nu va fi afisat de browser, poate fi introdus astfel:

<!-- Acesta este un comentariu in HTML -->

Formatare text

Page 11: Laborator 10-11 Aplicatii web. HTML Aplicatii

In HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar pentru

paragraf nou cu eticheta <p>.

Exemplu

HTML Afisare

Proba text.<br>

Text pe un rand nou.<p>

Text intr-un paragraf nou.

Proba text.

Text pe un rand nou.

Text intr-un paragraf nou.

<hr> introduce o linie linie orizontala si trecerea la un rand nou.

Folosind etichete adecvate textul poate fi formatat.

Spre exemplu fonturilor li se poate modifica: marimea, culoarea, forma (normal, bold,

italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontala sau verticala iar

titlurile (header), de la 1 la 6, sunt diferite ca marime (1 cel mai mare iar 6 cel mai

mic).

Etichetele <span> si </span> delimiteaza un sir de caractere in vederea formatarii.

Etichetele <div> si </div> sunt similare etichetelor <span> si </span>, cu diferenta ca

formateaza mai multe elemente si introduc un rand nou inainte si dupa sfarsitul zonei

formatate.

Unul din atributele blocului div este align care poate lua valorile:

center aliniere pe centru

left aliniere la stanga

right aliniere la dreapta

In situatia in care dorim ca textul introdus sa fie afisat exact asa cum a fost introdus

(text preformatat) in fisierul sursa vom folosi pereche de etichete <pre> si </pre>.

Exemplu

HTML Afisare

text normal text normal

<b>text bold</b> text bold

<i>text cursiv</i> text cursiv

<u>text subliniat</u> text subliniat

Page 12: Laborator 10-11 Aplicatii web. HTML Aplicatii

<del>text taiat</del>

<sup>exponent</sup> exponent

<sub>indice</sub> indice

<tt>caractere monospatiate</tt> caractere monospatiate

<cite>Citat</cite> Citat

<em>evidentiat</em> evidentiat

<code>text scris la tastatura</code> text continand cod de

computer

<kbd>text scris la tastatura</kbd> text scris la tastatura

<samp>mostra de cod de computer</samp> mostra de cod de computer

<strong>text ingrosat</strong> text ingrosat

<big>mare</big> mare

<small>mic</small> mic

<font color="red">font rosu</font> font rosu

<font face="Courier">font Courier</font> font Courier

<font size="6">font size=6</font> font size=6

<div align="center">text aliniat pe centru</div> text aliniat pe centru

<div align="left">text aliniat la stanga</div> text aliniat la stanga

<div align="right">text aliniat la dreapta</div> text aliniat la dreapta

<h1>Titlu 1</h1> Titlu 1

Page 13: Laborator 10-11 Aplicatii web. HTML Aplicatii

<h2>Titlu 2</h2>

Titlu 2

<h3>Titlu 3</h3>

Titlu 3

<h4>Titlu 4</h4>

Titlu 4

<h5>Titlu 5</h5>

Titlu 5

<h6>Titlu 6</h6>

Titlu 6

Legenda:

br = line break

p = paragraph

hr = horizontal rule

Liste

Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate, ordonate si

de definitii.

Liste neordonate

Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.

Exemplu

HTML Afisare

Exemple de fructe:

<ul>

<li>mere</li>

<li>pere</li>

<li>struguri</li>

</ul>

Exemple de fructe:

mere

pere

struguri

Elementele listei pot fi particularizate folosind atributul type care poate lua valorile

square, circle si disc.

Exemplu

HTML Afisare

Exemple de legume:

<ul>

<li type="square">rosii</li>

Exemple de legume:

rosii

Page 14: Laborator 10-11 Aplicatii web. HTML Aplicatii

<li type="circle">cartofi</li>

<li type="disc">morcovi</li>

</ul>

o cartofi

morcovi

Liste ordonate

Aceste liste sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>.

Exemplu

HTML Afisare

Exemple de combustibili:

<ol>

<li>benzina</li>

<li>motorina</li>

<li>gaz lichefiat</li>

</ol>

Exemple de combustibili:

1. benzina

2. motorina

3. gaz lichefiat

Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A

(litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea

default):

Exemplu

HTML Afisare

Medii de stocare:

<ol>

<li type="I">HDD-ul</li>

<li type="I">discheta</li>

<li type="I">CD-ROM-ul</li>

</ol>

Medii de stocare:

I.HDD-ul

II. discheta

III.CD-ROM-ul

Liste de definitii

Aceste liste sunt delimitate de etichetele <dl> si </dl>.

Termenii listei sunt delimitati de etichetele <dt> si </dt> iar definitiile termenilor de

<dd> si </dd>.

Exemplu

HTML Afisare

Legenda:

<dl>

<dt>HTML</dt>

<dd>Hyper Text Mark-ul Language</dd>

<dt>IP</dt>

<dd>Internet Protocol</dd>

Legenda:

HTML

Hyper Text Mark-ul Language

Page 15: Laborator 10-11 Aplicatii web. HTML Aplicatii

</dl> IP

Internet Protocol

Listele pot fi imbricate, adica in interior pot contine una sau mai multe liste.

Exemplu

HTML Afisare

<ol>

<li>Monitoare

<ul>

<li>CRT</li>

<li>LCD</li>

</ul>

</li>

<li>Imprimante

<ul>

<li>cu jet de cerneala</li>

<li>laser</li>

</ul>

</li>

</ol>

1. Monitoare

o CRT

o LCD

2. Imprimante

o cu jet de cerneala

o laser

Legenda:

ul = unordered list

ol = ordered list

li = list item

dl = definition list

dt = term in a definition list

dd = description of a term in a definition list

Legaturi

Legaturi

Legatura (link-ul) este o eticheta foarte importanta in HTML deoarece confera

utilizatorului posibilitatea navigarii de la o pagina la alta. Deobicei link-ul este subliniat iar

atunci cand suntem deasupra lui cursorul isi schimba forma.

Link-ul este definit cu etichetele <a> si </a> si are atributele:

href - adresa fisierului destinatie

target - in ce fereastra se va deschide fisierul destinatie

title - mica descriere asociata legaturii afisata in momentul in care mouse-ul se afla

deasupra legaturii

<a href="adresa-fisier" target="_blank" title="titlu">

Adresa fisierului destinatie poate fi exprimata astfel:

nume fisier, daca se afla in acelasi folder cu pagina curenta

Page 16: Laborator 10-11 Aplicatii web. HTML Aplicatii

<a href="fisier.html">

folder/nume fisier,daca se afla in alt folder

<a href="folder/fisier.html">

adresa URL, fiind adresa completa a paginii

<a href="http://www.proba.ro/fisier.html">

Atributul target poate lua valorile:

_blank pagina va fi incarcata intr-o noua fereastra

_parent pagina va fi incarcata in fereastra parinte

_top pagina va fi incarcata in fereastra top a cadrului

_self pagina va fi incarcata in aceeasi fereastra

Exemplu: link catre pagina www.drogoreanu.ro

HTML Afisare

<a href="http://www.drogoreanu.ro">Catalin Drogoreanu</a> Catalin Drogoreanu

Exemplu: link catre pagina www.drogoreanu.ro incarcata intr-o noua fereastra

HTML Afisare

<a href="http://www.drogoreanu.ro" target="_blank">Catalin

Drogoreanu</a>

Catalin

Drogoreanu

Putem insera un link catre o adresa de e-mail putand asocia si un subiect prestabilit

HTML Afisare

<a href="mailto:[email protected]">Trimite e-mail</a> Trimite

e-mail

<a href='mailto:[email protected]?subject="subiect prestabilit"'>Trimite

e-mail</a>

Trimite

e-mail

Culoarea linkurilor

Poate fi modificata introducand in eticheta body urmatoarele atribute:

LINK legatura nevisitata (default albatru)

VLINK legatura visitata (default rosu)

ALINK legatura activa (nu prea se foloseste - default portocaliu)

Exemplu:

Page 17: Laborator 10-11 Aplicatii web. HTML Aplicatii

<html>

<head>

<title>Exemplul 3_3</title>

</head>

<body link="green" vlink="black" alink="yellow">

<a href="link.html">Link</a>

</body>

</html>

Ancore

Se pot adauga puncte de reper (ancore) pentru o deplasare mai usoara in cazul unor

pagini HTML lungi sau catre un loc anume aflat intr-o alta pagina.

Ancora se defineste tot intre etichetele <a> si </a> dar cu atributul name. Pentru a face

trimitere catre ancora se introduce un link cu atributul href avand ca valoare denumirea

ancorei.

Exemplu:

Ancora <a name="nume">Ancora</a>

Link catre ancora aflata in aceeasi pagina <a href="#nume">Inapoi la ancora</a>

Link catre ancora aflata in alta pagina <a href="pagina.html#nume">Inapoi la

ancora din pagina.html</a>

Imagini

Folosind imagini pagina capata un plus de atractivitate dar puteti plati pretul unei

incarcari greoaie daca dimensiunile imaginii sunt mari.

Cateva din formatele de imagini utilizate in paginile web sunt: JPEG (*.jpg sau *.jpeg),

GIF (*.gif), BMP (*.bmp), PNG (*.png).

Formatul GIF (8 biti) contine maximum 256 culori, fiind recomandat pentru grafica

(butoane, icon-uri, etc.). Imaginile gif pot fi animate. Puteti crea gif-uri animate folosind

Adobe Image Ready.

Formatul JPG sau JPEG contine milioane de culori si este folosit pentru fotografii.

Formatul JPG foloseste un algotitm complex de comprimare. Daca salvati imaginea JPG

cu compresie mica, veti obtine o calitate foarte buna dar dimensiunea fiserului va fi

foarte mare. Cu compresie mare imaginea va avea o calitate proasta dar fisierul va fi

foarte mic. Un raport optim intre calitatea imaginii si dimensiunea fisierului veti obtine

pentru o compresie 60%.

Formatul bmp este putin folosit datorita dimensiunilor mari.

Eticheta folosita pentru inserarea unei imagini in pagina este <img> si are urmatoarele

atribute:

src = sursa, locul unde se afla imaginea

width = latimea imaginii

height = inaltimea imaginii

Page 18: Laborator 10-11 Aplicatii web. HTML Aplicatii

alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost gasita

border = chenar (0 = lipsa bordura)

Dimensiunea imaginii afisate de browser este stabilita de argumentele width si height

care pot fi diferite de dimensiunile imaginii originale, caz in care imaginea va fi

redimensionata automat de catre browser.

Exemplu: o imagine cu latime 100px, inaltime 75px, alt=poza si border=0 si inca o data

cu border=1

HTML Afisare

<img src="poza.jpg" width="100" height="75"

alt="poza" border="0">

<img src="poza.jpg" width="100" height="75"

alt="poza" border="1">

Pentru a micsora timpul incarcarii complete a paginii exista programe care optimizeaza

imaginile. Optimizarea consta in:

1. reducerea dimensiunii imaginii fara degradarea majora a calitatii

2. eliminarea informatiilor tip metadata asociate imaginii. Aceste date (EXIF/IPTC) sunt

asociate automat de programele de grafica (de ex. Adobe Photoshop) sau de aparatele

de fotografiat digitale. Pentru eliminarea acestor informatii puteti folosi aplicatia Exifer.

In Internet Explorer valoarea atributului alt este afisata in browser in momentul in care

mouse-ul se afla deasupra imaginii. Pentru a obtine aceeasi afisare in Firefox in eticheta

img se adauga atributul title avand acceasi valoare ca si alt.

Exemplu: acceasi imagine care contine atributele alt si title (verificati cu Internet

Explorer si Firefox)

HTML Afisare

<img src="poza.jpg" width="100" height="75"

alt="poza" title="poza" border="0">

Tabele

Page 19: Laborator 10-11 Aplicatii web. HTML Aplicatii

Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza

organizarii marii majoritati a paginilor web (inclusiv cea de fata).

Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza

informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea

acelasi numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol

(space) sau codul echivalent &nbsp;.

Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>,

pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>.

Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.

Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2

latime 160px, fiecare celula are o alta culoare de fond (bgcolor)

HTML Afisare

<table border="1"> <tr><td width="80"

bgcolor="red">rosu</td><td width="160"

bgcolor="yellow">galben</td></tr> <tr><td

bgcolor="white">alb</td><td

bgcolor="green">verde</td></tr> </table>

rosu galben

alb verde

Atributele etichetei table sunt:

border = bordura (0 = lipsa bordura)

width = latimea tabelului

height = inaltimea tabelului

bgcolor = culoarea de fundal

background = imaginea de fundal (W3C invalid, folositi style)

cellspacing = distanta intre celule

cellpadding = distanta dintre marginea celulei si continut

Atributele etichetei td sunt:

align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru)

valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)

width = latimea celulei

height = inaltimea celulei

bgcolor = culoarea de fundal

background = imaginea de fundal (W3C invalid, folositi style)

colspan = uneste celula cu cea din dreapta ei

rowspan = uneste celula cu cea de sub ea

Exemplu: un tabel in care am folosit colspan pentru a uni celulele 1 si 2 din randul 2 si

rowspan pentru a uni celula 1 din randul 3 cu celula 1 din randul 4

HTML Afisare

<table border="1"> <tr> <td bgcolor="white">R1 C1</td>

<td bgcolor="yellow">R1 C2</td> <td bgcolor="white">R1

C3</td> <td bgcolor="yellow">R1 C4</td> </tr> <tr> <td

colspan="2" bgcolor="red">R2 C1+C2</td> <td

R1

C1

R1

C2

R1

C3

R1

C4

Page 20: Laborator 10-11 Aplicatii web. HTML Aplicatii

bgcolor="yellow">R2 C3</td> <td bgcolor="red">R2 C4</td>

</tr> <tr> <td rowspan="2" bgcolor="white">R3 C1 + R4

C1</td> <td bgcolor="yellow">R3 C2</td> <td

bgcolor="white">R3 C3</td> <td bgcolor="yellow">R3

C4</td> </tr> <tr> <td bgcolor="red">R4 C2</td> <td

bgcolor="yellow">R4 C3</td> <td bgcolor="red">R4 C4</td>

</tr> </table>

R2

C1+C2

R2

C3

R2

C4

R3

C1 +

R4

C1

R3

C2

R3

C3

R3

C4

R4

C2

R4

C3

R4

C4

Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi

perechea de etichete <th> si </th> in locul etichetelor <td> si </td>. Astfel continutul

celulei va fi afisat ingrosat si aliniat pe mijloc.

Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele <th> si

</th>


Recommended