Ai nevoie de exact trei lucruri ca să scrii un site de mână: un editor de text, un browser și o oră liberă. Fără platforme, fără abonamente, fără să înțelegi ce se întâmplă „în spate" — pentru că, aici, spatele îl scrii tu. Tutorialul următor te duce de la un fișier gol la un site cu trei pagini, aspect decent pe telefon și adresă publică pe internet.

De ce merită, chiar dacă există constructoare

Nu ca să renunți la ele. Ci pentru că cele două ore investite în HTML îți schimbă permanent relația cu orice site pe care îl vei avea vreodată: înțelegi de ce o pagină se încarcă greu, de ce textul arată altfel pe telefon, ce înseamnă un titlu H1 pentru Google și unde se lipește codul de statistici. Iar pentru pagini simple — o prezentare, un CV online, o pagină de eveniment — un site scris de mână rămâne cel mai rapid din lume: nu are bază de date, nu are pluginuri, nu are ce să se strice.

Pregătirea: cinci minute

  • Editor: Visual Studio Code (gratuit) sau Notepad++. Merge și Notepad-ul din Windows, dar fără colorarea sintaxei greșești mai des.
  • Browser: orice, dar ține deschis panoul de dezvoltare (tasta F12) — acolo vezi erorile.
  • Un folder: creează pe desktop unul numit site, iar în el un subfolder imagini. Toate fișierele stau acolo.

Lecția 1: scheletul unei pagini

Creează în folderul site un fișier numit index.html. Numele contează: serverele caută automat un fișier cu acest nume când cineva îți deschide adresa. Scrie în el:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atelier Foto Ana — fotografie de eveniment</title>
    <meta name="description" content="Fotografie de nuntă și botez în Brașov. Portofoliu, pachete și disponibilitate.">
</head>
<body>
    <h1>Atelier Foto Ana</h1>
    <p>Fotografiez evenimente în Brașov din 2019.</p>
</body>
</html>

Salvează, apoi deschide fișierul cu dublu clic. Ai deja un site. Nu e frumos, dar e complet valid și, dacă ar fi online, Google l-ar putea indexa. Ce face fiecare linie:

  • <!DOCTYPE html> — îi spune browserului că folosești HTML modern. Fără el, browserele intră în „mod de compatibilitate" și aspectul o ia razna.
  • lang="ro" — ajută motoarele de căutare și cititoarele de ecran.
  • charset="UTF-8" — fără el, diacriticele devin semne ciudate. Este singura cauză, în 90% din cazuri, a textelor cu „î" în loc de „î".
  • viewport — linia care face pagina să se comporte normal pe telefon. Lipsa ei e motivul pentru care unele site-uri vechi apar minuscule pe mobil.
  • title și description — exact textele care apar în rezultatele Google. Scrie-le cu grijă, nu „Pagina mea".

Lecția 2: conținutul real

Totul între <body> și </body> se vede în pagină. Ai nevoie de foarte puține etichete ca să acoperi 95% din cazuri:

<h1>Titlul principal — unul singur pe pagină</h1>
<h2>Un subtitlu de secțiune</h2>
<p>Un paragraf obișnuit, cu <strong>text îngroșat</strong> și un
   <a href="contact.html">link către altă pagină</a>.</p>

<ul>
    <li>element de listă</li>
    <li>încă unul</li>
</ul>

<img src="imagini/portofoliu-01.webp" alt="Cuplu fotografiat la Poiana Brașov" width="800" height="600">

Trei reguli care contează mai mult decât par:

  1. Un singur h1 pe pagină, iar în el cuvintele după care vrei să fii găsit.
  2. Atributul alt la fiecare imagine. Îl citesc motoarele de căutare și cititoarele de ecran; scrie ce se vede, nu „poza1".
  3. width și height la imagini. Browserul rezervă spațiul dinainte și pagina nu mai „sare" în timpul încărcării.

Lecția 3: aspectul, cu CSS

Creează un fișier style.css în același folder și leagă-l în <head>:

<link rel="stylesheet" href="style.css">

Iar în style.css scrie un set minim care face deja pagina să arate îngrijit:

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    line-height: 1.7;
    color: #1e293b;
    background: #f8fafc;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

h1 { font-size: 2rem; margin-bottom: 12px; }
h2 { font-size: 1.4rem; margin: 32px 0 12px; }
p  { margin-bottom: 16px; }

