Итак, у нас есть три 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="http://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. Откуда брать картинки для сайта (все эти шапки и меню)?
Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop
2. Что дальше?
Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.
Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии - CSS, Java script, PHP и т.д.
На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.
Информация предоставлена с сайта: http://www.site-do.ru
Шаг 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="http://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. Откуда брать картинки для сайта (все эти шапки и меню)?
Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop
2. Что дальше?
Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.
Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии - CSS, Java script, PHP и т.д.
На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.
Информация предоставлена с сайта: http://www.site-do.ru
Комментариев нет:
Отправить комментарий