Botirla Sorin – tutorial de html pentru atestat

INAINTE DE TOATE

Citeste doar daca ai

rabdare, timp si vrei
sa iei 10 la atestat
(sau macar o nota cat
sa iei diploma. Nu te
apuca de citit daca
nu. Bafta!
Botirla Sorin – tutorial de html pentru atestat

HTML
1 Ce este HTML-ul?
Html este un limbaj de formatare a textului pentru pagini web
(Hyper Text Markup Language).

Daca va intreba proful ce este HTML-ul ii puteti spune:

HTML-ul este un limbaj prin care aranjam niste elemente intr-o
pagina web.
Se pronunta in romana
"Hash Te Me Le" si in egleza: "Eigi Ti Mi EL" ( oricum nu e foarte
important asta )
(aveti grija sa nu ziceti Hash Telemea,
Botirla Sorin – tutorial de html pentru atestat

Hash Molotov,
Botirla Sorin – tutorial de html pentru atestat

Hash meleu,

Pateu

si alte minunatii c-apoi vedeti voi :p )

Botirla Sorin – tutorial de html pentru atestat

2 Cum functioneaza?
El este utilizat in paginile web si contine niste coduri cu proprietati
unice numiti TAG-uri. Tagurile se folosesc pentru a crea diferite
elemente ale paginii: tabele, liste, fonturi colorate, inserare
imagini etc. Fara acestea, o pagina web ar arata ca un text simplu
scris in notepad, fara stiluri de font, culori, imagini si orice altceva
decat text.

3 TAGURI – cum le recunosc?

Cand un browser deschide o pagina HTML el citeste un
document text si cauta coduri speciale inchise intre semnele < si
>.
Daca va intreaba proful ce sunt tagurile, ii puteti spune:
Tagurile sunt sunt niste coduri ce se scriu intre semnele < si >
("mai mic" si "mai mare"). Cu ele se pun in pagina tabele, liste,
paragrafe straturi etc.
Structura generala a unui tag este urmatoarea:
<nume_tag>text</nume_tag>
Observatie:
Browserul nu face diferenta intre majuscule si litere mici in taguri.
Daca nu am scris bine tagul (nu am respectat sintaxa), browserul
pur si simplu il ignora.
Botirla Sorin – tutorial de html pentru atestat

Concluzie:

 o pagina web html are nevoie de taguri pentru a functiona

 tagurile sunt niste coduri scrise intre semnele < si > care
adauga niste proprietati anumitor zone de text din pagina.
Botirla Sorin – tutorial de html pentru atestat

Intr-o pagina, tagurile arata de exemplu asa(sunt cele albastre

scrise intre < si >) :

Ce dracu e aia? Stai linistit, ti-am aratat doar cum arata codul
html. Cand vei fi terminat de citit tot ai sa ramai cu esentialul in
cap, imaginea asta e doar un exemplu ca sa vezi cum arata.
Botirla Sorin – tutorial de html pentru atestat

Tagurile pot fi:

 simple - care apar o singura data pentru un element in care

continutul este scris intr-un atribut al acestora (despre atribute
vorbim mai tarziu),
sau

 compuse dintr-o "deschidere" si o "inchidere" iar continutul

apare scris intre acestea.

<nume_tag> = deschidere sau inceput

este deschiderea tagului. Observ aici ca ea are doar 2 semne mai
mic si mai mare "<" ">" si numele tagului scris intre acestea.

</nume_tag> = inchidere sau sfarsit

este inchiderea tagului. Are un slash "/" scris dupa primul semn
"<" dinaintea numelui si un semn ">" scris dupa nume. Astfel
slashul "/" ne indica inchiderea tagurilor.
In concluzie in tag simplu are doar deschidere
<nume_tag>
iar un tag compus are
<nume_tag>text</nume_tag>
Exemple de taguri simple (fara inchidere):
Botirla Sorin – tutorial de html pentru atestat

 <br> - tag pentru a trece pe randul urmator

 <hr> - tag pentru inserarea unei linii orizontale

 <img src="[Link]"> - tag pt imagine. Chiar daca are un

atribut (in cazul de fata sursa imaginii) el reprezinta ca intreg
doar o deschidere, nu are nevoie nicaieri de vreo inchidere
gen </img> .
Exemplu de tag compus (cu deschidere si inchidere):

 <p>text</p> - tag pentru a crea paragrafe (zone de text usor

delimitate intre ele)

Concluzie

 Exista taguri simple (doar cu deschidere) si taguri compuse

(cu deschidere si inchidere)

 Tagul de deschidere se scrie <tag> si tagul de inchidere

</tag>
Botirla Sorin – tutorial de html pentru atestat

5 Cum incep sa scriu o

pagina html si ce contine ea
daca este gata facuta ;) ?
Botirla Sorin – tutorial de html pentru atestat

Ca sa creez o pagina, deschid notepad sau wordpad (nu

microsoft word din office!) sau orice alt editor de text si scriu ceva
de genul:
Exemplu:
COD HTML CE FACE
<html> deschide pagina html
<head> deschide zona head
<title>test</title> insereaza titlul paginii
</head> inchide head-ul.
<body> deschide corpul paginii (zona unde se afiseaza)

Salutare lume! continutul afisat

</body> inchide zona corpului
</html> sfarsitul paginii html

Observa ca textul "Salutare lume!" l-am pus in interiorul body-ului

(adica intre <body> si </body) pentru a fi afisat.
Botirla Sorin – tutorial de html pentru atestat

Apoi salvez nu cu extensia .txt ci cu extensia .html . Daca nu pot

sa salvez cu .html direct din save as, salvam normal ca .txt si
dupa ce salvam fisierul, redenumim extensia din .txt in .htm .

Ca sa vedem extensiile fisierelor, in windows mergem la Control

panel > Folder Options > tab-ul View > si debifam "Hide
extensions for known files" (Ascunde extensiile pentru fisierele
cunoscute) apoi dam apply (aplica).
Ca sa editam o pagina html o deschidem cu click dreapta pe ea si
open with notepad ori wordpad.
Ce-am scris mai sus?

<html> </html> - este tagul care indica unui browser ca se

deschide o pagina web
Observatie, uneori (ca in cazul atestatului, deasupra tagului html
intalnim sus de tot ceva de genul:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"[Link]

Daca proful va intreaba ce este aceasta, spuneti ca e o

specificatie tehnica si a fost inserata automat de catre programul
cu care "ati" creat paginile.
Botirla Sorin – tutorial de html pentru atestat

<head> </head> - tagul pentru head. Headul este zona unde se

afla informatii despre pagina si nu sunt afisate in fereastra ci doar
in tab-ul browserului.
<title> </title> - tagul pentru titlul paginii ( nu este titlul afisat pe
site, ci un titlu care va fi afisat in tab-ul browserului sau in bara de
titlu, in cazul de mai sus era banalul "test". Aceste titluri se scriu
intre inchiderea si deschiderea head-ului (adica intre <head> si
</head> ) si au rolul de a identifica unic un document si apar in
taburi sau bara de titlu ca in imaginea de alaturi

<body> <body> - tagul in care se afla continutul site-ului (tot ce

este afisat in fereastra) – in cazul de fata "continut bla bla" va
aparea pe ecran.

 Pfai de plm. Ce ma fac? 

 Te linistesti, si continui 
Botirla Sorin – tutorial de html pentru atestat

6 Lista cu tagurile html:

 LINKURI
<a> - tag pentru link
Poate avea atribute in interiorul tagului de deschidere si anume:

<a href="[Link] meu</a>

href este un atribut al tagului a (vorbim mai detaliat despre
atribute mai tarziu.) iar "Site-ul meu" este textul afisat pe pagina
care atunci cand dam click pe el va duce la adresa specificata.
(textul afisat se scrie intre > si </a>

in principiu
ca sa pui un link trebuie sa respecti schema:

<a href="adresa">un nume care apare in pagina</a>

Ex,
<a href=[Link] 1</a>
Sau
<a href="[Link]>despre</a>
daca pagina "[Link]" se afla pe harddisk in acelasi folder cu
pagina html pe care o editam.
Botirla Sorin – tutorial de html pentru atestat

 BOLD
<b> </b> - textul scris intre cele 2 va fi scris ingrosat
Ex. daca scriu in notepad

si dupa ce salvez redenumesc extensia fisierului [Link] in

[Link], cand il voi deschide in firefox va fi afisat asa

Va aparea: Vreau ca doar cuvantul asta sa apara ingrosat

Botirla Sorin – tutorial de html pentru atestat

Deci doar textul aflat in tagul <b> si </b> va fi ingrosat.

 DIVIZIUNI
<div> </div> - divurile sunt niste diviziuni, sau straturi ale
site-ului, imagineaza-ti-le ca pe niste chenare ce pot fi
suprapuse unele peste altele. Ex. <div> un text </div> va
pune "un text" intr-un chenar invizibil caruia ii putem ulterior
adauga bordura, culoare de fundal, etc folosind atribute. Voi
vorbi despre asta mai tarziu.

 FONTURI
<font> </font> - un tag care aplica niste caracteristici unui
text. De exemplu, poate seta culoarea, fontul si marimea
folosind atribute.

Tagul <font> poate seta culoarea, marimea si fontul textului

folosind urmatoarele atribute:

color="culoarea" Seteaza culoarea textului. Culoarea se scrie in

engleza: red, orange, yellow, green, blue,
white, black, grey, magneta etc sau folosind
coduri hexadecimale ale culorilor (ceea ce am
si folosit in atestate) si care permit alegerea
nuantelor.

Ex: color=" #ffffff" inseamna alb.

size="marimea in numar de pixeli" Seteaza marimea textului in numar de pixeli

Ex: size="4" pentru un text de marimea 4

face="fontul textului" Seteaza fontul textului

Ex: face="arial" pentru un text scris cu arial

Botirla Sorin – tutorial de html pentru atestat

Concluzie

 <font> poate seta culoarea, marimea si fontul textului prin

atributele color, size si font
astfel:

va fi afisat asa:
Botirla Sorin – tutorial de html pentru atestat

 TITLURI
<h1>titlu de capitol</h1>
<h2>titlu de capitol </h2>
<h3>titlu de capitol </h3>
<h4>titlu de capitol </h4>
<h5>titlu de capitol </h5>
<h6>titlu de capitol </h6>
va fi afisat asa

titlu de capitol
titlu de capitol
titlu de capitol
titlu de capitol
titlu de capitol

titlu de capitol

Marimile h-urilor sunt de la 1-6. Cea mai mare este marimea 1 si

cea mai mica este marimea 6.
Exemplu:
Botirla Sorin – tutorial de html pentru atestat

daca scriu

(am selectat titlurile ca sa se observe mai bine)

va fi afisat asa:

Concluzie

 Titlurile se pun cu tagul <h(numar)>titlu</h(numar)> unde

numar este nr marimii invers proportionale (1 e cea mai mare
de la 1 la 6)
Botirla Sorin – tutorial de html pentru atestat

 LINIE ORIZONTALA
<hr> - tag care nu are nevoie de inchidere (scri doar o data <hr> )
si care traseaza o linie orizontala despartind de exemplu un text
de cel dedesubt.

va fi afisat asa:
Botirla Sorin – tutorial de html pentru atestat

AI TRECUT DE MIJLOC!

LISTE
 ELEMENTE DIN LISTA
<li>element</li> - ca atare este un tag care contine un element al
unei liste dar vine intotdeauna in interiorul altui tag (unele taguri
care musai trebuie sa se afle in interiorul altora ca sa functioneze
– (ca si cand ar fi subtaguri sau subalterne) respectiv exista si
taguri care trebuie obligatoriu sa contina alte taguri in interiorul
lor. <li> </li> este un tip de tag subaltern al urmatoarelor 2 taguri:

 LISTE NEORDONATE
<ul> </ul> - tagul care marcheaza o lista neordonata (lista
care nu este numerotata, elementele ei fiind notate cu punctulete
sau liniute la capat)
Botirla Sorin – tutorial de html pentru atestat

Ex. de lista neordonata (<ul>) care contine in ea tagul <li> de mai

sus:

<ul> Deschiderea listei neordonate

<li>Salau</li> Element 1 : salau (nu rade : ) ) )
<li>Pateu</li> Element 2 : pateu
<li>lampa</li> Element 3 : lampa
<li>Serdean</li> Element 4 : Serdean
<li>Ciocolata</li> Element 5 : Ciocolata
</ul> Sfarsitul listei neordonate.
(astea mi-au venit in cap acum sincer :p )

Mai sus, am aratat structura listei neordonate, scriind elementele

listei <li>element</li> intre tagurile listei neordonate <ul> </ul>
Botirla Sorin – tutorial de html pentru atestat

In pagina html codul de mai sus:

Va fi afisat asa:
Botirla Sorin – tutorial de html pentru atestat

 LISTE ORDONATE
<ol></ol> - tagul pentru lista ordonata. El aplica niste numere in
fata elementelor listei Se foloseste la fel ca si tagul de lista
neordonata <ul>.
Exemplu de lista ordonata (numerotata):
<ol>
<li>familie</li>
<li>prieteni</li>
<li>Bani</li>
<li>Phoo Thai</li>
<li>veverite</li>
</ol>
va fi afisat asa:
1. familie
2. prieteni
3. Bani
4. Phoo Thai
5. Veverite
Botirla Sorin – tutorial de html pentru atestat

Concluzie

 Listele neordonate au tagul <ul> si </ul> (unordered list) si se

numesc asa pentru ca pun niste puncte in fata elementelor

 Listele ordonate au tagul <ol> si </ol> (ordered list) se

numesc asa pentru ca numeroteaza elementele.

 In interiorul lor se gasesc elemente de forma <li>element</li>

(Li = list element)

TABELE
<table></table> - tagul pentru tabele
El are urmatoarele tag-uri intre deschiderea <table> si inchiderea
</table> :

 ORDINEA INSERARII
<tr> </tr> - adauga un rand nou. Se scriu intre <table> si </table>.
Intre <tr> si </tr> adica in interiorul unui rand, adaugam celule
inserand tagul <td> si </td> de cate ori este nevoie pentru fiecare
celula iar intre acestea punem continutul celulei.
Botirla Sorin – tutorial de html pentru atestat

Daca nu ai inteles, uite aici un exemplu de tabel cu 3 randuri si 9

celule (cate 3 celule pe un rand):
COD HTML CE FACE
--------------------------------------------------------------------------------------
<table> | - deschide tabelul

<tr> | - deschide primul rand

<td>celula 1</td> | - deschide / inchide prima celula

<td>celula 2</td> | - deschide / inchide a doua celula

<td>celula 3</td> | - deschide / inchide a treia celula

</tr> | - inchide primul rand

<tr> | - deschide al doila rand

<td>celula 4</td> | - deschide / inchide a patra celula

<td>celula 5</td> | - deschide / inchide a cincea celula

<td>celula 6</td> | - deschide / inchide a sasea celula

</tr> | - inchide al doilea rand

<tr> | - deschide al treilea rand

<td>celula 7</td> | - deschide / inchide a saptea celula

<td>celula 8</td> | - deschide / inchide a opta celula

<td>celula 9</td> | - deschide / inchide a noua celula

</tr> | - inchide al treilea rand

</table> | - inchide tabelul

Botirla Sorin – tutorial de html pentru atestat

Va fi afisat asa:

celula 1 celula 2 celula 3

celula 4 celula 5 celula 6

celula 7 celula 8 celula 9

Am scris tagurile cu culori ca sa poti observa mai usor unde

incepe fiecare si unde se termina.

Astfel, observi ca intre <table> si </table> adica in interiorul

tabelului
se gasesc 3 anduri <tr> si </tr> iar in interiorul fiecaruia cate 3
celule cu tagurile <td> si </td> . in final, in interiorul fiecarei celule
se afla continutul acesteia.

Concluzie

 Tabelele(<table></table>) au in interior randuri <tr></tr>,

randurile au celule(<td></td>), iar in celule se afla continutul.
Botirla Sorin – tutorial de html pentru atestat

 ALTE TAGURI
<center> </center> - tot ce se afla intre acestea 2 este aliniat pe
mijlocul ferestrei.
<marqueee> text </marquee> - textul dintre acestea 2 este
deplasat pe orizontala ca textul din partea de jos al stirilor la tv.
<u>text</u> - subliniaza textul aflat intre aceste taguri.
<br> - pentru ca daca apasam enter si scriem pe randul urmator o
pagina web, browserul nu va tine cont de asta (mortii lui), e
nevoie sa scriem acest tag acolo unde dorim ca browserul sa
continue textul pe randul urmator.
Botirla Sorin – tutorial de html pentru atestat

De exemplu, daca scriu:

degeaba am scris in notepad pe randul urmator ca browserul va

afisa totul pe acelasi rand
Botirla Sorin – tutorial de html pentru atestat

Deci trebuie sa scriu <br> acolo unde vreau sa se treaca pe

randul urmator astfel:

Nu cred ca mai este nevoie de vizualizarea efectului dar fie:

Botirla Sorin – tutorial de html pentru atestat

4 ATRIBUTE
Tagurile pot avea proprietati sau atribute care se scriu in interiorul
deschiderii lor dupa aceasta structura:
<tag atribut="valoare">continut</tag>
Aici, de la <tag si pana la primul > este deschiderea tagului iar cel
scris cu verde este un atribut al tagului cu o valoare scrisa dupa
egal in ghilimele.
Observatie: un tag poate avea mai multe atribute
Ex:
<font face="arial" size="5" color="red">

text scris cu rosu, arial de marimea 5

</font>

Sau

<img src="imagini/decor/[Link]" width="300px" heigh="250px">

(doar ca exemplu. Mai jos este lista cu atribute)

Botirla Sorin – tutorial de html pentru atestat

 LISTA DE ATRIBUTE

alt= "text" un text de afisat in locul elementului daca el nu

este disponibil

class="clasa din care face parte" O clasa de elemente din care face parte un
tag. Clasa este apoi personalizata in css
despre care explic in tutorialul pentru css.

Cellspacing="nrpx" La tabele, distanta intre celule in numar de

pixeli. Ex: cellspacing="4px"

Cellpadding="nrpx" La tabele, distanta intre continutul celulelor si

marginile lor.

Color="culoare" La font, stabileste culoarea acestuia.

face="font" La font, stabileste fontul acestuia

Href="adresa" La linkuri ( <a href="adresa…">text de

afisat</a>, insereaza adresa unde sa ne duca
linkul cand apasam pe textul afisat.

Height="nrpx" La imagini, tabele, divuri, stabileste inaltimea in

numarul de pixeli

Ex. height="25px"

Src="adresa_obiectului/obiect" La imagini stabileste adresa imaginii inserate,

fie ca este de pe harddisk fie ca este online.

Ex. <img src="imagini/[Link]">

Style=" " Adauga stiluri avansate ale obiectului, se scrie

in limbajul css (vezi tutorialul css)

Width="nrpx" La imagini, tabele, divuri, stabileste latimea in

numarul de pixeli

Ex.

<img width="400px" src="imagini/[Link]">

Scrollamount="nr" La marqueee (derulare pe orizontala a textului

ca la stiri), stabileste viteza de derulare a
textului. Valabil doar in atestatul lui clenciu
Botirla Sorin – tutorial de html pentru atestat

Concluzie

 Atributele se scriu in interiorul tagului de deschidere si au

schema
<tag atribut="valoare">

Iti multumesc ca ai avut rabdare sa

derulezi pana aici :p
Botirla Sorin – tutorial de html pentru atestat

GATA.
VEZI TUTORIALUL
DE CSS.

Stai! fa o pauza inainte te rog eu