2.72M

Категория:

Интернет

Похожие презентации:

Всемирная паутина

Глобальная переменная $_SERVER

Введение в язык разметки HTML

World Wide Web – Всемирная Паутина

Всемирная паутина. Компьютерные телекоммуникации

Интернет-технологии

Введение в язык разметки HTML

Всемирная паутина (WWW)

Язык разметки гипертекста HTML

Основы интернета. Веб-сервер

Всемирная паутина

Всемирная паутина
World Wide Web, WWW – распределенная информационная система,
предоставляющая доступ к гипертекстовым документам по
протоколу HTTP
В основе лежит ТЕХНОЛОГИЯ "КЛИЕНТ-СЕРВЕР"
WWW — сетевая технология прикладного уровня стека TCP/IP,
построенная на клиент-серверной архитектуре и использующая
инфраструктуру Интернет для взаимодействия между сервером и
клиентом
Создана в CERN (European Organization for Nuclear Research /
Европейский центр физики высоких энергий) в 1992 г.
Тим Бернерс-Ли — «отец» Всемирной паутины

3.

Основные понятия
Технология “Клиент-Сервер” (1)
Сервер – устройство или программа, которая обладает некоторым
разделяемым (коллективно используемым) ресурсом
Вычислительные серверы – это серверы, обеспечивающие
вычислительные мощности
Серверы печати – серверы, управляющие совокупностью
принтеров
Дисковые серверы – серверы, предоставляющие дисковое
пространство в сети
Web-серверы – серверы, управляющие набором Web-страниц

4.

Основные понятия
Технология “Клиент-Сервер” (2)
Клиент – устройство или программа (любой другой объект), которая
желает получить доступ к специфическому ресурсу
Сервер – постоянно доступный ресурс
Клиент обычно “отключается” после того, как обслужен сервером
Концепция работы сервера:
сервер может обслуживать несколько клиентов одновременно
каждый сеанс уникален

5.

Основные понятия
Web-сервер – программа, выполняющаяся на хосте и
обслуживающая запросы клиентов на доступ к ресурсам Web Web-страницам и объектам, с ними связанных
Хост – устройство, узел, компьютер, имеющий соединение с Интернет
Web-страница – документ на языке HTML, которые может
содержать любые виды данных: текст, графику, звук, видео и
анимацию. Web-страница размещается на Web-сервере
Совокупность взаимосвязанных Web-страниц именуется Webсайтом

6.

Основные понятия
Web-браузер – (от англ. browse - просматривать) программа,
выполняющаяся на клиентском хосте, запрашиваюшая по
протоколу у сервера Web-страницы и представляющая их
содержимое пользователю
Протокол – совокупность определений, соглашений,
правил, регламентирующий формат и процедуры обмена
информацией
между
двумя
или
несколькими
независимыми устройствами или процессами
Сценарий или скрипт – программа на специализированном
языке программирования, выполняющаяся в режиме
интерпретации. Сценарий, выполняемый под управлением
Web-браузера, именуется клиентским, выполняемый под
управлением Web-сервера - серверным.

7.

Основные понятия
URL - Uniform Resource Locator
Абсолютный URL полностью описывает расположение
ресурса
в
глобальной
сети
протокол://адрес_узла[:порт]/путь/файл[?парам][#метка
]
протокол – обозначение одного из протоколов,
используемых для обращения к ресурсу, возможные
значения: http, ftp
адрес_узла – доменное имя или IP-адрес компьютера в
сети Интернет
порт – порт, по которому клиент обращается к серверу для
установления соединения: 80 – HTTP, 443
путь – путь к требуемому ресурсу в файловой системе
файл – имя файла, содержащего HTML-документ или другой
ресурс

8.

Связь клиента с сервером
HTTP (англ. HyperText Transfer Protocol) — протокол прикладного уровня передачи
данных, в настоящий момент используется для передачи произвольных данных.
Основой HTTP является технология «клиент-сервер», то есть предполагается
существование:
• клиентов, которые инициируют соединение и посылают запрос;
• серверов, которые ожидают соединения для получения запроса, производят
необходимые действия и возвращают обратно сообщение с результатом.

9.

Сеанс взаимодействия пользователя с
Web-сервером
1. Пользователь вводит в браузер URL запрашиваемой Web-страницы.
2. Браузер инициирует запрос к серверу.
3. Загрузка страницы и ее содержимое отображается на экране пользователя (3а).
4. В процессе интерпретации страницы браузер запрашивает объекты, ссылки на которые та содержит
(рисунки, аудиофайлы, видеоклипы и т.п.)
5. Запрошенные объекты передаются с сервера и отображаются браузером.
6. Пользователь вводит необходимую информацию посредством элементов пользовательского
интерфейса, расположенных на текущей Web-странице.
7. Введенные данные пересылаются браузером серверу.
8. На стороне сервера исполняется серверный сценарий либо серверное приложение(при
необходимости).
9. Результат работы приложения/сценария пересылается браузеру;
10. Результат работы приложения/сценария отображается на экране пользователя.

10.

Рабочий процесс web-сервера

11.

Программное обеспечение
Браузеры :
Серверное программное
обеспечение:
Google Chrome
Mozilla Firefox
Safari
Edge+Internet Explorer
Яндекс
Apache
Nginx
Microsoft IIS
…
Локальный web-сервер:
XAMPP
OpenServer
…

12.

Протокол HTTP(S)

13.

Обзор протокола HTTP(S)
HTTP-транзакция
–
однонаправленное,
логически
завершенное действие между Web-сервером и браузером
(запрос браузера, ответ сервера) Заголовки — сведения о
клиенте и посылаемом информационном объекте
Формат HTTP-транзакции:
1. Строка запроса/ответа (строка состояния)
2. Заголовки запроса/ответа (может быть неск.строк)
3. Тело запроса/ответа

14.

HTTP(S), запрос клиента
Строка запроса — HTTP-метод, URI, номер версии HTTP
2. Заголовки — сведения о клиенте и посылаемом
информационном объекте
[Пустая строка]
3. Тело запроса — содержимое, собственно данные
1.
Пример запроса клиента (браузера) к серверу:
GET /index.html HTTP/1.1
User-Agent: Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9b5)
Gecko/2008050509 Firefox/3.0b5
Accept: text/html
[пустое тело запроса]

15.

HTTP(S), методы
МЕТОД
ОПИСАНИЕ
GET
Запрос информации, расположенной по данному URI
HEAD
Запрашивает только информацию заголовков ресурса (информацию о
документе без пересылки его содержимого).
POST
Пересылает данные на сервер в теле запроса
LINK
Связывает информацию заголовка с документом на сервере
UNLINK
Отменяет связь информации заголовка с документом на сервере
PUT
Помещает тело запроса по указанному URI
DELETE
Удаляет данные, находящиеся на сервере по указанному URI
OPTIONS
Запрашивает данные о коммуникационных параметрах сервера
TRACE
Выставляет требование, чтобы тело запроса было возвращено без
изменений. Используется для отладки.

16.

HTTP(S), ответ сервера
1.
Строка ответа — версия HTTP, код завершения, информация
2.
Заголовки — сведения о сервере и передаваемой информации
3.
[Пустая строка]
4.
Тело ответа — содержимое
Пример ответа сервера:
HTTP/1.0 200 OK
Server: nginx/0.6.31
Content-Type: text/html; charset=utf-8
Content-Language: ru
Content-Length: 1234
Connection: close
... КОД WEB-СТРАНИЦЫ ...

17.

HTTP(S), коды ответов сервера
Диапазон кодов
Значение ответов
100—199
Информационный
200—299
Запрос клиента успешен
300—399
Запрос клиента переадресован, необходимы дальнейшие
действия
400—499
Запрос клиента является неполным
500—599
Ошибки сервера

18.

Передача данных в GET и POST
запросах
Данные могут передаваться на сервер с помощью запросов
• путем отправки html-форм
• путем формирования запроса клиента средствами JavaScript
Данные передаются в виде пар имя=значение, разделенных между собой &:
имя=значение&имя1=значение1&...&имяN=значениеN
где
• имя - имя элемента формы (значения атрибутов NAME из оператора
FORM)
• значение - ее реальное значение.
Перед отправкой данных браузером они подвергается URL-кодированию:
• спецсимволы (символы, применяемые для HTML-разметки)
заменяются своими шестнадцатиричными эквивалентами (численные
значения вида %DD);
• Пробел может быть заменен символом ‘+’.

19.

Особенности GET-запроса
1. Строка запроса — HTTP-команда(метод), URI, номер версии HTTP
GET prog.php?cat=pers&dog=cocker HTTP 1.1
2. Заголовки запроса(могут отсутствовать)
User-Agent: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.17
(KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
3. Тело запроса
Пусто
При передаче информации по методу GET, данные передаются путем
присоединения к URL после знака ‘?’ в виде пар имя=значение,
разделенных между собой знаком &. При этом применяется URLкодирование. Тело запроса отсутствует

20.

Особенности POST-запроса
1. Строка запроса — HTTP-команда(метод), URI, номер версии HTTP
POST prog.php HTTP 1.1
2. Заголовки запроса(могут отсутствовать)
User-Agent: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.17
(KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
Content-length: 19
3. Тело запроса
cat=pers&dog=cocker
При передаче информации по методу POST, данные передаются в теле
запроса в виде пар имя=значение, разделенных между собой знаком
&. В заголовках запроса обязательно присутствует заголовок ContentLength, в котором указывается длина передаваемого содержимого в
байтах. в целях совместимости сохраняется

21.

GET или POST?
Формально нет ограничения на размер URL-адреса (RFC2616, 3.2.1):
The HTTP protocol does not place any a priori limit on the length of a URI.
Servers MUST be able to handle the URI of any resource they serve, and
SHOULD be able to handle URIs of unbounded length if they provide GETbased forms that could generate such URIs.
В то же время в этой же спецификации есть пометка:
Note: Servers ought to be cautious about depending on URI lengths above
255 bytes, because some older client or proxy implementations might not
properly support these lengths.
Таким образом, для «коротких» данных рекомендуется использовать GETзапросы, для «длинных» - POST. Однако, эти рекомендации не являются
догмой, и использование того или иного типа запроса определяется
конкретикой задачи и возможностями конкретного web-сервера.

22.

Итого

23.

Введение в HTML и CSS

24.

История HTML и CSS
«Sir Tim Berners-Lee invented the World Wide Web in 1989…
He wrote the first web client and server in 1990…
His specifications of URIs, HTTP and HTML were refined as Web technology spread.»
https://www.w3.org/People/Berners-Lee/
Лекция Тима Бернерс-Ли о перспективах WWW: https://youtu.be/zdyrjxa00DE

25.

HTML
HyperText Markup Language
Является стандартом разметки документов во Всемирной
паутине
Является частным случаем SGML (стандартного обобщённого
языка разметки) и соответствует международному
стандарту ISO 8879
Интерпретируется браузерами и отображается в виде
документа в удобной для человека форме
Базовый синтаксис и семантика языка HTML определены в
стандарте HTML ― http://www.w3.org

26.

HTML
Представляет простые правила оформления и компактный
набор структурных и семантических элементов разметки (тегов)
Позволяет описывать способ представления логических частей
документа (заголовки, абзацы, списки и т.д.) и создавать вебстраницы разной сложности
Не является языком программирования, но веб-страницы могут
содержать встроенные или загружаемые программы на
скриптовых языках (Javascript)

27.

Версии
RFC 1866 — HTML 2.0, одобренный как стандарт 22
сентября 1995 года;
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01(изменения) — 24 декабря 1999 года;
XHTML 1.0 – 26 января 2000 года
HTML 5 — 28 октября 2014 года.
https://www.w3.org/blog/news/archives/4167
<!DOCTYPE HTML>

28.

Использование HTML-контейнеров

29.

Тэговая разметка
<tag attr1=″value″ attr2=″value″>текст</tag>
Контейнер – может содержать в себе один или несколько
других тегов
Одиночный тэг – законченная конструкция, не содержит внутри
других тегов.

30.

Группы тэгов
Формируют структуру документа;
Служат для форматирования/выделение частей гипертекста
(параграфы, списки, таблицы, графика);
Создают гипертекстовые ссылки и метки;
Определяют интерактивные формы ввода данных;
Позволяют осуществлять вызов javascript-кода.

31.

СТРУКТУРА HTML–ДОКУМЕНТА
<!doctype html>
<html>
<head>
<title>Название документа</title>
<meta charset=“utf-8”>
…
</head>
<body>
Текст с HTML-разметкой
…
</body>
</html>
Метаинформация
о документе
Содержимое
документа

32.

Мета-теги
Элемент разметки html, описывающий свойства документа
(метаданные). Позволяет указать дополнительную информацию
о документе.
Тэг <meta>
Размещаются в блоке <head>...</head> веб-страницы.
Не являются обязательными элементами.
Примеры:
<meta name=“robots" content=“noindex, nofollow">
<meta name="author" content=“Иванов И.И.">
<meta name=“viewport” content=“width=device-width”>

33.

META
<meta name="author" content="строка"> — автор веб-документа
<meta name="date" content="дата"> — дата последнего изменения
веб-страницы
<meta name="copyright" content="строка"> — авторские права
<meta name="keywords" content="строка"> — список ключевых слов
<meta name="description" content="строка"> — краткое описание
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на
индексирование
<meta charset=“UTF-8”> — тип и кодировка
<meta http-equiv="expires" content="число"> — управление
кэшированием

34.

Теги внутри <body>

35.

Cписки
Unordered/Ordered lists. Теги <UL><LI> или <OL><LI>
Используются для представления информации в списковой форме
без/c нумерацией элементов. Отображается как список с
маркерными отметками или цифрами(буквами).
Синтаксис:
<UL>
<LI>элемент 1</LI>
<LI>элемент 2</LI>
<LI>элемент 3</LI>
</UL>

36.

Тег <img>
предназначен для отображения на веб-странице
изображений в графическом формате GIF, JPEG или PNG. URL
файла задаётся через атрибут src.
<img src="URL" alt="альтернативный текст">

37.

Тэг <a>: Гиперссылки+
Навигация
Гипертекстовый якорь обозначает отметку в тексте, которая или
содержит ссылку на другое место в тексте, или говорит
навигатору, что на отмеченное место можно ссылаться.
<a href="mailto:user@mail.example.com" title="Написать
автору">user@mail.ru</a>
<a href=“/example.com">Сайт с примерами</a>
<a href="../example.html">Посмотри пример</a>
<a href="/">В начало сайта</a>
Абсолютные и относительные ссылки

38.

Гиперссылки
Абсолютные ссылки указывают, как правило, на внешний ресурс
(полный путь):
<a href="http://www.uni-dubna.ru">Университет Дубна</a>
Относительные ссылки используют для перехода на внутренние
страницы ресурса (путь относительно ссылающейся страницы):
<a href=“page.html">Ссылка на страницу в текущем каталоге</a>
<a href=“images/figure1.gif">Ссылка на страницу в подкаталоге
текущего каталога</a>
<a href="/docs/manual.html">Ссылка на страницу в подкаталоге
корневого каталога</a>
<a href="../files/index.html">Ссылка на страницу в вышележащем
каталоге </a>

39.

HTML-формы (1)
Элементы управления стандартного пользовательского
интерфейса – кнопки, списки, опции, селекторные кнопки,
текстовые поля.
Тэги <FORM>...</FORM>
Атрибут
Значения
Описание
NAME
строка
имя формы
ACTION
URL
адрес программы обработки
формы
METHOD
GET | POST | PUT | HEAD | LINK
| UNLINK | DELETE
Метод для обращения к URL из
ACTION

40.

HTML-формы (2)
Тег <INPUT>
Текстовое
поле
TYPE=“TEXT”
<INPUT TYPE=“TEXT” NAME=“имя”
MAXLENGTH=“n1”
SIZE=“n2” VALUE=“умолчание”>
Неотображае
мое
текстовое
поле
TYPE=
“PASSWORD”
<INPUT TYPE=“PASSWORD” NAME=“имя”
MAXLENGTH=“n1” SIZE=“n2”
VALUE=“умолчание”>
Опции
TYPE=
“CHECKBOX”
<INPUT TYPE=“CHECKBOX” NAME=“имя”
VALUE=“умолчание” CHECKED>
Селекторные
кнопки
TYPE=“RADIO”
<INPUT TYPE=“RADIO” NAME=“имя”
VALUE=“умолчание”>

41.

HTML-формы (3)
Тег <INPUT>
Изображение TYPE=
“IMAGE”
<INPUT TYPE=“IMAGE” NAME=“имя”
SRC=“URL” >
Скрытое
поле
TYPE=
“HIDDEN”
<INPUT TYPE=“HIDDEN” NAME=“имя”
VALUE=“умолчание”>

42.

HTML-формы (4)
Тег <INPUT>
Кнопка
TYPE=
BUTTON
<INPUT TYPE=BUTTON NAME=имя
VALUE="надпись на кнопке">
Кнопка SUBMIT
TYPE=
SUBMIT
<INPUT TYPE=SUBMIT NAME=имя
VALUE=умолчание>
Кнопка RESET
TYPE=
RESET
<INPUT TYPE=RESET NAME=имя
VALUE=умолчание

43.

HTML-формы (5)
Разворачивающиеся меню и списки.
Тег <SELECT>…</SELECT>
MULTIPLE
Возможность выбора нескольких вариантов одновременно
NAME
строка
имя
VALUE
строка
значение
n
число вариантов. Если SIZE задан - список; Если
SIZE=1 или не задан - классическое
разворачивающееся меню
SIZE

44.

HTML-формы (6)
NAME
<select>
<option value=“-1”
selected>Выберите
Тег <OPTION>
и </OPTION>город</option>
<option value=“Moscow”>Москва</option>
<option value=“Dubna”>Дубна</option>
…
</select>
строка
имя пункта
SELECTED
выбор по умолчанию
VALUE
строка
значение

45.

HTML-формы (7)
Большое поле ввода.
Тег <TEXTAREA>...</TEXTAREA>
NAME
строка
имя поля
VALUE
строка
значение
COLS
n
число колонок
ROWS
m
число строк

46.

CSS – Cascading Style Sheet
• Селектор (Selector) — элемент, к которому будут применяться назначаемые
стили: тег, класс или идентификатор объекта гипертекстового документа.
• Свойство (Property) определяет одну или несколько характеристик селектора:
задают формат отображения селектора: отступы, шрифты, выравнивание,
размеры и т.д.
• Значение (Value) — фактические числовые или строковые константы,
определяющие свойство селектора.
• Описание (Declaration) — совокупность свойств и их значений.
• Правило (Rule) — полное описание стиля (селектор + описание).

47.

Примеры селекторов
HTML:
<p id=“green” class=“blue”>Hello, world!</p>
CSS:
p {color:red;}
#green {color:green;}
.blue {color:blue;}

48.

Группы CSS-свойств
Оформление
color: red | #ff0000 | rgb(255,0,0) | rgba(255,0,0,1);
background: url(a.jpg) left center no-repeat;
(background-image, background-position, background-repeat…)
font: 12pt/1.5 normal ‘Calibri’,sans-serif;
text-decoration: underline;
text-transform: uppercase;
font-style: italic;
list-style-type: disc;
line-height: 1.5;
box-shadow: …