Что такое HTML, чем открыть и как создать HTML-файл

Что такое HTML? Это язык гипертекстовой разметки веб-страниц. HTML-файл хранит текстовую разметку, которую браузер превращает в страницу. Вы узнаете, как открыть и создать такой файл в Windows и macOS, посмотреть его код и сохранить результат в PDF или изображение.

Что такое HTML и как расшифровывается аббревиатура

Если вы ищете, что такое html или как расшифровывается html, ответ простой: HTML – язык разметки гипертекста. Он описывает структуру веб-страницы с помощью тегов.

Аббревиатура HTML расшифровывается как HyperText Markup Language. HyperText означает «гипертекст», Markup – «разметка», Language – «язык».

HTML что это с точки зрения браузера? Это набор элементов документа: заголовков, абзацев, ссылок, изображений, списков и таблиц. Браузер читает теги и строит из них страницу.

HTML – язык разметки, а не язык программирования.

Он задает структуру документа, но сам не выполняет вычисления и не описывает алгоритмы. CSS задает цвета, размеры и расположение элементов. JavaScript добавляет действия, обработку событий и динамические изменения страницы.

Стандарт HTML развивает WHATWG в формате HTML Living Standard. Разговорное название «хтмл» означает тот же язык.

HTML что это такое в виде файла? HTML-файл – обычный текстовый документ с разметкой и расширением .html или .htm. Поэтому его открывает любой редактор простого текста.

Из чего состоит HTML-файл

Минимальный документ включает служебную часть head и содержимое страницы в body. Сохраните пример под именем index.html, чтобы открыть его в браузере. Для другого документа подойдет, например, имя page12.html.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя страница</title>
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p>Первый абзац.</p>
</body>
</html>

• <!DOCTYPE html> включает стандартный режим отображения документа.
• <html> служит корневым элементом страницы. Атрибут lang="ru" задает язык содержимого.
• <head> хранит служебные данные и настройки страницы.
• <meta charset="utf-8"> задает кодировку текста.
• <title> задает название вкладки браузера.
• <body> содержит видимые элементы страницы.
• <h1> размечает главный заголовок, а <p> – абзац.

Редактор показывает HTML как текст с тегами. Браузер обрабатывает тот же текст и показывает готовую страницу.

HTM и HTML: в чем разница

Браузер одинаково обрабатывает расширения .htm и .html. Фраза «web страницы имеют формат расширение» описывает это неточно: web-страницы имеют формат HTML, а расширение файла – .html или .htm.

Расширение .htm появилось из-за ограничения имен 8.3 в MS-DOS и ранних версиях Windows. Имя занимало до 8 символов, а расширение – до 3. Поэтому слово html сокращали до htm.

Оба расширения соответствуют MIME-типу text/html. Операционная система использует расширение для выбора программы, а сервер передает тип содержимого через MIME.

Сервер может выбирать стартовый документ по своей настройке. Например, Apache использует директиву DirectoryIndex, где задают имена и порядок поиска. Поэтому сервер может отдавать index.html или index.htm.

Запрос «htm что за формат» означает тот же HTML-документ с коротким расширением. Файл можно переименовать из .htm в .html, если настройка сервера допускает новое имя.

Чем открыть HTML-файл

Выберите программу по задаче: браузер показывает страницу, а редактор открывает исходный код для правки. В таблице собраны варианты для Windows, macOS и Linux.

Для первой страницы в Windows хватит Блокнота. Для проекта с несколькими файлами берите редактор кода с подсветкой.

Как открыть файл HTML на компьютере

Просмотр страницы и редактирование кода требуют разных программ. Сначала выберите сценарий, затем откройте файл подходящим способом.

Windows

1. Откройте Проводник и найдите файл с расширением .html или .htm. Дважды щелкните его, чтобы запустить назначенную программу.
2. Если файл открылся в другой программе, щелкните по нему правой кнопкой и выберите «Открыть с помощью». В списке появятся доступные приложения.
3. Выберите браузер. Страница откроется с заголовками, текстом и изображениями.
4. Чтобы изменить код, снова выберите «Открыть с помощью» и укажите редактор. В окне появятся теги <head>, <body> и остальные элементы.

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

macOS

1. Откройте Finder и найдите файл .html.
2. Дважды щелкните файл. macOS запустит назначенную программу.
3. Если нужна другая программа, щелкните файл правой кнопкой и выберите «Открыть в программе».
4. Выберите браузер для просмотра или редактор для изменения кода. В первом случае откроется страница, во втором – текст с тегами.

Чтобы назначить программу для всех HTML-файлов, выделите файл в Finder и нажмите Command+I. В окне сведений выберите приложение для открытия и примените выбор ко всем файлам этого типа.

Файл можно открыть в браузере перетаскиванием. Перетащите его из Проводника или Finder прямо в окно браузера.

Как посмотреть код открытой страницы

Откройте страницу в Chrome или Firefox и нажмите Ctrl+U в Windows. В Chrome на macOS используйте Command+Option+U.

Браузер откроет исходный HTML в отдельной вкладке. Для изменения страницы откройте исходный файл в редакторе и сохраните его после правки.

Как создать HTML-файл

Чтобы понять, как создать html файл, подготовьте шаблон, сохраните его в UTF-8 и задайте расширение .html. После этого откройте файл в браузере.

Блокнот в Windows

1. Откройте Блокнот и вставьте минимальный шаблон из раздела о структуре HTML-файла.
2. Выберите «Файл» → «Сохранить как».
3. В поле типа файла выберите «Все файлы».
4. Введите имя index.html и выберите папку сохранения.
5. В поле кодировки укажите UTF-8.
6. Нажмите «Сохранить». В папке появится файл с расширением .html.
7. Перетащите index.html в окно браузера. На странице появятся заголовок и абзац из шаблона.

Если Блокнот создал имя index.html.txt, откройте параметры Проводника. В настройках отображения файлов отключите скрытие расширений для зарегистрированных типов файлов и примените изменение. Рядом с именами файлов появятся расширения; у вашего документа станет видно окончание .html.txt. Переименуйте файл, удалив только последнее .txt.

TextEdit в macOS

TextEdit умеет работать с форматированным текстом. Перед вставкой HTML переведите новый документ в режим простого текста.

1. Откройте TextEdit и создайте пустой документ.
2. Переведите документ в режим простого текста через меню форматирования. Оформление текста исчезнет.
3. Вставьте HTML-шаблон и сохраните документ под именем index.html.
4. В параметрах сохранения простого текста выберите UTF-8.
5. Откройте файл через Finder или перетащите его в окно браузера. Появятся элементы страницы, а не строки с тегами.

VS Code на Windows и macOS

VS Code ускоряет создание документа с помощью Emmet. Этот способ подходит, если вы планируете редактировать несколько HTML-файлов.

1. Создайте новый файл в VS Code и сохраните его под именем index.html.
2. Введите символ ! и нажмите Tab. Emmet развернет базовый HTML-шаблон.
3. Добавьте между <body> и </body> заголовок и абзац. Если шаблон не появился, вставьте минимальный пример вручную.
4. Посмотрите название кодировки в нижней строке окна редактора. Для русского текста должна быть указана UTF-8.
5. Если указана другая кодировка, нажмите на ее название и выберите сохранение с кодировкой UTF-8.
6. Сохраните изменения и перетащите файл из Проводника или Finder в браузер. Страница покажет добавленные элементы.

После следующей правки сохраните файл и обновите страницу браузера. Если отображается старая версия, снова откройте локальный файл.

Как сохранить HTML-страницу в PDF или картинку

Браузер сохраняет результат отображения страницы. Исходный HTML-файл при этом остается доступным для редактирования.

PDF в Chrome

1. Откройте HTML-файл в Chrome и нажмите Ctrl+P в Windows или Command+P в macOS.
2. В списке принтеров выберите «Сохранить как PDF».
3. Проверьте предварительный просмотр. Печатные стили могут изменить расположение элементов.
4. Нажмите кнопку сохранения, укажите имя и папку файла. PDF появится в выбранной папке.

Снимок всей страницы в Firefox

1. Откройте HTML-файл в Firefox и дождитесь загрузки изображений.
2. Щелкните правой кнопкой по свободному участку страницы и выберите «Сделать скриншот».
3. Нажмите «Сохранить всю страницу». Firefox покажет предварительный просмотр длинного изображения.
4. Нажмите кнопку скачивания. Откройте файл из списка загрузок и проверьте начало и конец страницы.

Почему HTML-файл открывается неправильно

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

• Кракозябры вместо русского текста. Сохраните файл в UTF-8 и добавьте в <head> строку <meta charset="utf-8">. После повторного открытия русский текст должен отображаться нормально.
• Файл получил имя index.html.txt. В параметрах Проводника отключите скрытие расширений для зарегистрированных типов файлов. Когда окончание .html.txt станет видно, удалите последнее .txt. При повторном сохранении выберите тип «Все файлы» и кодировку UTF-8.
• Файл открывается в Word или Блокноте. Выберите «Открыть с помощью» и укажите браузер. Для разового просмотра перетащите документ в его окно.
• Браузер показывает старую версию. Сохраните файл после изменений и обновите страницу. Если результат не изменился, снова откройте локальный файл.
• Не появились картинки или стили. Проверьте относительные пути в атрибутах src и href. Запись src="images/photo.jpg" требует папку images рядом с HTML-файлом и файл photo.jpg внутри нее.

Теперь понятно, что означает html: это разметка документа, которую браузер превращает в веб-страницу. HTML чем открыть – вопрос выбора браузера или редактора. Для создания сохраните шаблон в UTF-8 с расширением .html.

Совет от нашей редакции: храните HTML-файл и папки с картинками рядом, пока собираете страницу. Так относительные пути остаются понятными и реже ломаются.