HTML

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

Бесплатный HTML учебник с подробными уроками для новичков с нуля

Что такое HTML

HTML (расшифровывается как HiperText Markup Language) — это язык разметки гипертекста. Он сообщает браузеру информацию о том, какие элементы есть на странице и какую смысловую нагрузку они несут.

Что такое HTML и для чего он нужен

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

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

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

Пример html разметки страницы сайта
HTML разметка

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

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

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

Вот тогда и появился CSS (Cascading Style Sheets). Это своего рода подъязык. В него решили свести всю информацию о том, как выглядит контент. То есть цвет, фон, подчеркивание, оформление картинки и так далее.

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

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

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

Задачи HTML

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

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

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

<p>Пример второго абзаца.</p>
Пример отображения абзаца на html-странице
Абзац на странице

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

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

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

Пример выделения текста на html-странице
Выделение текста

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

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

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

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

История HTML

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

Английский ученый и основатель языка HTML Tim Berners Lee
Tim Berners Lee

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

SGML

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

Пример SGML документа
SGML

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

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

HTML

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

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

Также его создатель создал первую программу (браузер) для просмотра html-документов. Это неотъемлемая часть всемирной паутины для обработки веб-страниц. Первый браузер назывался «WorldWideWeb». Позже его переименовали в «Nexus».

Пример отображения интерфейса браузера WorldWideWeb
Браузер WorldWideWeb

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

Пример интерфейса браузера Mosaic
Mosaic

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

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

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

HTML 2.0

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

Опубликовал ее IETF (Internet Ingineering Task Force — инженерный совет интернета). Это открытое сообщество ученых, проектировщиков, операторов и провайдеров. Сообщество занималось развитием протокола и архитектуры интернета.

Организация W3C (World Wide Web Consortium) и стандарт HTML 2.0

В 1994 году на смену IETF была создана организация W3C (World Wide Web Consortium). В ее главе становиться создатель хтмл. Эта организация и по сей день занимается разработкой единых принципов и стандартов для сети интернет.

После этого последующие версии стандарта html публиковались на сайте www.w3c.org. Консорциум привлек к деятельности самых известных деятелей во главе с Тимом Бернерс-Ли.

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

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

HTML 3.2

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

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

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

Язык HTML 3.2 и каскадная таблица стилей CSS

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

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

HTML 4

HTML 4.0 была опубликована 18 декабря 1997 года. Она претерпела некоторую очистку стандарта. Многие элементы были отмечены как устаревшие или не рекомендованные. Но зато были усовершенствованы формы и таблицы.

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

Язык программирования JavaScript при создании сайтов в интернете

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

Совместное взаимодействие HTML, CSS и JavaScript позволило делать страницы сайта более интерактивными. Элементы страницы стали отзываться на действия пользователя.

К примеру, при наведении курсора одни блоки могут появляться, другие исчезать. То есть элементы ведут себя по-разному в зависимости от действий пользователя. Эта технология стала прорывом в веб-дизайне.

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

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

XHTML

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

Пример структуры документа на языке XHTML
XHTML

HTML дает авторам значительную свободу в написании элементов и атрибутов. А XHTML требует следовать правилам XML. Более строгого языка разметки, на котором основаны многие технологии W3C.

В 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. Он тоже стал своего рода прорывом. Помимо добавления новых тегов, появилось много других возможностей. Например, функция перетаскивания текста или рисование на виртуальном холсте. Еще есть обмен сообщениями между страницами, работа с видео, аудио и многое другое.

Возможности языка разметки HTML 5 при создании сайтов

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

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

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

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

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

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

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

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

Учебник HTML

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

Бесплатный и самый лучший учебник по HTML

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

Сказать спасибо кнопками ниже:

Синие стрелки вниз

Теги html

Обзор всех тегов языка html

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

Структура html документа

Полностью разбираем основную структуру HTML

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

Adblock detector