mini-howto как делать web-pages. Часть 2
В прошлый раз остановились на
<html>
<head>
<title>My first web-page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>1, 2, 3 - check microphone<br /> hello, hello</p>
</body>
</html>
Перерь пойдем дальше. Создадим макет страницы, с которым будем работать.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Site name</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Здесь изменилась шабка документа, было внесенно объявление типа документа (обязательное условие) это <!DOCTYPE HTML PUBLIC
характеристика кодировки <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> содержимого материала, у меня стоит utf-8 (unicode) это уникод в котором содержиться большенство языков мира, но есть варианты cp1251, koi8 и другие. Все имеют свои плюсы и минусы, но в целом можно использовать виндовс кодировку cp1251 или более прогресивный уникод. На выбор жалающих, у меня есть проекты как на уникоде так и на виндовс кодировке, визуально отличий нет.
так же добавилась ссылка на стилевой файл, файл в котором будет размещяться описание стилистики оформления нашего документа. Это делаеться для того чтобы убрать с основного кода максимум “левой” информации связанной с оформлением и таким образом облегчить разборку содержимого. так же это дает возможность применять 1 стиль ко многим документам. <link rel=“stylesheet” type=“text/css” href=“style.css”> К содержимому стилевого файла прийдем позже, там тоже все не просто :)
Итак, создаем новую структуру по нашему макету, возму в пример один из последних проектов который еще на стадии выполнения и немножко для примеров другие варианты…
между тегами <body> </body> начинаем вносить структурные елементы пока что в текстовом виде.
<body>
<div id="header">
<!-- Шапка сайта -->
<h1>SITE name</h1>
</div>
<div id="main">
<!-- Содержимое сайта, основное окно -->
<p>куча левого текста...</p>
</div>
<div id="sidebar">
<!-- Боковое меню или колонка представлено в виде списка -->
<ul>
<li>один</li>
<li>два</li>
<li>при</li>
</ul>
</div>
<div id="footer">
<!-- нижняя часть, завершение, обувь если хотите :) -->
</div>
</body>
Тамким образом мы создаем общую структуру элементов которые будут размещены на странице. Внутри этих основных елементов могут находиться вложеными в них любое количество других елементов это как бы общие контейнеры. <div id=“footer”> и вообще id говорит что к данному слою div мы применили уникальный стиль footer, это конечно сказанно грубо но id можно в документе применять 1 раз, в тоже время <div class=“footer”> можно использовать несколько раз. Так как эти стили и таблицы хорошо описанны и стандартизированны, прочтите хотябы
там же найдете необходимые учебники по каскадным стилям и т.д. но все равно еще к стилям прийдем.
вот весь код странички прикодный для копирования
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>www.svitovid.org.ua</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<!-- Шапка сайта -->
<h1>SITE name</h1>
</div>
<div id="main">
<!-- Содержимое сайта, основное окно -->
<p>куча левого текста...</p>
</div>
<div id="sidebar">
<!-- Боковое меню или колонка представлено в виде списка -->
<ul>
<li>один</li>
<li>два</li>
<li>при</li>
</ul>
</div>
<div id="footer">
<!-- нижняя часть, завершение, обувь если хотите :) -->
© Copyright, Me, 2008
</div>
</body>
</html>
Живой пример можно посмотреть здесь пример
Публікації
Немає коментарів:
Дописати коментар