Какой тип заголовков браузер по умолчанию выводит самым крупным шрифтом

Обновлено: 07.07.2024

Содержание

В главе использованы материалы [XHTML ].

Когда текст изображается в браузере, он выводится используемым по умолчанию типом, размером, стилем и цветом шрифта. Большинство браузеров используют тип шрифта Times New Roman, размером около 12 пунктов, и черный цвет. Однако некоторые параметры таблицы стилей позволяют изменять эти настройки, чтобы придать страницам другой вид. Подробнее об этом рассказано в данной лекции

26.1. Параметры шрифта

При работе с текстовыми шрифтами необходимо учитывать, что тип шрифта, который выводится в браузере, ограничен набором шрифтов, установленных в компьютере. Поэтому необходимо помнить о том, какие типы компьютеров используют посетители страницы и какие типы шрифтов могут быть у них установлены. Лучше придерживаться распространенных типов, если только предполагаемая аудитория Web не известна заранее. Следующие виды шрифтов, типичные на ПК на основе Windows, представлены здесь размером 12 пунктов.

Рис . 4.1. Типичные виды шрифтов ПК (arial, arial narrow, comic sans ms, courier new, georgia, impact, tahoma, times new roman, verdana)

26.1.1. Стили шрифта

Существует шесть параметров стиля шрифта, которые можно использовать для создания разнообразия, привлекательности или выделения в тексте на странице Web. Эти настройки свойств перечислены в таблице 4.1 .

Таблица 4.1. Свойства стиля оформления шрифта

Может быть именем любого системного шрифта или обобщенным именем serif, sans-serif, cursive, monospace. Можно определять несколько значений, в порядке предпочтения, разделяются запятой. Используется первый найденный шрифт font-family:arial,verdana,sans-serif .

Размер шрифта, определяемый обычно в пунктах ( pt ). Если единицы измерения не заданы, используются пиксели ( px )

Стиль шрифта определяется как normal, italic, oblique

Насыщенность шрифта определяется как lighter, normal, bold, bolder или значением от 100 (самый светлый) до 900 (самый насыщенный). Не все числовые значения в диапазоне распознаются браузерами.

Вариант шрифта определяется как normal small-caps

Сокращенный способ определения множества стилей шрифта с помощью задания в строгом порядке значений, разделенных пробелами: font-style, font-variant, font-weight, font-size, font-family . Если значения не задаются, они могут отсутствовать в списке: style="font:italic bold 10pt times new roman"

Любые комбинации этих стилей можно применять для любого текста на странице. Они могут быть связаны с тегом <body> для использования в документе в целом. Их можно кодировать для селектора p для применения ко всем параграфам. Они могут кодироваться как классы и работать с помощью тегов <span> , окружающих буквы, слова, фразы, предложения или другие выбранные строки текста в параграфе. Их можно применять как классы с помощью тегов <div> для блоков текста.

Свойство font-family задействуют для изменения настройки браузера по умолчанию, т.е. изменения шрифта Times New Roman. При использовании для вывода специальных стилей шрифта необычного семейства шрифтов, которое может не существовать на компьютере каждого пользователя, необходимо предоставить другие, более распространенные виды шрифтов, из которых может выбирать компьютер. Свойство font-family задает эти варианты в разделенном запятыми списке. Браузер ищет в компьютере первый подходящий вид шрифта и применяет его для вывода текста. Например, следующая таблица стилей задает стандартный стиль шрифта для страницы.

Пример 26.1. Выбор значений для семейства шрифтов

Сначала браузер пытается использовать шрифт Helvetica . Если он отсутствует в системе пользователя, то браузер ищет шрифт Verdana . Если он также отсутствует, то браузер применяет любой доступный встроенный тип шрифта sans-serif . Обобщенные имена шрифтов serif , sans-serif , и monospace всегда будут находить тип шрифта, который похож на Times New Roman , Arial , и Courier , соответственно.

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

Свойство font-style обычно определяет выбор между стилем normal и italic ; oblique обычно выводится так же, как italic . По умолчанию браузер использует стиль normal .

Свойство font-weight обычно применяется для выбора между нормальным ( normal ) и полужирным ( bold ) шрифтом. Значения для более светлого и более насыщенного шрифтов, как правило, в браузере не различаются, как не различаются и все числовые значения. Значения между 100 и 500 задают обычную (normal) насыщенность, а значения между 600 и 900 определяют полужирные символы ( bold ).

Стиль font-variant со значением small-caps переводит все буквы в верхний регистр со слегка меньшим размером шрифта. Определение normal возвращает вывод текста к стандартному виду.

Объявления стиля шрифта могут использовать настройки отдельных свойств, или значения могут объединяться в одном свойстве font как сокращенном способе представления объявлений. То есть, набор объявлений таблицы стилей можно задать, как показано на листинге 4.2 .

Пример 26.2. Настройка шрифта с использованием отдельных свойств оформления

или как показано на листинге 4.3 ,

Пример 26.3. Настройка шрифта с использованием одного свойства font

со значениями, разделенными пробелами. При использовании свойства font не требуется определять все значения, но они должны быть представлены в строгом порядке: font-style font-variant font-weight font-size font-family . Типичное объявление может включать, например, только значения font-size и font-family: .

Следующий код применяет встроенную таблицу стилей с различными комбинациями настройки шрифта текста. В этом примере все значения оформления стиля используют сокращенное свойство font . Вывод в браузере этой страницы показан на рисунке 4.2 .

Пример 26.4. Настройка шрифта с использованием одного свойства font

Рис. 4.2. Приложение стилей шрифта

Оформление тега <body> задает формат по умолчанию для всей страницы. После этого применяются различные классы стилей для отдельных частей текста.

26.1.2. Вложенные стили

Приведенная выше страница включает вложенные таблицы стилей, где внутренняя настройка стиля наследует и затем временно переопределяет, или изменяет, настройки внешнего стиля. Внешний стиль <body> , например, задает вывод страницы шрифтом типа Arial размером 12 пунктов с полями страницы 20 пикселей и отступом параграфа 25 пикселей. Эти настройки остаются в силе, пока не будут переопределены, например, вложенными стилями <div> , которые изменяют поля для двух вложенных параграфов на 25 пикселей и задают отступ параграфа как 0 пикселей. Эти стили разделов переопределяются далее в одном из вложенных параграфов, в котором стиль шрифта изменяется на Comic Sans MS 13 пунктов, сохраняя поля и отступ из раздела. В этом параграфе теги <span> используются для переопределения стиля параграфа для отдельных строк текста, которые будут иметь отличающийся тип шрифта и раз меры. Таблицы стилей могут вкладываться друг в друга, так что стили каскадно спускаются на любое количество уровней. Окончание действия настроек стиля происходит в обратном порядке. Этот момент иллюстрирует следующий код, показывающий структуру со сдвигами тегов <span> , которые применяют, а затем удаляют увеличивающиеся размеры шрифта с помощью линейных таблиц стилей.

Пример 26.5. Вложенные настройки стиля, использующие теги <span>

Рис. 4.3. Применение вложенных стилей шрифта с помощью тегов <span>

Хотя такое количество вложенных стилей вряд ли будут часто использоваться, суть вопроса состоит в том, что каждый закрывающий тег </span> , начиная с самого внутреннего, завершает действие связанного с ним стиля, что приводит к возвращению действия следующего внешнего стиля, пока не будет отменено действие всех вложенных стилей. Не забывайте только правильно поддерживать пары открывающих и закрывающих тегов оформления.

Приведенный выше пример еще раз подчеркивает тот факт, что теги <span> не имеют своих собственных характеристик форматирования. Хотя они записаны на отдельных строках, чтобы показать вложенную структуру примера, они не создают переноса строк или пробелов при выводе в браузере. Результат вывода такой же, как если бы код был записан в виде следующей непрерывной строки.

Пример 26.6. Другая запись кода задания вложенных стилей

В противоположность этому, тег <div> решает такие же задачи оформления, но, кроме того, создает перенос строки. Следующий код оформляет предыдущую строку текста с помощью тегов <div> и создает вывод, показанный на рисунке 4.4 .

Пример 26.7. Вложенные настройки стилей, использующие теги <div>

Рис. 4.4. Применение вложенного оформления шрифта с помощью тегов <div>

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

26.1.3. Исключенный тег <font>

Хотя и не используемый в XHTML, но распространенный способ задания оформления шрифта состоит в применении тега <font> . Этот тег, подобно тегу <span> , задает для ограничиваемого текста тип шрифта, размер, и цвет. Общая форма тега <font> и его атрибуты показаны ниже.

Атрибут face определяет разделенный запятыми список до трех типов шрифта, которые могут использоваться для текста, заключенного внутри тега <font> . Размеры шрифта можно задавать или изменять с помощью атрибута size . Значение этого атрибута может изменяться от 1 до 7 , от наименьшего до наибольшего. Если размер не определен, то по умолчанию применяется системный размер шрифта 3, который соответствует примерно размеру шрифта 12 пунктов. Отметим, что размер шрифта определяется не в пунктах. Размер шрифта может изменяться относительно текущего размера с помощью модификаторов "+" или "-" . Поэтому значение атрибута "+1" задает размер шрифта на один размер больше текущего значения.

Цвет шрифта можно задавать с помощью атрибута color . Значение цвета задается именем цвета или шестнадцатеричным значением. Эти способы будут рассмотрены в дальнейшем.

26.1.4. Свойства текста

Предыдущие настройки шрифта могут объединяться с другими свойствами таблицы стилей, чтобы создать дополнительное форматирование строк текста. Следующая таблица перечисляет свойства, которые могут разнообразить вывод текста. Некоторые из этих свойств относятся к оформлению самого шрифта; другие относятся к структурной организации текста внутри контейнера.

Таблица 4.2. Свойства оформления текста

Задает горизонтальный интервал между буквами текста элемента. Значениями являются normal, npx, auto.

Задает высоту строки текста элемента. Значение в пикселях или пунктах является реальной высотой; число или процент является коэффициентом для текущего размера шрифта. normal, npx, npt, n, n%.

Задает горизонтальное выравнивание текста в элементе. Значениями являются left, center, right, justify.

Задает дополнительное оформление текста внутри элемента. Значениями являются none, line-through, overline, underline.

Задает отступ текста внутри элемента. Значениями являются npx n%

Задает использование прописных и строчных букв в элементе. Значениями являются none, capitalize, lowercase, uppercase.

Задает вертикальное выравнивание содержимого элемента. Значениями являются bottom, top, baseline, middle, sub, super, text-bottom, text-top.

Задает величину интервала между словами в элементе. Значениями являются npx, normal.

Мы уже знакомы со свойствами text-align и text-indent . Первое из них управляет выравниванием отдельных строк текста в блоке текста; второе задает величину отступа в начале первой строки текста.

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

Величина вертикального интервала в текстовом блоке задается свойством line-height . Хотя для измерения можно использовать пиксели или пункты, числовое значение лучше соответствует знакомым настройкам. Оно является коэффициентом текущего размера шрифта; поэтому объявление line-height:1.5 соответствует интервалу в полторы строки, а line-height:2 соответствует двойному интервалу. Отметим, что дробные значения являются допустимыми. Поэтому задание line-height:.8 сужает интервал между строками до 80% обычного межстрочного интервала.

Существует два свойства текста, которые лучше считать свойствами шрифта, так как они влияют на внешний вид символов. Свойство text-decoration прочерчивает линию над символами ( overline ), под символами ( underline ) или через символы ( line-through ). Свойство text-transform преобразует текст в символы верхнего регистра ( uppercase ), символы нижнего регистра ( lowercase ) или делает первые буквы слов заглавными ( capitalize ).

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

26.1.5. Применение свойств текста

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

Рис. 4.5. Использование оформления для создания отчета

Большая часть оформления находится во встроенной таблице стилей, определяющей классы стиля, которые применяются тегами <span> и <div> . Линейные таблицы стилей используются в одном определенном разделе страницы для одноразовых стилей, которые не применяются в других разделах документа. Используемый по умолчанию формат страницы задается селектором тега <body> : полуторный ( 1 1/2 ) межстрочный интервал, отступ первой строки параграфа и выравнивание текста по ширине.

Пример 26.8. Код создания отчета

Уместен, вероятно, комментарий относительно воспроизведенного здесь следующего раздела вывода областей <div> и <span> .

Пример 26.9. Использование span внутри div

По умолчанию тег <div> расширяет ширину страницы, охватывая три блока текста. Являясь блочным, тег <div> создает также перенос строки, чтобы отделить свое содержимое от окружающего текста.

Пример 26.10. Код вложения span в div

Тег <span> является линейным тегом, не задающим перенос строки или дополнительные пустые строки перед или после тега. Поэтому несколько тегов <span> , закодированные один за другим, выводятся браузером на одной строке. Хотя слова и числа внутри тегов <span> выводятся на разных строках, содержимое самих тегов появляется рядом на одной строке внутри окружающего тега <div> .

В этом примере теги <span> задают также фиксированную ширину и различное выравнивание, чтобы равномерно распределить свое содержимое. Это пример использования свойства width, которое применялось ранее для задания размеров горизонтальных линеек и графических изображений, для определения точных размеров блока текста. Другие примеры определения размеров блоков текста будут представлены далее.

Еще одно замечание относительно тегов <span> : тег не может появиться в строке сам по себе. То есть, тег <span> должен быть ограничен блочным тегом, таким, как тег <p> или <div> . Обратите внимание на код, создающий разделительную линию для сноски внизу предыдущего отчета.

Пример 26.11. Вложение тега <span> в блочный тег

Если этот тег <span> будет закодирован не внутри своего контейнерного тега <div> , то он не пройдет проверку (валидацию) XHTML 1.1, хотя и может выводиться браузером правильно.

26.1.6. Использование отрицательных значений

При использовании размеров в пикселях часто необходимо использовать отрицательные значения, чтобы добиться желательного результаты. Параграф, показанный на рисунке 4.6 , применяет отступ первой строки текста в -20px , чтобы создать "выступающий" формат параграфа, часто используемый в отчетах для библиографических записей.

Рис. 4.6. Использование оформления текста для создания библиографических записей

Как показано на листинге 4.11 , оформление задается окружающим тегом <div> , который использует класс стиля .biblio для своих параграфов. Левое поле для всех параграфов задается равным 20px . Такая настройка смещает весь параграф, так что задание смещения в -20px смещает первую строку влево до края поля.

Пример 26.12. Код для создания выступающих параграфов

26.1.7. Промежутки между буквами и словами

Вспомните, что свойства letter-spacing и word-spacing могут принимать как положительные, так и отрицательные значения. Строки на рисунке 4.10 заданы с различными значениями промежутков между буквами и словами для демонстрации результатов.

Рис. 4.7. Положительные и отрицательные интервалы между буквами и словами

26.1.8. Теги стиля шрифта

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

26.1.8.1.

26.1.8.1.1. Теги физических стилей

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

Помимо абзацев, большой текст для удобства чтения и поиска в нем нужного фрагмента обычно делят на более крупные части: параграфы, главы, разделы. HTML не предоставляет средств для такого структурирования текста. Но он позволяет создать заголовки, которые делят текст на части, по крайней мере, визуально. Как в обычной "бумажной" книге.

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

- Заголовок первого уровня (1) открывает самую крупную часть текста. Как правило, это заголовок всей Web-страницы. Web-обозреватель выводит заголовок первого уровня самым большим шрифтом.

- Заголовок второго уровня (2) открывает более мелкую часть текста. Обычно это большой раздел. Web-обозреватель выводит заголовок второго уровня меньшим шрифтом, чем заголовок первого уровня.

- Заголовок третьего уровня (3) открывает еще более мелкую часть текста; обычно главу в разделе. Web-обозреватель выводит такой заголовок еще меньшим шрифтом.

- Заголовки четвертого, пятого и шестого уровней (4 6) открывают отдельные параграфы, крупные, более мелкие и самые мелкие соответственно. Web-обозреватель выводит заголовки четвертого и пятого уровня еще меньшим шрифтом, а заголовок шестого уровня — тем же шрифтом, что и обычные абзацы, только полужирным.

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

Для создания заголовка HTML предоставляет парный тег <Hn>, где n — уровень заголовка. Содержимое этого тега станет текстом заголовка (листинг 2.2).

Заголовок также относится к блочным элементам Web-страницы. При его выводе на экран Web-обозреватель следует тем же правилам, что и для абзаца.

Заголовки — это то, чего не хватает нашей Web-страничке index.htm. Давайте их добавим (листинг 2.3).

Мы просто заменили теги <P> в соответствующих фрагментах HTML-кода на теги <H1> и <H2>. Теперь можем открыть Web-страницу в Web-обозревателе и посмотреть на результат.

Списки

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

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

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

Любой список в HTML создается в два этапа. Сначала пишут строки, которые станут пунктами списка, и каждую из этих строк помещают внутрь парного тега <LI>. Затем все эти пункты помещают внутрь парного тега <UL> (если создается маркированный список) или <OL> (при создании нумерованного списка) — эти теги определяют сам список (листинг 2.4).

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

Сначала во "внешнем" списке (в который должен быть помещен вложенный) отыскивают пункт, после которого должен находиться вложенный список. Затем HTML-код, создающий вложенный список, помещают в разрыв между текстом этого пункта и его закрывающим тегом </LI>. Если же вложенный спи-сок должен помещаться в начале "внешнего" списка, его следует вставить между открывающим тегом <LI> первого пункта "внешнего" списка и его текстом. Что, впрочем, логично.

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

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

Еще HTML позволяет создать так называемый список определений, представляющий собой перечень терминов и их разъяснений. Такой список создают с помощью парного тега <DL>. Внутри него помещают пары "термин — разъяснение", причем термины заключают в парный тег <DT>, а разъяснения — в парный тег <DD> (листинг 2.6).

Осталось сказать, что списки и их пункты относятся к блочным элементам Web-страницы, и при их выводе на экран Web-обозреватель руководствуется теми же правилами, что и при выводе абзацев и заголовков.

На нашей Web-странице есть несколько абзацев, перечисляющих основные возможности HTML. Превратим их в маркированный список (листинг 2.7).

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

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

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

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

- Эти теги относятся к группе логического форматирования: Abbr Acronym Code Em Kbd Q Samp Strong

Параграфы в HTML - Перенос текста

Важнейшим тегом физического форматирования текста является тег <p> , который предназначен для разбивки текста на параграфы.

Каждый тег <p> создает новый параграф. При этом текст начинается с новой строки, и между параграфами образуется промежуток.

Атрибут align тега <p> позволяет позиционировать абзац по горизонтали, размещая его слева (align= "left" ), справа ( align= "right" ), располагая по центру ( align= "center" ) или выравнивая по ширине ( align= "justify" ) окна браузера или родительского элемента.

Текст после тега <br> также начинается с новой строки. Но тег <br> осуществляет лишь перенос строк - он не образует промежутка между ними и его можно использовать внутри тега <p> .

Тег <nobr> наоборот запрещает перенос строк. Если длина строки превысит ширину окна браузера, то появится горизонтальная полоса прокрутки. В свою очередь тег <wbr> разрешает перенос строки внутри тега <nobr> .

<p align= "center" > Текст разбит на параграфы . </p>
<p> При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег <br> используется для переноса строки. </p>

Текст разбит на параграфы.

При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.

Заголовки в HTML. Размер текста

Заголовки в HTML представлены шестью тегами <h1>. <h6> . Каждый из них обозначает заголовок определенного уровня (веса или значимости).

Тегом <h1> выделяют наиболее значимые части документа (тема страницы или статьи), а текст заключенный в него - самый крупный.

Тегами <h2> и <h3> можно выделить подтемы, крупные разделы - как правило их немного на страницы. Текст в таких заголовках уже не такой крупный, как в заголовках высшего уровня.

И так далее, по значимости и иерархии, при помощи тегов <h1>. <h6> , выделяют заголовки различных уровней.

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

Теги <h1>. <h6> , как и тег <p> имеют атрибут align , позволяющий выравнивать заголовок по горизонтали.

Использование закрывающего тега для всех заголовков HTML, является обязательным условием их применения!

<h1> Заголовок 1-го уровня </h1>
<h2 align= "center" > Заголовок 2-го уровня </h2>
<h3 align= "right" > Заголовок 3-го уровня </h3>
<h4 align= "center" > Заголовок 4-го уровня </h4>
<h5 align= "right" > Заголовок 5-го уровня </h5>
<h6> Заголовок 6-го уровня - мелкий шрифт! </h6>

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня

Заголовок 6-го уровня - мелкий шрифт!

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

Размер текста продолжение.

Теги <big> и <small> тоже позволяют изменить размер текста: они соответственно увеличивают и уменьшают текущий размера шрифта на одну единицу.

В HTML размер шрифта задается в условных единицах от 1 до 7 . По умолчанию текст имеет средний размер шрифта, относящийся к 3 условной единице.

Теги <sup> и <sub> предназначены для отображения текста в виде верхнего и нижнего индекса соответственно. При этом размер шрифта уменьшается на единицу.

И наконец рассмотрим тег <font> . Он предназначен не только для изменения размера текста, но и для задания таких его характеристик как цвет и указания семейства шрифтов.

Атрибут size тега <font> задает размер шрифта в условных единицах от 1 до 7 , атрибут color предназначен для задания цвета (Цвет можно задать двумя способами (подробнее здесь. )), и атрибут face определяет семейство шрифтов (подробнее здесь. ).

<p> <big> Увеличение </big> и <small> уменьшение </small> текущего размера шрифта на одну условную единицу. </p>

<p> Индекс <sup> верхний. </sup> и Индекс <sub> нижний. </sub> в HTML. </p>

<p> Изменим характеристики текущего шрифта <font color= "red" size= "+2" face= "Arial, Helvetica, sans-serif" > при помощи тега font </font></p>

Увеличение и уменьшение текущего размера шрифта на одну условную единицу.

Индекс верхний. и Индекс_{нижний.} в HTML.

Изменим характеристики текущего шрифта при помощи тега font

Тег <basefont> предназначен для задания тех же свойств текста, что и тег <font> . Отличие в том, что тег <basefont> может располагаться как в теле, так и в голове документа. При этом он определяет свойства текста для всего документа, за исключением текста, расположенного в теге <font> .

Тег <basefont> поддерживается только браузером Internet Explorer. Его использование не рекомендовано. Впрочем как не рекомендуется и применение тега <font> !

Изучайте CSS и работайте со стилями!

Гарнитура шрифта

По начертанию шрифт может отличаться постановкой - прямой или курсив, и насыщенностью (плотностью) - светлый и жирный.

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

Изменим начертание шрифта: <em> его постановку </em> и <strong > насыщенность! </strong>

Изменим начертание шрифта: его постановку и насыщенность!

Моноширинный шрифт

Многие среды разработки и редакторы исходного текста программ по умолчанию настроены на моноширинные шрифты. Это сделано для удобства работы программистов: улучшается удобочитаемость кода.

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

В HTML несколько тегов отображают текст моноширинным шрифтом.

Один из них - тег физического форматирования текста <pre> - кроме этого, отображает текст в браузере со всеми пробелами между словами (по умолчанию браузеры воспринимают несколько пробелов, следующих друг за другом, как один).

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

- тег <code> - отображает текст, который является программным кодом;

- тег <kbd> - обозначает текст, который набирают на клавиатуре или для названия клавиш;

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

<p> Програмный код: <code> FOR i=1 TO 20 </code> </p>
<p> Названия клавиш: <kbd> Alt+F1 </kbd> </p>
<p> Результат скрипта: <samp> Hello, PHP! </samp> </p>
<p> Все пробелы между словами: <pre> Один Два Три - Попробуйте сами! </pre> </p>

Цитаты в HTML. Подчеркивание и перечеркивание текста

Тег <u> предназначен для подчеркивания текста, а тег <strike> для его перечеркивания. Это теги физического форматирования текста, и, кроме визуального оформления, никакой смысловой нагрузки они не несут.

В каких случаях Вы будете использовать эти теги - решать Вам!

<p> <u> Подчеркнутый </u> и <strike> перечеркнутый </strike> текст - Все! </p>

Подчеркнутый и ~~перечеркнутый~~ текст - Все!

Оформление цитат

Возможно, в процессе создания сайта, Вам понадобится вставить цитату на страницу.

Цитата - это дословная выдержка текста из какого-либо произведения. Желательно, чтобы цитируемый текст идентифицировался читающим лицом как вставленный. Для этого цитату необходимо выделить/оформить соответствующим образом.

В HTLM для этой цели существует специальный тег - <blockquote> . Текст, заключенный в этот тег, оформляется следующим образом: сверху и снизу от основного текста образуются промежутки, а слева и справа отступы (примерно по 40 пикселей).

<p> Как сказал Г. Ламене: <blockquote> Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества. </blockquote> </p>

Как сказал Г. Ламене:

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

Несколько логических тегов

Мы не коснулись еще 3-х тегов, относящихся к группе логического форматирования: это теги <abbr> , <acronym> и <q> .

Теги <abbr> и <acronym> похожи. Первый из них предназначен для обозначения аббревиатуры, второй - акронима.

Акроним - это таже аббревиатура, только произносится он как единое слово, а не побуквенно.

Оба сокращения при просмотре в браузере подчеркнуты пунктирной линией, и к обоим желательно добавлять всплывающую подсказку - расшифровку сокращения (при помощи атрибута title ).

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

Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h1, h2, h3, h4, h5, h6. Они идут в порядке от самого большого, до самого маленького: h1 - самый большой заголовок, h2 - чуть меньше, ну а h6, последний из них, соответственно самый маленький.

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

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

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

У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:

left - выравнивание по левой стороне
right - выравнивание по правой стороне
center - по центру
jastify - по ширине

Атрибут align есть и у заголовков (тег h), и у параграфов (тег p).

Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру

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

Как выделить текст полужирным в html?

strong - стандартное выделение текста жирным.
b - выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные - это не четверть текста. Старайтесь ограничить применение данного тега.

Рассмотрим пример кода выделения текста жирным

И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова

Как выделить текст курсивом в html?

i - выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em - стандартное выделение курсивом. Нет ограничений в использовании.
cite - данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn - для выделения определений и терминов.

Результат выделения данных тегов будет одинаковым - это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение - дня цитат cite, для терминов dfn и тд.

Рассмотрим пример кода c выделением текста курсивом

Как выделить текст подчёркиванием в html?

u - стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins - так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием

Данные и в первом, и во втором случае будут выделен подчёркиванием.

Как сделать перечёркнутый текст в html?

Перечёркнутым выделяется текст в следующих тегах
del - внесённое исправление.
strike - стандартное перечёркивание.
s - сокращённая запись strike

Как выделить текст в верхнем и нижнем индексах в html?

sub - тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup - тег, отображающий текст выше уровня строки шрифтом меньшего размера.

Тег font в html

Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.

Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:

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

size - активные значения от 1 до 7. Шрифт по молчанию равен 3.

color - цвет текста. Если не задать параметр, то текст будет чёрным.

Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE

Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.

Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup

Другие теги для форматирования текста

Тег abbr обозначает аббревиатуру. Аббревиатура - сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

Горизонтальная черта в html или тег hr

Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.

У данного тега есть следующие атрибуты:
align - выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width - фиксирует длину черты в пикселях или процентах
size - толщина линии
color - цвет линии
noshade - убирает рельефность линии

Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!

Читайте также: