Limbajul HTML - introducere

Introducere

Limbajul HTML este folosit pentru a descrie conținutul paginilor web și este folosit împreună cu alte tehnologii, precum CSS și Javascript.

HTML înseamnă HyperText Markup Language.

Documentele html conțin cod HTML. Ele sunt încărcate în browser, de pe calculatorul local sau de pe Internet. Conținutul său este interpretat de browser; acesta mai încarcă și alte fișiere, de exemplu imagini, precizate în document, și afișează pagina web.

Documentele HTML conțin doar text. Acesta poate fi creat cu orice editor de texte, de exemplu Notepad, dar un editor specializat poate ajuta în realizarea mai rapidă a documentului. Exemple de editoare de text utile în realizarea documentelor HTML: Notepad++, Komodo Edit, Sublime Text Editor, etc.

Pe internet există numeroase locuri unde putem învăța limbajul HTML, și nu numai. Dintre acestea, amintim:

W3Schools – o platformă de învățare cu tutoriale de mici dimensini, simple și clare, foarte potrivite pentru începători;
Khan Academy – o suită de lecții interactive, gândite să fie parcurse pas cu pas;
MDN Web Docs – o platformă a fundației Mozilla – care conține atât tutoriale, cât și referințe complete pentru tehnologiile folosite în crearea unei pagini web.

Ciclul de proiectare a unei pagini web

editarea documentul html folosind un editor de text;
salvarea cu extensia .html;
afișarea paginii web folosind un browser – de exemplu Mozilla Firefox sau Google Chrome.

Primul document HTML

Scrieți codul de mai jos într-un editor de text.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Prima pagină</title>
    </head>
    <body>
        <!-- acest text este un comentariu -->
        <h1>Salut</h1>
        <hr>
        <p> Aceasta este prima pagină web.</p>
        <p> <a href="https://www.pbinfo.ro">Link spre pbinfo.</a> </p>
    </body>
</html>

Mai departe:

salvați fișierul cu numele salut.html, într-un folder pe disc. Extensia html este importantă!
deschideți folderul unde l-ați salvat și deschideți fișierul cu un browser!

Explicația exemplului

declarația <!DOCTYPE html> precizează că documentul respectă standardul HTML5.
elementul <html> este elementul râdăcină al oricărui document html.
elementul <head> conține informații despre document care nu se vor afișa în pagina web.
elementul <title> precizează titlul document, așa cum va fi afișat în bara de titlu a browser-ului.
elementul <meta charset="utf-8"> precizează că documentul este scris folosind codificare UTF-8 pentru caractere. Aceasta permite utilizarea caracterelor cu diacritice, specifice limbii române: ă, â, î, ș, ț.
elementul <body> conține ceea ce se afișează în fereastra browser-ului.
elementul <h1> definește un titlu de cel mai important nivel.
elementul <hr> definește o linie orizontală (horizontal rule)
elementul <p> definește un paragraf (aliniat) oarecare.
elementul <a> definește o ancoră; prin intermediul lui se introduc în pagina web link-uri.
secvența  este un comentariu. Browserul îl ignoră și nu îl afișează în pagina web; el are importanță numai pentru cei care editează documentul html.

Structura unui document html

Un document html este alcătuit din elemente, sau marcaje (engl. elements): html, head, body, title, h1, p, a , meta, hr.

Elementele sunt inserate în document prin intermediul etichetelor (engl. tags). Acestea conțin elementul între simbolurile <>.

Majoritatea elementelor sunt definite prin intermediul a două etichete: eticheta de deschidere (ex. <h1>) și eticheta de închidere (ex. </h1>), iar între cele două etichete se află conținutul elementului: <h1>Salut</h1>.
Există și elemente cu o singură etichetă, de exemplu hr. Eticheta de închidere nu este necesară, deoarece aceste elemente nu au conținut.

Unele elemente pot avea atribute (engl. attributes). Ele furnizează informații suplimentare despre element și se scriu în eticheta de deschidere. Un atribut are de regulă o valoare (engl value), dar există și atribute care nu au valori – simpla prezență a atributului în element este suficientă. Pentru atributele care au valori, ele se dau în forma atribut="valoare"!

De exemplu, în elementul <a href="https://www.pbinfo.ro">Link spre pbinfo.</a>, href este un atribut, iar https://www.pbinfo.ro; valoarea sa stabilește destinația link-ului.

elementele și atributele lor se scriu cu litere mici
valorile se scriu între ghilimele duble: "

Spații albe

Browser-ele ignoră spațiile albe (caracterele spațiu, tab, sfârșit de rând). Următoarele secvențe au același efect.

<p> Aceasta este prima pagină web.</p>
<p> 
	Aceasta este prima pagină web.
</p>
<p> 
    Aceasta           este 

prima
            pagină web.
</p>

Pentru a insera un spațiu de dimensiuni mai mari, putem folosi o construcție specială a limbajului HTML:  . Ea se numește entitate HTML (engl. HTML entity).

Pentru trece la rând nou în interiorul unui paragraf, putem folosi elementul <br> (break).