Publica Site-ul!

Pana acum, ai creat pagini HTML pe calculatorul tau si le-ai deschis in browser de pe hard disk. Aceasta inseamna ca doar tu le poti vedea - nimeni altcineva din lume nu are acces la ele. Pentru ca site-ul tau sa fie vizibil pe internet, trebuie sa treci printr-un proces numit deploy (publicare).

Deploy inseamna a lua fisierele tale (HTML, CSS, imagini) si a le pune pe un server - un computer puternic care este mereu pornit si conectat la internet. Cand cineva scrie adresa site-ului tau in browser, browserul contacteaza serverul, care ii trimite fisierele, iar browserul le afiseaza pe ecran.

Gandeste-te la diferenta dintre un document Word salvat pe calculatorul tau si un document Google Docs partajat online. Documentul Word il vezi doar tu. Google Docs il poate vedea oricine caruia ii dai link-ul. La fel, o pagina HTML de pe calculatorul tau o vezi doar tu, dar o pagina publicata pe un server o poate vedea toata lumea.

Este important sa intelegi ca atunci cand deschizi un fisier HTML pe calculatorul tau, adresa din browser incepe cu file:/// - aceasta indica faptul ca fisierul este local. Cand site-ul este publicat pe internet, adresa incepe cu https:// - aceasta indica faptul ca fisierul este pe un server accesibil public. Aceasta diferenta mica in bara de adrese face o diferenta uriasa in ceea ce priveste accesibilitatea.

Procesul complet de la crearea site-ului pana la publicare arata astfel:

1. Scrii codul HTML si CSS pe calculatorul tau (local)
2. Testezi pagina in browser sa te asiguri ca arata bine
3. Alegi un serviciu de hosting (gazduire web)
4. Incarci fisierele pe serverul de hosting (deploy)
5. Site-ul primeste o adresa URL publica
6. Testezi site-ul live sa te asiguri ca totul functioneaza
7. Trimiti link-ul prietenilor si familiei
8. Oricine din lume poate accesa site-ul prin URL

In aceasta lectie vei invata fiecare pas al acestui proces si vei publica efectiv primul tau site web. Vei fi surprins cat de simplu este - cu instrumentele moderne, publicarea dureaza doar cateva minute!

Inainte de aparitia serviciilor moderne de hosting, publicarea unui site era un proces complicat: trebuia sa cumperi spatiu pe un server, sa configurezi manual protocoale de transfer (FTP), sa setezi drepturi de acces si sa rezolvi tot felul de probleme tehnice. Astazi, datorita platformelor precum Netlify si GitHub Pages, oricine poate publica un site web in cateva click-uri, complet gratuit.

Un server de hosting (server de gazduire) este un computer special care are trei caracteristici esentiale: este mereu pornit (24 de ore pe zi, 7 zile pe saptamana, 365 de zile pe an), este mereu conectat la internet cu o conexiune foarte rapida si are software special care stie sa trimita fisiere browserelor care le solicita.

Gandeste-te la un server de hosting ca la un magazin care nu se inchide niciodata. Clientii (vizitatorii) pot veni oricand, zi sau noapte, si magazinul (serverul) le ofera ceea ce cauta (fisierele HTML, CSS, imaginile). Daca magazinul ar fi inchis (serverul oprit), nimeni nu ar putea vedea site-ul tau.

Software-ul care ruleaza pe server si raspunde cererilor browserelor se numeste web server . Cele mai populare programe de web server sunt Apache si Nginx (se pronunta "engine-x"). Aceste programe "asculta" cererile venite de la browsere si trimit inapoi fisierele corecte. Nu trebuie sa le instalezi tu - serviciile de hosting au deja totul configurat.

Serverele de hosting sunt pastrate in locatii speciale numite centre de date (data centers). Acestea sunt cladiri securizate cu sisteme de racire, surse de energie de rezerva si conexiuni multiple la internet. Companii precum Google, Amazon si Microsoft au centre de date in toata lumea. Cand folosesti un serviciu de hosting, fisierele tale sunt stocate fizic pe un server intr-un astfel de centru de date.

Un centru de date mare poate consuma la fel de multa energie electrica ca un oras mic. De aceea, companiile tech investesc masiv in energie verde - Google, de exemplu, si-a propus sa functioneze 100% pe energie regenerabila. Racirea serverelor este una dintre cele mai mari provocari: mii de procesoare generate caldura enorma, iar fara sisteme de racire eficiente, serverele s-ar supraincalzi si s-ar defecta.

Exista mai multe tipuri de hosting:

• Hosting partajat (shared) - site-ul tau impartaseste un server cu alte sute de site-uri. Este cel mai ieftin (uneori gratuit), potrivit pentru site-uri mici.
• VPS (Virtual Private Server) - ai o "felie" dedicata din server. Mai scump, dar mai rapid si mai sigur.
• Hosting dedicat - ai un server intreg doar pentru tine. Foarte scump, folosit de site-uri mari cu milioane de vizitatori.
• Hosting static gratuit - pentru site-uri HTML/CSS simple (fara baze de date). Perfect pentru proiectele tale scolari!

Pentru proiectele tale de la scoala, vei folosi hosting static gratuit . Servicii precum GitHub Pages, Netlify sau OneCompiler ofera hosting gratuit pentru site-uri statice (adica site-uri formate doar din fisiere HTML, CSS si JavaScript, fara baze de date sau procesare server-side).

Un aspect interesant este ca serverele mari folosesc load balancing (echilibrarea incarcarii): cand un site are milioane de vizitatori simultani, cererile sunt distribuite intre mai multe servere pentru a preveni supraincarcarea. Site-uri precum YouTube sau Facebook au mii de servere care lucreaza impreuna. Pentru site-ul tau scolar, un singur server partajat este mai mult decat suficient.

Capacitatea unui server se masoara in bandwidth (latimea de banda) - cantitatea de date pe care o poate transfera intr-o luna. Serviciile gratuite ofera de obicei 100GB bandwidth pe luna, ceea ce este enorm pentru un site simplu. Un site HTML cu cateva imagini consuma poate 1-5MB per vizitator, deci poti avea zeci de mii de vizitatori lunar fara probleme.

Un domeniu (domain name) este adresa site-ului tau pe internet - echivalentul adresei postale din lumea reala. In loc sa memorezi o adresa IP precum "172.217.160.78" (adresa numerica a serverului), folosesti un nume usor de retinut precum google.com sau emag.ro .

Fiecare domeniu este unic in intreaga lume - nu pot exista doua site-uri cu acelasi domeniu. De aceea, cand o companie vrea un domeniu popular, il inregistreaza cat mai repede. Unii oameni cumpara domenii atractive in speranta de a le revinde la un pret mai mare - aceasta practica se numeste domain squatting si este controversata.

Structura completa a unui URL (Uniform Resource Locator) este:

https://www.magazin.com/produse/laptop.html
  |      |      |     |        |
  |      |      |     |        └── Calea catre fisier (path)
  |      |      |     └── Extensia domeniului (TLD)
  |      |      └── Numele domeniului
  |      └── Subdomeniu (www = World Wide Web)
  └── Protocol (https = securizat)

Extensia domeniului (numita si TLD - Top Level Domain) indica tipul sau tara site-ului. In prezent exista peste 1,500 de extensii TLD diferite, de la cele clasice la cele creative precum .pizza , .ninja sau .dev . Cele mai comune extensii sunt:

• .com - comercial (cel mai popular, folosit international)
• .ro - Romania (pentru site-uri romanesti)
• .org - organizatii non-profit
• .net - retele si servicii de internet
• .edu - institutii educationale (universitati)
• .gov - institutii guvernamentale
• .io - popular in industria tech/startup
• .dev - pentru dezvoltatori (necesita HTTPS obligatoriu)
• .me - popular pentru site-uri personale si portofolii
• .info - pentru site-uri informative

Un domeniu se cumpara (inchiriaza) de la un registrar de domenii - o companie autorizata sa vanda domenii. In Romania, domeniul .ro se administreaza prin ROTLD (Registrul Top Level Domain din Romania), care functioneaza sub autoritatea Institutului National de Cercetare-Dezvoltare in Informatica (ICI). Pretul unui domeniu .com este de obicei intre 10-15 dolari pe an, iar un domeniu .ro costa aproximativ 30-50 lei pe an. Registrari populare de domenii includ Namecheap , GoDaddy si Google Domains .

Pentru proiectele tale scolari, nu ai nevoie sa cumperi un domeniu! Serviciile gratuite de hosting iti ofera un subdomeniu gratuit. De exemplu, pe GitHub Pages, site-ul tau ar avea adresa numetau.github.io , iar pe Netlify ar fi ceva de genul numetau-site.netlify.app .

Un lucru important de stiut: un domeniu nu se "cumpara" definitiv - se inchiriaza pe perioade de 1-10 ani. Daca uiti sa il reinnoiesti, altcineva il poate cumpara. De aceea, companiile mari isi inregistreaza domeniile pe perioade lungi. De exemplu, Google a inregistrat google.com pana in anul 2028. Pentru tine, subdomeniile gratuite sunt perfecte - nu expira si nu costa nimic.

HTTP (HyperText Transfer Protocol) si HTTPS (HyperText Transfer Protocol Secure) sunt protocoalele pe care le foloseste browserul pentru a comunica cu serverul. Un protocol este un set de reguli - ca o limba comuna pe care o vorbesc browserul si serverul pentru a se intelege.

Diferenta dintre HTTP si HTTPS este securitatea . Cu HTTP, datele circula "in clar" - oricine le poate intercepta si citi (ca o carte postala pe care o poate citi factorul postal). Cu HTTPS, datele sunt criptate - chiar daca cineva le intercepteaza, nu le poate citi (ca o scrisoare sigilata intr-un plic securizat cu un lacat).

Criptarea HTTPS foloseste un sistem numit SSL/TLS (Secure Sockets Layer / Transport Layer Security). Functiona prin perechi de chei matematice: o cheie publica (pe care o vede toata lumea) si o cheie privata (pe care o are doar serverul). Datele criptate cu cheia publica pot fi decriptate doar cu cheia privata - un principiu elegant din criptografie.

Astazi, HTTPS este obligatoriu pentru orice site web serios. Browserele moderne (Chrome, Firefox, Edge) arata un lacat verde in bara de adrese pentru site-urile HTTPS si avertizeaza utilizatorii cand viziteaza un site HTTP nesecurizat. Google favorizeaza site-urile HTTPS in rezultatele cautarii, deci HTTPS ajuta si la SEO (optimizarea pentru motoare de cautare).

HTTPS este crucial mai ales pentru site-urile care colecteaza date personale: formulare de login, magazine online, banci. Fara HTTPS, un atacator conectat la aceeasi retea Wi-Fi publica (intr-o cafenea, de exemplu) ar putea vedea parolele si datele cardului tau. Cu HTTPS, tot ce vede atacatorul este un sir de caractere fara sens.

Cand accesezi un site web, se intampla urmatorii pasi (simplificat):

1. Scrii "www.exemplu.com" in browser si apesi Enter
2. Browserul cauta adresa IP a serverului (prin DNS)
3. Browserul trimite o cerere HTTP/HTTPS catre server
4. Serverul primeste cererea si gaseste fisierele cerute
5. Serverul trimite fisierele HTML, CSS, imagini inapoi
6. Browserul primeste fisierele si afiseaza pagina

Vestea buna este ca serviciile de hosting gratuite (GitHub Pages, Netlify) ofera HTTPS automat si gratuit . Nu trebuie sa faci nimic special - site-ul tau va fi securizat din start. In trecut, certificatele SSL (necesare pentru HTTPS) costau sute de dolari pe an, dar astazi sunt gratuite datorita proiectului Let's Encrypt .

Un detaliu practic: cand vezi in bara de adrese un lacat verde sau gri, poti da click pe el pentru a vedea detalii despre certificatul SSL al site-ului - cine l-a emis, cand expira, si ce nivel de criptare foloseste. Aceasta este o metoda buna de a verifica daca un site web este de incredere inainte de a introduce date personale sau parole.

DNS (Domain Name System) este sistemul care traduce numele de domeniu (precum google.com ) in adrese IP (precum 172.217.160.78 ). Computerele comunica intre ele folosind adrese IP (numere), dar oamenii prefera sa retina nume. DNS face legatura intre cele doua.

Gandeste-te la DNS ca la agenda telefonica a internetului. Cand vrei sa suni pe cineva, nu memorezi numarul de telefon - cauti numele persoanei in agenda si telefonul formeaza numarul automat. La fel, cand scrii "google.com" in browser, DNS-ul cauta adresa IP corespunzatoare si browserul se conecteaza automat la acel server.

Procesul DNS este foarte rapid (de obicei sub 100 milisecunde) si se intampla in fundal, fara sa observi. Browserul tau pastreaza si un cache DNS local - odata ce a tradus un domeniu, retine adresa IP pentru un timp, astfel incat nu trebuie sa faca traducerea de fiecare data.

Sistemul DNS functioneaza ierarhic , ca un arbore. Cand browserul nu cunoaste adresa IP a unui domeniu, intreaba mai intai serverul DNS al furnizorului tau de internet (RDS, Digi, Orange). Daca nici acesta nu stie, intreaba un server DNS "root" care il directioneaza catre serverul responsabil de extensia .com, .ro etc. Acest lant de intrebari se rezolva in milisecunde si asigura ca miliardele de domenii din lume pot fi gasite rapid.

Cand cumperi un domeniu si il conectezi la un server de hosting, trebuie sa configurezi DNS records (inregistrari DNS). Cele mai importante sunt:

• A record - leaga domeniul de o adresa IP (ex: exemplu.com -> 93.184.216.34)
• CNAME record - leaga un subdomeniu de alt domeniu (ex: www.exemplu.com -> exemplu.com)
• MX record - specifica serverul de email pentru domeniu (astfel functioneaza adresele de email personalizate precum contact@firma.ro)
• TXT record - contine informatii text diverse, folosite adesea pentru verificarea proprietatii domeniului

Nu te speria de aceste detalii tehnice - serviciile de hosting gratuite configureaza DNS-ul automat. Cand publici un site pe GitHub Pages sau Netlify, nu trebuie sa te atingi de setarile DNS. Totul se face automat in spatele scenei. Aceste cunostinte devin utile mai tarziu, cand vei vrea sa folosesti un domeniu personalizat cumparat separat.

Un experiment interesant pe care il poti face: deschide Command Prompt (cmd) pe Windows si scrie comanda nslookup google.com . Vei vedea adresa IP a serverului Google! Aceasta comanda interogheaza DNS-ul si iti arata traducerea numelor in adrese IP. Poti incerca si cu alte domenii precum facebook.com sau wikipedia.org pentru a vedea adresele lor IP reale.

Exista mai multe servicii care ofera hosting gratuit pentru site-uri statice (HTML, CSS, JavaScript). Acestea sunt perfecte pentru proiectele scolari, portofolii personale si site-uri simple. Iata cele mai populare:

1. GitHub Pages - cel mai popular pentru dezvoltatori. Creezi un cont GitHub (gratuit), incarci fisierele intr-un repository si activezi GitHub Pages. Site-ul tau primeste automat adresa numetau.github.io . Avantaje: integrat cu Git (controlul versiunilor), HTTPS automat, fiabil si rapid.

2. Netlify - foarte simplu de folosit. Poti chiar trage fisierele (drag and drop) direct in browser si site-ul e online! Adresa gratuita: numetau.netlify.app . Avantaje: deploy instant, HTTPS automat, suporta formulare de contact gratuite.

3. Vercel - similar cu Netlify, foarte rapid. Popular pentru proiecte React si Next.js, dar functioneaza excelent si pentru site-uri HTML/CSS simple. Adresa gratuita: numetau.vercel.app . Vercel este creat de aceeasi echipa care a dezvoltat Next.js, unul dintre cele mai populare framework-uri web din lume.

4. OneCompiler - platforme de tip "code playground" care permit si deploy. Sunt foarte simple de folosit: scrii codul direct in browser si apesi un buton pentru a-l publica. Ideal pentru primele proiecte si experimente rapide.

Cum sa alegi intre aceste servicii? Iata un ghid rapid:

• Esti incepator total? Alege OneCompiler - scrii codul direct in browser, fara sa instalezi nimic.
• Ai fisierele gata pe calculator? Alege Netlify - tragi folderul si gata, site-ul e online.
• Vrei sa inveti si Git? Alege GitHub Pages - inveti doua lucruri simultan.
• Vrei viteza maxima? Alege Vercel - are cele mai rapide servere CDN.

Comparatie servicii gratuite:
+------------------+-------------------+--------+
| Serviciu         | Adresa gratuita   | HTTPS  |
+------------------+-------------------+--------+
| GitHub Pages     | nume.github.io    |  Da    |
| Netlify          | nume.netlify.app  |  Da    |
| Vercel           | nume.vercel.app   |  Da    |
| OneCompiler      | link generat      |  Da    |
+------------------+-------------------+--------+

Pentru incepatori, recomandam sa incepi cu Netlify (drag and drop) sau OneCompiler (scrii codul direct in browser). Pe masura ce avansezi, GitHub Pages devine optiunea preferata deoarece inveti si Git in acelasi timp - o unealta esentiala pentru orice programator.

Toate aceste servicii gratuite au si limitari : nu suporta baze de date, nu pot rula cod server-side (PHP, Python, Node.js), si au o limita de spatiu (de obicei 1-10GB). Dar pentru site-uri HTML/CSS statice, aceste limitari nu conteaza deloc. Site-urile statice sunt de fapt mai rapide si mai sigure decat cele dinamice, deoarece serverul trimite direct fisierele fara sa proceseze nimic.

Un avantaj mai putin cunoscut al hosting-ului static gratuit este CDN-ul (Content Delivery Network). Servicii precum Netlify si Vercel distribuie automat fisierele tale pe servere din intreaga lume. Astfel, un vizitator din Tokyo acceseaza site-ul de pe un server din Asia, iar unul din Bucuresti de pe un server din Europa. Rezultatul? Site-ul se incarca rapid pentru toata lumea, indiferent de locatie.

Inainte de a publica site-ul, trebuie sa te asiguri ca fisierele sunt organizate corect . Serverul de hosting se asteapta la o structura anume, iar cea mai importanta regula este: pagina principala (homepage) trebuie sa se numeasca index.html .

De ce "index.html"? Cand cineva acceseaza adresa site-ului tau (de exemplu numetau.github.io ) fara sa specifice un fisier anume, serverul cauta automat un fisier numit index.html si il afiseaza. Daca numesti pagina principala altfel (de exemplu "pagina.html"), serverul nu o va gasi automat si vizitatorii vor vedea o eroare sau o lista a fisierelor din folder.

Aceasta conventie de numire vine din primele zile ale web-ului. Cuvantul "index" inseamna "cuprins" sau "registru" - pagina care serveste drept punct de intrare. Toate serverele web (Apache, Nginx) sunt configurate implicit sa caute index.html . Unele servere cauta si index.htm , default.html sau index.php , dar index.html este standardul universal pe care il accepta toate platformele.

Iata o structura de fisiere recomandata pentru un site web simplu:

site-ul-meu/
  |-- index.html          (pagina principala - OBLIGATORIU!)
  |-- despre.html         (pagina "Despre mine")
  |-- contact.html        (pagina de contact)
  |-- css/
  |     |-- stil.css      (stilurile CSS)
  |-- images/
  |     |-- logo.png      (imaginea logo)
  |     |-- poza1.jpg     (alte imagini)
  |-- js/
        |-- script.js     (cod JavaScript, optional)

Cateva reguli importante pentru numele fisierelor:

• Nu folosi spatii in numele fisierelor - foloseste cratima (-) sau underscore (_). "pagina mea.html" nu functioneaza bine pe servere; foloseste "pagina-mea.html".
• Foloseste litere mici - serverele Linux (folosite de majoritatea serviciilor de hosting) fac distinctie intre litere mari si mici. "Poza.jpg" si "poza.jpg" sunt fisiere diferite pe Linux!
• Evita diacriticele in numele fisierelor - "proiect-scoala.html" este mai sigur decat "proiect-scoala.html".
• Verifica caile - daca in HTML scrii src="images/poza.jpg" , asigura-te ca folderul se numeste exact "images" si fisierul exact "poza.jpg".

Un alt aspect important: caile catre fisiere trebuie sa fie relative , nu absolute. Scrie src="images/poza.jpg" (cale relativa), nu src="C:/Users/Elev/Desktop/site/images/poza.jpg" (cale absoluta de pe calculatorul tau). Calea absoluta functioneaza doar pe calculatorul tau - pe server, acea cale nu exista!

O greseala frecventa este sa ai caractere speciale in numele fisierelor. Evita spatiile, diacriticele (a, i, s, t), si simbolurile precum !, @, #. Unele servere web nu pot gestiona aceste caractere corect. Regula simpla: foloseste doar litere mici englezesti (a-z), cifre (0-9) si cratima (-). De exemplu: pagina-principala.html , stil-proiect.css , poza-echipa.jpg .

Inainte de a publica site-ul, parcurge aceasta lista de verificare (checklist) pentru a te asigura ca totul functioneaza perfect. Este ca o inspectie finala inainte de a trimite un proiect la scoala - verifici inca o data sa te asiguri ca nu ai greseli.

1. Testeaza in browser: deschide fiecare pagina HTML in browser si verifica: textul apare corect? Imaginile se incarca? Culorile si fonturile arata bine? Layout-ul nu este stricat? Sfat profesionist: testeaza in cel putin doua browsere diferite (de exemplu Chrome si Firefox), deoarece uneori apar mici diferente de afisare intre ele.

2. Verifica link-urile: click pe fiecare link din site si asigura-te ca duce unde trebuie. Link-urile catre alte pagini ale site-ului functioneaza? Link-urile externe (catre alte site-uri) sunt corecte? Un link "mort" (care duce la o pagina care nu exista) creeaza o impresie neprofesionala si frustreaza vizitatorii.

3. Verifica pe telefon: deschide Developer Tools (F12), activeaza Device Mode (iconita de telefon/tableta) si verifica cum arata site-ul pe un ecran mic. Textul este lizibil? Butoanele sunt suficient de mari pentru atingere? Imaginile nu sunt prea late? Peste 60% din traficul web global vine de pe dispozitive mobile, deci este esential ca site-ul tau sa arate bine pe telefon.

4. Verifica imaginile: toate imaginile se incarca? Dimensiunile sunt rezonabile? O imagine de 5MB va face pagina sa se incarce foarte lent. Redu dimensiunea imaginilor inainte de publicare - pentru web, o imagine de 100-300KB este de obicei suficienta. Poti folosi site-uri gratuite precum tinypng.com sau squoosh.app pentru a comprima imaginile fara sa pierzi vizibil din calitate.

5. Verifica caile fisierelor: asigura-te ca toate caile sunt relative (nu absolute). Cauta in codul HTML orice referinta la C:\ sau /Users/ - acestea sunt cai absolute care nu vor functiona pe server.

6. Valideaza HTML-ul: mergi pe validator.w3.org si introdu codul tau HTML. Validatorul iti va arata erorile (de exemplu, tag-uri neinchise sau atribute lipsa). Corecteaza erorile inainte de publicare.

7. Verifica accesibilitatea: asigura-te ca toate imaginile au atributul alt cu o descriere a continutului. Persoanele cu deficiente de vedere folosesc cititoare de ecran care citesc aceste descrieri. De asemenea, verifica ca textul are un contrast suficient fata de fundal - text gri deschis pe fundal alb este greu de citit pentru multi oameni.

Checklist final:
[x] Toate paginile se deschid corect in browser
[x] Toate link-urile functioneaza
[x] Site-ul arata bine pe telefon (responsive)
[x] Imaginile se incarca si nu sunt prea mari
[x] Caile fisierelor sunt relative, nu absolute
[x] HTML-ul este valid (fara erori de sintaxa)
[x] Textul nu contine greseli de scriere
[x] Tag-urile meta (title, description) sunt completate
[x] Favicon-ul este adaugat (iconita din tab)
[x] Atributele alt sunt prezente la toate imaginile

Hai sa parcurgem procesul concret de publicare a unui site web folosind Netlify (metoda drag-and-drop, cea mai simpla pentru incepatori). Vei vedea ca intregul proces dureaza sub 5 minute! Nu ai nevoie de cunostinte tehnice avansate - daca stii sa tragi un fisier din Explorer, stii sa publici un site web.

Pasul 1: Pregateste un folder pe calculator cu toate fisierele site-ului tau. Asigura-te ca pagina principala se numeste index.html . Folderul ar trebui sa contina doar fisierele site-ului - nu pune acolo si alte documente sau programe.

Pasul 2: Mergi pe netlify.com si creaza un cont gratuit (te poti inregistra cu contul de GitHub, Google sau email). Verificarea contului dureaza doar cateva secunde. Recomandam sa folosesti contul de Google pentru inregistrare - este cel mai rapid si nu trebuie sa memorezi inca o parola.

Pasul 3: Dupa logare, vei vedea un ecran cu textul "Want to deploy a new site without connecting to Git? Drag and drop your site output folder here". Trage folderul site-ului tau din Explorer direct pe aceasta zona.

Pasul 4: Asteapta cateva secunde. Netlify va incarca fisierele, le va procesa si va genera automat o adresa URL unica (de exemplu amazing-ptolemy-a1b2c3.netlify.app ). Poti schimba acest nume din setari in ceva mai memorabil - mergi la Site settings > Change site name si alege un nume care te reprezinta.

Pasul 5: Click pe link-ul generat si verifica site-ul tau live! Trimite link-ul prietenilor si familiei - acum oricine din lume il poate accesa. Poti chiar sa il deschizi pe telefon pentru a verifica cum arata pe un ecran mic - este un moment magic sa vezi munca ta accesibila de oriunde din lume!

Rezumat deploy pe Netlify:
1. Creezi cont pe netlify.com
2. Tragi folderul site-ului in zona de upload
3. Astepti 10-30 secunde
4. Primesti URL-ul site-ului tau live!
5. Trimiti link-ul oricui vrei

Dupa deploy, fisierele site-ului tau "locuiesc" pe serverele Netlify, care sunt distribuite in toata lumea (CDN - Content Delivery Network). Aceasta inseamna ca site-ul tau se va incarca rapid indiferent de unde il acceseaza cineva - din Romania, Japonia sau Brazilia. Serverele sunt mereu pornite, deci site-ul tau este disponibil 24/7.

Daca vrei sa actualizezi site-ul (sa modifici texte, sa adaugi pagini noi), faci modificarile local pe calculator, apoi tragi din nou folderul pe Netlify. Noul continut inlocuieste pe cel vechi in cateva secunde. Este la fel de simplu ca prima publicare!

Un avantaj mare al Netlify este functia de deploy preview : inainte ca actualizarea sa fie vizibila publicului, poti vedea o versiune de test. Astfel, daca ai facut o greseala, poti corecta inainte ca vizitatorii sa o vada. Netlify pastreaza si un istoric al versiunilor , deci poti reveni oricand la o versiune anterioara a site-ului daca ceva nu merge bine.

Cand partajezi link-ul site-ului tau pe retele sociale sau in mesaje, platformele afiseaza automat o previzualizare (titlu, descriere, imagine). Aceasta previzualizare este generata din tag-urile <meta> Open Graph pe care le adaugi in sectiunea <head> a paginii. Fara aceste tag-uri, link-ul va arata bland si fara imagine.

Felicitari! Acum stii cum functioneaza publicarea unui site web pe internet. Ai invatat despre servere, domenii, DNS, protocoale si ai parcurs procesul concret de deploy. Aceasta lectie incheie modulul de HTML si CSS - acum ai toate cunostintele necesare pentru a crea si publica site-uri web!

Sa recapitulam drumul parcurs in acest modul: in Lectia 1 ai invatat structura HTML, in Lectia 2 ai descoperit tag-urile si elementele, in Lectia 3 ai adaugat imagini si link-uri, in Lectia 4 ai stilizat cu CSS, in Lectia 5 ai creat layout-uri cu Flexbox, iar acum, in Lectia 6, ai publicat totul pe internet. Ai parcurs intregul ciclu de viata al unui site web - de la prima linie de cod pana la publicarea online.

Pe masura ce avansezi in dezvoltarea web, vei descoperi instrumente si platforme tot mai puternice. Iata cateva directii de explorare pentru viitor:

• GitHub Pages - invata sa folosesti Git si GitHub. Este standardul in industria IT pentru controlul versiunilor codului. Site-ul tau va fi gazduit gratuit la numetau.github.io .
• JavaScript - dupa HTML si CSS, urmatorul pas este sa inveti JavaScript pentru a adauga interactivitate paginilor tale (animatii, formulare dinamice, jocuri).
• Responsive Design - aprofundeaza tehnicile de design responsiv (media queries) pentru ca site-ul sa arate perfect pe orice dispozitiv.
• Framework-uri CSS - exploreaza Bootstrap sau Tailwind CSS, care ofera componente gata facute (butoane, carduri, meniuri) pentru a crea site-uri mai rapid.
• React sau Vue.js - framework-uri JavaScript moderne folosite de companii mari (Facebook, Netflix, Airbnb) pentru a crea aplicatii web complexe si interactive.

Un portofoliu online este unul dintre cele mai valoroase lucruri pe care le poti crea ca elev. Publica proiectele tale pe GitHub Pages sau Netlify si adauga link-ul in CV. Angajatorii din IT apreciaza enorm candidatii care au un portofoliu vizibil online - demonstreaza ca stii sa faci, nu doar sa vorbesti despre ce stii.

Chiar si la varsta ta, un portofoliu online te poate diferentia. Imagineaza-ti ca aplici la un liceu de informatica sau la un concurs de programare - un link catre proiectele tale publicate arata mai mult decat orice descriere pe hartie. Portofoliul creste odata cu tine: adaugi proiecte noi, le imbunatatiesti pe cele vechi, si in cativa ani vei avea o colectie impresionanta care demonstreaza evolutia ta ca dezvoltator.

Retine: fiecare site web din lume, de la cele mai simple bloguri personale pana la cele mai complexe platforme precum YouTube sau Netflix, a inceput cu acelasi fundament pe care l-ai invatat in aceste 6 lectii: structura HTML, stilizare CSS si publicare pe un server. Diferenta este doar in cantitatea de cod si in tehnologiile suplimentare adaugate deasupra acestui fundament.

Industria IT din Romania este in plina expansiune si are nevoie de specialisti in dezvoltare web. Companiile romanesti precum UiPath, Bitdefender si eMAG au echipe mari de dezvoltatori web. Cunostintele pe care le-ai dobandit in acest modul sunt primii pasi catre o cariera in acest domeniu fascinant si bine remunerat.

Cel mai important sfat: practica face perfectiunea . Creeaza cat mai multe proiecte mici: o pagina despre hobby-ul tau, un CV online, o pagina pentru animalul tau de companie, un site pentru echipa ta de fotbal. Cu fiecare proiect vei invata lucruri noi si vei deveni mai bun. Nu astepta sa stii "totul" inainte de a incepe - inveti cel mai bine facand!

Un lucru care merita mentionat este SEO (Search Engine Optimization) - optimizarea site-ului pentru motoarele de cautare. Daca vrei ca lumea sa gaseasca site-ul tau pe Google, trebuie sa ai titluri clare, descrieri meta relevante, continut de calitate si o structura HTML corecta. Google analizeaza miliarde de pagini web si le ordoneaza dupa relevanta. Un site bine structurat cu HTML semantic are sanse mai mari sa apara in primele rezultate.

In final, gandeste-te la intretinerea site-ului tau. Un site publicat nu este "gata pentru totdeauna" - trebuie actualizat periodic cu informatii noi, verificat daca link-urile externe inca functioneaza si testat pe browserele noi. Dezvoltarea web este un proces continuu, iar cele mai bune site-uri sunt cele care evolueaza constant. Aceasta este frumusetea web-ului: oricand poti imbunatati, adauga si transforma site-ul tau!