Blog

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>

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

 

 

Citit 1377 ori
Evaluaţi acest articol
(0 voturi)
Cătălin

Contactați-mă la orice oră, pentru orice problemă.

Website www.trandafir.eu
Mai multe din această categorie: CSS - Notiuni de baza »
Login pentru a posta comentarii
JoomShaper