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

Web Дизајн (Internet)

студијски програм Интернет

Технологије

Никола Рељин – Интернет, Висока ICT Школа

HTTP комуникација

Начини презентовања на 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_Type_Declaration



Пример HTML-а

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

●<kbd>

●<pre>●<s> (deprecated)

●<samp>

●<small>

●<span>●<strike> (deprecated)

●<strong>

●<sub>

●<sup>

●<tt>●<u> (deprecated)

●<var>

Текстуални 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) и “деривати” и

VBScript

●<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 listo<LI>..</LI> //list item

o<LI>..</LI>

o<LI>..</LI>

●</OL>

Листе

●Неуређена листа

(Unordered List):

●<UL> //unordered listo<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

×

●÷ division ÷

÷

Убацивање слике

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







serif…

Дефинисање фонта - боље

●<span

●style=“color : red;

●font-family : Arial,

Helvetica, Sans-

serif;”>

●element</span>







serif…

●Ово је била 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:[email protected]

●На сајту школе, информације о предмету:http://www.ict.edu.rs/studiranje/predmeti/internet

●На фајл серверу Школе:\\fileserver\internet

mailto:[email protected]

http://www.ict.edu.rs/studiranje/predmeti/internet

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

Presentations & Public Speaking