Артем Кувалдин: Основы HTML
114
Transcript of Артем Кувалдин: Основы HTML
HTML
Кувалдин Артем[email protected]
www.princexml.com
Prince - Non-commercial License
This document was created with Prince, a great way of getting web content onto paper.
История HTML
1986Международная организация по стандартизации приняла стандарт
"Standard Generalized Markup Language (SGML)".
Системы логической, структурной разметки любых разновидностей
текстов.
3
1990
Тим Бернерс-Ли
4
HTMLHyper Text Markup Language
1. HyperText — текст, содержащий узлы перехода между ними
2. Mark—up — это разметка
3. Language — это язык (HTML)
5
HTMLHTML — это стандартный язык разметки документов в интернете. Язык
интерпретируется браузерами(не только) и отображается в удобной
для человека форме.
6
HTML• HTML 1.2 — 1993
• HTML 2.0 — 22 сентября 1995 года
• HTML 3.2 — 14 января 1997 года
• HTML 4.0 — 18 декабря 1997 года
• HTML 4.1 — 24 декабря 1999 года
• HTML 5 — … ~ 2014
7
Есть альтернативы
XMLXML (eXtensible Markup Language) — расширяемый язык разметки для
хранения структурированных данных.
9
XHMLXHTML (Extensible Hypertext Markup Language) — семейство языков
разметки веб-страниц на основе XML, повторяющих и расширяющих
возможности HTML 4.
10
Кто занимаетсяразработкой веб-
стандартов?
W3CКонсорциум Всемирной паутины (англ. World Wide Web Consortium,
W3C) — организация, разрабатывающая и внедряющая
технологические стандарты для Всемирной паутины.
12
Задачи W3C• Разработка для Интернета единых принципов и стандартов
(«Рекомендаций», англ. W3C Recommendations), которые затем
внедряются производителями программ и оборудования.
• Сделать сеть доступной для людей с ограниченными возможностями.
• ...
13
HTML
Деревня Приветствую тебя, пустынный уголок, приют спокойствия,
трудов и вдохновенья, где льется дней моих невидимый поток на лоне
счастья и забвенья. Я твой — я променял порочный двор Цирцей,
роскошные пиры, забавы, заблужденья на мирный шум дубров, на
тишину полей, на праздность вольную, подругу размышленья.
15
Деревня
Приветствую тебя, пустынный уголок,
Приют спокойствия, трудов и вдохновенья,
Где льется дней моих невидимый поток
На лоне счастья и забвенья.
Я твой — я променял порочный двор Цирцей,
Носкошные пиры, забавы, заблужденья
На мирный шум дубров, на тишину полей,
На праздность вольную, подругу размышленья.
16
[начало заголовока] Деревня [конец заголовка]
[начало абзаца] Приветствую тебя, пустынный уголок, [перенос]
Приют спокойствия, трудов и вдохновенья, [перенос]
Где льется дней моих невидимый поток [перенос]
На лоне счастья и забвенья. [конец абзаца]
[начало абзаца]Я твой—я променял порочный двор Цирцей, [перенос]
Носкошные пиры, забавы, заблужденья [перенос]
На мирный шум дубров, на тишину полей, [перенос]
На праздность вольную, подругу размышленья. [конец абзаца]
17
ТегТег — элемент языка разметки, заключенный между символами < и >.
18
Теги бывают• Двойные <div> </div>
• Одиночные <input/>
19
<h2> Деревня </h2>
<p> Приветствую тебя, пустынный уголок, <br/>
Приют спокойствия, трудов и вдохновенья, <br/>
Где льется дней моих невидимый поток <br/>
На лоне счастья и забвенья. </p>
<p> Я твой — я променял порочный двор Цирцей, <br/>
Носкошные пиры, забавы, заблужденья <br/>
На мирный шум дубров, на тишину полей, <br/>
На праздность вольную, подругу размышленья. </p>
20
Теги регистронезависимы<html>,<HTML> или даже <hTmL> — одинаковые теги.
21
HTMLВ html теги можно не закрывать.
<p>Большой абзац.</p>
<p>Другой большой абзац.</p>
Крайне не рекомендуется так делать.
01.
02.
22
Вложенность тегов<i>очень <b> длинный текст </b> очень </i> — Правильно
<i>очень<b> длинный текст </i> очень</b> — Неправильно
<!--Браузер это поймет так:-->
<i>очень<b> длинный текст </b> </i> <b>очень</b>
01.
02.
03.
04.
23
Атрибуты тегов<div class="he'a'der"> — в двойных кавычках
<input checked='checked'> — в апострофах
<div class=footers> — без кавычек
<input checked> — одиночные атрибуты
01.
02.
03.
04.
25
САМОЕ ВАЖНОЕ<!--Комментарий-->
26
HTML-теги
Теги верхнего уровня<!DOCTYPE>
<html>
<head>
<!--Информация о странице-->
</head>
<body>
<!--Содержимое страницы-->
</body>
</html>
01.
02.
03.
04.
05.
06.
07.
08.
09.
28
Теги верхнего уровня<!DOCTYPE — для указания типа документа.
Но о нем немного позже.
29
Теги верхнего уровня• <html>
• Корневой тег, в который вкладываются все остальные теги страницы.
30
Теги верхнего уровня• <head>
• Содержит информацию о странице:
• Заголовок
• Подключаемые файлы
• Мета информацию
• <body>
• Визуальное содержимое страницы
31
Теги внутри <head><title>Заголовок страницы</title>
32
Мета—теги<meta> — определяет мета-теги, которые используются для хранения
информации, предназначенной для браузеров и поисковых систем.
33
Мета—теги<meta http-equiv=" Content-Type "
content=" text/html; charset=utf-8 "/>
<meta http-equiv=" X-UA-Compatible " content=" IE=7 " />
Атрибуты:
• http-equiv — устанавливает HTTP-заголовок
• content — значение атрибута
01.
02.
34
Мета—теги<meta name=" Keywords "
content=" Екатеринбург, портал, новости, форумы "/>
<meta name=" Description "
content=" Хабрахабр — самое крупное в Рунете.. "/>
• атрибут name — устанавливает модификатор мета-тега
01.
02.
35
Viewport
36
Viewport<meta name=" viewport "
content=" width=device-width,
maximum-scale=1,initial-scale=1,user-scalable=no "/>
• width — ширина
• maximum-scale — максимальный масштаб
• initial-scale — начальный масштаб
• user-scalable — изменение масштаба (yes/no)
37
OpenGraph
38
OpenGraph<meta property=" og:title "
content=" Попробуйте Яндекс.Диск — новый сервис.. "/>
• og:description — описание
• og:image — превью-картинка
• og:video — видео
• og:url — путь к странице
39
"Текстовые" теги
"Текстовые" теги• <p> — paragraph
• Абзац
• По умолчанию отступы сверху и снизу
• <h1>..<h6> — header
• Заголовок: h1, h2, h3, h4, h5, h6
• <br/> — break
• Разрыв строки
41
ДеревняПриветствую тебя, пустынный уголок,
Приют спокойствия, трудов и вдохновенья,
Где льется дней моих невидимый поток
На лоне счастья и забвенья.
Я твой — я променял порочный двор Цирцей,
Носкошные пиры, забавы, заблужденья
На мирный шум дубров, на тишину полей,
На праздность вольную, подругу размышленья.
42
<h2> Деревня </h2>
<p> Приветствую тебя, пустынный уголок, <br/>
Приют спокойствия, трудов и вдохновенья, <br/>
Где льется дней моих невидимый поток <br/>
На лоне счастья и забвенья. </p>
<p> Я твой — я променял порочный двор Цирцей, <br/>
Носкошные пиры, забавы, заблужденья <br/>
На мирный шум дубров, на тишину полей, <br/>
На праздность вольную, подругу размышленья. </p>
43
"Текстовые" теги• <pre> — preformatted
• сохраняет пробелы и разрывы
• <hr> — horizontal rule
• горизонтальная линия
• <b>[bold], <i>[italic], <blockout>, <mark>
• выделение текста
44
Ссылки
Ссылки• <a href="..">я ссылка</a> — anchor (якорь)
• атрибут href — задает адрес документа, на который следует перейти
46
Ссылки• <a href="..">виды ссылок</a>
• [протокол]://ya.ru
• /maps
• navigator
• #name
• ../monkey.zip
• mailto:[email protected]
47
Хэш-ссылки<a href="#line">Хэш-ссылки</a>
очень много текста
<a name="line">нужная строка</a>
01.
02.
03.
48
Ссылки• <a href=".." target="..">я ссылка</a>
• атрибут target — имя окна или фрейма, куда браузер будет загружать
документ
• _blank
• _self
• _parent
• _top
49
Вложенные ссылки<a href="map">Ya <a href="navigator">nd</a> ex</a>
<!--Браузер это поймет так:-->
<a href="map">Ya</a><a href="navigator">nd</a>ex
Yandex
Вкладывать ссылки в ссылки нельзя!
01.
02.
03.
50
Не огорчайте Леонида Аркадьевича
Не вкладывайте ссылки в ссылки
Списки
Маркировaнный список<ul> <!--unordered list-->
<li>первый уровень</li> <!--list item-->
<ul>
<li>второй уровень</li>
<li>второй уровень</li>
</ul>
</ul>
01.
02.
03.
04.
05.
06.
07.
53
Маркировaнный список• первый уровень
• второй уровень
• второй уровень
• первый уровень
54
Нумерованный список<ol> <!--order list-->
<li>первый уровень</li>
<ol>
<li>второй уровень</li>
<li>второй уровень</li>
</ol>
</ol>
01.
02.
03.
04.
05.
06.
07.
55
Нумерованный список1. первый уровень
1. второй уровень
2. второй уровень
3. первый уровень
56
Список определений<dl> <!--definition list-->
<dt>HTML-документ</dt> <!--definition term-->
<dd>Обычный текстовый файл, который может содержать в
себе текст, теги и стили. Изображения и другие объекты
хранятся отдельно.</dd> <!--definition description-->
</dl>
01.
02.
03.
04.
57
Список определенийHTML-документ
Обычный текстовый файл, который может содержать в себе текст,
теги и стили. Изображения и другие объекты хранятся отдельно.
58
Таблицы
Таблицы<table>
<thead><th></th> <th></th> <th></th></thead>
<tbody><td></td> <td></td> <td></td>
<td></td> <td></td> <td></td></tbody>
<tfoot><td></td> <td></td> <td></td></tfoot>
</table>
60
Таблицы<table>
<thead><th></th></thead>
<tfoot><td>..</td></tfoot>
<tbody>
<tr><td>..</td></tr>
<tr><td>..</td></tr>
</tbody>
</table>
01.
02.
03.
04.
05.
06.
07.
08.
61
Таблицы<table>
<td></td> <td></td><td rowspan=2></td>
<td colspan=2></td>
<td></td> <td></td> <td></td>
</table>
62
Таблицы<table>
<tr><td rowspan=2></td><td></td><td></td></tr>
<tr> <td></td> <td colspan="2"></td> <td></td> </tr>
<tr><td></td><td></td><td></td></tr>
</table>
01.
02.
03.
04.
05.
63
Замещаемыеэлементы
Замещаемые элементы<img width="100" height="200" src="/cat.png" alt="котик">
• атрибуты width,height — ширина или высота задается в пикселах
• атрибут src — url картинки
• атрибут alt — альтернативный текст, который выводится, если
изображение не загрузилось
65
Замещаемые элементы<img src="/cat.png" alt="котик">
66
Замещаемые элементы<img height="400" src="/cat.png" alt="котик">
67
Замещаемые элементы<img height="400" width="150" src="/cat.png" alt="котик">
68
Аудио и видео<audio><source src="music.mp3"></audio>
• autoplay — проигрывание при загрузке страницы
• controls — панель управления плеером
• loop — автоповтор
• preload — загрузка файла вместе с загрузкой страницы
• src — путь до трека
69
Аудио и видео<video height="300" poster="pictures/poster.jpg"><source src="pictures/
film.mp4"></video>
70
Замещаемые элементы<progress value="30" max="100"></progress>
71
Замещаемые элементы<canvas width="200" height="100"></canvas>
72
Формы
Формы
74
Формы<input type=".." value=".." name=".."/>
• text —поле для ввода
• password —
• checkbox —✓ чай кофе танец
• radio —• чай кофе
• button —я кнопка
• file — Browse...
• submit/reset —Submit /Reset
75
Формы в HTML5• color —
• date —
• email —
• url —
• number —
• range —
• search —
• month —
76
Другие элементы форм• <keygen name="security"></keygen>
• <textarea>много текста</textarea>много текста
• <select><option>Чебурашка</option>..</select>Чебурашка
77
Атрибуты формы• value — значение
• name — название поля
• size — ширина поля в количсте символов
• checked = “checked" (radio, checkbox)
• selected = “selected" (option)
• tabindex — порядок получения фокуса
• required — обязательно заполнить (HTML5)
• multiple — множественная загрузка файлов(HTML5)
78
Формы<form method=".." action="example/handler.php">..</form>
• method
• GET — передает данные в урле
• POST — в запросе
79
GET• Передача небольших текстовых данных на сервер (например, поиск
по сайту)
• http://yandex.ru/
yandsearch?text=%D1%8F%D0%BD%D0%B4%D0%B5%D0%BA%D1%81&clid=1955451&lr=54
80
POST• Отправка комментариев, паролей
• Пересылка файлов (фотографий, архивов, программ и др.)
81
Формы<form action="/" method="GET">
<input type="text" name="text" value="текст">
<input type="radio" name="drink" checked>
<input type="radio" name="drink">
<input type="checkbox" name="tea" checked>
<input type="checkbox" name="coffee" checked>
</form>
01.
02.
03.
04.
05.
06.
07.
82
Формы
inner text
• чай кофе
✓ чай ✓ кофе
Submit
?text=inner%20text&drink=on&tea=on&coffee=on
83
Фреймы
Фреймы<iframe>Альтернативный текст</iframe>
• src
• width
• height
85
Фреймы
86
Блочные истрочныеэлементы
Блочные и строчные элементыБлочный элемент
• До и после себя генерирует разрыв потока (строки)
Строчные элементы(инлайн)
• Находится внутри строки
• Переносится на следующую строку, если не влазит в текущую
• Ни единого разрыва
88
Блочные и строчные элементы<div>
• division — блочный элемент
<span>
• инлайн элемент
89
Блочные и строчные элементыВекторное поле упорядочивает функциональный анализ, что
несомненно приведет нас к истине. Предел последовательности
накладывает действительный функциональный анализ, как и
предполагалось. Интеграл Пуассона стабилизирует бином Ньютона,
дальнейшие выкладки оставим студентам в качестве несложной
домашней работы.
90
Блочные и строчные элементы<span>Векторное поле упорядочивает функциональный
анализ, что несомненно приведет нас к
истине.</span> Предел последовательности накладывает
действительный функциональный анализ, как и предполагалось.
Интеграл Пуассона стабилизирует бином Ньютона, дальнейшие
выкладки оставим студентам в качестве несложной домашней работы.
91
Блочные и строчные элементыВекторное поле упорядочивает функциональный анализ, что
несомненно приведет нас к истине. Предел последовательности
накладывает действительный функциональный анализ, как и
предполагалось. Интеграл Пуассона стабилизирует бином Ньютона,
дальнейшие выкладки оставим студентам в качестве несложной
домашней работы.
92
Блочные и строчные элементы<div>Векторное поле упорядочивает функциональный
анализ, что несомненно приведет нас к истине.</div>
Предел последовательности накладывает действительный
функциональный анализ, как и предполагалось. Интеграл Пуассона
стабилизирует бином Ньютона, дальнейшие выкладки оставим
студентам в качестве несложной домашней работы.
93
Блочные и строчные элементыВекторное поле упорядочивает функциональный анализ, что
несомненно приведет нас к истине.
Предел последовательности накладывает действительный
функциональный анализ, как и предполагалось. Интеграл Пуассона
стабилизирует бином Ньютона, дальнейшие выкладки оставим
студентам в качестве несложной домашней работы.
94
Блочные и строчные элементы• Блочные
• <html>, <body>, <div>, <p>, <hr>, <pre>, <blockquote>
• Строчные
• <span>, <a>, <em>, <br>, <del>, <ins>, <i>
95
Блочные и строчные элементы• Строчные в блочные
• Строчные в строчные
• Блочные в блочные
Блочные в строчные НЕЛЬЗЯ
96
Блочные и строчные элементы<span> Однажды в студёную
<div>зимнюю пору</div> лошадка... </span>
<span> Однажды в студёную </span>
<div>зимнюю пору</ div> лошадка..
01.
02.
97
Поток
ПотокПоток — порядок отображения элементов на странице.
Чем раньше в коде расположен элемент, тем выше он расположен на
странице.
99
HTML 5
HTML 5• <aside> — боковая панель в статье
• <article> — независимое, автономное содержание
• <head>
• <footer>
• <section> — главы, колонтитулы и другие разделы документа
• <time datetime="2008-02-14"> — указание даты и времени
• <menu> — отображение списка меню
• <keygen> — шифрование для формы
101
HTML-entity
html-entityСимвол Десятичный код html-код Описание
" &# 34; & qout; Двойная кавычка
' &# 39; & apos; Апостроф
& &# 38; & amp; Амперсанд
< &# 60; & lt; Меньше
> &# 62; & gt; Больше
&# 160; & nbsp; Неразрывный пробел
104
Валидность
ВалидностьВалидность — это соответствие стандартам, например, таким как:
1. Все теги закрыты или одиночные
2. Нет блочных тегов внутри строчных
3. У всех картинок указаны размеры
4. ...
106
Зачем нужнавалидность?
Чтобы отсечьошибки,
связанные сневалидностью
!DOCTYPE
!DOCTYPE• предназначен для указания типа текущего документа
• <!DOCTYPE [Элемент верхнего уровня] [Публичность]
"[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">
111
!DOCTYPE• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/
TR/html4/strict.dtd">
• <!DOCTYPE html> <!--html5-->
112
Ссылки• OpenGraph (http://ogp.me/)
• ViewPort (http://clck.ru/8pPSV)
• HTML-entity (http://clck.ru/8pPSd)
• Справочник тегов (http://htmlbook.ru/html)
• W3C (http://www.w3.org/)
113
Спасибо!
