API tools faq
paste
Advertisement
Guest User

3123123

a guest
Jan 24th, 2020
141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.04 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>BEDA S BOSHKOI</title>
  6.     <style>
  7.    p {
  8.     text-indent: 55px;
  9.    }
  10. .fig {
  11.     text-align: center;
  12.    }
  13.    table {
  14.     border-collapse: collapse;
  15.     background: #dc15;
  16.     border: 4px solid #000000;
  17.    }
  18.    TD, TH {
  19.     padding: 5px;
  20.     border: 2px solid #000000;
  21.    }
  22.   </style>
  23. </head>
  24. <body>
  25. <h1>
  26. <caption>2.Теоретические сведения</caption>
  27.     <h2>О языке HTML</h2>
  28.     <p>HTML не является языком программирования, он предназначен для разметки<br>
  29. текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на<br>
  30. нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей<br>
  31. странице, и как они будут располагаться относительно друг друга, определяют метки (tags<br>
  32. или теги). Все, что находится между tags - это тег.</br>
  33.     </p>
  34. </h1>
  35.     <table border="solid 1px white">
  36.  
  37.         <caption>Таблица1</caption>
  38.        <tr>
  39.         <th colspan="2"><font size="5" color="black" face="Arial">Главные теги HTML</font>     </th>
  40.  
  41.        <tr>
  42.         <th>   Название </th>
  43.         <th>   Описание</th>
  44.  
  45.     </tr>
  46.         <tr>
  47.         <td>    &lthtml>…&lt/html>  </td>
  48.        <td>    Является контейнером, который заключает в<br>
  49.            себе все содержимое веб-страницы</br>  </td>
  50.  
  51.    </tr>
  52.        <tr>
  53.        <td>    &lthead>...&lt/head>  </td>
  54.        <td>    Предназначен для хранения элементов, цель<br>
  55. которых - помочь браузеру в работе с<br>
  56.            данными  </br> </td>
  57.  
  58.    </tr>
  59.        <tr>
  60.        <td>   &ltbody>...&lt/body>  </td>
  61.        <td>    Предназначен для хранения содержания<br>
  62. веб-страницы, отображаемого в окне<br>
  63. браузера. Информацию, которую следует<br>
  64. выводить в документе, следует располагать<br>
  65. именно внутри тела.</br>
  66.   </td>
  67.        </tr>
  68.        </table>
  69.  
  70.  
  71.  
  72.  
  73.       <h2> Основные правила расположения тегов:</h2>
  74. <ol>
  75.        <li>Только такая очередность закрывающих тегов верна: тег, который мы открыли первым<br>
  76.            - закрываем последним, второй – предпоследним и т.д.</br></li>
  77.  
  78.        <h4>
  79.                 &lttags1> &lttags2> &lttags3> ...  &lt/tags3> &lt/tags2> &lt/tags1>
  80.        </h4>
  81.           <li> К одному фрагменту текста может применяться сразу несколько тэгов.</li>
  82.  
  83.            <h4>
  84.                &lttt>&ltb>&lti> ... &lt/i>&lt/b>&lt/tt>
  85.  
  86.            </h4>
  87.  
  88. </ol>
  89.  
  90. <h2><b>Создание HTML-документа:</b></h2>
  91.  
  92.        <ol>
  93.     <li>Создать каталог для дальнейших файлов Web-страницы</li>
  94.    <li>Открыть текстовый редактор «Блокнот» и набрать следующий текст:</li>
  95. <p align="left">
  96.    &lthtml><br>
  97.    &lthead><br>
  98.    &lttitle>Мой первый шаг &lt/title><br>
  99.    &lt/head><br>
  100.    &ltbody><br>
  101.    Это моя первая страница.Добро пожаловать!<br>
  102.    &lt/body><br>
  103.    &lt/html><br>
  104. </p>
  105.  
  106.    <li>Сохранить документ названием index.html (Открыть меню Файл - Сохранить как,<br>
  107.        затем указать имя файла index и указать расширение .html);</br></li>
  108.      <li>Открыть получившийся файл в браузере.</li>
  109.         </ol>
  110.  
  111.  
  112. <h2><b>Работа с текстом.</b></h2>
  113.  
  114. <h3><b>Заголовки.</b></h3>
  115. <p>HTML предлагает шесть заголовков разного уровня, которые показывают<br>
  116. относительную важность секции, расположенной после заголовка. Так, тег &lth1><br>
  117. представляет собой наиболее важный заголовок первого уровня, а тег &lth6> служит для<br>
  118. обозначения заголовка шестого уровня и является наименее значительным. По умолчанию,<br>
  119. заголовок первого уровня отображается самым крупным шрифтом жирного начертания,<br>
  120. заголовки последующего уровня по размеру меньше. Теги &lth1>…&lth6> относятся к блочным<br>
  121. элементам, они всегда начинаются с новой строки, а после них другие элементы<br>
  122. отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется<br>
  123. пустое пространство.
  124. </p>
  125.  
  126. <h1>&ltH1>текст&lt/H1></h1>
  127. <h2>&ltH2>текст&lt/H2></h2>
  128. <h3>&ltH3>текст&lt/H3></h3>
  129. <h4>&ltH4>текст&lt/H4></h4>
  130. <h5>&ltH5>текст&lt/H5></h5>
  131. <h6>&ltH6>текст&lt/H6></h6>
  132.  
  133. <h3><b>Текстовый абзац и строка.</b></h3>
  134.  
  135. <p>Тег &ltp>…&lt/p> определяет текстовый абзац. Тег &ltp> является блочным элементом,<br>
  136. всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между<br>
  137. собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если<br>
  138. закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего<br>
  139. блочного элемента.</p>
  140.  
  141. <p>Тег &ltspan> предназначен для определения строчных элементов документа. В отличие<br>
  142. от блочных элементов, таких как &ltp> и других, с помощью тега &ltspan> можно выделить<br>
  143. часть информации внутри других тегов и установить для нее свой стиль. Например, внутри<br>
  144. абзаца (тега &ltp>) можно изменить цвет и размер первой буквы, если добавить начальный и<br>
  145. конечный тег &ltspan> и определить для него стиль текста.
  146. </p>
  147.  
  148. <h3><b>Форматирование текста</b></h3>
  149. <p><caption>Для форматирования текста используются следующие теги:</caption></p>
  150.  
  151. <table border="solid 1px white">
  152.  
  153.    <caption>Таблица 2.</caption>
  154.  
  155.  
  156.       <tr>
  157.        <th>   Название </th>
  158.        <th>   Описание</th>
  159.  
  160.    </tr>
  161.        <tr>
  162.        <td>    &ltb>…&lt/b>  </td>
  163.        <td>    Устанавливает жирное начертание шрифта.   </td>
  164.  
  165.    </tr>
  166.        <tr>
  167.        <td>    &lti>…&lt/i>  </td>
  168.        <td>    Устанавливает курсивное начертание шрифта.</td>
  169.  
  170.    </tr>
  171.        <tr>
  172.        <td>   &ltu>…&lt/u>  </td>
  173.        <td>    Добавляет подчеркивание к тексту
  174.   </td>
  175.  
  176. <tr>
  177.        <td>    &lts>…&lt/s>  </td>
  178.        <td>   Отображает текст как перечеркнутый </td>
  179.  
  180.    </tr><tr>
  181.        <td>    &ltbig>…&lt/big>  </td>
  182.        <td>    Увеличивает размер шрифта на единицу по<br>
  183.                сравнению с обычным текстом </td>
  184.  
  185.    </tr><tr>
  186.        <td>    &ltsmall>…&lt/small>  </td>
  187.        <td>    Уменьшает размер шрифта на единицу по<br>
  188.                сравнению с обычным текстом. </td>
  189.  
  190.    </tr><tr>
  191.        <td>    &ltsup>…&lt/sup>  </td>
  192.        <td>    ПОтображает шрифт в виде верхнего<br>
  193.                индекса. Шрифт при этом отображается<br>
  194.                выше базовой линии текста и<br>
  195.                уменьшенного размера. </td>
  196.  
  197.    </tr><tr>
  198.        <td>    &ltsub>…&lt/sub>  </td>
  199.        <td>    Отображает шрифт в виде нижнего индекса.<br>
  200.                Текст при этом располагается ниже базовой<br>
  201.                линии остальных символов строки и<br>
  202.                уменьшенного размера.</td>
  203.  
  204.    </tr>
  205.  
  206. <tr>
  207.        <th colspan="2"> Допустимо использовать эти тег совместно с другими<br>
  208.            тегами, которые определяют начертание текста   </th></tr>
  209. </table>
  210.  
  211.    <h2><b>Изображения.</b></h2>
  212.        <h3><b>Добавление изображения на страницу.</b></h3>
  213.  
  214.    <p>&ltimg> - тег предназначен для отображения на веб-странице изображений в<br>
  215. графическом формате GIF, JPEG или PNG. В атрибуте src, в двойных кавычках, указывается<br>
  216. путь к Вашему изображению относительно папки с Web-страницей, где это изображение<br>
  217. будет выведено. Необходимо учитывать регистр и названия файла и его расширения.<font color="red">Не<br>
  218. допускается использования любых цифр, пробелом и имён на кириллице в название файлов.<br>
  219. Так же полный путь к картинке прописывать не надо.
  220. </font></p>
  221.  
  222. <p align="left">
  223. &ltimg src="image/myimage.jpg">
  224. </p>
  225.  
  226. <h3><b>Атрибуты для тега &ltimg>.</b></h3>
  227.  
  228. <h3><b>Align.</b></h3>
  229.  
  230. <p>Для изображений можно указывать их положение относительно текста или других<br>
  231. изображений на веб-странице. Способ выравнивания изображений задается атрибутом <i>align</i>.
  232. </p>
  233. <table>
  234.  
  235.    <caption>Таблица 3.</caption>
  236.  
  237. <tr>
  238.        <th>   Название </th>
  239.        <th>   Описание</th>
  240.  
  241.    </tr>
  242.        <tr>
  243.        <td>    top  </td>
  244.        <td>    Верхняя граница изображения<br>
  245.                выравнивается по самому высокому<br>
  246.                элементу текущей строки.   </td>
  247.  
  248.    </tr>
  249.        <tr>
  250.        <td>    right </td>
  251.        <td>    Выравнивает изображение по правому краю<br>
  252.                окна.</td>
  253.  
  254.    </tr>
  255.        <tr>
  256.        <td>   bottom </td>
  257.        <td>    Выравнивание нижней границы<br>
  258.                изображения по окружающему тексту.
  259.   </td>
  260.  
  261. <tr>
  262.        <td>    left  </td>
  263.        <td>   Выравнивает изображение по левому краю<br>
  264.                окна. </td>
  265.  
  266.    </tr><tr>
  267.        <td>    middle  </td>
  268.        <td>    Выравнивание середины изображения по<br>
  269.                базовой линии текущей строки.
  270.     </td>
  271.  
  272.    </tr>
  273.  
  274.  
  275. </table>
  276.  
  277.  
  278. <h3><b>Hspace и vspace.</b></h3>
  279. <p>Для любого изображения можно задать невидимые отступы по горизонтали и<br>
  280.    вертикали с помощью атрибутов <i>hspace и vspace</i>. Особенно это актуально при обтекании<br>
  281. рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение,<br>
  282. необходимо вокруг него добавить пустое пространство.</p>
  283.  
  284. <table>
  285.    <caption>Таблица 4.</caption>
  286.  
  287. <tr>
  288.        <th>   Название </th>
  289.        <th>   Описание</th>
  290.  
  291.    </tr>
  292.        <tr>
  293.        <td>  <i>hspace </i></td>
  294.        <td>    Расстояние между текстом и рисунком по<br>
  295.                горизонтали.
  296.  </td>
  297.  
  298.    </tr>
  299.        <tr>
  300.        <td><i>vspace</i> </td>
  301.        <td>    Расстояние между текстом и рисунком по<br>
  302.                вертикали.</td>
  303.        </tr>
  304. </table>
  305.  
  306.  
  307. <h3><b>Alt.</b></h3>
  308. <p>Атрибут <i>alt</i> устанавливает альтернативный текст для изображений. Такой текст<br>
  309. позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке<br>
  310. изображений. Поскольку загрузка изображений происходит после получения браузером<br>
  311. информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере<br>
  312. загрузки текст будет сменяться изображением.
  313. </p>
  314.  
  315. <h3><b>Width и height.</b></h3>
  316. <p><span>Для изменения размеров изображения средствами HTML предусмотрены атрибуты<br>
  317. height и width. Допускается использовать значения в пикселах или процентах. Если<br>
  318. установлена процентная запись, то размеры изображения вычисляются относительно<br>
  319. родительского элемента - контейнера, где находится тег &ltimg>. В случае отсутствия<br>
  320. родительского контейнера, в его качестве выступает окно браузера. Иными словами,<br>
  321. width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы.<br>
  322. Добавление только одного атрибута width или height сохраняет пропорции и отношение<br>
  323. сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить<br>
  324.    его первоначальную высоту и ширину</span></p>
  325. <p>Обязательно задавайте размеры всех изображений на веб-странице. Это несколько<br>
  326. ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого <br>
  327. рисунка после его получения. Это утверждение особенно важно для изображений,<br>
  328. размещенных внутри таблицы.
  329. </p>
  330.  
  331. <p>Ширину и высоту изображения можно менять как в меньшую, так и большую сторону.<br>
  332. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается<br>
  333. неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать<br>
  334. недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот<br>
  335. увеличение размеров приводит к обратному эффекту - размер изображения велик, но файл<br>
  336. относительно изображения аналогичного размера загружается быстрее. Но качество рисунка<br>
  337. при этом ухудшается.</p>
  338.  
  339. <table>
  340.    <caption>Таблица 5.</caption>
  341. <tr>
  342.        <th>   Название </th>
  343.        <th>   Описание</th>
  344.  
  345.    </tr>
  346.        <tr>
  347.        <td>  <i>width </i></td>
  348.        <td>   Ширина изображения.
  349.  </td>
  350.  
  351.    </tr>
  352.        <tr>
  353.        <td><i>height</i> </td>
  354.        <td>    Высота изображения.</td>
  355.        </tr>
  356. </table>
  357.  
  358. <h3><b>Border.</b></h3>
  359. <p>Изображение, помещаемое на веб-страницу, можно поместить в рамку различной<br>
  360. ширины. Для этого служит атрибут border тега &ltimg>.<font color="red">В некоторых браузерах рамка всегда<br>
  361. отображается и чтобы её убрать, необходимо задать border значение «0».</font></p>
  362.  
  363. <h2><b>2. Гиперссылки.</b></h2>
  364. <h3><b>Добавление ссылки.</b></h3>
  365. <p>Тег &lta> является одним из важных элементов HTML и предназначен для создания<br>
  366. ссылок. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также<br>
  367. указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута<br>
  368. <i>href</i> используется адрес документа (URL, Universal Resource Locator, универсальный<br>
  369. указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным<br>
  370. и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта<br>
  371. или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия,<br>
  372. построены относительно текущего документа или корня сайта.
  373. </p>
  374. <p>Обязательным атрибутом для ссылки являет <i>title</i> – добавляет поясняющий текст к<br>
  375. ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши<br>
  376. задерживается на ссылке.</p>
  377.  
  378. <h3><b>Якоря.</b></h3>
  379. <p>В данных упражнение применяются «якори» - ссылки на какие-либо позиции внутри<br>
  380. документа. Для того, чтобы задать якорь например параграфу &ltp> - используется атрибут id,<br>
  381. в котором задается уникальное имя <font color="red">(имя не может повторятся в одном документе)</font>. Ссылка на<br>
  382. якорь создается как обычная ссылка, но вместо пути к файлу задается созданное ранее имя,
  383. после знака #.
  384. </p>
  385.  
  386. <h2><b>Списки.</b></h2>
  387. <h3><b>Маркированный список.</b></h3>
  388. <p>Тег <i>&ltul></i> устанавливает маркированный список. Каждый элемент списка должен<br>
  389. начинаться с тега <i>&ltli></i>. У тега <i>&ltul>…&lt/ul></i> есть атрибут <i>type</i>, который устанавливает вид<br>
  390. маркера.
  391. </p>
  392.  
  393. <table>
  394.    <caption>Таблица 7</caption>
  395. <tr>
  396.        <th>   Название </th>
  397.        <th>   Описание</th>
  398.  
  399.    </tr>
  400.        <tr>
  401.        <td>  <i>&ltul type="disc"> ... &lt/ul> </i></td>
  402.            <td>   <ul type="disc">
  403.                <li>Текст один.</li>
  404.                <li>Текст два.</li>
  405.                <li>Текст три.</li>
  406.                    </ul>           </td>
  407.                </tr>
  408.            <tr>
  409.        <td><i>&ltul type="circle"> ... &lt/ul></i> </td>
  410.        <td> <ul type="circle">
  411.                <li>Текст один.</li>
  412.                <li>Текст два.</li>
  413.                <li>Текст три.</li>
  414.        </ul>               </td>
  415.        </tr>
  416.  tr>
  417.        <td><i>&ltul type="square"> ... &lt/ul></i> </td>
  418.        <td> <ul type="square">
  419.                <li>Текст один.</li>
  420.                <li>Текст два.</li>
  421.                <li>Текст три.</li>
  422.        </ul>               </td>
  423. </table>
  424.  
  425. <h3><b>Нумерованный список.</b></h3>
  426. <p> Тег <i>&ltol></i> устанавливает нумерованный список. Каждый элемент списка должен<br>
  427.    начинаться с тега <i>&ltli></i>. У тега <i>&ltol>…&lt/ol></i> есть атрибут type, который устанавливает вид<br>
  428.    маркера. Также у тега <i>&ltol></i> есть атрибут <i>reversed</i>, который меняет нумерацию в списке на<br>
  429.    обратный порядок. Атрибут <i>start</i> устанавливает номер, с которого будет начинаться список</br>
  430.  
  431. <table>
  432.    <caption>Таблица 8.</caption>
  433.  
  434. <tr>
  435.        <th>   Название </th>
  436.        <th>   Описание</th>
  437.  
  438.    </tr>
  439.        <tr>
  440.        <td>  <i>&ltol type="A"> ... &lt/ol> </i></td>
  441.            <td>   <ol type="A">
  442.                <li>Текст один.</li>
  443.                <li>Текст два.</li>
  444.                <li>Текст три.</li>
  445.                    </ol>           </td>
  446.                </tr>
  447.            <tr>
  448.        <td><i>&ltol type="a"> ... &lt/ol></i> </td>
  449.        <td> <ol type="a">
  450.                <li>Текст один.</li>
  451.                <li>Текст два.</li>
  452.                <li>Текст три.</li>
  453.        </ol>               </td>
  454.        </tr>
  455.  <tr>
  456.        <td><i>&ltol type="I"> ... &lt/ol></i> </td>
  457.        <td> <ol type="I">
  458.                <li>Текст один.</li>
  459.                <li>Текст два.</li>
  460.                <li>Текст три.</li>
  461.        </ol>               </td>
  462.  </tr>
  463.    <tr>
  464.        <td><i>&ltol type="i"> ... &lt/ol></i> </td>
  465.        <td> <ol type="i">
  466.                <li>Текст один.</li>
  467.                <li>Текст два.</li>
  468.                <li>Текст три.</li>
  469.        </ol>               </td>
  470.  </tr>
  471.    <tr>
  472.        <td><i>&ltol type="1"> ... &lt/ol></i> </td>
  473.        <td> <ol type="1">
  474.                <li>Текст один.</li>
  475.                <li>Текст два.</li>
  476.                <li>Текст три.</li>
  477.        </ol>               </td>
  478.  </tr>
  479. </table>
  480.  
  481.  
  482. <h2><b>Мнемоники (entities, спец.символы), линия.</b></h2>
  483. <p>Символ-мнемоника - это конструкция <i>SGML</i>, которая ссылается на символ из набора<br>
  484. символов текстового файла. В HTML предопределено большое количество спецсимволов.<br>
  485. Чтобы вставить определённый символ в разметку, нужно вставить определенную ссылку-<br>
  486.    мнемонику в HTML-структуру.</p>
  487. <table>
  488.  <caption>Таблица 9.</caption>
  489. <tr>
  490.        <th>   Символ</th>
  491.        <th>   Мнемоника</th>
  492.        <th>   Описание</th>
  493.  
  494.    </tr>
  495.        <tr>
  496.        <td>  <i>&copy; </i></td>
  497.         <td>  <i>&amp;copy; </i></td>
  498.         <td>   Знак охраны авторского<br>
  499.                права (copyright).</td>
  500.         </tr>
  501.        <tr>
  502.         <td>  <i>&reg; </i></td>
  503.         <td>  <i>&amp;reg; </i></td>
  504.         <td>   Знак зарегистрированной<br>
  505.                торговой марки (registered).</td>
  506.         </tr><tr>
  507.         <td>  <i>&trade; </i></td>
  508.         <td>  <i>&amp;trade; </i></td>
  509.         <td>   Знак торговой марки (trade<br>
  510.                mark).</td>
  511.         </tr><tr>
  512.         <td>  <i>&nbsp; </i></td>
  513.         <td>  <i>&amp;nbsp; </i></td>
  514.         <td>   Неразрывный пробел</td>
  515.         </tr><tr>
  516.         <td>  <i>&ndash; </i></td>
  517.         <td>  <i>&amp;ndash; </i></td>
  518.         <td>   Дефис.</td>
  519.         </tr><tr>
  520.         <td>  <i>&mdash; </i></td>
  521.         <td>  <i>&amp;mdash; </i></td>
  522.         <td>   Тире</td>
  523.         </tr><tr>
  524.         <td>  <i>&laquo; </i></td>
  525.         <td>  <i>&amp;laquo; </i></td>
  526.         <td>   Левая двойная угловая<br>
  527.                кавычка.</td>
  528.         </tr><tr>
  529.         <td>  <i>&raquo; </i></td>
  530.         <td>  <i>&amp;raquo; </i></td>
  531.         <td>   Правая двойная угловая<br>
  532.                кавычка.</td>
  533.         </tr>
  534. </table>
  535.  
  536.  
  537. <p class="fig"><img src="bip.jpg"
  538.   width="800" height="300" alt="Фотография"></p>
  539.  
  540.  
  541.  
  542.  
  543.  
  544. </body>
  545. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!