Урок 109. Основы HTML | Учимся работать с кодом сайта
Всем-всем привет!
Коли начали мы изучать SEO продвижение, значит нужно знать основы HTML и CSS, которые помогут сделать наши сайты лучше и привлекательнее для поисковых систем. Всю эту неделю я буду рассказать Вам о работе с кодом сайта и вот, что Вас ждет:
- Основы стилевого оформления (CSS);
- Знакомство с текстовым редактором Notepad++. Будем учиться редактировать код сайта с помощью данных редакторов;
- Правильное использование тегов H1, H2, H3. Поможем поисковому роботу понять структуру страницы;
- Проверка кода на валидность. Узнаем насколько правильно составлен код сайта и найдем ошибки;
- Составим техническое задание (ТЗ) для программиста-верстальщика (если необходимо).
Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога 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
Разберем каждый элемент подробнее:
-
<!DOCTYPE html>
Начало любого HTML-документа задается этим элементом. Так как язык разметки HTML постоянно развивается и имеет несколько версий, данный элемент помогает браузеру понять какая именно версия используется в документе и его тип;
-
<html> - открывающий тег; </html> - закрывающий тег
Данный тег является контейнером, в который входит все содержимое страницы. Необязателен к заполнению, но все же принято его использовать в каждом документе. Имеет закрывающий тег;
-
<head> - открывающий тег; </head> - закрывающий тег
В пределах тегов <head></head> указывается заголовок окна страницы (Title), мета теги Description и Keywords, а также другая техническая информация. К использованию допускаются такие теги, как:
-
<link>
Подключение внешних файлов, например, файл стилей style.css;
-
<meta>
Используется для хранения информации для браузера и поисковых систем;
-
<style>
Указывается для определения стилей элементов документа;
-
<script>
Применяется для описания скриптов, использующихся на странице, а также можно указать ссылку на внешний файл со скриптом, программой;
-
<title>
Задает заголовок окна страницы.
-
-
<body> - открывающий тег; </body> - закрывающий тег
Хранит основное содержание страницы, которое отображается в окне браузера. Вся основная работа происходит именно в пределах данного тега.
Вот мы и разобрались со стандартной структурой HTML-документа. Думаю, Вам все понятно. Теперь же поговорим о базовых тегах, знание которых поможет нам хоть немного разбираться в коде сайта.
Я сам обладаю исключительно базовыми знаниями, однако этого вполне хватает, чтобы с легкостью ориентироваться в коде, находить ошибки и исправлять их.
Базовые теги HTML
Всего существует больше сотни, а то и двух, тегов, знать их все попросту не нужно даже сайтостроителю, ведь большинство из них он все равно не будет использовать в практике. А таким людям, как я и Вы, и вовсе нужен только десяток HTML-тегов.
Для Вашего удобства оформлю все в таблице:
<div> </div> |
Блочный элемент. Выделяет определенный фрагмент HTML-документа в блок. Содержимое блока можно с легкостью редактировать с помощью стилей.
Атрбуты:
|
<a href="URL-документа"></a> <a name="Идентификатор якоря"></a> |
Используется для проставления ссылок на тот или иной файл сайта, на сторонний ресурс.
Атрибуты:
Якорь — это закладка, находящаяся внутри HTML — документа. |
<img src="Ссылка на картинку"> <img src="Ссылка на картинку" alt="Альтернативный текст"> |
Используется для отображения в документе изображений формата GIF, JPEG, PNG.
Атрибуты:
|
<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> |
Используется для определения текстового абзаца. Всегда начинается с новой строки в коде.
Атрибут:
|
<h1></h1>,...,<h6></h6> |
Заголовки документа. Всего существует шесть уровней заголовков, в соответствии с важностью элемента. Так, заголовок первого уровня (h1) является наиболее значимым, используется, как правило, для заголовка страницы. Последующие уровни идут по убыванию относительной важности. |
<p>Текстовый <span>абзац</span></p> |
Применяется для выделения подстроки в строке, то есть, с помощью данного тега можно выделить какую-то часть текста.
Возможно использование стилевого класса или идентификатора, чтобы задать элементу определенное стилевое оформление. |
<iframe src="http://site1.ru"></iframe> |
Позволяет загрузить HTML-документ внешнего ресурса в Вашей странице. |
<strong><strong> <em></em> |
С помощью данных тегов можно выделить какую-то фразу в тексте жирным и курсивом соответственно. |
В своей работе я использую только эти теги, да и то не все. Если Вы хотите более подробно ознакомиться с темой HTML-верстки, то рекомендую изучить такой сервис, как HTMLbook.ru. В одно время он мне очень помог.
Завтра мы с Вами разберем основы стилевого оформления CSS. Ну а сегодня переварите эту информацию.
До завтра!
Здравствуйте! Простите за глупый вопрос. Я только начинаю познавать сео копирайтинг и мне непонятно, я как исполнитель в каком виде должна передавать работу? Написанную в коде страницы со всеми разметками и тегами?
Спасибо большое за ответ!
Здравствуйте, Анна! Уже ответил Вам ВК. Спасибо за вопрос!