Как создать файл html на windows 7. Создание HTML документа

Приветствую, друзья. Сегодня вернемся к HTML, но не продолжим его изучение, а вернемся к самым истокам, дабы в будущем не у кого не возникало вопросов и проблем. Как создать HTML файл ? Именно так звучит самый популярный вопрос начинающих пользователей. И отсюда довольно часто возникает другой вопрос: «Что делать, если вместо HTML страницы отображается просто текст ?» И чтобы закрыть подобные вопросы на самом начальном этапе, написана эта статья.

Данные проблемы чаще всего возникают не из-за самого пользователя, а из-за операционной системы, используемой на компьютере. При чем здесь операционная система? Все дело в том, что по умолчанию операционные системы Windows, в частности XP и 7, скрывают расширение файлов. Отсюда и возникают проблемы, при создании файлов и назначении им правильного формата.

Я буду объяснять, на примере Windows XP и Windows 7, так как другие не использовал и не знаю, что там, да как.

Итак, для начала включим отображение расширения файлов.

Если используется Windows XP:

Открываем «Мой компьютер»

Заходим в «Сервис» и выбираем пункт «Свойства папки».

Затем, в открывшемся окне выбираем вкладку «Вид».

Нажимаем «Применить» и «ОК».

Если используется Windows 7:

Открываем «Компьютер»

Кликаем на «Упорядочить» и выбираем из списка «Параметры папок и поиска»

В открывшемся окне выбираем вкладку «Вид».

Находим пункт «Скрывать расширения для зарегистрированных типов файлов», и снимаем галочку.

Нажимаем «Применить» и «ОК».

Теперь, если все сделано правильно в конце имени файлов, будет дописано расширение файла, типа: .txt, .html и т.д. Так будет гораздо удобнее ориентироваться в форматировании файлов.

Переходим к решению поставленных вопросов.

Как создать html файл?

Здесь, все на самом деле, до безобразия просто. Есть несколько вариантов, в зависимости, каким инструментом мы пользуемся.

Если используется NotePad++:

Сначала, хочу заметить, что это самый оптимальный и удобный вариант, для написания html, css и php. Подробнее о программе, я уже рассказывал .

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

Выбираем подходящий синтаксис, для подсветки кода, что очень облегчает написание кода.

После чего, сохраняем.

Таким образом, можно создать html файл, с помощью .

Если используется блокнот:

Скажу сразу, что это не оптимальный вариант на данный момент. Но все же, я не могу упустить данный способ.

Создаем новый текстовый документ.

Пишем HTML код.

Сохраняем документ, как есть. (В формате txt.)

И переименовываем документ. При этом главное изменить не имя документа, а его расширение. То есть txt заменить на html. После чего, нажать «Enter». Выскочит предупреждение, где нажимаем на кнопку «ДА».

Вот так мы создали файл в формате html, с помощью блокнота.

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

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

Что делать, если вместо HTML страницы отображается текст?

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

Например, может быть ситуация, когда мы написали код в NotePad и сохранили его в формате HTML, но он упорно притворяется текстовым документом. Дело в том, что если не снять галочку, о которой шла речь в начале статьи, мы не увидим, что у нашего файла расширение не (название.html), а (название.html.txt). То есть, по сути, файл по-прежнему является обычным текстовым документом, отсюда и проблема.

То есть, как Вы уже догадались, для ее решения необходимо переименовать файл из (файл.html.txt) в (файл.html).

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

На этом у меня все. Надеюсь, данная статья поможет избавиться от вопросов, которые могут возникнуть в самом начале изучения html или css.

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

Определение

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

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

Во время использования редактора кода выберите в основном меню приложения пункт «Файл», а после этого «Сохранить как...». Далее в возникшем диалоговом окне следует указать директорию, в которой будет сохранен файл HTML, а также его имя и точное расширение. Таким образом, формат легко сменить.

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

Правила

Существует ряд правил, без полного соблюдения которых страница Интернета отображается некорректно или не открывается вовсе. Если вы хотите знать, как создать файл HTML без ошибок, следует помнить о нескольких рекомендациях. Тег необязателен, однако его наличие поможет браузеру верно интерпретировать полученный код, а также распознать заданную структуру документа.

В определенных ситуациях причиной некорректного показа веб-страницы является отсутствие либо неправильное написание данного тега. Парный код представляет собой дескриптор. В него заключается содержимое веб-страницы целиком. При этом элементы материала, которые расположены за пределами данного тега, отображаются в виде обычного текста либо блокируются браузером.

Исключением выступает . Если говорить о том, как создать файл HTML, важно знать, что одноименный дескриптор является обязательным для материалов такого типа. При этом такое обозначение нельзя использовать на правах тега более 1-го раза на странице. С помощью особых обозначений и указывается информация относительно документа.

Отметим, что между данными тегами с помощью дескрипторов и следует задавать заголовок веб-страницы. В свою очередь, посредством можно подключить файлы JavaScript или CSS.

Аналогично внутри параметра приводятся тип документа, кодировка, стили, версии оформления в разных браузерах, а также ряд других параметров. Хотя содержимое тега и не отображается браузером, данный дескриптор обязателен.

Основа

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

Внутри могут быть применены другие элементы:

,
или
. Хотя они и не влияют непосредственно на отображаемый в браузере результат, однако создают структуру кода HTML, это принято считать хорошим тоном среди web-разработчиков и верстальщиков.

Блокнот под рукой

Сейчас мы рассмотрим, как создать файл HTML в "Блокноте". Именно с разработки страниц HTML в этом приложении начинали обучение сайтостроению все веб-программисты. Вы также можете освоить такую несложную науку. Заполнять "Блокнот" информацией следует, основываясь на советах, которые были приведены ранее, то есть изучить значение тегов, расставить их в нужных местах, заполнить содержимым.

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


В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!

Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится

1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )
Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на:
1) для Windows
NotePad++ (скачать или )
Intype (скачать)

2) для Mac и Linux
Bluefish Editor (скачать)

Их отличие от обычных текстовых редакторов заключается в основном в том, что они делают автоматические отступы, ! дают возможность пересохранить файл в другой кодировке (обратите внимание, в будущем столкнётесь), окрашивают теги в различные цвета как, например, код внизу урока. В обычном редакторе он будет одного цвета.

2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML

1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .

Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html

Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить . Готово!

Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку

Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

так НЕ должно выглядеть: photo, текстовой документ, game
так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe

Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:

Смотрим настройки файлов и папок:

Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить

Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить

Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить

3) вставляем в него Весь код (вместе с комментариями), указанный ниже:



<br>


Заголовок моей странички


4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:


Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:



<br> Название Вашей первой странички <br>

Заголовок моей странички

Это моя первая web-страничка!

В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.



Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете



<br> Название страницы <br>


Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы


<br> Название страницы <br>

Любой заголовок


Просто текст

Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом


Другой текст



Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).



<br> Название страницы <br>



В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:



<br>

Хочу выделить текст жирным, а этот уже курсивом



Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Хочу выделить текст жирным, а этот уже курсивом

Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.

В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении - будем вставлять изображения, делать ссылки и много другого интересного)

Мои поздравления!
Несложно же?)