Как создать документ html в блокноте – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Как создать документ HTML в блокноте «MEIN ARBEIT»

Как создать документ HTML в блокноте

Дата: 05/03/2016

Приветствую ВАС! Наверное, создать документ HTML в блокноте это самая простая процедура при создании сайта, но кто с ней не сталкивался для того и предназначена данная статья.

Первый шаг при создании документа HTML в блокноте

Первым шагом для вас будет найти тот самый блокнот! Кто не знает, он находится в меню «Пуск» → «программы» → «Стандартные» → «Блокнот». Или нажимаем «Пуск» → «Выполнить» и набиваем в коммандную строку: notepad. Рекомендую всем пользоваться более продвинутой бесплатной версией блокнота под названием «NOTEPAD++«!

Второй шаг создания документа HTML в блокноте

И так перед вами появился блокнот, но страничка пуста и сверху видно, что этот документ находится в формате TXT. Меняем ситуацию в корне. Добавляем HTML теги, чтобы наш документ уже был с HTML разметкой, после чего нажимаем в панеле инструментов на «Файл». Из выпадающего списка выбираем «Сохранить как…» и тогда перед вами появится диалоговое окно с полями проводника, указания имени файла и другими параметрами. Нам нужно в строке имени файла написать название вашего файла и в конце приписать, без пробелов и ковычек, «.html». То есть в строке у вас должно теперь быть не «безымянный», а например index.html. Как только поменяли название файла и добавили формат HTML, нажимаем сохранить и ваш документ HTML создастся!

Ещё раз, как создать документ HTML

То есть если говорить обычным языком, вам просто нужно переименовать ваш файл добавив к нему точку и расширение файла html. Проверить всё ли вы сделали правильно можно следующим образом. Найдите созданный вами файл. Если он наполнен тегами и контентом, то щёлкните по нему два раза. Если вы увидите, что ваш файл открывает браузер, тогда спешу поздравить вас! Вы создали документ HTML в блокноте, как этого желали! Но я всё равно рекомендую вам создавать документы HTML через «

NOTEPAD++«, потому что там формат файла можно выбрать из выпадающего списка «типа файлов» не прибегая к вышеуказанной формуле! А начинка программы подчеркнёт вам ошибки, если вы сделали опечатку, когда наполняли HTML тегами ваш документ. Просто, удобно, профессионально!

Удачного вам создания HTML документа! Администратор сайта MEIN ARBEIT!

Список статей по теме…


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

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

Давайте приступим к практическим действиям и прямо сейчас создадим свой первый HTML-файл.

Это будет «полигон», который мы будем наполнять содержимым, расширять и экспериментировать.

Для тех, кто любит видео:

Все мои уроки по HTML и верстке сайтов здесь.

Первый способ, который мы рассмотрим по созданию файла HTML — это способ создания файла в простом текстовом редакторе.

Способ 1. Создаем файл html в программе «Блокнот».

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».

09-09-2013 6-05-25

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.html.

09-09-2013 6-06-53

Если у Вас не отображается расширение файлов, вот заметка:

Как включить отображение расширений файлов в Windows.

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

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

Аналогично html-файл создается с помощью программы Notepad++.

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

Одной из таких программ является универсальный редактор кода Dreamweaver.

Способ 2. Создание файла HTML в универсальном редакторе кода (на примере Dreamweaver).

После того, как программа загрузиться появляется следующее окно приветствия:

09-09-2013 6-08-16

Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.

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

09-09-2013 6-09-24

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

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

09-09-2013 6-10-17

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

Обратите внимание, чтобы при сохранении вы случайно не убрали расширение 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 файл читайте в статье «Структура HTML файла».

Создание HTML-документа в редакторе Блокнот



Веб-страница представляет собой текстовый документ, в котором
расставлены команды языка HTML. Они интерпретируются браузером.
Например, эти команды могут указывать, как должно отображаться содержание
страницы на экране.
HTML-документ можно создавать в простейших текстовых редакторах,
например, редакторе Блокнот, а затем сохранять в файле с расширением .htm
или .html. Разметка HTML-документа состоит в расстановке тегов –
заключенных в угловые скобки команд языка HTML. Их можно набирать
строчными или прописными латинскими буквами.

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


Заголовок окна


Содержание документа

Пример 1. В редакторе Блокнот создать HTML-документ, содержащий текст:
Авторская страница
Это мой первый проект.
Фамилия Имя.
Сохранить созданный документ под именем primer1.htm.
Просмотреть в браузере.
Откроем редактор Блокнот. Наберем или скопируем готовый шаблон
HTML-документа из файла шаблон.htm. Наполним его требуемым
содержанием, т.е. введем заданный текст, как показано на рисунке 1.14.
Рис. 1.14
Сохраним документ в формате HTML. Поскольку созданные в редакторе
Блокнот документы по умолчанию сохраняются с расширением .txt,

воспользуемся меню Файл — Сохранить как, в появившемся диалоговом окне
выберем Все файлы и введем имя и расширение: primer1.htm.
Откроем созданный документ в браузере (рис.1.15). Обратим внимание,
что текст отображается в одну строку, хотя набран в три строки с отступами.
Переходы на новые строки, а также все пробелы более одного браузером
игнорируются.
Рис.1.15
Итак, вид веб-страницы в браузере задается тегами HTML, но также
может зависеть от типа браузера. Во всех приведенных примерах используется
браузер MS Explorer.

Займемся оформлением созданной страницы.
Для отображения текста в виде отдельных абзацев используют тег <p>.
При просмотре в браузере абзацы отделяются друг от друга одной пустой
строкой. Для принудительного перехода на новую строку без создания абзаца
используют непарный тег <br>. Нередко между абзацами используют
разделительную линию, которая задается непарным тегом <hr>.
За оформление текста отвечают теги форматирования (приложение 1).
Для отображения заголовков используются теги <h2>…<h6>. Заголовок
уровня 1 самый крупный, а уровня 6 — самый маленький.
Начертание символов задается тегами: <b> — Полужирный, <i> —
Курсивный, <u> — Подчеркнутый шрифт.
Пример 2. Оформить созданную в примере 1 страницу
в соответствии с рисунком

Отредактируем HTML-документ в редакторе Блокнот. Его можно
открыть непосредственно из браузера с помощью меню Страница (или Вид)
Просмотр HTML-кода (рис 1.17).

Расставим теги:
<h3> Авторская страница</h3><hr> <! Заголовок уровня 2 >
<b>Это мой первый проект.</b> <br> <! Жирный шрифт>
<i>Фамилия И.О.</i> <! Курсив>
Сохраним документ в файле с именем avtor.htm. Для просмотра
обновленной страницы нажмем кнопку (или клавишу F5).
Открывающие теги языка HTML могут содержать атрибуты, которыми
задаются параметры разметки документа. Каждый атрибут имеет название
(имя) и определенное значение, которое записывают в кавычках после знака
«равно». Тэг может иметь несколько атрибутов, которые перечисляют через
пробелы, например, <тег атрибут1=”значение” атрибут2=”значение” … >
Порядок следования атрибутов в теге неважен. Если значение атрибута
содержит только буквы английского алфавита, цифры, дефис и не содержит
пробелов, кавычки можно опустить.
Вид всей веб-страницы задается атрибутами тега <body>, в то время как
отдельные ее элементы, например: заголовки, разделы, абзацы, таблицы,
рисунки могут иметь свое особенное оформление.
Цвет фона страницы задается атрибутом bgcolor, а цвет текста —
атрибутом text. Значением этих атрибутов является цвет, который задается
своим названием на английском языке, например, red (красный) или его
шестнадцатеричным кодом #FF0000 (см. приложение 2). По умолчанию цвет
страницы белый, а текста – черный.
Синий цвет страницы можно задать так:
<body bgcolor=»blue»> или так <body bgcolor=»#0000FF”>
Заметим, что цвета, отображаемые разными браузерами, а также выводи-
мые на печать, могут несколько отличаться от приведенных в приложении 2.
Для выравнивания текста всей страницы, отдельного абзаца, раздела или
заголовка используется атрибут align, который может принимать значения:
center — выравнивание по центру, left — по левому или right — по правому краю.
Выравнивание текста по ширине не рекомендуется, поскольку при
уменьшении окна браузера между словами могут образоваться большие
промежутки.
ZGA 06.08.2010 Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ
Для задания шрифта, цвета и размера символов текста используется
тег <font>. Шрифт задается атрибутом face, значением которого является
название шрифта, например, Arial. Цвет символов задается атрибутом color.
Если шрифт не задан, то по умолчанию используется Times черного цвета.
Размер символов задается атрибутом size и выражается в условных
единицах, которые могут принимать значения от 1 до 6. По умолчанию
принято значение размера 3.
Размер символов может выражаться и в относительных единицах: числах
по отношению к базовому размеру, например, size =”+n” или size= “-n”.
Так, для базового размера 3 атрибут <font size=»+2″> задает размер 5,
а <font size=»-2″> — размер 1.
Пример 3. Создать веб- страницу в соответствии с рисунком 1.18.
Рис.1.18
Откроем в редакторе Блокнот файл primer3.txt с текстом объявления
и введем HTML-код:
<html>
<head>
<title>Объявление</title>
</head>
<body bgcolor=”gold”>
<font face=»Arial» size=”+2” color=”red”><i>Внимание!</i></font>
<h2 align=”center”>НЕДЕЛЯ <br>ИНФОРМАТИКИ</h2>
<font face=»Arial» size=”+2” color=”blue”>
КОНКУРСЫ, ТУРНИРЫ, ВИКТОРИНЫ</font>
<p align=”right”> Оргкомитет</p>
</body>
</html>
Заметим, что допускается комбинирование и вложенность тегов. Так, для
отображения слова “Внимание!” шрифтом Arial курсивным начертанием в тег
<font…> вложен тег <i>.
Сохраним документ в файле с именем Primer3.htm. Просмотрим в
браузере.

Фрагмент текста может отображаться в виде бегущей строки с помощью
тега <marquee>. Направления движения указывается атрибутом direction.
Например, движение слова “Внимание!” слева направо задается так:
<Marquee direction = right> Внимание! </marquee>
1. Каким тэгом задается абзац? Переход на новую строку?
2. Какими тегами задается полужирное и курсивное начертание символов?
3. Как задать фон и цвет текста всей веб-страницы?
4. Какими тегами и атрибутами задается шрифт, размер и цвет символов?
Упражнение
Откройте предлагаемый текстовый документ в редакторе Блокнот.
Оформите и сохраните его в виде веб-страницы, изображенной на одном из рисунков.
Для задания цвета фона воспользуйтесь приложением 2.
а) б)
в) г)
?

Основы HTML. Урок №1. Как создать HTML документ?

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

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

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

Я бы посоветовал вам обратить свое внимание на редактор Dreamweaver, о котором более подробно написано в статье на нашем сайте раздела Софт.

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

Простейший пример кода HTML страницы

 

<HTML>
<HEAD>
<TITLE>Заголовок страницы</TITLE>
</HEAD>
<BODY>
<P>Здравствуй, мир!</P>
</BODY>
</HTML>

 

Итак, приступим. Объяснять буду на примере стандартного приложения Windows, «Блокноте». У себя на компьютере вы его можете открыть, найдя в меню Пуск, в папке Стандартные.

Открываем Блокнот и коппируем наш код или пишем свой, не суть главное чтобы были соблюдены все правила синтаксиса HTML для создания страницы.

В результате на экране будет следующая картина:

После чего на панельке верхнего меню Блокнота находим пункт «Файл» — «Сохранить как…» и нажимаем на нее, откроется окно с параметрами сохранения, выбираем место где сохранить нашу первую страничку. В выпадающем пункте Тип файла, выбираем пункт Все файлы, после чего в пункт Имя файла записываем index.html, ниже находим пункт кодировка и выбираем кодировку UTF-8(о кодировках читайте в нашем FAQ). Примечание! Имя для файла index идет стандартное, по приоритету оно самое главное при открытии сайта, и именно эта страничка будет открываться при вводе домена сайта, приставка «.html» указывает на тип расширения файла, в нашем случае это HTML расширение и указываеться оно так, следите за тем, чтобы после него не было дополнительного расширения типо «.txt» в таком случае у вас создасться обычный текстовый документ.

Окно с настройками сохранения:

После чего нажимаем Сохранить. Теперь при помощи стандартного или любого браузера мы можем открыть нашу страничку и посмотреть результат.

Результат создания странички:

Создание HTML-файла в Блокноте (Notepad)

Самым простым текстовым редактором под Windows является Notepad (Блокнот). Пожалуй единственным его плюсом является то, что его не нужно откуда-то скачивать и устанавливать на компьютер. Он есть на любом компьютере, где установлена Windows. И всё, на этом все плюсы Блокнота. Даже для того, чтобы создать текстовой файл с расширением, отличным от .txt требуется произвести ряд движений.

Видео-уроки HTML

Для информации:

 

Для тех, кто решил изучить или повторить HTML у меня есть бесплатный замечательный видео-курс HTML, который мы сняли специально для тех, кто хочет разобраться с HTML не имея представления с чего начать. Видео-курс «HTML для начинающих» ← по этой ссылке!

 

Всё начинается с самого начала: Часть 1 «Инструментарий»

Для того, чтобы открыть Notepad (Блокнот) в Windows нужно нажать на кнопку «Пуск» в левом нижнем углу. (Или нажать на кнопку «Win» на клавиатуре. Она обычно находится между правыми кнопками Ctrl и Alt.) Откроется такое вот окно:

чтобы открыть Notepad (Блокнот) в Windows нужно нажать на кнопку «Пуск»

После этого нужно написать в поисковой строке слово «Блокнот» и кликнуть по ссылке найденной программы:

написать в поисковой строке слово «Блокнот» и кликнуть по ссылке

С тем же успехом можно написать в поисковой строке слово «notepad» и кликнуть по ссылке найденной программы:

написать в поисковой строке слово «notepad» и кликнуть по ссылке найденной программы

После этого откроется окно программы Notepad (Блокнот), куда можно записывать текст:

окно программы Notepad (Блокнот)

После того, как текст написан, его нужно сохранить. Notepad предназначен для создания и сохранения текстовых файлов с расширением .txt. Поэтому, для того, чтобы сохранить файл с расширением, скажем, .html, нужно в меню Блокнота выбрать опцию «Файл», а в ней опцию «Сохранить как…»

в меню Блокнота выбрать опцию «Файл», а в ней опцию «Сохранить как...»

После этого откроется окно сохранения файла в котором нужно в опции «Тип файла:» выбрать Все файлы (*.*)

 в опции «Тип файла:» выбрать Все файлы (*.*)

Также полезно сразу выбрать кодировку. Сейчас на серверах обычно стоит кодировка UTF-8, поэтому лучше сразу сохранять файлы в ней.

кодировка UTF-8, поэтому лучше сразу сохранять файлы

После этого останется только ввести имя файла с расширением (для HTML-документов расширение либо .html либо .htm), выбрать путь, куда сохранять файл (чтобы его потом можно было найти) и нажать кнопку «Сохранить».

для HTML-документов расширение либо .html либо .htm

После сохранения файла с расширением .html в Windows обычно этот файл имеет иконку того браузера, который настроен по умолчанию для работы с интернетом. (У меня сейчас по умолчанию стоит Opera.) Двойным кликом по иконке файла его можно открыть для просмотра в браузере.

После сохранения файла с расширением .html в Windows обычно этот файл имеет иконку того браузера

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *