-
Notifications
You must be signed in to change notification settings - Fork 0
/
lesson02.html
333 lines (303 loc) · 16 KB
/
lesson02.html
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Lesson 2 - Web Master Course</title>
<meta name="description" content="Web Master Course HTML and CSS">
<meta name="author" content="Alexandr Cherepanov">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/clear.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/github.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Основные теги HTML</h1>
</section>
<section>
<h2>HTML</h2>
<ul>
<li>HTML - HyperText Markup Language (язык разметки гипертекста)</li>
<li>HTML основан на SGML (Standard Generalized Markup Language)</li>
<li>HTML 4 основывался на необходимости оформления документов</li>
</ul>
</section>
<section>
<h2>XHTML</h2>
<ul>
<li>XHTML - eXtensible HyperText Markup Language (расширяемый язык разметки гипертекста)</li>
<ul>
<li>В действительности не расширяемый</li>
</ul>
<li>XHTML - HTML с более строгими правилами</li>
<li><strong>Строгие правила = лучше совместимость = приложения лучше работают на разных устройствах</strong></li>
</ul>
</section>
<section>
<h2>Версии HTML и XHTML</h2>
<ul>
<li>HTML 4.01 - Последняя утвержденная версия HTML (1999 г.)</li>
<li>XHTML 1.0 - Основан на HTML 4.01</li>
<li>XHTML 1.1 - Очень строгая версия, для оформления допускается использовать только CSS</li>
<li>XHTML 2.0 - Разработка закрыта в 2006 г.</li>
<li>HTML 5 - Разработка не завершена</li>
</ul>
</section>
<section>
<h2>Структура HTML</h2>
<pre><code data-trim>
<TITLE>
A Simple Document
</TITLE>
<P> A simple HTML Document.
</code></pre>
</section>
<section>
<h2>Структура XHTML</h2>
<pre><code data-trim>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> A Simple Document </title>
</head>
<body bgcolor="#FFFFFF">
<p> A simple HTML Document. </p>
</body>
</html>
</code></pre>
</section>
<section>
<h2>Структура HTML 5</h2>
<pre><code data-trim>
<!DOCTYPE html>
<html>
<head>
<title> A Simple Document </title>
</head>
<body>
<p> A simple HTML Document. </p>
</body>
</html>
</code></pre>
</section>
<section>
<h2>Doctype</h2>
<ul>
<li>Strict (Строгий)
<p class="example"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p>
</li>
<li>Transitional (Переходный)
<p class="example"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p>
</li>
<li>Frameset (С фреймами)
<p class="example"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></p>
</li>
</ul>
</section>
<section data-markdown>
## Правила XHTML
- Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
- Значения любых атрибутов необходимо заключать в кавычки.
- Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
- Должна соблюдаться правильная вложенность тегов.
- Нельзя использовать сокращенные атрибуты тегов.
- Вместо атрибута name следует указывать id.
- Следует определять DTD (document type definition, описание типа документа) с помощью элемента <!DOCTYPE>.
</section>
<section>
<h2>Спец символы</h2>
<img src="img/spec1.png" height="400" />
<div><a href="http://htmlbook.ru/samhtml/tekst/spetssimvoly">Все спецсимволы по ссылке</a></div>
</section>
<section>
<h2>Спец символы</h2>
<img src="img/spec2.png" height="140" />
<img src="img/spec3.png" height="350" />
</section>
<section>
<h2><p></h2>
<p>Определяет текстовый абзац. Тег <var><p></var> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой разрывом.</p>
<pre><code data-trim>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</code></pre>
<p>Все множественные пробелы (tab, enter) в HTML преобразуются в один пробел.</p>
</section>
<section>
<h2><br /></h2>
<p>Тег <var><br></var> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <var><p></var>, использование тега <var><br></var> не добавляет пустой отступ перед строкой.</p>
<pre><code data-trim>
<p>Лето в стране настало,<br />
Вереск опять цветет.<br />
Но некому готовить<br />
Вересковый мед.</p>
</code></pre>
<p>Используется при написании адреса, стихов и др.</p>
</section>
<section>
<h2><em></h2>
<p>Тег <var><em></var> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.</p>
<pre><code data-trim>
<p><em>Lorem ipsum dolor sit amet</em></p>
</code></pre>
</section>
<section>
<h2><strong></h2>
<p>Тег <var><strong></var> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.</p>
<pre><code data-trim>
<p><strong>Lorem ipsum dolor sit amet</strong></p>
</code></pre>
</section>
<section>
<h2><q></h2>
<p>Тег <var><q></var> используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.</p>
<pre><code data-trim>
<p>Станислав Лец утверждал: <q>Чаще всего выход там, где был
вход</q>.</p>
</code></pre>
</section>
<section>
<h2><code></h2>
<p>Тег <var><code></var> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера <var><code></var> как моноширинный текст уменьшенного размера.</p>
<pre><code data-trim>
<p><code>
function checkParent (src, dest) {<br />
while (src != null) {<br />
if (src.tagName == dest) return src;<br />
src = src.parentElement;<br />
}<br />
return null;<br />
}</code></p>
</code></pre>
</section>
<section>
<h2><abbr></h2>
<p>Тег <var><abbr></var> указывает, что последовательность символов является аббревиатурой. С помощью атрибута <var>title</var> дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы.</p>
<pre><code data-trim>
<p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI
</abbr></p>
</code></pre>
</section>
<section>
<h2><dfn></h2>
<p>Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег <var><dfn></var> применяется для выделения таких терминов при их первом появлении в тексте.</p>
<pre><code data-trim>
<p><dfn>Капителью</dfn> в типографике называется текст, набранный
прописными буквами уменьшенного размера.</p>
</code></pre>
</section>
<section>
<h2><kbd></h2>
<p>Тег <var><kbd></var> используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере <var><kbd></var> моноширинным шрифтом.</p>
<pre><code data-trim>
<kbd>&lt;Ctrl&gt;+&lt;Backspace&gt;</kbd>
</code></pre>
</section>
<section>
<h2><samp></h2>
<p>Элемент <var><samp></var> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <var><samp></var> с помощью моноширинного шрифта.</p>
<pre><code data-trim>
<p>В результате выполнения скрипта вы увидите текст <samp>Ваш
браузер поддерживает JavaScript 1.3</samp>, в том случае, если браузер
работает с версией 1.3.</p>
</code></pre>
</section>
<section>
<h2><var></h2>
<p>Тег <var><var></var> используется для выделения переменных компьютерных программ, математических и физических формул. Браузеры обычно помечают текст в контейнере <var><var></var> курсивным начертанием.</p>
<pre><code data-trim>
<p>В данном примере делается запрос к базе данных для получения поля
<var>content_title</var>
из таблицы <var>content</var>, причем должно удовлетворяться условие
<code>section_id = 1</code>.</p>
</code></pre>
</section>
<section>
<h2><blockquote></h2>
<p>Тег <var><blockquote></var> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.</p>
<pre><code data-trim>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</blockquote>
</code></pre>
</section>
<section>
<h2><pre></h2>
<p>Элемент <var><pre></var> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.</p>
<pre><code data-trim>
<pre>
- -----
----- |-----
||----| ----||
||----- -----||
||-----| |-----||
|| ----- ------||
||- ----| |------||
||---||-- -------||
||--|| --| |-------||
|| -|| |-- --- - --||
|| -|| --|-|--| - ---|
|---|| |-----| |-----|
|---|| |---- |-----|
|----| --- |-----|
|----- ------|
</pre>
</code></pre>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>