Технологии создания сайтов

  • HTMLHyperText Markup Language — язык разметки документов, использующийся для создания большинства веб-страниц. HTML код интерпретируется браузером в форматированный текст. Составляющие HTML-кода:

  • Теги — пометки которые ставятся в начале и конце элемента. В странице браузера эти теги не видимы, но влияют на его интерпретацию.

<тэг>текст</тэг>, где

          • <тэг> — открывающий тэг;
          • </тэг> — закрывающий тэг, отличающийся лиш символом “/”.

Текст, окруженный тэгом <тэг> получит определенные свойства.

<b>Теперь</b> <i>я</i> <u><b>программист</b></u> — код, где:

  • <b> — тег полужирного текста;
  • <i> — тег курсива;
  • <u> — тег подчеркнутого текста.

Результат интерпретации:

Теперь я программист

Также следует заметить, что не все теги должны окружать текст и закрываться. Например тег <br> не закрывается, его функция — прерывание строки.

<b>Теперь</b><br><i>я</i> <u><b>программист</b></u>

Результат интерпретации:

Теперь

я программист

  • Атрибуты — модификаторы HTML-элементов, которые используются для предоставления дополнительной информации об элементе. Атрибуты всегда указываются в открывающем теге.

 

<тэг атрибут=”значение”>текст</тэг> — атрибут всегда идет в паре с его значением

<img src=”http://seohard.com/wp-content/uploads/2015/12/cropped-seohard-logo3-1.jpg” width=”100px”>, где:

  • <img> — тег изображения (используется без закрывающего);
  • src=”” — атрибут, указывающий адрес файла изображения;
  • width=”” — атрибут, указывающий ширину изображения.

 

Результат:

Стоит отметить несколько популярных аттрибутов:

  • class — используется для обозначения нескольких элементов и их последующей селекции;
  • id — используется для обозначения 1 элемента страницы путем присвоения ему уникального идентификатора.

  • Сущности — дополнительные символы. Сущность начинается с амперсанда, заканчивается точкой с запятой. Здесь можно найти полный список дополнительных знаков.

 

  • HTML5 — новая версия HTML, поддерживающая ряд мультимедийных возможностей, не доступных в предыдущих версиях: svg, canvas, audio, video.
    • Canvas — элемент HTML5, позволяющий рисовать графические элементы на веб-странице, управляемый с помощью JavaScript.
  • HTML-Гиперссылка (Ссылка) — это фрагмент документа, который ссылается на другой раздел в рамках документа, на раздел другого документа, на документ локального диска или на адрес электронной почты(почтовая гиперссылка).

<a href=”адрес”>Текст Ссылки</a>, где:

  • <a> — тег ссылки;
  • href=”” — обязательный атрибут, указывающий расположение документа, на который ведет ссылка;

Результат:

Текст ссылки:

При клике по данной ссылке браузер откроет документ, находящийся по указанному URL.

Классификация по адресу:

  • Абсолютная ссылка — ссылка, в коде которой указан абсолютный адрес (URL)
  • Локальная (относительная ссылка) — ссылка с использованием относительного адреса. Такой вид ссылки может быть только внутренней.
  • Внутренняя ссылка — ссылка на объект сайта, на котором она расположена.
  • Внешняя ссылка — ссылка на объект, который находися вне сайта, на котором она расположена.

 

Классификация по передаче веса:

  • Nofollow — ссылка  с одноимённым атрибутом rel=”nofollow”. Nofollow используется для того, чтобы ссылка не передавала вес по указанному адресу. Применяются такие ссылки как для защиты сайта от спама в комментариях, так и для “лепки PR”.
  • Dofollow — ссылка, для которой не указан атрибут rel=”nofollow”. Такие ссылки передают вес и являются более ценными для SEO.

 

Термины, повязанные со ссылками:

  • Обратная ссылка — ссылка с страницы стороннего сайта, которая ведет на продвигаемый.
  • Ссылочный профиль — совокупность обратных ссылок продвигаемого сайта.
  • Глубокая ссылка — ссылка, ведущая на внутренние страницы сайта. Модель натурального цитирования подразумевает ссылки между максимально релевантными страницами, чаще всего внутренними. Поэтому наличие глубоких обратных ссылок характерно для качественных сайтов и может влиять на ранжирование.
  • Сломанная (битая,не рабочая) ссылка — ссылка на несуществующий объект. Причиной может быть как ошибка написания адреса, так и перемещение объекта по другому адресу без перенаправления и другие. Ссылки являются частью контента, поэтому наличие сломанных ссылок понижает общее его качество. Существует множество беслатных инструментов, позволяющих находить эти ссылки.
  • Почтовая ссылка — ссылка, адрес которой — почтовый адрес.

<a href=”mailto:sample@mail.com?Subject=Привет%20Олег”>

Результат интерпретации:

Привет Олег

При нажатии на ссылку откроется страницанового письма в клиенте почты, использующемся по умолчанию. Поля адресанта и темы письма будут заполнены соответствующими данными: sample@mail.com и Привет Олег. Между словами в теме нужно использовать %20, так как в данном случае тема сообщения — часть URL, а при построении URL пробелы недопустимы и должны быть заменены %20.

    • Навигационная цепочка — навигация, которая отображает путь от главной страницы сайта к текущей.
    • Title — заголовок страницы. Это элемент страницы, который содержит ее заголовок и отображается в поисковой выдаче, вкладках и закладках браузера по умолчанию. Заголовок влияет как на CTR в поисковой выдаче, так и на ранжирование страницы, поэтому рекомендуется использовать тематические ключевые слова в заголовке.
    • <meta> теги (мета теги) — HTML-теги с информацией о странице, которые как правило на ней не отображаются, но используются браузерами и поисковыми системами.
  • Meta Description (Meta description — описание) — элемент HTML-страницы с коротким текстовым описанием содержимого страницы. Длина описания может быть произвольной, но большинство поисковых систем отображают первые 160 символов описания в поисковой выдаче. Главная задача элемента — показать релевантность страницы запросу пользователя, поэтому от описания может зависеть CTR. Наличие тематических ключевых слов в описании не влияет на ранжирование страницы в Google.

<meta name=”description” content=”Описание”>, где

Описание — описание страницы, которое будет отображаться в поисковой выдаче.

  • Meta Keywords — элемент страницы который содержит список ее ключевых слов. На начальных этапах развития поисковых систем (когда учитывались только внутренние факторы) тег влиял на ранжирование страницы. На данный момент содержимое тега не влияет на ранжирование в Google, но может использоваться для внутреннего назначения.

<meta name=”keywords” content=”ключевое слово1, ключевое слово2”>, где

ключевое слово1, ключевое слово2 — ключевые слова, которые нужно перечислить.

  • Meta Robots — элемент, который содержит директивы для поисковых роботов. С помощью meta robots можно контролировать ииндексацию страницы, переход робота по ее ссылкам, кэширование и др.

<meta name=”робот” content=”директива1, директива2”>, где

  • робот — название робота, к которому относится директива. Самый популярный вариант использования — указание директивы всем поисковым роботам, для этого значение должно быть robots.
  • директива1, директива2 — директивы из доступного списка (указываются через запятую). Некоторые директивы:
  • index  — разрешение индексацнии страницы;
  • noindex — запрет индексации;
  • follow — разрешение переходить по ссылкам на странице;
  • nofollow — запрет перехода по ссылкам;
  • none — аналог пары директив noindex, nofollow — запрет индексации страницы и перехода по ее ссылкам;
  • noarchive — запрет кэширования страницы;
  • nosnippet — запрет отображения сниппетов для страницы в выдаче;
  • noimageindex — запрет индексации изображений на странице.

<meta name=”googlebot” content=”noimageindex”> — запрещение индексации изображений на странице роботу Google.

