Как создать веб-страницу с нуля основы HTML

Программирование и разработка

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

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

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

В процессе создания веб-страниц важно учитывать не только технические аспекты, но и практические рекомендации. К примеру, при использовании списков <ul> и <ol>, следует позаботиться о логичности и последовательности пунктов, что улучшает восприятие контента. Атрибуты таких элементов, как value и selected, могут быть полезны для указания конкретных значений и состояний, что особенно актуально для интерактивных элементов, таких как формы и выпадающие списки.

Не забывайте и о внешнем виде страницы. Цвета, шрифты и размещение элементов играют ключевую роль в создании привлекательного интерфейса. Использование универсальных подходов к оформлению и применение современных практик позволяет создать гармоничный и удобный для пользователей сайт. В этом разделе мы рассмотрим базовые принципы и техники, которые помогут вам достичь успеха в создании веб-страниц.

Содержание
  1. Основы HTML: Создание веб-страницы
  2. Что такое HTML и зачем он нужен?
  3. Основные теги и их назначение
  4. <head>
  5. <title>
  6. <p>
  7. <ul> и <ol>
  8. <a>
  9. <div>
  10. <span>
  11. <form>
  12. <select> и <option>
  13. Как работает структура HTML-документа
  14. Тег <option>: Оформление содержимого
  15. Добавление текста и изображений
  16. Текстовые элементы
  17. Добавление изображений
  18. Пример использования текста и изображений
  19. Работа с гиперссылками и списками
  20. Гиперссылки
  21. Списки
  22. Комбинирование гиперссылок и списков
  23. Заключение
  24. Создание таблиц и форм
  25. Создание таблиц
  26. Создание форм
  27. Вопрос-ответ:
  28. Какие основные компоненты нужно знать для создания веб-страницы с использованием HTML?
  29. Какой текстовый редактор лучше использовать для написания HTML-кода?
  30. Какие основные шаги следует выполнить после написания HTML-кода в создании веб-страницы?
  31. Какие типичные ошибки часто допускают новички при создании своей первой веб-страницы в HTML?
Читайте также:  Вторая часть изучения программирования метаклассов на Python - углубленные методики и иллюстрации

Основы HTML: Создание веб-страницы

Начнем с базовой структуры html-документа. Основой любой веб-страницы является тег <html>, который содержит в себе все остальные элементы. Внутри этого тега расположены две главные секции: <head> и <body>. Первая секция, <head>, содержит метаинформацию о документе, такую как заголовок страницы, подключаемые стили и скрипты. Вторая секция, <body>, включает весь видимый контент страницы.

Для группировки и организации контента используются различные контейнеры. Например, <div> и <span> являются универсальными контейнерами, которые помогают структурировать элементы на веб-странице. <div> обычно используется для блочной группировки, а <span> – для строчной.

Чтобы улучшению визуального восприятия контента, можно использовать атрибуты и стили. Атрибут style позволяет установить такие параметры, как цвет текста, размер шрифта и многое другое. Например, чтобы изменить цвет текста внутри <p>, можно добавить атрибут style=»color:blue;».

Теперь рассмотрим, как можно создать список. В HTML доступны упорядоченные (нумерованные) списки с помощью тега <ol> и неупорядоченные (маркированные) списки с помощью тега <ul>. Каждый элемент списка указывается с помощью тега <li>. Например:


<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>

Для создания форм, которые позволяют взаимодействовать с пользователем, используются теги <form>, <input>, <textarea> и другие. Например, чтобы создать простую форму с полем для ввода текста и кнопкой отправки, можно использовать следующий код:


<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<button type="submit">Отправить</button>
</form>

На практике, создание и стилизация веб-страниц часто требует использования дополнительных технологий, таких как CSS и JavaScript. CSS (каскадные таблицы стилей) отвечает за внешний вид и расположение элементов, а JavaScript позволяет добавить интерактивность. Следует также учитывать современные стандарты и рекомендации по доступности контента для всех пользователей.

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

Что такое HTML и зачем он нужен?

Что такое HTML и зачем он нужен?

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

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

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

Текстовая строка в HTML может быть оформлена с помощью различных тегов. Например, можно использовать теги <p> для абзацев, <ul> для маркированных списков и <li> для пунктов в списке. Эти теги помогают улучшению восприятия текста и связанные с ним информации. Важно отметить, что структура HTML-документа начинается с тега <head>, который содержит метаданные и заголовки документа.

Одним из ключевых аспектов HTML является его универсальность и живость (living standard). Благодаря регулярным обновлениям и расширениям, HTML адаптируется под новые требования и технологии, что позволяет создавать более интерактивные и функциональные веб-страницы. Например, с помощью HTML можно внедрять скрипты, управлять мультимедийными элементами и обеспечивать доступность контента для пользователей с различными потребностями.

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

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

Основные теги и их назначение

Тег <head> является контейнером для метаданных html-документа. В этой секции размещаются теги <title>, <meta>, <link>, <style>, а также <script>. Тег <head> не отображается на странице, но содержит важную информацию для браузера и поисковых систем.

<title>

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

<p>

Тег <p> используется для создания текстовых абзацев. Это один из наиболее часто используемых тегов для структурирования контента. Текст внутри <p> отображается с отступами сверху и снизу, что помогает лучше организовать информацию.

<ul> и <ol>

Теги <ul> и <ol> используются для создания списков. Тег <ul> создает маркированный список, а <ol> — нумерованный. Каждый пункт в списке берётся в тег <li>. Списки помогают структурировать информацию и делают её более доступной для восприятия.

<a>

Тег <a> устанавливает гиперссылки на другие страницы или ресурсы. Основным атрибутом этого тега является href, который указывает адрес ссылки. С помощью этого тега можно легко создавать навигацию по сайту или связывать внешние ресурсы.

<div>

Тег <div> используется для группировки блоков контента и создания структурных секций на веб-странице. Это универсальный контейнер, который часто применяется для макетирования и стилизации различных элементов веб-страницы.

<span>

Тег <span> предназначен для группировки строковых элементов внутри абзацев. В отличие от <div>, который является блочным элементом, <span> — строчный элемент. Он часто используется для стилизации отдельных частей текста без нарушения его структуры.

<form>

Тег <form> создает форму для ввода данных пользователем. Внутри этого тега располагаются различные элементы формы, такие как <input>, <textarea>, <button>, и <select>. Формы используются для отправки данных на сервер для дальнейшей обработки.

<select> и <option>

Теги <select> и <option> создают выпадающий список. Тег <select> определяет сам список, а каждый <option> — отдельный пункт в списке. Атрибут selected указывает, какая опция выбрана по умолчанию, а value передает значение, связанное с этим пунктом.

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

Как работает структура HTML-документа

HTML-документ начинается с декларации <!DOCTYPE html>, которая указывает браузеру на использование стандарта HTML. Затем следует основной контейнер <html>, в котором размещаются все элементы веб-страницы. Этот тег содержит две важные секции: <head> и <body>.

Секция <head> предназначена для метаинформации и служебных данных. Здесь можно указать <title> страницы, метатеги, скрипты, стили и другую информацию, необходимую для корректной работы и отображения страницы. Например, тег <meta name="description" content="Описание страницы"> содержит краткое описание страницы, которое может быть использовано поисковыми системами.

Основной контент веб-страницы размещается в секции <body>. Здесь используются различные теги для группировки и форматирования текста, изображений, ссылок, списков и других элементов. Например, список можно создать с помощью тегов <ul> для ненумерованного списка и <ol> для нумерованного списка. Внутри них каждый элемент списка обозначается тегом <li>. Также используются теги для выделения важного текста, такие как <strong> и <em>, которые устанавливают значение текста полужирным и курсивом соответственно.

Для улучшения восприятия контента на веб-странице используются атрибуты. Например, атрибут style позволяет задать определённый стиль элементу, такой как цвет текста или фона. Атрибут class помогает группировать элементы для применения к ним одинаковых стилей. Также стоит отметить атрибут id, который задаёт уникальный идентификатор элемента, что особенно полезно при использовании скриптов.

Необходимо упомянуть о концепции Living Standard, которая обозначает, что HTML продолжает развиваться и обновляться. Веб-разработчики могут использовать самые актуальные элементы и атрибуты для создания современных веб-страниц. Важно следить за обновлениями и корректно использовать отклонённые или устаревшие теги, чтобы избежать проблем с отображением контента в будущем.

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

Тег <option>: Оформление содержимого

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

Тег <option> часто применяется для группировки связанных элементов в списке. Например, в выпадающем списке городов могут быть указаны такие города, как Санкт-Петербург и Казань. При этом можно использовать атрибут value, который устанавливает значение, передаваемое при выборе конкретного пункта.

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

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

Тег <option> также поддерживает атрибут label, который задаёт текстовую метку для пункта списка. Эта метка может отличаться от значения атрибута value и служит для более понятного представления пользователю. Например, можно задать метку «Казань» и значение «kazan», которое будет передано при выборе этого пункта.

Для улучшения восприятия и оформления содержимого, можно использовать атрибут style, который задаёт стили для конкретного пункта списка. Например, можно указать цвет текста, фоновый цвет и другие параметры оформления. В практике веб-разработки часто берётся на вооружение указание цвета текста серым цветом для заблокированных опций.

Таким образом, тег <option> предоставляет универсальные возможности для оформления и настройки выпадающих списков на веб-страницах. Благодаря гибкости и разнообразию атрибутов, вы можете создавать удобные и интуитивно понятные интерфейсы для пользователей, что способствует улучшению их взаимодействия с вашим веб-приложением.

Добавление текста и изображений

Текстовые элементы

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

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

  • <p> — абзац текста. Используется для группировки текстового контента в логически завершенные блоки.
  • <h1> - <h6> — заголовки различных уровней. Они помогают разбивать текст на секции и подразделы.
  • <strong> и <em> — теги для выделения текста. <strong> делает текст жирным, а <em> — курсивом.
  • <ul> и <ol> — списки. Первый создает ненумерованный список, второй — нумерованный. Пункты списка указываются тегом <li>.

Добавление изображений

Изображения играют важную роль в визуализации контента на веб-страницах. Для их добавления используется тег <img>, который позволяет вставлять картинки в нужные места текста.

Основные атрибуты тега <img>:

  • src — указывает путь к изображению. Может быть относительным или абсолютным.
  • alt — текстовое описание изображения. Этот атрибут является обязательным для улучшения доступности.
  • width и height — устанавливают размеры изображения. Эти атрибуты могут быть заданы в пикселях или процентах.

Пример использования текста и изображений

Пример использования текста и изображений

Ниже приведен пример того, как можно сочетать текст и изображения в html-документе:

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

Пример изображения

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

Работа с гиперссылками и списками

Гиперссылки

Гиперссылки позволяют связать различные части вашего сайта или даже внешние ресурсы, что существенно улучшает навигацию. Чтобы создать гиперссылку, используется тег <a> (anchor), который содержит атрибут href, указывающий адрес ссылки. Например:

<a href="https://example.com">Посетите наш сайт</a>

Здесь текстовая строка «Посетите наш сайт» будет ссылкой, и при клике на неё браузер перенаправит пользователя по указанному адресу. Также можно использовать атрибуты для открытия ссылки в новом окне (target=»_blank») или добавления подсказки при наведении (title).

Списки

Списки помогают структурировать информацию в виде пунктов, что делает её восприятие более удобным. В HTML доступны два типа списков: упорядоченные (ordered) и неупорядоченные (unordered). Упорядоченные списки создаются с помощью тега <ol>, а неупорядоченные — с помощью <ul>. Пункты списка берутся в тег <li> (list item).

Пример упорядоченного списка:

<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>

Пример неупорядоченного списка:

<ul>
<li>Пункт один</li>
<li>Пункт два</li>
<li>Пункт три</li>
</ul>

Комбинирование гиперссылок и списков

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

<ul>
<li><a href="https://spb.ru">Санкт-Петербург</a></li>
<li><a href="https://kazan.ru">Казань</a></li>
<li><a href="https://example.com">Пример сайта</a></li>
</ul>

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

Заключение

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

Создание таблиц и форм

Создание таблиц и форм

Создание таблиц

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

Пример таблицы
Название Описание Цена
Продукт 1 Описание продукта 1 100 руб.
Продукт 2 Описание продукта 2 200 руб.

Каждая строка таблицы обозначается с помощью тега <tr>, а ячейки внутри строки — тегами <td> для данных и <th> для заголовков. Использование атрибута border позволяет задать границы для таблицы.

Создание форм

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

Тег <form> используется для создания формы. Внутри него размещаются различные элементы формы, такие как <input> для текстовых полей и <select> для выпадающих списков. Атрибут action указывает URL, куда будут отправлены данные формы, а атрибут method определяет метод отправки данных (GET или POST).

Формы могут содержать элементы для группировки и управления контентом, такие как <fieldset> и <legend>. Например, элемент <fieldset> группирует связанные элементы формы, а <legend> предоставляет заголовок для группы.

Ниже приведен пример формы с группировкой:

Личная информация

Элементы <fieldset> и <legend> помогают организовать форму и улучшить её восприятие. Это особенно важно при создании сложных форм, содержащих множество полей ввода.

Создание таблиц и форм в html-документе позволяет организовать данные и обеспечить интерактивность веб-страниц. Эти элементы являются универсальными инструментами, которые можно использовать для различных целей, таких как сбор данных, представление информации и улучшение взаимодействия с пользователями.

Вопрос-ответ:

Какие основные компоненты нужно знать для создания веб-страницы с использованием HTML?

Для создания веб-страницы с нуля в HTML необходимо знать основные теги: , , , <body>, а также как использовать теги для структурирования контента, вставки изображений, ссылок и форматирования текста.</p> <h4 id="kakoy-tekstovyy-redaktor-luchshe-ispolzovat">Какой текстовый редактор лучше использовать для написания HTML-кода?</h4> <p>Для написания HTML-кода можно использовать различные текстовые редакторы, такие как Sublime Text, Visual Studio Code, Atom и другие. Важно выбирать редактор с поддержкой подсветки синтаксиса HTML для удобства разработки.</p> <h4 id="kakie-osnovnye-shagi-sleduet-vypolnit-posle">Какие основные шаги следует выполнить после написания HTML-кода в создании веб-страницы?</h4> <p>После написания HTML-кода необходимо сохранить файл с расширением .html, открыть его в веб-браузере для проверки верного отображения структуры и контента. Далее можно приступать к стилизации страницы с помощью CSS и добавлению интерактивности с использованием JavaScript.</p> <h4 id="kakie-tipichnye-oshibki-chasto-dopuskayut">Какие типичные ошибки часто допускают новички при создании своей первой веб-страницы в HTML?</h4> <p>Одной из распространенных ошибок является неправильное закрытие тегов или неверный порядок вложенных элементов. Также новички часто забывают указать обязательные атрибуты у тегов, например, атрибут src у тега <img> или href у тега <a>. Рекомендуется внимательно следить за структурой HTML-кода и использовать проверяющие инструменты для выявления ошибок.</p> <div class="fpm_end"></div><div class="b-r b-r--after_content"><div id="marketWidget4"></div></div> </div><!-- .entry-content --> </article> <div class="rating-box"> <div class="rating-box__header">Оцените статью</div> <div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="28830" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div> </div> <div class="entry-social"> <div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image="https://bestprogrammer.ru/wp-content/uploads/2024/06/kak-sozdat-veb-stranitsu-s-nulya-osnovy-html_28830-150x150.jpg"></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span><span class="social-button social-button--skype" data-social="skype"></span><span class="social-button social-button--viber" data-social="viber"></span></div> </div> <meta itemprop="author" content="prostolexa9"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://bestprogrammer.ru/programmirovanie-i-razrabotka/osnovi-html-kak-sozdat-veb-stranitsu-s-nulya-3" content="Как создать веб-страницу с нуля основы HTML"> <meta itemprop="dateModified" content="2024-07-26"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url image" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/07/luchshiy-programmist.jpg" alt="bestprogrammer.ru" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" style="--smush-placeholder-width: 221px; --smush-placeholder-aspect-ratio: 221/55;"></div><meta itemprop="name" content="bestprogrammer.ru"><meta itemprop="telephone" content="bestprogrammer.ru"><meta itemprop="address" content="https://bestprogrammer.ru"></div> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <div id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/programmirovanie-i-razrabotka/osnovi-html-kak-sozdat-veb-stranitsu-s-nulya-3#respond" style="display:none;">Отменить ответ</a></small></div><form action="https://bestprogrammer.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-form-author"><label class="screen-reader-text" for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' placeholder="Имя"/></p> <p class="comment-form-email"><label class="screen-reader-text" for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" required='required' placeholder="Email"/></p> <p class="comment-form-comment"><label class="screen-reader-text" for="comment">Комментарий</label> <textarea autocomplete="new-password" id="h53ff4c62f" name="h53ff4c62f" cols="45" rows="8" maxlength="65525" required="required" placeholder="Комментарий" ></textarea><textarea id="comment" aria-label="hp-comment" aria-hidden="true" name="comment" autocomplete="new-password" style="padding:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;position:absolute !important;white-space:nowrap !important;height:1px !important;width:1px !important;overflow:hidden !important;" tabindex="-1"></textarea><script data-noptimize>document.getElementById("comment").setAttribute( "id", "abbbc457c29d6f82299ce292ca7f060b" );document.getElementById("h53ff4c62f").setAttribute( "id", "comment" );</script></p><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"/> <label for="wp-comment-cookies-consent">Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий"/> <input type='hidden' name='comment_post_ID' value='28830' id='comment_post_ID'/> <input type='hidden' name='comment_parent' id='comment_parent' value='0'/> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div class="sticky-sidebar js-sticky-sidebar"> <div id="block-21" class="widget widget_block"><div id="marketWidget5"></div></div><div id="wpshop_widget_articles-6" class="widget widget_wpshop_widget_articles"><div class="widget-header">Свежие публикации</div><div class="widget-articles"> <article class="post-card post-card--vertical"> <div class="post-card__thumbnail"> <a href="https://bestprogrammer.ru/bez-rubriki/manipulyatsiya-elementami-v-jquery-polnoe-rukovodstvo-s-primerami-koda"> <img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2025/02/rukovodstvo-po-rabote-s-elementami-v-jquery-s-primerami-koda_31642-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /> <span class="post-card__category">Без рубрики</span> </a> </div> <div class="post-card__body"> <div class="post-card__title"><a href="https://bestprogrammer.ru/bez-rubriki/manipulyatsiya-elementami-v-jquery-polnoe-rukovodstvo-s-primerami-koda">Руководство по работе с элементами в jQuery с примерами кода</a></div> <div class="post-card__description"> В этом разделе мы рассмотрим важные аспекты работы </div> <div class="post-card__meta"> <span class="post-card__comments">0</span> </div> </div> </article> <article class="post-card post-card--vertical"> <div class="post-card__thumbnail"> <a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/top-10-luchshix-telegram-kanalov-po-razrabotke-na-python-v-2024-godu"> <img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/luchshie-telegram-kanaly-po-razrabotke-na-python-v-2024-godu-obzor-luchshih-istochnikov-znaniy_26187-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /> <span class="post-card__category">Программирование и разработка</span> </a> </div> <div class="post-card__body"> <div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/top-10-luchshix-telegram-kanalov-po-razrabotke-na-python-v-2024-godu">Лучшие Telegram-каналы по разработке на Python в 2024 году — обзор лучших источников знаний</a></div> <div class="post-card__description"> В современном мире каждый разработчик Python стремится </div> <div class="post-card__meta"> <span class="post-card__comments">0</span> </div> </div> </article></div></div><div id="wpshop_widget_articles-7" class="widget widget_wpshop_widget_articles"><div class="widget-header">Популярные публикации</div><div class="widget-articles"> <article class="post-card post-card--vertical"> <div class="post-card__thumbnail"> <a href="https://bestprogrammer.ru/baza-dannyh/kak-proverit-privilegii-privileges-postgres-dlya-polzovatelya"> <img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/05/proverka-privilegiy-polzovatelya-v-postgres_15398-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /> <span class="post-card__category">База данных</span> </a> </div> <div class="post-card__body"> <div class="post-card__title"><a href="https://bestprogrammer.ru/baza-dannyh/kak-proverit-privilegii-privileges-postgres-dlya-polzovatelya">Проверка привилегий пользователя в Postgres</a></div> <div class="post-card__description"> Показать пользователю его права в базе данных — </div> <div class="post-card__meta"> <span class="post-card__comments">0</span> <span class="post-card__views">2.6к.</span> </div> </div> </article> <article class="post-card post-card--vertical"> <div class="post-card__thumbnail"> <a href="https://bestprogrammer.ru/izuchenie/kerberos-za-5-minut-znakomstvo-s-setevoj-autentifikatsiej"> <img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/kerberos-za-5-minut-kak-bystro-osvoit-setevuyu-autentifikatsiyu_21414-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /> <span class="post-card__category">Изучение</span> </a> </div> <div class="post-card__body"> <div class="post-card__title"><a href="https://bestprogrammer.ru/izuchenie/kerberos-za-5-minut-znakomstvo-s-setevoj-autentifikatsiej">Kerberos за 5 минут как быстро освоить сетевую аутентификацию</a></div> <div class="post-card__description"> В современном мире информационных технологий безопасность </div> <div class="post-card__meta"> <span class="post-card__comments">0</span> <span class="post-card__views">2.5к.</span> </div> </div> </article></div></div><div id="block-22" class="widget widget_block"><div id="marketWidget6"></div></div> </div> </aside><!-- #secondary --> <div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"> <div class="post-card post-card--related"> <div class="post-card__thumbnail"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/top-10-luchshix-telegram-kanalov-po-razrabotke-na-python-v-2024-godu"><img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/luchshie-telegram-kanaly-po-razrabotke-na-python-v-2024-godu-obzor-luchshih-istochnikov-znaniy_26187-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /></a></div><div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/top-10-luchshix-telegram-kanalov-po-razrabotke-na-python-v-2024-godu">Лучшие Telegram-каналы по разработке на Python в 2024 году — обзор лучших источников знаний</a></div><div class="post-card__description">В современном мире каждый разработчик Python стремится</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div> </div> <div class="post-card post-card--related"> <div class="post-card__thumbnail"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/izuchaem-javascript-zamikanie-osnovi-i-primeri-raboti-s-oblastyu-vidimosti"><img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/izuchaem-osnovy-zamykaniya-v-javascript-i-primery-raboty-s-oblastyu-vidimosti_27550-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /></a></div><div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/izuchaem-javascript-zamikanie-osnovi-i-primeri-raboti-s-oblastyu-vidimosti">Изучаем основы замыкания в JavaScript и примеры работы с областью видимости</a></div><div class="post-card__description">Когда мы пишем код на JavaScript, мы создаём не просто</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">1</span></div> </div> <div class="post-card post-card--related"> <div class="post-card__thumbnail"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/kak-sozdat-kachestvennij-tekstovij-kontent-polnoe-rukovodstvo"><img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/polnoe-rukovodstvo-po-sozdaniyu-kachestvennogo-tekstovogo-kontenta_25944-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /></a></div><div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/kak-sozdat-kachestvennij-tekstovij-kontent-polnoe-rukovodstvo">Полное руководство по созданию качественного текстового контента</a></div><div class="post-card__description">Понимание основ и нюансов написания эффективного текстового</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">1</span></div> </div> <div class="post-card post-card--related"> <div class="post-card__thumbnail"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/css-animation-direction-property-kak-upravlyat-napravleniem-animatsii"><img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/kak-izmenit-napravlenie-animatsii-s-pomoschyu-svoystva-css-animation-direction_27515-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /></a></div><div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/css-animation-direction-property-kak-upravlyat-napravleniem-animatsii">Как изменить направление анимации с помощью свойства CSS animation-direction</a></div><div class="post-card__description">В мире веб-разработки существует множество аспектов</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div> </div> <div class="post-card post-card--related"> <div class="post-card__thumbnail"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/kak-ispolzovat-metod-getcurrentposition-dlya-geolokatsii-polnoe-rukovodstvo"><img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/polnoe-rukovodstvo-po-ispolzovaniyu-metoda-getcurrentposition-dlya-geolokatsii_29960-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /></a></div><div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/kak-ispolzovat-metod-getcurrentposition-dlya-geolokatsii-polnoe-rukovodstvo">Полное руководство по использованию метода getCurrentPosition для геолокации</a></div><div class="post-card__description">В эпоху цифровых технологий, где всё больше сервисов</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">2</span></div> </div> <div class="post-card post-card--related"> <div class="post-card__thumbnail"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/manipulyatsii-s-dom-na-javascript-osnovnie-priemi-i-primeri-koda"><img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/osvoenie-tehnik-raboty-s-dom-na-javascript-cherez-primery-koda_30308-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /></a></div><div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/manipulyatsii-s-dom-na-javascript-osnovnie-priemi-i-primeri-koda">Освоение техник работы с DOM на JavaScript через примеры кода</a></div><div class="post-card__description">Современная веб-разработка требует от разработчиков</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div> </div> <div class="post-card post-card--related"> <div class="post-card__thumbnail"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/polnij-gid-po-nastrojke-webpack-dlya-nachinayushix-s-chego-nachat"><img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/poshagovoe-rukovodstvo-po-nastroyke-webpack-dlya-nachinayuschih-s-nulya_28107-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /></a></div><div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/polnij-gid-po-nastrojke-webpack-dlya-nachinayushix-s-chego-nachat">Пошаговое руководство по настройке Webpack для начинающих с нуля</a></div><div class="post-card__description">Каждому разработчику рано или поздно приходится сталкиваться</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">2</span></div> </div> <div class="post-card post-card--related"> <div class="post-card__thumbnail"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/vse-o-tipe-contextmanager-v-python-chto-eto-takoe-i-kak-ispolzovat-kontekstnie-menedzheri"><img width="335" height="220" data-src="https://bestprogrammer.ru/wp-content/uploads/2024/06/polnoe-rukovodstvo-po-tipu-contextmanager-v-python-ot-opredeleniya-do-prakticheskogo-primeneniya-kontekstnyh-menedzherov_30133-335x220.jpg" class="attachment-reboot_small size-reboot_small wp-post-image lazyload" alt="" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="--smush-placeholder-width: 335px; --smush-placeholder-aspect-ratio: 335/220;" /></a></div><div class="post-card__title"><a href="https://bestprogrammer.ru/programmirovanie-i-razrabotka/vse-o-tipe-contextmanager-v-python-chto-eto-takoe-i-kak-ispolzovat-kontekstnie-menedzheri">Полное руководство по типу contextmanager в Python — от определения до практического применения контекстных менеджеров.</a></div><div class="post-card__description">Один из ключевых аспектов разработки на Python – это</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">3</span></div> </div> </div></div> </div><!--.site-content-inner--> </div><!--.site-content--> <div class="site-footer-container "> <div class="footer-navigation full" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="main-navigation-inner fixed"> <div class="menu-bottom_menu-container"><ul id="footer_menu" class="menu"><li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="https://bestprogrammer.ru/sitemap">Карта сайта</a></li> <li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-187"><a href="https://bestprogrammer.ru/sample-page">О сайте</a></li> <li id="menu-item-8043" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8043"><a href="https://bestprogrammer.ru/kontakty">Контакты</a></li> </ul></div> </div> </div><!--footer-navigation--> <footer id="colophon" class="site-footer site-footer--style-gray full"> <div class="site-footer-inner fixed"> <div class="footer-widgets footer-widgets-3"><div class="footer-widget"></div><div class="footer-widget"></div><div class="footer-widget"><div id="block-11" class="widget widget_block"> <pre class="wp-block-preformatted"><a href="https://bestprogrammer.ru/policy" data-type="URL" data-id="https://bestprogrammer.ru/policy">Политика конфиденциальности сайта</a></pre> </div></div></div> <div class="footer-bottom"> <div class="footer-info"> © 2025 bestprogrammer.ru </div> <div class="footer-counters"><!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(61780165, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/61780165" style="position:absolute; left:-9999px;" alt=""/></div></noscript> <!-- /Yandex.Metrika counter --></div></div> </div> </footer><!--.site-footer--> </div> <button type="button" class="scrolltop js-scrolltop" data-mob="on"></button> </div><!-- #page --> <script>var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){ window.open( e.target.getAttribute("data-uri") ); }); }</script><script type="text/javascript" id="wpil-frontend-script-js-extra"> /* <![CDATA[ */ var wpilFrontend = {"ajaxUrl":"\/wp-admin\/admin-ajax.php","postId":"28830","postType":"post","openInternalInNewTab":"1","openExternalInNewTab":"1","disableClicks":"0","openLinksWithJS":"0","trackAllElementClicks":"0","clicksI18n":{"imageNoText":"Image in link: No Text","imageText":"Image Title: ","noText":"No Anchor Text Found"}}; /* ]]> */ </script> <script type="text/javascript" src="https://bestprogrammer.ru/wp-content/plugins/link-whisper-premium/js/frontend.min.js" id="wpil-frontend-script-js"></script> <script type="text/javascript" id="reboot-scripts-js-extra"> /* <![CDATA[ */ var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"}; var wps_ajax = {"url":"https:\/\/bestprogrammer.ru\/wp-admin\/admin-ajax.php","nonce":"5d4176fa66"}; var wpshop_views_counter_params = {"url":"https:\/\/bestprogrammer.ru\/wp-admin\/admin-ajax.php","nonce":"5d4176fa66","is_postviews_enabled":"","post_id":"28830"}; /* ]]> */ </script> <script type="text/javascript" src="https://bestprogrammer.ru/wp-content/themes/reboot/assets/js/scripts.min.js" id="reboot-scripts-js"></script> <script type="text/javascript" src="https://bestprogrammer.ru/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://bestprogrammer.ru/wp-content/plugins/easy-fancybox/vendor/purify.min.js" id="fancybox-purify-js"></script> <script type="text/javascript" src="https://bestprogrammer.ru/wp-content/plugins/easy-fancybox/fancybox/1.5.4/jquery.fancybox.min.js" id="jquery-fancybox-js"></script> <script type="text/javascript" id="jquery-fancybox-js-after"> /* <![CDATA[ */ var fb_timeout, fb_opts={'autoScale':true,'showCloseButton':true,'width':560,'height':340,'margin':20,'pixelRatio':'false','padding':10,'centerOnScroll':false,'enableEscapeButton':true,'speedIn':300,'speedOut':300,'overlayShow':true,'hideOnOverlayClick':true,'overlayColor':'#000','overlayOpacity':0.6,'minViewportWidth':320,'minVpHeight':320,'disableCoreLightbox':'true','enableBlockControls':'true','fancybox_openBlockControls':'true' }; if(typeof easy_fancybox_handler==='undefined'){ var easy_fancybox_handler=function(){ jQuery([".nolightbox","a.wp-block-file__button","a.pin-it-button","a[href*='pinterest.com\/pin\/create']","a[href*='facebook.com\/share']","a[href*='twitter.com\/share']"].join(',')).addClass('nofancybox'); jQuery('a.fancybox-close').on('click',function(e){e.preventDefault();jQuery.fancybox.close()}); /* IMG */ var unlinkedImageBlocks=jQuery(".wp-block-image > img:not(.nofancybox,figure.nofancybox>img)"); unlinkedImageBlocks.wrap(function() { var href = jQuery( this ).attr( "src" ); return "<a href='" + href + "'></a>"; }); var fb_IMG_select=jQuery('a[href*=".jpg" i]:not(.nofancybox,li.nofancybox>a,figure.nofancybox>a),area[href*=".jpg" i]:not(.nofancybox),a[href*=".png" i]:not(.nofancybox,li.nofancybox>a,figure.nofancybox>a),area[href*=".png" i]:not(.nofancybox),a[href*=".webp" i]:not(.nofancybox,li.nofancybox>a,figure.nofancybox>a),area[href*=".webp" i]:not(.nofancybox),a[href*=".jpeg" i]:not(.nofancybox,li.nofancybox>a,figure.nofancybox>a),area[href*=".jpeg" i]:not(.nofancybox)'); fb_IMG_select.addClass('fancybox image'); var fb_IMG_sections=jQuery('.gallery,.wp-block-gallery,.tiled-gallery,.wp-block-jetpack-tiled-gallery,.ngg-galleryoverview,.ngg-imagebrowser,.nextgen_pro_blog_gallery,.nextgen_pro_film,.nextgen_pro_horizontal_filmstrip,.ngg-pro-masonry-wrapper,.ngg-pro-mosaic-container,.nextgen_pro_sidescroll,.nextgen_pro_slideshow,.nextgen_pro_thumbnail_grid,.tiled-gallery'); fb_IMG_sections.each(function(){jQuery(this).find(fb_IMG_select).attr('rel','gallery-'+fb_IMG_sections.index(this));}); jQuery('a.fancybox,area.fancybox,.fancybox>a').each(function(){jQuery(this).fancybox(jQuery.extend(true,{},fb_opts,{'transition':'elastic','transitionIn':'elastic','transitionOut':'elastic','opacity':false,'hideOnContentClick':false,'titleShow':true,'titlePosition':'over','titleFromAlt':true,'showNavArrows':true,'enableKeyboardNav':true,'cyclic':false,'mouseWheel':'true','changeSpeed':250,'changeFade':300}))}); };}; var easy_fancybox_auto=function(){setTimeout(function(){jQuery('a#fancybox-auto,#fancybox-auto>a').first().trigger('click')},1000);}; jQuery(easy_fancybox_handler);jQuery(document).on('post-load',easy_fancybox_handler); jQuery(easy_fancybox_auto); /* ]]> */ </script> <script type="text/javascript" src="https://bestprogrammer.ru/wp-content/plugins/easy-fancybox/vendor/jquery.easing.min.js" id="jquery-easing-js"></script> <script type="text/javascript" src="https://bestprogrammer.ru/wp-content/plugins/easy-fancybox/vendor/jquery.mousewheel.min.js" id="jquery-mousewheel-js"></script> <script type="text/javascript" src="https://bestprogrammer.ru/wp-content/plugins/wp-smushit/app/assets/js/smush-lazy-load.min.js" id="smush-lazy-load-js"></script> <div id="clearfy-cookie" class="clearfy-cookie clearfy-cookie-hide clearfy-cookie--bottom"> <div class="clearfy-cookie-container"> Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами. <button id="clearfy-cookie-accept" class="clearfy-cookie-accept">OK</button> </div></div><script>var cookie_clearfy_hide = document.cookie.replace(/(?:(?:^|.*;\s*)clearfy_cookie_hide\s*\=\s*([^;]*).*$)|^.*$/, "$1");if ( ! cookie_clearfy_hide.length ) { document.getElementById("clearfy-cookie").classList.remove("clearfy-cookie-hide");} document.getElementById("clearfy-cookie-accept").onclick = function() { document.getElementById("clearfy-cookie").className += " clearfy-cookie-hide"; var clearfy_cookie_date = new Date(new Date().getTime() + 31536000 * 1000); document.cookie = "clearfy_cookie_hide=yes; path=/; expires=" + clearfy_cookie_date.toUTCString(); setTimeout(function() { document.getElementById("clearfy-cookie").parentNode.removeChild( document.getElementById("clearfy-cookie") ); }, 300);}</script><script>!function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e)}catch(t){}return t}()||function(i){var o=!0,s=!1;EventTarget.prototype.addEventListener=function(t,e,n){var r="object"==typeof n,a=r?n.capture:n;n=r?n:{},"touchstart"!=t&&"scroll"!=t&&"wheel"!=t||(n.passive=void 0!==n.passive?n.passive:o),n.capture=void 0!==a?a:s,i.call(this,t,e,n)}}(EventTarget.prototype.addEventListener);</script><div id="vid_vpaut_div" style=" display:inline-block;width:600px;height:320px" vid_vpaut_pl="10408"></div><script type="text/javascript" src="https://videoroll.net/js/vid_vpaut_script.js" async></script> <script>var rocket_lcp_data = {"ajax_url":"https:\/\/bestprogrammer.ru\/wp-admin\/admin-ajax.php","nonce":"289e96ddc0","url":"https:\/\/bestprogrammer.ru\/programmirovanie-i-razrabotka\/osnovi-html-kak-sozdat-veb-stranitsu-s-nulya-3","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg, section, header","width_threshold":1600,"height_threshold":700,"delay":500,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://bestprogrammer.ru/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->