Dodavanje i stiliziranje novih elemenata
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">
<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>
<p>Ovo je tekst koji nije naslov.</p>
<p>Ovo je još jedan tekst ispod.</p>
</body>
</html>
Tag <p> je kratica za paragraph. Preko njega upisujemo normalan tekst koji želimo prikazati na stranici. Paragraph automatski stavlja tekst u novi red i dodaje CSS margin property sa kojime radi razmak iznad i ispod elementa, tako da tekst ne bude naguran jedan na drugi.
Kada spremimo kod, i osviježimo stranicu u web pregledniku, trebamo dobiti rezultat kao na slici ispod.
Ako paragraph nebi automatski stavljao razmak iznad i ispod elementa, izgledalo bi nam kao primjer na slici ispod.
Sada kada smo dodali dva paragraph-a, vrijeme je da ih uredimo.
Uređivanje sa CSS-om
Kao što smo već prije uredili h1 tag, vrijeme je da uredimo i p tagove. Staviti ćemo u svaki paragraph zelenu boju, fontove kao i h1 tag i veličinu fonta 16px. U svaki p tag stavljamo kod ispod.
style="color: green; font-size: 16px; font-family: Arial, Helvetica, sans-serif;"
Krajnji rezultat koda bi trebao izgledati kao kod ispod.
<!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>
<p style="color: green; font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Ovo je tekst koji nije naslov.</p>
<p style="color: green; font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Ovo je još jedan tekst ispod.</p>
</body>
</html>
Refactoring/refaktoriranje
Kada uđeš malo dublje u vode razvoja web stranica ili nekog programskog jezika, vidjeti ćeš da se spominje refactoring. No što je to? Kada imamo nekakav kod u programu ili skripti, koji se često ponavlja i trebamo ga koristiti na više dijelova negdje u kodu, izdvojimo taj kod i pohranimo ga na jednom mjestu od kuda ćemo koristiti taj dio koda u drugim djelovima koda gdje je to potrebno. Također kada dođe do promijene koda, ne moramo mjenjati na više dijelova, nego samo na jednom. Osim toga kod je kasnije pregledniji i lakše ga je pročitati.
U našem slučaju, ako želimo dodati još jedan paragraph ili header, moramo kopirati cijeli style atribut da bi imali jednake elemente. Ako stranica ima malo elemenata kao u našem primjeru, to nam nije nekakav problem. Ali ako imamo više elemenata, imali bi jako puno muke svugdje staviti novi dio koda. Negdje bi možda i zaboravili i nebi dobili željeni rezultat.
Kako ćemo onda napraviti refactoring u našem kodu?
U <head> tag možemo staviti naš CSS. Iznad samog <title> taga, staviti ćemo novi <style> tag i u njega naš CSS koji smo napisali u elemente, naravno ne smijemo ga zaboraviti zatvoriti sa </style>. <head> sada treba izgledati ovako.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
<title>Naziv stranice</title>
</head>
Prvi korak je gotov, sada je pitanje, kako ćemo staviti naš CSS u style tag? Kako će CSS prepoznati kakav stil treba staviti kojem elementu? Krenuti ćemo prvo od prvog elementa kojeg smo stavili u naš body tag, a to je h1 tag.
Unutar style taga ćemo staviti prvo dio koda pa ću onda objasniti čemu što služi.
<style>
h1 {
color: purple;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
Kada smo stavili novi dio koda u naš style tag, vrijeme je da objasnim kako smo došli do toga.
Unutar samog <style> taga stavljamo element ili tag koji hoćemo urediti. U ovom slučaju je to h1. U CSS-u ne stavljamo izlomljene zagrade. Nakon toga otvaramo vitičaste zagrade ili { i unutra stavimo sav naš kod koji smo stavili u <h1 style> atribut kao vrijednost. Svaki property se stavlja uvučen u istu liniju zajedno sa svojim value-m. Drugi property stavljamo u novi red, isto uvučen. Kada unesemo sve property-e za taj element, u idući red zatvaramo vitičastu zagradu ili }, ali ju ne uvlačimo, nego ju ostavljamo u ravnini sa h1 elementom.
Sada nam ostaje <p> element. Napravimo isto kao što smo napravili i za <h1> element. Stavimo ga u drugi novi red, maknemo izlomljene zagrade da dobijemo samo p. Nakon toga otvarimo vitičastu zagrad ili { i u novi red uvučeno stavimo prvi property sa njegovom value-om. Kada smo gotovim sa svim property-ima, u novi red u ravnini sa elementom p zatvaramo vitičastu zagradu ili }. <style> tag bi sada trebao izgledati kao kod ispod.
<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>
Idući korak je brisanje style atributa iz elemenata. Brišemo cijeli style atribut sa njegovim value-em tako da od
<h1 style="color: purple; font-size: 30px; font-family: Arial, Helvetica, sans-serif;">Hello World!</h1>
dobijemo <h1>Hello World!</h1>.
Idući na redu si paragraph-i. Ponovno brišemo cijeli style atribut i idući kod:
<p style="color: green; font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Ovo je tekst koji nije naslov.</p>
<p style="color: green; font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Ovo je još jedan tekst ispod.</p>
Pretvaramo u:
<p>Ovo je tekst koji nije naslov.</p>
<p>Ovo je još jedan tekst ispod.</p>
I to je to! Cijeli kod treba izgledati sada kao kod ispod.
<!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>
Sada je naš kod puno uredniji i možemo dodavati još elemenata i svi će izgledati jednako! Kada spremimo promijene i osviježimo stranicu, rezultat će biti isti.
Ukratko
- CSS možemo staviti u <style> tag unutar <head> taga.
- U CSS-u tagove pišemo bez izlomljenih zagrada - <h1> pretvaramo u h1.
- CSS unutar zagrada pišemo property/svojstvo sa value-om/vrijednosti - color: purple;
- Na kraju property-a/svojstva stavljamo :
- Na kraju value-a/vrijednosti stavljamo ;
- <style> tag moramo zatvoriti sa </style> - <style></style>
U idućem postu ćemo napraviti još jedan refactoring tako da imamo "best practice" HTML i CSS kod.
Primjedbe
Objavi komentar