Учебни записки

1. Основи на Интернет

Какво е Интернет?

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

Вижте: Интернет - статия в bg.wikipedia.org

Клиент и сървър

Устройство, чието основно предназначение е да предоставя информация на други устройства от мрежата се нарича сървър, а устройство, което е предназначено да получава информация се нарича клиент. Казва се още, че сървърите предоставят, а клиентите ползват, съответен тип интернет услуга. За простота говорим за "устройства", но понеже се имат пред вид програмируеми устройства, по-точно, клиент и сървър са функции, които се изпълняват от съответните устройства чрез подходящ софтуер. Софтуер, който изпълнява функция на сървър, както и софтуер, който изпълнява функция клиент, може да има и на един и същи компютър. Така че, идеята за комуникация между клиент и сървър е идея за комуникация между софтуерни приложения. Клиент е приложение, което изпраща заявка до друго приложение, наречено сървър, и получава от сървъра отговор на своята заявка.

Хипертекстови документи и уеб

Една от основните услуги в Интернет е услугата достъп до документи,  съдържащи текст, изображения, звукова и видео информация, и хипервръзки към други документи. Този вид документи се наричат още интернет страници или уеб страници, а мрежата, която те съставляват благодарение на свързаността помежду си чрез хипервръзки, се нарича Уеб. (World Wide Web, съкратено WWW или W3) Интернет страниците се наричат още и хипертекстови документи.

Стандарти и протоколи

Обменът на информация между приложения, изпълнявани върху свързаните в Интернет устройства се осъществява посредством спазването на стандарти - набори от правила наричани още протоколи. Протоколите определят подробностите относно начина на представяне и пренасяне на информацията. Предмет на настоящият курс е създаването на интернет страници (хипертекстови документи) и затова ще споменем само протоколите, използвани именно за тази цел.

Организация

Организацията, която подготвя, обсъжда и публикува стандартите за Уеб е консорциума World Wide Web Consortium (W3C) (статия в Wikipedia), на чиито сайт  w3.org може да се намери информацията за тези стандарти.

1.1. Браузър, страница, URL

Браузър

Разглеждането на хипертекстови документи (уеб страници) се осъществява със софтуерни приложения, наричани браузъри. (Вижте: Браузър - статия в bg.wikipedia.org) Известни браузъри са Internet Explorer (Edge), FireFox, Google Chrome, Safari, Opera и др. Посочените браузъри имат версии за настолни и преносими компютри, и за мобилни устройства.

Унифициран локатор на ресурс (URL) и неговите елементи

За да се отвори в браузър дадена страница, в специално поле за адрес, каквото има във всеки браузър, се попълва адрес на страницата, например, адресът на настоящата страница е:

https://vanyog.com/moodle/mod/book/view.php?id=315&chapterid=99

Адресите на страниците, представляват унифицирани локатори на ресурси (URL) и тяхната структура е предмет на стандарта RFC 3986.

Всеки унифициран локатор на ресурс се състои от няколко части. Нека да представим честите, от които се състои адресът на настоящата страница:

https - е идентификатор на протокол за пренос на данни. В случая това е протокол за шифрован пренос на хипертекстов документ HTTPS. Други възможни протоколи са: протоколът за пренос на хипертекст HTTP, протоколът за пренос на файлове FTP, протоколът за пренос на аудио и видео в реално време RTP и др.

:// - разделител между идентификатора на протокола и останалата част на адреса

vanyog.com - име на сайт (домейн). Понятието интернет сайт е свързано именно с тази част от адресите на страниците. Сайт се нарича група от страниците, които имат в адресите си един и същи домейн. (Повече за домейните - в следващата глава)

/moodle/mod/book/view.php - път до страницата в рамките на сайта. Прилича на абсолютен път до файл, във файловата система, и в много случаи е именно път в дректорията на сървъра до файла на ресурса.

?id=315&chapterid=99 - параметри. Множеството от параметри се отделя от останалата част от адрес със символа ?. Параметрите имат имена и стойности, свързани със знак =. Например: id=315 е параметър с име id и стойност 315. Параметрите се отделят един от друг със знак &. Параметрите имат значение, когато отговорът на сървъра трябва да се съобрази с кодираната в тези параметри информация. 

Унифицираните идентификатори на ресурси (URL) се използват не само за идентифициране на хепертекстови документи, но и за други, достъпни в Интернет: файлове, сайтове или конкретни места в документи. Затова в термина се използва думата ресурс, която има по-общ смисъл от думите: страница или файл.

Нека да посочим още примери за URL-и:

Сайтът на Google има URL: https://www.google.com
Файлът с логото на Google: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
Мястото на посветената на историята на Internet част от статията за глобалната мрежа в Wikipedia: https://en.wikipedia.org/wiki/Internet#History

Обърнете внимание в последния URL има последна част, отделена със знака #. Именно, идентификаторът History след този знак. Той насочва браузъра да "превърти" страницата до конкретното място, имащо този идентификатор. (Частта от универсалния идентификатор на ресурс след знака # се нарича още фрагмент.)

В стандарта за съставяне на URL са предвидени и други части (например: user, password, potr), които, ако има нужда, ще разгледаме, когато се наложи да ги използваме.

1.2. Име на сайт, домейн

Съществена част от унифицираният локатор на ресурси е домейнът. Например, за настоящата страница, с адрес https://vanyog.com/moodle/mod/book/view.php?id=315&chapterid=100 домейнът е: vanyog.com (статия Домейн в Wikipedia). Домейнът се състои от, разделени с точка части, които също се наричат домейни, съответно от първо, второ и трето ниво, проследени от дясно наляво. Счита се, че домейните образуват йерархична структура, като домейните от по-високите нива са под-домейни на домейните от по-ниските нива. Така, например, vanyog се явява под-домейн от второ ниво на домейна от първо ниво com.

Всеобщо е разбирането домейн да  се нарича уникалното съчетание от домейн от второ със съответен домейн от първо ниво. Това съчетание се нарича име на домейн, а домейна от първо ниво, разширение на името. Така vanyog.com е име на домейн с разширение .com.

Домейните от първо ниво (com, org, biz, bg и др.) са ограничен брой и се определят от  Интернет корпорация за присвоени имена и адреси (ICANN). Пълният списък на домейните от първо ниво може да видите тук. На английски тези домейни се наричат  top-level domain или се означават със съкращението TLD. Най старите домейни от първо ниво се наричат Generic top-level domains - gTLD. Още подробности за домейните от първо ниво - вижте в List of Internet top-level domains, Домейн от първо ниво, Домейни от първо ниво (TLD) – общи и регионални домейни (видео).

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

Домейните от трето ниво се задават от собствениците на домейни от второ ниво. Те не са задължителни и се създават с цел удобство.

Посочваме домейна като част от адреса на интернет страница, но домейни се използват не само за уеб, а и при други интернет услуги, електронна поща, обмен на файлове и др.

1.3. Слоен модел на Интернет

Интернет представлява компютърна мрежа и като такава е изградена на техническите принципи за изграждане на компютърни мрежи.

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

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

Съществува стандартен абстрактен модел на компютърна мрежа, наречен OSI (Open Systems Interconnection) модел. При този модел се различават седем абстрактни слоя, през които информацията преминава за да се пренесе от едно приложение до друго. Всяко от приложенията комуникира със 7-мия най-горен, наречен приложен слой.  От него, претърпявайки различни обработки, във всеки следващ слой, информацията се предава от приложението изпращач, към слоевете надолу, съответно: 6. представителен, 5. сесиен, 4. транспортен, 3. мрежов, 2. канален и 1. физически слой.  След което, за да достигне до приложението получател, преминава обратни преработки до връщане в приложния слой и приложението получател.

Предаването и извличането на информация към и от всеки мрежов слой се извършва от стоящия непосредствено над или под него слой при спазване на определени, също стандартизирани, системи от правила, наричани мрежови протоколи.

Интернет се базира на модел на семейство от Интернет протоколи (Internet protocol suite), известен със съкращението TCP/IP (Transmission Control Protocol / Internet Protocol).  При този модел се различават четири слоя: 4. приложен, 3. транспортен, 2. интернет и 1. физически. Има строго съответствие между тези слоеве и слоевете на OSI модела:

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

1.4. IP адреси и портове

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

Съществуват две системи за съставяне на IP адреси: IPv4 - от 32 битови адреси и IPv6 - от 128 битови адреси. Буквата v е съкращение от думата version, а цифрата 4 е номер на версия.

За нагледно възприемане от хора адресите IPv4 се представят с четири десетични цели числа, разделени с точки, например:

192.168.13.1
127.0.0.1
164.138.218.89

Адресите IPv6 (версия 6 на IP протокола) се представят с осем четирицифрени шестнадесетични числа, разделени с двоеточие, например:

1080:0:0:0:0:800:0:417A

По-голямо разпространение в момента има използването на IPv4, докато IPv6 е в процес на навлизане във все по-широка употреба. Статистика на разпространението на IPv6 по държави вижте тук.

Централна роля при разпределянето на IP адреси между потребителите на Интернет играе Служба за присвояване на имена и адреси в Интернет (IANA), същата организация, която регистрира и домейните от първо ниво. Тя разпределя множества от IP адреси между 5, географски обособени, регионалните разпределители (RIRs). От твоя страна регионалните разпределители определят IP адреси на националните разпределители (NIRs), а националните - на локални разпределители (LIRs) и последните - на доставчици на Интернет (ISPs).

