Учебник по HTML5

Основные теги

Текст - это основа основ. Поэтому стоит начать с него. Думаю, все работали в MS Word (или в чём-то похожем) и хорошо знакомы с таким понятиям, как форматирование текста. Разберёмся, как провернуть такое в HTML.

тег	отображение
`<p>Абцаз</p>`	Абцаз
`<strong>Жирный шрифт</strong>`	Жирный шрифт
`<em>Курсив</em>`	Курсив
`<del>Зачёркнутый</del>`	~~Зачёркнутый~~
`<u>Подчёркнутый</u>`	Подчёркнутый
`<small>Маленький шрифт</small>`	Маленький шрифт
`<code>Код</code>`	`Код`
`<sup>Верхний индекс</sup>`	^{Верхний индекс}
`<sub>Нижний индекс</sub>`	_{Нижний индекс}

Довольно много тегов, не так-ли? А ведь вариантов их использования становиться куда больше, если учесть возможность их вложения друг в друга. Но это лишь форматирование собственно текста. Отдельно стоит рассмотреть заголовки. "Из коробки" они бывают шести уровней, от первого (самого большого), до шестого (самого маленького). Хотя с помощью CSS и управления размером текста, этих заголовков может быть сколько угодно. А как это сделать мы рассмотрим потом.

тег	отображение
`<h1>Заголовок первого уровня</h1>`	Заголовок первого уровня
`<h2>Заголовок второго уровня</h2>`	Заголовок второго уровня
`<h3>Заголовок третьего уровня</h3>`	Заголовок третьего уровня
`<h4>Заголовок четвёртого уровня</h4>`	Заголовок четвёртого уровня
`<h5>Заголовок пятого уровня</h5>`	Заголовок пятого уровня
`<h6>Заголовок шестого уровня</h6>`	Заголовок шестого уровня

Но и это ещё не всё. Почему? Потому что мы ещё не рассмотрели выравнивание. Каждый, кто работал в MS Word или в чём-то похожем, знает, что выравнивание бывает 4 видов и вызывается через панель инструментов. А как провернуть подобное в HTML? С помощью тегов? Нет, на этот случай существуют специальные атрибуты.

Атрибуты - это некоторые параметры для тегов, которые встраиваются в них и влияют на итоговое отображение элемнтов. Они бывают общие (для всех или почти всех тегов) и специальные (только для тегов). Атрибуты выравнивания относятся к общим и могут влиять на большинство элемнтов (текст, картинки, видео и прочее, это мы расмотрим позже). Итак, перейдём к делу:

тег	отображение
`<p align="left">По левому краю</p>`	По левому краю
`<p align="center">По центру</p>`	По центру
`<p align="right">По правому краю</p>`	По правому краю
`<p align="justify">По ширине страницы</p>`	По ширине страницы

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


<тег атрибут1="значение атрибута 1"
     атрибут2="значение атрибута 2"
        ...
     атрибутN="значение атрибута N">

    контент
</тег>

Теперь разберёмся, как использовать данные теги в общем. Например, расмотрим следующий код:


<!doctype HTML>
<html>
    <head>
        <title>
            Форматирование текста
        </title>
    </head>

    <body>
        <h1 align="center">Пример форматирования текста</h1>

        <h2>Что такое HTML?</h2>

        <p><strong>HTML</strong> — стандартизированный язык разметки документов во Всемирной паутине.</p>
        <p><strong>HTML</strong> - это не язык программирования, я язык гипертекстовой разметки.</p>
        <p>Код HTML5 состоит из <strong><em>тегов</em></strong>.</p>
    </body>
</html>

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

В браузере он отобразиться вот так:

Для лучшего понимания приведём ещё один пример. На этот раз приведём простую задачку из математики.


<html>
    <head>
        <title>
            Решение
        </title>
    </head>

    <body>
        <h2 align="center">Задача</h2>

        <h3>Решить квадратное уравнение:</h3>

        <p>x<sup>2</sup>+3x-4 = 0</p>

        <h3>Решение:</h3>

        <h4>1) Запишем уравнение:</h4>

        <p>x<sup>2</sup>+3x-4 = 0</p>

        <h4>2) Найдём дискриминант:</h4>

        <p>D = 3<sup>2</sup>-4*1*(-4)</p>
        <p>D = 9+16</p>
        <p>D = 25</p>

        <h4>3) Найдём корни уравнения:</h4>

        <p>x<sub>1</sub> = -3+√25/2*1</p>
        <p>x<sub>1</sub> = -3+5/2*1</p>
        <p>x<sub>1</sub> = 2/2</p>
        <p>x<sub>1</sub> = 1</p>
        <p>x<sub>2</sub> = -3-√25/2*1</p>
        <p>x<sub>2</sub> = -3-5/2*1</p>
        <p>x<sub>2</sub> = -8/2</p>
        <p>x<sub>2</sub> = -4</p>

        <h3>Ответ:</h3>

        <p>x<sub>1</sub> = 1</p>
        <p>x<sub>2</sub> = -4</p>
    </body>
</html>

В браузере это отобразиться вот так:

Как можно заметить, в данном примере мы активно используем теги <p>, <sub> и <sub>. Первым мы создаём строки текста, а вторым и третиьм - подстрочные и надстрочные знаки соответственно. Пока что мы не будем рассматривать изменения цвета, типа или размера шрифта, это мы рассмотим позже. А пока что рекомендуем попрактиковаться и создать Web-страницу со следующим текстом:

В браузере это отобразиться вот так:

А после выполнения задания, рекомендуем перейти к следующей теме.

>> Следующая часть >>

Основные теги

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Заголовок пятого уровня

Заголовок шестого уровня