HTML - curs by Nelu Fănăţan

HTML

prof. Mirela Roatiş

HTML (HYPER TEXT MARKUP LANGUAGE) Ciclul de proiectare a unei pagini web: 1. editarea fişierului, folosind un program de prelucrare a textului (Notepad) 2. salvarea fişierului cu extensia .html sau .htm 3. afişarea paginii utilizând un browser Elementele standard ale unei pagini web: <html> <head></head> <body> Aceasta este prima pagina web. </body> </html>

Observaţii: •

<…> </…> - elemente de marcaje, folosite pentru identificarea etichetelor (tag-urilor)

•

etichetele – comenzi prin care i se spune browserului cum să redea documentul

•

Documentul HTML e compus din blocuri (ex. blocul <html>…</html>)

•

Blocul <head>…</head> reprezintă antetul paginii

•

Blocul <body>…</body> reprezintă corpul paginii, blocul principal; acesta cuprinde conţinutul real al paginii Html nu face distincţie între literele şari şi cele lici folosite in tag-uri

•

Titluri pentru paginile web -

apar în bara de titlu a browser-ului

se introduce printr-un bloc <title>…</title> în blocul <head>

dacă nu punem <title>, în bara de titlu vor apărea calea şi numele fişierului

Exemplu: <html> <head> <title>Titlul paginii</title> </head> <body> Aceasta este prima pagina web. </body> </html>

HTML

prof. Mirela Roatiş

Spaţii albe: Space, Tab, Enter: browserul le ignoră, doar primul caracter dintr-o serie va fi luat în considerare Întreruperi de rând Pentru a obliga browserul să afişeze un element la începutul rândului următor, trebuie să intriducem o comandă, utilizând eticheta <br> (nu are etichetă de închidere). Exemplu: <html> <head></head> <body> Prima linie <br> A doua linie <br> A treia linie <br> </body> </html> Stiluri fizice de text Dacă pentru textul din blocul <body>… </body> al unei pagini web nu este specificat nici un stil, textul va fi afişat utilizând parametrii prestabiliţi ai browserului (Tools – Internet Options – eticheta General – butonul Fonts). Putem modifica stilul unui text utilizând stiluri fizice ca: -

i (cursiv)kmk

b (aldin)

u (subliniat)

Exemple: 1) <html> <head></head> <body> Text iniţial. <i>Text italic.</i> Text final </body> </html>

2) <html> <head></head> <body> Text iniţial. <b>Text îngroşat.</b> <b><i>Text italic şi îngroşat.</i></b> <u>Text subliniat</u> Text normal. </body> </html>

HTML

prof. Mirela Roatiş

Stiluri logice: paragraf (p), titluri (h1, h2, h3, h4, h5, h6), elementul <center>. Elementul <p>: este folosit pentru împărţirea textelor lungi în paragrafe Obs. <p> poate avea un atribut pentru alinierea paragrafelor, pe nume align, ce poate lua valorile: “left” (la stânga), “right” (la dreapta), “center” (la centru), “justify” (la ambele capete). Exemplu: <html> <head></head> <body> Prima linie <br> A doua linie, generată de o întrerupere de pagină. <p>Primul paragraf, aliniat implicit la stânga. Primul paragraf, aliniat implicit la stânga. Primul paragraf, aliniat implicit la stânga. Primul paragraf, aliniat implicit la stânga. Primul paragraf, aliniat implicit la stânga. Primul paragraf, aliniat implicit la stânga.</p> <p align=”right”>Al doilea paragraf, aliniat la dreapta. Al doilea paragraf, aliniat la dreapta. Al doilea paragraf, aliniat la dreapta. Al doilea paragraf, aliniat la dreapta. Al doilea paragraf, aliniat la dreapta. Al doilea paragraf, aliniat la dreapta. Al doilea paragraf, aliniat la dreapta.</p> <p align=”center”>Al treilea paragraf, aliniat la centru. Al treilea paragraf, aliniat la centru. Al treilea paragraf, aliniat la centru. Al treilea paragraf, aliniat la centru. Al treilea paragraf, aliniat la centru. Al treilea paragraf, aliniat la centru. Al treilea paragraf, aliniat la centru.</p> </body></html>

HTML

prof. Mirela Roatiş

Titluri: Limbajul HTML permite introducerea de titluri într-o pagină web. Acestea diferă de restul paginii si depind de browserul utilizat. Titluri predefinite: <h1>…</h1> (e afişat utilizând cel mai mare şi cel mai îngroşat font) ……………... <h6>…</h6> (e afişat utilizând cel mai mis şi cel mai subţiat font) Obs. Toate titlurile acceptă atributul align, cu aceleaşi valori ca la <p>. Exemplu: <html><head></head><body> <h1 align=”center”>Titlul 1, aliniat la centru.</h1> <h2>Titlul 2, aliniat implicit, la stânga.</h2> <h3 align=”right”>Titlul 3, aliniat la dreapta.</h3> <h4>Titlul 4</h4> <h5>Titlul 5</h5> <h6>Titlul 6</h6> </body> </html>

Elementul <p>: este folosit pentru centrarea conţinutului (text, imagini, etc.) Tipuri de literă Nume de tipuri de literă: -

recomandate: “serif”, “sans/serif”, “cursive”, “fantasy”, “monospace”

listă de nume, separate prin virgulă; ultimul nume din listă trebuie să fie un nume recomandat

Exemple: “Times New Roman, serif” “Arial, Helvetica, fantasy” Culori: -

pot fi utilizate pentru a defini un fundal sau culoarea unui tip de literă

o culoare poate fi definită prin 2 variante: 1. numele culorii: există 16 culori standard: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. 2. modelul de culoare RGB: conform acestuia, o culoare se obţine prin amestecul a 3 culori fundamentale: roşu (red), verde (green), albastru (blue). Sintaxa: “#RRGGBB”, unde R, G, B sunt cifre ale sistemului de numeraţie în baza 16: 0, 1, 2 , 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (litere mici sau mari).

HTML

prof. Mirela Roatiş

Exemple: White: “#FFFFFF” (amestec al tuturor culorilor)

Cyan:

“#00FFFF”

Black: “#000000” (absenţa oricărei culori)

Orange: “#FFA500”

Indigo: “#4B0082”

Sky Blue: “#78CEEB”

Ivory: “#FFFFF0”

Silver:

“#C0C0C0”

Elementul <font> Pentru a schimba caracteristicile unui bloc de text, folosim elementul <font>…</font>. Atributele sale: -

color – culoarea; valori posibile: cele de la secţiunea Culori

face – tipul de literă; valori posibile: nume de tipuri de litere

size – dimensiune; valori posibile: 1, 2, 3, 4, 5, 6, 7 (7 sunt cele mai mari; valoarea implicită este 3)

Exemplu: <html><head></head> <body> Text afişat cu setările implicite ale browserului.<br> <font color=blue face=”Arial, serif”>Text albastru cu font Arial.</font><br> <font color=”#aaaaaa” size=”7”> Text gri de mărime 7.</font> </body> </html> Liste O listă este o serie (secvenţă) de articole. Într-o pagină web pot fi inserate mai multe tipuri de liste, cum ar fi: -

liste neordonate (fără o ordine specificată)

liste ordonate

Liste neordonate: fiecare articol al listei are acelaşi simbol introductiv. -

pentru a in sera o listă neordonată, se foloseşte blocul <ul>…</ul>

pentru a insera un articol ]n list[, se folose;te elementul <li>…</li> (eticheta de închidere eate op’ională în HTML).

Observaţii: 1. lista acceptă drept antet textul introdus imediat după eticheta <ul> şi înaintea primei etichete <li>. 2. browserele inserează un spaţiu suplimentar înaintea unei liste şi o indentează spre dreapta cu câteva spaţii. 3. simbolul introductiv pentru articolele uni liste poate fi: a. un disc (implicit) (”disc”) b. un cerc (”circle”) c.

un ppătrat (”square”)

HTML

prof. Mirela Roatiş

4. dacă dorim să schimbăm simbolul introductiv, folosim atributul type al elementului <ul>, cu valorile posibile: ”disc”, ”circle”, ”square”. Exemple:

1) <html><head></head><body> Text normal înaintea listei. <ul>Antetul listei. <li>Primul articol. <li>Al doilea articol. <li>Al treilea articol. </ul> </body> </html>

2) <html><head></head><body> <ul type=”square”>Listă cu simbol introductiv pătrat. <li>Primul element. <li>Al doilea element. <li>Al treilea element </ul> </body> </html>

3) Listă imbricată: <html><head></head><body> Text normal. <ul>Enumerăm câteva elemente şi atribute HTML : <li>body <ul>Atribute: <li>bgcolor <li>text </ul> <li>font <ul>Atribute: <li>face <li>size </ul> </ul> </body></html>

HTML

prof. Mirela Roatiş

Liste ordonate: -

pentru a insera o listă ordonată, folosim blocul <ol>…</ol>.

pentru a insera un articol, folosim elementul <li>…</li> (opţional).

Exemplu: <html><head></head> <body> Text normal. <ol>Aceasta este o listă ordonată.. <li>Primul element. <li>Al doilea element. <li>Al treilea element. </ol> </body> </html> Obs: implicit, simbolurile introductive utilizate sunt 1, 2,… Pentru a le modifica, folosim atributul type al elementului <ol>, cu valorile posibile: 1, a, A, i, I Exemplu: <html><head></head> <body> Text normal. <ol type=”I”>Pentru a crea o pagină web trebuie să: <li>editaţi fişierul-sursă <li>salvaţi fişierul cu extensia .html <li>publicaţi fişierul pe un server </ol> </body></html>

Tabele În limbajul HTML, elementul <table>…</table> este unul dintre elementele cu cea mai mare complexitate. El este utilizat atât pentru organizarea informaţiei oe rânduri şi coloane, cât şi ca machetă pentru poziţionarea altor elemente. Orice tabel este compus din: -

un element <table>…</table>

linii, definite de etichete <tr> (table row)

celule, definite de etichete <td> (table data)

Obs. Etichetele </tr> şi </td> sunt opţionale în HTML

HTML

prof. Mirela Roatiş

Exemplu: <html><head></head> <body> Text normal înaintea tabelului. <table> <tr><td>c11<td>c12<td>c13 <tr><td>c21<td>c22<td>c23 </table> Text normal după tabel. </body></html>

Bordurile unui tabel: pot fi adăugate folosind atributul border al elementului <table>. Exemplu: <html><head></head> <body> Text normal înaintea tabelului. <table border> <tr><td>c11<td>c12<td>c13 <tr><td>c21<td>c22<td>c23 </table> Text normal după tabel. </body></html> Obs: Valoarea implicită a grosimii bordurii este de 1 pixel. Dacă dorim borduri de o altă grosime, putem preciza pentru atributul border o altă valoare, număr întreg pozitiv. Exemplu: <table border=”5”> Culoarea bordurii unui tabel Pentru a preciza culoarea bordurii unui tabel folosim atributul bordercolor al elementului <table>. Valorile acestuia sunt aceleaşi de la secţiune Culori. Exemplu: <html><head></head> <body> <table border=”5” bordercolor=”#0000ff”> <tr><td>c11<td>c12<td>c13 <tr><td>c21<td>c22<td>c23 </table> </body></html> Alinierea unui tabel: -

pentru aliniere se foloseşte atributul align al elementului <table>

HTML

prof. Mirela Roatiş

valori posibile: “left”, “center”, “right”

Exemplu: <html><head></head> <body> Text înaintea Tabelulul 1. <table align=”right” border> <tr><td>c11<td>c12<td>c13 <tr><td>c21<td>c22<td>c23 </table> Text după Tabelul 1 şi înaintea Tabelului 2. <table border=”3” bordercolor=”green”> <tr><td>c11<td>c12<td>c13 <tr><td>c21<td>c22<td>c23 </table> Text după Tabelul 2 şi înaintea Tabelului 3. <table align=”right” border=”2” bordercolor=”#aa2266”> <tr><td>c11<td>c12<td>c13 <tr><td>c21<td>c22<td>c23 </table> </body></html> Lăţimea şi înălţimea unui tabel: Prin definiţie, browserul calculează lăţimea şi înălţimea unui tabel astfel încât conţinutul fiecărei celule să fie afişată corect. Putem defini dimensiunea unui tabel utilizând atributele width şi height. Valori posibile: -

numere întregi pozitive (reprezentând dimensiunea în pixeli)

procentaje (din dimensiunile blocului părinte)

Exemplu:

Lăţimea şi înălţimea unei celule: folosim atributele width şi height pentru elementul <td>

HTML

prof. Mirela Roatiş

Obs. Schimbarea înălţimii unei celule modifică automat înălţimea tuturor celorlalte celule din linie (la fel şi lăţimea unei coloane). Exemplu: <html><head></head> <body> <table border> <tr> <td width=”50” height=”100”>c11 <td width=”75%”>c12 <td width=”30”>c13 <tr> <td height=”50”>c21 <td>c22 <td>c23 </table> </body></html> Culoarea de fundal: poate fi stabilită prin folosirea atributului bgcolor. Acesta poate fi aplicat: -

întregului tabel, folosind elementul <table>

unei linii, folosind elementul <tr>

unei singure celule, folosind elementul <td>

Obs. Dacă există mai multe atributebgcolor, prioritatea lor e următoarea: mai întâi elementul <td>, apoi <tr> şi <table>. Exemplu: <html><head></head> <body> <table border bgcolor=”#ff0000”> <tr bgcolor=”#00ff00”> <td>rand <td>rand <td bgcolor=”#0000ff”>celula <tr><td>tabel <td bgcolor=”#abcdef”>celula <td>tabel </table> </body></html> Alinierea datelor în celule: Există două atribute pentru alinierea conţinutului celuleim care pot fi ataşate elementelor <tr> sau <td>: -

align: valori posibile: left (implicit), center, right, justify

valign. valori posibile: top, middle (implicit), bottom

HTML

prof. Mirela Roatiş

Exemplu: <html><head></head> <body> <table border> <tr> <td>aici<td>alinierea<br>este<td>implicit<td>stanga <td>mijloc <tr align=”right” valign=”bottom”> <td>aici<td>alinierea<td>este<td>dreapta<td>jos <tr> <td valign=”bottom”>jos<td>stanga<td align=”dreapta”>dreapta<td align=”right” valign=”top”>sus<br>dreapta </table> </body></html> Imagini World Wide Web a fost proiectat ca mediu multimedia. În acest scop, HTML permite inserarea de imagini, sunete, animaţii, filme şi alte tipuri de conţinut multimedia într-o pagină web. Formatele de imagine acceptate în Web sunt: -

GIF (Graphic Interchange Format), cu extensia .gif (recomandat pentru desene)

JPEG (Joint Photographic Experts Group), cu extensia .jpg sau .jpeg (recomandat pentru fotografii)

PNG (Portable Networc Graphics), cu extensia .png (pentru ambele, desene şi fotografii)

TIFF (Tagged Image File Format), cu extensia .tif sau .tiff

BMP (BitMaP format), cu extensia .bmp

Obs. -

formatele gif, jpeg şi png sunt acceptate de majoritatea browserelor

bmp e acceptat de Internet Explorer

tiff e afişat corect dacă browserul are un program de aompletare sau o aplicaţie ajutătoare dedicată

Inserarea unei imagini într-o pagină web: -

folosim elementul <img>, care nu necesită element de închidere, dar necesită un atribut src care să definească numele şi locaţia fişierului imagine; valori posibile: adrese URL valide.

Obs. -

dacă pagina Web şi fişierul care conţine imaginea sunt în acelaşi folder, este suficientă introducerea numelui acestuia (vezi Exemplul 1).

dacă imaginea este într-un folder derivat, trebuie indicată calea, folosind ca şi separator caracterul / (vezi Exemplul 2).

dacă pagina Web şi fişierul care conţine imaginea se află pe calculatoare diferite, conectate la Internet, se precizează adresa URL absolută (Uniform Resource Locator), ca în Exemplul 3.

HTML

prof. Mirela Roatiş

Exemplul 1:

<html> <head><title>Cinema</title></head> <body> <h2>Actorul preferat:</h2> <img src="penn_oscar.jpg">Sean Penn </body></html>

Exemplul 2:

<html> <head></head> <body> <h3>Personajul din desene animate preferat:</h3> <img src="C:/Documents and Settings/Mirela/My Documents/My Pictures/mickey mouse.jpg"> Mickey Mouse </body></html>

Exemplul 3:

<html> <head></head> <body> O imagine e urmatoarea: <img src="http://www.google.com/intl/en_ca/images/logo.gif"> </body></html>

Chenarul (bordura) unei imagini: Pentru a adăuga un chenar negru la o imagine folosim atributul border al elementului <img>. Valori posibile: 0 (implicit) sau orice număr întreg pozitiv, ce reprezintă grosime în pixeli a chenarului.

HTML

prof. Mirela Roatiş

Exemplu: <html> <head></head> <body> Fara bordura: <img src="happy.jpg"><br> Cu bordura: <img src="happy.jpg" border="5"> </body></html> Lăţimea şi înălţimea unei imagini: Prin definiţie, imaginile sunt afişate cu dimensiunile lor reale. Dacă dorim să le modificăm, folosim atributele width şi/sau heigh ale elementului <img>. Valori posibile: -

