Как создать HTML-страницу?

Если меня спросить: с чего ты начинал изучать HTML? – я отвечу: с документации по HTML 3.1 и простого перебора тегов – написал и посмотрел, что получилось. Но лучше всего, если есть какая-то пошаговая инструкция с готовым решением задачи для новичков. Эта тема сейчас в тренде и я решил попробовать свои силы на этом поприще. В общем, давайте разбираться, как создать HTML страницу.

Шаг 1. Зайдите на сайт Notepad++ и скачайте последнюю версию этого бесплатного текстового редактора. Установите и запустите редактор на своём компьютере. Создайте новый документ. Действия достаточно простые и что-то расписывать здесь не вижу особого смысла.

Шаг 2. Наберите или скопируйте в поле редактирования следующий HTML-код:

<!DOCTYPE html>
<html>
<head>
  <meta charset="windows-1251">
  <title>Пример HTML страницы</title>
</head>
<body>
  <p>Привет, Мир!</p>
</body>
</html>

А теперь давайте разберёмся, что в нём к чему. И так, перед нами стандартный HTML-документ, который начинается с объявления типа текущего элемента:

<!DOCTYPE html>

Это необходимо для того, чтобы браузер мог понять, как именно следует обрабатывать HTML-страницу. В данном случае приведён DOCTYPE для HTML5.

Далее идёт основной контейнер HTML-страницы, представленный тегом HTML, который состоит из двух основных контейнеров HEAD и BODY.

Контейнер HEAD (с англ. голова) является заголовком документа и содержит дополнительную информацию о HTML-странице. В приведённом примере, такой дополнительной информацией является объявление кодировки документа windows-1251 в теге META и заголовок HTML-страницы: «Пример HTML страницы» в теге TITLE.

Почему я рекомендую использовать кодировку windows-1251, а не UTF-8? Об этом читайте в статье: «Какую кодировку использовать в html

Контейнер BODY (с англ. тело) является телом документа и содержит обрабатываемый и выводимы в окне браузера контент HTML-страцы. В приведённом примере, таким контентом является параграф: «Привет, Мир!» в теге P.

Шаг 3. Сохраните созданную HTML-страницу, как файл index.html. Здесь следует отметить, что HTML-страницы обычно имеют расширение .htm или .html, а файл с именем index зачастую используется как главная (открываемая по умолчанию) страница сайта.

Шаг 4. Откройте HTML-страницу в имеющемся у Вас на компьютере браузере. Для это воспользуйтесь пунктом меню «Запуск». А далее, если Вы хотите открыть HTML-страницы в браузере Firefox, вам нужно кликнуть соответствующий пункт в появившемся меню, например, «Launch in Firefox».

просмотр HTML-страницы из Notepad++ в браузере Firefox

Для дальнейшего изучения HTML языка, я рекомендую использовать небольшой справочник ХТМЛ разметки для начинающих, где приведены все основные теги и примеры их использования.

Главное не останавливаться на достигнутом и постоянно практиковаться в сознании HTML-страниц. Теперь Вы знаете как это делать.

Короткая ссылка: http://goo.gl/J3n8tF

Александр Гриненко
Александр Гриненко комментирует...

При копировании кода и запуске его выдает "Привет, РњРёСЂ!" В чем моя ошибка, в чем проблема, как ее исправить?

Константин Кирилюк
Константин Кирилюк комментирует...

2Александр Гриненко всё зависит от того какой редактор Вы используете и какие в нём настройки. Лично я использую Notepad++, где по умолчанию стоит кодировка документа ASCII, потому в примере используется:

<meta charset="windows-1251">

Впрочем, такой вид указания кодировки применён только в HTML5, так что можно попробовать старый вариант, который тоже будет вполне валидным (правильным), например:

<meta content='text/html; charset=windows-1251' http-equiv='Content-Type'>

Александр Гриненко
Александр Гриненко комментирует...

Все сделал как в выше приведенном примере , в статье, редактор взял Notepad++.Потом сделал как в Вашем ответе - результат такой же. Смотрел кодировки - ASCII не нашел, по умолчанию UFT-8 (без BOM) Может я не в правильном формате сохраняю документ? Могу ли я писать лично Вам по поводу интересующих меня вопросов в процессе саморазвития?

Константин Кирилюк
Константин Кирилюк комментирует...

2Александр Гриненко решил разобрать данный вопрос подробней в статье Кодировка HTML-страницы. Думаю, что прочитав её у Вас всё станет на свои места. Удачи!

Александр Гриненко
Александр Гриненко комментирует...

Благодарю за столь быстрый ответ!

Александр Гриненко
Александр Гриненко комментирует...

Большое спасибо! Все работает! Меня сбило с толку то что в первом ответе Вы упомянули кодировку ASCII, а в настройках Notepad++ по факту ANSI, по этому и написал что не нашел - может(из-за малого объема знаний и опыта) я этого не смог понять - пошагово следовал статье. Теперь у меня возник вопрос - какая разница в этих двух названиях кодировок(и в самих кодировках)?))) Еще раз большое спасибо за такой подробный ответ!!!

Константин Кирилюк
Константин Кирилюк комментирует...

2Александр Гриненко это я уже заговариваюсь, но впринципе ASCII просто более старая кодировка с ограничениями в наборе символов. В ANSI предусмотрена возможность расширять набор символов. Вроде так, всего я не знаю.