Главная страница » Как соединить страницы в html

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

  • автор:

Соединяем html-страницы между собой

Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги <a> </a>. Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах <a> </a> произойдет переход. Куда? На страницу, которая указана в атрибуте href.

Рассмотрим наш блок меню:

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

Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.

Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: <a href=»kon/kontact.html»> (все папки указываются через / ).

Если вы захотите сделать ссылку на html-страницу, которая не лежит на вашем сайте, то придется указать ее абсолютный адрес, например,
<a href=»http://www.mysite.ru/kon/kontact.html»>

Нам осталось на разных html-страницах разместить разный контент.

Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html — будут просто фотографии шаблонов, а на странице kontact.html — адрес нашей электронной почты.

Начнем со страницы index.html. Откройте ее в блокноте.

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

Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.

Откройте ее в блокноте и вместо слов «Здесь — контент» вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег <td> добавьте атрибут align=»center»

Шаблоны

Здесь собраны все шаблоны сайтов.

Теги <p></p> обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).

Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:

Наши контакты

Пишите нам по адресу: admin@mysite.ru

Пишите нам по адресу: admin@mysite.ru

Оставьте тот, который больше понравится (с тегами <address> </address>или без них).

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

Наверно, у вас возникло два вопроса:

1. Откуда брать картинки для сайта (все эти шапки и меню)?

Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop

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

Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии — CSS, Java script, PHP и т.д.

На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.

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

Вкладки (страницы) на одной странице на html/css с помощью :target

Рассмотрим один из вариантов создания нескольких страниц или вкладок (в том числе вложенных) на html и css без скриптов, списков и таблиц, на одной html странице. Только дивы, только хардкор. Подходит для небольших портфолио и элементов интерфейса. Не будьте буратинами используя это везде подряд.
Суть:

Современные браузеры загружают содержимое только если блок виден, поэтому костыли для загрузки контента (картинок) отменяются.
Коротко: ссылка на блок делает его видимым, при том что по-умолчанию они невидимы (поэтому обратно display:none когда выделяем другие); сделать невидимым первый блок если выделен _не он_, так как по-умолчанию он виден. Собственно, это всё. Теперь реализация.

HTML. Разделим блок на 3 страницы и один на 3 вкладки, для наглядности:

Перейдём к разметке, здесь всё внезапно очень просто (но не очевидно) и валидно, никаких нестандартных изощрений:

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

как соединить страницы сайта?

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

Вы не уточнили задачи (темы страниц, т.е. конкурентности ситуации в выдаче).

Типовая — иерархическая структура:

Главная —> раздел —> страница

(и обратно: страница —> раздел —> Главная

или: страница —> Главная)

тогда — чем меньше кликов с морды до страницы, тем она получается важнее (более тяжёлые запросы — на более важную легче).

Как правильно соединить страницы?

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

Давайте разберемся со всеми этими непонятками.

Сначала разберем последовательность страниц. Как правило, все начинается с главной страницы. А потом идут разделы главной страницы, а потом все остальные. Получается у нас вот что:

Вперед: главная —раздел—страница.

Назад: страница—раздел—главная.

Где: главная-1 уровень(морда), раздел-2 уровень, страница-3 уровень.

1 уровень – это тяжелые страницы, а чем тяжелее страница, тем больше у него вес.

2 уровень – это страницы со средним весом.

3 уровень – это страницы с легким весом, следовательно, у них веса меньше, чем у главной страницы и его раздела.

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

Вот такую последовательность страниц нужно учесть и соблюдать при сайтостроении.

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

Как же нам соединить их ссылками, спросите. Все просто.

Допустим, что URL вашей главной страницы http://www.glavnaya.html , а раздел главной страницы http://www.glavnaya/razdel/index.html , следовательно, страница третьего уровня будет http://www.glavnaya/razdel/stranica/index.html

Чтобы соединить их между собой используем тег <a href=«ссылка»>описание ссылки</a>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *