1

Internet şi WWW
WWW (World Wide Web) este un ansamblu de documente (fişiere) conţinând informaţie codificată în
format hipertext1 (denumit şi format HTML, prescurtare de la HyperText Markup Language),
interconectate şi accesibile prin intermediul reţelei Internet. Documentele pot fi vizualizate folosind o
aplicaţie de navigare (eng. browser) şi pot conţine text, imagini şi obiecte multimedia. Interconectarea
documentelor creează un efect de reţea.

Într-un document hipertext hiperlegătura (eng. hyperlink) este un şir de caractere sau o imagine care în
urma selectării cu mouse-ul determină afişarea în fereastra aplicaţiei de navigare a unui alt document
sau a unei alte porţiuni din documentul curent.

Într-o hiperlegătură fişierul care trebuie încărcat este indicat prin adresa lui. Sistemul de adresare în
Internet este standardizat, fiecare fişier accesibil fiind referit printr-o adresă unică (URL, Uniform
Resource Locator). O adresă a unui fişier (URL) este formată prin alăturarea a trei componente:

 simbolul unui protocol de comunicaţie (de exemplu http pentru Hypertext Transfer Protocol sau
ftp pentru File Transfer Protocol),

 un nume de site (pronuţaţi sait) căruia îi aparţine documentul şi

 calea spre fişier.

Exemplu: http://www.infoap.utcluj.ro/activitati.html

Un fişier poate fi referit printr-o adresă absolută, formată aşa cum s-a arătat, sau relativă. Adresele
relative sunt folosite pentru a indica fişiere din interiorul aceluiaşi site: pagini web, componente
multimedia (imagini, secvenţe audio sau video) etc.

1
În cadrul cursului se va folosi sistematic de numirea prescurtată de document hipertext sau pagină Web în loc de
fişier codificat în HTML sau fişier codificat în format hipertext.
 2

Un site este format dintr-un ansamblu de pagini web legate între ele şi accesibile folosind acelaşi nume
de domeniu (subdomeniu). O astfel de adresă este https://www.google.com sau
http://www.infoap.utcluj.ro.

Diversele site-uri sunt găzduite pe calculatoare conectate la Internet. Fiecare astfel de calculator are o
adresă fizică unică (IP, Internet Protocol), formată din patru numere întregi cuprinse între 0 şi 255). De
exemplu site-ul www.google.com este găzduit pe un calculator având adresa fizică 173.194.70.106.

Trecerea de la numele de domeniu (www.google.com din exemplul dat) la adresa fizică a calculatorului
care găzduieşte domeniul (173.194.70.106) se realizează prin intermediul serviciului DNS (Domain Name
System) integrat în Internet.

Organizarea fişierelor unui site

Un site web constă dintr-un ansamblu de componente aflate în interacţiune. Fiecare dintre
componente constă dintr-unul sau mai multe fişiere codificate într-un limbaj adaptat.

Cele mai importante tipuri de fişiere din componenţa unui site sunt următoarele:
 3

 fişierele text care conţin informaţiile prezentate. Acestea sunt fişiere hipertext, codificate în
HTML ;

 fişierele conţinând foi de stiluri, (CSS, Cascading Style Sheets) având extensia .css;

 fişierele conţinând funcţii JavaScript, având extensia .js;

 fişiere conţinând funcţii scrise în limbajul PHP, având extensia .php, ş.a..

În schema dată ultima componentă este o bază de date MySQL. Rolul acesteia este acela de a memora
date specifice site-ului: cataloage de produse, date ale clienţilor înregistraţi ş.a.

Observaţie: Pe lângă categoriile de fişiere menţionate, un site foloseşte şi fişiere care conţin imagini.
Acestea sunt folosite în foile de stiluri pentru realizarea fundalurilor elementelor afişate sau sunt fişiere
care conţin imagini furnizate de client şi care trebuie afişate în paginile site-ului. Fişierele conţinând
imagini sunt de regulă păstrate în directoare derivate din directorul rădăcină al site-ului.

Directorul rădăcină al unui site va conţine fişierele hipertext ale acestuia, începând cu fişierul principal
denumit de regulă index. Acesta este de obicei codificat în HTML (index.html) dar poate fi şi alt tip:
index.php, index.asp sau index.jsp, în funcţie de conţinutul acestuia. O modalitate de structurare a
componentelor unui site simplu este cea din imagine.
 4

Înainte de a începe
Realizarea fişierelor în format hipertext (.html), a foilor de stiluri, a fişierelor JavaScript şi a celorlalte
componente ale unui site presupune utilizarea unei aplicaţii de editare adaptate. Există mai multe
soluţii, mergând de la editoare simple, generale, instalate împreună cu sistemul de operare (Notepad de
exemplu) până la aplicaţii dedicate: Dreamweaver (Adobe Co.), Aptana Studio ş.a. Există şi soluţii
intermediare, intens folosit în Windows fiind Notepad++.

În cele ce urmează va fi folosit editorul de text Notepad++ dar şi mediul de programare NetBeans
deoarece versiunile recente ale acestuia asigură suportul necesar.

Înainte de a începe realizarea primelor pagini, deoarece sunt vizate în mod deosebit documentele care
conţin text realizat în limba română, va trebui activată în Windows scrierea în această limbă (Control
Panel / Region and Language / Keyboard and Languages / Change Keyboards...).
 5

Ca urmare pe bara de stare a calculatorului va apărea un selector destinat stabilirii limbii, de unde se
poate impune limba Română şi tastatura românească.

Dispunerea caracterelor pe o tastatură românească este cea din imagine:

În cazul tastelor destinate inserării mai multor simboluri, accesul la fiecare dintre acestea se realizează
folosind tastele funcţionale Shift şi AltGr, ca în schema următoare.

Shift AltGr + Shift

AltGr

Este necesară de asemenea impunerea modului de codificare a documentelor şi în editorul folosit.

Pentru Notepad++ se va selecta în meniul Encoding opţiunea Encode in UTF-8 (Universal character set
+ Transformation Format—8-bit).
 6

Pentru NetBeans această setare nu este necesară deoarece acest mediu de programare operează
implicit folosind setul de caractere UTF-8.

Crearea unei pagini web minimale

O pagină web minimală are conţinutul următor:

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Titlul paginii</title>
</head>
<body>
<h1>Prima pagină HTML</h1>
<p>Acest paragraf conţine şi caractere cu diacritice.</p>
</body>
</html>

Aşa cum se poate observa, un document în format hipertext conţine doar caractere obişnuite (ASCII). O
pagină Web este constituită din elemente, fiecărui element asociindu-i-se o notaţie specifică. Exemple:
paragrafe (p), titluri (h1 ... h6), corpul paginii (body) ş.a.

Pentru a marca diferitele elemente care formează pagina se folosesc marcaje. Un marcaj se formează
încadrând notaţia unui element între paranteze formate din caracterele '<' şi '>'. Marcajele apar de
regulă în perechi. La scrierea perechii unui marcaj numele elementului este precedat de '/'. Exemplu:

<p>Acesta este un paragraf.</p>

Există şi elemente care nu presupun folosire unei perechi de marcaje. De exemplu trecerea la aliniat
nou (br), inserarea unei imagini (img) sau comunicarea spre browser a unor informaţii (meta).

Marcajele pot avea atribute. În exeplul dat marcajul <meta> are atributul charset="UTF-8". Valorile
atributelor se încadrează între ghilimele (" ").

Întregul document în format hipertext formează elementul html şi este format din două elemente
principale, head şi body.

Pe ecranul aplicaţiei de navigare va apărea doar conţinutul elementului body.

Pentru a vizualiza într-o aplicaţie de navigare pagina Web realizată se va deschide un editor de texte
(Notepad sau, mai bine, Notepad++) şi se va tasta în fereastra acesteia conţinutul fişierului.
 7

După încheierea introducerii paginii se va salva fişierul cu numele index.html într-un director de pe disc
şi apoi se va deschide în browser-ul implicit (selectare cu un dublu clic în Windows Explorer).

Notă: Fişierele salvate din Notepad sau Notepad++ au implicit extensia .txt. Pentru a salva fişierul
realizat cu extensia corectă (.html), numele fişierului se va pune între ghilimele. În cazul aplicaţiei
Notepad se va preciza şi modul de codificare (UTF-8), ca în imagine:

Rezultat:
 8

Observaţii:

1. Dacă pagina este deschisă prin selectarea cu un dublu clic în Windows Explorer, adresa sa va
începe cu file:///...

2. Titlul documentului (elementul title) apare scris pe bara de titlu a aplicaţiei de navigare.

3. Elementul h1 este titlul principal şi este implicit scris mai mare. Acest element echivalează cu
Heading 1 din MS Word. Pentru subtitluri de diferite ranguri se pot folosi elemtele h2, h3, ...,
h6.

4. Textul obişnuit se introduce folosind paragrafe (elemente p).

5. Pentru a putea folosi diacriticele specifice limbii române, elementului html i s-a asociat atributul
lang (lang="ro") şi s-a comunicat browser-ului printr-un atribut al unui element meta setul de
caractere utilizat: <meta charset="UTF-8">.

CSS
CSS (eng. Cascading Style Sheets, trad. foi de stiluri în cascadă) este limbajul actual de descriere a
aspectului şi a dispunerii în fereastra browser-ului a informaţiilor din documentele hipertext. Relaţia
dintre HTML şi CSS este prezentată în imaginea următoare:

HTML CSS

Dacă ansamblul de elemente conţinut într-un fişier hipertext dă structura şi conţinutul unei pagini Web,
dispunerea şi modul de afişare a elementelor în fereastra browser-ului este impus prin foi de stiluri
(fişiere CSS).

Foile de stiluri permit realizarea şi altei funcţii esenţiale, respectiv adaptarea modului de afişare a
informaţiilor la diferitele medii de afişare. Astfel, fără a interveni în fişierul hipertext, doar prin folosirea
altei foi de stiluri se poate realiza afişarea corectă a unei pagini web pe un ecran normal, pe imprimantă
sau pe ecranul unui telefon.
 9

Descrierea în limbajul CSS a modul de afişare a elementelor dintr-un document HTML se realizează prin
stiluri. Un document HTML poate fi formatat folosindu-se una sau mai multe foi de stiluri, ordinea
acestora determinând rezultatul final. De obicei prima foaie aplicată conţine stiluri generale, valabile în
toate site-urile unei firme de producţie de site-uri şi au rolul de a uniformiza modul în care diferitele
browsere tratează site-urile. De multe ori numele dat acestui fişier este chiar reset.css. După acestă
foaie urmează alte foi cu rol particular, legate de conţinutul fiecărui site în parte.

Un stil conţinut într-o foaie de stiluri constă la rândul lui din două părţi: un selector sau un set de
selectori (elemente HTML sau selectori special definiţi) şi un bloc de descriere încadrat între acolade ({}).
Exemplu:

p, h3 {font-size: 0.75em;}

Ansamblul de stiluri care formează o foaie de stiluri poate fi înregistrat într-un fişier separat având
extensia .css sau inserat în pagină, la început, în head. Odată definită, o foaie de stiluri poate fi ataşată
tuturor paginilor unui site, dându-le acestora un aspect unitar.

Integrarea într-un fişier în format hipertext a unui fişier conţinând stiluri se realizează folosind elementul
link, ca în exemplul următor:

<link href="stil.css" rel="stylesheet">

În cazul inserării foii de stiluri la începutul fişierului hipertext, în head va fi adăugat un element style:

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>George Cosbuc</title>
<style>
/* reguli css */
</style>
</head>
 10

În foile de stiluri comentariile sunt încadrate între '/*' şi '*/'.

Principiile CSS

Un stil dintr-o foaie de stiluri se descrie pe baza schemei următoare:

selectori proprietate valoare

h1, h2 {color:brown; font-family: "Trebuchet MS",Verdana, Tahoma, sans serif;}

proprietate valoare

bloc de descriere
Selectori

Selectorii specifică elementele din fişierul hipertext care vor fi afectate de stilul respectiv. Selectorii
folosiţi sunt în primul rând elementele conţinute în fişierul HTML asociat: p, h1 ... h6, body, html etc.. Se
pot declara însă şi selectori suplimentari, aşa cum se va vedea în continuare.

Scrierea selectorilor poate fi complicată, ea depinzând de elementele din pagină vizate.

În funcţie de elementele din fişierul hipertext vizate, selectorii pot fi de mai multe tipuri, astfel:

a. Selectori globali: h1, h2, p

Regulile care descriu stilul se vor aplica tuturor elementelor h1, h2 şi p. După scrierea acestui stil se pot
particulariza cele trei elemente prin stiluri suplimentare care le-ar viza eventual pe fiecare, separat.
Datorită efectului de "cascadă", fiecare element dintre cele trei va păstra toate proprietăţile din
blocurile în care este descris, valorile acelor proprietăţi fiind însă cele de la ultima definire.

b. Selectori de tip clasă care apar ca valori ai atributului class folosit în elementele html vizate. La
definirea unui stil pentru un astfel de selector numele clasei este precedat de un punct '.'.
Exemplu:

HTML
<h2 class="evident">Principalele reguli</h2>

<p>Aceste <span class="evident">reguli trebuie respectate</span>

de către toţi vizitatorii.</p>

.evident {background-color:RGBA(255, 255, 0, 0.5);}

CSS
 11

c. Selectori de tip identificator (ID) care permit descrierea stilului folosit la afişarea unui element
din pagină căruia i s-a atribuit un nume unic folosind atributil ID. Exemplu:

<div id="continut">
HTML ...
</div>

CSS #continut {
width:960px;
margin:0 auto;
border:1px solid #AAAAAA;
}

Notă: Într-un document hipertext un nume specificat prin atributul id poate apărea o singură dată, el
indicând un element anume din pagină. Pentru a impune acelaşi stil mai multor elemente din pagină se
foloseşte atributul class, aşa cum s-a arătat.

d. Selectori poziţionali. Aceşti selectori permit localizarea unor elemente din documentul hipertext
pe baza poziţiei lor. Exemplu:

nav ul li {background-color: yellow;}

Stilul bazat pe acest selector se aplică elementelor li din fişierul hipertext conţinute în ul, iar ul este
conţinut la rândul lui într-un element nav. Elementele din succesiunea folosită pentru localizarea
elementelor selectate sunt separate printr-un spaţiu.