НАУЧНИ ТРУДОВЕ НА РУСЕНСКИЯ УНИВЕРСИТЕТ - 2012, том 51, серия 6.1
- 66 -
Обзор на основните технологии и
инструменти за уеб дизайн Валентина Войноховска, Светлозар Цанков
Abstract: Web designer’s toolbox and technologies – theoretical overview: The paper describes the three core components of a web page (HTML, CSS and JavaScript) and introduces some tools the designers need to build one.
Key words: web design,
web technologies, web designer’s toolbox.
ВЪВЕДЕНИЕ В УЕБ ТЕХНОЛОГИИТЕ HTML, CSS И JAVASCRIPT
Всяка уеб страница е комбинация от HTML, CSS и JavaScript – код. Без значение какво се случва между клиента (компютъра на потребителя) и
сървъра (компютъра, който съхранява информацията за уеб страницата), тези три технологии работят съвместно за визуализиране и представяне на съдържанието
(текст, изображения, видео или анимация) от браузъра. Независимо дали страницата е създадена с използване на ASP, PHP, MySQL, Python, Java
или друга сървърна технология, браузърът използва една от тези три основни уеб технологии за визуализиране на съдържанието на екрана.
Фиг. 1. Три основни уеб технологии за визуализиране на съдържанието на екрана
Уеб страницата е съвкупност от различни обекти, създадени с използване на
HTML и представени с Document Object Model (DOM). Накратко казано DOM е
модел на всичките елементи, които съставляват уеб страницата - карта на всички отделни части. Всяка от трите гореспоменати технологии има своя роля за съставяне на тази карта:
•
HTML дефинира обекти. Всеки html таг създава нов обект в страницата, който CSS ще стилизира, а JavaScript може да промени.
Например,
заглавието, параграфа и изображението са обекти.
•
CSS стилизира обектите. HTML таговете може да се стилизират поотделно или като група, като на всеки обект се дава уникално име, наречено id.
•
JavaScript променя обектите. Позволява да се направи стил или друга промяна към всеки обект, създаден с HTML таг. Например, обектът може да се покаже, да се скрие или да се смени цвета му и т.н.
НАУЧНИ ТРУДОВЕ НА РУСЕНСКИЯ УНИВЕРСИТЕТ - 2012, том 51, серия 6.1
- 67 -
Фиг. 2. DOM (Document Object Model) – Обектен модел на документи
1. HTML и CSS
HTML структурира уеб страницата с помощта на тагове. Таговете „казват“ на браузъра какво представлява конкретното съдържание. CSS, от
своя страна, „казва“ на браузъра как ще изглежда това съдържание. Различните елементи в страницата се маркират по различен начин. Параграфите с
…
, таблиците с
, списъците с
… 
