Turorial HTML

Turorial HTML
by Micul Programator
M-am gandit sa creez un tutorial pentru cei care sunt la

inceput de drum...
Cate ceva despre HTML: Limbajul de marcare Hypertexte

Markup Lamguage este un set de coduri care se insereaza
intr-un text pentru a a dauga informatii despre formatari si
legaturi.
Formatarea unui document de tip text este de fapt
organizarea respectivului fisier.
Formatarea se poate face pe 2 nivele:
1. Formatarea la nivel de document:

- formatul paginii (A4,A5,A3) ;
- marginile paginii ;
- asezarea in pagina (pe lungime sau latime) ;
2. Formatarea la nivel de paragraf:

- alinierea lunui paragraf ;
- sapatiul dintre 2 paragrafe ;
- spatiul dintre liniile unui paragraf ;
3. Formatarea la nivel de caracter:

- tipul caracterului ;
- dimensiunea caracterului ;
- spatiul dintre caractere ;
Pentru a putea realiza aceste formatari intr-o pagina web

trebuie introdus un cod specific fiecarea formatari dorite.
Orice documuent HTML incepe cu marcajul

<HTML>
si se termina cu marcajul </HTML>
Acest marcaj comunica interpretorului HTML (browser-ului)
ca documentul este deschis si formatat in limbajul HTML.
*Pentru a scrie si formata un document HTML se pot folosi

mai multe programe: CoffeCup,Dreamweaver,Frontpage,
Notepad.
Cele mai importante marcaje din cadrul unui document
HMTL sunt:
<HEAD> Titlul paginii </HEAD>
<BODY> ...... </BODY>
Poate fi folosit cu paramentrul:

< BODY BGCOLOR="BLUE"> -culoarea de fundal a paginii va fi
albastra
Culoarea poate fi data prin denumirea in limba engleza sau

printr-un cod.
Tabel culori HTML:
*Toate aceste culori trebuie precedate de semnul # .
Marcajul <BR> ajuta la trecerea pe urmatorul rand.
Marcajul <P> ... </P> este folosit pentru a alinia o anumita
bucata de text.
Se foloseste neaparat cu parametrul
<align="left/right/center"> care aliniaza textul la
stanga/dreapta/centru.
Formatarea la nivel de caracter se face utilizand marcajul

<FONT> ...</FONT>
Se poate utiliza impreuna cu parametrii:
<face="titlul fontului"> alege fontul cu care va fi scris textul
<color="blue"> alege culoarea textului
<size= "-1...7"> sau <size="+n"> unde n poate lua valori de la
1 la 7, <size="-1">
Tipuri de afisare:
<B> .... </B> -pentru scris aldin (ingrosat)
<I> .... </I> -pentru scris italic (inclinat)
<U> ....</U> -pentru scris subliniat
Nivele de titluri:
<Hn> Titlu </Hn>

n poate lua valori de la 1 pana la 6 (unde H1 este titlul cel mai
mare)
Linii de determinare:
Marcajul <HR>...</HR> are ca efect trasarea unei linii

orizontale (linie de delimitare). Numele sau vine de la
prescurtarea cuvintelor in engleza "Horizontal Ruller" .
Se foloseste impreuna cu marcajele:
<size="valoare"> marimea liniei in procente (%)
<width="valoare"> grosimea liniei
<color="blue"> culoarea liniei de delimitare
<align="left/right/center"> alinierea liniei la
stanga/dreapta/center
<noshade> scoate umbra liniei
Comentarii: Comentariile sunt texte incadrate in  si au rolul de a face un document HTML mai
usor de inteles prin plasarea unor explicatii. Comentariile
sunt asemanatoare cu cele din Pascal {...} .
Inserarea imaginilor:
Marcaj:
<img src="nume.jpg">
Se foloseste cu parametrii:
<hight="valoare"> inaltimea imaginii

<width="valoare"> latimea imaginii
<alt="text"> in caz ca imaginea nu poate fi afisata de browser
se va afisa textul din alt
<align="left/right/center"> aliniaza imaginea la
stanga/dreapta/centru
<hspace="valoare"> spatiu pe orizontala in jurul imaginii
<uspace="valoare"> spatiu pe verticala in jurul imaginii
<border="valoare"> chenar imagine
Liste in pagini web: Listele sunt o solutie foarte buna pentru
a organiza o pagina web.
Else pot fi de 4 tipuri:
1. Liste ordonate (numerotate)
2. Liste neordonate (nenumerotate)
3. Liste de definitii
4. Liste imbricate (interclasate)
1. Listle ordonate (numerotate)
Marcaj:
<OL>....</OL>
Pentru fiecare element al unei liste trebuie sa introducem
marcajul <LI>
Exemplu:
Code:
<OL>
<LI> Iarna
<LI> Primavara
<LI> Vara
<LI> Toamna
</OL>
Parametrii:
<type="a/A/i/I">
a -pentru ca lista sa fie numerotata cu literele mici ale
alfabetului
A -pentru ca lista sa fie numerotata cu literele mari ale
alfabetului
i -pentru ca lista sa fie numerotata cu cifre romane mici
I -pentru ca lista sa fie numerotata cu litere romane
Daca nu va fi introdu parametrul type lista va fi numerotata

