Презентация на тему "Коммуникационные технологии и разработка Web - сайтов"

Содержание

• 
  Слайд 1

  Коммуникационные технологии и разработка Web – сайтов

  • Назначение и основные понятия
  • Форматирование текста
  • Работа с изображениями
  • Структура HTML-документа
  • Использование таблиц
  • Создание ссылок
  • Создание фреймов
  • Навигационные карты
  • Сбор информации с помощью форм

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

  Электронное учебное пособие.

  Разработчик: преподаватель специальных дисциплин, Демихова Ирина Юрьевна 2014 год.

• 
  Слайд 2

  Назначение и основные понятия

  • Web – страницы создаются с использованием языка разметки гипертекстовых документовHTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы – HTML-теги, которые определяют вид Web – страницы при ее просмотре в браузере.

  Если мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML–на языке разметки гипертекста.

  • HTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.
  • Теги (tags) – команды языка HTML.

  Для файлов, являющихся HTML-документами, принято расширение htm или html.

• 
  Слайд 3
  

  Формат тэга:

  <тэг атрибут=«значение» атрибут=«значение»…>

  У многих тэгов есть свои атрибуты. Их назначение – уточнять тэги, более подробно описывать действия над текстом, графикой или другими объектами.Атрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать (если это не два слова!), чтобы не запутаться, т.к. непарные кавычки – это ошибка, из-за которой команда не выполняется.Особенность создания HTML-документа – в том, что создается он в Блокноте, а просматривать его можно в окне обозревателя, например, Internet Explorer.Каждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне Internet Explorer, выбирая соответствующую команду или кнопку на панели инструментов , или клавишу .Сообщения об ошибках, допущенных в формате тэгов, не появляются.Ошибки нужно искать самостоятельно, если результат при просмотре сайта не соответствует ожидаемому!

• 
  Слайд 4

  Структура HTML-документа

  Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающиеся и закрывающиеся тэги ( такая пара называется контейнером). Закрывающийся тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и сточными буквами.HTML-код страницы помещается внутрь контейнера .Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web – страница разделяется на две логические части: заголовок и содержание.Заголовок Web-страницы заключается в контейнер и содержит название страницы и справочную информацию о станице, которая используется браузером для ее правильного отображения.Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.Отображаемое в браузере содержание страницы помещается в контейнер .Созданную Web – страницу необходимо сохранить в виде файла с расширением htm. В качестве расширения файла Web – страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы, которое высвечивается в верхней строке браузера. Имя Web- страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.

• 
  Слайд 5

  Форматирование текста

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

  ЗАГОЛОВКИ.

  Размер шрифта заголовков задается парами тэгов от (самый крупный) до (самый мелкий).

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

  – полужирный шрифт.– отмена полужирного шрифта.– курсив.– отмена курсива.– подчёркивание.– отмена подчёркивания.– полужирный шрифт.– отмена полужирного шрифта.

  Введя в Блокноте HTML-код и сохранив файл в формате html, можно запустить его, и в окне Internet Explorer отобразится содержание документа.

• 
  Слайд 6
  

  ШРИФТЫ.

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

  – изменение шрифта.– отмена действия шрифта.

  • FACE= “название шрифта"– изменение гарнитуры (начертания) шрифта (например, FACE=“Arial").
  • SIZE= размер шрифта– изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку (например, SIZE=4).
• 
  Слайд 7
  

  • COLOR= «название цветаили его шестнадцатеричный код»изменение цвета текста.

  Например, чтобы в окне обозревателя текст отображался красным цветом, нужно ввести в HTML-код такую команду...

• 
  Слайд 8
  

  Шестнадцатеричное представление цвета использует RGB- формат “#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (Red), две следующие - интенсивность зеленого (Green) и две последние – интенсивность синего (Blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная – FF. Например синий цвет задается значением “#0000FF".

  Для изменения цвета можно использовать таблицу цветовых оттенков.

  Форматирование текста

• 
  Слайд 9
  

  Горизонтальная линия

  Заголовок целесообразно отделять от остального содержания страницы горизонтальной линией с помощью одиночного тэга

  • SIZE =“толщина линии" в пикселях
  • WIDTH=“ширина линии" в пикселях или 80%

  Абзацы.

  – переход на следующую строку.– отмена отображения без изменения форматирования.

  Пример действия этого тега:

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

  – текст сдвигается вверх (верхний индекс).– отмена сдвига.– текст сдвигается вниз (нижний индекс).– отмена сдвига.

  Форматирование текста

• 
  Слайд 10
  

  Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

  Атрибуты тега для выравнивания текста АтрибутуALIGNможет быть присвоено одно из 4-х значений: LEFT ALIGN= RIGHT CENTER JUSTIFY Позволяет выравнивать текст : по левой границе: ALIGN = “left" по правой границе: ALIGN = “right" по центру: ALIGN = “center" по ширине: ALIGN = “justify" Пример записи и результат действия этого тега с различными значениями атрибутов. Форматирование текста

• 
  Слайд 11

  Работа с изображениями

  На Web – страницы можно помещать изображения, хранящиеся в графических файлах трех форматов – GIF, JPEG, PNG.Для вставки изображения используется тэг с атрибутом SRC,который указывает на место хранения файла на локальном компьютере или в Интернете.Если графический файл находится на локальном компьютере в той же папке, что и файл Web – страницы, то в качестве значения атрибута SRC достаточно указать только имя файла.Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в многоуровневой системе папок. Есть различия в написании полного имени файла в операционных системах Windows и Linux. Рассмотрим на примере операционной системы Windows:Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет – адрес этого файла. Например:Все файлы с изображениями должны находиться в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения имени файла нужно указывать путь к файлу.

• 
  Слайд 12
  

  • SRC= “имя файла.расширение"
  • ALT = “название картинки или поясняющий текст"

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

  • WIDTH = “ширина" (в пикселях или в %)
  • HIGHT = “высота" (в пикселях или в %)
  • BORDER = “число" в пикселях

  Определяет рамку вокруг изображения.

  • HSPACE = “число" в пикселях
  • VSPACE = “число" в пикселях

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

  Пример записи и результат действия этого тега с различными значениями атрибутов.

• 
  Слайд 13
  

  Положение рисунка относительно текста.

  Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значение:

  • TOP (верх)
  • MIDDLE (середина)
  • BOTTOM (низ)
  • LEFT (слева)
  • RIGHT (справа)

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

  Атрибут CLEAR.

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

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

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

  Работа с изображениями

• 
  Слайд 14
  

  Вставка альтернативного текста.

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

  Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

• 
  Слайд 15

  Создание ссылок

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

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

  • Если файл находится в другой папке, то нужно указывать путь к нему.
  • Если создается ссылка на ресурс Интернета, то нужно указать его URL.

  Можно организовать сообщение по электронной почте.

  Атрибуты тега для задания цвета ссылок

  • LINK=“цвет или код цвета"- задает цвет ссылки.
  • VLINK=“цвет или код цвета"- задает цвет просмотренной ссылки.

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

• 
  Слайд 16
  

  Ссылки на метки.

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

• 
  Слайд 17

  Навигационные карты

  Можно создавать ссылки с разных частей одного изображения, если предварительно выделить эти части (области) и определить их координаты. Такое изображение называют картой (map).Изображения-карты часто используют для показа расположения помещений на планах и перехода по ссылке к описанию выбранного помещения.Тег, который позволяет определить карту.Между открывающим и закрывающим тегами определяются области карты при помощи тега Для каждой области карты должен быть создан свой элемент , который должен включать атрибут, определяющий ссылкуHREF= “адрес ссылки" Атрибуты тега Задаётся имя изображения-карты при помощи атрибута NAME. NAME= имя

• 
  Слайд 18
  

  • alt=название области изображения-карты

  Это атрибут для задания текста, заменяющего изображение-карту, не является обязательным.

  Атрибут, определяющий форму области на карте SHAPE.

  • Описывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего).
  • Описывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника).
  • Описывает координаты сircle (значения атрибута – координаты центра окружности и радиус).
  • Описывает координаты точки point (значения атрибута – её координаты).
  • Определение координат областей для изображения-карты.
  • Для определения координат можно использовать графический редактор Paint. Красными точками показаны координаты верхней левой точки необходимой области и правой нижней точки: shape="rect" coords="235, 226, 341, 257"

  Навигационные карты

• 
  Слайд 19
  

  Как связать карту с изображением.

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

  • Воспользоваться тэгом, чтобы описать навигационную карту, включая области и гиперссылки.
  • Воспользоваться тэгом ,атрибуты которого идентифицируют изображение и соответствующую ему карту.
  • Установить соответствие между изображением и картой с помощью атрибута usemap тэга .
  • В качестве значения атрибута usemap используется имя карты, заданное в атрибуте name тэга . Если описание карты расположено на той же станице, что и ссылка на изображение (как обычно и бывает), имени карты должен предшествовать символ цифры (#).
• 
  Слайд 20

  Использование таблиц

  Формирование таблицы

  – начало таблицы.

  – конец таблицы.–начало заголовка таблицы.– конец заголовка таблицы.

  Заголовок располагается прямо по центру относительно ширины таблицы.

  (Table Header) – началозаголовков столбцов или строк таблицы.

  – конец заголовков столбцов или строк таблицы.(Table Row) – начало строки таблицы.– конец строки таблицы.– начало ячейки таблицы.– конец ячейки таблицы.

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

• 
  Слайд 21
  

  • WIDTH=“ширина таблицы" в пикселях или %
  • BORDER=“ширина границы таблицы" в пикселях или %

  Если она равна нулю – границы становятся невидимы.

  • CELLSPACING=“ширина промежутков между ячейками" в пикселях или %.
  • CELLPADDING=“ширина промежутков между содержимым ячейки и её границами" в пикселях или %.

  Таблица может быть простой (пример на предыдущем слайде) или сложной, когда несколько строк или столбцов объединяются. ROWSPAN = “количество объединяемых строк" COLSPAN = “количество объединяемых столбцов" BGCOLOR = “цветфона заголовка, строки, ячейки" Пример записи и результат действия тегов с различными значениями атрибутов.
• 
  Слайд 22
  

  Для создания интерактивных Web-страниц, обеспечивающих обратную связь, используются специальные формы.

  Форма – это набор элементов, знакомых нам по диалоговым окнам, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем.

• 
  Слайд 23

  Сбор информации с помощью форм

  Сбор информации с помощью форм

• 
  Слайд 24
  

  В переключателях, флажках и списках выбранных по умолчанию элемент задается с помощью атрибута SELECTED.

• 
  Слайд 25
  

  Сбор информации с помощью форм

• 
  Слайд 26

  Создание фреймов

  Кадры (frames) – это независимые части, на которые можно разбить окно браузера, и вкаждую часть можно загружать отдельную страницу. Эти страницы могут быть связаны между собой ссылками.Количество частей (кадров)и их размеры, выбор горизонтального или вертикального деления, т.е. кадровая (фреймовая) структура задается тегом:Он определяет фреймовую структуру.Завершает определение фреймовой структуры.Позволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр.Использование тегаисключает использование тега!Определяя структуру, кадры задают сверху вниз и слева направо.

• 
  Слайд 27
  

  NAME= “имя кадра" - задает имя кадра.