Как сделать на сайте переход на страницу

Ссылки в HTML

Как сделать на сайте переход на страницу

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой…и не дают уснуть вовремя

Источник: https://vertex-academy.com/tutorials/ru/ssylki/

Работа со страницами и меню в Конструкторе REG.RU

Как сделать на сайте переход на страницу

  1. 1.

    Кликните на  и в выпадающем меню выберите Редактировать:

  2. 2.

    Нажмите на Новый элемент:

  3. 3.

    Введите название новой страницы, выберите тип Страница. Выберите в поле Копировать шаблон ту страницу, расположение элементов которой будет скопировано для новой страницы.

    Также вы можете очистить содержимое верхнего колонтитула (шапки страницы), тела страницы и нижнего колонтитула (подвала страницы), отметив соответствующие пункты.

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

    Нажмите Применить:

    Также вы можете создать новый пункт меню в виде ссылки.

    Введите название новой страницы, выберите тип Ссылка. Выберите тип связи:

    • Внутренняя ссылка на — выберите, на какую страницу сайта будет осуществляться переход по ссылке;
    • Внешняя ссылка — введите ссылку другого сайта, на который будет осуществляться переход;
    • Якорь для — ссылка в виде якоря на один из модулей;
    • Пустой — оставить страницу без привязки.

    Нажмите Применить:

  4. 4.

    Чтобы создать страницу, нажмите Применить:

Готово! Вы создали новую страницу сайта.

Теперь созданные страницы появятся в меню сайта:

Как редактировать страницу

Для редактирования любой страницы на сайте:

  1. 1.

    Кликните на  и в выпадающем меню выберите Редактировать:

  2. 2.

    Выберите нужную страницу. Поставьте галочки напротив нужных настроек:

    • Открыть в новом окне — настроить открытие страницы в новом окне по умолчанию;
    • Не показывать этот элемент в меню — страница не будет отображаться в меню;
    • Пункт меню по умолчанию — страница будет открываться при первой загрузке сайта;
    • Показывать всплывающее окно при открытии страницы — страница будет открываться во всплывающем окне.

    Нажмите Применить:

Как изменить имя страницы

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

  1. 1.

    Кликните на  и в выпадающем меню выберите Редактировать:

  2. 2.

    Кликните по названию страницы, название которой хотите изменить. Переименуйте её (например, страница здесь переименована в Дочерняя). Нажмите Применить:

Для того чтобы новое имя страницы отображалось в браузере, вам надо добавить метатеги.

Готово! Вы изменили имя страницы.

Как удалить страницу

  1. 1.

    Кликните на  и в выпадающем меню выберите Редактировать:

  2. 2.

    Выберите страницу, которую хотите удалить. Нажмите на значок Крестик и нажмите Применить:

Готово! Вы удалили страницу.

Как переместить пункты меню

Вы можете поменять порядок пунктов в меню на сайте:

  1. 1.

    Кликните на  и в выпадающем меню выберите Редактировать:

  2. 2.

    Зажмите пункт меню, который вы хотите перенести, и перенесите в нужное место:

  3. 3.

    Проверьте результат и нажмите Применить:

Готово! Вы переместили пункт меню.

Как создать подменю

  1. 1.

    Кликните на  и в выпадающем меню выберите Редактировать:

  2. 2.

    Поместите один заголовок на другой:

  3. 3.

    Проверьте результат и нажмите Применить. В примере страница Контакты находится в подменю страницы :

  4. 4.

    Чтобы посмотреть, как выглядит выпадающее меню, нажмите Просмотр:

  5. 5.

    В примере при наведении курсора на страницу в подменю показывается страница Контакты:

  6. 6.

    Закройте предпросмотр, нажав Закрыть.

    Обратите внимание: Если удалить модуль меню со всех страниц, пропадут и сами страницы, которые вы в нём создали.

Готово! Вы создали подменю.

инструкция

Конструктор сайтов REG.RU

Готовый сайт с почтой совершенно бесплатно! Попробуйте прямо сейчас!

Подробнее Помогла ли вам статья?

Источник: https://www.REG.ru/support/sozdanie-sajtov/konstruktor-saytov-regru/redaktirovanie-sajta-v-konstruktore-regru/kak-sozdat-novuju-stranicu-v-konstruktore-regru

Оформление ссылок в html – внешних и внутренних

Как сделать на сайте переход на страницу

22 ноября 2016

Цель урока: знакомство с оформлением ссылок в html, абсолютные ссылки и локальные ссылки.

Внутренние ссылки в HTML (якорная ссылка)

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

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

Рассмотрим механизм создания внутренних ссылок в HTML. Он состоит из двух шагов:

  1. Создание закладок или якорей (на которые необходимо переходить по ссылкам):
  2. 1 способ:

    Текст для закладки

    Текст для закладки

    В качестве якоря служит тег a с атрибутом name — название якоря (закладки)

    2 способ:

    Текст для закладки

    Текст для закладки

    Для обозначения якоря используется атрибут id, добавляемый к тегу (теги могут быть практически любые: div, span, p, h…)

  3. Создание ссылок на якоря (на закладки):
  4. Текст ссылки

    Текст ссылки

    Знак шарп или решетка (#) ставится обязательно перед названием якоря

Пример: на веб-странице, состоящей из трех глав реферата создать оглавление на 3 главы

Решение:

12345678910111213Глава 1Глава 2Глава 1. “Язык HTML – история”Текст главы…Глава 2. “Структура HTML-страницы”Текст главы…
  1. Глава 1
  2. Глава 2

Глава 1. “Язык HTML – история”

Как сделать на сайте переход на страницу

Текст главы

Глава 2. “Структура HTML-страницы”

Как сделать на сайте переход на страницу

Текст главы

Лабораторная работа №0: Скопируйте текст кода, расположенный ниже. Создайте новый документ в блокноте (notepad++), вставьте код на созданную страницу и сохраните в формате html. Выполните задание.  

Задание:

1. Измените внешнюю ссылку на внутреннюю: измените значение атрибута href на “#footer”, а текст самой ссылки — с «Фото кота» на «Перейти вниз».

2. Удалите атрибут target=”_blank” из ссылки, так как он служит для того, чтобы открывать ссылку в новой вкладке или в новом окне.

3. Добавьте атрибут id=”footer” для элемента внизу страницы.  

Код:

CatPhotoApp Фото кота Ко́шка, или дома́шняя ко́шка (лат. Félis silvéstris cátus), — домашнее животное, одно из наиболее популярных[1] (наряду с собакой) «животных-компаньонов»[2][3][4]. С точки зрения научной систематики, домашняя кошка — млекопитающее семейства кошачьих отряда хищных. Ранее домашнюю кошку нередко рассматривали как отдельный биологический вид. С точки зрения современной биологической систематики домашняя кошка (Felis silvestris catus) является подвидом лесной кошки (Felis silvestris). Являясь одиночным охотником на грызунов и других мелких животных, кошка — социальное животное, использующее для общения широкий диапазон звуковых сигналов, а также феромоны и движения тела. В настоящее время в мире насчитывается около 600 млн домашних кошек[8], выведено около 200 пород, от длинношёрстных (персидская кошка) до лишённых шерсти (сфинксы), признанных и зарегистрированных различными фелинологическими организациями. Copyright Сайт про котов и кошек

CatPhotoApp

Фото кота

Ко́шка, или дома́шняя ко́шка (лат. Félis silvéstris cátus), — домашнее животное, одно из наиболее популярных[1] (наряду с собакой) «животных-компаньонов»[2][3][4].

С точки зрения научной систематики, домашняя кошка — млекопитающее семейства кошачьих отряда хищных. Ранее домашнюю кошку нередко рассматривали как отдельный биологический вид. С точки зрения современной биологической систематики домашняя кошка (Felis silvestris catus) является подвидом лесной кошки (Felis silvestris).

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

В настоящее время в мире насчитывается около 600 млн домашних кошек[8], выведено около 200 пород, от длинношёрстных (персидская кошка) до лишённых шерсти (сфинксы), признанных и зарегистрированных различными фелинологическими организациями.

Copyright Сайт про котов и кошек

Источник: https://labs-org.ru/html-2/

Как сделать главную страницу сайта в html

Как сделать на сайте переход на страницу

страница на сайте является его отправной точкой и лицом всего блога.

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

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

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

В связи с этим, при создании блога важно сделать главную html страницу сайта с учетом следующих моментов:

  • дизайн, который побуждал бы посетителя воспользоваться предлагаемой услугой или сделать покупку. Внешний вид сайта должен быть спокойным, выполненным в мягких тонах, чтобы не раздражать посетителя. Желательно, чтобы он был запоминающимся;
  • сайт должен иметь запоминающееся название и не слишком броский логотип;
  • на главной странице должно быть меню сайта, состоящее из важных разделов с информацией об услугах и продукции, каталоге товаров, контактными данными, часто задаваемыми вопросами;
  • составляя кнопки с сылками следует проявить оригинальность и креативность, чтобы побудить посетителя к переходу по ним;
  • главное меню ресурса должно находиться на видном месте;
  • постарайтесь избежать захламляющих страницу повторений текста, расстановки восклицательных знаков, что сразу же заявит об отсутствии профессионализма;
  • строка поиска должна быть заметной;
  • чтобы не отвлекать и не раздражать пользователя на сайте должно быть минимум анимации;
  • не следует делать слишком яркой значимую информацию, так как пользователь может ее принять за рекламу, и естественно, обойдет ее стороной.

Как правильно создать главную

На какие моменты следует обратить внимание при ее создании:

  • выделение важных разделов сайта, которые будут служить отправной точкой к основным темам сайта;
  • на сайте должна быть реальная информация с конкретными примерами его содержания;
  • обновленные материалы главной страницы должны быть легкодоступными, чтобы пользователь мог легко найти те статьи, которые уже в архиве;
  • наличие блока «Поиск» на сайте – важная деталь любого веб сайта;
  • наличие раздела «О сайте» или «О компании» — один из способов предоставления полной информации для пользователей для того, чтобы вызвать у них доверие к вашему бизнесу;
  • заголовок (title), который будет виден поисковым системам, должен быть информативным. Не стоит его начинать такими фразами, как «Добро пожаловать» или «». Для пользователя заголовок должен быть привлекающим внимание;
  • важно также уделить внимание составлению description (описанию) страницы. В нем должна быть полная информация о компании. Здесь надо проявить немного креатива и придать описанию рекламный характер;
  • подбирая ключевые фразы (keywords) для главной страницы сайта необходимо следить за тем, чтобы они описывали ее содержание и не повторялись. Не стоит использовать ключи, которые отсутствуют на странице;
  • чтобы облегчить поиск по сайту информации, которая находится в глубине сайта, ссылки надо начинать с наиболее важных ключей;
  • использование значимой графики позволит заинтересовать посетителя. Если есть возможность показать на главной странице примеры своих трудов, то лучше сделать это.

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

Как сделать оригинальную ссылку в html на другую страницу

Можно в строке браузера выделить адрес блога, который выглядит так http://seitostroenie.ru или http://www.seitostroenie.ru и скопировать в буфер обмена.

Если надо сделать ссылкой рисунок или какую-то надпись, то в коде надо добавить следующую запись: 

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

Должна получиться следующая запись:.

Естественно, что ссылку надо поменять на адрес вашего сайта.
К надписи надо добавить: < /а >.Между символами “>.

Если в качестве ссылки надо использовать картинку, то вначале изображение загружают на сайт, а коде html пишут:

< img src = “ссылка на само изображение на сайте“ >.

Чтобы превратить картинку в ссылку можно написать следующий код:

< img src = “http://сайта/image1.jpg“ >< /a >.

Если надо, чтобы ссылка открывалась в новом окне, то к коду надо добавить:

target=_blank title=””

Получим:

< img src = “http://сайта/image1.jpg “>< /a >.

При наведении курсора на картинку появится надпись «».

Если ссылка должна быть подчеркнута и выделена цветом (сделаем текст черным, а подчеркивание – белым), то добавляем в код следующую запись:

Заменив “white”, “black” и “ другими словами можно получить текст ссылки, который больше подходит по стилю вашему ресурсу.

Важно: редактировать страницы с использованием перечисленных тегов можно только в html режиме!

И напоследок, пара полезных советов:

  1. Когда создаете гиперссылку не забывайте проверять ее работоспособность. Даже, на первый взгляд, самая несущественная неточность кода html может полностью поменять его смысловое значение.
  2. Загружая на сайт картинки следите, чтобы их названия состояли из английских символов. Можно использовать цифры.

Эта запись была размещена в Создание сайта автор admin постоянная ссылка.

Источник: http://seitostroenie.ru/kak-sdelat-html-stranicu.html

1.5. HTML-ссылки

Как сделать на сайте переход на страницу

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

Ссылки можно поделить на две категории:
ссылки на внешние ресурсы — создаются с помощью тега и используются для расширения возможностей текущего документа при обработке браузером;
гиперссылки — ссылки на другие ресурсы, которые пользователь может посетить или загрузить.

1. Структура ссылки

Гиперссылки создаются с помощью парного тега . Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.

Обязательным параметром тега является атрибут href, который задает URl-адрес веб-страницы.

указатель ссылки

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

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

метод доступа://имя сервера:порт/путь

Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:

file обеспечивает чтение файла с локального диска:

file:/gallery/pictures/summer.html

http предоставляет доступ к веб-странице по протоколу HTTP:

http://site.ru/

https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)

