Как создать простую веб страницу с помощью HTML

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

Часть 1

Часть 1 из 6:

Как добавить тег «head» (описание веб-страницы)

Загрузить PDF

1
Откройте текстовый редактор. В Windows запустите Блокнот или Notepad++, а в macOS — TextEdit:
- Windows — откройте меню «Пуск»
  , в строке поиска введите блокнот или notepad++, а затем щелкните по «Блокнот» или «Notepad++» вверху меню «Пуск».
- macOS — щелкните по «Spotlight»
  , введите textedit, а затем дважды щелкните по «TextEdit» вверху результатов поиска.
Так вы сообщите веб-браузеру, что это документ HTML.
Это открывающий тег HTML-кода.
Этот тег содержит описание веб-страницы и заголовочные элементы. Контент этого тега на странице, как правило, не отображается. Контентом являются описание страницы, метаданные, таблицы стилей CSS и другие языки сценариев.^{[1]XИсточник информации}
Этот тег содержит имя страницы.
Введите текст, который будет отображаться на вкладке страницы.
Этот тег закрывает тег имени страницы.
8
Введите </head> и нажмите ↵ Enter. Этот тег закрывает тег описания страницы. На данном этапе HTML-код должен выглядеть примерно так.
```
<!DOCTYPE html><html><head><title>Моя веб-страница</title></head>
```
Реклама

Часть 2

Часть 2 из 6:

Как добавить тег «body» (весь контент)

Загрузить PDF

Этот тег содержит весь контент HTML-документа. Контент этого тега отображается на веб-странице.
Этот тег содержит заголовок страницы. Заголовок — это текст большого размера, который, как правило, расположен вверху страницы.
Это может быть название страницы или приветствие.
4
Введите </h1> после текста заголовка и нажмите ↵ Enter. Этот тег закрывает тег заголовка.
- Добавьте дополнительные заголовки по мере необходимости. Можно создать до шести заголовков; это делается с помощью тегов <h1></h1> - <h6></h6>. Заголовки будут иметь разные размеры. Например, код для создания трех заголовков разного размера будет таким:
  <h1>Добро пожаловать на мою страницу!</h1><h2>Меня зовут Макс.</h2><h3>Надеюсь, вам не будет скучно.</h3>
Этот тег содержит абзац текста. Такой тег отобразит текст нормального размера.
Например, введите описание веб-страницы или любую другую информацию.
7
Введите </p> после текста и нажмите ↵ Enter. Этот тег закрывает тег абзаца текста. Ниже приведен пример абзаца в HTML-документе:
```
<p>Это первый абзац.</p>
```
- Чтобы создать несколько абзацев под одним заголовком, добавьте подряд несколько строк.
- Измените цвет текста. В начале текста введите тег <font color = "цвет">, а в конце тег </font>. Вместо слова "цвет" подставьте нужный цвет (на английском языке), причем кавычки не удаляйте. Эти теги позволят изменить цвет любого текста (например, заголовка). К примеру, чтобы сделать текст синим, введите следующий код: <p><font color = "blue"> Киты — величественные животные.</font></p>
- Также шрифт можно сделать полужирным, наклонным и другим. Ниже приведены примеры форматирования текста с помощью HTML-тегов:^{[2]XИсточник информации}
  <b> Полужирный текст </b><i> Наклонный текст </i><u> Подчеркнутый текст </u><sub> Подстрочный текст </sub><sup> Надстрочный текст </sup>
Реклама

Часть 3

Часть 3 из 6:

Как добавить дополнительные элементы

Загрузить PDF

1
Добавьте картинку на страницу. Для этого:
- Введите <img src=. Этот тег содержит картинку.
- Скопируйте и вставьте URL-адрес картинки после знака равенства (=) в кавычках.
- Введите > после URL-адреса изображения, чтобы закрыть тег картинки. К примеру, если URL-адрес изображения http://www.myimage.com/ocean.jpg, введите следующий код:
  <img src="http://www.myimage.com/ocean.jpg">
2
Добавьте ссылку на другую веб-страницу. Для этого:
- Введите <a href=. Этот тег содержит ссылку на другую страницу.
- Скопируйте и вставьте URL-адрес после знака равенства (=) в кавычках.
- Введите > после URL-адреса, чтобы закрыть адрес.
- Введите текст ссылки после символа «>».
- Введите </a> после текста ссылки, чтобы закрыть тег ссылки.^{[3]XИсточник информации} Ниже приведен пример ссылки на Яндекс.
  <a href="https://www.ya.ru">Яндекс</a>.
Для этого введите <br>. Будет вставлен перенос строки. Этим тегом можно пользоваться, чтобы отделить друг от друга различные разделы страницы.
Реклама

Часть 4

Часть 4 из 6:

Как изменить цвета

Загрузить PDF

Консорциум Всемирной паутины (W3C) ведет официальный список цветов, который можно найти по адресу https://www.w3.org/wiki/CSS/Properties/color/keywords. У каждого цвета есть официальное название, 6-значный шестнадцатиричный код и десятичное значение. Вы можете использовать любой из этих параметров, чтобы задать цвет элементов на своей странице. В этом примере мы возьмем официальные названия цветов.
2
Задайте цвет фона с помощью тега <body>. Для этого к тегу нужно добавить атрибут style. Допустим, вы хотите сделать фон всей страницы lavender (лавандовым):
- <body style="background-color:lavender;">
3
Задайте цвет текста для любого тега. Атрибут style также можно использовать для указания, какого цвета будет весь текст в пределах определенного тега. Например, вы хотите, чтобы текст в пределах одного из ваших тегов <p> был midnightblue (темно-синим):
- <p style="color:midnightblue;">
- Изменение цвета коснется только текста в пределах данного тега <p>. Если позднее вы откроете новый тег <p>, где текст также должен иметь цвет midnightblue, атрибут «style» нужно будет задать и для него.
4
Задайте цвет фона для заголовка или абзаца. Подобно тому, как вы задаете цвет фона для тега «body», вы можете выбрать цвета фона для других тегов. Например, вы хотите, чтобы цвет фона <p> был lightgrey (светло-серым), а цвет фона заголовка стиля H1 — lightskyblue (светло-голубым):
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">
Реклама

Часть 5

Часть 5 из 6:

Как закрыть HTML-код

Загрузить PDF

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

How.com.vn Русский: Step 2 Введите </html>, чтобы закрыть HTML-код.

Введите этот тег под закрывающим тегом «body». Так вы сообщите веб-браузеру, что после этого тега HTML-кода нет. Весь HTML-код должен быть примерно таким:

<!DOCTYPE html><html><head><title>Фан-страница Яндекса</title></head><body><h1>Приветствую вас на моей странице</h1><p>Это фан-страница Яндекса</p><h2>Важные даты</h2><p><i>1 января 2000</i> - День рождения Яндекса</p><h2>Ссылки</h2><p>Ссылка на Яндекс: <a href="http://www.ya.ru">Яндекс</a></p></body></html>

Часть 6

Часть 6 из 6:

Как сохранить и открыть веб-страницу

Загрузить PDF

Преобразуйте документ в обычный текст (только для пользователей macOS). Нажмите «Формат» (вверху экрана) > «Создать простой текст» (в выпадающем меню).
Это нельзя и не нужно делать в Windows.
Эта опция находится в строке меню вверху экрана.
3
Щелкните по Сохранить как. Вы найдете эту опцию в меню «Файл».
- Также можно нажать Ctrl+S (Windows) или ⌘ Command+S (Mac).
Введите его в строке «Имя файла» (Windows) или «Имя» (Mac).
5
Измените формат файла с TXT на HTML. Для этого:
- Windows — щелкните по меню «Тип файла», выберите «Все файлы», а затем введите .html в конце имени файла.
- macOS — в конце имени файла вместо .txt введите .html.
6
Щелкните по Сохранить. Эта опция находится внизу окна. Будет создан HTML-файл.
- Обычно HTML-файлы открываются в веб-браузере по умолчанию.
Теперь откройте HTML-файл в браузере, в котором можно просмотреть созданную веб-страницу.
8
Откройте HTML-файл в браузере. Для этого дважды щелкните по HTML-файлу. Если открылось уведомление об ошибке, сделайте следующее:
- Windows — щелкните по файлу правой кнопкой мыши, выберите «Открыть с помощью», а затем нажмите на нужный браузер.
- macOS — нажмите на файл, щелкните по «Файл», в меню выберите «Открыть с помощью», а затем выберите нужный браузер.
9
Отредактируйте HTML-документ (если потребуется). Возможно, вы заметили ошибку на странице. Чтобы исправить ее, внесите изменения в содержимое HTML-файла:
- В Windows щелкните по файлу правой кнопкой мыши и выберите «Редактировать» (если на компьютере установлен Notepad++, выберите опцию «Редактировать в Notepad++»).
- В macOS щелкните по файлу, нажмите «Файл», выберите «Открыть с помощью» и нажмите «TextEdit». Теперь перетащите HTML-файл в окно TextEdit.
Реклама

Советы

На страницу можно добавить боковую полосу прокрутки текста с помощью тега <marquee></marquee>. Но помните, что некоторые браузеры не распознают этот тег.
Многие люди используют Notepad++, чтобы писать и компилировать код.
Каждый тег нужно закрыть. Например, теги <tag1><tag2> следует закрыть так: </tag2></tag1>.
Чтобы отцентрировать картинку на странице, введите <class="center"> после имени картинки в теге «img» (к примеру, <img src="URL" class="center">).

Предупреждения

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