Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Презентации / Презентация по теме урока "Создание сайта на языке HTML"

Презентация по теме урока "Создание сайта на языке HTML"



57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)


  • Информатика
Технология создания Web-страниц Интернет и WWW Язык HTML Выход
World Wide Web и ее место в мировой сети Сеть World Wide Web представляет соб...
Как работает Интернет Схема распределения адресов IP-провайдерами Интернет 19...
Сеть World Wide Web родилась в 1989 году в Женеве, Швейцария. Придумал мирову...
Отсутствие каких-либо централизованных органов управления и контроля. WWW ник...
WWW- основная часть сети Интернет. Web Информационный ресурс Коллекция докуме...
Web-страница – это текстовый файл с управляющими дескрипторами языка HTML Фай...
Домены высшего уровня, доменные суффиксы разных стран. gov– правительственные...
Размещение страниц на Web-узле Последовательное размещение страниц на Web-узл...
Сетевая структура Web-узла
Рекомендации Время загрузки страницы не должно превышать 5 секунд Время загру...
HTML HTML – язык гипертекстовой разметки Web-страниц – является компьютерным...
Основные разделы документа HTML. Обязательные дескрипторы.  - начало страниц...
 Работа с текстом
Выравнивание текста абзаца  Абзац выровнен влево Абзац выровнен по центру Абз...
Нумерованный список Для создания нумерованного списка используется комбинация...
Текст пункта списка должен быть в пределах нескольких строк, иначе список пер...
Некоторые номера списка могут быть пропущены, и текущему пункту, заданному де...
Маркированный список Для создания маркированного списка используется комбинац...
Маркированный список  		Яблоко 		Груша 		Слива 		Вишня 		Черешня 	 • - disk...
Многоуровневый список Многоуровневые списки  	Нумерованный 	 		Пункт 1 		Пунк...
Цвет текста и фона Web-страницы белый – white бирюзовый – teal желтый – yello...
Оглавление
Бегущая строка   BEHAVIOR — способ выполнения эффекта бегущей строки: 	scroll...
LOOP — число показов текста в строке: 	? — целочисленное значение, указывающе...
Бегущая строка  Эффект бегущей строки поддерживается только в обозревателе I...
Специальные символы Вам может понадобиться использовать в тексте Web-страницы...
Вставка рисунка    Web-страница с рисунком       Выравнивание по левой сторон...
Выравнивание рисунка и текста страницы Для выравнивания рисунка относительно...
Текст по середине middle Текст по верхнему краю top Текст выровнен по нижнему...
Оглавление
Гиперссылка гиперссылка  Гиперссылка на другие Web-страницы Гиперссылка на гр...
Моя почта  http:// - важный элемент адреса гиперссылки ( ftp:// ) В то время...
Гиперссылка на графические файлы   Большое изображение Маленькое изображение...
Гиперссылка на звуковые файлы и видео клипы MIDI – музыкальные произведения в...
Цвет гиперссылки    Web-страница с гиперссылкой       Новая гиперссылка Посе...
Оглавление Первая гиперссылка – активная. Вторая – посещенная. Третья - новая.
Разметка Web-страниц с помощью таблиц В коде HTML каждая строка и ячейка табл...
Дескрипторы создания таблицы:  …   … - новая строка  …  - ячейка заголовка  …...
Пример простейшей пустой таблицы
Создание таблицы с различным числом ячеек в строках
Добавление заголовка таблицы Заголовок таблицы можно создать с помощью извест...
Поэтому для создания заголовков лучше использовать дескриптор , который созда...
По умолчанию заголовок выравнивается по центру таблицы. Чтобы изменить выравн...
Заливка ячеек цветом Для установки цвета ячейки таблицы применяется атрибут B...
Использование в таблице фоновых изображений Фоновый рисунок устанавливается в...
Однако! Следует учесть, что разные обозреватели по-разному отображают фоновые...
Разметка макета страницы с помощью таблицы, содержащей фоновые рисунки
Размеры ячеек устанавливаются с помощью атрибутов width и height и две ячейки...
Прорисовка границ таблицы По умолчанию обозреватели не показывают границы вок...
Границы таблицы с помощью атрибута BORDER в дескрипторе  мы устанавливаем пок...
Обратите внимание, что атрибут BORDER изменяет вид только внешней границы вок...
Выборочная прорисовка границ Установив атрибут BORDER, можно либо показать вс...
Выборочная прорисовка границ  ♦	FRAME — устанавливает показ внешних границ та...
Группирование и объединение ячеек таблицы Существует ряд дескрипторов кода HT...
Объединение ячеек Иногда бывает необходимо создать в таблице ячейку, занимающ...
Группирование столбцов Для группирования столбцов используются следующие деск...
Группирование строк Для группирования строк используются следующие дескриптор...
Группирование столбцов для форматирования таблицы
Создание вложенных таблиц Применение таблицы для разметки документов совершен...
Выравнивание вложенной таблицы в ячейке определяется значением атрибута align...
Выравнивание таблиц в тексте документа Выравнивание таблицы в тексте документ...
Выравнивание рисунка в ячейке таблицы
1 из 66

Описание презентации по отдельным слайдам:

№ слайда 1 Технология создания Web-страниц Интернет и WWW Язык HTML Выход
Описание слайда:

Технология создания Web-страниц Интернет и WWW Язык HTML Выход

№ слайда 2 World Wide Web и ее место в мировой сети Сеть World Wide Web представляет соб
Описание слайда:

World Wide Web и ее место в мировой сети Сеть World Wide Web представляет собой глобальный мировой ресурс информации, доступ к которому открыт для всех пользователей Интернет Приложения Microsoft Office позволяют сохранять текстовые документы, электронные таблицы, реляционные БД, презентации в формате Web-страницы Гораздо больше возможностей представляют редакторы Web-страницы Microsoft FrontPage Macromedia Dreamweaver

№ слайда 3 Как работает Интернет Схема распределения адресов IP-провайдерами Интернет 19
Описание слайда:

Как работает Интернет Схема распределения адресов IP-провайдерами Интернет 193.124.255.118 Пользователи Интернет 193.124.93.255 193.124.255.117 193.124.94.17 193.124.255.0-193.124.255.255 193.125.93.0-193.125.94.255 Серверы локальных сетей 193.124.0.0-193.125.255.255 Провайдеры Интернет

№ слайда 4 Сеть World Wide Web родилась в 1989 году в Женеве, Швейцария. Придумал мирову
Описание слайда:

Сеть World Wide Web родилась в 1989 году в Женеве, Швейцария. Придумал мировую паутину Тим Бернерс-Ли (Tim Berners-Lee), сотрудник сервисного компьютерного центра Европейского центра ядерных исследований (CERN). Он работал над созданием системы, позволяющей научным центрам в разных частях мира совместно работать над научными проектами и создавать гиперссылки на документы, хранящиеся на разных компьютерах. Enquire – система маркирования гипертекста, созданная еще в 1980 – ранний прототип будущего языка HTML Еще более ранний предшественник – GML (Generalized Markup Language) – язык обобщенной разметки. Разработан Чарльзом Гольдфардом в 1969 г В 1986 г этому языку, переименованному в SGML, был присвоен статус международного стандарта World Wide Web и ее место в мировой сети

№ слайда 5 Отсутствие каких-либо централизованных органов управления и контроля. WWW ник
Описание слайда:

Отсутствие каких-либо централизованных органов управления и контроля. WWW никому не принадлежит. Универсальность, стандартность и аппаратная независимость протоколов обмена данными HTTP (Hypertext Transfer Protokol) – протокол передачи гипертекстовых файлов. Используется для передачи HTML-файлов по сети Web-страниц URL (Universal Resource Locator) – Унифицированный указатель информационного ресурса. HTML (HyperText Markup Language) – стандартный язык для создания Web-страниц Динамическое согласование форматов документов Базовые принципы работы WWW

№ слайда 6 WWW- основная часть сети Интернет. Web Информационный ресурс Коллекция докуме
Описание слайда:

WWW- основная часть сети Интернет. Web Информационный ресурс Коллекция документов и программ для их просмотра Soft Internet Средство передачи данных по сети Система компьютеров, объединенных в сеть с помощью кабелей, опоясавших весь мир Hard

№ слайда 7 Web-страница – это текстовый файл с управляющими дескрипторами языка HTML Фай
Описание слайда:

Web-страница – это текстовый файл с управляющими дескрипторами языка HTML Файлы Web-станиц содержатся на Web-серверах Для из просмотра используются программы-обозреватели: Microsoft Internet Explorer, Netscape Navigator Web-сервером может быть любой компьютер, подключенный к Internet, на который установлено специальное ПО, например, Apache или IIS

№ слайда 8 Домены высшего уровня, доменные суффиксы разных стран. gov– правительственные
Описание слайда:

Домены высшего уровня, доменные суффиксы разных стран. gov– правительственные организации mil- военные организации com- коммерческие организации net- организации, предоставляющие сетевые услуги Edu – образовательные организации ru,su- Россия nl- Голландия jp- Япония uk- Великобритания no- Норвегия Au- Австралия Ca- Канада Fr- Франция Us- США Hu-Венгрия Fi-Финляндия Ua- Украина HTTP://www.домен_органицации.суффикс/путь/имя файла

№ слайда 9 Размещение страниц на Web-узле Последовательное размещение страниц на Web-узл
Описание слайда:

Размещение страниц на Web-узле Последовательное размещение страниц на Web-узле Таблица Web-страниц

№ слайда 10 Сетевая структура Web-узла
Описание слайда:

Сетевая структура Web-узла

№ слайда 11 Рекомендации Время загрузки страницы не должно превышать 5 секунд Время загру
Описание слайда:

Рекомендации Время загрузки страницы не должно превышать 5 секунд Время загрузки зависит от размера страницы и от скорости подключения компьютера пользователя: аналоговый модем за 5 сек – 20 Кбайт, кабельный модем или ISDN – за 5 сек – 60-80 Кбайт Чем важнее страница и чем чаще она должна появляться, тем быстрее она должна загружаться.

№ слайда 12 HTML HTML – язык гипертекстовой разметки Web-страниц – является компьютерным
Описание слайда:

HTML HTML – язык гипертекстовой разметки Web-страниц – является компьютерным языком программирования для разработки Web-страниц HTML – коллекция управляющих символов -дескрипторов для добавления, форматирования и позиционирования элементов Web-страницы. Обязательные дескрипторы Работа с текстом Графика на Web-страницах Гиперссылка

№ слайда 13 Основные разделы документа HTML. Обязательные дескрипторы.  - начало страниц
Описание слайда:

Основные разделы документа HTML. Обязательные дескрипторы. <HTML> - начало страницы <HEAD> -оформление заголовка страницы <META name=‘…’,> заголовок, автор <TITLE>…</TITLE> </HEAD> <BODY> - текст и основная часть страницы </BODY> </HTML> Оглавление

№ слайда 14  Работа с текстом
Описание слайда:

Работа с текстом <FONT SIZE = ‘1-7’ – установка размера шрифта <H1-6> ваш заголовок </H1-6> <P> ваш текст </P> - создание абзаца ALIGN=“left” – выравнивание текста по левой стороне ALIGN=“right” – выравнивание текста по правой стороне ALIGN=“center” – выравнивание теста по центру ALIGN=“justify” - выравнивание теста по ширине <nobr> …<nobr> - не позволяет разрывать текст на строке <BR> - прерывание текста, перенос на следующую строку <B> ..</B> - жирный <I> ..</I> - курсив <U> ..</U> - подчеркивание <strike> ..</strike> - перечеркивание Далее Назад

№ слайда 15 Выравнивание текста абзаца  Абзац выровнен влево Абзац выровнен по центру Абз
Описание слайда:

Выравнивание текста абзаца <B0DY> <Р ALIGN="left" >Абзац выровнен влево</Р> <Р ALIGN="center" >Абзац выровнен по центру</Р> <Р ALIGN="right" >Абзац выровнен вправо</Р> <Р ALIGN="justify" >Абзац выровнен по ширине</Р> <P><N0BR>Этотoт текст всегда должен оставаться в одной строке</NOBR></P> </BODY>

№ слайда 16
Описание слайда:

№ слайда 17 Нумерованный список Для создания нумерованного списка используется комбинация
Описание слайда:

Нумерованный список Для создания нумерованного списка используется комбинация двух пар дескрипторов. <OL>...</OL> устанавливают начало и конец нумерованного списка, <LI>...</LI> отмечают отдельные пункты списка. <Н2>Типы списков</Н2> <OL> < LI >Нумерованный< /LI > < LI >Маркированный</ LI > < LI >Многоуровневый</ LI > </OL>

№ слайда 18 Текст пункта списка должен быть в пределах нескольких строк, иначе список пер
Описание слайда:

Текст пункта списка должен быть в пределах нескольких строк, иначе список перестает восприниматься как одно целое и теряется смысл его применения. По умолчанию пункты списка нумеруются последовательно цифрами 1, 2, 3 и т.д. Чтобы изменить способ нумерации пунктов списка, воспользуйтесь атрибутами TYPE, START и VALUE. Тип нумерованного списка устанавливается с помощью атрибута type дескриптора <OL>. Значения атрибута TYPE Значение атрибута type Тип нумерации пунктов списка “1” 1,2,3,4 “i” i,ii,iii,iv “I” I,II,III,IV “A” A,B,C,D “a” a,b,c,d

№ слайда 19 Некоторые номера списка могут быть пропущены, и текущему пункту, заданному де
Описание слайда:

Некоторые номера списка могут быть пропущены, и текущему пункту, заданному дескриптором <LI>, присваивается номер с помощью атрибута VALUE. Все следующие пункты списка будут нумероваться последова-тельно, начиная с номера, заданного в атрибуте VALUE. <Н2>Управление нумерацией пунктов списка</Н2> <OL START='3'> <LI>Haчнем список с пункта 3</LI> <LI>Cлeдующий пункт cпискa</LI> <LI VALUE='7'>Продолжим список с пункта 7</LI> <LI>Следующий пункт cпискa</LI> </OL> Установка номера пунктов списка с помощью атрибута START в дескрипторе <OL>

№ слайда 20 Маркированный список Для создания маркированного списка используется комбинац
Описание слайда:

Маркированный список Для создания маркированного списка используется комбинация двух пар дескрипторов. <UL>...</UL> устанавливают начало и конец маркированного списка, <LI>...</LI> отмечают отдельные пункты списка. С помощью атрибута TYPE можно изменить тип маркера. Установка атрибута TYPE в дескрипторе <UL> применяет тип маркера ко всем пунктам списка. Данный атрибут в дескрипторе <LI> изменяет маркер текущего пункта, сохраняя прежними маркеры остальных пунктов списка

№ слайда 21 Маркированный список  		Яблоко 		Груша 		Слива 		Вишня 		Черешня 	 • - disk
Описание слайда:

<Н2> Маркированный список</Н2> <UL TYPE='circle'> <LI>Яблоко</LI> <LI TYPE='disc'>Груша</LI> <LI>Слива</LI> <LI TYPE='square'>Вишня</LI> <LI>Черешня</LI> </UL> • - disk ○ - circle ■ - square Значение атрибута TYPE в маркированном списке

№ слайда 22 Многоуровневый список Многоуровневые списки  	Нумерованный 	 		Пункт 1 		Пунк
Описание слайда:

Многоуровневый список <H2>Многоуровневые списки</Н2> <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 >Смешанный</LI > <OL type="a"> <LI >Пункт a</LI> <LI >Пункт b</LI> <LI >Пункт c</LI> </OL> </OL> Многоуровневый список – сочетание дескрипторов <OL> и <UL> в нужных вариантах

№ слайда 23
Описание слайда:

№ слайда 24 Цвет текста и фона Web-страницы белый – white бирюзовый – teal желтый – yello
Описание слайда:

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

№ слайда 25 Оглавление
Описание слайда:

Оглавление

№ слайда 26 Бегущая строка   BEHAVIOR — способ выполнения эффекта бегущей строки: 	scroll
Описание слайда:

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

№ слайда 27 LOOP — число показов текста в строке: 	? — целочисленное значение, указывающе
Описание слайда:

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

№ слайда 28 Бегущая строка  Эффект бегущей строки поддерживается только в обозревателе I
Описание слайда:

<MARQUEE BEHAVIOR=alternate BGCOLOR='teal'> Бегущая строка </MARQUEE> Эффект бегущей строки поддерживается только в обозревателе Internet Explorer. В других обозревателях текст будет отображаться как обычная строка. Текст, заключенный между дескрипторами <marquee>..</MARQUEE> можно форматировать так же, как обычный текст Web-страницы.

№ слайда 29 Специальные символы Вам может понадобиться использовать в тексте Web-страницы
Описание слайда:

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

№ слайда 30 Вставка рисунка    Web-страница с рисунком       Выравнивание по левой сторон
Описание слайда:

