Базовый HTML

Содержание

Слайд 2

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

Соглашение об авторских правах

Этот материал предназначен исключительно для зарегистрированных в Интернет-центре

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

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

Слайд 3

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

Что такое HTML?

HTML - приложение SGML. Соответствует международному стандарту ISO

8879.

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

© www.w3c.org 2008

Слайд 4

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

История и стандарты HTML

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли

приблизительно в 1991-1992 годах.

© www.w3c.org 2008

Слайд 5

Конструкции, используемы в HTML Элементы; Атрибуты; Ссылки-мнемоники; нечувствителен к регистру без

Конструкции, используемы в HTML

Элементы;
Атрибуты;
Ссылки-мнемоники;

нечувствителен


к регистру


без закрывающего тега


[][contents][]

ОТД HTML указывает

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

с атрибутом


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

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


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

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

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

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

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

© www.w3c.org 2008

Слайд 6

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

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

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

содержащей информацию о версии документа,
раздела заголовков (определяемого элементом HEAD),
тела (может вводиться элементом BODY или FRAMESET), которое включает содержимое документа.

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

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


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


© www.w3c.org 2008

Слайд 7

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

Информация о версии HTML

Объявление типа документа указывает определение типа документа (DTD),

используемое в этом документе:

© www.w3c.org 2008

HTML 4.0 Strict DTD (строгое определение) - все элементы и атрибуты, не являющиеся нежелательными и не использующиеся в документах с кадрами. :
HTML 4.0 Transitional DTD (переходное определение) - все, что включено в строгое DTD, а также нежелательные элементы и атрибуты :
HTML 4.0 Frameset DTD (определение для кадров) - все, что включено в переходное DTD, а также кадры. :

Слайд 8

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

Раздел заголовков

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

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

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

© www.w3c.org 2008

Слайд 9

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

Метаданные. Тег META

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

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

//указание информации по умолчанию

© www.w3c.org 2008

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

Слайд 10

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

Метаданные. Примеры

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

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

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

© www.w3c.org 2008

Слайд 11

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

Тело документа. Атрибуты

Нежелательные:
background - фоновое изображение.
text - цвет текста.
link

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

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

© www.w3c.org 2008

Слайд 12

Тело документа (1/2) … Динамика популяции ... тело документа... … …

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

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

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

…

…

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


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

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

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

© www.w3c.org

Слайд 13

Способы задания пути background="http://www.arhiv.ru/fp_0008.gif" - рисунок с другого сайта; background="C:/users/arhiv.www/fp_0008.gif" -

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

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

Слайд 14

Цветовые шкалы Black Red RGB Слово-синоним © www.w3c.org 2008 #000000 #ff0000

Цветовые шкалы

Black
Red

RGB

Слово-синоним

© www.w3c.org 2008

#000000
#ff0000

Rgb(0,0,0)
Rgb(255,0,0)

Вместо элементов и атрибутов HTML для указания цвета

желательно использовать таблицы стилей.
Не следует использовать комбинации цветов, вызывающие проблемы у пользователей.
При использовании изображения в качестве фона или установлении цвета фона, нужно установить и цвета текста.
Цвета, указанные в элементах BODYи FONT и в bgcolor в таблицах выгладят по-разному на разных платформах.
При возможности нужно принимать общие соглашения.
Слайд 15

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

Фразовые элементы (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


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

Слайд 16

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

Фразовые элементы (2/4)

EM - Выделение.
STRONG - Более сильное выделение.


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

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

© www.w3c.org 2008

Слайд 17

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

Фразовые элементы (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


Слайд 18

Фразовые элементы (4/4) WWW SNCF Doña abbr. Как сказал Гари Трумэн

Фразовые элементы (4/4)

WWW des Chemins de Fer"> SNCF Doña abbr.

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

© www.w3c.org 2008

Слайд 19

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

Списки

Атрибуты:
type, start, value;
id, class, lang, dir, title, style.


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


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


    1. Смешайте ингредиенты.
      2. …
      Примечания:
      Можно добавить изюм.

      © www.w3c.org 2008

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

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

Ссылки. Элемент А

Каждый элемент 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

Слайд 21

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

Ссылки. Элемент Link

Link определяет связь. Может присутствовать только в разделе HEAD

документа (неограниченное число раз). Хотя элемент LINK, но содержит информацию об отношениях.

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

© www.w3c.org 2008




Глава 2



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

Слайд 22

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

Объекты

Для добавления разных объектов можно использовать элемент OBJECT

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

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

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

© www.w3c.org 2008

Слайд 23

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

Изображения

Элемент IMG позволяет включить изображение.

Атрибуты:
src - задает местоположение изображения, longdesc -

определяет ссылку на длинное описание изображения id, class, alt, lang, dir, title, style, ismap, usemap, name (предоставление формы) , align, width, height, border, hspace, vspace.

© www.w3c.org 2008

Слайд 24

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

Атрибут style

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

HTML.
Некоторые атрибуты:

width - ширина;
height - высота;

Подробнее стилях будем говорить позже.



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

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

Слайд 25

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

Таблицы

Таблица: 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

Слайд 26

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

Таблицы (1/2)

© www.w3c.org 2008

Слайд 27

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

Табличная вёрстка

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

поисковыми роботами.
Плохая совместимость с некоторыми устройствами.

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

© http://softwaremaniacs.org 2008

Слайд 28

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

Слои

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

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

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

Слой 1
Слой 2

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

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

© http://softwaremaniacs.org 2008

Слайд 29

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

Блочная вёрстка

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

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

© http://softwaremaniacs.org 2008

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

Слайд 30

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

Формы (1/5)

Форма HTML - это раздел документа, в котором содержатся обычная

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

© www.w3c.org 2008

Слайд 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) Для ввода данных … … … … … …

Формы (6/6)

Для ввода данных…
…
…

type="file" name="file" />…
…
…
…
Переключатель1…


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

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

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

Слайд 120

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

Работа с атрибутами элементов

createAttribute() – создаёт узел-атрибут
setAttribute() – устанавливает атрибут
removeAttribute()

– удаляет атрибут
getAttribute() – возвращает значение атрибута

oNode.id= "newItem" oNode.setAttribute("id","newItem")

© http://Hardline.ru 2008

Слайд 121

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

Реагирования на события JavaScript

узел.addEventListener(type, listener, useCapture)

addEvantListner() – для всех остальных

браузеров (используется обозначение события “XXX”)

узел. attachEvent(type, listener)

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

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

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

Слайд 122

function eventHandler() { window.alert("Event fired!"); } window.onload = function() { var



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

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

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

Слайд 123

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

Удаление обработчиков событий

узел.removeEventListener(type, listener, useCapture)

document.removeEventListener("click", mouseClick, true);

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

2008

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

Слайд 124

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

Всплытие и перехват событий событий

В IE происходит всплытие событий (событие запускается

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

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

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

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

Слайд 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

Слайд 127

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

Java Script и CSS

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

CSS.
В Java Script используется смешанное написание.
Например,чтобы обратиться к свойству font-weight, нужно указать fontWeight.

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

Слайд 128

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

Доступ к стилям

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


CSS and JavaScript


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

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

Слайд 129

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

Доступ к классам

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

Доступ к классам осуществляется через свойство

className:



CSS and JavaScript


\Chapter 04\classname.html

Слайд 130

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

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

Доступ к конкретной таблице стилей можно получить

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

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

\Chapter 04\stylesheets.html


…

\Chapter 04\visibility.html

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

Слайд 132

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

Что дальше?

JavaScript 2.0
CSS 3.0
HTML 5.0
XSLT-преобразование (из xml в html)

Слайд 133

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

Задание

Создать форму, в которой имеется:
имя пользователя - e-mail адрес - URL - сообщение.


прикреплённый файл
Так же указывается сколько символов в комментарии можно ещё написать.
При нажатии на «Отправить», проверяется правильно ли заполнена форма (поля, помеченные * должны быть заполнены). Если форма заполнена неправильно, то выдаётся соответствующее сообщение.
Иначе, рядом выводится введённая информация, см. далее.
- Предыдущая
Протоколы адресации
Следующая -
ДЕКЛАРИРОВАНИЕ промышленной безопасности

Похожие презентации

Игровые технологии в дошкольном образовательном учреждении Подготовила: воспитатель МБДОУ ДС «Росиночка» Лыгорева Г.В. Г. Там
Программирование на языке Паскаль
Индекс глобальной конкурентоспособности (методика ВЭФ) Выполнили: Батенова Алина Дунай Валерия Нечаева Анастасия Нарышкина Ма
Выпадение прямой кишки Prolapsus recti
Исполнительная власть и государственное управление
Немецкий федеральный банк
08. Miscellaneous (java)
Эффект Доплера
Презентация Факторы, влияющие на рынок недвижимости
Стандартизация основных норм взаимозаменяемости
Фурнитура премиум сегмента для складных конструкций. Roto Patio Fold
СТАРТАП Практические методики снижения рисков реализации инновационных проектов IV Ежегодный Инвестиционный Форум «Инноваци
Deutsch Automobilindustrie Geschichte
Приобретенные пороки сердца
Правовые основы здравоохранения Социальное и медицинское страхование
ИНТЕРЬЕР КУЗОВОВ И КАБИН
Грамматика және грамматикалық бірліктер
Здравствуй масленица, частушки
Анастасия Матросова
Концепция трёхмерной эффективности лидера В.Реддина
Развитие скоростно-силовых качеств у баскетболистов 15-16 лет. Курсовая работа
Производная и ее применение Работу выполнили ученики 10 класса МОУ Петровской сош
Функциональное программирование
4 источника жизненной энергии
Идеология и ее функции. Эволюция содержания понятия идеология и его современное значение
Работа с файлами. Программирование на языке Паскаль
Створення мультімедіа засобами Adobe Flach Professional 8
Expressive means and stylistic devices (part III). Lecture 5
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть