Как написать html-документ

теги html

Инструкция
Уровень сложности: Несложно
Что вам понадобится:
Компьютер
Программа блокнот или Akel Pad(стандартное приложение Total Comander'а)
1
шаг

HTML
HTML – язык разметки гипертекста. Большинство интернет-страниц написаны на html.

2
шаг

Показаны теги html, head, body. Заметте, что эти теги не соединены.

Структура html
Язык html представляет собой следующее: имеется один “БОЛЬШОЙ” html, он делится на два раздела “поменьше”, на head (шапку документа) и body (тело документа). Соответственно эти два тега могут содержать множество других “маленьких” тегов, а они в свою очередь могут быть наполнены еще одними. НО “пересекаться” эти теги не могут ни в коем случае.

3
шаг

Создаем страницу
Для того, чтобы начать писать, вам нужна программа блокнот или Akel Pad(существуют специальные html редакторы, но лично мне больше по душе обычный редактор). Я вам советую писать в Akel Pad’е, так как в нём больше функций по редактированию текста.

4
шаг

Теги html пишутся в треугольных скобках “<>” если это начальный тег и в треугольных скобках со слешем “</>” конечный тег.
Итак, чтобы дать браузеру понять, что это html документ открываем начальный тег всего документа <html>, в нем мы пишем “шапку” документа <head>. В этом теге прописывается название документа, его favicon и другие теги не относящиеся к “телу”. Чтобы озаглавить текст впишите название между тегами <title> и </title>, расположенные в “шапке”. Далее мы, по окончании работы с “шапкой”, закрываем ее тегом </head>.
Затем открываем тело тегом <body>, в нем пишется тег и текст (тот, что будет показан на готовой странице). По окончании работы с документами закрываем тело тегом </body>, а затем закрываем тег html (</html>)

5
шаг

Пример самого короткого html-документа
<html>
<head>
<title>Пример</title>
</head> <body>

Тело документа
</body> </html>

6
шаг

Пример длинного html-документа
<html>
<head>
<title>Длинный html-документ</title>
<link rel="shortcut icon" href="*ссылка на фавикон"/>
<link rel="stylesheet" href="*ссылка на CSS файл, содержащий стили для текстов*"/>
<style type="text/css"></style>
</head> <body> <div align=center> <div class=style1>

<b>Таблица</b><br>
</div> </div> <div align=center> <table border="1"> <tr> <td>

Первый столбец первой строчки
</td> <td>

Второй столбец первой строчки
</td> </tr> <tr> <td>

Первый столбец второй строчки
</td> </tr> </table> </div> </body> </html>

Описание
Итак, тегом <html> мы начинаем весь документ. Затем идет “шапка документа” (<head>), в ней сначала расположен заголовок (<title>Длинный html-документ</title>), затем идет тег фавикона в котором параметр href указывает ссылку на изобравжение. Следующий элемент указывает на .css файл содержащий стили для текстов, эти стили можно прописать в самом документе внедрением в него CSS языка(тег “style”), но я считаю этот способ не удобным, так как если на сайте много страниц и во всех нужно изменить цвет удобнее прописать этот цвет в одном файле чем в каждой странице. Затем мы закрываем шапку(</head>) и открываем тело(<body>) В нем види элемент div, у которого имеется множество параметров, в данном случае это параметр “выравнивание”(align) у которого есть параметры спава(right), слева(left) и по центру(center), затем идет еще лдин div показывающий стиль введенный либо в css файле, либо в самом документе элементом style. Далее мы видим <b>, выделяющий текст жирным, и элемент <br>, делающий спуск “курсора” на одну строчку, дальше два элемента </div>. Затем начинается еще один div, показывающий выравнивание по центру, а в нем начинается таблица(<table>), а элемент border говорит о наличии рамки(рамку можно убрать изменив значение 1 на 0). Следом идет <tr> открывающий первую строчку, затем <td> открывающий первый столбец, затем текст этого столбца, и закрытие столбца тегом </td>. Надеюсь по таблице все понятно, а то рука отваливается писать:) Таблица закрывается тегом </table>. Потом закрывается div, который выравнивал таблицу по центру. Далее закрывается “тело” </body> и html </html>.
Надеюсь всё понятно??
Ссылка на то, что получилось

7
шаг

Другие языки
Часто, чтобы улучшить свою страницу в html вставляются другие языки, например JavaScript, CSS и другие.