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

<div>Тег представляет собой деление или раздел в HTML — документе, он служит в качестве контейнера , который может быть использован для содержания группы , чтобы они могли быть легко стиль.

Этот стиль может быть выполнен встроенным или с помощью CSS, ссылающегося на их атрибуты class или id.

<div>some content!!!</div>

Разрывы строк

<br />Тег является хорошим примером пустого элемента, он используется для обеспечения разрыва строки внутри <p>тега. Он может быть записан как самозакрывающийся тег <br />или просто открывающий тег <br>.

<p>Hello,<br /> your Educative password has been reset.<br />Please login to resume learning!</p>

Форматирование текста

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

Strong text

<strong>This text is bold and important.</strong>

Этот текст жирный и важный

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

Emphasized Text

<em>This text is italicized for emphasis.</em>

Этот текст выделен курсивом для акцента.

Вы также можете использовать <i>тег.

Small Text

<em>This text is italicized for emphasis.</em>

Эти слова меньше, чем другие.

Large Text

<big> These words are larger than </big> the others.

Эти слова крупнее других.

Highlighted Text

<mark> This text is highlighted.</mark>

Этот текст выделен.

Strikethrough Text

<strike>This is an example of strikethrough text</strike>

Это пример зачеркнутого текста

Underlined Text

<u>This sentence is underlined.</u>

Это предложение подчеркнуто.

Superscript and Subscript Text

An equation with superscript text: X<sup>2</sup>. 

Уравнение с надстрочным текстом: X 2.

Мы также можем обозначать химическое соединение с помощью тега нижнего индекса:

CO<sub>2</sub>

CO₂

Span tag

Span tag can be used to <span style="color:red">style</span> section of a text.

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

Links

Тег HTML определяет гиперссылку для навигации. Это элемент встроенного уровня. hrefАтрибут содержит URL, который будет осуществлять навигацию.

This is <a href="url">a link</a>

Link Targets

Атрибут target используется для указания местоположения, в котором будет отображаться документ / URL. Некоторые из возможных вариантов:

_blank: открывает связанный документ в новом окне или вкладке браузера

<a href="https://bestprogrammer.ru//blog" target="_blank">link</a> 

_self: открывает ссылку в том же фрейме

<a href="https://bestprogrammer.ru/" target="_self">link </a>

_parent: открывает связанный документ в родительском фрейме

<a href="https://bestprogrammer.ru//learn" target="_parent">link </a> 

_top: открывает документ во всем окне

<a href="https://bestprogrammer.ru//blog" target="_top">link </a>

Special Links

<a href="mailto:email@example.com">Send email</a>

<a href="tel:0123492">Call 0123492</a>

Media Elements

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

Video

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

<video width=»300″ height=»240″ controls>

  <source src=»url» type=»video/mp4″>

  <source src=»alternate-url» type=»video/ogg»>

</video>

Audio

<audio controls>

  <source src=»url» type=»audio/ogg»>

  <source src=»alternate-url» type=»audio/mpeg»>

</audio>

Image

<img src=»path/to/image» alt=»alternate text» width=»480px» height=»360px»>

Lists

Есть несколько видов списков, которые мы можем создавать с помощью HTML.

Упорядоченный список

<ol> определяет упорядоченный список. По умолчанию он пронумерован. Формат нумерации можно изменить с помощью атрибута type.

1. Вода
2. Чай
3. Молоко

Неупорядоченный список

<ul> определяет неупорядоченный список. Пункты списка будут выделены.

• Рис
• Овощи
• Масло

Тип и начальные атрибуты

type Атрибут присутствует в обеих упорядоченных и неупорядоченных списках и используется в изменении нумерации и пули стиля. В startатрибут определяет, какой номер / буква / римская цифра первый элемент в упорядоченном списке должны начать свой отсчет с.

<!— Unordered List bullet types —>

<ul type=»square»>

<ul type=»disc»>

<ul type=»circle»>

<!— Ordered List numbering styles —>

<ol type=»1″> <!— Default-Case Numerals —>

<ol type=»A»> <!— Upper-Case Letters —>

<ol type=»a»> <!— Lower-Case Letters —>

<ol type=»I»> <!— Upper-Case Numerals —>

<ol type=»i»> <!— Lower-Case Numerals —>

<ol type=»1″ start=»3″> <!— numbering starts from 3 —>

<ol type=»A» start=»5″> <!— Letters starts with E —>

Таблицы и формы

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

Базовая структура таблицы

<table>

  <tr>

  <!— <th> represent a table heading, <tr> defines a table row —>

    <th>Name</th>

    <th>Age</th>

    <th>City</th>

  </tr>

  <tr>

  <!— <td> element holds table data—>

    <td>Bill Jones</td>

    <td>54</td>

    <td>Nashville</td>

  </tr>

   <tr>

    <td>Sura Keyser</td>

    <td>45</td>

    <td>Berlin</td>

  </tr>

   <tr>

    <td>Sarah Hernandez</td>

    <td>60</td>

    <td>Mexico City</td>

  </tr>

</table>

Атрибуты Cellpadding и Cellspacing

Cellpadding и Cellspacing — это <table>атрибуты, используемые для регулировки количества пустого пространства в ячейках таблицы.

<table cellspacing=»5″ cellpadding=»5″>

  <!—cellspacing attribute defines space between table cells—>

  <!— cellpadding represents the distance between cell borders and the content within a cell —>

  <tr>

    <th>Name</th>

    <th>Age</th>

    <th>City</th>

  </tr>

  <tr>

    <td>Bill Jones</td>

    <td>54</td>

    <td>Nashville</td>

  </tr>

   <tr>

    <td>Sura Keyser</td>

    <td>45</td>

    <td>Berlin</td>

  </tr>

   <tr>

    <td>Sarah Hernandez</td>

    <td>60</td>

    <td>Mexico City</td>

  </tr>

</table>