Tutorial html

1. Introducere - Câte ceva despre HTML

Hypertext Markup Lamguage este un limbaj de marcare. Fiind un limbaj de marcare, HTML nu utilizează instrucţiuni sau comenzi, ci etichete, acestea fiind numite şi balize, elemente sau tag-uri.

2. Despre formatarea paginii

Formatarea unui document de tip text este de fapt organizarea respectivului fişier.
Formatarea se poate face pe 2 nivele:

a) Formatarea la nivel de document:
- formatul paginii (A4,A5,A3);
- marginile paginii;
- aşezarea în pagină (pe lungime sau lăţime);

b) Formatarea la nivel de paragraf:
- alinierea unui paragraf;
- spaţiul dintre 2 paragrafe;
- spaţiul dintre liniile unui paragraf;

c) Formatarea la nivel de caracter:
- tipul caracterului;
- dimensiunea caracterului;
- spaţiul dintre caractere;

Pentru a putea realiza aceste formatări într-o pagină web trebuie introdus un tag specific fiecărei formatări dorite.
Orice document HTML începe cu marcajul

<HTML> şi se termină cu marcajul </HTML>

Acest marcaj comunică interpretorului HTML (browser-ului) că documentul este deschis şi formatat în limbajul HTML.

* Pentru a scrie şi formata un document HTML se pot folosi mai multe editoare cum ar fi: 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 albastră

Marcajul <BR> (break row) ajută la trecerea pe următorul rând.
Marcajul <P> ... </P> (paragraf) este folosit pentru a alinia o anumită bucată de text.
Se foloseşte neapărat cu parametrul <align="left/right/center/justify"> care aliniază textul la stânga/dreapta/centru/justificat.

Formatarea la nivel de caracter se face utilizâd marcajul <FONT> ...</FONT>
Se poate utiliza împreună cu parametrii:
<font="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">

3. Culorile în html

Culoarea poate fi dată prin denumirea în limba engleză sau printr-un cod.

Tabel culori HTML:

Codul culorilor html

* Toate aceste culori trebuie precedate de semnul # .

4. Tipuri de afişare

<B> .... </B> (bold) - pentru scris aldin (îngroşat)
<I> .... </I> (italic) - pentru scris italic (înclinat)
<U> ....</U> (underline) - pentru scris subliniat

5. Nivele de titluri:

<Hn> Titlu </Hn>
n poate lua valori de la 1 până la 6 (unde H1 este titlul cel mai mare)

6. Linii de determinare:

Marcajul <HR>...</HR> (horizontal ruller) are ca efect trasarea unei linii orizontale (linie de delimitare).
Se foloseşte împreună cu marcajele:
<size="valoare"> mărimea liniei în procente (%)
<width="valoare"> grosimea liniei
<color="blue"> culoarea liniei de delimitare
<align="left/right/center"> alinierea liniei la stânga/dreapta/center
<noshade> scoate umbra liniei

7. Comentarii:

Comentariile sunt texte încadrate în  şi au rolul de a face un document HTML mai uşor de înţeles prin plasarea unor explicaţii. Comentariile sunt asemănătoare cu cele din Pascal.

8. Inserarea imaginilor:

Marcaj:
<img src="nume.jpg">

Se foloseşte cu parametrii:

<hight="valoare"> - înălţimea imaginii
<width="valoare"> - lăţimea imaginii
<alt="text"> - în caz că imaginea nu poate fi afişată de browser se va afişa textul din alt (alternate text)
<align="left/right/center"> - aliniaza imaginea la stanga/dreapta/centru
<hspace="valoare"> - spaţiu pe orizontală în jurul imaginii
<uspace="valoare"> - spaţiu pe verticală în jurul imaginii
<border="valoare"> - chenar imagine

9. Liste în pagini web:

Listele sunt o soluţie foarte bună pentru a organiza o pagină web.
Ele pot fi de 4 tipuri:
a. Liste ordonate (numerotate)
b. Liste neordonate (nenumerotate)
c. Liste de definiţii
d. Liste îmbricate (interclasate)

a. Listele ordonate (numerotate)

Marcaj:

<OL>....</OL>

Pentru fiecare element al unei liste trebuie să introducem marcajul <LI>...</LI>

Exemplu:

<OL>
<LI> Iarna </LI>
<LI> Primavara</LI>
<LI> Vara</LI>
<LI> Toamna</LI>
</OL>

