Volite web dizajn?
Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.
Uvod u HTML5 i CSS3
Dobro došli u uvod o HTML5 i CSS3
U svijet izrade stranica na velika vrata ulaze nove tehnologije pa i novi standardi. Tako su se počeli razvijati HTML5 i CSS3.Danas ću Vam ukratko opisati HTML5.
Pa krenimo redom. HTML 5 je dobio nove elemente koji olakšavaju rad a konstruirani su logički. Izbačena je „kobasica“ doctype-a i skraćena pa umjesto nekadašnjeg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Ćemo pisati:
<!doctype html> |
I svaki moderan browser će znati da se tu radi o html dokumentu.Tu je još i deklaracija encoding type koja je takođe skraćena pa ćemo umjesto:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
pisati jednostavno:
<meta charset="UTF-8"> |
Tu je još i deklaracija za jezik koji koristimo pa ćemo pisati:
<html lang="hr"> |
Novi semantički elementi u HTML5 redom od vrha stranice su:
-header <header></header> -nav <nav></nav> -section <section></section> -article <article></article> -aside <aside></aside> -figure <figure></figure> -footer <footer></footer> |
Zbog Internet explorera i njegovog nepodržavanja html5 u starijim verzijama potrebno je na početku dokumenta bilo pomoću JavaScripta ili koristeći neki od templata koje ću kasnije navesti te elemnte deklarirati da budu block-level elementi.
Ovdje je primjer JavaScripta:
<script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('hgroup'); document.createElement('aside'); document.createElement('figure'); document.createElement('footer'); </script> |
Drugi način je korištenje boilerplate templata koji u sebi sadrže sve potrebno kako bi stranice izgledale konzistentno u svim browserima.
Jedna zanimljivost je u boilerplate kad u kodu pronađe da koristite npr IE6 ili 7 ponudi vam
Instalaciju google frame koja traje par sekundi i stranicu vam renderira normalno i bez potrebe za hackovima i ostalim trikovima.
Imate verziju s komentarima ili bez, zavisi odvašeg znanja.
Ovdje je link za boilerplate html5: http://html5boilerplate.com/
Evo toliko za sada nadam se da sam ovim člankomnekome pomogao, ako bude želje i potrebe nastavit ćemo dalje. Uživajte u otkrivanju ćari novih mogućnosti.
Slični sadržaj:
- Search box - HTML basic + Css styles (Slično)
- Login & register form - basic HTML + Css styles (Slično)
- Višestruki "span" u CSS-u (jedan jako zanimljivi logo) (Slično)
- Web stranica na više jezika - google translate - automatski online prevoditelj na vašoj web stranici (Slično)
- Web Design Toolbox (Srednje slično)
1 komentar
Trackbacks & Pingbacks
Ostavite komentar
Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.
Odlicno nek ide ovo dalje 😉 hvala!!!