Интернет-программирование |
МИЭТ, 2017 |
Лекция 3.
HTML (окончание)
Интернет-программирование. |
МИЭТ, 2017 |
Из истории программирования
Интернет-программирование. Из истории программирования. |
МИЭТ, 2017 |
«В это не могли поверить», — говорила она. — «У меня был работающий компилятор, и никто им не пользовался. Мне говорили, что компьютер может выполнять только арифметические операции»
Грейс Хоппер
1906-1992
Контр-адмирал ВМФ США
Идея: программы лучше писать на языке, который ближе к английскому, нежели на языке, который ближе к машинному коду
В результате реализации этой идеи создала первый компилятор A-0 в 1952 г.
Соавтор языка COBOL (1959 г.) где в полной мере воплотилась её идея.
Впервые применила стандартизацию к тестированию компьютерных систем и компонентов, которые стали основой стандартов США в этой области
Интернет-программирование. HTML 5 |
МИЭТ, 2017 |
HTML5 — работа над ошибками XHTML
После провала XHTML W3C изменила парадигму поиска лучших решений.
Старый подход
Новый подход
Как?
«Мы придумаем такое решение, чтобы все было четко по правилам логики, тогда всем будет хорошо т. к. однозначно предсказуемо»
«Посмотрим, что наиболее часто используется, осмыслим почему это так, систематизируем, обобщим и внесем это в стандарт»
Посмотрим какие имена CSS классам и ID идентификаторам дают разработчики т. к. они чаще всего дают осмысленные имена. Тогда, те имена, которые встречаются чаще всего и есть самые важные
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
Иерархическая и |
Обозначение |
Оформление текста |
смысловая |
определенных типов |
|
разметка контента |
данных |
|
<main> |
<address> |
<mark> |
<header> |
<figure> |
<bdi> |
<nav> |
<figcaption> |
<wbr> |
<article> |
<time> |
<ruby> |
<section> |
|
|
<aside> |
|
|
<footer> |
|
|
|
Аналог по действию |
|
<div> |
<span> |
<b>, <i> и т.д. |
Контент это текст + все остальные типы данных, предназначенные для восприятия смысла, передаваемого от автора к читателю.
Интернет-программирование. HTML 5. Элемент main |
МИЭТ, 2017 |
main предназначен для выделения главного содержимого в сложном документе
HTML 4.*
<body>
<div class='leftCol'>...</div>
<div class='centerCol'>...</div>
<div class='rightCol'>...</div> </body>
HTML 5
<body>
<div class='leftCol'>...</div>
<main>...</main>
<div class='rightCol'>...</div>
</body>
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
HTML 4.*
<div class='article'>
<div class='header'> <h1>Заголовок</h1> <div class='navigation'>
Навигация по табам статьи </div>
</div>
<div id='tab_1' class='tab'>...</div> <div id='tab_2' class='tab'>...</div> <div class='sravka'> … </div>
<div class='footer'>
<div class='navigation'> Постраничная навигация
</div>
</div>
</div>
HTML 5
<article>
<header>
<h1>
</header>
</article>
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
HTML 4.*
<div class='article'>
<div class='header'> <h1>Заголовок</h1> <div class='navigation'>
Навигация по табам статьи </div>
</div>
<div id='tab_1' class='tab'>...</div> <div id='tab_2' class='tab'>...</div> <div class='sravka'> … </div>
<div class='footer'>
<div class='navigation'> Постраничная навигация
</div>
</div>
</div>
HTML 5
<article>
<header>
<h1>Заголовок</h1>
<nav>Навигация по табам статьи</nav> </header>
<section id='tab_1'>...</section> <section id='tab_2'>...</section> <aside>...</aside>
<footer>
<nav>Постраничная навигация</nav> </footer>
</article>
Элемент <header> запрещено размещать внутри элементов <footer>, <address> или другого элемента <header>
Элементы section и article могут быть вложены друг в друга без ограничений порядка следования и количества
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
|
Элемент |
Описание |
|
<main> |
Определяет основное содержимое (контент) документа |
|
<header> |
Группирует то, что можно отнести к верхнему колонтитулу |
|
|
(заголовку) некоего контента |
|
<nav> |
Группирует то, что можно отнести к навигации: закладки, |
|
|
постраничная навигация и т.д. |
|
<article> |
Группирует то, что можно отнести к законченной мысли. Может |
|
|
содержать вложенные article |
|
<section> |
Используется для группировки, тогда, когда не подходит по смыслу |
|
|
ни один другой текст семантической разметки. Внутри секции |
|
|
обязательно должен быть заголовок h* |
|
<aside> |
Группирует то, что связано с основным содержимым, но тем не |
|
|
менее должно быть вынесено (выделено) отдельно |
|
<footer> |
Группирует то, что можно отнести к нижнему колонтитулу |
|
|
документа: копирайты, иконки голосования для соцсетей, |
|
|
постраничная навигация и т.д. |
|
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
Применение section для создания правильной иерархии
<h1>Москва</h1> |
<h1>Москва</h1> |
|
<h2>САО</h2> |
<h2>САО</h2> |
|
<h2>ЗелАО</h2> |
<h2>ЗелАО</h2> |
|
|
<h3>Крюково</h3> |
<h3>Крюково</h3> |
|
<h3>Матушкино-Савелки</h3> |
<h3>Матушкино-Савелки</h3> |
<h2>ЦАО</h2> |
<section> |
|
<aside>Внимание</aside> |
<h2>ЦАО</h2> |
|
|
<h3>Кремль</h3> |
<aside>Внимание</aside> |
|
<h3>Остальное</h3> |
<h3>Кремль</h3> |
|
|
<h3>Остальное</h3> |
|
|
</section> |
Будет воспринято браузером как: |
Будет воспринято браузером как: |
|
1. Москва |
1. Москва |
|
1. |
САО |
1. САО |
2. |
ЗелАО |
2. ЗелАО |
|
1. Крюково |
1. Крюково |
|
2. Матушкино-Савелки |
2. Матушкино-Савелки |
4. |
ЦАО |
4. ЦАО |
5. |
Внимание |
5. Внимание |
6. |
Кремль |
1. Кремль |
7. |
Остальное |
2. Остальное |