Урок по 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 към а