В прошлый раз остановились на
<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>
Живой пример можно посмотреть здесь пример
Всем привет!
С этого момента начну свой цикл статей о том как делать веб-странички. Материала в сети просто нескончаемое количество, но велосипед должен быть изобретен, это закон любого творчества! В том числе творчества в сфере информационного строительства.
Веб страницы это текстовый документ состоящий из специфической разметки на языке HTML, текстовой и графической информации, часть программного кода на других языках и стилей.
Теперь по порядку.
язык HTML - это язык разметки веб-страницы который описывает структуру и типы элементов на странице. Самый простой вариант веб страницы такой.
Создаем файл index.html в текстовом редакторе (не текстовом процессоре!)
и пишем:
<html>
<head>
</head>
<body>
</body>
</html>
И сохраняем
Элементы изображено выше это теги языка разметки. Получив их Ваш браузер знает что ему делать и как отобразить :)
Между тегами <html> </html> размещено сам код страницы, это начало и конец. Все что вне их отображаться не будет.
Между тегами <head> </head> находиться голова, то есть заголовок страницы вся необходимая техническая информация для существования станицы: типа, указания кодировки, заголовок, ссылки на стили, ява-скрипт и другое. Это очень ценный элемент и является обязательным.
Между тегами <body> </body> находиться тело :) собственно само содержимое страницы.
Для придания хоть каково вида нашей первой странице внесем некие изменения, добавим заголовок - немного “головы” и немного “тела”
сохраняемся и смотрим эту страницу в браузере.
, где <title>My first web-page</title> это заголовок страницы который отображается в вершней строке браузера в самой верхней шапке, рядом с названием браузера
<h1>Hello World!</h1> - это заголовок в самом теле страницы говорящий о том что это заголовок первого уровня (есть еще h2, h3, h4, h5) и текст помещенным между тегами заголовка будет большими буквами и иметь свойство ЗАГОЛОВКА.
<p>1, 2, 3 - check microphone - это “простой текст” мы просто указываем браузеру что между тегами <p> </p> идет простой текст и все, а <br /> в нем делает перевод строки
Дабы не загружать кучей инфо по тегам, всем! обязательно прочитать Спецификацию по HTML 4.01 на сайте русского переводчика данного документа
http://www2.stack.ru/~julia/HTML401/cover.phtml
Обязательно использовать как справочник!
Официальная же документация на английском
Что дальше?
Дальше план такой (анонс):
А дальше только совершенствоваться.
Желаю удачи до скорого!
Публікації
Усі коментарі
