Html коды для сайтов примеры – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

alexxlab

Содержание

Как вставить html-код: все возможные варианты

Из этой статьи вы узнаете:

  • Как вставлять код html на страницы сайтов
  • Как добавить произвольный html-код в WordPress
  • Как можно вставить код html в Joomla
  • Как добавить любой html-фрагмент на сайт Wix
  • Как делать красивые html-письма в «Яндексе»
  • Можно ли изменить html-код страницы «ВКонтакте»

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

Что нужно для вставки html-кода на страницу: обязательное условие

HTML-код

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

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

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

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

Наибольшей популярностью пользуются движки:

  • WordPress,
  • Joomla,
  • Bitrix.

Кроме платных платформ, есть и бесплатные, типа Wix.

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

Допустим, вы администратор портала, который работает на базе WordPress. Вход в административную службу можно произвести, добавив в адресной строке браузера ссылку http://имя ресурса/wp-login.php.

WordPress

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

Так же просто попасть в систему управления сайтом на платформе Joomla. В принципе, вход в административный раздел идентичен только что описанному для движка WordPress. Ссылка для адресной строки – http://имя ресурса/administrator, после чего жмем на Enter и заполняем аналогичные окошки своими данными для регистрации. Разница лишь в том, что для администраторов Joomla предусмотрен один пароль – admin. Идентификационные данные пользователь получает от системного администратора провайдера, который руководит хостингом ресурса. При неправильном вводе пароль сбрасывается и требуется повторная идентификация.

Итак, на какой бы платформе ни базировалась ваша интернет-площадка, вставить html-код без административных прав пользователь не сумеет.

Как вставить html-код на сайт WordPress

1. Установка счетчиков и сервисов

Структура любого сайта подразумевает добавление или удаление каких-либо плагинов, html-кодов популярных сервисов, типа счетчиков посетителей, или сервисов, анализирующих интернет-ресурсы, или иных приложений для веб-аналитики (Google Analytics или, к примеру, «Яндекс.Метрика»), метатега подтверждения прав на сайт «Яндекс.Вебмастер», или любого производного кода.

В WordPress вставить html-код на страницу можно несколькими способами:

  • вручную;
  • добавить готовый плагин.

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

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


Множество плагинов по факту добавляются с помощью настроек панели управления. Некоторые помещают в шапке, то есть размещая html-код внутри контейнера <head>…</head>, другие нужно вставить в так называемый подвал, область контента, перед тегом </body> (или закрывающим).

Для удобства стоит взять на вооружение очень эффективный программный модуль LuckyWP Scripts Control. Дополнение с комфортным интерфейсом позволяет вставить блоки html-кода в произвольном порядке, размещая их в нужной области при помощи перетаскивания. Плагин можно найти, зайдя по ссылке https://ru.wordpress.org/plugins/luckywp-scripts-control/ в официальный репозиторий движка WordPress, он официально распространяется, установка его не требует ни времени, ни специальных знаний. Активируйте программу, и кнопка «Скрипты» появится в «Настройках» на панели управления.

Имейте в виду, что вставить html-код возможно и перед <body> (закрывающим тегом), иные ситуации требуют именно такого шага.

Какие html-коды можно ввести:

  • счетчики посещений «Яндекс.Метрика», Google Analytics;
  • метатеги верификации в системах «Яндекс», Google и других;
  • html-код пикселя Facebook;
  • html-код диспетчера Google Tag Manager;
  • произвольный JS/CSS/Html-код;
  • произвольные метатеги.

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

2. Произвольный html-код в боковой панели

Произвольный html-код в боковой панели

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

Добавление происходит при переходе в меню «Внешний вид» на вкладку «Настройка» (как вариант – на вкладку «Виджеты»).

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

При вставке, к примеру, счетчика на боковую панель, нам понадобится элемент «Боковая панель» или Sidebar, при нажатии кнопки «Добавить виджет» в открывающемся списке находим нужный код html.

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

