Создание Web-страниц с помощью языка разметки HTML. Таблицы. Формы.
Практическое занятие 2
Создание Web-страниц с помощью языка разметки HTML. Таблицы. Формы.
Цель занятия: формирование у обучающихся профессиональных компетенций создания, редактирования и форматирования таблиц и форм в html-документе для структурирования информации и взаимодействии с пользователями при выполнении практического задания.
Тип урока: урок закрепления знаний и умений.
Вид урока: комбинированный.
Ход урока:
Организационный момент: объявление темы и целей, обозначение плана проведения занятия.
Мотивация: объяснение важности создания собственных сайтов и рекламы товаров и услуг через интернет.
Актуализация теоретических знаний: проверка знаний студентов о языке HTML, тегах, гипертексте и назначении языка.
Объяснение темы «Таблицы и формы в HTML»: объяснение принципов работы с таблицами и формами, демонстрация примеров кода.
Практическая работа: студенты создают таблицы и формы на основе предоставленных примеров и инструкций.
Создание страницы «Специальности»
Создайте новый файл с расширением .html. Назовите его как вашу будущую страницу (например, index2.html).
Вставьте следующие команды в ваш HTML-файл:
<!DOCTYPE html>
<html>
<head>
<title>Название страницы</title>
</head>
<body>
<!-- Содержимое вашей страницы -->
</body>
</html>
Внутри тега <body> добавьте содержимое вашей веб-страницы. Это может быть текст, изображения, таблицы, списки и т.д. Например:
<p>Добро пожаловать на вторую страницу нашего сайта!</p>
<h1>Моя вторая страница</h1>
<p>Здесь вы можете найти дополнительную информацию о специальностях нашего колледжа</p>
Сохраните файл и откройте его в браузере. Вы увидите созданную вами веб-страницу.
Свяжите данную страницу с ранее созданной «index.html».
Чтобы связать эту страницу с другими, используйте команду <a href="адрес_страницы.html">Текст ссылки</a> на главной страничке вашего сайта.
Самостоятельно создать новую страницу «Наша группа» и связать ее с главной страницей.
Создание, форматирование таблиц в HTML
На странице index2.html, внутри тега <body> создайте таблицу, состоящую из 2 столбцов и строк, равных количеству специальностей)
В первой строке таблицы добавьте заголовки столбцов: «Код специальности», «Наименование специальности».
Код для создания таблицы в HTML:
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1,1</td>
<td>Ячейка 1,2</td>
</tr>
<tr>
<td>Ячейка 2,1</td>
<td>Ячейка 2,2</td>
</tr>
</tbody>
</table>
Пояснения:
<table> — определяет начало таблицы.
<thead> — определяет заголовок таблицы.
<tr> — определяет строку таблицы.
<th> — определяет заголовок столбца.
<td> — определяет содержимое ячейки.
<tbody> — определяет тело таблицы.
Границы ячеек можно установить с помощью атрибута border со значением 1.
Создание, форматирование форм в HTML
Создайте новый файл с расширением .html. Назовите его как вашу будущую страницу (например, index3.html).
На новой странице «Обратная связь» необходимо создать форму обратной связи.
Тег <form> — создание формы
Для создания формы в HTML используется тег <form>. Все, что находится между открывающим и закрывающим тегом является элементами управления формой.
Итак, наш первый код.
Поле для ввода текста.
В нашей форме должно быть поле для ввода текста. Оно создается с помощью тега <textarea>. Добавим к нашей пустой форме поле ввода текста.
<form>
<textarea></textarea>
</form>
Результат
Для вставки пояснительного текста используется атрибут placeholder тега <textarea>.
<form>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>
Результат
Создание поля для ввода имени.
Элемент <input> является универсальным, в отличии от элемента <textarea>. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.
Изменим нашу форму.
<form>
<input type="text" placeholder="Введите ваше имя"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>
Создание поля с адресом электронной почты.
<form>
<input type="text" placeholder="Введите ваше имя"></input>
<input type="email" placeholder="Введите ваш email"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>
Самостоятельно добавьте поля Фамилия, Отчество
Группировка элементов управления в HTML-форме
<form>
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Введите ваше имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>
Кнопки в HTML-форме
Добавим две кнопки:
Отправить.
Очистить.
Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).
Кнопка «Очистить» будет очищать все введенные в форму данные.
Кнопка отправки формы
Кнопка отправки формы на сервер создается с помощью тега <button> (от англ. button — кнопка) с типом submit (от англ. submit — разместить). Полный HTML-код кнопки отправки формы на сервер: <button type="submit">Отправить</button>.
Кнопка очистки формы
Полный HTML-код кнопки очистки формы: <button type="reset">Очистить</button>.
Дополнить форму.
<label><button type="submit"> Отправить </button>
<button type="reset">Очистить</button></label>
</fieldset>
</form>
Проверка заполнения формы
Валидация форм, или проверка заполнения — довольно важный момент при работе с сервером. Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется).
………………..
<label> Ваше имя: <input type="text" placeholder="Введите ваше имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение" required></textarea><label>
<label><button type="submit">Отправить</button>
<button type="reset">Очистить</button></label>
</fieldset>
</form>
Форма загрузки файлов
Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:
<input type="file" value="Выберите файл">
Дополним нашу форму. Создадим отдельную группу элементов.
…..
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label>
</fieldset>
</form>
Выбор даты
Выбрать дату можно с помощью типа date все того же input’а. Полный код: <input type="date" />.
Добавим в форму возможность выбора даты.
…..
<label>Укажите дату - <input type="date"><label>
</fieldset>
</form>
Выпадающий список
Выпадающий список создается с помощью тега <select>, а элемент списка с помощью <option>. Давайте создадим в нашей форме возможность указать адресата.
…..
<label>Кому отправить -
<select>
<option>Директору</option>
</select></label>
</fieldset>
</form>
Самостоятельно добавить поля: Заместителю директора, Методический кабинет, Канцелярия, Учебная часть
Переключатели
Переключатели бывают зависимые — можно выбрать только один вариант и независимые.
Зависимый переключатель
Зависимый переключатель создается с помощью тега input и его атрибута type=«radio». Соответственно в зависимом переключателе можно выбрать только один вариант.
Независимый переключатель
Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.
Добавим эти элементы на нашу форму.
………
<label>Отправить копию письма себе на почту?<input type="radio" name="primer">Да <input type="radio" name="primer">Нет</label>
<label>Каким образом направить вам ответ
<input type="checkbox" name="a" value="1" checked>По электронной почте
<label>
</fieldset>
</form>
Самостоятельно добавить два поля «По электронной почте на бумажном носителе», «Перезвонить по телефону».
Работу предоставить преподавателю для поверки.
Подведение итогов занятия (5 мин.): обсуждение результатов практической работы, выявление ошибок и успехов студентов.
Домашнее задание (3 мин.): подготовка к следующему занятию, изучение дополнительных материалов по теме.
Рефлексия (6 мин.): студенты делятся своими впечатлениями от урока, обсуждают сложности и успехи, высказывают предложения по улучшению процесса обучения.
