PunGy · September 4, 2016 06:19
diff --git a/Учебник.html b/Учебник.html
 <html>
 <head>
 	<meta charset="utf-8">
 	<title>Главная</title>
 </head>
 <body>
 <link rel="stylesheet" href="style.css">
 	<h1 align="center">Учебник</h1>
 	<ol>
 	<li><a href="#teg" title="Теги">Теги</a></li>
 		<ul>
 		<li><a href="#teg1" title="Основные теги"> Основные теги</li>
 		<li><a href="#teg2" title="Текстовые теги"> Текстовые теги</a></li>
 		</ul>
 	<li><a href="#atribut" title="Атрибуты">Атрибуты</a></li>
 	<li><a href="#img" title="Изображения">Изображения</a></li>
 	<li><a href="#url" title="Адреса">Адреса</a></li>
 	<li><a href="#table" title="Таблицы">Изображения</a></li>
 	</ol>
 	<hr/>
 	<h2>Теги</h2>
 	<h3 id="#teg1">Основные теги</h3>
 	<span class="tag"><strong><a href="https://webref.ru/html/html" target="_blank">&lt;html&gt;</strong></a></span> - с этого тега начинается и заканчивается код.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/head" target="_blank">&lt;head&gt;</strong></a></span> - "Голова" программы, туда нужно вписывать мета-теги, пишется после тега <b>HTML</b>.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/body" target="_blank">&lt;body&gt;</strong></a></span> - в нем хранится содержание самой веб-страницы(контента) - тексты, изображения, теги, скрипты и т.д.<br/>
 	<span class="tag"><strong><a href="https://htmlacademy.ru/courses/26/run/4" target="_blank">&lt;meta charset="utf-8"&gt;</strong></a></span> - его нужно вводить внутри тега <b>head</b>, он используется для того для того, чтобы веб-браузер мог правильно отображать текст на странице.<br/>
 	<h3 id="#teg2">Текстовые теги</h3>
 	<span class="tag"><strong><a href="https://webref.ru/html/p" target="_blank">&lt;p&gt;</a></strong></a></span> - текстовый абзац, всегда начинается с новой строки.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/b" target="_blank">&lt;b&gt;</strong></a></span> - текст жирным шрифтом.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/big" target="_blank">&lt;big&gt;</strong></a></span> - текст крупным щрифтом.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/i" target="_blank">&lt;i&gt;</strong></a></span> - текст курсивом.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/small" target="_blank">&lt;small&gt;</strong></a></span> - текст мелким шрифтом.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/strong" target="_blank">&lt;strong&gt;</strong></a></span> - важный текст, выделяется жирным шрифтом.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/sub" target="_blank">&lt;sub&gt;</strong></a></span> - подстрочный текст.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/sup" target="_blank">&lt;sup&gt;</strong></a></span> - надстрочный текст.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/ins" target="_blank">&lt;ins&gt;</strong></a></span> - выделяет текст, который был добавлен в новую версию документа.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/del" target="_blank">&lt;del&gt;</strong></a></span> - удаленый текст, зачеркивается.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/em" target="_blank">&lt;em&gt;</strong></a></span> - предназачен для акцентирования текста, выделяет курсивом.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/h1" target="_blank">&lt;h1...h6&gt;</strong></a></span> - заголовки<br/>
 	<h3>Теги таблицы</h3>
 	<span class="tag"><strong><a href="https://webref.ru/html/table" target="_blank">&lt;table&gt;</strong></a></span> - начало таблицы.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/td" target="_blank">&lt;td&gt;</strong></a></span> - Предназначен для создания одной ячейки таблицы<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/tr" target="_blank">&lt;tr&gt;</strong></a></span> - служит контейнером для создания строки таблицы.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/th" target="_blank">&lt;th&gt;</strong></a></span> - заголовочная ячейка таблицы.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/html/caption" target="_blank">&lt;caption&gt;</strong></a></span> - заголовок таблицы.<br/>
 	<hr/>
 	<h1>CSS</h1>
 	<span class="tag"><strong><a href="https://webref.ru/css/border" target="_blank">border</strong></a></span> - Позволяет установить толщину, стиль и тд.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/vertical-align" target="_blank">vertical-align</strong></a></span> - Выравнивает элемент по вертикали относительно своего родителя text-align.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/text-align" target="_blank">text-align</strong></a></span> - Определяет горизонтальное выравнивание текста в пределах элемента.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/color" target="_blank">color</strong></a></span> - Цвет текста.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/border-color" target="_blank">border-color</strong></a></span> - Цвет рамок.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/width" target="_blank">width</strong></a></span> - Устанавливает ширину блочных или заменяемых элементов.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/margin" target="_blank">margin</strong></a></span> - Устанавливает величину отступа от каждого края элемента.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/padding" target="_blank">padding</strong></a></span> - Устанавливает значение полей вокруг содержимого элемента.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/font-size" target="_blank">font-size</strong></a></span> - Определяет размер шрифта элемента.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/font-family" target="_blank">font-family</strong></a></span> - Устанавливает семейство шрифта.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/border-collapse" target="_blank">border-collapse</strong></a></span> - Устанавливает, как отображать границы вокруг ячеек таблицы.<br/>
 	<span class="tag"><strong><a href="https://webref.ru/css/border-spacing" target="_blank">border-spacing</strong></a></span> - Задаёт расстояние между границами ячеек в таблице.<br/>
 	<hr/>
 	<h2 id="#img">Изображения</h2>
 	<h3>Добавление изображения</h3>
 	<p>Для того чтобы добавить изображение на страницу, нужно использовать тег <b>&lt;img&gt;</b> с атрибутом <b>src</b>, в котором указан адрес картинки, например:<br/>
 	<b>&lt;img src="http://images.techhive.com/images/article/2014/04/windows-xp-bliss-start-screen-100259803-orig.jpg"&gt;</b><br/>
 	вот так выглядит в действии:
 	<img src="http://images.techhive.com/images/article/2014/04/windows-xp-bliss-start-screen-100259803-orig.jpg" width="300" height="150"><br/>
 	(Самыми распространёными форматами изображения являются <b>jpg и jpeg</b>).</p>
 	<h3>Размеры изображения</h3>
 	<p>Для того чтобы изменить размер изображения, нужно использовать атрибуты <b>width</b> для изменения ширины, и <b>height</b> для изменения высоты.<br/>
 	Вот так выглядит полный код изображения выше:<br/>
 		<b>&lt;img src="http://images.techhive.com/images/article/2014/04/windows-xp-bliss-start-screen-100259803-orig.jpg" width="300" height="150"&gt;</b></p>
 	<h3>Альтернативный текст</h3>
 	<p>Если у пользователя отключены изображения или их невозможно загрузить, то в браузере отобразится альтернативный текст.<br/>
 	Пример: <img src="http://images.techhive.com/images/article/2014/04/windows-xp-bliss-start-screen-02803-orig.jpg" width="300" height="150" alt="обои windows-xp"><b>&lt;img src="http://images.techhive.com/images/article/2014/04/windows-xp-bliss-start-screen-02803-orig.jpg" width="300" height="150" alt="обои windows-xp"&gt;</b>
 	<hr/>
 	<h2 id="#url">Адреса</h2>
 	<p>Ссылка обычно выглядит как подчёркнутый участок текста, щёлкая на который вы переходите на другую страницу, открываете изображение или начинаете скачивать файл.<br/>
 	Если представить, что интернет это огромная сеть из множества узлов, то ссылки будут нитками, соединяющими все узлы этой сети.<br/>
 	Ссылки создаются с помощью очень простого и короткого тега <b>&lt;a&gt;</b>. Например, вот так:<br/>
 	<b>&lt;a href="https://htmlacademy.ru">HTML Academy&gt;</b></p>
 	<br/>
 	<h3>Адрес ссылки</h3>
 	<p>Тег <strong>&lt;a&gt;</strong> без адреса бесполезен, так как он описывает ссылку, которая никуда не ведёт.<br/>

 Адрес ссылки задаётся с помощью атрибута <strong>href</strong>:<br/>

 <b>&lt;a href="http://keksby.ru"&gt;The Great Keksby&lt;/a&gt;</b>
 У ссылки в примере задан адрес <b>http://keksby.ru.</b>

 Значением атрибута является <strong>URL</strong>, который обычно называют просто адрес.<br/> Адреса бывают разные: <i>абсолютные, относительные, указывающие на страницу, на файл, изображение, содержащие якорь и так далее</i>. А значит и ссылка может указывать на любой объект в интернете.
 </p>
 <h3>Абсолютные и относительные адреса</h3>
 <p>Поговорим поподробнее об адресах. Они могут быть абсолютными и относительными.<br/>
 <br/>
 Абсолютные адреса содержат в себе протокол, имя сервера и путь. Например, в адресе <b>https://htmlacademy.ru/courses:</b><br/>
 <br/>
 <strong>https://</strong>       — это протокол<br/>
 <strong>htmlacademy.ru</strong> — имя сервера, также называется домен или хост<br/>
 <strong>/courses</strong>       — путь<br/>
 Абсолютный адрес хорош тем, что однозначно указывает расположение документа. Браузер просто запрашивает по указанному протоколу с указанного сервера документ с указанным путём.<br/>
 <br/>
 Иногда абсолютные адреса записываются в укороченном виде, например вот так: <b>/courses</b>.<br/>
 <br/>
 В этом случае, браузер подставляет протокол и сервер текущей страницы. Например, если на сайте <b>https://htmlacademy.ru</b> есть ссылка с адресом <b>/courses</b>, то браузер для запроса преобразует её в такую: <b>https://htmlacademy.ru/courses</b><br/>
 Используйте укороченные абсолютные адреса при задании ссылок внутри своего сайта, так как в случае изменения домена сайта вам не придётся ничего менять.
 </p>
 <h3>Относительные адреса</h3>
 <p>В относительных адресах нет ни протокола, ни имени сервера, а путь не начинается со слэша /. Вот примеры относительных адресов:

 <b>courses/1<br/>
 ./courses<br/>
 ../../run/1</b><br/>
 В <b>относительных</b> адресах могут использоваться специальные символы, аналогичные символам в путях файловых систем: . и ...

 Если браузер видит, что у ссылки задан относительный адрес, то он должен преобразовать этот адрес в абсолютный, чтобы знать, куда ведёт ссылка. Для этого браузер использует текущий адрес страницы. Например, так преобразуются адреса разных ссылок на одной и той же странице:</p>
 <table border="1">
 	<tr>
 	<td>Текущий адрес</td>
 	<td>Адрес ссылки</td>
 	<td>Преобразуется в</td>
 	</tr>
 	<tr>
 	<td>http://site.ru/news/1</td>
 	<td>2</td>
 	<td>http://site.ru/news/2</td>
 	</tr>
 	<tr>
 	<td>http://site.ru/news/1</td>
 	<td>..</td>
 	<td>	http://site.ru/</td>
 	</tr>
 	<tr>
 	<td>http://site.ru/users/profile/1</td>
 	<td>../../contacts</td>
 	<td>http://site.ru/contacts</td>
 	</tr>
 </table>
 <p>Использовать относительные адреса для навигации по сайту не рекомендуется.<br/> Однако относительные адреса бывают полезны, например, во внешних CSS-файлах.</p><br/>
 <h3>Ссылка на файл</h3>
 <p>Ссылка может указывать на любую веб-страницу, на любой файл. Если щёлкнуть по ссылке, ведущей на файл, то браузер предложит его скачать.<br/>
 Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. В последнее время браузеры научились открывать <b>.pdf</b> файлы и многие другие.<br/></p>
 <p>Пример ссылки на скачивание:</p>
 <p><b>&lt;a href="/assets/course4/file.rtf">Скачать простой текстовый файл&lt;/a&gt;</b></p>
 <h3>Ссылка с якорем</h3>
 <p>Ссылки с якорем обычно используются для создания навигации внутри страницы. Например, оглавления в начале страницы с большой статьёй.<br/>
 Ссылка с якорем содержит символ <b>#</b>, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута <b>id</b>, который может быть задан у любого тега.<br/>
 Можно задать адрес, состоящий из одного якоря, например:<br/>
 <b>&lt;a href="#glava1">Глава 1&lt;/a&gt;</b>
 При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом <b>id</b> со значением <b>glava1</b> и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.<br/>
 Якорь можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу произойдёт прокрутка к заданной части этой страницы.</p>
 <br/>
 <h3>Подсказки</h3>
 <p>Атрибут <b>title</b> можно добавить к любому слову или ссылке, при наведении на которую вылезет окошко подсказки.
 Вот пример: <a href="#" title="любой текст">наведи на этот текст!</a>;;; <b>&lt;a href="#" title="любой текст">наведи на этот текст!&lt;/a&gt;</p></b>
 <hr/>
 <h2>Таблицы</h2>
 <h3>Добавление строки</h3>
 Простейшая таблица описывается с помощью трёх тегов:
 <ol>
 <li><b>&lt;table&gt;</b> обозначает таблицу.</li>

 <li><b>&lt;tr&gt;</b> расшифровывается как «table row», обозначает строку таблицы.</li>

 <li><b>&lt;td&gt;</b> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.</li>
 </ol>
 Теги <b>&lt;td&gt;</b> располагаются внутри тегов <b>&lt;tr&gt;</b>, а те, в свою очередь, внутри <b>&lt;table&gt;</b>. Почти всё текстовое содержимое таблицы размещается внутри тегов <b>&lt;td&gt;</b><br/>.

 В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <b>&lt;tr&gt;</b> должно быть одинаковое количество <b>&lt;td&gt;</b>.
 <table border="5">
            <tr>
                <td>Браузер</td>
                <td>Посещения</td>
            </tr>
            <tr>
                <td>Mozilla Firefox</td>
                <td>163</td>
            </tr>
            <tr>
                <td>Google Chrome</td>
                <td>78</td>
            </tr>
            <tr>
                <td>Safari</td>
                <td>35</td>
            </tr>
        </table>
        <br/>
        <h3>Задаём рамки с помощью CSS</h3>
        <p>Вы научились создавать простые таблицы, добавлять в них любое количество строк и столбцов. Теперь пришло время оформить эти таблицы.

 Таблицы в предыдущих заданиях отображались с рамками по умолчанию. Такие рамки отображаются, если у тега <b>&lt;table&gt;</b> задан атрибут <b>border</b> с ненулевым значением.

 Но с помощью атрибута <b>border</b> гибко управлять рамками не получается. С его помощью можно только изменять их толщину.

 Поэтому мы будем учиться использовать <b>CSS</b>. С помощью <b>CSS-свойства border</b> можно задавать как внешние рамки таблицы, так и рамки каждой ячейки.</p>
 <pre>
 <b>CSS</b>
 table {
    border: 3px solid black;
 }
 td {
    border: 3px solid lightgray;
 }
 </pre>	
 <br/>
 <h3>Улучшаем отображение рамок</h3>
 <p>Мы задали рамки таблицы с помощью <b>CSS</b>, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.

 Чтобы избавиться от таких двойных рамок, используется <b>CSS-свойство</b> таблицы <b>border-collapse</b>. Вот так:</p>
 <pre>
 table {
  border-collapse: collapse;
 }
 </pre>	
 Значение <b>collapse</b> убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.
 <br/>
 <h3>Горизонтальные и вертикальные рамки</h3>
 <p>Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью. Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали. Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.

 Такие эффекты легко достигаются с помощью <b>CSS</b>. Для этого необходимо использовать не свойство <b>border</b>, которое задаёт рамки для всех сторон ячейки, а одно из свойств:</p>
 <ul>
 	<li><b>border-top</b></li>
 	<li><b>border-right</b></li>
 	<li><b>border-bottom</b></li>
 	<li><b>border-left</b></li>
 </ul>

 <p>Эти свойства задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.</p>
 <h3>Отступы внуртри ячеек</h3>
 <p>Мы освоили простейшие приемы работы с рамками таблицы. Таблица выглядит неплохо, но содержимое ячеек прилепает к рамкам. Если добавить отступы внутри ячеек, то всё будет лучше выглядеть.<br/>
 Отступы внутри ячеек можно добавить с помощию атрибута <b>cellpading</b> тега <b>&lt;table&gt;</b> но лучше его не использовать, а задавать отступы с помощью <b>CSS</b>.
 <br/>
 <b>CSS</b>-свойство <b>padding</b> задаёт "внутренние отступы элемента" со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:</p>
 <ul>
 	<li><b>padding-top</b></li>
 	<li><b>padding-right</b></li>
 	<li><b>padding-bottom</b></li>
 	<li><b>padding-left</b></li>
 </ul>
 <p>Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой <b>CSS-код</b>:</p>
 <pre>
 	<b>td {
  padding: 10px;
  padding-left: 20px;
 }</b>
 </pre>
 <h3>Отступы между ячейками</h3>
 <p>Отступы между ячейками можно задать:</p>
 <ul>
 	<li>с помощью атрибута <b>cellspacing</b> тега <b>&lt;table&gt;</b></li>
 	<li>Или с помощью <b>CSS</b>-свойства <b>border-spacing.</b></li>
 </ul>
 <p>Свойство <b>border-spacing.</b> задаётся для таблицы, в отличие от <b>padding</b>, которое задаётся для ячеек.</p>
 <h3>Ячейки-заголовки</h3>
 <p>Обычно в таблицах выделяют названия столбцов или строк. В HTML для этого предусмотрен специальный тег <b>&lt;th&gt;</b>, который расшифровывается как <b>«table header»</b> и обозначает ячейку-заголовок. Тег <b>&lt;th&gt;</b> аналогичен <b>&lt;td&gt;</b>, он так же должен располагаться внутри <b>&lt;tr&gt;</b>, для него стилями можно задавать все те же свойства.<br/>
 По умолчанию текст внутри <b>&lt;th&gt;</b> выделяется жирным шрифтом.
 </p>
 <h3>Заголовок таблицы</h3>
 <p>Заголовок таблицы можно сделать с помощью тега <b>&lt;caption&gt;</b>
 <br/>
 Тег <b>&lt;caption&gt;</b> должен размещаться внутри тега <b>&lt;table&gt;</b>, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:
 <pre><b>&lt;table&gt;
  &lt;caption&gt;Текст&lt;/caption&gt;
  ...
 &lt;/table&gt;</b></pre>
 <br/>
 Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.<br/>
 По вертикали заголовок таблицы перемещается CSS-свойством <b>caption-side</b> со значениями <b>top и bottom</b>, которые обозначают до и после таблицы соответственно.<br/>

 По горизонтали заголовок таблицы выравнивается CSS-свойством <b>text-align</b> со значениями <b>left, right и center</b>. Пример: 
 <pre>
 <b>caption{
    caption-side: bottom /* Снизу */
    text-align: left /* Слева */
 }
 </b>
 </pre>
 </p>
 <h3>Объединение ячейки в строках(по горизонтали)</h3>
 <p>Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <b>&lt;th&gt;</b> или <b>&lt;td&gt;</b>.
 <br/>
 Когда вы задаёте ячейке атрибут <b>colspan</b> со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».
 </p>
 <h3>Объединение ячейки в строках(по вертикали)</h3>
 <p>Объединение по вертикали осуществляется с помощью атрибута <b>rowspan</b> у тега <b>&lt;td&gt;</b> или <b>&lt;th&gt;</b>.
 <br/>
 Когда вы задаёте ячейке атрибут <b>rowspan</b> со значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой» мы избавимся от этого столбца.</p>
 <br/>
 <img src="https://htmlacademy.ru/assets/course5/sample1.jpg" alt="Пример" width="350" height="170">
 <h3>Закрепление colspan</h3>
 <p>Можно ли объединять более двух ячеек по горизонтали? Можно! При этом точно так же используется атрибут <b>colspan</b>. Однако, так как ячейка «растягивается» вправо больше, чем на одну соседнюю ячейку, то и лишних столбцов появляется больше.

 Например, если установить <b>colspan</b> равным 4, то ячейка растянется на три соседние ячейки справа, а они в свою очередь сместятся, добавив в таблицу три столбца. Вот что должно получится:
 </p>
 <table>
            <tr>
                <td>1.1</td>
                <td colspan="2">1.2</td>
                <td>1.4</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td colspan="3">2.2</td>
            </tr>
            <tr>
                <td colspan="4">3.1</td>
                
            </tr>
            <tr>
                <td>4.1</td>
                <td>4.2</td>
                <td>4.3</td>
                <td>4.4</td>
            </tr>
        </table>
        
        <p>(Тоже самое и с атрибутом <b>rowspan</b>)</p>
        <img src="https://htmlacademy.ru/assets/course5/sample3.jpg" alt="Пример" width="230" height="150">
        <br/>
        <h3>Комбинация <b>rowspan + colspan</b></h3>
        <p>Атрибуты <b>colspan</b> и <b>rowspan</b> можно комбинировать:</p>
        <img src="https://htmlacademy.ru/assets/course5/sample4.jpg" alt="Пример" width="230" height="150">
        <br/>
        <h3>Выравнивание содержимого в ячейках</h3>
        <p>Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью <b>CSS</b>.
 <br/>
 За выравнивание по горизонтали отвечает <b>CSS-свойство text-align</b>. Чаще всего используются значения <b>left</b>, <b>center</b> и <b>right</b>.
 <br/>
 За выравнивание по вертикали отвечает <b>CSS</b>-свойство <b>vertical-align</b>. Чаще всего используются значения <b>top, middle и bottom</b>.

 На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.
 <br/>
 Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:</p>
 <pre><b>
 td {
  vertical-align: значение;
  text-align: значение;
 }</b>
 </pre>
 <h3>Цвета</h3>
 <p>Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок. Можно задавать и фоновые изображения, но это мы разберём в последующих курсах.
 <br/>
 Цветами можно управлять с помощью этих свойств:</p>
 <ul>
 	<li><b>background-color</b> - задаёт цвет фона,</li>
 	<li><b>color</b> - цвет текста,</li>
 	<li><b>border-color</b> - цвет рамок,</li>
 </ul>
 <p>До этого мы использовали компактную форму для описания рамок: <b>border: 1px solid lightgray</b>. В этой записи цвет задаёт третья часть — <b>lightgray</b>.
 <br/>
 Значения цветов в <b>CSS</b> задаются <a href="https://developer.mozilla.org/en/docs/Web/CSS/color_value" target="_blank" rel="nofollow">разными способами</a> Мы будем использовать ключевые слова для описания цвета.
 <br/>
 Таким образом, чтобы задать цвета для ячейки в <b>CSS</b>, нужен такой код:</p>
 <pre><b>td {
  color: цвет;
  background-color: цвет;
  border: 1px solid цвет;
 }</b></pre>
 <p>Конечно, раскрашивать можно и <b>td</b>, и <b>th</b>, и даже <b>table</b>.</p>
 <h3>Раскрашиваем строки</h3>
 <p>Если задавать стили для тега, например, <b>th</b> или <b>td</b>, то они применятся ко всем тегам.
 <br/>
 Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки? Можно использовать классы и применять стили для этих классов. Например, вот так:
 </p>
 <pre><b>.my-class {
  стили
 }</b></pre>
 <h3>Задаём размеры таблицы</h3>
 <p>По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек. Чем меньше содержимого, тем меньше размеры таблицы.
 <br/><br/>
 С помощью <b>CSS</b> можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только <b>CSS</b>.
 <br/><br/>
 Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.
 <br/><br/>
 Ширина таблицы задаётся с помощью <b>CSS</b>-свойства <b>width</b>, а высота с помощью свойства <b>height</b>, например:</p>
 <pre><b>table {
  width: 100px;
  height: 100px;
 }</b></pre>
 <p>Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — <b>20px</b>, так и в относительных, в процентах — <b>20%</b>.
 <br/><br/>
 При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.
 <br/><br/>
 Особое значение auto включает расчёт размеров по умолчанию. Например, <b>width: auto;</b> или <b>height: auto;</b>.
 <br/><br/>
 <i>Важное замечание<i>. Проценты при задании высоты обычно не работают.</p>
 <h3>Задаём размеры отдельных ячеек и слобцов</h3>
 <p>Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью <b>CSS</b>-свойств <b>width</b> и <b>height</b>.
 <br/><br/>
 Есть два варианта добавления стилей ячейкам:
 <br/><br/>
 <ol>
 	<li>Назначать ячейкам уникальные имена классов, например, <b>class="cell-11"</b>, и применять стили для этих классов.</li>
 	<li>Использовать атрибут <b>style</b>, внутри которого можно писать <b>CSS-код</b>.</li>
 </ol>
 <br/>
 Пример второго варианта:</p>
 <pre><b>&lt;td style="width: 100px;"&gt;
  ...
 &lt;/td&gt;</b></pre>
 <p>К счастью, редко нужно задавать размеры каждой ячейки. Обычно размеры ячеек прописывают, когда надо вручную установить ширину столбцов таблицы: для этого достаточно задать ширину для каждой ячейки из первой строки.</p>
 <hr/>
 <h2>Формы</h2>
 <h3>Первая форма</h3>
 <p>Формы нужны для того, чтобы отправлять данные с веб-страницы на веб-сервер, который сможет эти данные обработать: зарегистрировать пользователя, создать сообщение на форуме, отправить письмо и так далее. В общем, формы в вебе просто необходимы.
 <br/><br/>
 Чтобы создать форму, нужно использовать парный тег <b>&lt;form&gt;</b>, внутри которого размещаются поля формы. У тега <b>&lt;form&gt;</b> есть два важных атрибута:</p>
 <ul>
 	<li><b>action</b> задаёт адрес,<b>URL</b>, отправки формы;</li>
 	<li><b>method</b> задаёт метод отправки формы.</li>
 </ul>
 Пример:
 <pre><b>
 	&lt;form action="https://echo.htmlacademy.ru" method="get"&gt;
  поля формы
 &lt;/form&gt;</b>
 </pre>
 <p>Для отправки формы обычно используют методы <b>get</b> или <b>post</b>. Если не указать атрибут <b>method</b>, то будет использован <b>get</b>.
 <br/><br/>
 Метод <b>get</b> посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:
 <b>https://www.google.com/search?q=htmlacademy</b>
 Метод <b>get</b> лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.
 <br/><br/>
 Метод <b>post</b> посылает данные в теле <b>HTTP-запроса</b> и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.
 </p>
 <h2>Текстовое поле ввода</h2>
 <p>
 	Большинство полей форм создаётся с помощью одиночного тега <b>input</b>. У этого тега два обязательных атрибута:
 </p>
 <ul>
 	<li><b>type</b> задаёт тип поля;</li>
 	<li><b>name</b> задаёт имя поля.</li>
 </ul>
 <p>Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это <b>text</b>, который обозначает текстовое поле. Он же используется по умолчанию. Пример:
 <pre><b>
 &lt;form action="https://echo.htmlacademy.ru" method="get"&gt;
  &lt;input type="text" name="search"&gt;
 &lt;/form&gt;</b></pre>
 <br/><br/>
 Имя поля нужно, чтобы правильно обработать данные на сервере. Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения. Для задания имени поля используют латинские буквы и цифры.
 </p>
 <h3>Идентификатор и значение по умолчанию</h3>
 <p>Атрибут <b>id</b> поля ввода обозначает идентификатор. Он должен быть уникальным не только в пределах формы, но и на всей странице.
 <br/><br/>
 Обычно идентификаторы используют для повышения удобства работы с формой, например, создают подписи, связанные с мелкими полями. При щелчке по таким подписям активируется связанное поле. И это удобно, так как по большой подписи попасть легче, чем по маленькому полю. Также идентификаторы используют в <b>JavaScript</b> для работы с полями.
 <br/><br/>
 Идентификатор в отличие от имени поля не передаётся на сервер. Лучше использовать идентификаторы, отличающиеся от имени поля, особенно актуально это для полей множественного выбора, которые мы разберём далее в курсе.
 <br/><br/>
 Атрибут <b>value</b> задаёт значение поля ввода по умолчанию. Это тоже повышает удобство.
 <br/><br/>
 Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах, а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо. И всё благодаря тому, что программист добавил к полям атрибут <b>value</b> с нужными данными.</p>
 <h3>Подпись для поля ввода</h3>
 <p>Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <b>&lt;label&gt;</b>.
 <br/><br/>	
 Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.
 <br/><br/>
 Создавать подписи к полям с помощью <b>&lt;label&gt;</b> — хороший приём. Используйте его.
 <br/><br/>
 Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег  <b>&lt;label&gt;</b>, вот так:</p>
 <pre>
 	 <b>&lt;label&gt;</b>
 		Подпись &lt;input type="text" name="username"&gt;
 	  <b>&lt;/label&gt;</b>
 </pre>
 <p>
 	Надо отметить, что при оборачивании текста в тег <b>&lt;label&gt;</b> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.
 </p>
 <h3>Связываем подпись и поле по <b>id</b></h3>
 <p>Иногда обернуть поле и текст подписи в тег <b>&lt;label&gt;</b> нельзя. Например, когда они размещены в разных ячейках таблицы.
 <br/><br/>
 В таком случае можно связать подпись с помощью атрибута <b>id</b>. Алгоритм такой:
 	<ol>
 		<li>Добавляем к полю ввода идентификатор с помощью атрибута <b>id</b></li>
 		<li>Оборачиваем текст подписи в тег <b>&lt;label&gt;</b>.</li>
 		<li>Добавляем тегу <b>&lt;label&gt;</b> атрибут <b>for</b>.</li>
 		<li>В атрибут for записываем такое же значение, что и в атрибуте <b>id</b> у поля.</li>
 	</ol>
 	<br/>
 	Например:
 	<pre><b>
 		&lt;label for="user-field-id">Имя пользователя&lt;/label&gt;
 ...
 много-много других тегов
 ...
 &lt;input id="user-field-id" type="text" name="username"&gt;
 	</b></pre>
 	<h3>Поле для ввода пороля</h3>
 	<p>Мы создаём простую форму входа. Уже есть два поля и связанные с ними подписи. Одно из полей предназначено для ввода пароля, но сейчас оно является простым текстовым полем.
 <br/><br/>
 Чтобы сделать его настоящим полем для ввода пароля, в котором текст будет отображаться «звёздочками», нужно просто изменить значение атрибута <b>type</b> на <b>password</b>..</p>
 <h3>Кнопка отправки формы</h3>
 <p>Форма практически готова. Осталось добавить кнопку для отправки формы. Такая кнопка создаётся с помощью тега <b>&lt;input&gt;</b> c типом <b>&lt;submit&gt;</b>.
 <br/><br/>	
 Надпись на кнопке можно задать с помощью атрибута <b>value</b>. Для кнопки отправки формы задавать имя необязательно. Но если имя задано, то на сервер будут отправляться имя и значение кнопки.
 <br/><br/>
 Обычно имя для кнопки отправки задают, когда в форме несколько кнопок, отвечающих за разные действия. Браузер отправляет на сервер имя и значение только той из них, на которую нажал пользователь. Таким образом, сервер может понять, какую кнопку нажали и что нужно сделать..</p>
 <h3>Многострочное поле ввода</h3>
 Мы научились создавать простейшие формы с текстовыми полями и кнопками. А теперь познакомимся с более сложными элементами формы.
 <br/><br/>
 Многострочное текстовое поле создаётся с помощью парного тега <b>&lt;textarea&gt;</b>. У него есть атрибуты <b>name</b> и <b>id</b>, которые аналогичны атрибутам текстового поля.
 <br/><br/>
 Атрибут <b>rows</b> принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут <b>cols</b> задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».
 <br/><br/>
 Атрибут <b>value</b> у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <b>&lt;textarea&gt;</b> и является значением по умолчанию. Вот так:
 <br/>
 	<b>&lt;textarea&gt;</b>Значение по умолчанию<b>&lt;/textarea&gt;</b>
 	<h2>Чекбокс или "галочка"</h2>
 	<p>Поле-галочка — это тег <b>&lt;input&gt;</b> с типом <b>checkbox</b>.
 <br/><br/>
 Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут <b>value</b> не является обязательным.
 <br/><br/>
 Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут <b>checked</b>. Вот так:<br/>
 <b><pre>&lt;input type="checkbox" checked&gt;</pre&lt;</b></p>
 	<br/><br/><br/><br/><br/:><br/><br/><br/> 
 </body>
 </html>