Россия, Калининград
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до 09.06.2025
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Был в сети 23.05.2023 17:47
Барионов Юрий Александрович
1 627
37 541 
Местоположение
Специализация
Открытый урок по информатике "Гиперссылки"
Категория:
Информатика
04.11.2016 22:00
Просмотр содержимого документа
«Приложение 2»
Просмотр содержимого документа
«конспект урока1»
Урок информатики и ИКТ в 9 классе
«Язык разметки гипертекстовых документов HTML. Создание гиперссылок»
Цели урока:
Образовательные: научить учащихся создавать текстовые гиперссылки в HTML-документе.
Развивающие: способствовать развитию практических навыков работы на компьютере, развивать навыки самостоятельной работы и самоконтроля, поддерживать интерес к предмету информатики.
Воспитательные: воспитывать чувство ответственности, умение работать индивидуально и в коллективе.
Оборудование: компьютерный класс, проектор.
Тип урока: комбинированный.
Методы проведения урока: словесный, наглядный, практическая работа, контроль.
Ход урока
Оргмомент. Эмоциональный настрой (2 мин)
Проверяется готовность класса к уроку
Кто дежурный по классу?
Назовите отсутствующих.
Все ли здоровы и готовы к работе?
Изучение нового материала (15 мин)
Сегодня нам предстоит завершить работу по созданию Web-сайта средствами языка HTML.
Перед вами лежат тесты, на которые нужно ответить.
А теперь поменяемся тестами, проверим и оценим их по следующим критериям:
| Правильных ответов | Оценка |
| 13-14 | «5» |
| 10-12 | «4» |
| 7-9 | «3» |
| Менее 7 | «2» |
Вопросы к учащимся:
Давайте вспомним, какая работа нами уже проделана?
Ответы:
Созданы Web-страницы.
Выбраны темы содержания Web-страниц для каждого учащегося.
Как вы считаете, что осталось сделать, чтобы осуществить переход к другим страничкам?
Ответ: необходимо предусмотреть возможность перехода на нужную страницу сайта.
Вспомните, с помощью чего можно было осуществить переход на нужный документ в гипертекством документе?
Ответ: с помощью гиперссылок.
В данном случае мы также будем использовать гиперссылки.
Поэтому тема урока «Создание текстовых гиперссылок».
В ходе её изучения перед нами стоит задача: научиться создавать текстовые гиперссылки в HTML-документе.
Приступаем к решению поставленной задачи.
Вопрос к учащимся;
Что такое гиперссылка?
(Учащиеся высказывают свои предположения)
Слайд 2. Гиперссылка (или ссылка) – это слово, группа слов или изображение, которые можно кликнуть, чтобы перейти на новый документ или раздел текущего документа.
Поскольку любое действие в HTML определяется каким-то тегом, то и создание гиперссылки не исключение.
Ссылки создаются с помощью тега, называемого анкор.
Слайд 19. Тег a - определяет ссылку в HTML. Он может быть использован двумя способами:
Чтобы создать ссылку на другой документ – используя атрибут href.
Чтобы сделать закладку внутри документа – используя атрибут name.
Мы будем использовать 1 способ: используя атрибут href.
HTML – код ссылки прост. Он выглядит так: a href=”адрес ссылки”текст ссылкиa.
Слайд 20. Например, a href=”страница1.htm”главнаяa. Это отобразится браузером так:
Клик на гиперссылке пошлет пользователя на страницу «страница1»
Слайд 21. Наш сайт состоит из нескольких страниц. Одна из них главная (имеет имя «главная») - она открывается первой. Остальные мы назвали так: страница1, страница2, страница3.
(соответствие оглавления Web-страницам в раздаточном материале у каждого ученика)
При помощи ссылок мы свяжем эти страницы. В нашем случае все страницы лежат в одной директории (папке) с главной страницей.
Слайд 22. Для всех ссылок можно прописать цвета.
link – цвет просто ссылки
alink – цвет активной ссылки (нажатой)
vlink – цвет уже посещенной ссылки
Как и цвет для фона страницы, цвета ссылок прописывают в теге body. Например, так:
body bgcolor=“silver” alink="#000099" link="#000099" vlink="#990099", где значение цвета представлено в системе цветопередачи RGB.
Теперь вам предстоит на практике реализовать полученные знания.
Выполнение практической работы (13 мин)
Пояснение учителя.
Слайд 23. Обсудим порядок выполнения практической работы.
На рабочем столе компьютера вы найдете папку с именем Сайт, где собраны все ваши индивидуальные работы по созданию отдельных страниц.
Помним, что страница главная.htm - главная. С неё мы переходим на все остальные страницы.
Не забудьте на каждой странице предусмотреть обратный переход на главную страницу, используя ссылку a href=“главная.htm”вернуться на главнуюa. Если при отображении содержания страницы задействована полоса прокрутки, то лучше сделать это не только вначале страницы, но и в конце.
Задайте мне вопросы, если таковые имеются, по выполнению работы.
В таком случае я желаю вам удачи! И не забывайте о ТБ при работе на компьютере:
Физкультминутка
Выполнение практической работы учащимися.
Учитель: «Работа завершена. Проверим, все ли у нас получилось?»
Самоконтроль (3 мин)
(У каждого учащегося имеются карточки самоконтроля. Учитель на своем компьютере демонстрирует правильность перехода с одной страницы на другую. Учащиеся ставят метку в карточке в случае правильного перехода. После заполнения карточки сдают учителю)
Вид карточки:
| ФИО __________________________ Дизайн _______________________ Переход на страницу ____________ Переход на главную _____________
Оценка за работу _______________ |
Слайд 24. Учащиеся выставляют себе оценку за работу, используя критерии на слайде.
Домашнее задание (2 мин)
Слайд 25. Совместный проект учащихся класса – создание сайта – занял достаточно много времени.
Вопрос к учащимся.
А как вы думаете, существуют ли средства, позволяющие быстрее решать подобные задачи? (Учащиеся отвечают)
Знакомство с такими средствами – это тема нашего следующего урока. Чтобы работа на этом уроке была интересней и плодотворней вам необходимо:
Подготовить материал для создания трех страничного сайта «Моя визитная карточка».
Продумать его стиль оформления.
Рефлексия (3 мин)
Слайд 26. Интервью с создателями проекта.
Что явилось завершающим этапом работы над электронным учебником?
Для кого он может оказаться полезным?
Довольны ли вы своей работой?
Подведение итогов урока (2 мин)
Учитель подводит итоги урока, выставляет оценки.
4
Просмотр содержимого презентации
«Основы языка гипертекстовой разметки документов1»
Основы языка гипертекстовой разметки документов
Тест по теме «Основы языка разметки гипертекста HTML»
- 1. HTML (HYPER TEXT MARKUP LANGUAGE) является:
- Одним из средств при создании Web-страниц
- Системой программирования
- Графическим редактором
- Системой управления базами данных
- 2. Инструкция браузеру, указывающая способ отображения текста:
- Программный код
- Тэг
- Файл
- Кегль
- 3. Программа для создания Web-страницы с использованием языка HTML:
- MS Word
- Paint
- Калькулятор
- Блокнот
- 4. Web-страница (документ HTML) представляет собой:
- Текстовый файл с расширением txt или doc
- Текстовый файл с расширением htm или html
- Двоичный файл с расширением com или exe
- Графический файл с расширением gif или jpg
- 5. Программа для просмотра гипертекстовых страниц называется:
- Сервер
- Протокол
- HTML
- Браузер
- 6. Гипертекст - это:
- Текст очень большого размера
- Текст, в котором используется шрифт большого размера
- Структурированный текст, где возможны переходы по выделенным меткам
- Текст, в который вставлены объекты с большим объемом информации
- 7. Тэг - это:
- Инструкция браузеру, указывающая способ отображения текста
- Текст, в котором используются спецсимволы
- Указатель на другой файл или объект
- Фрагмент программы, включённой в состав Web-страницы
- 8. Какие тэги указывают браузеру, что это HTML документ?
- 9. Какие теги определяют видимую часть документа?
- 10. Какие тэги помещают название документа в оглавление программы просмотра web-страниц?
- 11. Какие тэги задают размер заголовка?
- 12. Какие тэги создают гиперссылку на другие документы?
- 13. Какие тэги создают абзац в документе?
- 14. Какой тэг добавляет изображение в HTML документ?
Правильных ответов
Оценка
13-14
«5»
10-12
«4»
7-9
«3»
Менее 7
«2»
Тема урока
Создание текстовых гиперссылок
Что такое гиперссылка
Гиперссылка (или ссылка) – это слово, группа слов или изображение, которые можно кликнуть, чтобы перейти на новый документ или раздел текущего документа.
Как ссылка определяется в HTML
Тег
- определяет ссылку в HTML
Синтаксис ссылки:
текст ссылки
Атрибут href указывает адрес ссылки
Как ссылка определяется в HTML
Например:
главная
Схема связывания страниц
Главная
страница1.htm
страница3.htm
страница2.htm
Цвет ссылки
link – цвет просто ссылки
alink – цвет активной ссылки (нажатой)
vlink – цвет уже посещенной ссылки
Например ,
Практическая работа
Цель: установить текстовые гиперссылки с главной страницы на остальные.
Порядок выполнения работы:
- Открыть HTML – код страницы главная.htm
- Связать её с помощью тега с другими Web-страницами
- Предусмотреть возврат с помощью тега
вернуться на главную
- Просмотреть полученный результат в браузере
Я желаю вам удачи! И не забывайте о ТБ при работе на компьютере И пока компьютер включается, немного разомнёмся Физкультминутка
Карточка самооценки
ФИО __________________________
Дизайн _______________________
Переход на страницу ____________
Переход на главную _____________
Оценка за работу _______________
Домашнее задание
- Подготовить материал для создания Web – сайта «Моя визитная карточка» или «Моё порфолио»
- Продумать стиль его оформления.
Интервью с создателями проекта
- Что явилось завершающим этапом работы над вашим рекламным сайтом?
- Для вас может оказаться полезным все, что вы узнали об Языке разметки гипертекста?
- Довольны ли вы своей работой?
Оцените своё настроение и состояние после проведённого урока. (выберите левой кнопкой мыши соответствующее изображение )
?
Выход
Выход
Выход
Выход
Спасибо
За
Урок!
28
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
Полезное для учителя
Реализация образовательных программ осуществляется с применением исключительно электронного обучения и ДОТ
