- •Информационные технологии
- •Представление работ
- •Введение
- •Раздел 1. Создание структуры и представления web-документа
- •Тема 1. Язык разметки web-страницы
- •Роль html
- •Немного истории
- •Особенности html5
- •Что нужно знать об html5
- •Элементы языка html
- •Текстовые элементы html
- •Стилевые элементы
- •Теги, определяющие разделы документа
- •Интерактивные элементы
- •Вставляемый контент
- •Добавление видео и звука
- •Спецсимволы
- •Создание гиперссылок
- •Организация ссылок на область документа
- •Элементы таблиц
- •Группы строк
- •Столбцы и группы столбцов
- •Текстовое поле
- •Поле пароля
- •Скрытое поле
- •Переключатели или радиокнопки
- •Выбор файла
- •Выбор цвета
- •Календарь и время
- •Поля с проверкой
- •Ползунок
- •Поле для ввода номера телефона
- •Поле поиска
- •Атрибуты элемента input
- •Многострочные текстовые поля
- •Создание выпадающего списка при помощи select
- •Надписи
- •Группа элементов
- •Атрибуты accesskey и tabindex
- •Генерация ключей для формы
- •Мера в пределах диапазона
- •Область вывода результатов вычислений
- •Индикатор выполнения
- •Пример использования тегов форматирования
- •Как сделать хороший html – документ
- •Тема 2. Каскадные таблицы стилей и новое в css3
- •Стили css
- •Новое в css3
- •Преимущества css
- •Задание стиля
- •Способы добавления таблиц стилей на Web-страницы
- •Наследование
- •Контекстные селекторы
- •Использование классов
- •.Имя класса {свойство: значение;}
- •Селектор id
- •Группировка
- •Псевдоклассы
- •Другие псевдоклассы
- •Селекторы атрибутов
- •Вычисление специфичности (приоритета) селекторов
- •Единицы измерения, используемые в каскадных таблицах стилей
- •Способы задания цвета
- •Тема 3. Свойства сss
- •Цвета и фоны
- •Объединение свойств фона
- •Использование градиентов
- •Указание угла наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg:
- •Блоковая модель
- •Размещение элементов на странице
- •Работа со шрифтами
- •Работа с текстом
- •Тема 4. Проектирование web-приложений
- •Сбор требований (брифинг)
- •Прототипирование сайта(разработка макета)
- •Зачем нужны прототипы
- •Данные, лежащие в основе прототипа
- •Виды прототипов
- •2) Мокапы (статичные макеты)
- •Разработка макета сайта с использованием сервиса draw.Io на примере макета сайта для дорожной клинической больницы
- •Задание 1
- •Задание 2
- •Задание 3
- •Задание 4
- •Задание 5
- •Задание 6
- •Задание 7
- •Раздел 2. Создание уровня поведения web-документа Тема 1. Основы Java Script Основные сведения о языке
- •Добавление JavaScript кода в html документы
- •Методы для ввода и вывода данных
- •Типы данных и значения
- •Операторы языка
- •Функции в JavaScript
- •Инструкции в Java Script
- •If (условие)
- •If (первое_условие) {
- •If (условие_2){ инструкции условного оператора;
- •Объекты
- •Объект String
- •Массивы
- •Объект Date
- •Объект Math
- •Таймеры
- •If (confirm("Остановить выполнение ?"))
- •Тема 2. Объектная модель документа
- •Построение дерева dom
- •Отображение дерева dom в различных браузерах
- •Объекты, методы и свойства
- •Объект Document
- •Свойства объекта document
- •Методы объекта document
- •Работа с Cookie
- •Методы и свойства dom
- •Метод getElementById(id)
- •Свойство innerHtml
- •Изменение свойств css объекта dom
- •Создание сценариев
- •Тема 3. Использование jQuery и Ajax
- •Начало работы с jQuery
- •Порядок локальной установки jQuery
- •Подключение библиотеки jQuery из сети cdn
- •Подключение с использованием менеджера пакетов bower.Io
- •Установка Bower
- •Работа с функциями jQuery
- •Поиск элементов с использованием jQuery
- •Поиск элементов по атрибутам
- •Фильтрация элементов
- •Выбор нечетных элементов
- •Выбор элемента по индексу. Метод eq()
- •Выделение невидимых элементов
- •Фильтры элементов форм
- •События в jQuery
- •Объект event
- •Определение типа события
- •Время запуска события
- •Обработчики событий jQuery
- •Обработчики событий jQuery в действии
- •Управление обработчиками событий
- •События документа/окна
- •События форм
- •Работа с деревом dom
- •Добавление новых элементов
- •Удаление элементов
- •Методы для работы с css
- •Визуальные эффекты jQuery
- •Методы hide() и show()
- •Набор методов семейства slide
- •Метод animate()
- •Навигация по дереву dom
- •Метод children()
- •Метод closest()
- •Метод parents()
- •Методы для работы с элементами-близнецами
- •Метод siblings()
- •Метод next()
- •Подключение jQuery ui
- •Методы взаимодействия
- •Перетаскиваемые элементы
- •Области для перетаскиваемых элементов
- •Растягиваемые элементы
- •Выделяемые элементы
- •Сортируемые элементы
- •Виджеты jQuery ui
- •Виджет accordion
- •Виджет autocomplete
- •Виджет datepicker
- •Оформление кнопок
- •Виджет tabs
- •Диалоговые окна
- •Виджет progressbar
- •Виджет slider
- •Практические задания
- •Этапы выполнения ajax запроса
- •Создание экземпляра объекта xmlHttpRequest
- •Свойства объекта xmlHttpRequest
- •Отправка запроса на сервер
- •Метод send()
- •Что выбрать: метод get или метод post?
- •Определение состояния готовности сервера
- •Событие onreadystatechange
- •Принятие ответа сервера
- •Свойство responseText
- •Свойство responseXml
- •Формат json
- •Что выбрать: json или xml?
- •Написание ajax запросов с помощью jQuery
- •Сопровождающие функции
- •Метод .AjaxSend()
- •Метод ajaxComplete()
- •Методы ajaxSuccess и ajaxError
- •Пример создания всплывающих подсказок с использованием технологии ajax
- •Библиотека Prototype
Индикатор выполнения
Тег <progress> используется для представления "индикатора выполнения", отображающего, какой процент задачи уже выполнен. Изменения в индикаторе прогресса производятся с помощью скриптов.
Пример.
<progress value="38" max="100"></progress>
Итак, рассмотрены все теги, составляющие структурный уровень web-документа, в том числе появившиеся в спецификации HTML5. В таблице 4 перечислены все теги HTML.
Таблица 4 - Полный список тегов HTML
HTML тег |
Функция |
<!DOCTYPE> |
Объявление типа создаваемого документа. |
<html> |
Определяет границы html-документа. Весь код страницы размещается внутри данного тега. |
<hеаd> |
Определяет область заголовка, используется для указания браузеру, как следует обрабатывать веб-страницу. Не имеет собственного контента, служит контейнером для элементов, имеющих служебные функции. |
<titlе> |
В этом теге содержится название страницы, отображаемое на ярлыке страницы в окне браузера. |
<meta> |
Используется для предоставления информации внешнему окружению, а также для хранения дополнительной информации о документе, которая может использоваться браузерами для обработки страницы, а поисковыми системами - для индексации. |
<base> |
Задает базовый URL – адрес. Относительно него будут вычисляться все относительные адреса, присутствующие в документе. |
<body> |
Служит для размещения тела документа, которое будет отображаться в окне браузера. |
<div> |
Абстрактный блоковый тег. Слежит для выделения фрагментов текста для позиионирования и форматирования с помощью стилей CSS. |
<hеаdеr> |
Определяет заголовочную часть раздела или страницы. |
<footer> |
Определяет финальную часть раздела или страницы. |
<p> |
Определяет содержимое абзаца. |
<pre> |
Сохраняет внутри себя исходное форматирование, т.е. сохраняет пробельные символы и переносы строк. |
<!–…–> |
Добавление комментария. |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
Добавляет шесть уровней заголовков. |
<address> |
Служит для размещения контактов автора или владельца документа. |
<article> |
Служит для указания логически завершенного независимого блока документа: комментариев, новостей,сообщений и т.д. |
<blockquote> |
Используется для размещения больших цитат. |
<aside> |
Служит для размещения второстепенног или связанного контента. |
<details> |
Служит для размещения дополнительных сведений, которые по желанию пользователя могут быть просмотрены или скрыты. |
<dialog> |
Применяется для создания на странице диалоговых окон. |
<figure> |
Применяется для группировки элементов медийного контента, например, изображения и подписи к нему. |
<figcaption> |
Задает подпись для содержимого тега <figure>. |
<main> |
Служит для размещения основного содержимого документа, которое не должно содержать контента, повторяющегося в других частях текущего документа. |
<menu> |
Служит при создании списка команд меню для контекстных меню, панелей инструментов и т.д. |
<menuitem> |
Служит для создания пункта меню или команды, которую пользователь может выбрать в всплывающем меню. |
<section> |
Служит для определния логической области, раздела страницы. |
<iframe> |
Служит для создания в текущем html-документе встроенного фрейма, в который может быть загружен другой документ. |
<a> |
Тег для создания гиперссылок. |
<br> |
Перенос строки. |
<hr> |
Служит для создания горизонтальной линии на веб-странице. |
<bdi> |
Служит для изоляции части текста, которая можетт быть отформатирована в направлении, отличающемся отнаправления текста за его пределами. |
<bdo> |
Служит для задания направления вывода текста, например, для языков, в которых текст размещается происходит справа налево. |
<abbr> |
Служит для размещения аббревиатуры. Полное наименование можно указать как значение атрибута title. |
<cite> |
Служит для размещения маленькой цитаты или сноски. |
<code> |
Служит для размещения фрагмента программного кода. |
<del> |
Служит для размещения текста, помечаемого как удаленный. |
<dfn> |
Служит для размещения определения. |
<em> |
Служит для выделения важного фрагмента текста. |
<q> |
Служит для указания краткой цитаты. |
<rp> |
Если браузер не поддерживает тег <ruby>, то для вывода текста используется данный тег. |
<rt> |
Для типографики Восточной Азии снизу или сверху от символов, заключенных в элементе <ruby>, добавляет краткую характеристику. |
<ruby> |
Используется для показа пояснения Восточно-Азиатских символов. |
<wbr> |
Может указывать браузеру возможное размещение места разрыва в длинных строках. |
<sup> |
Задает надстрочный индекс. |
<sub> |
Задает подстрочный индекс. |
<samp> |
Предназначен для вывода текста, являющегося результатом выполнения или скрипта или программного кода, обычно отображается в моноширинном шрифте. |
<small> |
Текст, заключенный в данный тег, отображается шрифтом размера меньшего, чем текущий. |
<span> |
Абстрактный внутристрочный тег. Позволяет отделить часть строки и форматировать текст внутри другого элемента. |
<strong> |
Обозначает важный текст, выводится по умолчанию полужирным шрифтом. |
<var> |
Позволяет выделять имена переменных в тексте программы. |
<summary> |
Служит для размещения видимого заголовка для тега <details>. На странице виден как закрашенный треугольник, щелкнув по которому пользователь может просмотреть допольнительную информацию. |
<ins> |
Служит для определения вставленного (добавленного) в документ текста. |
<kbd> |
Текст, введенный с клавиатуры. |
<mark> |
Выделенный текст. |
<nav> |
Область основных навигационных ссылок сайта. |
<b> |
Обозначает полужирный шрифт. |
<i> |
Обозначает курсив. |
<s> |
Текст отображается перечеркнутым. |
<u> |
Текст отображается подчеркнутым. |
<ol> |
Задает упорядоченный, или нумерованный, список. |
<ul> |
Создает неупорядоченный, или маркированный,список. |
<li> |
Определяет пункт нумерованного или маркированного списка. |
<dl> |
Задает список определений, служит контейнером для пар терминов и их определений. |
<dt> |
Тег для размещения термина. |
<dd> |
Тег для текста описания термина, размещенного в <dt>. |
<table> |
Тег служит для создания таблицы. |
<caption> |
Заголовок таблицы. Располагается сразу после <table>. |
<tr> |
Строка таблицы. |
<th> |
Определяет заголовочную ячейку таблицы. |
<td> |
Определяет обычную ячейку таблицы. |
<thead> |
Определяет группу строк заголовочной части таблицы. |
<tbody> |
Определяет группу строк тела таблицы. |
<tfoot> |
Определяет группу строк нижней части таблицы. |
<col> |
Определяет столбцы таблицы. |
<colgroup> |
Определяет группу столбцов. |
<form> |
Создает форму. |
<input> |
Служит для создания элементов формы. |
<datalist> |
Позволяет задать содержимое выпадающего списка для элемента <input>. |
<textarea> |
Создает многострочные текстовые для ввода. |
<select> |
Поле со списком для формы. |
<option> |
Создает пункт раскрывающегося списка. |
<optgroup> |
Создает контейнер для пунктов <option> раскрывающегося списка. |
<button> |
Служит для создания кнопки. Внутрь тега можно помещать как текст, так и изображение. |
<label> |
Используется для добавления текстовой метки для элемента <input>. |
<fieldset> |
Позволяет визуально отделить группу элементов в форме, рисуя вокруг них рамку. |
<legend> |
Позволяет создать заголовок для группы элементов формы, размещенных внутри элемента <fieldset>. |
<progress> |
Задает элемент для определения хода выполнения задачи. |
<meter> |
Позволяет задать величину значения в заданном диапазоне. |
<output> |
Поле для вывода результата вычисления, обычно выполняемого с помощью скриптов. |
<time> |
Поле для вывода даты/времени. |
<keygen> |
Служит для генерации пары ключей – закрытого и открытого внутри тега <form>. При отправке формы закрытый ключ хранится локально, а открытый ключ отсылается на сервер. |
<img> |
Позволяет встраивать изображения на web-страницу. |
<area> |
Позволяет задать внутри изображения-карты активную область. Данный тег всегда располагается внутри <map>. |
<map> |
Позволяет определить изображения-карты с активной областью. |
<object> |
Используется для встраивания элементов мультимедиа в веб-страниицу : видео, аудио, элементов ActiveX, Java-апплетов, PDF, Flash).Для передачи дополнительных параметров можно поместить в <object> тег <param>. |
<param> |
Служит для передачи дополнительных параметров объекта. |
<embed> |
Служит для встраивания внешнего интерактивного контента или плагина. |
<audio> |
Позволяет добавить звук на web-страницу. |
<video> |
Позволяет добавить видео на web-страницу. |
<source> |
Позволяет указать источник файлов для элементов <video> и <audio>. |
<track> |
Позволяет задать субтитры для элементов <video> и <audio>. |
<canvas> |
Добавляет на страницу контейнер для отрисовки графики с помощью скриптов, обычно используется JavaScript. |
Подведем итоги
Мы рассмотрели вопросы, связанные с созданием структуры веб-документа. Ознакомившись с основными сведениями о языках разметки, рассмотрели элементы HTML, в том числе входящие в спецификацию HTML5, их атрибуты и особенности использования.
Практика
Создать web-страницу, используя нужные теги, со следующим текстом: