Как запустить код html из блокнота

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

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

• Вопрос задан более трёх лет назад
• 7027 просмотров

16 комментариев

Простой 16 комментариев

Что значит «при открытии», что именно «открывает» код?
battery789 @battery789 Автор вопроса

Нет, у меня все работало нормально, и вдруг опа и такиие проблемы
Да хоть что хочешь напиши, все же не откривается

Не знаю тогда в чем дело. Но расширения файлов вы все-таки проверьте.

Rustam Bainazarov @SmthTo Куратор тега HTML
Пришлите ссылку на файл. Закачайте его куда-нибудь (Яндекс.Диск и т. п.).
SmthTo, Ага, чтобы ты его работу украл?

Rustam Bainazarov @SmthTo Куратор тега HTML

parcnfalb, эм, нафига мне работа того, кто делает сайты в блокноте? :))

Тем более там не больше чем рыба из тэгов html, head и body, раз человек работал без визуального контроля со стороны браузера.

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

Артур @arturweb01

Установите notepad++, скопируйте туда код из вашего блокнота и сохраните через эту программу в удобное вам место.

Rustam Bainazarov @SmthTo Куратор тега HTML
parcnfalb, но я всё же надеюсь, что вы так пошутили.

Rustam Bainazarov @SmthTo Куратор тега HTML

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

Без понимания кода и расширения вашего файла сказать точно невозможно.

Как найти блокнот Windows для написания HTML

Чтобы писать или редактировать HTML-код веб-страницы, не требуется никаких сложных программ. Текстовый процессор работает нормально. Блокнот Windows 10 — это базовый текстовый редактор, который можно использовать для редактирования HTML. Когда вы научитесь писать HTML-код в этом простом редакторе, вы можете обратиться к более продвинутым редакторам. Однако, когда вы можете писать в Блокноте, вы можете писать веб-страницы практически где угодно.

Способы открыть Блокнот на вашем компьютере с Windows 10

Изображения героев / Getty Images

В Windows 10 некоторым пользователям стало трудно найти Блокнот. Есть несколько способов открыть Блокнот в Windows 10, но пять наиболее часто используемых:

• Включите Блокнот в Start меню. Выберите Start на панели задач, а затем выберите блокнот.
• Найдите его с помощью поиска. Тип внимание в поле поиска и выберите блокнот в результатах поиска.
• Откройте Блокнот, щелкнув правой кнопкой мыши пустую область. Выбрать Новинки в меню и выберите Текстовый документ. Дважды щелкните документ.
• Press Windows (логотип)+Rтип блокнот и затем выберите OK.
• Выбрать Start, Выберите Все приложения и затем выберите Аксессуары для Windows. Выделите Блокнот и выберите его.

Как использовать блокнот с HTML

1. Откройте новый документ Блокнота.
2. Напишите в документе немного HTML.
3. Чтобы сохранить файл, выберите Отправьте в меню Блокнота, а затем Сохранить как.
4. Введите имя index.htm и выберите UTF-8 в раскрывающемся меню Кодировка.
5. Используйте для расширения .html или .htm. Не сохраняйте файл с расширением .txt.
6. Откройте файл в браузере, дважды щелкнув файл. Вы также можете щелкнуть правой кнопкой мыши и выбрать Открыть с помощью для просмотра вашей работы.
7. Чтобы внести дополнения или изменения на веб-страницу, вернитесь к сохраненному файлу Блокнота и внесите изменения. Повторно сохраните, а затем просмотрите изменения в браузере.

CSS и Javascript также можно написать с помощью Блокнота. В этом случае вы сохраняете файл с расширением .css или .js.

Categories Wiki

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

• Как активировать GodMode в Windows 10, 8 и 7
• Как отключить Защитник Windows
• Как копировать компакт-диски с помощью проигрывателя Windows Media
• Как открывать, редактировать и конвертировать файлы MDT
• Как синхронизировать Wii Remote

Создание, Продвижение, 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 защищены

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

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

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

Пример создания сайта на HTML через блокнот

2.По желанию переименуйте файл (у меня он будет называться first-page) и обязательно задайте ему расширение .html вместо .txt).

3.Откройте документ программой Блокнот, Notepad, Notepad++ или другом текстовом редакторе, желательно с подсветкой синтаксиса.

4.Скопируйте и вставьте в него следующий текст.

     Тело HTML-документа (отображается на экране)  

5. Сохраните изменения в файле.

6. Откройте first-page.html, только уже не в Блокноте, а в любом доступном вам браузере. На экране должно отобразиться примерно следующее:

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

Теперь проверьте, правильно ли вы этот код поняли. Рассмотрим его.

Это тег, с которого должен начинаться любой html-документ. Он даёт понять интернет-обозревателю, с какой версией языка разметки тот имеет дело. Без этой строки браузер может начать неправильно обрабатывать код. Написав , мы идентифицировали файл как документ стандарта HTML 5, и браузер, проанализировав первую строку, будет обрабатывать остальной код в соответствии с заданным стандартом.

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

«Head» с английского — «Голова». Этот контейнер содержит теги со вспомогательной информацией для веб-браузеров и поисковых систем. Здесь можно задать файлы скриптов, таблицы стилей, ключевые слова и

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

«Body» — тело. Таким образом у любого html-документа есть голова, содержащая вспомогательную информацию, и тело, внутри которого находится основной код документа. Так как наша страничка — первая, она не должна быть сложной, и поэтому тело документа содержит только текст «Тело HTML-документа (отображается на экране)»

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

текст (если только это не теги), так что поздравляю, простые html-странички вы создавать уже научились. Внимательный читатель мог задуматься, почему теги расположены именно так:идёт перед, но закрывающий находится перед закрывающим. Чтобы это понять, рассмотрим предложение: Сайт полезный (называется «Яндекс» (кажется так)).

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

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

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).