img { max-width: 100%; height: auto; display: block; }

a { color: #2563eb; }

Două linii fac aici toată treaba grea: box-sizing: border-box, care oprește surprizele la calculul lățimilor, și img { max-width: 100% }, care împiedică imaginile mari să iasă din ecran pe telefon. Înfășoară conținutul din <body> într-un <div class="container"> și ai deja o coloană citibilă, centrată.

Lecția 4: să arate bine pe telefon

Ai pus deja linia viewport, deci ești la jumătatea drumului. Restul e un bloc de reguli care se aplică doar sub o anumită lățime:

@media (max-width: 640px) {
    h1 { font-size: 1.5rem; }
    .container { padding: 16px; }
    .meniu { flex-direction: column; gap: 8px; }
}

Testează prin micșorarea ferestrei browserului sau cu modul de dispozitiv din panoul F12. Regula empirică: dacă trebuie să dai zoom ca să citești sau să apeși un buton, mai ai de lucru.

Lecția 5: trei pagini și un meniu

Copiază index.html de două ori și redenumește copiile servicii.html și contact.html. În toate trei, pune același meniu imediat după <body>:

<nav class="meniu">
    <a href="index.html">Acasă</a>
    <a href="servicii.html">Servicii</a>
    <a href="contact.html">Contact</a>
</nav>

Aici apare prima frustrare reală a scrisului de mână: meniul e copiat în trei locuri, iar la a patra pagină îl vei modifica în patru fișiere. Exact această problemă a dus la apariția sistemelor de administrare a conținutului — și e semnalul că, dincolo de 5–6 pagini, merită să treci pe o platformă. Comparația între cele mai folosite o găsești în articolul despre WordPress, Shopify și Wix.

Lecția 6: un formular de contact care chiar trimite

Aici e singura limită reală a unui site scris de mână: HTML-ul poate desena formularul, dar nu poate trimite emailul singur — pentru asta e nevoie de ceva care rulează pe server. Ai două soluții simple, ambele gratuite la volum mic.

<form action="https://formspree.io/f/CODUL-TAU" method="POST">
    <label for="nume">Numele tău</label>
    <input type="text" id="nume" name="nume" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="mesaj">Mesaj</label>
    <textarea id="mesaj" name="mesaj" rows="5" required></textarea>

    <button type="submit">Trimite</button>
</form>

Prima soluție e un serviciu extern de formulare (Formspree, Web3Forms, Getform): îți dă o adresă în care trimiți datele, iar el îți livrează mesajul pe email. A doua, dacă ai găzduire clasică cu PHP, e un mic script propriu de trimitere. Trei detalii de reținut:

  • Atributul required face validarea în browser, gratuit, fără JavaScript.
  • Eticheta <label> legată prin for nu e decor: mărește zona de clic și e obligatorie pentru accesibilitate.
  • Protecția anti-spam e necesară din prima zi. Cea mai simplă: un câmp ascuns pe care oamenii nu-l completează, iar roboții da.

Lecția 7: publicarea

Ai trei variante, în ordinea efortului:

GitHub Pages — gratuit, cu SSL

Îți faci cont, creezi un depozit public, urci fișierele prin interfața web (butonul Add file → Upload files), apoi din Settings → Pages alegi ramura principală. În câteva minute primești o adresă publică, cu certificat de securitate inclus. E ruta ideală pentru un site static.

Găzduire clasică — dacă vrei domeniul tău

Cumperi un domeniu și un pachet de găzduire, intri în panoul de administrare, deschizi managerul de fișiere și urci conținutul folderului în directorul public_html. Aceeași operațiune se poate face cu un client FTP precum FileZilla. Cum alegi numele înainte de cumpărare, pe larg în ghidul despre alegerea numelui de domeniu.

Servicii de tip „trage și lasă"

Netlify sau Cloudflare Pages acceptă folderul tău direct din browser și îl publică instant. Utile când vrei doar să arăți cuiva rezultatul.

Verificarea finală, în cinci minute

  • Deschide fiecare pagină și apasă pe toate linkurile — greșelile de nume de fișier sunt cel mai frecvent defect.
  • Verifică diacriticele. Dacă apar semne ciudate, lipsește charset="UTF-8" sau fișierul nu e salvat ca UTF-8.
  • Deschide panoul F12, fila Console: nu trebuie să existe erori roșii.
  • Redimensionează fereastra la lățimea unui telefon și citește pagina fără zoom.
  • Caută în cod cuvântul „Lorem" — șabloanele lasă mereu câte un rând.

Cum găsești erorile, fără să știi programare

Codul scris de mână greșește tăcut: nu apare niciun mesaj, doar pagina arată altfel decât te așteptai. Trei unelte rezolvă 90% din situații.

Panoul de dezvoltare (F12)

Fila Console îți arată erorile de fișiere lipsă — tipic, o cale greșită la imagine sau la foaia de stil. Fila Elements îți arată codul real al paginii și, când selectezi un element, exact ce reguli CSS i se aplică și de unde vin. Aici descoperi de ce un text e albastru deși tu l-ai făcut negru.

Validatorul oficial

Serviciul validator.w3.org îți verifică fișierul și îți spune ce etichete nu sunt închise sau sunt folosite greșit. O etichetă neînchisă poate strica întreaga jumătate de jos a paginii — și e cea mai frecventă cauză a aspectului „stricat" fără motiv aparent.

Metoda înjumătățirii

Când nu găsești problema, comentează jumătate din cod (<!-- ... -->). Dacă defectul dispare, e în jumătatea comentată; dacă rămâne, e în cealaltă. Repeți de trei-patru ori și ajungi la linia exactă. Simplu, dar funcționează de fiecare dată.

Șase greșeli care apar la fiecare început

  1. Nume de fișiere cu spații sau diacritice. despre noi.html se rupe în adrese; folosește despre-noi.html.
  2. Litere mari și mici amestecate. Pe serverul de Linux, Imagini/Poza.JPG și imagini/poza.jpg sunt fișiere diferite, chiar dacă pe Windows funcționau amândouă.
  3. Foaia de stil legată greșit. Dacă pagina apare „goală", verifică prima dată calea din <link>.
  4. Imagini nedimensionate. O fotografie de 4.000 de pixeli lățime, micșorată din CSS, se descarcă tot la mărimea originală.
  5. Textul lipit din Word. Aduce cu el ghilimele curbate și caractere invizibile care strică formatarea.
  6. Uitarea versiunii de mobil. Se testează la fiecare pagină, nu doar la prima.

Ce urmează, după primul site

Trei direcții firești, în funcție de ce te-a atras mai mult:

  1. Design. Învață Flexbox și Grid — două lecții care înlocuiesc jumătate din trucurile vechi de aranjare în pagină.
  2. Interactivitate. JavaScript pentru meniuri, galerii, formulare validate. Începe cu document.querySelector și evenimentul click.
  3. Administrare. Când ajungi la zeci de pagini, mută conținutul într-un sistem care le generează. Drumul complet, de la structură la publicare, e descris în ghidul pentru începători.

Întrebări frecvente

Am nevoie de un server ca să testez local?

Nu pentru HTML și CSS simple — dublu clic pe fișier e suficient. Ai nevoie de un server local (XAMPP, Live Server din VS Code) abia când folosești PHP sau când apeși de anumite funcții JavaScript blocate pe fișiere locale.

Se mai folosește HTML scris de mână în 2026?

Da, pentru pagini de campanie, documentații, site-uri statice foarte rapide și pentru orice caz în care viteza contează mai mult decât editarea din browser. Diferența e că astăzi se combină des cu generatoare de pagini statice.

Cât HTML trebuie să știu ca să mă descurc?

Aproximativ 15 etichete acoperă majoritatea situațiilor: titlurile, paragraful, lista, linkul, imaginea, tabelul, formularul și câteva containere. Restul se caută la nevoie.

Pot muta mai târziu site-ul scris de mână într-un CMS?

Da, și e mult mai simplu decât invers: textele tale sunt deja curate, fără cod străin. Practic, copiezi conținutul din fiecare pagină în editorul platformei alese.

Concluzie

Un site scris de mână nu e o competiție cu platformele moderne, ci fundația care te ajută să le folosești bine. După acest exercițiu vei ști exact ce înseamnă un titlu, o descriere, o imagine optimizată și o pagină care se încarcă instant — iar asta se vede în orice site vei construi de acum înainte, indiferent de unealta aleasă.