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

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

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

Благодаря этой рекламе сайт может продолжать свое существование, спасибо за просмотр.

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

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

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

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

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

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

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

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

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

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

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

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

Пример 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

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

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