В прошлом видео уроке мы научились удалять и добавлять новую информацию в новую версию HTML-документа, при этом сообщая об этом поисковым системам и выделяя визуально, чтобы посетители также могли видеть изменения. Для этого, Мы использовали теги del и ins.
В этом видео уроке мы продолжаем тему форматирования текста в HTML-документе. Мы познакомимся с двумя HTML-тегами, которые указывают верхний и нижний индекс текста.
HTML-тег sup — верхний индекс текста в HTML.
HTML-тег предназначен для указания верхнего индекса текста в HTML. В некоторых тематиках сайтов этот тег будет просто незаменим. Например, если у Вас есть, или планируется, сайт связанный с какими-либо формулами, математическими или химическими. Или, ели есть сайт строительной тематики, то тег будет очень полезен и поможет при оформлении статей, при написании формул или каких-либо величин, например, квадратных метров в строительной тематике.
Но если Ваш сайт не относится к перечисленным темам, это не значит, что тег не пригодится. Достаточно проявить фантазию и смекалку и найти применение этому элементу.
HTML-тег sub — нижний индекс текста в HTML.
Следующий Видео Урок посвящен еще двум тегам, которые в некоторых ситуациях могут быть просто незаменимы. При чем они способны не только форматировать текст, например, в статье, но и при указании различной информации на сайте во время верстки страниц. Один из тегов осуществляет перенос в HTML, а второй рисует горизонтальную линию.
Язык HTML Верхний и нижний индексы. Характеристики шрифта.
Верхний и нижний индексы Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения, индекс называется, соответственно, верхним или нижним. Они активно применяются для написания формул в математике, физике, химии и для обозначения единиц измерения.
HTML предлагает два тега для создания индекса: — верхний индекс и — индекс нижний. Текст, помещенный в один из этих тэгов, обозначается меньшим размером, чем базовый текст и смещается относительно горизонтали. Пример:
Практическое задание: Создать HTML-документ, содержащий 5-10 химических формул (подобрать фоны, графику, можно использовать материал с карточек).
Тег Тег нужен для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Параметры:
П ервая буква этого предложения написана шрифтом Arial, выделена красным цветом и увеличена в размерах.
П ервая буква этого предложения написана шрифтом Arial, выделена красным цветом и увеличена в размерах.
Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
Если на сайте используется кодировка UTF-8, то символы можно без проблем вставлять в HTML прямо копируя их из колонки «Вид» или набирая их номер с помощью цифровой клавиатуры, удерживая клавишу Alt (может работать не во всех операционных системах).
Надстрочные и подстрочные символы без HTML
Если где-то нельзя использовать HTML-теги, но нужны подстрочные или надстрочные символы (т. е. нижние или верхние индексы), то можно скопировать их отсюда:
Если же HTML-разрешён, то просто используем теги (нижний индекс) и (верхний индекс).
Например при значении middle центр элемента по вертикали выравнивается по базовой линии родительского элемента + половина высоты родительского элемента.
, то есть текст. Центр пингвина выравнивается по центру текста: по базовой линии текста + половина его высоты.
Верхний и нижний индекс в CSS
Значения super и sub свойства vertical-align используются для написания верхнего и нижнего индексов. При этом размер шрифта не меняется.
: 36px ; «> 2 : super ; «> 2 =4 и H : sub ; «> 2 O
Числовые значения свойства vertical-align
Кроме этого, свойство vertical-align принимает числовые значения в единицах допустимых в CSS (подробнее здесь. ) как положительные, так и отрицательные. В первом случае смещение элемента направлено вверх, а во втором вниз относительно базовой линии родительского элемента.
: 22px ; color : #0099FF ; «> Все : 5px ; «> Выше! : 10px ; «> И Выше! : 15px ; «> И Выше!
Все Выше! И Выше! И Выше!
Вертикальное выравнивание в ячейках таблицы
Подробно с подобным использованием свойства vertical-align Вы можете ознакомиться на странице с его описанием. А сейчас приведем простой пример.
