Соединяем 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 ставить ссылку на другой страницу и т.д.).
Вы не уточнили задачи (темы страниц, т.е. конкурентности ситуации в выдаче).
Типовая — иерархическая структура:
Главная —> раздел —> страница
(и обратно: страница —> раздел —> Главная
или: страница —> Главная)
тогда — чем меньше кликов с морды до страницы, тем она получается важнее (более тяжёлые запросы — на более важную легче).
Создаём свой первый сайт на HTML
Урок №9
Создаём свой сайт из трёх страниц
В этом уроке, мы создадим сайт состоящий из трёх страниц. Но перед этим, для вашего же удобства, вам нужно создать папку на Рабочем столе , папку можете назвать Мой сайт .
Закиньте в папку Мой сайт , все файлы которые у нас уже есть, а именно два HTML-файла:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
и две фотографии:
irbis.jpg
polyarnyi-volk.jpg
Сделаем третью страницу, она будет посвящена полярной сове.
Данные третьей страницы
Создайте в папке Мой сайт HTML-файл:
polyarnaya-sova.html
Название страницы <title> </title> , сделайте:
Страница о полярной сове
Заголовок статьи <h1> </h1> :
Полярная сова
Статья состоящая из двух абзацев <p> </p> :
В итоге, вы должны получить следующую страницу.
Соединяем ссылками страницы сайта
На данный момент у нас есть три HTML-файла, в которых находятся статьи описывающие различных северных животных:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
polyarnaya-sova.html — Статья о полярной сове .
Теперь нам нужно соединить их ссылками, чтобы получился сайт. Ссылки делать вы уже научились, поэтому я вам дам лишь HTML-код, который нужно разместить перед закрывающим тегом </body> , в каждом из трёх HTML-документов:
В итоге, ваш сайт должен выглядеть следующим образом. Нажимая по ссылкам, вы будете попадать на страницы: снежного барса, полярного волка и полярной совы.
<!DOCTYPE html>
Как вы уже знаете, каждый HTML-документ начинается с тега <html> , данное объяснение было для новичков. На самом деле, каждый HTML-документ, должен начинаться со строки <!DOCTYPE html> , а уже под ним ставится тег <html> . Строка <!DOCTYPE html> даёт понять браузеру, что язык HTML используемый в документе, ориентирован на последнюю, пятую версию языка, т.е. на HTML5.
Конечный HTML-документ, например файла index.html , в итоге должен выглядеть следующим образом:
Всегда добавляйте строку <!DOCTYPE html> , в начале каждого HTML-документа.
Регистрация домена и хостинг
Итак, у вас в папке Мой сайт хранятся три HTML-файла:
index.html
polarnayi-volk.html
polarnaya-sova.html
и три фотографии:
irbis.jpg
polyarnyi-volk.jpg
polyarnaya-sova.jpg
Для того чтобы разместить всё это в интернете, нужно сначала зарегистрировать себе имя сайта (домен) , наиболее качественная компания по регистрации доменов, на данный момент это Вебнеймс :
webnames.ru — компания регистрации доменов. Обычно чтобы зарегистрировать домен в зоне .RU , нужно платить около 100 рублей, в первый в год и около 500р в последующие года (оплата производится 1 раз в год).
После регистрации имени сайта, нужно купить себе хостинг, наиболее качественная компания на данный момент это Бегет :
Beget.ru — компания предоставляющая хостинг для сайтов. В компании Бегет, можно разместить сайт бесплатно или платно от 100 до 385 рублей в месяц. Разместить сайт бесплатно!
Хостинг — это размещение сайта в интернете.
Когда вы разместите сайт в интернете, то при наборе имени сайта, например gabdrahimov.ru , первым откроется файл index.html Это своего рода главная страница сайта, с которой посетитель начинает путешествие по вашему ресурсу.
В этом разделе, я лишь поверхностно описал что нужно сделать, чтобы разместить сайт в интернете. Более подробней о том, как это сделать, я опишу чуть позже.
В принципе на этом введение в создание сайтов закончено, вам осталось лишь прочитать последний урок, начального цикла учебника 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>