C, PHP, VB, .NET » ХHTML/JS

XHTML форми

Филип Петров — Sat, 12 Sep 2009 06:44:58 +0000

Досега в разглежданите примери винаги сървърът предоставяше информация, а потребителят я четеше. Понякога обаче ни се иска да направим и обратна връзка. Формите са универсалният метод за изпращане на информация от потребител към сървър. Обикновено тази стъпка в различна посока от „еднопосочното“ движение на информация не е комфортна за разработчиците. Човек свикнал да борави със статичен HTML код обикновено изпитва трудности при обработването на информация от форми. Затова на тази тема ще се спрем по-детайлно.

За изграждане на форми използваме следните тагове:

– базов таг, с който се ограждат всички елементи на формата;
– таг указващ някои от възможните полета за въвеждане на информация. Тук попадат бутони, едноредови текстови полета, избираеми полета и полета за отбелязване;
– многоредово текстово поле;</li> <li><select> – така нареченото „падащо меню“.</li> </ul> <p>Споменатите елементи се изобразяват графично. Има съвсем минимални разлики между различните браузъри в изобразяването им. Всъщност вие сте виждали тези същите контроли за въвеждане на информация във вашата операционна система. Често разработчиците променят външния им вид чрез CSS според дизайна на сайта.</p> <p>Ето и пълен списък на контролите както и кратък пример за всеки от тях:</p> <table border="1"> <caption>Layout of form elements – CHI Best Practice</caption> <tbody> <tr style="text-align: center;"> <th>Елемент</th> <th>Пример</th> <th>Изглед</th> </tr> <tr> <td>input type=“text“</td> <td>Username:<br /><br /> <input type=“text“ name=“username“ /></td> <td style="text-align: center;"></td> </tr> <tr> <td>input type=“password“</td> <td>Password<br /><br /> <input type=“password“ name=“password“ /></td> <td style="text-align: center;"></td> </tr> <tr> <td>input type=“button“</td> <td><input type=“button“ name=“help“<br /> value=“Help?“ /></td> <td style="text-align: center;"></td> </tr> <tr> <td>input type=“submit“</td> <td><input type=“submit“ name=“submit“<br /> value=“Validate“ /></td> <td style="text-align: center;"></td> </tr> <tr> <td>input type=“radio“</td> <td><input type=“radio“<br /> name=“agree“<br /> value=“Yes“ checked=“checked“ /> SSL on<br /><br /> <input type=“radio“<br /> name=“agree“<br /> value=“No“ /><br /> SSL off</td> <td style="text-align: center;"></td> </tr> <tr> <td>input type=“checkbox“</td> <td><input type=“checkbox“<br /> name=“remember“<br /> value=“remember“ />Save cookie?</td> <td style="text-align: center;"></td> </tr> <tr> <td>select</td> <td>Where do you want to login to?<br /><br /> <select name=“section“><br /> <option>Admin section</option><br /> <option>User area</option><br /> </select></td> <td style="text-align: center;"></td> </tr> <tr> <td>textarea</td> <td>Log comment for this login:<br /><br /> <textarea name=“comment“<br /> rows=“3″ cols=“18″>
Ето как би изглеждала първата ни форма (която все още не прави нищо):
```
	
	HTML Form


	
		
		Username:

		


		Password:

		


		
			Save cookie?



		
			SSL on


		
			SSL off



		Where do you want to login to?

		



		Log comment for this login:

		


		
		
		
	
```
Резултат:

В следващата статия ще покажем как можем да „прихващаме“ информацията от форма и да я обработваме на сървъра.

П.П. Примерите за контроли и примерната форма са показани като картинка, а не с реалните обекти. Опитахте ли се да натиснете бутона? :)

Математически функции в JS

Филип Петров — Fri, 11 Sep 2009 17:46:58 +0000

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

I. Константи:

Math.E - Ойлеровата константа e = 2.718281828459045…;
Math.LN2 – натурален логаритъм от 2 – ln(2);
Math.LN10 – натурален логаритъм от 10 – ln(10);
Math.LOG2E – log₂(e);
Math.LOG10E – log₁₀(e);
Math.PI – 3.141592653589793…;
Math.SQRT1_2 – корен квадратен от 1/2;
Math.SQRT2 – корен квадратен от 2.

II. Функции:

Math.abs(<число>) – абсолютна стойност от число;
Math.acos(<число от -1 до 1>) – аркускосинус;
Math.asin(<число от -1 до 1>) – аркуссинус;
Math.atan(<радиани>) – аркустангенс;
Math.atan2(, ) – аркустангенс от отношението на координатите на точка y/x (което всъщност дава радиани);
Math.cos(<радиани>) – косинус. Например Math.cos(Math.PI) ще даде резултат -1;
Math.sin(<радиани>) – синус;
Math.tan(<радиани>) – тагненс;
Math.ceil(<число>) – закръглява числото нагоре. Например ceil(3.1) дава 4;
Math.floor(<число>) – закръглява числото надолу, например floor(3.9) дава 3;
Math.round(<число>) – закръглява числото, например round(3.1) дава 3, а round(3.5) дава 4;
Math.exp(<степен x>) – дава степен на експонентата – e^x;
Math.log(<положително число x>) – натурален логаритъм ln(x);
Math.max(<число a>, <число b>) – връща по-голямото от числата a и b;
Math.min(<число a>, <число b>) – връща по-малкото от числата a и b;
Math.pow(<число a>, <число b>) – връща a на степен b, т.е. a^b;
Math.random() – връща произволно число от 0 до 1;
Math.sqrt(<положително число или 0>) – връща корен квадратен от числото.

Важно е да помните, че тригонометричните функции използват радиани, а не градуси. Естествено това не е сериозен проблем, тъй като можем лесно да използваме формулата за превръщане на градуси в радиани. Например, за да превърнете 45 градуса в радиани използваме формулата 45*Math.PI/180.

Дати в JavaScript

Филип Петров — Thu, 10 Sep 2009 22:09:50 +0000

Не е рядък случая когато ни се налага да работим с дата и час. Това се налага винаги когато имаме нужда да работим с календар. Например ако имаме статия, която е публикувана на определена дата и искаме да видим „на колко дни е тя“. В социалните мрежи често има функционалности за позрав при рожден ден. Друг случай е когато създаваме таймери.

JavaScript ни дава един изключително полезен обект – дата. Дефинира се по следния начин:

var currentdate = new Date();
document.write(currentdate);

Както се досещате от името на променливата, така извикана функцията Date() връща текущото време. Резултатът от този пример ще е нещо подобно на:

Fri Sep 11 2009 00:01:43 GMT+0300 (FLE Daylight Time)

Fri означава петък (дните от седмицата са Mon, Tue, Wed, Thu, Fri, Sat и Sun). Следва трибуквен код за месец (Sep – септември). Числото 11 отговаря за деня, а 2009 е годината (по американски стандарт месецът се пише преди деня). Числата 00:01:43 отговарят за час, минута и секунда, а GMT+0300 е отклонението на часовата зона спрямо Гринуич (България е в часова зона +0200).

Естествено този формат на датата не е много удобен. Понякога ни трябва само денят, друг път само годината или часа. За това обектът от тип Date ни предоставя редица готови функции:

getDate() – връща пореден ден от месеца. От примера currentdate.getDate() ще върне 11. Естествено числото е в интервала от 1 до 31;
setDate(<число от 1 до 31>) – променя деня в променливата;
getDay() – връща деня от седмицата. Ако например днес е петък (Fri), то currentdate.getDay() ще върне числото 5;
getMonth() – връща поредния номер на месеца, но от 0 до 11! Обърнете специално внимание на този факт – септември е 9ти месец в календара, на getMonth() ще върне числото 8!;
setMonth(<число от 0 до 11>) – променя месеца от стойността на променливата;
getYear() – връща число разликата между текущата година и 1900. Например ако годината е 2009, то числото върнато от функцията ще бъде 109 (2009-1900 = 109);
setYear(<цяло число>) – променя стойността на годината. Приема както положителни, така и отрицателни числа, които отговарят на реалната година. Обърнете внимание, че за разлика от getYear() тук НЕ се работи с разликата с 1900, а числото отговаря за самата година. Например currentdate.setYear(1998) ще настрои годината на 1998;
getHours() – връща часа. От примера currentdate.getHours() връща 0. Числото е от 0 до 23;
setHours(<число от 0 до 23>) – променя стойността на часовете в променливата;
getMinutes() – връща минутите – число от 0 до 59;
setMinutes(<число от 0 до 59>) – променя стойността на минутите в променливата;
getSeconds() – връща секундите като число от 0 до 59;
setSeconds(<число от 0 до 59>) – променя секундите в променливата;
getTime() – връща броят милисекунди изтекли от 00:00:00 на 1ви януари 1970 до стойността на променливата. Забележете, че в стандартния изход не присъстваха милисекунди, но въпреки това операторът „new Date()“ ги е записал в променливата;
setTime(<милисекунди от 1.1.1970>) – задава дата и час чрез милисекунди;
setFullYear(<година>, <месец>, <ден>) – настройва едновременно месец, ден и година;
toGMTString() – превръща времевата зона в GMT и променя датата и часа според нея;
toLocaleString() – превръща в датата и часа в локална зона. Използват се настройките на операционната система и изходът зависи от тях;
getTimezoneOffset() – разликата в минути от текущо настроената часова зона и GMT

Последната функция изисква специално внимание. От примера видяхте, че датата се показа като GMT0300, тоест разликата между GMT и GMT0300 е точно -3 часа или -180 минути. Така ако искаме да видим локалното време ще напишем:

var currentdate = new Date();
var timezone = -currentdate.getTimezoneOffset()/60;
document.write("My current timezone is "+timezone);

Въпросът за настройка на вашата часова зона без да използваме toLocaleString(), което променя формата, е по-сложен. За целта е нужно сами да напишем функция. Няма да се занимаваме подробно с това – в интернет се намират редица готови скриптове за настройка на часова зона.

Накрая ще дадем един прост пример – скрипт, в който вашата дата на раждане е зададена чрез три променливи day, month и year. Скрипта ще покаже дали имате рожден ден в момента или не:

var day = 11;
var month = 9;
var year = 1982;
var currentdate = new Date();
if ((day==currentdate.getDate()) && (month==currentdate.getMonth()+1)){
	document.write("Happy Birthday!");
}
else{
	document.write("No birthday");
}

Е, очевидно е, че не използвахме year никъде в проверките, но не беше и нужно :)

Обект масив

Филип Петров — Wed, 09 Sep 2009 18:14:33 +0000

Най-общо казано обектите се създават чрез оператор new:

var <име> = new <обект>(<инициализиращи данни>);

Всеки обект си има набор от функции. Това могат да бъдат както get и set методи, така и други функции. Нека обектът Object има функция с име function. За да я достъпим ние използваме „.“:

Object.function();

Възможно е едни обекти да са дефинирани в други обекти. Няма обаче да се спираме подробно на тази йерархия. Същината на обектите е в предмета на по-сериозни курсове на програмиране. Тук ще се научим по-скоро как да ги използваме практически, без да задълбочаваме в тяхната същина. В следващите няколко статии ще разгледаме няколко от най-често използваните обекти и ще дадем примери как те се употребяват.

Засега ще започнем с един от най-често употребяваните стандартни обект – масив. Обектите от този тип са с име „Array“. Използва се за да можем да обединим множество от стойности под едно име. Например ако желаем да запишем под името на една променлива имената на няколко ученика, то бихме направили следното:

var students=new Array();
students[0]="Petar Petrov";
students[1]="Ivan Ivanov";
students[2]="Maria Zlateva";

Достъпът до стойността на елемент от масива става по същия начин чрез индекс на елемента му:

document.write(students[1]);

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

Първото и основно „свойство“ на масивите, което ще използваме е length, което определя тяхната дължина (брой елементи). В следния пример обхождаме горния масив и го отпечатваме на екрана, като всеки елемент е на нов ред:

for(var i=0; i");
}

Можем да направим частична аналогия между масив в JavaScript и вектор в C++. Наистина масивите в JavaScript са динамични и имат много сходства със стековете и списъците.

На първо място ще разгледаме функцията join(<разделител>). Чрез нея можем да обединим всички елементи на един масив в един низ. Например ето как можем да направим променлива, която съдържа всички елементи на масива разделени със запетайка:

var allstudents = students.join(", ");
document.write(allstudents);

Следва типична за стековете е функцията pop(). Тя изтрива последния елемент на масива и го връща като резултат:

var laststudent = students.pop();
document.write(laststudent);

Обратната функция е push(<стойност>) – тя добавя елемент в края на масива. Удобна е, защото няма нужда да помним индекса на последния елемент:

students.push("Teodora Miteva", "Nikolay Zaprianov");

Ако искаме да обърнем елементите на масив в обратен ред, то използваме готовата функция reverse():

students.reverse();

Типична за FIFO (first in first out) списъци пък е функцията shift(). При нея се премахва първият елемент от масива и се връща като резултат:

var firststudent= students.shift()
document.write(firststudent);

Обратно – ако желаем да добавим елемент в началото на масива, то използваме функция unshift(<стойност>):

students.unshift("Petko Stoianov");

Ако искаме да сортираме масив по азбучен ред, то използваме функция sort():

students.sort()

Отбелязваме, че sort() ще сортира по азбучен ред. Ако масивът се състои от числа, то те няма да бъдат подредени по големина. За целта е позволено да подаваме като параметър на функцията сорт име на друга функция – т.нар. „сортираща функция“, която трябва да сравнява два елемента и да върне отрицателно число (ако първия е по-голям), 0 (ако са равни) или положително число (ако вторият е по-голям):

function sortnums(a,b){
	return a-b;
}
nums.sort(sortnums);

Накрая ако желаем да изтрием елемент от масив, то използваме функцията splice(<индекс>, <брой елементи>). Например ако желаем да изтрием един елемент от индекс 1, то ще използваме:

students.splice(1,1);

Функцията splice може да си използва и за замяна на елементи. Ако искаме да премахнем елементи 1 и 2 и на тяхно място до поставим два нови, то ще напишем:

students.splice(1,2,"Todor Dimitrov","Irena Milcheva");

Може би се досещате вече, че по такъв начин можем и да вмъкваме елементи в масив. Ако вторият параметър е 0, то няма да бъде заменено нищо. Следният пример добавя елемент на мястото на елемент с индекс 2:

students.splice(2,0,"Petar Balabanov");

Функции в JavaScript

Филип Петров — Tue, 08 Sep 2009 13:09:22 +0000

Използването на функции в JavaScript е изключително опростено. За това силно спомага автоматичното разпознаване на типовете данни. Единственото за което трябва да следите за съответствие е броя на входните параметри. Обикновено (но не задължително) дефинираме функциите в заглавната част на html документа (head).

Пример: функция, която отпечатва сбора на две числа подадени като параметър:




	
		
		JavaScript

Когато се налага функцията да върне изходна стойност, то се използва оператор „return“. Ето същия пример реализиран чрез връщане на стойност от функцията към извикващия скрипт:




	
		
		JavaScript

Всички променливи, които се декларират вътре в тялото на функция са видими и валидни само и единствено вътре в тялото на функцията. Всички променливи дефинирани извън тялото на функциите се наричат „глобални променливи“ и са видими за всички функции. Накрая – не е проблем една функция да извика друга функция.

Съществуват редица готови (предефинирани) функции. Сега ще изброим част от тях:

escape(<низ>) – превръща ASCII символен низ в ISO-Latin-1 (удобен за отпечатване на екран текст с латински букви);
unescape(<низ>) – обратно превръща ISO-Latin-1 текст в ASCII символен низ;
eval(<низ>) – функция, която превръща символен низ в число. Например eval(„12/3″) дава резултат числото 4. Не връща нищо ако в низа има буква или невалиден за математическа операция символ;
parseInt(<низ>) – намира първото число в низа като спира при намиране на буква. Например parseInt(„123abc456″) ще върне резултат 123. Ако не се намери число се връща резултат 0;
parseFloat(<низ>) – намира първото число с плаваща запетая. Например parseFloat(„123.456abc789.10″) ще върне резултат 123.456. Ако не се намери число се връща резултат 0;
isNaN(<низ>) – проверява дали символен низ НЕ е число. Например isNaN(„123″) връща false, а isNaN(„abv“) връща true;
alert(<низ>) – показва диалогов прозорец с текст подадения низ и бутон „OK“;
confirm(<низ>) – показва диалогов прозорец с текст подадения низ и два бутона – OK и Cancel. Ако потребителя натисне OK, то върнатия резултат е „true“, ако натисне Cancel върнатия резултат е false;
prompt(<низ>) – показва диалогов прозорец с текст подадения низ, текстово поле в което потребителя може да пише и два бутона – OK и Cancel. При натискане на OK въведения в текстовото поле текст се връща като резултат от функцията. При натискане на Cancel се връща резултат null.

Пример: Извиква диалогов прозорез, в който иска да си въведете името и след това ви поздравява

Цикли в JavaScript

Филип Петров — Mon, 07 Sep 2009 17:21:36 +0000

В JavaScript се използват цикли „while“, „do-while“ и „for“. Всъщност това са стандартни цикли за почти всички езици за програмиране. Ще разгледаме всеки един от тях накратко чрез пример:

1. while: Повтаря поредица от операции докато условието в скобите е вярно.

Пример: Изкарва на екрана четните числа от 2 до 50.

Резултат: 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50

2. do-while: Прави същото като цикъла while, с изключение на това, че операторите в тялото на цикъла се изпълняват поне един път, дори условието да е грешно.

Пример: Същия пример като за цикъл while.

Направете опит – променете условието в while на нещо, което ще е грешно в самото начало, например counter<0. Ще видите, че въпреки това цикълът ще се изпълни веднъж!

3. for: Може би най-често използвания тип цикли. При него имаме начална стойност, условие и условие за нарастване.

Пример:

Имайте в предвид, че всичко, което можете да направите с for и do-while можете да реализирате и с while. Поради тази причина можем да кажем, че while е универсалният вид цикъл.

П.П. Можете да прекратите цикъл по всяко време като използвате оператор break; или да го накарате да „прескочи стъпка“ чрез оператор continue;. Няма да се спираме подробно на тях.

Многовариантен избор в JavaScript

Филип Петров — Sun, 06 Sep 2009 19:39:56 +0000

В статията за оператор „if-else“, че го използваме, за да „разделим логически част от кода на програмата на две части“. Какво можем да направим, за да го разделим на повече? Например нека имаме една променлива day, която приема стойност от 1 до 7. Искаме да напишем програма, която отпечатва името на ден от седмицата спрямо числото. С досегашните знания бихме решили задачата по следния начин:

Променяйте стойностите на a и ще видите, че резултата е точно това, което очаквахме. Виждаме, че с този метод ние на практика „влагаме“ един оператор if-else в тялото на друг.

Както в повечето езици за програмиране, така и в JavaScript ни е дадена възможност за осъществяване на горната функционалност чрез един единствен оператор. Нарича се оператор за многовариантен избор – switch. Синтаксисът е следния:

switch(<променлива/израз>)
{
case <стойност 1>:
    <операции>;
    break;
case <стойност 2>:
    <операции>;
    break;
...
default:
    <операции>
}

Ето как ще изглежда по-горния пример реализиран чрез този оператор:

В условието в скобите след „switch“ може освен променлива да присъства и цял израз.

Оператор if-else и условия за сравнение

Филип Петров — Sat, 05 Sep 2009 03:03:34 +0000

Може би най-често използвания оператор е if-else. Чрез него се прави т.нар. „разделяне“ на програмен код на две части. Синтаксисът му е следния:

if (<условие>){
   
}
else{
   
}

Условието винаги връща резултат true (вярно) или false (невярно). Логиката е, че ако условието е вярно, то ще се изпълни код 1 в първите скоби, а ако не е вярно, то ще се изпълни код 2 от вторите скоби след else.

Ето един елементарен пример:

Виждате, че в условието използвахме оператор за сравнение (проверихме дали x е по-голямо от y). Естествено ние сме свикнали да използваме такива от математиката и ги използваме ежедневно – по-голямо, по-малко, равно, по-голямо или равно, и т.н.

Нека имаме две променливи x и y с дадени стойности. В JavaScript разполагаме със следните оператори за сравнение:

x == y: сравнява дали стойностите на променливите са равни. Ако те са – връща true, в противен случай – false;
x === y: отново сравнява стойностите на променливите за равенство, но тук освен това ги сравнява по тип на данните. Това означава, че ако x е числото 5, а y е символен низ „5″, то резултатът ще бъде false. При първия оператор за сравнение за равенство това не е така;
x != y: обратното на сравнение за равенство – връща true ако стойностите НЕ са равни и false ако са равни;
x > y: сравнение „по-голямо“;
x < y: сравнение „по-малко“;
x >= y: сравнение „по-голямо или равно“;
x <= y: сравнение „по-малко или равно“.

За всеки начинаещ се явява проблем да свикне с често използвания оператор „==“. Това е психологическо наследство от математиката, където за равенство се използва само веднъж символа „=“. В програмирането и JavaScript в частност „x = 5″ и „x == 5″ са две напълно различни неща!

Възможно е условието да бъде комбинирано. Затова спомагат т.нар. логически оператори. Те са общо три на брой:

&& : логически оператор „и“;
|| : логически оператор „или“;
! : логически оператор „отрицание“.

Например ако имаме две променливи x и y и искаме да проверим дали двете заедно са по-големи от нула, то бихме могли да напишем условието като: if ( (x>0) && (y>0) ){…}. Ако пък желаем поне едината (но не задължително и двете) променлива да бъде по-голяма от нула, то бихме написали if ( (x>0) || (y>0) ){…}. Отрицанието пък обръща резултата. Например !(x>0) е еквивалентно на (x<=0). За повече информация за логическите оператори прочетете следната статия: съждения. Логическия оператор && отговаря на „конюнкция“, || отговаря на дизюнкция, а ! е обозначено по същия начин като „отрицание“. Другите логически оператори от предложената статия не са налични в JavaScript.

Променливи

Филип Петров — Thu, 03 Sep 2009 08:43:23 +0000

Променливите в JavaScript се дефинират чрез ключова дума var последвана от името на променливата. Когато искаме да предадем стойност, то използваме знак за равенство. Според стойността, която предаваме се определя автоматично и типа на променливата. Например ако подадем цяло число, то автоматично променливата става от целочислен тип. Ако пък подадем символен низ, то променливата става символен низ.

Ще започнем с целочислен тип променливи. Ето един пример:

Резултатът, който ще излезе на екрана е:

x+y=11
z=30

В този пример забелязваме няколко важни неща за document.write() функцията. На първо време – можем да изкарваме по няколко типа данни наведнъж. Обърнете внимание на следното:

document.write("x+y="+(x+y));

НЕ Е едно и също с

document.write("x+y="+x+y);

Първото ще изкара резултат x+y=11, а второто x+y=56 (5 е стойността на x, а 6 на y). Тоест ако искаме в document.write да се сумират променливи, то ги ограждаме в скоби. Малко по-долу ще обясним защо се получава така.

В този пример използвахме и умножение (var z = x * y). Както във всички езици за програмиране и в JavaScript са налични петте основни операции за целочислен тип:

Събиране: var x = 3+2 // x=5
Изваждане: var x = 3-2 // x=1
Умножение: var x = 3*2 // x=6
Деление: var x = 7/2 // x=3.5 !!!
Остатък от деление: var x = 7%2 // x=1

Тук виждаме и първата съществена разлика от нормалните езици за програмиране. Делението на две целочислени числа, които имат остатък, автоматично дава резултат реално число!

При низовите променливи няма изненади. Дефинират се стандартно:

Виждате, че е дефинирана и операция „сбор на низове“. Това означава, че просто слепваме двата низа един до друг. Всички символни низове се ограждат в двойни кавички.

Когато имаме сбор на низ с число, то резултатът е низ. Например „string“+5 ще даде резултат „string5″. Тук вече можем да си обясним поведението на document.write от по-горе. Написано като „x+y=“+x+y ставаше следното – първо към низ „x+y“ се добавя стойността на променливата x и се получава низ „x+y=5″. След това към низ „x+y=5″ се добавя стойността на променливата y и се получава низ „x+y=56″. Когато поставим скоби се получава друго нещо. Написано като „x+y=“+(x+y) се извършват първо операциите в скобите. Тъй като в скобите имаме само числа, то ще се изчисли техния сбор, което е резултат число – 5+6=11. След това към низ „x+y=“ се долепва стойността, която е изчислена в скобите и се получава резултат низ „x+y=11″. Затова бъдете изключително внимателни, когато миксирате различни променливи!

Задача: Напишете скрипт, който пресмята и извежда на екрана дискриминантата на квадратно уравнение с коефициенти a=-2, b=-1 и c=3.

Въведение в JavaScript

Филип Петров — Wed, 02 Sep 2009 20:38:35 +0000

JavaScript e скриптов език за програмиране, който се използва активно в HTML страници. Поддържа се от всички популярни браузъри. Първото и основно нещо, което трябва да знаете е, че кодът се изпълнява при браузъра на клиента, който отваря страницата. Това е фундаментална разлика с повечето езици за web програмиране като PHP, ASP.Net, Java и др. Това има както своите предимства (не употребява процесорно време на сървъра), така и недостатъци (от гледна точка на сигурността). Не бъркайте Java с JavaScript – това са две фундаментално различни неща и нямат нищо общо помежду си!

Синтаксисът за програмиране на JavaScript е доста опростен. Скриптовете се изпълняват без нужда да бъдат прекомпилирани. Обикновено скриптовете се пишат директно вътре в HTML кода. Предимствата, които дизайнерите получават с JavaScript са много:

Програмен език за осъществяване на логически операции;
Въвеждане на динамични обекти;
Въвеждане на понятието „събитие“ и обработка на информация спрямо него (например натиснат бутон на мишката, въведен текст от клавиатурата и т.н.);
Обработка на информация въведена от потребител.

Нека преминем към първият пример:




	
		
		JavaScript

Виждате, че въвеждаме нов таг

По този начин можем да използваме един и същи скрипт в много документи. Важно е да се отбележи, че HTML файла и .js файла трябва да бъдат в една и съща кодировка! В случая от примера това е UTF-8. Ако кодировките са различни, то резултатът най-вероятно няма да е желан. В следващи статии ще разгледаме подробно функционалностите и възможностите на JavaScript.

Преформатиране, код и цитати

Филип Петров — Wed, 02 Sep 2009 17:06:31 +0000

Сега ще демонстрираме три допълнителни тага, които можем да използваме в XHTML 1.1 с цел форматиране на текст. Повечето хора ги смятат за наследство от миналото, което вече не се използва. Въпреки това смятам, че заслужават внимание.

1. Преформатиран текст – осъществява се чрез таг

. Използва се за изкарване на екрана на обикновен текст. Така например няма нужда да слагаме 
 за нов ред, табулациите се визуализират и поредните интервали нямат нужда от  . Обикновено се използва когато искаме да отпечатаме текстов файл на екрана. Въпреки това трябва да се внимава със символите < и > – в таг  е позволено да отваряме други тагове. Ето пример:
Това е пример за текст

който ще изведе на екрана всичко по начина,
по който го напишем като свободен текст!
Виждате, че няма нужда от <br /> за нов ред.

Трябва да знаете, че таговете се взимат под внимание.
Ето например удебелен текст

Резултат:
Това е пример за текст

който ще изведе на екрана всичко по начина,
по който го напишем като свободен текст!
Виждате, че няма нужда от 
 за нов ред.

Трябва да знаете, че таговете се взимат под внимание.
Ето например удебелен текст
Виждате, че аз използвам именно таг 
 за демонстриране на код. Ако не предефинирате стила – стандартно браузърите визуализират текста с monospace шрифт.
2. Таг  – на практика „орязана версия“ на таг 
. По дефиниция това би трябвало да бъде таг, който се използва за демонстриране на фрагменти от програмен код. Той има същата визуализация като таг  с тази разлика, че всички интервали се „отрязват“, новият ред не се визуализира и табулациите също не се визуализират. Досещате се, че това е по същия начин както това става в нормалния XHTML код. Така всъщност таг  е еквивалентен на обикновен параграф, чийто стил е променен с шрифт monospace. Поради тази причина практически никой не използва таг . Пример:
Това е пример за текст

форматиран с таг <code>..
Няма никаква разлика от писането на обикновен HTML код!
Ето например удебелен текст

Резултат:
Това е пример за текст форматиран с таг .. Няма никаква разлика от писането на обикновен HTML код! Ето например удебелен текст

Виждате също, че е задължително да вмъкваме  вътре в друг форматиращ таг – параграф или поле. Затова  е може би удобен за вмъкване на наистина малки фрагменти код. Лично аз бих го използвал за ключови думи и термини.

3. Цитати: Таг 
 е измислен за случаи когато желаем да вмъкваме цитати. Отново бих казал, че въобще не е популярен при писането на стандартен HTML код. Често обаче получава употреба при редица WYSIWYG редактори. При blockquote специфичното е, че текстът се форматира малко по-навътре. На практика той не е нищо по-различно от таг , но вмъкнат по-навътре спрямо текста:
Пример за цитат:


Това е някакъв 

цитат. Таговете работят. Пример за удебелен текст

Резултат:
Пример за цитат:

Това е някакъв цитат. Таговете работят. Пример за удебелен текст

Виждате и друга особеност – трябва да дефинирате параграф или поле вътре в таг 
 (специфична и досадна особеност на XHTML). Сивата вертикална черта в блога е постигната чрез допълнително преформатиране чрез CSS. Много софтуерни продукти като блогове и форуми предефинират blockquote така, че да е еквивалентен на таг , но вмъкнат навътре с линия подобна на тази от примера горе.



Imagemap
Филип Петров — Tue, 01 Sep 2009 08:42:07 +0000
Идеята за imagemap идва от прехода между дизайн към конкретна реализация на уеб сайт. В миналото, когато не са били налични средства за динамични обекти като Flash или Java, е било проблем създаването на „красиви“ сайтове. Често дизайнерите са давали проекти на програмистите, които не е било възможно да бъдат осъществени. Това е честа ситуация, при която художник рисува скица на важен елемент на сайта, който трябва да стане динамичен. Оказва се, че не винаги техниката на „рязане“ на картинката на части и поставянето на отделните парчета в таблица е достатъчно. Например може да се наложи да направим бутони със сложни форми – нещо неосъществимо от досегашните статии, понеже картинките винаги се вмъкват като правоъгълници.
Най-общо казано imagemap е една картинка, върху която има множество от области, които сме направили връзки. С други думи ако посочите с мишката върху точно определен обект от картинката, то ще забележите, че този обект всъщност се явява образно казано бутон за натискане.
Нека разгледаме следната картинка:

Да речем, че желаем да направим така, че посочвайки вътре в очертанията на София да направим връзка към страница в wikipedia. Отначало трябва да се научим да определяме координати вътре в картинката. Ще го демонстрираме как това става елементарно с MSPaint. Посочете в долният ляв ъгъл на контура на София с мишката и погледнете в долния десен ъгъл:

Всичко което трябва да направите е да запишете последователно двойките числа по контура. Между всеки две точки свързването ще бъде по права линия. Ето как би изглеждала една стравнително подробна разбивка по контура на София:
118,162, 113,162, 107,152, 105,160, 86,145, 86,137, 76,128, 96,119, 119,121, 120,130, 112,137
Контурът е винаги затворен. Това се получава като от последната точка винаги се свързва с първата. Ето как ще създадем въпросната картинка с контур около София (няма проблем да използвате както img, така и object таг за вмъкване на картинка):


	
		
		ImageMap example
	
	






/>



Резултат:




