Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Задание 1</title>
</head>
<body>
    <h1 align="center" style="color: red">Основные элементы языка HTML</h1>
    <hr/>
    <h1 style="background: #303030; color: white">1. БЛОЧНЫЕ ЭЛЕМЕНТЫ (block-level elements)</h1>
    <p>Некоторые элементы  HTML, которые могут присутсвовать внутри тега BODY, назывются
    "блочными элементами" (или элементы уровня блока), в то время как другие - "внутренние"
    (элементы уровня текста)</p>
    <p>Элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока.
     Обычно внутренние элементы могут содежрать только данные и другие внутренние элементы.
     Таким образом блочные элементы создают "большие" структуры, чем внутренние элементы.</p>
    <h3 style="border-bottom: 1px dashed #000"><b>1.1 Заголовки</b></h3>
    <p>Существует шесть уровней заголовков - от H1 (наиболее важный) до H6 (наименее важный).<br>
        Все заголовки имеют полужирное начертание и отступы сверху и снизу. Примеры заголовков:<br>
    </p>

    <div style="border: 1px solid green; background: #cdcdcd; margin: 20px">
        <h1>Заголовок 1 уровня</h1>
        <h2 style="color: white; background: #303030">Заголовок 2 уровня</h2>
        <h3 style="border-bottom: 1px dashed #000;">Заголовок 3 уровня</h3>
        <h4>Заголовок 4 уровня</h4>
        <h5>Заголовок 5 уровня</h5>
        <h6>Заголовок 6 уровня</h6>
    </div>

    <h3 style="border-bottom: 1px dashed #000"><b>1.2 Элементы P и DIV</b></h3>

    <div>
        <p>Элементы P представляет абзац. В нем не могу содержаться элементы уровня блока
        (включая и сам блок P). Также нежелательно использовать пустой элемент P, так как браузеры
        игнорируют пустые элементы P</p>
        <p>Элемент Р добавляет пуысте строки вначалае и в конце абзаца</p>
        <p>Элемент DIV создает абзац, но без добавления пустых строк. Он может содержать
        как внутренние элементы, так и блочные</p>
        <p>Наряду с элементом DIV часто используется элемент SPAN, опредялящий информацию
        уровня текста</p>
    </div>

    <h3 style="border-bottom: 1px dashed #000"><b>1.3 Форматирование текста с помощью элемента PRE</b></h3>
    <pre>
          ____
        o8%8888,
      o88%88888888.
     8'-     -:8888b
    8'          8888
   d8._=.  ,==_.:888b
   >8  `~` :`~' d8888
   88          ,88888
   88b.  `-~  ':88888
   888b  ~==~ .:88888
   88888o--:':::88888
   '88888| :::' 8888b
   8888^^'       8888b
  d888           ,%888b.
 d88%            %%%8--'-.
/88:.__'        _%-' --- -
    '''::===..-'   = ---. '
    </pre>
    <p></p>
    <h1 align="center" style="color: red">Основные элементы языка HTML</h1>
    <hr/>
    <h1 style="background: #303030; color: white">2. Спецсимволы</h1>
    <div>
        <p>Спецсимволы используются в тех случаях, когда использование обычных символов невозможно или нежелательно.</p>
        <p>Символы, которые должны быть заменены на спецсимволы:</p>
        <p>Спецсимвол < означает открывающую угловую скобку<br>
        Спецсимвол > означает закрывающую угловую скобку<br>
        Спецсимвол " означает кавычку<br>
        Спецсимвол & обозначает амперсанд</p>
        <p>Другие спецсимволы:</p>
        <p>Спецсимвол ® отображает знак "права, находящие в процессе регистрации".<br>
        Спецсимвол ™ отображает знак "зарегистрированная торговая марка"<br>
        Спецсимвол © отображает знак "авторские права на данную продукцию"<br>
        Спецсимвол  отображает знак "Неразбиваемый пробел"</p>
    </div>
    <p></p>
    <h1 align="center" style="color: red">Основные элементы языка HTML</h1>
    <hr/>
    <h1 style="background: #303030; color: white">3. Элементы внутренней разметки (inline elements)</h1>
    <h3 style="border-bottom: 1px dashed #000"><b>3.1 Элемент FONT</b></h3>
    <p>Элемент FONT изменяет размер, цвет и шрифт для текста. Начинаяя с версии HTML 4.0 перенесенв категорию
    "нежелательные элементы" (depdrecated) и подлежит замене на элемент SPAN.</p>
    <h4><b>3.1.1 Атрибут SIZE: размер текста</b></h4>
    <font size="1">Size=1</font>
    <font size="2"> Size=2</font>
    <font size="3"> Size=3</font>
    <font size="4"> Size=4</font>
    <font size="5"> Size=5</font>
    <font size="6"> Size=6</font>
    <font size="7"> Size=7</font>
    <h4><b>3.1.2 Атрибут COLOR: цвет текста</b></h4>
    <div>
        <p>Black ="#000000" <font color="#000000">пример текста</font><br></p>
        White ="#FFFFFF" <font color="#FFFFFF">пример текста</font><br>
        Gray ="#808080" <font color="#808080">пример текста</font><br>
        Silver ="#C0C0C0" <font color="#C0C0C0">пример текста</font><br>
        Red ="#FF0000" <font color="#FF0000">пример текста</font><br>
        Green ="#008000" <font color="#008000">пример текста</font><br>
        Blue ="#0000FF" <font color="#0000FF">пример текста</font><br>
        Другие цвета:<br>
        Lime ="#00FF00" Olive ="#808000" Maroon ="#800000" Navy ="#000080" Purple ="#80080" Teal ="008080"
         Fuchsia ="FF00FF" Aqua ="00FFFF"</p>
    </div>
    <h4><b>3.1.3 Атрибут FACE: шрифтовое оформление текста</b></h4>
    <div>
        <p>
            FACE=FANTASY: <font face="fantasy">пример текста (example text)</font><br>
            FACE=MONOSPACE: <font face="monospace">пример текста (example text)</font><br>
            FACE=CURSIVE: <font face="cursive">пример текста (example text)</font><br>
            FACE=SANS-SERIF: <font face="sans-serif">пример текста (example text)</font><br>
        </p>
    </div>
    <h3 style="border-bottom: 1px dashed #000"><b>3.2 Элемент SPAN</b></h3>
    <div>
        <p>Элемент SPAN позволяет оформлять содержимое с использованием каскадных таблиц стилей.</p>
        <p>Пример:</p>
        <p>Обратите внимание на цвет и фон <span style="color: red; background: yellow; border: 1px solid green">данного текста</span>, а также на рамку вокруг него.</p>
    </div>
    <h3 style="border-bottom: 1px dashed #000"><b>3.3 Начертание символов</b></h3>
    <h4><b>3.3.1 Использование надиндексов и подиндексов:</b></h4>
    <div>
        <p>E=mc<sup>2</sup><br>
        H<sub>2</sub>O</p>
    </div>
    <h4><b>3.3.2 Шрифтовые выделения:</b></h4>
    <div>
        <p>I: выделение <i>курисивом</i><br>
            B: выделение <b>полужирным</b><br>
            U: выделение <u>подчеркиванием</u><br>
            TT: выделение <tt>моноширным</tt></p>
    </div>
    <h4><b>3.3.3 Смысловые элементы("phrase elements"):</b></h4>
    <div>
        <p>
            EM: <em>Выделение.</em><br>
            STRONG: <strong>более сильное выделение.</strong><br>
            CITE: <cite>Цитата или ссылка на другие ресурсы.</cite><br>
            CODE: <code>фрагмент компьютерного кода.</code>
        </p>
    </div>


</body>
</html>