В. Лебедев, 2003
<html> <head> ... </head> <body> ... </body> </html>
Раздел head содержит вспомогательную и управляющую информацию о документе, например, рабочее название документа HTML, стили, характеристики документа, связь документа с другими.
Раздел body включает в себя содержание документа, отображающееся в окне браузера.
Название файлов должно содержать не более 8 латинских строчных символов или цифр. Не допустимо использование знаков препинания, пробелов, математических символов. Допустимо использование подчеркивания. В конце файла, через точку от названия ставится расширение: htm - для HTML файлов, css - для CSS файлов, jpg и gif - для соответствующих графических файлов.
Примеры:
index.htm, cont_2.htm, style.css - правильные названия файов.
Индекс.htm, cont 2.htm, style - неправольные название файлов.
В адресе странички указывается протокол, имя сервера, путь к файлу и название файла для ссылок на странички других серверов.
Пример:
http://schools.techno.ru/ms45/win/index.htm, где
http - протокол передачи данных,
schools.techno.ru - аддрес сайта,
ms45/win - путь к файлу (на сервере есть папка MS45, в которой лежит папка WIN, в которой находится файл index.htm),
index.htm - имя файла, на который происходит ссылка.
В адресе странички указывается относительный путь к файлу и название файла для ссылок на странички данного сервера.
Для обозначения выхода из папки используется знак "..".
Пример:
В папке WIN находятся папки TXT, IMG и файл index.htm. В папке TXT находится файл cont.htm, а в папке IMG находится файл photo.jpg.
<html>...</html> - содержимое тега определяет HTML документ.
<head>...</head> - содержимое тега определяет раздел HEAD.
<body>...</body> - содержимое тега определяет раздел BODY.
<tilte>...</title> - содержимое тега определяет рабочее название документаю.
<style>...</style> содержимое тега определяет стили, используемые в документе.
<h1>...</h1> - содержимое тега определяет заголовок первого уровня.
<h2>...</h2> - содержимое тега определяет заголовок второго уровня.
...
<h6>...</h6> - содержимое тега определяет заголовок шестого уровня.
<p>...</p> - содержимое тега определяет абзац.
<p class="main">...</p> - содержимое тега определяет абзацный структурный элемент типа (класса) "main". Класс определяется самостоятельно. Название класса записывается латинскими символами и цифрами, без использования знаков препинания, математических и других спец. символов.
<b class="det">...</b>, <i class="exm">...</i> - содержимое тегов определяют символьные структурные элементы классов "det" и "exm" соответственно.
<br /> - тег определяет разрыв строки (переход на другую строку внутри текущего абзаца).
<ul>...</ul> - содержимое тега определяет ненумерованный список.
<ol>...</ol> - содержимое тега определяет нумерованный список.
&<li>...</li> - содержимое тега определяет элемент списка.
Пример: <ol> <li>Первый элемент списка</li> <li>Второй эллемент списка</li> </ol> В окне браузера отразится:
|
<table>...</table> - содержимое тега определяет таблицу.
<tr>...</tr> - содержимое тега определяет строку таблицы,
<th>...</th> - содержимое тега определяет ячейку заголовка таблицы.
<td>...</td> - содержимое тега определяет ячейку таблицы.
Пример: <table> <tr> <th>Заголовок первого столбца</th> <th>Заголовок второго столбца</th> </tr> <tr> <td>Ячейка 1-го столбца</td> <td>Ячейка 2-го столбца</td> </tr> В окне браузера отразится:
|
<img src="адрес графического файла"></img> - тег определяет ссылку на графический объект. В окне браузера появится изображение, содержащееся в указанном файле.
<a href="адрес сранички">...</a> - тег ссылки на другую страничку. В окне браузера отразится содержимое тега, при нажатии на которое браузер загружает другую страничку.
Свойства ассоциируются с соответствующим тегом или классом. Список свойств разделяется точкой с занятой и заключается в фигурные скобки. После свойства ставится двоеточие и пробел. Перед названием класса ставится точка.
Пример:
<style>
h1 {
font-size: 16pt;
color: red;
}
body {
background-color: yellow;
}
.exm {
font-style: italic;
}
</style>
В приведенном примере заголовок первого уровня будет оформлен размером в 16 пунктов и красным цветом; цвет фона всего документа будет оформлен желтым цветом, а элементы класса exm - курсивным начертанием.
В скобках указаны рекумендуемые размерности и значения.
font-size - определяет размер символа (px - пиксели, pt - пункты, cm - сантиметры, mm - милиметры),
font-weight - определяет вес (жирность) символа (light - тонкий, normal - нормальный, bold - полужирный, bolder - жирный),
font-style - определяет стилистическое оформление символа (italic - курсивное, normal - нормальное),
font-family - определяет семейство шрифтов (serif - шрифт с засечками, sans-serif - рубленый шрифт (без засечек)),
color - определяет цвет элемента (цвета выбираются из специальной таблицы),
background-color - определяет цвет фона элемента,
text-align - определяет выравнивание элемента (left - по левому краю, right - по правому краю, center - по центру, justify - основное (по обоим краям)),
text-indent - определяет отступ первой строки (красная строка (px, cm, mm),
margin-top - определяет отступ от элемента сверху (px, cm, mm),
margin-bottom - определяет отступ от элемента снизу (px, cm, mm),
margin-left - определяет отступ от элемента слева (px, cm, mm),
margin-right - определяет отступ от элемента справа (px, cm, mm),
Отступы и красная строка могут иметь отрицательные значения.
© В. Лебедев, 2003