Долго - долго думала, но всё же решилась написать эту статью. Я начинающий, потому огромных подробностей можете не ждать. Но кое-что я объясню.
Для начала нужно усвоить одну простейшую вещь.
<тег>слово</тег>
Теги всегда закрываем. Из-за одного незакрытого тега можно лишиться всего сайта.
А теперь разберём от края - хехе - до края.
Самый первый тег, который встречается в документе, должен быть тегом <html>. Данный тег сообщает браузеру, что документ написан с использованием HTML. завершающим тегом, соответственно, будет </html>.
Пример:
<html></html>
Голова документа - HEAD
Пример:
<head></head>
Тeг заголовочной части документа должен быть использован сразу после тeга <html> и более нигде в теле документа. Данный тег представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тeга <head>. Сюда, обычно, вставляют его CSS-описание. Здесь, правда, это значительно проще.
Тело документа - BODY
Пример:
<body></body>
Тело документа должно находиться между тeгами <body> и </body>. Это та часть документа, которая отображается как текстовая и графическая информация страницы.
Пример HTML-документа:
<html>
<head>
</head>
<body>
</body>
</html>
Это минимальный HTML-документ. Мы же поговорим о более крупном. Представляю вам структуру моего бывшего сайта (пока без значений).
<html>
<head>
<title></title>
<style type="text/css"></style>
</head>
<body></body>
</html>
Для начала разберёмся, что куда вставлять. Хочу обратить ваше внимание, что без знания CSS ва будет очень тяжело.
Впрочем, некоторые моменты я поясню:
Размеры, высоты и прочее.
% - проценты;
em – высота шрифта;
ex – высота буквы;
in - дюймы;
px - пиксели;
pt - пункты;
cm - сантиметры;
mm - миллиметры.
Font - шрифт
font-size – это размер шрифта. Некоторые размеры:
x-small;
small;
medium;
large;
x-large.Есть ещё два, но у шата нет мозгов их вспомнить. насколько я помню - это огромный и миниатюрный
font-style - тип
normal - стандарт;
italic - курсив;
oblique - он что-то среднее между стандартом и курсивом >> я им как-то не пользовалась, если честно.
font-weight - не знаю, как правильно назвать. начертание, наверное.
normal - стандарт;
bold - жирный.
Text - текст
text-align - выравнивание текста внутри элемента.
left - по левому краю;
right - по правому краю;
center - по центру.
text-decoration - украшение текста
none - нет
underline - подчеркивание снизу
overline - подчеркивание сверху
blink - мигание не эксперементировала
Background - фон
background-color - цвет заливки
background-color: #494f4f;
background-image - фоновая картинка
url ("путь до картинки") – в скобках указываете адрес изображения;
background-image: url(http://xmages.net/upload/3e9ddc17.gif);
none – отсутствие картинки (при присутствии background-color не указывать).
background-attachment - прокрутка фона
scroll - прокручивается;
fixed - непрокручивается;
background-repeat – автоматическое размножение фона
no-repeat - не размножается
repeat-x - размножается по горизонтали
repeat-y - размножается по вертикали
repeatxy - размножается в обоих направлениях.
background-position – расположение фона.
Сначала указывается расположение по вертикали: top, center или bottom, потом погоризонтали: left, center или right.
Border - рамка
border-color - цвет оной;
border-width - толщина;. Указывается в пикселах (px)
border-style - тип границ рамки;
none - отсутствие рамки;
dotted - пунктир-точки;
dashed - штрих-пунктир;
solid - одинарная;
double - двойная;
groove - трехмерный эффект;
ridge - трехмерный эффект возвышения;
inset - трехмерный эффект углубления;
outset - трехмерный эффект выпуклости фона;
border-top – параметр верха;
border-bottom – параметр низа;
border-left – параметр левой стороны (кромки);
border-right – параметр правой стороны (кромки);
Основные параметры
Height - высота;
Width - ширина;
Color - цвет шрифта элемента.
Перед тегом HTML необходимо всегда ставить вот это.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Зачем это нужно? Меньше знаешь - крепче спишь.
в соткрывающем теге <html> необходимо прописать
xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr"
Пример:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
Да, дамы & господа, так начинаются все документы. Можете нажать на "Исходный код" и это увидеть **
Продолжим. Мы с вами должны были получить вот это.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title></title>
<style type="text/css"></style>
</head>
<body></body>
</html>
Надеюсь, у вас получилось именно так ^ ^
И всё же предлагаю вам указать <META>
Более правльно постоенная страница (для сайта на народе) будет выглядеть так:
<HTML>
<head>
<title>Название сайта</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META NAME="Description" CONTENT="название">
<META NAME="Keywords" CONTENT="теги">
<META NAME="Document-state" CONTENT="Dynamic">
<META NAME="robots" CONTENT="ALL">
<META NAME="Rating" CONTENT="General">
<META NAME="URL" CONTENT="адрес вашего сайта">
<META NAME="doc-type" CONTENT="Homepage">
<META NAME="language" CONTENT="Russian Federation">
<META NAME="Author" CONTENT="имя создателя сайта">
<style type="text/css"></style>
</head>
<body></body>
</html>
Продолжаем заполнение "головы сайта".
Нам необходимо прописать CSS для страницы. Это мы делать будем между тегами
<style type="text/css"></style>
С чего начать? Начинают обычно с цвета тела. Ну, и мы, собственно, начнём с него.
BODY {
font-size: 10px;
font-family: Arial;
background-color: #ffffff;
}
Те, кто внимательно прочитали про "некоторые моменты" выше прекрасно поймут, что тут написанно.
Кстати, названия шрифта, цвет и прочее я указываю произвольно. Вы можете указывать ещё всего до кучи.
Что прописать далее? Ссылки 
A {
color: #000000;
text-decoration: none;
}
A:visited {
color: #000000;
}
A:hover {
color: #000000;
text-decoration: underline;
}
A - обычная ссылка
A:visited - ссылка, по поторой прошлись
A:hover - ссылка при нажатии.
Дальше прописываем первый элемент. Для чего он нужен? А вам не хотелось бы увидеть вместо стандартного заголовка картинку с другим шрифтом?
h1 {
font-size: 16px;
color: #000000;
text-align: center;
line-height: 22px;
margin-bottom: 0px;
font-family: Arial;
font-style: normal;
background-image: url(адрес);
}
С этим всё понятно?
Поехали далее. Не хорошо оставлять страничку голой и белой хдд
h2 {color:#000000;
font-size: 11px;
font-family: Arial;
font-weight: normal;
text-transform: none;line-height: 13px;
padding-left: 20px;
text-align: center;
margin: 0px;
background-image: url(адрес);}
Всё, голову отмучали ^ ^
У вас должно было получиться
<head>
<title>Название сайта</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META NAME="Description" CONTENT="название">
<META NAME="Keywords" CONTENT="теги">
<META NAME="Document-state" CONTENT="Dynamic">
<META NAME="robots" CONTENT="ALL">
<META NAME="Rating" CONTENT="General">
<META NAME="URL" CONTENT="адрес вашего сайта">
<META NAME="doc-type" CONTENT="Homepage">
<META NAME="language" CONTENT="Russian Federation">
<META NAME="Author" CONTENT="имя создателя сайта">
<style type="text/css">
BODY {
font-size: 10px;
font-family: Arial;
background-color: #ffffff;
}
A {
color: #000000;
text-decoration: none;
}
A:visited {
color: #000000;
}
A:hover {
color: #000000;
text-decoration: underline;
}
h1 {
font-size: 16px;
color: #000000;
text-align: center;
line-height: 22px;
margin-bottom: 0px;
font-family: Arial;
font-style: normal;
background-image: url(адрес);
}
h2 {color:#000000;
font-size: 11px;
font-family: Arial;
font-weight: normal;
text-transform: none;line-height: 13px;
padding-left: 20px;
text-align: center;
margin: 0px;
background-image: url(адрес);}
</style>
</head>
<body></body>
</html>
Едем дальше? Едем хдд
В BODY вы дописываете:
bgcolor="ffffff" background="адрес"
Пример:
<body bgcolor="ffffff" background="адрес">
Теперь нужно прописать "внутренности". Прописывается это через путь пи. <p></p>
Пример:
<p><div style="position: absolute; left: 100; top: 0; ">
<img src="путь до изображения каркаса страницы" width=600 height=850></A><p><div style="position: absolute; left: 8; top: -10; ">
<img src="путь до изображения шапки" </A><p><div style="position: absolute; left: 14; top: 330; width: 190;">
<h1>Навигация</h1>
<center><a href="link" target="shatany"><b>Главная</b></a><br>
<a href="link" target="shatany"><b>Сайт</b></a><br>
<a href="link" target="shatany"><b>Графика</b></a><br></center><h1>Немного информации</h1>
<h2><b>Название: </b>name<br>
<b>Хостинг: </b>narod.ru<br>
<b>Админ: </b>Шатани<br>
<b>Открытие: </b>о.О<br>
<b>Версия: </b>о.1<br></h2><div style="position: absolute; left: 200; top: 3; width:120;">
<center><iframe name="shatany" src="ссылка" width="500" height="700" frameborder="0"></iframe> </center><br>
Пример готовой страницы сайта:
<head>
<title>Название сайта</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META NAME="Description" CONTENT="название">
<META NAME="Keywords" CONTENT="теги">
<META NAME="Document-state" CONTENT="Dynamic">
<META NAME="robots" CONTENT="ALL">
<META NAME="Rating" CONTENT="General">
<META NAME="URL" CONTENT="адрес вашего сайта">
<META NAME="doc-type" CONTENT="Homepage">
<META NAME="language" CONTENT="Russian Federation">
<META NAME="Author" CONTENT="имя создателя сайта">
<style type="text/css">
BODY {
font-size: 10px;
font-family: Arial;
background-color: #ffffff;
}
A {
color: #000000;
text-decoration: none;
}
A:visited {
color: #000000;
}
A:hover {
color: #000000;
text-decoration: underline;
}
h1 {
font-size: 16px;
color: #000000;
text-align: center;
line-height: 22px;
margin-bottom: 0px;
font-family: Arial;
font-style: normal;
background-image: url(адрес);
}
h2 {color:#000000;
font-size: 11px;
font-family: Arial;
font-weight: normal;
text-transform: none;line-height: 13px;
padding-left: 20px;
text-align: center;
margin: 0px;
background-image: url(адрес);}
</style>
</head>
<body bgcolor="ffffff" background="адрес"><p><div style="left: 0; top: 0; ">
<p><div style="position: absolute; left: 100; top: 0; ">
<img src="путь до изображения каркаса страницы" width=600 height=850></A><p><div style="position: absolute; left: 8; top: -10; ">
<img src="путь до изображения шапки" </A><p><div style="position: absolute; left: 14; top: 330; width: 190;">
<h1>Навигация</h1>
<center><a href="link" target="shatany"><b>Главная</b></a><br>
<a href="link" target="shatany"><b>Сайт</b></a><br>
<a href="link" target="shatany"><b>Графика</b></a><br></center><h1>Немного информации</h1>
<h2><b>Название: </b>name<br>
<b>Хостинг: </b>narod.ru<br>
<b>Админ: </b>Шатани<br>
<b>Открытие: </b>о.О<br>
<b>Версия: </b>о.1<br></h2><div style="position: absolute; left: 200; top: 3; width:120;">
<center><iframe name="shatany" src="ссылка" width="500" height="700" frameborder="0"></iframe> </center><br>
</body>
</html>
Всё. Спасибо за внимание.
Взято с сайта шата