Разделы презентаций


Базовый HTML

Содержание

Соглашение об авторских правахЭтот материал предназначен исключительно для зарегистрированных в Интернет-центре КубГУ участников курсов, которые имеют право использовать его для самообучения, но не имеют права передавать его или его части другим

Слайды и текст этой презентации

Слайд 1HTML
HyperText Markup Language
(Язык разметки гипертекста)
Торовец Н.Г.
natalia@kubsu.ru
2008 г.
Курсы
«Современные технологии

программирования»

HTMLHyperText Markup Language (Язык разметки гипертекста)Торовец Н.Г.natalia@kubsu.ru2008 г.Курсы «Современные технологии программирования»

Слайд 2Соглашение об авторских правах
Этот материал предназначен исключительно для зарегистрированных в

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

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

© Торовец Н.Г. 2008

Соглашение об авторских правахЭтот материал предназначен исключительно для зарегистрированных в Интернет-центре КубГУ участников курсов, которые имеют право

Слайд 3Что такое HTML?
HTML - приложение SGML. Соответствует международному стандарту

ISO 8879.

HTML-документ - ASCII-файл, доступный для просмотра и редактирования

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

© www.w3c.org 2008

Что такое HTML? HTML - приложение SGML. Соответствует международному стандарту ISO 8879. HTML-документ - ASCII-файл, доступный для

Слайд 4История и стандарты HTML
Язык HTML был разработан британским учёным Тимом

Бернерсом-Ли приблизительно в 1991-1992 годах.
© www.w3c.org 2008

История и стандарты HTMLЯзык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991-1992 годах. © www.w3c.org

Слайд 5Конструкции, используемы в HTML
Элементы;




Атрибуты;


Ссылки-мнемоники;


нечувствителен
к регистру
без закрывающего тега
[][contents][]
ОТД HTML

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

теги.

с атрибутом


"&#? " – Специалный символ
">" - знак >
""" - знак "

Комментарии.


// и это комментарий
/* это тоже комментарий */

Комментарии - это разметка.

Элементы - это не теги.

Значения атрибутов должны быть ограничены с использованием “” или ‘’.

где ? - это код ISO 8859-1

© www.w3c.org 2008

Конструкции, используемы в HTMLЭлементы;Атрибуты;Ссылки-мнемоники;нечувствителенк региструбез закрывающего тега [][contents][]ОТД HTML указывает для каждого типа элементов, требуются ли начальный

Слайд 6Структура документа

Документ в формате HTML 4.0 состоит из трех частей:


строки, содержащей информацию о версии документа,
раздела заголовков (определяемого элементом

HEAD),
тела (может вводиться элементом BODY или FRAMESET), которое включает содержимое документа.

// пролог HTML
// тип документа

// голова документа
Заголовок документа


// тело документа


© www.w3c.org 2008

Структура документаДокумент в формате HTML 4.0 состоит из трех частей: строки, содержащей информацию о версии документа, раздела

Слайд 7Информация о версии HTML
Объявление типа документа указывает определение типа документа

(DTD), используемое в этом документе:
© www.w3c.org 2008
HTML 4.0 Strict

DTD (строгое определение) - все элементы и атрибуты, не являющиеся нежелательными и не использующиеся в документах с кадрами. :
HTML 4.0 Transitional DTD (переходное определение) - все, что включено в строгое DTD, а также нежелательные элементы и атрибуты :
HTML 4.0 Frameset DTD (определение для кадров) - все, что включено в переходное DTD, а также кадры. :
Информация о версии HTMLОбъявление типа документа указывает определение типа документа (DTD), используемое в этом документе: © www.w3c.org

Слайд 8Раздел заголовков
Элемент HEAD содержит информацию о текущем документе, такую как

заголовок (TITLE ), ключевые слова (META), которые могут использоваться поисковыми

машинами, и другие данные, которые не считаются содержимым документа.
Каждый документ HTML должен иметь элемент TITLE в разделеHEAD.

Динамика популяции ... тело документа...

© www.w3c.org 2008

Раздел заголовковЭлемент HEAD содержит информацию о текущем документе, такую как заголовок (TITLE ), ключевые слова (META), которые

Слайд 9Метаданные. Тег META
Каждый элемент META задает пару свойство/значение.

lang= "ru" content="Arnaud Le Hors">
//информация об авторе и языке

content="text/html; charset=win-1251">
//указание информации по умолчанию

© www.w3c.org 2008

Атрибуты META:
name – имя свойства;
content – значение свойства;
scheme - имя схеы;
http-equiv – (может применяться вместо name) используется серверами HTTP для сбора информации для заголовков сообщений ответов HTTP;
lang – язык;
dir – направление текста.

Метаданные. Тег METAКаждый элемент META задает пару свойство/значение. //информация об авторе и языке//указание информации по умолчанию ©

Слайд 10Метаданные. Примеры

//информация об авторе

//обратная связь
//описание своего документа

CONTENT="My,Html,Home,MyHtml"> // ключевые слова для роботов-поисковиков

//дата создания документа
//не хранить в кэше

© www.w3c.org 2008

Метаданные. Примеры //информация об авторе //обратная связь //описание своего документа //	ключевые слова для роботов-поисковиков //дата создания документа

Слайд 11Тело документа. Атрибуты
Нежелательные:
background - фоновое изображение.
text - цвет текста.


link - цвет текста не посещённых гипертекстовых ссылок.
vlink - цвет

текста посещённых ссылок.
alink - цвет текста активной (текущей) ссылки.

Определяемые в любом другом месте:
id, class - идентификаторы в пределах документа;
lang - информация о языке;
dir - направление текста;
title - заголовок элементаж;
style - встроенная информация о стиле;
bgcolor - цвет фона.

© www.w3c.org 2008

Тело документа. АтрибутыНежелательные:background - фоновое изображение. text - цвет текста. link - цвет текста не посещённых гипертекстовых

Слайд 12Тело документа (1/2)


Динамика популяции

alink="fuchsia" vlink="maroon">
... тело документа...




Динамика популяции

type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }


... тело документа...

Использовать нежелательно

Желательно использовать

© www.w3c.org

Тело документа (1/2)… Динамика популяции  ... тело документа... …… Динамика популяции  BODY { background: white;

Слайд 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 - относительный путь (рекомендуются, хорошо переносимы на другие компьютеры)
При размещении документа в интернете регистр букв имени имеет значение.

© www.w3c.org 2008

Способы задания путиbackground=

Слайд 14Цветовые шкалы
Black
Red
RGB
Слово-синоним
© www.w3c.org 2008
#000000
#ff0000
Rgb(0,0,0)
Rgb(255,0,0)
Вместо элементов и атрибутов HTML для указания

цвета желательно использовать таблицы стилей.
Не следует использовать комбинации цветов, вызывающие

проблемы у пользователей.
При использовании изображения в качестве фона или установлении цвета фона, нужно установить и цвета текста.
Цвета, указанные в элементах BODYи FONT и в bgcolor в таблицах выгладят по-разному на разных платформах.
При возможности нужно принимать общие соглашения.
Цветовые шкалыBlackRedRGBСлово-синоним© www.w3c.org 2008#000000#ff0000Rgb(0,0,0)Rgb(255,0,0)Вместо элементов и атрибутов HTML для указания цвета желательно использовать таблицы стилей.Не следует использовать

Слайд 15Фразовые элементы (1/4)
BLOCKQUOTE – предназначен для длинных цитат, выделяются отступами

(содержимое уровня блока).
Q предназначен для коротких цитат (встроенное содержимое), в

которых не нужно разбиение на абзацы, выделяется кавычками.
SUB – нижний индекс.
SUP – верхний индекс.

Заголовки - H1 (самый большой), H2, H3, H4, H5, H6 (самый маленький).
P - Абзац текста.

They went in single file, running like hounds on a strong scent, and an eager light was in their eyes.


© www.w3c.org 2008

H2O E = mc2 Mlle Dupont


– переход на новую строку

Фразовые элементы (1/4)BLOCKQUOTE – предназначен для длинных цитат, выделяются отступами (содержимое уровня блока).Q предназначен для коротких цитат

Слайд 16Фразовые элементы (2/4)
EM - Выделение.
STRONG - Более сильное

выделение.
CITE - Цитата или ссылка на другие ресурсы.
DFN -

Определение вложенного термина.
CODE - Компьютерный код.
SAMP - Пример программ, сценариев и т.д.
KBD - Текст, который должен ввести пользователь.
VAR - Экземпляр переменной или аргумента программы.
ABBR - Сокращенная форма .
ACRONYM - Акроним (например, WAC, радар и т.д.).

Атрибуты:
id, class, lang, title, style

© www.w3c.org 2008

Фразовые элементы (2/4) EM - Выделение. STRONG - Более сильное выделение. CITE - Цитата или ссылка на

Слайд 17Фразовые элементы (3/4)
Элемент PRE сообщает браузеру, что содержащийся в

нем текст "отформатирован".
© www.w3c.org 2008
Higher still and higher From

the earth thou springest Like a cloud of fire; The blue deep thou wingest, And singing still dost soar, and soaring ever singest.

ADDRESS может использоваться для указания контактной информации или основной части документа, такой как форма



Dave Raggett, Arnaud Hors,
contact persons for the W3C HTML Activity


Фразовые элементы (3/4) Элемент PRE сообщает браузеру, что содержащийся в нем текст

Слайд 18Фразовые элементы (4/4)
WWW

Nationale des Chemins de Fer"> SNCF Doña

abbr.

Как сказал Гари Трумэн, The buck stops here. Подробнее см. [ISO-0000].
В дальнейшем используйте следующий номер ссылки: 1-234-55

© www.w3c.org 2008

Фразовые элементы (4/4) WWW SNCF Doña abbr. Как сказал Гари Трумэн, The buck stops here. Подробнее см.

Слайд 19Списки
Атрибуты:
type, start, value;
id, class, lang, dir, title, style.

Ингредиенты:



100 г муки …
Процедура:



  1. Смешайте ингредиенты.

  2. Примечания:
    Можно добавить изюм.

    © www.w3c.org 2008

      - Неупорядоченные списки (элемент –
    • ),
        - упорядоченные списки (элемент –
      1. ),
        списки определений
        (термин –
        , определение –
        )

СпискиАтрибуты: type, start, value;id, class, lang, dir, title, style. Ингредиенты:     100 г муки

Слайд 20Ссылки. Элемент А
Каждый элемент A определяет якорь:
Содержимое элемента A

определяет положение якоря.
Атрибуты name и id задают имя якоря,

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

Атрибуты:
name ,href, hreflang, type,charset, id, class, lang, dir, title, style, shape и coords (навигационные карты), target (информация о целевом кадре), rel и rev (прямая и обратная ссылки), tabindex (последовательность перехода), accesskey (клавиши доступа).

Подробнее о W3C Вы можете узнать на Web-сайте W3C.

Подробнее о W3C Вы можете узнать на Web-сайте W3C.

© www.w3c.org 2008

Ссылки. Элемент АКаждый элемент A определяет якорь: Содержимое элемента A определяет положение якоря. Атрибуты name и id

Слайд 21Ссылки. Элемент Link
Link определяет связь. Может присутствовать только в разделе

HEAD документа (неограниченное число раз). Хотя элемент LINK, но содержит

информацию об отношениях.

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

© www.w3c.org 2008




Глава 2



...продолжение документа...

Ссылки. Элемент LinkLink определяет связь. Может присутствовать только в разделе HEAD документа (неограниченное число раз). Хотя элемент

Слайд 22Объекты
Для добавления разных объектов можно использовать элемент OBJECT
Атрибуты:
id, class, lang,

dir, title, style, tabindex, usemap (клиентские навигационные карты) name (предоставление

формы) , align, width, height, border, hspace, vspace (визуальное представление объектов, изображений и апплетов).

Является обобщением
Для APPLET, IMG и
IFRAME.

© www.w3c.org 2008

ОбъектыДля добавления разных объектов можно использовать элемент OBJECTАтрибуты:id, class, lang, dir, title, style, tabindex, usemap (клиентские навигационные

Слайд 23Изображения
Элемент IMG позволяет включить изображение.
Атрибуты:
src - задает местоположение изображения, longdesc

- определяет ссылку на длинное описание изображения id, class, alt,

lang, dir, title, style, ismap, usemap, name (предоставление формы) , align, width, height, border, hspace, vspace.

© www.w3c.org 2008

ИзображенияЭлемент IMG позволяет включить изображение.Атрибуты:src - задает местоположение изображения, longdesc - определяет ссылку на длинное описание изображения

Слайд 24Атрибут style
С помощью атрибута style можно задать стилевое отображение элементов

страницы HTML.
Некоторые атрибуты:
width - ширина;
height - высота;
Подробнее стилях будем говорить

позже.



border - граница;
background - фон.

© Торовец Н.Г. 2008

Атрибут styleС помощью атрибута style можно задать стилевое отображение элементов страницы HTML.Некоторые атрибуты:width - ширина;height - высота;Подробнее

Слайд 25Таблицы
Таблица: TABLE
Заголовки таблицы: THEAD,
Нижние заголовки: TFOOT
Раздел таблицы: TBODY
Строка таблицы:

TR
Ячейка таблицы: TD
Заголовок таблицы: TH
Подпись: CAPTION
Атрибуты:
border, align, valign, nowrap, colspan

(объединение столбцов), rowspan (объединение строк), summary, id, class, lang, dir, title, style, bgcolor, frame, rules, border, cellspacing, cellpadding и др.

© www.w3c.org 2008

ТаблицыТаблица: TABLEЗаголовки таблицы: THEAD, Нижние заголовки: TFOOTРаздел таблицы: TBODYСтрока таблицы: TRЯчейка таблицы: TDЗаголовок таблицы: THПодпись: CAPTIONАтрибуты:border, align,

Слайд 26Таблицы (1/2)
© www.w3c.org 2008

Таблицы (1/2)© www.w3c.org 2008

Слайд 27Табличная вёрстка
Преимущества:
Структурированность.

Недостатки:
Большое количество кода;
Трудная правка
Негибкий дизайн в разработке
Такие сайты хуже

индексируются поисковыми роботами.
Плохая совместимость с некоторыми устройствами.
Табличная вёрстка – представление

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

© http://softwaremaniacs.org 2008

Табличная вёрсткаПреимущества:Структурированность.Недостатки:Большое количество кода;Трудная правкаНегибкий дизайн в разработкеТакие сайты хуже индексируются поисковыми роботами.Плохая совместимость с некоторыми устройствами.Табличная

Слайд 28Слои
Слой - это HTML-контейнер (тег DIV или SPAN), в который

можно помещать желаемое содержимое для последующего точного позиционирования на странице.


Атрибуты:
id, class (идентификаторы в пределах документа);
lang (информация о языке);
dir (направление текста);
title (заголовок элемента);
style (встроенная информация о стиле);
align (выравнивание).

Слой 1
Слой 2

SPAN определяет встраиваемую информацию

DIV определяет информацию уровня блока

© http://softwaremaniacs.org 2008

СлоиСлой - это HTML-контейнер (тег DIV или SPAN), в который можно помещать желаемое содержимое для последующего точного

Слайд 29Блочная вёрстка
Блочная вёрстка – представление страницы в виде блоков -

слоёв (div) html, а для задания визуального форматирования – стилей

CSS.

© http://softwaremaniacs.org 2008

Преимущества:
Значительное упрощение построения страниц;
Упрощение добавления, исправления содержимого и изменения внешнего вида.
Недостатки:
Плохая переносимость подобных страниц браузерами устаревшей конструкции.
Некоторые недостатки связаны с CSS

Блочная вёрсткаБлочная вёрстка – представление страницы в виде блоков - слоёв (div) html, а для задания визуального

Слайд 30Формы (1/5)
Форма HTML - это раздел документа, в котором содержатся

обычная информация, разметка и специальные элементы, называемые управляющими элементами(флажки, кнопки

с зависимой фиксацией, меню и т.д.), а также метки этих управляющих элементов.

© www.w3c.org 2008

Формы (1/5)Форма HTML - это раздел документа, в котором содержатся обычная информация, разметка и специальные элементы, называемые

Слайд 31Формы (2/6)
© www.w3c.org 2008




Формы (2/6)© www.w3c.org 2008

Слайд 32Формы (3/6)
© www.w3c.org 2008



Формы (3/6)© www.w3c.org 2008

Слайд 33Формы (4/6)
© www.w3c.org 2008



Формы (4/6)© www.w3c.org 2008

Слайд 34Формы (5/6)
© www.w3c.org 2008



Формы (5/6)© www.w3c.org 2008

Слайд 35Формы (6/6)
Для ввода данных…




/>…

Переключатель1…


Прокручивающееся меню

примеры\JavaScript Phrasebook\
Chapter 05\replace.html

© Кристиан Уэнц 2008

Редактирование дерева документа (1/2)var nr = 1;function addItem() { var list = document.getElementById(

Слайд 120Работа с атрибутами элементов
createAttribute() – создаёт узел-атрибут
setAttribute() – устанавливает

атрибут

removeAttribute() – удаляет атрибут
getAttribute() – возвращает значение атрибута
oNode.id= "newItem" oNode.setAttribute("id","newItem")


© http://Hardline.ru 2008

Работа с атрибутами элементов createAttribute() – создаёт узел-атрибутsetAttribute() – устанавливает атрибутremoveAttribute() – удаляет атрибутgetAttribute() – возвращает значение

Слайд 121Реагирования на события JavaScript
узел.addEventListener(type, listener, useCapture)
addEvantListner() – для всех

остальных браузеров (используется обозначение события “XXX”)
узел. attachEvent(type, listener)
© Кристиан

Уэнц 2008

С помощью атрибута HTML:

С помощью атрибута onXXX, доступного в Java Script:
window.onload = xyz;
С помощью методов добавления событий:
attachEvent() – для IE (используется обозначение события “onXXX”);

Реагирования на события JavaScriptузел.addEventListener(type, listener, useCapture) addEvantListner() – для всех остальных браузеров (используется обозначение события “XXX”)узел. attachEvent(type,

Слайд 122
function eventHandler() {
window.alert("Event fired!");
}
window.onload = function() {

var button = document.getElementById("eventButton");
if (button.addEventListener) {
button.addEventListener("click", eventHandler,

false);
} else if (button.attachEvent) {
button.attachEvent("onclick", eventHandler);
}
};


Реагирования на события JavaScript (1/2)

примеры\JavaScript Phrasebook\Chapter 06\attach.html

© Кристиан Уэнц 2008


Слайд 123Удаление обработчиков событий
узел.removeEventListener(type, listener, useCapture)
document.removeEventListener("click", mouseClick, true);
© Кристиан

Уэнц 2008
Для IE:
detachEvent()
Для всех остальных браузеров:
removeEventListner()

Удаление обработчиков событийузел.removeEventListener(type, listener, useCapture) document.removeEventListener(

Слайд 124Всплытие и перехват событий событий
В IE происходит всплытие событий (событие

запускается сначала из того элемента, где оно наступает, а затем

оно всплывает вверх по структуре модели DOM).
W3C (Mozilla, Safari, Konqueror, Opera) события сначала погружаются вниз до целевого элемента, а затем всплывают вверх.

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

После перехвата события, его погружение можно прекратить:
В IE – window.event.cancelBuble = false;
В модели W3C – e.stopPropagation.

© Кристиан Уэнц 2008

Всплытие и перехват событий событийВ IE происходит всплытие событий (событие запускается сначала из того элемента, где оно

Слайд 125События
© http://docs.com.ru 2008

События© http://docs.com.ru 2008

Слайд 126События (1/2)
© http://docs.com.ru 2008

События (1/2)© http://docs.com.ru 2008

Слайд 127Java Script и CSS
В Java Script имеется возможность задавать любые

команды CSS.
В Java Script используется смешанное написание.
Например,чтобы обратиться

к свойству font-weight, нужно указать fontWeight.

© Кристиан Уэнц 2008

Java Script и CSSВ Java Script имеется возможность задавать любые команды CSS. В Java Script используется смешанное

Слайд 128Доступ к стилям
Доступ к стилям осуществляется через свойство style:

type="text/javascript">
function makeBold() {
document.getElementById("para").style.fontWeight = "bold";
window.setTimeout("makeLighter();", 1000);}
function makeLighter() {

document.getElementById("para").style.fontWeight = "lighter";
window.setTimeout("makeBold();", 1000);}
window.onload = makeBold;

CSS and JavaScript


примеры\JavaScript Phrasebook\Chapter 04\style.html

© Кристиан Уэнц 2008

Доступ к стилямДоступ к стилям осуществляется через свойство style:function makeBold() { document.getElementById(

Слайд 129Доступ к классам

© Кристиан Уэнц 2008
Доступ к классам осуществляется через

свойство className:

function makeBold() {
document.getElementById("para").className = "strong";
window.setTimeout("makeLighter();",

1000);}
function makeLighter() {
document.getElementById("para").className = "weak";
window.setTimeout("makeBold();", 1000);}
window.onload = makeBold;

CSS and JavaScript


\Chapter 04\classname.html

Доступ к классам© Кристиан Уэнц 2008Доступ к классам осуществляется через свойство className:function makeBold() { document.getElementById(

Слайд 130Доступ к отдельным таблицам стилей
Доступ к конкретной таблице стилей можно

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

массива stylesheets.

© Кристиан Уэнц 2008

\Chapter 04\stylesheets.html



\Chapter 04\visibility.html

© Кристиан Уэнц 2008

Исчезновение содержимого страницыДля этого нужно воспользоваться свойством visibility function showHide(show, hide) {  document.getElementById(show).style.visibility =

Слайд 132Что дальше?
JavaScript 2.0
CSS 3.0
HTML 5.0
XSLT-преобразование (из xml в html)

Что дальше?JavaScript 2.0CSS 3.0HTML 5.0XSLT-преобразование (из xml в html)

Слайд 133Задание
Создать форму, в которой имеется:

имя пользователя - e-mail адрес - URL -

сообщение.
прикреплённый файл

Так же указывается сколько символов в комментарии

можно ещё написать.
При нажатии на «Отправить», проверяется правильно ли заполнена форма (поля, помеченные * должны быть заполнены). Если форма заполнена неправильно, то выдаётся соответствующее сообщение.
Иначе, рядом выводится введённая информация, см. далее.
ЗаданиеСоздать форму, в которой имеется:имя пользователя - e-mail адрес - URL  - сообщение. прикреплённый файлТак же

Слайд 134Задание (1/2)

Задание (1/2)

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика