Ответы WEB 2

1.Язык HTML. Структура документа. Версии языка.

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»;) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

Версииязыка :

•RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995 года;

•HTML 3.2 — 14 января 1997 года;

•HTML 4.0 — 18 декабря 1997 года;

•HTML 4.01 (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999 года;

•ISO/IEC 15445:2000[4] (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.

•HTML 5 — в разработке. Конец разработки запланирован на 2014 год.

•HTML 5.1 начал разрабатываться примерно 19 декабря 2012 года.

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

Версия 3 была предложена Консорциумом Всемирной паутины (W3C) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул, поддержка gif формата. Даже при том, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Mosaic.

Вверсии HTML 4.0 произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и нерекомендованные (англ. deprecated). В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).

В1998 году Консорциум Всемирной паутины начал работу над новым языком разметки, основанном на HTML 4, но соответствующим синтаксису XML. Впоследствии новый язык получил название XHTML. Первая версия XHTML

1.0одобрена в качестве Рекомендации консорциума Всемирной паутины 26 января 2000 года.

Планируемая версия XHTML 2.0 должна была разорвать совместимость со старыми версиями HTML и XHTML, но 2 июля 2009 года Консорциум Всемирной паутины объявил, что полномочия рабочей группы XHTML2 истекают в конце 2009 года. Таким образом, была приостановлена вся дальнейшая разработка стандарта XHTML 2.0.

Структураязыка

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

<strong>Текст между двумя тегами — открывающим и закрывающим.</strong>

<a href="http://www.example.com">Здесь элемент содержит атрибут href, то есть гиперссылку.</a>

А вот пример пустого элемента: <br>

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

<b>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

2.Язык HTML. HTML-формы, фреймы и окна.

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»;) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека

форме.

HTML предоставляет авторам средства для:

•включения в Веб-документы заголовков, текста, таблиц, списков, фотографий и т. п.;

•перехода к другим Веб-страницам посредством щелчка кнопки мыши по гипертекстовой ссылке;

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

•непосредственного включения в Веб-документы видеоклипов, звука и других внешних объектов.

Фактически, современная Веб-страница формируется с помощью трех языковых средств:

•язык HTML используется для задания логической структуры документа (заголовки, абзацы, графические изображения и прочие объекты);

•язык каскадных стилей CSS используется для задания способа отображения документа (цвета текста и фона, шрифты, способы выравнивания и позиционирования отдельных объектов на странице и т. п.);

•языки программирования сценариев (чаще всего JavaScript) используются для написания сценариев, т. е. небольших программ, которые исполняются обозревателем в процессе отображения документа и обеспечивают его

динамическое изменение в ответ на различные события

Форма в HTML — раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. Синтаксически форма в HTML задаётся с помощью элемента form и в дополнение к разметке обычных элементов содержит разметку для элементов управления (англ. controls), надписей (англ. label) и других

Элементы управления служат для взаимодействия пользователя с формой. Атрибут name определяет имя элемента управления с областью видимости внутри данной формы.

С каждым элементом формы связано начальное и текущее значение. За некоторыми исключениями (textarea, object), начальное значение может быть задано атрибутом value. Значения, соответствующие элементам, могут изменяться при взаимодействии пользователя или скриптов (например, на Javascript) с формой. При очистке (англ. reset) формы элементы приобретают начальные значения. Данные всех действующих (англ. successful) элементов формы отправляются (англ. submit) на обработку в виде пар имя-значения.

Типы

В HTML определены следующие элементы управления:

•кнопка: элемент input типов submit, image, reset, button, а также элемент button,

•чекбокс (флажок): тип checkbox

•радиокнопка: тип radio

•меню: элемент select с элементами optgroup и option внутри

•строка текста: тип text, а также элемент textarea

•пароль: тип password

•скрытое поле: тип hidden

•файл: тип file

•объект: элемент object

•HTML5 определяет дополнительные элементы (кросс-браузерность пока отсутствует)[3]:

•элемент datalist с вариантами автозаполнения строки текста,

•элемент output для результа вычисления на основе других полей,

•элемент keygen для генерации пары ключей для использования в механизме аутентификации.

Элемент form

Форма задаётся с помощью элемента form, внутри которого и располагаются элементы управления. Кроме общих для HTML атрибутов, в form могут присутствовать следующие:

•action (действие) — обязательный атрибут, содержащий URI обработчика формы;

•method (метод отправки формы) — атрибут, принимающий значения GET (по умолчанию) или POST

•enctype (тип кодирования для содержимого) — по умолчанию application/x-www-form-urlencoded (всегда для метода GET), но обычно употребляется multipart/form-data

•accept — список MIME-типов для загрузки файлов

•name — имя формы

•onsubmit — обработчик события «форма отправлена»

•onreset — обработчик события: «форма очищена»

•accept-charset список поддерживаемых наборов символов

Отправка формы

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

Использование фреймов

Фрейм (от англ. frame — рамка) — отдельный, законченный HTML-документ, который вместе с другими HTMLдокументами может быть отображён в окне браузера.

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

Фреймы часто использовались для навигации по веб-сайту. При этом навигационная страница располагается в

одном окне, а страницы с текстом — в другом.

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

Тег <FRAME> определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере <FRAMESET>, который к тому же задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница, определяемая с помощью параметра src=. Хотя обязательных атрибутов у тега <FRAME> и нет, рекомендуется задавать каждому фрейму имя через атрибут name=. Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.

Синтаксис: <frameset> <frame> </frameset> Параметры:

•bordercolor= — цвет линии границы.

•frameborder= — отображать рамку вокруг фрейма или нет.

•name= — уникальное имя фрейма.

•noresize= — определяет, можно изменять размер фрейма пользователю или нет.

•scrolling= — способ отображения полосы прокрутки во фрейме.

•src= — путь к файлу, предназначенному для загрузки во фрейме. Закрывающий тег — не требуется.

Пример использования тега:

<frameset rows="80,*" cols="*">

<frame src="top.html" name="topFrame" scrolling="no" noresize> <frameset cols="80,*">

<frame src="left.html" name="leftFrame" scrolling="no" noresize> <frame src="main.html" name="mainFrame">

</frameset>

</frameset>

3.Язык HTML 5, ключевые возможности.

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

Новые семантические элементы: Как вы возможно уже знаете, семантика является очень важной в HTML — мы всегда должны использовать для работы подходящий элемент. В HTML 4.01 мы имеем проблему — да, существует много элементов для определения специальных средств, таких как таблицы, списки, заголовки, и т.д., но существует также много общих свойств web-страницы, которые не имеют элемента для их определения. Представьте верхние и нижние колонтитулы сайта, навигационные меню, и т.д. — до сих пор мы определяли их с помощью <div id="xxx"></div>, которые мы можем понять, но машины не могут, кроме того, различные разработчики web будут использовать различные ID и классы. К счастью, HTML5 содержит новые семантические элементы, такие как <nav>, <header>, <footer> и <article>.

Новые свойства форм: HTML 4.01 уже позволяет создавать удобные, доступные web-формы, но некоторые общие свойства форм являются не слишком удобными и требуют специальных усилий для реализации. HTML5 предоставляет стандартизованный, простой способ реализации таких свойств, как выбор даты, ползунки и клиентская проверка.

Собственная поддержка видео и аудио: HTML5 содержит элементы <video> и <audio> для простой реализации собственных видео и аудио плееров с помощью только открытых стандартов, и также содержит API, позволяющий легко реализовать индивидуальные элементы управления плеером.

API рисования на холсте: Элемент <canvas> и соответствующий API позволяют определить на странице область для рисования, и использовать команды JavaScript для рисования линий, фигур и текста, импорта и манипуляций с изображениями и видео, экспорта в различные форматы изображений, и многих других вещей.

