2. Crearea paginilor web folosind limbajul HTML432x.ncss.ro/Anul III/PWeb/Curs PW-02-HTML.pdf · limbaje de programare (Javascript, PHP, etc.) - marcajul HTML de închidere

2. Crearea paginilor web folosind limbajul HTML

HTML (HyperText Markup Language) reprezintă limbajul de bază dedicat

realizării unei pagini web. Limbajul a fost introdus de Tim Berners-Lee în anul 1989. El descrie formatul primar în care documentele sunt vizualizate pe Web.

Documentele scrise în HTML pot fi văzute de aproape toate sistemele de operare, datorită unui mare număr de browsere web (navigatoare) existente în acest moment pentru fiecare tip sau sistem de computer (platformă). Astfel, HTML este o alegere bună pentru publicarea on-line a documentelor personale sau distribuirea de informaŃii într-o reŃea locală (intranet).

El este un limbaj de marcare, nu utilizează instrucŃiuni sau comenzi, ci etichete, numite şi tag-uri, care delimitează zone din document.

Folosirea limbajului HTML asigură independenŃa de platformă, adică, un document poate fi afişat în mod asemănător de diferite computere şi diferite browsere.

La bază stă noŃiunea de “hypertext” care permite ca orice element al unui document (cuvânt, frază, imagine, etc.) să poată face referinŃă la paragrafe din interiorul aceluiaşi document sau la alte documente. Aceasta uşurează mult navigarea între părŃile componente ale unui document sau între multiple documente.

Documentele respectă o structurare riguroasă ceea ce permite convertirea acestora dintr-un format în altul. Este permisă inclusiv interogarea unor baze de date şi înglobarea datelor obŃinute în documentele vizualizate.

Standardul oficial HTML este propus de World Wide Web Consortium (W3C) (vezi paragraful 1.7). El este într-o permanentă evoluŃie, astfel că au existat mai multe versiuni ale specificaŃiei HTML, printre care HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01, HTML5. Autorii de browsere, de exemplu Netscape Communications, Microsoft, Appel Inc., Opera Software ASA au dezvoltat uneori propriile componente HTML în afara standardului şi le-au încorporat în browserele lor. În unele cazuri, acestea adăugiri au fost ulterior adoptate şi de alŃi autori de browsere.

2.1 Forma generală a unui fişier. Formatare logică şi fizică

Programare web

HTML este utilizat pentru a structura informaŃia unei pagini web. Maniera de afişare a conŃinutului se realizează prin tagurile HTML care indică browserului cum să afişeze textul în ferestrele deschise.

Pentru a se putea deosebi de textul propriu-zis, tag-urile sunt incluse între paranteze speciale şi anume < şi >. De obicei tagurile sunt folosite în perechi care indică începutul, respectiv finalul unei secŃiuni, de exemplu pentru a scrie un text cu caractere îngroşate se foloseşte partea de deschidere a tagului <b>textul propriu-zis</b>. De obicei, la închiderea unui marcaj se foloseşte acelaşi marcaj la care se adaugă semnul / (slash).

Browserele actuale pot afişa o pagina web chiar dacă sintaxa limbajului acelei pagini nu este corectă, dar este de preferat să se respecte standardele, astfel încât acea pagină să se afişeze aproximativ la fel pe orice browser. Unele browsere nu respectă întru totul standardele, deci există posibilitatea să existe diferenŃe de afişare a aceleiaşi pagini când se folosesc diferite browsere.

De aceea este recomandabil ca, înainte de a publica un document pe web, să testaŃi redarea lui folosind cele mai utilizate browsere (vezi paragraful 1.8).

Pentru a instala browser-ele preferate, puteŃi folosi o listă cu diferite programe browser pentru o serie de platforme (sisteme) care se află, de exemplu, la adresele: http://www.browser-watch.com/ sau http://www.browserchoice.eu/BrowserChoice/browserchoice_ro.htm.

InformaŃii despre diferitele browsere frecvent utilizate sunt puse la dispoziŃie de ConsorŃiul W3C pe platforma sa dedicată învăŃării şi certificării privind utilizarea diferitelor limbaje şi tehnologii de programare web la adresa http://www.w3schools.com/browsers/default.asp.

La realizarea unei pagini web se au în vedere două aspecte, formatarea logică, respectiv cea fizică a documentului.

Formatarea logică are în vedere organizarea informaŃiei în concordanŃă cu conŃinutul său. Elementele de formatare logică sugerează ce reprezintă textul cuprins între tag-urile acestora şi nu indică modul în care va arăta textul în fereastra browser-ului. De exemplu, elementul CODE sugerează că textul cuprins între tagurile <CODE> şi </CODE> reprezintă exemplificarea unui cod scris într-un limbaj de programare oarecare, cum ar fi C, Java, Javascript, etc.

Spre deosebire de elementele de formatare logică, elementele de formatare fizică indică modul în care va fi afişat textul. De exemplu, secvenŃa <B>text</B>, datorită marcajului specific caracterelor îngroşate (bold) va produce afişarea: text.

Formatarea fizică este mai sigură în privinŃa obŃinerii anumitor efecte vizuale decât cea logică.

Pentru a da un aspect unitar documentelor afişate, este important ca programatorul să fie consecvent cu stilurile utilizate. În fişierele HTML se pot


integra componente care definesc stilurile de afişare utilizate (aspect care va fi discutat într-un capitol viitor).

Structura generală a unei pagini HTML poate fi descrisă sumar prin codul HTML din Exemplul 2.1.

Exemplul 2.1. Structura generală a unei pagini (fişier) HTML

Principalele elementele componente sunt descrise în Tabelul 2.1.

Tabelul 2.1. Elementele principale ale unei pagini web

Element Descriere

<!DOCTYPE html>

- secŃiunea <!DOCTYPE>, dacă este specificată, trebuie să se afle pe prima linie, înainte de tag-ul <html>. Ea conŃine indicaŃii privind versiunea de HTML folosită, deci nu este un tag şi nu presupune existenŃa unui element de închidere (Exemplul 1.1).

<html> - marcajul HTML - Tot ceea ce conŃine pagina HTML (text + comenzi) se include între tag-urile html.

<head>

- marcajul HEAD - Incadrează antetul fişierului şi are rolul de a oferi informaŃii despre pagină. Poate cuprinde alte tag-uri, dintre care, cel mai frecvent folosit este tag-ul TITLE.

<!DOCTYPE html>

<html>

<head>

<meta name="description" content="Pagina Web exemplu HTML">

<title>TITLUL DOCUMENTULUI</title>

</head>

<body> CONTINUTUL DOCUMENTULUI

</body> </html>

Programare web

Element Descriere

<title>Titlul paginii</title>

- marcajele pereche TITLE – Titlul descrie sumar conŃinutul paginii; el va apărea pe bara de titlu a browserului; dacă pagina este adaugată într-o listă cu site-uri favorite, va fi folosit ca nume al paginii.

<meta name = "keywords" content = "... o lista de cuvinte ..."> <meta name = "description" content = "... o fraza sugestiva ..."> ... alte instructiuni: JavaScript, CSS, etc. ...

- marcajele META includ “metadate”care reprezintă „date despre date” adică date care descriu alte date; în general ele nu sunt afişate de browser, dar trimit informaŃii utile browserelor, serverelor, etc., cum ar fi motoarelor de căutare.

</head> - marcajul /HEAD - marchează terminarea antetului paginii.

<body> ... </body>

- marcajele pereche BODY încadrează conŃinutul propriu-zis al documentului. Tot ceea ce este inclus aici va fi afişat în fereastra browserului. Textul conŃinut de regulă este formatat cu HTML. Sunt incluse şi alte tipuri de continut (imagini, legaturi, etc.), dar şi secvenŃe scrise în alte limbaje de programare (Javascript, PHP, etc.)

</html> - marcajul HTML de închidere

Tag-urile HTML se pot include unele în altele (se încuibează), dar

întotdeauna închiderea tagurilor trebuie făcută în ordine inversă deschiderii lor. Trebuie evitată intercalarea acestora.

Pentru a da o bună lizibilitate conŃinutului unei pagini web şi pentru a sublinia structura logică a acesteia, se poate face formatarea textului prin folosirea de fonturi diferite, caractere de mărimi şi culori diferite, etc. Sunt definite o serie de tag-uri în acest scop, pentru majoritatea existând posibilitatea definirii de atribute.

În continuare vor fi descrise o parte dintre aceste taguri:


 inserarea unui comentariu în codul sursă; acesta este ignorat de browser, deci nu va produce niciun efect în afişarea paginii.

< body atribute >...< / body >

defineşte începutul şi sfârsitul corpului documentului HTML; atributul bgcolor – defineşte culoarea fondului paginii (data prin nume sau valoarea RGB); atributul background – precizează url - ul (adresa si numele) imaginii de fond a paginii; atributul text – precizează culoarea textului (nume culoare sau valoare RGB); atributul link – precizează culoarea legaturilor nevizitate din pagina (nume sau RGB); atributul vlink – precizează culoarea legaturilor vizitate din pagina (nume sau RGB); atributul alink – precizează culoarea legaturilor in timpul click - ului (nume sau RGB); atributul leftmargin – stabileşte indentarea întregului material din pagină faŃă de marginea din stânga (exprimată în pixeli); atributul rightmargin - stabileşte indentarea întregului material din pagina faŃă de marginea din dreapta (exprimată în pixeli); atributul topmargin – stabileşte deplasarea întregului material din pagină faŃă de marginea de sus (exprimată în pixeli); atributul bgproperties - primeşte doar valoarea "fixed"; dacă se derulează pagina, fondul ramane fix.

< p atribute > text < / p > marchează paragraf nou (aliniat implicit la stânga dacă nu este in interiorul unui marcaj care face o alta aliniere, de ex. CENTER). atributul align- alinierea implicit la stânga poate fi modificată prin a proprietăŃile center, right sau justify.

< br atribute > întrerupe rândul în poziŃia unde este inscris semnul <br> şi forŃează continuarea textului cu un nou rând de la capăt. acest tag este nepereche (singular) şi deci nu este necesară închiderea lui ca în cazul tag-ului paragraph. atributul clear cu proprietăŃile left, right sau all produce trecerea la linie nouă când marginea din stânga (left), dreapta (right) sau ambele margini (all) ale ecranului sunt libere, de exemplu pentru a aduce un text sub o

Programare web

imagine care nu ocupă întreaga lăŃime a spaŃiului disponibil.

< b > < / b >

afiseaza textul cu litere aldine (ingroşate).

< i > < / i >

afiseaza textul cu litere italice (inclinate).

< u > < / u >

afiseaza textul subliniat.

< sup > < / sup >

afiseaza textul ca indice superior

< sub > < / sub >

afiseaza textul ca indice inferior

< big > < / big > text cu font marit + bold

< pre >< / pre >

afişează pe linie nouă textul preformatat, ca în codul sursă, dar ia în considerare instructiunile html

t e x t u l p r e f o r m a t a t , < b >adica asa cum arata el in< /b >

< strike > < / strike >

afiseaza textul taiat

< strong > < / strong >

evidenŃiază textul prin îngrşare

< font atribute >< / font >

Atributul size = i – stabileşte marimea fontului: i = 1, 2, ... , 7; 1 = mic, 7 = mare; Atributul color – precizează culoarea poate fi dată prin numele ei sau prin valoarea RGB exprimată în hexazecimal sau zecimal (vezi Anexa 2); Atributul face = " font1 , font2 , ..." – precizează o listă de minim 2 fonturi: specifice sistemelor de operare Windows şi Macintosh.

< h i > < / h i >

este folosit pentru titluri în document; i = 1, 2, 3, 4, 5, 6; acestea vor fi afişate cu caractere de mărimi diferite: h1, h2, h3, h4, h5, h6.

Exemplul 2.2. Cod HTML care exemplifică folosirea diferitelor fonturi


Efectul produs de interpretarea codului din Exemplul 2.2 de un browser este prezentat în Figura 2.1.

<html><head></head>

<body>

Text initial.

<tt>Teletype text.</tt>

Final text.<br>

Text initial.

<i>Italic text.</i>

Text final. <br>

Normal.

<i>Italic.<tt>Italic and teletype.</tt> Italic din nou. </i>

Normal<br>

Normal.

<b>Bold.</b>

<b><i>Bold si Italic.</i></b>

Normal<br>

Normal.

<big>Text mai mare.</big>

<big><big>Text mai mare si mai mare.</big></big>

Normal<br>

Text Normal

<small>Text mai mic.<small>mai mic si mai mic</small></small><br> <b><i><small>Bold, Italic si Small</small></i></b><br>

Text Normal din nou.<br>

Text Normal.<br>

<strike> Text Strike.</strike><br>

<s> Text Strike din nou.</s><br>

Text Normal din nou.<br>

Text Normal.

<u> Underlined Text.</u>

Text Normal.<br>

Aria sferei: <i>A<sub>sferei</sub>=4 &#960 &middot r<sup>2</sup></i>

</body> </html>

Programare web

Figura 2.1. Afişarea codului din Exemplul 2.2 într-un browser

ObservaŃii: � Tot ceea ce se află între marcajul de deschidere şi cel de

închidere va avea caracteristicile marcajului respectiv.

� Browserul ignoră marcajele pe care nu le întelege şi pe cele scrise greşit.

2.2 ReferinŃe

Documentele HTML, de regulă, folosesc hipertext, adică text care conŃine referinŃe (hiperlinkuri) către alt text pe care cititorul poate să-l acceseze, sau cu referinŃe ce pot dezvălui în mod progresiv textul, pe mai multe niveluri de detaliu (aşa numitele texte Stretch, texte dilatate).

Hipertextul este un concept inventat de Ted Nelson în 1965 în articolul „Complex information processing: a file structure for the complex, the changing and the indeterminate”. Acesta îl defineşte ca: „material scris sau grafic interconectat într-o manieră complexă, care în mod convenŃional nu poate fi reprezentat pe hârtie” [19] .

Acest concept practic a permis apariŃia şi dezvoltatea web-ului.


O referiŃă (links) este o conexiune către altă resursă web. Această resursă poate fi accesată din fereastra browser-ului printr-un singur click.

Link-urile pot fi interne documentului (referinŃe interne) sau externe acestuia (referinŃe externe), putând fi stocate pe acelaşi server sau pe servere diferite.

Marcajul principal atât pentru referintele interne cât si pentru cele externe este: <a>...</a> (anchor - ancora), acesta trebuie să conŃină un parametru HREF=valoare, care va indica resursă referită.

Forma generală pentru crearea unui link este următoarea:

