Езици за програмиране PDF

**Езици за програмиране** **I. Въведение в езиците за програмиране** **Дефиниция на език за програмиране:** Система от знаци, използвани за комуникация между човек и компютър, позволяваща на хората да пишат точни алгоритми (програми), които компютрите могат да изпълняват. **Компоненти на езика...

**Езици за програмиране** **I. Въведение в езиците за програмиране** **Дефиниция на език за програмиране:** Система от знаци, използвани за комуникация между човек и компютър, позволяваща на хората да пишат точни алгоритми (програми), които компютрите могат да изпълняват. **Компоненти на езика за програмиране:** ○ **Синтаксис:** Правила, управляващи как елементите на езика са подредени и комбинирани. ○ **Семантика:** Значението на елементите на езика и техните комбинации. **Значение както на синтаксиса, така и на семантиката:** ○ И двете са от решаващо значение за ефективното програмиране. ○ Една програма се нуждае от синтактична коректност, за да компилира и стартира, и семантична коректност, за да произведе желаните резултати. ○ Аналогия: „Зелените идеи спят бясно" е синтактично правилно на български, но семантично безсмислено. В програмирането синтактично правилният код може да не функционира по предназначение, ако семантиката е грешна. **Примери:** Конкретни случаи на синтактично правилни, но семантично неправилни кодови фрагменти. **II. Видове езици за програмиране** **Класификация въз основа на област на приложение:** ○ **Универсални езици:** Подходящи за различни домейни. ○ **Специализирани езици:** Проектирани за конкретни проблемни области. Например PROG е специално за обработка на данни. **Класификация въз основа на нивото на абстракция:** ○ **Първо поколение (1950-те):** Машинни езици, работещи директно върху хардуер, използвайки двоичен код (0s и 1s). ○ **Второ поколение (началото на 1950-те):** асемблерни езици, използващи мнемонични символи за представяне на машинни инструкции, по-лесни за разбиране от машинните езици, но все още зависими от хардуера. ○ **Трето поколение (1954-1970):** Езици от високо ниво, по-близки до човешкия език и независими от хардуера. Примери: FORTRAN, ALGOL 58, COBOL6. Тези езици са по-ориентирани към проблеми. ○ **Четвърто поколение (1970-80):** Езици на много високо ниво, абстрахиращи се от детайлите на хардуера, фокусирани върху решаването на проблеми. Примери: Smalltalk, Prolog. Тези езици предлагат повече функции за модулно програмиране и абстракция на данни. ○ **Пето поколение (1990 - до момента):** Скриптови езици, предназначени за бързо разработване и уеб програмиране. Примери: Python, JavaScript, Ruby8. Често интерпретиран вместо компилиран. **Класификация въз основа на програмната парадигма:** ○ **Процедурно (императивно) програмиране:** Изпълнението на програмата следва последователност от стъпки (инструкции). Този традиционен стил разделя задачите на по-малки процедури9. Примери: Pascal, C, Ada. ○ **Функционално програмиране:** Фокусира се върху функциите и техните оценки. Функциите са първокласни граждани, което означава, че могат да бъдат предавани като аргументи10. Примери: Lisp, Miranda, Haskell. ○ **Логическо (декларативно) програмиране:** Програмите се изразяват като логически твърдения (факти и правила). Изпълнението включва доказване или опровергаване на цели въз основа на тези твърдения. Примери: Prolog, OPS5. ○ **Обектно-ориентирано програмиране:** Програмите са организирани около обекти, капсулиращи данни и поведение. Примери: Smalltalk, Eiffel, Java, C++. **Езици за описание на уеб страницата:** ○ **HTML:** HyperText Markup Language се използва за структуриране на съдържание на уеб страници. ○ **XML:** Extensible Markup Language се използва за структуриране и форматиране на данни. За разлика от HTML, XML не е предназначен да бъде заменен от HTML и се фокусира върху съхранението на данни. **III. Описване на семантиката на език за програмиране** **Три общи подхода:** ○ **Използване на естествен език:** Потенциално двусмислено и неточно. ○ **Формална дефиниция:** Използва математическа нотация и логика, за да дефинира стриктно значението на езика, но може да бъде сложно. ○ **Оперативна семантика:** Описва значението на програмните конструкции чрез техните стъпки за изпълнение на абстрактна машина, по-интуитивна от формалната дефиниция. **IV. Описание на синтаксиса на език за програмиране** **Синтактичните правила са строг набор от правила, необходими за ефективността на програмата**. **Тези правила трябва да бъдат разбираеми както от компютъра, така и от хората, които пишат код**. **Общи методи:** ○ **Граматики без контекст:** Използвайте набор от производствени правила, за да дефинирате валиден синтаксис. ○ **Форма на Backus-Naur (BNF):** Нотация за писане на контекстно-свободни граматики, предлагаща компактен начин за изразяване на синтактични правила. ○ **Синтактични диаграми:** Графично представяне на синтактични правила за лесно визуализиране и разбиране. **V. Превод на езици за програмиране** **Процес:** Превод на езикова програма от високо ниво в изпълнима форма, разбираема от компютъра. **Видове преводачи:** ○ **Компилатори:** Превеждат цялата програма в машинен код преди изпълнение, което обикновено води до по-бързо изпълнение на програмата, но изисква отделна стъпка на компилиране. ○ **Преводачи:** Превеждайте и изпълнявайте програмата ред по ред, предлагайки по-интерактивна среда за разработка, но потенциално по-бавно изпълнение. **Процесът на превод изисква изходният код (език от високо ниво) да бъде преведен на нещо, което машината може да разбере**. **Това се прави с програма за преводач, която може да бъде или компилатор, или интерпретатор**. **VI. Програмиране и програмни грешки** **Стъпки, включени в програмирането:** ○ Написване на програмата в текстов редактор. ○ Превеждане на програмата в изпълним код (компилация или интерпретация). ○ Изпълнение на програмата с входни данни. ○ Анализиране на изхода и коригиране на грешки. **Видове програмни грешки:** ○ **Синтактични грешки:** Нарушения на синтаксичните правила на езика, открити по време на компилация. Например неправилни декларации на променливи. ○ **Семантични грешки:** Неправилни интерпретации на семантиката на езика, открити по време на изпълнение. Например използване на неправилен оператор. ○ **Логически грешки:** Грешки в логиката на програмата, водещи до неправилни резултати. Тези грешки произтичат от погрешна логика в това как трябва да функционира програмата. **VII. Системи клиент-сървър** **Определение:** Системи, при които софтуерни компоненти (клиенти и сървъри) взаимодействат, за да предоставят услуги. **Модел клиент-сървър в програмирането:** Клиентските програми изискват услуги от сървърни програми. **Пример:** DNS сървър, предоставящ IP адреси за имена на домейни. В този модел DNS сървърът действа като сървър, предоставяйки услугата за превод на имена на домейни в IP адреси, докато клиентът (вашият компютър) изисква тези преводи. **VIII. Световната мрежа (WWW)** **История и принципи:** Разработено в CERN, базирано на хипертекст и интернет. Това позволи документите да бъдат свързани заедно, образувайки „мрежа" от взаимосвързана информация. **Структура:** Състои се от взаимосвързани уеб страници, съдържащи хипервръзки към други страници. Тази структура създава навигационна мрежа от информация. **Стандарти:** HTML, XML, CSS, JavaScript, DOM. Тези стандарти гарантират, че уеб страниците се показват правилно и последователно в различни браузъри и устройства. **IX. Уеб-клиент и уеб-сървър** **Уеб сървър:** Софтуер, който управлява и обслужва уеб страници. Популярните уеб сървъри включват Apache и NGINX. **Уеб клиент (браузър):** Софтуер, позволяващ на потребителите достъп и преглеждане на уеб страници. Примерите включват Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari. **HTTP:** Основният комуникационен протокол между уеб клиенти и сървъри. Той управлява как уеб страници и други ресурси се заявяват и предават между клиента и сървъра. **Видове уеб браузъри:** Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari. **Значение на уеб стандартите:** Осигурете съвместимост и оперативна съвместимост в различни браузъри. Това означава, че уеб страниците трябва да изглеждат и функционират по един и същи начин, независимо кой браузър използва потребителят. **X. Инструменти и езици за уеб разработка** **Инструменти за създаване на уеб страници:** ○ Текстови редактори (Notepad, UltraEdit, Notepad++). Те предлагат основен начин за писане и редактиране на HTML, CSS и JavaScript код. ○ WYSIWYG HTML редактори (Microsoft Expression Web, Adobe Dreamweaver). Те осигуряват визуален интерфейс за проектиране на уеб страници, без да е необходимо да пишете код директно. **Видове езици за уеб програмиране:** ○ **От страна на клиента:** JavaScript. JavaScript кодът се изпълнява в уеб браузъра на потребителя, позволявайки интерактивни елементи и динамични актуализации на съдържанието на уеб страницата. ○ **От страна на сървъра:** PHP, Python, Ruby. Кодът от страната на сървъра се изпълнява на уеб сървъра и е отговорен за генерирането на динамично съдържание, обработката на въведените от потребителя данни и взаимодействието с бази данни. **XI. Цели и ресурси на курса** **Цел:** Разработване на клиентски уеб приложения с помощта на HTML, CSS и JavaScript. Целта е да ви позволи да създавате интерактивни и отзивчиви уеб страници, които реагират на потребителските взаимодействия. **Ключови ресурси:** ○ W3Schools. ○ Уроци по уеб дизайн/HTML. ○ Преносим Notepad++. **XII. Допълнителни понятия** **Типове MIME:** Типовете MIME (многофункционално разширение за интернет поща) се използват за идентифициране на типа съдържание, което се изпраща по интернет. Тази информация помага на уеб браузъра да обработва правилно съдържанието. Например MIME тип \"text/html\" показва HTML документ, докато \"image/jpeg\" показва JPEG изображение. Този разширен учебен план обхваща всички ключови концепции от изходния материал. Като изучавате тези теми, трябва да сте добре подготвени за вашия тест. **HTML основни понятия и елементи. Текстово съдържание** **I. Въведение в уеб разработката** - **Модерни уеб решения:** - Фокус: Удобни за потребителя и достъпни уебсайтове. - Методи: - Статични уебсайтове (съдържанието остава същото). - Динамични уебсайтове (промени в съдържанието въз основа на потребителско взаимодействие или данни). - Видове уебсайтове: - Информационни (споделяне на новини, факти и данни). - Електронна търговия (покупка и продажба на стоки и услуги онлайн). - Социални медии (свързване на хора и споделяне на съдържание). - Образователни (предоставяне на учебни ресурси и онлайн курсове). - **Основни съображения за разработка на уебсайт:** - Целева аудитория: Разберете предназначените потребители на уебсайта и техните нужди. - Достъпност: Уверете се, че уебсайтът е достъпен за хора с увреждания. - Използваемост: Направете уебсайта лесен за навигация и използване. - Сигурност: Защитете потребителските данни и гарантирайте, че уебсайтът е защитен от атаки. - Обработка на грешки: Внедрете механизми за грациозно справяне с потенциални грешки. **II. Разбиране на HTML** - **Какво е HTML?** - HTML означава HyperText Markup Language. - Това е език за маркиране, а не език за програмиране. - HTML се използва за създаване на структура и съдържание на уеб страници. - **Основни характеристики на HTML:** - Стандартизирано от World Wide Web Consortium (W3C). - Използва се както за статично, така и за динамично уеб съдържание. - Текстов формат, което означава, че е четим от хора. - **HTML като компютърен документ:** - HTML документите се обработват от уеб браузъри за показване на уеб страници. - Те имат йерархична структура с елементи, вложени един в друг. - HTML документите могат да включват различни видове съдържание: - Текст - Изображения - Мултимедия - Интерактивни елементи - **Синтаксис на HTML:** - **Етикети:** Ключови думи, затворени в ъглови скоби ( \< и \> ). - Пример: \ за абзац. - **Елементи:** градивни елементи на HTML документ, състоящ се от начален таг, съдържание и краен таг.3 - Пример: \Това е параграф.\ - **Атрибути:** Осигурете допълнителна информация за елементите. - Пример: \ - **Структура:** Елементите са подредени йерархично, за да създадат структурата на уеб страницата.3 - Пример: Елементът \ съдържа метаданни, докато елементът \ съдържа видимото съдържание. **III. HTML елементи и етикети: дълбоко гмуркане** - **Тагове:** - Етикети за маркиране, използвани за дефиниране на HTML елементи. - Написано в ъглови скоби: \ - Повечето тагове имат затварящ таг: \ - Някои тагове са самозатварящи се: \ - **Елементи:** - HTML елементите се състоят от: - Начален етикет: \ - Съдържание: Информацията, затворена между таговете. - Краен етикет: \ - Пример: \Това е параграф.\ - Някои елементи са празни (празни елементи): \ - **Чувствителност към малки и малки букви:** - HTML не е чувствителен към малки и големи букви: \ е същото като \. - Конвенцията е да се използват малки букви за последователност. - **Атрибути:** - Атрибутите предоставят допълнителна информация за HTML елементите. - Те се поставят в началния таг на елемент: \. - Примери: - \ - \Посетете Пример\ - **Глобални атрибути:** - Атрибути, които могат да се използват с почти всеки HTML елемент. - Общи глобални атрибути: - клас : Указва едно или повече имена на класове за елемент (за стилизиране). - id : Присвоява уникален идентификатор на елемент (за скриптове и стил). - style : Прилага вградени CSS стилове към елемент. - title : Предоставя допълнителна информация за елемент, често показвана като подсказка. **IV. Структура на HTML документ** - **Компоненти на HTML документ:** - Всички HTML документи имат специфична структура: - Текстов файл с разширение.html или.htm. - Съдържанието е организирано с помощта на HTML елементи и тагове. - Основната структура включва: - \ : Декларира типа документ (HTML5). - \ : Основният елемент на HTML документа. - \ : Съдържа метаданни за документа. - \ : Съдържа видимото съдържание на уеб страницата. - **Структура на HTML страница:** - Елементът \ : - Съдържа метаданни за документа, като например: - \ : Указва заглавието на уеб страницата, показано в раздела на браузъра. - \ : Предоставя различни метаданни, като кодиране на знаци, информация за автора и ключови думи. - \ : Може да се използва за дефиниране на вътрешни CSS стилове за документа. - \ : Използва се за свързване на външни ресурси, като CSS таблици със стилове. - Елементът \ : - Съдържа видимото съдържание на уеб страницата, като например: - Текст - Заглавия - Параграфи - Изображения - Мултимедия - Списъци - Маси - Формуляри - **Декларация DOCTYPE:** - Първият ред на HTML документ. - Декларира вида на документа и версията на използвания HTML. - За HTML5: \ - Трябва да се постави преди тага \. - Регистърът не е чувствителен. - **HTML елементи за обща информация:** - Тези елементи предоставят обща информация за уеб страницата и обикновено се поставят в елемента \ : - \ : Указва заглавието на уеб страницата. - \ : Предоставя метаданни, като набор от знаци, описание, ключови думи и автор. - \ : Съдържа вътрешни CSS стилове за документа. - \ : Свързва външни ресурси, като CSS таблици със стилове и favicons. - \ : Указва основния URL адрес за всички относителни URL адреси в документа. **V. Работа с HTML съдържание** - **HTML елементи за описване на съдържание:** - HTML предоставя елементи за описание на структурата и характеристиките на съдържанието, включително: - Елементи на ниво блок: Елементи, които създават нов ред преди и след тяхното съдържание (напр. \ , \ , \ ). - Вградени елементи: Елементи, които не създават прекъсвания на редове (напр. \ , \ , \ ). - **Типове съдържание в HTML:** - Текстово съдържание: параграфи, заглавия, списъци и др. - Таблично съдържание: Данните са организирани в таблици. - Мултимедийно съдържание: изображения, аудио, видео. - Динамично съдържание: Съдържание, което се променя въз основа на взаимодействието на потребителя (често използвайки JavaScript). - **Инструменти за редактиране и тестване на HTML:** - Текстови редактори: Notepad++, Sublime Text, Atom, Visual Studio Code. - Онлайн редактори: W3Schools Tryit Editor, CodePen. - Браузъри: Chrome, Firefox, Edge (с инструменти за разработчици за проверка на кода). **VI. Текстово съдържание в HTML** - **HTML елементи за текстово съдържание:** - HTML предоставя различни елементи за форматиране и структуриране на текстово съдържание: - Заглавия: \ до \ (от най-важно към най-малко важно). - Абзаци: \ - Прекъсвания на редове: \ - Списъци: \ (неподреден списък), \ (подреден списък), \ (елемент от списък). - Форматиране на текст: \ (удебелен), \ (курсив), \ (подчертан) и др. - **Тълкуване на текст в браузъри:** - Браузърите интерпретират HTML кода и съответно показват текстово съдържание. - Бяло пространство: Браузърите свиват множество интервали в едно пространство. - Прекъсвания на редове: Браузърите игнорират прекъсвания на редове в изходния HTML код, освен ако не са в елемент \. - **Етикети за заглавия:** - \ до \ : Създайте заглавия от различни нива. - \ е най-важното заглавие, \ е най-маловажното. - Браузърите автоматично добавят интервал преди и след заглавия. - **Таг за абзац ( \ ):** - Определя абзац от текста. - Браузърите автоматично добавят интервали преди и след абзаци. - **Етикет за прекъсване на ред ( \ ):** - Вмъква нов ред в текстовото съдържание. - Не изисква затварящ таг (самозатварящ се елемент). - **Предварително форматиран текстов етикет ( \ ):** - Показва текста точно така, както е въведен в изходния HTML код, като запазва интервалите и прекъсванията на редовете. - **Списъци в HTML:** - **Подредени списъци ( \ ):** Използва се за номерирани списъци. - Елементите от списъка се дефинират с тага \. - Можете да персонализирате стила на номериране с помощта на атрибути. - **Неподредени списъци ( \ ):** Използва се за списъци с водещи символи. - Елементите от списъка се дефинират с тага \. - Можете да персонализирате стила на куршума с помощта на атрибути. - **Списъци с дефиниции ( \ ):** Използва се за списъци с термини и дефиниции. - \ : Дефинира термина. - \ : Дефинира дефиницията. **VII. Разширено форматиране на текст и други елементи** - **Етикети за форматиране на текст:** - \ или \ : Удебелен текст. - \ или \ : Текст в курсив. - \ : По-малък текст. - \ : Маркиран текст. - \ : Долен текст. - \ : Горен индекс. - Тези етикети често се заменят от CSS за повече контрол върху стила. - **Етикети за котировки:** - \ : Използва се за по-дълги цитати, обикновено с отстъп. - \ : Използва се за по-кратки, вградени цитати. - **Етикет за съкращение ( \ ):** - Определя съкращение или акроним. - Може да предостави пълна дефиниция с помощта на атрибута title. - **Адресен етикет ( \ ):** - Предоставя информация за контакт, обикновено за автора на уеб страницата. - Браузърите обикновено показват съдържанието на адреса в курсив. - **Хоризонтална линия ( \ ):** - Създава хоризонтална линия, често използвана за разделяне на съдържание. - **HTML обекти:** - Специални знаци, които не могат да се използват директно в HTML, като \< , \> и &. - Представени с помощта на имена на обекти или номера на обекти. - Пример: \< представлява \<. - **Кодови етикети:** - \ : Показва кодови фрагменти. - \ : Показва въвеждане от клавиатурата. - \ : Показва примерен изход от програма. - \ : Дефинира променлива в програмния код. - **Коментари в HTML:** - \ : Използва се за добавяне на коментари към HTML кода. - Коментарите не се показват в браузъра, но могат да бъдат полезни за документиране и отстраняване на грешки. **VIII. HTML5 структурни елементи** - **Нови структурни елементи в HTML5:** - \ : Дефинира тематичен раздел от съдържанието. - \ : Представлява самостоятелна част от съдържанието, като например публикация в блог или новинарска статия. - \ : Дефинира заглавната част на документ или раздел. - \ : Дефинира долния колонтитул на документ или раздел. - \ : Дефинира раздел, съдържащ връзки за навигация. - \ : Представлява съдържание, което е допирателно свързано с основното съдържание (напр. странични ленти). **IX. Хипервръзки и навигация** - **Хипервръзки в HTML:** - \ : Тагът за котва се използва за създаване на хипервръзки. - атрибут href : Указва URL адреса на свързания ресурс. - Пример: \Посетете Пример\ - **Видове хипервръзки:** - Абсолютни URL адреси: Посочете пълния адрес на ресурс. - Пример: https://www.example.com/page.html - Относителни URL адреси: Посочете пътя към ресурс спрямо текущия документ. - Пример: page.html (в същата директория),../images/image.jpg (едно ниво нагоре). - **Атрибути на хипервръзка:** - target : Указва къде да се отвори свързаният документ. - \_blank : Отваря връзката в нов раздел или прозорец. - \_self : Отваря връзката в същия кадър (по подразбиране). - \_parent : Отваря връзката в родителската рамка. - \_top : Отваря връзката в цялото тяло на прозореца. - **Свързване в рамките на един и същи документ:** - Използвайте атрибута id , за да създадете котва в документа. - Свържете се към котвата, като използвате атрибута href с \#, последван от ID на котвата. - Пример: \Отидете на раздел 1\ (свързване към елемент с id=\"section1\" ). **HTML развитие. Таблично и мултимедийно съдържание** **1. Разработване на HTML** - **Еволюция на HTML:** - Отвореност: HTML непрекъснато се развива, за да включва нови функции и стандарти. - Простота: Основният синтаксис на HTML е ясен и лесен за научаване. - Стриктност: Спазването на стандартите гарантира, че HTML документите се изобразяват последователно в различните браузъри. - Разширяемост: HTML може да бъде разширен чрез използването на други технологии, като XHTML и XML. - HTML5: Текущата и най-широко използвана версия на HTML, предлагаща изчерпателен набор от функции за създаване на модерни уеб страници. - **Добре оформени документи:** - Всички елементи трябва да бъдат правилно вложени един в друг, следвайки правилата на HTML синтаксиса. - Таговете и атрибутите трябва да се пишат с малки букви. - Декларацията DOCTYPE трябва да бъде посочена в началото на документа. - Елементите **html, head **и **body** са задължителни. - Заглавният елемент трябва да бъде поставен в рамките на главния елемент. - **HTML шаблони:** - Предварително дефинирани структури за общи HTML документи, осигуряващи отправна точка за създаване на уеб страници. - Примерите включват шаблони за XHTML документи и основни HTML5 документи. - **HTML валидатори:** - Инструменти, използвани за проверка на валидността на HTML кода спрямо дефинираните стандарти. - Помагат да се уверите, че HTML документите са добре оформени и отговарят на най-добрите практики. - Примерите включват W3C Markup Validation Service, Total Validator и разширения на браузъра. **2. HTML таблици** - **Цел:** - Използва се за организиране и показване на данни в структуриран формат с редове и колони. - Подобрете визуалното представяне на информацията, като я улесните за четене и разбиране. - **Основни етикети:** - **\**: Дефинира елемента таблица. - **\**: Представлява ред от таблица. - **\**: Дефинира клетка от таблица в ред. - **Атрибути:** - **Атрибути на таблицата:** - **align**: Указва хоризонталното подравняване на таблицата (ляво, централно, дясно, оправдаване, символ). - **bgcolor**: Задава цвета на фона на таблицата. - **border**: Определя ширината на границата на таблицата в пиксели. - **cellpadding**: Контролира пространството между съдържанието на клетката и границата на клетката. - **cellspacing**: Задава разстоянието между съседни клетки. - **width**: Указва ширината на таблицата в пиксели или като процент. - **height**: Определя височината на таблицата в пиксели или като процент. - **Атрибути на клетката:** - **align**: Указва хоризонталното подравняване на съдържанието на клетката (ляво, централно, дясно, оправдаване, символ). - **valign**: Задава вертикалното подравняване на съдържанието на клетката (горна, средна, долна, основна линия). - **colspan**: Позволява на клетка да обхваща множество колони. - **rowspan**: Позволява на клетка да обхваща множество редове. - **width**: Определя ширината на клетката в пиксели или като процент. - **height**: Указва височината на клетката в пиксели или като процент. - **Разширени етикети:** - **\**: Предоставя надпис за таблицата. - **\**: Групира една или повече колони в таблица за целите на форматирането. - **\**: Дефинира колона в елемент на \. - **\**: Представлява основното тяло на таблицата, съдържащо редове с данни. - **\**: Дефинира заглавката на таблицата, обикновено съдържаща заглавия на колони. - **\**: Представлява долния колонтитул на таблицата, често използван за обобщена информация. **3. Мултимедийно съдържание** - **Мултимедийна интеграция:** - HTML позволява вграждането на различни мултимедийни елементи за подобряване на уеб страниците. - Налични са специални тагове за различни видове мултимедия. - **Изображения:** - **img етикет:** Използва се за вграждане на изображения в HTML документи. - **Атрибути:** - **src**: Указва URL адреса или пътя към файла с изображение. - **alt**: Предоставя алтернативен текст за изображението, показва се, ако изображението не може да се зареди. - **width**: Задава ширината на изображението в пиксели или като процент. - **height**: Определя височината на изображението в пиксели или като процент. - **align**: Указва подравняването на изображението спрямо околния текст. - **Карти на изображения:** - Позволяват да се дефинират зони, върху които може да се кликне, в рамките на изображение, свързвайки различни URL адреси или действия. - Създаден с помощта на етикети за map и area. - **Аудио и видео:** - **\** таг: Използва се за вграждане на аудио файлове в HTML документи. - **\** таг: Използва се за вграждане на видео файлове в HTML документи. - **Атрибути:** - **src**: Указва URL адреса или пътя към аудио или видео файла. - **controls**: Добавя контроли за възпроизвеждане по подразбиране към аудио или видео плейъра. - **autoplay**: Започва автоматично възпроизвеждане на аудио или видео, когато страницата се зареди. - **loop**: Повтаря аудио или видео непрекъснато. - **width** и **height**: Определят размерите на видеоплейъра. - **preload**: Указва как аудиото или видеото трябва да бъдат предварително заредени (няма, метаданни, автоматично). - **Плъгини:** - Външни програми или компоненти, които разширяват функционалността на HTML, позволявайки показването на специализирано съдържание. - Примерите включват Flash плейъри, PDF визуализатори и Java аплети. - **\** и **\** тагове: Използва се за вграждане на съдържание на плъгини в HTML документи. - **Емотикони:** - Специални знаци, използвани за представяне на емоции или изрази в текст. - Кодиран с помощта на Unicode знаци. - Може да се включи в HTML документи чрез указване на кода на символа или използване на HTML обекти. - **Видеоклипове в YouTube:** - Може да се вгражда в HTML документи с помощта на етикета iframe. - **Атрибути:** - **src**: Указва URL адреса на кода за вграждане на видеоклип в YouTube. - **width** и **height**: Определят размерите на вградения видео плейър. - **allowfullscreen**: Позволява видеото да се гледа в режим на цял екран. **CSS** **1. Въведение в CSS** **Какво е CSS?** CSS означава Cascading Style Sheets и се използва за контрол на визуалното представяне на HTML документи. Позволява ви да отделите съдържанието (HTML) от презентацията (CSS), което прави уебсайтовете по-лесни за поддръжка и актуализиране. **Ползи от използването на CSS:** - **Опростен контрол:** CSS предоставя централно местоположение за управление на външния вид и усещането на уебсайт, което улеснява прилагането на последователен стил върху множество страници. - **Усъвършенствани техники за проектиране:** CSS позволява на разработчиците да прилагат сложни техники за проектиране, подобрявайки визуалната привлекателност и потребителското изживяване на уебсайтовете. - **Ефективно повторно използване:** Стиловете, дефинирани в CSS, могат да се използват повторно в различни HTML елементи и страници, намалявайки дублирането на код и подобрявайки поддръжката. - **Подобрена достъпност:** CSS може да се използва за подобряване на достъпността на уебсайтове за потребители с увреждания, което прави съдържанието по-лесно за възприемане и навигация. **2. Синтаксис и семантика на CSS** **Основна структура:** CSS правилата се състоят от селектор, който е насочен към HTML елементи, и блок за декларация, съдържащ двойки свойство-стойност. Блокът за декларация е ограден във фигурни скоби ({}), и всяка двойка свойство-стойност е разделена с двоеточие (:) и точка и запетая (;). **Селектори:** Селекторите определят към кои HTML елементи ще бъдат приложени стиловете. Има няколко вида селектори, включително: - **Семантични селектори:** Тези целеви елементи въз основа на името на техния HTML таг, като body, h1, p и т.н. - **Селектори на клас:** Тези целеви елементи със специфични атрибути на класа, позволяващи ви да прилагате стилове към множество елементи, независимо от името на етикета им. Селекторите на класове се обозначават с точка (.), последвана от името на класа. - **ID селектори:** Те са насочени към единичен уникален елемент със специфичен ID атрибут. Идентификационните селектори се обозначават с решетка (\#), последвана от името на идентификационния номер. - **Псевдоселектори:** Тези целеви елементи въз основа на тяхното състояние или позиция в документа, като например :hover (когато мишката се задържи над елемент), :first-child (първият елемент в рамките на родител) и т.н. **Свойства и стойности:** Свойствата дефинират конкретните стилове, които искате да приложите, докато стойностите определят желаните настройки за тези свойства. Например свойството color задава цвета на текста, а свойството font-size задава размера на шрифта. **3. Свързване на CSS към HTML** - **Външни таблици със стилове:** Предпочитаният метод е да създадете отделен CSS файл и да го свържете към вашия HTML документ, като използвате етикета \ в секцията \. Това ви позволява да управлявате стилове за множество страници на едно централно място. - **Вътрешни таблици със стилове:** Можете да вградите CSS правила директно в HTML документа, като използвате тага \ в секцията \. Това е подходящо за малки стилове, специфични за страница. - **Вградени стилове:** Стиловете могат да се прилагат директно към отделни HTML елементи с помощта на атрибута style. Това обикновено не се препоръчва, тъй като смесва съдържание и представяне, което го прави по-малко лесен за поддръжка. **4. CSS специфика и каскадиране** - **Специфичност:** Определя кои CSS правила имат предимство, когато множество правила са насочени към един и същ HTML елемент. Стиловете, дефинирани с по-специфични селектори, ще заменят тези с по-малко специфични селектори. - **Каскаден ред:** CSS правилата се прилагат в каскаден ред, като по-късните правила потенциално заменят по-ранните. Това ви позволява да дефинирате общи стилове и след това да ги замените с по-специфични стилове, ако е необходимо. - **Правило !important:** Ключовата дума !important може да бъде добавена към декларация за стойност на свойство, за да принуди този стил да замени всички други стилове, независимо от спецификата. Използвайте това с повишено внимание, тъй като може да направи таблиците със стилове по-трудни за поддръжка. **5. CSS единици и форматиране** - **Мерни единици:** CSS използва различни единици за определяне на размери, дължини и други измервания: - **Абсолютни единици:** Фиксирани стойности, като например пиксели (px), инчове (in) и сантиметри (cm). - **Относителни единици:** Стойности спрямо други измервания, като например проценти (%), ems (em) и мерни единици за прозорци (vw, vh). - **Форматиране на шрифтове:** CSS предоставя множество свойства за контролиране на външния вид на текста: - font-family: Задава шрифта на шрифта. - font-size: Контролира размера на шрифта. - font-weight: Указва удебелеността на текста. - font-style: Задава стила на шрифта (напр. курсив, наклонен). - text-align: Подравнява текста (ляво, дясно, центрирано, оправдано). - text-decoration: Добавя декорации към текста (напр. подчертаване, подчертаване). - text-transform: Преобразува регистъра на текста (напр. главни, малки букви). - **Цветно форматиране:** - Имена на цветове: Използвайте предварително дефинирани имена на цветове като „червено", „синьо", „зелено". - RGB стойности: Задайте цветове, като използвате червени, зелени и сини стойности (0-255). - RGBA стойности: Разширете RGB чрез добавяне на алфа канал за прозрачност (0-1). - Шестнадесетични стойности: Представяне на цветове с помощта на шестнадесетични кодове (напр. \#FF0000 за червено). - Стойности на HSL: Дефинирайте цветовете, като използвате стойности за нюанс, наситеност и светлота. **6. Работа със списъци, таблици и оформление** - **Списъци:** CSS ви позволява да контролирате външния вид на списъците, включително вида на точките, стила на номериране и позиционирането. - **Таблици:** CSS предоставя свойства за стилизиране на граници на таблици, разстояние, подложка и подравняване. - **Оформление:** CSS предлага различни техники за контрол на позиционирането и оформлението на елементите: - Модел на кутия: Всеки HTML елемент се третира като кутия със съдържание, подложка, рамка и поле. - Позициониране: Свойства като position, float и display ви позволяват да контролирате как елементите се позиционират в документа. - Гъвкаво оформление на кутия (Flexbox): мощен модул за оформление, който опростява подреждането и подравняването на елементи по отзивчив начин. (Не е изрично споменато в изходния документ, но е ключова концепция в съвременния уеб дизайн) - Grid Layout: Друг усъвършенстван модул за оформление, който позволява създаването на сложни, двуизмерни оформления с редове и колони. (Не е изрично споменато в изходния документ) **7. CSS примери и приложения** - **Практически примери:** Изходният документ включва пример стъпка по стъпка (Пример 4) за създаване на уеб страница с CSS стил. Прегледайте този пример, за да видите как концепциите се прилагат на практика. - **Адаптивен дизайн:** Въпреки че не са изрично обхванати в подробности, принципите на отзивчивия уеб дизайн са основни за съвременния CSS. Научете как да използвате медийни заявки, за да адаптирате вашите проекти към различни размери на екрана и устройства. **Цялостен уеб дизайн** **1. HTML семантични елементи** - **Разбиране на семантичния HTML:** Съвременният HTML се фокусира върху използването на семантични елементи за определяне на структурата и съдържанието на уеб страниците. Това означава да изберете HTML тагове, които точно описват предназначението на съдържанието, което включват. - **Ключови семантични елементи:** - \ : Определя заглавната част на уеб страница. - \ : Огражда връзки за навигация. - \ : Представлява самостоятелна част от съдържанието, като например публикация в блог или новинарска статия. - \ : Съдържа съдържание, което е допирателно свързано с основното съдържание, като странични ленти. - \ : Представлява долния колонтитул на уеб страница. - \ : Дефинира тематично групиране на съдържание в рамките на уеб страница. - \ : Създава интерактивна джаджа за разкриване, която може да показва или скрива съдържание. - \ : Осигурява видимо заглавие за съдържанието в \ елемент. - **Предимства на семантичния HTML:** - Подобрена достъпност: Помощните технологии могат да разберат по-добре структурата и съдържанието на уеб страниците. - SEO предимства: Търсачките могат по-точно да индексират и класират уебсайтове. - Поддържаемост на кода: Кодът е по-лесен за разбиране и поддръжка. **2. Адаптивен уеб дизайн** - **Определение:** Адаптивният уеб дизайн гарантира, че уеб страниците се адаптират към различни размери на екрана и устройства. Това включва коригиране на оформлението, размера на шрифта и размера на изображението, за да се осигури оптимално изживяване при гледане на настолни компютри, таблети и мобилни телефони. - **Важно:** Уеб сайтовете трябва да бъдат достъпни и удобни за използване на различни устройства поради нарастващото използване на смартфони и таблети. - **Техники:** - **Viewport:** - Прозорецът за изглед е видимата област на уеб страница на екрана на устройството. - Можете да контролирате прозореца за изглед, като използвате \ тага в HTML \. - Атрибутът width=device-width задава ширината на прозореца за изглед към ширината на устройството. - Атрибутът initial-scale=1.0 задава първоначалното ниво на увеличение. - **Течни решетки:** - Оформленията с решетъчен изглед разделят екрана на колони, като използват проценти, а не фиксирани стойности на пиксели. - Отзивчивите решетки позволяват елементите да се пренареждат и преоразмеряват въз основа на наличното пространство на екрана. - **Гъвкави изображения:** - Изображенията трябва да се преоразмеряват пропорционално, за да паснат на ширината на екрана. - Задаването на атрибута max-width на 100% гарантира, че изображенията не надвишават ширината на контейнера си. - **Медийни заявки:** - Медийните заявки използват CSS за прилагане на различни стилове въз основа на размера на екрана на устройството, ориентацията, разделителната способност и други характеристики. - Те ви позволяват да насочите конкретни диапазони на екрана и да приспособите дизайна съответно. **3. Конфигурация на Viewport** - **Цел:** Мета тагът на прозореца за изглед контролира как браузърът показва уеб страница на различни устройства. - **Синтаксис:**\ - **Атрибути:** - width=device-width : Задава ширината на прозореца за изглед, за да съответства на ширината на екрана на устройството. - initial-scale=1.0 : Определя първоначалното ниво на увеличение при зареждане на страницата. **4. Мрежов изглед** - **Отзивчиви грид системи:** Рамки като Bootstrap и Foundation предоставят предварително изградени адаптивни грид системи за опростяване на създаването на гъвкави оформления. - **Мрежова структура:** обикновено включва разделяне на екрана на 12 колони, като елементите заемат определен брой колони. - **CSS за мрежи:** - display: grid : Дефинира елемент като мрежов контейнер. - grid-template-columns : Указва броя и ширината на колоните на мрежата. - grid-gap : Задава разстоянието между елементите на мрежата. **5. Медийни заявки** - **Синтаксис** \@media (condition) { /\* CSS rules to apply when the condition is met \*/ } - **Общи условия:** - min-width и max-width : Насочете се към конкретни диапазони на ширината на екрана. - ориентация: пейзаж и ориентация: портрет : Приложете стилове въз основа на ориентацията на екрана. **Примери:** /\* Styles for screens wider than 600px \*/ \@media only screen and (min-width: 600px) { body { background-color: lightblue; } } /\* Styles for landscape orientation \*/ \@media only screen and (orientation: landscape) { body { background-color: lightgreen; } } **6. Отзивчиви изображения** - **Плавни изображения:** Изображенията трябва да се преоразмеряват пропорционално, за да паснат на ширината на екрана. - **Атрибут max-width:** Задаването на max-width: 100% предотвратява превишаването на ширината на контейнера на изображенията. - **височина: автоматично:** Задаването на височината на \"автоматично\" позволява на изображението да поддържа съотношението си при преоразмеряване. **7. Адаптивен текст** - **Единици за размер на шрифта:** Използвайте относителни единици като vw (ширина на прозореца за изглед) или em (спрямо основния размер на шрифта) за размери на шрифта. - **Пример:** font-size: 10vw; /\* Font size will be 10% of the viewport width \*/ **8. Навигация** - **Трансформиране на навигация:** CSS може да се използва за трансформиране на HTML списъци в навигационни менюта, вертикално или хоризонтално. - **Вертикална навигация:** - Използвайте дисплей: блок за вертикално подреждане на навигационни елементи. - Приложете стилове за подложки, полета, граници и цветове на фона, за да създадете желания външен вид. - **Хоризонтална навигация:** - Използвайте display: inline или float: ляво , за да позиционирате елементите за навигация хоризонтално. - Коригирайте подложките, полетата и други стилове, за да постигнете желаното оформление. - - **Адаптивна навигация:** - Използвайте медийни заявки, за да промените оформлението и поведението на навигацията въз основа на размера на екрана. - Помислете за използване на меню „хамбургер" за по-малки екрани, за да спестите място. **9. Падащо меню** - **Изпълнение:** - Използвайте структура на вложен списък (\ и \), за да създадете падащото меню. - Приложете CSS стилове, за да скриете съдържанието на падащото меню първоначално и да го разкриете при задържане или щракване. - **CSS класове:** - падащо меню : Приложено към основния елемент от списъка, съдържащ падащото меню. - dropdown-content : Приложен към елемента на вложен списък, представляващ падащото съдържание.