Или специализированные приложения. Чтобы добиться корректного отображения файла в обозревателе, потребуется соблюдение определенных правил при оформлении кода.
Определение
Отвечать на вопрос о том, как создать файл HTML, начнем с определения. Такой материал представляет собой обычный текстовый документ, однако в нем с помощью специальных дескрипторов можно задать расположение элементов содержания страницы относительно отдельных объектов либо окна браузера. При этом просмотреть результат можно посредством интернет-обозревателя.
Для того чтобы отредактировать HTML-код, можно использовать текстовый редактор или подобрать специальные программы, имеющие функции автоматического ввода и подсветки синтаксиса. Отметим, что примером приложения, которое хорошо подходит для эффективной работы с указанными документами, стал Sublime Text.
Во время использования редактора кода выберите в основном меню приложения пункт «Файл», а после этого «Сохранить как...». Далее в возникшем диалоговом окне следует указать директорию, в которой будет сохранен файл HTML, а также его имя и точное расширение. Таким образом, формат легко сменить.
Можно отконвертировать текстовый документ, превратив его в HTML-страницу, просто дописывая в конце названия расширение.html. Следует помнить о том, что существует ряд определенных ситуаций, при которых даже верно созданный файл, имеющий правильный формат, в браузере не открывается. Причиной тому может стать неверное оформление структуры HTML-кода.
Правила
Существует ряд правил, без полного соблюдения которых страница Интернета отображается некорректно или не открывается вовсе. Если вы хотите знать, как создать файл HTML без ошибок, следует помнить о нескольких рекомендациях. Тег
В определенных ситуациях причиной некорректного показа веб-страницы является отсутствие либо неправильное написание данного тега. Парный код представляет собой дескриптор. В него заключается содержимое веб-страницы целиком. При этом элементы материала, которые расположены за пределами данного тега, отображаются в виде обычного текста либо блокируются браузером.
Исключением выступает
Отметим, что между данными тегами с помощью дескрипторов
Аналогично внутри параметра
приводятся тип документа, кодировка, стили, версии оформления в разных браузерах, а также ряд других параметров. Хотя содержимое тега и не отображается браузером, данный дескриптор обязателен.Основа
Тег
совместно с заключает в себе тело сайта - информацию, которая отображается на экране пользователя. Речь может идти о заголовках, подзаголовках, параграфах и строках текста, изображениях, видео или других объектах мультимедиа. При этом указанный дескриптор обязателен.Внутри могут быть применены другие элементы:
Блокнот под рукой
Сейчас мы рассмотрим, как создать файл HTML в "Блокноте". Именно с разработки страниц HTML в этом приложении начинали обучение сайтостроению все веб-программисты. Вы также можете освоить такую несложную науку. Заполнять "Блокнот" информацией следует, основываясь на советах, которые были приведены ранее, то есть изучить значение тегов, расставить их в нужных местах, заполнить содержимым.
Превратить "Блокнот" в HTML-страницу очень просто, как это сделать, мы уже описывали. Таким образом, вы ознакомились с основами процесса, и, возможно, согласитесь, что создать файл HTML не очень сложно.
Слышали про html? Или, может быть, слышали об html страницах в Интернете? На самом деле, все просто. HTML – это, упрощенно говоря, один из языков программирования, и не самый сложный из них.
HTML – сокращение от HyperText Markup Language, что переводится как язык гипертекстовой разметки.
Содержание:
Используется HTML для того, чтобы страницы в Интернете выглядели именно такими, какими Вы их все знаете:
- красиво оформленные тексты,
- выделенные жирно или курсивом,
- просто черного цвета или разноцветные,
- с активными ссылками на другие страница сайта или блога,
- с , видео, аудио и еще многими другими любопытными фишечками.
По сути, html – это изнанка страниц многих сайтов. Часто их красивое оформление создается с помощью языка разметки html. Иначе это еще называют создание страниц с помощью html верстки.
Сайты могут создаваться и на других языках программирования, например, на языке php.
Ученый из Британии Тим Бернерс Ли разработал язык html в 1986-1991 годах в Швейцарии. По сути html позволяет создавать простые, но при этом красивые документы. Уже позже в html были добавлены мультимедийные возможности (видео и т.п.) и поддержка работы с гипертекстом (для создания гиперссылок).
Для работы с html были созданы всем известные программы-браузеры, они же , такие как:
- Mozilla Firefox (Мозилла Фаерфокс),
- Internet Explorer (Интернет Эксплорер),
- Google Chrome (Гугл Хром),
- Opera (Опера),
- Яндекс (Yandex) браузер,
- Safari (Сафари) и
- другие.
Первоначально основная функция браузера состояла как раз в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.
Что такое html страница?
Документы, файлы, страницы, созданные на языке html, имеют расширение вида.html или.htm. Например, html-страница (или html-файл, или html-документ) может иметь название вида:
- тест.html,
- html,
- html или
- название.html.
Строго говоря, тест.html – это имя файла (или имя страницы), где
- тест – имя файла, а
- .html – расширение имени файла (или расширение имени страницы), которое обычно просто называют «расширение».
Сейчас более распространенным вариантом вместо слова «расширение» стало слово «формат». Поэтому выражение «формат html» означает, что файл (или страница) написан на языке html и имя такого файла имеет расширение html. Значит,
файл c именем тест.html имеет формат html.
Операционная система Windows по умолчанию скрывает расширения файлов (то есть, форматы файлов). Программисты сделали это «не со зла», а для того, чтобы уберечь пользователя от бездумного изменения расширений файлов. Можно сделать так, чтобы по умолчанию расширения файлов были открыты. В Windows 7 для этого:
- кликаем по кнопке Пуск,
- открываем Панель управления,
- находим Параметры папок,
- открываем вкладку Вид, прокручиваем в самый низ и
- убираем галочку напротив опции «Скрывать расширения для зарегистрированных типов файлов»,
- жмем «ОК».
Рис. 1. Открываем все расширения файлов
Если сейчас Вы поднимите глаза вверх и посмотрите в адресную строку своего браузера, то увидите там имя той страницы, которую сейчас читаете, а в конце имени стоит.html. Это пример html страницы блога, которая размещена в Интернете. Обычно у блога (у сайта) много html страниц. Например, каждая статья на этом блоге является отдельной html страницей.
В Интернете также встречаются сайты-одностранички, состоящие всего из одной html страницы. Например, это может быть
- интернет-визитка человека или фирмы, либо
- страница, продающая через Интернет какой-либо товар или услугу.
Язык HTML постоянно развивается и на сегодняшний день существует несколько его версий, начиная от HTML 2.0 от 22 сентября 1995 года и заканчивая последней версией языка HTML 5 от 28 октября 2014 года. В сентябре 2016 года планируется выпуск HTML 5.1.
Что такое HTML теги?
HTML – это язык разметки документов с помощью тегов. Теги заключаются в треугольные скобки “< >”. Теги могут быть парными и непарными.
- Например, тег “b”, заключенный в треугольные скобки, делает текст жирным
текст, выделенный жирным
В результате получится так: текст, выделенный жирным
- А тег “i” делает текст курсивным.
текст, выделенный курсивом
В результате получим: текст, выделенный курсивом
- Есть еще тег для перевода строки “br”.
- С помощью тега “a href” выделяют гиперссылку.
- Тег для заголовка документа – . Это тег, открывающий документ. Он является парным в том смысле, что для него обязательно нужен закрывающий тег со слешем .
- После заголовка идет основная часть, которая находится между открывающим тегом и закрывающим тегом . Этот тег так же, как тег head, является парным: его нужно открыть и не забыть закрыть.
В парных тегах закрывающий тег со слешем необходим по той причине, что он отменяет (точнее, корректно завершает) действие открывающего тега.
Тегов HTML существует много, в Интернете можно без труда найти учебники HTML.
Как создать html файл
Создать самостоятельно html страницу (или html файл) на своем компьютере и запустить свое творение в браузере очень просто.
1) Открываем Блокнот (простой текстовый редактор, который входит в состав Windows). Его можно найти на своем компьютере, введя в строку Поиск запрос: Блокнот.
2) Копируем и вставляем в Блокнот следующий текст:
Привет! Это моя первая HTML страница.
Вторая строка, ура!
3) Важный момент, без которого html файл не будет работать: в Блокноте сохраняем файл строго(!) в формате html, как показано на скриншоте. Файл можно для простоты сохранить на Рабочем столе на своем компьютере.
Рис. 2. Обращаем внимание на Тип файла и сохраняем файл в формате html
1 на рис. 2 – Кликаем «Рабочий стол», чтобы там сохранить html файл.
2 на рис. 3 – Открываем выпадающее меню напротив «Тип файла».
3 – В этом меню выбираем «Все файлы».
4 – вводим любое имя (у меня 001) и после точки обязательно(!) вводим html.
5 на рис. 2 – жмем «Сохранить».
4) На Рабочем столе находим файл 001.html:
Рис. 3. Html файл на Рабочем столеУ меня браузером по умолчанию является Google Chrome, поэтому значок у файла имеет вид значка этого браузера. Если будет другой браузер по умолчанию, то у файла 001.html будет другой значок.
Кликаем по файлу (рис. 3) 2 раза мышкой и в итоге видим в браузере свою первую страницу на html:
Рис. 4. Проверка, как выглядит html страница в браузере
Таким образом, у нас получилась локальная страница html в том смысле, что она доступна только с вашего, локального компьютера. Чтобы страница была доступна другим, надо ее загрузить в Интернет. Точнее, разместить , который доступен всегда: 24/7/365 (24 часа в сутки, 7 дней в неделю, весь год). Тогда такую страницу сможет увидеть каждый пользователь Интернета.
Так что html довольно интересный язык, и если в будущем Вы думаете создавать и вести собственный сайт или блог, то желательно знать хотя бы минимальный набор тегов, используемых в языке html.
Вы все еще ищете информацию о том как сделать сайт на компьютере? Наверное вы просто ожидаете толчка… нет, не пендаля, а просто ощущения того, что вот, вы сейчас начнете и все у вас получится. У вас получится, уверяю вас, я постараюсь, чтобы у вас получилось.
Итак начнем создавать сайт.
1. Создайте у себя на жестком диске (лучше локальный диск D или E) папку и назовите ее “moisait”, в этой папке создайте еще одну папку –“images” – названия вводим без кавычек. Еще я посоветовал бы создать себе папку отдельно для книг и статей, ссылок, не всегда запомнишь, то, что читал, иногда приходится искать снова. Сама папка moisait не будет потом помещена в интернет, будет перенесено только содержимое вашей папки – собственно ваш сайт и в сети интернет он будет выглядеть так же как и на компьютере.
2. Выделю отдельным пунктом – названия всех папок, всех файлов, всех картинок должны быть напечатаны английскими буквами, привыкайте.
3. В папку moisait помещаем нашу первую страничку, с именем index и расширением htm – для статичных сайтов это нормально. Итак если вы знаете как, то поместите в папку файл index.htm . Я обращаю ваше внимание, что разширения обычно не видно и даже если вы дадите первой страничке своего сайта имя index.htm расширение может быть совсем другим. Я советую включить расширения. Для этого нажимаем на значке «Мой компьютер» и в открывшемся окне папки жмем «Сервис/Свойства папки»
затем переходим на вкладку «Вид» и убираем галочку там, где написано «Скрывать расширения для зарегистрированных типов файлов» и нажимаем «ок».
4. Теперь, переходим в папку moisait кликаем правой кнопкой мыши и выбираем в появившемся окне «Создать/ Текстовый документ». Затем появившийся текстовый документ «Текстовый документ.txt» переименовываем в index.htm спрашиваю переименовать или нет? Нажимайте «Да». Значок фала поменяется, наведите на него указатель мыши и нажмите правую кнопку, в появившемся окне выберите « Открыть с помощью — Internet Explorer».
5. Нажимаем правой кнопкой мыши на рабочем поле (белое поле) и выбираем пункт «Просмотр HTML – кода». (В опере Ctrl+F3)
6. Скопируйте текст приведенный ниже в ваш файл
charset=windows-1251″>
Вы получили скелет вокруг которого будет обрастать ваш файл. То что вы скоприровали не нужно заучивать наизусть, теперь просто копируйте и редактируйте. Откуда я это взял? Выдрал с книжки и нескольких страниц в сети… у которых кстати не было некоторых мета тегов, но мы будем прописывать все.
7. В скопированном тексте вам предстоит теперь произвести небольшие дополнения.
— Между тегами (тайтл)
Возможны ошибки: < title> — лишний пробел перед title> — пробелов вообще не должно быть между начальной скобкой и тегом, после да, т.к. иногда туда прописываются параметры, но если ничего не прописываете не ставьте лишних пробелов.
Тег
—
Это строка с кодировкой в которой будет текст, сейчас стоит нужная кодировка, поэтому ничего не меняем, если только вы не хотите поставить другую кодировку, например UTF-8 и тогда ваша строка будет выглядеть так
— — ключевые слова, говорят, что поисковики не обращают на этот мета тег внимания… возможно, но все-таки этот мета тег будет дисциплинировать вас. Для каждой страницы ключевые слова будут свои и они должны встречаться на странице
— — описание – можно поместить первый абзац из вашего текста на странице.
Старайтесь, чтобы кавычек лишних не было, добавляйте в ключевые слова и описание текст без кавычек
8. Между тегами
Пишем «Привет мир!» и обновляем страничку. Можно нажать на кнопку браузера или на клавиатуре — F5.
Вот собственно и все – ваша первая страничка готова, если вы хотите разбираться и дальше во всем, то продолжайте в том, же духе, а иначе можно было взять шаблон и сразу изменив мета теги как в пункте 7, приступить к наполнению сайта, у вас же еще впереди создание структуры сайта – самостоятельное создание шаблона сайта.
Кто ничего не делает тот не ошибается – с ошибками прошу обращаться сюда.
HTML документ - это обычный текстовой файл c расширением.html , который содержит HTML-код. HTML документ иначе ещё называют HTML файлом .
Чтобы из обычного текстового файла (с расширением.txt) сделать HTML документ, нужно с.txt на.html .
Открыть файл, сохраненный с расширением.html , для просмотра в браузере можно двумя способами:
- Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
- Кликнуть по нему ПКМ → навести курсор на открыть с помощью... → выбрать нужный браузер.
При получении HTML документа браузер будет отображать его в виде веб-страницы (веб-страница - это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:
Мой первый заголовок
Мой первый абзац
Теперь откроем HTML файл браузером. В окне браузера мы не увидим отображения самого HTML-кода, потому что он будут интерпретирован для отображения содержимого страницы в нужном виде. Результат данного кода в окне браузера:
Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью... → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++ ) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).
Смена расширения файла
Windows:
- В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмём сохранить. Всё, HTML документ создан.
- Кликаем правой кнопкой мыши (ПКМ ) на текстовом файле → выбираем переименовать и меняем расширение с.txt на.html . Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываем Панель управления → выбираем Параметры папок (в Windows 10 данный пункт называется Параметры проводника) → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов.
Для того, чтобы начать работать с технологией HTML и изучать основные элементы этого языка, нам понадобится специальный файл, в котором мы будем работать.
Давайте приступим к практическим действиям и прямо сейчас создадим свой первый HTML-файл.
Это будет "полигон", который мы будем наполнять содержимым, расширять и экспериментировать.
Для тех, кто любит видео:
Первый способ, который мы рассмотрим по созданию файла HTML - это способ создания файла в простом текстовом редакторе.
Способ 1. Создаем файл html в программе «Блокнот».
Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.html.
Если у Вас не отображается расширение файлов, вот заметка:
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Только что мы с вами создали свой первый HTML-файл, который уже можем заполнять содержимым.
Аналогично html-файл создается с помощью программы Notepad++.
Но, пользоваться таким способом не всегда бывает удобно и, как видите, это не самый быстрый способ по созданию html-файлов. Есть программы, которые позволяют решить эту проблему намного быстрее.
Одной из таких программ является универсальный редактор кода Dreamweaver (я писал об этой программе ).
Способ 2. Создание файла HTML в универсальном редакторе кода Dreamweaver.
После того, как программа загрузиться появляется следующее окно приветствия:
Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.
После этого файл будет успешно создан. Причем, обратите внимание, что программой был автоматически добавлен некоторый код.
Это обязательный код, который должен присутствовать на веб-странице о нем мы еще поговорим. Dreamweaver добавляет этот код автоматически, что экономит нам время.
Теперь, для того, чтобы этот файл появился на жестком диске, его нужно сохранить. Делается это через меню «Файл – Сохранить как…»
Обратите внимание, чтобы при сохранении вы случайно не убрали расширение html, которое присваивается файлу.
Аналогично можно создать файл HTML и в других программах, я лишь хотел показать общий смысл, как это делается.
Домашнее задание
Прямо сейчас создайте HTML-файл любым способом, который описан выше. Это очень важно научиться делать прямо сейчас, т.к. все дальнейшие уроки будут основываться на том, что у вас уже есть этот файл.