Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Как создать файл html для новичка и профессионального верстальщика

Приветствую всех новичков в области веб-разработки! Если вы хотите научиться создавать веб-странички, то эта статья как раз для вас. Все потому что в ней я поведаю вам основы основ, без которых дальнейшее изучение языка html просто невозможно. Я расскажу, как создать файл html несколькими способами.

Объясню, почему существует два вида расширений подобных документов, а также приведу в качестве примера основной программный код на языке разметки. Ну что ж, давайте приступать к обучению!

Поговорим о технических особенностях

Наверное, у каждого бывала подобная ситуация с картинкой, когда при ее сохранении на компьютере случайно было нажато не «Сохранить картинку как…», а «Сохранить ссылку как…». Во втором случае после открытия сохраненного файла в браузере отображается веб-страница сайта с выбранным изображением. Думаю, знакомо.

Так вот если вы присмотритесь к расширению этого файла, то увидите там расширение .htm или .html. Почему же так? Все очень просто. Потому что язык разметки гипертекста называется html и составляет «скелет» всех сервисов в сети.

Чаще всего встречается второй вид разметки, состоящий из четырех букв. Однако в DOS-компьютерах используется первый вариант, так как запрещено в расширении использовать более трех символов. Но вы должны понимать, что это идентичные файлы.

Документы с описываемыми расширениями предназначены для открытия в браузерах, поэтому любой существующий браузер любой версии обязательно откроет для просмотра такие файлы.

Открываем html с помощью notepad ++

Если же вам интересно посмотреть не результат кода (т.е. внешний вид веб-страницы, пользовательский интерфейс и т.д.), а сам программный код, то html-документы можно открыть при помощи не только специализированных программ для разработчиков, а и в обычных редакторах текста. Удобно, правда?

Распространенные способы создания html-файлов

Существует множество способов создания описываемых документов. Я перечислю наиболее популярные. Начну, пожалуй, с простых.

Для начинающих

Тех, кто сейчас впервые будет создавать html-страницу, я порадую! Для этого вам понадобится всего лишь одно приложение. Стандартное. Внимание! Открывайте «Блокнот». Да-да, именно его, если конечно у вас в качестве ОС стоит Windows 7, 8, 10 ну или может XP. Если же вы работаете на маке, т.е. на Mac OS, то в таком случае стоит открыть TextEdit.

Хочу обратить ваше внимание, что описывать порядок действий я буду на примере работы в блокноте.

Итак, если вы открыли указанную выше программу, то перейдем к следующему действию. Сейчас вам нужно будет скопировать код, прикрепленный ниже, и вставить его в документ.

e36cb47b3612adb9f5a507cd25cbeb1f000

Обратите внимание на презентованную программную реализацию. Это базовый код, который всегда будет присутствовать в ваших проектах.


Теперь нужно сохранить файл. Однако не спешите, а выполните все действия по порядку:

  1. Переведите курсор мышки на панель с закладками и нажмите на вкладку «Файл»;
  2. Выберете пункт «Сохранить как…»;
  3. Измените тип кодировки на UTF-8;
  4. Теперь обратите внимание на тип файла. Здесь нужно изменить формат с текстового на «Все файлы (*.*)»;
  5. Теперь пишем наименование сохраняемого документа. В мире веб-разработки главную страницу сайта принято называть index.html. Однако примеру вы можете дать любое название. Главное здесь соблюсти правило расширения. После имени добавьте .html и далее сохраните документ.

Открываем в notepad

Вот теперь вы создали файл, который по умолчанию должен открыться в браузере.

Для небольших проектов

Если вы от новичка перешли на следующий уровень, то «Блокнота» вам будет мало. Во-первых, в нем тяжело отслеживать ошибки. Во-вторых, в нем нет встроенной валидации и проверки синтаксиса. Также очень удобно, когда теги языка html подсвечиваются другими цветами. Все это ускоряет и оптимизирует работу верстальщика. Поэтому стоит скачать Notepad ++.

На самом деле в одной из своих прошлых публикаций я описывал десять лучших визуальных редакторов языка разметки. Поэтому для работы вы можете выбрать один из них. Однако Notepad ++ считается одним из лучших и наиболее популярных редакторов среди остальных. Для создания идентичного документа стоит просто:

  1. В новый файл скопировать код программы;
  2. Во вкладке «Кодировка» выбрать «Кодировать в UTF-8 (без BOM)»;
  3. Нажать пункт «Сохранить как…»;
  4. И повторить действия из предыдущей инструкции, т.е. поменять расширение и тип файлов.

notepad++

Для продвинутых

Если же вы решили сразу начинать работать в профессиональных средах разработки, то там все выглядит уже несколько по-другому. Так, в Visual Studio, программном продукте компании Microsoft, создать файл html можно благодаря таким действиям:

  1. Во вкладе «Файл» выбрать пункт «Новый» и далее снова «Файл…» (Его также можно создать при помощи комбинации клавиш Ctrl+N);
  2. Далее выбрать тип создаваемого документа. Нам необходим «HTML Page»;
  3. После вставки кода сохраните страницу с необходимым именем.

Как видите все очень просто.

Конечно работа в профессиональных средах сильно отличается от других вариантов, так как первая обладает рядом весомых преимуществ: отображение/скрытие номера (индекса) строк кода, подсветка ошибок, автодополнение и автозакрытие тегов, возможность тестировать код прямо через Visual Studio и т.д.

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

online редактор

Надеюсь, вам понравилась моя статья и вы почерпнули для себя новую полезную информацию. А если это так, то вступайте в ряды моих верных подписчиков и вместе со своими друзьями следите за обновлениями блога. До встречи!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 11 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Денис

    Роман, какой версией Visual Studio пользуетсь? Слышал, что последняя версия под 50 Гигов весит. Помню, что шестая от 98 года около 2 гиг была. Альтернатива Visual Studio есть, тот же Borland, Дельфи.

    03.04.2017 в 23:50
    • Роман

      Давненько дело было, Денис, снес его. Если память не изменяет то весил он около 10 Гигов вроде. Но могу ошибаться. Устанавливать его конечно заколебешься.)

      06.04.2017 в 00:18
  • Денис

    Для Notepad ++ необязательно в «Кодировке» выбирать «Кодировать в UTF-8 (без BOM)». Это же html-файл, ему что с BOM, что без BOM, всё одинаково.

    04.04.2017 в 23:13
  • Денис

    Не знал, что разница между html и hml заключается в работе компьютеров под разные ОС. Неужели до сих пор есть компьютеры под управлением DOS? Представляю, как выглядит инет-страница в DOS.

    10.04.2017 в 18:45
    • Роман

      Ужас!!!

      10.04.2017 в 22:10
    • Денис

      В кабинете, где рентген делают, обратил внимание, что врач заносит данные в таблицу как в DOS, а может DOS и есть. И не один раз в кабинетах видел эту операционку.

      26.04.2017 в 19:24