Structura unui Site Web

11
2010 Universitatea POLITEHNICA din Bucureşti Facultatea de Chimie Aplicată şi Ştiinţa Materialelor Master : Management şi Inginerie Economică CasaTa Coordonator: Prof. Ing. Radu DRAGOMIR Prof. Ing. Răzvan ONOFREI Masterand: Nicoleta MIHALCEA Olesea FLOREA

Transcript of Structura unui Site Web

Page 1: Structura unui Site Web

2010

Universitatea POLITEHNICA din Bucureşti

Facultatea de Chimie Aplicată şi Ştiinţa Materialelor

Master : Management şi Inginerie Economică

CasaTa

Coordonator: Prof. Ing. Radu DRAGOMIR

Prof. Ing. Răzvan ONOFREI

Masterand: Nicoleta MIHALCEA

Olesea FLOREA

Page 2: Structura unui Site Web

1

Cuprins

Argument 2

Capitolul 1 2

1.1 Scurt istoric 2

1.2 Introducere 3

Capitolul 2 3

Capitolul 3 5

Concluzii 9

Bibliografie 10

Page 3: Structura unui Site Web

2

Argument

Am ales ca subiect această temă de proiect deoarece mi s-a părut foarte interesant domeniul

imobiliarelor. Sunt de părere că această tehnologie modernă este accesibilă tuturor prin intermediul

calculatorului și al internetului care a deschis o lume nouă în domeniul învăţământului și al

divertismentului.

Pagina web este o parte foarte importantă din internet, site-ul web reprezintă "cartea de

vizită" a unei firme pe internet. Prin crearea de site-uri web firmele îşi pot prezenta obiectul de

activitate, principiile, produsele, serviciile, portofoliul, datele de contact cu ajutorul unui layout

grafic atractiv.

Capitolul 1

1.1 Scurt istoric

Primul webdesigner a fost chiar inventatorul www-ului, Tim Berners Lee, care a publicat

primul site din istorie în anul 1991. La început site-urile nu erau nici pe departe atât de complexe și

încărcate grafic cum sunt în prezent, limbajul utilizat - HTML - fiind nu prea puternic și permiţând

numai o serie limitată de formatări, precum și inserarea de link-uri, pentru a putea "lega" paginile

între ele, webdesignul fiind, de fapt, mai mult "programare" web.

În prezent preocuparea pentru aspectul grafic al siteurilor, devenite puternice instrumente

publicitare și comerciale, justifică în intregime denumirea de "webdesign", iar tehnologiile utilizate

s-au diversificat și au devenit din ce în ce mai complexe. Firmele care produc site-uri lucrează cu

angajaţi specializaţi pentru fiecare etapă a dezvoltării unui site, de la stadiul de concepţie grafică la

programare și editare de conţinut pentru SEO (Search Engine Optimization - optimizarea site-urilor

pentru motoarele de căutare).

Site-urile actuale sunt din ce în ce mai mult axate pe animaţie interactivă și dinamism, aceste

deziderate fiind îndeplinite de exemplu de cunoscutul program Adobe Flash, precum și de alte

programe apărute după acesta, care pot genera automat fişiere animate cu extensia .swf.

Page 4: Structura unui Site Web

3

1.2 Introducere

Site-urile, în forma în care ele se afisează în browsere, sunt de fapt interpretări vizuale,

menite să fie întelese de orice persoana, fără să fie necesare cunoștințe în domeniul informaticii sau

al secvenţelor de cod redactate de programatori. Aceștia lucrează ori în diverse limbaje din care apoi

se generează limbajul specific de script al internetului HTML (HyperText Markup Language), ori

direct in HTML. Dacă nu ar exista browserele care știu să interpreteze limbajul de script și să

afișeze rezultatul pe ecran, site-urile ar fi doar înşiruiri de texte neformatate și, cel mai probabil, fără

imagini. În principiu, limbajul HTML indică locul în care să se afișeze diversele elemente vizibile,

dimensiunea, culoarea, precum și alți parametri care conferă unei pagini web atât aspectul dorit cât

și funcţionalitate optimă.

Capitolul 2

Ce este un site ?

Un site web este o colecţie de documente (similare unei colecţii de documente word). Spre

deosebire de acestea, documentele care formează site-ul (pe care le vom numi pagini) nu sunt

independente unele de altele ci sunt legate printr-un sistem care se numeşte sistemul de navigare în

cadrul site-ului. Paginile site-ului sunt create cu ajutorul unui limbaj numit HTML. În spatele

oricarei pagini web stă codul HTML al paginii. Vizualizarea codului sursa HTML poate fi realizată

selectând din meniul View al browserului optiunea Source. Cu ajutorul limbajului HTML pot fi

incluse într-o pagină web texte, imagini, legături către alte pagini din site sau către web, liste, tabele,

formulare.

Tehologii folosite

A) HTML. Aşa cum spuneam, paginile web sunt create cu ajutorul limbajului HTML. Acesta nu

este un limbaj de programare propriu zis, ci un limbaj de marcare. Prin intermediul său

programatorul stabileşte ce elemente vor face parte din pagina web și care va fi aspectul

acestora. Acest lucru se realizează cu ajutorul unor cuvinte cheie incluse între paranteze

unghiulare care se numesc tag-uri. În afara limbajului HTML, la realizarea unui site pot

participa și alte limbaje sau tehnologii.

Page 5: Structura unui Site Web

4

B) CSS. Prescurtare de la Cascading Style Sheets, foi de stiluri în româneşte. Servesc la

stabilirea unui aspect unitar pentru elementele care fac parte din pagina web și modificarea cu

uşurinţă a lor. De exemplu, dacă vom crea o pagina de stiluri în care vom stabili ca titlurile

care apar în site vor fi de culoare roşie și marimea de 20 de pixeli, în cazul când aş dori

modificarea culorii nu va mai fi necesar să modific fiecare pagină a site-ului. Este suficient să

modific pagina de stiluri și toate paginile îşi vor modifica aspectul în consecinţă.

C) Flash. Tehnologia Flash, creată de compania Macromedia, permite realizarea de animaţii

complexe și aplicaţii multimedia care includ animaţie, muzică, film. Exista două curente în

web design în legătură cu tehnologia Flash:

� Realizarea site-urilor în întregime în Flash. În acest caz partea de HTML se reduce la

câteva tag-uri care includ aplicația Flash. Dezavantaje: se încarcă greu pe conexiuni

dial-up, este prost indexata de motoarele de cautare.

� Realizarea de site-uri mixte: HTML și Flash. Este varianta pentru care optam noi. Site-

urile sunt realizate în HTML (sau PHP) iar elementele de animaţie sunt realizate în

Flash.

Page 6: Structura unui Site Web

5

Capitolul 3

Cum se construieşte un site

Pentru a realiza designul unui site sunt folosite o serie de tehnici cu ajutorul cărora paginile

capătă contur, atât din punct de vedere vizual cât și din punct de vedere al organizării legăturilor și

al amplasării conţinutului în pagini. În continuare sunt prezentate câteva dintre aceste tehnici, fiecare

dintre ele referindu-se la câte un aspect al designului site-ului nostru.

Elemente de bază

<HTML>...</HTML>

Definește documentul ca fiind de tip HTML (în absența lui browserele web nu recunosc documentul

ca fiind de tip HTML) și este elementul “rădăcină” al unui astfel de document. Acesta conține un

element <HEAD>...</HEAD> și un element <BODY>…</BODY>. Structura corectă a unui

document.

<HEAD>...</HEAD>

Conține o serie de elemente care definesc documentul HTML și care nu apar în mod explicit în

partea vizibilă pentru utilizatori.

<BODY>…</BODY>

Conține toate elementele documentului HTML care sunt vizibile pentru utilizatori. Elemente de

aranjare în pagină.

<P>…</P>

Definește conținutul sau ca fiind un paragraf.

<BR />

Crează o întrerupere forțată de rând.

<H1>…</H1>

<H2>…</H2>

Definesc titlurile și subtitlurile conținutului paginii web.

Page 7: Structura unui Site Web

6

<DIV>…</DIV>

Definește un segment al conținutului unei pagini web. În general se grupează în acest element mai

multe elemente cărora se dorește să li se atribuie aceiași formatare. Ca și în cazul paragrafului, se

crează în mod automat un spațiu înainte și după conținutul acestui element. Atributele opționale

folosite sunt:

ALIGN

Definește modul de aliniere a conținutului, pe orizontală.

- left – aliniere la stânga

- right – aliniere la dreapta

- center – aliniere centrată

- jutify – aliniere simultan la stânga și la dreapta.

Elemente pentru imagini

<IMG />

Inserează o imagine. Ca atribut obligatoriu am utilizat:

SRC

Specifică adresa absolută sau relativă a fișierului imagine, folosit pentru fundalul paginii web. Ca

atribute opționale am utilizat:

WIDTH

Specifică lățimea imaginii ca numar de pixeli sau ca procent.

HEIGHT

Specifică înălțimea imaginii ca numar de pixeli sau ca procent.

Elemente pentru legaturi

<A>…</A>

Aplică o legătură asupra conținutului elementului. Ca atribute obligatorii am utilizat:

HREF

Specifică adresa absolută sau relativă către care se face legatura.

NAME

Specifică numele unui reper dintr-o pagina web către care se dorește a se realiza o legătură.

Page 8: Structura unui Site Web

7

Elemente pentru tabele

<TABLE>…</TABLE>

Definește un tabel. Acest element nu poate conține decât elemente <TR>…</TR>. Atribute

optionale:

WIDTH

Specifică lățimea tabelului, ca număr de pixeli sau ca procent.

HEIGHT

Specifică înălțimea tabelului ca numar de pixeli sau ca procent.

BACKGROUND

Specifică adresa absolută sau relativă a fișierului imagine, folosit pentru fundalul tabelului.

CELLPADDING

Specifică distanța în pixeli a conținutului celulei în raport cu chenarul acesteia.

ALIGN

Definește modul de aliniere a conținutului celulei, pe orizontală.

- left – aliniere la stânga

- right – aliniere la dreapta

- center – aliniere centrată

- jutify – aliniere simultan la stănga și la dreapta

Elemente pentru zona HEAD

<META />

Specifică o serie de informații în legătură cu pagina web. Aceste informații sunt afișate pe pagina

web, însa sunt accesibile motoarelor de căutare.

<LINK />

Definește o legătură între pagina web și o resursă externă.

Alte elemente utilizate

<!DOCTYPE ...>

Acesta nu este propriu-zis un element ci o declarație care se scrie pe primul rând al documentului

HTML, înaintea elementului “rădăcină” <HTML>...</HTML>, și care specifică versiunea

limbajului HTML utilizată.

Page 9: Structura unui Site Web

8

Pentru definirea stilului fiecărui element și atribut utilizat am folosit CSS.

Definirea unui stil CSS are două componente, un selector și o listă de declarații. Fiecare

declarație constă dintr-o proprietate și o valoare a acesteia.

Exemplu:

h1{font-family:Geneva,sans-serif;font-size:60px;

color:#D2691E;float:left;position:relative;margin-top:75px;margin-left:50px;z-index:2; }

în care:

� selectorul este h1

� listele de declaratii sunt: font-family:Geneva, sans-serif; font-size:60px;

color:#D2691E;float:left;position:relative;margin-top:75px;margin-left:50px;z-index:2;

Page 10: Structura unui Site Web

9

Concluzii

Prin web sau webdesign se înţelege în general realizarea de site-uri web, de la momentul

conceperii structurii și interfeţei grafice și până la finalizarea programării și introducerea propriu-

zisă a datelor - imagini, text, fişiere și alte elemente - care alcătuiesc conținutul site-ului.

Crearea de site-uri web (realizarea de site-uri web) este o metodă excelentă de promovare a

unei firme ținând cont că în momentul de față cel mai facil mod de căutare este mediul online și tot

mai mulţi oameni au acces la internet.

Spre deosebire de materialele promoţionale tiparite care trebuiesc refăcute la apariția unor

produse sau servicii noi, site-urile de prezentare sunt uşor de actualizat.

Page 11: Structura unui Site Web

10

Bibliografie

1. R. Dragomir, Note de curs, An universitar 2010-2011

2. R. Onofrei, Note de curs, An universitar 2010-2011

3. PC pas cu pas, Cerchez Emanuela, Şerban Marinel, Editura Polirom

4. Informatică Generală, Tr. Surcel, Gh. Sofronie, C. Baron, Editura Teora

5. www.scoala.ro/referate/informatica_dezvoltarea_siteurilor_web.html