Вставка рисунка <HTML> <HEAD> <TITLE> Web-страница с рисунком </TITLE> </HEAD> <BODY> <img SRC=‘C:Мои рисунки\Мой файл.jpg ‘ ALIGN=‘right’></img> </BODY> </HTML> Выравнивание по левой стороне Ссылка на файл

№ слайда 31 Выравнивание рисунка и текста страницы Для выравнивания рисунка относительно
Описание слайда:

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

№ слайда 32 Текст по середине middle Текст по верхнему краю top Текст выровнен по нижнему
Описание слайда:

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

№ слайда 33 Оглавление
Описание слайда:

Оглавление

№ слайда 34 Гиперссылка гиперссылка  Гиперссылка на другие Web-страницы Гиперссылка на гр
Описание слайда:

Гиперссылка <A HREF=‘адрес’>гиперссылка </A> Гиперссылка на другие Web-страницы Гиперссылка на графические файлы Гиперссылка на звуковые файлы видеоклипы Цвет гиперссылки Далее Назад

№ слайда 35 Моя почта  http:// - важный элемент адреса гиперссылки ( ftp:// ) В то время
Описание слайда:

<A HREF=‘http://www.mail.ru/’> Моя почта </A> http:// - важный элемент адреса гиперссылки ( ftp:// ) В то время как www можно опустить: <A HREF=‘http://mail.ru/’> Моя почта </A> Назад Гиперссылка на другие Web-страницы

№ слайда 36 Гиперссылка на графические файлы   Большое изображение Маленькое изображение
Описание слайда:

Гиперссылка на графические файлы <A HREF=‘images/photo. jpg’> <IMG SRC=‘images/photo_copy.gif’> Большое изображение Маленькое изображение (от 72 до 150 пикселей/дюйм) Щелкните здесь, для просмотра изображения </A> Назад

№ слайда 37 Гиперссылка на звуковые файлы и видео клипы MIDI – музыкальные произведения в
Описание слайда:

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

№ слайда 38 Цвет гиперссылки    Web-страница с гиперссылкой       Новая гиперссылка Посе
Описание слайда:

Цвет гиперссылки <HTML> <HEAD> <TITLE> Web-страница с гиперссылкой </TITLE> </HEAD> <BODY> <body link=‘white’ alink=‘green’ vlink=‘yellow’> </BODY> </HTML> Новая гиперссылка Посещенная гиперссылка Активная гиперссылка Назад

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

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

№ слайда 40 Разметка Web-страниц с помощью таблиц В коде HTML каждая строка и ячейка табл
Описание слайда:

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

№ слайда 41 Дескрипторы создания таблицы:  …   … - новая строка  …  - ячейка заголовка  …
Описание слайда:

Дескрипторы создания таблицы: <Table> … </Table> <TR> …</TR> - новая строка <TH> … </TH> - ячейка заголовка <TD> … </TD> - обычная ячейка По умолчанию текст в ячейках заголовка показан полужирным шрифтом с выравниванием по центру Текст в обычных ячейках не выделяется и выравнивается по левому краю

№ слайда 42 Пример простейшей пустой таблицы
Описание слайда:

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

№ слайда 43 Создание таблицы с различным числом ячеек в строках
Описание слайда:

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

№ слайда 44 Добавление заголовка таблицы Заголовок таблицы можно создать с помощью извест
Описание слайда:

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

№ слайда 45 Поэтому для создания заголовков лучше использовать дескриптор , который созда
Описание слайда:

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

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

По умолчанию заголовок выравнивается по центру таблицы. Чтобы изменить выравнивание влево или вправо, присвойте атрибуту ALIGN в дескрипторе <CAPTION> значение left или right. Атрибуту ALIGN также можно присвоить значение bottom. В этом случае заголовок появится под таблицей. В принципе в таблице допускается создание нескольких заголовков, но лучше этого не делать. Так, в обозревателе Netscape Navigator дескриптор <caption> может произвольно изменить порядок заголовков.

№ слайда 47 Заливка ячеек цветом Для установки цвета ячейки таблицы применяется атрибут B
Описание слайда:

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

№ слайда 48 Использование в таблице фоновых изображений Фоновый рисунок устанавливается в
Описание слайда:

Использование в таблице фоновых изображений Фоновый рисунок устанавливается в атрибуте BACKGROUND. Этот атрибут можно установить как для всей таблицы в дескрипторе <TABLE>, так и для отдельной ячейки в дескрипторах <td> и <тн>. Соответственно, если в первом случае рисунок будет помещен в фоне всей таблицы, то во втором случае — только в фоне данной ячейки. Если разные фоновые рисунки были назначены таблице и ячейке, то фоновый рисунок ячейки появится поверх рисунка таблицы. Требования к фоновым рисункам таблицы такие же, как и к фону Web-страницы, — фон не должен мешать чтению текста и восприятию информации.

№ слайда 49 Однако! Следует учесть, что разные обозреватели по-разному отображают фоновые
Описание слайда:

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

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

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

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

Размеры ячеек устанавливаются с помощью атрибутов width и height и две ячейки в первом столбце объединяются с помощью атрибута ROWSPAN. Обратите внимание на следующий важный момент: в дескрипторе <table> атрибутам border, cellpadding и CELLSPACING присвоено значение 0. Благодаря этому не видны границы между фоновыми рисунками в ячейках и выравнивание текста заголовка в верхней панели совпадает с выравниванием фонового рисунка.

№ слайда 52 Прорисовка границ таблицы По умолчанию обозреватели не показывают границы вок
Описание слайда:

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

№ слайда 53 Границы таблицы с помощью атрибута BORDER в дескрипторе  мы устанавливаем пок
Описание слайда:

Границы таблицы с помощью атрибута BORDER в дескрипторе <TABLE> мы устанавливаем показ границ таблицы. Данному атрибуту присваивается значение ширины внешней границы таблицы в пикселях.

№ слайда 54 Обратите внимание, что атрибут BORDER изменяет вид только внешней границы вок
Описание слайда:

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

№ слайда 55 Выборочная прорисовка границ Установив атрибут BORDER, можно либо показать вс
Описание слайда:

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

№ слайда 56
Описание слайда:

№ слайда 57 Выборочная прорисовка границ  ♦	FRAME — устанавливает показ внешних границ та
Описание слайда:

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

№ слайда 58 Группирование и объединение ячеек таблицы Существует ряд дескрипторов кода HT
Описание слайда:

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

№ слайда 59 Объединение ячеек Иногда бывает необходимо создать в таблице ячейку, занимающ
Описание слайда:

Объединение ячеек Иногда бывает необходимо создать в таблице ячейку, занимающую несколько столбцов или строк. Это особенно важно при выполнении разметки макета страницы с помощью таблицы. Для объединения ячеек в дескрипторах <TD> и <ТН> устанавливаются следующие параметры: COLSPAN - число столбцов, занятых ячейкой; ROWSPAN — число строк, занятых ячейкой.

№ слайда 60 Группирование столбцов Для группирования столбцов используются следующие деск
Описание слайда:

Группирование столбцов Для группирования столбцов используются следующие дескрипторы: ♦ < COLGROUP > - структурная группа столбцов, применяется для раз­бивки таблицы на столбцы разных типов, например: столбец заголовков и столбцы данных; ♦ <COL> — неструктурная группа столбцов, применяется для произвольного группирования столбцов таблицы, имеющих общий формат данных. Дескрипторы <C0LGROUP> И <COL> содержат набор атрибутов форматирования ячеек. Так, установка атрибута BGCOLOR в дескрипторе группы столбцов изменит цвет фона во всех ячейках, относящихся к группе.

№ слайда 61 Группирование строк Для группирования строк используются следующие дескриптор
Описание слайда:

Группирование строк Для группирования строк используются следующие дескрипторы: ♦ <THEAD> — создает группу строк заголовков, этот дескриптор мож­но использовать в коде таблицы только один раз; <TBODY> — используется для создания одной или нескольких групп строк; ♦ <TFOOT> — создает группу строк нижнего колонтитула таблицы, этот дескриптор можно использовать в коде таблицы только один раз. Все дескрипторы группирования строк являются парными.

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

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

№ слайда 63 Создание вложенных таблиц Применение таблицы для разметки документов совершен
Описание слайда:

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

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

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

№ слайда 65 Выравнивание таблиц в тексте документа Выравнивание таблицы в тексте документ
Описание слайда:

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

№ слайда 66 Выравнивание рисунка в ячейке таблицы
Описание слайда:

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



57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)


Автор
Дата добавления 08.09.2016
Раздел Информатика
Подраздел Презентации
Просмотров25
Номер материала ДБ-180811
Получить свидетельство о публикации
Похожие материалы

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