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.

Tabele in pagini Web: Tabelele pot fi foarte utile atunci cand vrem sa organizam o pagina web. Marcaje: … pentru definirea unei linii a tabelului … pentru definirea antetului tabelului … pentru definirea unei cellule a tabelului Exemplu: Tabele

Nume	Prenume	Media
Chimischez	Dan	8.60

Se va afisa:

Nume

Prenume Media

Chimischez Dan

8.60

Parametrii marcajului : -BORDER=”valoare” : se foloseste pentru a denifini un contur al tabelului -BORDERCOLOR=”BLUE”: se foloseste pentru a colora conturul tabelului Exemplu: -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

: -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 vine de la anchor (ancora) si trebuie sa contina parametru . 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 Parametrii: : este indispensabil, fara el legatura nu are nici o valoare. : se foloseste pentru a crea o legatura catre o zona a documentului <METHODS>: se foloeste numai pentru interventii speciale Exemplu: Legatua Google IT 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 : -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: … 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 Related Documents Turorial Html December 2019 7 Turorial Html December 2019 16 Html November 2019 38 Html June 2020 22 Html December 2019 41 Html November 2019 39 Copyright © 2024 PDFCOKE.