Сегодня: 25 апреля 2024 г., четверг Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 4. Создаем свой первый сайт!

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

Итак.

Вот текст, который нужно скопировать, вставить в «Блокнот» и сохранить его под именем 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>.

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

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

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Евгений Андросов
Дата: 16.10.2014

Денис! Это язык программирования php, где один файл отвечает за загрузку большого количества страниц, id=9 - это статья № 9 в базе данных сайта.

Комментарий добавил(а): Денис
Дата: 16.10.2014

А что означает девятка в ссылке?

Комментарий добавил(а): Ирина
Дата: 28.10.2013

Спасибо, поняла! :-)

Комментарий добавил(а): Евгений Андросов
Дата: 28.10.2013

Ирина!
Для того, чтобы можно было отправить ссылку на сайт, его нужно выложить в Интернет. Об этом рассказывается в 14-м уроке: http://www.freeadvice.ru/view_manual.php?id=15

Комментарий добавил(а): Ирина
Дата: 28.10.2013

Неправильно задала вопрос. Название страницы видно, но как я могу отправить ссылку на этот сайт по почте, если html-файл лежит на диске D? В строке поиска браузера я вижу путь к файлу на диске D.

Комментарий добавил(а): Ирина
Дата: 28.10.2013

Евгений, здравствуйте! Сделала свой первый мини-сайт, нов браузере отражается не название сайта, а ссылка на место, где лежит html-файл. Подскажите пожалуйста, почему?

Комментарий добавил(а): Геннадий
Дата: 22.04.2013

ничего не происходит

Комментарий добавил(а): Евгений Андросов
Дата: 23.06.2012

Владимир, utf-8 поддерживает большее количество различных символов и без проблем синхронизируется с социальными сетями: Twitter, Facebook и т.п. Если вы планируете, что ссылки и заголовки с вашего сайта или блога будут автоматически поститься в соц. сети, лучше делать сайт именно в utf-8 - не будет проблем с кодировкой. Если же ничего такого не планируется, то разницу никакой, по сути, нет.

Комментарий добавил(а): Владимир
Дата: 23.06.2012

Чем кодирование "windows-125" отличается от "utf-8" - в общих чертах?

Комментарий добавил(а): app
Дата: 23.03.2012

Это диагностика стандарта HTML 4.01. Но вопрос как же правильно записать Ваш пример:"... <body> Поздравляю! Это сайт - Cosmos, начат 21.03.2012! "

Комментарий добавил(а): Евгений Андросов
Дата: 22.03.2012

Первый раз слышу про такое предупреждение. Где оно у вас появляется?

Комментарий добавил(а): app
Дата: 22.03.2012

Как избавиться от предупреждения:"Текст между открывающим и закрывающим тегом элемента body не разрешен"

Комментарий добавил(а): Евгений Андросов
Дата: 15.02.2012

Татьяна! Видимо, не правильно делаете. Проверил - никаких проблем с копированием текста с сайта нет.

Комментарий добавил(а): татьяна
Дата: 14.02.2012

не могу скопировать текст или просто не правильно это делаю

Комментарий добавил(а): жума
Дата: 21.09.2011

спасибо русскому языку

Комментарий добавил(а): IRINA
Дата: 29.03.2011

Очень интересно, так все понятно и доступно объясняете, пойду дальше читать. Спасибо!

Комментарий добавил(а): Роман
Дата: 09.05.2010

Все в порядке да открыл через enternet explorer все получилось Спасибо

Комментарий добавил(а): Евгений Андросов
Дата: 08.05.2010

В вашем примере все выглядит правильно, поэтому в чем проблема сказать не могу. Попробуйте сохранить в другую папку, например, прямо на диск C, в корень. Или попробуйте открыть файл другим браузером - возможно Opera капризничает, у нее это бывает.

Комментарий добавил(а): Роман
Дата: 08.05.2010

Евгений я копирую и мохраняю в блокноте но почемуто когда я кликаю по ссылке выдает file://localhost/C:/Documents%20and%20Settings/Roman/%2001%3EG89%20AB%3E;/index.html Ошибка! Невозможно открыть файл Вы попытались получить доступ к адресу file://localhost/C:/Documents%20and%20Settings/Roman/%2001%3EG89%20AB%3E;/index.html, который сейчас недоступен. Убедитесь, что веб-адрес (URL) введен правильно, и попытайтесь перезагрузить страницу. Нужна помощь? Откройте справку Opera. Перейдите к службе поддержки Opera в Интернете. ПОдскажети пожалуйсто в чем проблема

Комментарий добавил(а): Владимир
Дата: 22.02.2010

Благодарю,теперь все в порядке.

Комментарий добавил(а): Евгений Андросов
Дата: 22.02.2010

Владимир! На странице стояла защита от копирования - слишком часто стали копировать учебник и вставлять его на сайты под своими именами. Но сейчас я снял защиту, можете копировать. Извините, за возникшее неудобство.

Комментарий добавил(а): Владимир
Дата: 22.02.2010

Я уже пробовал создать сайт у другого учителя.Теперь почему-то не могу скопировать в блокнот вашу програмку,возвращаюсь на сайт,где раньше учился,там все в порядке,копируется.Возможно есть ньюанс,который я не знаю?

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.