Choose your language!

---

|

Web programiranje → Kreiranje web sajta (osnove)

Kreiranje web sajta — HTML, CSS i JavaScript (osnove)

Lekcija 6 od 21

Web početna:
Povratak na vodič | Sledeća lekcija: Logo kreator — naslovna strana

Uvod

Pre nego što krenemo na backend tehnologije kao što su Django ili ASP.NET, važno je da razumemo kako se pravi vizuelni deo web sajta.

U ovoj sekciji naučićeš kako da napraviš svoju prvu web stranicu koristeći:

• HTML — struktura stranice
• CSS — izgled i stil
• JavaScript — interakcija

Ovo je osnova svakog web projekta — bez ovoga backend nema šta da prikaže korisniku.

Cilj ove sekcije:

Da napraviš kompletnu početnu stranicu (landing page) koju ćemo kasnije iskoristiti u Django aplikaciji.

Napomena:

U ovoj lekciji kroz praksu učimo osnove HTML-a. Kasnije ćemo dodavati i CSS i JavaScript.

Šta je HTML?

HTML (HyperText Markup Language) je jezik koji definiše strukturu web stranice.

Pomoću HTML-a određujemo:

• naslove
• pasuse
• slike
• linkove
• dugmad

Bez HTML-a ne postoji web stranica — to je njen kostur.

Šta je CSS?

CSS (Cascading Style Sheets) služi za stilizaciju stranice.

On određuje:

• boje
• fontove
• raspored elemenata
• animacije

Ako je HTML kostur, CSS je izgled i dizajn.

Šta je JavaScript?

JavaScript omogućava interakciju sa korisnikom.

Na primer:

• klik na dugme
• otvaranje menija
• validacija forme
• dinamičke promene sadržaja

JavaScript daje "život" stranici.

Tip:

U početku se fokusiraj na HTML i CSS. JavaScript dolazi prirodno kasnije.

Struktura projekta

Pre nego što krenemo sa kodiranjem, važno je da pravilno organizujemo fajlove.

projekt/
│
├── naslovna.html
├── css/
│   └── main.css
├── images/
│   ├── logo1.png
│   ├── logo2.png
│   └── pozadina.jpg

U ovom projektu:

• naslovna.html — glavna stranica
• css/main.css — stilovi
• images/ — slike i grafika

Važno:

Dobra organizacija fajlova je ključna za veće projekte i kasniji rad u framework-ovima kao što je Django.

Kreiranje sajta za kreiranje logo-a

Sajt treba da ima naslovnu stranu, koju mogu svi da vide, na kojoj se nalaze osnovne informacije o sajtu, opis koraka do izrade logo-a, stranu za logovanje i registraciju, Stranu sa izborom tipa logo-a, stranu za popunu informacija o naslovu logoa, logo editor, mogućnost čuvanja kreiranih logo-a, i deo za preuzimanje. Prvo ćemo kreirati naslovnu stranu pomoću HTML,CSS i javascript-a. Zatim ćemo to ugraditi u Đango aplikaciju.

Slika 1: Kreiranje naslovne strane web sajta "Logo Kreator"

---

Sledeći korak: stil i funkcionalnost

HTML definiše strukturu stranice, ali bez stilova stranica izgleda veoma jednostavno. Da bismo dobili moderan izgled i dodatne funkcionalnosti, koristimo CSS i gotove biblioteke.

Važno:

Za stilizaciju i raspored elemenata koristićemo Bootstrap 4 framework.

Bootstrap nam omogućava da brzo napravimo responzivan (prilagodljiv) dizajn bez pisanja velike količine CSS koda.

Pored toga, koristićemo i jQuery biblioteku koja omogućava lakšu manipulaciju elementima i interakciju na stranici.

Kako se dodaju biblioteke?

Biblioteke se ne preuzimaju ručno, već ih povezujemo putem interneta koristeći CDN.

• <link> tag — za CSS fajlove
• <script> tag — za JavaScript fajlove

Detaljnije objašnjenje i konkretan kod za povezivanje Bootstrap i jQuery biblioteka videćeš u sledećoj lekciji.

Za dodatno istraživanje možeš pogledati i sajt: w3schools.com