Использовать закрывающий тег </P> не обязательно, т.к. браузер считает, что начало следующего абзаца означает конец предыдущего, но желательно.
Выравнивание текста
Для того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:
<p align="center">Текст по центру</p>
выровняет текст по центру. А код:
<p align="right">Выравнивание текста по правому краю</p>
выровняет текст по правому краю. Если атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код:
<p>Выравнивание по левому краю</p>
выровняет текст по левому краю
Теги BR и HR
Если нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то используется тег <BR>. Например, html-код
1. Первая строка. <br> 2. Вторая строка.
в браузере будет выглядеть так:
1. Первая строка.
2. Вторая строка.
У BR нет закрывающего тега. Для вставки нескольких пустых строк, нужно записать тег <BR> несколько раз подряд.
Визуально разделить части текста можно еще при помощи тега <HR>. Этот тег создает на странице горизонтальную разделительную полосу. Тег <HR> имеет следующие атрибуты:
size— толщина полосы;
width— ширина полосы;
align — выравнивание;
color — цвет полосы;
noshade - атрибут, не имеющий значений. Если указан, то создается сплошная черная полоса без тени.
Ширину и толщину можно указывать как в пикселах (тогда величина будет постоянной), так и в процентах (тогда величина будет меняться в зависимости от разрешения экрана).
Заголовки
Для задания названий разделов и подразделов используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:
Заголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок <H1></H1>, а самый маленький <H6></H6>.
Теги заголовков имеют атрибуты:
align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);
title — всплывающая подсказка, которая появляется при наведении мыши на заголовок.
Для форматирования непосредственно шрифтов, в HTML есть тег <FONT></FONT>. У этого тега существуют следующие атрибуты:
color — цвет текста шрифта;
face — гарнитура шрифта;
size — размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По умолчанию, размер текста 3. Если указать <font size="+1"></font>, то текст, размещенный между тегами <font> и </font>, будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.
Пример
<html>
<head>
<title>Тег FONT</title>
</head>
<body>
<p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения
написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>
</body>
</html>
Создание списков в HTML
В HTML списки создаются с помощью тегов <OL></OL> и <UL></UL>. В первом случае создается упорядоченный (нумерованный), во втором неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом <LI></LI>. Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type.
В нумерованном списке маркеры (значения атрибута type) такие:
1 — нумерация арабскими цифрами (по умолчанию);
A — большими латинскими буквами по алфавиту;
a— маленькими латинскими буквами;
I— большими римскими цифрами;
i— маленькими римскими цифрами.
Например, HTML-код
<ol type="a">
<li>Первый элемент.</li>
<li>Второй элемент.</li>
<li>Третий элемент.</li>
</ol>
браузер покажет так
a.Первый элемент.
b.Второй элемент.
c.Третий элемент.
В маркированном списке значения атрибута type такие:
disc - закрашенный кружок (по-умолчанию);
circle - незакрашенный кружок;
square - закрашенный квадратик.
Например, HTML-код
<ul type="square">
<li>Первый элемент.</li>
<li>Второй элемент.</li>
<li>Третий элемент.</li>
</ul>
в браузере выглядит так
Первый элемент.
Второй элемент.
Третий элемент.
Как и остальные теги HTML, списки можно вкладывать друг в друга. Получаются многоуровневые вложенные списки. Например, код:
<ol type="a">
<li>Первый элемент.</li>
<li><ul type="square">
<li>Второй элемент.</li>
<li>Третий элемент.</li>
<li>Четвёртый элемент.</li>
</ul>
</li>
<li>Пятый элемент.</li>
</ol>
браузер покажет так
a. Первый элемент.
b.
§ Второй элемент.
§ Третий элемент.
§ Четвёртый элемент.
c. Пятый элемент.
Гиперссылки
Тэг <a> определяет гиперссылку в Web-странице. Если добавить тэг <а> с ключевым словом «mailto:» в атрибуте href, то пользователям будет представлена возможность связаться с автором Web-страницы по электронной почте:
<a href=«mailto: username@internetprovider.com»>
username@internetprovider.com </a>
После того как пользователь активизирует эту гиперссылку, запустится программа электронной почты, и пользователю будет предоставлена возможность отправить сообщение по адресу, указанному в гиперссылке.
Изображение внедряется в Web-страницу с помощью тэга <img>, который может иметь следующие атрибуты: hspace, id, ismap, lang, langvage, loop, lowsrc, name, src, style, title, usemap, vspace, width, событие-сценарий, onabort, onerror, onload,supress.
Тэг <br> вставляет для браузера, символ перевода строки, и используется для пропусков между строками.
Таблицы предназначены для упорядоченного размещения информации на Web-страницы. В ячейки таблицы можно помещать любую информацию – текст, изображения, гиперссылки и т.п. Для формирования таблицы предназанчен тэг <table>, которые имеют следующие аттрибуты:
формировании таблицы использутся тэг строки таблицы <tr>, тэг заголовка таблицы <th> и тэг данных таблицы <th>.
Рассказ о том, что нужно для форматирования текста в HTML, был бы не полным без упоминания о спецсимволах. Спецсимволы — это символы, которых либо нет на клавиатуре, либо те, которые браузер принимает за управляющий символ и преобразует в код. Полный список этих символов можно найти здесь.
Создание таблицы
Сама таблица в HTML создаётся тегами <TABLE> и </TABLE>, строки таблицы (помещаются между тегами <TABLE> и </TABLE>) тегами <TR> и </TR>, а столбцы таблицы (помещаются между тегами <TR> и </TR>) тегами <TD> и </TD>.
Например, создадим таблицу, состоящую из одной строки и двух столбцов. HTML-код будет выглядеть так:
<table> — начало таблицы
<tr> — начало строки
<td>Первая ячейка</td> — первый столбец
<td>Вторая ячейка</td> — второй столбец
</tr> — конец строки
</table> — конец таблицы
По умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется атрибут border:
<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>
Значение атрибута border влияет только на внешнюю рамку, границы между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, изменить значение атрибута border с 1 на 5:
<table border="5">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>
Можно поменять цвет рамки таблицы с помощью атрибута bordercolor. Например:
<table border="5" bordercolor="#FF0000">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>
Чтобы изменить отступы между соседними ячейками таблицы, в HTML используется атрибут cellspacing. Давай для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибут cellspacing:
В случае использования таблицы для упорядочивания данных (а не для разметки страницы), может понадобиться использование заголовка. Заголовок таблицы задаётся тегом <caption></caption>. Например:
Для того, чтобы выровнять текст в таблице (и другое её содержимое), нужно использовать атрибут align для каждой конкретной ячейки! Т.к. именно в ячейках располагается всё содержимое таблицы. Пример:
В HTML цвет фона таблицы или отдельных её ячеек устанавливается с помощью атрибута bgcolor. О том, как в HTML выбрать нужный цвет того или иного элемента мы говорили в уроке про атрибуты тега body. Пример:
В качестве фона таблицы или отдельной ячейки можно использовать картинки. В HTML это делается при помощи атрибута «background». Значением атрибута «background» является адрес до изображения (как в HTML вставляется графика мы изучали в этом уроке). Пример картинки-фона для всей таблицы:
В HTML таблицы используются, главным образом, для разметки страниц. В этом их основное предназначение. В каждую ячейку таблицы можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому они так удобны для разметки html-страниц и разбивки их на отдельные блоки.
