HTML для самых маленьких #4 - пропущенная глава - инструментарий

 Всем лучи добра, на протяжении написания предыдущих статей меня не покидала мысль, что я что то забыл. И вот, описывая очередную главу про тэг <body>, во время вставки очередного скриншота с результатом отработки кода в листинге, меня осенило - я же забыл вам рассказать о тестировании своего кода.

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

Спасибо за внимание
Подписывайтесь на мой блог и да прибудет с вами сила.

образованиепрограммированиеhtmlверсткафронтенд
25%
18
21
4.321 GOLOS
0
В избранное
Александр
Блог о том и о сем
21
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (3)
Сортировать по:
Сначала старые