https://site.ru/

ftp осуществляет запрос к FTP-серверу на получение файла:

ftp://pgu/directory/library

mailto запускает сеанс почтовой связи с указанным адресатом и хостом:

mailto: nika@gmail.com

Имя сервера описывает полное имя машины в сети, например, site.ru. Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.

Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:21 — FTP23 — Telnet70 — Gopher

80 — HTTP

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

2. Абсолютный и относительный путь

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

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

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

Рис. 1. Пример структуры папок

2.1. Абсолютный путь

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:1) протокол, например, http (опционально);2) домен (доменное имя или IP-адрес компьютера);3) папка (имя папки, указывающей путь к файлу);

4) файл (имя файла).

Существует два вида записи абсолютного пути — с указанием протокола и без него:

http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Если файл находится в корневой папке, то путь к файлу будет следующим:

http://site.ru/index.html

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

http://site.ru/

Обычно в качестве индексного файла выступает документ с именем index.html. Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

2.2. Относительный путь

Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http://, он выполняет поиск указанного документа на том же сервере.

Относительный путь содержит следующие компоненты:1) папка (имя папки, указывающей путь к файлу);

2) файл (имя файла).

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

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

3. Якоря

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

Это оказывается очень удобным в случае, когда на странице слишком много текста.

Внутренние ссылки также создаются при помощи тега с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак #.

Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:

