cпецкурс 2014, занятие 9 (1 часть). Языки разметки
DESCRIPTION
Занятие со спецкурса в ОмГУ, 2014 годTRANSCRIPT
![Page 1: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/1.jpg)
Спецкурс ОмГУ-2014
Основы языков разметки, стандарты, реализации в
браузерах, DOM, суть HTML5, использование CSS
Занятие 9
![Page 2: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/2.jpg)
Спецкурс ОмГУ-2014
Языки разметки
• HTML 4.0 (1999)• XHTML 1.x (2001-2008)• XHTML 2• HTML 5.x
![Page 3: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/3.jpg)
Спецкурс ОмГУ-2014
HTML5
Релиз рекомендации по HTML5 от W3C запланирован:
• HTML 5 – конец 2014 г.• HTML 5.1 – 2016 г.
![Page 4: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/4.jpg)
Спецкурс ОмГУ-2014
Особенности XHTML
• XHTML – строгая версия языка разметки
• В XHTML имена тэгов и атрибутов только в нижнем регистре
• В XHTML все тэги должны быть закрыты
• Браузеры не обрабатывают документ, если в нём ошибка
• Нет обратной совместимости с HTML
![Page 5: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/5.jpg)
Спецкурс ОмГУ-2014
HTML, doctype
HTML4:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
![Page 6: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/6.jpg)
Спецкурс ОмГУ-2014
HTML 5
<!DOCTYPE HTML>
![Page 7: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/7.jpg)
Спецкурс ОмГУ-2014
Пример страницы
<!DOCTYPE html><html><head><meta charset=“UTF-8”><title>HTML 5 demo</title>
</head><body>Пример страницы
</body></html>
![Page 8: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/8.jpg)
Спецкурс ОмГУ-2014
Тэги HTML
До HTML 5:
http://www.w3.org/TR/html4/index/elements.html
aabbr
form
H1, H2, H3, H4, H5, H6
p
iframe
img
strong, small, i
ul, li table, thead, tbody
title
div
![Page 9: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/9.jpg)
Спецкурс ОмГУ-2014
СемантикаДо HTML 5:
<div id="header"></div><div id="nav"></div><div id="container">
<div id="section"><div class="article"></div><div class="article"></div>
</div><div id="sidebar"></div>
</div><div id="footer"></div>
![Page 10: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/10.jpg)
Спецкурс ОмГУ-2014
Семантика
C HTML 5:
<header></header><nav></nav><section>
<article></article><article></article>
</section><aside></aside><footer></footer>
![Page 11: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/11.jpg)
Спецкурс ОмГУ-2014
Семантика
<header><nav><section><article><aside><figcaption><figure><footer>
![Page 12: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/12.jpg)
Спецкурс ОмГУ-2014
Новые API HTML 5
• Canvas• Offline Web Apps• Drag-and-drop• History API• Web Storage• Geolocation• Web SQL Database• HTML File API
![Page 13: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/13.jpg)
Спецкурс ОмГУ-2014
![Page 14: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/14.jpg)
Спецкурс ОмГУ-2014
CSS
CSS - каскадные таблицы стилей.Используется для задания:
• цветов, шрифтов элементов• теней, фона• расположение блоков, отступов,
границ• анимации
![Page 15: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/15.jpg)
Спецкурс ОмГУ-2014
DOM, обработка элементов браузером
DOM – представление структуры HTML документа в иерархическом виде.
![Page 16: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/16.jpg)
Спецкурс ОмГУ-2014
DOM, обработка элементов
Примеры CSS селекторов:
• p { color: red; }• #active { color: red; }• a.hidden { display: none; }• header p { color: red; }• .main .news { color: red; }
![Page 17: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/17.jpg)
Спецкурс ОмГУ-2014
DOM, обработка элементов
img { border: 1px solid black; }
![Page 18: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/18.jpg)
Спецкурс ОмГУ-2014
DOM, обработка элементов
div.main p { width: 1000px; }
![Page 19: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/19.jpg)
Спецкурс ОмГУ-2014
DOM, обработка элементов
header .login .title { height: 20px; }
![Page 20: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/20.jpg)
Спецкурс ОмГУ-2014
Расположение блоков на странице
Строчные элементы – это элементы документа, которые являются частью строки.
Примеры: <img>, <span>, <a>,<q>, <code>
![Page 21: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/21.jpg)
Спецкурс ОмГУ-2014
Свойства строчных элементов
• Внутри строчных элементов можно поместить только строчные элементы.
• width, height не работают• несколько строчных элементов идущих
подряд помещаются на одной строке• можно выравнивать по вертикали,
используя свойство vertical-align.
![Page 22: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/22.jpg)
Спецкурс ОмГУ-2014
Свойства строчных элементов
Пример:
<p>Выполните<span>восемь</span>повторений
</p>
Пример на htmlbook.ru
![Page 23: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/23.jpg)
Спецкурс ОмГУ-2014
Расположение блоков на странице
Блочные элементы – элементы, которые отображаются на странице в виде прямоугольника.
Примеры: <div>, <form>, <p>, <table>, <h1>...<h6>, <ul>
![Page 24: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/24.jpg)
Спецкурс ОмГУ-2014
Свойства блочных элементов
• Элемент занимает всю доступную ширину
• Элемент начинается на новой строке• Блоки располагаются по вертикали друг
за другом• Можно выставить width, height
![Page 25: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/25.jpg)
Спецкурс ОмГУ-2014
Свойства блочных элементовПример:
<div><p>Первый абзац</p>Анонимный блок<p>Второй абзац</p>
</div>
Пример на htmlbook.ru
![Page 26: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/26.jpg)
Спецкурс ОмГУ-2014
Свойство float
Пример на htmlbook.ru
Определяет, по какой стороне будет выравниваться элемент, при этом
остальные элементы будут обтекать его с других сторон.
float: left | right | none | inherit
![Page 27: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/27.jpg)
Спецкурс ОмГУ-2014
Свойство float
Пример на htmlbook.ru
Задан float:left для желтого элемента:
![Page 28: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/28.jpg)
Спецкурс ОмГУ-2014
Свойство clear
Пример на htmlbook.ru
clear: left | right | none | both | inherit
Устанавливает, с какой стороны элемента запрещено его обтекание другими
элементами.
![Page 29: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/29.jpg)
Спецкурс ОмГУ-2014
Свойство clear
Пример на htmlbook.ru
Задан clear:left для второго блока:
![Page 30: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/30.jpg)
Спецкурс ОмГУ-2014
Свойство position
Пример на htmlbook.ru
position: absolute| fixed | relative | static
Устанавливает способ позиционирования элемента на странице относительно окна
браузера или других элементов.
![Page 31: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/31.jpg)
Спецкурс ОмГУ-2014
Свойства margin и padding
![Page 32: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/32.jpg)
Спецкурс ОмГУ-2014
Меню с помощью <ul>, <li>
<ul><li><a href="#">Home</a></li><li><a href="#">Products</a></li><li><a href="#">Services</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>
</ul>
![Page 33: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/33.jpg)
Спецкурс ОмГУ-2014
Меню с помощью <ul>, <li>
ul {list-style-type: none;background-image: url(navi_bg.png);height: 80px;width: 663px;margin: auto;
}
li {float: left;
}Ссылка на пример
![Page 34: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/34.jpg)
Спецкурс ОмГУ-2014
Кроссбраузерная и адаптивная вёрстка
Проблемы:
• Много браузеров, движков• Необходимость поддерживать старые
браузеры• Различные разрешения экранов
устройств• Необходимость оптимизации скорости
загрузки
![Page 35: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/35.jpg)
Спецкурс ОмГУ-2014
Своя вёрстка или готовый фреймворк?
![Page 36: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/36.jpg)
Спецкурс ОмГУ-2014
Twitter Bootstrap, ZURB Foundation
Отличные инструменты для быстрого прототипирования проекта
![Page 37: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/37.jpg)
Спецкурс ОмГУ-2014
Prototyping
![Page 38: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/38.jpg)
Спецкурс ОмГУ-2014
Twitter Bootstrap, ZURB Foundation
Готовые шаблоны для типичных веб-страниц:
![Page 39: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/39.jpg)
Спецкурс ОмГУ-2014
Twitter Bootstrap, ZURB Foundation:фреймворки для создания
веб-страниц
• Готовые шаблоны• Встроенные стили для таблиц, меню,
навигации, прогресс-баров и др. компонентов
• Темы оформления• Оптимизация под мобильные девайсы• Много плагинов, онлайн сервисов
![Page 40: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/40.jpg)
Спецкурс ОмГУ-2014
Twitter Bootstrap, ZURB Foundation
Bootsnip.com – генерация форм для Bootstrap:
![Page 41: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/41.jpg)
Спецкурс ОмГУ-2014
Полезности для браузера
• Developer Tools• Color picker плагины• Генераторы псевдотекста Lorem Ipsum• PixelPerfect• Ruler-плагины• Stylebot• LiveCSSEditor
![Page 42: Cпецкурс 2014, занятие 9 (1 часть). Языки разметки](https://reader034.vdocuments.net/reader034/viewer/2022042701/559cb9df1a28abcf558b4751/html5/thumbnails/42.jpg)
Спецкурс ОмГУ-2014
Что почитать?
• The W3C Markup Validation Service • Can I use? http://caniuse.com• Htmlbook.ru htpp://htmlbook.ru• http://css-tricks.com/video-screencasts/• http://jsfiddle.net/
Спецкурс ОмГУ-2014