ТЕХНОЛОГИЯ СОЗДАНИЯ МУЛЬТИМЕДИЙНЫХ ДИСКОВ И ВИРТУАЛЬНЫХ ВЫСТАВОК Фунтикова И. В. ведущий программист НБЧР. - презентация

1 ТЕХНОЛОГИЯ СОЗДАНИЯ МУЛЬТИМЕДИЙНЫХ ДИСКОВ И ВИРТУАЛЬНЫХ ВЫСТАВОК Фунтикова И. В. ведущий программист НБЧР

2 Что понадобится для изучения ? Браузер Блокнот Пуск – Программы – Стандартные - Блокнот

3 Термины. Тег. Тег - оформленная единица HTML- кода. Например,,,, и так далее. Все тэги имеют одинаковый формат : они начинаются знаком

4 Термины. Атрибут. Атрибут – это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключённые в двойные кавычки.

5 Термины. Элемент. Элемент – понятие, введенное чисто для удобства обьяснения. Например, элемент HEAD состоит из двух тегов – открывающего и закрывающего. Таким образом, элемент – более общее понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.

6 Структура web- документа.

7 Вставка комментария.

8 Создаем свою первую страничку. Создайте на своем ПК папку с названием сайта ; Внутри папки создайте ещё одну папку с названием www, а внутри её ещё одну для изображений img ШАГ 1: ШАГ 2: Зайдите в созданную на предыдущем шаге папку www и создайте внутри нее текстовый документ.

9 Создаем свою первую страничку. ШАГ 3: Пишем в блокноте текст простейшей странички :

10 Создаем свою первую страничку. Теперь сохраните ваш документ как index.html ШАГ 4: ШАГ 5: Запустим файл index.html и увидим следующее :

11 Работаем с текстом

12 Основные элементы форматирования текста

13 Текст внутри документа Просмотр в браузере Примечание: следите чтобы содержимое в кавычках было написано без пробелов, т.е. а не иначе не будет работать! P - используется для разметки параграфов в документах. Атрибуты: ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине. По умолчанию имеет значение left.

14 Основные элементы форматирования текста Текст внутри тела документа Просмотр в браузере Примечание: закрывающий тег обязателен! Н1, Н2,… Н6 - Применяются для разбивания текста на смысловые уровни - разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта. Атрибуты: ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right.

15 Основные элементы форматирования текста Текст внутри тела документа Просмотр в браузере Примечание: Как вы наверное заметили, при переносе строки не начинается новый параграф! Перенос- он и есть перенос! BR - данный элемент осуществляет перенос строки. Не имеет закрывающего тега.

16 Основные элементы форматирования текста Текст внутри тела документаПросмотр в браузере DIV - используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать. Атрибуты: ALIGN - определяет способ горизонтального выравнивания контейнера. Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине.По умолчанию имеет значение left.

17 Основные элементы форматирования текста

18

19

20

21

22 Списки Различают списки двух видов : упорядоченные ( пронумерованные ) и неупорядоченные ( непронумерованные ). Единственным отличием является то, что перед пунктами неупорядоченных списков обычно ставятся символы - буллеты (bullets), например, точки, ромбики и т. п., в то время как пунктам упорядоченных списков предшествуют их номера.

23 Списки. UL Текст внутри тела документаПросмотр в браузере UL (Unsorted List) - Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

24 Списки. OL OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка. Атрибуты: START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа). Если не указывать, начинается с начала. TYPE – определяет стиль нумерации пунктов списка. Возможные значения: "A" – заглавные буквы A, B, C... "a" – строчные буквы a, b, c... "I" – большие римские числа I, II, III... "i" – маленькие римские числа i, ii, iii... "1" – арабские числа 1, 2, 3...

25 Списки. OL

26 Списки. LI Текст внутри тела документаПросмотр в браузере L I (List Item ) - Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам. Атрибуты: VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

27 Покоряем HTML ссылки Эта ссылка на сайт nbchr.ru Для перехода на page2 щелкните здесь Нажав эту ссылку, вы перейдёте на документ pdf

28 Как сделать ссылку внутри страницы Текст внутри страницы : В браузере :

29 Дополнительные атрибуты TARGET - указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank". TITLE - указывает заголовок ссылки, который появляется при наведении на нее. Это ссылка на сайт nbchr.ru, откроется в новом окне Эта - тоже на nbchr.ru. При наведении появится заголовок.

30 Работаем с изображениями GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)

31 Примеры вставки изображения

32 Необходимые атрибуты ALIGN - определяет способ выравнивания картинки по горизонтали. Очень полезное свойство при обтекании картинки текстом. Обычно используют LEFT ( выравнивание по левому краю, текст будет обтекать справа ) и RIGHT ( выравнивание по правому краю, текст обтекает слева ). Если на странице есть текст, то это обязательное свойство. HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ. HEIGHT и WIDTH - высота и ширина изображения в пикселах. Золотое правило web- мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах ( или при подключении к сети через модем ) это смотрится просто отвратительно. Но в принципе, можно и не задавать размеры, просто будет дольше загружаться. И еще, не советую Вам искажать реальные размеры картинки.

33 Примеры

34 Цвет фона и текста Вот необходимые атрибуты : BACKGROUND – определяет изображение для " заливки " фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR – определяет цвет фона документа. TEXT – определяет цвет текста в документе. Все они прописываются для элемента BODY. Значения цветов задаются либо RGB- значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

35 Цвет фона и текста ТекстБраузер

36 Цвет фона и текста ТекстБраузер

37 TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDER который задает толщину рамки таблицы в пикселах. TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен. TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

38 Таблицы ТекстВ баузере

39 Объединение ячеек. Для этого существуют данные атрибуты. COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

40 Таблицы Вот еще полезные атрибуты : CELLPADDING – определяет расстояние ( в пикселах ) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом. CELLSPACING – определяет расстояние ( в пикселах ) между границами соседних ячеек таблицы html. WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.

41 Таблицы.

42 ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения : left, center, right. Значение по умолчанию – left. VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы. Возможные значения : top, bottom, middle. ( прижать к верху, прижать к низу, и установить посередине ). BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB- значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. Примечание : можно хоть каждой ячейке таблицы задать свой цвет фона или фоновый рисунок. Но : если вы задаете фоновый цвет ( или рисунок ) в базовом элементе TABLE то во всех ячейках будет этот фон ( рисунок ), и если вы захотите в какой - то ячейке поменять, пропишите соответсвующий атрибут именно для этой ячейки.

43 Пример : ряд 1 ячейка 1 ряд 1 ячейка 2 ряд 2 ячейка 1 ряд 2 ячейка 2

44 Результат в баузере :

45 Второй пример : ряд 1 ячейка 1 ряд 1 ячейка 2 ряд 2 ячейка 1 ряд 2 ячейка 2

46 Результат в браузере :

47 Пример виртуальной выставки

48 Каркас выставки