PROGRAMUL DE STUDII: TEHNOLOGII INFORMATICE PENTRU AFACERI [303617]

[anonimizat]: ȘTIINȚE ECONOMICE

DEPARTAMENTUL: CIF

PROGRAMUL DE STUDII: TEHNOLOGII INFORMATICE PENTRU AFACERI

PROIECT LA

CERCETARE STIINTIFICA PENTRU ELABORAREA LUCRARII DE DISERTATIE

PLOIEȘTI

2019

INTRODUCERE

“Viitorul este suma pașilor pe care-i faceți, inclusiv a [anonimizat].”

Henri Coandă

Lucrarea de disertație se intitulează „[anonimizat]-ului pentru o companie” [anonimizat] o pagină Web.

Scopul proiectului stabilit în colaborare cu profesorul coordonator Dumitru Ileana este realizarea unui site pentru o companie care să îndeplinească următoarele cerințe astfel:

ACCESIBILITATE

Este o [anonimizat].

Unele probleme de interacțiune pot fi remediate în funcție de caz.

Orice tip de afacere poate să sufere o [anonimizat].

[anonimizat], oftalmologice cărora le pot îngreuna navigarea pe site.

[anonimizat], [anonimizat] (exemplu: tablete, laptop-uri, telefoane, etc.).

Este o calitate ce joacă un rol important ca și accesibilitatea deoarece foarte mulți utilizatori ai Internetului folosesc o [anonimizat], iar imposibilitatea accesării unui site din pricina incompatibilității poate fi pentru orice afacere o mare problemă.

[anonimizat].

[anonimizat] 5 [anonimizat]-FI.

[anonimizat].

[anonimizat], real, [anonimizat].

Aceste 5 calități: accesibilitate, compatibilitate, performanță, ușurință de utilizare și actualizare sunt foarte importante în crearea unui site Web și sunt numite și piloni fundamentali.

Internetul a apărut în anul 1960 în forma ARPAnet (Advanced Research Projects Agency Net) cu obiectivul de a crea o rețea ce nu poate fi distrusă din cauza atacurilor asupra acestuia.

Internetul provine din limba engleză: interconnected = interconectat și network= rețea.

[anonimizat], spre exemplu: economisirea timpului și a banilor, [anonimizat], [anonimizat] a [anonimizat].

Noțiunea de „site Web” provine din limba engleză și înseamnă mai multe pagini Web ce conțin imagini, texte, animații accesibile în Internet care sunt conectate prin hiperlink-uri.

O pagină Web este documentul creat prin diverse limbaje de programare, de exemplu: PHP, MySQL, ASP, HTML (limbaj de marcare), prin care aceasta poate fi accesată de către utilizatori cu ajutorul protocolului HTTP, unde se transferă informațiile de la server către browser.

Rețeaua globală World-Wide-Web ( WWW sau Web) este accesibilă de pe orice calculator, la îndemnâna oricui și leagă între pagini Web ce conțin în format electronic surse de informare. De exemplu, text, imagine, transmisiuni live, film, animație, sunet.

Lucrarea de față are scopul principal de a prezenta etapele realizării unei pagini Web pentru o companie și este structurată în trei capitole. Primul capitol prezintă noțiunile teoretice preliminarii ale paginilor Web – limbajul HTML și anume, realizarea site-urilor Web, profitabil, dar și foarte satisfăcător pentru companie prin înalta calitate. Sunt explicate noțiunile precum Internet, DNS, intranet, extranet, servere Web, HTML.

Cel de-al doilea capitol prezintă noțiunile teoretice în practica aplicației realizată cu ajutorul editorului Notepad++, dar și prezentarea altor limbaje, precum HTML, XML, BOOTSTRAP, CSS și JavaScript. Mi-am propus o parcurgere mai amănunțită a limbajului HTML, descriind cele mai importante tag-uri.

Capitolul trei prezintă aplicația de realizare a unui Web-site pentru o companie cu profil economic. Vor fi aduse informații utile pentru clienți pentru obținerea profitabilității și prezentarea unor oferte rentabile de produse și servicii de înaltă calitate pentru a le satisface nevoile.

Nevoia de informare și de socializare într-o lume în care tehnologia a pus monopol pe întreaga populație este foarte esențială, mai ales pentru tineri.

Realizarea unui site Web poate fi considerat un succes cu ajutorul publicității, ce pune în evidență spiritul antreprenorial prin creativitate, popularitate, sociabilitate, perseverență, seriozitate și respect față de clienți.

Motivul alegerii acestei teme îl constituie dorința de a lucra în domeniul IT deoarece imi place ceea ce fac, se câștigă destul de bine și momentan, pe piață se caută foarte mulți Web-designeri, programatori, operatori. Scopul meu final este satisfacția.

Am abordat această temă deoarece consider că poate îndeplini scopul de bază al unei companii: crearea profitului. Pentru realizarea scopului propus, am proiectat o aplicație Web, ce permite clienților să se înregistreze, să facă cumpărături online, să se informeze în legătură cu produsele și serviciile companiei.

CAPITOLUL I. TEORETIZAREA NOȚIUNILOR UTILIZATE ÎN REALIZAREA DE PAGINI WEB

REALIZAREA DE SITE-URI ÎN HTML – NOȚIUNI DE BAZĂ

Etapele necesare realizării și lansării unui site Web sunt: alegerea numelui de domeniu, efectuarea propriu-zisă a site-ului Web, alegerea serviciului de găzduire a site-ului Web, mentenanța site-ului Web, promovarea site-ului Web.

Alegerea numelui de domeniu

Numele de domeniu nu reflectă o importanță la construirea succesului pe care un site Web îl poate avea, dar poate face diferența între un site de succes și un site anost. Se înregistrează cu numele de domeniu reprezentativ afacerii, să îl susțină și să îl promoveze, apoi ne axăm pe crearea unui conținut de calitate.

Sfaturi tehnice pentru evitarea unor greșeli specifice:

Nu înregistrăm un domeniu foarte lung.

Nu înregistrăm un domeniu ce conține o marcă înregistrată.

Nu înregistrăm un domeniu cu extensia altei țări.

Nu utilizăm foarte multe liniuțe.

Nu folosim prea multe cuvinte cheie.

Efectuarea propriu-zisă a site-ului Web

După cumpărarea numelui de domeniu, se creează un site Web pentru desfășurarea activității zilnice în funcție de publicul țintă, domeniul de activitate, nevoile pe care dorim să le acoperim cu ajutorul site-ului, resursele materiale și umane pe care suntem dispuși să le alocăm pentru viitorul site.

Alegerea serviciului de găzduire a site-ului Web

Pentru a face accesibil un site Web tuturor clienților, avem nevoie de un calculator conectat la Internet, să avem alocat un IP real și să știm să configurăm server-ul Web și site-ul, astfel încât să funcționeze corect și sigur. Spre exemplu: configurarea unui serviciu de e-mail, filtre antispam, soft specializat pentru servere Web, sistem de baze de date, sisteme de protecție împotriva atacurilor informatice.

Serviciul de găzduire asigură spațiul fizic sau necesar exprimat in GB, unde vor fi stocate toate fișierele disponibile pe site-ul Web. De exemplu, spațiul necesar pentru: fișiere video, imagini, text.

Acest spațiu de stocare este disponibil pe un anumit server Web, unde va fi instalată și platforma de publicare precum și tema care asigură design-ul site-ului.

Server-ul Web nu se cumpără, ci se închiriază. Serviciul de găzduire trebuie să asigure un timp de răspuns foarte bun, o funcționare ireproșabilă a site-ului și o perioadă de timp foarte bună, de cel puțin 99,9%.

Compania de găzduire Web trebuie să țină cont de calitatea serviciului; în cazul unor probleme, aceasta să asigure un suport tehnic adecvat și să răspundă prompt solicitărilor care vin din partea clienților.

Mentenanța site-ului Web

Mentenanța reprezintă acțiunea periodică de actualizare și întreținere a conținutului unui site web.

Mentenanța este cea care ajută publicul țintă să revină în mod periodic pe site în cazul modificărilor intervenite la datele de contact ale companiei sau afișarea unor informații utile și la zi, disponibile pentru utilizatori.

Există două tipuri de pagini Web: statice și dinamice. O pagină Web statică va fi modificată doar atunci când se modifică cu ajutorul unui editor de texte sau un program specializat în editarea paginilor Web, codul sau sursa HTML, pe când site-urile dinamice pot conține pagini ce poate fi actualizat online folosind editoare de texte specializate.

Promovarea site-ului Web

Pentru ca site-ul realizat să aibă succes trebuie să avem vizitatori care să se informeze cu privire la produsele și serviciile companiei, să achiziționeze, să intre în contact, să se aboneze la newsletter. Această etapă este realizată cu ajutorul serviciului de optimizare a site-urilor și de îmbunătățire a poziției acestora în lista de rezultate a motoarelor de căutare (SEO – search engine optimization).

Optimizarea site-urilor reprezintă un proces prin care îmbunătățește cantitatea și calitatea traficului pe un site Web generat printr-un proces normal de căutare în motoarele de căutare. Spre exemplu, în lista cu rezultatele căutării, cu cât un site are mai mulți vizitatori, cu atât mai mult va fi regăsit mai sus. Acest proces se mai numește și indexarea site-urilor și poate clasifica căutarea după imagini, căutări delimitate geografic.

Procesul SEO este o strategie de marketing.

Figura 1.1. – Procesul SEO

Numele de domeniu:

Pentru a ajunge la pagina unui site trebuie să cunoaștem adresa unde se află pagina Web, mai exact URL-ul paginii Web respective. URL-ul nu este același lucru cu numele de domeniu. Atunci când navigăm pe Internet, browser-ul Web nu afișează adresa paginii pe care o accesăm (URL).

Aceasta este o expresie de forma:

http://www.nume_de_domeniu.ro/director/nume_de_pagină.ext unde vom revedea o înșiruire de elemente ce pot fi delimitate astfel:

http://www. – http:// și www. reprezintă modalitatea de acces la pagina respectivă. Browser-ului îi este indicată accesarea unei pagini Web cu ajutorul protocolului de comunicație HTTP (hyper-text-transfer-protocol).

nume_de_domeniu – nume_de_domeniu reprezintă adresa formată unic din litere, semne de punctuație și cifre care ajută la localizarea site-ului Web.

.ro – .ro reflectă apartenența numelui de domeniu la grupuri de resurse Web care au caracteristici comune. De exemplu, informațiile vor fi prezentate în limba română (.ro) sau prezentarea tipului de informații indiferent de limbă (exemplu: .com, .info, .eu, .org, .net).

director/nume_de_pagină.ext – Numele directorului și numele_de_pagină au legătură cu structura internă a site-ului, ce nu are importanță în legătură cu utilizatorii, ci cu motoarele de căutare.

Web-site-ul reprezintă o grupă de pagini Web ce conțin imagini, sunete, texte ce pot fi accesate de oricine care are acces la Internet și care sunt conectate între ele cu ajutorul hyperlink-urilor.

Un site Web este asociat cu o adresă vizibilă și utilizatorului, spre exemplu: www.se.upg-ploiesti.ro.

Pentru realizarea site-urilor Web s-a propus utilizarea limbajului de marcare a textului HTML (HyperText Markup Language) cu scopul prezentării informațiilor într-un format de tip paragraf, tabel, font, culoare.

Calculatorul accesează conținutul Web-site-ului ce poartă denumirea de “client”, iar cel pe care Web-site-ul este găsit reprezintă “server-ul”.

Pentru a putea vizualiza și interpreta fișierele de tip HTML, calculatorul client trebuie să utilizeze programul specializat, adică browser.

Pentru a răspunde cererilor unui browser de pe calculatorul client, pe server trebuie să se regăsească un program. Cererea efectuată de browser și răspunsul server-ului se realizează cu ajutorul unui protocol numit HTTP (HyperText Transfer Protocol).

Pagina gazdă (Home Page) reprezintă o pagină din site-ul unei organizații care în mod uzual reprezintă prima pagină accesată din site-ul respectiv.

Un server Web reprezintă un calculator care adăpostește un site Web și care capacitatea de a răspunde cererilor de pagini Web din partea clientului..

Site-urile Web și site-urile FTP sunt două tipuri de site-uri Internet. Site-urile Web reprezintă o mulțime organizată de pagini Web, pe când site-urile FTP reprezintă servicii configurabile ce oferă accesul la fișiere de tip: program, informație sau documentație cu ajutorul protocolului FTP.

Figura 1.2. Comunicația navigator Web – server Web

DEFINIREA NOȚIUNII DE NUME DOMENIU AL UNUI SITE WEB

Numele de domeniu oferă utilizatorului o metodă de acces la site-urile Web.

Numele de domeniu este ușor de folosit și de memorat de un operator uman datorită faptului că numele acestuia este format din semne de punctuație, cifre și litere. Numele de domeniu nu reprezintă nimic, iar pentru afișarea conținutului unui site Web, calculatorul necesită adresa IP care este formată dintr-un șir de numere.

Pentru traducerea numelui de domeniu într-o adresă IP se ocupă serverele DNS (Domain Name Service). Spre exemplu, de fiecare dată când noi accesăm o pagină Web pe Internet, calculatorul transmite cererea afișării paginii către un alt calculator, acesta transmite și el mai departe, până când la server-ul unde este găzduit site-ul Web ajunge cererea transmisă. Acest server caută pagina Web cerută și va fi transmisă înapoi prin lanțul de calculatoare.

SCURT ISTORIC AL APARIȚIEI ȘI FUNCȚIONĂRII INTERNETULUI – CONCEPTUL DE HYPERTEXT

În anul 1968 a început istoria Internetului, atunci când guvernul Statelor Unite ale Americii avea intenția de a interconecta toate universitățile, departamentele militare și de apărare ale acesteia, pentru a putea coopera în cadrul proiectelor de cercetare comune. În urma acesteia s-a creat o agenție numită ARPA (Advanced Research Projects Agency).

Nu era sigură metoda de stocare a informațiilor pe un calculator deoarece acesta putea fi un obiectiv vulnerabil a unui atac sau în urma unor defecțiuni tehnice primordiale, informațiile ar fi putut fi pierdute.

Cu ajutorul unei rețele, un procedeu evitabil a unei situații neprevăzute ar fi ca informațiile să fie copiate și distribuite pe mai multe computere în țară.

În anul 1973, ARPANET devine rețea internațională deoarece se conectează cu calculatoare din Norvegia și Anglia.

În anul 1975, s-au standardizat câteva protocoale, dar și limbaje folosite de calculatoare pentru comunicarea dintre ele.

Departamentele de apărare și cele mai importante universități din S.U.A. s-au unit printr-o rețea ce poartă denumirea DARPANET, unde protocolul cunoscut în momentul de față utilizat de calculatoare este denumit TCP/IP (Transmission Control Protocol / Internet Protocol).

În anul 1980, câteva dintre universități și colegii au avut acces la Internet, unde informațiile cu privire la programe, cercetări și știri au putut fi împărtășite. După 1990, rețeaua s-a dezvoltat considerabil.

În prezent, poți trimite în doar câteva secunde, indiferent de locație, scrisori electronice cu ajutorul Internetului.

Termeni înrudiți cu Internetul:

Intranet = utilizarea rețelei de calculatoare a unei companii ca și gazdă pentru majoritatea sau chiar totalitatea aplicațiilor utilizate în companie. Respectivele aplicații sunt proiectate să poată interacționa și pot fi accesate dintr-o interfață comună care este uzual un portal Web.

Extranet = asemănător cu Intranetul, exceptând faptul că procesul la Extranet este posibil și din exterior pentru persoane care au legătură cu activitatea companiei (clienții).

Accesul la Internet se poate face prin diferite metode:

Linie de telefon fixă: Utilizatorul numește programul specific de comunicație, care se va conecta la modem. Modemul reprezintă componenta calculatorului care convertește semnalele digitale în semnale analogice. În urma contactării unui furnizor de servicii Internet, datele vor fi transferate punctului de livrare (Point of Presence – POP) al furnizorului de servicii, unde vor fi transferate în rețeaua regională de Internet al ISP-ului din sistemul telefonic.

Router sau modem ADSL care este conectat la rețeaua de telefonie fixă sau de ADSL: Din computerul local, legătura placă de rețea – ruter se face astfel:

Prin fir

Wireless

Controler de comunicații dedicat

Conexiune prin cablu: Față de modem, viteza este mult mai mare și este eliminat și costul abonamentului la telefonie. Firma care oferă adrese Internet ce furnizează o adresă IP poartă denumirea de provider. Fiecare calculator va primi și o adresă logică construită ierarhic pe domenii și subdomenii pe lângă cea IP. Pentru conectarea mai multor calculatoare vom folosi echipamentul numit switch.

Rețea de cablu TV

Rețeaua de calculatoare reflectă ansamblul de calculatoare care prin intermediul canalelor de comunicație pot comunica.

Expresia” www” ( World Wide Web) reprezintă cea mai importantă și de succes serviciu al Internetului constituit în 1989 la CERN (Centrul European de Cercetări Nucleare de la Geneva), formată din servere pe care sunt găzduite documente ce poartă denumirea de pagini Web. Această expresie este o metodă de acces la informațiile stocate pe un calculator aflat oriunde în lume și utilizează tehnologia client-server care constă în:

Un client (calculator) formulează o cerere.

Cererea este expediată unui server.

Cererea parcurge un mediu până la server.

Server-ul analizează cererea, o execută, formulează răspunsul și expediază clientului.

Răspunsul parcurge mediul înapoi către client, iar acesta recepționează răspunsul cererii solicitate.

Conceptul World Wide Web este reprezentat de comunicare pe care orice rețea de calculatoare se bazează. WWW reprezintă sistemul de documente și informații de tip hypertext cu legături între ele, ce pot fi accesate cu ajutorul rețelei mondiale de Internet.

AVANTAJELE UTILIZĂRII SERVICIULUI WWW

Paginile Web au următoarele caracteristici:

Sunt multimedia, mai exact, paginile Web conțin informații de tip text, imagini, sunete, filme.

Sunt interactive, de unde rezultă răspunsul la cererile utilizatorului.

Sunt independente de platforma hardware și software, în sensul că paginile Web vor fi vizualizate la fel de pe orice calculator indiferent de sistemul de operare și de browser-ul instalat.

Cu ajutorul unui browser ce descarcă pagini Web de pe un server Web pe un terminal, hypertextul este prelucrat.

Hypertextul reprezintă un document în formă electronică, datele fiind memorate în rețea de noduri și legături, unde accesarea se face cu ajutorul programelor de navigare interactivă.

Conceptul de bază este “legătură” de tip link ce permite informațiilor să nu fie organizate liniar. Utilizatorii trebuie să utilizeze un program client numit navigator (exemple: Mozilla Firefox, Internet Explorer, Netscape Communicator, Opera) pentru a putea accesa www.

Caracteristicile navigatoarelor Web grafice sunt:

Realizarea interogărilor multiple către servere Web;

Asigurarea securității în cazul transmiterii datelor;

Suport pentru diverse aplicații ce ajută la extinderea funcționalității navigatorului;

Posibilitatea accesării istoricului navigării și stabilirea unor liste de adrese favorite;

Posibilitatea de utilizare a mai multor ferestre de navigare;

Suport pentru frame-uri (cadre) în cadrul aceleiași ferestre;

Posibilitatea stabilirii preferințelor utilizatorului de a configura caracteristicile privind modul de afișare, exploatare, navigare;

Asigurarea suportului în cazul limbajelor de programare utilizate în crearea documentelor Web.

Modul de interacționare client-server se realizează cu ajutorul unor reguli de comunicare prin rețea ce poartă denumirea de protocol.

HTTP (HyperText Transfer Protocol) este protocolul bazat pe stiva de protocoale TCP/IP și a fost utilizat în anul 1990 unde s-a dezvoltat alături de spațiul WWW.

Standardul care s-a impus cu privire la Internet este protocolul TCP/IP. Un calculator conectat la Internet are o adresă IP (Internet Protocol Address) care este formată din 4 numere cuprinse între 0 și 255, de unde rezultă că o adresă IP ocupă 4 octeți.

Protocolul IP (Internet Protocol) stabilește ca datele să fie transmise de la o adresă IP la alta, datele fiind transmise divizat în pachete pentru evitarea monopolizării transmisiei doar de un utilizator în rețea.

Protocolul TCP (Transmission Control Protocol): informația ce trebuie transmisă este împărțită în mai multe pachete IP de către un program TCP, acestea fiind transmise cu ajutorul rețelei la destinație. Ajunse la destinație, asamblarea și aranjarea într-o ordine a pachetelor de date IP primite se realizează de către un alt program. O problemă hardware poate pierde pachetele pe drum. Protocolul TCP al expeditorului, în momentul împachetării datelor într-un plic “IP”, adaugă un număr ce poartă denumirea de sumă de control, ce permite destinatarului asigurarea corectă a datelor primite. Suma de control este recalculată de receptor și comparată cu cea transmisă de către emițător. Dacă protocolul TCP cere anularea și retransmiterea pachetului respectiv înseamnă că a avut loc o eroare în timpul transmisiei.

Pentru oferirea unor funcționalități suplimentare, spre exemplu suportul pentru identificatorii uniformi de resurse – URI (Uniform Resource Identifier), este folosită în momentul de față, versiunea HTTP/1.1.

Identificatorii uniformi de resurse menționează o adresă Web prin nume (Uniform Resource Name – URN) sau ca și locație (Uniform Resource Locator – URL). Acești identificatori reflectă prin orice tip de protocol de comunicare, modalitatea eficientă accesării oricărei resurse Internet. De exemplu, putem enumera câteva servere Web cunoscute precum: Apache Server, Microsoft Information Services, Netscape Enterprise Server, Sun Web Server, Oracle Server Web, Microsoft Web Server.

Figura 1.3. Modul de funcționare Web

În figura 1.3. este reprezentat modul de comunicare dintre client și server. Server-ul Web reprezintă programul ce acceptă conexiunile de la clienți de pe portul 80. După stabilirea legăturii cu server-ul de către client, se trimite cererea pentru pagina Web, iar server-ul va răspunde cu fișierul dorit sau în caz contrar, mesajul de eroare că fișierul respectiv nu a fost identificat. Server-ul va închide conexiunea. Orice cerere se identifică prin comanda: “GET nume_fișier”.

Pentru transmiterea paginilor Web este utilizat protocolul HTTP (HyperText Transfer Protocol) și este utilizat în comunicarea dintre server-ul Web și client.

Server-ul Web de bază reprezintă un program ușor și simplu care preia cererile și trimite răspunsurile. În cadrul acestei funcții se introduce și alte funcții, precum CGI (Common Gateway Interface) sau posibilitatea de securizare a accesului.

Exemplu: Unele pagini pot fi protejate și pot fi accesate doar de cei care au un nume de utilizator și parolă. Alt nivel de securitate este realizarea unei conexiuni criptate dintre navigator și server, unde se transmite informații confidențiale (exemplu: date despre conturi bancare, numărul cărților de credite, etc.).

LIMBAJUL DESCRIPTIV AL UNEI PAGINI WEB – HTML STANDARD

HTML sau HyperText Markup Language, este unul dintre primele elemente fundamentale ale World Wide Web, ce descrie formatul în care sunt vizualizate și distribuite documentele pe Web și a fost constituit pentru a putea opera cu funcționalitățile multimedia WWW.

HTML a fost conceput la CERN în anul 1989 de către Tim Berners-Lee pentru schimbul de informații dintre fizicieni care foloseau calculatoare diferite cu ajutorul Internetului.

Tim Berners-Lee a folosit un standard internațional ca model SGML (Standard Generalized Markup Language) ce avea ca avantaj structurarea avansată și independența de platformă.

Independența de platformă reprezintă modul asemănător de afișare a documentului de calculatoare diferite. Spre exemplu, fontul, grafica și culorile erau diferite.

SGML reprezintă descrierea altor formate.

Noi formate DTD (Document Type Definitions) puteau fi create de către utilizatori și înțelese de oricare produs soft SGML prin citirea noilor formate. HTML este un format DTD, ceea ce rezultă că este și o aplicație SGML.

HTML s-a dezvoltat lent din cauza lipsei descrierii publicațiilor electronice profesionale și inserarea graficii nu putea fi permisă.

În anul 1933, a fost conceput primul navigator grafic, Mosaic, de către NCSA și a fost permisă și inserarea graficii. Au apărut actualizări ale limbajului HTML cu ajutorul contribuțiilor ad hoc de către diverse firme.

La Geneva s-a realizat un grup numit HTML Working Group, în urma conferinței WWW, unde HTML a fost formalizat într-un DTD al SGML.

World Wide Web Consortium (W3C) este standardul oficial HTML, afiliat IETF-ului (Internet Engineering Task Force). W3C a publicat versiuni ale limbajului HTML: HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01.Netscape și Microsoft au încorporat în browsere “extensii” HTML.

HTML 2.0 reprezintă standardul conceput în luna iunie a anului 1994 pe care browserele curente ar trebui să-l suporte .

HTML 3.0 a încercat dezvoltarea versiunii HTML 2.0, în anul 1995, cu ajutorul tabelelor și controlului textului din jurul imaginilor. În prezent, HTML 3.0 nu mai este un standard official.

W3C a publicat pe piață în mai 1996, versiunea HTML 3.2 ce include tag-uri ale HTML 3.0. În prezent, cea mai utilizată este HTML 4.0.

Documentele HTML reprezintă fișiere text în format ASCII, deci pot fi realizate cu ajutorul oricărui editor de texte și conține formatări de text, formatări de imagini, diferite module pentru sunete și animație, dar și hiperlegături pentru alte fișiere HTML.

Limbajul de macare HTML oferă posibilitatea transformării unui text într-un hypertext prin introducerea marcajelor, ce va indica modul de efectuare a legăturilor documentului și modul de aifșare a paginilor a documentului. Dacă calculatorul are acces la Internet, documentul HTML poate fi realizat public, adică poate fi văzut de oricine

CAPITOLUL II. REALIZAREA PRACTICĂ A APLICAȚIILOR – NOȚIUNI INTRODUCTIVE

2.1. LIMBAJUL DE MARCARE – HTML

HTML este abrevierea de la HyperText Markup Language și este limbajul standard de marcaj pentru paginile Web folosit pentru prezentarea și formatarea documentelor pe Web. Un document HTML reprezintă un fișier text, care într-o pagină, pe lângă textul propriu-zis, va conține elemente speciale precum etichetele sau marcajele.

În HTML, programatorul va defini o structură ierarhică de tag-uri (etichete):

<body>…</body> – reprezintă corpul documentului unde se regăsește conținutul paginii HTML;

<div>…</div> – ajută la delimitarea și formatarea unui text;

<h1>…</h1> – permite redactarea titlului cu caractere mari;

<p>…</p> – este utilizat pentru paragrafe. Face posibilă trecerea pe o linie nouă.

Fiecare tag poate avea atribute ce se definesc sub forma: <tag atribut=”valoare”>conținut</tag>. Există o mulțime de tag-uri și atribute ce ajută la definirea structurii documentelor. Într-o pagină HTML se pot integra obiecte externe, JavaScript-uri pentru interactivitate, imagini, CSS-uri utilizate pentru stilare și pot fi realizate și formulare.

Conceptul de hypertext a fost introdus de Ted Nelson in cartea „Literary Machines”, apoi conceptul a fost preluat de Tim Berners-Lee pentru elaborarea proiectului Conseil Europeen pour la Recherche Nucleaire, pe scurt, CERN, care a dus la dezvoltarea rețelei WWW în anul 1989.

O pagină Web este un sistem de fișiere într-un format hypertext ce poate fi accesată de oriunde în lume dacă utilizatorul este conectat la Internet și formează pagini de prezentare în rețeaua WWW. O pagină Web trebuie să reflecte scopul pentru care a fost creată, iar textul, imaginile, sunetele să îi comunice utilizatorului-client, mesajul care dorește să fie transmis.

Paginile HTML utilizează un limbaj numit limbajul CSS (Cascading Style Sheets) pentru îmbunătățirea design-ului paginilor. CSS oferă pentru simplificarea operației de actualizare sau de administrare a unui site Web, o unealtă eficientă, simplă, ce oferă proprietăți de design sofisticat.

Un style sheet reprezintă setul de proprietăți pentru navigator care indică modul de formatare al diferitelor tag-uri ale documentului. Există două versiuni de CSS: CSS1 (nivelul 1) și CSS2 (nivelul 2). CSS2 este compatibil cu CSS1 și are mai multe opțiuni noi.

Un style sheet CSS1 cuprinde 5 proprietăți sau informații de prezentare:

Proprietăți pentru fonturi – se stabilesc stilul, mărimea, înălțimea liniei și tipul fontului folosit.

Proprietăți pentru fundal și culori – se stabilește fundalul unui element. Se utilizează declarația de proprietate: background: #ffffff url(calea_catre_imagine) top left no-repeat fixed;. Pentru culoarea fundalului se utilizează proprietatea background: background-color: valoare;.

Proprietăți pentru text – se utilizează pentru colorare, aliniere, decorare și transformarea textului în CSS. Se poate realiza spațierea între litere, între cuvinte, etc.

Proprietăți pentru blocuri – se utilizează pentru margini și între elementele blocului etc.

Clasificări – ajută la utilizarea controlului asupra stilului listelor, a formatării elementelor.

CSS-ul se clasifică prin:

Intern – formatarea se realizează în secțiunea head a documentului;

Extern – formatarea se realizează în fișier.css extern;

Inline – indică CSS-ul în interiorul tag-ului HTML. Formatarea inline va anula expresiile CSS de formatare.

Cele 3 părți importante ale unei pagini web sunt:

Declarația de conformitate – definește tipul documentului realizat.

Antetul (head) – cuprinde meta-marcajele utile clasificării și indexării într-un mod corect al paginilor pe Internet. Este următoarea după declarația de conformitate și se delimitează în interiorul marcajului <head>…</head>. Meta-marcajele importante ce se regăsesc în antet sunt: <title>…</title> = titlul paginii; <meta name=”description” content=”…”/> = descrierea paginii; <meta name=”keywords” content=”…”/> = cuvinte-cheie care descriu conținutul paginii cel mai bine.

Pagina propriu-zisă – se delimitează de marcajul <body>…</body>. Aici se vor regăsi și alte marcaje folosite pentru crearea paginii.

Cele mai utilizate marcaje HTML sunt:

Marcaje pentru blocuri de conținut:

<p>…</p> = utilizat pentru paragrafe

<div>…</div> = utilizat pentru diviziuni

Marcaje pentru formate de text:

<b>…</b> = utilizat pentru bolduirea textului

<i>…</i> = utilizat pentru scrisul italic

Marcaje pentru liste:

<ul>…</ul> = utilizat pentru listele cu marcatori

<ol>…</ol> = utilizat pentru listele cu numere

<li>…</li> = utilizat pentru rândurile în listă

Marcaje pentru titlu:

<h1>…</h1> = utilizat pentru titlurile foarte importante. Fontul este foarte mare.

<h2>…</h2> = utilizat pentru titluri importante.

<h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6>, <h7>…</h7>

Marcaje semantice:

<strong>…</strong> = utilizat pentru evidențierea puternică

<em>…</em> = utilizat pentru evidențiere

Marcaje pentru tabele:

<table>…</table> = utilizat pentru crearea unui tabel

<tr>…</tr> = utilizat pentru crearea rândurilor de tabel

<td>…</td> = utilizat pentru crearea celulelor

Marcaje pentru obiecte:

<img src=”…”/> = utilizat pentru inserarea imaginii

<object>…</object> sau <embed>…</embed> = utilizat pentru animații flash

<applet>…</applet> = utilizat pentru aplicațiile Java

Alte marcaje importante:

<a href=”…”>…</a> = utilizat pentru introducerea link-urilor (legăturilor)

<span>…</span> = utilizat pentru conținutul în linie

<hr/> = este despărțitor orizontal

În cazul imaginii se pot identifica diverse atribute:

Lățime în pixeli – width()

Înălțime în pixeli – height()

Text alternativ – alt : <img src=”…” width=”…” height=”…” alt=”…”/>

În cadrul site-ului, legătura între pagini se realizează cu ajutorul hyperlink-urilor sau a legăturilor. Informația este organizată sub formă de fișiere și directoare.

Mai jos va fi prezentat un model de structură HTML și definirea structurii semantice:

Figura 2.1. Exemplu de cod HTML

Pe prima linie a codului este specificată inițializarea modului de afișare specific fiecărei versiunide HTML – DOCTYPE. Tag-ul <HTML> reprezintă punctul de pornire a structurii paginii. În tag-ul <HEAD> se pot define meta-datele ce descriu pagina sau site-ul, spre exemplu: autorul, titlul paginii, referințele fișierelor, elemente externe (CSS-uri, JavaScript-uri). Atributele REL și HREF ajută la determinarea modului de referință și a fișierului extern ce este integrat în pagină. Pentru stilarea paginii a fost introdus un fișier CSS. În <BODY> este prezentat conținutul paginii pe care browser-ul îl va afișa pe ecran: <H1> reprezintă titlul la nivelul întâi (mărimea fontului este foarte mare), <H2> reprezintă titlul la nivelul al doilea (mărimea fontului este mai inferioară mărimii anterioare a lui H1). Pentru <H2> s-a utilizat și atributul LANG pentru specificarea limbii în care este scris textul. Tag-ul <P> reflectă paragraful, iar <EM> se utilizează pentru emfazarea a ceea ce s-a spus. Tag-urile <OL> și <UL> definesc listele ordonate, dar și listele neordonate. Pentru delimitarea elementelor listei se va utiliza tag-ul <LI>.

Setările implicite definite în standard le au navigatoarele Web pentru modul de afișare al tag-urilor. Pentru realizarea unui design și stilarea conținutului se utilizează CSS (Cascading Style Sheets).

Modul de separare a conținutului de prezentare, oferă programatorilor posibilitatea de utilizare a aceluiași fișier CSS pe toate paginile din site și oferă și moduri diverse de prezentare a site-ului, a conținutului acestuia în funcție de rezoluția ecranului. Prin folosirea corectă a CSS-ului se asigură accesibilitatea mai avansată a site-ului deoarece pot fi realizate diverse design-uri specifice diferitelor platform. Stilurile CSS pot fi dezactivate de orice utilizator pe Internet.

CSS și HTML au fost create și menținute de W3C (World Wide Web Consortium) și sunt tehnologii de Web standard, client side, ce rulează pe calculatorul utilizatorului de Internet.

W3C (World Wide Web Consortium) reprezintă principalul consorțiu internațional de standardizare a Web-ului.

2.1.1. STRUCTURA DOCUMENTELOR HTML

Pagina principală a domeniului este fișierul index.html și este setată pentru afișarea automată în momentul vizitării domeniului. Spre exemplu: vizitarea domeniului: www.licenta.ro , va fi afișată pagina: www.licenta.ro/index.html.

Documentele sau paginile Web reprezintă un fișier text cu extensia ”.html” sau .htm” ce cuprind informația și etichetele ce poartă denumirea de tag-uri care se regăsesc între paranteze ascuțite ”< >” ce reflect modul în care informația va fi afișată în navigator.

Tag-urile nu sunt case-sensitive în documentele HTML, deci pot fi scrise atât cu litere mici, cât și cu litere mari. Tag-urile încep cu ajutorul parantezelor ascuțite, însă în momentul în care dorim să închidem vor avea în interiorul parantezelor ascuțite un slash (”/”). De exemplu: <head> și </head>.

Comentariile ce nu sunt afișate în browser, pot fi scrise între tag-urile specifice: <!– și –>.

Componentele unui document HTML sunt:

Antetul documentului se delimitează de etichetele specifice <head>…</head>, unde vor regăsi informații generale cu referire la document. De exemplu: titlul documentului (<title>…</title>), autorul etc.

Corpul documentului este delimitat de etichetele specifice <body>…</body> (sau <frameset>…</frameset> pentru descrierea structurii cadrelor din document), unde se regăsește textul propriu-zis al documentului, dar și elemente ce descriu formatul acestuia.

Figura 2.2. Structura unui document HTML

După ce a fost introdus codul, vom salva fișierul cu extensia ”.html”, apoi vom rula programul cu Mozilla Firefox.

Figura 2.3. Rularea programului

Figura 2.4. Afișarea în Mozilla Firefox

2.1.2. PARAGRAFUL. ATRIBUTELE UNUI TAG

Într-o pagină, textele se pot găsi în numeroase paragrafe. Paragraful se introduce între tag-urile <p> și </p>. În cazul în care avem două paragrafe consecutive, acestea vor fi separate printr-o linie goală la afișare.

De obicei, tag-ul </p> poate să lipsească, însă noul paragraf este detectat cu ajutorul tag-ului <p>. De reținut este faptul că, într-un fișier HTML, tasta Enter nu ajută cu nimic, iar în cazul în care două cuvinte dintr-un paragraf au mai multe spații sau caractere albe (datorită enter-urilor sau a tab-urilor), în browser va fi afișat doar un spațiu.

Atributele se pot specifica mai multor tag-uri determinând comportamentul elementului respective în detaliu. Atributul este specificat prin nume_atribut=”valoare”, înainte ca paranteza unghiulară(>) să fie închisă.

Atributul align ajută la controlarea textului din paragraf. Dacă acesta nu este definit, alinierea este realizată la stânga în mod implicit. Acest atribut align poate lua o anumită valoare precum: center, justify, left sau right.

Figura 2.5. Codul HTML privind alinierea

Figura 2.6. Vizualizarea în Mozilla Firefox privind alinierea

2.1.3. FORMATAREA TEXTULUI, INSERAREA DE LISTE ȘI IMAGINI

Pentru formatarea textului sunt necesare următoarele elemente:

<BR> – se utilizează pentru trecerea textului pe un rând nou.

<B>…</B> – textul cuprins între parantezele unghiulare va fi afișat îngroșat (bold). Un alt tag asemănător îl reprezintă: <STRONG>…</STRONG.

<I>…</I> – textul cuprins între parantezele unghiulare va fi afișat înclinat (italic). Alte tag-uri asemănătoare îl reprezintă: <EM>…</EM>,<CITE>…</CITE>, <DFN>…</DFN>.

<U>…</U> – textul cuprins între parantezele unghiulare va fi afișat subliniat. Un tag asemănător îl reprezintă: <INS>…</INS>.

