Задание №2:
Создать несколько примеров использования ссылок как внутри документа, так и на другие html-документы, включая использование в качестве ссылок текстов и рисунков.
Поэкспериментировать с заданием абсолютных и относительных адресов.
Ссылки внутри документа:
Результат работы представлен на рис.21-22.
рис.21 - код в блокноте под названием “index”
рис.21.2 – продолжение кода в блокноте под названием “index”
рис.22 – когда нажимаем на ссылку “Перейти к концу стихотворения”, то мы переходим в самый низ стихотворения (рис.22.2)
рис.22.2 – когда нажимаем на ссылку “Перейти к началу стихотворения”, то мы переходим к самому началу стихотворения (рис.22)
То же самое было проделано и с рисунками (рис.23-24):
рис.23 - код в блокноте под названием “index”
рис.23.2 – продолжение кода в блокноте под названием “index”
рис.24 – когда нажимаем на картинку, где стрелка указывает вниз, то мы переходим в самый низ стихотворения (рис.24.2)
рис.24.2 – когда нажимаем на картинку, где стрелка указывает наверх, то мы переходим к самому началу стихотворения (рис.24)
Ссылки на другие html-документы:
Результат работы представлен на рис.25-27.
рис. 25 – был выбран код из прошлого примера, и в него было решено добавить ссылку на другой источник
рис.26 – вот так отображается ссылка на другой источник
рис.27 – после нажатия на ссылку (рис.26) происходит переход на сайт с другими стихотворениями данного автора (как доказательство, была высвечена ссылка наверху)
Абсолютные адреса:
В прошлом примере ссылка <a href="http://stih.su/majakovskij/">Хочется больше стихотворений? Жми сюда!</a> является абсолютной и ведет на главную страницу сайта stih.su.
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Относительные адреса:
Результат работы представлен на рис.28-32.
рис.28 – создание index2
рис.29 – место в коде из прошлого примера
рис.30 – место на странице сайта из прошлого примера
рис.31 – код в документа под названием “index2”
рис.32 – доказательство перехода по ссылке (рис.30)
Пояснительная записка к заданию №2:
HTML-документ обрамляется парными тегами <html> … </html>. Для обеспечения корректного отображения документа современный стандарт требует использования одиночного тега <!DOCTYPE>, имеющего одну из следующих структур:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.
HTML-документы состоят из заголовка и тела документа. Заголовок и тело документа представляются парными тегами <head> … </head> и <body> … </body>, соответственно.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - позволяет перевести страницу на кириллицу, т.е. будут не иероглифы, а именно русские буквы.
<title>…</title> - определяет заголовок документа и не является частью документа, а также не показывается напрямую на веб-странице.
Атрибут align — задает выравнивание элемента относительно других элементов на странице или выравнивание внутри элемента в зависимости от того, к какому элементу (тегу) применен.
<h1>…</h1> - HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше.
Тег </br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега </br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега </br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Вывод
Удалось изучить определённые понятия и создать таблицы средствами html, а также было изучено предназначение и использование ссылок, ещё были разобраны основы гипертекстовых документов, средствами HTML.