Кнопка или ссылка?

Открытие в новом окне

По умолчанию при нажатии на ссылку документ открывается в том же окне, что и ваша страница, т.е. ваша страница захлопнется. А это не есть хорошо. В частности для продвигаемых контентных проектов или блогов рекомендуется делать так, чтобы при нажатие на ссылку, документ открывался в новом окне или вкладке, не закрывая вашу страницу.

В этом нам поможет атрибут target со значением «_blank». Тут сложного ничего нет. Вам просто надо будет вставить это внутри открывающего тега <a> после значения атрибута href. Давайте возьмем тот отрывок из файла lukomorye.html, где мы делали ссылку на страницу pushkin.html, только теперь пропишем этот самый атрибут. Выглядеть это должно так:

Ну тут всё понятно. Теперь при нажатии на содержимое нужная страница откроется в новом окне. Эта вещь очень нужная, так как если ее не прописать, то пользователь просто напросто уйдет с вашей страницы. А так он в любом случае останется на ней, только если сам специально не закроет ее. Попробуйте проделать всё сами, только делайте всё своими ручками прекрасными. Не надо копировать и вставлять.

Ну а на этом наш сегодняшний урок закончен. Я надеюсь, что вам моя статья понравилась и буду рад, если вы станете моим постоянным читателем. Поэтому не забудьте подписаться на обновления моего блога, дабы не пропустить чего-то интересного. Ну а вам я желаю успехов во всем ваших начинаниях. Пока-пока!

Гиперссылки в пределах одного документа

Линки внутри одного текста могут вести в его начало, к заголовкам или закладкам. Они используются для навигации и для того, чтобы упростить поиск информации.

Переход в начало документа

Это самый простой вариант, в котором нужно задать только пункт “А”, то есть текст или картинку, нажав на которую мы окажемся на титульной странице.

Выделяем объект, нажимаем на опцию для создания линков, затем в диалоговом окне выбираем место в файле.

Ссылка должна стать активной и подсветиться синим цветом, значит, все сделано верно. Теперь попробуйте перейти по ней, нажав на фрагмент текста левой кнопкой мыши с клавишей Ctrl. Курсор должен переместиться вверх.

Переход к заголовку

Чтобы выполнить эту задачу, сначала нужно обозначить место назначения (пункт “Б”) как заголовок. Для этого выделите фразу, перейдите в главную панель и выберите уровень подраздела.

Теперь выделяем элемент, который станет гиперссылкой, идем в панель “Вставка”, “Ссылки”. В диалоговом окне выбираем в качестве целевого объекта “Заголовки” и нужный фрагмент.

И снова выбранный элемент должен подсветиться синим, значит, создана кликабельная ссылка. Проверьте, корректно ли она работает.

Переход к закладке

Любой элемент внутри файла можно превратить в закладку. Так можно направлять читателя на страницу в Word или к любой ее части. Давайте для разнообразия сделаем линк не на текст, а на рисунок. Вставьте в Word какую-то картинку, затем нажмите на нее левой кнопкой мыши, в меню выберите опцию.

Напишите имя и сохраните изменения.

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

Как вставить изображения

Поместите любые изображения в ту же папку, где находятся две учебные html-страницы. Саму папку можно назвать, ну скажем Site1. Измените названия файлов изображений на img1, img2, img3, как на скриншоте. Либо измените в нашем коде эти названия на названия ваших изображений, а если нужно, то поменяйте и расширения (формат файлов). У меня это картинки 3D человечков, в формате .jpg:

Вы наверно слышали выражение «Корневой каталог сайта» — это директория (папка), где расположены все файлы сайта. В нем могут располагаться другие папки: с изображениями, с файлами скриптов, с отдельными разделами сайта. Чтобы потом не путаться в куче файлов с разными расширениями, уместно создать, например, отдельную папку для изображений. А для больших сайтов — несколько папок изображений для разных его разделов.

Если ваши изображения поместить в отдельную папку, например, с названием «papka», то путь к ней (значение обязательного атрибута scr) будет выглядеть так: . Если ваши изображения не отображаются в браузере, то причин всего две: указан неправильный путь к файлу или опечатка. Вы уже заметили, что элемент Img не имеет закрывающего тега. Разберем другие примененные атрибуты тега Img.

Во втором изображении img2.jpg: атрибут alt — в качестве значения используется текст, который виден, если браузер, по каким-либо причинам, не смог отобразить изображение. Рекомендуется использовать атрибут alt, прописывая в нем . Третье изображение помещено в тег P, а его расположение справа от текста абзаца определено значением «right» атрибута align, служащего для выравнивания картинки.

