(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(95991560, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); В браузере этот код"/> (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(95991560, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); В браузере этот код"/>
Веб-мастерская Ларисы ВоронинойРабота с текстом в HTML. Как создать контент сайта.
WEB-мастерская Ларисы Ворониной logo
Меню

Получайте новые статьи по почте

Ваш email:

Категории

Работа с текстом в HTML Сен 24 2016

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

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

Заголовки.

Заголовки имеют 6 уровней.

Самым верхним уровнем является уровень 1 (тег <h1>), а самым нижним — уровень 6 (тег <h6>).

Чем выше уровень, тем больше размер шрифта заголовка.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Заголовки</title>
     </head>
     <body>
          <h1>Заголовок 1-го уровня</h1>
          <h2>Заголовок 2-го уровня</h2>
          <h3>Заголовок 3-го уровня</h3>
          <h4>Заголовок 4-го уровня</h4>
          <h5>Заголовок 5-го уровня</h5>
          <h6>Заголовок 6-го уровня</h6>
     </body>
</html>

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

Абзац.

Абзац заключается в тег <p></p>.

Абзацы можно разделить горизонтальной линией <hr>.

Для переноса части текста на другую строку, используется тег <br>.

Теги <hr> и <br> закрывать не нужно.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Абзац</title>
     </head>
     <body>
          <p>
                 Здесь располагается текст первого абзаца.
          </p>
          <hr>
          <p>
                 А здесь располагается текст следующего абзаца.
          </p>
          <hr>
          <p>
                А так можно написать стихи:
          <br>
                Мороз и солнце
          <br>
                День чудесный
          </p>
     </body>
</html>

В браузере это выглядит вот так:
text v 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>

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

Выделение слов внутри текста.

Для того, чтобы выделить слово курсивом, это слово  оборачивается парным тегом <em></em>.

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <title>курсив</title>
     </head>
     <body>
          <p>
                 Это абзац текста, в котором некоторое слово выделено <em>курсивом</em>.
          </p>
     </body>
</html>

text v HTML
Чтобы выделить слово жирным, оборачиваем его в тег <strong></strong>.

<strong>Жирный текст</strong>
Но, все выделения слов лучше делать с помощью CSS в отдельном файле, как? узнайте здесь.

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

<sub>нижний индекс</sub><sup>верхний индекс</sup>

Чтобы добавить слову какой-нибудь стиль, то оборачиваем его в тег <span></span>, а сами стили прописываем в файле CSS.

Что такое CSS читайте здесь.

Как оформить текст с помощью CSS читайте здесь

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

 

logo

Web-мастерская Ларисы Ворониной
Все права зашишены.
Email: [email protected]

Категории

Страницы