Web Dizajn Predavanja

WEB ДИЗАЈН

ТЕМИ:

1.HTML(HEAD,TITLE,BODY)

2.HTML(COLOR,BACKGROUND,FONT)

3.HTML(BR,P,IMG)

4.HTML(Правење линкови)5. HTML(ORDERED ,UNORDERED)

6.HTML табела(TR,TD)

7.HTML table(COLSPAN i ROWSPAN)

8.HTML обрасци

9.HTML Фрејмови10.Поставување на страната на сервер

ВОВЕД

Ќе се обидеме во овие лекции да објасниме како да се направи веб страна, односно сајтови. Веројатно ќе бидете задоволни да знаете дека ова е многу едноставно. Ова ќе биде основната идеја ... Веб страната е ништо повеќе од една датотека, и тоа HTML датотека, да бидеме прецизни. Таа се вика HTML бидејќи веб документи се .html или htm. HTML е кратенка од Hyper Text Mark-up Language. Ајде да започнеме! Прво, ако ги имате некои од оние кои се кул HTML едитори, и само се подготвува за да започне ... забораваме на нив целосно! Најлош начин да научите е да користите една од овие едитори. (Се разбира, некои од нив може да бидат многу корисни, но само кога ќе ги научите основите.) Па, добро, она што е најдобро за учење HTML? MS Notepad!!!Верувајте ми.

Уште една "алатка" што ќе ви треба е интернет пребарувач за гледање на веб страни. Јас препорачувам Internet Explorer, кој доаѓа со повеќето Windows оперативни системи. И треба да ја заврши работата добро.

Kako do podebel tekst <B>xxxxx</B>

Kako do ukosen tekst <I>xxxxx</I>

Podvlecen tekst <U>xxxxx</U>

Font fiksna sirina <TT>xxxxx</TT>

Promena na goleminata (od 1 do 7) <FONT SIZE=5>xxxxx</FONT>

Promena vrstata na font <FONT FACE="arial">xxxxx</FONT>

Promena boja na font <FONT COLOR="#0000FF">xxxxx</FONT>

The rollercoaster!

The Handy Dandy Font Viewer

Boja pozadina <BODY BGCOLOR="#xxxxxx">

Boja tekst, linkovi itn. za cela strana<BODY BGCOLOR="#xxxxxx" TEXT="#xxxxxx" LINK="#xxxxxx" VLINK="#xxxxxx" ALINK="#xxxxxx">

Kraj na redot nov red <BR>

Nov pasus <P>

Rastojanie (specijalen znak)

poveke prazni redovi <BR>

Slika za pozadina <BODY BACKGROUND="xxxxx.gif"> (ili .jpg)

dodavanje slika <IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456>

Izvor na slika (SRC)

Slka-link <A HREF="http://xxxxx"><IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456></A>

Atribut ALT <IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456 ALT="Tekst koj ja opisuva slikata">

Dodavanje link <A HREF="http://mojedelo.html">Moe delo</A>

Dodavanje e-mail link <A HREF="mailto:[email protected]">Pisi mi!</A>

Slika-link <A HREF="http://xxxxx"><IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456></A>

Link do konkreten del na nekoja strana <A HREF="http://xxxxx#nesto_vazno">Nešto važno</A>

Centriranje <CENTER>xxxxx</CENTER>

Dodavanje margini na tagot <BLOCKQUOTE>

ORDERED i UNORDERED listi<UL> (ili OL)<LI>List item</UL>

Definiciona lista<DL><DT>Definicioni naslov<DD>Elementi lista</DL>

Horizontalna linija <HR ALIGN=left|right|center WIDTH=80% SIZE=3 NOSHADE>

Preformatiran tekst - <PRE> tag

Skelet HTML dokument - minimum neophodni tagovi<HTML><HEAD><TITLE>Naslov na web strana</TITLE></HEAD><BODY>Sadrzina na stranata</BODY></HTML>

Boja na pozadina <BODY BGCOLOR="#xxxxxx">

Naslov na dokumentot <TITLE>Ovde ide naslov</TITLE>

Slika za pozadina BACKGROUND="ime_slike.gif" (ili .jpg)

Tag za komentar 

1.HTML(HEAD,TITLE,BODY)

Подигнете Notepad и започнете со ова ...

<HTML></HTML>

Овие се HTML тагови. Постојат почетен и краен таг. Да се направи

затворање на тагот, само додадете / до почетниот таг. Голем број

на картичките имаат затворање на тагот (но не сите).

Мислете на таговите, како на разговор со пребарувач или како

начин на давање на инструкции на прелистувачот. Она што го

напишавме пред малку пребарувачот "разбира" како "Ова е почеток

на HTML документ (<HTML>) и Ова е крајот на документот HTML (</

html>). Се разбира, помеѓу нив ќе додадеме оште нешто.

Во секој HTML документ треба да се најдат и HEAD тагови.

<HTML>

<HEAD>

</HEAD>

</HTML>

Следната работа која треба да се додаде во HEAD е наслов

(TITLE).

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

</HTML>

Главниот дел на документот HTML се наоѓа помеѓу BODY таговите.

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

На крајот ќе додадеме наслов на нашата web страна и ќе додадеме

нешто во телото на документот.

<HTML>

<HEAD>

<TITLE>Moja prva web strana</TITLE>

</HEAD>

<BODY >

Mala Web strana!

</BODY>

</HTML>

Сега треба документот да го снимаме,не како текст а како HTML

документ.Снимете го како PAGE1.HTML во некој нов фолдер.

2.HTML(COLOR,BACKGROUND,FONT)

ЗА да работите изгледаат појасно ќе ги изоставиме <HTML>, <HEAD> i <TITLE> таговите и ќе разговараме само за <BODY> тагот.

Прво треба да научиме како се менува бојата на позадината.

<BODY BGCOLOR="#330000”>Mala Web strana!</BODY>FFFFFF-е бела боја на компјутерскиот јазик.Останатите бои ќе ги видите подолу.

