Html для чайников - Евгений Концевой

HTML для чайников
Евгений Концевой, руководитель СЕО проектов, учебный центр ТопЭксперт

Евгений Концевой
 В SEO чуть больше года
 Опыт работы – как на стороне
заказчика, так и в SEO-агентстве.
 Специализация: продвижение
порталов, интернет магазинов,
программирование и внедрение
стратегий. Работал с проектами
cian.ru, keramogranit.ru,
buyreklama.ru, aksline.ru и др.
 Выпускник 2-го потока курсов
ТопЭксперт

ТопЭксперт – это
 Учебный центр по SEO с
эффективной программой
обучения.
 Образовательный сайт,
содержащий справочную
информацию.
 Группа экспертов,
оказывающих услуги аудита,
консультаций и продвижения
сайтов.

Обсудить основные html теги и ошибки вѐрстки, влияющие
на SEO
Цели вебинара

Схема вебинара

Состав web-страницы
Вѐрстка веб-страниц — процесс формирования (вѐрстка) веб-страниц в
текстовом редакторе, следующий этап после веб-дизайна
Страница состоит из тегов
<html>
<head>
….
</head>
<body>
….
</body>
</html>

Состав тега
Тег – минимальный функциональный элемент, который входит в состав
страницы
<a href=―page.html‖>Страница</a>
Открывающий
тег
Атрибут Закрывающий
тег
Внутренняя
часть

Базовые теги
<html> - основной тег, включающий в себя всѐ содержимое веб-страницы
<head> - тег, служащий для подключения файлов стилей и скриптов js,
для объявления мета тегов а также <title> и для объявления других
данных, которые напрямую не отображаются на странице
<body> - предназначен для хранения содержания веб-страницы,
отображаемого в окне браузера
 - тег комментариев

<a> - тег ссылки
<a href=―page.html‖>Страница</a>
Использование тега в качестве метки
<a name=―step1‖></a>
http://site1.ru/#step1

<a> - атрибуты тега
• href=―http://site1/page1.html‖ – устанавливает URL, на который
ведѐт ссылка
• title=―Хостинг центр‖ – всплывающая подсказка
• rel=―nofollow‖ – не передавать PR и тИЦ
• rel=―lightbox‖ – подключения плагина картинок

<p> - тег параграфа
Определяет текстовый абзац. По умолчанию делает небольшой
отступ от содержимого, идущего перед данным блоком
<p>Уже давно прошли те времена, когда ювелирный магазин
считался местом сосредоточения исключительно женских
мечтаний и интересов. Стильные кольца и браслеты теперь носят
и мужчины.</p>
<p align="left | center | right | justify">...</p>
Атрибут align

<h1>…<h6> - теги заголовков

Выделение текста жирным
Теги <b> и <strong>
<b>Жирный текст</b>
<strong> Жирный текст </strong>
Жирный текст
Результат на странице

Выделение текста курсивом
Теги <i> и <em>
<i>Текст курсивом</i>
<em> Текст курсивом </em>
Текст курсивом

Маркированные списки
<ul> - контейнер списка
<li> - пункт списка
<ul>
<li>Пункт1</li>
</ul>
• Пункт1
• Пункт2
• Пункт3

Нумерованные списки
<ol> - контейнер списка
<li> - пункт списка
<ol>
</ol>
1. Пункт1
2. Пункт2
3. Пункт3

<img> - тег загрузки картинки
У тега <img> есть несколько атрибутов:
• src – URL картинки
• alt – альтернативный текст
• height - Высота изображения
• width - Ширина изображения
<img src=―image1.jpg‖ alt=«Неизвестная картинка» height=―50px‖
width=―50px‖ />

Элементы форм
Тег <form> устанавливает форму на веб-странице. Форма предназначена для
обмена данными между пользователем и сервером
Атрибут action должен содержать URL скрипта, которому
отправляются данные формы
<form action="URL">
...
</form>

Элементы форм
Тег <input> - элемент формы. В зависимости от атрибута type это может быть
кнопка, галочка, текстовое поле и т. д.
<input type=“button”> - кнопка

<div> - блочный элемент
<div> применяется с целью группировки и изменения внешнего
вида части html кода страницы
<div class="block">В условиях острой конкуренции со стороны
ведущих российских и западных кредитных организаций наш Банк
сумел реализовать возможность развития финансового бизнеса в
соответствии с разработанной стратегией развития, а также
закрепиться в своей нише банковского сектора.</div>

<span> - строчный элемент
<span> применяется с целью изменения внешнего вида части
строки текста
<div class="block">Положение в сфере кредитных услуг <span
style=“color: red;”>ухудшается</span></div>
Положение в сфере кредитных услуг
ухудшается

<table> - таблица
<table> - позволяет размещать данные в ячейках а-ля Excel
Сопутствующие теги:
• <tr> - тег строки таблицы
• <td> - тег ячейки таблицы
Так же в таблицах могут использоваться теги <thead>, <tbody>,
<tfoot>

<table> - пример
<table>
<tr>
<td>Ячейка 1</td> <td>Ячейка 2</td>
</tr>
</table>
Ячейка 1 Ячейка 2
Результат

Табличная вѐрстка
Логотип
Меню СтатьиЗаголовок
КонтентКонтент Контент
Баннеры

Табличная вѐрстка
<table>
<tr>
<td colspan=3>Логотип</td>
</tr>
<tr>
<td width="20%">Меню</td>
<td width="60%">Заголовок</td>
<td width="20%">Статьи</td>
</tr>
<tr>
<td width=«20%">Контент</td>
<td width="60%"> Контент </td>
<td width="20%"> Контент </td>
</tr>
<tr>
<td colspan=3>Баннеры</td>
</tr>
</table>

HTML валидация
<!DOCTYPE> предназначен для указания типа текущего документа —
DTD (document type definition, описание типа документа)
http://validator.w3.org/

HTML валидация
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
….
</head>
<body>
….
</body>
</html>

Влияние тегов на ранжирование

Примеры ошибок использования тегов
1. <h2><a href=―index.php‖>Ссылка на страницу</a></h2>
2. <a href=―index.php‖></a>
3. <p></p>
4. <strong><a href="mailto:siti@bk.ru"><span style="color:
#ffffff;">ysiti@bk.ru</span></a>
5. <strong>2</strong> - навигация

Комментарии такого рода в кодах шаблонов карточек товара

http://topexpert.pro/seo-kurs.html

«HTML прост и
понятен»
Евгений Концевой - руководитель СЕО проектов ТопЭксперт
• eugkont@topexpert.pro
• skype:eugkont
• http://www.topexpert.pro/
• https://vk.com/happy_xyu

Html для чайников - Евгений Концевой

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to Html для чайников - Евгений Концевой

Similar to Html для чайников - Евгений Концевой (20)

More from Леонид Гроховский

More from Леонид Гроховский (20)

Html для чайников - Евгений Концевой