automat cu cifre arabe, incepand cu cifra 1.
<start="nr pe care il dorim pentru a incepe lista ">
Exemplu:
Daca dorim ca lista sa inceapa cu 3 atunci vom avea: <OL
start="3">...</OL>
2. Liste neordonate:
Marcaj:
<UL>....</UL>
Numele marcajului vine de la Unorder List.
Parametrii:
<type="disc/circle/square">
disc=bulinuta
circle=cerculet
square=patratel (stiu, prea multe diminutive )
Exemplu:
Code:
<UL type="disc">
<LI> Pasul 1
<LI> Pasul 2
<LI> Pasul3
</UL>
<
Code:
UL type="circle">
<LI> Pasul 4
<LI> Pasul 5
<LI> Pasul 6
</UL>
Code:
<UL type="square">
<LI> Pasul 7
<LI> Pasul 8
<LI> Pasul 9
</UL>
3. Liste de definitii:
O lista de definitii consta in general intr-un termen de definit
si un enunt al definitiei.
Marcaj:
<DL>...</DL>
Numele marcajului vine de la Definision List.
<DT> se foloseste pentru a preciza termenul.
<DD> se foloseste pentru a defini termenul.
Exemplu:
Code:
<DD>
<DT> Bold
<DD> Scris ingrosat (aldin).
<DT> Italic
<DD> Scris inclinat.
<DT> Underline
<DD> Scris subliniat.
</DD>
4. Liste imbricate (interclasate) :

Listele imbricate sunt o combinatie de liste. Ele nu au un
marcaj specifica ca si celelalte tipuri de liste, ci se declara
precum in exemplul de mai jos:
Exemplu:
Code:
<OL>
<LI> Fructe:
<UL type="circle">
<LI> Cirese
<LI> Caise
<LI> Visine
</UL>
<LI> Legume:
<UL type="square">
<LI> Rosii
<LI> Castraveti
<LI> Morcovi
</UL>
</OL>
Inserarea unui sunet intr-o pagina web: Pentru a face o

pagina web cat mai atractiva, putem adauga o melodie pe
fundal-ul site-ului. HTML suporta melodii in format .wav ,
.midi , .au . Un program foarte bun pentru a converti fisiere
de tip .mp3 in .wav este Acoustica MP3 To Wav Convertor
PLUS .
Marcaj:
<EMBED src="nume.wav">...</EMBED>
Parametrii:
<autoplay=true> daca vrem ca sunetul sa porneasca automat

<hidden=true> daca vrem ca player-ul sa fie afisat in pagina
<loop=true> daca vrem ca sunetul sa se repete
<volume="valoare"> pentru a stabili volumul sunetului
<width="valoare">
<height="valoare">
Exemplu:
Code:
<EMBED autoplay=true hidden=false loop=false>
Acesta este codul pentru care dorim ca sunetul sa porneasca

automat, sa nu fie afisat player-ul in pagina si sunetul sa nu
se repete.
Tabele in pagini Web:
Tabelele pot fi foarte utile atunci cand vrem sa organizam o
pagina web.
Marcaje:
<TR>…</TR> pentru definirea unei linii a tabelului
<TH>…</TH> pentru definirea antetului tabelului
<TD>…<TD> pentru definirea unei cellule a tabelului
Exemplu:
<HTML>
<HEAD> Tabele </HEAD>
<BODY>
<TABLE>
<TR> <TH> Nume </TH>
<TH> Prenume </TH>
<TH> Media </TH>
<TR> <TD> Chimischez </TD>
<TD> Dan </TD>
<TD> 8.60 </TD>
</TABLE>
</BODY>
</HTML>
Se va afisa:
Nume Prenume Media

Chimischez Dan 8.60
Parametrii marcajului <TABLE>:

-BORDER=”valoare” : se foloseste pentru a denifini un contur
al tabelului
-BORDERCOLOR=”BLUE”: se foloseste pentru a colora
conturul tabelului
Exemplu:
<TABLE BORDER=”6” BORDERCOLOR=”RED”>
-CELLSPACING=”valoare” : de foloseste pentru a define spatiu
lasat intre cellule (n fiind un numar de pixeli)
-CELLPADDING=”valoare”: se foloseste pentru a define spatiu
lasta intre celula si chenarul celului
-WIDTH=”valoare/procent”: se foloseste pentru a stabili
latimea tabelului
-HEIGHT=”valoare/procent”: se foloseste pentru a seta
inaltimea tabelului
Parametrii marcajului <TD>:
-COLSPAN=”valoare”: se foloseste pentru a permite unei
celule sa se extinda pe mai multe coloane
-ROWSPAN=”valoare”: se foloseste pentru a permite unei
celule sa se extinda pe mai multe randuri
-BGCOLOR=”culoare”: se foloseste pentru a seta culoare de
fundal a unei celule din table
-ALIGN=”left/center/right”: se foloseste pentru a seta pozitia
scrisului intr-o celula
-BACKGROUND=”fisier_imagine”:se foloseste pentru a da
unei celule fundalul unei imagini
Observatie: Parametrii “COLSPAN” si “ROWSPAN” nu se pot
folosi in acelasi concomitant.
Legaturi in pagini Web:

Un link este o conexiune catre o alata resursa Web, resura
care poate fi accesata din fereastra browser-ului printr-un
simplu click.
Marcaj:
<A>…</A>
A vine de la anchor (ancora) si trebuie sa contina parametru
<HREF>.
Legaturile se pot crea catre:
-adrese URL (Uniform Resource Locator) prin protocolae
specific
-fisiere/resurse locale (adica care se afla pe acelasi calculator
cu pagina curenta, eventual in acelasi folder)
-o zona dintr-un document HTML (folosind parametrul
<NAME>
Parametrii:
<HREF=”www.link.ro”>: este indispensabil, fara el legatura nu
are nici o valoare.
<NAME=”nume”>: se foloseste pentru a crea o legatura catre
o zona a documentului
<METHODS>: se foloeste numai pentru interventii speciale
Exemplu:
<HTML>
<HEAD> Legatua </HEAD>
<BODY>
<A HREF=http://www.google.ro> Google IT </A>
</BODY>
</HTML>
Observatie: Pentru a define o adresa corecta, aceasta trebuie
sa fie complete, eventual sa contina “httl://” (Hypertext
Transfer Protocol Overview).
Sfat: Nu ezitati sa utilizati parametrii marcajului <BODY>:
-VLINK=”color”: se foloseste pentru a stabili o culoare pentru
link-urile vizualizate
-LINK=”color”: se folosete pentru a stabili o culoare pentru
link-uri
-ALINK=”color”: se foloseste pentru a stabili o culoare pentru
link-urile in curs de vizualizare
Exemplu:
<BODY ALINK=”WHITE” VLINK=”PURPLE” LINK=”GREEN”>
…</BODY>
Mici proiecte:
1. Construiti o pagina Web de prezentare a orasului in care
locuiti. Inserati in pagina imagini cu monumente
semnificative ale orasului. Structurat pagina utilizand un
table fara chenar. Folostiti pentru antentu tabelului o
culoare de fundal.
2. Construiti o pagina Web personala in care sa adaugati
poze, informatii, precum si lucrui care va plac/nu va
plac. Folositi ca fundal o imagine si introduceti datele
sub forma de tabel.
3. Creati o pagina cu 7 legaturi ale unor link-uri de
descarcare a browserelor cunoscute (Interenet Explorer,
Opera, Mozila Firefoz, Safari, Flock etc.) si 5 legaturi ale
unor motoare de cautare (Yahoo!, Google,
PaginiAurii,Okidoki etc. ).
4. Realizati un proiect despre un subiect care va
intereseaza, dand cat mai multe detalii si incercand sa
utilizati toate elementele invatate din tutorial.
Incheiere: Dupa cum ati vazut, aceasta este doar o mica

parte din marle limbaj de marcare HTML. Acest tutorial a fost
facut pentru a pune bazele programarii Web in mintea
cititorului. Poate ca voi concepe o variant mai detaliata, dar
pana atunci studies si eu…Spor la treaba!
Tutorial creat de miculprogramator

Turorial HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Turorial HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Turorial HTML

M-am gandit sa creez un tutorial pentru cei care sunt la

Cate ceva despre HTML: Limbajul de marcare Hypertexte

1. Formatarea la nivel de document:

2. Formatarea la nivel de paragraf:

3. Formatarea la nivel de caracter:

Pentru a putea realiza aceste formatari intr-o pagina web

Orice documuent HTML incepe cu marcajul

*Pentru a scrie si formata un document HTML se pot folosi

<HEAD> Titlul paginii </HEAD>

<BODY> ...... </BODY>

Poate fi folosit cu paramentrul:

Culoarea poate fi data prin denumirea in limba engleza sau

Formatarea la nivel de caracter se face utilizand marcajul

<Hn> Titlu </Hn>

Marcajul <HR>...</HR> are ca efect trasarea unei linii

<hight="valoare"> inaltimea imaginii

1. Listle ordonate (numerotate)

Daca nu va fi introdu parametrul type lista va fi numerotata

<start="nr pe care il dorim pentru a incepe lista ">

4. Liste imbricate (interclasate) :

Inserarea unui sunet intr-o pagina web: Pentru a face o

<autoplay=true> daca vrem ca sunetul sa porneasca automat

Acesta este codul pentru care dorim ca sunetul sa porneasca

Nume Prenume Media

Parametrii marcajului <TABLE>:

Legaturi in pagini Web:

Incheiere: Dupa cum ati vazut, aceasta este doar o mica

Tutorial creat de miculprogramator

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