Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Списки в HTML. Таблицы в HTML. (Тема 3, 4)

Содержание

ОпределитеСписокТаблицаЯчейка таблицы
Tema 3. Списки в HTML Tema 4. Таблицы в HTML ОпределитеСписокТаблицаЯчейка таблицы СОДЕРЖАНИЕОрганизация текста используя нумерованные, маркированные списки и списки определенийСмешанные спискиЗаголовок таблицы Определение СПИСКИ В HTMLВ HTML можно определить 3 вида списков:Маркированные / неупорядоченные. Пример: НЕУПОРЯДОЧЕННЫЕ СПИСКИНеупорядоченные списки определяются используя тег (unordered list)Элементы списка определяются используя тег АТРИБУТ «TYPE» ТЕГА Данный атрибут уже не используется в HTML5 –рекомендуется использовать ПРИМЕР ОПРЕДЕЛЕНИЯ НЕУПОРЯДОЧЕННОГО СПИСКАНеупорядоченные списки	Список продуктов необходимых для приготовления эклеров:			Молоко 		Масло 		Яйца		Для крема необходимы следующие продукты: РЕЗУЛЬТАТ УПОРЯДОЧЕННЫЕ (НУМЕРОВАННЫЕ) СПИСКИУпорядоченные списки опредeляются используя тег (ordered list)Элементы списка определяются используя АТРИБУТЫ ТЕГА Тег оl может иметь несколько атрибутовTypeStartReversed – появился в 5-й АТРИБУТ „TYPE”. ПРИМЕРСписок допущенных людей:	 		Иванов 		Васечкин 		Петров	Необходимые предметы:	 		Сумка 		Паспорт 		Шапка	Самые АТРИБУТ „START”Start – указывает, с какого номера, начать упорядочивание спискаОсновная форма: , АТРИБУТ „REVERSED”Атрибут „reversed” используется для упорядочивания элементов списка в убывающем порядкеДанный атрибут АТРИБУТ „COMPACT”Используется для указания, что элементы списка должны иметь размер по меньшеНе СПИСКИ ОПРЕДЕЛЕНИЙСписок определений (в HTML5 – называется списком описаний) определяется тегом Пункты ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ТЕГОВ DL, DT, DD	Слово коса может иметь следующие определения:		 сельскохозяйственный ВЛОЖЕННЫЕ СПИСКИВложенные списки - это списки которые включены в другие списки Каждый ПРИМЕР ВЛОЖЕННОГО СПИСКА	Слово коса может иметь следующeе определениe:		 сельскохозяйственный инструмент		...а так же				хитрая РЕЗУЛЬТАТ ПРИМЕРА ТАБЛИЦЫ В HTMLТаблица состоит из строк и столбцов. На пересечении строки и ПРИМЕР ТАБЛИЦЫ 	 		Фамилия 		Имя		Возраст	 	  		Иванов  		Иван		18 		  		Петров  		Петр		19 АТРИБУТЫ ТЕГА „TABLE”Все атрибуты (кроме „sortable”) не поддерживаются HTML5 - рекомендуется использование стилей. ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «TABLE» 	 		Фамилия 		Имя		Возраст	 	  		Иванов РЕЗУЛЬТАТ ПРИМЕРА ИСПОЛЬЗОВАНИЕ АТРИБУТА „RULES” ИСПОЛЬЗОВАНИЕ АТРИБУТА „WIDTH” АТРИБУТЫ ТЕГА „TR”Тег tr может содержать один или несколько тег-ов или Тег ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TR” РЕЗУЛЬТАТ ПРИМЕРА АТРИБУТЫ ТЕГА „TH”Cамые используемые атрибуты тега th: ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TH” РЕЗУЛЬТАТЫ ПРИМЕРА Личные данныеБез “nowrap” АТРИБУТЫ ТЕГА „TD” ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TD” Средний возраст:  		18.5 РЕЗУЛЬТАТ ПРИМЕРА ВСТРОЕННЫЕ ТАБЛИЦЫВ следующем примере добавляется строка, в которой одна ячейка будет типа РЕЗУЛЬТАТ ПРИМЕРА ОСНОВНЫЕ ЕДИНИЦЫ ИЗМЕРЕНИЯ В HTML1px — один пиксель1em — текущий размер шрифта. В большинстве не-мобильных !!!3 важные понятия про которые узнали сегодня 2 вопроса которые возникли 1
Слайды презентации

Слайд 2 Определите

Список
Таблица
Ячейка таблицы

ОпределитеСписокТаблицаЯчейка таблицы

Слайд 3 СОДЕРЖАНИЕ
Организация текста используя нумерованные, маркированные списки и списки

СОДЕРЖАНИЕОрганизация текста используя нумерованные, маркированные списки и списки определенийСмешанные спискиЗаголовок таблицы

определений
Смешанные списки
Заголовок таблицы
Определение размеров таблицы, границ и ячеек


Цвет фона
Расстояние между элементами таблицы, между таблицей и другими элементами
Встроенные таблицы и др.


Слайд 4 СПИСКИ В HTML
В HTML можно определить 3 вида

СПИСКИ В HTMLВ HTML можно определить 3 вида списков:Маркированные / неупорядоченные.

списков:
Маркированные / неупорядоченные. Пример:
Яблоки
Груши
Сливы
Нумерованные /

упорядоченные. Пример:
Создать файл
Сохранить файла
Открыть файл в браузере
Списки определений. Пример:
Уклонение от уплаты налогов
непредставление налоговой декларации или иных документов
Онлайн
метод обработки данных с помощью устройства непосредственно подключённого к компьютеру

Слайд 5 НЕУПОРЯДОЧЕННЫЕ СПИСКИ
Неупорядоченные списки определяются используя тег (unordered

НЕУПОРЯДОЧЕННЫЕ СПИСКИНеупорядоченные списки определяются используя тег (unordered list)Элементы списка определяются используя

list)
Элементы списка определяются используя тег - обязательный тег

для определения элементов списка
Все браузеры поддерживают эти два тега
Синтаксис:

  • содержимое


  • содержимое



Слайд 6 АТРИБУТ «TYPE» ТЕГА
Данный атрибут уже не

АТРИБУТ «TYPE» ТЕГА Данный атрибут уже не используется в HTML5 –рекомендуется

используется в HTML5 –рекомендуется использовать стили CSS
Атрибут type может

иметь одно из 3-х следующих значений
disc – значение по умолчанию
square
circle


Слайд 7 ПРИМЕР ОПРЕДЕЛЕНИЯ НЕУПОРЯДОЧЕННОГО СПИСКА


Неупорядоченные списки

Список продуктов необходимых

ПРИМЕР ОПРЕДЕЛЕНИЯ НЕУПОРЯДОЧЕННОГО СПИСКАНеупорядоченные списки	Список продуктов необходимых для приготовления эклеров:			Молоко 		Масло 		Яйца		Для крема необходимы следующие продукты:

для приготовления эклеров:

Молоко
Масло
Яйца

Для крема необходимы следующие

продукты:



  • Сахар

  • Молоко

  • Ваниль





Слайд 8 РЕЗУЛЬТАТ

РЕЗУЛЬТАТ

Слайд 9 УПОРЯДОЧЕННЫЕ (НУМЕРОВАННЫЕ) СПИСКИ
Упорядоченные списки опредeляются используя тег

УПОРЯДОЧЕННЫЕ (НУМЕРОВАННЫЕ) СПИСКИУпорядоченные списки опредeляются используя тег (ordered list)Элементы списка определяются

(ordered list)
Элементы списка определяются используя тег - обязательный

тег для определения списка
Список можно упорядочить, пронумеротировав элементы (по умолчанию) или упорядочить их с помощью букв
Все браузеры поддерживают эти два тега
Синтаксис:

  1. содержимое


  2. содержимое



Слайд 10 АТРИБУТЫ ТЕГА
Тег оl может иметь несколько

АТРИБУТЫ ТЕГА Тег оl может иметь несколько атрибутовTypeStartReversed – появился в

атрибутов
Type
Start
Reversed – появился в 5-й версии
Compact – не поддерживается

5-ой версией
Type - этот атрибут может быть использован в 5-ой версии (не в 4.01, но браузеры его всегда поддерживали)
Атрибут type имеет 5 значений, используемые для определения типа упорядочивания
1 (по умолчанию)
A
a
I
i



Слайд 11 АТРИБУТ „TYPE”. ПРИМЕР
Список допущенных людей:

Иванов
Васечкин
Петров

Необходимые

АТРИБУТ „TYPE”. ПРИМЕРСписок допущенных людей:	 		Иванов 		Васечкин 		Петров	Необходимые предметы:	 		Сумка 		Паспорт

предметы:

Сумка
Паспорт
Шапка

Самые востребованные напитки:

Кофе

  • Вода

  • Сок




  • Слайд 12 АТРИБУТ „START”
    Start – указывает, с какого номера, начать

    АТРИБУТ „START”Start – указывает, с какого номера, начать упорядочивание спискаОсновная форма:

    упорядочивание списка
    Основная форма: , где «номер» это числовое

    значение с которого начинается упорядочивание списка
    Пример:

    Список допущенных людей:



    1. Иванов

    2. Васечкин

    3. Петров


    Результат:



    Слайд 13 АТРИБУТ „REVERSED”
    Атрибут „reversed” используется для упорядочивания элементов списка

    АТРИБУТ „REVERSED”Атрибут „reversed” используется для упорядочивания элементов списка в убывающем порядкеДанный

    в убывающем порядке
    Данный атрибут не поддерживается брaузерами IE, Safari
    Пример:
    Список

    допущенных людей:



    1. Иванов

    2. Васечкин

    3. Петров


    Результат:

    Слайд 14 АТРИБУТ „COMPACT”
    Используется для указания, что элементы списка должны

    АТРИБУТ „COMPACT”Используется для указания, что элементы списка должны иметь размер по

    иметь размер по меньше
    Не поддерживается почти ни одним из

    всех популярных браузеров
    Не поддерживается версией HTML5
    При желании, однако, элементы списка могут быть записаны мельче, но используются стили:

    Список допущенных людей:



    1. Иванов

    2. Васечкин

    3. Петров



    Слайд 15 СПИСКИ ОПРЕДЕЛЕНИЙ
    Список определений (в HTML5 – называется списком

    СПИСКИ ОПРЕДЕЛЕНИЙСписок определений (в HTML5 – называется списком описаний) определяется тегом

    описаний) определяется тегом
    Пункты списка определений размечаются тегом , а

    определения этих пунктов -тегом 

    Все эти три теги являются парными и поддерживаются большинством Веб браузерами

    Слайд 16 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ТЕГОВ DL, DT, DD

    Слово коса может

    ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ТЕГОВ DL, DT, DD	Слово коса может иметь следующие определения:

    иметь следующие определения:
    сельскохозяйственный инструмент
    хитрая девичья причёска
    отмель

    реки
    Слово ключ тоже имеет несколько значений:

    гаечный

    источник, родник


    Результат:

    Слайд 17 ВЛОЖЕННЫЕ СПИСКИ
    Вложенные списки - это списки которые включены

    ВЛОЖЕННЫЕ СПИСКИВложенные списки - это списки которые включены в другие списки

    в другие списки
    Каждый элемент списка может быть типа

    «список» или может быть любой HTML элемент
    Создать многоуровневый список достаточно просто.
    Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами 
  •  и 
  • , добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.


    Слайд 18 ПРИМЕР ВЛОЖЕННОГО СПИСКА

    Слово коса может иметь следующeе определениe:

    ПРИМЕР ВЛОЖЕННОГО СПИСКА	Слово коса может иметь следующeе определениe:		 сельскохозяйственный инструмент		...а так

    сельскохозяйственный инструмент
    ...а так же

    хитрая девичья причёска
    отмель реки
    Дополнительную информацию

    смотри
    здесь


    Слово ключ тоже имеет несколько значений:

    обьект используемый при открытии двери

    ...или



    • ключ гаечный

    • источник, родник




    Слайд 19 РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 20 ТАБЛИЦЫ В HTML
    Таблица состоит из строк и столбцов.

    ТАБЛИЦЫ В HTMLТаблица состоит из строк и столбцов. На пересечении строки

    На пересечении строки и столбца получаются ячейки
    Тег -

    используется для определения HTML таблицы. В элементе «table» можно использовать:
    Тег - используется для определения новой строки таблицы
    Тег - используется для определения новой ячейки типа заголовок в таблице. По умолчанию текст в такой ячейке пишется жирным шрифтом и выравнивается по центру ячейки
    Тег - используется для определения новой стандартной ячейки таблицы. По умолчанию, текст в такой ячейке обычный и выравнивается по левой стороне ячейки
    Эти 4-теги являются парными и поддерживаются большинством Веб браузерами

    Слайд 21 ПРИМЕР ТАБЛИЦЫ


    Фамилия
    Имя
    Возраст


    Иванов

    ПРИМЕР ТАБЛИЦЫ 	 		Фамилия 		Имя		Возраст	 	 		Иванов 		Иван		18 		 		Петров 		Петр		19

    Иван
    18


    Петров
    Петр
    19



    Слайд 22 АТРИБУТЫ ТЕГА „TABLE”
    Все атрибуты (кроме „sortable”) не поддерживаются

    АТРИБУТЫ ТЕГА „TABLE”Все атрибуты (кроме „sortable”) не поддерживаются HTML5 - рекомендуется использование стилей.

    HTML5 - рекомендуется использование стилей.


    Слайд 23 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «TABLE»

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «TABLE» 	 		Фамилия 		Имя		Возраст	 	 		Иванов 		Иван		18 		 		Петров 		Петр		19

    cellpadding="10” cellspacing="4">

    Фамилия
    Имя
    Возраст


    Иванов

    Иван
    18


    Петров
    Петр
    19



    Слайд 24 РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 25 ИСПОЛЬЗОВАНИЕ АТРИБУТА „RULES”

    ИСПОЛЬЗОВАНИЕ АТРИБУТА „RULES”

    cellspacing="4">

    Результат:


    Слайд 26 ИСПОЛЬЗОВАНИЕ АТРИБУТА „WIDTH”

    ИСПОЛЬЗОВАНИЕ АТРИБУТА „WIDTH”

    cellspacing="4">

    Результат:


    Слайд 27 АТРИБУТЫ ТЕГА „TR”
    Тег tr может содержать один или

    АТРИБУТЫ ТЕГА „TR”Тег tr может содержать один или несколько тег-ов или

    несколько тег-ов или
    Тег имеет ряд атрибутов,

    которые не поддерживаются версией 5 - рекомендуется использовать стили
    Существуют атрибуты, которые не поддерживаются большинством браузеров: char, charoff


    Слайд 28 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TR”

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TR”

    cellpadding="5" cellspacing="4">

    Фамилия
    Имя
    Возраст

    valign="middle">
    Иванов
    Иван
    18


    Петров
    Петр
    19



    Слайд 29 РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 30 АТРИБУТЫ ТЕГА „TH”
    Cамые используемые атрибуты тега th:

    АТРИБУТЫ ТЕГА „TH”Cамые используемые атрибуты тега th:

    Слайд 31 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TH”

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TH”

    cellpadding="5" cellspacing="4" width="100px">
    Личные данные

    Фамилия

    Имя студента-подростка
    Возраст


    Иванов
    Иван
    18


    Петров
    Петр
    19



    Слайд 32 РЕЗУЛЬТАТЫ ПРИМЕРА
    Личные данные
    Без “nowrap”

    РЕЗУЛЬТАТЫ ПРИМЕРА Личные данныеБез “nowrap”

    Слайд 33 АТРИБУТЫ ТЕГА „TD”

    АТРИБУТЫ ТЕГА „TD”

    Слайд 34 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TD”

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TD” Средний возраст: 		18.5

    border=“1" cellpadding="5" cellspacing="4" width="100px">
    Личные данные

    bgcolor="#aacc22">
    Фамилия
    Имя студента-подростка
    Возраст


    ИвановИван18


    Петров
    Петр
    19


    Средний возраст:
    18.5


    Слайд 35 РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 36 ВСТРОЕННЫЕ ТАБЛИЦЫ
    В следующем примере добавляется строка, в которой

    ВСТРОЕННЫЕ ТАБЛИЦЫВ следующем примере добавляется строка, в которой одна ячейка будет

    одна ячейка будет типа «таблица»




    До 3-х месяцев работы, премия (в леях)
    Больше 3-х месяцев работы, премия (в леях)


    100
    300



    Премии будут на банковской карточке

    Слайд 37 РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 38 ОСНОВНЫЕ ЕДИНИЦЫ ИЗМЕРЕНИЯ В HTML
    1px — один пиксель
    1em — текущий

    ОСНОВНЫЕ ЕДИНИЦЫ ИЗМЕРЕНИЯ В HTML1px — один пиксель1em — текущий размер шрифта. В большинстве

    размер шрифта. В большинстве не-мобильных браузеров шрифт по умолчанию имеет

    размер 16px. Можно брать любые пропорции от текущего шрифта: 2em,0.5em и т.п.
    1% — процент от другого свойства, какого — зависит от того, размер чего ставим. Например, при установке свойства margin-left:1%, процент берётся от ширины родительского блока, т.е. margin-left будет размером в 1% ширины родителя. Лишь при установке font-size процент берётся от текущего размера шрифта. Это отличается от em, который привязан к шрифту всегда.
    Производные единицы измерения: mm, cm, pt и pc:
    Производные от пикселя:
    1mm(мм) = 3.8px
    1cm(см) = 38px
    1pt(пункт) = 4/3 px
    1pc(пика) = 16px
    Такие единицы как сантиметр "cm" и миллиметр "mm" нам всем знакомы, а пункт "pt“ и пика "pc“ пришли из типографии.

    • Имя файла: spiski-v-html-tablitsy-v-html-tema-3-4.pptx
    • Количество просмотров: 109
    • Количество скачиваний: 2