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 si se termina cu marcajul 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:

Titlul paginii

......

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
ajuta la trecerea pe urmatorul rand. Marcajul

...

este folosit pentru a alinia o anumita bucata de text. Se foloseste neaparat cu parametrul care aliniaza textul la stanga/dreapta/centru.

Formatarea la nivel de caracter se face utilizand marcajul ... Se poate utiliza impreuna cu parametrii: alege fontul cu care va fi scris textul alege culoarea textului <size= "-1...7"> sau <size="+n"> unde n poate lua valori de la 1 la 7, <size="-1">

Tipuri de afisare: .... -pentru scris aldin (ingrosat) .... -pentru scris italic (inclinat) .... -pentru scris subliniat

Nivele de titluri:

Titlu n poate lua valori de la 1 pana la 6 (unde H1 este titlul cel mai mare)

Linii de determinare:

Marcajul

---

... 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 culoarea liniei de delimitare 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:

Se foloseste cu parametrii:

inaltimea imaginii <width="valoare"> latimea imaginii in caz ca imaginea nu poate fi afisata de browser se va afisa textul din alt aliniaza imaginea la stanga/dreapta/centru spatiu pe orizontala in jurul imaginii <uspace="valoare"> spatiu pe verticala in jurul imaginii 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:

....

Pentru fiecare element al unei liste trebuie sa introducem marcajul

Exemplu: Code:

1. Iarna
2. Primavara
   
   
3. Vara
4. Toamna

Parametrii:

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:

...

2. Liste neordonate:

Marcaj:

....

Numele marcajului vine de la Unorder List.

Parametrii:



disc=bulinuta circle=cerculet square=patratel (stiu, prea multe diminutive )

Exemplu: Code:

• Pasul 1
• Pasul 2
• Pasul3

< Code: UL type="circle">

Pasul 4

Pasul 5

Pasul 6

Code:

• Pasul 7
• Pasul 8
  
  
• Pasul 9

3. Liste de definitii: O lista de definitii consta in general intr-un termen de definit si un enunt al definitiei.

Marcaj:

...

Numele marcajului vine de la Definision List.

se foloseste pentru a preciza termenul.

se foloseste pentru a defini termenul.

Exemplu:

Code:

Bold

Scris ingrosat (aldin).

Italic

Scris inclinat.

Underline

Scris subliniat.

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:

1. Fructe:
   
   
   
   • Cirese
   • Caise
   • Visine
2. Legume:
   • Rosii
   • Castraveti
   • Morcovi

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">...

Parametrii:

daca vrem ca sunetul sa porneasca automat daca vrem ca player-ul sa fie afisat in pagina daca vrem ca sunetul sa se repete pentru a stabili volumul sunetului <width="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.