Documente Academic
Documente Profesional
Documente Cultură
HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la
baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri si au extensia
.html sau .htm.
Puteti scrie astfel de fisiere cu Notepad sau cel mai indicat cu un editor specializat care va
indica si numarul liniilor, lucru util la depanarea codului HTML. Verificati ca nu aveti
extensiile ascunse (My Computer -> Tools -> Folder Options -> View -> debifati Hide
extensions for known file types). Pentru a putea crea fisiere html dati clic dreapta New ->
Text Document, apoi il redenumiti nume.html.
Personal eu folosesc PhpEdit care te va ajuta si atunci cand vei invata php.Downloadati-l
de aici : http://www.waterproof.fr/products/PHPEdit/download.php !
Cod:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Cod:
<html>
<head>
<title>Titlu paginii</title>
</head>
<body>
Continut paginii voastre
</body>
</html>
Observam :
1. <html> -acest tag arata ca avem de a face cu o pagina html,</html> iar acesta inchida
tagul<html>
2. Apoi observam tagurile<head></head> .Acesta este headarul cu informatii.Aceste
informatii nu sunt afisate!
3. Urmeaza tagurile <title></title> Intre acestea se va scrie titlul pagini.
4. Intre tagurile <body></body> se scrie codul html.
5.Taguri uzuale
1.Tagul <b></b>
Cod:
<html>
<head>
<title>Scris ingrosat</title>
</head>
<body>
<b>Acesta este un text ingrosat!!</b>
</body>
</html>
2.Tagul <h1></h1>…<h6></h6>
Acest tag mareste textul (cel mai mare fiind <h1></h1>) sau micsoreaza textul (cel mai
mic fiind <h6></h6>)
Exemplu :
Cod:
<html>
<head>
<title>Tagurile <h></h></title>
</head>
<body>
<h1>Acesta este un text!</h1>
<h2>Acesta este un text!</h2>
<h3>Acesta este un text!</h3>
<h4>Acesta este un text!</h4>
<h5>Acesta este un text!</h5>
<h6>Acesta este un text!</h6>
</body>
</html>
3.Tagul <hr>
Acesta creeaza linii orizontale pentru a separa diferite zone intr-o pagina web. I se pot
adauga acetui tag diferite atribute, ca: width=x (pentru lungimea liniei) sau
width=x% (pentru lungimea liniei raportate la toata lungimea ecranului), size=x
(pentru linie ingrosata dar transparenta) si noshade (pentru linie ingrosta plina). Un
tag <hr> fara atribute va fi interpretat ca linia sa aiba toata lungimea paginei.
Exemplu :
Cod:
<html>
<head>
<title>Linia orizontala</title>
</head>
<body>
<hr width=50>
<hr width=40%>
<hr size=8>
<hr noshade>
<hr width=60% size=12 noshade>
</body>
</html>
De retinut: Se pot folosi mai multe atribute intr-un tag.
3.Tagul <u></u>
Exemplu :
Cod:
<html>
<head>
<title>Text subliniat</title>
</head>
<body>
Ma numesc <u>Andrei</u>
</body>
</html>
6.Imagini,linkuri,sunete
1.Linkuri
Link-urile sunt esenta webului, fara acestea paginile unui sit nu ar avea
legatura intre ele. Pentru a adauga un link se foloseste tagul de deschidere <a
href="locatie"> si tagul de inchidere </a>. Tot ce va aparea intre aceste doua taguri
va fi subliniat si colorat, iar in momentul click-ului pe acel text, browser-ul va fi
trimis spre locatia data.
Exemplu :
Cod:
<html>
<head>
<title>Site</title>
</head>
<body>
Apasa <a href=”http://www.google.ro”>aici</a> si vei fi redirectionat catre
google!
</body>
</html>
2.Imagini
3.Sunete
Cod:
<embed src="nume_sunet" width=n height=n autoplay=n hidden=n loop=n
volume=n></embed>
6. Liste
<li>
Indicã un element dintr-o listã (ne)numerotatã.
Exemplu:
<li type="circle">
Acest tag suportã atributele:
• Atributul type: poate lua valorile disc, circle, square sau A, A, I, i, 1. Folosit în listele
nenumerotate.
• Atributul value: precizeazã valoarea numericã a elementului din listã considerat. Folosit
în listele numerotate.
<ol>
Listã numerotatã (ordonata).
Exemplul 1:
<ol start="7">
Atributul start precizeazã valoarea de la care pleacã numerotarea elementelor din listã.
<ul>
Listã nenumerotatã (neordonata).
Exemplul 1:
Cod:
<ul type="disc">
<li>Cirese
<li>Visine
<li>Pepene
</ul>
Cod:
<ul type="disc">
<u>Fructe</u>
<li>Mere
<li>Pere
<li>Citrice
<ol>
<li>Lamai
<li>Mandarine
</ol>
</ul>
Exemplul 2:
Cod:
<ul type="disc">
<u>Fructe</u>
<li>Mere
<li>Pere
<li>Citrice
<ol>
<li>Lamai
<li>Mandarine
</ol>
</ul>
Aceastã secventã de cod produce încuibarea unei liste cu citrice în lista cu fructe:
Fructe
• Mere
• Pere
• Citrice
1. Lamai
2. Mandarine
5. Despre tabele
<table>
Tag-urile <table>,<td> si <tr> sunt singurele tag-uri indispensabile realizãrii unui tabel.
Orice tabel va incepe cu <table> si se va incheia cu </table>. Tag-ul <table> suporta mai
multe atribute.
Exemplu:
<table bgcolor="red" width="60%" border="5" bordercolor="blue" cellspacing="10"
cellpadding="5" align="right" height="20">
Efect: aparitia ( dupã completarea codului ) unui tabel cu fundalul rosu, cu un chenar
albastru având grosimea de 5 pixeli. Tabelul va fi plasat în dreapta paginii; distanta dintre
celule va fi de 10 pixeli, iar distanta dintre text si marginea celulei de 5 pixeli. Inãltimea
tabelului ar trebui sã fie de 20 de pixeli, dar browserele rareori tin seama de atributul
height.
• Atributul bgcolor a setat culoarea fundalului.
• Atributul width poate fi exprimat procentual ( ca mai sus ) sau in valoare absoluta ( in
pixeli ) si stabileste cat din latimea paginii va ocupa tabelul.
• Atributul border stabileste grosimea chenarului.
• Atributul bordercolor stabileste culoarea chenarului.
• Atributul cellspacing stabileste distanta dintre celule.
• Atributul cellpadding stabileste distanta dintre continutul unei celule si marginea
celulei.
• Atributul align produce alinierea tabelului la dreapta, la stanga sau in centrul paginii.
• Atributul height stabileste inaltimea tabelului. In acest exemplu, ia valoarea de 10
pixeli, dar poate fi stabilit si in procente din inaltimea ferestrei.
<tr>
Orice linie din tabel va fi marcata prin <tr> la inceput si prin </tr> la sfarsit. O linie poate
contine una sau mai multe celule. Tabelele au acelasi numar de celule pe fiecare
linie/coloana. Nu sunt permise tabelele in forma de L, T etc. Pot exista insa celule goale
( sau continand doar &nbsp; ).
<td>
Orice celula e delimitata de tag-urile <td> si </td>. Fiecare celula poate avea alta culoare
de fundal. O celula poate contine alt tabel care poate contine alt tabel etc. Desigur, o
celula poate contine atat text cat si imagini. In interiorul acestui tag, ca si in interiorul tag-
ului anterior, poate fi introdus atributul align, acesta putand lua valorile left, right, center,
middle, bottom. Acest atribut seteaza alinierea textului din celula respectiva..
1.Exemple tabele
Cod:
Telefon gratis
<table border="5">
<tr>
<td>
telefon<br>mobil<br>gratuit gratuit gratuit gratuit
</td>
</tr>
</table>
Telefon gratis
Secventa de cod de mai sus produce afisarea tabelului de mai jos, care contine o singura
celula. Tabelul are acelasi fundal ca si pagina în care e inclus. Chenarul are grosimea de 5
pixeli. Textul e aliniat la stanga, aceasta fiind setarea implicita
Observatie: Tabelul nostru apare dupã textul "Telefon gratis". Tabelul e afisat în mod
automat pe rândul urmãtor, în stânga paginii, fãrã sã fie necesarã prezenta unui <br>.
Similar, textul ce urmeazã tabelului e afisat automat pe rândul urmãtor.
Culoarea chenarului a fost stabilitã de browser. Dacã dorim sã stabilim noi culoarea
chenarului, vom folosi atributul bordercolor. Scriind <table border="5"
bordercolor="steelblue">
Exemplu:
Cod:
<table border="5" bordercolor="blue" bgcolor="fuchsia">
<tr> <th colspan="2" axis="Elevi">Clasa a XI-a E</th></tr>
<tr><td>Fete</td><td>Baieti</td></tr>
<tr><td>15</td><td>14</td></tr>
<table>
Atributul axis stabileste ca numele header-ului este "Elevi", nume ce poate fi pronuntat
de un sintetizator de voce pentru uzul unei persoane handicapate sau ocupate cu alte
activitati. Aceasta secventa de cod va produce afisarea urmatorului tabel:
Clase a XI-a E
Fete Baieti
15 14
<thead>
<tbody>
Grupeaza linii in corpul unui tabel. E un container care are obligatoriu eticheta de
inchidere.
<tfoot>
<caption>
Acest tag produce afisarea unui text deasupra tabelului sau sub tabel.
Exemplu:
Cod:
<caption>Productie</caption>
<caption align=bottom>Fructe</caption>
<tr><td>Mere</td><td>Pere</td></tr>
<tr><td>150 kg</td><td>140 kg</td></tr>
<table>
Aceasta secventa de cod va produce afisarea urmatorului tabel, in care sunt prezente doua
elemente header. In IE 5.5, primul va aparea deasupra tabelului si al doilea ( cel în a c?rui
eticheta am precizat: align=bottom ) sub tabel. In Netscape Navigator 4.75, ambele
elemente header vor aparea deasupra tabelului.
<colgroup>
Intr-un tabel, coloanele pot avea latimi diferite, iar textul poate fi aliniat in mod diferit.
Tag-ul discutat acum realizeaza asemenea performante.
Exemplu:
Cod:
<colgroup width="20px" align=left span=3>
Observatie: Dupã cum ati observat, tabelele de mai sus au fost folosite pentru dispunerea
datelor. Totusi, in pagina web, tabelul are un rol important: rolul de machetã a paginii.
Mai exact, informatia oricãrei pagini web e dispusã într-un tabel invizibil, pe mai multe
coloane, tabel ce joacã rol de machetã. Puteti studia detaliat acest lucru intrând pe diverse
pagini web si citindu-le sursele. Fac exceptie, de putin timp, paginile care folosesc div-uri
pentru dispunerea informatii.
2. Frames
1.Avantaje/dezavantaje
<frameset>
Acest tag divide fereastra în subspatii dreptunghiulare numite cadre (=frames). Tag-ul
<frameset> urmeaza tag-ului </head> si înlocuieste tag-ul <body>. Atribute:
• Atributul rows precizeaza spatiul ce va fi ocupat de fiecare rând. Se exprima în pixeli
sau în procente. Varianta procentelor e cea recomandabila, deoarece monitoarele au
dimensiuni diferite.
• Atributul cols precizeaza spatiul ce va fi ocupat de fiecare coloana. Similar atributului
rows.
<frame>
Acest tag defineste fiecare cadru. Are urmatoarele atribute:
• Atributul name - precizeaza numele cadrului curent.
• Atributul src are ca valoare un URL. Acesta poate apartine unui fisier HTML, unui
fisier video, unei imagini ( .gif, .jpg etc ) sau unui alt obiect. Totusi, ultimele 3 variante
nu sunt recomandabile. Pentru ca fisierul video etc. sa fie accesibil persoanelor cu
handicap si sa fie mai bine indexat de motoarele de cautare, e de dorit sa fie introdus într-
un fisier html. Acesta va constitui continutul cadrului.
• Atributul longdesc are drept valoare URL-ul unde se afla descrierea detaliata a
continutului cadrului. Rar folosit.
• Atributul frameborder poate lua valoarea 1 ( cea implicita ) sau 0. Daca luam
frameborder="0", cadrul nu va avea margine. In caz contrar, va avea.
• Atributul noresize nu ia valori. Prezenta sa în cadrul tag-ului discutat nu e
recomandabila, deoarece face ca vizitatorul sa nu-si poata regla dimansiunile cadrelor
dupa gust.
• Atributul scroll poate lua una dintre valorile: yes|no|auto. Folosindu-l, putem determina
aparitia/disparitia barei de scroll a cadrului.
• Atributele marginwidth, marginheight seteaza distanta dintre text si marginea cadrului.
<noframe>
Unele browsere nu suporta cadrele. Acestora li se adreseaza un mesaj cuprins între tag-
urile <noframes> si </noframes>. Mesajul e vizibil numai când cadrele nu sunt afisate.
Totusi, browserele moderne nu au aceasta problema.
3.Exemple de frame
Impartirea pe verticala a unei pagini în doua cadre numite stanga si dreapta se face astfel:
Cod:
<html>
<head><title>index.html</title></head>
<frameset cols="20%,*">
<frame name="stanga" src="sta.htm" noresize scrolling='auto'>
<frame name="dreapta" src="dre.htm" noresize scrolling='auto'>
</frameset>
</html>
Exemplul 2:
Cod:
<html>
<head><title>index.html</title></head>
<frameset rows="10%,80%,*">
<frame name="sus" src="x.htm" noresize scrolling='no'>
<frame name="centru" src="y.htm" noresize scrolling='auto'>
<frame name="jos" src="z.htm" noresize scrolling='no'>
<noframes>
Despre cadre (frames) in HTML
</noframes>
</frameset>
</html>
Aceasta secventa de cod împarte pagina în trei ferestre orizontale, numite "sus", "centru"
si "jos". La încarcarea fisierului index.html, în aceste trei ferestre vor fi încarcate fisierele
x,y si z. Ferestrele de sus si de jos nu vor avea bara de scroll, iar cea de la mijloc va avea
numai daca este cazul. Browserele care nu suporta cadre vor afisa doar:
Despre cadre (frames)in HTML
Exemplul 3:
Cod:
<html>
<head><title>index.html</title></head>
<frameset rows="100,*,40">
<frame name="sus" src="a.htm" noresize scrolling='no'>
<frameset cols="50,*">
<frame name="stanga" src="b.htm" scrolling='no'>
<frame name="dreapta" src="c.htm" scrolling='auto'>
</frameset>
<frame name="jos" src="d.htm" noresize scrolling='no'>
</frameset>
</html>
• Fereastra de sus are dimensiunea de 100 pixeli si se numeste "sus". In aceasta fereastra,
va fi afisat fisierul a.htm.
• Fereastra de jos are dimensiunea de 40 pixeli, se numeste "jos" si va contine fisierul
d.htm.
• Fereastra de la mijloc e împartita în alte doua ferestre, care poarta numele de "stanga" si
"dreapta".
Prima va ocupa 50 de pixeli din dimensiunea pe orizontala a paginii, iar cealalta restul;
vor afisa continutul fisierelor c.htm si d.htm. Nici o fereastra nu prezinta bara de scroll,
cu exceptia ferestrei "dreapta".
4.<iframe>
Un cadru poate fi introdus în interiorul unei pagini obisnuite, folosind tag-ul <iframe>.
Acest tag e suportat doar de Internet Explorer.
Exemplul 1:
Cod:
<iframe src="pagina.html" width="30%" height="40" align=center>
</iframe>
Noua fereatra are în.ltimea de 140 de pixeli si va ocupa 30% din latimea elementului în
care se aflã (în cazul nostru, o celulã a unui tabel invizibil). In interiorul ferestrei, va
aparea continutul fisierului a.htm. Avantajul folosirii acestui tag e faptul ca permite
afisarea continutului unui fisier extern, dimensiunea în kB a paginii principale ramânând
redusa
Exemplul 2:
Cod:
<iframe src="pagina.html" width="200" height="40" align=right
frameborder="0" scrolling="auto" marginwidth="10" marginheight="20">
<!--Pentru browserele ce nu suporta tag-ul <iframe>:-->
Bine ati venit în pagina mea !
Votati-ne în top100.ro !
</iframe>
<!--Pentru browserele ce nu suporta tag-ul <iframe>:--> Bine ati venit
în pagina mea !<br> Votati-ne în top100.ro !
Observatii:
• O asemenea fereastra poate fi realizata si folosind CSS. Diferente:
Din pacate nu ma pricep la CSS dar cand voi invata voi veni cu completari!!
• Tag-ul <iframe> are multe în comun cu tag-ul <object>. Acesta din urma e însa suportat
mai mult decât <iframe> de browsere si e inclus si în HTML 4.0 Strict.
• In fisierul afisat cu <iframe>, serverul-gazdã introduce bannere, ca si în pagina
principalã. Practic, în pagina pe care o aveti sub ochi, se aflã 3 rânduri de bannere. De
aceea, tag-ul <iframe> e recomandat numai în siturile cu webhosting-ul plãtit.