Как создать HTML-файл, который будет правильно отображаться в браузере?

как создать html-файл, который будет правильно отображаться в браузере?

Программы редактирования HTML-файлов

Начать работу над созданием собственного сайта и видеть результаты прямо на личном компьютере – не сложно. Для этого не требуется никаких особых ухищрений. Все, что необходимо — это выбрать простую программу для редактирования разметки и определить отдельную папку, в которой вы будете создавать HTML-файлы.

Для редактирования HTML-файлов можно использовать стандартные программы, идущие в комплекте любой операционной системы: блокнот в Windows, gedit в Linux/Ubuntu и т.п. Мы же настоятельно рекомендуем установить редактор Notepad++. Его можно скачать по адресу https://notepad-plus-plus.org/.

Плюсы использования специального редактора:

  • Редактор будет автоматически помечать разметку различными цветами, что позволит улучшить её восприятие при создании HTML-страницы сайта.
  • При наборе какого либо тега с помощью клавиатуры, редактор будет удобным образом предлагать сформировать открывающий и закрывающий тег. Также при перемещении курсора к тэгу и попытке напечатать имя его атрибута, вам будут показаны все доступные варианты.

Установка программы и работа с ней очень проста. Мы не будем подробно разбирать данные вопросы. Оставим это вам, как практическое задание.

Важно 
Ни в коем случае не пытайтесь создавать HTML-страницы в таких программах, как Microsoft Word. Все файлы, созданные с помощью них, имеют собственные форматы, где вместе с текстом сохраняются и его настройки. Это делает невозможным их открытие через браузер.

Создание простого HTML-файла

Создайте на рабочем столе, или в любом удобном вам месте, папку, в которой вы будете хранить HTML-файлы вашего сайта. Далее следуйте по инструкциям, приведенным ниже. Они применимы к редактору Notepad++, но и в других программах действия аналогичны.

Этапы создания файла в программе Notepad++:

  1. Откройте редактор разметки notepad++. В главном меню выберите закладку «файл» и её пункт «новый». В рабочей области редактора откроется поле нового документа.
  2. В главном меню выберите закладку «синтаксисы». При наведении мыши на её пункт «H», откроются подпункты. Выберите подпункт «HTML».
  3. В главном меню выберите закладку «файл» и его пункт «сохранить как».
  4. В открывшемся контекстном меню выберите ранее созданную папку. Нажмите кнопку «Сохранить».

Просмотр страницы в браузере

Теперь перейдем к самому интересному. Мы поместим в файл немного разметки, и откроем его в браузере, словно он был загружен через интернет. Добавьте в ранее созданный HTML-файл пример, приведенный ниже.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Моя первая страница</title>
    </head>
    <body>
        <h1>Все получилось. Страница отображается!</h1>
        <img src="https://coder-booster.ru/content/learning/html-beginners/creating-site-html-files/creating-site-html-files.jpg">
    </body>
</html>

В любом браузере есть встроенный функционал, позволяющий просматривать разметку, сохранённую на вашем компьютере. Все, что нужно сделать — это открыть браузер, в его главном меню выбрать закладку «файл», и его подпункт – «открыть файл». В открывшемся контекстном меню, выберите созданный нами файл. На экране отобразится приветствие.

Последние публикации