Реферат на тему Изучение раздела Основы языка гипертекстовой разметки документов в школьном курсе информатики

Министерство образования и науки Российской Федерации
Государственное образовательное учреждение
высшего профессионального образования
«Дальневосточный государственный гуманитарный университет»

Институт математики, физики и информационных технологий

Кафедра информатики и информационных технологий

РЕФЕРАТ ПО ТИМОИ
НА ТЕМУ:

Изучение раздела «Основы языка гипертекстовой разметки документов» в школьном курсе информатики

Выполнила:
Стародубова Светлана
Студентка 252 группы
Научный руководитель:
Пишкова Наталья Евгеньевна
Старший преподаватель
Оценка:
____________________

г. Хабаровск 2011

Оглавление
13 TOC \o "1-3" \h \z \u 1413 LINK \l "_Toc278500023" 14Введение 13 PAGEREF _Toc278500023 \h 1431515
13 LINK \l "_Toc278500024" 141 глава. Теоретические основы и логический анализ содержания изучаемого раздела. 13 PAGEREF _Toc278500024 \h 1451515
13 LINK \l "_Toc278500025" 141.1 Анализ научной литературы 13 PAGEREF _Toc278500025 \h 1451515
13 LINK \l "_Toc278500026" 141.2 Теоретические основы раздела «Основы языка гипертекстовой разметки документов» 13 PAGEREF _Toc278500026 \h 1481515
13 LINK \l "_Toc278500027" 142 глава. Методика изучения раздела в школьном курсе информатики 13 PAGEREF _Toc278500027 \h 14381515
13 LINK \l "_Toc278500028" 142.1 Общие образовательные, развивающие, воспитательные цели темы «Основы языка гипертекстовой разметки документов» и обязательные результаты её изучения. 13 PAGEREF _Toc278500028 \h 14381515
13 LINK \l "_Toc278500029" 142.2 Особенности изучения раздела на различных этапах школьного курса информатики, наличие элективных курсов. 13 PAGEREF _Toc278500029 \h 14401515
13 LINK \l "_Toc278500030" 142.3 Анализ учебной и методической литературы 13 PAGEREF _Toc278500030 \h 14411515
13 LINK \l "_Toc278500031" 142.4 Тематическое планирование по разделу. Различные варианты 13 PAGEREF _Toc278500031 \h 14551515
13 LINK \l "_Toc278500032" 142.5 Разработка планов проведения занятий 13 PAGEREF _Toc278500032 \h 14601515
13 LINK \l "_Toc278500033" 14Заключение 13 PAGEREF _Toc278500033 \h 14731515
13 LINK \l "_Toc278500034" 14Библиографический список: 13 PAGEREF _Toc278500034 \h 14741515
13 LINK \l "_Toc278500035" 14Приложения 13 PAGEREF _Toc278500035 \h 14761515
15

Введение
Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на персональных компьютерах.
В результате работа многих пользователей стала иметь большее отношение к Сети, чем они того сами, может быть желали. Так, одним из способов самовыражения стало размещение личных страничек в Internet. Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис: составить резюме в формате Web-страницы и разместить эту информацию в Сети. Важную роль Internet стал играть для научных, учебных и общественных организаций. Подтверждение этому легко найти, выйдя на просторы киберпространства.
В связи с тем, что в последнее время особенно бурно на всем земном шаре идет процесс информатизации, и все больший вес приобретают науки, связанные с общением, информатизационными и коммуникационными процессами, раздел «Основы языка гипертекстовой разметки документов» становится актуальным и востребованным.
Раздел «Основы языка гипертекстовой разметки документов» является составной частью большой линии изучаемой в школьном курсе информатики, «Коммуникационные технологии». Данная тема входит в учебный план базового и профильного курсов. Степень сложности излагаемого материала варьируется в зависимости от возраста учащихся. На базовом уровне рассматриваются все основные понятия данного раздела. На профильном уровне предусмотрено расширение знаний полученных в базовом курсе.
Актуальность темы обусловлена – необходимостью полноценного изучения важнейших элементов раздела «Основы языка гипертекстовой разметки документов» в школе в связи с практической значимостью и важностью этого материала для учащихся.
Основная цель данной работы – обобщить и систематизировать теоретический, методический материал, подготовить учебные материалы для изучения раздела «Основы языка гипертекстовой разметки документов» в школьном курсе информатики.
Задачи исследования:
изучить и проанализировать научную, учебно-методическую литературу по теме «Основы языка гипертекстовой разметки документов»;
на основе анализа методической и учебной литературы провести логический анализ содержания раздела «Основы языка гипертекстовой разметки документов» и подготовить методику изучения некоторых вопросов данного раздела в школьном курсе информатики.
Работа состоит из введения, двух глав, заключения, библиографического списка и приложения.
В первой главе проводится анализ научной литературы, представлены теоретические основы раздела, логические блоки, понятийный аппарат.
Во второй главе предложены методические материалы раздела «Основы языка гипертекстовой разметки документов» в школьном курсе информатики, проводится анализ методической литературы; приводятся различные варианты тематического планирования по разделу «Основы языка гипертекстовой разметки документов», а также приводятся примеры планов-конспектов проведения занятий, различных по типам.
В заключении представлены результаты исследования и выводы.
Библиографический список состоит из 19 наименований
1 глава. Теоретические основы и логический анализ содержания изучаемого раздела.
1.1 Анализ научной литературы
В наше время написано множество книг по основам языка гипертекстовой разметки, в них можно найти как достаточное количество полезной информации, так и лишний материал.
Для определения необходимого материала изучаемого в данном разделе проанализируем несколько учебников для вузов:
«Информатика» Базовый курс. 2-е издание. Под ред. С.В. Симоновича:
Тема рассматривается в Главе 19 «Публикация Web-документов». Глава разделена на 4 пункта:
Пункт 19.1 «Создание Web-документов».
В пункте даются понятие языка HTML, тега. Приводятся примеры парных и непарных тегов и рассматриваются способы создания и форматирования документов HTML.
Пункт 19.2 «Применение языка HTML».
Рассматривается:
Структура документа HTML(теговая структура, раздел заголовков, тело документа);
Элементы HTML(парные и непарные теги);
Функциональные блочные элементы (заголовок и абзац);
Гипертекстовые ссылки;
Web-графика (форматы GIF,JPEG);
Форматирование текста;
Списки;
Таблицы;
Отображение нескольких документов (фреймы);
Интерактивная Web-страница (элементы управления).
Пункт 19.3 «Работа в редакторе FrontPage».
Данный пункт посвящен изучению программы FrontPage. В нем рассказывается, как создать, отредактировать документ. Также рассматривается применение мастеров и шаблонов.
Пункт 19.4 «Публикация Web-документов».
В пункте отвечают на вопросы:
Как подготовить документы Web-узла таким образом, чтобы перенос их на Web-сервер не привел к нарушению целостности структуры узла?
Как произвести копирование файлов на Web-сервер?
«Информатика и информационные технологии» под ред. Романовой Ю.Д. Учебное пособие:
Автор рассматривает тему «Основы языка гипертекстовой разметки документов» в Пункте 4.7 «Проектирование Web-сайтов». Данный пункт состоит из 3 подпунктов:
Подпункт 4.7.1 «Этапы создания Web-сайта».
Рассматриваются следующие этапы:
Анализ и проектирование.
Написание контента.
Креатив.
Написание кода web-сайта.
Тестирование.
Публикация.
Раскрутка.
Поддержка
Подпункт 4.7.2 «Терминология web-проектирования».
Автор дает определения Web-браузера,Web-сайта,Web-страница. Так же говорит о том, что один из способов создания Web-страниц состоит в использовании текстового редактора Блокнот.
Подпункт 4.7.3 «Создание Web-сайтов средствами языка HTML».
В подпункте рассматриваются:
основные понятия языка HTML и его структура;
теги форматирования текстового потока;
парные теги форматирования заголовков и подзаголовков документа;
парные теги форматирования символов текста;
теги форматирования абзацев;
теги списков, теги списков определений;
теги цвета и линий;
теги для вставки изображений;
тег перехода к другой Web-странице, файл;
тег вставки адреса электронной почты, документа;
теги для создания бегущей текстовой строки;
список цветов символов HTML;
тег подключения звука;
теги фреймов;
теги формы;
теги создания таблиц в HTML;
скрипты.
1.2 Теоретические основы раздела «Основы языка гипертекстовой разметки документов»
Web-проектирование.
Основные термины:
Web-браузер – программа-приложение, предназначенная для интерпретации кодов HTML документов и отображения гипертекстового документа на экране компьютера. Наряду с термином «браузер» используют термины синонимы: «обозреватель» и «навигатор».
Web-сайт – набор связанных между собой, близких по смыслу Web-страниц. На каждом Web-сайте существует одна Web-страница, называемая домашней или главной страницей. Все посетители Web-сайта сначала попадают на нее, а потом с помощью гиперссылок попадают на другие страницы Web-сайта.
Web-страница (документ HTML) представляет собой текстовый фаил на языке HTML формата *.htm или *.html, размещенный в WWW. Web-страница кроме текста может содержать графику, анимации, видеоклипы, музыку, а также гипертекстовые ссылки.
Создание web-сайта предполагает наличие нескольких этапов – от придумывания идеи до ее воплощения. Чтобы создать действительно интересный и полезный продукт, необходимо пройти следующие этапы.
Анализ и проектирование.
Информационное проектирование web-сайта, разработка его концепции, оценка целевой аудитории.
Написание контента.
Под контентом понимается информационное наполнение сайта. Термин применяется для обозначения идейного содержимого web-сайта.
Креатив.
Креатив – термин для обозначения визуальной составляющей web-сайта. Сюда входит разработка дизайна, графических элементов, обработка графики и все, что с ней связано.
Написание кода web-сайта.
Программирование web-файла. Написание функциональной части.
Тестирование.
На этом этапе проверяется все: удобство навигации, целостность данных, корректность ссылок и орфография, к тому же не все браузеры одинаково интерпретируют одни и теже теги HTML.
Публикация.
Размещение web-сайта в интернете. Большинство интернет-провайдеров предоставляют услугу по размещению домашних web-страниц бесплатно (эта услуга называется Web-хостингом).
Раскрутка.
Рекламная компания по созданию web-сайта и повышению его посещаемости. Сюда входит регистрация web-сайта в поисковых системах, обмен ссылками, банерная реклама и др.
Поддержка
Необходимо решить, каким образом будут добавляться новые разделы и материалы, что будет происходить со старыми. Еще более важным явлением является регулярное обновление информации на web-сайте для его постоянной привлекательности.
Существует два способа создания и форматирования документов HTML:
Состоит в разметке существующего (или создаваемого) документа вручную (использование текстового редактора).
Состоит в использовании редакторов WYSIWYG (текстовый процессор Word, Microsoft Office FrontPage и др.)
История создания HTML
HTML - основной, но не единственный язык разметки документов. Существуют как более общие, так и узко специализированные решения.
Исторически первым распространенным форматом был SGML (Standard Generalized Markup Language-стандартный общий язык разметки). SGML был разработан для совместной разработки машинных документов в больших правительственных и аэрокосмических проектах. Он широко применялся в печатном деле и издательской сфере, но его сложность затруднила повседневное использование. Основные наследника SGML- форматы HTML и XML.
HTML (Hypertext Markup Language –язык разметки гипертекста) – самое распространенное сегодня средство для создания Web-страниц. Технология HTML позволяет связать между собой документы различных форматов с помощью гипертекстовых ссылок (гиперссылок или линков). Такие связи между документами, расположенными на серверах по всему миру, позволяют системе работать так, будто она представляет собой единую «всемирную паутину» информации (World Wide Web).
HTML был разработан британским ученым Тимом Бернерсом-Ли в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве. Поначалу HTML создавался как язык для обмена научной и технической документацией, пригодный для людей, не являющихся специалистами в области верстки.
Затем помимо упрощения структуры документа, в HTML была внесена поддержка различных видов гипертекстовых ссылок, а позднее в язык были добавлены мультимедийные возможности. Изначально HTML предназначался для структурирования и форматирования документов без их привязки к программным средствам отображения. В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводится на оборудовании с различной технической оснащенностью (цветной экран современного компьютера, ограниченный по возможностям экран мобильного телефона или программа голосового воспроизведения текстов). Однако современное применение HTML очень далеко от первоначального замысла. С течение времени, основная идея платформенной независимости HTML была отдана “в жертву” современным потребностям в мультимедийном и графическом оформлении.
Текущий стандарт HTML 4.01 существует с 1999 г. В настоящее время опубликован проект пятого стандарта языка. Новая версия обещает дополнить язык многочисленными расширениями и обеспечить более простую, логичную и удобную систему правил. Разумеется, новый стандарт при этом не будет противоречить старому, полностью сохраняя обратную совместимость с уже написанными миллионами документов.
Структура HTML документа
Документ HTML представляет собой фаил типа html или htm, находящийся на сервере интернета, в локальной сети или на жестком диске компьютера. Этот фаил содержит обычный текст и текстовые команды разметки, называемые тегами. С помощью тегов можно решить две основные задачи:
Управлять содержимым документа, включая форматирование текста, разметку заголовка, создание списков и таблиц;
Управлять связями документа с другими ресурсами (изображениями, таблицами стилей, внешними программами, сторонними Web-страницами).
Тег и его структура
Тег HTML имеет общий вид <имя>содержимоеи действует на все, что расположено между парами треугольных скобок. Все теги, имеющие содержимое, должны закрываться, причем закрывающая часть отличается от открывающей <имя> только наличием символа “/”. Теги могут вкладываться друг в друга иерархически, но без пересечений, т.е. допустимо вложение вида <тег1><тег2>, но не <тег1><тег2>. Тег вместе с содержимым часто называют элементом HTML.
Теги делятся на блочные (blok-level) и текстовые (inline). Первые могут содержать как текстовые, так и другие блочные теги. При отображении они всегда выводятся с новой строки. Вторые могут содержать только текст и другие текстовые теги, но не блочные. При отображении они выводятся в текущей строке.
Теги, имеющие содержимое и нуждающиеся в закрывающейся части, называются контейнерами, а теги без содержимого и закрывающей части - унарными.
Внутри открывающей части большинство тегов содержит атрибуты, называемые также параметрами или опциями. Все эти названия просто означают команды, уточняющие действия тега. Какой ширины должна быть ячейка таблицы, формируемая тегом? Где хранится картинка, которую тег должен отобразить? На эти и многие другие вопросы отвечают атрибуты, всегда находящиеся в открывающей части тега. Атрибуты имеют общий вид
Имя= “значение”
и разделяются между собой хотя бы одним пробелом, символом табуляции или перевода строки. Если значение атрибута состоит из одного слова, символы двойных кавычек можно не писать, хотя стандарт рекомендует указывать их всегда. В закрывающей части тега атрибуты не применяются.
У каждого тега имеется набор допустимых для него атрибутов. Для многих атрибутов также заранее известен набор значений, которые они могут принимать. Чаще всего атрибуты можно пропускать, тогда браузер выводит документ, придерживаясь правил, принятых “по умолчанию”. Существуют и обязательные атрибуты. Например, тег вставки картинки не сможет ее найти, если в атрибуте src не будет указано ее местоположение. Как правило, порядок следования атрибутов, допустимых для данного тега, может быть произвольным.
HTML довольно “демократичен”, неправильный тег, лишний атрибут, недопустимое вложение тегов обычно просто игнорируются браузером и не приводят к “зависаниям” или сообщениям об ошибках. Разумеется, при этом может произойти неправильное форматирование документа.
Общая структура документа
HTML-документ состоит из 3 основных частей:
Строка декларации типа документа;
Заголовок документа (Head);
Тело документа (Body).
Заголовок и тело документа заключаются в объединяющий их тег ); Метатеги документа (теги <meta>); Связь с другими документами (теги <link>); Встроенные таблицы стилей для оформления (тег <style>); Встроенные программы-сценарии клиента (теги <script>). Тег <title> представляет собой контейнерный тег без атрибутов, его содержимым может быть любая строка текста, не содержащая других тегов. Именно эта строка будет выведена браузером в заголовке окна или вкладки. Содержимое должно кратко отражать суть документа, его рекомендуемый размер- не более 60-80 символов. Тело документа содержит теги, предназначенные для отображения браузером, и ограничено контейнерным тегом <body> </body>. Создание заголовков Заголовки в документе создаются с помощью команд: <Hi> Заголовок </Hi>, причем при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий. Например, Отображаемый текст Запись в формате HTML Заголовок1 <H1> Заголовок1 </H1> Заголовок2 <H2> Заголовок2 </H2> Заголовок3 <H3> Заголовок3 </H3> Заголовок4 <H4> Заголовок4 </H4> Заголовок5 <H5> Заголовок5 </H5> Заголовок6 <H6> Заголовок6 </H6> Создание списков Списки предназначены для представления информации в упорядоченном виде. В HTML - документах используется 3 вида списков: Неупорядочные списки, Упорядочные списки, Списки - определения. Неупорядоченный список использует для выделения записей специальными символами. Неупорядоченный список определяется следующими командами начала и конца списка: <UL> и </UL> Каждый элемент списка начинается с команды: <LI> В команде <LI> может быть параметр TYPE, который определяет внешний вид символа, используемого для выделения строки в списке и может иметь следующие значения: <li type=disk> - круглая жирная точка, < li type=circle> - окружность, < li type=square> - маленький черный квадрат. В упорядоченном списке все записи пронумерованы. Упорядоченный список определяется следующими командами начала и конца списка: <OL> и </OL> Каждый элемент списка начинается с команды: <LI> В команде <LI> может быть параметр TYPE, который определяет тип нумерации и может иметь следующие значения: < li type=A> - прописными буквами, < li type= a> - строчными буквами, < li type= I> - прописными римскими цифрами, < li type=i> - строчными римскими цифрами, < li type=1> - арабскими цифрами. Тег <DL> создает список определений. Он отличается от остальных списков тем, что каждый его элемент представляется двумя блочными тегами: <DT> содержит имя или название определяемого термина; <DD> содержит описание или определение этого термина. В тег <dt> могут быть включены любые текстовые, но не блочные элементы. Тег <dd> может содержать как текстовые, так и блочные элементы, позволяя создавать многоуровневые вложенные списки. Можно давать несколько определений одному термину или одно определение нескольким терминам: <DL> <dt>www <dt>всемирная паутина <dd>world wide Web – основной сервис сети интернет </DL> Форматирование параграфов и вывод текста в несколько столбцов. В документе HTML невозможно создать абзац, используя клавишу [Enter]. Использование этой клавиши улучшает внешний вид исходного текста, но не влияет на полученное изображение. Для перехода на следующую строку существует тег .Для создания пустой строки необходим тег .Для создания горизонтальной черты можно воспользоваться тегом <hr>. Если черта создается не на всю строку, а на какую - то ее часть, например, на 40%, то команда выглядит следующим образом: <hr width= 40 %>. Для создания широкой черты следует задать ее ширину (по умолчанию - в пикселях) <hr size= 10 > Для выравнивания черты ВЛЕВО/ВПРАВО/ПО ЦЕНТРУ нужно задать соответственный параметр ALIGN=LEFT/RIGHT/CENTER. Черная линия задается наличием параметра NOSHADE. Вы можете расположить текст по центру с помощью следующих команд: <CENTER> Иногда необходимо создать текстовый документ, расположение строк которого (табуляция, отступы, выравнивание) определяется разработчиком домашней страницы, а не программой - редактором. Для создания такого текста пользуются командами: <PRE> текст </PRE>полученный в «браузере» образ текста будет точно соответствовать тексту в исходном HTML файле. Аналогичные функции выполняет пара команд: <LISTING> текст </LISTING> Netscape 3.0 и выше поддерживает вывод текста в несколько столбцов, в газетном формате с помощью команд <MULTICOL> и </MULTICOL>. Ниже приводится формат команд: <MULTICOL COLS= «N» GUTTER= «M»> текст </MULTICOL>. Здесь N - количество столбцов, M - расстояние между столбцами. «Браузеры», не поддерживающие вывод текста в несколько столбцов, обеспечат вывод текста нормально, в 1 столбец. Форматирование символов Для выделения отдельных частей текста можно воспользоваться следующими стилями: B - жирный (Bold); I - курсив (Italic); U - с подчеркиванием (Underline); S - с перечеркиванием (Strike); Ниже представлена таблица команд выделения текста. Отображаемый текст Запись в формате HTML Выделение текста жирным шрифтом Выделение текста жирным шрифтом Выделение текста курсивом Выделение текста курсивом Выделение текста подчеркиванием Выделение текста подчеркиванием Выделение текста перечеркиванием Выделение <strike> текста </strike> перечеркиванием Тег - позволяет задать желаемый для отображения шрифт и его параметры. Основными атрибутами тега являются: Face - определяет список разделенных запятыми шрифтов, поиск которых браузер должен выполнить в порядке приоритета; Color - устанавливает цвет текста. Возможные значения- имена цветов или их 16-ричные коды; Size -устанавливает размер шрифта. Возможные значения атрибута: Целое число от 1 до 7. Устанавливает фиксированный размер шрифта, представление которого зависит от браузера. Не все браузеры могут представлять все 7 размеров; Относительное изменение размера шрифта. Значение «+1» означает «на один размер больше». Значение «-3» означает шрифт на 3 размера меньше. Все размеры относятся к шкале от 1 до 7. Кроме того, можно увеличить или уменьшить высоту шрифта с помощью команд <Big> и . Эти команды используются в паре с командами </Big> и . Еще две пары команд: и - подстрочный индекс, например: H2SO4. и - надстрочный индекс, например: (a2 - b2) = (a - b)(a + b) Все вышеприведенные команды определяют физическое форматирование символов. Задается конкретное изменение характеристик символов. Кроме того, есть логическое форматирование символов - дается описание, а браузер решает как изменять характеристики. Они выглядят следующим образом: <CITE> Цитата <CITE> Особо важный текст Сильное выделение текста <KBD> Текст, введенный пользователем </KBD> <CODE> Листинг программы </CODE> <SAMP> Последовательность литералов </SAMP> <VAR> Имя переменной </VAR> Использование специальных символов В языке HTML символ “<” используется как первый символ каждой команды. Этот символ не может быть использован для обозначения отношения “меньше”. Для отображения на экране символа “<” («меньше») и некоторых других символов в HTML приняты специальные обозначения: Отображаемый текст Запись в формате HTML < < > > & & « " Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного, независимо от того, сколько пробелов было в исходном тексте. Для задания необходимого количества подряд расположенных пробелов следует воспользоваться специальным символом пробела: . Например, в следующей записи исходного текста: (A B) в отображаемом тексте между символами A и B будет 3 пробела. Таблицы - основной инструмент Web-дизайнера. В HTML таблицы служат не только для удобного представления данных, но и являются одним из основных средств форматирования и структурирования Web-страницы. Таблицы в HTML могут содержать текст, графические образы, гиперссылки, заполняемые пользователем формы и даже другие таблицы. Web-дизайнеры рекомендуют, по возможности, избегать использования таблиц только для размещения элементов на экране. Причин этому две: Изменение пользователем размеров окна или шрифтов может исказить внешний вид таблицы или привести к появлению «лишних» полос прокрутки; Большинство браузеров не отображает таблицу до тех пор, пока она не будет загружена полностью. В случаях когда весь или почти весь документ оформлен в виде таблицы, это может привести к долгому ожиданию перед «пустым» экраном. Тем не менее, таблицы – это единственный сложный элемен HTML, который более или менее одинаково поддерживается всеми браузерами, и зачастую только они показываются единственным приемлемым вариантом оформления страницы. Таблица создается с помощью тега <Table> </Table>. Команда <Table> может иметь следующие атрибуты: Width= «размер» - задает рекомендуемую ширину таблицы в пикселях или в процентах от ширины окна браузера. Если атрибут не указан, ширина таблицы вычисляется браузером; Height= «размер» - задает рекомендуемую высоту отображения таблицы. Если атрибут не указан, высота таблицы вычисляется браузером; Border= «пиксели» - задает ширину рамки таблицы в пикселях. Значение по умолчанию равно нулю, т.е. таблица выводится без рамки; Cellspacing= «размер» - задает расстояние между ячейками таблицы. Применяется ко всем четырем сторонам ячейки. Значение по умолчанию зависит от браузера; Cellpadding= «размер» - задает расстояние между содержимым ячеек и рамок. Применяется ко всем четырем сторонам ячейки. Значение по умолчанию зависит от браузера; Frame - указывает какие части внешней рамки таблицы должны быть видны. Возможные значения: Void - не показывается ( принято по умолчанию, если border=0); Above - только верхняя граница; Below – только нижняя граница; Lhs – только левая граница; Rhs – только правая граница; Hsides – только левая и правая границы; Vsides – только верхняя и нижняя границы; Box или border – показывает внешнюю рамку полностью ( по умолчанию, если border>0). Rules – указывает, какие части внутренней рамки таблицы должны быть видны. Возможные значения: None – не показывать внутреннюю рамку(принято по умолчанию, если border=0); Groups – показывает только границы между группами строк и столбцов; Rows – показывает только границы между строками; Cols – показывает только границы между столбцами; All – показывать внутреннюю рамку полностью(принято по умолчанию, если border>0). Align – задает выравнивание всей таблицы относительно содержимого документа Dgcolor= «цвет» - задает фоновый цвет всей таблицы; Bordercolor= «цвет» - задает цвет рамки таблицы. Тег <caption> определяет заголовок таблицы. Он должен употребляться только как первый элемент внутри тега <table>. Его содержимым могут быть исключительно текстовые элементы. Единственный атрибут этого тега – align, принимающий значения top(заголовок находится над таблицей) и botton(заголовок под таблицей). Второй важнейший табличный тег - <tr></tr> - определяет одну строку таблицы. Его содержимое – один или несколько тегов <th> и <td>. Тег может иметь атрибуты, все они необязательны: Align – горизонтальное выравнивание содержимого ячеек строки. Возможные значения: Left – выравнивание влево; Center – выравнивание по центру ячеек; Right - выравнивание вправо; Justify – выравнивание по левому и правому краю ячеек. Valign – Вертикальное выравнивание содержимого ячеек строки. Возможны значения: Top – выравнивание по верхней части ячеек; Middle – выравнивание по центру ячеек; Bottom – выравнивание по нижней части ячеек; Baseline – выравнивание всей строки по общей базовой линии. Bgcollor= «цвет» - задает фоновый цвет строки таблицы. Тег <td></td> определяет ячейку данных таблицы. Его содержимым могут быть как блочные, так и текстовые элементы. Очень похож на него тег <th></th>, определяющий ячейку заголовка таблицы. Гиперссылки - основа Web. Как устроена ссылка. Гиперссылками называют выделенные области документа, позволяющие перейти к другой его части или к другому документу в Сети. Ссылка состоит из «внутренней » части, т.е. URL-адреса документа, на который она указывает, и «внешней», видимой на экране и называемой якорем ссылки (anchor). Якорь может представлять собой слово или группу слов, картинку или ее часть. Для создания гиперссылки служит тег вида <a href=” адрес” tange=”окно”></a>, содержимое которого – текстовый или графический якорь. Атрибут href обязателен, tanget может быть опущен, тогда документ открывается в текущем окне браузера, или указан в виде target=”_blank”, тогда документ открывается в новом окне. Текст ссылки внутри тега может быть любым. Средствами HTML нельзя проверить корректность ссылок, ответственность за нее лежит на Web-мастере. Браузер прореагирует на неправильную ссылку лишь тем, что после безуспешной попытки открыть ее выдаст сообщение «Страница не найдена». Якорем ссылки может быть что угодно, и надежным способом узнать, куда ведет ссылка, на самом деле, только два: Прочитать URL ссылки в нижней части окна браузера, а именно в строке состояния его окна; Щелкнуть правой кнопкой мыши на ссылке, в появившемся меню найти команду копировать ярлык ( или копировать ссылку), а затем в удобной для вас программе выполнить команду вставить. Оба способа могут быть «отменены» WEB-мастерами. Например, с помощью события onmouseover легко заставить браузер показывать в строке состояния не URL активной ссылки, а все что угодно. Абсолютные и относительные ссылки. Ссылка, в которой указан URL документа, называется абсолютной. Относительная ссылка адресует документ, опуская общую адресную часть. Например, если из документа index.html нужно сослаться на документ test.html, находящийся в той же папке, это можно сделать ссылкой вида <a href=”test.html”>документ test.html</a>. Относительная ссылка позволяет ссылаться на папки, которые являются как вложенными, так и родительскими по отношению к папке расположения исходного документа. Внешние и внутренние ссылки. Одно из преимуществ электронного документа в сравнении с обычным – возможность быстро перейти к нужному месту или найти его по ключевому слову. Внутренние ссылки предназначены для навигации в пределах документа. Они имеют вид <a href=”#закладка”> якорь ссылки</a>. Для создания закладки служит тег вида: <a name=”закладка”>якорь закладки</a>. Имена закладок должны быть уникальными в пределах документа. Якорь закладки может быть пустым. Например, если первое слово документа заключается в тег <a name=”start”></a>, то в нижней части можно разместить ссылку вида <a href=”#start”>к началу страницы</a>, щелчок по которой позволит быстро перейти к началу документа. Внутренние ссылки удобны и для организации оглавления документа. Все ссылки, не относящиеся к внутренним, являются внешними. Внешняя ссылка также может содержать адрес закладки в документе. Например, для перехода из текущего документа к закладке с именем x1 документа work.html, находящегося в этой же папке, достаточно записать тег вида <a href=”work.html#x1”></a>. Ссылки на различные виды ресурсов. Адресовать можно и различные виды ресурсов Интернета. С точки зрения пользователя они отличаются между собой используемым протоколом прикладного уровня. Поскольку протокол указывается в URL гиперссылки, легко сослаться на адрес электронной почты, файловый архив FTP. Самыми распространенными видами ресурсов являются: HTTP- основной протокол, обеспечивающий доступ к Web-страницам (http://). FTP- протокол передачи файлов FTP, позволяющий обмениваться файлами с удаленным компьютером(ftp://). MAILTO- доступ к электронной почте. Вслед за mailto: указывается адрес электронной почты, имеющий общий вид имя@домен (mailto:). FILE- указывается в качестве протокола при обращении к Web-странице, расположенной на локальной машине (file://). Управление цветом Основным способом задания произвольного цвета служит указание его RGB-кода. Этот код строится в виде последовательности трех чисел, задающих интенсивность красного, зеленого и синего цветов. Каждое из чисел может принимать значения от 0 до 255 включительно. Понять, почему у интенсивности цвета 256 значений, очень легко. Дело в том, что с помощью одного байта, содержащего 8 битов, можно закодировать именно столько различных чисел, соответствующих возможным интенсивностям из диапазона 0-255. Сложность лишь в том, что интенсивности эти записываются не в десятичной, а в шестнадцатиричной системе счисления. Это сделано, потому что вся информация в компьютере хранится в виде совокупности двоичных чисел,а шестнадцатеричное число - самая удобная сокращенная запись его двоичного значения. RGB-код записывается в виде #RRGGBB, где RR, GG, BB – указанные в форме шестнадцатеричных чисел интенсивности красного, зеленого, и синего компонентов соответственно. Спецификация языка требует добавления перед кодом символа “#”. Так, белому цвету соответствует код #FFFFFF(все интенсивности имеют максимальные значения), черному- #000000 (все интенсивности выключены), красному- #FF0000(полностью вклучена только интенсивность красного компонента), зеленому- #00FF00, синему- #0000FF. Указание кодов не всегда удобно, поэтому разработчики стандарта HTML предусмотрели в нем альтернативное и более привычное наименование цвета. Все браузеры поддерживают стандартный цветовой набор из 16 цветов: Цвет: Название в HTML : Код: Черный Black #000000 Светло-серый Silver #C0C0C0 Серый Gray #808080 Белый White #FFFFFF Темно-бордовый Maroon #800000 Красный Red #FF0000 Пурпурный Purple #800080 Фиолетовый (фуксия) Fuchsia #FF00FF Темно-зеленый Green #008000 Зеленый Lime #00FF00 Оливковый Olive #808000 Желтый Yellow #FFFF00 Темно-синый Navy #000080 Синий Blue #0000FF Темно-циановый Tean #008080 Сине-зеленый (циан) Aqua #00FFFF Выбор именно этих цветов в качестве стандартных не случаен. Как легко видеть из таблицы интенсивность их RGB-компонентов принимают только фиксированные значения 00, 80 и FF, т.е. 0, 128 и 255 в десятичной системе счисления(кроме цвета silver). Это гарантирует, что даже устройство с невысоким качеством цветопередачи сможет отобразить такие цвета без значительных искажений. Основной цветовой набор HTML-документа указывается через атрибуты тега <body>: Bgcolor= “цвет” – фоновый цвет страницы; Text= “цвет” – цвет основного текста страницы; Link= “цвет” – цвет не посещенных ссылок; Alink= “цвет” – цвет активной (нажатой в данный момент) ссылки; Vlink= “цвет” – цвет посещенных пользователем ссылок. Указывая атрибут color= “цвет” тега , мы можем изменять цвет произвольной части текста. HTML позволяет изменять фоновый цвет всей таблицы, а также ее отдельной строки или ячейки. Для этого достаточно в теге <table>, <tr>, <th> или <td> bgcolor= “цвет”. Вывод изображения на экран. Тег <img> связывает с документом HTML графический образ, находящийся во внешним файле. Он может содержаться в любых текстовых и блочных элементах, кроме <pre>. В простейшем случае, тег имеет вид: <img src= “URL”> Здесь обязательный атрибут src указывает абсолютный или относительный URL-адрес файла, в котором хранится изображение. Этот фаил должен быть в одном из трех форматов, поддерживаемых браузероми (gif, jpeg или phg). Если рисунок не найден или не загружен из-за ошибок связи, на его месте выведется пустая рамка. Поскольку тег <img> просто определяет место вставки рисунка в документ, закрывающая часть ему не нужна и даже запрещена спецификацией. Все остальные атрибуты формально не обязательны, но указание атрибутов alt, width и height настоятельно рекомендуется для всех рисунков, кроме «декоративных» или служащих фоном. Атрибут alt задает альтернативный текст, который выводится браузером вместо рисунка, если вывод графических изображений отключен или не поддерживается. Атрибуты width= “размер” и height= “размер” задают размер рисунка на экране по горизонтали и вертикали соответственно. Эти атрибуты наиболее полезны, когда они указывают точные размеры рисунка в пикселах. Их задание позволяет браузеру в процессе загрузки документа сразу же зарезервировать на странице место для рисунка, что несколько ускорит его отображение и позволяет избежать некрасивых «скачков» содержимого при загрузке. Так же при работе с рисунком можно использовать атрибут align. Он определяет выравниванием образа относительно окружающего его содержимого документа. Возможные значения атрибута: Align= “left” – рисунок прикрепляется к текущему левому полю документа. Последующий текст обтекает изображение справа; Align= “right” - рисунок прикрепляется к текущему правому полю документа. Последующий текст обтекает изображение слева; Align= “bottom” – нижняя граница изображения выравнивается по базовой линии текущей строки. Это значение установлено по умолчанию; Align= “middle” – середина изображения выравнивается по базовой линии текущей строки; Align= “top” – верх изображения выравнивается по самому высокому элементу текущей строки; Align= “texttop” – верх изображения выравнивается по самому высокому текстовому элементу текущей строки; Align= “absmiddle” – середина изображения выравнивается по середине текущей строки; Align= “absbottom” – нижняя граница изображения выравнивается по самым нижним элементам букв текущей строки; Align= “baseline” – используется некоторыми браузерами как bottom. Базовая линия для текста проходит по нижней части строки, на уровне символа точки или запятой. При этом не учитываются фрагменты букв, выходящие вниз за строку. Атрибут border устанавливает обрамление рисунка. Его цвет соответствует цвету текстовых ссылок. Если атрибут не указан, браузер может автоматически добавлять обрамление рисунка, вставленного в тег ссылки. Запретить обрамлять рисунок можно указанием значения атрибута border = “0”. Для вставки фонового рисунка на Web-страницу существует только один путь – атрибут background= “URL” тега <body>. Гипертекстовая ссылка с помощью изображения. Рисунки можно использовать в качестве ссылок. Изображение в этом случае достаточно разместить в теге <a href=URL></a>: <a href= “document.html”><img src= “link.gif” wids= “100” height= “24”></a>. Атрибут href тега <a> задает относительный или абсолютный путь к документу, на который указывает ссылка, а атрибут scr тега <img> - путь к графическому файлу. Формы Web-страница является интерактивной по самой своей природе, связанной с использованием гиперссылок. Но это пассивная интерактивность. Подлинная интерактивность, позволяющая получать от посетителей Web-страницы произвольные данные, достигается путем использования форм. Форма - это средство, позволяющее организовать в домашней странице диалог с ее пользователем. Разработчик домашней страницы создает eё с помощью специальных элементов: - кнопки, - списки, - текстовые строки, - текстовые поля. Формы передают информацию программе обработки в виде пар: Имя поля - Значение поля. Форма начинается командой <form> и заканчивается командой </form>. Данная команда имеет 2 основных параметра: action и method. Параметр action является обязательным. Он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода). Параметр method не является обязательным. Он принимает одно из двух значений: get или post, связанных с методом протокола передачи информации из анкеты. По умолчанию, method = get . Пример команды form : < form action = «http://www.sakhalin.ru» method = post > Для задания управляющей кнопки запуска передачи данных надо записать следующую команду: <Input type = submit name = «botton1» value = «Произвольный текст» > где: Input - команда создания управляющего элемента. Type - параметр, определяющий управляющий элемент. Submit - значение этого параметра (в данном случае управляющая кнопка). Name - параметр, задающий имя переменной. Botton1 - имя переменной. Value - параметр, задающий текст, отображаемый на управляющем элементе. Произвольный текст - значение текста на управляющем элементе. Ниже приводятся основные типы управляющих элементов Input. Текстовая строка: Type=text определяет окно для ввода одной строки текста. Параметр Size задает размер окна в символах. Пример:<Input type = text Name= «text1» Size = 30 Value= «Введите текст» >В полученное окно, в котором будет изображаться текст: Введите текст, вы можете ввести любой текст или оставить записанный начальный текст «Введите текст» без изменений.При нажатии кнопки submit в программу обработки будет передано:text1=Введите текст (или другой, измененный текст).При необходимости ограничить длину текста n , применяйте дополнительный параметр: Maxlength= n. Окно для ввода пароля: Type=password ,аналогичен типу text , но при вводе каждый символ заменяется символом “ * ”. Пример: Надо ввести пароль длиной не более 5 символов.<Input type=password Name= pass Size= 10 Maxlength= 5 > Текстовое окно: Textarea. Задается в следующем виде: <Textarea Name= text3 Cols= 30 Rows= 5 Wrap=Virtual> Первоначально заданный текст </Textarea> Параметр Cols задает количество символов в строке, параметр Rows задает количество строк в окне, необязательный параметр Wrap=Virtual задает линейку прокрутки. Радиокнопка: Type=radio. Может быть задано несколько радиокнопок с одинаковым именем (т.е. значением параметра Name), но они будут взаимоисключающими: может быть нажата (Checked) только одна из них. Пример: <Input type = radio Name = color Value = «Красная» checked> Красная <Input type = radio Name = color Value = «Синяя» > Синяя <Input type = radio Name = color Value = «Зеленая» > Зеленая Мы получили 3 кнопки, из них отмечена Красная. При нажатии на другую кнопку предыдущая освобождается. Допустим, мы нажали Синюю кнопку, тогда при нажатии на кнопку submit в программу обработки будет введено:color=Синяя Помеченный квадрат: Type=checkbox. В отличие от радиокнопок, может быть несколько квадратов с одинаковыми именами. Скрытый текст: Type=hidden. При отображении не виден пользователю. Служит для прямой передачи служебной информации от домашней страницы обработчику формы, прозрачно для пользователя. Меню: Select. Пусть Вам представилась возможность выбрать одну из путевок в соответствии со следующим списком: <Select Name= «script» > <Option Value = «tour1» > Путевка в Сочи <Option Value = «tour2» > Путевка в Париж <Option Value = «tour3» > Путевка на Колыму Если Вы выбрали Путевку в Париж, то при нажатии на кнопку submit в программу обработки будет введено: script = tour2 Команда Select может содержать атрибут Multiple, при котором можно выбрать несколько элементов меню одновременно. Высоту окна можно задать атрибутом Size=n. Если в строке Option задан атрибут checked, то данный элемент задается по умолчанию. Кнопка ввода: Type=submit Это и есть та самая кнопка, о которой мы так часто вспоминали. <Input type = submit Value= «Ввод данных» > Кнопка отмены: Type = reset Кнопка выполняет инициализацию начальными значениями всех полей. <Input type=reset Value= «Очистить поля» > Метатеги и их назначение Метатеги предназначены для описания свойств документа в целом. Каждый тег <meta> содержит пару атрибутов: название свойства в атрибуте name и его зна ·чение в атрибуте content, например, следующий распространенный метатег задает имя автора документа: <meta name= “Author” content= “А.С. Пушкин” lang= “ru”>. Атрибут lang указывает здесь язык, на котором описано значение свойства. Многие поисковые системы используют свойства description (описание документа) и keywords(ключевые слова) для извлечения дополнительной информации. При этом описание должно быть кратким (до 180 – 200 символов), а список ключевых слов следует разделять запятыми: <meta name= “description” content= “Изучение основных возможностей языка HTML”> <meta name= “keywords” content= “HTML, Web, www, учебник”> Достаточно часто поддерживается свойство robots, содержащее указания для поисковых машин. Значение свойства robots – это список директив, разделенных запятыми: Index – страница должна быть проиндексирована поисковой машиной; Noindex – страница не должна быть проиндексирована; Follow – следовать по гиперссылкам на странице; Nofollow – не следовать по гиперссылкам на странице; All – то же, что“index, follow” (принято по умолчанию); None – то же, что “noindex, nofollow”. Вместо атрибута name метатег может содержать http-equiv, указывающий, что в атрибуте content указана информация прикладного протокола HTTP. Таким способом задается ряд важных свойств документа. 2 глава. Методика изучения раздела в школьном курсе информатики 2.1 Общие образовательные, развивающие, воспитательные цели темы «Основы языка гипертекстовой разметки документов» и обязательные результаты её изучения. Общеобразовательные цели: освоение знаний о структуре Web-документа, основных элементах языка разметки гипертекста, основах Web-дизайна; овладение умениями применять на практике полученные теоретические знания, работать в среде редакторов HTML освоение технологий проектирования с опорой на виды информационной деятельности; Воспитывающие цели: формирование целостного восприятия окружающего мира; воспитание бережного отношения к результатам информационной деятельности человека; воспитание эстетического восприятия. Развивающие цели: формирование и развитие приемов умственного труда; развитие логических приемов: анализа, синтеза, абстрагирования, обобщения. По окончанию изучения темы «Основы языка гипертекстовой разметки документов» учащиеся должны: Знать: понятия гипертекст, web-сайт, web-страница; назначение языка HTML; основные теги; технологию оформления web-документов. Уметь: применять теги языка HTML; работать в среде редакторов HTML; включать графическую иллюстрацию в web-документов; помещать гиперссылку в web-документ; выбирать тему проекта и описывать проблему; составлять план работы над проектом; подбирать и систематизировать материал в соответствии с выбранной темой проекта; подбирать программный инструментарий для создания проекта; создать проект, используя освоенные в курсе программные среды и технологию работы в них; защитить проект. 2.2 Особенности изучения раздела на различных этапах школьного курса информатики, наличие элективных курсов. С разделом «Основы языка гипертекстовой разметки документов» учащиеся знакомятся еще в 9 классе, но подробнее изучение отводится на старшую школу. Одна из задач профильной школы – содействовать воспитанию нового поколения. Отвечающего по своему уровню развития и образу жизни условиям информационного общества. Для этого учащимся предполагается осваивать способы работы с информационными потоками - искать необходимую информацию, анализировать ее, выявлять в ней факты и проблемы, самостоятельно ставить задачи, структурировать и преобразовывать информацию в текстовую и мультимедийную форму, использовать ее для решения учебных и жизненных задач. Умение представлять информацию в виде, удобном для восприятия и использования другими людьми, - одно из условий образовательной компетентности ученика технологического профиля. Web-сайт – наиболее популярное и доступное старшеклассникам средство представления текстовой, графической, и иной информации в сети Интернет. Для изучения всех тонкостей при создании Web-страничек в старшей школе можно ввести элективные курсы: «Создаем школьный сайт в интернете» М.Ю Монахов, А.А. Воронин; «Технология создания сайтов» А. В. Хуторской, А.П. Орешко. 2.3 Анализ учебной и методической литературы Методика обучения основам языка гипертекстовой разметки документов представлена в рамках курсов широко известных авторских коллективов: «Информатика и информационные технологии», Гейн А.Г., 8-9классы. «Информатика. Базовый курс», Угринович Н.Д., 8-9 классы. «Информатика и ИКТ. Базовый уровень», Угринович Н.Д., 10-11 классы. «Информатика и ИКТ. Профильный уровень», Угринович Н.Д.,10-11 классы. Рассмотрим подробнее курсы этих авторов. «Информатика и информационные технологии», Гейн А.Г.,8-9 классы.Тема представлена в учебнике за 9-й класс главе 3 «Хранение и поиск информации». В §25 «HTML- язык описания электронных документов» дается определение языка разметки гипертекста, объясняется структура html-документа и рассматриваются теги форматирования текста. В §26 «Первое знакомство с «отмеченными объектами».» показываются теги создания гиперссылок и вставки картинок. В §27 «Как оформить HTML-страницу» показывается прием оформления web-страниц, который основывается на работе с тегами создания таблицы. «Информатика. Базовый курс», Угринович Н.Д., 8-9 классы. В данном курсе раздел «Основы языка гипертекстовой разметки документов» изучается в 9-ом классе в Главе 5 «Коммуникационные технологии» пункте 5.7 «Разработка Web-сайтов с использованием языка разметки гипертекста HTML». Учащиеся знакомятся: со структурой HTML документа; с тегами форматирования текста на web-странице; с тегом вставки изображения ну web-страницу; со способом создания гиперссылок в web-документе; с тегами создания списков; с интерактивными формами на web-страницах (дополнительно). При изучении данного курса учащиеся смогут объяснить структуру документов сети интернет, воспользоваться основными конструкциями языка разметки гипертекста при создании простейших web-сайтов. «Информатика и ИКТ. Базовый уровень», Угринович Н.Д., 10-11 классы. В старшей школе на базовом уровне тема «Основы языка гипертекстовой разметки документов» изучается в учебнике за 10-й класс в Глава 2 «Коммуникационные технологии». Теория представлена в пункте 2.13 «Основы языка разметки гипертекста».При изучения этого пункта учащиеся вспоминают теорию изученную в 9-ом классе. Также в учебнике представлена практическая работа 2.11 «Разработка сайта с использованием web-редактора.». При выполнении которой учащиеся создают web-страницы «Рост интернета» с помощью web-редактора «Компановщик». «Информатика и ИКТ. Профильный уровень», Угринович Н.Д., 10-11 классы. В старшей школе на профильном уровне изучение темы начинается в 11-ом классе в Главе 5 «Коммуникационные технологии» пункте 5.2 «Интерактивные формы на Web-страницах». В подпункте 5.2.1 «Структура HTML-кода Web-страницы» актуализируются знания, полученные по этой теме в основной школе. В подпункте 5.2.2 «Создание интерактивных Web-страниц» рассказывается о тегах, с помощью которых создаются элементы управления различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д. В практической работе 5.3 «Разработка интерактивной Web-страницы с использованием Web-редакторов» учащиеся изучают Web-редакторы: Microsoft Office FrontPage 2003; Microsoft Office SharePoint Designer 2007; Macromedia Dreamweaver 8; Microsoft Visuals Web Developer 2005 Express Edition. «Информатика и ИКТ» Быкадоров Ю.А. 8 класс. Тема раскрывается совсем кратко в Главе 7 «Информационные ресурсы Интернета». В §55 «Всемирная паутина» даются определения Web-службы, Web-страницы, Web-адреса страницы, гиперссылки, гипертекста, сайта. В §59 «Подготовка публикаций в Интернете с помощью текстового редактора Word» говорится о понятии языка HTML, структуре тега и рассматривается создание Web-страницы с помощью текстового редактора Word. Тема не рассматривается в рамках курсов авторских коллективов: «Информатика и ИКТ», под ред. Макаровой Н. В., 8-9 класс; «Информатика и информационно-коммуникационные технологии». Базовый курс. Семакин И.Г. , 8-9 класс. Также при изучении данного раздела преподаватель может воспользоваться статьёй «Создание Web-страниц с помощью HTML» Е.Н. Новоселова, И.Р. Кадырова из журнала «Информатика и образование». Статья разделена на части, которые находятся в нескольких номерах журнала. В №11 за 2004г. рассматриваются вопросы: Планирование сайта в целом; Планирование отдельных страниц; Инструментарий для создания Web-страниц(обычные текстовые редакторы, HTML-редакторы, WYSIWYN-редакторы); Навигация по сайту; Публикация сайта; Работа с поисковыми сервисами. Метатеги; Что такое HTML; Структура документа; Создание заголовков разных уровней; Оформление горизонтальных и вертикальных линий. Даются советы для начинающих сайтостроителей, В №12 за 2004г. разбираются вопросы: Шестнадцатеричные коды цветов; Web-цвета; Кодирование спецсимволов; Фон Web-страницы; Фиксированный фон; Оформление текста (абзац, разрыв строки, выравнивание текста в абзаце, теги форматирования абзацев, задание шрифта, контейнеры увеличения и уменьшения размера шрифта, контейнеры для шрифтового выделения). В №1 за 2005г. освещены вопросы: нумерованные списки; маркированные списки; многоуровневые списки). В №2 за 2005г. рассматриваются вопросы: создание таблиц; выравнивание данных в ячейке; объединение ячеек таблицы; общие параметры таблицы. В №3 за 2005г. разбираются вопросы: вставка иллюстраций; задание размеров иллюстрации; задание рамки вокруг рисунков; альтернативный текст; совместная верстка рисунка и текста с помощью таблицы; обтекание изображения текстом; задание отступов по краям рисунка; использование таблиц при обтекании изображения текстом. Рассмотрим подробнее элективные курсы по изучению данного раздела: «Создаем школьный сайт в интернете» М. Ю. Монахов, А.А. Воронин Данный элективный курс предназначен для учащихся 10-11 классов информационно-технологичекого, физико-математического, естественно-научного и гуманитарного профилей. УМК содержит: Учебное пособие: Оно включает в себя 11 глав. Каждая глава – законченный учебный модуль, включающий в себя теоретический материал, практические задания, задания для самостоятельной работы, темы рефератов. CD-ROM: Содержит следующие папки: В папках Chapter <номер главы> - файлы, используемые для иллюстрирования отдельных вопросов в главах книги. В папке HTML40r – спецификация языка HTML 4.0 . Можно выделить следующие цели курса: Получить профессиональные навыки создания сайтов в Интернете. Сформировать у обучаемых творческий подход, способность к самостоятельному и инициативному решению проблем, умение использовать типовые инструментально-технологические средства и эффективно работать в неоднородных командах. Задачами данного курса являются: Организация деятельностного обучения, т.е включение учащихся в реализацию деятельности по созданию своего личного, командного и общегруппового веб-сайта; Модульность построения учебного материала, уровневый подход к формированию системы заданий; Ориентация учебного процесса на развитие самостоятельности и ответственности ученика за результаты своей деятельности; Приобретение практических навыков в работе с современными типовыми инструментальными и технологическими средствами создания веб-сайтов. Поставленные задачи решаются посредством: Проведение теоретических и практических занятий по тематике курса; Выбора различных заданий для самостоятельной работы; Углубленного изучения тематики посредством подготовки рефератов; Самостоятельного выбора объекта для проектирования, разработки и публичной защиты проекта. Упор в освоении курса сделан на практические занятия, доля которых составляет 85 % от объема всего курса. В элективном курсе рассматривается следующий теоретический материал: История развития, возможности, типовые инструменты и средства глобальной сети Интернет; Основные этапы и задачи проектирования модели Web-сайта как системы; Основные способы создания Web-страниц; Основные конструкции языка гипертекстовой разметки документов HTML; Основные способы защиты информации в Интернете. После изучения курса учащиеся должны научиться: Выполнять поиск необходимой информации в Интернете; Выполнять системное проектирование модели Web-сайта, выделяя и реализуя элементы, связи, функции; Создавать Web-страницы, собирать и устанавливать Web-сайт, принимать меры по защите информации; Работать в команде над одним проектом, выполняя разные роли. Курс рассчитан на одно полугодие. Занятия проводятся по два часа в неделю. В рамках курса общим объемом 35 ч предполагается развитие пользовательских навыков работы с ПЭВМ, применение готовых программных продуктов, облегчающих и автоматизирующих создание веб-сайта и его управление. Рассмотрим подробнее каждую главу: Глава 1. Осваиваем интернет. Содержит: Структура сети интернет; Виды доступа к интернету; Принципы функционирования сети; Сервисы Интернета; Программы просмотра (браузеры); Глава 2. Создаем среду сайта. Состоит: Функции Web-сервера; HTTP-сервер Apache. Установка и настройка. Глава 3. Определяем функции сайта. Состоит: Виды сайтов; Функции сайта. Глава 4. Проектируем внешний вид сайта. Состоит: Создание стартовой страницы; Прочие страницы сайта: дизайн и навигация;(приводится пример разработки эскиза веб-страницы). Глава 5. Проектируем карту сайта. Содержит: Карта сайта; Виды карт сайта; Файловая структура сайта; Глава 6. Создаем свою первую веб-страницу. Состоит: Автоматизированный способ создания веб-страниц; Режим теговой разметки; Глава 7. Подключаем графические объекты. Содержит: Использование редактора MS WORD; Создание прозрачного фона в редакторе Adobe PhotoPhop; Теговое включение графики; Глава 8. Выполняем верстку страницы. Содержит: Визуальное создание таблиц в редакторе MS Word; Теговое создание таблиц; Создание фреймовой структуры; Глава 9. Собираем и публикуем сайт на веб-сервере Содержит: Создание гиперссылок в редакторе MS Word; Теговое создание гиперссылок; Управление фреймами; Копирование сайта на сервер; Тестирование сайта; Глава 10. Оживляем сайт. Содержит: Создание анимированного изображения; Оптимизация анимации; Глава 11. Защищаем сайт. Содержит: Основные правила обеспечения безопасности сервера; Основные параметры защиты HTTP-сервера Apache; «Технология создания сайтов» А. В. Хуторской, А.П. Орешко. Элективный курс «Технология создания сайтов» является предметом по выбору для учащихся 10 или11 классов старшей профильной школы. Курс рассчитан на 70 часов, которые проводятся в течение учебного года по 1 часу в неделю. Возможно, и более сжатое по времени изучение курса с использованием проектного метода обучения или технологии «погружения». Курс включает в себя практическое освоение техники создания Web-страниц, тематических сайтов,Web-квестов, информационно – справочных и иных сайтов. Его задачей является также подготовка школьников к осознанному выбору интернет-профессий, предусматривающих Web-мастеринг. Курс может с успехом использоваться не только в технологическом, но и в других профилях старшей школы, поскольку Web-стиль деятельности относится ко всем сферам современного общества – гуманитарным, естественно – научным, социальным, экономическим, сервисным и др. В УМК входит: учебное пособием для учеников; методические рекомендации для учителя. Цели курса: Научить учащихся ориентироваться и продуктивно действовать в информационном Интернет-пространстве, используя для достижения своих целей создаваемые Web -ресурсы; Сформировать у них целостное представление об информационной картине мира средствами «Всемирной паутины». Научить способам представления информации в сети Интернета; Познакомить со способами научно-технического мышления и деятельности, направленными на самостоятельное творческое познание и исследование информационной части сетевого пространства; Реализовать коммуникативные, технические и эвристические способности учащихся в ходе проектирования и конструирования сайтов; Сформировать элементы информационной и телекоммуникационной компетентности по отношению к знаниям, умениям и опыту конструирования Web -сайтов. Задачи курса: Познакомить с видами Web -сайтов, их функциональными, структурными и технологическими особенностями; Сформировать навыки элементарного проектирования, конструирования, размещения и сопровождения Web -сайта; Дать первичные навыки программирования на языках HTML, Dynamic HTML, CSS; познакомить с основами Web -дизайна; Научить основам работы с программами Dreamweaver и Flash(или аналогичными); Сформировать навыки работы в коллективе с комплексными Web-проектами; Создать и разместить в сети Интернета собственный Web -сайт по выбранной тематике. Основной тип занятий практикум. Большинство заданий курса выполняется с помощью персонального компьютера и необходимых программных средств. Доступ в Интернет желателен, но не обязателен. Многие работы ученики могут осуществлять без подключения к сети. Единицей учебного процесса является блок уроков (глава). Каждый такой блок охватывает изучение отдельной информационной технологии или ее части. В рамках данного курса учащиеся овладевают следующими знаниями, умениями и способами деятельности: знают принципы и структуру устройства «Всемирной паутины», формы представления и управления информацией в сети Интернета; умеют найти, сохранить и систематизировать необходимую информацию из сети с помощью имеющихся технологий и программного обеспечения; владеют браузерами IE, NN, Opera; умеют спроектировать, изготовить и разместить в сети Web-сайт объемом 510 страниц на заданную тему; умеют программировать на языках HTML, Dynamic HTML, CSS на уровне создания не менее 35 соответствующих элементов сайта; владеют способами работы с изученными программами (редакторы сайтов, Flash, FTP и др.); умеют передавать информацию в сеть Интернета с помощью протокола FTP, специальных программ, Web-форм; знают и умеют применять при создании Web-страницы основные принципы Web-дизайна; владеют необходимыми способами проектирования, создания, размещения и обновления Web-сайта; знают виды Web-сайтов, способны произвести анализ и сформулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности; владеют приемами организации и самоорганизации работы по изготовлению сайта; имеют положительный опыт коллективного сотрудничества при конструировании сложных Web-сайтов; имеют опыт коллективной разработки и публичной защиты созданного сайта; способны осуществлять рефлексивную деятельность, оценивать свои результаты, корректировать дальнейшую деятельность по сайтостроительству. Содержание курса Глава I. Моя Web-страничка (6 ч) Основные понятия: гипертекст, HTML, тег, браузер, Web-страница, разметка, структура документа, заголовок, тело. Глава II. Графика (4 ч) Основные понятия: растровый формат, векторный формат, метафайлы, рамка изображения, выравнивание, обтекание. Глава III. Гипертекстовый документ (6 ч) Основные понятия: организация информации, гипертекстовые ссылки, внутренние ссылки, активные ссылки, посещенные ссылки, абсолютные адреса, относительные адреса. Глава IV. Виды сайтов (4 ч) Основные понятия: виды сайтов, критерии оценки, дизайн, навигация, эргономика, юзабилити, скорость загрузки, интерактивность, чат, форум, гостевая книга. Глава V. Основы HTML (8 ч) Основные понятия: списки, таблицы, фреймы, формы, метатеги, интерактивность. Глава VI. Редакторы сайтов (8 ч) Основные понятия: редактор Web-страниц, активные элементы, динамический язык, сценарий, баннер, сервер, администрирование. Глава VII. Дополнительные возможности создания Web-страниц (6 ч) Основные понятия: каскадные таблицы стилей, CSS, селектор, Flash, символ, клип, кнопка, анимация движения, анимация формы, Dynamic HTML, интерактивность, сценарии, статические и динамические страницы, активные элементы. Глава VIII. Основы Web-дизайна (8 ч) Основные понятия: дизайн, векторная и растровая графика, графический редактор, инструменты, фильтры, графические примитивы, палитра цветов, формат графического файла, заголовки, текст, разделы, ссылки, термины, эффективность рекламы. Глава IX. Размещение, «раскрутка» и поддержка сайта в сети (4 ч) Основные понятия: Интернет, IP-адрес, домен, провайдер, хостинг, трафик, доступ по коммутируемым каналам, выделенная линия, модем, скорость передачи информации, администрирование сайта, протоколы FTP, TCP/IP, HTTP, релевантность запросов, скорость загрузки, критичность размеров файлов изображений и Web-страниц, электронная почта, реклама, снам, статистика, посещаемость страниц сайта, счетчик, поисковые системы, поисковые роботы, рейтинг ресурса, баннер, метатеги, ключевые слова, содержание, заголовки страниц, эффекты дизайна, интерактивность, баннерный обмен, обмен страницами. Глава X. Проектирование сайта (4 ч) Основные понятия: концепция сайта, цели сайта, структура сайта, пользователи, навигация. Глава XI. Зачетная работа (10 ч) Основные понятия: тема и структура Web-сайта, проектирование, изготовление, размещение, тестирование сайта, экспертная оценка. Глава XII. Олимпиада по Web-дизайну (2 ч) Основные понятия: логотип, фирменный стиль, баннер, макет, графика, дизайн. 2.4 Тематическое планирование по разделу. Различные варианты 9 класс (УМК Угриновича Н.Д.) № Тема 3ч. 1 Разработка Web-сайтов с использованием языка разметки гипертекста (HTML – HyperText Markup Language). 1 2 Форматирование текста. Вставка графики и звука. Гиперссылки 1 3 Практическая работа №35 «Разработка простого Web-сайта» 1 11 класс Физико-математический профиль Объем - 2 часа в неделю (140 часов в год) (УМК Угриновича Н.Д.) № урока Разработка Web-сайтов 8ч. 1 Web-сайты и Web-страницы. Форматирование текста и размещение графики 1ч. 2 Практическая работа №28 «Web-сайты и Web-страницы. Форматирование текста и размещение графики» 1ч. 3 Гиперссылки на Web-страницах 1ч. 4 Практическая работа №29 «Гиперссылки на Web-страницах» 1ч. 5 Формы на Web-страницах 1ч. 6 Практическая работа №30 «Формы на Web-страницах» 1ч. 7 Инструментальные средства создания Web-стран 1ч. 8 Контроль знаний и умений: защита проекта 1ч. 11 класс Информационно-технологический профиль. Объем – 4 часа в неделю (280 часов в год) (УМК Угриновича Н.Д.) Данное тематическое планирование составлено на основе авторского планирования курса информатики профильного уровня Угриновича Н.Д. (Угринович Н.Д. Преподавание курса «Информатика и ИКТ» в основной и старшей школе: Методическое пособие для учителей. – М.: БИНОМ, 2004. – 139 с. – С.67-79.). Тематическое планирование включает в себя тематику теоретических и практических занятий с отведенным на их изучение количеством часов, перечень необходимого программного обеспечения. В планировании отдельно выделен минимальный перечень практических работ на ПК, которые необходимы для реализации практической составляющей курса информатики. Так же в планировании отведено время для проведения контрольных работ. № Тема Всего часов Из них Вид практического занятия Контроль Программное обеспечение 1 Разработка Web-сайтов с использованием языка разметки гипертекста (HTML – HyperText Markup Language). Форматирование текста. Вставка графики и звука. Гиперссылки. 3 1 2 Семинар 2 Практическая работа № 30. Web-сайты и Web-страницы. Форматирование текста и размещение графики 1 - 1 Практикум на ПК Пр/р №30 Программа разработки Web-сайтов FrontPage Express 3 Практическая работа № 31. Гиперссылки на Web-страницах 1 - 1 Практикум на ПК Пр/р №31 Программа разработки Web-сайтов FrontPage Express 4 Практическая работа № 32. Формы на Web-страницах 1 - 1 Практикум на ПК Пр/р №32 Программа разработки Web-сайтов FrontPage Express 5 Практическая работа № 33. Инструментальные средства создания Web-страниц. Тестирование и публикация Web-сайта. 5 - 5 Практикум на ПК Пр/р №33 Программа разработки Web-сайтов FrontPage Express 6 Контрольная работа № 5. Технологии хранения, поиска и сортировки информации (защита проекта 1 - 1 К/р №5 11 класс Информационно-технологический профиль. Объем – 4 часа в неделю (280 часов в год) (УМК Угриновича Н.Д.) № урока Название темы Кол-во часов 1-2 Разработка Web-сайтов с использованием языка разметки гипертекста (HTML – HyperText Markup Language). Форматирование текста. Вставка графики и звука. Гиперссылки. 2 3-4 Формы на Web-страницах. 2 5-6 Разработка Web-сайтов 2 7-8 Разработка Web-сайтов 2 9-10 Инструментальные средства создания Web-страниц. Тестирование и публикация Web-сайта. 2 11-12 Тестирование, выполнение зачетной практической работы 2 2.5 Разработка планов проведения занятий 1.План-конспект урока из раздела “ Основы языка гипертекстовой разметки документов” Учебник: Угринович Н.Д “Информатика и ИКТ” 9 кл. Тема:” Как создать Web-сайт?” (для 9 класса) Цели: Образовательные: Сформулировать основные принципы создания web-страниц; Познакомить учеников со структурой web-документа; Формировать навыки и умения создания простейших web-страниц. Развивающие: Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль. Воспитательные: Воспитывать аккуратность, внимательность, вежливость и дисциплинированность. Тип урока: урок изучения нового материала План урока: Организационный момент.(2 мин.) Актуализация опорных знаний.(2 мин.) Изложение нового материала.(20 мин.) Закрепление изученного материала (работа на компьютере).(20 мин) Итоги урока, домашнее задание.(1 мин.) Оборудование: мультимедийная система, слайды, компьютеры. Ход урока: Организационный момент Приветствие. Проверка присутствующих. Актуализация опорных знаний Как вы можете определить понятие «Интернет»? Что такое служба WWW? Как называются документы, которые мы можем просматривать в программе-браузере? Изложение нового материала (лекция с элементами беседы). Многие из вас задавали вопрос: “А как создать web-страницу?”. С сегодняшнего урока мы с вами начнем отвечать на этот вопрос. Создание Web-сайта это проектная деятельность. Какой шаг вы будете делать первым при разработке проекта? (Определим цели и задачи проекта) Значит первый шаг в создании Web-сайта: постановка целей и задач. Но любой web-сайт рассчитан на определенную аудиторию, тогда в этот же пункт можно отнести и определение целевой аудитории.На слайде 2 презентации появляется 1 этап (приложение 1). Web-страница тоже является текстовым документом. Для любого документа вы отбираете информацию, которая более полно отражает цели проекта . Для создания Web-сайта эта процедура также проделывается. Отобранный материал называется контентом сайта.На слайде 2 презентации появляется 2 этап (приложение 1). Следующий этап - это создание Web-страничек.На слайде 2 презентации появляется 3 этап (приложение 1). После того как вы создали сайт, для того чтобы его могли просматривать различные пользователи его необходимо разместить в интернете. Эта процедура имеет специальное название – хостинг.На слайде 2 презентации появляется 4 этап (приложение 1). Для того что бы ваш сайт стал популярным необходимо заняться раскруткой проекта, а также не забывать об обновлении информации на сайте.На слайде 2 презентации появляется 5 этап (приложение 1). Первые два этапа для нас привычны и понятны. А вот третий этап остается загадкой. Давайте попробуем ее разгадать.Для этого зайдем на любой сайт интернета. Например:слайд 3 презентации (приложение 1) В браузере существует команда просмотреть код страницы. После её выполнения мы видим текс т, в котором содержится как обычный текст, так и текстовые команды разметки. слайд 4 презентации (приложение 1) Эти текстовые команды разметки, называемые тегами языка HTML. HTML “язык разметки гипертекста” – основной “язык Интернета”, на котором написано и пишется большинство имеющихся в Сети страниц. Слайд 5 презентации (приложение 1) HTML был разработан британским ученым Тимом Бернерсом-Ли в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве. Поначалу HTML создавался как язык для обмена научной и технической документацией, пригодный для людей, не являющихся специалистами в области верстки.Текущий стандарт HTML 4.01 существует с 1999 г. В настоящее время опубликован проект пятого стандарта языка. Новая версия обещает дополнить язык многочисленными расширениями и обеспечить более простую, логичную и удобную систему правил. Разумеется, новый стандарт при этом не будет противоречить старому, полностью сохраняя обратную совместимость с уже написанными миллионами документов. HTML - основной, но не единственный язык разметки документов. Существуют как более общие, так и узко специализированные решения.слайд 6 презентации (приложение 1) Теперь зная о существовании языка HTML мы можем дать следующие определения:на слайде 7 презентации (приложение 1) даются определения: WEB-документа, WEB-страницы, WEB-сайта и WEB-дизайна. HTML документа имеет определённую структуру. Давайте подробно разберем её.слайд 8 презентации (приложение 1) Документ HTML имеет три структурных типа содержимого:Теги Комментарии Текст Мультимедийные элементы – картинки, звук, видео – не являются частью HTML-документа и хранятся в отдельных файлах. HTML-документ содержит только ссылки на эти файлы в виде тегов.слайд 9 презентации (приложение 1) HTML-документ состоит из 3 основных частей: Строка декларации типа документа(необязательно); Заголовок документа (Head); Тело документа (Body). Посмотрим пример небольшой странички слайд 10 презентации (приложение 1) Разберем 3 основные части подробнее Заголовок документа тег <Head>Он может содержать теги: <Title> ,<meta>, <link>, <style>, <script>.слайд 11 презентации (приложение 1) Тело документа тег <Body>Все, что находится между<body> и </body>, называется содержимым тела документа.слайд12 презентации (приложение 1) На слайде 13 презентации (приложение 1) представлены параметры тега<body>. А теперь запишем алгоритм создания web-страницы в блокноте.слайд 14 презентации (приложение 1) Закрепление изученного материала. На этом этапе создается проблемная ситуация ситуация, которая будет разбираться на следующем уроке. А сейчас каждый попробует самостоятельно создать свою первую страничку. Текст отображаемый на страничке должен содержать 2 абзаца(при выполнении этого задания происходить закрепление изученного, но также у них возникает трудность, так как тегов форматирования текста они еще не знают). В ходе выполнения задания вы столкнулись с трудностью, в браузере ваш текст не разбивается на абзацы. Из этого можно сделать вывод, что нельзя ограничится тегами, которые мы уже прошли, а нужно расширить наши знания. Для этого следующий урок пройдет в форме семинара, на котором вы сами будете рассказывать о новых тегах. (Далее выбираются 3 докладчика, после урока преподаватель объясняет, что каждому из них нужно найти). Итоги урока. Выставление оценок. Домашнее задание: Пункт 5.7.1 , 5.7.2 и конспект. 2. План-конспект урока из раздела “ Основы языка гипертекстовой разметки документов” Учебник: Угринович Н.Д “Информатика и ИКТ” 9 кл. Тема:”Оформление текста Web-страницы” (для 9 класса) Цели: Образовательные: Познакомить учеников с тегами форматирования текста; Формировать навыки и умения создания простейших web-страниц. Развивающие: развитие способности к анализу и обобщению; развитие информационной культуры. Воспитательные: развитие познавательного интереса; воспитание информационной культуры. Тип урока: семинарское занятие. План урока: Организационный момент.(2 мин.) Актуализация опорных знаний.(6 мин.) Изложение нового материала.(35 мин.) Итоги урока, домашнее задание.(2 мин.) Оборудование: мультимедийная система, слайды, компьютеры. Ход урока: Организационный момент. Приветствие. Проверка присутствующих. Актуализация опорных знаний. На предыдущем уроке мы с вами начали знакомится с языком разметки гипертекста. Так из каких частей состоит Web-страница? ( Строка декларации типа документа(необязательно), заголовок документа (Head), Тело документа (Body)) Что заключает в себе тег <Head></Head> ? (теги заголовка) Как называется все, что находится между<body> и </body>? ( содержимым тела документа) На прошлом уроке вы создавали первую страничку и заметили что знаний, которые вы имеете, еще не достаточно для получения желаемого результата. На сегодняшнем уроке мы с вами будем изучать теги форматирования текста. Изложение нового материала. На прошлом уроке мы выбрали трех докладчиков, так давайте узнаем, что они могут нам рассказать по нашей сегодняшней теме. Далее по очереди выходят докладчики. Первый докладчик рассказывает о создании заголовков и списков. Второй докладчик рассказывает о форматировании параграфов и выводе текста в несколько столбцов. Третий докладчик рассказывает о форматировании символов и использовании специальных символов. (В приложении 2 приведен пример презентации.) Итоги урока. Выставление оценок. Домашнее задание: Пункт 5.7.3 и конспект. 3.План-конспект урока из раздела “ Основы языка гипертекстовой разметки документов” Учебник: Угринович Н.Д “Информатика и ИКТ” Профильный уровень 11кл. Тема:”Практическая работа «Добавление гиперссылок и списков на Web-страницы» ” (для 11 класса) Цели: Образовательные: Формировать навыки и умения работы с тегами языка HTML и создания простейших web-страниц. Развивающие: учить строить аналогии, выделять главное, ставить и решать проблемы. Воспитательные: Воспитывать аккуратность, внимательность, вежливость и дисциплинированность. Тип урока: практическое занятие. План урока Организационный момент. Техника безопасности при работе с компьютером.(5мин.) Разъяснение хода практической работы.(5мин.) Выполнение практической работы. (30 мин.) Оценивание выполнения работы.(4 мин.) Итоги урока.(1 мин) Ход урока: Приветствие. Проверка присутствующих. Техника безопасности при работе с компьютером. Разъяснение хода практической работы. Раздаются листы с заданиями. Преподаватель вместе с учениками читает каждое задание . Отвечает на вопросы учеников. Выполнение практической работы Текст работы: Язык разметки гипертекста HTML Практическая работа «Добавление гиперссылок и списков на Web-страницы» ” Для 11 класса Задание 1 : Создать WEB-странички по образцу с указанными списками: a. b. с. Задание 2. Создать еще одну WEB-страничку index.html, на которой должны быть гиперссылки на 1.html, 2.html, 3.html. На этих страничках нужно сделать переход на главную (index.html) Оценивание выполнения работы. Итоги урока. 4.План-конспект урока из раздела “ Основы языка гипертекстовой разметки документов” Учебник: Угринович Н.Д “Информатика и ИКТ” Профильный уровень 11кл. Тема:” Как хорошо я изучил HTML” (для 11 класса) Цели: Образовательные: Выявить степень усвоения учащимися основ языка гипертекстовой разметки. Развивающие: Развивать навыки выступлении на публике, умение делать выводы, высказывать свою мысль. Воспитательные: Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, уважение к одноклассникам. Тип урока: аттестационный План урока: Организационный момент.(2 мин.) Выполнение тестирования(10 мин.). Защита проектов.(25 мин.) Итоги урока, выставление оценок.(8 мин.) Оборудование: мультимедийная система, компьютеры с браузером. Ход урока: Организационный моментПриветствие. Проверка присутствующих. Сегодня у нас последний урок по изучению языка HTML.Он будет проходить в два этапа:1 этап: сначала вы пройдёте небольшое тестирование по теории, которую изучили.(на компьютерах запущен тест созданный с помощью html (приложение)).2 этап: это защита созданных вами проектов. Выполнение тестирования. Всего вопросов: 11 вопросов 1-4, 8,11 - выбрать из 3х вариантов ответа; 5-7, 9, 10 – выбрать из 4х вариантов ответа; Критерий оценивания: “5”- 11 правильных ответов “4”- 9-10 правильных ответов “3”- 7-8 правильных ответов “2”- менее 7 Защита проектов. Учащиеся показывают созданные Web-сайты. При подведении итогов используются следующие критерии, введенные в таблицу. Баллы 2полностью 1частично 0нет Структура сайта Отражены цели, ход, результаты исследования Сформулированы выводы Описаны использованные информационные ресурсы Содержание представленной информации Представленная информация является ценной и интересной Стилистически текст построен грамотно Орфографические ошибки отсутствуют Текст написан понятным языком Дизайн сайта Дизайн соответствует тематике сайта Текст на выбранном фоне хорошо читается Иллюстрации хорошего качества Навигация по сайту Представлен широкий спектр средств навигации Все гиперссылки работают корректно Всегда можно вернутся на исходную страницу Итого баллов: Подведение уроков и выставление оценок Заключение Информатика играет особую роль в школе как фундаментальная наука о способах обработки и использования знаний в общественной практике. Техническими и программно-методическими средствами информационных технологий учащиеся пользуются каждодневно соответственно своему возрасту и имеющимся условиям. Повседневно пользуясь современным инструментарием интеллектуального труда, учащийся не только конструирует свое видение мира, но и учится эффективному использованию информационных услуг в собственной жизни и учебной деятельности. В данной работе были обобщен и систематизирован теоретический, методический материал по теме «Основы языка гипертекстовой разметки документов». Приведены тематические планирования раздела по учебникам различных авторов, конспекты уроков различных типов, варианты тестирования. В ходе обобщения и систематизации теоретических, методических материалов можно сделать вывод, что разделу «Основы языка гипертекстовой разметки документов» в школьном курсе информатики отводится не достаточное количество часов. Поэтому рекомендуется использование элективных курсов для изучения всех тонкостей сайтостроения, в связи с его практической значимостью для учеников. Библиографический список: Симонович С.В. Информатика. Базовый курс. 2-е издание / Под ред. С.В. Симоновича – СПб.: Питер, 2004.-640с. Романова Ю.Д. Информатика и информационные технологии : учебное пособие / Ю.Д. Романова, И.Г. Лесничая, В.И Шестаков, И.В. Миссинг, П.А. Музычкин; под ред. Ю.Д. Романовой. – 3-е издю, перераб. И доп. – М.: Эксмо, 2008. – 592 с. Быкадоров Ю.А. Информатика и ИКТ. Учебник для 8 класса / Ю.А. Быкадоров. , М.:Дрофа– 286с. Семакин И.Г. Информатика и информационно-коммуникуционные технологии. Базовый курс: Учебник для 8 класса / И.Г. Семакин, Л.А. Залогова, С.В. Русаков, Л.В. Шестакова. – М.:БИНОМ. Лаборатория знаний. 2005. – 176 с. Семакин И.Г. Информатика и информационно-коммуникуционные технологии. Базовый курс: Учебник для 9 класса / И.Г. Семакин, Л.А. Залогова, С.В. Русаков, Л.В. Шестакова. – М.:БИНОМ. Лаборатория знаний. 2005. – 371 с. Макарова Н. В. Информатика и ИКТ. Учебник 8-9 класс / под ред. Проф. Н.В.Макаровой. – СПб.: Питер, 2009.- 416с. Гейн А.Г., Сенокосов А.И. Информатика и информационные технологии : учеб. Для 9 кл. общеобразоват. Учереждений / А.Г. Гейн, А.И. Сенокосов. : Просвещение, 2006. – 301с. Угринович Н.Д. Информатика и ИКТ. Базовый курс: учебник для 8 класса / Н.Д. Угринович. – 3-е изд., испр. – М.: БИНОМ. Лаборатория знаний, 2005. – 205с. Угринович Н.Д. Информатика и ИКТ. Базовый курс: учебник для 9 класса / Н.Д. Угринович. – 4-е изд. – М.: БИНОМ. Лаборатория знаний, 2006. – 320с. Угринович Н.Д. Информатика и ИКТ. Базовый уровень : учебник для 10 класса / Н.Д. Угринович. – 5-е изд. – М.: БИНОМ. Лаборатория знаний, 2009. – 212с. Угринович Н.Д. Информатика и ИКТ. Профильный уровень : учебник для 10 класса / Н.Д. Угринович. – 3-е изд., испр. – М.:БИНОМ. Лаборатория знаний, 2008. – 387с. Угринович Н.Д. Информатика и ИКТ. Профильный уровень : учебник для 11 класса / Н.Д. Угринович. – 2-е изд., испр.и доп. – М.:БИНОМ. Лаборатория знаний, 2009. – 308 с. Угринович Н.Д. Преподавание курса «Информатика и ИКТ» в основной и старшей школе: Методическое пособие для учителей. / Н.Д. Угринович – М.: БИНОМ. Лаборатория знаний, 2004. – 139с. Каспаржак А.Г. Элективные курсы в профильном обучении: Образовательная область «Информатика»/Министерство образования РФ/ общая редакция сборника осуществлена А.Г. Каспржаком Национальный фонд подготовки кадров. М.: Вита-Пресс, 2004. 112 с. Статья «Создание Web-страниц с помощью HTML» Е.Н. Новоселова, И.Р. Кадырова из журнала «Информатика и образование» - №11, 12 – 2004, №1,2,3 – 2005. Монахов М.Ю. Создаем школьный сайт в Интернете. Элективный курс: Учебное пособие / М.Ю. Монахов, А.А. Воронин. – М.: БИНОМ. Лаборатория знаний, 2005. – 128с. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008.-352с. Полонская Е.Л. Язык HTML. Самоучитель / Е.А. Полонская. - М.:Издательской дом “Вильяме”, 2003. – 320с. Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик –СПб.:Питер, 2008.-256с. Гилярова М.Г. Информатика. 10 класс Проектная деятельность/ Сост. М.Г. Гилярова. – Волгоград: ИТД «Корифей». – 128с. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Практическое руководство по HTML, 2005. - [ Cкачайте файл, чтобы посмотреть ссылку ] Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Полонская Е.Л. Язык HTML. Самоучитель / Е.А. Полонская. - М.:Издательской дом “Вильяме”, 2003. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик –СПб.:Питер, 2008. Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик –СПб.:Питер, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Практическое руководство по HTML, 2005. - [ Cкачайте файл, чтобы посмотреть ссылку ] Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик –СПб.:Питер, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик –СПб.:Питер, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Кисленко Н.П. HTML. Самое необходимое /Н.П. Кисленко. – СПб.:БХФ-Петербург, 2008. Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик –СПб.:Питер, 2008. Полонская Е.Л. Язык HTML. Самоучитель / Е.А. Полонская. - М.:Издательской дом “Вильяме”, 2003. Чиртик А.А. HTML: Популярный самоучитель. 2-е изд./А.А.Чиртик –СПб.:Питер, 2008. Полонская Е.Л. Язык HTML. Самоучитель / Е.А. Полонская. - М.:Издательской дом “Вильяме”, 2003. 13 PAGE \* MERGEFORMAT 147415 1.html На этой страничке создать упорядоченный или неупорядоченный список Рисунок Текст Текст Текст Текст Текст Заголовок Заголовок 1 Рисунок Рисунок Рисунок Текст 3.html На этой страничке добавить вложенный список Рис. Рис. Рис Текст Текст Текст Заголовок 2.html Здесь сделать список определений fl‚„дкю · · · · · · · · · · · · · ·ѕмою>N · · · · · · · · · · · · · · · · · · · · · · · · ·J ·J · · ·H ·H · · · · · · · · · · · · · · · · · · · · · · · · · · „ю · · · · · · · · ·�P · · · ·тPђЗаголовок 1чђЗаголовок 2чђЗаголовок 3<ђЗаголовок 4±ђЗаголовок 5±ђЗаголовок 6±ђЗаголовок 7±ђЗаголовок 8±ђЗаголовок 915 </div> <div class="clearfix"></div> </div> <div class="col-md-4"> <div id="secondary" class="widget-area" role="complementary"> <aside id="search-2" class="blog-widget widget widget_search"><form role="search" method="get" id="search" style="float:none;" action="/"> <input type="search" class="col-md-9 search-field" placeholder="Search here …" value="" name="s" title="Search for:"> <input type="submit" class="col-md-3 search-submit" value=""> </form> </aside> <aside id="recent-posts-2" class="blog-widget widget widget_recent_entries"> <h4>Закажи дипломную, курсовую, реферат через ВКонтакте</h4>  <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 4, wide: 1, height: 400, color1: "FFFFFF", color2: "000000", color3: "5181B8"}, 209814955); </script> </aside><aside id="archives-2" class="blog-widget widget widget_archive">  <div id="yandex_rtb_R-A-636063-2"></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-636063-2", "renderTo": "yandex_rtb_R-A-636063-2" }) }) </script> </aside> </div> </div> </div> </div>  <div class="beforefooter text-center"></div> <footer id="colophon" class="site-footer " role="contentinfo"> <div class="text-center wraptotop"> <a class="totop"></a> </div> <div class="footer"> <div class="container"> <div class="row"> </div> </div> </div> <div class="footerbottom"> <div class="container"> <div class="row">  <div class="col-md-6"> </div>  <div class="col-md-6 smallspacetop"> <div class="pull-right smaller"> <ul id="menu-%d1%84%d1%83%d1%82%d0%b5%d1%80" class="footermenu"><li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok1/">urok1</a></li> <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok2/">urok2</a></li> <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok3/">urok3</a></li> <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok4/">urok4</a></li> <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok5/">urok5</a></li> <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok6/">urok6</a></li> <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok7/">urok7</a></li> <li id="menu-item-672" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-672"><a target="_blank" rel="noopener" href="http://lib-5.ru/freereferat/">freereferat</a></li> <li id="menu-item-673" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-673"><a target="_blank" rel="noopener" href="http://lib-5.ru/ref12/">ref12</a></li> </ul> </div> <div class="clearfix"> </div> </div>  </div> </div> </div> </footer>  </div> <script type='text/javascript' src='/wp-content/themes/biscayalite/js/bootstrap.js?ver=3.3.5' id='wow-bootstrapjs-js'></script> <script type='text/javascript' src='/wp-content/themes/biscayalite/js/jquery.easing.1.3.js?ver=6.1.4' id='wow-easingjs-js'></script> <script type='text/javascript' src='/wp-content/themes/biscayalite/js/common.js?ver=6.1.4' id='wow-commonjs-js'></script> <script type='text/javascript' src='/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.5' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='/wp-content/themes/biscayalite/js/isotope.js?ver=6.1.4' id='wow-isotopejs-js'></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(31342598, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/31342598" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <script src="//code.jivo.ru/widget/SJcRVelprK" async></script>  <script type="text/javascript">!function(){var e={"token":"+79202357777","position":"left","bottomSpacing":"","callToActionMessage":"Заказать диплом, курсовую онлайн","displayOn":"everywhere","subtitle":"Описание или время работы","message":{"name":"Заказать диплом или реферат","content":"Здравствуйте, ч могу вам помочь с дипломной, курсовой или другой работой? Пишите"}},t=document.location.protocol+"//bothelp.io",o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=t+"/widget-folder/widget-whatsapp-chat.js",o.onload=function(){BhWidgetWhatsappChat.init(e)};var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(o,n)}();</script>  </body> </html>