Katcerina.ru

Деньги в сети
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Сайт из двух страниц

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

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

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

главная ||шаблоны || контакты

Поменяйте код на вышеприведенный во всех трех 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. Откройте ее в блокноте.

Читать еще:  Как создать динамический сайт

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

Здесь — контент
Здесь фотоЗдесь описание
Здесь фотоЗдесь описание
Перед вами уникальный трёх-колоночный шаблон на бизнес тематику выполненный в строгом и продуманном стиле в слиянии белого и серого цветов. В правой части страницы располагается удобное двух-колоночное главное меню. В данной теме имеется возможность размещения видео роликов и рекламы 120х600pix.
Для вас представлена трёх-колоночная тема, выполненная в слиянии чёрной и жёлтой гаммы цветов, дизайн шаблона, выполненный в спокойных и неярких цветах не раздражает глаз. В правой части блога вы увидите двух-колоночное главное меню, в теме также присутствует календарь.

Страница 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 и т.д.

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

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

Ссылка на основную публикацию
Adblock
detector