В данной статье мы рассмотрим как сделать страницу сайта на html в блокноте с нуля, даже если у вас ранее не было подобного опыта.
Вы можете использовать для редактирования html страницы сайта стандартный блокнот windows, но намного удобнее использовать усовершенствованный блокнот «notepad++».
Установить бесплатную программу notepad++ можно с официального сайта https://notepad-plus-plus.org. Notepad++ значительно упрощает создание и редактирование сайта по сравнению со стандартным блокнотом.
Создание сайта html в блокноте с нуля, начинается в программе notepad++ с клика по ссылке верхнего меню: «Файл» -> «Новый», затем вставляем туда следующий код:
Код в программе notepad++ будет выглядеть примерно так:
Теперь подробнее разберем, что означают строчки из приведенного выше кода. Как вы уже смогли увидеть, в каждой строке элементы обрамлены скобками < и >. Элементы заключенные внутри скобок < и > называются html тегами. Все теги можно разделить на 3 категории:
- Открывающиеся теги находятся в начале. Например: <p>, <span>, <div>.
- Закрывающиеся теги находятся в конце и имеют знак / перед первой скобкой. Например: </p>, </span>, </div>.
- Одиночные теги не имеют закрывающейся части, поэтому содержат знак / перед последней скобкой. Например: <br />, <img />.
<!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>.
В коде мы указали кодировку <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».
Теперь в программе notepad++ кликаем «Файл» -> «Сохранить как» и выбираем путь для сохранения. В качестве имени указываем имя index и тип файла .html (HyperText Markup Language). Имя файла index выбрано неслучайно, поскольку именно так должна называться главная страница сайта.
Переходим в папку и кликаем по только, что созданному файлу index.html, после чего в браузере у нас должна открыться примерная такая страничка.
Если получилось также, то можно вас поздравить с успешным завершением первого шага изучения основ html. В следующих статьях мы разберем как сделать сайт на html в блокноте с нуля более интересным, научимся вставлять изображения, ссылки, таблицы и многое другое.
