HTML для самых маленьких #4 - пропущенная глава - инструментарий
Всем лучи добра, на протяжении написания предыдущих статей меня не покидала мысль, что я что то забыл. И вот, описывая очередную главу про тэг <body>, во время вставки очередного скриншота с результатом отработки кода в листинге, меня осенило - я же забыл вам рассказать о тестировании своего кода.
- Уроки HTML #1 - HTML для самых маленьких
- HTML для самых маленьких #2 - относительные и абсолютные пути
- HTML для самых маленьких #3 - тэг HEAD и его содержимое
Если Вы еще их не читали, то советую сделать это.
Немного предыстории.
Когда-то, в конце 90-х, я увлекся программированием на языке BASIC. Своего компьютера, у меня не было, как собственно и интернета. Я ходил в библиотеку и брал книгу. Читая, я переносил свои мысли на бумагу в форме придуманного мной кода. После чего я приходил в школу, садился за старенькую "Электронику" и часами отлаживал свои рукописные программы. Впервые, я занялся серьезным изучением HTML в 2001 году. В то время, компьютера у меня все еще не было, как и интернета=) Я ходил на работу и там изучал все прелести. С тех давних пор, у меня сложилось и устоялось мнение, что любая автоматизация, на которую я не могу повлиять - это плохо. Поэтому в своей работе, я не использую, всякого рода программ генераторов кода.
Инструментарий
К чему я все это рассказал, для языка HTML абсолютно не нужен никакой дополнительный программный комплекс. В отличии от десктопного программирования, вы можете обойтись одним блокнотом или любым текстовым редактором, на любом компьютере, даже без интернета. За счет чего это достигается? Существует 2 основных подхода к разработке программ - трансляторный и компиляторный. В краце, компиляторный подход - означает, что ваш исходный код, будет пересобран в нечто иное (исполняемый файл), трансляторный подход означает, что ваш код интерпретирован на лету. HTML является трансляторным языком, за счет чего, для изменения кода, достаточно отредактировать его в исходном файле, нажать кнопочку F5 в браузере и наслаждаться результатом. Делать это можно в любой операционной системе. Итак, что нам понадобится, что бы начать писать на HTML:
- любой редактор кода
- любой браузер (у некоторых до сих пор есть свои особенности)
Редактор кода
Существует огромное множество редакторов для нашего дела, от бесплатного встроенного блокнота, до платных программных комплексов с огромным количеством функций.
Хотя, как я и сказал, редактировать можно и в стандартном блокноте, согласитесь - выглядит не очень
Я для себя выделил несколько редакторов для удобства:
- Notepad++ - вполне себе годная замена обычного блокнота.
Выглядит по лучше - подсветка синтаксиса, нумерация строк, более умная работа по отображению кода, поддержка модулей расширения и много чего еще - легковесно и достаточно мощно - Brackets - еще один удобный и бесплатный редактор
Функционал похож на Notepad++, но есть возможность работать с директориями (удобное их отображение в левой части экрана) а так же немаловажная функция - отладки кода (debug) прямо на лету - функция Live Preview (это когда вы сохраняете изменения в файле, а они уже есть в браузере и не только).
Например, я скачал плагин Beautify, который приводит код к удобно читаемому виду
- IntelliJ IDEA - платный, отличный редактор многих типов файлов - включая HTML. Огромное количество встроенных функций. Поддержка проектов. Есть возможность приобрести студенческую версию бесплатно
Так же, можно найти старую, вполне функциональную версию, и найти открытый ключик самими разработчиками.
Лично мой выбор - IntelliJ IDEA, но если мне нужно срочно где то на колене на чужом компьютере отредактировать файл - я качаю Notepad++. В ближайшее время уделю внимание изучению Brackets. Так же есть и много другого ПО - которое я не изучал.
Файловый менеджер
Для работы с вашим проектом, потребуется файловый менеджер. Так как это статьи для начинающих ребят, я предполагаю, что у вас на компьютере установлена ОС семейства Windows. Следующий софт работает, только под управлением Windows, но под другие ОС существуют аналоги.
- проводник Windows
Для тех, кто никогда не использовал другого, может показаться что этого достаточно для работы - на вкус и цвет все фломастеры разные. - Total Commander - платный двух колоночный файловый менеджер с огромным функционалом и поддержкой плагинов.
Я отказался от его использования по причине платности, хотя и есть урезанная бесплатная версия - Unreal Commander - то же, что и Total Commander, только бесплатный, с множеством функций и поддержкой плагинов.
Мой выбор - Unreal Commander - отличный, бесплатный, до сих пор обслуживаемый файловый менеджер со всеми, необходимыми мне функциями. При работе с архивами или FTP - может поругаться на отсутствие лицензии, но ее можно легко получить из главного меню. Справка -> Управление лицензией. Если для написания кода использовать Brackets или IntelliJ IDEA можно обойтись и без файлового менеджера, так как там встроенная поддержка проектов.
Запуск и проверка HTML
После такой долгой вводной части, подобрались к цели статьи. Итак мы выяснили, что нам необходимо для разработки кода HTML. Я надеюсь, вы знаете как создавать папки и файлы на компьютере. Расскажу как тестировать свой код. Это достаточно легко.
Во первых нам нужно создать пустой файл с расширением html
Я стараюсь всегда давать название файлу index.html так как веб сервера ищут его по умолчанию, если не задан конкретный путь в адресной строке. Но имя может быть любым. Откроем его редактором и напишем код прямо в этот файл. После сохранения открываем этот файл в браузере и любуемся. После дополнительного изменения файла - достаточно нажать клавишу F5 в браузере и результат тут же отобразится на экране.
Спасибо за внимание
Подписывайтесь на мой блог и да прибудет с вами сила.