Lucrare de diploma - Pagini WEB in HTML

GRUPUL ŞCOLAR DE ARTE ŞI MESERII AL COOPERAŢIEI MEŞTEŞUGĂREŞTI „SPIRU HARET”,

CRAIOVA

ŞCOALA POSTLICEALĂSPECIALIZAREA ANALIST PROGRAMATOR

Pagini WEB în HTML

ÎNDRUMĂTOR,Prof. OLTEANU Mihaela

ABSOLVENT,DRAGOMIR Laurenţiu Marius

CRAIOVA2009

Planul lucrării

Argument ..................................................................................................... 4Capitolul 1. Introducere în limbajul HTML …………………………….. 6

1.1. Structura unui document HTML …………………………. 71.1.1. Secţiunea HEAD ……………………………………….. 81.1.2. Secţiunea BODY ……………………………………….. 9

Capitolul 2. Etichete (tag-uri) şi atribute HTML ………………………... 112.1. Etichete (tag-uri)...………………………………………... 112.2. Atribute …………………………………………………... 11

Capitolul 3. Formatarea textului ...……………………………………..... 133.1. Formatarea titlului ……………………………………….. 133.2. Formatarea textului ………………………………………. 133.3. Utilizarea caracterelor speciale …………………………... 16

Capitolul 4. Despre culori …………………………………………………. 184.1. Sistemul de definire a culorilor …………………………... 184.2. Corespondenţa dintre codurile hexazecimal şi zecimal ….. 194.3. Culoarea fundalului ………………………………………. 194.4. Culoarea textului …………………………………………. 204.5. Culoarea legăturilor ………………………………………. 204.6. Culori „sigure” …………………………………………… 21

Capitolul 5. Imagini şi elemente multimedia …………………………….. 225.1. Formatele fişierelor grafice ………………………………. 225.1.1. Formatul GIF ……………………………………............ 225.1.2. Formatul JPEG …………………………………............. 225.2. Inserarea unei imagini ……………………………………. 235.3. Dimensionarea imaginii ………………………………….. 235.4. Alinierea imaginii şi a textului …………………………… 245.5. Imagini folosite ca fond (background) al paginii ………… 255.6. Imaginile video …………………………………………... 255.7. Sunetele ………………………………………………....... 27

Capitolul 6. Cadre (frames) ……………………………………………….. 29Capitolul 7. Legăturile (referinţele) ……………………………………… 33

7.1. Legătura către o altă pagină - Link-urile …………………. 337.2. Legătura către o secţiune de pagină – Ancorele …............. 347.3. Legătura către o adresă de e-mail …………………........... 347.4. Utilizarea unei imagini ca legătură …………………......... 357.5. Schimbarea culorilor legăturilor …………………………. 35

Capitolul 8. Liste …………………………………………………………... 368.1. Liste de tip definiţie ……………………………………… 368.2. Liste neordonate ……………………………………….…. 36

2

8.3. Liste ordonate …………………………………………….. 378.4. Personalizarea listelor ……………………………………. 38

Capitolul 9. Tabele ………………………………………………………… 39Capitolul 10. Formulare ……………………………………………………. 46

10.1. Elementele unui formular ……………………………….. 4610.1.1. Câmpurile de editare ………………………….............. 4610.1.2. Butoanele radio ……………………………………….. 4710.1.3. Casetele de validare …………………………………... 4810.1.4. Casetele de fişiere …………………………….............. 4810.1.5. Listele de selecţie ……………………………………... 4910.1.6. Butoanele de tip Submit şi Reset ……………………… 4910.2. Trimiterea datelor dintr-un formular prin e-mail ……….. 50

Bibliografie selectivă

.....................................................................................................51

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

HTML (HyperText Markup Language) a fost dezvoltat iniţial de Tim Berners-Lee în anul 1989, ca urmare a necesităţii de publicare a informaţiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 şi cel mai recent HTML 4.01), fiecare versiune oferind noi facilităţi.

Se remarcă câteva trăsături cum ar fi: independenţa de platformă (modul de afişare al unui document este

acelaşi, indiferent de computerul pe care se realizează afişarea); structurarea formatării; posibilităţile hypertext (orice cuvânt, imagine sau alt element al

documentului vizualizat de utilizator poate face referinţă la un alt document, ceea ce uşurează navigarea în cadrul aceluiaşi document sau între documente diferite).

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se inserează într-un text pentru a adăuga informaţii despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem pentru definirea tipurilor de documente structurate, destinat să reprezinte instanţe ale acestor tipuri de documente. La baza SGML şi a HTML se află acelaşi principiu: descrierea conţinutului unui document se face într-un fişier text obişnuit (ASCII). S-a urmărit ca aceste fişiere să fie editabile cu aplicaţii software nepretenţioase (ex. NotePad, WordPad).

În cadrul unui document HTML, un marcaj (tag, în limba engleză) va avea forma <nume_marcaj>. Parantezele unghiulare sunt elementele care indică prezenţa unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie în marcajul de inceput:

<nume_marcaj optiune1=valoare1 optiune2=valoare2 ...>................</nume_marcaj>Exista două tipuri de marcaje: - individuale (ex. <br>)- perechi (ex. <p>...</p>) - de menţionat că sfârşitul unui marcaj este

indicat prin utilizarea caracterului '/' în faţa numelui de marcaj.În funcţie de modul de formatare a paginii, avem marcaje de tip: - block: este afişat sub elementul anterior (ex. <p>);- inline: este afişat după elementul anterior (ex. <span>);- table: este afişat sub forma unui tabel.

Marcajele perechi pot fi imbricate: <nume_marcaj1><nume_marcaj2>...............</nume_marcaj2>

7

</nume_marcaj1>Browserele vor ignora marcajele şi opţiunile pe care nu le recunosc.

1.1. Structura unui document HTMLUn document HTML 4 are următoarea structura:1. o linie conţinând versiunea HTML;2. secţiunea HEAD, delimitată de marcajele <HEAD> </HEAD>;3. secţiunea BODY, delimitată de marcajele <BODY> </BODY> sau

<FRAMESET> </FRAMESET>

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

HTML 4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">

HTML 4.01 Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">

HTML 4.01 Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/HTML4/frameset.dtd">

1.1.1 Secţiunea HEAD

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

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>

 <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.1. Etichete (tag-uri)Tag-urile nu sunt altceva decât nişte marcaje sau etichete 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.

Aceste tag-uri (etichete) pot fi de două feluri:- tag-uri pereche (un tag de început şi unul de încheiere). Exemple:

<HTML> şi </HTML>; <TITLE> şi </TITLE>; <HEAD> şi </HEAD>;- tag-uri singulare (nu au un tag de încheiere) Exemple: <HR>, <BR>.Tag-urile de baza pe care trebuie să le conţină un document HTML:<HTML> - cu acest tag începe orice document HTML. Prin folosirea

acestui tag îi spunem browser-ului că este vorba de un fişier HTML pentru a îl putea afişa.

<HEAD> - între aceste tag-uri sunt trecute, pe lângă titlul paginii, diverse informaţii folositoare pentru browser-ul de Internet;

</HEAD> - acesta este tag-ul de încheiere al tag-ului <HEAD>;<TITLE> - cu ajutorul acestei perechi de tag-uri se dă un titlu paginii web.

Astfel, textul scris între aceste tag-uri va fi afişat în bara de titlu a documentului.</TITLE> - este tag-ul de încheiere al tag-ului <TITLE>. Arată sfârşitul

titlului documentului.<BODY> - odată cu acest tag începe conţinutul paginii web. Tot ce se scrie

între tag-urile <BODY> şi </BODY> va fi afişat, de către browser, pe ecranul monitorului.

</BODY> - comunică browser-ului că s-a terminat de scris conţinutul paginii. Tot ceea ce se scrie după acest tag nu va mai fi afişat.

</HTML> - este tag-ul de încheiere al tag-ului <HTML>. Codul oricărui document se termina cu acest tag.

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

Pentru o mai bună diferenţiere şi evidenţiere etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici. Valorile atributelor trebuie să fie întotdeauna încadrate în ghilimele.

HTML nu este un limbaj case-sensitive, adică nu face distincţia între literele mici şi cele mari (majuscule). Aceasta înseamnă că indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de browser.

Daca sintaxa nu este respectată, browserul ignoră pur şi simplu tagul, la fel dacă valoarea unui atribut nu este una validă, ea va fi de asemenea ignorată.

13

Capitolul 3.Formatarea textului

3.1. Formatarea titluluiAtunci când avem nevoie să folosim un titlu în cadrul paginii noastre web

putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au şi tag-uri de încheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel în cadrul codului HTML vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfârşit vom folosi tag-ul de încheiere </H1>. Tag-urile <H1> şi </H1> permit scrierea unui titlu cu caracterele cele mai mari în timp ce textul încadrat de tag-urile <H6> şi </H6> va fi afişat cu caracterele cele mai mici, după cum urmează:

Acesta este un titlu cu <H1>Acesta este un titlu cu <H2>Acesta este un titlu cu <H3>Acesta este un titlu cu <H4>Acesta este un titlu cu <H5>Acesta este un titlu cu <H6>

Tag-urile acestea accepta atributul ALIGN cu ajutorul căruia titlul va putea fi aliniat la stânga, la centru sau la dreapta.

3.2. Formatarea textului Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>.

Acest tag acceptă mai multe atribute (color, face, size) care ne vor ajuta în formatarea textelor. Atributul COLOR se referă la culoarea textului ce va fi încadrat de tag-urile <FONT> şi </FONT>, atributul FACE arată tipul fontului, iar atributul SIZE arată mărimea fontului.

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

La tipul fontului, la fel ca şi la culori, este bine să se folosească un font care se află pe majoritatea calculatoarelor, pentru ca dacă se foloseşte un font mai puţin utilizat, mulţi utilizatori nu vor putea vedea textele din cadrul paginilor prezentate cu acelaşi font. Cele mai folosite fonturi pentru paginile web sunt următoarele:

Acest text a fost scris cu fontul "arial"

14

Acest text a fost scris cu fontul "times new roman"Acest text a fost scris cu fontul "courier new"Acest text a fost scris cu fontul "verdana"

<FONT COLOR=”#000000” FACE=”Arial”>Acest text ...</FONT>

Pentru a schimba dimensiunea implicită a fontului, vom folosi una din valorile atributului size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mică dimensiune şi 7 pentru cea mai mare):

<FONT COLOR=”#FFA500” FACE=”Arial” SIZE=”7”>Proiect diploma</FONT>

size 7: Proiect diplomasize 6: Proiect diplomasize 5: Proiect diplomasize 4: Proiect diplomasize 3: Proiect diplomasize 2: Proiect diplomasize 1: Proiect diploma

Dacă vrem ca textul nostru să fie scris cu caractere îngroşate, folosim perechea de etichete <B> şi </B>.

<B>Text bold</B>Text bold

Pentru ca textul să fie scris cu caractere italice, folosim perechea de etichete <I> şi </I>.

<I>Text italic</I>Text italic

Pentru ca textul să fie subliniat, folosim perechea de etichete <U> şi </U>. <U>Text subliniat</U>Text subliniat

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>

Acest cod va avea ca rezultat:Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul 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>

Acest cod va avea ca rezultat:Invat limbajul HTML.Exersez limbajul HTML.Stiu limbajul HTML.

Tag-ul <P> vine de la cuvântul paragraf si se deosebeşte de tag-ul <BR> prin faptul că prin utilizarea lui nu numai că se trece pe următorul rând, dar se şi lasă un rând liber intre texte. Revenind la exemplul de mai sus, se vor folosi ambele tag-uri, <BR> şi <P>, pentru a se vedea diferenţa dintre ele.

<HTML><HEAD><TITLE>Eticheta <BR></TITLE></HEAD><BODY>

16

Invat limbajul HTML.<BR>Exersez limbajul HTML.<P>Stiu limbajul HTML.

</BODY></HTML>

Acest cod va avea ca rezultat:Invat limbajul HTML.Exersez limbajul HTML.

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

Vom obţine următorul rezultat:

Invat limbajul HTML.

Exersez limbajul HTML.

Stiu limbajul HTML.

3.3. Utilizarea caracterelor specialePentru ca browser-ul să citească diacriticele specifice limbii române (ă, î, ş, ţ

etc.) trebuie să scriem o anumită combinaţie de diverse caractere.

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 &#238nv&#259ţa &#238mpreun&#259 limbajul HTML.Aceasta este prima mea pagin&#259 web!</BODY></HTML>

18

Capitolul 4.Despre culori

Culoarea reprezintă un caracteristică extrem de importantă a unei pagini Web. Utilizată cu grijă şi măsură, ea poate îmbunătăţi substanţial aspectul paginii, făcând-o mai lizibilă şi mai atractivă, iar textul mai uşor de parcurs.

Pe de altă parte, utilizarea excesivă sau inadecvată a culorilor poate transforma un text de calitate într-un fel de caleidoscop obositor, greu de urmărit, şi care îi va determina pe mulţi vizitatori să renunţe la a-l mai parcurge.

Datorită faptului că ea reprezintă un atribut al multor elemente ale documentelor Web (text, fundaluri, margini, link-uri), am optat pentru prezentarea detaliată a modului de utilizare al culorilor încă din această etapă a lucrării noastre.

4.1. Sistemul de definire a culorilorSistemul general utilizat pentru definirea culorilor este RGB prin care sunt

specificate pentru fiecare culoare care sunt cantităţile de roşu (Red), verde (Green) şi albastru (Blue) care o compun.

În HTML orice culoare este desemnată printr-un cod de 6 cifre hexazecimale, dintre care primele două reprezintă cantitatea de roşu, cele două din mijloc, cantitatea de verde, iar ultimele două cantitatea de albastru.

Sistemul hexazecimal este un sistem de numeraţie care foloseşte 16 cifre, existând următoarea corespondenţă între cifrele hexazecimale şi cele zecimale:

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

0 1 2 3 4 5 6 7 8 9 A B C D E F

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:

Nume culoare

Cod hexazecimal

Nume culoare

Cod hexazecimal

Aqua #00FFFF Navy #000080

Black #000000 Olive #808000

Blue #0000FF Purple #800080

19

Fuchsia #FF00FF Red #FF0000

Gray #808080 Silver #C0C0C0

Green #008000 Teal #008080

Lime #00FF00 Yellow #FFFF00

