HTML от А до Я — бесплатные уроки и статьи для изучения

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

Этот учебник содержит много подробных уроков с примерами.

Все они идут ниже.

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

Что такое HTML

Гипертекст (HiperText) — это тот текст, в котором есть ссылки. Это то, на что мы кликаем и переходим в другое место страницы или на иной сайт.

Изначально это просто была идея для научных статей.

Чтобы человек не листал много страниц электронного документа, а просто кликал и попадал на нужное место.

Markup — это разметка страницы.

По сути это информация о том, как у вас текст подразделяется и выдается пользователю.

То есть, где у него будет абзац, таблица, каким шрифтом пишется формула и так далее.

Изначально в html описывалось все. И сам текст, и как он разбивался на части, и как выглядел.

Дальше росли возможности браузеров и компьютеров. Росла потребность в работе с изображениями и эффектами визуализации.

Соответственно, программисты расширяли возможности html более сложными ответными функциями.

И в конце концов сам язык стал тяжеловат. Ведь в нем была информация о том, как размечается текст и как он выглядит.

Но в какой-то момент это все решили разъединить.

Вот тогда и появился CSS (Cascading Style Sheets). Это своего рода подъязык.

В него решили свести всю информацию о том, как выглядит контент. То есть цвет, фон, подчеркивание, оформление картинки и так далее.

Это полезно при создании сайта.

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

Если же все изменения делались в одном файле, то пришлось бы редактировать каждую страницу html-сайта.

А это очень неудобно.

Задачи HTML

Давайте поговорим про задачи html. Сразу стоит отметить, что не язык программирования. На нем нельзя писать алгоритмы. К примеру, с его помощью вам не удастся сосчитать сколько будет 5 + 5.

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

<p>Пример небольшого текстового абзаца.</p>

<p>Пример второго абзаца.</p>

Применив другие команды к этому тексту, можно сделать в нем различные выделения.

Пример небольшого текстового абзаца

Основной текст документа

В этом и заключается смысл языка. То есть создание смысловых блоков (тегов).

Они определяют какие элементы есть на странице и какую роль выполняют.

Нужно сказать, что в восприятии браузеров существуют только html страницы.

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

Поэтому чтобы браузер смог корректно отобразить что-то, вам нужно создать именно страницу с расширением html.

История HTML

Для общего развития давайте немного окунемся в историю html. Создателем этого языка является английский ученый Tim Berners Lee.

Создавался язык с целью легкого обмена документами между разными университетами.

Однако он так понравился разработчикам браузеров, что потом стал основным языком разметки для корректного отображения страниц.

SGML

Международной организации по стандартизации ISO был принят стандарт SGML (Standard Generalized Markup Language).

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

HTML

Поэтому в 1989 году был создан новый язык форматирования документов.

В его основу был положен SGML, который предусматривал установку связи между документами при помощи гиперссылок.

Новый язык был назван HTML.

Также его создатель создал первую программу (браузер) для просмотра html-документов.

Это неотъемлемая часть всемирной паутины для обработки веб-страниц.

Первый браузер назывался «WorldWideWeb». Позже его переименовали в «Nexus».

Но настоящим прорывом для пользователей стал 1993 год.

Марк Андриссен создал первый в мире народный браузер «Mosaic» (потом переименуют в Netscape) с графическим интерфейсом.

Пользователь мог с легкостью установить эту программу и без особых хлопот освоить серфинг сайтов.

Все это вызвало настоящий интернет бум.

Код этого браузера не был скрыт. Поэтому многие умельцы на его основе создавали свои усовершенствованные браузеры.

И так появился Internet Explorer в 1995 году.

В общем, после создания html в интернете выросла большая сеть гипертекстовых документов.

Их постепенно потом стали называть «World Wide Web».

HTML 2.0

Стандарта HTML 1 никогда не существовало.

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

Таким образом, первой официальной спецификацией стал HTML 2.0.

Опубликовал ее IETF (Internet Ingineering Task Force — инженерный совет интернета).

Это открытое сообщество ученых, проектировщиков, операторов и провайдеров.

Сообщество занималось развитием протокола и архитектуры интернета.

В 1994 году на смену IETF была создана организация W3C (World Wide Web Consortium).

В ее главе становиться создатель хтмл.

Эта организация и по сей день занимается разработкой единых принципов и стандартов для сети интернет.

Эта организация занялась подготовкой стандартов html начиная со второй версии языка.

HTML 2.0 был одобрен как стандарт 22 сентября 1995 года.

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

Это невозможно без таблиц стилей, которых тогда еще не было.

HTML 3.2

Версия 3.1 никогда официально не предлагалась. Поэтому следующая стандартная версия стала 3.2.

Она вышла 14 января 1997 года.

Включала в себя такие элементы, как таблицы, изображения, разметка формул и так далее.

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

Вследствие этого появляется CSS.

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

В итоге, хтмл остался только языком создания каркаса страницы. А все внешнее оформление (цвета, шрифты и так далее) перешло в CSS.

HTML 4

HTML 4.0 была опубликована 18 декабря 1997 года. Она претерпела некоторую очистку стандарта.

Многие элементы были отмечены как устаревшие или не рекомендованные. Но зато были усовершенствованы формы и таблицы.

Еще появилась объектная модель документа.

Теперь элементами на странице можно манипулировать при помощи скриптовых языков.

Одним из самых популярных из них стал JavaScript.

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

То есть элементы ведут себя по-разному в зависимости от действий пользователя.

Эта технология стала прорывом в веб-дизайне.

Версия HTML 4.1 была опубликована 24 декабря 1999 года. Она предлагала три варианта:

1. Strict (строгий) — не допускал элементы, которые не входили в стандарт
2. Transitional (транзитный) — это переходная форма, которая допускает элементы, исключенные из стандарта, но ранее использовавшиеся
3. Frameset — разрешены только связанные элементы, то есть рамки

XHTML

26 января 2000 года вышел XHTML 1.0. «X» значит «extensible», то есть расширяемый.

Содержание спецификаций не сильно отличалось от четвертой версии. Но разнился синтаксис языка.

В 1998 году консорциум всемирной паутины начал работать над ним.

У строгих правил есть свои преимущества. Они заставляют разработчиков использовать единый стиль кодирования.

Язык XHTML 1.0 представляет своего рода словарь XML.

Он построен в соответствии с правилами спецификации XML 1.0. Поэтому файлы XHTML являются одновременно и документами XML.

XHTML — это измененная версия HTML 4.01, переписанная в соответствии с правилами XML.

Она определяет три типа документов, как и в четвертой версии.

Как и говорил, XHTML 1.0 была одобрена 26 января 2000 года.

В августе 2002 года последовала версия 1.1. В данной спецификации получили воплощение принципы модульной разметки.

Модульный подход к развитию языка является ключевым элементом.

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

Есть еще и XHTML 2.0.

Это язык разметки разработан с целью предоставить документы для широкого диапазона целей всемирной паутины.

На данный момент эта спецификация не продолжает свою разработку. Но свои ресурсы она передала на разработку HTML 5.

HTML 5

28 октября 2014 года вышел HTML 5. Он тоже стал своего рода прорывом.

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

Еще есть обмен сообщениями между страницами, работа с видео, аудио и многое другое.

Благодаря всем этим новшествам пятая версия постепенно вытесняет с рынка технологию Flash.

Вот именно поэтому рекомендую изучать теги и со старых версий языка.

В последней версии штмл доступно масса новых тегов и атрибутов.

Можно использовать семантические теги. Появились новые возможности вставки различных элементов для формы.

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

А далее html код сам все это отработает через браузер. Потом он напишет пользователю правильно или нет тот заполнил поля в форме.

Также появилась возможность рисовать на странице.

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

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

Например, вставка видео и аудио.

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

Учебник HTML

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

Все они бесплатны и доступны ниже.

Каждая статья более подробно раскрывает определенный вопрос из данной тематики.

По возможности, рекомендую помечать некоторые моменты к себе в тетрадку. Удачи вам в обучении!