Соединяем html-страницы между собой
Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги . Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах произойдет переход. Куда? На страницу, которая указана в атрибуте href.
Нам необходимо, чтобы при нажатии на слово «главная» открывалась страница index.html, при клике по «шаблоны» — html-страница pattern.html, а при клике по «контакты» — html-страница contact.html. Внесем соответствующие изменения в эту часть кода:
Обратите внимание, наши ссылки стали синего цвета — это цвет ссылок по умолчанию. Но мы же помещали их в теги ? Это тот самый случай, когда порядок вложенности тегов играет большую роль. Чтобы ссылки снова стали белыми, следует теги поместить в теги , и сделать это придется у всех трех ссылок.
Поменяйте код на вышеприведенный во всех трех html-страницах. Посмотрите на них в браузере, пощелкайте по ссылкам и убедитесь, что они стали белыми и в адресной строке с каждым переходом меняется адрес html-страницы.
Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.
Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: (все папки указываются через / ).
Если вы захотите сделать ссылку на html-страницу, которая не лежит на вашем сайте, то придется указать ее абсолютный адрес, например,
Нам осталось на разных html-страницах разместить разный контент.
Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html — будут просто фотографии шаблонов, а на странице kontact.html — адрес нашей электронной почты.
Начнем со страницы index.html. Откройте ее в блокноте.
Найдите в коде страницы ту часть кода, которая отвечает за контент. Сейчас там написано следующее:
Так как у нас здесь будут фотографии шаблонов и их описания, то удобнее всего поместить фотографии в одном столбце, а описания в другом. Для примера, возьмем два шаблона, а значит, наша таблица будет состоять из 2 строк и 2 столбцов (вы можете сделать сколько угодно). Итак, изменим эту часть следующим образом:
Теперь в первый столбец вставим фото шаблонов, а во второй — их описания. Для вставки фотографий в HTML существует тег , он одиночный, т.е. его не нужно закрывать. Для того, чтобы указать какую именно картинку вставить у этого тега есть параметр src, в качестве значения которого указывается путь к картинке.
Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.
Откройте ее в блокноте и вместо слов «Здесь — контент» вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег добавьте атрибут align=»center»
ШаблоныЗдесь собраны все шаблоны сайтов. |
Теги обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).
Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:
Наши контактыПишите нам по адресу: admin@mysite.ru Пишите нам по адресу: admin@mysite.ru |
Оставьте тот, который больше понравится (с тегами или без них).
Вот собственно и все. Пощелкайте по ссылкам и убедитесь, что все работает. Аналогичным образом вы можете сделать сколько угодно html-страниц и наполнить их разнообразным контентом. Рабочий пример можно посмотреть здесь.
Наверно, у вас возникло два вопроса:
1. Откуда брать картинки для сайта (все эти шапки и меню)?
Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop
Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.
Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделеУроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии — CSS, Java script, PHP и т.д.
На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.
Соединяем html-страницы между собой
Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги . Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах произойдет переход. Куда? На страницу, которая указана в атрибуте href.
Нам необходимо, чтобы при нажатии на слово «главная» открывалась страница index.html, при клике по «шаблоны» — html-страница pattern.html, а при клике по «контакты» — html-страница contact.html. Внесем соответствующие изменения в эту часть кода:
Обратите внимание, наши ссылки стали синего цвета — это цвет ссылок по умолчанию. Но мы же помещали их в теги ? Это тот самый случай, когда порядок вложенности тегов играет большую роль. Чтобы ссылки снова стали белыми, следует теги поместить в теги , и сделать это придется у всех трех ссылок.
Поменяйте код на вышеприведенный во всех трех html-страницах. Посмотрите на них в браузере, пощелкайте по ссылкам и убедитесь, что они стали белыми и в адресной строке с каждым переходом меняется адрес html-страницы.
Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.
Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: (все папки указываются через / ).
Если вы захотите сделать ссылку на html-страницу, которая не лежит на вашем сайте, то придется указать ее абсолютный адрес, например,
Нам осталось на разных html-страницах разместить разный контент.
Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html — будут просто фотографии шаблонов, а на странице kontact.html — адрес нашей электронной почты.
Начнем со страницы index.html. Откройте ее в блокноте.
Найдите в коде страницы ту часть кода, которая отвечает за контент. Сейчас там написано следующее:
Так как у нас здесь будут фотографии шаблонов и их описания, то удобнее всего поместить фотографии в одном столбце, а описания в другом. Для примера, возьмем два шаблона, а значит, наша таблица будет состоять из 2 строк и 2 столбцов (вы можете сделать сколько угодно). Итак, изменим эту часть следующим образом:
Теперь в первый столбец вставим фото шаблонов, а во второй — их описания. Для вставки фотографий в HTML существует тег , он одиночный, т.е. его не нужно закрывать. Для того, чтобы указать какую именно картинку вставить у этого тега есть параметр src, в качестве значения которого указывается путь к картинке.
Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.
Откройте ее в блокноте и вместо слов «Здесь — контент» вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег добавьте атрибут align=»center»
Шаблоны
Здесь собраны все шаблоны сайтов.
Теги обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).
Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:
Наши контакты
Пишите нам по адресу: admin@mysite.ru
Пишите нам по адресу: admin@mysite.ru
Оставьте тот, который больше понравится (с тегами или без них).
Вот собственно и все. Пощелкайте по ссылкам и убедитесь, что все работает. Аналогичным образом вы можете сделать сколько угодно html-страниц и наполнить их разнообразным контентом. Рабочий пример можно посмотреть здесь.
Наверно, у вас возникло два вопроса:
1. Откуда брать картинки для сайта (все эти шапки и меню)?
Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop
Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.
Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии — CSS, Java script, PHP и т.д.
На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
Как связать страницы в Html при написании многостраничного сайта?
Написала одностраниный сайт, а как добавить еще страницы не помню. Напишите пожалуйста подробно.Нужно добавить страниц 10.
Доброго времени суток. Сделайте меню.
Статичные HTML-страницы
Если Вы используете статичный HTML, просто составьте список страниц и сделайте конструкцию, подобную этой:
Здесь, думаю, можно ненадолго остановиться. Тег ul — маркированный список:
a — ссылка. Атрибут href — куда она ведёт. Также могут быть target (как открыть: _self — в родительском окне, _blank — в новом окне и так далее, title (текст для всплывающей подсказки). Внутри тега — выводимый текст.
Своя собственная CMS
Если Вы используете свою собственную CMS с БД MySQL, создайте в базе данных таблицу menu(`itemid` PRIMARY, `text`, `title`, `url`). Столбцы:
- itemid — уникальный id пункта меню, его порядковый номер
- text — название (что писать на кнопке)
- title — текст всплывающей подсказки
- url — ссылка, на которую ведёт пункт меню
В php-файл с функциями вставьте такой код (рассчитывается, что подключение к БД уже установлено):
$query = mysql_query(«SELECT * FROM `menu`», $DB);
$qrows = mysql_num_rows($quer y);
В нужном месте выведите меню:
Какая-нибудь система управления контентом
Если же Вы используете какую-либо CMS, читайте хелпы и документацию. Я, ничего о ней не зная, помочь, увы, не смогу.
Вернёмся в эпоху статического HTML.
Насколько я понимаю, требуется добавить к одной-единственной странице ещё несколько страниц. А базой данных там и не пахнет. Следовательно, можно обойтись прямой адресацией. То есть придумать для каждой новой страницы понятное хотя бы вам имя (у основной оно наверняка стандартное — index.html) и прописать в каждой из них ссылки на остальные. С помощью тега :
Где «вид ссылки» — это текст, коли вы желаете видеть текст, либо тег , который покажет картинку, которую и нужно будет нажать для перехода по ссылке.
Фактически у вас появится список всех ссылок на все заготовленные страницы. Можно копипастить этот блок, удаляя ту ссылку, что ведёт на эту самую страницу, которая отображается. Как вы решите оформить этот блок, простым ненумерованным списком, как в примере danilasar, строкой-меню (на самом деле — таблицей с невидимым бордюром и заданным размером ячеек) или ещё как, и где в вёрстке (у вас же единый дизайн всего сайта, да?) подготовите для него место — дело десятое.
Если вы для создания своего одностраничника пользовались каким-нибудь конструктором типа ucoz, в админке нужно создать те самые страницы и активировать модуль меню, куда и добавить все ссылки. В конструкторах такие вещи интуитивно понятны, потому что интерфейс делается по стандартам, общих для всего современного ПО. А уж код при этом прописывается автоматически.