Maroon #800000 White #FFFFFF

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

4.2. Corespondenţa dintre codurile hexazecimal şi zecimalMulte dintre editoarele grafice folosesc pentru a defini culorile codul

zecimal. Deşi se bazează şi ele pe acelaşi sistem RGB de definire a culorilor, numerele care stabilesc cantităţile celor trei culori sunt specificate în sistemul zecimal.

De exemplu, o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99, 255, 128. Această corespondenţă se realizează simplu, trecând fiecare dintre cele trei numere hexazecimale din codul culorii în sistemul zecimal:

63(16)=99(10) , FF(16)=255(10), 80(16)=128(10)

Vom lua pe rând atributele etichetei <BODY>. Cu ajutorul lor se pot seta culorile fundalului, textului şi linkurilor:

bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilorvlink - culoarea linkurilor vizitatealink - culoarea linkului activ

4.3. Culoarea fundaluluiPentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor

(background color) al etichetei <BODY>, căruia îi atribuim o valoare astfel:<BODY bgcolor="#RGB sau nume_culoare"> Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal

al culorii fie numele ei. Iată un exemplu de pagină cu fundal verde:

EXEMPLU:<HTML><HEAD><TITLE>culori1</TITLE></HEAD><BODY bgcolor="#00FF00"><h1 align="center">Pagina cu fundal verde</h1><hr></BODY>

20

</HTML>

4.4. Culoarea textuluiPentru a seta culoarea textului din întreaga pagină se foloseşte atributul text

al etichetei <BODY>, conform sintaxei:<BODY text="#RGB sau nume_culoare">

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>

4.5. Culoarea legăturilorÎn general legăturile (links) dintr-o pagină Web au culori prestabilite

(default), astfel:blue (albastru) - pentru legăturired (roşu) - pentru legătura activa (cea pe care este fixat cursorul mouse-ului,

cu butonul stâng apăsat)purple (violet) - pentru legăturile vizitate, cele pe care s-a efectuat cel puţin

un clickPentru a schimba culorile prestabilite se folosesc următoarele atribute ale

etichetei <BODY>: - link pentru legături - alink pentru legăturile active - vlink pentru legăturile vizitate conform sintaxei: <BODY link="#RGB sau nume_culoare"

21

alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare"> Documentul din EXEMPLU creează o pagină în care textul este negru iar

legăturile au culoarea verde, legăturile active culoarea albastru şi cele vizitate, culoarea roşu. În EXEMPLU este folosită eticheta <a> cu atributul href.

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>

4.6. Culori "sigure"Nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de

codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori, aşa-numită paletă Web sau "culorile sigure Web".

Culorile "sigure" sunt cele definite prin standardul HTML 3.2 prezentat în tabelul din anexă sau sunt realizate prin combinaţii ale următoarelor numere hexazecimale: 00 33 66 99 CC FF

Codul hexazecimal variază între #FFFFFF (alb) şi #000000 (negru).

22

Capitolul 5.Imagini şi elemente multimedia

Conţinutul paginilor Web capătă un aspect atractiv şi profesional dacă au incluse fotografii, imagini animate, sunete sau imagini video.

5.1. Formatele fişierelor graficeImaginile sunt stocate în fişiere cu diverse formate, cele mai folosite pe Web

fiind cele care conferă un raport optim între calitatea imaginii şi dimensiunile fişierului.

Două dintre cele mai utilizate tipuri de fişiere grafice sunt JPEG (Joint Photographic Experts Group) şi GIF (Graphics Interchange Format).

5.1.1. Formatul GIFFormatul GIF (.gif) foloseşte 256 de culori şi este ideal pentru icon-uri,

ilustraţii şi animaţie. Acest format utilizează o tehnologie specială de comprimare care reduce semnificativ dimensiunile fişierelor grafice pentru un transfer mai rapid prin reţea. În procesul de comprimare se păstrează toate caracteristicile imaginii originale, astfel că după decomprimare imaginea are acelaşi aspect ca şi originalul, de asemena imaginile GIF suportă efecte de transparenţă, întreţesere şi animaţie.

Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent utilizat în paginile Web.

Totuşi, datorită numărului redus de culori, formatul GIF nu este potrivit pentru fotografii sau imagini de calitate înaltă. Pentru acest tip de imagini, cel mai adecvat este formatul JPEG.

5.1.2. Formatul JPEGFormatul JPEG (.jpg), pe de altă parte, suportă un număr mult mai mare de

culori (aproximativ 16 milioane). Dimensiunile unui fişier JPEG nu depind de numărul de culori ci de gradul de comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat decât cel al formatului GIF. Nu este neobişnuit, de exemplu, ca un fişier GIF care are 200 de Kb să fie comprimat ca fişier JPEG până la dimensiunea de 30 de Kb.

Pentru a realiza un grad atât de înalt de comprimare a imaginilor, formatul JPEG pierde anumite informaţii din imaginea originală. Cu toate că la decomprimare imaginea JPEG nu va fi absolut identică cu imaginea originală, diferenţele vor fi de cele mai multe ori inobservabile.

Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraţii, desene sau imagini de dimensiuni reduse. Algoritmii folosiţi pentru comprimarea şi decomprimarea imaginii alterează în mod notabil zonele de mari dimensiuni colorate cu o singură nuanţă. Din acest motiv, atunci când doriţi să includeţi în pagină un desen sau o ilustraţie care foloseşte un număr redus de culori, formatul GIF este cel mai potrivit.

23

5.2. Inserarea unei imaginiPentru 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>

Atributele etichetei <IMG>:- border: plasează un chenar în jurul imaginii. Valoarea atributului border

este numărul de pixeli care reprezintă grosimea chenarului din jurul imaginii. Absenţa atributului sau setarea la valoarea "0" face ca acest chenar să nu fie prezent.

- alt: permite afişarea unui text explicativ în spaţiul în care va fi afişată imaginea în pagină. Prin urmare, dacă dintr-un motiv oarecare, imaginea nu se încarcă în pagină, se încarcă mai greu, sau este vizualizată cu un browser care nu suportă grafica, în zona rezervată imaginii va fi afişat textul specificat ca valoare a atributului alt. De asemenea, textul specificat ca valoare pentru atributul alt va fi afişat şi în cadrul unei mici ferestre care se deschide în momentul când cursorul mouse-ului este menţinut deasupra imaginii.

5.3. Dimensionarea imaginiiDimensionarea imaginii se realizează cu ajutorul atributelor width (prin care

se stabileşte lăţimea imaginii) şi height (prin care se stabileşte înălţimea imaginii) în pixeli şi în cazuri speciale în procente. Această ultimă variantă nu este

24

recomandată deoarece prin redimensionarea ascendentă a imaginii de către browser, aceasta va pierde din calitate. Acelaşi lucru se petrece şi în cazul redimensionării prin stabilirea unor valori mai mari a pixelilor decât dimensiunea iniţială a imaginii.

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>

Absenţa atributelor de dimensionare din cadrul etichetei <IMG> este considerată o practică defectuoasă. Motivul este acela că includerea dimensiunilor imaginii oferă browserului posibilitatea de a rezerva spaţiu pentru imagine şi de a începe încărcarea textului simultan cu încărcarea imaginii. Dacă atributele de dimensionare nu sunt prezente, browserul va efectua nişte paşi suplimentari pentru a calcula spaţiul din pagină necesar afişării imaginii. Din acest motiv afişarea textului nu va putea începe decât după ce imaginea este încărcată în întregime. Este indicat să evitam o asemenea situaţie deoarece imaginile se încarcă mai greu decât textul.

5.4. Alinierea imaginii şi a textului Alinierea unei imagini în raport cu textul din pagină se realizează prin

intermediul atributului align, care poate lua următoarele valori: - left - aliniere la stânga; textul este dispus în partea dreaptă a imaginii

încadrând imaginea;- right - aliniere la dreapta; textul este dispus în partea stânga a imaginii

încadrând imaginea;- top - aliniere deasupra; partea de sus a imaginii se aliniază cu prima linie a

textului ce precede imaginea; - middle - aliniere la mijloc; mijlocul imaginii se aliniază cu prima linie a

textului ce precede imaginea; - bottom - aliniere dedesubt, la bază; partea de jos a imaginii se aliniază cu

prima linie a textului. Valorile left, right şi bottom ale atributului align permit ca textul să fie

dispus în jurul imaginii, în vreme ce top şi middle nu permit acest lucru.

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

5.5. Imagini folosite ca fond (background) al paginiiO imagine poate fi utilizată şi pentru a stabili fondul unei pagini Web. În

acest scop se foloseşte atributul background al etichetei <BODY>, având ca valoare adresa URL a imaginii. Imaginea se multiplică aliniat (tiling) pe orizontală şi pe verticală până umple întregul ecran.

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>

5.6. Imaginile videoPentru a insera o imagine video într-un document HTML se folosesc

atributele dynsrc, controls, loop şi start ale etichetei <IMG>.

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)

O modalitate de structurare avansată a unui document HTML este împărţirea ferestrei browserului în mai multe ferestre distincte, denumite cadre (frames).

Această facilitate permite afişarea simultană, în aceeaşi fereastră a browserului, a două sau mai multe documente HTML diferite, câte unul în fiecare cadru.

Avantaje: dimensiunea (KB) mai mică a fiecărui cadru în parte, comparativ cu

cazul în care ar fi existat o singură pagină, determină un timp de încărcare mai redus.

Dezavantaje: unele motoare de căutare nu indexează siturile realizate cu cadre; autorul trebuie să ţină evidenţa unui număr mare de pagini HTML; există unele browsere care nu pot afişa pagini realizate cu cadre; este dificil de printat întreaga pagina.Într-o pagină de cadre lipseşte elementul BODY, conţinutul paginii fiind

marcat cu ajutorul controalelor <frameset> şi </frameset>.Frameset defineşte modul de împărţire al ferestrei (spaţiul alocat fiecărui

cadru în parte).Fiecare cadru din interiorul documentului este marcat cu ajutorul

controalelor <frame> şi </frame>.

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.

<frameset [border=n] [bordercolor=#rrggbb][cols=x,y,..] [rows=x,y,..] ...</frameset>

Marcajul <frameset> are următoarele atribute: border - defineşte lăţimea chenarului; numai frameset-ul exterior va

răspunde la valoarea acestui atribut. Este o extensie Microsoft/Netscape. bordercolor - specifică culoarea chenarului, în format RGB. Este o

extensie Microsoft/Netscape. cols - defineşte (pe verticală) dimensiunile sau proporţiile cadrelor în

cadrul unui <frameset>. Dimensiunile pot fi precizate ca: o valoare absolută (în pixeli) o valoare relativă (în procente) o * - semnifică spaţiul rămas disponibil după afişarea cadrelor anterior

definite rows - defineşte (pe orizontală) dimensiunile sau proporţiile cadrelor

în cadrul unui <frameset>. Dimensiunile pot fi precizate ca: o valoare absolută (în pixeli) o valoare relativă (în procente) o * - semnifică spaţiul rămas disponibil după afişarea cadrelor anterior

definite Cadrele propriu-zise sunt introduse prin marcajul <frame>.

<frame [frameborder=yes|no] [longdesc=URL][src=URL] [name=identificator] [noresize][scrolling = auto|yes|no] [marginwidth=x][marginheight=y]...</frame>

Marcajul <frame> are următoarele atribute: frameborder - specifică dacă un cadru va afişa sau nu chenar. În

cazul în care un cadru are setat frameborder=no, iar cadrele adiacente au

31

specificată afişarea chenarului, acest atribut nu va avea efect pentru cadrul cu frameborder=no.

longdesc - specifică un link către o descriere "lungă" a cadrului respectiv. Scopul acestei descrieri este de a completa descrierea realizată prin atributul TITLE.

src - specifică linkul către conţinutul iniţial care va fi încărcat în elementul <frame>. Linkul poate fi o cale absolută (http://www.domeniu.ro/pagina.HTML) sau relativă (pagina.HTML).

name - atribuie un nume cadrului curent. Acest nume poate fi folosit în combinaţie cu marcajul a (<a href="pagina.HTML" target="RightFrame">...</a>) pentru a încărca o pagină într-un anumit cadru.

noresize - cadrele pot fi redimensionate de către utilizatori. Prin folosirea atributului noresize browserul va bloca redimensionarea cadrelor de către utilizator.

scrolling - specifică browserului afişarea/ascunderea barei de scroll (derulare) dintr-un cadru. Poate lua următoarele atribute:

o auto - afişarea barei de scroll se face atunci când este necesar (conţinutul depăşeşte spaţiul afişabil);

o yes - bara de scroll este permanent afişată;o no - bara de scroll nu va fi afişată, chiar şi in eventualitatea în care este

necesară. marginwidth, marginheight - specifică distanţa dintre marginea

interioară a cadrului şi conţinutul afişabil. Atributul marginheight stabileşte distanţa pentru marginea superioară/inferioară a cadrului. Atributul marginwidth stabileşte distanţa pentru marginea stânga/dreapta a cadrului.

Exemplul de mai jos defineşte un <frameset> cu două coloane:

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>

Marcajul <noframes> reprezintă alternativa (codul HTML) care va fi afişată în browserele care nu suportă cadre. Browserele care pot afisa cadre vor ignora acest marcaj.

Exemplul de mai jos defineşte un <frameset> cu două rânduri:

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>

Exemplul de mai jos defineşte un <frameset> cu două cadre orizontale, primul cadru având alocat 25% din spaţiul disponibil pe verticală, iar cel de al doilea cadru 75%:

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)

Navigarea în cadrul site-urilor este posibilă cu ajutorul link-urilor (legăturilor).

Printr-o legătură într-un document HTML înţelegem marcajul locului de unde se poate efectua trecerea (cuplarea, conectarea) la un alt document sau la o nouă locaţie din documentul curent. Un loc marcat mai este denumit ancorare.

Marcajele pot fi de două tipuri: 1) legături către alte locaţii: acestea se vor caracteriza prin textul legăturii

(vizibil în documentul afişat pe ecran) şi prin adresa la care se poate efectua un salt; textul legăturii va apărea pe ecran subliniat, într-o culoare diferită de cea a textului adiacent; adresa ţintă a legăturii apare (dacă nu s-a indicat alt text) pe linia de stare a ferestrei browserului atunci când pointerul mouse-ului este pe textul legăturii;

2) definiri de nume care au doar rolul de a introduce ţinte pentru legături; nu sunt diferenţiate în documentul afişat pe ecran.

7.1. Legătura către o altă pagină - Link-urileMarcajul HTML principal pentru introducerea referinţelor către alte pagini

HTML sau către elemente din cadrul aceleiaşi pagini web este <a>, a provenind de la anchor. El trebuie să conţină atribute, în caz contrar neafectând formatarea documentului.

EXEMPLU:Exemplul următor nu va afecta formatarea documentului:<a>Aici</a> ar trebui sa fie un link !

Pentru a activa linkul de mai sus vom adauga atributul href.

Exemplul următor arată formatarea documentului:<a href="pagina.HTML">Aici</a> este un link !

Referinţele pot fi absolute (ex. <a href="http://www.domeniu.ro/pagina.HTML">http://www.domeniu.ro/pagina.HTML<a>) sau relative (ex. <a href="pagina.HTML">pagina.HTML<a>).

Referinţele relative sunt folosite în interiorul siturilor. Ele funcţionează pe baza faptului că browserul adaugă automat numele domeniului la fiecare referinţă (presupunând că există o pagină la adresa http://www.hostx.ro/director/pagina.HTML şi o referinţă relativă către pagina2.HTML, browserul va construi referinţa

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

7.2. Legătura către o secţiune de pagină - AncorelePână acum am prezentat modul de realizare a referinţelor externe, către alte

pagini sau către alte situri. Atunci când avem de-a face cu pagini mai lungi, putem împărţi aceste pagini în mai multe secţiuni către care să adăugăm câte o legătura la începutul paginii pentru ca utilizatorii să ajungă mai repede la secţiunea care îi interesează. În acest caz soluţia constă în utilizarea ancorelor.

O ancoră are următorul format:<a name="nume_ancora">...</a>Numele ancorelor nu poate conţine spaţii şi trebuie să fie unic în pagina

respectivă.În exemplul următor se observă o posibilă greşeală în atribuirea numelui

ancorelor:<a name="xxx">...</a><a name="XXX">...</a>În HTML xxx şi XXX înseamnă acelaşi lucru.

Odată definită ancora trebuie definită şi legatura activă către ancora respectivă. Ea va fi o referinţă hypertext în formatul următor: <a href="#nume_ancora">Link catre ancora</a>

Trebuie reţinut că există posibilitatea de a crea referinţe către ancore aflate în documente externe: <a href="pagina.htm#nume_ancora">Link catre ancora externa</a>

35

7.3. Legătura către o adresă de e-mailForma 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>

7.4. Utilizarea unei imagini ca legăturăPentru a folosi o imagine ca legatură între tag-urile <a> şi </a>, va trebui

scrisă adresa imaginii: <A href=numepagina.HTML><img src="adresaimaginii"</A>

7.5. Schimbarea culorilor legăturilorFiecare legătură din cadrul unei pagini web are trei culori: • o culoare pentru legăturile nevizitate (nu a fost efectuat nici un click pe

ele);• o culoare pentru legăturile vizitate (s-a efectuat cel puţin un click pe ele);• o culoare pentru legăturile active (atunci când cursorul mouse-ului se află

deasupra lor).Pentru fiecare culoare, din cele trei de mai sus, există câte un atribut al tag-

ului </BODY> ajutorul caruia putem schimba culoarea implicita: • link pentru legăturile nevizitate;• vlink pentru legaturile vizitate;• alink pentru legaturile active.Fiecărui atribut i se va atribui un nume de culoare sau codul unei culori.

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

Enumerările, de orice fel, constituie o parte importantă a comunicării prin faptul că ajută la sistematizarea şi evidenţierea unor intrări.

HTML oferă mai multe mecanisme pentru specificarea listelor de informaţii. Există trei tipuri de liste, fiecare tip trebuie să includă cel puţin un element:

1) liste de tip definiţie;2) liste ordonate (numerotate);3) liste neordonate (marcate).

8.1. Liste de tip definiţieUnul dintre cele mai obişnuite elemente în paginile HTML este un set de

definiţii, referinţe sau indexuri. Un exemplu concret îl reprezintă glosarele; cuvintele sunt listate alfabetic, însoţite de definiţiile termenilor respectivi.

Lista de tip definiţie este introdusă de marcajele: <dl>...</dl> - lista definiţii (definition list); <dt> - termenul definit (definition term); <dd> - definiţie (definition).EXEMPLU:

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

8.2. Liste neordonateSunt introduse de marcajele: <ul>...</ul> - lista neordonată (unordered list);

37

<li> - element listă.

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>

Atributului type precizează tipul maracatorului. Putem schimba cercul plin din faţa fiecarui element (acesta este folosit în mod implicit atunci când folosim o listă neordonată) prin atribuirea atributului type valori precum square (pătrat) sau circle (cerc).

8.3. Liste ordonateSunt introduse de marcajele: <ol>...</ol> - lista ordonată (ordered list); <li> - element listă.

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>

Ca şi în cazul listelor neordonate, şi la listele ordonate, atributul type are o valoare implicită: numerele. În loc de numere putem folosi şi alte caractere. Pentru

38

a folosi aceste caractere este de ajuns să utilizam atributul type cu valoarea potrivita.

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>

8.4. Personalizarea listelorÎn locul simbolurilor folosite în mod prestabilit pentru elementele listelor se

pot afişa propriile imagini. Pentru aceasta, în loc de tag-ul <li> cu care introducem fiecare element al listei vom adăuga imaginea dorită cu ajutorul tag-ului <img>.

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>

Semnificaţiile atributelor marcajului <table> sunt: border - specifică grosimea chenarului tabelului. Dacă are valoarea 0

sau atributul lipseşte, tabelul nu va avea chenar. frame - defineşte modul de afişare a chenarului exterior. Funcţionează

în prezenţa atributului "border". Atributul frame poate avea următoarele valori: o above - afişează latura superioară a chenarului; o below - afişează latura inferioară a chenarului; o border - afişează chenarul complet; o box - afişează chenarul complet (la fel ca şi border); o hsides - afişează părţile inferioară, respectiv superioară ale chenarului; o vsides - afişează părţile laterale (stânga, dreapta) ale chenarului; o lhs - afişează latura stângă a chenarului; o rhs - afişează latura dreaptă a chenarului; o void - fără bordura exterioara. rules - defineşte modul de afişare a chenarului interior dintre celulele

tabelului. Funcţionează în prezenţa atributului "border". Atributul rules poate avea următoarele valori:

o none - nu se afişează chenar interior;

40

o groups - afişează chenar între grupurile de celule definite de tHEAD, tBODY, colgroup, col, tfoot;

o rows - afişează chenar între linii; o cols - afişează chenar între coloane; o all - afişează chenar între toate celule interioare. width, height - specifică lăţimea, respectiv înălţimea tabelului. În

cazul în care valorile specificate nu sunt suficiente pentru afişarea conţinutului celulelor, valorile vor fi modificate automat de către browser astfel încât tot conţinutul să fie afişat. Valorile se pot exprima absolut, în pixeli, sau relativ la lăţimea ecranului (width), respectiv la înălţimea ecranului (height). Trebuie menţionat că atributul "height" nu face parte din specificaţiile HTML. Este recomandat să fie lăsat browserul să calculeze valoarea pentru "height" în funcţie de conţinutul tabelului.

bgcolor - specifică culoarea pentru fundalul tabelului. bordercolor - specifică culoarea chenarului. bordercolorlight, bordercolordark - sunt atribute utilizate pentru a

crea un efect 3D asupra chenarului. Este recomandată folosirea de culori complementare pentru a obţine efectul scontat. Sunt extensii Microsoft.

background - URL-ul imaginii care va fi utilizată ca fundal al tabelului. În cazul in care dimensiunile imaginii sunt mai mici decât cele ale tabelului, ea va fi repetată astfel încât să acopere întregul fundal al tabelului. Este extensie Microsoft.

cellspacing - specifică distanţa dintre celule. cellpadding - specifică marginea interioară a celulelor. align - specifică alinierea pe orizontală a tabelului (stânga|centru|

dreapta). valign - specifică alinierea pe verticală a tabelului (sus|mijloc|jos). summary - o descriere a tabelului, de obicei pentru browsere non-

vizuale.

Cea mai simplă formă a unui tabel se prezintă astfel:<table>

<tr><td>....</td><td>....</td>

</tr><tr>

<td>....</td><td>....</td>

</tr></table>

O formă mai complexă a unui tabel este: <table>

41

<tHEAD><tr><th>Nr. Crt</th><th>Nume Autor</th><th>Denumire Lucrare</th></tr>

</tHEAD><tBODY>

<tr><td>...</td><td>...</td><td>...</td>

</tr><tr>

<td>...</td><td>...</td><td>...</td>

</tr></tBODY>

</table>

Semnificaţiile atributelor marcajului <table> sunt: <tHEAD>...</tHEAD> este un marcaj care conţine unul sau mai

multe rânduri de celule care reprezintă antetul tabelului. Poate apărea o singură dată în cadrul unui tabel.

<tBODY>...</tBODY> este un marcaj care conţine unul sau mai multe rânduri de celule. Pot fi definite mai multe astfel de secţiuni în cadrul aceluiaşi tabel (ex. în cazul în care există stiluri de formatare diferite pentru secţiuni diferite ale tabelului).

<tfoot>...</tfoot> este un marcaj care conţine unul sau mai multe rânduri de celule care reprezintă subsolul tabelului. Poate apărea o singură dată în cadrul unui tabel. Este obligatoriu să apără înaintea marcajului <tBODY>.

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>

Marcajul caption adaugă o scurtă descriere (titlu) a tabelului. Poate fi utilizat numai în cadrul unui marcaj <table>, imediat după acesta.

Are următoarele atribute: align - în mod normal browser-ul va afişa titlul aliniat central şi

deasupra/dedesubtul tabelului. În HTML 4.0 atributul align a fost abandonat în favoarea formatării prin CSS (text-align şi vertical-align).

valign - precizează poziţia titlului în raport cu tabelul (sus/jos).

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>

Marcajul <tr> defineşte o linie intr-un tabel. Are următoarea sintaxă:

<tr [align=left|center|right] [valign=top|middle|bottom|baseline] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare]>....</tr>

Poate avea următoarele atribute: align - specifică modul în care va fi aliniat pe orizontală conţinutul

liniei de tabel. valign - specifică modul în care va fi aliniat pe verticală conţinutul

liniei de tabel. bgcolor - specifică culoarea pentru fundalul liniei de tabel. bordercolor - specifică culoarea chenarului celulelor din linie de

tabel. bordercolorlight, bordercolordark - sunt atribute utilizate pentru a

create un efect 3D asupra chenarului de tabel. Marcajul <th> defineşte o celulă din antetul tabelului. Sintaxa este:

<th [align=left|center|right] [valign=top|middle|bottom|baseline]

44

[background="url-imagine"] [colspan=n] [rowspan=m] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]>....</th>Poate avea următoarele atribute: align, valign - indică alinierea orizontală şi verticală a conţinutului

celule, în celula. colspan - specifică numărul de coloane peste care se întinde celula

curentă spre dreapta. rowspan - specifică numărul de linii peste care se întinde celula

curentă în jos. nowrap - împiedică "ruperea" textului din celulă pe mai multe linii. bgcolor, background, bordercolor, bordercolorlight,

bordercolorlight - au efecte similare celor menţionate mai sus.

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>

Marcajul <td> defineşte o celulă din tabel. Are următoarea sintaxă:

45

<td [align=left|center|right] [valign=top|middle|bottom|baseline] [background="url-imagine"] [colspan=n] [rowspan=n] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]>...</td>

Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, în cazul marcajului <th>.

Ultimele atribute sunt colspan şi rowspan. Ele extind o celula pe mai multe coloane, respectiv linii ale tabelului.

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>

Exemplu utilizare rowspan: <table border=1 cellspacing=0 cellpadding=1 width="100%" align="left"><caption valign=top>Exemplu tabel </caption>

<tr><td rowspan="2"><center>Celula 1.1</center></td><td><i>Celula 1.2</i></td>

</tr><tr>

<td ><s>Celula 2.2</s></td></tr>

</table>

46

Capitolul 10.Formulare

Formularele reprezintă o metodă de interactivitate cu utilizatorii paginilor web. Prin intermediul unui formular se pot obţine date importante de la vizitatori. După ce formularul a fost completat, utilizatorul apasă un buton de trimitere, iar datele introduse în formular vor fi primite sub forma unui e-mail sau vor fi procesate cu ajutorul unui limbaj de programare şi adăugate într-o bază de date.

Un formular este introdus în pagina web prin tag-urile <FORM> şi </FORM>. Între aceste tag-uri vor fi introduse toate elementele formularului.

Tag-ul <FORM> are două atribute foarte importante: action şi method. Cu ajutorul atributului action îi spunem browser-ului ce se va întâmpla cu

datele introduse în formular. Astfel, valoarea atributului action poate fi o adresa URL a unui script, scris într-un limbaj de programare, care va interpreta datele şi le va introduce într-o bază de date, dacă este cazul, sau poate fi o adresă de email, caz în care datele introduse în formular vor fi trimise prin email la adresa respectivă.

Atributul method, aşa cum îi spune şi numele, precizează metoda de trimitere a datelor şi poate avea două valori. Valoarea implicită a acestui atribut este get, cu ajutorul acestei metode putând fi trimise cantităţi mici de date, cea mai folosită metoda fiind post.

10.1. Elementele unui formularElementele unui formular trebuie introduse, în majoritatea cazurilor, cu

ajutorul tag-ului <input>. Atributele cele mai importante ale acestui tag sunt următoarele:

- type - tipul elementului;- name - numele elementului;- value - valoarea elementului.

Elementele ale unui formular pot fi:- câmpurile de editare;- butoanele radio;- casetele de validare;- casetele de fişiere;- listele de selecţie;- butoanele submit şi reset.

10.1.1. Câmpurile de editarePentru a introduce în cadrul unui formular un câmp de editare, trebuie să

folosim pentru atributul type, al tag-ului <input>, valoarea text.

47

EXEMPLU:

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

Dacă se doreşte introducerea unui câmp de editare de tip "parolă", atributul type va avea valoarea "password". În acest caz, caracterele introduse în câmpul de editare, nu vor fi vizibile.

Atunci când vrem să adăugam în cadrul formularului nostru un câmp de editare în care să poată fi introduse mai multe rânduri, folosim câmpurile de editare de tip multilinie. Pentru a folosi un astfel de câmp de editare, avem nevoie de tag-urile <textarea> şi </textarea>.

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.

10.1.2. Butoanele radioDaca avem o întrebare cu mai multe variante de răspuns, vom folosi

butoanele radio. Pentru a introduce un buton radio, folosim tag-ul <input>, iar la atributul type, valoarea "radio".

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 aniCodul HTML al exemplului de mai sus este următorul:&#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadraţ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

Cu ajutorul atributului checked, fără alte valori, putem selecta un buton radio în mod prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, în acelaşi timp.

10.1.3. Casetele de validarePentru a introduce o casetă de validare (checkbox) se utilizează eticheta

<input> cu atributul type având valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor opţiuni.

EXEMPLU:Unde vă petreceţi concediul de obicei?

La mare

La munte

În străinătate

La ţară

Acasă

Codul HTML al exemplului de mai sus este următorul:Unde v&#259 petreceţi concediul de obicei?<br><input type="checkbox" name="optiunea1">La mare<br><input type="checkbox" name ="optiunea2">La munte<br><input type="checkbox" name ="optiunea3">&#206n

str&#259in&#259tate<br><input type="checkbox" name ="optiunea4">La ţar&#259<br><input type="checkbox" name ="optiunea5">Acas&#259

10.1.4. Casetele de fişierePentru a trimite un fişier prin intermediul unui formular, folosim pentru

atributul type al tag-ului <input>, valoarea "file".

49

EXEMPLU:

Codul HTML al exemplului de mai sus este următorul:<input type="file" name="file">

10.1.5. Listele de selecţieO listă de selecţie, aşa cum îi spune şi numele, permite utilizatorului să

aleagă una sau mai multe opţiuni dintr-o listă. Listele de selecţie pot fi introduse în cadrul unui formular cu ajutorul tag-urilor <select> şi </select>.

Atributele cele mai folosite pentru tag-ul <select> sunt: • name, atribuie listei de selecţie un nume;• size, specifică numărul de elemente din cadrul listei de selecţie;• value, atribuie o valoare de tip text care va fi expediată serverului, sub

forma de perechi "name = value";• selected (fără alte valori), selectează în mod prestabilit un element al listei.

EXEMPLU:Alege un judeţ din România:

Pentru a selecta in mod implicit valoarea Bucureşti, am folosit în dreptul

acesteia atributul selected. Codul HTML al exemplului de mai sus este următorul:<select><option value=Alba>Alba</option><option value=Arad>Arad</option><option value=Arges>Arges</option><option value=Bacau>Bacau</option><option value=Bucuresti selected>Bucuresti</option><option value=Buzau>Buzau</option>…</ select >Pentru a putea selecta mai multe valori din cadrul unei liste de selecţie

trebuie să folosim pentru tag-ul <select> atributul multiple, fără alte valori.

10.1.6. Butoanele de tip Submit şi ResetPentru a putea expedia datele introduse în cadrul unui formular, fie prin e-

mail, fie către un script scris într-un limbaj de programare care va interpreta aceste date, trebuie să folosim un buton de trimitere. Pentru a introduce un asemenea buton folosim tag-ul <input>, cu atributul type având valoarea "submit". Putem modifica şi valoarea butonului, care în mod implicit este Submit, cu ajutorul atributului value.

50

Linia de cod pentru un buton de tip submit va fi următoarea: <input type="submit" value="Trimite">Alături de butonul de tip Submit, putem folosi şi un buton de tip Reset. Prin

apăsarea acestui buton toate elementele formularului vor reveni la valoarea lor prestabilită, indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip Reset, se procedează la fel ca şi la butonul de tip Submit, singura deosebire fiind că atributul type va avea valoarea "reset".

Linia de cod pentru un buton de tip reset va fi următoarea: <input type="reset" value="Sterge">

10.2. Trimiterea datelor dintr-un formular prin e-mailPentru ca datele introduse într-un formular să fie trimise prin e-mail trebuie

să folosim pentru atributul action al tag-ului <form>, valoarea mailto:[email protected], în felul acesta, datele introduse in formular vor fi trimise la adresa de e-mail specificată.

EXEMPLU:Pentru a trimite datele dintr-un formular la adresa [email protected] vom

folosi următoarea linie de cod: <form action="mailto:[email protected]" method="post">

51

mailto:[email protected]

Bibliografie selectivă

Buraga, Sabin, Proiectare situri Web: design şi funcţionalitate, Editura Polirom, 2002.

idem, Tehnologii Web, Editura Matrix Rom, Bucureşti, 2001.Castro, Elizabeth, Html pentru world wide web, Editura Corint, 2003.Darnel, Rick, Totul despre HTML 4, Editura Teora, 2000Drăghici, Margareta Dina, Situri Web în HTML 4, Editura Tehnică, 2003.Evans, Tim, HTML...în lecţii de 10 minute, Editura Teora, 1996Mavrodin, Horaţiu, Iniţiere rapidă în: Windows, Word, Excel, Access,

PowerPoint, Internet Explorer, HTML, Editura Sigma, 2006.Mitchell, Scott, Cum să creezi un site WEB, Editura Teora, Bucureşti, 2008.Phillips, Lee Anne, Utilizare HTML 4, Teora, Bucuresti, 2000.Stamate, Eugenia Lucia, Crearea şi publicarea unui site web. Limbajul html şi

elemente de web design, Editura Paralela 45, 2005Taylor, Dave, Crearea paginilor WEB cu HTML 4, Teora, Bucuresti, 1998.

52

Anexe

53

Anexa 2.Tag-uri şi atributele lor

- ordine alfabetică -

Nume tagNume atribut

Valoare atribut

Detalii

<A> Ancora

href URL Adresa catre care vrem sa fie legatura

target _blank_self_parent_top

Fereastra in care se va face afisarea

<B> Text bold

<BODY> Cuprinsul documentului

background adresa imaginii

Imaginea de fond

bgcolor cod culoarenume culoare

Culoarea fondului

leftmargin procent din latimea paginiinumar de pixeli

Distanta dintre marginea din stanga a ferestrei browserului si marginea din stanga a paginii

topmargin procent dininaltimea paginiinumar de pixeli

Distanta dintre marginea de sus aferestrei browserului si marginea de sus a paginii

text cod culoarenume culoare

Culoarea textului

alink cod culoarenume culoare

Culoarea legaturilor active (atunci cand mouse-ul se afla deasupra lor)

link cod culoarenume culoare

Culoarea legaturilor nevizitate (nu s-a 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 culoarenume culoare

Culoarea fontului

face nume font Tipul fontului

size un numar de la 1 la 7

Marimea fontului

<FORM> Formular interactiv

action URL Adresa scriptului care prelucreaza datele din cadrul formularului

method GETPOST

Metoda de prelucrare a datelor formularului

<FRAME> Cadru (fereastra)

frameborder 1 sau 0 Cadrul are sau nu are chenar

marginheight numar de pixeli

Spatiu deasupra si sub un cadru

marginwidth numar de pixeli

Spatiu la stanga si la dreapta unui cadru

src URL Sursa cadrului

<FRAMESET> Multime de ferestre

cols procent din latimea paginiinumar de pixeli

numarul si marimea relativa a coloanelor

rows procent dininaltimea paginiinumar de pixeli

numarul si marimea relativa a randurilor

H1, H2, H3,H4, H5, H6

Titluri in cadrul documentului

align leftcenterrightjustify

Alinierea titlului

55

<HEAD> Antetul documentului

<HR> Linie orizontala

align leftcenterright

Alinierea orizontala a liniei

color cod culoarenume culoare

Culoarea liniei

size numar de pixeli

Inaltimea liniei

width procent din latimea paginiinumar de pixeli

Latimea liniei

<HTML> Document HTML

<I> Text italic

<IMG> Adaugarea unei imagini

align leftrighttopmiddlebottom

Alinierea imaginii in pagina: left (stanga) sau right (dreapta)Alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos)

alt text Text ce va fi afisat in locul imaginii, in

cazul in care, aceasta nu este afisata

border numar de pixeli

Marimea chenarului din jurul imaginii

height procentnumar de pixeli

Inaltimea imaginii

hspace numar de pixeli

Spatiu pe orizontala in jurul imaginii

src URL Adresa imaginii

vspace numar de pixeli

Spatiu pe verticala in jurul imaginii

width procentnumar de pixeli

Latimea imaginii

<INPUT> Element al formularului

56

maxlength numar Numar maxim de caractere

name date de tipcaracter

Numele elementului formularului

size numar Marimea elementului formularului

src URL Adresa pentru o imagine

type textpasswordcheckboxradiosubmitresetfilehiddenimagebutton

Tip input

value date de tipcaracter

Valoare input

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

Alinierea paragrafului

<SELECT> Lista de selectii

multiple Permite selectia mai multor elemente


Numele listei de selectii

size numar Numarul de elemente ale listei

<STRONG> Text evidentiat57

<SUB> Text indice

<SUP> Text exponent

<TABLE> Tabel


Alinierea tabelului

background URL Imaginea de fond pentru tabel


Culoarea fondului pentru tabel

border procentnumar de pixeli

Chenarul tabelului

bordercolor cod culoarenume culoare

Culoarea chenarului

cellpadding numar de pixeli

Spatiu intre continutul celulelor tabelului si marginile lor

cellspacing numar de pixeli

Spatiu intre celulele tabelului

cols numar Numarul de coloane ale unui tabel

hspace numar de pixeli

Spatiu pe orizontala in jurul tabelului

vspace numar de pixeli

Spatiu pe verticala in jurul tabelului

width procentnumar de pixeli

Latimea tabelului

<TD> Celula de tabel


Alinierea continutului celulei pe orizontala

background URL Imaginea de fond pentru celula


Culoarea fondului pentru celula

colspan numar Numarul de coloane pe care se intinde celula

height numar de pixeli

Inaltimea celulei

58

rowspan numar Numarul de linii pe care se intinde celula

valign topmiddle bottom

Alinierea continutului celulei pe verticala

width numar de pixeli

Latimea celulei

<TEXTAREA> Camp de editare multilinie

cols numar Numarul de coloane


Numele campului de editare multilinie

rows numar Numarul de randuri

<TITLE> Titlu document

<TR> Rand tabel


Alinierea continutului celulelorpe orizontala


Culoarea fondului pentru tot randul

valign topmiddle bottom

Alinierea continutului celulelor pe verticala

<U> Text subliniat

<UL> Lista neordonata

type circlediscsquare

Forma marcajului

59

Anexa 3.Caractere speciale

SimbolCod HTML

Numar Nume ¢ ¢ ¢£ £ £© © ©« « «® ® ®° ° °± ± ±² ² ²³ ³ ³

60

µ µ µ¶ ¶ ¶¹ ¹ ¹» » »¼ ¼ ¼½ ½ ½¾ ¾ ¾Â Â ÂÎ Î Î× × ×Ø Ø Øâ â âî î î÷ ÷ ÷ø ø øŞ Ş ş ş Ţ Ţ ţ ţ € € €

Anexa 4.Nume şi coduri de culori sigure

Culoare Nume culoare Cod culoare AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000

61

BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F Darkorange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000 DarkSalmon #E9967A DarkSeaGreen #8FBC8F DarkSlateBlue #483D8B DarkSlateGray #2F4F4F DarkTurquoise #00CED1 DarkViolet #9400D3 DeepPink #FF1493 DeepSkyBlue #00BFFF DimGray #696969 DodgerBlue #1E90FF Feldspar #D19275 FireBrick #B22222 FloralWhite #FFFAF0

62

ForestGreen #228B22 Fuchsia #FF00FF Gainsboro #DCDCDC GhostWhite #F8F8FF Gold #FFD700 GoldenRod #DAA520 Gray #808080 Green #008000 GreenYellow #ADFF2F HoneyDew #F0FFF0 HotPink #FF69B4 IndianRed #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA LavenderBlush #FFF0F5 LawnGreen #7CFC00 LemonChiffon #FFFACD LightBlue #ADD8E6 LightCoral #F08080 LightCyan #E0FFFF LightGoldenRodYellow #FAFAD2 LightGrey #D3D3D3 LightGreen #90EE90 LightPink #FFB6C1 LightSalmon #FFA07A LightSeaGreen #20B2AA LightSkyBlue #87CEFA LightSlateBlue #8470FF LightSlateGray #778899 LightSteelBlue #B0C4DE LightYellow #FFFFE0 Lime #00FF00 LimeGreen #32CD32 Linen #FAF0E6 Magenta #FF00FF

63

Maroon #800000 MediumAquaMarine #66CDAA MediumBlue #0000CD MediumOrchid #BA55D3 MediumPurple #9370D8 MediumSeaGreen #3CB371 MediumSlateBlue #7B68EE MediumSpringGreen #00FA9A MediumTurquoise #48D1CC MediumVioletRed #C71585 MidnightBlue #191970 MintCream #F5FFFA MistyRose #FFE4E1 Moccasin #FFE4B5 NavajoWhite #FFDEAD Navy #000080 OldLace #FDF5E6 Olive #808000 OliveDrab #6B8E23 Orange #FFA500 OrangeRed #FF4500 Orchid #DA70D6 PaleGoldenRod #EEE8AA PaleGreen #98FB98 PaleTurquoise #AFEEEE PaleVioletRed #D87093 PapayaWhip #FFEFD5 PeachPuff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD PowderBlue #B0E0E6 Purple #800080 Red #FF0000 RosyBrown #BC8F8F RoyalBlue #4169E1 SaddleBrown #8B4513

64

Salmon #FA8072 SandyBrown #F4A460 SeaGreen #2E8B57 SeaShell #FFF5EE Sienna #A0522D Silver #C0C0C0 SkyBlue #87CEEB SlateBlue #6A5ACD SlateGray #708090 Snow #FFFAFA SpringGreen #00FF7F SteelBlue #4682B4 Tan #D2B48C Teal #008080 Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0 Violet #EE82EE VioletRed #D02090 Wheat #F5DEB3 White #FFFFFF WhiteSmoke #F5F5F5 Yellow #FFFF00 YellowGreen #9ACD32

65

Date post:	14-Jun-2015
Category:	Documents
Upload:	dragomir-laurentiu-marius
View:	7,007 times
Download:	9 times

Lucrare de diploma - Pagini WEB in HTML

Documents