Scribd
Încărcați
280 vizualizări

Tutoriale HTML

Documentul oferă o introducere în limbajul HTML și prezintă elementele de bază precum <html>, <head>, <body>, <title> și modul în care acestea sunt folosite pentru a crea o pagină web. De asemenea, explică atribute precum class, id și name.

Încărcat de

Madalina Mada
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
280 vizualizări

Tutoriale HTML

Documentul oferă o introducere în limbajul HTML și prezintă elementele de bază precum <html>, <head>, <body>, <title> și modul în care acestea sunt folosite pentru a crea o pagină web. De asemenea, explică atribute precum class, id și name.

Încărcat de

Madalina Mada
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 37

Ce este HTML

Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de programare web. Acesta sta la baza
crearii unui site web. Cu alte cuvinte, inainte de a invata alte limbaje de programare trebuie sa cunosti cel putin
comenzile de baza din HTML.
Acest sir de tutoriale html este conceput pentru a-ti oferi putina experienta, pentru ca tu sa fi capabil sa citesti si sa scri
in HTML, sa poti salva corect documentele si sa poti, dupa aceea sa vizualizezi toata "osteneala" intr-un browser web.
Din pacate aceeasta pagina nu detine o rubrica pentru a te invata sa folosesti functiile de baza ale unui calculator, asa ca
in acest sens poti sa ceri ajutorul unui prieten pentru a putea fii initiat in urmatoarele:
- Sa stii ce este un notepad si cum se foloseste
- Sa stii sa deschizi un fisier folosind Internet Explorer (sau oricare alt browser la alegere)
- Sa stii ce este si cum se face un copy/paste

Prima pagina web


Pentru inceput copiaza urmatorul cod HTML in notepad. Aigurate ca operatiunea a fost executata corect, in caz contrar
pagina nu va functiona.

<html>
<head>
</head>
<body><h2>Prima mea pagina web!</h2>
</body>
</html>
Codul de mai sus, este tot ceea ce iti trebuie pentru a crea o pagina web de baza. Acum poti salva documentul in
notepad selectand din meniul "File", optiunea "Save As". In fereastra care se deschide, selecteaza "All Files". Vom da un
nume fisierului, de exemplu "index.html", fara ghilimele. Verifica de doua ori innainte de a apasa butonul "Save". O sa te
rog sa incerci sa iti aduci aminte unde ai salvat fisierul deoarece vom lucra cu acest fisier ceva mai tarziu.

Tag-uri de baza in HTML


Sa mai aruncam o privire asupre codului. O pagina web are in componenta doua elemente de baza. Daca vei incerca sa
creezi o pagina fara cele doua tag-uri, vei avea probleme.

<html>

<body>
Continutul paginii va fi aici
</body>
</html>
Primul tag se numeste <html> si este cel care ii spune browser-ului ca a inceput un cod in HTML. Cel de-al doilea tag,
<body>, spune browser-ului ca aici incepe partea vizibila sau continutul paginii HTML.

Inchiderea tag-urilor in HTML


Poate ai observat deja inca doua tag-uri asemanatoare la sfarsitul documentului, </body> si </html>. Acestea sunt tagurile de inchidere. </body>, da de stire browser-ului, ca sa incheiat continulul pagini, iar </html> ca s-a incheiat
documentul HTML.
Slesh "/" este pus innaintea numelui tag-ului si spune browserului ca ar dori sa inchee respectiva functie. Deci <tag> este
folosit pentru a incepe o functie, iar </tag> pentru a o incheia.

Ordinea tag-urilor - Foarte important


Ordinea deschiderii si a inchiderii tag-urilor este foarte importanta. Daca un tag este deschis intr-un altul, de exemplu
body este deschis in html atunci acel tag (body) este cel care trebuie inchis inaintea celui de-al doilea tag (html).
Am inchis mai intai body pentru ca a fost cel care s-a deschis cel mai recent. Aceasta regula si anume deschiderea si
inchiderea tag-urilor se aplica la toate celelalte taguri ale documentelor HTML.

Cea de-a doua pagina


Probabil ca ai nevoie de timp si de mai multe incercari perntru a te acomoda cu aceste reguli, asa ca cel mai bine ar fi sa
exersam in continuare cu o a doua pagina web. Copiaza acest cod in notepad, asa cum ai facut si prima data.

<html>
<head>
<title>Pagina mea! </title>
</head>
<body>
<h2>Bine ati venit.</h2>
<p>Foarte curand voi face o pagina care va v-a da pe spate pe

toti!</p>
</body>
</html>
Dupa ce te-ai asigurat ca totul e facut conform indicatiilor anterioare, poti salva documentul. Ai putea chiar sa-l salvezi
cu acelasi nume ca si cel anterior, si anume "index.html". S-ar putea sa te intrebe daca vrei sa salvezi peste documentul
anterior, poti sa dai linistit OK, nu vom mai avea nevoie de celalalt document.

Navigare

Tutorial HTML - Elemente

Elementele HTML au multe ranguri. Tot ceea ce vezi, paragrafurile, banner-ul de deasupra, link-urile de navigare la
dreapta si la stanga paginii, sunt toate elemente ale acestei pagini.
Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de inchidere.
- <p> - tag-ul pentru deschiderea unui paragraf.
- Continutul elementului - paragraful propriu-zis.
- </p> - tag-ul de inchidere.
***Nota:
Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.

<html>element...</html>
Un document HTML intotdeauna va incepe si va termina cu un tag <html> si respectiv </html>. Aceasta este spructura
standard a unui HTML.
Deschide te rog Notepad si copiaza urmatorul cod:

<html>
</html>
Salveaza documentul di meniul File / Save As. Selecteaza All Files si denumeste fisierul nou creeat, "index.html". Apasa
Save. Deschide acum fisierul intr-un browser pentru a avea posibilitatea sa dam refresh (F5).
Daca ai facut totul bine vei putea vedea prima ta pagina web, complet alba!

Elementul <head>

Elementul <head> este cel care urmeaza. Atata timp cand il pui intre html si body totul ar trebuii sa fie OK. "Head" nu
are nici o functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare. Totusi vreau sa mentionez ca
<head> poate oferi browser-ului informatii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS.
Deocamdata insa il vom lasa gol cu exceptia faptului ca vom introduce urmatorul element pe lista, dar mai intai sa
aruncam o privire fara el:

<html>
<head>
</head>
</html>
Daca vei salva documentul si vei incerca sa dai un refresh la pagina intiala din browser nu vei nota nici o diferenta. Ai
putina rabdare, in continuare vom studia cateva elemente vizibile.

Elementul <title>
Pentru ca totul sa iasa bine trebuie sa pui tag-ul title inauntrul celui de head. Ceea ce vei scrie intre cele doua tag-uri
title (<title> si </title>) va putea fi vizualizat ca si numele browser-ului, de obicei in partea din stanga sus. Alaturat
avem si codul sursa:

<html>
<head>
<title> Prima mea pagina web!</title>
</head>
</html>
Salveazal acum fisierul si deschide-l in browser. Vei putea vede titlul dupa cum am mai spus in partea din stanga sus, la
marea majorilate a browser-elor
Poti pune orice nume doresti, daoar tine minte ca numele descriptive sunt cele mai usor de gasit ulterior

Elementul <body>
Elementul body este cel care defineste inceperea continutului pagini propriu-zise (titluri paragrafuri ftografii muzica si
orice altceva). Dupa cum poti vedea in meniul de la stanga, vom trata pe rand toate aceste elemnte de continut.
Deocamdata tot ce trebuie sa retii este ca body incapsuleaza tot continutul paginii.

<html>
<head>

<title> Prima mea pagina web!</title>


</head>
<body>
Salut Gasca! Aici voi pune mai tarziu continutul!
</body>
</html>
Un browser citeste absolut tot ceea ce ai scris in documentul HTML. De fiecare data cand gaseste un tag il va trata ca
atare si il va reda, ca de exemplu un paragraf, un titlu un tabel sau orice altceva. Tagurile au trei parti dupa cum am mai
spus deschiderea, continutul si inchiderea.
Dupa cum vei putea invata mai departe exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un
browser au nevoie de un tag sau doua.

<openingtag>Continut</closingtag>
<p>Exemplu un paragraf</p>
Tag-urile se scriu cu litere mici. Acesta este standardul de scriere in XHTML si Dynamic HTML.
Alaturat sunt cateva exemple de taguri in HTML.

<body>Actioneaza ca o capsula asupra continutului.


<p>Paragraf</p>
<h2>Titlu (heading)</h2>
<b>Ingrosat (bold)</b>
<i>Inclinat (italic)</i>
</body>

Exceptii - Tag-uri care nu au nevoie de inchidere


Exista cateva tag-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste tag-uri nu au nevoie
de nuci un continut. Datorita acestui fapt se va folosi o maniera modificat de criere a acestor taguri.
Cel mai simplu exemplu este "linebreak"

<br/>

Acest tag a imbinat cele doua taguri, de deschidere si de inchidere, intro forma mult mai simpla si mai eficace de folosit.
Line break se foloseste pentru a spune browser-ului ca vrem sa coboram cu o linie mai jos, fara insa a incheia paragraful.
Urmand acest exemplu si alte tag-uri au fost modificate pentru o scriere mai simpla si mai rapida.

<img src="../img/image.jpg" /> -- Image Tag -<br /> -- Line Break Tag -<input type="text" size="12" /> -- Input Field --

Vizualizare

-- Line Break --

Atributele sunt folosite pentru a personaliza tag-urile. Ce vreau sa spun? Ca la un moment dat vei vrea sa redimensionezi
o imagine sau un tabel sau sa schimbi culoarea de fond. Toate acestea sunt posibile cu ajutorul atributelor.
Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe masura ce introducem in discutie un nou
tag. Acum insa vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tag-urilor.
Atributele se introduc intre parantezele unghiulare (<>) ale tag-ului de deschidere.

Atributele "class" si "id" in HTML


Atributele class si id sunt foarte asemanatoare. Ele nu au un rol direct in formatarea elementelor si mai degraba sunt
utile in spatele scenei cu ajutorul CSS. Vom vorbi despre rolul acestora la momentul potrivit, atunci cand vom studia
sintaxa si funcia lor in CSS.
Idea este ca atunci cand vrei sa stabilesti o clasa de tag-uri pentru a fi folosite mai tarziu ca ajutorul CSS, sa poti
diferentia intre doua tag-uri identice dar cu atribute diferite. Priveste exempul alaturat.

<p id="italicsparagraph">Paragraph type 1, inclinat </p>


<p id="boldparagraph">Paragraph type 2, ingrosat </p>

Vizualizare

Paragraph type 1, inclinat


Paragraph type 2, ingrosat

HTML - Atributul "name"


"name" este ceva mai diferit fata de "id" si "class". Punand un nume unui element, acesta devine o variabila de script
pentru Javascript, ASP si PHP. Cel mai des este intalnit in formulare si alte campuri de text interactive.

<input type="text" name="TextField" />

Vizualizare

Acest atribut (name) nu are nici un afect asupra redarii casutei de text, cu toate ca in background detine un rol foarte
important.

HTML - Atributul "title"


Atributul title este folosit foarte putin fata de cat ar trebuii, el adauga un titlu (un pop-up) oricarui continut al unui
element. Acest atribut nu ar trebui uitat. Poti denumi aproape orice si oricum doresti. Vizualizarea titlului apare atunci
cand ne oprim co mausul cateva secunde deasupra contnutului.

<h2 title="Eu sunt un atribut title!">Un Titlu Oarecare</h2>

Vizualizare

Un Titlu Oarecare

Treci cu mausul peste titlul de mai sus ca sa vezi magia atributului "title". Acest atribut va oferi site-ului tau multa
interactiune cu cei ce te vor vizita. Nu il trece cu vederea.

HTML - Atributul "align"


Daca vrei sa aliniezi in mod diferit anumite elemente ale pagini tale, atunci ai la dispozitie atributul align. Poti alinia la
stanga (left), dreapta (right) sau la mijlocul (center) pagini aproape orice element. Prin default elementele se aliniaza la
stanga, esceptand atuci cand se specifica o alta aliniere.

<h2 align="center">Titlu centrat </h2>

Vizualizare

Titlu centrat
Alete exemple:
<h2 align="left">Titlu aliniat la stanga </h2>
<h2 align="center">Titlu centrat </h2>
<h2 align="right">Titlu aliniat la dreapta </h2>

Vizualizare

Titlu aliniat la stanga


Titlu centrat
Titlu aliniat la dreapta
Valori standard pentru atribute
Multora dintere tag-uri li se atribuie, valori standard. Asta inseamna ca daca nu specifici un alt atribut, browser-ul o va
face pentru tine. De exemplu un paragraf se va alinia singur la stanga, exceptand atunci cand specifici altfel; la fel si
elementele unui tabel. Pe masura ce vei exersa vei intelege mai multe despre valorile default ale unor tag-uri

Atribute generice
Retine ca atributele sunt folosite pentru a personaliza elementele unei pagini web. Am alturat aici cateva dintre
atributele cele mai comune, folosite in HTML:

Attribute

Options

Function

align

right, left, center

Aliniere orizontala

valign

top, middle, bottom

Aliniere verticala

bgcolor

numeric, hexidecimal, sau


Un background in spatele elementului
valoare RGB

background URL

O imagine in spatele elementului

id

Definit de user

Numeste un element care se va folosi


cu CSS

class

Definit de user

Clasifica un element care se va folosi


cu CSS

width

Valoare numerica

Specifica latimea unui tabel, imagine,


sau casute de tabel.

height

Valoare numerica

Specifica inaltimea unui tabel,


imagine, sau casute de tabel.

title

Definit de user

"Pop-up". Afiseaza un titlu pentru un


element stabilit.

Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este <p>. Acesta va plasa o linie goala
deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.

<p>Paragraful este un elemet de baza in...</p>


<p>Acesta va plasa o linie goala deasupra si...</p>

Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul
pentru paragraf este <p>.
Acesta va plasa o linie goala deasupra si dedesuptul textului
pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.

HTML - Paragraf incadrat, justify


Paragrafele se pot formata aproximatix la fel de simplu ca si intr-un editor de texte. Incadrarea din exemplul alaturat s-a
facut cu ajutorul atributului justify.

<p align="justify">Paragraful este un elemet de baza in...</p>

Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul
pentru paragraf este <p>. Acesta va plasa o linie goala deasupra
si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va
interpreta ca atare.

HTML - Paragraf centrat, center


<p align="center">Paragraful este un elemet de baza in...</p>

Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul
pentru paragraf este <p>. Acesta va plasa o linie goala deasupra
si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va
interpreta ca atare.
In acest exemplu fiecare linie a paragrafului a fost centrata la mijlocul randului de redare.

HTML - Paragraf aliniat la dreapta, right


<p align="right">Paragraful este un elemet de baza in...</p>

Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul
pentru paragraf este <p>. Acesta va plasa o linie goala deasupra
si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va
interpreta ca atare.
Toate randurile paragrafului au fost asezate, in acest exemplu, la dreapta.
Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un subtitlu. Atunci cand plasezi un text intr-un tag <h1>,
textul va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul heading-ului. Titlurile pot avea dimensiuni de la
de la 1 la 6 unde 1 este cea mai mare dimensiune si repectiv 6, cea mai mica.

<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>

</body>

Vizualizare

Poti obserba ca fiecare titlu are cate un "linebreak" innainte si dupa. De fiecare data cand punem un headind, browser-ul
va reda automat de la sine un salt in linie inaintea lui si deasemenea dupa.

HTML - Exemplu Practic


Sa luam acum un exemplu simplu si sa practicam un pic pentru ca informatia sa fie inteleasa pe deplin. Ar fi de preferat
sa te obisnuiesti cu acesti termeni inainte de a continua.

<h2 align="center">HTML - Titluri 1:6 (Headings) </h2>


<p>Un titlu in HTML este exact ceea ce pare: un titlu adevarat,
sau un ...</p>
<p>Un titlu in HTML este exact ceea ce pare: un titlu adevarat,
sau un ...</p>

Vizualizare

HTML - Titluri 1:6 (Headings)


Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau
un subtitlu. Atunci cand plasezi un text intr-un tag <h1>, textul
va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul
heading-ului. Titlurile pot avea dimensiuni de la de la 1 la 6
unde 1 este cea mai mare dimensiune si repectiv 6, cea mai
mica.
Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau

un subtitlu. Atunci cand plasezi un text intr-un tag <h1>, textul


va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul
heading-ului. Titlurile pot avea dimensiuni de la de la 1 la 6
unde 1 este cea mai mare dimensiune si repectiv 6, cea mai
mica.
Vizualizeaza exemplul intr-o noua pagina
Un salt in line este diferit fata de celelalte tag-uri pe care le-am studiat pana acum. Plasarea acestuia in codul sursa al
documentului, va incheia randul respectiv si va cobora cu o linie mai jos, lasand un spatiu mai mic in comparatie cu cel
de paragraf. Se foloseste in paragraf dupa cum poti observa in exemplul de mai jos.

<p>
Ion Ionescu <br />
Calea Victoriei No.1 <br />
Bucuresti, Romania <br />
</p>

Vizualizare
Ion Ionescu
Calea Victoriei No.1
Bucuresti, Romania
Deasemenea se poate folosi pentru a evidentia o semnatura ca de exemplu la sfarsitul unei scrisori.

<p>
Multumesc anticipat,<br />
<br />
<br />
Ion Ionescu <br />
Vice Presedinte
</p>

Vizualizare

Multumesc anticipat,

Ion Ionescu
Vice Presedinte
Foloseste <hr/> pentru a crea o linie orizontala. Acest tag esste similar celui de linebreak.

<hr/>
Folosestele
<hr/><hr/>
Cu
<hr/>
Moderatie
<hr/>

Vizualizare

Folosestele

Cu

Moderatie

Dand la o parte acest exemplu exagerat linia orizontala poate deveni utila in diferite circumstante, precum poti vedea in
exemplul de mai jos: o nota de subsol.

<hr />
<p>1. "The Hobbit", JRR Tolkein.<br />
2. "The Fellowship of the Ring" JRR Tolkein.</p>

Vizualizare

1. "The Hobbit", JRR Tolkein.


2. "The Fellowship of the Ring" JRR Tolkein.
Dupa cum poti vedea, tot ceea ce face acest tag este sa deseneze o linie orizontala separand diferite zone ale
continutului sau pur si simplu decoreaza. Folosita cu iscusinta poate da rezultate destul de neasteptate.
HTML pune la dispozitie trei tipuri de liste. <ol> va afisa o lista ordonata in timp ce <ul> una neordonata, iar pentru a
realiza o lista de defnitii se foloseste <dl>. Foloseste atributele type si start pentru a realiza lista cea mai potrivita
cerintelor tale.
- <ul> - unsorted list, buline
- <ol> - ordered list, numere
- <dl> - definition list, lista de definitii.

HTML - Lista ordonata


Foloseste tag-ul <ol>pentru a incepe o lista ordonata. Prin punerea <li></li> (list item) intre tagurile <ol> si </ol>
semnalizezi browser-ului elementele listei.

<h4 align="center">Oviective</h4>
<ol>
<li>S gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>

Vizualizare

Oviective
1. Sa gasesc o slujba
2. Sa iau bani multi
3. Sa ma mut in alt oras
Poti incepe lista cu orice alt numar doresti specificandu-l insa cu ajutorul atributului start.

<h4 align="center">Oviective</h4>
<ol start="4" >
<li>S gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>

Vizualizare

Oviective
4. Sa gasesc o slujba
5. Sa iau bani multi
6. Sa ma mut in alt oras
Acest element nu face nimic iesit din comun dar este destul de folositor uneori.

HTML - Alte tipuri de liste ordonate


In afara de modelul mai sus aratat mai sunt alte patru tipuri de liste ordonate. In locul cifrelor arabe poti folosi cifre
romane sau la fel de bine litere iar in ambele cazuri pot fi folosite litere mici sau majuscule. Foloseste atributul type
pentru a modifica tipul numerotarii.

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Vizualizare
Litere mici

Majuscule

a. Un loc de

A. Un loc de

munca

munca

b. Bani

B. Bani

Numere romane
cu litere mici

Numere romane
cu majuscula

i. Un loc de

I. Un loc de

munca
ii. Bani

munca
II. Bani

c. Alt oras

C. Alt oras

iii. Alt oras

III. Alt oras

Liste nesortate
Creaza o lista nesortata cu ajutorul tagului <ul>. Listele nesortate deasemenea sunt de mai multe tipuri si anume,
patratele buline si cerculete.Valoarea standard redata de majoritatea browser-elor sunt bulinele

<h4 align="center">lista de cumparaturi </h4>


<ul> <li>lapte</li>
<li>branza</li>
<li>oua</li>
<li>zahar</li>
</ul>
Vizualizeaza exemplul
Am alaturat ceva mai jos un exemplu despre cum arata si celelalte tipuri de liste neordonate.

<ul type="square">
<ul type="disc">
<ul type="circle">
Vizualizare exemplu

HTML - Lista de definitii


Deasemene poti face liste de definitii folosind tag-ul <dl>. Aceasta lista reda cuvantul deasupra definitiei. Este indicat sa
ingrosam cuvantu pentru a fi mai bine evidentiat.

<dl>
<dt><b>Fromage</b></dt>
<dd>Cuvant francez pentru branza .</dd>
<dt><b>Voiture</b></dt>

<dd>Cuvant francez pentru masina</dd>


</dl>
Vizualizare exemplu
Pe masura ce vei adauga din ce in ce mai mult text pagini tale, vei avea nevoie de noi elemente pentru al formata in
functie de gustul si necesitati. In tutorialul despre atribute am vorbit despre, modalitati de a adauga un plus
elementelor dorite. Aceste tag-uri de formatare pot face elementele, ingrosate inclinate subliniate taiate dar nu numai.

<p>Exemplu de <b>Bold Text</b></p>


<p>Exemplu de <em>Emphasized Text</em></p>
<p>Exemplu de <strong>Strong Text</strong></p>
<p>Exemplu de <i>Italic Text</i></p>
<p>Exemplu de <sup>superscripted Text</sup></p>
<p>Exemplu de <sub>subscripted Text</sub></p>
<p>Exemplu de <del>struckthrough Text</del></p>
<p>Exemplu de <code>Computer Code Text</code></p>

Vizualizare
Exemplu de Bold Text
Exemplu de Emphasized Text
Exemplu de Strong Text
Exemplu de Italic Text
Exemplu de
Exemplu de

superscripted Text

subscripted Text

Exemplu de struckthrough Text


Exemplu de Computer Code Text

HTML - Cum sa folosesti tag-urile de formatare


Aceste tag-uri ar trebuii utilizare cu moderatie. Ceea ce vreau sa spun este ca este indicat sa le folosesti pentru a ingrosa
sau inclina de exemplu un cuvant sau doua intr-un paragraf. Atunci cand vrei sa le folosesti de exemplu cu un intreg

paagraf, cel mai bine este sa apelelezi la CSS. Oricum acesta nu este decat un sfat, in final decizia iti apartine tie si le
poti folosi dupa cum experienta iti indica.
Exista trei feluri distincte de a defini o culoare. Cea mai simpla metoda este aceea de a numi culorile (in engleza). De
exemplu: black, white, red, green, si blue. Am alaturat mai jos numele de culori care sunt suportate in HTML.

Color

Hexa

Color

Hex

Color

Hex

Color

Hex

aqua

#00FFFF green

#008000 navy

#000080 silver

#C0C0C0

black

#000000 gray

#808080 olive

#808000 teal

#008080

blue

#0000FF lime

#00FF00 purple #800080 white

fuchsia #FF00FF maroon

#800000 red

#FFFFFF

#FF0000 yellow #FFFF00

HTML - Sistemul de culori RGB


Acest cod de culori nu este recomandat, deoarece Intenet Explorer este singurul Browser care suporta valorile RGB in
HTML.
RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare intre 0 (nu
coloreaza deloc) si 255 (in totalitate acea culoare). Am alaturat mai jos forma de scriere a culorilor in RGB. Daca
folosesti un browser care nu este Internet Explorer nu vei avea nici un rezultat.

bgcolor="rgb(255,255,255)"

White

bgcolor="rgb(255,0,0)"

Red

bgcolor="rgb(0,255,0)"

Green

bgcolor="rgb(0,0,255)"

Blue

HTML - Sistemul de culori hexazecimal


Sistemul hexazecimal este destul de dificil la prima vedere. Cu toate astea te asigur ca odata cu trecerea timpului, si cu
putina practica, il vei intelege pe deplin. Sistemul de culori hexazecimal este sistemul standard pentru toate browserele web. Este de incredere si este compatibil nu numai in aplicatiile web dar si aplicatii locale precum gimp, photoshop,
corel, etc.

Sistemul coduri de culori hexazecimale este o reprezentare de 6 caractere de culoare. Primele doua caractere (RR)
reprezinta culoarea rosu (Red), urmatoarele doua (GG) culoarea verde (Green), iar ultimele doua (BB) culoarea albastra
(Blue).

bgcolor="#RRGGBB"

Cele mai sigure culori HTML


Cu toate ca aceste culori sigure (true colors) de mai sus, sunt cele recomadate pentru a fi folosite de catre webmasteri,
a fost demonstrat ca doar 22 dintre cele 216 culori sunt cu adevarat sigure si nu vor fi in absolut modificate in
reprezentare de catre nici un browser. In tabelul de mai sus culorile cu adevarat sigure au fost reprezentate cu un asterix
( * ) in fata.
Am alaturat totusi un tabel cu acestea:

*000

*F00

*003

*F03

*00F

*F0F

*FF0

*FF3

*CF6

*FF6

*0F0

*6F0

*3F3

*6F3

*0F6

*3F6

*0FC

*3FC

*0FF

*3FF

*6FF

*FFF

Tag-ul <font> este folost pentru a modifica tipul de text, marimea si culoare. Foloseste atributele "size", "color", si "face"
pentru a personaliza textul. Foloseste tag-ul <basefont> pentru a seta culoarea marimea si stilul intregului tau text.

In general tag-urile "font" si "basefont" nu se folosesc prea mult, in general se foloseste css-ul pentru a stabili atributele
textului.

Marimea Font-ului
Seteaza marimea font-ului tau cu ajutorul atributului size al tagului font. Sunt acceptate valori intre 1 (cea mai mica) si
7 (cea mai mare). Valoarea standard a unui text normal este 3.

<p>
<font size="5">Acesta este un font de marime 5 </font>
</p>

Vizualizare

Acesta este un font de marime 5


Culoarea fontului
Seteaza culoarea textului

<font color="#990000">This text is hexcolor #990000</font>


<br />
<font color="red">This text is red</font>

This text is hexcolor #990000


This text is red

Font Face
Alege un stil de litera folosind tag-ul fontface. Poti alege orice font ai instalat, cu toate acestea, alege cu grija deoarece
utilizatorul aflat pe pagina ta nuva putea vizualiza fontul respectiv daca nu il are instalat. Acesta va vedea in schimb
font-ul default si anume Times New Roman. Solutia ar fi sa alegi mai multe font-uri asemanatoare ca aspect.

<p>
<font face="Bookman Old Style, Book Antiqua, Garamond">This
paragraph has had its font...</font>
<p>

This paragraph has had its font formatted by the font tag!

Basefont
Cu ajutorul tag-ului basefont vei putea stabili valoare default a font-ului in pagina ta web. Recomandam sa specifici un
basefont in cazul in care vei utiliza font-ul in HTML. Avem alaturat un model.

<html> <body>
<basefont size="2" color="green">
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
</basefont>
</body> </html>

This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!

Cu toate acestea, basefont este oarecum depasit, este foarte probabil ca in viitorul apropiat sa nu se mai lucreze cu el,
trecanduse in acest fel definitiv configurarea cu ajutorul CSS.

Atribute
Attribute= "Value"

Description

size=

"Num. Value 1-7"

Size of your text, 7 is biggest

color=

"rgb,name,or hexidecimal"

Change font color

face=

"name of font"

Change the font type

Atributul href numeste legatura catre o alta pagina web. De fapt este locul unde va fi dus user-ul care va executa un click
pe linkul respectiv.
Linkurile pot fi de trei tipuri:

- interne - catre locuri specifice din pagina (anchors)


- locale - catre alte pagini dar pe acelasi domeniu
- globale - catre alte domeni in afara site-ului

Internal - href="#anchorname"
Local - href="../img/foto.jpg"
Global - href="http://www.tutorialehtml.com/"

HTML - Llink-uri text


Pentru a seta inceputul si sfarsitul unui anchor se poate folosi <a></a>. Alege tipul de atribut care iti trebuie si punel in
interiorul tagului. en exemoplu simplu ar fi:

<a href="http://www.tutorialehtml.com" target="_blank"


>Tutoriale HTML </a>

Vizualizare
Tutoriale HTML

HTML - Target-uri de link


Atributul target spune browser-ului daca trebuie sa deschida noua pagina intr-o noua fereastra sau in aceeasi fereastra.

target=" _blank" Deschide o noua fereastra

_self"

Deschide pagina in aceeasi fereastra

_parent" Deschide noua pagina intr-un frame superior linkului

_top"

deschide noua pagina in acelasi browser anuland toate


frame-urile

Exemplu de mai jos arata cum se poate deschide o pagina intr-o noua fereastra a browserului. In acest fel putem ramane
pe pagina de tutoriale si deschidem o noua pagina de navigare.

<a href="http://www.google.com/" target="_blank" >Google


</a>

Vizualizare

Google

HTML - Anchor
Este folosit pentru a lega doua sectiuni ale aceleiasi pagini. In acest sens va trebuii sa dam un nume sectiunilor, dar
pentru aceasta cel mai indicat ar fi sa aruncam o privire exemplului urmator.

<h1>HTML - Hypertext Reference / href<a


