Pagina de start a forumului Best-Tutoriale Pentru VOI ! Best-Tutoriale Pentru VOI !
Tutoriale de orice fel !
 
 FAQFAQ   CautareCautare   MembriMembri   GrupuriGrupuri   InregistrareInregistrare 
 ProfilProfil   Mesaje privateMesaje private   AutentificareAutentificare 

Tutorial html

 
Creaza un subiect nou   Raspunde la subiect    Pagina de start a forumului Best-Tutoriale Pentru VOI ! -> Php & Html
Subiectul anterior :: Subiectul urmator  
Autor Mesaj
woken
Administrator
Administrator
woken

Data inscrierii: 01/Iun/2012
Mesaje: 65
MesajTrimis: 03/06/2012 07:55    Titlul subiectului: Tutorial html Raspunde cu citat (quote)
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 indice de paragraf:
- alinierea unui paragraf;
- spaţiul dintre 2 paragrafe;
- spaţiul dintre liniile unui paragraf;

c) Formatarea la nivel de caracter:
- tipul caracterului;
- mărimea 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 întrebuințat 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 grad 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 colorații 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 urmare 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"> colorit 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 <!-- Comentariu --> ş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 numeroase 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 soiuri de liste, ci se declară ca de exemplu î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 compus .wav , .midi , .au . Se pot introduce şi alte formate (cum ar fi mp3), dar astea 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 extrem 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 îngăduie unei celule să se extindă pe mai multe rânduri
-BGCOLOR=”culoare”: se foloseÅŸte pentru a seta colorație 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 nuanță pentru link-uri
-ALINK=”color”: se foloseÅŸte pentru a stabili o tentă 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 alură 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 poză ÅŸ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ă!
Sus
Vezi profilul utilizatorului Trimite mesaj privat
Afiseaza mesajele pentru a le previzualiza:   
Creaza un subiect nou   Raspunde la subiect    Pagina de start a forumului Best-Tutoriale Pentru VOI ! -> Php & Html Ora este GMT + 2 ore
Pagina 1 din 1

 
Mergi direct la:  
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum


Powered by phpBB © 2001, 2005 phpBB Group
Fa-ti si tu propriul forum GRATUIT, pe www.myforum.ro