Блог

Как указать канонический URL

Канонический URL можно указать с помощью атрибута rel="canonical".

Пример:

<link rel="canonical" href="https://novocodo.ru/about/" />

DIALOG (тег в HTML)

Что такое dialog в html:

Отображает диалоговое окно или другой интерактивный компонент.

Атрибуты:

1. open - указывает, что диалог виден и активен.

Как прописать dialog в html:

<dialog open>
  <h2>Пример модального диалога</h2>
  <p>Это модальное диалоговое окно.</p>
  <button>Закрыть</button>
</dialog>

Примеры использования

Простое диалоговое окно:

<button id="show-dialog-btn">Показать диалог</button>

<dialog id="my-dialog">
  <p>Это простое диалоговое окно.</p>
  <button id="close-dialog-btn">Закрыть</button>
</dialog>

<script>
  const showDialogBtn = document.querySelector('#show-dialog-btn');
  const myDialog = document.querySelector('#my-dialog');
  const closeDialogBtn = document.querySelector('#close-dialog-btn');

  showDialogBtn.addEventListener('click', () => {
    myDialog.showModal();
  });

  closeDialogBtn.addEventListener('click', () => {
    myDialog.close();
  });
</script>

Диалоговое окно с формой:

<button id="show-dialog-btn">Показать диалог</button>

<dialog id="my-dialog">
  <form>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">Отправить</button>
  </form>
  <button id="close-dialog-btn">Закрыть</button>
</dialog>

<script>
  const showDialogBtn = document.querySelector('#show-dialog-btn');
  const myDialog = document.querySelector('#my-dialog');
  const closeDialogBtn = document.querySelector('#close-dialog-btn');

  showDialogBtn.addEventListener('click', () => {
    myDialog.showModal();
  });

  closeDialogBtn.addEventListener('click', () => {
    myDialog.close();
  });
</script>

XMP (тег в HTML)

Что такое xmp в html:

Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <xmp> не закрыт, все теги внутри него отображаются как обычный текст.

Как прописать xmp в html:

<xmp>Текст</xmp>

WBR (тег в HTML)

Что такое wbr в html:

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

Как прописать wbr в html:

Текст<wbr>текст

VAR (тег в HTML)

Что такое var в html:

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

Как прописать var в html:

<p>Формула вычисления площади круга имеет вид: A = π<var>r</var>²</p>

VIDEO (тег в HTML)

Что такое video в html:

Используется для вставки видео на веб-страницу. Он позволяет пользователю воспроизводить, ставить на паузу и управлять воспроизведением видео.

Атрибуты:

1. src - путь к видеофайлу.
2. controls - отображает элементы управления видеопроигрывателем.
3. width - ширина видео.
4. height - высота видео.
5. poster - устанавливает изображение-обложку для видео.
6. autoplay - включает автовоспроизведение видео.
7. loop - зацикливает воспроизведение видео.
8. muted - выключает звук в видео.

Как прописать video в html:

<video src="video.mp4" width="640" height="360" controls>.
  Ваш браузер не поддерживает тег <code>video</code>.
</video>

UL (тег в HTML)

Что такое ul в html:

Устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Атрибуты:

1. type - Устанавливает вид маркера списка.

Как прописать ul в html:

<ul>
  <li>элемент маркированного списка</li>
</ul>

U (тег в HTML)

Что такое u в html:

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

Как прописать u в html:

<u>Текст</u>

TT (тег в HTML)

Что такое tt в html:

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

Как прописать tt в html:

<p>Для запуска программы используйте команду <tt>python app.py</tt>.</p>

TRACK (тег в HTML)

Что такое track в html:

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

Атрибуты:

1. kind - тип текстовой дорожки.
2. src - URL-адрес файла с текстовой дорожкой.
3. srclang - язык текстовой дорожки.
4. label - подпись текстовой дорожки.
5. default - является ли текстовая дорожка дорожкой по умолчанию.

Как прописать track в html:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Русские субтитры">

TR (тег в HTML)

Что такое tr в html:

Создаёт в таблице строку. Он содержит ячейки <td> или заголовки <th>.
Чтобы таблица отображалась корректно, все ячейки должны быть заполнены. Также ячейки можно объединять с помощью атрибута colspan.
Если необходимо создать таблицу без использования тега <tr>, можете воспользоваться другими тегами для создания разметки, например,<div>, <ul> или <dl>. Однако это может затруднить стилизацию таблицы с помощью CSS.

Как прописать tr в html:

<table>
  <tr>
   <td>...</td>
  </tr>
</table>

TITLE (тег в HTML)

Что такое title в html:

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

Как прописать title в html:

<!DOCTYPE html>
<html lang='ru'>
<head>
  <meta charset='UTF-8'>
  <title>https://novocodo.ru/</title>

 </head>
</html>

TIME (тег в HTML)

Что такое time в html:

Помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime.

Атрибуты:

1. datetime - Задает дату, время или оба значения для текста.
2. pubdate - Указывает дату публикации документа.

