Создание HTML документа
HTML документ — это обычный текстовой файл c расширением .html , который содержит HTML-код. HTML документ иначе ещё называют HTML файлом .
Чтобы из обычного текстового файла (с расширением .txt ) сделать HTML документ, нужно сменить расширение с .txt на .html .
Открыть файл, сохраненный с расширением .html , для просмотра в браузере можно двумя способами:
- Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
- Кликнуть по нему ПКМ → навести курсор на открыть с помощью. → выбрать нужный браузер.
При получении HTML документа браузер будет отображать его в виде веб-страницы ( веб-страница — это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:
Заголовок Мой первый заголовок
Мой первый абзац
Теперь откроем HTML файл браузером. В окне браузера мы не увидим отображения самого HTML-кода, потому что он будут интерпретирован для отображения содержимого страницы в нужном виде. Результат данного кода в окне браузера:
Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью. → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу. и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).
Смена расширения файла
- В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмём сохранить . Всё, HTML документ создан.
- Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html . Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываем Панель управления → выбираем Параметры папок (в Windows 10 данный пункт называется Параметры проводника ) → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов .
С этой темой смотрят:
- Как браузер получает веб-страницы?
- Введение в html
- Структура html-документа
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
Как создать HTML файл
Файлы HTML определяют структуру веб-страницы. Таким образом, чтобы создать веб-страницу, самый первый шаг — написать для нее файл HTML. В этой статье вы узнаете, как создать HTML-файл с нуля.
Что такое HTML-документ
Документ HTML — это простой текстовый файл с расширением .html или .htm . Между ними почти нет разницы, но .html встречается чаще.
Этот текстовый файл содержит информацию, которую браузеры используют для создания структуры веб-страницы.
Инструменты, которые нам нужны
Теперь вопрос в том, какой инструмент нам нужен для создания HTML-файла.
Самый простой способ — использовать обычный текстовый редактор, например текстовый редактор по умолчанию в вашей операционной системе.
Расширенные текстовые редакторы и IDE, такие как Visual Studio Code, Sublime, Atom или Bracket, могут помочь вам с подсказками синтаксиса и выделением ошибок. Вы можете использовать их для написания сложного HTML-кода и управления им.
Эти расширенные текстовые редакторы можно загрузить и использовать бесплатно, и они доступны для всех популярных операционных систем, таких как Windows, Linux и macOS.
Шаги по созданию HTML-документа
А теперь попрактикуемся. Давайте создадим простой HTML-документ.
- Запустите текстовый редактор по вашему выбору и создайте новый текстовый документ.
- Поместите в него несколько HTML-тегов. Если вы не знакомы с синтаксисом HTML, вы можете скопировать и вставить приведенный ниже код в новый пустой документ. О тегах мы узнаем позже. А сейчас давайте сосредоточимся на создании документа
head> title> A Sample Webpage title> head> body> p> Hello World! p> body> html>
- Когда вы закончите писать код, самое время сохранить документ. При сохранении документа вы можете дать любое имя, использовать .html или .htm в качестве расширения и UTF-8 в качестве системы кодировки символов (если потребуется).
Проверьте HTML-документ с помощью браузера
После сохранения файла мы можем убедиться, что он работает.
Перейдите в место, где вы сохранили файл. Найдя файл, дважды щелкните его, чтобы открыть веб-браузер по умолчанию в вашей операционной системе.
В результате вы должны увидеть пустую страницу с заголовком «Пример веб-страницы» и одним абзацем в ней «Hello World!» .
Спасибо, что дочитали до конца!
Это все что касается создания HTML-файла. Теперь вы можете начать изучать различные HTML-теги и атрибуты, которые мы можем использовать в HTML-документах.
Как создать HTML файл
По своему содержанию HTML файл является текстовым файлом. То есть его можно открыть и изменять в любом редакторе текста. К примеру, в «блокноте» на системе Windows. Поэтому создание HTML файла ни чем не отличается от создания простого текстового документа.
Рассмотрим пошаговую инструкцию создания, просмотра и редактирования HTML файла. Рассматривать задачу будем с позиции пользователя операционный системы Windows.
Создать HTML файл
Создайте на компьютере текстовый документ через простейший текстовый редактор. К примеру, через блокнот. Войдите в папку, где сохранён только что созданный текстовый документ, и переименуйте его, добавив в самый конец названия файла «.html«. При этом удалив старое расширение «.txt«.
Другими словами, если текстовый документ назывался «Новый текстовый документ.txt«, то переименуете его в «Новый текстовый документ.html«.
Обратите внимание на то, что по умолчанию в системе Windows скрыты расширения файлов. Поэтому вместо имени файла «Новый текстовый документ.txt» вы можете увидеть только «Новый текстовый документ». Чтобы включить отображение расширений файлов, нажмите на закладку «Вид» в проводнике файлов, а затем поставьте галочку на пункте «Расширения имён файлов»
Редактировать HTML файл
Кликните правой кнопкой мыши на html файл. Выберите пункт «Открыть с помощью». В этом пункте выберите блокнот или другой редактор простейших текстовых файлов. Если такого пункта нет, то нажмите «Выбрать другое приложение» и выберите блокнот в списке приложений.
Можно редактировать HTML файл и в других текстовых редакторах. К примеру, в MS Office Word. Но есть вероятность, что будут проблемы с сохранением файла: редактор самостоятельно будет вставлять ненужные теги при сохранении. Поэтому рекомендуем использовать простейшие программы для редактирования текстовых файлов. К примеру, «блокнот».
HTML файл является обычным текстовым файлом. Поэтому вы можете редактировать и сохранять его без использования специальных программ.
Посмотреть HTML файл в браузере
Чтобы посмотреть как выглядит сохранённый HTML файл в браузере, кликните на него два раза. Загрузится браузер и отобразит html файл. Если этого не произошло и файл открылся в текстовом редакторе, то кликните на файл правой кнопкой мыши. Затем выберите пункт «Открыть с помощью», в котором выберите свой браузер. Если в этом списке браузера нет, то нажмите «Выбрать другое приложение» и выберите свой браузер из всех установленных на компьютере приложений.
При сохранении HTML файла нет нужды закрывать его в браузере. Вы можете одновременно изменять содержимое файла через текстовый редактор и просматривать результаты в браузере. Только не забудьте обновить страницу в браузере после внесения изменений в файл (кнопка — «F5»).
HTML-файл открывается как TXT
Последнее время я стал получать огромное количество писем с одним и тем же вопросом: «Почему HTML-файл открывается как TXT?«. Этот вопрос действительно, пожалуй, самый популярный, и чтобы не отвечать мне одно и то же, а так же, чтобы была чёткая инструкция, как эту ошибку исправить, я и решил написать данную статью.
Проблема лежит в ОС Windows 7 и Windows XP (скорее всего, и в Windows Vista), так как по умолчанию данные операционные системы скрывают зарегистрированные расширения файлов. Поэтому когда Вы пытаетесь создать HTML-файл, то, написав, например, index.html, в реальности файл называется index.html.txt, однако, Вы этого не видите и, безусловно, данный файл как HTML обрабатываться не будет.
Проблема решается достаточно просто. Для начала инструкция для Windows XP:
- Откройте «Мой компьютер«.
- Зайдите в меню «Сервис» и выберите пункт «Свойства папки«.
- В открывшемся окне выберите вкладку «Вид«.
- Уберите галочку с пункта «Скрывать расширения для зарегистрированных типов файлов«.
- Нажмите ОК.
Инструкция для Windows 7:
- В строке поиска меню «Пуск» введите «Параметры папок«.
- Выберите в результатах поиска пункт «Параметры папок«.
- В открывшемся окне выберите вкладку «Вид«.
- Уберите галочку с пункта «Скрывать расширения для зарегистрированных типов файлов«.
- Нажмите ОК.
Таким образом, все Ваши файлы на компьютере должны теперь иметь расширения. Далее идём к нашим HTML-файлам и обнаруживаем, что на конце стоит .txt, вот эту часть мы и стираем.
В результате, теперь HTML-файлы будут открываться как HTML, а не как TXT.
Создано 17.10.2011 10:10:11
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 13 ):
RussianPro 17.10.2011 19:39:56
Ну в принципе ничего нового я не узнал, но всё равно спасибо!
Admin 17.10.2011 19:43:01
Для Вас ничего нового (как и для других бывалых пользователей компьютера), а вот для огромного количества новичков данная статья — это огромная помощь.
RussianPro 17.10.2011 19:47:17
Ну да. Я когда Windows пере устанавливаю, первым делом меняю настройки расширений. Очень удобно, когда расширения файлов показаны!
wrestler05 09.11.2011 23:45:02
Спасибо огромное,Михаил. Реально,для новичков данная статья-это огромная помощь!
bai1945 11.01.2013 21:37:07
Большое спасибо, Михаил. Кто же знал, что расширение скрывают.