Първи стъпки с HTML

24 May 08 11:34:56 GMT

Какво трябва да знаем?

Когато решите да започнете даден уеб сайт, трябва да го обмислите внимателно. За да изглежда страницата добре трябва да спазвате няколко изисквания:

Насоченост
И така, първо трябва да решите към кого ще бъде насочена страницата (имам предвид посетителите). Така ще можете по-лесно да определите графичния дизайн и въобще стилът на цялата страница.

Цветова гама
Трябва също да съобразите цветовата гама на страницата. Няма да ви хареса, предполагам, една прекалено шарена страница съдържаща всички цветове от дъгата. Използвайте цветове които си подхождат един с друг.

Структуриране
Какво се разбира под структуриране?
Всички знаете какво представлява структурата на компютъра. Подредена по фолдъри и всеки с някакво наименование. Това трябва да направите и Вие, когато започнете да създавате страница - да направите директории за страниците от които ще се състои Вашият web сайт. Направете ги така, че да Ви бъдат удобни за работа - не да се чудите след като направите страницата кое за какво беше...Например в главния фолдър, където ще бъде страницата, да има само един index.html, която да води към останалите добавени страници. Това разбира се не е задължително. Останалите страници ги сложете във фолдъри заедно с всички файлове които са нужни на добавената страница (картинки, js файлове и т.н.). Ако вашата страница е доста голяма по обем е добре да поставите всички картинки свързани с нея в един общ фолдър. Така няма да ви се пречкат.

Съдържание
Съдържанието е също важен момент в създаването на web страница. От него се определя и цялостният вид на web-а. Според него ще определите как да изглежда графичния дизаин на страницата. Ако в страницата ви има бизнес информация няма да е добре да се слагат анимирани картинки с пресмивателен контекст...Добре ще е, когато определите съдържанието на страницата тогава да решите от колко добавени страници ще е тя. Лично аз не обичам да отида на страницата за контакти на някого и да видя един е-mail

Навигация
Навигацията в web страницата е много важна. Така вие позволявате на потребителя да знае във всеки един момент къде се намира и как да продължи или пък да се върне назад. Често ми се е случвало да се загубвам в страници, което ме е дразнило много. Дайте на клиента (потребителя) пълна яснота по този въпрос, защото е изчислено че човек стои в web страница не - повече от 10 секунди, и ако не го привлечете с нещо или пък се загуби - той просто ще си тръгне

Правилни означения
Когато започнете вече да правите самата страница ще ви е необходимо да знаете някои основни наименования и означения в sours-а на страницата. Тези означения можете да видите тук. Има още много неща които ще са ви необходими да знаете, когато започвате да правите web страница, но засега това Ви стига. Най - добре е когато сам човек разбере какво му е нужно и къде е сбъркал. Нещата по - горе според мен са най - важни!

Как става цялата работа?

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

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

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

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

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

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

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

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

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

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

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

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

______________________________Етикети за обработка на текст:______________________________

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

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

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

текст - Удебелява заградения текст
текст - Увеличава големината на буквите на заградения текст
текст - Кара заградения текст да мига
текст - Форматира заградения текст като цитат
текст - Форматра заградения текст като фрагмент от програма
текст - Подчертава заградения текст
текст - Прави заградения текст курсив

текст - Намалява големината на буквите на заградения текст
~~текст~~ - Рисува линия посредата на буквите
текст - Подчертава силно заградения текст(удебелява го)
текст - При изобразяването на заградения текст сеизползва шрифт с фиксирана ширина
_текст и ^текст - Форматира заградения текст като долен - горен индекс
Ето и етикети за определяне потока на текста:

текст - Форматира адрес
текст - Форматира цитат

- Стоп линия
текст - Центрира зафрадения текст
текст - Установявя шрифт, цвят и големина на заградения текст

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

- Слага хоризонтална линия
- Слага изображение в html страницата Може да бъде използван в комбинация с етикета.

- Обозначава нов параграф

______________________________Етикети за цветове:______________________________

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

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

....

______________________________Етикети за таблици:______________________________

Таблиците са много важна част при правенето на web страници. В тях можете да слагате всичко - текст, картинки, java аплети, aktivеX контроли. С тях можете много лесно да позиционирате даден елемент от страницата ви в една мрежа, като използвате невидими ръбове.
Основните етикети са:

- това е основната структора
Етикетите и отделя редовете
Етикетите и ограждат заглавието на таблицата
Етикетите и отделят отделните клетки

______________________________Етикети за рамки (фрейми):______________________________

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

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

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

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

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

______________________________Mета тагове:______________________________

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

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

Заглавието на вашата страница

С какво става цялата работа?

Практически за да се създаде една интернет страница можете да използвате всеки текстови редактор. Notepad дори може да ви свърши страхотна работа ако сте професионалист и разбирате от WEB програмиране. Ако не сте такъв ви препоръчвам една от следните:
Macromedia Dreamweaver MX 2004 (Data.bg)
Macromedia Dreamweaver MX 2004 (ftlbg.cоm)
Също така една доста добра програма е Microsoft Office Publisher която можете да намерите във всеки office пакет на Microsoft.

Как да сложим анимации?

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

Какво представлява GIF анимацията:

GIF анимацията представлява поредица от картинки които се сменят през определено време. Изключително елементарни за създаване. Ето пример за GIF анимация. Тя се прави с програми като Ulead Gif Animator.

Какво представлява Flash анимацията:
Flash анимацията вече е по-трудна но същевременно по-добра и интересна анимация. Такъв вид анимация има многобройни приложения. Прави се с програми като SwishMax.

Как да качим страницата си?

За качване на страница в интернет се използва upload функцията на някой български free сървъра. За да качвате са ви нужни настройките на съответния сървър и upload програма. Повечето сървъри си имат файлов манипулатор но почти навсякъде той има ограничения в големината на файловете. Total Commander, FlashFXP или CuteFTP са едни от програмите за качване в интернет.

Javascript?

Javascript-а представлява код който е предназначен за празнообразяване на сайта ви. Има изключително много такива кодове като се започне от часовници и се свърши до трептене на екрана. За повече информация тук.

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

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

Ashkin Ahmedov

Dreamweaver Portable.tmp

Първи стъпки с HTML