HTML теги, определяющие выравнивание текста, отступ

Выровненный по ширине текст используется в типографии

В примере ниже показано, как выровнить текст по ширине страницы:

align="left"	align="right"
	С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
align="justify"	align="center"
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.	С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.

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

Выравнивание текста в HTML по центру и по ширине

Выравнивание текста в HTML по центру, текст справа :

Результат:

Атрибуты и значения

• align="left" - определяет выравнивание текста слева (по умолчанию).
• align="center" - выравнивает текст по центру .
• align="right" - выравнивает текст справа .

Выравнивание | HTML отступ текста

HTML текст и его отступ слева страницы

Произведем отступ текста слева двумя способами:

Результат:

Посмотреть в новом окне.

Указую господам сенаторам, чтобы речь держать не по-писаному,
а своими словами, дабы дурь была видна каждого!
Пётр Первый.

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

Д опустим, ты набрал текст в редакторе, произвел его форматирование (выделил какие-то слова жирным или курсивом ), либо сделал с ним что-то ещё. Затем скопировал и вставил текст в свой html-код. Открываешь html-страницу в , а всё твоё форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы (по сути те же теги, только используются в текстовых редакторах), которые ты по умолчанию не видишь.

В окне редактора ты видишь только текст. А на самом деле там есть ещё управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Т. е., повторюсь, это то же самое, что и , только «заточенные» под использование в текстовых редакторах.

Н о, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега. Итак, приступим.

§ 2. Сами теги для форматирования

П редварительно отформатированный текст можно вставить в html-страницу с помощью тегов и . Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу.

С амыми популярными тегами для форматирования текста являются:

• - используется для выделения текста полужирным .


• - используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег .


• - позволит подчеркнуть текст. Тут главное, чтобы пользователь не перепутал подчёркнутый текст с ссылкой.


• - делает текст перечёркнутым.


• - предназначен для выделения подстрочного текста (нижний индекс). Этот тег может быть полезен, например, для записи химических формул. Вот этот код

  H2 O

  Даст нам вот такую формулу



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

  (a+b)2 ,

  Получаем

  (a+b) 2 .

В се эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код:

H2O - это формула воды.

при просмотре

H 2 O - это формула воды.

§ 3. Абзацы

В HTML абзацы создаются с помощью тега . Использование этого тега приводит к вставке одной пустой строки и размещению находящегося за ним видимого элемента html-страницы в следующей строке. Например, если мы напишем:

Т о выглядеть это будет так:

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

§ 4. Выравнивание текста

Д ля того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify . Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:

align="center">Текст по центру

выровняет текст по центру:

Текст по центру

А этот код:

right">

выровняет текст по правому краю

Выравнивание текста по правому краю

Е сли атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код:

выровнит текст по левому краю

По умолчанию текст выравнивается по левому краю

§ 5. Перенос строки и горизонтальная черта

Е сли нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то используется тег
. Например, html-код

1. Первая строка.
2. Вторая строка.

в браузере будет выглядеть так:

1. Первая строка.
2. Вторая строка.

У
нет закрывающего тега. Ты уже наверное догадался, что для вставки нескольких пустых строк, нужно записать тег
несколько раз подряд.

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

• size - толщина полосы;


• width - ширина полосы;


• align - выравнивание;


• color - цвет полосы;


• noshade - атрибут, не имеющий значений. Если указан, то создается сплошная чёрная полоса без тени.

Н апример, html-код:

align="center" size="5" width="50%" color="#3399ff">

в браузере примет вид

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

§ 6. Заголовки

Д ля задания названий разделов и подразделов в HTML используются теги заголовков . Существуют шесть уровней заголовков и обозначаются они так:

• - заголовок первого уровня


• - заголовок второго уровня


• - заголовок третьего уровня


• - заголовок четвёртого уровня


• - заголовок пятого уровня


• - заголовок шестого уровня

З аголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок (им выделено название этого урока), а самый маленький . Теги заголовков имеют атрибуты:

• align - выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);


• title - всплывающая подсказка, которая появляется при наведении мыши на заголовок.

Н апример, код HTML:

align="center" title="Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.">Заголовок 4 уровня

в браузере будет выглядеть так:

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

§ 7. Работа со шрифтами

Д ля форматирования непосредственно шрифтов, в HTML есть тег . У этого тега существуют следующие атрибуты:

• color - цвет текста шрифта;


• face - гарнитура шрифта;


• size - размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По-умолчанию, размер текста 3. Если указать size="+1"

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

§ 8. Создание списков в HTML

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

В нумерованном списке маркеры (значения атрибута type) такие:

• 1 - нумерация арабскими цифрами (по умолчанию);


• A - большими латинскими буквами по алфавиту;


• a - маленькими латинскими буквами;


• I - большими римскими цифрами;


• i - маленькими римскими цифрами.

Н апример, HTML-код

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

браузер покажет так.

Бывает так, что нужно вывести картинку и приписать название (короткую фразу). Для этого есть такие параметры:

Align="top" – выравнивает текст по верху изображения.
align="bottom" – выравнивает текст по низу.
align="middle" – выравнивает текст по центру.

Ниже приведён код, в котором демонстрируется работа выше описанных параметров.

<html > <head > <title > Изображение и текстtitle > head > <body > <p > <img src="images/htmlbeer0.jpg" width="100" height="180" align="top" /> Красивая пчёлкаp > <br > <br > <p > <img src="images/htmlbeer1.jpg" width="120" height="180" align="middle" /> Очень симпатичная пчёлкаp > <br > <br > <br > <p > <img src="images/htmlbeer2.jpg" width="160" height="180" align="bottom" /> Тоже ничего.p > body > html >

Красивая пчёлка

Очень симпатичная пчёлка

Тоже ничего.

Теперь посмотрим, как нужно выводить картинку при большом количестве текста.
Есть два параметра:

Align="left" – изображение "обтекает текст" слева.
align="right" – изображение "обтекает текст" справа.

Для наглядности напишите такой код:

<html > <head > <title > HTML изображение слева – текст справаtitle > head > <body > <img src="images/htmlsun.jpg" align="left" width="140" height="124" /> <big > Солнцеbig > <br > <p > > Здесь может быть текст содержащий информацию о Солнце.p > <br > <br > <img src="images/htmlmoon.jpg" align="right" width="140" height="124" /> <big > Лунаbig > <br > <p > Здесь вы можете вставить научную статью о Луне.p > body > html > Солнце

По форме Солнце близко к идеальной сфере с диаметром 1392000 км. Оно вмещает в себя орбиту Луны, и еще остается много места. Фактически более миллиона таких планет как Земля свободно поместились бы внутри Солнца. Кроме того, если бы вы смогли вести машину по его поверхности со скоростью 88 км/ч, у вас бы ушло 5 с половиной лет, чтобы объехать Солнце один раз (притом не останавливаясь). Но размер Солнца не постоянен. Современные исследования показывают, что диаметр Солнца уменьшается приблизительно на 1 метр в час. Если этот феномен проходил и в прошлом столетии, тогда Солнце, которое мы видим сейчас на 800 км меньше, чем то, которое видели наши предки. Возможно, это солнечное сжатие является частью долговременного колебания, которое помогает стабилизировать громадный выброс энергии.

Луна

Это единственный естественный спутник Земли. Масса Луны составляет 0,0123 массы Земли (приблизительно 1/81) или 7,6.1022 кг. Диаметр Луны чуть больше четверти земного (0,273) или 3 476 км. Луна освещает Землю в 500 000 раз слабее Солнца). На Луне нет привычной для нас атмосферы, нет рек и озёр, растительности и живых организмов. Сила тяжести на Луне в шесть раз меньше, чем на Земле. День и ночь с перепадами температур до 300 градусов длятся по две недели.

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

<html > <head > <title > Вывод изображения на HTML страницу title > head > <body > <img src=" images//htmleclipse.jpg" alt= align="left" width="160" height="130" style=" border: 8px solid #ffffff;" /> <big > big > <br > <p > Статья о Солнечном затмении. p > body > html >

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

Перечеркнутый текст
ВАШ ТЕКСТ

Подчеркнутый текст
ВАШ ТЕКСТ

ЖИРНЫЙ ТЕКСТ
ВАШ ТЕКСТ

ТОНКИЙ ТЕКСТ
ВАШ ТЕКСТ

УВЕЛИЧЕННЫЙ ТЕКСТ

ВАШ ТЕКСТ

ТЕКСТ КУРСИВ
ВАШ ТЕКСТ

ЖИРНЫЙ КУРСИВ

ВАШ ТЕКСТ

ПОДЧЕРКНУТЫЙ КУРСИВ

ВАШ ТЕКСТ

СРЕДНИЙ ТЕКСТ
Your text

ВАШ^ТЕКСТ

ОЧЕНЬ КРУПНЫЙ ТЕКСТ

ВАШ ТЕКСТ

КРУПНЫЙ ТЕКСТ

ВАШ ТЕКСТ

СРЕДНИЙ ТЕКСТ

ВАШ ТЕКСТ

Мелкий текст

ВАШ ТЕКСТ

ОЧЕНЬ МЕЛКИЙ ТЕКСТ

ВАШ ТЕКСТ

Супермелкий шрифт. Например: Я хочу тебе тихонько сказать Или: Я хочу тебе тихонько сказать

ТЕКСТ
Минимальное значение font-size:1pt (самый мелкий)

Меняем вид шрифта:
КРАСИВЫЙ ПРОПИСНОЙ ШРИФТ
ВАШ ТЕКСТ

МЕНЯЕМ ЦВЕТ ШРИФТА
ВАШ ТЕКСТ

ВНИМАНИЕ. Таблица кодов цветов

Для желающих поэкспериментировать с текстом есть очень интересный сайт typetester.org

МЕНЯЕМ ШРИФТА И ЦВЕТ ТЕКСТА
ВАШ ТЕКСТ

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ Цвета текста и линии можно менять.
ВАШ ТЕКСТ

Синий текст подчеркнут красной линией
ВАШ ТЕКСТ

Синий текст в красной рамке Цвета текста и рамки можно менять.

ВАШ ТЕКСТ

Цветной текст с цветным фоном Цвета текста и фона можно менять.

ВАШ ТЕКСТ

Все цвета меняйте по своему вкусу

Цветной текст с цветным фоном в цветной рамке

ВАШ ТЕКСТ

Текст, подчеркнутый пунктиром

ВАШ ТЕКСТ

Текст, подчеркнутый точками

Текст, подчеркнутый пунктиром

Текст, подчеркнутый двойной чертой

Текст, подчеркнутый двойной чертой

Текст, окаймленный разноцветным пунктиром Все цвета можно менять.

Текст

Текст в двойной рамке

Текст в двойной рамке

Цветной текст в двойной цветной рамке Цвета меняйте по своему вкусу

Цветной текст в двойной цветной рамке

Ваш текст в объемной 3D-рамке

Ваш текст в объемной 3D-рамке

На заметку:
Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и тогда получим рамку во всю ширину поста.

Ваш текст в объемной 3D-рамке

Что бы получить рамку с определенными размерами, то используем следующие теги:
Размеры блока div задаются атрибутами:
div style=width:200px; height:50px;
где ">width:200px; - ширина блока 200 пикселей,
height:50px; - высота блока 50 пикселей
Если проставить ширину и высоту, то получим рамку с нужными размерами:

Ваш текст в объемной 3D-рамке

Лучшие сервисы для подбора цвета:

Аббревиатура: HTML
HTML

Так называемый «спойлерный» текст, проявляющийся при его выделении (закрашивании) мышкой. Например:
Загадка видна всем, а отгадку увидим только при выделении - «Зимой белый, летом серый ответ ЗАЙЧИК «

спойлерный текст

Выделение первой буквы в предложении, или так называемая «буквица»:
Ж или были дед да баба…
Ж или были дед да баба…

Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

Ваш основной текст текст

Основной текст

Текст «наоборот»:
Перевернуть текст задом-наперед
Перевернуть текст задом-наперед

Увеличиваем расстояние между словами

Значения можно менять

Расстояние между буквами

Значение 10px можно менять

Приподнять фразу на 5 пикселей над текстом (значение можно менять)

Приподнять ^фразу

Опустить фразу (значение можно менять)

Опустить _фразу

Выделение цитаты в тексте.
Пример:
Выделяем следующую фразу:

Внимание, это пояснение очень важное

Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ (наведите курсор на текст):
Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ

ТЕКСТ С ЭФФЕКТОМ ПОДСВЕТКИ

Разбить текст на две колонки:

Код:

текст левой колонки

текст правой колонки

© J.Shaffer 1928

“Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):

Я
Пешу
Лесинкой!!!

ваш текст

Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым «моноширинным» шрифтом. Обычно в качестве такого шрифта используется Courier New . Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт:

C
Днем
Рождения!

ваш текст

Текст, обтекаемый другим текстом:

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

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

Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.

В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов

-

. При этом

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

Пример создания заголовков:

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

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

На работу страницы количество тэгов

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

на страницу. Ведь в HTML есть целых шетсь уровней заголовков. При любой вёрстке страницы этого вполне достаточно, чтобы выделить тэг

только для одного заголовка.

Абзац

Тэг

Создаёт абзац текста. У него есть отступы сверху и снизу для отделения одного абзаца от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.

Тэг

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

Для примера выделим часть текста красным цветом.

Нужная часть текста находится внутри тэга . Чтобы она была красной, тэгу установлен атрибут style, который задаёт стили. Так как работа со стилями описывается в учебнике CSS, здесь я не буду объяснять, как работает этот атрибут. Просто добавьте его в тэг, как написано в примере.

Тэг

Тэг

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

Выделение текста
В HTML есть тэги для выделения текста. Тэги 

и 
 создают жирный шрифт. Хотя
эти тэги имеют некоторые различия, на странице они обычно выглядят одинаково. Тэги

 и 

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

Пример выделения текста:
21
22
23
24

 Жирный шрифт
Жирный шрифт
Курсивный шрифт
Курсивный шрифт

Текст можно выделять с помощью стилей. Каждый сам решает, как выделять текст, с помощью тэгов
или стилей.
Другие тэги
Мы рассмотрели специальные HTML теги для текста. Но текст могут содержать и многие другие
тэги, которые добавляют контент на страницу. Можно даже вставить текст вне каких-либо
тэгов, он всё равно отобразится на экране. Но на практике так никто не делает, потому что вне тэгов
текстом нельзя управлять. Поэтому весь текст конечно должен находиться внутри тэгов. А когда Вы изучите
CSS, Вы сможете определять внешний вид текста.