Blog

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>

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

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

<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

<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>
<li type="circle">cartofi</li>
<li type="disc">morcovi</li>
</ul>

Exemple de legume:

  • rosii
  • 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:

  1. HDD-ul
    1.      II.            discheta
    2. 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>
</dl>

Legenda:

HTML

Hyper Text Mark-ul Language

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
    • CRT
    • LCD
  2. Imprimante
    • cu jet de cerneala
    • 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

<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:Această adresă de email este protejată de spambots. Trebuie să aveți JavaScript activat ca să o puteți vedea. ">Trimite e-mail</a>

Această adresă de email este protejată de spambots. Trebuie să aveți JavaScript activat ca să o puteți vedea.

<a href='mailto:Această adresă de email este protejată de spambots. Trebuie să aveți JavaScript activat ca să o puteți vedea. ?subject="subiect prestabilit"'>Trimite e-mail</a>

Această adresă de email este protejată de spambots. Trebuie să aveți JavaScript activat ca să o puteți vedea.

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:

<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
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

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 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>

R1 C1

R1 C2

R1 C3

R1 C4

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>

HTML

Afisare

<table border="1"> <tr> <th width="120">Titlul 1</th> <th width="120">Titlul 2lt;/th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>

Titlul 1

Titlul 2

1

2

3

4

 

Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, deobicei folosita ca fiind un titlu al tabelului. caption se plaseaza obligatoriu imediat dupa tag-ul table dar inainte de prima eticheta tr.

Exemplu: un tabel cu 4 randuri si 2 coloane folosind eticheta caption

HTML

Afisare

<table border="1"> <caption>Necesar alimente</caption> <tr> <th width="120">Produse</th> <th width="120">Cantitatelt;/th> </tr> <tr> <td>Fructe</td> <td>1 kg</td> </tr> <tr> <td>Legume</td> <td>5 kg</td> </tr> <tr> <td>Carne</td> <td>1,5 kg</td> </tr> </table>

Necesar alimente

Produse

Cantitate

Fructe

1 kg

Legume

5 kg

Carne

1,5 kg

 

Exemplu: tabelului anterior ii adaugam o imagine de fundal folosind style in zona head

<html>
<head>
<style type="text/css">
#fundal {
background-image : url(poza.jpg);
}
</style>
</head>
<body>
<table border="1" id="fundal">
...
</body>
</html>

Legenda:
tr = Defines a row in a table
td = Defines a cell in a table
th = Defines a table header cell in a table

Sunete

Cateva din formatele de sunete utilizate in paginile web sunt: MIDI (*.mid sau *.midi), WAVE (*.wav), AU (*.au).

In pagini putem introduce:
1. link-uri catre fisiere de sunet
2. sunete care care sa fie audiate direct din pagina web
3. sunet de fond (fundal sonor)

Exemplu: Varianta 1 este un simplu link catre un fisier de sunet

HTML

Afisare

<a href="/1.mid">fisier sunet</a>

fisier sunet

A doua varianta mentionata se realizeaza folosind fisiere de tip flash, care pot contine si butoane de control de tip Play, Pause, Stop.

A treia varianta este acceptata doar de browserul Internet Explorer si consta in inserarea in interiorul corpului paginii a etichetei: <bgsound> care poate avea atributele:
src - fisierul sursa de sunet care va fi audiat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi audiat fisierul)

Videoclipuri

Formatele de videoclipuri utilizate in paginile web sunt: MPEG (*.mpg sau *.mpeg), QuickTime (*.mov), AVI (*.avi).

In pagini putem introduce:
1. link-uri catre fisiere video
2. videoclipuri care care sa fie vizionate direct din pagina web

Exemplu: Varianta 1 este un simplu link catre un fisier video

HTML

Afisare

<a href="/1.avi">fisier video</a>

fisier video

A doua varianta este acceptata doar de browserul Internet Explorer care permite atribute speciale in eticheta <img>:
dynsrc - fisierul sursa video care va fi vizionat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi vizionat fisierul)
start - indica momentul in care fisierul va fi vizionat (fileopen=cand pagina a fost incarcata, mouseover=cand mose-ul este deasupra imaginii)
controls - afiseaza butoanele de control

Cadre

Exemplele prezentate in capitolele anterioare incarcau o singura pagina HTML in fereastra browserului.

Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este ca perechea de etichete <body> </body> este inlocuita de <frameset> </frameset>, iar in interiorul lor cadrele sunt delimitate de <frame> si </frame>.

Atributele etichetei frameset sunt:
cols imparte pagina in coloane si are valori exprimate in procente din dimensiunea ferestrei, numar de pixeli sau * adica spatiul ramas
rows imparte pagina in randuri cu aceleasi valori ca la cols
bordercolor culoarea tuturor chenarelor conform modelului #rrggbb
frameborder inhibarea afisarii chenarelor cu valorile yes sau no

Cadrele sunt introduse prin perechea de etichete <frame> </frame>, si suporta atributele:
src fisierul sau adresa fisierului introdus
bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb
noresize dezactiveaza posibilitatea vizitatorului de a redimensiona cadrul
scrolling adauga cadrului bare de defilare cu valorile yes no si auto

Exemplu: pagina cu doua cadre orizontale in proportia 20% si 80% din inaltimea totala. Pagina de sus are chenarul rosu iar cea de jos are scroll.

<html>
<head>
<title>Exemplul 8_1</title>
</head>
<frameset rows="20%,80%">
<frame src="/exemplu8_1_1.html" bordercolor="#ff0000">
<frame src="/exemplu8_1_2.html" scrolling="yes">
</frameset>
</html>

Exemplu: pagina cu doua cadre verticale in proportia 40% si 60% din latimea totala, fara posibilitatea de redimensionare a cadrelor

<html>
<head>
<title>Exemplul 8_2</title>
</head>
<frameset cols="40%,60%">
<frame src="/exemplu8_2_1.html">
<frame src="/exemplu8_2_2.html" noresize>
</frameset>
</html>

Exemplu: pagina cu doua cadre. In cadrul din stanga sunt link-ri catre alte pagini care se vor deschide in cadrul din dreapta (se poate verifica functionarea atributului target al legaturii). Cadrul din stanga va avea scroll.

In situatia in care browserul folosit nu suporta pagini care contin cadre, imaginea afisata va fi goala. Pentru a evita acest lucru vom introduce un mesaj incadrat de <body> si </body> intre etichetele <noframes> si </noframes> prin care informam vizitatorul ca foloseste un browser care nu suporta cadre.

<frameset cols = "30%, 40%,*">
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.html">
<frame src ="pag2.html">
<frame src ="pag3.html">
</frameset>

Cadre in-line
Sunt blocuri care se introduc in pagina prin perechea de etichete <iframe> si </iframe>, si au atributele:
src fisierul sau adresa acestuia
height inaltimea cadrul
width latimea cadrul
frameborder grosimea bordurii (chenarului)
scrolling adauga bare de defilare cu valorile yes no si auto
align aliniaza cadrul (left, right, center, top, bottom, middle)
vspace distanta peste si sub cadru
hspace distanta in stanga si in dreapta de cadru

Exemplu: o pagina in care este gazduit un cadru in-line. Si aici se poate introduce un mesaj pentru browserele care nu suporta cadre in-line. Modul de afisare al exemplului poate diferi de la un browser la altul.

<html>
<head>
<title>Exemplul 8_4</title>
</head>
Mai jos este un cadru in-line cu urmatori parametrii:<br>
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br>
<iframe src="/pag.html" width="300" height="100" hspace="200" vspace="100" scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe>
</body>
</html>

Formulare

Folosind formularele webdesignerul sau administratorul site-ului poate colecta diverse informatii de la vizitatori.

Cele mai importante atribute ale etichetei <form> sunt action si method.
action metioneaza adresa scriptului (aflat pe server) care va interpreta formularul. Aceste scripturi pot fi scrise in limbajele PHP sau Pearl.
method indica metoda folosita de browser pentru transmiterea formularului. Poate lua valorile get si post.
get - datele sunt trimise prin adaugarea la adresa indicata de action. Permite trimiterea unor mici cantitati de date.
 post - datele sunt trimise separat si sunt permise cantitati mari de date.

Exemplu: formular cu 2 campuri, buton Trimite si buton Sterge

HTML

Afisare

<form action="script.php" method="post">
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
<input type="submit" value="Trimite"><input type="reset" value="Sterge">
</form>

Nume:
Prenume:

Eticheta <input> poate avea atributele:
type - indica tipul datelor care vor fi introduse (text=text, submit=trimite, reset=sterge, password=parola, hidden=nu este vizibil, checkbox=caseta de validare, button=buton, radio=selectarea unui singur element dintr-un grup, file=fisier pentru upload, image=butonul va fi inlocuit cu o imagine)
name - numele asociat cimpului respectiv. Este folosit la prelucrarea datelor de catre scriptul mentionat in action
size - numarul de caractere vizibile din camp
maxlenght - numarul maxim de caractere introduse in camp
readonly - datele prezente in camp nu pot fi modificate

Exemplu: formular continand toate valorile atributului <input>

HTML

Afisare

<form action="script.php" method="post">
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
Telefon:<input type="text" name="telefon"><br>
Fax:<input type="text" name="fax"><br>
Email:<input type="text" name="email"><br>
Sexul: Masculin<input type="radio" name="sex" value="m"> Feminin<input type="radio" name="sex" value="f">

Studii: <select> <option value="scoala">Scoala profesionala <option value="liceu">Liceu <option value="facultate">Facultate </select>

Accesati Internetul de la:
Serviciu<input type="checkbox" name="serv">
Acasa<input type="checkbox" name="acasa">
Internet cafe<input type="checkbox" name="cafe">

Fisier: <input type="file" name="file">

Observatii:<textarea name="obs" rows="5" cols="30"></textarea>

<input type="submit" value="Trimite"><input type="reset" value="Sterge">
</form>

Nume:
Prenume:
Telefon:
Fax:
Email:

Sexul: Masculin Feminin

Studii:

Accesati Internetul de la:
Serviciu
Acasa
Internet cafe

Fisier:

Observatii:

Constructia select introduce un meniu derulant (lista de selectie), valorile fiind declarate prin option.

In campul textarea se poate introduce text, avand atributele cols (numar de coloane) si rows (numar de randuri).

Daca doriti puteti particulariza butoanele din formular folosind atributul type=image in cadrul etichetei input si indicand fisierul imagine.

HTML

Afisare

<form action="script.php" method="post">
<input type="image" src="/trimite.gif" alt="Trimite">
</form>

 

Harti de imagini

Hartile de imagini permit declararea unor zone din imagine ca legaturi catre alte pagini web si implica doua aspecte.

Imaginea este declarata ca fiind harta. Pentru aceasta eticheta <img> a imaginii are urmatoarele atribute:
src fisierul sau adresa fisierului imagine
usemap are valoarea de genul #nume care este folosit un interiorul etichetei <map> prezentate mai jos

Harta se defineste folosind perechea de etichete <map> si <map>, cu atributul obligatoriu name, avand aceeasi valoare ca la usemap din img.
Zona sau zonele continute de harta sunt introduse prin eticheta <area> cu atributele obligatorii:
shape fiind forma ariei declarate cu valorile: rect=dreptunghiulara, circle=circulara, poly=poligonala, default=alte forme (diferite de cele anterioare)
coords coordonatele zonei
href adresa paginii destinatie a legaturii

Exemplu: o harta de imagini care contine 5 zone

<html>
<head>
<title>Exemplul 10</title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="/harta.gif" usemap="#harta" width="280" height="160" border="0">
<map name="harta">
<area shape="rect" coords="20,20,70,70" href="/pag1.html">
<area shape="rect" coords="20,90,120,140" href="/pag2.html">
<area shape="circle" coords="200,80,30" href="/pag3.html">
<area shape="circle" coords="200,80,60" href="/pag1.html">
<area shape="poly" coords="90,70,120,70,120,20" href="/pag3.html">
</map>
</body>
</html>

Verificarea paginilor

Dupa ce ati terminat de construit paginile este recomandata o verificare din mai multe puncte de vedere inainte de a considera site-ul terminat.

Verificarea corectitudinii paginii
Verificarea corectitudinii codului HTML folosit poate fi facut online la una din adresele mentionate aici.

Verificati corectitudinea textului continut in pagini

Verificarea afisarii paginii
Se va verifica afisarea corecta a paginii in browser, incarcarea tuturor imaginilor si a continutului. Verificare se va face cu mai multe browser-e (Internet Explorer, Firefox, Opera si altele).

Verificarea link-urilor
Aceasta operatie poate fi usor efectuata folosind un Link checker online. Trimiterea catre o adresa invalida poate conduce vizitatorul la parasirea site-ului.
Se vor verifica datele din pagina de contact (adresa, telefoane si adresa de email).

Dupa ce am parcurs lectiile de HTML si CSS vom realiza impreuna un mic site, iar ca editor al codului sursa folosim Notepad.

Pentru pozitionarea elementelor distinctive ale paginii pot fi folosite tabele sau CSS. In exemplul nostru vom folosi tabelele.

Layout-ul paginii va fi:
- latime totala 750 px
- sus vom avea un header
- meniul in stanga, latime 150 px
- continutul paginii in drepta
- jos vom avea un footer

 

Vom crea un tabel cu latime 750 px, avand 3 randuri, iar pe fiecare rand cate 2 celule. Pe randul 1 si 3 unim cele 2 celule.

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2">Header</td></tr>
<tr><td width="150">Meniu</td><td width="600">Continut</td></tr>
<tr><td colspan="2">Footer</td></tr>
</table>

Inaltimea fiecarui rand va fi stabilita de elementul cel mai inalt (imagine sau text), sau prin introducerea atributului height in fiecare element td. Stabilim pentru randul 1 si 3 inaltime 50 px, iar pentru randul 2 inaltime 200 px.

Folosind CSS vom formata cele 4 celule in mod independent inserand in fiecare element td atributul class cu valoarea header, meniu, continut si footer.
Utilizarea CSS-ului extern o vom face inserand urmatoarea linie in zona head a paginii.

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

In fisierul CSS extern stabilim pentru fiecare celula in parte culoarea si marimea fontului, culoarea fundalului, pozitionarea pe verticala sau orizontala a continutului, etc.

Puteti vedea fisierele finale html si css pentru pagina creata.

Voua va revine ultima etapa, adaugarea informatiei in fiecare celula. Pentru dezvoltarea in continuare a paginii puteti introduce in fiecare celula (in locul textului corespunzator: Header, Meniu, Continut, Footer) alte etichete html (liste, tabele, formulare) care pozitioneze informatia dorita.
Header-ul poate contine informatii despre tema site-ului sub forma text sau imagine (logo sau banner). In meniu introduceti o lista de link-uri catre celelalte pagini ale site-ului. Footer-ul poate contine link-uri catre: pagina de contact sau pagini externe.

Pentru a pastra layout-ul prezentat, celelalte pagini ale site-ului le obtineti copiind fisierul site.html si apoi le redenumiti, urmand sa modificati continutul functie de tema noii pagini.
Acest mod de obtinere a noilor pagini este cel mai simplu, dar nu cel mai eficient, fiind recomandat incepatorilor.
Metoda 1: utilizarea cadrelor, prin care fiecare zona o transformati in cadru, in acest fel de la o pagina la alta doar cadrul continut se schimba. Metoda 2: transformarea fisierelor html in php. Astfel zonele care se repeta vor fi transformate in fisiere php externe, ele find adaugate in pagina principala prin include.

Sper ca prin acest exemplu practic, realizarea unui site sa nu mai para ceva asa de complicat.

Etichete HTML

Data publicarii: Iunie 2006

 

eticheta

semnificatie

<!-- ??? -->

comentariu

<!DOCTYPE ...>

tipul documentului

<a ...>

legatura (link)

<area>

arie, folosita la hartile de imagini

<b>

bold, text ingrosat

<bgsound>

adauga paginii muzica de fond

<big>

font marit

<body ...>

corpul paginii, contine informatia ce va fi afisata

<br>

sfarsit de rand

<caption ...>

"titlul" tabelului

<code>

text continand cod de computer

<cite>

citat (text italic)

<dd>

descrierea definitiei

<del>

text taiat cu o linie orizontala

<div>

formateaza un sir de caractere

<dl>

lista de definitii

<dt>

termen dintr-o lista de definitii

<em>

text evidentiat

<font ...>

font

<form ...>

formular

<frame ...>

cadru

<frameset ...>

defineste blocul compus din cadre

<h1 ...>

header sau titlu (de la h1 la h6)

<head>

defineste antetul paginii HTML

<hr ...>

introduce o linie orizontala

<html>

anunta ca blocul este tip HTML

<i>

text italic

<iframe ...>

fereastra in-line

<img ...>

imagine

<input ...>

element (camp) al formularului

<kbd>

text introdus de la tastatura

<li ...>

termen al listei

<link ...>

legatura

<meta>

metainformatii despre pagina

<noframes>

text alternativ pentru cadru

<ol>

lista ordonata

<option ...>

element al listei de selectii

<p ...>

paragraf nou

<pre ...>

text preformatat

<select ...>

lista de selectii din formular

<samp>

mostra de cod

<span>

formateaza mai multe elemente

<small>

font micsorat

<strong>

text ingrosat

<sub>

text indice

<sup>

text exponent

<table ...>

tabel

<td ...>

celula a tabelului

<textarea>

camp din formular in care se introduce text

<th>

headerul tabelului

<title>

titlul paginii HTML

<tr ...>

rand al tabelului

<tt>

text monospatiat

<u>

text subliniat

<ul>

lista neordonata

 

 

CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.).

Beneficiile sintaxei CSS sunt:

  • formatarea este introdusa intr-un singur loc pentru tot documentul
  • editarea rapida a etichetelor
  • datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului paginii, implicit incarcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:
nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline
nivelul 2 este informatia introdusa in blocul HEAD, tip embedded
nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe

Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3.

Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practic deoarece poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot folosi acelasi fisier extern CSS) eliminand timpul necesar introducerii codului corespunzator in fiecare pagina si totodata editarea lor intr-un singur loc pentru mai multe fisiere.
Extensia acestor fisiere este .css.
Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii:

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

Atributele indica urmatoarele: rel - fisierul este tip styleshhet
type - tip text ce contine comenzi CSS
href - fisierul sau adresa fisierului CSS.

Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete <head> si </head> conform sintaxei:

<style type="text/css">
<!--
... comenzi CSS ...
-->
</style>

Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style.

Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:

<eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
</eticheta>

Este permisa folosirea comentariilor in CSS astfel:

/* Acesta este un comentariu in CSS */

div, span si etichete CSS

Eticheta <div> functioneaza asemanator cu eticheta <p>, putand gazdui comenzi CSS aplicabile la un bloc sau mai multe din continutul paginii.

Eticheta <span> este similara cu eticheta <font> (pe cale de a fi eliminata de consortiul W3C) aplicandu-se elementelor dintr-un paragraf.

Etichetele CSS sunt cunoscute sub numele de elemente sau selectori avand un layout asemanator cu etichetele HTML.

eticheta HTML
<eticheta argument="valoare">

eticheta CSS
element{argument: valoare;}

elementul poate fi o eticheta HTML, un id sau un class, iar argumentul si valoarea sunt aceleasi ca in HTML.

Exemplu: acelasi text realizat in HTML si in HTML cu CSS

HTML
<font color="#00FF00">
<p>Text verde</p>
</font>

HTML cu CSS
<p style="color: #00FF00;">
Text verde
</p>

Comenzile de CSS pot fi plasate si in zona HEAD rezultand o functionare identica, chiar mai mult, aceleasi comenzi putand fi folosite in mai multe locuri in aceeasi pagina.

Exemplu: comenzi CSS incluse in zona HEAD

<html>
<head>
<title>Exemplul 1_1</title>
<style type="text/css">
<!-- p{color: #00FF00;}-->
</style>
</head>
<body>
<p>Text verde</p>
Text negru
<p>Text verde</p>
</body>
</html>

Elementele id si class

id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci cand dorim sa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de browsere numele asociate zonelor nu vor contine caracterul _.

Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML, plasandu-se un nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.

Exemplu: folosirea elementului id

<html>
<head>
<title>Exemplu 2_1</title>
<style type="text/css">
<!-- #albastru{color: #0000FF;}-->
</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>
Text negru
</body>
</html>

Elementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.

Exemplu: folosirea elementului class

<html>
<head>
<title>Exemplu 2_2</title>
<style type="text/css">
<!-- .rosu{color: #FF0000;}-->
</style>
</head>
<body>
<p class="rosu">Primul text rosu introdus prin class "rosu"</p>
Text negru
<p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>
</body>
</html>

Stiluri pentru fonturi

Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori in zona HEAD ori in interiorul etichetei dorite.
In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.

font-family
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.

Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea

<html>
<head>
<title>Exemplu 3_1</title>
<style type="text/css">
<!-- p{font-family: font1,font2,arial;}-->
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>

Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML

<html>
<head>
<title>Exemplu 3_2</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>

font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.

Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli

<html>
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>

Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.

Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.

CSS keyword

numar FONT size

xx-small

1

x-small

2

small

3

medium

4

large

5

x-large

6

xx-large

7

Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din cuvintele de mai sus.

Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimband 20px cu 200%.

font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.

<style type="text/css">
<!-- p{font-style: italic;}-->
</style>

font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

<style type="text/css">
<!-- p{font-weight: 700;}-->
</style>

Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).

Exemplu: folosirea unui stil compus aplicat etichetei p

<html>
<head>
<title>Exemplu 3_4</title>
<style type="text/css">
<!--
p{
font-family: arial;
font-size: 20px;
font-style: italic;
font-weight: 800;}
-->
</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>

Stiluri pentru text

Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML.

In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:

<style type="text/css">
<!--
p{text-align: center;}
-->
</style>

Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului

<html>
<head>
<title>Exemplu 4_1</title>
<style type="text/css">
<!--
p{text-align: center;}
-->
</style>
</head>
<body>
<div class="pecentru"><img src="/poza.jpg"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html>

vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom.
In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td> ale tabelului

<style type="text/css">
<!--
.sus{vertical-align: top;}
-->
</style>

float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii.

Exemplu: cream clasa auto si o aplicam inaginii

<html>
<head>
<title>Exemplu 4_2</title>
<style type="text/css">
<!--
.auto{float: left;}
-->
</style>
</head>
<body>
<img src="/poza.jpg" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".
</body>
</html>

Tabulare
text-indent este folosit pentru alinierea textului in interior avand valori exprimate in inci (in), centimetri (cm) sau pixeli (px).
In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior

<style type="text/css">
<!--
p{text-indent: 10px;}
-->
</style>

Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none.

Exemplu: stilul asociat etichetei p este prezentat in HEAD

<html>
<head>
<title>Exemplu 4_3</title>
<style type="text/css">
<!--
p{text-decoration: underline;}
-->
</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>

Culoare
color defineste culoarea textului dintr-o zona sau intraga pagina.

Exemplu: stilul asociat etichetei p este prezentat in HEAD

<html>
<head>
<title>Exemplu 4_4</title>
<style type="text/css">
<!--
p{color: #0000FF;}
-->
</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>

Stiluri pentru legaturi
In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate in interiorul etichetei BODY.
Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS.

Exemplu

<html>
<head>
<title>Exemplu 4_5</title>
<style type="text/css">
<!--
a{font-family: arial; font-size: 20px;}
a:link {color: #0000FF;}
a:visited {color: #00FF00;}
a:active {color: #FF0000;}
a:hover {color: #000000;}
-->
</style>
</head>
<body>
Text normal
<a href="/exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html>

a defineste stilul general pentru legatura
a:link defineste stilul legaturii nevizitate
a:visited defineste stilul legaturii vizitate
a:active defineste stilul legaturii active (nu prea se foloseste)
a:hover defineste stilul cand mouse-ul este deasupra legaturii

Stiluri pentru background

Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text.

Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.

Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p

<html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">
<!--
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>

Imagine de fond
Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect.

Exemplu: definim un stil pentru eticheta p

<html>
<head>
<title>Exemplu 5_2</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

Repetare
Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x imaginea se repeta pe orizontala
repeat-y imaginea se repeta pe verticala
no-repeat imaginea nu se repeta

Exemplu: imaginea nu se repeta sub eticheta p

<html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);
background-repeat: no-repeat;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

Pozitia
In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
in prima pozitie poate fi: top, center, bottom, percentage sau pixel
in a doua pozitie poate fi: right, center, left, percentage sau pixel

Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare

<html>
<head>
<title>Exemplu 5_4</title>
<style type="text/css">
<!--
body {background-image: url(poza.jpg);
background-repeat: no-repeat;
background-position: top center;}
-->
</style>
</head>
<body>
Text normal
</body>
</html>

Stiluri pentru liste

list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS in zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS decat pentru eticheta li.

Sintaxa este:

<style type="text/css">
<!--
li {list-style-type: valoare;}
-->
</style>

valoarea poate fi:

valoare

disc

disc

disc

circle

cerc

square

patrat

decimal

numere intregi

lower-roman

numere romane, caractere mici (i, ii, iii, iv)

upper-roman

numere romane, caractere mari (I, II, III, IV)

upper-alpha

litere mari (A, B, C, D)

lower-alpha

litere mici (a, b, c, d)

none

nimic

Exemplu: lista ordonata folosind marcaje cu litere mici

<html>
<head>
<title>Exemplu 6_1</title>
<style type="text/css">
<!--
li {list-style-type: lower-alpha;}
-->
</style>
</head>
<body>
Necesar materiale:
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>

list-style-image
In afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin comansa CSS list-style-image. Imaginile sunt introduse prin adresa url().

Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif

<html>
<head>
<title>Exemplu 6_2</title>
<style type="text/css">
<!--
li {list-style-image: url(punct.gif);}
-->
</style>
</head>
<body>
Necesar materiale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html>

Chenare si margini

Fiecare element este incadrat intr-o caseta care este compusa din urmatoarele elemente:

 


marginea (margin) este spatiul exterior chenarului pana la celelalte elemente
chenarul (border) este o bordura care inconjoara elementul
completarea (padding) stabileste distanta dintre continut si chenar
continutul include informatia utila (text, tabele, imagini, formulare, etc.)

Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate dimensiunile prezentate in continuare.

width si height
Latimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height. Aceste atribute pot fi adaugate sau suprascrise prin comenzi CSS.

Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii

<html>
<head>
<title>Exemplu 7_1</title>
<style type="text/css">
<!--
img {width: 50px; height: 100px;}
-->
</style>
</head>
<body>
<img src="/margini.gif">
</body>
</html>

padding si margin
padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, padding-left sau padding-right.

margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top, margin-bottom, margin-left sau margin-right.

Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt (puncte) sau cm (centimetri).

Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga si 25px fata de latura de sus

<html>
<head>
<title>Exemplu 7_2</title>
<style type="text/css">
<!--
img {margin-left: 100px; margin-top: 25px;}
-->
</style>
</head>
<body>
<img src="/margini.gif">
</body>
</html>

border
Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea chenarului este border avand proprietatile asociate width, style si color. Pentru a fi siguri ca aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie sa declaram pentru border cel putin width si style.

border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt (puncte), cm (centimetri) sau in (inci).

border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove, ridge, inset si outset.

border-color stabileste culoarea chenarului si poate fi exprimata prin valoare hexazecimala sau in cuvinte.

Exemplu: definim noua clase utilizand proprietatile border-width border-style si border-color

<html>
<head>
<title>Exemplu 7_3</title>
<style type="text/css">
<!--
.clasa1 {border-width: 2px; border-style: dotted; border-color: red;}
.clasa2 {border-width: 3px; border-style: dashed; border-color: blue;}
.clasa3 {border-width: 2px; border-style: solid; border-color: green;}
.clasa4 {border-width: 3px; border-style: double; border-color: black;}
.clasa5 {border-width: 2px; border-style: groove; border-color: silver;}
.clasa6 {border-width: 3px; border-style: ridge; border-color: lime;}
.clasa7 {border-width: 2px; border-style: inset; border-color: yellow;}
.clasa8 {border-width: 3px; border-style: outset; border-color: aqua;}
.clasa9 {border-width: 2px; border-style: hidden; border-color: olive;}
-->
</style>
</head>
<body>
<div class="clasa1">border-width: 2px; border-style: dotted; border-color: red;</div><br>
<div class="clasa2">border-width: 3px; border-style: dashed; border-color: blue;</div><br>
<div class="clasa3">border-width: 2px; border-style: solid; border-color: green;</div><br>
<div class="clasa4">border-width: 3px; border-style: double; border-color: black;</div><br>
<div class="clasa5">border-width: 2px; border-style: groove; border-color: silver;</div><br>
<div class="clasa6">border-width: 3px; border-style: ridge; border-color: lime;</div><br>
<div class="clasa7">border-width: 2px; border-style: inset; border-color: yellow;</div><br>
<div class="clasa8">border-width: 3px; border-style: outset; border-color: aqua;</div><br>
<div class="clasa9">border-width: 2px; border-style: hidden; border-color: olive;</div>
</body>
</html>

Pozitionare

Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.

Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).

Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.

Exemplu: am aplicat pozitionarea absoluta etichetei h4

<html>
<head>
<title>Exemplu 8_1</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>

Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top.

Exemplu: am folosit doua obiecte, unul pozitionat absolut, celalalt relativ

<html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">
<!--
.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>

Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra.

Exemplu: am folosit trei obiecte pozitionate absolut

<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</style>
</head>
<body>
<div class="element1"><img src="/poza.jpg"></div>
<div class="element2"><img src="/poza.jpg"></div>
<div class="element3"><img src="/poza.jpg"></div>
</body>
</html>

Pozitionare

Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.

Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).

Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.

Exemplu: am aplicat pozitionarea absoluta etichetei h4

<html>
<head>
<title>Exemplu 8_1</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>

Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top.

Exemplu: am folosit doua obiecte, unul pozitionat absolut, celalalt relativ

<html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">
<!--
.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>

Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra.

Exemplu: am folosit trei obiecte pozitionate absolut

<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</style>
</head>
<body>
<div class="element1"><img src="/poza.jpg"></div>
<div class="element2"><img src="/poza.jpg"></div>
<div class="element3"><img src="/poza.jpg"></div>
</body>
</html> 

JoomShaper