<a href="url" title="titlu link">text de descriere</a>

Unde: - a este elementul specific pentru crearea link-urilor; - href este atributul care indică adresa link-ului; - url este adresa link-ului (a paginii care va fi deschisă). De exemplu

(https://www.google.ro) - title este atributul prin care se dă titlu link-ului; - titlu link este textul ascuns care apare când este poziŃionat mouse-ul

deasupra link-ului; - text de descriere este textul care va apărea în browser şi pe care trebuie

dat click cu mouse-ul pentru a realiza legătura către acea resursă. Un exemplu de link:

<a href="http://www.w3schools.com/html/">Tutorial HTML</a>

2.2.1 ReferinŃe interne

Există situaŃii când, în cadrul unui document cu un conŃinut bogat şi divers, se pot face trimiteri (links) la anumite părŃi specifice ale acelui document (cuprins, început, anumite capitole, etc.) pentru a uşura găsirea informaŃiei respective în document, fără să fie nevoie de parcurgerea întregului text.

Să presupunem că vrem ca din diferite puncte ale documentului să revenim printr-un singur click la începutul său. Pentru acest lucru vom folosi tag-ul <A NAME> în felul urmator:

Se adaugă un link de origine (un nume sau etichetă = label) la începutul lecŃiei (chiar înaintea textului LECTIE), astfel:

<A name="top">LECTIE</A> (1)

se introduce la sfârsitul lectiei sau în oricare alt loc al documentului, un link de

Programare web

destinatie care să facă trimiterea direct la top-ul paginii:

<A HREF="#top">Apăsând aici puteti reveni la începutul lectiei</A> (2)

Rezultatul afişat de browser este:

Apasând aici puteti reveni la începutul lectiei

Folosirea caracterului (#) (funcŃionalitatea sa înseamnă "du-te la") are ca efect "conectarea" a două puncte în aceeaşi pagină web. Când navigatorul întâlneşte această "comandă", va căuta în documentul HTML link-ul de destinatie (2) care obligatoriu trebuie să poarte numele indicat în link-ul de origine (1).

Link-ul de destinatie se crează cu ajutorul atributului "id" ce poate fi situat in interiorul oricarei directive Html (p, h1, a, etc.) in felul urmator:

<h1 id="jos"><a href="#sus">Jos</a></h1> (3)

...

<h1 id="sus"><a href="#jos">Sus</a></h1> (4)

Între liniile (3) şi (4) se crează legături în ambele sensuri.

2.2.2 ReferinŃe externe

� ReferinŃe către pagini ale aceluiaşi site (referinŃe locale) ReferinŃe către pagini ale aceluiaşi site sunt referinŃe către fişiere care

aparŃin aceluiaşi site, deci care se află pe acelaşi server. Ele descriu directorul în care se află fişierul, numele şi extensia documentului, cu sintaxa următoare:

<a href="director/nume_fisier.extensie" title "Titlu link"> Nume</a>

Dacă documentul Ńintă se află într-un director anterior celui in care se află

fişierul în care se scrie link-ul, se poate folosi referinŃă relativă. Căile relative indică o cale pe care trebuie să o urmăm pentru a naviga la documentul Ńinta, pornind de la documentul de start.

<a href="../nume_fisier.extensie" title="Titlu link"> Nume</a>

ReferinŃele absolute localizează documentele specificand directorul de cel

mai înalt nivel şi toată calea până la document. Exemple de referinŃe:


HREF="doc.html" doc.html se găseşte în directorul curent

HREF="dir/doc.html" doc.html este localizat în directorul dir

HREF="dir/subdir/doc.html" doc.html se află în directorul dir, subdirectorul subdir

HREF="../doc.html" doc.html se găseşte într-un director aflat cu un nivel următor faŃă de directorul curent

HREF="../../subdir/doc. html" doc.html se găseşte într-un director aflat cu două niveluri mai sus faŃă de directorul curent

Exemplul 2.3. Folosirea link-urilor în fişiere HTML

� ReferinŃe către pagini ale altor site-uri

ReferinŃe către pagini ale altor site-uri sunt referinŃe către fişiere care se pot afla pe servere diferite. Adresa URL din link trebuie să conŃină şi domeniul (numele site-ului) paginii Ńintă:

<a href="http://nume_site/pagina" title="Titlu link"> Nume</a>

Exemplul 2.3. conŃine exemple de folosire a unor link-uri în interne şi externe, cu rezultatul interpretat de browser prezentat în Figura 2.2. Click-stânga pe unul dintre mesajele aferente link-urilor, va face trimitere la resursa indicată.

<html>

<head></head>

<body>

<A name="top">INCEPUT LECTIE</A> - <i>acesta este link-ul de origine</i> <br/><br/>

text <br/> text <br/><br/>

<a href="http://www.w3schools.com/html/">Tutorial HTML</a> - <i>acesta este link la o resursa externa</i> <br/><br/>

text <br/> text <br/><br/>

<a href="http://www.unitbv.ro/fiesc/FacultateaIESC.aspx title="FIESC> Facultatea de Inginerie Electrica si Stiinta Calculatoarelor</a>- <i>acesta este alt link la o resursa externa</i><br/><br/>

text <br/>

text <br/><br/>

<A href="#top">Apasând aici puteti reveni la începutul lectiei</A> - <i>se face trimitere la link-ul de origine</i><br/>

</body> </html>

Programare web

Figura 2.2. Exemplu folosire link-uri

ObservaŃii: Atunci când dorim să încărcăm pagina principală a unui site, în

general nu tastăm şi numele unui fisier; serverul ne trimite un fişier predefinit; de obicei numele lui este index.html. Link-urile interne si externe pot fi combinate. Astfel putem face saltul către un anumit text aflat într-o altă pagină. Se defineşte eticheta către care se face trimiterea în documentul destinaŃie, iar la definirea link-ului se scrie:

<a href="adresa_pagina#cuvant">Nume</a>

2.2.3 Link-uri imagine

De multe ori, o imagine este mai sugestivă decât un text. Link-urile pot include imagini dacă, la definirea unui link, se introduce sursa imaginii în interiorul tag-ului de link ca în exemplul următor:

<a href="http://www.tutorialhtml.ro"> <img src= "../img/image.jpg"> </a>

Atributul SRC specifică sursa de unde browser-ul va încărca imaginea respectivă (vezi paragraful 2.4).


2.3 Culori

O pagină este mult mai atractivă pentru cititor dacă sunt folosite texte şi fundal de culori adecvate conŃinutului respectiv.

O serie de tag-uri HTML includ atribute care permit specificarea unei culori pentru text, fundal, imagine,etc. Aceste atribute pot fi definite pentru una din cele 16 culori care corespund sitemului de culori windows.

Aceste culori sunt:

navy

olive

purple

red

silver

teal

white

yellow

aqua

black

blue

fuchsia

gray

green

lime

maroon

O altă metodă de specificare a culorilor este tripleta culorilor roşu-verde-

albastru (red-green-blue, respectiv RGB): #rrggbb. InformaŃia despre culori este reprezentată prin intermediul unui vector cu 3

componente numerice, reprezentand valorile primare ale culorilor roşu, verde şi albastru, culori fundamentale în compunerea nuanŃelor de culoare dorite. Fiecare pereche de litere este un numar hexazecimal cuprins intre 00 si FF. Cu cât numarul este mai mare, cu atât creşte intensitatea culorii.

Astfel, culoarea rosu (red) se specifica prin FF0000, negru (black) prin #000000, alb (white) prin #FFFFFF, verde (green) prin #00FF00, galben (yellow) prin #FFFF00.

De exemplu, pentru a defini fond de culoare pentru întreaga pagina se indică atributul bgcolor valoarea corespunzătoare culorii dorite:

<body BGCOLOR=green>

sau, folosind tripleta RGB de reprezentare a culorii galben, #00FF00:

<body BGCOLOR="#00FF00">

Exemplul 2.4. Folosirea culorilor în fişiere HTML

Programare web

Figura 2.3. Exemplu de folosire a culorilor

2.4 Imagini

Imaginile sunt foarte importante într-o pagină web, includerea lor poate spori calitatea acelei pagini, devenind astfel mult mai atractiva pentru vizitatori. Inserarea lor se face cu ajutorul tag-ului <img/>.

Înainte de a adăuga o imagine (un desen sau chiar o fotografie) într-un document, trebuie să fie creată într-un format ce se poate folosi într-un document HTML.

Imaginile pot fi create în diferite formate. Fiecare browser recunoaste un fişier ce conŃine o imagine după extensia sa:

.gif pentru imagini în format GIF

.jpg (sau .jpeg)pentru imagini în format JPEG

.bmp pentru imagini în format Bitmap

.pdf pentru imagini în format Adobe Acrobat

<!DOCTYPE html>

<html>

<body style="background-color:lightgrey">

<h1 style="color:green">This is a heading</h1>

<p style="color:red">This is a paragraph.</p>

<font color="Blue">Text de culoare Blue</font><br/>

TEXT<br/>

<font color="#0000FF">Text de culoare Blue</font>

</body> </html>


Cel mai frecvent folosite sunt imaginile în format GIF şi JPEG. Imaginile GIF (Graphics Interchange Format) au fost realizate pentru prima

dată de CompuServe pentru redarea de reprezentari grafice simple, logos, acest format ocupă spatiu relativ mic.

Imaginile JPEG poartă numele grupului Joint Photographic Experts Group care a conceput acest format. Ele necesită mai putin spaŃiu de memorie în comparaŃie cu imaginile în format GIF.

Syntaxa folosită pentru încorporarea unei imagini în pagină este similară cu cea folosită în cazul link-urilor.

Imaginea este indicată prin adresa URL astfel:

<IMG SRC="protocol://hostname/filename">

De exemplu:

<IMG SRC=" http://marconi.unitbv.ro/pics/v03_mic.jpg ">

2.4.1 Folosirea atributului ALIGN

În mod implicit o imagine înglobată într-un text este afişată cu alinierea părŃii de jos a imaginii cu textul respectiv.

Această aliniere se poate modifica prin folosirea atributului ALIGN care poate primi următoarele valori:

TOP Alinierea textului si imaginii în partea de sus.

MIDDLE Alinierea textului cu centrul imaginii.

BOTTOM Alinierea textului şi imaginii în partea de jos (implicit).

LEFT Alinierea imaginii la stânga paginii.

RIGHT Alinierea imaginii la dreapta paginii.

De exemplu:

<IMG SRC=" http://marconi.unitbv.ro/pics/v03_mic.jpg" ALIGN=MIDDLE>

2.4.2 Folosirea atributului ALT

În cazul în care browser-ul nu poate afişa imaginea respectiva (fie că este vorba de un browser care reda numai text, fie ca cititorul nu doreşte încărcarea

Programare web

imaginii fixînd browser-ul pe image off) există posibilitatea ca în locul imaginii să se afişeze ca alternativă un text explicativ. În acest scop se foloseşte atributul ALT.

De exemplu:

<IMG SRC=http://marconi.unitbv.ro/pics/v03_mic.jpg" ALT=Text alternativ">

Cei care citesc acest document cu browser "text-only" vor vedea afişat în locul imaginii textul "Text alternativ".

2.4.3 Folosirea atributului BORDER

Atributul BORDER specifica grosimea marginii (redata în pixels , unitatea de masura pentru imagini) unei imagini.

Exemplu, o imagine cu BORDER=10:

<IMG SRC="http://marconi.unitbv.ro/~ungureanu/Curs/images/acces.jpg"

BORDER="10">

este redată astfel:

Figura 2.4. Folosirea atributului border

2.4.4 Folosirea atributelor WIDTH si HEIGHT

Aceste două atribute permit specificarea mărimii (size) unei imagini în pixels sau în procente (%) raportate la dimensiunea imaginii originale.

Majoritatea aplicaŃiilor folosite la conceperea şi prelucrarea imaginilor pot stabili dimensiunile imaginii, indicând atât lăŃimea (WIDTH) cât şi îălŃimea


(HEIGHT) în unităŃi de măsură pixels. Stabilirea mărimii unei imagini prin mentionarea valorilor atributelor WIDTH si HEIGHT face ca browser-ul să redea imaginea mai repede, rezervând spaŃiu necesar imaginii fără să aştepte ca aceasta să fie încărcată în pagină şi apoi să-i calculeze mărimea (vezi Exemplul 2.5).

Exemplul 2.5. Includerea de imagini în pagini web

Figura 2.5. Afisarea de imagini

2.4.5 HTML - Tumbnails

Tumbnails-urile sunt versiuni în miniatură a unor imagini care în realitate

<html>

<head></head>

<body>

Fara chenar

<img src="imagine.bmp">

Cu chenar

<img src="imagine.bmp" border="5">

<br>

Scalata proportional

<img src="imagine.bmp" width="50">

<br>Scalata neproportional

<img src="imagine.bmp" width="200" height="100" alt="Scalata neproportional">

</body> </html>

Programare web

sunt mult mai mari şi cu o calitate sporită. Apoi se realizează un link de la imaginea miniatură către cea originară. Această procedură sporeşte viteza de încărcare a unei pagini, fiind afişate implicit miniaturile, de dimensiune mică şi doar la cererea utilizatorului se vor afişa imaginile originale.

<a href="../img/poza.jpg"> <img src="../img/tumb_poza.jpg"> </a>

Figura 2.6. Imaginea în miniatură

Figura 2.7. Imaginea originară

2.4.6 HărŃi de imagini

HărŃile de imagini sunt imagini care sunt "impărŃite" în mai multe zone. Dacă se execută click pe o zonă, se face activează o altă pagină. Astfel, o hartă de imagini poate fi folosită pentru navigarea în cadrul unui site.

Dezavantajul major este că, dacă browserul este setat să nu încarce imagini pentru a creşte viteza de navigare, utilizatorul nu va înŃelege mai nimic (pentru a compensa acest lucru se poate folosi marcajul alt pentru specificarea textului alternativ pentru imagini).

Folosirea hărŃilor de implică două aspecte. Imaginea este declarată ca fiind harta, la eticheta <img> a imaginii se

adaugă atributul: usemap a cărui valoare reprezintă numele hărŃii, cu valoare de genul #nume care este folosit ulterior în interiorul etichetei <map>.

<map name="nume_harta"> </map>

Zona sau zonele conŃinute de hartă sunt stabilite prin eticheta <area> cu atributele obligatorii:

shape = forma ariei declarate cu valorile: rect=dreptunghiulara, circle=circulara, poly=poligonala, default = alte forme (diferite de cele anterioare)


coords = coordonatele zonei href = adresa paginii destinaŃie a legăturii Originea coordonatelor este colŃul stânga sus al imaginii. Aria rectangulară (rect) se declara prin coordonatele coltului stanga sus si

coltul dreapta jos. Aria circulară (circle) se declară prin coordonatele centrului si raza. Aria poligonala (poly) se declară prin coordonatele fiecărui colŃ. Este prezentat un exemplu de hartă de imagini cu două cadre:

Exemplul 2.6 Exemplu cod pentru crearea de harti de imagini

2.5 Tabele

Putem reda un text aranjat în coloane folosind tag-ul pentru text preformatat <pre>. Dar, metoda mult mai simplă pentru aranjarea în pagină sub forma de rânduri si coloane, este folosirea tag-ului <table> .

Tabelele se definesc prin atribuirea de: titlu, cap de coloane, un numar de rânduri şi coloane şi datele înscrise în acestea.

Pentru realizarea tabelelor se folosesc tag-urile: <table> </table>. În interiorul acestor tag-uri se inserează elementele tabelului: acesta incadreaza alte patru sub-elemente, care alcatuiesc structura tabelului.

Titlu tabelului <caption> ... </caption> Linia (randul) tabelului <tr> ... </tr> Antetul (header) tabelului <th> ... </th> Coloanele tabelului (datele) <td> ... </td>

Fofosind codul din Exemplul 2.7, se va obŃine afişarea unui tabel ca în Figura 2.8.

Exemplul 2.7. Exemplu cod pentru realizarea unui tabel

<img src="poza.jpg" usemap="#harta">

<map name="harta">

<area shape="rect" coords="10, 120, 50, 150" href="url">

<area shape="rect" coords="100, 150, 150, 250" href="url"> </map>

Programare web

Figura 2.8. Afişarea unui tabel

În cadrul elementelor pentru titluri şi coloanele tabelului se pot adăuga şi alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini.

Scrierea unui tabel poate fi îmbunătăŃită prin folosirea atributelor în definirea tag-ului <table>. bgcolor = defineşte culoarea tabelului; width = specifică lungimea tabelului (în pixeli sau procente din lungimea paginii); border = grosimea liniei (în pixeli) ce defineşte tabelul şi înconjoară fiecare celulă; cellspacing = stabileşte spaŃiul dintre celule (în pixeli); cellpadding = stabileşte spatiul dintre linia celulei şi conŃinutul acesteia (în pixeli); align = controlează poziŃionarea tabelului în pagina, cu următoarele atribute : left, right, sau center; background = controlează culoarea de fond a tabelului, care poate fi şi o imagine; bordercolor = culoarea liniei din jurul tabelului; bordercolorlight = culoarea luminoasă folosită de două linii din cele patru care înconjoară tabelul; bordercolordark = culoarea întunecată folosită de doua linii din cele patru care înconjoară tabelul.

<table>

<table border="3">

<caption>Exemplu desenare tabel</caption>

<tr><th>coloana1</td><th>coloana2</th><th>coloana3</td></tr>

<tr><td>celula11</td><td>celula12</td><td>celula13</td></tr>

<tr><td>celula21</td><td>celula22</td><td>celula23</td></tr>

<tr><td>celula31</td><td>celula32</td><td>celula33</td></tr> </table>


Exemplul 2.8. Exemplu de folosire a atributelor elementului <table>

În Exemplul 2.8 sunt folosite atribute pentru elementele tabloului. Acesta

va fi afişat de browser ca în Figura 2.9.

Figura 2.9. Tabel definit folosind atribute ale elementului <table>

Dacă este necesară reunirea (merge) mai multor celule din alcătuirea unui table se pot folosi următoarele atribute. colspan = specifică câte coloane se vor rowspan = specifică câte rânduri ale tabelului se vor reuni

Exemplul 2.9. Exemplu cod reunire (merge) celule de tabel

<html><head></head>

<body>

Acesta este text afisat inaintea tabelului.

<table align="center" border hspace="10" vspace="10" border="5" bordercolordark="#00ff00"

bordercolorlight="#ff0000">

<tr align="right" valign="bottom">

<td width="50" height="100">c11

<td width="75%" align="center" valign="middle" bgcolor="cyan">c12

<td width="50" align="left" valign="top">c13

<tr>

<td height="50">c21

<td>c22

<td>c23

</table>

Acesta este text afisat inaintea tabelului.

</body> </html>

Programare web

Codul din Exemplul 2.9 va fi afişat de un browser ca în

Figura 2.10.

Figura 2.10. Tabel cu celule reunite

<table border="1" cellpadding="2">

<caption align="bottom">acesta este textul</caption>

<tr>

<th>coloana 1</th>

<th>coloana 2</th>

</tr>

<tr>

<td colspan="2">linia 2- coloana 1+2</td>

</tr>

<tr>

<td rowspan="2">linia 3+4- coloana 1</td>

<td>linia 3- coloana 2</td>

</tr>

<tr>

<td bgcolor="#aabbcc">linia 4- coloana 2 - colorat</td>

</tr> </table>


2.6 Cadre (frame-uri)

Cu ajutorul cadrelor se pot împărŃi ecranul în mai multe zone, în cele două zone se pot afişa informaŃii preluate din fişiere. Cel mai frecvent se foloseşte împărŃirea în 2 coloane, cea din stânga mai îngustă şi include legaturi către diferite resurse, iar în zona din dreapta se afişează fişierele accesate.

Caracteristic acestor pagini este că perechea de etichete <body> </body> este inlocuita de <frameset> </frameset>, iar in interiorul lor cadrele sunt delimitate de <frame> şi </frame>.

Atributele etichetei frameset sunt: cols = împarte pagina in coloane şi are valori exprimate în procente din dimensiunea ferestrei, numar de pixeli sau * adica spatiul ramas. rows = împarte pagina în rânduri cu aceleaşi valori ca la cols. bordercolor = culoarea tuturor chenarelor conform modelului #rrggbb. frameborder = inhibarea afişării chenarelor, sau nu cu folosind valorile yes sau no. framespacing = stabileşte mărimea spaŃiului dintre cadre (în pixeli); dacă se foloseşte împreună cu border, dar cu valori diferite, pentru unele browsere primeaza valoarea lui framespacing iar pentru altele valoarea lui border.

Exemplul 2.10. Exemplu de folosirea a cadrelor

Programare web

Cadrele sunt introduse prin perechea de etichete <frame> </frame>, si

suporta atributele: src = fişierul sau adresa fişierului introdus. bordercolor = culoarea chenarului cadrului curent conform modelului #rrggbb. noresize = dezactivează posibilitatea vizitatorului de a redimensiona cadrul. scrolling = adaugă cadrului bare de defilare folosind valorile yes, no sau auto.

În Exemplul 2.10 este prezentat un exemplu de pagină care conŃine trei cadre. Un cadru este reprezentat în partea de sus a ferestrei afişate, 60% din

<html>

<head>

<title>Cadre - exemple</title>

</head>

<frameset rows="60%,*" border=3 framespacing=0 frameborder=yes>



<frame SRC="http://www.unitbv.ro" name="unu" scrolling="auto">



<frameset cols="220,*" border=3 framespacing=5 frameborder=yes>



<frame src="04_tabele_02.html" name="doi" scrolling="auto"

marginwidth=2>



<frame src="04_tabele_03.html" name="trei" scrolling="auto">



</frameset>



</frameset>



<noframes>

<body>

TREBUIE FOLOSIT UN BROWSER CARE INTERPRETEAZA CADRE

<!—mesaj care se afiseaza in cazul in care browser-ul folosit nu recunoaste frame-uri -->

</body>

</noframes> </html>


înălŃimea ferestrei şi include site-ul de la adresa http://www.unitbv.ro. Partea inferioară a ferestrei este împărŃită între alte două cadre care vor include conŃinutul indicat prin alte două fişiere HTML, "04_tabele_02.html" şi "04_tabele_03.html".

Efectul interpretării codului din Exemplul 2.10 este prezentat în Figura 2.11.

Figura 2.11. Exemplu folosire cadre

2.6.1 Cadre in-line (iframe)

Cadrele in-line sunt blocuri care se introduc în pagină prin perechea de etichete <iframe> şi </iframe> şi au atributele: src = fişierul sau adresa fişierului introdus. height = înălŃime cadrul width = lăŃime cadrul frameborder = grosimea bordurii (chenarului) scrolling = adaugă bare de defilare cu valorile yes, no si auto

Programare web

align = aliniază cadrul (left, right, center, top, bottom, middle) vspace = distanŃa deasupra şi sub cadru hspace = distanŃa în stânga şi în dreapta cadrului

Pentru crearea unui cadru cu <iframe> în secŃiunea BODY se poate folosi următoarea sintaxă:

<iframe src="url_pagina" width="300" height="200" align="center" scrolling="yes" frameborder="2" name="nume_frame"> </iframe>

"nume_frame" este numele cadrului, necesar pentru atributul "TARGET" în link-uri sau cand frame-ul este folosit în secvenŃe scrise în alte limbaje, de exemplu JavaScript.

Exemplul 2.11. Folosire cadre in-line

<html>

<head>

<title>Exemplu folosire iframe</title>

</head>

<body>

In pagina este inclus un cadru in-line cu urmatorii parametri:<br>

width="300" height="200" hspace="200" vspace="100" scrolling="yes" <br>

<iframe src="04_tabele_01.html" width="300" height="150" hspace="200"

vspace="100" scrolling="yes">

Browserul folosit nu suporta cadre in-line

</iframe>

</body> </html>


Figura 2.12. Exemplu folosire cadru in-line

2.7 Liste

Listele reprezintă un mod de organizare a informaŃiei. Prin folosirea listelor textul este mai uşor de citit şi evidenŃiat.

HTML pune la dispozitie trei tipuri de liste, fiecare tip având asociat un tag specific:

<ul> lista neordonată <ol> lista ordonată <dl> lista de defniŃii Listele neordonate sunt delimitate de etichetele <ul> si </ul>, iar

elementele lor de etichetele <li> si </li> (list item). Atributul type indică cu ce tip de marcator va fi precedat fiecare element al

listei square (pătrat), disc (cerc plin) şi circle (cerc). Listele ordonate sunt delimitate de etichetele <ol> şi </ol>. Prin punerea

<li> </li> între tagurile <ol> si </ol> se machează elementele listei. Atributele care pot fi folosite pentru tag-ul <ol> sunt: type şi start pentru a

preciza modul de numerotare şi valoarea de start. Listele de definiŃii sunt delimitate de etichetele <dl> si </dl>, iar

elementele lor de etichetele <li> si </li> (list item).

Exemplul 2.12. Liste neordonate

Programare web

Figura 2.13. Afişare liste neordonate

Exemplul 2.13. Liste ordonate

<!Exemple de liste!neordonate!>

<html>

<head>

<title>

This is the title!

</title>

</head>

<body>

Lista cu marcator disc (implicit):<br/>

<ul>

<li>liste neordonate</li>

<li>liste ordonate</li>

<li>liste de definitii</li>

</ul>

Lista cu marcator square:<br/>

<ul type="square">




</ul>

Lista cu marcator circle:<br/>

<ul type="circle">




</ul>

</body> </html>


Figura 2.14. Afişare liste ordonate

Exemplul 2.14. Lista de definiŃii

<!Exemplu liste ordonate!>

<html> <head></head>

<body>

Lista ordonata:<br/>

<h2 align="left">GRUPA </h2>

<ol type="I">

<li>Subgrupa A</li>

<ol type="i">

<li>Andrei</li>

<li>Mihai </li>

<li>George </li>

</ol>

<li>Subgrupa B</li>

<ol type="a">

<li>Ioana </li>

<li>Dorin </li>

<li>Mihnea</li>

</ol>

</ol> </body></html>

<!Exemplu liste definitii!>

<html> <head></head>

<body>

Lista de definitii </br>

<dl>

<dt>HTML</dt>

<dd> - Hyper Text Markup Language</dd>

<dd> - limbaj pentru pagini web</dd>

<dd> - interpretat</dd>

<dt>C</dt>

<dd> - limbaj de programare standardizat de nivel mediu</dd>

<dd> - compilat </dd>

</dl> </body></html>

Programare web

Figura 2.15. Afişare liste de definiŃii

2.8 Pagini interactive. Formulare.

O parte din paginile web au un comportament static, ele având un rolul de prezentare a unor informaŃii, fără a da utilizatorului un rol active. În bună măsură, web sunt interactive, asigurând un comportament dinamic, adică un comportament stabilit în timpul rulării. Prin astfel de pagini pot fi colectate date oferite de utilizator, sau utilizatorul poate influenŃa evoluŃia paginii web.

Pentru scrierea paginilor interactive se pot folosi diferite tehnologii si limbaje de programare web. De exemplu, se pot folosi formulare HTML împreună cu alte programe şi scripturi web, cum ar fi JavaScript, ASP, JAVA, JSP, PHP, etc.

In continuare vor fi prezentate câteva elemente simple specifice limbajului HTML referitoare la folosirea formularelor.

Pentru a crea un formular în HTML se foloseşte elementul <form> ... </form>, între marcajele acestuia se adaugă celelalte elemente specifice. Elementul <form> ... </form> nu conŃine atribute pentru format, dar foloseşte urmatoarele atribute: � action - specifică adresa URL a unui script de pe server (ca de exemplu

PHP), program care trebuie să accepte datele din FORM, le procesează şi apoi trimite răspunsul către browser.

� method – metodele ce pot fi folosite sunt desemnate prin get sau post, valori ce specifică metoda HTTP ce va fi folosită pentru a trimite conŃinutul formularului către server.

� enctye – specific modul de codificare a conŃinutului transmis din formular. � name - precizează numele formularului, el putând fi folosit de scripturi,

cum ar fi cele scrise în JavaSript sau Visual Basic.


� target - indică Ńinta cadrului (frame) unde pagina va fi vizualizată după ce au fost transmise datele din formular. Valoarea atributului action este adresa URL a unui script aflat pe un server

WWW care primeşte datele formularului, efectuează o prelucrare a lor şi expediează către utilizator un raspuns. De exemplu:

<form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">

Atributul method precizează metoda utilizată de browser pentru expedierea datelor formularului. Sunt posibile urmatoarele valori: � get (valoarea implicită).

Pentru această valoare datele din formular sunt adăugate la adresa URL precizată de atributul action; nu sunt permise cantitati mari de date (maxim 1 Kb) Între adresa URL si date este inserat un "?". Datele sunt adaugate conform sintaxei:

nume_camp = valoare_camp

Între diferite seturi de date este introdus un caracter "&". De exemplu:

http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2

� post

Pentru această valoare datele sunt expediate separat. Sunt permise cantităŃi mari de date (de ordinul MB) Formularul este o unealtă frecvent folosită de un programator web pentru a

obtine informaŃii despre utilizatorul unei pagini web, cum ar fi email, nume, adresă, telefon, sau orice alte informaŃii de interes pentru acea aplicaŃie. Aceste informaŃii sunt transmise către server.

In funcŃie de necesităŃi, informaŃile pot fi procesate, stocate în fişiere, se pot completa formulare diverse de înscriere în diverse activităŃi, se pot realiza statistici şi aşa mai departe.

În acest scop, în formular pot fi integrate diferite elemente dedicate colectării de informaŃii.

Tag-ul form poate conŃine unul sau mai multe dintre următoarele elemente: <input>, <textarea>, <button>, <select>

2.8.1 Elementul <input>

Cel mai frcvent folosit este elementui <input> ... </input> descris prin

Programare web

următoarele atribute: � type - tipul de FORM folosit (caseta text, buton, etc.) � name - numele elementului respectiv de formular, folosit de scripturile la

care sunt trimise datele � value - datele (valoarea) asociate acelui element de formular şi care sunt

trimise, împreună cu numele, către scripturi (PHP, CGI, JavaScript) � size - specifică numărul de caractere care dau lungimea zonei de text � maxlength - numarul maxim de caractere acceptate � checked - specifică dacă un buton sau alt element va fi iniŃial selectat

(bifat). � readonly - folosit pentru campuri de tip text, impedica modificarea valorii

(textului) din acel camp � disabled – impedică folosirea campului care are aceasta proprietate. Va fi

vizibil dar nu va putea fi folosit, datele acestuia nu vor fi trimise din formular la vreun script.

Elementul <input> poate prelua informaŃii în diferite formate în funcŃie de valoarea atributului type:

� text � password � hidden � submit � radio � checkbox � button

� Câmpuri de text

Valoarea atributului type="text" precizează că imput-ul este folosit pentru a crea un câmp pentru introducerea unui text format dintr-un singur rând. Sintaxa de folosire a acestui element este:

<input type="text"></input>

Atributele care pot însoŃi casetele de text sunt: name, value, size, maxlength, cu semnificaŃiile descrise mai sus.

� value stabileşte un şir de text care apare în mod implicit în câmpul de text de text.

� size specifică dimensiunea câmpului, reprezentată prin numărul de caractere ce pot fi afişate şi are valoare implicită 20.

� maxlength reprezintă numărul maxim de caractere acceptate a intra în alcătuirea textului.


� Câmpuri pentru introducere de parole Valoarea "password" este folosită pentru a permite introducerea de parole.

Caracterele adaugate în aceast câmp nu sunt afisate cu valoarea lor reală, pentru a nu se vedea parola scrisă.

Sintaxa de folosire a acestei valori pentru elementul imput este:

<input type="password"></input>

Atributele care pot însoŃi casetele de parolă sunt: name, value, size, maxlength, cu semnificaŃiile descrise mai sus.

� Casete de formular ascunse Valoarea "hidden" este folosită pentru a adăuga în formular date care nu

sunt vizibile în browser şi care sunt trimise către scripturi împreună cu celelalte date din formular.


<input type="hidden"></input>

Atributele care pot însoŃi casetele ascunse sunt: name şi value cu semnificaŃiile descrise mai sus.

� Checkbox

Valoarea "checkbox" este folosită pentru a da posibilitatea ca utilizatorul să poată alege una sau mai multe opŃiuni prin bifarea lor.


<input type="checkbox"></input>

Atributele care pot însoŃi elementele "checkbox" sunt: name, value,

checked. � value descrie valoarea casetei checkbox respective, care poate fi

selectată (bifată). � checked forŃează selectarea (bifarea) opŃiunii.

� Radio button

Valoarea "radio" este folosită pentru a da posibilitatea ca utilizatorul să poată alege o singură opŃiune prin bifarea ei.


<input type="radio"></input>

Atributele care pot însoŃi elementele "radio" sunt: name, value, checked

şi sunt folosite similar folosirii pentru elementele "checkbox"..

Programare web

� Buton simplu Valoarea “buton” este folosit pentru a lansa o acŃiune descrisă prin cod

scris folosind limbaje de scripting, cum ar fi JavaScript, VBScript. Sintaxa de folosire este:

<input type="button" value="Buton"></input>

Acest element se foloseşte cu urmatoarele atribute: � name – stabileşte numele butonului, necesar pentru a fi folosit de script � value – precizează textul care apare pe buton.

� Buton Submit

Valoarea “submit” este folosit pentru a trimite informaŃiile către server (numele si valoarea celorlaltor elemente din formular).

Sintaxa de folosire este:

<input type="submit" value="Trimite"></input>

Acest element se foloseşte cu atributele name şi value, similar butonului simplu.

� Imagine pentru buton Submit

Se poate folosi o imagine în locul butonului “submit” standard. Sintaxa este:

<input type="image" src="locatie_imagine"></input>

Atributul src indică locaŃia imaginii folosite.

� Buton Reset Valoarea “reset” permite utilizatorului să anuleze toate datele care au fost

introduse prin celelalte elemente din formular. Sintaxa de folosire este:

<input type="reset" value="Sterge"></input>

Exemplul 2.15. Exemplu de folosire a formularelor şi a elementelor specifice


2.8.2 Elementul <textarea>

Sintaxa de utilizare este: <textarea> </textarea> şi crează un câmp în care se poate introduce un text alcătuit din mai multe linii.

Acest element foloseşte urmatoarele atribute: name, rows, cols, wrap.

<html>

<body>

<form action="script.php" method="post">

Nume: <input type="text" name="nume"> <br>

Prenume: <input type="text" name="prenume"> <br>

Telefon: <input type="text" name="telefon"> <br>

Fax: <input type="text" name="fax"> <br>

Email: <input type="text" name="email"> <br><br>

Sexul: Masculin <input type="radio" name="sex" value="m">

Feminin <input type="radio" name="sex" value="f">

<br><br>

Studii: <select>

<option value="scoala">Scoala profesionala

<option value="liceu">Liceu

<option value="facultate">Facultate

</select>

<br><br>

Accesati Internetul de la:<br>

Serviciu <input type="checkbox" name="serv">

Acasa <input type="checkbox" name="acasa">

Internet cafe <input type="checkbox" name="cafe">

<br><br>

Fisier: <input type="file" name="file">

<br><br>

Observatii:

<textarea name="obs" rows="5" cols="30">

Acesta este un exemplu de folosire a elementelor unui form.

</textarea>

<br><br>

<input type="submit" value="Trimite">

<input type="reset" value="Sterge">

</form>

</body>

</html>

Programare web

� rows stabileşte numărul de linii ale zonei de text � cols stabileşte numarul de coloane ale zonei de text � wrap precizează modul în care este preluat textul din formular;

valorile admise sunt soft/hard. Soft este valoarea implicită şi precizează că textul este transmis fără includerea marcajelor de trecere la linie nouă. Valoarea hard va transmite textul aşa cum apare în cîmpul textarea, incluzând şi caracterele “newline”. Pentru opŃiunea hard este necesară şi folosirea atributului cols.

La interpretarea codului din Exemplul 1.1, browserul va afişa o fereastă similară cu Figura 2.16. Prin elementele din fereastră, câmpuri de text, butoane, etc. Prin intermediul cărora utilizatorul poate introduce date specifice ce vor putea fi ulterior preluate şi prelucrate prin diferite alte secvenŃe de cod.

Figura 2.16. Exemplu de utilizare a elementelor specifice formularelor

� Casete pentru încărcare de fişiere (upload) Valoarea "file” este folosită pentru a permite utilizatorului să încarce

documente pe serverul web. Această casetă este însoŃită de un buton "browse" prin care se alege documentul care va fi transferat pe server. Acest transfer se face prin intermediul unui script (PHP, CGI). Sintaxa folosită este:

<input type="file"></input>


Acest element foloseşte următoarele atribute: � name reprezintă numele casetei upload şi este folosit de scriptul la care

sunt trimise datele; � size specifică numărul de caractere care dau lungimea casetei upload.

2.8.3 Elementul <select>

Cu ajutorul acestui element se pot crea liste de opŃiuni, respectiv meniuri, din care se pot selecta una sau mai multe opŃiuni.

Sintaxa de utilizare este: <select> </select>. Atributele elementului <select> sunt: name, size, multiple. � size determină înălŃimea elementului <select>, adică numărul opŃiunilor

din listă care vor fi vizibile. � multiple specifică faptul că utilizatorul poate selecta mai multe opŃiuni. În interiorul tag-ului <select>...</select> sunt incluse elemente <option>

</option> care descriu opŃiunile incluse şi afişate în listă. Elementul <option> </option> foloseşte două atribute: selected şi value. � selected se foloseşte pentru o singură opŃiune din listă şi forŃează

selectarea respectivei opŃiuni la încărcarea paginii. � value specifică valoarea variabilei numita in optiunea respectiva

(necesara pt. scriptul care va primi datele). În funcŃie de valoarea atributului size, rezultă două tipuri de elemente de

selectare:

2.8.3.1. Lista de derulare (Drop Down List )

Sintaxa de folosire a acestui element este:

<select name="select">

<option>Optiune 1</option>


<option> … </option>

</select>

Codul din Exemplul 2.16 va permite selectarea între patru opŃiuni. În

browser va apărea elementul afişat sub forma din Figura 2.17 a. Care cu ajutorul mouse-ului se poate derula vizualizând toate opŃiuni le şi putând selecta opŃiunea dorită (Figura 2.17 b.).

Programare web

Exemplul 2.16. Utilizarea elementului <select>

a.

b.

Figura 2.17. Afişarea elementului <select>

2.8.3.2. List Box

Sintaxa de folosire a acestui element este:

<select name="select" size="4">



</select>

Atributul size determină numărul de opŃiuni ce se afişează iniŃial şi,

implicit, înălŃimea casetei în care acestea sunt afişate. Dacă numărul opŃiunilor este mai mare decât size, se va afişa şi bara verticală de derulare a opŃiunilor.

Codul din

Exemplul 2.17. va afişa elementul <select> în forma din Figura 2.18.

Exemplul 2.17. Exemplu list box

<html>

<body>

Selectare limba:

<select name="language">

<option value="ro">Romana</option>

<option value="en">Engleza</option>

<option value="fr">Franceza</option>

<option value="de">Germana</option>

</select>

</body>

</html>


Figura 2.18. Afisare list box

ObservaŃie: Elementele <input>, <textarea>, <button>, <select> se încadrează în tag-ul "<form> ... </form>"!

2.9 Metadate

Metadatele sunt în general „date despre date” sau, altfel spus, date care descriu alte date, de orice fel şi de orice tip. Metadatele reprezintă şi informaŃia care se inserează într-un fişier HTML pentru a suplimenta informaŃiile despre conŃinutul şi scopurile unei anumite pagini web sau unui anumit sit web.

În mod normal metadatele nu sunt afişate de către browser. Metadatele pot transfera informaŃii utile browserelor, serverelor, utilizatorilor. Metadatele pot fi citite şi folosite de către roboŃii Internet şi de motoarele de căutare.

Toate paginile HTML încep cu eticheta <html> şi se termină cu eticheta </html>. În interiorul acestor etichete găsim perechea <head> </head> şi perechea <body> </body>.

Zona head, pe lângă titlul paginii, stiluri pentru formatarea textului, scripturi şi linkuri către fişiere se pot include şi descrieri de tip <meta>,

Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii utile motoarelor de cautare şi au urmatorul format:

<META NAME="nume" CONTENT="continut">

Atributele etichetei <meta> sunt:

name – valori posibile sunt: - description – descrierea conŃinutului site-ului;

<html>

<body>

Selectare limba:

<select name="language" size=3>

<option value="ro">Romana</option>

<option value="en">Engleza</option>

<option value="fr">Franceza</option>

<option value="de">Germana</option>

</select>

</body>

</html>

Programare web

- keywords – desemneză cuvintele cheie folosite de motoarele de căutare;

- author – autorul site-ului; - copyright – dreptul de proprietate.

http-equiv – câteva valori posibile:

- creation-date – data creării site-ului; - expires – data valabilităŃii unei pagini - content-type content-type - specifică setul de caractere folosit

pentru site; - refresh – defineşte intervalul de timp după care se reîncarcă

pagina sau se face direcŃionarea către o altă pagină, dacă este indicat un url.

- pragma – obligă browserul să descarce pagina Web de fiecare dată când este accesată.

content – stocarea conŃinutului propriuzis – valorile posibile sunt şiruri încadrate între ghilimele; charset – specifică setul de caractere folosit. În mod curent se folosesc UTF-8 sau ISO-8859-1. Se poate folosi orice set de caractere, dar cu riscul ca browser-ele să nu-l recunoască. scheme – valorile posibile sunt şiruri încadrate Ńntre ghilimele; lang – precizarea limbii (en, uk, ca, ro, etc.).

Pentru că informaŃiile incluse în elementele <meta> nu sunt vizibile,

informaŃii precum autor, drepturi de autor, data publicării paginii, data de valabilitate, etc. se recomandă afişarea lor în corpul paginii.

În Exemplul 2.18 este prezentat un exemplu de cod de folosire a diferitelor atribute ale elementului <meta>.

Exemplul 2.18. Exemplu de folosire a elementului <meta>


<html>

<head>

<meta name="Description" content="Site oficial Universitatea Transilvania din Brasov ">

<meta name="Author" content="XXXX XXXXXX ([email protected])">

<meta name="Generator" CONTENT="Microsoft FrontPage 5.0">

<meta name="KeyWords" content="University, Universitate, Transilvania, Brasov, facultati, facultatea, invatamint, educatie, studenti">

<meta name="country" content="RO">

<meta name="organization-Email" content="[email protected]">

<meta name="copyright" content="All Rights Reserved -Transilvania University of Brasov">

<meta name="creation date" content="Jul2012">

<meta name="title" content=" Universitatea Transilvania din Brasov ">

<meta name="identifier" content="http://www.unitbv.ro/">

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

</head>

<body>

Copyright © 2012, Universitatea Transilvania din Brasov. All Rights Reserved.</body>

Programare web

Documents

2. Crearea paginilor web folosind limbajul HTML432x.ncss.ro/Anul III/PWeb/Curs PW-02-HTML.pdf · limbaje de programare (Javascript, PHP, etc.) - marcajul HTML de închidere