Uvod
- Što mi tu zapravo radimo?
Ono što upravo čitate je čisti HTML + CSS. HTML je jezik weba, koji osim čistog teksta, kao što mu i ime kaže (HyperText Markup Language), donosi sa sobom i tag-ove. Tag-ovi su obične riječi ili kombinacija slova kojećete prepoznati po tome što se nalaze unutar < i > Ono što tag-ovi rade jest govore našem web pregledniku (Chrome, IE, Firefox, Opera) kako treba interpretirati određeni dio teksta. O tome kasnije
CSS (Cascading Style Sheeets) nam služi da bismo elemente web stranice prikazali gdje mi želimo i kako mi želimo. CSS je zaslužan za zadebljanje ove rečenice. CSS je također zaslužan za to da je ovaj tekst baš ovdje, a ne na nekom nasumičnom mjestu na stranici.
- Što nam je potrebno da bismo pratili ovaj tečaj?
S obzirom na to da HTML i CSS funkcioniraju i bez posebnog namještanja radnog okruženja, za ovaj tečaj potrebno nam je samo:
- Internet preglednik (ne želim vidjeti IE verzije 8 i ispod)
- Notepad++
Zašto ne obični Notepad? Zato jer je Notepad++ napravljen u svrhu programiranja. Osim super korisne funkcije označavanja redaka, također automatski raspoznaje sintaksu jezika u kojem pišemo program te pisani kod oboji u boje na način da je lako raspoznati običan text od npr. tag-ova.
Zašto ne Dreamweaver? U ovom nam je tečaju cilj naučiti HTML i CSS. Dreamweaver pomaže u pisanju koda davanjem hintova itd. a mi to ne želimo!
Ako ste instalirali Notepad++, to je to, možemo krenuti!
Moj prvi HTML kod
Vrijeme je da se upoznamo sa osnovama. Pokrenite Notepad++ (ili neki drugi editor ukoliko niste u mogučnosti koristiti Notepad++) te u njega zalijepite ovaj tekst:
Links akcijska ponuda
TOSHIBA Satellite
Core i3 2330, DVDRW DL, 6GB, 640GB, GMA HD 3000, 15.6″ LED, LAN, kamera, Windows 7 Home Premium, bijelo
LENOVO G570A
Core i3 2330M, DVDRW, 4GB, 500GB, Radeon HD 6370M, 15.6″ LED, LAN, BT, HDMI, kamera, DOS, smeđi
HP 630
DualCore B950, DVDRW DL, 4GB, 500GB, GMA HD, 15.6″ LED, LAN, BT, kamera, HDMI, Windows7 Home Premium + torba
Odaberite Save As – Kao ime stavite index a filetype odaberite Hyper Text Markup Language (.html) te spremite u našu mapu bugtecaj (ako ju do sada niste napravili, ovo je trenutak da to učinite, svi želimo imati jednaku strukturu datoteka).
Ok, sada je vrijeme da pokrenemo našu prvu ‘stranicu’. Dvoklikom otvorite index.html Trebali biste vidjeti nešto poput ovoga:
Niste impresionirani izgledom vaše ‘stranice’ ?
Zašto nam stranica liči na hrpu teksta?
Zato jer ono što smo zalijepili u naš index.html i jest hrpa teksta. Mi našem internet pregledniku (u daljnjem tekstu – preglednik) nismo rekli kako želimo strukturirati našu stranicu. Ajmo to probat napraviti (tag-ovi nastupaju).
Očito želimo da naslov stranice bude Links akcijska ponuda, stoga ćemo oko toga staviti <h1> tagove. Ono što morate znati jest da u pravilu (ima izuzetaka, o tome kasnije), sve tag-ove koje otvorimo, moramo i zatvoriti. Razlika između tag-a otvaranja i zatvaranja jest u tome što tag zatvaranja iza < ima /
Dakle: <otvoriosamtag>primjer…</zatvoriosamtag>
Dakle, kao što smo rekli, naš naslov ćemo staviti u <h1></h1> tag, te bi to trebalo izgledati ovako:
<h1>Links akcijska ponuda</h1>
<h1> tag koristimo za glavni naslov stranice. Zapamtite da na jednoj stranici treba imati samo jedan <h1> tag (radi optimizacije za tražilice, koja nije tema ovdje ali dobro je spomenuti). Dakle u <h1> tagove stavljajte glavnu temu stranice.
Riješili smo naslov, idemo dalje. Sljedeči elementi na našoj stranici jesu imena laptopa koji su se našli na akciji. Njih ćemo smatrati podnaslovima, te ćemo ih smjestiti u <h2> tag. Primjetite kako broj pokraj slova h više nije jedan nego 2. To znači da nam je naslov koji stavljamo u taj tag drugi po važnosti na našoj stranici (ako se pitate, ispod <h6> ne ide).
Ok, nakon što smo dodali i <h2> tag-ove u našu stranicu, ona bi trebala izgledati ovako:
<h1>Links akcijska ponuda</h1>
<h2>TOSHIBA Satellite</h2>
Core i3 2330, DVDRW DL, 6GB, 640GB, GMA HD 3000, 15.6″ LED, LAN, kamera, Windows 7 Home Premium, bijelo
<h2>LENOVO G570A</h2>
Core i3 2330M, DVDRW, 4GB, 500GB, Radeon HD 6370M, 15.6″ LED, LAN, BT, HDMI, kamera, DOS, smeđi
<h2>HP 630</h2>
DualCore B950, DVDRW DL, 4GB, 500GB, GMA HD, 15.6″ LED, LAN, BT, kamera, HDMI, Windows7 Home Premium + torba
U redu, jedino što još nismo ‘omotali’ tag-ovima jesu specifikacije laptopa. Ne, za njih nećemo koristiti <h3> zato je to više ne smatramo naslovom već običnim tekstom. Tu se upoznajemo sa tag-om koji ćete u budučnosti jako često viđati i koristiti. To je naravno tag <p> (p označava paragraph). <p> koristimo kada želimo prikazati običan tekst u paragrafima (odlomcima). Zašto običan tekst omatamo tag-ovima postati će jasnije kada dođemo do CSS-a.
Na kraju krajeva, naš bi kod trebao izgledati ovako:
<h1>Links akcijska ponuda</h1>
<h2>TOSHIBA Satellite</h2>
<p>Core i3 2330, DVDRW DL, 6GB, 640GB, GMA HD 3000, 15.6″ LED, LAN, kamera, Windows 7 Home Premium, bijelo</p>
<h2>LENOVO G570A</h2>
<p>Core i3 2330M, DVDRW, 4GB, 500GB, Radeon HD 6370M, 15.6″ LED, LAN, BT, HDMI, kamera, DOS, smeđi</p>
<h2>HP 630</h2>
<p>DualCore B950, DVDRW DL, 4GB, 500GB, GMA HD, 15.6″ LED, LAN, BT, kamera, HDMI, Windows7 Home Premium + torba</p>
Spremite index.html i ponovo ga otvorite u pregledniku. Trebali biste vidjeti nešto slično ovome:
Ljepše, zar ne?
Jesmo li konačno napisali valjani kod za našu prvu stranicu?
Nismo. Ukoliko vam se stranica ispravno prikazala, imate sreću pa koristite preglednik koji je zanemario ogromnu ‘grešku’ koju smo napravili, odnosno ono što nismo napravili.
Propustili smo najosnovnije tag-ove koji su obavezni u svakom (ispravnom) html dokumentu.
Struktura svake stranice u nečemu je različita, no svim stranicama je zajednički jedan, osnovni kostur:
<html>
<head>
</head>
<body>
</body>
</html>
<html> tag govori našem pregledniku da je sadržaj ove stranice html kod. <head> tag ćemo više popuniti s vremenom, no u njemu pregledniku govorimo sve o našoj stranici.
<body> tag je u doslovnom prijevodu, tijelo naše web stranice, unutar <body> tag-a ćemo mi provesti najviše vremena u ovom tečaju jer se u njega smješta ono što se na stranici prikazuje.
Zato ubacite unutar <body> tag-ova ono što smo do sada napravili, da bismo dobili ovo:
<html>
<head>
</head>
<body>
<h1>Links akcijska ponuda</h1>
<h2>TOSHIBA Satellite</h2>
<p>Core i3 2330, DVDRW DL, 6GB, 640GB, GMA HD 3000, 15.6″ LED, LAN, kamera, Windows 7 Home Premium, bijelo</p>
<h2>LENOVO G570A</h2>
<p>Core i3 2330M, DVDRW, 4GB, 500GB, Radeon HD 6370M, 15.6″ LED, LAN, BT, HDMI, kamera, DOS, smeđi</p>
<h2>HP 630</h2>
<p>DualCore B950, DVDRW DL, 4GB, 500GB, GMA HD, 15.6″ LED, LAN, BT, kamera, HDMI, Windows7 Home Premium + torba</p>
</body>
</html>
Spremite i ponovo pokrenite index.html Ako vam do sada stranica nije ispravno radila, sada bi trebala izgledati točno kao na slici iznad.
Ovime završavamo za ovaj put, savjetujem da pokušate zapamtiti strukturu, ponavljajte par puta te zatim pokušajte bez gledanja napisati stranicu strukturom istu ovoj (sadržaj nije važan).
Moj prvi css kod
Zvali su me iz linksa i rekli da mi stranica ne izgleda lijepo te da odbija kupce. Stoga ćemo sada naučiti kako uljepšati naše stranice. Za to ćemo naravno koristiti CSS. Postoje dva načina za ‘ubacivanje’ css koda u stranicu.
- Pisanje css-a direktno u html datoteku
- Pisanje css koda u vanjsku .css datoteku koju zatim ‘pozovemo’ u našu html datoteku
Ukoliko koristimo ovaj prvi način, svoj css kod nećemo moći koristiti nigdje drugdje jer taj kod važi samo za tu datoteku u kojoj je napisan. No ukoliko css kod pišemo u zasebnoj vanjskoj datoteci, tu datotteku možemo pozivati po potrebi i koristiti u bezbroj stranica.
Ovisno o potrebi, koristiti ćemo oba načina, pa je red da oba i naučimo.
Krenuti ćemo naravno od prvog, jednostavnijeg načina.
U naš dosadašnji kod index.html datoteke dodajemo novi element, unutar <head> tag-ova. To je <style> element.
<html>
<head>
<style type=”text/css”>
</style>
</head>
<body>
(…)
</body>
</html>
Primjetili ste da unutar <style> tag-ova imamo još jedan dio koda (type=”text/css”). To se zove atribut, a on dodatno pojašnjava pregledniku kakav ga kod očekuje unutar tag-ova. Konkretno, naš atribut pregledniku kaže da stranicu stiliziramo putem css koda. (za sada ni ne postoji drugi način, ali programeri misle unaprijed :))
((…) <- ovo znači da nam taj kod nije trenutno vađžan, koristiti ću ga da skratim postove.)
Unutar <style> tag-ova dodajte sljedeči kod:
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
Spremite index.html i otvorite ga ponovo u pregledniku. Stranica već na nešto liči, zar ne?
Nećemo još u detalje objašnjavati kod, no zanima nas šta znači ovaj body ispred vitičastih zagrada.
body kaže pregledniku da se pravila odnose na svaki kod koji se nalazi unutar <body> tag-ova. Primjetite također da css kod okružujemo vitičastim zagradama.
Moj prvi link (moja prva poveznica)
Ok, sada kada smo malo proljepšali našu stranicu, moramo našim mušterijama dati informaciju za kontakt ukoliko netko bude zainteresiran za kupnju laptopa (da, znam da je ispravno reči prijenosnik (ili još gore, prijenosno računalo) :))
Stoga, napravite novu datoteku u editoru i u nju, po mogučnosti bez gledanja, upišite osnovnu strukturu tag-ova za koju smo napomenuli da je sadržana u svakoj stranici. To je naravno:
<html>
<head>
</head>
<body>
</body>
</head>
Unutar <body> tag-ova ćemo dodati osnovne informacije za kontakt:
<p>Telefon : ++385 (0)1 3096-944</p>
<p>Radno vrijeme : ponedjeljak – petak: 08:00 – 20:00</p>
<p>E-mail : prodaja@links.hr</p>
Spremite stranicu kao kontakt.html (sve je to naravno u mapi bugtecaj) te otvorite u pregledniku tek toliko da se uvjerimo da radi. S obzirom da ovoj stranici nije cilj zainteresirati posjetitelja za kupnju, nećemo ju još stilizirati.
Umjesto toga, moramo sadržaj te stranice nekako dostaviti posjetitelju.
To ćemo napraviti tako što ćemo unutar naše prve stranice ubaciti link (poveznicu) do naše kontakt.html stranice.
Dodajte u kod našeg index.html sljedeče:
<a href=”kontakt.html”>Naruči laptop</a>
Neka kod izgleda ovako:
<html>
<head>
<style type=”text/css”>
body {
background: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Links akcijska ponuda</h1>
<h2>TOSHIBA Satellite</h2>
<p>Core i3 2330, DVDRW DL, 6GB, 640GB, GMA HD 3000, 15.6″ LED, LAN, kamera, Windows 7 Home Premium, bijelo</p>
<h2>LENOVO G570A</h2>
<p>Core i3 2330M, DVDRW, 4GB, 500GB, Radeon HD 6370M, 15.6″ LED, LAN, BT, HDMI, kamera, DOS, smeđi</p>
<h2>HP 630</h2>
<p>DualCore B950, DVDRW DL, 4GB, 500GB, GMA HD, 15.6″ LED, LAN, BT, kamera, HDMI, Windows7 Home Premium + torba</p>
<p><a href=”kontakt.html”>Naruči laptop</a></p>
</body>
</html>
Spremite stranicu i osvježite preglednik. Trebali biste ispod liste laptopa na akciji ugledati ono što ste do sada već mnogo puta vidjeli na svim stranicama, a možda niste razmišljali o tome. To je poveznica ili link (slobodno kliknite).
Šta smo mi zapravo tu napravili?
<a> tag nam služi za povezivanje sadržaja. Može se koristiti za povezivanje strukture naše stranice (npr. naše povezivanje početne stranice sa stranicom kontakta), a također se može koristiti za povezivanje više drugih stranica, na primjer možemo linkati i google.hr
Unutar <a> tag-a ste primjetili još nešto, href=”kontkat.html”
To je također atribut (spomenuli smo to ranije kod >style> tag-a), ovaj atribut kaže pregledniku kamo da ‘ode’ nakon klika na link. Postoje dva načina na koji možemo pregledniku reči adresu koju povezujemo.
1.) Apsolutna putanja
2.) Relativna putanja
Apsolutna putanja kaže pregledniku točnu adresu stranice. Na primjer, u našoj mapi imamo index.html i kontakt.html
Apsolutna putanja: <a href=”C:/Users/Ante/Dropbox/bugtecaj/kontakt.html”>Naruči laptop</a>
Relativna putanja: <a href=”kontakt.html”>Naruči laptop</a>
Kada se koristi jedna a kada druga putanja?
Prvu, apsolutnu putanju koristimo kada datoteka na koju linkamo nije na našem serveru. Na primjer, kada želim posjetitelju linkati na stranicu Google.hr, koristiti ću apsolutnu putanju.
No u našem slučaju, sve su nam datoteke na istom ‘serveru’ (server je također obično računalo, nije važno što nismo ‘online’) pa možemo koristiti relativnu putanju.
Zašto nam je relativna putanja korisna?
To ću vam objasniti kroz primjer. Imam svoju stranicu na domeni bug.hr i kontak stranicu na bug.hr/kontakt.html No, Domagoj se naljuti na mene i oduzme mi domenu (prije toga mi je poslao sadržaj, nije tako bezobrazan :). Brže bolje stavim svoju stranicu na gub.hr/kontakt no nakon par minuta posjetitelji mi se žale da ne mogu pristupiti kontakt.html datoteci jer ih vodi na bug.hr domenu. Ja to naravno ne želim jer bezobrazni Domagoj dobiva moj promet, a i moja kontakt stranica nije u funkciji. Sada ručno moram prepraviti sve adrese da ne vode više na bug.hr bego na gub.hr a to mi uzima vremena. Sva sreća, radi se samo o jednom linku, zamislite da imam stotinu stranica.
Koja je poanta priče?
Ukoliko koristite apsolutno linkanje za povezivanje sadržaja na istom serveru, promjenom adrese vaše stranice linkovi prestaju funkcionirati. No što bi se desilo da sam koristio relativno povezivanje? Ništa, sve bi radilo gdje god da stavim svoju stranicu., jer je na svakom serveru struktura mojih stranica ista.
Stoga, za povezivanje na vanjske stranica koristimo apsolutne url-ove, a na stranice na istom serveru tj na istoj domeni, koristimo relativne url-ove.
Sad kad smo to utvrdili, proučimo još malo naš kod za link.
<a href=”kontakt.html”>Naruči laptop</a>
Primjetite riječi Naruči laptop. Otvorite stranicu na koju ste stavili naš link i pogledajte kako on izgleda. Vidite izraz Naruči laptop na koji možete kliknuti, dakle to je izraz koji vodi ka sadraju. Zaključak: Unutar <a> tag-ova stavljamo sadržaj koji će voditi ka sadržaju na koji linkamo. Ukoliko uz linkanje sadržaja posjetitelju želite pokazati i url na koji linkate, to biste napravili ovako:
<a href=”http://www.google.com”>http://www.google.com</a>
Moja prva slika
Vrijeme je da u našu stranicu ubacimo prvu sliku. To će, naravno, biti Links-ov logotip. Sliku možete preuzeti ovdje, te ju zatim spremite u svoj bugtecaj folder.
U Notepad++ otvorite index.html i ita <body> tag-a dodajte sljedeći kod:
<img src=”logo.gif”/>
Spremite stranicu i otvorite index.html u pregledniku. Primjetiti ćete da se pojavio links-ov logotip.
Ponovite postupak za kontakt.html!
No nešto nam je čudno. Slika se pojavila iako nismo zatvorili <img> tag, odnosno nigdje nismo postavili </img>. Je li to ispravno?
Odgovor je: Da, ispravno je. Neki tagovi ne zahtjevaju ‘closing tag’ odnosno tag zatvaranja.
Također primječujemo atribut src=”logo.gif”
Slično kao i href u <a> tag-u, src u <img> tag-u predstavlja putanju slike koju želimo ubaciti u našu stranicu. Oopet, kao i kod linkova, i slike se mogu pozivati apsolutnom i relativnom putanjom (već smo naučili razliku).
Na primjer, ukoliko smo logotip željeli pozvati dirktno sa links-ove sranice, bez da smo ga skidali na naš ‘server’, upotrijebili bismo apsolutnu putanju:
<img src=”http://www.links.hr/images/header/logo.gif”/>
Ok, imamo logotip. Ono što sada želimo jest da taj logotip vodi ka početnoj stranici. Vjerojatno ste već primjetili da na gotovo svim stranicama klikom na logotip idemo na početnu stranicu. To ćemo napaviti i mi na svojoj stranici.
Kako?
Rekli smo da unutar <a> tag-ova ide sadržaj za koji želimo da vodi ka putanji koju smo definirali u <a> tag-u. To znači da je naš zadatak jednostavan:
<a href=”index.html”><img src=”logo.gif”/></a>
Ako ste sve dobro napravili, sada se sa kontakt stranice na početnu možemo vratiti klikom na logotip.
Znači li to da bilo koji tag možemo staviti unutar <a> tag-a? Ne, postoje neka ograničenja, mi ćemo koristiti samo slike i tekst.
Izvor: bug.hr