Презентация на тему "Списки в html-документе"

Презентация: Списки в html-документе
Включить эффекты
1 из 42
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
0.0
0 оценок

Комментарии

Нет комментариев для данной презентации

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


Добавить свой комментарий

Аннотация к презентации

Смотреть презентацию онлайн с анимацией на тему "Списки в html-документе". Презентация состоит из 42 слайдов. Материал добавлен в 2019 году.. Возможность скчачать презентацию powerpoint бесплатно и без регистрации. Размер файла 3.21 Мб.

  • Формат
    pptx (powerpoint)
  • Количество слайдов
    42
  • Слова
    другое
  • Конспект
    Отсутствует

Содержание

  • Презентация: Списки в html-документе
    Слайд 1

    Списки в HTML-документе

  • Слайд 2

    Списки в HTML-документе.

    Маркированные -- обозначенные маркером Нумерованные -- обозначенные цифрами Словарного типа -- обозначенные буквами Немаркированные -- не обозначенные маркером,разделённые по определению.

  • Слайд 3

    Нумерованный список html страницы

    Для создания нумерованных списков используются тэги

    1. Тэгом
        отмечается начало/окончание всего списка. Тэгом
      1. обозначают начало/конец отдельного элемента списка. По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации START - служит для задания начального номера списка, отличного от 1. VALUE - дает возможность назначить произвольный номер любому элементу списка.
  • Слайд 4
  • Слайд 5

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

    Для создания маркированных списков применяют тэги

      Тэгом
        отмечается начало/окончание всего списка. Тэгом
      • обозначают начало/конец отдельного элемента списка. По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута TYPE можно изменить стиль маркирования. В пределах одного списка можно использовать различную маркировку элементов списка.
  • Слайд 6
  • Слайд 7

    Многоуровневый список html страницы

    Для создания многоуровневых списков можно использовать как маркированные, так и нумерованные списки, а также их сочетание. Многоуровневый список получается путем вложения одного списка в тело другого. Главная задача при этом не запутаться. Для этого советую делать различные отступы для отдельных списков.

  • Слайд 8

    Код может выглядеть так:

    1. Первая страница
      1. Первый абзац первой страницы
      2. Второй абзац первой страницы
      3. Третий абзац первой страницы
    2. Вторая страница
      1. Первый абзац второй страницы
      2. Второй абзац второй страницы
      3. Третий абзац второй страницы
  • Слайд 9

    Результат:

    Первая страница Первый абзац первой страницы Второй абзац первой страницы Третий абзац первой страницы Вторая страница Первый абзац второй страницы Второй абзац второй страницы Третий абзац второй страницы

  • Слайд 10

    Списки определений html страницы

    Для создания списков определений используют три тэга:

    - начало/конец списка. - начало/конец конкретного термина. - начало/конец поясняющей статьи термина. Тэги и не обязательно чередовать. Т.е. можно "привязать" к одному определению несколько терминов, и, наоборот.
  • Слайд 11
  • Слайд 12

    Таблицы HTML-документа

  • Слайд 13

    Теги Таблиц

    Таблицы в документе определяются тегами:

    - открывающим - закрывающим.Как известно, любая таблица состоит изстрок - ... - истолбцов - ... - Причём, сначала прописываются теги строк, а внутри них - теги столбцов!
  • Слайд 14
  • Слайд 15

    Размеры столбцов

    Простые размеры ячеек можно задать обозначив ширину и высоту столбцов через атрибуты:

    - ширина столбца - высота столбцаПричём, ширину можно задать для каждого столбца, но только верхней строки - нижние строки выровняются автоматически.Высоту можно задать для каждой строки, но только одного столбца - остальные выровняются автоматически.
  • Слайд 16

    Обрамление таблицы документа html

    Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга

    . Например, BORDER=“1” Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING. Например, CELLSPACING=“1” По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.
  • Слайд 17
  • Слайд 18

    Заголовок таблицы документа html

    Для создания заголовка таблицы служит тэг

    . По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей. Следует сказать, что стандарт HTML не позволяет ставить одной таблице несколько заголовков.
  • Слайд 19
  • Слайд 20

    Группирование столбцов документа html

    Для группирования столбцов таблицы служат тэги

    и . Дескриптор создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные. Дескриптор предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа.
  • Слайд 21
  • Слайд 22

    Выравнивание данных в таблице html страницы

    Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN. Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево. Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине. Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы. Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.

  • Слайд 23
  • Слайд 24

    Слияние ячеек таблицы html-страницы

    При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку. Атрибут COLSPAN тэгов

    , позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию. Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге.
  • Слайд 25
  • Слайд 26

    Отображение границ таблицы html-страницы

    Если значение атрибута BORDER тэга

    отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать. Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы. Атрибут RULES - указывает набор внутренних разделительных линий. Ниже приведены допустимые значения этих атрибутов.
  • Слайд 27
  • Слайд 28
  • Слайд 29

    Вложенные таблицы html-страницы

    Вложение таблиц одну в другую - очень распространенный прием оформления внешнего вида web-страницы. Прежде всего надо построить главную таблицу, а затем в ее ячейках разместить дочерние таблицы. Определяя таблицы, надо не забывать включать в их описание все закрывающие тэги, содержащие символ косой черты, т.к. пропуск всего одного такого дескриптора исказит таблицу кардинальным образом. Не следует, также, злоупотреблять вложением, т.к. в этом случае существенно замедляется загрузка страницы браузером. Форматирование вложенных таблиц осуществляется по общим правилам, что, собственно и делает страницу привлекательной.

  • Слайд 30
  • Слайд 31

    Слои

  • Слайд 32

    Код слоя:  содержимое слоя   id- это индивидуальное имя слоя, совпадать и повторяться оно не должно!  style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно.  left- расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.  top- расстояние от верха.  ну, ширина и высота вам уже известны, их не упоминаю.  z-index- значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.

  • Слайд 33

    Дополнительные возможные теги:   background-color: цвет фона   layer-background-color:цвет слоя    border: 1px none- если убрать "ноне", то вокруг слоя появится бордюрчик 1 пихель толщиной.

  • Слайд 34

    Код HTML для примера показан ниже. Пример 1. Создание слоев

    Слой 1 наверхуСлой 1Слой 2Слой 2 наверху Слой 1Слой 2
  • Слайд 35

    Карта ссылок документа html

    Карта ссылок- это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку. После щелчка кнопкой мыши в пределах зоны браузер открывает страницу, отвечающую этой зоне. Для удобства выбора зоны изображение должно состоять, по возможности, из четко разграниченных областей. Прежде чем создавать карту ссылок, надо в графическом редакторе определить координаты крайних точек зон. Зоны могут быть трех типов. Прямоугольная зона (rect). В этом случае задаются координаты двух точек - левого верхнего угла, правого нижнего угла. Многоугольник (poly). В этом случае задаются координаты каждой точки многоугольника. Круг (circle). В этом случае задается координата центра круга и его радиус.

  • Слайд 36

    Для создания карты ссылок необходимо вставить нужное изображение с помощью дескриптора , затем, при помощи атрибута USEMAP, присвоить ему имя. После этого можно приступить непосредственно к вводу данных при помощи тэга . Дескриптор определяет зоны изображения карты ссылок. Атрибут SHAPE описывает форму зоны карты ссылок. Атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон (прямоугольник, круг, многоугольник). Если при вводе координат произошла ошибка, то браузер воспринимает область пересечения как часть той зоны, которая описана первой. Если же введенные координаты выходят за границы изображения, то они игнорируются браузером. Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.

  • Слайд 37

    Ниже представлена простая карта ссылок (изображения-ссылки) с исходным кодом. Изображение условно разбито на четыре прямоугольных области.

  • Слайд 38

    Задания для самостоятельного выполнения:

    Задание 1: Создать страницу «Виды информации», поместить на страницу Список 1 и оформить уровни списка. Список 1. 1. Рынок информационных услуг. 1.1. Деловая информация. 1.2. Биржевая информация. 1.3. Статистическая информация. 1.4. Коммерческая информация. 2. Информация для специалиста. 2.1: Профессиональная. 2.2. Научно-техническая. 2.3. Доступ к первоисточникам. 3. Потребительская информация. 3.1. Новости и литература. 3.2. Развлекательная. 3.3. Сервисная. • Расписание транспорта. • Заказ товаров и услуг.

  • Слайд 39
  • Слайд 40
  • Слайд 41

    Очень часто для решения необходимой задачи нужно использовать способ вложения таблиц одну в другую. Получается что-то похожее на русскую матрёшку:

  • Слайд 42
Посмотреть все слайды

Сообщить об ошибке