HTML

sindrom · Data inscrierii: 10/Iul/2008 Mesaje: 23

Tutorial HTML !!!

1) Structura unui document HTML

Pentru redactarea unui document HTML poate fi folosit orice editor de texte, totusi se recomanda utilizarea editoarelor care nu au un format caracteristic. Documentele vor fi salvate cu extensia HTML.
Instructiunile HTML se pun intre <si> . Absolut orice instructiune dureaza pana la terminarea acesteia. De regula sfarsitul instructiunii coincide cu inceputul doar ca apare semnul / inaintea instructiunii de sfarsit.
Orice document HTML incepe cu instructiunea <HTML> si se termina cu instructiunea </HTML>. Un document are 2 parti : antetul si corpul (poate exista si o a 3-a parte definirea frame-urilor ).
Un document incepe cu antetul a carui inceput e marcat de instructiunea <HEAD> si se termina cu </HEAD>. In antet precizam titlul documentului. Titlul este incadrat de instructiunile <TITLE> si </TITLE>.
Corpul, care este de fapt componentă pe care browserul o va prezenta pe ecran, incepe cu instructiunea <BODY> si se termina cu instructiunea </BODY>. Intre aceste instructiuni punem toate elementele si instructiunile, mai putin frame-urile si scripturile JavaScript.

2.Formatarea caracterelor
2.1 Alegerea marimii caracterelor

Se face cu instructiunea . Marimea caracterelor poate fi precizata in mod relativ sau absolut. In mod perfect se face precizand marimea caracterelor (intre 1 si 7) dupa semnul =. De exemplu daca dorim sa afisam textul LaLeagane cu marimea 7 vom scrie in corpul documentului urmatoarea instructiune:
LaLeagane.
In mod relativ se precizeaza cu cat sunt mai mari sau mai mici caracterele decat o marime implicita. De exemplu inseamna ca vom scrie cu caractere care au marimea cu 2 mai mare decat marimea implicita. Marimea imiplicita poate fi precizata cu instructiunea: <basefont>

2.2 Rand nou se face cu instructiunea .

2.3Alegerea tipului caracterelor

Se face cu instructiunea .
De exemplu: Tipul Arial sau Tipul Verdana

2.4 Alegerea culorii caracterelor

Se face cu instructiunea . Nuanță poate fi precizata in mai numeroase moduri. In întâiul caz prin precizarea numelui englez al culorii.
Ex: Culoare rosie.
Al Doilea mod se realizeaza prin precizarea unui cod numeric de 6 caractere in baza 16 precedat de caracterul #.Culoare cu cod.

2.5 Alegerea stilului caracterelor

Caractere ingrosate(bold)
Caractere inclindate(italic)
Caractere subliniate(underlined)

2.6 Combinarea formatarii caracterelor

Cele precizate mai sus pot fi combinate intr-o singura instructiune. Verificare combinare formatare 

3. Formatarea paragrafelor

Cu ajutorul elementelor si un document poate fi impartit in paragrafe. Paragraful poate fi aliniat la stanga, la dreapta, in centrul sau stanga-dreapta.

 Paragraf aliniat la stanga 
 Paragraf aliniat la dreapta 
 Paragraf aliniat in centru 
 Paragraf aliniat stanga-dreapta 

4.Stabilirea culorii fundalului

<body>...</body>

5.Realizarea link-urilor (hyperlegaturilor)

<a href="adresa">text</a>

Daca dorim sa realizam un link catre un document propriu vom preciza calea unde se gaseste acest document cu ajutorul //. De exemplu //d:|traffik|laleagane.html. Dar ATENTIE!!! daca vom preciza in acest mod un alt calculator va cauta pe propriul drive D, unde nu se afla documentul respectiv, deci nu se va afisa nimic. De aceea e recomandat ca documentele sa fie in acelasi folder iar atunci e suficient sa precizam doar laleagane.html. Daca dorim o legatura catre o alta adresa vom preciza adresa respectiva precedata de http://. De exemplu:
<a href="laleagane.html">Alinierea paragrafelor</a> 
<a href="http://www.google.com">Motor de cautare </a>

6. Tabele

Tabelele joaca un rol f important in documentele HTML. Ele se folosesc nu numai pentru reprezentarea datelor, ci sunt si elemente de design.
Crearea tabelelor se face cu instructiunile <table> si </table>. Intre acestea cu susținerea instructiunilor <tr> si </tr> precizam liniile tabelului. Instructiunea <td> e folosita pentru a crea celule in cadrul unui rand si se inchide cu </td>.

Parametrii instructiunii <table> pot fi urmatorii:

width: precizarea latimii in pixeli sau in procente

align: alinierea tabelului (left-la stanga, right=la dreapta, center-incentru)

border: grosimea bordurii in pixeli

cellspacing: distanta intre celule si pixeli

cellpadding: distanta dintre marginea celulei si continutul celulei

Parametrii <tr> pot fi:

align: - modul de aliniere al celulelor dintr-un rand (stanga - left, centru - center, dreapta - right)

valign: - modul de aliniere vertical al celulelor dintr-un rand (sus - top, centru - middle, jos - bottom)

Parametrii <td> pot fi:

align: - alinierea orizontala a celulei (stanga - left, centru-center, dreapta-right), implicit alinierea la stanga

valign: - alinierea verticala a celulei (sus-top, centru-middle, jos-bottom), modifica parametrii <tr>

width: - latimea celulei in pixeli (nu va recomand in procente)

height: - inaltimea celulei in pixelo (nu va recomand nici aici in procente)

rowspan: reuniunea verticala a celulelor

colspan : reuniunea orizontala a celulelor

<table>

<tr>

<td>1. rand1. elem</td>
<td>1. rand2. elem</td>
<td>1. rand3. elem</td>

</tr>

<tr>

<td>2. rand1. elem</td>
<td>2. rand2. elem</td>
<td>2. rand3. elem</td>

</tr>

</table>

7.Imagini in HTML

Formatele acceptate de browsere pentru fiserele fotografie sunt:

- GIF cu extensia .gif
- JPEG cu extensia .jpeg sau .jpg
- XPM cu extensia .xmp
- XBM cu extensia .xbm
- BMP cu extensia .bmp ( doar cu IE )
- TIFF cu extensia .tif sau .tiff

Modul de inserare a unei imagini: instructiunea
<img src="locatie">

ATENTIE!!! Daca imaginea se afla in aceeasi locatie cu documentul html se precizeaza doar numele imaginii. Spre exemplu: <img src="laleagane.jpg">
Daca Imaginea se afla in alt director sau subdirector trebuia precizata toata calea. Spre exemplu daca imaginea e in directorul imagini:
<img src="imagini/laleagane.jpg">
ATENTIE!!! Tagul pentru adaugare poză NU ARE si un tag de inchidere!

Este recomandat adaugarea atributelor height si width, astea permitand imaginii sa aiba deosebite dimensiuni.
Atributele consimt setarea in pixeli a inaltimii si latimii. Spre exemplu daca dorim sa introducem o imaginea cu inaltimea de 150 px si latimea de 200 px procedam astfel:
<img src="laleagane.jpeg" alt="imagini laleagane">
Daca doriti sa adaugat un chenar in jurul imaginii, folositi atributulBORDER al etichetei <img>.
Valorile acestor semnale sunt numere intregi pozitive. <img src="laleagane.jpeg" alt="imagini laleagane" border="2">
Alinierea unor imagini se poate face prin intermediul atributului ALIGN care poate lua urmatoarele valori:

- " left " - aliniere la stanga; celelalte componente sunt dispuse pe partea dreapta

- " right " - aliniere la dreapta; celelalte componente sunt dispus pe fracțiune stanga

- " top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea

- " middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea

- " bottom " - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.

O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop foloseste atributul background al etichetei <body>, avand ca valoare adresa URL a imaginii. Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.

Printul · Administrator Data inscrierii: 01/Iul/2008 Mesaje: 121

ms frate aveam nevoie Smile