МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ Основы языка HTML. - презентация

1 МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ Основы языка HTML

2 Вставка содержимого из внешних источников

3 Размещение графических изображений в HTML документе Для размещения изображений используются в основном два графических формата: JPG GIF

4 Сложный алгоритм сжатия, малая потеря качества при сжатии, поддерживает основные цветовые модели и любую глубину цвета Предназначен для хранения полноцветных фотографий. Для полиграфии не рекомендуется. *.jpg *.jpeg

5 Режим индексированных цветов (не более 256), имеет альфа-канал (прозрачность), возможна анимация из нескольких кадров. При уменьшении количества цветов очень мало весит. *.gif

6 Минусы – изображение сохраняется с помощью ограниченного количества цветов (обычно 256 цветов) => изображение будет не очень красочным. С помощью формата.gif сохраняются навигационные кнопки, навигационные графические элементы и фоновые изображения.

7 Для внедрения изображения используется одиночный тег. SRC – основной атрибут. Указывает путь и имя файла, в котором содержится графический элемент. Пример:

8 WIDTH – ширина внедряемого изображения (в пикселях). HEIGHT - высота внедряемого изображения (в пикселях). Если не используются атрибуты WIDTH, HEIGHT, то изображение внедряется оригинального размера. Если используется только один атрибут, например HEIGHT, то браузер уменьшит или увеличит ширину пропорционально изображению.

9 Атрибуты VSPACE, HSPACE – устанавливают отступ текста от внедряемого в HTML-документ изображения. Атрибут BORDER – задает толщину рамки вокруг изображения. Атрибут ALT – задает альтернативный текст, который появляется в том месте, где должны быть картинки.

10 Пример: ALT=Здесь была картинка Обычно атрибут используют при размещении навигационных изображений (ссылок), а так же при размещении изображений, о которых надо дать знать поисковой системе.

11 Атрибут ALIGN – выравнивание. Возможные значения: LEFT, CENTER, RIGHT,TOP, MIDDLE, BOTTOM.

12 Парный тег позволяет вставлять в HTML-документы графические изображения, HTML- документы, элементы управления ActiveX и апплеты (программные компоненты). Технология ActiveX средство, при помощи которой Internet Explorer (IE) использует другие приложения внутри себя. С помощью ActiveX IE загружает Windows Media Player, Flash, Quicktime и другие приложения, которые могут воспроизводить файлы, внедрённые в веб-страницы. Элементы управления ActiveX активизируются при щелчке по такому объекту на веб-странице, например,.WMV- файлу, чтобы загрузить его для отображения в окне браузера Internet Explorer. В HTML 5 и

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

14 Ссылки

15 Гиперссылка – это URL-адрес того документа, который привязан к одному из элементов Web- страницы (текстовому или графическому). Для внедрения ссылок в HTML документ применяется парный тег ….

16 Пример: Все, что находится внутри контейнера, называется элемент привязки (текстовый фрагмент или графический элемент). В результате на экране отображается подчеркнутый выделенный текст.

17 Пример привязки к изображению: Изображение, к которому привязывается ссылка, называется навигационной картинкой (изображением).

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

19 Значением атрибута HREF может быть абсолютный или относительный URL- адрес. Например, HREF=1.htm. Браузер будет искать данный документ в текущей папке, то есть в той, в которой находится активный документ.

20 Исключение составляет тег В случае использования данного тега в заголовке HTML документа (то есть контейнера HEAD) относительные адреса (указанные в виде значений HREF) будут восприниматься браузером не относительно текущей папки, а относительно URL адреса, указанного в значении атрибута URL.

21 Тег … можно использовать для указания отдельных элементов HTML документов. Атрибут NAME используется для указания места, до которого необходимо пролистать HTML документ. Пример:

22 В этом случае внутри тега находится якорь – это элемент HTML документа, который может быть адресован с помощью гиперссылки. Якорь не выделяется браузером. Для того чтобы с помощью ссылки адресоваться к якорю надо после URL адреса добавить # и указать имя якоря. Пример:

23 Название якоря может формироваться без указания URL адреса HTML документа. Пример:... Данный якорь будет искаться в текущей папке. При использовании абсолютного адреса необходимо использовать аббревиатуру http (например,

24 Формы и элементы пользовательского интерфейса

25 Форма (в документе HTML) – это средство, позволяющее организовать диалог пользователя и Web сайта. Основные виды элементов HTML-форм: Кнопки Списки Текстовые поля Переключатели (флажки) Радиокнопки

26 Элементы управления HTML-форм позволяют пользователю вводить информацию с помощью браузера и отправлять её на обработку Web- серверу.

27 Группа тегов, формирующих HTML форму. 1. Парный тег - задает свойство формы и содержит в своем контейнере элементы этой формы. Атрибуты: Атрибут NAME – для задания имя формы. Например, NAME=anketa. Важно! Каждый элемент HTML формы, как и сама форма, должны быть обязательно поименованы.

28 Атрибут METHOD – определяет, каким способом HTML-форма будет отправляться к программе- обработчику. Есть два варианта: 1) =POST – используется чаще всего. 2) =GET – используется для отправки HTML формы с помощью URL адреса. (По умолчанию задается метод GET).

29 Атрибут ACTION – задает местоположение программы- обработчика. Значением атрибута служит адрес (абсолютный или относительный). Например, ACTION=executive.php – файл, в котором хранится программа-обработчик. Или – пользовательская форма будет отсылаться по указанному электронному адресу.

30 Атрибут ENCTYPE – тип кодировки. Варианты: =text/htm/ =text/plain – обычный текст без элементов форматирования.

31 Элементы HTML форм 1. Текстовые поля. Бывают двух видов: Многострочное. Парный тег … Атрибуты: Атрибут NAME. Атрибут ROWS – высота поля (в строках). Атрибут COLLS – ширина поля (в символах).

32 Размещенный в контейнере тега текст будет отображаться внутри этого текстового поля (по умолчанию).

33 Однострочное. Формируется с помощью одиночного тега. Атрибуты: NAME TYPE – задает тип создаваемого элемента. Для создания однострочного поля значение атрибута TYPE=Text. SIZE – ширина поля в символах. MAXLENGTH – максимальная длина вводимого текста. VALUE – используется для хранения значения элемента формы.

34 Пример: Можно задать значение поля по умолчанию VALUE=Например, пошел дождь

35 2. Переключатель или флажок. Формируется с помощью тега, атрибут TYPE которого принимает значение CHECKBOX. У данного тега имеются также атрибуты: Атрибут NAME. Атрибут CHESKED – если он указан, то флажок будет установлен.

36 3.Радиокнопка. Достигается с помощью двух тегов, имеющих одинаковое имя. Например, NAME=1.

37 4. Текстовое поле типа пароль. Данный тег формирует текстовое поле типа пароль. Работает также как и однострочное текстовое поле, но значение отображается в виде звездочек.

38 5.Кнопки. Используется для вызова клиентских скриптов (сценариев). Атрибут VALUE принимает в качестве значения строку, отображаемую на кнопке.

39 Кнопка созданная с помощью: предназначена для отправки формы на обработку на Web-сервер.

40 Графическая кнопка Играет такую же роль, что и кнопка типа SUBMIT

41 Кнопка сброса формы. Предназначена для установления первоначального значения формы.

42 6. Списки выбора (меню) – это многоуровневая конструкция. Парный тег … (тег первого уровня) формирует свойства меню. Атрибуты: NAME. SIZE. Если данный атрибут равен единице, меньше единицы или не указан, то формируется выпадающее меню.

43 Если SIZE больше единицы, то формируется прокручиваемый список.

44 Внутри контейнера находятся элементы меню, которые формирует одиночный тег (тег второго уровня). Пример: Файл Печать

45 Ширина меню определяется максимальным значением элемента меню. Атрибут MULTIPLE – для выбора нескольких разных опций.

46 7. Выбор файла с текстовым полем и копкой «Обзор» организуется с помощью значения FILE параметра TYPE тега :

47 HTML форма отсылается на обработку Web-серверу записей, которые выглядят следующим образом: Имя элемента формы(Name) = значение(Value). Для списков, переключателей, кнопок, радиокнопок обязательно задавать значение атрибута Value. В остальных случаях значение задает пользователь (во время ввода). В случае если при формировании элементов формы типа переключатель (флажок) атрибут Value не используется, в качестве значения будет формироваться предлог On.

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

49 РАЗМЕТКА СТРАНИЦЫ

50 Создание фреймов Можно разбивать Web-страницы на множественные подокна. Фрейм - область окна браузера для представления отдельной веб-страницы. Каждое подокно, или фрейм имеет свой URL-адрес, что позволяет загружать его независимо от других фреймов. Каждый фрейм имеет собственное имя (параметр NAME), позволяющий переходить к нему из другого фрейма.

51 Структура HTML-документа, описывающего фреймы, следующая: … …

52 Тег описывает все фреймы, на которые делится экран. Можно разделить экран на несколько вертикальных или горизонтальных фреймов.

53 Между тегами и могут находится: теги, описывающие каждый фрейм в отдельности; вложенные теги и ; парные теги и, которые позволяют строить двойные документы для броузеров, поддерживающих фреймы и не поддерживающих фреймы.

54 У тега два взаимоисключающих параметра: ROWS - определяет горизонтальные подокна, COLS - вертикальные подокна. Примеры

55 Теги могут быть вложенными, например

56 В теге можно задать толщину разграничительной рамки c помощью параметров FRAMEBORDER и BORDER.

57 В теге задаются параметры для каждого фрейма в отдельности. Параметр SRC задает имя файла, который загрузится в этом фрейме. Параметр NAME задает имя данного фрейма. Например

58 Имя фрейма необходимо задавать для того, чтобы впоследствии указать, к какому фрейму использовать гиперссылку. В документе HTML, в этом случае, в теге (описание гиперссылки) должен присутствовать параметр TARGET, который определяет фрейм, в котором показывается содержимое Web-страницы. Например: file

59 Пример Описание фреймов

60

61 Для загрузки файлов text.htm и table.htm во фрейм с именем FRAME2, необходимо в файл file.htm внести следующие изменения при определении гиперссылок:... Документ 1 Документ 2...