Сайт с меню
Простейший html сайт с меню и несколькими страницами
Большинство сайтов содержат меню и несколько страниц. Мы создадим простеший сайт с меню и нескольими страницами. Наш сайт будет состоять из главной страницы и двух тематических страниц. В нашем сайте будет логотип меню из трех пунктов: Главная, Программирование, Робототехника. Чтобы начать разрабатывать сайт создайте папку сайта, в папке сайта папку для изображений сайта images. В папке images разместите прямоугольный баннер вашего сайтa, в нашем примере файл отвечающий за баннер это logo.png
Главная страница сатйа будет иметь название index.html
Чтобы разместить баннер сайта используем тег <img> Подробнее о размещении изображений в html документах
<img width="100%" src="images/logo.png">
Чтобы создать меню сайта будем использовать html таблицу Меню размещается в колонках таблицы с помощью тегов <td></td> внутри размещается ссылка с помощью тега ссылки <a href=”ссылка меню”></a> Чтобы выровнять название меню по центру будем использовать атрибут для выравнивания текста в ячейке таблицы align="center" Чтобы выделить цветом выбранный пункт меню будем использовать атрибут цвета ячейки таблицы bgcolor="DodgerBlue" Подробнее о работе с таблицами в html
В итоге мы получим следующий код главной страницы нашего простейшего html сайта с меню
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<img width="100%" src="images/logo.png">
<table border="1" width="100%" >
<tr>
<td bgcolor="DodgerBlue" align="center"> <a href="index.html" target="_blank" ><font size="6">Главная </font> </a></td>
<td align="center"><a href="prog.html" target="_blank" ><font size="6">Программирование </font> </a> </td>
<td align="center"><a href="robo.html" target="_blank" ><font size="6">Робототехника </font> </a></td>
</tr>
</table>
<p>Это сайт, посвящённый робототехнике и программированию</p>
</body>
</html>
В нашем сайте будет еще две html страницы, на которых и будет ссылаться пункты меню. Это страница prog.html и страница robo.html. Эти страницы сделаны анлогично главной, отличие только в наполнении, которое идет сразу после таблицы меню. Кроме того цветом будет выделена ячейка меню, соответствующая данной странице.
Для html страницы prog.html будет следующий код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<img width="100%" src="images/logo.png">
<table border="1" width="100%" >
<tr>
<td align="center"> <a href="index.html" target="_blank" ><font size="6">Главная </font> </a></td>
<td bgcolor="DodgerBlue" align="center"><a href="prog.html" target="_blank" ><font size="6">Программирование </font> </a></td>
<td align="center"><a href="robo.html" target="_blank" ><font size="6">Робототехника </font> </a></td>
</tr>
</table>
<p>Это cтраница о программировании</p>
</body>
</html>
Для html страницы robo.html будет следующий код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<img width="100%" src="images/logo.png">
<table border="1" width="100%" >
<tr>
<td align="center"> <a href="index.html" target="_blank" ><font size="6">Главная </font> </a></td>
<td align="center"><a href="prog.html" target="_blank" ><font size="6">Программирование </font> </a> </td>
<td bgcolor="DodgerBlue" align="center"><a href="robo.html" target="_blank" ><font size="6">Робототехника</font></a></td></tr>
</table>
<p>Это страница, посвящённая робототехнике</p>
</body>
</html>
Вы можете использовать данный код как шаблон и наполнить его своим содержанием, меняя название страниц и пунктов меню. Чтобы добавить еще один пункт меню, необходимо во всех страницах сайта в таблицы добавить тег столбца<td></td> в котором разместить ссылку на новую страницу. Новую страницу необходимо разместить в папке сайта
Вернуться к содержанию курса html ^
Полезно : Регистрация домена и размещение сайта на хостинге
Поделиться
Нет комментариев. Ваш будет первым!