Архив метки: HTML

Главная / HTML
3 Поста

В основе HTML находятся HTML-теги. Так что, довольно важно понимать из чего HTML-тег состоит и как правильно его составлять.

Обычно HTML-теги имеют открывающий и закрывающий тег, которые окружают какой-то контент.


<p>Контент</p>

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

Технически говоря, p сам по себе называется элементом, а вместе со скобками он называется тегом.

Но чаще всего, когда кто-то говорит об элементе p или о теге p, они могут иметь в виду одно и то же.

Большинство тегов имеют закрывающий тег соответствующий открывающему, но не все.

К примеру, теги <br> и <hr> имеют только открывающий тег.

Тег <br> служит для переноса строки, а <hr> означает горизонтальную линию.

Каждый HTML-тег имеет определенные атрибуты.


<p id="myId">Контент</p>

В этом примере мы назначаем myID в качестве значения атрибута id.

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

К примеру, значение атрибута id должно быть уникально в пределах страницы.

То есть, ни один другой элемент на странице не должен иметь значение атрибута id равное myId.

Если будет еще один элемент с таким id, ваш HTML не будет валидным и потенциально это может вести к ошибкам.

Давайте вкратце поговорим об истории HTML.

Обычно история какой-то технологии не является особо захватывающей, и я бы не сказал, что история HTML это исключение.

Но некоторые её части дадут вам не только понимание того как эта технология развивалась, но также позволят вам оценить аспекты HTML, которые по-прежнему релевантны и применимы сегодня.

История HTML

До 1997 не было стандартов сообщества, так что в основном браузеры делали что хотели. Они изобретали новые теги, реализовывали некоторые вещи по-разному. Это был в каком-то роде Дикий Запад для Сети.

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

Около 1997 года появился консорциум W3C, предложив стандарты, на которые действительно начали обращать внимание разработчики браузеров. Это был стандарт HTML4, который быстро обновили до HTML 4.01.

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

Затем, около 2000 года, W3C сделали еще одну спецификацию под названием XHTML 1.0, она была основана на XML.

XML очень жесткий, но очень четкий язык разметки.

W3C хотели продолжить работу и издать XHTML 2.0.

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

Так что, в 2004 разработчики браузеров объединились и создали другую группу под названием WHATWG.

Эта группа значительно менее демократична по сравнению с W3C. Они имеют один центр и одного редактора, принимающего финальные решения.

Некоторое время эти организации не особо пересекались.

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

Это то что произошло в 2007-2009 годах.

Так что, WHATWG и W3C начали в какой-то мере сотрудничать.

Тогда они представили то что мы имеем сейчас, HTML5.

Что это означает для вас

Что имеет значение, так это то, что есть две организации, которые в какой-то степени отвечают за HTML.

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

W3C отвечает за стандарты, это то чем они занимаются. А WHATWG даже не дают версии своим HTML-стандартам, они просто называют это HTML который постоянно развивается.

«Нет версии, мы не останавливаемся, мы продолжаем развивать его».

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

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

Так как следить за всем этим?

Ну, во-первых можно следить за спецификациями W3C. Это довольно скучное академическое чтение, но вы все же будете находить что-то полезное.

Спецификация HTML5

Я переводил некоторые спецификации на русский.

Кроме того, еще одним интересным сайтом является caniuse.com.

Это сайт, который сам отслеживает стандарты HTML5, SVG, CSS, JavaScript API и так далее, чтобы сказать вам какие браузеры их поддерживают.

К примеру, если вы введете srcset, то получите таблицу с информацией о том какие браузеры поддерживают этот относительно новый атрибут, а какие (как IE) — нет.

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

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

На данный момент первый по популярности браузер это Chrome, за ним идет Firefox.

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

Итак, поговорим о том что такое HTML.

Что такое термин «HTML» и как он относится к вебу? Немного ниже мы поговорим о большой тройке технологий, на которых держится Сеть: HTML, CSS и JavaScript.

Где в этом место для HTML? Другими словами, какую роль играет HTML в веб-разработке?

По мере прочтения вы найдете ответы на эти довольно простые вопросы.

HTML

Прежде всего, HTML расшифровывается как HyperText Markup Language.

Гипертекст (hypertext) это текст, который содержит ссылки на другие тексты. В принципе, это то чем является Веб. Один документ ссылается на другой документ, тот ссылается на следующие и так далее.

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

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

К тому же, HTML неплохо читаем человеком.

Последнее слово это язык (language). Язык имеет свой синтаксис, это означает что есть правильный и неправильный путь написания.

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


<h1>
  <div>Hello world!</h1>
</div>

А в этом примере показан правильный порядок.


<h1>
  <div>Hello world!</div>
</h1>

Технологии, на которых держится Веб

Давайте поговорим о технологиях, на которых держится Сеть: HTML, CSS и JavaScript.

HTML предоставляет структуру документа, то есть какие компоненты он имеет. К примеру, он может иметь один заголовок, два параграфа и футер.

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

Как если вы знаете что дом состоит из кухни и комнаты, но не знаете какого они цвета и как оформлены.

Цвет и стиль — это роль CSS. Цвета, макет, стиль и размер шрифта, и все прочие вопросы оформления.

Третий компонент, JavaScript, определяет поведение и функциональность. К примеру, что происходит после загрузки страницы или что просхойдет при клике на заголовок. Работа JS — предоставить эти функции.

Давайте посмотрим пример всего этого.


<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Структура HTML (до)</title>
  </head>
  <body>
    <h1>Структура HTML</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor. Donec commodo vestibulum tincidunt. </p>
    <footer>
      <hr>
      <p>Тех. поддержка: support@we-have-lunch.com</p>
    </footer>
  </body>
</html>

Заголовок, пара параграфов, футер с адресом (не работающей) поддержки…

Давайте добавим в тот же документ немного стилей и поведения.


<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Структура HTML (после)</title>
  </head>
  <body>
    <h1 style="text-align: center; color: green; font-size: 60px;">Структура HTML</h1>
    <p style="font-size: 1.5em; margin: 0 100px 0 100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor. Donec commodo vestibulum tincidunt.</p>
    <footer>
      <hr>
      <p style="text-align: center;" 
         onclick="alert('Отправка сообщений бесполезна...');">
         Тех. поддержка: support@we-have-lunch.com
      </p>
    </footer>
  </body>
</html>

Теперь давайте посмотрим на оба этих документа в браузере.

В первом нет ничего особенного. Заголовок, пара параграфов и т.д.

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

И если мы кликнем по адресу e-mail внизу, появится сообщение.

Что, кстати, соответствует опыту большинства людей по поводу текстовой поддержки…

Как вы видите, добавились некоторые стили и поведение, но структура осталась точно той же.

Вкратце

HTML размечает контент и определяет структуру документа.

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

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