Тема 1. Язык разметки web-страницы

Стр 1 из 36Следующая ⇒

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

Роль HTML

HTML (Hypertext Markup Language) – стандартный язык разметки веб-документов. Текст, написанный на языке HTML, интерпретируется браузерами; и в результате полученный форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Язык HTML является переработкой стандартного обобщённого языка разметки SGML (Standard Generalized Markup Language). Он создан в соответствии с международным стандартом ISO 8879. Язык HTML был создан Тимом Бернерсом-Ли (Tim Berners-Lee) в 1991 году как простой инструмент для создания структуры гипертекстовых документов. Ключевая идея языка HTML - организация содержимого с помощью элементов, которые также называют тегами.

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

С момента создания HTML прошло исторически совсем немного времени, но это было время стремительного развития языка. Тим Бернерс-Ли в 1994 году основал World Wide Web Consortium, чаще называемый W3C, с целью упорядочения дальнейшей разработки и совершенствования HTML. Консорциум W3C осуществляет надзор за HTML и связанными с ним web-технологиями, выпускает документы, связанные с обновлением и стандартизацией версий HTML, называемые с 1995 года рекомендациями.

Немного истории

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

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

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

Но многие из предполагаемых преимуществ XHTML — такие как функциональная совместимость с инструментами языка XML, облегчение обработки страниц автоматизированными программами, переносимость на мобильные платформы, а также расширяемость самого языка XHTML — так никогда и не реализовались. Кроме того, у XHTML обнаружилась тревожная для людей, ответственных за этот стандарт, особенность: браузеры понимали разметку XHTML, но не обеспечивали строгую проверку отступлений от правил, требуемую этим стандартом. Это означает, что страница может быть создана с нарушением правил XHTML, но браузеры не будут иметь никаких претензий при обработке такой страницы.

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

Например, система нумерации заголовков (< h1>, < h2>, …< h6> ) была заменена одним элементом < h> с уровнем обозначаемого им заголовка, зависящего от местонахождения этого элемента в веб-странице. Элемент < a> (гиперссылка) был заменен возможностью, позволяющей веб-разработчикам превращать любой элемент в ссылку. Был предложен новый способ предоставления альтернативного содержимого вместо атрибута alt элемента < img>, и так далее.

Такие изменения типичны для XHTML 2, они делали язык более строгим, аккуратным и понятным. Но на практике они вынуждали изменить подход к созданию веб-страниц, не добавляя при этом никакой принципиально новой функциональности. Попутно из XHTML 2 было удалено несколько привычных элементов, таких, как < b> (полужирный текст), < i> (курсив), < iframe> (для добавления содержимого одной веб-страницы в другую). Кроме того, изменения оказались слишком медленными и интерес веб-разработчиков к этому стандарту угасал.

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

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

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

Компании Opera, Mozilla и Apple создали группу WHATWG (Web Hypertext Appliccation Technology Working Group - рабочая группа по технологии гипертекстовых веб-приложений) с целью работы над новыми решениями в веб-разработке. Целью группы стала не замена HTML, а постепенное расширение языка, и причем такого рода, чтобы расширения были обратно совместимыми. Следует заметить, что самая ранняя версия работы этой группы включала две спецификации расширений — Web Applications 1.0 и Web Forms 2.0. В итоге эти стандарты эволюционировали в HTML5.

Несмотря на то, что число 5 в названии HTML5 позволяет предполагать, что данный стандарт является продолжением стандарта HTML - последней версией стандарта HTML перед XHTML была версия 4.01 – это не совсем верно. HTML5 поддерживает все разработки, существовавшие в области создания веб-страниц в течение десяти лет после выпуска HTML 4.01, включая как строгий синтаксис в духе XHTML, так и множество инноваций для JavaScript. Тем не менее это название подчеркивает следующее: язык HTML5 может поддерживать соглашения XHTML, но требует следования правилам HTML.

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

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

Рассмотрим, чем отличается HTML5 от своих предшественников и какие предоставляет преимущества при использовании.

• Возможность добавления элементов аудио и видео без использования технологии Flash с помощью новых тегов.

• Улучшенные возможности оптимизации под поисковые системы. В HTML5 добавились новые структурные элементы, определяющие конкретную часть сайта: область заголовка, подвал, навигационное меню, статья и другие, то есть страницы не будут представлять собой набор тегов div. Это существенно расширит возможности поисковых систем.

• Разширение возможностей при работе с формами. Появились новые элементы форм: e-mail, tel, url, благодаря которым не придется писать код на JavaScript для проверки правильности заполнения полей. Кроме того, появился элемент datalist, позволяющий создать список вариантов, из которых пользователь сможет выбрать нужный при заполнении поля.

• Упрощённая реализация механизма drag and drop. Теперь реализовать подобный механизм стало намного проще. Раньше, например, автоматическое добавление товара в корзину при перетаскивании мышкой картинки являлось достаточно сложной задачей, теперь же она выполняется быстро и просто.

Появилась возможность узнать местоположение пользователя. То есть узнать точные координаты, где находится посетитель сайта. Появился новый объект: Canvas, позволяющий с помощью специальных функций языка JavaScript рисовать прямо на Web-странице. Это позволяет генерировать изображения на странице без дополнительных запросов к серверу. Раньше без использования возможностей языка PHP сделать такое было невозможно.

Эти и другие возможности HTML5 будем рассматривать а рамках изучения языков разметки веб-страницы.

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

С текущим, продолжающимся развиваться вариантом стандарта HTML включающим материал, который называется HTML5, можно ознакомиться на сайте http: //whatwg.org/html. А последние новости по HTML можно узнать в блоге группы WHATWG.

С официальной версией стандарта HTML5 можно ознакомиться на веб-сайте организации W3C: www.w3.org/TR/html5.

Что нужно знать об HTML5

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

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

·. HTML5 является набором различных возможностей. В HTML 5 кроме обычных тегов, представляющих, безусловно, важную часть структуры страницы, присутствует взаимодействие этих тегов с JavaScript посредством объектной модели документа (Document Object Model, DOM). Скажем, в HTML5 не просто определяется тег < video>, но он также сообщает DOM обо всех видео-объектах. Разработчик имеет возможность использовать интерфейс прикладного программирования (API) для поддержки различных видеоформатов, для проигрывания ролика, его остановки, включения и выключения звука, отслеживания загрузки файла и многого другого, предусмотренного для взаимодействия пользователя и тега < video>.

· В HTML 5 работают элементы разметки HTML4, поэтому веб-разработчику не придется переучиваться или выкидывать всю имеющуюся разметку. Если веб-приложение работает в HTML4, оно также будет работать в HTML5.

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

· «Обновление» до HTML5 можно сделать простым изменением элемента <! DOCTYPE>. Этот элемент должен всегда располагаться в первой строке кода веб-страницы. Предыдущая версия HTML определяла несколько вариантов элемента DOCTYPE, и выбор правильного был делом непростым. Вот так выглядело объявление типа документа (DTD) при использовании версии языка XHTML 1.0 Transitional:

<! DОСTYPЕ html PUBLIС " -//W3C//DTD ХНТМL 1.0 Traаnsitiоnаl//ЕN" " http: //www.w3./оrg/TR/хhtml1/DTD/xhtml1-trаnsitiоnаl.dtd" >

< html xmlns=" http: //www.w3.org/1999/xhtml" >

В языке HTML5 объявление типа документа выглядит следующим образом:

<! DOCTYPE html>. Причем такое изменение не разрушает существующую верстку, потому что все теги, определенные в HTML4 поддерживаются также и в HTML5, и разработчик сможет также свободно использовать новые семантические элементы такие, как < article>, < section>, < header>, < footer> и многие другие, рассчитывая на их корректное отображение.

· HTML5 уже поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом < canvas>, с видео, новыми элементами форм, геолокацией, локальным хранилищем и другими компонентами.

Элементы языка HTML

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

HTML является теговым языком разметки документа. Документ, написанный на языке HTML, представляет собой набор элементов, каждый из которых начинается и заканчивается специальными маркерами — тегами. Некоторые элементы могут быть одиночными или пустыми, то есть не содержащими никакого текста и другого контента (например, тег элемента формы < input> ), тогда закрывающий тег не указывается.

Элементы могут иметь один или несколько атрибутов, определяющих для них какие-либо свойства, например, путь к изображению для элемента img. Атрибуты указываются в открывающем теге.

Примеры:

· < strong> Текст располагается между двумя тегами — открывающим и закрывающим. Теги указывают на то, чем является текст (вазный текст, заголовок, гиперссылка и так далее).< /strong>

· < a href=" http: //www.example.com" > Это гиперссылка. Атрибут href указывает адрес, по которому следует перейти по гиперссылке.< /a>

· < br> - тег перехода на другую строку. Этот элемент является одиночным (пустым).

В HTML 5 регистр имени элемента или атрибута не имеет значения, в отличие от XHTML. Элементы могут быть вложенными или располагаться рядом. Перекрываться они не могут.

Ниже приведена базовая раскладка веб-страницы:

<! dоctypе html>

< html> < hеаd> < mеtа http-еquiv=" соntеnt-typе" cоntеnt=" tеxt/html; chаrsеt=utf-8" >

< titlе> Название документа, которое будет выведено в браузере на ярлыке страницы < /title>

< /head>

< body>

< h1> Это - тело документа < /h1>

< p> В теле документа располагается то, что будет отображаться в окне браузера. < em> Обратите внимание< /em>, что содержимое body организовано в виде набора элементов. < /p>

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

< /body>

< /html>

Как видно, в нашем случае версия языка документа - HTML5. HTML-документ, отвечающий спецификации какой-либо версии HTML, начинается с объявления типа документа. Если эту строку не указать, то будет гораздо труднее добиться корректного отображения документа в браузере, так как при отсутствии объявления DOCTYPE отсутствует набор правил, по которому можно было бы проверить допустимость кода.

Начало и конец документа обозначаются, соответственно, тегами < html> и < /html>. html – это корневой элемент для всех документов HTML и XHTML.

Внутри элемента html расположены теги < head> …< /head>, ограничивающие область заголовка, и < body> …< /body> - теги, в которых располагается тело документа.

< head>...< /head>

Элемент head, или заголовок, содержит информацию о документе, которая не считается частью самого документа. Заголовок должен включать описательный тег title, иначе документ не будет признан допустимым. Тег title (< title>...< /title> ) является наиболее важным и единственным обязательным элементом заголовка. Название отображается в строке заголовка браузера, на ярлыке веб-страницы.

Название – это то, что отображается в списке «Избранное» или «Закладки пользователя». Поисковые системы также используют названия документов. По этой причине важно создавать продуманные и осмысленнык названия для документов и избегать неопределенных названий, таких, как «Main» или «MyPage».

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

С этой целью кроме элемента title в области head могут располагаться в любом порядке следующие элементы: meta, style, script, link, base. Область < head>...< /head> не имеет собственного содержимого и является просто контейнером для этих элементов.

Рекомендуется, чтобы HTML-документы (и XHTML-документы без объявления XML) также содержали элемент meta, в котором указываются тип содержания и кодировка символов документа, хотя этот элемент и не является обязательным.

Назначение HTML-элементов, помещаемым в элемент head документа:

base – этот элемент определяет базовое местоположение документа, которое служит ссылкой для всех путей и ссылок документа;

link – элемент служит для связи текущего документа с внешним документом. Наиболее часто он используется для связывания с внешней таблицей стилей.

script – с помощью этого элемента можно добавить код JavaScript.

style –элемент для добавления таблицы стилей в HTML-документ.

meta –элемент используется для указания информации о документе.

< meta>

Закрывающий тег для этого элемента не нужен.

Элемент meta имеет много областей применения, но главным образом он используется для включенияинформации о документе, такой, как кодировка символов, дата создания, автор и копирайт. Данные, включаемые в элемент meta, могут использовать серверы, Web-браузеры и поисковые системы, но для пользователя они невидимы.

В одном документе может использоваться несколько элементов meta.

Существует два типа элементов meta, в которых используется либо атрибут name, либо http-equiv, где указывается тип информации. В любом случае необходим также атрибут content, в котором указывается значение (или значения) указанной информации.

Информация, указанная в атрибуте http-equiv, обрабатывается так, как если бы она пришла в заголовке HTTP-ответа. Заголовки HTTP содержат информацию, которую сервер передает браузеру непосредственно перед отправкой HTML-документа, например, информацию о типе данных и другую служебную информацию, влияющую на отображение документа в окне браузера.

Существует большое число готовых типов http-equiv. Например, указание кодировки страницы выглядит так:

< mеtа http-еquiv=" cоntеnt-typе" contеnt=" tехt/html; сhаrsеt=UTF-8" >

Атрибут name используется для вставки скрытой информации о документе, которая не соответствует HTTP-заголовкам. Например, указание автора:

< meta name=" author" content=" Kuznetsov Vadim" >

Указание авторского права на документ:

Краткое описание содержимого документа:

< meta name=" description" content=" web design samples" >

В таком элементе meta содержится краткое описание содержимого Web-страницы. Поисковые системы, распознающие такие описания, могут помещать их на странице результатов поиска. Некоторые поисковые системы используют только первые 20 слов описания.

Указание ключевых слов:

< meta name=" keywords" content=" designer, web design, web site, branding, logo design" >

Ключевые слова разделяются запятыми. Поисковые системы в основном отбрасывают ключевые слова в элементе meta из-за большого количества спама и ухудшения качества этой информации. Существует все большая тенденция к отходу от невидимых метаданных к видимой информации в самих материалах web-страниц.

< body> …< /body>

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

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

Таблица 1 - Атрибуты элемента body

Атрибут	Описание	Эквивалентный стиль CSS
text=" #rrggbb" или " имя цвета"	Задает цвет для всего обычного текста документа	body {color: color}
link=" #rrggbb" или " имя цвета"	Задает цвет гиперссылок	a: link {color: color}
vlink=" #rrggbb" или " имя цвета"	Задает цвет нажатых ссылок	a: visited {color: color}
alink=" #rrggbb" или " имя цвета"	Задает цвет ссылки в процессе нажатия на нее	a: active {color: color}
bgcolor=" color"	Задает цвет фона для всей страницы	body {background-color: color}
background=" url"	Указывается изображение, используемое в качестве фонового для страницы	background-image: url(filename.gif) }

Один открывающий тег элемента body может содержать много конкретных атрибутов, например:

< body text=" green" link=" #0000ff" vlink=" #ccddee" alink=" yellow" >

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

Таблица 2 – Глобальные атрибутыHTML

Атрибут	Описание, принимаемое значение
accesskey	Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам: < a>, < area>, < button>, < input>, < label>, < legend>, < textarea>. Принимаемые значения: перечень названий клавиш.
class	Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса.
contenteditable	Определяет, может ли пользователь редактировать содержимое (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент. Принимаемые значения: true или false.
contextmenu	Добавляет к элементу контекстное меню, заданное тегом < menu>. Принимаемые значения: значение атрибута id элемента < menu>.
dir	Определяет направление текста контента в элементах < bdo> и < bdi>. Принимаемые значения: ltr, rtl или auto.
draggable	Определяет, можно ли перетаскивать элемент. Принимаемые значения: true, false или auto.
dropzone	Определяет область для приема перемещаемых элементов, сообщая браузеру пользователя, какие действия совершить при перемещении. Принимаемые значения: copy– содержимое перемещаемого элемента будет скопировано в область, move – содержимое перемещаемого элемента будет перемещено в новую область, link – при перемещении будет создана ссылка на первоначальные данные элемента.
hidden	Указывает на то, что элемент должен быть скрыт. Принимаемые значения: hidden.
id	Определяет уникальный идентификатор элемента. Принимаемые значения: идентификатор элемента.
lang	Определяет код языка содержимого элемента. Принимаемые значения: код языка.
spellcheck	Указывает, можно ли проверить в содержимом элемента орфографию и грамматику. Принимаемые значения: true или false.
style	Позволяет добавить стиль CSS для элемента. Принимаемые значения: свойства CSS со значениями.
tabindex	Определяет порядок перехода к элементу при помощи клавиши TAB. Принимаемые значения: порядковый номер.
title	Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. Принимаемые значения: текст.
translate	Разрешает или запрещает перевод текста внутри элемента. Принимаемые значения: yes или no.

Текстовые элементы HTML

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

12 3 4 5 6 7 8 9 10 Следующая ⇒