Post on 07-Sep-2019
1
Elemente de HTML (HyperText Markup Language)
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).
Internet-ul este o cale de a conecta reţelele existente de calculatoare, care extinde mult posibilităţile fiecărui sistem participant. Această reţea nu numai că reprezintă o sursă inepuizabilă de informaţii, dar, în acelaşi timp, este o nouă formă de comunicare între oameni.
2
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.
Comunicaţiile, telefonia, muzica, filmul, televiziunea sunt remodelate sau
redefinite de Internet, dând naştere la noi servicii, cum ar fi Voice over
Internet Protocol (VoIP) şi IPTV.
Ziare, carti şi publicarea de imprimare sunt alte adaptare la tehnologia Web
site-ul, sau sunt transformate în blogging şi fluxuri Web.
Apar noi forme de interacţiune umană prin mesaje instant, forumurile de pe
internet, şi de reţele sociale.
3
Spaţiul World Wide Web a devenit în ultimii ani o lume complexă, agenţii
economici folosind resursele spaţiului www:
• Operaţii bacare (Internet banking)
• Comertul online(E-comerce)
• Rezervărea şi cumpararea online (rezervare hotel, bilet avion, etc.)
Fără îndoială, cel mai dinamic și de succes dintre serviciile Internet este
Word Wide Web-ul.
World Wide Web reprezintă un spațiu informațional alcătuit din resurse
situate în locații cunoscute sub numele de noduri, utilizate prin intermediul
4
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.
Aceasta înseamnă că un program client (navigator web, browser), rulând pe
un calculator local, conectat la Internet, solicită informaţii de la un program
server, aflat pe un alt calculator, conectat la rândul său la Internet.
Programul server răspunde solicitării, trimiţând datele prin intermediul
Internetului, date care sunt preluate de navigator, interpretate şi afişate.
5
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 web sunt accesate şi transportate cu Hypertext Transfer Protocol
(HTTP), care poate utiliza opţional criptare (Secure HTTP, HTTPS) pentru a
furniza securitate şi confidenţialitate pentru utilizatorul paginii web.
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.
6
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).
7
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).
8
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>
9
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.
Culoarea fondului paginii Web se stabileşte cu atributul bgcolor al etichetei
<body>, de exemplu: <body bgcolor = culoare>.
Culoarea textului se modifică prin intermediul atributului text al etichetei
<body> după sintaxa <body text = culoare>.
O eticheta poate avea mai multe atribute – culoarea fondului, textului, etc.
10
<html>
<head>
<title> Culori </title>
</head>
<body bgcolor = red text = blue >
O pagina Web cu fondul roşu!
</body>
</html>
11
12
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).
<basefont size = număr color = culoare style = font>
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
13
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”.
Domeniul de valabilitate al caracteristicelor precizate de această etichetă se
întinde de la locul în care apare eticheta pînă la sfîrşitul paginii sau pana la
următoarea eticheta <basefont>.
Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului
se poate face cu ajutorul a două atribute ale etichetei <body>: leftmargin şi
topmargin
14
<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>
15
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>
16
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>
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie nouă şi
permite:
• inserarea unui spaţiu suplimentar înainte de blocul paragraf;
• inserarea unui spaţiu suplimentar după blocul paragraf, daca se foloseşte
delimitatorul </p> (acesta fiind opţional);
• alinierea textului cu ajutorul atributului align, avînd valorile posibile
”left”, ”center” sau ”right”.
17
<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>
18
Î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>
19
Î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>
20
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>
21
<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>
Pentru a scrie cu caractere româneşti (diacritice) trebuie folosite codurile de
mai jos:
Â; Â â; â Ă; Ă ă; ă Î; Î î; î Ş; Ş ş; ş ł; Ţ Ń; ţ
22
Formatele imaginilor acceptate de browsere sunt:
• GIF (Graphics Interchange Format) cu extensia .gif;
• JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
• BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
• TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai răspîndite formate sunt GIF (dimensiune mica, calitate slabă) şi
JPEG (dimensiune mare, calitate foarte bună).
Pentru inserarea unei imagini intr-o pagină web, se foloseşte eticheta
<img> care are atributele:
src=sursa, locul unde se afla imaginea
width = latimea imaginii
height = inaltimea imaginii
23
alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a
fost gasita
border = chenar (0 = lipsa bordura) (de la ”image” = imagine).
align = care poate lua următoarele valori:
• ”left” – aliniere la stînga; celelalte componente sunt dispuse în partea
dreapta;
• ”right” – aliniere la dreapta; celelalte componente sunt dispuse în partea
stînga;
• ”top” – aliniere deasupra; partea de sus a imaginii se aliniază cu partea
de sus a textului ce precede imaginea;
• ”middle” – aliniere la mijloc; mijlocul imaginii se aliniază cu linia de
baza a textului ce precede imaginea;
24
• ”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ă.
<img src = "pacala.jpg" border= "5" width = "350" height =
"25%" align="center" alt = "Pacala" hspace="20"> Basme
romanesti.
25
Pentru organizarea informatiei se pot folosi listele ce pot fi neordonate sau
ordonate.
Listele neordonate sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>. <ul> <li type="square">Tuica</li> <li type="circle">Whisky</li> <li type="disc">Coniac</li> </ul>
Listele ordonate sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>. Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea default)
<ol> <li type="a">Bere Ursus</li> <li type="a">Bere Ciuc</li> <li type="a">Bere Bergenbier</li> </ol>
26
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>
.
27
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
28
<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>
O imagine poate fi folosită de asemenea ca link:
<a href="http://www.google.ro"><img src="pacala.jpg" width="100" height="75" alt="poza"></a>
29
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>
30
</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>
Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
31
height = inaltimea tabelului
bgcolor = culoarea de fundal
cellspacing = distanta intre celule
cellpadding = distanta dintre marginea celulei si continut
Atributele etichetei td sunt: align = aliniere pe orizontala a continutului (left, right, center)
valign = aliniere pe verticalala a continutului (top, bottom, middle)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> (de la
”table caption” = titlu tabel).
32
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).
Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule
sunt introduse de eticheta <th> (de la ”tabel header” = cap de tabel) în loc de
<td>.
Toate atribute care pot fi ataşate etichetei <td> pot fi de asemenea ataşate
33
etichetei <th>. Conţinutul celulelor definite cu <th> este scris cu caractere
aldine şi centrat.
<table border="3"><caption><h1> Orar</h1>, </caption> <tr> <th width="120">Luni</th> <th width="120">Marti</th> <th width="120">Miercuri</th> <th width="120">Joi</th> <th width="120">Vineri</th> </tr> <tr> <td bgcolor="red">Matematica</td> <td>Fizica</td> <td>Romana</td> <td>Engleza</td> <td>Ed. Fizica</td> </tr> <tr> <td>Fizica</td> <td bgcolor="red">Matematica</td> <td>Romana</td> <td>Ed. Fizica</td> <td>Engleza</td>
34
</tr> </table>
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
35
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
36
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>
37
right.html
<html> <body> <b>Lectura </b><p> </body> </html> left.html
<html> <head> <title>L</title> </head> <body> <b>Lecturi obligatorii</b><p> <a href="HarapAlb.html" target="right">Harap Alb</a><br> <a href="Luceafarul.html" target="right">Luceafarul</a><br> </body> </html>
38
Tema de laborator
Creaţi o pagina simpla in HTML. Pagina va conţine:
- Text formatat– 3p
- Liste– 2p
- Tabele - 2p
- Link-uri interne şi externe– 2p
- Frame-uri(optional).– 1p