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

Содержание урока:

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

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

Шаг 1.

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

< tr>

< td colspan=" 2" width=" 780" height=" 38"

background=" images/menu.jpg" >

< table border=" 0" cellpadding=" 5" cellspacing=" 0" >

< tr> < td>

< font color=" #FFFFFF" size=" 5" >

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

< /font>

< /td> < /tr>

< /table>

< /td>

< /tr>

Нам необходимо, чтобы при нажатии на слово " главная" открывалась страница index.html, при клике по " шаблоны" - html-страница pattern.html, а при клике по " контакты" - html-страница contact.html. Внесем соответствующие изменения в эту часть кода:

< tr>

< td colspan=" 2" width=" 780" height=" 38"

background=" images/menu.jpg" >

< table border=" 0" cellpadding=" 5" cellspacing=" 0" >

< tr> < td>

< font color=" #FFFFFF" size=" 5" >

< a href=" index.html" > главная ||< /a>

< a href=" pattern.html" > шаблоны ||< /a>

< a href=" kontact.html" > контакты < /a>

< /font>

< /td> < /tr>

< /table>

< /td>

< /tr>

Обратите внимание, наши ссылки стали синего цвета - это цвет ссылок по умолчанию. Но мы же помещали их в теги < font> < /font>? Это тот самый случай, когда порядок вложенности тегов играет большую роль. Чтобы ссылки снова стали белыми, следует теги < font> < /font> поместить в теги < a> < /a>, и сделать это придется у всех трех ссылок.

< tr>

< td colspan=" 2" width=" 780" height=" 38"

background=" images/menu.jpg" >

< table border=" 0" cellpadding=" 5" cellspacing=" 0" >

< tr> < td>

< font color=" #FFFFFF" size=" 5" >

< a href=" index.html" >

< font color=" #FFFFFF" size=" 5" >

главная

< /font> < /a> ||

< a href=" pattern.html" >

< font color=" #FFFFFF" size=" 5" >

шаблоны

< /font> < /a> ||

< a href=" kontact.html" >

< font color=" #FFFFFF" size=" 5" >

контакты

< /font> < /a>

< /font>

< /td> < /tr>

< /table>

< /td>

< /tr>

Поменяйте код на вышеприведенный во всех трех 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=" https://www.mysite.ru/kon/kontact.html" >

Шаг 2.

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

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

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

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

< td width=" 580" height=" 320" bgcolor=" #FFFFFF"

valign=" top" >

< table border=" 0" cellpadding=" 15" cellspacing=" 0" >

< tr> < td>

Здесь - контент

< /td> < /tr>

< /table>

< /td>

Так как у нас здесь будут фотографии шаблонов и их описания, то удобнее всего поместить фотографии в одном столбце, а описания в другом. Для примера, возьмем два шаблона, а значит, наша таблица будет состоять из 2 строк и 2 столбцов (вы можете сделать сколько угодно). Итак, изменим эту часть следующим образом:

< td width=" 580" height=" 320" bgcolor=" #FFFFFF"

valign=" top" >

< table border=" 0" cellpadding=" 15" cellspacing=" 0" >

< tr> < td> Здесь фото< /td> < td> Здесь описание< /td> < /tr>

< tr> < td> Здесь фото< /td> < td> Здесь описание< /td> < /tr>

< /table>

< /td>

Теперь в первый столбец вставим фото шаблонов, а во второй - их описания. Для вставки фотографий в HTML существует тег < img>, он одиночный, т.е. его не нужно закрывать. Для того, чтобы указать какую именно картинку вставить у этого тега есть параметр src, в качестве значения которого указывается путь к картинке.

< td width=" 580" height=" 320" bgcolor=" #FFFFFF"

valign=" top" >

< table border=" 0" cellpadding=" 15" cellspacing=" 0" >

< tr>

< td> < img src=" images/sp1.gif" > < /td>

< td> Перед вами уникальный трёх-колоночный шаблон на бизнес

тематику выполненный в строгом и продуманном стиле в

слиянии белого и серого цветов. В правой части страницы

располагается удобное двух-колоночное главное меню.

В данной теме имеется возможность размещения видео

роликов и рекламы 120х600pix.

< /td>

< /tr>

< tr>

< td> < img src=" images/sp2.gif" > < /td>

< td> Для вас представлена трёх-колоночная тема, выполненная

в слиянии чёрной и жёлтой гаммы цветов, дизайн шаблона,

выполненный в спокойных и неярких цветах не раздражает

глаз. В правой части блога вы увидите двух-колоночное

главное меню, в теме также присутствует календарь.

< /td>

< /tr>

< /table>

< /td>

Страница index.html готова.

Займемся страницей pattern.html.

На ней мы решили просто разместить фотографии шаблонов.

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

< td width=" 580" height=" 320" bgcolor=" #FFFFFF"

valign=" top" >

< table border=" 0" cellpadding=" 15" cellspacing=" 0" >

< tr> < td align=" center" >

< h1> Шаблоны< /h1>

< img src=" images/sp1.gif" >

< img src=" images/sp2.gif" >

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

< /td> < /tr>

< /table>

< /td>

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

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

< td width=" 580" height=" 320" bgcolor=" #FFFFFF"

valign=" top" >

< table border=" 0" cellpadding=" 15" cellspacing=" 0" >

< tr> < td align=" center" >

< h1> Наши контакты< /h1>

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

< p> Пишите нам по адресу:

< address> admin@mysite.ru< /address>

< /p>

< /td> < /tr>

< /table>

< /td>

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

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

Шаг 3.

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

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

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

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

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

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

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