Как сделать переход на главную страницу в html
Обновлено: 08.07.2024
Ссылки, ведущие на главную страницу сайта, являются столь же неотъемлемым элементом навигации веб-ресурса, как строка поиска или меню. Люди привыкли полагаться на них, и тому есть несколько причин:
- возврат на главную страницу является довольно распространенным действием, совершаемым пользователями на веб-ресурсах. Люди возвращаются на главную страницу, когда чувствуют, что заблудились или хотят приступить к выполнению новой задачи;
- довольно часто люди попадают на сайт, минуя ее главную страницу (как правило, это происходит, когда человек переходит на сайт из поисковой системы). Легкий доступ к главной странице оказывается весьма кстати и для тех, кто не нашел на посадочной странице искомую информацию или просто хочет ознакомиться и с тем, что вы еще предлагаете.
Вы должны использовать оба типа таких ссылок. Ниже приведены рекомендации по их размещению.
Неявные ссылки на главную страницу
1. Логотип должен вести на главную
Эта рекомендация является давно действующей веб-конвенцией. С течением времени, путем проб и ошибок, многие люди приняли к сведению тот факт, что клик по логотипу неизменно приводит их на главную страницу ресурса. Если вы последуете этому стандарту на своем сайте, то добьетесь того, что ваш пользовательский интерфейс будет соответствовать ожиданиям посетителей, и снизите риск того, что люди не поймут вашу систему навигации и не смогут попасть туда, куда им нужно.
Однако использовать только логотип в качестве ссылки на главную страницу не слишком надежно. Хотя такая практика и считается вполне устоявшейся, ее смогут распознать далеко не все пользователи, особенно менее искушенные в технологиях. В исследованиях юзабилити по-прежнему находятся люди, испытывающие проблемы с возвратом на главную страницу, особенно когда логотип размещен не в стандартном месте, левом верхнем углу, или он выглядит как обычный печатный текст.
2. Размещение логотипа в стандартном месте: в верхнем левом углу
Размещение логотипа в верхнем левом углу сайта привычно как для веб-дизайнеров, так и для пользователей. Это ожидание настолько сильное, что отказ от этого шаблона может нанести серьезный вред.
Результаты исследований указывают на то, что размещение логотипа в непривычном месте вредит юзабилити. Пользователи в 6 раз более успешны при переходе на главную страницу в один клик при размещении логотипа слева, чем если бы он располагался в центре. Простое перемещение логотипа вправо тут же приводит к тому, что люди совершают ошибки при поиске логотипа или не могут найти его вовсе (размещенные справа логотипы ухудшают запоминаемость бренда).
3. Логотип должен визуально отличаться от остального текста на странице
Если лого выглядит как вариант навигации или заголовок на странице, его будет труднее распознать. Вы сильно упростите жизнь своим посетителям, если ваш логотип будет выделяться визуально.
Но даже размещение логотипа в правильном месте не застрахует вас от ошибок пользователей. Вам нужно сделать чуть больше, чтобы возврат на главную страницу ресурса перестал быть проблемой для кого бы то ни было.
Явные ссылки на главную страницу
Расположив их в левом верхнем углу страницы, вы сделаете их более видимыми. Чем дальше от этой области будут находится эти ссылки, тем выше шансы, что люди просто не найдут их, особенно если ваш сайт визуально перегружен.
Biology.Standford.edu: подсайт факультета биологии предельно ясно обозначает ссылку на свою главную страницу, представляя при этом и ссылку на главную страницу университета
Заключение
Хорошо, если логотип вашего сайта дает посетителям возможность в один клик перейти на главную страницу ресурса. Но не стоит останавливаться на достигнутом. Хотя большинство людей уже привыкли к такому положению вещей, другие все еще могут не знать этого: для них текстовая ссылка будет более понятной.
SSI используется не только для вывода каких-либо значений, но и для упрощения построения сайта и добавления некоторых удобных вещей, которых лишён HTML. Рассмотрим некоторые примеры применения SSI в деле.
Ссылка на главную страницу
Обычно ссылку на главной странице на саму себя не делают, чтобы не сбивать пользователей с толку. При этом на остальных страницах такая ссылка есть и она ставится на заголовок сайта. Пусть файл с главной страницей называется index.shtml, тогда нам надо определить, не совпадает ли имя открытого документа с этим и в зависимости от совпадения решаем, делать или нет ссылку. В примере 1 переменная DOCUMENT_URI сравнивается со значением /index.shtml и если оно не равно, иными словами, у нас любая страница кроме главной, тогда картинку делаем ссылкой.
Пример 1. Главная страница
Определение Internet Explorer
Пример 2. Определение IE
Создание шаблона
Все страницы сайта строятся, как правило, по одному шаблону и имеют некоторые повторяющиеся элементы вроде шапки и подвала. Чтобы не повторять их в каждом HTML-документе, их код можно вынести в отдельный файл и подключать одной строкой. Это позволяет не редактировать десятки файлов, а ограничиться всего одним.
Предположим, что типовой документ на сайте имеет структуру, показанную в примере 3. Различаться будет только содержимое , а всё остальное кочует из файла в файл.
Пример 3. Типовой файл
Чтобы не писать каждый раз одно и то же, вынесем похожие фрагменты в текстовые файлы и поместим их в папку assets. Тогда шаблон будет иметь вид, как показано в примере 4.
Пример 4. Шаблон
Обратите внимание, что файлs header.shtml и aside.shtml имеют расширение .shtml, для того, чтобы в них подключать директивы SSI.
Выделение текущего пункта меню
Аналогично главной странице пункт меню, который указывает на текущую страницу не делают ссылкой, а вставляют как рядовой текст, выделяя его с помощью стилей. В примере 5 показано содержимое файла aside.shtml, который используется в предыдущем примере.
Пример 5. Меню для сайта
На сайте сделано четыре файла с именами 1.shtml, 2.shtml, 3.shtml и 4.shtml. Чтобы SSI различал, какому пункту меню какой файл соответствует, используется переменная DOCUMENT_URI. Если её значение совпадает с именем открытого документа, то ссылка не добавляется.
Версия для печати
Пример 6. Версия для печати
С помощью переменной QUERY_STRING идёт проверка, есть ли в адресе ключевое слово print или нет. Если оно присутствует, тогда выводится одна версия страницы, если этого ключевого слова нет, тогда отображается другая версия страницы со ссылкой.
В этой статье мы расскажем, как создается ссылка в HTML с одной страницы на другую. Также кратко опишем различные типы гиперссылок.
Гипертекстовые ссылки могут использовать абсолютные, а также относительные URL-адреса и адреса относительно корня сайта.
Ссылка в HTML-абсолютные адреса
Это относится к случаю, когда URL-адрес содержит полный путь. Например:
Ссылка в HTML- относительные адреса
Ссылка в HTML — адреса относительно корня сайта
Это относится к URL-адресу ссылки HTML , в котором определен путь относительно корня домена.
Прямой слэш означает корень домена. Независимо от того, где находится ваш файл, всегда можно использовать этот метод для определения пути, даже если вы не знаете, каким будет имя домена ( при условии, что вы знаете полный путь от корня ).
Ссылка в HTML — цели
Мы с Вами подошли к той теме, которая требует максимальное количество вашего внимания, поняв эту тему, вы без проблем сможете выстроить структуру будущего сайта.
Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания.
Если вы активно пользуетесь интернет, то, думаю, вы замечали, что ссылки могут ссылаться на страницу / файл, который находится совершенно на другом сервере, давайте рассмотрим от чего это зависит.
В HTML гиперссылки (или просто "ссылки") определяются тегом (HTML Anchor Element).
В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.
Мы уже с Вами неоднократно говорили, что некоторые теги используются только совместно с атрибутами (бесполезны сами по себе) и это снова тот случай. Атрибут href (аббревиатура от hyper reference) - это основной атрибут тега , указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.
Относительные и абсолютные пути ссылок
Многие, кто начинают только изучать язык гипертекстовой разметки, сталкиваются с трудностями при указании путей к файлам, ведь не всегда страница или даже изображение будет в той же папке, что и текущий HTML документ. Давайте детально разберем как правильно задавать пути, научимся отличать относительные пути от абсолютных и рассмотрим отличия корня веб-сервера от корня вашего диска.
В приведенном в начале статьи примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу. Ниже приведены примеры указания абсолютных путей:
Обращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).
Если страница или файл на который ссылаются расположен на том же сервере, что и страница с которой ссылаются, то, как правило используются относительные адреса ссылок. Основная особенность относительных ссылок заключается в том, что они размещаются относительно корня сайта или относительно текущего HTML документа.
Путь относительно текущего документа
Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла, этим методом вы будете пользоваться и в практическом задании.
В примерах, когда мы размещали на нашей странице изображения, то мы указывали путь, как раз относительно текущего документа. Давайте рассмотрим аналогичный пример, но также укажем ссылку на html документ, расположенный в той же папке, что и сам файл:
Пример подключения файлов:
Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:
Обратите внимание, как мы указываем путь к нашим файлам - мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).
Ну и заключительный пример, в котором нам необходимо подключить к нашей странице изображение, которое находится в каталоге, который расположен на два уровня выше текущей страницы и необходимо добавить ссылку, которая находится на один уровень выше текущей страницы:
Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы ../ это позволит подняться на один уровень вверх. Вы можете, используя символы ../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.
Путь относительно корня сайта
Хочу сразу обратить ваше внимание, чтобы путь относительно корня сайта работал на локальном компьютере, то у вас должна быть установлена программная среда, которая позволяет эммулировать веб-сервер.
Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой. Мы не будем использовать эти программные среды для практических занятий (можете установить после обучения HTML / CSS).
Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:
Как и при использовании абсолютных адесов, способ задавать путь относительно корня сайта довольно-таки прост. Разница заключается лишь в том, что у нас отпадает необходимость указывать имя домена, ну и соответственно относительные пути используются только в рамках одного сервера.
Обратите внимание, что необходимо указывать прямой слэш в начале пути, это сообщает браузеру пользователя, что путь начинается с корневого каталога.
Достаточно указать в адресе один прямой слэш, чтобы с любой страницы сайта перейти на главную страницу сайта ( href = "/" ).
Атрибут target
Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:
Ниже представлены все значения этого атрибута:
| Атрибут | Значение | _blank | Загружает страницу в новое окно браузера. |
|---|---|
| _self | Загружает страницу в текущее окно. Это значение по умолчанию. |
| _parent | Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self. |
| _top | Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self. |
| framename | Открывает ссылку в указанном фрейме. |
Работа с фреймами будет рассмотрена позднее в статье учебника "HTML фреймы".
Атрибут mailto
Использование атрибута "mailto" в HTML документе позволяет создать ссылку для отправки письма:
Для того, чтобы ссылки mailto корректно работали необходимо чтобы на компьютере или в браузере посетителя был настроен почтовый / веб клиент по умолчанию, иначе при клике на ссылку ничего не произойдет.
В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:
- subject —тема письма.
- cc —копия письма.
- bcc —скрытая копия письма.
- body —тело письма.
Допустимо указывать несколько адресов (либо не указывать вовсе):
Изображение как ссылка
Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами :
При этом при клике на картинку будет осуществлён переход по указанной ссылке:
Размещение файлов на сайте для скачивания
С выходом HTML 5 тег обзавелся таким новым атрибутом как download , он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.
Обращаю Ваше внимание, что к сожалению, в настоящее время еще не все браузеры поддерживают применение этого атрибута:
| Тег | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| download | 14.0 | 20.0 | 15.0 | Нет | Нет | 13.0 |
Если использовать только HTML, то единственный вариант, который позволит посетителям скачать, а не открыть, с вашего сайта, например, текстовый файл, это поместить его предварительно в архив (заархивировать файл). Алгоритм работы любого браузера такой, что если он не может открыть файл (не поддерживает формат), то он предлагает скачать / скачивает файл.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
- Используя полученные знания и не изменяя структуры архива составьте следующую HTML страницу (index.html в архиве), которая содержит четыре ссылки:
Практическое задание № 4.
Первая ссылка "Информация о примере" должна вести на родительскую страницу (на уровень выше), т.е. при клике вы должны перейти на эту страницу:
Вторая и третяя ссылка представляют из себя ссылки-изображения, при клике на них происходит переход на страницы, расположенные в дочерних каталогах (html и css). Сделайте так, чтобы при клике на изображение CSS страница открывалась в новом окне. Изображения находятся в каталоге images.
Внутри этих страниц должно быть размещено аналогичное изображение, при клике на которое должен быть осуществлен переход обратно на главную страницу:
Заключительная задача заключается в том, чтобы при клике на четвертую ссылку запускалось скачивание архива, расположенного в дочернем каталоге download
- Результат примера вы можете скачать после выполнения задач для самопроверки:
Простые ссылки
Чтобы создать ссылку, нужно указать, какой элемент веб-страницы ею будет являться и по какому адресу она будет вести.
В языке HTML для создания ссылок используется тег и его атрибуты.
Пойдём от простого к сложному и для начала научимся добавлять в HTML-документ элементарные ссылки. Нам понадобятся следующие элементы языка:
— тег создания ссылки. Внутри него содержится отображающийся на экране текст, на который пользователь должен будет нажать, чтобы перейти по заданному адресу.
href — атрибут тега , значением которого и будет адрес ссылки. Ссылаетесь ли вы на сайт, веб-страницу или файл — не важно, отличаться будет только значение этого атрибута.
Теперь рассмотрим строку HTML-кода:
Читайте также: