Как создать html файл в блокноте windows 10

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

Содержание

  • Способ 1: Текстовый редактор
  • Способ 2: Сторонние программы
  • Способ 3: Онлайн-редакторы HTML
  • Способ 4: Онлайн-конвертеры
  • Вопросы и ответы

Как создать HTML файл на Windows 10

Способ 1: Текстовый редактор

Файл HTML, по сути, является простым текстовым документом с соответствующим расширением, содержащим теги – специальные элементы, указывающие браузеру, как следует отображать содержимое документа. HTML-файл может вообще не содержать тегов, и при этом он все равно станет открываться браузером, правда, в последнем случае его содержимое будет неупорядоченно. Создать файл HTML в Windows 10 очень просто.

  1. Создайте «Блокнотом» или любым другим текстовым редактором текстовый файл и дайте ему произвольное название на английском языке, например index.

    2. Как создать HTML файл на Windows 10-1

  2. Откройте файл текстовым редактором и вставьте в него следующий код:
    <!doctype html>
    <html>
    <head>
    <title>Заголовок</title>
    </head>
    <body>
    <p>Текстовый контент</p>
    </body>
    </html>

    3. Как создать HTML файл на Windows 10-2

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

    4. Как создать HTML файл на Windows 10-3

  4. Измените расширение сохраняемого файла на HTML, тип файла выставьте «Все файлы» и нажмите «Сохранить».

    5. Как создать HTML файл на Windows 10-4

Простейшая веб-страница создана, откройте ее любым браузером.

Способ 2: Сторонние программы

Профессиональные верстальщики используют для создания файлов HTML специальные редакторы. Таких редакторов много и самых разных, есть, например визуальные HTML-редакторы, позволяющие создавать веб-страницы путем размещения на них различных элементов. Примером такой программы может служить WYSIWYG Web Builder, умеющая генерировать HTML-код веб-страниц автоматически.

Скачать WYSIWYG Web Builder с официального сайта

  1. Скачайте редактор с сайта разработчика, установите и запустите.
  2. WYSIWYG Web Builder автоматически создаст файл index.html — чтобы просмотреть или отредактировать его код, нажмите на панели инструментов кнопку «HTML».

    3. Как создать HTML файл на Windows 10-5

  3. Замените, если необходимо, содержимое тегов <title> и <body>, удалите ссылки на файлы CSS, если на HTML-странице не предполагается использование стилей. Нажмите «OK».

    4. Как создать HTML файл на Windows 10-6

  4. В главном меню переключитесь на вкладку «Save As…», затем в окне сохранения выберите «HTML Document».

    5. Как создать HTML файл на Windows 10-7

  5. Укажите в диалоговом окошке обзора папку для сохранения веб-страницы.

    6. Как создать HTML файл на Windows 10-8

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

Подробнее: Программы для верстки сайтов

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

Перейти на сайт HTML-редактора

Lumpics.ru

  1. Открыв в браузере страницу с HTML-редактором, вставьте в поле текст и отформатируйте его, если это необходимо.
  2. Нажмите кнопку «Скачать .html». В результате на компьютер будет скачан файл index.html, содержащий все базовые элементы языка HTML.

    3. Как создать HTML файл на Windows 10-7

Способ 4: Онлайн-конвертеры

Наконец, для создания простых HTML-файлов можно использовать многофункциональные онлайн-конвертеры, к примеру популярное веб-приложение «Online-Convert», позволяющее преобразовывать в HTML файлы различных текстовых форматов.

Перейти на сайт сервиса Online-Convert

  1. Создайте простой текстовый документ в «Блокноте», Microsoft Word или другом текстовом редакторе.
  2. Перейдите на сайт конвертера и выберите в выпадающем списке раздела «Конвертер документов» опцию «Конвертируйте в формат HTML».

    3. Как создать HTML файл на Windows 10-9

  3. Перетащите конвертируемый текстовый документ на форму-загрузчик, дождитесь загрузки файла и нажмите кнопку «Начать».

    4. Как создать HTML файл на Windows 10-10

  4. Online-Convert преобразует документ в HTML-файл, который автоматически скачается на компьютер. Если скачивание не будет запущено автоматически, нажмите кнопку «Скачать».

    5. Как создать HTML файл на Windows 10-11

Online-Convert достаточно корректно выстраивает структуру HTML, однако в некоторых случаях со стороны пользователя может понадобиться небольшая коррекция сгенерированного кода, например удаление ненужной метаинформации, добавляемой веб-приложением при обработке файлов Microsoft Office.

Еще статьи по данной теме:

Помогла ли Вам статья?

Источник


Загрузить PDF


Загрузить PDF

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

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

    1

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

    Изображение с названием Windowsstart.png

    . Нажмите на логотип 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:UsersusernamePicturesme.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

    Реклама

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

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

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

Источник

Для того, чтобы начать работать с технологией 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 и верстке сайтов здесь.

Источник

HTML документ — это обычный текстовой файл c расширением .html, который содержит HTML-код. HTML документ иначе ещё называют HTML файлом.

Чтобы из обычного текстового файла (с расширением .txt) сделать HTML документ, нужно сменить расширение с .txt на .html.

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

Windows

  1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
  2. Кликнуть по нему ПКМ → навести курсор на открыть с помощью... → выбрать нужный браузер.

