L2-Limbajul HTML - Liste, Tabele Şi Cadre

Laboratorul 2
Limbajul HTML Liste, tabele i cadre
Etichete pentru legturi i imagini

Legturi
<a>
Definete o legtur sau o ancor
<link />
Definete legtura dintre un document i o resurs extern
<a> - definete o legtur sau o ancor

o un element HTML foarte important
o Atribute opionale (cele mai importante):
href adresa URL a paginii web cu care se face
legtura
name numele ancorei
target _blank, _parent, _self, _top
shape determin forma unei legturi
cords determin mpreun cu shape forma i
dimensiunea unei legturi
o Atribute de tip eveniment acceptate:
onblur, onclick, ondblclick, onfocus,
onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onkeydown,
onkeypress, onkeyup
Codul HTML
<a href="contact.html">Contact</a>
Codul HTML
<a name="capitol3">Capitolul 3</a>
Codul HTML
<a href="#capitol3">Capitolul 3</a>
Rezultat
Contact
Rezultat
Capitolul 3
Rezultat
Capitolul 3
Codul HTML
Rezultat
<a href="carte.html#capitol3">Capitolul 3</a>
Capitolul 3
<link /> - definete legtura dintre un document HTML i o resurs

extern
o Se include n elementul <head> i poate aprea de oricte ori
o Este interpretat de marea majoritate a navigatoarelor doar
pentru a defini legturi cu fisiere de stiluri
o Atribute opionale:
rel specific relaia dintre documentul HTML i resurs
(contents, index, chapter, copyright,
stylesheet)
type tipul MIME al resursei referite
href adresa URL a resursei cu care se face legtura
onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover,
onmouseup, onkeydown, onkeypress, onkeyup
<head>
<link rel="stylesheet" type="text/css" href="stiluri.css" />
</head>
Imagini
<img>
Definete o imagine
<map>
Definete harta unei imagini
<area>
Definete o zon n cadrul hrii unei imagini
<img> - include o imagine ntr-un document de tip HTML

o Imaginea nu este efectiv inserat n document; este creat o
legtur ctre ea i este alocat un spaiu corespunztor n
documentul HTML
o Atribute obligatorii:
src indic adresa URL a imaginii
alt specific textul ce va fi inclus n documentul
HTML n cazul n care imaginea nu poate fi afiat
align, border, hspace, vspace (uzate moral)
height, width specific nlimea i limea imaginii
(n pixeli sau procente)
usemap indic faptul ca imaginea este o imagine
senzitiv
onabort, onclick, ondblclick, onmousedown,
Codul HTML
Rezultat
<IMG SRC="img_osc.gif" ALT="Osciloscop">
<map> - definete harta unei imagini

o Atribut obligatoriu:
name indic numele hrii unei imagini
o Nu are atribute opionale
<map name="harta">
<area
href="curs.html" alt="Curs"
shape=rect coords="6,116,97,184">
<area
href="laboratoare.html" alt="Laboratoare"
shape=circle coords="251,143,47">
<area
href="contact.html" alt="Contact"
shape=poly coords="150,217,190,257,150,297,110,257">
</map>
<img src="imag_senz.gif" alt="Harta imagine" border=0 width=300
height=300 usemap="#harta">
<area> - definete o zon n cadrul hrii unei imagini

o Este inclus ntotdeauna ntr-un element de tip <map>
o Atribut obligatoriu:
alt specific textul ce va fi afiat pentru zona respectiv
n cazul n care imaginea nu poate fi ncrcat
shape default, rect, circle, poly
coords coordonatele zonei
href adresa URL a documentului ce va fi ncrcat la
acionarea n zona respectiv
target _blank, _parent, _self, _top
nohref
onblur, onclick, ondblclick, onfocus,
onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, onkeydown,
onkeypress, onkeyup
Etichete pentru liste i tabele

Liste
<ul>
Definete o list neordonat
<ol>
Definete o list ordonat
<li>
Definete elementul unei liste
<dir>
Uzat moral. Definete o list de directoare
<dl>
Definete o list de definiii
<dt>
Definete un element ntr-o list de definiii
<dd>
Definete decrierea unui element dintr-o list de definiii
<menu>
Uzat moral. Definete o list de meniuri
<li> - definete elementul unei liste

o Atribute opionale (uzate moral):
type(1,a,A,i,I,disc,circle,square), value
<ul> - definete o list neordonat

o Atribute opionale (uzate moral): compact, type
Codul HTML
Lista membri:
<UL>
<LI>elevi
<LI>studenti
<LI>pensionari
</UL>
Rezultat
Lista membri:
elevi
studenti
pensionari
<ol> - definete o list ordonat

