Соглашение об авторских правахЭтот материал предназначен исключительно для зарегистрированных в Интернет-центре КубГУ участников курсов, которые имеют право использовать его для самообучения, но не имеют права передавать его или его части другим
Слайд 1HTML HyperText Markup Language (Язык разметки гипертекста) Торовец Н.Г. natalia@kubsu.ru 2008 г. Курсы «Современные технологии
программирования»
Слайд 2Соглашение об авторских правах Этот материал предназначен исключительно для зарегистрированных в
Интернет-центре КубГУ участников курсов, которые имеют право использовать его для
самообучения, но не имеют права передавать его или его части другим лицам или использовать в коммерческих целях. Воспроизведение материала лекции любым способом возможно только с письменного разрешения автора.
Слайд 3Что такое HTML? HTML - приложение SGML. Соответствует международному стандарту
ISO 8879.
HTML-документ - ASCII-файл, доступный для просмотра и редактирования
в любом текстовом редакторе. Отличием от обычного текстового файла является наличие в HTML-документах специальных команд - тэгов, которые указывают правила форматирования документа
DTD (строгое определение) - все элементы и атрибуты, не являющиеся нежелательными и не использующиеся в документах с кадрами. : HTML 4.0 Transitional DTD (переходное определение) - все, что включено в строгое DTD, а также нежелательные элементы и атрибуты : HTML 4.0 Frameset DTD (определение для кадров) - все, что включено в переходное DTD, а также кадры. :
Слайд 8Раздел заголовков Элемент HEAD содержит информацию о текущем документе, такую как
заголовок (TITLE ), ключевые слова (META), которые могут использоваться поисковыми
машинами, и другие данные, которые не считаются содержимым документа. Каждый документ HTML должен иметь элемент TITLE в разделеHEAD.
Атрибуты META: name – имя свойства; content – значение свойства; scheme - имя схеы; http-equiv – (может применяться вместо name) используется серверами HTTP для сбора информации для заголовков сообщений ответов HTTP; lang – язык; dir – направление текста.
Слайд 11Тело документа. Атрибуты Нежелательные: background - фоновое изображение. text - цвет текста.
link - цвет текста не посещённых гипертекстовых ссылок. vlink - цвет
текста посещённых ссылок. alink - цвет текста активной (текущей) ссылки.
Определяемые в любом другом месте: id, class - идентификаторы в пределах документа; lang - информация о языке; dir - направление текста; title - заголовок элементаж; style - встроенная информация о стиле; bgcolor - цвет фона.
Слайд 13Способы задания пути background="http://www.arhiv.ru/fp_0008.gif" - рисунок с другого сайта; background="C:/users/arhiv.www/fp_0008.gif" - рисунок
на вашем компьютере; background="pic/fp_0008.gif" - рисунок из директории pic; background="../fp_0008.gif" -
рисунок из родительской директории; background="fp_0008.gif" - рисунок из той же директории;
1,2 - абсолютный путь (жестко задаются, привязаны к определенному сайту или компьютеру) 3,4,5 - относительный путь (рекомендуются, хорошо переносимы на другие компьютеры) При размещении документа в интернете регистр букв имени имеет значение.
цвета желательно использовать таблицы стилей. Не следует использовать комбинации цветов, вызывающие
проблемы у пользователей. При использовании изображения в качестве фона или установлении цвета фона, нужно установить и цвета текста. Цвета, указанные в элементах BODYи FONT и в bgcolor в таблицах выгладят по-разному на разных платформах. При возможности нужно принимать общие соглашения.
Слайд 15Фразовые элементы (1/4) BLOCKQUOTE – предназначен для длинных цитат, выделяются отступами
(содержимое уровня блока). Q предназначен для коротких цитат (встроенное содержимое), в
которых не нужно разбиение на абзацы, выделяется кавычками. SUB – нижний индекс. SUP – верхний индекс.
Слайд 16Фразовые элементы (2/4) EM - Выделение. STRONG - Более сильное
выделение. CITE - Цитата или ссылка на другие ресурсы. DFN -
Определение вложенного термина. CODE - Компьютерный код. SAMP - Пример программ, сценариев и т.д. KBD - Текст, который должен ввести пользователь. VAR - Экземпляр переменной или аргумента программы. ABBR - Сокращенная форма . ACRONYM - Акроним (например, WAC, радар и т.д.).
Слайд 28Слои Слой - это HTML-контейнер (тег DIV или SPAN), в который
можно помещать желаемое содержимое для последующего точного позиционирования на странице.
Атрибуты: id, class (идентификаторы в пределах документа); lang (информация о языке); dir (направление текста); title (заголовок элемента); style (встроенная информация о стиле); align (выравнивание).
Преимущества: Значительное упрощение построения страниц; Упрощение добавления, исправления содержимого и изменения внешнего вида. Недостатки: Плохая переносимость подобных страниц браузерами устаревшей конструкции. Некоторые недостатки связаны с CSS
Слайд 30Формы (1/5) Форма HTML - это раздел документа, в котором содержатся
обычная информация, разметка и специальные элементы, называемые управляющими элементами(флажки, кнопки
с зависимой фиксацией, меню и т.д.), а также метки этих управляющих элементов.
- определяет форму области, coords - определяет положение формы на экране (число и порядок значений зависят от определенной формы), nohref - указывает, что с этой областью ссылка не связана, usemap - связывает навигационную карту с элементом. Навигационная карта определяется с помощью элемента MAP. Значение атрибута usemap должно совпадать со значением атрибута name связанного элемента MAP. name, id, class, lang, dir, title, style, name, alе, href, tabindex, accesskey.
"div" и "span", но отличающихся семантически ("nav", "header" и "footer"
) – логическое разделение контента, помощь в индексировании документа поисковыми системами и изменения представления на устройствах с небольшими экранами существенно расширены мультимедиа возможности (тэги "audio" и "video "). Отличия от HTML 4: Новые правила парсинга; Новые элементы: section, video, progress, nav, meter, time, aside, canvas; Новые атрибуты полей ввода (Input): time, email, url; Новые атрибуты: ping, charset, async; Глобальные атрибуты применимые для всех элементов документа: id, tabindex, repeat; * Прекращена поддержка элементов: center, font, strike.
Слайд 41XHTML XHTML - EXtensible HyperText Markup Language - Расширенный язык разметки
набраны в нижнем регистре (строчными символами). Значения любых параметров необходимо заключать в кавычки. Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег. Должна соблюдаться правильная вложенность тегов. Нельзя использовать сокращенные атрибуты тегов. Вместо параметра name необходимо указывать атрибут id. Следует определять DTD (document type definition, описание типа документа) с помощью тега .
Слайд 42Микроформаты Позволяют включать дополнительную информацию для поисковых роботов. Существующие стандарты (X)HTML
позволяют включать семантические пометки при помощи следующих HTML атрибутов: class,
hCalendar - для событий hCard - для контактной информации, включая:
adr - для почтовых адресов geo - для географических координат (широта;долгота) hReview
- для обзоров hResume - для резюме rel-directory - для распределенного создания каталогов rel-tag - для децентрализованных пометок (тэгов), см. также фолксономия. xFolk - для помеченных ссылок XFN - для социальный взаимоотношений XOXO - для списков, microformats.org – микроформаты.
дескрипторов и псевдоклассов с двух сторон ограничиваются одинарными кавычками. В
CSS значения с двух сторон ограничиваются одинарными кавычками. Имена элементов языка документа пишутся прописными буквами. Имена атрибутов языка документа пишутся строчными буквами и с двух сторон ограничиваются двойными кавычками.
Слайд 47Способы применения CSS переопределение стиля в элементе разметки размещение описания
стиля в заголовке документа в элементе STYLE размещение ссылки на
внешнее описание через элемент LINK импорт описания стиля в документ
стандартных элементов HTML-разметки произвольных классов (селектор class) HTML-объектов (селектор id)
Слайд 50Ссылка на внешнее описание Осуществляется при помощи элемента LINK, который
размещают в элементе HEAD.
Rel обязан
иметь значение "stylesheet". Type может принимать значения: "text/css" или "text/javascript“. Атрибут href задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css
используется по умолчанию. a текста вслух. Сюда, например, можно отнести речевые
браузеры. braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей. handheld - Наладонные компьютеры и аналогичные им аппараты. print - Печатающие устройства вроде принтера. projection - Проектор. screen - Экран монитора. tv - Телевизор.
Слайд 55Синтаксис Синтаксис описания стилей в общем виде представляется следующим образом: selector[, selector[, ...]] {attribute:value;[atribute:value;...]}
или
selector selector [selector ...] {attribute:value;[atribute:value;...]}
/*Перечисление*/ /*Иерархия*/ В качестве селектора можно использовать: имя элемента разметки, имя класса
и идентификатор объекта на HTML-странице
Комментарии: ~ - отдельных свойств, /* */ - текстовый блок
(селекторов) определяют применение правил, задающих стиль, к элементам в дереве
документа. Если определенный элемент удовлетворяет всем критериям, устанавливаемым шаблоном, то соответствующий селектор сопоставляется данному элементу.
Чувствительность имен элементов языка документа к регистру определяется языком документа. В HTML-документах имена элементов не зависят от регистра.
Слайд 74Перемещаемые объекты (1/3) Следующее правило перемещает все блоки, порожденные элементом IMG
с class="icon", влево (и устанавливает значение ширины поля равным нулю): IMG.icon
{ float: left; margin-left: 0; } Рассмотрим следующий исходный HTML-документ и таблицу стилей: Пример перемещаемого объекта
Пример текста, у которого нет другого...
Форматирование было бы точно таким же, если бы документ выглядел так:
Некоторый произвольный текст, у которого нет другого... Объясняется это тем, что содержимое, находящееся слева от перемещаемого объекта, заменяется им, а само отображается справа от него.
Слайд 75Перемещаемые объекты (2/3) Ниже показано, что происходит при наложении перемещаемого объекта
на границы элементов нормального потока. Перемещаемое изображение затеняет границы перекрываемых
им структурных блоков.
Слайд 76Перемещаемые объекты (3/3) В следующем примере проиллюстрировано использование свойства 'clear', позволяющего
запрещать перемещение содержимого вдоль относительно объекта. Правило P { clear:
left } может привести к следующему форматированию:
В обоих абзацах установлено свойство 'clear: left', при действии которого второй абзац "принудительным образом" располагается ниже перемещаемого объекта. Для этого увеличивается ширина его верхнего поля
Слайд 77Абсолютное позиционирование. Фиксированное позиционирование
Разработчики могут использовать фиксированное позиционирование для создания
презентации в виде совокупности кадров. Рассмотрим один из примеров такой
презентации:
Слайд 78Сравнение моделей, описывающих нормальный поток, перемещаемые объекты и абсолютное позиционирование
Слайд 79Нормальный поток Рассмотрим следующие объявления языка CSS "outer" и "inner", которые
не вносят изменений в нормальный поток блоков: #outer { color: red
} #inner { color: blue } Элемент P заключает в себе все содержимое строки: безымянный текст строки и два элемента SPAN. Поэтому все содержимое будет отображаться в контексте строкового форматирования внутри контейнера, порожденного элементом P. В результате получится следующее:
Слайд 80Относительное позиционирование Чтобы пронаблюдать результаты использования относительного позиционирования, можно воспользоваться следующими
{ position: relative; top: 12px; color: blue } Текст обычным образом достигает внешнего элемента. Затем внешний текст принимает те размеры и то положение в конце строки 1, которые назначаются ему в нормальном потоке. Далее строковые блоки, включающие текст (занимающий три строки), перемещаются как единое целое на '-12px'(вверх). Содержимое внутреннего элемента, выступающего в роли дочернего элемента внешнего, будет отображено обычным образом после слов "внешнего текста" (в строке 1.5). Однако сам внутренний текст смещается относительно внешнего на '12px' (вниз) на свое нормальное положение в строке 2. Обратите внимание, что относительное позиционирование внешнего элемента не оказывает никакого влияния на текст, следующий за внешним элементом.
Следует заметить, что если бы внешний элемент был смещен на '-24px', то произошло бы наложение содержимого внешнего и основного элементов.
Слайд 81Перемещение блоков (1/3) Рассмотрим результат перемещения текста внутреннего элемента к правому
краю с использованием следующих правил: #outer { color: red }
#inner { float: right; width: 130px; color: blue } Текст обычным образом выводится до внутреннего блока, который изымается из нормального потока и перемещается к правому полю (значение 'width' его ширины было указано явно). Линейные блоки, находящиеся слева от перемещаемого объекта, укорачиваются, и оставшаяся часть текста документа отображается в них.
Слайд 82Перемещение блоков (2/3) Чтобы продемонстрировать эффективность работы свойства 'clear', добавим в
пример сестринский элемент:
Сравнение схем позиционирования II
Начало основного текста. Начало внешнего текста. Внутренний текст. Содержимое сестринского элемента. Конец внешнего текста. Конец основного текста.
Следующие правила: #inner { float: right; width: 130px; color: blue } #sibling { color: red } как и ранее приводят к перемещению внутреннего блока к правому краю, а оставшаяся часть текста документа перемещается на освободившееся место:
Слайд 83Перемещение блоков (3/3) Однако если для свойства 'clear' сестринского элемента установлено
значение 'right' (т.е. генерируемый сестринский блок не располагается следом за
перемещаемым блоком справа), то сестринский текст будет выводиться ниже перемещаемого объекта: #inner { float: right; width: 130px; color: blue } #sibling { clear: right; color: red }
Слайд 84Абсолютное позиционирование (1/4) И наконец, рассмотрим результат применения модели абсолютного позиционирования.
Рассмотрим следующие объявления outer и inner: #outer { position: absolute; top:
200px; left: 200px; width: 200px; color: red; } #inner { color: blue } В результате верхняя часть внешнего блока размещается относительно контейнера. Контейнер для размещаемого блока назначается ближайшим размещенным предком (или, в случае отсутствия такового, начальным контейнером, как в данном примере). Верхняя сторона внешнего блока находится на '200px' ниже верхней стороны контейнера, а левая сторона на '200px' правее его левой стороны. Дочерний блок внешнего блока перемещается обычным образом относительно его родительского блока.
Слайд 85Абсолютное позиционирование (2/4) В следующем примере показан абсолютно позиционируемый блок, дочерний
по отношению к относительно позиционируемому блоку. Хотя родительский внешний блок
не смещен, присвоение его свойству 'position' значения 'relative' означает, что он может служить контейнером для позиционируемых потомков. Т.к. внешний блок является строковым блоком, разбиваемым на сегменты, распределяемые по нескольким строкам, то в качестве нулевой точки отсчета для смещения 'top' блок является строковым блоком, разбиваемым на сегменты, распределяемые по нескольким строкам, то в качестве нулевой точки отсчета для смещения 'top' и 'left' выступают верхний и левый края первого сегмента (изображенные на рисунке толстыми пунктирными линиями). #outer { position: relative; color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; } В результате получим:
Слайд 86Абсолютное позиционирование (3/4) Если внешний блок не позиционируется, т.е. используются правила #outer
{ color: red } #inner { position: absolute; top: 200px;
left: -100px; height: 130px; width: 130px; color: blue; } то контейнером для внутреннего блока становится начальный контейнер (как в данном примере). На следующем рисунке показано окончательное расположение внутреннего блока.
Слайд 87Абсолютное позиционирование (4/4) Относительное и абсолютное позиционирование может использоваться для вставки
маркеров исправлений, как показано в следующем примере. Документ
relative; margin-right: 10px; left: 10px;"> I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS -- word. приведет к следующему представлению:
Сначала позиционирование абзаца (стороны контейнера которого показаны на рисунке) осуществляется согласно модели нормального потока. Затем он смещается на '10px' относительно левого края контейнера (таким образом, правое поле размером в '10px' было предусмотрено для компенсации этого смещения). Два тире, выполняющие роль маркеров исправлений, изымаются из потока и помещаются на текущей строке (с помощью свойства 'top: auto') на расстоянии '-1em' от левого края контейнера (назначенного элементом P в момент его окончательного позиционирования). В результате создается эффект перемещения маркеров исправлений влево по текущей строке.
Слайд 88Перспективы. CSS3 Некоторые средства, предусмотренные в CSS3:
• Селекторы нового типа,
позволяющие форматировать объекты в зависимости от выполнения некоторых условий (например,
возможность применять стиль только к первому абзацу, следующему после заголовка).
• Улучшенные средства управление цветом, включая гамма-коррекцию.
• Возможность отображения данных в виде нескольких колонок.
• Новые свойства, предназначенные для создания пользовательского интерфейса.
• Свойства, ориентированные на работу с мобильными устройствами.
• Расширенные средства поддержки масштабируемой векторной графики (Scalable Vector Graphics - SVG).
• Многочисленные новшества, предназначенные для управления размещением фоновых изображений, отображения текстов, форматирования строк и т.д.
Слайд 93Узлы DOM DOM:element – включает набор свойств и методов для всех
элементов документа. DOM:window - объект window и все что с
ним связано. DOM:document – свойства и методы объекта "документ". DOM:event – набор свойств и методов событий, которые наступают при возникновении какого-либо события вышеперечисленных объектов. DOM:range – доступ к методам и свойствам областей. DOM:style – изменения свойств объектов. DOM:selection – работа с выделенными фрагментами текста, изображений.
Слайд 106Строковые переменные Создать объект String можно одним из нескольких способов:
присваивание значения при помощи конструктора String(); использование оператора var и
оператора присваивания для создания и инициализации строки; создание и инициализация строковой переменной в операторе присваивания; преобразование переменной числового типа путем сложения со строковым типом (10+"" ==> "10");
Слайд 108Условные операторы Условный оператор if . . . else:
if (condition); {
Программный блок1} [ else { программный блок2 }]
="JavaScript">
today = new date();
minutes = today.getMinutes();
if (minutes >=0 && minutes <= 30)
document.write(" Это написано белым на синем");
else
document.write(" Это написано красным на черном");
="JavaScript">
var today = new date();
var secs = today.getSeconds();
(secs >=0 &&
secs <= 30) ?
document.write(" Это написано белым на синем") :
(secs >=31 && secs <= 50) ?
document.write(" Это написано красным на черном"):
document.write(" Это написано красным на черном");
Обращение к аргументам функции при помощи массива argunents[]
function showargs(a, b, c) {
arglist = "";
for (var n=0; n <= arguments.length; n++) {
arglist += n +"." + arguments[n] + "\n";}
alert(arglist); }
showargs("java","script")
Слайд 111Объектная модель JavaScript Все объекты можно разделить на три группы:
Объекты браузера (зависимые от браузера объекты: window (окно), location (местоположение)
и history (история)). Внутренние, или встроенные, объекты языка JavaScript (включают простые типы данных, такие как строки (string), математические константы (math), дата (date) и другие) Объекты, связанные с тегами языка HTML (соответствуют тегам, которые формируют текущий документ; включают такие элементы как гиперсвязи и формы).
Слайд 112Методы и свойства объектов С объектами JavaScript связаны методы, которые позволяют
управлять этими объектами, а также, в некоторых случаях, менять их
содержимое. Кроме того, в языке JavaScript имеется возможность создавать свои методы объектов. При использовании метода объекта, нужно перед именем метода указать имя объекта, к которому он принадлежит.
document.write()
write()
Все стандартные объекты языка JS имеют свойства. Например, bgColor объекта document:
вывод на экран окна сообщения с кнопками Yes и No (возвращает true или false, в зависимости от нажатой кнопки); prompt() - выводит на экран диалоговое окно с полем ввода. Метод setTimeout() устанавливает в текущем окне обработку событий, связанных с таймером; clearTimeout() отменяет обработку таких событий.
Слайд 114DOM
(продолжение) Document Object Model (Объектная модель документа)
Слайд 115Навигация по дереву документа Доступ к конкретному элементу (по id) var
oList = document.getElementById("components") HTML CSS Javascript
nodeName (только для чтения) возвращает имя HTML тэга, которому соответствует данный узел, например,P для параграфа илиUL для ненумерованного списка. Для узлов-атрибутов nodeName возвращает название атрибута, а для тестовых узлов возвращает#text.
nodeValue (только текстовые узлы) - хранит содержание текстового узла. Для элементов возвращает null, а для атрибутов -- значение атрибута
С помощью атрибута onXXX, доступного в Java Script: window.onload = xyz; С помощью методов добавления событий: attachEvent() – для IE (используется обозначение события “onXXX”);
Уэнц 2008 Для IE: detachEvent() Для всех остальных браузеров: removeEventListner()
Слайд 124Всплытие и перехват событий событий В IE происходит всплытие событий (событие
запускается сначала из того элемента, где оно наступает, а затем
оно всплывает вверх по структуре модели DOM). W3C (Mozilla, Safari, Konqueror, Opera) события сначала погружаются вниз до целевого элемента, а затем всплывают вверх.
При вводе процесса перехватывания событий в качестве третьего параметра addEventListener можно указать порядок перехвата события.
После перехвата события, его погружение можно прекратить: В IE – window.event.cancelBuble = false; В модели W3C – e.stopPropagation.
Слайд 132Что дальше? JavaScript 2.0 CSS 3.0 HTML 5.0 XSLT-преобразование (из xml в html)
Слайд 133Задание Создать форму, в которой имеется:
имя пользователя
- e-mail адрес
- URL
-
сообщение. прикреплённый файл
Так же указывается сколько символов в комментарии
можно ещё написать. При нажатии на «Отправить», проверяется правильно ли заполнена форма (поля, помеченные * должны быть заполнены). Если форма заполнена неправильно, то выдаётся соответствующее сообщение. Иначе, рядом выводится введённая информация, см. далее.
Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания: