HTML Complet
-
Upload
grecufreestile -
Category
Documents
-
view
404 -
download
18
Transcript of 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>
HTML prof. Mirela Roatiş
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>
HTML prof. Mirela Roatiş
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>
HTML prof. Mirela Roatiş
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).
HTML prof. Mirela Roatiş
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”)
HTML prof. Mirela Roatiş
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>
HTML prof. Mirela Roatiş
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
HTML prof. Mirela Roatiş
8
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ş
9
- 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:
<html><head></head>
<body>
<table border width=”50%” height=”120”>
<tr><td>c11<td>c12<td>c13
<tr><td>c21<td>c22<td>c23
</table>
</body></html>
Lăţimea şi înălţimea unei celule: folosim atributele width şi height pentru elementul <td>
HTML prof. Mirela Roatiş
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
HTML prof. Mirela Roatiş
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.
HTML prof. Mirela Roatiş
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.
HTML prof. Mirela Roatiş
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>
HTML prof. Mirela Roatiş
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>
<head><title> fisier11</title></head>
<body>
<a href="pag11.html">Legatura catre pag11</a>
</body></html>
HTML prof. Mirela Roatiş
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>
<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:
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)
HTML prof. Mirela Roatiş
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>