KULTUROSFERA

Pagina „Clasa noastră” în VS Code

LaboratorVS Code45 minD4.1HTML și CSS

Lecția-suport: Recapitulare și evaluare

Fiecare site pe care l-ai deschis vreodată e, în spate, un fișier text. Azi scrii tu unul: pagina „Clasa noastră", cu titluri, o listă a materiilor preferate și o imagine — și o deschizi în browser exact cum browserul deschide orice site. La finalul laboratorului vei avea un fișier index.html scris integral de tine, care se afișează corect în browser, plus folderul de proiect pe care îl vei îmbrăca în culori la laboratorul următor.

Ce îți trebuie

  • Visual Studio Code — descarcă de la code.visualstudio.com dacă nu e deja instalat (la școală ar trebui să fie; acasă cere ajutorul unui adult la instalare).
  • Un browser (oricare).
  • O imagine potrivită pentru pagină — de exemplu o fotografie a sălii de clasă sau a unui desen; nu fotografii cu colegii fără acordul lor.
  • Fără cont, fără internet după instalare. Timp: 45 de minute — 10 pentru schelet, 20 pentru conținut, 15 pentru misiune.

Pasul 1: folderul proiectului și scheletul paginii

Un proiect web trăiește într-un folder al lui. Disciplina asta te scutește de haos mai târziu.

  1. Creează pe desktop (sau unde ți-a indicat profesorul) un folder numit clasa-noastra — litere mici, cratimă în loc de spațiu; e obiceiul lumii web și îți evită surprize.
  2. Deschide VS Code → File → Open Folder → alege folderul creat.
  3. În panoul din stânga (Explorer), apasă pe pictograma de fișier nou și numește-l exact index.html. „index" e numele pe care browserele și serverele îl caută primul — pagina principală a oricărui site.
  4. Scrie scheletul (scrie-l, nu-l copia — degetele învață odată cu ochii):
<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Clasa noastră</title>
</head>
<body>

</body>
</html>

Pe scurt, ce ai scris: declarația de tip de document, rădăcina html cu limba paginii, capul head cu informații despre pagină (codificarea UTF-8 e cea care face diacriticele să nu iasă hieroglife) și corpul body — singurul loc al cărui conținut se vede în browser.

  1. Salvează (Ctrl + S), apoi găsește fișierul în folderul lui și deschide-l în browser cu dublu-clic.

Pasul 2: conținutul — titluri, paragrafe, liste

Tot ce urmează intră între <body> și </body>. Regula jocului: fiecare bucată de conținut stă într-un element — etichetă de deschidere, conținut, etichetă de închidere.

  1. Titlul principal al paginii (unul singur pe pagină, ca titlul unei cărți):
<h1>Clasa a VI-a B</h1>
  1. Un paragraf de prezentare — sincer, nu festiv:
<p>Suntem 27 de elevi. Sala noastră e la etajul 2, are tablă albă
și un calorifer care țăcăne iarna. Aici scriem prima noastră pagină web.</p>
  1. Un subtitlu și o listă neordonată pentru materiile preferate:
<h2>Materiile noastre preferate</h2>
<ul>
    <li>Informatică</li>
    <li>Educație fizică</li>
    <li>Biologie</li>
</ul>
  1. Încă un subtitlu și o listă ordonată — aici ordinea contează:
<h2>Programul unei zile de marți</h2>
<ol>
    <li>Matematică</li>
    <li>Română</li>
    <li>Informatică</li>
    <li>Istorie</li>
</ol>
  1. Salvează și apasă F5 (reîncărcare) în browser. Acest du-te-vino — modifici în VS Code, salvezi, reîncarci în browser — e ritmul de lucru al oricărui dezvoltator web. Obișnuiește-te cu el de azi.

Pasul 3: imaginea

  1. Copiază imaginea pregătită în folderul clasa-noastra, lângă index.html. Redenumește-o simplu: sala.jpg (sau .png, după caz) — fără spații, fără diacritice în numele fișierului.
  2. Sub paragraf, adaugă:
<img src="sala.jpg" alt="Sala noastră de clasă" width="400">
  1. Elementul img nu are etichetă de închidere — el nu „îmbracă" niciun conținut, doar arată un fișier. src spune care fișier, alt descrie imaginea pentru cine nu o poate vedea (persoane cu deficiențe de vedere, browsere care nu o încarcă), iar width îi limitează lățimea.
  2. Salvează, reîncarcă. Imaginea trebuie să apară între paragraf și prima listă.

Dacă nu merge

  • Diacriticele apar ca semne ciudate. Lipsește linia cu charset din head sau fișierul e salvat în altă codificare. Verifică bara de jos din VS Code: trebuie să scrie UTF-8.
  • Imaginea nu apare, se vede doar textul din alt. Numele din src nu coincide exact cu numele fișierului (majuscule, extensie .jpeg vs .jpg) sau imaginea nu e în același folder cu index.html. Verifică în Explorer-ul din VS Code că le vezi pe amândouă una sub alta.
  • Modific fișierul, dar browserul arată varianta veche. Ori n-ai salvat (punctul alb pe fila din VS Code = nesalvat), ori n-ai reîncărcat. Ctrl + S, apoi F5. Mereu amândouă.
  • Toată pagina s-a făcut listă / totul e îngroșat. O etichetă de închidere lipsă trage tot ce urmează în interiorul elementului. Caută perechea fiecărei etichete deschise; VS Code te ajută colorând pereche cu pereche.
  • Am deschis fișierul în browser și văd codul, nu pagina. Fișierul are extensia .txt (Windows ascunde uneori extensiile). Redenumește-l ca să se termine în .html.

Misiunea ta

Nivel de bază (obligatoriu): pagina cu h1, minimum două h2, un paragraf, o listă cu buline, una numerotată și o imagine cu alt completat.

Extindere: adaugă secțiunea „Ce ne place la școala noastră" cu încă un paragraf și un link către site-ul școlii (sau al orașului), cu elementul a:

<a href="https://example.com">Site-ul școlii noastre</a>

Provocare: o listă în listă — la fiecare materie preferată, o sub-listă cu două motive. Indiciu: a doua listă ul se scrie în interiorul unui element li, înainte de închiderea lui. Dacă bulinele sub-listei apar decalate spre dreapta, ai reușit.

Ai terminat când:

  • pagina se deschide din dublu-clic și arată tot conținutul, cu diacritice corecte;
  • în cod, fiecare etichetă deschisă are perechea de închidere (mai puțin img, care n-are nevoie);
  • poți explica unui coleg diferența dintre ul și ol și de ce imaginea are nevoie de alt.