Что такое HTML

Главная / Что такое HTML

Итак, поговорим о том что такое 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) очень хорошо работают вместе, потому что каждая из них имеет определенную роль и они в какой-то мере зависят друг от друга.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *