Cele mai importante 10 tag-uri HTML

postat acum 4 ani de Stefanescu Mihai in categorie iNoob

10 Elemente HTML pe care trebuie sa le cunosti pentru a pasi cu dreptul in lumea programarii web. In acest mic tutorial mi-am propus sa va arat 10 tag-uri de baza ale limbajului HTML pentru a va face o mica introducere in lumea programarii web.

Esti incepator in HTML? In acest articol am sa-ti explic 10 tag-uri esentiale in HTML pe care trebuie sa le stii pentru a-ti construi pagina web.

Taguri si Elemente

Un tag HTML este un cuvant sau o litera inconjurata de semnele mai mare si mai mic (< si >).Aceste tag-uri sunt folosite la creearea de elemente HTML precum paragrafe sau link-uri.
Multe elemente au un tag de deschidere si unul de inchidere — de exemplu un paragraf are urmatoarea structura: un tag <p> ce il deschide, textul paragrafului si tag-ul </p> pentru a-l inchide.
Alte elemente nu au tag de inchidere, acestea fiind numite elemente goale. De exemplu elementul br ce lasa un rand liber, acesta se scrie pur si simplu <br> unde vrei sa lasi un rand liber.

Conform standardelor XHTML elementele goale au nevoie de un semn ce arata ca acesta se inchide singur, deci conform acestor standarde elementul br se va scrie <br/>

Acum sa revin la cele 10 tag-uri importante…

1.<html> …</html> – elementul principal

Toate paginile web incep cu acest element.

Elementul html sta la baza unei pagini web.
Acest tag <html> se deschide la indeputul documentului html si se inchide la sfarsit cu tag-ul </html>. Tot continutul paginii tale intra intre aceste 2 tag-uri.

[cc name=”htmltag”]

2.<head>…</head> Sectiunea head a siteului tau
Sectiunea head contine informatii despre website, spre deosebire de continutul paginilor  web. In aceasta zona puteti pune o multime de elemente, precum:

title – titlul paginii
link – folosit la adaugarea fisierelor .css si a favicon-ului
meta – folosit la specificarea lucrurilor precum set de caractere, descrierea paginii, cuvinte cheie, etc
script – folosit la adaugarea de cod JavaScript

3<title>…</title> – Titlul Paginii

Acest element contine titlul paginii, acesta fiind afisat in bara de titlu a browserului, precum sin bookmarks, rezultatele cautarilor pe motoare de cautare si multe alte locuri.
Titlul trebuie sa descrie continutul paginii succint si precis. Incearca sa dai fiecarei pagini un titlu unic.

4.<body>…</body> – Continutul Paginii

Acest element, body, apare imediat dupa elementul head (la inchiderea acestuita, deci dupa </head>). In interiorul acestui tag se pune tot continutul website-ului (imagini, text, video, etc).

5.<h1>…</h1> – Titlurile

Aceste tag-uri iti transforma site-ul in ceva ce arata bine si poate fi citit. Ele sunt asemanatoare cu Titlurile si Subtitlurile dintr-o carte.
HTML este capabil de 6 astfel de elemente:h1, h2, h3, h4, h5 si h6 importanta fiind data de h1 ca fiind cel mai important si h6 cel mai putin important. In mod normal nu ai nevoie decat de h1, h2 si h3, dar poate ai o pagina extrem de mare si complexa.
6.<p>…</p> – Paragraful

Acest element iti da posibilitatea de a creea paragrafe de text, acestea fiind afisate cu un aliniat si un mic spatiu intre celelalte paragrafe.
Decat sa scrii un text si dupa fiecare idee sa lasi un rand liber (cu tag-ul br) mai bine folosesti un element p.
Nu doar ca arata mai bine, dar browserul si motoarele de cautare inteleg mai bine website-ul tau.

7.<a> … </a> – Un link

Unul dintre cele mai importante elemente dintr-o pagina web este a, acesta permitandu-ti sa creezi link-uri catre alte pagini (acestea pot fi interne sau externe).
Textul care sa fie transformat in link va fi pus intre <a> si </a>, iar adresa unde vrei sa te trimita in atributul href ala cestuia.
8.<img> – O Imagine

Tag-ul img iti permite adaugarea de imagini in pagina ta web. Pentru a afisa o imagine trebuie sa o uploadezi undeva (host de imagini, server, etc apoi sa folosesti tah-ul img si referinta la adresa imaginii.

9.<div>…</div> – Un element de tip block

Elementul div este un container generic ce poate fi folosit petntru a structura o pagina mai bine. De exemplu, poti grupa mai multe paragrafe sau titluri ce sunt din aceasi categori. Aceste elemente div sunt folosite pentru:
-partea de sus/jos a website-ului
-coloane de continut si meniuri laterale
-casuta de text
-zone din design ce serversc un anumit scop
-galerii
Cu ajutorul claselor si id-urilor puteti adauga stiluri CSS pentru a le pozitiona, schimba culoarea, borderul, etc.

10.<span>…</span> – Un container inline

Acest elemente este similar cu elementul div, ambele fiind folosite pentru a structura continutul. Diferenta este ca div-ul este un element de tip block, in timp ce span este un element inline:

-Elementele de tip block, precum div, h1 si p sunt elemente creeate pentru a tine un continut relativ mare precum un paragraf sau un text complet. Un element de tipul block este intotdeauna deschis pe o linie noua.

-Elementele inline, precum span, a, img, etc sunt creeate pentru a tine un continut mic, precum un cuvant sau o propozitie. Un element inline nu trebuie adaugat pe noua linie.Elementele de tip block pot contine elemente inline, dar nu se poate invers.

Precum in cazul div-urilor si la span poti adauga o clasa pentru a modifica designul din CSS
 

Hai sa le punem cap la cap

Acum ca vi le-am prezentat pe toate cele 10 haideti sa le punem cap la cap intr-o singura pagina web:

Asta a fost tot, sper ca ati inteles ceva si dac anu ati inteles lasati-mi un comentariu sau scrieti pe forum si am sa va ajut sa intelegeti totul!

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!