330000

333300

336600

339900

33CC00

33FF00

66FF00

66CC00

669900

666600

663300

660000

FF0000

FF3300

FF6600

FF9900

FFCC00

FFFF00

330033

333333

336633

339933

33CC33

33FF33

66FF33

66CC33

669933

666633

663333

660033

FF0033

FF3333

FF6633

FF9933

FFCC33

FFFF33

330066

333366

336666

339966

33CC66

33FF66

66FF66

66CC66

669966

666666

663366

660066

FF0066

FF3366

FF6666

FF9966

FFCC66

FFFF66

330099

333399

336699

339999

33CC99

33FF99

66FF99

66CC99

669999

666699

663399

660099

FF0099

FF3399

FF6699

FF9999

FFCC99

FFFF99

3300CC

3333CC

3366CC

3399CC

33CCCC

33FFCC

66FFCC

66CCCC

6699CC

6666CC

6633CC

6600CC

FF00CC

FF33CC

FF66CC

FF99CC

FFCCCC

FFFFCC

3300FF

3333FF

3366FF

3399FF

33CCFF

33FFFF

66FFFF

66CCFF

6699FF

6666FF

6633FF

6600FF

FF00FF

FF33FF

FF66FF

FF99FF

FFCCFF

FFFFFF

0000FF

0033FF

0066FF

0099FF

00CCFF

00FFFF

99FFFF

99CCFF

9999FF

9966FF

9933FF

9900FF

CC00FF

CC33FF

CC66FF

CC99FF

CCCCFF

CCFFFF

0000CC

0033CC

0066CC

0099CC

00CCCC

00FFCC

99FFCC

99CCCC

9999CC

9966CC

9933CC

9900CC

CC00CC

CC33CC

CC66CC

CC99CC

CCCCCC

CCFFCC

000099

003399

006699

009999

00CC99

00FF99

99FF99

99CC99

999999

996699

993399

990099

CC0099

CC3399

CC6699

CC9999

CCCC99

CCFF99

000066

003366

006666

009966

00CC66

00FF66

99FF66

99CC66

999966

996666

993366

990066

CC0066

CC3366

CC6666

CC9966

CCCC66

CCFF66

000033

003333

006633

009933

00CC33

00FF33

99FF33

99CC33

999933

996633

993333

990033

CC0033

CC3333

CC6633

CC9933

CCCC33

CCFF33

000000

003300

006600

009900

00CC00

00FF00

99FF00

99CC00

999900

996600

993300

990000

CC0000

CC3300

CC6600

CC9900

CCCC00

CCFF00

These are the grays:

000000 333333 666666 999999 CCCCCC FFFFFF

Секако место боја за позадина може да ставиме и некоја слика(засега сликата треба да е у ист фолдер како и нашиот документ).<BODY BACKGROUND="N.gif">За да би се сликата покажала на нашиот броузер треба да биде во можност да ја пронајде.Затоа треба да е во ист фолдер.Сега се враќаме пак на почетокот и ќе пробаме да ги здебелиме нашите букви.

Mala Web<B>strana</B>Значи само текстот меѓу <B>strana</B> ќе биде здебеленАко сакаме да биде закосенMala <I>Web</I> <B>strana</B> Текстот само меѓу <I>Web</I> ќе биде закосен

Ако сакаме да биде подвлечен

<U>Mala</U> <I>Web</I> <B>strana</B>Текстот помеѓу <U>Mala</U> ќе биде подвлечен

Ако сакаме фонтот да биде со фиксирана должина<TT>Mala Web strana</TT>Секоја буква зазима еднаква количина хоризонтален простор.

Исто така може да ја менуваме и големината на фонтот и тоа многу едноставно<BODY BGCOLOR="#FFFFFF">Mala Web <FONT>strana</FONT></BODY> И ја одредуваме големината на атрибутот SIZE. <BODY BGCOLOR="#FFFFFF">Mala Web <FONT SIZE=6>strana</FONT></BODY>постојат 7 величини на фонтот

Ако не е нагласена големината на фонтот по дифолт ќе биде 3.Секој броузер има подесено фонтови по подразбирање(име,големина,боја).Доколку ништо не сте прикалиле,Фонтот по подразбирање е Times New Roman od 12pt (у HTML e 3),црна боја.Секако доколку сакаме во нашиот HTML документ ќе користеме и друѓи фонтови.На пр.ARIAL,VERDANA...

<BODY BGCOLOR="#FFFFFF">Mala Web <FONT FACE="ARIAL">strana</FONT></BODY>

Многу важно да се напомене е дека фонтот ќе се види само ако го имаме инсталирано тај фонт на компјуитерот.Ако го немаме текстот ќе биде преставен по дифолт фонт.Во Windows се многу чести фонтовите ARIAL и VERDANA.Да го немаме овој проблем може да наведеме повеќе од еден фонт.<FONT FACE="ARIAL, HELVETICA, VERDANA">Zdravo</FONT>.

Малку објаснување...Броузерот бара фонт ARIAL.Ако го најде го користи ако не тогаш го бара следниот од наведените фонтови ако и тој не го пронајде преминува на третиот,а ако не пронајде ниту еден ќе го користи тој по подразбирање.Ок се враќаме назат и ќе пробаме да ја смениме бојата на фонтот

<BODY BGCOLOR="#FFFFFF">Mala Web <FONT COLOR="#FF0000">>strana</FONT></BODY>и ќе добиеме срвена боја на нашиот збор

Во еден таг можеме да користеме повеќе атрибути <BODY BGCOLOR="#FFFFFF">Mala Web <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="6">>strana</FONT></BODY>Ќе имаме црвена боја со фонт ARIAL и големина на зборот 6

Доколку сакаме и да го здебелиме закосиме и подвлечеме нашиот збор тагот ќе го напишеме на следниов начин.<BODY BGCOLOR="#FFFFFF">Mala Web <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="6">>strana</FONT><U><I><B>

</BODY>Распоредот на таговите кој е прв кој втор кој трет не е битен.За крајот на оваа лекција да напоменеме дека нашиот броузер има дифолтни преставуванја и тоа:

-Текстот е црн-Линковите се плави-Активните линкови се црвени-Посочените линкови се лилјакови.

Доколку сакате овиа вредности по подразбиранје се менјаат многу лесно и тоа за целиот наш HTML документ може да ги промениме.Еве како

<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">Mala Web strana</BODY>

Освент тоа може да си направите и сопствен rollercoaster! или било кој друг збор со разлицна големина на секоја буква ако ве интересира.

r<FONT SIZE=4>o</FONT><FONT SIZE=4>l</FONT><FONT SIZE=5>l</FONT><FONT SIZE=6>e</FONT><FONT SIZE=7>r</FONT><FONT SIZE=7>c</FONT><FONT SIZE=6>o</FONT><FONT SIZE=5>a</FONT><FONT SIZE=4>s</FONT><FONT SIZE=3>t</FONT><FONT SIZE=2>e</FONT><FONT SIZE=1>r!</FONT>

За на крај HTML кај која било страна може едноставно да се погледне.Притиснете View/Source на броузерот.

3.HTML(BR,P,IMG)

Во оваа лекција ќе почнеме со мало објаснуванје како броузерот работи.Прво еден пример

<BODY BGCOLOR="FFFFFF">Mal kratok tekst vo HTML-ot</BODY>

броузерот не ја препознава формацијата во текстот.Доколку не го нагласеме поинаку,целиот текст ќе биде напишан во еден ред,мораме да користеме таг кој ќе одговара.

<BODY BGCOLOR="#FFFFFF">Mal<BR>kratok <BR>tekst <P> vo HTML-ot</BODY>

<BR> Во основа значи наредба да почне нов ред.Сличен на тагот <BR> е тагот <P>.Овој таг означува почеток на нов пасус,со ефект за премин во нов ред и прескокнуванје на еден ред.

Напоменуваме дека <P> тагот не може да се користи повеќе пати.Со други зборови <P><P><P> нема да претстави повеќе празни редови него само еден празен ред.Зошто?Како да додадеме повеќе празни редови?Одговорот ќе ни е во наредниот пример.<BODY BGCOLOR="#FFFFFF">Mal kratok tekst</BODY>

Броузерот не препознава повеќе од едно празно место.Можеби делува чудно но е така.Важно е да тоа ви дава подобра контрола над текстот.Постои таг кој за броузерот преставува празно место - &nbps;

<BODY BGCOLOR="#FFFFFF">Mal&nbps;&nbps;&nbps; kratok &nbps; tekst&nbps;&nbps;&nbps;&nbps;

</BODY> Знакот & значи почеток на некој спецјален знак додека ; означува крај.Постојат голем број на такви знакови.Нај користените се :(секогаш да се користат мали букви)-&nbps;(едно празно место)-<помалку од)->повеќе од)-&(&)-&guot;(navodnici)-(црта)

Постојат оште многу спецјални кратенки

Следниот таг (center) е многу корисен .Името му говори за него

<BODY BGCOLOR="#FFFFFF"><CENTER> Mal kratok tekst</CENTER></BODY>

Множе да центрираме еден збор или цела страница.Се помеѓу <CENTER> таговите ќе биде центрирано.

Сега ќе преминеме на ставање на слиќи на web страната.Ќе го користеме знамето на македонија.Снимете ја сликата во вашиот фолдер.За ставање на слики се користи <IMG> тагот.

<BODY BGCOLOR="#FFFFFF"><IMG></BODY>Исто така мора да го одредиме сорсот односно изворот и големината на сликата<BODY BGCOLOR="#FFFFFF"><IMG SRC="zname.jpg" WIDTH=124 HEIGHT=150></BODY>

Овде мора да нагласиме дека атрибутот src не ја покзува само сликата која е во прасање,него и каде таа се наоѓа.дијаграмот кој следува би требало да ви го разјасни овој атрибут,ако сакаме та ставиме слика која се вика "chef.gif".

SRC="chef.gif" Значи дека се сликата наоѓа у истиот фолдер у кој е и HTML документот,кој се повикува.

SRC="images/chef.gif" значи дека се сликата наоѓа во фолдерот под HTML документот кој се повикува.Прашањето е колку нивоа под?Онолку колку е потребно (а во нашиот случај еден)

SRC="../chef.gif" значи дека сликата е у фолдерот над HTML документот кој се повикува.

SRC="../../chef.gif" значи дека сликата е два фолдера над HTML документот кој се повикува.

SRC="../images/chef.gif" значи дека сликата е еден фолдер горе,па еден доле у однос на HTML документот.

SRC="../../../other/images/chef.gif" - се надевам дека сами ќе разберете.

Постои и друг начин.Односно можете да користите комплетни URL-ови.

Следниот атрибут на IMG тагот кој треба да го спомнеме е ALT...<IMG SRC="zname.jpg" WIDTH=124 HEIGHT=150 ALT="Zname na Makedonija!">ALT преставува замена за сликата,кога посетувачот на сајтот не ѓи гледа сликите(од било какви причини).Некој може да користи чист текстуални броузер,некој можеби ги е исклучил прикажувањето на сликите.Во таков случај атрибутот ALT може да биде многу важен на нашите посетувачи.

Можеме да ја дефинираме било која величина на сликата,не сврзано со нејзината права големина.Ако не е јасно ке погледнеме сто се мозе да направиме со една мала црвена точка(слика со димензија 1x1).

<BODY BGCOLOR="#FFFFFF"><IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P><IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P><IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P><CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER></BODY>

4.HTML(Правење линкови)

Ова е многу едноставна задаца .Да направиме линк на YAHOO.

<BODY BGCOLOR=”#FFFFFF”>

Posetete go YAHOO!

</BODY>

Потоа ќе додадеме неколку ANCHOR тагови.


Posetete <A>go YAHOO!</A>

</BODY>

Го додаваме URL-то. URL-то е кратенка од Universal Resource Locator(тоа значи универзален локатор),односно значи web адресата.


Posetete go <A HREF=”http://www.yahoo.com/”> YAHOO! </A>

</BODY>

Ќе направиме оште еден.


Posetete go <A HREF=”http://www.home.netscape.com/”> NETSCAPE! </A>

</BODY>

Линкот за e-mail работи многу слично,единствената разлика е тоа што наместо web адресата се користи e-mail адресата.


Pisete mi <A

HREF=”https://www.mailto:[email protected]?subject=zdravo,aspa”> mail! </A>

</BODY>

Треба да имаме на ум дека некои меил клиенти не ја подржуваат оваа функција.

Може да користеме и слики како линкови.Потребно е да ставиме <IMG>таг наместо зборовите.


Posetete go <A HREF=”http://www.gmail.com/”><IMG SRC="zname.jpg" WIDTH=124 HEIGHT=150 BORDER=0 ALT=”Links”> </A>

</BODY>

Кога ставаме слики за линкови тиа содржат многу податоци па се бавно читаат затоа ако сликата е преголема по добра опција е да ја конвертираме т.е. оптимизираме .

Постои оште една вста на додаванје на линк.Прво го означуваме делот за кој се работи,земаме некој збор и го додаваме помегу <A></A> тагот.

Го означуваме делот на кој ќе прескокнеме така што ќе го именуваме /NAME=”ime”/.

<A Name =”upabit”>Dodajte </A>URL adresata I gotovo

Додаваме име на документот

Klikni <A HREF="12.html">ovde</A>И на крајот додаваме Name атрибутKlikni <A HREF="12.html#upabit">ovde</A>

5. HTML(ORDERED ,UNORDERED)

Ке прејдеме на некои алатки за форматирање на текст. Првиот <Blockquote> Во повеќето пребарувачи, овој таг ќе додаде маргина на страна.

<BODY BGCOLOR="#FFFFFF"><BLOCKQUOTE>Definicija: Kompjuterot prestavuva sklop na visokotehnoloski komponenti (hardware) opremeni so programi (software)so zaednicka cel da se ovozmozi masovna obrabotka na podatocite…. </BLOCKQUOTE></BODY>

Следната корисна алатка се листите.Они можат да бидат ORDERED листи или UNORDERED листи.

Ова е ORDERED листа1.nesto2.uste nesto3.i ova4.i kraj

Ова е UNORDERED листа

crveno plavo belo zeleno

Прво ќе видиме како се прави UNORDERED листа

<BODY BGCOLOR="#FFFFFF"> Sto sakam za rodenden ?<UL><LI>nov PC<LI>brz gliser<LI>1.000.000 $

</UL></BODY>

Сега ќе видеме како се прави ORDERED листа.Само наместо <UL>тагот ко преименуваме во <OL>.<BODY BGCOLOR="#FFFFFF"> Sto sakam za rodenden ?<ОL><LI>nov PC<LI>brz gliser

<LI>1.000.000 $</ОL></BODY>Освен овие две постои и дефинирана листа <DL>.

<BODY BGCOLOR="#FFFFFF"><DL><DT><B>Definicija za kompjuter</B><DD> Definicija: Kompjuterot prestavuva sklop na visokotehnoloski komponenti (hardware) opremeni so programi (software)so zaednicka cel da se ovozmozi masovna obrabotka na podatocite….</DL></BODY>Следната корисна работа е хоризонталната линија(и во овој случајпостојат додатни опции).<BODY BGCOLOR="#FFFFFF"><HR WIDTH=20%><HR WIDTH=50%><HR WIDTH=100%><HR WIDTH=20><HR WIDTH=50><HR WIDTH=100></BODY>

Линијата може да ја поставиме лево,десно или да ја центрираме.<BODY BGCOLOR="#FFFFFF"><HR WIDTH=60% ALIGN=LEFT><HR WIDTH=60% ALIGN=RIGHT><HR WIDTH=60% ALIGN=CENTER></BODY>

Можеме да ја контролираме и дебелината(дефолтната вредност е 2),како и бојата.

<BODY BGCOLOR="#FFFFFF"><HR WIDTH=60% SIZE=1><HR WIDTH=60% SIZE=3 COLOR="RED"><HR WIDTH=60% SIZE=8><HR WIDTH=60% SIZE=15></BODY>

Исто така линијата може да биде и пополнета.<BODY BGCOLOR="#FFFFFF"><HR WIDTH=60% SIZE=1 NOSHADE><HR WIDTH=60% SIZE=3 NOSHADE><HR WIDTH=60% SIZE=8 NOSHADE><HR WIDTH=60% SIZE=15 NOSHADE></BODY>Последнит таг кој ќе го разгледаме е тагот за коментар.<BODY BGCOLOR="#FFFFFF">Ovоа ne e <P>Komentarot moze da se najde bilo kade vo HTML FAJLOT,A BROUZEROT KE IGNORIRA SE STO SE NAOGA VNATRE VO KOMENTAROT .Ovoj tag mozeme da go koristime za dodavanje na srieni poraki ,sluzi kako nekoj vid na potsetnik za samite nas ili mozete da dodadete nekoj korisen sovet za onie sto go gledat vasiot sors kod.</BODY>

6.HTML табела(TR,TD)

Целата табеларна збрка има три основни тага...

<TABLE>

Основен таг.Тој зборува на броузерот”ова е табела”,заедно со неколкуте атрибути како што се големина,дебелина,ивица и т.н

<TR>

Овој таг(table row) означува хоризонтални редови,кои се состојат од еден или повеќе.

<TD>

Овој таг(table data) означува поединечен блок или целата внатрешност на еден ред.

Треба да заклучиме дека табелата се состои од редови кои пак се состојат од клетки.

Сега треба документот да го снимаме,не како текст а како HTML

документ.Снимете го како PAGE1.HTML во некој нов фолдер.

На почетокот го додаваме тагот <TABLE></TABLE>во тагот <BODY><HTML><HEAD><TITLE> Tabeli</TITLE></HEAD><BODY> <TABLE></TABLE> </BODY></HTML>

Секоја табела мора да има барем еден хоризонтален ред(row).

<HTML><HEAD><TITLE>Tabeli</TITLE></HEAD><BODY> <TABLE><TR></TR></TABLE> </BODY></HTML>Секако дека и секој ред мора да има барем едно поле.

<HTML><HEAD><TITLE>Tabeli</TITLE></HEAD><BODY> <TABLE><TR><TD></TD></TR></TABLE>

</BODY></HTML>Сега е потребно да ставиме нешто во нашето поле.

<HTML>

<HEAD>

<TITLE>Tabeli</TITLE>

</HEAD>

<BODY>

<TABLE><TR><TD> ASPA</TD></TR></TABLE> </BODY></HTML>

Сега на нашата табела ќе додадеме неколку редови со неколку полиња.Ќе

ја зададеме и ивицата на нашата табела,исто така ќе ја зададеме ширината

и висината на нашата табела.

<HTML><HEAD><TITLE>Tabeli</TITLE></HEAD><BODY> <TABLE BORDER=15 WIDTH=100 HEIGHT=50><TR><TD> IME</TD><TD> Prezime</TD><TD> Grad</TD>

</TR>

<TR><TD> Asparuh</TD><TD> Petrov</TD><TD> Kochani</TD>

</TR>

</TABLE> </BODY></HTML>

Исто така ширината и висината може да ја зададеме и во

%.Понатаму во нашата табела,зборот во полето може да го

зададеме каде сакаме да се наоѓа(лево,на центар,десно по

хоризонтала или горе,долу на средина по вертикала).

<HTML><HEAD><TITLE>Tabeli</TITLE>

</HEAD><BODY> <TABLE BORDER=15 WIDTH=100% HEIGHT=50%><TR><TD ALIGN=LEFT VALIGN=TOP> IME</TD><TD ALIGN=RIGHT VALIGN=BOTTOM> Prezime</TD><TD ALIGN=CENTER VALIGN=MIDDLE> Grad</TD>

</TR><TR><TD ALIGN=LEFT VALIGN=TOP> Asparuh</TD><TD ALIGN=RIGHT VALIGN=BOTTOM> Petrov</TD><TD ALIGN=CENTER VALIGN=MIDDLE> Kochani</TD>

</TR>


Исто така може да додадеме и слика.На нашата табела ќе додадеме и ќе се запознаеме со два атрибута CELLPADDING i CELLSPACING.Овие атрибути се користат внатре во тагот<TABLE>. CELLPADDING преставува количината на просторот помеѓу ивицата,полето и содржајното поле и неговата дифолтна вредност е 1.А додека со додавањето на CELLSPACING добиваме малку по различен ефект а неговата дифолтна вредност е 2.

<HTML><HEAD><TITLE>Tabeli</TITLE></HEAD><BODY> <TABLE BORDER=15 WIDTH=100% HEIGHT=50% CELLSPACING=10 CELLPADDING=10><TR><TD ALIGN=LEFT VALIGN=TOP> IME</TD><TD ALIGN=RIGHT VALIGN=BOTTOM> Prezime</TD><TD ALIGN=CENTER VALIGN=MIDDLE> Grad</TD>


</TR><TR><TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="zname.jpg" WIDTH=32 HEIGHT=32></TD>

</TR>


Исто така на нашата табела ќе и додадеме и боја,може да додадеме боја и

на полето и на редот.

<HTML><HEAD><TITLE>Tabeli</TITLE></HEAD><BODY> <TABLE BORDER=15 WIDTH=100% HEIGHT=50% CELLSPACING=10 CELLPADDING=10 BGCOLOR="#009900"><TR BGCOLOR="#009900"><TD ALIGN=LEFT VALIGN=TOP BGCOLOR="#009900"> IME</TD><TD ALIGN=RIGHT VALIGN=BOTTOM> Prezime</TD><TD ALIGN=CENTER VALIGN=MIDDLE> Grad</TD>


</TR><TR>

<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="zname.jpg" WIDTH=32 HEIGHT=32></TD>

</TR>


7.HTML table(COLSPAN i ROWSPAN)

Ќе преминеме на следните атрибути COLSPAN i ROWSPAN.Ќе претпоставиме дека презимето испаѓа од табелата и името го земе местото на презимето тогаш го користиме атрибутот COLSPAN но доколку испадне и градот името го презима целиот ред и го ставаме на центар.Исто така може да го здибелеме,накосиме подвлечеме зборот.Веројатно и самите претпоставувате дека атрибутот ROWSPAN е сличен на атрибутот COLSPAN освен што првиот делува на редовите а не на колоните.<HTML><HEAD><TITLE>Tabeli</TITLE></HEAD><BODY> <TABLE BORDER=15 WIDTH=100% HEIGHT=50% CELLSPACING=10 CELLPADDING=10 BGCOLOR="#009900"><TR BGCOLOR="#009900"><TD ALIGN=LEFT VALIGN=TOP BGCOLOR="#009900" ROWSPAN=2> IME</TD><TD ALIGN=RIGHT VALIGN=BOTTOM COLSPAN=2> Prezime</TD><TD ALIGN=CENTER VALIGN=MIDDLE> Grad</TD>



</TR>


Сега ќе пробаме да додадеме и UNORDERED и ORDERED листа и табела во табела.

<HTML><HEAD><TITLE>Tabeli</TITLE></HEAD><BODY> <TABLE BORDER=15 WIDTH=100% HEIGHT=50% CELLSPACING=10 CELLPADDING=10 BGCOLOR="#009900"><TR BGCOLOR="#009900"><TD ALIGN=LEFT VALIGN=TOP BGCOLOR="#009900" ROWSPAN=2> IME</TD><TD ALIGN=RIGHT VALIGN=BOTTOM COLSPAN=2> Prezime</TD><TD ALIGN=CENTER VALIGN=MIDDLE> Grad</TD>



</TR><TD>Satojki za pita od jabolki<UL><LI>Jabolko<LI>Brashno<LI>Sheker<LI>Cimet</UL></TD> </TR><TR><TD>

<TABLE BORDER=3><TR><TD>Asparuh</TD></TR></TABLE> </TD></TR>


Постои и ситуација во кои табелите помагаат да се реши еден чест

проблем.На пример имате идеја за една добра анимација .гиф

слика,меѓутоа сликата која сакате да ја користите е голема.Бидејќи

знаете дека анимираната слика во основа е сирија на слики која

идат една после друга сцаќате дека вашите посетували нема да

бидат баш пресреќни да чекаат да се прочита големата слика а не

само тоа нивните броузери ќе пробуваат да ја прикажат таа

слика.на следниот пример ќе видеме како бива со помош на

табели.

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><CAPTION ALIGN=top><FONT SIZE=6><B><I>AMD vs. Intel?</I></B></FONT></CAPTION> <TR><TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD><TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD><TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD></TR> <TR><TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD></TR> <TR><TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD></TR> </TABLE>Еве и сќица како ќе изгледа

А еве и како ќе изгледа нашата слика во табелата.

8.HTML обрасци

Основната конструкција на HTML обрасците изгледа вака..

<FORM> почеток образецот <INPUT>се користи за внес на информации на повеќе начини <INPUT> вакви полиња за внес на информации може да има во неограничен број </FORM> крај на образецотНа броузерот мора да кажеме каде и како да ги прати собраните податоци.Постојат два начина за тоа.првиот е податоците да можат да бидат пратени до CGI скрипта за пбработка.Одредени податоци ни се праќаат на меил,ова е препорачан метод.Другиот начин е да можат директно да се пратат на меил користејќи tzv.ова е едноставен начин .Ќе почнеме со промер од вториот метод.

<HTML><HEAD><TITLE>nas prv obrazec</TITLE></HEAD><BODY>

<FORM METHOD=POST ACTION="mailto:[email protected]" ENCTYPE="text/plain"></FORM>

</BODY></HTML>

Се сто е потребно е да напишеме наш меил на полето [email protected],за да би се пратиле нашите податоци на повеќе од еден мора да бидат меиловите одвоени со запирка [email protected],[email protected],[email protected].

mailto:[email protected],[email protected],[email protected]

mailto:[email protected],%D0%B7%D0%B0

Најчест тип(TYPE) н Образецот <INPUT> e TEXT.Секој INPUT мора да има име (NAME).

Кога посетувачот ја напише својата адреса (пр.булевард илинден 123) адресата постанува вредност на INPUT и се спојува со ADDRESS така крајниот резултат после обработката е ADDRESS=boulevard ilinden 123.


<FORM >

<INPUT TYPE=TEXT NAME="ADDRESS"></FORM>

</BODY></HTML>

Доколку сакаме можеме и веднаш да внесеме вредност(VALUE).

Исто така може да ја внесеме и големината за внес на текст,стандартната големина е 20,исто така може да внесеме и ограничен браој на напишани знакови.


<FORM >

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE=" boulevard ilinden 123" SIZE=10 MAXLENGTH=10></FORM>

</BODY></HTML>

Многу сличен атрибут на TYPE=TEXT е атрибутот TYPE=PASSWORD.Тоа е иста работа но место знакови ќе ни покаже *****.

<INPUT TYPE=PASSWORD>

Треба да запомтиме дека секој внес (<INPUT>) мора да има име (NAME).

<INPUT TYPE=PASSWORD NAME="USER PASSWORD">

Атрибутите SIZE, VALUE, i MAXLENGTH важат и овде. <TAG> зборува на броузерот да направи нешто.Атрибутот оде внатре во тагот,и зборува на броузерот како да го направи она што го бара тагот.

Наредното што ќе го разгледаме е RADIO BUTTONS i CHECK BOXES.Основната разлика е тоа што RADIO BUTTONS овозможува на корисникот да избере да избере една од понудените можности а CHECK BOXES овозможува да се избере една,повече или сите понудени опции.


<FORM >

<CENTER><TABLE WIDTH=400 BORDER=1 CELLSPACING=1>

<TR>

<TD WIDTH=99>koj ti e najdobar drugar? <BR>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE=" boulevard ilinden 123" SIZE=10 MAXLENGTH=10>

<INPUT TYPE=PASSWORD NAME="USER PASSWORD">

<INPUT TYPE=RADIO NAME="NAJDOBAR DRUGAR" VALUE="Pero"> Pero Perov <BR>

<INPUT TYPE=RADIO NAME="NAJDOBAR DRUGAR" VALUE="trajce"> trajce trajcev <BR>

<INPUT TYPE=RADIO NAME="NAJDOBAR DRUGAR" VALUE="oli"> oli oliev<P>

</TD>

<TR>

<CENTER><TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>

<TD WIDTH=199>Ko ti se drugari od dolu navedenite?<BR><INPUT TYPE=CHECKBOX NAME="Drugar?..Pero" VALUE="YES"> Pero Perov<BR><INPUT TYPE=CHECKBOX NAME="Prijatelj?..Trajce" VALUE="YES"> trajce trajcev<BR><INPUT TYPE=CHECKBOX NAME="Prijatelj?..oli" VALUE="YES"> oli oliev<P>

</TD>

<TD WIDTH=200>Na koj bi mu pozajmile pari?<BR><INPUT TYPE=CHECKBOX NAME="Pozajmica?...Pero" VALUE="YES"> Pero Perov <BR><INPUT TYPE=CHECKBOX NAME="Pozajmica?...trajce" VALUE="YES"> trajce trajcev <BR><INPUT TYPE=CHECKBOX NAME="Pozajmica?...oli" VALUE="YES"> oli oliev<P>

</TD>

</TR></TABLE></CENTER>

</FORM>

</BODY></HTML>

Следно што ќе разгледаме е PULL DOWN LIST.Овде ќе користиме <SELECT> наместо <INPUT>. Да не забравиме и овде треба да има име и некоја опција за додавање.Дифолтна опција за избирање е секогаш првата доколку не селектираме друга опција.Доколку сакаме листата да ни е SCROLLING го додаваме атрибутот SIZE во тагот <SELECT>.


<FORM >

<SELECT NAME="NAJDOBAR DRUGAR" SIZE=2 >

<OPTION VALUE="PERo">Pero<OPTION VALUE="Trajce" SELECTED>Trajce<OPTION VALUE="oli">Oli</SELECT>

</FORM></BODY></HTML>

Следниот корисен тип на инпут е <TEXTAREA>.Можеме исто така да ја контролираме и големината на прозорецот ROWS ја покажува висината а COLS ја покажува ширината на прозорецот.Исто така корисен атрибут е WRAP.

WRAP=VIRTUAL-значи дека текстот во прозорот ќе биде кршен но ќе биде пратен како еден долг непреќинат ред

WRAP=PHYSICAL- значи дека текстот во прозорот ќе биде кршен но така и ќе биде пратен

WRAP=OFF- значи дека текстот во прозорот нема да биде кршен но ќе биде пратен онака како е откуцан


<FORM >

<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50 WRAP=VIRTUAL></TEXTAREA></FORM>

</BODY></HTML>

Следен тип на инпут е HIDDEN.<INPUT TYPE=HIDDEN NAME="LOCATION" VALUE="USA Form">HIDDEN е име/вредност која ни се враќа но не се гледа никаде на веб страната.Пример ако сме некоја компанија која собира информации за мислење на некои нови производи.И имаме стандарден образец за собирање на информации(име,компанија,телефон,занимливи производи итн..)единствен проблем е што постојат шест слични но не

исти верзии на обрасци на шест слични места.Можно решение е додавање на HIDDEN инпут во обрасците..<INPUT TYPE=HIDDEN NAME="OBRAZAC" VALUE="Verzija 1"> ...za prva verzija<INPUT TYPE=HIDDEN NAME="OBRAZAC" VALUE="Verzija 2"> ...za vtora verzija<INPUT TYPE=HIDDEN NAME="OBRAZAC" VALUE="Verzija 3"> ...za treta verzijaИ така до последната верзија.Исто така многу корисен може да биде и FILE UPLOAD.Со помош на овој инпут посетувачот на сајтот може да ни прате некој фајл директно от кај него.Но треба да знаеме дека исто така у тагот FORM,мора да користиме ENCTYPE="multipart/form-data".После на листата се SUBMIT i RESET екрански тастери<INPUT TYPE=FILE NAME="myfile">


<FORM ENCTYPE="multipart/form-data">

<INPUT TYPE=FILE NAME="myfile">

<INPUT TYPE=SUBMIT VALUE="vic za nas"><BR><INPUT TYPE=RESET VALUE="Brisi obrazac!"><P>

</FORM>

</BODY></HTML>

9.HTML Фрејмови

Поделбата на страната на фрејмови е во суштина многу

лесна.Основно што треба да се знае е:секој фрејм е

обичен,комплетен HTML документ.Ако на пример ја делиме нашта страна на два фрејма,тогаш на нашиот лев фрејм ќе биде еден комплетен HTML dokument (npr. LEVO.HTML),додека десниот фрејм ќе биде комплетен HTML dokument (npr. DESNO.HTML).Меѓутоа главната работа е третиот HTML фајл.Оваа главна страна содржи <FRAME> тагови,кои казуваат каде сто доваѓа.Тоа е и единствената функција на овој таг.

Постојат само два главни фрејм тагови <FRAMESET> i <FRAME>.

<HTML><HEAD><TITLE>HTML Frejmovi</TITLE></HEAD><BODY>Ivana</BODY></HTML>

Го зачувуваме како IVANA.HTML,така правиме осте неколку вакви HTML со различни имиња во ист фолдер.

Го тргаме <BODY> тагот.Главната страна не ѓи користи наместо него го користи <FRAMESET>.Дефинираме како ќе

изгледа пр.нашиот броузер да е поделен на два еднакви дела.Потоа кажуваме на нашиот броузер сто дека да стави во кој прозор.

<HTML><HEAD><TITLE>Glavna strana</TITLE></HEAD>

<FRAMESET COLS="50%,50%" >

<FRAME SRC="ivana.html"> <FRAME SRC="dragana.html"></FRAMESET>

</HTML>

Наместо (COLS) можеме да користеме и (ROWS) исто така и поделбата може да биде и на повеќе делови истото така и на место во проценти може да биде и во пиксели.Исто така може да додадеме и слика.Исто така може да додадеме и скролбар и тиа може да бидат дефинирани како YES, NO ili AUTO. YES значи дека прозорчето ќе има скролбар без разлика дали е потребен или не, NO значи дека нема да го има без разлика дали е потребен и броузерот ќе приказе онолку колку е можно, AUTO е дифолтна вредност ако е потребен скролбар ќе се појави ако не е нема да се појави.Ако сликата не стои баш добро,сигурно сме приметиле дека броузерот остава малку пространство околу содржината на секој фрејм,тоа е заради естетиката.Меѓутоа и големината на маргините може да се контролира со помош на атрибутите MARGINWIDTH i

MARGINHEIGH,они контролираат лево и десно односно горе и доле.Може да ставиме и некои мали ефекти како BORDER, BORDERCOLOR, FRAMEBORDER.

<HTML><HEAD><TITLE>Glavna strana</TITLE></HEAD>

<FRAMESET COLS="50%,50%" BORDER=20 BORDERCOLOR="#FFOOOO" >

<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1 >

<FRAME SRC="ivana.html"> <FRAME SRC="dragana.html"></FRAMESET>

<FRAMESET ROWS="10%,20%,30%,15%,25%" FRAMEBORDER=NO> <FRAME SRC="ivana.html"> <FRAME SRC="dragana.html"> <FRAME SRC="maja.html"> <FRAME SRC="tina.html"> <FRAME SRC="slavica.html"></FRAMESET>

</HTML>

Следно што ќе направиме е нов фолдер и во него ќе снимаме

INDEX.HTML и слика која ќе се наоѓа на насловната страна ќе ја снимаме во работниот фолдер пр. FRAMZ1.GIF.Го делиме нашиот прозор

хоризонтално.Зошто ROWS="83,*"? Број 83 сме го добиле така што сме додали 8 на висина на сликата(75)што е препорачан метод за одредуванје на висината на фрејмовите.Приметете дека заради користење на апсолутни димензии имаме еден единствен фрејм.Потоа одредуваме да BANNER.HTML(ќе го направеме фунционален)

<HTML><HEAD><TITLE>Test strana Banner</TITLE></HEAD><BODY BGCOLOR="#0000FF"><CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER></BODY></HTML>

иде у горниот фрејм,исто така и неколку <FRAMESET> тагови,бидејќи тај долни фрејм ќе го делимена два дела.Нека левиот фрејм содржи NAVIGACIJA.HTML(ќе го направиме фунционален) и го линкуваме

<HTML><HEAD><TITLE>Test strana - Navigacija</TITLE></HEAD><BODY BGCOLOR="#FFFFFF">

<H3>Navigacija</H3>

<A HREF="home.html" TARGET="MAIN-WINDOW" >Home</A><P>

Dojdi <A HREF="ovde.html" TARGET="MAIN-WINDOW" >Ovde</A><BR>ili idi <A HREF="tamo.html" TARGET="MAIN-WINDOW" >Tamo</A><P>

Poseti<BR><A HREF=http://www.yahoo.com/ TARGET="_top" >Yahoo</A><BR><A HREF=http://home.netscape.com/ TARGET="_top" >Netscape</A>

</BODY></HTML>

а десниот HOME.HTML, OVDE.HTML i TAMO.HTML. (ќе ѓи направеме фунционални и ќе им зададеме име).

HOME.HTML

<HTML><HEAD><TITLE>Test strana - Home</TITLE></HEAD><BODY BGCOLOR="#FFFFFF"><H1 ALIGN=center>Ova e Dom (iliti Home).</H1>Dobrodojdovte na moj homepage! Ovaj mal web sajt treba bi da je atraktivan i ednostaven za navigacija.<P><CENTER>Uzivajte!</CENTER><P>Posetite Yahoo na <A HREF="https://www.yahoo.com" TARGET="_top"></A>. </BODY></HTML>

http://home.netscape.com/

http://www.yahoo.com/

OVDE.HTML

<HTML><HEAD><TITLE>Test strana Ovde</TITLE></HEAD><BODY BGCOLOR="#FFFFFF"><H1 ALIGN=center>Ovde</H1>Dobrodojdovte Ovde. Tuka e pocetok na se. Se sto ne e tamu ovde e.</BODY></HTML>

TAMO.HTML.

<HTML><HEAD><TITLE>Test strana Tamo</TITLE></HEAD><BODY BGCOLOR="#FFFFFF"><H1 ALIGN=center>Ova e Tamo</H1>test test</BODY></HTML>

Откако ги направивме сите HTML документи функцуонални нашата главна INDEX.HTML со код напишан подолу ќе функционира со сите зададени линкови на нашата главна страна од лево и десно и ќе имаме наслов на нашата веб страна

<HTML><HEAD><TITLE>Test strana</TITLE></HEAD>

<FRAMESET ROWS="83,*"> <FRAME SRC="banner.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1 > <FRAMESET COLS="20%,80%"> <FRAME SRC="navigacija.html"> <FRAME SRC="home.html" NAME="MAIN-WINDOW"> </FRAMESET></FRAMESET>

</HTML>

10.Поставување на страната на сервер

Првото нешто кое треба да ни е јасно дека поставуванјето html

страна на мрежата е многу различна од провајдер до провајдер но и

од програма до програма.Прва работа која ни е потребна е некој

FTP програм. FTP е кратенка од File Transfer Protocol постојат и HTTP - HyperText Transfer Protocol.Едни од подобрите се Windows Commander, CuteFTP, FTP Explorer, Leech FTP, FTP Pomoćnik, 1st Transfer FTP.Во примерот ќе користиме Windows Commander.Следната работа која треба да се знае FTP адреса на серверот на кој ѓи префрлате вашите HTML страни како и (login name, user name) и (password).Ако ја поставеме пример на нашиот провајдер provajder.net неговиот ftp сервер се наоѓа најверојатно на ftp.provajder.net.

Го стартираме Windows Commander

1.Од кога е стартиран одеме на meni Commands а потоа

на опцијата FTP Connect

ftp://provajder.net/

http://www.evrsoft.com/

http://go.to/ftpomocnik

http://go.to/ftpomocnik

http://linux.fh-heilbronn.de/~debis/leechftp

http://www.ftpx.com/

http://www.globalscape.com/

http://www.ghisler.com/

2.Кога ќе ни се отвори овој прозорец одиме на New

connection

3.Во овој прозор подесете се како сто е прикажано на сликата

4.Сега едноставно треба да кликнете на Connect и да се конектирате на серверот на кој ќе биде презентацијата

5.Од едната страна ќе ни се појави ftp конекција која ќе изгледа како да имаме оште едем хард диск(односно како да посматраме два фолдера у исто време).Со едностано копирање (drag&drop) помеѓу прозорците можеме да ги аплоудираме нашите презентации.На ист начин можеме и да ги тргаме од нашиот ftp сервер.

1.Семинарската 30 поени.

2.Два колоквиума секој на пола матерјал(секој носи по 30 поени)

3.Редовност и активност :10 поени

4.Отценување:

55-64 (поени)-----6

65-74(поени)------7

75-84(поени)-----8

85-94(поени)----9

95-100(поени)----10

Documents

Web Dizajn Predavanja