При получении HTML документа браузер будет отображать его в виде веб-страницы (веб-страница — это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок</title>
  </head>
  <body>
    <h1>Мой первый заголовок</h1>
    <p>Мой первый абзац</p>
  </body>
</html>

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

моя первая страничка

Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью... → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

Смена расширения файла

Windows:

  1. В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмём сохранить. Всё, HTML документ создан.
  2. Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываем Панель управления → выбираем Параметры папок (в Windows 10 данный пункт называется Параметры проводника) → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов.
Источник

По своему содержанию 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 руб

Источник

fЧтобы создать файл html совсем не обязательно покупать или скачивать из интернета для этого какие-либо приложения или программы. В любом компьютере есть уже готовая бесплатная программа «Блокнот», которая идет в комплекте с операционной cистемой windows.

В принципе создать такой документ можно в любом текстовом редакторе, даже в ворде.

Находим программу на своем компьютере:

идем в главное меню «Пуск»: Все программы ->Стандартные -> Блокнот.

Наполняем документ содержимым, после чего в главном меню выбираем «Файл»—> Сохранить как…

как создать html файл в блокноте

Чтобы сохранить файл с расширением html, надо поменять  *.txt на *.html, как здесь:

как сохранить файл в хтмл

Таким образом, наш файл html создан.

На самом деле, существуют программы, которые помогают ускорить процесс наполнения файла содержимым.

Среди таких: Notepad++ и Dreamweaver. Первая является бесплатной и можно ее скачать на официальном сайте. Вторая – платная.

Преимущества программы Dreamweaver

После запуска программы надо будет выбрать: Создать HTML.

создание сайта дримвивер

Файл будет создан автоматически с уже готовым обязательным кодом.

сохранение файла

Сохраняем файл через выпадающее меню в программе.

сохраняем файл впрограмме

Аналогичным образом можно создавать документы в других программах.

Структура html документа

А теперь поговорим о том, как должен выглядеть html файл, чтобы его мог правильно интерпретировать браузер.

Вообще, что такое html?

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

Для начала создадим структуру документа, прописав основные теги:

создадим структуру документа

Фото: создадим структуру документа

Но, чтобы наша страница в интернете выглядела более привлекательно, нам понадобится еще один файл CSS.

создадим стили

Этим документом мы создадим стили: цвета, отступы, т.е. приукрасим нашу веб страницу.

Подобным образом создаем документ с расширением .CSS.

Открываем блокнот, создаем таблицу стилей, сохраняем файл:

создаем таблицу стилей

Теперь можем дополнить структуру созданного документа, прописав ссылку на документ с расширением .css.

добавим ссылку на документ

Можно также добавить текст. Например: дать заголовок странице, прописав его между тегами: <title>Страница обо мне</title> и <body>Приветствую Вас!</body>.

После того, как мы сохраним все и откроем файл в браузере, мы увидим следующее:

страница обо мне

Если в браузере откроется то, что мы видим, значит, все сделано правильно.

Чтобы сайт стал виден в интернете, надо файлы .html и .css разместить на надежном хостинге.

Что-то я отвлеклась. Продолжим создавать нашу веб страничку.

Но, прежде я кратенько объясню значение прописанных тегов.  

<html> — данный тег является парным и служит контейнером для всех остальных. В нем заключена вся web-страница.

В самом начале <!DOCTYPE html> мы указали браузеру тип документа:

  • <head> — тоже парный тег. В нем находится вся служебная информация о веб странице. Внутри данного тега находится <title> — название данной страницы, которое выводится в браузере вверху;
  • в тег <body></body>поместим содержание файла, т.е ту информацию, которая будет видна в браузере, когда мы откроем документ;
  • зададим кодировку и подключим файл стилей с помощью непарного тега <link>.

А теперь нам надо спланировать структуру сайта, т.е. подумать, какие блоки нам понадобятся.

Если мы посмотрим на другие ресурсы, то видим, что в большинстве своем они имеют: шапку, горизонтальные и вертикальные меню, боковые колонки, подвал (футер).

Создаем структуру шаблона

Допустим, мы решили сделать ресурс таким образом, чтобы он содержал хедер (шапку), колонка с основным содержимым, подвал (низ сайта) и боковая колонка (там будем размещать виджеты, рекламу и т.п.).

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

Создаем общий контейнер, где в теге <body></body> прописываем структуру вместо «Приветствую, Вас!»:

Создаем общий контейнер

В html блоки создаются парным тегом <div></div>, каждому из которых можно добавлять индикатор id, чтобы потом оформить внешний вид в css.

Если мы обновим наш файл в браузере, то увидим такую картинку:

создадим блоки

Оформление блоков

Начинаем оформление с самого большого контейнера.

Добавляем в созданный ранее файл .css следующий код:

добавим в файл код

Теперь расшифруем эту запись.

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

Далее обратимся к блоку с индентификатором  main, после чего в фигурных скобках перечислим правила, которые будут применены к данному элементу:

  • ширина контейнера будет составлять 810 px,
  • margin: 0 auto – установит блок по центру, что позволит нашему сайту красиво отобразиться по центру,
  • следующее свойство border добавит сплошную рамку со всех сторон. В данном случае она будет черной.

Теперь настроим внешний вид основных блоков нашей страницы.

Для этого пропишем следующий код:

настроим внешний вид основных блоков страницы

  • Вначале зададим стили для шапки: ее высота = 100 px и она отделена в нижней части рамкой от остальных блоков.
  • Сайдбару мы зададим ширину, высоту и свойство float: left. Данное правило означает, что элемент прижмется к левому краю основного блока.
  • Такое же свойство зададим контентному блоку, но только он окажется справа от сайдбара и ширина его будет больше.

Из кода видно, что сайдбар и блок с контентом имеют одинаковую высоту.

Но в данном случае особой роли это не играет. В реальности контентный блок всегда содержит очень много информации и поэтому высоту можно не задавать вообще.

Блок подвала (footer) – небольшой высоты и окружен рамкой.

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

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

Чтобы этого не происходило мы дали футеру команду типа: смотри, над тобой расположены плавающие блоки. Расположись ниже их.

Если теперь обновить страницу в браузере, то мы увидим следующее:

блоки сайта

Приукрашиваем сайт

На следующем этапе добавим сайту цветов. Для начала зададим фон.

Сделать это можно, добавив следующий код:

#main{

background: #b3c1e6

}

Получим вот такой результат:

приукрашиваем сайт

Работа с шапкой

Следующие шаги должны быть направлены на добавление в шапку названия сайта и логотипа.

Чтобы сделать логотип надо нарисовать картинку в фотошопе, либо скачать из интернета. Логотип следует положить в папку, где находится html-документ.

Код примет следующий вид:

#header{

background: #9091da url(kartinka.jpeg) no-repeat 5% center

}

kartinka.jpeg – это наш логотип, далее следует команда, что логотип не должен повторяться и разместиться она должна по центру сверху и снизу, сместившись от начала блока на 5% по горизонтали.

Теперь убираем надпись «Здесь будет шапка» и пишем красивый заголовок.

Надо будет его красиво оформить, задав нужные стили:

#title{

font-size: 32px;

float: left;

margin-left: 200px;

font-family: tahoma;

color: yellow;

padding-top: 20px;

text-shadow: 0 0 5px orange;

}

Мы задали следующие свойства:

  • размер и семейство шрифта;
  • отступ слева;
  • прижали заголовок к левому краю;
  • выбрали цвет шрифта;
  • верхний внутренний отступ;
  • тень текста.

Теперь наша шапка готова. В реальности она может содержать различные ссылки, номера телефонов и т.п.

Оформление меню в сайдбаре

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

<ul class = "menu">

<li><a href = "#">Пункт меню1</a></li>

<li><a href = "#">Пункт меню2</a></li>

<li><a href = "#">Пункт меню3</a></li>

<li><a href = "#">Пункт меню4</a></li>

<li><a href = "#">Пункт меню5</a></li>

<li><a href = "#">Пункт меню6</a></li>

</ul>

Зададим стили:

.menu{

list-style: none;

}

Можно перед меню добавить красиво оформленный заголовок.

Как оформить блок контента

Добавим статью и наш блок готов.

Не забываем прописывать теги заголовков:

<h1>Заголовок статьи</h1>

<h2>Подзаголовок статьи</h2>

<p>Выделяем абзацы</p>

Заголовки можно оформить цветом.

Как оформить подвал

Я не имею привычки что-то пихать в подвал. Обычно в футере размещают сведения об авторских правах. В данном случае и мы сделаем также.

Мы просто выровняем подвал по центру:

#footer{

text-align: center

}

Вот и все, мы создали html файл в блокноте.

Наш файл содержит: логотип, название, сайдбар с меню, статью, футер. Чтобы сделать сайт привлекательным мы добавили стили, прописав их в файле .css.

Видео: «Как сделать простейший сайт без знаний html»

Источник


Download Article

Easily create a web page with the software already installed on your computer


Download Article

  • Creating a Document

    • |

  • Adding Structural Code

    • |

  • Inserting Page Elements

    • |

  • Testing Your Page

    • |

  • Sample HTML Documents

    • |

  • Q&A

    • |

  • Tips

Do you want to learn web design? You don’t need fancy editing software to get started creating a web pages. You can create web pages using Notepad, which comes pre-installed on your Windows computer. The language used to create web pages is called «HTML,» which stands for Hypertext Markup Language. You can write HTML using Notepad or any other text editing program. Then all you need to do is save the file as an HTML document. HTML is easy to learn, even if you have no programming skills. This wikiHow article teaches you how to create a simple webpage using Notepad.

Things You Should Know

  • HTML is the primary language used in web design.
  • You can easily write HTML using Notepad or any other text editing program.
  • Don’t forget to save the file as an HTML (.html) document.

  1. Image titled 533547 1

    1

    Open Start

    Image titled Windowsstart.png

    . Click the Windows logo in the bottom-left corner of the screen. The Start menu will pop up.

  2. Image titled 533547 2

    2

    Search for Notepad. Type in notepad to do so. You should see a list of matching results appear near the top of the Start menu.

    Advertisement

  3. Image titled 533547 3

    3

    Click Notepad. It’s a blue notepad icon at the top of the list of search results. Click this app to open a blank page in Notepad.

  4. Image titled 533547 4

    4

    Click File. This is in the top-left corner of the Notepad window. Clicking it prompts a drop-down menu.

  5. Image titled 533547 5

    5

    Click Save As…. It’s in the drop-down menu. The Save As window will open.

  6. Image titled 533547 6

    6

    Click the «Save as type» drop-down box. This option is near the bottom of the window and should have «Text documents (*.txt)» written on it. Clicking it prompts a drop-down menu to appear.

  7. Image titled 533547 7

    7

    Click All Files. It’s in the drop-down menu. This will allow you to save your file as an HTML document.

  8. Image titled 533547 8

    8

    Select a save location. Click the name of the folder in which you want to save your document on the left side of the window.

    • For example, to save your document on the desktop, you would scroll up and click Desktop in the left-hand sidebar.

  9. Image titled 533547 9

    9

    Enter a name and the «html» file extension. Click the «File name» text box. Then type in whatever you want to name your file, followed by .html, which is the file extension for an HTML document.

    • For example, to name your webpage’s file «hello», you would type in hello.html.

  10. Image titled 533547 10

    10

    Click Save. Doing so turns your current Notepad document into an HTML document. At this point, you can proceed with setting up your web page’s initial structure.

    • If Notepad inadvertently closes or you have to come back to your document later, you can right-click the HTML file and then click Edit in the resulting drop-down menu.

    11. Advertisement

  1. Image titled 533547 11

    1

    Add your webpage’s language tag. The first tag you’ll need to add is the language tag. This tells the web browser that this is an HTML document and that the language being used is HTML. Type the following into Notepad at the top of the page:

  2. Image titled 533547 12

    2

    Add the «head» tags. The «head» section of an HTML document contains the metadata for the web page. This information is not displayed in your web browser. It can contain information such as the page title, style sheets (CSS), scripts, and more. For now, just type <head> below the «<html>» tag, press Enter twice to leave a space. Then type in </head>.

    • Each HTML element has an opening and closing tag. When we add a new element, such as the «<head>» tag to open the head, we need to add a closing tag as well. For the head, this is the «</head>» tag.

  3. Image titled 533547 13

    3

    Add page title to your website. The title goes within the «head» section of your HTML document, so you will need to enter this in between the opening «<head>» tag, and closing «</head>» tag. To add a title, type the opening title tag, which is <title>". Then type your title text. Add the closing title tag immediately after, which is </title>. For example, if you wanted to title your web page, «My Website,» you’d enter the following: 

    <title>My Website</title>

  4. Image titled 533547 14

    4

    Add the «body» tags. Everything displayed in your web browser will go in the «body» section of your HTML document. The opening and closing body tags go below the closing «</head>» tag. Add the opening and closing body tags, as shown below:

  5. Image titled 533547 15

    5

    Close the HTML language tag. The last tag to go in your document will be a closing HTML tag to signify the end of the page. Type </html> at the bottom of the page below the closing «</body>» tag.

  6. Image titled 533547 16

    6

    Review your HTML document so far. At this point, your document should look something like the following: 

    <!DOCTYPE html>
<html>

<head>
<title>My Website</title>
</head>

<body>

</body>

</html>

  7. Image titled 533547 17

    7

    Save your document. To do so, click File in the menu bar at the top, followed by Save. Alternatively, you can press Ctrl + S to save your document. Be sure to save often.

    8. Advertisement

  1. Image titled 533547 18

    1

    Know that all of your webpage elements go between the «body» tags. Any element—be it a heading or a paragraph—needs to be written after the «<body>» tag and before the «</body>» tag.

  2. Image titled 533547 19

    2

    Add your website’s main heading. Type <h1></h1> in between the «body» tags, then type whatever you want your webpage’s main heading to be in between the «<h1></h1>» tags. For example, to create a page with the heading «Welcome», you would add the following:

    • You can use tags «<h2></h2>» through «<h6></h6>» to create smaller heading text. «<h1>» is the largest heading text, and «<h6>» is the smallest heading text.

  3. Image titled 533547 20

    3

    Add paragraph text to the page. Type in the paragraph tags, which are «<p></p>», and then enter whatever you want to use as your paragraph text in between the tags. Your end result should look something like this: 

    <p>This is my website. Vote for me for class president!</p>

  4. Image titled 533547 21

    4

    Force a paragraph break. If you want to add extra spaces between paragraphs or heading, type <br> after the line’s closing tag. For example, to create a line break after a paragraph, you should end up with something like this: 

    <p>This is my website. Vote for me for class president!</p><br>
<p>I also like potatoes.</p>
    • You can add an additional «<br>» tag after the first one to create additional line spaces in between your paragraphs..
    • You do not need to add a closing tag for line breaks.

  5. Image titled 533547 22

    5

    Add formatting to your text. You can apply bolding, italics, and underlining (as well as superscript and subscript) formatting to any word, sentence, or block of text as long as the text is between paragraph tags. The formatting tags you can use are as follows: 

    <b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<sup>Superscript Text</sup>
<sub>Subscript Text</sub>

  6. Image titled 533547 23 1

    6

    Add an image to your web page. To add an image to your web page, the image must be uploaded to a web server on the internet. You need to know the web address for the image. Once you have that, type <img src= followed by the web address for the image in quotation marks. Then add the closing > bracket at the end. The following is an example of what this should look like: 

    <img src="https://www.mywebsite.me/images/me.jpg">
    • If the image is not online, but is saved to your computer, you can use the location it is saved to instead of the web address. For example, <img src="C:UsersusernamePicturesme.jpg">

  7. Image titled 533547 24 1

    7

    Add a link to your web page. Links are a crucial aspect of web development. They allow users to navigate from one web page to another. To add a link, you need to have the web address for the web page you want to link to. Type <a href= followed by the web address to the page you want to link to in quotations. Then add the closing > bracket at the end. Then immediately after, type the text you want the link to say followed by the closing tag, which is </a>. The following is an example of how to add a link to your web page: 

    <a href="https://www.mywebsite.me/ipage2">Next Page</a>
    • You can also add a link to an email address, or use an image as a link, instead of text.

  8. Image titled 533547 25 1

    8

    Review your web page’s appearance. While the web page’s elements may vary, your document should look something like the following: 

    <!DOCTYPE html>
<html>

<head>
<title>My Website</title>
</head>

<body>
<h1>Welcome!</h1>
<a href="https://www.mywebsite.me/ipage2">Next Page</a>
<img src="https://www.mywebsite.me/images/me.jpg">
<p>This is my website. I hope you like it here!</p>
<p><b>Here is some bold text for emphasis.</b></p>
<p><i>Italics can be creepy.</i></p>

</body>
</html>

    9. Advertisement

  1. Image titled 533547 24

    1

    Save your document. To do so, click File in the menu bar at the top, followed by Save. This will ensure that the HTML document shows the most recent version of your web page when you open it.

  2. Image titled 533547 25

    2

    Right-click your HTML document. Navigate to where you saved your HTML document, and right-click it. A drop-down menu will appear.

  3. Image titled 533547 26

    3

    Select Open with. It’s in the drop-down menu. Doing so opens a pop-out menu with a list of apps you can open the file with.

  4. Image titled 533547 27

    4

    Select your preferred web browser. All web browsers can open HTML documents, so click any web browser you want to use in the pop-out menu. Your HTML document will open in your selected web browser.

  5. Image titled 533547 28

    5

    6. Advertisement

Sample HTML Documents

Add New Question

  • Question

    Do I have to use notepad to create web pages?

    Community Answer

    No. There are many other apps that can edit HTML documents. There are even some made for the purpose of creating HTML.

  • Question

    What is the age limit for hosting a website?

    Community Answer

    There isn’t an age limit for hosting a website. As long as you know how to create one, it will be fine.

  • Question

    What do you mean when you say «open the .html file…»?

    Community Answer

    Open the HTML file=open the file with the extension .html in Notepad for the code or in a browser for the output.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

  • Did you know wikiHow offers a variety of coupons and promo codes for a wide variety of computer equipment? Check out our coupon site for tons of money-saving deals.

Thanks for submitting a tip for review!

Advertisement

About This Article

Thanks to all authors for creating a page that has been read 1,427,077 times.

Is this article up to date?

Источник


Download Article

Easily create a web page with the software already installed on your computer


Download Article

  • Creating a Document

    • |

  • Adding Structural Code

    • |

  • Inserting Page Elements

    • |

  • Testing Your Page

    • |

  • Sample HTML Documents

    • |

  • Q&A

    • |

  • Tips

Do you want to learn web design? You don’t need fancy editing software to get started creating a web pages. You can create web pages using Notepad, which comes pre-installed on your Windows computer. The language used to create web pages is called «HTML,» which stands for Hypertext Markup Language. You can write HTML using Notepad or any other text editing program. Then all you need to do is save the file as an HTML document. HTML is easy to learn, even if you have no programming skills. This wikiHow article teaches you how to create a simple webpage using Notepad.

Things You Should Know

  • HTML is the primary language used in web design.
  • You can easily write HTML using Notepad or any other text editing program.
  • Don’t forget to save the file as an HTML (.html) document.

  1. Image titled 533547 1

    1

    Open Start

    Image titled Windowsstart.png

    . Click the Windows logo in the bottom-left corner of the screen. The Start menu will pop up.

  2. Image titled 533547 2

    2

    Search for Notepad. Type in notepad to do so. You should see a list of matching results appear near the top of the Start menu.

    Advertisement

  3. Image titled 533547 3

    3

    Click Notepad. It’s a blue notepad icon at the top of the list of search results. Click this app to open a blank page in Notepad.

  4. Image titled 533547 4

    4

    Click File. This is in the top-left corner of the Notepad window. Clicking it prompts a drop-down menu.

  5. Image titled 533547 5

    5

    Click Save As…. It’s in the drop-down menu. The Save As window will open.

  6. Image titled 533547 6

    6

    Click the «Save as type» drop-down box. This option is near the bottom of the window and should have «Text documents (*.txt)» written on it. Clicking it prompts a drop-down menu to appear.

  7. Image titled 533547 7

    7

    Click All Files. It’s in the drop-down menu. This will allow you to save your file as an HTML document.

  8. Image titled 533547 8

    8

    Select a save location. Click the name of the folder in which you want to save your document on the left side of the window.

    • For example, to save your document on the desktop, you would scroll up and click Desktop in the left-hand sidebar.

  9. Image titled 533547 9

    9

    Enter a name and the «html» file extension. Click the «File name» text box. Then type in whatever you want to name your file, followed by .html, which is the file extension for an HTML document.

    • For example, to name your webpage’s file «hello», you would type in hello.html.

  10. Image titled 533547 10

    10

    Click Save. Doing so turns your current Notepad document into an HTML document. At this point, you can proceed with setting up your web page’s initial structure.

    • If Notepad inadvertently closes or you have to come back to your document later, you can right-click the HTML file and then click Edit in the resulting drop-down menu.

    11. Advertisement

  1. Image titled 533547 11

    1

    Add your webpage’s language tag. The first tag you’ll need to add is the language tag. This tells the web browser that this is an HTML document and that the language being used is HTML. Type the following into Notepad at the top of the page:

  2. Image titled 533547 12

    2

    Add the «head» tags. The «head» section of an HTML document contains the metadata for the web page. This information is not displayed in your web browser. It can contain information such as the page title, style sheets (CSS), scripts, and more. For now, just type <head> below the «<html>» tag, press Enter twice to leave a space. Then type in </head>.

    • Each HTML element has an opening and closing tag. When we add a new element, such as the «<head>» tag to open the head, we need to add a closing tag as well. For the head, this is the «</head>» tag.

  3. Image titled 533547 13

    3

    Add page title to your website. The title goes within the «head» section of your HTML document, so you will need to enter this in between the opening «<head>» tag, and closing «</head>» tag. To add a title, type the opening title tag, which is <title>". Then type your title text. Add the closing title tag immediately after, which is </title>. For example, if you wanted to title your web page, «My Website,» you’d enter the following: 

    <title>My Website</title>

  4. Image titled 533547 14

    4

    Add the «body» tags. Everything displayed in your web browser will go in the «body» section of your HTML document. The opening and closing body tags go below the closing «</head>» tag. Add the opening and closing body tags, as shown below:

  5. Image titled 533547 15

    5

    Close the HTML language tag. The last tag to go in your document will be a closing HTML tag to signify the end of the page. Type </html> at the bottom of the page below the closing «</body>» tag.

  6. Image titled 533547 16

    6

    Review your HTML document so far. At this point, your document should look something like the following: 

    <!DOCTYPE html>
<html>

<head>
<title>My Website</title>
</head>

<body>

</body>

</html>

  7. Image titled 533547 17

    7

    Save your document. To do so, click File in the menu bar at the top, followed by Save. Alternatively, you can press Ctrl + S to save your document. Be sure to save often.

    8. Advertisement

  1. Image titled 533547 18

    1

    Know that all of your webpage elements go between the «body» tags. Any element—be it a heading or a paragraph—needs to be written after the «<body>» tag and before the «</body>» tag.

  2. Image titled 533547 19

    2

    Add your website’s main heading. Type <h1></h1> in between the «body» tags, then type whatever you want your webpage’s main heading to be in between the «<h1></h1>» tags. For example, to create a page with the heading «Welcome», you would add the following:

    • You can use tags «<h2></h2>» through «<h6></h6>» to create smaller heading text. «<h1>» is the largest heading text, and «<h6>» is the smallest heading text.

  3. Image titled 533547 20

    3

    Add paragraph text to the page. Type in the paragraph tags, which are «<p></p>», and then enter whatever you want to use as your paragraph text in between the tags. Your end result should look something like this: 

    <p>This is my website. Vote for me for class president!</p>

  4. Image titled 533547 21

    4

    Force a paragraph break. If you want to add extra spaces between paragraphs or heading, type <br> after the line’s closing tag. For example, to create a line break after a paragraph, you should end up with something like this: 

    <p>This is my website. Vote for me for class president!</p><br>
<p>I also like potatoes.</p>
    • You can add an additional «<br>» tag after the first one to create additional line spaces in between your paragraphs..
    • You do not need to add a closing tag for line breaks.

  5. Image titled 533547 22

    5

    Add formatting to your text. You can apply bolding, italics, and underlining (as well as superscript and subscript) formatting to any word, sentence, or block of text as long as the text is between paragraph tags. The formatting tags you can use are as follows: 

    <b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<sup>Superscript Text</sup>
<sub>Subscript Text</sub>

  6. Image titled 533547 23 1

    6

    Add an image to your web page. To add an image to your web page, the image must be uploaded to a web server on the internet. You need to know the web address for the image. Once you have that, type <img src= followed by the web address for the image in quotation marks. Then add the closing > bracket at the end. The following is an example of what this should look like: 

    <img src="https://www.mywebsite.me/images/me.jpg">
    • If the image is not online, but is saved to your computer, you can use the location it is saved to instead of the web address. For example, <img src="C:UsersusernamePicturesme.jpg">

  7. Image titled 533547 24 1

    7

    Add a link to your web page. Links are a crucial aspect of web development. They allow users to navigate from one web page to another. To add a link, you need to have the web address for the web page you want to link to. Type <a href= followed by the web address to the page you want to link to in quotations. Then add the closing > bracket at the end. Then immediately after, type the text you want the link to say followed by the closing tag, which is </a>. The following is an example of how to add a link to your web page: 

    <a href="https://www.mywebsite.me/ipage2">Next Page</a>
    • You can also add a link to an email address, or use an image as a link, instead of text.

  8. Image titled 533547 25 1

    8

    Review your web page’s appearance. While the web page’s elements may vary, your document should look something like the following: 

    <!DOCTYPE html>
<html>

<head>
<title>My Website</title>
</head>

<body>
<h1>Welcome!</h1>
<a href="https://www.mywebsite.me/ipage2">Next Page</a>
<img src="https://www.mywebsite.me/images/me.jpg">
<p>This is my website. I hope you like it here!</p>
<p><b>Here is some bold text for emphasis.</b></p>
<p><i>Italics can be creepy.</i></p>

</body>
</html>

    9. Advertisement

  1. Image titled 533547 24

    1

    Save your document. To do so, click File in the menu bar at the top, followed by Save. This will ensure that the HTML document shows the most recent version of your web page when you open it.

  2. Image titled 533547 25

    2

    Right-click your HTML document. Navigate to where you saved your HTML document, and right-click it. A drop-down menu will appear.

  3. Image titled 533547 26

    3

    Select Open with. It’s in the drop-down menu. Doing so opens a pop-out menu with a list of apps you can open the file with.

  4. Image titled 533547 27

    4

    Select your preferred web browser. All web browsers can open HTML documents, so click any web browser you want to use in the pop-out menu. Your HTML document will open in your selected web browser.

  5. Image titled 533547 28

    5

    6. Advertisement

Sample HTML Documents

Add New Question

  • Question

    Do I have to use notepad to create web pages?

    Community Answer

    No. There are many other apps that can edit HTML documents. There are even some made for the purpose of creating HTML.

  • Question

    What is the age limit for hosting a website?

    Community Answer

    There isn’t an age limit for hosting a website. As long as you know how to create one, it will be fine.

  • Question

    What do you mean when you say «open the .html file…»?

    Community Answer

    Open the HTML file=open the file with the extension .html in Notepad for the code or in a browser for the output.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

  • Did you know wikiHow offers a variety of coupons and promo codes for a wide variety of computer equipment? Check out our coupon site for tons of money-saving deals.

Thanks for submitting a tip for review!

Advertisement

About This Article

Thanks to all authors for creating a page that has been read 1,427,077 times.

Is this article up to date?

Источник

smsc banner 468x60smsc banner 728x90smsc banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

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

Что ж, давайте начнем с создания вашей первой HTML-страницы.

Давайте пройдемся по следующим шагам. В конце этого урока вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1: Создание файла HTML

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

Мы предлагаем вам использовать Блокнот (в Windows), TextEdit (в Mac) или другой простой текстовый редактор для этого; не используйте Word или WordPad! Как только вы поймете основные принципы, вы можете переключиться на более продвинутые инструменты, которые мы рассматривали в статье Как выбрать текстовый редактор.

Шаг 2. Введите код HTML

Начните с пустого окна и введите следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!<p>
</body>
</html>

Шаг 3: Сохранение файла

Теперь сохраните файл на рабочем столе как myfirstpage.html.

Важно, чтобы было указано расширение .html — некоторые текстовые редакторы, такие как блокнот автоматически сохранят его с расширением .txt.

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

Разберем подробнее код, который мы написали выше.

  • В первой строке <!DOCTYPE html> — это объявление типа документа. Строка сообщает веб-браузеру, что этот документ является документом HTML5.
  • Элемент <head> является контейнером для тегов, который предоставляет информацию о документе, например, тег <title> определяет заголовок документа.
  • Элемент <body> содержит фактическое содержимое документа (абзацы, ссылки, изображения, таблицы и т. д.), которое отображается в веб-браузере и отображается для пользователя.

Подробнее о различных HTML-элементах вы узнаете в следующих разделах. А пока просто сосредоточимся на базовой структуре HTML-документа.

Объявление DOCTYPE появляется вверху веб-страницы перед всеми другими элементами; однако само объявление doctype не является HTML-тегом. Каждый HTML-документ требует декларации типа документа, чтобы гарантировать, что ваши страницы отобразятся правильно.

Теги <html>, <head>, и <body> составляют основной каркас каждой веб-страницы. Содержимое внутри <head> и </head> невидимо для пользователей, за одним исключением: текст между тегами <title> и </title>, который отображается в виде заголовка на вкладке браузера.

HTML-теги и элементы

HTML-документ может и должен содержать HTML-элементы, которые называют теги или разметка. Эти теги разметки являются фундаментальной характеристикой HTML. Каждый тег разметки состоит из ключевого слова, заключенного в угловые скобки, например <html>, <head>, <body>, <title>, <p> и т.д.

Обычно HTML-теги идут парами, такими как <html> и </html>. Первый тег в паре часто называют открывающим тегом (или начальным тегом), а второй тег называется закрывающим тегом (или конечным тегом).

Открывающий тег и закрывающий тег идентичны, за исключением косой черты или обратного слеша (/) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда выполнена.

Между начальным и конечным тегами вы можете разместить соответствующее содержимое. Например, абзац, который представлен элементом p, будет записан как:

<p>Это абзац.</p>
<!-- Абзац с вложенным элементом -->
<p>
    Это <b>другой</b> абзац.
</p>

Вы узнаете о различных HTML-элементах в следующем разделе.

Похожие посты

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Источник
  • Обзор: Начало работы
  • Далее

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

Необходимые знания: Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель: Познакомиться с языком HTML и научиться описывать некоторые его элементы.

Что такое HTML?

HTML (HyperText Markup Language — язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

Мой кот очень сердитый

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» (<p>), например:

<p>Мой кот очень сердитый</p>

Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег <title> может быть записан как <title>, <TITLE>, <Title>, <TiTlE>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.

Структура HTML-элементов

Давайте рассмотрим элемент «параграф» чуть подробнее:

Основными частями элемента являются:

  1. Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
  2. Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
  3. Содержимое: Как видно, в нашем случае содержимым является простой текст.
  4. Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML-элемента

Отредактируйте строку текста ниже в поле Ввод, обернув её тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

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

<h2>Результат</h2>
<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
  Это мой текст.
</textarea>

<div class="controls">
  <input id="reset" type="button" value="Сбросить" />
  <input id="solution" type="button" value="Показать решение" />
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<em>Это мой текст.</em>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Вложенные элементы

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент <strong> , который означает, что это слово крайне важно в данном контексте:

<p>Мой кот <strong>очень</strong>  сердитый.</p>

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong, затем мы закрываем элемент strong первым, затем p. Следующее писать неправильно:

<p>Мой кот <strong>очень сердитый.</p></strong>

Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!

Блочные и строчные элементы

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

  • Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
  • Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент <a> (ссылка) или акцентирующие элементы вроде <em> или <strong>.

Посмотрите на следующий пример:

<em>Первый</em><em>второй</em><em>третий</em>

<p>четвёртый</p><p>пятый</p><p>шестой</p>

<em> — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, <p> — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).

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

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Пустые элементы

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

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементами.

Атрибуты

У элементов также могут быть атрибуты, которые выглядят так:

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

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

Атрибут должен иметь:

  1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
  2. Имя атрибута и следующий за ним знак равенства.
  3. Значение атрибута, заключённое в кавычки.

Активное изучение: Добавление атрибутов в элемент

Возьмём для примера элемент <a> — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:

href

В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href="https://www.mozilla.org/".

title

Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title="The Mozilla homepage". Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.

target

Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <a> затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

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

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
  &lt;p&gt;Ссылка на мой любимый веб-сайт.&lt;/p&gt;
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<p>Ссылка на мой <a href="https://www.mozilla.org/" title="Домашняя страница Mozilla" target="_blank">любимый веб-сайт</a>.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Булевые атрибуты

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут disabled, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

<input type="text" disabled="disabled">

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

<input type="text" disabled>

<input type="text">

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:

<a href=https://www.mozilla.org/>любимый веб-сайт</a>

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.

Одинарные или двойные кавычки?

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

<a href="http://www.example.com">Ссылка к моему примеру.</a>

<a href='http://www.example.com'>Ссылка к моему примеру.</a>

Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

<a href="http://www.example.com'>Ссылка к моему примеру.</a>

Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>

Поэтому вам нужно сделать так:

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>

Структура HTML документа

Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

Вот что мы имеем:

  1. <!DOCTYPE html>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .

  2. <html></html>: Элемент <html> содержит в себе всё содержимое на всей странице, и иногда его называют «корневой элемент».
  3. <head></head>: Элемент <head>. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
  4. <meta charset="utf-8">: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
  5. <title></title>: Элемент <title>. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
  6. <body></body>: Элемент <body>. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

Активное изучение: Добавление элементов в ваш HTML-документ

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

  1. Скопировать пример HTML-страницы, расположенный выше.
  2. Создать новый файл в текстовом редакторе.
  3. Вставить код в ваш новый текстовый файл.
  4. Сохранить файл как index.html.

Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:

Скриншот примера тестовой страницы
Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента <body>. Попробуйте сделать следующее:

  • Добавьте заголовок страницы сразу за открывающим тегом <body>. Текст должен находиться между открывающим тегом <h1> и закрывающим </h1> .
  • Напишите в параграфе о чём-нибудь, что кажется вам интересным.
  • Выделите важные слова, обернув их в открывающий тег <strong> и закрывающий </strong>
  • Добавьте ссылку на свой абзац так, как объяснено ранее в статье.
  • Добавьте изображение в свой документ под абзацем, как объяснено ранее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!

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

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
  &lt;p&gt;Это — моя страница&lt;/p&gt;
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<p>Мне очень нравится <strong>играть на барабанах</strong>. Мой любимый барабанщик — Нил Пирт, который играет в группе <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">"Rush"</a>. Мой любимый альбом Rush — <a href="http://www.deezer.com/album/942295">"Moving Pictures"</a>.</p> <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Пробелы в HTML

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

<p>Собаки глупы.</p>

<p>Собаки
         глупы.</p>

Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

Ссылки на сущности: Включение специальных символов в HTML

В HTML символы <, >, ", ' и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).

Буквенный символ Символьный эквивалент
< &lt;
> &gt;
« &quot;
‘ &apos;
& &amp;

В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:

<p>В HTML вы определяете параграф элементом <p>.</p>

<p>В HTML вы определяете параграф элементом &lt;p&gt;.</p>

В живом выводе ниже вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент <p> является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.

HTML комментарии

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

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <!-- и -->, например:

<p> Меня нет в комментариях( </p>

<!-- <p>А теперь есть!</p> -->

Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.

Подведение итогов

Вы дошли до конца статьи — надеемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.

Смотрите также

В этом модуле

Источник

Like this post? Please share to your friends:
  • Как создавать разделы на жестком диске при установке windows
  • Как создать gpt диск при установке windows 10 с флешки
  • Как создавать презентации на компьютере windows 10
  • Как создать gpedit msc в windows 10
  • Как создавать папку на компьютере windows