<meta name=”bingbot” content=”none”> — запрещение индексации страницы и перехода по ее ссылкам поисковому роботу Bing.

На 1 странице можно использовать сразу 2 вышеуказанных записи:

<meta name=”googlebot” content=”noimageindex”>

<meta name=”bingbot” content=”none”> — в этом случает будет

выполнено обе директивы ( запрещение индексации изображений на странице роботу Google и запрещение индексации страницы и перехода по ее ссылкам поисковому роботу Bing.)

Допустимо указывать сколько угодно директив (для каждого робота отдельно), но запрещено использовать противоречащие директивы.

  • Meta HTTP-equiv Refresh (Meta Refresh) элемент, позволяющий иснтруктировать браузер обновить текущую страницу через указанное количество секунд. Также есть возможность вместо обновления страницы загрузить другую страницу.

<meta http-equiv=»refresh» content=»N«>, где

N — количество секунд, через которое нужно обновить страницу

<meta http-equiv=»refresh» content=»N; url=URL«>, где

N — количество секунд, через которое нужно обновить страницу;

URL — URL страницы, на которую нужно перейти по истечению таймера. Этот способ часто используется для перенаправления пользователя при непредсказуемой 404 ошибке (опечатка при вводе адреса, переход по ссылке с опечаткой). Если 404 ошибку можно предсказать (например при перемещении страницы на новый адрес) — использование Meta Refresh является нежелательной практикой, т.к. не передает вес на новый адрес. В таком случае рекомендуется использовать 301.

  • Тег <link> — элемент определяющий связь меджу страницей и внешним документом, а также тип данной связи. Размещается в секции <head> HTML страницы.

<link rel=»атрибут_связи» type=”тип” href=”адрес”>, где:

  • тип — тип документа, к которому идет обращение;
  • адрес — URL или относительный путь к документу
  • атрибут_связи — атрибут, который задает тип связи:
    • rel=”stylesheet” — применение файла CSS к странице;
    • rel=”author” — указание страницы автора;
    • rel=”icon” — указание favicon страницы;
    • rel=”canonical” — указание канонической страницы. Используется в случаях, когда имеется несколько копий страницы, доступных по разному адресу. Служит для указания поисковой системе основной версии, которая должна ранжироваться по запросу и передачи ей веса.
    • rel=”alternate” — указание альтернативной версии страницы: печатной версии или версии на другом языке.
  • CSS — Cascading Style Sheets — каскадные таблицы стилей. Это формальный язык, который используется для описания стиля элэментов HTML, XHTML и других. В отличие от использовання встроенных стилей, использование CSS позволяет:
      • разделить иерархическую структуру элементов и описание их стилей;
      • не загромождать код HTML-страницы.
      • облегчить последующее изменение стиля сайта

Для того, чтобы файл CSS влиял на стиль страницы, его нужно подключить. Это можно сделать несколькими способами:

  • с помощью тега link и аттрибута rel=’stylesheet’:

<link rel=’stylesheet’ href=»адрес»>,где

  • адрес — адрес расположения файла *.css

Данный способ является наиболее популярным и рекомендуемым. Также есть и другие способы:

  • с помощью @import url(style.css);
  • внутри тега <style> HTML-документа;
  • внутри определенного элемента (встроенные стили).

Типичный файл CSS состоит из наборов селекторов и свойств, которые им соответствуют:

селектор1, селектор2, селектор3 {
свойство1: значение;
свойство2: значение;
свойство3: значение;
}

Набор свойств помещается в фигурные скобки, пары “свойство-значение” разделяются между собой точкой с запятой.

  • Селектор — selector — отличительное свойство одного или более элементов. Селектор используется для выборки целевых элементов и последующей манипуляции ими (например изменения стиля CSS или включение в приложение JavaScript).
    Виды селекторов:

    • универсальный — * — выбор всех елементов. Имеет наименьшее практическое значение;
    • селектор элементов — выбор элементов страницы по тегу (p,ul,div и т д);
    • селектор классов — выбор элементов с указанным значением аттрибута class;
    • селектор идентификаторов — выбор элементов с указанным значением аттрибута id;

Таким образом используя различные комбинации селекторов можно присваивать целевым элементам страницы нужные стили.

Использования CSS существенно повышает скорость загрузки страниц, но также дополнительно проводится оптимизация CSS.

  • Оптимизация CSS — совокупность действий, направленных на уменьшение размера и количества файлов CSS с целью ускорения загрузки сайта.

 

 

  • Favicon — (сокр. от Favorite Icon — “любимая иконка”) — файл, содержащий иконку, которая соотверствует определенному сайту или его странице. Стандартный размер 16х16 пикселей, используется на вкладках и закладках браузера. Задается favicon тегом <link> в секции <head> HTML-кода страницы.

<link rel=’icon’ href=»URL«>, где

URL — адрес favicon. Допустимые форматы — .ico, .gif, .png, .svg

  • Карта сайта — файл, содержащий список страниц сайта. Используется для упрощения индексации сайта (в формате XML) и удобства навигации (в формате HTML). Для упрощения индексации сайта Google нужно:
    • Создать файл в формате .xml используя:

<?xml version=»1.0″ encoding=»UTF-8″?>
<urlset xmlns=»http://www.sitemaps.org/schemas/sitemap/0.9″>
<url>
<loc>URL</loc>
<lastmod>YYYY-DD-MM</lastmod>
<changefreq>monthly/daily/annually</changefreq>
<priority>0.0…1.0</priority>
</url>
</urlset>, где:

  • <?xml>, <urlset> — обязательные теги
  • URL — URL указываемой страницы; каждой странице соответствует отдельный обязательный тег <url> в рамках тега <urlset>
  • <lastmod> — необязательный тег с датой последнего изменения страницы
  • <changefreq> — необязательный тег с планируемой частотой обновления содержимого страницы
  • <priority> — необязательный тег с приоритетностью конкретной страницы для поискового бота.
  • Указать расположение карты сайта в Google Search Console > Crawl >Sitemaps
  • Для объемных сайтов рекоммендуется создавать xml-карту сайта для каждой категории, создавать индекс карт сайта и указывать в Search Console адрес этого файла.

Также можно создавать карты в текстовом и rss-форматах, но эта опция менее популярна и предоставляет меньшее количество информации.

  • JavaScript (JS, ECMAScript) — выполняемый браузером язык программирования, использующийся для придания сайту интерактивности. Типичное применение — формы, диалоговые окна, анимация, прочее.

Часто JS путают с Java, единственное общее между этими языками — это то, что создатели обеих языков любили сорт кофе Java.

  • JQuery — самая популярная библиотека JavaScript, позволяющая значительно упросить написание приложений. Значительно большее количество новых функций оправдывается несущественными отличиями в синтаксисе (впрочем, можно сочитать в одном приложении синтаксис JavaScript и JQuery, т.к. JQuery — не отдельный язык, а всего лишь библиотека). Также решены проблемы с кроссбраузерностью и имеется множество полезных для разработки плагинов.
  • AJAX — Asynchronous Javascript and XML — асинхронный JavaScript. Эта технология предоставляет собой синтез JS и XML и позволяет создавать асинхронные веб-приложения. С помощью AJAX можно обмениваться с сервером данными в фоновом режиме и изменять содержимое страницы без ее перезагрузки.
  • AngularJS — фреймворк JS, предназначенный для разработки одностраничных веб-приложений.
  • Backbone — фреймворк JS для разработки одностраничных веб-приложений и синхронизации их компонентов (сервера и клиентов), исопльзующий шаблон проектирования MVP.
  • Adobe Flash (Shockwave Flash, Macromedia Flash) — среда разработки мультимедийных веб-приложений: игр, презентаций, баннеров.
  • SQL — Structured Query Language — язык программирования, созданный для добавления, удаления, изменения данных в базе данных.
  • MySQL — самая распостраненная система управления базами данных (СУБД).
  • Bootstrap (Twitter Bootstrap) — бесплатный фреймворк разработки внешнего интерфейса сайтов. Позволяет значительно упростить разработку используя десятки мощных современных наработок. Разделение страницы на колонки, адаптивность, удобная навигация и прочие другие функции можно внедрить всего за несколько минут с помощью Bootstrap.
  • CMS — Content Management System — система управления контентом. CMS — это приложение, которое позволяет размещать, редактировать, упорядочивать, удалять контент используя визуальный интерфейс. Большинство CMS имеют модульную архитектуру, что позволяет вебмастеру самостоятельно выбирать и настраивать нужные компоненты в зависимости от тематики и целей сайта. Примеры модулей:
    • Блог
    • Календарь
    • Опросник
    • Блок с погодой и т д.

Главное преимущество CMS — возможность управления сайтом без знаний HTML/CSS/JS.

Главный недостаток — избыточность исопльзуемых ресурсов (избыточный код, дополнительная нагрузка на веб-сервер, медленная загрузка сайта как следствие).

Популярные CMS:

  • WordPress — самая популярная бесплатная CMS в мире, работающая на PHP и MySQL. С помощью WordPress можно создать сайт практически любого типа, но самым популярным предназначением является создание блогов. Поэтому есть возможность как создания бесплатного WordPress блога на поддомене wordpress.com. так и установки WordPress на собственный хостинг и домен для дополнительного функционала.
  • Drupal — бесплатная CMS для создания различных сайтов, рабоающая на PHP и MySQL. Drupal позволяет создавать более сложные сайты в сравнении с WordPress, но для использования требуется больше технических знаний.
  • Joomla —  популярная бесплатная CMS. Имеет множество уязвимостей и недостатков для SEO.
  • WIKI с гавайского — быстрый — тип сайтов с возможностью совместного редактирования его содержимого непосредственно с браузера. Данный тип сайтов идеально подходит для энциклопедий, словарей и других информационных материалов. Предназначение wiki сайтов — модерирование содержимого сообществом.
  • robots.txt — файл ограничения доступа поисковым роботам к содержимому веб-сервера. Файл работает по принципу “разрешено все, что не запрещено”. Размещается в корневом каталоге сайта.

User-agent: имя_робота

Disallow: путь1

Allow: путь2

Disallow: путьN

, где:

    • User-agent — директива указания поискового робота;
  • Disallow — директива запрета доступа к указанному объекту;
  • Allow — директива разрешения доступа к указанному объекту. Используется в случаях, когда нужно закрыть доступ к каталогу за иселючением одного или нескольких его файлов.
  • имя_робота — название поискового робота, доступ для которого нужно ограничнить. Для ограничения всех роботов используется значение *;
  • путь — относительный путь к файлу или каталогу (включая корневой), доступ к которому нужно ограничить для данного робота.

Типы сайтов:

  • Блог — это условный вид сайтов, предоставленных в виде публичного дневника с записями в обратной хронологической последовательности.
  • Директория — каталог сайтов, разбитый по категориям. Поиск по директориям является устаревшей альтернативой к испльзованию поисковых систем.
  • Форум — сайт онлайн-обсуждений, разбитых на тематические категории.
  • Вики-сайт
  • Сайт социальных закладок — сайт для организации и обмена закладками между пользователями.

Примечание: на самом деле существуют десятки типов сайтов в зависимости от предназначения, поэтому их перечисление не имеет смысла.

  • RSS/SML — семейство форматов для описания часто обновляемых сайтов (новостных, блогов и т д). Используется программами-агрегаторами (например inoreader.com), которые предоставляют возможность создавать собственную ленту информации с выбранных источников.
  • Удобство пользования сайта — характеристика, определяющая эффективность, продуктивность и удобство выполнения действий, предусмотренных сайтом. В отличие от эргономики, главная задача юзабилити — это удобство работы пользователя, а не технической составляющей (минимизации кода, минимизации нагрузки на сервер и т д).