Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Конспект урока «Разработка Веб - сайтов с использованием языка HTML» "Интерактивная Web-страница "Анкета"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 24 мая.

Подать заявку на курс
  • Информатика

Конспект урока «Разработка Веб - сайтов с использованием языка HTML» "Интерактивная Web-страница "Анкета"

библиотека
материалов

«Разработка Веб - сайтов с использованием языка HTML»

Интерактивная Web-страница "Анкета"

Цели:

Образовательные

1. Обеспечить в ходе урока, закрепление и контроль усвоения тем курса “Разработка Web - сайтов с использованием языка НТМL”.

2.  Закрепить умение использовать язык разметки гипертекста HTML для создания Интерактивной Web-страницы "Анкета"

Развивающие

1. Развивать у учащихся самостоятельность в принятии решения, планирования деятельности.

2. Развивать познавательный интерес учащихся, внося в течение конкурса элемент соревнования.

Воспитательные

1. Содействовать в ходе конкурса формированию основных мировоззренческих идей (причинно-следственные связи)

2. Способствовать воспитанию у учащихся внимательности, целеустремленности.


Ход занятия

1. Организационный момент

Здравствуйте, ребята! Я рада приветствовать Вас на заключительном занятии по курсу “Разработка Web-сайтов с использованием языка НТМL”.


2. Повторение ранее изученного материала

Установите соответствие

http://learningapps.org/1477932




hello_html_m6f9397.png

hello_html_m1b1de16c.png





3. Практические задания «Интерактивная Web-страница "Анкета"».

Теоретический материал.


Вся форма заключается в контейнер .

Текстовые поля

Текстовые поля создаются с помощью тэга со значением атрибута

TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.

Для того чтобы разделить строки, понадобится тэг перевода строки
.

Переключатели

Чтобы создать группу переключателей («радиокнопок»), создается такая группа с помощью тэга со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".

Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу.

Атрибут CHECKED задает выбор кнопки по умолчанию

Флажки

Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге co значением атрибута TYPE="checkbox".

Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NAME.

Еще одним обязательным атрибутом является VALUE. Значение атрибута VALUE должно быть уникальным для каждого флажка.

Поля списков


Для реализации раскрывающегося списка используется контейнер , в котором каждый элемент списка определяется тэгом .

Выбираемый по умолчанию элемент задается с помощью атрибута SELECTED.

Текстовая область

Создается область с линейной прокруткой с помощью тэга с обязательными атрибутами: NАМЕ, задающим имя области, ROWS, определяющим число строк, и COLS - число столбцов области.

Отправка данных из формы

Отправка введенной в форму информации или очистка полей от уже введенной информации осуществляется с помощью кнопок. Кнопки создаются с помощью тэга

. Для создания кнопки, которая отправляет информацию, атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, - значение "Отправить".



Практическая часть

1. Начальная страница сайта. Создадим начальную страницу Web-сайта "Компьютер».

В операционной системе Windows запустить простейший текстовой редактор Блокнот.
Ввести тэги, определяющие структуру Web-страницы.
Ввести заголовок Web-страницы: Интерактивная Web-страница "Анкета"

Ввести заголовок текста, отображаемый в браузере:



Интерактивная Web-страница "Анкета"




</HTML>

hello_html_m6213da08.pngПросмотреть получившуюся Web-страницу в браузере.


2. Интерактивная Web-страница "Анкета" содержит форму, которая заключается в контейнере . В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.


<hello_html_m575132d3.pngFORM>
Пожалуйста, введите ваше имя:


ФИО" SIZE=30>


E-mail:








hello_html_m59f35b73.png

3. Вставим в HTML-код группу переключателей, в которой устанавливается, к какой группе пользователей относится посетитель.

Укажите, к какой группе пользователей вы себя относите:


учащийся


студент


учитель



hello_html_67057824.png

hello_html_m21b81c61.png





4. Вставим в HTML-код группу флажков, которые выявляют наиболее популярные сервисы Интернета.

Какие из сервисов Интернета вы используете наиболее часто:


WWW


e-mail


FTP



hello_html_m43df0e94.png





hello_html_74a10029.png

5. Вставим в HTML-код раскрывающийся список, содержащий наиболее популярные браузеры.

13. Какой браузер вы используете наиболее часто:


Браузер">
Internet Explorer
Google Chrome
Opera
Mozilla




hello_html_m4f695915.png

hello_html_5697a157.png

hello_html_m31b5cfa7.png

6. Вставим в HTML-код текстовую область, в которой посетитель сайта может высказать свои замечания и предложения.

Какую ещё информацию вы хотели бы видеть на сайте?





hello_html_m593760e8.png



hello_html_561fedd0.png


7. Чтобы данные из интерактивной формы были отправлены по указанному адресу электронной почты или на сервер, необходимо указать этот адрес и создать кнопку Отправить.


<FORM ACTION="mailto: lazareva.arz@yandex.ru " METHOD="POST" ENCTYPE="text/plain">
Отправить">

hello_html_m22f94cfe.png

На данном этапе должна получиться такая страница:



hello_html_6655697a.png

Сохраните Web-страницу.

Посмотрите получившуюся Web-страницу в браузере



Для закрепления материала, предлагается учащимся пройти тест.

Тест "Язык программирования HTML. Создание Web-страниц"

1. Web-страница (документ HTML) представляет собой:
а) Текстовый файл с расширением txt или doc
б) Текстовый файл с расширением htm или html
в) Двоичный файл с расширением com или exe
г) Графический файл с расширением gif или jpg

2.Для просмотра Web-страниц в Интернете используются программы:
а) MicroSoft Word или Word Pad
б) MicroSoft Access или MicroSoft Works
в) Internet Explorer или Mozilla FireFox
г) HTMLPad или Front Page

3. Тег - это:
а) Стартовый и конечный маркеры элемента
б) Текст, в котором используются спецсимволы
в) Указатель на другой файл или объект
г) Фрагмент программы, включённой в состав Web-страницы

4. Тег - это:
а) Идентификатор заголовка окна просмотра
б) Идентификатор заголовка документа HTML
в) Идентификатор перевода строки
г) Идентификатор HTML-команд документа для просмотра

5. Для вставки изображения в документ HTML используется команда:
а) ris.jpg
б)
в)
г)

6. Гиперссылка задается тегом:
а)
б) www.chat.ru
в) текст
г)

7. Гиперссылки на Web - странице могут обеспечить переход...
а) только в пределах данной web - страницы
б) только на web - страницы данного сервера
в) на любую web - страницу данного региона
г) на любую web - страницу любого сервера Интернет

8. Гипертекст - это:
а) Текст очень большого размера
б) Текст, в котором используется шрифт большого размера
в) Структурированный текст, где возможны переходы по выделенным меткам
г) Текст, в который вставлены объекты с большим объемом информации

9. Для создания Web-страниц используются программы:
а) FrontPage и QuantaPlus
б) Turbo Pascal и QBasic
в) Visual Basic и ACDSee
г) ScanDisk и Defrag 

10. Аббревиатура HTML – это сокращение от:
А) Hideous, Terrible, Mega-Leviathan
Б) HyperText Markup Language
В) Hard To Master Lingo

11. Обязательные тэги любой HTML-страницы:
А)
Б)
В)
Г)

12. Текстовая информация, выводимая на экран, располагается:
А) между тэгами и
Б) после тэга
В) между тэгами и
Г) между тегами и

13. Тег позволяет задать:
А) полужирный шрифт
Б) курсив
В) подчёркнутый шрифт
Г) моноширинный шрифт

14. Тег позволяет задать:
А) полужирный шрифт
Б) курсив
В) подчёркнутый шрифт
Г) моноширинный шрифт

15. Тег

позволяет задать:


А) переход на другую строку
Б) полужирную горизонтальную линию
В) заголовок
Г) абзац

16. Тег «разрыва» строки это:
А) тег
Б) тег
В) тег

Г) тег

AutoShape 117. Какой вариант выравнивания заголовка по правому краю будет правильным:
А)


Б)


В)

ЗАГОЛОВОК


Г) ЗАГОЛОВОК

18. Тэг отображает:
А) круг с радиусом равным половине ширины окна в центре страницы
Б) ячейку таблицы, равную половине ширины окна, с выравниванием текста по центру
В) вертикальную линию, равную половине ширины окна и выровненную по центру
Г) горизонтальную линию, равную половине ширины окна и выровненную по центру

19. Укажите правильный код цвета:
А) "#FF00FF"
Б) "&FF00FF"
В) "*FF00FF"
Г) "FF00FF"

20. Укажите тег, задающий маркированный список:
А)
Б)
В)
Г)
Автор
Дата добавления 03.03.2016
Раздел Информатика
Подраздел Конспекты
Просмотров564
Номер материала ДВ-502551
Получить свидетельство о публикации

Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх