Правене на WEB сайтове(HTML)

Всичко за ГНУ/Линукс. Програмиране на c/c++, java, perl, python, jquery, ruby, bash, php, mysql, css, html и други компютърни неща.

no subject

Postby X-Rout » May 7th, 2005, 9:57 pm

[size=18:3b4c09f62b][color=red:3b4c09f62b]Правене на WEB сайтове(HTML)[/color:3b4c09f62b][/size:3b4c09f62b]

[size=16:3b4c09f62b][color=blue:3b4c09f62b][b:3b4c09f62b]Какво трябва да знаеме?[/b:3b4c09f62b][/color:3b4c09f62b][/size:3b4c09f62b]

[b:3b4c09f62b]Когато решите да започнете даден уеб сайт, трябва да го обмислите добре. За да изглежда страницата добре трябва да спазвате няколко изисквания: [/b:3b4c09f62b]
[color=orange:3b4c09f62b][b:3b4c09f62b]Насоченост [/b:3b4c09f62b][/color:3b4c09f62b]
И така, първо трябва да решите към кого ще бъде насочена страницата (имам предвид посетителя). Така ще можете по - лесно да определите графичния дизайн и въобще стилът на цялата страница.

[color=orange:3b4c09f62b][b:3b4c09f62b]Цветова гама [/b:3b4c09f62b][/color:3b4c09f62b]
Трябва също да съобразите цветовата гама на страницата. Няма да ви хареса, предполагам, една прекалено шарена страница в която всички цветове от дъгата са в нея. Използвайте цветове които си подхождат един с друг.

[color=orange:3b4c09f62b][b:3b4c09f62b]Структуриране [/b:3b4c09f62b][/color:3b4c09f62b]
Един според мен доста важен момент в начало на изграждането на web страница. Какво се разбира под структуриране. Всички знаете какво представлява структурата на компютъра. Подредена по фолдъри и всеки с някакво наименование. Това трябва да направите и Вие, когато започнете да създавате страница - да направите директории за страниците от които ще се състои Вашият web сайт. Направете ги така, че да Ви бъдат удобни за работа - не да се чудите след като направите страницата кое за какво беше...Например в главния фолдър, където ще бъде страницата, да има само един index.html, която да води към останалите добавени страници. Това разбира се не е задължително. Останалите страници ги сложете във фолдъри заедно с всички файлове които са нужни на добавената страница (картинки, js файлове и т.н.). Ако вашата страница е доста голяма по обем е добре да поставите всички картинки свързани с нея в един общ фолдър. Така няма да ви се пречкат.

[color=orange:3b4c09f62b][b:3b4c09f62b]Съдържание [/b:3b4c09f62b][/color:3b4c09f62b]
Съдържанието е също важен момент в създаването на web страница. От него се определя и цялостният вид на web-а. Според него ще определите как да изглежда графичния дизаин на страницата. Ако в страницата ви има бизнес информация няма да е добре да се слагат анимирани картинки с пресмивателен контекст...Добре ще е, когато определите съдържанието на страницата тогава да решите от колко добавени страници ще е тя. Лично аз не обичам да отида на страницата за контакти на някого и да видя един е-mail

[color=orange:3b4c09f62b][b:3b4c09f62b]Навигация [/b:3b4c09f62b][/color:3b4c09f62b]
Навигацията в web страницата е много важна. Така вие позволявате на потребителя да знае във всеки един момент къде се намира и как да продължи или пък да се върне назад. Често ми се е случвало да се загубвам в страници, което ме е дразнило много. Дайте на клиента (потребителя) пълна яснота по този въпрос, защото е изчислено че човек стои в web страница не - повече от 10 секунди, и ако не го привлечете с нещо или пък се загуби - той просто ще си тръгне

[color=orange:3b4c09f62b][b:3b4c09f62b]Правилни означения[/b:3b4c09f62b][/color:3b4c09f62b]
Когато започнете вече да правите самата страница ще ви е необходимо да знаете някои основни наименования и означения в sourc-а на страницата. Тези означения можете да видите тук. Има още много неща които ще са ви необходими да знаете, когато започвате да правите web страница, но засега това Ви стига. Най - добре е когато сам човек разбере какво му е нужно и къде е сбъркал. Нещата по - горе според мен са най - важни!

