Урок - Образовательная галактика Intel

Приложение 1
Заявка
На участие в конкурсе проектов «Школа будущего вместе с Intel» по созданию
образовательной среды «1 ученик: 1 компьютер» среди общеобразовательных школ
России.
Гор. Нижний Новгород, шк.№145
Данные об организации-заявителе
Название учреждения образования: Муниципальное образовательное учреждение средняя
общеобразовательная школа №145
Адрес: индекс 603063, город Нижний Новгород, посёлок Новое Доскино, улица линия 19, дом 25.
ФИО директора: Коробова Ирина Михайловна
Электронная почта: schooln145@inbox.ru
Телефон/факс: 831 292 07 54
Руководитель проекта
ФИО: Чугунова Юлия Аркадьевна
Электронная почта: yulya.chugunowa@yandex.ru
Телефон:+79051914220
Описание проекта
Создание учащимися 6-х классов тестов по учебным предметам с помощью языка гипертекстовой
разметки (HTML).
Цели:
• овладение умением анализировать, обобщать и делать выводы по проделанной работе
• развитие познавательных интересов, интеллектуальных и творческих способностей путем
освоения и использования средств языка HTML и средств ИКТ при изучении различных
учебных предметов
• овладение умением использовать приобретенные знания в практической деятельности и
повседневной жизни
Задачи:
• получение учеником знаний о том, что такое Web-страница, HTML.
• умение создавать HTML-документ.
• умение использовать средства языка HTML и ИКТ при изучении различных учебных предметов
• заинтересованность ребят в создании более сложных Web- страниц, целого сайта.
По мере создания и пополнения банка тестов и заданий будет создан единый электронный
архив, который будет помещен на сайт школы http://www.school145nn.edusite.ru, и таким образом
любой желающий сможет проверить свои знания, а также родители смогут посмотреть работу своего
ребёнка.
А оставить свои замечания, пожелания можно на форуме сайта www.edusite.ru.
Результаты проекта
В результате реализации проекта учащиеся 6-го класса:
1. получит знания о том, что такое Web-страница, HTML.
2. сможет создавать HTML-документ
3. сможет использовать средства языка HTML и ИКТ при изучении различных учебных
предметов
4. овладеет умением самостоятельно анализировать, обобщать и делать выводы по
проделанной работе
5. сможет использовать приобретенные знания в практической деятельности и
повседневной жизни
Целевая группа
Программа нацелена на детей 6 класса. Предметы: информатика, любой другой учебный предмет.
Организация обучения
1
1. Правила использования персональных мобильных
компьютеров школьника (CMPC) в учреждении:
 выдается ученику только на учебный год и передается следующему классу,
компьютеры
 находятся в предметном кабинете
2.Компьютеры будут находится в учебном кабинете
Каждый ученик должен иметь тетрадь, ручку, раздаточный материал (таблицы с тегами и др.). У
него отдельное рабочее место с компьютером.
3. Организация взаимодействия учителя и учеников с
помощью персональных мобильных компьютеров школьника и точки доступа Wi-Fi, программы ELearning .
4. Хранение школьных ноутбуков предполагается в металлическом несгораемом шкафу.
5. Организация технической поддержки:
 зарядка аккумуляторов в ящике для хранения школьных ноутбуков
 установка программного обеспечения, мелкий ремонт, устранение элементарных системных
сбоев силами сотрудников учреждения
8. Будут привлекаться родители к участию в процессе обучения с помощью CMPC.
Так как у ученика на руках будут распечатанные практические задания, таблицы с тегами,
родители вполне смогут полноценно разобраться в поставленных задачах.
Методическая поддержка и обобщение опыта
в образовательном учреждении по организации методической поддержки, сбору, анализу и
обобщению опыта по внедрению модели «1 ученик : 1 компьютер» предполагается:
 проведение курсовой подготовки;
 создание методического объединения;
 проведение еженедельных совещаний;
 участие в методических форумах на сайте проекта;
 разделение ответственности.
Предполагаемое ПО, используемое в учебном классе: Microsoft Windows, Internet Explorer,
стандартный пакет приложений Microsoft Windows ( Блокнот).
Отчетность и представление результатов
Проект по внедрению модели «1 ученик : 1 компьютер» будет
сопровождаться мониторингом и анализом эффективности в соответствии с критериями успешности
проекта, указанными выше.
1. Показатели или критерии успешности проекта будем готовы предоставить через:
3 месяца - выполнение тестовых заданий по материалу занятий
6 месяцев - создание тестовых заданий на HTML по информатике
12 месяцев- создание тестовых заданий на HTML по любому другому предмету
2. Регулярно буду собирать на разных этапах проекта материалы для предоставления отчета
 от учителей: текстовый материал по предмету, планы уроков
 детей: анкеты, опросы, фото, видеосюжеты, тесты
 родителей: интервью, опросы, анкеты
Внимание!
1.
Участие в Конкурсе подразумевает согласие с нижеприведенными Условиями и правилами.
2.
К участию допускаются лица не моложе 18 лет, в противном случае требуется письменное согласие родителей или
иных законных представителей. К участию не допускаются сотрудники корпорации Intel, ее аффилированных и
дочерних компаний, равно как и их родственники и лица, принимающие непосредственное участие в организации
Конкурса. Данный Конкурс объявляется только для лиц, постоянно проживающих на территории Российской
Федерации. Проведение настоящего Конкурса регулируется законодательством России.
3.
Условия предоставления и обработки информации в связи с Конкурсом:
«Информация» - любые сведения (сообщения, данные, в т.ч. персональные данные), предоставленные
Участником в рамках Конкурса, в частности содержащиеся в заявке об участии, регистрационных формах и
Конкурсных работах Участника.
Посредством предоставления Информации Участник дает свое добровольное согласие и разрешение на получение и
обработку Информации корпорацией Intel, ее дочерними и аффилированными компаниями по всему миру, иными
2
определенными здесь организаторами или администраторами Конкурса, а также их подрядчиками, для достижения
целей Конкурса и иных определенных настоящими условиями целей, а также на то, что Информация будет:
1.
2.
3.
включена в информационную базу Конкурса и храниться в этой базе;
может обрабатываться и включаться в другие автоматизированные базы данных и информационные системы
Intel и ее дочерних и аффилированных компаний в той мере, в которой это необходимо для оценки
заинтересованности в идеях Участника и подготовки предложения о гранте, финансировании, работе,
сотрудничестве и т.п. и заключения договора, а также в целях продвижения товаров, работ, услуг Intel на
рынке;
может быть безвозмездно опубликована в средствах массовой информации, включая средства публикации для
всеобщего сведения, в т.ч. сеть Интернет, в течение всего срока Конкурса, а также после его завершения.
Предоставив Информацию, Участник принимает на себя ответственность за соблюдение следующих гарантий и
обязательств:
a.
b.
c.
4.
Участник является законным обладателем Информации (субъектом данных) и имеет все правомочия,
необходимые для ее предоставления на настоящих условиях.
Информация не составляет коммерческой, личной, профессиональной, семейной, служебной и иной тайны
Участника или иных лиц, а также государственной тайны, и является достоверной, полной, достаточной и
допустимой к предоставлению и обработке на настоящих условиях.
Участник обязуется по запросу Intel или иного организатора Конкурса незамедлительно в письменной
форме предоставить дополнительное подтверждение его согласия на предоставление и обработку
Информации (или какой-либо ее части), в порядке и в соответствии с применимым законодательством.
Перед регистрацией и предоставлением Информации Участник внимательно ознакомился с настоящими условиями,
нашел их разумными и приемлемыми и согласился с установленным ими порядком получения и обработки
Информации.
Организатор(ы) Конкурса:
Представительство “Intel Corporation (UK) Limited” в России, адрес представительства: 121614, Россия, Москва, ул.
Крылатскя 17/4.
3
Муниципальное Образовательное Учреждение
средняя общеобразовательная школа №145
Проект
HTML. Изучение языка
гипертекстовой разметки
при создании тестовых
заданий
Чугунова Ю. А. , учитель информатики
4
Цели и задачи проекта
Цели:
• овладение умением анализировать, обобщать и делать выводы по
проделанной работе
• развитие познавательных интересов, интеллектуальных и
творческих способностей путем освоения и использования
средств языка HTML и средств ИКТ при изучении различных
учебных предметов
• овладение умением использовать приобретенные знания в
практической деятельности и повседневной жизни
Задачи:
• получение учеником знаний о том, что такое Web-страница,
HTML.
• умение создавать HTML-документ.
• умение использовать средства языка HTML и
ИКТ при
изучении различных учебных предметов
• заинтересованность ребят в создании более сложных Webстраниц, целого сайта.
Почему именно для учащихся 6 –го класса написан мною данный
проект?
1. Я учитывала возрастные особенности учащихся 6-го класса, для
которых характерно развитое воссоздающее воображение и
проявление интереса к творчеству.
2. Учащиеся 6-го класса уже владеют первичными навыками
работы с ПК.
3. Учащиеся 6-го класса имеют возможность заниматься дома
самостоятельно (или с родителями).
5
Вопросы для изучения
WWW (World Wide Web, «Всемирная паутина»)
Получение информации по Всемирной паутине
с помощью программ просмотра (браузера Internet
Explorer).
3.
Общие сведения об HTML.
4.
Создание первого HTML-документа.
5.
Заголовки.
1.
2.
6.
Разбиение на абзацы.
7.
Работа со шрифтом.
8.
Списки.
9.
Встроенная графика.
10. Привязка с помощью гиперссылки.
11. Работа по созданию HTML – документов
учеников (на выбранную тему).
12. Творческая работа ( на 5-6 уроков).
Пример созданного теста
6
Поурочные разработки
Урок 1.
WWW (World Wide Web, «Всемирная паутина»)
Цели
Получить общее представление о том, что такое World Wide Web.
Урок
В настоящее время для целей поиска и обмена информацией самыми эффективными
являются компьютерные коммуникации, которые обеспечиваются компьютерными сетями.
Поэтому для современного человека необходимо уметь пользоваться компьютерными
информационными средствами для решения практических задач, а также обмениваться
накопленной информацией с другими людьми.
Компьютерные сети представляют собой системы двух и более взаимосвязанных
компьютеров, соединённых друг с другом с помощью линий связи. Компьютерные сети
принято условно подразделять на локальные и глобальные.
Локальные – позволяют объединить информационные ресурсы на компьютерах,
расположенных на небольших расстояниях друг от друга, например, в одном классе, школе,
предприятии.
Глобальные – объединяют компьютеры с информационными ресурсами, удаленные
друг от друга на большие расстояния, а сами, в свою очередь, объединены в сеть Интернет.
Именно поэтому Интернет предоставляет наиболее широкие возможности для поиска и
обмена информацией по всем областям человеческих знаний.
Одной из важнейших сервисов сети Интернет является всемирная паутина - World
Wide Web- WWW (web – по- английски «паутина»).
Сервис WWW интенсивно расширяется и информация, ранее распространяемая с
помощью других средств Интернета, теперь доступна из Всемирной паутины (конференции,
электронная почта, загрузка файлов). Всемирную паутину образуют соединенные между
собой компьютеры-web-серверы. Каждый web-сервер является как бы узелком этой
информационной паутины. Web-серверы хранят всевозможную информацию - текст, звук,
видео, графику. Доступ к этой информации является интерактивным и позволяет самому
пользователю выбирать адрес нужного web- сервера.
Всемирную паутину можно представить как большую библиотеку, состоящую из книг
(web-сайтов), которые в свою очередь состоят из web-страниц. Каждая web-страница имеет
уникальный адрес и хранится на web-сервере. В основу сервиса WWW положено понятие
гипертекста. Само слово гипертекст появилось в 1965 году и означает документ,
составленный из ряда других документов, которые можно читать в любой
последовательности в зависимости от интересов пользователя (отличие от обычной книги).
Пользователь сам прокладывает маршрут по документам с помощью гиперссылок, т.е.
указаний на другие документы (обычные документы, документы с гиперссылками).
7
Гиперссылками могут быть фрагменты текста или графические объекты, которые связывают
между собой множество страниц (документов). Они могут находиться на компьютерах в
любой части света. Информация в WWW организована аналогично энциклопедическому
словарю, в котором при объяснении какого-либо понятия встречается слово, обычно
выделяемое курсивом. Это означает, что в словаре имеется статья, объясняющая это слово.
Доступ к информации Интернета можно получить с помощью специальных
технических средств (модемов, линий связи и т. п. ) и программ, называемых браузерами. Об
этом на следующем уроке.
Контрольные вопросы:
1. Что такое World Wide Web?
2. Что такое гипертекст, гиперссылка?
Практическая часть «Создание личной папки».
Для начала создадим на диске компьютера папку, в которой будут располагаться все
созданные вами файлы: site-test-family. Вместо слова family наберите английскими буквами
свою фамилию. Набрать фамилию нужно для того, чтобы учитель смог в собранных в одну
папку результатах всех учеников находить любую работу. Английские буквы, цифры и дефис
вместо пробела нужны в имени для того, чтобы эту папку в конце работы можно было
поместить в сети Интернет, так как многие программы для обработки информации в
Интернете не понимают русские кодировки - кириллицу, а некоторые браузеры считают
ошибкой наличие пробелов в имени файла.
Урок 2.
Получение информации по Всемирной паутине Интернета с помощью браузера.
Цели
Получить начальные навыки пользования браузером Internet Explorer.
Урок.
Пополнение информационных ресурсов Интернета происходит быстрыми темпами,
находить нужную информацию становится всё труднее.
Доступ к информации Интернета можно получить с помощью специальных
технических средств (модемов, линий связи и т. п.) и программ, называемых браузерами.
Одним из наиболее популярных является браузер Microsoft Internet Explorer. Работа с
браузером предоставляет возможность перемещаться по бесконечной паутине гиперссылок.
Эти же программные средства позволяют передать по сети созданный вами гипертекстовый
документ.
Следует выделить две разновидности браузеров: онлайновые (on-line) и
оффлайновые (off-line).
Онлайновые браузеры, к которым относится и упомянутый выше, требует
подключения к сети и работает с ней в реальном времени по запросу пользователя.
Оффлайновые браузеры сначала накапливают требуемые ресурсы (копии
документов) на пользовательском компьютере, чтобы в последствии их можно было
использовать и без подключения к сети Интернет. В качестве примера можно назвать Offline
Explorer, Black Window и др.
Рассмотрим типовые элементы браузеров на примере Internet Explorer.
В верхней части рабочего окна находится меню программы, элементы управления
доступом к ресурсам сети Интернет, средства навигации и настройки. Чтобы получить доступ
к какому либо ресурсу в сети Интернет (веб-странице), необходимо указать его адрес: ввести
его в строке адреса или выбрать соответствующую гиперссылку в тексте другого документа.
8
Дальнейшее продвижение (навигация) по страницам осуществляется с помощью
гиперссылок на отображаемой странице. Такой гиперссылкой может быть кнопка с надписью,
картинка или фрагмент текста, который обычно выделяется цветом или подчеркиванием (при
наведении на гиперссылку форма указателя мыши меняется).
Основные элементы управления браузером приведены в табл. 1
Элемент
Таблица 1.
Назначение
Возврат к ранее просмотренным страницам
Выбор из нескольких элементов (например, из списка ранее посещенных
страниц)
Остановка (прерывание) загрузки текущей страницы
Обновление текущей страницы
Переход на «домашнюю» страницу (которая указана в качестве стартовой)
Печать текущей страницы
Файловые операции (сохранение, открытие, печать и др.)
Команды работы с текстом страницы (копирование, поиск и др.). Текст на
странице, просматриваемой в Интернете, доступен только для чтения
Команды управления отображением текста страницы на экране (размер
9
шрифта, кодировка и др.)
Формируемый пользователем список адресов понравившихся страниц. В
дальнейшем для перехода на выбранную страницу достаточно выбрать ее
название в этом списке
Команды настройки браузера
Контрольные вопросы:
1. Что такое браузер? Разновидности браузера.
2. Перечислите основные элементы рабочего окна браузера.
Практическая часть «Работа с элементами рабочего окна браузера Internet Explorer».
1. Войдите в меню Пуск, выберите пункт меню Программы, затем Internet Explorer.
Перед вами рабочее окно браузера.
2. Введите в поле адреса данной программы строку http://marklv.narod.ru. Перед вами
появится страница сайта «Интернет – образование по информатике».
3. Добавьте эту страницу в «избранное», воспользовавшись кнопкой
.
4. Для сохранения загруженного web-сайта в целях дальнейшего использования нужно
щелкнуть на командах браузера Файл/Сохранить как файл.
5. Обновите текущую страницу, воспользовавшись кнопкой
.
6. Перейдите на «домашнюю» страницу, воспользовавшись кнопкой
.
Важное примечание.
Перед самостоятельным изучением средств языка гипертекстовой разметки ученик
должен будет изучить тему (параграф) по выбранному учебному предмету. Создать
тестовые задания к теме (параграфу) и записать готовый текст заданий в рабочей
тетради по изучению языка HTML. И тем самым подготовит текст для будущих webстраниц, которые будет создавать сам.
Урок3.
Общие сведения об HTML
Цели
Получить общее представление об основных концепциях HTML.
После этого урока Вы сумеете:

Понять важность HTML-стандартов
Урок
10
В Интернете среди огромного количества web-сайтов можно найти такие, которые
позволяют вам разместить на них свою информацию. Но можно разработать сайт и самим.
Суть разработки web-сайта в том, чтобы сделать то, что может увидеть весь мир.
Каждый из вас должен создать web-сайт (гипертекстовый документ), страницы
которого будут содержать тестовые задания (одна страница - один вопрос с 3 вариантами
ответов). Лучшие созданные тесты будут отправлены на сайт школы, где желающие смогут
проверить свои знания по выбранному предмету, а также родители смогут увидеть работу
своих детей (в каждом тесте будет информация об авторе теста).
После этого необходимо просмотреть приготовленные рукописные тестовые задания
у каждого ученика.
Задания у вас готовы! В путь!
Гипертекстовый документ создается с использованием специального языка HTML
(Hyper Text Markup Language)- языка разметки гипертекста – и называется HTMLдокументом.
HTML является тем, с помощью чего браузер (программа для просмотра документа с
гипертекстовыми ссылками) показывает мультимедийные (текстовые, графические и др.)
документы. Собственно документы - это обычные тексты со специальными "тегами" или
признаками, по которым браузер знает как интерпретировать и показывать текст (или
картинки) на Вашем экране.
О стандартах HTML
Имейте в виду что все, что делает услуга WWW (и Интернет вообще) делается по
единым правилам, которые позволяют пользователям почти любого вида компьютера
получить и увидеть правильно предъявленную информацию.
Как в HTML все это описывается?
Цель этой обучающей программы научить Вас создавать документы, которые
соответствуют HTML-стандартам, т.е. правилам, которыми руководствуются браузеры для
представления информации на экране компьютера. Благодаря использованию стандарта
HTML, ваша работа может быть с минимальными изменениями в будущем стать
общедоступной для пользователей. Применяемый стандарт поддерживается большинством
браузеров.
Мы не собираемся провести все это время, разрабатывая web-страницы которые можем
увидеть только мы! Идея в том, чтобы делать нечто такое, что может увидеть весь мир. Так
что в первой части уроков Вы будете изучать наиболее широко принятые конструкции HTML.
Ну а дальше Вы можете попробовать использовать другие теги языка HTML самостоятельно.
Контрольные вопросы
1. Что такое HTML?
11
Практическая часть «Просмотр HTML-кода с помощью меню браузера».
1.
2.
3.
4.
Откройте окно браузера Internet Explorer (Пуск/Программы/ Internet Explorer).
Введите в поле адреса строку ( например http://www.nn.ru/ )
В окне браузера Вы увидите первую страницу сайта.
В меню окна браузера выберите пункт Вид, затем в выпадающем меню пункт
Просмотр HTML-кода.
На экране появится ещё одно окно (окно текстового редактора Блокнот).
Обратите внимание! В окне Блокнота представлен тот же текст, что и в окне браузера, но
добавлены слова в скобках. Это и есть средства языка гипертекстовой разметки (теги).
Урок 4.
Создание Вашего первого HTML-документа
Цели
После этого урока Вы сумеете:





Идентифицировать теги HTML.
Открывать рабочую область для создания HTML-документов.
Использовать редактор текста, чтобы написать теги HTML для любой WEB-страницы.
Вставлять скрытые комментарии в Ваши HTM-документы.
Просматривать Ваш документ с помощью браузера, чтобы видеть, как это будет
выглядеть.
Урок.
Теперь, когда Вы знаете, что такое HTML, давайте начнем это использовать
Теги HTML
Когда web-браузер показывает страницу, он читает обычный текстовый файл и ищет в
нем специальные признаки или "теги" которые отмечены символами < и >. Общий формат
для тега HTML :
<имя_тега>текстовая строка
Например:
<h3>Информатика</h3>
Этот тег сообщает web-браузеру что текст Информатика нужно показать в стиле
заголовка уровня 3 (мы узнаем больше относительно этих тегов позже). HTML-тег может
сообщить web-браузеру, что текст жирный, курсив, заголовок или гипертекстовая ссылка на
другую web-страницу. Обратите внимание на то, что обязателен признак конца тега:
</имя_тега>
содержащий "/" - слеш. Этот слеш, сообщает web-браузеру, что текст тега завершен.
Множество тегов HTML завершаются подобным образом. Если Вы забыли поставить слеш,
web-браузер будет считать, что текст тега продолжается до конца Вашего документа, что
12
может привести к непредсказуемым результатам (Вы можете попробовать это потом в
порядке эксперимента).
ПРИМЕЧАНИЕ: Web-браузер не отличает строчных и прописных символов.
Например <h3>...</h3> не отличается от <H3>...</H3>
В отличие от компьютерной программы, если Вы делаете синтаксическую ошибку в HTML,
это не приведет к краху системы или развалу программы, просто Ваша web-страница будет
выглядеть не слишком хорошо. К тому же вносить изменения внутри HTML-документов
очень легко и быстро.
Ваш браузер имеет маленький словарь тегов! Интересный аспект HTML - если браузер не
знает что делать с данным тегом, он будет его просто игнорировать! Например, тег заголовка,
на самом деле выглядит так:
<wiggle><h3>Информатика</h3></wiggle>
Это вставлено, для того, чтобы в будущем этот текст изображался бегущей строкой, но пока
что этот тег не известен всем браузерам.
Создание Вашего первого HTML-документа
Документ HTML содержит две основные части, заголовок (head) и тело (body). Head
содержит информацию о документе, которая не показывается на экране. Body содержит все,
что показывается на экране как web-страница.
Базовая структура любой HTML страницы выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<!-- заголовочная информация об этом документе, которая не показывается на экране -->
</head>
<body>
<!-- все HTML для показа на экране -->
:
:
:
:
:
:
</body>
</html>
Самая первая строчка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
не является технологическим требованием, но она говорит браузеру, для какой версии HTML
была написана эта страница.
Весь текст HTML заключается в теги <html>...</html>. Внутри них сначала идет
<head>...</head>, а затем <body>...</body>. На большинстве компьютеров Ваша web-страница
будет прекрасно выглядеть и без этих тегов. Однако их использование сделает Вашу webстраницу полностью соответствующей интернациональным HTML-стандартам и заведомо
будет совместима со всеми будущими браузерами.
13
Заметим также, что тег комментарии, выглядит как <!-- текст комментария -->. Текст
между этими тегами НЕ показывается на web- странице, но содержит информацию, которая
может быть полезна Вам или любому другому, кто захочет посмотреть HTML-текст Вашей
web-страницы. Когда web-страница будет завершена, комментарии окажутся очень
полезными, если потребуется изменить web-страницу, или использовать ее часть в
дальнейшем.
Практическая часть «Создание первого HTML-документа».
Ну а теперь начинаются шаги по созданию Вашего первого HTML-документа. Вы готовы?
1. Откройте текстовый редактор Блокнот.
2. Введите следующий текст:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Тест (для самоконтроля знаний)по информатике</title>
</head>
<!-- я изучаю средства языка -->
<body>
Проверим свои знания по теме «Устройство компьютера»
</body>
</html>
ПРИМЕЧАНИЕ: Посмотрите, где расположен тег <title>...</title>. Он расположен внутри
тега <head> …</head>, поэтому не будет виден на экране. Зачем он нужен?
Содержимое высвечивается в титульной строке окна браузера, а также он используется
для идентификации документа.
Сохраните файл в созданной Вами ранее папке под именем test_family.html (вместо family
свою фамилию) .
Заметив расширения html в именах файлов, web-браузер узнает, что эти файла нужно
читать как HTML-текст и показывать соответственно web-страницу.
Просмотр Вашего документа в Web-браузере
1. Откройте окно браузера Internet Explorer
2. Теперь выберите Открыть в меню Файл.
3. Используйте окно диалога, чтобы найти и открыть созданный Вами файл "
test_family.html ".
4. Теперь Вы должны увидеть в титульной строке рабочего окна браузера текст " Тест
(для самоконтроля знаний) по информатике " и web-страницу ниже - одно
предложение из раздела <body>, которое Вы написали: «Проверим свои знания…»
14
Внесение изменений в Ваш HTML-документ
1. Войдите снова в окно текстового редактора.
2. Ниже введенного ранее текста нажмите несколько раз ENTER и введите следующий
текст:
Устройства ввода информации.
Клавиатура. Универсальным устройством ввода информации является клавиатура.
Клавиатура позволяет вводить числовую и текстовую информацию. Стандартная
клавиатура имеет 104 клавиши и 3 информирующих о режимах работы световых
индикатора в правом верхнем углу.
Координатные устройства ввода. Для ввода
графической информации и для управления графическим интерфейсом (меню,
перемещение, копирование объектов и др.) используются координатные устройства
ввода информации: манипуляторы (мышь, трекбол), сенсорные панели и графические
планшеты.
Сканер. Для оптического ввода в компьютер и преобразования в
компьютерную форму изображений (фотографий, рисунков, слайдов), а также
текстовых документов используется сканер.
3. Сохраните изменения в текстовом редакторе.
4. Вернитесь в рабочее окно web-браузера, который показывает, в данный момент,
предыдущую версию Вашего файла. Обратите внимание на то, что новый, только что
введенный Вами текст, ещё не виден.
5. Перезагрузите документ в Web-браузере. Чтобы увидеть внесённые изменения,
нажмите кнопку Обновить. Теперь Вы должны увидеть новый текст.
Заметьте, что web-браузер игнорирует лишние пустые строки и пробелы, которые Вы ввели.
Однако Вы можете использовать пустые строки, пробелы и теги комментариев, чтобы сделать
Ваш HTML-документ легко читаемым в текстовом редакторе.
Самая частая ошибка: "Я не вижу заголовка!" Вы не должны его видеть! Текст внутри тегов
<title>...</title> НЕ показывается на web-странице; Вы можете увидеть его в титульной строке
окна web- браузера.
Контрольные вопросы
1.
2.
3.
4.
5.
Что такое HTML-тег?
Где показывается текст тега title?
Какие шаги нужно сделать, чтобы создать простой HTML-документ?
Как записывается тег комментариев?
Как можно просмотреть Ваш HTML-документ в web-браузере?
Урок 5.
Заголовки: шесть уровней вложенности
HTML понимает теги для описания заголовков шести различных уровней. Ваш браузер
определяет сам, каким размером, цветом и шрифтом их показывать.
Цели
После этого урока Вы сумеете:
15


Идентифицировать различные уровни заголовков HTML и соответствующие им
теги.
Помещать заголовки различных уровней в Ваш HTML-документ и
просматривать внесенные изменения в web-браузере.
Урок
HTML-заголовки
Заголовки в HTML - это часть текста, помещённая внутри тегов заголовков. Формат тегов
заголовков HTML следующий:
<hN>Текст, показываемый как заголовок</hN>
где N - это номер от 1 до 6 идентифицирующий размер заголовка. Вот несколько примеров
заголовков различных размеров:
Заголовок уровня 1
Заголовок уровня 2
Заголовок уровня 3
Заголовок уровня 4
Заголовок уровня 5
Заголовок уровня 6
Старшинство заголовков расположено от уровня 1 (наиболее важный) до уровня 6 (наименее
важный). Подобно иерархической структуре, ваши уровни заголовков должны иметь
логический, непротиворечивый порядок или быть параллельными.
Практическая часть «Размещение HTML-заголовков в Вашем документе».
1. Откройте Вашу рабочую область - окно web-браузера с Вашим HTML- документом.
2. Перейдите в текстовый редактор.
3. Откройте в нем текст HTML-файла " test_family.html", который Вы создали на уроке 4.
4. Сначала мы применим тег <h1>, чтобы показать самый большой заголовок <H1>.
Введите следующий текст над существующим body текстом, но ниже тегов
</head><body>:
<h1>Компьютер</h1>
5. Ниже только что введенного текста создайте другие заголовки для будущих разделов
нашей странички.
Введите заголовки внутри body Вашей web-страницы (Заметьте, что некоторые заголовки с
тегами H3, другие с тегами H2):
<h2>Устройства ввода информации</h2>
<h2>Устройства вывода информации</h2>
<h3>Монитор </h3>
<h3>Колонки </h3>
<h3>Принтер </h3>
<h2>Внешняя (долговременная) память</h2>
<h3>Гибкие магнитные диски</h3>
<h3>Жесткие магнитные диски</h3>
16
<h2>Оперативная память</h2>
6. Сохраните изменения в текстовом редакторе.
7. Вернитесь в web-браузер и перезагрузите HTML-файл.
Дополнительное задание.
В качестве дополнительного упражнения, посмотрите, что случится, если Вы сделаете
синтаксическую ошибку.
1. Откройте Ваш HTML-документ в тестовом редакторе и уберите слеш (/) в теге <h1>
после заголовка Компьютер:
<h1>Компьютер<h1>
[отсутствует "/" ]
2. Сохраните изменения и перезагрузите страницу в web-браузере. Без корректного
завершения тега h1 web-браузер интерпретирует весь последующий текст как
заголовок уровня 1! После этого эксперимента верните слеш на место и сохраните
изменения.
Контрольные вопросы
1. Чем отличаются заголовки различных уровней в HTML?
2. Чем отличаются теги заголовков различных уровней?
3. Какие шаги Вы делали, чтобы разместить заголовки в HTML-документе?
4. Что случится, если вы забудете поставить слеш в теге окончания заголовка?
Урок 6
Разбиение на абзацы
Прошло немало времени с тех пор, как Вы начали создавать и модифицировать
HTML-документы, и Вы должны чувствовать себя уверенно при редактировании в
текстовом редакторе и перезагрузке отредактированного документа в web-браузере.
Цели
После этого урока Вы сумеете:
 Идентифицировать теги абзацев в HTML-документе.
 Вставлять разбиение на абзацы в текст HTML-документа и просматривать эти
изменения в web-браузере.
Урок
Разбиение HTML документа на абзацы
Мы видели ранее, что web-браузер игнорирует все ENTER, печатаемые в вашем
текстовом редакторе. Для того, чтобы начать новую строку, в HTML предусмотрен тег
обрыва строки <br>
Следует отметить, что этот тег, в отличие от большинства тегов HTML, не имеет
закрывающего тега со слэшем.
17
Для того, чтобы выделить часть текста как абзац в HTML используется тег <p>
Везде, где браузер видит тег абзаца, он вставляет пустую строку и начинает новый абзац.
Код HTML для вставки абзаца выглядит так:
<p>текст абзаца</p>
Закрывающий тег </p> возможен, но не обязателен, и на практике при создании HTMLдокументов им не пользуются.
Заметим также, что тег <h> всегда вставляет перед собой начало абзаца, так что нет
необходимости ставить тег <p> перед тегом заголовка:
<p>
<h2>Текст заголовка</h2>
Практическая часть «Вставка тега абзаца».
Проделайте следующие шаги чтобы разбить текст на абзацы и посмотреть на
результирующий HTML-документ.
1. Откройте Ваш HTML-документ в браузере Internet Explorer.
2. Войдите в текстовый редактор.
3. Откройте Ваш рабочий документ test_family.html в текстовом редакторе.
Сначала мы хотим переместить предложения, начинающиеся ("Клавиатура. Универсальным
устройством .....") так, чтобы они оказались под заголовком Устройства ввода информации.
4. Вернитесь в web-браузер.
Если Ваш рабочий документ не виден, используйте команду Открыть ... в меню Файл, чтобы
открыть документ.
5. Выберите команду Обновить в меню Вид. Вы должны увидеть несколько
предложений, которые можно сгруппировать, например, в три абзаца. Мы
хотим ввести признак абзаца между этими фразами из нескольких предложений.
6. Вернитесь снова в HTML документ в текстовом редакторе.
7. Под заголовком <h2>Устройства ввода информации</h2> и после предложения,
которое оканчивается "… правом верхнем углу.", нажмите ENTER (это не
является необходимым, но делает текст HTML более читабельным для Вас), и
введите затем тег абзаца:
<p>
Эта глава теперь выглядит так:
<h2>Устройства ввода информации</h2>
<p>
Клавиатура. Универсальным устройством ввода информации является клавиатура.
Клавиатура позволяет вводить числовую и текстовую информацию. Стандартная клавиатура
имеет 104 клавиши и 3 информирующих о режимах работы световых индикатора в правом
верхнем углу.
<p>
Координатные устройства ввода. Для ввода графической информации и для управления
графическим интерфейсом (меню, перемещение, копирование объектов и др.) используются
координатные устройства ввода информации: манипуляторы (мышь, трекбол), сенсорные
панели и графические планшеты.
Сканер. Для оптического ввода в компьютер и
преобразования в компьютерную форму изображений (фотографий, рисунков, слайдов), а
также текстовых документов используется сканер.
18
8. Вставьте тег абзаца после предложений, заканчивающихся словами "
…графические планшеты."
9. Сохраните изменения в текстовом редакторе.
10. Вернитесь в web-браузер и перезагрузите документ. Предложения введения
разбиты теперь на абзацы.
Вместе с тегом абзаца можно задавать параметры выравнивания (align):
по центру (center);
по левому краю (left);
по правому краю (right) ,
например, <p align = left> обеспечит выравнивание текста параграфа по левому краю.
Контрольные вопросы
1. Является ли обязательным тег конца абзаца?
2. Какой параметр абзаца наиболее подходит для эпиграфа?
Урок 7
Работа со шрифтом
Подобно текстовому процессору, HTML может указать web браузеру показывать части
текста в написании Наклонном, Жирном, Подчеркнутом или их комбинации.
Цели
После этого урока Вы сумеете:


Идентифицировать теги HTML для начертания шрифта текста: жирный, наклонный,
или подчеркнутый.
Ввести в Ваш HTML-документ теги шрифта текста в этих различных форматах и
просмотреть изменения в web-браузере.
Урок
Теги начертания шрифтов HTML-документов
HTML обслуживает различные теги, для добавления начертания шрифтов в текст
(далее будем говорить просто "шрифтов"). Помните, нужно быть благоразумным и
последовательным в использовании шрифтов, усиленное их применение может сделать текст
неудобным для чтения.
19
Теги начертания шрифтов
Результат
HTML
<b>Это жирный...</b>
Это жирный
<i>Это наклонный...</i>
Это наклонный
<u>Это подчеркнутый...</u>
Это подчеркнутый
Посмотрите, как Вы можете комбинировать теги шрифтов, как вкладывать один тег в другой.
Тег наклонный может вкладываться в жирный и наоборот, порядок не имеет значения.
<i><b>Это жирный И
наклонный</b></i>
<b><i>Этот такой же</i></b>
Это жирный и наклонный
Этот такой же
Более того, Вы можете применять шрифты текста внутри тегов заголовков. Заметьте, что
открывающие и закрывающие теги шрифтов вложены внутрь тегов заголовков.
Ла ла ла
Ла ла ла
<h2><i>Новый</i> и
<u>Улучшенный!</u></h2>
Новый и Улучшенный!
Ла ла ла
Ла ла ла
Практическая часть «Введение различных Шрифтов в Ваш HTML-документ»
Проделаем следующие шаги, чтобы применить теги шрифтов в HTML-документе.
1.
Откройте Вашу рабочую область, если она еще не открыта (окно
браузера с HTML - документом).
2.
Откройте Ваш HTML-документ в текстовом редакторе.
Найдите слово " Клавиатура " в первом предложении раздела Устройства ввода информации.
Мы хотим сделать его жирным, чтобы подчеркнуть важность этого слова.
3.
Вставьте теги, чтобы сделать слово жирным:
<b> Клавиатура </b>
Теперь модифицируем второй абзац тегами жирный и наклонный, чтобы
выделить слово.
4. Введите <b>... </b> и <i>... </i> теги вокруг словосочетаний «координатные
устройства ввода», «графическим интерфейсом» так, чтобы текст выглядел:
20
<p>
<b>Координатные устройства ввода. </b> Для ввода графической информации
и для управления<b> <i> графическим интерфейсом</i> </b> (меню, перемещение,
копирование объектов и др.) используются координатные устройства ввода
информации: манипуляторы (мышь, трекбол), сенсорные панели и графические
планшеты.
5 И, наконец, мы используем тег подчеркнутый, чтобы выделить важные слова
заголовка Компьютер.
<h1><u>Компьютер</u></h1>
6. Сохраните текст в текстовом редакторе и перезагрузите его в web-браузере.
Очень важно, чтобы теги стилей корректно закрывались соответствующими тегами,
содержащими слеш </>. В противном случае, весь последующий текст будет показываться в
том стиле, тег которого Вы забыли закрыть. Это будет весьма странно выглядеть.
Контрольные вопросы
1. Что такое HTML-теги шрифтов?
2. Какие существуют различные теги шрифтов текста?
3. Какие шаги нужно сделать, чтобы использовать различные шрифты в тексте HTMLдокумента?
Урок 8.
Списки
Цели
После этого урока Вы сумеете:


Идентифицировать HTML теги для создания маркированных (неупорядоченных),
нумерованных (упорядоченных) и вложенных списков на web-странице.
Размещать различные типы списков в HTML-документе и просматривать внесенные
изменения.
Урок
Многие web-страницы содержат списки - часть из них состоит из элементов
помеченных "булетами" или маркерами (неупорядоченные), другие - последовательно
пронумерованные (упорядоченные). Списки легко создаются в HTML, они могу быть
вложенными (списки в списках).
Примечание! О вложенных списках в этом курсе занятий можно не говорить.
Материал по вложенным спискам можно дать как дополнительный (для самостоятельного
изучения).
21
Маркированные списки
Маркированные списки, или ul (Unordered Lists) теги, состоят из элементов
помеченных маркерами. Вид маркеров определяется конкретной версией Вашего webбраузера и шрифта, назначенного для показа нормального Web-текста.
Вот примеры маркированных списков:
Мой маркированный Список:



Элемент 1
Элемент 2
Элемент 3
А вот HTML-формат, который это описывает:
<B>Мой маркированный сисок:</B>
<ul>
<li> Элемент 1
<li> Элемент 2
<li> Элемент 3
</ul>
Тег <ul> (Unordered Lists) помечает начало и конец списка, а тег <li> (List Item)помечает
каждый элемент списка.
Нумерованные списки
Нумерованные списки, или <ol> (Ordered lists) теги, указывают браузеру нумеровать
каждый элемент списка, начиная с элемента "1." Заметьте, что разница только в тегах <ul> и
<ol>. Посмотрите пример:
Мой нумерованный список:
1. Элемент 1
2. Элемент 2
3. Элемент 3
HTML-формат, который это описывает:
<B>Мой нумерованный список:</B>
<ol>
<li> Элемент 1
<li> Элемент 2
<li> Элемент 3
</ol>
Вложенные списки
Нумерованные и маркированные списки могут быть различных уровней; каждый будет
соответственно показан Вашим web- браузером. Обратите внимание на то, чтобы каждый
уровень списка завершался закрывающим тегом в нужном месте.
Это может выглядеть сложным, со всеми этими <ol>, <ul>, <li>, </ul>, </ol> - тегами
расставленными вокруг, но попробуйте запомнить базовую структуру
22
<ul>
<ol>
<li>
<li>
<li>
<li>
</ul>
</ol>
Вот пример маркированного списка с вложенными маркированными списками нескольких
уровней:
Вложенные маркированные списки



Это первый элемент
Это второй элемент
o Это первый подэлемент второго элемента
 А это подэлемент подэлемента
 Вы всё ещё не потерялись?
o Это второй подэлемент второго элемента
o Это третий подэлемент второго элемента
Это третий элемент
Заметьте, что булеты на разных уровнях различны.
А вот HTML-формат, который это рисует:
<B>Вложенные маркированные списки</B>
<ul>
<li>Это первый элемент
<li>Это второй элемент
<ul>
<li> Это первый подэлемент второго элемента
<ul>
<li> А это подэлемент подэлемента
<li> Вы всё ещё не потерялись?
</ul>
<li> Это второй подэлемент второго элемента
<li> Это третий подэлемент второго элемента
</ul>
<li>Это третий элемент
</ul>
Вложенные списки - смешиваем их вместе
Можно не только вкладывать нумерованный список в нумерованный, но и смешивать
списки различных типов. Посмотрите как выглядят смешанные вложенные списки.
Например, этот нумерованный список включает в себя маркированный, включающий в
себя нумерованный список:
Вложенный маркированный список
1. Это первый элемент
2. Это второй элемент
o Это первый подэлемент второго элемента
23
1. А это нумерованный подэлемент подэлемента
2. А это ещё один нумерованный подэлемент подэлемента
3. Вы ещё не потерялись?
o Это второй подэлемент второго элемента
o Это третий подэлемент второго элемента
3. Это третий элемент
А это HTML-формат к примеру. Заметьте, как он был написан, чтобы легко читалось:
<B>Вложенный Маркированный Список</B>
<ol>
<li>Это первый элемент
<li>Это второй элемент
<ul>
<li> Это первый подэлемент второго элемента
<ol>
<li> А это нумерованный подэлемент подэлемента
<li> А это ещё один нумерованный подэлемент подэлемента
<li> Вы ещё не потерялись?
</ol>
<li> Это второй подэлемент второго элемента
<li> Это третий подэлемент второго элемента
</ul>
<li>Это третий элемент
</ol>
Практическая часть «Списки в Вашем HTML-документе»
Используйте теги списков, чтобы добавить нумерованные и маркированные списки в
Вашу страничку.
1. Откройте окно браузера Internet Explorer с Вашим документом.
2. Откройте HTML-документ в текстовом редакторе.
3. Под заголовком Устройства вывода информации внесём нумерованный список, чтобы
показать основные разновидности устройств. Перейдите на этот раздел в Вашем
HTML-документе.
4. Добавьте теги таким образом:
<h2>Устройства вывода информации</h2>
<ol>
<li> <h3>Монитор </h3>
<li> <h3>Колонки </h3>
<li> <h3>Принтер </h3>
</ol>
5. Сохраните Ваш HTML файл и Перезагрузите его в web-браузере.
24
Контрольные вопросы
1.
2.
3.
4.
5.
Зачем нужны списки на web-странице?
Какой тег HTML применяется для маркированных списков?
Какой тег HTML применяется для нумерованных списков?
Как описать вложенный список?
Какие шаги нужно сделать, чтобы добавить список в HTML-документ?
Примечание. На урок №9 необходимо принести на съемном носителе графический файл с
расширением gif, для вставки его содержимого в web-страницу. (Узнать формат файла
можно, нажав на него правой кнопкой мыши и выбрав пункт меню Свойства).
Урок 9 .
Встроенная графика
Цели
После этого урока Вы сумеете:




Разместить встроенные изображения в Вашем HTML-документе.
Определить, как разместится картинка по отношению к тексту.
Модифицировать тег встроенного изображения для пользователей неграфических
браузеров.
Определить параметры встроенного изображения.
Урок
Существуют множество форматов компьютерной графики: GIF, TIFF, BMP, JPEG и др.
браузер определяет место, где отражать содержимое графического файла. GIF и JPEG -это
форматы графических файлов, которые могут быть показаны на web-странице. Остальные
форматы графических файлов (и работа с ними) можно изучить дополнительно.
Давайте посмотрим, какими тегами HTML можно включить картинку в web-страницу.
HTML-теги для встроенной графики
"Встроенные" изображения - это те, которые появляются среди текста WWW-страницы, такие
как
это изображение.
Формат тега HTML для этого встроенного изображения:
25
<img src="имя_файла.gif">
где имя_файла.gif - это имя gif файла, расположенного в той же папке, что и Ваш HTML
документ. "Встроенный" означает, что web- браузер будет показывать изображение внутри
текстовой строки.
Заметьте, что текст следует непосредственно за картинкой. Что если Вы захотите, чтобы
картинка располагалась в своей собственной строке? Чтобы заставить изображение появиться
в отдельной строке,
просто вставьте тег абзаца перед тегом изображения:
<p> <img src="имя_файла.gif">
Выравнивание текста и встроенная графика
С помощью атрибутов тега <img...>, Вы можете управлять тем, как текст расположится
относительно встроенной графики. Атрибут align (выравнивание) вставляемый внутри тега
<img>, может привести к следующим эффектам:
1. align=top (выравнивание=верх)
<img align=top src="имя_файла.gif">
- это фотография пчелы, сделанная цифровой фотокамерой
2. align=middle (выравнивание=середина)
<img align=middle src="имя_файла.gif">
-это фотография пчелы, сделанная цифровой фотокамерой
26
3. align=bottom (выравнивание=низ)(по умолчанию)
<img align=bottom src="имя_файла.gif">
Это фотография пчелы, сделанная цифровой фотокамерой
Заметьте, что текст выравнивается только в одной строке (сожмите или растяните окно
Вашего WWW- браузера и посмотрите, что случится).
Практическая часть «Размещение встроенного изображения в Вашем HTMLдокументе».
На этом уроке мы добавим вводную картинку с изображением вышивки в Ваш текстовый
документ.
Найдите нужный Вам графический файл имя файла.gif и поместите его в папку, где
хранится HTML-документ.
2. Откройте Вашу рабочую область (если она ещё не открыта).
3. Откройте Ваш файл test_family.html в текстовом редакторе.
4. Перед заголовком <h1>Компьютер</h1>, введите следующее:
1.
<p><img src="имя файла.gif">
Это HTML-формат вставляет в самое начало Вашей страницы картинку (из
файла, который Вы принесли). Лучше, конечно, если это будет изображение
компьютера.
5. Сохраните страницу и перезагрузите её в web-браузере.
В этом примере видно, что мы не вставляли тег <p> после изображения. Это потому
что далее следует заголовок. Web-браузер всегда вставляет абзац перед и после тегов
<h1,h2,h3...>.
Атрибут alt="..."
Если Ваша web- страница будет просматриваться пользователями, использующими
чисто текстовый браузер, они не смогут увидеть встроенное изображение. Или иногда
пользователи отключают загрузку изображений через сеть, если сеть слишком медленная.
27
Существует атрибут тега <img ...>, позволяющий подставить описывающую строку на место
изображения.
Сейчас пользователь текстового браузера увидит в верхней части Вашей страницы
нечто похожее на:
[Изображение]
Компьютер
Чтобы пользователь мог узнать, что в верхней части страницы вставлена графика, там
помещается иконка-указатель. Вы можете модифицировать тег <img> так, чтобы на этом
месте показывалась текстовая строка. Например,
мы может добавить "изображение
компьютера", модифицировав тег <img> следующим образом:
<img alt=" изображение компьютера " src="имя файла.gif">
Атрибут alt="..." замещает иконку-указатель текстовой строкой, теперь чисто
текстовый браузер (или если отключена загрузка изображений), покажет следующее:
изображение компьютера
Компьютер
Если изображение не отключено, то при установке указателя мышки на
рисунок,
появляется
всплывающая
подсказка
с
текстом
атрибута
alt
.
А теперь отредактируйте подобным образом Вашу HTML-страницу, добавив атрибут alt в тег
<img>.
Атрибуты Высоты и Ширины
Другие опции, которые могут быть включены в тег <img...> это два
атрибута, определяющие размер изображения в пикселях. Зачем? Обычно Ваш
web-браузер сам способен определить эти величины, прочитав изображение; загрузка
Вашей страницы может пойти быстрее, если Вы определили их заранее в Вашем
HTML-документе.
Формат, включающий эти опции, выглядит так:
<img src="имя_файла.gif" width=X height=Y >
где X- ширина, а Y - высота изображения в пикселях (пиксели – мелкие фрагменты,
точки, из которых состоит изображение).
Давайте отредактируем наш файл test_family.html следующим образом:
<img alt="изображение компьютера" src="имя файла.gif" width=200 height=150>
ПРИМЕЧАНИЕ: порядок атрибутов внутри тега <img> не имеет значения.
Часто спрашивают, можно ли установить значения размеров изображения значительно
отличающиеся от истинных величин. Ответ да, но результат может быть непредсказуемым.
Если Вы вставили большие значения (сделали изображение больше) результатом будет
"блокирование" картинки. Если Вы используете меньшие цифры (сделали изображение
28
меньше), результатом может быть искажение картинки. Кроме того, загружено будет, тем не
менее, полноразмерное изображение, так что во времени загрузки Вы не сэкономите. Любое
изменение размеров потребует дополнительной работы от web-браузера по пересчёту
картинки.
Вы можете поэкспериментировать и посмотреть сами. Попробуйте сделать ошибку!
Контрольные вопросы
1. Какие форматы файлов используются для Web изображений?
2. Какие теги должны быть указаны, чтобы изображение появилось посередине текстовой
строки?
3. Как добавить рисунок в Ваш документ?
4. Для чего предназначен атрибут alt="...."? Что надо указать в месте "...."?
Урок 10.
Привязка с помощью гиперссылки
Реальная сила web в способности создавать гипертекстовые ссылки на относящуюся к
делу информацию. Эта информация может находиться на других web-страницах с графикой,
звуком, цифровым видео, анимацией, программным обеспечением.
Цель
Научиться создавать гиперссылки к гипертекстовым документам.
После этого урока Вы сможете:

Создать привязку (гиперссылку) к HTML-документу в той же папке, что и Ваш
основной документ.
Урок
Сейчас мы сделаем первый шаг в создании гипертекстовой ссылки на другую webстраницу. Эта ссылка называется "локальной", потому что она указывает на тот же
компьютер, где расположен основной документ.
Связь с локальными файлами
Простейшая гиперссылка это та, которая открывает другой HTML-файл в той же
папке, что и предыдущая web-страница. Его HTML-запись выглядит:
<a href="имя_файла.html">текст, который реагирует на вызов связи</a>
Буква "a" означает здесь anchor (якорь), а "href" означает "hypertext reference
(гипертекстовая ссылка)".
29
Вместо имя_файла, следует задать имя другого HTML-файла. Какой бы текст ни
встретился после первого символа > и перед закрывающим символом </a>, это будет
"гипертекст", который показывается подчёркнутым и синим.
Практическая часть «Создание гиперссылки в HTML-документе к локальному
файлу»
А сейчас проделайте следующие шаги, чтобы создать гиперссылки в Вашем HTMLдокументе к локальному файлу:
1.
Откройте Ваш HTML-документ, test_family.html, в текстовом редакторе.
Сделаем заголовок
<h3>Гибкие магнитные диски</h3> ссылкой на другую webстраницу. Текст "Гибкие магнитные диски" будет привязан к другому HTML-документу,
названному GMDisk.html. Это вторичный HTML файл пока не существует; мы создадим его
на шагах (3) - (5).
Итак, вводим html-элементы:
<a href=" GMDisk.html "> Гибкие магнитные диски</a>
2. Сохраните и закройте Ваш HTML-документ.
3. Теперь в Вашем текстовом редакторе создайте новый документ.
4. Введите следующий текст в этом окне:
<html>
<head>
<title>Гибкие магнитные диски</title>
</head>
<body>
<h1>Гибкие магнитные диски</h1>
Гибкие магнитные диски помещаются в пластмассовый корпус. Такой носитель
информации называется дискетой. В центре дискеты имеется приспособление для захвата
и обеспечения вращения диска внутри пластмассового корпуса. Дискета вставляется в
дисковод, который вращает диск с постоянной угловой скоростью.
При этом магнитная головка дисковода устанавливается на определенную
концентрическую дорожку диска, на которую производится запись или с которой
производится считывание информации. Информационная емкость дискеты невелика и
составляет всего 1,44 Мбайт.
5. Сохраните этот файл как GMDisk.html в той же папке, что и Ваш рабочий HTML файл
(test_family.html).
6. Перезагрузите test_family.html в web-браузере.
7. Проверьте гипертекстовую ссылку на тексте "Гибкие магнитные диски". Когда Вы
кликните на ней, Вы должны вызвать новую страницу о гибких магн. дисках.
30
Контрольные вопросы
1. Какие шаги нужно сделать, чтобы создать ссылку в документе на локальный файл?
Урок 11.
Работа по созданию HTML – документов учеников (на
выбранную тему).
Цель
Индивидуальная работа с каждым учеником.
Определить внешний вид (дизайн), содержание и количество своих будущих webстраниц с тестовыми заданиями по выбранному предмету (теме, параграфу).
Урок.
На данном уроке ученик начинает разрабатывать свой HTML-документ. Учитель ему
в этом помогает.
Учитель объясняет, что:





Количество web-страниц на две больше количества вопросов по теме. На
каждой странице по одному вопросу.
В каждом вопросе должно быть 3-4 варианта ответов, один из них правильный.
На правильный вариант ответа устанавливается гиперссылка на следующую
web-страницу (следующий вопрос).
При правильном варианте ответа на последний вопрос тестируемый попадает на
страницу с текстом: «Дорогой друг! Если ты дошёл до этой страницы, значит ты
верно отвечал на некоторые вопросы. Вспомни, на какие вопросы ты ответил
неверно. Теорию по этим вопросам необходимо повторить».
В случае выбора неправильного ответа устанавливается гиперссылка на
страницу ochibka.html, где содержится текст: «Ответ выбран неверно!», а также
даны ссылки на вопросы.
Учитель схематично показывает взаимосвязь web-страниц и установку на них гиперссылок.
И с этого момента учащийся сам начинает создавать свой HTML-документ. В этом ему
помогают: учитель информатики, учитель по другому предмету, выбранному учеником, а
также родители. На это ему отводится 5-6 академических часов.
31
Так как принцип создания HTML-документа учащийся уже знает, он вполне может
использовать теги, которые на уроках не рассматривались, воспользовавшись таблицей
тегов, которую приготовит учитель, или источниками:


Левин А. Ш. Л36 Самоучитель полезных программ. 6-е изд. (+DVD). – СПб.: Питер,
2009.
http://stepbystep.htmlbook.ru/?pid=1
Уроки 12-16. Творческая работа.
32
33