Lecia 3 Instalare, configurare servere de Web i primii pai in

HTML
3.1. Ce este un server WEB i cum comunic un server cu clienii: Porturi de comunicaie 80 i 443
pentru HTTPS
3.2. Procedura de instalare a unui IIS in Windows XP cu SP2
3.3. Lansarea n execuie Baby Web Server. Configurri de baz.
3.4. Crearea primului fiier HTML. Structura documentului.

3.1. Ce este un server WEB i cum comunic un server cu clienii: Porturi de comunicaie 80
i 443 pentru HTTPS
Fr a fi cdea n pcatul de a fi prea tehnici, i cu trimitere la capitolul II al cursului de afaceri
electronice sau chiar mai mult la materiale pe tema reelelor de calculatoare, prezentm mai jos
cteva concepte de ajutor dezvoltatorului web n primii si pai.
World Wide Web-ul - WWW - sau, pe scurt, Web-ul, este un context hard i soft care permite
accesarea facil a informaiilor rspndite pe mii de calculatoare interconectate ("servere web") ce
fac parte din Internet.
Internetul este alctuit dintr-o reea de calculatoare numite servere pe care se afla diverse fiiere.
Numele de server vine de la faptul ca aceste calculatoare "servesc" (transmit) fiierele pe care le
stocheaz oricrui alt calculator (aflat n postura de "client") care le solicit acest lucru. Aceste
fiiere pot fi pagini web, fiiere text sau multimedia, programe, etc. Calculatoarele personale se
conecteaz la reeaua Internet i solicit serverelor fiiere, din aceast cauza ele aflndu-se n
postura de "client".
Fiecare calculator conectat la Internet are atribuit un numr unic de identificare, care reprezint
adresa Internet, URL/URI/URN (universal resource locator/uniform resource identifier/universal
resource name), adic modalitate de localizare a unui punct din Web prin denumiri simbolice unice.
Este greu s memorm adrese absolute de IP (ex. 193.226.23.4) i atunci se prefer asocierea
acestor notaii (adrese) simbolice a unor numere (www.uaic.ro). Orice portal Web i orice domeniu
are i o astfel de adres simbolic.
Atunci cnd calculatoarele "comunic" ntre ele sunt folosite "limbaje" speciale numite protocoale.
Protocoalele de tip "client-server" stau la baza funcionalitii oricrei reele de calculatoare deci i
a Internetului.
Cel mai cunoscut protocol "client-server" n reeaua Internet este protocolul HTTP (HyperText
Transfer Protocol) care se definete ca un protocol de transfer a fiierelor de tip hipertext care nu
sunt altele dect paginile web. Iniial protocolul HTTP era folosit exclusiv pentru transferul de
pagini web, nsa ulterior el a fost mbuntit i n momentul de fa cu ajutorul lui se pot transfera
i alte tipuri de fiiere (de ex. fiiere multimedia).
O interaciune HTTP const dintr-o cerere de tip text, urmat de un rspuns care const n fiierul
transferat. Se poate spune c protocolul HTTP este format din mulimea cererilor (uzual GET ...) de
la programele de navigare (browsere) ctre servere i din mulimea rspunsurilor trimise de acestea.
HTTP este utilizat de ctre navigatoare dar ar putea fi folosit i de ctre o persoan aflat la un
terminal pentru a "discuta" direct cu un server Web, folosind o conectare TCP.
Fiecare calculator i deci i fiecare server are o adres IP. Cum un calculator poate defini mai multe
servicii, trebuie s existe o modalitate de a identifica aceste servicii. Pentru aceasta se folosete
conceptul de port, adic un numr care identific serviciul care trebuie accesat. Pentru a nelege

cel mai bine raiunea pentru care exist acest concept, cel mai uor este s ne gndim la o adres
potal: pentru a gsi o persoan nu este suficient s cunoatem adresa cldirii n care lucreaz
adic adresa IP pentru calculatoare, ci i numrul biroului sau al camerei adic portul.
Numerele porturilor se situeaz n gama 1, ... 65536. Valorile din gama 1, ... 1023 sunt destinate
serviciilor standard. De exemplu, ftp este un serviciu standard care are dedicate porturile 21 i 20.
Alt serviciu standard este cel pentru terminal virtual, telnet; el are portul dedicat 23. Serviciul de
nume de domenii are portul 53, serviciul whois, portul 43, serviciul SMTP, portul 25 etc. Celelalte
porturi cu existen efemer, short lived ports, se afl n ecartul 1024, ... 65536. Acest interval este
divizat n dou. De la 1024 la 41191 este domeniul porturilor nregistrate, registered ports, iar
intervalul 41192 pn la 65536, domeniul porturilor private. De pild serverul Apache pentru
aplicaii tip servlet JSP i pentru aplicaii ce conin scenarii scrsie n limbajele CFML (Macromedia
Coldfusion Markup Lnguage) sau PHP, are portul 8080.
Pe scurt, numrul portului indic serverului serviciul care se dorete accesat. Portul 80 este numrul
portului pentru HTTP (HyperText Transport Protocol), folosit pentru transferul paginilor de pe siteurile Web.
HTTP folosete transmisia n clar a mesajelor sale, ceea ce l face vulnerabil chiar i n faa
atacatorilor novici. O soluie simpl pentru a asigura caracterul privat al navigrii este folosirea unei
extensii a protocolului, denumit HTTP Secure sau HTTPS. Adresele care folosesc acest protocol
sigur pentru comunicaie se pot distinge foarte uor, deoarece ele ncep cu https:// n loc de http://.
Portul folosit n acest caz este 443.

Bibliografia folosit n redactarea acestei seciuni:

1. Meni, G., Afaceri Electronice, Suport de curs Facultatea de Economie i Administrarea
Afacerilor, Iai, 2006
2. Munteanu, A., Greavu, .V., Reele locale de calculatoare, Ed. Polirom, Iai, 2003
3. Surse Internet:
a. http://www.euro.ubbcluj.ro/~alina/cursuri/internet-teorie/3.htm
b. http://www.muntealb.com/ManualExplorator-bn.htm
c. http://www.riti-internews.ro

3.2. Procedura de instalare a unui IIS in Windows XP

Internet Information Services (IIS) este un server Web cu toate caracteristicile necesare pentru
gzduirea de aplicaii Web i servicii Web XML
Pentru activarea acestuia trebuie s parcurgei urmtorii pai:
1. Start, Control Panel
2. Add or remove programs
3. Din fereastra Add or Remove programs apsai pe butonul Add/Remove Windows
Components (din partea stng a ferestrei)
4. n fereastra Windows Components Wizard apsai click pe caseta de Internet Information
Services (IIS)

5. Apsai apoi butonul Details i debifai opiunea SMTP Service dac este activat

6. Apsai Apoi butonul OK, apoi butonul Next din fereastra Windows Components Wizard.
7. ncepe instalarea timp n care v este solicitat locaia CD-ROM-ului de instalare a
Windows XP.
8. La final v apare mesajul de informare c serverul a fost instalat cu succes.
Pentru a verifica dac serverul este funcional, deschidei un browser i scriei adresa:
http://localhost/
Dac se deschide o pagin cu textul UnderConstruction nseamn c serverul d-voastr este
funcional.
Locaia fiierelor este la adresa: C:\InetPub\wwwroot. Acolo trebuie s v salvai toate fiierele pe
care dorii s le accesai din Web.
Ateptm feedback i ntrebri.

3.3. Lansarea n execuie Baby Web Server. Configurri de baz.

Obs. Programul se afl pe discul R: i pe portal
Baby Web Server a fost construit ca o alternativ la serverul IIS oferit de Microsoft. Este un
program util n cazul celor ce dispun de un sistem de operare Windows Professional XP Home
Edition.
Scopul principal este proiectarea unui server web care s suporte i ASP (Active Server Page).
Mod de instalare:
1. Copierea executabilului de pe discul R: pe discul Z: / descrcarea arhivei de pe portal
(seciunea An II - Afaceri Electronice Documente) pe discul personal Z: / rularea aplicaiei
direct de pe discul R:

2. Setai directorul rdcin al paginilor web (pstrai numele paginii implicite index.html)

3. Aplicaia este n acest moment funcional. Pentru a testa funcionalitatea aplicaiei scrie-i
n browserul dumneavoastr: http://localhost sau http://xxx.xxx.xxx.xxx, unde seria
xxx.xxx.xxx.xxx reprezint adresa IP a calculatorului dumneavoastr.

3.4. Introducere n HTML (Hypertext Markup Language). Crearea primului fiier HTML.
Structura documentului.
Ultima versiune a limbajului este 4.01 World Wide Web Consortium (W3C org) este instituia care
reglementeaz i standardizeaz limbajele de marcare. HTML este un subset al SGML din care a
mai rezultat i XML (eXtended Markup Language).
Autorul standardului World Wide Web este Tim Barners-Lee:

1989 face prima propunere pentru primul World Wide Web server, "httpd", i primul
client, "WorldWideWeb" un what-you-see-is-what-you-get (WYSIWYG) hypertext browser/editor;

Decembrie 1990 aceste aplicaii sunt deja disponibile n teste;

Iulie 1991 Internetul ncepe s foloseasc din ce n ce mai mult aceste aplicaii.
Fiecare din cuvintele de mai sus marcate ntre semnele < , > poart denumirea de tag-uri,
reprezentnd cuvinte cheie n structurarea unui document HTML.
Structuri generale
Structura unui document HTML poate fi redat n exemplul urmtor:
<html>
<head>
<title>Acesta este titlul documentului</title>
</head>
<body>
<p>Acesta este un paragraf din cadrul documentului.</p>
</body>
</html>
Tag-ul <HTML> este obligatoriu pentru nceputul i sfritul unui document.
Celelalte tag-uri pot fi opionale.
<HEAD> - Specific header-ul unui document i, pe lng <TITLE> care specific titlul
paginii n browser, pot aprea declaraia diferitelor script-uri, informaii despre document etc.
Fiecare tag care se deschide se recomand a se i nchide, dar nu este o regul obligatorie.
<BODY> - ncadreaz coninutul unui document.
<P> - Declararea unui paragraf se realizeaz cu ajutorul tagului - <P>.
<BR> - Pentru trecerea de la un rnd la altul se poate folosi tagul vid <BR>.
Pentru structurarea unui document se pot utiliza 6 nivele de heading-uri:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
De obicei se folosesc pn la 3 maxim 4 niveluri ntr-un document.
Comentariile care se trec ntr-un document i care nu vor aprea n browser se marcheaz ntre:
<!-- Acesta este un comentariu -->

Exemplificare:
<body>
<h1>Capitolul 1 - Introducere in HTML</h1>
<h2>Structura unui document</h2>
...
<h6>Acesta este ultimul nivel de titluri</h6>
<p> Acesta este un paragraf din cadrul documentului.</p>
<br>
Acesta este al doilea rnd.
</body>
Pentru afiarea centrat a titlurilor, i nu numai se poate folosi tagul
<CENTER>...</CENTER>.
<h1><center>Capitolul 1 - Introducere in HTML</center></h1>
Pentru afiarea unei linii se poate folosi tagul simplu <HR> a crui sintax poate fi extins:
<HR Size=valoare_numeric Color=culoare Width = val_numerica_sau_procent >
<hr size="5" color="Blue" width="55%">
Pentru scrierea caracterelor speciale se folosete &#cod_ASCII;
Setul de caractere recunoscute precum i codurile ASCII pot fi descoperite n Character Map din
Acesoriile SO Windows.
Transformarea din reprezentarea hexazecimal se poate realiza cu ajutorul acesoriului Calculator.
Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si " CR/LF " ce apar in
cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>
<body>
<pre>
Prima linie
A doua linie
A treia linie
</pre>
</body>

Setri ale fondului

Culorea fundalului de pagin se poate stabili prin folosirea atributului BGCOLOR=culoare in tagul
<BODY >, avnd urmtoarea sintax:
<BODY BGCOLOR=nume_culoare sau valoare_hexazecimal>
<body bgcolor="pink">
Pentru folosirea unei imagini ca background pentru fundal se folosete sintaxa:
<body background="imagine.bmp">
Imaginea trebuie salvat n aceiai locaie cu documentul HTML, dar n cazurile n care aceasta nu
se afl n acelai director trebuie declarat calea de pe disc sau de pe web pn la fiierul respectiv.
Setri ale textului
Formatarile la nivel de text se regsesc n tagul <FONT>.
Un font este caracterizat de urmatoarele atribute:

culoare (stabilita prin atributul color);

tipul sau stilul (stabilit prin atributul face);
marimea (definita prin atributul size);
marimea in puncte tipografice (stabilita prin atributul point-size);
grosime (definita prin atributul weight).

<FONT face=denumire_font size=marime_font color=valoare> Text </FONT>

denumire_font - poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy
" sau un font specific instalat pe calculatorului clientului, ca " Times New Roman ", " Helvetica " sau
" Arial "
mrime font - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic si 7 pentru fontul cel mai
mare);
culoare - este o culoare precizata prin nume sau printr-o constructie RGB

Obs.

+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;
-1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.

<font face="Letter Gothic MT" size="4" weight= 500 color="#FF0000">

Acesta este un text de marimea 11 de culoare rosie, font Letter Gothic MT
</font>
Culoarea textului se poate declara i prin intermediul atributului text al etichetei <body> dupa
sintaxa <body text=culoare>.
In urmatorul exemplu textul are culorea rosie.
<body text=red>

text de culoare rosie.

</body>
Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se poate face cu
ajutorul a doua atribute ale etichetei <body>:

leftmargin (stabileste distanta dintre marginea stanga a ferstrei browserului si marginea

stanga a continutului paginii);
topmargin (stabileste distanta dintre marginea de sus a ferstrei browserului si marginea de
sus a continutului paginii);

<body leftmargin="100" topmargin="50">

Text formatat.
</body>
Alte aspecte ale fomatrilor asupra fontului:

Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta
trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>.
Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta
trebuie inclus intr-un bloc delimitat de etichetele <small>...</small>.
Pentru a insera secvente de text aliniate ca indice (sub-script) sau ca exponent (superscript) , aceste fragmente trebuie delimitate de etichetele _..., respectiv
^....
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele
<strike>...</strike> sau <s>...</s>.
bold (ngroat) <b>text</b>;
italic (nclinat) <i>text</i>;
underline (subliniat) <u>text</u>.
Pentru a pune in evidenta (prin silul cursiv) fragmente de text se utilizeaza etichetele:
o <cite>...</cite> (" cite " inseamna citat);
o <em>...</em> (em vine de la " emphasize " = a evidentia).
Urmatoarele etichete au efecte similare.Ele permit scrierea fragmentului de text cu caractere
monospatiate (de tipul celor folosite de o masina de scris):
o <code>...</code> ("code" inseamna cod sau sursa);
o <kbd>...</kbd> (kbd vine de la " keyboard " = tastatura);
o <tt>...</tt> (tt vine de la " teletype " = teleprinter).

Imagini
Inserarea unei imagini n document se realizeaz cu ajutorul tagului <img> care are urmtoarea
sintax:
<img src="imagine.jpg" alt="Aceasta este imaginea">
src reprezint calea de acces i numele fiierului care conine imaginea;
alt o scurt descriere a imaginii.

Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei <img>.
Valorile acestor atribute sunt numere intregi pozitive.
O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul crearii ei.
Daca nu se cere altfel , aceste dimensiuni sunt respectate in momentul afisarii ei in pagina Web.
Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width si
height.
<img src=" imagine.jpg " border="5" width="350" height="25%">

Culorile acceptate in HTML in format literal si hexazecimal

ALICEBLUE
ANTIQUEWHITE
AQUA
AQUAMARINE
AZURE
BEIGE
BISQUE
BLACK
BLAncHEDALMOND
BLUE
BLUEVIOLET
BROWN

Valoare
hexazecimala
#A0CE00
#FAEBD7
#00FFFF
#7FFFD4
#F0FFFF
#f5f5DC
#FFE4C4
#000000
#FFEBCD
#0000FF
#8A2BE2
#A52A2A

BURLYWOOD
CADETBLUE
chARTREUSE
chOCOLATE
CORAL
CORNFLOWERBLUE
CORNSILK
CRIMSON
CYAN
DARKBLUE
DARKCYAN
DARKGOLDENROD
DARKGRAY

#DEB887
#5f9EA0
#7FFF00
#D2691E
#Ff7f50
#6495ED
#FFf8DC
#DC143C
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9

DARKGREEN
DARKKHAKI
DARKMAGENTA
DARKOLIVEGREEN
DARKORANGE
DARKORchID
DARKRED
DARKSALMON
DARKSEAGREEN
DARKSLATEBLUE
DARKSLATEGRAY
DARKTURQUOISE
DARKVIOLET
DEEPPINK
DEEPSKYBLUE
DIMGRAY
DODGERBLUE
FIREBRICK
FLORALWHITE
FORESTGREEN
FUchSIA
GAINSBORO
GHOSTWHITE
GOLD
GOLDENROD

#006400
#BDB76B
#8B008B
#556B2F
#Ff8C00
#9932cc
#8B0000
#E9967A
#8FBC8F
#483D8B
#2f4f4F
#00CED1
#9400D3
#Ff1493
#00BFFF
#696969
#1E90FF
#B22222
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#f8f8FF
#FFD700
#DAA520

Nume culoare

GRAY
GREEN
GREENYELLOW
HONEYDEW
HOTPINK
INDIANRED
INDIGO
IVORY
KHAKI
LAVENDER
LAVENDERBLUSH
LEMOncHIFFON
LIGHTBLUE
LIGHTCORAL
LIGHTCYAN
LIGHT
GOLDENRODYELL
OW
LIGHTGREEN
LIGHTGREY
LIGHTPINK
LIGHTSALMON
LIGHTSEAGREEN
LIGHTSKYBLUE
LIGHTSLATEGRAY
LIGHTSTEELBLUE
LIGHTYELLOW
LIME
LIMEGREEN
LINEN
MAGENTA
MAROON
MEDIUMAQUAMAR
INE
MEDIUMBLUE
MEDIUMORchID
MEDIUMPURPLE
MEDIUMSEAGREE
N
MEDIUMSLATEBLUE
MEDIUMSPRINGGREEN
MEDIUMTURQUOISE
MEDIUMVIOLETRED
MIDNIGHTBLUE
MINTCREAM
MISTYROSE
NAVAJOWHITE
NAVY
OLDLACE
OLIVE
OLIVEDRAB
ORANGE
ORANGERED
ORchID
PALEGOLDENROD
PALEGREEN

#808080
#008000
#ADFf2F
#F0FFF0
#Ff69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0f5
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#90EE90
#D3D3D3
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
#FF00FF
#800000
#66CDAA
#0000CD
#BA55D3
#9370DB
#3CB371

#7B68EE
#00FA9A
#48D1cc
#C71585
#191970
#f5FFFA
#FFE4E1
#FFDEAD
#000080
#FDf5E6
#808000
#6B8E23
#FFA500
#Ff4500
#DA70D6
#EEE8AA
#98FB98

PALETURQUOISE
PALEVIOLETRED
PAPAYAWHIP
PEAchPUFF
PERU
PINK
PLUM
POWDERBLUE
PURPLE
RED
ROSYBROWN
ROYALBLUE
SADDLEBROWN
SALMON
SANDYBROWN
SEAGREEN
SEASHELL
SIENNA
SILVER
SKYBLUE
SLATEBLUE
SLATEGRAY
SNOW
SPRINGGREEN
STEELBLUE
TAN
TEAL
THISTLE
TOMATO
TURQUOISE
VIOLET
WHEAT
WHITE
WHITESMOKE
YELLOW
YELLOWGREEN

#AFEEEE
#DB7093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8f8F
#4169E1
#8B4513
#FA8072
#f4A460
#2E8B57
#FFf5EE
#A0522D
#C0C0C0
#87CEEB
#6A5ACD
#708090
#FFFAFA
#00Ff7F
#4682B4
#D2B48C
#008080
#D8BFD8
#Ff6347
#40E0D0
#EE82EE
#f5DEB3
#FFFFFF
#f5f5f5
#FFFF00
#9ACD32