Блог Тимура Казанского

Как создать HTML, CSS с помощью блокнота


В этой статье я расскажу и на подробном примере покажу, как создать документ HTML или CSS, PHP, JavaScript и так далее с помощью обычного блокнота. Для этой цели я рекомендую использовать бесплатный редактор файлов «Notepad++», это тот же самый блокнот, только функциональнее и намного удобнее. И так, скачиваем его отсюда. Запускаем файл двумя щелчками левой клавишей мыши, выбираем язык и следуем инструкции установки.

Установка блокнота Notepad – выбираем язык

Установка блокнота Notepad – нажимаем далее

Установка блокнота Notepad – нажимаем принимаю

Установка блокнота Notepad – нажимаем далее

Установка блокнота Notepad – нажимаем далее

Установка блокнота Notepad – нажимаем далее

После установки программы на рабочем столе появится иконка с запуском программы, запускаем двумя щелчками левой клавиши мыши и видим, как открылся наш блокнот. Далее вы вводите ваш код, это может быть код на языке: PHP, HTML, JavaScript, CSS и так далее, потом сохраняем нажимая в меню программы – «файл» и выбираем пункт «сохранить как»

Выбираем пункт сохранить как

далее выбираем место, где у вас будет хранится документ, это может быть диск Денвера или просто папка на рабочем столе и в нижней части окна программы указываем имя вашего документа с расширением (для HTML это имя.html, для CSS – имя.css, для PHP – это имя.php, для JavaScript – имя.js). Вот и все, далее загружаем на ваш сервер или сервер на вашем компьютере и радуемся!

Но, это еще не все, теперь я хочу рассказать вам о всей важности создания документа html, css, php и так далее, именно в таких редакторах, как Notepad, который вы только что установили, а не в обычном блокноте, который по умолчанию установлен в вашу операционную систему (Windows), почему? Я сейчас подробно расскажу, вернее не расскажу, а покажу на подробном примере, чем чревато создание документа в обычном блокноте, давайте проведем эксперимент. Создадим обычный документ – щелкаем правой кнопкой мыши на рабочем столе и выбираем пункт создать – текстовый документ,

Установка блокнота Notepad – нажимаем далее

зададим ему имя, пусть это будет test.html, но будьте внимательны, чтобы у вас не получилось имя test.html.txt, так как операционная система обычно скрывает расширение файла(.txt – расширение текстового файла (Блокнота)), если все таки так произошло, то открываем любую папку, далее, в верхней левой части, нажимаем кнопку «упорядочить», далее выбираем пункт «параметры папок и поиска», в открывшемся окне выбираем вкладку «вид», прокручиваем список вниз и помечаем пункт «Показывать скрытые файлы, папки и диски», более подробно и со скриншотами (картинками) я описывал в Уроке 1. Как создать HTML страницу. После того, как указали имя, открываем блокнот и вводим любой код html, или просто копируем готовый код, можете взять опять же из Урока 1. Как создать HTML страницу, как я и сделал.

Вводим код в тестовый документ

Теперь сохраняем наш документ, нажимаем меню Файл – Сохранить, либо просто нажимаем на верхний правый крестик и в выпавшем окошке нажимаем кнопку сохранить.

Вводим код в тестовый документ

Далее загружаем наш документ на хостинг (сервер) и смотрим, что получилось:

Вывод корявого содержимого страницы

Как вы видите весь текст превратился в непонятную абракадабру, почему спросите вы? Все дело в кодировке, дело в том, что самые популярные кодировки, которые используются на сервере (хостинге) - это кодировки UTF-8 и windows 1251, а в блокноте стоит кодировка по умолчанию «ANSI», поэтому сервер и отображает текст некорректно. Кстати говоря, если вы попытаетесь открыть этот файл с рабочего стола компьютера или с какой-либо другой папки, то все будет нормально, в этом и соль, когда люди создают сайт и потом загружают его на реальный сервер (хостинг) происходят некоторого рода сюрпризы с отображением содержимого. Продолжим наш эксперимент и откроем наш файл text.html уже с помощью редактора Notepad

Открываем документ с помощью Notepad

Нажимаем меню «Кодировки» и видим помеченный пункт «Кодировать в ANSI» (т.е. установлена кодировка ANSI).

Кодировка ANSI

Пробуем поменять кодировку на UTF-8 и получаем кривое отображение текста, что же делать?

Пробуем установить кодировку UTF-8

Пробуем перекодировать следующим образом, копируем весь код (выделяем текст, либо комбинацией клавиш Ctrl+A, затем копируем Ctrl+C, либо щелкаем правой кнопкой мыши и выбираем пункты «Выделить все», а затем «Копировать») нажимаем меню Файл – Новый

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

Откроется новая вкладка документа, куда мы вставляем весь скопированный ранее код (либо Ctrl+V, либо щелкаем правой кнопкой мыши и нажимаем на пункт «Вставить»), смотрим кодировку – UTF-8, все хорошо

Кодировка UTF-8

Загружаем на сервер – здесь тоже все отлично.

Корректное отображение на сервере

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

Работа с несколькими документами не закрывая блокнота

Теперь я думаю вы поняли, как правильно создавать документы HTML, CSS и так далее в блокноте (но не стандартном). На этом я думаю все. Увидимся в следующих статьях и уроках. Удачи!

Категория: Все для создания сайтов

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0