Как оформить текст в html

Как оформить текст в html

Теги h1-h6 отвечают за выделение текста в виде заголовков. Более подробно о их семантичеком влиянии и важности для построения логической структуры страницы для поисковиков написано тут. seo продвижение агентство москва. Если говорить о них вкратце, то заголовки страницы имеют ключевую роль во внутренней оптимизации страницы для поисковиков. В связи с этим формулировки заголовков на странице должны быть максимально приближены к ключевым запросам по которым Вы собираетесь продвигать статью в поисковой выдаче. Визуально заголовки выделяются жирным начертанием и большим размером шрифта относительно остального текста. Тег p отвечает за выделение абзацев. Вместе с тегами заголовков тег p является блочным элементом оформления текста, потому при его использовании каждый последующий абзац начинается с новой строки, чего не происходит при использовании строчных элементов.

HTML теги для разметки текста (строчные элементы)

• span — схож по своему смыслу с тегом p, но является строчным элементом. Обычно используется для обозначения части текста внутри абзаца. Зачем это нужно? Все достаточно просто- обозначенному тексту в дальнейшем через CSS можно задать оформление отличающееся от оформления остального текста.
• br -делает перенос строки. ТЕГ НЕ ПАРНЫЙ (тобишь закрывающего тега у него нет). Примерно то же самое, что если бы Вы нажали Enter в Верде. В отличие от переноса, создаваемого блочными элементами, не несет на себе никакой логической нагрузки. Используется исключительно для более красивого оформления текста. Рекомендуется избегать его использования без крайней необходимости, поскольку по-сути он просто засоряет код, а для переносов в тексте нужно его просто разбивать на абзацы.
• strong — выделяет шрифт жирным. Служит для расстановки логических ударений в тексте для поисковых роботов. Широко используется для внутренней оптимизации текста. Ключевые фразы в тексте рекомендуется обрамлять в этот тег, чтобы робот лучше понимал о чем статья. ВНИМАНИЕ! Важно не переборщить — если схожие ключи в тексте попадаются больше 3-5 раз, то это может быть расценено как переоптимизация текста и страница с текстом будет занижена в поисковой выдаче.
• b — визуально ничем не отличается от стронга, но не несет в себе никакой смысловой нагрузки для поисковика. Используется для выделения частей текста исключительно для тех, кто будет его читать. К примеру, если необходимо выделить фразу не содержащую ключевых слов, но способную облегчить понимание структуры текста пользователю.
• em — делает текст внутри тега курсивом. Также как и стронг используется для внутренней оптимизации текста под поисковое продвижение, только обладает меньшим весом в сравнении с ним.
• i — визуально ничем не отличается от . Не несет смысловой нагрузки для роботов, используется для увеличения удобства прочтения текста пользователями. Аналог тега , только для курсива.
• ins— используется для подчеркивания текста. Выделяет текст как для пользователя, так и для поисковика.
• u — визуально тождественен предыдущему тегу. Выделяет текст только для пользователя.
• tt — выводит текст моноширинным шрифтом. Не несет в себе смысловой нагрузки. Моноширинный означает, что для всех символов шрифта ипользуется одинаковое пространство при написании.
• pre — блочный элемент. Используется для того, чтобы сделать моноширинными большие участки текста. Внутри него можно применять любые теги для форматирования текста, кроме sub и sup.
• sub — выводит текст как нижний индекс ( уменьшает шрифт текста и выводит его немного ниже уровня строки).
• sup — выводит текст как верхний индекс ( уменьшает шрифт текста и выводит его немного выше уровня строки).
• strike (s) — делает текст перечеркнутым. Эти два тега абсолютно аналогичны по своему содержанию. Современная документация html вообще осуждает их использование, говоря о том, что для перечеркнутого текста можно использовать css, а эти теги больше просто засоряют код.

Использование нескольких тегов одновременно

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

p>b>i>Жирный текст написанный курсивомi>b>p> Верно--> p>b>i>Жирный текст написанный курсивомb>i>p> Не верно-->

Теги находящиеся внутри других тегов формируют порядок вложенности. Так, в рассмотренном примере тег i имеет второй уровень вложенности относительно тега p.

ОБРАТИТЕ ВНИМАНИЕ! Использовать строчные элементы внутри блочних разрешено, в то время как блочные внутри строчных- нет. Хоть браузер и отразит все корректно, если Вы, к примеру, используете тег p внутри тега b. Это будет не верно с точки зрения документации html. Тобишь такой код будет содержать ошибку и Вы это можете спокойно проверить воспользовавшись любым сервисом валидации html кода.

Вопросы для самоконтроля:

• Какие теги форматирования текста являются блочными, а какие строчными? В чем между ними разница?
• Какие существуют способы выделения текста жирным шрифтом? В чем между ними разница?
• Какие существуют способы выделения текста курсивом? В чем между ними разница?
• Как правильно переносить строки в html?
• Как формируется порядок вложенности тегов?

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

В HTML текст форматируется с помощью тегов. Чтобы задать ему определённый стиль, надо поместить текст в соответствующий контейнер.

Все теги форматирования можно разделить на три группы:

1. Теги заголовков (h1-h6).

2. Теги оформления основного текста ( , , , , и т. д.).

3. Теги группировки ( , , )

Теги заголовков

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

Чтобы понять, как это работает, впишите в html-файл следующий код:

Заголовок первого уровня
 
Заголовок второго уровня
 
Заголовок третьего уровня
 
Заголовок четвёртого уровня
 
Заголовок пятого уровня
 
Заголовок шестого уровня
 

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

Теги оформления основного текста

Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.

Жирный шрифт

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

Отвечают за жирное начертание теги и .

Это жирный текст. И это жирный текст.

Верхний и нижний индексы

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

За создание нижних индексов отвечает тег , для верхних используется тег .

x1=32 м2

Уменьшение размера

Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег

Обычный текст. Уменьшенный текст.

Подчёркивание

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

Обычный текст. Подчёркнутый текст.

Зачёркивание

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

Это новая информация, а это текст, который уже не нужен.

Курсив

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

Первый пример курсивного текста, второй пример курсивного текста.

Ввод компьютерного текста

Бывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.

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

Программный код будет выглядеть таким образом , переменные обозначаются так: a, b, c, вот результат выполнения программы , а это – введённый пользователем текст. Сохранение исходного форматирования 
отображается примерно так
.
Цитаты и определения
Программный код будет выглядеть таким образом , переменные обозначаются так: a, b, c , вот результат выполнения программы , а это – введённый пользователем текст . Сохранение исходного форматирования отображается примерно так .

Цитата в теге blockquote.
Цитата внутри контейнера cite.Короткая цитата с тегом q.Выделенное определение.Аббревиатура (НПО, ИП).
Общий пример
Чтобы лучше понять, за что какой тег отвечает и как работает, посмотрите нижеследующий код и результат его выполнения.
Жирный текст можно сделать тегами strong и b. За курсив отвечают em и i. 
Теги sub и sup используются для создания нижних (x1…xn) и верхних (42=16) индексов. Del зачёркивает, ins — подчёркивает.
 
Теги code, kbd, var и samp используются редко и нужны для отображения листинга программ
 
abbr нужен для обозначения аббревиатур (HTML). Теги blockquote, cite и q используются для оформления цитат (Уж небо осенью дышало)
 
Тег pre сохраняет изначальное форматирование текста, не удаляя пробелы и переносы строк.






Браузер интерпретирует этот код так:

Теги группировки
Нужны, чтобы текст не шёл одной сплошной строкой, а был разбит на логические составляющие.

Внутри тегов заключается абзац.

Первый абзац
 
Второй абзац







Тег осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).

позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты width, size, color, align и noshade задают ширину, толщину, цвет, выравнивание и отсутствие 3D-эффекта линии соответственно.


Строка над линией. 
Строка под линией.
 

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Полезные ссылки:

Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
Вёрстка сайта с нуля 2.0 — полноценный платный курс;
Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

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






Тэг позволяет задать общие свойства для всей страницы. В параметрах открывающего тэга можно задать цвет текста (параметр TEXT ) и цвет фона (параметр BGCOLOR ). Например, тэг
определяет черный цвет текста на желтом фоне для всей страницы.
Тэг позволяет изменять также и цвет ссылок, которые в языке HTML называются anchors — якоря. Для этого используют параметры

LINK — цвет обычных ссылок
ALINK — цвет активной ссылки, на которой щелкнули мышью
VLINK — цвет посещенных ссылок

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







COLOR — цвет текста
FACE — начертание (название) шрифта
SIZE — размер шрифта (принимает целые значения от 1 до 7)

устанавливает для текста внутри области действия тэга шрифт Courier желтого цвета размера 2. А вот как выглядят все возможные размеры шрифта Arial:
size=1 
size=2 
size=3 
size=4 
size=5 
size=6 
size=7
Стили оформления
Существует несколько стандартных стилей оформления текста: жирный, курсив, зачеркнутый, подчеркнутый, верхний индекс и нижний индекс. Вот тэги, которые отвечают за это:

. (от английского bold), а так же — это жирный текст
. (от английского italic), а так же — это курсив
. (от английского strike out) — это зачеркнутый текст
. (от английского underline) — это подчеркнутый текст
. (от английского superscript) — это верхний индекс
. (от английского subscript) — это нижний индекс
.
 (от английского preformatted) — это специальный стиль для оформления текстов программ (моноширинный шрифт, остаются все пробелы и переходы на новую строку).

Стиль относится к тексту, заключенному между открывающим и закрывающим тэгами.
Заголовки
Заголовки в тексте рекомендуется оформлять стандартными стилями. Текст будет выглядеть более красиво, если в оформлении его использовать заголовки. Для выделения заголовков используются парные тэги от до (от английского header), то есть, уровень заголовка изменяется от от 1 до 6. Страница с кодом
  






Заголовок документа
 
Заголовок раздела
 
Заголовок подраздела
 
Заголовок параграфа
 
Комментарий
 
Авторские пометки
 

будет показана так:






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


 Символ 
 HTML-код 
 Название 


¡ или  
неразрывный пробел


¢
¢
значок цента


£
£
значок фунта стерлингов


¤
¤


¥
¥
значок японской йены


§
§
параграф


©
© или ©
символ авторского права


«
« или «
левая русская кавычка


®
® или ®
зарегистрированная торговая марка


°
°
градус


±
±
плюс-минус


²
²
квадрат


³
³
куб


»
» или »
правая русская кавычка


¼
¼
четверть


½
½
половина


¾
¾
три четверти


×
×
знак умножения


÷
÷
знак деления


Следующий раздел рассказывает об оформлении абзацев.
Визуальное оформление текста в HTML

 Доброго времени суток, друзья!
Вторая часть урока по работе с текстом в HTML посвящена различным эффектам текста, свойствам шрифтов и разделительным полосам. Первая часть урока находится тут и целиком направлена на знакомство с основными элементами текстовых составляющих html — документов.






Начнем, пожалуй с наиболее распространенных тегов форматирования текста в html:

Тег полужирного начертания текста —

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

 
Обратите внимание, если Вы пишите тег после тега 

, то закрывать тег обязательно перед тегом
 . Иными словами, должна соблюдаться вложенность тегов, если Вы ложите коробку в коробку, то она же не вылазит из стены второй коробки, так и в html, тег внутри тега должен быть целостным:
— это правильный синтаксис языка html; 
— НЕ ПРАВИЛЬНЫЙ вариант.






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

Тег курсивного начертания —

Также парные теги, с их помощью текст приобретает наклонное начертание, называемое курсивом. Выглядит в html-документе это таким образом. На тег курсива действуют те же правила, что и на тег полужирного начертания, кроме того, эти теги можно использовать совместно и тогда получится вот такой эффект полужирное курсивное начертание. Опять же, не забывайте про вложенность тегов и закрывайте их правильно. Можно использовать вплоть до отдельной буквы.

Тег подчеркивания текста —

Еще одна разновидность тегов оформления текста, позволяет подчеркнуть текст тонкой линией по нижней границе букв. Выглядит это следующим образом. Также может быть комбинирован с предыдущими тегами в любом сочетании: полужирный-подчеркнутый , курсив-подчеркнутый или все вместе ; и использоваться хоть для одной буквы из предложения, только эффект будет не так заметен.
Интересный факт! В интернете подчеркивание текста почти всегда означает гиперссылку, поэтому будьте аккуратны с использованием подчеркиваний, постарайтесь не вводить себя и людей в заблуждение, например, я использую гиперссылки на Nejalko.ru отдельного от остального текста цвета и без подчеркиваний (только изменение цвета по наведению курсора мышки)

Тег перечеркивания текста —

Довольно занятный эффект для текста, широкое распространение такому эффекту можно найти. в торговле, для обозначения скидок и распродаж, выглядит данный тег именно так .
Комбинируется со всеми предыдущими тегами без проблем, единственное пожелание к Вам, как к будущим сайтостроителям: используйте под этим тегом читаемые шрифты и размеры, иначе из-за полосы не возможно прочитать само слово. А вот тут я для Вас устроил небольшую распродажу:






 

Тег создания нижнего индекса —

Надеюсь, Вы еще не забыли из школьного курса, как выглядят химические формулы? Так вот, теги нижнего индекса отвечают за создание эффекта подстрочного текста, как циферки в химических формулах. К примеру, формула одного хорошо известного некоторым личностям вещества C2H5OH (кто отгадал формулу, тому желаю дальше формулы и не продвигаться).
В html — коде данная формула выглядит так C2H5OH . Можно попробовать так и с буквами, например, экономические и бухгалтерские формулы часто имеют нижний индекс из букв, вот двухфакторная модель оценки вероятности банкротства:
Z1= -0,39-1,07*Ктл+5,79*Ккзк — в качестве нижнего индекса и буквы, и цифры 

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







Тег создания верхнего индекса —

Данные теги могут использоваться для создания собственной таблицы умножения, почему бы нет?
И тому подобное, принцип понятен, в коде выглядит также, как тег , вся разница в визуальном эффекте и 1 разной букве:
Кстати, данные теги тоже могут использоваться совместно с другими вышеприведенными, главное помните про правильную вложенность тегов и не пытайтесь придать символу одновременно вид нижнего и верхнего индекса.
Тег форматирования шрифта —
Мы изучим данный тег, так сказать, для порядка, потому что использование в работе его весьма неудобно. После изучение курса HTML, обязательно выделите время на изучение базового курса по CSS, вот именно в CSS все атрибуты данного тега и будут находиться, даже более того, что можно сделать в html, но сейчас, в качестве ознакомления, доступные атрибуты тега мы разберем. Слово «font» в переводе с английского означает «Шрифт», так что все справедливо. Применяется данный тег к любой части текстового контента для придания различных эффектов:

1. — задаем размер шрифта текста, находящегося между этими тегами. Размер шрифта устанавливается в абсолютном значении и может колебаться от 1 до 7. В коде это будет выглядеть так:

 Привет всем , кому не спится!
Изначальный стандартный размер всего шрифта в языке html равен «3», поэтому эту цифру можно вообще не прописывать, она уже как-бы есть.

2. — задает цвет тексту, заключенному в данных тегах. Цвет может быть прописан, как один из 16 базовых цветов на английском языке, либо в 6-значном значении RGB с «#» перед кодом цвета. Давайте посмотрим пример:

Слово » красный » будет красным, слово » синий » — синим, а слово » небо » — зеленого цвета.






Теперь посмотрим на код этого «цветопредставления»:
— слово » красный » будет красным; 
— слово » синий » — синим; 
— а слово « небо » — зеленого цвета.
Обратите внимание, кавычки перед и после не имеют отношения к тегам, просто в них находятся слова «красный, синий, небо». Да, не спрашивайте меня, почему «небо» зеленым цветом.

3. — задает семейство шрифта для текста внутри данных тегов. Сразу совет: использовать в работе лучше всего общепринятые шрифты, так как они обязательно будут у других пользователей и они увидят Ваш сайт именно таким, каким Вы его задумали. Если использовать редкий шрифт, то браузер читателя, у которого нет такого шрифта будет пытаться подставить другой подходящий шрифт и этим почти 100% нарушит верстку сайта, его дизайн или расположение текстового контента.

Рекомендую использовать такие шрифты: Tahoma, Verdana, Times New Roman, Georgia, Arial, Courier. Они по умолчанию должны быть в операционной системе у любого пользователя, так что с ними все будет хорошо.
Давайте посмотрим на работу атрибута «face» тега :
Разница на глаз, иногда, слабо заметна, но когда Вы будете работать с большим объемом текста, наподобие данного урока, заметно будет точно.






Все 3 атрибута тега можно комбинировать в одной записи, для этого не нужно каждый раз открывать новый тег , вот, как это выглядит в коде:
 Семейство шрифтов Arial ; 
Если перевести на русский, то все становится понятно, мы задали: к сожалению, русских команд язык html не понимает, вот и пишем на английском.
Не забывайте прописывать все изучаемые по ходу уроков теги в код нашей страницы index.html, сохранять изменения и просматривать результаты — практика очень полезна, на нее приходится 50% успеха в веб-программировании.
Тег разделительной полосы
Разделительная полоса, как понятно из названия, нужна для отделения одной части html-документа от другой части, иногда полоса служит дополнительным элементом декора в дизайне сайта и органично дополняет его.
Вот так выглядит разделительная полоса красного цвета прописанная мной в коде нашей первой html-страницы «index.html»:
 
А так она выглядит в исходном коде той же страницы:
 
Разберем, что в коде написано кроме самого тега разделительной полосы , то есть разберем атрибуты разделительной полосы в html:

Атрибут SIZE=»» отвечает за размер полосы по высоте, за толщину разделительной полосы, единицы измерения толщины — пиксели. В нашем примере размер равен 3 пикселям.
Атрибут COLOR=»» уже знакомый нам атрибут, отвечает за цвет разделительной полосы, в данном случае, красный. Цвет можно задавать английским названием или в RGB-диапазоне (красный обозначается #FF0000).
Атрибут WIDTH=»» задает ширину разделительной полосы, ее длину по горизонтали. В примере мы использовали относительное значение «53%», а это значит, что сужение самой html-страницы повлечет уменьшение разделительной полосы, так как размер в процентах отсчитывается от общей ширины страницы. Ширину полосы можно задать в абсолютных единицах, то есть в пикселях, например, так: width=»770px» , тогда полоса останется шириной 770 пикселей в любом случае.
Атрибут ALIGN=»» отвечает за выравнивание разделительной полосы по горизонтали, в примере указано выравнивание по левому краю, может быть по центру — align=»center» и по правому краю — align=»right» .
Атрибут NOSHADE данный атрибут не является обязательным и не имеет числового значения. Если его дописать, то разделительная полоса станет темной, без объема и тени.

Выравнивание текста в параграфе
Теги параграфа имеют свои параметры выравнивания, если их не прописывать, то весь текст в параграфах автоматически выравнивается по левому краю, обычно этого хватает для стандартных статей, но в качестве специального оформления может пригодиться и специально заданное выравнивание. Параметры выравнивания параграфа зависят от уже знакомого нам атрибута ALIGN, который, в данном случае, прописывается для тега 
В html-коде это выглядит следующим образом:
 Текст параграфа выравнивается по центру.
 Параграф выравнивается по правому краю.
 Параграф выравнивается по левому краю (автоматическое выравнивание также по левому краю.
 Данный параграф получит параметр выравнивания «по ширине», но это не всегда смотрится к месту, чаще даже мешает, так как обычно появляется неестественный отступ между словами, хотя края таких праграфов смотрятся ровно и аккуратно.

 
Таким образом, параметр выравнивания параграфа имеет 4 возможных значения:

align=»left»;
align=»center»;
align=»right»;
align=»justify».

Попробуйте использовать выравнивание на нашей странице index.html и обязательно проследите за результатом.
Параметр «align» можно использовать не только для параграфа, но и для заголовков, помните такие теги? В коде это будет выглядеть следующим образом:

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

На данном атрибуте заголовков мы, пожалуй, остановимся. Обязательно испробуйте на практике все, рассмотренные сегодня теги, если их слишком много — разделите информацию на 2 подхода, гораздо важнее качественно усвоить информацию, чем быстро ее получить и забыть.
В следующем уроке мы познакомимся с еще одним элементом текста в языке html, а именно со списками в html.
Успехов в изучении html, друзья!


Похожие публикации:

Как разобрать дрель hitachi fdv16vb2
Как снять личинку двери ford fusion
Как снять панель уаз патриот 2010 года
Какой иномарки радиатор подходит на уаз 3303