Всяко устройство, получава променлив или постоянен IP адрес, при установяване на връзка с мрежата на доставчика на Интернет.

Портове

Установяването на връзка с устройството, което има даден IP адрес, може да преследва различни цели, например: изпращане към това устройство на URL на ресурс с цел получаване на този ресурс, или изпращане на електронно съобщение, или установяване на връзка за обмен на файлове и т.н. Всяка от тези цели се постига чрез използване на отделни абстрактни канали, наричани мрежови портове. Всеки порт има свой номер и портове с различни номера са предназначени за различни цели, например: порт 21 - за файлов транспортен протокол (FTP), 80 - за Уеб и т.н. Пълен списък на портовете и имената на услугите, които се осъществяват чрез тях: Service Name and Transport Protocol Port Number Registry.

1.5. DNS - Система за имена на домейните

Домейните са въведени с цел удобство на потребителите на Интернет, (хората по-лесно запомнят домейни вместо IP адреси), но технически за комуникацията между устройствата в Интернет се използват IP адреси. Ето защо в Интернет съществува разпределена база данни, която определя на всеки домейн кой IP адрес съответства. Тази база данни се състои от записи, всеки от които съдържа домейн и съответен IP адрес. Записите за различните домейни се намират на различни сървъри, наричани DNS сървъри, свързани в обща система, известна като система за имена на домейните (Domain Name System, или съкратено: DNS). 

Основна задача на системата за имена на домейните е бързото и безпроблемно подаване на информация кой е IP адресът на даден домейн, към всяко приложение, което заяви, че се нуждае от такава информация. Освен DNS сървъри в системата за имена на домейните участва и софтуер, чиято задача е да открие кой сървър пази записа на съответния домейн и да получи от него IP адреса.

DNS сървърите се поддържат в строго установена йерархична система от връзки помежду си. Всеки DNS сървър е отговорен за актуалността и точността на информацията относно IP адресите на ограничен брой домейни, които съставляват така наречена зона от домейни на този DNS сървър.

На върха на йерархията от DNS сървъри са 13  коренови сървъри за имена (Root name server - en.wikipedia.org, IANA - Root Servers), отговорни за домейните от първо ниво. При получаване на заявка за някой домейн тези сървъри връщат като резултат списъците на други DNS сървъри отговорни за конкретен домейн от първо ниво. Сървърите, отговорни за иманата от първо ниво, връщат като отговор списък с имена на други DNS сървъри, отговорни за конкретния домейн от второ ниво и така нататък, докато се стигне до DNS сървъра разполагащ със записа на конкретния домейн, който връща като резултат съответния IP адрес.

Работата на всеки DNS сървър се състои в това да получава  домейни по заявки от клиенти и да връща информация кои са IP адресите на тези домейни или да посочи други сървъри, които са отговорни за тази информация. 

Установяването на IP адреса на даден домейн се осъществява от специален софтуер, наричан DNS резолвър, осигурен от операционната система в компютъра на клиента. Към този софтуер се обръща всеки браузър или друго приложение, използващо домейни. Първият източник на информация, който се проверява от този софтуер, е текстов файл с име hosts, който се намира на самото устройство и съдържа редове, подобни на следния:

127.0.0.1 localhost

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

Локалният (в компютъра на клиента) софтуер за установяване на IP адреси (DNS резолвър) поддържа кеш, на скоро заявените домейни, с което се спестява обръщането към DNS сървъри и се осигурява бързодействие. Кешът представлява временна таблица, от която бързо се извличат данни, вместо тези данни да се получат чрез, отнемаща по-дълго време заявка. Всеки запис в кеша се съхранява само определено време, след изтичане на което, се прави нова заявка и записът в кеша се обновява. Ако през времето, когато се използват данните от кеша настъпи промяна във "външните" данни, то това се забелязва чак при следващото обновяване на кеша. Такъв механизъм за пазене на данни в кеш се използва и от разположените на сървъри DNS резолвъри и това осигурява бърза доставка на IP адресите и малък брой на заявките до DNS сървърите.

Друго описание на процеса вижте на страницата DNS проверка.

1.6. Регистриране на домейн

Технически, регистрирането на домейн означава добавяне на запис в зоната на някой DNS сървър.

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

Домейните от първо ниво (bg, ru, mk и др.), които съвпадат с кодове на държави по стандарта ISO-3166, са обект на специална регулация и се регистрират от (обикновено единствен за всяка държава) регистратор. (Вижте: Country code top-level domain - ccTLD) Регистратор на домейните bg e register.bg.

Останалите домейни от първо ниво, традиционно имат някакво смислово значение за характера на дейността на своя собственик:

com - се предпочита за сайтове на фирми с търговска дейност,
biz - сайтове за бизнес,
info - информационни сайтове,
org - организации, обикновено с идеални цели,
edu - образователни институции,
net - интернет услуги и т.н.

Цените за домейни от второ ниво се различават в различните домейни от първо ниво. Например, вижте тук. 

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

1. Проверяване дали името, което собственикът желае да постави на своя домейн от второ ниво, не е вече регистрирано в избрания домейн от първо ниво. Ако избраното име е заето, то може да се избере друг домейн от първо ниво или да се смени името с друго, което още не е заето.
2. Ако избраното име е свободно се преминава към попълване на три типа данни за контакт, които са задължителни за всеки домейн: данни за собственика, данни за технически администратор и данни за финансово отговорно лице (счетоводител). И трите групи данни включват: име на организация, име и фамилия на лице, адрес, град, пощенски код, имейл и телефон.
3. Извършва се плащане по електронен път.

Обикновено, няколко минути след като  плащането бъде завършено от системата за плащане по електронен път, новият домейн влиза в действие и при отваряне с браузър се вижда тестова интернет страница.

Съществуват няколко домейна от първо ниво (cf, ga, gh, ml, tk)¹, в които можеха да се регистрира безплатно домейн от второ ниво. Регистрацията се извършваше през сайта: freenom.com (Виже указания). В момента услугата не е достъпна.

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

---

¹ Любопитното е, че тези домейни са кодове на следните държави: cf - Централноафриканска република, ga - Габон, gh - Гана, ml - Мали, tk - Токелау.

1.7. Управляване на домейн

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

1. Задаване кои са DNS сървърите, в зоната на които се намира домейна. (Извършва се през клиентския профил при регистратора на домейна)
2. Редактиране на DNS записите за домейна. (Обикновено през клиентския профил при доставчика на хостинг)
3. Редактиране на данните за контакт на собственика, администратора и техническото лице. (При регистратора на домейна)
4. Трансфер на домейн - преместване на данните за домейна от един регистратор към друг. След трансфер, плащанията за абонамент се прехвърлят към новия регистратор. (През двата профила - при стария регистратор и при новия регистратор)

1.8. WHOIS информация за домейн

Значителна част от информацията за домейните от второ ниво е публична и се предоставя свободно от регистраторите на тези домейни през предназначена за целта интернет страница. Страниците с тази информация се откриват лесно с търсене с думите WHOIS domain. (За домейните в bg - на сайта register.bg) Такава страница е например: whois.com. За да направите справка за даден домейн, изписвате домейна в предоставеното поле за писане и щраквате бутона.

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

Полезна за правещия справка може да бъде е информацията за датата на регистриране и датата до която е платен даден домейн; за DNS сървърите, в които се намират записите за домейна; кой е регистраторът на домейна и др.

1.9. Хостинг

Регистрирането на домейн в системата за имена на домейни само осигурява едно съответствие между, регистрирания домейн и IP адрес на приложение сървър, което трябва да изпълнява заявките за ресурси в чиито URL-и се използва този домейн.

Следващият важен аспект при създаването на уебсайт е осигуряване на хардуер и софтуер, които приемат и изпълняват заявки от клиенти до съответния IP адрес. Хост (домакин) се нарича приложението сървър, което реагира на заявките към конкретен IP адрес. Услугата, състояща се в осигуряване на  хост за даден домейн от второ ниво се нарича хостинг. Хостингът е услуга, обикновено платена, извършвана от фирми и лица, които най-общо ще наричаме компании за хостинг.

Има няколко вида хостинг:

Споделен хостинг

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

Достъпните безплатно хостинг услуги обикновена са от вида споделен хостинг. Регистриране за безплатен хостинг, може да се направи, например, през сайтовете: infinityfree.net (вижте указания), bul.net, zettahost.bg и др. (вижте резултат от търсене в Google с думите безплатен хостинг)

Хостинг в персонален виртуален сървър (VPS)

Виртуалните сървъри представляват файлове, които съхраняват информация, използвана от специален софтуер за виртуализация. Софтуерът за виртуализация по записаната в тези файлове информация имитира свързани в Интернет отделни компютри. Под виртуален сървър, всъщност, се разбира именно такава имитация на компютър, който притежава: собствено дисково пространство, операционна система, процесор със зададен брой ядра, оперативна памет, съответен на операционната система, инсталиран от собственика софтуер за обслужване на пристигащи от клиентите заявки и т.н.

Колокация

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

Облачен хостинг