o Atribute opionale (uzate moral): compact, type, start
Codul HTML
<OL>
<LI>Proiectare
<LI>Analiza costuri
<LI>Realizare prototip
<LI>Verificare
<LI>Realizare in serie
</OL>
Rezultat
1.
2.
3.
4.
5.
Proiectare
Analiza costuri
Realizare prototip
Verificare
Realizare in serie
<dl> - definete o list de definiii

<dt> - definete un element ntr-o list de definiii

<dd> - definete descrierea unui element ntr-o list de definiii

Codul HTML
<DL>
<DT>Algebra</DT>
<DD>Vnatoare de necunoscute</DD>
<DT>Balansoar</DT>
<DD>Rau de mare artiticial</DD>
<DT>Bandit</DT>
<DD>Un om de afaceri sincer</DD>
</DL>
Rezultat
Algebra
Vnatoare de necunoscute
Balansoar
Rau de mare artiticial
Bandit
Un om de afaceri sincer
Tabele
<table>
Definete un tabel
<caption>
Definete denumirea unui tabel
<th>
Definete o celul din capul de tabel
<tr>
Definete un rnd ntr-un tabel
<td>
Definete o celul ntr-un tabel
<thead>
Definete capul de tabel
<tbody>
Definete corpul unui tabel
<tfoot>
Definete footer pentru un tabel
<col />
Definete valorile atributelor pentru una sau mai multe coloane dintr-un
tabel
<colgroup> Definete un grup de coloane dintr-un tabel, n vederea formatrii
<table> - definete un tabel

align, bgcolor uzate moral
border, cellpadding, cellspacing, width,
vspace, hspace, height
frame, rules indic ce poriuni din marginile
interioare sau exterioare ale tabelului sa fie afiate
onclick,
ondblclick,
onmousedown,
onmousemove,
onmouseout,
onmouseover,
<caption> - definete denumirea unui tabel

o Atribut opional: align (uzat moral)
<th> - definete o celul din capul de tabel

bgcolor, nowrap, height, width (uzate moral)
align, valign indic modul n care se aliniaz
coninutul celulei pe orizontal i pe vertical
colspan, rowspan indic pe cte coloane sau
rnduri se ntinde celula
<tr> - definete un rnd ntr-un tabel

bgcolor (uzat moral)
coninutul rndului pe orizontal i pe vertical
<td> - definete o celul ntr-un tabel

o Atribute opionale identice ca la <th>
<table border=2 cellpadding=4>

<tr>
<th rowspan=3 bgcolor="#99ccff">Colectiv 1</th>
<td>Ion Ionescu</td> <td>25</td>
</tr>
<tr>
<td>Marian Marinescu</td> <td>35</td>
</tr>
<tr>
<td>Vasile Vasilescu</td> <td>80</td>
</tr>
<tr>
<th rowspan=3 bgcolor="#99ccff">Colectiv 2</th>
<td>Costica Constantinescu</td> <td>100</td>
</tr>
<tr>
<td>Petru Petrescu</td> <td>90</td>
</tr>
<tr>
<td>Pavel Pavelescu</td> <td>80</td>
</tr>
</table>
Ion Ionescu
Colectiv 1 Marian Marinescu
Vasile Vasilescu
25
35
80
Costica Constantinescu 100

Colectiv 2 Petru Petrescu
Pavel Pavelescu
90
80
<thead> - definete capul de tabel

o Este folosit mpreun cu elementele <tfoot> i <tbody>
coninutul elementului pe orizontal i pe vertical
<tbody> - definete corpul unui tabel

<tfoot> - definete footer pentru un tabel

o Trebuie s apar naintea elementului <tbody>
<table cellpadding=6 rules=groups frame=box>

<thead>
<tr> <th>Ziua</th> <th>Ora</th> <th>Destinatie</th>
<th>Pasageri</th> </tr>
</thead>
<tbody>
<tr> <td>Luni</td> <td>09.10</td> <td>Vaslui</td>
</tr>
<td>63</td>
<tr> <td>Miercuri</td> <td>10.05</td> <td>Roman</td> <td>59</td>

</tr>
<tr> <td>Vineri</td> <td>11.15</td> <td>Botosani</td>
<td>11</td>
</tr>
</tbody>
<tfoot>
<tr> <th align=left colspan=3>Total</th> <th>133</th> </tr>
</tfoot>
</table>
Etichete pentru cadre

Cadre
<frame>
Definete un cadru ntr-un set de cadre
<frameset> Definete un set de cadre

<noframes> Definete coninutul alternativ pentru navigatoarele ce nu pot interpreta
cadrele
<frame> - definete un cadru ntr-un set de cadre

o Fiecare cadru poate avea atribute diferite fa de celelalte cadre
din set
src adresa URL a documentului HTML ce va fi afiat n
cadrul respectiv
name specific numele cadrului
frameborder seteaz existena sau inexistena
marginii cadrului (0, 1)
scrolling specific prezena sau absena barelor de
defilare (yes, no, auto)
noresize dimensiunea cadrului nu poate fi modificat
o Nu are atribute de tip eveniment
<frameset> - definete un set de cadre

cols specific numrul i dimensiunile coloanelor ntrun set de cadre (120, 120px, 10%, *)
rows specific numrul i dimensiunile rndurilor ntrun set de cadre
onload, onunload
<noframes> - definete coninutul alternativ pentru navigatoarele ce

nu pot interpreta cadrele
o Nu toate navigatoarele pot interpreta seturi de cadre!!!
o Poate conine toate elementele ce se gsesc n elementul
<body> al unui document HTML normal
Codul HTML
<html>
<head>
<title>Exemplu set de cadre</title>
</head>
<frameset rows="75%, *" cols="*, 40%">
<frame src="cadrul_a.html">
<frame src="cadrul_b.html">
<frame src="cadrul_c.html">
<frame src="cadrul_d.html">
</frameset>
</html>
Rezultat
Cod HTML
<html>
<head>
<title>Exemplu cadre imbricate</title>
</head>
<frameset rows="15%,*">
<frame src="cadrul_1.html" scrolling=no>
<frameset cols="20%,*">
<frame src="cadrul_2.html">
<frame src="cadrul_3.html">
</frameset>
</frameset>
<noframes>
<h1>Exemplu cadre imbricate</h1>
Navigatorul nu poate interpreta seturi de cadre!
</noframes>
</html>
Rezultat

L2-Limbajul HTML - Liste, Tabele Şi Cadre

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

L2-Limbajul HTML - Liste, Tabele Şi Cadre

Încărcat de

Drepturi de autor:

Formate disponibile

Laboratorul 2

Limbajul HTML Liste, tabele i cadre

Etichete pentru legturi i imagini

Definete o legtur sau o ancor

Definete legtura dintre un document i o resurs extern

<a> - definete o legtur sau o ancor

<a href="carte.html#capitol3">Capitolul 3</a>

<link /> - definete legtura dintre un document HTML i o resurs

Definete harta unei imagini

Definete o zon n cadrul hrii unei imagini

<img> - include o imagine ntr-un document de tip HTML

<IMG SRC="img_osc.gif" ALT="Osciloscop">

<map> - definete harta unei imagini

<area> - definete o zon n cadrul hrii unei imagini

Etichete pentru liste i tabele

Definete o list neordonat

Definete o list ordonat

Definete elementul unei liste

Uzat moral. Definete o list de directoare

Definete o list de definiii

Definete un element ntr-o list de definiii

Definete decrierea unui element dintr-o list de definiii

Uzat moral. Definete o list de meniuri

<li> - definete elementul unei liste

<ul> - definete o list neordonat

<ol> - definete o list ordonat

<dl> - definete o list de definiii

<dt> - definete un element ntr-o list de definiii

<dd> - definete descrierea unui element ntr-o list de definiii

Definete denumirea unui tabel

Definete o celul din capul de tabel

Definete un rnd ntr-un tabel

Definete o celul ntr-un tabel

Definete capul de tabel

Definete corpul unui tabel

Definete footer pentru un tabel

<colgroup> Definete un grup de coloane dintr-un tabel, n vederea formatrii

<table> - definete un tabel

<caption> - definete denumirea unui tabel

<th> - definete o celul din capul de tabel

<tr> - definete un rnd ntr-un tabel

<td> - definete o celul ntr-un tabel

<table border=2 cellpadding=4>

Costica Constantinescu 100

<thead> - definete capul de tabel

<tbody> - definete corpul unui tabel

<tfoot> - definete footer pentru un tabel

<table cellpadding=6 rules=groups frame=box>

<tr> <td>Miercuri</td> <td>10.05</td> <td>Roman</td> <td>59</td>

Etichete pentru cadre

Definete un cadru ntr-un set de cadre

<frameset> Definete un set de cadre

<frame> - definete un cadru ntr-un set de cadre

<frameset> - definete un set de cadre

<noframes> - definete coninutul alternativ pentru navigatoarele ce

S-ar putea să vă placă și