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> <li>Пункт2</li> <li>Пункт3</li></ul>

• Пункт1• Пункт2• Пункт3


Нумерованные списки

<ol> - контейнер списка

<li> - пункт списка

<ol> <li>Пункт1</li> <li>Пункт2</li> <li>Пункт3</li></ol>

1. Пункт12. Пункт23. Пункт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:[email protected]"><span style="color: #ffffff;">[email protected]</span></a>

5. <strong>2</strong> - навигация

mailto:[email protected]


Примеры ошибок использования тегов



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


Примеры ошибок использования тегов<form action="http://spikagold.ru/index.php" method="post" onsubmit="handleAddToCart( this.id );return false;"> <input type="hidden" id="quantity100" name="quantity[]" value="1" /><br /> <input type="submit" class="addtocart_button" value="Купить" title="Купить" /> <input type="hidden" name="category_id" value="4" /> <input type="hidden" name="product_id" value="100" /> <input type="hidden" name="prod_id[]" value="100" /> <input type="hidden" name="page" value="shop.cart" /> <input type="hidden" name="func" value="cartadd" /> <input type="hidden" name="Itemid" value="1" /> <input type="hidden" name="option" value="com_virtuemart" /> <input type="hidden" name="set_price[]" value="" /> <input type="hidden" name="adjust_price[]" value="" /> <input type="hidden" name="master_product[]" value="" /></form>


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






«HTML прост и понятен»

Евгений Концевой - руководитель СЕО проектов ТопЭксперт

• [email protected]

• skype:eugkont

• http://www.topexpert.pro/

• https://vk.com/happy_xyu

mailto:[email protected]

http://www.topexpert.pro/

Education

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