Отображение документа в окне браузера

Теперь откроем наш документ в браузере. Сейчас не все браузеры поддерживают функциональность HTML5. Рекомендуется использовать новейшие версии Google Chrome и Firefox. Google Chrome основывается на WebKit – браузерном механизме с открытым кодом, который поддерживает почти все возможности, уже реализованные в HTML5.

Firefox – один из лучших браузеров для разработчиков, а его механизм Gecko также поддерживает функциональность HTML5.

Мы рассчитываем увидеть нечто похожее на следующее отображение.

Но получаем примерное такое:

Почему? Потому что, как мы уже говорили, в спецификации HTML5 HTML обеспечивает структуру документа,а CSS отвечает за его отображение. Теперь наша задача – разработать файл mystyles.css, содержащий стили, в соответствии с которыми должен отображаться наш документ. Этим мы займемся в следующей лабораторной работе.

Контрольные вопросы и задания:

1. Что представляет собой спецификация HTML5?

2. Какова общая структура документа, созданного с использованием HTML5?

3. Опишите структуру тела документа.

4. Каково визуальное представление структуры макета веб-сайта с помощью тегов HTML5? Поясните их назначение.

Задание для самостоятельной работы:

Ознакомиться с назначением и особенностями использования новых и старых элемнтов HTML в спецификации HTML5:

• <mark>

• <em>

• <strong>

• <b>

• <small>

• <cite>

• <address>

• <time>

Стили css

Официально технология CSS никак не связана с HTML5. Она не является и никогда не была частью спецификации HTML5. В действительности это вспомогательная технология, которая разрабатывалась с целью преодоления ограничений и уменьшения сложности HTML. Первоначально некие базовые стили связывались с каждым элементом с помощью атрибутов в тегах HTML, однако, по мере того, как язык развивался, код становилось все сложнее разрабатывать и поддерживать, и вскоре оказалось, что одного HTML недостаточно для удовлетворения всех требований веб-дизайнеров. В результате на вооружение была взята технология CSS, позволяющая отделить структуру от представления. С тех пор CSS успешно развивалась, однако разработка данной технологии шла параллельно HTML и фокусировалась на нуждах дизайнеров, а не на необходимости поддерживать эволюцию HTML.

Третья версия CSS следует по аналогичному пути, однако ее разработчики принимают намного больше компромиссных решений. Спецификация HTML5 подразумевает, что за дизайн теперь отвечает CSS, из-за этого интеграция между HTML и CSS3 стала критически важным элементом веб-разработки.

Как известно, CSS – это язык, работающий совместно с HTML. Он связывает с элементами документа разнообразные визуальные стили, определяющие их размер, цвет, фон, рамки и т.п.

Сейчас возможности CSS3 уже встроены в последние версии большинства популярных браузеров, однако некоторые из них все еще находятся на стадии разработки. По этой причине для обеспечения их эффективной работы в названиях новых стилей необходимо использовать браузерные префиксы, такие как moz или webkit (в зависимости от механизма используемого браузера).

Стили и стуктура

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