SHARE
TWEET

Untitled

a guest Sep 17th, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Задание 1</title>
  6. </head>
  7. <body>
  8.     <h1 align="center" style="color: red">Основные элементы языка HTML</h1>
  9.     <hr/>
  10.     <h1 style="background: #303030; color: white">1. БЛОЧНЫЕ ЭЛЕМЕНТЫ (block-level elements)</h1>
  11.     <p>Некоторые элементы  HTML, которые могут присутсвовать внутри тега BODY, назывются
  12.     "блочными элементами" (или элементы уровня блока), в то время как другие - "внутренние"
  13.     (элементы уровня текста)</p>
  14.     <p>Элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока.
  15.      Обычно внутренние элементы могут содежрать только данные и другие внутренние элементы.
  16.      Таким образом блочные элементы создают "большие" структуры, чем внутренние элементы.</p>
  17.     <h3 style="border-bottom: 1px dashed #000"><b>1.1 Заголовки</b></h3>
  18.     <p>Существует шесть уровней заголовков - от H1 (наиболее важный) до H6 (наименее важный).<br>
  19.         Все заголовки имеют полужирное начертание и отступы сверху и снизу. Примеры заголовков:<br>
  20.     </p>
  21.  
  22.     <div style="border: 1px solid green; background: #cdcdcd; margin: 20px">
  23.         <h1>Заголовок 1 уровня</h1>
  24.         <h2 style="color: white; background: #303030">Заголовок 2 уровня</h2>
  25.         <h3 style="border-bottom: 1px dashed #000;">Заголовок 3 уровня</h3>
  26.         <h4>Заголовок 4 уровня</h4>
  27.         <h5>Заголовок 5 уровня</h5>
  28.         <h6>Заголовок 6 уровня</h6>
  29.     </div>
  30.  
  31.     <h3 style="border-bottom: 1px dashed #000"><b>1.2 Элементы P и DIV</b></h3>
  32.  
  33.     <div>
  34.         <p>Элементы P представляет абзац. В нем не могу содержаться элементы уровня блока
  35.         (включая и сам блок P). Также нежелательно использовать пустой элемент P, так как браузеры
  36.         игнорируют пустые элементы P</p>
  37.         <p>Элемент Р добавляет пуысте строки вначалае и в конце абзаца</p>
  38.         <p>Элемент DIV создает абзац, но без добавления пустых строк. Он может содержать
  39.         как внутренние элементы, так и блочные</p>
  40.         <p>Наряду с элементом DIV часто используется элемент SPAN, опредялящий информацию
  41.         уровня текста</p>
  42.     </div>
  43.  
  44.     <h3 style="border-bottom: 1px dashed #000"><b>1.3 Форматирование текста с помощью элемента PRE</b></h3>
  45.     <pre>
  46.           ____
  47.         o8%8888,
  48.       o88%88888888.
  49.      8'-     -:8888b
  50.     8'          8888
  51.    d8._=.  ,==_.:888b
  52.    >8  `~` :`~' d8888
  53.    88          ,88888
  54.    88b.  `-~  ':88888
  55.    888b  ~==~ .:88888
  56.    88888o--:':::88888
  57.    '88888| :::' 8888b
  58.    8888^^'       8888b
  59.   d888           ,%888b.
  60.  d88%            %%%8--'-.
  61. /88:.__'        _%-' --- -
  62.     '''::===..-'   = ---. '
  63.     </pre>
  64.     <p></p>
  65.     <h1 align="center" style="color: red">Основные элементы языка HTML</h1>
  66.     <hr/>
  67.     <h1 style="background: #303030; color: white">2. Спецсимволы</h1>
  68.     <div>
  69.         <p>Спецсимволы используются в тех случаях, когда использование обычных символов невозможно или нежелательно.</p>
  70.         <p>Символы, которые должны быть заменены на спецсимволы:</p>
  71.         <p>Спецсимвол < означает открывающую угловую скобку<br>
  72.         Спецсимвол > означает закрывающую угловую скобку<br>
  73.         Спецсимвол " означает кавычку<br>
  74.         Спецсимвол & обозначает амперсанд</p>
  75.        <p>Другие спецсимволы:</p>
  76.        <p>Спецсимвол ® отображает знак "права, находящие в процессе регистрации".<br>
  77.        Спецсимвол ™ отображает знак "зарегистрированная торговая марка"<br>
  78.        Спецсимвол © отображает знак "авторские права на данную продукцию"<br>
  79.        Спецсимвол  отображает знак "Неразбиваемый пробел"</p>
  80.    </div>
  81.    <p></p>
  82.    <h1 align="center" style="color: red">Основные элементы языка HTML</h1>
  83.    <hr/>
  84.    <h1 style="background: #303030; color: white">3. Элементы внутренней разметки (inline elements)</h1>
  85.     <h3 style="border-bottom: 1px dashed #000"><b>3.1 Элемент FONT</b></h3>
  86.     <p>Элемент FONT изменяет размер, цвет и шрифт для текста. Начинаяя с версии HTML 4.0 перенесенв категорию
  87.     "нежелательные элементы" (depdrecated) и подлежит замене на элемент SPAN.</p>
  88.     <h4><b>3.1.1 Атрибут SIZE: размер текста</b></h4>
  89.     <font size="1">Size=1</font>
  90.     <font size="2"> Size=2</font>
  91.     <font size="3"> Size=3</font>
  92.     <font size="4"> Size=4</font>
  93.     <font size="5"> Size=5</font>
  94.     <font size="6"> Size=6</font>
  95.     <font size="7"> Size=7</font>
  96.     <h4><b>3.1.2 Атрибут COLOR: цвет текста</b></h4>
  97.     <div>
  98.         <p>Black ="#000000" <font color="#000000">пример текста</font><br></p>
  99.         White ="#FFFFFF" <font color="#FFFFFF">пример текста</font><br>
  100.         Gray ="#808080" <font color="#808080">пример текста</font><br>
  101.         Silver ="#C0C0C0" <font color="#C0C0C0">пример текста</font><br>
  102.         Red ="#FF0000" <font color="#FF0000">пример текста</font><br>
  103.         Green ="#008000" <font color="#008000">пример текста</font><br>
  104.         Blue ="#0000FF" <font color="#0000FF">пример текста</font><br>
  105.         Другие цвета:<br>
  106.         Lime ="#00FF00" Olive ="#808000" Maroon ="#800000" Navy ="#000080" Purple ="#80080" Teal ="008080"
  107.          Fuchsia ="FF00FF" Aqua ="00FFFF"</p>
  108.     </div>
  109.     <h4><b>3.1.3 Атрибут FACE: шрифтовое оформление текста</b></h4>
  110.     <div>
  111.         <p>
  112.             FACE=FANTASY: <font face="fantasy">пример текста (example text)</font><br>
  113.             FACE=MONOSPACE: <font face="monospace">пример текста (example text)</font><br>
  114.             FACE=CURSIVE: <font face="cursive">пример текста (example text)</font><br>
  115.             FACE=SANS-SERIF: <font face="sans-serif">пример текста (example text)</font><br>
  116.         </p>
  117.     </div>
  118.     <h3 style="border-bottom: 1px dashed #000"><b>3.2 Элемент SPAN</b></h3>
  119.     <div>
  120.         <p>Элемент SPAN позволяет оформлять содержимое с использованием каскадных таблиц стилей.</p>
  121.         <p>Пример:</p>
  122.         <p>Обратите внимание на цвет и фон <span style="color: red; background: yellow; border: 1px solid green">данного текста</span>, а также на рамку вокруг него.</p>
  123.     </div>
  124.     <h3 style="border-bottom: 1px dashed #000"><b>3.3 Начертание символов</b></h3>
  125.     <h4><b>3.3.1 Использование надиндексов и подиндексов:</b></h4>
  126.     <div>
  127.         <p>E=mc<sup>2</sup><br>
  128.         H<sub>2</sub>O</p>
  129.     </div>
  130.     <h4><b>3.3.2 Шрифтовые выделения:</b></h4>
  131.     <div>
  132.         <p>I: выделение <i>курисивом</i><br>
  133.             B: выделение <b>полужирным</b><br>
  134.             U: выделение <u>подчеркиванием</u><br>
  135.             TT: выделение <tt>моноширным</tt></p>
  136.     </div>
  137.     <h4><b>3.3.3 Смысловые элементы("phrase elements"):</b></h4>
  138.     <div>
  139.         <p>
  140.             EM: <em>Выделение.</em><br>
  141.             STRONG: <strong>более сильное выделение.</strong><br>
  142.             CITE: <cite>Цитата или ссылка на другие ресурсы.</cite><br>
  143.             CODE: <code>фрагмент компьютерного кода.</code>
  144.         </p>
  145.     </div>
  146.  
  147.  
  148.  
  149. </body>
  150. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top