Здравствуйте, меня зовут Михаил Русаков! В
этой статье я расскажу Вам о создании простейшего сайта. Кто знает,
может быть, знания, которые Вы получите в этой статье, впоследствии
станут началом Вашего успеха. Я склонен полагать, что у Вас
имеется большое желание научиться создавать свои собственные сайты.
Разумеется, крайне глупо пытаться познать эту науку с изучения
какого-нибудь PHP. Гораздо разумнее начать с чего-нибудь попроще, а именно с HTML (HyperText Markup Language
- язык гипертекстовой разметки) - базового языка, на котором и построен
любой, даже самый сложный сайт. Без этого языка не было бы ни одного
сайта, более того, HTML - простейший язык, который может освоить даже школьник (яркий пример - Ваш покорный слуга, начавший осваивать HTML ещё в школе, причём весьма успешно). 
Ладно, хватит болтовни - пора приступать к созданию нашего с Вами первого сайта, и этот процесс будет называться: "Создание сайта на HTML". Первое,
что нужно решить: где создавать сайт? Разумеется, можно и в обычном
блокноте. Но это несерьёзно (мы так в школе писали), поэтому давайте
лучше будем использовать что-нибудь "потяжелее". Я остановил свой выбор
на редакторе "Notepad++" - замечательная программа, которая
позволяет писать код на огромном количестве языков, в том плане, что это
будет весьма и весьма удобно. Не буду сильно её хвалить, потому что для
написания кода для серьёзных языков (Java, C++ и т. д.) она не подходит - много лишних проблем возникнет. Но для таких языков, как HTML, CSS, JavaScript и даже PHP - очень хороший выбор. Скачать Notepad++ можно, пройдя по этой ссылке: http://notepad-plus.sourceforge.net/ru/site.htm Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем index.html. Теперь пишем (пожалуйста, напишите, а не скопируйте!) в окне редактора: <html>
<head>
</head>
<body>
</body>
</html>Написали? Сохранили? Поздравляю Вас, Вы только что создали самую простую (но очень важную!!!) HTML-страницу! Теперь можно нашу страницу открыть в браузере. Так и поступим. Что-нибудь
видите? Я уверен, что нет. И это неудивительно, ведь это самая
элементарная страница. Вы можете посмотреть исходник страницы. Для этого
в меню "Вид" выберите пункт меню "Просмотр HTML кода", "Исходный код страницы" или что-то в этом духе, в зависимости от Вашего браузера. Также можно просто нажать CTRL-U (в большинстве браузеров откроется исходный код страницы), и Вы увидите Ваш код. А теперь давайте обсудим, что мы здесь написали. <html>, <head>, <body> - это открывающие теги. Иногда их ещё называют дескрипторы, но я привык называть их тегами, поэтому далее так и буду писать. </html>, </head>, </body> - это закрывающие теги. Теги
бывают парные и одиночные. Парные теги - это теги, которые нуждаются в
закрывающем, то есть все три тега, которые мы использовали являются
парными, так как они открываются и потом закрываются. Одиночные теги - это теги, которые не требуют наличие закрывающего тега. Теперь что касается назначения данных тегов. Тег <html> означает начало HTML-документа. Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже. Тег </head> означает конец заголовка HTML-документа. Тег <body>
означает начало самого документа. То есть всё (текст, картинки, ссылки и
т. д.), что Вы видите на страницах в Интернете - всё расположено в теге
<body>. Тег </body> означает конец содержимого документа. Тег </html> означает конец HTML-страницы. Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код: <title>Наша страница</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера. Тег </title> сообщает, что здесь заголовок заканчивается. Что касается тега <meta>,
то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут
быть различные атрибуты, определяющие, например, вид их содержимого.
Атрибуты ставятся внутри открывающего тега и имеют следующий вид: Название = "значение". Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит. Теперь
займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз
содержимое страницы - значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>: <h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>Теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - выводят текст в браузере. Причём этот текст является заголовком, более того, чем больше цифра (от 1-го до 6-ти), тем менее крупным шрифтом будет выведен соответствующий текст. Таким образом, код Вашей страницы имеет вид: <html>
<head>
<title>Наша страница</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
</head>
<body>
<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>Сохраните страницу и посмотрите на неё в браузере. Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый). Таким образом, тег <body> выглядит так: <body text = "green" bgcolor = "yellow">
<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным. Думаю, что на сегодня хватит для Вас материала. Очень полезно будет потренироваться в выводе разного текста, разными цветами. Увидимся в следующей статье!
Источник: http://rahman. html | 
Каталог статей 