Как открыть html файл в блокноте

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

Информация о материале Родительская категория: Текстовые редакторы Категория: Текстовый редактор Notepad (Блокнот) в Windows

• Notepad (Блокнот) — Самый простой текстовый редактор для Windows
• Информация для тех, кто решил изучить HTML
• Как открыть Notepad (Блокнот) в Windows через кнопку «Пуск»?
• Как сохранить файл в Notepad (Блокнот) в Windows?
• Как указать кодировку при сохранении файла в Notepad (Блокнот) в Windows?

Notepad (Блокнот) — Самый простой текстовый редактор для Windows.

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

Информация для тех, кто решил изучить HTML.

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

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

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

Как открыть Notepad (Блокнот) в Windows через кнопку «Пуск»?

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

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

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

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

Как сохранить файл в Notepad (Блокнот) в Windows?

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

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

Как указать кодировку при сохранении файла в Notepad (Блокнот) в Windows?

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

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

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

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉

Введение в HTML

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

В примере 1.1 приведен несложный пример такого кода.

Пример 1.1. Первая веб-страница

      
Заголовок страницы
 
Основной текст.
  

Чтобы посмотреть результат примера в действии, проделайте следующие шаги.

1. В Windows откройте программу Блокнот ( Пуск > Выполнить > набрать «notepad» или Пуск > Программы > Стандартные > Блокнот ).

2. Наберите или скопируйте код в Блокноте (рис. 1.1).

Рис. 1.1. Вид HTML-кода в программе Блокнот

3. Сохраните готовый документ ( Файл > Сохранить как. ) под именем c:\www\example11.html , при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы и кодировку UTF-8 (рис. 1.2). Обратите внимание, что расширение у файла должно быть именно html.

Рис. 1.2. Параметры сохранения файла в Блокноте

4. Запустите браузер Internet Explorer ( Пуск > Выполнить > набрать «iexplore» или Пуск > Программы > Internet Explorer ).

5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.

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

Рис. 1.3. Вид веб-страницы в окне браузера

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

как открыть html в блокноте

Как программно открыть текстовый файл в блокноте?
работаю с Code::Blocks 13.12. У меня windows 7. Хочется сделать так, чтобы после выполнения.

Как с помощью OpenFileDialog открыть файл сразу в блокноте
как с помощью OpenFileDialog открыть файл сразу в блокноте. файл выбирается OpenFileDialog (т.е.

Открыть *.xml-файл в блокноте
Требуется открыть xml-файл в блокноте, если файла не существует по данному пути, то выдать ошибку.

Открыть текстовый файл в блокноте
Доброго времени суток. Подскажите, пожалуйста, нубу, возможно ли средствами vb 2010 открыть.

Создание, Продвижение, SEO-оптимизация сайта с нуля

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

Главная » Создание сайта » Как создать файл с расширением html в блокноте

Как создать файл с расширением html в блокноте

Опубликовано автор admin — Оставить комментарий

Чтобы создать файл html совсем не обязательно покупать или скачивать из интернета для этого какие-либо приложения или программы. В любом компьютере есть уже готовая бесплатная программа «Блокнот», которая идет в комплекте с операционной cистемой windows.

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

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

Находим программу на своем компьютере:

идем в главное меню «Пуск»: Все программы ->Стандартные -> Блокнот.

Наполняем документ содержимым, после чего в главном меню выбираем «Файл»—> Сохранить как…

Называем его index.

Чтобы сохранить файл с расширением html, надо поменять *.txt на *.html, как здесь:

Таким образом, наш файл index.html создан.

На самом деле, существуют программы, которые помогают ускорить процесс наполнения файла содержимым.

Среди таких: Notepad++ и Dreamweaver. Первая является бесплатной и можно ее скачать на официальном сайте. Вторая – платная.

Преимущества программы Dreamweaver

После запуска программы надо будет выбрать: Создать HTML.

Файл будет создан автоматически с уже готовым обязательным кодом.

Сохраняем документ через выпадающее меню в программе.

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

Структура html документа

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

Вообще, что такое html?

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

Для начала в Блокноте создадим структуру документа, прописав основные теги:

Фото: создадим структуру документа

Но, чтобы наша страница в интернете выглядела более привлекательно, нам понадобится еще один файл CSS.

Этим документом мы создадим стили: цвета, отступы, т.е. приукрасим нашу веб страницу.

Подобным образом создаем документ с расширением .CSS.

Открываем блокнот, создаем таблицу стилей, сохраняем файл:

Теперь можем дополнить структуру созданного документа, прописав ссылку на документ с расширением .css.

Можно также добавить текст. Например: дать заголовок странице, прописав его между тегами: и Приветствую Вас!.

После того, как мы сохраним все и откроем файл в браузере, мы увидим следующее:

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

Чтобы сайт стал виден в интернете, надо файлы .html и .css разместить на надежном хостинге.

Что-то я отвлеклась. Продолжим создавать нашу веб страничку.

Но, прежде я кратенько объясню значение прописанных тегов.

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

В самом начале мы указали браузеру тип документа:

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

А теперь нам надо спланировать структуру сайта, т.е. подумать, какие блоки нам понадобятся.

Если мы посмотрим на другие ресурсы, то видим, что в большинстве своем они имеют: шапку, горизонтальные и вертикальные меню, боковые колонки, подвал (футер).

Создаем структуру шаблона

Допустим, мы решили сделать ресурс таким образом, чтобы он содержал хедер (шапку), колонка с основным содержимым, подвал (низ сайта) и боковая колонка (там будем размещать виджеты, рекламу и т.п.).

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

Создаем общий контейнер, где в теге прописываем структуру вместо «Приветствую, Вас!»:

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

Если мы обновим наш файл в браузере, то увидим такую картинку:

Оформление блоков

Начинаем оформление с самого большого контейнера.

Добавляем в созданный ранее файл .css следующий код:

Теперь расшифруем эту запись.

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

Далее обратимся к блоку с индентификатором main, после чего в фигурных скобках перечислим правила, которые будут применены к данному элементу:

• ширина контейнера будет составлять 810 px ,
• margin: 0 auto – установит блок по центру, что позволит нашему сайту красиво отобразиться по центру,
• следующее свойство border добавит сплошную рамку со всех сторон. В данном случае она будет черной.

Теперь настроим внешний вид основных блоков нашей страницы.

Для этого пропишем следующий код:

• Вначале зададим стили для шапки: ее высота = 100 px и она отделена в нижней части рамкой от остальных блоков.
• Сайдбару мы зададим ширину, высоту и свойство float: left . Данное правило означает, что элемент прижмется к левому краю основного блока.
• Такое же свойство зададим контентному блоку, но только он окажется справа от сайдбара и ширина его будет больше.

Из кода видно, что сайдбар и блок с контентом имеют одинаковую высоту.

Но в данном случае особой роли это не играет. В реальности контентный блок всегда содержит очень много информации и поэтому высоту можно не задавать вообще.

Блок подвала (footer) – небольшой высоты и окружен рамкой.

Также здесь мы добавили еще одно правило: clear со значением both . Это свойство необходимо для того, чтобы два предыдущих блока не наезжали на подвал.

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

Чтобы этого не происходило мы дали футеру команду типа: смотри, над тобой расположены плавающие блоки. Расположись ниже их.

Если теперь обновить страницу в браузере, то мы увидим следующее:

Приукрашиваем сайт

На следующем этапе добавим сайту цветов. Для начала зададим фон.

Сделать это можно, добавив следующий код:

Получим вот такой результат:

Работа с шапкой

Следующие шаги должны быть направлены на добавление в шапку названия сайта и логотипа.

Чтобы сделать логотип надо нарисовать картинку в фотошопе, либо скачать из интернета. Логотип следует положить в папку, где находится html-документ.

Код примет следующий вид:

background: #9091da url(kartinka.jpeg) no-repeat 5% center

kartinka.jpeg – это наш логотип, далее следует команда, что логотип не должен повторяться и разместиться она должна по центру сверху и снизу, сместившись от начала блока на 5% по горизонтали.

Теперь убираем надпись «Здесь будет шапка» и пишем красивый заголовок.

Надо будет его красиво оформить, задав нужные стили:

text-shadow: 0 0 5px orange;

Мы задали следующие свойства:

• размер и семейство шрифта;
• отступ слева;
• прижали заголовок к левому краю;
• выбрали цвет шрифта;
• верхний внутренний отступ;
• тень текста.

Теперь наша шапка готова. В реальности она может содержать различные ссылки, номера телефонов и т.п.

Оформление меню в сайдбаре

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

Зададим стили:

Можно перед меню добавить красиво оформленный заголовок.

Как оформить блок контента

Добавим статью и наш блок готов.

Не забываем прописывать теги заголовков:

Заголовок статьи

Подзаголовок статьи

Заголовки можно оформить цветом.

Как оформить подвал

Я не имею привычки что-то пихать в подвал. Обычно в футере размещают сведения об авторских правах. В данном случае и мы сделаем также.

Мы просто выровняем подвал по центру:

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

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

Видео: «Как сделать простейший сайт без знаний html»

Эта запись была размещена в Создание сайта автор admin постоянная ссылка.

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Заполняя форму для комментария вы соглашаетесь с Политикой конфиденциальности

Свежие записи

• Преимущества создания сайта в Notepad++
• Хостинг TimeWeb – полный обзор одного из провайдеров России
• Как быстро создать сайт самому
• Как самому создать личный сайт в интернете
• Как создать качественный сайт недорого

Мы обсуждаем

• Andrew к записи Для чего нужна правильная seo оптимизация сайта
• Евгений к записи Как продвинуть сайт самому в поисковиках бесплатно с пошаговой инструкцией
• Ринат к записи Как продвинуть сайт самому в поисковиках бесплатно с пошаговой инструкцией
• Копирайтер к записи Продвижение и оптимизация сайтов в поисковых системах
• Максим к записи Как продвинуть сайт самому в поисковиках бесплатно с пошаговой инструкцией

Авторские права © seitostroenie.ru защищены

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

ИСПОЛЬЗОВАНИЕ ТЕКСТА ТОЛЬКО С АКТИВНОЙ ССЫЛКОЙ НА ПЕРВОИСТОЧНИК

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