Html (hypertext Markup Language)

REZUMATUL PROIECTULUI

Lucrarea de licență are ca tematică proiectarea și dezvoltarea unui proiect multimedia pentru web pentru prezentarea și administrarea unui hotel. Scopul principal este de a prezenta Hotelul Lex și facilitățile sale pentru a informa și convinge persoanele de calitatea acestuia. Aplicația este structurată și organizată într-un mod atrăgător atât din punct de vedere estetic, cât și din punct de vedere al navigării între secțiuni, oferind vizitatorilor posibilitatea de a se informa ușor și rapid. De asemenea, aceasta este prezentată într-un mod profesional pentru a oferi siguranță celor care doresc să se cazeze.

Aplicația este proiectată utilizând limbajul HTML, foi de stil în cascadă CSS și PHP – instrumente de proiectare a aplicațiilor web deprinse în facultate la disciplinele dedicate din cadrul specializării Ingineria Sistemelor Multimedia.

Termenii cheie: HTML, CSS, PHP, hotel, prezentare, cazare, organizare, profesionalism

CUPRINSUL

LISTA FIGURILOR

Figura 1. Selectarea prin click dreapta a opțiunii „Update field”

Figura 2. Actualizarea întregului tabel

LISTA TABELELOR

Tabelul 1. Nume de utilizatori și valorile rezumat ale parolelor acestora

Introducere

Scopul acestei lucrări de licență este de a prezenta un hotel cu scopul de a informa și convinge persoanele de calitatea acestuia. Site-ul conține informații privind organizarea hotelului, facilitățile de care dispune și datele de contact necesare pentru a putea lua legatura cu administrația hotelului.

Acesta este structurat în mai multe secțiuni pentru o navigare clară și rapidă. De asemenea, acesta este prezentat într-un mod profesional pentru a oferi siguranță celor care doresc să se cazeze.

capitolul I

HTML (HyperText Markup Language)

Pagini și locații (site-uri) web.

World wide web, abreviat www sau, pur și simplu web, este totalitatea documentelor hipertext legate între ele care pot fi accesate prin rețeaua mondială Internet. Paginile web sunt documentele de bază în www, ele pot conține diverse informații în formă textuală, grafică sau video. Orice pagină web este unic identificată prin adresa sa denumită URL (Uniform Resource Locator). O locație web (sau un web site) constă din mai multe pagini web, ce rezidă la un server web sau la un calculator local, cu legături atat intre ele cat și către documente de la alte locații web.

Cerințe generale privind crearea paginilor web. Crearea unei pagini web reușite necesită respectarea atat a unor cerințe generale, cat și a unor cerințe specifice fiecărei pagini web în parte, în funcție de destinația acesteia. La cerințe generale putem enumera:

– conținutul și aspectul prezentării informației în pagină trebuie să trezească interesul vizitatorilor;

– titlul paginii trebuie să fie clar, concis și sugestiv;

– trebuie să existe o logică în plasarea informației în pagină deoarece plasarea neordonată a informației poate deruta vizitatorul;

– suficient loc liber în pagină pentru facilitatea perceperii informației – o pagină supraincărcată va indepărta utilizatorii;

– folosirea rațională a graficii – pe langă faptul că grafica face pagina atractivă, trebuie de ținut cont și de faptul că tot aceasta conduce la creșterea dimensiunii paginii care, eventual, conduce la o incărcare mai lentă a paginii, ceea ce poate indepărta utilizatorii;

– dimensiuni nu prea mari pentru fiecare pagină – ceea ce va conduce la o incărcare mai rapidă a acestora, spre fericirea utilizatorilor;

– legăturile către documentele de mari dimensiuni ar fi bine să fie insoțite de comentarii în privința acestor dimensiuni pentru evitarea incărcării documentelor de mari dimensiuni mai puțin utile utilizatorului respectiv;

– folosirea în pagină a unui set restrans de culori – ceea ce va permite accentuarea atenției asupra informației plasate în pagină; – se va lua în calcul dimensiunea ecranului la folosirea denumirilor de prea mari dimensiuni nu va rămane suficient loc pentru text și atunci se va cere derularea inoportună a paginii;

– se va verifica aspectul paginii în diverse browser-e cum ar fi: Internet Explorer, Opera, Mozila Firefox, deoarece aspectul paginilor diferă de la un browser la altul;

– respectarea drepturilor de autor a informației plasate în pagină;

– controlul regulat al legăturilor în scopul identificării celor nefuncționale;

– alegerea limbii de comunicare în funcție de tematica și orientarea paginii, etc.

Structura de navigare este folosită la stabilirea legăturilor intre paginile web. O structură reușită poate spori eficiența folosirii resurselor locației web.

Etapele creării locațiilor web. Crearea și asigurarea funcționării unei locații web include, în general, următoarele etape:

1. concretizarea destinației și formularea cerințelor către locația web;

2. elaborarea structurii site-ului;

3. elaborarea paginilor web;

4. integrarea paginilor în cadrul site-ului prin stabilirea legăturilor;

5. testarea și definitivarea site-ului;

6. publicarea web site-ului în www;

7. administrarea web site-ului.

In cazuri particulare pot fi și alte etape, în general la crearea unor site-uri complexe, cand este foarte importantă alegerea instrumentelor pentru crearea locației, a echipamentelor pentru instalare, etc. La randul său, elaborarea paginilor web prevede următoarele etape:

1. elaborarea sau selectarea interfețelor pentru grupuri de pagini sau pagini aparte;

2. adăugarea informației în pagină;

3. stabilirea legăturilor;

4. testarea și definitivarea paginii;

5. publicarea paginii în cadrul site-ului;

6. administrarea paginii.

Limbajul HTML. Prezentare generală. HTML este prescurtarea de la HyperText Markup Language și reprezintă un limbaj pentru crearea unui document astfel incat să poată fi publicat pe World Wide Web și vizualizat cu ajutorul unui browser (Internet Explorer, Netscape Navigator, Mozila Firefox, Opera, etc.). HTML nu este un limbaj de programare și asta din cauza că în HTML lipsește atributul principal propriu oricărui limbaj de programare și anume comenzile. In HTML nu poate fi creată o succesiune de acțiuni, ci doar poate fi descris modul în care browserul trebuie să afișeze la ecran documentul respectiv.

Astfel HTML este doar un limbaj de descriere, conținand elemente ce permit construirea paginilor web. Documentele HTML sunt exclusiv de tip text (ASCII) prin urmare pot fi create cu orice editor de texte. Au fost insă dezvoltate editoare specializate care permit editarea intr-un fel de WYSIWYG – Wat You See Is Wat You Get. Editoarele specializate HTML (ex. MS FrontPage sau Macromedia DreamWeaver) permit crearea documentelor web într-un mod rapid și ușor, și, prin urmare, foarte eficient, doar prin apăsarea catorva butoane sau prin apelarea catorva funcții predefinite. Acest tip de editoare reprezintă unelte excelente pentru dezvoltatorii web cu experiență. In general aceste editoare pot fi folosite și de utilizatori care nu cunosc limbajul HTML, cu toate că ele atribuie coduri în exces documentului și de obicei se intervine „manual” la redactarea lor. Un alt neajuns ar fi faptul că în majoritatea cazurilor documentul este prezentat de browser nu intocmai așa cum este prezentat în editor și atunci iarăși este necesar de a interveni pentru efectuarea modificărilor respective. Astfel chiar și în cazul folosirii unui editor specializat cunoașterea limbajului HTML este oportună. HTML utilizează pentru descrierea documentelor web – tag-uri, numite și etichete, specifice pentru fiecare element descris. Tag-urile stabilesc atat structura documentului, cat și aspectul acestuia. Un tag este un identificator care furnizează browser-ului instrucțiuni de formatare a documentului. Petru a fi delimitate, tag-urile HTML sunt încadrate intre paranteze unghiulare (< >).

Tag-urile se divizează in:

tag-uri pare sau tag-uri pereche – care impun după sine existența

unui tag de închidere;

tag-uri impare sau singulare – care nu necesită inchidere.

Elemente de marcare

Elementele de marcare sunt principalele componente ale limbajului HTML. Ele apar

in document sub forma de etichete (tag-uri) sau controale HTML. Numele elementului apare în controlul de inceput (sub forma <nume-element>) și în cel de sfarsit (sub forma </nume-element>). Exemplu:

<BODY> și </BODY>

Portiunea din document încadrata de controalele HTML se mai numeste continutul elementului marcat și este partea de document asupra caruia actioneaza respectivul mod de formatare.Anumite elemente nu necesita etichete de sfarsit (Ex: P), iar altele nu au etichete de sfarsit, în general pentru ca nu au un continut pe care sa-l incadreze (Ex: BR). Exista, de asemenea, elemente prezente în document care pot sa nu fie marcate cu ajutorul etichetelor, prezenta lor în cadrul documentului fiind implicita (Ex: BODY).Limbajul HTML nu face distinctie intre literele mari și literele mici ale alfabetului. De aceea formularile <BR>, <br> sau <Br> desemneaza acelasi control.

Atribute

Atributele reprezinta proprietati ale elementelor de marcare scrise sub forma unor perechi de nume și valori în interiorul etichetei de inceput, dupa numele elementului referit. Prezenta ghilimelelor la valorile atributelor este optionala. Fiecare control HTML are anumite atribute cu valori presetate care pot fi modificate de catre creatorul documentului conform dorintei acestuia. Ele pot fi, de asemenea, modificate dinamic, în timpul interactiunii cu utilizatorul, cu ajutorul scripturilor. Atributele ale caror valori sunt de tip boolean (adica adevarat sau fals) sunt setate in felul urmator:

– absenta lor în eticheta de inceput a marcajului echivaleaza cu

valoarea false presetata

– prezenta lor echivaleaza cu setarea valorii true

Referinte de entitati

Pentru a introduce în continutul documentelor HTML unele caractere care nu fac parte din alfabetul limbii engleze, numite și caractere speciale, (cum ar fi è, ß sau ®) se folosesc marcaje speciale numite referinte de entitati sau referinte de caracter. Spre deosebire de controalele de marcaj despre care am vorbit în sectiunile anterioare, referintele de entitate nu sunt incadrate de caracterele "<" și ">". Ele incep intotdeauna cu caracterul ampersand "&" urmat de un text în stransa legatura

cu caracterul pe care il reprezinta sau un cod numeric și se termina cu caracterul ";".

Comentarii

Reprezinta texte care apar în fisierul sursa HTML, dar care nu vor fi afisate de catre browser catre utilizator. Ele au rolul de a expune diferite aspecte legate de document in vederea realizarii unui fisier sursa cat mai clar și mai usor de inteles și corectat. Comentariile sunt incadrate de marcajele "<!–" și "–>". E foarte important ca in interiorul comentariului sa nu existe secventa de caractere "–" deoarece aceasta genereaza confuzie.

Alinierea

Pentru a specifica modul în care un element (antet,imagine,tabel,etc) va fi pozitionat pe orizontala relativ la elementul "container " care il contine se foloseste atributul align. Valorile acordate acestui atribut pot fi:

left – pentru alinierea la stanga

center – pentru pentru pozitionarea centrata

right – pentru alinierea la dreapta

Implicit, alinierea se realizeaza la stanga, cu exceptia cazului în care elementul de pozitionat contine text a carui directie de scriere este de la dreapta la stanga, optiune realizata prin setarea în interiorul controlului a atributului dir la valoarea "rtl" (Right-To-Left). In acest caz alinierea implicita este la dreapta. Pentru a determina alinierea pe verticala a unui element în cadrul elementului container se foloseste atributul valign cu urmatoarele valori posibile:

middle – pentru pozitionarea centrata

top – pentru alinierea la partea de sus a containerului

bottom – pentru alinierea la partea de jos a containerului

Culorile

Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele uneia dintre cele 16 culori "sigure", adica acele culori care vor fi recunoscer se foloseste atributul valign cu urmatoarele valori posibile:

middle – pentru pozitionarea centrata

top – pentru alinierea la partea de sus a containerului

bottom – pentru alinierea la partea de jos a containerului

Culorile

Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele uneia dintre cele 16 culori "sigure", adica acele culori care vor fi recunoscute și afisate de majoritatea calculatoarelor.Ex rimarea numerica se realizeaza prin codulRGB ( adica RED-GREEN-BLUE ) al culorii.Codul este alcatuit din 3 numere cuprinse intre 0 și 255 scrise în baza 16, fiecare exprimand prezenta cantitativa a uneia dintre cele trei nuante care definesc codul culorii respective.

Dimensiunile

Dimensiunile unor elemente prezente în documentul HTML se pot preciza în trei moduri:

1.Dimensiunea absoluta este referita în pixeli.

2.Dimensiunea relativa este referita în procente.

3.Dimensiunea proportionala este folosita atunci cand doua sau mai multe elemente impart un anumit numar de pixeli disponibili.

Structura unui document

Sectiunile unui document HTML

Un document HTML este impartit în trei sectiuni:

Sectiunea de informatii HTML

Sectiunea de antet a documentului

Corpul documentului

Controalele <HTML> și <HTML> incadreaza antetul și corpul documentului. Ele comunica interpretorului HTML ca blocul de text cuprins intre ele este scris si formatat în limbajul HTML standard. Prezenta acestor etichete în document este optionala.

7.Liste

De multe ori, în redactarea unor documente ajungem în punctul în care trebuie sa enumeram un set de elemente care formeaza, din punct de vedere logic, o multime. Prezentarea acestora trebuie realizata în asa fel incat relatiile dintre ele, sau dintre ele și eventualiele "subelemente" sa fie cat mai clar exprimate din punct de vedere vizual. Pentru aceasta se folosesc diferitele tipuri de liste.

Liste neordonate

Probabil cele mai intalnite liste în cadrul documentelor HTML sunt cele neordonate. Pentru a marca inceputul și sfarsitul unei liste neordonate se foloseste elementul UL. Fiecare lista contine un set de elemente numite "itemi", prezenta unui item în cadrul unei liste marcandu-se cu ajutorul elementului LI. Fiecare element al listei este indentat fata de marginea din stanga (sau dreapta, daca directia de scriere este de la drapta la stanga) listei; astfel, prezentarea ei devine foarte clara și atractiva. Mai mult, ficare item al listei va avea un marcaj in fata sa, corespunzator nivelului de subordonare al listei. Acest marcaj poate fi ales cu ajutorul atributului Type, iar valorile posibile sunt:

disc – pentru un cerculet plin

circle – pentru un cerculet gol

square – pentru un patratel plin

Liste ordonate

Listele ordonate se aseamana foarte mult cu cele neordonate, diferenta majora constand în faptul ca listele ordonate atribuie ca marcaj fiecarui item un element (numar, litera) prin care se evidentiaza ordinea sa în cadrul listei. Listele ordonate sunt marcate în interiorul documentului cu ajutorul elementului OL. Pentru a stabili care va fi marcajul de ordonare în lista al fiecarui item se foloseste atributul Type. Valorile acestuia pot fi:

