Создание сайта с помощью языка html Что такое html? История создание языка Основные теги Создание сайта с помощью блокнота Создание сайта с помощью редактора html

Что такое html? Hyper. Text Markup Language (в дальнейшем HTML) это язык гипертекстовой разметки документа. В нашем случае этим документом является web страница. Проще говоря, это язык для написания web страниц. Читая код HTML, веббраузер выводит на экран Вашего монитора содержимое web страницы.

История создания языка html Начало было положено Тимом Бернерс-Ли, выпускником Оксфордского университета. В 1989 году он выдвинул предложение о создании «Системы гипертекстовых документов» , которая должна была использоваться внутри CERN. В 1990 году он назвал эту систему World Wide Web (на русский язык это можно перевести как Всемирная Паутина). Одной из составляющих системы был язык разметки гипертекста. Его основы были заложены в 1990 году, когда Бернерс-Ли разрабатывал первый веб-браузер. Наконец, в 1993 году появилась первая версия языка - HTML 1. 0. Но он не был стандартом. И только в 1995 году, когда закончилась разработка языка HTML 2. 0, он стал таковым. К тому времени вторую версию языка HTML полностью поддерживало большинство браузеров. Что же было в этой версии? Во-первых, полностью утвердилась структура документа (она осталась неизменной до настоящего времени). Во-вторых, достаточно широко были представлены элементы разметки текста. Втретьих, появилась возможность добавлять рисунки. Конечно же, можно было вставлять гиперссылки и веб-формы. Как мы видим, очень многое из сегодняшнего языка HTML уже было реализовано в 1995 году в спецификации HTML 2. 0. Именно этот язык стал базисом, который потом усложнялся и дополнялся.

Дальнейшим развитием языка стала версия HTML 3. 0. В ней были реализованы таблицы, обтекание текста вокруг фигур и многие другие идеи. Несмотря на обратную совместимость, отличия между версиями 2. 0 и 3. 0 были огромными, по этой причине браузеры очень медленно и достаточно вяло включали поддержку новых возможностей. Версия 3. 0 так и не стала стандартом. Зато им стала версия HTML 3. 2. Она создавалась с учетом мнений производителей браузеров (Microsoft и Netscape), что естественным образом привело к положительным результатам. Примечателен тот факт, что еще до официального утверждения данного стандарта (это произошло в 1997 году), уже в 1996 году практически все браузеры полностью поддерживали его. Во многом благодаря стандарту HTML 3. 2 веб-дизайн испытал небывалый взлет. Появилась возможность проектировать и отображать на экране сложные композиции, ничем не уступающие журналам, газетам и другим печатным изданиям (это стало возможным благодаря табличной верстке). Но из-за медленных каналов связи приходилось значительно ограничивать применение графики, а многие мониторы отображали не более 256 цветов, так что и богатство красок оставляло желать лучшего.

Несмотря на то, что язык HTML 3. 2 включал в себя многие расширения, внедренные разработчиками браузеров, он все еще оставался достаточно ограниченным, поэтому и новый стандарт не заставил себя долго ждать. Уже в том же 1997 году появилась спецификация HTML 4. 0. В нее включили фреймы, унифицировали процедуру вставки различных объектов в документ, реализовали поддержку каскадных таблиц стилей. Кроме того, были значительно усовершенствованы формы и таблицы, а некоторые элементы помечены как нежелательные для использования. Необходимо отметить, что четвертая версия HTML отличается законченностью и полнотой. Фактически, это предел возможностей данного языка. Последняя версия HTML 4. 01 была стандартизирована 24 декабря 1999 года, после чего разработка этого языка прекратилась.

Основные теги Тэг – это специальное указание того как нужно отображать элемент (текст, картинка и т. д.) на странице сайта. Можно представить его как команду браузеру содержащую название и параметры. Текст, на который должен воздействовать тэг. Большинство тэгов - парные, то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением слэша "/".

Открывающий тег, который объявляет о начале документа. Открывающий тег заголовка или головы документа (кому как удобно) В дальнейшем, если речь будет идти о заголовке документа, будем говорить тег, имя в виду «заголовок» документа. Между открывающим и закрывающим тегом располагается название документа и служебная информация для браузеров и поисковых машин. Открывающий тег названия документа дает браузеру понять, что все что написано сразу за этим тегом и до закрывающего тега является названием документа. Это название выводится браузером на самую верхнюю панель браузера. Наша первая страница - собственно само название документа.

Закрывающий тег названия документа дающий понять браузеру, что на этом действие тега закончилось. Закрывающий тег заголовка или головы документа дающий понять браузеру, что на этом действие тега закончилось. Между открывающим тегом и закрывающим находится все, что выводится браузером на экран. Это таблицы, текст, изображения. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Закрываем тело документа. Сообщаем браузеру, что на этом тело или содержимое (кому как нравиться, мы будем говорить далее «тело») документа закончено. Иными словами в данном месте закончено действие тега.

Закрываем HTML документ. Видя этот тег браузер понимает что действие тега на этом закончено.

Создание сайта с помощью блокнота Сначала создадим отдельную папку для нашего сайта. Назовем ее, например, site. Затем, откроем блокнот. Если Вы не знаете, что это такое и где он находится у вас на компьютере, то идите в панель «ПУСК» , далее «ПРОГРАММЫ» , далее на вкладке «СТАНДАРТНЫЕ» найдите и откройте «БЛОКНОТ» . Теперь пропишите следующие теги, о которых мы вам уже упоминали: Моя страничка Добрый день! Это моя первая страница!

Теперь это все сохраним. Затем вводим название страницы. Обязательно вводим расширение. html и смотрим, чтобы в строке «тип файла» Было выбрано «Все файлы»

Теперь запустим нашу страничку, чтобы посмотреть, что же у нас получилось. Для этого перейдем в папку с нашей страничкой. И запустим созданный файл. Смотрим, что у нас получилось.

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

Создание сайта с помощью редактора html Для начала Вам нужно выбрать редактор. Сyщecтвyeт два типа HTML peдaктopoв: Редакторы типа “WYSIWYG (What-You- See-Is What-You-Get) Что видишь, то и получишь” Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word Редакторы собственно HTML-текстов. В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML.

Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы На примере редактора Microsoft Office Front. Page 2003, я хочу показать примерный принцип работы редакторов. Для начала запустим его. Перед собой мы видим вот такое окно как в Word’е.

Теперь вы можете вставлять картинки, делать таблицы, писать текст, все на ваше желание, прямо как в Word. А этот редактор переделает это все в html. Вот небольшой пример моей работы в Front Page:

Нажимаем, и выходит такое вот окно: По умолчанию, сайт сохраняется в каталоге «Мои документы» в папке «Мои веб-узлы»

Src="https://present5.com/presentation/3/50880218_183922291.pdf-img/50880218_183922291.pdf-19.jpg" alt="Теперь запустим нашу сделанную страничку. Для этого заходим Мои документы->Мои веб-узлы->index. html: "> Теперь запустим нашу сделанную страничку. Для этого заходим Мои документы->Мои веб-узлы->index. html:

История развития HTML.

Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году в качестве одного из компонентов технологии разработки распределенной гипертекстовой системы World Wide Web. Когда Т. Бернерс-Ли предложил свою систему, в мире информационных технологий наблюдался повышенный интерес к новому и модному в то время направлению - гипертекстовым системам. Сама идея, но не термин, была введена Вэниваром Бушем в 1945 году в предложениях по созданию электромеханической информационной системы Меmех, которая была первым прообраз системы, поддерживающей чтение и написание гипертекста.

«Эта система использует индексирование - если человек хочет получить доступ к книге - он набирает необходимый код на клавиатуре и нужная книга или страница возникает перед ним на экране Меmех. … Когда пользователь строит ассоциативную цепочку между двумя документами, то он записывает название цепочки в книгу кодов. Сохраненные цепочки могут быть доступны пользователю в любое время. Они образуют совершенно новую книгу, которая хранится внутри Меmех и может быть вызвана из его памяти и через много лет … Возникают совершенно новые формы энциклопедий, которые содержат цепочки документов. Эти цепочки облегчают работу специалистов в области физиологии, химии, истории и других дисциплин. Возникает новая профессия проходчиков виртуальных троп (trail blazers), людей которые находят удовольствие в создании и построении полезных путей сквозь массу обычных данных … Возможно, душе человеческой будет легче летать, если мы облегчим процедуру сохранения прошлого и позволим более полно анализировать проблемы настоящего»

(Вэнивар Буш статья "Как бы могли мыслить")

Вторая после Буша по значимости личность в истории гипертекста это - Даглас Энгельбарт, работавший над проектом расширения мыслительных возможностей человека. Важно отметить, что Энгельбарт и его группа сосредоточили свои усилия на обеспечении и расширении познавательных возможностей группы людей. Многие из возможностей, заложенных в NLS, нашли свое широкое применение относительно недавно. К этим возможностям относятся встроенные в систему возможности установления гипертекстовых связей; возможность хранения групповых переговоров, встроенная в системы электронной почты; возможности личных настроек, перестроек и расширений системы пользователями; возможности усиления не только индивидуальных, но и групповых возможностей. Файлы в NLS содержались как иерархии сегментов. Каждый сегментов назывался "утверждением". Каждое "утверждение" снабжалось идентификатором своего уровня в иерархической структуре файла. Можно было установить любое число ссылочных связей "утверждений" друг с другом, связей как внутрифайловых, так и межфайловых. В результате структура приобретала неиерархические и нелинейные свойства. В системе обеспечивалось несколько способов перемещения внутри файла по "утверждениям". Исследования, проводившиеся в рамках создания системы NLS, расширяли возможности сохранения записей в коллективной памяти и, самое главное, заметно упрощали механизмы обмена записями внутри сетевого сообщества

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

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

В 1975 году идея гипертекста нашла воплощение в информационной системе внутреннего распорядка атомного авианосца "Карл Винстон". Программа внешне очень напоминала более упрощенный вид современного Total Commander. Работы по созданию гипертекстовых программ продолжались, и время от времени появлялись реализации типа НуреrСаrd фирмы Аррlе или НуреrNоdе фирмы Хеrох. В 1987 была проведена первая специализированная конференция Нуреrtехt"87, материалам которой был посвящен специальный выпуск журнала "Соmmunication АСМ". Идея гипертекстовой информационной системы состоит в том, что пользователь имеет возможность просматривать документы (страницы текста) в том порядке, в котором ему это больше нравится, а не последовательно, как это принято при чтении книг.

К концу 80-х годов гипертексту можно дать следующее общее определение: гипертекст - это текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и т.д. В компьютерной же терминологии, гипертекст - текст, сформированный с помощью языка разметки, потенциально содержащий в себе ссылки. Данные определения не теряют актуальности и по сегодняшний день.

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

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

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

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

Самым простым способом создания любого документа является его набивка в текстовом редакторе. Т.Бернерс-Ли предполагал объединить в единую систему имеющиеся информационные ресурсы CERN (Европейская организация по ядерным исследованиям, крупнейшая в мире лаборатория физики высоких энергий), и первыми демонстрационными системами должны были стать системы для NeXT и VAX/VMS. Для написания текстов использовались такие редакторы TeX или LaTeX.

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

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

В качестве базы для разработки языка гипертекстовой разметки был выбран SGML (Standard Generalised Markup Language - метаязык, на котором можно определять язык разметки для документов). Следуя академическим традициям, Бернерс-Ли описал HTML в терминах SGML (как описывают язык программирования в терминах формы Бекуса-Наура). Естественно, что в HTML были реализованы все разметки, связанные с выделением параграфов, шрифтов, стилей и т.п., т.к. реализация для NeXT подразумевала графический интерфейс. Важным компонентом языка стало описание встроенных и ассоциированных гипертекстовых ссылок, встроенной графики и обеспечение возможности поиска по ключевым словам.

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

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

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

Сейчас Консорциум всемирной паутины разрабатывает HTML версии 5. Черновой вариант спецификации языка появился в Интернете 20 ноября 2007 года. Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (англ. Extensible Hypertext Markup Language - «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, основан на XML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума всемирной паутины 26 января 2000 года.

Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых Web-разработчиков и производителей браузеров. Группой WHATWG (англ. Web Hypertext Application Technology Working Group) разрабатывается спецификация Web Applications 1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов и т. д., которые не очень удачно вписываются в модель XHTML 2.

• Перевод

HTML - язык, объединяющий всемирную сеть. Всего лишь посредством набора простых тегов, человечеству удалось создать несравнимую ни с чем по своим масштабам систему связанных между собой страниц и веб-узлов: от Amazon, eBay и Википедии, до личных блогов и сайтов, посвященных котам, похожим на Гитлера.

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

Как и всемирная сеть вообще, HTML - язык разметки гипертекста (HyperText Mark-up Language) - является детищем сэра Тима Берненс-Ли (Sir Tim Berners-Lee). В 1991 году он написал работу, озаглавленную «HTML Tags», в которой описал чуть меньше двух дюжин тегов, предложенных им для разметки веб-страниц.

Идея использовать для этого кодовые слова внутри треугольных скобок, впрочем, не принадлежит сэру Тиму. Такая система на тот момент уже существовала и использовалась в SGML (Standard Generalised Markup Language, стандартный обобщённый язык разметки), и вместо того, чтобы изобретать что-то с нуля, сэр Тим посчитал более рациональным взять за основу уже существующие решения. Аналогичный подход применялся и вообще на всем пути к HTML5 в процессах разработки.

От IEFT к W3C: дорога к HTML 4

Версии HTML 1 никогда не существовало. Первой официальной спецификацией был сразу HTML 2.0, и издала его организация IETF (Internet Engineering Task Force, Специальная комиссия интернет-разработок). Многие из возможностей языка, описанных в этой спецификации, были основаны на уже используемых сторонних разработках. Например, тег для вставки картинок на страницы был реализован в лидирующем на тот момент (мы говорим о 1994 году) браузере Mosaic, и потом просто перекочевал в стандарт для HTML 2.0.

Эстафету IEFT позже подхватил W3C (World Wide Web Consortium, Консорциум Всемирной Паутины), который и занимался всеми последующими версиями HTML. Во второй половине девяностых велась активная работа над пересмотром и изменением спецификаций, которые в конце концов (точнее, в 1999 году) дали жизнь HTML 4.01.

После этого в истории HTML наступил первый ключевой поворот.

XHTML 1: HTML в виде XML

Новая версия языка разметки после HTML 4.01 была названа XHTML 1.0. «Икс» в названии означал eXtreme, и веб-разработчики были обязаны скрещивать перед собой руки каждый раз, когда произносили это слово.

Нет, конечно нет. На самом деле «икс» означал eXtensible («расширяемый»), а скрещивание рук было по желанию.

Сама по себе спецификация для XHTML 1.0 ничем не отличалась от HTML 4.01. Не добавилось никаких новых тегов или параметров - разница была лишь в правилах синтаксиса. Если в HTML разработчикам была дана полная свобода относительно стиля написания кода, в XHTML требовалось соблюдать правила языка XML, - куда более жесткого и нетерпимого к вольностям, - на котором основывалось большинство разрабатываемых Консорциумом технологий.

Жесткие правила, впрочем, пришлись как раз кстати. Они побуждали кодеров придерживаться единого стиля, например - писать все теги и параметры исключительно в нижнем регистре, тогда как в HTML можно было делать как придется.

Выход XHTML 1.0 совпал с возросшим уровнем поддержки современными браузерами таблиц стилей - CSS, - и строгий синтаксис XHTML укрепился в сообществе разработчиков с репутацией лучшего способа написания кода разметки.

Потом был XHTML 1.1.

Если версия 1.0 была просто HTML, сделанным под XML, то XHTML 1.1 - это уже настоящий, чистый XML. В том смысле, что к нему уже нельзя было применить mime-type text/html и нужно было обозначить документ как отформатированный в XML. Однако в том случае его никак не смог бы отобразить самый популярный на тот момент браузер - Internet Explorer, - так что применять на практике этот язык было явно не вариантом.

Создавалось впечатление, что W3C в свои разработках начинает терять связь с реальностью, по которой жила всемирная сеть.

XHTML 2: нет, это уже ни в какие ворота не лезет

Если бы герой Дастина Хоффмана из фильма «Выпускник» был веб-дизайнером, W3C сказал был ему только одно слово: XML.

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

Иными словами, это был бред.

Раскол: W(HATWG) TF?

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

Начало переменам было положено в 2004 году на одном из собраний. Ян Хиксон (Ian Hickson), который на тот момент был сотрудником Opera Software, выдвинул предложение заняться развитием HTML до уровня, позволяющего использовать этот язык для веб-приложений. Предложение было отклонено.

Разочарованные бунтари вынуждены были отколоться от Консорциума и организовать собственную группу: Web Hypertext Application Technology Working Group, сокращенно WHATWG.

От Web Apps 1.0 к HTML5

Принцип работы WHATWG несколько отличался от того, что был в W3C. В W3C вопросы поднимаются, обсуждается, и конечное решение выносится всеобщим голосованием. В WHATWG вопросы так же поднимаются, обсуждается, но окончательные решения относительно того, что включается в спецификацию, а что нет, остаются за главным редактором - Яном Хиксоном.

С виду может показаться, что система в W3C более демократична и честна, но практика показывает, что бесконечные споры и внутренние перебранки жутко тормозят процесс развития. В WHATWG, где каждый может внести свой вклад, но последнее слово остается за Главным, дела движутся куда быстрее. Главред, впрочем, и не обладает абсолютной властью - избранная группа руководящих лиц может оспорить его решение в том маловероятном случае, если оно того требует.

Первоначально, WHATWG было занято двумя спецификациями - Web Forms 2.0 и Web Apps 1.0, - обе из которых должны были стать расширениями для HTML. Но со временем они были объединены в одну общую, названную просто HTML5.

Воссоединение

В то время как в WHATWG работали над HTML5, W3C продолжал канителиться со своим XHTML 2. Нельзя сказать, что вся эта затея скатывалось в говно. Она в него медленно-медленно погружалась.

В октябре 2006-го сэр Тим Бернерс-Ли признал в своем блоге, то идея перевести сеть с HTML на XML была глупой. Спустя несколько месяцев W3C выдал новую установку для HTML Working Group: было разумно решено, что будущие версии HTML следует основать на наработках WHATWG, вместо того, чтобы делать что-то с нуля.

Все эти развороты и смены курса привели к несколько запутанной ситуации. Какое-то время W3C одновременно работал над двумя совершенно несовместимыми языками разметки - XTHML 2 и HTML 5 (обратите внимание, с пробелом), - в то время как WHATWG, отдельная организация, занималась спецификацией HTML5 (без пробела), которая должна была стать основой для другой спецификации в W3C. Хрен срастишь тут, что к чему. Проще было заняться разгадкой последовательности событий в «Мементо» и работах Дэвида Линча.

XHTML мертв, да здравствует синтаксис XHTML

Ситуация начала проясняться в 2009-ом, когда W3C объявил, что обновлений по XHTML 2 больше поступать не будет. По сути, они просто официально признали, что формат был мертв с самого рождения.

Однако, странным образом, вместо того, чтобы обойтись без лишнего внимания, смерть XHTML 2 породила какие-то злорадные бурления. Противники XML превратили новость в призыв отказаться от XHTML 1, хотя с XHTML 2 тот, как мы знаем, не имел ничего общего. В свою очередь сторонники XHTML 1, адепты строгого синтаксиса, были обеспокоены тем, что HTML5 вновь узаконит небрежную верстку.

Последнее, впрочем, не должно казаться серьезной проблемой - как мы рассмотрим далее, степень сторогости синтаксиса HTML5 каждый вправе выбрать для себя самостоятельно.

Развитие HTML5

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

Две организации сейчас работают над этим форматом. В WHATWG разрабатывают спецификацию, основываясь на принципе «сначала запустить, потом проверять». W3C HTML Working Group в свою очередь берет эту спецификацию и пропускает ее через процесс «сначала проверить, потом запустить». Как видно, такое сотрудничество вряд ли можно назвать крепким и эффективным. Но по крайней мере, вроде как разрешился вопрос «ставить или не ставить пробел» в названии стандарта (ставить его не надо, если что, - HTML5).

Что сейчас больше всего волнует веб-дизайнеров, которые уже опробывали некоторые из возможностей нового языка, это вопрос «Когда это будет готово?» В одном из интервью Ян Хиксон упомянул 2022-ой год как дату, когда HTML5 получит статус «proposed recommendation». Это вызвало волну возмущения среди дизайнеров, так как они понятия не имели, что значит «proposed recommendation», но точно знали, что им явно не хватает пальцев посчитать, сколько лет надо еще ждать до 2022-го.

Если разобраться, возмущения необоснованы. В данном случае «proposed recommendation» означает, что к этому времени в браузерах должна быть полная поддержка всех возможностей языка. В этом случае ориентироваться на 2022 даже слишком смело; мы все знаем, что многие браузеры с трудом подхватывали в свое время даже существующие стандарты. Взять хотя бы Internet Explorer, которому понадобилось больше десяти лет, чтобы начать элементарно поддерживать тег .

Дата, на которую действительно надо ориентироваться, это 2012 год, когда HTML5 будет присвоен статус «candidate recommendation», означающий, что спецификация окончательно сформулирована и как таковой стандарт готов.

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

Иными словами, не будет такого момента, когда можно будет сказать «Бах, время HTML5 пришло!». Но начинать работать с ними можно уже сейчас. Благо, язык этот получил рождение не через революцию, а в процессе эволюции, и основывается на том, что было создано до него. Таким образом, можно сказать, что если вы пользуетесь любыми предыдущими версиями HTML, вы уже пользуетесь HTML5.

Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Краткая предыстория

Давным давно, практически на заре цивилизации (до 70-х годов XX века), не было интернета. Вообще не было.

С появлением компьютеров появилось желание и потребность как-то их объединить, и 4 крупных университета США взялись за эту задачу. Примерно 7 лет прошло от создания концепции до исторического момента:

29 октября 1969 года был проведен сеанс связи между двумя первыми узлами сети ARPANET, на расстоянии в 640 км: в Калифорнийском университете и в Стэнфордском исследовательском институте. Ученый из Лос-Анджелеса подключился удаленно к компьютеру в Стэнфорде. Стэнфордский коллега видел, как появляются на экране символы, введенные на расстоянии, и подтверждал по телефону передачу каждой буковки. Таким образом началась эпоха компьютерных сетей.

Долгое время Интернет был предназначен только для специалистов и служил в основном для обмена технической документации и имейлами. Простому пользователю делать там было нечего. И только в начале 90-х прошлого века произошла революция "интернет-народу!" 🙂

1991 год

Британец Тимоти Джон Бернерс-Ли в Женевском ЦЕРНе изобрел язык гипертекстовой разметки , он же HyperText Markup Language , он же HTML , предназначенный для разметки и оформления документов World Wide Web.

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

Язык HTML

Полагаю, все веб-разработчики с полным правом могут считать именно 6 августа своим профессиональным праздником 🙂

Как вам понравилась первая веб-страница? 🙂 Думаю, большинству из вас не захотелось её читать и уж тем более оставаться там надолго. Создатели тоже понимали, что это только начало, и пошло поехало:

Июнь 1993 - HTML 1.2

В этой версии, из её сорока с копейками тегов уже появилось аж 3 тега, которые намекали на какое-то визуальное оформление документа (например, полужирный курсив). Остальные же теги служили исключительно для логической разметки.

1994 год - основание W3C

Сэр Тим Бернерс-Ли основал Консорциум Всемирной Паутины (World Wide Web Consortium, W3C ) . Миссией W3C было и остается

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

Огромная заслуга этих ребят принадлежит в том, что HTML был выпущен с единым базовым набором тегов и атрибутов и веб-страницы стали такими, какими мы их знаем сейчас. Только представьте, в середины девяностых, несколько крупнейших производителей ПО планировали выпустить свои версии HTML со своими названиями тегов. Какая каша была бы сейчас в сфере веб-разработки! Например объявления о работе: «Ищем верстальщика для создания сайтов в Mozilla Firefox », «Срочно требуется верстальщик для Edge », «Нужен верстальщик для Kindle »… словом, спасибо W3C 🙂

22 сентября 1995 – Версия 2.0

Процесс разработки и утверждения новой версии был очень неспешным, а единственным заметным улучшением новой версии стали:

• Запросы: например поиск по ключевым словам.
• Формы для передачи данных с компьютера на сервер: например ввести дату рождения или выбрать один из нескольких вариантов в опроснике.

Март 1995 – начало работы над HTML 3.0

Первый вариант стандарта включал в себя много интересностей:

• теги для создания таблиц,
• разметки математических формул,
• обтекание изображений текстом и др.

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

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

17 декабря 1996 – CSS

CSS (Cascading Style Sheets ) , а по-русски – иерархические стилевые спецификации. Думаю, понятней не стало?)) Если совсем уж по-русски, то это таблицы стилей, которые присоединяются к документу HTML и служат для визуального оформления тех или иных частей документа.

Итак, система CSS:

• формально не зависит от HTML,
• у неё свой, отличный от HTML, синтаксис,
• На неё не влияют идеологические ограничения HTML,
• Она позволяет задавать параметры внешнего представления для любого тега HTML.

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

Чтобы наглядно продемонстрировать чудеса, на которые способен CSS, канадец Дейв Ши создал сад CSS дзена – место, где сотни веб-разработчиков медитируют верстая одну и ту же HTML-страницу с абсолютно разными стилями CSS

Влияние Microsoft

А тем временем, в далекой-далекой галактике… Microsoft заметил стремительный взлет компании Netscape на продаже браузеров Navigator и конечно же, не мог стоять в стороне. В MS слегка переработали браузер Mosaic и начали выпускать свои эксплореры, которые поначалу не очень полюбились пользователям (да и не только поначалу;)).

В августе 1996 была создана версия Internet Explorer 3.0 Браузер предлагал значительные нововведения на то время и обрел популярность, что поделило рынок браузеров пополам между Netscape Communications и Microsoft.

И в это же время Microsoft взял под свою опеку W3C.

14 января 1997 – HTML 3.2

Версия 3.2 вышла спустя месяц после утверждения CSS, и была уже полностью приспособлена к взаимодействию с таблицами стилей.

В ней были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Internet Explorer 3.

18 декабря 1997 – HTML 4.0

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

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

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

24 декабря 1999 – HTML 4.01

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

Рабочая группа WHAT

2004 год : Швейцарский программист Ян Хиксон (на тот момент разработчик в Opera) и несколько представителей таких компаний как Mozilla, Google и Apple, основал рабочую группу под названием WHATWG (Web Hypertext Application Technology Working Group ).

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

Два года W3C и WHAT Working Group работали каждый над своим проектом. Но позже стало видно, что WHAT Working Group достигает каких-то результатов, тогда как XHTML 2 так и не реализовался.

И в 2006 году Тим Бернерс-Ли объявил, что W3C и WHATWG будут вместе работать над дальнейшим развитием HTML.

28 октября 2014 – HTML 5

• Новая версия сделала синтаксис более строгим по сравнению с предыдущей
• Улучшилась поддержка мультимедиа-технологий
• Появились 28 новых структурных элементов, благодаря которым код стал более понятным
• Исключена еще часть устаревших тегов
• Стало больше внимания уделяться поддержке скриптов, например javascript

На данный момент развитие HTML продолжается…

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

Может, скоро и вы станете одним из них?

И напоследок, минутка юмора:

Оптимист учит английский, Пессимист - китайский, а реалист учит html.

Будьте реалистами 😉

Начну, пожалуй, с начала..

HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.

Теперь о командах - их называют дескрипторами, но чаще - тегами.

Вернемся к нашей первой страничке.. итак мы написали:

Привет мир!!!

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

Так что же мы написали? и как это читает браузер?

Мысли браузера:

- начало документа.. опять работы привалило..
- смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?
- все название закончилось.. можно идти дальше..
- ага и в голове кроме названия больше никаких вздорных мыслей не держим..
- "тело" документа всё что написано ниже выставляем на всеобщее обозрение
Привет мир!!! - как мило! Достали уже!!!

- переносим текст на следующую строчку.. я даже догадываюсь что в ней будет...
Меня зовут (здесь Ваше имя), это моя первая страничка! - ну да так и есть.. ничего пооригинальнее придумать не могут..
- что всё что ли? Больше ничего не отображать?
- ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!

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

1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий

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

2) Все документы должны иметь вот такой шаблон кода:

- начало документа
- начало головы
- закрытие головы
- начало тела
- закрытие тела
- конец документа

Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..

3) О порядке:

Открывающий и закрывающий тег по типу <…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание

Если писать, например, так:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание

То получится белиберда, которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..

Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..

При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!

При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:






Привет мир!!!

Меня зовут Карлсон, это моя первая страничка!



Значительно легче, чем так:






Привет мир!!!

Меня зовут Карлсон, это моя первая страничка!



И уж тем более чем вот так:

Привет мир!!!
Меня зовут Карлсон, это моя первая страничка!

Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".