Мета-тег Description - разбор с примерами. Структура HTML-документа: основные теги, пример Как задать краткое описание страницы в html

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

Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.

Список тегов HTML

Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.

Тег Краткое описание
Комментарий.
Определяет тип документа.
Ссылка, гиперссылка, якорь.
Определяет текст как аббревиатуру.
Контактная информация автора или владельца документа.
Определяет область на карте-изображении
Статья
Контент в стороне (содержимое не является основным на странице по смыслу)
Позволяет вставить воспроизводимый аудио файл.
Полужирный текст.
Задает базовый URL или аттрибут target для относительных ссылок в документе.
Область, где написание текста может имееть другое направления.
Устанавливает направление написания текста. В отличии от направление указывается физическое направление
Цитата.
Указывает область body документа.

Перенос строки.
Кликабельная кнопка
Используется для рисовании графики с помощью скриптов
Подпись таблицы.
Сноска на название материала.
Используется для вставки компьютерного кода в текстовом виде.
Задает характеристики колонок в таблице.
Определяет группу из одной или более колонок таблицы для форматирования.
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
Определяет описание термина из тега в списке терминов
Текст, который удален в новой версии документа.
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
Указывает, что содержимое является термином.
Определяет диалоговое окно или интерактивный элемент
Блочный элемент - один из основных элементов верстки.
Определяет список определений
Название термина в списке определений
выделенный по смыслу текст (обычно, текст выделенный курсивом).
Контейнер для внешнего приложения
Группа связанных элементов в форме
Заголовок для элемента
Определяет автономную группу из нескольких элементов (например картинка с подписью)
Нижний колонтитул
Определяет форму пользовательского ввода
- Заголовки HTML разного уровня: , , , , , .
Указывает область head документа.
Блок заголовка
Горизонтальная линия - тематический разделитель.
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
Выделяет текст курсивом.
Определяет встроенный фрейм
Изображение, картинка.
Поле для ввода
Текст, который был добавлен в новой версии документа.
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
Заголовок элементов
  • Элемент списка
    Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
    Основной контент
    Контейнер для . Определяет пользовательскую карту на изображении
    Выделенный текст (обычно с помощью подсветки фона).
    Контейнер для списка пунктов меню
    Определяет элементы, которые пользователь может вызвать из контекстного меню
    Используется для определения мета-данных документа.
    Измеритель значений в заданном диапазоне
    Контейнер для навигационных элементов
    Альтернативный контент для пользователей, отключивших скрипты
    Определяет встроенный объект
    Определяет нумерованный список
    Определяет группу связанных вариантов в выпадающем списке. Дает название группу
    Параметр (вариант выбора) в выпадающем списке
    Результат вычислений

    Абзац.
    Задает параметры для встроенных объектов
    Контейнер для нескольких изображений
    Предварительно отформатированный текст.
    Индикатор выполнения (прогресса)
    Цитата в тексте.
    Альтернативный текст, если браузер не поддерживает тег .
    Аннотация к содержимому тега .
    Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
    Перечеркнутый текст.
    Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
    Определяет скрипт или подключение скрипта из внешнего ресурса.
    Раздел
    Определяет выпадающий список
    Текст шрифтом меньшего размера.
    Определяет ресурс для тегов , и .
    Строчный элемент.
    Текст, выделенный по значению. Обычно отображается полужирным.
    Определяет контейнер для определения стилей документа
    Отображает текст в виде нижнего индекса.
    Заголовок внутри тега
    Отображает текст в виде верхнего индекса.
    Определяет таблицу.
    Определяет область контента в таблице.
    Ячейка в таблице .
    Многострочное поле для ввода
    Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
    Место, где допускается перенос строки.
    Устаревшие теги HTML

    Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.

    Тег Краткое описание
    Акроним. Используйте тег вместо него.
    Встроенный апплет. Используйте или вместо него.
    Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
    Текст большего размера. Используйте вместо него
    Отцентрованный текст. Используйте вместо него
    Список директорий. Используйте
      вместо него
    Определяет цвет, размер и семейство шрифта. Используйте вместо него
    Фрейм внутри . Используйте вместо него
    Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
    Альтернативный текст, если фреймы не поддерживаются
    Перечеркнутый текст. Используйте или вместо него
    Моноширный текст. Используйте вместо него
    Подчеркнутый текст. Используйте вместо него

    Всемирная паутина соткана из WEB-страниц (WEB-pages), а эти страницы создаются при помощи языка разметки гипертекста (Hypertext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о "Программировании на HTML", HTML - это язык разметки . Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

    Основы HTML

    Перед вами краткое руководство по написанию HTML. Многие до сих пор пишут HTML,А используя средства похожие на Notepad или SimpleText. Данное руководство поможет вам получить начальное представление о HTML. Даже если вы не планировали редактировать HTML напрямую, а использовать HTML-редактор, такой как Netscape Composer или FrontPage, данное руководство поможет вам использовать эти средства лучше, а также делать ваши HTML-документы понятными для большинства браузеров. Почувствовав выгоды, которые дает вам знание основ написания HTML, вы, возможно, захотите освоить материал, размещенный в раздел Продвинутый HTML.

    Хороший способ научиться - это посмотреть, как другие люди пишут коды своих HTML-страниц. Для этого выберите в браузере пункт "View" ("Вид"), а затем "Source" ("В виде HTML").

    Данная страница научит вас как:

    • добавлять заголовки и параграфы
    • выделять текст курсивом
    • изменять цвет и размер текста
    • вставлять рисунки
    • создавать ссылки на другие страницы
    • использовать различные виды списков

    Если вы ищете что-то еще, попробуйте Продвинутый HTML

    Добавление заголовков и параграфов

    Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности. В HTML заголовки по степени важности делятся на шесть уровней. Н1 - самый важный, Н2 - чуть менее важен, и, наконец, Н6 - наименее значимый.

    Пример того, как добавить важный заголовок:

    Важный заголовок

    Результат:

    Важный заголовок

    и чуть менее важный:

    Чуть менее важный

    Результат:

    Чуть менее важный

    Каждый параграф, который вы напишете должен начинаться тэгом

    И заканчиваться тэгом

    . Например:

    Это первый параграф.

    А это второй параграф.

    Выделение курсивом

    Вы можете выделить одно или больше слов, используя тэг , пример:

    Это действительно интересный пункт!

    Результат:

    Это действительно интересный пункт!

    Изменение цвета и размера текста

    Тэг FONT может быть использован для указания цвета и размера шрифта, которым будет выведен ваш текст. В этом примере устанавливается цвет:

    В этом предложении есть слово , выделенное желтым цветом.

    Результат:

    В этом предложении есть слово выделенное желтым цветом.

    Атрибут size служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2):

    Советы ветеринарного врача

    Результат:

    Советы ветеринарного врача

    Вставка рисунков

    Использование рисунков делает ваши страницы более интересными. Вставить рисунок позволяет тэг . Предположим, что файл рисунка "peter.jpeg", шириной 200 пикселов и высотой 150, лежит в той же папке что и HTML файл.


    Указание ширины и высоты не является строго необходимым, но увеличивает скорость загрузки вашей WEB-страницы. Следует задать описание картинки для людей, у которых отключена загрузка изображений. Вы можете добавить краткое описание, используя атрибут alt :

    В WWW используется два формата графических файлов GIF и JPEG. Формат GIF используется, когда требуется прозрачное изображение или анимация, а также для:

    • черно-белых рисунков и текста
    • изображений с ограниченным количеством цветов
    • графики с резкими контурами (меню, кнопки, диаграммы и т.п.)
    • изображений с текстом

    Формат JPEG больше подходит в следующих случаях:

    • сканированные изображения
    • графика со сложным сочетанием цветов и оттенков
    • любое изображение с палитрой более чем 256 цветов
    Создание ссылок на другие страницы

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

    Списки

    HTML предлагает три вида списков. Первый вид называется маркированным (неупорядоченным ) списком. Маркированный список открывается тэгом

      , а каждый его пункт начинается стандартным тэгом
    • , пример:

      • первый пункт списка
      • второй пункт списка
      • третий пункт списка

      Результат:

      • первый пункт списка
      • второй пункт списка
      • третий пункт списка

      Второй вид - нумерованный (упорядоченный) список. Он использует тэги и

    • . Пример:

    • первый пункт списка
    • второй пункт списка
    • третий пункт списка
    • Результат:

    • первый пункт списка
    • второй пункт списка
    • третий пункт списка
    • И последний - это список определений (глоссарий) . Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом . Каждый термин открывается тэгом , а определение тэгом . Пример:

      первый термин его определение второй термин его определение третий термин его определение

      Результат:

      Первый термин его определение второй термин его определение третий термин его определение

      Списки могут быть вложенными, один в другой. Пример:

    • первый пункт списка
    • второй пункт списка
      • первый пункт вложенного списка
      • второй пункт вложенного списка
    • третий пункт списка
    • Результат:

    • первый пункт списка
    • второй пункт списка
      • первый пункт вложенного списка
      • второй пункт вложенного списка
    • третий пункт списка
    • Определение цветов в HTML

      В HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем. Для каждого цвета задается значение от 00 до FF. Затем эти значения объединяются в одно число, перед которым ставится символ #. Данная таблица демонстрирует различные цвета и их шестнадцатиричный код.

      FFF
      FFF
      CCC
      CCC
      999
      999
      666
      666
      333
      333
      000
      000
      FFC
      C00
      FF9
      900
      FF6
      600
      FF3
      300
      99C
      C00
      CC9
      900
      FFC
      C33
      FFC
      C66
      FF9
      966
      FF6
      633
      CC3
      300
      CC0
      033
      CCF
      F00
      CCF
      F33
      333
      300
      666
      600
      999
      900
      CCC
      C00
      FFF
      F00
      CC9
      933
      CC6
      633
      330
      000
      660
      000
      990
      000
      CC0
      000
      FF0
      000
      FF3
      366
      FF0
      033
      99F
      F00
      CCF
      F66
      99C
      C33
      666
      633
      999
      933
      CCC
      C33
      FFF
      F33
      996
      600
      993
      300
      663
      333
      993
      333
      CC3
      333
      FF3
      333
      CC3
      366
      FF6
      699
      FF0
      066
      66F
      F00
      99F
      F66
      66C
      C33
      669
      900
      999
      966
      CCC
      C66
      FFF
      F66
      996
      633
      663
      300
      996
      666
      CC6
      666
      FF6
      666
      990
      033
      CC3
      399
      FF6
      6CC
      FF0
      099
      33F
      F00
      66F
      F33
      339
      900
      66C
      C00
      99F
      F33
      CCC
      C99
      FFF
      F99
      CC9
      966
      CC6
      600
      CC9
      999
      FF9
      999
      FF3
      399
      CC0
      066
      990
      066
      FF3
      3CC
      FF0
      0CC
      00C
      C00
      33C
      C00
      336
      600
      669
      933
      99C
      C66
      CCF
      F99
      FFF
      FCC
      FFC
      C99
      FF9
      933
      FFC
      CCC
      FF9
      9CC
      CC6
      699
      993
      366
      660
      033
      CC0
      099
      330
      033
      33C
      C33
      66C
      C66
      00F
      F00
      33F
      F33
      66F
      F66
      99F
      F99
      CCF
      FCC
      CC9
      9CC
      996
      699
      993
      399
      990
      099
      663
      366
      660
      066
      006
      600
      336
      633
      009
      900
      339
      933
      669
      966
      99C
      C99
      FFC
      CFF
      FF9
      9FF
      FF6
      6FF
      FF3
      3FF
      FF0
      0FF
      CC6
      6CC
      CC3
      3CC
      003
      300
      00C
      C33
      006
      633
      339
      966
      66C
      C99
      99F
      FCC
      CCF
      FFF
      339
      9FF
      99C
      CFF
      CCC
      CFF
      CC9
      9FF
      996
      6CC
      663
      399
      330
      066
      990
      0CC
      CC0
      0CC
      00F
      F33
      33F
      F66
      009
      933
      00C
      C66
      33F
      F99
      99F
      FFF
      99C
      CCC
      006
      6CC
      669
      9CC
      999
      9FF
      999
      9CC
      993
      3FF
      660
      0CC
      660
      099
      CC3
      3FF
      CC0
      0FF
      00F
      F66
      66F
      F99
      33C
      C66
      009
      966
      66F
      FFF
      66C
      CCC
      669
      999
      003
      366
      336
      699
      666
      6FF
      666
      6CC
      666
      699
      330
      099
      993
      3CC
      CC6
      6FF
      990
      0FF
      00F
      F99
      66F
      FCC
      33C
      C99
      33F
      FFF
      33C
      CCC
      339
      999
      336
      666
      006
      699
      003
      399
      333
      3FF
      333
      3CC
      333
      399
      333
      366
      663
      3CC
      996
      6FF
      660
      0FF
      00F
      FCC
      33F
      FCC
      00F
      FFF
      00C
      CCC
      009
      999
      006
      666
      003
      333
      339
      9CC
      336
      6CC
      000
      0FF
      000
      0CC
      000
      099
      000
      066
      000
      033
      663
      3FF
      330
      0FF
      00C
      C99
      009
      9CC
      33C
      CFF
      66C
      CFF
      669
      9FF
      336
      6FF
      003
      3CC
      330
      0CC
      00C
      CFF
      009
      9FF
      006
      6FF
      003
      3FF

      Для простоты в HTML определены 16 стандартных цветов, которые вместе с их шестнадцатиричными кодами приведены ниже.

      black = "#000000" green = "#008000"
      silver = "#C0C0C0" lime = "#00FF00"
      gray = "#808080" olive = "#808000"
      white = "#FFFFFF" yellow = "#FFFF00"
      maroon = "#800000" navy = "#000080"
      red = "#FF0000" blue = "#0000FF"
      purple = "#800080" teal = "#008080"
      fuchsia = "#FF00FF" aqua = "#00FFFF"

      HTML - это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.

      Пользуясь HTML, разработчик может создать только внешний вид сайта. Важно понимать, что ни один сайт не существует без разметки. HTML является базой создания веб-страниц. Весь остальной функционал добавляется различными языками программирования.

      Создание html-документа

      Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.

      Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.

      Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

      Структура html-документа. Пример

      Структура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.

      На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.

      Структура html-документа - основные теги:

      Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.

      Выше было сказано, что страницы сайтов имеют расширение.html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.

      Раздел head

      На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

      Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

      Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.

      Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.

      Подключение стилей

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

      Подключается файл следующим образом.

      В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

      Другим вариантом является определение стилей прямо в разделе head.

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

      Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.

      Подключение скриптов

      Скрипты подключаются следующим образом.

      Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

      Раздел body

      Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

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

      Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

      Основные теги

      Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

      Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.

      Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.

      Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.

      Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

      Рассмотрим другие основные теги, которые указываются в разделе body.

      Назначение

      Изображения

      Перенос текста на новую строку

      Жирный текст

      Перечеркнутый текст

      Подчеркнутый текст

      Как всё это можно представить в голове

      Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.

      Нужно ли маркетологу знать язык разметки гипертекста (HyperText Markup Language), то есть HTML? На этом языке говорят между собой верстальщики, и кроме браузеров в некоторой мере его могут понимать другие программисты и разработчики. И хотя на уровень продаж знание HTML прямо, наверное, и не влияет, все же способность ориентироваться в основах этого языка не будет лишней даже для маркетолога.

      И первое, что необходимо сделать, это отбросить скептицизм, связанный с мыслью, что осилить даже основы HTML вам не под силу — не переживайте, подобные сомнения роятся в головах довольно многих людей. И хотя, возможно, вам и не придется постоянно пересекаться с данными вопросами в рамках ваших должностных обязанностей или работы в LPgenerator, однако предлагаем все же ознакомиться с базовыми принципами этого языка. По крайней мере, вы сможете не только подружится с HTML, но и стать ближе к тем людям в вашей компании/команде, для которых этот язык является родным:)

      Что представляет собой HTML?

      Как уже упоминалось, HTML — это язык гипертекстовой разметки, с помощью которого наши коллеги верстальщики непосредственно создают структуру web-страниц (одной из разновидностей которых являются лендинги) и email-писем.

      Если объяснить суть данного понятия простыми и наглядными образами, то можно сказать, что HTML — это тело, а CSS (Cascading Style Sheets — каскадные таблицы стилей) — одежда. В то время как CSS определяет внешний вид web-страницы, HTML формирует ее структуру (скелет) посредством заголовков, списков и других подобных элементов, начиная от начала страницы — хедера, и до ее конца — футера.

      Неспроста также сказано, что HTML — это язык разметки : именно метки или как их еще называют тэги (tags), заключенные в угловые скобки, формируют те элементы , из которых и состоит код HTML. В большинстве своем, элементы данного языка имеют открывающий и закрывающий тэг. От правильного (валидного) использования последних зависит не только адекватность структуры веб-страницы, но и правильность ее отображения интернет-браузерами.

      Основные функциональные понятия HTML

      Как показано на примере HTML-кода, помещенного ниже, он всегда начинается с . Для браузера появление этого элемента указывает на то, что ему следует отображать HTML-структуру:

      Тут будет размещен заголовок

      А в этом месте будет первый абзац

      Представленный небольшой вариант простого HTML-кода, содержит несколько элементов, состоящих, в свою очередь, из таких тэгов как:

      • — открывающий и закрывающий тэг, указывающий на начало и окончание той части страницы, в которой будет содержаться ее контент. На русский язык этот тэг переводится словом «тело»;
      • — опять таки открывающий и закрывающий тэг, указывающий на начало и окончание заголовка. Всего таких тегов может быть 6, и отличаются они величиной шрифта — чем выше числовой порядок заголовка, тем меньшими буквами он будет отражаться. Вместе с тегом

        , формирует структуру самого контента: в частности метки определяют начало и конец абзацев текста.

      Таким образом один за другим формируются разные элементы, которые впоследствии будут представлены на целевой странице. Как вы, наверное, уже поняли, для того, чтобы указать на закрытие определенного тэга, в HTML принято ставить слэш «/».

      Для закрепления только что полученного навыка можно дописать еще несколько строчек кода. До этого мы оперировали в рамках «тела» контента, за которое отвечает тэг , но пока это самое тело у нас без «головы». Исправить это досадное недоразумение можно добавив следующие строки:

      Тут будет название всей страницы

      Тут будет заголовок, написанный самым большим шрифтом

      А это — усовершенствованный, частично выделенный жирным шрифтомабзац.

      Тут будет тоже заголовок, но не такой заметный, как предыдущий — он будет выполнен более мелким шрифтом

      Еще один абзац для полноты картины.

      По сути, приведенный выше второй фрагмент HTML кода — это расширенный вариант первого:

      • появилось титульное название страницы, которое помещено между тэгами , которые, в свою очередь формируют заглавную, а не контентную частью страницы, так как они размещены внутри тега , а не ;
      • появился еще один заголовок более низкого порядка (он будет менее заметен), который будет размещен в рамках ;
      • преобразится часть текста в первом по порядку абзаце: фраза, заключенная в тэг (на русский язык переводится «сильный»), будет выделена жирным.

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

      Не так страшен HTML, как его рисуют, верно?

      Понятно, что существует достаточно много других тэгов, благодаря которым задаются дополнительные параметры структуры web-страницы. Однако даже такого краткого обзора будет достаточно для того, чтобы не растеряться, если вам придется столкнуться с необходимостью вникнуть в код.

      Существует немало качественных интернет-ресурсов, посвященных тематике HTML и CSS. Говоря на языке маркетологов, можно сказать, что в этой нише достаточно хорошо развит, и при желании можно увеличить свои познания в данной сфере, отыскав подходящий ресурс в том числе и в русскоязычной части Сети.

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

      Если же все-таки у вас нет желания или времени — все мы люди занятые — вникать в HTML, всегда остается возможность использовать для создания качественной целевой страницы.

      Также к вашим услугам отдел верстки нашей компании (verstka@сайт), который с удовольствием исполнит любую вашу прихоть в рамках платформы: слайдеры, поп-апы, сложные лид-формы, галереи и т.д. В нашем редакторе можно все!

      Высоких вам конверсий!

      Игорь Кизин,

      руководитель отдела верстки LPgenerator

      Влад Мержевич

      Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

      Метатеги для поисковых механизмов

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

      Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.

      Некоторые принципы, относящиеся к метатегам:

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

      Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.

      Пример 1. Использование Description

      description

      keywords

      Этот метатег был предназначен для описания ключевых слов, встречающихся на странице (пример 2). Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики пропускают этот параметр.

      Пример 2. Использование Keywords

      keywords

      Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.

      Автозагрузка страниц

      Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).



       Top