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 site-
urile 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 (super-
script) , 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

Nume culoare
Valoare
hexazecimala
ALICEBLUE #A0CE00
ANTIQUEWHITE #FAEBD7
AQUA #00FFFF
AQUAMARINE #7FFFD4
AZURE #F0FFFF
BEIGE #f5f5DC
BISQUE #FFE4C4
BLACK #000000
BLAncHEDALMOND #FFEBCD
BLUE #0000FF
BLUEVIOLET #8A2BE2
BROWN #A52A2A

BURLYWOOD #DEB887
CADETBLUE #5f9EA0
chARTREUSE #7FFF00
chOCOLATE #D2691E
CORAL #Ff7f50
CORNFLOWERBLUE #6495ED
CORNSILK #FFf8DC
CRIMSON #DC143C
CYAN #00FFFF
DARKBLUE #00008B
DARKCYAN #008B8B
DARKGOLDENROD #B8860B
DARKGRAY #A9A9A9


DARKGREEN #006400
DARKKHAKI #BDB76B
DARKMAGENTA #8B008B
DARKOLIVEGREEN #556B2F
DARKORANGE #Ff8C00
DARKORchID #9932cc
DARKRED #8B0000
DARKSALMON #E9967A
DARKSEAGREEN #8FBC8F
DARKSLATEBLUE #483D8B
DARKSLATEGRAY #2f4f4F
DARKTURQUOISE #00CED1
DARKVIOLET #9400D3
DEEPPINK #Ff1493
DEEPSKYBLUE #00BFFF
DIMGRAY #696969
DODGERBLUE #1E90FF
FIREBRICK #B22222
FLORALWHITE #FFFAF0
FORESTGREEN #228B22
FUchSIA #FF00FF
GAINSBORO #DCDCDC
GHOSTWHITE #f8f8FF
GOLD #FFD700
GOLDENROD #DAA520
GRAY #808080
GREEN #008000
GREENYELLOW #ADFf2F
HONEYDEW #F0FFF0
HOTPINK #Ff69B4
INDIANRED #CD5C5C
INDIGO #4B0082
IVORY #FFFFF0
KHAKI #F0E68C
LAVENDER #E6E6FA
LAVENDERBLUSH #FFF0f5
LEMOncHIFFON #FFFACD
LIGHTBLUE #ADD8E6
LIGHTCORAL #F08080
LIGHTCYAN #E0FFFF
LIGHT #FAFAD2
GOLDENRODYELL
OW

LIGHTGREEN #90EE90
LIGHTGREY #D3D3D3
LIGHTPINK #FFB6C1
LIGHTSALMON #FFA07A
LIGHTSEAGREEN #20B2AA
LIGHTSKYBLUE #87CEFA
LIGHTSLATEGRAY #778899
LIGHTSTEELBLUE #B0C4DE
LIGHTYELLOW #FFFFE0
LIME #00FF00
LIMEGREEN #32CD32
LINEN #FAF0E6
MAGENTA #FF00FF
MAROON #800000
MEDIUMAQUAMAR
INE
#66CDAA
MEDIUMBLUE #0000CD
MEDIUMORchID #BA55D3
MEDIUMPURPLE #9370DB
MEDIUMSEAGREE
N
#3CB371

MEDIUMSLATEBLUE #7B68EE
MEDIUMSPRINGGREEN #00FA9A
MEDIUMTURQUOISE #48D1cc
MEDIUMVIOLETRED #C71585
MIDNIGHTBLUE #191970
MINTCREAM #f5FFFA
MISTYROSE #FFE4E1
NAVAJOWHITE #FFDEAD
NAVY #000080
OLDLACE #FDf5E6
OLIVE #808000
OLIVEDRAB #6B8E23
ORANGE #FFA500
ORANGERED #Ff4500
ORchID #DA70D6
PALEGOLDENROD #EEE8AA
PALEGREEN #98FB98
PALETURQUOISE #AFEEEE
PALEVIOLETRED #DB7093
PAPAYAWHIP #FFEFD5
PEAchPUFF #FFDAB9
PERU #CD853F
PINK #FFC0CB
PLUM #DDA0DD
POWDERBLUE #B0E0E6
PURPLE #800080
RED #FF0000
ROSYBROWN #BC8f8F
ROYALBLUE #4169E1
SADDLEBROWN #8B4513
SALMON #FA8072
SANDYBROWN #f4A460
SEAGREEN #2E8B57
SEASHELL #FFf5EE
SIENNA #A0522D
SILVER #C0C0C0
SKYBLUE #87CEEB
SLATEBLUE #6A5ACD
SLATEGRAY #708090
SNOW #FFFAFA
SPRINGGREEN #00Ff7F
STEELBLUE #4682B4
TAN #D2B48C
TEAL #008080
THISTLE #D8BFD8
TOMATO #Ff6347
TURQUOISE #40E0D0
VIOLET #EE82EE
WHEAT #f5DEB3
WHITE #FFFFFF
WHITESMOKE #f5f5f5
YELLOW #FFFF00
YELLOWGREEN #9ACD32