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

  • 396 views
Uploaded on

Содержание: …

Содержание:

- Базовые теги
- Основные теги
- Табличная верстка
- Влияние тегов на ранжирование
- Ошибки использования тегов

Более подробную информацию Вы можете получить на полном курсе SEO: http://www.topexpert.pro/seo-kurs.html

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
396
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML для чайников Евгений Концевой, руководитель СЕО проектов, учебный центр ТопЭксперт
  • 2. Евгений Концевой  В SEO чуть больше года  Опыт работы – как на стороне заказчика, так и в SEO-агентстве.  Специализация: продвижение порталов, интернет магазинов, программирование и внедрение стратегий. Работал с проектами cian.ru, keramogranit.ru, buyreklama.ru, aksline.ru и др.  Выпускник 2-го потока курсов ТопЭксперт
  • 3. Евгений Концевой ТопЭксперт – это  Учебный центр по SEO с эффективной программой обучения.  Образовательный сайт, содержащий справочную информацию.  Группа экспертов, оказывающих услуги аудита, консультаций и продвижения сайтов.
  • 4. Евгений Концевой Обсудить основные html теги и ошибки вѐрстки, влияющие на SEO Цели вебинара
  • 5. Евгений Концевой Схема вебинара
  • 6. Евгений Концевой Состав web-страницы Вѐрстка веб-страниц — процесс формирования (вѐрстка) веб-страниц в текстовом редакторе, следующий этап после веб-дизайна Страница состоит из тегов <html> <head> …. </head> <body> …. </body> </html>
  • 7. Евгений Концевой Состав тега Тег – минимальный функциональный элемент, который входит в состав страницы <a href=―page.html‖>Страница</a> Открывающий тег Атрибут Закрывающий тег Внутренняя часть
  • 8. Евгений Концевой Базовые теги <html> - основной тег, включающий в себя всѐ содержимое веб-страницы <head> - тег, служащий для подключения файлов стилей и скриптов js, для объявления мета тегов а также <title> и для объявления других данных, которые напрямую не отображаются на странице <body> - предназначен для хранения содержания веб-страницы, отображаемого в окне браузера <!-- --> - тег комментариев <!-- Текст не для вывода на экран -->
  • 9. Евгений Концевой <a> - тег ссылки <a href=―page.html‖>Страница</a> Использование тега в качестве метки <a name=―step1‖></a> http://site1.ru/#step1
  • 10. Евгений Концевой <a> - атрибуты тега • href=―http://site1/page1.html‖ – устанавливает URL, на который ведѐт ссылка • title=―Хостинг центр‖ – всплывающая подсказка • rel=―nofollow‖ – не передавать PR и тИЦ • rel=―lightbox‖ – подключения плагина картинок
  • 11. Евгений Концевой <p> - тег параграфа Определяет текстовый абзац. По умолчанию делает небольшой отступ от содержимого, идущего перед данным блоком <p>Уже давно прошли те времена, когда ювелирный магазин считался местом сосредоточения исключительно женских мечтаний и интересов. Стильные кольца и браслеты теперь носят и мужчины.</p> <p align="left | center | right | justify">...</p> Атрибут align
  • 12. Евгений Концевой <h1>…<h6> - теги заголовков
  • 13. Евгений Концевой Выделение текста жирным Теги <b> и <strong> <b>Жирный текст</b> <strong> Жирный текст </strong> Жирный текст Результат на странице
  • 14. Евгений Концевой Выделение текста курсивом Теги <i> и <em> <i>Текст курсивом</i> <em> Текст курсивом </em> Текст курсивом Результат на странице
  • 15. Евгений Концевой Маркированные списки <ul> - контейнер списка <li> - пункт списка <ul> <li>Пункт1</li> <li>Пункт2</li> <li>Пункт3</li> </ul> • Пункт1 • Пункт2 • Пункт3
  • 16. Евгений Концевой Нумерованные списки <ol> - контейнер списка <li> - пункт списка <ol> <li>Пункт1</li> <li>Пункт2</li> <li>Пункт3</li> </ol> 1. Пункт1 2. Пункт2 3. Пункт3
  • 17. Евгений Концевой <img> - тег загрузки картинки У тега <img> есть несколько атрибутов: • src – URL картинки • alt – альтернативный текст • height - Высота изображения • width - Ширина изображения <img src=―image1.jpg‖ alt=«Неизвестная картинка» height=―50px‖ width=―50px‖ />
  • 18. Евгений Концевой Элементы форм Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером Атрибут action должен содержать URL скрипта, которому отправляются данные формы <form action="URL"> ... </form>
  • 19. Евгений Концевой Элементы форм Тег <input> - элемент формы. В зависимости от атрибута type это может быть кнопка, галочка, текстовое поле и т. д. <input type=“button”> - кнопка
  • 20. Евгений Концевой <div> - блочный элемент <div> применяется с целью группировки и изменения внешнего вида части html кода страницы <div class="block">В условиях острой конкуренции со стороны ведущих российских и западных кредитных организаций наш Банк сумел реализовать возможность развития финансового бизнеса в соответствии с разработанной стратегией развития, а также закрепиться в своей нише банковского сектора.</div>
  • 21. Евгений Концевой <span> - строчный элемент <span> применяется с целью изменения внешнего вида части строки текста <div class="block">Положение в сфере кредитных услуг <span style=“color: red;”>ухудшается</span></div> Положение в сфере кредитных услуг ухудшается Результат на странице
  • 22. Евгений Концевой <table> - таблица <table> - позволяет размещать данные в ячейках а-ля Excel Сопутствующие теги: • <tr> - тег строки таблицы • <td> - тег ячейки таблицы Так же в таблицах могут использоваться теги <thead>, <tbody>, <tfoot>
  • 23. Евгений Концевой <table> - пример <table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table> Ячейка 1 Ячейка 2 Результат
  • 24. Евгений Концевой Табличная вѐрстка Логотип Меню СтатьиЗаголовок КонтентКонтент Контент Баннеры
  • 25. Евгений Концевой Табличная вѐрстка <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>
  • 26. Евгений Концевой HTML валидация <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа) http://validator.w3.org/
  • 27. Евгений Концевой HTML валидация <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> …. </head> <body> …. </body> </html>
  • 28. Евгений Концевой Влияние тегов на ранжирование
  • 29. Евгений Концевой Влияние тегов на ранжирование
  • 30. Евгений Концевой Примеры ошибок использования тегов 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> - навигация
  • 31. Евгений Концевой Примеры ошибок использования тегов <!-- <div style="float:left;width:90%;margin-top: 3px;"> </div> --> Комментарии такого рода в кодах шаблонов карточек товара
  • 32. Евгений Концевой Примеры ошибок использования тегов <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>
  • 33. Евгений Концевой http://topexpert.pro/seo-kurs.html
  • 34. Евгений Концевой http://topexpert.pro/seo-kurs.html
  • 35. Евгений Концевой «HTML прост и понятен» Евгений Концевой - руководитель СЕО проектов ТопЭксперт • eugkont@topexpert.pro • skype:eugkont • http://www.topexpert.pro/ • https://vk.com/happy_xyu