Синтаксис HTML

HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста):

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

Как и любой язык, HTML поставляется с набором правил. Эти правила относительно простые и сводятся к определению границ, чтобы знать, где что-то начинается и где заканчивается.

Ниже приведён пример абзаца в HTML:

<p>Если Тетрис и научил меня чему-то, 
так это тому, что ошибки накапливаются, а достижения исчезают.</p>

То, что вы видите в угловых скобках < и > называется тегами HTML. Они определяют, где что-то начинается и где оно заканчивается.

Каждый из тегов несёт определённый смысл. В нашем случае <р> обозначает абзац текста.

Как правило, они идут парами:

• открывающий тег <р> определяет начало абзаца;
• закрывающий тег </p> определяет его конец.

Единственным различием между открывающим и закрывающим тегами является косая черта (/), которая предшествует имени тега.

При объединении открывающего, закрывающего тегов и всего между ними, вы получите элемент HTML. Строка целиком представляет собой элемент HTML, который использует теги HTML <р> и </p>.

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

Где писать HTML

Вы, вероятно, сталкивались c простыми текстовыми файлами, теми, которые имеют расширение .txt. Чтобы такой текстовый файл стал HTML-документом (вместо текстового), вам нужно использовать расширение .html.

Откройте текстовый редактор, скопируйте и вставьте следующее содержимое:

<p>Это моя первая веб-страница!</p>

Сохраните этот файл как my-first-webpage.html, просто откройте его вашим браузером и вы увидите:

Это моя первая веб-страница!

Помните:

• используйте текстовый редактор, вроде Notepad++, для создания HTML-документов;
• используйте браузер, вроде Firefox, для открытия HTML-документов.

Атрибуты

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

Например, атрибут href используется для определения назначения ссылки (которая создаётся тегом <a>):

<a href="http://www.mozilla.com/firefox">Скачать Firefox</a>

Есть 16 атрибутов HTML, которые могут быть использованы в любом элементе HTML. Все они не являются обязательными.

Вы в основном будете применять class (который используется для CSS) и title (подсказка, которая появляется при наведении курсора на объект, вроде этого).

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

<img src="#" alt="Описание изображения">

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

Комментарии

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

Комментарий начинается с <!-- и заканчивается -->.

<!-- Это предложение будет игнорироваться браузером -->
<p>Привет, мир!</p>

Самозакрывающиеся элементы

Некоторые элементы HTML имеют только открывающий тег:

<br> <!-- Перевод строки -->
<img src="http://placehold.it/50x50" alt="Описание"> <!-- изображение -->
<input type="text"> <!-- текстовое поле -->

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

Перейти к заданиям