Websites Engineering - Arhitectura WEB

1
2. Arhitectura WEB
2
Arhitectura WEB > Fișiere și foldere
Website = Colecție de pagini web
WEB Engineering | Răzvan ONOFREI – WEB Engineering Expert @ BLUE DREAM MEDIA, Razvan.ONOFREI@blue-dream-media.ro, +40 724 17 62 40
3
Fiecare pagină web este un fișier (*.html, *.php etc.)
4
Pe lângă fișierele care reprezintă paginile web propriu-zise, în arhitectura unui

website se mai regăsesc și fișiere cu resurse:
- fișiere media – imagini, fișiere audio, fișiere video, fonturi etc.
- fișiere pentru formatări
- fișiere pentru interactivitate
- documente
- etc.
5
css style.css
img produs-1.jpg
produs-2.jpg
produs-3.jpg
js map.js
produse.html
servicii.html
contact.html
6
Arhitectura WEB > Adrese WEB (URL)
http://faima.upb.ro/contact.html
contact.html
faima.upb.ro
...
7
http://faima.upb.ro/evenimente/deschidere-festiva.html
evenimente contact.html
faima.upb.ro
...
8
http://faima.upb.ro/departamente/inginerie-economica/ionel-ionescu/photo.jpg
photo.jpg
departamente inginerie-economica ionel-ionescu
cv.pdf
faima.upb.ro marin-marinescu
programe marketing
evenimente ... ... ...

...
9
http://faima.upb.ro/home.html
home.html
faima.upb.ro
...
10
http://faima.upb.ro
11
http://faima.upb.ro
index.html
contact.html
faima.upb.ro
...
12
http://faima.upb.ro/contact.html
http://faima.upb.ro/contact
13
http://faima.upb.ro/contact
index.html
index.html
faima.upb.ro contact index.html

faima.upb.ro contact.html
... ...
14
Adrese: utilizate în apelarea unor fișiere de către alte fișiere (de ex. apelarea unui fișier imagine de
către un fișier html).
15
Adrese absolute
Ex: http://faima.upb.ro/departamente/inginerie-economica/ionel-ionescu/photo.jpg
• Avantaj: se pot utiliza în orice situație, atât la apelarea resurselor externe (de pe alte servere) cât și a acelor
interne (de pe acelși server).
• Avantaj: riscul de erori în procesul de dezvoltare, datorate sintaxei (care este foarte simpă) este foarte mic
• Dezavantaj: conțin un număr mare de caractere, ceea ce înseamnă un risc de erori la dezvoltare mai ridicat
din acest motiv, un volum de muncă mai mare, o mărime mai mare a fișierelor.
16
Adese relative
foto-01.jpg
evenimente deschidere-festiva img
...
... ... ... index.html
img/foto-01.jpg
17
Adese relative
foto-01.jpg
evenimente deschidere-festiva img
... ... ...

profesori ionel-ionescu index.html
... ...
../../evenimente/deschidere-festiva/img/foto-01.jpg
18
Adrese absolute
• Avantaj: se pot utiliza în orice situație, atât la apelarea resurselor externe (de pe alte servere) cât și a acelor
interne (de pe acelși server).
• Avantaj: riscul de erori în procesul de dezvoltare, datorate sintaxei (care este foarte simplă) este foarte mic
• Dezavantaj: conțin un număr mare de caractere, ceea ce înseamnă un risc de erori la dezvoltare mai ridicat
din acest motiv, un volum de muncă mai mare, o dimensiune mai mare a fișierelor.
Adrese relative
• Dezvantaj: se pot utiliza doar la apelarea resurselor interne (de pe acelși server).
• Dezavantaj: riscul de erori în procesul de dezvoltare, datorate sintaxei mai complicate, este mai mare
• Avantaj: conțin un număr mic de caractere, ceea ce înseamnă un risc de erori la dezvoltare mai scăzut din
acest motiv, un volum de muncă mai mic, o dimensiune mai mică a fișierelor.
19
Arhitectura WEB > Definirea culorilor
20
• Pentru fiecare dintre cele 3 culori (RED, GREEN, BLUE) există 256 de niveluri de intensitate (0-255). Astfel,
prin combinarea acestora este posibilă afișarea a unui număr de 2563=16.777.216 nuanțe.
• Exemple
R-255, G-0, B-0 – roșu
R-0, G-0, B-0 – negru
R-255, G-255, B-255 – alb
21
• Dintre acestea doar 140 pot fi definite prin numele lor
(http://www.w3schools.com/colors/colors_names.asp)
22
• Pentru celelalte, definirea se face printr-un cod care conține valori hexazecimale pentru nivelul de intensitate al fiecărei
dintre cele trei culori (RGB).
• Exemplu: #A0C457
• Există o mulțime de aplicații care pot determina codul pentru o anumită culoare dată.
23
Arhitectura WEB > Sintaxă
HTML – conținut
CSS - formatări
PHP - interactivitate
JS - interactivitate
24
Arhitectura WEB > Sintaxă
http://www.w3schools.com
25
Arhitectura WEB > Sintaxă > HTML
26
• Elemente:
• Conținut
• Etchetă – definește tipul și proprietățile conținutului
27
<etichetă_deschidere>conținut</etichetă_inchidere>
28
<p>Ana are mere!</p>
29
<p>Ana are mere!</p> - CORECT

<p>Ana are mere!<p> - INCORECT
<p>Ana are mere! - INCORECT
30
Nesting Structure
Elementele pot conține în structura lor alte elemente (structură
ierarhizată)
31
<section>
<p>Ana are mere!</p>
<p>Merele sunt roșii!</p>
</section>
32
<strong><p>Ana are mere!</p></strong> - CORECT

<p><strong>Ana are mere!</strong></p> - CORECT
<p><strong>Ana are mere!</p></strong> - INCORECT
<strong><p>Ana are mere!</strong></p> - INCORECT
33
<etichetă>
34
<br>
35
<etichetă_deschidere atribut=“valoare atribut”>conținut</etichetă_inchidere>
<etichetă atribut=“valoare atribut”>
36
<img width=“520”>
37
<img width=“520” height=“440”>
38
Atribute obligatorii
Atribute opționale
39
Elemente de bază
<HTML> … </HTML>
• Defineşte documentul ca fiind de tip HTML, făcându-l recognoscibil pentru browser-ele web.
• Reprezintă elementul “rădăcină” al unui document HTML.
40
Elemente de bază
<BODY> … </BODY>
• Reprezintă conținutul unui document HTML (text, imagini etc.), vizibil pentru user.
41
Elemente de bază
<HEAD> … </HEAD>
• Conţine o serie de elemente care definesc documentul HTML şi al căror conţinut, în cea mai mare parte a
sa, nu este vizibil pentru user.
42
Elemente de bază
<HTML>
<HEAD>
…
</HEAD>
<BODY>
…
</BODY>
</HTML>
43
Elemente pentru secțiunea BODY > Elemente de structură a conținutului
<DIV> … </DIV>
• Element generic pentru un segment din stuctura unei pagini web.
44
<DIV>
<P>Ana are mere!</P>
<BR>
<P>Merele sunt coapte!</P>
</DIV>
45
<DIV>
<DIV>…</DIV>
<DIV>…</DIV>
</DIV>
46

<HEADER > … </HEADER>
<FOOTER> … </FOOTER>
<MAIN > … </MAIN>
<NAV > … </NAV>
<SECTION > … </SECTION>
<ARTICLE > … </ARTICLE>
• Definesc anumite tipuri de segmente din structura unei pagini web.
• Funcționalitatea lor este absolut identică cu cea a elementului <DIV> … </DIV>, ceea ce înseamna ca din
punct de vedere al experienței user-ului nu există nicio diferență între ele. În aceste condiții de ce sunt
aceste elemente necesare?
47
<SPAN> … </SPAN>
• Izolează un segment de conţinut în vederea aplicării unei formatări specifice.
48
<P>Ana are <SPAN>mere</SPAN>!</P>
49
Elemente pentru secțiunea BODY > Elemente pentru conținut de tip text
<P> … </P>
• Defineşte conţinutul său ca fiind la modul cel mai generic un paragraf.
• Implicit, înainte şi după un paragraf, se creează un spaţiu.
50
<H1> … </H1>
<H2> … </H2>
<H3> … </H3>
<H4> … </H4>
<H5> … </H5>
<H6> … </H6>
• Definesc titluri şi subtitluri de diferite nivele ierarhice.
• Paragrafele și titlurile permit orice fel de formatare, ceea ce înseamna ca din punct de vedere al experienței
user-ului nu există nicio diferență între ele. În aceste condiții, de ce sunt aceste elemente necesare?
51
<BR>
• Creează o întrerupere forţată de rând.
• Poate fi utilizat și pentru a defini un spațiu între doua elemente, pe verticală.
52
Elemente pentru secțiunea BODY > Elemente pentru conținut de tip imagine
<IMG>
• Defineşte conţinutul său ca fiind o imagine.
53
<IMG SRC=“…”>
• Specifică adresa fișierului imagine.
• Atribut obligatoriu.
54
<IMG SRC=“img/photo/ionel-ionescu.jpg”>
55
<IMG SRC=“http://faima.upb.ro/img/photo/ionel-ionescu.jpg”>
56
<IMG WIDTH=“…” HEIGHT=“…”>
• Specifică lățimea, respectiv înălțimea imaginii.
• Dacă este specificată ca număr, dimensiunea este considerată ca fiind măsurată in pixeli, iar dacă aceasta
este specificată ca valoare procentuală, atunci este considerată ca fiind procent din dimensiunea
containerului care conține imaginea.
• Imaginea este afișată corect și în absența acestor atribute. În aceste condiții sunt acestea atribute
obligatorii???
57
<IMG ALT=“…”>
• Specifică un text descriptiv pentru imagine, invizibil pentru user dar vizibil pentru motoarele de căutare și
pentru alte sisteme web.
• Atribut obligatoriu???
• Atribut util???
58
<IMG SRC=“img/photo/ionel-ionescu.jpg” ALT=“Ionel IONESCU”>
59
<IMG TITLE=“…”>
• Specifică un text descriptiv pentru imagine, vizibil pentru user, la acțiunea de Mouseover.
• Acest atribut poate fi folosit pentru orice element de conţinut, dar este folosit cu precădere pentru
elementele <IMG> și <A>.
• Atribut opțional.
• Atribut util???
• Atribut util în cazul existențri atributului ALT???
60
<IMG SRC=“img/photo/ionel-ionescu.jpg” ALT=“Ionel IONESCU” TITLE=“Ionel

IONESCU” >
61
Elemente pentru secțiunea BODY > Elemente pentru legături (link-uri)
<A> ... </A>
• Este utilizat pentru a aplica o legătură asupra conţinutului elementului.
62
• Mai poate fi folosit și pentru atribuirea unui nume pentru un reper dintr-o pagină web către care se doreşte a
se realiza legături.
63
<A HREF=“…”> ... </A>
• Specifică adresa către care se face legătura.
64
<P>Programul TV este disponibil <A HREF=“program-tv.html”>aici </A>.</P>
65
<A TARGET=“…”> ... </A>
• Specifică unde va fi afişată resursa WEB către care se face legătura.
• Dacă acest atribut nu există, afișarea se va face în aceiași fereastră. Dacă se dorește afișarea intr-o
fereastra nouă, atributul trebuie să ia valoarea “_blank”.
• Atribut opțional.
66
<A NAME=“…”></A>
• Atribuie un nume unui reper dintr-o pagină web către care se doreşte a se realiza legături, atunci când
elementul este utilizat în acest scop.
• Exemplu:
 În pagina de destinație: <A NAME=“nume”></A><P>Text text ...</P>
 În pagina cu link-ul: <A HREF=“pagina-destinatie.html#nume”> ... </A>
67
Elemente pentru secțiunea BODY > Elemente de formatare
<STRONG> ... </STRONG>

<EM> ... </EM>
• Determină scrierea îngroşată, respectiv cursivă, a textului conţinut în element.
• Se pot obține efecte identice prin fomatarea cu ajutorul CSS. În aceste condiții de ce sunt aceste elemente
utile?
68
Elemente pentru secțiunea BODY > Elemente de formatare
<P>Ana are <STRONG>mere</STRONG>.</P>
69
Elemente pentru secțiunea HEAD
<TITLE> ... </TITLE>
• Specifică titlul documentului, vizibil pe bara de titlu a browser-ului.
70
<TITLE> Cabinet Stomatologic Sector 3 – Zana Maseluta | Servicii </TITLE>
71

<META>
• Specifică diferite informaţii în legătură cu pagina web web, invizibile pentru user dar vizibil pentru motoarele
de căutare și pentru alte sisteme web.
72
<META NAME=“…”>
• Defineşte categoria de informaţii specificate (ex. “description”).
73
<META CONTENT=“…”>
• Specifică informaţiile.
74
<META NAME=“description” CONTENT=“Cabinet stomatologic sector 3 –

urgente, terapie, estetica dentara, chirurgie”>
75
<LINK>
• Apelează o resursă externă (fișier CSS, fișier JS etc.).
76

<LINK HREF=“…”>
• Specifică adresa resursei apelate.
77

<LINK REL=“…”>
• Specifică rolul resursei apelate.
78
<LINK HREF=“css/style.css” REL=“stylesheet”>
79
Arhitectura WEB > Sintaxă > CSS
80
Arhitectura WEB > Sintaxă > 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:
p {color:#80b0ff; height:5px; text-align:center;}

în care:
- selectorul este p
- declarațiile sunt:
color:#80b0ff; cu proprietatea “color” și valoarea proprietății “#80b0ff”
height:5px; cu proprietatea “height” și valoarea proprietății “5px”
text-align:center; cu proprietatea “text-align” si valoarea proprietății “center”
81
Arhitectura WEB > Sintaxă > CSS > Definire și aplicare
Selector de tip element HTML
Exemplu:
Definire: p {color:#80b0ff; height:5px; text-align:center;} – într-un fișier CSS
Aplicare: automată
82
Selector de tip clasă
Exemplu:
Definire: .stil-1 {color:#80b0ff; height:5px; text-align:center;} – într-un fișier CSS
Aplicare: <p class="stil-1”>…</p> – în fișierul HTML
83
Selector multiplu
Exemple:
Definire: p, a {color:#80b0ff; height:5px; text-align:center;}
p, stil-1 {color:#80b0ff; height:5px; text-align:center;}
84
Selector contextual
Exemplu:
Definire: p a {color:#80b0ff;}
<P>Programul TV este disponibil <A HREF=“program-tv.html”>aici </A>.</P>
p stil-1 {color:red;}
<P>Pe data de 20 august magazinul nostru este <SPAN CLASS=“stil-1”> închis</SPAN>.</P>
85
Stil multiplu
Exemplu:
Aplicare: <p class="stil-1 stil-2”>…</p>
86
Arhitectura WEB > Sintaxă > CSS > Atribute uzuale
width:100px
width:23%
height:300px
height:4%
87
margin-top:100px
margin-bottom:100px
margin-right:150px
margin-left:80px
margin-top:24%
margin-bottom:10%
margin-right:1%
margin-left:8%
88
float:left

DIV 1
DIV 1 DIV 2
DIV 2
89
overflow:visible;
overflow:hidden;
overflow:scroll;
overflow:auto;

90
background-color:green
background-color:#AD9654
91
background-image:url(“img/fundal.jpg”)
92
93
94
background-repeat:repeat-x
95
background-repeat:repeat-y
96
background-repeat: no-repeat
97
background-position:50px 100px
98
background-position:right top
99
100
background-position:-100px 0px
101
background-attachment:scroll
background-attachment:fixed
102
font-family: Georgia, Times New Roman, Arial
103
font-size:14px
104
font-weight:bold
105
text-align:justify
106
color: red
color: #00ff00

Websites Engineering - Arhitectura WEB

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Websites Engineering - Arhitectura WEB

Încărcat de

Drepturi de autor:

Formate disponibile

1

Website = Colecție de pagini web

Fiecare pagină web este un fișier (*.html, *.php etc.)

Pe lângă fișierele care reprezintă paginile web propriu-zise, în arhitectura unui

departamente inginerie-economica ionel-ionescu

evenimente ... ... ...

faima.upb.ro contact index.html

evenimente deschidere-festiva img

evenimente deschidere-festiva img

... ... ...

<p>Ana are mere!</p>

<p>Ana are mere!</p> - CORECT

<strong><p>Ana are mere!</p></strong> - CORECT

<etichetă_deschidere atribut=“valoare atribut”>conținut</etichetă_inchidere>

<etichetă atribut=“valoare atribut”>

<img width=“520” height=“440”>

• Reprezintă elementul “rădăcină” al unui document HTML.

Elemente pentru secțiunea BODY > Elemente de structură a conținutului

• Element generic pentru un segment din stuctura unei pagini web.

Elemente pentru secțiunea BODY > Elemente de structură a conținutului

Elemente pentru secțiunea BODY > Elemente de structură a conținutului

Elemente pentru secțiunea BODY > Elemente de structură a conținutului

Elemente pentru secțiunea BODY > Elemente de structură a conținutului

Elemente pentru secțiunea BODY > Elemente de structură a conținutului

<P>Ana are <SPAN>mere</SPAN>!</P>

• Defineşte conţinutul său ca fiind la modul cel mai generic un paragraf.

• Implicit, înainte şi după un paragraf, se creează un spaţiu.

• Creează o întrerupere forţată de rând.

• Poate fi utilizat și pentru a defini un spațiu între doua elemente, pe verticală.

• Defineşte conţinutul său ca fiind o imagine.

• Specifică adresa fișierului imagine.

<IMG WIDTH=“…” HEIGHT=“…”>

• Specifică lățimea, respectiv înălțimea imaginii.

<IMG SRC=“img/photo/ionel-ionescu.jpg” ALT=“Ionel IONESCU”>

• Atribut util în cazul existențri atributului ALT???

<IMG SRC=“img/photo/ionel-ionescu.jpg” ALT=“Ionel IONESCU” TITLE=“Ionel

Elemente pentru secțiunea BODY > Elemente pentru legături (link-uri)

<A> ... </A>

• Este utilizat pentru a aplica o legătură asupra conţinutului elementului.

Elemente pentru secțiunea BODY > Elemente pentru legături (link-uri)

Elemente pentru secțiunea BODY > Elemente pentru legături (link-uri)

<A HREF=“…”> ... </A>

• Specifică adresa către care se face legătura.

Elemente pentru secțiunea BODY > Elemente pentru legături (link-uri)

<P>Programul TV este disponibil <A HREF=“program-tv.html”>aici </A>.</P>

Elemente pentru secțiunea BODY > Elemente pentru legături (link-uri)

<A TARGET=“…”> ... </A>

• Specifică unde va fi afişată resursa WEB către care se face legătura.

Elemente pentru secțiunea BODY > Elemente pentru legături (link-uri)

Elemente pentru secțiunea BODY > Elemente de formatare

<STRONG> ... </STRONG>

Elemente pentru secțiunea BODY > Elemente de formatare

<P>Ana are <STRONG>mere</STRONG>.</P>

Elemente pentru secțiunea HEAD

<TITLE> ... </TITLE>

• Specifică titlul documentului, vizibil pe bara de titlu a browser-ului.

Elemente pentru secțiunea HEAD

<TITLE> Cabinet Stomatologic Sector 3 – Zana Maseluta | Servicii </TITLE>

Elemente pentru secțiunea HEAD

Elemente pentru secțiunea HEAD

• Defineşte categoria de informaţii specificate (ex. “description”).

Elemente pentru secțiunea HEAD

Elemente pentru secțiunea HEAD

Fiecare pagină web este un fișier (.html, .php etc.)