Создание HTML документа (файла). Смена расширения файла
HTML документ — это обычный текстовой файл c расширением .html
, который содержит HTML-код. HTML документ иначе ещё называют HTML файлом.
Чтобы из обычного текстового файла (с расширением .txt
) сделать HTML документ, нужно сменить расширение с .txt
на .html
.
Открыть файл, сохраненный с расширением .html
, для просмотра в браузере можно двумя способами:
Windows
- Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
- Кликнуть по нему ПКМ → навести курсор на
открыть с помощью...
→ выбрать нужный браузер.
При получении HTML документа браузер будет отображать его в виде веб-страницы (веб-страница — это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Заголовок</title> </head> <body> <h2>Мой первый заголовок</h2> <p>Мой первый абзац</p> </body> </html>
Теперь откроем HTML файл браузером. В окне браузера мы не увидим отображения самого HTML-кода, потому что он будут интерпретирован для отображения содержимого страницы в нужном виде. Результат данного кода в окне браузера:
Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью...
→ и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу...
и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++
(редактировать с помощью notepad++).
Windows:
- В открытом редакторе (или в обычном текстовом документе) нажимаем
файл
→ выбираемсохранить как
→ внизу в текстовом полеимя файла:
напишем к примеру так:mypage.html
→ жмёмсохранить
. Всё, HTML документ создан. - Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем
переименовать
и меняем расширение с.
наtxt
.html
. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываемПанель управления
→ выбираемПараметры папок
(в Windows 10 данный пункт называетсяПараметры проводника
) → вкладкаВид
→ прокручиваем в самый низ и убираем галочку на
.
С этой темой смотрят:
- Как браузер получает веб-страницы?
- Введение в html
- Структура html-документа
Как создать файл HTML.
Для того, чтобы начать работать с технологией HTML и изучать основные элементы этого языка, нам понадобится специальный файл, в котором мы будем работать.
Давайте приступим к практическим действиям и прямо сейчас создадим свой первый HTML-файл.
Это будет «полигон», который мы будем наполнять содержимым, расширять и экспериментировать.
Для тех, кто любит видео:
Все мои уроки по HTML и верстке сайтов здесь.
Первый способ, который мы рассмотрим по созданию файла HTML — это способ создания файла в простом текстовом редакторе.
Способ 1. Создаем файл html в программе «Блокнот».
Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.
В главном меню программы выбираем «Файл-Сохранить как».
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.html.
Если у Вас не отображается расширение файлов, вот заметка:
Как включить отображение расширений файлов в Windows.
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Только что мы с вами создали свой первый HTML-файл, который уже можем заполнять содержимым.
Аналогично html-файл создается с помощью программы Notepad++.
Но, пользоваться таким способом не всегда бывает удобно и, как видите, это не самый быстрый способ по созданию html-файлов. Есть программы, которые позволяют решить эту проблему намного быстрее.
Одной из таких программ является универсальный редактор кода Dreamweaver.
Способ 2. Создание файла HTML в универсальном редакторе кода (на примере Dreamweaver).
После того, как программа загрузиться появляется следующее окно приветствия:
Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.
После этого файл будет успешно создан. Причем, обратите внимание, что программой был автоматически добавлен некоторый код.
Это обязательный код, который должен присутствовать на веб-странице о нем мы еще поговорим. Dreamweaver добавляет этот код автоматически, что экономит нам время.
Теперь, для того, чтобы этот файл появился на жестком диске, его нужно сохранить. Делается это через меню «Файл – Сохранить как…»
Далее выбираете место, где должен будет находиться этот файл, и нажимаете на кнопку сохранить.
Обратите внимание, чтобы при сохранении вы случайно не убрали расширение html, которое присваивается файлу.
Аналогично можно создать файл HTML и в других программах, я лишь хотел показать общий смысл, как это делается.
Все мои уроки по HTML и верстке сайтов здесь.
КАК: Создание и редактирование документа HTML с помощью Microsoft Word 2002
В ЭТОМ ЗАДАЧЕ
КРАТКОЕ СОДЕРЖАНИЕ
- org/ListItem»>
Создайте свой HTML-документ
-
Добавьте текст и гиперссылки в ваш HTML-документ
Добавьте изображение в свой HTML-документ
Открытие HTML-документа в Word
ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА
В этой статье представлено пошаговое руководство по созданию документа HTML, включая такие элементы, как ввод текста и добавление изображений и гиперссылок в документ HTML.
Используйте один из следующих двух методов для создания нового HTML-документа.
Метод 1
Запустите Microsoft Word.
В области задач «Новый документ» щелкните Пустая веб-страница в разделе «Создать».
В меню «Файл» выберите «Сохранить».
ПРИМЕЧАНИЕ. В поле Сохранить как тип по умолчанию используется веб-страница (*.
htm; *.html).
В поле Имя файла введите имя файла документа, а затем нажмите кнопку Сохранить.
Метод 2
Запустите Microsoft Word.
Создать новый пустой документ.
В меню «Файл» выберите «Сохранить как веб-страницу».
org/ListItem»>
В поле Имя файла введите имя файла документа, а затем нажмите кнопку Сохранить.
Откройте HTML-документ, созданный ранее в этой статье. Для этого выполните следующие действия:
- В меню «Файл» выберите «Открыть».
Перейдите к папке, в которой вы сохранили свою статью, в разделе «Создание HTML-документа» этой статьи.
Выберите файл и нажмите «Открыть».
Введите в документ следующий текст:
Вы можете использовать Microsoft Word для создания HTML-документов так же легко, как и обычные документы Word.
Чтобы создать гиперссылку, выберите слова «Microsoft Word» в набранном тексте.
В меню «Вставка» выберите «Гиперссылка».
В диалоговом окне «Вставка гиперссылки» введите http://www.
microsoft.com/word в поле «Адрес» и нажмите «ОК».
Сохраните изменения в документе.
Поместите точку вставки там, где вы хотите разместить изображение в документе.
В меню «Вставка» выберите пункт «Изображение», а затем нажмите «КлипАрт».
В области задач «Вставка клипа» нажмите «Поиск».
ПРИМЕЧАНИЕ. Если нажать кнопку «Поиск», не вводя ничего в поле «Текст поиска», в результатах поиска будут отображаться все изображения, доступные в настоящее время в вашей системе.
В разделе «Результаты» выберите изображение, которое вы хотите вставить на страницу.
Сохраните изменения и закройте документ.
Выполните одно из следующих действий.
Если область задач «Новый документ» все еще отображается:
В области задач «Новый документ» выберите документ под номером . Откройте документ . Это открывает документ напрямую.
-или-
Если область задач «Новый документ» не отображается:
В меню «Файл» выберите «Открыть».
В диалоговом окне «Открыть» найдите созданный ранее HTML-документ и выберите его.
Нажмите Открыть.
Для получения дополнительных сведений о поддержке HTML в Word 2002 выполните следующие действия:
Откройте Microsoft Word 2002.
org/ListItem»>Перейдите на вкладку Мастер ответов.
Введите HTML в поле Что бы вы хотели сделать? , а затем щелкните Поиск.
Отображаются связанные темы. Щелкните любой элемент, чтобы отобразить информацию.
В меню Справка выберите Справка Microsoft Word.
Резюме
1. Создание вашего первого HTML-документа
1. Создание вашего первого HTML-документа Написание HTML | О | Часто задаваемые вопросы | Выпускники | ссылки | Теги | Уроки | предыдущий | следующий | Вы собираетесь отправиться в путешествие, которое превратит вас из от простого интернет-серфера Интернета до интернет-автор мультимедиа!Цели
После этого урока вы сможете:- Определение значения и назначения тегов HTML.
- Откройте рабочую область для создания новых HTML-документов.
- Используйте текстовый редактор для создания базовой структуры HTML для любой веб-страницы.
- Вставляйте неотображаемые комментарии в файлы HTML.
- Откройте документ в веб-браузере, чтобы посмотреть, как он отображается.
Урок
Теперь, когда вы знаете, что такое HTML, давайте начнем его использовать.(Быстрый тест — что означают эти буквы? Если бы вы читали предыдущий урок, вы бы знали!).
Что такое теги HTML?
Когда веб-браузер отображает страницу, подобную той, которую вы сейчас читаете, она читает из обычного текстового файла и ищет специальные коды или «теги», которые отмечены знаками < и >. Общий формат HTML тег:Например, в заголовке этого раздела используется тег заголовка:строка текста
Этот тег указывает веб-браузеру отображать текст Что такое HTML теги? в стиле заголовка уровня 3 (об этих тегах мы узнаем позже).Что такое теги HTML?

имя_тега>содержит символ косой черты «/». Эта косая черта «/» указывает веб-браузеру прекратить помечать текст тегами. Много HTML теги спарены таким образом. Если вы забыли косую черту, веб-браузер продолжит тег для остального текста в вашем документе, производя нежелательные результаты (в качестве эксперимента вы можете попробовать это позже).
ПРИМЕЧАНИЕ. Веб-браузеру все равно, используете ли вы верхний или нижний регистр. Например,В отличие от компьютерного программирования, если вы сделаете опечатку в HTML, вы не получить «бомбу» или «сбой» системы; ваша веб-страница будет просто выглядеть, ну… неправильный. Быстро и легко зайти внутрь HTML и внести изменения.…
ничем не отличается от…

В вашем браузере небольшой, но открытый словарный запас! Интересным аспектом HTML является то, что если браузер не знает, что делать с данным тегом, он его проигнорирует! Например, в этом документе, который вы просматриваете, тег заголовка для этого раздела на самом деле выглядит так:
но так как ваш браузер, вероятно, не поддерживает тегЧто такое теги HTML?
Открытие рабочего пространства
Чтобы выполнить уроки в этом руководстве, вы должны создать второе веб-окно (это позволяет вам сохранить это окно с инструкциями к уроку и одно окно в качестве «рабочей области»), а также открыть текстовый редактор. приложение в третьем окне.ПРИМЕЧАНИЕ.Это хорошее место, чтобы напомнить вам, что мы предоставим несколько общих инструкций, поскольку названия меню и имена файлов могут различаться в зависимости от того, какой веб-браузер вы используете.
Таким образом, вы захотите, чтобы вам было довольно удобно прыгать между различными приложениями и окнами. на твоем компьютере. Другой вариант — распечатайте инструкции к уроку (но мы действительно не хотим пропагандировать резню деревьев).
Вот шаги для настройки вашего рабочего пространства:
- В меню Файл веб-браузера выберите Новое окно или Новый веб-браузер .
Должно появиться второе веб-окно. Думайте о первом окне как о своем
«учебник» и второе окно клона как ваше «рабочее пространство» для
завершение уроков HTML.
ПРИМЕЧАНИЕ: Единственная причина иметь здесь два окна — это то, что вы можете читать инструкции к урокам, а также просматривать свой рабочий документ. Вы также можете добавить эту веб-страницу в закладки и вернуться сюда с помощью Перейти или История меню.
- Далее вам нужно выйти из веб-браузера и открыть программу текстового редактора.
ПРИМЕЧАНИЕ. Вам нужно будет перемещаться вперед и назад между другой окна, чтобы завершить эти уроки. Это может быть проблемой в зависимости от размера вашего монитора. Вы можете изменить размер трех окна, чтобы все они поместились на экране, или расположите окна так, чтобы Вы можете нажать на любой из них, чтобы вывести его на передний план.
Если вы используете программу текстового процессора для создания HTML, обязательно сохраните в формате простого текста (или ASCII).

Также вам поможет, если вы сначала создадите новый каталог/папку на своем компьютере, который будет вашей рабочей областью. Вы можете назвать это рабочей областью или myspace или как угодно; просто убедитесь, что вы храните все файлы, которые вы создаете, в этой одной области. Это сделает вашу жизнь проще… ну, по крайней мере, пока вы работаете над этим уроком!
Создание HTML-документа
Документ HTML состоит из двух отдельных частей: заголовка и тела. заголовок содержит информацию о документе, который не отображается на экране. body затем содержит все остальное, что отображается как часть веб-страницы.Базовая структура любой HTML-страницы такова:
<голова> голова> <тело> : : : : : : тело>Самая первая строка:
2//EN">технически не требуется, но является кодом, который сообщает браузеру, для какой версии HTML написана текущая страница. Дополнительные сведения см. в справочной спецификации W3C.
Заключите всю HTML-работу в теги…. Внутри находится сначала ваш
…, а затем…. Ваши веб-страницы могут нормально отображаться на большинстве компьютеров без каких-либо из этих тегов. Однако используя их, ваши веб-страницы будут полностью соответствовать международным Стандарты HTML и обеспечить совместимость с будущими веб-браузерами.Это хорошая привычка, как чистить зубы.
Также обратите внимание на теги комментариев , заключенные в . Текст между тегами НЕ отображается на веб-странице, но предназначен для размещения информации, которая может быть полезна вам или кому-либо еще, кто может просмотреть HTML-код, стоящий за веб-страницей. Когда ваши веб-страницы станут сложными (как вы увидите, когда мы перейдем к таблицам, фреймам и другим забавным вещам примерно через 20 уроков!), комментарии будут очень полезны, когда вам нужно обновить страницу, которую вы, возможно, создали давным-давно. .
Вот шаги для создания вашего первого файла HTML. Вы готовы?
- Если он еще не открыт, запустите программу текстового редактора.
- Перейти в окно текстового редактора.
- Введите следующий текст (не обязательно нажимать RETURN при
конец каждой строки; веб-браузер будет переносить весь текст по словам):
<голова>
Вулканическая сеть голова> <тело> На этом уроке вы будете использовать Интернет для поиска информацию о вулканах, а затем написать отчет о ваши результаты. тело>ПРИМЕЧАНИЕ. Посмотрите, где находится тег
… . Он находится в части… и поэтому не будет видны на экране. Что оно делает? Тегиспользуется для уникальной идентификации каждого документа, а также отображается в строке заголовка документа. окно браузера.
На третьем уроке вы узнаете, как добавьте заголовок, который будет отображаться непосредственно на вашей веб-странице.
Также обратите внимание, что мы вставили тег комментария, в котором указано имя автора и дата создания документа. Вы можете написать что угодно между тегами комментариев, но это видно только тогда, когда вы смотрите на исходный HTML-код веб-страницы.
- Сохраните документ как файл с именем «Volc.html» и храните его в
папку/каталог «рабочей области», которую вы создали для этого руководства.
Кроме того, если вы используете программу текстового процессора для создания своего HTML, обязательно сохраните его в формате обычного текста (или ASCII).
ПРИМЕЧАНИЕ. Для пользователей Windows 3.1 вам необходимо сохранить все файлы HTML с именами, заканчивающимися на .HTM, поэтому в этом случае ваш файл должен быть VOLC.HTM. Не волнуйтесь! Ваш веб-браузер достаточно умен, чтобы знать, что файл с именем, оканчивающимся на .
Используя это расширение имени файла, веб-браузер будет знать, что нужно читать этот текст. файлы в формате HTML и правильно отображать веб-страницу.HTM, является файлом HTML.
Вы можете создавать файлы с такими именами, как VOLC.HTML, если вы используете Windows95 или Windows NT.
Отображение документа в веб-браузере
- Вернитесь в окно веб-браузера, которое вы используете для своего рабочего пространства. (Если у вас еще не открыто второе окно браузера, выберите Новое окно или Новый браузер в окне Файл .)
- Выберите Открыть файл… в меню Файл .
- Используйте диалоговое окно, чтобы найти и открыть созданный файл, «Volc.html»
- Теперь вы должны увидеть в строке заголовка окна рабочей области текст «Вулканическая сеть», а на веб-странице ниже одно предложение текста, которое вы написали: «В этом уроке…»
Проверьте свою работу
Сравните свой документ с образцом того, как должен выглядеть этот документ.
Если ваш документ отличается от образца, просмотрите текст, который вы ввели в текстовом редакторе.
Самая распространенная ошибка: «Я не вижу заголовок!» Вы не должны! Текст внутри тега
Обзор тем
- Что такое теги HTML?
- Где отображается текст тега заголовка?
- Какие шаги необходимо выполнить для создания простого HTML-документа?
- Как создать тег комментария?
- Как можно отобразить HTML-документ в веб-браузере?
Независимая практика
Придумайте тему для своей веб-страницы. Теперь создайте свой собственный HTML текстовый файл, содержащий тег