Invatare Atomica

Ce este HTML?

Progres lectie:
0%
🎯

Obiectivul lectiei

Dupa aceasta lectie, vei intelege ce este HTML, cum functioneaza tag-urile si vei crea prima ta pagina web!

Dupa aceasta lectie vei putea:

  • Sa implementezi HTML (hypertext markup language)
  • Sa implementezi tag-uri HTML
  • Sa aplici ⚠ greseli frecvente

Incearca singur!

🎯 INCEARCA

Fara instructiuni - vezi cat poti singur!

Provocarea ta (5 minute):

1. Copiaza urmatorul cod:

<html> <body> <h1>Salut!</h1> </body> </html>
🚀 Testeaza pe OneCompiler

2. Lipeste codul in OneCompiler si apasa Run

3. Modifica textul "Salut!" si vezi cum se schimba pagina!

💾 Vrei sa salvezi local?

Poti folosi si Notepad: File > Save As, alege "All Files (*.*)" si salveaza ca prima-pagina.html

💡 Nu stii cum sa salvezi ca .html? Click aici

In Notepad: File > Save As

La "Save as type" alege "All Files (*.*)"

Scrie numele cu extensia: prima-pagina.html

1

HTML (HyperText Markup Language)

HTML (HyperText Markup Language)
HTML este limbajul folosit pentru a crea structura paginilor web. Nu este un limbaj de programare - este un limbaj de marcare (markup).
Analogie: Daca o pagina web ar fi o casa, HTML ar fi scheletul (structura din beton si caramizi). CSS ar fi vopseaua si decoratiunile, iar JavaScript ar fi instalatia electrica si sistemele.
2

Tag-uri HTML

Tag-uri HTML

HTML foloseste tag-uri pentru a marca continutul. Un tag arata asa:

<numetag>continut</numetag>
  • <tag> = tag de deschidere
  • </tag> = tag de inchidere (cu /)
  • Textul dintre ele = continutul
3

⚠ Greseli frecvente

⚠ Greseli frecvente

Uiti sa inchizi tag-ul: <h1>Text ❌ vs <h1>Text</h1>

Inversi ordinea: <b><i>text</b></i> ❌ vs <b><i>text</i></b>

Extensia gresita: Salvezi ca .txt in loc de .html

Exercitii practice

Exercitiul 1 (Nivel minim) - Web development

Gandeste-te la Ce este HTML? in HTML/CSS:

  1. Pe ce site-uri ai vazut aceasta tehnica?
  2. De ce e utila?
  3. Cum ai folosi-o in propriul site?

Raspunde numerotat: 1. ... 2. ... 3. ...

Exercitiul 2 (Nivel standard) - Programare

Cerinta: Scrie codul pentru Ce este HTML?

Exemplu input: Creezi de la zero

Exemplu output: Cod HTML/CSS functional pentru Ce este HTML?

Indicii:

  • Verifica sintaxa
  • Testeaza in browser
  • Comenteaza codul

Exercitiul 3 (Nivel performanta) - Compunere

Cerinta: Explica cum functioneaza Ce este HTML? in web.

Indicii:

  • Arata codul exemplu
  • Explica fiecare parte
  • Mentioneaza compatibilitate

Cuvinte cheie de folosit: HTML, CSS, tag, proprietate, browser

Ce ai invatat astazi

  • Ai invatat HTML (hypertext markup language)
  • Acum stii tag-uri HTML
  • Ai descoperit ⚠ greseli frecvente

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →