Создание простого HTML шаблона

Приведу пример простого HTML шаблона.

Элемент указывающий тип документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Начало документа:

<HTML>

Начало заголовка документа:

<HEAD>

Указание языка документа, кодировки:

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="Краткое описание страницы">
<META NAME="Keywords" content="Ключевые слова через запятую">

Язык таблицы стилей CSS:

<META http-equiv="Content-Style-Type" content="text/css">

Начало описания стилей:

<STYLE type="text/css">

Цвет ссылок:

A:link {COLOR: green; TEXT-DECORATION: none}

Цвет посещенных ссылок:

A:visited {COLOR: red; TEXT-DECORATION: none}

Цвет ссылки при клике по ней:

A:active {COLOR: orange; TEXT-DECORATION: none}

Цвет ссылки при наведении на нее

A:hover {COLOR: black; TEXT-DECORATION: underline}

Цвет фона документа, параметры шрифта по умолчанию

BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 10pt}

Окончание таблицы стилей:

</STYLE>
<TITLE>Название документа</TITLE>

Конец заголовка:

</HEAD>

Начало тела документа:

<BODY>

Текст документа ….

Конец тела документа:

</BODY>

Последний тег обозначающий конец документа:

</HTML>

Также с помощью сторонних сервисов, например csstemplater.com можно генерировать готовые шаблоны.

Примеры HTML тегов

Основные:

<html></html> Указывает начало и конец html страницы.
<head></head> Определяет место, где помещается информация не отображаемая в теле документа.
<body></body> Определяет видимую часть документа.

Тело документа:

<body bgcolor="000000"> Цвет фона документа.
<body text="000000"> Цвет текста документа.
<body link="000000"> Цвет гиперссылок.
<body vlink="000000"> Цвет посещенных гиперссылок.
<body alink="000000"> Цвет гиперссылки при нажатии на нее.

Фреймы:

<frameset></frameset> 	Предваряет тег <body> в документе, содержащем фреймы;
<frameset rows="значение,значение"> 	Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов.
<frameset cols="значение,значение"> 	Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов.
<frame> 	Определяет единичный фрейм или область в таблице фреймов.
<noframes></noframes> 	Определяет, что будет показано в окне браузера, если он не поддерживает фреймы.
<frame src="URL"> Определяет какой из HTML документов будет показан во фрейме.
<frame name="name"> 	Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм или область из других фреймов.
<frame marginwidth="#"> 	Определяет величину отступов по левому и правому краям в нутрь фрейма; должно быть равно или больше 1.
<frame marginheight="#"> 	Определяет величину отступов по верхнему и нижнему краям в нутрь фрейма; должно быть равно или больше 1.
<frame scrolling=#>  значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
<frame noresize> Запрещает изменению размеров фрейма пользователем.

Формы:

<form></form> Указывает начало и конец кода формы.
<select multiple name="имя" size="?"></select> Скролируемое меню. size устанавливает количество пунктов меню, остальные будут отображены при использовании прокрутки.
<option> Указываем элемент меню

<select name="имя"></select> Ниспадающее меню
<option> Указываем элемент меню

<textarea name="имя" cols=40 rows=8></textarea> Окно для ввода текста. columns определяет ширину окна, rows - высоту.
<input type="checkbox" name="имя">
<input type="radio" name="имя" value="x">
<input type=text name="foo" size=20> Строка ввода текста. size определяет его длину.
<input type="submit" value="имя"> Кнопка
<input type="image" border="0" name="имя" src="name.gif"> Кнопка с фоновым изображением.
<input type="reset"> Кнопка очистки.

Таблицы:

<table></table> Указывает начало и конец кода страницы.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет ячейку в таблице.
<th></th> Определяет заголовок таблицы.
<caption></caption> Определяет подпись таблицы.
<table border="#"> Толщина рамки таблицы.
<table cellspacing="#"> Расстояние между ячейками таблицы.
<table cellpadding="#"> Расстояние между содержимым ячейки и ее рамкой.
<table width="#"> Ширина таблицы в пикселях или процентах от ширины документа.
<table height="#"> Высота таблицы в пикселях или процентах от высоты документа.
<tr align="?"> или <td align="?"> Выравнивание ячеек в таблице: left, center, right.
<tr valign="?"> или <td valign="?"> Вертикальное выравнивание для ячеек таблицы: top, middle, bottom.
<td colspan="#"> Количество столбцов, которое объединено в одной ячейке.
<td rowspan="#"> Количество строк, которое объединено в одной ячейке.
<td nowrap> Не позволяет делать перевод строки в ячейке таблицы.
<td width="#"> Ширина ячейки в пикселях или процентах от ширины таблицы.
<td height="#"> Высота ячейки в пикселях или процентах от высоты таблицы.

Гиперссылка:

<a href="http://wikipedia.org">Википедия</a> или <a href="http://ru.wikipedia.org">http://ru.wikipedia.org</a>
<a href="имя файла или url" target="_self">имя ссылки</a>
Возможные значения атрибута target:
 _top — открытие документа в текущем окне;
 _blank — открытие документа в новом окне;
 _self — открытие документа в текущем фрейме;
 _parent — открытие документа в родительском фрейме.

Графические элементы:

<img src="#"> Добавляет изображение.
<img src="#" align="#"> Добавляет изображение с выравниванием: left, right, center; bottom, top, middle.
<img src="#" border="#"> Добавляет изображение и устанавливает толщину рамки вокруг изображения.
<img src="#" vspase="#"> Добавляет изображение и устанавливает поля сверху и снизу.
<img src="#" hspase="#"> Добавляет изображение и устанавливает поля слева и справа.
<img src="#" alt="#"> Изображение с всплывающей подсказкой.
<hr> Горизонтальная линия.
<hr size="#"> Горизонтальная линия с установкой ее толщины.
<hr width="#"> Горизонтальная линия с установкой ее ширины.
<hr noshade> Невидимая горизонтальная линия.
<hr color="000000"> Горизонтальная линия с установкой ее цвета.

Форматирование:

<pre></pre> Обрамление предварительно отформатированного текста.
<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6> Заголовки. h1 самый большой размер.
<b></b> Жирный текст.
<i></i> Наклонный текст.
<u></u> Подчёркнутый текст.
<s></s> Зачёркнутый текст.
<blockquote></blockquote> Цитата.
<pre></pre> Моноширинный текст.
<tt></tt> Стиль печатной машинки.
<kbd></kbd> Стиль печатной машинки.
<var></var> Название переменных отображается курсивом.
<cite></cite> Выделение цитат курсивом
<address></address> Курсивом в виде отдельного абзаца
<em></em> Наклонный текст
<strong></strong> Жирный текст
<font size="#"></font> Размер текста от 1 до 7.
<span style="font-size:15px;">Ваш текст</span>
<font color="000000"></font> Цвет текста.
<span style="color: #FF0000">Цветной текст</span>
<p></p> Новый параграф.
<p align="?"></p> Выравнивание параграфа: left, right, justify, center.
<nobr> Запрещает перевод строки.
<wbr> Указывает где разбивать строку для переноса при необходимости.
<br> Перевод строки.
<dl></dl> Список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<div align="?"></div> Форматирования блоков HTML документа.

<ol></ol> Нумерованный список
<li>

<ul></ul> Ненумерованный список
<li>

Символы:

&lt; - < 	
&gt; - > 	
&amp; - & 	
&nbsp; - неразрывный пробел
&sect; - § 	
&#8470; - № 	
&copy; -©
&reg; - ®
&#153; - ™
&deg; - °
&laquo; - «
&raquo; - »
&hellip; - …
&mdash; - —
&#149; - •
&plusmn; - ±
&minus; −