проф. д.н. ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/1.pdfвключване на външни приложения, написани на езика Java (Applet); осъществяване

проф. д.н. ДАНИЕЛА БОРИСОВА

1. Въведение в уеб-програмирането – езици за уеб програмиране, синтаксис на езика HTML

2. BOX модел. CSS – синтаксис и деклариране на стилове. Деклариране и използване на класове и селектори

3. Форматиране на текст и списъци4. Използване на цветове и изображения5. Таблици – тагове и атрибути6. Формуляри – елементи, методи за изпращане7. Използване на рамки и мултимедия, нови елементи в HTML5,

различия между HTML и XHTML8. Създаване на темплейти чрез CSS и HTML9. Въведение в JavaScript. Синтаксис, типове променливи и оператори10. JavaScript – условия, функции, Regular Expressions, обекти за дата, час,

годинаД. Борисова

1. Въведение в World Wide Web

2. Езици за уеб програмиране

3. Синтаксис на езика HTML

4. Структура на HTML документ

5. Заглавия, параграфи, хоризонтални линии и коментари

6. Хипервръзки

7. Символи

Д. Борисова

През 1969 г. е разработен специален компютър, наречен InterfaceMessage Processor, за реализиране на проекта ARPANET. Първитесъобщения са били осъществени между изследователски център LeonardKleinrock в Университета на Калифорния, Лос Анджелис и центъра наDouglas Engelbart в Станфордския изследователски институт.На 29.10.1969 г. в Менло парк, Калифорния, Advanced ResearchProject Agency прави демонстрация на комуникация между двакомпютъра, посредством обмен на пакети. Така се появява първатакомпютърна мрежа, която впоследствие се разраства и става известнапод името ARPANET.

Думата Интернет се използва за първи път за описанието на единнатаглобална компютърна мрежа, която използва протоколния стек TCP/IP.Това става в публикуваната през декември 1974 г. спецификация напротокола TCP, написана от Robert Kahn, Vinton Cerf и др.


Идеята за World Wide Web е предложена през 1989 г. от английскияинженер Тим Бърнърс-Лий, който ръководи и нейната първа реализацияв мрежата на Европейската организация за ядрени изследвания (CERN).Към края на 1990 г. са разработени основните компоненти на World WideWeb, които описват самия проект:

HTTP протокол, HTML, уеб браузър, уеб сървър и уеб страници

През 1988 г. започва включването на комерсиални компании в световнатамрежа. Създадени са първите компании, доставчици на Интернет услуги.Широкото разпространение на TCP/IP позволява бързото разрастване наИнтернет. И други компютърни мрежи се присъединяват към Интернет.На 6 август 1991 г. е публикуван проектът World Wide Web, с коетозапочва и бързото нарастване на популярността на Интернет.


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


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


IIS, Apache

PHP

ASP

Node.js

JavaScript, jQuery, JSON,AngularJS, …

HTML (HyperText Markup Language) е мета език за описание наформатирани документи. Описанието на документа става чрезспециални елементи, наречени етикети (tags). Чрез етикетите сеоформят отделните елементи от текста, като заглавия, цитати,раздели, хипертекстови препратки и т.н. Основното предимство наHTML е, че документите, оформени по този начин, могат да серазглеждат на различни устройства – върху монитора на персоналенкомпютър или мобилен телефон.

HTML 5 (W3C Recommendation 28 October 2014). В тази версия севъвеждат нови функции, помагащи авторите на уеб приложения, давъвеждат нови елементи въз основа на изследване напреобладаващите практики.


HTML 5.1 W3C Recommendation, 1 Ноември 2016 - Тазиспецификация дефинира петата основна версия, първатанезначителна версия на основния език на World Wide Web: HTML.Продължават да се въвеждат нови функции за подпомагане наавторите на уеб приложения, като се въвеждат нови елементи възоснова на изследване на преобладаващите практики за авторство ипродължава да се отделя специално внимание на определянето наясни критерии за съответствие на потребителските агенти в усилиятаза подобряване на оперативната съвместимост.

HTML 5.2 W3C Recommendation, 14 December 2017 - В тази версияпродължават да се въвеждат нови функции за подпомагане наавторите на уеб приложения, като се въвеждат нови елементи възоснова на изследване на преобладаващите практики за авторство.

HTML 5.3 - W3C Working Draft, 18 October 2018


DHTML (Dynamic Hypertext Markup Language) обединявасъвкупността от технологиите за създаването на интерактивни ианимирани уеб-сайтове. DTTML = HTML + скриптове + CSS.DHTML позволява на скриптовите езици да сменят променливите наезика, описващ уеб-страницата.

XML (eXtensible Markup Language) е стандарт (метаезик),дефиниращ правила за създаване на специализирани маркиращиезици както и синтаксисът, на който тези езици трябва да сеподчиняват. Сам по себе си той е безполезен, защото предоставя самонеобходимата структура и правила за описване на всякакъв видинформация на даден документ (чрез маркиране с етикети), но не икакво означават отделните маркери (етикети).http://www.w3.org/XML/


XHTML (eXtensible HyperText Markup Language) – по съществопредставлява преформулировка на HTML според правилата на XML– мета-език, служещ за изграждането на нови езици и за описванена информацията. XHTML е почти идентичен с HTML.

XHTML 1.1 – W3C 27 March 2018

CSS (Cascading Style Sheets) е език за описание на стилове –използва се за описване представянето на документ, написан наезик за маркиране. Най-често се използва заедно с HTML, но можеда се приложи върху произволен XML документ.17 August 2019 – Updated Working Draft: CSS Lists Level 3

PHP (Personal Home Page – Hypertext Preprocessor) е скриптовезик за програмиране, широко използван главно за сървърниприложения и разработване на динамично съдържание. Автор наезика е датчанинът от канадски произход Размус Лердорф.


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

jQuery e библиотека за JavaScript, предназначена да опрости да и данаправи по-лесно да използването на скриптовете в HTML от странана клиента.


ASP (Active Server Pages) е технология, разработена от Microsoft. ASPизползва някои специални тагове, които позволяват да се включват вHTML код, за генериране на динамични уеб страници.

JScript е скриптов език, базиран на стандарта ECMAScript, който сеизползва в Microsoft Internet Explorer. Jscript се изпълнява отWindows Script engine. Jscript е реализацията на Microsoft заJavaScript за Internet Explorer.

VBScript е клиент-базиран език, който работи само в средата наInternet Explorer и съвсем естествено, е разработен от Майкрософт. Запредпочитане е да се използва JavaScript или Jscript, тъй като те сеизпълняват от всички популярни браузъри.

Perl (Practical Extraction and Report Language) е динамичен език запрограмиране с общо предназначение.


SQL (Structured Query Language) е стандартен език за достъп добази данни, осигуряващ средства за манипулиране на данните (store,retrieve, update, delete) и създаване на бази данни.

Python е програмен език, който позволява да се работи по-бързо и дасе интегрират системите по-ефективно.

VRML (Virtual Reality Modeling Language) е език за описание натриизмерни (3D) обекти, пространства и възможните взаимодействияна потребителя с тях.

CGI (Common Gateway Interface) е стандарт за интерфейс на външнипрограми (приложения) с информационните сървъри в Интернет.

Python може да се използва на сървър за създаване на уебприложения.


HTML е основната технология, контролираща това, което уеб браузърътпоказва на екрана. Основните категории команди в езика HTML сапредназначени за: стилови формати и управление на текстовия поток (Flow Control); включване на графични изображения (Images); създаване на хипервръзки (Links); интегриране на аудио с външни графични обекти (Sound and Maps); създаване на интерактивни формуляри (Forms); разделяне на документа на отделни полета (Frames); включване на външни приложения, написани на езика Java (Applet); осъществяване на връзка с външни информационни структури (CGI-

script).



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

HTML елементите са основната градивна единица на уебстраниците. Чрез тях се оформят отделните части от текста наедна уеб страница, като заглавия, цитати, раздели, хипертекстовипрепратки и т.н. Най-често HTML елементите са групирани подвойки <h1> и </h1>.


HTML елемент – е всичко от отварящия до затваращия таг.Повечето HTML елементи могат да имат атрибути.

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

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


Един типичен пример на структура на HTML документ


Основната структура на HTML документ включва три задължителниелемента <html>, <head> и <body>, разположени по следния начин:

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

за HTML5 декларацията doctype има вида:<!DOCTYPE html>

за HTML 4.01 декларацията doctype има вида:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

за XHTML 1.0 декларацията doctype има вида:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN”

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Таговете <head> и </head> определят границите на областта назаглавната част на файла, където се съдържа информация, която несе показва директно в браузъра. В <head> се включват елементи заскриптове, инструкции за браузъра къде да намери стилове ипредоставяне на мета информация – <title>, <style>, <meta>, <link>,<script>.


Елементът <title> </title> определя заглавието на документа и езадължетелен във всички HTML/XHTML документи. Това заглавиена докуманта се паказва в прозореца на браузъра и също така сепоказва и като заглавие на страницата при търсене.

Тагът <link> определя връзката между документа и външен ресурс исе използва за връзка към външни стилове:

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

Тагът <script> се използва за определяне на скрипт, като напримерJavaScript.

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


Тагът <meta> предоставя метаданни за HTML документа. Тазиинформация не се показва на страницата, но ще бъде анализиранаот браузъра и търсещите машини. Няма затварящ таг.

<meta charset="UTF-8“>

<meta name="description" content="Free Web tutorials">

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

<meta name="author" content="John Doe">

<meta name="robots" content="index, follow">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="refresh" content="30">


ANSI е първият официален набор от символи поподразбиране в Windows.

character set по подразбиране в HTML 4 е 8859-1.

character set по подразбиране в HTML 5 е UTF-8.


Заглавията в HTML се определят с таговете <h1> до <h6>, като <h1>определя най-важната позиция, а <h6> определя най-маловажнотозаглавие. Например:

<h1> Заглавие 1 </h1><h2> Заглавие 2 </h2><h3> Заглавие 3 </h3><h4> Заглавие 4 </h4><h5> Заглавие 5 </h5><h6> Заглавие 6 </h6>


Параграфите представляват части от текста, отделени една от друга спразен ред и без отстъп – дефинират се чрез тага <p>. Браузъритеавтоматично добавят празен ред преди и след параграфите.<p>Това е параграф</p><p>Това е следващ параграф</p>

Преминаване на текст в следващ ред, без да започване на новпараграф може да се постигне с използване на тага <br>. Тагът <br>няма затварящ таг.

Тагът <hr> се използва за създаване на хоризонтална линия и няма затварящ таг. Могат да използват атрибутите:size, width, align (left, right, center), color.


<p> Тагът hr определя хоризонтална линия</p> <hr><p> Това е параграф.</p><hr align="center" width="60%" color="#33CC00"><p> Това е параграф.</p> <hr size="10" color="red"><p> Това е параграф.</p>


Коментари се вмъкват в HTML документа, за да се направи кода по-прегледен и разбираем.

Коментарите се игнорират от браузъра и не се показват.

Коментарите се задават по следния начин:



<p>Това е параграф с  текст </p>


Една хипервръзка (или линк) може да бъде дума, група от думи илиизображение, което може да се клика върху него, за да севизуализира друг документ. Важно е да се отбележи, чехипервръзките винаги започват с протокола за предоставяне науслугата, например http://www.unibit.bg

За създаване на хипервръзки се използва тага <a> с атрибут href,съкращение от hypertext reference и указва на браузъра къде данамери информацията. Синтакситът е:<a href="адрес, към който ще води връзката">текст навръзката, който ще се визуализира на екрана</a>

<a href="http://www.unibit.bg">Връзка към УниБИТ</a>


Хипервръзките могат да се разделят на абсолютни и относителни.Абсолютните връзки включват цялото име на пътя до ресурса:

<a href="http://www.unibit.bg">Връзка към УНИБИТ</a>

Относителните хипервръзки не включват цялото име на пътя къмстраницата, която посочват като връзка. Вместо това, името на пътя,което се използва, се отнася спрямо настоящата страница:

<a href="news.html">новини</a> <a href="../students-b.html">студенти-бакалаври</a> <a href="../students-m.html">студенти-магистри</a>


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

<a name="paragraph-3"></a>

Хипервръзката, която води към направената вече котва имаследния запис:

<a href="#paragraf-3">Връзка към параграф 3 на страницата</a>


Чрез атрибута target указваме къде хипервръзката да отворисвързания документ. Пример за хипервръзка, която се отваря в новпрозорец на браузъра:<a href=http://www.unibit.bg target="_blank">Връзка към

УНИБИТ, която ще се отвори в нов прозорец</a>

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

<a href="mailto:[email protected]">Link text</a>


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

За представяне на HTML документа се използват символите <, >, " и&, които са част от синтаксиса на комадните в HTML. Ако енеобходимо да се визуализира на екрана знака "<", в HTMLдокумента трябва да се използва <

Всички символи в HTML започват със символа "&" в началото изавършват с точка и запетая ";".


Създаване и използване на favicon – малката икона, която се вижда доадреса в браузъра. Най-лесния начин да направим такава икона:

1) избира се изображението, което искаме да се показва до URL-адреса;

2) чрез подходаща програма се намалява до размер 16x16 пиксела исе записва във формат с разширение .ico.

3) Така полученото изображение се поставя в секцията head,следвайки показания код:

<link rel="shortcut icon" href="favicon.ico">

<link rel="icon" href="image.gif" type="image/gif" sizes="16x16">

<link rel="icon" href="image.png" type="image/png" sizes="16x16”>



За писането и редактирането на HTML код могат да се използват 2типа редактори:

Просто редактиране – въвеждане на HTML кода ръчно чрез:Notepad, Notepad++, WorldPad, TextPad, и др.

WYSIWYG (What You See Is What You Get) редактори – те създаватHTML код – имат възможност както за редактиране на кода, такаи за визуализиране на написания код, като MacromediaDreamweaver, Microsoft FrontPage, Adobe GoLive, AceHTML,CoffeeCup и др.

Могат да се използват и налични он-лайн редактори.

Documents

проф. д.н. ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/1.pdfвключване на външни приложения, написани на езика Java (Applet); осъществяване