HTML Complet

HTML prof. Mirela Roatiş

1

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>


2

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>


3

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>


4

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).


5

Exemple:

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

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

Indigo: “#4B0082”

Ivory: “#FFFFF0”

Cyan: “#00FFFF”

Orange: “#FFA500”

Sky Blue: “#78CEEB”

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”)


6

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>


7

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


8

Exemplu:

<html><head></head>

<body>

Text normal înaintea tabelului.

<table>

<tr><td>c11<td>c12<td>c13


</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>



</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”>



</table>

</body></html>

Alinierea unui tabel:

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


9

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

Exemplu:

<html><head></head>

<body>

Text înaintea Tabelulul 1.

<table align=”right” border>



</table>

Text după Tabelul 1 şi înaintea Tabelului 2.

<table border=”3” bordercolor=”green”>



</table>

Text după Tabelul 2 şi înaintea Tabelului 3.

<table align=”right” border=”2” bordercolor=”#aa2266”>



</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:

<html><head></head>

<body>

<table border width=”50%” height=”120”>



</table>

</body></html>

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


10

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


11

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.


12

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.


13

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>


14

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>


<body>

<a href="pag11.html">Legatura catre pag11</a>

</body></html>


15

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>


<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:

o rect (rectangle), pentru zonă dreptunghiulară

o circle (cerc), pentru zonă circulară

o poly (poligon), pentru zonă poligonală

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


16

Exemplu:

<html>

<head></head>

<body>

<img src="harta.jpg" usemap="#forme">

<map name="forme">

<area href="fisier1.txt" shape="rect" coords="50,50,200,100">

<area href="happy.jpg" shape="circle" coords="250,250,100">

<area href="fisier3.xls" shape="poly"

coords="280,50,280,100,400,70">

</map></body></html>

HTML Complet

Documents

Transcript of HTML Complet