Вопрос №32072 от пользователя Алексей Николаев в уроке «HTML», курс «Введение в веб-разработку»
Создайте файл index.html в любом удобном месте вашего компьютера.
Может имеет смысл написать:
Создайте файл index.html в любом удобном месте вашего компьютера. Для этого создайте текстовый документ «Новый текстовый документ.txt» (важно чтобы ваша ОС показывала расширения файлов .txt) и переименуйте его в «index.html». Далее откройте «index.html» с помощью блокнота и добавьте текст.
На случай если кто не знает как создать файл, или знает но в настройках виндовс у него стоит не показывать расширения например)
bitchplease, добрый день.
Мне кажется тогда бы пришлось описывать процедуру создания файла для разных операционных систем. Не факт что у пользователя ОС Windows. Возможно Linux или MacOS. Я думаю, процедуру создания файла, можно оставить на самостоятельное изучение.
Да наверное вы правы)
Алексей Николаев, согласна! Спасибо за ваш вопрос, а то я в первом же задании не поняла как и какой файл создать с той формулировкой(
Как создать файл html для новичка и профессионального верстальщика
Приветствую всех новичков в области веб-разработки! Если вы хотите научиться создавать веб-странички, то эта статья как раз для вас. Все потому что в ней я поведаю вам основы основ, без которых дальнейшее изучение языка html просто невозможно. Я расскажу, как создать файл html несколькими способами.
Объясню, почему существует два вида расширений подобных документов, а также приведу в качестве примера основной программный код на языке разметки. Ну что ж, давайте приступать к обучению!
Поговорим о технических особенностях
Наверное, у каждого бывала подобная ситуация с картинкой, когда при ее сохранении на компьютере случайно было нажато не «Сохранить картинку как…», а «Сохранить ссылку как…». Во втором случае после открытия сохраненного файла в браузере отображается веб-страница сайта с выбранным изображением. Думаю, знакомо.
Так вот если вы присмотритесь к расширению этого файла, то увидите там расширение .htm или .html. Почему же так? Все очень просто. Потому что язык разметки гипертекста называется html и составляет «скелет» всех сервисов в сети.
Чаще всего встречается второй вид разметки, состоящий из четырех букв. Однако в DOS-компьютерах используется первый вариант, так как запрещено в расширении использовать более трех символов. Но вы должны понимать, что это идентичные файлы.
Документы с описываемыми расширениями предназначены для открытия в браузерах, поэтому любой существующий браузер любой версии обязательно откроет для просмотра такие файлы.
Если же вам интересно посмотреть не результат кода (т.е. внешний вид веб-страницы, пользовательский интерфейс и т.д.), а сам программный код, то html-документы можно открыть при помощи не только специализированных программ для разработчиков, а и в обычных редакторах текста. Удобно, правда?
Распространенные способы создания html-файлов
Существует множество способов создания описываемых документов. Я перечислю наиболее популярные. Начну, пожалуй, с простых.
Для начинающих
Тех, кто сейчас впервые будет создавать html-страницу, я порадую! Для этого вам понадобится всего лишь одно приложение. Стандартное. Внимание! Открывайте «Блокнот». Да-да, именно его, если конечно у вас в качестве ОС стоит Windows 7, 8, 10 ну или может XP. Если же вы работаете на маке, т.е. на Mac OS, то в таком случае стоит открыть TextEdit.
Хочу обратить ваше внимание, что описывать порядок действий я буду на примере работы в блокноте.
Итак, если вы открыли указанную выше программу, то перейдем к следующему действию. Сейчас вам нужно будет скопировать код, прикрепленный ниже, и вставить его в документ.
Обратите внимание на презентованную программную реализацию. Это базовый код, который всегда будет присутствовать в ваших проектах.
Теперь нужно сохранить файл. Однако не спешите, а выполните все действия по порядку:
- Переведите курсор мышки на панель с закладками и нажмите на вкладку «Файл»;
- Выберете пункт «Сохранить как…»;
- Измените тип кодировки на UTF-8;
- Теперь обратите внимание на тип файла. Здесь нужно изменить формат с текстового на «Все файлы (*.*)»;
- Теперь пишем наименование сохраняемого документа. В мире веб-разработки главную страницу сайта принято называть index.html. Однако примеру вы можете дать любое название. Главное здесь соблюсти правило расширения. После имени добавьте .html и далее сохраните документ.
Вот теперь вы создали файл, который по умолчанию должен открыться в браузере.
Для небольших проектов
Если вы от новичка перешли на следующий уровень, то «Блокнота» вам будет мало. Во-первых, в нем тяжело отслеживать ошибки. Во-вторых, в нем нет встроенной валидации и проверки синтаксиса. Также очень удобно, когда теги языка html подсвечиваются другими цветами. Все это ускоряет и оптимизирует работу верстальщика. Поэтому стоит скачать Notepad ++.
На самом деле в одной из своих прошлых публикаций я описывал десять лучших визуальных редакторов языка разметки. Поэтому для работы вы можете выбрать один из них. Однако Notepad ++ считается одним из лучших и наиболее популярных редакторов среди остальных. Для создания идентичного документа стоит просто:
- В новый файл скопировать код программы;
- Во вкладке «Кодировка» выбрать «Кодировать в UTF-8 (без BOM)»;
- Нажать пункт «Сохранить как…»;
- И повторить действия из предыдущей инструкции, т.е. поменять расширение и тип файлов.
Для продвинутых
Если же вы решили сразу начинать работать в профессиональных средах разработки, то там все выглядит уже несколько по-другому. Так, в Visual Studio, программном продукте компании Microsoft, создать файл html можно благодаря таким действиям:
- Во вкладе «Файл» выбрать пункт «Новый» и далее снова «Файл…» (Его также можно создать при помощи комбинации клавиш Ctrl+N);
- Далее выбрать тип создаваемого документа. Нам необходим «HTML Page»;
- После вставки кода сохраните страницу с необходимым именем.
Как видите все очень просто.
Конечно работа в профессиональных средах сильно отличается от других вариантов, так как первая обладает рядом весомых преимуществ: отображение/скрытие номера (индекса) строк кода, подсветка ошибок, автодополнение и автозакрытие тегов, возможность тестировать код прямо через Visual Studio и т.д.
В случае если вам не нужно создавать документ на компьютере, а необходимо просто проверить код или посмотреть, что отобразиться на экране в браузере, можно использовать онлайн-редакторы. Я отдаю предпочтение простенькому, но быстроработающему сервису, расположенному на сайте .
Надеюсь, вам понравилась моя статья и вы почерпнули для себя новую полезную информацию. А если это так, то вступайте в ряды моих верных подписчиков и вместе со своими друзьями следите за обновлениями блога. До встречи!
С уважением, Роман Чуешов
Папка index.html
Я создала папку Kinomonster, потом надо создать файл index.html, он создается, но размещен не под папкой Kinomonster, а в строке над базовой разметкой, пробовала раз 10 — не создается. Файлы style и css размещаются сразу под папкой Kinomonster. В уроке вы объясняете это в 05.41. Что я делаю не так? И еще, есть ли какая-нибудь программа. позволяющая не переключать без конца язык на клавиатуре, которая сама все распознает?
Сделала все с начала, создала папку — новый файл — указала папку Киномонстр — index.html — и снова в папке файла нет, он появляется только в строке над базовой разметкой
все получилось! Благодарю Юрия Смирнова
Нина Бессмертная
4 years ago
Наверное при создании файла index.html вы неверно выбрали папку где этот файл должен создаваться. Можно создать файл заново выбрав верную папку или нажать в меню File -> Save As. и сохранить созданный файл в нужной папке.
Yuri Smirnov
4 years ago
Один ответ
JavaScript — полный курс с нуля до результата!
Полный курс Python для начинающих – с нуля до специалиста
Photoshop для начинающих Веб-дизайнеров
Adobe Illustrator с нуля – основы дизайна для начинающих
Программирование на Java с нуля
React JS для начинающих + Redux
Django 3 — Full Stack разработка веб сайтов на Python
WordPress – с нуля до Профи!
Основы HTML/CSS — верстка сайтов с нуля
WordPress – Быстрый старт!
Шаблонизатор Pug/jade — современный ускоритель для HTML
ВЕБ-разработчик — с нуля до результата!
Посадка верстки и создание тем на CMS WordPress
Настройка рекламы Яндекс Директ — продвижение сайтов
Настройка рекламы Google — продвижение сайтов
Настройка таргетированной рекламы и продвижение ВКонтакте
Настройка рекламы и продвижение Facebook+Instagram
МЕГАКУРС по рекламе: Яндекс Директ, Google Реклама, ВКонтакте, Facebook+Instagram
Полный курс Android + Java для начинающих
Kotlin — Быстрый старт!
Программирование на C# – от новичка до специалиста
Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript
SQL и PostgreSQL для начинающих
Создание административной панели на React JS + PHP
Практический JavaScript — продвинутый уровень
GIT. Управление версиями для разработчиков
Программирование на Java с нуля — Уровень 2 + 10 собеседований
Полный курс Python – продвинутый уровень + SQL
Figma для Веб дизайнера — с нуля до профессионала
React с нуля для начинающих + 3 проекта в портфолио!
Веб Дизайн в Figma. Основы Ui Ux дизайна на практике
Алгоритмы и структуры данных от А до Я
Adobe Illustrator с нуля – Уровень 2 – продвинутая практика
Android разработчик – профессиональный уровень (Kotlin)
Веб Дизайн в Figma 2022 Продвинутый уровень. Создание Ui Kit
Шаблоны проектирования на Python
Создание основного HTML-файла плагина: index.html
Каждый плагин работает в своем iframe. Редактор подключает файл index.html, указанный в файле конфигурации плагина config.json. Файл index.html — это точка входа в плагин. Файл index.html подключает файл pluginBase.js — базовый файл, необходимый для работы с плагинами.
Ниже приводится пример кода для файла index.html (этот код используется для плагина Шахматы, но любой другой файл index.html создается аналогично):
charset="UTF-8" /> Chess type="text/javascript" src="../pluginBase.js"> type="text/javascript" src="chess.js"> style="width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;"> id="chess" style="margin: 0; padding: 0;">