Работа с текстом в html: Работа с текстом в HTML (материал для начинающих). Урок 3 – Уроки HTML+CSS: Работа с текстом в HTML — Вебджем.рф

Содержание

Изучаем HTML теги и атрибуты. Учимся работать с текстом, списками и изображениями в HTML

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

Итак, первым делом, прежде чем приступить к дальнейшему изучению основ HTML, давайте узнаем, что такое теги и атрибуты в HTML. Тема тегов уже затрагивалась в статье «Основы HTML. Как создать HTML страницу», поэтому начнем сразу с атрибутов.

Атрибуты в HTML — это так называемые свойства, которые сообщают браузеру дополнительную информацию о том, как нужно отображать тот или иной элемент на странице. При помощи атрибутов, например, можно задать выравнивание тексту, шрифт, цвет и т.д. Одним словом атрибуты являются неотъемлемыми элементами языка гипертекстовой разметки HTML.

Работа с текстом в HTML — Абзацы, ссылки и атрибуты в HTML

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

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

<p>Текст или другой код внутри абзацев</p>

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

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

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

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

font-size, а за его выравнивание – text-align. В результате у нас получится следующий HTML код.

<p>Произвольный текст</p>

Теперь текст будет написан шрифтом размером 12 пикселей и будет выровнен по центру. Аналогичным образом элементам в HTML можно придавать и другие свойства, например, выделить текст жирным шрифтом.

<p>Произвольный текст</p>

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

<strong>Слово выделенное жирным шрифтом</strong>
<em>Слово выделенное курсивом</em>

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

Заголовки в HTML. Заголовки h2 – H6

Во всех статьях независимо от их объема существует необходимость создания заголовков. Заголовки играют важную роль в оптимизации страниц под поисковые системы, поэтому их использование обязательно на каждом сайте. В HTML для создания заголовков существуют специальные теги. Всего их шесть. Для заголовков первого уровня – h2, для второго – h3, для третьего – h4 и т.д. до заголовка шестого уровня H6. При этом желательно чтобы заголовок каждого уровня встречался не более одного раза на странице. Особенно это касается заголовка первого уровня h2.

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

<h2>Заголовок первого уровня</h2>

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

<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>

Более подробно о том, зачем использовать заголовки вы можете прочитать в статье «Поисковая оптимизация страниц».

Работа со списками в HTML

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

Маркированные списки в HTML

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

TYPE. В пределах одного списка можно использовать различную маркировку элементов списка.

<ul type="circle"> <!--Задаем по умолчанию маркировку в виде пустых кружочков-->
<li>элемент 1</li>
<li>элемент 2</li>
<li type="disc">элемент 3</li> <!--Задаем для данного элемента маркировку в виде черного кружочка-->
<li type="square">элемент 4</li> <!--Задаем для данного элемента маркировку в виде черного квадратика-->
</ul>

Результатом работы вышеприведенного кода будет список.

Нумерованные списки в HTML

Нумерованные списки в HTML создаются аналогичным образом с единственным отличием, что в них вместо тега <UL> применяется тег <OL>, который сообщает браузеру, что данный список является нумерованным. В качестве нумерации данного вида списков HTML могут использоваться как цифры, так и буквы.

Нумерованные списки могут иметь следующие атрибуты.

TYPE – используется для указания стиля нумерации.
START — служит для задания начального номера списка, отличного от 1.
VALUE — дает возможность назначить произвольный номер любому элементу списка.

Пример списка с обычной числовой нумерацией.

<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>

Пример списка с буквенной нумерацией.

<ol type="A"> <!--Если указать в качестве значения маленькую букву а, то список будет пронумерован маленькими буквами-->
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>

Пример списка с произвольной числовой нумерацией.

<ol start="5"> <!--Указываем номер первого элемента нумерованного списка-->
<li>элемент 1</li>
<li value="9">элемент 2</li> <!--Присваиваем данному элементу номер 9-->
<li>элемент 3</li>
</ol>

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

Теперь давайте перейдем к завершающей части статьи и рассмотрим основы работы с изображениями в HTML.

Работа с изображениями в HTML

В HTML для вставки изображений используется специальный

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

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

<img title="Основы HTML" alt="Основы HTML" src="https://archive.dmitriydenisov.com/wp-content/uploads/2011/05/social-voting-logo.jpg">

Где

Height – высота изображения.
Width – ширина изображения.
Class – класс CSS задающий свойства для изображения.
Title – заголовок, который отображается при наведении курсора на изображение.
Alt – описание для изображения. Используется поисковыми системами при поиске картинок.
Src – путь к изображению.

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

<a href="https://archive.dmitriydenisov.com/"><img title="Основы HTML" alt="Основы HTML" src="https://archive.dmitriydenisov.com/wp-content/uploads/2011/05/social-voting-logo.jpg"></a>

Теперь наше изображение стало ссылкой и при нажатии на него пользователь перейдет на сайт https://archive.dmitriydenisov.com.

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

Вы также можете подписаться на новостную рассылку любым удобным для вас способом в пункте «Подписка» либо воспользоваться формой ниже.

На этом все. Удачи вам и до скорых встреч на страницах блога dmitriydenisov.com

Тег <HTML> является контейнером, который заключает в себе все содержимое веб-страницы. Закрывающий тег </HTML> должен всегда стоять в документе последним.
У <HTML> есть единственный параметр title. Благодаря параметру выводится всплывающая подсказка, которая отображается, когда курсор мыши задерживается в окне веб-страницы.
Тег <HEAD> содержит все служебные теги, не отображаемые в браузере, к которым относятся: <BASE>, <BASEFONT>, <BGSOUND>, <LINK>, <META>, <SCRIPT>, <STYLE>, <TITLE>.
Тег <TITLE> определяет заголовок документа. Заголовок на странице может быть только один и отображается он в левом верхнем углу окна браузера.
<HEAD>
<title>Здесь отображается заголовок страницы </title>
</HEAD >
Тег <BODY> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. К контенту относятся текст, изображения, теги, скрипты JavaScript и т.д.
Параметры:
Background — Задает фоновый рисунок на Web-странице.
Bgcolor — Цвет фона веб-страницы.
Bgproperties — Определяет, прокручивать фон совместно с текстом или нет.
Bottommargin — Отступ от нижнего края окна браузера до контента.
Leftmargin — Отступ по горизонтали от края окна браузера до контента.
Text — Цвет текста в документе.
Topmargin — Отступ от верхнего края окна браузера до контента.
<BODY text = blue>
Текстовое содержимое
</BODY>
Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Задание. Создать первую HTML-страницу, которая должна удовлетворять следующим требованиям:
имя файла index.html (для создания данного файла необходимо открыть блокнот и сохранить его, использую название Index, заменив расширение с txt на html).
должна появляться всплывающая подсказка «моя первая страница на HTML»
заголовок страницы должен копировать всплывающую подсказку
цвет фона страницы должен быть темно-серый (#999999)
Теги для работы с текстом.
Тег устанавливает жирное начертание шрифта.
Тег <Em> определяет курсивное начертание шрифта.
Тег <U> устанавливает подчеркнутое начертание шрифта.
Тег <S> определяет зачеркнутое начертание шрифта.
Тег <SUB> отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Тег <SUP> отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
Данная группа тегов не имеет параметров, они обязательно должны закрываться.
Тег  представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура.
Параметры:
Color — Устанавливает цвет текста.
Face — Определяет гарнитуру шрифта.
Size — Задает размер шрифта в условных единицах.
 текст написан шрифтом Minion Pro Med
Тег <P> определяет текстовый параграф. Добавляет отступ перед следующей строкой. Имеет единственный параметр align. Этот параметр отвечает за выравнивание текста на странице и может принимать следующие значения: left, center, right, justify.
…
Тег  устанавливает перевод строки в том месте, где этот тег находится (не парный).
Теги <H1>…<H6> заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <H6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Имеют единственный параметр align, как и тег , с теми же самыми значениями.
Тег <HR> рисует горизонтальную линию, которая по своему виду зависит от используемых параметров:
Align — Определяет выравнивание линии.
Color — Цвет линии.
Size — Толщина линии.
Width — Ширина линии.
Тег <MARQUEE> создает бегущую строку на странице.
Параметры:
Аргументы:
Alternate — Контент перемещается между правым и левым краем элемента.
Scroll — Контент перемещается в направлении, заданным параметром direction, затем скрывается за пределами области, после чего начинает движение с начала.
Slide — Контент перемещается в направлении, заданным параметром direction, доходит до края области и останавливается.
Аргументы:
Задание.
Изменить страницу Index.html так, что бы её содержимое совпадало с содержимым, представленным на рисунке 2 (для надписи «Великие поэты России» использовать шрифт Mistral).
Работа с текстом в HTML
Из предыдущего урока мы поняли, что контент сайта состоит из блоков, а каждый блок содержит в себе заголовки, текст, картинки и ссылки. Сегодня я расскажу как работать с текстом в HTML.
Понятно, что текст содержит заголовки, подзаголовки и абзацы.
Заголовки.
Заголовки имеют 6 уровней.
Самым верхним уровнем является уровень 1 (тег <h2>), а самым нижним — уровень 6 (тег <h6>).
Чем выше уровень, тем больше размер шрифта заголовка.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Заголовки</title>
</head>
<body>
<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>
В браузере этот код выглядит вот так:
Абзац.
Абзац заключается в тег .
Абзацы можно разделить горизонтальной линией <hr>.
Для переноса части текста на другую строку, используется тег .
Теги <hr> и закрывать не нужно.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абзац</title>
</head>
<body>

Здесь располагается текст первого абзаца.

<hr>

А здесь располагается текст следующего абзаца.

<hr>

А так можно написать стихи:
 
Мороз и солнце
 
День чудесный

</body>
</html>
В браузере это выглядит вот так:

Свободное форматирование.
Свободное форматирование текста заключается в тег <pre></pre>.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свободное форматирование</title>
</head>
<body>
<pre>
+OOO++OOO+
OOOOOOOOOO
+OOOOOOOO+
++OOOOOO++
+++OOOO+++
++++OO++++
</pre>
</body>
</html>
В браузере это выглядит так:
Выделение слов внутри текста.
Для того, чтобы выделить слово курсивом, это слово оборачивается парным тегом .
<!DOCTYPE html>
<html>
<head>
<meta charset= «utf-8»>
<title>курсив</title>
</head>
<body>

Это абзац текста, в котором некоторое слово выделено курсивом.

</body>
</html>

Чтобы выделить слово жирным, оборачиваем его в тег .
Жирный текст
Но, все выделения слов лучше делать с помощью CSS в отдельном файле, как? узнайте здесь.
Нередко при работе с текстом в HTML возникает необходимость использовать верхние и нижние индексы, например в формулах.
нижний индексверхний индекс
Чтобы добавить слову какой-нибудь стиль, то оборачиваем его в тег , а сами стили прописываем в файле CSS.
Что такое CSS читайте здесь.
Как оформить текст с помощью CSS читайте здесь
В следующем уроке мы научимся создавать списки с помощью HTML.

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

текст

текст

За курсив отвечают теги и :

текст

текст

Подчеркнутый шрифт гарантирует тег :
Что касается надстрочного и подстрочного индекса, то здесь вам помогут теги и :

текст

текст

Например:

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Работа с текстом в HTML</title>

</head>

<body>

Содержание:

<ul>

<li>Что такое HTML и CSS.</li>

<li>Введение в понятия HTML и CSS.</li>

<li>Что такое HTML.</li>

<li>Как выглядит HTML-документ.</li>

</ul>

</body>

</html>

Как отображается в браузере:
Создание блока с отступом
Блок с отступом делается при помощи тега <BLOCKQUOTE>:

<BLOCKQUOTE>текст</BLOCKQUOTE>

Например:

<BLOCKQUOTE>Содержание:</BLOCKQUOTE>

Как отображается в браузере:
Цвет, стиль и размер шрифта
Такие параметры как цвет, стиль и размер шрифта по умолчанию задаются тегом <BASEFONT> (не имеет отношения к заголовкам). У данного тега есть такие атрибуты как:
color = (цвет шрифта).

size = (размер шрифта: це
Уроки HTML. Работа с текстом
Работа с текстом в html-файле отличается от работы с текстом в файлах других типов (doc, pdf, cdr и т.п.). Нужно понимать, что создатель сайта не имеет полного контроля над тем, как созданную им страницу увидит посетитель сайта. Потому что посетитель может открыть страницу в IE, Mozilla Firefox, Opera или каком-нибудь другом браузере, на платформе Windows, Linux, Mac или каком-нибудь другом, где один и тот же тег или атрибут могут интерпретироваться по-разному.
Для определения размера по-умолчанию для шрифта страницы (default font size) нужно набрать:
1. После строки с тегом <BODY>
<BASEFONT SIZE=»n«>
где n – целое число между 1 и 7. По-умолчанию, то есть если Вы не определите этот размер, его значение равно 3.
Для создания жирного шрифта (bold) нужно набрать:
1.  перед текстом, который нужно сделать жирным.
2. Текст.
3. .
Для создания курсивного шрифта (italic) нужно набрать:
1. перед текстом, который нужно сделать курсивным.
2. Текст.
3. .
Для создания подчеркнутого шрифта (underline) нужно набрать:
1. перед текстом, который нужно подчеркнуть.
2. Текст.
3. .
Для изменения размера шрифта нужно набрать:
1. Перед текстом, размер которого нужно изменить

где n – целое число от 1 до 7.Также можно указать относительный размер в виде +n или -n (относительно основного размера шрифта страницы, который определяется тегом BASEFONT).
2. Текст, размер которого нужно изменить.
3. 
Можно определить тип шрифта веб-страницы. Однако если на компьютере читателя нет указанного Вами шрифта, то он будет заменен шрифтом по-умолчанию, который уже определяется системой компьютера читателя.
Для определения типа шрифта нужно набрать:
1. Перед текстом, тип шрифта которого нужно определить:
<FONT FACE=»fontname1
где fontname1 – тип шрифта. Имя типа шрифта нужно набрать полностью и без ошибок.
[2]. ,fontname2
где fontname2 – второй тип. Если на компьютере посетителя не окажется шрифта fontname1, будет использован fontname2. Каждый тип от предыдущего разделяется запятой (,).
[3]. Повторить пункт [2] для каждого последующего шрифта.
4. «> для закрытия тега FONT.
5. Текст, которому назначается тип шрифта.
6. 
Для создания нижнего индекса (subscript) нужно набрать:
1. 
2. Текст в нижнем индексе.
3. 
Для создания верхнего индекса (superscript) нужно набрать:
1. 
2. Текст в верхнем индексе.
3. 
Создайте новый html-файл, введите следующий код, сохраните его и откройте файл в браузере для просмотра результата:
<!DOCTYPEHTML>
<HTML>
<HEAD>
<TITLE>
Моя веб-страница: Работа с текстом
</TITLE>
</HEAD>
<BODY>
<BASEFONTSIZE=»4″>
Жирный текст 
Курсивный текст
Подчеркнутый текст
Текст жирный, курсивный и подчеркнутый одновременно
<FONTSIZE=»1″>Шрифт размера 1</FONT>
<FONTSIZE=»6″>Шрифт размера 6</FONT>
<FONTSIZE=»+3″>Шрифт, размер которого больше от основного на 3 единицы</FONT>
<FONTSIZE=»-2″>Шрифт, размер которого меньше от основного на 2 единицы</FONT>
<FONTFACE=»TimesNewRoman«>Шрифт типа Times New Roman</FONT>
<FONTFACE=»ComicSansMS«>Шрифт типа Comic Sans MS</FONT>
H<SUB>2</SUB>SO<SUB>4</SUB>
AX<SUP>2</SUP>+BX<SUP>n</SUP></I>=0
</BODY>
</HTML>
Поработайте с этим кодом. Сделайте различные изменения. Для проверки сохраните файл, перейдите в браузер и нажмите кнопку «Обновить» (Refresh).
Примечание. HTML5 не поддерживает тег FONT. Для совместимости с HTML5 необходимо определять тип, размер и цвет шрифта с помощью стилей CSS.
Подробности
Автор: Рахматджон Хакимов
Родительская категория: Программирование
Категория: Уроки HTML
Добавить комментарий
УЧЕБНИК HTML для новичков — Работа с текстом
Работа с текстом

Итак, кое-что мы уже знаем. Теперь самая пора наполнить наш сайт содержимым. Я надеюсь, вы уже решили о чем будете писать? Если нет, возьмите какой-нибудь небольшой текст, с заголовками и, открыв наш любимый shablon.html, вставьте его между тегами <BODY> и </BODY>. Можете даже набрать этот текст в программе Word. Обычно я так и делаю. Порою текст приходится неоднократно править, что-то добавлять, исправлять ошибки и неточности. А потом, уже окончательный вариант копирую, и вставляю в Notepad.
Листинг 6. Вставляем текст
<HTML>
 <HEAD>
 <TITLE></TITLE>
 </HEAD>
 <BODY>
 Вот сюда вставьте текст…
 </BODY>
</HTML>
Я немного подумала, и решила для примера вставить главу из книги Н.В. Гончаренко «Гений в искусстве и науке». Очень уж мне она нравится. Надеюсь, понравится и вам…
Вот как я набрала в Word:

Текст в Word
Что ж.. в Ворде получилось и неплохо. Теперь я это скопирую и помещу в Notepad между <BODY> и </BODY>, вот так:
Листинг 7. Скопированный текст
<HTML>
 <HEAD>
 <TITLE></TITLE>
 </HEAD>
 <BODY> Глава 5
ГЕНИАЛЬНЫЕ ЖЕНЩИНЫ
 Все сказанное о гениях мужчинах верно и по отношению к женщинам. «Тогда зачем писать о них отдельно?» — спросит читатель. Он был бы прав, если бы доказанное в теории стало везде фактом реальной жизни. Но долг мужчин женщинам еще не выплачен. Их тысячелетиями не допускали на мужскую половину — и в клубе, в обществе, даже в доме. Всю силу фантазии, умения и искусства они должны были использовать на слишком узком поле деятельности — в кулинарии (и то не всегда), в изготовлении одежды (и тоже не всегда), в поддержании чистоты жилища, в уходе за мужем и детьми. Смысл жизни женщины — мужчина, он ее судьба, все ее запросы должны замыкаться на том, чтобы обеспечить ему максимум удобств независимо от того, оба ли они свободны или лишены свободы, и вырастить детей. Эта непререкаемая догма утвердилась со времен патриархата.
 Никто с такой страстью не возносил женщину до небес, не осыпал похвалами ее тонкий вкус, глубину чувств и разнообразие ееспособностей, как мужчины. Но никто и не сделал больше, чем мужчины, чтобы не дать этим способностям проявиться. И хотя социальные условия не у всех классов были неблагоприятны, однако почти никогда женщины не имели равенства с мужчиной. Даже социальная эмансипация женщины не стала эмансипацией для мужской психологии, не устранила тысячелетиями складывающихся традиций, груз которых несла и во многом еще продолжает нести женщина…
Автор: Н.В. Гончаренко
 </BODY>
</HTML>
И сохраним этот файл, скажем под именем text.html, затем откроем этот файл в окне браузера и что же мы увидим? А увидим мы примерно следующее:

Вот что у нас получилось без тегов форматирования!
Ну и где же, спрашивается, наш текст, любовно разбитый на абзацы? Где табуляция, где выделенные и помещенные в центр заголовки? Почему наш текст расползся по окну браузера, подобно манной каше? Да, должна вас огорчить — ваш (да и мой) браузер не распознает все то, что мы сейчас перечислили.
Но не переживайте! Сейчас к нам на помощь придут теги форматирования! Только позовите!
Теги форматирования текста
Итак, чтобы нам разбить текст на абзацы, всего-навсего нужно поставить перед каждым абзацем тег . Хочу вас обрадовать, что этот тег может и не иметь закрывающего собрата с косой чертой.
А чтобы выделить отдельные слова, нужно эти слова заключить в контейнер с тегами, каждый тег отвечает за один параметр. Так, например, тег  отвечает за жирный текст,  — за наклонный и, кроме того существуют специальные теги для заголовков. Всего для заголовков существует 6 уровней: от <h2> до <H6>. Самый крупный — <h2>, самый мелкий — <H6>. Не забывайте только, что у всех этих тегов существуют парные теги, то есть после того слова, который вы хотите выделить нужно не забыть поставить закрывающийся тег с косой чертой. Контейнеры можно вставлять один в другой, только вставлять нужно правильно, как маленькую матрешку — в большую. Например, будет правильно написать:
<В>Правильно;
а вот так неправильно:
Неправильно
Чтобы наши заголовки разместить по центру, необходимо добавить атрибут выравнивания <align>:
<align=center> — размещает заголовок по центру окна браузера;
<align=right> — по правой стороне окна;
<align=left> — соответственно по левой. Впрочем, по умолчанию, браузер и так пристроит ваш текст к левому краю.
Теперь откроем наш файл text.hml и внесем необходимые изменения:
Листинг 8. Добавляем теги форматирования
<HTML>
 <HEAD>
 <TITLE></TITLE>
 </HEAD>
 <BODY>
 <h5 align=center>Глава 5</h5>
 <h3 align=center>ГЕНИАЛЬНЫЕ ЖЕНЩИНЫ</h3>
 
Все сказанное о гениях мужчинах верно и по отношению к женщинам. «Тогда зачем писать о них отдельно?» — спросит читатель. Он был бы прав, если бы доказанное в теории стало везде фактом реальной жизни. Но долг мужчин женщинам еще не выплачен. Их тысячелетиями не допускали на мужскую половину — и в клубе, в обществе, даже в доме. Всю силу фантазии, умения и искусства они должны были использовать на слишком узком поле деятельности — в кулинарии (и то не всегда), в изготовлении одежды (и тоже не всегда), в поддержании чистоты жилища, в уходе за мужем и детьми.
 
Смысл жизни женщины — мужчина, он ее судьба, все ее запросы должны замыкаться на том, чтобы обеспечить ему максимум удобств независимо от того, оба ли они свободны или лишены свободы, и вырастить детей. Эта непререкаемая догма утвердилась со времен патриархата.
 
Никто с такой страстью не возносил женщину до небес, не осыпал похвалами ее тонкий вкус, глубину чувств и разнообразие ее способностей, как мужчины. Но никто и не сделал больше, чем мужчины, чтобы не дать этим способностям проявиться. И хотя социальные условия не у всех классов были неблагоприятны, однако почти никогда женщины не имели равенства с мужчиной. Даже социальная эмансипация женщины не стала эмансипацией для мужской психологии, не устранила тысячелетиями складывающихся традиций, груз которых несла и во многом еще продолжает нести женщина.
 
 Автор: Н.В. Гончаренко
 </BODY>
</HTML>
Сохраним наш документ под именем text2.html, и посмотрим, что же у нас вышло:

Отформатированный текст
Вот кажется то, что и нужно! А теперь попробуем еще некоторые теги:
  — тег перевода строки, непарный тег;
 тег подчеркивания;
<STRIKE>тег зачеркивания</STRIKE>;
<BIG>Большой текст</BIG>
Маленький текст
<ADDRESS>этот тег служит для сведения об авторе и/или авторских правах</ADDRESS>.
Рассмотрим эти теги на примере одного моего любимого стихотворения Ирины Лео:
Это не сложно
Это не важно
Просто отважно
В небо шагнуть
И осторожно
Там, где возможно
Темного облака
Край отогнуть.
Стертые лица,
Забытые профили
И многоточий упрямая нить.
Свет разливается
И проявляется
То, что уже никогда не забыть.
Откроем опять shablon.html в блокноте и впишем:
Листинг 9. Стихотворение





 <CENTER>
 <BIG>СТИХОТВОРЕНИЕ</BIG>
 <STRIKE>БЕЗ НАЗВАНИЯ</STRIKE>
 </CENTER>
 

 Это не сложно  
 Это не важно  
 Просто отважно  
 В небо шагнуть  
 
 И осторожно  
 Там, где возможно  
 Темного облака  
 Край отогнуть.  
 
 Стертые лица,  
 Забытые профили  
 И многоточий упрямая нить.  
 Свет разливается  
 И проявляется  
 То, что уже никогда не забыть.  
 <ADDRESS>Ирина Лео</ADDRESS>
 </BODY>
</HTML>
Сохраним этот файл под именем text3.html, и откроем в окне браузера. Получится примерно следующее

Файл text3.html
В общем, вроде как хотели, так и получилось.
Тренировка!
Введите в форму любой текст, необходимые теги, нажмите на «посмотреть» и любуйтесь на свою работу!

Работа с текстом. Абзацы и переносы строк в HTML.
Настало время познакомиться с первыми тэгами HTML, которые мы будем использовать на веб-странице.
Давайте начнем знакомство с тэгами HTML с тэгов, которые предназначены для работы с текстом.
Все основное содержимое, которое должно выводиться в браузере, должно располагаться внутри элемента <body>. Все команды и тэги будем писать именно там. Давайте вставим туда какой-либо произвольный текст, которые не содержит пока никаких тэгов.
Обратите внимание, что внутри текстового редактора для вставленного текста есть абзацы, переносы строк и.т.д. Т.е. текст отформатирован.
Если же открыть этот текст внутри браузера, все отступы и абзацы пропадают. Браузер воспринимает всю текстовую информацию как одну строку.
Каким образом можно разбить этот текст на абзацы?
Для того, чтобы разбить текст на абзацы, существует специальный HTML — элемент, который пишется следующим образом:
Содержимое абзаца.
Элемент p является парным тэгом и внутри него указывается содержимое того абзаца, которое должно в нем находиться.
Давайте с помощью этого элемента оформим сейчас наш текст. Каждый абзац разместим в этот тэг.
После этого текст будет разбит на абзацы и все будет отображаться намного лучше.
Возникает еще одна проблема. Как быть если нам нужно текст, который находится внутри одного абзаца, сделать в какой-то определенной его точки принудительный перенос строки.
Часто это может понадобиться при форматировании определенным образом текста на странице.
Для того, чтобы выполнить этот самый перенос строки в HTML есть специальный тэг, который называется:
 
Этот тэг нужно вставить в то место, где нужно выполнить принудительный перенос строки.
Элементы p и br — это одни из самых часто встречаемых элементов на веб-странице. С ними часто приходится работать при создании веб-страниц и работе с HTML.
Попробуйте сейчас поработать и поэкспериментировать с ними.