name="top"></a></h1>
<h2>HTML - Llink-uri text<a name="text"></a></h2>
<h2>HTML - Link-uri de e-mail<a name="email"></a> </h2>
Mai departe trebuie sa formulam codul link-ului punand innaintea numelui anchor-ului semnul diez (#). Urmareste
exemplul pentru mai buna intelegere.

<a href="#top">Mergi la inceput </a>


<a href="#text">Invata despre link-uri text </a>
<a href="#email">Invata despre adrese de e-mail </a>

Vizualizare
Mergi la inceput
Invata despre link-uri text
Invata despre adrese de e-mail

HTML - Link-uri de e-mail


Crearea unui link de email este foarte simplu. Daca vrei ca cineva sa iti scrie un email cel mai bine ar fi sa sa ii pui la
dispozitie un link cu email-ul tau si deasemenea un subiect prestabilit.

<a href="mailto:[email protected]?subject=Nelamuriri "


>Nelamuriri aici </a>

Vizualizare
Nelamuriri aici
In cazul in care un subiect nu este de ajuns si vrei sa adaugi ceva si la continutul email-ului, o poti face cu ajutorul
urmatorului cod:

<a
href="mailto:[email protected]?subject=Nelamuriri&body=Scrie
aici daca ai nelamuriri " >Nelamuriri aici </a>

Vizualizare
Nelamuriri aici

HTML - Link-uri de download


Forma unui link de download este exact aceeasi ca a unui link normal de text. Problema intervine atunci cand vrem sa
punem o fotografie. Cea mai buna solutie ar fi sa folosim un tumbnail cu un link, dar vom discuta aceasta problema mai
pe larg in lectia urmatoare.

<a href="http://www.tutorialehtml.com/htmlT/text.zip">Text
Document</a>

HTML - LInk-uri default / Link-uri de baza


Folosesta tag-ul <base> in interiorul elementului head pentru a seta un link de baza. Acesta este necesar in cazul in care
ai pe undeva un link care nu functioneaza corect sau a carui destinatie numai exista. Link-ul de baza redirectioneaza
user-ul la adresa specificata. In mod normal se redirectioneaza catre pagina de start, dar este acceptata oricare alta
pagina, eventual o pagina special facuta acestui scop.

<head>
<base href="http://www.tutorialehtml.com/">
</head>
In HTML "entitati" este un numele tehnic pentru "simboluri". Cateva simboluri precum copyright, trademark, si multe
altele, unele dintre ele disponibile pe tastatura, au nevoie de o scriere speciala.

- Incep cu semnul "end" - &


- Dupa care vom scrie numele semnului - copy
- SI la sfarsit "punct si virgula" - ;

Copyright
Foloseste &copy; pentru a realiza- - Simbolul Copyright.

Spatii multiple si <>

Dupa cum am spus si in lectia despre paragrafuri, un browser va recunoaste un singur spatiu, indiferent de cat de multe
tastezi intr-un cod de HTML. Exista insa o entitate care poate fi introdusa pentru a afisa mai mult de un spatiu.

<p> In acesta fraza au fost introdese &nbsp;&nbsp;&nbsp;&nbsp;


mai multe spatii.<p>

Vizualizare
In acesta fraza au fost introdese

mai multe spatii.

Pentru a realiza comenzi in HTML sunt folosite simbolurile "mai mult" si "mai putin". Pentru a fi afisate in browser va
trebuii sa folosim o entitate.

<p>
Mai putin - &lt; <br/>
Mai mult - &gt; <br />
Tagul head - &lt;head&gt;
</p>

Vizualizare
Mai putin - <
Mai mult - >
Tagul head - <head>
Fa o pauza si exerseaza putin cu aceste simboluri. O lista mult mai ampla a acestora gasesti aici. Dupa cum vei putea
observa in acest tabel, poate fi folosita deasemenea o valuare numerica in locul numelui standard al simbolului.
Crearea de link-uri tip e-mail este foarte simpla. Trebuie mentionat insa ca atunci cand vei pune un link tip e-mail pe o
pagina publica, este foarte usor pentru un expert sa il gaseasca pentru al folosi mai tarziu, in vederea trimiteri de mesaje
spam.
O metoda diferita, care scade riscul spam-ului este acea de a implementarea unui formular e-mail in continutul paginii
tale.

HTML - Link-uri de e-mail


Crearea unui link de email este foarte simplu. Daca vrei ca cineva sa iti scrie un email cel mai bine ar fi sa sa ii pui la
dispozitie un link cu email-ul tau si deasemenea un subiect prestabilit.

<a href="mailto:[email protected]?subject=Nelamuriri "


>Nelamuriri aici </a>

Vizualizare
Nelamuriri aici
In cazul in care un subiect nu este de ajuns si vrei sa adaugi ceva si la continutul email-ului, o poti face cu ajutorul
urmatorului cod:

<a
href="mailto:[email protected]?subject=Nelamuriri&body=Scrie
aici daca ai nelamuriri " >Nelamuriri aici </a>

Vizualizare
Nelamuriri aici
Imaginile sunt foarte importante intr-o pagina web. De aceea este recomandat sa le folosesti in mod corect. Inserarea lor
se face cu ajutorul tag-ului <img/>.

<img src="../img/image.jpg" />

Vizualizare

HTML - img src


"src" este prescurtarea pentru "source" (sursa). Acest atribut se foloseste pentru a indica locatia fotografiei. Dupa cum am
explicat in capitolul destinat linkurilor se poate folosi orice tip de URL pentru a indica adresa fisierului.

Sursa Locala

Descriere

src="image.jpg"

fotografia este situata pe acelasi nivel cu fisierul


.html

src="../image.jpg"

fotografia este situata pe un nivel anterior fisierului


.html.

src="../img/image.jpg"

fotografia este situata in folderul "img" pe nivelui


anterior fisierului .html

Se poate folosi deasemenea adresa completa a fotografie. De exemplu


scr="http://www.tutorialehtml.com/img/image.jpg". Acest model de URL nu este recomandat deoarece la schimbarea
domeniului va trebui sa schimbi deasemenea si adresele tuturor fotografiilor. Sau in cazul in care imaginea este stocata
pe un alt domeniu scr="http://www.domeniu.com/image.jpg".
Faptul de a stoca imaginea pe un domeniu alternativ, prezinta un mare avantaj in cazul in care dispui de un spatiu limitat
pe domeniul pe care este stocat fisierul .html.

HTML - Atribute alternative pentru imagini


Atributul "alt" este folosit pentru a afisa un text in locul imagini, in cazul in care browser-ul pentru un oarecare motiv nu
poate afisa imaginea sau in cazul in care un user are deselectata functia "ShowImage".

<img src="http://example.com/folder/image.jpg" alt="Imagine


Albastra "/>

Vizualizare

HTML - inaltimea si latimea unei imagini


Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele height si widith.

<img src="../img/image.jpg" alt="Imagine Albastra" width="100"


height="50" />

Vizualizare

HTML - Alinierea orizontala si verticala a unei imagini


In acest sens, sunt folosite atributele align si valign. Obtiunile oferite de aceste atribute sunt:
1. Align (orizontal)
- right
- left
- center

2.Valigh (vertical)
- top
- bottom
- center
Am atasat alaturat si un exemplu:

<p>Acesta este primul paragraf ...</p>


<p>
<img src="../img/image.jpg" align="left">
Acesta este cel deal doilea paragraf...
</p>
<p>Acesta este cel de-al treilea paragraf...</p>

Vizualizare
Acesta este primul paragraf, este doar un exemplu pentru a
putea intelege mai bine alinierea unei imagini.
Acesta este cel deal doilea paragraf, Imaginea va fi afisata
alaturat in partea dreapta, acesta este cel deal
doilea paragraf, Imaginea va fi afisata alaturat
in partea dreapta, acesta este cel deal doilea
paragraf, Imaginea va fi afisata alaturat in
partea dreapta, acesta este cel deal doilea
paragraf, Imaginea va fi afisata alaturat in partea dreapta,
Acesta este cel de-al treilea paragraf si ultimul, el nu contine
nimic dar l-am pus pentru ca "da bine".

HTML - Folosirea imaginilor ca link


Aceasta este doar o introducere, vom trata acest subiect mai pe larg intr-un tutorial urmator. Imaginile sunt foarte utile
pentru link-uri si se pot forma cu ajutorul codului urmator:

<a href="http://www.tutorialehtml.com">
<img src="../img/image.jpg"> </a>

Vizualizare

Imaginea de mai sus te va trimite la pagina de start. O poti schimba cu pagina ta de start si vei obtine o imagine cu cu un
link catre pagina ta de start.

HTML - Tumbnails
Tumbnails-urile sunt versinui in miniatura (mult mai putini kilobytes) a unor imagini care in realitate sunt mult mai mari
si cu o calitate sporita. Pentru a realiza un tumbnail, salveza imaginea intr-o calitate mult mai scazuta cu dimensiuni
reduse. Fa apoi aceasa imagine un link ce va conduce la imaginea initiala de de dimensiuni sporite.

<a href="../img/fereastra.jpg"> <img


src="../img/tumb_fereastra.jpg"> </a>

Vizualizare

Inserarea codurilor pentru muzica in HTML


Cu ceva timp in urma era destul de complicat sa introduci muzica sau sunete un general pe o pagina web.
In momentul de fata aceasta problema s-a rezolvat, adaugarea de sunete fiind foarte simpla.

<embed
src="tu si tuborg.mp3" hidden="false" autostart="false"
loop="false" volume="60" width="144" height="60" />

Se recomanda ca atat inaltimea cat si latimea sa fie direct proportionale pentru a evita distorsionarea playerului.
Pentru a ascunde playerul valoarea atributului hidden (false) se va inlocuii cu true. Acest lucru se va face doar in cazul in
care esti absolut sigur ca userul nu va dorii sa opreasca sunetul.

Controlul si manipularea playerului


Sa mai aruncam o privire exemplului de mai sus:

<embed
src="sound.mid" hidden="false" autostart="false" loop="false"
volume="60" HEIGHT=60 WIDTH=144/>
- autostart - stabileste daca sunetul va incepe imediat dupa incarcarea paginii web. Poate avea valoarea true sau false
- loop - stabileste daca sunetul va fi repetat la nesfarsit. Poate avea valoarea true sau false.
- volume - poate avea orice valoare intre 0 si 100
Experimenteaza putin cu aceste atribute pentru a le intelege mai bine si retine ca un volum ridicat este de cele mai
multe ori suparator pentru utilizator.

Inserarea de coduri pentru Video in HTML


Un fisier video se poate insera intr-o pagina html de doua moduri. Prima modalitate ar fi cu ajutorul tagului <embed/>.
Acest tag nu are nevoie de un altul de inchidere, functioneaza in mare masura la fel ca si un tag de introducere a unei
fotografii.

<embed src="example.mpeg" autostart="false" HEIGHT=60


WIDTH=144/>

Deasemenea se poate introduce un fisier video cu ajutorul unui link

<a href="example.mpeg">film name </a>

film name

Extensi video suportate de tagul embed


Acestea sunt dupa cum urmeaza:
- .swf - creat de Macromedia Flash
- .wmv - Microsoft Windows Media Video
- .mov - Quick Time Movie, apartine Apple
- .mpeg files - creat de Moving Pictures Expert Group.
Cele mai folosite find .mpeg si .swf, datorita formaului compact.

Atribute ale tagului embed


- autostart - stabileste daca fisierul va rula imediat dupa incarcarea paginii. Poate avea valoarea true sau false.
- hidden - stabileste daca butoanele sunt sau nu ascunse. Poate avea valoarea true sau false.
- volume - poate avea orice valoare intre 0 si 100

- loop - stabileste daca fisierul va fi reprodus in cerc sau nu. Poate avea valoarea true sau false.
- playcount - acesta stabileste de cate ori va fi reprodus fisierul. Spre exemplu playcount="2" (va fi reprodus de doua ori
dupa care se va opri).

Introducerea unui video de pe YouTube


Acest lucru se face foarte simplu, youtube avand pe pagina fiecarui video codul HTML corespunzator.

<! -- Aici incepe codul Youtube -->


<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/
v/UAq8qHNWMNw&hl=en&fs=1">
</param><param name="allowFullScreen" value="true">
</param> <embed src="http://www.youtube.com/
v/UAq8qHNWMNw&hl=en&fs=1" type="application/x-shockwaveflash" allowfullscreen="true" width="425"
height="344"></embed></object>
<! -- Aici se termina codul Youtube -->
Adevarul este ca ai dreptate, tot ce vezi e cam haotic, dar partea buna este ca nu trebuie sa il faci tu ci doar sa il copiezi
de pe pagina youtube, si vei avea ca rezultat reprezentarea de mai jos, sau una asemanatoare in cazul in care alegi alt
video.
Voi mentiona insa ca scripturile de embed de pe pagina youtube nu sunt XHML valid. Pentru a genera coduri valide XHML
pentru filmuletele de pe youtube va recomand acest tool. ( Valid XHTML embed code for YouTube videos ). Trebuie
doar sa introduci url-ul unde ai gasit filmul si vei obtine un cod valid XHTML.
Pentru a obtine textul ingrosat vom folosii tagul bold:

<b>Acest text este bold</b>

Afisare
Acest text este bold

Text ingrosat - Aplicatii


In general textul ingrosat se foloseste pentru a scoate in evidenta anumite cuvinte sau anumiti termeni in interiorul unei
fraze.

<p>Textul <b>ingrosat</b> este util pentru a scoate in evidenta

anumiti <b>termeni</b></p>

Afisare
Textul ingrosat este util pentru a scoate in evidenta anumiti
termeni
Se poate folosii deasemena pentru scrierea tip definitie. Dar mai bine sa exemplificam.

<p><b>Bold</b> - Cuvantul corespondent in engleza pentru


ingrosat, deasemena poate insemna, vitez. "</p>

Afisare
Bold - Cuvantul corespondent in engleza pentru ingrosat,
deasemenea poate insemana, viteaz "
Acest tag se foloseste ca si tagul bold pentru a sublinia sanumiti termeni sau cuvinte uneori o intreaga propozitie. Este
contraindicata folosirea in exces a acestora.
Pentru a realiza acest tip de text avem mai multe variante:

Tagul <i>italic </i>!


Tagul <em>emphasized</em>!
Tagul <blockquote>blockquote</blockquote>!
Tagul <address>address</address>!

Afisare
Tagul italic!
Tagul emphasized!
Tagul blockquote!
Tagul address!
In general browser-ul va interpreta la fel toate aceste taguri.
In general cele mai simple sunt si cele mai folosite, si anume <i> si <em>.

<b>HTML</b>

<i>Hyper Text Markup Language</i>


sau
<b>HTML</b>
<em>Hyper Text Markup Language</em>

Afisare
HTML
Hyper Text Markup Language
sau
HTML
Hyper Text Markup Language

HTML - Bold si Italic impreuna


De cele mai multe ori bold si italic sunt puse in alte taguri pentru a ajunge la formatarea finala a textului. In acest sens
mantionez ca nu trebuie uitata inchiderea tuturor tagurilor.

<p>Trebuiesc inchise <b><i>toate</i></b> tagurile</p>

Afisare
Trebuiesc inchise toate tagurile
Tagul <code> permite sa formatezi textul ca fiind de computer. Acesta ofera o anumita dimensiune si o spatiera tipica
codului de calculator.

Acest text a fost formatat cu ajutorul tagului <code> code


</code>.

Afisare
Acest text a fost formatat cu ajutorul tagului
code.
Acest tag se foloseste pentru a reda anumite scripturi precum cele din acest tutorial.

HTML- Code Links


O alta utilizare a acestui tag este acela de a da o alta infatisare linkurilor.

Acesta este un exemplu de link spre<a


href="http://www.google.ro"><code> Google <code></a>
formatat cu ajutorul tagului code

Afisare
Acesta este un exemplu de link spre Google formatat cu
ajutorul tagului code
Atunci cand scriem un cod HTML in notepad vom introduce spatii tab-uri, sau enter-uri pentru a ne putea orienta mai usor
in cautarea fragmenului mentionat. Un browser insa va interpreta codul mentionat ca pe o singura linie de cod ignorand
sapatiile si taburile mentionate.
In acest sens avem tagul <pre> care faciliteaza afisarea in browser a formatarii din notepad.

<pre>
Foaie verde
Si-o poezie

Si-o lipie

Am facut

Si-o lipie

Am facut

</pre>

Afisare
Foaie verde
Si-o poezie

HTML - Text exponential, Superscript


Tentru a produce un text exponential in HTML vom folosi tag-ul <sup>.

<p>Acest text este un text <sup>exponential!</sup></p>

Afisare
Acest text este un text

exponential!

HTML - exponenti
Putem folosi tagul <sup> (superscript) pentru a redacta expresii matematice, dupa cum urmeaza:

3<sup>2</sup> = 9

14<sup>x</sup>

Afisare
32 = 9
10x

HTML - Note de subsol


Textul exponential se foloseste deasemenea pentru referinte, explicatii, completari sau orice alte adaugiri in nota de
subsol.

<p>"Femeia<sup>1</sup>-i ochiul dracului." </p>


<hr />
<p>1. Nu exista explicatie pentru acest element. </p>

Afisare
"Femeia1-i ochiul dracului."

1. Nu exista explicatie pentru acest element.


Poti sa te joci putin cu acest element, pe cat de util pe atat de rar folosit.
Pentru a scrie un indice vom folosii tagul <sub>, dupa cum urmeaza.

<p>Acesta este un <sub>indice!</sub></p>

Afisare
Acesta este un

indice!

Subscript - Aplicatii practice


Tagul subscript la fel ca si tagul superscript se poate folosii la redactarea expresiilor matematice. Cu toate acestea locul
unde il intalnim cel mai des sunt formulele chimici.

<p>H<sub>2</sub>0 - Apa
<p>O<sub>2</sub> - Oxigen

<p>CO<sub>2</sub> - Dioxid de carbon


<p>H<sub>2</sub>SO<sub>4</sub> - Acid sulfuric

Afisare
H20 - Apa
O2 - Oxigen
CO2 - Dioxid de carbon
H2SO4 - Acid sulfuric
Dupa cum se poate observa in exemplul anterior scrierea cu indice este foarte practica.

TABELE HTML
Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza organizarii marii majoritati
a paginilor web (inclusiv cea de fata).
Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza informatia care va fi
afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de celule. Daca dorim ca o
celula sa fie goala vom introduce un spatiu gol (space) sau codul echivalent &nbsp;.
Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>, pentru un rand <tr> si
</tr> iar pentru o celula <td> si </td>.
Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.
Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime 160px, fiecare
celula are o alta culoare de fond (bgcolor)
HTML
<table border="1"> <tr><td width="80" bgcolor="red">rosu</td><td width="160"
bgcolor="yellow">galben</td></tr> <tr><td bgcolor="white">alb</td><td
bgcolor="green">verde</td></tr> </table>

Afisare
rosu

galben

alb

verde

Atributele etichetei table sunt:


border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal
cellspacing = distanta intre celule
cellpaddind = distanta dintre marginea celului si continut
Atributele etichetei td sunt:
align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea
Exemplu: un tabel in care am folosit colspan pentru a uni celulele 1 si 2 din randul 2 si rowspan pentru a uni
celula 1 din randul 3 cu celula 1 din randul 4
HTML

Afisare

<table border="1"> <tr> <td bgcolor="white">R1 C1</td> <td bgcolor="yellow">R1


C2</td> <td bgcolor="white">R1 C3</td> <td bgcolor="yellow">R1 C4</td> </tr>
<tr> <td colspan="2" bgcolor="red">R2 C1+C2</td> <td bgcolor="yellow">R2 C3</td>
<td bgcolor="red">R2 C4</td> </tr> <tr> <td rowspan="2" bgcolor="white">R3 C1 +
R4 C1</td> <td bgcolor="yellow">R3 C2</td> <td bgcolor="white">R3 C3</td> <td
bgcolor="yellow">R3 C4</td> </tr> <tr> <td bgcolor="red">R4 C2</td> <td
bgcolor="yellow">R4 C3</td> <td bgcolor="red">R4 C4</td> </tr> </table>

R1 C1

R1
C2

R1
C3

R1
C4

R2
C3

R2
C4

R3
C2

R3
C3

R3
C4

R4
C2

R4
C3

R4
C4

R2 C1+C2
R3 C1
+ R4
C1

Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi perechea de etichete <th> si
</th> in locul etichetelor <td> si </td>. Astfel continutul celulei va fi afisat ingrosat si aliniat pe mijloc.
Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele <th> si </th>
HTML
<table border="1"> <tr> <th width="120">Titlul 1</th> <th width="120">Titlul
2lt;/th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td>
<td>4</td> </tr> </table>

Afisare
Titlul 1

Titlul 2

Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, deobicei folosita ca fiind un
titlu al tabelului. caption se plaseaza obligatoriu imediat dupa tag-ul table dar inainte de prima eticheta tr.
Exemplu: un tabel cu 4 randuri si 2 coloane folosind eticheta caption
HTML

Afisare

<table border="1"> <caption>Necesar alimente</caption> <tr> <th


width="120">Produse</th> <th width="120">Cantitatelt;/th> </tr> <tr>
<td>Fructe</td> <td>1 kg</td> </tr> <tr> <td>Legume</td> <td>5 kg</td>
</tr> <tr> <td>Carne</td> <td>1,5 kg</td> </tr> </table>

Necesar alimente
Produse
Fructe

Cantitate

S-ar putea să vă placă și