Чем заменить устаревший тег 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").
Если вы пользовались
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 используется, когда
требуется прозрачное изображение
или анимация, а также для:
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.
![](https://i0.wp.com/fb.ru/misc/i/gallery/43047/1327414.jpg)
Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.
Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.
Подключение скриптовСкрипты подключаются следующим образом.
Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.
Раздел bodyСтруктура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.
Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.
Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.
Основные тегиСтруктура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.
Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.
![](https://i2.wp.com/fb.ru/misc/i/gallery/43047/1327415.jpg)
Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.
Атрибут 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-кода, содержит несколько элементов, состоящих, в свою очередь, из таких тэгов как:
Таким образом один за другим формируются разные элементы, которые впоследствии будут представлены на целевой странице. Как вы, наверное, уже поняли, для того, чтобы указать на закрытие определенного тэга, в 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).
Популярное в рубрике:
Как объединить слои в фотошопе в один или соединить их в группу...
читать
Перенос контактов на новый телефон android
читать
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...
читать
Основные возможности Kaspersky Rescue Disk
читать
Top