Documente Academic
Documente Profesional
Documente Cultură
Introducere
Internetul este un sistem mondial de reţele de calculatoare interconectate,
care înlesneşte serviciile de comunicare a datelor, cum ar fi:
• poşta electronică şi grupurile de discuţii.
• transferul de fișiere (FTP-File Transfer Protocol)
• conectarea la distanță (telnet)
• World Wide Web-ul (cunoscut și sub numele de WWW sau Web).
1
Internetul poartă o gamă largă de resurse de informare şi de servicii, cum ar
fi documente hipertext legate de World Wide Web (WWW) şi infrastructura
pentru a sprijini poşta electronica.
Fără îndoială, cel mai dinamic și de succes dintre serviciile Internet este
Word Wide Web-ul.
3
unui sistem hypertext, ele sunt organizate în pagini Web și livrate
utilizatorilor de către un program denumit server Web.Web-ul este structurat
conform unei arhitecturi client-server.
4
Unul din primele elemente fundamentale ale WWW (World Wide Web)
este HTML (Hypertext Markup Language), care descrie formatul primar
în care documentele sunt distribuite şi văzute pe Web. Se caracterizează
prin: independenta faţă de platformă, legături hipertext, etc.
Paginile unui site pot fi accesate folosind Uniform Resource Locator (URL).
URL-urile paginilor structurate într-o ierarhie, link-urile transmit cititorului
structura site-ul şi îndrumă navigarea.
5
Introducere în HTML
Paginile HTML contin elemente (etichete) si au extensia .html sau .htm.
Ele pot fi scrise în orice editor de texte, de exemplu Notepad, dar există şi
editoare specializate(Crimson Editor, Notepad++, etc.) care au facilităţi
specifice.
Elemetele sunt incadrate de simbolurile< şi > acestea numindu-se tag-uri.
Elementele sunt de obicei pereche, unul de deschidere <eticheta> si altul de
inchidere </eticheta>. Browserul interpreteaza aceste etichete afisand
rezultatul pe ecran. HTML nu este un limbaj case sensitiv (nu face
deosebirea intre litere mici si mari).
6
Un document HTML are structura:
<html>
<head>
<title>Titlu</title> <!Zona antetului (comentariu HTML) >
</head>
<body>
Continut pagina
</body>
</html>
Dacă introducem mai multe linii intr-o pagină browser-ul va afişa într-un
singur rînd, întrucît caracterele ”CR/LF” sunt ignorate de browser. Trecerea
pe o linie noua se face la întâlnirea marcajului <br> (line break).
7
Pentru ca browser-ul să interpreteze corect caracterele ”spaţiu”, ”tab” şi
”CR/LF” ce apar în cadrul unui text, acest text trebuie inclus într-un bloc
<pre>...</pre>.
<html>
<head>
<title> Preformatat </title>
</head>
<body> <pre>
Luni
MARTI
Miercuri</pre>
</body>
</html>
8
Culoarea fondului poate fi precizata în două moduri:
• Printr-un nume de culoare. Sunt disponibile cel puţin 16 nume de culori:
aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red,
silver, teal, white şi yellow.
• Prin construcţia " #rrggbb " unde r (red), g (green), sau b (blue) sunt
cifre hexazecimale şi pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b,
B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
10
11
Textul este caracterizat de: Mărime (size), Culoare (color), Font (style).
Acestea sunt atribute ale etichetei <basefont>. Este o eticheta singulară (fără
delimitator de sfîrşit de bloc).
unde:
• număr – poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic şi 7
pentru fontul cel mai mare);
• culoare – este o culoare precizată prin nume sau printr-o construcţie
RGB;
• font – poate fi un font generic ca ”serif”, ”san serif”, ”cursive”,
”monospace”, ”fantasy” sau un font specific instalat pe calculatorului
12
clientului, ca ”Times New Roman”, ”Helvetica” sau ”Arial”. Se acceptă
ca valoare şi o lista de fonturi separate prin virgula, de exemplu: ”Times
New Roman, serif, monospace”.
13
<html>
<head>
<title> Textului şi margine </title>
</head>
<body leftmargin="100" topmargin="50">
A fost odata ca-n povesti<br>
<basefont style = "Arial" color = "Blue" size = "2">
A fost ca niciodata, <br>
<basefont style = "Helvetica" color = "Red" size = "3">
Din rude mari împaratesti, <br>
<basefont style = "serif" color = "Green" size = "4">
O prea frumoasa fata. <br>
<basefont style = "cursive" color = "FF0066" size = "5">
</body>
</html>
14
Alte formatări:
Aldine (bold) <b>...</b>
Cursiv (italic) <i>...</i> sau <cite>...</cite> sau <em>...</em>
Indice inferior <sub>...</sub>,
Indice superior <sup>...</sup>.
Subliniat <u>...</u>
Font mai mare cu o unitate <big> </big>
Font mai mic cu o unitate <small> </small>
Text tăiat <strike> </strike>
Font maşină de scris<code>...</code> , <kbd>...</kbd>, <tt>...</tt>
15
Caracteristicile fontului pot fi modificate şi cu <font atribute>….</font>
<font color="red">font rosu</font>
<font face="Courier">font Courier</font>
<font size="6">font size=6</font>
16
<html>
<head>
<title> Paragraf </title>
</head>
<body>
Luceafarul
<p> A fost odata ca-n povesti<br>
A fost ca niciodata, <br>
<p align = "right"> Din rude mari împaratesti, <br>
<p align = "center"> O prea frumoasa fata <br>
</body>
</html>
17
Într-un text titlurile (headers) de capitole pot fi introduse cu ajutorul
etichetelor <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Tag-ul <h1> permite
scrierea unui titlu cu caractere mai mari şi aldine, pe cînd <h6> foloseşte
caracterele cele mai mici.
<html>
<head>
<title> Titluri </title>
</head>
<body>
<h1 align = "center"> Titlu 1 </h1>
<h2 align = "right"> Titlu 2 </h2>
<h4> Titlu 3 </h4>
</body>
</html>
18
Într-o pagină Web se pot insera linii orizontale cu ajutorul etichetei <hr>.ce
are etributele:
• align (”left”, ”center”, ”right”) permite alinierea liniei
• width permite alegerea lungimii liniei;
• size permite alegerea grosimii liniei;
• noshade – cînd este prezent defineşte o linie fără umbră;
• color permite definirea culorii liniei.
<html>
<body>
<h1 align = "center"> Harap Alb </h1>
<hr align = "center" width = "705" size = "3" noshade>
</body>
</html>
19
Alinierea se poate face şi cu ajutorul etichetelor
• <center>...</center> care aliniază centrat toate elementele pe care le
conţine.
• <nobr>...</nobr> afişează textul pe o singura linie.
• <div>...</div>. ce are atributul align (valori: ”left”, ”center”,”right”) şi
atributul ”nowrap” care interzice întreruperea rîndurilor de către browser.
<nobr> Amu cică era odată într-o țară un crai, care avea trei
feciori. Și craiul acela mai avea un frate mai mare, care era
împărat într-o altă țară, mai depărtată. Amu cică era odată
într-o țară un crai, care avea trei feciori. Și craiul acela
mai avea un frate mai mare, care era împărat într-o altă țară,
mai depărtată.
</nobr>
20
<div align = "center">Amu cică era odată într-o
ţară un crai, care avea trei feciori. Şi craiul
acela mai avea un frate mai mare, care era împărat
într-o altă ţară, mai depărtată.
</div>
23
• ”bottom” – aliniere la baza; partea de jos a imaginii se aliniază cu linia
de baza a textului.
hspace şi vspace = precizează distanţa în pixeli pe orizontală, respectiv pe
verticală, dintre imagine şi restul elementelor din pagină.
24
Pentru organizarea informatiei se pot folosi listele ce pot fi neordonate sau
ordonate.
25
Listele pot fi imbricate
<ol>
<li>Atletism
<ul>
<li>Saritura cu prajina</li>
<li>Aruncarea greutatii</li>
</ul>
</li>
<li>Sporturi individuale
<ul>
<li>Tir</li>
<li>Box</li>
</ul>
</li>
</ol>
26
Legăturile (link-urile) reprezintă partea cea mai importantă a unei pagini
Web. Ele transformă un text obişnuit în hipertext sau hiperlegatură, care
permite trecerea rapida de la o informaţie aflată pe un anumit server la alta
informaţie memorata pe un alt server aflat oriunde în lume. Legăturile sunt
zone active într-o pagina Web, adică zone de pe ecran sensibile la apăsarea
butonului stîng al mouse-ului.
Link-ul este definit cu etichetele <a> si </a> si are atributele:
• href - adresa fisierului destinatie(nume fişier sau URL)
• target (blank, parent, top, self)- in ce fereastra se va deschide fisierul
destinatie
• title - mica descriere asociata legaturii afisata in momentul in care
mouse-ul se afla deasupra legaturii
27
<a href="http://www.google.ro" target="_blank">Cautare</a>
Pentru o navigare mai uşoară in cazul unor pagini HTML lungi sau catre un
loc anume aflat intr-o alta pagina se poate folosi eticheta ancora definita cu
etichetele <a> si </a> dar cu atributul name. Pentru a face trimitere catre
ancora se introduce un link cu atributul href avand ca valoare denumirea
ancorei.
<a name="ancora">Sus</a>
<a href="#ancora">Inapoi sus</a>
<a href="ex1.html#nume">Inapoi la ancora din ex1.html</a>
28
Tabelele ne permit să cream o reţea dreptunghiulara de domenii, fiecare
domeniu avînd propriile opţiuni pentru culoarea fondului, culoarea textului,
alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente
<table>...</table>. Un tabel este format din rînduri. Pentru a insera un rînd
într-un tabel se folosesc etichetele <tr>...</tr> )Folosirea etichetei de sfîrşit
</tr> este opţională.=
Un rînd este format din mai multe celule ce conţin date. O celula de date se
introduce cu eticheta <td> ..</td>.
html>
<head>
<title>Exemplu</title>
29
</head>
<html>
<body> <h1 align = center> Un tabel simplu </h1> <hr>
<table>
<tr> <td> ABC…
<tr> <td> ABC… <td> ABC…
<tr> <td> ABC… <td> ABC… <td> ABC…
<tr> <td> ABC… <td> ABC… <td> ABC…<td> ABC…
</table>
</body>
</html>
31
Aceasta eticheta trebuie plasată în interiorul etichetelor <table>...</table>,
dar nu în interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi
aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una
dintre valorile:
• ”bottom” (sub tabel);
• ”top” (deasupra tabelului);
• ”left” (la stînga tabelului);
• ”right” (la dreapta tabelului).
Sunt si situatii in care imaginea afisata de browser este formata din mai
multe pagini HTML numite cadre(frame-uri). Caracteristic acestor pagini
este ca perechea de etichete <body> </body> este inlocuita de <frameset>
</frameset>, iar in interiorul lor cadrele sunt delimitate de<frame> si
</frame>.
Atributele etichetei frameset sunt:
• cols imparte pagina in coloane si are valori exprimate in procente din
dimensiunea ferestrei, numar de pixeli sau * adica spatiul ramas
• rows imparte pagina in randuri cu aceleasi valori ca la cols
• bordercolor culoarea tuturor chenarelor conform modelului #rrggbb
• frameborder inhibarea afisarii chenarelor cu valorile yes sau no
34
Cadrele sunt introduse prin perechea de etichete <frame> </frame>, si
suporta atributele:
• src fisierul sau adresa fisierului introdus
• bordercolor culoarea chenarului cadrului curent conform modelului
#rrggbb
• noresize dezactiveaza posibilitatea vizitatorului de a redimensiona
cadrul
• scrolling adauga cadrului bare de defilare cu valorile yes no si auto
35
Exemplu
Am construit fişierele index.html, left.html, right.html, HarapAlb.html şi
Luceafarul.html
index.html
<html>
<head>
<title>Lecturi obligatorii</title>
</head>
<frameset cols="25%, 75%">
<frame src="Left.html" name="left">
<frame src="Right.html" name="right" scrolling="yes">
</frameset>
</html>
36
right.html
<html>
<body>
<b>Lectura </b><p>
</body>
</html>
left.html
<html>
<head>
<title>L</title>
</head>
<body>
<b>Lecturi obligatorii</b><p>
37
Tema de laborator
38