Web дизајн (it), део 6, школска 2010 11, триместар 3

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/tex
t-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" />

преглед свих 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

●<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.

●<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

●<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

●<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

●<link> Defines a resource reference
●<map> Defines an image map
●<mark>New Defines 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

●<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

●<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

●<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.

●<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:nikola.reljin@ict.edu.rs
●На сајту школе, информације о
предмету:http://www.ict.edu.rs/studiranje/predmet
i/internet
●http://dokumenti.ict.edu.rs
●На фајл серверу Школе:fileserverinternet

Web дизајн (it), део 6, школска 2010 11, триместар 3

Recommended

Recommended

More Related Content

Featured

Featured (20)

Web дизајн (it), део 6, школска 2010 11, триместар 3

Editor's Notes