numere întregi pozitive (mărimea în pixeli);

procente (din dimensiunile blocului părinte)

Obs. Dacă modificăm doar o dimensiune, imaginea va fi afişată proporţional; dacă precizăm valori pentru ambele atribute, imaginea va fi afişată cel mai probabil deformată. Exemplu: <html> <head></head> <body> Marime reala: <img src="babele.jpg"> Alta latime: <img src="babele.jpg" width="200"> <br>Scalare disproportionata: <img src="babele.jpg" width="200" height="100"> </body></html>

Alinierea imaginilor pe orizontală (relative la blocul părinte): Folosim atributul align, cu valorile: left, right, center. Exemplu: <html> <head></head> <body> <img src="babele.jpg" align="right"> Varful Balele-Busteni </body></html>

HTML

prof. Mirela Roatiş

Realizarea legăturilor: Legăturile sunt elemente ale unei pagini web care fac posibilă navigarea între resursele Internet. Pentru a realize o legătură, folosim elemental ancoră <a href=”referinta”>Entitate de selectat<a>. Acesta poate avea atributul src care identifică adresa URL a resursei. Exemplu: <html> <head></head> <body> Pentru mai multe informatii despre Oracle, vizitati <a href="http://www.oracle.com">Oracle Corporation Home Page.</a> </body></html> Utilizarea unei imagini la realizarea unei legături: Exemplu: <html> <head></head> <body> Pentru mai multe informatii despre Oracle, vizitati <a href="http://www.oracle.com"><img src="oracle.jpg"></a> </body></html>

Legături între două pagini localizate în acelaşi director : Exemplu: Realizaţi două pagini: pag11.html şi pag12.html în acelaşi director, astfel: Fişierul pag11.html: <html> <head><title> fisier11</title></head> <body> <a href="pag12.html">Legatura catre pag12</a> </body></html>

Fişierul pag12.html: <html> <head><title> fisier11</title></head> <body> <a href="pag11.html">Legatura catre pag11</a> </body></html>

HTML

prof. Mirela Roatiş

Obs. Prin definiţie, când utilizatorul activează o legătură, browserul înlocuieşte pagina care conţine legătura cu noua pagină, specificată de legătură. Pentru a schimba acest comportament, putem ataşa elementului <a> un nou atributm numit target, având drept valori orice şir de caractere care defineşte numele noii ferestre, cuprins între ghilimele, ca în exemplul de mai jos. Legături la alte tipuri de fişiere: Putem defini legături către orice tip de fişiere, nu doar HTML. Exemplu: <html> <head><title> fisier11</title></head> <body> <a href="fisier1.txt" target="unu">Fisier text</a><br> <a href="fisier2.jpg" target="doi">Fisier imagine</a><br> <a href="fisier3.xls" target="trei">Fisier registru de calcul</a><br> </body></html> Obs. Dacă browserul nu cunoaşte şi nu poate lucra cu noul tip de fişier, el va încerca să descarce fişierul (va apărea o fereastră File Download) pe sistemul client. Hărţi de imagini: Imaginea hartă ne permite să definim mai multe legături utilizând o singură imagine. Zonele sensibile la selectarea cu mouse-ul pot fi rectangulare, poligonale sau circulare. Acest proces presupune trei paşi: 1. se inserează imaginea ca o hartă, folosind atributul usemap al elementului <img>, având drept valoare un nume de hartă, precedat se simbolul #: <img src=”nume_imagine.jpg” usemap=”#nume_harta”> 2. se inserează harta, folosind elementul <map>…</map>, care are drept atribut obligatoriu atrimutul name, a cărui valoare trebuie să fie aceeaşi cu nume_hartă: <map name=”nume_harta”>…</map> 3. se inserează legături, utilizând elementul <area> în interiorul elementului <map>; un element <area> are trei atribute importante: -

href – pentru definirea legăturilor către noile resurse

shape – pentru definirea zonei active din interiorul imaginii. Valori posibile:

rect (rectangle), pentru zonă dreptunghiulară

circle (cerc), pentru zonă circulară

poly (poligon), pentru zonă poligonală

coords – pentru definirea coordonatelor zonei active (vezi exemplul de mai jos)

HTML

prof. Mirela RoatiĹ&#x;

Exemplu: