Наверх

Пример создания сайта на HTML через блокнот

1.Создайте текстовый документ.

2.По желанию переименуйте файл (у меня он будет называться first-page) и обязательно задайте ему расширение .html вместо .txt).

3.Откройте документ программой Блокнот, Notepad, Notepad++ или другом текстовом редакторе, желательно с подсветкой синтаксиса.

4.Скопируйте и вставьте в него следующий текст.

<!DOCTYPE html>
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Тело HTML-документа (отображается на экране)
</body>
</html>

5. Сохраните изменения в файле.

Сохраняем изменения в файле

6. Откройте first-page.html, только уже не в Блокноте, а в любом доступном вам браузере. На экране должно отобразиться примерно следующее:

Просмотр нашего документа в браузере

Взгляните на html-код своей первой веб-страницы. Посмотрите на результат его работы (страницу в браузере). Постарайтесь понять, за что какая строчка кода отвечает. Читать продолжайте только после попытки, которая обязательно увенчается успехом хотя бы частично.

Теперь проверьте, правильно ли вы этот код поняли. Рассмотрим его.

<!DOCTYPE html>

Это тег, с которого должен начинаться любой html-документ. Он даёт понять интернет-обозревателю, с какой версией языка разметки тот имеет дело. Без этой строки браузер может начать неправильно обрабатывать код. Написав , мы идентифицировали файл как документ стандарта HTML 5, и браузер, проанализировав первую строку, будет обрабатывать остальной код в соответствии с заданным стандартом.

<html> </html>

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

<head> </head>

«Head» с английского — «Голова». Этот контейнер содержит теги со вспомогательной информацией для веб-браузеров и поисковых систем. Здесь можно задать файлы скриптов, таблицы стилей, ключевые слова и

<title>Моя первая страничка</title>

Заголовок страницы. Открыв документ в браузере, вы наверняка обратили внимание на имя вкладки. Браузер вывел его на экран. Заголовок важен не только для поисковых систем, но и для людей, ведь он помогает понять, о чём страница.

<body> </body>

«Body» — тело. Таким образом у любого html-документа есть голова, содержащая вспомогательную информацию, и тело, внутри которого находится основной код документа. Так как наша страничка — первая, она не должна быть сложной, и поэтому тело документа содержит только текст "Тело HTML-документа (отображается на экране)"

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

<body>

и

</body>

текст (если только это не теги), так что поздравляю, простые html-странички вы создавать уже научились. Внимательный читатель мог задуматься, почему теги расположены именно так:идёт перед, но закрывающий находится перед закрывающим. Чтобы это понять, рассмотрим предложение: Сайт полезный (называется «Яндекс» (кажется так)).

Кавычки расположены внутри скобок, вторые скобки закрываются перед первыми. Правила вложенности в HTML совпадают с правилами вложенности в русском языке. На основе рассмотренного html-шаблона можно создавать другие страницы, просто меняя информацию внутри контейнеров.

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

You must have Javascript enabled to use this form.
Комментарии 4
  • Анонимно 06 Ноября 2016 в 03:49

    <!DOCTYPE html>
    <html>
    <head>
    <title>Моя первая страничка</title>
    </head>
    <body>
    Тело HTML-документа (отображается на экране)
    </body>
    </html>

    ответить
  • Денис 07 Ноября 2016 в 08:47

    Добрый день. В сайтах я полный ноль, но хочу этому научиться. Не могу понять с блокнотом, как у Вас у меня что то не получается. Просто блокнот и все, не переименовать, не сохранить как у Вас показано, не получается. Может объясните по подробней, пжл. Спасибо.

    ответить
  • Булат Ахметшин 16 Ноября 2016 в 12:35

    Скачайте приложение к уроки, там рабочий вариант.

    ответить
  • Саша 14 Ноября 2016 в 17:34

    Спасибо большое автору за урок;)

    ответить