Web дизајн (it), део 6, школска 2010 11, триместар 3
-
Upload
nikola-reljin -
Category
Presentations & Public Speaking
-
view
43 -
download
3
Transcript of Web дизајн (it), део 6, школска 2010 11, триместар 3
![Page 1: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/1.jpg)
Web Дизајн (Internet)
студијски програм Интернет
Технологије
Никола Рељин – Интернет, Висока ICT Школа
![Page 2: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/2.jpg)
CSS
приказ садржаја
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.
![Page 3: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/3.jpg)
Приказ текста
●измена особине густине текста●p
{
word-spacing:3em;
}●приказ са другачијим размаком од
предвиђеног (3 велика М слова)
![Page 4: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/4.jpg)
Приказ текста
●измена висине линије текста●p.small {line-height:90%}
p.big {line-height:200%}●приказ са другачијим размаком између
линија текста
![Page 5: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/5.jpg)
Приказ текста
●измена густине текста●h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}●променили смо густину текста на +2px
за H1, као и на -3px за H2●корисно је поставити већу густину на
великим словима, а оставити нормални
размак на ситнијем тексту
![Page 6: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/6.jpg)
Приказ текста
●сенка●h3 {text-shadow: 0.1em 0.1em #333}●обична сенка●h3.b {text-shadow: 0.1em 0.1em 0.2em black}
●сенка црне боје, са померајем 0.1em●0.2em је тзв fuziness (замрљаност). За
оштри приказ уместо тога ставите мањи
број
![Page 7: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/7.jpg)
Приказ текста
●више сенки одједном●h3 {text-shadow: 0.2em 0.5em 0.1em #600, -0.3em
0.1em 0.1em #060, 0.4em -0.3em 0.1em #006}
●имамо 3 сенке
![Page 8: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/8.jpg)
Приказ текста
●Симулација "угравираног"●h3.b {text-shadow: 1px 1px white, -1px -1px #444}
●-1px -1px дефинише колико је спуштен
текст у окружење, сенка је боја #444
(#444444).
![Page 9: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/9.jpg)
Приказ текста
●Симулација neon glow●h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}
●0 0 je offset, 0.2em - fuziness, #87F боја●поновили смо исти ефекат 3 пута
(дозвољено је скроз)
![Page 10: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/10.jpg)
Поравнање садржаја
●центрирани садржај●.element { margin: auto; ... }
●елемент са класом "element" ће бити
приказан центрирано●за компатибилност са IE6, користити
све у <center> tag-у●<center>
<div class="element">....</div>
</center>
![Page 11: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/11.jpg)
Browser-и
провера приказа садржаја
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.
![Page 12: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/12.jpg)
Browser више browser-a
●емулатор више browser-a у једном
паковању●Lunascape (http://www.lunascape.tv/)
![Page 13: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/13.jpg)
Примери кода
●сенка на тексту http://www.w3.org/Style/Examples/007/text-shadow
●Google Font API http://code.google.com/apis/webfonts/docs/getting_started.html
●Google Font preview http://www.google.com/webfonts/preview#font-family=Allan
![Page 14: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/14.jpg)
HTML 5
Кратки преглед
![Page 15: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/15.jpg)
Преглед tag-ова
Кратки
преглед нових елемената
![Page 16: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/16.jpg)
Пример●<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
![Page 17: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/17.jpg)
структурни тагови●<article> For external content, like text from a news-
article, blog, forum, or any other content from an external source
●<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content
●<command> A button, or a radiobutton, or a checkbox
●<details> For describing details about a document, or parts of a document
●<summary> A caption, or summary, inside the details element
●<figure> For grouping a section of stand-alone content, could be a video
●<figcaption> The caption of the figure section
![Page 18: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/18.jpg)
структурни тагови●<footer> For a footer of a document or section, could
include the name of the author, the date of the document, contact information, or copyright information
●<header> For an introduction of a document or section, could include navigation
●<hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
●<mark> For text that should be highlighted●<meter> For a measurement, used only if the
maximum and minimum values are known●<nav> For a section of navigation
![Page 19: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/19.jpg)
структурни тагови●<progress> The state of a work in progress●<ruby> For ruby annotation (Chinese notes or
characters)●<rt> For explanation of the ruby annotation●<rp> What to show browsers that do not support the ruby
element●<section> For a section in a document. Such as
chapters, headers, footers, or any other sections of the document
●<time> For defining a time or a date, or both●<wbr> Word break. For defining a line-break
opportunity.
![Page 20: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/20.jpg)
Мултимедијални тагови●<audio> For multimedia content, sounds, music or
other audio streams●<video> For video content, such as a movie clip or
other video streams●<source> For media resources for media elements,
defined inside video or audio elements●<embed> For embedded content, such as a plug-in
![Page 21: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/21.jpg)
Таг за цртање..●<canvas> For making graphics with a script●елемент који служи за цртање по browser-у, путем
JavaScript-a
![Page 22: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/22.jpg)
Нови елементи за форме●<datalist> A list of options for input values●<keygen> Generate keys to authenticate users●<output> For different types of output, such as output
written by a script
Поред нових елемената, постоји читав низ нових атрибута..
![Page 23: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/23.jpg)
нови атрибути HTML5●tel The input value is of type telephone numberr●search The input field is a search field●url The input value is a URL●email The input value is one or more email addresses●datetime The input value is a date and/or time●date The input value is a date●month The input value is a month●week The input value is a week●time The input value is of type time●datetime-local The input value is a local date/time●number The input value is a number●range The input value is a number in a given range●color The input value is a hexadecimal color, like
#FF8800
![Page 24: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/24.jpg)
нови елементи за форме
●низ нових типова
података за форме●E-mail: <input
type="email" name="user_email" />
●Оцена студента: <input type="range" name="points" min="1" max="10" />
●email●url●number●range●Date pickers
(интерактивно узима датум)
●search●color
![Page 25: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/25.jpg)
нови елементи за форме
●datalist element specifies a list of options for an input field
●keygen element - secure way to authenticate users
●output - different types of output, like calculations or script output
●datalist●keygen●output
<output id="result" onforminput="izracunaj();"></output>
izracunaj() - JavaScript функција која враћа неки резултат
![Page 26: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/26.jpg)
нови атрибути за форме●autocomplete - завршава унос на основу претходно
унетих података●autofocus - аутоматски се пређе на то поље при
учитавању странице●form - стандардни елемент форме●form overrides (formaction, formenctype, formmethod,
formnovalidate, formtarget) - акција, приказ текста,..●height and width - значајно за елемент <input
type="image"..>●list - листа вредности●min, max and step - ●multiple - ●pattern (regexp) - ●placeholder - ●required - да ли је податак неопходно унети
![Page 27: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/27.jpg)
Пример форме●Webpage: <input type="url" list="url_list" name="link" />
●<datalist id="url_list">
●<option label="W3Schools" value="http://www.w3schools.com" />
●<option label="Google" value="http://www.google.com" />
●<option label="Microsoft" value="http://www.microsoft.com" />
●</datalist>
● ●Користимо сада <datalist> уместо <select>
![Page 28: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/28.jpg)
преглед свих HTML5 тагова●<!--...--> Defines a comment●<!DOCTYPE> Defines the document type●<a> Defines a hyperlink●<abbr> Defines an abbreviation●<acronym> Not supported in HTML5.●<address> Defines an address element●<applet> Not supported in HTML5.●<area> Defines an area inside an image map●<article>New Defines an article●<aside>New Defines content aside from the page
content●<audio>New Defines sound content
![Page 29: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/29.jpg)
преглед свих HTML5 тагова●<b> Defines bold text●<base> Defines a base URL for all the links in a page●<basefont> Not supported in HTML5.●<bdo> Defines the direction of text display●<big> Not supported in HTML5.●<blockquote> Defines a long quotation●<body> Defines the body element●<br> Inserts a single line break●<button> Defines a push button●<canvas>New Defines graphics●<caption> Defines a table caption●<center> Not supported in HTML5.
![Page 30: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/30.jpg)
преглед свих HTML5 тагова●<cite> Defines a citation●<code> Defines computer code text●<col> Defines attributes for table columns ●<colgroup> Defines groups of table columns●<command>New Defines a command button●<datalist>New Defines a dropdown list●<dd> Defines a definition description●<del> Defines deleted text●<details>New Defines details of an element●<dfn> Defines a definition term●<dir> Not supported in HTML5.●<div> Defines a section in a document●<dl> Defines a definition list●<dt> Defines a definition term●<em> Defines emphasized text
![Page 31: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/31.jpg)
преглед свих HTML5 тагова●<embed>New Defines external interactive content or
plugin●<fieldset> Defines a fieldset●<figcaption>New Defines the caption of a figure element●<figure>New Defines a group of media content, and
their caption●<font> Not supported in HTML5.●<footer>New Defines a footer for a section or page●<form> Defines a form ●<frame> Not supported in HTML5.●<frameset> Not supported in HTML5.●<h1> to <h6> Defines header 1 to header 6●<head> Defines information about the document
![Page 32: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/32.jpg)
преглед свих HTML5 тагова●<header>New Defines a header for a section or page●<hgroup>New Defines information about a section in a
document●<hr> Defines a horizontal rule●<html> Defines an html document●<i> Defines italic text●<iframe> Defines an inline sub window (frame)●<img> Defines an image●<input> Defines an input field●<ins> Defines inserted text●<keygen>New Defines a generated key in a form●<kbd> Defines keyboard text●<label> Defines a label for a form control●<legend> Defines a title in a fieldset●<li> Defines a list item
![Page 33: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/33.jpg)
преглед свих HTML5 тагова●<link>Defines a resource reference●<map> Defines an image map ●<mark>NewDefines marked text●<menu> Defines a menu list●<meta> Defines meta information●<meter>New Defines measurement within a
predefined range●<nav>New Defines navigation links●<noframes>Not supported in HTML5.●<noscript> Defines a noscript section●<object> Defines an embedded object●<ol> Defines an ordered list●<optgroup> Defines an option group●<option> Defines an option in a drop-down list●<output>New Defines some types of output
![Page 34: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/34.jpg)
преглед свих HTML5 тагова●<p> Defines a paragraph●<param> Defines a parameter for an object●<pre>Defines preformatted text●<progress>New Defines progress of a task of any kind●<q> Defines a short quotation●<rp>New Used in ruby annotations to define what to
show browsers that to not support the ruby element.●<rt>New Defines explanation to ruby annotations.●<ruby>New Defines ruby annotations●<s> Defines text that is no longer correct●<samp> Defines sample computer code●<script> Defines a script●<section>New Defines a section●<select> Defines a selectable list
![Page 35: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/35.jpg)
преглед свих HTML5 тагова●<small> Defines small text●<source>New Defines media resources●<span> Defines a section in a document●<strike> Not supported in HTML5.●<strong> Defines strong text●<style> Defines a style definition●<sub> Defines subscripted text●<summary>New Defines the header of a "detail" element●<sup> Defines superscripted text
![Page 36: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/36.jpg)
преглед свих HTML5 тагова●<table> Defines a table●<tbody> Defines a table body●<td> Defines a table cell●<textarea> Defines a text area●<tfoot> Defines a table footer●<th> Defines a table header●<thead> Defines a table header●<time>New Defines a date/time●<title> Defines the document title●<tr> Defines a table row●<tt> Not supported in HTML5.●<u> Not supported in HTML5.
![Page 37: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/37.jpg)
преглед свих HTML5 тагова●<u> Not supported in HTML5.●<ul> Defines an unordered list●<var> Defines a variable●<video>New Defines a video●<wbr>New Defines a possible line-break●<xmp> Not supported in HTML5.
![Page 38: Web дизајн (it), део 6, школска 2010 11, триместар 3](https://reader030.fdocument.pub/reader030/viewer/2022020116/55be706abb61ebbb448b46c5/html5/thumbnails/38.jpg)
Питања и материјали
●Користити email:[email protected]
●На сајту школе, информације о предмету:http://www.ict.edu.rs/studiranje/predmeti/internet
●http://dokumenti.ict.edu.rs
●На фајл серверу Школе:\\fileserver\internet