Основы HTML – оформление текста.

Параграфы - это самые часто используемые теги при оформлении текста. Они делят текст на части.

Например, текст не разделенный на параграфы:

Текст разделенный на параграфы:

Текст, разбитый на части, гораздо удобнее читается. Текст на параграфы (синтаксис) можно разделить тегами <p> </p>. Например:

Для данного тега есть атрибут align, который выравнивает текст.

У него есть следующие значения: left (выравнивание по левому краю), center (выравнивание по центру), right (выравнивание по правому краю), justify (выравнивание по ширине). Например:

Заголовки очень часто используются в обработке текста, и они очень полезны для пользователей тем, что помогают им понять структуру статьи.

Существует шесть уровней заголовков: h1, h2, h3, h4, h5 и h6. H1 - самый большой заголовок, H6 - самый маленький.

Чтобы заключить текст в заголовок  нужно прописать теги, например: <h1> </h1>, а между ними вставить текст заголовка.

Атрибуты к заголовкам такие же как и к тегу align со значениями: left, center, right, justify.

Теги strong, b, em и i отвечают за выделение текста. Strong и b - выделяют текст жирным. Em и i - выделяют текст курсивом. Для выделения текста лучше использовать теги strong и em, так как  теги b и i устарели и имеют меньший вес для поисковых систем. Чтобы выделить текст жирным, нужно заключить его в теги <strong> </strong>. Чтобы выделить текст курсивом, нужно заключить его в теги <em> </em>. 

С помощью тега font можно изменить самые основные характеристики текста: цвет, размер, шрифт. Чтобы изменить цвет шрифта, задаётся атрибут color, внутри которого цвет, состоящий из знака «#» и шести цифр, которые и определяют цвет. Чтобы изменить размер шрифта, задаётся атрибут size со значением от 1 до 7 или изменением значения в положительную или отрицательную сторону с помощью знаков плюс и минус. Все цифры должны быть целыми. Чтобы изменить сам шрифт, задаётся атрибут face, внутри которого пишется название нужного шрифта. Например:

Чтобы сделать ссылку (синтаксис) достаточно заключить слово или картинку в теги <a> </a>.

Чтобы ссылка стала активной (действующей) надо прописать необходимые атрибуты. наиболее часто используемые атрибуты: href, target, rel, title.

Внутри атрибута href пишется сама ссылка, то есть URL. Например:                               <a href="http://iamdenis.ru"> </a>.

Чтобы открыть ссылку в новом окне атрибут target пишется со значением "_blank", чтобы открыть ссылку в текущем окне значение для данного атрибута не указывается.

Атрибут rel используется чтобы закрыть ссылку поисковых систем nofollow.

Текст, прописанный в значении атрибута title служит всплывающей подсказкой к ссылке.

Якоря нужны для того, чтобы передвигаться внутри текущей вкладки без использования колесика. Якорь делается с помощью ссылок и атрибута name. Для создания якоря необходимо поставить ссылку с атрибутом name в ту часть страницы, на которую нужно переместиться. В значение атрибута name вписать любое его название английскими буквами без пробелов. Например: <a name="vsechtougodno"></a>. Затем нужно поставить ссылку на это якорь, а для этого прописать ссылку с атрибутом href, внутри которого значение атрибута name, перед которым стоит знак #. Например: <ahref=#vsechtougodno"></a>. 

Пример в HTML:

Списки:

Для создания нумерованного списка нужный текст необходимо заключить в теги <ol> </ol>. Тег li означает пункт списка. Например:

Для создания ненумерованного списка используется тег ul. Например: 

Атрибут type к нумерованному списку: 

Еще один атрибут start говорит браузеру с какой цифры или буквы начинается список. 

Атрибут type к ненумерованным (маркированным) спискам. 

Для маркированных списков также можно использовать атрибут start.

Вложенные списки часто используют для выпадающих меню. Чтобы сделать вложенный список надо внутри тегов <li></li> поставить еще один список.

В структуре HTML таблицы сначала идет тег <table>, потом тег <tr>, затем тег <td>. При этом тег <table> создает таблицу, тег <tr> создает строку, тег <td> создает ячейку. таким образом тег <tr> создает строку, в которой с помощью тега <td> располагаются ячейки.

Таблицы:

Атрибуты таблиц:

Для тега <table>:

1. width (ширина) и height (высота) устанавливаются в пикселях;
2. align - задает выравнивание таблицы, может иметь значения: left, center, right;
3. cellpadding и cellspacing - задают отступы внутри ячеек и снаружи соответственно;
4. bgcolor - цвет фона, в значении ставится знак "#" и шестизначный код цвета;
5. border - границы таблицы, ширина которой устанавливается в пикселях;
6. bordercolor - цвет границ таблицы;
7. значение атрибута rules указывает где обводить таблицу: между колонками (cols), между строками (rows), между группами (groups), везде (all, ставится по умолчанию) или нигде (none).

Для тега <tr>:

1. align;
2. bgcolor ;
3. bordercolor;
4. valign.

Для тега <td>:

1. width и height;
2. align - задает выравнивание текста;
3. bgcolor ;
4. bordercolor;
5. valign - выравнивание содержимого ячейки по вертикали, может иметь значения: top (верх), bottom (низ), middle (центр);
6. colspan и rowspan - атрибуты объединения ячеек.

Объединение ячеек происходит с помощью атрибутов colspan и rowspan для тега <td>. Colspan объединяет ячейки по горизонтали, а rowspan - по вертикали. Например:

Выглядит это так: