Язык HTML. Что такое HTML-код. Что такое HTML? История создания HTML
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
| charset | Указывает кодировку символов для текущего HTML-документа: |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: |
| name | Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: . Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. |
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
...
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент
Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
через
директиву @import url
@import url(style.css);
с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
| crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
| href | Основной атрибут тега, в качестве значения выступает путь к файлу со стилями. |
| hreflang | Определяет язык текста в документе, на который идет ссылка. |
| media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
| sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения: ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например: ; any - иконка может масштабироваться до любого размера. |
| title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
| type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" . |
| async | Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
| charset | Определяет кодировку символов |
| crossorigin | Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. |
| defer | Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
| nonce | Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
| src | Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу. |
| type | Используются для объявления языка сценария, использованного при составлении содержимого тега. |
В этом разделе располагается все содержимое документа. Для элемента доступны .
| onafterprint | Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
| onbeforeprint | Событие, срабатывающее перед отправкой страницы на печать. |
| onbeforeunload | Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
| onhashchange | Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . |
| onmessage | Событие происходит, когда сообщение получено через источник события. |
| onoffline | Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
| ononline | Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
| onpagehide | Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
| onunload | Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
На протяжении ряда последних лет постоянно совершенствуются технические возможности вычислительной техники, развиваются коммуникационные средства и технологии управления информационными ресурсами, все это приводит к тому, что активно появляются более крупные информационные системы. Имеются в виду масштабы систем не только в отношении объемов поддерживаемых информационных ресурсов, но и в отношении количества их пользователей. Так в настоящее время объемы информационных ресурсов Web определяются многомиллионными количествами страниц.
Подобное развитие информационных технологий, сетей и систем дало массовое распространение языку гипертекстовой разметки HTML. Под информационными системами подразумевают инструменты, моделирующие реальность, которые реализуются различными подходами. Для последних лет характерно появление инструментальных средств и крупных информационных систем, в которых предусмотрено совместное использование различных информационных технологий. В настоящее время имеется много различных специальных программ для создания Web-сайтов. С помощью этих программ работа разработчиков, создающих Web-страницы сложного дизайна, стала значительно легче, поскольку появилась возможность динамического генерирования Web-страниц.
Деятельность информационных технологий характеризуется стандартизацией различного рода аспектов. Эта деятельность позволяет обеспечить перенос приложений и информационных ресурсов с одной программно–аппаратной платформы на другую, а также повторно использовать ресурсы, например использование программных компонентов приложений.
Сеть Internet стала популярной с появления WorldWideWeb (WWW), поскольку эта сетевая технология первой предоставила пользователям достаточно простой и в то же время современный интерфейс доступа к различным сетевым ресурсам. Простое и удобное использование привело к увеличению количества пользователей WWW, а также к привлечению внимания коммерческих структур. В дальнейшем число пользователей стало расти лавинообразно, так продолжается и по сей день. В связи с этим появилась необходимость объединения всего множества информационных ресурсов, ее решением стало развитие технологии определения гипертекстовой навигационной системы. Эта технология была представлена языком HTML. Поскольку технология HTML на ранних этапах была очень простой, все пользователи сети одновременно смогли создавать и читать информационные материалы, опубликованные во Всемирной паутине. Это произошло потому, что разрабатывая различные компоненты технологии предположили квалификацию авторов информационных ресурсов, их оснащенность средствами вычислительной техники минимальными.
Определение 1
Язык HTML (HyperTextMarkupLanguage, язык разметки гипертекста) является языком разметки текста. Под разметкой понимают общую служебную информацию, не выводящуюся с документом, но определяющую внешний вид тех или иных фрагментов документа.
Например, выделение слова жирным шрифтом или курсивом, вывод отдельного абзаца особым шрифтом или оформление заголовка крупным шрифтом.
Стандарт SGMLЭто язык разметки создавался и был разрекламирован как один из вариантов SGML. Впервые в 1974 году Чарльз Голдфарб предложил, а в дальнейшем значительно доработав его приняли официальным стандартом ISO, SGML (StandardGeneralizedMarkupLanguage, Стандартный обобщенный язык разметки), представляющий собой метаязык, т.е. систему описания других языков.
Стандарт SGML появился, так как возникла необходимость совместно использовать данные разными приложениями и операционными системами. Проблема с совместимостью возникла у пользователей очень давно, еще на заре появления вычислительной техники. Ученые из IBM - Чарльз Гольдфарб, Эд Мо-шер и Рэй Лори – проанализировали многие нестандартные языки разметки на предмет недостатков и сформулировали общие принципы, обеспечивающие совместную работу с документами в разных операционных системах. Ниже приведены эти принципы:
Замечание 1
Вышеназванные правила составляют основу предшественника SGML - GML (Generalized Markup Language), который разрабатывали и исследовали около 10 лет, пока по соглашению, заключенному международной группой разработчиков, не появился стандарт SGML.
Средства языка HTMLСредства языка HTML обеспечивают форматную разметку документов, определяют гиперсвязи между документами (их фрагментами). За основу при написании кода HTML выбрали обычный текстовый файл. Можно сказать, что гипертекстовая база данных в концепции WWW представляет собой набор текстовых файлов, в которых разметка выполнена на языке HTML, определяющем форму представления информации (разметку) и структуру связей между файлами и информационными ресурсами (гипертекстовые ссылки). Разработчиками HTML были решены задачи:
- предоставления дизайнерам гипертекстовых баз данных простого средства для создания документов;
- создания мощного средства для отражения имевшихся в то время представлений об интерфейсе пользователя гипертекстовых баз данных.
Первую задачу решили выбором теговой модели для описания документов. С помощью языка HTML можно проводить разметку электронного документа, отображаемого на экране с полиграфическим уровнем оформления, причем в результирующем документе могут содержаться разнообразные метки, иллюстрации, аудио - и видеофрагменты и т.д. В язык были включены развитые средства создания различных уровней заголовков, шрифтовых выделений, разные списки, таблицы и др.
Другим важным моментом стало использование за основу языка обычного текстового файла. Среда редактирования HTML является нейтральной полосой между простейшим текстовым файлом и приложением WYSIWYG (whatyouseeiswhatyouget – что вы видите, то и получаете). Выбор среды редактирования предоставляет все преимущества текстового редактирования.
Гипертекстовые ссылки, которые использовались для связи текстовых документов между собой, постепенно стали применять для объединения различных информационных ресурсов, в том числе звука и видео. С помощью системы гиперссылок HTML можно построить систему взаимосвязанных по разным критериям документов. В состав языка HTML входят команды (тэги), которые позволяют управлять формой и размером шрифтов, размером и расположением иллюстраций, а также осуществляют переход от фрагмента текста или иллюстрации к другому html-документу (гипертекстовые ссылки). Документ, представленный в html-форматом – это текстовый файл со всеми необходимыми сведениями о выводимой на экран информации. Управлять сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно с помощью языков программирования этих сценариев (JavaScript, Java и VBScript). Для обработки форм ввода данных пользователя и другой информации можно использовать специальные серверные программы (например, на языках PHP или Perl). Используя язык HTML, можно размещать на страницах гипертекстовые ссылки и интерактивные кнопки, соединяющие Web-страницы с другими страницами сайта и с другими сайтами. До сих пор не существует настолько удобных редакторов HTML, чтобы пользователь мог бы обойтись без текстового редактора и ручной расстановки тэгов, что гораздо усложняет работу с языком, делает необходимым овладение несвойственных ему функций.
Замечание 2
Проанализировав особенности языка HTML и оценив уровень его проработки, можно сделать вывод, что уже в ближайшие годы возможно появление более совершенных его модификаций, новых языков и прикладных пакетов для работы с web-страницами.
Динамический и статический HTML-документыHtml-документы бывают двух видов: статические и динамические. Статические документы хранят файлы файловой системы, используемой web-сервером или браузером при просмотре локальных файлов. Размещая информацию на web-сервере, используют динамические документы, не существующие постоянно в виде файлов, а генерирующиеся в момент запроса клиента. При чем для конечного пользователя не имеет значения каким способом представлены документы.
Генерирование динамических документов HTML происходит с помощью специально написанной программы по правилам web-сервера. При планировании размещения информации на сервере, для правильного определения видов документов, учитывают степень обновления данных, их объем и частоту обращений к ним. При динамическом способе подразумевается хранение данных в формализованном виде, например в базе данных. При хранении данных в формализованном виде используются шаблоны документов с произведенными в них изменениями, генерируются статические документы путем использования любых средств отчетов, имеющихся в той системе управления баз данных (СУБД), которой последние обработаны и формализованы.
Перспективы HTMLНовые версии языка HTML не предполагаются, не смотря на это существует дальнейшее развитие HTML под названием XHTML (англ. Extensible Hypertext Markup Language - расширяемый язык разметки гипертекста). Пока возможности XHTML сопоставимы с HTML, но предъявляются более строгие требования к синтаксису. Язык XHTML является подмножеством языка SGML, однако в отличие от HTML, соответствует спецификации XML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 26 января 2000 года. Нужно отметить, что в этом формате создано большое количество информационных ресурсов, которые долго еще будут пониматься web-браузерами и использоваться в своем первозданном виде. Кроме того, все новые форматы будут разрабатываться (и уже разрабатываются – например XML) с поддержкой технологий HTML.
Стили работы меняются, меняются и средства доступа к содержимому. Язык HTML уже изначально создавался как платформо - независимый язык. Новые технологии используются повсеместно и довольно скоро пространство WWW перестанут применять лишь пользователи настольных персональных компьютеров, уже сейчас некоторыми пользователями активно применяются голосовые браузеры для незрячих или браузеры, использующие азбуку Бройля, зачастую содержимое выводится не на монитор компьютера, а на экран телевизора, где применяются приставки с выходом в сеть, на телетайп или на монохромные дисплеи различных организаторов-пейджеров и пр.
За появление HTML современный мир должен благодарить одного ученого Европейского совета по ядерным исследованиям (Conseil Européen pour la Recherche Nucléaire, CERN). Зовут этого ученого Тимоти Джон Бернерс-Ли. Первая версия HTML создавалась для целей форматирования научных документов. Именно структурного форматирования без элементов описания цветовых схем, параметров шрифта и т.п. Таким образом, изначально HTML позволял выделять в тексте заголовки, абзацы, списки и им подобные структурные элементы. Результат обработки или “воспроизведения” HTML не должен был зависеть от технических особенностей аппаратных средств его визуализации, поскольку не содержал в себе параметров этой визуализации. Со временем такая особенность языка разметки гипертекста была частично утрачена.
Итак, появление первых версий HTML относят к 1986 году, а в 1991 году HTML был существенно доработан и стал использоваться именно для передачи гипертекста по просторам всемирной паутины. Говорят, что всемирно известная аббревиатура HTML, расшифровывающаяся как Hyper Text Markup Language (язык разметки гипертекста) появилась как раз в начале 90-х годов прошлого века. А теперь небольшой экскурс в родословную языков разметки. Первая версия языка разметки гипертекста HTML была создана на основе стандарта обобщенного языка разметки SGML (Standard Generalized Markup Language), который в некотором роде можно считать прообразом расширяемого языка разметки данных (eXtensible Markup Language). Стандарт XML в наше время приобрел огромную популярность благодаря большому количеству своих расширений, используемых в компьютерных технологиях. Чтобы совсем запутать читателя сразу добавлю, что впоследствии на основе XML был разработан язык разметки гипертекста XHTML (Extensible Hypertext Markup Language), повторяющий по своей сути HTML. В результате мы имеем аббревиатуры SGML, HTML, XML и XHTML, и необходимо понять, кто из них кто. На самом деле все просто: SGML это не что иное, как набор правил, на основе которых можно строить любые языки разметки. HTML и есть один из этих языков - приложение SGML. Другими словами, SGML определяет то, как должны выглядеть элементы разметки, а HTML - какие именно должны быть элементы и как они должны интерпретироваться браузерами. XHTML, в свою очередь, является приложением XML, а сам XML ни что иное, как упрощенный вариант SGML. , не смотря на то, что очень внешне похожи, имеют существенные скрытые отличия, которые, по большей части, заключаются в принципе их обработки.
Теперь вернемся к истории развития HTML. Итак, до 1994 года HTML по-прежнему использовался только для структурной разметки данных, хотя в его составе уже появились теги для выделения текста жирным или курсивом. В том же 1994 году создается организация W3C (World Wide Web Consortium) – Консорциум всемирной паутины, которую возглавляет, что вполне логично, тот самый Тим Бернерс-Ли, и в 1995 году в свет выходит рекомендация HTML 2.0. Создатели HTML уже тогда понимали, что со временем их детище из языка статичной разметки текста эволюционирует в основной инструмент создания динамических интернет ресурсов. Главным дополнением HTML 2.0 стало появление в составе языка форм с наборами пользовательских элементов управления, которые должны были использоваться для ввода пользователем параметров HTTP запросов.
После выхода второй версии сразу же началась работа над следующим поколением HTML. В 1997 году выходит рекомендация HTML 3.2, которая дополнила язык разметки таблицами, фреймами, изображениями и некоторыми другими важными тегами. Но самым главным достижением 3-й версии является то, что ее авторы вновь вернулись к проблеме визуализации разметки в браузере, вспомнили про то, что HTML должен размечать лишь структуру документа и не должен содержать непосредственно в себе параметры графических стилей отображения элементов в браузере. Результатом их работ над HTML 3.2 стало появление самостоятельного языка CSS (Cascading Style Sheets) – каскадных таблиц стилей, код которого можно теперь подключать к коду разметки HTML и тем самым настраивать внешний вид страницы.
К выходу 4-й версии HTML в 1997 году сотрудники W3C избавили свое детище от тех ненужных элементов, которые с появлением CSS стали устаревшими и компрометировали идею отделения разметки структуры от параметризации представления. Но из-за таких мелочей никто не стал бы городить новую версию. Основное достижение рекомендаций HTML 4.0 – появление объектной модели страницы (Document Object Model, DOM), элементами которой теперь можно было манипулировать посредствам скриптовых языков программирования, исполняемых браузерами. Самым популярным таким языком программирования является JavaScript. HTML плюс DOM плюс JavaScript равно Dynamic HTML или просто DHTML, который ознаменовал прорыв в веб-дизайне. Теперь элементы загруженной интернет страницы могли изменять свой внешний вид в ответ на действия пользователя, а также добавлять новые и удалять имеющиеся элементы. В 24.12.1999 году выходит последняя редакция 4-й версии языка разметки гипертекста – HTML 4.01.
Версия HTML5 до сих пор еще не получила статус официальных рекомендаций W3C, но уже сейчас понятно, что авторы HTML продолжают работать в направлении разработки требований к поддержке объектной модели документа и интерпретации JavaScript. Хотя HTML5 и получит ряд новых тегов, но большая часть рекомендаций все же касается поведения браузера в контексте работы DHTML: появится встроенная поддержка функций перетаскивания элементов (drag-and-drop), возможность рисовать на виртуальном полотне (canvas), управлять просмотром истории, обмениваться сообщениями между страницами, сохранять контекст исполнения и многое другое. Есть надежда, что с выходом новых рекомендаций HTML проблемы отсутствия кроссбраузерности, когда один и тот же JavaScript код исполняется под управлением разных браузеров по-разному, будут постепенно исчезать. Ведь тенденция определять требования к работе с объектной моделью и JavaScript будет сохраняться, а разработчики браузеров будут обязаны (если хотят, чтобы их программными продуктами пользовались) следовать этим требованиям.
Выход HTML5 запланирован на 2014 году. Возможно, к тому времени W3C разработает отдельные рекомендации, касающиеся только программирования на JavaScript, а HTML со временем снова станет исключительно языком разметки структуры документа. Не смотря на то, что сегодня еще только 2012 год, многие уже сейчас поддерживаются наиболее популярными браузерами. Многое, что приходилось веб-дизайнерам раньше делать самостоятельно (тот же drag-and-drop), с выходом HTML5 будет поддерживаться на уровне браузера, и такой ход развития событий не может не радовать. Остается надеяться, что тенденция сохранится.
Приветствую вас на страницах моего блога. HTML – это простой язык разметки, с помощью которого создаются веб-страницы. Я сказал что он простой, чтобы вы не пугались его изучения. Язык html для начинающих подходит просто идеально – намного сложнее с нуля сразу освоить какой-нибудь язык программирования, а вот html реально намного проще.
В этой статье я хочу подсказать вам, как наиболее быстро и эффективно изучить этот язык, чтобы уже через месяц-два вы отлично его знали. Думаете, невозможно? Я начал изучение html в конце марта. В конце мая я уже без проблем знал 90% нужных для работы тегов.
Как выучить язык бесплатно?Конечно, для наиболее быстрого изучения вы должны найти несколько полезных сайтов. Во-первых, вам пригодится справочник html. Им пользуются даже матерые программисты, потому что удержать в голове десятки тегов и их атрибутов просто невозможно.
Из справочников я могу посоветовать вам – htmlbook . Это реально крутой сайт, на котором собраны все теги, показан результат их работы с подробным описанием. Но справочник это лишь дополнительный инструмент, наибольшего эффекта можно добиться при реальной практике.
Интерактивные курсыИ тут я говорю об интерактивных курсах. Это возможность писать код и сразу видеть, как он отображается. На курсах вам будут давать задания. Сначала простые, например, превратить текст в заголовок или сделать таблицу. Потом – сложнее. В конце концов вы обретете понимание того, что можно делать с помощью HTML. Если вы думаете, что за это нужно платить, то ошибаетесь.
– это замечательный сайт с курсами по html и css. Первые 16-18 курсов бесплатно! Если вы захотите продолжить обучение и получить доступ к платным, то придется платить 300 рублей в месяц или 1800 в год. Лично я отдал 300 рублей, прошел за месяц все платные курсы и получил от этого много пользы.
Важность записейЕще один совет от меня – записывайте! Записывайте всю новую и важную для вас инормацию. Не записав вы рискуете так и не закрепить в памяти нужные знания. Лично у меня на полке лежит три общих тетради, практически полностью исписанных и время от времени я заглядываю в них, когда забываю то или иное свойство.
Параллельное изучение html и cssHTML – это всего лишь одна веб-технология, с помощью которой формируется структура и разметка веб-страницы. За оформление в сайтостроении полностью отвечает CSS. Эти языки нужно изучать одновременно, потому что они взаимодействуют друг с другом.
Набравшись кое-каких знаний вы можете практиковаться самостоятельно. Как это делать? Попробуйте сверстать статью с картинками, таблицу, вложенный список, простой двухколоночный макет страницы или что-то еще. Вы должны практиковаться, потому что это единственный способ быстро заложить в мозг понимание того, как все работает. Лучше всего, конечно, в этом вопросе найти себе учителя, но за это, скорее всего, вам придется заплатить.
Уроки от команды webformyselfWebformyself – замечательный интернет-портал, который предоставляет кучу информации по сайтостроению. На их сайте вы можете найти много бесплатных статей по HTML, CSS и верстке сайтов, но также ими выпущены платные видеоуроки, цель которых максимально быстро донести до вас полезные знания.
В конце концов, у вас должна быть цель, по которой вы изучаете эти веб-технологии. Обычно это делают для того, чтобы научиться самостоятельно верстать макеты сайтов. Если у вас тоже есть такая цель, то отличным вариантом для вас будет приобретение доступа к премиум-урокам на сайте webformyself.com . В итоге вы можете получить не только доступ к урокам по HTML и CSS, но и много других. Например, по JavaScript и WordPress.
Там есть полезные уроки, в том числе хотел бы отметить возможность сверстать свой первый макет по урокам. Это очень важно, потому что вы получите хорошую практику, после чего сможете набивать руку уже самостоятельно, пытаясь верстать другие макеты для сайтов, которые находите в сети.
За сколько можно выучить языки?В среднем, HTML и CSS можно выучить очень быстро, при правильном подходе. Например, у меня на это ушло несколько месяцев. Если знать, где брать знания, то процесс изучения можно ускорить в несколько раз.
Хорошие сайты с полезными материалами я вам дал – дальше ваше дело. В принципе, вышеперечисленные ресурсы являются наилучшими в интернете. Например, курсы от Htmlacademy прошли более ста тысяч человек, а на обновления Webformyself подписаны больше 87 тысяч людей.
Урок 1
Тема: «Моя первая интернет страничка»
Что такое HTML. История создания.
Прежде чем приступить к занятиям, давайте разберемся, что же такое язык HTML и для чего он нужен? HTML (HyperText Markup Language - язык гипертекстовой разметки) предназначен для разметки и оформления документов, публикуемых в World Wide Web (WWW) или, проще сказать, HTML-документов. Под разметкой следует понимать служебную информацию, которая не выводится на экран, но определяет структуру документа и внешний вид его структурных единиц. Создатели позаботились о том, чтобы этот язык был независимым от платформы, т.е. мог работать в любых операционных средах. Основными элементами языка HTML стали дескрипторы (или тэги, tags) - операторы, названия которых заключаются в угловые скобки. Документы, размеченные при помощи этого языка, визуализируются броузерами конечных пользователей в большинстве случаев одинаково благодаря тому, что "понимают" и правильно обрабатывают структурные элементы языка HTML. Исходный код представляет собой текст, отформатированный с помощью дескрипторов, причем посетителю Web-страницы эти элементы не видны, а виден лишь результат их воздействия на документ.
Отцом HTML принято считать Тима Бернерса-Ли (Tim Berners-Lee), который предложил передавать информацию в Интернет в виде гипертекстовых документов с возможностью просмотра их через веб-браузер. HTML разрабатывался как универсальный язык, который могли бы понимать все компьютеры. HTML документ представляет собой обычный текстовый документ с включенными в него элементами языка разметки. Поэтому, создать HTML документ можно используя любой текстовый редактор, например блокнот.
Особенностью языка HTML является то, что он, по сути, дает лишь рекомендации браузеру как интерпретировать тот или иной элемент языка. Т.е. один и тот же элемент языка может по-разному отображаться различными браузерами. К тому же разработчики браузеров стали вводить новые элементы, которые воспринимались только их браузерами. Так началась так называемая «война браузеров». Поэтому перед профессиональным разработчиком стоит тяжелая задача - профессионально сделанный сайт должен одинаково выглядеть при просмотре разными типами браузеров. Для этого необходимо «тестировать» свои документы в процессе создания. Наиболее популярными на сегодняшний день являются браузеры Internet Explorer, Netscape Navigator, Mozilla, Opera, которые работают под операционной системой Windows.
В тоже время разработчики HTML постоянно прилагают усилия направленные на достижение все большей универсальности языка. В настоящий момент за развитие HTML отвечает международная некоммерческая организация Консорциум World Wide Web (W3C). Консорциум разработал три версии языка HTML - HTML3.2 (принят в январе 1997), HTML4.0 (принят в декабре 1997), XHTML (принят в январе 2002).
Как создать слой в Автокаде?
Iframe и Frame — что это такое и как лучше использовать фреймы в Html Как выглядит фрейм
Сетевая карта wi-fi: виды, принцип работы и подключение Как работает сетевой адаптер wifi