Забележка: В стандарта XHTML 1.1 атрибут „name“ на таг  НЕ съществува. Ние обаче сме принудени да го сложим, защото Mozilla Firefox не работи без него. Аналогичен проблем е и със стойността на атрибут „usemap“ в  – правилният запис би трябвало да без #, но за съжаление нито един браузър все още не се е съобразил с изискването. Освен това обръщаме специално внимание, че всички координати като стойност на „coord“ трябва да са зададени на един ред – в противен случай Internet Explorer „няма да се справи със задачата“. Надяваме се тези проблеми да бъдат изчистени в бъдеще.
Възможно е да използваме и готови обекти. Вместо poly можем да използваме rect (приема за координати две точки – горен ляв и долен десен ъгъл на правоъгълник) или circ (приема три числа – координати на центъра и радиус на окръжност в пискели). Няма да се спираме подробно на тях.
Естествено няма никакъв проблем да имаме повече от една област. Просто вътре в таг „map“ трябва да добавите нов таг „area“. По-специален от всички е таг „area“ с shape „default“. Буквално преведено означава „област по подразбиране“, но дефакто е цялата картинка като правоъгълник.
За финал ще споменем, че въпреки, че imagemap е стар и все по-рядко използван похват, той все пак е изключително удобен поради липсата от нужда от каквито и да е допълнителни разширения за браузъра. Освен това кодът е изключително кратък и затова желаната функционалност се зарежда изключително бързо без да се хаби трафик или процесорно време. Затова когато функционалността е достатъчна бихме ви насърчили да използвате именно imagemap пред другите по-тежки алтернативи.



Цветове
Филип Петров — Sun, 30 Aug 2009 16:53:51 +0000
Вече забелязахте, че ни се налага да работим с цветове. Досега използвахме т.нар. именовани цветове. Така ако искахме синьо пишехме „blue“, ако искахме червено – „red“ и т.н., т.е. извикваме конкретен цвят чрез неговото име. Именованите цветове са и т.нар. „безопасни цветове“, т.е. такива които са дефинирани строго във всеки един браузър и винаги се визуализират по един и същи начин, без значение на спецификите на системата. В стандарта HTML са залегнали само 16 такива цвята, но във всички браузъри от 2005г. насам е залегнат общопризнат стандарт на общо 140 – ще ги покажем по-долу.
Втора възможност за дефиниране на цветове е чрез стандарта RGB (червено, зелено и синьо). Чрез него цвета се указва с числа от 0 до 255. Например синьо е наредената тройка (0,0,255) – отсъствие на червено и зелено и пълно синьо. Ако пък искаме да постигнем цвят „tomato“ (домат) то използваме (255,99,71) – да, доматите не са напълно червени. По този начин можете да дефинирате около 16 милиона цвята (24 битов цвят). Всъщност терминът „безопасни цветове“, който споменахме по-горе, е наследство от миналото, когато мониторите можеха да изобразяват до 256 цвята. Днес можете спокойно да използвате пълната RGB гама без да се притеснявате дали ще се визуализира еднакво навсякъде.
Третата възможност е т.нар. HEX код. Той не е нищо друго освен друг начин на записване на RGB. Тройките шестнадесетични числа от 00 до FF са именно тройки числа от 0 до 255 превърнати в десетична бройна система. Ще ги демонстрираме по-долу.
1. Цветове по XHTML стандарт:

Стандартни 16 цвята


Цвят
HEX
RGB
Резултат




aqua
00FFFF
(0,255,255)



black
000000
(0,0,0)



blue
0000FF
(0,0,255)



fuchsia
FF00FF
(255,0,255)



gray
808080
(128,128,128)



green
008000
(0,128,0)



lime
00FF00
(0,255,0)



maroon
800000
(128,0,0)



navy
000080
(0,0,128)



olive
808000
(128,128,0)



purple
800080
(128,0,128)



red
FF0000
(255,0,0)



silver
C0C0C0
(192,192,192)



teal
008080
(0,128,128)



white
FFFFFF
(255,255,255)



yellow
FFFF00
(255,255,0)




2. Допълнителни цветове: Повечето НЕ са дефинирани по стандарта HTML, но са широко разпространени сред браузърите и най-вероятно няма съвременен браузър, който да не ги поддържа.

Червена гама


Цвят
HEX
RGB
Резултат




IndianRed
CD5C5C
(205,92,92)



LightCoral
F08080
240,128,128



Salmon
FA8072
(250,128,114)



DarkSalmon
E9967A
(233,150,122)



LightSalmon
FFA07A
(255,160,122)



Crimson
DC143C
(220,20,60)



Red
FF0000
(255,0,0)



FireBrick
B22222
(178,34,34)



DarkRed
8B0000
(139,0,0)




 

Розова гама


Цвят
HEX
RGB
Резултат




Pink
FFC0CB
(255,192,203)



LightPink
FFB6C1
(255,182,193)



HotPink
FF69B4
(255,105,180)



DeepPink
FF1493
(255,20,147)



MediumVioletRed
C71585
(199,21,133)



PaleVioletRed
DB7093
(219,112,147)




 

Оранжева гама


Цвят
HEX
RGB
Резултат




LightSalmon
FFA07A
(255,160,122)



Coral
FF7F50
(255,127,80)



Tomato
FF6347
(255,99,71)



OrangeRed
FF4500
(255,69,0)



DarkOrange
FF8C00
(255,140,0)



Orange
FFA500
(255,165,0)




 

Жълта гама


Цвят
HEX
RGB
Резултат




Gold
FFD700
(255,215,0)



Yellow
FFFF00
(255,255,0)



LightYellow
FFFFE0
(255,255,224)



LemonChiffon
FFFACD
(255,250,205)



LightGoldenrodYellow
FAFAD2
(250,250,210)



PapayaWhip
FFEFD5
(255,239,213)



Moccasin
FFE4B5
(255,228,181)



PeachPuff
FFDAB9
(255,218,185)



PaleGoldenrod
EEE8AA
(238,232,170)



Khaki
F0E68C
(240,230,140)



DarkKhaki
BDB76B
(189,183,107)




 

Пурпурна гама


Цвят
HEX
RGB
Резултат




Lavender
E6E6FA
(230,230,250)



Thistle
D8BFD8
(216,191,216)



Plum
DDA0DD
(221,160,221)



Violet
EE82EE
(238,130,238)



Orchid
DA70D6
(218,112,214)



Fuchsia
FF00FF
(255,0,255)



Magenta
FF00FF
(255,0,255)



MediumOrchid
BA55D3
(186,85,211)



MediumPurple
9370DB
(147,112,219)



BlueViolet
8A2BE2
(138,43,226)



DarkViolet
9400D3
(148,0,211)



DarkOrchid
9932CC
(153,50,204)



DarkMagenta
8B008B
(139,0,139)



Purple
800080
(128,0,128)



Indigo
4B0082
(75,0,130)



SlateBlue
6A5ACD
(106,90,205)



DarkSlateBlue
483D8B
(72,61,139)



MediumSlateBlue
7B68EE
(123,104,238)




 

Зелена гама


Цвят
HEX
RGB
Резултат




GreenYellow
ADFF2F
(173,255,47)



Chartreuse
7FFF00
(127,255,0)



LawnGreen
7CFC00
(124,252,0)



Lime
00FF00
(0,255,0)



LimeGreen
32CD32
(50,205,50)



PaleGreen
98FB98
(152,251,152)



LightGreen
90EE90
(144,238,144)



MediumSpringGreen
00FA9A
(0,250,154)



SpringGreen
00FF7F
(0,255,127)



MediumSeaGreen
3CB371
(60,179,113)



SeaGreen
2E8B57
(46,139,87)



ForestGreen
228B22
(34,139,34)



Green
008000
(0,128,0)



DarkGreen
006400
(0,100,0)



YellowGreen
9ACD32
(154,205,50)



OliveDrab
6B8E23
(107,142,35)



Olive
808000
(128,128,0)



DarkOliveGreen
556B2F
(85,107,47)



MediumAquamarine
66CDAA
(102,205,170)



DarkSeaGreen
8FBC8F
(143,188,143)



LightSeaGreen
20B2AA
(32,178,170)



DarkCyan
008B8B
(0,139,139)



Teal
008080
(0,128,128)




 

Синя гама


Цвят
HEX
RGB
Резултат




Aqua
00FFFF
(0,255,255)



Cyan
00FFFF
(0,255,255)



LightCyan
E0FFFF
(224,255,255)



PaleTurquoise
AFEEEE
(175,238,238)



Aquamarine
7FFFD4
(127,255,212)



Turquoise
40E0D0
(64,224,208)



MediumTurquoise
48D1CC
(72,209,204)



DarkTurquoise
00CED1
(0,206,209)



CadetBlue
5F9EA0
(95,158,160)



SteelBlue
4682B4
(70,130,180)



LightSteelBlue
B0C4DE
(176,196,222)



PowderBlue
B0E0E6
(176,224,230)



LightBlue
ADD8E6
(173,216,230)



SkyBlue
87CEEB
(135,206,235)



LightSkyBlue
87CEFA
(135,206,250)



DeepSkyBlue
00BFFF
(0,191,255)



DodgerBlue
1E90FF
(30,144,255)



CornflowerBlue
6495ED
(100,149,237)



MediumSlateBlue
7B68EE
(123,104,238)



RoyalBlue
4169E1
(65,105,225)



Blue
0000FF
(0,0,255)



MediumBlue
0000CD
(0,0,205)



DarkBlue
00008B
(0,0,139)



Navy
000080
(0,0,128)



MidnightBlue
191970
(25,25,112)




 

Кафява гама


Цвят
HEX
RGB
Резултат




Cornsilk
FFF8DC
(255,248,220)



BlanchedAlmond
FFEBCD
(255,235,205)



Bisque
FFE4C4
(255,228,196)



NavajoWhite
FFDEAD
(255,222,173)



Wheat
F5DEB3
(245,222,179)



BurlyWood
DEB887
(222,184,135)



Tan
D2B48C
(210,180,140)



RosyBrown
BC8F8F
(188,143,143)



SandyBrown
F4A460
(244,164,96)



Goldenrod
DAA520
(218,165,32)



DarkGoldenrod
B8860B
(184,134,11)



Peru
CD853F
(205,133,63)



Chocolate
D2691E
(210,105,30)



SaddleBrown
8B4513
(139,69,19)



Sienna
A0522D
(160,82,45)



Brown
A52A2A
(165,42,42)



Maroon
800000
(128,0,0)




 

Бяла гама


Цвят
HEX
RGB
Резултат




White
FFFFFF
(255,255,255)



Snow
FFFAFA
(255,250,250)



Honeydew
F0FFF0
(240,255,240)



MintCream
F5FFFA
(245,255,250)



Azure
F0FFFF
(240,255,255)



AliceBlue
F0F8FF
(240,248,255)



GhostWhite
F8F8FF
(248,248,255)



WhiteSmoke
F5F5F5
(245,245,245)



Seashell
FFF5EE
(255,245,238)



Beige
F5F5DC
(245,245,220)



OldLace
FDF5E6
(253,245,230)



FloralWhite
FFFAF0
(255,250,240)



Ivory
FFFFF0
(255,255,240)



AntiqueWhite
FAEBD7
(250,235,215)



Linen
FAF0E6
(250,240,230)



LavenderBlush
FFF0F5
(255,240,245)



MistyRose
FFE4E1
(255,228,225)




 

Сива гама


Цвят
HEX
RGB
Резултат




Gainsboro
DCDCDC
(220,220,220)



LightGrey
D3D3D3
(211,211,211)



Silver
C0C0C0
(192,192,192)



DarkGray
A9A9A9
(169,169,169)



Gray
808080
(128,128,128)



DimGray
696969
(105,105,105)



LightSlateGray
778899
(119,136,153)



SlateGray
708090
(112,128,144)



DarkSlateGray
2F4F4F
(47,79,79)



Black
000000
(0,0,0)




3. Използване на различни стандарти за запис: остана да кажем как можем да сменяме цветове по различните стандарти. Ще демонстрираме директно с пример.

Параграф със сменен цвят чрез име


Параграф със сменен цвят чрез HEX


Параграф със сменен цвят чрез RGB

Кой от стандартите ще използвате е лично ваш избор. Ако желаете по-специфични цветове естествено трябва да излезете от именованото множество и да използвате HEX или RGB код.
П.П. Имената на цветовете и техните кодове са съгласувани със статията за WEB цветове от Wikipedia, като има само минимална редакция.



Мета тагове
Филип Петров — Sun, 30 Aug 2009 08:32:23 +0000
Още в първата статия въведохме понятието „мета информация“ и го преведохме като „информация за информацията“. Мета таговете се използват за две главни цели – подаване на команди към браузъра и „скрито“ за потребителя описание на съдържанието на страницата.
1. meta http-equiv – мета тагове за команди към браузъра. Синтаксиса на тези тагове е следния:

Във всички примери досега винаги използвахме един такъв мета таг. Той беше следния:
a)  – дефинира „content-type“ (съдържание на страницата) като text/html формат с кодировка UTF-8. Изключително рядко се използва нещо различно от „text/html“, но кодировката може да бъде друга:
- KOI8-R – често срещана кодировка специално за руски език;

- iso-8859-1 – латински езици;

- iso-8859-2 – източно европейски езици като чешки, полски, унгарски и румънски;

- iso-8859-3 – „умрелия“ език есперанто;

- iso-8859-4 – естонски, латвийски и литовски;

- iso-8859-5 – кирилица;

- iso-8859-6 – арабски;

- iso-8859-7 – гръцки;

- iso-8859-8 – еврейски;

- iso-8859-9 – турски;

- iso-8859-10 – гренландски и лапландски;

- iso-8859-11 – тайландски;

- iso-8859-12 – келтски;

- iso-8859-13 – балтийски езици, които липсват в iso-8859-4;

- iso-8859-14 – келтски (подобeн на iso-8859-12);

- iso-8859-15 – същият като iso-8859-1, но съдържа и символа за Евро;

- iso-8859-16 – същият като iso-8859-2, но съдържа и символа за Евро.
Има и редица други кодировки. Например в близкото минало много често използван в България беше windows-1251, което е друг вид кодировка на кирилица. Това днес довежда до проблеми по мигрирането на стари сайтове към нови. Почти всички кодировки обаче вече се заместват от универсалния стандарт UTF-8. Все пак ето изброени стандартните кодировки за Windows:
- windows-1250 – чешки, полски, унгарски, румънски, хърватски, словашки, словенски, албански и немски;

- windows-1251 – кирилица;

- windows-1252 – латински езици;

- windows-1253 – гръцки;

- windows-1254 – турски;

- windows-1255 – еврейски;

- windows-1256 – арабски;

- windows-1257 – естонски, латвийски и литовски;

- windows-1258 – виетнамски.
б)  – „Refresh“ означава, че страницата ще се „презареди“. Стойност 10 означава, че това ще стане след 10 секунди. Допълнителните данни в URL пък дават възможност да укажем какво точно да се презареди в текущия прозорец. С други думи това е един (остарял) метод за пренасочване от стар адрес на сайт към нов. Без URL се използва за сайтове с динамично съдържание, което се обновява често. Тази техника обаче също е заместена от много по-удобни и гъвкави инструменти. С други думи – едва ли ще ви се наложи да използвате refresh.
в)  – указва на браузъра кога текущото съдържание на страницата става неактуално. Така ако браузъра има cache с информация преди тази дата и час, а те са преминали, то той няма да използва cache-а, а ще зареди страницата наново от сървъра. Използва се рядко, но понякога може да бъде много полезно. Например ако имаме някакво събитие на сайта – да кажем откриване на дадена промоция точно в определен ден и час.
г)  – указва на браузъра въобще да не пази cache. Други възможни стойности са „public“ (свободно кеширане), „private“ (кеширане само за лично ползване) и „no-store“ (може да се кешира, но не и архивира). Почти винаги този мета таг се използва заедно със следващия в списъка.
д)  – контролира кеширането за прокси сървъри. Стойностите са като при таг „cache-control“. Истината е, че прокси сървърите рядко се „вълнуват“ от наличието на този таг.
е)  – указва на  търсачките какъв е езика на страницата. Използва се при категоризация и  „таргетиране“ на търсенията.
ж)  – остарял и вече почти забравен метод за слагане на cookie в клиентския браузър. Удобен е само за cookie със статична информация, а това вече е доста рядко срещана нужда.
з)  – дефинира езикът за скриптови езици, който се използва по подразбиране в страницата. Други възможни стойности например са „text/tcl“ и „text/VBScript“. Силно препоръчваме да НЕ използвате този мета таг и винаги когато използвате скриптови езици изрично да указвате какви са те.
и)  – дефинира езикът за описание на стилове, който се използва по подразбиране в страницата. Засега единствената възможна стойност е „text/css“, което прави тагът безполезен. Дори и в бъдеще да се появят алтернативи на CSS, отново е в сила препоръката от предишния изброен таг – по-добре сами описвайте данните и не разчитайте на несигурни методи за дефиниране на стойности по подразбиране. Все още браузърите не спазват стриктни стандарти що се отнася до мета таговете.
2. meta name – тагове, които дават синтезирана информация за страницата. Използва се от търсачки и ботове, които индексират страници в интернет. Общия синтаксис е:

a)  – указва авторът на информацията в страницата.
б)  – кратко описание на страницата – не повече от 150 до максимум 200 символа! Това например понякога е текстът, който се появява под връзките на намерените резултати в Google.
в)  – ключови думи за страницата разделени със запетаи. Не е добре да използвате дълги ключови думи (изречения). Избягвайте повторенията на думи и гледайте думите да отговарят на съдържанието на страницата ви.
г)  – информация за авторското право на страницата.
д)  – адрес на електронна поща за връзка с автора на страницата.
е)  – рядко използван еквивалент на популярния robots.txt. Чрез този мета таг се дава информация за индексиращите ботове и търсачките. Възможните стойности са all (пълно индексиране на страницата и нейните връзки), none (забрана за каквато и да е индексация), index (индексира текущата страница), follow (следва връзките), noindex (не индексира текущата страница) и nofollow (не следва връзките).  Така например комбинацията „index, follow“ е еквивалентна на „all“, а „index, nofollow“ ще укаже „индексирай само текущата страница, но НЕ следвай нейните връзки. В днешно време за съжаление все по-малко търсачки се съобразяват с нашите изисквания.
ж)  – указва специално за най-популярния бот (този на google) да не пази страницата в Google Cache. Други възможни стойности са всички познати от мета таг „robots“, както и един допълнителен – nosnippet (без архивиране в Google Cache дори на частична информация).
з)  – указва на търсачката, че най-вероятно съдържанието на страницата ще бъде обновено след 30 дни. По този начин насърчаваме търсачките да обновяват индексите си по-често. Не злоупотребявайте, защото ако лъжете, то може да получите „наказание“ от търсачката и да ви бъде смъкнат ранга.
и)  – много рядко използван мета таг. Чрез global (по подразбиране) указваме, че съдържанието на страницата е с международно значение, чрез local, че е с местно, а чрез iu казваме, че е само за лично ползване (internal use).
й)  – указва типа съдържание на страницата и целевата му група. Възможни стойности са:

- general: използва се от всички възрастови групи;

- mature: съдържание само за възрастни. Задължително е да бъде поставено при съдържание с насилие или порнография, защото се използва от филтрите на браузърите;

- restricted: само за отбран кръг посетители (обикновено се слага на страници, които са защитени с парола);

- 14 years: страница предназначена за деца до 14 години – по този начин насърчаваме търсачките да извеждат съдържанието на по-предна страница, когато се използват филтри за контрол на деца;

- safe for kids: указваме, че страницата е напълно безопасна за деца въпреки, че е предназначена предимно за възрастни.
к)  – указва на коя дата е публикувана страницата. По този начин търсачките се ориентират за актуалността на информацията.
л)  – името на софтуера, с който е генерирана вашата HTML страница. Аз например си пиша статиите през WYSIWYG рекадтора на блога WordPress и затова редактора на всички мои страници е дефиниран автоматично като „WordPress“ последван от версията. Обикновено редакторите сами слагат тази информация, а този мета таг се използва само и единствено за статистическа информация.
м)  – идентичен  с .  Обикновено не се използва.
н)  – името на дизайнера на уеб страницата. Обикновено се слага от фирми изработващи уеб сайтове, хора изработващи шаблони или просто дизайнери поддържащи даден уебсайт.
о)  – обикновено се слага само на страници съдържащи научни публикации. В този таг се слага резюмето на статията. Засега никой не използва този таг.
п)  – по-скоро препоръчвам да не използвате този таг или ако го правите да слагате същата информация, каквато се намира в таг …. Навсякъде пише, че ефектът от използването на този таг е спорен и по-скоро не трябва да го ползвате.
р)  – отново има отношение към научните статии и в него се пише научната област. Както и при „abstract“ – засега нито търсачки, нито браузъри използват този таг.
с)  – стойност, която подсказва на порталите как да категоризират вашата страница. Стойностите могат да бъдат какъвто искате текст, но силно се препоръчва ако въобще ползвате този таг, то да използвате някоя стандартна дума от големите портали (art, education, sport, news, и т.н.). Практически на мен този таг ми е „помагал“ само един единствен път, когато при добавяне на сайт към списъка на портал беше избрана вярната категория автоматично. Тъй като това е много рядка операция – може би ще е добре да спестите на посетителите на сайта изтеглянето на няколко байта и ще си избирате категорията в порталите сами.
т)  – указва кой е собственика на уеб страницата/сайта – име на човек или компания. Може би го използвайте тогава, когато собственика на сайта е различен от автора на конкретната статия – има логика за корпоративни блогове, форуми, и т.н. Все пак имайте в предвид, че едва ли някоя търсачка или браузър използва този таг.
Надявам се, че информацията и препоръките ми ще ви бъдат полезни…



Класове и идентификатори
Филип Петров — Sat, 29 Aug 2009 14:39:44 +0000
Досега показахме множество примери със т.нар. „inline“ стилове. При тях стилът се променя на мястото където ни е нужно това. Това води до редица неудобства:

Представете си страница с 10 параграфа, всеки от който трябва да е с тъмно сив фон и бели букви. Ясно е, че с досегашните знания ние ще променяме стиловете за фон и букви десет пъти;
Не е хубаво да се смесват дизайн и съдържание. Би било много по-добре ако може да ги разделим максимално много.

Затова за щастие има възможност за „изнасяне“ на CSS кода в заглавните тагове . Ето един пример:




CSS стилове



    Малко текст в първи параграф 
    Малко текст във втори параграф 
   Малко текст в друго поле


Резултат:

Сигурно веднага забелязахте удобството. Синтаксисът е изключително прост:
таг { стил1:стойност; стил2:стойност; … }
Е, веднага се сблъскваме с едно неудобство. Забелязваме, че по този начин абсолютно всички параграфи стават сиви с бял текст и абсолютно всички полета div стават сини с бял текст. Какво правим ако желаем да създадем трети параграф, който е с черен фон?
Тук на помощ идват т.нар. „класове“ от стилове. Ще демонстрираме директно с пример:




CSS стилове



   class="siv">Малко текст в първи параграф 
   class="siv">Малко текст във втори параграф 
   Малко текст в друго поле
   class="cheren">Ето един черен параграф
   Ето и един параграф без стил


Резултат:

Ето как бихме могли да дефинираме таблицата от края на миналата статия:




Форматиране на текст и картинки
 








   #
   Лично име
   Фамилно име




   1
   Анна
   Петрова


   2
   Иван
   Захариев


   3
   Димитър
   Михайлов






Има и още една възможност за създаване на стилове – чрез идентификатори. Ето един пример:




Идентификатори в CSS



   Нормален параграф
   Параграф с променен стил


Резултат:

Остава въпросът „каква е разликата между класове и идентификатори?“. Отговорът е, че стил дефиниран като идентификатор може да бъде използван само един единствен път в документа! С други думи стойностите на атрибута id в таговете трябва да са уникални! При класовете това не е така – можем да имаме повече от един обект от даден клас.
Накрая ще споменем за още една функционалност – „изнасяне“ на целия CSS код в отделен файл! Ето един пример – вземете целия код между  от примера с таблицата и го запишете в текстов файл с име styles.css.
Файл styles.css:
table.students {
	border:1px;
	border-style:solid;
	border-color:black;
	width:100%;
	font-family:'Lucida Console', Monaco, monospace;font-size:12pt";
}
colgroup.numbers {
	background-color:wheat;
	width:25px;
}
colgroup.names {
	background-color:whitesmoke;
}
td.center {
	text-align:center;
}
thead.students {
	background-color:lightgrey;
	height:40px;
}
XHTML файл:




Идентификатори в CSS









   #
   Лично име
Фамилно име




   1
   Анна
   Петрова


   2
   Иван
   Захариев


   3
   Димитър
   Михайлов






Виждате, че така може няколко HTML файла да споделят едни и същи стилове. Това е и най-често употребяваната структура. В атрибут href на link може да давате както релативен път, така и URL.



Форматиране на таблици
Филип Петров — Thu, 27 Aug 2009 18:40:45 +0000
Сега е време да разгледаме няколко по-специфични параметри, чрез които да можем да форматираме таблиците много по-гъвкаво.
1. cellpadding: атрибут със стойност в пиксели, чрез който се обозначава разстоянието между текста в клетките и рамката на клетките в таблица.
Пример:

	
		
			Колона 1
			Колона 2
		
	

	
		
			11
			21
		
		
			12
			22
		
	

Резултат:

Алтернативно можете да използвате стилове. Стил padding или подстилове padding-top, padding-left, padding-right и padding-bottom ви дават още по-гъвкави възможности за позициониране на текст в клетка.
2. cellspacing: атрибут приемащ стойност в пиксели, чрез който се обозначава разстоянието между рамката на таблицата и рамката на клетките.

Пример:

	
		
			Колона 1
			Колона 2
		
	

	
		
			11
			21
		
		
			12
			22
		
	

Резултат:



Колона 1
Колона 2




11
21


12
22



По подразбиране cellspacing e 1. Най-често използвана е стойност 0, при която рамките съвпадат.
Пример:

	
		
			Колона 1
			Колона 2
		
	

	
		
			11
			21
		
		
			12
			22
		
	

Резултат:



Колона 1
Колона 2




11
21


12
22



Алтернативата чрез стилове е border-spacing.
3. width: Дължина по хоризонтала на таблица или клетка. Ще дадем пример за всеки елемент по отделно. Тук ще го реализираме чрез стилове.
Пример: Таблица с обща широчина 80%.

	
		
			Колона 1
			Колона 2
		
	
	
		
			11
			21
		
		
			12
			22
		
	

Резултат:



Колона 1
Колона 2




11
21


12
22



Пример: Таблица изпълваща екрана по хоризонтала и с първа колона от точно 70 пиксела.

	
		
			Колона 1
			Колона 2
		
	
	
		
			11
			21
		
		
			12
			22
		
	

Резултат:



Колона 1
Колона 2




11
21


12
22



4. height: Определя височина на таблица или ред.
Пример: Таблица с обща височина 200 пиксела и първи ред с височина 20 пиксела.

	
		
			Колона 1
			Колона 2
		
	
	
		
			11
			21
		
		
			12
			22
		
	

Резултат:



Колона 1
Колона 2




11
21


12
22



5. frame: атрибут, определящ рамката на таблицата. Възможните стойности са:
a) void – без рамка;

б) above – само горната линия на рамката е видима;

в) below – само долната линия;

г) hsides – само двете вертикални линии;

д) vsides – само горната и долната линия;

е) lhs – само лявата линия;

ж) rhs – само дясната линия;

з) box – всички линии (по подразбиране).
Пример:

	
		
			Колона 1
			Колона 2
		
	
	
		
			11
			21
		
		
			12
			22
		
	

Резултат:



Колона 1
Колона 2




11
21


12
22



6. colgroup: Използва се за създаване на групи от колони. Можете лесно да си направите аналогия с thead, tbody и tfoot, които са групи по редове. Ето как можем да създадем таблица с три колони и две групи. За да ги различите ще сложим розов фон на първата група и жълт на втората:

	
	
	
		
			Колона 1
			Колона 2
			Колона 3
		
	
	
		
			11
			21
			31
		
		
			12
			22
			32
		
	

Резултат:





Колона 1
Колона 2
Колона 3




11
21
31


12
22
32



7. rules: атрибут, чрез който се контролират линиите вътре в таблицата. Възможните стойности са:
а) none – без линии – по подразбиране;

б) groups – само между между thead, tbody и tfoot, както и col и colgroup;

в) rows – линии само по редове;

г) cols – линии само по колони;

д) all – и по редове и по колони.
Пример:

	
	
	
		
			Колона 1
			Колона 2
		
	
	
		
			11
			21
		
		
			12
			22
		
	

Резултат:





Колона 1
Колона 2




11
21


12
22



8. border, border-color и border-style: стилове, който задават дебелина, цвят на рамката и стил.
a) border – всъщност обединяващ стил, който може да приема повече от един параметър. Ако му подадем размер в пиксели, то определя дебелината на рамката;

б) border-color – приема за стойност цвят на рамката;

в) border-style – приема една от следните стойности:

- none – без рамка;

- hidden – практически същото като none;

- dotted – на точки;

- dashed – на чертички;

- solid – права линия (по подразбиране);

- double – двойна права линия;

- groove, ridge, inset, outset – специални триизмерни ефекти, които зависят пряко от border-color;

- inherit – наследяване от родителски елемент (т.е. ако например таблицата е вътре в параграф, то наследява рамката на параграфа).
Пример:

	
		
			Колона 1
			Колона 2
		
	
	
		
			11
			21
		
		
			12
			22
		
	

Резултат:



Колона 1
Колона 2




11
21


12
22



Същите стилове са приложими за цели редове или отделни клетки!
Вече можем да построим доста смислени таблици. Ето например списък от ученици:

	
	
	
		
			#
			Лично име
			Фамилно име
		
	
	
		
			1
			Анна
			Петрова
		
		
			2
			Иван
			Захариев
		
		
			3
			Димитър
			Михайлов
		
	

Резултат:

* Някои от резултатите са показани с картинки, понеже wysiwyg редактора на блога автоматично променя стиловете.



Фонове
Филип Петров — Thu, 27 Aug 2009 14:18:09 +0000
Досега показахме как можем да сменяме цвета на текста, който пишем. Сега ще погледнем възможностите за създаване на фон зад текст и на различни обекти.
1. Фонов цвят на полета:

	Текст на жълт фон
	
		с вмъкнат текст на розов фон
	.
	Самият текст по подразбиране е черен.

Резултат:
Текст на жълт фон  с вмъкнат текст на розов фон . Самият текст по подразбиране е черен.
2. Фонов цвят за таблици:

Примерна таблица

	
		Колона 1
		Колона 2
	



	
		Зелен
		ред
	
	
		12
		сива клетка
	
	
		13
		23
	


Резултат:

Розова таблица


Колона 1
Колона 2




Зелен
ред


12
сива клетка


13
23



3. Фонова картинка: Нека разгледаме следната картинка:


Тя се намира на адрес: http://www.cphpvb.net/wp-content/uploads/2009/08/image.jpg

Ще я използваме като фон на:
a) Параграфи и други полета:

	Това е пример за параграф, чийто фон е картинка. Можете да използвате широк
        формат от изображения - jpg, gif, png, bmp и др.

Резултат:
Това е пример за параграф, чийто фон е картинка. Можете да използвате широк формат от 	изображения – jpg, gif, png, bmp и др.
б) Фон на таблица:

Примерна таблица

	
		Колона 1
		Колона 2
	



	
		11
		21
	
	
		12
		22
	


Резултат:

Примерна таблица


Колона 1
Колона 2




11
21


12
22



в) Фон на ред от таблица:

Примерна таблица

	
		Колона 1
		Колона 2
	



	
		11
		21
	
	
		12
		22
	


Резултат:

Примерна таблица


Колона 1
Колона 2




11
21


12
22



Аналогично може да се постави картинка и като фон на отделна клетка.
4. Фон на цялата страница: Можете да направите фон и на цялата страница, като поставите стила в таг . Важат както стиловете background-color, така и background-image:



	
		
		Форматиране на текст и картинки
	
	

		
			На тази страница има фонова картинка и параграф на бял фон.
			Както виждате картинката се слага една до друга по
			хоризонтала и по вертикала (т.нар. tile).
		
	

Резултат:

5. Повторения: Чрез стил background-repeat можете да дефинирате споменатия по-горе „tile“. Възможностите са:
a) no-repeat: без повторение
	

		
			На тази страница има фонова картинка и параграф на бял фон.
			Както виждате картинката се слага една до друга по
			хоризонтала и по вертикала (т.нар. tile).
		
	
Резултат:


б) repeat-x: повторение по хоризонтала:
	

		
			На тази страница има фонова картинка и параграф на бял фон.
			Както виждате картинката се слага една до друга по
			хоризонтала и по вертикала (т.нар. tile).
		
	
Резултат:


в) repeat-y: повторение по вертикала:
	

		
			На тази страница има фонова картинка и параграф на бял фон.
			Както виждате картинката се слага една до друга по
			хоризонтала и по вертикала (т.нар. tile).
		
	

г) repeat: по подразбиране – повтаря и по вертикала и по хоризонтала.
6. Местене на фон: Чрез стил background-attachment може да променя начинът, по който фонът се държи при преминаване на следваща страница (т.нар. scroll). Това се налага когато обектите и текстът на страницата излиза извън екрана на браузъра. Възможните стойности са scroll (по подразбиране – картинката е статична и се движи заедно с текста) и fixed (картинката стои статично на екрана и текста и обектите се движат върху нея.
7. Позициониране: Можем да позиционираме фоновата картинка чрез стил background-position. Той приема два параметъра – val1 и val2. Първият параметър отговаря за позиционирането по хоризонтала. Възможните параметри са left, center, right, брой пиксели или проценти. Вторият параметър отговаря за позиционирането по вертикала. Възможните стойности за val1 са top, center, bottom, брой пиксели или проценти.
Пример 1: Фонова картинка позиционирана долу в средата:
	

		
			FreeBSD® is an advanced operating system for modern server,
			desktop, and embedded computer platforms. FreeBSD's code base
			has undergone over thirty years of continuous development,
			improvement, and optimization. It is developed and maintained
			by a large team of individuals. FreeBSD provides advanced
			networking, impressive security features, and world class
			performance and is used by some of the world's busiest web
			sites and most pervasive embedded networking and storage devices.
		
	
Резултат:

Виждате, че това позициониране е спрямо обектите на екрана, а не самия екран на браузъра!
Пример 2: Картинка позиционирана на 20% по хоризонтала и 80% по вертикала:
	

		
			FreeBSD® is an advanced operating system for modern server,
			desktop, and embedded computer platforms. FreeBSD's code base
			has undergone over thirty years of continuous development,
			improvement, and optimization. It is developed and maintained
			by a large team of individuals. FreeBSD provides advanced
			networking, impressive security features, and world class
			performance and is used by some of the world's busiest web
			sites and most pervasive embedded networking and storage devices.
		
	




Таблици
Филип Петров — Wed, 26 Aug 2009 17:39:14 +0000
Таблиците са често използвано средство за форматиране на HTML страници. Също така те са и едно от основните средства за постигане на ефектен дизайн. Таблиците приемат изключително класически смисъл – състоят се от редове ( – table rows) и колони ( – table data). Самите таблици се ограждат в таг 
. Има и специални стойности  – table head или „заглавни колони“. Ще демонстрираме една примерна таблица и в последствие ще обясним всеки нейн елемент:

Примерна таблица

	
		Заглавие на колона 1
		Заглавие на колона 2
	



	
		Аз направих тази таблица
	



	
		11
		21
	
	
		12
		22
	
	
		13
		23
	


Резултат:

Примерна таблица


Заглавие на колона 1
Заглавие на колона 2




Аз направих тази таблица




11
21


12
22


13
23



Тагът 
 означава, че започваме да „строим“ таблица, която ще бъде с рамка с дебелина 1. Следващия таг  стартира т.нар. „заглавни редове“ на таблицата. Всяка информация изписана вътре в този таг ще бъде в началото на таблицата. Вътре в  ние отваряме първи ред на таблицата чрез таг . Вижате, че в първи ред изброяваме две стойности – заглавните тагове  – table footer. Всяка информация записана в този таг ще се визуализира винаги в края на таблицата. Виждате, че там също сме отворили нов ред . В него сме записали само един заглавен таг  за даване на допълнителна уточняваща информация за данните в таблицата.
Накрая в таг 
 се визуализира конкретното съдържание на таблицата. Виждате, че последователно сме отворили три тага , т.е. три реда в таблицата. Всеки ред съдържа по две стойности , то щеше да се получи следното:
 обозначава „заглавие“ на таблицана – текст, който стои цетрално над и извън таблицата.
Тагът 
. В тях изписваме като обикновен текст заглавията на колоните. Както виждате от визуализацията – заглавния текст излиза с удебелен шрифт. Обикновено го използваме за даване на наименование (заглавие) на колоните.
Следва таг 
, но сме му дали параметър colspan=“2″. Това означава, че следващата информация ще се визуализира като бъдат обединени две поредни клетки. Както виждате от резултата – текстът „Аз направих тази таблица“ се визуализира в две клетки, вместо в една. Обикновено използваме 
, в които е записан съответен текст.
Добре е винаги да следим броя на колоните когато създаваме нов ред. В горния пример ако бяхме забравили „colspan=2″ в реда от 


Примерна таблица

	
		Заглавие на колона 1
		Заглавие на колона 2
	



	
		Аз направих тази таблица
	



	
		11
		21
	
	
		12
		22
	
	
		13
		23
	


Резултат:

Примерна таблица


Заглавие на колона 1
Заглавие на колона 2




Аз направих тази таблица




11
21


12
22


13
23



Виждате, че като, че ли има липсваща клетка в таблицата ни. Обикновено това не е ефектът, който търсим.
Освен да обединяваме колони – можем да обединяваме и редове. Ето един пример:


	
		Ляво
		Горе
		Дясно
	

	
		Център
	

	
		Долу
	


Резултат:



Ляво
Горе
Дясно


Център


Долу



Очевидно е, че с Rowspan като, че ли се работи доста по-трудно. Особено при по-големи таблици е доста трудно да се следят редовете, които са обединени. За щастие има редица визуални редактори на HTML като FrontPage и Dreamweaver, които значително облекчават работата на разработчиците. В следваща статия ще разгледаме допълнителни възможности за форматиране на таблици.



Списъци
Филип Петров — Wed, 26 Aug 2009 14:04:51 +0000
Когато ни се налага да изброяваме поредица от елементи, то ние използваме т.нар. „списъци“. Езикът HTML позволява доста възможности за осъществяване на такава функционалност.
1. Подредени списъци: Може би са по-добре познати са като „номерирани списъци“. Чрез тях изреждаме стойности една след друга, като всяка си има пореден уникален номер. По подразбиране номерът следва числата 1, 2, 3, 4, …
Пример:
Нужни продукти:

	Картофи
	Моркови
	Зеле


Резултат:
Нужни продукти:

Картофи
Моркови
Зеле


Съществуват и други видове номерация. Тя зависи от стойността на стил „list-style-type“. Възможните стойности са ‘lower-alpha‘ (малки букви a,b,c,d,…), ‘upper-alpha‘ (главни букви A,B,C,D,…), ‘lower-roman‘ (малки римски числа i,ii,iii,iv,v,…), ‘upper-roman‘ (главни римски числа I,II,III,IV,V,…) и ‘decimal’ (по подразбиране числа 1,2,3,4,…). Ето един пример:
Нужни продукти:

	Картофи
	Моркови
	Зеле


Резултат:
Нужни продукти:

Картофи
Моркови
Зеле


Възможно е да приложите същата промяна на стил и на елементите 
, но това е много по-рядко практикувано, понеже не е естествено номерацията да се променя вътре в самия списък. Имаме възможност и за вложени списъци:
Задачи:

	Задача 1
		
			Подточка a
			Подточка b
			Подточка c
		
	
	Задача 2
		
			Подточка a
			Подточка b
			Подточка c
		
	


Резултат:
Задачи:

Задача 1

Подточка a
Подточка b
Подточка c


Задача 2

Подточка a
Подточка b
Подточка c




2. Неподредени списъци: Това са списъците, в които просто изреждаме стойностите и те нямат уникална номерация.
Пример:
Необходими продукти:

	Картофи
	Моркови
	Зеле


Резултат:
Необходими продукти:

Картофи
Моркови
Зеле


И тук е валиден стилът list-style-type. Възможните стойности са circle, square и disc. Ще демонстрираме тези стилове директно чрез промяна на изброените стойности:
Необходими продукти:

	Картофи
	Моркови
	Зеле


Резултат:
Необходими продукти:

Картофи
Моркови
Зеле


Тук ни е дадена възможност и за още един стил – list-style-image. Като стойност се приема релативен или пълен URL до картинка. Така в неподредения списък вместо disc, square или circle ще се появи посочената от нас картинка.
3. Списъци с обяснения: Използват се за „дефиниране“ на обекти. Например когато желаем да обясним дадени термини. Списъците с обяснения се ограждат с 
 (definition list), последвано от двойки  (definition term) и 
 (definition description).
Пример:
Напитки:

	Бира
		Газирано слабо алкохолно пиво
	Ракия
		Силно спиртно алкохолно питие
	Кола
		Газирана безалкохолна напитка


Резултат:
Напитки:

Бира
Газирано слабо алкохолно пиво
Ракия
Силно спиртно алкохолно питие
Кола
Газирана безалкохолна напитка


4. Вложени списъци: Вече показахме пример с подредени списъци. Можем и още по-общо да влагаме и различни типове списъци. Ето един пример:
Програма:

   Понеделник:
        
            Числени методи
            Дискретна математика
        
	
   Сряда:
        
           Числени методи
           Програмиране на C#
           Частни диференциални уравнения
       
	


Резултат:
Програма:

Понеделник:

Числени методи
Дискретна математика


Сряда:

Числени методи
Програмиране на C#
Частни диференциални уравнения







Стандартни шрифтове
Филип Петров — Sun, 23 Aug 2009 20:43:16 +0000
За разлика от стандартните текстови документи, в правенето на интернет страница се залага изключително много на визуалното представяне. Доста голяма роля за него играят шрифтовете. Естествено целта на тези статии не са да обучават на дизайн и естетика. Затова ще се фокусираме главно към технологията. Подбора и комбинацията от шрифтове ще оставим за други специализирани курсове.
Вече показахме възможности за декориране на текст, като например често използваното подчертаване. Освен това още в началото казахме как можем да удебеляваме текст чрез таг  и да го правим в курсив чрез таг .  Всъщост удебеляването и курсива могат да се постигнат също чрез стилове:

Този текст е в курсив
този текст е удебелен
Резултат:
Този текст е в курсив
този текст е удебелен
Ясно е, че е доста по-лесно използването на  и . Въпреки това бихме искали да насърчим използването на стилове. Ще разберете защо след като задълбаем повече във възможностите на CSS (Cascaded Style Sheets или Каскадни Стилове).

Стигнахме и до същината на текущата статия – смяната на шрифт. В по-старите версии на HTML това е ставало чрез таг , но той вече е отменен и на негово място се използват стилове. Истината е, че браузърите все още го поддържат напълно и все още се употребява доста често. Въпреки това няма да го разглеждаме и ще наблегнем на съвременния вариант с използване на стилове. Ето как можем да сменяме шрифт:

Ето как можем да променим
	
		шрифт на текст в arial
	
	или например във
	
		шрифт verdana.
	

	Шрифтът на повечето браузъри по подразбиране е
	
		times new roman
	

Резултат:
Ето как можем да променим шрифт на текст в arial или например във  шрифт verdana.

Шрифтът на повечето браузъри по подразбиране е  times new roman
Много важно е да дефинираме шрифтът с който пишем в HTML страницата си. Дори да използваме шрифт по подразбиране – не може да сме сигурни дали потребителят не го е сменил. Това например в Internet Explorer става чрез „Tools > Internet Options > Fonts“. Ако потребителя е сменил шрифта си по подразбиране, то не сме сигурни как ще изглежда нашата интернет страница. Затова допълнителният труд на дефинирането на шрифт никога не е излишен. Силно бихме искали да ви насърчим винаги да дефинирате шрифта, който желаете да използвате!
Следващият важен момент е размера на шрифта. Често ни се налага да пишем някои изречения по-големи от други. Понякога просто искаме шрифта да е по-едър, за да може да се чете по-добре или напротив – да го направим по-малък, когато трябва да се доуточнява. Всичко това се извършва със стил font-size. Класическото използване е в „points“ – така както се пише например в Microsoft Word:

	Този шрифт е с размер 10pt



	а този е с размер 24pt


Резултат:
Този шрифт е с размер 10pt

а този е с размер 24pt
Възможно е да се използват и пиксели като размерност. Впрочем това е по-добре от гледна точка на напасване на текста към полетата, в които пишем. Винаги е по-добре да използваме едни и същи мерни единици за оразмеряване на обектите.
Рядко използвана, но интересна възможност е използването на „малки главни букви“. Това е специфичен стил на писане на текст, който понякога се използва за по-добра четимост – например при бутони, менюта и др. Най-лесно ще е да го демонстрираме чрез пример:
Този шрифт е съставен от "малки главни букви"
Резултат:
Този шрифт е съставен от „малки главни букви“
Виждате, че всички малки букви са сталани главни, а главните остават по-големи от тях. Досещате се, че това можеше да се постигне с игра между писане само с главни букви и смяна на големината на шрифта. Този стил обаче ни улеснява.
Остава да отговорим на важен въпрос – кои шрифтове са позволени? Истината е, че можем да използваме всеки възможен TTF (true type font). CSS ни дава възможност даже да добавяме шрифтове, които не са налични на компютъра на потребителя, като ги качваме като файлове на сървъра. Тази практика обаче все още е спорна.
За напълно стандартни можем да сметнем следните шрифтове: arial, arial black, comic sans ms, courier, courier new, georgia, helvetica, impact, palatino, times new roman, trebuchet ms, verdana. Те са налични както в Windows, така и в MacOS и Linux. Затова можем да сме спокойни, че потребителите винаги ще могат да визуализират страниците ни по един и същи начин. За всеки един друг шрифт ние препоръчваме да качвате шрифта на сървъра и да го добавяте като „downloadable font“. За това ще напиша отделна статия по-късно. Засега можете да използвате следните стилове като ги сметнете за напълно стандартни и съвместими с всички браузъри и операционни системи:
font-family: Arial, Helvetica, sans-serif;

font-family: ‘Arial Black’, Gadget, sans-serif;

font-family: ‘Bookman Old Style’, serif;

font-family: ‘Comic Sans MS’, cursive;

font-family: Courier, monospace;

font-family: ‘Courier New’, Courier, monospace;

font-family: Garamond, serif;

font-family: Georgia, serif;

font-family: Impact, Charcoal, sans-serif;

font-family: ‘Lucida Console’, Monaco, monospace;

font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;

font-family: ‘MS Sans Serif’, Geneva, sans-serif;

font-family: ‘MS Serif’, ‘New York’, sans-serif;

font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;

font-family: Symbol, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

font-family: ‘Times New Roman’, Times, serif;

font-family: ‘Trebuchet MS’, Helvetica, sans-serif;

font-family: Verdana, Geneva, sans-serif;

font-family: Webdings, sans-serif;

font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Разделителя на шрифтовете със запетая означава, че „ако първия го няма, то ще се използва втория, и т.н.“. Използвайки горните стилове ще сте сигурни, че браузъра винаги ще визуализира вашия текст и дори желания шрифт да липсва, то все пак ще се използва някой сходен.
П.П. Списъкът е взет от fonttester.

Цвят	HEX	RGB
aqua	00FFFF	(0,255,255)
black	000000	(0,0,0)
blue	0000FF	(0,0,255)
fuchsia	FF00FF	(255,0,255)
gray	808080	(128,128,128)
green	008000	(0,128,0)
lime	00FF00	(0,255,0)
maroon	800000	(128,0,0)
navy	000080	(0,0,128)
olive	808000	(128,128,0)
purple	800080	(128,0,128)
red	FF0000	(255,0,0)
silver	C0C0C0	(192,192,192)
teal	008080	(0,128,128)
white	FFFFFF	(255,255,255)
yellow	FFFF00	(255,255,0)

Цвят	HEX	RGB
IndianRed	CD5C5C	(205,92,92)
LightCoral	F08080	240,128,128
Salmon	FA8072	(250,128,114)
DarkSalmon	E9967A	(233,150,122)
LightSalmon	FFA07A	(255,160,122)
Crimson	DC143C	(220,20,60)
Red	FF0000	(255,0,0)
FireBrick	B22222	(178,34,34)
DarkRed	8B0000	(139,0,0)

Цвят	HEX	RGB
Pink	FFC0CB	(255,192,203)
LightPink	FFB6C1	(255,182,193)
HotPink	FF69B4	(255,105,180)
DeepPink	FF1493	(255,20,147)
MediumVioletRed	C71585	(199,21,133)
PaleVioletRed	DB7093	(219,112,147)

Цвят	HEX	RGB
Gold	FFD700	(255,215,0)
Yellow	FFFF00	(255,255,0)
LightYellow	FFFFE0	(255,255,224)
LemonChiffon	FFFACD	(255,250,205)
LightGoldenrodYellow	FAFAD2	(250,250,210)
PapayaWhip	FFEFD5	(255,239,213)
Moccasin	FFE4B5	(255,228,181)
PeachPuff	FFDAB9	(255,218,185)
PaleGoldenrod	EEE8AA	(238,232,170)
Khaki	F0E68C	(240,230,140)
DarkKhaki	BDB76B	(189,183,107)

Цвят	HEX	RGB
Lavender	E6E6FA	(230,230,250)
Thistle	D8BFD8	(216,191,216)
Plum	DDA0DD	(221,160,221)
Violet	EE82EE	(238,130,238)
Orchid	DA70D6	(218,112,214)
Fuchsia	FF00FF	(255,0,255)
Magenta	FF00FF	(255,0,255)
MediumOrchid	BA55D3	(186,85,211)
MediumPurple	9370DB	(147,112,219)
BlueViolet	8A2BE2	(138,43,226)
DarkViolet	9400D3	(148,0,211)
DarkOrchid	9932CC	(153,50,204)
DarkMagenta	8B008B	(139,0,139)
Purple	800080	(128,0,128)
Indigo	4B0082	(75,0,130)
SlateBlue	6A5ACD	(106,90,205)
DarkSlateBlue	483D8B	(72,61,139)
MediumSlateBlue	7B68EE	(123,104,238)

Цвят	HEX	RGB
GreenYellow	ADFF2F	(173,255,47)
Chartreuse	7FFF00	(127,255,0)
LawnGreen	7CFC00	(124,252,0)
Lime	00FF00	(0,255,0)
LimeGreen	32CD32	(50,205,50)
PaleGreen	98FB98	(152,251,152)
LightGreen	90EE90	(144,238,144)
MediumSpringGreen	00FA9A	(0,250,154)
SpringGreen	00FF7F	(0,255,127)
MediumSeaGreen	3CB371	(60,179,113)
SeaGreen	2E8B57	(46,139,87)
ForestGreen	228B22	(34,139,34)
Green	008000	(0,128,0)
DarkGreen	006400	(0,100,0)
YellowGreen	9ACD32	(154,205,50)
OliveDrab	6B8E23	(107,142,35)
Olive	808000	(128,128,0)
DarkOliveGreen	556B2F	(85,107,47)
MediumAquamarine	66CDAA	(102,205,170)
DarkSeaGreen	8FBC8F	(143,188,143)
LightSeaGreen	20B2AA	(32,178,170)
DarkCyan	008B8B	(0,139,139)
Teal	008080	(0,128,128)

Цвят	HEX	RGB
Cornsilk	FFF8DC	(255,248,220)
BlanchedAlmond	FFEBCD	(255,235,205)
Bisque	FFE4C4	(255,228,196)
NavajoWhite	FFDEAD	(255,222,173)
Wheat	F5DEB3	(245,222,179)
BurlyWood	DEB887	(222,184,135)
Tan	D2B48C	(210,180,140)
RosyBrown	BC8F8F	(188,143,143)
SandyBrown	F4A460	(244,164,96)
Goldenrod	DAA520	(218,165,32)
DarkGoldenrod	B8860B	(184,134,11)
Peru	CD853F	(205,133,63)
Chocolate	D2691E	(210,105,30)
SaddleBrown	8B4513	(139,69,19)
Sienna	A0522D	(160,82,45)
Brown	A52A2A	(165,42,42)
Maroon	800000	(128,0,0)

Цвят	HEX	RGB
Gainsboro	DCDCDC	(220,220,220)
LightGrey	D3D3D3	(211,211,211)
Silver	C0C0C0	(192,192,192)
DarkGray	A9A9A9	(169,169,169)
Gray	808080	(128,128,128)
DimGray	696969	(105,105,105)
LightSlateGray	778899	(119,136,153)
SlateGray	708090	(112,128,144)
DarkSlateGray	2F4F4F	(47,79,79)
Black	000000	(0,0,0)

#	Лично име	Фамилно име
1	Анна	Петрова
2	Иван	Захариев
3	Димитър	Михайлов