изработка на сайт-seagarden.free.bg

ИКОНОМИЧЕСКИ УНИВЕРСИТЕТ – ВАРНА

Курсова работа

по

Компютърни технологии в рекламата и медийни

комуникации

ИЗГОТВИЛ: ПРОВЕРИЛ:

Йорданита Йорданова 42 гр. Фн: 12164

Гергана Велкова 42 гр. Фн: 11496

Пламена Василева 42гр. Фн: 12155

Павлина Станева 42гр. Фн: 11934

ДОЦ.Д-Р Стефан Дражев

ВАРНА 2014

Курсова работа по Компютърни технологии в рекламата и медийни комуникации

Стр 2 от 27

Йорданита Йорданова Гергана Велкова

Пламена Василева Павлина Станева

1. Въведение

Уебсайт представлява всяка съвкупност от отделни уеб страници, които се адресират на

общ URL -адрес1, състоящ се от името на домейн (част от интернет мрежата, което има свое

уникално име) и пътя на основната директория „/“ в мрежата. Всеки индивидуален уебсайт се

импортира в интернет, чрез домейна, на който е регистриран. За да бъдат достъпни сайтовете за

всички потребители, които се интересуват от тях, са създадени специални програми, наречени

интернет браузъри. Браузърът е компютърна програма, която „се използва за възпроизвеждане на

документи с хипермедия и уеб навигация, обикновено следвайки препратките в текста-

електронните връзки между части от един и същ или различни хипертекстове“2.

HTML или Hyper Text Markup Language, е езикът, чрез който се форматират web

страници, разбираем от уеб браузърите, чието буквално значение е: "хипертекстов език за

маркиране".3 Създаден е в края на 80-те години, като средство за обмяна на информация, чрез

предварително зададени текстови документи. Идеята е да може да се прехвърлят данни между

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

интернет мрежата и с помощта на хипервръзки, свързващи отделните страници на документите.

Съществува и международна организация- „World Wide Web Consortium“- W3C, чиято основна

задача е установяването на стандартите и правилата за кодиране на HTML- езика. Целта й е

създаване на оперативна съвместимост на мрежата- word wide web (www) като HTML, XHTML,

CSS и др. технологии. Самото описание, създаване или редактиране на всяка отделна web

страница става с помощта на текстов редактор, като условието е да притежава разширение html

или htm. За целите на курсовата работа, сме използвали Notepad, където се създават

последователни команди- тагове, които служат за указване на това как да бъде визуализиран

текста или изгледа на страницата, като цяло. Таговете служат за дефиниране на елементите във

WEB документа и се използват: за поставяне на заглавие на документа, за създаване на таблици и

1 Uniform Resource Locator- стандартизиран адрес на даден документ/ страница в интернет

2 http://bg.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D1%8A%D1%80

3 http://host.bg/bg/info/Za-HTML-i-XHTML


Стр 3 от 27



хипервръзки, за поставяне на изображения, формуляри и др. Т.е., това са нужните атрибути за

създаване на този вид документ.

За да започнем със създаването на уеб страницата ни, от менюто на windows, стартираме

програмата Notepad. Независимо от редактора, който ще използваме, за да напишем кода, обаче,

всички страници трябва да бъдат съобразени и създадени посредством езиковите правила на

HTML кода.

2. Описание на сайта seagarden.free.bg

2.1. Основни елементи в съдържанието на HTML

tag- специален HTML код, който служи за задаване на определена част от

страницата и се състои от:

- име, заградено в ъглови скоби: „<head>“, което е заглавната част на страницата и

съдържа информация за самото заглавие, което носи документа, изписано чрез “<title>”;

- тяло, т.е. обекта, който ще се форматира, като може да е текст, изображение или

др., изписвайки се по следния начин: „<body>“; от своя страна, това е основата на уеб

документа, в границите, на който се задава по- голямата част от съдържанието на страницата;

- край, който се бележи със знак „</>“

атрибут- служи за задаване на параметрите на форматирането; състои се от името,

знак за присвояване „=“ и стойност на атрибута.

Част от атрибутите, които може да се посочат към тялото (body) в HTML, са :

- color- чрез който се задава фон на текста в зададените граници. Към него се добавя

и желания от потребителя цвят, също изписан на английски език, което обаче важи само за

основните цветове: червен (red), зелен (green) и син (blue). За всички останали, се използва

т.н. кодиране чрез 16-сетична бройна система, като вместо езиковото название на цвета, се

задава негова цифрова алтернатива. При 16-сетичната бройна система се използват цифрите

от 0 до 9, но включително и латинските букви от A до F, т.е. 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C,

D, E, F. Именно така кодиран цвета може да се използва в HTML. При изписване на

съответния „цветен“ код, се ползва и знака диез „#“. Таблица с 216-те приложими вида web

цветове в 16-сетични стойности, може да разгледате на следната страница:

http://htmllessons.hit.bg/colors16.html.


Стр 4 от 27



Таблица с цветовете и техните кодови названия4:

Ц

вят

hex

стойност rgb стойност

Им

е

#00000

0 rgb(0,0,0)

blac

k

#FF000

0 rgb(255,0,0) red

#00FF0

0 rgb(0,255,0) lime

#0000F

F rgb(0,0,255) blue

#FFFF0

0 rgb(255,255,0)

yello

w

#00FFF

F rgb(0,255,255) cyan

#00800

0 rgb(0,128,0)

gree

n

#00008

0 rgb(0,0,128) navy

#80800

0 rgb(128,128,0) olive

#80008

0 rgb(128,0,128)

purp

le

#C0C0C

0 rgb(192,192,192)

silve

r

#00808

0 rgb(0,128,128) teal

#FF00F

F rgb(255,0,255)

mag

enta

#80000

0 rgb(128,0,0)

maro

on

#80808

0 rgb(128,128,128) gray

#FFFFFF rgb(255,255,255)

whit

e

- background- чрез който се задава изображението- фон на страницата, като

условието е да бъде във формат “gif” или „jpg“;

- text- за посочване цвета на текста;

- link- цвета на хипервръзка.

4 http://www.parvisait.com/html-colors.html


Стр 5 от 27



След като се зададе който и да е от параметрите на <body>, следва неговото затваряне

чрез </body>.

Важно е да се отбележи, че при създаването на интернет страница, трябва предварително

да се обособи отделна папка, в която да се съхранят всички файлове към индивидуалните

страници и изображения, които ще бъдат част от уеб страницата, с което ще си създадем

удобство, при указване на директорията им и свързване на отделните елементи.

2.2. Програмиране на основната страница

След като сме стартирали Notepad, в началото на структурата на нашия HTML документ

слагаме тага <!DOCTYPE HTML>, където <!> служи за създаване на коментар в страницата,

видим само в HTML кода:

<!DOCTYPEhtmlPUBLIC"-

//W3C//DTDXHTML1.0Transitional//EN""http://www.seagarden.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.seagarden.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name=”keywords” content=”морска", "градина","дъх на цветя" />

<title>seagarden</title>

<link REL="SHORTCUT ICON" href="favicon.ico">

<embed src="bird.mp3" autoplay="yes" hidden="true" volume="100%" loop="true" />

</head>

<body background="3.jpg" >

<font face="Segoe Print">

Тагът <html> се използва, за да покаже, че документа съдържа HTML. Редът <meta http-

equiv="Content-Type" content="text/html; charset=windows-1251"> е задължителен, за да може

съдържанието на уеб страницата ни да е на кирилица. Ще използваме <meta name=”keywords”

content=”морска", "градина","дъх на цветя" />, като това е мета тагът за ключови думи, който

обаче има препоръчителен, а не задължителен характер за страницата. Думите трябва да са така

подбрани, че също да дават най-точно описание на съдържанието на сайта. Отделят се една от

друга чрез запетаи. Дължината на ключовите думи не трябва да надхвърля 500 символа. След

това задаваме тага <head> в чието съдържание ще напишем и заглавието на нашата интернет

страница, поместено в <title>seagarden</title>, като, както се вижда, след изписване на тага и

самото име, следва и неговото т.н. затваряне, чрез знака „/“. Следва затваряне и на ъгловата скоба


Стр 6 от 27



на тага за заглавната част. „Seagarden“ ще се вижда всеки път при стартиране на страницата, в

отметките на браузъра. В документа сме добавили и тага <link REL="SHORTCUT ICON"

href="favicon.ico">, който не е задължителен, но се използва за да се покаже иконка до името на

сайта, изписвайки го в съответния браузър. Препоръчително е изображението- икона да бъде във

формат “ico” или „png“ и да се намира в същата папка (директория) с останалите фалове към

документа:

Тагът <href> служи за създаване на линк към друга страница или елемент, а тагът <link> -

организира навигация на серия документи. Следва и затваряща скоба за тази част от документа,

посредством </head>. Използваме кодът <embed src="bird.mp3" autoplay="yes" hidden="true"

volume="100%" loop="true" />, за да вградим музикален фон към страницата. Тагът <embed> се

разполага в секцията „head“ на страницата. В посоченият от нас код, при стартиране на интернет

страницата, се зарежда и музикален файл с известна продължителност и във формат mp3, като

сме задали параметрите така, че да не се показва контролен панел на звука, видим за

потребителите на страницата. Атрибутите са следните: src- указва името на звуковия файл;

autoplay и hidden, които се използват винаги заедно, а стойността на autoplay е винаги yes, като

по този начин музикалният фон започва да звучи при зареждане на страницата. Стойностите на

hidden могат да бъдат true и false, като стойността true указва да не се появява панела за контрол

на звука: hidden="true"; атрибута volume указва силата на звука в проценти, като стойностите

могат да са само от 0 до 100% и за да се чува пълната сила на звука трябва да напишем

volume="100%"; loop може да приема само две стойности - true за непрекъснато повторение на

звука и false за еднократно изпълнение на звуковия файл, като ние сме задали непрекъснато

повторение.

За да започнем с тялото, пишем тага <body>, с който се дефинира фон на страницата,

размер и цвят на текст, а може и отделни линкове. Ние ще изпишем <body background="3.jpg" >

- чрез което задаваме фон- изображение на документа ни. Това става като в тага body добавим

background и посочим директорията на съответната снимка/ картина, като е спазено условието за

нейния формат. Достатъчно е да се изпише самото име на изображението, като условие за

изписването на съдържанието на всеки един таг, е то да бъде указано със кавички „“ и знак „=“,

който служи за присвояването, както вече споменахме. Чрез <font face="Segoe Print"> задаваме


Стр 7 от 27



шрифта на текста, използвайки тага <font face>. Текстът ще има вида на зададения шрифт докато

не зададем команда за затварящия таг: </font>:



<div class="content_box"><center>

<h1 align=center>М<img src="o.jpg" width="30px" height="25px"/>РСКА ГРАДИНА С ДЪХ НА

ЦВЕТЯ</h1><hr width="400" size="1" color=" #9400d3">

<p align=center>Проект за изграждане на фигури и надписи от цветни храсти<br>в Морската градина на

гр. Варна</p>

Кодът <div class="content_box"><center> съдържа <div>, чието приложение представя

различни секции от текст, като дефинира слой в зависимост от стиловото му поле, а <center>

показва разположението на текста, което в случаят е централно на страницата. Ако не зададем

команда за подравняване на текста, браузърът автоматично го извежда към лявата част на

страницата. За да окажем положение обаче, използваме тага <div> и атрибута му „align“ със

съответните стойности.

При изписването на кодът <h1 align=center>М<img src="o.jpg" width="30px"

height="25px"/>РСКА ГРАДИНА С ДЪХ НА ЦВЕТЯ</h1><hr width="400" size="1" color="

#9400d3">, в самия текст на заглавието сме вмъкнали изображение, за да бъде по ефектно самото

заглавие. По този начин, това, което ще виждат посетителите на страницата ще има следния вид:

Изписването на текст в параграф и заглавието може да стане и като стойностите на

атрибута align се зададат директно в таговете за параграф и заглавие, например: <p

align=center>, след което сме изписали подзаглавието към страницата ни или кратко описание за

съдържанието. След като вече сме задали мястото и големината на заглавието, може да зададем

инструменти за допълнително въздействие, т.е. да го удебелим, да го направим задраскан,

наклонен и др. В HTML съществува специален таг за задаване на заглавия - <h> заедно с крайния

си таг </h>, който задължително се изписва с цифра от 1 до 6, включително, която оказва

съответно размера на текстовото поле, като най- големият е 1. В случая ние, сме използвали

командата <h1>, за да получим желаната големина. Чрез <p> се задава параграф, който има

завършващ таг </p>. Текстът затворен между таговете <p> и </p> ще се появи на страницата на

един ред разстояние от предходния и следващия го текст. Кодът <hr width="400" size="1"


Стр 8 от 27



color=" #9400d3"> сме изписали, за да зададем хоризонтална линия, непосредствено след

заглавието и преди краткото описание. Тагът <hr> няма затварящ таг. Атрибутите му са:

- width= „цифрова стойност“, която задава дължина на линията в пиксели или проценти;

- size= „цифрова стойност“- задава дебелина на линията, отново в пиксели;

- color= „цвят“ – за задаване цвят на линията.

След заглавието, на началната страница сме сложили и изображение. За целта сме

написали кода: <img src="zaglavno.jpg" alt="nn.jpg" width="400" hieght="400"border="3"/>. <img

src> вмъква изображение, карта или анимация, като както вече споменахме, условието за това е,

то да бъде във формат jpg, gif или png и да се намира в една и съща папка, заедно с уеб

страницата. Ако файлът е в друга папка, то трябва да се опише правилно пътя. „zaglavno.jpg“ е

името на снимката, а чрез „alt“ се задава алтернативното му име, това, което ще е видимо при

други условия и в браузъра, освен в Notepad. Задали сме ширина и височина (height) на

изображението, както и граница или рамка, с дебелина =3. А ето и остатъка от кода на първата

страница, където сме въвели и графично изображение- снимка:

<img src="zaglavno.jpg" alt="nn.jpg" width="400" hieght="400"border="3"/>

<b><li><a style="text-decoration:none" href="test4.html"target=_"blank">За нас</a></li>

<li><a style="text-decoration:none"href="test3.html"target=_"blank">Идеята</a></li>

<li><a style="text-decoration:none"

href="http://gvelkova.blogspot.com"target=_"blank">Блог</a></li>

<li><a style="text-decoration:none" href="test.html"target=_"blank">Контакти</a></li></p></b>

<br>

<br>

<p>© 2013-2014 PrintDesign| Варна </p>

</font>

</div>

</body>

</html>

Основните инструменти за преправяне вида на текста са таговете <b>, <i> и <u>. Всеки от

тях има и завършващ таг с наклонена черта. Тагът <b> служи за удебеляване на текста, и така

затворен между таговете <b> и </b> ще изглежда така, както текст, изписан с Bold шрифт в Word

документ. След изображението (Приложение №1), сме изписали няколко хипервръзки,

преградени с отметките за подчертан текст, тъй като, както се вижда, затварящия код, сме

написали едва след изброяването на връзките. За да кодираме линковете към интернет страници,

сме задали двойката тагове <a> и </a>, съответно за начало и за край, както и добавката „href=“.

В кавички сме записали адресът на страницата, към която е хипервръзката. В случаят, това са


Стр 9 от 27



адресите на останалите страници, към които препраща главната, като след ъгловата скоба следва

наименованието- това, което ще се изпише в интернет страницата. Тагът <li> поставя точки пред

самата хипервръзка във вид на изброяване на отделните такива. Чрез добавката <target=_"blank">

имаме възможността да отваряме хипервръзките в нов прозорец, като по този начин не се затваря

основния. Кодът <a style="text-decoration:none" намиращ се преди записването на хипервръзката,

служи за премахване на подчертаването й, тъй като по начало, хипервръзките имат стандартен

цвят и са подчертани, освен ако това не се настрои от самия създател на страницата. Затваряме

подчертания текст и слагаме край на параграфа.

Използваме <br> всеки път когато искаме да зададем място м/у редовете, т.е. след

зададения код <br>, текста или изображението ни ще започне на следващия ред. Отделяйки с нов

параграф, в края на всяка страница поставяме името на фирмата, година на създаване на идеята и

град Варна:

<p>© 2013-2014 PrintDesign| Варна </p>. Следва само да затворим останалите кодове

написани от началото на самата страница: </font>;</div>;</body>;</html>. Крайният вид на

страницата, можете да видите в Приложение № 2.

Запаметяваме вече готовия документ в специална папка, в която по- късно ще разположим

и останалите страници, както и всички странични файлове към HTML. Задължително е тази

основна страница да носи името index и да е в разширение html. Това е важно условие,

изпълнението на което ще ни е нужно при качване на готовия сайт в интернет пространството.

2.3. Задаване параметрите на страница „За нас“

След като сме създали основната страница, преминаваме към изписването на останалите,

които по- късно ще присъединим към нея, така, че да се зареждат само от основната. Отваряме

отново Notepad и започваме работа. Този път документът кръщаваме с друго име, нашият е

“test4.html”, а крайният вариант на кодираната страница има следния вид5:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.seagarden.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.seagarden.org/1999/xhtml">

<head>

5 Приложение№ 3.


Стр 10 от 27







</head>





ЦВЕТЯ</h>

<script language="JavaScript1.2">6

/*

Flying Butterfly script (By [email protected])

Modified slightly/ permission granted to Dynamic Drive to feature script in archive

For full source, visit http://www.dynamicdrive.com

*/

var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION

var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION

var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER

STARTING WITH "4" !!

var floatimages=new Array();

floatimages[0]='https://lh6.googleusercontent.com/-

ghEqePj3x1M/UPL3ZQdmRWI/AAAAAAAADkY/5eojwPg0d2w/s84/btflyyel2.gif';





//*********DO NOT EDIT BELOW***********

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 &&

parseFloat(navigator.appVersion) < 5)? true : false;

var IE4 = (document.all)? true : false;

var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var wind_w, wind_h, t='', IDs=new Array();

for(i=0; i<floatimages.length; i++){

t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' :

'<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a

href="javascript:hidebutterfly()">';

t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';

t+=(NS4)? '</a></layer>':'</a></div>';

}

document.write(t);

function moveimage(num){

if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;

6http://bglog.net/nachobrazovanie/post/%D0%A3%D1%80%D0%BE%D0%BA-

13%D0%9B%D0%B5%D1%82%D1%8F%D1%89%D0%B8%D0%BF%D0%B5%D0%BF%D0%B5%D1%80%D1%83%D0%B4%D0%B8


Стр 11 от 27



if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;

if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;

if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;

moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -

IDs[num].Ystep);

}

function getnewprops(num){

IDs[num].Ydir=Math.floor(Math.random()*2)>0;

IDs[num].Xdir=Math.floor(Math.random()*2)>0;

IDs[num].Ystep=Math.ceil(Math.random()*Ymax);

IDs[num].Xstep=Math.ceil(Math.random()*Xmax)

setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));

}

function getscrollx(){

if(NS4 || NS6)return window.pageXOffset;

if(IE4)return document.body.scrollLeft;

}

function getscrolly(){

if(NS4 || NS6)return window.pageYOffset;

if(IE4)return document.body.scrollTop;

}

function getid(name){

if(NS4)return document.layers[name];

if(IE4)return document.all[name];

if(NS6)return document.getElementById(name);

}

function moveidto(num,x,y){

if(NS4)IDs[num].moveTo(x,y);

if(IE4 || NS6){

IDs[num].style.left=x+'px';

IDs[num].style.top=y+'px';

}}

function getidleft(num){

if(NS4)return IDs[num].left;

if(IE4 || NS6)return parseInt(IDs[num].style.left);

}

function getidtop(num){

if(NS4)return IDs[num].top;

if(IE4 || NS6)return parseInt(IDs[num].style.top);

}

function moveidby(num,dx,dy){

if(NS4)IDs[num].moveBy(dx, dy);

if(IE4 || NS6){

IDs[num].style.left=(getidleft(num)+dx)+'px';

IDs[num].style.top=(getidtop(num)+dy)+'px';

}}

function getwindowwidth(){

if(NS4 || NS6)return window.innerWidth;


Стр 12 от 27



if(IE4)return document.body.clientWidth;

}

function getwindowheight(){

if(NS4 || NS6)return window.innerHeight;

if(IE4)return document.body.clientHeight;

}

function init(){

wind_w=getwindowwidth();

wind_h=getwindowheight();


IDs[i]=getid('pic'+i);

if(NS4){

IDs[i].W=IDs[i].document.images["p"+i].width;

IDs[i].H=IDs[i].document.images["p"+i].height;

}

if(NS6 || IE4){

IDs[i].W=document.images["p"+i].width;

IDs[i].H=document.images["p"+i].height;

}

getnewprops(i);

moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));

if(NS4)IDs[i].visibility = "show";

if(IE4 || NS6)IDs[i].style.visibility = "visible";

startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);

}}

function hidebutterfly(){


if (IE4)

eval("document.all.pic"+i+".style.visibility='hidden'")

else if (NS6)

document.getElementById("pic"+i).style.visibility='hidden'

else if (NS4)

eval("document.pic"+i+".visibility='hide'")

clearInterval(startfly)

}

}

if (NS4||NS6||IE4){

window.onload=init;

window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }

}

</script>

<p align=center>Ние сме <h2><font color="#adff2f">*PrintDesign*</h2></font>- екип от студенти -

магистри от Икономически университет -Варна, специалност Реклама и медийни комуникации. Обединява ни

идеята да разкрасим един от символите на град Варна- Морската градина, чрез изграждане на фигури от цветя и

храсти и цветни килими. За никой, докоснал се до спокойствието и зелената прегръдка на Морския парк, не е

тайна колко приятна и отпускаща може да бъде следобедната разходка със семейството, приятелите или дори

кучето. А какво по- хубаво от това да се грижим и непрекъснато да развиваме това, което обичаме?

<img src="varna2.jpg" alt="varna2.jpg" width="300" hieght="300"/>


Стр 13 от 27



<img src="varna.jpg" alt="varna.jpg" width="300" hieght="300"/>

</p>

<br>

<hr width="400" size="1" color=" #adff2f "><br>


</font>

</div>

</body>

</html>

Отново започваме кодирането със същите тагове като по- рано, като това ще направим и

за останалите 2 страници, тъй като искаме заглавието, иконата до името на сайта и фоновото

изображение да са едни и същи за всяка от страниците: <!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN" "http://www.seagarden.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<head>




</head>




<h1 align=center>М<img src="o.jpg" width="30px" height="25px"/>РСКА

ГРАДИНА С ДЪХ НА ЦВЕТЯ</h1>

Идеята на тази втора страница е да отговори на въпроса кои сме ние, a отварянето й,

качена в интернет, става след кликване на хипервръзката ЗА НАС. Затова и тук сме описали в

няколко изречения информацията, която да даде представа на посетителите на сайта, кои са

неговите създатели. Самият текст на страницата е затворен м/у таговете за параграф <p> и </p>,

като е зададено и позиционирането на текста (център). Специфичното е, че сме отделили името

PrintDesign в различен цвят и размер от останалите думи. Използва ли сме кода за втория по

големина размер на буквите <h2> както и съответния цвят, който сме намерили за по- отличаващ

се. За да не оцветим и останалия текст в светло зелено, сме затворили командата веднага след

PrintDesign.

Чрез кодът <script language="JavaScript1> задаваме анимирани изображения в страницата

ни, които се движат в зададена директория и позиция при зареждане на страницата. Web скрипт

се нарича определен вид компютърна програма, която може да се използва за превръщане на web


Стр 14 от 27



страницата в динамична, т.е. създаване на ефект. JavaScript е език със скриптове, който може да

се използва за добавянето на функционалност към уеб сайта или служи за подобряването на вида

им. След самият текст сме добавили и две изображения, по същия начин, като преди:

<img src="varna2.jpg" alt="varna2.jpg" width="300" hieght="300"/>

<img src="varna.jpg" alt="varna.jpg" width="300" hieght="300"/>, като и на двете сме

задали едни и същи параметри за големина. С тагът <br> задаваме ред място, така че да придадем

по- подреден вид на документа. Задаваме <hr width="400" size="1" color=" #adff2f "><br>, с

помощта на който създаваме линия под текста и картините, чийто цвят този път е същият, като

на името ни PrintDesign. Следва да затворим всички използвани тагове, отнасящи се за цялата

страница и по – конкретно- тялото й, съответно: </font>;</div>;</body>;</html>. В описанието

на основната страница беше споменато как се свързват двете, така, че в интернет пространството

да се отварят посредством хипервръзка.

2.4. Задаване параметрите на страница „Идеята“

Работното заглавие на следващият ни html документ, носи името „test3.html“. Тук сме

описали, както се подразбира, каква е същността и замисълът на проекта ни, като освен текст,

сме разположили и няколко снимки, така, че посетителят на страницата да добие възможно най-

ясна представа.Ето го и нагледно кодът на самия документ:


"http://www.seagarden.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<head>





<style type="text/css">

#content1 {

width: 80px;- задаваме широчина на картината в пиксели

height: 80px; - задаваме височина на изображението в пиксели

padding: 0px;

-webkit-border -radius: 0px;-задава рамка около всички снимки в галерията, в нашия случай не сме я

използвали

}


Стр 15 от 27



</style>


#content {

width: 870px;- широчина на най- голямата таблицата в пиксели, т.е. на нашата основна снимка

height: 300px; - височина в пиксели

padding: 0px;

-webkit-border-radius:0px;

}

</style>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />


.gallerycontainer{

position:relative ;

}

.thumbnail img{

border: 2px solid white;-задаваме цвят на границата на изображенията, като сме посочили и големина на

рамка

margin: 3 ;

}

.thumbnail:hover{- тагът hover се използва за указване на селектиране на елементите, когато мишката е

в/у тях

}

.thumbnail:hover img{

border: 0px solid white;

}

.thumbnail span{ -тагът <span> служи за задаване на групови редови елементи в даден документ

position:absolute;

background-color: lightyellow;-цвета се вижда при първоначално зареждане на страницата

padding: 0px;

left: -1000px;

border: 3px inset white;

visibility: hidden;

color: white;

text-decoration: none;

}

.thumbnail span img{ -тагът се задава за всяко използвано изображение

border-width:0;

padding: 2px;

}

.thumbnail:hover span{

visibility: visible;

top: 0;

left: 0px;

z-index: 50;

}

</style>

<script type="text/javascript">