При този вид хостинг организацията или човекът - клиент на доставчика на хостинг, ползва множество услуги, които са необходими за присъствие в Интернет, например: споделено хостване на интернет приложение, съхраняване на файлове, база данни и т.н. Всяка от тези услуги има определени измерими параметри: използван трафик, дисково пространство, сумарно време на ползване и т.н. Цената, която се заплаща на доставчика на облачния хостинг е пропорционална на реално използваните от клиента ресурси. Доставчици на такъв вид хостинг са големи, известни компании като: Google, Microsoft, Amazon, IBM и др.

Локален хостинг

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

Форма на локален хостинг имаме например, когато на своя компютър, разработчикът на нов сайт, стартира виртуален сървър или софтуерни сървъри, върху които тества всеки етап от работата си по новия сайт.

1.10. Връзка домейн-хостинг

Регистраторите на домейни имат задължението да поддържат в актуален вид информацията за всеки регистриран при тях домейн. Тази информация включва: имена, имейл адреси, телефони и др. на собственика, на техническото лице и на лицето за счетоводно обслужване; адресите на DNS сървърите, на които се намират записите на домейна; срокът, за който е ангажиран домейна от настоящия собственик и др.

Най-често DNS сървърите със записи относно даден домейн са собственост и се намират при доставчика на хостинг, който може да е различен от регистратора на домейна. Ето защо за да се настрои функционирането на един сайт е необходимо:

1. при регистратора на домейна, да се посочат DNS сървърите на хостинг доставчика
2. при хостинг доставчика да се укаже на сървърния софтуер, че той следва да обслужва заявките за съответния домейн.

Вижте как се прави това при регистриране на домейн в freenom.com и на хостинг в infinityfree.net.

1.11. Уебсайт

Уебсайт или просто сайт наричаме множество от хипертекстови документи (интернет страници), които имат общ домейн.

Уебсайтът представлява интелектуален продукт, обект е на интелектуална собственост. Сайтът е резултат от творческа дейност на един човек или на повече хора.

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

• администриране на хостинг и домейн;
• създаване или избиране на съдържание, като: текст, изображения, аудио, видео;
• проектиране или дизайн на начина на представяне на съдържанието - върху коя страница, какво да се показва, как да е подредено, в какви размери и цветове и т.н.;
• конвертиране на избраното съдържание и дизайн в хипертекстови документи и подходящи за Интернет файлове;
• програмиране на софтуер;
• наблюдаване на сайта - колко често се посещава, какво е поведението и мнението на посетителите, как бива откриван в търсачките, дали няма злонамерени действия към сайта и др.
• подобряване и актуализиране във всички аспекти.

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

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

От възникването на идеята до появяването на даден сайт в Интернет се преминава през следните технически етапи:

• създаване на локално (върху компютъра на разработчика или предоставяно от него място в Интернет) копие на сайта;
• оценяване на качествата на локалното копие и внасяне на поправки в него;
• пренасяне на създаденото локално копие върху наети хостинг и домейн - публикуване на сайта;
• популяризиране на новия сайт с цел привличане на посетители.

Добра идея е използването на локално копие на сайта да продължи и след неговото публикуване в Интернет, като някои промени по сайта се правят първо в локалното копие и се публикуват в наетия хостинг едва след убеждаване в тяхната сполучливост.

Именно тези етапи с активна работа първо върху локално копие на сайт ще представим в този курс.

1.12. Видове уебстраници и сайтове

Според поведението, което имат уебстраниците при показване в браузър, ще различаваме следните видове:

• Статични страници ще наричаме страници, които съдържат само неподвижен текст и изображения.
• Активни страници ще наричаме страници, в които настъпват промени при различни действия на потребителя. Например: при преминаване на курсора на мишката над даден текст, се променя цвета на фона, сменя се някое изображение, появява се нова част от страницата, започва движение и т.н.; при щракване с мишката се случват други промени и прочее.
• Динамични или интерактивни страници са тези, чието съдържание зависи от извършеното от потребителя на предишната страница. Например: в сайта на онлайн магазин на предишната страница потребителят е избрал няколко артикула, а на заредената след това страница се показват само тези артикули и общата им цена.

Най-просто е създаването на статични страници. За целта само се избира и сглобява тяхното съдържание. При тях не е необходимо програмиране.

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

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

2. HTML

Какво е HTML?

2.1. Основи на HTML

HTML е език за отбелязване, коя част от даден текст каква роля играе. За целта началото и края на всяка част, която трябва да се отдели за дадена роля, се отбелязват със специални маркери, наречени тагове.

Например, за отбелязване, че думите "Основи на HTML" са заглавие, пишем:

<h1>Основи на HTML</h1>

Тагът, който отбелязва началото се нарича отварящ таг (в примера <h1>), а този който отбелязва края на част от текст се нарича затварящ таг (в примера </h1>).

Част от хипертекстов документ, която започва с отварящ таг и завършва със съответния му затварящ таг се нарича елемент от този документ.

Всеки таг започва със знак < (по-малко) и завършва със знак > (по-голямо). Тази двойка знаци < >, понякога, се нарича ъглови скоби.

Отварящият таг и затварящият таг, който му съответства, имат еднакви имена. В примера името е h1.

Името на таг означава каква е ролята на елемента (текста, заграден с двойката от отварящ и затварящ таг). Името в отварящия таг се намира непосредствено след знака <. В затварящият таг пред името има знаци </.

В случая h1 е името на таг за главно заглавие. h2 е име на таг за подзаглавие. h3 - за под-подзаглавие и т.н. до h6. Частите от текста, отбелязани с тагове за заглавие се показват от браузъра с по-едър, получер шрифт, отделени с известно разстояние, отгоре и отдолу.

Тагът за отбелязване на абзац е с име p. Всеки абзац започва на нов ред и най-често браузърите, вмъкват малко разстояние между абзаците. Ето един пример:

<p>Това е един абзац.</p>

<p>А това е друг абзац.</p>

Някои тагове, нямат нужда от затваряне и се наричат празни (empty) тагове. Това са тагове, който означават, че на тяхното място трябва да се вмъкне нещо. Например: <br> е таг за вмъкване на нов ред. Където срещне този таг браузърът прекъсва текущия ред букви и започва да изобразява следващите след този таг букви на нов ред.

Понякога тагове се затварят не чрез добавяне на отделен затварящ таг, а с добавяне на обратна наклонена черта преди знака >. Например:

вместо: <br></br> се пише: <br />

(Да се пише <br /> е задължително във версията на HTML означавана като XHTML, но в HTML5 използваме просто <br>).

Елементите трябва да са вложени един в друг. Това означава, че когато един елемент започва във вътрешността (след отварящия таг) на друг елемент, той е вложен елемент и следва да свърши преди края на елемента, който го съдържа. Затварящият таг на вложения елемент трябва да се намира преди затварящия таг на съдържащия го елемент. Например:

<h1>Основи на <span>HTML</span></h1> - правилно

<h1>Основи на <span>HTML</h1></span> - неправилно

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

<a href="http://www.vsu.bg">Сайт на ВСУ</a>

Атрибутите имат имена и стойности. Името на атрибута се отделя от неговата стойност със знак =, а стойността се загражда в двойни кавички "". В примера, атрибутът за URL носи име href и има стойност http://www.vsu.bg.

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

Още за конкретни тагове и техните атрибути ще научите в следващите глави, а ето и някои препратки към външни страници:

Още тагове вижте на страница: Основни тагове, или на английски: по-дълъг списък тагове, и списък атрибути.

Специфичното за HTML5 - в учебниците: HTML5 Introduction, HTML5 Tutorial (на английски)

Формалната, публикувана от консорциума W3C спецификация: HTML.

2.2. Писане на HTML

Статични уебстраници се създават, като техният HTML код се пише предварително и се запазва в текстови файлове, които се качват във файловата система на сървър. Обикновено тези файлове имат разширение .html или .htm.

За писане на HTML код може да се използват, най-простите редактори за текст, които не правят форматиране на текста. В операционната система Windows, такива редактори са Notepad и WordPad, които са част от операционната система и са налични на всеки компютър с Windows.

Съществуват и редактори, предназначени специално за писане на HTML код, които имат специфични функции улесняващи, създаването на такъв код. За целите на този курс препоръчваме работната среда за създаване на приложения за интернет Aptana Studio 3. Важна първоначална информация за този продукт може да намерите на страница Aptana Studio 3.

За по-бързо отваряне и нанасяне на промени в текстови файлове удобен за операционна система Windows е и редакторът Noteped++. Студентите, желаещите да се запознаят и с този редактор, може да си инсталират и него.

2.3. Стартиране създаването на сайт с Aptana Studio 3

Изпълняването на тези указания е възможно след изтагляне и инсталиране на Aptana Sudio 3. Хипервръзки към сайтовете за изтегляне ще намерите на страница Необходим софтуер и документация в сайта за учебни материали на ВСУ.

1. Стартираме Aptana Studio 3
   
   
   
2. Щракваме върху командата за стартиране на нов Web Project:
   
   
   
3. Избираме Basic Web Template и щракваме бутон Next.
   
   
   
   
4. Попълваме име на проекта, например, FirstSite и щракваме бутон Finish
   
   
   
5. Щракваме двойно върху името на новия проект, за да се видят неговите файлове.
   
   
   
6. Щракваме двойно върху името на файл index.html за да го отворим
   
   
   
7. Копираме от тук следния HTML код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

8. В прозореца с HTML кода на файл index.html селектираме целия код с Ctrl+A и на негово място поставяме с Ctrl+V копирания код.
   
   
9. Щракваме бутон Run As, за да видим резултата в браузър.
   
   
   
10. Ако преди това не сме запазили файла, щракваме Save в прозореца, който се показва
    
    
    
11. Показва са прозореца на FireFox със отворена в него страница.

2.4. Улеснения при работа с Aptana Studio

Aptana Studio 3 има редица функции, които улесняват работата с HTML код:

При спиране на курсора над някоя част от html таг се показва информация за тази част:

При натисване на знак < с цел започване писането на нов таг се показва списък на възможните тагове:

След изписване на 1-2 букви, в този списък остават да се показват само имената на възможни тагове, започващи с тези букви:

Когато с мишката се щракне върху име на таг от списъка, вдясно се показва информация за ролята на таговете с такова име.

Двойното щракване с мишката върху име на таг дописва цялото име.

Натискането на клавиш Enter дописва не само името избрано от списъка, а вмъква автоматично и затварящ таг. Например:

Ако все още нещо липсва в така съставената двойка от отварящ и затварящ таг, пред номера на реда се показва удивителен знак.

При въвеждане на интервал след името на таг се появява списък на възможните имена на атрибути:

Натискането на клавиш Enter, след като от списъка е избрано име на атрибут, дописва името на атрибута, знак = и две кавички, между които се очаква да бъде написана стойността на атрибута.

За завършване на HTML кода на хипервръзката от примера, остава да се допише или постави с copy-paste адресат, към който сочи хипервръзката и текстът, който ще се вижда като хипервръзка. Например:

Когато отварящият таг започва на един ред, а съответният му затварящ таг се намира на друг ред. Пред номера на реда с отварящия таг има знак - (минус).

Ролята на този знак е да позволи "сгъване" на HTML кода, заграден между отварящия и затварящия тагове. Щракването на знака минус предизвиква скриване на редове, например така:

Щракването върху знака + в останалият, нескрит, първи ред извършва обратно "разгъване" и показване на всички редове. 

Посоченото "сгъване"-"разгъване" е полезно при работа с големи и сложни html документи.

2.5. Преглеждане на HTML кода

В Aptana Studio като браузър за демонстриране на създаваните сайтове се използва FireFox. Ето защо на компютъра, на който инсталираме Aptana Studio е добре предварително да има инсталиран браузър FireFox.

Във FireFox може да се разгледа HTML кода на цялата страница или на селектирана част от страница. Ако с щракване на десния бутон на мишката се избере команда Viеw Page Source се показва HTML кода на цялата страница. Ако с влачене на мишката селектираме чест от страница, то при щракване с десния бутон на мишката и избиране на команда View Selection Source се показва HTML кода само на селектираната част от страницата.

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

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

Версиите на съвременните браузъри за настолни и преносими компютри включват специални инструменти, предназначени за разработващите уебсайтове. Във FireFox това са инструментите от подменю Web Developer. Ще разгледаме някои от тези инструменти, когато възникне повод да ги използваме.

2.6. Валидиране на HTML код

Валидиране на HTML кода се нарича проверяването на този код за наличие на грешки, допуснати при писане на HTML таговете. (Това не е проверка на правописна на предназначения за читателите на страницата текст!) Валидиране на HTML кода се извършва от специален софтуер наречен HTML валидатор (HTML  Validator).

Съществуват валидатори, работещи върху уебсървъри, които наричаме онлайн валидатори. Например, валидаторите с домейни: validator.w3.org, validator.nu и др.

С такива валидатори може да се провери HTML кода на всяка, публикувана вече в Интернет страница, но с тях не можем да проверяваме файлове намиращи се на локален компютър.

За проверяване на кода на локални файлове, може да се използва, например, валидатор, добавка към FireFox. Инсталирането на добавката се извършва ако страницата й в Интернет се отвори с FireFox и се щракне бутона "Добавяне към FireFox". След инсталиране, в прозореца на FireFox се показва бутон: , който обикновено е оцветен в сиво и това означава, че е неактивен и не се извършва валидиране. За да се валидира кода на отворената във FireFox страница трябва да се отвори прозореца на инструментите за разработване, което става с клавишна комбинация Ctrl+Sift+I или с команда от менюто: Web Developer - Toggle Tools и после да се щракне върху бутона на инструмента "HTML validator". Резултатът от проверката се вижда в този прозорец.

Този валидатор по подразбиране проверява правилността на кода според изискванията на версия 4.01 на HTML, но ако написания код е HTML5 съобщенията за грешки може да са фалшиви. Тогава трябва да се щракне бутона "w3c Online", което ще изпрати HTML кода за проверка към онлайн валидатора. Онлайн валидаторът автоматично разпознава използваната версия HTML и показва резултат и за HTML5.

3. Транспорт на файлове (FTP)

Стартирайки създаването на уебсайт, ние създаваме структура от директории и файлове, съдържащи ресурсите за този сайт. - Когато се създават статични страници, HTML кодът на тези страници се съхранява в .html файлове. Във файлове с разширения, като .jpg, .png, .pdf и други, запазваме изображения и документи, които също сме решили да направим достъпни на сайта.

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

След като сме привършили с подготовката на първите страници на сайта, за да ги направим видими в регистрирания домейн и хостинг, следва да създадем копия от файловете, предназначени за сайта, от файловата система на нашия компютър във файловата система на уебсървъра, който ще отговаря на заявките към нашия сайт.

Пренасянето на файлове между файловите системи на две, свързани в Интернет устройства се извършва най-често според протокола за транспорт на файлове (File Transport Protocol - FTP) с помощта на приложения за осъществяване на този транспорт, които се наричат FTP клиенти.

В настоящият курс ще използваме FTP клиентът FileZilla FTP Client.

След изтегляне, инсталиране и стартиране на това приложение виждаме главния му прозорец, който е разделен на две половини: лявата половина представя файловата система на нашия компютър, а дясната - файловата система на друг компютър, на който има сървър за транспорт на файлове (FTP сървър).

Осигуряването и на FTP сървър е част от хостинг услугата, която ползваме, и когато регистрираме хостинг, получаваме данни за осъществяване на връзка с FTP сървъра на доставчика. Необходимите данни са:

URL или IP адрес на сървъра
номер на използвания порт
потребителско име и
парола

Комбинацията от потребителско име и парола идентифицира FTP потребител. Всеки FTP потребител има достъп до определена директория от файловата система на FTP сървъра, има делегирани права и др. настройки. Администраторът на хостинга има възможност да създава нови и да изтрива FTP потребители, както и да променя настройките.

За да не се налага многократно въвеждане на данните за връзка с FTP сървърите, във FileZilla Client е предвидено създаване на директории с данните на сървърите, с които влизаме във връзка. Прозорец със запазените данни (Site Manager) се отваря при щракване на бутона:

За въвеждане на данни за нов FTP сървър се щраква бутона:

В прозорчето, което се отваря се попълва име на данните за достъп. Добра идея е това име да съвпада с домейна на сайта.

Данните за достъп, които трябва да са съвсем точни се попълват в полетата вдясно на прозореца Site Manager:

Друга настройка, която ще ускори работата ни с дадения сървър, е да щракнем подстраница Advanced и да зададем с щракване на бутона Browse... директорията от нашия компютър, на която съхраняваме файловете от сървъра (Default local directory) и директорията на сървъра, в която най-често се налага да качваме и изтегляме файлове (Default remote directory).

Щракването на бутона Connect стартира опит за осъществяването на връзка между нашия компютър и FTP сървъра.

Преди осъществяване на връзка, се показва запитване, дали искате паролата да се запази. Нормално е да я запазите, но ако до FileZilla на компютъра ще имат достъп и други хора, които не искате да стигат до файловата система на сайта, може да отмените запазването и да я въвеждате на ръка преди всяко свързване със сървъра.

При опита за осъществяване на връзка може да се покаже съобщение относно валидността на сертификата за шифроване:

В този прозорец се поставя отметката Allways trust certificate in future sessions, за да се прескача показването на този прозорец при следващи свързвания с FTP сървъра.

След осъществяване на връзката в дясната половина на прозореца на FileZilla се показва файловата система на FTP сървъра - директориите и файловете на сървъра.

Най-честите действия, които изпълняваме с FiliZilla са:

качване (upload) на избрани файлове от нашия компютър на FTP сървъра и

изтегляне (download) на избрани файлове от сървъра на нашия компютър.

Файлове и директории се избират от съответния прозорец с щракване на мишката и използване на комбинации Shift+click и Ctrl+click за добавяне към избраните на още файлове и директории. След това с щракване на десен бутон на мишката се избира съответна команда upload от нашия компютър към сървъра или download от сървъра към нашия компютър.

4. CSS

Езикът за маркиране HTML служи за отбелязване на ролята на отделните части на един  хипертекстов документ (уебстраница), но не определя как трябва да изглеждат тези части.

Предвидено е информацията за форматиране, която определя: как се подреждат частите текст, с какъв шрифт, цвят и размери на буквите, сенки, рамки, анимация и др. ефекти, да се представя с помощта на друг език, означаван със съкращението CSS (Cascading Style Sheets - каскадни стилови листове).

CSS се състои от декларации за стойностите на свойствата на елементите. Тези свойства се отнасят до начина на изобразяването им. Например: декларациите:

width:200px; height:100px;

определят, че размерите на елемента, за който се отнасят, са ширина - 200 пиксела и височина - 100 пиксела.

Декларациите се състоят от две части: име на свойство и стойност на свойството, разделени с двоеточие. Всяка декларация завършва с точка и запетая.

Декларации на CSS може да се намират на три различни места:

1. В атрибута style, в HTML тага на елемента

Пример:

<p style="color:red;">Абзац с червен тeкст</p>

2. Между тагове <style></style> на HTML кода на страницата

Пример:

<style>
h1 { font-size: 15pt; }
</style>

В този случай декларациите се поставят в CSS правила. Едно CSS правило се състои от селектор и заградени във фигурни скоби { } декларации. Селекторът определя за кои елементи от документа се отнасят поставените във фигурните скоби след него декларации. В примера селекторът е име на таг h1. (Таговете с такива имена, вече знаем, отбелязват заглавието на документа.) Следователно, правилото от примера задава, заглавието на документа да се изобразява от браузърите с размер на шрифта (свойство font-size) 15 точки.

С използването на правила, поставени между тагове <style></style>, се избягва многократното писане на едни и същи декларации. Така писането на html код става по-бързо и много по лесно се правят промени, засягащи много елементи от документа, а и самия html код е по-кратък, лесен за четене и разбиране.

3. В отделен файл

CSS правила може да се напишат и запазят в отделен файл, тогава в html кода на страницата, към която искаме да се приложат тези правила, посочваме адреса на този файл с помощта на таг с име link, който се поставя в служебната заглавна част на документа, заградена от таговете <head></head>, например:

<head>
<link rel="stylesheet" href="mystyle.css">
</head>

Тагът с име link има задължителни атрибути с имена: 

rel - означава какво е отношението на посочения файл към текущия документ, в случай стойността "stylesheet" означава, че се явява списък от приложими CSS правила

href - URL на файла.

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

Вижте:  CSS - статия в bg.wikipedia.org, CSS Tutorial

4.1. Инспектиране и експериментиране с HTML елементите

Браузърите (тук описваме FireFox) могат да покажат какви CSS декларации и правилата са приложени на всеки елемент, който те изобразяват. За целта върху даден елемент от уебстраница трябва да се щракне десния бутон на мишката и да се избере команда Inspect Element.

Показва се прозорецът с инструменти за разработка на сайтове, който се състои от три части.

В лявата част се показва HTML кода на страницата, като тагът на щракнатия елемент е оцветен (селектиран).

В средната част се показват CSS правилата, приложени върху селектирания елемент.

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

При преминаване на курсора на мишката над таговете на даден елемент в лявата част, в прозореца със страницата, около елемента се визуализират трите рамки на кутиения модел. Показват се също и размерите в пиксели.

При щракване върху таг в лявата част, в средната и дясната части се показват съответно правилата, приложени над този елемент, и стойностите им.

И в трите части на прозореца с инструменти за разработка може да се редактира, като направените промени се виждат веднага в страницата.

Използването на тези възможности са удобен начин за експериментиране и достигане до решение какви промени в HTML кода и CSS правилата да се направят, за да се постигне, желан нов външен вид на страницата. След тези експерименти в браузър, необходимите промени трябва да се направят и запазят в съответните файлове, за да станат те постоянни и да се видят при следващо зареждане в браузъра на файла (страницата). Браузърът не променя файловете, които е заредил, тези файлове трябва да промените с приложението редактор, което ползвате.

4.2. Кутиен модел (Box model)

Кутиен модел (Box model) се нарича основна идея в CSS която означава, че когато софтуерът извършва подреждане на елементите на една страница, за всеки елемент заделя някакво пространство с форма на правоъгълник (кутия) и след това подрежда тези кутии от ляво надясно и от горе надолу. Правоъгълникът, за който вече няма място на започнатия ред се поставя на следващ ред и т.н. Този процес на подреждане на английски се нарича render.

Кутиите на някои елементи автоматично получават ширина колкото да поберат съдържанието си. При подреждането на тези елементи браузърът поставя всеки следващ елемент непосредствено от дясно на предишния такъв елемент, а ако до края на реда няма място за следващия елемент, го поставя в началото на следващ ред елементи. Елементите с такова поведение се наричат вътрередови или inline елементи.

Кутиите на други елементи пък винаги получават ширина, колкото е ширината на елемента, в който са поставени и се подреждат една под друга. Тези елементи се наричат блокове или block елементи.

Таговете с едни имена по подразбиране са inline елементи (такива са: a, img, span), а други имена по подразбиране са block елементи (h1, ... h6, p, div). Но типът на елемент може и да се зададе изрично с CSS декларациите display:inline; и display:block; съответно.

Кутиения модел предвижда съществуването на три рамки около правоъгълното пространство заето от всеки елемент, всяка със своя ширина.

След първоначалното определяне на правоъгълника, в който трябва да се вмести даден елемент, той се поставя навътре в този правоъгълник на разстояние, което се нарича вътрешно отстояние или padding. Около заделения за елемента правоъгълник може да се очертае рамка или border, а около тази рамка следва пространство, в което не трябва да попадат други елементи, наречено външно отстояние или margin. Ширините на тези рамки може да бъдат различни за всяка от страните, тогава към името на съответното разстояние се добавя и посоката, например: padding-left, padding-top, border-right, margin-bottom и т.н. във всички възможни съчетания на padding, border, margin и top, right, bottom, left.

4.3. CSS селектори

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

Селектори се използват само за декларациите, които се поставят между тагове <style></style> или в отделни файлове. За декларациите, намиращи се в стойностите на атрибута style на елементите, селектори не са необходими, защото тези декларации е ясно, че трябва да се приложат само върху съответния елемент.

Селектор по тип (име) на таг

Този селектор съвпада с име на таг. Например:

body { background-color: yellow; }
p { text-align: justify; }

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

Селектор по клас

Клас е понятие от HTML. Клас е група от елементи. Принадлежността на даден елемент към някой клас се посочва с атрибута с име class. Например:

<h1 class="a">Заглавие от клас "a"</h1>

<p class="a">Абзац от клас "a".</p>

<p class="b">Абзац от клас "b".</p>

<p class="a b">Абзац, който попада и в клас "a", и в клас "b".</p>

Имената на класовете се измислят от съставителя на HTML кода. CSS селектор, който трябва да определи клас елементи, за които се отнася правилото, е името на класа с точка пред него. Например:

.a { border: solid 1px; }
h1.a { border-width: 2px; }
.b { border-radius: 5px; }

В този пример: първото правило налага всички елементи от клас a да имат рамка с дебелина 1 пиксел; второто - всички заглавия h1 от клас a да имат дебелина на рамката от 2 пиксела; а третото - всички елементи от клас b да имат заоблени ъгли с радиус 5 пиксела.

Селектор по идентификатор

Идентификаторът е атрибут с име id, който се поставя на определени елементи. Целта е съответният елемент да се идентифицира единствено по стойността на своя идентификатор. Правилно е в HTML кода на една страница стойностите на идентификаторите да не се повтарят. (Всеки идентификатор да е уникален!). Имената на идентификаторите се измислят от автора на HTML кода. Пример:

<p id="important">Абзац с идентификатор.</p>

Абзацът в примера има идентификатор important. За да се приложи CSS правило към елемента, носещ съответния идентификатор се използва селектор, който съдържа знак #, следван от стойността на идентификатора. Пример:

#important { text-weight:bold; color:red; }

Това правило ще направи абзаца текст с идентификатор important да се изобрази с получер шрифт в червен цвят.

Други

Съществуват и други типове селектори като, селектори по атрибути, групи и комбинации  от селектори, псевдокласове и псевдоелементи, и др.

Справочник на селекторите вижте в: CSS Selector Reference, повече подробности - в developer.mozilla.org.

5. JavaScript

JavaScript е език за програмиране. (Не го бъркайте с езика Java!)

На този език се пишат скриптове - последователности от инструкции във вид на текст. Затова се казва, че JavaScript е скриптов език.

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

JavaScript е скриптовият език по подразбиране, предвиден от спецификацията HTML5. Това означава, че стандартната версия на този език се разпознава и изпълнява от всички съвременни браузъри, както за настолни, така и за мобилни устройства.

Редове програмен код на езика JavaScript може да се добавят към HTML кода, по три начина:

1. В рамките на стойността на атрибут, на HTML таг

Съществуват атрибути на html таговете, предвидени да указват какви действия да се извършат върху съответния елемент при определени събития. Събитията са неща които може да се случат или не по време на зареждането или разглеждането на уебстраница. Всяко събитие носи определено име, започващо с представката on. Примери за имена на събития:

onload - събитие, което настъпва щом приключи зареждането на страницата,
onchange - настъпване на промяна в съдържанието на поле за попълване, предизвикана от потребителя,
onclick - случва се, когато потребителят щраква с мишката (докосва с пръст върху чувствителен на допир екран) елемента,
onmouseover - курсорът на мишката навлиза в рамките на елемента,
onmouseout - курсорът на мишката напуска рамките на елемента,
onkeydown - потребителят е натиснал клавиш от клавиатурата,
onkeyup - потребителят е отпуснал, натискания клавиш от клавиатурата.

Имената на събитията се използват като имена на атрибути, които се вмъкнат в отварящия таг на елемента. Стойностите на тези атрибути са програмен код на Javascript, който описва какво да се изпълни от браузъра при съответното събитие.

Пример за вмъкване на JavaScript, чрез атрибути на елемент:

<p onmouseover="this.style.color='red';" onmouseout="this.style.color='green';">Този абзац става червен при навлизане на курсора в него и зелен - при напускане.</p>

2. В рамките на таг <script></script>

В рамките на стойността на атрибут не е удобно да се пише дълъг програмен код, ето защо е предвиден специален HTML таг, в който може да се направи това. Изнасянето на по-дълъг код извън атрибутите на таговете, позволява един и същи код да се изпълнява при събития настъпващи в различни елементи. Пример, при който с помощта на таг <script> се постига поведение като в предишния пример в два абзаца текст:

<script>
function redColor(a){
a.style.color="red";
}
function greenColor(a){
a.style.color="green";
}
</script>

<p onmouseover="redColor(this);" onmouseout="greenColor(this);">Абзац 1<p>

<ponmouseover="redColor(this);" onmouseout="greenColor(this);">Абзац 2<p>

3. В отделни файлове

Скриптов програмен код може да се предостави за изпълняване в различни страници на сайта, като се запази в отделен файл и в HTML кода на страниците се вмъква таг с име script, който посочва този файл. Например:

<script src="myScript.js"></script>

Атрибутът с име src на този тага, посочва URL-а на файла, съдържащ програмен код на език JavaScript.

Вижте повече в: JavaScript Tutorial или в курса Програмиране на JavaScript.

6. Отзивчив и адаптивен дизайн

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

Дизайн, който е един за всички устройства, но направен така, че страниците да изглежда различно върху различни по размер екрани, т.е. страниците да се приспособяват чрез скриване на част от съдържанието, размествания и промяна на размерите на детайлите, се нарича отзивчив дизайн (на английски.- Responsive Web Design RWD).

Адаптивният дизайн (на английски - Adaptive Web Design - AWD) е вид уеб дизайн, който се избира автоматично и е различен за устройствата с различни размери на екрана.

Инструментите за разработване на сайтове в браузърите дават възможности за изобразяване на страниците по начина, по който биха изглеждали върху екрани с различни размери. Вижте: Firefox Responsive Design Mode

Съществуват и онлайн тестове, за проверка доколко дадена страница е удобна за ползване на мобилни устройства, например:  Mobile Friendly Test

7. Потребителско изживяване

Посещаването и преглеждането на една уебстраница е вид преживяване за посетителя. Това преживяване включва: рационална оценка на съдържанието по отношение на неговата полезност, пълнота и съответствие с целта на посетителя; емоции: радост или тъга, възторг или яд и др.; естетическа оценка: красиво-грозно, оригинално-банално и пр.

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

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

Нека да посочим един от онлайн инструментите за анализ на бързината и достъпността на уебстраници:  PageSpeed Insights. Резултатите, които дава този инструмент, съдържат точни препоръки и хипервръзки към указания за преодоляване на установените проблеми.

Потребителско изживяване - статия в bg.wikipedia.org

8. Задължителни изисквания

Към всеки сайт има редица изисквания, които е задължително да се спазват от създателите на сайта:

1. Спазване на законите

на страната, в която е създаден, както и на страните, от които има достъп до този сайт. Това означава, сайтът да не се използва за забранени от законите (криминални) дейности.

Има законови изисквания, които силно засягат Интернет като: защита на авторските права, защита на личните данни и защита на потребителите

Авторски права

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

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

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

1. на сайта на United States Council for International Business, или Адвокатско дружество "Пешковски и Карамелски"
2. на сайт botanica.gallery,
3. на сайта на Президента на Република България.

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

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

За случаи, в които авторите нямат комерсиални претенции, може да се избере някой от вариантите на лицензионните споразумения Creative Commons. Избирането на подходящ вариант става с отговаряне на въпроси в специфична форма License chooser.

Защита на личните данни

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

В тази връзка, при използване на "бисквитки", следва да се обяви това и да се поиска съгласието на посетителя.

Защита на потребителите

Изискванията на законите за защита на потребителите засяга преди всичко сайтове, предназначени за електронна търговия.

2. Изисквания за достъпност

Добра идея е сайтовете да са проектирани така, че да са достъпни и за хора с увредено зрение или слух. Информация по въпроса може да открием в Интернет при търсене с думите website accessibility

3. Изисквания за информационна сигурност

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

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

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

Най-разпространеният метод за удостоверяване е чрез потребителско име и парола, известна само на съответното лице. За постигане на сигурност в този случай се изисква паролите да са достатъчно сложни, че да бъде изключително трудно да бъдат налучкани случайно или преднамерено. Това изисква всички лица, които използват пароли, да имат отговорност да не разкриват паролите си и да използват само сигурни пароли.

За постигане на информационна сигурност се използват протоколи за шифриран пренос на информацията. Шифрирането е вид кодиране на информацията, което се извършва по такъв начин, че обратното декодиране да е възможно само от устройства, разполагащи с таен ключ за декодиране. Шифрираният поток информация е неразбираем и безполезен за всеки друг, който не разполага с ключ за декодиране. Чрез използване на шифриран пренос се постига целта, дадена информация да достига само до нейният истински получател без да е възможно използването й от други лица. Шифрирането и дешифрирането се основава на алгоритми, разработени на базата на математическата дисциплина криптография, в която пък се използват достиженията на математическия раздел теория на числата.

9. Оптимизиране за търсачки

За разрастването на мрежата Уеб и превръщането и в полезен, масово използван източник на информация голяма роля са изиграли търсещи машини, популярно наричани търсачки.

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

Друго действие на ботовете е да намерят всички хипервръзки, които се срещат във всяка страница и по тях да стигнат до други страници, които също да индексират. Така те стигат до всички страници в Уеб, към които има хипервръзки, в други, вече индексирани страници.

Всяка търсачка има уебсайт, в който потребителите попълват думи, отнасящи се до информацията, която искат да открият и виждат резултатите, които търсачката им връща. Такива сайтове са: google.bg, bing.com, yahoo.com, yandex.ru и още много други.

Услугите на търсачки се ползват и без да се посещават специално техните сайтове. Съвременните браузъри се обръщат към търсачки автоматично, когато в адресното им поле потребителят напише обикновени думи вместо URL.

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

Правенето на един сайт по такъв начин, че той да е откриваем от търсачките е специализирана дейност която се нарича оптимизиране за търсачки (или на английски search engine optimization, SEO)

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

Заедно с регистриране на сайта в директории може да се използват инструментите за създатели на сайтове на търсачките: search.google.com/search-console, bing.com/toolbox/webmaster, webmaster.yandex.com и т.н.

Съществуват инструменти за автоматично анализиране на качествата на сайтове и уебстраници за индексиране и класиране в търсачки (SEO chekers, SEO analysers). Безплатни инструменти може да се намерят с търсене с думите free seo checker.

С такъв инструмент може да се провери оптимизацията на даден сайт. Инструментът класифицира недостатъците, на страниците, които открива в категории, като: грешки (errors), които трябва да се отстранят с приоритет; и съобщения (warnings) които би било добре също да се отстранят, но, може би, след отстраняване преди това на грешките. След всяка съобщена слабост се показват хипервръзки към указания, какво трябва да се направи. Четенето на такива указания може да даде базови знания за същността на SEO и неговото осъществяване.

Оптимизирането за търсачки се състои във:

• внимателно съчиняване на текстовете на страниците с цел смислено употребяване и повтаряне на ключови думи, по които се цели страницата да бъде откривана в търсачките;
• поставяне и настройване на някои подлагани на анализ от търсачките HTML тагове;
• оптимално балансиране на дължината на заглавията и текстовете;
• съставяне на подходящи URL-и на страниците;
• съставяне на специален файл карта на сайта;

Вижте:  Оптимизация за търсачки - статия в bg.wikipedia.org

10. Оптимизиране за социални медии

Все по-широко чрез Интернет се ползват услуги за създаване и поддържане на социални контакти, които услуги са известни под названието социални медии. Известни такива са FaceBook, Twitter, Instagram, LinkedIn и още много други. Често потребителите на социални медии, посочват в своите съобщения, пускани в тези медии, хипервръзки към страници от други сайтове. Обичайно поведение на всяка социална медия е да провери адреса на изпратената страница, да извлече от него определена информация и да генерира на база на тази информация, подходящо за своята визия представяне на страницата, която се споделя.

Собствениците на сайтове имат интерес страниците на техните сайтове да се споделят и информацията, която се показва в социалните медии от техните страници, да е в съгласие с техните планове за популяризиране на сайта.

Оптимизиране за социални медии ще наричаме процеса по приспособяване на уебстраниците за добро представяне в социални медии.

Известен протокол, който голяма част от социалните медии очакват да бъде спазван от уебстраниците, за да бъдат обработвани и представяни по предвидим начин е Open Graph. Според този протокол в заглавната част, заградена между таговете <head> и </head> на HTML кода на страниците, трябва да са налични, няколко съставени според този протокол тагове, предоставящи необходимата за социалните медии информация.

Отделно различните медии, формулират свои собствени изисквания, например, изискванията на Facebook са описани на страница developers.facebook.com/docs/sharing/webmasters

Основни са таговете:

<meta property="og:url" content="http://домейн-На-Сайта/пъд-До-Страницата/">
<meta property="og:type" content="article">
<meta property="og:title" content="Заглавие на страницата">
<meta property="og:description" content="Текст описващ страницата">
<meta property="og:image" content="http://път-До-Подходящо-Изображение">
<meta property="fb:app_id" content="966242223397117">

Когато в тага с property="og:type" има стойност на атрибута content="article" Facebook отчита отделна статистика за страницата за броя на харесванията и др. действия със споделената информация. Стойност "website", води до добавяне на тази статистика към общата за сайта.

Последният таг е необходим само за избягване на едно съобщение за грешка, което е имало значение при по-предишни версии на Facebook.

Големината на изображението, чиито адрес се посочва, трябва да е минимум 200x200 px, но за по-качествен резултат препоръчваният размер е 1200x630 px. При размери по-малки от 600x315 px изображението се показва умалено, в лявата половина на предвиденото поле, а в дясната се изобразява заглавието и описанието (developers.facebook.com/docs/sharing/webmasters/images).

Ако вече са поставени тези тагове, проверка на тяхното функциониране се осъществява през услуга, предоставяна от Facbook на разработващите сайтове: developers.facebook.com/tools/debug За да се ползва инструмента, на посочения адрес се влиза с потребителски профил за Facebook. Адресът на страницата, която искаме да проверим, поставяме в полето за писане и щракваме бутона "Debug".

Когато собственикът на сайт желае, може да предостави на посетителите лесен начин за споделяне на страници чрез поставени в страниците на някои от предоставяните от социалните медии бутони за споделяне или харесване. developers.facebook.com/docs/plugins/like-button

11. Уебсървър и сървърен софтуер

Уебсървър (bg.wikipedia) наричаме софтуерно приложение, което приема и отговаря на заявките, за ресурси, съответстващи на URL-и. Най-известни такива приложения са: Apache, IIS (Internet Information Services), nginx, lighttpd и др. (Вижте статистика на разпространението в сайта w3techs.com.)

При съставянето на отговора, който трябва да се изпрати на клиента (браузъра), в динамичните уебсайтове участва и друг софтуер, предназначен специално за нуждите на конкретния сайт. Ще наричаме този софтуер сървърен софтуер. Този софтуер може да бъде изключително разнообразен по отношение на езика за програмиране, на който е написан; по отношение на начина на изпълняване и файловия формат, в който се съхранява от операционната система на машината, в която се изпълнява; по отношение на задачите, които решава за дадения сайт.

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

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

Съществуват два начина за генериране на HTML отговор чрез софтуер: 1. използване на общ интерфейс за шлюз (Common Gateway Interface - CGI, спецификация rfc3875) и 2. вмъкване на програмен код на скриптов език във файлове с HTML код.

1. При използване на CGI, заявката се пренасочва от уебсървъра към друг софтуер. Този софтуер може да бъде написан на всеки език за програмиране (С, Perl, Python и др.). Той трябва изцяло да извърши анализ на заявката и да генерира HTML код за отговор съгласно правилата на HTTP протокола. Обикновено изпълнимите файлове с такъв софтуер се намират в предназначена за целта директория, най-често с име: cgi-bin. Името на тази директория и пътя до конкретното приложение обикновено са част от поискания URL.

2. Има езици за програмиране (JavaScript, PHP, VBScript, Java), при които програмния код може да се вмъква във файловете, съдържащи HTML код. На файловете с HTML код се слагат разширения на имената, съответстващи на езика на вмъкнатия в тях скриптов програмен код. Например: при език PHP - разширението е .php, при VBScript - .asp, при Java - .jsp. Уебсървърът изпраща такива файлове да бъдат обработени от софтуер, интерпретатор на съответния език за програмиране, а интерпретаторът открива вмъкнатия програмен код, изпълнява го и замества на съответните места програмния код с резултата от неговото изпълнение. Получилият се в резултат на това замесване HTML код се връща на уебсървъра, който го препраща като отговор на клиента.

12. Инсталиране и настройване на локален сървър

За да може да се изпробва работата на сървърния софтуер върху компютъра на автора му, на този компютър трябва да се инсталират: уеб сървър и интерпретатори на езиците за програмиране, който се използват, сървър за база данни и др.

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

Такъв пакет, който съдържа уеб сървър Apache, интерпретатор на PHP и Perl, сървър за база данни MySQL, и FTP сървър е XAMPP. Този пакет ще използваме в нашия курс.

Указания

Ще изтеглим и инсталираме преносима (portable) версия на XAMPP, в следните стъпки:

Изтегляне

1. На страницата за изтегляне https://www.apachefriends.org/download.html, щракваме хипервръзката "More Downloads".

2. На страницата, която се отваря, щракваме върху хипервръзката "XAMPP Windows".

3. На следващата страница щракваме върху хипервръзката с най-високата налична версия.

4. От предоставените за изтегляне файлове щракваме върху xampp-portable...x64...zip и изтегляме файла.

Инсталиране

5. Отваряме папката, в която е запазен изтегления файл и с щракване на десния бутон на мишката върху името му избираме Extract All...

6. С щракване на бутон Browse избираме устройство C:, щракваме бутон Extract и изчакваме разархивирането да завърши.

Стартиране

7. Отваряме папка C:\xampp и с двойно щракване на мишката стартираме програмата за управление на сървърите xampp-control.exe

8. При показване на съобщение от Windows Defender, щракваме върху надписа More Info.

9. Щракваме бутона Run Anyway.

10.  Избираме езика, на който ще ползваме програмата за управление и щракваме Save.

11.  В прозореца на програмата за управление щракваме бутон Start срещу надписа Apache.

12. Ако се покаже съобщение, че липсва библиотека VCRuntime140.dll, изтеглете и инсталирайте Microsoft Visual C++ 2015 Redistributable (Виже на страница Необходим софтуер и документация)

13. При успешно стартиране на Apache, надписът в прозореца на програмата за управление се оцветява в зелено, а надписът върху бутона се променя на Stop.

14. При първото стартиране се показва съобщение от защитната стена на Windows, в което щракваме бутон Allow Access. При следващи стартирания на Apache това съобщения няма да се показва повече.

Изпробване

В браузър отваряме адрес http://localhost и се показва главната страница на работещия вече на нашия компютър интернет сървър.

13. Програмиране на PHP

Файловете, които съдържат програмен код на PHP обикновено имат разширение .php. Тези файлове могат да съдържат или само програмен код на PHP, или HTML код, в който на различни места са вмъкнати участъци с PHP програмен код.

Пример за второто:

<h1>Страница с информация за PHP</h1>

<?php phpinfo(); ?>

В този пример имаме заглавие, което е HTML код и участък заграден от знаците <?php и ?>. Този участък именно съдържа програмен код на PHP. В случая - функцията phpinfo(); която показва подробна информация за интерпретатора на PHP на сървъра.

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

Съществува възможност, дори и без да се променя разширението на файловете от .html на .php, да се настрои сървърът да обработва .html файловете като .php файлове. Но това не е за препоръчване да се прави, ако в някой .html файлове няма да има програмен код на PHP.

Срещан проблем при създаването на статични сайтове, изискващ намиране на решение, е необходимостта един и същи html код да се повтаря в много от страниците на сайта. Например: частта от страниците, която предоставя хипервръзки към група от страници, често наричана меню на групата от страници, може да се повтаря на всяка страница от тази група. Ако всяка страница е направена в отделен html файл, то html кодът, представящ навигацията, се повтаря във всеки файл и при възникване на необходимост от корекции в тази навигация се налага отваряне и повтаряне на промените във всички файлове, което изисква работа и отнема време. Повтарянето на едни и същи промени в много файлове може да се избегне, ако повтарящият се html код се постави в отделен файл и съдържанието на този файл се прочита и вмъква, където е необходимо. С използване на php програмен код, този проблем намира лесно решение. Повтарящият се html код се запазва в отделен файл и във всички файлове, в които трябва да се показва същия код се вмъква:

<?php include 'fileName.php'; ?> 

или само include 'fileName.php'; ако файлът съдържа само програмен код. Естествено, fileName.php трябва да е името на файла, чието съдържание трябва да се вмъкне на това място.

include, include_once, require и require_once са команди от езика за програмиране PHP предназначени за вмъкване и изпълняване на програмен код от други файлове. Разликите в действието на тези команди са, че при командите, съдържащи думата include, ако възникне грешка при вмъкването или изпълняването на програмния код от външния файл, изпълнението на php код се прекратява. Казва се, че грешките се третират като фатални грешки. При командите, съдържащи думата require, в случай на грешка, изпълнението не се прекратява, а продължава с опити да се изпълни следващият по-нататък програмен код. Казва се, че в този случай грешките не се третират като фатални. Думата once означава, че ако командата за вмъкване на дадения файл се срещне и на други места, вмъкването ще се извърши само веднъж, при първото срещане на командата. 

Повече за основите на програмирането на PHP, може да научите от онлайн учебника PHP 7 Tutorial

Справки и пълна информация за различни функции може да намерите в официалната документация PHP Manual

14. Средства за улесняване създаването на сайтове

Диркетното писане на HTML код, CSS правила, програмен код на Javascript, PHP или друг език за програмиране, с цел постигане на желаното съдържание и външен вид на страниците на един сайт е продължителен и трудоемък процес. Този процес може значително да се ускори, ако се използват вече съществуващи, публикувани, свободни за ползване разработки.

Това могат да бъдат:

• HTML шаблони (HTML templates)
• CSS рамки за разработка (CSS frameworks)
• Javascript библиотеки (Javascript libraries)
• PHP библиотеки и рамки за разработка (PHP libraries, PHP Frameworks)
• Библиотеки и рамки за други езици за програмиране (Java, Perl, Python, Ruby и др.)
• Системи за управление на съдържанието (Content Management Systems - CMS)
• Онлайн информационни системи за специализирано съдържание (например Moodle - за учебни курсове, OpenCart - за електронна търговия)
• Комплексни облачни услуги - "строители" за сайтове (website builders, например: edX, mobirise)

Ще се разгледаме накратко всеки от тези видове инструменти.

14.1. Безплатни HTML шаблони

HTML шаблоните са колекции от файлове, съдържащи html код, css и javascript, които представляват няколко примерни страници за сайт. Чрез редактиране на файловете и създаване на още подобни на тях, тези страници могат да се приспособят и използват за други сайтове.

Чрез търсене в Иинтернет с думите "download free html templates" лесно се откриват сайтове, от които може да се изтеглят безплатни шаблони.

На сайтовете, предоставящи HTML шаблони обикновено има възможност всеки шаблон да се разгледа "в действие" (Live demo) и след като се уверим, че е подходящ за нашите нужди може да го изтеглим.

Шаблоните се изтеглят във вид на архивни файлове, които трябва да разархивираме и поставим в директорията на локалния или отдалеченият сървър. Промяната на съдържанието на избрания шаблон с подходящо за нашия сайт съдържание протича в няколко стъпки:

1. С инструментите за разработка на браузъра изследваме HTML кода на елемента, който искаме да заменим.
2. С инструменти за търсене (такъв инструмент в Aptana Studio 3 е командата Search - File...) откриваме в кои файлове на шаблона се намира интересуващия ни HTML код.
3. Заменяме намерения код с нов, съобразно с промяната, която искаме да направим.
4. Записваме промените и проверяваме резултата.

14.2. CSS рамки за разработка

CSS рамки за разработка (технологични рамки) са колекции от файлове, съдържащи CSS правила за форматиране на HTML елементи. Използването им спестява писането на такива правила и улеснява постигането на отзивчив външен вид на елементите на страниците. Освен CSS правила, за постигане на някои динамични ефекти, в CSS рамките може да се използва и javascript.

Информация за CSS рамки може да се намери в Интернет с търсене на думите CSS frameworks.

Една от лесните за използване CSS рамки е 3W.CSS, за ползването на която има публикуван учебник W3.CSS Tutorial. Тази рамка се състои от един файл, с URL https://www.w3schools.com/w3css/4/w3.css. Може да се използва само чрез посочване на този адрес или чрез изтегляне и поставяне на този файл на нашия сайт. Във всеки HTML файл, в който искаме да използваме 3w.css, в първия случай, поставяме:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

а във втория случай:

<link rel="stylesheet" href="w3.css">

(Да припомним, че мястото не тези тагове е между <head> и </head> таговете на документа.)

Използването на 3w.css се свежда до задаване в стойността на атрибута class на различни html елементи принадлежност към съответен клас, за който клас е зададено някакво правило за форматиране. Класовете и особеностите на форматирането им са описани в справочника за w3.css W3.CSS Reference.

Например: посочването на клас w3-circle към изображение, прави това изображение да се изреже под формата на елипса.

<img class="w3-circle" src="meeting.jpg" alt="meeting">

14.3. Библиотеки за JavaScript

Ако на даден сайт се използва значително количество програмен код на езика JavaScript, то писането на този код съществено се улеснява с използване на готови, с отворен код библиотеки.

Сайт с връзки към сайтовете на такива библиотеки: javascripting.com

Една от известните, широко използвани Javscript библиотеки е jQuery (вижте: jQuery Tutorial).

Основа на много от тези библиотеки е Node.js (nodejs.org) - интерпретатор на JavaScript езика, който се изпълнява както в браузъра на клиента, така и от сървъра.

14.4. Библиотеки на PHP и други езици

PHP е един от най-използваните езици за програмиране на сървърен софтуер. На този език име огромно количество библиотеки, предоставящи готови решения на създателите на сайтове. Вижте резултат от търсене в Google с думите php libraries.

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

14.5. Системи за управление на съдържанието

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

В настоящият курс ще разгледаме системата с отворен код WordPress.

14.6. Софтуер за изграждане на сайтове (site builders)

Съществуват софтуерни решения за бързо изграждане на сайтове, без необходимост от знания по HTML, CSS или програмиране - строители за сайтове (site builders). При работа с такъв софтуер потребителят избира начален шаблон за сайт, попълва някаква първоначална информация и сайтът се създава автоматично от софтуера. След първоначалното създаване на сайт, софтуерът дава възможности за редактиране - променяне и добавяне на страници, съдържание и функционалности.

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

Съществуват и строители за сайтове, които първоначално създават новия сайт локално, върху компютъра на потребителя (offline site builders). В този случай, направените офлайн файлове могат да се качат на всеки сървър, който има необходимия за показване на съставеното съдържание софтуер.

С търсене в Интернет безплатни строители за сайтове се откриват лесно по думите:

free online site builder или free offline site builder

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

15. Бази данни

В компютърните науки бази данни се наричат обемисти колекции от данни, обединени от нуждата за използване с определена цел. Съчетанията от хардуерни и софтуерни средства за организиране съхраняването на бази от данни се наричат системи за управление на бази данни (СУБД). (Вижте статия: База данни в Wikipedia).

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

В настоящият курс ще разгледаме системата за управление на бази данни MySQL, която представлява софтуер с отворен код и е достъпна безплатно. Сървър, който може да изпълнява заявки, отнасящи се до бази данни MySQL е част от пакета XAMPP, чието изтегляне, инсталиране и стартиране описахме. Официалният сайт на MySQL e mysql.com и именно от този сайт може да се изтегли най-нова версия, и да се намери официалната документация.

15.1. MySQL в XAMPP

След стартиране на програмата за управление на сървърите от файл C:\xampp\xampp-control.exe, ако в прозореца ѝ се щракне бутона Start срещу реда с надпис MySQL, то след секунди надписът се оцветява в зелено, което означава, че сървър MySQL вече работи. (Ако сървърът стартира за първи път, се показва съобщение от защитната стена на Windows, в което трябва да се щракне бутона Allow Access.)

Когато сървърите Apache  и MySQL са стартирани и функционират, отваряме с браузър адреса на локалния сървър http://localhost и щракваме върху хипервръзката phpMyAdmin.

Това отваря страницата на панел за управление на MySQL базите данни phpMayAdmin.

В следващата глава ще разгледаме действия, които се извършват с помощта на phpMyAdmin.

15.2. phpMyAdmin в XAMPP

phpMyAdmin е сървърен софтуер с отворен код, написан на езика за програмиране PHP, който служи за администриране на бази данни от вида MySQL.

Основните действия, които се извършват с phpMyAdmin са:

• създаване на потребители;
• създаване на бази данни и таблици в базите данни;
• редактиране на структурата и на данните в базите данни;
• архивиране и възстановяване, копиране на данни и др.

Създаване на потребител на база данни

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

За стартиране създаването на потребител с phpMyAdmin, на страницата на панела, щракваме върху хипервръзката Server и след това върху хипервръзката User Accounts.

На страницата, която се отваря, се показва таблица-списък на съществуващите потребителски профили. За да стартираме създаването на нов профил щракваме хипервръзката Add user account.

На следващата страница 1. попълваме в полето User name - измислено от нас потребителско име; 2. От падащият списък Host name избираме Local; 3. Щракваме бутона Generate за да се генерира силна парола, която трябва да изкопираме и запазим. (Непременно си запишете някъде паролата на този етап, защото повече няма да я видите освен ако не я смените.)

По-надолу на същата страница щракваме бутоните Data и Structure, с което предоставяме на създавания потребител всички права за достъп и редактиране на базата данни и нейната структура. Препоръчително е да се дават минимум права - само тези, с които дадения потребител ще може да изпълнява задачите си.

Отиваме в най-долната част на страницата и щракваме бутона Go, за да запазим данните за създадения потребител.

За да се уверим, че потребителят е добавен, щракваме хипервръзката User accounts, за да видим отново таблицата-списък на потребителите и в нея трябва да се вижда и новия потребител.

Изтриване на потребител

За да изтрием един или повече потребители, в таблицата-списък поставяме отметки в редовете на потребителите, които искаме да изтрием и след това щракваме бутона Go в карето Remove selected user accounts

Създаване на база данни

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

Ако не е създадена база данни по този начин, то друга възможност е база данни да се създаде ръчно с щракване на хипервръзката Databases

На страницата за създаване на база данни 1. написваме името на базата данни, 2. избираме кодова таблица (добър избор е utf8_bin) и 3. щракваме бутона Create

16. WordPress

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