Файл: Языки гипертекстовой разметки.pdf

• были удалены устаревшие элементы, такие как center, font и strike;
• улучшение правил парсинга сделало его более гибким и совместимым;
• появились новые элементы video, time, nav, section, progress, meter, aside и canvas;
• новые атрибуты для инпутов, в том числе email, URL, dates и times ;
• новые атрибуты, в том числе charset, async и ping;
• новые API с офлайн кэшированием и поддержкой drag-and-drop и т.д;
• поддержка векторной графики без сторонних программ типа Silverlight или Flash;
• поддержка MathML улучшила отображение математических обозначений;
• благодаря JS Web worker API, JS теперь может работать в фоновом режиме;
• глобальные атрибуты типа tabindex, repeat и id теперь можно применять ко всем элементам.

Обновление стало невероятно глобальным, первое время HTML5 считали чуть ли не самостоятельным языком, однако после введения повсеместной поддержки данного стандарта сама формулировка HTML5 стала не корректной.

Язык развивается и по сей день и в будущем было принято отойти от практики выдачи номерных версий html. Все изменения будут вносится в существующую спецификацию, а язык будет носить название просто HTML.

Такие глобальные обновления не могли пройти сами собой, не задев сопряжённые технологии. Вместе с HTML5 вышел в мир и новый стандарт каскадных таблиц стилей CSS3.

Так как с момента появления каскадных стилей было принято разделять разметку и оформление, введение такого большого числа новшеств, тегов и атрибутов в язык разметки не могло не задеть и язык оформления стилей. Новые технологии заставляли идти в ногу со временем и давать возможность добиваться современного результата веб страниц без применения сторонних технологий.

Также глобальное изменение претерпела не только структура самого документа, список используемых тегов и поддерживаемых технологий, но методика работы с ним и принципы построения документа.

Изначально все документы на HTML были линейным текстом c небольшим визуальным форматированием, затем были добавлены изображения и эти документы приобрели более презентабельный вид. Но с течением времени росли и потребности пользователей, с момента ввода в спецификацию HTML поддержки таблиц, веб документы стали строится по более сложной схеме. Появилась так называемая табличная вёрстка.

При этой вёрстке ведь документ представлялся в виде большой таблицы из строк и столбцов, некоторые из них были объединены в большие ячейки, таким образом получалась сложная структура, позволяющая добавить на страницу дополнительные информативные и функциональные элементы, такие как меню навигации, информационные поля, визуальные украшения и фирменные знаки.

Рис 1. Пример разделения таблицы с применением табличной вёрстки

Данный метод существовал очень долго, но в конце концов изжил себя, так как для описания таблиц требуется описать много дополнительных тегов и атрибутов, код страницы становился перегружен информацией.

Спустя некоторое время на смену табличной вёрстке пришла, так называемая, блочная.

Это произошло с введением в спецификацию тега DIV

Блочная вёрстка давала больше возможностей при меньшей нагруженности кода страницы.

Пользователи не видели разницы, так как страница визуально могла выглядеть точно так же, но создание и поддержка страниц с блочной вёрсткой не только были проще и быстрее, но и давали больше возможностей и большую производительность.

Рис 2. Пример структуры страницы с применением блочной вёрстки.

Глава 4. История развития CSS

CSS(Cascading Style Sheets) с английского переводится как каскадные таблицы стилей, - это язык, который используется как средство оформления web-страниц, а именно для работы с шрифтами, цветами, полями, таблицам, картинками, расположением элементов.

Основной целью, которая послужила для разработки языка CSS, являлось разделение разметки содержимого (которое написанного на HTML или другом языке программирования) и представления документа (написанного на CSS). Результат этого разделения помогает увеличить доступность документа, предоставить большую гибкость, а также уменьшить сложность и повторяемость в структурном содержимом, создает удобное описание дизайна и стилистики web-страницы и ее содержимого. Еще CSS дает возможность предоставить один документ в различных стилях или методах вывода (например, таких как экранное представление, чтение голосом, печать).

Первое упоминание о CSS было в 1994 году, когда Хоком Виум Ли предложил использовать CSS (Каскадные таблицы стилей) для стилистического оформления web-страниц. У него не сразу получилось продвинуть свою технологию, - только через пару лет ему удалось привлечь внимание к CSS. Итак, 17 декабря 1996 года опубликована первая спецификация (CSS1) и она была рекомендована к использованию Консорциумом Всемирной паутины (W3C).

После небольшого успеха положение дел у технологии CSS пошли куда лучше и 12 мая 1998 года (через 2 года) была принята рекомендация W3C для CSS2. Следующим этапом была CSS 2.1 - версия W3C от 8 сентября 2009 года, она была построена на базе CSS2, и была работой над исправлением существующих ошибок.

Сегодня актуальна версия CSS3, которая максимально расширена по сравнению с предыдущими версиями. CSS3 включают эффекты теней, а также скругленные углы у блоков. В CSS3 появилась возможность устанавливать изображения в качестве фона и использовать их как границы. Намного проще и удобнее стала работа с анимацией – теперь для ее создания достаточно возможностей самой CSS3, стало не нужно работать с языком Java Script.

Были внесены такие новшества как:

• Фон и границы: CSS3 позволяет разработчикам по-новому стилизировать фон и границы HTML-элементов. Ниже представлены CSS-свойства, которые позволяют это сделать:
• border-radius – позволяет закруглять границы (border) HTML-элементов
• border-break – заканчивает границу элемента, которая была рассположена в точке разрыва (конец страницы, колонки, cтроки)
• border-image – устанавливает изображение как границу (вместо использования стилизированных границ)
• box-shadow – добавляет тень элементу
• Многоколоночное расположение элементов: Данная возможность CSS3 позволяет отображать информацию в нескольких колонках, с помощью меньшего количества HTML-кода. Содержание в многоколоночном элементе распределяется по принципу: от колонки к колонке. Сolumn box находится в родительском div-контейнере, содержащему контент. Свойства сolumn-count и column-width определяют количество колонок и их ширину. Все колонки равны по ширине, высоте и имеют определенное расстояние между собой.
• Расположение элементов: Главная задача данного модуля CSS - разделение контента и представления. CSS3 упрощает позиционирование элементов двумя новыми методами: шаблонное позиционирование (Template Based Positioning) и отображение в виде закладок (Tabbed Displays). Шаблонное позиционирование позволяет расположить элементы в ячейках условной сетки. Отображения с помощью закладок распологает элементы в виде закладок, показывая только выбраный элементу.
• Позиционирование по сетке. Цель этого модуля CSS - упрощение позиционирования элементов: мы создаем сетку и выравниваем элементы внутри ячеек. Сетка может иметь один из следующих типов:
• Явная сетка – сетка с явно заданными столбцами и строками.
• Естественная сетка – создается автоматически, например в многоколоночных элементах (края с обеих сторон колонки создают границы сетки).
• Сетка по умолчанию - элементы, которые не подходят под вышеперечисленные определения, рассматриваются как имеющие сетку с одной единственной ячейкой.
• Новые селекторы CSS3. В CSS3 были добавлены новые виды селекторов. Некоторые из них приведены ниже:
• E:only-of-type - выбирает элемент, который является ближайшим sibling элементом того же типа
• E:not(s) - возвращает любой элемент, который не соответствует простому селектору s
• E ~ F - возвращает элемент F, который следует после элемента E
• E:nth-child(n) - возвращает элемент, который является n-ым по счету дочерным элементом исходного
• E:nth-last-child(n) – выполняет то же, что и предыдущий селектор, но счет идет от последнего элемента
• E:nth-of-type(n) - возвращает элемент, который является n-ым по счету sibling элементом того же типа
• Расширенная поддержка медиа-устройств. Цель нововведения - расширить поддержку различных типов медиа путем добавления css-свойств, вычисляемых с учетом текущего типа медиа. Некоторые из них могут быть использованы для задания высоты, ширины и цвета элемента в зависимости от медиа типа. Это позволит настраивать внешний вид страницы для различных устройств без переключения режимов отображения страницы. Благодаря этому стала считаться устаревшей методика создания отдельно мобильного сайта, отдельно компьютерного. Пользователи и мобильных и полноценных компьютерных устройств заходят на один и тот же сайт, но свойства CSS определяют какой именно вариант вёрстки страницы необходимо показывать пользователю. Также с помощью медиа запросов можно определять отдельный внешний вид для вывода, например, на печать.

Глава 5. Основные принципы работы HTML

Основной элемент HTML, как и любого другого языка разметки – это теги. Тег – это некое ключевое слово, заключённое в острые скобки <>. Теги бывают открывающими и закрывающими. Закрывающий тег отличается от открывающего наличием слеша перед ключевым словом, например: <b></b>.

Любой документ на языке HTML представляет собой набор элементов. Именно тегами и отмечается начало и конец этих элементов. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

• <strong>Текст между двумя тегами — открывающим и закрывающим.</strong>
• <a href="http://www.example.com">Здесь элемент содержит атрибут href, то есть гиперссылку.</a>
• А вот пример пустого элемента: <br>

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>HTML Document</title>

</head>

<body>

<p>

<b>

Этот текст будет полужирным, <i>а этот — ещё и курсивным</i>.

</b>

</p>

</body>

</html>

даст такой результат:

Этот текст будет полужирным, а этот — ещё и курсивным.

Кроме элементов, в HTML-документах есть и сущности (англ. entities) — специальные символы. Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятичной системе счисления.

Например, &copy; — знак авторского права(©). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: &amp; — амперсанда (&), &lt; — символа «меньше» (<) и &gt; — символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Сами по себе документы HTML – это просто текстовые файлы. Их отрисовкой должны заниматься специализированные программы, называемые браузерами. Браузеры отображают документ в его форматированном виде. Обычно они предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari.

Из-за наличия на рынке большого количества браузеров возникает ситуация, при которой одна и та же страница может отображаться по разному на различных устройствах и даже на одном устройстве в окне разных браузеров. Это добавляет неудобства верстальщикам – специалистам по созданию HTML страниц. Поэтому и разрабатываются стандарты и дополнительные инструменты, в основном на основе каскадных стилей (css), позволяющие писать универсальные интерфейсы, отображаемые одинаково на всех устройствах и браузерах. Такая вёрстка называется кроссбраузерной.

Стоит так же рассмотреть вопрос каскадных стилей, так как они являются неотъемлемой частью работы с html документов. С момента создания CSS из HTML было вырезано практически всё, что конфликтовало с принципом разделения разметки и оформления.

Синтаксис каскадных стилей подразумевает последовательное описание свойств всей страницы, групп элементов или отдельных элементов на странице. Свойства описываются по принципу «название: значение». При перечислении нескольких свойств в конце строки обязательно ставить знак «;»

Стили можно применять несколькими способами

1. как атрибут тегов:

1. Можно описывать непосредственно внутри html документа, заключая правила оформления страницы между тегами <style></style>
2. Либо подключить внешний файл с расширением .css.