Структура курса

Лекция 1: Введение в дисциплину
Web-технологии и web-дизайн
Цели и задачи курса
История Интернет
Протокол HTTP
Web-стандарты
Краткая история HTML
Структура HTML-документа
Разметка текста в HTML

1. Цели и задачи курса
Предметом дисциплины «Web-технологии и web-дизайн» являются технологии глобальной сети World Wide Web и основы эргономики интерфейса web-приложений.
Задачи изучемые в рамках курса:
Структура и принципы Веб (базовые понятия, архитектура, стандарты и протоколы);
Технологии сети Веб (языки разметки и программирования веб-страниц, инструменты разработки и управления веб-контента и приложений для Веб, средства интеграции веб-контента и приложений в Веб);
Основые эргономики и юзабилити web-интерфейса.

2. История интернет
1966 начало разработки технологии по коммутации пакетов в сети ARPA;
1969 первые 4 работоспособные узла (50 Кбит/с);
1972 изобретение электронной почты;
1980 разработка стека протоколов TCP/IP;
1981 каждые 20 дней к сети добавляется новый хост;
1991 появление всемирной паутины WWW (CERN: URL, HTTP, HTML, CGI, формы);
1993 выход первого браузера Mosaic;
1995 появление Java-script;
1998 число пользователей 2 млн.

3. Протокол HTTP
Hyper Text Transfer Protocol – протокол прикладного уровня, предназначенный для передачи гипертекста.
Програмное обеспечение для работы с протоколом HTTP:
Серверы - Internet Information Services (IIS), Apache, lighttpd, nginx.
Клиенты - Internet Explorer, Opera, Mozilla Firefox, Netscape Navigator и другие.

Схема HTTP-сеанса
Установление TCP-соединения.
Запрос клиента.
Ответ сервера.
Разрыв TCP-соединения.
Структура URL
<схема>://<логин>:<пароль>@<хост>:<порт>/
http://vasya:
[email protected]
:80/windows.html

Формат HTTP-запроса
Строка состояния:
метод_запроса URL_ресурса версия протокола HTTP
Поля заголовка
Имя поля: значение
Пустая строка
Тело запроса
Передаваемые данные

Пример HTTP-запроса
GET http://oak.oakland.edu/ HTTP/1.0
Connection: Keep-Alive
User-Agent: Mozilla/4.04 [en] (Win95; I)
Host: oak.oakland.edu
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*
Accept-Language: en
Accept-Charset: iso-8859-l,*,utf-8

Формат HTTP-ответа
Строка состояния:
Версия_протокола Код_ответа Пояснительное_сообщение
Поля заголовка
Имя поля: значение
Пустая строка
Тело ответа
Передаваемые данные

Пример HTTP-ответа
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.1
Date: Mon, 20 OCT 2008 11:25:56 GMT
Content-Type: text/html
Last-Modified: Sat, 18 Oct 2008 15:05:44 GMTE
Content-Length: 426
Operand1:
Operand2:
Operation:….

4. Web-стандарты
World Wide Web Consortium, W3C – организация с 1994 года занимающаяся созданием стандартов для веб под руководством Тима Бернерса-Ли.
http://www.w3c.org
Валидатор: validator.w3c.org

Преимущества использования Web-стандартов
Доступность к сайту пользователей не стандартных устройств;
Доступность к сайту поисковых машин;
Простота конвертации и программном анализе;
Удобность в сопровождение;
Уменьшение объема программного кода;
Поддержка большего числа браузеров.

5. Краткая история HTML
1986 - Международная организация по стандартизации (ISO) приняла стандарт ISO-8879, "Standard Generalized Markup Language (SGML);
1991 - Тим Бернерс-Ли разработал HTML – HyperText Markup Language (язык разметки гипертекста);
1993 - HTML версии 1.2 содержит только логическую разметку;
1995 - HTML 2.0;
1997 - HTML 3.0 + CSS;
1999 - HTML 4.01.
2001 - XHTML 1.1
2008 - начало работы на проектом стандарта HTML 5.0

6. Структура HTML-документа
HTML-документ должен описывать логическую структуру текста;
В разметке используются теги с атрибутами:
<откр.тег атрибут=“значение”>…
Все теги бывают блочные либо строчные;
Для спец символов (> & © π) используют коды ( ) или сокращения ( );
Возможно использование комментариев:

Пример HTML-документа
Пример HTML-документа http-equiv="Content-Type" content="text/html;charset=utf-8" />
Это самый простой HTML-документ.

7. Разметка текста в HTML
Заголовки
Заголовок 1-го уровня
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня

Абзацы (параграфы)
1Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.
2Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.
3Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.
4Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.
5Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.

Предварительное форматирование текста
Информационные
технологии
проектирования
Информационные
технологии
проектирования

Теги логического форматирования
…
...
…
и
…
…
…
и
…
и
…
…
и
…
…
и
…

Теги физического форматирования
…
...
…
…
…
…
и
…
…
и
…
…
и
…