web дизајн (it), део 6, школска 2010 11, триместар 3
TRANSCRIPT
Web Дизајн (Internet)
студијски програм Интернет
Технологије
Никола Рељин – Интернет, Висока ICT Школа
CSS
приказ садржаја
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.
Приказ текста
●измена особине густине текста●p
{
word-spacing:3em;
}●приказ са другачијим размаком од
предвиђеног (3 велика М слова)
Приказ текста
●измена висине линије текста●p.small {line-height:90%}
p.big {line-height:200%}●приказ са другачијим размаком између
линија текста
Приказ текста
●измена густине текста●h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}●променили смо густину текста на +2px
за H1, као и на -3px за H2●корисно је поставити већу густину на
великим словима, а оставити нормални
размак на ситнијем тексту
Приказ текста
●сенка●h3 {text-shadow: 0.1em 0.1em #333}●обична сенка●h3.b {text-shadow: 0.1em 0.1em 0.2em black}
●сенка црне боје, са померајем 0.1em●0.2em је тзв fuziness (замрљаност). За
оштри приказ уместо тога ставите мањи
број
Приказ текста
●више сенки одједном●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 сенке
Приказ текста
●Симулација "угравираног"●h3.b {text-shadow: 1px 1px white, -1px -1px #444}
●-1px -1px дефинише колико је спуштен
текст у окружење, сенка је боја #444
(#444444).
Приказ текста
●Симулација 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 пута
(дозвољено је скроз)
Поравнање садржаја
●центрирани садржај●.element { margin: auto; ... }
●елемент са класом "element" ће бити
приказан центрирано●за компатибилност са IE6, користити
све у <center> tag-у●<center>
<div class="element">....</div>
</center>
Browser-и
провера приказа садржаја
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.
Browser више browser-a
●емулатор више browser-a у једном
паковању●Lunascape (http://www.lunascape.tv/)
Примери кода
●сенка на тексту 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
HTML 5
Кратки преглед
Преглед tag-ова
Кратки
преглед нових елемената
Пример●<!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>
структурни тагови●<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
структурни тагови●<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
структурни тагови●<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.
Мултимедијални тагови●<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
Таг за цртање..●<canvas> For making graphics with a script●елемент који служи за цртање по browser-у, путем
JavaScript-a
Нови елементи за форме●<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
Поред нових елемената, постоји читав низ нових атрибута..
нови атрибути 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
нови елементи за форме
●низ нових типова
података за форме●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
нови елементи за форме
●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 функција која враћа неки резултат
нови атрибути за форме●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 - да ли је податак неопходно унети
Пример форме●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>
преглед свих 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
преглед свих 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.
преглед свих 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
преглед свих 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
преглед свих 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
преглед свих 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
преглед свих 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
преглед свих 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
преглед свих 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.
преглед свих 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.
Питања и материјали
●Користити email:[email protected]
●На сајту школе, информације о предмету:http://www.ict.edu.rs/studiranje/predmeti/internet
●http://dokumenti.ict.edu.rs
●На фајл серверу Школе:\\fileserver\internet