HowTo HTML

Ultima actualizare: 2022-11-27

Orice document HTML are la baza:

<html>
 <head>
  <title>Pagina mea</title>
 </head>
 <body>
  <p>Pagina mea web.</p>
 </body>
</html>

Orice tag incepe cu < si se termina cu > si are o varianta de inchidere care incepe cu /. Exceptie fac doar anumite tag-uri care nu sunt "elemente block". Un tag poate avea unul sau mai multe argumente de forma <tag arg="var"></tag>

Elemente de antet/baza

Declararea unui document HTML (inceperea documentului). Acesta e obligatoriu.
<html></html>
Definirea parametrilor globali pentru document, ce se scrie aici nu se va afisa niciodata pe pagina. Aici de obicei de defineste titlul cum apare pe tab-ul browser-ului.
<head></head>
Titlul cum apare in browser-ul utilizatorului.
<title>Pagina mea</title>
Corpul documentului. Aici se afla tot ce ar trebui sa vada utilizatorul pe pagina.
Atribute: bgcolor (culoare de fundal)
<body></body>

Elemente de corp

Paragraf, compus din una sau mai multe propozitii.
Formatarea text-ului.
Atribute: face (font in sine ex. Calibri), color (culoare), size (marime)
Decoratii text.
Bold
Underline
Italic
Liste ordonate si elemente.
Atribute: start (numarul de la care se incepe numararea), type (tipul numerotatiei, a pentru a, b, c; i pentri I, II, III, etc).
1. <li>Element 1</li>
2. <li>Element 2</li>
3. <li>Element 3</li>
Liste neordonate si elemente.
Atribute: type (simbolul in dreptul fiecarui item, poate fi square, disc sau circle).
- <li>Element 1</li>
- <li>Element 2</li>
- <li>Element 3</li>
Break sau new line, echivalent apasand "enter" in MS Word. Acest tag nu are pereche.

Linia orizontala, folosita la separarea sectiunilor/capitolelor. Acest tag nu are pereche.
Atribute: size (grosime), color (culoare), width (latime, cat la% din pagina sa acopere).
<hr>
Tabelul, format din celule situate pe randuri si coloane.
Atribute: border (margine), width (latime), height (inaltime), bgcolor (culoare de fundal), cellspacing (spatiu in pixeli aplicat vertical si orizontal intre celule), cellpadding (spatiu in pixeli aplicat intre continutul celulei si bordura ei), align (alinierea intreg tabelului pe pagina)
<table></table>
O celula de tabel (table data).
Atribute: colspan (extinderea celulei pe X coloane), rowspan (extinderea celulei pe X randuri), align (aliniere pe orizontala), valign (aliniere pe verticala [top, middle, bottom])
<td>O celula de tabel.</td>
Rand tabelar (table row) poate fi combinat cu td pentru crearea unui tabel in doua dimensiuni.
Atribute: align (aliniere pe orizontala), valign (aliniere pe verticala [top, middle, bottom])
<tr></tr>
Antet tabelar (table header) scoate in evidenta textul si este de obicei folosit pentru primul rand ca un titlu. Acesta se foloseste intre tr
Atribute: colspan (extinderea celulei pe X coloane), rowspan (extinderea celulei pe X randuri)
<th></th>

Antet
Celula 1	Celula 2	Celula 3
Celula 4	Celula 5	Celula 6

Imagine
Atribute: src (sursa, poate fi un fisier local pe calculator sau pe un site la distanta), alt (text alternativ, afisat cand imaginea esueaza sa se incarce, folositor pentru accesibilitate, width (latime in pixeli), height (inaltime in pixeli), align (aliniere pe verticala), valign (aliniere pe orizontala)
<img src="imgtest.png" alt="O imagine de test cu niste forme geometrice pe un fundal negru.">

Link/legatura
Atribute: href (locatia unde duce, poate fi relativa (imagine.jpg) sau absoluta (http://example.com/), target="_blank" (deschide in tab nou de browser)
<a href="https://ro.wikipedia.org/">Link catre Wikipedia in limba romana</a>
Link catre Wikipedia in limba romana