Лекция 004: Первые шаги - Основы HTML

Мы не ставим своей целью овладение HTML в совершенстве. Вы можете выкачать один из десятков учебников и освоить язык разметки сами. А здесь мы рассмотрим только основные тэги, редактировать которые нам понадобится в дальнейшей работе.

Не стоит путать HTML и PHP - первый это язык разметки, а второй - язык программирования. Язык разметки - это команды вашему браузеру по особенному воспринимать текст файла, который уже загружен на ваш компьютер. Язык программирования создает файл особым образом еще на сервере и потом этот файл попадает на ваш компьютер. Но то, как мы видим сайт - это работа уже HTML+CSS (CSS - язык стилей). То, какой контент мы видим - это работа сервера и в том числе языка программирования (скрипта, движка и т.д.).

Все тэги окружаются угловыми скобками. У большинства тэгов есть начальный тэг и завершающий. Завершающий тэг выглядит как и начальный, но начинается со слэша.

TITLE - тэг для указания заголовка сайта, текста, который стоит в синей полоске браузера. Именно этот текст имеет первоочередное значение для поисковых машин. Не стоит стараться разместить в тайтл все ключевые слова для сайта. Лучше стараться сделать для каждой страницы свой тайтл.

META - метатэги. Тексты, невидимые людям, но видимые поисковым машинам. Если роль KEYWORDS сильно уменьшилась с годами и сегодня этот атрибут не играет роли в рейтинговании сайтов в поиске, то атрибут DESCRIPTION до сих пор используется для сниппетов - небольших подписей после заголовка в поисковых результатах. Так что имеет смысл заполнять этот атрибут, чтобы ваш сайт имел преимущество перед другими, у кого этот атрибут наполнен всяким бредом вроде ключевых слов или пуст. Но преимущества для результатов он не дает.

HEAD - тэг, обозначающий начало заголовков для сайта, той части страницы, которая выведена на сайте не будет, но оказывает влияние на общие свойства страницы.

BODY - контентная часть сайта. Именно тут находится текст и оформление сайта.

B - выделение жирным. Это тэг, который как бы подсказывает поисковым машинам, что часть текста носит более важный характер. Не следует злоупотреблять как этим выделением, так и курсивом, подчеркиванием. Во-первых, это сказывается на читабельности текста, а, во-вторых, любое неграмотное злоупотребление любыми уплотняющими факторами приводит к наложению на ваш сайт фильтра, а иногда и бана за нарушение поисковой лицензии и попытку обойти алгоритмы поисковых машин. До сих пор считается, что лучше использовать тэг STRONG, но на сегодня выделение жирным можно делать десятком различных способов и выбор какого-то одного из них не гарантирует, что это приведет к успеху.

H1 (H2, H3, H4, H5, H6) - различные типы заголовков. До сих пор, несмотря на стили, это один из качественных способов показать ключевые фразы. Надо понимать, что чем легче текст для дешифрации поисковиком, тем лучше. Поэтому важно, чтобы заголовок стоял надо текстом даже в HTML-верстке. Чтобы между тематическим текстом и заголовком не стоял другой текст. Чем понятнее и корректнее ваш текст после вырезания тэгов - тем лучше. Помните, что поисковые боты читают HTML и не имеют браузеров - они видят то, как вы верстаете, и понятия не имеют, как вы видите сайт в браузере.

P, DIV, SPAN - различные способы оформления текста. P автоматически создает абзац.

BR - спуск строки. Этот тэг не имеет завершения.

TABLE - оформление таблицы. Достаточно сложный тэг, подробное описание которого можно найти в любом руководстве для HTML.

IMG - вызов картинки. Через указание в атрибуте SRC адреса картинки вы можете добавить в ваш файл картинку или фотографию.

A - ссылка. Это для нас один из важнейших тэгов. Именно через него создаются гиперссылки на другие страницы и сайты. Текст внутри начального и завершающего тэга A называется анкором. У начального тэга есть атрибут HREF - в нем задается адрес для перехода. Именно ссылка меняет большинство параметров сайта в поисковых машинах. Чем больше ссылок на ваш сайт, тем он авторитетнее. Точно так же - ставя ссылки на другие сайты, вы размываете передаточный вес с вашего сайта. Это одна из причин низких поисковых результатов и даже бана некоторых сайтов. Чем больше ссылок с сайта, тем меньше он передает веса. Тем хуже становятся его пузомерки.

Резюме: теперь вы немного знаете о HTML-разметке и можете понимать, что именно вам надо искать в источнике кода страницы.

Домашнее задание: найдите простой корпоративный сайт из нескольких страниц. Посмотрите источник страницы - нажать правой клавишей на самом сайте, но не картинке, выбрать в контекстном меню "Исходный код страницы". Найдите заголовок сайта, его мета-тэги, места выделенные на сайте жирным или заголовками. А также картинки и ссылки.

Содержание