HTML & CSS - osnove

1.deo

Za sve koji su skroz početnici u Web Dev-u, danas ćemo praviti prvu web stranicu pomoću HTML-a i CSS-a. Uz to, dodaćemo i Bootstrap, tako da bi na kraju ovog tutorijala trebalo da imate mini-sajt od jedne poduže stranice.

S obzirom da se danas koristi dosta HTML i CSS biblioteka da se ubrza rad, a ne kuca se sve od početka, ja ću samo početak kucati da bih objasnio strukturu koda, ali većinski ću koristiti Bootstrap pa ćete tako i videti koliko brzo se može dobiti funkcionalna stranica.


1. Struktura koda

Elemente u HTMLu pišemo između <> zagrada i na početku uvek imamo 3 osnovna elementa: <html>, <head> i <body>. Svaki (skoro) element u HTMLu se zatvara: </ime_elementa> - npr. za ova 3 osnovna: </html>, </head> i </body>.

Kad kažem 3 osnovna elementa, mislim da ih morate imati u svakom .html fajlu i svaki fajl započinjemo na isti način: 

<!DOCTYPE html>
<html>
<head>
 // neki kod
</head>
<body>
 // neki kod
</body>
</html>


Ovo <!DOCTYPE html> na početku koda nije HTML element, već informacija pretraživaču koji tip dokumenta da očekuje.

- Head element

Unutar ovog elementa idu drugi HTML elementi koji označavaju linkove ka bibliotekama koje koristimo u fajlu, ime stranice, skripte koje možda koristimo, itd.

Primer nekog prosto-popunjenog head elementa: 

<head>
 <title>Naslov stranice</title>
 <link rel="stylesheet" href="assets/css/style.css">
 <script> // kod neke skripte </script>
</head>


Kao što sam spomenuo, skoro svi elementi se zatvaraju, pa ovde vidimo da se link element ne zatvara. Ime stranice je tekst koji vidimo u otvorenom tabu u pretraživaču. Dok čitate ovo, to je HTML & CSS - osnove.

- Body element

U ovaj element ide sav sadržaj stranice koji je vidljiv korisniku. Znači sve što trenutno vidite na stranici se nalazi u body elementu.


2. Pravljenje stranice

Za početak napravite folder pod kojim god imenom želite i unutra napravite novi fajl pod imenom index.html. Ovo je neki nepisani princip da se glavna strana sajta naziva ovako, ali može i npr. home.html, što je ređi slučaj.

Počećemo, inicijalizacijom repozitorijuma na gitu i pravljenjem istog na GitHubu. Redom izvršavamo komande:
git init
git add .
git commit -m "Intital commit"
Zatim idemo na GitHub i pravimo novi repozitorijum, pa zatim izvršavamo donji skup komandi kada napravimo repozitorijum:
git remote add origin link_ka_vasem_repozitorijumu
git branch -M master
git push -u origin master
Nakon toga, trebalo bi da vidite index.html u repozitorijumu na GitHubu.

U index.html fajlu, pišemo osnovu, kao što sam gore naveo. Za ovaj deo tutorijala, dodaćemo meni na vrh stranice, dodaćemo naslov, nekakav tekst, kao i dugme koje će nas voditi na neki drugi sajt. Za početak :)

Prvo osnova: 

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

U head element ćemo prvo dodati ime stranice, a u body ćemo dodati naslov. Naslovi u HTMLu su tagovi h1, h2, do h6, gde je h1 najvećeg fonta, a h6 najmanjeg.

<!DOCTYPE html>
<html>
<head>
 <title>Home page</title>
</head>
<body>
 <h1>Home</h1>
</body>
</html>

Dalje, dodaćemo nekakav tekst ispod ovog naslova. Umesto da smišljam šta da bude nekakav tekst, uzeću prozivoljan na Lorem ipsum. Tu možete generisati koliko želite teksta, pa ga samo prekopirajte.

Običan tekst, paragraf ide u p element HTMLa.

<!DOCTYPE html>
<html>
<head>
 <title>Home page</title>
</head>
<body>
 <h1>Home</h1>
 <p>Tekst</p>
</body>
</html>

Još da dodamo meni i dugme, pa da onda napravimo da ovo liči na nešto, s obzirom da je sad samo sve nabacano.

Za meni, biće nam potrebna Bootstrap biblioteka koju ćemo linkovati u head elementu. Linkove ka bibliotekama uzimamo na: Bootstrap CDN.

<!DOCTYPE html>
<html>
<head>
 <title>Home page</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
 <h1>Home</h1>
 <p>Tekst</p>
</body>
</html>

Link element ima rel i href opcije: rel opcija označava vezu između HTML stranice i dokumenta koji je linkovan. Ovde stavljamo stylesheet jer je ovo CSS biblioteka, koja određuje stil stranice. Svaki put kada koristimo CSS biblioteku, veza sa HTML stranicom je stylesheet. Deo href je zapravo putanja ka tom dokumentu koji koristimo.


Kada god koristimo Bootstrap, koristimo CSS biblioteku i Javascript biblioteku, tako da je potrebno i nju povezati, a da bi ona radila potrebna nam je i jQuery biblioteka. Uzimamo 3.x minified verziju. Više o njoj: jQuery.

Bitno: da bi Javascript Bootstrap biblioteka radila, potrebno je da jQuery bude linkovan pre JS biblioteke!

<!DOCTYPE html>
<html>
<head>
 <title>Home page</title>
 <link rel="stylesheet" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 <h1>Home</h1>
 <p>Tekst</p>
</body>
</html>

Opcija src je ista kao href, putanja do fajla koji koristimo.

Sada kada smo povezali Bootstrap, idemo na njihov sajt i bukvalno kopiramo koda za meni: ovde. Možete naći primere različitih menija, izaberete koji vam se najviše sviđa i bukvalno prekopirate kod u vaš body element. S obzirom da kada radite sa HTML kodom, pišete kao da slažete blok jedan na drugi, a mi hoćemo da nam meni bude na vrhu stranice, pa ćemo i kod za meni staviti odmah po otvaranju body elementa.

<!DOCTYPE html>
<html>
<head>
 <title>Home page</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>
 <h1>Home</h1>
 <p>
    Lorem ipsum tekst
 </p>
</body>
</html>

Stranica bi trebalo da vam izgleda ovako:



Kao što vidite, meni je tu, ali još uvek nije funkcionalan, a to i stilizovanje stranice ćemo odraditi u drugom delu.

Ostalo je još da sve ovo okačimo na GitHub.

Komande:
git add .
git commit -m "Dodat meni, naslov i tekst"
git push
će odraditi to što nam treba.

Ukoliko je bilo problema, možete skinuti kod sa mog GitHuba, ili me kontaktirati na Fejsbuku ili Instagramu.

Hvala što ste čitali, nadam se da je bilo korisno :)

Lazar Ristić