Cпецкурс 2014, занятие 9 (1 часть). Языки разметки

Спецкурс ОмГУ-2014

Основы языков разметки, стандарты, реализации в

браузерах, DOM, суть HTML5, использование CSS

Занятие 9


Языки разметки

• HTML 4.0 (1999)• XHTML 1.x (2001-2008)• XHTML 2• HTML 5.x


HTML5

Релиз рекомендации по HTML5 от W3C запланирован:

• HTML 5 – конец 2014 г.• HTML 5.1 – 2016 г.


Особенности XHTML

• XHTML – строгая версия языка разметки

• В XHTML имена тэгов и атрибутов только в нижнем регистре

• В XHTML все тэги должны быть закрыты

• Браузеры не обрабатывают документ, если в нём ошибка

• Нет обратной совместимости с HTML


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">


HTML 5

<!DOCTYPE HTML>


Пример страницы

<!DOCTYPE html><html><head><meta charset=“UTF-8”><title>HTML 5 demo</title>

</head><body>Пример страницы

</body></html>


Тэги 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

http://www.w3.org/TR/html4/index/elements.html


СемантикаДо 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>


Семантика

C HTML 5:

<header></header><nav></nav><section>

<article></article><article></article>

</section><aside></aside><footer></footer>


Семантика

<header><nav><section><article><aside><figcaption><figure><footer>


Новые API HTML 5

• Canvas• Offline Web Apps• Drag-and-drop• History API• Web Storage• Geolocation• Web SQL Database• HTML File API



CSS

CSS - каскадные таблицы стилей.Используется для задания:

• цветов, шрифтов элементов• теней, фона• расположение блоков, отступов,

границ• анимации


DOM, обработка элементов браузером

DOM – представление структуры HTML документа в иерархическом виде.


DOM, обработка элементов

Примеры CSS селекторов:

• p { color: red; }• #active { color: red; }• a.hidden { display: none; }• header p { color: red; }• .main .news { color: red; }



img { border: 1px solid black; }



div.main p { width: 1000px; }



header .login .title { height: 20px; }


Расположение блоков на странице

Строчные элементы – это элементы документа, которые являются частью строки.

Примеры: <img>, <span>, <a>,<q>, <code>


Свойства строчных элементов

• Внутри строчных элементов можно поместить только строчные элементы.

• width, height не работают• несколько строчных элементов идущих

подряд помещаются на одной строке• можно выравнивать по вертикали,

используя свойство vertical-align.


Свойства строчных элементов

Пример:

<p>Выполните<span>восемь</span>повторений

</p>

Пример на htmlbook.ru

http://htmlbook.ru/samlayout/blochnaya-verstka/strochnye-elementy


Расположение блоков на странице

Блочные элементы – элементы, которые отображаются на странице в виде прямоугольника.

Примеры: <div>, <form>, <p>, <table>, <h1>...<h6>, <ul>


Свойства блочных элементов

• Элемент занимает всю доступную ширину

• Элемент начинается на новой строке• Блоки располагаются по вертикали друг

за другом• Можно выставить width, height


Свойства блочных элементовПример:

<div><p>Первый абзац</p>Анонимный блок<p>Второй абзац</p>

</div>


http://htmlbook.ru/samlayout/blochnaya-verstka/blochnye-elementy


Свойство float


Определяет, по какой стороне будет выравниваться элемент, при этом

остальные элементы будут обтекать его с других сторон.

float: left | right | none | inherit

http://htmlbook.ru/css/float


Свойство float


Задан float:left для желтого элемента:

http://htmlbook.ru/css/float


Свойство clear


clear: left | right | none | both | inherit

Устанавливает, с какой стороны элемента запрещено его обтекание другими

элементами.

http://htmlbook.ru/css/clear


Свойство clear


Задан clear:left для второго блока:

http://htmlbook.ru/css/clear


Свойство position


position: absolute| fixed | relative | static

Устанавливает способ позиционирования элемента на странице относительно окна

браузера или других элементов.

http://htmlbook.ru/css/position


Свойства margin и padding


Меню с помощью <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>


Меню с помощью <ul>, <li>

ul {list-style-type: none;background-image: url(navi_bg.png);height: 80px;width: 663px;margin: auto;

}

li {float: left;

}Ссылка на пример

http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html


Кроссбраузерная и адаптивная вёрстка

Проблемы:

• Много браузеров, движков• Необходимость поддерживать старые

браузеры• Различные разрешения экранов

устройств• Необходимость оптимизации скорости

загрузки


Своя вёрстка или готовый фреймворк?


Twitter Bootstrap, ZURB Foundation

Отличные инструменты для быстрого прототипирования проекта


Prototyping



Готовые шаблоны для типичных веб-страниц:


Twitter Bootstrap, ZURB Foundation:фреймворки для создания

веб-страниц

• Готовые шаблоны• Встроенные стили для таблиц, меню,

навигации, прогресс-баров и др. компонентов

• Темы оформления• Оптимизация под мобильные девайсы• Много плагинов, онлайн сервисов



Bootsnip.com – генерация форм для Bootstrap:


Полезности для браузера

• Developer Tools• Color picker плагины• Генераторы псевдотекста Lorem Ipsum• PixelPerfect• Ruler-плагины• Stylebot• LiveCSSEditor


Что почитать?

• 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/


http://validator.w3.org/

http://caniuse.com

//localhost/htpp/::htmlbook.ru

http://css-tricks.com/video-screencasts/

http://jsfiddle.net/


Вопросы?

https://ru.wikipedia.org/wiki/Nginx

https://ru.wikipedia.org/wiki/Nginx

Education

Cпецкурс 2014, занятие 9 (1 часть). Языки разметки