Гиперссылки HTML

 

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

         Продолжение работы по общей теме: «Создание Web-сайтов с использованием языка разметки гипертекстовых документов HTML»

 

Цели урока:

 

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

-                   Изучение нового материала по теме «Создание гиперссылок».

 

 

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

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

 

План урока:

 

I.	Организационный момент
II.	Повторение пройденного
III.	Объяснение нового материала с практической работой на ПК (задание 1)
IV.	Физкультминутка
V.	Практическая работа на ПК (задание 2)
VI.	Тест
VII.	Самостоятельная работа на ПК (задание 3)
VIII.	Подведение итогов урока
IX.	Домашнее задание

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ход урока

 

ОРГАНИЗАЦИОННЫЙ МОМЕНТ.

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

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

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

 

 

 

Учитель: Мы продолжаем изучение темы создание 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.

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

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

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

         Ответ: Ги́пер- (от др.греч. над, сверху) - составная часть сложных слов, означающая: «увеличенный относительно нормы»

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

         Ответ: Гипертекст – информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера. (Термин был введён Тедом Нельсоном (?) в 1965 году для обозначения «текста ветвящегося или выполняющего действия по запросу»)

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

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

 

        

Ответ 3. Для просмотра Web-страниц нужен браузер – программа, которая отображает содержимое файлов, полученных с локального или удаленного компьютера. С ее помощью можно загружать и просматривать Web-страницы, осуществлять навигацию WWW.  Существует большое количество Web-браузеров. Например: Internet Explorer, Mozilla Firefox

 

- Молодцы!

 

 

 

 

 

- А как же все начиналось? Об истории развития уникальной WWW  нам расскажет – Петенин Александр (индивидуальное задание: подготовить проект-презентацию «История возникновения WWW»)

 

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

 

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

 

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

 

         Познакомились с форматированием текста на Web-страницах, созданием списков, размещением графики. Создали и оформили свою первую личную страничку «Моя страничка», где разместили информацию о себе, своих увлечениях (хобби), о будущей профессии.

- Ребята, прошу пройти за свои рабочие места (ПК). Сейчас вы самостоятельно  ознакомитесь с HTML-документом «Гиперссылки», который  находится в папке «9 класс»  на Рабочем столе

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

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

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

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

 

 

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

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

-                   на другой адрес в Интернет,

-                   на другой файл на своем сайте (сервере),

-                   на другое помеченное место на читаемой странице,

-                   на адрес электронной почты E-mail

 

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

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

 

Пример - адрес URL другого сервера в Интернет и полный путь.   Правила подготовки материалов на конференцию публикует  <A НREF="http://www.sgap.ru/kinforma/"> электронный журнал "Правовой предел"</A>. Результат, видимый на странице: Правила подготовки материалов на конференцию опубликовал электронный журнал Правовой предел

 

 

- Все правильно! Но, чаще всего мы говорим «адрес сайта» - это и есть абсолютная ссылка

- Ещё?

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

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

 

(Объяснение учителя)

- Ребята, закройте, пожалуйста, HTML-документ «Гиперссылки»

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

-                   гиперссылку, связывающую две странички;

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

- Для того, чтобы создать гиперссылку нам необходим элемент, отмечающий в документе ссылку. Граница действия элемента определена парным тэгом,  который называется «Анкор» (от слова Anchor -  буквально "якорь")

Тэг <A>…</A>

          Тэг <A> применяют с параметрами HREF или NAME, которые уточняют ссылку.

 

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

 

Для создания гиперссылки, связывающей несколько страниц используется запись <A HREF="адрес куда"> Слова откуда </A>

 

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

Алгоритм работы:

         Шаг 1. На Рабочем столе откройте папку под названием site, в которой хранится HTML-документ index.html (главная страничка) и HTML-документ «Моя страничка» с именем page1.html.

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

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

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

 

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

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

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

 

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

<td align="center"> <b> Александр  </b> </td>

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

Шаг 4. Введите начальный тэг с параметром перед именем и конечный тэг после него         <A href=”page1.html”>  Александр  </A>

 

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

<td align="center"> <b>  <A href=”page2.html”> Александр </A> </b> </td>

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

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

 

ФИЗКУЛЬТМИНУТКА.

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

1.     Упражнение выполняется только глазами. Посмотрите вверх, влево, вниз, вправо. Повторить еще 2 раза

2.     Зажмурили сильно глаза, окрыли, удивились! Повторить еще 2 раза

3.     Упражнение «ракушка»: помассировали ушки, немного потянули и прижали и отжали

4.     Ленивая восьмерка: вытянули левую руку перед собой и смотрим на большой палец. Начинаем движение в левый верхний угол. Рисуем рукой ленивую восьмерку – знак бесконечности, а за движением руки смотрим глазами до ощущения «хватит». Повторить аналогично правой рукой. Продолжить двумя руками.

5.     Посадили на нос воображаемую бабочку и начинаем рисовать глазами туже восьмерку влево вверх

 

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

 

 

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

 

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

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

<A NAME="маркер"> Текст </A>, и

 

 <A HREF="# маркер"> Слова откуда </A>

 

где вводится символ # означающий внутреннюю ссылку к другому тексту той же страницы, который помечен тэгом А с параметром NAME как закладка

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

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

 

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

 

ЗАКРЕПЛЕНИЕ МАТЕРИАЛА

 

Тест

- Ребята, выполняем тест по теме «Создание Web-сайтов с использованием языка разметки гипертекстовых документов HTML». Такой вид работы готовит нас к итоговой аттестации, которую вам предстоит проходить в 11 классе – это ЕГЭ. – 3 мин

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

a.      Текстовый файл с расширением txt или doc

b.     Текстовый файл с расширением htm или html

c.      Двоичный файл с расширением com или exe

d.     Графический файл с расширением gif или jpg

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

a.      <тэг1><тэг2><тэг3> ... </тэг1></тэг2></тэг3>

b.     <тэг1><тэг2><тэг3> ... </тэг1></тэг2></тэг3>

c.      <тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

d.     <тэг1>...</тэг2><тэг3> ... </тэг3><тэг2>...</тэг1>

3.     Тэг - это:

a.      Символы, которые управляют отображением текста, но сами не отображаются

b.     Текст, в котором используются спецсимволы

c.      Указатель на другой файл или объект

d.     Фрагмент программы, включённой в состав Web-страницы

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

a.      <img src="ris.jpg">

b.     <body background="ris.jpg">

c.      <a href="ris.jpg">

d.     <input="ris.jpg">

5.     Гиперссылка задается тэгом:

a.      <font color="file.htm">

b.     <img src="http://www.chat.ru">

c.      <a href="file.htm">текст</a>

d.     <embed="http://www.da.ru">

6.     Гиперссылки на Web - странице могут обеспечить переход...

a.      только в пределах данной web – страницы

b.     только на web - страницы данного сервера

c.      на любую web - страницу данного региона

d.     на любую web - страницу любого сервера Интернет

7.     Для создания заголовка Web-страницы используется следующий тэг:

a.      <H1>...</H1>

b.     <P>...</P>

c.      <CAPTION>...</CAPTION>

d.     <FONT>...</FONT>

Ученики заполняют карточку для ответов

 

Самостоятельное задание

- А теперь, ребята, самостоятельно создайте ссылку с вашей личной странички на новую страничку с использованием графического объекта (портрет).

Название новой страницы     – «Пожелания друзей»

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

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

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

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

         Для  этого я создал(а) новую страничку в Блокноте.  С помощью тегов указал(а):

-                   начало разметки гипертекста - <html>;

-                   описание Web-страницы с вложенным тэгом названия страницы <head> <title> Пожелания друзей </title> </head>;

-                   непосредственно содержание странички <body> Кузнецов Влад(Мурза Настя) </body>, указав свою фамилию и имя;

-                   на конец разметки гипертекста </html>;

-                   сохранил(а ) текстовый документ в папке site на рабочем столе с именем page2  и расширением .html

 

 

page1.html	page2.html
<html> <head> <title> Моя страничка </title> </head> <body> <a href=”page2.html”> <IMG src="Nastja1.jpg" align="middle" width="20%" hspace="40" vspace="20" BORDER=0 ALT="Nastja"></a> ………………………………………….. </body> </html>	<html> <head> <title> Пожелания друзей</title> </head> <body > Кузнецов Влад(Мурза Настя) </body> </html>

         На личной страничке создал(а) ссылку при помощи тэга анкор, открыв личную страничку в Блокноте,  нашел(а) запись адреса  фотографии обозначенную тэгом <IMG src="Nastja1.jpg" align="middle" width="20%" hspace="40" vspace="20" BORDER=0 ALT="Nastja">

и ввел(а) начальный и конечный тэги, таким образом обозначив ссылку

 <a href=”page2.html”> <IMG src="Nastja1.jpg" align="middle" width="20%" hspace="40" vspace="20" BORDER=0 ALT="Nastja"></a>

         Сохранил(а) результат.

         Обновил(а) текущую страницу

         Проверил(а), что ссылка работает.

Оценить ученика

Подведение итогов:

- А теперь ребята подведем итоги.

- Пересядьте, пожалуйста, за наш круглый стол.

- Вы выполнили тест (проанализировать  ошибки, если они есть)

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

Ответ: Научились создавать гиперссылки

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

Ответ: относительные, перечислить…..

- С помощью какого тэга мы это делами?

 Ответ парный тэг анкор

- Молодцы ребята! Прекрасно поработали сегодня на уроке.

(Необходимо отметить учеников, которые хорошо справились с заданием, и указать ошибки, которые делали учащиеся при выполнении работы.)

Создали многостраничный документ

Домашнее задание:

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

- Спасибо за работу! Урок окончен. До свидания.

Скачано с www.znanio.ru