NAZIV OBJEKTA ZNANJA
Postavljanje HTML5 stranice
PROLOG
Autor *
Katarina Kaplarski
Klasifikacija *
IM-lD-PVA-PostavljenjeHTMLStranice
Težina *
Osnovni nivo
Ključne reči *
html5, veb dizajn, html5 semantika
Ko sluša *
Student OAS
Trajanje *
30min
Komentari autora
SADRŽAJ
Apstrakt
Kako izgleda sadašnja semantika HTMLa i kako izgleda nova semantika HTML5
Cilj *
Studenti uče kako zamene semantiku koju su koristili do sada sa semantikom HTML5
Uvodne napomene
Uz ovu lekciju ide referentni html primer
---> media file
http://ad420.metropolitan.ac.rs/wp-content/uploads/2013/10/IM-lD-PVA-referenca1.zip
media file <--
Naziv sekcije (1)
Postavljanje HTML5 stranice
Sadržaj sekcije (1)

Razumevanje aktuelne strukture stranice
Većina veb sajtova je dizajnirana po standardnom obrascu:
-
Header sekcija sa logotipom i navigacijom (menijem)
-
Ispod headera je sadržaj koji je obično podeljen u dve ili tri kolumne
-
Na dnu stranice je footer koji sadži informacije o autorskim pravima – copyright i kontakt
Pre HTML5 <body> sekcija tipične stranice je izgledala ovako
U zavisnosti od stila stranice (CSS) , ova stranica bi mogla da izgleda ovako

Rad sa novom HTML semantikom
HTML5 ima šest novih semantičkih tagova:
<section>
<header>
<nav>
<article>
<footer>
Dodatno postoji još jedan semantički tag koji je manje strukturalan <time>
Svi tagovi rade zajedno, možete imati jedan ili više <article> tagova unutar <section>, među kojima svaki ima
<header> i <footer> tag

Definisanje sekcija
Tag <section> služi da grupiše povezani sadržaj. Ako radite na knjigama, poglavlje bi bila sekcija, Veb stranica
može da ima nekoliko sekcija kao što su uvod, vesti, specijalne najave.
U ranije prikazanom primeru koda <section> tag bi zamenio <div> tag unutrar maincontent id ovako:
--->source code
<section>
<h1>Welcome to Our Company Website</h1>
<p>We Make Great Stuff</p>
<p>Our stuff is the best stuff around. Nobody makes stuff like our stuff.
Best of all, our stuff is the least expensive stuff you’ll eversee –
which makes our stuff a terrific value.</p>
<p>When you need stuff, come see ours! You’ll be glad you did!</p>
</section>
source code <---

Kreiranje headera
Tag <header> je dizajniran da sadrži uvodne i navigacione elemente (ali nije obavezno). Uvodni elementi mogu
biti logo i naslovi. Evo primera koda koji možete inkorporirati u <header> tag
--->source code
<header>
<img src=”images/logo.jpg” />
<div id=”nav”>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”products.htm”>Products</a></li>
<li><a href=”services.htm”>Services</a></li>
<li><a href=”about.htm”>About Us</a></li>
</ul>
</div> <!-- End nav -->
</header>
source code <---
Header tagovi mogu da sadrže više naslova <h1>,<h2>, <h3>, zbog ovoga je HTML5 uveo
<hgroup> tag da bi grupisao rayne elemente povezane u isti hijerarhijski nivo, što se može videti i na primeru:
--->source code
<section>
<header>
<hgroup>
<h1>Welcome to Our Company Website</h1>
<p>We Make Great Stuff</p>
</hgroup>
</header>
<p>Our stuff is the best stuff around. Nobody makes stuff like our stuff.
Best of all, our stuff is the least expensive stuff you’ll eversee –
which makes our stuff a terrific value.</p>
<p>When you need stuff, come see ours! You’ll be glad you did!</p>
</section>
source code <---
takođe vidite da ne morate koristiti <header> rag jednom na stranici, već da može biti uključen i u podru;je
section-a.

Postavljanje navigacije
Veb navigacija je tipično postavljana kao stilizovana neuređena lista linkova. Cilj taga <nav> je da sadrži glavnu
navigaciju sajta, obično se nalazi unutar <header> taga . Evo primera koda kako bi izgledao:
--->source code
<header>
<img src=”images/logo.jpg” />
<nav>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”products.htm”>Products</a></li>
<li><a href=”services.htm”>Services</a></li>
<li><a href=”about.htm”>About Us</a></li>
</ul>
</nav>
</header>
source code <---
Jedna od prednosti <nav> taga je i u pristupa;nosti jer je screen readerima (koje koriste slabovidi) lakše ih
pronađu.

Uspostavljanje članaka -articles
Sadržaj taga <article> se razlikuje od uopštenog sadržaja koji sadrži tag sekcije. Tipičan article je blog post,
forum post ili komentari , bilo koji nezavisni sadržaj.
Evo primera kako tag <article> može da se koristi u blog postu:
--->source code
<article>
<header>
<h1>Why Our Stuff is the Best</h1>
<p>by Simon Stuffy, CEO of Good Stuff, Inc.</p>
<p class=”post-date”>March 31, 2011</p>
</header>
<p>Our stuff is truly the best you’ll find anywhere. Why? Because we give hire
the best people to create our stuff, from the best materials anywhere. Then we
test our stuff under a wide range of conditions to be sure thatit’s really
the best stuff around.</p>
<footer>
<p>Copyright &copy; 2011 Good Stuff, Inc.</p>
</footer>
</article>
source code <---

Tag za vreme
<time> tag se najčešće sreće u tagu article, iako nije ograničen na ovu poziciju. Ovaj tag je fleksibilan
i omogućuje koderu da prikaže datum, vreme ili oba. Evo kako bi mogao da utiče na prethodni primer
<header>
<h1>Why Our Stuff is the Best</h1>
<p>by Simon Stuffy, CEO of Good Stuff, Inc.</p>
<time datetime=”2011-03-31” pubdate=”pubdate”>March 31, 2011</time>
</header>
Ako se koristi datetime atribut unutar vremenskog taga mora da se koristi format godina-mesec-dan.
Pubdate atribut koji je unutar <article>taga pokazuje da je to vreme objavljinja članka, a ako je izvan
<article> onda pokazuje vreme objavljivanja dokumenta.

Definisanje dodatnog sadržaja (asides)
Mnoge stranice sadrže dodatni sadržaj u vertikalnoj margini. U HTML5 ovaj sadržaj je najbolje
smeštati u <aside> tag. Evo kako sadržaj iz prethodnog primera umotan u <div> sa id sideContent
izgleda u HTML5:
<aside>
<h2>People Like Our Stuff</h2>
<p>Here’s what people have to say about our stuff:</p>
<p>It’s really great stuff!! <br /> - Joe Schmoe</p>
<p>Wow! Super stuff! <br /> - Jane Schmain</p>
<p>The best stuff at the best price! <br /> - Bob Schmob</p>
</aside>

Uključivanje footera
Poslednji semantički HTML tag je <footer> tag. Obično je smešten na dnu stranice. Evo primera koda
sa novim <footer> tagom na mestu:
<footer>
<p>Copyright &copy; 2011 Good Stuff, Inc.
</footer>
Međutim, među današnjim veb trendovima je i takozvani FAT FOOTER - koji uključuje gomilu linkova
sa materijalima, opisni tekst, tako da se u tom slučaju koristi <section> tag unutar <footer> taga.
Sve zajedno na primeru koji smo pogledali na početku dokument sa novim HTML5 tagovima bi
izgledao ovako:
--->source code
<div id=”outerWrapper”>
<header>
<img src=”images/logo.jpg” />
<nav>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”products.htm”>Products</a></li>
<li><a href=”services.htm”>Services</a></li>
<li><a href=”about.htm”>About Us</a></li>
</ul>
</nav>
</header>
<div id=”contentWrapper”>
<section>
<hgroup>
<h1>Welcome to Our Company Website</h1>
<p>We Make Great Stuff</p>
</hgroup>
<p>Our stuff is the best stuff around. Nobody makes stufflike our stuff.
Best of all, our stuff is the least expensive stuff you’ll eversee –
which makes our stuff a terrific value.</p>
<p>When you need stuff, come see ours! You’ll be glad youdid!</p>
</section>
<aside>
<h2>People Like Our Stuff</h2>
<p>Here’s what people have to say about our stuff:</p>
<p>It’s really great stuff!! <br /> - Joe Schmoe</p>
<p>Wow! Super stuff! <br /> - Jane Schmain</p>
<p>The best stuff at the best price! <br /> - Bob Schmob</p>
</aside>
</div> <!-- End contentWrapper -->
<footer>
<p>Copyright &copy; 2011 Good Stuff, Inc.
</footer>
</div> <!-- End outerWrapper -->
--->source code
U primeru <div> tagovi se koriste i dalje u konjukciji sa CSSom da bi se postigli efekti poput
centriranja stranice i slično. Ponekad je dobro kombinovati <div> tagove sa novim semantičkim
HTML5
LINKOVI SA SLIČNIM SADRŽAJEM
Opis
URL
Kodiranje html5
elemenata od
početka
http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-fromscratch/
REČNIK POJMOVA I SKRAĆENICA
Termin
Opis
semantika HTMLa
Semantika je studija značenja, naročito se odnosi na reči i tekst. Kada se primenjuje na
HTML, semantika znači korišćenje pravog taga (etikete) za pravi sadržaj. Drugim rečima,
semantički veb je standardizovani veb gde se jedan sadržaj vidi kako treba bez obzira na
uređaj ili kontekst sadržaja.
Download

SELECT statement basic form