Web savjeti (2) – Naučite HTML 5 na vrijeme

Ovo je drugi dio Web savjeta, logičan nastavak na prvi dio. U ovom dijelu savjetujem vam da naučite HTML 5 i da budete spremni kada on bude u upotrebi.

HTML 5 nije teško naučiti, treba se samo naviknuti na korištenje novih elemenata, što naučite za koji dan. No, uvijek je dobro biti spreman, pa krenimo.

Novi strukturni elementi

Trenutno vam je normalno da strukturirate sadržaj pomoću DIV elemenata kojima onda dajete klase i ID-e. Tako za header imate npr. <div id=”header”>. HTML 5 uvodi niz novih, semantičkih (iako bi se o ovome dalo još raspravljati) elemenata, koje ću vam sada predstaviti.

  • <header> Trebao bi se koristiti za bilo kakva zaglavlja, uključujući header dokumenta (logo, navigacija, pretraga).
  • <nav> Ovaj element treba koristiti za dijelove stranice sa navigacijskim linkovima. Obuhvaća glavnu navigaciju, te bilo koje druge linkove koji pomažu u navigaciji siteom (npr. breadcrumb).
  • <section> Ovo je element dosta sličan DIV-u. Koristi se za grupiranje dijela sadržaja na web stranici (npr. <section id=”related-content”>).
  • <aside> Ovaj element, iako tako djeluje na prvu, uopće nije namijenjen za sidebare, iako se može koristiti i za njih. On bi se trebao koristiti za bilo kakav dodatan sadržaj koji je povezan sa sadržajem koji okružuje.
  • <footer> Ovaj element koristi se footer stranice i podnožja članaka gdje se prikazuje tko je autor, tagovi članka, broj komentara, itd.

Video i audio

Video (<video>) i audio (<audio>) novi su elementi HTML-a koji omogućuju ubacivanje video i audio sadržaja bez posredovanja Flash playera. Mislim da ćemo podršku za njih najduže čekati jer se proizvođači browsera ne mogu dogovoriti oko standardnog formata koji će svi podržavati.

Spremni ste…

Eto, u ovom kratkom članku, koliko-toliko ste spremni za tehnologiju koje dolazi u slijedećih nekoliko godina. Naravno, sada znate elemente, a pravo korištenje tih elemenata shvatit ćete nakon što neko vrijeme provedete u novom HTML-u. Možda još uvijek ne možete takve siteove objaviti, ali probajte privatno, za sebe, prekodirati neki dizajn u HTML 5.

I da, još sam vam zaboravio spomenuti, DOCTYPE novog HTML-a jako je jednostavan i lako pamtljiv:

<!DOCTYPE html>

Uživajte…

Oglasi

Web savjeti (1) Naučite CSS 3 na vrijeme

Ovo je prvi od mnogih (nadam se) kratkih web savjeta. Web savjeti su kratki članci u kojima vam dajem – vjerovali ili ne – savjete o mnogobrojnim aspektima web dizajna i programiranja.

Naučite CSS 3 na vrijeme

CSS 3 kuca na vrata, a vi još niste spremni? Znate li da sve više i više browsera svakim danom podržava sve više i više novih mogućnosti. I stvarno se ne pripremate za to? Iako znate da stalno dolaze nove stvari? E pa danas će se to promijeniti. Danas ćete naučiti nekoliko CSS 3 svojstava, za početak.

Sjene

Ne morate više koristiti Photoshop da biste dobili najjednostavniji drop shadow. Za to možete upotrijebiti dva nova CSS property-a.

Box Shadow

Box Shadow primjenjuje se na sve block elemente. Njegovo korištenje veoma je jednostavno . Evo vam jedan jednostavan primjer:

.element{
    -moz-box-shadow: 5px 5px 7px #777; /* Za Gecko browsere */
    -webkit-box-shadow: 5px 5px 7px #777; /* Za Webkit browsere */
    box-shadow: 5px 5px 7px #777; /*  Kada CSS 3 postane standardan, 
                               koristit će se samo ovaj property. */
}

Ovo je rezultat upotrebe box-shadowa. Stavili smo sjenu na DIV element bez ikakve upotrebe Photoshopa, background slika, i ostalih gluposti. Najjednostavnije, kako je uvijek i trebalo biti. Zbog lakše uočljivosti efekta, dodao sam i sivu pozadinu.

Dakle, format za korištenje je box-shadow: x-offset y-offset zamućenje sjene #boja.

Text Shadow

Text Shadow efekt isti je kao i box shadow s razlikom da se ovaj primjenjuje na tekst. Osnovni primjer veoma je sličan.

.element{
    text-shadow: 3px 3px 4px #AF333A;
}

Ovo je tekst sa sjenom. Namjerno nisam stavio crnu običnu sjenu, da vidite da se mogu koristiti i druge boje. Ako probate selektirati ovaj tekst, vidjet ćete da je to obični tekst, a ne slika.

Možete kombinirati i više sjena, pa dobiti još zanimljivije efekte. Samo dodajte još jedan text-shadow i postavite ga drugačije od prvog.

Format za korištenje: text-shadow: x-offset y-offset zamućenje sjene #boja.

Zaobljeni rubovi

OK, znam da vas dosta zna za ovo, ali da ponovimo gradivo. Za zaobljene rubove uvijek se trebalo pomučiti. Photoshop, rezanje, puno DIVova, floatanje, itd. Naravno postojali su i drugi načini tipa da u Photoshopu izrežete zaobljeni vrh i dno DIV elementa, pa onda iznad tog DIVa imate div-header, a ispod imate div-footer ili nešto slično. OK, dosta prisjećanja starih vremena, vrijeme je za nove tehnologije.

.element{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ddd; /* Da se primjeti efekt */
}

I evo ga, zaobljeni rubovi, sa samo jednim malim komadićem teksta u CSS-u :)

Prozirnost

Za kraj, jedan od najjednostavnijih – prozirnost. Njime možete “narediti” nekom elementu koliko će biti proziran. Evo i jednostavnog primjera.

.element{
    background-color: #0000FF; /* Čista plava boja */
    opacity: 0.4;
}

Kao što vidite, postavljena je čista plava boja, ali kako je element poluproziran, boja više nije plava. Što je jednostavan dokaz da je element poluproziran.

Ovo nije sve

Dakako, ovo nije sve od CSS-a 3. Proučavajte mogućnosti i pripremajte se za dan kada će IE6 biti skroz zaboravljen, a Microsoft će izraditi browser koji podržava sve ove elemente.

NAPOMENA: Nažalost, svi browseri ne podržavaju prikaz ovih elemenata pa ako ništa ne vidite, nabavite si pristojan browser. :)

Osnove HTML-a

HTML (Hypertext Markup Language) je jezik koji stoji iza svake web stranice koju pogledate (pokušajte na nekoj stranici kliknuti desnom tipkom miša pa onda na “View Page Source” i vidjet ćete. HTML je jako jednostavan jezik za naučiti i možete ga, donekle, savladati i u vremenu od tjedan do dva. Naravno, nećete biti savršeni, ali znat ćete nešto.

Prije svega, trebate znati da HTML nije programski jezik, znači kad ga naučite ne možete reći da znate programirati, jer to nije programiranje. :) HTML je opisni jezik kojeg interpretira browser (preglednik). Sastoji se od ključnih riječi (tagova) i svaki tag ima svoje značenje.

Ja vam neću pokazivati HTML na lakši način, već odmah na ispravan način, sa DOCTYPEom i da je napisan po XHTML standardu.

Svaki dokument započinje sa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

To browseru govori da interpretira vaš HTML po XHTML standardu.

Osnovni dijelovi stranice nakon DOCTYPE-a su HTML, HEAD, BODY.

HTML je element u kojem se nalaze svi ostali elementi, HEAD je zaglavlje dokumenta, a BODY sadrži sve što će se prikazati u browseru.

Svaki element mora se zatvoriti. Znači ako imate <html> morate imati i </html>. Neki elementi se odmah zatvaraju, poput <br />.

U HEAD elementu nalaze se raznorazni podaci poput linkova na RSS feed, CSS datoteke, JavaScript dokumente i naziva stranice te metapodataka.

<head>
     <title>Naslov stranice</title>
     <meta http-equiv="Content-Type" 
           content="text/html;charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>

U ovom headu stranice nalazimo podatke o nazivu stranice i putanju do datoteke sa stilovima (styles.css) o kojima ću govoriti neki drugi put, a definirali smo i znakovni set (character set, ima li koji bolji prijevod?) UTF-8.

Nakon HEAD-a dolazi BODY. U njemu se nalazi kompletan sadržaj vaše stranice. Naslovi, slike, linkovi i sve ostalo što vidite na web stranicama.

<body>
    <h1>Neki naslov</h1>
    <p>Ovo je odlomak teksta koji također sadrži i <a href
="put/do/necega.html" title="Put do nečega">link</a>
       <img src="put/do/slike.png" alt="Tu smo umetnuli sliku" />
    </p>
</body>

Naslovi bi se trebali stavljati u tagove od <h1> do <h6> ovisno o važnosti. H1 su najvažniji naslovi, H2 su manje važni od H1, itd. Ova stranica u browseru prikazat će jedan naslov, odlomak teksta i sliku. Svi elementi imat će predefiniran izgled koji dodjeljuje browser, a kako definirati stilove pisat ću neki drugi put.

Na kraju, za pregled, kompletan kod današnje lekcije.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
     <title>Naslov stranice</title>
     <meta http-equiv="Content-Type" 
           content="text/html;charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
    <h1>Neki naslov</h1>
    <p>Ovo je odlomak teksta koji također sadrži i <a href
="put/do/necega.html" title="Put do nečega">link</a>
       <img src="put/do/slike.png" alt="Tu smo umetnuli sliku" />
    </p>
</body>
</html>

Nadam se da sam vam pomogao sa ovim postom i nadam se da ste sve razumjeli. :D