Sajt koji radi samo na tvom računaru niko drugi ne vidi. Statički sajt – HTML, CSS, JavaScript i slike, kao Logo kreator – može se besplatno objaviti za nekoliko minuta. U ovoj lekciji su provera pre objave, tri načina objavljivanja i povezivanje sopstvenog domena.
| Proveri | Kako |
|---|---|
početna strana se zove index.html | server prikazuje index.html kada se otvori samo adresa sajta – preimenuj naslovna.html i promeni linkove na nju |
| sve putanje su relativne i tačnih velikih/malih slova | images/logo1.png, ne C:\... i ne Images/Logo1.PNG |
svaka strana ima title i meta description | pogledaj head svake strane |
sve slike imaju alt i nisu prevelike | fotografije do ~300 KB; smanji ih npr. alatom Squoosh |
| HTML nema grešaka | W3C validator – učitaj fajl i ispravi prijavljene greške |
| radi na telefonu | F12 → režim uređaja; proveri meni i forme |
| ikonica sajta (favicon) | <link rel="icon" href="images/favicon.png"> – npr. tvoj logo 64×64 |
| nema ličnih podataka | ne objavljuj adresu, telefon ni fotografije drugih bez dozvole |
GitHub Pages objavljuje sajt direktno iz GitHub repozitorijuma. Uz to dobijaš i istoriju svih izmena (Git).
logo-kreator → Public → Create.main, folder / (root) → Save.https://korisnicko-ime.github.io/logo-kreator/.Kasnije izmene: ponovo Upload files (fajlovi istog imena se zamenjuju), ili rad sa Git-om iz VS Code-a (Source Control).
| Servis | Kako | Napomena |
|---|---|---|
| Netlify Drop | prevuci ceo folder sajta na stranu → dobiješ adresu odmah | najbrže; za trajni sajt napravi besplatan nalog |
| Render | New → Static Site → poveži GitHub repozitorijum | svaka izmena na GitHub-u se sama objavi; na Renderu radi i ovaj sajt |
| školski server / hosting | fajlovi se prenose programom za FTP (npr. FileZilla) | stariji način, i dalje čest |
Svi ovi servisi za statičke sajtove su besplatni i automatski uključuju HTTPS (lekcija Bezbednost).
Adresa ime.github.io ili ime.netlify.app je besplatna. Za adresu kao logokreator.rs domen se zakupljuje kod registra (oko 10–20 € godišnje), a zatim se u DNS-u domena doda zapis koji pokazuje na servis:
| Zapis | Primer | Za |
|---|---|---|
CNAME | www → korisnicko-ime.github.io | poddomen www |
A | @ → IP adrese koje daje servis | glavni domen bez www |
Kako DNS radi objašnjeno je u lekciji Kako radi internet. Svaki servis u podešavanjima (Custom domain) tačno navodi koje zapise treba dodati.
| Želiš… | Sledeći korak |
|---|---|
| da korisnici imaju naloge i čuvaju logotipe | backend i baza: Python za web (Flask, Django) ili ASP.NET Core |
| da forma zaista šalje poruke | backend ili gotov servis za forme |
| lepši i brži razvoj frontenda | biblioteke kao React ili Vue, posle dobrog znanja JavaScript-a |
| da te sajt nađu na Google-u | dobar title, description, naslovi i tekst; Google Search Console |
Čestitamo – završio/la si kurs HTML, CSS i JavaScript! Napravio/la si i objavio/la pravi sajt, a to je ono što svaki web programer radi.
Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.
Prođi kroz listu za proveru za Logo kreator (ili tvoj sajt), objavi ga na GitHub Pages ili Netlify-ju i pošalji adresu nastavniku ili drugu. Zamoli ih da sajt otvore na telefonu i kažu šta im nije jasno.
.../logo-kreator/), putanje koje počinju sa / ne rade – koristi relativne putanje.1. Kako treba da se zove početna strana sajta?
2. Zašto slika radi na Windows-u, a posle objave ne?
3. Koji DNS zapis povezuje www poddomen sa github.io adresom?