В данной статье мы рассмотрим как сделать страницу сайта на 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 в блокноте с нуля более интересным, научимся вставлять изображения, ссылки, таблицы и многое другое.