Урок 3. Теги форматирования текста

Как отформатировать текст web-страницы?

Что значит отформатировать текст на web-странице? Под форматированием текста в HTML понимается придание текстовому содержимому web-страницы красивого и опрятного вида. Это может быть:

Итак, приступаем к форматированию текста. А для этого нам естественно необходимо добавить на web-страницу сам текст.

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

Открываем web-страницу в программе Блокнот (а лучше в Notepad++) и между тегами

WebComplex – самостоятельное создание сайтов

Все о самостоятельном создании сайта

Урок 8. Заключение. HTML теги форматирования текста

Это финальный пост из серии по “Основам HTML”, в нем я решил описать некоторые теги форматирования текста и подвести итоги с некоторыми. Теги форматирования текста оставил под конец, чтобы упростить процесс изучения основных элементов интерфейса (разметки) страницы.

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

Все необходимые теги форматирования текста, я вынес в таблицу с кратким описанием. Все теги парные.

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

Думаю сейчас вам довольно просто воспринимать новые теги, но тем не менее ниже ссылка на пример:

Заключение

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

Если вы посмотрите на HTML код любой веб страницы в интернете, то наверняка отметите для себя два тега:

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

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

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

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

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

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

§ 1. Теория

З десь нужно коротко упомянуть о том, что такое текст в «электронном» виде. Я не буду подробно вдаваться в то, как он представляется в различных кодировках и системах. Скажу лишь о том, как связаны форматирование текста в HTML и его редактирование в текстовых редакторах.

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

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

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

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

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

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

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

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

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

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

§ 3. Абзацы

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

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

Это первый абзац.

Это второй абзац.

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

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

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

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

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

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

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

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

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

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

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

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

• size — толщина полосы;
• width — ширина полосы;
• align — выравнивание;
• color — цвет полосы;
• noshade — атрибут, не имеющий значений. Если указан, то создается сплошная чёрная полоса без тени.

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

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

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

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

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

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

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

• align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);
• title — всплывающая подсказка, которая появляется при наведении мыши на заголовок.

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

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

Заголовок 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-код

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

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

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

• disc — закрашенный кружок (по-умолчанию);
• circle — незакрашенный кружок;
• square — закрашенный квадратик.

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

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

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

К ак и остальные теги HTML, списки можно вкладывать друг в друга. Получаются многоуровневые вложенные списки. Например, код:

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

1. Первый элемент.
2. • Второй элемент.
   • Третий элемент.
   • Четвёртый элемент.
3. Пятый элемент.

§ 9. Заключение

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

Н у и напоследок, для закрепления всего вышеизложенного, в качестве самостоятельной работы, изучи вот этот HTML-код:

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

Н а этом рассказ о тегах HTML для форматирования текста объявляется законченным. Раздел получился довольно большим. Не пытайся выучить все новые теги и атрибуты наизусть, всё равно не получится. Они сами постепенно запомнятся во время работы над созданием сайта.

В следующем разделе поговорим о том, как вставить картинку в html-страницу.

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки ! Так победим.

Поделиться ссылкой на эту страницу в:

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

Основной тег, который, по моему мнению, используется чаще всего, это тег абзаца

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

Вот пример использования этого тега

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

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

— выделяет текст курсивом

— делают текст полужирным (от bold )

— перечеркивает текст (от strike )

— подчеркивает текст (от underline )

— текст, размещенный между этими тегами, будет написан моноширинным шрифтом, т.е. шрифтом, имитирующим пишущую машинку.

Чуть позже приведу пример с использованием всех описанных тегов.

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

По стандартным стилям, самый большой заголовок у тега

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

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

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

Правильно будет написать так:

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

Теперь пример с использованием различных тегов текста:

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

Тестовые задания, для использования знаний на практике

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

Перед вами текст, который вы должны перепечатать и отформатировать при помощи различных тегов его так, чтобы он выглядел аналогично.

Работа с текстом в HTML (материал для начинающих). Урок 3

2013-06-09 / Вр:21:14 / просмотров: 20673

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

Основные теги для работы с текстом.

— этот тег предназначен для разбивки текста на параграфы в html документе.

Предлагаю посмотреть пример :

Вот результат примера .

Атрибуты в HTML.

Что такое «тег», вы уже знаете, а вот что такое «атрибуты в html» сейчас узнаете.
Итак.

Атрибуты в html – это дополнение к тегу для разметки текста. Атрибуты вставляются вовнутрь тега. На примере вы все увидите:

align=»center» > здесь текст

P – это тег параграфа.
align=»center» – это атрибут к тегу

с дополнительным правилом.

Я думаю, вы поняли, что такое атрибуты в html.

Атрибуты «H1, H2, H3, H4, H5, H6»

Чтобы выровнять по горизонтали заголовок, используйте атрибут «align».

align: center | left (по умолчанию) | right

Атрибуты «p»

Чтобы выровнять по горизонтали заголовок, используйте атрибут «align» .

align: center | justify | left | right

Итог .
Давайте объединим все примеры вместе и посмотрим результат:

Дополнительные теги для работы с текстом.

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

— этот тег предназначен для выделения текста или слова жирным начертанием. Или ( ).
— этот тег предназначен для выделения текста или слова курсивом.
— этот тег предназначен для подчеркивания текста или слова.
— текст будет перечеркиваться.
— текст верхнего индекса (х 2 )
— текст для нижнего регистра (Н₂О)
— этот тег предназначен для изменения цвета, размера и стиля шрифта в тексте.
— этот тег предназначен для вставки горизонтальной линии в текст.

Предлагаю посмотреть пример :

Атрибуты «font»

font: SIZE | COLOR | FACE

SIZE – размер текста. Значение задается от 1 до 7. Также можно задавать значения в большую или меньшую сторону с помощью символов « + » и « — ».
COLOR – цвет текста.
FACE – шрифт текста.

Предлагаю посмотреть пример :

Атрибуты «HR»

HR: width | size | align | noshade | color

WIDTH – длина линии. Задается размер в (px / %).
SIZE – толщина линии (px).
ALIGN – выравнивание линии по горизонтали. У атрибута «align» есть необходимые значения:
left – выравнивание документа по левому краю.
right – выравнивание документа по правому краю.
center – выравнивание документа по центру (используется по умолчанию).
NOSHADE –закраска линии как сплошной.
COLOR – цвет линии (работает только в Internet Explorer).

Теперь объединим эти примеры вместе и посмотрим результат:

Урок 3. Теги форматирования текста

Так мы дошли до 3 урока уже умея создавать web-странички. Теперь давайте их заполнять. Выучим теги форматирования текста.

Напоминаю, что коды не копируйте, а пишите сами, иначе ничего не получится.

1. Парный тег — смысл тега: делает текст жирным.

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

2. Парный тег -смысл тега: делает текст курсивным

Вы можете сделать текст жирным и курсивным:

3. Есть такой тег как

— это параграф. Этот тег не обязательный но всё же он полезен например при страничке со статьями. Этот тег парный. Его можно использовать много раз. Внутри параграфа можно изменять настройки текста. В общем смысл тега: разделение между собой предложений или текстов. Рассмотрим тег настройки текста: например установки цвета текста. Устанавливать цвет текста внутри параграфа у нас будет парный тег . Внутри него после слова span напишем слово style, после слова напишем символ «=» и поставим кавычки, далее напишем color: red (можете написать любой цвет по-английски). В итоге у нас может получиться так:

Первое слово красное

Тогда у вас первое слово будет красное, а остальной текст чёрный. Можно конечно написать тег и задать цвет другим словам. Но можно задать цвет всему параграфу, таким образом:

Первое слово красное

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

. Но пока что остановимся на этом. В общем, тег

Также внутри тега

можно установить расположение текста. Например, по центру, по левому краю или по правому. Это делается так:

Чтобы выровнять текст по центру напишите внутри тега

align=»center», должно получится так:

Ваш текст расположится по центру экрана. Чтобы выровнять по левому краю, вместо слова center напишите left. Чтобы по правому right.

Те слова, которые стоят после тегов, как style и align называются атрибутами. Есть такой атрибут, как size. Давайте используем его:

Тема: HTML — Урок 3. Форматирование текста

Опции темы

Отображение

• Линейный вид
• Комбинированный вид
• Древовидный вид

HTML — Урок 3. Форматирование текста

Содержание урока:

• Теги, делающие текст заголовками
• Теги разделения на абзацы и переноса строки
• Теги, выделяющие текст курсивом
• Теги, выделяющие текст полужирным шрифтом
• Теги, выделяющие текст подчеркиванием
• Теги, выводящие текст моноширинным шрифтом
• Теги, выводящие текст в верхнем и нижнем индексах
• Тег font и его параметры
• Тег center
• Совместное использование тегов

Для форматирования текста существует много тегов. Одни их них используются часто (и их вы быстро запомните), другие — редко (их и не надо запоминать).

Здесь мы рассмотрим те, которые используются часто.

Теги, делающие текст заголовками

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

Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:

center — по центру,

jastify — по ширине.

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

Теги разделения на абзацы и переноса строки

Тег
— тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги

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

есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:

center — по центру,

jastify — по ширине.

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

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

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

Теги, выделяющие текст полужирным шрифтом

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

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

Теги, выделяющие текст подчеркиванием

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

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

Теги, выводящие текст моноширинным шрифтом

Выводят текст моноширинным шрифтом, но предпочтительнее использовать первый.

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

Теги, выводящие текст в верхнем и нижнем индексах

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

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

Теги указывают параметры шрифта текста:

face — название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.

size — размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

color — цвет текста (по умолчанию — черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color=»blue»).

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа «#». Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web.

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

Теги предназначен для выравнивания всех элементов внутри него по центру окна браузера.

Совместное использование тегов

Мы рассмотрели основные теги форматирования текста, но что если вам необходимо сделать какое-нибудь слово в тексте жирным красным курсивом? Для этого вам придется применить теги strong, font и em вместе. Здесь главное соблюдать порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.

Понятнее будет на примере:

Выделим слово «текст» красным цветом:

Теперь добавим теги курсива (открывающий — слева, закрывающий — справа):

А теперь — теги полужирного начертания:

Каждый раз все предыдущие теги мы помещаем в новые. Это и называется порядком вложенности. Вы можете использовать разные теги для оформления текста, главное не нарушать порядок вложенности.

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

ФОРМАТИРОВАНИЕ ТЕКСТА Урок 3 Работа со шрифтом и

Урок 3. Форматирование текста.pptx

ФОРМАТИРОВАНИЕ ТЕКСТА Урок 3. Работа со шрифтом и абзацами

Содержание Форматирование символов Форматирование абзацев Табуляция Вставка буквицы

Форматирование символов q Форматированием называют изменение внешнего вида текста. q Для форматирования символов используют кнопки на панели управления Шрифт (Главная Шрифт). Примеры: Arial, 18, подчеркнутый синей двойной линией Times New Roman, 24, полужирный Calibri, 14, курсив, красный Georgia, 20, зачеркнутый q На данной панели расположены наиболее часто используемые кнопки, такие как Шрифт Размер шрифта , Увеличить/Уменьшить размер т. д. , и

Форматирование символов q Для дополнительных функций работы с форматом символов используется кнопка в правом углу панели Шрифт. При нажатии данной кнопки появится диалоговое окно Шрифт. q Данное диалоговое окно имеет две вкладки: Шрифт и Интервал. q На вкладке Шрифт можно поменять тип, размер, цвет, начертание шрифта, тип и цвет подчеркивания текста.

Форматирование символов q Также на вкладке Шрифт можно применить какой-либо эффект к тексту. Для этого в пункте Видоизменение нужно выбрать нужный эффект. q Внизу имеется поле Образец. В этом поле видно, как меняется текст, если применить к нему какой-либо эффект или параметры форматирования. Примеры:

Форматирование символов q На вкладке Интервал можно изменять следующие свойства шрифта: ― масштаб шрифта в %, ― межбуквенный интервал (уплотнённый, разреженный), ― смещение символов относительно строки вниз или вверх, ― кернинг для знаков определённого размера.

Форматирование символов q Масштаб шрифта задаётся в %. (значения доступны от 1 до 600); q межбуквенный интервал измеряется в пн. Он может быть уплотнённым, обычным или разреженным; ― смещение символов меняется относительно строки вниз или вверх в пунктах; ― кернинг — избирательное изменение интервала между буквами в зависимости от их формы.

Форматирование абзацев q Основные параметры форматирования абзацев представлены на панели инструментов Абзац. (Главная Абзац) q На данной панели расположены наиболее часто используемые команды, такие как Выравнивание , Междустрочный интервал , Увеличить/уменьшить отступы абзаца и т. д. q Для задания отступов и красной строки можно использовать горизонтальную линейку, на которой располагаются ползунки отступа справа, слева и первой строки.

Форматирование абзацев q Дополнительные параметры форматирования абзацев можно задать в диалоговом окне Абзац. Для его вызова используют кнопку в правом нижнем углу панели Абзац. q Диалоговое окно Абзац имеет две вкладки Отступы и Интервалы и Положение на странице.

Форматирование абзацев q На вкладке Отступы и интервалы расположены: кнопки выравнивания (на панели Абзац ): Примеры выравнивания: Выравнивание по левому краю: Выравнивание по правому краю: Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Выравнивание по центру: Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. q Кнопки Отступы справа и слева относительно края текста (на панели Абзац ): Примеры отступов: Отступ слева 1 см: Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Отступ справа 0 см: Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная.

Форматирование абзацев q Опция Первая строка управляет отступами в абзаце. Примеры первой строки: Отступ на 1 см. : Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Выступ на 1 см. : Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Нет: Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. q Параметр Междустрочный интервал управляет интервалами между строками внутри абзаца (на панели Абзац ): Примеры междустрочного интервала: Одинарный интервал: Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Полуторный интервал: Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Множитель 0, 7 см. : Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная.

Форматирование абзацев q Параметр Интервал задает расстояние между абзацами. Пример: Интервал перед на 6 пн. Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Word позволяет изменять регистр символов без повторного их набора. Интервал после на 2 пн. Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Word позволяет изменять регистр символов без повторного их набора. Интервал 0 пн. Часть возможностей по форматированию текста представлена в группе Шрифт вкладки Главная. Word позволяет изменять регистр символов без повторного их набора. q Вкладка Положение на странице позволяет осуществлять контроль висящих строк, управлять нумерацией строк и разрывами страниц.

Табуляция q Табуляция позволяет выравнивать текст в документе. q Маркеры табуляции в документе можно расставить с помощью Горизонтальной линейки форматирования. Для этого достаточно щелкнуть по ней левой кнопкой мыши q Маркеры табуляции различаются по типам: Маркер Название Левый маркер Центрирующий маркер Правый маркер Десятичный маркер Маркер с чертой Маркеры форматирования Описание Данный маркер аналогичен маркеру отступа абзаца. Этот маркер выравнивает текст относительно собственной позиции Выравнивает текст по правому краю Выравнивает столбцы чисел по десятичной точке Создаёт тонкие вертикальные линии и не служит для ограничения текста

Табуляция q Для установки точных позиций и заполнителей табуляции используют диалоговое окно Табуляция (Главная Абзац ). q В данном окне можно выбрать позицию табуляции в см. , выравнивание, а также заполнитель. Пример: В данном примере установлена табуляция со следующими характеристиками: Позиция табуляции: 16, 25 см Выравнивание: по правому краю Заполнитель: 2 пункт

Вставка буквицы q Word позволяет выполнять заглавные буквы абзацев в виде буквиц. q Для создания буквицы нужно поместить курсор ввода в абзац, который будет начинаться с буквицы и нажать на кнопку Буквица (Вставка Текст Буквица). q Для более широких настроек буквицы можно выбрать в раскрывшимся списке пункт Параметры буквицы, после чего появится диалоговое окно Буквица.

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

Основной тег, который, по моему мнению, используется чаще всего, это тег абзаца

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

Вот пример использования этого тега

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

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

— выделяет текст курсивом

— делают текст полужирным (от bold )

— перечеркивает текст (от strike )

— подчеркивает текст (от underline )

— текст, размещенный между этими тегами, будет написан моноширинным шрифтом, т.е. шрифтом, имитирующим пишущую машинку.

Чуть позже приведу пример с использованием всех описанных тегов.

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

По стандартным стилям, самый большой заголовок у тега

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

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

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

Правильно будет написать так:

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

Теперь пример с использованием различных тегов текста:

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

Тестовые задания, для использования знаний на практике

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

Перед вами текст, который вы должны перепечатать и отформатировать при помощи различных тегов его так, чтобы он выглядел аналогично.

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

Что такое HTML

HTML (HyperText Markup Language, язык гипертекстовой разметки) — специальные инструкции браузеру, с помощью которых создаются Веб-страницы.

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

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

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

Практически все теги имеют атрибуты (глобальные, применяемые для всех html-элементов, и собственные), указываемые в формате атрибут=»значение». Атрибуты позволяют изменять свойства элемента, для которого они заданы. Атрибуты прописываются в начальном теге элемента.

Атрибуты class и id применимы ко всем HTML-элементам, за исключением элементов, содержащих техническую информацию — , , , ,

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