Html curs complet
HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web.
Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html sau .htm. In marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>. Browserul interpreteaza aceste etichete afisand rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari).
Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html sau .htm. In marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>. Browserul interpreteaza aceste etichete afisand rezultatul pe ecran. HTML-ul 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.
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>
<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>
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">
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>.
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">
<META NAME="nume" CONTENT="continut">
2
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>
<head>
<title>Titlu</title>
</head>
<body>
Continut pagina
</body>
</html>
In HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar pentru paragraf nou cu eticheta <p>.
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).
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 <div> si </div> delimiteaza un bloc text in vederea formatarii. Unul din atributele blocului div este align care poate lua valorile:
center aliniere pe centru
left aliniere la stanga
right aliniere la dreapta
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 |
text bold | |
text cursiv | |
text subliniat | |
<del>text taiat</del> | text taiat |
exponent | |
indice | |
caractere monospatiate | |
Citat | |
evidentiat | |
text continand cod de computer | |
text scris la tastatura | |
mostra de cod de computer | |
text ingrosat | |
mare | |
mic | |
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 |
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 |
Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate, ordonate si de definitii.
2.1 Liste neordonate
Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.
EXEMPLU
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:
|
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square, circle si disc.
EXEMPLU
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:
|
2.2 Liste ordonate
Aceste liste sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>.
EXEMPLU:
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:
|
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
III. CD-ROM-ul |
2.3 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:
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 |
3.1 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 cind suntem deasupra lui cursorul isi schimba forma.
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 cind 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
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
Adresa fisierului destinatie poate fi exprimata astfel:
nume fisier daca se afla in acelasi folder cu pagina curenta
adresa relativa daca se afla pe acelasi server sau disc, indicandu-se calea
adresa URL fiind adresa completa a paginii (de exemplu: http://www.proba.ro/pagina.html)
nume fisier daca se afla in acelasi folder cu pagina curenta
adresa relativa daca se afla pe acelasi server sau disc, indicandu-se calea
adresa URL fiind adresa completa a paginii (de exemplu: http://www.proba.ro/pagina.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
_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 web http://tutorialedeoricefel.blogspot.com
HTML | Afisare |
<a href="http://tutorialedeoricefel.blogspot.com">Academia Online</a> |
Putem insera un link catre o adresa de e-mail putand asocia si un subiect prestabilit
HTML | Afisare |
<a href="***********@gmail.com ">Trimite e-mail</a> | Trimite e-mail***********@gmail |
<a href='mailto:***********@gmail?subject="subiect prestabilit"'>Trimite e-mail</a> | Trimite e-mail***********@gmail |
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)
LINK legatura nevisitata (default albatru)
VLINK legatura visitata (default rosu)
ALINK legatura activa (nu prea se foloseste - default portocaliu)
3.2 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.
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.
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.
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 aceeasi pagina | a href="pagina.html#nume">Inapoi la ancora din pagina.html</a> |
Link-ul autorului:
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 este recomadat pentru realizarea butoanelor si a icoanelor iar jpg pentru fotografii.
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)
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.
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.
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 .
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> |
|
Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal
cellspacing = distanta intre celule
cellpaddind = distanta dintre marginea celului si continut
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal
cellspacing = distanta intre celule
cellpaddind = distanta dintre marginea celului 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
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea
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
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> |
| |||||||||||||||
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> |
|
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> |
| ||||||||||
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
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)
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)
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
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
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
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
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 pereche de etichete <frame> </frame> care 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
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>
<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>
<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 stanga (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.htm">
<frame src ="pag2.htm">
<frame src ="pag3.htm">
</frameset>
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.htm">
<frame src ="pag2.htm">
<frame src ="pag3.htm">
</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
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>
<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>
olosind 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.
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)
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
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)
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) la care valorile sunt declarate prin option.
In campul textarea se poate introduce text si are atributele cols (numar de coloane) si rows (numar de randuri).
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
src fisierul sau adresa fisierului imagine
usemap are valoarea de genul #nume care este folosit un interiorul etichetei <map> prezentate mai jos
Definirea hartii 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
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>
<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>
super interesant
RăspundețiȘtergere