Последнее обновление: 08.04.2016

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.

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

Что именно привнес HTML5?

HTML5 определяет новый алгоритм парсинга для создания структуры DOM

добавление новых элементов и тегов, как например, элементы video , audio и ряд других

переопределение правил и семантики уже существовавших элементов HTML

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).

В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:

HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4

HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.

Кто отвечает за развитие HTML5? Этим занимается World Wide Web Consortium (сокращенно W3C - Консорциум Всемирной Паутины) - независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную спецификацию на английском языке можно посмотреть по адресу https://www.w3.org/TR/html5/ . И надо отметить, что организация продолжает работать над HTML5, выпуская обновления к спецификации.

Поддержка браузерами

Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

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

Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com .

Необходимые инструменты

Что потребуется для работы с HTML5? В первую очередь, текстовый редактор, чтобы набирать текст веб-страниц на html. На данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++ , который можно найти по адресу http://notepad-plus-plus.org/ . К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем я буду ориентироваться именно на этот текстовый редактор.

Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code . Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.

И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из распространенных браузеров - Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

>> Что такое HTML5

Что такое HTML5 и почему это становится модным?

Здравствуйте, дорогие читатели!

В последние годы пользователь Интернета далеко не ограничивается одним настольным компьютером. Почти у каждого есть смартфон или планшет.

И еще один уточняющий момент 2014 года: сегодня социальные сети уже не являются инструментом “для поиска потерянных в жизненном процессе друзей детства”. Сегодня мало кому придет в голову использовать ВКонтакте для поиска соседа по парте в первом классе. Сегодняшние социальные сети - это мощные мультифункциональные медиапорталы. Центры развлечения и бизнеса.

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

Новая версия языка гипертекста HTML5 призвана стать адекватным ответом на все вызовы современного пользователя компьютера и интернета.

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

Новый язык HTML5 будет мультисистемным, кроссбраузерным. Сайты, созданные на технологии HTML5, будут одинаково хорошо читаться на десктопе, на планшете, на смартфоне. В любых популярных оперативках: Windows, iOS, Mac OS, Android, Windows Mobile, Linux и что там еще есть.

Чтобы на сайте, созданном на HTML5, смотреть видео, вам больше не понадобится устанавливать на свой компьютер Adobe Flash Player. Тем более, многие современные мобильные устройства вообще не работают с форматом Flash. Как же смотреть ролики? Для этого будет HTML5.

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

Новые сайты будут еще более интерактивными и заточенными под все, что так необходимо современному пользователю:

В HTML5 будет сочетаться обычный HTML, CSS, XHTML, DHTML, Ajax. Часть устаревших тегов устраняются, чтобы уменьшить вес страниц и ускорить скорость загрузки. Добавляется некоторое количество новых тегов, которых не было в предыдущих версиях HTML. Более обширно обещает быть представлена столь любимая поисковыми машинами семантическая разметка.

Поскольку интернет становится все более и более мобильным, HTML5 должен обеспечить полную совместимость с сенсорным управлением на планшетах и смартфонах.

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

На этом у меня все.

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

С уваженем, Виталий Шматов!

". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.

Термины, используемые в описании правил CSS.

Рис.1. Обычное правило CSS. Рис.2. Пример правила CSS.

Коротко про синтаксис записи правил CSS:

• Объявление стиля в парвиле берётся в фигурные скобки - {}
• Свойство и значение в объявлении разделяются двоеточием - :
• В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
• В конце каждой пары свойство: значение ставится точка с запятой - ;
• После последней пары свойство: значение точку с запятой ставить не обязательно.
• Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
• Синтаксис CSS не чувствителен к регистру символов.

В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.

Селекторы тегов

Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.

Привет!

Заголовок h2!

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

,

и

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

Привет h1!

Заголовок h2!

Такая запись стиля равносильна следующей группе правил:

Селекторы потомков

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

Внутри таблицы

Текст абзаца вне таблицы.

Все теги

Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег

Находящийся внутри тега

тоже отображает текст красным цветом.

На самом деле, вместо

можно было указать тег

, так как тег всегда должен содержать тег . Для дальнейшего изучения селекторов CSS нужно освоить несколько несложных терминов относящихся к структуре документа. Дерево документа (англ. document tree) - это схема построения HTML документа, показывающая порядок следования тегов и их вложенность друг в друга. Приведём пример такой схемы: Дерево документа наглядно показывает связи в HTML документе, порядок следования тегов и их вложенность. Его используют разработчики для написания CSS стилей и JavaScript сценариев. Вот пример кода, соответствующего схеме дерева элементов с рисунка 1. Привет! Текст абзаца и жирный. Пункт 1.1 Пункт 1.2 Пункт 1.3 Пункт 2.1 Пункт 2.2 Пункт 2.3 Итак, между тегами HTML документа существуют связи. Они выражаются в вложенности тегов или порядке следования одного тега за другим. Эти связи называют родственные связи, а для обозначения различных типов родственных связей используют термины, такие как предок и потомок, родительский и дочерний элемент и другией "семейные" термины. Теперь рассмотрим все типы связей. Предки и потомки Предки (ancestor) - элементы, которые содержат другие элементы, то есть элемент является предком для всех вложенных в него элементов. Потомки (descendant) - элементы, вложенные в другой элемент. Селекторы потомков уже были рассмотрены выше. Родители и дочерние элементы Родитель (parent) - это предок первого уровня (непосредственный предок) для элемента. Дочерний элемент (child - ребёнок) - это потомок первого уровня. Родительский элемент может иметь неограниченное число детей. В нашем дереве элементов у тега следующие дочерние элементы: , , и ещё один Братские или сестринские элементы Братские или сестринские элементы, (англ. siblings - братья и сестры), группа элементов имеющая общего родителя. Например, теги , , и второй Сестринские, так как у них общий родитель . Смежные элементы Смежные элементы - это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары: и , И , и Теперь вернёмся к селекторам. Дочерние селекторы Когда нас интересуют не все потомки, а только потомки первого уровня, то есть дочерние элементы, в CSS используют дочерние селекторы. Для указания того, что правило стиля задано только к дочернему элементу, в селекторе используется символ ">". Привет! Текст абзаца в таблице. Текст абзаца в таблице (в контейнере div). Текст абзаца вне таблицы. HTML-код этого примера полностью совпадает с кодом примера для селектора потомков, отличается только правило стиля. В результате применения дочернего селектора текст абзаца в таблице в контейнере уже не красного цвета, так как для этого абзаца тег родитель, а тег предок. Смежный (соседний) селектор Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента. Давайте рассмотрим реальный пример. В больших статьях, содержащих несколько разделов озаглавленных тегами , желательно увеличить верхний отступ (свойство margin-top ). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег идёт сразу после , а это может быть в начале статьи, вержний отступ над тегом будет лишним. Решить такую задачу можно при помощи селектора смежного элемента. Вот html-код с примером работы селектора смежного элемента. Привет! Заголовок h2 Заголовок h2 Текст абзаца в про невероятные приключения. Другое название смежных селекторов: соседние селекторы , тут можно прочитать подробнее про этот тип селекторов. Родственный селекторы Селектор родственного элемента похож на соседний селектор, только он распространяется на все указанные элементы, следующие за выбранным. Синтаксис родственного селектора: селектор предыдущего элемента, знак "~" (тильда) и за ним селектор выбираемых элементов. Пример исользования сестринского селектора. Привет! Текст абзаца №1 в про невероятные приключения. Текст абзаца №2 в про невероятные приключения. Текст div №1 в про невероятные приключения. Текст абзаца №3 в про невероятные приключения. Из примера видно, что после тега текст абзаца №3 также был красным цветом. То есть, для присвоения стиля сестринские элементы не должны идти друг за другом. Универсальный селектор Если в селекторе правила CSS указан символ "*", то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет "обнулить" все внешние и внутренние отступы. Тогда нужно использовать такой стиль: * { margin: 0; padding: 0; } Но символ "*" можно использовать в составных селекторах. Ul * {color: red} Этот код назначает красный цвет тексту всех потомков элемента . Классы Классы в CSS - самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса: Тег.Имя класса В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_). Пример, когда применяют классы: на сайте верхнее, боковое и нижнее меню создаётся при помощи тегов , этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top , ul.menu и ul.menu-bottom . В теле html-документа различные меню создаются с указанием класса в атрибуте class : class ="menu-top "> ... class ="menu "> ... class ="menu-bottom "> ... Классы - часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым. Можно создать класс, который будет применён к любому тегу. Для этого используется универсальный селектор. *.Имя класса { свойство1 : значение ; свойство2 : значение ; ... } Эту запись можно сократить, убрав символ "*". Имя класса { свойство1 : значение ; свойство2 : значение ; ... } ID селекторы (идентификаторы) Идентификаторы - это типы селекторов, задающие уникальное имя элемента. Уникальное - значит встречающееся один раз в коде документа. При помощи идентификаторов можно создать стиль, но их основное предназначение - обращение к ним при помощи скриптов. При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора. #Имя идентификатора { свойство1 : значение ; свойство2 : значение ; ... } Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_). Селекторы атрибутов В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег зависимости от значения атрибута type может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input , то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов. Селекторы атрибутов бывают разные. При помощи селекторов атрибутов можно установить стиль тегу, если у него есть определённый атрибут или если определённый атрибут тега имеет определённое значение. Селекторы атрибутов - тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть. Псевдоклассы Ещё одна большая тема в CSS - псевдоклассы. Приставка "псевдо" обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора. При помощи псевдоклассов создаются динамические эффекты на странице. Синтаксис псевдокласса: Селектор:псевдокласс { свойство1 : значение ; свойство2 : значение ; ... } Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover {color : green }). Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS - это зарезервированные слова. Псевдокласс :active выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover - курсор мыши просто наведён на элемент, например на ссылку. Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно. Псевдоэлементы При помощи псевдоэлементов можно добавлять в контент страницы дополнительное содержимое, которого нет в исходном коде. Также можно изменять часть элемента, например первую букву в абзаце. То есть создаваль мнимый элемент html - первую букву со своим стилем отображения. Псевдоэлементы CSS также обширная тема, для полного раскрытия которой требуется отдельная статья. Синтаксис псевдоэлементов такой же, как и у псевдоклассов: Селектор:псевдоэлемент { свойство1 : значение ; свойство2 : значение ; ... } Селектор Селе́ктор (лат. selector сортировщик) 1) электромеханический прибор для приема вызова в телефонной сети диспетчерского управления; повсеместно выходит из употребления, заменяется более совершенной системой вызова; 2) с. импульсов - устройство для выделения импульсов определенной величины или длительности из имеющейся последовательности импульсов; примен. в автоматике, вычислительной технике, радиотехнике; 3) С. нейтронов - прибор для выделения нейтронов с определенной энергией из пучка медленных нейтронов. Новый словарь иностранных слов.- by EdwART, , 2009 . Селектор [] – особое устройство в телефонном аппарате с поляризованными магнитами, которое реагирует на строго определённые выбранные импульсы электрического тока. Большой словарь иностранных слов.- Издательство «ИДДК» , 2007 . Селектор а, м. ( лат. sēlēctor производящий отбор). 1. Электромеханический прибор, при помощи которого автоматически осуществляется в нужном направлении и с нужными пунктами телефонная связь, управление технологическими процессами и т. п. Вызвать кого-н . по селектору . 2. В сочетании: селектор импульсов (рад. , тех. ) - устройство для выделения из имеющейся последовательности импульсов только таких, которые соответствуют заданным параметрам (определенной частоте, амплитуде и т. п.). Толковый словарь иностранных слов Л. П. Крысина.- М: Русский язык , 1998 . Синонимы : Смотреть что такое "селектор" в других словарях: - (англ. selector) число, хранящееся в сегментном регистре; это 16 битная структура данных, которая является идентификатором сегмента. Селектор указывает не на сам сегмент в памяти, а на его дескриптор, в таблице дескрипторов… Селектор… … Википедия Искатель, переключатель, дешифратор; групповыбиратель Словарь русских синонимов. селектор сущ., кол во синонимов: 1 групповыбиратель (1) … Словарь синонимов СЕЛЕКТОР - (1) радиоэлектронное устройство, осуществляющее селекцию (см.) входных сигналов по определённым параметрам. Различают С.: а) амплитудный узел телевизионного приёмника, предназначенный для выделения из полного телевизионного сигнала сиихросмеси,… … Большая политехническая энциклопедия - (от лат. selector сортировщик) электромеханическое устройство для приема сигналов в избирательной телефонной связи преимущественно на железнодорожном транспорте. С 60 х гг. 20 в. заменяется более совершенной системой тонального избирательного… … Большой Энциклопедический словарь СЕЛЕКТОР, а, муж. Электромагнитный аппарат, включённый в сеть с другими аппаратами для осуществления оперативной телефонной связи нескольких пунктов с центром. Связь по селектору. | прил. селекторный, ая, ое. Толковый словарь Ожегова. С.И. Ожегов … Толковый словарь Ожегова селектор - а, м. sélecteur m. < selector < seligo отбираю. Электромагнитный аппарат для одновременного телефонного вызова нескольких ли всех абонентов данной линии; вся система избирательной связи. БАС 1. За пятьсот километров от бухты все совбодные… … Исторический словарь галлицизмов русского языка селектор - Идентификатор, используемый машиной протокола OSI (entity) для обозначения многочисленных SAP, обеспечивающих сервис для вышележащего уровня. Тематики информационные технологии в целом EN selector … Справочник технического переводчика А; м. [от лат. selector сортировщик] Электронный аппарат для одновременного телефонного вызова нескольких или всех абонентов какой л. линии; вся система телефонной избирательной связи на промышленных предприятиях, в сфере транспорта и т.п.… … Энциклопедический словарь селектор - atrinktuvas statusas T sritis automatika atitikmenys: angl. selector vok. Selektor, m; Wähler, m rus. селектор, m pranc. sélecteur, m ryšiai: sinonimas – selektorius … Automatikos terminų žodynas селектор - atrinktuvas statusas T sritis fizika atitikmenys: angl. selector vok. Selektor, m; Wähler, m rus. селектор, m pranc. sélecteur, m … Fizikos terminų žodynas Рекомендуем почитать Лучшие утилиты для удаления вирусов и вредоносных программ Вредоносное ПО (malware) - это назойливые или опасные программы,... Как тестировались программы Лучшие программы для восстановления данных с любых носителей информации.... Как уменьшить нагрузку на ЦП: простые, но эффективные методы решения проблемы Здравствуйте.Одна из самых распространенных причин, по которым тормозит... Наверх Новости Для Андроид Для Windows Для Windows Phone Скачать Viber Вайбер на компьютер × Поиск по сайту