Lectia 2: HTML – Structura unui Site și Crearea Primului Site Simplu

by

Prezentare Generală a Lecției:

În această lecție, vei învăța să creezi structura de bază a unui site folosind HTML. Vom explora elementele esențiale HTML și cum să le folosim pentru a construi un site simplu, bine organizat. La final, vei avea un website de bază care include o structură clară și conținut funcțional.

Secțiunea 1: Ce Este HTML?

HTML (HyperText Markup Language) este limbajul de bază pentru crearea structurilor site-urilor web.

  • Rolul HTML: Definește structura și conținutul paginii web.
  • Elemente HTML: Fiecare element HTML este format dintr-o etichetă deschisă, conținut și o etichetă închisă.
    • Exemplu:<p>Acesta este un paragraf.</p>

Secțiunea 2: Structura de Bază a unui Document HTML

Fiecare pagină web are o structură de bază care include următoarele elemente:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titlul Paginii</title>
</head>
<body>
    <h1>Bine ai venit!</h1>
    <p>Aceasta este o pagină HTML simplă.</p>
</body>
</html>

Explicație:

  1. <!DOCTYPE html>: Specifică tipul documentului (HTML5).
  2. <html lang="ro">: Deschide documentul HTML și setează limba.
  3. <head>: Conține informații despre pagină (titlul, meta date).
  4. <title>: Setează titlul paginii care apare în tab-ul browserului.
  5. <body>: Conține conținutul principal al paginii (vizibil utilizatorilor).

Secțiunea 3: Elemente Esențiale HTML

  1. Titluri:
    • Folosite pentru organizarea conținutului.
    • Exemple:<h1>Titlu Principal</h1> <h2>Subtitlu</h2> <h3>Alt Subtitlu</h3>
  2. Paragrafe:
    • Pentru blocuri de text.
    • Exemplu:<p>Acesta este un paragraf.</p>
  3. Liste:
    • Listă ordonată:<ol> <li>Primul element</li> <li>Al doilea element</li> </ol>
    • Listă neordonată:<ul> <li>Element 1</li> <li>Element 2</li> </ul>
  4. Link-uri:
    • Pentru navigare între pagini.
    • Exemplu:<a href="https://www.example.com">Vizitează Example</a>
  5. Imagini:
    • Pentru afișarea graficelor.
    • Exemplu<img src="imagine.jpg" alt="Descrierea imaginii">

Secțiunea 4: Crearea Primului Site Simplu

Pasul 1: Structura Paginii

  1. Creează un fișier nou numit index.html.
  2. Scrie următorul cod:
<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Primul Meu Site</title>
</head>
<body>
    <header>
        <h1>Bun Venit pe Site-ul Meu!</h1>
        <p>Acesta este un exemplu simplu de site.</p>
    </header>
    <main>
        <section>
            <h2>Despre Mine</h2>
            <p>Sunt un pasionat de web design și dezvoltare.</p>
        </section>
        <section>
            <h2>Proiectele Mele</h2>
            <ul>
                <li>Proiect 1</li>
                <li>Proiect 2</li>
                <li>Proiect 3</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>© 2025 Numele Meu. Toate drepturile rezervate.</p>
    </footer>
</body>
</html>

Pasul 2: Testează Pagina

  1. Deschide fișierul în browser.
  2. Verifică structura și conținutul.

Secțiunea 5: Activitate Practică

  1. Personalizează Site-ul:
    • Adaugă o nouă secțiune „Contact.”
    • Introdu o imagine cu tine (folosește tag-ul <img>).
  2. Testează o Listă:
    • Adaugă o listă neordonată cu hobby-urile tale.

Quiz pentru Săptămâna 2

  1. Ce tag este folosit pentru a adăuga un paragraf în HTML?
    • a) <p>
    • b) <h1>
    • c) <div>
  2. Ce tag folosești pentru a afișa o imagine?
    • a) <img>
    • b) <picture>
    • c) <photo>