Приветствую всех новичков в области веб-разработки! Если вы хотите научиться создавать веб-странички, то эта статья как раз для вас. Все потому что в ней я поведаю вам основы основ, без которых дальнейшее изучение языка html просто невозможно. Я расскажу, как создать файл html несколькими способами.
Объясню, почему существует два вида расширений подобных документов, а также приведу в качестве примера основной программный код на языке разметки. Ну что ж, давайте приступать к обучению!
Поговорим о технических особенностях
Наверное, у каждого бывала подобная ситуация с картинкой, когда при ее сохранении на компьютере случайно было нажато не «Сохранить картинку как…», а «Сохранить ссылку как…». Во втором случае после открытия сохраненного файла в браузере отображается веб-страница сайта с выбранным изображением. Думаю, знакомо.
Так вот если вы присмотритесь к расширению этого файла, то увидите там расширение .htm или .html. Почему же так? Все очень просто. Потому что язык разметки гипертекста называется html и составляет «скелет» всех сервисов в сети.
Чаще всего встречается второй вид разметки, состоящий из четырех букв. Однако в DOS-компьютерах используется первый вариант, так как запрещено в расширении использовать более трех символов. Но вы должны понимать, что это идентичные файлы.
Документы с описываемыми расширениями предназначены для открытия в браузерах, поэтому любой существующий браузер любой версии обязательно откроет для просмотра такие файлы.
Если же вам интересно посмотреть не результат кода (т.е. внешний вид веб-страницы, пользовательский интерфейс и т.д.), а сам программный код, то html-документы можно открыть при помощи не только специализированных программ для разработчиков, а и в обычных редакторах текста. Удобно, правда?
Распространенные способы создания html-файлов
Существует множество способов создания описываемых документов. Я перечислю наиболее популярные. Начну, пожалуй, с простых.
Для начинающих
Тех, кто сейчас впервые будет создавать html-страницу, я порадую! Для этого вам понадобится всего лишь одно приложение. Стандартное. Внимание! Открывайте «Блокнот». Да-да, именно его, если конечно у вас в качестве ОС стоит Windows 7, 8, 10 ну или может XP. Если же вы работаете на маке, т.е. на Mac OS, то в таком случае стоит открыть TextEdit.
Хочу обратить ваше внимание, что описывать порядок действий я буду на примере работы в блокноте.
Итак, если вы открыли указанную выше программу, то перейдем к следующему действию. Сейчас вам нужно будет скопировать код, прикрепленный ниже, и вставить его в документ.
1611b7f05858434cbc64ccbe0a2f8b5c000
Обратите внимание на презентованную программную реализацию. Это базовый код, который всегда будет присутствовать в ваших проектах.
Теперь нужно сохранить файл. Однако не спешите, а выполните все действия по порядку:
- Переведите курсор мышки на панель с закладками и нажмите на вкладку «Файл»;
- Выберете пункт «Сохранить как…»;
- Измените тип кодировки на UTF-8;
- Теперь обратите внимание на тип файла. Здесь нужно изменить формат с текстового на «Все файлы (*.*)»;
- Теперь пишем наименование сохраняемого документа. В мире веб-разработки главную страницу сайта принято называть index.html. Однако примеру вы можете дать любое название. Главное здесь соблюсти правило расширения. После имени добавьте .html и далее сохраните документ.
Вот теперь вы создали файл, который по умолчанию должен открыться в браузере.
Для небольших проектов
Если вы от новичка перешли на следующий уровень, то «Блокнота» вам будет мало. Во-первых, в нем тяжело отслеживать ошибки. Во-вторых, в нем нет встроенной валидации и проверки синтаксиса. Также очень удобно, когда теги языка html подсвечиваются другими цветами. Все это ускоряет и оптимизирует работу верстальщика. Поэтому стоит скачать Notepad ++.
На самом деле в одной из своих прошлых публикаций я описывал десять лучших визуальных редакторов языка разметки. Поэтому для работы вы можете выбрать один из них. Однако Notepad ++ считается одним из лучших и наиболее популярных редакторов среди остальных. Для создания идентичного документа стоит просто:
- В новый файл скопировать код программы;
- Во вкладке «Кодировка» выбрать «Кодировать в UTF-8 (без BOM)»;
- Нажать пункт «Сохранить как…»;
- И повторить действия из предыдущей инструкции, т.е. поменять расширение и тип файлов.
Для продвинутых
Если же вы решили сразу начинать работать в профессиональных средах разработки, то там все выглядит уже несколько по-другому. Так, в Visual Studio, программном продукте компании Microsoft, создать файл html можно благодаря таким действиям:
- Во вкладе «Файл» выбрать пункт «Новый» и далее снова «Файл…» (Его также можно создать при помощи комбинации клавиш Ctrl+N);
- Далее выбрать тип создаваемого документа. Нам необходим «HTML Page»;
- После вставки кода сохраните страницу с необходимым именем.
Как видите все очень просто.
Конечно работа в профессиональных средах сильно отличается от других вариантов, так как первая обладает рядом весомых преимуществ: отображение/скрытие номера (индекса) строк кода, подсветка ошибок, автодополнение и автозакрытие тегов, возможность тестировать код прямо через Visual Studio и т.д.
В случае если вам не нужно создавать документ на компьютере, а необходимо просто проверить код или посмотреть, что отобразиться на экране в браузере, можно использовать онлайн-редакторы. Я отдаю предпочтение простенькому, но быстроработающему сервису, расположенному на сайте.
Надеюсь, вам понравилась моя статья и вы почерпнули для себя новую полезную информацию. А если это так, то вступайте в ряды моих верных подписчиков и вместе со своими друзьями следите за обновлениями блога. До встречи!
Пока-пока!
С уважением, Роман Чуешов
Роман, какой версией Visual Studio пользуетсь? Слышал, что последняя версия под 50 Гигов весит. Помню, что шестая от 98 года около 2 гиг была. Альтернатива Visual Studio есть, тот же Borland, Дельфи.
Давненько дело было, Денис, снес его. Если память не изменяет то весил он около 10 Гигов вроде. Но могу ошибаться. Устанавливать его конечно заколебешься.)
Для Notepad ++ необязательно в «Кодировке» выбирать «Кодировать в UTF-8 (без BOM)». Это же html-файл, ему что с BOM, что без BOM, всё одинаково.
Не знал, что разница между html и hml заключается в работе компьютеров под разные ОС. Неужели до сих пор есть компьютеры под управлением DOS? Представляю, как выглядит инет-страница в DOS.
Ужас!!!
В кабинете, где рентген делают, обратил внимание, что врач заносит данные в таблицу как в DOS, а может DOS и есть. И не один раз в кабинетах видел эту операционку.