Как прописать time в html:

<time>дата и время</time>
<time datetime="<дата и время>">текст</time>

THEAD (тег в HTML)

Что такое thead в html:

Создаёт шапку таблицы в HTML-документе. Он помогает структурировать контент на странице. Этот элемент может содержать только теги <tr> с заголовками таблицы <th>.

Атрибуты:

1. align - Определяет выравнивание текста в строке.
2. char - Выравнивание содержимого ячеек относительно заданного символа.
3. charoff - Смещение содержимого ячеек относительно указанного символа.
4. bgcolor - Цвет фона ячеек, которые расположены внутри контейнера <thead>.
5. valign - Выравнивание содержимого ячеек по вертикали.

Как прописать thead в html:

<table>
 <thead>
  <tr>
   <td> ... </td>
  </tr>
 </thead>
 <tfoot> ... </tfoot>
 <tbody> ... </tbody>
</table>

TH (тег в HTML)

Что такое th в html:

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

Атрибуты:

1. colspan - количество объединяемых ячеек по горизонтали.
2. rowspan - количество объединяемых ячеек по вертикали.
3. headers - определяет связанные ячейки. Значение атрибута должно соответствовать значению атрибута id элемента <th> связанной ячейки.
4. scope - область ячейки для тегов <th>.
5. abbr - аббревиатура или сокращение для содержимого ячейки.

Как прописать th в html:

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>25</td>
  </tr>
</table>

TFOOT (тег в HTML)

Что такое tfoot в html:

Создаёт нижнюю часть таблицы — с результатами или другой информацией. Он используется вместе с тегами <table> и <tbody> для структурирования содержимого HTML-таблицы.

Как прописать tfoot в html:

<table width="600">
   <tfoot align="center" style="background: #ffc">
    <tr>
     <td>Ячейка 1, расположенная в TFOOT</td>
     <td>Ячейка 2, расположенная в TFOOT</td> 
    </tr> 
   </tfoot>
   <tbody align="right" style="background: silver">
    <tr>
     <td>Ячейка 3, расположенная в TBODY</td>
     <td>Ячейка 4, расположенная в TBODY</td> 
    </tr> 
   </tbody>
  </table>

TEXTAREA (тег в HTML)

Что такое textarea в html:

Создаёт многострочное поле для ввода текста. Его можно использовать в формах обратной связи для ввода комментариев.

Атрибуты:

1. name - уникальное имя элемента.
2. cols - ширина поля в символах.
3. rows - высота поля в строках.
4. disabled - блокирует доступ и изменение элемента пользователем.
5. readonly - запретить ввод новых данных, но разрешить отправку на сервер.
6. required - поле обязательно для заполнения.
7. wrap - как обрабатывать переносы строк.
8. autocomplete - включает или выключает автозаполнение.
9. maxlength - максимальная длина текста.
10. minlength - минимальная длина текста.
11. placeholder - текст-подсказка для пользователей.

Как прописать textareaу в html:

<textarea id='feedback' name='feedback' rows='4' cols='50'>
Замечательный сайт,
обязательно приду к вам ещё.
</textarea>

TD (тег в HTML)

Что такое td в html:

Используется для создания ячеек таблицы, он всегда вкладывается в элемент <tr>.

Атрибуты:

1. colspan - количество объединяемых ячеек по горизонтали.
2. rowspan - количество объединяемых ячеек по вертикали.
3. headers - список id элементов, которые связаны с ячейкой.

Как прописать td в html:

<table>
  <tr>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Возраст</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
</table>

TBODY (тег в HTML)

Что такое tbody в html:

Используется для группировки основного содержимого в таблице.

Как прописать tbody в html:

<table>
 <thead> .... </thead>
 <tfoot> ... </tfoot>
 <tbody>
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>

TABLE (тег в HTML)

Что такое table в html:

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

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

1. <table> - определяет начало и конец таблицы. Всё содержимое таблицы должно находиться между <table></table>.
2. <thead> - определяет заголовок таблицы. Заголовок может содержать одну или несколько строк, в которых могут использоваться теги <th> для определения заголовков столбцов.
3. <tbody> - определяет тело таблицы. Тело содержит одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
4. <tfoot> - определяет нижний колонтитул таблицы. Колонтитул может содержать одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
5. <tr> - определяет строку таблицы. Каждая строка должна находиться между тегами <tbody>, <thead> или <tfoot>.
6. <th> - определяет заголовок столбца или строки таблицы. Используется внутри тегов <thead> и <tr>.
7. <td> - определяет содержимое ячейки таблицы. Используется внутри тегов <tbody>, <tfoot> и <tr>.
8. <caption> - определяет заголовок таблицы, который будет размещен над таблицей. Используется внутри тега <table>.

Как прописать table в html:

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка 1,1</td>
      <td>Ячейка 1,2</td>
    </tr>
    <tr>
      <td>Ячейка 2,1</td>
      <td>Ячейка 2,2</td>
    </tr>
  </tbody>
</table>