Lecţia 3 – Instalare, configurare servere de Web şi primii paşi in

HTML
3.1. Ce este un server WEB şi cum comunică un server cu clienţii: Porturi de comunicaţie 80 şi 443
pentru HTTPS
3.2. Procedura de instalare a unui IIS in Windows XP cu SP2
3.3. Lansarea în execuţie Baby Web Server. Configurări de bază.
3.4. Crearea primului fişier HTML. Structura documentului.

3.1. Ce este un server WEB şi cum comunică un server cu clienţii: Porturi de comunicaţie 80
şi 443 pentru HTTPS

Fără a fi cădea în „păcatul” de a fi prea tehnici, şi cu trimitere la capitolul II al cursului de afaceri

electronice sau chiar mai mult la materiale pe tema reţelelor de calculatoare, prezentăm mai jos
câteva concepte de ajutor dezvoltatorului web în primii săi paşi.

World Wide Web-ul - WWW - sau, pe scurt, Web-ul, este un context hard şi soft care permite
accesarea facilă a informaţiilor răspândite pe mii de calculatoare interconectate ("servere web") ce
fac parte din Internet.
Internetul este alcătuit dintr-o reţea de calculatoare numite servere pe care se afla diverse fişiere.
Numele de server vine de la faptul ca aceste calculatoare "servesc" (transmit) fişierele pe care le
stochează oricărui alt calculator (aflat în postura de "client") care le solicită acest lucru. Aceste
fişiere pot fi pagini web, fişiere text sau multimedia, programe, etc. Calculatoarele personale se
conectează la reţeaua Internet şi solicită serverelor fişiere, din această cauza ele aflându-se în
postura de "client".
Fiecare calculator conectat la Internet are atribuit un număr 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ă memorăm adrese absolute de IP (ex. 193.226.23.4) şi atunci se preferă asocierea
acestor notaţii (adrese) simbolice a unor numere (www.uaic.ro). Orice portal Web şi orice domeniu
are şi o astfel de adresă simbolică.
Atunci când calculatoarele "comunică" între ele sunt folosite "limbaje" speciale numite protocoale.
Protocoalele de tip "client-server" stau la baza funcţionalităţii oricărei reţele de calculatoare deci şi
a Internetului.
Cel mai cunoscut protocol "client-server" în reţeaua Internet este protocolul HTTP (HyperText
Transfer Protocol) care se defineşte ca un protocol de transfer a fişierelor de tip hipertext care nu
sunt altele decât paginile web. Iniţial protocolul HTTP era folosit exclusiv pentru transferul de
pagini web, însa ulterior el a fost îmbunătăţit şi în momentul de faţă cu ajutorul lui se pot transfera
şi alte tipuri de fişiere (de ex. fişiere multimedia).

O interacţiune HTTP constă dintr-o cerere de tip text, urmată de un răspuns care constă în fişierul
transferat. Se poate spune că protocolul HTTP este format din mulţimea cererilor (uzual GET ...) de
la programele de navigare (browsere) către servere şi din mulţimea răspunsurilor trimise de acestea.
HTTP este utilizat de către navigatoare dar ar putea fi folosit şi de către 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 foloseşte
conceptul de port, adică un număr care identifică serviciul care trebuie accesat. Pentru a înţelege
cel mai bine raţiunea pentru care există acest concept, cel mai uşor este să ne gândim la o adresă
poştală: pentru a găsi o persoană nu este suficient să cunoaştem adresa clădirii în care lucrează –
adică adresa IP pentru calculatoare, ci şi numărul 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 până la 65536, domeniul porturilor private. De pildă serverul Apache pentru
aplicaţii tip servlet JSP şi pentru aplicaţii ce conţin scenarii scrsie în limbajele CFML (Macromedia
Coldfusion Markup Lnguage) sau PHP, are portul 8080.
Pe scurt, numărul portului indică serverului serviciul care se doreşte accesat. Portul 80 este numărul
portului pentru HTTP (HyperText Transport Protocol), folosit pentru transferul paginilor de pe site-
urile Web.
HTTP foloseşte transmisia în clar a mesajelor sale, ceea ce îl face vulnerabil chiar şi în faţa
atacatorilor novici. O soluţie simplă pentru a asigura caracterul privat al navigării este folosirea unei
extensii a protocolului, denumită HTTP Secure sau HTTPS. Adresele care folosesc acest protocol
sigur pentru comunicaţie se pot distinge foarte uşor, deoarece ele încep cu https:// în loc de http://.
Portul folosit în acest caz este 443.

Bibliografia folosită în redactarea acestei secţiuni:

1. Meşniţă, G., Afaceri Electronice, Suport de curs Facultatea de Economie şi Administrarea

Afacerilor, Iaşi, 2006
2. Munteanu, A., Greavu, Ş.V., Reţele locale de calculatoare, Ed. Polirom, Iaşi, 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
găzduirea de aplicaţii Web şi servicii Web XML

Pentru activarea acestuia trebuie să parcurgeţi următorii paşi:

1. Start, Control Panel
2. Add or remove programs
3. Din fereastra Add or Remove programs apăsaţi pe butonul Add/Remove Windows
Components (din partea stângă a ferestrei)
4. În fereastra Windows Components Wizard apăsaţi click pe caseta de Internet Information
Services (IIS)
 5. Apăsaţi apoi butonul Details şi debifaţi opţiunea SMTP Service dacă este activată

6. Apăsaţi Apoi butonul OK, apoi butonul Next din fereastra Windows Components Wizard.
7. Începe instalarea timp în care vă este solicitată locaţia 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 funcţional, deschideţi un browser şi scrieţi adresa:
http://localhost/

Dacă se deschide o pagină cu textul UnderConstruction înseamnă că serverul d-voastră este

funcţional.
Locaţia fişierelor este la adresa: C:\InetPub\wwwroot. Acolo trebuie să vă salvaţi toate fişierele pe
care doriţi să le accesaţi din Web.

Aşteptăm feedback şi întrebări.

3.3. Lansarea în execuţie Baby Web Server. Configurări 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: / descărcarea arhivei de pe portal

(secţiunea An II - Afaceri Electronice – Documente) pe discul personal Z: / rularea aplicaţiei
direct de pe discul R:

2. Setaţi directorul rădăcină al paginilor web (păstraţi numele paginii implicite index.html)

3. Aplicaţia este în acest moment funcţională. Pentru a testa funcţionalitatea aplicaţiei 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 fişier HTML.
Structura documentului.

Ultima versiune a limbajului este 4.01 World Wide Web Consortium (W3C org) este instituţia 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 aplicaţii sunt deja disponibile în teste;
• Iulie 1991 – Internetul începe să folosească din ce în ce mai mult aceste aplicaţii.

Fiecare din cuvintele de mai sus marcate între semnele „<” , „>” poartă denumirea de tag-uri,
reprezentând cuvinte cheie în structurarea unui document HTML.

Structuri generale

Structura unui document HTML poate fi redată în exemplul următor:

<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 sfârşitul unui document.

Celelalte tag-uri pot fi opţionale.

<HEAD> - Specifică header-ul unui document şi, pe lângă <TITLE> care specifică titlul
paginii în browser, pot apărea declaraţia diferitelor script-uri, informaţii despre document etc.
Fiecare tag care se deschide se recomandă a se şi închide, dar nu este o regulă obligatorie.

<BODY> - încadrează conţinutul unui document.

<P> - Declararea unui paragraf se realizează cu ajutorul tagului - <P>.
<BR> - Pentru trecerea de la un rând 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 până la 3 maxim 4 niveluri într-un document.

Comentariile care se trec într-un document şi care nu vor apărea î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 rând.
</body>

Pentru afişarea centrată a titlurilor, şi nu numai se poate folosi tagul

<CENTER>...</CENTER>.

<h1><center>Capitolul 1 - Introducere in HTML</center></h1>

Pentru afişarea unei linii se poate folosi tagul simplu <HR> a cărui 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 foloseşte &#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>
Setări ale fondului

Culorea fundalului de pagină se poate stabili prin folosirea atributului BGCOLOR=culoare in tagul
<BODY >, având următoarea sintaxă:

<BODY BGCOLOR=nume_culoare sau valoare_hexazecimală>

<body bgcolor="pink">

Pentru folosirea unei imagini ca background pentru fundal se foloseşte sintaxa:

<body background="imagine.bmp">

Imaginea trebuie salvată în aceiaşi locaţie cu documentul HTML, dar în cazurile în care aceasta nu
se află în acelaşi director trebuie declarată calea de pe disc sau de pe web până la fişierul respectiv.

Setări ale textului

Formatarile la nivel de text se regăsesc î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 "
• mărime 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 fomatărilor 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 (îngroşat) <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 următoarea
sintaxă:

<img src="imagine.jpg" alt="Aceasta este imaginea">

src – reprezintă calea de acces şi numele fişierului care conţine 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
GRAY #808080
Valoare GREEN #008000
Nume culoare GREENYELLOW #ADFf2F
hexazecimala
ALICEBLUE #A0CE00 HONEYDEW #F0FFF0
ANTIQUEWHITE #FAEBD7 HOTPINK #Ff69B4
AQUA #00FFFF INDIANRED #CD5C5C
AQUAMARINE #7FFFD4 INDIGO #4B0082
AZURE #F0FFFF IVORY #FFFFF0
BEIGE #f5f5DC KHAKI #F0E68C
BISQUE #FFE4C4 LAVENDER #E6E6FA
BLACK #000000 LAVENDERBLUSH #FFF0f5
BLAncHEDALMOND #FFEBCD LEMOncHIFFON #FFFACD
BLUE #0000FF LIGHTBLUE #ADD8E6
BLUEVIOLET #8A2BE2 LIGHTCORAL #F08080
BROWN #A52A2A LIGHTCYAN #E0FFFF
LIGHT #FAFAD2
BURLYWOOD #DEB887 GOLDENRODYELL
OW
CADETBLUE #5f9EA0
LIGHTGREEN #90EE90
chARTREUSE #7FFF00
LIGHTGREY #D3D3D3
chOCOLATE #D2691E
LIGHTPINK #FFB6C1
CORAL #Ff7f50
LIGHTSALMON #FFA07A
CORNFLOWERBLUE #6495ED
LIGHTSEAGREEN #20B2AA
CORNSILK #FFf8DC
LIGHTSKYBLUE #87CEFA
CRIMSON #DC143C
LIGHTSLATEGRAY #778899
CYAN #00FFFF
LIGHTSTEELBLUE #B0C4DE
DARKBLUE #00008B
LIGHTYELLOW #FFFFE0
DARKCYAN #008B8B
LIME #00FF00
DARKGOLDENROD #B8860B
LIMEGREEN #32CD32
DARKGRAY #A9A9A9
LINEN #FAF0E6
MAGENTA #FF00FF
MAROON #800000
DARKGREEN #006400
MEDIUMAQUAMAR #66CDAA
DARKKHAKI #BDB76B
INE
DARKMAGENTA #8B008B
MEDIUMBLUE #0000CD
DARKOLIVEGREEN #556B2F MEDIUMORchID #BA55D3
DARKORANGE #Ff8C00 MEDIUMPURPLE #9370DB
DARKORchID #9932cc MEDIUMSEAGREE #3CB371
DARKRED #8B0000 N
DARKSALMON #E9967A
DARKSEAGREEN #8FBC8F MEDIUMSLATEBLUE #7B68EE
DARKSLATEBLUE #483D8B MEDIUMSPRINGGREEN #00FA9A
DARKSLATEGRAY #2f4f4F MEDIUMTURQUOISE #48D1cc
DARKTURQUOISE #00CED1 MEDIUMVIOLETRED #C71585
DARKVIOLET #9400D3 MIDNIGHTBLUE #191970
DEEPPINK #Ff1493 MINTCREAM #f5FFFA
DEEPSKYBLUE #00BFFF MISTYROSE #FFE4E1
DIMGRAY #696969 NAVAJOWHITE #FFDEAD
DODGERBLUE #1E90FF NAVY #000080
FIREBRICK #B22222 OLDLACE #FDf5E6
FLORALWHITE #FFFAF0 OLIVE #808000
FORESTGREEN #228B22 OLIVEDRAB #6B8E23
FUchSIA #FF00FF ORANGE #FFA500
GAINSBORO #DCDCDC ORANGERED #Ff4500
GHOSTWHITE #f8f8FF ORchID #DA70D6
GOLD #FFD700 PALEGOLDENROD #EEE8AA
GOLDENROD #DAA520 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