Embed Size (px)
DESCRIPTION
Web-программирование Лекция #3. Введение в языки разметки web-страниц Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук. Лектор: Яковенко Кирилл Сергеевич.
Citation preview
WEB-ПРОГРАММИРОВАНИЕЛекция #3. Введение в языки разметки web-страниц
Яковенко К. С
Омский государственный университет им. Ф. М. ДостоевскогоФакультет компьютерных наук
2
Язык разметки (текста)
в компьютерной терминологии – средство описания данных и метаданных, хранящихся в документе.
Язык разметки ≠ Язык программирования
Языки разметки отвечают только за логическое и визуальное расположение данных.
3
Примеры языков разметки
Язык разметки гипертекста HTML
Расширяемый язык гипертекстовой разметки XHTML
Язык разметки XML
Язык разметки векторной графики SVG
Язык разметки для математического представления MathML
и т. д.
4
HyperText Markup Language
язык для структурирования и представления содержимого всемирной паутины.
Документ HTML может включать следующие компоненты:
стилизованный и форматированный текст;
команды включения графических и звуковых файлов;
гиперсвязи с различными ресурсами Internet;
скрипты на языке JavaScript и VBScript;
различные объекты, например Flash-анимацию.
5
История развития HTML
Предпосылки:
SGML – Standard Generalized Markup Language (ISO 8879:1986)
HTML 1.2 (1993)
6
История развития HTML
Стандарты:
HTML 2.0 (ноябрь 1994)
HTML 3.0 (март 1995) / HTML 3.2 (январь 1997)
HTML 4.0 (декабрь 1997) / HTML 4.01 (декабрь 1999)
XHTML 1.0 → XHTML 2.0 (2000 - 2010)
HTML 5 (в разработке, ожидается в 2014 год)
7
Основные элементы HTML
Основными понятиями любого языка разметки являются теги, элементы и атрибуты.
Теги (tags) – специальные элементы, позволяющие отличать в документе описание разметки от описания данных.
Элемент – это тэги в совокупности с их содержанием (данными).
8
Основные элементы HTML
Атрибут используется при определении элемента, чтобы задать какие-либо параметры, уточняющие характеристики данного элемента.
Пример:
<p>Текст между двумя тегами - открывающим и закрывающим.</p>
<a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>
А вот пример пустого элемента: <br />
9
Видимая
Структура HTML-документа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<!-- Служебная информация --></head><body>
<!-- Текст документа --></body>
</html>
Декларация типа документа
HTML контейнер
Невидимая
10
<!DOCTYPE>предназначен для указания типа текущего документа — Document Type Definition (DTD)
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 5
<!DOCTYPE html>
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
11
Синтаксис <!DOCTYPE>
HTML 4.01 с фреймами:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Элемент верхнего уровня
Публичность Регистрация Организация
Тип
Имя
Язык URL
12
Основные контейнеры заголовка
Элементы HTML-разметки, которые должны использоваться только внутри контейнера HEAD:
title задает заголовок HTML документа
meta задает метаданные HTML документа
link устанавливает связь HTML документа с другим внешним документом
base задает базовый адрес внешних ссылок
style определяет стили элементов web-страницы
script предназначен для описания скриптов
13
Содержимое HTML документа
Описывается в контейнере <body></body> с помощью HTML элементов, предназначенных для управления отображением информации и позволяющие форматировать:
Текст/блоки текста (форматированного или нет);
Гиперссылки;
Разнообразные списки;
Таблицы;
Дополнительные объекты, картинки;
Заполняемые формы.
14
Форматирование текста(блочные элементы)
Занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Заголовки <h1></h1>, … ,<h6></h6>
Параграфы <p></p>
Универсальные блочные элементы <div></div>
Выделение длинных цитат <blockquote></blockquote>
15
Блочные элементы (пример)<body> <h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> <h4>Заголовок четвертого уровня</h4> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6> <p>
Параграф в несколько строк: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p> <div>
Универсальный блочный элемент</div>
<blockquote>Длинная цитата внутри документа: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</blockquote></body>
12345678910111213141516171819
16
Блочные элементы (пример)
17
Форматирование текста(Строчные элементы)
В основном они используются для изменения вида текста или его логического выделения.
Гиперссылки <a></a>
Вставка изображений <img></img>
Перевод строки <br />
Жирное начертание шрифта <b></b>
Курсивное начертание шрифта <i></i>
Нижнее подчеркивание текста <u></u>
Выделение строчных элементов <span></span>
18
Строчные элементы (пример)<body> <p> Гиперссылки: <br /> <a target="_blan" href="http://www.teamrubber.com/wp-content/uploads/2011/01/HTML5_logo.jpg"> Открыть изображение в новом окне!</a> <br /> <a href="http://www.univer.omsk.su/departs/compsci/index.html"> Факультет компьютерных наук </a> <br /> <a href="mailto:[email protected]?subject=web.lections.questions?
body=Привет, у меня есть вопрос!"> Cсылка на адрес электронной почты </a> <br /> <a href="tel:8-800-2000-600">Позвонить по телефону.</a> </p> <h2><a name="header">Пример оформления текcта</a></h2> <p> <i>Строчные элементы</i> <b>не создают переносов</b> <span>строки</span> до и
после себя. Такие элементы располагаются в строке слева направо. Если <u>строчный элемент</u> <span>не помещается в родительский
контейнер</span>, то он переносится на следующую строку. </p></body>
123456789101112131415161718192021222324
19
Строчные элементы (пример)
20
HTML таблицыСостоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Используются для упорядочения и представления табличных данных.
Контейнер для элементов таблицы <table></table>
Контейнер для строки таблицы <tr></tr>
Контейнер для одной ячейки <td></td>
Контейнер для одной ячейки заголовка <th></th>
Еще больше табличных элементов можно найти на htmlbook.ru
21
HTML таблицы (пример)<body> <h1 align="center">Таблица</h1> <center> <table border="1" width="100%" cellspacing="0" cellpadding="3" > <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> <tr> <td colspan=3> Если в таблице два тега TR, то в ней две строки. </td> </tr> <tr> <td>Если в строке три тега TD,</td> <td>то в ней</td> <td>три столбца.</td> </tr> </table> </center></body>
12345678910111213141516171819202122
22
HTML таблицы (пример)
23
HTML списки
Взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
Нумерованный список <ol></ol>
Маркированный список <ul></ul>
Отдельный элемент списка <li></li>
24
HTML списки (пример)<body> <h4>Вложенный список:</h4> <ol type="A" start="8"> <li>Элемент 1</li> <ol> <li>Элемент 1.1</li> <li>Элемент 1.2</li> </ol> <li>Элемент 2</li> <ul> <li>Элемент 2.1</li> <li>Элемент 2.2</li> <ul> <li>Элемент 2.2.1</li> <li>Элемент 2.2.2</li> </ul> </ul> <li>Элемент 3</li> </ol></body>
1234567891011121314151617181920
25
HTML списки (пример)
26
HTML формы
предназначены для организации интерактивного обмена информацией между пользователем и web-приложением.
Контейнер формы <form></form>
Когда форма отправляется на сервер, управление данными передается web-приложению, заданному атрибутом action="URL"
27
Элементы управления HTML формыСлужат для взаимодействия пользователя с формой.
Большинство элементов ввода и управления в форме можно описать при помощи элемента <input>.
Обязательными атрибутами которого являются:
name — приписывает данному элементу ввода уникальное имя, использующееся для дальнейшей обработки формы
type — определяет тип элемента управления или ввода.
Подписи и метки элементов управления задаются с помощью элемента <label>
Больше элементов HTML формы можно найти на htmlbook.ru.
28
Элементы интерфейса формыАтрибут type тега <input> позволяет задавать:
текстовое поле (text)
поле с паролем (password)
переключатель (radio)
флажок (checkbox)
скрытое поле (hidden)
кнопку (button)
кнопку для отправки формы (submit)
кнопку для очистки формы (reset)
поле для отправки файла (file)
кнопку с изображением (image)
29
Особенности отправки HTML форм
Атрибуты тега <form>:
method задает метод запроса: GET или POST
enctype задает способ кодирования данных формы. Для отправки файлов следует использовать enctype="multipart/form-data"
Для отправки данных нужно создать специальную кнопку <input type="submit"> или нажать на Enter в пределах формы.
30
HTML формы (пример)<body> <form> <label for="search">Строка поиска</label> <input id="search" type="text" name="search" size="50" value="Строка для поиска" /> <br /> <label> <input type="checkbox" name="news" /> Искать в новостях </label> <br /> Тип новостей <input id="scientific" type="radio" name="type" value="scientific" /> <label for="scientific">научные</label> <input id="other" type="radio" name="type" value="other" /> <label for="other">другие</label> <br /> <textarea placeholder="Ваш комментарий"></textarea> <br /> <input type="file" name="file" /> <br /> <input type="submit" value="Отправить" /> <input type="button" value="Просто кнопка" /> <input type="hidden" value="Скрытое поле" /> </form></body>
12345678910111213141516171819202122232425
31
HTML формы (пример)
32
HTML5Не является прямым продолжением HTML4 и XHTML
Новые возможности:
Поддержка геолокации;
Воспроизведение видеороликов;
Воспроизведение аудиофайлов;
Локальное хранилище;
Фоновые вычисления;
Оффлайновые приложения;
Рисование;
Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.
Официально стандарт ещё не завершён, но современные браузеры уже умеют частично с ним работать.
33
Яковенко Кирилл Сергеевич[email protected]
Омский государственный университет им. Ф. М. ДостоевскогоФакультет компьютерных наук
