Competente Digitale - Pregatire BAC

Portofoliu personal — pagina HTML in Notepad

Durata estimata: ~30-40 min Skill-uri exersate: HTML, Internet si comunicare, Operare PC si fisiere Dificultate: Incepator

De ce conteaza

Sarcina HTML din Fisa B cere editare cod brut in Notepad: structura minima de pagina, h1, paragraf, imagine cu atributul alt (obligatoriu in barem), link extern, tabel si — capcana cea mai costisitoare — salvare cu extensia .html, NU .html.txt. Daca exersezi pe propriul portofoliu pe care il poti folosi la admiterea de la facultatea de arte sau il poti pune pe Behance, materialul iti ramane in folder dupa examen. Si daca te intreaba comisia de admitere la UNAGE sau UAUIM, ai deja o pagina-cv vizuala gata facuta.

Ce vei produce

Un fisier portofoliu.html care, deschis in browser, arata:

  • Un titlu mare cu numele tau.
  • Un paragraf scurt de prezentare (autobiografic).
  • Trei imagini cu atribut alt obligatoriu (lucrari proprii sau reproduceri).
  • Un tabel 2x3 cu titlurile a 6 lucrari.
  • Un link extern catre Behance, Instagram sau pagina liceului.

Pasii proiectului

  1. Pasul 1: creeaza folderul si pune imaginile

    Pe Desktop, click-dreapta -> New -> Folder -> Portofoliu. Copiaza inauntru 3 imagini ale lucrarilor tale (sau orice 3 imagini de proba), redenumeste-le scurt:

    Portofoliu\
    lucrare1.jpg
    lucrare2.jpg
    lucrare3.jpg

    Atentie: imaginile trebuie sa fie in ACELASI folder cu .html-ul. Daca sunt in alt loc, src trebuie sa contina calea completa, ceea ce e fragil.

  2. Pasul 2: deschide Notepad

    Apasa tasta Windows, scrie notepad, Enter. NU folosi Word. NU folosi Wordpad. Word introduce "smart quotes" curbate (" " in loc de " ") care strica atributele HTML.

    Cum arata: fereastra Notepad cu titlul "Untitled - Notepad", zona de text complet alba, cursor in coltul stanga-sus, meniul File / Edit / Format / View / Help in bara de sus.

  3. Pasul 3: scrie structura minima HTML

    Tasteaza exact:

    <!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Portofoliul meu</title>
</head>
<body>

</body>
</html>

    Tot continutul vizibil il scrii intre <body> si </body>.

    Atentie: <meta charset="UTF-8"> asigura ca scrierea fara diacritice (si chiar cu, daca pui) se afiseaza corect. Fara aceasta linie, unele caractere apar ca semne ciudate.

  4. Pasul 4: titlul cu numele tau

    Intre body si /body adauga:

    <h1>Portofoliul meu — Galeria de lucrari</h1>
<h2>Prenume Nume, clasa a XII-a</h2>

    <h1> este cel mai mare titlu (unul singur pe pagina, in mod normal). <h2> e subordonat.

  5. Pasul 5: paragraf autobiografic scurt

    Sub h2:

    <p>Sunt eleva/elev al Liceului de Arte din clasa a XII-a, sectia
arte plastice. Ma intereseaza pictura in ulei, ilustratia digitala
si fotografia documentara. Pregatesc admiterea la UNAGE Iasi.</p>

    Tag-ul <p> creeaza un bloc de text cu spatiu deasupra si dedesubt. NU folosi <br> peste tot, lasa browserul sa puna spatierea.

  6. Pasul 6: cele 3 imagini cu alt obligatoriu

    Sub paragraf, adauga cele 3 imagini:

    <img src="lucrare1.jpg" alt="Natura statica in ulei" width="300">
<img src="lucrare2.jpg" alt="Portret in carbune" width="300">
<img src="lucrare3.jpg" alt="Compozitie abstracta acrilic" width="300">

    Atributele:

    • src — numele fisierului (e in acelasi folder, deci doar numele).
    • alt — descriere a imaginii. Obligatoriu in barem. Daca lipseste, pierzi puncte chiar daca imaginea se vede.
    • width — latimea in pixeli. Opional, dar daca nu pui imaginile vor fi cat dimensiunea originala.
    HTML in Notepad si rezultatul in browser, side-by-side

    Atentie: <img> NU se inchide. NU scrie </img>. Si chiar daca imaginea nu e in folder, codul trebuie sa fie corect — comisia verifica codul, nu doar afisarea.

  7. Pasul 7: tabel 2x3 cu titlurile a 6 lucrari

    Sub imagini:

    <h3>Lista lucrarilor din portofoliu</h3>
<table border="1">
  <tr>
    <td>Natura statica cu fructe</td>
    <td>Portret in carbune</td>
    <td>Peisaj urban in acuarela</td>
  </tr>
  <tr>
    <td>Compozitie abstracta</td>
    <td>Studiu de drapaj</td>
    <td>Autoportret in creion</td>
  </tr>
</table>

    Structura: <table> contine 2 randuri <tr>, fiecare cu 3 celule <td>. Total 2x3 = 6 celule, cate un titlu de lucrare in fiecare. border="1" deseneaza liniile.

    Atentie: ordinea de inchidere conteaza. Inchizi mai intai </td>, apoi </tr>, abia la final </table>.

  8. Pasul 8: link extern catre Behance/Instagram

    Sub tabel:

    <p>Mai multe lucrari pe
<a href="https://www.behance.net/numele-meu">profilul meu Behance</a>
sau pe <a href="https://www.instagram.com/numele_meu">Instagram</a>.</p>

    <a> este tag-ul de link (anchor). Atributul href contine adresa, textul vizibil este intre <a> si </a>.

    Atentie: scrie intotdeauna adresa intre ghilimele drepte ("..."). Daca ai copiat din Word, ghilimelele pot fi curbate si link-ul nu functioneaza.

  9. Pasul 9: verifica intregul cod

    Codul tau in Notepad ar trebui sa arate cam asa (tot intr-un fisier):

    <!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Portofoliul meu</title>
</head>
<body>
<h1>Portofoliul meu — Galeria de lucrari</h1>
<h2>Prenume Nume, clasa a XII-a</h2>
<p>Sunt eleva/elev al Liceului de Arte...</p>
<img src="lucrare1.jpg" alt="Natura statica in ulei" width="300">
<img src="lucrare2.jpg" alt="Portret in carbune" width="300">
<img src="lucrare3.jpg" alt="Compozitie abstracta acrilic" width="300">
<h3>Lista lucrarilor din portofoliu</h3>
<table border="1">
  <tr><td>...</td><td>...</td><td>...</td></tr>
  <tr><td>...</td><td>...</td><td>...</td></tr>
</table>
<p>Mai multe pe <a href="...">Behance</a>.</p>
</body>
</html>

  10. Pasul 10: salveaza ca .html (capcana clasica!)

    Ctrl + S. Apare dialogul Save As. Trei lucruri obligatorii:

    • Navigheaza la folderul Portofoliu de pe Desktop.
    • La File name: scrie portofoliu.html (cu extensie).
    • La Save as type: selecteaza All Files (*.*). NU lasa "Text Documents".
    • La Encoding: alege UTF-8.
    File name:     portofoliu.html
Save as type:  All Files (*.*)
Encoding:      UTF-8
    Dialogul Save As din Notepad cu schimbarea de la Text Documents la All Files pentru salvare .html

    Atentie: CEA MAI FRECVENTA CAPCANA. Daca lasi "Text Documents", Notepad salveaza ca portofoliu.html.txt. Pagina nu se va deschide ca pagina web. All Files obligatoriu.

  11. Pasul 11: verifica extensia in File Explorer

    Deschide folderul Portofoliu. Daca extensiile sunt ascunse, activeaza-le — calea difera dupa versiunea de Windows:

    • Windows 11: View -> Show -> File name extensions (bifeaza).
    • Windows 10: tab-ul View din ribbon -> bifeaza caseta File name extensions.

    Vrei sa vezi clar portofoliu.html, NU portofoliu.html.txt. Pictograma trebuie sa fie a browserului (Edge/Chrome), nu a Notepad-ului.

    Structura folder de examen: numele candidatului, fisiere cerute, arhivare .zip

  12. Pasul 12: deschide in browser si verifica

    Dublu-click pe portofoliu.html. Trebuie sa se deschida in browser. Verifica:

    • Titlul cu numele tau apare mare, ca h1.
    • Paragraful autobiografic e vizibil sub titluri.
    • Cele 3 imagini se afiseaza una langa alta (sau in coloana).
    • Tabelul are 2 randuri, 3 coloane, cu linii vizibile.
    • Link-urile sunt albastre si subliniate.

    Daca vezi codul brut (cu <h1> scris ca text), extensia e gresita — intoarce-te la Pasul 10.

    HTML in Notepad si rezultatul in browser, side-by-side

    Daca vrei sa modifici: NU modifica in browser. Intoarce-te in Notepad, corecteaza, Ctrl + S, apoi in browser apasa F5 ca sa reincarce.

Variatii si extensii

  • Alta tema: portofoliu de fotografie ("Galeria mea de strada"), pagina CV pentru un proiect de teatru, pagina pentru concursul de muzica. Aceleasi tag-uri, alt continut.
  • Mai mult continut: adauga o lista <ul> cu premiile primite, sau o <ol> cu evenimentele la care ai participat in ordinea anilor.
  • Formatare: incadreaza textul in <b>, <i>, <u> sau scrie un cuvant cu culoare folosind <font color="red">text</font> (atributul vechi, dar acceptat la examen).
  • Background: in tag-ul body schimba in <body bgcolor="#fff5e6"> si pagina capata o nuanta calda — util pentru un portofoliu de arta.

Checklist final

Unde apare la examen

Sarcini reale de HTML din variantele oficiale, rezolvate pas cu pas pe acest site:

Inrudit