Scribd
Upload
31 views34 pages

2.2 - HTML5 Drugi Deo

Uploaded by

Stefan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
31 views34 pages

2.2 - HTML5 Drugi Deo

Uploaded by

Stefan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

Web Programiranje

dr Siniša Nikolić

HTML5 drugi deo


HTML5
• Izmene u domenu:
– HTML-a
– CSS-a
– JavaScript-a

2/33
IZMENE U HTML-U
Izmene u HTML-u

4/33
Sementički elementi podržani sa
verzijom HTML 5.2
• Osnovna ideja je da HTML elementima definiše sekcija u
dokumentu kojoj je pridružena određena semantika, u
kojoj se mogu naći drugi elementi
• address - Označava kontakt informacije.
• article - Označava jednu komponentu dokumenta
(npr. novinski članak).
• aside - Obuhvata sadržaj koji nije povezan sa okolnim
sadržajem (npr. grupa navigacionih elemenata ili
reklamni materijal).
• header - Zaglavlje stranice, koje daje uvod u njen
sadržaj.
• footer - Sekcija koja zaključuje sadržaj stranice.
• nav - Grupiše navigacione elemente.
• section - Obuhvata sadržaj sa istom svrhom ili temom
u okviru stranice.
• i mnogi drugi, videti više na
https://www.w3schools.com/html/html5_semantic_ele
ments.asp
5/33
Sementički elementi podržani sa
verzijom HTML 5.2
• Novi HTML elementi
– <footer> Represents a footer for a section and can contain
information about the author, copyright information, et
cetera.
– <header> Represents a group of introductory or
navigational aids.
– <hgroup> Represents the header of a section.
– <keygen> Represents control for key pair generation.
– <mark> Represents a run of text in one document marked
or highlighted for reference purposes, due to its
relevance in another context.
– <meter> Represents a measurement, such as disk usage.
6/33
Sementički elementi podržani sa
verzijom HTML 5.2
• Novi HTML elementi
– <nav> Represents a section of the document intended for
navigation.
– <output> Represents some type of output, such as from a calculation
done through scripting.
– <progress> Represents a completion of a task, such as
downloading or when performing a series of expensive operations.
– <ruby> Together with <rt> and <rp> allow for marking up ruby
annotations.
– <section> Represents a generic document or application section
– <time> Represents a date and/or time.
– <video> Defines a video file.
– <wbr> Represents a line break opportunity.

7/33
Poboljšana semantika
<body>
<header>
<hgroup>
<h1>Page title</h1> <article>
<header>
<h2>Page subtitle</h2>
<h1>Title</h1>
</hgroup>
</header>
</header> <section>
<nav> Content...
<ul> </section>
Navigation... </article>
</ul> </section>
</nav>
<aside>
aside Top links...
<section>
</aside>
<article>
<header> <footer>
<h1>Title</h1> footer Copyright © 2009.
</header> </footer>
<section> </body>
Content...
</section>
</article> 01_semanticki tagovi 8/33
Nova značenja rel atributa
• rel atribut nema vidljivu reprezentaciju
• On označava semantičku vezu između stranica
• Dodaje se kao rel atribut u 'link' ili 'a'
elementu
<link rel="icon" href="favicon.ico" />
<a rel="license"
href="http://www.apache.org/licenses/LICENS
E-2.0">license</a>
9/33
Nova značenja rel atributa
alternate Link to an alternate version of the document (i.e. print page, translated or
mirror)
archives Link to a collection of documents, or historical data
author Link to the author of the document
bookmark Permanent URL used for bookmarking
external Link to an external document
first Link to the first document in a selection
help Link to a help document 02_novi rel atributi
icon An icon that represent the the document
index Link to an index for the document
last Link to the last document in a selection
licence Link to copyright information for the document
next The next document in a selection
nofollow Link to an unendorsed document, like a paid link ("nofollow" is used by Google,
to specify that the Google search spider should not follow that link).
noreferrer Specifies that the browser should not send a HTTP referer header if the user
follows the hyperlink
pingback URL to the pingback server
prefetch Specifies that the target document should be cached
prev The previous document in a selection
search Link to a search tool for the document
sidebar Link to a document that should be shown in the browser's sidebar
stylesheet URL to a stylesheet to import
tag A tag (keyword) for the current document
up Link to a document with the context for the current document

10/33
Microdata
• Dodavanje semantičkog sadržaja u HTML
• Nema vidljivu reprezentaciju, već ga koriste search
engine-i
• Ponekad je poželjno da se anotiraja sadržaj HTML
dokumenta oslanjajući se na mašinsi čitljive labele
• Microdata pruža jednostavan mehnaizam za
laberiranje sadržaja dokumenta, tako da se može
dobiti skup stavki opisanih po paru ključ-vrednost

11/33
Microdata
• Stavke se kreiraju na osnovu dodatnih atributa za HTML elemente
• Dodatni atributi u HTML tagovima:
– itemscope – kreira novu stavku (boolean atribut, ako je atribut prisutan)
– itemtype – URL na rečnik koji definiše svojstvo
– itemid – jedinstveni identifikator prema itemtype specifikaciji
– itemprop – dodaje svojstvo stavci

<dl itemscope itemtype="http://vocab.example.net/book"


itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton </dd> <dt>Publication date
</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January
1996</time></dd>
</dl> 12/33
Microdata
• Primer:

<div itemscope itemtype="http://example.org/band">


  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts
Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>

03_microdata
13/33
ARIA atributi
• Accessible Rich Internet Applications
• Za osobe sa specijalnim potrebama, koje će
koristiti softver (navigatore) koji je u stanju da
interpretira ove atribute
• Dodatni atributi koji pomažu specijalizovanim
softverima
• Daju informacije o:
– komponentama – rola za komponentu
– strukturi
– stanju
14/33
ARIA atributi

<a href="http://www.google.com" role="link">googlica<a/>


  <ul id="tree1"
        role="tree"
        tabindex="0"
        aria-labelledby="label_1">
    <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
    <li role="group">
      <ul>
        <li role="treeitem" tabindex="-1">Oranges</li>
        <li role="treeitem" tabindex="-1">Pineapples</li>
        ...
      </ul>
    </li>
  </ul>

04_ARIA atributi
15/33
Forme
• Novi elementi korisničkog interfejsa:
– email polje
– slider za odabir vrednosti
– date polje
– search polje
– šablonizovano polje
– progress bar itd.
• Dodatni atributi:
– <form novalidate>
Nastavak
– <input autofocus > naredni
– <input required > čas
• Pseudoklasa :invalid za neispravan sadržaj

05_forme 16/33
Audio i video sadržaj
• Audio i video sadržaj se lako ugrađuje na
stranicu tagovima <audio> i <video>

06_audio i video 17/33


Crtanje
• Kanvas (tag <canvas>) definiše površinu za
crtanje
• Po kanvasu se crta iz JavaScript koda:
<canvas id="canvas" width="838" height="220" />
<script>
var canvasContext =
document.getElementById("canvas").getContext("2d")
;
canvasContext.fillRect(250, 25, 150, 100);
</script>

07_canvas 18/33
Crtanje
• SVG (Scalable Vector Graphics) je podržan tagom
<svg>
• Primitive:
– linije
– pravougaonici
– krugovi
– poligoni
– polilinije
– gradijentni i ostali filovi
08_svg 19/33
IZMENE U CSS-U
Izmene u CSS-u
• Dodate nove mogućnosti:
– parni i neparni redovi u tabelama
– novi načini odsecanja viška sadržaja
– više kolona teksta
– ispis teksta četkicom
– providnost
– nov način definicije boja (HSL)
– zaobljene ivice
– gradijente pozadine
– senke
– tranzicije
– animacije
– fontovi koji se download-uju

21/33
Parni i neparni redovi u tabelama
• Novi selektori:
.row:nth-child(even) {
background: #dde;
}
.row:nth-child(odd) {
background: white;
}
• Upotreba:
<tr class="row"> <td>ABC</td> </tr>
22/33
Šta sa viškom?
• Novi atribut CSS-a – text-overflow:
.textOverflow2 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

23/33
Broj kolona
• Atributi css-a za podešavanje kolona:
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

24/33
Ispis teksta četkicom
• Novi atributi za ispis četkicom:
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 5.00px;

25/33
Providnost
• Definicija boje upotrebom RGBA funkcije:
rgba(0, 0, 255, 0.746094);
• Upotreba:
color: rgba(0, 0, 255, 0.746094);
background-opacity: rgba(0, 0, 255,
0.746094);

26/33
HSL definicija boje
• HSL[A] – Hue Saturation Luminance [Alpha]
– Hue : ugao u krugu boja (0 – 360)
– Saturation: zasićenje(0 – 100%)
– Luminance: osvetljenje (0 – 100%)
– Alpha: providnost (0 – 1)
• Upotreba:
hsla(120, 100%, 50%, 1.0);

27/33
Zaobljene ivice
• Atribut koji definiše poluprečnik:
border-radius: 10px;

28/33
Gradijenti
• Dva tipa gradijentnih prelaza:
– linearni
– radijalni
• Zajednička svojstva:
– from(boja)
– to(boja)

29/33
Gradijenti
• Linearni gradijent definiše još i :
– početnu i krajnju tačku,
– stop-pozicije (u rasponu od 0 do 1)
background: -webkit-gradient(linear, left top,
left bottom, from(#00abeb), to(#fff), color-
stop(0.5, #66cc00), color-stop(1, #fff));
• Radijalni gradijent definiše još i:
– početne koordinate centra i radijus
– krajnje koordinate centra i radijus
background: -webkit-gradient(radial, 400 50, 0,
400 50, 200, from(red), to(#000));

30/33
Senke
• Senke iza teksta:
text-shadow: [color] [y-offset] [x-offset]
[blur-radius];
• Primer:
text-shadow: #666666 2px 2px 4px;
• Senke iza border-a:
-webkit-box-shadow: [color] [y-offset] [x-
offset] [blur-radius];
• Primer:
-webkit-box-shadow: #666666 2px 2px 4px;

31/33
Tranzicije
• Način prelaza iz jednog stanja u drugo
• Svojstvo –webkit-transition podešava prelaz:
– transition-property – šta menjamo (npr. opacity)
– transition-duration – koliko traje
– transition-timing-function – funkcija prelaza (npr.
linear, ease-in, ease-out, ease-in-out, cubic-
bezier(x1, y1, x2, y2)-kriva)
– transition – sve zajedno

32/33
Animacije
• Svojstvo –webkit-transform definiše kako će se
transformisati neki objekat:
-webkit-transform: rotateZ(5deg);
• Funkcije:
– scale(1.25);
– rotate[X|Y|Z](45deg);

09_css 33/33
Fontovi
• Font se može skinuti i koristiti automatski:
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}
h1 {
font-family: 'LeagueGothic';
}
10_fontovi 34/33

You might also like