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 http://www.nume.ro este afisata pagina http://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”&gt;

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”&gt;

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

si

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

 

 

 

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
text aliniat pe centru
text aliniat pe centru
text aliniat la stanga
text aliniat la stanga
text aliniat la dreapta
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
  • morcovii

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

Exemplu

HTML Afisare
Exemple de combustibili:
<ol>
<li>benzina</li>
<li>motorina</li>
<li>gaz lichefiat</li>
</ol>
Exemple de combustibili:

  1. benzina
  2. motorina
  3. gaz lichefiat

Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea default):

Exemplu

HTML Afisare
Medii de stocare:
<ol>
<li type=”I”>HDD-ul</li>
<li type=”I”>discheta</li>
<li type=”I”>CD-ROM-ul</li>
</ol>
Medii de stocare:

I.HDD-ul

  1. discheta

III.CD-ROM-ul

Liste de definitii
Aceste liste sunt delimitate de etichetele <dl> si </dl>.
Termenii listei sunt delimitati de etichetele <dt> si </dt> iar definitiile termenilor de <dd> si </dd>.

Exemplu

HTML Afisare
Legenda:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Mark-ul Language</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</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”&gt;

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 http://www.drogoreanu.ro

HTML Afisare
<a href=”http://www.drogoreanu.ro”>Catalin Drogoreanu</a> Catalin Drogoreanu

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

HTML Afisare
<a href=”http://www.drogoreanu.ro&#8221; target=”_blank”>Catalin Drogoreanu</a> Catalin Drogoreanu(http://www.drogoreanu.ro)

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

HTML Afisare
<a href=”mailto:test@test.ro”>Trimite e-mail</a> Trimite e-mail(mailto:test@test.ro)
<a href=’mailto:test@test.ro?subject=”subiect prestabilit”‘>Trimite e-mail</a> Trimite e-mail

Culoarea linkurilor
Poate fi modificata introducand in eticheta body urmatoarele atribute:
LINK legatura nevisitata (default albatru)
VLINK legatura visitata (default rosu)
ALINK legatura activa (nu prea se foloseste – default portocaliu)

Exemplu:

<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(http://www.drogoreanu.ro/tutorials/images/1.mid)

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 (http://www.drogoreanu.ro/tutorials/images/1.avi)

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 si , 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>
http://pag.html
</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.

 

ANEXE

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

 

 

FAQ

Q1: Ce trebuie sa fac pentru a-mi gazdui site-ul pe un server gratuit?
1. Pe pagina de inregistrare a serverului respectiv completezi un formular cu datele personale impreuna cu un username (care trebuie sa fie disponibil) si o parola.
2. Primesti pe adresa de email introdusa in formular un link catre o pagina de activare a contului.
3. Gata, ai domeniu. Acum poti pune (upload-a) fisierele site-ului tau pe server, folosind un client FTP sau consola de upload pusa la dispozitie de administrator.
4. Felicitari, ai terminat. Poti sa-ti vizitezi site-ul folosind browserul.

Q2: Care sunt serverele romanesti care ofera gazduire gratuita?
Cateva astfel de servere sunt:
AS.ro, LX.ro, ROL.ro, BUMERANG.ro, IDILIS.ro, XHOST.RO

Q3: Ce trebuie sa fac pentru a-mi inregistra domeniu .ro?
1. Verifica la RNC.ro ca numele dorit este liber. In casuta din pagina principala introduceti numele domeniului dorit (nume.ro) si apoi Enter.
2. Inregistrarea se poate face la RNC.ro sau la alte firme specializate in inregistrari de domenii prin completarea unui formular cu date personale care ulterior vor fi asociate cu domeniul Dvs.
3. Achitati plata corespunzatoare inregistrarii domeniului.
4. Pentru verificarea inregistrarii si a datelor asociate accesati pagina RNC.ro.

Q4: Cum pot fi schimbate drepturile de acces ale unui fisier sau director de pe server?
Modelul de securitate UNIX are niveluri diferite pentru accesul la fisiere sau directoare, a diferitelor grupuri de persoane. Sunt 3 grupuri pentru accesul fisierelor, fiecare cu 3 tipuri de permisiuni.
Grupurile sunt: User/Owner, Group, Other/World.
Permisiunile sunt: Read (r), Write (w), Execute (x) sau folosind abrevierile de mai jos (sunt prezentate permisiunile pentru un singur grup):
— (0) = fara acces
–x (1) = executare
-w- (2) = scriere
-wx (3) = scriere-executare
r– (4) = citire
r-x (5) = citire-executare
rw- (6) = citire-scriere
rwx (7) = citire-scriere-executare

Exemplu: Change mode to 777 – Implica setarea accesului deplin pentru toate cele 3 grupuri (rwx rwx rwx).

Modificarea drepturilor de acces (Change mode) asupra unui fisier sau director pot fi schimbate din pagina de administrare a domeniului pe server (de exemplu din CPanel) sau folosind programe tip FTP (clic dreapta pe folderul sau fisierul dorit, selectare file permission sau chmod(UNIX), setare drepturi de acces asupra fisierului pentru fiecare din cele 3 grupuri).

Q5: Ce inseamna Free Dynamic DNS?
In situatia in care gazduiti pe un server un site, un hub sau alta aplicatie dar nu aveti asociat un domeniu, de exemplu nume.ro, singura varianta de accesare este prin adresa IP, http://XXX.XXX.XXX.XXX, care este incomoda de folosit, deoarece este greu de memorat o astfel de adresa.
O alternativa este Free Dynamic DNS, care asociaza la respectiva adresa IP un nume provizoriu, de exemplu nume.no-ip.com. Pentru inregistrare se completeaza online un formular care contine numele domeniului solicitat (care trebuie sa fie liber), adresa IP asociata, un username si adresa de email a solicitantului.
NO-IP.com ofera gratuit Free Dynamic DNS.

In HTML culorile pot fi introduse in doua moduri:
– prin denumirea lor in limba engleza (pentru un numar redus de culori)
– in format hexazecimal folosind doua caractere (incepand de la 00 la FF) pentru fiecare din cele trei culori rosu (R), verde (G) si albastru (B) astfel #rrggbb.

Pentru culori, in format zecimal, valoarea minima este 0 (corespunzatoare valorii 00 in hexa) iar cea maxima 255 (corespunzatoare valorii FF in hexa).

Exemplu:
Sa presupunem ca am ales o culoare folosind aplicatia Paint din Windows care ne indica R=111 G=52 B=200.
Folosind calculatorul stiintific din Windows transformam aceste valori din format zecimal in format hexazecimal si obtinem R=6F, G=34 si B=C8.
Formatul final recunoscut de HTML este #6F34C8 (caracterul # continut la inceput este obligatoriu).

Format zecimal Format hexazecimal Format HTML Rezultat
R=111 R=6F #6F34C8
G=52 G=34
B=200 B=C8

Unele aplicatii de grafica furnizeaza valoarea corespunzatoare culorii dorite direct in formatul recunoscut de HTML.

Web safe colors

FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00
FF99FF FF99CC FF9999 FF9966 FF9933 FF9900
FF66FF FF66CC FF6699 FF6666 FF6633 FF6600
FF33FF FF33CC FF3399 FF3366 FF3333 FF3300
FF00FF FF00CC FF0099 FF0066 FF0033 FF0000
 
CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00
CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00
CC99FF CC99CC CC9999 CC9966 CC9933 CC9900
CC66FF CC66CC CC6699 CC6666 CC6633 CC6600
CC33FF CC33CC CC3399 CC3366 CC3333 CC3300
CC00FF CC00CC CC0099 CC0066 CC0033 CC0000
 
99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00
99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00
9999FF 9999CC 999999 999966 999933 999900
9966FF 9966CC 996699 996666 996633 996600
9933FF 9933CC 993399 993366 993333 993300
9900FF 9900CC 990099 990066 990033 990000
 
66FFFF 66FFCC 66FF99 66FF66 66FF33 66FF00
66CCFF 66CCCC 66CC99 66CC66 66CC33 66CC00
6699FF 6699CC 669999 669966 669933 669900
6666FF 6666CC 666699 666666 666633 666600
6633FF 6633CC 663399 663366 663333 663300
6600FF 6600CC 660099 660066 660033 660000
 
33FFFF 33FFCC 33FF99 33FF66 33FF33 33FF00
33CCFF 33CCCC 33CC99 33CC66 33CC33 33CC00
3399FF 3399CC 339999 339966 339933 339900
3366FF 3366CC 336699 336666 336633 336600
3333FF 3333CC 333399 333366 333333 333300
3300FF 3300CC 330099 330066 330033 330000
 
00FFFF 00FFCC 00FF99 00FF66 00FF33 00FF00
00CCFF 00CCCC 00CC99 00CC66 00CC33 00CC00
0099FF 0099CC 009999 009966 009933 009900
0066FF 0066CC 006699 006666 006633 006600
0033FF 0033CC 003399 003366 003333 003300
0000FF 0000CC 000099 000066 000033 000000

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s