lections_03.06.2015_reduced

Интернет-технологии
Лабораторные работы: 8 часов (на подгруппу)
Лекции: 8 часов
Самостоятельная работа: 92 часа!!!!!!!!!!!
Форма контроля: 9 семестр экзамен
Савенко Игорь Игоревич,
ассистент каф. АиКС, ИК, ТПУ
igsavenko@tpu.ru
Аудитория 112б
План дисциплины
• Компьютерные сети. История развития сети Интернет.
•
•
•
•
Топологии компьютерных сетей
Адресация в сети Интернет
Протоколы
Система доменных имен
• WWW (World Wide Web) – всемирная паутина
•
•
•
•
•
Протокол HTTP
Язык разметки гипертекста (X)HTML
Каскадные таблицы стилей
Скриптовый язык программирования JavaScript (jQuery)
Язык программирования PHP
2
Практическая часть
ИДЗ
1. Сетевые утилиты и их использование
Лабораторные работы
1. Протокол передачи гипертекста HTTP
2. Протокол передачи почтовых сообщений SMTP
3. Верстка HTML-документов
3
Компьютерные сети.
История развития сети Интернет.
4
Компьютерная сеть
Совокупность соединенных между собой компьютеров с помощью специальных каналов связи
и средств коммутации, образуя единую систему обмена информацией.
Каналом связи обычно называют систему технических
обеспечивающую передачу информации между абонентами.
устройств
и
линий
связи,
5
Термины
Хост – машины, предназначенные для выполнения приложений (программ) пользователя.
Подсеть состоит из двух раздельных компонентов: линий связи и переключающих элементов.
Линии связи – переносят данные от машины к машине.
Маршрутизатор (router) – специализированное оборудование, используемое для соединения
линий связи. Определяет линию связи по которой необходимо передать данные – формирует
дальнейший маршрут этих данных.
6
Коммутация каналов
1958 г. - В США при Министерстве обороны создано Агентство Передовых Исследовательских
Проектов – Advanced Research Projects Agency (ARPA). Использование коммутации каналов.
Коммутация каналов - организация
составного канала через несколько
транзитных узлов из нескольких
последовательно «соединённых»
каналов на время передачи сообщения
(оперативная коммутация) или на
более длительный срок.
7
Коммутация пакетов
В период с 1961 по 1963 год – ведутся исследования в области пакетного способа передачи
данных. Сообщение предлагается передавать не целиком, а разбив на небольшие порциипакеты, что облегчает прохождение информации по сети и повышает надежность доставки
сообщения. В 1967 году появляется ARPANET.
Коммутация пакетов — разбиение
сообщения на «пакеты», которые
передаются отдельно. Разница между
сообщением и пакетом: размер пакета
ограничен технически, сообщения —
логически. При этом, если маршрут
движения пакетов между узлами
определён заранее, говорят
о виртуальном канале (с установлением
соединения).
8
Первый прототип компьютерной сети
В декабре 1969 г. были объединены четыре узла сети ARPANET:
• UCLA - Центр испытаний сети
• Стэндфордский исследовательский институт
• Университет Санта-Барбары
• Университет Юта
Через год их стало уже пятнадцать, и они использовали для
обмена пакетами протокол NCP - Network Control Protocol.
9
История развития сети Интернет
1971 год. Рэй Томлисон, программист из "Bolt Beranek and Newman", разрабатывает систему
электронной почты и предлагает использовать значок @.
1973 год. Через трансатлантический телефонный кабель к сети были подключены первые
иностранные организации из Великобритании и Норвегии.
1974 год. Открыта первая коммерческая версия ARPANET – сеть Telenet.
1975 год. Джоном Витталом, программистом из университета южной Калифорнии, разработана
первая современная почтовая программа, имеющая функциональность "Ответить" и
"Переслать".
1976 год. Роберт Меткалф, сотрудник исследовательской лаборатории компании Xerox, создает
Ethernet – первую локальную компьютерную сеть.
1977 год. Число хостов достигло ста. Деннис Хейс и Дейл Хезерингтон разработали первый
компьютерный модем.
10
11
Рождение современного Интернета
1982 год. Рождение современного Интернета – ARPA создала единый сетевой язык TCP/IP.
1983 год. 1 января 1983 года сеть ARPANET перешла с протокола NCP на TCP/IP, что позволило
разделить эту сеть на MILNET, собственно сеть для военных нужд, и ARPANET,
использовавшуюся в исследовательских целях.
1984 год. Число хостов превысило тысячу. Разработана система доменных имен (Domain Name
System, DNS). DNS позволила создать масштабируемый распределенный механизм для
отображения иерархических имен компьютеров в Интернет-адресах. В этом же году в
университете Висконсии был создан сервер доменных имен (Domain Name Server, DNS).
В 1985 г. под эгидой Национального научного фонда США (National Science Foundation, NSF) на
основе технологии ARPANET была создана сеть NSFNET (The National Science Foundation
NETwork - Сеть Национального научного фонда), в создании которой приняли
непосредственное участие NASA и Министерство энергетики.
12
Становление всемирной паутины
1989 год. Число хостов превысило 10 тысяч. В CERN родилась концепция Всемирной паутины,
предложенная британским ученым Тимом Бернерсом-Ли. Он же в течение двух лет разработал
протокол HTTP, язык HTML и идентификаторы URI.
1990 год. В 1990 году сеть ARPANET прекратила свое существование, полностью проиграв
конкуренцию NSFNet. В том же году было зафиксировано первое подключение к Интернету по
телефонной линии (Dialup access).
1991 год. CERN создала протокол World Wide Web (WWW). Компанией NCR Corporation/AT&T
создан Wi-Fi.
1993 год. Число Интернет-хостов превысило 2 млн., в Сети действует 600 сайтов. Марком
Андреесеном в Университете штата Иллинойс создан первый общедоступный графический
Интернет-браузер Mosaic.
1994 год. Образовался консорциум W3C (W3 Consortium), который объединил ученых из
разных университетов и компаний (в том числе Netscape и Microsoft). С этого времени комитет
стал заниматься всеми стандартами в мире Интернета.
13
Схема сети Интернет
Компьютерная
сеть
Шлюз
Компьютерная
сеть
Шлюз
...
Компьютерная
сеть
Шлюз
Объединенная сеть
14
Топология компьютерной сети
Термин топология сети означает способ соединения компьютеров в сеть. Вы также можете услышать
другие названия – структура сети или конфигурация сети (это одно и то же). Кроме того, понятие топологии
включает множество правил, которые определяют места размещения компьютеров, способы прокладки
кабеля, способы размещения связующего оборудования и многое другое.
Топология «Шина»
Топология «Звезда»
Топология «Кольцо»
15
Архитектура сети
• клиент-серверная (client-server) – компьютерная сеть, характеризующаяся наличием в сети
серверов.
• равноранговая (одноранговая) (peer-to-peer) – компьютерная сеть, в которой разделение на
клиентские и серверные машины отсутствует.
• гибридная
16
Клиент-серверная архитектура
Преимущества:
1. Сильная централизованная защита.
2. Центральное хранилище файлов.
3. Возможность совместного использования серверами
доступного аппаратного и программного обеспечения.
4. Централизованная организация.
5. Простая управляемость при большом числе пользователей
6. и т.д.
Недостатки:
1. Дорогое специализированное аппаратное
оборудование.
2. Дорогостоящие серверные ОС и клиентские
лицензии.
3. Наличие системного администратора.
17
Равноранговая архитектура
Преимущества:
1. Не требуют дополнительных расходов на
серверы и необходимое ПО.
2. Не требуется администратор сети
3. Клиент сам управляет разделением ресурсов
4. Низкая стоимость
Недостатки:
1. Дополнительная нагрузка на компьютер.
2. Неспособность одноранговых узлов обслуживать большое
число соединений.
3. Отсутствует централизованная организация.
4. Пользователь-администратор.
5. Слабая система защиты.
18
Классификация по размеру
Расстояние между узлами
Место расположение
1м
На одном квадратном метре
10 м
Комната
100 м
Здание
1 км
Кампус
10 км
Город
100 км
Страна
1000 км
Континент
10 000 км
Планета
Персональная сеть
Локальная сеть
Муниципальная сеть
Глобальная сеть
Интернет
19
Структура сети
(многоуровневая модель взаимодействия)
20
Взаимодействие протоколов сети
Интернет. Модель TCP/IP.
прикладной
уровень
транспортный
уровень
сетевой
уровень
канальный
уровень
физический
уровень
HTTP, FTP
TCP
IP
ping, tracert
DNS
UDP
ICMP
IEEE 802.3 (Ethernet) , IEEE 802.11 (WiFi), IEEE 802.15.1 (Bluetooth), ...
оптоволокно, радиоканал, кабель
21
Примеры протоколов
Протокол ICMP (Internet Control Message Protocol) – протокол межсетевых управляющих сообщений.
Протокол TCP (Transmission Control Protocol) – протокол управления надёжной передачей данных по
сети Интернет.
Протокол UDP (User Data Protocol) – протокол управления ненадёжной передачей данных по сети
Интернет без установления соединения.
Протокол FTP (File Transfer Protocol) – протокол передачи файлов.
Протокол HTTP (Hyper Text Transfer Protocol) – протокол обмена гипертекстовой информацией.
Протокол DNS (Domain Name System) – протокол системы наименования доменов.
Протокол POP (Post Office Protocol) – протокол для получения почты с почтового сервера.
Протокол SMTP (Simple Mail Transfer Protocol) – протокол передачи сообщений электронной почты.
22
Система адресации в Интернет *
IP-адрес (Internet Protocol Address) - уникальный сетевой
адрес узла в компьютерной сети, построенной по протоколу IP. В
сети Интернет требуется глобальная уникальность адреса; в случае работы в
локальной сети требуется уникальность адреса в пределах сети.
IPv4 – цифровой адрес, содержит 32 бита, состоит из двух частей: адреса сети и
адреса хоста.
85.17.124.5 = 01010101 00010001 01111100 00000101
IPv6 – состоит из 128 бит.
3ffe:14ab:0000:0000:0000:003a:8a21:7f11
23
IPV4 *
85.17.124.5:80
0
1
0
1
0
0
1
0
0
0
1
1
0
0
0
1
0
1
1
1
0
0
0
0
1
1
0
0
0
1
0
1
Минимальный: 85.0.0.0
Максимальный (широковещательный): 85.255.255.255
Сетевой порт – используется для обмена пакетами между приложениями.
Число от 1 до 65535, указывающее, какому приложению предназначен пакет.
24
Исчерпание IPv4-адресов
25
Классы IPv4 сетей
Класс А
0 *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
Первый байт - от 1 до 126
Класс B
1 0 * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
Первый байт - от 128 до 191
Класс C
1 1 0 * * * * *
Первый байт - от 192 до 223
Класс D
1 1 1 0 * * * *
Адрес многоадресной рассылки
* * * * * * * *
* * * * * * * *
Класс E
1 1 1 1 0 * * *
* * * * * * * *
Зарезервировано
* * * * * * * *
* * * * * * * *
* * * * * * * *
26
С ростом сети Интернет эта система оказалась неэффективной и была дополнена бесклассовой адресацией (CIDR).
********
Пример: сеть класса C 212.192.20
- наименьший адрес - 212.192.20.0 - адрес сети
- наибольший адрес - 212.192.20.255 - широковещательный адрес (broadcast)
- адреса для хостов - от 212.192.20.1 до 212.192.20.254
количество адресов для хостов = общее количество - 2
27
Бесклассовая адресация *
Количество бит в адресе, обозначающие адрес сети.
Адрес 212.192.20.254/24
Маска: 11111111 11111111 11111111 00000000
Маска: 255.255.255.0
Адрес 212.192.20.254/30
Маска: 11111111 11111111 11111111 11111100
Маска сети - фактически размер
сети, задает число адресов в сети.
Например, узел с IP-адресом
12.34.56.78 и маской подсети
255.255.255.0 находится в сети
12.34.56.0/24 с длиной префикса 24
бита.
Маска: 255.255.255.252
212.192.20.254/24 – запись IP-адреса в бесклассовой нотации
28
212.192.20.0(/24)
24 бит – адрес сети
8 бит – адрес хоста
254 адресов хостов + 2 специальных адреса
Деление на 2 подсети
126 хостов + 2 специальных адреса
126 хостов + 2 специальных адреса
---------------------------------------------11010100.11000000.00010100.XYYYYYYY
X - адрес подсети (1 or 0)
Y - адрес хоста
* Пример
Разбиение на подсети
212.192.20.0/25 – адрес первой подсети
212.192.20.10/25 – адрес хоста
212.192.20.127/25 – широковещательный адрес
212.192.20.128/25 – адрес второй подсети
212.192.20.129/25 – адрес хоста
212.192.20.255/25 – широковещательный адрес
29
Пример записи диапазона IP-адресов *
10.96.0.0/11.
Маска подсети (2) : 11111111 11100000 00000000 00000000
Маска подсети (10) : 255.224.0.0.
11 разрядов IP-адреса отводятся под адрес сети, а остальные 32 − 11 = 21
разряд полного адреса:
11111111 11100000 00000000 00000000 — под локальный адрес в этой сети.
Итого, 10.96.0.0/11 означает диапазон адресов от 10.96.0.0 до 10.127.255.255.
30
Зарезервированные адреса *
127.0.0.1/8 – определяет подсеть внутри хоста, используется для отладки
сетевых программ без передачи данных в сеть.
10.0.0.0/8, 192.168.0.0/16, 172.16.0.0/12 – предназначены для построения
локальных сетей на основе TCP/IP без подключения к внешним сетям.
0.0.0.0/8 – используется для указания адреса источника самого хоста.
Маска сети - фактически размер сети, задает число адресов в сети.
Например, узел с IP-адресом 12.34.56.78 и маской подсети 255.255.255.0
находится в сети 12.34.56.0/24 с длиной префикса 24 бита.
31
Задание *
Вариант 1
Сеть 140.31.160.0/20
IP-адрес назначения 140.31.175.236
Вариант 2
Сеть 140.31.160.0/20
IP-адрес назначения 140.31.177.236
32
Вариант 1
Сеть: 140.31.160.0/20
...
IP-адрес назначения: 140.31.175.236
IP-адрес назначения в двоичном формате:
10001100.00011111.10101111.11101100
Маска сети в двоичном формате:
...
11111111.11111111.11110000.00000000
Результат наложения маски
10001100.00011111.10100000.00000000 = 140.31.160.0 = адресу
сети, получатель находится в этой же сети
Шлюз
Концентратор
(Hub)
Коммутатор
(Switch)
33
Вариант 2
Сеть 140.31.160.0/20
...
IP-адрес назначения 140.31.177.236
IP-адрес назначения в двоичном формате
10001100.00011111.10110001.11101100
Маска сети в двоичном формате
11111111.11111111.11110000.00000000
...
Результат наложения маски
10001100.00011111.10110000.00000000 = 140.31.176.0 != адресу сети, получатель
находится в другой сети, пакет направляется на шлюз
Шлюз
Концентратор
(Hub)
Коммутатор
(Switch)
34
IPv6 *
IPv6 адрес состоит из 128 бит.
Пример: 3ffe:14ab:0000:0000:0000:003a:8a21:7f11
Сокращение записи IPv6-адреса:
1. Начальные нули могут отсутствовать
3ffe:14ab:0:0:0:3a:8a21:7f11
2. Одна или несколько групп, содержащих нули, могут быть заменены на два
двоеточия
3ffe:14ab::3a:8a21:7f11
35
Порт
80 (HTTP)
…
21 (FTP)
212.54.66.135
52.143.74.188
20 (FTP)
21 (FTP)
22 (SSH)
25 (SMTP)
53 (DNS)
80 (HTTP)
443 (HTTPS)
…
36
Использование портов на прикладном
уровне
37
Диапазоны портов
Количество портов ограничено с учётом 16-битной адресации
(216 =65536, начало — «0»).
Все порты разделены на три диапазона
• общеизвестные (или системные, 0—1023);
• зарегистрированные (или пользовательские, 1024—49151);
• динамические (или частные, 49152—65535).
38
DNS (Domain Name System) – система
доменных имён
Домен – это множество хостов, объединенных в логическую группу.
DNS – это распределенная база данных, поддерживающая иерархическую
систему имен и предназначенная для определения IP-адреса по
известному символьному имени узла (и наоборот).
one.example.com – относительное доменное имя
one.example.com. – абсолютное доменное имя
.
– корневой домен
com.
– домен первого (верхнего) уровня
example.com.
– домен второго уровня
one.example.com. – домен третьего уровня
39
Локальная база данных DNS
Файл hosts:
c:\windows\system32\drivers\etc\hosts (Windows)
/etc/hosts (Unix)
127.0.0.1
localhost
195.208.176.44
yandex.ru
….
40
Распределенная база данных DNS
.
Internet Network Information Center
(InterNIC) - Информационный центр
сети Интернет (Международный
сетевой информационный центр) организация, занимающаяся
вопросами формирования,
регистрации и стратегического
развития сети Internet, включая
регистрацию доменных имен.
com
ru
tpu.ru
net
aics.ru
...
edu.ru
stud.aics.ru
содержит записи для
www.stud.aics.ru
ftp.stud.aics.ru
mail.stud.aics.ru
test.stud.aics.ru
41
Распределенная база данных DNS
Первый уровень:
родовые имена:
com – коммерческие организации
edu – образовательные учреждения
gov – правительственные организации
org – некоммерческие организации
net – организации, поддерживающие сети …
42
Распределенная база данных DNS
Домены государств:
ru – Россия – управляет Российский научно-исследовательский
институт развития общественных сетей (РосНИИРОС, http://ripn.net)
am – Армения
at – Австрия
tv – Тувалу
io – Британская территория в Индийском океане
me – Черногория …
43
Пример определить IP-адрес хоста *
# nslookup it.aics.ru
Server: slave.aics.acs.cctpu.edu.ru
Address: 109.123.141.3
Non-authoritative answer:
Name:
it.aics.ru
Address: 109.123.141.237
44
Получение информации от заданного DNSсервера *
# nslookup aics.ru. ns.tpu.ru
Server:
ns.tpu.ru.
Address:
109.123.152.2#53
Non-authoritative answer:
Name:
aics.ru
Address: 109.123.141.4
45
Получение информации от заданного DNSсервера *
# nslookup it.aics.ru. aics.ru
Server:
aics.ru
Address:
109.123.141.4#53
Non-authoritative answer:
Name:
it.aics.ru
Address: 109.123.141.237
Non-authoritative answer - это ответ из кэша.
46
Типы ресурсных записей *
Ресурсные записи DNS — записи о соответствии имени и служебной
информации в системе доменных имён.
• A – преобразование символьных имён в IPv4 адреса (по умолчанию)
• AAAA – преобразование символьных имён в IPv6 адреса
• PTR – преобразование IP адресов в символьные имена
• NS – IP адреса DNS-серверов, отвечающих за данный домен
• MX – IP адреса почтовых серверов, принимающих письма для данного
домена
• CNAME – символьные ссылки
• TXT – дополнительная текстовая информация о домене
• ANY – вся информация
47
Запрос DNS-серверов домена *
#nslookup -type=NS it.aics.ru
Server:
109.123.141.3
Address:
109.123.141.3#53
Non-authoritative answer:
it.aics.ru
nameserver = dns1.yandex.net.
Authoritative answers can be found from:
dns1.yandex.net internet address = 213.180.204.213
48
Задание
Напишите запрос с официальным ответом на получение IP адреса
хоста.
49
Официальный ответ от делегированного
домена *
#nslookup it.aics.ru. dns1.yandex.net
Server:
dns1.yandex.net
Address:
213.180.204.213#53
Name:
it.aics.ru
Address: 109.123.141.237
50
Соответствие нескольких IP-адресов
символьному имени *
#nslookup google.com
Server:
109.123.141.5
Address:
109.123.141.5#53
Name:
google.com
Address: 64.233.161.100
# nslookup play.google.com
Server:
109.123.141.5
Address:
109.123.141.5#53
Name:
play.l.google.com
Address: 64.233.161.100
51
Определить IP адрес почтового сервера,
который принимает электронные письма на
имя it.aics.ru *
# nslookup -type=MX it.aics.ru
Server:
109.123.141.3
Address:
109.123.141.3#53
Non-authoritative answer:
it.aics.ru mail exchanger = 10 mx.yandex.net.
Authoritative answers can be found from:
mx.yandex.net internet address = 213.180.193.89
52
Определение причины отсутствия доступа
к Интернет-ресурсу
1. Определить IP адрес машины, IP адрес шлюза и IP адреса DNS-серверов
(ipconfig /all).
2. Проверить возможность определения IP адреса по имени узла (nslookup).
3. Проверить доступность шлюза и узла (ping). Отсутствие ответа не означает
невозможность установить соединение с узлом.
4. Проверить маршрут до узла (tracert). Обрыв маршрута не означает
невозможность установить соединение с узлом.
5. Проверить возможность установления соединения с узлом по различным
протоколам: HTTP – порт 80, SMTP – порт 25, FTP – порт 21, SSH – порт 22
(telnet или putty).
6. Связаться с администратором проблемного маршрутизатора
(http://nic.ru/whois, http://who.is или http://www.internic.net/)
53
WWW (World Wide Web) – всемирная
паутина
Всемирная паутина — глобальное информационное пространство, основанное
на физической инфраструктуре Интернета и протоколе передачи данных HTTP.
3 основные идеи:
1. язык разметки / гипертекст (xHTML)
2. универсальная идентификация ресурсов (URL)
3. клиент/серверная архитектура (использование веб-серверов, протокол HTTP)
54
Основные понятие WWW
Веб-сервер - это сервер принимающий запрос от клиента по определенному
протоколу (HTTP) и формирующий ответ.
Веб-браузер – ПО для просмотра веб-сайтов (для формирования HTTP-запросов
к веб-серверу и отображения HTTP-ответа (заголовок + содержимое страницы))
Веб-сайт – совокупность электронных документов, объединенных одним IPадресом или доменным именем.
HTTP (Hyper Text Transfer Protocol) – протокол прикладного уровня предназначен
для обработки информации с веб-сайтов
55
Идентификатор ресурса *
URI (Uniform Resource Identifier) – единообразный идентификатор ресурса.
Формат:
СХЕМА:ИДЕНТИФИКАТОР[?ЗАПРОС][#ФРАГМЕНТ]
URL (Uniform Resource Locator) – единообразный локатор ресурса –
подмножество URI, которое содержит информацию о местонахождении
ресурса и способе обращения к нему
URN (Uniform Resource Name) – единообразное имя ресурса
URI
URL
URN
56
Примеры URI
urn:ISBN:0-395-36341-1
urn:uuid:6e8bc430-9c3a-11d9-9669-0800200c9a66
urn:btih:JFRYN46FHYBNSWGH66HRJUU57HWEBNY
magnet:?xt=urn:btih:JFRYN46FHYBNSWGH66HRJUU57HWEBNY
urn:ietf:rfc:2648
http://tools.ietf.org/html/rfc2648
bitcoin:6Fhj6bsghf3FHTYNFGHhgfng45n7ndGf3A
http://aics.ru/index.shtml?a=showboard
https://google.com
57
Примеры URI
ftp://ftp.admin.tomsk.ru/pub/distr/
file://C:\Windows\temp\txt.html#chapter2
mailto:president@moscow.ru
news:comp.lang.perl.misc
sms:+1-868-123-3423
tel:+1-868-123-3423
telnet://192.168.0.1:4352
data:text/html,<h1>example</h1>
58
URL (Universal Resource Locator) *
Текущий URL (абсолютный URL)
Относительный URL
Результат
http://aics.ru/text/doc1.html
/files/logo.gif
http://aics.ru/files/logo.gif
http://aics.ru/text/doc1.html
doc3.txt
http://aics.ru/text/doc3.txt
http://aics.ru/text/doc1.html
./doc4.txt
http://aics.ru/text/doc4.txt
http://aics.ru/text/doc1.html
../img/./first.jpg
http://aics.ru/img/first.jpg
http://ya.ru/cat/ed/1.html
../../main/../2.html
http://ya.ru/2.html
59
URL и непредсказуемая мобильность
ресурсов Интернета
Persistent Uniform Resource Locator – постоянный единообразный локатор ресурса
PURL
веб-сервер
PURL
URL
http://purl.oclc.org/OCLC/PURL/FAQ
Режим доступа
Сервер с БД PURL
Путь
60
История развития всемирной паутины
Развитие WWW (World Wide Web):
1. Символьный гипертекст (текстовый браузер LineMode, 1991 г.)
2. Графически-ориентированные статические HTML-документы
(графический браузер Mosaic, 1993 г.)
3. Динамические HTML-документы (SSI, CGI, Perl, PHP, ASP)
4. Активные HTML-документы (с 1995 г. - Java, JavaScript, Flash)
5. WebGL - интерактивная 3D-графику (2011 г.)
61
62
HTTP (HyperText Transfer Protocol)
Протокол передачи гипертекста – символьно-ориентированный клиентсерверный протокол прикладного уровня без сохранения состояния,
используемый сервисом World Wide Web.
HTTP/0.9 - Самая ранняя версия протокола HTTP/0.9 была впервые
опубликована в январе 1992 г. Спецификация протокола привела к
упорядочению правил взаимодействия между клиентами и серверами HTTP, а
также чёткому разделению функций между этими двумя компонентами.
HTTP/1.0 - В мае 1996 года для практической реализации HTTP был выпущен
информационный документ RFC 1945, что послужило основой для реализации
большинства компонентов HTTP/1.0.
HTTP/1.1 - Соединение между клиентом и сервером может оставаться
открытым после отправки ответа на запрос. Клиент теперь обязан посылать
информацию об имени хоста, к которому он обращается.
63
Структура HTTP * (подробнее в методичке!)
1. Стартовая строка (для запроса и ответа различны);
2. Заголовок – характеризует тело сообщения (не обязательный);
3. Тело сообщения – непосредственно данные сообщения (не обязательный).
Строка запроса выглядит так:
Метод URI HTTP/Версия_протокола
Пример запроса:
GET it.aics.ru HTTP/1.1
Метод - последовательность из любых
символов, кроме управляющих и разделителей,
указывающая на основную операцию над
ресурсом.
Cтрока ответа сервера имеет следующий формат:
HTTP/Версия Код_Состояния [Пояснение]
Пример ответа:
HTTP/1.1 200 OK
Код состояния информирует клиента о
результатах выполнения запроса и определяет
его дальнейшее поведение.
64
Методы протокола HTTP
Options
GET
HEAD
POST
Используется для определения возможностей веб-сервера или
параметров соединения для конкретного ресурса.
Используется для запроса содержимого указанного ресурса.
Клиент может передавать параметры выполнения запроса в URI
целевого ресурса после символа «?»: GET
/path/resource?param1=value1&m2=value2 HTTP/1.1
Запрос HEAD обычно применяется для извлечения метаданных,
проверки наличия ресурса (валидация URL) и чтобы узнать, не
изменился ли он с момента последнего обращения.
Используется для запроса содержимого указанного ресурса.
Передаваемые данные включаются в тело запроса. Аналогично с
помощью метода POST обычно загружаются файлы.
65
Методы протокола HTTP
PUT
PATCH
Применяется для загрузки содержимого запроса на указанный
в запросе URI. Используя PUT, клиент предполагает, что
загружаемое содержимое соответствуют находящемуся по
данному URI ресурсу.
Аналогично PUT, но применяется только к фрагменту ресурса.
DELETE
Удаляет указанный ресурс.
TRACE
Возвращает полученный запрос так, что клиент может увидеть,
что промежуточные сервера добавляют или изменяют в
запросе.
Устанавливает связь указанного ресурса с другими.
LINK
UNLINK
Убирает связь указанного ресурса с другими.
66
Код состояния протокола HTTP
1xx Informational
(информационный)
В HTTP/1.1 клиент должен быть готов принять этот класс сообщений как
обычный ответ, но ничего отправлять серверу не нужно.
100 Continue (Продолжать)
101 Switching Protocols (Переключение протоколов)
102 Processing (Идёт обработка)
2xx Success (Успешно)
Сообщения данного класса информируют о случаях успешного принятия и
обработки запроса клиента.
200 OK (Успешно)
201 Created (Создано)
202 Accepted (Принято)
3xx Redirection
(Представление)
Коды статуса класса 3xx сообщают клиенту, что для успешного выполнения
операции нужно произвести следующий запрос к другому URI.
304 Not Modified (Не изменялось)
4xx Client Error
(Ошибка клиента)
Класс кодов 4xx предназначен для указания ошибок со стороны клиента.
404 Not Found (Не найдено)
5xx Server Error
(Ошибка сервера)
Коды 5xx выделены под случаи неудачного выполнения операции по вине
сервера.
500 Internal Server Error (Внутренняя ошибка сервера)
67
Структура протокола в Chrome
68
Пример HTTP-запроса (метод GET) *
GET http://tpu.ru/img/tom.gif HTTP/1.1
Accept: */*
Referer: http://tpu.ru/
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Host: tpu.ru
Connection: close
(пустая строка)
GET /img/tom.gif HTTP/1.1
Host: tpu.ru
(пустая строка)
69
Пример HTTP-запроса (метод POST) *
POST http://aics.ru/temp/test.php HTTP/1.1
Host: aics.ru
Content-Type: application/x-www-form-urlencoded
Content-Length: 46
70
Пример HTTP-ответа (статический документ) *
HTTP/1.1 200 OK
Date: Wed, 14 Sep 2005 00:31:03 GMT
Server: Apache/1.3.29 (Unix) PHP/4.3.5
Last-Modified: Thu, 11 Mar 2004 02:24:02 GMT
ETag: "1509a-14e-f865835b"
Content-Length: 8686
Content-Type: text/html; charset=WINDOWS-1251
<html>...
71
Пример HTTP-ответа (динамический документ) *
HTTP/1.1 200 OK
Date: Sun, 02 Mar 2003 15:56:19 GMT
Server: Apache/2.0.40 (Win32)
X-Powered-By: PHP/5.0.3
Content-length: 62
Connection: close
Content-Type: text/html; charset=WINDOWS-1251
<html>...
72
HTML
73
SGML и XML
HTML является одним из приложений SGML (Structured Generalized Markup Language – обобщенный
структурированный язык разметки)
SGML
1986
HTML
1991
XML
1996
XHTML
2000
SVG
2001
XQuery, XSLT, XForms, XPointer, JSP, RSS, Atom,
XML-RPC, RDF/XML, SOAP
74
HTML (XHTML)
1.
HTML (Hyper Text Markup Language) – это язык формирования HTML-документов. Язык HTML
определяет только специальные метки (теги), которые вставляются в текстовый файл, где
впоследствии опознаются браузером и используются им для демонстрации файла на экране.
2.
XHTML (Extensible Hypertext Markup Language) – семейство языков разметки веб-страниц на
основе XML, повторяющих и расширяющих возможности HTML 4.
HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.
HTML 5 — 2014 год.
75
XHTML (Extensible Hypertext Markup Language) – расширяемый язык
разметки гипертекста
Преимущества:
1. обработка проще и быстрее, чем HTML
2. доступны технологии, разработанные для XML
Требования:
1. все элементы должны быть закрыты: <br> → <br />
2. у атрибутов обязательно должно быть значение, заключенное в кавычки: <td
nowrap> → <td nowrap="nowrap">
3. имена тегов – строчными буквами: <B> → <b>
4. при нарушении структуры возникает ошибка
76
(X)HTML-документ
(X)HTML-документ – это файл с расширением *.html или *.htm, созданный с применением
языка разметки гипертекста.
Структура (X)HTML-документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Содержимое документа
</body>
</html>
77
Примеры xHTML и HTML
Добавить на 2015/2016 учебный год
78
Элемент <!DOCTYPE>
Данный элемент предназначен для указания типа текущего документа - DTD (Document Type
Definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует
интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме
того, имеется XHTML, похожий на HTML, но различающийся с ним по синтаксису.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на
которого ориентированы.
Пример для HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Пример для HTML 5
<!DOCTYPE html>
79
Синтаксис элемента <!DOCTYPE>
Синтаксис
<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">
Параметры
Элемент верхнего уровня - указывает элемент верхнего уровня в документе, для HTML это тег <html>.
Публичность - объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM).
Регистрация - сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации
(International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) - разработчик
зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это
название и пишется в <!DOCTYPE>.
Тип - тип описываемого документа. Для HTML/XHTML значение указывается DTD.
Имя - уникальное имя документа для описания DTD.
Язык - язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для
документа HTML/XHTML указывается английский язык (EN).
URL - адрес документа с DTD.
80
HTML-теги
Для форматирования документа (установки его параметров) служат теги - команды языка HTML.
Условно теги делятся на следующие типы:
• теги верхнего уровня;
• теги заголовка документа;
• блочные элементы;
• встроенные элементы;
• универсальные элементы;
• списки;
• таблицы.
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение" атрибут2="значение">...</тег>
Как видно из данного примера, теги бывают двух типов - одиночные и парные (контейнеры). Одиночный
тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов
допустимы различные атрибуты, которые разделяются между собой пробелом.
81
Теги верхнего уровня
Тег <html> является контейнером, который заключает в себе всё содержимое вебстраницы.
Тег <head> предназначен для хранения других элементов, цель которых – помочь
браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые
используются для хранения информации, предназначенной для браузеров и поисковых
систем.
Тег <body> предназначен для хранения содержания веб-страницы, отображаемого в окне
браузера.
<html>
<head>
Теги заголовка документа
</head>
<body>
Содержимое страницы
</body>
</html>
82
Теги заголовка документа
К тегам данного типа относятся элементы, которые располагаются в контейнере <head>.
Все эти теги напрямую не отображаются в окне браузера, за исключением тега <title>, который
определяет название HTML-документа.
Тег <title> используется для отображения строки текста в левом верхнем углу окна
браузера, а также на вкладке.
<title>ТПУ. Кафедра АиКС</title>
Метатеги <meta> используются для хранения информации, предназначенной для
браузеров и поисковых систем.
<meta name="description" content=«Сайт кафедры АиКС">
<meta name="keywords" content=«АиКС, ТПУ, Институт Кибернетики">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
83
Примеры
<meta http-equiv="Expires" content="Wed, 14 Feb 2006 12:24:57 GMT">
(HTTP/1.0)
<meta http-equiv="Pragma" content="no-cache"> (HTTP/1.0)
<meta http-equiv="Cache-Control" content="no-cache"> (HTTP/1.1)
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta charset="utf-8"> (HTML5)
<meta http-equiv="Refresh" content="3, URL=http://ya.ru">
84
Примеры
<meta name="Robots" content="noindex, follow">
<meta name="Description" content="Документ содержит описание элементов HTML">
<meta name="Keywords" content="элементы, тэги, метаданные">
<meta name="Author" content="Петров А.М.">
<meta name="Copyright" content="копирование запрещено!!!">
<meta name="Generator" content="MSHTML 6.00.2800.1106" >
85
Блочные теги *
Блочным называется элемент, который отображается на веб-странице в виде
прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента
определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам
относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>, <p>,
<pre>, <table>,<ul> и некоторые устаревшие.
Также блочным становится элемент, если в стиле для
него свойство display задано как block, list-item, table.
<span style=”display: block”>
Данный элемент теперь блочный
</span>
86
Для блочных элементов характерны
следующие особенности.
• Блоки располагаются по вертикали друг под другом.
• Запрещено вставлять блочный элемент внутрь строчного.
• По ширине блочные элементы занимают всё допустимое пространство.
• Если задана ширина контента (свойство width), то ширина блока складывается из значений width,
полей, границ, отступов слева и справа.
• Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
• Если задана высота контента (свойство height), то высота блока складывается из значения height, полей,
границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх
блока.
• На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде
vertical-align.
• Текст по умолчанию выравнивается по левому краю.
87
Блочный тег <blockquote>
Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом,
традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40
пикселов), а также с пустым пространством сверху и снизу.
Согласно синтаксическим правилам XHTML, нельзя заключать текст непосредственно в элемент blockquote.
Даже если текст составляет всего один абзац, его нужно поместить в тэги <p>…</p> и только потом —
в <blockquote>…</blockquote>.
88
Блочный тег <div>
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с
целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей.
89
Блочный теги <h1>…<h6>
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность
секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок
первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее
значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом
жирного начертания, заголовки последующего уровня по размеру меньше.
90
Блочный тег <p>
Определяет текстовый абзац. Тег <p> является блочным элементом, всегда
начинается с новой строки, абзацы текста идущие друг за другом разделяются
между собой отступами.
91
Строчные теги *
Строчными называются такие элементы веб-страницы, которые являются
непосредственной частью другого элемента, например, текстового абзаца. В
основном они используются для изменения вида текста или его логического
выделения.
92
Строчный тег <a>
Тег <a> является одним из важных элементов HTML и предназначен для
создания ссылок. В зависимости от присутствия
атрибутов name или href тег <a> устанавливает ссылку или якорь.
Основные атрибуты:
•
href - задает адрес документа, на который следует перейти.
•
name - устанавливает имя якоря внутри документа.
•
rel - отношения между ссылаемым и текущим документами.
•
rev - отношения между текущим и ссылаемым документами.
•
target - имя окна или фрейма, куда браузер будет загружать документ
Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса
должны начинаться с указания протокола (обычно http://) и содержать имя сайта.
Относительные ссылки ведут отсчет от корня сайта или текущего документа.
93
Абсолютные и относительные ссылки *
Абсолютная ссылка
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе:
<a href="http://portal.tpu.ru">Портал ТПУ</a>
Относительная ссылка
При создании относительных ссылок надо понимать, какое значение для атрибута href следует
указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько
типичных вариантов.
1. Файлы располагаются в одной папке
<a href="Ссылаемый документ.html">Ссылка</a>
2. Файлы размещаются в разных папках
<a href="../Ссылаемый документ.html">Ссылка</a>
3. Файлы размещаются в разных папках
<a href="Папка/Ссылаемый документ.html">Ссылка</a>
94
Виды ссылок
Любая ссылка на веб-странице может находиться в одном из следующих состояний.
• Не посещённая ссылка. Такое состояние характеризуется для ссылок, которые
еще не открывали. По умолчанию не посещённые текстовые ссылки
изображаются синего цвета и с подчеркиванием.
• Активная ссылка. Ссылка помечается как активная в момент ее открытия.
Поскольку время между нажатием на ссылку и началом загрузки нового
документа достаточно мало, подобное состояние ссылки весьма
кратковременно. Активной ссылка становится также, при ее выделении с
помощью клавиатуры. Цвет такой ссылки по умолчанию красный.
• Посещенная ссылка. Как только пользователь открывает документ, на
который указывает ссылка, она помечается как посещенная и меняет свой
цвет на фиолетовый, установленный по умолчанию.
95
Строчные теги
Тег <strong> определяет жирное начертание шрифта.
Тег <i> устанавливает курсивное начертание шрифта.
Тег <br> устанавливает перевод строки в том месте, где этот тег находится.
Тег <span> предназначен для определения строчных элементов документа. С
помощью тега <span> можно выделить часть информации внутри других тегов и
установить для нее свой стиль.
Тег <img> предназначен для отображения на веб-странице изображений в
графическом формате GIF, JPEG или PNG.
При подготовке изображений следует учесть несколько моментов.
• Чем меньше размер, тем быстрее отобразится изображение.
• Размер картинки необходимо ограничить по ширине, иначе изображение
целиком не поместится в окне браузера, и появятся полосы прокрутки.
96
Форматы графических файлов
GIF —широко применяемый при создании сайтов. GIF использует 8-битовый цвет и
эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.
Область применения
Текст, логотипы, иллюстрации с четкими краями, анимированные рисунки, изображения с
прозрачными участками, баннеры.
JPEG — популярный формат графических файлов, широко применяемый при создании
сайтов и для хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость
и оттенки цветов в фотографиях неизменными. Используется преимущественно для
фотографий. Не очень подходит для рисунков содержащих прозрачные участки, мелкие детали
или текст.
PNG-24 — универсальный формат.
Особенности
Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для
полноцветных изображений.
Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от
прозрачной области изображения к цветной, так называемый градиент.
97
Теги списка
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые
начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и
систематизировать разные данные и представить их в наглядном и удобном для пользователя
виде.
Любой список представляет собой контейнер, который:
<ul> - устанавливает маркированный список;
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
<ol> - определяющий список нумерованный.
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>
Каждый элемент списка должен начинаться с тега <li>.
98
Нумерованный список
В качестве нумерующих элементов могут выступать следующие значения:
• арабские числа (1, 2, 3, ...) type =“1”
• прописные латинские буквы (A, B, C, ...) type =“A”
• строчные латинские буквы (a, b, c, ...) type=“a”
• прописные римские числа (I, II, III, ...) type=“I”
• строчные римские числа (i, ii, iii, ...) type=“i”
Для указания типа нумерованного списка применяется атрибут type тега <ol>.
Чтобы начать список с определенного значения, используется атрибут start тега <ol>.
<ol type="A" start="2">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>
99
Маркированный список
Маркированный список определяется тем, что перед каждым элементом
списка добавляется небольшой маркер, обычно в виде закрашенного кружка.
Сам список формируется с помощью контейнера <ul>, а каждый пункт списка
начинается с тега <li>.
Маркеры могут принимать один из трех видов: круг (по умолчанию)
type="disc", окружность type="circle" и квадрат type="square". Для выбора стиля
маркера используется атрибут type тега <ul>
Вид маркеров может незначительно различаться в разных браузерах, а
также при смене шрифта и размера текста.
<ul type="square">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
100
Табличные теги
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст
и рисунки. Обычно таблицы используются для упорядочения и представления
данных, однако возможности таблиц этим не ограничиваются.
<table border="1"
<tr>
<th>Ячейка
<th>Ячейка
</tr>
<tr>
<td>Ячейка
<td>Ячейка
</tr>
</table>
cellpadding="5">
1</th>
2</th>
3</td>
4</td>
101
Атрибуты тега <table>
Некоторые атрибуты тега <table>, которые применяются наиболее часто.
• align - Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left —
выравнивание таблицы по левому краю, center — по центру и right — по правому краю.
• bgcolor - Устанавливает цвет фона таблицы.
• border - Устанавливает толщину границы в пикселах вокруг таблицы.
• cellpadding - Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут
добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры.
• cellspacing - Задает расстояние между внешними границами ячеек..
• cols - Атрибут cols указывает количество столбцов в таблице, помогая браузеру в подготовке к
ее отображению.
• rules - Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка
рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать
отображать линии между колонками (значение cols), строками (rows) или группами (groups),
которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>.
• width - Задает ширину таблицы.
102
Атрибуты тега <td>
Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои атрибуты,
часть из которых совпадает с атрибутами тега<table>.
• align - Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left выравнивание по левому краю, center - по центру и right - по правому краю ячейки.
• bgcolor - Устанавливает цвет фона ячейки. Используя этот атрибут совместно с
атрибутом bgcolor тега <table> можно получить разнообразные цветовые эффекты в таблице.
• height - Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого.
• valign - Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию
содержимое ячейки располагается по ее вертикали в центре. Возможные значения: top —
выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom —
выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом
происходит привязка содержимого ячейки к одной линии.
• width - Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать
общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную
ширину.
103
Атрибут тега <td> - colspan
• colspan - устанавливает число ячеек, которые должны быть объединены по
горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
<table border="1" width="100%" cellpadding="5">
<tr>
<th colspan="2">Ячейка 1</th>
</tr>
<tr>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
</table>
В приведенной на рисунке таблице
содержатся две строки и две колонки,
причем верхние горизонтальные ячейки
объединены с помощью атрибута colspan.
104
Атрибут тега <td> - rowspan
• rowspan - устанавливает число ячеек, которые должны быть объединены по
вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
<table border="1" width="100%" cellpadding="5">
<tr>
<th rowspan="2">Ячейка 1</th>
<th >Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
</tr>
</table>
В приведенной на рисунке таблице
содержатся две строки и две колонки, левые
вертикальные ячейки объединены с
помощью атрибута rowspan.
105
105
Особенности таблиц
• У каждого параметра таблицы есть свое значение установленное по умолчанию. Это
означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с
некоторым значением.
• Одну таблицу допускается помещать внутрь ячейки другой таблицы.
• Если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы
подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы
строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась
без изменений.
• Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том,
что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые
размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках
находится.
• Браузер автоматически дополняет таблицу тегом <tbody> (если он не установлен) после тега
<table> *
106
Теги для формы
Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между
пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с
помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять
по своему усмотрению.
<form method="GET" action="#">
<input type="text" name="login" />
<textarea name="taContent">Text</textarea>
<input type="submit" value="Отправить сервер"/>
</form>
accept-charset -Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action - Адрес программы или документа, который обрабатывает данные формы.
autocomplete - Включает автозаполнение полей формы.
enctype - способ кодирования данных формы.
method - метод протокола HTTP.
name - имя формы.
novalidate - отменяет встроенную проверку данных формы на корректность ввода.
107
Создание форм
Перед отправкой данных браузер подготавливает информацию в виде пары
«имя=значение», где имя определяется атрибутом name тега <input> или
другим тегом допустимым в форме, а значение введено пользователем или
установлено в поле формы по умолчанию. После нажатия пользователем
кнопки Submit, происходит вызов обработчика формы, который получает
введенную в форме информацию, а дальше делает с ней то, что предполагает
разработчик. В качестве обработчика формы обычно выступает программа,
заданная атрибутом action тега <form>. Программа может быть написана на
любом серверном языке вроде PHP, Python, C# и др.
Допускается использовать несколько форм на странице, но они не должны
вкладываться одна в другую!!!!
108
Элементы форм
•
•
•
•
•
•
•
•
•
•
Однострочное текстовое поле
Поле для пароля
Многострочный текст
Кнопки
Зависимые переключатели
Независимые переключатели
Поле со списком
Скрытое поле
Поле с изображением
Загрузка файлов
•
•
•
•
•
•
•
•
•
Адрес электронной почты
Веб-адрес
Выбор цвета
Ввод чисел
Ползунок
Календарь
Дата и время
Поле для поиска
Поле для телефона
109
Однострочное текстовое поле
Однострочное текстовое поле предназначено для ввода строки символов с
помощью клавиатуры. Синтаксис создания такого поля следующий.
<input атрибуты>
Значение атрибута type для тега <input> по умолчанию определено как text,
поэтому его можно не указывать явно.
<input maxlength="25" size="40" value="Вася">
110
Атрибуты однострочного текстового поля
size
Ширина текстового поля, которая определяется числом символов
моноширинного шрифта. Иными словами, ширина задается
количеством близстоящих букв одинаковой ширины по горизонтали.
Устанавливает максимальное число символов, которое может быть
введено пользователем в текстовом поле. Когда это количество
maxlength достигается при наборе, дальнейший ввод становится
невозможным. Если этот атрибут опустить, то можно вводить строку
длиннее самого поля.
name
value
Имя поля, предназначено для того, чтобы обработчик формы мог
его идентифицировать.
Текст отображаемый в поле.
111
Поле для пароля
Поле для пароля - обычное текстовое поле, но отличается от него
тем, что все вводимые символы отображаются звездочками,
точками или другими знаками (это зависит от браузера). Поле
предназначено для того, чтобы никто не подглядел вводимый
пароль.
<input type="password" атрибуты>
112
Многострочный текстовое поле
Элемент формы предназначен для создания области, в которой можно вводить
несколько строк текста. В таком текстовом поле допустимо делать переносы
строк, они сохраняются при отправке данных на сервер.
Атрибут
cols
disabled
maxlength
name
readonly
rows
wrap
<textarea атрибуты>
Описание
Текст
</textarea>
Ширина поля в символах.
Блокирует доступ и изменение элемента.
Максимальное число символов текста, которое можно ввести.
Имя поля, предназначено для того, чтобы обработчик формы
мог его идентифицировать.
Устанавливает, что поле не может изменяться пользователем.
Высота поля в строках текста.
Параметры переноса строк.
113
Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов
интерфейса. По их виду сразу становится понятно, что единственное действие,
которое с ними можно производить — это нажимать на них. За счёт этой
особенности кнопки часто применяются в формах, особенно при их отправке и
очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью
тега <input> и тега <button>.
<input type="button" value="Надпись на кнопки">
<button атрибуты>Надпись на кнопке</button>
Второй способ создания кнопки предлагает расширенные возможности по
созданию кнопок. Например, на подобной кнопке можно размещать любые
элементы HTML включая изображения и таблицы.
114
Кнопки submit и reset
Кнопка Submit
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не
отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной
программы, указанной атрибутом action тега <form>. Синтаксис создания кнопки Submit
зависит от используемого тега <input> или <button>.
<input type="submit" атрибуты>
<button type="submit">Надпись на кнопке</button>
Кнопка Reset
При нажатии на кнопку Reset данные формы возвращаются в
первоначальное значение. Как правило, эту кнопку применяют для
очистки введенной в полях формы информации.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
<input type="reset" атрибуты>
<button type="reset">Надпись на кнопке</button>
115
Зависимый переключатели
Зависимый переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один
единственный вариант из нескольких предложенных.
<input type="radio" name="имя" атрибуты>
<input name="know" type="radio" value="yes">Да
<input name="know" type="radio" value="no">Нет
Атрибут
Описание
checked
Предварительное выделение переключателя. По определению, набор
переключателей может иметь только один выделенный пункт.
name
value
Имя группы переключателей для идентификации поля. Поскольку переключатели
являются групповыми элементами, то имя у всех элементов группы должно быть
одинаковым.
Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент
должен иметь свое уникальное значение, чтобы можно было идентифицировать,
какой пункт был выбран пользователем.
116
Независимый переключатель
Независимые переключатели используют, когда необходимо выбрать
любое количество вариантов из предложенного списка.
<input type="checkbox" атрибуты>
<input type="checkbox" name="result" value="yes">Да
<input type="checkbox" name="result" value="no" checked>Нет
<input type="checkbox" name="result" value="no_known" checked>Не знаю
117
Поле со списком
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов
формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений.
<select атрибуты>
<option атрибуты>Пункт 1</option>
<option атрибуты>Пункт 2</option>
</select>
Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли это
раскрывающийся список или же список с одним или множественным выбором. Вид зависит от
использования атрибута size тега <select>, который устанавливает высоту списка, ширина
списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже
представлен список множественного выбора, в котором пункты выделяются с помощью
клавиши Ctrl и Shift и раскрывающийся список.
118
Пример
119
Группировка элементов списка
<select name="food">
<optgroup label="Русская кухня">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup>
<optgroup label="Украинская кухня">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup>
</select>
120
Скрытое поле
Часто возникает ситуация, когда требуется передать в форме некоторые
промежуточные данные, которые не должны изменяться пользователем. Более
того, такие данные не должны показываться пользователю, поскольку носят
технический характер и обычно служат для передачи некоторой информации
от страницы к странице. Для этой цели применяется скрытое поле, оно не
отображается на странице и прячет своё содержимое от пользователя.
<input type="hidden" атрибуты>
121
Загрузка файлов
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме
применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как
текстовое поле, рядом с которым располагается кнопка с надписью «Обзор...»
<input type="file" атрибуты>
Прежде, чем использовать данное поле, в форме необходимо сделать следующее:
1.задать метод отправки данных POST (method="post");
2.установить у атрибута enctype значение multipart/form-data.
122
Атрибуты
Атрибут Описание
Устанавливает фильтр на типы файлов, которые вы можете
accept
отправить через поле загрузки файлов.
Ширина текстового поля, которое определяется числом
size
символов моноширинного шрифта.
multiple Позволяет выбирать и загружать сразу несколько файлов.
Имя поля, используется для его идентификации обработчиком
name
формы.
123
Типы загружаемых файлов
Если атрибут accept не указывать, тогда добавляются и загружаются файлы
любого типа. Наличие accept позволяет ограничить выбор файла, что особенно
важно, когда требуется загрузить только изображение или видео. В качестве
значения выступает MIME-тип, несколько значений разделяются между собой
запятой.
Значение
image/jpeg
image/jpeg,image/png
image/*
image/*,video/*
Описание
Только файлы в формате JPEG.
Только файлы в формате JPEG и PNG.
Любые графические файлы.
Любые графические и видеофайлы.
124
Адрес электронной почты
<input type="email" атрибуты>
Атрибут
Описание
maxlength
Устанавливает максимальное число символов, которое может быть введено
пользователем в поле. Когда это количество достигается при наборе,
дальнейший ввод становится невозможным. Если этот атрибут опустить, то
можно вводить строку длиннее самого поля.
multiple
name
Позволяет указывать несколько адресов через запятую.
Имя поля, предназначено для того, чтобы обработчик формы мог его
идентифицировать.
size
Ширина поля, которая определяется числом символов моноширинного
шрифта. Иными словами, ширина задается количеством близстоящих букв
одинаковой ширины по горизонтали.
value
Начальный почтовый адрес отображаемый в поле.
125
Примеры
126
Веб-адрес
Для ввода веб-адресов, предназначено значение url тега <input>, которое
делает проверку на правильность ввода данных. Каждый веб-адрес должен
начинаться с протокола (http://, https://, ftp://), больше ограничений нет —
адрес может быть набран латинскими символами, кириллицей, содержать
точку или наоборот, писаться без неё.
127
Выбор цвета
Для выбора шестнадцатеричного значения цвета в формы HTML5 включено специальное поле,
которое позволяет указать желаемый цвет.
<input type="color" value="цвет" name="имя">
Вид поля для выбора цвета возложен на браузеры и может различаться по своему
оформлению. В действительности же пока только Opera и Chrome корректно работает с
выбором цвета, остальные браузеры покажут стандартное текстовое поле.
128
Ввод числа
Для ввода чисел предназначено специальное поле, которое допускает
ограничения по нижней и верхней границе, а также устанавливает шаг
приращения.
<input type="number" атрибуты>
Атрибут Описание
min
max
size
step
name
value
Минимальное значение.
Максимальное значение.
Ширина поля.
Шаг приращения числа. Может быть как целым (2), так и
дробным (0.2).
Имя поля, предназначено для того, чтобы обработчик формы
мог его идентифицировать.
Начальное число, которое выводится в поле.
129
Пример
Браузеры плохо поддерживают это поле, пока лишь это делает Chrome и
Opera. В остальных браузерах поле для ввода числа приобретает вид
обычного текстового поля.
130
Ползунок
Ползунок предназначен для ввода чисел в указанном диапазоне, но в
отличие от поля <input type="number">имеет другой интерфейс и
применяется в тех случаях, когда не особенно важно указывать точное
значение.
<input type="range" min="0" max="100" step="1" value="50">
Здесь min — минимальное число в диапазоне (по умолчанию 0), max —
максимальное число (по умолчанию 100), step — шаг изменения чисел (по
умолчанию 1), value — текущее значение. По умолчанию value вычисляется
по формуле:
131
Календарь
<input type="date" атрибуты>
На сервер данные передаются в формате ГГГГММ-ДД, например, 22.12.2014, а вид календаря
может различаться в зависимости от браузера.
Полностью поддерживает календарь пока только
Opera, выводя виджет для выбора любой даты
132
Дата и время
Наряду с календарём, предназначенном для указания даты, месяца или
недели, иногда возникает необходимость вводить ещё и время, например, для
точной публикации сообщения. Для подобных ситуаций используется поле
datetime и datetime-local, синтаксис у них следующий.
<input type="datetime" атрибуты>
<input type="datetime-local" атрибуты>
133
Поле для поиска
На сайтах часто востребован поиск по ключевым словам, для ввода которых
используется текстовое поле. В HTML5 для поиска добавлено новое поле,
синтаксис его следующий:
<input type="search" атрибуты>
134
Поле для телефона
Чтобы указать телефонный номер используйте для этого специальное поле.
<input type="tel" атрибуты>
<input type="tel" name="tel"
pattern="2[0-9]{3}-[0-9]{3}">
135
Шаблон ввода данных
Выражение
\d [0-9]
\D [^0-9]
\s
[A-Z]
Описание
Одна цифра от 0 до 9.
Любой символ кроме цифры.
Пробел.
Только заглавная латинская буква.
[A-Za-z]
Только латинская буква в любом регистре.
[А-Яа-яЁё]
Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё]
Любая буква русского и латинского алфавита.
[0-9]{3}
[A-Za-z]{6,}
[0-9]{,3}
[0-9]{5,10}
^[a-zA-Z]+$
Три цифры.
Не менее шести латинских букв.
Не более трёх цифр.
От пяти до десяти цифр.
Любое слово на латинице.
^[А-Яа-яЁё\s]+$
Любое слово на русском включая пробелы.
^[ 0-9]+$
Любое число.
136
Группирование элементов форм
При создании сложной формы можно группировать некоторые элементы форм
между собой, такое группирование удобно для пользователя и позволяет
визуально отделить один логический блок от другого.
<fieldset>
<legend>Заголовок</legend> ...
</fieldset>
137
Переход между полями с помощью
табуляции
Атрибут tabindex определяет последовательность перехода между
полями при нажатии на Tab.
Следующие элементы формы могут иметь
атрибут tabindex: <button>, <input>, <select>, <textarea>.
В качестве значения принимается число, которое
задаёт шаг перехода. Так, номер 1 означает, что это
поле первое получит фокус, номер 2 будет идти
следующим и т.д.
138
Универсальные атрибуты
•
accesskey - Позволяет получить доступ к элементу с помощью заданного сочетания
клавиш.
Браузеры при этом используют различные
комбинации клавиш. Например,
для accesskey="s" работают следующие сочетания.
•
Internet Explorer: Alt + S
Chrome: Alt + S
Opera: Shift + Esc, S
Safari: Alt + S
Firefox: Shift + Alt + S
contenteditable - Сообщает, что элемент доступен для редактирования пользователем.
contenteditable="true | false"
•
contextmenu - Устанавливает контекстное меню для элемента.
contextmenu="идентификатор"
•
dir - Задает направление и отображение текста - слева направо или справа налево.
dir={ltr | rtl}
•
В качестве значения указывается идентификатор
меню, созданного с помощью тега <menu>.
ltr - текст отображается как обычно - слева направо.
rtl - Текст инвертируется и отображается справа налево
hidden - Скрывает содержимое элемента от просмотра.
139
Универсальные атрибуты
lang - браузер использует значение параметра для правильного
lang="код языка"
отображения некоторых национальных символов.
spellcheck - указывает браузеру проверять или нет правописание и
грамматику в тексте.
spellcheck="true | false"
tabindex - устанавливает порядок получения фокуса при переходе между
элементами с помощью клавиши tab.
tabindex="число"
title - Описывает содержимое элемента в виде всплывающей подсказки
title="текст"
<p title="А вот и я!">Пример всплывающей подсказки</p>
140
Универсальные атрибуты
class - Определяет имя класса, которое позволяет
связать тег со стилевым оформлением.
id - Указывает имя стилевого идентификатора.
style - Применяется для определения стиля элемента с
помощью правил CSS.
141
HTML 5
HTML5 — язык разметки гипертекста с возможностью создания вебприложений использующих аудио, видео, графику, анимацию и многое
другое.
• Поддержка геолокации
• Воспроизведение видеороликов.
• Воспроизведение аудиофайлов.
• Локальное хранилище
• Фоновые вычисления
• Оффлайновые приложения
• Рисование
• Новые элементы форм: для даты, времени, поиска, чисел и др. 142
Семантика
Поисковые системы начинают лучше индексировать сайт, потому что чётко
отделяют контент страницы от вспомогательных элементов.
Речевые браузеры, предназначенные для слепых людей, пропускают заголовок
и переходят непосредственно к содержимому.
Сайты могут автоматически обмениваться контентом и другой информацией
между собой.
Все эти возможности называются семантикой и позволяют представить данные
в удобном для роботов виде.
143
Пример простейшей страницы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
<style> p { color: red; } </style>
</head>
<body>
<p>Страница на HTML5</p>
</body>
</html>
144
Проблемы с IE7 и IE8
установить тип документа <!DOCTYPE html>;
включить специальный скрипт;
в стилях для новых тегов установить display: block.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
145
Новые теги HTML5
<article>
<aside>
<audio>
<canvas>
<command>
<datalist>
<details>
<figcaption>
<figure>
<footer>
<header>
<hgroup>
<keygen>
<main>
<mark>
<menu>
<meter>
<nav>
<output>
<progress>
<rp>
<rt>
<ruby>
<section>
<source>
<summary>
<time>
<video>
<wbr>
146
HTML5: звук
<audio controls="controls" autoplay="autoplay" preload="auto">
<source src="audio/1.mp3" type="audio/mp3">
<source src="audio/1.ogg" type="audio/ogg">
Не возможно воспроизвести музыку
</audio>
147
HTML5 рисование
Не рассмотрено
148
HTML5: Datalist
<input list="character">
<datalist id="character">
<option value="Чебурашка"></option>
<option value="Крокодил Гена"></option>
<option value="Шапокляк"></option>
</datalist>
149
HTML5: Подробнее
<details open="open">
Скрытое содержимое
</details>
<details>
<summary>Об авторе</summary>
Савенко Игорь
</details>
Тег <details> используется для хранения информации, которую
можно скрыть или показать по требованию пользователя. По
умолчанию содержимое тега не отображается, для изменения
статуса применяется атрибут open.
150
HTML5: keygen
Используется для генерации пары ключей — закрытого и открытого. Когда
форма отправляется на сервер, закрытый ключ сохраняется на локальном
компьютере, а открытый ключ передается вместе с формой. Сами ключи
необходимы для шифрования и расшифровки данных, создания и проверки
цифровой подписи.
http://keygen.alexchamberlain.co.uk/
151
HTML 5: meter
Используется для вывода значения в некотором известном диапазоне.
Используется преимущественно для отображения числовых значений,
например, количества результатов поиска, объема жидкости, давления и др.
<meter
<meter
<meter
<meter
value="0" max="100" low="10" high="60">Низкая</meter>
value="30" max="100" low="10" high="60">Нормальная</meter>
value="80" max="100" low="10" high="60">Горячая</meter>
value="100" max="100" low="90" high="90">Кипяток</meter>
152
HTML5: output
<form>
<label for="cm">Длина в сантиметрах</label>
<input type="number" id="cm" onchange="inch.value=(cm.value/2.54).toFixed(2)"/>
<p>
Длина в дюймах: <output name="inch"></output>
</p>
</form>
153
HTML5: прогресс бар
Используется для отображения прогресса завершенности задачи. Изменение
значения происходит через JavaScript.
<p>Пожалуйста, подождите, фотографии загружаются.</p>
<progress max="100" value="25">
Загружено на <span id="value">25</span>%
</progress>
154
HTML5: Геолокация
Не рассмотрено
155
CSS
Cascading Style Sheets
Каскадные таблицы стилей
Каскадные таблицы стилей
CSS это язык стилей, определяющий отображение HTML-документов.
CSS позволяет работать с:
• шрифтами;
• цветом;
• полями;
• строками;
• высотой;
• шириной;
• фоновыми изображениями;
• позиционированием элементов
• многими другими вещами.
Преимущества
• управление отображением множества документов с помощью одной таблицы стилей;
• более точный контроль над внешним видом страниц;
• различные представления для разных носителей информации (экран, печать, и т. д.);
• сложная и проработанная техника дизайна.
Правила *
Правила CSS содержат определения стиля элемента или группы
элементов. Они используют следующий синтаксис:
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Селектор – к какому HTML-тегу (тегам) применяется свойство
Метод 1: Через атрибут style
<html>
<head>
<title>Example</title>
</head>
<body>
<p style="color: #FF0000;">This is a red text</p>
</body>
</html>
Метод 2: Внутренний
<html>
<head>
<title>Example</title>
<style type=“text/css”>
p {
color: #FF0000;
}
</style>
</head>
<body>
<p>This is a red text</p>
</body>
</html>
Метод 3: @Import
@import url("имя файла") [типы носителей];
<html>
<head>
<title>Example</title>
<style type=“text/css”>
@import url(styles.css) all;
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
1. Поддерживается не всеми браузерами;
2. Замедляет загрузку страницу
Метод 4: Внешний
(ссылка на таблицу стилей)
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>This is a red text</p>
</body>
</html>
Абсолютные размеры
in (inches) – дюймы (1 дюйм = 2.54 см)
cm (centimeters) – сантиметры
mm (millimeters) – миллиметры
pt (points) – пункт (1 пункт = 1/72 дюйма)
pc (picas) – пика (1 пика = 12 пунктам)
px (pixel units) – пиксели (1 пиксель = 1/96 дюйма = 0.26 мм)
164
Относительные размеры
% - процент от размеров, заданных для родительского элемента
em - измеряемое значение зависит от размера шрифта текущего элемента (он
устанавливается через атрибут font-size). Когда он явно не задан используется
размер текста который заложен в браузере. Поэтому 1em изначально равен
размеру шрифта заложенному в браузере по умолчанию.
ex - этот аргумент определяется как высота символа «х» в нижнем регистре. Ex
привязан к размеру шрифта заданного в браузере по умолчанию, если у
родительского элемента задан атрибут «font-size» то он привязан к нему.
165
Иерархические селекторы (1) *
E1 E2 { ... } –
для элемента/класса/идентификатора E2, находящегося в
элементе/классе/идентификаторе E1 (любой уровень вложенности);
E1>E2 { ... } –
для элемента/класса/идентификатора E2, находящегося в
элементе/классе/идентификаторе E1 (первый уровень вложенности);
166
Иерархические селекторы *
E1~E2 { ... } –
для элемента/класса/идентификатора E2, следующего за
элементом/классом/идентификатором E1;
E1+E2 { ... } –
для элемента/класса/идентификатора E2, непосредственно
следующего за элементом/классом/идентификатором E1;
167
Приоритеты правил (в порядке уменьшения)
span { color: yellow !important; }
#news
div p .news
div .news
span.news
.news
div .header span
div p span
.header span
div span
span
*
168
Псевдоклассы *
div:hover { ... } –
вид элемента при наведении указателя мыши;
input:focus { ... } Вид элемента при получении им фокуса;
img:first-child { ... } –
вид картинки, которая является первым дочерним элементом для
своего родительского элемента
img:last-child { ... }
169
Псевдоэлементы
p:fist-letter { ... } –
p::fist-letter { ... } –
вид первой буквы параграфа;
p:first-line { ... } –
p::first-line { ... } -
вид первой строчки параграфа;
div:before { content: "..."; ... } –
div::before { content: "..."; ... } –
добавляет псевдоэлемент как первый дочерний элемент элемента div;
div:after { content: "..."; ... } –
div::after { content: "..."; ... } –
добавляет псевдоэлемент как последний дочерний элемент элемента div;
170
Свойства задающие цвет и фон *
•
•
•
•
color - описывает цвет переднего плана элемента;
background-color - описывает цвет фона элемента;
background-image - используется для вставки фонового изображения;
background-repeat - повторение фонового изображения;
• background-attachment - фиксирует фоновый рисунок;
• background-position – позиционирует фоновое изображение;
• background
background-color: #FF0000 [rgb(255,000,000)];
background-image: url(“image.png");
background-repeat: no-repeat [repeat-x | repeat-y];
background-attachment: fixed [scroll];
background-position: right bottom [top | left];
background: #FF0000 url(“image.png") no-repeat fixed right bottom;
Цвет в CSS *
• По имени. Используются англоязычные названия цветов, например blue или red;
• В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко
используется в HTML;
• В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой
компоненты цвета может варьироваться от 0 до 255;
• В формате RGB с указанием величин в процентах, например, rgb(30%, 40%, 70%)),
где значение каждой компоненты цвета может варьироваться от 0 до 100.
p
p
p
p
p
{color:
{color:
{color:
{color:
{color:
lime}
rgb(0,255,0)}
#0f0}
#00ff00}
rgb(0%, 100%, 0%)}
Семейства шрифтов
С засечками (serif)
• Times New Roman
• Garamond
• Georgia
Без засечек (sans-serif)
• Trebuchet
• Arial
• Verdana
Моноширинный (monospace)
• Courier
• Courier New
Шрифты
• font-family - указывает приоритетный список шрифтов
• font-style - стиль шрифта [normal | italic |oblique];
• font-variant - используется для выбора между вариантами normal и small-caps. Шрифт smallcaps использует малые заглавные буквы вместо букв нижнего регистра.
• font-weight - описывает, насколько жирным должен отображаться шрифт. Шрифт может
быть normal или bold. Некоторые браузеры поддерживают числовые значения 100-900 для
описания веса шрифта.
• font-size - размер шрифта. Используются различные единицы измерения (например, пикселы
и проценты) для описания размера шрифта.
• font - сокращённая запись
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
p { font: italic bold 30px arial, sans-serif; }
Текст
• text-indent – устанавливает отступ для первой строки абзаца;
• text-align - выравнивание текста [left | right | center | justify];
• text-decoration - позволяет добавлять различные ”декоративные эффекты” [underline |
overline | line-through;]
• letter-spacing - интервал между буквами в пикселях, пунктах, в относительных
единицах em - относительная единица длины, равная размеру текущего шрифта;
• text-transform - трансформация текста [capitalize | uppercase | lowercase | none]
Ссылки *
Псевдокласс позволяет учитывать различные условия или события при
определении свойств HTM-тэга.
Синтаксис селектора: селектор:псевдокласс (Пример: a:link)
Псевдоклассы для ссылок:
:link - используется для ссылок на страницы, которые пользователь ещё не посещал;
:visited - используется для ссылок на страницы, которые пользователь посетил;
:hover - используется для ссылок, над которыми находится указатель мыши;
:active - используется для активных ссылок.
Идентификация и группирование
элементов (class и id) *
• class - задает стилевой класс, который позволяет связать определенный тег со
стилевым оформлением. В значении допускается указывать сразу несколько
классов, разделяя их между собой пробелом.
• id - задает стилевой идентификатор, уникальное имя элемента, которое
используется для изменения его стиля и обращения к нему через скрипты.
Идентификатор в коде документа должен быть в единственном экземпляре,
иными словами, встречаться только один раз.
<ul>
<li
<li
<li
<li
</ul>
class="class1">CLASS1</li>
class="class1">CLASS1</li>
class="class2">CLASS2</li>
id="id1" class="class2">CLASS3 + ID</li>
.class1 {
color: red;
}
.class2 {
color: yellow;
}
#id1 {
color: blue;
}
Рамки *
• border-width - Толщина рамки, свойство может иметь значения thin, medium и
thick, или числовое значение в пикселах.
• border-color - определяет цвет рамки. Значения - нормальные значения цвета,
например: "#FF0000", "rgb(255,000,000)" или “red“;
• border-style - типы рамок;
• border – сокращенная запись
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
p {
border: 1px solid blue;
}
Блоковая модель ****
Блоковая модель в CSS описывает блоки, генерируемые для HTML-элементов.
Блоковая модель также имеет детальные опции для определения полей, рамок,
заполнения и содержимого каждого элемента.
Поля и заполнение (ширина и высота)
#block_id {
height: 150px;
width: 150px;
margin: 20px 15px 10px 5px;
}
<!-- Ширина блока не меняетcя -->
150px
150px
#block_id {
height: 150px;
width: 150px;
padding: 20px 15px 10px 5px;
}
<!-- Ширина блока меняетcя -->
180px
170px
CSS: box-sizing
content-box — по умолчанию, контент внутри блока будет отображаться постарому, т.е. как в примере выше: вместо 150х150 будет 180х170
border-box позволяет значения padding и border вычитать из ширины и длины
блока, т.е. в нашем примере блок останется с фиксированными параметрами,
но для контента останется 120х130 px.
div {
width: 150px;
height: 150px;
padding: 20px 15px 10px 5px;
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
120px
130px
181
Плавающие элементы (float) *
Элемент может "всплывать" вправо или влево с помощью свойства float. То есть
блок с его содержимым может всплывать вправо или влево в окне документа (или
содержащего блока) [left | right | none]
<style>
#any_text {
float: left;
}
</style>
<div id="any_text">
<img src="220px-Jan_van_Eyck_061.jpg“>
</div>
<p>Text</p>
Свойство clear - управляет поведением последовательностью
всплывающих элементов документа. [left | right | both | none]
Принцип таков, что если clear, например, имеет для бокса
значение both, то верхний край рамки этого бокса всегда
будет находиться под нижним краем поля возможных
всплывающих сверху боксов.
Позиционирование ****
Устанавливает способ позиционирования элемента относительно окна
браузера или других объектов на веб-странице.
position: [absolute | fixed | relative | static | inherit]
Абсолютное позиционирование (absolute)
Указывает, что элемент абсолютно позиционирован, при этом другие элементы
отображаются на веб-странице словно абсолютно позиционированного элемента и
нет. Положение элемента задается свойствами left, top, right и bottom, также на
положение влияет значение свойства position родительского элемента. Так, если у
родителя значение position установлено как static или родителя нет, то отсчет
координат ведется от края окна браузера. Если у родителя
значение position задано как fixed, relative или absolute, то отсчет координат
ведется от края родительского элемента.
Позиционирование ****
Фиксированное позиционирование (fixed)
По своему действию это значение близко к absolute, но в отличие от него привязывается к
указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при
прокрутке веб-страницы.
Относительное позиционирование (relative)
Позиция элемента, размещаемого относительно, обсчитывается относительно его оригинальной
позиции в документе. Это означает, что вы смещаете элемент вправо, влево, вверх или вниз. Таким
образом, элемент всё ещё занимает в документе пространство после позиционирования.
Статическое позиционирование (static)
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к
каким-либо результатам.
Наследуемое позиционирование (inherit)
Наследует значение родителя.
Наслоение с помощью z-index ****
Любые позиционированные элементы на веб-странице могут
накладываться друг на друга в определенном порядке, имитируя тем самым
третье измерение, перпендикулярное экрану. Каждый элемент может
находиться как ниже, так и выше других объектов веб-страницы, их
размещением по z-оси и управляет z-index. Это свойство работает только для
элементов, у которых значение position задано как absolute, fixed или relative.
В качестве значения используются целые числа
(положительные, отрицательные и ноль). Чем больше
значение, тем выше находится элемент по сравнению с теми
элементами, у которых оно меньше. При равном значении zindex, на переднем плане находится тот элемент, который в
коде HTML описан ниже.
z-index: число | auto | inherit
!important
Если к паре свойство - значение приписать объявление !important,
тогда это значение CSS-свойства получит максимальный приоритет
в каскаде стилей. Проще говоря, это объявление сработает для
элемента независимо от наличия других правил CSS для этого же
элемента.
CSS3 ***
border-radius : Устанавливает радиус скругления уголков рамки. Если рамка не задана, то
скругление также происходит и с фоном.
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Кол.
Результат
1
Радиус указывается для всех четырех уголков.
2
Первое значение задает радиус верхнего левого и нижнего правого уголка, второе
значение — верхнего правого и нижнего левого уголка.
3
Первое значение задает радиус для верхнего левого уголка, второе — одновременно
для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4
По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего
правого и нижнего левого уголка.
CSS3 - Прозрачность
В веб-дизайне полупрозрачность также применяется и
достигается за счёт свойства opacity или формата цвета RGBA,
который задаётся для фона.
opacity: [0..1] - Основная особенность этого свойства состоит в
том, что значение прозрачности действует на все дочерние
элементы внутри, а не только на фон.
rgba - Обычно по дизайну полупрозрачным должен быть только
фон элемента, а текст непрозрачным для сохранения его
читабельности. Лучше всего использовать формат RGBA, частью
которого является альфа-канал или иными словами значение
прозрачности.
CSS3 - Градиент
Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и
переходов между ними может быть несколько.
1.
Линейный градиент
Для записи позиции применяются ключевые слова top, bottom и left, right, а также их
сочетания. Порядок слов не важен, можно написать left top или top left.
Вместо ключевого слова допускается использовать угол наклона, который показывает
направление градиента. Вначале пишется положительное или отрицательное значение угла,
затем к нему слитно добавляется deg.
Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис
позволяет добавлять их неограниченное количество, перечисляя цвета через запятую.
CSS3 - Градиент
Позиция
Угол
Описание
top
270deg Сверху вниз.
left
0deg
Слева направо.
bottom
90deg
Снизу вверх.
right
180deg Справа налево.
top left
-45deg
top right
225deg От правого верхнего угла к левому нижнему.
bottom left
45deg
От левого верхнего угла к правому нижнему.
От левого нижнего угла к правому верхнему.
bottom right -225deg От правого нижнего угла к левому верхнему.
Вид
CSS3: Градиент
Firefox 3.6+
background: -moz-linear-gradient(top, #fefcea, #f1da36);
Chrome 1-9, Safari 4-5
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea),
color-stop(100%,#f1da36));
Chrome 10+, Safari 5.1+
background: -webkit-linear-gradient(top, #fefcea, #f1da36);
Opera 11.10+
background: -o-linear-gradient(top, #fefcea, #f1da36);
IE10
background: -ms-linear-gradient(top, #fefcea, #f1da36);
CSS3
background: linear-gradient(top, #fefcea, #f1da36);
CSS3: Градиент
2. Радиальные по своему принципу похожи на линейные градиенты, но один цвет
переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки.
Радиальный градиент создаётся с помощью свойства background или backgroundimage с параметром radial-gradient, который аналогично линейному градиенту
имеет свои разновидности под каждый браузер, они различаются лишь
префиксами. В простейшем случае для задания радиального градиента
понадобится всего два параметра: начальный и конечный цвет. По умолчанию,
начальная точка располагается при этом в центре.
Позиция точки пишется ключевыми словами или доступных единиц измерения
вроде пикселов или процентов.
CSS3: Градиент
• top left = left top = 0% 0% (в левом верхнем углу);
• top = top center = center top = 50% 0% (по центру вверху);
• right top = top right = 100% 0% (в правом верхнем углу);
• left = left center = center left = 0% 50% (по левому краю и по центру);
круговой градиент
• center = center center = 50% 50% (по центру) - это значение по умолчанию;
• right = right center = center right = 100% 50% (по правому краю и по центру);
• bottom left = left bottom = 0% 100% (в левом нижнем углу);
эллиптический градиент
• bottom = bottom center = center bottom = 50% 100% (по центру внизу);
• bottom right = right bottom = 100% 100% (в правом нижнем углу).
Возможны две формы радиального градиента — круг (circle) и эллипс (ellipse), которые
различаются своим видом. По умолчанию устанавливается эллиптический градиент.
CSS3: Градиент
Размер градиента, который зависит от применяемых ключевых слов.
Размер пишется через пробел после типа градиента (circle или ellipse).
Значение
contain
Код
background: radial-gradient(30px
20px, circle contain, #fff, #000);
background: radial-gradient(30px
closest-corner 20px, circle closest-corner, #fff,
#000);
background: radial-gradient(30px
farthest-side 20px, circle farthest-side, #fff,
#000);
cover
background: radial-gradient(30px
20px, circle cover, #fff, #000);
Описание
Форма градиента совпадает с
ближайшей к нему стороной блока (для
круга) или одновременно совпадает с
ближайшими горизонтальными и
вертикальными сторонами (для
эллипса).
Форма градиента вычисляется на
основании информации о расстоянии до
ближайшего угла блока.
Похож по своему действию на contain,
но градиент распространяется до
дальней стороны блока.
Форма градиента вычисляется на
основании информации о расстоянии до
дальнего угла блока.
Вид
CSS3: Тени *
box-shadow – используется для добавления тени, у которого имеется шесть
значений, из них только два являются обязательными. На рисунке показано
свойство box-shadow со всеми возможными значениями, они пронумерованы
для их идентификации.
1.
2.
3.
4.
5.
6.
ключевое слово inset устанавливает тень внутри элемента;
сдвиг тени по горизонтали (5px - вправо, -5px - влево);
сдвиг по вертикали (5px - вниз, -5px - вверх);
радиус размытия тени (0 - резкая тень);
растяжение тени (5px - растяжение, -5px - сжатие);
цвет тени.
CSS3: Текстовые эффекты в CSS3
text-shadow - добавляет тень к тексту, а также устанавливает её параметры:
цвет тени, смещение относительно надписи и радиус размытия. Свойство textshadow может работать совместно с псевдоэлементами :first-letter и :first-line.
text-shadow: none | <цвет> <сдвиг по x> <сдвиг по y> <радиус размытия>
None - Отменяет добавление тени.
Цвет - Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом
текста. Необязательный параметр.
сдвиг по x - Смещение тени по горизонтали относительно текста. Положительное значение
этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y - Смещение тени по вертикали относительно текста. Также допустимо использовать
отрицательное значение, которое поднимает тень выше текста. Обязательный параметр.
Радиус - Задает радиус размытия тени. Чем больше это значение, тем сильнее тень
сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию
устанавливается равным 0.
CSS3: Трансформация
Масштабирование, наклон и поворот любого элемента возможен с помощью
свойства CSS3 transform. Оно поддерживается всеми современными
браузерами (с префиксами)
transform: <функция> [<функция>]* | none
Функции трансформации
rotate - поворот элемента на заданный угол относительно точки трансформации, задаваемой
свойством transform-origin.
transform: rotate(<угол>)
scale - Масштаб элемента по горизонтали и вертикали.
transform: scale(sx[, sy]);
Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.
skewX - Наклоняет элемент на заданный угол по вертикали.
transform: skewX(<угол>)
skewY - Наклоняет элемент на заданный угол по горизонтали.
transform: skewY(<угол>)
CSS3: Функции трансформации
translate - сдвигает элемент на заданное значение по горизонтали и вертикали.
transform: translate(tx[, ty])
translateX - сдвигает элемент по горизонтали на указанное значение.
Положительное значение сдвигает вправо, отрицательное влево.
transform: translateX(tx)
translateY - сдвигает элемент по вертикали на указанное значение.
Положительное значение сдвигает вниз, отрицательное вверх.
transform: translateY(ty)
CSS3: Анимация
Универсальное свойство, которое позволяет одновременно задать
значения для создания эффект перехода между двумя состояниями
элемента, они могут быть определены с помощью псевдо
класса :hover или :active, а также динамически через JavaScript.
199
CSS3: Функции анимация
ease - Анимация
начинается медленно,
затем ускоряется и к
концу движения опять
замедляется.
200
CSS3: Функции анимация
ease-in - Анимация
медленно начинается, к
концу ускоряется
201
CSS3: Функции анимация
ease-in - Анимация начинается
быстро, к концу замедляется.
202
CSS3: Функции анимация
ease-in-out - Анимация
начинается и заканчивается
медленно.
203
CSS3: Функции анимация
linear - Одинаковая скорость от
начала и до конца.
204
CSS3: Функции анимация
step-start- Как таковой
анимации нет. Стилевые
свойства сразу же
принимают конечное
значение
205
CSS3: Функции анимация
step-end - Как таковой анимации
нет. Стилевые свойства
находятся в начальном значении
заданное время, затем сразу же
принимают конечное значение.
206
CSS3: Функции анимация
steps - Ступенчатая функция, имеющая
заданное число шагов.
Здесь: <число> — целое число больше нуля;
start — задаёт полунепрерывную снизу функцию;
end — задаёт полунепрерывную сверху функцию.
transition-timing-function: steps(<число>, start | end)
207
208
CSS3: Анимация
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
209