Продолжение, работа с текстом на html странице часть 2. Размещение текста в блоке div, как выделить текст жирным используя strong, как задать стиль тексту через span.


Сегодня рассмотрим работу со следующими элементами.


<div> </div> Работа с текстом как отдельный блок.

<strong> </strong> Выделяем текст жирным.          

<span> <span> Работа со стилями.                           




Как разместить текст в блоке div. <div> </div> Работа с текстом как отдельный блок.

Посмотрим вариант размещения текста на странице сайта с открывающим <div> и закрывающим </div> тегом. Посмотрим лучше, как это выглядит на наглядном примере, так урок легче усваивается. Здесь мы указываем <div align="right"> что текст будет расположен с права.


<div align="right">
Это первая строка <br> началась вторая <br>и третья
</div>
перешли на четвёртую, но она уже начинается по умолчанию с лева.
<div>
Эту строку мы поместили между тегами но не указали где должна она расположится и она начинается с новой строки.
</div>
 

Теперь посмотрим что нам показал браузер. Вы уже, наверное, догадались, что <div> </div> нам нужен, чтоб на каждой строке не указывать, что она должна находится с лева, середины или справа это своего рода блока. Посмотрите на четвертую строку, она уже переместилась в левую сторону по умолчанию, потому что она находится за пределами <div align="right"> </div> и не выполняет требования указанные в ней. Самая последняя строка находится между тегами<div> </div> в них не указано команды и она начинается с новой строки.

так переносится строка в блоке <div>

Вот ещё один интересный пример выделения размещенного между тегами <div> как блок в отдельном цвете.


<div style="background-color:#ffff99">
Вот этот блок на странице будет выделено в светло жёлтый цвет!
<br> Это хорошо для привлечения внимания посетителей.
</div>
 

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

Выделенный блок в <div>



Как выделить текст жирным. <strong> </strong> Выделяем текст жирным.

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


В этом примере это обычный текст,
<strong>
а этот уже жирный
</strong>
и снова обычный.
 

А вот что у нас вышло в браузере. Расположенный текст между <strong> </strong> выделено жирным.

Выделяем текст жирным



Как задать стиль тексту.<span> <span> Работа со стилями.

Зачем нам нужен <span> он нужен чтоб выделять различные части текста он не может работать в одиночку и нуждается в дополнительном элементе а так же требует в обязательном порядке закрывающий тег </span>. Перейдём к примеру.


Этот текст нашей html страницы и мы хотим чтоб<span style="color:blue"> этот текст был синим </span>,
<br>а если мы продолжим писать и зададим размер то <span style="font-size:24px">будет крупный.</span>
<br> Вот ещё возможность стиля <span style="background-color:#FFFF00">эта надпись выделена жёлтым.</span>
 

Теперь посмотрите что у нас получилось сам по себе <span> не имеет возможностей работы с текстом. Ему обязательно нужен дополнительный элемент для добавления различных стилей к тексту. С ним вы можете даже каждой букве задавать размер цвет шрифт и ещё много интересного, но это уже в дальнейшем, когда вы уже освоите немного html.

Как задать стиль тексту со span

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



Рейтинг@Mail.ru   Яндекс.Метрика