Знакомство с

технологиями WEB
разработки

Урок 1
Веб-программирование — раздел программирования,
ориентированный на разработку веб-приложений (программ,
обеспечивающих функционирование динамических сайтов
Всемирной паутины). Языки веб-программирования — это языки,
которые в основном предназначены для работы с веб-
технологиями.
 Введение в веб-разработку
• Веб-разработка — это процесс создания и поддержки
веб-сайтов и веб-приложений. Она сочетает в себе
технологии, дизайн и программирование, обеспечивая
доступность и функциональность веб-ресурсов для
пользователей через интернет.
• В современном мире веб-разработка играет ключевую
роль, так как интернет стал неотъемлемой частью жизни
людей. Веб-сайты используются для общения, обучения,
ведения бизнеса, развлечений и многого другого. Важно
понимать основы веб-разработки, чтобы создать
качественный, удобный и функциональный продукт.
Браузер — это программа просмотра
информационных ресурсов WWW на
компьютере, подключенном к
Интернету. Современные программы
браузеров работают в соответствии со
спецификацией HTML, содержат
интерпретаторы языков сценариев
(VBScript, JavaScript), поддерживают
динамическую объектную модель
(Dynamic HTML) и т.д.
 Технологии
Front end – клиентская Back end – серверная
часть. Все, что браузер часть. Все, что работает
может читать, выводить на сервере.
на экран и / или
запускать.

Формирование макета сайта, шаблонов, Серверная составляющая создания веб-

интерфейса и скриптов, которые отвечают ресурса - разработка ядра, платформы, а
за визуализацию. На этом этапе разработки также административной и
также выполняется CSS-верстка. функциональной составляющей.
 Технологии

 HTML5  SQL
 CCS3  C#
 JavaScript  ASP.NET
 Jquery  PHP
 BootStrap
 Три кита Front end
HTML – язык разметки гипертекста, набор тегов,
определяющих расположение элементов на
WEB-странице

CCS – каскадные таблицы стилей – надстройка к

HTML для создания оформления WEB-страницы

JavaScript – язык программирования,

исполняющий программы на устройстве
пользователя. Объектно-ориентированный,
интерпретируемый.
 dy>
o <h
<b HTML ea
H1> d>
< <h
tm
l>

HTML (от англ. HyperText Markup Language —

«язык гипертекстовой разметки») —
стандартизированный язык разметки
документов во Всемирной паутине.
Большинство веб-страниц содержат описание
разметки на языке HTML(или XHTML).

P E ht ml>
TY
<!DOC
HTML-документ — это просто текстовый файл с расширением *.html. Давайте
попробуем создать наш первый HTML документ, посмотрим на его строение и
конечно же на его отображение в браузере..
Для этого нам понадобится самый обычный текстовый блокнот и браузер
Сохранив изменения в Блокноте, просто нажмите кнопку F5
('перезагрузить') в IE, чтобы увидеть эти изменения
реализованными в HTML-документе.
Гипертекст - это способ организации
текста, графики и других данных, при
котором элементы данных связаны
между собой. Связанными могут быть
как элементы одного документа, так
и элементы различных документов.
Гипертекстовая структура лежит в
основе World Wide Web.
 Web-сервер - это компьютер,
подключенный к Интернету, на котором
выполняется специальная программа,
обеспечивающая обработку запросов
клиентов и выдающая клиентам
различные страницы с информацией.

(Uniform Resource Locator - унифицированный

локатор ресурса) - это уникальный адрес
файла в Интернете, хранящегося на хост-
компьютере, подключенном к Интернету. С
помощью URL, независимо от протокола
доступа, может быть найдена любая
информация в Интернете.
 CSS

Правила CSS пишутся на формальном языке CSS и располагаются в таблицах

стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы
стилей могут располагаться как в самом веб-документе, внешний вид
которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По
сути, формат CSS — это обычный текстовый файл. В файле .css не содержится
ничего, кроме перечня правил CSS и комментариев к ним.)
То есть, эти таблицы стилей могут быть подключены, внедрены в
описываемый ими веб-документ четырьмя различными способами:

• когда таблица стилей находится в отдельном файле, она может быть

подключена к веб-документу посредством тега <link>, располагающегося в
этом документе между тегами <head> и </head>. (Тег <link> будет иметь
атрибут href, имеющий значением адрес этой таблицы стилей). Все
правила этой таблицы действуют на протяжении всего документа;
• когда таблица стилей описана в самом документе, она может располагаться
в нём в теле какого-то отдельного тега (посредством его атрибута style) этого
документа. Все правила этой таблицы действуют только на содержимое
этого тега.
JavaScript обычно используется как встраиваемый язык для программного
доступа к объектам приложений. Наиболее широкое применение находит в
браузерах как язык сценариев для придания интерактивности веб-страницам.

Встраивание в веб-страницы

Расположение внутри страницы:

Для добавления JavaScript-кода на страницу, можно использовать теги
<script></script>, которые рекомендуется, но не обязательно, помещать
внутри контейнера <head>. Контейнеров <script> в одном документе может
быть сколько угодно.
Область применения
• Браузерные операционные системы
Пользовательские скрипты в браузере
Пользовательские скрипты в браузере — это программы, написанные на
JavaScript, выполняемые в браузере пользователя при загрузке страницы.
Они позволяют автоматически заполнять формы, переформатировать
страницы, скрывать нежелательное содержимое и встраивать
желательное для отображения содержимое, изменять поведение
клиентской части веб-приложений, добавлять элементы управления на
страницу и т. д.
• Виджеты
Виджет — вспомогательная мини-программа, графический модуль
которой размещается в рабочем пространстве соответствующей
родительской программы (англ.), служащая для украшения рабочего
пространства, развлечения, решения отдельных рабочих задач или
быстрого получения информации из интернета без помощи веб-
браузера.
Этапы создания сайта
Создание сайта — это пошаговый процесс, который
включает в себя следующие этапы:

•Планирование:
•Определение целей сайта
(информационный, коммерческий,
образовательный).
•Анализ целевой аудитории (возраст,
интересы, уровень подготовки).
•Разработка структуры и прототипа сайта
(скетчи, каркасы страниц).
•Дизайн:
•Создание визуального оформления
страниц.
•Выбор цветовой палитры, шрифтов и
изображений.
•Использование инструментов для
дизайна: Figma, Adobe XD, Canva.
•Разработка:
•Front-end: создание HTML-структуры,
добавление стилей CSS, подключение
интерактивных элементов через JavaScript.
•Back-end: настройка серверной логики и
взаимодействия с базами данных.
•Тестирование:
•Проверка функциональности сайта
(правильность работы кнопок, ссылок, форм).
•Оптимизация производительности (скорость
загрузки страниц, адаптивность).
•Устранение ошибок.
 Программное обеспечение

Браузер – программа для просмотра WEB-страниц

Редактор кода – программа для верстки

WEB-страниц

Графический редактор – программа для

отрисовки макета WEB-страницы