Как создать html документ на windows 10

Для того, чтобы начать работать с технологией HTML и изучать основные элементы этого языка, нам понадобится специальный файл, в котором мы будем работать.

Давайте приступим к практическим действиям и прямо сейчас создадим свой первый HTML-файл.

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

Для тех, кто любит видео:

Все мои уроки по HTML и верстке сайтов здесь.

Первый способ, который мы рассмотрим по созданию файла HTML — это способ создания файла в простом текстовом редакторе.

Способ 1. Создаем файл html в программе «Блокнот».

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».

09-09-2013 6-05-25

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.html.

09-09-2013 6-06-53

Если у Вас не отображается расширение файлов, вот заметка:

Как включить отображение расширений файлов в Windows.

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

Только что мы с вами создали свой первый HTML-файл, который уже можем заполнять содержимым.

Аналогично html-файл создается с помощью программы Notepad++.

Но, пользоваться таким способом не всегда бывает удобно и, как видите, это не самый быстрый способ по созданию html-файлов. Есть программы, которые позволяют решить эту проблему намного быстрее.

Одной из таких программ является универсальный редактор кода Dreamweaver.

Способ 2. Создание файла HTML в универсальном редакторе кода (на примере Dreamweaver).

После того, как программа загрузиться появляется следующее окно приветствия:

09-09-2013 6-08-16

Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.

После этого файл будет успешно создан. Причем, обратите внимание, что программой был автоматически добавлен некоторый код.

09-09-2013 6-09-24

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

Теперь, для того, чтобы этот файл появился на жестком диске, его нужно сохранить. Делается это через меню «Файл – Сохранить как…»

09-09-2013 6-10-17

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

Обратите внимание, чтобы при сохранении вы случайно не убрали расширение html, которое присваивается файлу.

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

Все мои уроки по HTML и верстке сайтов здесь.

I want to create a file called «home.html». Since i am using windows, i tried to first create a text file and then rename it to home.html. But after doing so, when i right click and check the properties of home.html, it shows «Type of file» — text(.txt). I want to create a file with html extension. Kindly help me. I am new to html

Gedeon Mutshipayi's user avatar

asked Jul 18, 2019 at 12:12

Morais's user avatar

4

The file is renamed home.html.txt because by default the file extension is hidden on windows.

You must start by displaying the extension of the files to rename them correctly.

if you use windows 8,10,11

 1. Open File Explorer (open any folder).
 2. Click the View tab.
 3. Select "File name extensions."
 4. Optionally, you can enable Hidden items.
 5. File extensions will now be visible.

enter image description here

If you use windows 7

1. In the Start menu search, type folder options.
2. In the Folder Options window, click the View tab.
3. Remove the check from "Hide extensions for known file types."
4. Click OK.

SOURCE : https://knowledge.autodesk.com

answered Apr 17, 2022 at 6:18

Gedeon Mutshipayi's user avatar

You can create that file using CMD,

  1. Open CMD

  2. Tape the following command in the location you want to create the file

type nul > file.html

answered Apr 17, 2022 at 6:08

Gedeon Mutshipayi's user avatar

0

Had same issue . What you need to do is that you gonna go to your editor be it NotePad or Sublime . Press ctrl N for a new page and Ctrl S to save the file and you will need to choose your file type to be html

answered Jul 3, 2020 at 18:55

Aluko Iyanu's user avatar

0

In the desktop window of your PC create a new folder ( with any name) double click on the folder to enter, then right click and create a new txt file. After creating a txt file, right click on it, then select rename and change the .txt to .html to make it a HTML file.

answered Sep 22, 2019 at 0:04

abdulrahman yusuf's user avatar

1

You need to open notepad on your PC and write your HTML code.

Then go in ‘File’, ‘Save as’,write the file name with the .html example: name.html.

Now change .txt to ‘all files’.

answered Jul 18, 2019 at 12:19

Dario Marchitelli's user avatar

2

HTML — язык разметки гипертекста, который используется для создания веб-сайтов. В этой статье мы расскажем о том, как создать HTML файл на компьютере под управлением Windows 10 — от установки необходимого софта до публикации созданного сайта в интернете.

Установка необходимого софта

Для создания HTML страниц необходим текстовый редактор, который поддерживает работу с языком разметки. В качестве такого редактора можно использовать любой текстовый редактор, например, Notepad, который предустановлен в Windows 10. Однако, для удобной работы рекомендуется использовать специализированные редакторы, например, Sublime Text, Visual Studio Code или Atom. Эти редакторы предоставляют множество полезных функций для работы с HTML, CSS и JavaScript.

Установка Sublime Text

Sublime Text можно скачать с официального сайта https://www.sublimetext.com. Для этого нужно перейти по ссылке «Download» и выбрать соответствующую версию для Windows. После загрузки файла установки нужно нажать на него двойным щелчком и следовать инструкциям на экране.

Установка Visual Studio Code

Visual Studio Code можно также скачать с официального сайта https://code.visualstudio.com. Нужно выбрать версию для Windows и следовать инструкциям на экране.

Установка Atom

Atom можно скачать с официального сайта https://atom.io. Нужно выбрать версию для Windows и следовать инструкциям на экране.

Создание HTML файлов

После установки выбранного редактора можно приступить к созданию HTML страниц. Для этого нужно запустить редактор и создать новый пустой файл.

Создание нового файла HTML в Sublime Text

  1. Откройте Sublime Text.
  2. Нажмите Ctrl+Shift+N, чтобы создать новый файл.
  3. Вставьте следующий код:
<!DOCTYPE html>
<html>
<head>
	<title>Мой первый HTML документ</title>
</head>
<body>
	<h1>Привет, мир!</h1>
</body>
</html>
  1. Сохраните файл с расширением .html в месте по вашему выбору.

Создание нового файла HTML в Visual Studio Code

  1. Откройте Visual Studio Code.
  2. Нажмите Ctrl+N, чтобы создать новый файл.
  3. Вставьте следующий код:
<!DOCTYPE html>
<html>
<head>
	<title>Мой первый HTML документ</title>
</head>
<body>
	<h1>Привет, мир!</h1>
</body>
</html>
  1. Сохраните файл с расширением .html в месте по вашему выбору.

Создание нового файла HTML в Atom

  1. Откройте Atom.
  2. Нажмите Ctrl+Shift+N, чтобы создать новый файл.
  3. Вставьте следующий код:
<!DOCTYPE html>
<html>
<head>
	<title>Мой первый HTML документ</title>
</head>
<body>
	<h1>Привет, мир!</h1>
</body>
</html>
  1. Сохраните файл с расширением .html в месте по вашему выбору.

Редактирование и сохранение файла

После создания файла можно его редактировать, добавлять новые теги и элементы. Например, можно изменить заголовок страницы:

<!DOCTYPE html>
<html>
<head>
	<title>Мой первый HTML документ</title>
</head>
<body>
	<h1>Привет, мир!</h1>
	<p>Это мой первый HTML документ. Я учусь создавать веб-страницы.</p>
</body>
</html>

После внесения изменений нужно сохранить файл. В Sublime Text и Atom можно это сделать нажатием на Ctrl+S, в Visual Studio Code — Ctrl+Shift+S.

Публикация веб-страницы

Чтобы опубликовать веб-страницу, нужно загрузить ее на сервер. Для этого можно использовать FTP-клиент, например, FileZilla.

Установка FileZilla

FileZilla можно скачать с официального сайта https://filezilla-project.org/download.php. Для этого нужно выбрать соответствующую версию для Windows и следовать инструкциям на экране.

Выгрузка файлов на сервер в FileZilla

  1. Откройте FileZilla.
  2. Введите адрес FTP-сервера, имя пользователя и пароль.
  3. Нажмите на кнопку «Quickconnect».
  4. После успешного подключения вы можете перетащить созданный файл HTML с компьютера на сервер.

Выводы

Теперь вы знаете, как создать HTML файл на компьютере под управлением Windows 10. Для создания веб-страницы нужно выбрать подходящий редактор, создать новый файл, добавить необходимые теги и элементы, сохранить файл, а затем загрузить его на сервер с помощью FTP-клиента.


Загрузить PDF


Загрузить PDF

Вас интересует веб-дизайн? Чтобы попробовать свои силы в создании веб-страниц, необязательно пользоваться сложными программами. Веб-страницу можно создать в Блокноте, предустановленном на компьютерах с Windows. В качестве языка программирования будет использован HTML — HyperText Markup Language (язык гипертекстовой разметки). Вы можете написать HTML-код страницы в Блокноте или любом другом текстовом редакторе, а затем просто сохранить файл как HTML-документ. Этот язык легко изучить, даже если у вас нет навыков программирования. Итак, в нашей статье мы расскажем, как создать простую веб-страницу с помощью Блокнота.

  1. Изображение с названием 533547 1

    1

    Откройте меню «Пуск»

    Windows Start

    . Нажмите на логотип Windows в нижнем левом углу экрана. На экране появится меню «Пуск».

  2. Изображение с названием 533547 2

    2

    Найдите Блокнот. Введите блокнот в меню «Пуск». Вверху меню появятся результаты поиска.

  3. Изображение с названием 533547 3

    3

    Щелкните по Блокнот. Это голубой значок в виде блокнота верхней части результатов поиска. Откроется Блокнот.

  4. Изображение с названием 533547 4

    4

    Откройте меню Файл. Оно находится в верхнем левом углу окна Блокнота.

  5. Изображение с названием 533547 5

    5

    Нажмите Сохранить как…. Эта опция находится в открывшемся меню «Файл». Откроется окно «Сохранить как».

  6. Изображение с названием 533547 6

    6

    Откройте выпадающее меню «Тип файла». Оно находится в нижней части окна; в нем отобразится опция «Текстовые документы (*.txt)». Нажмите на нее, чтобы появилось выпадающее меню.

  7. Изображение с названием 533547 7

    7

    Щелкните по Все файлы. Эта опция находится в выпадающем меню. Теперь файл можно сохранить как HTML-документ.

  8. Изображение с названием 533547 8

    8

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

    • Например, чтобы сохранить документ на рабочем столе, прокрутите вверх и нажмите «Рабочий стол» на левой панели.
  9. Изображение с названием 533547 9

    9

    Введите имя файла и расширение «html». Нажмите на текстовое поле «Имя файла», введите имя файла, а затем введите .html.

    • Например, чтобы назвать файл веб-страницы «hello», введите hello.html.
  10. Изображение с названием 533547 10

    10

    Нажмите Сохранить. Текстовый документ будет сохранен как документ HTML. Теперь можно перейти к созданию структуры веб-страницы.

    • Если Блокнот неожиданно закрылся или вы хотите вернуться к документу позже, щелкните правой кнопкой мыши по HTML-файлу и в меню выберите «Изменить».

    Реклама

  1. Изображение с названием 533547 11

    1

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

  2. Изображение с названием 533547 12

    2

    Добавьте теги «head». Этот раздел HTML-документа содержит метаданные веб-страницы. В веб-браузере они не отображаются. Здесь может содержаться такая информация, как имя страницы, таблицы стилей (CSS), скрипты и так далее. Сейчас просто введите <head> после тега <html>, дважды нажмите Enter, чтобы вставить пустые строки, а затем введите </head>.

    • Каждый HTML-элемент должен находиться между двумя тегами. Когда мы добавляем новый элемент, например тег «<head>», открывающий соответствующий раздел, нам нужно добавить и закрывающий тег. В данном случае это «</head>».
  3. Изображение с названием 533547 13

    3

    Введите имя страницы. Оно должно находиться внутри раздела «head», так что его нужно ввести между открывающим тегом «<head>» и закрывающим «</head>». Чтобы добавить имя, наберите открывающий тег <title>, затем введите текст (собствнно имя) и сразу за ним добавьте закрывающий тег </title>. Например, если именем вашей страницы будет «Мой сайт», введите следующее:

  4. Изображение с названием 533547 14

    4

    Добавьте теги «body». Все, что будет отображаться на вашей странице в веб-браузере, должно находиться между этими тегами. Под тегом </title> введите:

  5. Изображение с названием 533547 15

    5

    Закройте тег языка HTML. Последним тегом документа будет закрывающий тег «html», чтобы обозначить конец страницы. Введите </html> под тегом </body>, чтобы закрыть тег HTML.

  6. Изображение с названием 533547 16

    6

    Просмотрите HTML-документ. На данном этапе документ должен выглядеть следующим образом:

    <!DOCTYPE html>
    <html>
    
    <head>
    <title>Мой сайт</title>
    </head>
    
    <body>
    
    </body>
    
    </html>
    
  7. Изображение с названием 533547 17

    7

    Сохраните документ. Для этого нажмите «Файл» и затем «Сохранить» на панели меню. В качестве альтернативы для сохранения документа можно нажать Ctrl+S. Не забывайте чаще сохранять его в процессе работы.

    Реклама

  1. Изображение с названием 533547 18

    1

    Запомните, что все элементы веб-страницы должны находиться между тегами «body». Любой элемент — будь то заголовок или абзац — нужно вводить после тега <body> и перед тегом </body>.

  2. Изображение с названием 533547 19

    2

    Добавьте основной заголовок сайта. Введите <h1></h1> между тегами «body», а затем введите заголовок внутри тегов <h1></h1>. Например, чтобы создать страницу с заголовком «Добро пожаловать», введите следующее:

    <h1>Добро пожаловать</h1>
    
    • Используйте теги от <h2></h2> до <h6></h6>, чтобы создать заголовки меньшего размера.
  3. Изображение с названием 533547 20

    3

    Добавьте текст на страницу. Введите теги абзаца <p></p>, а затем введите текст внутри этих тегов. Результат должен выглядеть примерно так:

    <p>Это мой сайт. Голосуйте за меня на выборах!</p>
    
  4. Изображение с названием 533547 21

    4

    Вставьте разрыв абзаца. Чтобы добавить пустые строки между абзацами или заголовками, введите <br> после закрывающего тега строки. Например, чтобы создать разрыв строки после абзаца, введите следующее:

    <p> Это мой сайт. Голосуйте за меня на выборах!</p><br>
    <p>А еще я люблю картошку</p>
    
    • После первого тега <br> можно ввести такой же тег, чтобы добавить еще один разрыв строки, то есть между двумя абзацами будут две пустые строки.
    • Для разрыва абзаца закрывающий тег не нужен.
  5. Изображение с названием 533547 22

    5

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

    <b>Полужирный текст</b>
    <i>Наклонный текст</i>
    <u>Подчеркнутый текст</u>
    <sub>Подстрочный текст</sub>
    <sup>Надстрочный текст</sup>
    
  6. Изображение с названием 533547 23 1

    6

    Добавьте на страницу изображение. Чтобы изображение можно было добавить на веб-страницу, оно должно быть загружено на сервер в интернете, и вам нужно знать веб-адрес этого изображения. Наберите <img src=, затем адрес изображения в кавычках. В конце добавьте закрывающий значок >. Вот пример, как это должно выглядеть:

    <img src="https://www.mywebsite.me/images/me.jpg">
    
    • Если изображение хранится не в интернете, а на вашем компьютере, вместо веб-адреса можете использовать путь к его местоположению. Например: <img src="C:\Users\username\Pictures\me.jpg">
  7. Изображение с названием 533547 24 1

    7

    Добавьте на страницу ссылку. Ссылки — важнейший аспект веб-разработки. Они позволяют пользователям переходить с одной страницы на другую. Чтобы добавить ссылку, вам нужно знать адрес веб-страницы, на которую она будет вести. Наберите <a href=, затем веб-адрес нужной страницы в кавычках. В конце добавьте закрывающий значок >. Затем сразу за ним наберите текст ссылки и закрывающий тег </a>. Вот пример того, как добавить на веб-страницу ссылку:

    <a href="https://www.mywebsite.me/ipage2">Вторая страница</a>
    
    • Вы также можете добавить ссылку на адрес электронной почты или использовать вместо текста ссылки изображение.
  8. Изображение с названием 533547 23

    8

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

    <!DOCTYPE html>
    <html>
    
    <head>
    <title>Мой сайт</title>
    </head>
    
    <body>
    
    <h1>Добро пожаловать!</h1>
    <a href="https://www.mywebsite.me/ipage2">Вторая страница</a>
    <img src="https://www.mywebsite.me/images/me.jpg">
    <p>Это мой сайт. Надеюсь, он вам понравится!</p>
    <p><b>Полужирным текстом выделены главные моменты.</b></p>
    <p><i>Курсив выглядит зловеще.</i></p>
    
    </body>
    </html>
    

    Реклама

  1. Изображение с названием 533547 24

    1

    Сохраните документ. Для этого нажмите Ctrl+S. Теперь, когда вы откроете документ HTML, отобразится последняя версия вашей веб-страницы.

  2. Изображение с названием 533547 25

    2

    Щелкните правой кнопкой мыши по HTML-документу. Откроется меню.

  3. Изображение с названием 533547 26

    3

    Выберите Открыть с помощью. Эта опция находится в меню. Откроется новое меню.

  4. Изображение с названием 533547 27

    4

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

  5. Изображение с названием 533547 28

    5

    Реклама

Об этой статье

Эту страницу просматривали 240 709 раз.

Была ли эта статья полезной?

По своему содержанию HTML файл является текстовым файлом. То есть его можно открыть и изменять в любом редакторе текста. К примеру, в «блокноте» на системе Windows. Поэтому создание HTML файла ни чем не отличается от создания простого текстового документа.

Рассмотрим пошаговую инструкцию создания, просмотра и редактирования HTML файла. Рассматривать задачу будем с позиции пользователя операционный системы Windows.

Создать HTML файл

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

Другими словами, если текстовый документ назывался «Новый текстовый документ.txt«, то переименуете его в «Новый текстовый документ.html«.

Обратите внимание на то, что по умолчанию в системе Windows скрыты расширения файлов. Поэтому вместо имени файла «Новый текстовый документ.txt» вы можете увидеть только «Новый текстовый документ». Чтобы включить отображение расширений файлов, нажмите на закладку «Вид» в проводнике файлов, а затем поставьте галочку на пункте «Расширения имён файлов»

Редактировать HTML файл

Кликните правой кнопкой мыши на html файл. Выберите пункт «Открыть с помощью». В этом пункте выберите блокнот или другой редактор простейших текстовых файлов. Если такого пункта нет, то нажмите «Выбрать другое приложение» и выберите блокнот в списке приложений.

Можно редактировать HTML файл и в других текстовых редакторах. К примеру, в MS Office Word. Но есть вероятность, что будут проблемы с сохранением файла: редактор самостоятельно будет вставлять ненужные теги при сохранении. Поэтому рекомендуем использовать простейшие программы для редактирования текстовых файлов. К примеру, «блокнот».

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

Посмотреть HTML файл в браузере

Чтобы посмотреть как выглядит сохранённый HTML файл в браузере, кликните на него два раза. Загрузится браузер и отобразит html файл. Если этого не произошло и файл открылся в текстовом редакторе, то кликните на файл правой кнопкой мыши. Затем выберите пункт «Открыть с помощью», в котором выберите свой браузер. Если в этом списке браузера нет, то нажмите «Выбрать другое приложение» и выберите свой браузер из всех установленных на компьютере приложений.

При сохранении HTML файла нет нужды закрывать его в браузере. Вы можете одновременно изменять содержимое файла через текстовый редактор и просматривать результаты в браузере. Только не забудьте обновить страницу в браузере после внесения изменений в файл (кнопка — «F5»).

О том что именно должен содержать стандартный HTML файл читайте в статье «Структура HTML файла».

Была ли статья полезной?

Была ли эта статья полезна?

Есть вопрос?

хостинг для сайтов

Закажите недорогой хостинг

Заказать

всего от 290 руб

  • Как соединить место на жестком диске windows 10
  • Как создавать файлы в командной строке windows
  • Как создать gpt диск при установке windows 10 с флешки
  • Как совместить игру с windows 10
  • Как соединить логические диски на windows 10