Лабораторная работа №1
1.1. Заголовки. Для задания размера шрифта применяют теги заголовков. Таких тегов шесть и они используются для определения заголовков различного уровня. При переходе от заголовка первого уровня к заголовку шестого уровня постепенно уменьшается размер и толщина букв шрифта. Теги заголовков записываются как <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Текст, заключенный в тег заголовка, всегда начинается с новой строки. Текст, следующий за заголовком, также начинается с новой строки.
Теги заголовков имеют атрибуты:
align – выравнивание; значения: center, left, right (по центру, левому и правому краю окна браузера);
title – текст всплывающей подсказки, появляющейся при наведении указателя мыши на текст заголовка.
Запустите программу «Блокнот». Наберите в нем следующий код HTML. Сохраните файл с расширением html. Запуская ваш файл, дважды щелкнув по нему, вы увидите Web-страничку.
При наборе HTML-кода всех последующих примеров выполняйте аналогичные действия.
|
|
Запуская ваш файл, дважды щелкнув по нему, вы увидите Web-страничку.
1.2. Управление шрифтом. Кроме использования стандартных размеров и начертаний шрифтов можно определять шрифты для каждого фрагмента текста с помощью специальных тегов. Самый простой способ – использование тегов физических стилей.
<b> – полужирный, <i> – курсив, <u> – подчеркнутый, <s> – вычеркнутый, <tt> – пишущая машинка.
Теги физических стилей являются контейнерными. К одному и тому же фрагменту текста можно применить несколько тегов физических стилей, вкладывая один из них в другой.
Чтобы выделить курсивом часть текста, определенного в качестве заголовка второго уровня, можно использовать следующую конструкцию.
С помощью тега <basefont> можно установить основной шрифт, который используется в документе по умолчанию. Этот тег имеет необязательные атрибуты:
color=цвет;
face=”имя шрифта”;
size=число, где число=1,2,…, 7 и определяет размер шрифта (если атрибут size не задан, то по умолчанию устанавливается значение 3);
title=”текст всплывающей подсказки”.
С помощью контейнерного тега <font> можно настроить шрифт для содержащегося в нем текста. Тег <font> имеет такие же атрибуты, как и тег <basefont>. Особенностью атрибута size для тега <font> является то, что с его помощью можно установить не только абсолютный, но и относительный размер шрифта. В последнем случае значение атрибута size представляет собой целое число со знаком “+” или “–“ для указания, на сколько следует увеличить или уменьшить размер шрифта относительно основного.
В математических формулах, а также для ссылок на подстрочные замечания часто применяются индексы, которые отличаются от основного текста положением относительно строки и размером. Для этой цели служат контейнерные теги <sup> и <sub> для верхних и нижних индексов соответственно.
|
|
Кроме того, можно использовать контейнерные теги <big> и <small>. Тег <big> увеличивает на единицу размер шрифта, а тег <small> задает более мелкий шрифт относительно основного шрифта.
Для выделения фрагмента текста пустыми строками сверху и снизу, а также отступом от левого края окна браузера служит контейнерный тег <blockquote>.
1.3. Бегущая строка. Браузер Internet Explorer поддерживает контейнерный тег <marquee>, который позволяет создать так называемую бегущую строку, т. е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими атрибутами:
width – ширина поля бегущей строки в пикселях или процентах от ширины окна;
height – высота поля бегущей строки (в пикселях);
hspace, vspace – интервалы по горизонтали и вертикали между текстом строки и краями её поля (в пикселях).
align – положение текста бегущей строки в её поле; возможные значения:
· top (вверху);
· bottom (внизу);
· middle (посередине);
direction – определяет направление движения; возможные значения:
· left (справа налево);
· right (слева направо);
behavior – характер движения строки; возможные значения:
· scroll – текст появляется от одного края и скрывается за другим;
· slide – строка вытягивается из одного края поля и останавливается у другого края;
· alternate – задает переменное направление движения, от одного края к другому и обратно;
loop – количество повторений текста в бегущей строке, задаваемое числом; если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова infinity. Атрибут loop не влияет на поведение бегущей строки, если для атрибута behavior заданы значения alternate или slide.
scrollamount – устанавливает длину в пикселях «прыжка» текста за один такт; при большом значении этого параметра текст движется рывками, а при малом – замедленно;
scrolldelay – определяет величину паузы между тактами перемещения текста в миллисекундах;
bgcolor – устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.
В тег <marquee> в качестве прокручиваемого объекта можно вставлять не только текстовые элементы, но и, например, графические изображения.
1.4. Предварительно отформатированный текст. Списки. Если необходимо включить в HTML-документ фрагмент текста, предварительно отформатированный обычными средствами текстового редактора то целесообразно использовать контейнерный тег <pre>. Теги форматирования текстов, содержащие тег <pre> и находящиеся внутри этого тега, влияют на отображение предварительно отформатированного текста.
Теги форматирования текстов, содержащие тег <pre> и находящиеся внутри этого тега, влияют на отображение предварительно отформатированного текста.
Для представления информации в виде простых и иерархических списков в HTML имеется несколько тегов. Наиболее часто используются маркированный и нумерованный списки.
Маркированный список задается контейнерным тегом <ul>. Элементы списка располагаются внутри этого тега; каждому элементу списка предшествует тег <li>. Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type, который может принимать следующие значения:
disc – закрашенный кружок (значение по умолчанию);
circle – незакрашенный кружок;
square – закрашенный квадратик.
Атрибут type с этими же параметрами можно использовать и в теге <li> внутри тега <ul>, чтобы определить вид маркера для данного элемента списка. Кроме того, тег <li> имеет необязательный атрибут value, принимающий в качестве значения произвольную строку символов. Это значение может быть обработано в сценарии, который выполняется по некоторому событию (например, при щелчке на элементе списка).
|
|
Иерархически маркированный список создается путем вложения контейнеров <ul> друг в друга.
Нумерованный список задается с помощью контейнерного тега <ol>. Его построение аналогично организации маркированного списка, особенность заключается в способе пометки элементов, определяемом атрибутом type, который может принимать следующие значения:
1 – нумерация арабскими цифрами (значение по умолчанию).
A – маркировка прописными латинскими буквами в алфавитном порядке.
a – маркировка строчными латинскими буквами в алфавитном порядке.
I – нумерация большими римскими цифрами;
i – нумерация маленькими римскими цифрами.
Атрибут type можно использовать как в теге <ol> так и в теге <li>.
С помощью атрибута start тега <ol> допустимо указать маркер первого элемента в списке. Значением этого атрибута может быть число. Если start=7, то при type=1 нумерация элементов начинается с 7, при type=А первый элемент получает маркер в виде буквы «G».
Иерархические нумерованные списки создаются аналогично маркированным иерархическим спискам. Их особенность заключается в том, что отличия в маркировке элементов различных уровней следует устанавливать самостоятельно с помощью атрибута type.
Список определений содержит элементы, которые состоят из двух частей – определяемой и определяющей. Список определений задается контейнерным тегом <dl>. Элемент списка задается двумя контейнерными тегами: <dt> – для определяемого термина и <dd> – для его описания. Браузер отображает определяемый термин в отдельной строке, а его описание – ниже и с отступом.