Охрана труда:
нормативно-правовые основы и особенности организации
Обучение по оказанию первой помощи пострадавшим
Аккредитация Минтруда (№ 10348)
Подготовьтесь к внеочередной проверке знаний по охране труда и оказанию первой помощи.
Допуск сотрудника к работе без обучения или нарушение порядка его проведения
грозит организации штрафом до 130 000 ₽ (ч. 3 статьи 5.27.1 КоАП РФ).
Повышение квалификации

Свидетельство о регистрации
СМИ: ЭЛ № ФС 77-58841
от 28.07.2014

Почему стоит размещать разработки у нас?
  • Бесплатное свидетельство – подтверждайте авторство без лишних затрат.
  • Доверие профессионалов – нас выбирают тысячи педагогов и экспертов.
  • Подходит для аттестации – дополнительные баллы и документальное подтверждение вашей работы.
Свидетельство о публикации
в СМИ
свидетельство о публикации в СМИ
Дождитесь публикации материала и скачайте свидетельство о публикации в СМИ бесплатно.
Диплом за инновационную
профессиональную
деятельность
Диплом за инновационную профессиональную деятельность
Опубликует не менее 15 материалов в методической библиотеке портала и скачайте документ бесплатно.
21.12.2023

Проект: «Создание Web страниц c помощью языка гипертекстовой разметки HTML»

Дьяченко Оксана Николаевнв
Учитель информатики и математики
Интернет все активнее входит в нашу жизнь. Возможности, представленные им, привлекают все больше и больше пользователей. Многие люди начинают обращаться к глобальной сети для обмена информацией.
Умение создавать Web – сайты со временем становится актуальным навыком простого пользователя. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей. Однако Web – сайт может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой-то интерес и если он имеет привлекательное внешнее оформление. Оформление Web – страниц становится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». И если человек решил опубликоваться в Интернете, то следует разобраться – как и какими средствами создаются Web – страницы.

Содержимое разработки

Муниципальное бюджетное общеобразовательное учреждение

Скосырская средняя общеобразовательная школа

Проект:«Создание Web – страниц c помощью языка гипертекстовой разметки HTML»

Работу выполнил: ученик 11 класса:

Толпинский Роман.

Руководитель: Дьяченко О.Н. учитель информатики.

ст.Скосырская, 2022 год

Содержание

Введение

  1. Что такое сайт и его структура.

  2. Виды сайтов.

  3. Создание сайтов.

  4. Создание сайта.

Заключение
Список использованных источников

Введение

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

Умение создавать Web – сайты со временем становится актуальным навыком простого пользователя. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей. Однако Web – сайт может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой-то интерес и если он имеет привлекательное внешнее оформление. Оформление Web – страниц становится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». И если человек решил опубликоваться в Интернете, то следует разобраться – как и какими средствами создаются Web – страницы.

Тема нашей работы: «Создание Web–сайта c помощью языка гипертекстовой разметки HTML».

Цель работы: разработать сайт с помощью языка HTML.

В процессе работы необходимо было решить следующие задачи:

  • Узнать что из себя представляет web-сайт;

  • Изучить виды web-сайтов;

  • Разобрать способы создания;

  • Изучить основы языка HTML;

  • Создать сайт.

Объект исследования: web-сайт.

Гипотеза: я считаю, что даже обычный пользователь сможет сделать собственный web-сайт.

Методы исследования: анализ и синтез, проведение тестирования, формализация.

Раздел 1. Что такое сайт и его структура

Ещё до 1991 года люди не знали, что такое сайт. Но именно в января этого года Тимоти Джон Бернс создал и показал первый веб-ресурс. Изобретатель, по сути, опубликовал в интернет небольшую совокупность страниц, на которых описывалась новая технология, а точнее World Wide Web.
Сайт – Это ресурс, который включается в документы, объединённые ссылками и общей структурой. Каждый сайт имеет уникальный адрес, но массив этих данных связан доменным именем.

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

Чтобы веб-ресурс работал, он должен включать в себя комплекс элементов:
• сервер или хостинг
Серверы обрабатывают и хранят файлы сайта, они являются специальными компьютерами, которые предоставляют веб-проекта память на быстром носителе, ОЗУ и другие технические ресурсы. Сервер может обслуживать несколько сайтов.
Хостингом называют место и вычислительные ресурсы, выделенные на правах аренды.
• Доменное имя
Доменным именем является адрес сайта, эти имена могут находиться в зонах разного уровня и тематики, к примеру, vk.com. Адреса высокого уровня имеют самую высокую стоимость, но также в некоторых зонах нельзя купить домен, например, государственный сектор .gov
• CMS (программные файлы или управление контентом)
Системные файлы для веб-проектов не создаются вручную.
Веб-мастера используют CMS, которые являются специальными движками, включающими в себя базовые функции сайта. Opencart, Wordpress, Prestashop, Joomla являются самыми популярными системами управления контентом. CMS и база данных с картинками, текстами и другим контентом хранятся на сервере.

Раздел.2. Виды сайтов

  1. Целевая классификация

Веб-сайты создают для решения разных задач, по этому критерию их можно разделить на:
• Коммерческие
Созданы для получения продаж из интернета, создания положительного образа компании и расширение охвата целевой аудитории. Классическим коммерческим сайтом является интернет-магазин.
• Информационные
Созданы для передачи определённой информации аудитории. Это могут быть новостные, научно-популярные, развлекательные или тематические площадки. Зачастую информационные сайты создаются с целью монетизации благодаря публикации рекламы или партнёрских ссылок.
• Некоммерческие
К таким веб-ресурсам относятся онлайн-площадки различных государственных органов, социальных служб, учебных заведений, министерств и т.д. Они созданы с целью информировании по определённым вопросам

  1. Структурно-функциональная классификация

Необходимо правильно подобрать структуру и функциональное наполнение, чтобы сайт хорошо справлялся со своими задачами. К примеру, нет смысла использовать CMS для интернет-магазина.

В этом отношении сайты можно разделить на:
• лендинг — это сайт, состоящий из одной страницы, с мощной рекламной базой. Его задача — завладеть вниманием посетителя и привести его к конверсионному действию;
• сайт-визитка — это небольшой ресурс с простой структурой. Такие проекты создаются для информирования аудитории о деятельности компании или отдельного специалиста;
• интернет-магазин — специальный коммерческий формат сайта, позволяющий удобно выбирать и заказывать товары. В его структуру обычно входят корзина, форма обратной связи, фильтры, окна с отзывами, кнопка «Купить» и пр.;
• персональный блог — этот вид сайтов посвящён конкретному человеку или его деятельности. Блоги могут быть развлекательными, биографическими, научными, информационными и пр.;
• сайты услуг — это ресурсы, структура и функционал которых позволяет бизнесу удобно и эффективно предлагать свои услуги.

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

Раздел 3. Создание сайтов

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

Структура любого сайта:

• Дизайн
Это внешний вид и структура сайта: шрифты, цвета, кнопки, элементы меню, разделы и т.д. Его продумывают после того, как возникает идея сделать сайт. Дизайн есть у всех элементов сайта: от баннера или всплывающего меню на главной странице до кнопки перехода в чат в разделе «Контакты».
• Контент
Это любая информация, которую владелец сайта размещает на его страницах: текст, ссылки, фото, аудио и видеоматериалы. Контент сайта хранится на хостинге. Когда пользователь заходит на определённую страницу, программное обеспечение хостинга находит и загружает нужные файлы.
• Написание кода
Код — это текст, в котором разработчики описывают дизайн и поведение сайта на понятном для компьютеров языке. Такие языки называют языками программирования. Языки бывают разные: с помощью одних описывают интерфейс, с помощью других — поведение сервера.

Интерфейсный код описывает дизайн. С его помощью компьютеры понимают внешний вид и расположение элементов на сайте. Чтобы написать интерфейсный код, программисты используют языки HTML, CSS и Javascript. Возможно, вам встречалось такое понятие как «вёрстка сайта». Вёрстка сайта — это процесс создания интерфейсного кода.

Серверный код описывает поведение сайта. С его помощью сервер определяет, что произойдёт, если пользователь нажмёт на кнопку или введёт текст. У одностраничных сайтов такого кода может и не быть. Серверный код нужен, если на сайте есть возможность создать аккаунт, купить товар или услугу. Серверный код пишут на PHP, Java, Ruby и т.д.

Сайты разрабатываются разными способами.
• HTML
На основе HTML создаются статические сайты. Система отвечает за то, чтобы страницы корректно отображались в браузере. На них располагается текст, графика и элементы разметки. Не предусмотрены скрипты для генерации новых страниц. Пользователь видит только страницы, которые созданы веб-мастером.
• PHP
Динамические ресурсы создаются с использованием PHP и других языков программирования. Их использование позволяет писать веб-сценарии. Совокупность таких файлов объединяется скриптами для их исполнения. В зависимости от действий пользователя будет изменяться контент, который ему предоставляется. Кроме PHP, используются Ruby, Python, Perl, ASP.NET.
• CMS

Динамичные ресурсы также создаются с использованием CMS. В этом случае веб-сайт – это продукт специальной программы, которая предлагает возможности для создания и редактирования страниц. Набор скриптов позволяет задействовать базы данных. Эта технология набирает всё большую популярность. Примерами CMS являются PrestaShop, WordPress.

Устройство

Страницы сайтов- это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя. Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображённые страницы можно изменить добавлением стилей, что позволяет централизовать в определённом файле все элементы формирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.

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

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

С

Шапка сайта

труктура Web-страниц

логотип

баннер

поиск



меню

Блок с основным контентом

Блок с дополнит. Инфо.



Блок с дополнит. Инфо.

Блок с дополнит. Инфо.

Низ сайта



Существует несколько основных структур:

ЛShape3Shape1 инейная- страницы располагаются в определённом порядке. Переход с одной страницы на другую строго определён. Такая структура обоснована, например, при обучении. Располагая страницы в определённом порядке, вы можете быть уверены, что пользователь не пропустит нужный материал.

главная страница

Shape8Shape9Shape10Shape11Shape7Shape6Shape5Shape4

ИShape12Shape13Shape14Shape15Shape16Shape17Shape18Shape19Shape20Shape21Shape22Shape23Shape24Shape25Shape26Shape27Shape28Shape29Shape30Shape31

раздел

раздел

раздел

раздел

главная страница

ерархическая- страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна.

Произвольная- страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов.

главная страница

Shape43Shape42Shape41Shape38Shape40Shape39Shape37Shape36Shape35Shape34Shape33Shape32

Главная страница сайта.

Обычно это первая страница, на которую попадает пользователь. Поэтому она должна удовлетворять некоторым условиям:

1.Главная страница должна отражать тематику сайта.

2.Она должна быть интересной, чтобы пользователю захотелось пройтись по другим страницам сайта.

3.желательно разместить на ней функцию поиска по сайту.

4.Пусть на ней будет раздел с постоянно обновляющейся информацией, например: новости, акции, советы дня.

5. Обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес).

6.Сделайте главную страницу отличающейся от остальных, но соответствующей общей стилистике сайта.

Остальные страницы сайта.

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

1.Следите за длиной страницы. Если она больше 2,5 экранов, разбейте страницу на две.

2.Разбивайте текст на абзацы, делайте отступы и поля. Выделяйте текст заголовками и подзаголовками. В общем, сделайте так, чтобы он легко воспринимался.

3.Снабжайте текст картинками и графиками, но не переусердствуйте. Всё должно быть обоснованно.

Web-страницы разделяются на две логические части:заголовок и содержание.

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

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

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

ПримерWeb-страницы

<HTML>

<HEARD>

<TITLE>Петропавловск-Камчатский</TITLE>

<META http-equiv= “Cjntent-Type”= “text/html;

Charset=windows-1251">

<META name=''Author''=''Bayriyeva''>

<META name=''Keywords'' content=''МОЙГОРОДПЕТРОПАВЛОВС-КАМЧАТСКИЙ''>

</HEARD>

<BODY>

здесь размещается содержимое страницы

</BODY>

</HTML>

Часть 2. Основные теги HTML.

Создание.

Начнём создание сайта в стандартной программе- блокнот, которая есть в любом компьютере. Напечатайте любое предложение и сохраните его на рабочем столе с именем файлаindex.html. После появится соответствующий значок.

Если вы отправите свой файл index.html на сервер хостинг-провайдера, он станет доступным для просмотра из любой точки Земного шара.

Таким способом вы можете хоть "Войну и мир" напечатать, и выложить в Интернете. Но, допустим, вам надо изменить размер шрифта, придать ему какой-то цвет, вставить рисунки, фотографии...

Как всё это сделать? А для этого нужно применить язык гипертекстовой разметки-HTML.

HTML.

Html — что это? HyperText Markup Language — это язык разметки документа во всемирной паутине.  Язык html воспроизводится интернет-браузером в виде удобной страницы с текстом, таблицами, списками, изображениями.

Фактически интернет-сайт воспринимается браузером как совокупность страниц, каждая из которых есть ни что иное, как текстовый файл с расширением html (в отличие от обычных текстовых файлов txt или doc), в котором выполняются требования его разметки.

Структура простейшего html файла или простейшей интернет страницы:

<html>

Начало разметки

<heard>

Начало «головы» страницы сайта

<title>Петропавловск-Камчатский</title>

Название страницы сайта

</heard>

Конец «головы»

<body>

Начало «тела» страницы

Мой город Петропавловск-Камчатский

Основной контент сайта

</body>

Конец «тела»

</html>

Конец разметки html

Из примера, если присмотреться, видно, что документ состоит из текста и текста заключенного в скобки <>. <html>, </body>, <title> — так называемые ТЭГИ (или ключевые слова, или дискрипторы).

Тег– начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов. Причем теги есть открывающие <body> и закрывающие </body>. Отличие между ними — наличие правого слеша в закрывающем теге. Практически всегда теги присутствуют парами, кроме нескольких исключений, например тег <br> — у него нет закрывающего тега.

Между тегами <body> и </body> находится вся основная информация или контент, который видят посетители интернет страницы. Для отображения текста в виде таблиц, для вывода видео, картинок, для создания форм и  др. существует достаточное количество тегов.

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

Пока наша страница выглядит не слишком привлекательной. Мелкий шрифт и чёрные буквы на белом фоне почти не обращают на себя внимания. С помощью HTML - тегов можно задать различные параметры форматирования текста. Чтобы придать тексту требуемый вид воспользуемся тегами:

<p> - тег абзаца; используется с закрывающим тегом </p>. Каждый абзац начинается с новой строки. Между абзацами браузер оставляет небольшой промежуток.

<b> - полужирный текст; используется с закрывающим тегом </b>. Любой текст становится полужирным.

<br> - перевод строки.

<hr> - горизонтальная разделительная линия

<H2> - заголовок 1-го уровня используется с закрывающим тегом </H2>.

Чтобы выполнить форматирование имеющегося HTML – документа, разместим теги в нужных местах текста

С помощью тега FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например FACE=”Arial”), атрибут SIZE – размер шрифта (например SIZE=4), атрибут COLOR – цвет шрифта (например COLOR=”#00FF00”)

Задать цвет текста можно следующим образом

<FONT COLOR=”#00FF00”>Текст</ FONT>

Названия цветов и значения RGB

Black = "#000000"

Green = "#008000"

Silver = "#C0C0C0"

Lime = #00FF00"

Gray = "#808080"

Olive = "#808000"

White = "#FFFFFF"

Yellow = "#FFFF00"

Maroon = "#800000"

Navy = #000080"

Red = "#FF0000"

Blue = "#0000FF"

Purple = "#800080"

Teal = "#008080"

Fuchsia = "#FF00FF"

Aqua = "#00FFFF"

Часть 3. Оформление сайта

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

Что входит в понятие «оформление сайта» в нашем понимании:

  1. Подбор цветовой гаммы для сайта;

  2. Формирование расположения текста, рисунков и видео материалов на страницах;

  3. Расположение информационных блоков (рекламы, комментариев, похожих статей и т.д.)

  4. Подбор шрифта (стиля и размера);

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


Если на сайте

  1. Правильно подана информация;

  2. Выделены главные элементы статьи;

  3. Есть дополнительные тематические ссылки;

  4. Цвета не «выедают» глаз;

  5. Явно выражены основные достоинства сайта.

То:

  1. Человек дольше пробудет на странице;

  2. Просмотрит дополнительные страницы;

  3. Зарегистрируется;

  4. Оставит комментарий;

  5. Добавит сайт в закладки или социальные сети;

  6. Вернется на сайт ещё раз.

Следовательно:

  1. Сайт будет лучше ранжироваться в поисковой выдаче;

  2. Поисковые системы будут уважать проект;

  3. Ресурс получит ещё больше целевой аудитории.

Web-страницы могут содержать:

1.Тексты 4.Эмблемы 7.Мультимедиа-файлы

2.Таблицы5.Графики8.Скрипты

3.Логотипы6.Банеры9.Апплеты

10.Флеш-анимации

11.Гиперссылки 12. Таблицы стилей

Часть 4. Подключение графических объектов

Компьютерная графика обладает огромным потенциалом, ведь один рисунок может дать больше информации, чем целая страница текста.

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

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

Если файл находится на удалённом сервере в интернете, то должен быть указан Интернет-адрес этого файла.

Теговое включение графики.

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

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

Инструкция src определяет имя графического файла. Пример:

<img src=”logo.gif”>

Среди других инструкций тега <img> существуют следующие:

  • Alt – альтернативное текстовое описание рисунка;

  • Height – переопределение высоты рисунка;

  • Width – переопределение ширины рисунка;

  • Border – задание ширины границ.

Часть 5. Гиперссылки.

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

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

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

Если загруженная в браузер Web-страница размещена на локальном компьютере в той же папке, то указывается просто имя файла. Относительный URL – адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web – страницы связываются относительными ссылками. Это позволит не изменять адресную часть ссылок при перемещении Web – сайта в другой каталог локального компьютера или при публикации его в Интернете.

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

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

Панель навигации будет представлять собой абзац, выровненный по центру, в которых указатели гиперссылок разделены пробелами (&nbsp):

<palign= “center”>

[<ahref="index.html"> МОЙ ГОРОД ПЕТРОПАВЛОВСК-КАМЧАТСКИЙ</a>]&nbsp

[<ahref="history.html"> История</a]&nbsp [<ahref="vulkani.html"> Вулканы</a>]&nbsp [<ahref="zapovedniki.html">Заповедники </a>]&nbsp [<ahref="anketa.htm">Анкета</a>]&nbsp

Часть 6. Списки на Web-страницах.

Довольно часто при размещении текста наWeb-страницах удобно использовать списки в различных вариантах:

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

  • Маркированные списки, где элементы списка идентифицируются с помощью специальных символов (маркеров)

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

Часть 7. Вставка мультимедиа файлов.

Для вставки на Web-страницу  аудиоролика язык HTML предусматривает парный тег <AUDIO>. Интернет-адрес файла, в котором хранится этот аудиоролик, указывают с помощью атрибута SRC этого тега:

<AUDIO SRC="sound.wav"></AUDIO>

Встретив тег <AUDIO>, Web-обозреватель может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. Также он может вывести на Web-страницу элементы управления, с помощью которых посетитель запускает воспроизведение аудиофайла, приостанавливает его, прокручивает вперед или назад и регулирует громкость. Все это настраивается с помощью различных атрибутов тега <AUDIO>,.

Тег <AUDIO> создает блочный элемент Web-страницы. Так что мы не сможем вставитьаудиоролик на Web-страницу в качестве части абзаца. Зато, чтобы поместить его в отдельный абзац, нам не придется совершать никаких дополнительных действий (в отличие от изображения).

Часть 8. Интерактивные формы на Web-страницах.

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

Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Вся форма заключается в контейнер

<form></form>.

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

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

<INPUT>

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

<br>.

 

Переключатели. 
Далее, мы хотим выяснить, к какой группе пользователей относит себя посетитель. Предложим выбрать ему один из нескольких вариантов: бывал, не бывал, живу на Камчатке.
Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга «INPUT ". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения «бывал», «не бывал», «живу на Камчатке». Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно оно передается серверу.

Флажки.
Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками.
Флажки создаются с помощью тэга «INPUT Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Еще одним обязательным атрибутом является VALUE, которому присвоим значения «WWW», «e-mail» и «FTP». Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно оно передается серверу.

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

Создаётся такая область с помощью тега <TEXTAREA> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS – число строк в области.

Какую информацию вы хотели бы найти, и что вы думаете о нашем сайте?

<br>

<textarea name="resume" ROWS=4 COLS=30>

</textarea>

<br>

<br>

На нашем сайте используются текстовые поля, переключатели и формы на страничке «Анкета». Посетители нашего сайта могут ответить на вопросы анкеты и написать свои пожелания.

Заключение.

Данная работа будет полезна тем, кто решит попробовать создать свой сайт и выйти с ним в глобальную сеть Интернет, для того, чтобы рассказать о себе. Практическая часть работы заинтересует тех, кто захочет узнать о нашем крае, посещая страницы сайта. Посетителями сайта могут быть и сами жители Камчатки, и люди не бывавшие здесь никогда. На страницах сайта можно получить информацию о самом крае, о её истории, заповедниках, флоре и фауне и многое другое. Данные о посещении нашего сайта и добрые слова можно оставить на страничке «Гость».

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

Список используемой литературы

  1. М. Ю. Монахов, А. А. Воронин. – Создаём школьный сайт в Интернете. Элективный курс: Учебное пособие. БИНОМ. Лаборатория знаний, 2005.

  1. И. Г. Семакин, Е. К. Хеннер. Информатика. 10-й класс. БИНОМ. Лаборатория знаний, 2005.

  1. Н. Д. Угринович. Информатика и информационные технологии. Учебник для 10-11 классов. БИНОМ. Лаборатория знаний, 2005.

Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/559462-proekt-sozdanie-web--stranic-c-pomoschju-jaz

Свидетельство участника экспертной комиссии
Рецензия на методическую разработку
Опубликуйте материал и закажите рецензию на методическую разработку.
Также вас может заинтересовать
Свидетельство участника экспертной комиссии
Свидетельство участника экспертной комиссии
Оставляйте комментарии к работам коллег и получите документ
БЕСПЛАТНО!
У вас недостаточно прав для добавления комментариев.

Чтобы оставлять комментарии, вам необходимо авторизоваться на сайте. Если у вас еще нет учетной записи на нашем сайте, предлагаем зарегистрироваться. Это займет не более 5 минут.

Комментарии
Каждый урок –это профессионально е мастерство учителя. Это своего рода шедевр, который он создаёт каждый день. Невозможно переоценить способности учителя. Готовясь к уроку, он выкладывается в полную силу. Как донести до ученика информацию, заложенную в теме урока? Как сделать так, чтобы ему захотелось узнавать больше, чем есть в учебнике? Это, с одной стороны, риторические вопросы. Но вся сложность заключается как раз в этих вопросах. Профессиональны й опыт-вот бесценное подспорье в подготовке к уроку. Этот урок или следующий, не имеет значение, учитель выкладывается на все 100 процентов. Все ли слышат, все ли слушают в классе?... Материал разнообразный…К то-то впервые слышит о событиях, повествующих учителем. Кто-то очень любознательный и подсказывает продолжение темы. И вот потихоньку подключается весь класс и уже беседа, а не монолог учителя. Что может доставить ещё столько удовольствия, как активное участие учеников в уроке. Учитель чувствует, что не зря пришёл на урок, не зря так готовился к нему. Преодолевая трудности в профессионально й сфере, учась из года в год, учитель приобретает бесценный опыт, накапливает знания и полностью делится этим багажом с учениками. Разве это не бесценно?...Результатом являются работы учащихся, которые представляются на олимпиадах, конкурсах различного уровня. А потом, в самостоятельной жизни, это является оплотом для собственных начинаний в построении карьеры. Может это слишком возвышенные слова, но эта профессия, профессия учителя, заслуживает таких слов. Вот материал, который здесь представлен не лишнее тому подтверждение. Сколько труда , сил, времени и профессионализм а вложил сюда учитель. Материал полезный, доступный. Такая работа не может не нравится ученикам. Большое спасибо вам за предоставленный материал!

 

Для скачивания материалов с сайта необходимо авторизоваться на сайте (войти под своим логином и паролем)

Если Вы не регистрировались ранее, Вы можете зарегистрироваться.
После авторизации/регистрации на сайте Вы сможете скачивать необходимый в работе материал.

Рекомендуем Вам курсы повышения квалификации и переподготовки