Технология создания Web-страниц

Содержание

1. Технология создания Web-страниц
2. World Wide Web и ее место
3. Как работает Интернет Схема распределения адресов
4. Сеть World Wide Web родилась в 1989
5. Отсутствие каких-либо централизованных органов управления и контроля.
6. WWW- основная часть сети Интернет.WebИнформационный ресурсКоллекция документов
7. Web-страница – это текстовый файл с управляющими
8. Домены высшего уровня, доменные суффиксы разных стран.gov–
9. Размещение страниц на Web-узлеПоследовательное размещение страниц на Web-узлеТаблица Web-страниц
10. Сетевая структура Web-узла
11. РекомендацииВремя загрузки страницы не должно превышать 5
12. HTMLHTML – язык гипертекстовой разметки Web-страниц
13. Основные разделы документа HTML. Обязательные дескрипторы.
14. Работа с текстом
15. Выравнивание текста абзаца Абзац
16. Слайд 16
17. Нумерованный списокДля создания нумерованного спискаиспользуется комбинация двух
18. Текст пункта списка должен быть в пределах
19. Некоторые номера списка могут быть пропущены, и
20. Маркированный списокДля создания маркированного спискаиспользуется комбинация двух
21. Маркированный список Яблоко Груша Слива Вишня Черешня • -
22. Многоуровневый списокМногоуровневые списки Нумерованный Пункт 1 Пункт 2 Пункт
23. Слайд 23
24. Цвет текста и фона Web-страницыбелый – whiteбирюзовый
25. Оглавление
26. Бегущая строка BEHAVIOR — способ выполнения эффекта
27. LOOP — число показов текста в строке: ?
28. Бегущая строкаЭффект бегущей строки поддерживается только
29. Специальные символыВам может понадобиться использовать в тексте
30. Вставка рисунка Web-страница с рисунком Выравнивание по левой сторонеСсылка на файл
31. Выравнивание рисунка и текста страницыДля выравнивания рисунка
32. Текст по серединеmiddleТекст по верхнему краю topТекст выровнен по нижнему краюbottomВыравнивание рисунка и текста страницы
33. Оглавление
34. Гиперссылкагиперссылка Гиперссылка на другие Гиперссылка на другие
35. Моя почта http:// - важный элемент
36. Гиперссылка на графические файлы Большое изображение
37. Гиперссылка на звуковые файлы и видео клипыMIDI
38. Цвет гиперссылки Web-страница с гиперссылкой Новая гиперссылкаПосещенная гиперссылкаАктивная гиперссылкаНазад
39. ОглавлениеПервая гиперссылка – активная.Вторая – посещенная.Третья - новая.
40. Разметка Web-страниц с помощью таблицВ коде
41. Дескрипторы создания таблицы: … …
42. Пример простейшей пустой таблицы
43. Создание таблицы с различным числом ячеек в строках
44. Добавление заголовка таблицыЗаголовок таблицы можно создать с
45. Поэтому для создания заголовков лучше использовать дескриптор , который создает заголовок непосредственно в таблице.
46. По умолчанию заголовок выравнивается по центру таблицы.
47. Заливка ячеек цветом Для установки цвета ячейки
48. Использование в таблице фоновых изображенийФоновый рисунок устанавливается
49. Однако!Следует учесть, что разные обозреватели по-разному отображают
50. Разметка макета страницы с помощью таблицы, содержащей фоновые рисунки
51. Размеры ячеек устанавливаются с помощью атрибутов width
52. Прорисовка границ таблицыПо умолчанию обозреватели не показывают
53. Границы таблицыс помощью атрибута BORDER в дескрипторе
54. Обратите внимание, что атрибут BORDER изменяет вид
55. Выборочная прорисовка границ Установив атрибут BORDER, можно
56. Слайд 56
57. Выборочная прорисовка границ ♦ FRAME — устанавливает
58. Группирование и объединение ячеек таблицыСуществует ряд дескрипторов
59. Объединение ячеекИногда бывает необходимо создать в таблице
60. Группирование столбцовДля группирования столбцов используются следующие дескрипторы:♦
61. Группирование строкДля группирования строк используются следующие дескрипторы:♦
62. Группирование столбцов для форматирования таблицы
63. Создание вложенных таблицПрименение таблицы для разметки документов
64. Выравнивание вложенной таблицы в ячейке определяется значением атрибута align в дескрипторе .
65. Выравнивание таблиц в тексте документаВыравнивание таблицы в
66. Выравнивание рисунка в ячейке таблицы
67. Скачать презентанцию

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

Главная
Информатика
Технология создания Web-страниц

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

Слайд 1Технология создания Web-страниц

Интернет и WWW

Язык HTML

Выход

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

Слайд 2World Wide Web и ее место в мировой сети
Сеть World

Wide Web представляет собой глобальный мировой ресурс информации, доступ к

которому открыт для всех пользователей Интернет

Приложения Microsoft Office позволяют сохранять текстовые документы, электронные таблицы, реляционные БД, презентации в формате Web-страницы

Гораздо больше возможностей представляют редакторы Web-страницы Microsoft FrontPage Macromedia Dreamweaver

World Wide Web и ее место в мировой сетиСеть World Wide Web представляет собой глобальный мировой

Слайд 3Как работает Интернет Схема распределения адресов 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

Провайдеры Интернет

Как работает Интернет Схема распределения адресов IP-провайдерами Интернет 193.124.255.118Пользователи Интернет193.124.93.255193.124.255.117193.124.94.17193.124.255.0-193.124.255.255193.125.93.0-193.125.94.255Серверы локальных сетей193.124.0.0-193.125.255.255

Слайд 4Сеть World Wide Web родилась в 1989 году в Женеве,

Швейцария. Придумал мировую паутину Тим Бернерс-Ли (Tim Berners-Lee), сотрудник сервисного

компьютерного центра Европейского центра ядерных исследований (CERN). Он работал над созданием системы, позволяющей научным центрам в разных частях мира совместно работать над научными проектами и создавать гиперссылки на документы, хранящиеся на разных компьютерах.
Enquire – система маркирования гипертекста, созданная еще в 1980 – ранний прототип будущего языка HTML
Еще более ранний предшественник – GML (Generalized Markup Language) – язык обобщенной разметки. Разработан Чарльзом Гольдфардом в 1969 г
В 1986 г этому языку, переименованному в SGML, был присвоен статус международного стандарта

World Wide Web и ее место в мировой сети

Сеть World Wide Web родилась в 1989 году в Женеве, Швейцария. Придумал мировую паутину Тим Бернерс-Ли (Tim

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

принадлежит.
Универсальность, стандартность и аппаратная независимость протоколов обмена данными
HTTP (Hypertext Transfer

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

Базовые принципы работы WWW

Отсутствие каких-либо централизованных органов управления и контроля. WWW никому не принадлежит.Универсальность, стандартность и аппаратная независимость протоколов обмена

Слайд 6WWW- основная часть сети Интернет.

Web
Информационный ресурс

Коллекция документов и программ для

их просмотра

Soft
Internet
Средство передачи данных по сети
Система компьютеров, объединенных в сеть

с помощью кабелей, опоясавших весь мир

Hard

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

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

Web-станиц содержатся на Web-серверах
Для из просмотра используются программы-обозреватели: Microsoft Internet

Explorer, Netscape Navigator
Web-сервером может быть любой компьютер, подключенный к Internet, на который установлено специальное ПО, например, Apache или IIS

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

Слайд 8Домены высшего уровня, доменные суффиксы разных стран.
gov– правительственные организации
mil- военные организации
com-

коммерческие организации
net- организации, предоставляющие сетевые услуги
Edu – образовательные организации

ru,su- Россия
nl-

Голландия
jp- Япония
uk- Великобритания
no- Норвегия
Au- Австралия
Ca- Канада
Fr- Франция
Us- США
Hu-Венгрия
Fi-Финляндия
Ua- Украина

HTTP://www.домен_органицации.суффикс/путь/имя файла

Домены высшего уровня, доменные суффиксы разных стран.gov– правительственные организацииmil- военные организацииcom- коммерческие организацииnet- организации, предоставляющие сетевые услугиEdu

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

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

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

от размера страницы и от скорости подключения компьютера пользователя:
аналоговый

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

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

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

языком программирования для разработки Web-страниц
HTML – коллекция управляющих символов -дескрипторов

для добавления, форматирования и позиционирования элементов Web-страницы.

Обязательные дескрипторы
Работа с текстом
Графика на Графика на Web-Графика на Web-страницах
Гиперссылка

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

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

-оформление заголовка страницы
заголовок,

автор
…

- текст и основная часть страницы

Оглавление

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

Слайд 14 Работа с текстом

шрифта
ваш заголовок
ваш текст - создание абзаца
ALIGN=“left”

– выравнивание текста по левой стороне
ALIGN=“right” – выравнивание текста по правой стороне
ALIGN=“center” – выравнивание теста по центру
ALIGN=“justify” - выравнивание теста по ширине
… - не позволяет разрывать текст на строке

- прерывание текста, перенос на следующую строку

.. - жирный
.. - курсив
.. - подчеркивание
.. - перечеркивание

Слайд 15Выравнивание текста абзаца

Абзац выровнен влево

Абзац выровнен по центру

<Р ALIGN="right" >Абзац выровнен вправо
<Р ALIGN="justify" >Абзац выровнен по ширине

Этотoт текст всегда должен оставаться в одной строке

Выравнивание текста абзаца Абзац выровнен влево Абзац выровнен по центру Абзац выровнен

Слайд 16

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

и конец

нумерованного списка,

...

отмечают отдельные пункты списка.

<Н2>Типы списков

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

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

список перестает восприниматься как одно целое и теряется смысл его

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

Текст пункта списка должен быть в пределах нескольких строк, иначе список перестает восприниматься как одно целое и

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

дескриптором , присваивается номер с помощью атрибута VALUE.
Все следующие пункты

списка будут нумероваться последова-тельно, начиная с номера, заданного в атрибуте VALUE.

<Н2>Управление нумерацией пунктов списка

Haчнем список с пункта 3

Cлeдующий пункт cпискa

Продолжим список с пункта 7

Следующий пункт cпискa

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

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

Слайд 20Маркированный список
Для создания маркированного списка
используется комбинация двух пар
дескрипторов.
... устанавливают начало

и конец

маркированного списка,

...

отмечают отдельные пункты списка.

С помощью атрибута TYPE можно изменить тип маркера. Установка атрибута TYPE в дескрипторе

изменяет маркер текущего пункта, сохраняя прежними маркеры остальных пунктов списка

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

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

• - disk
○ -

circle
■ - square
Значение атрибута TYPE в маркированном списке

Маркированный список Яблоко Груша Слива Вишня Черешня • - disk○ - circle■ - squareЗначение атрибута TYPE в маркированном

Слайд 22Многоуровневый список
Многоуровневые списки

Нумерованный

Пункт 1
Пункт

2
Пункт 3

< LI >Маркированный

>Первый вариант

Второй вариант

Третий вариант

< LI >Смешанный

Пункт a

Пункт b

Пункт c

Многоуровневый список – сочетание дескрипторов

Многоуровневый списокМногоуровневые списки Нумерованный Пункт 1 Пункт 2 Пункт 3 < LI >Маркированный Первый вариант Второй вариант Третий вариант < LI

Слайд 23

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

yellow
зеленый – green
золотой – gold
красно-коричневый – maroon
красный – red
лимонный –

lime
морской волны – aqua

фуксиновый – fuchsia
черный – black
пурпурный –purple
серебряный – silver
серый- gray
синий – blue
темно-голубой - navy
оливковый – olive

- цвет шрифта
- цвет фона страницы

Цвет текста и фона Web-страницыбелый – whiteбирюзовый – tealжелтый – yellowзеленый – greenзолотой – goldкрасно-коричневый – maroonкрасный

Слайд 25Оглавление

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

— текст исчезает за краем Web-страницы;
slide — после выполнения заданного

числа циклов, текст остается у левого или правого поля Web-страницы;
alternate — направление перемещения текста в строке меняется на противоположное после выполнения каждого цикла.
BGCOLOR — цвет фона бегущей строки
Direction— направление перемещения текста:
left — влево;
right — вправо.
HEIGHT — высота бегущей строки.
hspace — отступ в пикселях текста бегущей строки от левого и правого полей Web-страницы.

Бегущая строка — это анимационный эффект, при котором строка текста перемещается по странице один (несколько ) раз, или постоянно. Атрибуты этого дескриптора определяют параметры перемещения текста.

Бегущая строка BEHAVIOR — способ выполнения эффекта бегущей строки: scroll — текст исчезает за краем Web-страницы; slide — после

Слайд 27LOOP — число показов текста в строке:
? — целочисленное значение,

указывающее число повторов;
infinite — бесконечное повторение эффекта по циклу.
SCROLLAMOUNT —

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

LOOP — число показов текста в строке: ? — целочисленное значение, указывающее число повторов; infinite — бесконечное повторение эффекта

Слайд 28
Бегущая строка

Эффект бегущей строки поддерживается только в

обозревателе Internet Explorer. В других обозревателях текст будет отображаться как

обычная строка.

Текст, заключенный между дескрипторами .. можно форматировать так же, как обычный текст Web-страницы.

Бегущая строкаЭффект бегущей строки поддерживается только в обозревателе Internet Explorer. В других обозревателях текст будет

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

зарезервированы в качестве служебных в языке HTML,

например <, > и &, или символы, которые не могут быть введены непосредственно с клавиатуры.

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

&#код ASCII

< меньше

> больше

Специальные символыВам может понадобиться использовать в тексте Web-страницы символы, которые зарезервированы в качестве служебных в языке HTML,

Слайд 30Вставка рисунка

Web-страница с рисунком

ALIGN=‘right’>

Выравнивание по левой

стороне

Ссылка на файл

Слайд 31Выравнивание рисунка и текста страницы
Для выравнивания рисунка относительно текста документа

атрибуту ALIGN присваивается следующие значения:
LEFT – рисунок выравнивается по левому

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

Выравнивание рисунка и текста страницыДля выравнивания рисунка относительно текста документа атрибуту ALIGN присваивается следующие значения:LEFT – рисунок

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

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

Слайд 33Оглавление

Слайд 34Гиперссылка
гиперссылка

Гиперссылка на другие Гиперссылка на другие Web-Гиперссылка на

другие Web-страницы
Гиперссылка на графические файлы
Гиперссылка на звуковые файлы видеоклипы
Цвет гиперссылки

Далее

Назад

Гиперссылкагиперссылка Гиперссылка на другие Гиперссылка на другие Web-Гиперссылка на другие Web-страницыГиперссылка на графические файлыГиперссылка на звуковые файлы

Слайд 35 Моя почта

http:// - важный элемент адреса гиперссылки

( ftp:// )
В то время как www можно опустить:

Моя почта

Гиперссылка на другие Web-страницы

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

Большое изображение

Маленькое изображение
(от 72 до 150 пикселей/дюйм)

Щелкните здесь, для просмотра изображения

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

в файлах с расширением .mid
MP3 – музыка, звуковые сообщения в

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

Например:

Гиперссылка на звуковые файлы и видео клипыMIDI – музыкальные произведения в файлах с расширением .midMP3 – музыка,

Слайд 38 Цвет гиперссылки

Web-страница с гиперссылкой

alink=‘green’ vlink=‘yellow’>

Новая гиперссылка
Посещенная гиперссылка
Активная гиперссылка
Назад

Цвет гиперссылки Web-страница с гиперссылкой Новая гиперссылкаПосещенная гиперссылкаАктивная гиперссылкаНазад

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

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

ячейка таблицы создается индивидуально.
До начала создания таблицы ее надо обязательно

нарисовать, подсчитать количество строк и ячеек, определить, какие ячейки надо объединить.

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

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

… - ячейка заголовка
… - обычная ячейка

По

умолчанию текст в ячейках заголовка показан полужирным шрифтом с выравниванием по центру
Текст в обычных ячейках не выделяется и выравнивается по левому краю

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

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

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

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

дескрипторов —
Но поскольку ширина таблицы может отличаться от ширины

окна обозревателя, выровнять текстовый заголовок относительно таблицы может оказаться довольно сложно.

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

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

заголовок непосредственно в таблице.

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

влево или вправо, присвойте атрибуту ALIGN в дескрипторе значение

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

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

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

BGCOLOR. Окрашивание ячеек используется для выделения важных блоков данных в

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

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

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

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

, так и для отдельной ячейки в дескрипторах

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

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

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

всей таблице. Если Internet Explorer заполняет копиями изображения все пространство

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

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

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

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

две ячейки в первом столбце объединяются с помощью атрибута ROWSPAN.

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

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

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

и между ячейками. Это вполне подходит, если таблица используется для

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

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

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

показ границ таблицы. Данному атрибуту присваивается значение ширины внешней границы

таблицы в пикселях.

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

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

вокруг таблицы, тогда как внутренние границы между ячейками не меняются.

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

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

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

границы, либо не показывать границ.
Однако, часто нужно показать только

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

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

Слайд 56

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

границ таблицы:
void — нет внешних границ;
above — граница по верхнему

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

Выборочная прорисовка границ ♦ FRAME — устанавливает показ внешних границ таблицы:void — нет внешних границ;above — граница

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

предназначены для группирования ячеек таблицы. Это удобная функция, позволяющая форматировать

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

Группирование и объединение ячеек таблицыСуществует ряд дескрипторов кода HTML, которые предназначены для группирования ячеек таблицы. Это удобная

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

столбцов или строк. Это особенно важно при выполнении разметки макета

страницы с помощью таблицы.
Для объединения ячеек в дескрипторах

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

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

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

создает группу строк заголовков, этот дескриптор можно использовать в коде

таблицы только один раз;

— используется для создания одной или нескольких групп строк;
♦ — создает группу строк нижнего колонтитула таблицы, этот дескриптор можно использовать в коде таблицы только один раз. Все дескрипторы группирования строк являются парными.

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

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

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

использованию таблиц в тексте этого же документа.
Код HTML допускает

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

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

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

дескрипторе .

Слайд 65Выравнивание таблиц в тексте документа
Выравнивание таблицы в тексте документа осуществляется

с помощью атрибута ALIGN. Этому атрибуту присваиваются следующие значения:

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

Атрибуту clear присваивается значение left или right, такое же, какое было присвоено атрибуту align таблицы.

Выравнивание таблиц в тексте документаВыравнивание таблицы в тексте документа осуществляется с помощью атрибута ALIGN. Этому атрибуту присваиваются

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

Скачать презентацию

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

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

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

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно хранить и делиться своими презентациями с другими пользователями.

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

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

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

Слайд 60Группирование столбцов
Для группирования столбцов используются следующие дескрипторы:
♦ < COLGROUP >

- структурная группа столбцов, применяется для разбивки таблицы на столбцы

разных типов, например: столбец заголовков и столбцы данных;
♦

Разделы презентаций

Технология создания Web-страниц

Содержание

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

Слайд 1Технология создания Web-страницИнтернет и WWW

Слайд 2World Wide Web и ее место в мировой сетиСеть World

Wide Web представляет собой глобальный мировой ресурс информации, доступ к

сетей193.124.0.0-193.125.255.255

Слайд 4Сеть World Wide Web родилась в 1989 году в Женеве,

Швейцария. Придумал мировую паутину Тим Бернерс-Ли (Tim Berners-Lee), сотрудник сервисного

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

принадлежит.Универсальность, стандартность и аппаратная независимость протоколов обмена даннымиHTTP (Hypertext Transfer

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

их просмотраSoftInternetСредство передачи данных по сетиСистема компьютеров, объединенных в сеть

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

Web-станиц содержатся на Web-серверах Для из просмотра используются программы-обозреватели: Microsoft Internet

Слайд 8Домены высшего уровня, доменные суффиксы разных стран.gov– правительственные организацииmil- военные организацииcom-

коммерческие организацииnet- организации, предоставляющие сетевые услугиEdu – образовательные организацииru,su- Россияnl-

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

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

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

от размера страницы и от скорости подключения компьютера пользователя: аналоговый

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

языком программирования для разработки Web-страницHTML – коллекция управляющих символов -дескрипторов

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

-оформление заголовка страницы заголовок,

Слайд 14 Работа с текстом

шрифта ваш заголовок ваш текст - создание абзацаALIGN=“left”

Слайд 15Выравнивание текста абзаца Абзац выровнен влево

Абзац выровнен по центру

Слайд 16

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

и конец

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

список перестает восприниматься как одно целое и теряется смысл его

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

дескриптором , присваивается номер с помощью атрибута VALUE.Все следующие пункты

Слайд 20Маркированный списокДля создания маркированного спискаиспользуется комбинация двух пардескрипторов. ... устанавливают начало

и конец

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

circle■ - squareЗначение атрибута TYPE в маркированном списке

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

2 Пункт 3 < LI >Маркированный

Слайд 23

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

yellowзеленый – greenзолотой – goldкрасно-коричневый – maroonкрасный – redлимонный –

Слайд 25Оглавление

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

— текст исчезает за краем Web-страницы; slide — после выполнения заданного

Слайд 27LOOP — число показов текста в строке: ? — целочисленное значение,

указывающее число повторов; infinite — бесконечное повторение эффекта по циклу. SCROLLAMOUNT —

Слайд 28 Бегущая строкаЭффект бегущей строки поддерживается только в

обозревателе Internet Explorer. В других обозревателях текст будет отображаться как

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

зарезервированы в качестве служебных в языке HTML,

Слайд 30Вставка рисунка Web-страница с рисунком

ALIGN=‘right’>Выравнивание по левой

Слайд 31Выравнивание рисунка и текста страницыДля выравнивания рисунка относительно текста документа

атрибуту ALIGN присваивается следующие значения:LEFT – рисунок выравнивается по левому

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

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

Слайд 33Оглавление

Слайд 34Гиперссылкагиперссылка Гиперссылка на другие Гиперссылка на другие Web-Гиперссылка на

другие Web-страницыГиперссылка на графические файлыГиперссылка на звуковые файлы видеоклипыЦвет гиперссылкиДалееНазад

Слайд 35 Моя почта http:// - важный элемент адреса гиперссылки

( ftp:// )В то время как www можно опустить:

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

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

в файлах с расширением .midMP3 – музыка, звуковые сообщения в

Слайд 38 Цвет гиперссылки Web-страница с гиперссылкой

alink=‘green’ vlink=‘yellow’>Новая гиперссылкаПосещенная гиперссылкаАктивная гиперссылкаНазад

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

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

ячейка таблицы создается индивидуально.До начала создания таблицы ее надо обязательно

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

… - ячейка заголовка … - обычная ячейкаПо

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

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

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

де­скрипторов — Но поскольку ширина таблицы может отличаться от ширины

Слайд 1Технология создания Web-страниц

Интернет и WWW

Слайд 2World Wide Web и ее место в мировой сети
Сеть World

сетей
193.124.0.0-193.125.255.255

принадлежит.
Универсальность, стандартность и аппаратная независимость протоколов обмена данными
HTTP (Hypertext Transfer

Слайд 6WWW- основная часть сети Интернет.

Web
Информационный ресурс

Коллекция документов и программ для

их просмотра

Soft
Internet
Средство передачи данных по сети
Система компьютеров, объединенных в сеть

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

Web-станиц содержатся на Web-серверах
Для из просмотра используются программы-обозреватели: Microsoft Internet

Слайд 8Домены высшего уровня, доменные суффиксы разных стран.
gov– правительственные организации
mil- военные организации
com-

коммерческие организации
net- организации, предоставляющие сетевые услуги
Edu – образовательные организации

ru,su- Россия
nl-

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

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

от размера страницы и от скорости подключения компьютера пользователя:
аналоговый

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

языком программирования для разработки Web-страниц
HTML – коллекция управляющих символов -дескрипторов

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

-оформление заголовка страницы
заголовок,

шрифта
ваш заголовок
ваш текст - создание абзаца
ALIGN=“left”

Слайд 15Выравнивание текста абзаца

Абзац выровнен влево

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

дескриптором , присваивается номер с помощью атрибута VALUE.
Все следующие пункты

Слайд 20Маркированный список
Для создания маркированного списка
используется комбинация двух пар
дескрипторов.
... устанавливают начало

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

• - disk
○ -

circle
■ - square
Значение атрибута TYPE в маркированном списке

Слайд 22Многоуровневый список
Многоуровневые списки

Нумерованный

Пункт 1
Пункт

2
Пункт 3

< LI >Маркированный

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

yellow
зеленый – green
золотой – gold
красно-коричневый – maroon
красный – red
лимонный –

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

— текст исчезает за краем Web-страницы;
slide — после выполнения заданного

Слайд 27LOOP — число показов текста в строке:
? — целочисленное значение,

указывающее число повторов;
infinite — бесконечное повторение эффекта по циклу.
SCROLLAMOUNT —

Слайд 28
Бегущая строка

Эффект бегущей строки поддерживается только в

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

Слайд 30Вставка рисунка

Web-страница с рисунком

ALIGN=‘right’>

Выравнивание по левой

Слайд 31Выравнивание рисунка и текста страницы
Для выравнивания рисунка относительно текста документа

атрибуту ALIGN присваивается следующие значения:
LEFT – рисунок выравнивается по левому

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

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

Слайд 34Гиперссылка
гиперссылка

Гиперссылка на другие Гиперссылка на другие Web-Гиперссылка на

другие Web-страницы
Гиперссылка на графические файлы
Гиперссылка на звуковые файлы видеоклипы
Цвет гиперссылки

Далее

Назад

Слайд 35 Моя почта

http:// - важный элемент адреса гиперссылки

( ftp:// )
В то время как www можно опустить:

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

Большое изображение

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

в файлах с расширением .mid
MP3 – музыка, звуковые сообщения в

Слайд 38 Цвет гиперссылки

Web-страница с гиперссылкой

alink=‘green’ vlink=‘yellow’>

Новая гиперссылка
Посещенная гиперссылка
Активная гиперссылка
Назад

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

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

ячейка таблицы создается индивидуально.
До начала создания таблицы ее надо обязательно

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

… - ячейка заголовка
… - обычная ячейка

По

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

дескрипторов —
Но поскольку ширина таблицы может отличаться от ширины

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

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

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

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

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

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

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

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

границы, либо не показывать границ.
Однако, часто нужно показать только

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

границ таблицы:
void — нет внешних границ;
above — граница по верхнему

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

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

Слайд 60Группирование столбцов
Для группирования столбцов используются следующие дескрипторы:
♦ < COLGROUP >

- структурная группа столбцов, применяется для разбивки таблицы на столбцы

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

создает группу строк заголовков, этот дескриптор можно использовать в коде

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

использованию таблиц в тексте этого же документа.
Код HTML допускает

Слайд 65Выравнивание таблиц в тексте документа
Выравнивание таблицы в тексте документа осуществляется