5 шагов как сделать страницу сайта на html в блокноте с нуля

В данной статье мы рассмотрим как сделать страницу сайта на html в блокноте с нуля, даже если у вас ранее не было подобного опыта.

Содержание статьи

1 Шаг — установка блокнота notepad++

Вы можете использовать для редактирования html страницы сайта стандартный блокнот windows, но намного удобнее использовать усовершенствованный блокнот «notepad++».

Установить бесплатную программу notepad++ можно с официального сайта https://notepad-plus-plus.org. Notepad++ значительно упрощает создание и редактирование сайта по сравнению со стандартным блокнотом.

2 Шаг — создание html страницы сайта в блокноте

Создание сайта html в блокноте с нуля, начинается в программе notepad++ с клика по ссылке верхнего меню: «Файл» -> «Новый», затем вставляем туда следующий код:

Начальный исходный код

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
</head>
<body>
Текст страницы
</body>
</html>

Код в программе notepad++ будет выглядеть примерно так:

3 шаг — разбор приведенного кода

Общие сведения о тегах

Теперь подробнее разберем, что означают строчки из приведенного выше кода. Как вы уже смогли увидеть, в каждой строке элементы обрамлены скобками < и >. Элементы заключенные внутри скобок < и > называются html тегами. Все теги можно разделить на 3 категории:

- Открывающиеся теги находятся в начале. Например: <p>, <span>, <div>.

- Закрывающиеся теги находятся в конце и имеют знак / перед первой скобкой. Например: </p>, </span>, </div>.

- Одиночные теги не имеют закрывающейся части, поэтому содержат знак / перед последней скобкой. Например: <br />, <img />.

Разбор каждой строчки кода, приведенного выше(на 2 шаге)

<!DOCTYPE> — тег, обозначает тип документа и является своего рода инструкцией для браузера какие алгоритмы использовать для отображения страницы. Этот тег всегда пишется в самом начале. Приведенный в примере тип документа <!DOCTYPE html> является универсальным по стандарту HTML5 и подходит для всех типов документов, поэтому для создания сайта на html в блокноте с нуля рекомендуется использовать его именно в таком виде.

<html lang="ru"> и </html> — открывающийся и закрывающийся теги, внутри которых находится все содержание страницы сайта, включая <head> и <body>. Атрибут тега <lang="ru"> указывает на каком языке написано его содержимое для корректного отображения. Атрибут необязательный, во многих случаях браузер сможет понять язык и без него, но для исключения возможных проблем в отображении его лучше указать.

Наиболее универсальным и распространенным в Русскоязычном интернете является следующее написание(как в примере выше): <html lang="ru">, в таком случае корректно отображаются не только русские символы, но и английские.

Более подробную информацию по атрибуту <lang="ru"> можно найти в интернете по запросу «html атрибут lang».

<head> и </head> — между этими тегами располагается служебная информация о странице: технические данные страницы, ссылки на файлы стилей, скриптов и др. Теги <head> и </head> располагаются сразу после открывающегося тега <html lang="ru">.

<meta charset="utf-8" /> — тег, указывающий на кодировку страницы, вместо кодировки "utf-8" можно указать "windows-1251". Если вы хотите узнать как сделать сайт на html в блокноте с нуля в другой кодировке просто наберите в поисковых системах запрос: «кодировки в html». Но лучше отдавать предпочтение кодировке "utf-8", являющейся наиболее распространенной на данный момент.

<body> и </body> — между этими тегами находится содержание страницы, которое отображается на экране. Тег <body> должен быть единственным и начинаться только после закрытия <head>.

4 Шаг — проверка кодировки

В коде мы указали кодировку <meta charset="utf-8" />, теперь надо убедиться, что она совпадает с кодировкой нашей страницы, иначе вместо букв могут отображаться «кракозябры» или «знаки вопросов».

В блокноте notepad++ кодировка указана внизу справа, там должно быть написано тоже «utf-8». Если надпись другая, например «utf-8-BOM», «ANSI» и т. п., то нужно изменить кодировку. Для изменения кодировки в программе notepad++ нужно кликнуть в верхнем меню на «Кодировка» -> «Преобразовать в UTF-8 без BOM».

Нажимайте ссылку исключительно с названием «Преобразовать...», иначе при выборе пункта без преобразования, например «Кодировка UTF-8 без BOM» вы не измените кодировку символов и они могут быть нераспознаны и безвозвратно превратиться в «кракозябры».

Если вместо кодировки "utf-8", вы ранее указали "windows-1251" в качестве параметра charset тега <meta />, то кодировка страницы тоже должна соответствовать ей, а именно, внизу справа должно быть написано «ANSI», если этой надписи нет, то по аналогии как мы рассматривали выше, можно кликнуть в верхнем меню на «Кодировка» -> «Преобразовать в ANSI».

5 Шаг — сохранение и проверка работы

Теперь в программе notepad++ кликаем «Файл» -> «Сохранить как» и выбираем путь для сохранения. В качестве имени указываем имя index и тип файла .html (HyperText Markup Language). Имя файла index выбрано неслучайно, поскольку именно так должна называться главная страница сайта.

Переходим в папку и кликаем по только, что созданному файлу index.html, после чего в браузере у нас должна открыться примерная такая страничка.

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




© 2007-2017 Студия web дизайна «Webdeco» - Разработка сайтов | Продвижение сайтов | Статьи