1 pentru cire arabe: 1,2,3,… (valoare implicita)

a pentru litere mici: a,b,c,…

A pentru litere mari: A,B,C,…

i pentru cifre romane tiparite cu litere mici: i,ii,iii,iv,…

I pentru cifre romane tiparite cu litere mari: I,II,III,IV,…

Liste de definitii

Listele de definitii sunt putin diferite de celelalte doua tipuri, intrucat fiecare termen al listei se compune din doua elemente: Termenul Definitiei si Descrierea Definitiei. Tag-ul ce marcheaza inceputul unei liste de definitii este <DL>. Tag-ul ce marcheaza termenul definitiei este <DT>. Tag-ul ce marcheaza descrierea definitiei este <DD>.

Referințe

Lagăturile (link-urile) reprezintă partea cea mai importantă a unei pagini Web. Ele transformă un text obișnuit în hipertext sau hiperlegătură, care premite trecerea rapidă de la o informație aflată pe un anumit server la altă informație memorată pe un alt server aflat oriunde in lume. Legăturile sunt zone active intr-o pagina Web, adică zone de pe ecran sensibile la apăsarea butonului stang al mouse-ului. Atunci cand se incărcă pagina principală a unui site, în general nu se tastează și numele unui fișier; serverul trimite un fișier predefinit;

O referință se formează cu ajutorul tag-ului <a> care necesită tag-ul de inchidere </a>. Pentru a preciza pagina indicată de legătură se utilizează atributul href=“url” al tag-ului <a>. Intre ghilimele nu se lasă spații libere, dacă este necesară introducerea unei legături spre fișiere alte căror nume conțin spații, acestea trebuiesc inlocuite cu %20. Un alt atribut important al tag-ului <a> este reprezentat de target, care specifică locul în care se va deschide URL-ul. Valorile pe care le poate lua acest atribut sunt:

_blank – URL-ul țintă se va deschide intr-o nouă fereastră (este implicit)

_top – URL-ul țintă se va deschide în fereastra curentă;

_self – URL-ul țintă se va deschide în același cadru din care s-a dat click;

_parent – URL-ul țintă se va deschide în cadrul părinte.

Referințele pot fi: interne (spre o ancoră din același fișier) sau externe (spre un alt fișier); în funcție de modul cum este specificată calea spre alt fișier, pot fi absolute sau relative. Intr-o pagină foarte lungă pot exista puncte de reper către care se definesc legături. Aceste legături se numesc ancore. O ancoră se definește, de asemenea, prin tag-ul <a>. Pentru a defini ancora se utilizează atributul name care primește ca valoare numele ancorei. Pentru a introduce o legatură către o ancoră definită în alt document (altă pagină) aflat în același director, atributul href primește o valoare de forma nume_fisier.html#nume_ancora.

Utilizarea imaginilor

Inserarea unei imagini

Pentru a marca prezenta unei imagini în document se foloseste elementul IMG, al carui atribut Src este URL-ul fisierului imagine. Tipurile de fisiere-imagine compatibile cu HTML sunt GIF, JPEG și PNG. Elementul IMG nu are eticheta de incheiere deoarece elementul nu are continut pe care sa-l includa. Ar fi bine ca atunci cand inserati o imagine sa folositi și atributul Alt care specifica un text care va fi afisat în locul imaginii în cazul în care browser-ul nu lucreaza decat în mod text sau în cazul în care utilizatorul decide sa renunte la incarcarea imaginilor. Daca imaginea este afisata, valoarea atributului Alt va fi folosita ca mesaj "tool-tip". Pentru a aranja imaginea în raport cu textul din vecinatatea sa se foloseste atributul align. Valorile posibile sunt:

bottom- pentru alinierea textului la baza inferioara a imaginii (valoare implicita)

middle sau center – pentru alinierea textului pe centrul imaginii

top – pentru alinerea textului la baza superioara a imaginii

left – pentru a plasa imaginea în extremitatea stanga a elementului container

right – pentru a plasa imaginea în extremitatea dreapta a elementului container

Pentru a controla spatiul vertical sau orizontal din jurul imaginii inserate în document se folosesc atributele vspace și hspace . Valorile atribuite desemneaza numarul de pixeli care vor distanta imaginea de elementele adiacente ei în cadrul documentului Atributele width și height stabilesc dimensiunile suprafetei din document care va fi ocupata de imagine. Precizarea acestor atribute determina o mai rapida incarcare a documentului în fereastra programului de explorare, dar în cazul precizarii unor dimensiuni care nu corespund dimensiunilor reale ale imaginii aceasta va fi deformata pentu a acoperii exact suprafata precizata. Folosirea atributului border determina afisarea unui chenar care va incadra imaginea. Valoarea acestui atribut va reprezenta grosimea chenarului, o valoare egala cu 0 (valoare implicita) determinand afisarea imaginii fara chenar.

Tabele

Majoritatea site-urilor conțin tabele și acestea sunt folosite nu doar pentru repezentarea informației în formă tabelară ci și pentru a face design-ul paginii mult mai atractiv, evident liniile tabelelor, în ultimul caz, sunt ascunse. Structura html de descriere a tabelelor conține trei tag-uri principale:

tag-ul par <table> – în interiorul căruia este inclus intregul tabel. Acest tag descrie parametrii intregului tabel.

tag-ul par <tr> (ce vine de la table row – rand al tabelului) – in interiorul căruia sunt incluse randurile tabelului. Fiecare astfel de tag descrie parametrii randului respectiv.

Tag-ul par <td> (ce vine de la table data – date ale tabelului, sau conținutul tabelului) – în interiorul căruia sunt incluse conținutul celulelor. Fiecare astfel de tag descrie parametrii pentru o celulă aparte.

Atributele tagului <table>

In mod prestabilit, un tabel nu are bordură. Pentru a adăuga o bordură unui tabel se utilizează atributul border al tag-ului <table>. Acest atribut poate primi ca valoare orice număr intreg, inclusiv 0, și reprezintă grosimea în pixeli a chenarului tabelului. Valoarea 0 pentru border semnifică absența chenarului. Dacă atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilită egală cu 1 pixel. Cand atributul border are o valoare nenulă bordura tabelului are un aspect tridimensional.

Cu ajutorul atributului bordercolor bordura tabelului poate primi o culoare diferită de cea prestabilită. Ca valoare acest atribut poate lua numele culorii sau valoarea RGB a acesteia. Pentru stabilirea culorii fondaluluii tabelului se folosește atributul bgcolor care primește ca valoare numele culorii sau valoarea RGB a ei. In cazul în care ca fondal trebuie folosită o imagine se folosește atributul background care primește ca valoare url-ul imaginii respective. Tabelul poate fi alineat în pagină cu ajutorul atributului align, care poate lua valorile:

left – aliniere la stanga; celelalte componente sunt aliniate in partea dreaptă;

right – aliniere la dreapta; celelalte componente sunt aliniate in partea stangă;

center – alinierea la centru.

Distanța dintre două celule vecine se definește cu ajutorul atributului cellspacing. Valorile acestui atribut pot fi numere intregi pozitive, inclusiv 0, și reprezintă distanța în pixeli dintre două celule vecine. Valoarea prestabilită a atributului cellspacing este 2. Distanța dintre marginea unei celule și conținutul ei poate fi definite cu ajutorul atributului cellpadding. Valorile acestui atribut pot fi numere intregi pozitive și reprezintă distanța în pixeli dintre celulă și conținutul ei. Valoarea prestabilită a acestui atribut este 1. Dimensiunile unui tabel pot fi stabilite exact prin intermediul a două atribute:

width – pentru lățimea tabelului și

height – pentru inălțimea acestuia.

Există posibilitatea de a atașa un titlu unui tabel. Aceasta se poate efectua cu ajutorul tag-ului <caption>, care trebuie plasată în interiorul tag-urilor <table> și </table> dar nu în interiorul etichetelor <tr> și <td> și inchiderii acestora.

Formulare.

Formularele sunt elemente ale limbajului HTML. Ele reprezintă o grupare de component care permit trimiterea de date și de comenzi către un server. Acesta trebuie să fie mai mult decât un clasic server HTTP, trebuind să aibă instalată și o componentă capabilă de a răspunde comenzilor și a prelucra datele. Cea mai populară astfel de componentă, foarte larg utilizată în ultimii 10 ani în programarea pe Internet este limbajul PHP, de care ne vom ocupa pe larg în capitolul al III-lea al acestei lucrări. Pentru moment ne vom concentra asupra componentelor unui formular și a aspectului

acestora. Un formular este descris prin intermediul tag-ului <FORM>…</FORM>. Atributele acestuia sunt:

• action=”adresa” – acest atribut specifică adresa script-ului care se va ocupa de a

răspunde la comenzi și de a prelucra datele.

• method – acest atribut specifică modul în care datele vor fi transmise către server.

Distinge, două valori pe care le poate lua acest atribut, și anume:

– get – datele sunt „la vedere” – acest lucru înseamnă că, în momentul trimiterii lor

către server, ele vor apărea scrise în clar, în bara de adresă, într-un anumit format standard.

– post – datele nu mai apar în mod explicit utilizatorului. Totuși, ele nu sunt criptate, practic, un program răufăcător le poate intercepta.

În continuare vom prezenta câteva din componentele unui formulare, prin intermediul cărora utilizatorul poate introduce date și trimite apoi aceste date către server. Un atribut foarte important al oricăruia dintre aceste componente este name, deoarece prin intermediul său, server-ul care va primi datele va ști despre care dintre controale este vorba.

Câmpuri text

Permit utilizatorului să introducă date într-un câmp de tip edit (pe o singură linie). Acestea se specifică prin tag-ul <INPUT type=”text” …>

Atributele sale sunt:

• size – specifică lățimea

• maxlength – specifică numărul maxim de caractere ce pot fi scrise în câmpul text

• name – numele câmpului

• value – poate specifica o valoare care să fie deja scrisă în cadrul controlului

Butoane de tip „submit”

Aceasta componenta se prezintă sub forma unui buton. Prin apăsarea sa are loc trimiterea tuturor datelor din formular către script-ul de pe server-ul care le va prelucra. Un control de tip submit se specifică prin tag-ul <INPUT type=”submit” …>

Atributele sale sunt:

• name – numele de identificare a componentei

• value – textul care va fi scris pe buton

Câmpuri de tip password

Se comportă identic cu câmpurile de tip text. Singura deosebire este că, la scrierea de text în ele, acesta nu va fi vizibil, ci în locul caracterelor introduse se vor afișa asterisc-uri. Totodată, textul dintr-un astfel de control nu poate fi luat cu copy/paste. Controalele de acest fel se specifică prin

tag-ul <INPUT type=”password” …>. Atributele sunt identice cu cele de la <INPUT type=”text” …>

Câmpuri de tip butoane radio

Sunt controalele care permit ca, dintr-o serie de opțiuni posibile, utilizatorul să aleagă una

singură. Controalele de acest fel se specifică prin tag-ul <INPUT type=”radio” …>

Atributele sale sunt:

• name – numele de identificare al componentei

• value – valoarea pe care o va întoarce butonul respectiv, dacă el a fost cel ales;

• checked – dacă acest atribut este prezent, butonul respectiv va fi ales în mod implicit, la încărcarea paginii.

capitolul II

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets).

Noțiunea de stil este, pentru un document HTML, asemănătoare cu formatarea documentului, spre exemplu, pentru un document Word. Exisă o mulțime de atribute prin care se pot stabili

font-urile, caracteristicile de aliniere a textului, forma elementului, culorile de fond și ale literelor, marginile, poziția elementelor, etc. Pentru a putea gestiona cât mai eficient stilurile, a fost pus la dispoziția programatorilor de pagini web un limbaj prin care se poate realiza acest lucru. Acest limbaj este cunoscut sub numele de CSS (actualmente, vorbim de versiunea CSS2). Legătura dintre HTML și CSS se realizează prin intermediul tag-ului <STYLE>…</STYLE> care trebuie așezat între <HEAD> și </HEAD>.

În cadrul tag-ului STYLE vom stabili modul în care dorim să arate elementele paginii. Fiecare element al HTML-ului pe care l-am studiat este identificat, în cadrul CSS-ului de tag-ul care îl gestionează. Spre exemplu, identificatorul CSS pentru paragrafe este P, pentru table este TABLE, pentru imagini este IMG, ș.a.m.d. Folosind acești identificatori în cadrul unui <STYLE>…</STYLE>, putem face ca toate elementele de același fel din cadrul unui document să arate la fel. Astfel suntem scutiți de a scrie o grămadă de cod care s-ar repeta în cazul fiecărui element de același fel.

În cadrul unui style putem defini proprii identificatori, precedându-i de caracterul #. Aplicarea ulterioară a lor asupra unui element, se face specificând un nou atribut, și anume id=”identificator” unde identificator este cel propriu, definit în cadrul lui STYLE (cel precedat de #).

În loc de a defini stilurile în cadrul antetului (HEAD), așa cum am arătat mai sus, ele pot fi scrise separat, într-un fișier text cu extensia .css, exact în aceeași manieră în care le-am fi scris între cele două tag-uri prezentate, <STYLE>…</STYLE>. Includerea efectivă a acestui fișier în cadrul HTML-ului se face tot în secțiunea <HEAD>, prin intermediul tag-ului

<LINK rel="stylesheet" type="text/css" href="fisier_stil.css">

capitolul III

PHP (PHP: Hypertext Preprocessor)

PHP este un limbaj de programare destinat în primul rând Internetului, aducând dinamică unei pagini web. Este unul dintre cele mai importante limbaje de programare web open-source (este gratuit și, în plus, utilizatorii pot acționa liber asupra procesului de dezvoltare) și server-side (codul sursă nu se rulează pe calculatorul celui care vizualizează pagina, ci pe serverul web).

Limbajul PHP, în marea majoritate a cazurilor, se folosește sub formă de secvențe de cod inserate în cadrul unui document HTML. Din acest motiv, vom prefera termenul de „script PHP” celui de program PHP. Structura unui script PHP este foarte asemănătoare cu cea a unui cod scris în limbajul C, mai ales în sensul în care structurile de programare au aceeași sintaxă și aceeași funcționalitate. Rolurile de bază ale unui script PHP constau în aceea că scipt-ul poate prelua date trimise de către o pagină web de la un client (în general, datele pot fi trimise de către o pagină web prin intermediul formularelor) și de a executa o secvență de program în urma căreia va rezulta un cod

HTML, cod pe care clientul îl va primi sub forma unei pagini web. Clientul nu va avea acces la codul efectiv al script-ului, ci, prin faptul că acesta se află pe server și se rulează tot pe acesta, va primi direct HTML-ul generat de script.

Structura unui fișier PHP

Spre deosebire de fișierele .html care o dată create pe discul local cu un editor de texte pot fi deschise imediat tot local, direct în browser-ul de Internet, pentru a rula codul PHP este absolut necesar ca fișierele să fie puse în directorul în care rezidă documentele serverului web, iar vizualizarea lor să fie făcută prin intermediul acestuia. În mod implicit, un fișier care conține un script PHP trebuie să fie salvat cu extensia .php.

Structura absolut identică celei a unui fișier HTML. Noutatea este adusă de scriptul PHP, care este inserat între tag-urile colorate în roșu: „<?php” și „?>”. Instrucțiunea „echo” cuprinsă între acestea este o instrucțiune specifică limbajului PHP, ea având rolul de a scrie în pagina web textul ce urmează după, cel cuprins între ghilimele.

Constante

Constantele recunoscute de limbajul PHP sunt asemănătoare cu cele ale limbajului C:

• constante numerice întregi și reale: 14, -80, 3.14, -8.25, 1e+2, 314e-2, etc.

• constante de tip caracter și șir de caractere: ”a”, ”\n”, ”Ana are mere”, ’Cici’, ’Mimi’, etc.

• constante de tip bool: false și true.

Definirea constantelor de către utilizator, în sensul că prin anumiți identificatori putem

folosi valori constante, se face cu ajutorul funcției define. Forma generală a acesteia este: define(”nume constanta”, valoare);

Variabile

În PHP identificatorii rezervați variabilelor încep cu caracterul ”$”. În continuare, respectă aceleași specificații din C, deci imediat după caracterul $ trebuie să fie o literă sau liniuța de subliniere (”_”), iar în rest pot fi folosite și cifrele. Spre deosebire de C, variabilele nu se declară la început, ci tipul lor este definit atunci când sunt folosite. Mai mult, își pot schimba tipul în funcție de valoarea pe care o rețin. În PHP este posibilă și adresarea indirectă. Acest lucru înseamnă că, dacă o variabilă conține o expresie de tip string în care este reținut numele unei variabile, putem afișa direct valoarea variabilei reținută de string. Pentru aceasta se va folosi încă o dată caracterul $ (de forma $$x

Operatori

Mulți dintre operatorii limbajului PHP sunt cunoscuți din C++. Vom prezenta doar anumite particularități specifice limbajului PHP, în ordine descrescătoare a priorităților lor:

1. ! , ++ , – , (int) , (double) , (string) ;

2. * , % , / ;

3. < , <= , > , >= ;

4. == , != , === , !== ;

5. & ;

6. ^ ;

7. && ;

8. ?: ;

9. = , += , -= , /= , *= , %= , &= , |= , ^= ;

10. And ;

11. Xor ;

12. Or ;

13. , ;

Afișarea datelor

După cum am văzut deja, una dintre cele mai folosite instrucțiuni de afișare în PHP este echo. Are două forme:

a) data afișată se scrie între paranteze rotunde (această formă nu poate fi folosită pentru afișarea mai multor date): echo(”Ana are mere”);

b) datele afișate sunt scrise după echo, fără a fi grupate între paranteze și separate prin virgule: echo ”Ana are ”, 1+2, ”mere”;

O altă instrucțiune de afișare este print. După ea urmează o singură dată, care poate fi sau

nu pusă între paranteze. Funcționează ca și echo, în plus, în cazul în care folosim forma cu paranteze, va întoarce valoarea true dacă afișarea a fost făcută cu succes, respectiv false în caz contrar.

Observații:

După cum am văzut deja prin exemplele date, în loc de ghilimele, se pot folosi și apostrofuri. Diferența este dată de faptul că, în cazul folosirii ghilimelelor, dacă șirul de caractere conține numele unor variabile, acestea vor fi evaluate, deci se va afișa conținutul lor, pe când în cazul apostrofurilor se va afișa numele variabilei ca atare. Nu putem folosi ghilimele incluse în cadrul altei perechi de ghilimele, și nici apostrofuri incluse între alte perechi de apostrofuri, în schimb, putem include ghilimele într-un șir delimitat de apostrofuri sau apostrofuri într-un șir delimitat de ghilimele.

3.5. Instrucțiuni ale limbajului PHP.

Instrucțiunile PHP sunt asemănătoare cu cele din C:

expresie

bloc (se mai numește și compusă)

if

while

do…while

for

Transmiterea datelor prin intermediul formularelor.

Formularele reprezintă un mecanism prin care se pot trimite date către serverul HTML. Aceste date pot fi preluate de către script-urile PHP și în continuare folosite în cadrul programelor. Să nu uităm că formularele sunt elemente HTML. Atributul action al tag-ului form se referă la numele fișierului PHP care se va ocupa de prelucrarea datelor iar atributul method de metoda prin care sunt trimise datele către server. Tag-ul <input type=”text”…> creează un câmp de date de tip text. Atributul name al acestuia specifică un identificator prin care PHP-ul va prelua valoarea din acesta. Tag-ul <input type=”submit”…> creează un buton de trimitere a datelor. Practic, apăsarea pe acest buton permite trimiterea conținutului întregului formular către server. Preluarea datelor trimise către server prin intermediul metodei POST, în cadrul unui script PHP se face prin intermediul vectorului predefinit $_POST[’nume_câmp_din_formular’]. Atenție la faptul că $_POST trebuie scris cu majuscule !. De exemplu, în cazul nostru, putem recupera această valoare prin intermediul lui $_POST[’a’]. Analog, dacă datele ar fi trimise către server prin intermediul metodei GET în cadrul script-ului PHP asociat, preluarea lor se face prin intermediul vectorului predefinit $_GET[’nume_câmp_formular]. În cazul în care un anumit câmp nu există, în momentul cererii $_POST[…] din cadrul PHP-ului, acesta s-ar putea sa genereze un mesaj de tip atenționare (warning) în funcție de setări. Pentru a evita acest lucru, în fața caracterului $ (de la $_POST[…]) punem caracterul @. Semnificația acestuia este de a ignora mesajele de tip warning.

În continuare, vom prezenta modul în care se preiau datele din toate tipurile de elemente care pot să apară într-un formular obișnuit:

– în cazul unui input de tip text, am văzut deja cum se face acest lucru. În exact același mod se preiau datele dintr-un input de tip password, de tip hidden sau de tip textarea.

– în cazul unui input de tip submit, valoarea sepoate prelua doar în cazul în care, în cadrul tagului <input type=”submit”…> apare și atributul name.

– în cazul unui control de tip radio, la atributul value trebuiesc valori diferite, prin care vom identifica opțiunea aleasă. Această valoare va fi trimisă către PHP.

– în cazul unui control de tip checkbox, fiecare control de acest tip are un nume separat. Dacă este bifat, va trimite către PHP valoarea indicată în atributul value a tag-ului <input type=”checkbox”…> (ca șir de caractere). Dacă acest atribut nu este prezent, valoarea trimisă către PHP va fi șirul de caractere „on”.

– în cazul unui control de tip select simplu, PHP-ul va putea recupera valoarea cu ajutorul numelui stabilit în atributul name al tag-ului <select >

– în cazul unui control de tip select multiplu, form-ul va trimite către PHP un șir în care vom regăsi valorile selectate. Atributul name din cadrul tag-ului <select multiple …> specifică faptul că se va trimite un șir punând un set de paranteze pătrate după numele câmpului, deci de forma name=”nume_sir[]”. Preluarea în PHP se face în mod normal, prin @variabila=@$_POST[’nume_sir’] (remarcați faptul că nu se mai pun []). Acest șir va conține pe post de elemente valorile stabilite prin atributul value ale opțiunilor selectate. Șirul va începe de la indicele 0, numărul său total de elemente fiind dat de funcția count(nume_șir).

Bibliografie

Bibliografia va fi ordonată alfabetic dupa eticheta fiecărei element (de ex. DOOM05 în lista de mai jos este o etichetă). Etichetele materialelor consultate vor fi formatate folosind:

primele litere ale primului autor urmate de cele două cifre semnificative ale anului apariției materialului, sau

dintr-un acronim popular al lucrării respective, urmat din nou de cele două cifre semnificative ale anului apariției.

[DOOM05] – Dicționarul ortografic, ortoepic și morfologic al limbii române, Editura Univers Enciclopedic, București, 2005

Referințe web

Recomandăm și aici respectarea regulilor enunțate pentru secțiunea .

[Alm08] – Pedro de Almeida, Patrik Fuhrer, Documentation Guidelines for Diploma and Master Thesis, Universitatea din Fribourg, Elveția, 2008, disponibil on-line la adresa http://diuf.unifr.ch/drupal/softeng/teaching/guidelines

[Olt07] – Th. Olteanu, C. Albu, Ghid pentru redactarea lucrării de diplomă sau a disertației de masterat, Universitatea Română de Arte și Științe „Gheorghe Cristea”, 2007, disponibil via web la adresa http://www.ugc.ro/tpl/GHID REDACTARE DIPLOMA LICENTA.pdf

Codul sursă

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Hotel Lex</title>

</head>

<frameset rows="100,40,*" cols="*" framespacing="0" frameborder="no" border="0" bordercolor="#999999">

<frame src="bgtop.html" name="topFrame" frameborder="no" scrolling="no" marginheight="0" bordercolor="#999999" id="topFrame" title="topFrame" />

<frame src="menu.html" id="menu" frameborder="no" scrolling="no" marginheight="0" bordercolor="#999999" title="menu" />

<frame src="acasa.html" name="mainFrame" frameborder="no" scrolling="yes" marginwidth="0" marginheight="0" bordercolor="#999999" id="mainFrame" title="mainFrame" />

</frameset>

<noframes><body>

</body></noframes>

</html>

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Menu</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

<style>

body {

background-image:url(img/menu1.jpg);

}

</style>

</head>

<body>

<div align="center" class="padMenu">

<a class="button" href='Acasa.html' target="mainFrame" > Acasa</a>

<a class="button" href='Cazare.html' target="mainFrame" > Cazare</a>

<a class="button" href='Evenimente.html' target="mainFrame" > Evenimente</a>

<a class="button" href='Conferinte.html' target="mainFrame" > Conferinte</a>

<a class="button" href='Spa and Fitness.html' target="mainFrame" > Spa and Fitness</a>

<a class="button" href='Galerie.html' target="mainFrame" > Galerie</a>

<a class="button" href='Rezervari.html' target="mainFrame" > Rezervari</a>

<a class="button" href='Contact.html' target="mainFrame" > Contact</a>

</div>

</body>

</html>

bgtop.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Hotel</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

<style type="text/css">

body {

background-image:url(img/bg1.jpg);

background-repeat:no-repeat;

background-size:100% 100px;

}

</style>

</head>

<body>

<a href="acasa.html" target="mainFrame"> <img src="img/logo.png" class="logo" /></a>

<img src="img/sigla.png" class="sigla">

<div class='tel'>

Telefon de contact :</br>

+40 (0) 351 462451

</div>

</body>

</html>

acasa.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Acasa</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

<!– add to the <head> of your page –>

<link rel="stylesheet" type="text/css" href="engine1/style.css" />

<script type="text/javascript" src="engine1/jquery.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script>

$(document).ready(function () {

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('.scrollup').fadeIn();

} else {

$('.scrollup').fadeOut();

}

});

$('.scrollup').click(function () {

$("html, body").animate({

scrollTop: 0

}, 600);

return false;

});

});

void(parent.document.title='Acasa');

</script>

</head>

<body class="bg">

<a href="#" class="scrollup">Scroll</a>

<div id="divWrapper"> <!– Wrapper –>

<br>

<!– Start Slider–>

<div id="wowslider-container1">

<div class="ws_images"><ul>

<li><img src="data1/images/acasa1.jpg" alt="" title="" id="wows1_0"/></li>

<li><img src="data1/images/acasa2.jpg" alt="" title="" id="wows1_1"/></li>

<li><img src="data1/images/acasa3.jpg" alt="" title="" id="wows1_2"/></li>

<li><img src="data1/images/acasa4.jpg" alt="" title="" id="wows1_3"/></li>

<li><img src="data1/images/acasa5.jpg" alt="" title="" id="wows1_4"/></li>

<li><img src="data1/images/acasa6.jpg" alt="" title="" id="wows1_5"/></li>

<li><img src="data1/images/acasa7.jpg" alt="" title="" id="wows1_6"/></li>

<li><img src="data1/images/acasa8.jpg" alt="" title="" id="wows1_7"/></li>

</ul></div>

<div class="ws_bullets">

<div>

<a href="#" title="">1</a>

<a href="#" title="">2</a>

<a href="#" title="">3</a>

<a href="#" title="">4</a>

<a href="#" title="">5</a>

<a href="#" title="">6</a>

<a href="#" title="">7</a>

<a href="#" title="">8</a>

</div>

</div>

<div class="ws_shadow"></div>

</div>

<script type="text/javascript" src="engine1/wowslider.js"></script>

<script type="text/javascript" src="engine1/script.js"></script>

<!– End Slider –>

<p>&nbsp;</p>

<div class='title'>

Acasa

</div>

<p>Bine ati venit</p>

<p>Hotel Lex …eleganta si rafinament!</p>

<p>Hotelul Lex din Craiova este o locatie de renume care va permite accesul in toate zonele importante ale orasului in cel mai scurt timp. Inca de la receptie, hotelul isi intampina oaspetii intr-un ambient modern si intr-o atmosfera calda si primitoare.

</p>

<p>Hotel Lex este o gazda primitoare, o adevarata casa pentru toti oaspetii sai, situat pe bulevardul principal, langa statia Omv si Hypermarket Real, are un stil modern si elegant, luminos, confortabil si este dotat cu toate facilitatile corespunzatoare unui hotel de patru stele ceea ce face din orice sejur, unul perfect, de neuitat.

</p>

<p>

Oferim cazare si servicii hoteliere de cea mai buna calitate prin intermediul celor 65 de camere. Proiectat intr-o maniera arhitecturala moderna, hotelul are un design interior ce se evidentiaza prin eleganta si rafinament. De asemenea, hotelul detine parcare privata, pusa la dispozitie gratuit ceea ce reprezinta un element suplimentar de siguranta pentru cei ce calatoresc cu masina.

</p>

</div> <!– Wrapper –>

<!– Ads START –>

<img class="ads" src='img/ads.jpg'>

<!– ADS END –>

</body>

</html>

cazare.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Cazare</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

<!– add to the <head> of your page –>

<link rel="stylesheet" type="text/css" href="engine1/style.css" />

<script type="text/javascript" src="engine1/jquery.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script>

$(document).ready(function () {

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('.scrollup').fadeIn();

} else {

$('.scrollup').fadeOut();

}

});

$('.scrollup').click(function () {

$("html, body").animate({

scrollTop: 0

}, 600);

return false;

});

});

void(parent.document.title='Cazare');

</script>

</head>

<body class="bg">

<a href="#" class="scrollup">Scroll</a>

<div id="divWrapper"> <!– Wrapper –>

<p>&nbsp;</p>

<div class='title'>

Apartament

</div>

<div class="parent">

<div class="img"><a href='single.html'target="mainFrame"><img src="camere\data1\images\single1.png" /></a></div>

<div class="text">

<p><a href='single.html'>Camera Single</a></p>

Camera rafinata cu mobilier din lemn de cireș, conceputa și dedicata în principal oamenilor de afaceri care au nevoie de tehnologie, confort și confidențialitate dar si turistilor atrasi de farmecul orasului.</div>

</div>

<div class="parent">

<div class="img"><a href='double.html'target="mainFrame"><img src="camere\data1\images\double1.png" /></a></div>

<div class="text">

<p><a href='double.html'>Camera Double</a></p>

Double Rooms la Hotel Lex inseamna camere spatioase si luminoase, cu un design modern si dotari adaptate stilului business. Camerele au fost special concepute pentru a oferi un maxim de confort si buna dispozitie, indiferent de durata sederii. </div>

</div>

<div class="parent">

<div class="img"><a href='apartament.html'target="mainFrame"><img src="camere\data1\images\ap1.png" /></a></div>

<div class="text">

<p><a href='apartament.html'>Apartament</a></p>

Sunt o îmbinare de eleganță și lux, în care este imposibil să nu te simți în largul tău. Atât pentru muncă, cât și pentru plăcere, Apartamentele vă pot oferi întreaga comoditate ca la dvs. acasă.</div>

</div>

</div> <!– Wrapper –>

<!– Ads START –>

<img class="ads" src='img/ads.jpg'>

<!– ADS END –>

</body>

</html>

apartament.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Apartament</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

<!– add to the <head> of your page –>

<link rel="stylesheet" type="text/css" href="camere/engine1/style.css" />

<script type="text/javascript" src="camere/engine1/jquery.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script>

$(document).ready(function () {

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('.scrollup').fadeIn();

} else {

$('.scrollup').fadeOut();

}

});

$('.scrollup').click(function () {

$("html, body").animate({

scrollTop: 0

}, 600);

return false;

});

});

void(parent.document.title='Apartament');

</script>

</head>

<body class="bg">

<a href="#" class="scrollup">Scroll</a>

<div id="divWrapper"> <!– Wrapper –>

<p>&nbsp;</p>

<div class='title'>

Apartament

</div>

<!– Start Slider –>

<div id="wowslider-container1">

<div class="ws_images"><ul>

<li><img src="camere/data1/images/ap1.png" alt="" title="" id="wows1_0"/></li>

<li><img src="camere/data1/images/ap2.png" alt="" title="" id="wows1_1"/></li>

<li><img src="camere/data1/images/ap3.png" alt="" title="" id="wows1_2"/></li>

<li><img src="camere/data1/images/ap4.png" alt="" title="" id="wows1_3"/></li>

</ul></div>

<div class="ws_thumbs">

<div>

<a href="#" title=""><img src="camere/data1/tooltips/ap1.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/ap2.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/ap3.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/ap4.png" alt="" /></a>

</div>

</div>

<div class="ws_shadow"></div>

</div>

<script type="text/javascript" src="camere/engine1/wowslider.js"></script>

<script type="text/javascript" src="camere/engine1/script.js"></script>

<!– End Slider –>

<p>Sunt o îmbinare de eleganță și lux, în care este imposibil să nu te simți în largul tău. Atât pentru muncă, cât și pentru plăcere, Apartamentele vă pot oferi întreaga comoditate ca la dvs. acasă. Finisate cu tonuri calde și detalii prețioase in cele mai mici detalii apartamentele garantează o abordare a luxului tipic italian.

</p>

<div class="table">

<p class='facil'> Dotari in camera</p>

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td width="253" align="left" valign="top" scope="row"><ul>

<li>Telefoane multiline</li>

<li>Sistem de climtizare a camerei</li>

<li>Produse cosmetice</li>

<li>Seif de valori in camera</li>

</ul></td>

<td width="240" align="left" valign="top"><ul>

<li>TV LCD – satelit international</li>

<li>Minibar</li>

<li>Uscator de par</li>

<li>Birou de lucru</li>

</ul></td>

<td width="307" align="left" valign="top"><ul>

<li>Internet gratuit Wi Fi</li>

<li>Baie cu cada/cabina de dus</li>

<li>Halat de baie si papuci unica flosinta</li>

<li>Room Service</li>

</ul></td>

</tr>

</table>

</div>

<div class='table'>

<p class='facil'> Servicii gratuite</p>

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td width="200" align="left" valign="top" scope="row"><ul>

<li>Parcare privata 60 locuri</li>

<li>Comenzi Taxi</li>

<li>Trezirea clientilor</li>

</ul></td>

<td width="279" align="left" valign="top"><ul>

<li>Informare turistica – Receptie</li>

<li>Servicii de corespondenta turisti</li>

<li>Pastrarea obiectelor uitate si anuntarea clientilor</li>

</ul></td>

<td width="321" align="left" valign="top"><ul>

<li>Spatiu de depozitare pentru bagaje</li>

<li>Posibilitate de informare prin presa</li>

<li>Pastrarea obiectelor de valoare la Receptie</li>

</ul></td>

</tr>

</table>

</div>

<div class='padc'>

<a href='single.html'target="mainFrame"><img src="camere\data1\images\single_link.jpg" width='200' height='auto'/></a>

<a href='double.html'target="mainFrame"><img src="camere\data1\images\double_link.jpg" width='200' height='auto' align='right' /></a>

</div>

</div> <!– Wrapper –>

<!– Ads START –>

<img class="ads" src='img/ads.jpg'>

<!– ADS END –>

</body>

</html>

evenimente.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Evenimente</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

<!– add to the <head> of your page –>

<link rel="stylesheet" type="text/css" href="camere/engine1/style.css" />

<script type="text/javascript" src="camere/engine1/jquery.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script>

$(document).ready(function () {

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('.scrollup').fadeIn();

} else {

$('.scrollup').fadeOut();

}

});

$('.scrollup').click(function () {

$("html, body").animate({

scrollTop: 0

}, 600);

return false;

});

});

void(parent.document.title='Evenimente');

</script>

</head>

<body class="bg">

<a href="#" class="scrollup">Scroll</a>

<div id="divWrapper"> <!– Wrapper –>

<p>&nbsp;</p>

<div class='title'>

Evenimente

</div>

<!– Start Slider –>

<div id="wowslider-container1">

<div class="ws_images"><ul>

<li><img src="camere/data1/images/res1.png" alt="" title="" id="wows1_0"/></li>

<li><img src="camere/data1/images/res2.png" alt="" title="" id="wows1_1"/></li>

<li><img src="camere/data1/images/res3.png" alt="" title="" id="wows1_2"/></li>

<li><img src="camere/data1/images/res4.png" alt="" title="" id="wows1_3"/></li>

<li><img src="camere/data1/images/res5.png" alt="" title="" id="wows1_4"/></li>

<li><img src="camere/data1/images/res6.png" alt="" title="" id="wows1_5"/></li>

<li><img src="camere/data1/images/res7.png" alt="" title="" id="wows1_6"/></li>

<li><img src="camere/data1/images/res8.png" alt="" title="" id="wows1_7"/></li>

<li><img src="camere/data1/images/res9.png" alt="" title="" id="wows1_8"/></li>

<li><img src="camere/data1/images/res10.png" alt="" title="" id="wows1_9"/></li>

</ul></div>

<div class="ws_thumbs">

<div>

<a href="#" title=""><img src="camere/data1/tooltips/res1.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res2.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res3.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res4.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res5.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res6.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res7.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res8.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res9.png" alt="" /></a>

<a href="#" title=""><img src="camere/data1/tooltips/res10.png" alt="" /></a>

</div>

</div>

<div class="ws_shadow"></div>

</div>

<script type="text/javascript" src="camere/engine1/wowslider.js"></script>

<script type="text/javascript" src="camere/engine1/script.js"></script>

<!– End Slider –>

<p>Eleganta, calitate, profesionalism, iata doar cateva cuvinte care definesc restaurantul hotelului nostru.</p>

<p>Restaurantul Lex cuprinde doua sali destinate evenimentelor importante din viata dumneavoastra, cu o capacitate de 200 respectiv 300 de locuri, ring de dans mare pe mijloc, spatiu destinat orchestrei, garderoba, bar si bucatarie complet utilate, grupuri sanitare, instalatie de filtrare si conditionare a aerului, cu aport de aer proaspat.</p>

<img align='right' src="img/home.png" />

<p>Restaurantele hotelului Lex sunt locatii de evenimente care se remarca prin servicii de calitate, printr-un design deosebit si care ofera eleganta specifica evenimentelor importante ce au loc in viata dumneavoastra.Imbinam arta culinara cu serviciile de inalta calitate si ne mandrim cu priceperea bucatarilor nostri.</p>

<p>In cadrul restaurantului pot fi organizate evenimente precum:</p>

<ul style="list-style:none;">

<li>* Nunti</li>

<li>* Botezuri</li>

<li>* Aniversari</li>

<li>* Petreceri de firma</li>

<li>* Cursuri festive</li>

<li>* Business lunch</li>

<li>* O cina romantica sau o masa intre prieteni</li>

</ul>

</div> <!– Wrapper –>

<!– Ads START –>

<img class="ads" src='img/ads.jpg'>

<!– ADS END –>

</body>

</html>

style1.css

.sigla {

margin-left:21%;

max-width:auto;

max-height:100px;}

.logo {

float:left;

margin-top:-0.6%;

margin-left:5%;

max-width:auto;

max-height:100px;}

.tel {

float:right;

margin-top:100px;

margin-right:100px;

color:white;

}

/* Top Buttons set START*/

.button {

background: #2d3133;

background: -webkit-gradient(linear, left top, left bottom, from(#b6bad4), to(#2d3133));

background: -webkit-linear-gradient(top, #b6bad4, #2d3133);

background: -moz-linear-gradient(top, #B41616, #180707);

background: -ms-linear-gradient(top, #b6bad4, #2d3133);

background: -o-linear-gradient(top, #b6bad4, #2d3133);

padding: 2px 15px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

text-shadow: rgba(0,0,0,.4) 0 1px 0;

color: white;

font-size: 18px;

font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;

text-decoration: none;

vertical-align: middle;

-webkit-user-select: none;

-moz-user-select: none;

-o-user-select: none;

}

.button:hover {

border-top-color: #403f3e;

background: #403f3e;

color: #bf4e3f;

}

.button:active {

border-top-color: #6b6e6b;

background: #6b6e6b;

}

/* Top Buttons set END*/

/* Bottom Buttons set sTART*/

.button2 {

padding: 6px 15px;

text-shadow: rgba(0,0,0,.4) 0 1px 0;

color: grey;

font-size: 18px;

font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;

text-decoration: none;

vertical-align: middle;

-webkit-user-select: none;

-moz-user-select: none;

-o-user-select: none;

}

.button2:hover {

color: #bf4e3f;

}

.button2:active {

border-top-color: #6b6e6b;

}

/* Bottom Buttons set END*/

.padMenu {

margin-left: auto;

margin-right: auto;

padding-top:8px;

width: 70%;

}

.padc {

padding:20px;

padding-bottom:50px;

}

.padd {

padding-top:6px;

}

.pade {

padding-top:18px;

}

.scrollup {

width: 40px;

height: 40px;

opacity: 0.5;

position: fixed;

bottom: 50px;

right: 55px;

display: none;

text-indent: -9999px;

background: url('img/top.png') no-repeat;

}

#divWrapper {

width: 80%;

margin: 30px auto;

background-color:white;

padding:0px 20px 20px 20px;

}

div.parent{

display:table;

padding:20px;

position:relative;

width:95%;

margin:10px 10px 30px 0px; /* you can change/remove margin */

}

div.text{

vertical-align:middle;

display:table-cell;

text-align:justify;

}

div.parent .img{

vertical-align:middle;

display:table-cell;

padding-right:20px;

width:300px; /* you can change width */

}

div.img img{

width:100%;

height:auto; /* you can change height */

vertical-align:middle;

}

div.table {

background-image:url("img/tablebg.jpg");

margin: 50px 50px;

}

p. {

font-family:"Palatino Linotype", Georgia, Helvetica, Arial, sans-serif;

}

p.facil {

font-family:"Palatino Linotype", Georgia, Helvetica, Arial, sans-serif;

font-size:24px;

font-weight:bold;

font-style:italic;

color:white;

margin-left:20px;

}

.bg {

background-image:url("img/mainbg1.jpg");

margin-right:40px;

margin-left:40px;

}

.title {

text-align: center;

background-image:url("img/titlebg.jpg");

color: white;

height: 100px;

width: auto;

padding: 0;

margin: 0;

line-height: 100px;

font-size:50px;

}

.ads { width: 90%;

margin: 5px 5% 5px 5%;

}

.padAds {

padding-top:10px;

width: 100%;

}

Site-ul web al proiectului

Autorul prezintă în această anexă (opțională) site-ul web asociat proiectului său.

CD / DVD

Autorul atașează în această anexă obligatorie, versiunea electronică a aplicației, a acestei lucrări, precum și prezentarea finală a tezei.

Bibliografie

Bibliografia va fi ordonată alfabetic dupa eticheta fiecărei element (de ex. DOOM05 în lista de mai jos este o etichetă). Etichetele materialelor consultate vor fi formatate folosind:

primele litere ale primului autor urmate de cele două cifre semnificative ale anului apariției materialului, sau

dintr-un acronim popular al lucrării respective, urmat din nou de cele două cifre semnificative ale anului apariției.

[DOOM05] – Dicționarul ortografic, ortoepic și morfologic al limbii române, Editura Univers Enciclopedic, București, 2005

Referințe web

Recomandăm și aici respectarea regulilor enunțate pentru secțiunea 5.

[Alm08] – Pedro de Almeida, Patrik Fuhrer, Documentation Guidelines for Diploma and Master Thesis, Universitatea din Fribourg, Elveția, 2008, disponibil on-line la adresa http://diuf.unifr.ch/drupal/softeng/teaching/guidelines

[Olt07] – Th. Olteanu, C. Albu, Ghid pentru redactarea lucrării de diplomă sau a disertației de masterat, Universitatea Română de Arte și Științe „Gheorghe Cristea”, 2007, disponibil via web la adresa http://www.ugc.ro/tpl/GHID REDACTARE DIPLOMA LICENTA.pdf

Similar Posts