Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Разработка Web-сайтовс использованием языкаразметки гипертекста HTML

Содержание

Урок 1. Web-страницы и Web-сайты. Структура веб-страницы. Угринович, § 3.7.1- 3.7.2
Разработка Web-сайтов с использованием языка разметки гипертекста HTML8 класс, IV четверть Урок 1. Web-страницы и Web-сайты. Структура веб-страницы. Угринович, § 3.7.1- 3.7.2 Понятие веб-сайтаИнформация во Всемирной паутине хранится в форме Web-сайтов. Web-сайт по структуре Виды веб-сайтовОфициальные (правительство, Дума, школа…)Коммерческие Личные Достоинства веб-страниц:Малый информационный объем («легкие»)Пригодны для просмотра в разных ОС.Динамичные.Интерактивные. Этапы создания веб-сайта:Построить сайт на локальном компьютере.Протестировать (проверить правильность работы).Разместить в Интернете Программы для создания сайта:1) простейший текстовый редактор (без форматирования текста): Визуальные веб-редакторыСоздание сайта на языке HTML очень трудоемкое, нужны специальные знания.Есть визуальные Структура Web-страницыУгринович, § 3.7.2 ТэгиВид Web-страницы задается управляющими командами - тэгами, которые заключаются в угловые скобки Структура Web-страницыВесь HTML-код страницы помещается внутрь главного контейнера: . Web-страница разделяется на Заголовок веб-страницыЗаголовок Web-страницы заключается в контейнер Содержит название документа и справочную информацию Пишем шаблон веб-страницы Компьютер Основное содержание веб-страницыОсновное содержание страницы помещается в контейнер .Может содержать: текст, Шаблон веб-страницы Компьютер Как сохранить веб-страницу1. Cоздать для сайта специальную папку и сохранять все файлы Создаем свой сайт….Нужно различать имя файла index.html - под которым Web-страница хранится Практическая работа 3.8 Учебный сайт «Компьютер»Проект сайта: сколько Web-страниц будет входить Домашнее задание§ 3.7.1 – 3.7.2 – определения и тэги наизусть;вопросы (с.114, 115)ПР УРОК № 2 Проверочная работа № 1В какой форме хранится информация во Всемирной паутине? Что Урок 2. Форматирование текста на Web-страницеУгринович, § 3.7.3 Форматирование текстаПока страница не слишком привлекательна: мелкий шрифт и черный текст на Цвет шрифтаЗначение атрибута COLOR можно задать 2-мя способами:а) названием цвета (например, 4. Горизонтальная линия отделит заголовок от остального содержания страницы с помощью одиночного Практическая работа 3.8 Учебный сайт «Компьютер»Отформатировать текст начальной страницы:1) Создать и Домашнее задание§ 3.7.3 – тэги наизусть;вопросы (с.114, 115, 116)ПР 3.8 (задания 3-4) – с. 166 УРОК 3 Проверочная работа № 2В какой форме хранится информация во Всемирной паутине? Что Урок 3. Вставка изображений в Web-страницыУгринович, § 3.7.4 Вставка изображенийНа Web-страницах могут быть графические файлы 3 форматов — GIF, JPG Поясняющий текст. Расположение рисунка в тексте.Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Вид готового сайта Код страницы сайта Компьютер Все о компьютере На этом сайта вы Домашнее задание§ 3.7.4 – тэги наизусть;вопросы (с.114, 115, 116, 118)ПР 3.8 (задание 5) – с. 167 Урок 4 Проверочная работа № 3Что такое Web-сайт?Типы сайтов.Каким образом веб-страницы объединяются в веб-сайты? Урок 4. Гиперссылки на Web-страницахУгринович, § 3.7.5 Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные с предыдущей.Гиперссылка состоит из Виды гиперссылок1) внутренняя: Указатель ссылки2) внешняя: Указатель ссылки Указатели гиперссылокУказатель – видимая часть гиперссылки: текст или картинка Адресная часть гиперссылокПерейти на другие веб-страницы: Указатель ссылкиОткрыть картинку в браузере: КартинкаПрослушать Гиперссылка на электронную почтуГиперссылка этого типа заключается в особый контейнер Наш е-mail Вид готовой страницы сайта Код страницы сайта Компьютер Все о компьютере На этом сайта вы Домашнее задание§ 3.7.5 – тэги наизусть;вопросы (с.114, 115, 116, 118, 119)ПР 3.8 Урок 5 Проверочная работа № 4Что такое Web-сайт?Каким образом веб-страницы объединяются в веб-сайты? Что Урок 5. Списки на Web-страницахУгринович, § 3.7.6 Виды списковНумерованныеМаркированныеСписки терминов (как в словаре)Вложенные списки Нумерованный списокСписок – в контейнере Элемент списка – тег Атрибут TYPE – Маркированный списокСписок – в контейнере Элемент списка – тег Атрибут TYPE – Список терминовСписок – в контейнере Элемент списка – тег Сначала пишется термин, Домашнее задание§ 3.7.6 – тэги наизусть;вопросы (с.114, 115, 116, 118,119,120)ПР 3.8 (задания Урок 6 Урок 6. Интерактивные формы на Web-страницахУгринович, § 3.7.7 Проверочная работа № 5Что такое Web-сайт?Каким образом веб-страницы объединяются в веб-сайты? Что Понятие интерактивной формыДля общения посетителей сайта с его создателями на веб-странице Текстовое полеОсновной контейнер Текстовое поле – для ввода текста с клавиатуры: тэг Переключатели (радиокнопки)Круглая кнопка для выбора одного из нескольких вариантов ответов: ФлажкиКвадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=“checkbox” Каждый элемент Поля списковДля создания раскрывающего списка используют контейнер В нем каждый элемент списка задается тэгом Текстовая областьТекстовая область с линейкой прокрутки – для ввода текста произвольной Отправка данных из формыКнопка отправки создается тэгом Атрибуты: TYPE=“submit”VALUE=“Отправить” (надпись на кнопке)Чтобы Готовая анкета Домашнее задание§ 3.7.4 – тэги наизусть; закончить таблицу основных тэгов;вопросы (с.114, 115,
Слайды презентации

Слайд 2 Урок 1. Web-страницы и Web-сайты. Структура веб-страницы.
Угринович, § 3.7.1-

Урок 1. Web-страницы и Web-сайты. Структура веб-страницы. Угринович, § 3.7.1- 3.7.2

3.7.2

Слайд 3 Понятие веб-сайта
Информация во Всемирной паутине хранится в форме

Понятие веб-сайтаИнформация во Всемирной паутине хранится в форме Web-сайтов. Web-сайт по

Web-сайтов.
Web-сайт по структуре напоминает журнал по какой-либо теме

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

Слайд 4 Виды веб-сайтов
Официальные (правительство, Дума, школа…)
Коммерческие
Личные

Виды веб-сайтовОфициальные (правительство, Дума, школа…)Коммерческие Личные

Слайд 5 Достоинства веб-страниц:
Малый информационный объем («легкие»)
Пригодны для просмотра в

Достоинства веб-страниц:Малый информационный объем («легкие»)Пригодны для просмотра в разных ОС.Динамичные.Интерактивные.

разных ОС.
Динамичные.
Интерактивные.

Слайд 6 Этапы создания веб-сайта:
Построить сайт на локальном компьютере.
Протестировать (проверить

Этапы создания веб-сайта:Построить сайт на локальном компьютере.Протестировать (проверить правильность работы).Разместить в

правильность работы).
Разместить в Интернете – подобрать сервер для хостинга

(платный или бесплатный).

Слайд 7 Программы для создания сайта:
1) простейший текстовый редактор (без форматирования

Программы для создания сайта:1) простейший текстовый редактор (без форматирования текста):

текста): Блокнот
2) браузер для

просмотра страниц:
Internet Explorer
3) программа обработки изображений:
Photoshop

Слайд 8 Визуальные веб-редакторы
Создание сайта на языке HTML очень трудоемкое,

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

нужны специальные знания.
Есть визуальные веб-редакторы (программы) для создания сайтов.

Работают по принципу WYSIWYG (что видишь, то и получишь).

Слайд 9 Структура Web-страницы
Угринович, § 3.7.2

Структура Web-страницыУгринович, § 3.7.2

Слайд 10 Тэги
Вид Web-страницы задается управляющими командами - тэгами, которые

ТэгиВид Web-страницы задается управляющими командами - тэгами, которые заключаются в угловые

заключаются в угловые скобки < >
Тэги бывают одиночные

(неповторяющиеся) или парные (контейнеры): перед закрывающим тэгом контейнера пишут прямой слэш (/)

Тэги пишутся английскими буквами (прописными, строчными).

Слайд 11 Структура Web-страницы
Весь HTML-код страницы помещается внутрь главного контейнера:

Структура Web-страницыВесь HTML-код страницы помещается внутрь главного контейнера: . Web-страница разделяется

.

Web-страница разделяется на
2 логические части:

заголовок (HEAD)
содержание (BODY).

Слайд 12 Заголовок веб-страницы
Заголовок Web-страницы заключается в контейнер
Содержит

Заголовок веб-страницыЗаголовок Web-страницы заключается в контейнер Содержит название документа и справочную

название документа и справочную информацию о странице (например, тип

кодировки), которая используется браузером для ее правильного отображения.

Название Web-страницы содержится в контейнере <ТITLE> и отображается в верхней строке окна браузера при просмотре страницы.


<ТITLЕ>Компьютер


Слайд 13 Пишем шаблон веб-страницы


Компьютер

Пишем шаблон веб-страницы Компьютер





Слайд 14 Основное содержание веб-страницы
Основное содержание страницы помещается в контейнер

Основное содержание веб-страницыОсновное содержание страницы помещается в контейнер .Может содержать: текст,

.
Может содержать: текст, таблицы, бегущие строки, картинки, ссылки,

звуковые файлы...


Поместим на страницу текст «Все о компьютере»:
Все о компьютере

Слайд 15 Шаблон веб-страницы


Компьютер

Шаблон веб-страницы Компьютер Все о компьютере




Все о компьютере


Слайд 16

Слайд 17 Как сохранить веб-страницу
1. Cоздать для сайта специальную папку

Как сохранить веб-страницу1. Cоздать для сайта специальную папку и сохранять все

и сохранять все файлы сайта в этой папке.

2. Web-страницу

сохранить в виде файла с именем index.html - это титульный лист сайта (первым загружается в браузер)
Расширения файла Web-страницы – .htm или .html

Слайд 18 Создаем свой сайт….
Нужно различать имя файла index.html -

Создаем свой сайт….Нужно различать имя файла index.html - под которым Web-страница

под которым Web-страница хранится в файловой системе, и собственно

имя Web-страницы «Компьютер» - высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами.
Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.

1. В Блокнот ввести HTML-код Web-страницы.
2. Сохранить файл под именем index.html в папке сайта. Выбрать тип файла – «Все файлы».
3. Открыть этот файл в браузере для просмотра.

Слайд 19

Слайд 20 Практическая работа 3.8 Учебный сайт «Компьютер»
Проект сайта:
сколько

Практическая работа 3.8 Учебный сайт «Компьютер»Проект сайта: сколько Web-страниц будет входить

Web-страниц будет входить в сайт,
тематика страниц,
связи страниц (гиперссылки).

Структура

сайта «Компьютер»:
1) начальная (домашняя) страница;
2) «Программы» (классификация программного обеспечения);
3) «Словарь» (словарь компьютерных терминов);
4) «Анкета» (опрос посетителей сайта).

Стр. 165-166, задания 1-2.

Слайд 21 Домашнее задание
§ 3.7.1 – 3.7.2 – определения и

Домашнее задание§ 3.7.1 – 3.7.2 – определения и тэги наизусть;вопросы (с.114,

тэги наизусть;
вопросы (с.114, 115)
ПР 3.8 (задания 1-2) – с.

166

Слайд 22 УРОК № 2

УРОК № 2

Слайд 23 Проверочная работа № 1
В какой форме хранится информация

Проверочная работа № 1В какой форме хранится информация во Всемирной паутине?

во Всемирной паутине?
Что такое Web-сайт?
Типы сайтов.
В чем преимущества

веб-страниц перед обычными текстовыми документами?
Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги?
Что такое тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Написать шаблон веб-страницы.

Слайд 24 Урок 2. Форматирование текста на Web-странице
Угринович, § 3.7.3

Урок 2. Форматирование текста на Web-страницеУгринович, § 3.7.3



Слайд 25 Форматирование текста
Пока страница не слишком привлекательна: мелкий шрифт

Форматирование текстаПока страница не слишком привлекательна: мелкий шрифт и черный текст

и черный текст на белом фоне. Но с помощью

тэгов можно украсить текст.

1. Заголовки: тэги от <Н1> (самый крупный) до <Н6> (самый мелкий). <Н1> Всё о компьютере

2. Шрифт (FONT). Некоторые тэги имеют атрибуты - имена свойств, могут принимать определенные значения.
FONT face=“Arial” – гарнитура шрифта
size=4 – размер
color=“red” – цвет

3. Выравнивание (ALIGN). Текст обычно выравнивается по левому краю страницы, однако принято заголовок размещать по центру.
ALIGN =“left", ALIGN="right", <Н1 ALIGN="center"> Bcё о компьютере
ALIGN="center"

Слайд 26 Цвет шрифта

Значение атрибута COLOR можно задать 2-мя способами:
а)

Цвет шрифтаЗначение атрибута COLOR можно задать 2-мя способами:а) названием цвета (например,

названием цвета (например, "red", "green", "blue" и так далее),


б) его шестнадцатеричным значением в RGB-формате "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цветов.
Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Синий цвет = "#0000FF".

Таким образом, задать синий цвет заголовка можно тэгом FONT с атрибутом COLOR:
<Н1 ALIGN="center">Bcё о компьютере

Слайд 27

Слайд 28 4. Горизонтальная линия отделит заголовок от остального содержания

4. Горизонтальная линия отделит заголовок от остального содержания страницы с помощью

страницы с помощью одиночного тэга .

5. Абзацы: . При

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

Форматирование текста

Слайд 29 Практическая работа 3.8 Учебный сайт «Компьютер»
Отформатировать текст начальной

Практическая работа 3.8 Учебный сайт «Компьютер»Отформатировать текст начальной страницы:1) Создать и

страницы:
1) Создать и выровнять 2 абзаца (зад.3)
2) Выделить цветом

заголовок страницы и отделить его горизонтальной чертой (зад.4)

Стр. 166, задания 3-4.

Слайд 30

Слайд 31 Домашнее задание
§ 3.7.3 – тэги наизусть;
вопросы (с.114, 115,

Домашнее задание§ 3.7.3 – тэги наизусть;вопросы (с.114, 115, 116)ПР 3.8 (задания 3-4) – с. 166

116)
ПР 3.8 (задания 3-4) – с. 166

Слайд 32 УРОК 3

УРОК 3

Слайд 33 Проверочная работа № 2
В какой форме хранится информация

Проверочная работа № 2В какой форме хранится информация во Всемирной паутине?

во Всемирной паутине?
Что такое Web-сайт?
Типы сайтов.
В чем преимущества

веб-страниц перед обычными текстовыми документами?
Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги?
Что такое тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Написать шаблон веб-страницы.
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?

Слайд 34 Урок 3. Вставка изображений в Web-страницы
Угринович, § 3.7.4

Урок 3. Вставка изображений в Web-страницыУгринович, § 3.7.4

Слайд 35 Вставка изображений
На Web-страницах могут быть графические файлы 3

Вставка изображенийНа Web-страницах могут быть графические файлы 3 форматов — GIF,

форматов — GIF, JPG и PNG. Если рисунок сохранен

в другом формате, то его необходимо предварительно преобразовать в один из этих форматов.

Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете.
1) картинка на локальном компьютере в папке с сайтом:

2) картинка в другой папке на локальном компьютере:

3) картинка находится на удаленном сервере в Интернете:

Слайд 36 Поясняющий текст. Расположение рисунка в тексте.
Иллюстрации на Web-страницах

Поясняющий текст. Расположение рисунка в тексте.Иллюстрации на Web-страницах стали неотъемлемым элементом

стали неотъемлемым элементом дизайна. Однако пользователи в целях экономии

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


Положение рисунка в тексте – определяет атрибут ALIGN тэга : ТОР, MIDDLE, BOTTOM, LEFT , RIGHT.

Компьютер

Слайд 37 Вид готового сайта

Вид готового сайта

Слайд 38
Код страницы сайта

Компьютер



Все

Код страницы сайта Компьютер Все о компьютере На этом сайта

о компьютере





На этом сайта

вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.


Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.





Слайд 39 Домашнее задание
§ 3.7.4 – тэги наизусть;
вопросы (с.114, 115,

Домашнее задание§ 3.7.4 – тэги наизусть;вопросы (с.114, 115, 116, 118)ПР 3.8 (задание 5) – с. 167

116, 118)
ПР 3.8 (задание 5) – с. 167

Слайд 40 Урок 4

Урок 4

Слайд 41 Проверочная работа № 3
Что такое Web-сайт?
Типы сайтов.
Каким образом

Проверочная работа № 3Что такое Web-сайт?Типы сайтов.Каким образом веб-страницы объединяются в

веб-страницы объединяются в веб-сайты?
Что такое тэги? тэговый контейнер?

Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?

Слайд 42 Урок 4. Гиперссылки на Web-страницах
Угринович, § 3.7.5

Урок 4. Гиперссылки на Web-страницахУгринович, § 3.7.5

Слайд 43
Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные

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

с предыдущей.
Гиперссылка состоит из 2 частей: адрес и указатель

ссылки.
Гиперссылка задается универсальным тегом с атрибутом HREF (он указывает, в каком файле хранится нужная веб-страница):
 Указатель ссылки

Слайд 44 Виды гиперссылок
1) внутренняя:
Указатель ссылки
2) внешняя:

Виды гиперссылок1) внутренняя: Указатель ссылки2) внешняя: Указатель ссылки

Указатель ссылки

Слайд 45 Указатели гиперссылок
Указатель – видимая часть гиперссылки: текст или

Указатели гиперссылокУказатель – видимая часть гиперссылки: текст или картинка

картинка

Слайд 46 Адресная часть гиперссылок
Перейти на другие веб-страницы:
Указатель

Адресная часть гиперссылокПерейти на другие веб-страницы: Указатель ссылкиОткрыть картинку в браузере:

ссылки
Открыть картинку в браузере:
Картинка
Прослушать звук (запуск встроенного

в браузер проигрывателя):
Звук
Сохранить файл (запуск встроенного в браузер менеджера загрузки файлов):
Скачать файл

Слайд 47 Гиперссылка на электронную почту
Гиперссылка этого типа заключается в

Гиперссылка на электронную почтуГиперссылка этого типа заключается в особый контейнер Наш е-mail

особый контейнер


Наш е-mail

Слайд 48 Вид готовой страницы сайта

Вид готовой страницы сайта

Слайд 49 Код страницы сайта

Компьютер


Все

Код страницы сайта Компьютер Все о компьютере На этом сайта

о компьютере




На этом сайта

вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.


Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.



[Программы]  
[Словарь]  
[Комплектующие] 
[Анкета]




E-mail: mailbox@provaider.ru





Слайд 50 Домашнее задание
§ 3.7.5 – тэги наизусть;
вопросы (с.114, 115,

Домашнее задание§ 3.7.5 – тэги наизусть;вопросы (с.114, 115, 116, 118, 119)ПР

116, 118, 119)
ПР 3.8 (задания 6-7) – с. 167:

панель навигации

Слайд 51 Урок 5

Урок 5

Слайд 52 Проверочная работа № 4
Что такое Web-сайт?
Каким образом веб-страницы

Проверочная работа № 4Что такое Web-сайт?Каким образом веб-страницы объединяются в веб-сайты?

объединяются в веб-сайты?
Что такое тэги? тэговый контейнер? Записать

главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?
Какой тег и его атрибуты используются для вставки гиперссылок?

Слайд 53 Урок 5. Списки на Web-страницах
Угринович, § 3.7.6

Урок 5. Списки на Web-страницахУгринович, § 3.7.6

Слайд 54 Виды списков
Нумерованные
Маркированные
Списки терминов (как в словаре)
Вложенные списки

Виды списковНумерованныеМаркированныеСписки терминов (как в словаре)Вложенные списки

Слайд 55 Нумерованный список
Список – в контейнере
Элемент списка –

Нумерованный списокСписок – в контейнере Элемент списка – тег Атрибут TYPE

тег
Атрибут TYPE – тип нумерации (арабские цифры; I

– римские; а – латинские строчные буквы)

  1. Системные программы
  2. Прикладные программы
  3. Системы программирования

Слайд 56 Маркированный список
Список – в контейнере
Элемент списка –

Маркированный списокСписок – в контейнере Элемент списка – тег Атрибут TYPE

тег
Атрибут TYPE – тип маркеров (“disc”- диск, “square”-

квадрат, “circle”-окружность)

  • Текстовые редакторы
  • Графические редакторы
  • Электронные таблицы
  • Системы управления базами данных

см. стр.168 – «Программное обеспечение»


Слайд 57 Список терминов
Список – в контейнере
Элемент списка –

Список терминовСписок – в контейнере Элемент списка – тег Сначала пишется

тег
Сначала пишется термин, затем его определение (как в

словаре)
см. стр.169 – «Словарь»

Слайд 58 Домашнее задание
§ 3.7.6 – тэги наизусть;
вопросы (с.114, 115,

Домашнее задание§ 3.7.6 – тэги наизусть;вопросы (с.114, 115, 116, 118,119,120)ПР 3.8

116, 118,119,120)
ПР 3.8 (задания 8-9) – с. 168-169: страницы

сайта «Программы» и «Словарь»

Слайд 59 Урок 6

Урок 6

Слайд 60 Урок 6. Интерактивные формы на Web-страницах
Угринович, § 3.7.7

Урок 6. Интерактивные формы на Web-страницахУгринович, § 3.7.7

Слайд 61 Проверочная работа № 5
Что такое Web-сайт?
Каким образом веб-страницы

Проверочная работа № 5Что такое Web-сайт?Каким образом веб-страницы объединяются в веб-сайты?

объединяются в веб-сайты?
Что такое тэги? тэговый контейнер? Записать

главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?
Какой тег и его атрибуты используются для вставки гиперссылок?
Какие теги используются для создания нумерованных и маркированных списков?


Слайд 62 Понятие интерактивной формы
Для общения посетителей сайта с его

Понятие интерактивной формыДля общения посетителей сайта с его создателями на веб-странице

создателями на веб-странице размещают интерактивные формы.
Формы содержат различные элементы

управления:
текстовые поля
раскрывающиеся списки
флажки
переключатели…

См. «Анкету», с.172

Слайд 63 Текстовое поле
Основной контейнер

Текстовое поле – для ввода

Текстовое полеОсновной контейнер Текстовое поле – для ввода текста с клавиатуры:

текста с клавиатуры: тэг с атрибутами:
TYPE=“text” –

тип содержимого (текст)
NAME=“____” – имя поля
SIZE=“40” – длина поля ввода (в символах)




- разделитель строк (перевод курсора на новую строку)

Слайд 64 Переключатели (радиокнопки)
Круглая кнопка для выбора одного

Переключатели (радиокнопки)Круглая кнопка для выбора одного из нескольких вариантов ответов:

из нескольких вариантов ответов: TYPE=“radio”
Все элементы этой группы

должны иметь одинаковое имя: NAME=“group”
Атрибуты VALUE содержат варианты выбора ответов: VALUE=“учащийся”
У каждого VALUE свой вариант ответа.


Слайд 65 Флажки
Квадратное окошечко для выбора нескольких ответов из предложенных

ФлажкиКвадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=“checkbox” Каждый

вариантов: TYPE=“checkbox”
Каждый элемент этой группы должен иметь свое

имя: NAME=“box1”, NAME=“box2”, …..
Атрибуты VALUE содержат варианты выбора ответов: VALUE=“WWW”, VALUE=“e-mail”, ….
У каждого VALUE свой вариант ответа.

WWW

Слайд 66 Поля списков
Для создания раскрывающего списка используют контейнер
В

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

нем каждый элемент списка задается тэгом

Слайд 67 Текстовая область
Текстовая область с линейкой прокрутки – для

Текстовая областьТекстовая область с линейкой прокрутки – для ввода текста произвольной

ввода текста произвольной длины.
Контейнер
Атрибуты: NAME -

задает имя области
ROWS - число строк
COLS - число столбцов

Слайд 68 Отправка данных из формы
Кнопка отправки создается тэгом
Атрибуты:

Отправка данных из формыКнопка отправки создается тэгом Атрибуты: TYPE=“submit”VALUE=“Отправить” (надпись на


TYPE=“submit”
VALUE=“Отправить” (надпись на кнопке)

Чтобы данные из формы передать по

электронной почте, используют контейнер:


Слайд 69 Готовая анкета

Готовая анкета
  • Имя файла: razrabotka-web-saytovs-ispolzovaniem-yazykarazmetki-giperteksta-html.pptx
  • Количество просмотров: 179
  • Количество скачиваний: 0
- Предыдущая Песни Великой Отечественной войны
Следующая - один день из жизни группы

Похожие презентации

ВИРУСЫ И АНТИВИРУСНЫЕ ПРОГРАММЫ ВИРУСЫ И АНТИВИРУСНЫЕ ПРОГРАММЫ 150
Основы Web-дизайна Основы Web-дизайна 162
Стандартные программы Windows Стандартные программы Windows 160
Презентация по информатике История развития вычислительной техники Презентация по информатике История развития вычислительной техники 150
Возможности программы iСhat Возможности программы iСhat 119
Обеспечение безопасности почтовых клиентов Обеспечение безопасности почтовых клиентов 155
Алгоритм Алгоритм 107
ПО компьютера ПО компьютера 141
Презентация по теме Диагностика IP протокола Презентация по теме Диагностика IP протокола 114
Керування оперативною пам'яттю у процесорах архітектури х86. (Лекція 8) Керування оперативною пам'яттю у процесорах архітектури х86. (Лекція 8) 104
Презентация Кодирование звуковой информации Презентация Кодирование звуковой информации 155
xml xml 211
Vnitřní řazení v poli (in sito) Vnitřní řazení v poli (in sito) 207
Анализ образовательного сайта Анализ образовательного сайта 158
Практическая работа Обработка Массива Практическая работа Обработка Массива 148
История возникновения компьютерной графики и разновидности компьютерной графики История возникновения компьютерной графики и разновидности компьютерной графики 198
Презентация к уроку: Логические схемы в 10 классе Презентация к уроку: Логические схемы в 10 классе 121
Краткий обзор услуг Краткий обзор услуг 141
Становление информационного общества Становление информационного общества 159
Создание презентаций в программе Microsoft Power Point 2007 Создание презентаций в программе Microsoft Power Point 2007 287
Компьютерные вирусы и антивирусные программы Компьютерные вирусы и антивирусные программы 105
УМК по информатике УМК по информатике 139
Безопасная работа в сети Internet Безопасная работа в сети Internet 104
Техническое задание на автоматизированную систему турагентства Техническое задание на автоматизированную систему турагентства 123
Презентация: Профессии информационной направленности Презентация: Профессии информационной направленности 155
Кодирование графической информации Кодирование графической информации 117
Растровые и векторные графические редакторы Растровые и векторные графические редакторы 151
Создание графических изображений Создание графических изображений 137
Общение в Интернете в реальном времени Общение в Интернете в реальном времени 130
Системно-деятельностный подход на уроках информатики Системно-деятельностный подход на уроках информатики 126