Необходимые инструменты
Чтобы подробнее рассказать о концепции выравнивания в HTML, нам нужно упомянуть некоторые необходимые инструменты, необходимые для запуска HTML-кода. Один - текстовый редактор, второй - браузер. Текстовый редактор может быть блокнотом, возвышенным, блокнотом ++ или любым другим, что может помочь. В этом руководстве мы использовали блокнот, приложение по умолчанию в Windows и Google Chrome в качестве браузера.
Формат HTML
Чтобы понять выравнивание, нам сначала нужно знать основы HTML. Мы представили снимок экрана с примером кода.
< html >
< голова >...</ голова >
< тело >….</ тело >
</ html >
HTML состоит из двух основных частей. Один - это голова, а другой - тело. Все теги записаны в угловых скобках. Головная часть имеет дело с именованием html-страницы с помощью тега title. А также используйте выражение стиля внутри головы. С другой стороны, тело имеет дело со всеми другими тегами текста, изображений или видео и т. Д. Другими словами, все, что вы хотите добавить на свою html-страницу, записывается в основной части html.
Одна вещь, которую мне нужно выделить здесь, - это открытие и закрытие тегов. Каждый записанный тег должен быть закрыт. Например, Html имеет начальный тег, а конечный тег -. Таким образом, видно, что конечный тег имеет косую черту, за которой следует имя тега. Точно так же и все остальные теги используют тот же подход. Каждый текстовый редактор затем сохраняется с расширением html. Например, мы использовали файл с именем example.html. Затем вы увидите, что значок блокнота изменился на значок браузера.
Поскольку выравнивание - это содержание стиля. Стиль в html бывает трех типов. Стиль in-line, внутренняя и внешняя стилизация. Встроенный подразумевается в теге. Internal написано внутри головы. При этом внешний стиль записывается в отдельный файл CSS.
Встроенный стиль текста
Пример 1
Пришло время обсудить здесь пример. Рассмотрим изображение, показанное выше. В этом файле блокнота мы написали простой текст. Когда мы запустим его как браузер, он покажет в браузере вывод, приведенный ниже.
Если мы хотим, чтобы этот текст отображался в центре, мы изменим тег.
Этот тег является встроенным тегом. Мы напишем этот тег, когда введем тег абзаца в тело html. После текста закройте тег абзаца. Сохраните и откройте файл в браузере.
Абзац выравнивается по центру, как он отображается в браузере. Тег, используемый в этом примере, используется для любого выравнивания, то есть для левого, правого и центрального. Но если вы хотите выровнять текст только по центру, то для этого используется специальный тег.
< центр > …… ..</ центр >Центральный тег используется до и после текста. Это также покажет тот же результат, что и в предыдущем примере.
Пример 2
Это пример выравнивания заголовка вместо абзаца в тексте html. Синтаксис этого выравнивания заголовка такой же. Это можно сделать как с помощью тега, так и с помощью встроенного стиля или добавления тега align внутри тега заголовка.
Результат отображается в браузере. Тег заголовка преобразовал простой текст в заголовок, и тег выровнял его по центру.
Пример 3
Выровняйте текст по центру
Рассмотрим пример, в котором в браузере отображается абзац. Нам нужно выровнять это по центру.
Мы откроем этот файл в блокноте, а затем выровняем его по центру с помощью тега.
< п стиль знак равнотекст-выровнять: центр;>После добавления этого тега в тег абзаца сохраните файл и запустите его в браузере. Вы увидите, что абзац теперь выровнен по центру. См. Изображение ниже.
Выровняйте текст по правому краю
Наклонить текст вправо аналогично его расположению в центре страницы. Просто центральное слово заменяется на правое в теге абзаца.
< п стиль знак равнотекст-выровнять: right;> ……… ..</ п >Изменения можно увидеть на изображении, добавленном ниже.
Сохраните и обновите веб-страницу в браузере. Текст теперь перемещен в правую часть страницы.
Внутренний стиль текста
Пример1
Как описано выше, внутренний CSS (каскадная таблица стилей) или внутреннее оформление - это тип CSS, который определяется в головной части html страницы. Он работает аналогично внутренним тегам.
Рассмотрим страницу, показанную выше; он содержит заголовки и абзац. У нас есть требование видеть текст в центре. Встроенное выравнивание требует ручного написания тегов внутри каждого абзаца. Но внутренний стиль можно автоматически применить к каждому абзацу текста, указав p в операторе стиля. Тогда нет необходимости писать какой-либо тег внутри тега абзаца. Теперь посмотрите на код, и он работает.
< стиль >п{Текст-выровнять: center}
</ стиль >
Этот тег написан внутри тега стиля в головной части. Теперь запустите код в браузере.
Когда вы запустите страницу в браузере, вы увидите, что все абзацы выровнены по центру страницы. Этот тег применяется к каждому абзацу в тексте.
Пример 2
В этом примере, как и в абзаце, мы выровняем все заголовки в тексте по правой стороне. Для этого мы будем упоминать заголовки в заявлении стиля внутри заголовка.
H2, h3{
Текст-выровнять: Правильно
}
Теперь после сохранения файла запустите файл блокнота в браузере. Вы увидите, что заголовки выровнены по правой стороне HTML-страницы.
Пример 3
Во внутреннем стиле может возникнуть ситуация, когда вам нужно выровнять текст только некоторых абзацев в тексте, в то время как другие останутся такими же. Следовательно, мы используем понятие класса. Мы представляем класс с точечным методом внутри тега стиля. Необходимо добавить имя класса внутри тега абзаца, который вы хотите выровнять.
< стиль >.центр{
Текст-выровнять: center}
</ стиль >
класс знак равноцентр> ……</ п >
Мы добавили класс в первых трех абзацах. Теперь запустите код. Вы можете видеть в выводе, что первые три абзаца выровнены по центру, а другие - нет.
Заключение
В этой статье объясняется, что выравнивание можно выполнять разными способами с помощью встроенных и внутренних тегов.