Презентация по информатике на тему "Гиперссылки в HTML"

• 1 слайд

  Построение
  многостраничного
  документа
  Гиперссылки в HTML
  Педагог дополнительного образования
  Сабирова Зульфия Фавизовна,
  Федоровский центр дополнительного образования,
  Сургутский район, 2016 г
  

• 2 слайд

  В настоящее время во всем мире разразился бум
  HTML– конструирования.
  
  Три главные причины популярности HTML:
  Простое HTML-программирование - разметка текста,
  которая предполагает следующий порядок работы:
  Берется обычный текст
  И размечается, то есть на него накладывается сетка из тегов так, чтобы браузер смог показать строчки текста на экране.
  2) Переносимость. Документ будет доступен
  для чтения, независимо от марки ПК и типа ОС.
  3) HTML–документ – это гипертекст
  

• 3 слайд

  Сайт – это совокупность гипертекстовых страниц
  для представления предприятия, фирмы, школы
  или частных лиц.
  
  Гипертекстовые страницы записываются
  на специальном языке HTML.
  
  Гиперссылка – это чувствительная область на экране.
  При щелчке мыши по такой области происходит переход.
  Гипертекстовые ссылки выделяются цветом и
  подчеркиванием
  Курсор мыши превращается в указующий перст.
  
  

• 4 слайд

  Переход внутри одного документа
  <A href=#метка>текст</A>
  …
  …
  …
  <A name=метка></A>
  
  Имя метки должно быть уникальным
  Имя метки может заключаться в кавычки (если имя одержит пробелы или ключевые символы HTM, кавычки обязательны)
  # - ключевой символ
  Текст – запись, которая будет выглядеть на экране браузера как ссылка
  Например,
  <A href=#el>стих</A>
  …
  …
  <A name=el></A>
  <P>
  В лесу родилась елочка
  
  Переход браузера
  

• 5 слайд

  Переход к другому документу (файлу)
  <A href=имя_файла>текст</A>
  
  Например,
  <A href=#el>стих</A>
  …
  …
  <A name=el></A>
  <P>
  В лесу родилась елочка
  
  Переход браузера
  На экран выводится ссылка: текст
  

• 6 слайд

  Переход к метке другого документа
  Первый HTML-файл
  …
  <A href=имя файла#метка>текст</A>
  …
  Второй HTML-файл
  …
  <A name=метка></A>
  

• 7 слайд

  Имена файлов и ссылки на них
  Имена файлов с HTML-программами
  имеют расширение htm или html
  Лучше использовать htm
  Имена для файлов должны быть осмысленные.
  Когда файлов много, порядок в именах имеет
  особое значение.
  Если, например, ваш многофайловый гипертекст
  имеет иерархическую структуру, старайтесь в
  обозначениях учитывать иерархию.
  Так, основной файл с оглавлением лучше
  назвать index.htm.
  Файл с 1й главой - 01.htm,
  со 2й - 02.htm (до 90.htm)
  
  

• 8 слайд

  Когда главы имеют файлы-параграфы или файлы-пункты
  параграфов –
  0205 .htm – описывает построение 5 параграфа 2 главы
  111299 .htm – 99-й пункт 12-го параграфа 11-й главы
  
  

• 9 слайд

  С:
  BOOK
  index.htm
  01
  02
  02.htm
  0201.htm
  0202.htm
  03
  04
  Каталог с гипертекстом
  Содержание
  Каталог с первой главой
  Каталог со второй главой
  Вторая глава
  Второй параграф
  Первый параграф
  Каталог с третьей главой
  Каталог с четвертой главой
  Пример, расположение гипертекста на ПК
  

• 10 слайд

  Как можно сослаться из файла index.htm на файл 02.htm?
  С:/BOOK/02/02.htm (абсолютная адресация)
  Этот способ приводит к непереносимости продукта
  2) ./02/02.htm (относительная адресация)
  Этот способ предлагает браузеру ориентироваться на текущий каталог
  – это указание «./»
  
  Относительная ссылка из файла 02.htm
  в файл index.htm запишется так:
  ../index.htm
  Символы «../» указывают на родительский каталог.
  
  

• 11 слайд

  Цвета ссылок
  Атрибуты link, alink, vlink тега BODY задают цвета ссылок
  на странице.
  link – задает цвет неотработанных ссылок
  (пользователь еще не «кликал» по ним);
  alink – задает цвет активных ссылок
  (цвет ссылки во время загрузки документа);
  vlink - задает цвет отработанных ссылок
  (пользователь «ходил» по этим ссылкам)
  
  Если атрибуты не заданы, браузер будет
  использовать значение цветов по умолчанию:
  Синий, красный, пурпурный
  

• 12 слайд

  Самые оптимальные цвета на странице –
  
  BODY В «черном костюме, белой рубашке и строгом галстуке» выглядит так:
  
  <BODY bgcolor=white text=black link=blue
  alink=red vlink=purple>
  

• 13 слайд

  Рекомендации
  Цвет неотработанной ссылки должен быть заметным,
  контрастным по отношению к остальным цветам страницы.
  2) Не подчеркивайте другие элементы на экране
  (можно спутать с ссылкой)
  3) Не выделяйте текст тем же цветом, что и ссылки
  (как можно меньше цветов)
  4) Для выделения текста используйте жирность или курсив
  (но не одновременно)
  5) Не записывайте как ссылку слишком большой текст
  посмотри как выглядит этот рисунок
  посмотри как выглядит этот рисунок
  6) Не выделяйте текст под ссылкой дополнительно
  (курсивом, размером, жирностью) ужасная ссылка
  7) Не располагайте несколько ссылок слишком близко друг
  к другу сколько здесь ссылок?
  

• 14 слайд

  Ссылки на ресурсы Интернета
  Гиперсвязь в HTML- документе представляет
  собой URL-адрес.
  URL-обозначение (Universal Resource Locator –
  универсальный способ адресации ресурсов)
  ввел Тим Бернерс-Ли в 1989 г.
  
  Согласно предложенной им схеме :
  
  название протокола://адрес сервера/расположение файла
  

• 15 слайд

  Пример 1:
  
  <A href=ftp://ftp.botik.ru/rented/robot/univer/reclam/reclam.zip>Демо CD </A>
  
  при активации ссылки на ПК пользователя будет передан по сети файл
  reclam.zip с роботландского ftp-архива
  
  Пример 2:
  
  <A href=http://www.botik.ru/robot/index.htm>Роботландия </A>
  
  при активации ссылки в браузер загружается начальная HTML-страничка
  роботландского сайта index.htm
  
  
  

• 16 слайд

  mailto – E-mail
  Служит для передачи по сети электронных писем.
  
  <A href=mailto://[e-mail]>Письмо </A>
  
  Письмо получит адрес //[e-mail]
  
  
  
  

• 17 слайд

  Задание
  Создайте небольшой сайт с иерархической структурой:
  
  главная страница является корнем иерархии,
  остальные (5-6 страниц) – прямыми потомками