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