[Release] First steps in HTML

sNG

New Member
Joined
Sep 11, 2008
Messages
2,646
Reaction score
690
Какво трябва да знаем?

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

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

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

Структуриране

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

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

Навигация

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

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

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

______________________________Eтикети:______________________________

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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> - Обозначава нов параграф

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

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

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

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

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


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

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

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



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

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

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

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

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

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

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

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


Credits: Uroci.net
 
Last edited:
  • Like
Reactions: xmaniacbg
браво! Това е супер за новаците в светът на html
 
Eто ви два кода който може да са ви от полза ! :)

Код за таблица
Code:
<table border="[color="red"]1[/color]">
   <tr>
      <td>1-ви ред, 1-ва колона </td>
      <td>1-ви ред, 2-ра колона </td>
      <td>1-ви ред, 3-та колона </td>
   </tr>
</table>

border oпределя дебелината на рамката на вашата таблица всеко по-голямо число означава по дебела рамка 1,2,3,4 .... !


iframe кода служи за отваряне на някой друг
сайт във вашия сайт ето го и кода.
Code:
<iframe src="Сайта" width="Дължина" height="Ширина"></iframe>
 
Last edited: