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

Препис

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

2 1. Въведение в уеб-програмирането езици за уеб програмиране, синтаксис на езика HTML 2. CSS синтаксис. BOX модел. Деклариране и използване на класове и идентификатори 3. Форматиране на текст и списъци 4. Използване на цветове и изображения 5. Таблици тагове и атрибути 6. Формуляри елементи, методи за изпращане 7. Използване на рамки и мултимедия, нови елементи в HTML5, различия между HTML и XHTML 8. Създаване на темплейти чрез CSS и HTML 9. Въведение в JavaScript. Синтаксис, типове променливи и оператори 10. JavaScript условия, функции, Regular Expressions, обекти за дата, час, година

3 1. Въведение в World Wide Web 2. Езици за уеб програмиране 3. Синтаксис на езика HTML 4. Структура на HTML документ 5. Заглавия, параграфи, хоризонтални линии и коментари 6. Хипервръзки 7. Символи

4 През 1969 г. е разработен специален компютър, наречен Interface Message Processor, за реализиране на проекта ARPANET. Първите съобщения са били осъществени между изследователски център Leonard Kleinrock в Университета на Калифорния, Лос Анджелис и центъра на Douglas Engelbart в Станфордския изследователски институт. На г. в Менло парк, Калифорния, Advanced Research Project Agency прави демонстрация на комуникация между два компютъра, посредством обмен на пакети. Така се появява първата компютърна мрежа, която впоследствие се разраства и става известна под името ARPANET. Думата Интернет се използва за първи път за описанието на единната глобална компютърна мрежа, която използва протоколния стек TCP/IP. Това става в публикуваната през декември 1974 г. спецификация на протокола TCP, написана от Robert Kahn, Vinton Cerf и др.

5 Идеята за World Wide Web е предложена през 1989 г. от английския инженер Тим Бърнърс-Лий, който ръководи и нейната първа реализация в мрежата на Европейската организация за ядрени изследвания (CERN). Към края на 1990 г. са разработени основните компоненти на World Wide Web, които описват самия проект: HTTP протокол, HTML, уеб браузър, уеб сървър и уеб страници През 1988 г. започва включването на комерсиални компании в световната мрежа. Създадени са първите компании, доставчици на Интернет услуги. Широкото разпространение на TCP/IP позволява бързото разрастване на Интернет. И други компютърни мрежи се присъединяват към Интернет. На 6 август 1991 г. е публикуван проектът World Wide Web, с което започва и бързото нарастване на популярността на Интернет.

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

7 Web Domain Домейнът е част от йерархичното пространство на глобалната Интернет мрежа, който има собствено уникално име. Това съответствие между домайн имената и IP адреси се управлява от т.нар. Domain Name System. Възможно е един IP адрес да има няколко DNS имена, както е възможно и обратното на едно DNS име да отговарят няколко IP адреса. Организацията, която се занимава с регистрирането и администрацията на домейните от първо ниво, се нар. Internet Corporation for Assigned Names and Numbers (ICANN).

8 Top-Level Domain (TLD) Generic top-level domains (gtld) са широко разпространени и лесно разпознаваеми от всички интернет потребители.com,.org,.net. През 2014 са добавени нови 100 разширения за регистриране на домейни. Country-code top-level domains (cctld) домейни на ниво държава: bg, de, nl or fr. Винаги се състоят от две букви.

9 Предоставянето на информацията в Интернет пространството се реализира чрез комбиниране на технологии както от страна на сървъра, така и от страна на клиента. Клиентската страна е потребителят, търсещ информация в Интернет посредством браузър, който от своя страна препраща заявката към сървърната част (компютър), като се реализира взаимодействието им за разглеждане на уеб информация. IIS, Apache PHP JavaScript, jquery, JSON, AngularJS, ASP Node.js

10 HTML (HyperText Markup Language) е мета език за описание на форматирани документи. Описанието на документа става чрез специални елементи, наречени етикети (tags). Чрез етикетите се оформят отделните елементи от текста, като заглавия, цитати, раздели, хипертекстови препратки и т.н. Основното предимство на HTML е, че документите, оформени по този начин, могат да се разглеждат на различни устройства върху монитора на персонален компютър или мобилен телефон. HTML 5 (W3C Recommendation 28 October 2014). В тази версия се въвеждат нови функции, помагащи авторите на уеб приложения, да въвеждат нови елементи въз основа на изследване на преобладаващите практики.

11 HTML 5.1 W3C Recommendation, 1 Ноември 2016 Тази спецификация дефинира петата основна версия, първата незначителна версия на основния език на World Wide Web: HTML. Продължават да се въвеждат нови функции за подпомагане на авторите на уеб приложения, като се въвеждат нови елементи въз основа на изследване на преобладаващите практики за авторство и продължава да се отделя специално внимание на определянето на ясни критерии за съответствие на потребителските агенти в усилията за подобряване на оперативната съвместимост. HTML 5.2 W3C Recommendation, 14 December 2017 В тази версия продължават да се въвеждат нови функции за подпомагане на авторите на уеб приложения, като се въвеждат нови елементи въз основа на изследване на преобладаващите практики за авторство. HTML 5.3 Last Updated 14 September 2021

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

13 XHTML (extensible HyperText Markup Language) представлява преформулировка на HTML според правилата на XML мета-език, служещ за изграждането на нови езици и за описване на информацията. CSS (Cascading Style Sheets) е език за описание на стилове използва се за описване представянето на документ, написан на език за маркиране. Най-често се използва заедно с HTML, но може да се приложи върху произволен XML документ. PHP (Personal Home Page Hypertext Preprocessor) е скриптов език за програмиране, широко използван главно за сървърни приложения и разработване на динамично съдържание. Автор на езика е датчанинът от канадски произход Размус Лердорф.

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

15 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) е динамичен език за програмиране с общо предназначение.

16 SQL (Structured Query Language) е стандартен език за достъп до бази данни, осигуряващ средства за манипулиране на данните (store, retrieve, update, delete) и създаване на бази данни. Python е интерпретативен, интерактивен, обектно ориентиран език за програмиране, създаден от Guido van Rossum в началото на 90-те години. VRML (Virtual Reality Modeling Language) е език за описание на триизмерни (3D) обекти, пространства и възможните взаимодействия на потребителя с тях. CGI (Common Gateway Interface) е стандарт за интерфейс на външни програми (приложения) с информационните сървъри в Интернет.

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

18

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

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

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

22 Основната структура на HTML документ включва три задължителни елемента <html>, <head> и <body>, разположени по следния начин: Започвава се с деклариране на типа на документа doctype, който указва на браузъра къкъв набор от стандарти се използват (няма затварящ таг).

23 за HTML5 декларацията doctype има вида: <!DOCTYPE html> за HTML 4.01 декларацията doctype има вида: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " за XHTML 1.0 декларацията doctype има вида: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " Таговете <head> и </head> определят границите на областта на заглавната част на файла, където се съдържа информация, която не се показва директно в браузъра. В <head> се включват елементи за скриптове, инструкции за браузъра къде да намери стилове и предоставяне на мета информация <title>, <style>, <meta>, <link>, <script>.

24 Елементът <title> </title> определя заглавието на документа и е задължетелен във всички HTML/XHTML документи. Това заглавие на докуманта се паказва в прозореца на браузъра и също така се показва и като заглавие на страницата при търсене. Тагът <link> определя връзката между документа и външен ресурс и се използва за връзка към външни стилове: <link rel="stylesheet" href="stylefile.css"> Тагът <script> се използва за определяне на скрипт, като например JavaScript. <script src="scriptfile.js"></script>

25 Тагът <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">

26 ANSI е първият официален набор от символи по подразбиране в Windows. character set по подразбиране в HTML 4 е character set по подразбиране в HTML 5 е UTF-8. Символите в UTF8 могат да бъдат с дължина 1-4 bytes. UTF-8 може да предстиви всеки символ в стандарта Unicode. UTF-8 е съвместим с ASCII. UTF-8 е предпочитаното кодиране за електронна поща и уеб страници.

27 Заглавията в HTML се определят с таговете <h1> до <h6>, като <h1> определя най-важната позиция, а <h6> определя най-маловажното заглавие. Например: <h1> Заглавие 1 </h1> <h2> Заглавие 2 </h2> <h3> Заглавие 3 </h3> <h4> Заглавие 4 </h4> <h5> Заглавие 5 </h5> <h6> Заглавие 6 </h6>

28 Параграфите представляват части от текста, отделени една от друга с празен ред и без отстъп дефинират се чрез тага <p>. Браузърите автоматично добавят празен ред преди и след параграфите. <p>това е параграф</p> <p>това е следващ параграф</p> Преминаване на текст в следващ ред, без да започване на нов параграф може да се постигне с използване на тага <br>. Тагът <br> няма затварящ таг. Тагът <hr> се използва за създаване на хоризонтална линия и няма затварящ таг. Могат да използват атрибутите: size, width, align (left, right, center), color.

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

30 Коментари се вмъкват в HTML документа, за да се направи кода по-прегледен и разбираем. Коментарите се игнорират от браузъра и не се показват. Коментарите се задават по следния начин: <!-- този коментар не се показва --> <p>това е параграф с <!-- коментар --> текст </p>

31 Една хипервръзка (или линк) може да бъде дума, група от думи или изображение, което може да се клика върху него, за да се визуализира друг документ. Важно е да се отбележи, че хипервръзките винаги започват с протокола за предоставяне на услугата, например За създаване на хипервръзки се използва тага <a> с атрибут href, съкращение от hypertext reference и указва на браузъра къде да намери информацията. Синтакситът е: <a href="адрес, към който ще води връзката">текст на връзката, който ще се визуализира на екрана</a> <a href=" към УниБИТ</a>

32 Хипервръзките могат да се разделят на абсолютни и относителни. Абсолютните връзки включват цялото име на пътя до ресурса: <a href=" към УНИБИТ</a> Относителните хипервръзки не включват цялото име на пътя към страницата, която посочват като връзка. Вместо това, името на пътя, което се използва, се отнася спрямо настоящата страница: <a href="news.html">новини</a> <a href="../students-b.html">студенти-бакалаври</a> <a href="../students-m.html">студенти-магистри</a>

33 Връзка към определено място вътре в самия документ може да бъде реализарана чрез използване на атрибута name. За да направим връзка към част от страницата, първо трябва да зададем име на тази част от страницата. Създаването на такова име позволява да бъде направена връзка към него по-късно. Първо се създава т.нар. котва и се поставя на мястото от страницата, към което ще бъде връзка. Котвата има вида: <a name="paragraph-3"></a> Хипервръзката, която води към направената вече котва има следния запис: <a href="#paragraf-3">връзка към параграф 3 на страницата</a>

34 Чрез атрибута target указваме къде хипервръзката да отвори свързания документ. Пример за хипервръзка, която се отваря в нов прозорец на браузъра: <a href= target="_blank">връзка към УНИБИТ, която ще се отвори в нов прозорец</a> Протоколът mailto позволява да бъде създадена хипервръзка, чрез която пряко ще се стартира подразбиращият софтуер за е-мейл клиент за изпращане на съобщение. Синтаксисът е: <a text</a>

35 В HTML се използва специфичен начин за кодиране на специални символи, като например и. Този вид кодиране е удобен начин за въвеждане на символи, които се намират трудно или липсват на клавиатурата. За представяне на HTML документа се използват символите <, > и &, които са част от синтаксиса на комадните в HTML. Ако е необходимо да се визуализира на екрана знака "<", в HTML документа трябва да се използва < Всички символи в HTML започват със символа "&" в началото и завършват с точка и запетая ";".

36 <p> <br> </p> <p> Sofia </p> <p> <br> </p> <p> </p> <p> </p>

37 Създаване и използване на 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 >

38

39 За писането и редактирането на HTML код могат да се използват 2 типа редактори: Просто редактиране въвеждане на HTML кода ръчно чрез: Notepad, Notepad++, WorldPad, TextPad, и др. WYSIWYG (What You See Is What You Get) редактори те създават HTML код имат възможност както за редактиране на кода, така и за визуализиране на написания код, като Macromedia Dreamweaver, Microsoft FrontPage, Adobe GoLive, AceHTML, CoffeeCup и др. Могат да се използват и налични он-лайн редактори.