Стоит, еще отметить, что кроме формата jpg в веб-графике применяются форматы gif и png. Желательно научиться оптимизировать изображения для веб и пользоваться программой Photoshop. Оптимизированные, более «легкие по весу» изображения, меньше тормозят загрузку страниц в браузере.

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

Как делать гиперссылки

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

Гиперссылка задается тегом <a> и в самом простой форме выглядит так:

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

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

• Аргумент TARGET определяет, в текущем или новом окне браузера будет открыт целевой документ.
• Можно задать в ссылке атрибуты, которые будут определять поведение ссылки после перехода. Обычно для удобства пользователей ссылка меняет цвет после клика, это помогает посетителям сайта всегда знать, какие страницы сайту уже были просмотрены и не тратить время на повторные переходы.
• Другие атрибуты определяют внешнее оформление ссылки. Традиционно ссылка на странице сайта подчеркивается синей чертой, что тоже помогает людям сразу увидеть где находятся активные гиперссылки.

Ссылка в формате текста, например – “читать дальше”, называется анкорной. А если вместо текста прямо указан URL целевой страницы – это безанкорная ссылка.

Кликабельные рекламные баннеры имеют колоссальное преимущество перед традиционными уличными и придорожными плакатами. Представляете себе, как бы увеличились продажи в гипермаркетах, если бы любой похожий мог прикоснуться рукой к рекламе на улице и мгновенно перенестись прямо к прилавку, в объятия продавца. А в интернете такие чудеса являются привычным делом.

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

Теперь посмотрим, как сделать гиперссылку на другой документ. Эта возможность может потребоваться в том случае, когда у нас имеется несколько достаточно больших текстовых файлов по одной теме и нам необходимо делать на них отсылки. Так же можно упорядочить все документы по конкретной теме в одном. В общем, применений достаточно, поэтому смотрим.

Выделяем необходимый текст для встраивания и переходим в окно параметров по инструкциям выше.

1. Выбираем в левой части первую кнопку «файлом, веб-страницей».
2. В блоке «искать в» указываем путь до документа на вашем компьютере с помощью стрелочки и указания пути, а в нижнем окне просмотра каталога выбираем нужный файл.
3. Нажимаем ОК.

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

Простой способ сохранения фото и картинок

Для начала нам нужно узнать, увеличивается ли фотография, которую мы хотим скачать из интернета. Чтобы это проверить, нужно навести на изображение курсор (стрелку мышки). Если внешний вид изменится, и он станет рукой с вытянутым пальцем, значит, картинка увеличивается.

Нажимаем на нее один раз левой кнопкой мышки и фотка открывается в большем размере. Правда, иногда вместо этого может открыться другой сайт. Но такое случается не часто.

Если изображение увеличилось, то сохранять нужно именно такой вариант, а не маленькую копию.

Рассмотрим скачивание фото на примере Одноклассников. Сначала наводим на картинку курсор. Он меняет свой вид на руку с вытянутым пальцем.

Щелкаем один раз левой кнопкой мыши и картинка открывается в увеличенном размере.

Сохраняем ее:

1. Щелкаем по фото правой кнопкой мышки и в списке выбираем пункт «Сохранить картинку как…» (или какой-то похожий пункт).

2. В появившемся окошке выбираем место в компьютере, куда нужно отправить фотографию.

Например, я хочу, чтобы это изображение было на моем компьютере в Локальном диске D, в папке «Картинки». Значит, в левой части окошка выбираю диск D.

Появляются папки и файлы, которые в нем есть. Выбираю нужную мне папку «Картинки» и открываю ее в этом самом окошке — щелкаю по ней два раза левой кнопкой мыши.

3. Когда место в компьютере выбрано, нажимаем на кнопку «Сохранить» в окошке.

Теперь можно открыть то место на компьютере, куда сохраняли фото, и проверить, есть ли оно там.

А сейчас попробуйте сохранить на свой компьютер вот этот рисунок.

Обратите внимание: при наведении на него курсора рука с вытянутым пальцем не появляется. Это значит, что картинку нельзя увеличить – можно сохранить только в таком размере

Список параметров тега

href Основной параметр, который указывает адрес перехода, то есть путь к файлу, который будет загружен в браузер при щелчке по гиперссылке. title Подсказка, которая отображается на экране при наведении курсора мыши на гиперссылку.

name Имя ссылки для внутренних переходов по документу. target «Цель» гиперссылки. Если указать target=»_blank», то гиперссылка откроется в новом окне (или вкладке).

Имеются и другие параметры. Но мы их оставим профессионалам, а сами двинемся дальше.
Для начала пример гиперссылки:

<a href=»http://av-assembler.ru» target=»_blank» title=»Ассемблер для чайников»>Ближе к железу!</a> Эта ссылка приведёт вас на сайт о программировании на языках низкого уровня, причём сайт откроется в новом окне (или в новой вкладке – это зависит от вашего браузера).

Конечно, вы должны быть подключены к Интернету. В примерах, которые находятся в папке SOURCECH_01, есть и такие ссылки: <a href=»Картинки.html»>Эта ссылка ведѐт к файлу с картинками</a>

Для того чтобы эта ссылка работала, Интернет не нужен. Достаточно того, чтобы файл с указанным именем был в той же папке, в которой находится файл с данной гиперссылкой.

Ну а если вы не очень хорошо представляете, что такое путь к файлу, рекомендую прочитать книгу — Чайникам о компьютерах.

А теперь посмотрим, как сделать гиперссылкой картинку. А делается это очень просто: между тегами <a> и </a> вставляется картинка. Например, так: <a href=»Гиперссылка_текст.html»><img src=»кнопка.png» border=»0″></a>

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

И это допускается при работе на локальном компьютере.

Однако если вы хотите разместить свои HTML-файлы в Интернете, то давать файлам русские имена не рекомендуется. В этом случае в именах файлов должны быть только цифры и английские буквы. Более того, желательно не использовать в именах файлов большие буквы, так как многие системы чувствительны к регистру символов.

Нам осталось разобраться с переходами внутри документа. Делается это примерно так: участку текста, на который требуется выполнить переход, присваивается уникальное в пределах данного документа имя. Затем это имя используется в гиперссылке.

Очень удобно использовать заголовки. Например, если у вас есть заголовок, то имя этому заголовку можно присвоить следующим образом: <h2 id=»link_1″>Заголовок 1</h2>

Затем в любом месте этого документа можно вставить такую ссылку: <a href=»#link_1″>Ссылка 1</a> Щелчок по этой ссылке «перебросит» вас на «Заголовок 1».

Если же вам нужно перейти к внутренней ссылке из другого документа, то сделать это можно так: <a href=»Гиперссылка_внутренняя.html#link_2″>Переход к внутренней ссылке другого документа</a>

Не обязательно использовать заголовки для внутренних переходов – это очень удобно, но не всегда приемлемо. В таких случаях можно использовать тег <a> с параметром name, который определяет имя ссылки.

То есть, если вам нужно перейти по внутренней ссылке в какой-либо участок текста, то в этом участке текста нужно вставить примерно следующий код: <a name=»link_23″></a>

Тогда к этому участку текста можно перейти уже известным нам способом: <a href=»#link_23″>Абзац 2.3</a>

Примеры работы с гиперссылками вы можете найти в папке SOURCECH_01 в файлах Гиперссылка_текст.html, Гиперссылка_картинка.html и Гиперссылка_внутренняя.html.

Советую посетить следующие страницы:
Что такое «тошнота» страницыКак создать блог и все что для этого нужноЧто такое юзабилити сайта

Абсолютные и относительные ссылки

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (http:// или https://) и содержать имя домена. Относительные ссылки ведут отсчёт от корня сайта или текущего документа.

Протокол для сайта можно не указывать, в таком случае ссылка будет начинаться сразу с // без протокола. Браузер сам подставит нужный протокол, на котором работает сайт. В примере 2 показано создание подобной ссылки.

Пример 2. Использование ссылки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абсолютный адрес</title>
</head>
<body>
<p><a href=»//facebook.com»>Facebook</a></p>
</body>
</html>

В данном примере ссылка вида <a href=»//facebook.com»>Facebook</a> является абсолютной и ведёт на главную страницу Facebook. Учтите, что при открытии такой страницы в локальном документе произойдёт ошибка, поскольку такие ссылки работают только на веб-сервере.

Когда в адресе указывается только домен (//webref.ru) или после домена идёт имя папки (//webref.ru/css/), то веб-сервер автоматически загружает документ, обычно с именем index.html или index.php. Таким образом, полный путь к сайту будет https://webref.ru/index.php, а сокращённый — //webref.ru.

Абсолютные ссылки обычно применяются для указания на другой ресурс, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.

Ссылки относительно текущего документа

При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.

1. Файлы располагаются в одной папке (рис. 3).

Рис. 3

Необходимо сделать ссылку из исходного документа source.html на target.html. В таком случае код будет следующий.

2. Файлы размещаются в разных папках (рис. 4).

Рис. 4

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

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 5).

Рис. 5

Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 6).

Рис. 6

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

Заметьте, что никаких дополнительных точек перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

5. Файлы размещаются в разных папках (рис. 7).

Рис. 7

Каждый файл располагается в своей папке и чтобы перейти из одной папки в другую ссылка будет следующей.

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/folder/target.html». Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведёт в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить файл index.html.

Опять же, такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Ссылки внутри страницы

Язык HTML позволяет делать ссылки внутри страницы, а также
в любую часть этой же или любой дроугой страницы. Для этого в нужном месте
надо установить «якорь» — тэг <A>
с параметром NAME, который задает имя или метку.
Вот как выглядит переход на подраздел
этой страницы:

<A HREF=»#otherrefs»>
   «Ссылки на другие страницы сайта»</A>

Чтобы ссылка сработала, в нужном месте надо установить «якорь»:

<A NAME=»otherrefs»></A>

Имя otherrefs — это метка якоря, при обращении к ней в параметре
HREF надо поставить знак #,
который говорит, что это метка, а не имя файла.

Можно также перейти на любую метку в другом файле. Например, переход
на метку font_tag в файле texts.htm, где описаны
, выглядит так:

<A HREF=»texts.htm#font_tag»>
   параметры тэга FONT</A>

Конечно, в нужном месте файла texts.html должен стоять «якорь»
с именем font_tag:

<A NAME=»font_tag»></A>

Следующий раздел рассказывает о списках.

Какие виды ссылок бывают

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

Какая польза и кому нужно? Пользователям интернета гиперссылки обеспечивают максимальное удобство поиска нужной информации, мгновенные перемещения по самым удаленным закоулкам всемирной сети, легкую и удобную навигацию по сайту.

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

• Входящие ссылки рассматриваются поисковыми системами как положительный фактор ранжирования и способствуют успешному продвижению ресурса в ТОП10 выдачи, помогают привлекать посетителей, обеспечивать бизнес клиентами.
• Исходящие ссылки на качественные и авторитетные интернет-ресурсы улучшают общее информационное качество контента и тоже помогают поисковому провидению и раскрутке проекта.
• Ссылки для переходов по внутренним страницам сайта улучшают поведенческие факторы, которые сегодня стали наиболее влиятельными и обеспечивают повышение позиции сайта в поисковой выдаче лучше, чем внешние входящие ссылки.

Как сделать картинку ссылкой

Так как тег img для вставки изображения является строчным элементом html-страницы, то просто вставляем этот тег внутрь тега «А» вместо текста:

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

Кроме этого простого варианта создания картинки-гиперссылки, html позволяет превратить в гиперссылку часть графического изображения. Более того, имеется возможность разбить изображение на части, каждое из которых будет представлять из себя гиперссылку, указывающей на свой интернет-адрес. Такой вариант называется картой изображений.

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

Изображение-карта создается в три этапа:

1. Создание самого изображения с помощью тега img: img src=»map.jpg»
2. Создание карты с помощью парного тега map. С помощью обязательного атрибута name этого тега задается уникальное в пределах страницы имя карты. Далее необходимо привязать карту к изображению с помощью атрибута usemap тега img, значением которого должно состоять из символа # и имени карты:
3. Создание описаний областей гиперссылок с помощью одинарных тегов area. Данные тег должен содержать атрибуты: shape — форма области, coords — координаты области и href — адрес гиперссылки. Эти описания помещают внутрь тега map.

Примерно так выглядит полный html-код, создающий карту изображения:

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

Что такое активная (кликабельная) ссылка

Активная (кликабельная) ссылка — ссылка, при клике на которую пользователь перенаправляется на определенную страницу сайта. Другими словами это указание сайта о перенаправлении, которое может быть оформлено в виде картинки, анкора, ключевого слова. Такой переход может быть осуществлен всего в один клик. В Сети полно полезных кликабельных ссылок.

При помощи таких ссылок вы можете как бы путешествовать по интернету, ничего не зная о том, что ждет вас после клика. И, если открыв кликабельную ссылку вы не получили то, за чем переходили по ней, вам 100% будет обидно, ведь такое “путешествие” оказалось бесполезным. 

Карты изображений

Чтобы добавить кликабельную область на фото, можно использовать карту изображений.

Она будет перекрывать все изображение. Поэтому нужно будет определить область клика.

Карты изображений появились в HTML 3, поэтому они поддерживаются всеми браузерами. Для их стилизации используется CSS и JavaScript.

В W3 Schools есть отличный пример использования карты изображений. На ней изображена солнечная система. Клик по поверхности любой из планет отобразит ее увеличенное фото. Все остальные области изображения не кликабельны. Координаты областей, определенных в карте, соответствуют расположению солнца и планет на базовом изображении.

В следующем примере для стилизации областей клика используется jQuery

Обратите внимание, как карта накладывает изображение и как координаты используются для создания целей

Вернемся к фигуре из примера с использованием SVG, которое заменим растровым изображением. Нам нужно привязать ссылку к стреле и центру мишени. Мы знаем ее координаты X и Y, а также радиус в базовом изображении. Поэтому довольно просто определить круг области клика.

С фигурой стрелы все сложнее. Я использовал сервис image-map.net для построения фигуры и создания области для карты изображения. Она ​​состоит из многоугольника и круга для закругленного края в верхней части.

4. Как сделать якорную ссылку.

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

№1. Определяем адрес статьи в блоге.

Показываю на примере Blogger, но процесс одинаковый для любого ресурса.В редакторе сообщений, нажимаем «ПОСТОЯННАЯ ССЫЛКА» в боковом меню справа:

Для этой страницы постоянная ссылка выглядит так:https://saitsamy.blogspot.com/2019/08/blogger_32.html

№2. Создаем якорь.

Вы можете создавать якорные ссылки для:

• Меню
• Навигации внутри страницы
• Навигации по блогу и переход между страницами

Пример посмотрим для меню.Допустим есть два раздела и меню будет двухстрочное.Тогда два якоря будут выглядеть следующим образом:<a href=»https://saitsamy.blogspot.com/2019/08/blogger_32.html» name=»anchorname1″></a><a href=»https://saitsamy.blogspot.com/2019/08/blogger_32.html» name=»anchorname2″></a>Красным цветом выделена постоянная ссылка сообщения, которую скопировали с панели в боковом меню.Синим цветом выделено индивидуальное имя якоря.Якоря с одинаковыми именами не приемлемы и как видно в первом случае это: «anchorname1», во втором «anchorname2». Различие в цифре. Якорей делают сколько необходимо. Лимита нет.

№3. Создаем ссылку.

Меню на два раздела. Понадобится две ссылки. Как выглядят и чем отличаются:<a href=»https://saitsamy.blogspot.com/2019/08/blogger_32.html#anchorname1″>№2. Создаем якорь</a><a href=»https://saitsamy.blogspot.com/2019/08/blogger_32.html#anchorname2″>№3. Создаем ссылку</a>Красным цветом выделена постоянная ссылка нашего сообщения.Зеленым цветом выделено названия из нашего ‘Меню’.Синий цвет названий якорей.Цифры идентичны, как номер якоря с номером ссылки в меню anchorname2 соответствует #anchorname2Названия могут быть любыми и не совпадать с названиями разделов. Пример приведен для ясности.Перед словом anchorname стоит значок #.

№4. Расставляем якоря и ссылки по местам.

Меню:.Еще раз. Это делается для ясности. Когда понимаешь смысл, то к готовому Меню подставляешь атрибуты кода во вкладку HTML.

Ссылки расставляем вплотную к местам назначения, не обращая внимания на посторонний код.

Теперь определяемся с ссылками и Меню готово.

Меню готово и можно проверить, что вопрос, как сделать ссылку на определенную часть страницы, не такой уж и сложный, что бы его успешно не решить.Важно: имя для якорной ссылки, на каждой странице разное.В этом сообщение имя anchorname, в следующем, например, kotikНо лучше пользоваться ключами. Это одно из тех мест куда можно вставлять ключевые слова

Оформление ссылок HTML для переходов к другим документам

Лабораторная работа №2: скачайте папку. В файле index.html оформите меню в виде гиперссылок на файлы, соответствующие названиям пунктов меню («Кафедра ИТ и МПИ» => kafedra.html, «О НОЦ» => noc.html, «Сведения о поступлении» => postuplenie.html, «Новости образования» => news.html, «Новости дистанционного обучения» => distancenews.html)

переход к другому документу с якорем

Иногда необходимо организовать ссылку не просто на другой документ, а на конкретное место — якорь — другого документа.

Пример: организовать ссылку на файл 1.html, а, конкретнее, на якорь, расположенный в данном файле

Выполнение:Файл с ссылкой:

...
<a href="1.html#a">Ссылка<a>
...

Файл 1.html:

...
<p id="a">Якорь<p>
...

Лабораторная работа №3: Скачайте папку. Запустите файл menu.html. В файле menu.html оформите меню в виде гиперссылок на файл content.html и показом статьи, соответствующий названию пункта меню