Professional Documents
Culture Documents
ŞCOALA POSTLICEALĂ
SPECIALIZAREA ANALIST PROGRAMATOR
ÎNDRUMĂTOR,
Prof. OLTEANU Mihaela
ABSOLVENT,
DRAGOMIR Laurenţiu Marius
CRAIOVA
2009
Planul lucrării
Argument ..................................................................................................... 4
Capitolul 1. Introducere în limbajul HTML …………………………….. 6
1.1. Structura unui document HTML …………………………. 7
1.1.1. Secţiunea HEAD ……………………………………….. 8
1.1.2. Secţiunea BODY ……………………………………….. 9
Capitolul 2. Etichete (tag-uri) şi atribute HTML ………………………... 11
2.1. Etichete (tag-uri)...………………………………………... 11
2.2. Atribute …………………………………………………... 11
Capitolul 3. Formatarea textului ...……………………………………..... 13
3.1. Formatarea titlului ……………………………………….. 13
3.2. Formatarea textului ………………………………………. 13
3.3. Utilizarea caracterelor speciale …………………………... 16
Capitolul 4. Despre culori …………………………………………………. 18
4.1. Sistemul de definire a culorilor …………………………... 18
4.2. Corespondenţa dintre codurile hexazecimal şi zecimal ….. 19
4.3. Culoarea fundalului ………………………………………. 19
4.4. Culoarea textului …………………………………………. 20
4.5. Culoarea legăturilor ………………………………………. 20
4.6. Culori „sigure” …………………………………………… 21
Capitolul 5. Imagini şi elemente multimedia …………………………….. 22
5.1. Formatele fişierelor grafice ………………………………. 22
5.1.1. Formatul GIF ……………………………………............ 22
5.1.2. Formatul JPEG …………………………………............. 22
5.2. Inserarea unei imagini ……………………………………. 23
5.3. Dimensionarea imaginii ………………………………….. 23
5.4. Alinierea imaginii şi a textului …………………………… 24
5.5. Imagini folosite ca fond (background) al paginii ………… 25
5.6. Imaginile video …………………………………………... 25
5.7. Sunetele ………………………………………………....... 27
Capitolul 6. Cadre (frames) ……………………………………………….. 29
Capitolul 7. Legăturile (referinţele) ……………………………………… 33
7.1. Legătura către o altă pagină - Link-urile …………………. 33
7.2. Legătura către o secţiune de pagină – Ancorele …............. 34
7.3. Legătura către o adresă de e-mail …………………........... 34
7.4. Utilizarea unei imagini ca legătură …………………......... 35
7.5. Schimbarea culorilor legăturilor …………………………. 35
Capitolul 8. Liste …………………………………………………………... 36
8.1. Liste de tip definiţie ……………………………………… 36
8.2. Liste neordonate ……………………………………….…. 36
2
8.3. Liste ordonate …………………………………………….. 37
8.4. Personalizarea listelor ……………………………………. 38
Capitolul 9. Tabele ………………………………………………………… 39
Capitolul 10. Formulare ……………………………………………………. 46
10.1. Elementele unui formular ……………………………….. 46
10.1.1. Câmpurile de editare ………………………….............. 46
10.1.2. Butoanele radio ……………………………………….. 47
10.1.3. Casetele de validare …………………………………... 48
10.1.4. Casetele de fişiere …………………………….............. 48
10.1.5. Listele de selecţie ……………………………………... 49
10.1.6. Butoanele de tip Submit şi Reset ……………………… 49
10.2. Trimiterea datelor dintr-un formular prin e-mail ……….. 50
Bibliografie .....................................................................................................
51
selectivă
Anexe .................................................................................................... 52
3
Argument
Unul din primele elemente fundamentale ale WWW (World Wide Web) este
HTML (Hypertext Markup Language), care descrie formatul primar în care
documentele sunt distribuite şi văzute pe Web. Multe din trăsăturile lui, cum ar fi
independenţa faţă de platforma, structurarea formatării şi legăturile hipertext, fac
din el un foarte bun format pentru documentele Internet şi Web.
HTML este o abreviere de la Hypertext Markup Language şi reprezintă
scheletul oricărei pagini de Web. HTML nu este un limbaj de programare ci un
limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web:
titlurile, listele, tabelele, paragrafele, legăturile cu alte pagini, precum şi aspectul pe
care îl are pagina din punct de vedere grafic. În fond, HTML este modul în care îi
comunicăm browserului ce elemente dorim să introducem în pagina Web şi care
este aspectul acestora.
Structurată în 10 capitole cărora li se adaugă trei anexe şi bibliografia
aferentă, prezenta lucrare reprezintă o scurtă prezentare a limbajului HTML.
În primul capitol („Introducere în limbajul HTML”) este prezentată structura
unui document HTML precum şi cele două părţi componente ale fiecărui document
HTML: secţiunea HEAD şi BODY.
Cel de-al doilea capitol („Etichete (tag-uri) şi atribute HTML”) prezintă
marcajele sau etichetele pe care limbajul HTML le foloseşte alături de texte pentru
a ajuta browser-ul de Internet să afişeze corect conţinutul paginii web precum şi
atributele fiecărui tag în parte.
În capitolul al treilea („Formatarea textului”) este prezentată modalitatea de
aranjare a conţinutului prezentat de fiecare pagină web.
Capitolul al patrulea („Despre culori”) prezintă în cele şase subcapitolele ale
sale informaţii despre sistemul de definire a culorilor, corespondenţa dintre codurile
hexazecimal şi zecimal, culoarea fundalului, culoarea textului, culoarea legăturilor
şi într-o secţiune aparte sunt prezentate aşa-numitele culori „sigure”.
Capitolul al cincilea, („Imagini şi elemente multimedia”) oferă informaţii
despre acele elemente, fotografii, imagini animate, sunete sau imagini video, care
conferă paginilor Web un aspect atractiv şi profesional. Cele şapte subcapitole
prezintă informaţii despre formatele fişierelor grafice (GIF şi JPEG), despre
modalitatea inserării unei imagini, dimensionarea acesteia, alinierea imaginii şi a
textului, despre imaginile folosite ca fond (background) al paginii, despre imaginile
video şi despre sunete.
Capitolul al şaselea („Cadre”) prezintă modalitatea de organizare a paginilor
web prin împărţirea ferestrei browserului în mai multe ferestre distincte.
Capitolul al şaptelea („Legăturile (referinţele)”) prezintă modalitatea de
navigare în cadrul site-urilor cu ajutorul link-urilor şi ale ancorelor.
Capitolul opt („Liste”) prezintă modalitatea de realizare a unei liste în cadrul
unei pagini web, tipurile de liste precum şi modalităţi de personalizare a listelor.
Următorul capitol („Tabele”) prezintă modalitatea de realizare a unui tabel.
4
Ultimul capitol („Formularele”) oferă informaţii despre metodele de
interactivitate cu utilizatorii paginilor web prin intermediul formularelor,
prezentând elementele componente ale unui formular (câmpurile de editare,
butoanele radio, casetele de validare, casetele de fişiere, listele de selecţie şi
butoanele de tip Submit şi Reset), precum şi modalitatea de trimitere a datelor
dintr-un formular prin e-mail.
Lucrarea se încheie cu trei anexe care conţin o listă a tag-urilor şi a
atributelor lor prezentate în ordine alfabetică, o listă a caracterelor speciale, precum
şi o listă cu numele şi codurile culorilor sigure.
5
6
Capitolul 1.
Introducere în limbajul HTML
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
text … text … text … text … text … text … text … text …
</BODY>
</HTML>
Un document HTML valid conţine declaraţia versiunii HTML utilizate.
Declaraţia se face prin intermediul DTD (document type definition). Pe scurt,
fişierul DTD conţine definiţiile marcajelor din versiunea respectivă de HTML.
HTML 4.01 specifica 3 variante DTD :
HTML 4.01 Strict DTD include toate elementele şi atributele care nu
sunt "învechite" (elemente si atribute a căror utilizare nu este recomandată deoarece
se doreşte renunţarea la acestea pe viitor) sau care nu apar în documentele ce conţin
cadre.
HTML 4.01 Transitional DTD include Strict DTD plus elementele şi
atributele "învechite".
HTML 4.01 Frameset DTD include Transitional DTD plus cadrele
(frames).
8
Cuprinde informaţii care nu vor fi afişate în browser, cu excepţia marcajului
<TITLE>
Marcajul <TITLE> este obligatoriu şi poate apare doar in secţiunea HEAD.
El va conţine un titlu relevant pentru pagină, fiind deosebit de important pentru
motoarele de căutare.
Alte marcaje care apar în secţiune HEAD:
<META> - poate conţine cuvinte cheie, o descriere a paginii, numele
autorului paginii, frecvenţa (teoretică) cu care motoarele de căutare ar trebui să
reindexeze pagina, etc. Declaraţiile META implică în general declararea unei
proprietăţi şi a valorii asociate acelei proprietăţi.
<META name="nume" content="continut">
Declararea setului de caractere se face astfel:
<META http-equiv="Content-Type" content="text/HTML;
charset=set_caractere">
Precizarea setului de caractere face posibilă afişarea în browserul
utilizatorului a caracterelor specifice unor limbi precum româna, rusa, araba, etc.
<STYLE>- cascading STYLE sheets - stiluri pentru formatarea
textului din documentul HTML.
<STYLE type="text/css">...</STYLE>
<SCRIPT> - scripturi JavaScript sau VBScript
<SCRIPT language="JavaScript1.2" type="text/javascript"
src="lib.js"></SCRIPT>
<BASE> - stabileste URL-ul de "baza" al documentului. Toate
referintele (<a href=""></a>, respectiv <img src="">) din documentul respectiv
vor fi deschise relativ la marcajul <base>.
<HEAD>
<BASE href="http://www.xprim.ro/index.php" target="_top">
</HEAD>
<LINK> - stabileşte o legătură cu un document extern, spre exemplu
un fişier de definiţii CSS.
<LINK rel="STYLEsheet" href="stiluri.css" type="text/css">
EXEMPLU:
Secţiunea HEAD a unui document HTML poate arată în felul următor:
<HEAD>
<TITLE>Titlul paginii</TITLE>
<META http-equiv="Content-Type" content="text/HTML;
charset=windows-1250">
<META name="author" content="Marinescu Ion">
<META name="copyright" content="© 2009 Marinescu Ion">
<META name="keywords" content="curs, HTML, tutorial">
<LINK rel="STYLEsheet" href="stiluri.css" type="text/css">
</HEAD>
9
1.1.2 Secţiunea BODY
Este inclusă între marcajele <BODY>...... </BODY>
<BODY [ BACKGROUND="adresa_imagine"] [
BGCOLOR="#rrggbb"|"culoare"] [ TEXT="#rrggbb"|"culoare"] [
LINK="#rrggbb"|"culoare"] [ VLINK="#rrggbb"|"culoare"] [
ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st] [
TOPMARGIN=marg_top]>
................
continut document
.................
</BODY>
Marcajul de sfârşit (</BODY>) nu este obligatoriu.
În secţiunea BODY se găseşte informaţia care va fi afişată în browser (text,
imagini, etc.) (<BODY>.... </BODY>).
LEFTMARGIN şi TOPMARGIN sunt extensii Microsoft (nu funcţionează
decât în Internet Explorer 3+).
LEFTMARGIN precizează, în pixeli, marginea stângă a
documentului (distanţa dintre fereastra şi conţinutul documentului);
TOPMARGIN precizează, in pixeli, marginea de sus a documentului
(distanţa dintre fereastră şi conţinutul documentului).
Ca în orice limbaj de programare în HTML există posibilitatea de a introduce
comentarii, folosind marcajul
<!-- .... textul comentariului -->
EXEMPLU :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Titlul paginii mele</TITLE>
<META http-equiv="Content-Type" content="text/HTML;
charset=windows-1250">
<META name="author" content="Marinescu Ion">
<META name="copyright" content="© 2009 Marinescu Ion">
<META name="keywords" content="curs, HTML, tutorial">
<LINK rel="STYLEsheet" href="stiluri.css" type="text/css">
</HEAD>
<BODY bgcolor="#999999" leftmargin=0 topmargin=0>
<!--Acest comentariu nu va fi afisat in browser -->
<p>text text text text text text text text text text </p>
<p>alt text alt text alt text alt text alt text </p>
</BODY>
</HTML>
10
În exemplul de mai sus a apărut un nou marcaj <p> (paragraf). Alături de el
trebuie menţionate marcajele <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (HEADings -
toate necesită marcaj de închidere) care sunt folosite în general pentru evidenţierea
titlurilor.
Pentru formatarea textului pot fi folosite şi marcajele:
<b>...</b> - caractere îngroşate;
<i>...</i> - caractere înclinate;
<u>...</u> - caractere subliniate;
<s>...</s> - caractere "tăiate";
<pre>...</pre> - marcajul de informaţie preformatată ;
conservă toata caracterele si spaţierile de linii;
utilizează un font diferit (Courier);
<sup>...</sup> - exponent;
<sub>...</sub> - indice;
<br> - "rupe" textul, trecând pe o linie nouă - poate apare oriunde in
text;
<hr> - trasează o linie subţire orizontală;
<font>...</font> oferă posibilitatea modificării dimensiunii, culorii şi
a tipului de font utilizat;
<span> este un marcaj de tip "inline". Se foloseşte în general în
interiorul marcajelor de tip "block" (ex. <p>) în combinaţie cu stilurile CSS, pentru
a impune o formatare diferită de restul conţinutului din marcajul "block"
respective;
spre deosebire de <span>, marcajul <div> este de tip "block". Se
foloseşte în general pentru poziţionare în cadrul documentului şi pentru
specificarea unor proprietăţi CSS care să fie aplicate textului din interiorul lui.
<DIV [ ALIGN="left|center|right"] STYLE="..">
.................................
</DIV>
11
Capitolul 2.
Etichete (tag-uri) şi atribute HTML
2.2. Atribute
Atributele HTML furnizează informaţii adiţionale elementelor HTML.
Tagurile HTML pot avea atribute. Acestea sunt întotdeauna definite în tagul de
început al unui element HTML.
Sunt de forma: nume="valoare".
EXEMPLU:
Acest exemplu aliniază textul la centrul paginii web.
<h1 align = "center">Acesta e un text</h1>
EXEMPLU:
Acest exemplu aplică fundalului o culoare portocalie.
<BODY bgcolor = "orange">
Text Text Text
12
</BODY>
13
Capitolul 3.
Formatarea textului
EXEMPLU:
Linia de cod:
<FONT COLOR=”CornflowerBlue”>Proiect diploma</FONT>
va afişa în cadrul browserului de Internet: Proiect diploma
<FONT COLOR=”#6495ED”>Proiect diploma</FONT>
va afişa în cadrul browserului de Internet: Proiect diploma
<FONT COLOR=”#FF0000”>Proiect diploma</FONT>
va afişa în cadrul browserului de Internet: Proiect diploma
Dacă vrem ca textul să fie afişat în centrul paginii putem folosi perechea de
etichete <CENTER> şi </CENTER>.
<CENTER>Text centrat</CENTER>
Text centrat
Atunci când vrem ca textul din cadrul paginii noastre web să fie afişat pe mai
multe rânduri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are
tag de încheiere, în timp ce tag-ul <P> are tag de încheiere, însă nu este obligatoriu.
15
Tag-ul <BR> vine de la line break (întrerupere de linie) şi este folosit pentru
a face trecerea de la o linie la alta.
EXEMPLU:
Avem următorul cod HTML:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
</BODY>
</HTML>
EXEMPLU:
Utilizarea etichetei <BR> in cadrul codului:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<BR>Stiu limbajul
HTML.
</BODY>
</HTML>
16
Invat limbajul HTML.<BR>Exersez limbajul HTML.<P>Stiu limbajul
HTML.
</BODY>
</HTML>
Dacă scriem un text între tag-urile <P> şi </P>, atunci textul va fi încadrat
de câte un rând liber, la fel ca în exemplul de mai jos:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<P>Exersez limbajul HTML.</P>Stiu limbajul
HTML.
</BODY>
</HTML>
EXEMPLU:
Iată în continuare codurile HTML pentru diacriticele specifice limbii
române. Pentru lista completă de caractere speciale vezi anexa 3.
EXEMPLU:
17
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Vom învăţa împreună limbajul HTML.
Aceasta este prima mea pagină web!
</BODY>
</HTML>
18
Capitolul 4.
Despre culori
De exemplu, #FF0000 este codul pentru roşu. Semnificaţia acestui cod este
următoarea: cantitatea de roşu este maximă, iar cantităţile de verde şi albastru sunt
egale cu 0. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF.
Deoarece uneori definirea culorii prin intermediul codului său hexazecimal
este incomodă, standardul HTML 3.2 stabileşte un set de 16 culori standard.
În acest caz, pentru valoarea atributului de culoare se utilizează direct
numele culorii, ca în exemplul de mai jos, în care se setează culoarea magenta
pentru linkurile vizitate:
<BODY vlink="magenta">
Numele şi codul culorilor stabilite în standardul HTML3.2 sunt următoarele:
Mai trebuie menţionat faptul că se pot utiliza, pe lângă culori, 100 de nuanţe
de gri (gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuanţa cea mai
închisă, iar "gray 100" cea mai deschisă.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>culori1</TITLE>
</HEAD>
<BODY bgcolor="#00FF00">
<h1 align="center">Pagina cu fundal verde</h1><hr>
</BODY>
20
</HTML>
Dacă am stabilit o culoare pentru textul din pagină şi dorim să utilizăm o altă
culoare pentru o anumită secţiune a textului (culoarea unui bloc de text), vom folosi
eticheta <font>. Aceasta este o etichetă container care cuprinde între etichetele de
început şi de final textul a cărui culoare dorim să o modificăm. Stabilirea culorii se
face folosind atributul color al etichetei conform sintaxei:
<font color="#RGB sau nume_culoare">Text</font>
În EXEMPLU culoarea textului este albastru iar anumite cuvinte sunt
colorate în roşu.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>culori2</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#0000FF">
<h1 align="center">Text albastru si rosu</h1>
<hr>
Textul din aceasta pagina este albastru cu mici
<FONT color="#FF0000"> exceptii</FONT>
</BODY>
</HTML>
EXEMPLU:
<HTML>
<HEAD>
<TITLE>culori3</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00"
alink="#0000FF" vlink="#FF0000">
<h1 align="center">Legaturi colorate</h1>
<hr>
<a href="culori1.HTML">Legatura catre primul exemplu</a>
</BODY>
</HTML>
22
Capitolul 5.
Imagini şi elemente multimedia
23
5.2. Inserarea unei imagini
Pentru a insera o imagine în cadrul unei pagini (o imagine in-line), se
utilizează eticheta <IMG> (de la image). Eticheta <IMG> nu este o etichetă
container, prin urmare nu necesită o etichetă corespunzătoare de închidere.
Pentru a putea identifica imaginea care va fi inserată, se utilizează atributul
src (source) al etichetei <IMG>. Atributul src îi comunica browserului numele şi
locaţia imaginii care urmează să fie inserată. Valoarea acestui atribut este adresa
URL a imaginii respective.
Dacă imaginea se află în acelaşi director cu fişierul HTML care face referire
la imagine, atunci adresa URL a imaginii este formata numai din numele fişierului,
inclusiv extensia.
<IMG src="imagine.extensie">
Dacă imaginea se află într-un alt director, URL-ul imaginii trebuie specificat
fie prin adresarea absolută fie, preferabil, prin cea relativă.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Inserare imagine</TITLE>
</HEAD>
<BODY>
<H1 align="center"> Atributele border si alt </H1><HR>
Acesta este un...<BR>
<IMG src="../Imagini/rose.gif" alt="trandafir" border="5">
</BODY>
</HTML>
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Dimensionarea imaginilor</TITLE>
</HEAD>
<BODY>
<H1 align="center">Dimensionarea imaginilor</H1><HR>
<IMG src="rose.gif" width="350" height="250"><P>
</BODY>
</HTML>
EXEMPLU:
Modul de aliniere bottom:
25
<HTML>
<HEAD>
<TITLE>Alinierea imaginii si textului (bottom)</TITLE>
</HEAD>
<BODY>
<H1 align="center">Alinierea imaginii si textului (bottom)</H1><HR>
<IMG src="../Imagini/rose.gif" align="bottom" width="100" height="66"
alt="trandafir">
Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine
text.
Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine
text.
</BODY>
</HTML>
Alte două atribute utile, care servesc la alinierea imaginii faţă de restul
elementelor din pagină, sunt atributele hspace şi vspace. Ele precizează distanţa, în
pixeli, pe orizontală, respectiv pe verticală, dintre imagine şi restul elementelor din
pagină.
La EXEMPLUL anterior vom schimba modul de aliniere în cadrul etichetei
<IMG> şi vom adăuga atributele hspace, respectiv vspace, astfel:
<IMG src="../Imagini/rose.gif" align="left" width="100" height="66"
alt="trandafir" vspace="10" hspace="10">
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Imaginea ca fond al paginii</TITLE>
</HEAD>
<BODY background="../Imagini/rose.gif">
<H1 align="center">Imaginea ca fond al paginii</H1><HR>
Fondul cu trandafiri...
</BODY>
</HTML>
26
Atributul dynsrc înlocuieşte atributul src şi permite inserarea în documentul
HTML a unei imagini video în acelaşi mod în care este inserată o imagine statică.
Valoarea atributului dynsrc este adresa URL a fişierului video care va fi
inclus în pagină conform sintaxei:
<IMG dynsrc="URL_fisier_video">
Acest atribut este o extensie Internet Explorer şi nu este recunoscut de
browserele Netscape. Pentru a vizualiza o imagine video in-line într-un browser
Netscape, vizitatorul paginii trebuie să instaleze un program auxiliar de tip plug-in.
Dacă programul plug-in nu este disponibil pe computerul vizitatorului, imaginea
video nu va putea fi afişată.
Singurul format de fişiere video care este suportat de extensiile Internet
Explorer este AVI (Audio Video Interleave), deoarece acesta este formatul de
redare care este inclus în browser. Construcţia de mai jos include într-un document
HTML fişierul video introducere.avi care se află în folderul Video:
<IMG dynsrc="../Video/introducere.avi">
Efectul acestei etichete este deschiderea de către browser a unei ferestre de
vizualizare în interiorul paginii Web, fereastră în care va rula clipul video
introducere.avi.
Ca şi imaginile obişnuite, imaginea video este afişată pe măsură ce este
încărcată.
Deoarece nici un alt browser în afară de Internet Explorer nu recunoaşte
această extensie, este recomandată includerea în cadrul etichetei <IMG> a
atributului src prin care se furnizează o imagine statică ce va fi afişată în acelaşi
cadru. Browserele care nu recunosc extensia dynsrc vor afişa imaginea statică pe
când Internet Explorer va afişa imaginea video. Ordinea în care apar cele două
atribute nu are importanţă.
EXEMPLU:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif">
În mod normal, Internet Explorer redă clipul video într-o fereastră în care nu
sunt afişate nici un fel de butoane de control. Utilizatorul poate relua, opri sau
continua redarea clipului efectuând click dreapta cu mouse-ul în interiorul ferestrei.
Pentru a adăuga butoane de control acestei ferestre se utilizează atributul controls
al etichetei <IMG>. Atributul controls nu are alocată nici o valoare, prezenţa sa
având doar scopul de a adăuga butoanele de control asemănătoare celor de la
aparatele video.
EXEMPLU:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls>
Clipul video inclus în pagină este redat de browser o singură dată, de la
început până la sfârşit. Pentru a repeta redarea clipului de un anumit număr de ori
este folosit atributul loop. Valorile posibile ale atributului sunt:
1) un număr întreg care reprezintă numărul de reluări ale clipului;
27
2) infinite, caz în care clipul este redat până când utilizatorul stopează
derularea sa apăsând butonul stop al ferestrei de vizualizare (în cazul când fereastra
conţine butoanele de control) sau efectuează click dreapta cu mouse-ul în fereastra
de vizualizare.
EXEMPLU:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls
loop="infinite">
Redarea imaginii video începe imediat ce aceasta a fost complet încărcată în
pagină. Pentru a schimba acest comportament se foloseşte atributul start care poate
avea valorile:
1) mouseover, situaţie în care derularea imaginii video începe în momentul
când mouse-ul este plasat deasupra imaginii;
2) fileopen, valoarea predefinită, situaţie în care derularea imaginii începe
imediat după încărcarea în pagină
EXEMPLU:
Cele două valori pot fi combinate pentru a se realiza redarea imaginii mai
întâi imediat după încărcarea în pagină şi apoi de fiecare dată când mouse-ul este
plasat deasupra ei:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls
loop="infinite" start="fileopen, mouseover">
Imaginile video in-line pot fi tratate ca şi imaginile statice. O astfel de
imagine poate fi aliniată folosind atributul align, sau poate fi spaţiată faţă de textul
care o înconjoară.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Imagini video</TITLE>
</HEAD>
<BODY>
<H1 align="center">Imagini video</H1><HR>
<FONT size="4" color="blue">Clipul video de mai jos face parte din filmul
„Dacii”</FONT><P>
<CENTER>
<IMG dynsrc="../Video/dacii.avi" src="../Imagini/dac.gif" controls
start="fileopen, mouseover" loop="infinite">
</CENTER>
</BODY>
</HTML>
5.7. Sunetele
28
Eticheta <BGSOUND> realizează includerea în pagina Web a unei muzici
de fundal. Această etichetă este, de asemenea, o extensie Internet Explorer deci nu
este recunoscută şi executată în alte browsere.
Sintaxa etichetei <BGSOUND> este următoarea:
<BGSOUND src="URL_fisier_sunet" loop="valoare">
Atributul src are drept valoare adresa URL a fişierului de sunet care este
folosit ca fundal sonor al paginii.
În mod curent, Internet Explorer recunoaşte trei tipuri de fişiere de sunet:
1) fişiere cu extensia .wav care este formatul nativ pentru PC;
2) fişiere cu extensia .au, formatul nativ pentru sistemele UNIX;
3) fişiere cu extensia .midi, un format universal acceptat pentru codificarea
sunetelor.
Ca şi în cazul imaginilor video in-line, fişierul de sunet este redat o singură
dată, la încărcarea paginii. Pentru redarea sa repetată se foloseşte atributul loop al
etichetei <BGSOUND>.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Muzica de fundal</TITLE>
</HEAD>
<BODY>
<H1 align="center">Muzica de fundal</H1><HR>
<P>
<FONT size="4" color="red">Muzica se va auzi pana cand veti inchide
pagina</FONT>
<BGSOUND src="../Sunet/sound loop="infinite">
</BODY>
</HTML>
29
Capitolul 6.
Cadre (frames)
EXEMPLU:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/HTML4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document cu cadre</TITLE>
</HEAD>
<frameset cols="30%, 70%">
<frameset rows="200, 200">
<frame src="continut_cadru1.HTML">
<frame src="continut_cadru2.HTML">
</frameset>
<frame src="continut_cadru3.HTML">
<noframes>
<p>Acest document contine:
<ul>
<li><a href="continut_cadru1.HTML">continut</a>
30
<li><img src="continut_cadru2.HTML" alt="imagine">
<li><a href="continut_cadru3.HTML">continut</a>
</ul>
</noframes>
</frameset>
</HTML>
Aşa cum se vede mai sus, pentru a împărţi un cadru în două sau mai multe
cadre, se folosesc marcaje frameset imbricate.
EXEMPLU:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/HTML4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document cu cadre</TITLE>
</HEAD>
<frameset cols="30%, 70%">
<frame src="continut_cadru1.HTML">
<frame src="continut_cadru2.HTML">
<noframes>
<p>Acest document contine:
<ul>
<li><a href="continut_cadru1.HTML">continut</a>
<li><img src="continut_cadru2.HTML" alt="imagine">
</ul>
</noframes>
32
</frameset>
</HTML>
EXEMPLU:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/HTML4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document cu cadre</TITLE>
</HEAD>
<frameset rows="30%, 70%">
<frame src="continut_cadru1.HTML">
<frame src="continut_cadru2.HTML">
<noframes>
<p>Acest document contine:
<ul>
<li><a href="continut_cadru1.HTML">continut</a>
<li><img src="continut_cadru2.HTML" alt="imagine">
</ul>
</noframes>
</frameset>
</HTML>
EXEMPLU:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/HTML4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document cu cadre</TITLE>
</HEAD>
<frameset rows="*,3*">
<frame name="navigare" src="navigare.HTML">
<frame name="continut" src="continut.HTML">
<noframes>
text... text... text... text... text... text... text...
33
</noframes>
</frameset>
</HTML>
Capitolul 7.
Legăturile (referinţele)
EXEMPLU:
Exemplul următor nu va afecta formatarea documentului:
<a>Aici</a> ar trebui sa fie un link !
34
http://www.hostx.ro/director/pagina2.HTML in momentul în care pagina2.HTML
este solicitată)
Referinţele absolute le vei folosi atunci când vrei să trimiţi utilizatorul pe un
alt site (domeniu); pot fi folosite şi în interiorul unui site, însă va implica un efort
mai mare în scrierea paginilor (pe scurt, ai mai mult de tastat), iar în cazul în care
se doreşte mutarea sitului pe un alt domeniu este nevoie să se reediteze toate
referinţele.
Referinţele pot fi către pagini HTML, dar şi către alte tipuri de fişiere
(imagini, fişiere audio, video, documente în alte formate, etc.)
EXEMPLU:
Presupunem că există un site cu următoarea structură de directoare:
/director1
/director2
Pentru a apela o pagină HTML aflată în director2 dintr-o pagină aflată în
director1 se va folosi următoarea secvenţa:
<a href="../director2/pagina.HTML">Un link oarecare</a>
Pentru a apela o pagină HTML aflată în director1 dintr-o pagină aflată în
rădăcină (nivelul superior al sitului) se va folosi urmatoarea secvenţă:
<a href="director1/pagina.HTML">Un link oarecare</a>
35
7.3. Legătura către o adresă de e-mail
Forma generală a unei legături către o adresă de e-mail este următoarea:
<A href="mailto:adresa de e-mail">Trimite e-mail</A>
EXEMPLU:
Pentru ca în cadrul paginii web, legăturile să fie de culoare roşie atunci când
nu au fost vizitate, de culoare neagră cele vizitate şi de culoare portocalie atunci
când se trece cu mouse-ul pe deasupra lor, se foloseşte următoarea linie de cod:
<BODY link=”#FF0000” vlink=”#000000” alink=”FF9600”>
36
Capitolul 8.
Liste
<HTML>
<HEAD>
<TITLE>Lista de tip definitie</TITLE>
</HEAD>
<BODY>
<dl>
<dt>Applet Java
<dd>Aplicatie Java inclusa intr-un document HTML
<dt>Cookie
<dd>Mecanism de comunicare intre client si server
<dt>Domeniu
<dd>Nume unic prin care se identifica un site pe Internet
</dl>
</BODY>
</HTML>
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Lista neordonata</TITLE>
</HEAD>
<BODY>
<p>In HTML sunt disponibile 3 tipuri de liste:</p>
<ul type="square">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ul>
</BODY>
</HTML>
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Lista ordonata</TITLE>
</HEAD>
<BODY>
<p>In HTML sunt disponibile 3 tipuri de liste:
<ol start="2">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ol>
</BODY>
</HTML>
EXEMPLU:
- pentru litere mari: <ol type=A>;
- pentru litere mici: <ol type=a>;
- pentru cifre romane mici: <ol type=i>;
- pentru cifre romane mari: <ol type=I> .
Pe lânga atributul type, pentru tag-ul <ol> mai putem folosi şi atributul
start. Atributul start setează numărul de început pentru primul element al listei
ordonate. De exemplu, dacă vrem să incepem de la 4, în cazul numerelor, sau de la
D, în cazul literelor mari, etc. Forma generală a acestui atribut este start=n, unde n
este un număr natural.
EXEMPLU:
<ol type=A start=4>
EXEMPLU :
Fiecare element al listei este introdus cu ajutorul unei imagini salvate sub
denumirea de desen în folderul Poze.
<HTML>
<HEAD>
<TITLE>Lista personal</TITLE>
</HEAD>
<BODY>
<ul>Lista persoane departament Secretariat:
<br><br><img src="../Poze/desen.gif">Popescu Maria
<br><br><img src ="../Poze/desen.gif">Ionescu Eugenia
<br><br><img src ="../Poze/desen.gif">Ion Marian
</ul>
</BODY>
</htm>
39
Capitolul 9.
Tabele
Prezentarea datelor sub formă de tabele prezintă avantaje din punct de vedere
al clarităţii şi sistematizării. Marcajele HTML dedicate formatării tabelelor permit
operaţiuni asemănătoare celor din procesoarele de texte (ex. MS Word).
Definirea unui tabel în HTML se face folosind perechea de marcaje <table>
şi </table>. Prin intermediul acestei perechi de marcaje se definesc atribute
valabile pentru întregul tabel. Majoritatea acestor atribute pot fi însă redefinite
pentru anumite celule ale tabelului.
<table [border=n]
[frame=above|below|border|box|hsides|vsides|lhs|rhs|void]
[rules=none|groups|rows|cols|all] [width=abs|rel]
[height=abs|rel] [bgcolor="#rrggbb"] [bordercolor="#rrggbb"]
[bordercolorlight="#rrggbb"] [bordercolordark="#rrggbb"]
[background="URL-imagine"] [cellspacing=n] [cellpadding=n]
[align=left|center|right] [valign=top|middle|bottom]
[summary="sumar"]>
...
</table>
EXEMPLU:
Conţinutul fiecărei celule poate fi formatat individual:
<table>
<tr>
<th><font color=black>Col 1</font></th>
<th><font color=red>Col 2</font></th>
</tr>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
42
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
În cazul în care se doreşte ca tabelul din exemplul anterior să fie afişat cu
chenar:
<table border=1>
<tr>
<th>Col 1</th>
<th><font color=red>Col 2</th>
</tr>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
Un alt marcaj care poate apărea în cadrul unui tabel este <caption>. Acesta
are următoarea sintaxă:
<caption [align=top|bottom|left|center|right] [valign=top|bottom]>
...
</caption>
EXEMPLU:
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu utilizare caption </caption>
<tr>
<th>
<font color=black>Col 1</font>
</th>
43
<th>
<font color=red>Coloana 2</font>
</th>
</tr>
<tr>
<td>
<center>Celula 1.1</center>
</td>
<td>
<i>Celula 1.2</i>
</td>
</tr>
<tr>
<td>
<s>Celula 2.1</s>
</td>
<td>
<font color=blue>Celula 2.2</font>
</td>
</tr>
</table>
EXEMPLU:
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu tabel </caption>
<tHEAD>
<tr>
<th>
<font color=black>Col 1</font>
</th>
<th>
<font color=red>Coloana 2
</th>
</tr>
</tHEAD>
<tBODY>
<tr>
<td><center>Celula 1.1</center>;</td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</td>
</tr>
</tBODY>
</table>
EXEMPLU:
Exemplu utilizare colspan:
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu tabel </caption>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td colspan="2"><s>Celula 2.1</s></td>
</tr>
</table>
46
Capitolul 10.
Formulare
Atributele cele mai folosite pentru tagul <input> de tipul câmp de editare
sunt:
• size, care reprezintă lăţimea câmpului de editare;
• maxlength, specifică numărul maxim de caractere care pot fi introduse în
câmpul de editare;
• value, valoarea iniţială a câmpului de editare.
De exemplu, pentru câmpul de editare de mai sus s-a folosit următoarea linie
de cod:
<input name="exemplu" type="text" value="Camp de editare" size="20"
maxlength ="30">
EXEMPLU:
< textarea cols="50" rows ="5" name="exemplu"> </ textarea >
Am folosit atributul cols pentru a stabili numărul de caractere al fiecărui
rând, atributul rows pentru numărul de rânduri al câmpului de editare, iar atributul
name pentru numele câmpului de editare.
EXEMPLU:
În ce categorie de vârstă vă încadraţi?
sub 15 ani
15-20 ani
20-25 ani
25-35 ani
48
35-45 ani
peste 45 ani
Codul HTML al exemplului de mai sus este următorul:
În ce categorie de vârstă vă încadraţi?
<br>
<input type="radio" name="raspuns" value="a" checked>sub 15 ani<br>
<input type="radio" name="raspuns" value ="b">15-20 ani<br>
<input type="radio" name="raspuns" value ="c">20-25 ani<br>
<input type="radio" name="raspuns" value ="d">25-35 ani<br>
<input type="radio" name="raspuns" value ="e">35-45 ani<br>
<input type="radio" name="raspuns" value ="f">peste 45 ani
EXEMPLU:
Unde vă petreceţi concediul de obicei?
La mare
La munte
În străinătate
La ţară
Acasă
49
EXEMPLU:
EXEMPLU:
Alege un judeţ din România:
EXEMPLU:
Pentru a trimite datele dintr-un formular la adresa exemplu@yahoo.com vom
folosi următoarea linie de cod:
<form action="mailto:exemplu@yahoo.com" method="post">
51
Bibliografie selectivă
52
Anexe
53
Anexa 2.
Tag-uri şi atributele lor
- ordine alfabetică -
Nume Valoare
Nume tag Detalii
atribut atribut
<A> Ancora
href URL Adresa catre care vrem sa fie legatura
target _blank Fereastra in care se va face afisarea
_self
_parent
_top
<B> Text bold
<BODY> Cuprinsul documentului
background adresa Imaginea de fond
imaginii
bgcolor cod culoare Culoarea fondului
nume culoare
leftmargin procent din Distanta dintre marginea din stanga a
latimea ferestrei browserului si marginea din
paginii stanga a paginii
numar de
pixeli
topmargin procent din Distanta dintre marginea de sus a
inaltimea ferestrei browserului si marginea de
paginii sus a paginii
numar de
pixeli
text cod culoare Culoarea textului
nume culoare
alink cod culoare Culoarea legaturilor active (atunci
nume culoare cand mouse-ul se afla deasupra lor)
link cod culoare Culoarea legaturilor nevizitate (nu s-a
nume culoare efectuat nici un click pe ele)
vlink cod culoare Culoarea legaturilor vizitate
54
nume culoare (s-a efectuat cel putin un click pe ele)
<BR> Sfarsitul randului
<CENTER> Afisarea in centrul paginii
<FONT> Fontul textului
color cod culoare Culoarea fontului
nume culoare
face nume font Tipul fontului
size un numar Marimea fontului
de la 1 la 7
<FORM> Formular interactiv
action URL Adresa scriptului care prelucreaza
datele din cadrul formularului
method GET Metoda de prelucrare a datelor
POST formularului
<FRAME> Cadru (fereastra)
frameborder 1 sau 0 Cadrul are sau nu are chenar
marginheight numar de Spatiu deasupra si sub un cadru
pixeli
marginwidth numar de Spatiu la stanga si la dreapta unui
pixeli cadru
src URL Sursa cadrului
<FRAMESET> Multime de ferestre
cols procent din numarul si marimea relativa a
latimea coloanelor
paginii
numar de
pixeli
rows procent din numarul si marimea relativa a
inaltimea randurilor
paginii
numar de
pixeli
H1, H2, H3, Titluri in cadrul documentului
H4, H5, H6
align left Alinierea titlului
center
right
justify
55
<HEAD> Antetul documentului
<HR> Linie orizontala
align left Alinierea orizontala a liniei
center
right
color cod culoare Culoarea liniei
nume culoare
size numar de Inaltimea liniei
pixeli
width procent din Latimea liniei
latimea
paginii
numar de
pixeli
<HTML> Document HTML
<I> Text italic
<IMG> Adaugarea unei imagini
align left Alinierea imaginii in pagina: left
right (stanga) sau right (dreapta)
top Alinierea elementelor din jurul
middle imaginii: top (sus), middle (mijloc),
bottom bottom (jos)
alt text Text ce va fi afisat in locul imaginii, in
56
<INPUT> Element al formularului
maxlength numar Numar maxim de caractere
name date de tip Numele elementului formularului
caracter
size numar Marimea elementului formularului
src URL Adresa pentru o imagine
type text Tip input
password
checkbox
radio
submit
reset
file
hidden
image
button
value date de tip Valoare input
caracter
<LI> Element al unei liste
<META> Metainformatii
content text Descrie valoarea atributului name
name author Autor
description Descriere
keywords Cuvinte cheie
<OL> Lista ordonata
start numar Cu ce valoare incepe numerotarea
type A, a, I, i, 1 Tipul numerotarii: A, a, I, i, 1
(implicit)
<P> Paragraf
align left Alinierea paragrafului
center
right
justify
<SELECT> Lista de selectii
multiple Permite selectia mai multor elemente
name date de tip Numele listei de selectii
caracter
57
size numar Numarul de elemente ale listei
<STRONG> Text evidentiat
<SUB> Text indice
<SUP> Text exponent
<TABLE> Tabel
align left Alinierea tabelului
center
right
background URL Imaginea de fond pentru tabel
bgcolor cod culoare Culoarea fondului pentru tabel
nume culoare
border procent Chenarul tabelului
numar de
pixeli
bordercolor cod culoare Culoarea chenarului
nume culoare
cellpadding numar de Spatiu intre continutul celulelor
pixeli tabelului si
marginile lor
cellspacing numar de Spatiu intre celulele tabelului
pixeli
cols numar Numarul de coloane ale unui tabel
hspace numar de Spatiu pe orizontala in jurul tabelului
pixeli
vspace numar de Spatiu pe verticala in jurul tabelului
pixeli
width procent Latimea tabelului
numar de
pixeli
<TD> Celula de tabel
align left Alinierea continutului celulei pe
center orizontala
right
background URL Imaginea de fond pentru celula
bgcolor cod culoare Culoarea fondului pentru celula
nume culoare
colspan numar Numarul de coloane pe care se intinde
celula
58
height numar de Inaltimea celulei
pixeli
rowspan numar Numarul de linii pe care se intinde
celula
valign top Alinierea continutului celulei pe
middle verticala
bottom
width numar de Latimea celulei
pixeli
<TEXTAREA> Camp de editare multilinie
cols numar Numarul de coloane
name date de tip Numele campului de editare multilinie
caracter
rows numar Numarul de randuri
<TITLE> Titlu document
<TR> Rand tabel
align left Alinierea continutului celulelor
center pe orizontala
right
bgcolor cod culoare Culoarea fondului pentru tot randul
nume culoare
valign top Alinierea continutului celulelor pe
middle verticala
bottom
<U> Text subliniat
<UL> Lista neordonata
type circle Forma marcajului
disc
square
59
Anexa 3.
Caractere speciale
Cod HTML
Simbol
Numar Nume
 
¢ ¢ ¢
£ £ £
© © ©
« « «
® ® ®
° ° °
± ± ±
² ² ²
60
³ ³ ³
µ µ µ
¶ ¶ ¶
¹ ¹ ¹
» » »
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
  Â
Î Î Î
× × ×
Ø Ø Ø
â â â
î î î
÷ ÷ ÷
ø ø ø
Ş Ş
ş ş
Ţ Ţ
ţ ţ
€ € €
Anexa 4.
Nume şi coduri de culori sigure
65