Лекция #3. Введение в языки разметки web-страниц

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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:kirill.yakovenko@gmail.com?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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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>
</tr>
<tr>
<td colspan=3>
Если в таблице два тега TR, то в ней две строки.
</td>
</tr>
<tr>
<td>Если в строке три тега TD,</td>
<td>то в ней</td>
<td>три столбца.</td>
</tr>
</table>
</center>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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>
</ol>
<ul>
<ul>
<li>Элемент 2.2.1</li>
<li>Элемент 2.2.2</li>
</ul>
</ul>
</ol>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

31
HTML формы (пример)

32
HTML5
Не является прямым продолжением HTML4 и XHTML
Новые возможности:
Поддержка геолокации;
Воспроизведение видеороликов;
Воспроизведение аудиофайлов;
Локальное хранилище;
Фоновые вычисления;
Оффлайновые приложения;
Рисование;
Новые элементы форм: для даты, времени, поиска, чисел,
выбора цвета и др.
Официально стандарт ещё не завершён, но современные браузеры уже
умеют частично с ним работать.

33
Яковенко Кирилл Сергеевич
kirill.yakovenko@gmail.com
Омский государственный университет им. Ф. М. Достоевского

Лекция #3. Введение в языки разметки web-страниц

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Лекция #3. Введение в языки разметки web-страниц

Similar to Лекция #3. Введение в языки разметки web-страниц (20)

Лекция #3. Введение в языки разметки web-страниц