Урок по HTML


В следващите няколко реда ще разгледате команди за HTML, наречени тагове. С тяхна помощ могат да се правят WEB страници. Всички тагове се затварят с наклонена черта (например [div align][/div]) и то отзад напред. Примерно са изписани слединте тагове: [html][head][title]. Затварят се в тази последователност: [/title][/head][/html].
За дадена опция на тагове в повечето случаи се използват символите = и " ([p align="left"]).
Ако искате даден таг да важи за множество обекти, затворете го след обекта, до който искате да важи. По този начин избягвате повторението на тага.
За по-прилежно е препоръчитлено да форматирате добре сайта, т.е. да измествате с интервали/табулации когато имате тагове, свързани със списъци и таблици.
Вместо символите [ и ] използвайте < и >.

I. ОСНОВНИ ТАГОВЕ
[html] - указва, че скрипта е HTML
[head] - с този таг започва главния блок за сайта където до затварянето на тага ще можете да слагате скрипт или мета тагове
[title] - заглавие на сайта. Заглавието се изписва на най-горната лента в Windows
[body] - тялото на сайта. Обикновено между отворения и затворения таг се пише същинската част от сайта
[div align] - разположение на обекти. Може да бъде left, center или right и се въвежда с = и " ([div align="center"]
[p align] - разположение на абзац. Пак се въвежда с = и ".
[p] - нов абзац
[pre] - показва текста така, както е написан
[br] - прекъсване (остава 1-2 реда след даден обект). [nobr] се използва рядко и маха прекъсванията
[h1] - [h6] - различни видове заглавия
[font] - таг за шрифт. Този таг може и да се използва заедно с атрибути за него, например цвят, големина, вид. Съответно
[font color], [font size], [font face]. И трите атрибути могат да бъдат в един таг. Например [font face="arial" size="5" color="blue"].
[color] - този таг не може да се използва самостоятелно, а с комбинация от [font] или тагове за таблица. Може да бъде както и цвят с обикновени латински букви (red, blue, green и др.), така и 16-десетичен код и произволни символи (например font color="#ff00ff"]
[body bgcolor] - цвят на фона
[body background] - фонова картина. Посочва се името на файла, ако е в основната директория на файла, а ако не е - заедно с пътя до него.
[a href] - връзка към файл, директория или интернет адрес. Може да се комбинира с текст и картина. Например: [a href="home.htm"]Начална страница[/a] и [a href="home.htm"][img src="home.jpg"][/img][/a]. За да се махне рамката от картината, се изписва в тага img src border="false", а за да се отвори в нов прозорец връзката, в тага [a href] се изписва target="_blank"
[id] - идентификатор на обекта

II. ТАГОВЕ ЗА ТАБЛИЦИ
[table] - това е тага, с който определяте, че ще правите таблица
[border] - големина на рамката на таблицата. Използва се като атрибут на table. Следващите два тага също са атрибути
[cellpadding] - разстоянието между рамката и данните в клетката
[cellspacing] - разстоянието между клетките
[tr] - таг, който посочва, че създавате ред в таблицата
[td] - с помощта на този таг въвеждате данни в клетка
[backcolor] - атрибути за предишните два тага с който определяте какъв да е цвета на реда/клетката. Тага се изписва след tr/td ([tr backcolor="yellow"], [td backcolor="green"])

III. СПИСЪЦИ
1. Подредени
[ol] - дефинира (определя) подреден списък (нещата от списъка са подредени с цифри/числа/римски числа). След тага се изписва заглавието на списъка ([ol]Заглавие[/ol]
[li] - елемент от списъка. Например [li]Име[/li]
[ol type="1/A/a/I/i"] - определя типа на подредения списък. Съответно той може да бъде с цифри/главни букви/малки букви/главни римски числа/малки римски числа
2. Неподредени
[ul] - дефинира неподреден списък (нещата от списъка са подредени със символ (обикновено този символ е bullet). След тага се изписва заглавието на списъка.
[li] - елемент от списъка.
[ul type] - определя типа на неподредения списък. Може да бъде bullet или някакво друго название на символ

IV. Фреймове
[frameset] - с този таг се задават атрибутите за фреймовете. Атрибутите се задават в тага. За повече от един фрейм трябва поне още един такъв таг с атрибути
[rows] - големина на фрейма по редове в пиксела/проценти. Ако след големината се напише ,* , това означава, че другия фрейм ще използва останалото свободно пронстранство
[cols] - големина на фрейма по колони в пиксела/проценти. Ако след големината се напише ,* , това означава, че другия фрейм ще използва останалото свободно пронстранство
[frameborder] - граница между фреймове; 0 - няма, 1 - има
[framespacing] - разстояние между фреймовете в пиксели
[frame src] - източника на фрейма (HTML страница).
[name], [scrolling] - атрибути за горния таг; с name се задава името на фрейма, а със scrolling дали да има превъртане ("yes", "no" или "auto")

V. Команди за събития - изписват се в тага на обекта или като събитие при JavaScript (event="събитие"). В апострофи се загражда действието при това събитие и атрибутите за него. Пример: [img id="kartinka" src="krt1.gif" border="false" onmouseover='kartinka1.src="krt2.gif"' onmouseout='kartinka1.src="krt3.gif"' и т.н.
onmousedown - възниква когато потребителя натисне бутон на мишката
onmouseover - възниква когато потребителя постави показалеца на мишката над обект
onmouseout - възниква когато потребителя постави показалеца на мишката извън границите на обекта
onkeypress - възниква когато потребителя натисне клавиш
onfocus - възниква когато фокусът се премести върху даден обект
onclick - задейства се от клавиатурата и от мишката когато: потребителят натисне бутон на мишката върху някой обект; обекта е на фокус и потребителя натисне клавиша ENTER; когато има поле за отметка/радиобутон на фокус и потребителя натисне клавиша интервал
onhelp - възниква когато потребителя натисне клавиш F1
oload - възниква когато страницата/обекта приключи зареждането си
onresize - възниква когато се промени размера на прозореца
onscroll - възниква когато прозореца бъде превъртан
Съществуват методи (methods), описващи действие, което може да извърши даден обект и колекции (collections), които представляват списък от елементи, свързани с даден обект

VI. Команди за вход, формуляри, мета тагове, карти
1. Основна характеристика
[form] - този таг се изписва преди да се сложат каквито и да било елементи от формуляра. Поддържа следните атрибути: name, action, get - име, страница, към която да се праща информацията и метод (обикновено get).
[input type] - деклариране на обект за вход. Поддържа атрибутите name, type, value, checked/selected. Type е обекта, value - неговата стойност, checked/selected - дали да е отбелязан/избран (съответно при радиобутони, полета за отметка/списъчно поле). Поддържа още атрибута size (големина).
2. Видове обекти
text - текстово поле; поддържа атрибутите size, maxlength(максимална дължина)
password - поле за въвеждане на парола
checkbox - поле за отметка
radio - радио бутон; за да се образува единна група радиобутони, то те трябва да имат еднакви имена
button - обикновен бутон; за да работи, трябва да има скрипт, свързан с него и да има име
file - поле за прикачване на файл+бутон browse
hidden - скрито поле; скрива неща от потребителя
reset - изчиства данните до първоначалните във value
submit - изпраща данните
image - картинка; при натискането й данните се изпращат
3. Многоредово текстово поле (текстова обаст)
[textarea] - поддържа атрибутите за име, големина по колони и редове, както и за пренасяне ([wrap="soft/hard"]). Текста се пише преди да се затвори тага.
4. Списъчни полета
[select] - определя списъчното поле; поддържа атрибут за големина (по подразбиране 4), за подравняване (align) и за многоелементно селектиране (multiple)
[option] - елемент от списъчното поле; всеки от тези елементи трябва да има атрибут value
4. Тагове за коментари и мета тагове
а) таг за коментар - започва с [!-- и завършва с --]
б) мета тагове - чрез тях се извършват редица функции, които не са свързани пряко със съдържанието на страницата.
-принудително опресняване на страницата - [meta http-equiv="refresh" content="5"
-зареждане на кодова таблица със символи за език, различен от английски - [meta http-equiv="Content-Type" content="text/html;charset=Windows-51932"]. Оказаната кодова таблица ще се покаже само ако се поддържа и е инсталирана на компютъра на потребителя
-принудителна забрата за локално съхранение на страницата - [meta name="Pragma" content="No-Cache"]
-срок за актуалност - когато срокът за актуалност е изтекъл и не искаме страницата да се зарежда повече - [meta http-equiv="Expires" content="ден,дата,час GMT"]
-насочване на потребителя към друга страница след определен период от време [meta http-equiv="refresh" content="5;url=http://adres.com"]
-ключови думи, описания, тип на документа, интервал до следващите посещения, които ще се използват при търсене от други страниици
Всички мета тагове трябва да бъдат поставени в самото начало на страницата (например след title и преди head)
5. Карти - означения или графични изображения, съдържащи хипервръзки към различни адреси; съдържа два основни елемента - image и macro
Най-напред се избира картинка като й се задава определна дължина и широчина и в тага img се изписва атрибута usemap="#име_на_картата"
[map name] - определяне на картата; използва се името от usemap без диеза;
[area shape] - форма на областта от картата, която ще избирате; rect,circ,poly - съответно правоъгълна, кръгова, многоъгълна особености - при правоъгълната форма се задават 4 стойности - първите две са широчина и дължина (Х и У) - координати за горния ляв ъгъл, а останалите - за долния десен; при кръговата - първите две стойности са Х и У на центъра, а третата - радиуса; при многоъгълната - всяка двойка Х и У представлява един ъгъл; последната двойка се свързва с първата

VII. JavaScript - представлява скрипт към езика HTML и по-скоро е част от DHTML (Dynamic HTML). Тага, с който декларирате, че ще използвате скрипта, е [script language="JavaScript"]. Можете както от самата страница да ползвате скрипт, така и от външен файл с разширение js (пример: [script language="JavaScript" src="script.js"]. След това тага се затваря. Скрипта обикновено се пише между head и [body]. Скрипта обикновено се използва за обекти и още в началото се заявява кои обекти ще касае и при какво събитие ще се изпълни нещо. Например: [script language="JavaScript" for="MyImage" event="onclick"]; [!-- myImage.Src="new.gif" //--]; [/script]; ... [body]; [img id="MyImage" src="old.gif"]. Тук for задава за кой обект да се отнася скрипта и при какво събитие да се сменя картинката; оригиналната картинка е в body частта. Сменянето на картинката може и да се извърши без скрипта, а и чрез скрипта, но със функция. Ето как може това да стане: [script language="JavaScript"]; function changeImage(){myimg.src="new.gif}; [/script]; ...; [img id="myimg" src="old.gif" onclick="ChangeImage()"]. Нещата между точките и запетаите са на отделни редове.
1. Елементи на езика
а) за коментари се използват: // - за цял ред; /*, */ - за абзац
б) типове данни: числов, десетичен (дробната част се отделя със запетая; например 57,369), шестнадесетичен (числото се представя с нула и х; например 0х57), осмичен (записва се нула пред числото), логически (базиран на true/false), символен низ (всичко, оградено в кавички е символен низ)
в) други елементи
\a - alert(звуков сигнал)
\b - backspace(връща курсора с един символ)
\f - forward(преминава на нова страница)
\n - new line(преминава на нов ред)
\r - carriage return(премества курсора в началото на реда)
\t - tab(символ за табулация)
2. Деклариране на променливи - извършва се с var
а) оператори за присвояване
В следващите няколко реда е валиден следния формат: оператор|функция|пример|еквивалетно на
+=|прибавя стойността на b към стойността на а|a+=b|a=a+b
-=|изважда стойността на b от тази на a|a-=b|a=a-b
*=|умножава стойността на b по тази на а|а*=b|a=a*b
/=|присвоява резултата от делението на a и b|a/=b|a=a/b
%=|присвоява остатъка от целочисленото деление на а и b|a%=b|а=%b
?:|условно присвояване|a:(c[d)?e:f|if (c[d) then a:=e else a:=f
б) логически оператори
В следващите няколко реда е валиден следния формат: |оператор|функция|пример
!|логическо отрицание|!(a=b)
<|по-малко от|a
>|по-голямо от|a>b
<=|по-малко или равно|a<=b
>=|по-голямо или равно|a>=b
!=|различно от|a!=b
==|равно на|a==b
&&|логическо И (конюнкция) (a==b)&&(c
|||логическо ИЛИ (дизюнкция) (a==b)||(c
3. Четене и променяне на свойства - стават чрез нотацията на обекта и сменяне на свойство. alert изкарва съобщение с ОК и х; след това съобщение чрез променянето на свойствата на обекта (например за неговата височина и широчина) се променят стойностите. Например: ...;[body];[img id="img1" src="circle.gif"];[script language="javascript"];alert("Img1 has width "+img1.width+" and height "+img1.height);img1.height=150;img1.width=300;alert("Now it has width "+img1.width+" and height "+img1.height);[/script]. Втория прозорец alert показва вече променените стойности на обекта.
4. Нотация и наименуване - името на един обект и неговите дъщерни обекти, свойства, методи или колекции се разделят с точка; обект.свойство=параметър
5. По-често срещани събития и начин за прихващане на обект
а) по-често срещани събития: onclick, ondblclick, onmousedown, onmouseup, onmousemove, onmouseover, onkeypress, onkeydown, onkeyup, onresize
б) примери за прихващане на обект:
-1-ви (за бутон) [html];[head][title]?[/title];[/head][body;form onload="alert('Формата се зареди.')"];[input type="button" value="бутон" onclick="alert('Натиснахте бутона')" onmouseover="alert('Посочихте бутона.')"];[/form];[/body];[/html] 2-ри (за текст) [html];[head];[title]primer[/title];[script language="javascript" for="Span1" event="onmouseover";span.innerHTML="мишката е върху текста";[/script];[/head];[body][span id="Span1" onmouseout='this.innerHTML="Вие сте извън текста"']Това е оригиналния текст.;[/span];[/body];[/html]

VIII. Тагове за "разкрасяване"
1. Пример за слагане на звуков фон - [body bgsound="file.mp3/wav/mid..." loop="infite"] или слагане на звук в сайта изобщо - [embed src="file.mp3" loop="infite"]
2. Пример за превъртане на текст - това се осъществява чрез тага marquee и той поддържа освен scroll и други неща. Ето и примера - [marquee behavior="scroll" size="150" direction="right"]обект[/marquee]. Големината е в пиксели; може да се слагат идентификатори за събития вътре в тага
3. Добавяне на търсачка за Google - препишете следната част:
Търсачка на Google
[!--SiteSearch Google --]
[form method=get action='http://www.google.com/search' target='_blank'
[!-- --]
[input type=text name=q maxlenght=255 value='']
[input type=submit name=sa value='търсене']

IX. Работа с данни в JavaScript
1. Променливи
а) определение - именован обект, който съдържа данни
б) деклариране - директно (а=5) или var a, var a=5
2. Типове данни - string(низ, стринг), number(число), boolean(булев) - true/false, null(нулев), undefined(недефиниран), object(обект)
3. Тип string - низовете са полседователности от знаци, които могат да включват букви, числа и символи. Низовете се отделят от останалия код чрез единични или двойни кавички (',").
- основни понятия - знак(character) - всяка буква, число или символ; буква(letter) - всеки член на азбуката (главни и малки букви); число(number) - една или повече цифри; символ(symbol) - всеки знак, който не е нито буква, нито число (напр. препинателни знаци);различават се главни и малки букви.
- пример myVar='това са няколко специални символи - \\,\,"'; резултат - това са няколко специални символа - \\,\,"
4. Специални символи - могат да се заместват със знака \
В следващите редове е валиден следния формат: знак|заместване
кавичка|\'
двойна кавичка|\"
обратна наклонена черта|\\
изтриване на предходния символ (backspace)|\b
връщане в началото на реда (carriage return)|/r
край на страница(form feed)|\f
край на ред(end feed)|\n
табулация|\t
5. Стандартни математически операции - + събиране - изваждане * умножение / деление = оператор за присвояване % остатъка от деление += -= *= /= %= прибавя/изважда/умножава/дели/взима остатъка на b към а