close

Вход

Забыли?

вход по аккаунту

?

Урок гиперссылки

код для вставки
основы веб- дизайна
Спецкурс «Основы веб-дизайна»
Тема: Гиперссылки в
учебное пособие А. Г. Пасечник и др
веб-документах
Тип урока: комбинированный
Цели: познакомить с тегами для создания гиперссылок; научить использовать текст и
графические объекты в качестве гиперссылок в веб- документах; познакомить с понятием
внешней и внутренней гиперссылки; познакомить с атрибутами для гиперссылок; научить
создавать гиперссылки в виде текста, картинки в веб-документах; сформировать
представление о принципах навигации при построении сайтов; воспитывать
любознательность, формировать у учащихся интерес к предмету.
1
ученик объясняет
- Понятие тега и атрибутов тега для описания гиперссылки ;
- Правила корректной записи тегов для текстовых гиперссылок
- Правила корректной записи тегов для гиперссылок в виде картинок
- Правила корректной записи тегов для внутренних гиперссылок
классифицирует
-Виды гиперссылок
описывает
- Синтаксис и назначение тегов для разных видов гиперссылок ;
- Область действия атрибутов тегов для задания параметров гиперссылок для гипертекстового
документа;
Презентация: гиперссылки.pptx
План урока
1. Организационный этап
2. Актуализация опорных знаний
3. Изучение нового материала (мини-лекция) с примерами веб-страниц . Гиперссылки, теги,
атрибуты текстових гиперссылок, ссылок-картинок, якорных ссылок
4. Усвоение новых знаний и формирование новых навыков в создании гипертекстовых
документов. Практическое задание
5. Итоги урока. Домашнее задание
Организационный этап
Приветствие учащихся, перекличка
Актуализация опорных знаний. Прием «Снежный ком»
По своей сути веб-документ не есть таковым без гиперссылки… что это за обект?
Алгоритм приема: слово → предложение → вопрос → ответ




Ученик называет слово (например: гиперссылка),
Другой – предложение или фразу (например: используют в веб-документах),
Третий – задает вопрос (например: куда может указывать гиперссылка?)
Четвертый – отвечает (например: на другую страницу, доступный ресурс,
доступный файл, на место в документе….)
Спецкурс «Основы веб-дизайна»
учебное пособие А. Г. Пасечник и др
Изучение нового материала (мини-лекция) с примерами веб-страниц .
Гиперссылки, теги, атрибуты текстових гиперссылок, ссылок-картинок,
якорных ссылок
Описание гипертекстовых ссылок
Гиперссылки бывают двух видов: на файл и на некоторое место на данной странице.
Гиперссылки вставляют при помощи парного тега <A> ..... </A> с параметром href =
«адрес файла».
2
Вместо адреса могут стоять слова top или bottom или текст, который является
помеченным.
Гиперссылкой может быть текст или некоторое графическое изображение.
Если в предложении « меня зовут Инна» слово «Инна» следует сделать гиперссылкой на
файл «file2.html», который содержит дополнительные сведения, то это делают так:
Меня зовут <A href = “ file2.html ”>
Инна </A>
В результате этого на Web-странице слово Инна будет подчёркнуто и изображено другим
цветом.
Чтобы сделать гипертекстовой ссылкой графическое изображение, в середине тега <A
> … </A> используют тег IMG. Например, чтобы фотография Инны, которая размещена в
файле «INNA.gif», была в рамке шириной 8 пикселей и стала гиперссылкой на файл
newinf.html, пишут так:
<A href = “ Newinf. html”>
<IMG SRC=" INNA.gif”
border=8>
</A>
Главная страница
Web -страница может иметь несколько страниц. Тогда она имеет главную страницу, с
которой обеспечивается переход на другие страницы. Например, так:
<HTML>
<BODY>
<A href = “Первая страница.html”>
Первая страница </A> <br>
<A href = “Вторая страница.html”>
Вторая страница </A> <br>
<A href = “Третья страница.html”>
Третья страница
</A> <br>
</BODY>
</HTML>
Для возвращения на главную страницу на поле страницы должна быть соответствующая
ссылка.
Например, такая: <a href = “index. html” >
Главная </a>
Спецкурс «Основы веб-дизайна»
учебное пособие А. Г. Пасечник и др
Примеры использования ссылок файлы: текст_ссылка.html
пример_якоря. html
ссылка_картинка. html
Принципы записи пути для файлов в других каталогах:
(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>
3
В случае (1) документ лежит в той же директории (папке), что и документ, в котором
мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в
случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам
документ.
Ссылка на почтовый ящик прописывается так:
<a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишите письма </a>
Усвоение новых знаний и формирование новых навыков в создании гипертекстовых
документов. Практическое задание
На предыдущих уроках мы создавали страницы, выбрать 3 страницы, одна из них –
домашняя (главная). Создать гиперссылки на страницах так, чтобы с главной
осуществлялся переход на две другие и с любой из следующих можно было вернуться на
домашнюю. Предусмотреть текстовую гиперссылку, ссылку картинку. На «длинной»
странице задать якорные ссылки переходов по разделам.
Для справки исользуем файл: коды ссылки_подсказка.doc
Домашнее задание: стр.57-60 читать
Автор
ovsianik
Документ
Категория
Образование
Просмотров
54
Размер файла
31 Кб
Теги
урок, html
1/--страниц
Пожаловаться на содержимое документа