Nauči Web!

Postovi

Priprema za novu stranicu

ožujka 27, 2021

U ovom postu ćemo krenuti sa novom stranicom. Prije izrade svake stranice trebamo imati na umu kako će to izgledati i napraviti si raspored datoteka. Kako će naša stranica izgledati? Za početak ćemo napraviti jednostavnu landing/front page stranicu koja će imati u sebi navigaciju, nekakav video u pozadini, animirani tekst i na kraju logo i naziv stranice. U ovom slučaju, odlučio sam se da ćemo napraviti imaginarnu slastičarnicu imenom "Veliki Muffin". Logo će nam biti veliki muffin. Naravno, kao i svaka moderna web stranica i naša će biti responzivna. Struktura stranice Na našem računali napravit ćemo novu mapu sa nekakvim imenom, može se zvati i Veliki Muffin, nije bitno. Bitno je kako ćemo organizirati datoteke i mape unutar samog projekta. Plan je odvojiti HTML datoteke od CSS datoteka. Kako ćemo imati video i slike, napraviti ćemo odvojene mape u koje ćemo ih spremati. Struktura će izgledati onda ovako. Mapa Veliki Muffin će u sebi imati jedan index.html dokument i jedn

Pročitajte više

Još malo CSS refactoringa

ožujka 25, 2021

U prijašnjem postu smo napravili malo lijepši kod sa još dva paragraph elementa. U ovome postu ćemo prijašnji kod pretvoriti u još čišći kod. <!DOCTYPE html > <html lang = "hr" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <style> h1 { color : purple ; font-size : 30px ; font-family : Arial , Helvetica , sans-serif ; } p { color : green ; font-size : 16px ; font-family : Arial , Helvetica , sans-serif ; } </style> <title> Naziv stranice </title> </head> <body> <h1> Hello World! </h1> <p> Ovo je tekst koji nije naslov. </p> <p> Ovo je još jedan tekst ispod. </p> </body> </html> Kada gledamo naš kod, prvo što vidimo je da u oba elem

Pročitajte više

Dodavanje i stiliziranje novih elemenata

ožujka 25, 2021

U prijašnjem postu tek zagrebli površinu HTML-a sa CSS-om. U ovome idemo korak naprijed. Kako je bilo do sada, iskoristit ćemo prijašnji kod koji. <!DOCTYPE html > <html lang = "hr" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Naziv stranice </title> </head> <body> <h1 style = " color: purple; font-size: 30px; font-family: Arial, Helvetica, sans-serif; " > Hello World! </h1> </body> </html> Dodavanje novog HTML elementa Sada ćemo dodati još jedan element u body tag koji će ispisivati nekakav sadržaj. Nakon toga ćemo urediti oba elementa. Unutar body taga, ispod h1 elementa, dodati ćemo još jedan element, a to je: <p> Ovo je tekst koji nije naslov </p> . Sada bi kod trebao izgledati ovako: <!DOCTYPE html > <html lang = "hr" > <

Pročitajte više

Dodavanje CSS-a

ožujka 25, 2021

U prijašnjem postu, napravili smo našu prvu stranicu, no ona izgleda jako jednostavno i nema boja! U ovom postu ćemo dodati malo boja u našu prvu stranicu i malo ćemo ju urediti. Pa, počnimo! Prijašnji kod: <!DOCTYPE html > <html lang = "hr" > <head> <meta charset = "UTF-8" >  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Document </title> </head> <body> <h1> Hello World! </h1> </body> </html> Da bismo dodjelili stil nekom elementu, moramo mu staviti atribut style sa nekom vrijednosti. U ovom primjeru ćemo uediti malo prvo naslov ili h1 tag. Za početak ćemo promijeniti boju, font i veličinu. To ćemo napraviti tako da mu dodamo idući atribut sa vrijednosima style = " color: purple; font-size: 30px

Pročitajte više

Analiza HTML-a

ožujka 24, 2021

U prijašnjem postu smo napravili jednostavnu Hello World stranicu. No što je tamo što? To ću pokušati objasniti red po red u ovom postu. U prijašnjem postu smo napisali idući kod. <!DOCTYPE html > <html lang = "hr" > <head> <meta charset = "UTF-8" > <meta http-equiv = "X-UA-Compatible" content = "IE=edge" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Naziv stranice </title> </head> <body> <h1> Hello World! </h1> </body> </html> Idemo to sada objasniti liniju po liniju koda, da nam bude jasno. <!DOCTYPE html > Prva linija koda koju smo uopće napisali je bila upravo <!DOCTYPE html > . Ona se uvijek stavlja u prvi red koda. Zašto? Zato jer web preglednik kada dobije HTML datoteku za pročitati, on ju uvijek čita od gore prema dolje. A ova linija pokazuje web pregledni

Pročitajte više