Limbajul de marcare hipertext (HTML)

Limbajul de marcare hipertext (HTML)

HTML este fundamentul oricărei pagini web, oferind structura și baza necesară pentru a crea conținut interactiv și atractiv. În acest articol, vom explora esența limbajului de marcare hipertext (HTML) și modul în care acesta permite dezvoltatorilor să construiască pagini web eficiente și bine organizate. Vom începe prin a înțelege structura de bază a unui document HTML, analizând elementele esențiale precum , și , și vom oferi exemple clare pentru a ilustra utilizarea corectă a acestora. De asemenea, vom discuta despre cele mai comune etichete HTML și atributele lor, explicând rolul și importanța fiecăruia în crearea unui conținut web coerent și accesibil. În plus, vom aborda tehnici de formatare a textului și stilizare, precum și metode de creare a tabelelor și listelor, oferind exemple practice pentru a facilita învățarea. Invităm cititorii să își împărtășească gândurile și experiențele, contribuind astfel la o comunitate de învățare deschisă și colaborativă.

Structura de bază a unui document HTML

Hai să fim sinceri, dacă nu știi structura de bază a unui document HTML, e ca și cum ai încerca să construiești o casă fără fundație. Începi cu un simplu tag DOCTYPE care spune browserului că folosești HTML5. Apoi, ai nevoie de un tag HTML care închide tot conținutul tău. În interiorul acestuia, ai două secțiuni principale: head și body. În head, pui toate metadatele, titlul paginii și linkurile către stiluri și scripturi. În body, pui tot ce vrei să apară pe pagină: texte, imagini, tabele, etc.

Acum, să facem lucrurile clare cu un tabel de comparație:

Tag Descriere Exemplu
<!DOCTYPE html> Declară tipul documentului <!DOCTYPE html>
<html> Containerul principal pentru tot conținutul HTML <html>…</html>
<head> Conține metadate, titlul și linkuri către resurse externe <head>…</head>
<body> Conține tot conținutul vizibil al paginii <body>…</body>

Deci, dacă vrei să fii un maestru al HTML-ului, trebuie să înțelegi aceste elemente fundamentale. Fără ele, totul se prăbușește. E ca și cum ai încerca să gătești o masă gourmet fără să știi să fierbi apă. Așa că, pune mâna pe tastatură și începe să exersezi!




Pagina mea

Bun venit!

Aceasta este prima mea pagină web.


Titlu principal

Acesta este un paragraf.

Link către exemplu
Descriere

  • Element listă neordonată
  1. Element listă ordonată
Diviziune de conținut

Span de text Descriere
Link extern

Conținut div

Crearea de tabele și liste în HTML

Formatarea textului în HTML este esențială pentru a face conținutul mai atractiv și ușor de citit. Utilizând etichete precum <b>, <i>, <u>, <strong>, <em>, <br> și <hr>, poți adăuga stil și claritate textului tău.

  • <b> și <strong> sunt folosite pentru a îngroșa textul, dar <strong> adaugă și o importanță semantică.
  • <i> și <em> sunt utilizate pentru a face textul italic, dar <em> subliniază și accentuarea.
  • <u> este folosit pentru a sublinia textul.
  • <br> introduce o linie nouă, iar <hr> adaugă o linie orizontală pentru a separa secțiunile.

Exemple de formatare:

  
    <p><b>Text îngroșat</b></p>
    <p><i>Text italic</i></p>
    <p><u>Text subliniat</u></p>
    <p><strong>Text puternic</strong></p>
    <p><em>Text accentuat</em></p>
    <p>Linie nouă<br>Altă linie</p>
    <hr>
  

În concluzie, utilizarea corectă a acestor etichete de formatare poate face o diferență semnificativă în prezentarea și claritatea conținutului tău HTML.

Nume Vârstă
Maria 30
Ion 25

Listele sunt o altă componentă importantă în HTML, utilizate pentru a afișa elemente într-o formă ordonată sau neordonată. Listele ordonate folosesc eticheta

    , iar cele neordonate

      , fiecare element din listă fiind marcat cu

    • . Iată un exemplu:
      • Primul element
      • Al doilea element
      1. Primul element
      2. Al doilea element

      Întrebări frecvente

      Cum pot adăuga un comentariu în codul HTML?

      Pentru a adăuga un comentariu în HTML, folosește sintaxa . Comentariile nu sunt vizibile în pagina web și sunt utile pentru a adăuga note sau explicații în cod.

      Ce este un atribut global în HTML?

      Atributele globale sunt atribute care pot fi utilizate pe orice element HTML. Exemple de atribute globale includ id, class, style, și title.

      Cum pot crea un link care deschide într-o nouă fereastră?

      Pentru a crea un link care se deschide într-o nouă fereastră sau filă, folosește atributul target=_blank în eticheta . De exemplu: Link extern.

      Care este diferența dintre etichetele

      și ?

      Eticheta

      este un element de bloc utilizat pentru a grupa conținutul în secțiuni mari, în timp ce eticheta este un element inline utilizat pentru a stiliza porțiuni mici de text sau alte elemente inline.

      Cum pot include un fișier CSS extern într-un document HTML?

      Pentru a include un fișier CSS extern, folosește eticheta în secțiunea a documentului HTML. De exemplu: .