Parametrii:

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

a - pentru ca lista să fie numerotată cu literele mici ale alfabetului
A - pentru ca lista să fie numerotată cu literele mari ale alfabetului
i - pentru ca lista să fie numerotată cu cifre romane mici
I - pentru ca lista să fie numerotată cu litere romane mari

Dacă nu va fi introdus parametrul type lista va fi numerotată automat cu cifre arabe, începând cu cifra 1.

<start="nr pe care îl dorim pentru a începe lista ">

Exemplu:
Dacă dorim ca lista să îinceapă cu 3 atunci vom avea: <OL start="3">...</OL>

b. Liste neordonate:

Marcaj:

<UL>....</UL>

Numele marcajului vine de la Unorder List.

Parametrii:

<type="disc/circle/square">

disc = bulinuţa
circle = cerculeţ
square = pătrăţel (ştiu, prea multe diminutive )

Exemplu:

<UL type="disc">
<LI> Pasul 1</LI>
<LI> Pasul 2</LI>
<LI> Pasul3</LI>
</UL>

<UL type="circle">
<LI> Pasul 4</LI>
<LI> Pasul 5</LI>
<LI> Pasul 6</LI>
</UL>

<UL type="square">
<LI> Pasul 7</LI>
<LI> Pasul 8</LI>
<LI> Pasul 9</LI>
</UL>

c. Liste de definiţii:

O listă de definiţii constă în general într-un termen de definit şi un enunţ al definiţiei.

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:

<DD>
<DT> Bold</DT>
<DD> Scris ingrosat (aldin).</DD>
<DT> Italic</DT>
<DD> Scris inclinat.</DD>
<DT> Underline</DT>
<DD> Scris subliniat.</DD>
</DD>

d. Liste îmbricate (interclasate)

Listele îmbricate sunt o combinaţie de liste. Ele nu au un marcaj specific ca şi celelalte tipuri de liste, ci se declară precum în exemplul de mai jos:

Exemplu:

<OL>
<LI> Fructe:
<UL type="circle">
<LI> Cirese</LI>
<LI> Caise</LI>
<LI> Visine</LI>
</UL></LI>
<LI> Legume:
<UL type="square">
<LI> Rosii</LI>
<LI> Castraveti</LI>
<LI> Morcovi<LI>
</UL></LI>
</OL>

10. Inserarea unui sunet într-o pagina web

Pentru a face o pagină web cât mai atractivă, putem adăuga o melodie pe fundal-ul paginii. HTML suportă melodii în format .wav , .midi , .au . Se pot introduce şi alte formate (cum ar fi mp3), dar acestea nu vor fi recunoscute de browser dacă nu există plugin-ul instalat pentru acel format.

Marcaj:

<EMBED src="nume.wav">...</EMBED>

Parametrii:

<autoplay=true> - dacă vrem ca sunetul să pornească automat
<hidden=true> - dacă vrem ca player-ul să nu fie afişat în pagină
<loop=true> - dacă vrem ca sunetul să se repete
<volume="valoare"> - pentru a stabili volumul sunetului
<width="valoare">
<height="valoare">

Exemplu:

<EMBED autoplay="true" hidden="false" loop="false" src="nume.wav">

Acesta este codul pentru care dorim ca sunetul să pornească automat, să fie afişat player-ul în pagină şi sunetul să nu se repete.

11. Tabele în pagini Web:

Tabelele pot fi foarte utile atunci când vrem să organizăm o pagină web.

Marcaje:

<TR>…</TR> (table row) pentru definirea unei linii a tabelului
<TH>…</TH> (table head) pentru definirea antetului tabelului
<TD>…<TD> (table data cell) pentru definirea unei cellule a tabelului

Exemplu:

<HTML>
<HEAD> Tabele </HEAD>
<BODY>
<TABLE>
<TR>
<TH> Nume </TH>
<TH> Prenume </TH>
<TH> Media </TH>
</TR>
<TR>
<TD> Chimischez </TD>
<TD> Dan </TD>
<TD> 8.60 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Se va afişa:
Nume Prenume Media
Chimischez Dan 8.60

Parametrii marcajului <TABLE>:

-BORDER=”valoare” : se foloseşte pentru a denifini un contur al tabelului
-BORDERCOLOR=”BLUE”: se foloseşte pentru a colora conturul tabelului

Exemplu:

<TABLE BORDER=”6” BORDERCOLOR=”RED”>

-CELLSPACING=”valoare” : de foloseşte pentru a defini spatiul lăsat între celule (n fiind un număr de pixeli)
-CELLPADDING=”valoare”: se foloseşte pentru a defini spatiul lăsat între celulă şi chenarul celulei
-WIDTH=”valoare/procent”: se foloseşte pentru a stabili lăţimea tabelului
-HEIGHT=”valoare/procent”: se foloseşte pentru a seta înălţimea tabelului

Parametrii marcajului <TD>:

-COLSPAN=”valoare”: se foloseşte pentru a permite unei celule să se extindă pe mai multe coloane
-ROWSPAN=”valoare”: se foloseşte pentru a permite unei celule să se extindă pe mai multe rânduri
-BGCOLOR=”culoare”: se foloseşte pentru a seta culoarea de fundal a unei celule din tabel
-ALIGN=”left/center/right”: se foloseşte pentru a seta poziţia scrisului într-o celulă
-BACKGROUND=”fisier_imagine”: se foloseşte pentru a da unei celule fundalul unei imagini

Observaţie: Parametrii “COLSPAN”şi “ROWSPAN” nu se pot folosi în aceeaşi celulă.

12. Legături în pagini Web:

Un link este o conexiune către o altă resursă Web, resursă care poate fi accesată din fereastra browser-ului printr-un simplu click.

Marcaj:

<A>…</A>

A vine de la anchor (ancoră) şi trebuie să conţină parametru <HREF>.
Legaturile se pot crea către:
-adrese URL (Uniform Resource Locator) prin protocoale specifice
-fişiere/resurse locale (adică care se află pe acelaşi calculator cu pagina curentă, eventual în acelaşi folder)
-o zonă dintr-un document HTML (folosind parametrul <NAME>

Parametrii:

<HREF=”www.link.ro”>: este indispensabil, fără el legatura nu are nici o valoare.
<NAME=”nume”>: se foloseşte pentru a crea o legatură către o zonă a documentului
<METHODS>: se foloseşte numai pentru intervenţii speciale

Exemplu:

<HTML>
<HEAD> Legatura </HEAD>
<BODY>
<A HREF=http://www.google.ro> Google RO </A>
</BODY>
</HTML>

Observaţie: Pentru a defini o adresă corectă, aceasta trebuie să fie completă, eventual să conţină “http://” (Hypertext Transfer Protocol Overview).
Sfat: Nu ezitaţi să utilizaţi parametrii marcajului <BODY>:

-VLINK=”color”: se foloseşte pentru a stabili o culoare pentru link-urile vizualizate
-LINK=”color”: se foloseşte pentru a stabili o culoare pentru link-uri
-ALINK=”color”: se foloseşte pentru a stabili o culoare pentru link-urile în curs de vizualizare

Exemplu:

<BODY ALINK=”WHITE” VLINK=”PURPLE” LINK=”GREEN”> …</BODY>

13. Mici proiecte:

1. Construiţi o pagină Web de prezentare a oraşului în care locuiţi. Inseraţi în pagină imagini cu monumente semnificative ale oraşului. Structuraţi pagina utilizând un tabel fără chenar. Folosiţi pentru antentul tabelului o culoare de fundal.
2. Construiţi o pagină Web personală în care să adăugaţi poze, informaţii, precum şi lucruri care vă plac/nu vă plac. Folosiţi ca fundal o imagine şi introduceţi datele sub formă de tabel.
3. Creaţi o pagină cu 7 legături ale unor link-uri de descărcare a browserelor cunoscute (Interenet Explorer, Opera, Mozila Firefox, Safari, Flock etc.) şi 5 legături ale unor motoare de căutare (Yahoo!, Google, PaginiAurii,Okidoki etc. ).
4. Realizaţi un proiect despre un subiect care vă interesează, dând căt mai multe detalii şi încercând să utilizaţi toate elementele învăţate din tutorial.

14. Încheiere:

După cum aţi văzut, aceasta este doar o mică parte din marele limbaj de marcare HTML. Acest tutorial a fost făcut pentru a pune bazele programării Web în mintea cititorului. Poate că voi concepe o variantă mai detaliată, dar până atunci studiez şi eu…
Spor la treabă!