[size=16:3b4c09f62b][color=blue:3b4c09f62b][b:3b4c09f62b]Как става цялата работа?[/b:3b4c09f62b][/color:3b4c09f62b][/size:3b4c09f62b]

[color=red:3b4c09f62b][i:3b4c09f62b][b:3b4c09f62b]______________________________Eтикети:______________________________[/b:3b4c09f62b][/i:3b4c09f62b][/color:3b4c09f62b]
HTML (hiper text markup language) е език за описание структурата на страницата базиран на обикновен ASCII текст в който са вмъкнати специални етикети, заградени в триъгални скоби(<пример>). В етикетите няма разлика между главни и малки букви. Маркирането на текст с етикет става с името на етикета в триъгалните скоби, а за край на маркиране се използва наклонена черта плюс името на етикета
<етикет>текст</етикет>
Етикетите в html единствено уточняват структурата на документа - какво представлява даден елемент, а не как изглежда на екрана.
Всеки html документ започва и завършва с етикетите
<html>...</html>
Между тях са разположени секциите на заглавната част <head>...</head> и <body>...</body>
Между етикетa <head> се разполага името на документа което пък се поставя между етикета <title>
След етикета <head> се поставя и самото тяло на web страницата между етикетите <body>
Пример
<html>
<head>
<title>emicha</title>
</head>
<body>
</body>
</html>


Етикетът <body> отбелязва тялото на даден html документ или накратко казано - действителното съдържание на страницата.
В него се съдържа информацията за всеки елемент от страницата. Определяте цвета на badground-a, задавате формат и вид на текст, поставяте таблици, рамки и въобще всичко което се ползва за да изглежда вашата страница по подобаващ начин.

Етикетът <body> се характеризира с няколко основни параметъра.


alink - Определя цвета на текста за хипервръзка, която е избрана

bgcolor - Определя цвета на страницата

link - определя цвета на текста за хипервръзка, която не е била избрана

text - определя цвета на нормалния текст

vlink - определя цвета на текст за хипервръзка, която е била избрана

bgproperties - когато стойноста е "fixed", изображението указано от background не се скролира

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

topmargin - Определя броят на пикселите с които да бъде изместена страницата спрямо горния край на прозореца на браузъра

background - Определяне на графично изображение което ще се използва за фон на страницата.(Трябва да притежава URL на графичното изображение)

[color=red:3b4c09f62b][i:3b4c09f62b][b:3b4c09f62b]______________________________Етикети за обработка на текст:______________________________[/b:3b4c09f62b][/i:3b4c09f62b][/color:3b4c09f62b]

В тялото на html страницата <body>...</body> можете да използвате множество етикети с помоща на които да форматирате текста и по тозиначин да укажете на браузъра как да го изобрази.

Тези етикети биват два вида:

за определяне вида на текста
за определяне потока на текста
Това са етикети за определяне вида на текста:

текст - Удебелява заградения текст
<big>текст</big> - Увеличава големината на буквите на заградения текст(?)
<blink>текст</blink> - Кара заградения текст да мига(?)
<cite>текст<cite> - Форматира заградения текст като цитат
<code>текст</code> - Форматра заградения текст като фрагмент от програма
текст - Подчертава заградения текст
текст - Прави заградения текст курсив

<small>текст</small> - Намалява големината на буквите на заградения текст
<strike>текст</strike> - Рисува линия посредата на буквите
<strong>текст</strong> - Подчертава силно заградения текст(удебелява го)
<tt>текст</tt> - При изобразяването на заградения текст сеизползва шрифт с фиксирана ширина
<sub>текст</sub> и <sup>текст</sup> - Форматира заградения текст като долен - горен индекс
Ето и етикети за определяне потока на текста:

<address>текст</address> - Форматира адрес
<blackquote>текст</blackquote> - Форматира цитат
<br> - Стоп линия
<center>текст</center> - Центрира зафрадения текст
<font>текст</font> - Установявя шрифт, цвят и големина на заградения текст

<hn>текст<hn> - Показва че заградения текст е заглавие от ниво n, където n е число от 1 до 6

<hr> - Слага хоризонтална линия
<img> - Слага изображение в html страницата Може да бъде използван в комбинация с етикета.
<p> - Обозначава нов параграф

[color=red:3b4c09f62b][i:3b4c09f62b][b:3b4c09f62b]______________________________Етикети за цветове:______________________________[/b:3b4c09f62b][/i:3b4c09f62b][/color:3b4c09f62b]

Когато решите вече в какъв стил ще ви е страницата, ще е добра да знаете и някои от основните правила за определяне на цвят в web. Има два общовъзприети стандарта за определяне на цветовете
- използване на английски думи за описание на цветовете
- използване на шестнайсетичен код за определяне на цветове

Ето и пример за използване на тези кодове в етикет <body>.

<body bgcolor="#FFFFFF" text="#000000" link="#000080" vlink="#808000" alink="#008000">
....
</body>

[color=red:3b4c09f62b][i:3b4c09f62b][b:3b4c09f62b]______________________________Етикети за таблици:______________________________[/b:3b4c09f62b][/i:3b4c09f62b][/color:3b4c09f62b]


Таблиците са много важна част при правенето на web страници. В тях можете да слагате всичко - текст, картинки, java аплети, aktivеX контроли. С тях можете много лесно да позиционирате даден елемент от страницата ви в една мрежа, като използвате невидими ръбове.
Основните етикети са:
<table> и </table> - това е основната структора
Етикетите <tr> и </tr> отделя редовете
Етикетите <th> и </th> ограждат заглавието на таблицата
Етикетите <td> и </td> отделят отделните клетки

[color=red:3b4c09f62b][i:3b4c09f62b][b:3b4c09f62b]______________________________Етикети за рамки (фрейми):______________________________[/b:3b4c09f62b][/i:3b4c09f62b][/color:3b4c09f62b]

Рамките (фрейми) са много удобен метод за направа на страници, в които искате част от страницата да се запази (статична) а друга да се променя динамично.
Един вид вашата страница като цяло е създадена от няколко добавени. Този метод за направа на web страници спомага и за олекотяване на страницата.

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

Етикетите за създаване на фрейми е много елементарен
Наборът от рамки се съдържа между етикетите <frame>...</frame> и <frameset>...</frameset>

Има една подробност обаче, която не трябва да забравяте никога, когато използвате фрейми!!!
Ако в добавената страница (динамичната) има хипервръзка (линк) окажете задължително как да се зарежда страницата от този линк Възможносите са:
"_self" - в същият фреим
"_top" - ще зареди страницата в целия браузър
"_parent" - зарейда се в parent фрейма
"_blank" - ще отвори страницата в нов прозорец

Преди етикета за начина на отваряне трябва да има
Ако след линка нямя един от тези етикети страницата ще се отвори в "Main" прозореца

[color=red:3b4c09f62b][i:3b4c09f62b][b:3b4c09f62b]______________________________Mета тагове:______________________________ [/b:3b4c09f62b][/i:3b4c09f62b][/color:3b4c09f62b]

Мета таговете са нещо доста полезно и необходимо.
Те играят важна роля при индексирането на Вашата страница в търсещите машини.

Ето и пример, който трябва само да копирате и да сложите във вашата страница на необходимото място, като промените информацията.
Не забравяйте че това е информацията която ще Ви представи пред света и за това бъдете внимателни.

<HTML>
<HEAD>
<TITLE> Заглавието на вашата страница</TITLE>
<META NAME="description" CONTENT="Кратко описание на страницата">
<META NAME="keywords" CONTENT="Тук напишете всички възможни думи за които се досетите, свързващи се с Вашата страница">
</HEAD>


[size=18:3b4c09f62b][color=red:3b4c09f62b]С какво става цялата работа?[/color:3b4c09f62b][/size:3b4c09f62b]

Практически за да се създаде една интернет страница можете да използвате всеки текстови редактор. Notepad дори може да ви свърши страхотна работа ако сте професионалист и разбирате от WEB програмиране. Ако не сте такъв ви препоръчвам една от следните:
[url=http://www.data.bg/f.php?fid=4107942][color=blue:3b4c09f62b][b:3b4c09f62b]Macromedia Dreamweaver MX 2004 (Data.bg)[/b:3b4c09f62b][/color:3b4c09f62b][/url]
[url=http://ftlbg.cоm/Yellow/progz/Macromedia/Macromedia%20Dreamweaver%20MX%202004%207.0.1%20+%20crack.zip][color=blue:3b4c09f62b][b:3b4c09f62b]Macromedia Dreamweaver MX 2004 (ftlbg.cоm)[/b:3b4c09f62b][/color:3b4c09f62b][/url]
[url=http://www.data.bg/f.php?fid=7249399][color=orange:3b4c09f62b][b:3b4c09f62b]Microsoft Frontpage 98(Data.bg)[/b:3b4c09f62b][/color:3b4c09f62b][/url]
Също така една доста добра програма е [b:3b4c09f62b]Microsoft Office Publisher[/b:3b4c09f62b] която можете да намерите във всеки office пакет на Microsoft.

[size=18:3b4c09f62b][color=red:3b4c09f62b][b:3b4c09f62b]Как да сложим анимации?[/b:3b4c09f62b][/color:3b4c09f62b][/size:3b4c09f62b]

В интернет страниците са 2 вида - Gif анимации и Flash анимации.

[b:3b4c09f62b]Какво представлява GIF анимацията:[/b:3b4c09f62b]

GIF анимацията представлява поредица от картинки които се сменят през определено време. Изключително елементарни за създаване. [url=http://i.yoosms.com/i/freshnervi/anim/100x100_19358.gif]Ето[/url] пример за GIF анимация. Тя се прави с програми като [url=http://www.data.bg/f.php?fid=2737417][b:3b4c09f62b]Ulead Gif Animator[/b:3b4c09f62b][/url].
<IMG SRC="линка на картинката в интернет*">

[b:3b4c09f62b]Какво представлява Flash анимацията:[/b:3b4c09f62b]
Flash анимацията вече е по-трудна но същевременно по-добра и интересна анимация. Такъв вид анимация има многобройни приложения. Прави се с програми като [url=http://www.data.bg/f.php?fid=5672762]SwishMax[/url].

<embed src="линка на flash анимацията в интернет*" />

[size=18:3b4c09f62b][color=red:3b4c09f62b][b:3b4c09f62b]Как да качим страницата си?[/b:3b4c09f62b][/color:3b4c09f62b][/size:3b4c09f62b]

За качване на страница в интернет се използва upload функцията на някой български free сървъра. За да качвате са ви нужни настройките на съответния сървър и upload програма. Повечето сървъри си имат файлов манипулатор но почти навсякъде той има ограничения в големината на файловете. [url=http://www.data.bg/f.php?fid=6870374][b:3b4c09f62b]Total Commander[/b:3b4c09f62b][/url], [url=http://www.data.bg/f.php?fid=756334][b:3b4c09f62b]FlashFXP[/b:3b4c09f62b][/url] или [url=http://www.data.bg/f.php?fid=1736256][b:3b4c09f62b]CuteFTP[/b:3b4c09f62b][/url] са едни от програмите за качване в интернет.

[size=18:3b4c09f62b][color=red:3b4c09f62b][b:3b4c09f62b]Javascript?[/b:3b4c09f62b][/color:3b4c09f62b][/size:3b4c09f62b]

Javascript-а представлява код който е предназначен за празнообразяване на сайта ви. Има изключително много такива кодове като се започне от часовници и се свърши до трептене на екрана и такива работи. За повече информация [url=http://forums.data.bg/viewtopic.php?t=47336]тук[/url].

Такъв скрипт се слага като се копира самия код в HTML кода ви.



*Има 2 вида за слагане на картинка или анимация в сайта ви. Единия е с директен линк към картинката/анимацията а другия е да се създаде папка index_files в която да се сложат картинките и анимациите. При втория случай е нужно да сложите единтвено името на файла и той автоматично се намира.

[b:3b4c09f62b]Поздрави X-Rout[/b:3b4c09f62b]
Image Image
X-Rout
VIP
 
Posts: 47
Joined: May 7th, 2005, 5:09 pm

no subject

Postby RulzZ » May 7th, 2005, 10:41 pm

Х-Роут това е много добро което си постнал гордея се с тебе :)
No.One.Lives.Forever.!!!
RulzZ
Master of the dark force
 
Posts: 100167
Joined: May 5th, 2005, 2:43 pm
Location: Haskovo City

no subject

Postby X-Rout » May 7th, 2005, 10:45 pm

[quote:b333a51e14="RulzZ"]Х-Роут това е много добро което си постнал гордея се с тебе :)[/quote:b333a51e14]

/ме ще се разплаче :roll:
Image Image
X-Rout
VIP
 
Posts: 47
Joined: May 7th, 2005, 5:09 pm


Return to Компютърни

Who is online

Users browsing this forum: No registered users and 1 guest