Времена года

Как сделать на сайте переход на страницу
Лето Осень Зима Весна

Если нужно сделать ссылку с одной страницы сайта на определенный раздел другой страницы, то необходимо задать id для этого раздела страницы, а затем добавить его к абсолютному адресу ссылки:

color color

4. Как сделать изображение-ссылку

Чтобы сделать кликабельное изображение, необходимо поместить элемент внутрь тега . Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target=”_blank” для ссылки.

Рис. 2. Изображение-ссылка

5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты

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

ссылка на телефонный номер +7 (495) 123-45-67 ссылка на адрес электронной почты example@mail.ru ссылка на скайп (позвонить) Skype ссылка на скайп (открыть чат) Skype ссылка на скайп (добавить в список контактов) Skype ссылка на скайп (отправить файл) Skype

6. Атрибуты ссылок

Элемент поддерживает глобальные атрибуты и собственные.

Таблица 1. Атрибуты тегаАтрибутОписание, принимаемое значение
downloadДополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения:

Загрузить отчет за Февраль 2014

hrefЗначением атрибута является URL-адрес документа, на который указывается ссылка.
hreflangОпределяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка, например:

Anysite

mediaОпределяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
pingОтслеживает URL-адреса ресурсов, по которым переходил пользователь.
relДополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
targetУказывает на то, в каком окне должен открываться документ, к которому ведет ссылка. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
typeУказывает MIME-тип файлов ссылки, т.е. расширение файла. На данный момент носит больше справочную информацию.

Источник: https://html5book.ru/hyperlinks-in-html/

Очень просто
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: