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

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

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

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

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

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

Презентация на тему Разработка Web-сайтов

Содержание

Содержание:1.Web -страницы и Web – сайтыДля создания Web-страницСоздание Web-страниц с использованием НТМL-тэговWeb-сайты. Основные моментыРазмещение в ИнтернетКонтрольные вопросы2.Структура Web-страницыТЭГИРазработка заготовкаКонтрольные вопросы3.Форматирование текста на Web-страницеШрифтВыравнивание текстаАбзацы. Горизонтальная линияКонтрольные вопросы4.Вставка изображений в Web-страницыПоложение рисунка относительно текстаВставка альтернативного текстаКонтрольные вопросы
Разработка Web-сайтов с использованием языка разметки гипертекста НТМL Хайрулина Анастасия Владиславовна,МОУ СОШ Содержание:1.Web -страницы и Web – сайтыДля создания Web-страницСоздание Web-страниц с использованием НТМL-тэговWeb-сайты. 5.Гиперссылки на Web-страницахПанель навигации по сайту.ссылка на адрес электронный почтыПример6. Списки на 1.Web -страницы и Web - сайтыWeb -страницы создаются с использова­нием языка разметки Для создания Web-страницДля создания Web-страниц используются простейшие текстовые редакторы или специальные программы-HTML Создание Web-страниц с использованием НТМL-тэговтребует больших усилий, времени и знания синтаксиса языка. Web-сайты. Основные моментыПубликации во Всемирной паутине реализу­ются в форме Web-сайтов, которые обычно Размещение в ИнтернетПрежде чем разместить свой Web-сайт на сервере в Интернете, его Контрольные вопросы1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?2. Каким 2. Структура Web-страницыНТМL-код страницы помещается внутрь контейнера . Без этих тэгов браузер Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные ТЭГИЗакрывающий тэг содержит прямой слэш (/) перед обозначением. Название страницы помещается в Разработка заготовкаКомпьютерКомпьютер и ПОСозданную Web-страницу необходимо сохранить в виде файла под именем Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе,и Контрольные вопросыКакие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура 3. Форматирование текста на Web-страницеС помо­щью тэгов можно задать различные параметры форматиро­вания Шрифт.Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные Выравнивание текста.Задать способ выравнивания тек­ста позволяет атрибут ALIGN. Выравнивание по левой грани­це Горизонтальная линия. Заголовки целесообразно отде­лять от остального содержания страницы горизонтальными линиями с Домашняя страница сайта.На домашней странице сайта обычно размещается текст, кратко описывающий его Компьютер и ПОHa этом сайте... Терминологический словарь... Контрольные вопросы Какие тэги (контейнеры) используются для ввода 4.Вставка изображений в Web-страницыНа Web-страницы можно помещать изображения, хра­нящиеся в графических файлах Положение рисунка относительно текстаРасположить рисунок относительно текста различным образом позволяет атрибут ALIGN, Вставка альтернативного текстаПользователи иногда, в целях экономии времени, отключают в браузере загрузку Контрольные вопросы1. Какой тэг и его атрибуты используются для вставки изображений в 5. Гиперссылки на Web-страницахГиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер Панель навигации по сайту. Создадим папку сайта «Компьютер» и добавим в сайт панель навигацииНа домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:[Программы] & nbsp [Словарь] Гиперссылка на адрес электронной почты.Полезно на домашней странице сайта создать ссылку на Пример 6. Списки на Web-страницах нумерованные списки, когда элементы списка идентифицируются с помощью Нумерованные списки.Нумерованный список располагается внутри контейнера , а каждый элемент списка определяется Маркированные списки.Маркированный список располагается внутри контейнера , а каждый элемент списка определяется Список определений.Список определений располагается внутри контейнера /. Внутри него текст оформля­ется в Контрольные вопросы Какие тэги используются для создания нумерованных списков? Маркированных списков?Практическое 7. Интерактивные формы на Web-страницах Для того чтобы посетители сайта могли не ФормаВся форма заключается в контейнер . В первую очередь выясним имя посетителя Текстовые поля.Для получения этих данных разместим в форме два однострочных текстовых поля Текстовые поля.HTML -кодДля того чтобы анкета «читалась», необходимо разделить строки с помощью Переключатели.Далее необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга Переключатели. HTML-кодУкажите, к какой группе пользователей Флажки.Далее, из предложенного перечня можно выбрать одновременно несколько вариантов, пометив их флажками.Флажки Флажки. HTML-кодКакие из сервисов Интернета вы используетенаиболее Раскрывающиеся списки.Для реализации раскрывающегося списка используется контейнер , в котором каждый элемент Раскрывающиеся списки.HTML кодКакой браузер вы используетенаиболее часто:Internet ExplorerNetscape NavigatorOperaMozilla Текстовая область.В такое поле можно ввести достаточно длинный текст.Создается текстовая область с Отправка данных из формы.Отправка введенной в форму информации осуществляется с помощью щелчка Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес Контрольные вопросы:Какие тэги используются для создания на форме текстовых полей? Переключателей? Флажков? Сайт
Слайды презентации

Слайд 2 Содержание:
1.Web -страницы и Web – сайты
Для создания Web-страниц
Создание

Содержание:1.Web -страницы и Web – сайтыДля создания Web-страницСоздание Web-страниц с использованием

Web-страниц с использованием НТМL-тэгов
Web-сайты. Основные моменты
Размещение в Интернет
Контрольные вопросы
2.Структура

Web-страницы
ТЭГИ
Разработка заготовка
Контрольные вопросы
3.Форматирование текста на Web-странице
Шрифт
Выравнивание текста
Абзацы. Горизонтальная линия
Контрольные вопросы
4.Вставка изображений в Web-страницы
Положение рисунка относительно текста
Вставка альтернативного текста
Контрольные вопросы

Слайд 3 5.Гиперссылки на Web-страницах
Панель навигации по сайту.
ссылка на адрес

5.Гиперссылки на Web-страницахПанель навигации по сайту.ссылка на адрес электронный почтыПример6. Списки

электронный почты
Пример
6. Списки на Web-страницах
нумерованные списки
маркированные списки
списки определений
Контрольные

вопросы
7. Интерактивные формы на Web-страницах
Форма
Текстовые поля. Текстовые поля.HTML –код
Переключатели. Переключатели. HTML-код
Флажки. Флажки. HTML-код
Раскрывающиеся списки. Раскрывающиеся списки.HTML код
Текстовая область.
Отправка данных из формы.
Контрольные вопросы
Что должно получиться
Основные HTML -тэги

Слайд 4 1.Web -страницы и Web - сайты
Web -страницы создаются

1.Web -страницы и Web - сайтыWeb -страницы создаются с использова­нием языка

с использова­нием языка разметки гипертекстовых документов НТМL (Нуреr Техt

Markup Language). В обычный текстовый доку­мент вставляются управляющие символы — НТМL-тэги, ко­торые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются:
• малый информационный объем;
• возможность просмотра в различных операционных системах.


Слайд 5 Для создания Web-страниц
Для создания Web-страниц используются простейшие текстовые

Для создания Web-страницДля создания Web-страниц используются простейшие текстовые редакторы или специальные

редакторы или специальные программы-HTML –редакторы (HtmlPad FisherMan). В качестве

такого редактора в Windows можно использовать стандартное приложение Блокнот.


Слайд 6 Создание Web-страниц с использованием НТМL-тэгов
требует больших усилий, времени

Создание Web-страниц с использованием НТМL-тэговтребует больших усилий, времени и знания синтаксиса

и знания синтаксиса языка.
Применение специальных инструментальных программ­ных средств

(Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и ре­дактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG
(от англ. «What You See Is What You Get - Что видишь, то и получишь»).


Слайд 7 Web-сайты. Основные моменты
Публикации во Всемирной паутине реализу­ются в

Web-сайты. Основные моментыПубликации во Всемирной паутине реализу­ются в форме Web-сайтов, которые

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

или проблеме.

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


Слайд 8 Размещение в Интернет
Прежде чем разместить свой Web-сайт на

Размещение в ИнтернетПрежде чем разместить свой Web-сайт на сервере в Интернете,

сервере в Интернете, его необходимо тщательно протестировать, так как

потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).


Слайд 9 Контрольные вопросы
1. В чем заключается преимущество Web-страниц перед

Контрольные вопросы1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?2.

обычными текстовыми документами?
2. Каким образом Web -страницы объединяются в

Web-сайты?


Слайд 10 2. Структура Web-страницы
НТМL-код страницы помещается внутрь контейнера .

2. Структура Web-страницыНТМL-код страницы помещается внутрь контейнера . Без этих тэгов


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

документа и правильно его интерпретировать.
Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер <НЕАD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.


Слайд 11 Тэги заключаются в угловые скобки и могут быть

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

одиночными или парными.
Парные тэги содержат откры­вающий и закрывающий

тег (такая пара тэгов называ­ется контейнером).

i

<НЕАD>



<НТМL>




Слайд 12 ТЭГИ
Закрывающий тэг содержит прямой слэш (/) перед обозначением.

ТЭГИЗакрывающий тэг содержит прямой слэш (/) перед обозначением. Название страницы помещается


Название страницы помещается в контейнер и при

просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помеща­ется в контейнер


Слайд 13 Разработка заготовка


Компьютер



Компьютер и ПО



Созданную Web-страницу необходимо сохранить в

Разработка заготовкаКомпьютерКомпьютер и ПОСозданную Web-страницу необходимо сохранить в виде файла под

виде файла под именем index.htm. В качестве расширения файла

Web-страницы можно также использовать html.


Слайд 14 Необходимо различать имя файла index.htm, под которым Web-страница

Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой

хранится в файловой системе,
и имя Web-страницы (например, «Компьютер»), которое

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

i


Слайд 15 Контрольные вопросы
Какие тэги (контейнеры) должны присутствовать в HTML-документе

Контрольные вопросыКакие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая

обязательно?
Какова логическая структура Web-страницы?
Практическое задание.
Создать заготовку Web-страницы

«Компьютер» и просмотреть ее в браузере.


Слайд 16 3. Форматирование текста на Web-странице
С помо­щью тэгов можно

3. Форматирование текста на Web-страницеС помо­щью тэгов можно задать различные параметры

задать различные параметры форматиро­вания текста.
Заголовки.
Размеры шрифтов заголовков задаются

параметрами тэгов от
<Н1> (самый крупный)
до
(самый мелкий).


Слайд 17 Шрифт.
Некоторые тэги имеют атрибуты, которые являются именами свойств

Шрифт.Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать

и могут принимать определенные значения.
С помощью тэга FONT и

его атрибутов можно задать параметры форматирования шрифта.
Атрибут FACE позволя­ет задать гарнитуру шрифта (например, FACE="Arial"),
Атрибут SIZE — размер шрифта (например, SIZE=4).
Атрибут COLOR позволяет задавать цвет шрифта (напри­мер, COLOR="blue").
Значение атрибута COLOR можно за­дать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением - "#RRGGBB"


Слайд 18 Выравнивание текста.
Задать способ выравнивания тек­ста позволяет атрибут ALIGN.

Выравнивание текста.Задать способ выравнивания тек­ста позволяет атрибут ALIGN. Выравнивание по левой


Выравнивание по левой грани­це задается так: ALIGN="left",
выравнивание по

правой границе: ALIGN="right",
выравнивание по центру: ALIGN= "center".
Таким образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:

<Н1 ALIGN="center">компьютер и П0



Слайд 19 Горизонтальная линия.
Заголовки целесообразно отде­лять от остального содержания

Горизонтальная линия. Заголовки целесообразно отде­лять от остального содержания страницы горизонтальными линиями

страницы горизонтальными линиями с помощью одиночного тэга .
Абзацы.
Разделение

текста на абзацы производится с помощью контейнера <р>. При просмотре в браузере аб­зацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и па­раметры форматирования шрифта.


Слайд 20 Домашняя страница сайта.
На домашней странице сайта обычно размещается

Домашняя страница сайта.На домашней странице сайта обычно размещается текст, кратко описывающий

текст, кратко описывающий его содер­жание. Поместим на домашнюю страницу

сайта «Компьютер» текст, разбитый на абзацы с различным выравниванием:

<Р ALIGN="left">
Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

<Р ALIGN="RIGHT">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.



Слайд 21

Компьютер и ПО



Ha этом

Компьютер и ПОHa этом сайте... Терминологический словарь...

сайте...
Терминологический словарь
...



Слайд 22 Контрольные вопросы
Какие тэги (контейнеры) используются для ввода заголовков?

Контрольные вопросы Какие тэги (контейнеры) используются для ввода заголовков?


Форматирования шрифта?
Ввода абзацев?
Практическое задание.
Создать Web-страницу «Компьютер» с

отформатированным текстом и просмотреть ее в браузере.


Слайд 23 4.Вставка изображений в Web-страницы
На Web-страницы можно помещать изображения,

4.Вставка изображений в Web-страницыНа Web-страницы можно помещать изображения, хра­нящиеся в графических

хра­нящиеся в графических файлах трех форматов — GIF, JPEG

и PNG.
Вставка изображений.
Для вставки изображения ис­пользуется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. НАПРИМЕР:






Слайд 24 Положение рисунка относительно текста
Расположить рисунок относительно текста различным

Положение рисунка относительно текстаРасположить рисунок относительно текста различным образом позволяет атрибут

образом позволяет атрибут ALIGN, который может принимать пять различных

значений:
ТОР (верх),
MIDDLE (середина),
BOTTOM (низ),
LEFT (слева)
и RIGHT (справа).
НАПРИМЕР:



Слайд 25 Вставка альтернативного текста
Пользователи иногда, в целях экономии времени,

Вставка альтернативного текстаПользователи иногда, в целях экономии времени, отключают в браузере

отключают в браузере загрузку графических изображений и читают только

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



Слайд 26 Контрольные вопросы
1. Какой тэг и его атрибуты используются

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

для вставки изображений в Web-страницы?
Практическое задание.
Вставить в Web-страницу

«Компьютер» изображение и альтернативный текст и просмотреть ее в браузере.


Слайд 27 5. Гиперссылки на Web-страницах
Гиперссылки.
Гиперссылки, размещенные на Web-странице,

5. Гиперссылки на Web-страницахГиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в

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

компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хра­нится загружаемая Web-страница:
<А HREF="Адрес">Указатель ссылки


Слайд 28 Панель навигации по сайту.
Создадим папку сайта «Компьютер»

Панель навигации по сайту. Создадим папку сайта «Компьютер» и добавим в

и добавим в сайт пустые страницы «Программы», «Словарь», «Комплектующие»

и «Анкета».
Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие «пустые» страницы должны иметь заголовки, но могут пока не иметь содержания:


Слайд 29 панель навигации
На домашней странице сайта разместим указатели гиперссылок

панель навигацииНа домашней странице сайта разместим указатели гиперссылок на каждую страницу

на каждую страницу сайта. В качестве указателей гиперссылок удобнее

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


Слайд 30 Вставим в домашнюю страницу сайта HTML-код, создающий панель

Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:[Программы] & nbsp

навигации:


[Программы] & nbsp
[

HREF="glossary.htm">Словарь]  
[<А HREF="hardware.htm“>Комплектующие]  
[

Слайд 31 Гиперссылка на адрес электронной почты.
Полезно на домашней странице

Гиперссылка на адрес электронной почты.Полезно на домашней странице сайта создать ссылку

сайта создать ссылку на адрес электронный почты, по которому

посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер
, который задает стиль абзаца, принятый для указания адреса:

<А HREF="mailto:username@server.ru">E-mail:
username@server.ru




Слайд 32 Пример

Пример

Слайд 33 6. Списки на Web-страницах
нумерованные списки,
когда элементы

6. Списки на Web-страницах нумерованные списки, когда элементы списка идентифицируются с

списка идентифицируются с помощью чисел;
маркированные списки,
когда элементы списка

идентифицируются с помощью специальных символов (маркеров);
списки определений,
позволяющие составлять перечни определений в так называемой словарной форме.


Слайд 34 Нумерованные списки.
Нумерованный список располагается внутри контейнера , а

Нумерованные списки.Нумерованный список располагается внутри контейнера , а каждый элемент списка

каждый элемент списка определяется тэгом . С помощью атрибута

TYPE тэга
    можно задать тип нумерации:
    арабские цифры (по умолчанию),
    "I" (римские цифры),
    "а" (строчные буквы)

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


Слайд 35 Маркированные списки.
Маркированный список располагается внутри контейнера , а

Маркированные списки.Маркированный список располагается внутри контейнера , а каждый элемент списка

каждый элемент списка определяется тэгом . С помощью атрибута

TYPE тэга
    можно задать вид маркера списка:
    "disc" (диск),
    "square" (квадрат)
    или "circle" (окружность):

    • текстовые редакторы;
    • графические редакторы;
    • электронные таблицы;
    • системы управления базами данных.


Слайд 36 Список определений.
Список определений располагается внутри контейнера /. Внутри

Список определений.Список определений располагается внутри контейнера /. Внутри него текст оформля­ется

него текст оформля­ется в виде терминов, которые выделяются одинарными

тэгами
и определений, которые следуют за одинарными тэгами
.
Web-страницу «Словарь» мы представим в виде словаря компьютерных терминов

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


Слайд 37 Контрольные вопросы
Какие тэги используются для создания нумерованных

Контрольные вопросы Какие тэги используются для создания нумерованных списков? Маркированных списков?Практическое

списков? Маркированных списков?
Практическое задание.
Создать Web-страницу «Программы» с нумерованным

списком и вложенным маркированным спис­ком.
Создать Web-страницу «Словарь» со списком терминов.


Слайд 38

Слайд 39 7. Интерактивные формы на Web-страницах
Для того чтобы

7. Интерактивные формы на Web-страницах Для того чтобы посетители сайта могли

посетители сайта могли не только просматривать информацию, но и

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


Слайд 40 Форма
Вся форма заключается в контейнер .
В первую

ФормаВся форма заключается в контейнер . В первую очередь выясним имя

очередь выясним имя посетителя нашего сайта и его электронный

адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.


Слайд 41 Текстовые поля.
Для получения этих данных разместим в форме

Текстовые поля.Для получения этих данных разместим в форме два однострочных текстовых

два однострочных текстовых поля для ввода информации.
Текстовые поля создаются

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


Слайд 42 Текстовые поля.HTML -код
Для того чтобы анкета «читалась», необходимо

Текстовые поля.HTML -кодДля того чтобы анкета «читалась», необходимо разделить строки с

разделить строки с помощью тэга перевода строки


Пожалуйста, введите

ваше имя:





E-mail:








Слайд 43 Переключатели.
Далее необходимо создать группу переключателей («радиокнопок»). Создается такая

Переключатели.Далее необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью

группа с помощью тэга со значением атрибута TYPE="radio".

Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения "учащийся", "студент" и "учитель". Значение атрибута VALUE должно быть уникаль­ным для каждой «радиокнопки».
Вставим в HTML-код группу переключателей, в которой строки разделяются с помощью тэга перевода строки


Слайд 44 Переключатели. HTML-код
Укажите, к какой

Переключатели. HTML-кодУкажите, к какой группе пользователей высебя относите:учащийсястудентучитель

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


TYPE="radio" NAME="group"
VALUE="учащийся">учащийся


VALUE="студент">студент


VALUЕ="учитель">учитель



Слайд 45 Флажки.
Далее, из предложенного перечня можно выбрать одновременно несколько

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

вариантов, пометив их флажками.
Флажки создаются в тэге со

значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="box1", NAME="box2" и т. д.
Еще одним обязательным атрибутом является VALUE, которому присвоим значения "WWW", "e-mail" и "FTP". Значение атрибута VALUE должно быть уникальным для каждого флажка.
Вставим в HTML-код группу флажков, в которой строки разделяются с помощью тэга перевода строки
:


Слайд 46 Флажки. HTML-код
Какие из сервисов Интернета

Флажки. HTML-кодКакие из сервисов Интернета вы используетенаиболее часто:WWWe-mailFTP

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


WWW


NAME="box2"
VALUE="e-mail">e-mail


VALUE="FTP">FTP



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

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

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

B переключателях,

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


Слайд 48 Раскрывающиеся списки.HTML код


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



Раскрывающиеся списки.HTML кодКакой браузер вы используетенаиболее часто:Internet ExplorerNetscape NavigatorOperaMozilla

SELECTED>Internet Explorer
Netscape Navigator
Opera
Mozilla


Слайд 49 Текстовая область.
В такое поле можно ввести достаточно длинный

Текстовая область.В такое поле можно ввести достаточно длинный текст.Создается текстовая область

текст.
Создается текстовая область с помощью тэга с обязательными

атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.
Вставим в HTML-код текстовую область :
Какую еще информацию вы хотели бы видеть
на сайте?




Слайд 50 Отправка данных из формы.
Отправка введенной в форму информации

Отправка данных из формы.Отправка введенной в форму информации осуществляется с помощью

осуществляется с помощью щелчка по кнопке.
Кнопка создается с помощью

тэга . Атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, присвоить значение "Отправить"


Слайд 51 Щелчком по кнопке Отправить можно отправить данные из

Щелчком по кнопке Отправить можно отправить данные из формы на определенный

формы на определенный адрес электронной почты. Для этого атрибуту

ACTION контейнера
надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных:

После открытия в браузере Web-страницы «Анкета» и внесения данных в поля формы необходимо щелкнуть по кнопке Отправить. Данные будут отправлены по указанному адресу электронной почты.


Слайд 52 Контрольные вопросы:
Какие тэги используются для создания на форме

Контрольные вопросы:Какие тэги используются для создания на форме текстовых полей? Переключателей?

текстовых полей? Переключателей? Флажков? Раскрывающихся списков? Текстовых областей?
Какие значения

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


Слайд 53

  • Имя файла: razrabotka-web-saytov.pptx
  • Количество просмотров: 99
  • Количество скачиваний: 0
- Предыдущая Дорогие ребята!Вы узнали меня? Да я Элли, героиня книг Александра Волкова Волшебник Изумрудного города. Я приглашаю Вас совершить увлекательное путешествие в Изумрудный город к Великому Гудвину. Победить злую волшебницу Бастинду и летучих обезьян, встрет
Следующая - Элементарное ЭВМ

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

Цифровая обработка сигналов Цифровая обработка сигналов 161
Poster PRO 2.0 Poster PRO 2.0 111
Конспект и презентация урока Безопасное поведение в сети Интернет план-конспект занятия по информатике (2 класс) по теме Конспект и презентация урока Безопасное поведение в сети Интернет план-конспект занятия по информатике (2 класс) по теме 47
Простейшая анимация средствами MS PowerPoint Простейшая анимация средствами MS PowerPoint 94
Презентация к уроку Технологии использования и разработки  информационных систем. Презентация к уроку Технологии использования и разработки  информационных систем. 107
текстовий документ текстовий документ 149
Виды ссылок в Excel Виды ссылок в Excel 111
Безопасность в социальных сетях Безопасность в социальных сетях 137
Защита информационных ресурсов от несанкционированного доступа Защита информационных ресурсов от несанкционированного доступа 105
Библиографический аппарат научных работ учащихся Библиографический аппарат научных работ учащихся 107
Двоичное кодирование графической и звуковой информации Двоичное кодирование графической и звуковой информации 100
Процедуры. Как писать программы. (Лекция 8) Процедуры. Как писать программы. (Лекция 8) 103
Системный блок Системный блок 130
Презентация по информатике принцип передачи Презентация по информатике принцип передачи 124
Способы поиска информации в Интернете Способы поиска информации в Интернете 115
Безопасность сетей - снифферы (sniffer) Безопасность сетей - снифферы (sniffer) 142
3D-графика и анимация в программе 3DSMax 3D-графика и анимация в программе 3DSMax 126
Презентация к уроку Информация. Компьютер Презентация к уроку Информация. Компьютер 101
Интернет браузер Opera Интернет браузер Opera 131
Информационная система диагностики оборудования электродегидратора Информационная система диагностики оборудования электродегидратора 110
История вычислительной техники История вычислительной техники 116
Демонстрация на тему Системный реестр Демонстрация на тему Системный реестр 106
Лекция 6. Автоматизированная система как объект информационного воздействия Лекция 6. Автоматизированная система как объект информационного воздействия 86
Техника безопасности на уроках информатики Техника безопасности на уроках информатики 106
Источники информации Источники информации 112
Файлы и файловая система Файлы и файловая система 108
Принципы разработки и создания тестовых заданий Принципы разработки и создания тестовых заданий 89
Информационные и коммуникационные технологии Информационные и коммуникационные технологии 96
Презентация по информатике на тему Логика Презентация по информатике на тему Логика 135
Программа Paint Программа Paint 123