Под текстом всюду в дальнейшем будет пониматься информация, представленная в чисто текстовом или гипертекстовом виде (см. выше). Так как любая информация обладает определенной логикой и структурностью, то возникает необходимость учитывать эту логику и структурность при представлении информации в виде текста (гипертекста). Совокупность способов, которыми логика и структурность информации превносится в текстовые (гипертекстовые) документы называется форматированием. Форматирование подразделяется на логическое и физическое. Первый тип форматирования предполагает, что структурирование текста и расстановка логических акцентов осуществляется непосредственно методами визуального оформления текста (заданием цвета, шрифта, выравнивания и т.п.). Логическое форматирование предполагает, что структурные элементы текста (абзацы, списки, заголовки и т.д.) описываются специальными элементами разметки, которые только указывают, что тот или иной фрагмент текста имеет требуемый структурный тип (абзац, элемент списка, заголовок и т.д.). Оформление (внешний вид) таких фрагментов текста определяется отдельно, на основании информации о типе соответствующего фрагмента. При этом информация о том, как представлять структурне фрагменты текста может храниться как в связке с рассматриваемым текстовым документом, так и быть оставленой на усмотрение программ, отвечающих за отображение структурированного текста. <\p>
Одним из простейших способов форматирования текста является задание шрифта и способа выравнивания. Стандарт HTML содержит специальный элемент разметки для определения шрифта текста. Это (контейнерный) элемент , имеющий следующие атрибуты:FACE – задает шрифт или его начертание;SIZE – величина шрифта;COLOR – цвет шрифта.
Например:
При использовании атрибута FACE необходимо помнить, что прямое указание шрифта может привести к невозможности прочтения текста пользователем, не имеющим такого шрифта (или имеющим, но на другом языке), поэтому обычно указывают не шрифт, а его начертание - с засечками serif или без засечек sans-serif.Начертание serif используется по умолчанию. Можно предложить на выбор несколько шрифтов через запятую, при просмотре списка слева направо будет выбран первый подходящий (установленный у пользователя).
В настоящее время элемент разметки оставлен в стандарте HTML только из соображений совместимости с предшествующими версиями. Для задания шрифта текста используются методы, связанные с использованием технологии стилей CSS, которая будет рассматриваться ниже.
Выравнивание текста (по левому или правому краю, по центру или по ширине) может быть применено к любому содержащему текст элементу, описанному в этом или предыдущем разделе, также, как это делалось с элементом
(см. предыдущее занятие).
Логическое форматирование (см. выше) используется для определения и поддержки логики и структуры документа независимо от шрифтов, оборудования и служебных программ читателя. Позволяет не привязывать документы к определенной платформе.
В HTML предусмотрены следующие элементы разметки для задания логического форматирования. - выделение цитаты (названия книги, статьи). Выделяется обычно курсивом. - выделение небольших фрагментов компьютерного кода (для больших фрагментов используется элемент разметки
относящийся к элементам физического форматирования или специально определенный класс стиля CSS (см. ниже)). Обычно выделение делается моноширинным шрифтом. - акцент, используется для выделения фрагмента текста, имеющего большое значение. - указывает на то, что пользователь должен дать ответ, используя клавиатуру. - образец. Выделяет знаки, на которых автор хочет акцентировать внимание. - выделение очень важного фрагмента текста. - выделение имени переменной (обычно курсивом). Все перечисленные здесь элементы являются контейнерными (имеют открывающий и закрывающий теги, содержимое контейнера - выделяемая информация). К элементам логического форматирования относятся также элементы для определения абзацев текста (см. занятие 1 выше), при условии, что этот элемент не использует атрибутов для задания выравнивания. Кроме того, элементами логического форматирования являются элементы разметки (где q - может быть одной из цифр 1, 2, 3, 4, 5 или 6), задающий заголовки различного уровня (цифра 1 соответствует заголовку самого верхнего уровня, а цифра 6 - самого нижнего). Эти элементы также являются контейнерными. Элементы разметки, задающие нумерованные или маркированные списки и таблицы (см. ниже) также относятся к элементам логического форматирования. Очень важными элементами логического форматирования, являются контейнеры и . Эти элементы выделяют свое содержимое как логический блок текста. При этом содержимое контейнера выделяется как блок текста, начинающийся с новой строки и заканчивающийся также переводом строки. Содержимое контейнера не выделяется внешне никаким образом. Оба этих контейнера позволяют применять к своему содержимому различные классы стилей CSS, придавать соответствующим фрагментам имя, которое может быть использовано, например, в сценариях JavaScript или VBScript для динамического изменения содержимого или внешнего вида выделенных фрагментов. Все эти возможные использования элементов и будут подробно разобраны ниже. Физическое форматирование К элементам физического форматирования относятся описанные ранее элементы , , а также следующие контейнеры: - выделяет фрагмент текста полужирным шрифтом. - курсив. - телетайп (шрифт печатной машинки). - подчеркивание. - зачеркивание. - крупный шрифт. - мелкий шрифт. - нижний индекс. - верхний индекс. К элементам физического форматирования относятся также элементы и (где q - может быть одной из цифр 1, 2, 3, 4, 5 или 6) при условии, что эти элементы используют атрибутов для задания выравнивания. Работа с графикой Для размещения на странице графических изображений используется простой (не контейнерный) элемент . Для указания пути к изображению используется обязательный атрибут SRC этого элемента. Полностью команда для вставки изображения может выглядеть следующим образом: По умолчанию, когда изображение вставляется в строку текста (как большая буква), нижний край изображения выравнивается по нижней базисной линии строки (т.е. по воображаемой линии, касающейся снизу букв строки, не имеющих выступающих вниз элементов). Это выравнивание можно изменить при помощи атрибута ALIGN, который может принимать следующие значения: TOP – верхний край изображения выравнивается пл верхней базисной линии строки (т.е. по воображаемой линии, касающейся сверху букв строки, не имеющих выступающих вверх элементов); MIDDLE – среднюю линию изображений по середине строки по вертикали; BOTTOM – выравнивание по умолчанию (см. выше); LEFT – задает расположение изображения так, что текст обтекает изображение, прижатое к левой границе окна броузера и к верхней базисной линии первой строки текста; RIGHT – аналогично предыдущему, только изображение прижимается к правой границе окна. BASELINE – ставит картинку на базисную линию. Атрибут ALT используется для того, чтобы сопроводить изображение коротким текстом (названием), который появится при наведении на изображение мыши. Это важно, так как многие поисковики ищут изображения по этим названиям. Например: Некоторые броузеры по умолчанию показывают название файла. Чтобы этого не происходило, записывается атрибут ALT с пустой строкой в качестве значения: . Во всех приведенных выше примерах картинка будет выведена в своем реальном размере. Если требуется работать с размером изображения, используют атрибуты HEIGHT (высота) и WIDTH (ширина изображения). Если явно указать реальный размер картинки в пикселях, при загрузке страницы под картинку сразу будет отведено место и верстка страницы не собьется. Если жестко задать высоту и ширину картинки в пикселях или в процентах от исходного, то она масштабируется под этот размер. Ясно, что такое масштабирование сопряжено с искажениями изображения (например, при уменьшении высоты в 2 раза, и ширины - в 3). Соответственно, атрибуты изменения размера лучше использовать не одновременно, а по отдельности, так как при задании одного атрибута изменение размера по оставшемуся измерению будет выполнено с сохранением пропорций изображения. При этом не имеет значения, задан размер в пикселях или в процентах от исходного. Рамка вокруг изображения задается атрибутом BORDER. Если он равен нулю, то рамки нет, чем больше значение, тем шире рамка. Например: . Поскольку изображение обтекается текстом, то при желании свободное место вокруг него можно увеличить атрибутами VSPACE (поля вокруг изображения по вертикали) и HSPACE (поля по горизонтали). Эти атрибуты задаются в пикселях. Изображение может быть ссылкой на другой документ. Для этого элемент разметки, задающий изображение должен быть сделан содержимым соответствующего элемента : . Списки В HTML-документе можно использовать списки нескольких видов, например: нумерованные, маркированные, списки определений, списки меню. Для получения дополнительных эффектов списки различных типов могут вкладываться друг в друга. Упорядоченный (нумерованный) список состоит из контейнера списка, определяющего его тип, и тегов , предваряющих каждый пункт списка. Упорядоченный список открывается тегом (сокращение от Ordered List). Для заголовка списка используется тег . Открывающий и закрывающий теги обеспечивают перевод строки до и после списка, отделяя список от остального текста. Тег после названия списка обязателен для Internet Explorer и необязателен для Netscape Navigator. Элементы списка по умолчанию нумеруются арабскими. Для изменения типа нумерации используются приведенные атрибута TYPE элемента OL: значение A задает номер в виде прописных букв; a – номер в виде строчных букв; I – нумерация прописными римскими цифрами; i – нумерация строчными римскими цифрами; 1 - нумерация арабскими цифрами. Атрибут COMPACT элемента OL представляет список в более компактном виде; Для неупорядоченного (маркированного) списка контейнером является тег (Unordered List). В неупорядоченном списке атрибут TYPE (отвечащий, как и в нумерованном списке, за вид маркера) может иметь одно из трех значений: disc – маркер имеет вид закрашенного кружка, circle – окружность, square – закрашенного квадрата. Список определений объявляется контейнером (Definition List). В нем тегом отмечается термин или обозначение, и тегом - соответствующее определение. Меню – еще один тип списков. Большинством броузеров элемент (это, конечно, контейнерный элемент) по умолчанию отображается таким же стилем и шрифтом, как и неупорядоченный список. Если необходимо создать список, маркером которого должны быть пиктограммы, изображения или специфические значки, такой список составляют вручную. Пример списков можно посмотреть здесь. Бегущая строка Бегущая строка задается контейнерным элементом (необходимы как открывающий, так и закрывающий теги). Изменять шрифт, цвет и т.д. в бегущей строке можно с помощью элемента с нужными значениями соответствующих атрибутов или с использванием классов стиля CSS. Собственные атрибуты бегущей строки позволяют изменять направление движения, способ показа, отступы, количество показов и т.д. Перечислим эти атрибуты: WIDTH - ширина поля бегущей строки в пикселах или в процентах от размера окна; HEIGHT - высота поля бегущей строки (в пикселах); ALIGN - выравнивание положения текста бегущей строки в ее поле. Возможные значения: TOP (сверху), MIDDLE (посередине), BOTTOM (внизу). BEHAVIOR - позволяет изменять стиль показа. Этот атрибут может принимать значения SCROLL (прокручивает бегущую строку в указанном направлении многократно), SLIDE (как только строка достигнет противоположного края экрана она замирает), ALTERNATE (достигнув противоположного края экрана, строка меняет направление своего движения на противоположное - создается эффект того, что строка отталкивается от границ окна). По умолчанию BEHAVIOR = SCROLL. DIRECTION - задает направление движения (LEFT – справа налево, по умолчанию; RIGHT – слева направо). HSPACE - отступ для начала движения (в процентах от ширины экрана или в пикселах). VSPACE - устанавливает отступ вниз от верхней рамки окна броузера. LOOP – задает количество показов. Указывается в целых числах. Infinite – количество показов не ограничено (задается по умолчанию). SCROLLAMOUNT – устанавливает смещение при каждом шаге (в пикселах или других единицах). Варьируя величину смещения, можно изменять скорость движения строки. SCROLLDELAY – устанавливает задержку в миллисекундах между шагами. Изменяя этот параметр, можно регулировать плавность показа. BGCOLOR – устанавливает цвет поля бегущей строки. Задание Замените произвольный текст на всех страницах на тематический. Отформатируйте текст во всех пяти документах, используя все приведенные выше теги логического и физического форматирования. Не увлекайтесь, форматирование не должно выглядеть избыточным. Расположите на всех страницах графические изображения, подходящие по смыслу и внешнему виду к тексту и внешнему виду страниц. Используйте для каждого изображения атрибуты выравнивания текста, изменения размеров (в пикселах, в процентах, точный размер, размер по одному измерению). Ни в коем случае не допустите искажения изображений. Создайте графическую ссылку на главную страницу на каждой из страниц разделов. Используйте все виды списков - ссылки на главной странице оформите как список меню, а остальные разновидности списков используйте на страницах разделов. На главной странице внизу пустите бегущую строку с рекламной информацией, использовав как можно больше атрибутов. Вернуться в начало документа
К элементам логического форматирования относятся также элементы
для определения абзацев текста (см. занятие 1 выше), при условии, что этот элемент не использует атрибутов для задания выравнивания. Кроме того, элементами логического форматирования являются элементы разметки (где q - может быть одной из цифр 1, 2, 3, 4, 5 или 6), задающий заголовки различного уровня (цифра 1 соответствует заголовку самого верхнего уровня, а цифра 6 - самого нижнего). Эти элементы также являются контейнерными. Элементы разметки, задающие нумерованные или маркированные списки и таблицы (см. ниже) также относятся к элементам логического форматирования. Очень важными элементами логического форматирования, являются контейнеры и . Эти элементы выделяют свое содержимое как логический блок текста. При этом содержимое контейнера выделяется как блок текста, начинающийся с новой строки и заканчивающийся также переводом строки. Содержимое контейнера не выделяется внешне никаким образом. Оба этих контейнера позволяют применять к своему содержимому различные классы стилей CSS, придавать соответствующим фрагментам имя, которое может быть использовано, например, в сценариях JavaScript или VBScript для динамического изменения содержимого или внешнего вида выделенных фрагментов. Все эти возможные использования элементов и будут подробно разобраны ниже. Физическое форматирование К элементам физического форматирования относятся описанные ранее элементы , , а также следующие контейнеры: - выделяет фрагмент текста полужирным шрифтом. - курсив. - телетайп (шрифт печатной машинки). - подчеркивание. - зачеркивание. - крупный шрифт. - мелкий шрифт. - нижний индекс. - верхний индекс. К элементам физического форматирования относятся также элементы и (где q - может быть одной из цифр 1, 2, 3, 4, 5 или 6) при условии, что эти элементы используют атрибутов для задания выравнивания. Работа с графикой Для размещения на странице графических изображений используется простой (не контейнерный) элемент . Для указания пути к изображению используется обязательный атрибут SRC этого элемента. Полностью команда для вставки изображения может выглядеть следующим образом: По умолчанию, когда изображение вставляется в строку текста (как большая буква), нижний край изображения выравнивается по нижней базисной линии строки (т.е. по воображаемой линии, касающейся снизу букв строки, не имеющих выступающих вниз элементов). Это выравнивание можно изменить при помощи атрибута ALIGN, который может принимать следующие значения: TOP – верхний край изображения выравнивается пл верхней базисной линии строки (т.е. по воображаемой линии, касающейся сверху букв строки, не имеющих выступающих вверх элементов); MIDDLE – среднюю линию изображений по середине строки по вертикали; BOTTOM – выравнивание по умолчанию (см. выше); LEFT – задает расположение изображения так, что текст обтекает изображение, прижатое к левой границе окна броузера и к верхней базисной линии первой строки текста; RIGHT – аналогично предыдущему, только изображение прижимается к правой границе окна. BASELINE – ставит картинку на базисную линию. Атрибут ALT используется для того, чтобы сопроводить изображение коротким текстом (названием), который появится при наведении на изображение мыши. Это важно, так как многие поисковики ищут изображения по этим названиям. Например: Некоторые броузеры по умолчанию показывают название файла. Чтобы этого не происходило, записывается атрибут ALT с пустой строкой в качестве значения: . Во всех приведенных выше примерах картинка будет выведена в своем реальном размере. Если требуется работать с размером изображения, используют атрибуты HEIGHT (высота) и WIDTH (ширина изображения). Если явно указать реальный размер картинки в пикселях, при загрузке страницы под картинку сразу будет отведено место и верстка страницы не собьется. Если жестко задать высоту и ширину картинки в пикселях или в процентах от исходного, то она масштабируется под этот размер. Ясно, что такое масштабирование сопряжено с искажениями изображения (например, при уменьшении высоты в 2 раза, и ширины - в 3). Соответственно, атрибуты изменения размера лучше использовать не одновременно, а по отдельности, так как при задании одного атрибута изменение размера по оставшемуся измерению будет выполнено с сохранением пропорций изображения. При этом не имеет значения, задан размер в пикселях или в процентах от исходного. Рамка вокруг изображения задается атрибутом BORDER. Если он равен нулю, то рамки нет, чем больше значение, тем шире рамка. Например: . Поскольку изображение обтекается текстом, то при желании свободное место вокруг него можно увеличить атрибутами VSPACE (поля вокруг изображения по вертикали) и HSPACE (поля по горизонтали). Эти атрибуты задаются в пикселях. Изображение может быть ссылкой на другой документ. Для этого элемент разметки, задающий изображение должен быть сделан содержимым соответствующего элемента : . Списки В HTML-документе можно использовать списки нескольких видов, например: нумерованные, маркированные, списки определений, списки меню. Для получения дополнительных эффектов списки различных типов могут вкладываться друг в друга. Упорядоченный (нумерованный) список состоит из контейнера списка, определяющего его тип, и тегов , предваряющих каждый пункт списка. Упорядоченный список открывается тегом (сокращение от Ordered List). Для заголовка списка используется тег . Открывающий и закрывающий теги обеспечивают перевод строки до и после списка, отделяя список от остального текста. Тег после названия списка обязателен для Internet Explorer и необязателен для Netscape Navigator. Элементы списка по умолчанию нумеруются арабскими. Для изменения типа нумерации используются приведенные атрибута TYPE элемента OL: значение A задает номер в виде прописных букв; a – номер в виде строчных букв; I – нумерация прописными римскими цифрами; i – нумерация строчными римскими цифрами; 1 - нумерация арабскими цифрами. Атрибут COMPACT элемента OL представляет список в более компактном виде; Для неупорядоченного (маркированного) списка контейнером является тег (Unordered List). В неупорядоченном списке атрибут TYPE (отвечащий, как и в нумерованном списке, за вид маркера) может иметь одно из трех значений: disc – маркер имеет вид закрашенного кружка, circle – окружность, square – закрашенного квадрата. Список определений объявляется контейнером (Definition List). В нем тегом отмечается термин или обозначение, и тегом - соответствующее определение. Меню – еще один тип списков. Большинством броузеров элемент (это, конечно, контейнерный элемент) по умолчанию отображается таким же стилем и шрифтом, как и неупорядоченный список. Если необходимо создать список, маркером которого должны быть пиктограммы, изображения или специфические значки, такой список составляют вручную. Пример списков можно посмотреть здесь. Бегущая строка Бегущая строка задается контейнерным элементом (необходимы как открывающий, так и закрывающий теги). Изменять шрифт, цвет и т.д. в бегущей строке можно с помощью элемента с нужными значениями соответствующих атрибутов или с использванием классов стиля CSS. Собственные атрибуты бегущей строки позволяют изменять направление движения, способ показа, отступы, количество показов и т.д. Перечислим эти атрибуты: WIDTH - ширина поля бегущей строки в пикселах или в процентах от размера окна; HEIGHT - высота поля бегущей строки (в пикселах); ALIGN - выравнивание положения текста бегущей строки в ее поле. Возможные значения: TOP (сверху), MIDDLE (посередине), BOTTOM (внизу). BEHAVIOR - позволяет изменять стиль показа. Этот атрибут может принимать значения SCROLL (прокручивает бегущую строку в указанном направлении многократно), SLIDE (как только строка достигнет противоположного края экрана она замирает), ALTERNATE (достигнув противоположного края экрана, строка меняет направление своего движения на противоположное - создается эффект того, что строка отталкивается от границ окна). По умолчанию BEHAVIOR = SCROLL. DIRECTION - задает направление движения (LEFT – справа налево, по умолчанию; RIGHT – слева направо). HSPACE - отступ для начала движения (в процентах от ширины экрана или в пикселах). VSPACE - устанавливает отступ вниз от верхней рамки окна броузера. LOOP – задает количество показов. Указывается в целых числах. Infinite – количество показов не ограничено (задается по умолчанию). SCROLLAMOUNT – устанавливает смещение при каждом шаге (в пикселах или других единицах). Варьируя величину смещения, можно изменять скорость движения строки. SCROLLDELAY – устанавливает задержку в миллисекундах между шагами. Изменяя этот параметр, можно регулировать плавность показа. BGCOLOR – устанавливает цвет поля бегущей строки. Задание Замените произвольный текст на всех страницах на тематический. Отформатируйте текст во всех пяти документах, используя все приведенные выше теги логического и физического форматирования. Не увлекайтесь, форматирование не должно выглядеть избыточным. Расположите на всех страницах графические изображения, подходящие по смыслу и внешнему виду к тексту и внешнему виду страниц. Используйте для каждого изображения атрибуты выравнивания текста, изменения размеров (в пикселах, в процентах, точный размер, размер по одному измерению). Ни в коем случае не допустите искажения изображений. Создайте графическую ссылку на главную страницу на каждой из страниц разделов. Используйте все виды списков - ссылки на главной странице оформите как список меню, а остальные разновидности списков используйте на страницах разделов. На главной странице внизу пустите бегущую строку с рекламной информацией, использовав как можно больше атрибутов. Вернуться в начало документа
Элементы разметки, задающие нумерованные или маркированные списки и таблицы (см. ниже) также относятся к элементам логического форматирования.
Очень важными элементами логического форматирования, являются контейнеры
К элементам физического форматирования относятся описанные ранее элементы
К элементам физического форматирования относятся также элементы
и (где q - может быть одной из цифр 1, 2, 3, 4, 5 или 6) при условии, что эти элементы используют атрибутов для задания выравнивания. Работа с графикой Для размещения на странице графических изображений используется простой (не контейнерный) элемент . Для указания пути к изображению используется обязательный атрибут SRC этого элемента. Полностью команда для вставки изображения может выглядеть следующим образом: По умолчанию, когда изображение вставляется в строку текста (как большая буква), нижний край изображения выравнивается по нижней базисной линии строки (т.е. по воображаемой линии, касающейся снизу букв строки, не имеющих выступающих вниз элементов). Это выравнивание можно изменить при помощи атрибута ALIGN, который может принимать следующие значения: TOP – верхний край изображения выравнивается пл верхней базисной линии строки (т.е. по воображаемой линии, касающейся сверху букв строки, не имеющих выступающих вверх элементов); MIDDLE – среднюю линию изображений по середине строки по вертикали; BOTTOM – выравнивание по умолчанию (см. выше); LEFT – задает расположение изображения так, что текст обтекает изображение, прижатое к левой границе окна броузера и к верхней базисной линии первой строки текста; RIGHT – аналогично предыдущему, только изображение прижимается к правой границе окна. BASELINE – ставит картинку на базисную линию. Атрибут ALT используется для того, чтобы сопроводить изображение коротким текстом (названием), который появится при наведении на изображение мыши. Это важно, так как многие поисковики ищут изображения по этим названиям. Например: Некоторые броузеры по умолчанию показывают название файла. Чтобы этого не происходило, записывается атрибут ALT с пустой строкой в качестве значения: . Во всех приведенных выше примерах картинка будет выведена в своем реальном размере. Если требуется работать с размером изображения, используют атрибуты HEIGHT (высота) и WIDTH (ширина изображения). Если явно указать реальный размер картинки в пикселях, при загрузке страницы под картинку сразу будет отведено место и верстка страницы не собьется. Если жестко задать высоту и ширину картинки в пикселях или в процентах от исходного, то она масштабируется под этот размер. Ясно, что такое масштабирование сопряжено с искажениями изображения (например, при уменьшении высоты в 2 раза, и ширины - в 3). Соответственно, атрибуты изменения размера лучше использовать не одновременно, а по отдельности, так как при задании одного атрибута изменение размера по оставшемуся измерению будет выполнено с сохранением пропорций изображения. При этом не имеет значения, задан размер в пикселях или в процентах от исходного. Рамка вокруг изображения задается атрибутом BORDER. Если он равен нулю, то рамки нет, чем больше значение, тем шире рамка. Например: . Поскольку изображение обтекается текстом, то при желании свободное место вокруг него можно увеличить атрибутами VSPACE (поля вокруг изображения по вертикали) и HSPACE (поля по горизонтали). Эти атрибуты задаются в пикселях. Изображение может быть ссылкой на другой документ. Для этого элемент разметки, задающий изображение должен быть сделан содержимым соответствующего элемента : . Списки В HTML-документе можно использовать списки нескольких видов, например: нумерованные, маркированные, списки определений, списки меню. Для получения дополнительных эффектов списки различных типов могут вкладываться друг в друга. Упорядоченный (нумерованный) список состоит из контейнера списка, определяющего его тип, и тегов , предваряющих каждый пункт списка. Упорядоченный список открывается тегом (сокращение от Ordered List). Для заголовка списка используется тег . Открывающий и закрывающий теги обеспечивают перевод строки до и после списка, отделяя список от остального текста. Тег после названия списка обязателен для Internet Explorer и необязателен для Netscape Navigator. Элементы списка по умолчанию нумеруются арабскими. Для изменения типа нумерации используются приведенные атрибута TYPE элемента OL: значение A задает номер в виде прописных букв; a – номер в виде строчных букв; I – нумерация прописными римскими цифрами; i – нумерация строчными римскими цифрами; 1 - нумерация арабскими цифрами. Атрибут COMPACT элемента OL представляет список в более компактном виде; Для неупорядоченного (маркированного) списка контейнером является тег (Unordered List). В неупорядоченном списке атрибут TYPE (отвечащий, как и в нумерованном списке, за вид маркера) может иметь одно из трех значений: disc – маркер имеет вид закрашенного кружка, circle – окружность, square – закрашенного квадрата. Список определений объявляется контейнером (Definition List). В нем тегом отмечается термин или обозначение, и тегом - соответствующее определение. Меню – еще один тип списков. Большинством броузеров элемент (это, конечно, контейнерный элемент) по умолчанию отображается таким же стилем и шрифтом, как и неупорядоченный список. Если необходимо создать список, маркером которого должны быть пиктограммы, изображения или специфические значки, такой список составляют вручную. Пример списков можно посмотреть здесь. Бегущая строка Бегущая строка задается контейнерным элементом (необходимы как открывающий, так и закрывающий теги). Изменять шрифт, цвет и т.д. в бегущей строке можно с помощью элемента с нужными значениями соответствующих атрибутов или с использванием классов стиля CSS. Собственные атрибуты бегущей строки позволяют изменять направление движения, способ показа, отступы, количество показов и т.д. Перечислим эти атрибуты: WIDTH - ширина поля бегущей строки в пикселах или в процентах от размера окна; HEIGHT - высота поля бегущей строки (в пикселах); ALIGN - выравнивание положения текста бегущей строки в ее поле. Возможные значения: TOP (сверху), MIDDLE (посередине), BOTTOM (внизу). BEHAVIOR - позволяет изменять стиль показа. Этот атрибут может принимать значения SCROLL (прокручивает бегущую строку в указанном направлении многократно), SLIDE (как только строка достигнет противоположного края экрана она замирает), ALTERNATE (достигнув противоположного края экрана, строка меняет направление своего движения на противоположное - создается эффект того, что строка отталкивается от границ окна). По умолчанию BEHAVIOR = SCROLL. DIRECTION - задает направление движения (LEFT – справа налево, по умолчанию; RIGHT – слева направо). HSPACE - отступ для начала движения (в процентах от ширины экрана или в пикселах). VSPACE - устанавливает отступ вниз от верхней рамки окна броузера. LOOP – задает количество показов. Указывается в целых числах. Infinite – количество показов не ограничено (задается по умолчанию). SCROLLAMOUNT – устанавливает смещение при каждом шаге (в пикселах или других единицах). Варьируя величину смещения, можно изменять скорость движения строки. SCROLLDELAY – устанавливает задержку в миллисекундах между шагами. Изменяя этот параметр, можно регулировать плавность показа. BGCOLOR – устанавливает цвет поля бегущей строки. Задание Замените произвольный текст на всех страницах на тематический. Отформатируйте текст во всех пяти документах, используя все приведенные выше теги логического и физического форматирования. Не увлекайтесь, форматирование не должно выглядеть избыточным. Расположите на всех страницах графические изображения, подходящие по смыслу и внешнему виду к тексту и внешнему виду страниц. Используйте для каждого изображения атрибуты выравнивания текста, изменения размеров (в пикселах, в процентах, точный размер, размер по одному измерению). Ни в коем случае не допустите искажения изображений. Создайте графическую ссылку на главную страницу на каждой из страниц разделов. Используйте все виды списков - ссылки на главной странице оформите как список меню, а остальные разновидности списков используйте на страницах разделов. На главной странице внизу пустите бегущую строку с рекламной информацией, использовав как можно больше атрибутов. Вернуться в начало документа
Для размещения на странице графических изображений используется простой (не контейнерный) элемент . Для указания пути к изображению используется обязательный атрибут SRC этого элемента. Полностью команда для вставки изображения может выглядеть следующим образом:
Атрибут ALT используется для того, чтобы сопроводить изображение коротким текстом (названием), который появится при наведении на изображение мыши. Это важно, так как многие поисковики ищут изображения по этим названиям. Например:
Во всех приведенных выше примерах картинка будет выведена в своем реальном размере. Если требуется работать с размером изображения, используют атрибуты HEIGHT (высота) и WIDTH (ширина изображения). Если явно указать реальный размер картинки в пикселях, при загрузке страницы под картинку сразу будет отведено место и верстка страницы не собьется. Если жестко задать высоту и ширину картинки в пикселях или в процентах от исходного, то она масштабируется под этот размер. Ясно, что такое масштабирование сопряжено с искажениями изображения (например, при уменьшении высоты в 2 раза, и ширины - в 3). Соответственно, атрибуты изменения размера лучше использовать не одновременно, а по отдельности, так как при задании одного атрибута изменение размера по оставшемуся измерению будет выполнено с сохранением пропорций изображения. При этом не имеет значения, задан размер в пикселях или в процентах от исходного.
Рамка вокруг изображения задается атрибутом BORDER. Если он равен нулю, то рамки нет, чем больше значение, тем шире рамка. Например:
Изображение может быть ссылкой на другой документ. Для этого элемент разметки, задающий изображение должен быть сделан содержимым соответствующего элемента :
В HTML-документе можно использовать списки нескольких видов, например: нумерованные, маркированные, списки определений, списки меню. Для получения дополнительных эффектов списки различных типов могут вкладываться друг в друга.
Упорядоченный (нумерованный) список состоит из контейнера списка, определяющего его тип, и тегов
Элементы списка по умолчанию нумеруются арабскими. Для изменения типа нумерации используются приведенные атрибута TYPE элемента OL: значение A задает номер в виде прописных букв; a – номер в виде строчных букв; I – нумерация прописными римскими цифрами; i – нумерация строчными римскими цифрами; 1 - нумерация арабскими цифрами. Атрибут COMPACT элемента OL представляет список в более компактном виде;
Для неупорядоченного (маркированного) списка контейнером является тег
Список определений объявляется контейнером
Меню – еще один тип списков. Большинством броузеров элемент
Если необходимо создать список, маркером которого должны быть пиктограммы, изображения или специфические значки, такой список составляют вручную.
Пример списков можно посмотреть здесь.
Бегущая строка задается контейнерным элементом (необходимы как открывающий, так и закрывающий теги). Изменять шрифт, цвет и т.д. в бегущей строке можно с помощью элемента с нужными значениями соответствующих атрибутов или с использванием классов стиля CSS. Собственные атрибуты бегущей строки позволяют изменять направление движения, способ показа, отступы, количество показов и т.д. Перечислим эти атрибуты: WIDTH - ширина поля бегущей строки в пикселах или в процентах от размера окна; HEIGHT - высота поля бегущей строки (в пикселах); ALIGN - выравнивание положения текста бегущей строки в ее поле. Возможные значения: TOP (сверху), MIDDLE (посередине), BOTTOM (внизу). BEHAVIOR - позволяет изменять стиль показа. Этот атрибут может принимать значения SCROLL (прокручивает бегущую строку в указанном направлении многократно), SLIDE (как только строка достигнет противоположного края экрана она замирает), ALTERNATE (достигнув противоположного края экрана, строка меняет направление своего движения на противоположное - создается эффект того, что строка отталкивается от границ окна). По умолчанию BEHAVIOR = SCROLL. DIRECTION - задает направление движения (LEFT – справа налево, по умолчанию; RIGHT – слева направо). HSPACE - отступ для начала движения (в процентах от ширины экрана или в пикселах). VSPACE - устанавливает отступ вниз от верхней рамки окна броузера. LOOP – задает количество показов. Указывается в целых числах. Infinite – количество показов не ограничено (задается по умолчанию). SCROLLAMOUNT – устанавливает смещение при каждом шаге (в пикселах или других единицах). Варьируя величину смещения, можно изменять скорость движения строки. SCROLLDELAY – устанавливает задержку в миллисекундах между шагами. Изменяя этот параметр, можно регулировать плавность показа. BGCOLOR – устанавливает цвет поля бегущей строки.
