Гиперссылки на веб страницах план урока

Обновлено: 08.07.2024

- Повторение основных принципов построения сайтов, структуры HTML-документа.

Тип урока: изучение нового материала, практическая работа на ПК.

Вложение	Размер
scenariy_uroka_giperssylki.doc	527.5 КБ

Предварительный просмотр:

Тема урока: СОЗДАНИЕ ГИПЕРССЫЛОК

Тип урока: изучение нового материала, практическая работа на ПК.

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

Объяснение нового материала с практической работой на ПК (задание 1)

Практическая работа на ПК (задание 2)

Самостоятельная работа на ПК (задание 3)

Подведение итогов урока

на компьютерных столах – инструменты для работы,

на столах учеников – дневник, пенал

- Здравствуйте! ( титульный слайд )

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

- Но, прежде вспомним основные понятия:

- Что такое Web-сайт?

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

- Для чего нужны сайты?

Ответ 1 . Обмен информацией

Ответ 2. Получение информации круглосуточно.

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

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

Ответ 5. Организовать новый бизнес в Интернет

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

- Ребята, а мы можем говорить, что Web-сайт это компьютерный вид работы?

Ответ: Да, так как этот вид работы очень актуален, востребован, высокооплачиваемый.

Учитель: - Да, - это важно. Человек, владеющий этими технологиями создания сайтов, востребован в нашем современном, информационном мире

- С помощью, каких технологий можно создавать сайты?

Ответ 1. Сайты могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров: Front Page, Macromedia Dreamweaver и т.п. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора.

- Ребята, вы определили, что Web-сайт – это группа Web-страниц.

- Что такое Web-страница?

Ответ: Отдельный документ, выполненный в формате HTML или документ сохраненный с расширением *.html

- Какие еще понятия подходят под это определение?

Ответ : HTML-документ, Web-документ.

- Ребята, а как расшифровывается сочетание букв HTML?

Ответ: HTML - HyperText Markup Language - стандартный язык, предназначенный для создания гипертекстовых документов в среде WEB.

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

- Ребята, мы постоянно на наших уроках говорим: гипертекст, гипертекстовый документ, гиперссылка.

Что означает приставка гипер-?

- Что такое гипертекст?

- Что еще нужно знать, чтобы создать Web-страничку?

Ответ 2. Знать язык HTML, структуру html-документа, набор элементов и тэгов, определяющих границы действия этих элементов.

- Спасибо, Саша (оценка). Ребята, вы что-то новое узнали для себя? Какая проблема встала перед человечеством с использованием Интернета! (ответы учеников)

ОБЪЯСНЕНИЕ НОВОГО МАТЕРИАЛА

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

(ученики изучают материал, возможно музыкальное сопровождение)

Учитель: - Вы прочитали подготовленный материал и теперь ответьте на вопросы

- Что входит в понятие гиперссылка?

Ответ: Гиперссылка - указатель перехода в текстовом массиве от фрагмента к фрагменту.

- Какие бывают виды гиперссылок?

Ответ: ссылку можно сделать:

на другой адрес в Интернет,
на другой файл на своем сайте ( сервере ),
на другое помеченное место на читаемой странице,
на адрес электронной почты E-mail

- Какие бывают типы гиперссылок?

Ответ: Абсолютная ссылка - содержит полный адрес - адрес URL ( Единый указатель ресурсов ) сервера в Интернет и полный путь.. Такая ссылка позволяет другим посетителям копировать страницу к себе на компьютер (не весь сайт!), открыть у себя страницу, и щелкнув по ссылке пройти полное подключение через Интернет и попасть на адресуемую страницу.

Пример - адрес URL другого сервера в Интернет и полный путь.

Правила подготовки материалов на конференцию публикует

Результат, видимый на странице:

Правила подготовки материалов на конференцию опубликовал электронный журнал Правовой предел

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

Относительная ссылка применяется при формировании своего сайта и позволяет перенести свой сайт на любой компьютер.

- Сегодня мы с вами научимся создавать относительные ссылки двух видов:

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

Ссылки связывающие несколько страниц (задание1)

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

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

- Ребята, у нас есть две страницы, а как начать работать с ними, что нудно сделать, чтобы можно было редактировать их?

Ответ: открыть эти два документа с помощью приложения Блокнот

- Что нужно сделать. Каким образом?

Шаг 2. Расположите два окна открытых текстовых документов таким образом ( п.к.м. по Панели задач/расположить окна слева на право )

слева - Главная страничка
справа – ваша личная страничка

Шаг 3. На главной странице найдите элемент обозначенный тэгом, содержащий ваше имя

Александр

Шаг 4. Введите начальный тэг с параметром перед именем и конечный тэг после него Александр

Шаг 5. Получим результат:

Шаг 6. Сохраните изменения.

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

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

- Спасибо ребята, займите свои места и продолжаем работать

Ссылки на точки внутри документа (задание 2)

Второй вид ссылок - ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя скроллирование экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела ( обычно, первая строка раздела или заголовок раздела ) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).

Для создания ссылок, указывающих на метки, которые позволяют посетителю переходить в определенные места документа используется записи:

- Ребята откройте папочку с раздаточным материалом. Найдите задание №2.

- Задание выполняем самостоятельно по прописанному алгоритму.

Ученик комментирует результат выполнения задания №2.(поставить оценку)

Web-страница (документ HTML) представляет собой:

Текстовый файл с расширением txt или doc
Текстовый файл с расширением htm или html
Двоичный файл с расширением com или exe
Графический файл с расширением gif или jpg

Правильным является следующий порядок расположения тэгов:

.
.
.
. . .

Тэг - это:

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

Для вставки изображения в документ HTML используется команда:

1. Гиперссылка задается тэгом:
1. текст
1. Гиперссылки на Web - странице могут обеспечить переход.
1. только в пределах данной web – страницы
2. только на web - страницы данного сервера
3. на любую web - страницу данного региона
4. на любую web - страницу любого сервера Интернет
1. Для создания заголовка Web-страницы используется следующий тэг:
- А теперь, ребята, самостоятельно создайте ссылку с вашей личной странички на новую страничку с использованием графического объекта (портрет).

Содержание - свои фамилия и имя

Ученики создают новый html-документ и связывают его со своей личной страничкой (во время выполнения учениками самостоятельной работы проверить тест)

После выполнения задания один из учеников комментирует выполнение задания

Я создал(а) относительную гиперссылку с фотографии на новую страничку.

Для этого я создал(а) новую страничку в Блокноте. С помощью тегов указал(а):
1. начало разметки гипертекста - ;
2. описание Web-страницы с вложенным тэгом названия страницы Пожелания друзей ;
3. непосредственно содержание странички Кузнецов Влад(Мурза Настя)
Разработка содержит материалы к открытому уроку на тему "Гиперссылки на Web-страницах", представлены разноообразные задания.

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

закреплять и систематизировать знания, умения и навыки форматирования текста и вставки графических объектов при создании Web-страниц средствами языка HTML;

развивать познавательный интерес, логическое мышление, творческую активность при выполнении практических заданий;

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

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

Повторение изученного материала.

Проверка домашнего задания.

Объяснение нового материала.

Итог урока. Рефлексия.

Организационный момент

- настраивание на работу

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

Улыбнитесь друг другу, потому что улыбка поднимает всем настроение.

Повторение изученного материала

Давайте мы вспомним то, что проходили на предыдущих уроках.

Я предлагаю вам выполнить следующее задание. Раздаю вопросы, дети отвечают и

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

Слайд 1 и 2

Сеть предназначена для …(обмена информацией и совместного использования периферийных устройств)

Важной характеристикой сети является … (пропускная способность)

Локальная сеть объединяет … (компьютеры, установленные в одном помещении)

Сервер – это компьютер, … (хранящий большой объем информации и подключенный к интернету)

Клиент – это компьютер, … (отправляющий запрос к серверу на обработку)

Компьютер, подключённый к локальной сети, должен иметь … (сетевую плату)

Соединение компьютеров между собой производится с помощью … (кабелей)

Кабели бывают 3 видов: … (коаксиальный, витая пара, оптоволоконный)

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

Топологии сети бывают … (шина, звезда, кольцо)

Самой производительной и надёжной топологией является … (звезда)

Интернет – это … (глобальная компьютерная сеть)

Молодцы ребята! Переходим к следующему заданию.

Ответьте на вопросы

Что такое IP-адрес компьютера?

(Для того, чтобы в процессе обмена информацией компьютеры могли найти друг друга, у них должен быть IP-адрес. Он содержит адрес сети и адрес компьютера в данной сети. Адрес состоит из 4 чисел, разделённых точками)

Для чего нужна доменная система имён?

(Человеку трудно запомнить IP-адрес компьютера и для удобства была введена DNS, которая ставит в соответствие IP-адресу компьютера уникальное доменное имя. Домены бывают 2 типов: географические – ru, md и административные – com, edu)

Какое назначение у протокола передачи данных TCP/IP?

(Сеть Интернет функционирует благодаря использованию протокола передачи данных TCP/IP. Термин TCP/IP включает название 2-х протоколов: TCP – транспортный, IP – протокол маршрутизации. Протокол IP обеспечивает передачу информации между компьютерами, то есть доставку информации от отправителя к получателю. Протокол TCP отвечает за транспортировку больших файлов. Он разбивает файл на части, нумерует их и отправляет, затем собирает его в правильной последовательности)

Свидетельство и скидка на обучение каждому участнику

Зарегистрироваться 15–17 марта 2022 г.

ПЛАН-КОНСПЕКТ УРОКА

Гиперссылки на Web – страницах. Списки на Web – страницах.
__________________________________________

ФИО (полностью)

Павлова Вера Васильевна

Место работы

Должность

учитель информатики и математики

Предмет

информатика

Класс

Тема и номер урока в теме

Гиперссылки на Web – страницах. Списки на Web – страницах. №1

Базовый учебник

Информатика и ИКТ 8, Н.Д. Угринович , Бином. Лаборатория знаний 201 г.

Цель урока: обеспечить усвоение учащимся знаний об оформлении web – страниц с помощью гиперссылок и списков различных типов; выработать умения и навыки по их применению.

Задачи:

закрепить навыки создания документов HTML: структуру создания web-страницы; научить использовать гиперссылки и списки для оформления web-страницы ;

- развивающие: развивать творческие способности учащихся, мыслительную деятельность, любознательность; развивать познавательный интерес, логическое мышление; развивать координацию и внимание при работе с клавиатурой и мышью;

- воспитательные: прививать интерес к созданию web – страниц; воспитывать дисциплинированность, внимательность, аккуратность, усидчивость; воспитывать информационную культуру; воспитывать аккуратность и грамотность при выполнении заданий, а также трудолюбие и желание довести работу до конца.

Тип урока: изучение нового материала.

Формы работы учащихся: индивидуальная, фронтальная.

Необходимое техническое оборудование: компьютеры с установленными на них ОМС Плеер – проигрывателем ресурсов сайта ФЦИОР, с установленной операционной системой Windows и с установленной программой общего назначения Блокнот, предварительно сохраненные модули на урок, мультимедийный проектор, экран, колонки.

Урок информатики по теме: «Вставка изображений в Web-страницы

Гиперссылки на Web-страницах

Составитель: Слепцова Юлия Михайловна, МАОУ – лицей № 2, г. Альметьевск, учитель математики и информатики

Урок посвящен закреплению и изучению новых html – тэгов. А именно тэгов, используемых для вставки изображений и гиперссылок в Web-страницы. Данная тема изучается в курсе информатики 8 класса.

Цели урока:

- закрепить навыки создания документов HTML: структуру создания web-страницы;

- научить использовать рисунок для оформления web-страницы;

- развитие познавательного интереса, логического мышления;

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

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

Ход урока

I. Организационный момент.

II. Актуализация опорных знаний учащихся

На прошлом уроке мы научились создавать web-страницы с использованием HTML-тэгов. Давайте повторим.

▪ Что такое HTML? (HTML – язык гипертекстовой разметки Web-страниц – является компьютерным языком программирования для разработки Web-страниц. HTML – коллекция управляющих символов -дескрипторов для добавления, форматирования элементов Web-страницы);

▪ Вспомни теги! (учащиеся по порядку называют теги, и объясняют их значение):

-оформление заголовка страницы

- текст и основная часть страницы

Парный тег позволяет управлять параметрами шрифта. Он должен

обязательно содержать хотя бы один из атрибутов:

COLOR=”шестнадцатеричный код цвета”,

SIZE размер от 1 до 7.

ALIGN=“left” – выравнивание текста по левой стороне

ALIGN=“right” – выравнивание текста по правой стороне

ALIGN=“center” – выравнивание теста по центру

III. Изучение нового материала

Итак, мы повторили структуру создания web-страницы и правила сохранения HTML документа. Это будет нам необходимо при изучении новой темы на занятии. Сегодня мы научимся вставлять рисунки и гиперссылки в web-страницы.

Для вставки рисунка в web – страницу используется тег , с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. Если графический файл находится на локальном компьютере в той же папке, что и файл web-страницы, то в качестве значения атрибута src достаточно указать только имя файла. Например:

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

Следующий атрибут тега - align (выравнивание). Мы уже с ним знакомы. Какие значения он может принимать? Правильно:(left, right, top, middle, bottom).

Часто рисунки вставлены в рамки, язык HTML тоже позволяет нам сделать обводку, с помощью атрибута border. Этот атрибут может принимать значения от 0 до 10. Чем больше значение, тем толще обводка рисунка.

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

Указателем ссылки может быть текст или рисунок.

IV. Закрепление нового материала

Создать html – страницу про свою семью. Вставить рисунок и гиперссылку. Например,

Моя семья очень дружная. Она состоит из четырех человек: папа, мама, сестра Марина и я - Карина. Я очень люблю свою семью

Читайте также:

Гиперссылки на веб страницах план урока

Предварительный просмотр:

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

Урок информатики по теме: «Вставка изображений в Web-страницы

Гиперссылки на Web-страницах

Ход урока

I. Организационный момент.

II. Актуализация опорных знаний учащихся

III. Изучение нового материала

IV. Закрепление нового материала