— создает группу строк заголовков, этот дескриптор можно использовать в коде таблицы только один раз; TBODY — используется для создания одной или нескольких групп строк; ♦ TFOOT — создает группу строк нижнего колонтитула таблицы, этот дескриптор можно использовать в коде таблицы только один раз. Все дескрипторы группирования строк являются парными. " width="640"
© 2020, Баринов Владимир Сергеевич 525 0
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Был в сети 06.03.2023 18:43
Баринов Владимир Сергеевич
преподаватель
36 лет
677
88 056 
Введение в язык гипертекстовой разметки HTML
Категория:
Прочее
26.10.2020 11:31
Просмотр содержимого документа
«Введение в язык гипертекстовой разметки HTML»
HTML
HTML – язык гипертекстовой разметки Web -страниц – является компьютерным языком программирования для разработки Web- страниц
HTML – коллекция управляющих символов -дескрипторов для добавления, форматирования и позиционирования элементов Web- страницы.
Обязательные дескрипторы
Работа с текстом
Графика на Web- страницах
Гиперссылка
Основные разделы документа HTML. Обязательные дескрипторы.
- начало страницы
- оформление заголовка страницы
заголовок, автор
…
- текст и основная часть страницы
Оглавление
ваш заголовок -6 ваш текст - создание абзаца ALIGN=“left” – выравнивание текста по левой стороне ALIGN=“right” – выравнивание текста по правой стороне ALIGN=“center” – выравнивание теста по центру ALIGN=“justify” - выравнивание теста по ширине … - не позволяет разрывать текст на строке - прерывание текста, перенос на следующую строку .. - жирный .. - курсив .. - подчеркивание .. - перечеркивание Далее Назад " width="640"
Работа с текстом
- – установка размера шрифта
- -6 ваш заголовок -6
ваш текст
- создание абзаца- ALIGN=“left” – выравнивание текста по левой стороне
- ALIGN=“right” – выравнивание текста по правой стороне
- ALIGN=“center” – выравнивание теста по центру
- ALIGN=“justify” - выравнивание теста по ширине
- … - не позволяет разрывать текст на строке
- - прерывание текста, перенос на следующую строку
- .. - жирный
- .. - курсив
- .. - подчеркивание
- .. - перечеркивание
Далее
Назад
Выравнивание текста абзаца
- Абзац выровнен влево
- Абзац выровнен по центру
- Абзац выровнен вправо
- Абзац выровнен по ширине
-
Этот o т текст всегда должен оставаться в одной строке
Нумерованный список
Для создания нумерованного списка
используется комбинация двух пар
дескрипторов.
... устанавливают начало и конец
нумерованного списка,
... отмечают отдельные пункты списка.
Типы списков
Нумерованный
Маркированный
Многоуровневый
- Текст пункта списка должен быть в пределах нескольких строк, иначе список перестает восприниматься как одно целое и теряется смысл его применения.
- По умолчанию пункты списка нумеруются последовательно цифрами 1, 2, 3 и т.д. Чтобы изменить способ нумерации пунктов списка, воспользуйтесь атрибутами TYPE , START и VALUE .
- Тип нумерованного списка устанавливается с помощью атрибута type дескриптора . Значения атрибута TYPE
Значение атрибута type
“ 1”
Тип нумерации пунктов списка
“ i”
1 ,2,3,4
i,ii,iii,iv
“ I”
“ A”
I,II,III,IV
“ a”
A,B,C,D
a,b,c,d
Некоторые номера списка могут быть пропущены, и текущему пункту, заданному дескриптором , присваивается номер с помощью атрибута VALUE . Все следующие пункты списка будут нумероваться последова-тельно, начиная с номера, заданного в атрибуте VALUE . Управление нумерацией пунктов списка Ha чнем список с пункта 3 C л e дующий пункт c писк a Продолжим список с пункта 7 Следующий пункт c писк a " width="640"
Установка номера пунктов списка с помощью атрибута START в дескрипторе OL
Некоторые номера списка могут быть пропущены, и текущему пункту, заданному дескриптором , присваивается номер с помощью атрибута VALUE .
Все следующие пункты списка будут нумероваться последова-тельно, начиная с номера, заданного в атрибуте VALUE .
Управление нумерацией пунктов списка
Ha чнем список с пункта 3
C л e дующий пункт c писк a
Продолжим список с пункта 7
Следующий пункт c писк a
Маркированный список
Для создания маркированного списка
используется комбинация двух пар
дескрипторов.
... устанавливают начало и конец
маркированного списка,
... отмечают отдельные пункты списка.
С помощью атрибута TYPE можно изменить тип маркера. Установка атрибута TYPE в дескрипторе применяет тип маркера ко всем пунктам списка. Данный атрибут в дескрипторе изменяет маркер текущего пункта, сохраняя прежними маркеры остальных пунктов списка
Значение атрибута TYPE в маркированном списке
• - disk
○ - circle
■ - square
Маркированный список
Яблоко
Груша
Слива
Вишня
Черешня
Многоуровневые списки OL LI Нумерованный LI OL LI Пункт 1 LI LI Пункт 2 LI LI Пункт 3 LI OL LI Маркированный LI UL LI Первый вариант LI LI Второй вариант LI LI Третий вариант LI UL Смешанный Пункт a Пункт b LI Пункт c LI OL OL " width="640"
Многоуровневый список
Многоуровневый список – сочетание дескрипторов
- и
- Пункт a
- Пункт b
- белый – white
- бирюзовый – teal
- желтый – yellow
- зеленый – green
- золотой – gold
- красно-коричневый – maroon
- красный – red
- лимонный – lime
- морской волны – aqua
- фуксиновый – fuchsia
- черный – black
- пурпурный – purple
- серебряный – silver
- серый- gray
- синий – blue
- темно-голубой - navy
- оливковый – olive
- Web- страница с рисунком
Мои рисунки\Мой файл. jpg ‘
- LEFT – рисунок выравнивается по левому краю
- RIGHT – рисунок выравнивается по правому краю
- TOP – текст выравнивается по верхнему краю рисунка
- MIDLE – текст выравнивается по средней линии рисунка
- BOTTOM – текст выравнивается по нижнему краю рисунка
- адрес ’ гиперссылка
- Гиперссылка на другие Web- страницы
- Гиперссылка на графические файлы
- Гиперссылка на звуковые файлы видеоклипы
- Цвет гиперссылки
- MIDI – музыкальные произведения в файлах с расширением . mid
- MP3 – музыка, звуковые сообщения в файлах с расширением .mp3
- RealAudio – интерактивное радио и звукозапись в файлах с расширением . ra
- WAV – звуковые эффекты в файлах с расширением .wav
- AVI – клипы с расширением .avi
- MPEG – клипы с расширением .mpg или .mpeg
- QuickTime – небольшие клипы в файлах с расширением .mov или .gt
- Например:
- Web- страница с гиперссылкой
- alink=‘green’ vlink=‘yellow’
- В коде HTML каждая строка и ячейка таблицы создается индивидуально.
- До начала создания таблицы ее надо обязательно нарисовать, подсчитать количество строк и ячеек, определить, какие ячейки надо объединить.
… - новая строка… - ячейка заголовка… - обычная ячейка- По умолчанию текст в ячейках заголовка показан полужирным шрифтом с выравниванием по центру
- Текст в обычных ячейках не выделяется и выравнивается по левому краю
- Заголовок таблицы можно создать с помощью известных вам дескрипторов —
- Но поскольку ширина таблицы может отличаться от ширины окна обозревателя, выровнять текстовый заголовок относительно таблицы может оказаться довольно сложно.
- По умолчанию заголовок выравнивается по центру таблицы.
- Чтобы изменить выравнивание влево или вправо, присвойте атрибуту ALIGN в дескрипторе CAPTION значение left или right .
- Атрибуту ALIGN также можно присвоить значение bottom . В этом случае заголовок появится под таблицей.
- В принципе в таблице допускается создание нескольких заголовков, но лучше этого не делать. Так, в обозревателе Netscape Navigator дескриптор caption может произвольно изменить порядок заголовков.
- Для установки цвета ячейки таблицы применяется атрибут BGCOLOR . Окрашивание ячеек используется для выделения важных блоков данных в таблице.
- Чтобы установить цвет фона сразу для группы ячеек, выполните группировку столбцов или строк.
- Фоновый рисунок устанавливается в атрибуте BACKGROUND .
- Этот атрибут можно установить как для всей таблицы в дескрипторе , так и для отдельной ячейки в дескрипторах и . Соответственно, если в первом случае рисунок будет помещен в фоне всей таблицы, то во втором случае — только в фоне данной ячейки. Если разные фоновые рисунки были назначены таблице и ячейке, то фоновый рисунок ячейки появится поверх рисунка таблицы.
- Требования к фоновым рисункам таблицы такие же, как и к фону Web -страницы, — фон не должен мешать чтению текста и восприятию информации.
- Следует учесть, что разные обозреватели по-разному отображают фоновые рисунки, назначенные всей таблице. Если Internet Explorer заполняет копиями изображения все пространство таблицы, так же, как фоновый рисунок страницы заполняет все окно обозревателя, то Netscape Navigator повторит рисунок в каждой ячейке. В связи с этим лучше воздержаться от использования фоновых рисунков таблицы.
- Размеры ячеек устанавливаются с помощью атрибутов width и height и две ячейки в первом столбце объединяются с помощью атрибута ROWSPAN .
- Обратите внимание на следующий важный момент: в дескрипторе атрибутам border , cellpadding и CELLSPACING присвоено значение 0. Благодаря этому не видны границы между фоновыми рисунками в ячейках и выравнивание текста заголовка в верхней панели совпадает с выравниванием фонового рисунка.
- По умолчанию обозреватели не показывают границы вокруг таблицы и между ячейками. Это вполне подходит, если таблица используется для разметки макета документа. Если же нужно представить данные в форме таблицы, то прорисовка границ усилит зрительный эффект и поможет пользователям лучше понять взаимосвязи данных в ячейках таблицы.
- с помощью атрибута BORDER в дескрипторе мы устанавливаем показ границ таблицы. Данному атрибуту присваивается значение ширины внешней границы таблицы в пикселях.
- Обратите внимание, что атрибут BORDER изменяет вид только внешней границы вокруг таблицы, тогда как внутренние границы между ячейками не меняются.
- Для изменения внутренних границ используются атрибуты CELLPADDING и CELLSPACING .
- По умолчанию обозреватели показывают границы серым цветом. Чтобы изменить цвет, воспользуйтесь атрибутом BORDERCOLOR .
- Установка данного атрибута изменит цвет как внешних, так и внутренних границ. При этом исчезнет эффект объемности границ
- Чтобы убрать границы, присвойте атрибуту BORDER значение 0, или просто удалите этот атрибут из дескриптора .
- Установив атрибут BORDER , можно либо показать все границы, либо не показывать границ.
- Однако, часто нужно показать только внешние или только внутренние границы, но лишь вокруг определенных ячеек.
- Для выборочной прорисовки границ используются атрибуты FRAME и RULES в дескрипторе
- void — нет внешних границ;
- above — граница по верхнему краю таблицы;
- below — граница по нижнему краю таблицы;
- rhs — граница по правому краю таблицы;
- lhs — граница по левому краю таблицы; •
- hsides — границы по верхнему и нижнему краям таблицы;
- vsides — границы по левому и правому краям таблицы;
- border — все границы (задано по умолчанию).
- none — нет внутренних границ;
- cols — границы между столбцами;
- rows — границы между строками;
- groups — границы между группами столбцов и строк;
- all — все внутренние границы (задано по умолчанию).
- Существует ряд дескрипторов кода HTML , которые предназначены для группирования ячеек таблицы. Это удобная функция, позволяющая форматировать группы ячеек как одно целое, вместо того чтобы устанавливать атрибуты в дескрипторе каждой индивидуальной ячейки.
- Установки атрибутов форматирования в индивидуальных ячейках имеют более высокий приоритет и отменяют установки для всей группы.
- Кроме того, можно объединить несколько ячеек в одну ячейку, которая будет занимать несколько столбцов или строк.
- Иногда бывает необходимо создать в таблице ячейку, занимающую несколько столбцов или строк. Это особенно важно при выполнении разметки макета страницы с помощью таблицы.
- Для объединения ячеек в дескрипторах и устанавливаются следующие параметры:
- Для группирования столбцов используются следующие дескрипторы:
- Дескрипторы И содержат набор атрибутов форматирования ячеек. Так, установка атрибута BGCOLOR в дескрипторе группы столбцов изменит цвет фона во всех ячейках, относящихся к группе.
- Для группирования строк используются следующие дескрипторы:
- Применение таблицы для разметки документов совершенно не мешает использованию таблиц в тексте этого же документа.
- Код HTML допускает создание вложенных таблиц. Для этого просто в ячейку таблицы добавьте новую таблицу
- Выравнивание таблицы в тексте документа осуществляется с помощью атрибута ALIGN . Этому атрибуту присваиваются следующие значения:
- Чтобы выровнять фрагмент текста слева или справа от таблицы, а остальной текст продолжить ниже таблицы , введите дескриптор с установленным атрибутом CLEAR :
- Атрибуту clear присваивается значение left или right , такое же, какое было присвоено атрибуту align таблицы.
- в нужных вариантах
H2 Многоуровневые списки
OL
LI Нумерованный LI
OL
LI Пункт 1 LI
LI Пункт 2 LI
LI Пункт 3 LI
OL
LI Маркированный LI
UL
LI Первый вариант LI
LI Второй вариант LI
LI Третий вариант LI
UL
Смешанный
LI Пункт c LI
OL
OL
- цвет шрифта BODY BGCOLOR = ‘yellow’ - цвет фона страницы " width="640"
Цвет текста и фона Web- страницы
FONT COLOR = ‘red’ - цвет шрифта
BODY BGCOLOR = ‘yellow’ - цвет фона страницы
Оглавление
/MARQUEE Бегущая строка — это анимационный эффект, при котором строка текста перемещается по странице один (несколько ) раз, или постоянно. Атрибуты этого дескриптора определяют параметры перемещения текста. BEHAVIOR — способ выполнения эффекта бегущей строки: scroll — текст исчезает за краем Web -страницы; slide — после выполнения заданного числа циклов, текст остается у левого или правого поля Web -страницы; alternate — направление перемещения текста в строке меняется на противоположное после выполнения каждого цикла. BGCOLOR — цвет фона бегущей строки Direction — направление перемещения текста: left — влево; right — вправо. HEIGHT — высота бегущей строки. hspace — отступ в пикселях текста бегущей строки от левого и правого полей Web -страницы. " width="640"
Бегущая строка MARQUEE /MARQUEE
Бегущая строка — это анимационный эффект, при котором строка текста перемещается по странице один (несколько ) раз, или постоянно. Атрибуты этого дескриптора определяют параметры перемещения текста.
BEHAVIOR — способ выполнения эффекта бегущей строки:
scroll — текст исчезает за краем Web -страницы;
slide — после выполнения заданного числа циклов, текст остается у левого или правого поля Web -страницы;
alternate — направление перемещения текста в строке меняется на противоположное после выполнения каждого цикла.
BGCOLOR — цвет фона бегущей строки
Direction — направление перемещения текста:
left — влево;
right — вправо.
HEIGHT — высота бегущей строки.
hspace — отступ в пикселях текста бегущей строки от левого и правого полей Web -страницы.
LOOP — число показов текста в строке:
? — целочисленное значение, указывающее число повторов;
infinite — бесконечное повторение эффекта по циклу.
SCROLLAMOUNT — смещение текста в пикселях за один шаг.
SCROLLDELAY — временной промежуток между смещениями в миллисекундах, по умолчанию 60 мс. Используйте этот атрибут, чтобы замедлить перемещение текста в строке
vspace — отступ в пикселях по вертикали от текста до рамки бегущей строки.
TRUESPEED — минимальное значение смещения текста, по умолчанию 60 мс.
WIDTH — ширина бегущей строки в пикселях.
Эффект бегущей строки поддерживается только в обозревателе Internet Explorer . В других обозревателях текст будет отображаться как обычная строка.
Бегущая строка
Текст, заключенный между дескрипторами .. можно форматировать так же, как обычный текст Web -страницы.
Специальные символы
Вам может понадобиться использовать в тексте Web- страницы символы, которые зарезервированы в качестве служебных в языке HTML , например и &, или символы, которые не могут быть введены непосредственно с клавиатуры.
Для добавления в текст специальных символов используется числовой или именной код. В обоих случаях код символа начинается с символа амперсанда (&), за которым следует номер символа (числовой код из кодовой таблицы ASCII ) или сокращенное имя (именной код).
&# код ASCII
< меньше
2 больше
Ссылка на файл Выравнивание по левой стороне " width="640"
Вставка рисунка
ALIGN=‘right’
Ссылка на файл
Выравнивание по левой стороне
Выравнивание рисунка и текста страницы
Для выравнивания рисунка относительно текста документа атрибуту ALIGN присваивается следующие значения:
Для выравнивания текста абзаца, в который добавлен рисунок, атрибуту ALIGN присваивается следующие значения:
Выравнивание рисунка и текста страницы
Текст по середине
middle
Текст выровнен по нижнему краю
bottom
Текст по верхнему краю
top
Оглавление
гиперссылка Гиперссылка на другие Web- страницы Гиперссылка на графические файлы Гиперссылка на звуковые файлы видеоклипы Цвет гиперссылки Далее Назад " width="640"
Гиперссылка
Далее
Назад
Гиперссылка на другие Web- страницы
Моя почта
http:// - важный элемент адреса гиперссылки ( ftp:// )
В то время как www можно опустить:
Моя почта
Назад
Гиперссылка на графические файлы
Большое изображение Маленькое изображение
(от 72 до 150 пикселей/дюйм)
Щелкните здесь, для просмотра изображения
Назад
Гиперссылка на звуковые файлы и видео клипы
Назад
Новая гиперссылка Посещенная гиперссылка Активная гиперссылка Назад " width="640"
Цвет гиперссылки
Новая гиперссылка
Посещенная гиперссылка
Активная гиперссылка
Назад
Первая гиперссылка – активная.
Вторая – посещенная.
Третья - новая.
Оглавление
Разметка Web -страниц с помощью таблиц
Дескрипторы создания таблицы:
Пример простейшей пустой таблицы
Создание таблицы с различным числом ячеек в строках
Добавление заголовка таблицы
, который создает заголовок непосредственно в таблице. " width="640"
Поэтому для создания заголовков лучше использовать дескриптор CAPTION , который создает заголовок непосредственно в таблице.
значение left или right . Атрибуту ALIGN также можно присвоить значение bottom . В этом случае заголовок появится под таблицей. В принципе в таблице допускается создание нескольких заголовков, но лучше этого не делать. Так, в обозревателе Netscape Navigator дескриптор caption может произвольно изменить порядок заголовков. " width="640"
Заливка ячеек цветом
Использование в таблице фоновых изображений
Однако!
Разметка макета страницы с помощью таблицы, содержащей фоновые рисунки
Прорисовка границ таблицы
Границы таблицы
Выборочная прорисовка границ
Выборочная прорисовка границ
