Знакомство с HTML

Серию статей о программировании я хотела бы начать с изучения HTML. Здесь, на Голосе, он для обычных пользователей полезнее всего. HTML расшифровывается как HyperText Markup Language, то есть язык разметки гипертекста. Это стандартный язык разметки документов в Интернете.

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

HTML - довольно простой язык разметки. Код состоит из специальных элементов, называемых дескрипторами, которые заключаются в угловые скобки. Их также называют тегами. Большинство тегов используются парами, например:

<p>В данном случае первый тег p открывает показывает начало параграфа, а второй /p - конец.</p>

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

Заголовки

Заголовки всегда очень важны, как на любой веб-странице, так и в ваших постах в блоге. В HTML есть шесть уровней заголовков:

Заголовок первого уровня

<h1>Заголовок первого уровня</h1>

Заголовок второго уровня

<h2>Заголовок второго уровня</h2>

Заголовок третьего уровня

<h3>Заголовок третьего уровня</h3>

Заголовок четвертого уровня

<h4>Заголовок четвертого уровня</h4>

Заголовок пятого уровня

<h5>Заголовок пятого уровня</h5>

Заголовок шестого уровня

<h6>Заголовок шестого уровня</h6>

Начертание

Теги b и strong устанавливают для текста, находящегося между ними, жирное начертание.

<b>Жирный текст</b>

<strong>Еще один жирный текст</strong>

А теги i и em определяют курсив для текста.

<i>Курсивный текст.</i>

<em>И еще один курсив.</em>

Здесь стоит отметить, что в Голосе тег i не работает.

Изображения

Для отображения картинки на странице используется тег<img>

. А адрес файла задаётся через атрибут src. Также есть обязательный атрибут alt, содержащий альтернативный текст для изображения. Обратите внимание, закрывающий тег для img не требуется.

То есть это текст отображаемый во время загрузки изображения.

Другие атрибуты тега мы рассмотрим обязательно, но чуть позже.

<img src="Ссылка на изображение" alt="альтернативный текст">

Ссылки

И последний на сегодня, тег <a>. Для создания ссылки необходима информация о том, что будет являться ссылкой и адрес, на который следует сделать ссылку.

<a href="URL">текст ссылки</a>

Таким образом, содержимое тега a - ссылка, а значение атрибута href - адрес, куда будет совершен переход по ссылке.

Ссылкой можно сделать и изображение, как например, я рассказывала в посте о навигации. В HTML это делается следующим образом:
<a href="URL"><img src="Ссылка на изображение" alt="альтернативный текст"></a>

---

Думаю, для первого раза достаточно. И надеюсь, что у меня получилось понятно объяснить, что такое теги и как их использовать. Попробуйте попрактиковаться на своих следующих постах.

Жду в комментариях и чате ваши отзывы, пожелания и замечания.

---