Презентация на тему "Язык гипертекстовой разметки html" 11 класс

Текст пункта списка должен быть в пределах нескольких строк, иначе список перестает восприниматься как одно целое и теряется смысл его применения. По умолчанию пункты списка нумеруются последовательно цифрами 1, 2, 3 и т.д. Чтобы изменить способ нумерации пунктов списка, воспользуйтесь атрибутами TYPE, START и VALUE. Тип нумерованного списка устанавливается с помощью атрибута type дескриптора

. Значения атрибута TYPE

Некоторые номера списка могут быть пропущены, и текущему пункту, заданному дескриптором

Маркированный список

Для создания маркированного списка используется комбинация двух пар дескрипторов.

...

• Яблоко
• Груша
• Слива
• Вишня
• Черешня

Многоуровневый список

1. Нумерованный
1. Пункт 1
2. Пункт 2
3. Пункт 3
Маркированный

• Первый вариант
• Второй вариант
• Третий вариант

1. Пункт a
2. Пункт b
3. Пункт c

и

в нужных вариантах

Цвет текста и фона Web-страницы

белый – white бирюзовый – teal желтый – yellow зеленый – green золотой – gold красно-коричневый – maroon красный – red лимонный – lime морской волны – aqua фуксиновый – fuchsia черный – black пурпурный –purple серебряный – silver серый- gray синий – blue темно-голубой - navy оливковый – olive - цвет шрифта - цвет фона страницы

Оглавление

Бегущая строка

BEHAVIOR — способ выполнения эффекта бегущей строки: scroll — текст исчезает за краем Web-страницы; slide — после выполнения заданного числа циклов, текст остается у левого или правого поля Web-страницы; alternate — направление перемещения текста в строке меняется на противоположное после выполнения каждого цикла. BGCOLOR — цвет фона бегущей строки Direction— направление перемещения текста: left — влево; right — вправо. HEIGHT— высота бегущей строки. hspace— отступ в пикселях текста бегущей строки от левого и правого полей Web-страницы. Бегущая строка — это анимационный эффект, при котором строка текста перемещается по странице один (несколько ) раз, или постоянно. Атрибуты этого дескриптора определяют параметры перемещения текста.

LOOP — число показов текста в строке: ? — целочисленное значение, указывающее число повторов; infinite — бесконечное повторение эффекта по циклу. SCROLLAMOUNT — смещение текста в пикселях за один шаг. SCROLLDELAY — временной промежуток между смещениями в миллисекундах, по умолчанию 60 мс. Используйте этот атрибут, чтобы замедлить перемещение текста в строке vspace— отступ в пикселях по вертикали от текста до рамки бегущей строки. TRUESPEED — минимальное значение смещения текста, по умолчанию 60 мс. WIDTH — ширина бегущей строки в пикселях.

Специальные символы

Вам может понадобиться использовать в тексте Web-страницы символы, которые зарезервированы в качестве служебных в языке HTML, например и &, или символы, которые не могут быть введены непосредственно с клавиатуры. Для добавления в текст специальных символов используется числовой или именной код. В обоих случаях код символа начинается с символа амперсанда (&), за которым следует номер символа (числовой кодиз кодовой таблицы ASCII) или сокращенное имя (именной код). код ASCII < меньше >больше

Вставка рисунка

Выравнивание рисунка и текста страницы

Для выравнивания рисунка относительно текста документа атрибуту ALIGNприсваивается следующие значения: LEFT – рисунок выравнивается по левому краю RIGHT – рисунок выравнивается по правому краю Для выравнивания текста абзаца, в который добавлен рисунок, атрибуту ALIGNприсваивается следующие значения: TOP – текст выравнивается по верхнему краю рисунка MIDLE – текст выравнивается по средней линии рисунка BOTTOM – текст выравнивается по нижнему краю рисунка

Текст по середине middle Текст по верхнему краю top Текст выровнен по нижнему краю bottom Выравнивание рисунка и текста страницы

Оглавление

Гиперссылка

Гиперссылка на графические файлы

Гиперссылка на звуковые файлы и видео клипы

MIDI – музыкальные произведения в файлах с расширением .mid MP3 – музыка, звуковые сообщения в файлах с расширением .mp3 RealAudio – интерактивное радио и звукозапись в файлах с расширением .ra WAV – звуковые эффекты в файлах с расширением .wav AVI – клипы с расширением .avi MPEG – клипы с расширением .mpg или .mpeg QuickTime – небольшие клипы в файлах с расширением .movили .gt Например: Назад

Цвет гиперссылки

Оглавление Первая гиперссылка – активная. Вторая – посещенная. Третья - новая.

Разметка Web-страниц с помощью таблиц

В коде HTML каждая строка и ячейка таблицы создается индивидуально. До начала создания таблицы ее надо обязательно нарисовать, подсчитать количество строк и ячеек, определить, какие ячейки надо объединить.

Дескрипторы создания таблицы: …

Пример простейшей пустой таблицы

Создание таблицы с различным числом ячеек в строках

Добавление заголовка таблицы

Заголовок таблицы можно создать с помощью известных вам де­скрипторов — Но поскольку ширина таблицы может отличаться от ширины окна обозревателя, выровнять текстовый заголовок относительно таблицы может оказаться довольно сложно.

Поэтому для создания заголовков лучше использовать дескриптор

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

Заливка ячеек цветом

Для установки цвета ячейки таблицы применяется атрибут BGCOLOR. Окрашивание ячеек используется для выделения важных блоков данных в таблице. Чтобы установить цвет фона сразу для группы ячеек, выполните группировку столбцов или строк.

Использование в таблице фоновых изображений

Фоновый рисунок устанавливается в атрибуте BACKGROUND. Этот атрибут можно установить как для всей таблицы в дескрипторе

Однако!

Следует учесть, что разные обозреватели по-разному отображают фоновые рисунки, назначенные всей таблице. Если Internet Explorer заполняет копиями изображения все пространство таблицы, так же, как фоновый рисунок страницы заполняет все окно обозревателя, то Netscape Navigator повторит рисунок в каждой ячейке. В связи с этим лучше воздержаться от использования фоновых рисунков таблицы.

Разметка макета страницы с помощью таблицы, содержащей фоновые рисунки

Размеры ячеек устанавливаются с помощью атрибутов width и height и две ячейки в первом столбце объединяются с помощью атрибута ROWSPAN. Обратите внимание на следующий важный момент: в дескрипторе

Прорисовка границ таблицы

По умолчанию обозреватели не показывают границы вокруг таблицы и между ячейками. Это вполне подходит, если таблица используется для разметки макета документа. Если же нужно представить данные в форме таблицы, то прорисовка границ усилит зрительный эффект и поможет пользователям лучше понять взаимосвязи данных в ячейках таблицы.

Границы таблицы

с помощью атрибута BORDER в дескрипторе

Обратите внимание, что атрибут BORDER изменяет вид только внешней границы вокруг таблицы, тогда как внутренние границы между ячейками не меняются. Для изменения внутренних границ используются атрибуты CELLPADDING и CELLSPACING. По умолчанию обозреватели показывают границы серым цветом. Чтобы изменить цвет, воспользуйтесь атрибутом BORDERCOLOR. Установка данного атрибута изменит цвет как внешних, так и внутренних границ. При этом исчезнет эффект объемности границ Чтобы убрать границы, присвойте атрибуту BORDER значение 0, или просто удалите этот атрибут из дескриптора

Выборочная прорисовка границ

Установив атрибут BORDER, можно либо показать все границы, либо не показывать границ. Однако, часто нужно показать только внешние или только внутренние границы, но лишь вокруг определенных ячеек. Для выборочной прорисовки границ используются атрибуты FRAME и RULES в дескрипторе

Выборочная прорисовка границ

♦ FRAME — устанавливает показ внешних границ таблицы: void — нет внешних границ; above— граница по верхнему краю таблицы; below — граница по нижнему краю таблицы; rhs— граница по правому краю таблицы; lhs— граница по левому краю таблицы; • hsides— границы по верхнему и нижнему краям таблицы; vsides — границы по левому и правому краям таблицы; border — все границы (задано по умолчанию). ♦RULES — устанавливает показ внутренних границ таблицы: none— нет внутренних границ; cols— границы между столбцами; rows— границы между строками; groups— границы между группами столбцов и строк; all— все внутренние границы (задано по умолчанию).

Группирование и объединение ячеек таблицы

Существует ряд дескрипторов кода HTML, которые предназначены для группирования ячеек таблицы. Это удобная функция, позволяющая форматировать группы ячеек как одно целое, вместо того чтобы устанавливать атрибуты в дескрипторе каждой индивидуальной ячейки. Установки атрибутов форматирования в индивидуальных ячейках имеют более высокий приоритет и отменяют установки для всей группы. Кроме того, можно объединить несколько ячеек в одну ячейку, которая будет занимать несколько столбцов или строк.

Объединение ячеек

Иногда бывает необходимо создать в таблице ячейку, занимающую несколько столбцов или строк. Это особенно важно при выполнении разметки макета страницы с помощью таблицы. Для объединения ячеек в дескрипторах

Группирование столбцов

Для группирования столбцов используются следующие дескрипторы: ♦ - структурная группа столбцов, применяется для раз­бивки таблицы на столбцы разных типов, например: столбец заголовков и столбцы данных; ♦

Группирование строк

Для группирования строк используются следующие дескрипторы: ♦ — создает группу строк заголовков, этот дескриптор мож­но использовать в коде таблицы только один раз;

Группирование столбцов для форматирования таблицы

Создание вложенных таблиц

Применение таблицы для разметки документов совершенно не мешает использованию таблиц в тексте этого же документа. Код HTML допускает создание вложенных таблиц. Для этого просто в ячейку таблицы добавьте новую таблицу

Выравнивание вложенной таблицы в ячейке определяется значением атрибута align в дескрипторе

Выравнивание таблиц в тексте документа

Выравнивание таблицы в тексте документа осуществляется с помощью атрибута ALIGN. Этому атрибуту присваиваются следующие значения: left— таблица выравнивается по левому краю окна с обтеканием текста справа от таблицы; right— таблица выравнивается по правому краю окна с обтекани­ем текста слева от таблицы; all— таблица выравнивается по центру окна с обтеканием текста справа и слева от таблицы (поддерживается не всеми обозревателями); center— таблица выравнивается по центру окна, разрывая текст на блоки над и под таблицей. Чтобы выровнять фрагмент текста слева или справа от таблицы, а остальной текст продолжить ниже таблицы, введите дескриптор с установленным атрибутом CLEAR: Атрибуту clear присваивается значение left или right, такое же, какое было присвоено атрибуту align таблицы.

Выравнивание рисунка в ячейке таблицы