Сокеты Web: Этот API (определенный в спецификации Сокеты Web -http://www.w3.org/TR/websockets/, отдельно от спецификации HTML5) позволяет открывать постоянное соединение между сервером и клиентом на определенном порте, и посылать данные в обоих направлениях, пока порт не будет закрыт. Это существенно улучшает эффективность приложений web, так как данные могут непрерывно и аккуратно передаваться между клиентом и сервером без постоянной перезагрузки страницы, и без постоянного опроса сервера, чтобы проверить, нет ли доступных обновлений.

Автономные приложения web: HTML5 предоставляет ряд свойств, позволяющих приложениям web выполняться в автономном режиме. Кэши приложений позволяют сохранить копию всех ресурсов и других файлов, необходимых для локального выполнения приложения web, и базы данных Web SQL позволяют сохранить локальную копию данных приложения web. Совместно они позволяют продолжать использовать приложение, когда отсутствует соединение с сетью, и затем синхронизируют изменения с основной версией на сервере, когда сеть снова становится доступной.

Хранилище Web: Cookies предоставляют в какой-то степени локальное хранилище данных, но их использование довольно ограничено. Web хранилище HTML5 позволяет хранить значительно больше данных, и делать с ними значительно больше.

Web workers: Общая проблема, встающая перед приложениями web, состоит в том, что их производительность страдает, когда требуется обработать много данных, в связи с тем, что все происходит в одной нити/процессе (только одна последовательность обработки может выполняться в текущий момент). Web Workers смягчают эту проблему, позволяя создавать фоновые процессы для выполнения значительного объема вычислений, позволяя основному процессу продолжить выполнение других задач.

Геолокация: Спецификация геолокации(также не являющаяся частью спецификации HTML5) определяет API, который позволяет приложению web легко получить доступ к данным в любом местоположении, которое стало доступным, например, с помощью средств GPS устройства. Это позволяет добавлять в приложения различные полезные свойства, связанные с местоположением, например, выделить контент, который больше подходит для местоположения.

4.Таблицы стилей CSS. Принцип каскадности, типы описания таблиц стилей.

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

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Цель создания CSS

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

Способы подключения CSS к документу

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

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

когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;

<head>

.....

<link rel="stylesheet" type="text/css" href="style.css"/> </head>

когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;

<head>

.....

<style type="text/css" media="all"> @import url(style.css);

</style>

</head>

когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;

<head>

.....

<style type="text/css"> body {

color: red;

}

</style>

</head>

когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.

<p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>

В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей.

Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например:

<?xml-stylesheet type="text/css" href="style.css"?>

Иерархия элементов внутри документа

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

Элемент является родителем другого элемента, если в иерархической структуре документа он находится сразу, непосредственно над этим элементом. Элемент является предком другого элемента, если в иерархической структуре документа он находится где-то выше этого элемента.

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

ВCSS могут задаваться при помощи селекторов не только одиночные элементы, но и элементы, являющиеся потомками, дочерними или сестринскими элементами других элементов (см. подраздел «виды селекторов»).

Правила построения CSS

Впервых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы

стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком ": ". Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

селектор, селектор { свойство: значение; свойство: значение; свойство: значение;

}

В четвёртом случае подключения таблицы CSS к документу (см. список) правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».

Виды селекторов

Селекторы правила CSS могут быть: универсальный селектор;

* {margin:0; padding:0;}

селекторами элементов;

p {font-family: Garamond, serif;}

селекторами классов;

.note {color: red; background: yellow; font-weight: bold;}

селекторами идентификаторов;

#paragraph1 {margin: 0;}

селекторами атрибутов; a[href="http://www.somesite.com"]{font-weight:bold;}

селекторами потомков (контекстными селекторами); div#paragraph1 p.note {color: red;}

селекторами дочерних элементов; p.note > b {color: green;}

селекторами сестринских элементов; h1 + p {font-size: 24pt;}

селекторами псевдоклассов; a:active {color:yellow;}

селекторами псевдоэлементов. p::first-letter {font-size: 32px;}

Наследование. Каскадирование. Приоритеты стилей CSS.

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.

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

•Наиболее низким приоритетом обладает стиль браузера;

•Следующим по значимости является стиль, заданный пользователем браузера в его настройках;

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

oСамым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;

oБолее высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;

oЕщё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:

§количество идентификаторов (#id) в селекторе — ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);

§количество классов (.class), атрибутов ([attr], [attr="value"]) и псевдоклассов (:pseudo-class) в селекторе — ((0,1,0) за каждый объявленный класс, атрибут и псевдокласс в селекторе правила CSS);

§количество элементов (h1, input) и псевдоэлементов (::pseudo-element) в селекторе — ((0,0,1) за каждый

объявленный элемент и псевдоэлемент в селекторе правила CSS).

Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.

•Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;

•И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение

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

5.Модель визуального форматирования элементов web-страниц.

Модель визуального форматирования: правила, как агенты пользователей обрабатывают дерево документа для визуальных устройств.

Суть позиционирования очень проста: любой блок можно расположить в любом месте страницы, задав ему точные координаты. Именно любой, а не только <div>, как многим кажется; вы легко можете позиционировать хоть <b>, если очень захочется :-)

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

•размерами блока и его типом;

•схемой позиционирования (нормальный поток, перемещаемый объект или абсолютное позиционирование);

•взаимодействиями между элементами в дереве документа;

•внешней информацией (например, размерами области просмотра, собственными размерами изображений и

т.п.).

Блоки можно разделить на структурные блоки или только строковые блоки.

Элементы строкового уровня – это те элементы исходного документа, которые не формируют новых структурных единиц содержимого; содержимое выводится в строках (например, выделенные отрывки текста в абзаце, вложенные в строку рисунки и т.д.) Определенные значения свойства 'display' делают элемент принадлежащим строке: 'inline', 'inline-table', и 'run-in' (часть из них; см. раздел, посвященный вставляемым блокам). Элементы строкового уровня порождают строковые блоки.

'display'

Значения данного свойства имеют следующий смысл: block

При этом значении свойства элемент порождает структурный блок. inline-block

При этом значении свойства элемент порождает структурный блок, который сам перемещается как одиночный строковый блок, аналогично перемещаемому элементу. Изнутри блок inline-block отформатирован как структурный блок, а сам элемент отформатирован как строчный перемещаемый элемент.

inline

При этом значении свойства элемент порождает один или несколько строковых блоков.

list-item

При этом значении свойства элемент (например, LI в HTML) порождает главный структурный блок и строковый блок элемента списка (list-item). Информацию о списках и примерах форматирования списков можно найти в разделе о списках.

none

При этом значении свойства элемент не порождает ни одного блока в структуре форматирования (т.е. элемент никак не влияет на построение документа). Элементы-потомки тем более не будут порождать никаких блоков; такое поведение не может быть перезаписано установкой свойства 'display' у потомков.

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

В CSS 2.1 блок может размещаться согласно трем схемам позиционирования:

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

2.Перемещаемые объекты. Согласно этой модели блок сначала размещается в соответствии с нормальным потоком, а затем изымается из него и перемещаются влево или вправо настолько, насколько это возможно. Содержимое может располагаться по сторонам перемещаемого элемента.

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

Static

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

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

Absolute

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

Fixed

Ведет себя так же, как absolute, но при этом он не скролится вместе с остальной страницей.

Relative

position:absolute; left:100px; top:100px; bottom:100px; right:100px;

}

Координаты означают расстояние бокса от краев: top:0 означает, что бокс прижат к верхнему краю, right:10px - что отстоит на 10 пикселов от правого края и т.д. Любая из координат необязательна. В случае, если координаты не задают вертикального или горизонтального положения, то оно остается таким же, какое было бы без позиционирования. То есть в случае, когда у нас есть два произвольных бокса один за другим "box1" и "box2":

<div id="box1">

...

</div>

<div id="box2">

...

</div>

... и второй мы позиционируем так: #box2 {

position:absolute;

left:150px;

}

... то по вертикали он останется прямо под первым боксов, а по горизонтали будет отстоять от левого края на 150 пикселов.

Fixed

Бокс с position:fixed - это, в общем-то, разновидность того же абсолютного позиционирования. Единственная разница заключается в том, что при скролировании окна эти боксы остаются на месте. Этот эффект широко используется на страницах веб-приложений для всяческих прилипающих блоков меню и тулбаров, которые как раз и должны себя так вести.

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

Описание

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

Плавающая модель Синтаксис

float: left | right | none

Аргументы left

Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.

right

Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне. none

Обтекание элемента не задается

9.3.2 Смещение блоков: 'top', 'right', 'bottom', 'left'

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

Описание

Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

clear

clear: both | left | none | right

помощью параметра float или других настроек. overflow

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible

Аргументы visible

Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden

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

Всегда добавляются полосы прокрутки. auto

Полосы прокрутки добавляются только при необходимости. z-index

Описание

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

Синтаксис

z-index: число | auto

Аргументы

В качестве аргумента допустимо использовать положительное или отрицательно целое число, а также ноль. Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже.

visibility Описание

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

Синтаксис

visibility: visible | hidden | collapse

Аргументы visible

Отображает элемент как видимый. hidden

Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.

6.Типы HTML-верстки: табличная, блочная; достоинства, недостатки.

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

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

Преимущества таблиц Создание колонок. Страницы, состоящие всего из одной колонки встречаются на сайтах достаточно редко.

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

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

"Склейка" изображений. Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.

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

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

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

Недостатки таблиц