58027

Створення форм у HTML-сторінках

Конспект урока

Педагогика и дидактика

Навчальна: опанувати технологію і методи створення форм в HTML-документах Розвивальна: розвивати логічне мислення, пізнавальний інтерес до дисципліни та обраної спеціальності; Виховна: виховувати акуратність у веденні електронної документації...

Украинкский

2014-04-18

794.5 KB

8 чел.

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ДЕРЖАВНИЙ ВИЩИЙ НАВЧАЛЬНИЙ ЗАКЛАД

Київський національний економічний
університет ім. В. Гетьмана

РОМЕНСЬКИЙ КОЛЕДЖ

 

ПЛАН

відкритого заняття з предмету: «Web-дизайн»

спеціальність  “Обслуговування комп’ютерних та інтелектуальних систем і мереж”

Тема: «Створення форм у HTML-сторінках»

Склав викладач: Ткаченко В.М.

Розглянуто і затверджено на засіданні циклової комісії зі спеціальності “Обслуговування комп’ютерних систем і мереж ”
Протокол №__

від «__»__________ 20   р.

Голова циклової комісії   _________________Хрокало Г.А.

м. Ромни


МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

РОМЕНСЬКИЙ КОЛЕДЖ КНЕУ

НАВЧАЛЬНО-МЕТОДИЧНА КАРТКА(ПЛАН) ЗАНЯТТЯ № 28

Предмет     Web-дизайн

Група          К 4-1      Дата  03.02.2011 р.

 

Тема заняття:   Створення форм у HTML-сторінках

Вид заняття:    Лабораторне

Навчальна: опанувати технологію і методи створення форм в HTML-документах

Розвивальна: розвивати логічне мислення, пізнавальний інтерес до дисципліни та обраної спеціальності;

Виховна: виховувати акуратність у веденні електронної документації

 

А. Наочні посібники: Відеокліп, слайди_______________________

Б. Роздатковий матеріал: Індивідуальні завдання_______________

В. ТЗН:  ПК (ноутбук), мультимедійний проектор, PowerPoint___

Г. Література:

1.Методи та засоби Інтернет-технологій: навч. посібник/ В.В. Самсонов, А.Л. Єрохін. - Х., 2008. - 264с.

2.А. Кириленко Самоучитель HTML - Спб.: Питер; Киев: Издательская группа BHV, 2006 - 272 c. [96-111]

3. Квинт И. HTML и CSS на 100%. – Спб.: Питер, 2008. – 352 с.[136-163]


ПЛАН ЗАНЯТТЯ

І. Організаційний момент

1. Перевірка присутніх на занятті.

2. Поточний інструктаж з техніки безпеки (з використанням слайдів)

ІІ. Актуалізація опорних знань студентів

Фронтальне опитування студентів

(запитання винесені на слайди)

ІІІ. Виконання лабораторної роботи № 11

Обговорення послідовності створення форми (використання ТЗН та власних наочних посібників)

Створення форми згідно з індивідуальним завданням

(роздатковий матеріал)

IV. Закріплення вивченого матеріалу

Тестові завдання  

(за наявності часу)

V. Підведення підсумків заняття

Оцінювання знань студентів

VІ. Пояснення домашнього завдання.

  •  Оформити звіт до лабораторної роботи №11
  •  Підготуватися до самостійної роботи з тем: «Додавання мультимедія», «Фрейми», «Конструювання форм»

за вказаною літературою:

1.Методи та засоби Інтернет-технологій: навч. посібник/ В.В. Самсонов, А.Л. Єрохін. - Х., 2008. - 264с. [85-91]

2.А. Кириленко Самоучитель HTML - Спб.: Питер; Киев: Издательская группа BHV, 2006 - 272 c. [82-111,128-140]

3. Квинт И. HTML и CSS на 100%. – Спб.: Питер, 2008. – 352 с.[106-160]

Склав викладач   ____________             В.М. Ткаченко


ЛАБОРАТОРНА РОБОТА №11

ТЕМА: Створення форм у HTML-сторінках

МЕТА:  опанувати технологію і методи створення форм в HTML-документах.

Обладнання: Персональна ЕОМ IBM-PC.

ПОРЯДОК ВИКОНАННЯ РОБОТИ

1.Повторити теоретичний матеріал з теми «Конструювання форм» (опитування)

2. У редакторі “Блокнот” створити файл:

- форму згідно з індивідуальним завданням;

- задати ім’я файлу Prog_11.htm;

- файл зберегти в раніше створеній директорії.

При створенні форми використати наступні елементи та параметри: 

створення текстового поля       

<input type=text name=firstname size="40" maxlength="20">  

створення поля для введення інформації, коментарів

<textarea name="comments"></textarea>

створення кнопок Подача запросу та  Скинути   

<input type=submit value="Подача запросу"> <input type=reset value="Скинути">

створення прапорців           вибір_1

<input type=”checkbox name="selection" value="yes" checked > вибір_1
створення перемикачів

<input type=radio name="sel" value="select">
<input type=
radio name="sel1" value="select1">

створення випадаючого списку    
<select name="country">
<option value="list " selected>список_4


</select>

3. Запустити програму-браузер MS Internet Explorer і відкрити в ній створений файл.

4. Переглянути вид отриманих HTML-сторінок і вивести їх на друк.

* Виконати тестові завдання (Робочий стіл-MyTestХ-LR_Form_WD)

Зміст звіту:

  1.  Роздрукований (переписаний) код HTML-сторінки

Література 

1.Методи та засоби Інтернет-технологій: навч. посібник/ В.В. Самсонов, А.Л. Єрохін. - Х., 2008. - 264с.

2.А. Кириленко Самоучитель HTML - Спб.: Питер; Киев: Издательская группа BHV, 2006 - 272 c.

3. Квинт И. HTML и CSS на 100%. – Спб.: Питер, 2008. – 352 с.


ЗАПИТАННЯ З ТЕМИ
  

«Конструювання форм”
для фронтального опитування

  1.  Для чого призначені форми?
  2.  Назвіть тег та параметри, що призначені для створення HTML форми?
  3.  Поясніть призначення параметру method та які значення він може приймати? 
  4.  Перерахуйте теги елементів керування HTML форми.
  5.  Перерахуйте типи елементів керування INPUT.
  6.  Для чого призначені параметр size та параметр maxlength тега <INPUT>?
  7.  Опишіть структуру тега <SELECT>
  8.  Розкажіть призначення параметру checked, в яких тегах він застосовується.
  9.  В яких тегах використовують параметри cols, rows? 
  10.  Як створити приховані поля?
  11.  Що собою являє функція елементу керування типу submit?


ТЕСТОВІ ЗАВДАННЯ

до лабораторної роботи №11 «Створення форм у HTML-сторінках»

  1.  Який або  які  з  наступних фрагментів HTML-коду містять  помилки?

<FORM action=mailto:mymail@mail.dom method=post enctype=application/x-wwtf-form-rlencoded></FORM>

<FORM action=mailto:mymail@mail.dom method=get enctype=text/plain></FORM>

<FORM action=mailto:mymail@mail.dom method=post enctype=text/plain></FORM>

<FORM action=mailto:mymail@mail.dom method=post enctype=plain></FORM>

<FORM action=mailto:mymail@mail.dom method=post enctype=text></FORM>

  1.  Що означає, якщо атрибут METHOD має значення GET?

Форма приймає дані

Дані не відсилаються формою

Форма посилає дані разом з URL

  1.  Який або  які  з  наступних фрагментів HTML-коду містять  помилки?

<INPUT type=text value="Введіть текст: ">

<INPUT type=text name=itext vаluе="Введіть текст: ">

<INPUT type=text name=itext> Введіть текст </INPUT>

Введіть текст: <INPUT type=text name=itext>

  1.  Що вказує атрибут ACTION тега FORM?

Стиль елементів форми
Адреса програми-обробника даних форми

Дія, при активації елементів форми 

  1.  Який або  які  з  наступних фрагментів HTML-коду кнопки відправки даних містять помилки?

<INPUT type=button value=submit>

<INPUT type=submit value=OK>

<INPUT type=submit name=OK>OK</INPUT>

<INPUT type=submit name=OK>

<INPUT type=image src=ok.gif value=OK>

  1.  За допомогою яких атрибутів можна задати «довжину і  висоту» елемента  textarea?

width / height

cols / rows

size

length

Всі варіанти невірні

  1.  Який або які з наступних фрагментів HTML-коду містять помилки?

<ТЕХТАRЕА>Введите длинный текст</ТЕХТАRЕА>

<TEXTAREA name=ltext> Введите длинный текст</ТЕХТАRЕА>

<TEXTAREA name=ltext value =Введите длинный текст >Введите длинный текст</TEXTAREA>

<TEXTAREA name=ltext value =Введите длинный текст>

  1.  Який атрибут  елемента  form  вказує  скрипт, який  буде  обробляти дані форми?

Action

Method

Name

Accept

Enctype

  1.  У текстове поле  <input type="text" size="3" maxlength="3" disabled="disabled"> (продовжіть)

Можна ввести не більше трьох символів

Можна ввести скільки завгодно символів, але тільки 3 будуть відображатися

Можна ввести  скільки  завгодно  символів  і всі будуть відображатися

Текст ввести неможливо

Всі варіанти невірні

  1.  Який з  наведених нижче варіантів описує кнопку, яка здійснює передачу даних  форми на сервер?

<input type="submit" value="відправити">

<input type="button" value="відправити">

<input type="reset" value="відправити">

<input type="hidden" value="відправити">

Всі варіанти вірні

  1.  Який з  наведених нижче варіантів є коректним?

<form><input type="file" size="30"></form>

<form enctype="multipart/form-data"><input type="file" size="30"></form>

<form enctype="file"><input type="file" size="30"></form>

<form method="post"><input type="file" size="30"></form>

ІНДИВІДУАЛЬНІ ЗАВДАННЯ

до лабораторної роботи № 11

по темі «Створення форм у HTML-сторінках»

Варіант 1

Варіант 2

Варіант 3

Варіант 7

Варіант 8

Варіант 9


 

А также другие работы, которые могут Вас заинтересовать

82249. Социальные и культурно- историческиеформы жизни:общее строение и иерархия уровней. Научные и вненаучные представления о формах жизни 41.6 KB
  Державин в своей поэме Бог весьма образно характеризовал проблему человека: Частица целой я вселенной Поставлен мнится мне в почтенной Средине естества я той Где кончил тварей ты телесных Где начал ты духов небесных И цепь существ связал всех мной. Во всех этих случаях отчетливо обнаруживаются две основные методологические тенденции в объяснении природы человека: редукционистская сводящая природу человека либо к биологической либо напротив к социальной его стороне и целостная системная понимающая природу человека как единое...
82250. Время как параметр физических событий и время как мера становления человеческого бытия (общее условие осуществления жизни) 34.6 KB
  Социальное время – это продолжительность существования определенных общностей людей общественных явлений отдельных личностей а также социальных процессов. Время зависит также от самого отношения людей ко времени. В истории общества образы времени менялись так образ обратимого времени все возвращается на круги свои сменился на образ необратимого линейного времени время течет от прошлого к настоящему и от него к будущему.
82251. Объективное и субъективное время. Социальное и культурно-историческое время 32.58 KB
  Социальное и культурноисторическое время. В наст вр отмечает Микешина происходит концептуальная революция наука вновь открывает для себя время. В текстах проявляются и формируются и проявляются представления о времени социсторическое время.
82252. Переосмысление категорий пространства и времени в гуманитарном контексте (М.М. Бахтин). Введение понятия хронотопа как конкретного единства пространственно-временных характеристик 32.05 KB
  Бахтин. В гуманитарном познании Бахтина П и В проявляются как совершенно новая идея. Зная идеи о П и В Канта и Бергсона Бахтин находит свое видение этих категорий значимое для современного понимания природы темпоральности и пространственности в познании. Бахтин соединяет действующее сознание и все мыслимые пространственные и временные отношения в единый центр архетектоническое целое.
82253. Коммуникативность (общение учёных) как условие создания нового социально-гуманитарного знания и выражение социально –культурной природы научного познания 34.79 KB
  Нормальная фаза. Эта фаза в истории специальности конструируется ретроспективно только в тех случаях когда новая специальность сформировалась. Нормальная фаза часто завершается опубликованием манифеста в котором содержатся в общих чертах программа разработки проблематики и оценки ее перспективности. Фаза формированиям развития сети характеризуется интеллектуальными и организационными сдвигами приводящими к объединению исследователей в единой системе коммуникаций.
82254. Научные конвенции как необходимость и следствие коммуникативной природы познания 308.25 KB
  Проблемы общения в науке Интерес к структуре формальным моделям диалога и их содержательным возможностям возродившийся в семидесятых годах постепенно привел к формированию такого направления логико-методологических исследований которое со временем получает название...
82255. Рождение знания в процессе взаимодействия коммуницирующих индивидов. Распространение и борьба научных идей. Индоктринация 32.16 KB
  Важную роль в развитии социальногуманитарных науках играет коммуникация ученых диалог между ними. Механизмом их преодоления является постоянный диалог ученых представителей разных школ в социальногуманитарных науках. Диалог является важнейшим видом коммуникации и представляет собой попеременный обмен высказываниями репликами между двумя или более ученымигуманитариями. Диалог может представлять собой определенную дискуссию беседу диспут и т.
82256. Рациональное, объективное, истинное в социально-гуманитарных науках 28.02 KB
  Социальное познание является частным видом научного познания подчиняющимся его критериям и законам. Социальное познание неразрывно связано с предметными справедливо несправедливо добро зло субъективными установки взгляды нормы цели ценностями на основе которых осуществляется познание объекта. Таким образом социальное познание объективно так как изучение объекта общества на определенном этапе развития происходит на основе объективных критериев и законов характерных для научного познания в целом. Социальное познание рационально...
82257. Классическая и неклассическая концепция истины. Экзистенциальная истина, истина и правда 39.28 KB
  Стержень классической концепции истины принцип соответствия знания действительности. Исследования показали возможность применения классической концепции истины к любым мыслимым мирам но в этом случае она должна быть уточнена следующим образом. Для классической концепции истины характерны следующие принципы: действительность не зависит от мира знания; между нашими мыслями и действительностью можно установить однозначное соответствие; существует критерий установления соответствия мыслей действительности; сама теория соответствия...