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.

Kreiranje naslovne strane web sajta
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