3. Вставка фрагмента html на отдельной странице

Вставка фрагмента html

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

Топ-5 статей, которые будут полезны каждому руководителю:

Как показать примеры кода html на странице в WordPress

Обычно программный html-код в WordPress не выводится. Исключение составляют специализированные ресурсы, где обсуждаются программирование, продвижение сайтов, web-дизайн и т. д.

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

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

  • Как добавить код в статью без плагина

В WordPress администратор ресурсов снабжается специальным помощником, встроенным в систему управления контентом. Если пользователь добавляет один или несколько фрагментов кода в визуальном режиме, то переход в текстовый редактор WordPress изменяет символы в тегах с <текст> на &lt; текст &gt;.

Чтобы система управления сайтом (CMS) поняла, что данный блок должен в таком же виде отражаться на странице, его обрабатывают в текстовом режиме – выделяют и обрамляют с двух сторон тегом <code>. На панели инструментов для такой операции есть одноименная кнопка.

Кнопка Code

На странице мы увидим такую картину:

<tableborder=»1″>

<tr>

<th>Наименование 1</th>

<th>Наименование 2</th>

</tr>

<tr>

<td>Значение 1</td>

<td>Значение 2</td>

</tr>

</table>

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

Образец, как правильно вставлять код html на страницу в WordPress без плагинов с применением тега <pre>:

<tableborder=»1″>

<tr>

<th>Наименование 1</th>

<th>Наименование 2</th>

</tr>

<tr>

<td>Значение 1</td>

<td>Значение 2</td>

</tr>

</table>

article_banner.png

Расширить функции тега <pre> можно универсальными атрибутами, например, для выравнивания текста (align) или определения стиля (style).

Рассмотрим пример, как использовать значения атрибута style для назначения цвета текста и фона блока, толщины, цвета и радиуса закругления границы блока:

<pre>

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

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

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

  • 2 удобных плагина вставки кода для WordPress

Для красивого оформления кодов – html, java, css, php – применяются некоторые плагины WordPress, имеющиеся в наличии в официальном репозитории. Используя их, можно подсветить нужные элементы, отобразить нумерацию строк и т. д.

  1. SyntaxHighlighter Evolved

    Вставить html-код в WordPress удобно применяя плагин SyntaxHighlighter Evolved. Приложение имеет широкое распространение и мощный функционал и популярно у веб-мастеров. Настройки позволяют красиво и корректно выводить коды, подсвечивая их в разные цвета, нумеровать строки, делать кликабельными ссылки и придавать кодам читабельный вид. Программа снабжена визуальным предосмотром вывода, при необходимости расшифрует применяемые атрибуты и много еще чего умеет.

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

    С его помощью вставить html-код в контент WordPress несложно, разрешаем программе в настройках обработку тега <pre> или применение соответствующих шорткодов:

    [php]пример[/php]

    [html]пример[/html]

    [css]пример[/css]

    [codelang=»js»]пример[/code]

  2. Code Prettify

    Простой плагин с малым весом, не требующий настройки. Пользуясь им, можно вставить html-код в WordPress, применяя автоматическую подсветку кода, независимо от языка программирования, к тегам <pre> или <code> добавляет собственные стили.

    Скачивается из библиотеки Google или добавляется на сайт через тег подключения скрипта. Для любителей простых решений просто незаменим.

Как вставить html-код на сайт Joomla

При построении и настройке сайта на базе Joomla 3 мастер сталкивается с необходимостью вставки сторонних кодов – php, JavaScript или html. Рассмотрим, как в модуль или статью на Joomla вставить html-код счетчика посещений LiveInternet.

Применим для внедрения нужного кода плагин для обработки кода, работающий непосредственно с сайтами на движке Joomla, – Sourcerer, с его помощью можно добавить любой распространенный код, будь то html-код или css, php, javascript, в любой сектор – в тело статьи, в категорию, метатег, компонент, модуль и т. п.

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

После скачивания плагина устанавливаем его. Последовательность действий:

  1. В административном разделе находим раздел «Расширения» и переходим на вкладку «Менеджер расширений».
  2. Не изменяя предустановленной настройки «Загрузить файл пакета», нажимаем на опцию «Выберите файл».
  3. В сохраненных файлах находим архив с программой и открываем его.
  4. Загружаем и устанавливаем плагин.
  5. По завершении процесса система оповестит об успешной установке модуля.

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

  • Как вставить код на сайт с помощью модуля

В разделе «Расширения админки» воспользуемся «Менеджером модулей». С помощью соответствующей кнопки создаем новый модуль. Из предложенных опций на вкладке «Выбор типа модуля» находим HTML-код и кликаем на ссылку.

Выбор типа модуля

В новом модуле заполняем окно «Заголовок», прописываем открывающий и закрывающий теги {source} и {/source}, остается лишь вставить скопированный html-код между тегами.

Вставить код на сайт с помощью модуля

Далее в стандартных полях модуля указываем свои настройки: показ заголовка/или нет, выбираем местоположение модуля и завершаем работу нажатием кнопок «Опубликовано» и «Сохранить».

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

  • Как вставить код в статью в редакторе Joomla

Порядок работы идентичен вставке кода в модуле. Установив приложение Sourcerer, прописываем теги {source}{/source} в редакторе материалов и помещаем между ними нужный код.

Как вставить html-код на сайт Wix

Работа с онлайн-конструктором Wix имеет свои нюансы. Для добавления на сайт постороннего кода или скрипта плагина требуется приложение HTML.

Внешний код или его компоненты обозначаются как iframe. С помощью приложения HTML можно настроить внешнюю форму сайта или установить, к примеру, календарь или любой виджет, которым Wix не располагает.

Краткая инструкция, как в Wix вставить html-код:

  1. В левой части редактора нажимаем кнопку «Добавить».
  2. Кликаем на кнопку «Еще».
  3. Перетаскиваем приложение «HTML-код» на страницу или кликаем на него.
  4. Следующий шаг – «Вставить код».
  5. Добавляем нужный код HTTPS.
  6. Завершаем работу кнопкой «Применить».
html-код на сайт Wix

Приложение для Wix безукоризненно работает при соблюдении некоторых условий:

  1. Встраиваемый код должен быть с расширением HTTPS. Код с HTTP просто не отображается в опубликованном виде.
  2. Код html определяется парными тегами, например открывающим <p> и закрывающим </p>. Соблюдение подобного формата тегов необходимо, чтобы сохранялась структура страницы, которую вы форматируете.
  3. В коде HTML прописаны базовые элементы страницы, для настроек дизайна и некоторых функций пишутся другие коды. Если же какие-либо элементы некорректно отражаются или работают, значит, эти опции в код HTML не включены. Пример – файлы CSS или JS.
  4. Перед встраиванием кода убедитесь в его обновлении и совместимости с HTML5. Часть браузеров некорректно отображают скрипты и страницы, написанные на некоторых устаревших версиях HTML.
  5. Приложение HTML – это iFrame. В иных случаях наблюдается несовместимость встроенного кода и сайта, хотя ранее подобного не происходило.
  6. Некоторые сайты оборудованы защитой от встраивания на чужие платформы (к таким относится Wix). Такой сайт может не отобразиться в редакторе или на вашем ресурсе после публикации ссылки или вставки кода в HTML-приложении.

Как вставить код счетчиков на сайт Bitrix

Bitrix имеет успех у разработчиков коммерческих ресурсов. Установка на сайт Bitrix-счетчиков осуществляется без труда – открывается общий шаблон и вставляется html-код, скопированный на «Яндекс.Метрику» или Google Analytics.

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

Редактировать шаблон

Вставить html-код счетчика можно непосредственно в редакторе.

HTML-код счетчика

Одно из важных условий – ко всем страницам применяется одинаковый шаблон.

Как вставить html-код в письмо Mail.ru или Yandex.ru

Иногда требуется вставить код в электронное послание, чтобы придать ему неповторимый стиль, например, при корпоративной переписке или рассылках. Большинство почтовых серверов не имеют инструментов для форматирования.

Но изменить дизайн писем на бесплатных платформах типа Mail.ru или «Яндекс» все же возможно. Сверстать уникальное письмо, например рассылку с визуальными элементами, – трудоемкая, но вполне выполнимая операция.

Рассмотрим, как вставить html-код в письмо «Яндекс» или «Мейл.ру».

Для начала нужно создать шаблон письма. Его ширина не должна превышать 640 пикселей для комфортного просмотра на маленьких мониторах, чтобы письмо выглядело, как узкая страница. Верстка писем – достаточно распространенный прием, и в Сети найдется не одна инструкция по созданию красивого интерактивного письма. Проверяем, как отреагирует на встраиваемый шаблон выбранный почтовый сервис.

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

  • Mail.ru;
  • Yandex;
  • Mozilla Thunderbird;
  • The Bat;
  • Gmail;
  • Microsоft Outlook.

Если шаблон проходит проверку, двигаемся дальше.

Считается, что корректно вставить html-код позволяют лишь два клиента – Microsoft Outlook и Mozilla Thunderbird. Но так как большинство пользователей привыкли пользоваться только «Яндексом» или «Мейл.ру», то пробуем обхитрить родные почтовые программы.

Производим установку и настройку Mozilla Thunderbird на учетную запись пользователя.

HTML-письмо через Yandex Почту

В настройках в обязательном порядке отмечаем, что для передачи данных будет использоваться IMAP – протокол для входящей корреспонденции и SMTP – протокол для исходящей. Подобная операция откроет возможность скачивания почты в Mozilla Thunderbird так, чтобы серверы Yandex ее не удаляли и автоматически обновляли все письма с Mozilla Thunderbird.

С помощью этой манипуляции мы сможем создавать шаблоны писем в Mozilla Thunderbird в формате HTML и автоматически загружать их в папку почты Yandex.

Помещаем html-код в письмо и в виде шаблона сохраняем его в Thunderbird.

Через несколько минут фиксируем необходимую папку «template» в программе Yandex и находим там сверстанное письмо с html-кодами. Можно доработать созданный шаблон и сохранить в желаемом виде уже Yandex-почте.

Создавая новое письмо, воспользуемся своей заготовкой, для чего нужно нажать на зеленую ссылку «Шаблон» и подгрузить нужный шаблон. На «Яндекс Почте» для хранения шаблонов есть специальная папка в разделе «Черновики».

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

Способы исправления ошибки заключаются в следующем:

  • Загружаем изображения, которые выбрали для верстки, на Yandex-диск (при отправлении почты с сервера Yandex), в облако Mail.ru (при отправке письма с mail.ru). Указываем прямые ссылки на загруженную картинку в сервисе. Проследите, чтобы по избранной ссылке открывалось только изображение и больше ничего.
  • Попробуйте загрузить изображение в тело письма, сделав его перекодировку в base 64. Остается только поместить код картинки в формате base 64 в теги <imgsrc=»data:image/png;base64, код картинки, полученный из сервиса»/>

Самый эффективный вариант – сделать перекодировку картинки в код base 64 – это и надежней, и занимает меньше времени (вашу картинку с Yandex-диска уже не удалят, так как она помещена в письмо).

Цель создать красивое письмо достигнута. Если хотите, программу Thunderbird можно удалить. Теперь ваши письма – настоящий уникальный продукт, а вы – мастер, умеющий вставлять html-код где угодно.

Как вставить html-код в ВК

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

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

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

Для начала открываете страницу, куда имеете намерение вставить html-код, и активируете опцию просмотра ее кода комбинацией Ctrl + U. Далее копируете открывшийся код в html-редактор, например в Notepad++.

Страница Вконтакте

Заходим в контекстное меню, выбираем опцию Edit with Notepad ++ и приступаем к редактированию. Сохранить созданный файл на компьютер можно, применив комбинацию клавиш Ctrl + S или «Сохранить на компьютер». Новая веб-страничка будет загружена на жесткий диск, включая все составляющие ее элементы – картинки, скрипты и прочее. В режиме офлайн вы можете просматривать свою версию на компьютере, можно даже сделать ее скриншот. Но загрузить файл на онлайн-сервис вы не в силах.

Как вставить HTML, CSS и JS в PHP-код

При разработке собственного модуля веб-мастер использует дополнительные скрипты и верстку (CSS, HTML). Каждый элемент и html-код подключается отдельно, в тело страницы или любой выбранный файл. Но есть особая категория дополнений, которые требуется вставить непосредственно в файл PHP.

Рассмотрим два способа, как правильно вставлять html-код, JavaScript или CSS в код PHP.

  • Первый вариант вставки элементов в PHP-код

Работая со страницей, которая написана на PHP, веб-мастер оперирует тегом echo (который помогает выводить сообщение на экран).

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


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

При подобном подходе изменения будут корректно отображаться.

  • Второй вариант вставки элементов в PHP-код

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


В подобную конструкцию можно вставить html-код, JavaScript или CSS. Кавычкам уже не придается ключевого значения, они могут быть любыми. При желании возможно внедрять переменные вывода.

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

article_banner.png

HTML-списки

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

маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
список определений — <dl> — состоит из пар термин <dt> — <dd> определение.

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

Создание HTML-списков

1. Маркированный список

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>
unordered listРис. 1. Маркированный список

2. Нумерованный список

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>
АтрибутОписание, принимаемое значение
reversedАтрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
startАтрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
typeАтрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>
ordered listРис. 2. Нумерованный список

3. Список определений

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>
  <dt>Режиссер:</dt>
    <dd>Петр Точилин</dd>
  <dt>В ролях:</dt>
    <dd>Андрей Гайдулян</dd>
    <dd>Алексей Гаврилов</dd>
    <dd>Виталий Гогунский</dd>
    <dd>Мария Кожевникова</dd>
</dl>
dlРис. 3. Список определений

4. Вложенный список

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

<ul>
 <li>Пункт 1.</li>
  <li>Пункт 2.
    <ul>
      <li>Подпункт 2.1.</li>
       <li>Подпункт 2.2.     
        <ul>
          <li>Подпункт 2.2.1.</li>
          <li>Подпункт 2.2.2.</li>
          </ul>
       </li>          
      <li>Подпункт 2.3.</li>
    </ul>
  </li>
 <li>Пункт 3.</li>
</ul>
ul ul ulРис. 4. Вложенный список

5. Многоуровневый нумерованный список

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

<ol>
  <li>пункт</li> <!-1.->
  <li>пункт           
    <ol>
      <li>пункт</li> <!-2.1.->
      <li>пункт</li> <!-2.2.->
      <li>пункт
        <ol>
          <li>пункт</li> <!-2.3.1.->
          <li>пункт</li> <!-2.3.2.->
          <li>пункт</li> <!-2.3.3.-> 
        </ol>
      </li> <!-2.3.->
      <li>пункт</li> <!-2.4.->  
    </ol>
  </li> <!-2.->
  <li>пункт</li> <!-3.->        
  <li>пункт</li> <!-4.->        
</ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

ol {
/* убираем стандартную нумерацию */
list-style: none; 
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
counter-reset: li; 
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li; 
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li,".") ". "; 
}
numeric listРис. 5. Многоуровневый нумерованный список

Как сделать список в HTML + подробный видеоурок