Бесплатный курс по натяжке вёрстки на WordPress на моём YouTube канале!

HTML, первые шаги, только самое необходимое

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

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

Довольно болтовни. Скажу лишь, что HTML, который вы здесь увидите, можно спокойно называть XHTML, потому что он в принципе удовлетворяет всем требованиям.

HTML теги (синтаксис)

Они бывают двух видов:

<название_тега></название_тега>
<название_тега />

Как определить, когда тег должен быть первого вида а когда второго? Да никак — просто запомнить. К счастью запоминать много не придётся.

Атрибуты тегов

<название_тега название_атрибута="значение"></название_тега>
<название_тега название_атрибута="значение" />

Одним словом это параметры, типа х="2" или адрес_ссылки="http://google.com".

Структура страницы

<!DOCTYPE html> 
<html><head>
 
</head>
<body>
 
</body></html>

Между тегами <head> и </head> находится необходимая информация о странице, а также подключаются CSS-стили и в некоторых случаях скрипты.

Между <body> и </body> уже само содержание страницы.

Содержимое тега

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Портфолио, разработка сайтов, truemisha.ru</title>
<meta name="description" content="Разработка, а также доработка сайтов и оформление групп в социальных сетях" />
<link rel="stylesheet" href="https://misha.blog/style.css" type="text/css" media="screen" />

Как ни странно, иногда этих четырёх строчек бывает достаточно. Сейчас расскажу, что они означают.

Кстати, на нубо-сайтах я встречал целые помойки в <head>, бывало даже так, что некоторые строчки повторялись по три раза 🙂

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Это кодировка страницы. Чаще всего используется именно UTF-8, даже на зарубежных сайтах. Поэтому рекомендую не париться и тупо копировать её отсюда.

<title>Портфолио, разработка сайтов, truemisha.ru</title>

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

<meta name="description" content="Разработка, а также доработка сайтов и оформление групп в социальных сетях" />

Описание страницы, должно отличается от заголовка. Для посетителей не имеет никакого значения, но важно для поисковиков, в частности для Google, он чаще всего составляет сниппет из этого описания, а это уже видят потенциальные посетители.

сниппет в Google

Сниппет обведен красным цветом. Понятно, что чем интереснее он будет выглядеть, тем больше вероятность того, что пользователи перейдут на сайт.

<link rel="stylesheet" href="https://misha.blog/style.css" type="text/css" media="screen" />

Подключение стилей. Там где href="" указываем путь к таблице стилей (я про файл .css)

Содержимое тега <body>

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

Ссылка:

<a href="адрес_ссылки">текст_ссылки</a>

Картинка:
Обратите внимание, что ширина и высота указываются здесь просто цифрами без "px".
Описание и размеры картинки важны только для поисковиков.

<img src="адрес_картинки" width="200" height="100" alt="описание" />

Форматирование текста:
Google любит красиво отформатированные тексты.

<strong>жирный текст</strong>
<em>курсив</em>
перенос<br />строки
<h1>Заголовок 1-го уровня, должен быть один на странице</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня, зачем их столько нужно:) </h6>

В HTML ещё много всяких фишек по форматированию, но вместо них лучше использовать CSS.

Списки:
При помощи стилей с ними можно вытворять что угодно. Иногда очень удобно использовать именно их.

Маркированный список:

<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий и так до бесконечности</li>
</ul>

Нумированный список:

<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка и так далее</li>
</ol>

Блочные элементы:

<div>Обычный блок</div>
<p>Абзац</p>
<span>Кусок текста</span>

Функциональность блоков будет более подробно рассмотрена в статье про вёрстку.

А теперь нажмите Ctrl + U и взгляните на HTML-код этой страницы. Практически ничего нового, удачи 🙂

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp — официальной конфе по WordPress, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills.

Если вам нужна помощь с вашим сайтом или разработка с нуля, то могу порекомендовать хороших ребят. Просто напишите мне.