Как написать стихотворение html

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

В этой статье я собираюсь менее чем за 5 минут выполнить стилизацию популярного детского стихотворения “Мерцай, звездочка, мерцай!”, используя CSS3-селекторы.

Кодируем стихотворение

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

), а каждая строка стиха должна быть отделена от другой с помощью элемента

1

br

.

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

,

1

<stanza>

и

1

<line>

. Однако маловероятно, что это будущее наступит в скором времени (если вообще наступит).

Разметка

В будущей разметке имеются три основных элемента:

• заголовок;
• подзаголовок с информацией об авторе;
• само стихотворение, собственно.

<h1>
  Twinkle Twinkle Little Star
</h1>
<h2>
  by Jane Taylor, 1806
</h2>
<p>
  Twinkle, twinkle, little star,<br />
      How I wonder what you are!<br />
      Up above the world so high,<br />
      Like a diamond in the sky!
</p>
<p>
  When the blazing sun is gone,<br />
      When he nothing shines upon,<br />
      Then you show your little light,<br />
      Twinkle, twinkle, all the night.
</p>
<p>
  Then the traveller in the dark,<br />
      Thanks you for your tiny spark,<br />
      He could not see which way to go,<br />
      If you did not twinkle so.
</p>
<p>
  In the dark blue sky you keep,<br />
      And often through my curtains peep,<br />
      For you never shut your eye,<br />
      Till the sun is in the sky.
</p>
<p>
  As your bright and tiny spark,<br />
      Lights the traveller in the dark,&mdash;<br />
      Though I know not what you are,<br />
      Twinkle, twinkle, little star.
</p>

Стилизация заголовков

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

body {
  background: #fff;
  color: #111;
  font: 14px Baskerville, "Palatino Linotype", "Times New Roman", Times, serif;
  text-align: center;
}

  div, h1, h2, p {
    margin: 0;
    padding: 0;
  }

Само стихотворение обернем в блок

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

#poem {
  margin: auto;
  padding: 20px 0;
  text-align: left;
  width: 390px;
}

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

h1, h2 {
    font-weight: normal;
    text-align: center;
  }

Установим размер шрифта для основного заголовка — тега

; добавим небольшой

1

margin-bottom

и такой же

1

line-height

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

h1 {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 10px;
}

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

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

1

margin-bottom

:

h2 {
  color: #666;
  font-size: 18px;
  font-style: italic;
  margin-bottom: 30px;
}

Стихотворение

Для основного текста стихотворения добавим интерлиньяж

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

1

margin-bottom

, чтобы визуально отделить их друг от друга:

p {
  line-height: 1.5;
  margin-bottom: 15px;
}

Волшебные селекторы

А вот теперь начнем развлекаться! Первое — добавим декоративный элемент в начале и в конце информации об авторе. Для этого воспользуемся псевдо-элементами

и

1

:after

в сочетании с CSS-свойством

1

content

:

h2:before {
  content: '— ';
}

h2:after {
  content: ' —';
}

Теперь увеличим первую букву стихотворения — так называемая буквица (

). Для этого воспользуемся смежным селектором (

1

+

) и псевдо-элементом (

1

:first-child

).

Смежный селектор позволяет выбрать селекторы, которые следуют сразу выбранным нами селектором внутри одного и того же элемента-родителя (например, внутри одного и того же блока

).

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

, который в нашем примере только один:

#poem h2 + p:first-letter {
  float: left;
  font-size: 38px;
  line-height: 1;
  margin: 2px 5px 0 0;
}

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

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

1

margin

.

Выделим первую строку каждого параграфа через

и сделаем его более удобочитаемым, добавив немного расстояния между каждой строчкой:

#poem p:first-line {
  font-variant: small-caps;
  letter-spacing: 1px;
}

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

, с помощью которого выделим последнего потомка элемента-родителя:

#poem p:last-child {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

Вот стилизация стихотворения и закончена!

Некоторые заметки о поддержке браузерами

Не стоит ожидать, что весь созданный CSS-код будет одинаково работать во всех основных браузерах. Последние версии Safari, Firefox и Opera поддерживают все представленные здесь селекторы. Но Internet Explorer 8 не поддерживает псевдо-элемент

; Internet Explorer 7 не поддерживает псевдо-элементы

1

:last-child

,

1

:before

и

1

:after

; Internet Explorer 6 также не поддерживает псевдо-элемент

1

:first-child

, помимо всего прочего.

Заключение

Эта статья является очень общим и кратким руководством, как использовать селекторы CSS3-стандарта для стилизации HTML-элементов без дополнительных классов, идентификаторов или чрезмерно раздутого кода. Селекторы CSS3 не работают в более старых версиях браузеров, таких как Internet Explorer 6, в которых генерируются только основные CSS-свойства (за редким исключением).

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

Примечание переводчика: статья была написано довольно давно — в 2009 году. Что касается поддержки браузерами CSS3-селекторов, то на сегодняшний день изменений не так уже и много. Исключением является факт, что о браузере IE6 можно забыть.

Оригинал статьи — “Styling a Poem with Advanced CSS Selectors”.

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?

Для создания абзаца используется тэг Р.

Пример:

 <HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>



  


                       
  




<P>
Унылая пора! Очей очарованье!...
</P>
<P>
Александр Пушкин
</P>
<P>
Унылая пора! Очей очарованье!
Приятна мне твоя прощальная краса —
Люблю я пышное природы увяданье,



  


                       
  




В багрец и в золото одетые леса,
В их сенях ветра шум и свежее дыханье,
И мглой волнистою покрыты небеса,
И редкий солнца луч, и первые морозы,
И отдаленные седой зимы угрозы.
</P>
</BODY>
</HTML>

Результат:

Замечание. Если в Блокноте при наборе текста вы начали писать текст с новой строки, то в браузере этот текст все равно будет расположен на одной строчке. Чтобы перенести строку внутри одного абзаца требуется поставить тэг <BR> в конце строки.

Пример:

<HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>
<P>
Унылая пора! Очей очарованье!...
</P>



  


                       
  




<P>
Александр Пушкин
</P>
<P>
Унылая пора! Очей очарованье!  <BR>
Приятна мне твоя прощальная краса —   <BR>
Люблю я пышное природы увяданье,   <BR>
В багрец и в золото одетые леса,   <BR>
В их сенях ветра шум и свежее дыханье,   <BR>
И мглой волнистою покрыты небеса,  <BR>
И редкий солнца луч, и первые морозы,   <BR>
И отдаленные седой зимы угрозы.
</P>
</BODY>
</HTML>

Результат:

Как выровнять текст

Для выравнивания текст у тэга Р есть атрибут ALIGN. Но не достаточно просто написать <P  ALIGN>. У атрибута должен быть указан параметр. Так атрибут ALIGN имеет следующие параметры:

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

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

CENTER – выравнивание текста по центру

JUSTIFY – выравнивание текста по ширине

Чтобы выровнять название стихотворения по центру необходимо сделать следующую запись:

Пример:

<P ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</P>

Замечание. Обратите внимание, что при закрытии тэга его атрибуты не пишутся.

Результат:

Самостоятельно сделайте выравнивание  строки «Александр Пушкин» по правому краю.

Использование заголовков

В нашем примере очень хотелось бы, чтобы название и автор стихотворения были бы выделены. Для этого можно использовать заголовки. У заголовка существуют уровни: H1 – самый первый уровень и, соответственно,  текст, заключенный в контейнер <H1>…</H1>, будет самым большим. Н6 – самый нижний уровень и самый маленький размер текста.

Содержимое тэгов <H1>, <H2>, …, <H6> всегда начинается с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

У тэгов <H1>, <H2>, …, <H6>  также имеется атрибут.

ALIGN определяет выравнивание заголовка. Параметр ALIGN такие же как и у атрибута ALIGN тэга P.

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

Пример:

<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>

Результат:

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

При оформлении текста можно воспользоваться горизонтальными разделителями. Для  того чтобы их вставить нужно воспользоваться тэгом <HR>.Линия  всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Этот элемент является одинарным тэгом и не требует закрытия.

У тэга HR есть параметры:

SIZE — устанавливает толщину линии.

Пример:

<HR SIZE=”3”> 

WIDTH – устанавливает ширину линии в пикселах или процентах.

Пример:

<HR WIDTH =”300”>
<HR WIDTH =”25%”>

COLOR – задает линии определенный цвет.

Пример:

<HR COLOR =”red”> 

ALIGN определяет выравнивание линии.

Пример:

<HR ALIGN=”LEFT”> 

Вставим горизонтальный разделитель после стихотворения с толщиной в 2 пикселя и желтым цветом.

Пример:

<HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”>



  


                       
  




Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<P>
Унылая пора! Очей очарованье!   <BR>
Приятна мне твоя прощальная краса —   <BR>
Люблю я пышное природы увяданье,   <BR>
В багрец и в золото одетые леса,   <BR>
В их сенях ветра шум и свежее дыханье,   <BR>
И мглой волнистою покрыты небеса,   <BR>
И редкий солнца луч, и первые морозы,   <BR>
И отдаленные седой зимы угрозы.   <BR>
</P>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>

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

Результат:

Как установить шрифт текста

Давайте изменим шрифт стихотворения. Для этого применяют тэг  <FONT>.  Но если просто вставить тэг <FONT> наш текст не изменится. Для изменения шрифта нужно воспользоваться атрибутом FACE.

У этого атрибута есть свои параметры:

При записи

<FONT FACE="Times New Roman ">
текст
</FONT>

Слово «текст» будет иметь шрифт  Times New Roman – с засечками.

При записи

<FONT FACE="Arial”>
текст
</FONT>

Слово «текст» будет иметь шрифт  Arial – без засечек.

Зададим стихотворению шрифт Arial.

Пример:

<HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN =” CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<FONT FACE=" Arial ">
<P>
Унылая пора! Очей очарованье!   <BR>
Приятна мне твоя прощальная краса —   <BR>
Люблю я пышное природы увяданье,   <BR>
В багрец и в золото одетые леса,   <BR>
В их сенях ветра шум и свежее дыханье,   <BR>
И мглой волнистою покрыты небеса,   <BR>
И редкий солнца луч, и первые морозы,   <BR>
И отдаленные седой зимы угрозы.   <BR>
</P>
</FONT>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>

Замечание. Обратите внимание, что первым начался тэг <FONT>, а за ним идет тэг <P>. А закрываем мы тэги в обратном порядке: сначала тэг </P>, а потом </FONT>.

Результат:

Как изменить размер текста

Тэг <FONT> представляет собой контейнер не только для изменения гарнитуры, но и для установки таких характеристик шрифта как размер и цвет.

Для изменения размера шрифта используется атрибут SIZE, который задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=»4″), так и относительной (например, size=»+1″, size=»-1″). В последнем случае размер изменяется относительно текущего.

Изменим размер стихотворения на 5 условных единиц.

Пример:

<FONT FACE=" Arial" SIZE="5">

Результат:

Как задать цвет текста

Для изменения цвета шрифта тэг FONT имеет атрибут  COLOR. Значение цвета можно задавать двумя способами. по его названию или по шестнадцатеричному значению.

Зададим для текста цвет FF9900, для этого нужно сделать следующую запись:

Пример:

<FONT COLOR="# FF9900">

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

Пример:

<HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<FONT FACE=" Arial" SIZE="5" COLOR="#FF9900">
<P>
Унылая пора! Очей очарованье!   <BR>
Приятна мне твоя прощальная краса —   <BR>
Люблю я пышное природы увяданье,   <BR>
В багрец и в золото одетые леса,   <BR>
В их сенях ветра шум и свежее дыханье,   <BR>
И мглой волнистою покрыты небеса,   <BR>
И редкий солнца луч, и первые морозы,   <BR>
И отдаленные седой зимы угрозы.   <BR>
</P>
</FONT>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>

Результат:

Тэги изменения начертания шрифта

Создадим новый документ.

Пример:

<HTML>
<HEAD>
<TITLE>   Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
здесь будут записаны 2 математические формулы
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
здесь будут записаны 2 химические формулы
</BODY>
</HTML>

Для строки «здесь будут записаны 2 математические формулы» установим курсивное начертание, для этого используем тэг <I>.

Пример:

<I>
здесь будут записаны 2 математические формулы
</I>

А для строки «здесь будут записаны 2 химические формулы» установим жирное начертание, используя тэг <B>.

Пример:

<B>
здесь будут записаны 2 химические формулы
</B>

Результат:

Тэг <SUB> отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

Тэг <SUP> отображает шрифт в виде верхнего индекса. Текст при этом располагается выше базовой линии остальных символов строки и уменьшенного размера.

Пример:

<HTML>
<HEAD>
<TITLE>   Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
<I>
здесь будут записаны 2 математические формулы <BR>
</I>
(a+b) <SUP> 2</SUP> =a<SUP> 2</SUP> +2*a*b+b<SUP> 2</SUP> <BR>
(a+b)*(a-b)=a<SUP> 2</SUP>-b<SUP> 2</SUP> <BR>
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
<B>
здесь будут записаны 2 химические формулы
</B>
H<SUB> 2</SUB> O <BR>
H<SUB> 2</SUB> SO<SUB> 4</SUB>
</BODY>
</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, затем откроем этот файл в окне браузера и что же мы увидим? А увидим мы примерно следующее:

Вот что у нас получилось без тегов форматирования!

Ну и где же, спрашивается, наш текст, любовно разбитый на абзацы? Где табуляция, где выделенные и помещенные в центр заголовки? Почему наш текст расползся по окну браузера, подобно манной каше? Да, должна вас огорчить — ваш (да и мой) браузер не распознает все то, что мы сейчас перечислили.

Но не переживайте! Сейчас к нам на помощь придут теги форматирования! Только позовите!

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

Итак, чтобы нам разбить текст на абзацы, всего-навсего нужно поставить перед каждым абзацем тег <P>. Хочу вас обрадовать, что этот тег может и не иметь закрывающего собрата с косой чертой.

А чтобы выделить отдельные слова, нужно эти слова заключить в контейнер с тегами, каждый тег отвечает за один параметр. Так, например, тег <B> отвечает за жирный текст, <I> — за наклонный и, кроме того существуют специальные теги для заголовков. Всего для заголовков существует 6 уровней: от <H1> до <H6>. Самый крупный — <H1>, самый мелкий — <H6>. Не забывайте только, что у всех этих тегов существуют парные теги, то есть после того слова, который вы хотите выделить нужно не забыть поставить закрывающийся тег с косой чертой. Контейнеры можно вставлять один в другой, только вставлять нужно правильно, как маленькую матрешку — в большую. Например, будет правильно написать:

<В><I>Правильно</I></B>;

а вот так неправильно:

<B><I>Неправильно</B></I>

Чтобы наши заголовки разместить по центру, необходимо добавить атрибут выравнивания <align>:

<align=center> — размещает заголовок по центру окна браузера;

<align=right> — по правой стороне окна;

<align=left> — соответственно по левой. Впрочем, по умолчанию, браузер и так пристроит ваш текст к левому краю.

Теперь откроем наш файл text.hml и внесем необходимые изменения:

Листинг 8. Добавляем теги форматирования

<HTML>
  <HEAD>

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

Сохраним наш документ под именем text2.html, и посмотрим, что же у нас вышло:

Отформатированный текст

Вот кажется то, что и нужно! А теперь попробуем еще некоторые теги:

<BR> — тег перевода строки, непарный тег;

<U> тег подчеркивания</U>;

<STRIKE>тег зачеркивания</STRIKE>;

<BIG>Большой текст</BIG>

<SMALL>Маленький текст</SMALL>

<ADDRESS>этот тег служит для сведения об авторе и/или авторских правах</ADDRESS>.

Рассмотрим эти теги на примере одного моего любимого стихотворения Ирины Лео:

Это не сложно
Это не важно
Просто отважно
В небо шагнуть
И осторожно
Там, где возможно
Темного облака
Край отогнуть.
Стертые лица,
Забытые профили
И многоточий упрямая нить.
Свет разливается
И проявляется
То, что уже никогда не забыть.

Откроем опять shablon.html в блокноте и впишем:

Листинг 9. Стихотворение

Сохраним этот файл под именем text3.html, и откроем в окне браузера. Получится примерно следующее

Файл text3.html

В общем, вроде как хотели, так и получилось.

Тренировка!

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно.
Воспользуйтесь сервисом cssdeck.com или jsfiddle.net,
сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.