Перевод которой специально для читателей хабра представлен ниже.

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

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

Следующая проблема CSS это разметка. До текущего момента мы делали её, используя плавающие блоки, относительные позиции и трюки с отрицательными отступами, и всё это было сложно реализовать, чтобы результат был похож на стандартную двух- или трехколоночную разметку.

Консорциум W3C и создатели браузеров в курсе этих проблем и работают над рядом решений. Лидером среди них является (как не удивительно) Internet Explorer. Похоже, что IE10 будет предвестником новой эры CSS разметки, которая позволит создавать отличные, динамические и привлекательные сайты, используя недосягаемые ранее возможности.

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

Колонки Распределение контента между несколькими колонками является основным элементом печати и модуль CSS Multi-Columns даёт такую же возможность для web. Для создания колонок можно использовать два способа, каждый из них использует различные свойства (родительского элемента). В первом случае напрямую задаётся количество колонок, среди которых необходимо распределить текст. Например, этот код создаст три колонки одинаковой ширины, заполняя в сумме ширину родительского элемента:

Div { column-count: 3; }
Во втором способе ширина колонок фиксирована, они будут повторяться до тех пор, пока не заполнят ширину родительского элемента. В этом примере ширина колонки установлена в 140px, значит в блоке шириной 800px должно появиться пять колонок:

Div { column-width: 140px; }
По умолчанию, зазор между колонками равен 1em, но его можно сменить, используя свойство column-gap . Также между колонками можно разместить разделительные линии с помощью column-rule , похожий по синтаксису на свойство border. Представленный ниже код создаст пунктирную линию шириной 2px, а также установит отступ между колонками в 28px (разделитель будет располагаться посредине):

Div { column-gap: 28px; column-rule: 2px dotted #ccc; }
Если хотите посмотреть результат, взгляните на пример реализации CSS колонок . Для того, чтобы увидеть три колонки, необходимо использовать Firefox, Chrome, Safari, Opera 11.1 или IE10 Platform Preview (IE10PP) . Либо посмотрите на представленный ниже скриншот.

С колонками можно делать разные вещи. Практический пример их использования есть в Википедии, в секции примечаний , где используется column-count . В Firefox многоколоночность реализована с префиксом -moz- , в Chrome и Safari с префиксом -webkit- , в Opera 11.1 и IE10PP без префиксов.

Таблица Совершенно новым в IE10PP является система табличной разметки. Перед её использованием необходимо определиться со строками и колонками. Для колонок можно использовать значения длины, auto keyword и новую единицу измерения fr (сокращение от fraction , относительное количество). Посмотрите на этот пример:

Div { display: grid; grid-columns: 1fr 3fr 1fr; grid-rows: 100px auto 12em; }
Этот код создаст таблицу из трех колонок, центральная из которых будет в три раза шире левой и правой, а также из трех строк, где верхняя будет 100px по высоте, нижняя 12em, а средняя расширится по высоте автоматически, в зависимости от длины контента.

Теперь, когда у нас есть таблица, можно в ней разместить контент. Используя элементы HTML5, можно создать, действительно, очень простую разметку страницы:

Header { grid-column: 1; grid-column-span: 3; grid-row: 1; } nav { grid-column: 1; grid-row: 2; } article { grid-column: 2; grid-row: 2; } aside { grid-column: 3; grid-row: 2; } footer { grid-column: 1; grid-column-span: 3; grid-row: 3; }
Вматриваясь в код, можно заметить, что контент на странице распределен по строкам и столбцам с помощью, соответственно, свойств grid-row и grid-column . Элемент article размещен во вторую колонку второй строки - центр таблицы 3х3. Также используется свойство column-span для элементов header и footer , которое растягивает их на все три колонки (подобно действует свойство row-span , которое здесь не использовалось).

Демо разметки можно посмотреть в примере использования CSS Grid , но нужна платформа IE10. Если её нет, то просто взгляните на скриншот.

Упомянутые выше свойства полностью внедрены в IE10PP, поэтому можно с ними экспериментировать прямо сейчас. Однако, множество свойств всё ещё не реализовано.

Шаблон Другим подходом к табличному представлению является модуль Template Layout . Он использует немного иной синтаксис, где сперва необходимо присвоить позицию блокам, используя буквенный символ и свойство position :

Header { position: a; } nav { position: b; } article { position: c; }
Как только мы присвоим позицию, можно создавать разметку, используя последовательность символов. Каждая последовательность эквивалентна строке, а каждый символ в последовательности это колонка. Например, чтобы создать таблицу из одной строки и трех колонок, можно использовать:

Div { display: "abc"; }
В данном случае отобразится три равномерно распределенных элемента в горизонтальной строке. Но можно повторять символы чтобы расширять колонки, а также использовать одинаковые символы на той же позиции в разных строках, чтобы расширять строки. В приведенном ниже примере элемент nav перекрывает две строки, а header и article перекрывают два столбца (код отформатирован для наглядности):

Div { display: "baa" "bcc"; }
Template Layout ещё не используется браузерами, но уже есть хороший скрипт polyfill на jQuery , который позволит поэкспериментировать, именно он использован в примере по ссылке . Результат выглядит также, как в примере с табличной разметкой, но код совсем другой.

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

Header { grid-cell: a; } article { grid-cell: b; } div { display: grid; grid-template: "a" "b"; }
По функционалу этот код идентичен свойствам Template Layout, но также ещё не внедрён (а может быть никогда и не будет).

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

Div { float: positioned; left: 200px; position: absolute; top: 100px; width: 250px; }
Этот код создаст элемент 250px по ширине, расположенный слева на 200px и сверху на 100px от родительского объекта. По умолчанию, любой другой контент внутри родительского будет обтекать позиционируемый элемент со всех сторон, но это можно изменить различными значениями свойства wrap-type , например, когда текст обтекает элемент только сверху и снизу:

Div { wrap-type: top-bottom; }
Можно комбинировать свойства позиционирования и табличной разметки, размещая элемент в таблице и позволяя контенту обтекать его со всех сторон:

Div { float: positioned; grid-column: 2; grid-row: 2; }
Если у вас имеется IE10PP, то можно . Если нет, то результат показан на скриншоте ниже, его невозможно реализовать текущими возможностями CSS.

Exclusions Свойство float позволяет лишь прямоугольным элементам быть обтекаемыми, но в докуменации предусмотрены обтекания по форме. Идея пришла после использования модуля CSS Exclusions . В нём имеются два ключевых свойства. Первое, wrap-shape , позволяет создавать элипсы, прямоугольники или многоугольники, которые будут задавать форму обтекаемого контентом блока, например:

Div { wrap-shape: circle(50%, 50%, 100px); }
Этот код создаст окружность с радиусом 100px, которая будет центрирована в родительском элементе. Можно использовать функцию polygon() для создания любой фигуры, указывая координатные пары, разделенные пробелом, например для треугольника:

Div { wrap-shape: polygon(0,100px 100px,100px 50px,0); }
Когда уже имеется заданная фигура, внутренний контент можно сделать обтекаемым по этой фигуре, используя второе свойство wrap-shape-mode , как здесь:

Div { wrap-shape: circle(50%, 50%, 100px); wrap-shape-mode: around; }
Работу CSS Exclusions в действии можно посмотреть, скачав прототип для Mac или Windows с лаборатории Adobe . Там имеется полная документация и несколько очень классных демо-файлов, например, такой:

Области Следующее предложение Adobe это CSS Области (Regions), задающие способ распределения контента внутри множества разных элементов. Это делается, в первую очередь, определением элемента, который будет обеспечивать другие контентом, используя уникальный строковый идентификатор в свойстве flow , а далее выбирается, какие области будут заполняться этим контентом с помощью функции from() свойства content :

Content { flow: foo; } .target1, .target2 { content: from(foo); }
Здесь контент будет браться из элемента .content , а далее распределятся сперва по элементу .target1 и если блока не хватит для отображения контента, то он будет продолжать отображаться в .target2 . Контент не будет дублироваться в блоках, он будет начинаться в первом и продолжаться во втором (если необходимо). Чтобы лучше понять, просто взгляните на изображение ниже.

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

Спеки по CSS областям ещё не были внедрены в браузеры, но по аналогии с Exclusions, можно использовать прототип с лаборатории Adobe и попробовать функционал самостоятельно.

Заключение Пока что неясно, какие из новых модулей разметки (из FlexBox и Колонок) будут полностью внедрены в браузеры. Что касается плавающих блоков и Exclusions, хотелось бы их скрестить из-за похожести функционала (возможно, так и будет). Табличная разметка тесно связана с разметкой шаблонами и, несомненно, можно ожидать её появление в IE10. CSS области уже внедрены в одной из ветвей WebKit, и, вероятно, появятся в WebKit-браузерах (Safari, Chrome и других) очень скоро.

Таким образом, можно прогнозировать, что с некоторыми изменениями в синтаксисе, всё описанное выше будет использоваться в CSS3 в будущем. Очень хорошо, если это произойдёт, так как, в этом случае, новые методы позволят с минимальными затратами создавать очень продуманные сайты всего через несколько лет.

Теги:

• css3
• flexbox
• ie10
• html5

Добавить метки

ФЕДЕРАЛЬНОЕ АГЕНСТВО ПО ОБРАЗОВАНИЮ

ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«ТЮМЕНСКИЙ ГОСУДАРСТВЕННЫЙ НЕФТЕГАЗОВЫЙ УНИВЕРСИТЕТ»

ИНСТИТУТ НЕФТИ И ГАЗА

Кафедра «Автоматизация и управление»

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

к лабораторной работе

«Разметка html – документов»

по дисциплине «Компьютерно – телекоммуникационные сети»

для студентов специальности 220301 - «Автоматизация технологических процессов и производств (нефтегазодобыча)»

очной, заочной и заочной сокращённой форм обучения

Тюмень 2007

Утверждено редакционно – издательским советом

Тюменского государственного нефтегазового университета

Составитель: к.т.н., доц. Ведерникова Ю.А.

©Государственное образовательное учреждение высшего профессионального образования

«Тюменский государственный нефтегазовый университет», Тюмень 2007г.

1. Что такое HTML-документ 4

2. Структура HTML-документа 4

3. Оформление НТМL-документов 8

5. Использование графических изображений 15

6. Таблицы 16

ЗАДАНИЯ К ЛАБОРАТОРНОЙ РАБОТЕ 20

КОНТРОЛЬНЫЕ ВОПРОСЫ 21

Приложение A 22

Приложение Б 26

Цель работы: Освоение приемов создания WEB-страниц с использованиемHTML(HyperTextMarkupLanguage) - языка гипертекстовой разметки документов.

Что такое HTML-документ

HTML-документ отличается от обычного текстового файла тем, что в нем присутствуют специальные команды - тэги, которые указывают правила форматирования документа. Тэги заключаются в треугольные скобки и, как правило, являются парными. Например:

< CENTER > обозначает вывод текста по центру

Этот текст будет расположен в середине экрана

обозначает окончание вывода текста по центру

В тэгах HTML не различают символы верхнего и нижнего регистров: тэг < CENTER > эквивалентен тэгу < center > или < Center > .

Тэгу могут присваиваться атрибуты. Атрибуты указываются в треугольных скобках сразу после имени тэга. Значение атрибута определяется после знака равенства. Например, с тэгом < FONT > (шрифт)может использоваться атрибутSIZE , задающий размер шрифта:

< FONT SIZE =5>

Этот тэг задает размер шрифта - 5.

Структура html-документа

Обычно HTML-документ обрамляется тэгами < HTML > и .

Метка < HTML > сообщает броузеру WEB о считывании HTML-файла, а метка обозначает конец HTML-файла.

Документ HTML состоит из двух частей: заголовок и тело.

Заголовок эквивалентен введению и используется для сбора информации о странице. Для определения заголовка применяются метки < HEAD > и . Применять метку < HEAD > следует сразу после метки < HTML > .

В секцию тело вводится текст и другие объекты, которые фактически являются страницей WEB. Для определения тела применяются метки < BODY > и , которые идут сразу за меткой < HEAD > .

Таким образом, структура HTML-документа выглядит следующим образом:

< HTML >

< HEAD >

Заголовок документа

< BODY >

Тело (основная часть документа)

Заголовок документа

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

Наиболее часто используемым элементом заголовка является имя документа:

< TITLE > Название документа

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

Тег не виден в браузере при просмотре страницы, но значительно увеличивает размер страницы. Если Вы хотите, чтобы Ваш сайт находился в числе первых, выдаваемых поисковыми машинами при запросах пользователей, то Вам нельзя игнорировать использование МЕТА - тега. Кроме того, необходимо правильно заполнять содержимое МЕТА - тегов.

Атрибуты МЕТА-тега: HTTP-EQUIV, Name и CONTENT.

HTTP - EQUIV. Этот атрибут определяет заголовок HTTP, которому принадлежит информация. Если семантика заголовка HTTP, названного этим атрибутом известна, то содержание может быть обработано на основании записанных здесь данных. Заголовки HTTP не чувствительны к регистру.

NAME. МЕТА - информационное имя. Если признак NAME - отсутствует, то данный атрибут может получить значение, равное значению HTTP-EQUIV.

CONTENT. МЕТА - информационное содержание, которое будет связано с данным именем и/или заголовком HTTP.

Типичные примеры использования МЕТА – тегов описаны ниже:

- используется браузерами для определения кодировки, с помощью которой была написана данная страница. "charset=koi8-r" - альтернативная кодировка. Существуют также кодировки ISO, LAT, DOS.

Внимание: не рекомендую вставлять на Вашу страничку данный код, потому что большинство серверов хранят данные в одной кодировке (например, koi8-r) и преобразуют их по запросу пользователя в нужную кодировку. Если сервер исправит Вашу первую кодировку во вторую, а пользователю выдаст третью, как смесь первой и второй, то никакие перекодировщики не смогут восстановить первоначальный текст на странице.

- идентификация автора страницы.

- сохранение авторских прав, информация о Вашей фирме и тд.

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

- Краткое описание содержимого данной страницы. Необходим для поисковых машин.

- предназначен для того, чтобы браузер брал страницу не из кэша, а по настоящему адресу.

- адрес издателя страницы (Ваш адрес).

- адрес Вашего сайта в сети Интернет.

- описывается средство, с помощью которого была создана данная страница.

- (не точно!) как часто обновляется информация на странице.

- (не точно!) предназначен для поисковых машин, постоянно сканирующих просторы сети Интернет.

- страница перечитывает сама себя через время x (в нашем случае x=2 секунды).

.

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

Вкусные пряники

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

При использовании блоков такая проблема устраняется. В коде располагается небольшое количество div-ов, каждому из которых устанавливаются стилевые правила через прописанный класс. Например:

…

…

…

Гибкое управление объектами. За счет того, что за каждый слой отвечает определенный класс, появилась возможность быстро и без вреда для других блоков переопределять внешний вид выбранного, перемещать его по веб-странице или изменять вид представления. К тому же блочная верстка позволяет решать сложные задачи с нестандартным размещением слоев.

Весомое преимущество для SEO. В табличных представлениях все содержимое веб-сервиса распределялось по ячейкам, что сильно усложняло работу поисковых роботов. С использованием же блочной верстки данная проблема также решилась.

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

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

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

Камни преткновения

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

В блочной разметке все может показаться несколько сложнее. Особенно для новичка. Потому что вам необходимо хорошо разбираться не только в html-коде, а еще и знать большинство свойств css. Однако трудности возникнут только вначале при изучении технологий, а вот после жизнь покажется сказкой.

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

Простые техники создания адаптивности

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

Bootstrap Example body{ padding:0; margin:0; background: url("http://www.bankoboev.ru/fons/ODQ1MA==/Bankoboev.Ru_avtomobili_na_nochnyh_dorogah.jpg"); font-size: 19px; color: #fff; text-align: center; } .header{ background: rgba(80, 80, 80, .8); padding: 24px; border-bottom: 3px solid #B5B5B5; } .menu{ background: rgba(80, 80, 80, .5); float: left; font-size:33px; padding: 16px; text-align: left; line-height: 1.5; height: 331px; } li{ list-style-type: none;} .container{ text-decoration: underline; padding: 29px; background: rgba(0, 1, 0, .4); } img{ height: 220px; width: 350px; outline: 6px solid #CFCFCF; } .photo{ display: inline-block; } .footer{ background: rgba(0, 1, 0, .8); padding: 11px;} Сайт СуперАвто Фотогалерея Видео Контакты Tesla Все права защищены!

Bootstrap Example body{ padding:0; margin:0; background: url("http://www.bankoboev.ru/fons/ODQ1MA==/Bankoboev.Ru_avtomobili_na_nochnyh_dorogah.jpg"); font-size: 19px; color: #fff; text-align: center; } .header{ background: rgba(80, 80, 80, .8); padding: 24px; border-bottom: 3px solid #B5B5B5; } .menu{ background: rgba(80, 80, 80, .5); float: left; font-size:33px; padding: 16px; text-align: left; line-height: 1.5; height: 331px; } li{ list-style-type: none;} .container{ text-decoration: underline; padding: 29px; background: rgba(0, 1, 0, .4); } img{ height: 220px; width: 350px; outline: 6px solid #CFCFCF; } .photo{ display: inline-block; } .footer{ background: rgba(0, 1, 0, .8); padding: 11px;} Сайт СуперАвто

Здесь вы найдете изображения и видео, связанные с автомобильной тематикой

Фотогалерея

Видео

Контакты

Tesla Все права защищены!

Как видите, внешний вид созданного интернет-ресурса корректно отображается до тех пор, пока размер экрана не станет слишком маленьким. Поэтому дополним свойства css некоторыми параметрами.

Для начала к блокам с классами . header , . container и . footer добавьте свойство min-width: 355px . Теперь ваша страница с контентом будет уменьшаться только до указанного размера, а после появится скролл.

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