Форматирование текста Вставка графики, видео, звука Структура HTML-документа Назначение и основные понятия Создание списков и таблиц Служебные теги Бегущая. - презентация

1 Форматирование текста Вставка графики, видео, звука Структура HTML-документа Назначение и основные понятия Создание списков и таблиц Служебные теги Бегущая строка Создание ссылок Создание фреймов Создание фона Изображение-карта Web-галерея Web-галерея Создание форм

2 1 Если мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML (Hypertext Markup Language) – на языке разметки гипертекста. HTML-документы представляют собой текстовые файлы, в которые встроены специальные команды. Теги (tags) – команды языка HTML Для файлов, являющихся HTML-документами, принято расширение htm или html Назначение и основные понятия

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

4 3 Служебная информация информация об имени страницы основная часть документа Структура HTML-документа

5 4 – начинает блок служебной информации. – завершает блок служебной информации. – начинает блок информации, которая будет отображаться в строке заголовка обозревателя. – завершает блок информации, которая будет отображаться в строке заголовка обозревателя. – содержит служебную информацию. Каждый тег содержит пару атрибутов name и content, определяющих соответственно тип данных и содержание. Варианты: описывает краткое содержание страницы. определяет набор ключевых слов для поиска, облегчающий работу поисковым машинам, а создателю сайта дает больше шансов, что его информация будет найдена. описывает имя автора страницы. через 5 секунд автоматически загрузит сайт с указанным адресом, интервал времени и адрес задаем по своему усмотрению. Служебные теги

6 5 – изменение размера шрифта. – отмена выбранного размера шрифта. N [1…6] – полужирный шрифт. – отмена полужирного шрифта. – курсив. – отмена курсива. – подчёркивание. – отмена подчёркивания. – полужирный шрифт. – отмена полужирного шрифта. – увеличение шрифта относительно текущего. – отмена увеличения шрифта относительно текущего. – уменьшение шрифта относительно текущего. – отмена уменьшения шрифта относительно текущего. Введя в Блокноте HTML-код и сохранив файл в формате htm, можно запустить его, и в окне Internet Exploter отобразится содержание документа. Форматирование текста

7 6 – переход на следующую строку. – отображение без изменения форматирования. – отмена отображения без изменения форматирования. Пример действия этого тега: первый абзац отображается так, как введен в блокноте, т.к. на него распространяется действие тега, а второй абзац отображается произвольным образом. – текст сдвигается вверх (верхний индекс). – отмена сдвига. – текст сдвигается вниз (нижний индекс). – отмена сдвига. Форматирование текста

8 7 – изменение шрифта. – отмена действия шрифта. Атрибуты тега COLOR = «название цвета или его шестнадцатеричный код» изменение цвета текста. Например, чтобы в окне обозревателя текст отображался красным цветом, нужно ввести в HTML-код такую команду: текст Форматирование текста

9 8 Шестнадцатеричный код любого цвета можно определить, загрузив графический редактор Adobe Photoshop. В палитре инструментов подвести указатель мыши к цвету переднего плана или цвету фона. Двойным щелчком левой кнопки мыши на цвете переднего плана или фона можно запустить диалоговое окно Сборщик цветов. В нижней части этого окна справа есть поле (на рисунке оно обведено), в котором отображён соответствующий данному цвету шестнадцатеричный код Форматирование текста

10 9 FACE = название шрифта – изменение гарнитуры (начертания) шрифта. SIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку. Атрибуты могут перечисляться через пробел в произвольном порядке. Пример записи и результат действия этих тегов. Форматирование текста Лучше, однако, не использовать «экзотические» шрифты, которых может не оказаться у пользователя при просмотре вашего сайта. В этом случае они автоматически будут заменяться на стандартные.

11 10 Линии Создает горизонтальные линии. Атрибуты тега SIZE =толщина линии в пикселах WIDTH = ширина линии в пикселах или 80% LEFT ALIGN = RIGHT CENTER Выравнивание линии относительно ширины страницы – абзац. – конец абзаца. Атрибуты тега для выравнивания текста Атрибуту ALIGN может быть присвоено одно из 4-х значений: LEFT ALIGN = RIGHT CENTER JUSTIFY Позволяет выравнивать текст по левому, правому краю по центру или по ширине. Пример записи и результат действия этого тега с различными значениями атрибутов. Форматирование текста

12 1 Фон страницы задается в начале основной части документа, т.е. атрибутами тега. Атрибуты тега для изменения цвета текста и фона TEXT = название цвета или его код Задает цвет текста. BGCOLOR = название цвета или его код Задает цвет фона. Пример записи и результат действия этого тега. BACKGROUND = имя файла Использование в качестве фона изображения из файла. Изображение-текстуру можно создать в графическом редакторе. BGPROPERTIES =FIXED Создание фона – «водяного знака» (фона, который не перемещается вместе с текстом) Создание фона

13 1212 Вставка графических изображений вставка картинки из файла. Атрибуты тега SRC = имя файла.расширение ALT = название картинки или поясняющий текст Используется в качестве текстового описания к данному изображению, появляется при наведении указателя мыши на картинку. WIDTH = ширина (в пикселах или в %) HIGHT = высота (в пикселах или в %) BORDER = число в пикселах Определяет рамку вокруг изображения. HSPACE = число в пикселах VSPACE = число в пикселах Определяют горизонтальный и вертикальный отступ вокруг изображения соответственно. Пример записи и результат действия этого тега с различными значениями атрибутов Вставка графики, видео, звука 1 1 Все файлы с изображениями должны находиться в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения имени файла нужно указывать путь к файлу.

14 1313 LEFT ALIGN = RIGHT CENTER Используется, чтобы сдвинуть картинку к левому, правому краю, по центру и установить обтекание картинки текстом. LEFT CLEAR = RIGHT ALL Используется, чтобы очистить поле слева, справа или с обеих сторон графического объекта, а затем продолжить текст в пустой области за объектом. Пример записи и результат действия тега с различными значениями атрибутов Вставка графики, видео, звука Практическая работа 1 Практическая работа 1 Материалы для работы Материалы для работы Если картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке.

15 Пример записи и результат действия тегов с различными значениями атрибутов Вставка видео и звука Вставка звукового файла. Вставка видео файла. Вставка видео или звукового файла (с панелью управления). Атрибут тегов, n true LOOP = INFINITE AUTOSTART= false Вставка графики, видео, звука Практическая работа 2 Практическая работа 2 Материалы для работы Материалы для работы Если видео не отображается, возможно, неправильно указано имя файла, или его расширение, или файл отсутствует в нужной папке. Количество повторений видео или звукового клипа и непрерывное повторение соответственно. Автоматическое воспроизведение и воспроизведение при нажатии кнопки соответственно.

16 1515 Списки Есть 2 вида списков: ненумерованные (маркированные) и нумерованные. Ненумерованные списки: (Unordered List) – начало списка – конец списка. (List Item) – элемент списка. Атрибут тега DISC TYPE = CIRCLE SQUARE Определяет вид маркера Пример записи и результат действия тегов Создание списков и таблиц

17 Нумерованные списки: (Ordered List) – начало списка. – конец списка. (List Item) – элемент списка. Атрибуты тега 1 TYPE = A I … Определяет тип нумерации: арабскими цифрами, русскими буквами, римскими цифрами и т.д. Пример записи и результат действия тегов с различными значениями атрибутов Создание списков и таблиц Практическая работа 3 Практическая работа 3 Материалы для работы Материалы для работы

18 Таблицы – начало таблицы. – конец таблицы. – начало заголовка таблицы. – конец заголовка таблицы. Заголовок располагается прямо по центру относительно ширины таблицы. (Table Header) – начало заголовков столбцов или строк таблицы. – конец заголовков столбцов или строк таблицы. (Table Row) – начало строки таблицы. – конец строки таблицы. – начало ячейки таблицы. – конец ячейки таблицы. Пример записи и результат действия тегов с различными значениями атрибутов Создание списков и таблиц

19 Атрибуты тега WIDTH =ширина таблицы в пикселах или % BORDER =ширина границы таблицы в пикселах или % Если она равна нулю – границы становятся невидимы. CELLSPACING = ширина промежутков между ячейками в пикселах или % CELLPADDING = ширина промежутков между содержимым ячейки и её границами в пикселах или % Атрибуты тега,, Таблица может быть простой (пример на предыдущем слайде) или сложной, когда несколько строк или столбцов объединяются. ROWSPAN = количество объединяемых строк COLSPAN = количество объединяемых столбцов BGCOLOR = цвет фона заголовка, строки, ячейки Пример записи и результат действия тегов с различными значениями атрибутов Практическая работа 4 Практическая работа 4 Материалы для работы Материалы для работы Создание списков и таблиц

20 Бегущая строка – начало бегущей строки. – конец бегущей строки. Фрагмент текста, картинки или любые другие объекты между этими тегами будут двигаться так, как определят атрибуты. Атрибуты тега WIDTH = ширина области бегущей строки в пикселах или в % от высоты экрана BGCOLOR = название цвета или его код Определяет цвет фона бегущей строки. DIRECTION = LEFT RIGHT Определяет направление бегущей строки. Пример записи и результат действия тегов с различными значениями атрибутов Бегущая строка

21 n LOOP = INFINITE Определяет количество «прокруток» бегущей строки: при первом значении атрибута – n, при втором значении атрибута – бесконечно (по умолчанию). TOP ALIGN = MIDDLE BOTTOM Позволяет разместить текст в верхней, средней или нижней части области бегущей строки. SCROLL BEHAVIOR = SLADE ALTERNATE Определяет режим вывода («поведения») бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно. SCROLLAMOUNT = скорость перемещения текста или графики в строке [1…3000] HIGHT = высота бегущей строки (в пикселах или в % от высоты экрана ) Пример записи и результат действия тегов с различными значениями атрибутов Бегущая строка

22 Формат тега, создающего ссылку на другой документ: активный текст или изображение Если файл находится в другой папке, то нужно указывать путь к нему. Если создается ссылка на ресурс Интернета, то нужно указать его URL: активный текст или изображение Можно организовать сообщение по электронной почте активный текст или изображение Атрибуты тега для задания цвета ссылок LINK = цвет или код цвета Задает цвет ссылки. VLINK = цвет или код цвета Задает цвет просмотренной ссылки Пример записи и результат действия тегов с различными значениями атрибутов Создание ссылок ALINK = цвет или код цвета Задает цвет выбранной ссылки Практическая работа 5 Практическая работа 5 Материалы для работы Материалы для работы 1 1

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

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

25 Создание фреймов Атрибуты тега NAME = имя кадра Задает имя кадра. Это имя потом используется в качестве значения атрибута target в теге для того, чтобы документ, на который указывает ссылка, загружался в нужном кадре. Пример записи ссылок с атрибутом target. NORESIZE Означает запрет перемещения мышкой границы между кадрами. no FRAMEBORDER= yes Означает наличие или отсутствие границы между кадрами. 1 1 Практическая работа 7 Практическая работа 7 Материалы для работы Материалы для работы

26 25 Создание фреймов Фреймовую структуру можно создать также с помощью тегов для создания таблиц и тега Этот тег имеет такие же атрибуты, как и тег. Удобство состоит в том, что не надо сначала создавать в отдельном документе фреймовую структуру, а потом задавать содержимое каждого фрейма. Любая ячейка может быть объявлена фреймом, для которого можно задать имя для обновления его содержимого по ссылкам из других ячеек. Пример записи и результат действия тегов Практическая работа 8 Практическая работа 8 Материалы для работы Материалы для работы

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

28 27 Атрибуты тега alt = название области изображения-карты Это атрибут для задания текста, заменяющего изображение-карту, не является обязательным. TARGET= имя фрейма Определяет имя фрейма для загрузки документа, на который делается ссылка с данной области. Атрибут, определяющий форму области на карте: rect SHAPE = poly сircle point COORDS =x,y,x1,y1 Описывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего). COORDS =x,y,x1,y1… xn,yn Описывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника). COORDS =x,y,r Описывает координаты сircle (значения атрибута – координаты центра окружности и радиус). COORDS =x,y Описывает координаты точки point (значения атрибута – её координаты). Изображение-карта Определение координат областей для изображения-карты.

29 28 Более простой способ получить значения координат – воспользоваться Он устанавливается дополнительно и совместим со всеми версиями редактора Adobe Photoshop. Изображение-карта Определение координат областей для изображения-карты с помощью специального фильтра. специальным фильтром.

30 29 Удобно использовать изображение-карту, когда страница разделена на два фрейма. В одном фрейме можно поместить изображение-карту (например, справа), а в другом фрейме (например, слева) будет отображаться описание, соответствующее выделенной в данный момент области изображения. Пример записи и результат действия тегов Изображение-карта Практическая работа 9 Практическая работа 9 Материалы для работы Материалы для работы

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

32 3131 Для создания интерактивных Web- страниц, обеспечивающих обратную связь, используются специальные формы. Форма – это набор элементов, знакомых нам по диалоговым окнам, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем. Форма создается с помощью тега: Пример заполняемой формы: В пределах тега для создания разных полей используют теги, и с разными атрибутами, как показано в Примере. Создание форм Практическая работа 11 Практическая работа 11 Пример