
- •Лекция 4. Вставка изображений. Использование форм в HTML
- •Добавление рисунка
- •Альтернативный текст
- •Изменение размеров рисунка
- •Форматы файлов
- •Форматы файлов
- •Форматы файлов
- •Создание формы
- •Создание формы
- •Отправка данных формы
- •Методы передачи данных
- •Методы передачи данных
- •Однострочное текстовое поле
- •Однострочное текстовое поле
- •Поле для пароля
- •Поле для пароля
- •Кнопки
- •Кнопки
- •Кнопка Submit
- •Кнопка Reset
- •Скрытое поле
- •Поле с изображением
- •Многострочный текст
- •Переключатели
- •Переключатели
- •Флажки
- •Флажки
- •Поле со списком
- •Группирование элементов списка
- •Загрузка файлов
- •Загрузка файлов
- •Загрузка файлов
- •Адрес электронной почты
- •Веб-адрес
- •Выбор цвета
- •Ввод чисел
- •Ползунок
- •Календарь
- •Дата и время
- •Поле для поиска
- •Поле для телефона
- •Группирование элементов форм
- •Группирование элементов форм
- •Переход между полями с помощью табуляции
- •Блокирование элементов форм
- •Подсказывающий текст
- •Шаблон ввода данных
- •Шаблон ввода данных
- •Шаблон ввода данных
- •Шаблон ввода IP-адреса
- •Обязательное поле

Лекция 4. Вставка изображений. Использование форм в HTML

Добавление рисунка
Для добавления изображения на веб-страницу используется тег <img>, атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий
URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес.

Альтернативный текст
Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения и дает представление об его содержании. Затем зарезервированное пустое поле заменяется картинкой.

Изменение размеров рисунка
Для изменения размеров рисунка средствами HTML у тега <img> предусмотрены атрибуты width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее.

Форматы файлов

Форматы файлов

Форматы файлов

Создание формы
Сейчас практически ни один сайт не обходится без элементов интерфейса вроде полей ввода текста, кнопок, переключателей и флажков. Они необходимы для взаимодействия с пользователем, чтобы он мог искать на сайте по ключевым словам, писать комментарии, отвечать на опросы, прикреплять фотографии и делать много других подобных вещей. Именно формы и обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Так что если вы планируете сделать нечто подобное на сайте, без форм не удастся это реализовать.
Сама форма создаётся с помощью тега <form>, внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:
1.адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы;
2.элементами формы, которые представляют собой стандартные поля для ввода информации пользователем;
3.кнопку отправки данных на сервер.

Создание формы

Отправка данных формы
Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа- обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега <form>