Создание, Продвижение, 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-файла в Блокноте (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) и путь к документу.
web ecol
Веб-страница представляет собой текстовый документ, в котором
расставлены команды языка 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.
Займемся оформлением созданной страницы.
Для отображения текста в виде отдельных абзацев используют тег
.
При просмотре в браузере абзацы отделяются друг от друга одной пустой
строкой. Для принудительного перехода на новую строку без создания абзаца
используют непарный тег
. Нередко между абзацами используют
разделительную линию, которая задается непарным тегом
.
За оформление текста отвечают теги форматирования (приложение 1).
Для отображения заголовков используются теги …. Заголовок
уровня 1 самый крупный, а уровня 6 — самый маленький.
Начертание символов задается тегами: — Полужирный, —
Курсивный, — Подчеркнутый шрифт.
Пример 2. Оформить созданную в примере 1 страницу
в соответствии с рисунком
Отредактируем HTML-документ в редакторе Блокнот. Его можно
открыть непосредственно из браузера с помощью меню Страница (или Вид)
Просмотр HTML-кода (рис 1.17).
Расставим теги:
Авторская страница
Это мой первый проект.
Фамилия И.О.
Сохраним документ в файле с именем avtor.htm. Для просмотра
обновленной страницы нажмем кнопку (или клавишу F5).
Открывающие теги языка HTML могут содержать атрибуты, которыми
задаются параметры разметки документа. Каждый атрибут имеет название
(имя) и определенное значение, которое записывают в кавычках после знака
«равно». Тэг может иметь несколько атрибутов, которые перечисляют через
пробелы, например,
Порядок следования атрибутов в теге неважен. Если значение атрибута
содержит только буквы английского алфавита, цифры, дефис и не содержит
пробелов, кавычки можно опустить.
Вид всей веб-страницы задается атрибутами тега
отдельные ее элементы, например: заголовки, разделы, абзацы, таблицы,
рисунки могут иметь свое особенное оформление.
Цвет фона страницы задается атрибутом bgcolor, а цвет текста —
атрибутом text. Значением этих атрибутов является цвет, который задается
своим названием на английском языке, например, red (красный) или его
шестнадцатеричным кодом #FF0000 (см. приложение 2). По умолчанию цвет
страницы белый, а текста – черный.
Синий цвет страницы можно задать так:
или так задает размер 5,
а — размер 1.
Пример 3. Создать веб- страницу в соответствии с рисунком 1.18.
Рис.1.18
Откроем в редакторе Блокнот файл primer3.txt с текстом объявления
и введем HTML-код:
Внимание!
НЕДЕЛЯ
ИНФОРМАТИКИ
КОНКУРСЫ, ТУРНИРЫ, ВИКТОРИНЫ
Оргкомитет
Заметим, что допускается комбинирование и вложенность тегов. Так, для
отображения слова “Внимание!” шрифтом Arial курсивным начертанием в тег
вложен тег .
Сохраним документ в файле с именем Primer3.htm. Просмотрим в
браузере.
Фрагмент текста может отображаться в виде бегущей строки с помощью
тега
1. Каким тэгом задается абзац? Переход на новую строку?
2. Какими тегами задается полужирное и курсивное начертание символов?
3. Как задать фон и цвет текста всей веб-страницы?
4. Какими тегами и атрибутами задается шрифт, размер и цвет символов?
Упражнение
Откройте предлагаемый текстовый документ в редакторе Блокнот.
Оформите и сохраните его в виде веб-страницы, изображенной на одном из рисунков.
Для задания цвета фона воспользуйтесь приложением 2.
а) б)
в) г)
?