Материал: IkxJ2A64Jt
промежутком. У тега p есть атрибут align, определяющий выравнивание текста и имеющий четыре варианта выравнивания:
∙left – по левому краю;
∙center – по середине страницы;
∙right – по правому краю;
∙justify – по ширине.
Пример тега p:
<p align=center>текст</p>
Для выделения заголовков используются теги h1– h6. Они отличаются размером выделяемого текста. Тег h1 является самым крупным, h6 – самым мелким. Содержимое тегов h1– h6 всегда начинается с новой строки. Можно применить атрибут выравнивания align.
Пример тега h1:
<h1 align=center>текст</h1>
Тег hr служит для установки разделительной линии и не имеет закрывающей части, но имеет следующие атрибуты:
∙align – определяет выравнивание линии;
∙color – цвет линии;
∙noshade – отмена трехмерных эффектов;
∙size – толщина линии;
∙width – ширина линии.
Пример тега hr:
<hr color=red size=50%>
Если необходимо сделать текст жирным, наклонным или подчеркнутым линией, можно использовать простые теги, не имеющие атрибутов:
∙b – выделение жирным;
∙i – наклонный текст (курсив);
∙u – подчеркивание линией.
При вложении тегов друг в друга можно достигать различных вариантов форматирования. Следующий код показывает возможности форматирования, результаты которого приведены на рис. 2.2.
<html>
<head>
<title>Заголовок сайта.</title> </head>
11
<body>
<b>жирный <i>наклонный <u>подчеркнутый</u></i> текст</b> <br>
<i>наклонный <b>жирный <u>подчеркнутый</u></b> текст</i> <br>
<u>подчеркнутый <i>наклонный <b>жирный </b></i> текст</u> <br>
</body>
</html>
Рис. 2.2
Другим способом форматирования текста является тег font, он позволяет изменить шрифт, размер и цвет текста. Для этого у тега font есть ряд атрибутов:
∙face – имя шрифта;
∙size – размер;
∙color – цвет.
Имя шрифта можно выбрать из списка шрифтов, установленных в операционной системе. Кроме того атрибут face позволяет указать несколько шрифтов через запятую. В этом случае браузер будет пытаться отобразить информацию согласно перечисленному списку шрифтов слева направо. Если в операционной системе нужный шрифт не обнаружен, браузер попробует отобразить информацию следующим в списке шрифтом. И так, пока не кончится список шрифтов, указанных в атрибуте face, либо не будет найден шрифт, имеющийся в операционной системе.
Рассмотрим пример:
<font face=”Arial, Times New Roman, Courier New”>текст</font>
При такой записи браузер сначала попытается отобразить текст шрифтом Arial, затем Times New Roman и последней попыткой будет шрифт Courier New. Если ни один из шрифтов, перечисленных в атрибуте face, не будет
12
найден, то браузер отобразит информацию тем шрифтом, который в браузере выбран по умолчанию.
Следует помнить, что шрифты «по умолчанию» для разных браузеров могут отличаться.
Атрибут size задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию, принят равным 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4"), так и относительной (например, size="+1", size="-1"). В последнем случае размер изменяется относительно базового.
Атрибут color устанавливает цвет текста, который может задаваться как словами, так и числовым занчением в формате RGB.
Пример тега font с использованием нескольких атрибутов:
<font face=”arial” size=5 color=red>текст</font>
2.5. Списки
Для создания списков используются теги ol, ul, li. Тег ol задает нумерованный списк, ul – маркированный, а тег li необходим для задания элементов списка.
Пример простого списка:
<ol>
<li>элемент нумерованного списка</li> <li>элемент нумерованного списка</li>
</ol>
Для более гибкой настройки списка можно воспользоваться атрибутами тега ol.
Атрибут type устанавливает вид маркера списка. Это могут быть заглавные латинские буквы (A), строчные латинские буквы (a), заглавные римские цифры (I), строчные римские цифры (i), арабские цифры (1).
Атрибут reversed делает нумерацию в списке по убыванию, работает не во всех браузерах.
Атрибут start задает число, с которого будет начинаться нумерованный список.
Для тега ul актуален только атрибут type, который может принимать значения: disc, circle, square. Атрибуты reversed и start с тегом ul не применяются, так как все маркеры в пределах одного типа имеют одинаковый вид.
13
Тег li определяет отдельный элемент списка. Применяется как в нумерованных, так и в маркированных списках и имеет следующие атрибуты:
Type – устанавливает вид маркера нумерованного или маркированного списка.
Value – для нумерованного списка устанавливает значение, с которого продолжится нумерация списка.
Рис. 2.3
Пример работы со списками:
<html>
<head><title>Заголовок сайта.</title></head> <body>
<ol type=A> <li>теги</li> <li>атрибуты</li> <li>значения</li>
</ol>
<ol start=5> <li>теги</li>
<li value=7>атрибуты</li> <li>значения</li>
</ol>
<ul>
<li>первый пункт</li> <li>
<ul>
14
<li type=circle>теги</li> <li type=disk>атрибуты</li> <li type=squre>значения</li>
</ul>
</li>
<li>третий пункт</li>
</ul>
</body>
</html>
Результат интерпретации браузером данного кода показан на рис. 2.3.
2.6. Ссылки
Ссылки являются одним из важных элементов HTML и задаются с помощью тега a. Ссылка может работать как ссылка на другую страницу либо как якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютным называется адрес в котором точно указан путь к конкретному файлу, либо веб-странице. Относительные ссылки построены относительно текущего документа или корня сайта.
Примеры ссылок:
<a href=”http://www.eltech.ru”>Сайт ЛЭТИ</a>
<a href=”example.html”>Ссылка на страницу в той же папке, что и текущая</a>
Цветом ссылок можно управлять с помощью специальных атрибутов тега body. Так атрибут link отвечает за цвет ссылки, alink – за цвет активной ссылки (нажатой), vlink – за цвет уже посещенной ссылки. Если не указывать цвет, то браузер будет использовать для вывода ссылок те цвета, которые назначены в браузере по умолчанию.
2.7. Таблицы
При создании веб-страниц часто используются таблицы. Таблицы позволяют группировать данные таким образом, какой необходим для решения конкретной задачи. С помощью таблиц можно не только отобразить какие-то
15