Словари HTML и CSS.
Для отображения в браузерах данных интернет ресурсов используется язык гипертекстовой разметки HTML (hyper text markup Language), который имеет свою стандартизацию и позволяет отображать данные на мониторе в виде текста. Одной разновидностью языка HTML является язык с более жестким синтаксисом, XHTML который ориентирован вот ещё один язык гипертекстовой разметки XML. По сети интернет связь между браузерами настоящее время осуществляется по двум протоколам http и https. Формулировки и обозначения языка HTML выражается в терминологии DOM предполагающую объектную модель документа.
Создание гипертекстовой разметки HTML относится к 80 годам XX века, автором считается научный деятель Тим Бернерсом-Ли, главным преимуществом языка HTML является создание набора структурных и семантических элементов которые выполняют те или иные функции и их достаточно просто запомнить, такие дескрипторы называли тегами. При помощи подобных тегов достаточно просто оформить в сети интернет при помощи языка HTML любой документ. Правда, изначально HTML был относительно простой и мог отображать лишь текстовые данные, а разнообразные дополнительные медийные способности он обрел уже в более новых версиях. Отметим, что в самом начале язык содержал всего 18 элементов. Создание подобного языка гиперразметки делалось под необходимость стандартизации и возможности функционирования на любых аппаратных устройствах вне зависимости от их конфигурации и принципах работы. Все документы написаны на языке HTML, имеют расширение .html или .htm, браузер, ориентируясь на это расширение, отображает страницу по определённым правилам.
За время существования языка гипертекстовые разметки были разработаны несколько версий, каждая из которых вносила свои изменения и дополнения, позволяя предоставлять большие инструментов для создания интернет ресурсов, выражались они в наборе спецификацией разнообразных тегов поддерживающих те или иные функции. Существуют следующие спецификации:
- HTML 2.0
- HTML 3.0
- HTML 3.2
- HTML 4.0
- HTML 4.01
- HTML 4.01 strict
- HTML 5
- HTML 5.1
- HTML 5.2
- HTML 5.3
В процессе создания новых версий некоторые теги не рекомендовали с использованием и считались устаревшими, соответственно появились новые более удовлетворяющие требованиям гипертекстовой разметки. Всё проблема в отображении и структурировании упиралась в браузерные возможности, потому что созданное браузера старых модификаций могли функционировать только с более ранними языками и соответственно не поддерживать новые функции усовершенствованных языков HTML. Отметим существовавшие попытки создать HTML язык, который бы попадал под синтаксис XML, созданные Химера получило название XHTML в версии 1.0, версия XHTML 2.0 в конце первого десятилетия XXI века так и не была закончена и от неё отказались.
Особенности HTML.
Структурно язык гипертекстовой разметки HTML разбит на теги, они бывают открывающими и закрывающими, либо одиночными тегами. Внешний вид тега выглядит следующим образом: <head> - открывающий тег, </head> - закрывающий тег, одиночный тег <hr> или </br>. В начале документа в самой первой строке указывается ссылка, к какой спецификации относится этот документ: <!DOCTYPE HTML PUBLIC "----">, где под чёрточками подразумевается обозначение языка и ссылка на нахождение спецификации по данному виду языка. С появлением языка новой версии HTML 5 обозначение значительно упростилось и выглядит следующим образом: <!DOCTYPE html>, что является очень удачным и простым решением.
Отметим возникшие трения между производителями интернет браузеров, которые продвигали собственные нововведения, ввиду дополнительных наборов поддерживаемых элементов гипер разметки. Это привело к затруднениям выразившихся в отображении сайтов в разных интернет браузерах по-разному. Из-за этого программистам пришлось создавать специальные кроссбраузерные программы, а в определенных случаях для нормального отображения на любых устройствах приходилось создавать параллельные страницы несколько вариантов для нормального отображения на всех устройствах. Конечно, сейчас это проблема ещё до конца не устранилась, иногда могут возникнуть сложности из-за используемого веб-браузера, для решения этого вопроса большую помощь оказала разработанная библиотека jquery, которая свела расхождение работоспособности браузеров к минимуму, но, к сожалению полностью пока не устранила, в новых версиях jquery ошибок становится всё меньше.
Документы CSS.
Особым пунктом для сети интернет стало появление каскадных таблиц стилей CSS (cascading Style sheets), в нём применены возможности основного вида текста на языке разметки по формальному признаку. Данного типа файла используется в симбиозе с директивами HTML или XHTML, но имеет также возможность использоваться с XML файлами, а также с форматами SVG и XUL. Без использования таблиц CSS в день сегодняшний отображение интернет ресурсов практически невозможно, программистом сейчас очень тяжело реализовать те задачи, которые ставятся согласно верстке перед сайтами. С помощью CSS производится регулировка различных стилей по цветам, шрифтам и по многим другим аспектам, на которых осуществляется выдача веб-страницы. Самую главную задачу, которую выполнила созданная таблица CSS, появилось разделение логического функционала ресурса и описание внешнего вида, за них в принципе CSS и отвечает. Этот функционал позволяет редактировать и изменять внешний вид web-страницы очень быстро без значительных усилий растянутых во времени.
Внешний вид CSS файлов представляют собой установленные правила и в фигурных скобках комментарии, которые эти правила выполняют. Но для работоспособности CSS файла требуется его подключить в html документ, это возможно сделать четырьмя способами:
- Первый самый основной через ссылку за главном элементе <head>, выглядит следующим образом: <link rel="stylesheet" type="text/css" href="style.css">, данный способ считается одним из самых лучших, так как позволяет полностью исключить в HTML документе обозначение стилей.
- Второй способ с помощью инструкции @import также в главном элементе <head> между открывающимся и закрывающим тегом <style>, в следующем виде: <style media="all"> @import url(style.css); </style>.
- Третий способ, когда значения стиля включается, в тег <style> в главном элементе <head> примерный вид следующий: <style> body{color: blue;} </style>
- Четвёртый способ предполагает указание стилей в основе самого документа <body>, например это выглядит следующим образом: <p style="font-size: 24px; color: yellow; font-family: arial">.
При использовании в XML форматах должно содержаться ссылка следующего вида: <?xml-stylesheet type="text/css" href="style.css"?>.
Селектора и приоритеты в CSS.
Записи в CSS файлах имеет законы записи селектора и соответствующего блок объявлений которые заключены в фигурные скобки "{}". Внутри фигурных скобок указывается свойства, которые требуется описать ставится двоеточие ":" затем идет описание значение относящиеся к этому свойству в конце ставится точка с запятой ";". Новые свойства рекомендуется начинать с новой строки.
Существуют виды селекторов, которые воздействуют на документ HTML в качестве отображения таблицы стилей:
- Универсальный селектор обозначается "*" и действует ко всему документу, имеет вид "*{}".
- Селектор тегов воздействуют на вид конкретного тега, имеет вид "p{}".
- Селектор классов воздействует на указанные классы, прописанные в HTML документе, имеет вид: ".lote{}".
- Селектор идентификаторов воздействует на идентификаторы "id" которые прописаны также в HTML документ, имеет вид: "#lote{}".
- Также есть селектор атрибутов, выглядит следующим образом: "a[href="http://www.elite-exp.ru"] {}".
- Контекстный селектор или по-другому называющийся селектор потомков, имеет вид: "div#paragraph1 p.note{}".
- Селектор для управления дочерних элементов, выглядит следующим образом: "p.lote > b{}".
- Селектор для использования с учетом элементов одного уровня, имеют вид: "h1 + p{}".
- Селектор псевдоклассов, имеет вид: "a:active{}".
- Селектор псевдоэлементов, отображается следующим образом: "p::first-letter{}".
Согласно практике в документе HTML, любому элементу доступны, быть представлены атрибуты класса (class) или идентификатора (id) в формате: <div id="one" class="two">. Различие между ними в том, что идентификатор характеризует один элемент, а класс имеет возможность быть назначен нескольким элементам. В формате CSS используется принцип наследования и каскадного принципа распределения полномочий, это сделано для исключения возможных конфликтов при создании документов HTML и CSS. Существуют правила приоритета, по уровню это выглядит следующим образом:
- Самый низкий приоритет это стиль браузера
- Второй уровень приоритета это настройки пользователя в браузере, но учитывая, что большинство пользователей даже не обращает внимания, что такие настройки существуют, этот приоритет практически не используется
- Самым высоким приоритетом считается стили, которые заданы автором интернет ресурса.
- А максимально возможным приоритетом обладает правило "!important", устанавливаемое перед используемым стилем.
До момента, когда CSS файлы появились и начали использоваться, в сети интернет, верстка осуществлялась исключительно методами HTML, но используемые новые правила значительно упростили в программировании и обладали неоспоримыми техническими преимуществами, а именно:
- Стало возможно создавать несколько дизайна ресурса, для разных устройств, для просмотра пользователя.
- Произошло значительное сокращение процесса загрузки страниц из-за выделения каскадных таблиц стилей в собственный отдельный файл.
- Стало гораздо проще редактировать и создавать новые стили дизайна интернет сайтов.
- Появилась достаточное количество дополнительных функций, которые значительно преобразили отображение интернет ресурса в браузере пользователя.
Конечно, не обошлось без ложки дегтя в бочке меда, из-за браузерных войн отображение в некоторых браузерах Table CSS может быть интерпретировано по-разному и соответственно внешний вид может отличаться, особенно это заметно на браузерах старых модификаций. Кроме того, также требуется при редактировании и изменениях делать изменения в двух видах файлах HTML и CSS.
Впервые таблицы CSS начали использоваться с 1996 года, сейчас существует четыре версии уровни каскадных таблиц CSS, регулярно и стабильно работает CSS3, а CSS4 находится в стадии разработки и тестирования. С каждым новым уровнем вносятся дополнения изменения делающих работу веб программистов более удобной и позволяющей реализовать новые функции и форматы.