function openPopup(url,width,height){


Стр 16 от 27



window.open(url,'popup','toolbar=0,location=0,directories=0,

statusbar=0,menubar=0,scrollbars=0,resizable=0,width='+width+',height='+height);

}

</script> -затваряме тага на галерията

</head>




<h1 align=center>М<img src="o.jpg" width="30px" height="25px"/>РСКА ГРАДИНА С ДЪХ

НА ЦВЕТЯ</h1>

<table id="content">

<tr>

<td>

<div class="gallerycontainer">

<img src="t.jpg" width="400px" height="350px" hspace="5" border="2" align="left" />

<a class="thumbnail" href="#thumb"><img id="content1" src="ab.jpg" width="80px" height="80px"

border="0"/><span>

<img src="ab.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="kj.jpg" width="80px" height="80px"

border="0"/> <span>

<img src="kj.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="gop.jpg" width="80px" height="80px"

border="0"/><span>

<img src="gop.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="m2.jpg" width="80px" height="80px"

border="0"/><span>

<img src="m2.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="nn.jpg" width="80px" height="80px"

border="0"/><span>

<img src="nn.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="pi.jpg" width="80px" height="80px"

border="0"/><span>

<img src="pi.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="oi.jpg" width="80px" height="80px"

border="0"/><span>

<img src="oi.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="pep.jpg" width="80px" height="80px"

border="0"/><span>

<img src="pep.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="1.jpg" width="80px" height="80px"

border="0"/><span>

<img src="1.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<a class="thumbnail" href="#thumb"><img id="content1" src="2.jpg" width="80px" height="80px"

border="0"/><span>

<img src="2.jpg" width="400px" height="350px" border="0"/><br /></span></a>

<b>"Жива приказка" или как да направим Морската градина още по- красива и приятна за нас и

околните!!


Стр 17 от 27



Идеята ни се състои в създаване на скулптури или надписи чрез подрязване и оформяне по подходящ начин

на дървета, цветя, храсти и треви, които да привличат погледите на минувачите.Чрез изкуството, познато на

запад като <a style="text-decoration:none" href="http://zadoma.rozali.com/fito-saveti/topiar-izkustvo-v-

gradinata.html"target="_blank"><body bgcolor="#7CFC00" text="#000000" link="#7CFC00" alink="#191970"

vlink="#191970">"топиар"</a> нашият проект е насочен към:<br>

-подобряване инфраструктурата на града;

<br>

-апелиране към опазване и грижа на околната среда;

<br>

-изграждане на по-добър имидж, настроение и позитивизъм;

<br>

-подсилване интереса към Морската градина.

<br>

Освен това, с подобна инсталация, се надяваме,

че ще привлечем и вниманието на повече туристи към Морската столица на България.</b>

</td>

</tr>

</table>

<br>

<hr width="400" size="1" color= black>


</center>

</div>

</font>

</body>

</html>

И тук, както и в предишния документ, повтаряме кода в полето <head> и този на

заглавието. Кодът като цяло, в тази страница е най- дълъг, тъй като освен обема текст, който сме

задали в документа, сме използвали и тагове, чрез които оформяме една виртуална галерия със

снимки. Съкращението, част от този код: <style type="text/css">- CSS означава Cascading Style

Sheets и представлява език за описание на стилове с HTML или произволен XML документ. Чрез

него можем да опишем представянето на документа, като използването му определя как да

изглеждат елементите на всяка една HTML страница: размер, цвят, шрифт на текста. За да бъде

активен кодът, трябва да е поместен между таговете <head> и </head>, още в началото на

документа. Тагът <style> се използва за дефиниране на стил, в нашия случай –на галерия със

снимки. Основният атрибут на тага е “type=”, който трябва да има стойност "text/css".

Дефинираният с тага <style> стил се отнася само за страницата, в който е дефиниран и само до

момента, в който го затворим чрез тага </style>.

След като сме задали параметрите на таблицата, т.е. границите на нашата галерия, трябва

и да качим снимките, които искаме да се показват в нея. До този момент, освен фон, заглавие и


Стр 18 от 27



текста, който малко по- долу ще въведем, при зареждане на страницата не се вижда нищо друго

(Приложение№ 4). Задаваме тагът <table id="content"> ,<tr> и <td>, между които ще обособим

снимките в галерията. Атрибутът “id” предоставя уникален идентификатор за елементите в

документа. Всяка таблица трябва да започва с тага <table> и съответно да завършва с </table>.

Всеки ред на таблицата започва с <tr> и завършва с </tr> . Всяка клетка от тези редове пък,

трябва да е обградена с таговете <td> и </td>, като в зависимост от това колко от тях ще има,

толкова ще е и броя на клетките в съответния ред. Тагът „content“ служи за оказване на

съдържанието в таблицата ни. За да започнем с изреждането на снимките, трябва да окажем още

едни таг: <div class="gallerycontainer">. Както вече споменахме, <div> служи за представяне на

различни секции от текстова част, като може да дефинира контейнер и за други HTML елементи.

<img src="t.jpg" width="400px" height="350px" hspace="5" border="2" align="left" /> е

кодът за основната снимка, която има и най- голямо визуално поле в страницата. За разлика от

следващите изображения, това няма малък вариант, а при зареждане на уеб страницата се вижда

само в зададения предварително размер: 400 пиксела широчина и 350 пиксела височина;

„hspace=“определя размера на пространството, което ще се появи от двете страни на

изображението; видима граница около картината и разположението и в таблицата: "align="left".

<a class="thumbnail" href="#thumb"><img id="content1" src="ab.jpg" width="80px"

height="80px" border="0"/><span>- кодът на първата ни малка снимка, където указваме

размерите й, задаваме и свойството да се превръща в голяма при преминаване на мишката в/у

нея: <img src="ab.jpg" width="400px" height="350px" border="0"/><br /></span></a>. Както се

вижда вторият код е същата снимка, но вече в по- големи размери (Приложение№ 5). По същият

начин изписваме и кодът на останалите 10 снимки от нашата галерия, като впечатление прави, че

в момента, когато те са с малки размери, техните очертания са бели (код, който сме задали още в

<style>), а при увеличаването им с мишката, те придобиват нови очертания в бяла, но по- голяма

рамка (отново в <style>- border: 3px inset white) (Приложение№ 6- страницата в завършен

вариант).

Следва да изпишем текста, поместен в картинната ни галерия:

<b>"Жива приказка" или как да направим Морската градина още по- красива и приятна за нас и

околните!!Идеята ни се състои в създаване на скулптури или надписи чрез подрязване и оформяне по подходящ

начин на дървета, цветя, храсти и треви, които да привличат погледите на минувачите.Чрез изкуството,познато

на запад като


Стр 19 от 27



<a style="text-decoration:none" href="http://zadoma.rozali.com/fito-saveti/topiar-izkustvo-v-

gradinata.html"target="_blank"><body bgcolor="#7CFC00" text="#000000" link="#7CFC00" alink="#191970"

vlink="#191970">"топиар"</a> нашият проект е насочен към:<br>

-подобряване инфраструктурата на града;

<br>

-апелиране към опазване и грижа на околната среда;

<br>

-изграждане на по-добър имидж, настроение и позитивизъм;

<br>

-подсилване интереса към Морската градина.

<br>

Освен това, с подобна инсталация, се надяваме,

че ще привлечем и вниманието на повече туристи към Морската столица на България.</b>

Подчертали сме текста в Bold, затворен м/у <b> и </b>. Единствената особеност в текста

тук е, че сме обособили като хипервръзка една от ключовите думи -„топиар“. Това става с

помощта на тагът <a style="text-decoration:none"> разположен преди интернет адреса, към който

води кликването в/у маркираната дума. Както бяхме споменали по- горе, тагът за хипервръзка е

<a>, като на неговия атрибут „href“ и се задава за стойност адреса, към който води връзката. Чрез

<a style> премахваме подчертаването на думата, което става традиционно при хипервръзките.

Страницата, към която ни пренасочва кликването в/у „топиар“ е отделна уеб страница -

http://zadoma.rozali.com/fito-saveti/topiar-izkustvo-v-gradinata.html, съдържанието, на която,

решихме, че е най- подходящо за описание значението и същността на думата. Освен, че сме

махнали подчертаването на връзката, сме й задали цвят- <body bgcolor="#7CFC00"

text="#000000" link="#7CFC00" alink="#191970" vlink="#191970"> (син), като:

-bgcolor="..."-установява цвета на фона на страницата, в случая- светлозелен;

-text="..."-установява цвета на текста (черен);

-vlink="..."-цвят на посетената хипервръзка.

-alink="..."-задава цвета на активната хипервръзка: "топиар"

Следва да затворим „отворените“ тагове- </td>; </tr> и </table>, с което затваряме рамката

на галерията, в която освен изображения сме поместили и текстова част. Останалите кодове са

същите както и за предишните ни уеб страници, като след изписване на уникалното ни име за

права на страницата, затваряме и останалите тагове:

</center>

</div>

</font>

</body>

</html>

http://zadoma.rozali.com/fito-saveti/topiar-izkustvo-v-gradinata.html

http://zadoma.rozali.com/fito-saveti/topiar-izkustvo-v-gradinata.html


Стр 20 от 27



2.5. Задаване параметрите на страница „Блог“

Хипервръзката, препращаща към блога ни, която сме задали на основната страница-

index.html, при кликване ни отваря нов прозорец с интернет връзката:

http://gvelkova.blogspot.com. Това е предварително зададена от нас интернет страница, към която

ни отвежда препратката. Не са нужни допълнителни настройки, тъй като тя е създадена

посредством приложението Blogger на google+. Това е и адресът на нашия личен блог, където

споделяме какво ни вълнува и какво искаме да кажем на потребителите, посредством наши

лични мисли и впечатления (Приложение № 7).

2.6. Задаване параметрите на страница „Контакти“


"http://www.seagarden.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<head>





</head>

<body background="3.jpg">




ЦВЕТЯ</h1><hr width="400" size="1" color=" #0000ff "><br>

<br>

<form>

Име:

<input type="text" name="вашето име"/><br>

Фамилия:

<input type="text" name="вашата фамилия"/><br>

E-mail:

<input type="text" name="e-mail"/><p align="left"/>

</form>

<p><img src="0.gif"width="50" height="50">

Моля, въведете Вашия коментар:</p>

<textarea name="coment" rows="5" cols="40">

</textarea>

<form action="mailto:[email protected]">

<input type="submit" value="изпрати" />

http://gvelkova.blogspot.com/


Стр 21 от 27



</form>

<a href="mailto:[email protected]">[email protected]</a>

<br>

<a href="https://www.facebook.com/pages/%D0%9C%D0%BE%D1%80%D1%81%D0%BA%D0%B0-

%D0%B3%D1%80%D0%B0%D0%B4%D0%B8%D0%BD%D0%B0-%D1%81-%D0%B4%D1%8A%D1%85-

%D0%BD%D0%B0-%D1%86%D0%B2%D0%B5%D1%82%D1%8F/250242985137718?fref=ts/"><img src="fan.jpg"

/></a>

<br>


</div>

</font>

</body>

</html>

В раздела Контакти задължително трябва да присъстват активна поща и facebook-

страница. Ние сме добавили и контактна форма, в която потребителите могат да запишат своето

име, имейл и коментар, които директно да изпратят на зададения ни имейл. За целта сме въвели

следния код: <form>

Име:

<input type="text" name="вашето име"/><br>

Фамилия:

<input type="text" name="вашата фамилия"/><br>

E-mail:

<input type="text" name="e-mail"/><p align="left"/>

</form>

Таговете <form> и </form> са задължителни, ако искаме да окажем работното поле. В

границите им, всеки изписан в Notepad текст, ще бъде виден за интернет аудиторията. Затова и

изписваме Име, Фамилия и E-mail. Стойностите, които задаваме под всеки от тях служат за

създаване на празно поле, в което се показва курсора на мишката и дава възможност за писане в

тази област. Тази функция е възможна благодарение на тага <imput type= “text” name>. Вижда се,

че за полето на email адреса сме използвали знака за параграф и сме указали разположението,

задавайки позиция „left“. По този начин трите форми се структурират една под друга.

На нов ред поставяме: <p><img src="0.gif"width="50" height="50">, което изобразява

анимирана картина в началото на изречението, като сме използвали тага за такъв файл (.gif) и сме

задали стойностите на неговите параметри.

Следва полето за коментар:

Моля, въведете Вашия коментар:</p>

<textarea name="coment" rows="5" cols="40">


Стр 22 от 27



</textarea>

Тук вече сме задали ограничение на бялото поле, в/у което при кликване с мишката се

появява курсора. Задали сме кодът така, че потребителите могат да пишат коментари в рамките

на 5 реда и 40 колони, т.е. приблизително 200 думи. За да затворим полетата за писане,

използваме затварящия таг: </textarea>. Остава да добавим имейл адреса ни: <form

action="mailto:[email protected]">, който прилича на хипервръзка, но го прилагаме с помощта

на mailto: и адресът на сайта, така, че при кликване, да ни прехвърли директно на имейла.

Задължително е да добавим и самия таг за хипервръзка, иначе имейл адресът ни няма да бъде

видим на страницата: <a href="mailto:[email protected]">[email protected]</a>. За бутона

изпрати, използваме: <input type="submit" value="изпрати"/>, след което можем да затворим

формата на полето за данни: </form>. За хипервръзката към facebook.com сме използвали

картинка, вместо традиционното изписване на сайта. Така, посетителите на нашия сайт виждат

икона, в/у която да кликнат, за да отидат на нашата страница в социалната мрежа, като за да

стане това, сме приложили към кода и целия интернет път на страницата ни:

Така сме заместили хипервръзката с графично изображение, което прави съдържанието на

страницата ни по- интересно. Останалите действия са същите, като до сега прилаганите в

предишните страници (Приложение№ 8).

mailto:

mailto:[email protected]%3C/a


Стр 23 от 27



ПРИЛОЖЕНИЯ:

Приложение№ 1:



Стр 24 от 27






Стр 25 от 27






Стр 26 от 27



ИЗПОЛЗВАНА ЛИТЕРАТУРА:

1. http://bg.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D1%8A%D1%80

2. http://host.bg/bg/info/Za-HTML-i-XHTML

3. http://www.parvisait.com/html-colors.html

4. http://bglog.net/nachobrazovanie/post/%D0%A3%D1%80%D0%BE%D0%BA-

13%D0%9B%D0%B5%D1%82%D1%8F%D1%89%D0%B8%D0%BF%D0%B5%D0%BF%D0%B5

%D1%80%D1%83%D0%B4%D0%B8

5. http://uroci.net/urok/1093/%D0%9A%D0%B0%D0%BA-%D0%B4%D0%B0-%D1%81%D0%B8-

%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D1%82%D0%B5-

%D0%BF%D1%8A%D1%80%D0%B2%D0%B8%D1%8F-

%D1%81%D0%B0%D0%B9%D1%82.html

6. http://www.parvisait.com/html-anchors.html

http://bg.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D1%8A%D1%80

http://host.bg/bg/info/Za-HTML-i-XHTML

http://www.parvisait.com/html-colors.html

http://bglog.net/nachobrazovanie/post/%D0%A3%D1%80%D0%BE%D0%BA-13%D0%9B%D0%B5%D1%82%D1%8F%D1%89%D0%B8%D0%BF%D0%B5%D0%BF%D0%B5%D1%80%D1%83%D0%B4%D0%B8



http://uroci.net/urok/1093/%D0%9A%D0%B0%D0%BA-%D0%B4%D0%B0-%D1%81%D0%B8-%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D1%82%D0%B5-%D0%BF%D1%8A%D1%80%D0%B2%D0%B8%D1%8F-%D1%81%D0%B0%D0%B9%D1%82.html




http://www.parvisait.com/html-anchors.html


Стр 27 от 27



Съдържание

1. Въведение ............................................................................................................................................................ 1

2. Описание на сайта seagarden.free.bg ............................................................................................................. 3

2.1. Основни елементи в съдържанието на HTML ............................................................................................ 3

2.2. Програмиране на основната страница ....................................................................................................... 5

2.3. Задаване параметрите на страница „За нас“ ............................................................................................. 9

2.4. Задаване параметрите на страница „Идеята“.......................................................................................... 14

2.5. Задаване параметрите на страница „Блог“ .............................................................................................. 20

2.6. Задаване параметрите на страница „Контакти“ ...................................................................................... 20

ПРИЛОЖЕНИЯ: ............................................................................................................................................... 23

ИЗПОЛЗВАНА ЛИТЕРАТУРА: ............................................................................................................................26

Art & Photos

изработка на сайт-seagarden.free.bg