Изображения. 4 html5

Содержание

Слайд 2

ВЫСОТА И ШИРИНА ИЗОБРАЖЕНИЯ

ВЫСОТА И ШИРИНА ИЗОБРАЖЕНИЯ

Слайд 3

РАЗМЕЩЕНИЕ ИЗОБРАЖЕНИЯ В КОДЕ

РАЗМЕЩЕНИЕ ИЗОБРАЖЕНИЯ В КОДЕ

Слайд 5

ПРАВИЛА СОЗДАНИЯ ИЗОБРАЖЕНИЙ

СОХРАНЯЙТЕ ИЗОБРАЖЕНИЯ В ПРАВИЛЬНОМ ФОРМАТЕ
JPEG, GIF, PNG
СОХРАНЯЙТЕ ИЗОБРАЖЕНИЯ С

ПРАВИЛА СОЗДАНИЯ ИЗОБРАЖЕНИЙ СОХРАНЯЙТЕ ИЗОБРАЖЕНИЯ В ПРАВИЛЬНОМ ФОРМАТЕ JPEG, GIF, PNG СОХРАНЯЙТЕ
ПРАВИЛЬНЫМИ ЗНАЧЕНИЯМИ ШИРИНЫ И ВЫСОТЫ
ИСПОЛЬЗУЙТЕ ПРАВИЛЬНОЕ РАЗРЕШЕНИЕ
На большинстве настольных ПК браузеры отображают графику с разрешением 72 ppi (пиксел на дюйм)

Слайд 6

ИЗОБРАЖЕНИЯ, СОХРАНЯЕМЫЕ В ПАПКАХ САЙТА, ДОЛЖНЫ ОБЛАДАТЬ ТЕМИ ЖЕ САМЫМИ ЗНАЧЕНИЯМИ ВЫСОТЫ

ИЗОБРАЖЕНИЯ, СОХРАНЯЕМЫЕ В ПАПКАХ САЙТА, ДОЛЖНЫ ОБЛАДАТЬ ТЕМИ ЖЕ САМЫМИ ЗНАЧЕНИЯМИ ВЫСОТЫ
И ШИРИНЫ, ЧТО ВЫ УКАЗАЛИ В КОДЕ СТРАНИЦЫ

КАК МОЖНО ИЗМЕНЯТЬ РАЗМЕРЫ:
Размер 150Х300 пикселов

1. Уменьшение размера

Можно уменьшить размер на 50%

Результат: скорость загрузки выше исходного

Слайд 7

2. Увеличение размера изображения:

Увеличение размера исходного изображения приведет к ухудшению его качества

3.

2. Увеличение размера изображения: Увеличение размера исходного изображения приведет к ухудшению его
Кадрирование изображения:

Можно обрезать какую-либо часть изображения

Слайд 8

Иллюстрации и подписи

Иллюстрации и подписи

Слайд 9

ФОРМЫ

НАБОР ЭЛЕМЕНТОВ ДЛЯ СБОРА ПОЛЬЗОВАТЕЛЬСКИХ ДАННЫХ

СТРУКТУРА ФОРМЫ

Идеален для коротких форм
При простом получении

ФОРМЫ НАБОР ЭЛЕМЕНТОВ ДЛЯ СБОРА ПОЛЬЗОВАТЕЛЬСКИХ ДАННЫХ СТРУКТУРА ФОРМЫ Идеален для коротких
данных с веб-сервера (без отправки сведений в базу данных)

Слайд 11

ВВОД ПАРОЛЯ

ВВОД ПАРОЛЯ

Слайд 12

ТЕКСТОВАЯ ОБЛАСТЬ

ТЕКСТОВАЯ ОБЛАСТЬ

Слайд 13

ПЕРЕКЛЮЧАТЕЛИ

ПЕРЕКЛЮЧАТЕЛИ

Слайд 14

ФЛАЖКИ

ФЛАЖКИ

Слайд 15

Раскрывающийся список

Раскрывающийся список

Слайд 16

СПИСОК МНОЖЕСТВЕННОГО ВЫБОРА

СПИСОК МНОЖЕСТВЕННОГО ВЫБОРА

Слайд 17

ЗАГРУЗКА ФАЙЛОВ НА СЕРВЕР

Создает поле с кнопкой «Обзор»

ЗАГРУЗКА ФАЙЛОВ НА СЕРВЕР Создает поле с кнопкой «Обзор»

Слайд 18

КНОПКА ПОДТВЕРЖДЕНИЯ

КНОПКА ПОДТВЕРЖДЕНИЯ

Слайд 19

Графическая кнопка

Графическая кнопка

Слайд 20

МЕТКИ ЭЛЕМЕНТОВ ФОРМЫ

МЕТКИ ЭЛЕМЕНТОВ ФОРМЫ

Слайд 21

ГРУППИРОВКА ЭЛЕМЕНТОВ ФОРМЫ

ГРУППИРОВКА ЭЛЕМЕНТОВ ФОРМЫ

Слайд 22

Валидация данных формы

Проверка правильности заполнения полей. В HTML5 появилась собственная технология валидации

Валидация данных формы Проверка правильности заполнения полей. В HTML5 появилась собственная технология
введенных данных – работа перекладывается на веб- браузер

Слайд 23

ВВОД ДАТЫ

ВВОД ДАТЫ

Слайд 24

ВВОД URL-АДРЕСА

ВВОД URL-АДРЕСА

Слайд 25

ВВОД АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ

ВВОД АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ

Слайд 26

ПОЛЕ ВВОДА ПОИСКОВОГО ЗАПРОСА

ПОЛЕ ВВОДА ПОИСКОВОГО ЗАПРОСА