01 Gradi u VS Code-u
HTML opisuje strukturu, a ne programsku logiku
HTML je markup jezik, a ne programski jezik. Opisuje šta sadržaj jeste: naslov, pasus, link, slika ili sekcija. Pregledač čita tu strukturu i prikazuje dokument.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project Hub</title>
</head>
<body>
<h1>My Project Hub</h1>
<p>Welcome to my project dashboard.</p>
</body>
</html>
Dokument počinje sa <!DOCTYPE html>, zatim ima jedan html element koji sadrži head i body. head čuva informacije o dokumentu, kao što su naslov i kodiranje znakova; vidljiv sadržaj pripada delu body.
Element obično ima otvarajući tag, sadržaj i zatvarajući tag: <h1>My Project Hub</h1>. Atributi dodaju informacije, kao lang="en" ili id="projects". Za srpski sadržaj koristi lang="sr".
↳Počni lokalno: Sačuvaj ovo kao index.html u folderu my-project-hub i otvori direktno u pregledaču. Django još nije potreban.
Anatomija HTML elementa<h1>My Project Hub</h1>
└─ opening tag └─ content └─ closing tag
Tagovi označavaju element; sadržaj mu daje značenje. Neki elementi, kao img, koriste atribute i ne obuhvataju tekstualni sadržaj.
Struktura HTML dokumentahtml
├── head
│ ├── meta
│ └── title
└── body
├── header + nav
├── main + section
└── footer
Koristi semantičke elemente kao što su header, nav, main, section i footer kada njihov opis sadržaja ima više smisla od generičkog div elementa.
Kod → pregledačindex.html → browser reads HTML → visible page
DevTools Elements ti omogućava da pregledaš prikazani HTML. Privremena izmena tamo ne menja automatski sačuvani fajl index.html.
Linkovi i slike<a href="#projects">View projects</a>
<section id="projects">...</section>
<img src="project-board.png" alt="Project board with three cards">
Link sa fragmentom koristi href="#projects" da pronađe element sa id="projects". Slici je potreban src; njen alt opisuje važnu informaciju, dok dekorativna slika može imati prazan alt.
Gradi imajući strukturu na umu
- Izaberi naslove prema hijerarhijiKoristi jedan
h1 za temu stranice, zatim h2 i h3 za podsekcije. Ne biraj naslove samo zbog njihove vizuelne veličine.
- Koristi liste za povezane stavkeKoristi
ul za neuređenu listu projekata, ol kada je redosled važan i li za svaku stavku.
- Dodaj smislenu navigacijuPoveži Home, About i Projects linkovima sa fragmentima na ovoj jednoj stranici. Spoljni linkovi koriste kompletan URL.
- Daj prednost značenju u odnosu na generičke kontejnereSemantički HTML pomaže čitaocima, asistivnim tehnologijama i budućim programerima da razumeju tvoju stranicu.
Česte greške na prvoj stranici
- Naslov je samo veliki tekstNaslovi pokazuju strukturu dokumenta, a ne samo vizuelnu veličinu.
- DevTools čuva moj fajlDevTools je odličan za pregled, ali izmene sačuvaj u VS Code-u da bi promenio izvorni fajl.
02 Otvori u pregledaču
Vođena vežba — gradi korak po korak
Napravi jedan fajl <code>index.html</code> u <code>my-project-hub</code>. Sam napravi svaki mali korak; nemoj odjednom nalepiti gotovu stranicu.
Tvoja prva lokalna veb stranicamy-project-hub/
└── index.html
Otvori folder my-project-hub u VS Code-u. Potrebni su ti samo index.html, pregledač i sačuvane izmene — bez paketa, Python servera, Django-a ili VS Code ekstenzije.
Otvori svoju HTML stranicu
Za prvi pokušaj koristi direktno otvaranje fajla. Live Server je opcioni i samo olakšava ponovljene provere u pregledaču.
Preporučeno za prvi pokušaj
Otvori HTML direktno
- U VS Code-u napravi folder
my-project-hub, a u njemu fajl index.html. - Sačuvaj
index.html, zatim otvori my-project-hub u Finderu (macOS) ili File Exploreru (Windows). - Dvaput klikni na
index.html. Trebalo bi da se otvori u podrazumevanom pregledaču; ako se ne otvori, koristi Open With / Otvori pomoću i izaberi pregledač. - Nakon svake izmene koda sačuvaj pomoću Ctrl+S (Windows/Linux) ili Cmd+S (macOS), zatim osveži pregledač.
Lokalna adresa fajla kao što je file:///.../my-project-hub/index.html je normalna. Za ovaj način nisu potrebni Django, Python server ni VS Code ekstenzija.
Opcioni alat za razvoj
Otvori pomoću Live Server-a
- U VS Code-u otvori Extensions, potraži
Live Server i izaberi ekstenziju autora Ritwick Dey. Instaliraj ekstenzije samo iz izvora kojima veruješ i proveri autora. - Otvori
index.html, zatim iz kontekstnog menija izaberi Open with Live Server ili Go Live ako je dostupan. - Pregledač će otvoriti lokalnu adresu, često sličnu
http://127.0.0.1:5500/index.html. Port može biti drugačiji. - Sačuvaj izmenu u VS Code-u i proveri da li se pregledač automatski osvežava.
Live Server nije Django razvojni server i nije obavezan za ovu lekciju. To je praktičan lokalni pregled za jednostavne HTML, CSS i JavaScript fajlove; u kasnijim Django lekcijama koristićemo Django razvojni server.
Sedam malih koraka izgradnje
- Napravi dokumentU
my-project-hub napravi i otvori index.html. Zameni prazan fajl ovim kompletnim početnim HTML5 dokumentom, zatim postavi ispravnu vrednost atributa lang i sačuvaj ga.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project Hub</title>
</head>
<body>
<h1>My Project Hub</h1>
<p>Welcome to my project dashboard.</p>
</body>
</html>
- Dodaj odeljke straniceZadrži postojeće
html, head i body elemente. U index.html dodaj ovaj main element unutar body, ispod postojećeg naslova i uvoda. Sačuvaj, osveži i potvrdi da se About i Projects pojavljuju ispod uvoda.<main>
<section id="about"><h2>About</h2></section>
<section id="projects"><h2>Projects</h2></section>
</main>
- Navedi tri projektaZadrži postojeći dokument i odeljke. Unutar
<section id="projects">, ispod njegovog h2, dodaj ovu listu. Sačuvaj i osveži; trebalo bi da vidiš tri naziva projekta u listi sa oznakama.<ul>
<li>Reading tracker</li>
<li>Study planner</li>
<li>Project board</li>
</ul>
- Poveži navigacijuZadrži postojeći
main i odeljke. Pri vrhu body, iznad main, dodaj ovu navigaciju. Nemoj duplirati ciljne odeljke. Sačuvaj, osveži i potvrdi da svaki link prelazi na odgovarajući odeljak.<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
</nav>
- Dodaj opcionu slikuOvaj korak je opcioni. Ako
project-board.png postoji u istom folderu kao index.html, dodaj ovu sliku ispod liste projekata. Ako je smestiš u folder images, koristi src="images/project-board.png". Ako nemaš sliku, preskoči ovaj korak i nastavi. Sačuvaj i osveži; ako se slika ne prikaže, proveri naziv fajla, ekstenziju i putanju.<img src="project-board.png" alt="Project board with three cards">
- Koristi semantičke orijentireZadrži svaki element koji si napisao; nemoj praviti drugi
nav ili main. Organizuj postojeći naslov i navigaciju unutar header, zadrži odeljke unutar main i dodaj mali footer nakon main. Sačuvaj i osveži da potvrdiš da stranica i dalje prikazuje isti sadržaj. - Pregledaj i osvežiKoristi jedan od gore navedenih načina da otvoriš sačuvani fajl
index.html u pregledaču. Testiraj linkove, pregledaj Elements u DevTools-u, promeni jednu liniju u VS Code-u, sačuvaj pomoću Ctrl+S ili Cmd+S i osveži ako je potrebno. Izmene u DevTools-u su privremene; samo sačuvane izmene u index.html menjaju tvoj izvorni fajl.
↳Provera u pregledaču: index.html → prikazuju se naslovi, lista, linkovi i odeljci Ako je stranica prazna ili link ne prelazi na odeljak, prvo proveri zatvorene tagove, odgovarajuće id vrednosti i da li je fajl sačuvan.
Kada stranica ne izgleda kako treba
- Link sa fragmentom ne prelazi na odeljakProveri da li se <code>href="#projects"</code> tačno podudara sa <code>id="projects"</code>.
- Slika se ne prikazujeProveri naziv fajla i relativnu putanju. Neka tekst <code>alt</code> ostane koristan i dok popravljaš sliku.
- Pregledač prikazuje stari sadržajSačuvaj <code>index.html</code> u VS Code-u, zatim osveži pregledač.
↳Sledeće ćeš učiti CSS i alate pregledača koji mogu unaprediti izgled ove strukturisane stranice.
