Bug Tečaj u HTML/CSS-u

HTML 5 je još u razvoju tako da ga nečemo učiti. Razlika je u tome što HTML 5 pokušava uvesti bolju detekciju grešaka da bi olakšao posao programerima. Također dovodi neke funkcije koje do sada nisu bile podržane u html-u poput <video>, <audio> itd.

Uzmite u obzir da ovdje ima i totalnih početnika, koji nisu čuli za html a kamo li za html 5. Ukoliko dobro savladate html, jednom kada HTML 5 postane industrijski standard prelazak ne bi trebao biti pretežak.

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:

Lijepš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).

Do sljedečeg puta 

Koji crni Doctype kada još ne znamo niti sliku ubaciti :D To šta je on na vrhu stranice ne znači da je na listi prioriteta :) Idemo polagano, sve će doći na svoje. Mislim da nije vrijeme za doctype.

Evo,kako je netko predložio, ja sam i napravio..

Moj rad ( i napredak )se može u svakom trenutku vidjet na webu.

Trebalo mi je vremena da skužim.

Well played sir, well played indeed!

E da, ja sam još jedan učenik... :)
Koliko je neopravdanih dozvoljeno? 

Kod nas je to ukor i pozivanje roditelja na razgovor 

j 

možda za ostale polaznike jedan savjet u notepadu++ opciju encode in utf-8 uključit i time riješit slova : "đšžćč"

Ne brini, nastavak je večeras ;)

Bok prijavljujem se i ja na tecaj ali ja sam kompletni početnik znači neznam bas nista pa ajde onda malo detaljnije upute

Pišem ga as we speak :)

crackcood2 koji ti točno dio nije jasan, pokušavam to pisati iz perspektive neznalice, žao mi je ako ne uspijevam. Slobodno pitaj čim nešto nije jasno.

Da bi napravio svoj web portal, ne treba ti uopće znanje html-a ili css-a, dovoljan ti je Wordpress koji nemože biti jednostavniji. Ako te samo to zanima, odi na e-ucimo.com, napisao sam dosta detaljne tutoriale tamo na temu Wordpressa.

Ako ne želiš naučiti html + css onda si malo fulao temu :) Za napraviti svoj web portal bez korištenja tuđeg koda, trebat će ti znanje html-a + css-a, ali posšto želiš dodavati vijesti bez da svaki put radiš novu stranicu, trebat će ti i znanje php-a i mysql-a.

 Stvarno ne shvatam što ti nije jasno, @EXE je to poprilično dobro odradio, HTML kao markup je veoma lagan, nema puno neke logike kao kod programiranja u nakim drugim programskim jezicima, tipa C-a, C++ a, C# a, Jave,..., ovo je faktički formatiranje teksta kao u Wordu.

U Wordu si imao dugme B, ovdje pišeš <b>, tamo si imao drop-down listu fontova, ovdje pišeš: <font face="font">.

Detaljnije ne može, naprosto imaš nešto tagova, popamtiš ih i logički koristiš, pitaj slobodno što ti nije jasno.

Inače, ako baš hoćeš, evo ti, http://www.w3schools.com/html/default.asp, tu što naučiš budi siguran da je to tako, oni su, W3C, Bog i batina za HTML, oni propisuju standarde...

mene zanima dali se <head> stavlja samo u npr index.html ili i u svaku drugu stranicu koja je tkzvana "pod stranica"?

U svaku, on definira svaku stranicu za sebe.

Između ostaloga, u head se ubacuje <title> Naslov </title> skup tagova koji definiraju naslov (ne želiš da ti glavna stranica ima naslov "početna" pa samim time i sve "podstranice")

Prije početka jedna molba za sve koji ovo misle pratiti.

PIŠITE SVOJ KOD! Ne mojte samo copy-paste u editor jer to nema smisla. Kada se uči programiranje (u bilo kojem jeziku), važno je kod tipkati. Govorim iz osobnog iskustva a siguran sam da i mnogi programeri ovdje isto mogu potvrditi.

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. 

1. Pisanje css-a direktno u html datoteku
2. 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>

Tu ćemo stati, s linkovima nismo ni približno gotovi, no dosta mi je pisanja za danas. Do sljedečeg puta ;)