Html

Основы создания сайтов

В одной из статей, опубликованной в этом проекте, я приводил пример создания своего первого сайта человеком, ничего не знающим о создании сайтов. Там я привел пример кода, который предлагал скопировать, вставить в текстовый редактор «Блокнот», сохранить и открыть в Интернет-браузере. Сейчас я хочу повторить этот пример. С единственной разницей – здесь мы разберем этот код и вы поймете, как все это делается и насколько все это просто!

Итак.

Вот текст, который нужно скопировать, вставить в «Блокнот» и сохранить его под именем index.html в какую-нибудь временную папку*:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ваш первый сайт</title>
</head>
<body>
Поздравляю! Это ваш первый сайт, который вы сделали своими руками! Хотите пойти дальше и cделать настоящий сайт? Тогда читайте статью дальше. 
<a href="http://www.freeadvice.ru/view_article.php?id=9">Вернуться назад</a>
</body>
</html>

*для того, чтобы сохранить файл под этим именем, нажимаем в меню «Блокнота» пункт «Файл» - «Сохранить как», в открывшемся окне, в графе «Тип файла», выбираем «Все файлы», а в графе «Имя файла» прописываем index.html. Жмем «Сохранить».

После того, как файл сохранен, заходите в папку и жмете по нему два раза мышкой. Открывается Интернет-браузер с вашим первым сайтом!

Давайте теперь разберем html-код, который помог нам создать этот простой сайт.
Верхняя часть кода:

Это служебные теги, которые необходимо прописывать в каждом html-документе. При этом, их вовсе необязательно помнить! Достаточно скопировать их так, как они есть и сохранить в какой-нибудь отдельный файл с помощью того же «Блокнота». Когда вам нужно создать новый документ, вы просто копируете эти теги и вставляете в начало вашего нового html-документа. Вот и все.

При этом в тегах <title> содержится название вашего сайта или страницы. Вы вольны вписать туда все, что угодно как на русском, так и на любом другом языке и это название будет отражаться в Интернет браузере при открытии вашей страницы. Мало того, это название будет отражаться в поисковых системах, которые выдадут вашу страницу в результатах поиска по чьему-то запросу, соответствующему содержанию вашего сайта.

Вот как выглядит название этой учебной страницы в Интернет-браузере Opera (я снял только верхнюю часть страницы, чтобы лучше было видно название, оно подчеркнуто красным цветом):

Далее. Между тегами <body> расположен, собственно, сам сайт. Body – это тело сайта.
Рассмотрим его содержимое.

Поздравляю! Это ваш первый сайт, который вы сделали своими руками! Хотите пойти дальше и cделать настоящий сайт? Тогда читайте статью дальше. 
<a href="http://www.freeadvice.ru/view_article.php?id=9">Вернуться назад</a>

Русский текст, который вы видите на сайте, заключен в теги абзаца, имеющем атрибут выравнивания по левому краю поля . Также мы видим тег переноса строки и ссылки на страницу сайта с моей статьей, на которой был изложен этот материал:

Слова «Вернуться назад» являются ссылкой, а предваряющий их тег – адресом страницы, на которую вы попадаете, нажав на ссылку. Завершается все закрытием тега ссылки </a> и закрытием тега абзаца 
Заканчивается документ закрытием тегов </body> и </html>.

Вывод. Все, что нам потребовалось для создания простого сайта – это скопировать в документ служебные теги, ввести свой текст и заключить его всего лишь в три тега!

Просто? Просто! Теперь попробуйте самостоятельно сделать одну-две подобные страницы и вы убедитесь в этом уже на собственном опыте.

Создать бесплатный сайт с uCoz