1.02M

Category:

internet

Веб-разработка. HTML – Hyper Text Markup Language. Язык разметки гипертекста

1.

Веб-разработка
Лекция №2
Шумилов Вадим Валерьевич
Тензор, 2017

3.

HTML
HTML – Hyper Text Markup Language.
Язык разметки гипертекста.
3

5.

HTML
Тэг - элемент языка разметки гипертекста.
5

6.

HTML
Тэг - элемент языка разметки гипертекста.
Заключается в угловые скобки.
<tag>
6

7.

HTML
Тэг - элемент языка разметки гипертекста.
Бывает одиночным...
<meta ... />
7

8.

HTML
Тэг - элемент языка разметки гипертекста.
... и парным
<p> ... </p>
8

9.

HTML
Тэг - элемент языка разметки гипертекста.
Парный тэг: открывающий
<p> ... </p>
9

10.

HTML
Тэг - элемент языка разметки гипертекста.
Парный тэг: закрывающий
<p> ... </p>
10

11.

HTML
Тэг - элемент языка разметки гипертекста.
Тэг может иметь атрибуты
<input type=“text” required>
11

12.

HTML
Тэг - элемент языка разметки гипертекста.
Тэг может иметь атрибуты
<input type=“text” required>
12

13.

HTML
Тэг - элемент языка разметки гипертекста.
Тэг может иметь атрибуты
<input type=“text” required>
13

14.

HTML
Тэг - элемент языка разметки гипертекста.
Тэг может иметь атрибуты
<input type=“text” required>
14

15.

HTML
Тэг - элемент языка разметки гипертекста.
Тэг может иметь атрибуты
<input type=“text” required>
15

16.

HTML
Тэг - элемент языка разметки гипертекста.
Парные теги могут содержать внутри себя другие тэги и/или
текст
<div><p> some <span> text </span> </p></div>
16

17.

HTML
Тэг - элемент языка разметки гипертекста.
Парные теги могут содержать внутри себя другие тэги и/или
текст
<div><p> some <span> text </span> </p></div>
17

18.

HTML
Тэг - элемент языка разметки гипертекста.
Парные теги могут содержать внутри себя другие тэги и/или
текст
<div><p> some <span> text </span> </p></div>
18

19.

HTML
Тэг - элемент языка разметки гипертекста.
Тэг может быть набран любым регистром
<div>, <Div>, <DiV>, <DIV>
19

20.

HTML
Тэг - элемент языка разметки гипертекста.
Внутри тэга можно писать сколько угодно пробелов и
переводов строк
<div
myAttr=“x”
attr2>
20

21.

HTML
Тэг - элемент языка разметки гипертекста.
Атрибуты можно писать в любых кавычках
<div class=‘x’ style=“...”>
21

22.

HTML
Тэг - элемент языка разметки гипертекста.
А можно вообще без кавычек
<div class=x>
22

23.

HTML
Тэг - элемент языка разметки гипертекста.
А можно вообще без кавычек... Но лучше не злоупотреблять
<div class=my class names>
23

24.

HTML
Тэг - элемент языка разметки гипертекста.
... Но лучше не злоупотреблять!
<div class=“x”> - OK
<DIV class=x
style=“y”> - Не ОК
24

25.

HTML
Тэг - элемент языка разметки гипертекста.
Нельзя путать вложенность тэгов!
<div><p> text </p></div> - OK
<p><div> text </p></div> - Не ОК
25

Структура
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример веб-страницы</title>
</head>
<body>
<h1>Заголовок</h1>

<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>
27

28.

29.

Структура
HTML5 == <!DOCTYPE html>
29

30.

31.

32.

33.

Типы тэгов
33

34.

Типы тэгов
• Блочные
• Строчные
• ...
34

35.

Типы тэгов
Блочные
• Занимают всю доступную ширину
• До и после них «перевод строки»
• Примеры:
• H1, P, DIV
35

36.

Типы тэгов
Строчные
• Занимают ширину «по содержимому»
• До и после них НЕТ «перевода строки»
• Примеры:
• SPAN, STRONG, B, I, EM
36

37.

Параметры атрибутов
37

38.

Параметры атрибутов
Цвет:
• Название по-английски
• gray, red, deepskyblue
• Шестнадцатеричное значение
• Три компоненты: красный, зеленый, синий
• Компонента: 1 байт (от 0 до 255)
• #FF0000 – красный, #FFFF00 – желтый, #C0C0C0 – серый
• Цвет + прозрачность (0 – 100):
• 0 – полностью прозрачный
• rgba(255, 100, 145, 50);
38

39.

Параметры атрибутов
Размер:
• Пиксели, px
• Проценты, %
• em, pt, ...
39

40.

Параметры атрибутов
Адреса:
• Абсолютные
• http://some.tld/some/file.html
• //some.tld/some/file.html
40

41.

«Единицы измерения»
Адреса:
• Относительные
• От корня
• /
• /some/file.html
• /some/folder/
41

42.

«Единицы измерения»
Адреса:
• Относительные
• От текущего адреса
• ../
• some/file.html
• some/folder/
42

43.

«Единицы измерения»
Адреса:
• Относительные, От текущего адреса
• /folder/file.html
• some/file.html => /folder/some/file.html
• some/folder/ => /folder/some/folder/
• ./x.html => /folder/x.html
• x.html => /folder/x.html
43

44.

«Единицы измерения»
Адреса:
• Относительные, От текущего адреса
• /folder
• ../ => / (!!)
• some/file.html => /some/file.html
• some/folder/ => /some/folder/
• ./x.html => /x.html
• x.html => /x.html
44

45.

Валидация документов
45

46.

Валидация
Существуют специальные утилиты/онлайн-сервисы для
проверки правильности разметки – валидаторы.
• http://validator.w3.org/
Валдиный документ – хорошо!
Невалидный документ – тоже работает, но это плохо есть
нюансы.
46

47.

Валидация
Когда приходится намеренно ломать документ?
• Проблемы совместимости браузеров
• Различные странные задачи
• Например, «вложенные ссылки»:
http://kizu.ru/fun/nested-links/
47

48.

Валидация
• Проводите валидацию!
• Оставляйте только те несоответствия, для которых четко
понятна причина и необходимость.
48

49.

Подведем итоги
49

50.

Итоги
<div>
50

51.

Итоги
<div>
</div>
51

52.

Итоги
<div>
<input />
</div>
52

53.

Итоги
<div>
<input type=“text” />
</div>
53

54.

Итоги
<div>
<input type=“text” required />
</div>
54

55.

Итоги
<div width=“200px”>
<input type=“text” required />
</div>
55

56.

Итоги
<div width=“200px”>
<input type=“text” required />
</div>
<p>
</p>
56

57.

Итоги
<div width=“200px”>
<input type=“text” required />
</div>
<p>
<a href=“/some/folder/file.html”>Link</a>
</p>
57

58.

Итоги
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div width=“200px”>
<input type=“text” required />
</div>
<p>
<a href=“/some/folder/file.html”>Link</a>
</p>
</body>
</html>
58

59.

Вопросы есть?
59

60.

CSS
60

61.

CSS
CSS – Cascading Style Sheet.
Каскадные таблицы стилей
61

62.

CSS
62

63.

CSS
<body bgcolor=‘#003300’>
<h1 align=‘center’>Заголовок документа</h1>
<p align=‘left’><font color=‘#665d00’>Какой-то текст</font></p>
<h1 align=‘center’>Второй заголовок документа</h1>
<p align=‘left’><font color=‘#665d00’>Другой текст</font></p>
<p align=‘left’><font color=‘#665d00’>Третий текст</font></p>
</body>
63

64.

65.

66.

Базовые понятия
Иерархия элементов
66

67.

Базовые понятия
Иерархия элементов
<body>
<h1>Заголовок</h1>
<p>Текст
<b> выделен </b>
</p>
<p>Еще текст</p>
</body>
67

68.

Базовые понятия
Иерархия элементов
Родительский элемент
<body>
<h1>Заголовок</h1>
<p>Текст
<b> выделен </b>
</p>
<p>Еще текст</p>
</body>
Body, родитель для h1 и p (обоих)
68

69.

Базовые понятия
Иерархия элементов
Родительский элемент
<body>
<h1>Заголовок</h1>
<p>Текст
<b> выделен </b>
</p>
<p>Еще текст</p>
</body>
Body НЕ родитель для b
69

70.

Базовые понятия
Иерархия элементов
Элемент-предок
<body>
<h1>Заголовок</h1>
<p>Текст
<span> выделен </span>
</p>
<p>Еще текст</p>
</body>
Body предок для всех, кто внутри
70

71.

Базовые понятия
Иерархия элементов
Элемент-сосед
<body>
<h1>Заголовок</h1>
<p>Текст
<span> выделен </span>
</p>
<p>Еще текст</p>
</body>
Оба тэга p соседи для h1
71

72.

Базовые понятия
Специальные атрибуты
• Id
• Уникальный идентификатор элемента в документе.
• Элементов с таким значением id в документе должно
быть не больше одного
72

73.

Базовые понятия
Специальные атрибуты
• class
• Значение – набор имен классов, разделенных
пробелами
• Предназначен для отнесения элемента к одному или
нескольким классам
• Элементов одного класса в документе может быть
любое количество
73

74.

Базовые понятия
Специальные атрибуты
• id
• class
<div id=“main” class=“wide collapsed”>...</div>
74

75.

Базовые понятия
Подключение CSS
1. Тэг <link>
<link rel=“stylesheet” href=“/path/to/style.css” >
75

76.

Базовые понятия
Подключение CSS
1. Тэг <link>
2. Тэг <style>
<style>
body {
color: red;
}
</style>
76

77.

Базовые понятия
Подключение CSS
1. Тэг <link>
2. Тэг <style>
3. Атрибут style
<p style=“font-weight: bold”>...</p>
77

78.

Базовые понятия
Подключение CSS
1.
2.
3.
4.
Тэг <link>
Тэг <style>
Атрибут style
Директива CSS @import
@import url(path/to/file.css);
78

79.

Правила оформления
79

80.

Правила оформления
...
селектор[, селектор ...] {
свойство: значение;
свойство: значение;
...
}
...
80

81.

Правила оформления
@import url(...)
@media print {
...
}
@media (max-width: 600px) {
...
}
81

82.

Селекторы
82

83.

Селекторы
Универсальный
*{
color: red;
}
<body>
<div id=“menu”>
<p> .... </p>
</div>
<div id=“main”>
<h1 class=“intro”>...</h1>
<p></p>
</div>
</body>
83

84.

Селекторы
Селектор элемента
p, h1 {
color: red;
}
<body>
<div id=“menu”>
<p> .... </p>
</div>
<div id=“main”>
<h1 class=“intro”>...</h1>
<p>.....</p>
</div>
</body>
84

85.

Селекторы
Селектор класса
.intro {
color: red;
}
<body>
<div id=“menu”>
<p> .... </p>
</div>
<div id=“main”>
<h1 class=“intro”>...</h1>
<p>.....</p>
</div>
</body>
85

86.

Селекторы
Селектор идентификатора
#main {
color: red;
}
<body>
<div id=“menu”>
<p> .... </p>
</div>
<div id=“main”>
<h1 class=“intro”>...</h1>
<p>.....</p>
</div>
</body>
86

87.

Селекторы
Селектор потомков
#main p {
color: red;
}
<body>
<div id=“menu”>
<p> .... </p>
</div>
<div id=“main”>
<h1 class=“intro”>...</h1>
<p>.....</p>
</div>
</body>
87

88.

Селекторы
Селектор дочернего элемента
#main > p {
color: red;
}
<body>
<div id=“menu”>
<p> .... </p>
</div>
<div id=“main”>
<h1 class=“intro”>...</h1>
<p>.....</p>
<div> . <p> ... </p> . </div>
</div>
88
</body>

89.

Селекторы
Селектор непосредственного cоседа <body>
<div id=“menu”>
.intro + p {
<p> .... </p>
color: red;
</div>
}
<div id=“main”>
<h1 class=“intro”>...</h1>
<p>.....</p>
<div> . <p> ... </p> . </div>
</div>
89
</body>

90.

Селекторы
Селектор cоседа
.intro + div {
color: red;
}
.intro ~ div {
...
}
<body>
<div id=“menu”>
<p> .... </p>
</div>
<div id=“main”>
<h1 class=“intro”>...</h1>
<p>.....</p>
<div> . <p> ... </p> . </div>
</div>
90
</body>

91.

Селекторы
Селектор атрибута
a[href^=“http:”] {
...
}
<body>
...
<a href=“http://...”>...</a>
...
<a href=“https://...”>...</a>
</body>
91

92.

Селекторы
Селектор атрибута
[href] – есть атрибут
[href=“”] – атрибут равен
[href^=“”] – начинается на
[href$=“”] – заканчивается на
[href*=“”] – содержит
[href~=“”] – содержит слово
92

93.

Селекторы
Селектор псевдокласса/псевдоэлемента
a:active {
...
}
93

94.

Селекторы
Псевдоклассы
:active
:hover
:link
:not
:target
:visited
94

95.

Селекторы
Псевдоэлементы
:first-letter
<p>
Long long time ago
In a galaxy far far away...
</p>
95

96.

Селекторы
Псевдоэлементы
:before
:after
<p>
[ ]
Long long time ago
In a galaxy far far away...
[ ]
</p>
96

97.

Селекторы
Псевдоэлементы
:first-line
:selection
...
97

98.

Свойства и значения
98

99.

Свойства и значения
.marked {
color: red;
background: #BAADF0 url(img/pic.png);
margin: 10px auto;
width: 20px;
font: bold 12px Tahoma !important
}
99

100.

Свойства и значения
.marked {
color: red;
background: #BAADF0 url(img/pic.png);
margin: 10px auto;
width: 20px;
font: bold 12px Tahoma !important
}
100

101.

Применение правил.
Наследование и каскад.
101

102.

Применение правил
1. Встроенные правила браузера
2. Правила браузера, заданные пользователем в
настройках
3. Стиль, заданный автором страницы
1. Наследуемые стили
2. Стили, заданные во внешних файлах
3. Стили, объявленные непосредственно на элементе
4. Правила с !important
102

103.

Наследование
<div class=“highlight”>
<p>...</p>
<p>...</p>
</div>
.highlight {
color: green;
border: 1px solid blue;
}
103

104.

СSS-фреймворки
104

105.

Фреймворки
Готовые библиотеки стилей позволяющие:
• Располагать элементы на странице заданным образом
• Колонки, строки фиксированных или «резиновых»
размеров
• Стилизовать типовые элементы интерфейса (input,
textarea, button) единым образом не меняя верстку
(просто навесив класс)
• Реализовать дополнительные элементы интерфейса,
которых нет в браузере без код на JavaScript
105