Соединяем 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
Урок №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>
Связывание HTML документов между собой
Часто HTML-документы связаны между собой, то есть имеют ссылки друг на друга. Ссылки могут быть как абсолютные, так и относительные. И те и другие имеют недостатки. Абсолютные ссылки могут быть слишком громоздкими и переставать работать, если перемещен младший по иерархии документ. Относительные ссылки легче вводить и обновлять, но и эта связь обрывается, если перемещен старший по иерархии документ. Оба вида связей могут нарушиться при переносе документа с одного компьютера на другой.
Часто случается, что пользователь загрузил на свою машину большой документ и отключился от сети для его подробного изучения. Все ссылки в локальной копии документа перестанут работать. Для их "реанимации" придется вновь обратиться к оригиналу документа, находящемуся на удаленном компьютере.
К счастью, разработчики HTML предусмотрели эту проблему и добавили два тега, <BASE> и <LINK>, которые включаются в заголовок для того, чтобы связь между документами не нарушалась.
Тег <BASE> служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег <BASE> работает аналогично команде path MS-DOS, что позволяет программе просмотра определить ссылку на искомый документ, даже если она находится в старшем по иерархии документе, расположенном на другом компьютере.
Тег <BASE> имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа. Ниже показан пример использования тега <BASE>.
<TITLE>Указание базового адреса</TITLE>
Тег <BASE> указывает браузеру, где искать файл. В случае, если пользователь работает с локальной копией файла и его машина не отключена от сети, изображение пиктограммы News будет найдено и показано в окне браузера.
Даже если тег <BASE> позволяет найти файл, остается открытым вопрос о взаимоотношениях документов. Важность этих отношений возрастает пропорционально росту сложности ваших документов. Для того чтобы поддерживать логическую связь между ними, в HTML введен тег <LINK>.
Тег <LINK> указывает на связь документа, содержащего данный тег и другого документа или объекта. Он состоит из URL-адреса и параметров, конкретизирующих отношения документов. Заголовок документа может содержать любое количество тегов <LINK>. Табл. 1.1 описывает параметры тега <LINK> и их функции.
Параметр
Назначение
Приведем примеры тега <LINK> с параметрами:
Первая строка указывает на связь с файлом оглавления документа (toc.html — table of contents) с прямым отношением contents. Вторая строка описывает связь с URL-адресом автора документа (с обратным отношением made).
Между документами может существовать множество различных отношений. Примеры других значений параметра REL:bookmark, copyright, glossary, help, home, index, toc, next, previous. Параметр REV может также принимать значения: author, editor, publisher, owner.