Despre HTML

Cătălin

La baza oricărei aplicații web stau, de obicei, trei limbaje: HTML, CSS și Javascript . Dacă vă întrebați de ce e nevoie de toate, ei bine fiecare are propriul scop bine definit.

#O simplă analogie

Pentru o înțelegere mai bună, ne putem gândi la construcția unei case.

Fundația, pereții și acoperișul fac parte din structura de bază a casei, fără de care nu putem ajunge la un rezultat final. Corespondentul acestei structuri în cazul unei aplicații web este HTML.

Așa cum o casă începe cu fundația, construcția unei aplicații web începe cu partea de HTML.

După ce structura de bază este gata, urmeaza să definim culorile folosite, plasamentul geamurilor, a ușilor, becurilor, mobilei și al altor lucruri ce țin de design.

Pentru un programator FrontEnd, acesta este pasul în care se introduce CSS-ul.

La final, trebuie ca geamurile, ușile și becurile puse la pasul anterior să funcționeze corespunzător și să putem interacționa cu ele. Așa cum probabil ați ghicit, în cazul unei aplicații web, aceste operații îi revin Javascript-ului.

Noi ne vom concentra aici pe primul limbaj dintre cele trei enumerate mai sus, și anume HTML.

#Ce este HTML?

HTML (Hyper Text Markup Language) este limbajul standard de markup folosit pentru a defini structura de bază a unei pagini web. Nu este un limbaj de programare propriu-zis, ci doar un limbaj descriptiv, bazat pe XML.

Majoritatea persoanelor consideră că HTML este foarte usor și îl tratează destul de superficial. Chiar dacă HTML este, într-adevăr, mai ușor decât celelalte două limbaje, el trebuie învățat bine și corect. Dacă vei face asta, vei avea o fundație foarte bună peste care vei putea așeza cunoștințele de CSS și JS 💪.

#Elemente

Orice fișier HTML este construit din elemente, numite și tags. Ele sunt formate din perechi de forma <element> </element>. Primul se numește tag de deschidere (opening tag) , iar al doilea tag de închidere (closing tag).

În interiorul acestei perechi putem avea alte elemente sau conținut de tip text, precum în exemplul de mai jos:

<section>
  <h1>FrontEnd v BackEnd</h1>
  <p> S-ar putea să fim subiectivi dar FrontEnd-ul câștigă! </p>
</section>

Open Sandbox

Concret, elementul <section> are drept conținut alte două elemente (<h1> și <p> ), în timp ce aceste două elemente au în interior doar conținut de tip text.

Există și elemente care nu au nevoie de conținut (de exemplu, elementul input sau img ). Acestea se numesc self-closing tags, iar modul de scriere este putin diferit, și anume <element />. În exemplul de mai jos putem vedea modul de folosire al unor taguri self-closing:

<input type="text" placeholder="Nume" />
<img 
  width="150" 
  src="https://d3tycb976jpudc.cloudfront.net/public/logo.png" />

Open Sandbox

Probabil te intrebi ce înseamnă type="text" și placeholder="Nume". Ele se numesc atribute. Hai să vedem care este scopul acestora.

#Atribute

Fiecare element poate avea o serie de atribute prin care noi putem fie să controlam comportamentul acestuia, fie să îl identificăm ulterior din CSS sau JS. Atributele sunt perechi de tip cheie=“valoare” care sunt scrise în interiorul unui opening tag.

Revenind la analogia de la început, dacă ne gândim la un bec, atribute posibile ar putea fi tipul becului (LED sau incandescent), culoarea becului, intensitatea acestuia, mărimea, etc. În HTML, un element bec care este de tip LED, de culoare albastră, ar putea fi scris după cum urmeaza:

#Relații de rudenie

Bineințeles că o aplicatie web nu contine doar unul sau două elemente. În majoritatea cazurilor, avem nevoie de zeci sau sute de elemente doar pentru o singură pagină. Aceste elemente sunt adăugate pe baza unor relații de rudenie.

Exista trei tipuri de elemente, în funcție de aceste relații:

elemente de tip părinte - parent elements
elemente de tip copil - child elements
elemente de tip frate / sora - sibling elements

În exemplul de mai sus, titlul (h1) și paragraful (p) sunt siblings, pentru că se află pe acelasi nivel.

Mai jos, se poate observa relația de tip părinte-copil , unde elementul <div> este părinte pentru elementul <p>.

<div>
  <p>Acesta este un paragraf</p>
</div>

#Resurse

Ceea ce am prezentat mai sus este doar vârful iceberg-ului. În lecțiile următoare vei învăța care este structura de bază a unei aplicații web, cum să îți validezi HTML-ul scris, precum și informații mai detaliate despre cele mai importante elemente. Până atunci, îti vom lăsa mai jos o listă de resurse cu elemente și atribute de bază"