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

17/04/2017

386

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

Коли начали мы изучать 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, а также другая техническая информация. К использованию допускаются такие теги, как:
1. ```
<link>
```
  Подключение внешних файлов, например, файл стилей style.css;
2. ```
<meta>
```
  Используется для хранения информации для браузера и поисковых систем;
3. ```
<style>
```
  Указывается для определения стилей элементов документа;
4. ```
<script>
```
  Применяется для описания скриптов, использующихся на странице, а также можно указать ссылку на внешний файл со скриптом, программой;
5. ```
<title>
```
  Задает заголовок окна страницы.
```
<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="https://site1.ru"></iframe>	Позволяет загрузить HTML-документ внешнего ресурса в Вашей странице.
<strong><strong> <em></em>	С помощью данных тегов можно выделить какую-то фразу в тексте жирным и курсивом соответственно.

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

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

До завтра!

3 КОММЕНТАРИИ

Анна 13/06/2019 at 02:01

Здравствуйте! Простите за глупый вопрос. Я только начинаю познавать сео копирайтинг и мне непонятно, я как исполнитель в каком виде должна передавать работу? Написанную в коде страницы со всеми разметками и тегами?
Спасибо большое за ответ!
Ринас ContextUP 17/06/2019 at 09:50

Здравствуйте, Анна! Уже ответил Вам ВК. Спасибо за вопрос!
Леонид 09/11/2019 at 13:23

Полученной здесь информации , хватило чтобы создать сайт и скачать в нем приложение. После запуска приложения :ошибка – не найден файл к которому есть обращение в приложении; Сайт и файл с исходными данными находятся в одной папке. моей директории. Вопрос. Надо ли дополнительно описать файл в сайте?