Competente Digitale - Pregatire BAC

Model BAC 2024 — Fisa B — Itemul HTML (comp_h) — Rezolvare comentata

Durata: ~8-10 din cele 75 de minute ale Fisei B Punctaj: 10 puncte (itemul 4 din Subiectul al III-lea) Skill-uri: editare cod HTML in Notepad, marcatori (list-style-type), linia orizontala hr, salvare fara stricarea extensiei Internet: NU Subiect Fisa B PDF Barem PDF

Despre acest item

Modelul oficial 2024 e tratat pe site in trei pagini: Fisa A (cautare pe internet — geoglifele Nazca), Fisa B — Excel (comp_x) si pagina de fata, care acopera doar itemul HTML: punctul 4 din Subiectul al III-lea, fisierul comp_h. Spre deosebire de itemele Word/PowerPoint/Excel (cate 15p, cate 3 cerinte), itemul HTML are doar doua cerinte a cate 5 puncte = 10 puncte.

Important de inteles: NU ti se cere sa construiesti o pagina de la zero. Primesti in directorul examen un fisier comp_h — o pagina web deja facuta, cu paragrafe si o imagine — si trebuie sa o modifici in doua locuri precise.

Cerinta oficiala, citata din PDF-ul Ministerului (Subiectul al III-lea, punctul 4):

4. Deschideti fisierul comp_h.

a. Introduceti marcatori de tip ■ (square) primelor doua paragrafe din pagina web. (5p)

b. Adaugati imediat inaintea imaginii din pagina web o linie orizontala, avand lungimea 75% din latimea ferestrei. (5p)

Ce ti se cere

  • 4.a (5p): primele doua paragrafe din pagina sa apara ca o lista cu marcatori (bullets) de tip patrat plin ■ (square).
  • 4.b (5p): imediat inaintea imaginii din pagina sa apara o linie orizontala care ocupa 75% din latimea ferestrei (nu toata latimea, nu o valoare fixa in pixeli).
  • Fisierul se salveaza tot ca comp_h, in directorul examen, fara redenumire si fara schimbarea extensiei.

Nota de onestitate: fisierul de lucru comp_h nu se publica odata cu subiectul, deci textul exact al paragrafelor si numele imaginii din el nu sunt cunoscute. In codul de mai jos folosim text generic ("Primul paragraf...", imagine.jpg) — la examen pastrezi textul si numele de fisier existente, neschimbate.

Pasii rezolvarii

  1. Pasul 1: deschide comp_h cu Notepad, NU cu dublu-click

    Dublu-click pe comp_h il deschide in browser — acolo vezi pagina, dar nu poti modifica nimic. Pentru editare: click dreapta pe comp_h > Open with > Notepad. Tine deschise amandoua: Notepad pentru cod, browserul pentru verificare (dupa fiecare salvare apasa F5 in browser).

    Fisierul HTML deschis in Notepad si rezultatul afisat in browser, una langa alta

    Atentie: nu deschide comp_h in Word "ca sa fie mai usor" decat daca stii exact ce faci (vezi alternativa de la Pasul 4). Word rescrie tot codul HTML cu balast propriu si poate strica restul paginii.

  2. Pasul 2: cerinta 4.a (5p) — marcatori ■ (square) pe primele doua paragrafe

    In cod, primele doua paragrafe arata in genul:

    <p>Primul paragraf din pagina...</p>
<p>Al doilea paragraf din pagina...</p>

    Marcatorii in HTML inseamna o lista neordonata <ul>, cu fiecare paragraf devenit element de lista <li>. Tipul patrat plin se obtine cu list-style-type: square. Inlocuieste cele doua paragrafe cu:

    <ul style="list-style-type: square;">
  <li>Primul paragraf din pagina...</li>
  <li>Al doilea paragraf din pagina...</li>
</ul>

    Textul paragrafelor ramane exact cel existent — schimbi doar tag-urile din jurul lui. O varianta mai veche, acceptata de browsere, este atributul direct pe lista:

    <ul type="square">
  <li>Primul paragraf din pagina...</li>
  <li>Al doilea paragraf din pagina...</li>
</ul>

    Cum imparte baremul cele 5 puncte: 1p pentru aplicarea unor marcatori + cate 2p pentru fiecare parametru conform cerintei: tipul marcatorului (square, nu disc/cerc) si paragrafele suport (exact primele doua, nu altele, nu toate).

    Atentie: marcatorul implicit al <ul> este discul plin ●. Daca uiti square, ai "aplicat marcatori" (1p) si ai nimerit paragrafele (2p), dar pierzi cele 2p pe tip. Verifica in browser: trebuie sa vezi patrate pline ■, nu cercuri.

  3. Pasul 3: cerinta 4.b (5p) — linie orizontala de 75% imediat inaintea imaginii

    Cauta in cod tag-ul imaginii. Apasa Ctrl + F in Notepad si cauta <img — te duce direct la el. Linia orizontala in HTML este tag-ul <hr>, iar lungimea procentuala se da cu atributul width. Scrie pe randul de dinaintea tag-ului imaginii:

    <hr width="75%">
<img src="imagine.jpg">

    Echivalent, varianta cu stil CSS (la fel de corecta):

    <hr style="width: 75%;">

    <hr> nu are tag de inchidere, la fel ca <img>. Procentul (75%) inseamna ca linia se scurteaza si se lungeste odata cu fereastra — exact "75% din latimea ferestrei", cum cere subiectul. Daca ai scrie width="750" (pixeli), linia ar avea lungime fixa si NU ar respecta cerinta.

    Cum puncteaza baremul: 5p pentru rezolvare completa; numai 3p daca s-a adaugat o linie orizontala, dar nu conform cerintei (de exemplu pe toata latimea, cu lungime in pixeli sau pusa in alt loc decat imediat inaintea imaginii).

    Atentie: "imediat inaintea imaginii" inseamna in cod chiar inainte de <img>, fara alt continut intre ele. Pusa dupa imagine sau la finalul paginii, linia exista dar pozitia e gresita — cazi pe clauza de 3p.

  4. Pasul 4 (alternativa GUI): rezolvarea din Word, daca nu te simti sigur pe cod

    Baremul precizeaza: "Se puncteaza orice modalitate de rezolvare corecta a cerintelor" — corectorul verifica rezultatul in pagina, nu cum ai ajuns la el. Deci poti deschide comp_h si in Word (click dreapta > Open with > Word):

    • 4.a: selectezi primele doua paragrafe > Home > sageata de langa butonul Bullets > alegi marcatorul patrat plin ■ (sau Define New Bullet > Symbol, simbolul de patrat).
    • 4.b: pui cursorul inaintea imaginii > Home > sageata butonului Borders > Horizontal Line; apoi dublu-click pe linie si in dialogul de formatare setezi Width la 75%.
    • La salvare pastrezi numele si tipul: Save as type: Web Page (nu .docx!), numele comp_h, in directorul examen.

    Atentie: riscul rutei Word e la salvare — daca salvezi din reflex ca .docx, fisierul nu mai e pagina web si poti pierde ambele cerinte. Ruta Notepad e mai sigura si o recomandam ca prima optiune.

  5. Pasul 5: salveaza si verifica in browser

    In Notepad apasa Ctrl + S. Cum fisierul exista deja, nu apare niciun dialog — extensia si numele raman neschimbate (de asta ruta Notepad e sigura). Apoi treci in browser si apasa F5. Trebuie sa vezi:

    • primele doua paragrafe ca lista, cu patrate pline ■ in fata;
    • o linie orizontala deasupra imaginii, vizibil mai scurta decat latimea ferestrei;
    • testul decisiv: redimensioneaza fereastra browserului — linia trebuie sa se scurteze/lungeasca proportional (asta dovedeste ca e 75%, nu pixeli ficsi);
    • restul paginii neatins (titlu, celelalte paragrafe, imaginea se vad ca inainte).

    Atentie: daca ai folosit File > Save As din greseala, verifica in File Explorer ca NU s-a creat un comp_h.txt langa original — corectorul deschide fisierul comp_h original, iar modificarile salvate intr-un fisier nou nu se puncteaza.

Recapitulare barem — itemul HTML (10 puncte)

  • 4.a — marcatori square pe primele doua paragrafe: 5p = 1p aplicarea unor marcatori + 2p tipul (square) + 2p paragrafele suport (primele doua).
  • 4.b — linie orizontala 75% imediat inaintea imaginii: 5p; numai 3p daca linia exista, dar nu conform cerintei (lungime sau pozitie gresita).
  • Total item HTML: 10 puncte. Regula generala a baremului: nu se acorda alte punctaje intermediare si nici fractiuni de punct, dar se puncteaza orice modalitate de rezolvare corecta.

Capcane in care cad elevii

  • Au deschis comp_h cu dublu-click (browser) si "nu au putut scrie nimic" — editarea se face din Notepad sau Word, browserul doar afiseaza.
  • Au pus marcatori disc (implicitul ●) in loc de square ■ — pierd 2p pe tipul marcatorului.
  • Au pus marcatori pe toate paragrafele din pagina, nu doar pe primele doua — pierd 2p pe paragrafele suport.
  • Au scris lungimea liniei in pixeli (width="750") in loc de procent — linia nu mai e "75% din latimea ferestrei", cad pe clauza de 3p.
  • Au pus <hr> dupa imagine sau la finalul paginii — "imediat inaintea imaginii" inseamna chiar inainte de tag-ul <img>.
  • Au rezolvat in Word si au salvat ca .docx — fisierul predat nu mai e pagina web.
  • Au facut Save As din Notepad si a rezultat comp_h.txt langa fisierul original, care a ramas nemodificat.
  • Au sters textul paragrafelor cand le-au transformat in <li> — cerinta schimba doar marcatorii, continutul ramane.

Auto-evaluare

Exercitiu suplimentar (scenariu de antrenament — NU face parte din subiectul oficial)

Cerintele oficiale de mai sus presupun ca stii deja sa "citesti" o pagina HTML existenta. Daca tag-urile <p>, <img>, <ul> nu iti sunt familiare, construieste acasa, de la zero, o mini-pagina "Galeria mea" in Notepad si salveaza-o ca galeria.html (Save as type: All Files, nu Text Documents — altfel iese galeria.html.txt):

<!DOCTYPE html>
<html>
<head>
<title>Galeria mea</title>
</head>
<body>
<h1>Galeria mea</h1>
<ul style="list-style-type: square;">
  <li>Primul paragraf de prezentare.</li>
  <li>Al doilea paragraf de prezentare.</li>
</ul>
<hr width="75%">
<img src="tablou.jpg" alt="Tablou natura statica" width="400">
</body>
</html>

Deschide-o in browser si regaseste exact cele doua tehnici cerute la examen: lista cu marcatori square si linia orizontala de 75% pusa inaintea imaginii. Toate tag-urile sunt explicate pe pagina Competente: HTML.

Pagini relevante