<S>…</S> – textul cuprins între parantezele unghiulare va fi tăiat cu o linie orizontală. Un tag asemănător îl reprezintă: <DEL>…</DEL>.

<BIG>…</BIG> – textul cuprins între parantezele unghiulare va fi mai mare față de restul textului.

<SMALL>…</SMALL> – textul cuprins între parantezele unghiulare va fi mai mic față de restul textului.

<SUP>…</SUP> – textul cuprins între parantezele unghiulare va fi afișat mai sus (ca putere).

<SUB>…</SUB> – textul cuprins între parantezele unghiulare va fi afișat mai jos (ca indice).

<TT>…</TT> – textul cuprins între parantezele unghiulare va fi afișat mai sus monospațiat, adică toate caracterele vor ocupa aceeași lungime și folosesc fontul Courier New.

Mai jos va fi prezentată un exemplu de cod HTML în care se vor regăsi toate elementele formatării textului exemplificate mai sus (Figura 2.7.) și cum sunt vizualizate în browser liniile de cod (Figura 2.8.).

Figura 2.7. Codul HTML privind formatarea textului

Figura 2.8. Vizualizare în Mozilla Firefox

Tag-urile <H1>…</H1>, <H2>…</H2>, <H3>…</H3>, … , <H6>…</H6> sunt utilizate pentru scrierea titlurilor. <H1> reflectă utilizarea fontului de dimensiune maximă, iar <H6> reflectă utilizarea fontului de dimensiune redusă. Textul care este introdus între tag-uri este îngroșat(bold).

Tag-ul <FONT>…</FONT> se utilizează pentru a stabili fontul. Atributele specifice tag-ului <FONT> sunt:

FACE se utilizează pentru numele font-ului;

SIZE se utilizează pentru a putea seta mărimea font-ului. Valorile acceptate sunt între 1 și 7. Pentru textul normal valoarea standard este 3.

COLOR se utilizează pentru setarea culorii textului. Aceasta se poate specifica prin intermediul constantelor predefinite HTML-ului sau prin componentele RGB (Red, Green, Blue) exprimate hexazecimal.

Pentru afișarea unui spațiu forțat, se va utiliza un identificator special &nbsp;.

Figura 2.9. Cod HTML privind titlurile și culorile

Figura 2.10. Vizualizare în Mozilla Firefox

LISTE

Listele permit ca anumite enunțuri să poată fi numerotate sau marcate în diverse moduri. În HTML se pot distinge 3 tipuri de liste:

LISTE NEORDONATE (Unordered List) reprezintă listele în care elementele acesteia nu sunt numerotate, însă în dreptul fiecăruia va fi afișat un marcator. Acestea sunt blocuri de text delimitate de etichetele specific: <UL>…</UL>. Orice element al listei este definit de eticheta <LI> (list item). Acestea pot să aibă un atribut type care să stabilească caracterul ce este afișat înaintea fiecărui element din listă, iar valorile acestui atribut sunt:

Cerc (circle);

Disc plin (disc);

Pătrat (square).

Figura 2.11. Codul HTML privind listele neordonate

Figura 2.12. Vizualizare în Mozilla Firefox a listelor neordonate

LISTE ORDONATE (Ordered List) reprezintă listele în care elementele sunt numerotate. Inserarea acestora se realizează cu ajutorul tag-urilor <OL>…</OL>, itemii fiind introduși între tag-urile specificate mai sus prin <LI>…</LI>. Numerotarea acestora se realizează cu ajutorul cifrelor arabe (1,2,3…). Aceasta poate fi modificată utilizând atributul type în tag-ul <OL> și poate fi lua diverse valori:

a – Numerotarea se va realiza cu ajutorul literelor mici (a, b, c…).

A – Numerotarea se va realiza cu ajutorul literelor mari (A, B, C…).

i – Numerotarea se va realiza cu ajutorul cifrelor romane mici (i, ii, iii,…).

I – Numerotarea se va realiza cu ajutorul cifrelor romane mari (I, II, III…).

1 – Numerotarea se va realiza cu ajutorul cifrelor arabe obișnuite (1, 2, 3…).

Figura 2.13. Codul HTML privind listele ordonate

Figura 2.14. Vizualizare în Mozilla Firefox a listelor ordonate

LISTE DE DEFINIȚIE (Definitions Lists) ajută la descrierea listei de definiții. Inserarea acestora se realizează cu ajutorul tag-urilor <DL>…</DL>. Elementele acestora sunt de două feluri:

Definiția propriu-zisă se regăsește între tag-urile <DD>…</DD>.

Termenul definit se regăsește între tag-urile <DT>…</DT>.

Figura 2.15. Codul HTML privind listele de definitie

Figura 2.16. Vizualizare în Mozilla Firefox a listei de definiții

IMAGINI

Pentru inserarea unei imagini în documentul HTML este utilizat tag-ul <IMG> care nu are o formă de închidere. Forma de bază a acestuia este <IMG attribute>. Atributele tag-ului sunt:

src – ajută la identificarea fișierului de pe disc care conține imaginea specifică. În cazul în care imaginea este situată în directorul curent, se va specifica numele și extensia acesteia, iar în cazul în care imaginea se află într-un subdirector, se va specifica înaintea subdirectorului numele și extensia imaginii, cu ajutorul separatorului ”/”. Tipurile de extensii ale imaginilor recunoscute de browser sunt: .jpg, .png, .gif.

align – ajută la specificarea tipului de aliniere al imaginii în raport cu textul unde este situat. Poate avea diverse valori specifice precum: right, left, top, bottom.

Dacă vrem să întrerupem alinierea unei imagini de tip right sau left înainte ca spațiul gol să fie umplut de text în stânga sau în dreapta acesteia, vom putea utiliza tab-ul <BR>, unde vom avea posibilitatea introducerii unor atribute precum: clear=”left”, clear=”right” sau clear=”all”.

Alt=”text” permite ca un text alternativ să fie specificat și afișat dacă ținem cursorul de mouse pe imagine sau în locul imaginii propriu-zise în cazul în care apare o problemă de conexiune, iar imaginea nu poate fi încărcată.

Atributele height și width ajută la specificarea dimensiunilor imaginii, altele decât cele originale.

Atributul border permite ca imaginii să-i fie stabilită grosimea chenarului, unde valoarea acestuia este 0, adică imaginea nu are un chenar.

Atributele hspace=”nr.pixeli” sau vspace=”nr.pixeli” permit ca imaginea să fie separată de celelalte obiecte pe orizontală sau pe verticală printr-o distanță minimă.

Figura 2.17. Codul HTML pentru atributele imaginii

Figura 2.18. Vizualizarea în Mozilla Firefox a imaginilor

TABELE

Etichetele utilizate pentru inserarea tabelelor în HTML sunt: <table>…</table>. Tabelul este alcătuit din rânduri urmând ca pentru acestea să se utilizeze etichetele <tr>…</tr>. Un rând este reprezentat de mai multe celule ce conțin date. Pentru definirea unei celule de date se utilizează eticheta <td> , iar tabelul nu are vreun chenar. Pentru adăugarea chenarului unui tabel, se va folosi atributul etichetei <table> ce poartă denumirea de border. Pentru a introduce dimensiunea unui tabel, vor fi specificate atributele height și width. Valorile atributelor acestea sunt:

Numerele cuprinse între 1 și 100, precedate de semnul ”%” care reprezintă fracțiunea din înălțimea paginii.

Numerele întregi pozitive care reprezintă înălțimea și lățimea tabelului în pixeli.

Zona din jurul tabelului poate fi reprezentată de două atribute: vspace care reflectă distanța în mod vertical dintre text și imagine și hspace care reflectă distanța în mod orizontal dintre text și imagine.

Titlul unui tabel se poate introduce cu ajutorul etichetei <caption>, care trebuie să fie inclusă în cadrul etichetelor <table>…</table>, dar nu și în cadrul etichetelor <td> și <tr>. Cu ajutorul atributului align, titlul poate fi aliniat față de tabel astfel: top, left, bottom sau right.

Capul de tabel este introdus cu ajutorul etichetei <th>, unde conținutul este scris centrat și cu caractere aldine. Orice atribut căruia îi este atașat eticheta <td>, poate să-i fie atașat și eticheta <th>.

Extinderea unei celule peste alte celule din dreapta acesteia se poate realiza cu ajutorul atributului colspan, iar extinderea unei celule peste alte celule de mai jos se poate realiza cu ajutorul atributului rowspan.

Eticheta <table> poate avea și alte atribute:

Bordecolor care stabilește întreaga culoare pentru chenarul tabelului.

Background care stabilește o imagine pentru fondul tabelului.

Pentru definirea unui grup de coloane se va insera blocul <colgroup>…</colgroup> care acceptă diverse atribute:

Align = va determina tipul unic de aliniere pentru coloanele din grup

Span = va determina numărul de coloane din cadrul grupului

Width = va determina lățimea unică pentru coloanele din grup

Figura 2.19. Codul HTML privind tabelele

Figura 2.20. Vizualizare în Mozilla Firefox a tabelelor

2.2. GENERALITĂȚI ALE META LIMBAJULUI XML

EXtensible Markup Language reprezintă meta limbajul care permite structurarea și definirea informațiilor ce sunt într-un document. Acesta a fost conceput pentru descrierea datelor și folosește tag-uri, atribute, elemente pentru descrierea clară a conținutului documentului. Tag-urile nu sunt predefinite, însă programatorul le definește.

XML este extensia pentru HTML, nu un înlocuitor. HTML se utilizează pentru formatarea documentului care trebuie afișat, însă XML se utilizează pentru definirea informației din document.

XML a fost dezvoltat pentru structurarea, stocarea și trimiterea datelor. Acesta reprezintă unealta pentru transmiterea datelor care este independentă software și hardware.

Avantajele meta limbajului XML sunt:

Limbajul este unul extensibil;

Documentele în fomat XML includ date de tipul: PDF, video, audio, applet-uri Java);

Sunt oferite informații cu privire la conținutul documentului;

Oferă posibilitatea de distribuire a unei părți cu o importanță majoră a procesării datelor de la un client la server.

2.3. LIMBAJUL DE PROGRAMARE – BOOTSTRAP

Bootstrap-ul nu este doar un limbaj de programare, ci un mod ordonat pentru utilizarea elementelor de CSS, JavaScript și HTML pentru crearea unor structuri care pot fi refolosite cu “copy-paste”.

Framework-ul a fost dezvoltat de către Mark Otto și Jacob Thornton ca o soluție pentru Twitter și denumirea lui inițială a fost “Twitter Blueprint”. În anul 2011 a fost lansat open-source sub denumirea de bootstrap.

Bootstrap-ul te ajută să devii mult mai eficient și să salvezi din timpul de dezvoltare necesar pentru un Web-site deoarece oferă structuri predefinite necasare în majoritatea proiectelor: butoane, meniuri de navigare, formulare, carousel, grid-uri responsive.

Avantaje ale utilizării Bootstrap-ului: compilarea și personalizarea; sistem de 12 grid-uri responsive; componente HTML și JavaScript; suport, documentare și răspunsuri; cererea proiectelor dezvoltate pe Bootstrap este în continuă creștere.

2.4. LIMBAJUL DE PROGRAMARE – CSS

CSS (Cascading Style Sheets) reprezintă limbajul utilizat pentru stilarea și formatarea elementelor semantice din limbajele de programare (exemple: (X)HTML sau XML).

CSS-ul este foarte ușor de citit, dar și de scris de către orice cunoscător de limba engleză. Programatorul va defini blocuri de reguli de prezentare, stilare delimitate de {} (acolade). În blocurile de reguli se vor defini declarațiile CSS care sunt delimitate de semnul “;”.

Proprietățile CSS sunt cuvinte în limba engleză ce sunt urmate de valoare: proprietate:valoare;. De exemplu: font size:50px, position: absolute; margin: 20px, etc.

Declarația CSS reprezintă perechea formată dintr-o proprietate și o valoare.

Orice bloc de reguli va începe cu unul sau mai multe selectoare separate prin “,”. Spre exemplu: selector1, selector2, selector3{proprietate:valoare;}.

Selectorul reprezintă expresia ce determină asupra atributelor sau tag-urilor din limbajul de marcaj HTML unde sunt aplicate proprietățile de stilare CSS.

Selectorul de elemente aplică reguli de stilare în cadrul tuturor elementelor de același fel ce se regăsesc în document.

Fiecare element din limbajul de marcat se consideră o cutie (box model). Fiecare tag din HTML va fi afișat în box model. Modelul de cutie în CSS se constituie din margini, borduri, umpluturi (padding) și conținut. Proprietățile de stilare a box model-ului în CSS sunt pentru a ajusta spațiul dintre elementele din limbajul de marcaj.

Marginea reflectă spațiul exterior elementului și este transparent. Bordura este stilată prin linie continuă, linie punctată sau în culoare, etc. Umplutura reprezintă spațiul dintre bordură și conținut ce preia culoarea sau fundalul stabilit pentru element. Deci nu poate să aibă o culoare specific setată. Marginile se contopesc atunci când mai multe elemente sunt unele lângă altele.

2.5. NOȚIUNI INTRODUCTIVE ALE LIMBAJULUI JAVASCRIPT

JavaScript reprezintă limbajul de programare ce face posibil ca paginile Web să fie interactive. Este recunoscut ca făcând parte din categoria “Scripting Languages”. Lansarea a fost făcută sub numele de “LiveScript”, iar pentru strategia de marketing, numele a fost schimbat în JavaScript.

Scripturile JavaScript introduse în paginile Web, iar interpretarea și executarea acestora se realizează cu ajutorul browser-ului. JavaScript este considerat un instrument foarte bun dacă se dorește controlarea conținutului paginilor în funcție de dată, oră, sistemul de operare sau browser-ul utilizatorului; construirea site-urilor interactive care să permită comunicarea cu vizitatorii; site-uri dinamice; validarea datelor primite din formulare, etc.

2.6. UTILITARUL NOTEPAD++ PENTRU REALIZAREA PAGINILOR WEB

Notepad++ este un editor de cod sursă gratuit, cu funcții suplimentare, cu suport în editarea codului sursă pentru mai multe limbaje de programare. Acesta are o interfață simplă, dar complexă, iar opțiunile editorului reflectă adevărata putere de editare.

Un alt atuu față de acceptarea mai multor limbaje de programare incluzând evidențierea celor mai multe dintre sintaxe, este posibilitatea de lucru cu mai multe documente în același timp, în aceeași interfață, făcându-l util și simplu în procesul de editare. Navigarea pe tab-uri printre documente este destul de simplă.

Una dintre caracteristicile principale este posibilitatea înregistrării de macro-uri, editării și rulării lor, adăugării de plugin-uri, etc.

Pentru o experiență avansată și completă este recomandată instalarea tuturor plugin-urilor, mărind funcționalitatea editorului.

Opțiunile Notepad++, accesibile din tab-ul Settings->Preferences, oferă atât posibilități de personalizare a interfeței, cât și posibilități de personalizare a principalelor funcții ca limbaj de editare, printare, asociere, codare etc. Notepad++ suportă și caracterele specifice limbii române.

Caracteristici cheie ale editorului Notepad++:

Evidențiază sintaxa – Se evidențiază sintaxa pentru limbaje diferite (C++, HTML, Pascal etc);

Configurator stil – Se realizează codul colorat pentru evidențieri;

Evidențiază sintaxa definită de către utilizator – Se pot defini sintaxe noi cu evidențieri proprii;

Auto-completare – Se permite auto-completarea pentru limbaje cunoscute, adică se deduce și se întregistrează automat cuvântul de cod din biblioteca utilizată;

Multi-Document – Se pot încărca mai multe fișiere simultan;

Multi-Vizualizare – Deschiderea mai multor fișiere în mai multe tab-uri;

Căutare expresii regulate – Acceptă expresii regulate pentru înlocuiri, căutări;

Suportă Drag în Drop – Drag = cu ajutorul mouse-ului putem trage obiectul; Drop = plasarea obiectului se face după eliberarea click-ului de la mouse;

Zoom – Codul poate fi mărit sau micșorat pentru o mai bună vizualizare;

Suport Multi-Language – Este disponibil în mai multe limbi, inclusive în limba română;

WYSIWYG (What You See Is What You Get) – Se poate tipări color codul sursă;

Auto-detectare fișier – Se detectează automat un fișier;

Semne de carte – Se pot realiza semne de carte pentru găsirea mai rapidă a unei părți din cod;

Evidențiază orientarea, indentarea și acoladele sau <> – Fiecare secvență de cod HTML va începe prin: <…> și se va închide prin </…>. Nu va fi structurat unul sub altul, ci indentat spre dreapta.

Macrocomenzile de înregistrare și de redare – După salvarea codului cu diverse extensii, se poate rula din meniu pe diverse browsere.

Figura 2.22. Cod sursă HTML

CAPITOLUL III. PROIECTAREA SITE-ULUI WEB

3.1. GENERALITĂȚILE LIMBAJULUI HTML

HTML este prescurtarea de la HyperText Markup Language și reprezintă limbajul de editare principal al conținuturilor paginilor Web.

Fișierele HTML sunt documente de tip text, salvate cu extensia “.html” în care, cu ajutorul marcatorilor (eng. tag) se poate formata textul sau elementele componente ale paginii. Marcatorii sunt introduși cu ajutorul semnelor “< >”. Efectul marcatorului este exercitat doar asupra elementelor pe care le cuprinde.

3.2. STRUCTURA DE BAZĂ A PAGINILOR WEB

Orice pagină Web (document HTML) are trei elemente obligatorii în structura acesteia: un element numit HTML, ce cuprinde întregul document, și două sub-elemente: HEAD (antet) și BODY (corp).

Tag-ul <HTML> este primul tag care apare în fișierul HTML. El încadrează alături de tag-ul său corespunzator de închidere (</HTML>) întreaga pagină Web.

Tag-ul <HEAD> marchează partea de antet a paginii Web. Are un tag corespunzător de închidere (</HEAD>).

Tag-ul <BODY> încadrează conținutul paginii Web. Are un tag corespunzător de închidere (</BODY>).

Tag-ul <TITLE> marchează titlul documentului HTML, mai exact, cel care este afișat în bara de titlu a browser-ului. Acest tag se folosește numai în cadrul tag-ului HEAD. Dacă acest tag lipsește, atunci în bara de titlu apare numele fișierului.

Structura de bază a unei pagini HTML va fi prezentată în Fig.3.1:

Fig. 3.1. Structura de bază a unei pagini HTML

Din analiza Fig.3.1., observăm că:

Pagina începe cu tag-ul <HTML> și se termină cu tag-ul </HTML>;

Pagina conține antetul (HEAD) și corpul propriu-zis (BODY);

Antetul este cuprins între etichetele <HEAD> și </HEAD>;

Corpul este cuprins între etichetele <BODY> și </BODY>;

Antetul conține titlul paginii, care este cuprins între tag-urile <TITLE> și </TITLE>. Titlul apare pe bara de titlu a ferestrei afișate în browser.

Corpul conține texte și imagini, însă în captura de mai sus, nu este prezentată decât imaginea de fundal a paginii Web.

Numele tag-urilor nu sunt case sensitive, deci le putem scrie atât cu litere mari, cât și cu litere mici. În continuare, pentru un aspect plăcut, am ales scrierea codului cu litere mici, însă pentru a pune în evidență informații utile, titlurile vor fi scrise cu litere mari.

3.2.1. INSERAREA PARAGRAFELOR ȘI ATRIBUTELE UNUI TAG

Textele conținute de o pagină Web se pot găsi în numeroase paragrafe. Paragraful este cuprins între tag-urile <p> și </p>.

Dacă avem două paragrafe consecutive, la afișare, acestea vor fi separate printr-o linie goală.

Pot fi cazuri în care tag-ul de închidere lipsește, însă paragraful nou poate fi detectat datorită tag-ului de deschidere <p>.

În cadrul fișierelor HTML, tasta Enter nu are vreun efect. În cazul în care, două cuvinte ale unui paragraf sunt separate prin numeroase spații sau caractere albe, de exemplu: tab-uri, enter-uri, browser-ul nu va afișa decât un spațiu.

Fig.3.2. Paragraf

Pentru utilizarea paragrafului am introdus codul specific <p> … </p>, așa cum este prezentat și în Fig.3.2.. În cadrul acestui tag, primul paragraf va avea scrisul îngroșat datorită tag-ului <strong>. Am utilizat spațiul cu ajutorul elementului &nbsp;.

Specificarea unui atribut se face înainte de închiderea parantezei unghiulare a tag-ului prin: nume_atribut=”valoare”.

Fig. 3.3. Atributul “Align”

Atributul align are control asupra alinierii textului din cadrul paragrafului, dar și asupra alinierii imaginilor. Dacă atributul nu este specificat, alinierea este realizată în mod implicit din partea stângă. În Fig.3.3, atributul are valoarea right, însă poate lua și alte valori precum: center, left, justify.

Fig.3.4. Ghidul Aventurierului

Cu ajutorul valorii atributului align=”right”, putem observa în Fig.3.4 că imaginea apare în partea dreaptă a paginii Web.

3.2.2. ELEMENTELE FORMATĂRII TEXTULUI

Pentru formatarea textului am utilizat următoarele elemente ce vor fi prezentate în Fig.3.6:

<BR> : Are efectul de forțare pe rândul următor a ceea ce trebuie să urmeze. Acest tag nu creează paragraf nou și nici nu are tag de închidere.

<B> … </B> : Are rolul de a îngroșa textul cuprins între tag-uri. Un alt tag ce îndeplinește aceiași condiție este: <STRONG> și <STRONG>.

<I> … </I> : Are rolul de a înclina textul cuprins între tag-uri. Alte tag-uri ce îndeplinesc aceiași condiție sunt: <EM> … </EM>, <CITE> … </CITE>, <DFN> … </DFN>.

<SUP> … </SUP> : Are rolul de afișare a textului cuprins între tag-uri ca fiind o putere.

Fig.3.5. Elementele formatării textului

În Fig.3.5 este prezentat codul, de unde reiese utilizarea paragrafului, elementele formatării textului și chiar și utilzarea spațiului cu ajutorul comenzii ;nbsp;. După introducerea codului, fișierul va fi salvat cu numele dorit și extensia “.html”.

Fig. 3.6. Prezentarea elementelor formatării textului

În Fig.3.6, am dorit rularea în browser-ul Mozilla Firefox pentru prezentarea elementelor specificate mai sus.

Tag-urile <H1> … </H1>, <H2> … </H2>, … , <H6> … </H6> se utilizează pentru formatarea titlului. <H1> reflectă utilizarea font-ului de dimensiune maximă, iar <H6> reflectă utilizarea font-ului de dimensiune minimă. Textul care este aflat între unul dintre aceste tag-uri este îngroșat.

Pentru stabilirea font-ului se utilizează tag-ul <FONT> … </FONT>. Fig.3.7. și Fig.3.8. prezintă atributele acestuia:

Face : utilizează numele font-ului dorit;

Size : utilizează mărimea dorită. (Valorile acceptate sunt cuprinse între 1 și 7.)

Color : permite specificarea culorii dorite. Aceasta poate fi specificată cu ajutorul cuvintelor englezești, fie prin componentele sale în format hexazecimal, de forma #RRGGBB.

Fig.3.7. Elementele formatării textului

În Fig.3.7. este prezentat codul privind formatarea unui link pentru stabilirea font-ului cu ajutorul elementelui color.

Fig.3.8. Prezentarea elementelui de formatare a textului

În Fig.3.8. este prezentată captura de ecran în urma executării și rulării codului prezentat mai sus, unde sunt afișate informațiile necesare.

Fig.3.9. Elementele formatării imaginii

În Fig.3.9 este prezentat codul privind formatarea imaginii pentru stabilirea dimensiunii cu ajutorul elementului style:”width:50%”.

Fig.3.10. Prezentarea tag-ului style

În Fig.3.10. este prezentată captura de ecran în urma executării și rulării codului prezentat mai sus, unde sunt afișate obiectivele de neratat, iar în partea dreaptă a acestora sunt introduse imagini.

3.2.3. UTILIZAREA LISTELOR

Listele permit ca anumite părți, ca de exemplu: texte, elemente; să fie numerotate sau marcate cu un anumit simbol. În cadrul aplicației, am utilizat atât liste ordonate ce sunt marcate cu ajutorul tag-urilor <OL> … </OL>, iar elementele sunt introduse în aceste tag-uri prin <LI> … </LI> , cât și liste neordonate ce sunt marcate cu ajutorul tag-urilor <UL> … </UL>, iar elementele sunt introduse în aceste tag-uri prin <LI> … </LI>.

Fig.3.11. Cod sursă pentru liste neordonate

În Fig.3.11 este prezentat codul sursă unde sunt introduse meniurile prin utilizarea listei neordonate.

Fig.3.12. Prezentarea listei neordonate

În Fig. 3.12. sunt prezentate meniurile prin utilizarea listei neordonate.

3.2.4. IMAGINI ȘI VIDEOCLIPURI

Pentru inserarea imaginilor am utilizat tag-ul <IMG>. Forma generală a acestui tag este <IMG atribut> și nu are formă de închidere.

În Fig.3.13 și Fig.3.14 sunt prezentate atributele tag-ului <IMG>:

SRC : permite identificarea fișierului de pe disc, ce conține imaginea dorită. Dacă imaginea se află în directorul curent, se va specifica doar numele și extensia. Imaginile recunoscute de browser au extensia: .jpg, .gif, .png.

ALIGN : permite specificarea tipului de aliniere al imaginii în raport cu textul în cadrul căreia se află. Poate lua diverse valori precum:

RIGHT;

LEFT;

TOP;

MIDDLE;

BOTTOM.

Atributele height și width permit specificarea unor dimensiuni dorite, altele decât cele reale.

Atributul border permite stabilirea grosimii unui chenar în care poza este înconjurată. În cadrul aplicației mele, border va avea 3px solid silver.

Fig.3.13. Atributele tag-ului <IMG>

În Fig.3.13. este prezentat codul pentru introducerea imaginilor, unde sunt prezentate și o parte din atributele acestora.

Fig.3.14. Prezentarea imaginilor

Fig.3.14. prezintă modul de afișare al imaginilor în urma executării codului.

În cadrul aplicației am introdus un videoclip descărcat de pe Youtube (Fig.3.15, respectiv Fig.3.16).

Fig.3.15. Videoclip descărcat

În Fig.3.15 este prezentat codul specific pentru încărcarea în pagina Web a unui videoclip descărcat de pe Internet.

Fig.3.16. Prezentare videoclip descărcat

În Fig.3.16 este prezentat modul de afișare în pagina Web a videoclipului descărcat de pe Internet.

Fig.3.17. Butoane funcționale pentru videoclip

În Fig.3.17 este prezentat codul specific pentru încărcarea în pagina Web a unui videoclip descărcat de pe Youtube ce dispune de diverse butoane funcționale.

Fig.3.18. Videoclip descărcat de pe Youtube

În Fig.3.18 este prezentat modul de afișare în browser a videoclipului descărcat de pe Youtube ce dispune de diverse butoane funcționale.

3.2.5. LEGĂTURI (LINK-URI)

Link-urile reprezintă:

Posibilitatea accesării unui alt link către o altă pagină dorită;

Posibilitatea vizionării unui clip video.

Prin accesarea unui click, să putem trimite un e-mail.

Pentru toate aceste posibilități se va folosi tag-ul <A> … </A>.

ANCORE DE LEGĂTURĂ CĂTRE ALTE PAGINI

Această ancoră de legătură permite ca un element din document să conțină legătură către o altă pagină. Elementul poate fi o imagine sau un text. Elementul își poate schimba aspectul în urma accesării. Acest tip de legătură se realizează cu ajutorul atributului href așa cum este prezentat și în figurile următoare:

Fig.3.19. Codul sursă pentru ancore de legătură către alte pagini

În Fig.3.19 se prezintă codul specific pentru legăturile dintre pagini cu ajutorul link-urilor pe baza aplicației mele.

Fig.3.20.Prezentare meniu cu legături către alte pagini

În Fig.3.20 este prezentat meniul site-ului, unde, în momentul în care îmi doresc deschiderea uneia dintre categorii, aceasta să-și schimbe puțin aspectul și în urma accesării să ne direcționeze spre pagina dorită.

Avem posibilitatea de a accesa o imagine care ne redirecționează către o altă pagină.

Fig.3.21. Legături prin imagini(icons)

Pentru a putea accesa o pagină de socializare, am decis să introduc imagini ce ne conduc către un site de comunicații, iar codul l-am specificat în Fig.3.21..

Fig.3.22. Prezentarea legăturilor prin imagini în browser

Fig.3.22 prezintă imaginile ce au legături către diverse site-uri de socializare.

ANCORĂ DE LEGĂTURĂ PENTRU TRIMITEREA UNUI E-MAIL

Această ancoră de legătură pentru trimiterea unui e-mail este foarte utilă deoarece permite vizitatorului să ne poată trimită un e-mail doar accesând cu un click legătura respectivă. În acest caz, după atributul href, trebuie neapărat specificat mailto: support@butterfliescompany.

Fig.3.23.Codul sursă pentru ancora de legătură pentru trimiterea unui e-mail

În Fig.3.23 se prezintă codul specific pentru legăturile dintre pagini cu ajutorul unei adrese de e-mail.

Fig.3.24. Prezentarea ancorei de legătură pentru trimiterea unui e-mail

În Fig.3.24 este prezentat un flipcard, în care sunt introduse numele, funcția, adresa de e-mail și numărul de telefon al unui reprezentant al companiei. În urma comenzii, se va deschide o fereastră ce ne va oferi posibilitatea trimiterii informațiilor către adresa firmei deja specificată în codul sursă prin una dintre liniile de comunicație (Microsoft Outlook, Google, Yahoo Mail și iCloud).

3.2.6. CONȚINUTUL SECȚIUNII HEAD

Tag-ul <TITLE> este unul dintre elementele ce aparțin acestei secțiuni, permițând scrierea titlului pentru pagina respectivă. Pe lângă acesta, mai există și:

<BASE>

<META> – permite furnizarea informațiilor motoarelor de căutare. Unele vizitează doar antetul pentru a obține informațiile ce nu sunt afișate în browser, dar este util să-l adăugăm pentru a putea accesa informațiile din cadrul site-ului Web. Tag-ul <META> se regăsește în antet <HEAD>.

Atributele tag-ului <META> sunt name și content.

Fig.3.25. Utilizarea tag-ului <META>

În Fig.3.25 se prezintă codul ce apare în secțiunea <HEAD> prin utilizarea elementului <META>.

<STYLE> – permite introducerea stilurilor dorite și necesare, mai exact, modul de stabilire amănunțită. Valorile sunt trecute în <STYLE> … </STYLE>, așa cum putem observa și în Fig.3.26., unde am introdus valori pentru flip-card-ul fiecărui reprezentant al companiei.

Fig.3.26. Utilizarea tag-ului <STYLE>

Fig.3.26 reflectă codul pentru utilizarea tag-ului <STYLE>. Aici am introdus informații pentru specificarea elementelor ce vor apărea în flip-card. De exemplu, butoanele au o culoare de fundal specificată: #2980b9; și #bbb; , culoarea scrisului de pe butoane este alb, dimensiunea de 300 px, fără bordură și în momentul în care dorim să trimitem un email, butonului de adresă să-și schimbe culoarea în urma accesării lui.

Fig.3.27. Prezentarea flip-card-ului realizat cu tag-ul <STYLE>

În Fig.3.27 este prezentat modul de afișare în browser al butoanelor din flip-card.

<SCRIPT> – permite utilizarea pentru introducerea unor secvențe de program în cadrul paginilor Web. Există limbaje ce permit scrierea acestor secvențe, precum JavaScript, VBScript; iar specificarea limbajului în care este codat script-ul respectiv se realizează cu ajutorul atributului language.

Fig.3.28. Utilizarea tag-ului <SCRIPT>

Fig.3.28 reprezintă codul pentru utilizarea tag-ului <SCRIPT>, ce îmi oferă posibilitatea de a creea pagini dinamice, animații ale fotografiilor, un meniu animat cu efecte surprinzătoare.

3.3. INSERAREA UNEI HĂRȚI GOOGLE

Fig.3.29. Inserare hartă

Pentru a putea localiza compania, am decis să introduc o hartă Google. Am ales o locație pe hartă, mi-am copiat coordonatele, apoi am introdus link-ul cu ajutorul tag-ului <iframe src=”link”> </iframe> așa cum este prezentat și în Fig.3.30..

Fig.3.30. Inserare hartă

Fig.3.30. prezintă specificarea dimensiunilor pentru un aspect mai plăcut și o utilizare ușoară după inserarea link-ului.

Fig.3.31. Prezentarea hărții

În pagina de contact, vom regăsi harta prezentată în Fig.3.31., care permite identificarea locației companiei, mai exact: Bulevardul Republicii, 130. Putem să facem diverse “mișcări”, nu suntem restricționați. Avem posibilitatea de a vizualiza harta cu străzi sau harta cu imagini din satelit.

CONCLUZII

Interfața unui Web site trebuie să fie un mijloc prin care vizitatorul site-ului va fi sprijinit în căutarea informațiilor dorite și să faciliteze orice mod de interacțiune cu site-ul.

Interfața de site nu trebuie să distragă atenția vizitatoului printr-un design sofisticat și încărcat. Numărul de pași necesari pentru a ajunge la informația dorită trebuie să fie redus. Interfața trebuie să ofere utilizatorului posibilitatea de efectuare a tuturor operațiunilor pentru care a accesat site-ul.

Conținutul site-ului trebuie să fie clar și la obiect, fără un număr foarte bogat de pagini sau informații eronate.

Pentru crearea unui site trebuie să studiem competiția, consumatorii sau utilizatorii site-ului, nevoile, dar și competențele acestora. O interfață de site nu face referire doar la design-ul acesteia, ci modul de ilustrare a conținutului din fiecare pagină ce trebuie să fie unic și particular. Trebuie ținut cont și de nivelul de utilizabilitate, dar și de accesibilitate.

Avantajele unui site Web:

Accesibilitatea în orice moment și de oriunde.

Posibiltatea publicării informațiilor: texte, imagini, materiale multimedia.

Prezența online reprezintă vitalitatea pentru companii. Un site Web, cu un design atrăgător ajută la definirea corespunzătoare a imaginii virtuale a afacerii.

Credibilitatea afacerii – Design-ul de calitate oferit de un site Web profesional poate să ofere o încredere sporită oricărui client-utilizator ce va ajunge pe site și oferă o credibilitate în plus și celor ce vor să achiziționeze produse sau servicii.

Impresionarea clienților prin relatarea experienței și priceperii.

Cunoașterea clienților noi și păstrarea celor vechi – Site-ul Web poate fi folosit pentru creșterea numărului de clienți prin afișarea informațiilor de care aceștia sunt interesați. Website-ul poate să reprezinte un instrument de management a relațiilor de colaborare.

Creșterea vânzărilor – Site-ul Web poate să genereze venituri, fiind o strategie de marketing.

Oferă suport clienților – Site-ul Web informează clienții cu privire la serviciile și produsele companiei. Posibilitatea de a avea un feedback de la clienți.

Dezavantajele întâlnite pe Web:

Culorile fac dificilă lecturarea textelor.

Fonturile și dimensiunile alese nu asigură o lizibilitate crescută.

Implementarea tehnică nu permitea utilizarea pentru sintetizarea vocală.

Realizarea site-ului pentru companie se bazează pe studii pe cont propriu și pe muncă în grafică și design.

Cu ocazia realizării site-ului, mi-am pus în valoare studiile de peste ani în domeniul informaticii, am aprofundat și mai mult studiul în domeniul de interfețe de design. Datorită muncii mele bine structurată și organizată, interfața site-ului este profesională.

Consider că redactarea disertației a fost un proces de sistematizare a lucrurilor pe care le-am cunoscut pe timpul facultății, master-ului și întreg proiectul – din faza inițială până la faza de documentare pentru redactarea disertației și scrierea acesteia, a fost o ocazie deosebită de avansare pe plan profesional. Colaborarea cu Lect. Univ. Dr. Dumitru Ileana, coordonatorul proiectului, a decurs într-un mod foarte plăcut, foarte bine și a fost benefică pentru rezultatele finale obținute la nivelul site-ului.

Site-ul realizat este accesibil și are un design modern și atractiv. Dispune de o structură foarte bine organizată, iar conținutul redactat este bun.

Scopul proiectului a fost atins, dar acest lucru nu reprezintă faptul că evoluția acestui site se va opri aici.

Mulțumesc profesorilor UPG și mai ales profesorului coordonator, Dumitru Ileana pentru că au făcut posibilă realizarea acestui proiect de disertație, ce nu are doar parte teoretică, ci are și o aplicabilitate practică.

BIBLIOGRAFIE

Runceanu, A., Runceanu, M., (2009), Tehnologii și aplicații Web – îndrumar de laborator, Editura Academică Brâncuși, Târgu-Jiu.

Buraga, S., Proiectarea site-urilor Web (ediția a doua), Polirom, Iași, 2005.

Somnea, D., Calciu, M., (2005), JSP, ASP, XML, XSLT, XHTML/HTML/CSS , Editura ASE.

Stamate, E. L., (2005), Crearea li publicarea unui site web. Limbajul HTML și elemente de web design, Editura Paralela 45

Ducket, J., (2009), Beginning HTML, XHTML, CSS and JavaScript, Wiley Publishing.

Dumitrașcu, L., (2003), (X)HTML, Editura Universității din Ploiești.

Dumitrașcu, L., (2006), Crearea site-urilor Web, Editura Universității din Ploiești.

Gugoiu, T., HTML, XHTML, CSS și XML prin exemple, Editura Teora.

Tudor, S., Huțanu, V., (2004), Crearea și programarea paginilor WEB, București, L&S Infomat.

BIBLIOGRAFIE INTERNET

http://www.csstutorial.net/

http://www.html.am/html-tutorial/

http://www.w3schools.com

http://www.w3resource.com/html-css-exercise/basic/

http://werbach.com/barebones/ro_barebone.html

https://tutorialehtml.com/

http://vega.unitbv.ro//~jipa/ui/p2_cap4.pdf

8.

https://www.w3.org/Consortium/facts.html

9. https://manualelectronictic.wordpress.com/cuprins/

10. https://coderthemes.com/adminox/horizontal/icons-typicons.html