15.10.09

Заголовки html, добавление абзацев, разрыв строки

В языках HTML и XHTML существуют теги для заголовков 6-ти уровней.
Добавьте этот код к коду из урока 1 (между тегами <body> и </body>) и посмотрите что у Вас получилось:




<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>





У Вас должно получиться примерно следующее...

Это заголовок 1


Это заголовок 2


Это заголовок 3


Это заголовок 4


Это заголовок 5

Это заголовок 6


Заголовок заключенный в теги <h1> и </h1> - считается самым важным, приравнивается к заголовку страницы; в теги <h2> и </h2> - к подзаголовку и тд.

Далее мы научимся изменять размер и цвет заголовков, но пока просто запомните эти теги.

Чтобы заключить текст в абзац используйте теги



<p> и </p>




Например,



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


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

В истории Европейского музыкального искусства эпоха Ренессанса открывает новый период огромного значения. Она дала сильнейшие импульсы для последующего развития музыкальной культуры.

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


( История музыки. Эпоха Ренессанса. )


Вы наверное заметили, что нет привычного ОТСТУПА в начале первой строки абзаца, но мы это сможем исправить вдальнейшем, изучив Каскадные таблицы стилей CSS...

А теперь разместите между тегами <body> и </body> следующий код:





<p> Я памятник себе воздвиг нерукотворный,
К нему не зарастёт народная тропа,
Вознёсся выше он главою непокорной
Александрийского столпа. </p>

<p>Нет, весь я не умру - душа в заветной лире
Мой прах переживёт и тлeнья убежит -
И славен буду я, доколь в подлунном мире
Жив будет хоть один пиит. А.С.Пушкин </p>





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

Я памятник себе воздвиг нерукотворный,К нему не зарастёт народная тропа,Вознёсся выше он главою непокорной Александрийского столпа.



Нет, весь я не умру - душа в заветной лире Мой прах переживёт и тлeнья убежит -И славен буду я, доколь в подлунном мире Жив будет хоть один пиит. А.С.Пушкин



Все это происходит потому что браузер игнорирует переводы строк и пробелы (более 1)...
Так как же перевести строку?
Все очень просто! После каждой строчки текста просто поставьте тег <br/>





<p> Я памятник себе воздвиг нерукотворный,<br/>
К нему не зарастёт народная тропа,<br/>
Вознёсся выше он главою непокорной<br/>
Александрийского столпа. </p>

<p>Нет, весь я не умру - душа в заветной лире<br/>
Мой прах переживёт и тлeнья убежит -<br/>
И славен буду я, доколь в подлунном мире<br/>
Жив будет хоть один пиит.<br/>
А.С.Пушкин </p>






Итак, полный код нашего сегодняшнего урока:





<html>
<head>
<title>
Моя первая WEB страничка!
</title>
</head>
<body>
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>

<p>

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

<p> Я памятник себе воздвиг нерукотворный,<br/>
К нему не зарастёт народная тропа,<br/>
Вознёсся выше он главою непокорной<br/>
Александрийского столпа. </p>

<p>Нет, весь я не умру - душа в заветной лире<br/>
Мой прах переживёт и тлeнья убежит -<br/>
И славен буду я, доколь в подлунном мире<br/>
Жив будет хоть один пиит.<br/>
А.С.Пушкин </p>

</body>
</html>




Комментариев нет:

Отправить комментарий

Как создать свой сайт?