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://truemisha.ru/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://truemisha.ru/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-код этой страницы. Практически ничего нового, удачи :)

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 5

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Комментарии закрыты.
  • Миша: Привет ещё раз, не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее: во-первых,...

  • Миша: Привет, вообще без проблем, делаешь всё через require(), require_once() - выбирай любую, какая больше нравится.

  • Виталий Моргунов: Привет! Не могу разобаться, как я могу контролировать порядок подключения стилей. В моем случае мне нужно чтобы стили...

  • Миша: Спасибо!

  • w0rmak: Это было просто. Нашел код в интернете. Добавьте и себе ymaps.load(function () { var input = document.getElem...