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

Web Дизајн (Internet)
студијски програм Интернет
Технологије
Никола Рељин – Интернет, Висока ICT Школа

Начини презентовања на
Web-у
●Више формата за приказ информација
●Постојање стандарда и “језика” које ће
разумети претраживачи и софтвер који
“купи” или шаље податке..
●HTML
●XML, и као подскуп, XHTML
●У сваком случају, мора постојати
стандард

Пример HTTP комуникације

HTML
увод
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.

Историјат HTML-а
●HyperText Markup Language
●Основни начин презентовања података
на Web-у
●Настао 1980., у CERN-у, под називом
ENQUIRE, како би истраживачи
размењивали “рецепте”..
●1989., Berners-Lee и Robert Cailliau
почели рад на WWW пројекту, који је
претеча данашњег Web-a (одатле www)

Историјат HTML-а
●1991., настао први предлог HTML tags
●1993. настао први IETF предлог језика
●HTML дефинисан као подскуп језика
SGML (Structured Generalized Markup
Language),
●1993., први browser, Mosaic – преглед
текста и слике

Шта је то HTML
●Начин презентовања информација
●Све web странице користе HTML форму
●Тачно дефинисани типови података који
се могу наћи на одређеном месту
●Browser “разуме” те типове података,
такозване тагове (tags)
●У текст можемо убацивати и друге
садржаје сем текста

Како browser “разуме” HTML
●Постоји група tag-ова који су део
стандарда HTML, и морају бити
“познати”
●Неки browser-и имају и додатне tag-ове
које разумеју (а други не.. – browser
wars)
●Зависно од дефиниције језика који
користимо, нека правила су “строжа”..
(нови стандард је XHTML, о том

Типови HTML стандарда
●“верзије” језика HTML 2
●HTML 3
●HTML 4
●HTML 5

Језик HTML
Кратки преглед

HTML
●Потпуно текстуални опис, читљив, и лак
за разумевање
●Стандардизовано дефинисање
садржаја који мора да се држи неких
правила како би browser “разумео” лепо
шта је унето
●Главна ствар HTML-у су елементи или
tag-ови унутар којих је унет садржај

Tag-ови
●Tag је елемент унутар кога може бити
неки садржај (текст, слика,...)
●Може имати додатне атрибуте, који
могу одредити понашање или изглед
тог елемента
●Сваки tag почиње и завршава се истим
елементом:<neki_tag> …. Садржај
...</neki_tag>
●Tag-ови могу бити један у другом

Пример HTML стране
●<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
●<html>
●<head>
●<title>наслов стране..</title>
●</head>
●<body>овде иде садржај стране..
●</body>
●</html>

Пример HTML-а
●<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
●(Није неопходно); Дефинише тип HTML
стандарда (овде је HTML4.01 strict,
дефинисан од www Consortium – w3.org,
на Енглеском језику)
●Детаљније информације:
http://en.wikipedia.org/wiki/Document_Typ

●<html> … </html>
●Унутар овог tag-а је цео садржај HTML
стране (све остало мора да се налази
овде .. )
●Трудимо се да користимо МАЛА СЛОВА
за називе tag-ова
●Морамо да почнемо са html, а морамо
да завршимо са “/html” !

●<head> … </head>
●Унутар овог tag-а је онај део стране који
се “не види”, а који служи за опис
стране
●Најважнији елементи описа су језик
стране, наслов, кључне речи, “везани”
садржаји, стилови за приказ стране, и
друго.. (то овде нема у примеру)

●<body> … </body>
●Унутар овог tag-а је онај део стране који
се “види”, и то је стварни садржај који
треба да прикажемо кориснику
●У њему се налази сав текст, слике, и
остали садржаји који се презентују
●Битно: <body> се налази унутар <html>
tag-а !

Преглед tag-ова
Кратки преглед свих елемената

Структурни tag-ови
●Дефинишу структуру
документа
●Налазе се у делу
HTML-a који “није
видљив”
●<!DOCTYPE>
●<base>
●<body>
●<head>
●<html>
●<link>
●<meta>
●<title>

Текстуални tag-ови :
блоковски (block-level)
●Дефинишу текст, и
“преломљени” су у
односу на текст пре
и после..
●<address>
●<blockquote>
●<dd>
●<div>
●<dl>
●<dt>
●<h1> .. <h6>
●<li>
●<ol>
●<p>
●<ul>

Текстуални tag-ови : (inline)
“на лицу места”
мењају начин
приказа
●<b>
●<big>
●<cite>
●<code>
●<em>
●<font> (deprecated)
●<i>
●<pre>
●<s> (deprecated)
●<samp>
●<small>
●<span>
●<strike> (deprecated)
●<strong>
●<sub>
●<sup>
●<tt>
●<u> (deprecated)

Текстуални tag-ови : “логички”
то објашњења и
појашњења неког
појма..
●<abbr>
●<acronym>
●<cite>
●<code>
●<del>
●<div>
●<em>
●<ins>
●<kbd>
●<q>
●<samp>
●<span>
●<strong>
●<var>

Текстуални tag-ови : “физички”
стилови
●Дефинишу посебне
особине приказа
текста
●<b>
●<big>
●<blink> (Navigator
only)
●<font> (deprecated)
●<i>
●<s> (deprecated)
●<small>
●<strike> (deprecated)
●<sub>
●<sup>
●<tt>
●<u> (deprecated)

Листе
●Дефинишу приказ
текста у виду листи
●Најважнији елемент
је <li> - list element
●<dir> (deprecated)
●<dl>
●<dd>
●<dt>
●<li>
●<menu> (deprecated)
●<ol>
●<ul>

Tag-ови за позиционирање
●Дефинише се
позиционирање и
распоред елемената
●Утичу на више
ствари сем
распореда
●Треба бити пажљив
и дозирати примену
●<br>
●<center> (deprecated)
●<nobr> (nonstandard)
●<pre>
●<spacer>
●<table> (<th>, <tr>,
<td>)
●<wbr> (nonstandard)

Линкови
●Креирање линкова
који указују на
ресурсе који се не
налазе на датој
страни
●<a>
●<link> (коришћен за
style sheets)
●<map> (коришћен за
тзв. imagemaps)
●<area> (коришћен за
тзв. client-side
imagemaps)

Табеле
●Дефинише елементе
везане за податке у
табелама
●<caption>
●<table>
●<tr>
●<td>
●<th>
●<col>
●<colgroup>
●<tbody>
●<thead>
●<tfoot>

Фрејмови (угњеждене стране)
●Користе се када
желимо да имамо
“исецкани” приказ
садржаја на више
независних блокова
●<frame>
●<frameset>
●<noframes>

Дефинисање мултимедије
●Елементи преко
којих се дефинишу
мултимедијални
садржаји убачени на
страну
●<applet> (deprecated)
●<bgsound> (Internet
Explorer only)
●<embed> (dropped
from HTML 4)
●<object>
●<param>

Дефинисање скрипта (акције у
виду програмчића)
●Скриптови су
програми који могу
да се користе за
додавање динамике
и активних
компоненти на
страници
●Најчешћи су
JavaScript (ECMA
Script) и “деривати” и
●<script>
●<noscript>

Елементи који су одбачени у
HTML 4.01
●<applet>
●<basefont>
●<center>
●<dir>
●<font>
●<isindex>
●<menu>
●<s>
●<strike>
●<u>

Navigator / Firefox only
●Елементи које
препознаје само
Netscape (NS) /
Firefox (FF)
●То се мења са
сваком верзијом
осталих browser-a..
●<blink>
●<ilayer>
●<keygen>
●<layer>
●<multicol>
●<server>
●<spacer>

Internet Explorer only
●Елементи које
“препознаје” само
Internet Explorer (IE)
●<bgsound>
●<comment>
●<marquee>
●<ruby>
●<rt>

HTML Примери
Како то све изгледа у пракси..

Приказ језика стране и
кодовање
●Да би исправно приказали “мешано” све
карактере, језике, слова на страни,
користити <meta> унутер <head> tag-а:
●<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8” />
●Тако смо дефинисали да је наша страна
HTML, и да користимо UTF-8 (све
карактере..)

Пример HTML стране
●<HTML>
●<HEAD>
●<TITLE>document title</TITLE>
●</HEAD>
●<BODY>
●contents of document
●</BODY>
●</HTML>

Линкови
●<a href=“путања до стране” target=“где
се отвара нови линк” title=“текст изнад
линка кад наиђемо мишем” class=“класа
приказа линка” id=“јединствени
идентификатор линка” > ..текст или
елемент који приказује линк.. </a>
●На горе дефинисани начин постављамо
линк на страници, а упућује на другу
страницу или ресурс

Листе
●Листа дефиниција
(Definition List):
●<DL>
o<DT> //definition term
 <DD>... </DD>
//definition data
o</DT>
o<DT>
 <DD>
o</DT>
●</DL>
●Уређена листа
(Ordered List):
●<OL> //ordered list
o<LI>..</LI> //list item
o<LI>..</LI>
o<LI>..</LI>
●</OL>

Листе
●Неуређена листа
(Unordered List):
●<UL> //unordered list
o<LI>..</LI>
o<LI>..</LI>
o<LI>..</LI>
●</UL>
●Угњеждене листе:
●<OL>
o<LI>
o<LI>
o<UL>
 <LI>
 <LI>
o</UL>
●</OL>

Табеле
●Једноставна табела:
●Оивичена са <table>
●<tr> - table row
●<td> - table data
(column)
●<TABLE>
o<TR>
 <TD></TD>
 <TD></TD>
o</TR>
o<TR>
 <TD></TD>
 <TD></TD>
o</TR>
●</TABLE>

Headers
●Елементи који служе
за дефинисање
наслова,
поднаслова,...
●<h1>..</h1>
●<h2>..</ h2 >
●<h3>..</ h3 >
●<h4>..</ h4 >
●<h5>..</ h5 >
●<h6>..</ h6 >

Линије и “нови ред”
●Елементи за
дељење две целине
●<hl> - horizontal line
●Линија чија дебљина
и боја може да се
мења
●<br> - break
●“Ломи” текст који
следи у нови ред
●Треба користити кад
стварно желимо
нови ред, а не нови
параграф

Наглашени текст
●<b> - bold
●Подебљан текст у
односу на тренутни
стил
●<strong> - strong,
веома наглашени
текст (данас треба
користити уместо
<b>)
●<i> - italic
●“Искошени” текст
●<em> - emphasis
●Наглашени текст
(данас треба
користити уместо
<i>)
●<big> - незнатно
већи (наглашени)
текст. (Не треба

Посебно форматирање
●<pre> - preformatted
●Чува тренутни
распоред, празна
места, прелом
текста
●<code> -
компјутерски код
●Исти размак између
слова
●Није погодан за дуги
текст
●Намењен за приказ
кода програма и сл..

Скраћенице
●<abbr title=“дуги
назив">ДН</abbr>
●Приказ скраћенице
подвучен “са
цртицама”
●Кад се мишем дође
изнад, прикаже се
title садржај
●<acronym title="World
Wide Web">WWW
</acronym>
●Још једна верзија
истог..

“Оријентација” текста
●За језике који се
пишу с десна на
лево постоји начин
приказа..
●<bdo dir="rtl">
●Овако би писали
Арапи..
●</bdo>
●<bdo> - bi-directional
override
●Као атрибут овог
елемента имамо
dir=“rtl” (direction =
rigth to left)

Навођења
●<blockquote> - блок
навођења (quote)
●Мало увучен приказ
текста..
●<q> - quote
●“чисто” навођење са
наводницима..

“брисан” и “убачен” текст
●<del>избрисано</del
>
●Приказ текста
“прекрижено”
●Користи се у приказу
неких званичних
докумената попут
правилника и сл..
●<ins>убачено</ins>
●Приказ текста
“подвучено” (али не
као линк)

Дефиниције
●<dfn> - “чиста” дефиниција (definition)
●Мало искошен приказ, различит од
тренутног текста

Специјални карактери
●non-breaking space
 
●< less than <
●> greater than >
●& ampersand &
●" quotation mark
"
●' apostrophe '
(не “шљака” у IE)
●¢ cent ¢
●£ pound £
●¥ yen ¥
●€ euro €
●§ section §
●© copyright ©
●® registered
trademark ®
●× multiplication
×

Убацивање слике
●<img src=“putanja do
slike”
●alt=“opis sta je na slici
ako se desi da je ne
ubodemo kako treba”
●title=“tekst koji se
prikaze kad je mis
iznad” />
●Слика се убацује са
елементом <img>
●Обавезан атрибут је
src, у ком је
наведена путања до
слике..

Дефинисање фонта
●<font
●color=“red”
●face=“Arial, Helvetica,
Sans-serif”>
●….</font>
●Почетак елемента
●Боја је црвена
●Фонт је: Arial, ако
нема њега онда
Helvetica, ако нема
њега онда sans-serif…

Дефинисање фонта
●<font
●color=“red”
●face=“Arial, Helvetica,
Sans-serif”>
●element</font>

Дефинисање фонта - боље
●<span
●style=“color : red;
●font-family : Arial,
Helvetica, Sans-serif;”>
●element</span>
●Ово је била CSS
дефиниција

Дефинисање боја у CSS-у
●Боја текста:Color:
боја;
●Боја
позадине:background
-color: боја;
●Боја може бити: red,
green, blue, gray,…
●Или у HEX
представи:
#000000 = black
●#FF0000 = red
●#00FF00 = green
●#0000FF = blue
●#CCCCCC = gray

Центрирање
●<center>
●неки садржај
●</center>
●Центирано се
приказује по
хоризонталној оси
све што се налази
између <center>
елемента

Центрирање - боље
●<div align=“center”>
●неки садржај
●</center>
●Или:<div style=“text-align:
center; vertical-align:
middle;”>
●…
●</div>
●Центирано се
приказује по
хоризонталној оси
све што се налази
између <center>
елемента

Путање
●Фајл који хоћемо да
убацимо негде се
увек рачуна од
места на ком је
тренутна страница (у
односу на страницу)
●То је релативна
путања
●На локалном сајту
користите ово
●Ако наведемо целу
путању, заједно са
именом сајта
(http://www.sajt.com/s
trana.html) , онда је
то
●Апсолутна путања
●Ако отварате ствар
која није на вашем
сајту, ово

“inline” Линкови
●<A
NAME=“Opis">Опис
нечега..</A>
●Овде иде опис...
●Опис...
●Опис...
●<a href=“#Opis”>
Погледајте
опис</a>
●Направимо линк у
оквиру стране, под
именом “Opis”
●Сад иде неки текст..
●...
●...
●Линк ка месту где
смо на истој страни
дефинисали да
почиње опис

Скрипт
●Javascript:
<body>
●<script
language=“JavaScript
” >
●document.alert(“dosa
dni tekst!”);
●</script>
●</body>
●Приказаће се сваки
пут по отварању
стране, текст
“dosadni tekst!”

Табеле
Опис табеле
Наслов Опис
садржај Бла бла бла...
Садржај 2 Бла бла бла... 2
●<table width="90%" border="1" cellspacing="1"
cellpadding="1" summary="кратки опис садржаја">
●<caption style="background-color:#006666"> Пример
табеле </caption>
●<tr style="background-color:#FFCC00">
●<th width="50%" scope="col">Наслов</th>
●<th width="50%" scope="col">Опис</th> </tr>
●<tr> <td>Садржај 1</td> <td>Бла бла бла...</td> </tr>
●<tr> <td>Садржај 2</td> <td>Бла бла бла...2</td> </tr>
●</table>

Питања и материјали
●Користити email:nikola.reljin@ict.edu.rs
●На сајту школе, информације о
предмету:http://www.ict.edu.rs/studiranje/predmet
i/internet
●На фајл серверу Школе:fileserverinternet

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

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

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

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

Editor's Notes