Разметка текста

Разметка
текста

Лекция №2.2

Виды списков

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

Элемент
Элемент
Элемент

Упорядоченный

Первый элемент
Второй элемент
Третий элемент

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

Термин: Определение
Термин: Определение

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

Для его вставки на страницу используется тег <ul> (unordered list). Этот тег является своеобразной обёрткой, указывающей браузеру на начало и конец списка.

Сами пункты списка должны верстаться при помощи тега <li>(list item). Таким образом, полностью список верстается с использованием обоих тегов.

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

            <ul>
              <li>Покормить кота</li>
              <li>Продолжать работать</li>
            </ul>

Покормить кота
Продолжать работать

Теги внутри списка

        <ul>
        <li>Покормить кота</li>
          <li> <!-- открывающий тег элемента списка -->
        		<p>Продолжать работать</p>
        		<p>Или</p>
        		<p>Пойти погулять</p>
        	</li> <!-- закрывающий тег элемента списка -->
        </ul>

Покормить кота
Продолжать работать

Или

Пойти погулять

Виды маркеров

Атрибут type является устаревшим!

            <ul type="   ">
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
            </ul>

Круги
Окружности
Квадраты
Без маркера

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

В том случае, если порядок элементов в списке важен, стоит использовать тег <ol>(ordered list).

            <ol>
              <li>Avatar</li>
              <li>Avengers: Endgame</li>
              <li>Avengers: Infinity War</li>
            </ol>

Avatar
Avengers: Endgame
Avengers: Infinity War

Тип нумерации

a для строчных букв;
A для заглавных букв;
i для строчной Римской нумерации;
I для заглавной Римской нумерации;
1 для цифр (по умолчанию).

Строчные буквы
Заглавные буквы
Строчные Римские
Заглавные Римские
Цифры

Управление порядком элементов

            <ol start="8" type="i">
                <li>Восьмой элемент</li>
                <li>Девятый элемент</li>
                <li>Десятый элемент</li>
            </ol>

Восьмой элемент
Девятый элемент
Десятый элемент

Обратный порядок элементов

            <ol reversed >
                <li>Третий элемент</li>
                <li>Второй элемент</li>
                <li>Первый элемент</li>
            </ol>

Третий элемент
Второй элемент
Первый элемент

Вложенные списки

            <ol>
            <li>Первая часть
                <ul>
                  <li>Глава первая</li>
                  <li>Глава вторая</li>
                </ul>
              </li>
              <li>Вторая часть</li>
            </ol>

Первая часть
- Глава первая
- Глава вторая
Вторая часть

Список описаний

Создаётся с помощью трёх тегов:

<dl> (сокращение от «description list») обозначает сам список описаний;
<dt> (сокращение от «description term») обозначает термин;
<dd> (сокращение от «description definition») обозначает описание или определение.

Один термин — одно определение

        <dl>
          <dt>Blink</dt>
          <dd>движок в браузерах Chrome, Edge, Opera</dd>
          <dt>Gecko</dt>
          <dd>движок в браузере Firefox</dd>
          <dt>WebKit</dt>
          <dd>движок в браузере Apple Safari</dd>
        </dl>

Blink: движок в браузерах Chrome, Edge, Opera
Gecko: движок в браузере Firefox
WebKit: движок в браузере Apple Safari

Несколько терминов с общим определением

        <dl>
          <dt>Firefox</dt>
          <dt>Mozilla Firefox</dt>
          <dt>FF</dt>
          <dd>
            свободный браузер на движке Gecko, разработкой и  
            распространением которого занимается Mozilla Corporation 
          </dd>
        </dl>

Firefox
Mozilla Firefox
FF: свободный браузер на движке Gecko, разработкой и распространением которого занимается Mozilla Corporation

Термин с несколькими определениями

        <dl>
        <dt>Chrome</dt>
          <dd>Браузер, разрабатываемый компанией Google.</dd>
          <dd>Элемент 6-й группы периода периодической системы.</dd>
        </dl>

Chrome: Браузер, разрабатываемый компанией Google.; Элемент 6-й группы 4-го периода периодической системы.

Отображение метаданных (пар «ключ-значение»)

        <dl>
          <dt>Имя</dt>
        <dd>Гарри Джеймс Поттер</dd>
          <dt>День рождения</dt>
          <dd>31 июля 1980 года</dd>
          <dt>Особые приметы</dt>
          <dd>носит круглые очки; шрам в виде молнии на лбу.</dd>
        </dl>

Имя: Гарри Джеймс Поттер
День рождения: 31 июля 1980 года
Особые приметы: носит круглые очки; шрам в виде молнии на лбу.

Важен каждый символ

Преформатированный текст

С помощью тега <pre> (сокращение от «preformatted text») можно заставить браузер отображать текст из HTML-документа без изменений.

Преформатированный текст

        <pre>
          user_input = input('Как дела?')
          if user_input == 'Хорошо':
            print('И у меня')
          else:
            print('А у меня хорошо')
        </pre>

Преформатированный текст

                      user_input = input('Как дела?')
          if user_input == 'Хорошо':
            print('И у меня')
          else:
            print('А у меня хорошо')

Символы-мнемоники

Мнемоники — это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;).

Например, знак меньше на страницу можно вставить мнемоникой < (less than), а знак больше мнемоникой > (greater than).

Символы-мнемоники

Вставка кода

Для обозначения фрагментов кода есть специальный тег – <code>.

        <code>Если идет дождь –&gt; возьми зонт</code>

Обычно браузеры отображают текст внутри <code> моноширинным шрифтом.

Если идет дождь –> возьми зонт

Комбинирование <pre> и <code>

        <pre><code>
        if (a > b) {              // Пример кода      
          console.log('Hello!');  // на языке JavaScript 
        }
        </code></pre>

Комбинирование <pre> и <code>


if (a > b) {                // Пример кода
    console.log('Hello!');  // на языке JavaScript
}

Встроенная цитата

        <p>
        	Я сейчас очень зол, и как говорил Шелдон Купер:
        	<q>
        		В мире не хватит ромашкового чая, 
        		чтобы успокоить ярость в моей груди!
        	</q>
        </p>

Встроенная цитата

Я сейчас очень зол, и как говорил Шелдон Купер: В мире не хватит ромашкового чая, чтобы успокоить ярость в моей груди!

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

Атрибут cite

        <p>
        	Я сейчас очень зол, и как говорил Шелдон Купер:
        	<q  cite="https://www.netflix.com/ru-en/title/70143830">
        		В мире не хватит ромашкового чая, 
        		чтобы успокоить ярость в моей груди!
        	</q>
        </p>

Самостоятельный тег <cite>

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

        <p>Какой доктор ваш любимый доктор
           (в сериале <cite>Доктор Кто</cite>)?</p>

Какой доктор ваш любимый (в сериале Доктор Кто)?

Цитата на другом языке

Можно у тега <q> указать атрибут lang со значением языка цитаты:

        <p>
          В Японии принято обозначать звук, произносимый кошкой как
          <q lang="ja-latn">nyan</q>
        </p>

Цитата на другом языке

В Японии принято обозначать звук, произносимый кошкой как nyan

Кавычки в этом примере отличаются от стандартных, они соответствуют тем кавычкам, которые ставятся в
латинизированном японском тексте.

Отдельная цитата

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

Отдельная цитата

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

Отдельная цитата

        <blockquote>
          <p>
            Я никогда не понимал эту необходимость делить свою жизнь 
        		с кем-то еще...
          </p>
          <footer>
        		— Шелдон Купер, 
        		<cite>Речь на свадьбе Говарда и Бернадетт</cite>
          </footer>
        </blockquote>

Отдельная цитата

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

— Шелдон Купер, Речь на свадьбе Говарда и Бернадетт

Продвинутая верстка кода

Существует еще несколько элементов для маркировки компьютерного кода с использованием HTML:

<var> - для маркировки имён переменных;
<kbd> - для маркировки вывода компьютерной программы, а также ввода клавиатуры (и других типов), введённого в компьютер;
<samp> - для маркировки вывода компьютерной программы.

        var para = document.querySelector('p');
para.onclick = function() {
  alert('Owww, stop poking me!');
}

Не стоит использовать такие теги, как  и <center>.

В приведенном выше примере кода на JavaScript, para представляет абзац.

Выделите весь текст с помощью сочетания клавиш Ctrl/Cmd + A.

        $ ping mozilla.org

        PING mozilla.org (63.245.215.20): 56 data bytes
        64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms

Верстка стихов

Варианты:

 – идеально подходит для выделения строфы, а нужно добавить переносы внутрь строф;
<pre> – подходит, но нужно сохранить только переносы строк;
  (сокращение от «line break») – идеальный вариант.

        <p>                           
            Муха села на варенье <br> 
            Вот и всё стихотворенье...
        </p>

Муха села на варенье
Вот и всё стихотворенье...

Верстка текста с формулами

 - для маленького текста сверху
 - для маленького текста снизу

        <p>Я просыпаюсь в 6<sup>35</sup> утра.</p>
        <p>Химическая формула кофеина: 
             C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
        <p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p>

Верстка текста с формулами

Я просыпаюсь в 6³⁵ утра.

Химическая формула кофеина: C₈H₁₀N₄O₂.

Если x² равно 9, x должен равняться 3 или -3.

Аббревиатуры и сокращения

Используется тег <abbr> и обеспечивает расшифровку с помощью атрибута title.

        <p>Мы используем 
           <abbr title="Hypertext Markup Language">HTML</abbr>
           для структурирования наших веб-документов.</p>

Аббревиатуры и сокращения

Мы используем HTML для структурирования наших веб-документов.

Я думаю, Почт. Грин сделал это на кухне с бензопилой.

Дата и время

Для людей:

20/01/20
01/20/20

20 Января 2020
20-ое Января 2020

20 янв. 2к20
2020年1月20日

Для компьютера:

<time datetime="2020-01-20">20 Января 2020</time>

Выделение изменений

Тег <del> выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается.

Тег <ins> выделяет текст, который был добавлен в новой версии документа. В браузере этот текст подчёркивается.

Оба тега имеют атрибут datetime. C его помощью можно указать, когда была внесена та или иная правка.

Выделение изменений

        <ul>
          <li>Покормить кота</li>
          <li><del datetime="2009-10-11T01:25-07:00">Погулять</del></li>
          <li><del datetime="2009-10-10T23:38-07:00">Поспать</del></li>
          <li><ins>Купить продукты на следующую неделю.</ins></li>
        </ul>

Выделение изменений

Покормить кота
~~Погулять~~
~~Поспать~~
Купить продукты на следующую неделю.

Акцентирование внимания

Тег  (сокращение от «emphasis») определяет текст, на который сделан особый акцент, меняющий смысл предложения.

        Казнить нельзя, <em>помиловать</em>!

Казнить нельзя, помиловать!

Акцентирование внимания

Тег  (сокращение от «italic») применяется для обозначения текста, который отличается от окружающего текста, но не является более важным.

        Он взглянул в окно и подумал — <i>такого просто не может быть</i>!

Он взглянул в окно и подумал — такого просто не может быть!

Важность и выделение

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

        <strong>Внимание!</strong> Это место опасно. 
        <strong>Вы можете упасть в пропасть</strong>,
                если подойдёте близко к краю.

Важность и выделение

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

        Вы входите в небольшую комнату. 
        Ваш <b>меч</b> загорается ярче. 
        <b>Крыса</b> стремительно пробегает вдоль стены.

Скринридеры и выделение

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

То же самое касается тегов  и . Тег  «читалка» будет выделять интонацией.

Контейнеры и стилизация

Теги <div> (сокращение от «division») и  отлично подходят для визуальной группировки других элементов.

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

Контейнеры и стилизация

        <article>
          <div class="highlight">
            <p>Мы два красивых выделенных абзаца.</p>
            <p>С жёлтеньким фоном!</p>
          </div>
          <p>Текст, в котором <span>синяя фраза</span>.</p>
        </article>