Теоретический блок

1.

ТЕХНОЛОГИИ ВЕБПРОГРАММИРОВАНИЯ
Докладчик
Исаков Дмитрий Николаевич
Старший преподаватель

2.

СТРУКТУРА КУРСА:
1.
2.
3.
4.
5.
6.
7.
8.
Основы веб-технологий;
Структура веб-страницы, HTML;
Визуальное оформление веб-страниц, CSS;
Изображения и мультимедиа;
Скрипты на веб-страницах, JavaScript;
Создание динамических веб-страниц;
Создание простого веб-сайта, FTP, CMS;
Работа с базами данных.
Курс
Лекционная часть
Практическая часть

3.

ЛЕКЦИЯ №1
Основы веб-технологий

4.

ЧТО ТАКОЕ
ИНТЕРНЕТ?

5.

ЧТО ТАКОЕ
ИНТЕРНЕТ?
- это глобальная международная сеть
компьютеров, соединенных через
коммуникационные протоколы и
технологии.

6.

В ЧЕМ
ЗАКЛЮЧАЕТСЯ
ОСНОВНАЯ ЗАДАЧА
ИНТЕРНЕТА?

7.

ОСНОВНАЯ ЗАДАЧА
ИНТЕРНЕТА:
— передача данных и
обеспечение круглосуточной и
высоконадёжной связи между
устройствами, подключёнными к
интернету.

8.

ИСТОРИЯ ИНТЕРНЕТА
Развитие интернета началось в 1960-х годах с появлением ARPANET - проекта
военного ведомства США, направленного на создание системы
распределенной связи. В дальнейшем, было разработано множество
коммуникационных протоколов и технологий, которые привели к созданию
современного интернета.
интернет = множество компов, соединенных проводами, с определенными правилами передачи данных

9.

КЛАЙВ СИНКЛЕР
Синклер известен в основном как
создатель компьютера ZX Spectrum, клоны
которого стали популярны в России в
начале 90-х.
Устройство оказало значительное влияние
на популяризацию гейминга, игровую
индустрию и распространение дешёвых
домашних компьютеров.

10.

КАК ВЫГЛЯДИТ ИНТЕРНЕТ?

11.

ЦОД
Центр обработки данных (ЦОД, дата-центр) — это специализированное здание
или комплекс, предназначенный для хранения, обработки и передачи данных.
Почему передатчики расположены именно по экватору?
Передатчики (спутники) расположены над экватором Земли на
геостационарной орбите (ГСО). Это круговая орбита, на которой искусственный
спутник обращается вокруг планеты с угловой скоростью, равной угловой
скорости вращения Земли вокруг оси.

12.

ЦОД

13.

ИНТЕРНЕТ-КАРТЫ
Интернет-карточки— это
пластиковые или бумажные
карточки с паролем для
почасовой оплаты доступа в
Интернет.
На карточке записаны реквизиты
(пароль и логин, код доступа и прочая
необходимая информация) и её
номинал (сумма предоплаченного
времени работы в Сети).

14.

DIAL-UP МОДЕМ
Dial-up-модем — это устаревший тип коммутируемого доступа к интернету, при котором компьютер
подключается к сети через модем и телефонную линию общего пользования.
С помощью dial-up устанавливается сеанс передачи данных, например, для доступа в интернет. Модем
преобразовывает цифровые данные в аналоговый сигнал и передаёт его по телефонной линии.

15.

ПЕРВЫЙ MAC
Macintosh 128K — первый
персональный компьютер
Apple семейства Macintosh,
выпущенный 24 января 1984
года.
Это был моноблочный
компьютер, в корпусе которого
заключён 9-дюймовый
монохромный экран, дисковод
и материнская плата.

16.

КАК ВЫГЛЯДИТ ИНТЕРНЕТ?

17.

DNS-СЕРВЕР
DNS-сервер (Domain Name System) — это узел системы доменных имён
(DNS), который обрабатывает запросы пользователей и возвращает
нужные адреса.
Простыми словами, DNS-сервер — это «переводчик», который
связывает привычные названия сайтов (домены) с их реальными IPадресами — длинными комбинациями чисел, которые используются
для связи.

18.

DNS-СЕРВЕР

19.

DNS-СЕРВЕР

20.

КЛИЕНТ-СЕРВЕРНАЯ АРХИТЕКТУРА
Клиент - это компьютер, запрашивающий некоторую функцию или данные у
сервера (ноутбук, смартфон или бортовой компьютер в автомобиле).
Сервер - это компьютер, на котором хранятся данные, или который
выполняет определенные служебные функции для других компьютеров сети.

21.

ВЕБ-ПРИЛОЖЕНИЕ
Веб-приложение — клиент-серверное приложение, в котором клиент
взаимодействует с веб-сервером при помощи браузера. Логика вебприложения распределена между сервером и клиентом, хранение данных
преимущественно происходит по сети.
Браузер — это программа для просмотра веб-страниц. Она преобразует
получаемый из сети код в понятные для человеческого восприятия элементы
и позволяет управлять ими.
Название происходит от английского слова “browse” — просматривать.

22.

ЛЕКЦИЯ №2
Основы веб-технологий/ продолжение

23.

ПЕРЕДАЧА ДАННЫХ
Передача данных (обмен данными, цифровая передача,
цифровая связь) — процесс перемещения информации из одной
точки в другую с помощью технических средств и по
определённым протоколам.
Передача данных (информации) состоит из двух аспектов:
1. Физический аспект (среда передачи)
2. Протокол.
*протоколов может быть множество

24.

МОДЕЛЬ OSI
Модель OSI (Open Systems
Interconnection) —
концептуальная модель,
описывающая передачу данных
между сетевыми устройствами.
Разработана Международной
организацией по
стандартизации (ISO) в 1984
году.

25.

МОДЕЛЬ OSI
1.Физический — отвечает за передачу битов через физическую
среду (кабели, радиоволны).
2.Канальный — обеспечивает надёжную передачу данных по
физическому каналу, объединяет данные в кадры (фреймы),
контролирует ошибки и управляет доступом к среде передачи.
3.Сетевой — организует маршрутизацию пакетов между
устройствами, определяет пути, по которым данные передаются из
одной сети в другую.
4.Транспортный — обеспечивает надёжную передачу данных
между конечными точками, разбивает данные на сегменты,
контролирует их доставку и управляет ошибками.
5.Сеансовый — управляет сессиями между приложениями,
устанавливает, поддерживает и завершает сессии, обеспечивает
синхронизацию и восстановление сеансов при необходимости.
6.Представительный — отвечает за преобразование данных в
формат, подходящий для приложения, выполняет сжатие данных,
шифрование и преобразование кодировок.
7.Прикладной — обеспечивает взаимодействие пользователя с
сетью, предоставляет услуги и интерфейсы для приложений, таких
как электронная почта, веб-браузеры и файловые сервисы.

26.

МОДЕЛЬ OSI
В модели OSI уровни взаимодействуют по
двум направлениям:
1. Вертикальное взаимодействие —
между соседними уровнями в одной
системе. Каждый уровень предоставляет
услуги вышестоящему уровню и
использует услуги нижестоящего через
определённые интерфейсы.
2. Горизонтальное взаимодействие —
между одинаковыми уровнями разных
систем. Реализуется через протоколы,
которые определяют правила обмена
данными между одноимёнными уровнями.

27.

ПРОТОКОЛЫ
Протоколы — это правила в
интернете,
по
которым
устройства с разными
операционными системами и
программным
обеспечением
обмениваются
данными.

28.

IP-АДРЕС
IP-адрес (Internet Protocol Address) — уникальный номер устройства, который
присваивается ему при подключении к интернету или локальной сети.
IP-адреса делятся по диапазонам

29.

АДРЕСАЦИЯ

30.

КАК РАБОТАЕТ ИНТЕРНЕТ- ЗАПРОС?
Интернет-запрос работает по
принципу «запрос-ответ». Клиент
(обычно браузер) отправляет запрос
серверу, а сервер обрабатывает его и
отправляет обратно
Процесс взаимодействия
осуществляется по модели «клиентсервер»: коммуникация начинается с
клиента, а сервер только реагирует
на запросы.

31.

ДОМЕННОЕ ИМЯ САЙТА
Домен или доменное имя — это название, которое есть у каждого сайта в
интернете.

32.

ДОМЕНЫ ВЕРХНЕГО УРОВНЯ

33.

КАК ПОЛУЧИТЬ ДОМЕН?
Покупка домена — это устоявшееся выражение. На самом деле происходит регистрация
домена — аренда выбранного имени на срок от одного года до десяти лет.
Аренду можно продлить.
Длительность аренды и порядок продления зависят от выбранной доменной зоны.
Например, имена в зонах .ru, .рф, .su можно арендовать максимум на год, а потом
ежегодно продлевать. Нужную информацию по каждой доменной зоне можно найти на
сайте регистратора доменных имён.
Арендовать домен можно у аккредитованной компании регистратора доменов
(например Reg.ru )

34.

О ЧЕМ НУЖНО ПОДУМАТЬ ПЕРЕД ПОКУПКОЙ
ДОМЕНА?
У доменов может быть «история». Поэтому перед покупкой нужно проверить, какие сайты раньше были
на домене и не попал ли сайт под фильтры поисковых систем.
Проверить домен можно на сайтах: whois.com и archive.org
Рекомендация по выбору домена:
1. Короткое.
2. Запоминающееся.
3. Легкое для произношения.
4. Без сложных для транслитерации букв и сочетаний.
5. Совпадает с тематикой сайта.
6. Включает в себя название компании или бренда.
7. Не содержит цифр.

35.

IP-АДРЕСА
IP-адрес — это строка из четырёх чисел (октетов), разделённых точками. В этих числах
зашифрована информация о местоположении сервера с файлами сайта.
Каждое доменное имя привязано к IP-адресу. Например, домену urfu.ru соответствует адрес
93.88.179.200
Соответствие между доменными именами и IP-адресами устанавливает DNS-сервер
(Domain Name System).

36.

37.

ЗАДАНИЕ
КОНЦЕПТ САЙТА

38.

СТРУКТУРА КОНЦЕПЦИИ:

39.

ПРИМЕР

40.

ЛЕКЦИЯ №4
HTML

41.

ТЕРМИНЫ
Веб-страница — это документ, написанный на языке разметки гипертекста
(HTML), который можно просмотреть с помощью браузера. Доступ к вебстранице осуществляется путем ввода URL-адреса.
Веб-сайт — коллекция веб-страниц, связанных между собой какими-либо
способами.
Поисковая система — веб-сайт, помогающий в поиске других веб-страниц,
например такие как: Яндекс, Google, Bing или Yahoo.

42.

43.

ЧТО ТАКОЕ HTML?
HTML (HyperText Markup Language) – это не язык программирования (как, например, Python), а
так называемый язык разметки. Он необходим для сообщения браузеру способа отображения
посещаемой вами веб-страницы.
Вместо того, чтобы показывать сплошной текст, HTML позволяет обернуть его в специальные
элементы (теги). Это обеспечивает особое поведение передаваемой информации: она может
выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и
иных мультимедиа-данных.
Теги способны нести как структурный смысл (например, показать, что перед нами таблица
некоторой размерности с заголовком), так и семантический (выделить информацию
определенным образом для поисковых роботов, чтобы те лучше индексировали ваш сайт, или
браузеров).

44.

ПРАВИЛА ЯЗЫКА HTML
1.
Весь документ набирается только текстовыми символами (их коды понятны всем
редакторам), т. е. его можно набрать в любом текстовом редакторе (например,
"Блокнот", "WordPad");
2.
Символы и конструкции, которые непонятны браузеру, игнорируются;
3.
В текст документа можно добавлять разнообразные команды, которые указывают, как
следует изображать на экране тот или иной фрагмент текста, или обеспечивают
спецэффекты. Эти команды называют тегами. Они так же, как и документ, набираются
текстовыми символами, но отделяются от него угловыми скобками: < >;
4.
Файлы c HTML-кодом должны помечаться расширением .html или .htm

45.

СТРУКТУРА ТЕГОВ
• Каждый тег обязательно содержит пару угловых скобок < >, между которыми находится
ключевое слово, обозначающее основную функцию тега.
• Например, ключевое слово HR в теге <HR> означает, что тег вставляет в документ серую
горизонтальную линию (Horizontal Row) по всей ширине страницы и толщиной в один
пиксел.
• Действие тега детализируется с помощью атрибутов.
• Например, применительно к тегу <HR> можно уточнить, какой длины, толщины и цвета
должна быть линия.

46.

СТРУКТУРА ТЕГОВ
• Атрибуты размещают после ключевого слова и перечисляют в
произвольном порядке через пробел.
• После каждого атрибута ставят знак = и нужное значение.
• Например, тег <HR WIDTH=50% SIZE=4> означает, что в документ следует
вставить горизонтальную линию, которая должна доходить только до
середины строки и иметь ширину не один, а четыре пиксела.

47.

СТРУКТУРА ТЕГОВ
Многие теги являются парными:
Открывающий тег включает какое-нибудь действие, закрывающий прекращает его.
В этом случае ключевое слово у обоих тегов одинаковое, но в открывающем теге
дополнительно перечисляются все необходимые атрибуты, а в закрывающем атрибутов
нет, и перед ключевым словом ставится знак /.
Парные теги называются контейнерами.
Например, контейнер <B>Я изучаю язык HTML</B> означает, что текст Я изучаю язык HTML
следует изобразить жирным шрифтом, а дальнейшие символы – так, как до него.

48.

СТРУКТУРА ТЕГОВ

49.

СТРУКТУРА ТЕГОВ

50.

СТРУКТУРА ТЕГОВ

51.

СТРУКТУРА ДОКУМЕНТА HTML

52.

СТРУКТУРА ДОКУМЕНТА HTML

53.

ЛЕКЦИЯ №5
CSS

54.

ЧТО ТАКОЕ CSS?
CSS (Cascading Style Sheets)
CSS используется для определения стилей (правил) оформления
документов — включая дизайн, вёрстку и вариации макета для различных
устройств и размеров экрана.
Синтаксис CSS
Сначала прописывается селектор — он выбирает конкретный элемент на
странице. Потом, после фигурных скобок, указываются свойства со значениями
— между ними ставится двоеточие. Сами свойства отделяются друг от друга
точкой с запятой.

55.

ВИДЫ CSS

56.

СОСТАВНЫЕ СЕЛЕКТОРЫ

57.

СПОСОБЫ ПОДКЛЮЧЕНИЯ

58.

ТЕГИ <div> и <span>
div является блочным элементом, который обычно используется для группировки содержимого в
блоке. Это может быть использовано для определения секций сайта, таких как заголовок, контент,
подвал и т.д. и может быть использован для назначения стилей через CSS.
span является строчным элементом, который обычно используется для группировки мелких частей
текста или другого содержимого внутри блочного элемента. Это может быть использовано для
назначения стилей на отдельный фрагмент текста или другого содержимого без затрагивания
остального содержимого. Например, может быть использован для изменения цвета только
определенного слова в предложении.
Оба эти элемента могут быть использованы в сочетании с CSS для создания более сложных и
динамичных дизайнов веб-страниц.

59.

РЕКОМЕНДАЦИИ
1. Используйте <div> и <span> для группировки и стилизации содержимого.
2. Выносите стили в отдельный .css файл, не нужно всё писать в .html.
3. Лучше использовать селекторы по классу, чем по идентификатору, так как они гибче:
1. Один id можно использовать на странице один раз.С классами стили можно переиспользовать.
2. Элемент может иметь только один id, а классов - сколько угодно.
3. У селектора по id высокий приоритет, поэтому классами перебить селектор с id не получится. Чтобы
переопределить или расширить стиль, придётся использовать этот же id (это не всегда может быть удобно),
либо вообще выкидывать старый и делать новый.
4. Не забывайте, что есть справочники по CSS, где можно найти нужное свойство.