HTML5&CSS3

Imagini, tabele si liste

FrontEnd Basic
Lucru cu imaginile
Adaugarea imaginii
Tag <img> este destinată afișării unei imagini pe o
pagină Web.

Atributele tag-ului img

src – este prescurtarea pentru "source" (sursa). Acest atribut se foloseste

pentru a indica locatia fotografiei.

alt – este folosit pentru a afisa un text in locul imagini, in cazul in care
browser-ul pentru un oarecare motiv nu poate afisa imaginea.

title – setează textul ca legend.

width, height – atributele stabilesc lățimea și înălțimea imaginii.

Formatele imaginilor
Browserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor.

JPEG (Join Photographic Experts Group) GIF (Graphics Interchange Format)

Formatul JPEG nu mai este limitat la 256 de culori si de Formatul GIF poate reda un numar de 256 de culori, de
aceea este folosit pentru fotografii. Imaginile care apartin aceea este folosit pentru imaginile de dimensiuni mici:
acestui format au extensia .jpg sau .jpeg. butoane, icon-uri, animatii mici.

PNG – (Portable Network Graphics) SVG (Scalable Vector Graphics)

PNG este un format mai nou care a inlocuit treptat este un format pentru imagini de tip vectorial, bazat pe XML
formatul GIF in primul rand prin calitatea superioara. fiind utilizat pentru grafică 2D, care permite interactivitatea și
animația. 

BMP (Microsoft Windows Bitmap) ICO (Windows icon)

format propriu Microsoft Windows. Consta dintr-un fișier de stocare pictogramă fișier în Microsoft Windows.
header, urmat de informatiile de imagine.
Tabele
Lucru cu tag-ul table
Table <table border="2">
<thead>
<tr>
Structura de baza al tabelului: <th> </th><th> td </th>
<th> td </th><th> td </th>
</tr>
</thead>
<tbody>
<tr>
<td>tr</td> <td>Content</td>
<td> Content </td><td> Content </td>
</tr>
<tr>
<td>tr</td><td>Content</td>
<td> Content </td><td> Content </td>

</tr>
<tr>
<td>tr</td><td>Content</td>
<td> Content </td><td> Content </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Table
Tag-ul <table> </ table> este containerul principal pentru un tabel și toate tag-urile legate de tabel ar
trebui să fie localizate în ea.

<thead></thead> <tr><tr>
se intenționează să se stocheze una sau mai multe rânduri Este elemental care defineste randul in table in care poate
care sunt prezentate în partea superioară a tabelului. include una sau mai multe coloane

<tbody></tbody>
<th></th>
Acesta este conceput pentru a stoca tabelul cuprins. Vă
Este elemental care defineste titlul intro coloana
permite să creați blocuri structurale și să gestionați
designul acestora utilizând stiluri.

<tfoot></tfoot> <td></td>

concepute pentru a stoca informații care vor fi afișate în Este elemental care defineste o coloana
partea de jos a tabelului. Codul trebuie definit înaintea
corpului tabelului, deși este afișat mai jos.
 Cellspacing, cellpadding, Colspan si rowspan

Cellspacing rowspan
Cellpadding Colspan

Cellspasing – Acesta este un atribut al tabelului care se încadrează între celulele tabelului și de la marginea tabelului.

Cellpadding – Acesta este un atribut al tabelului, care stabilește linii în interiorul celulei, adică indentări de la limita celulei la conținutul ei.

Colspan –   Este un atribut cat de multe coloane ale tabelului aceasta celula va inlocui.

Rowspan -  cat de multe randuri ale tabelului aceasta celula va inlocui.

Liste
Lucru cu tag-ul ol; ul; li
 Liste
Tag-urile ofera posibilitatea pentru asezarea continutului sub forma de lista.

<ul> <ol> <dl>

<li></li> <li></li> <dt></dt>
<li></li> <li></li> <dd></dd>
<li></li> <li></li> <dt></dt>
<li></li> <li></li> <dd></dd>
</ul> </ol> </dl>

Lista nenumerotata Lista numerotata Lista detaliata

< ul > < ol > </ dl >

 Lista numerotata

Type A Type a Type i Type I

<ol type=“A”>…</ol>
<ol type=“a”>…</ol> <ol type=“i”>…</ol> <ol type=“iI”>…</ol>
A. Element №1
a. Element №1 |. Element №1 |. Element №1
B. Element №2
b. Element №2 ||. Element №2 ||. Element №2
C. Element №3
c. Element №3 |||. Element №3 |||. Element №3

Are atributul de type, cu următoarele valori: A - numerotarea literelor latine litere, a - litere mici latine, I - cifre romane mari, i - cifre romane
mici, cifrele implicite sunt cifre arabe.
De asemenea, puteți utiliza atributele: reversed - setează lista care urmează să fie afișată în ordine inversă, start - indică valoarea inițială de la
care începe numărătoarea inversă. Pentru elementele listei, puteți aplica atributul value, care modifică numerotarea.
 Evaluare
Testeaza-ti cunostintele
1. Care este atributul pentru sursa 2. Care este atributul pentru
imaginii ? textul alternativ al imaginii?

src src alt scr

href alt

3. Care teg-uri sunt folosite 4. Care este atributul care face

pentru tabel? marinea celulei unui tabel?

5. Care este tag-ul pentru o lista 6. Care este tag-ul pentru o lista
numerotata? nenumerotata?

ul ol li ul ol li
 Succes
O seara reusita sa aveti!!!