Урок 109. Основы HTML | Учимся работать с кодом сайта

Урок 109. Основы HTML | Учимся работать с кодом сайта

Всем-всем привет!

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

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

Погнали!

Основы HTML

HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.

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

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

  • Структуру документа;
  • Место нахождения того или иного элемента;
  • Предназначение элемента;
  • Подключаемые сторонние файлы;
  • И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
    <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">
    <meta name="description" content="Описание контента страницы, 1-2 предложения.">
</head>
<body>
   Контент страницы
</body>
</html

Разберем каждый элемент подробнее:

  1. <!DOCTYPE html>

    Начало любого HTML-документа задается этим элементом. Так как язык разметки HTML постоянно развивается и имеет несколько версий, данный элемент помогает браузеру понять какая именно версия используется в документе и его тип;

  2. <html> - открывающий тег; </html> - закрывающий тег

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

  3. <head> - открывающий тег; </head> - закрывающий тег

    В пределах тегов <head></head> указывается заголовок окна страницы (Title), мета теги Description и Keywords, а также другая техническая информация. К использованию допускаются такие теги, как:

    1. <link>

      Подключение внешних файлов, например, файл стилей style.css;

    2. <meta>

      Используется для хранения информации для браузера и поисковых систем;

    3. <style>

      Указывается для определения стилей элементов документа;

    4. <script>

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

    5. <title>

      Задает заголовок окна страницы.

  4. <body> - открывающий тег; </body> - закрывающий тег

    Хранит основное содержание страницы, которое отображается в окне браузера. Вся основная работа происходит именно в пределах данного тега.

Вот мы и разобрались со стандартной структурой HTML-документа. Думаю, Вам все понятно. Теперь же поговорим о базовых тегах, знание которых поможет нам хоть немного разбираться в коде сайта.

Я сам обладаю исключительно базовыми знаниями, однако этого вполне хватает, чтобы с легкостью ориентироваться в коде, находить ошибки и исправлять их.

Базовые теги HTML

Всего существует больше сотни, а то и двух, тегов, знать их все попросту не нужно даже сайтостроителю, ведь большинство из них он все равно не будет использовать в практике. А таким людям, как я и Вы, и вовсе нужен только десяток HTML-тегов.

Для Вашего удобства оформлю все в таблице:

<div> </div>
Блочный элемент. Выделяет определенный фрагмент HTML-документа в блок. Содержимое блока можно с легкостью редактировать с помощью стилей.

Атрбуты:

  • class — стилевой класс, позволяющий связать определенный тег с задаваемым стилем оформления;
  • id — задает стилевой индентификатор;
  • align — выравнивание содержимого блока;
  • title — всплывающая подсказка содержимого блока.
<a href="URL-документа"></a>


<a name="Идентификатор якоря"></a>
Используется для проставления ссылок на тот или иной файл сайта, на сторонний ресурс.

Атрибуты:

  • href — указывается адрес документа, на который происходит ссылка;
  • name — указывается «якорь» внутри определенной страницы.

Якорь — это закладка, находящаяся внутри HTML — документа.

<img src="Ссылка на картинку">


<img src="Ссылка на картинку" alt="Альтернативный текст">
Используется для отображения в документе изображений формата GIF, JPEG, PNG.

Атрибуты:

  • src — указывается адрес на изображение;
  • alt — альтернативный текст. Помогает поисковому роботу определить что представляет из себя картинка.
  • Несколько других специализированных атрибутов.
<ol>
   <li>1-й пункт</li>
   <li>2-й пункт</li>
   <li>3-й пункт</li>
</ol>
Вывод нумерованного списка. Каждая новая строка списка (элемент) обязательно должна начинаться с тега <li>.
<ul>
   <li>1-й пункт</li>
   <li>2-й пункт</li>
   <li>3-й пункт</li>
</ul>
Вывод маркированного списка. Каждая новая строка списка должна начинаться с тега <li>.
<p>Текстовый абзац</p>
Используется для определения текстового абзаца. Всегда начинается с новой строки в коде.

Атрибут:

  • align — выравнивание текстового абзаца;
<h1></h1>,...,<h6></h6>
Заголовки документа. Всего существует шесть уровней заголовков, в соответствии с важностью элемента. Так, заголовок первого уровня (h1) является наиболее значимым, используется, как правило, для заголовка страницы. Последующие уровни идут по убыванию относительной важности.
<p>Текстовый <span>абзац</span></p>
Применяется для выделения подстроки в строке, то есть, с помощью данного тега можно выделить какую-то часть текста.

Возможно использование стилевого класса или идентификатора, чтобы задать элементу определенное стилевое оформление.

<iframe src="http://site1.ru"></iframe>
Позволяет загрузить HTML-документ внешнего ресурса в Вашей странице.
<strong><strong>
<em></em>
С помощью данных тегов можно выделить какую-то фразу в тексте жирным и курсивом соответственно.

 

В своей работе я использую только эти теги, да и то не все. Если Вы хотите более подробно ознакомиться с темой HTML-верстки, то рекомендую изучить такой сервис, как HTMLbook.ru. В одно время он мне очень помог.

Завтра мы с Вами разберем основы стилевого оформления CSS. Ну а сегодня переварите эту информацию.

До завтра!


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *