Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
Для тега доступны .

3.2. Тег

Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом.
Для тега доступны .

3.3. Тег

Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом.
Для тега доступны .

3.4. Тег

Выделяет имена переменных, отображая курсивом.
Для тега доступны .

3.5. Тег

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

4. Теги для оформления цитат и определений

4.1. Тег

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title , она появляется при наведении курсора мыши на текст.
Для тега доступны .

4.2. Тег

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

4.3. Тег

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.

4.4. Тег

Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite .

4.5. Тег

Применяется для выделения цитат, названий произведений, сносок на другие документы.
Для тега доступны .

4.6. Тег

Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Для тега доступен атрибут title .

5. Абзацы, средства переноса текста

5.1. Тег

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em , при этом отступы соседних абзацев «схлопываются».
Для тега доступны .

5.2. Тег

Переносит текст на следующую строку, создавая разрыв строки.
Для тега доступны .

5.3. Тег

---

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.
Для тега доступны .

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом:

... и ... - выделяют текст полужирным шрифтом.

... и ... - выделяют текст курсивом .

^... - выводит текст в верхнем индексе, например E = mc 2 .

_... - выводит текст в нижнем индексе, например H 2 SO 4 .

Все эти теги являются встроенными (inline, уровня строки) , то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше - должен быть закрыт позже.

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

Существуют еще теги и , подчеркивающие текст, а также тег , отображающий зачеркнутый текст. Эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Лучше использовать атрибут style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег style="text-decoration:underline">... - подчеркивает текст.

<тег style="text-decoration:overline">... - надчеркивает текст.

<тег style="text-decoration:line-through">... - зачеркивает текст.

Пример изменения стилей шрифтов

Жирный шрифт.Курсив.

Жирный курсив.

H₂SO₄ - формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст,

зачеркнутый жирный.

Результат в браузере

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

<тег style="свойство CSS:значение">...

Тег или что делать, когда нет нужных тегов

Тег .... Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства.

Обычный текст без изменений.

Еще обычный текст.

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

Зачеркнутый.

Результат в браузере

Меняем имя (гарнитуру) шрифта

Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:

По умолчанию практически все браузеры используют шрифт "Times New Roman", а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег style="font-family:имя шрифта, семейство">...

Если имя шрифта состоит из нескольких слов, то его необходимо закрывать в одинарные кавычки. Допускается указывать не одно, а несколько имен шрифтов через запятую и тогда, если первого шрифта на компьютере нет - будет использован второй, третий и т.д.

Чтобы изменить шрифт на всей странице - достаточно указать атрибут style в теге . А если необходимо изменить шрифт для отдельной части текста, то заключите его втег и примените атрибут к нему.

Пример изменения имени шрифтов

Это шрифт Arial, если его нет, то Verdana, а если

и его нет, то любой другой из sans-serif.

Это Comic Sans MS илилюбой cursive.

Этоопять Arial, Verdana илилюбой sans-serif.

А это Courier или любой monospace.

Результат в браузере

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных - это пункты (pt), пиксели (px) и проценты (%). Итак:

pt - Пункты. Один пункт равен 1/72 дюйма, а один дюйм - 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.

px - Пиксели. Измеряется в пикселях монитора компьютера. Пиксель - это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.

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

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег style="font-size:размер">...

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

Пример изменения размера шрифтов

Этот размер шрифта составляет 90% от размера

в браузере по умолчанию.

Этот размер составляет 90% уже от размера в теге BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию.

Размер этого шрифта 15 пунктов.

Результат в браузере

Если для всего параграфа нужен шрифт Arial с размером в 80%, то надо написать так:

Текст параграфа.

Текст параграфа.

Или вообще вот так.

Текст параграфа.

Первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style - не просто атрибут, а атрибут относящийся к CSS:

Текст параграфа.

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

Цвет шрифта и цвет знакоместа

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

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

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

Имя цвета - В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.

HEX-код цвета - Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета - красный, зеленый и синий. HEX-код - это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег style="color:имя цвета">... - указание цвета текста по имени.

<тег style="color:#HEX-код">... - указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице - достаточно указать атрибут style в теге . А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его втег и примените атрибут к нему.

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

Красный текст заголовка

Синий текст параграфа.

Зеленыйкурсив.

Красныйтекст.

Результат в браузере

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег style="background:имя цвета">... - указание цвета фона по имени.

<тег style="background:#HEX-код">... - указание цвета фона по коду.

Пример изменения цвета фона

Заголовок.

Параграф.

Жирныйтекст.

Обычныйтекст.

Результат в браузере

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

Теги выравнивания содержимого теста относительно страницы

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

text-align:center - Выравнивание каждой строки по центру элемента, например параграфа.

text-align:left - Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).

text-align:right - Каждая строка прижимается к правой стороне.

text-align:justify - Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая - «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify, то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

Пример выравнивания содержимого тегов

Заголовокпоцентру.

Текстпараграфаприжимаетсявправо.

Параграфпоцентру.

Результат в браузере

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

Теги, выделяюцие цитаты

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

Тег

или выделяем длинные цитаты

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

Пример использования тега BLOCKQUOTE

Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:

Очень часто тег BLOCKQUOTE используют не по прямому назначению -

выделение цитируемого текста. А только ради боковых отступов, которые

он создает. В принципе, подобное применение этого тега не противоречит

синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все

же лучше подобным образом его не использовать, так как BLOCKQUOTE

предназначен именно для выделения длинных цитат.

Результат в браузере

Тег или выделяем небольшие цитаты

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

Пример выделения цитат

Для изучения языка гораздо важнее свободная любознательность,

чем грозная необходимость. Августин Аврелий.

Чему бы ты ни учился, ты учишься для себя. Петроний.

Результат в браузере

Тег
или принудительный обрыв строки

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

Тег
тоже является встроенным (inline) элементом и пусть вас не запутает то, что он осуществляет перенос строки после себя, просто у него функция такая. Кроме этого, у элемента
нет закрывающего тега, то есть он является пустым , потому что не может иметь содержимого.

Пример использования тега BR

Цель творчества - самоотдача,
А не шумиха, не успех.

Позорно, ничего не знача,
Выть притчей на устах у всех.

Б. Пастернак.

Результат в браузере

Зачем использовать тег
, если можно просто написать текст в нескольких параграфах, он ведь тогда тоже будет указан на разных строках?» Все это так, но не забывайте, что тег

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

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


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

Спецсимволы HTML

С пецсимволы HTML - это условные кодовые обозначения, которые преобразуются браузером в различные текстовые знаки: буквы, цифры, знаки препинания, стрелки и так далее. Например, если мы напишем в HTML-странице вот такой код:

То браузер нам его не покажет, а отобразит в параграфе знак плюс-минус:

Спецсимволы HTML можно указывать двумя способами:

Код символа - В этом случае ставится амперсанд (&), за ним решетка (#), потом идут цифры и в конце ставится точка с запятой (;), как показано выше.

Мнемоника - Сначала также идет амперсанд, потом пишется ключевое слово и тоже в конце точка с запятой, например: ©

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

Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть © и © - не одно и то же.

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

Для чего нужны спецсимволы HTML?

Спецсимволы HTML используются для совершенно разных целей. Я думаю, вы уже догадались, что их применяют, когда нужно вставить на страницу символ, которого нет в стандартной компьютерной клавиатуре. Но это далеко не все. Кроме этого они указываются, когда кодировка страницы не поддерживает какие-то символы в «готовом» виде (к этому мы еще вернемся).

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

Довольно часто спецсимволы используются для отображения на странице HTML-разметки. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (< и >) и кавычки атрибутов (")

Пример использования спецсимволов HTML

Тег для создания параграфов.

® - Знак зарегистрированной торговой марки.

При написании статьи лучший вариант - это использование

между словами длинного тире и дефиса, а не только дефиса во всех случаях.

Результат в браузере

Создание горизонтальных линий в HTML

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

Как нарисовать горизонтальную линию?

Для создания горизонтальных линий в HTML существует специальный тег

---

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

. А вот сам

---

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

Пример рисования горизонтальных линий в HTML

Параграф.

Параграф.

Параграф.

Результат в браузере

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега

---

существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:

---

- цвет линии (вернее ее фон).

---

- толщина линии.

---

- ширина линии.

---

- а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#).

В CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.

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

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

---

. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег

---

внутри элемента

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

.

Пример изменения цвета, толщины и ширины горизонтальных линий.

---

---

---

---

Результат в браузере

Изменение положения горизонтальных линий

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

---

атрибут style со значениями для выравнивания содержимого тегов .

Как убрать рамку вокруг линии?

По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:

---

Группирование элементов

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

Тег

или сгруппированный блок

До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов - либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег

...

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

не добавляет абсолютно никаких внешних полей (отступов) пустого пространства вокруг себя, как это делает, например, тег

Пример использования тега DIV

Менюсайта

Дополнительные разделы

Параграф.

Параграф.

Параграф.

Параграф.

Параграф.

Параграф.

Результат в браузере

Тег или сгруппированная строка

Тег ... является встроенным (инлайн) элементом, который может содержать только встроенные теги и использоваться внутри строк текста.

Пример использования тега SPAN

Обычный текст.

Жирный.

Курсив.

Результат в браузере

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Html-теги для текста – это теги, которые меняют оформление заключенного в них контента.

Эта идея пришла из печатных издательств. Редакторы на полях помечали, что является заголовком, как оформить список.

Так же и теги. Они указывают, какой стиль должен быть у элемента.

Теги и элементы

Каждый тег имеет вид:

<Название тега>

Элемент – это совокупность тега и его содержимого. Многие из них требуют закрывающего тега:

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

• Header

• Блок
• курсив

Некоторые элементы не требуют закрытия

• 

• ---

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

Знает, для чего предназначен каждый тег и как поведет себя «обернутое» в элемент содержимое.

Парадигма оформления современных сайтов

Первоначально разметка позволяла и оформлять страницы, и указывать логическое назначение блоков. Новая версия HTML 5.0 нацелена на логическую разметку. Таким образом определяются тематические разделы на странице. При этом подходе и поисковым машинам, и людям легче ориентироваться в коде.

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

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

Валидация страницы

При продвижении сайта важную роль играет его валидность: «правильность» кода и соответствие его стандартам. Так как в настоящее время распространены два стандарта HTML – 4 и 5, то используются различные виды объявления типа документа:

1. Strict. Не включает теги font, и пр. Это «строгий» набор правил для верстки на HTML 4.
2. Transitional. Используется для сайтов, которые были написаны до появления новых стандартов. Разрешены устаревшие теги.
3. HTML. Поддержка последнего стандарта.

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

Проверить валидность сайта можно на официальном сайте W3C – организации, где создаются стандарты.

Теги форматирования текста html

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

Рассмотрим все элементы, которые позволяют оформить текстовую часть сайта.

• - Жирное выделение.
  

• - Установка цвета и шрифта по умолчанию для страницы. Не рекомендуется к использованию.
• - Увеличивает размер шрифта на одну условную единицу. Всего их семь. Стандартный не оформленный символ имеет размер 3. Вложение тегов будет увеличить на дополнительную единицу на каждом уровне. В CSS аналогом является свойство font-size.

• - Логическая метка текста как цитаты или сноски. Символы оформляются курсивом, но это можно изменить в таблице стилей.

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

• - Необходимо заключать в этот тег первое упоминание термина в статье. Отображается курсивом во всех браузерах.

• - Используется для привлечения внимания к фрагменту контента. Выделяется курсивом. Аналог CSS font-style.
• - Самый запрещенный тег для текста в современной разметке. Браузеры его еще поддерживают, так как многие встроенные редакторы используют его для указания размера и шрифта. Но при ручной верстке не рекомендуем применять такой способ форматирования. Лучше пользоваться свойствами CSS font-size и color – аналоги написания.

• -

  - Логическое выделение структуры заголовков контента. Текст между открывающим и закрывающим тегами помечается жирным и имеет нестандартный размер. Главный заголовок H1 имеет самый большой шрифт, h6 - самый маленький.

• - Курсив. Не осуждается последним стандартом, но рекомендуется использовать font-style.
• - Обозначает моноширинным шрифтом имитацию напечатанного на клавиатуре текста.

• - Логическое выделение контента. Дополнительно Chrome и FireFox подсвечивают его желтым фоном.

• Абзац. Контент, помеченный этим тегом начинается с новой строки. Между ними ставится отступ. Не требует закрывающего тега, новый абзац начинается при появлении любого блочного элемента.

• Используется для оформления текста так, как он был указан при верстке. По умолчанию в HTML любое количество подряд идущих пробелов трансформируются в один, а обычные переносы не учитываются. Элемент pre учитывает положение символов.>

• - Выделение цитат, текст отображается в кавычках.

• - Отображает символы как на результат выполнения программы на экран. Используется моноширинный шрифт.

• - Выполняет действия, обратные элементу big, уменьшая размер символов на условную единицу.

• - Зачеркивает текст. Аналог сокращенного элемента. Не рекомендуется использовать. Аналог CSS text-decoration со значением line-through.

• - Жирное начертание. Логически акцентирует текст.
• _{- Показывает символ в нижнем индексе. Размещается ниже стандартной базовой линии, на которой располагаются символы, и имеет уменьшенный размер. В CSS используется vertical-align.}

• - При выводе кода компьютерной программы все переменные заключаются в этот тег. Выделяет их курсивом.

• - Показывает текст так, как он записан в коде страницы. Аналогично pre.</li> </ul><h2>Специальные символы</h2> <p>Помимо текста и медиа-контента, на страницу можно выводить небольшие изображения. Они выглядят как иконки, но вставляются в текст не картинками, а спецсимволами. Некоторые примеры приведены в таблице.</p> <p>Также в HTML 5 появились деньги, <a href="/smailiki-dlya-nikneima-simvoly-i-znaki-dlya-kontakta-shahmatnye-figury-i/">карточные масти</a> и знаки гороскопа.</p> <p>Используйте в <a href="/chto-takoe-yazyk-razmetki-html-referat-yazyk-gipertekstovoi-razmetki/">разметке Html</a> текстовые теги, которые подчеркивают логическое значения текста. Не стоит оформлять каждый фрагмент контента отдельно. Это допустимо только в случае, если вы точно знаете, что такое форматирование больше нигде не повторяется. Для одинаковых стилей используйте классы CSS.</p> <p>В дальнейшем такой подход поможет сэкономить время на изменении дизайна, а также повысить шансы на попадание в ТОП поисковых систем.</p> <p>Доброго времени суток, уважаемые подписчики.</p> <p>Этот урок мы посветим <b>форматированию текста в html </b>. Рассмотрим, какие <b>теги </b> для этого применяются.</p> <p>Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно "обойти", используя <a href="/chto-takoe-kaskadnaya-tablica-stilei-primenenie-css-k-html-sposoby-primeneniya/">каскадные таблицы</a> стилей (css).</p> <p>Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в <a href="/avtor-pervonachalnoi-versii-html-http-web-opisanie-yazyka-html-chto-takoe/">языке HTML</a> присутствуют.</p> <p>Итак, начнем.</p> <p>Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: </p> <p>Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью <a href="/kak-polzovatsya-programmoi-maikrosoft-vord-sozdanie-novogo/">программы word</a>. Там две сказки известных авторов Братья Гримм.</p> <p>Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из <a href="/dokazat-tozhdestvennuyu-istinnost-formuly-onlain-kalkulyator-ii/">предыдущего урока</a>.</p> <p>Верю, что да.</p> <p>Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами <b><body> </body> </b> нашей заготовки.</p> <p>Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).</p> <p>Мы видим, что текст идет без заголовков, без абзацев, без отступов.</p> <p>Вот теперь и займемся непосредственным форматированием текста в языке HTML.</p> <p>Для выделения заголовков используются теги <b><H1> </b>текст<b></H1> </b>, <b><H2> </b>текст<b></H2> </b> и т.д. до <b><H6> </b>текcт<b></H6> </b>.</p> <p>Цифры после буквы H в теге применяются от 1 до 6.</p> <p>1 – самый крупный заголовок, 6 – самый маленький заголовок.</p> <p>Давайте теперь найдем в нашем файле названия сказок и заключим их в теги <b><H1> </b>…<b><H1> </b>.</p> <p>XHTML </p> <p><H1>Лис и лошадь</H1> <H1>Лис и кошка</H1></p> <p>У тега <b><H1> </b> есть параметр <b>align </b> со значением <b>Left </b> — по левому краю, <b>right </b> — по правому и <b>center </b> — по центру.</p> <p>Давайте выровняем заголовок по центру. Для этого пропишем:</p> <p>XHTML </p> <p><H1 align="center"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><H1 align = "center" > </p> </td> </tr></table><p>Аналогично и второй заголовок.</p> <p>Сохраняем и смотрим в браузер.</p> <p>Заголовки стали по центру.</p> <p>Для упрощения работы можно одновременно держать <a href="/kak-otkryt-v-brauzere-kod-elementa-kak-otkryt-ishodnyi-kod/">открытыми код</a> страницы в блокноте и браузере.</p> <p>А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).</p> <p>Самостоятельно попробуйте <a href="/222222-kakoi-cvet-cvet-v-stilyah-mozhno-zadavat-raznymi-sposobami-po/">разные значения</a> тега <b><H> </b>текст<b></H> </b>. И разные значения <b>align </b>. Выберите любой Вам понравившейся.</p> <p>Теперь разобьем наш текст на абзацы.</p> <p>Тег, который это делает — <b><p> </b>текст абзаца<b></p> </b>.</p> <p>Для этого находим начало абзацев и ставим там тег <b><p> </b>, а в конце абзаца закрываем его <b></p> </b>.</p> <p>Сохраняем <a href="/pochemu-fleshka-prevrashchaet-faily-v-yarlyki-skript-dlya/">исходный файл</a> с кодом (ctrl+s), в браузере <a href="/kompyuter-vidit-vsyu-operativnuyu-pamyat-64-vozmozhnye-nepoladki-v-materinskoi/">жмем кнопку</a> "обновить" и смотрим, что получилось.</p> <p>У тега <b><p> </b> есть параметр <b>align </b> с такими же значениями, что и у тегов <b><H> </b> — <b>left, right, center </b>. Его работа абсолютно такая же как и у тега <b><H> </b>.</p> <p>На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.</p> <p>Текст можно сделать жирным. При помощи тега <b>или <b><strong> </b> (кстати, это закрывающиеся теги. Рекомендуется <b><strong> </b>).</p> <p>Курсив — <b><i> </b> или <b><em> </b>, подчеркнутый <b><u> </b>, моноширинный <b><tt> </b> или <b><kbd> </b>.</p> <p>Попробуйте заключить разные участки текста в <a href="/zagolovki-h1-i-title-delat-li-ih-odinakovymi-ili-raznymi-tegi-h1-h2-h3-kak/">разные теги</a>. И не забывайте их закрывать.</p> <p>Например:</p> <p>XHTML </p> <p><b> любой текст из сказки</b> <i>…………………………..</i> <u>………………………….</u> <kbd>……………………..</kbd></p> <p>Для изменения размера, цвета и шрифта <a href="/kak-zamenit-cvet-obekta-na-drugoi-v-fotoshope-na-otdelnom-uchastke-i/">отдельного участка</a> текста используйте тег <b><font> </b>, его параметры:</p> <p><b>fаce="arial" </b> – указывает названия шрифта.</p> <p><b>size="3" </b> — размер (значения от 1 до 7).</p> <p><b>color="******" </b> – цвет шрифта.</p> <p>****** — определенный код шрифта (например, 000000 – это черный).</p> <p>Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:</p> <p>XHTML </p> <p><font face="arial" size="6" color="red"> фрагмент текста сказки </font></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><font face = "arial" size = "6" color = "red"> <span> фрагмент текста сказки </span></font> </p> </td> </tr></table><p>Еще один немаловажный тег <b><br> </b> применяется для принудительного перехода текста на новую строку. В использовании он прост, ставите его в том месте, начиная с которого текст должен отображаться с новой строки. В принципе по этому тегу добавить больше нечего, поэтому двигаемся дальше.</p> <p>Следующую группу тегов (исходя из своего опыта) используют довольно редко, поэтому подробно рассматривать их мы не будем. Включил я их в <a href="/android-vosstanovlenie-dannyh-sovety-tryuki-i-uroki-kak-vosstanovit-dannye-na-telefone-android/">данный урок</a>, чтобы показать возможности языка, и вдруг вам они когда-нибудь понадобятся. Чтобы вы знали, что такие возможности существуют.</p> <p>Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас полезное упражнение.</p> <p>Итак, теги:</p> <p><b><sub> </b> — подиндексы (H 2 O)</p> <p><b><sup> </b> — надиндекс (4 5)</p> <p><b><big> </b> — увеличивает шрифт на 1</p> <p><b><small> </b> — уменьшает шрифт на 1</p> <p><b><cite> </b> — цитаты, отображаются курсивом</p> <p><b><code> </b> — программный код отображается моноширинным шрифтом</p> <p><b><em> </b> — выделенный текст отображается курсивом</p> <p><b><strong> </b> — выделенный текст отображается жирным шрифтом, рекомендуется вместо <b></p> <p><b><hr> </b> — <a href="/gorizontalnaya-liniya-kak-sdelat-liniyu-s-pomoshchyu-html-i/">горизонтальная линия</a>. У этого тэга есть такие параметры, как:</p> <p><b>align=center(left, right) </b>-выравнивание, с этим параметром мы знакомы из других тегов</p> <p><b>width="число" </b> — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана</p> <p><b>size"число" </b> — толщина линии (меньше 100 пикселей, т.е. если задать параметр <b>size=99 </b>, a параметр <b>width=1 </b>, то получим <a href="/ne-rabotaet-verhnyaya-chast-tachskrina-ne-rabotayut-sensornye-knopki/">вертикальную линию</a>, только с ограниченной высотой)</p> <p><b>color="цвет" </b>-цвет линии</p> <p><b>noshade </b> — отменяет рельефность</p> <p>Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:</p> <p>XHTML </p> <p><hr width="100%" color="red" ></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><hr width = "100%" color = "red" > </p> </td> </tr></table><p>Поэкспериментируйте с набором и значениями параметров этого тега.</p> <p>Есть еще один интересный тег, но поддерживается он только браузером <a href="/gde-hranyatsya-paroli-v-internet-explorer-gde-internet-explorer-hranit-sohranennye-paroli-ne/">Internet Explorer</a>. Честно говоря мне его на практике использовать не приходилось.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> <div class="mb40 pr"> <div style="margin-top: 30px; margin-bottom: 35px;"> </div> <div style="margin-top: 0px; margin-bottom: 0px; font-family: Arial; font-size: 15px;"> <div id="yandex_rtb_R-A-105632-3"></div> </div> </div> <style> .sh_icon a:hover { opacity: 0.6; } </style> <div class="catTitle"> <span class="fl noLinknew">Похожие статьи</span> <div class="clr"></div> </div> <ul class="medbeArticle medbeEvents js-novinki "> <li id="bx_3218110189_16277"> <div class="info" style="position:relative;"> <a href="/kak-vyglyadit-samsung-not-8-samsung-galaxy-note8-sd835---tehnicheskie-harakteristiki/" class="date">2024-05-10 00:25:16</a> </div> <a href="/kak-vyglyadit-samsung-not-8-samsung-galaxy-note8-sd835---tehnicheskie-harakteristiki/"> <div class="title"> Samsung Galaxy Note8 SD835 - Технические характеристики </div> </a> <p class="text"> Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,... </p> <a href="/category/computer-literacy/" class="catName">Компьютерная грамотность</a> <div class="clr"></div> </li> <li id="bx_3218110189_16277"> <div class="info" style="position:relative;"> <a href="/notepad-skachat-russkii-poslednyaya-versiya-besplatnye-programmy-dlya-windows/" class="date">2024-05-09 00:25:26</a> </div> <a href="/notepad-skachat-russkii-poslednyaya-versiya-besplatnye-programmy-dlya-windows/"> <div class="title"> Бесплатные программы для Windows скачать бесплатно </div> </a> <p class="text"> Сегодня компьютерные технологии, стремительно развиваются, совершенствуя другие отрасли производства. Для развития других технологий, с помощью компьютерных, нужны специальные программы. Эти программы устанавливают на многие заводы и фабрики, чтобы... </p> <a href="/category/useful-programs/" class="catName">Полезные программы</a> <div class="clr"></div> </li> <li id="bx_3218110189_16277"> <div class="info" style="position:relative;"> <a href="/kak-vyvesti-raznoe-izobrazhenie-na-dva-monitora-dva-monitora-dlya/" class="date">2024-05-07 00:22:21</a> </div> <a href="/kak-vyvesti-raznoe-izobrazhenie-na-dva-monitora-dva-monitora-dlya/"> <div class="title"> Два монитора – для активных пользователей ПК </div> </a> <p class="text"> Инструкция Два сравнительно небольших экрана могут с легкостью заменить один широкоформатный с большой диагональю. Иногда подключение второго позволяет использовать одновременно несколько функций одного компьютера. Современные видеоадаптеры в... </p> <a href="/category/solving-problems/" class="catName">Решение проблем</a> <div class="clr"></div> </li> </ul> <div> </div> <div class="mb40 clear clearfix">&nbsp;</div> </div> <div class="fr width300"> <div class="catTitle blackStyle"> <span class="fl noLink">Категории</span> <div class="clr"></div> </div> <div class="mb40"> <ul class="medbeSidebarNav"> <li> <a href="/category/windows-10/">Windows 10</a> </li> <li> <a href="/category/tips-for-beginners/">Советы начинающим</a> </li> <li> <a href="/category/internet-tips/">Интернет-подсказки</a> </li> <li> <a href="/category/useful-programs/">Полезные программы</a> </li> <li> <a href="/category/hardware-solutions/">Аппаратные решения</a> </li> <li> <a href="/category/configuring-wi-fi/">Настройка Wi-Fi</a> </li> <li> <a href="/category/solving-problems/">Решение проблем</a> </li> <li> <a href="/category/configuring-windows/">Настройка Windows</a> </li> </ul> </div> <div class="cancel-mb40"> </div> <div class="mb40 pr"> <div class="catTitle" data-click="y"> <span class="fl noLinknew">Видеоматериалы</span> <div class="frnew"></div> <div class="clr"></div> </div> <div class="medbeSidebarCarousel medbeArticle"> <ul> <li> <a href="/kak-otkryt-papku-v-komandnoi-stroke-na-windows-kak-otkryt-konsol-vypolnit-na/"> <img src="/uploads/99e89424f2adb11996a69d750d521e3c.jpg" alt="Как открыть консоль выполнить на windows 10" loading=lazy> <div class="playBg"></div> <p> Как открыть консоль выполнить на windows 10 </p> </a> <a href="/category/tips-for-beginners/" class="catName">Советы начинающим</a> </li> <!-- /next_post --> </ul> </div> </div> <div class="cancel-mb40"> </div> <div class="mb40"> <div class="mb40"> <div class="catTitle" data-click="y"> <span class="fl noLinknew">Популярное</span> <div class="frnew"></div> <div class="clr"></div> </div> <ul class="medbeArticle sidebarEvents"> <li> <a href="/peremeshchenie-profilya-polzovatelya-standartnymi-sredstvami-windows-kak-v-windows/"> <img src="/uploads/59fe7e573328d24871fe2935b9706c24.jpg" width="100px" alt="Как в Windows переместить папки пользователя на другой локальный диск?" loading=lazy> <div class="info"> <span class="date">Аппаратные решения</span> </div> <div class="title"> Как в Windows переместить папки пользователя на другой локальный диск? </div> <div class="clr"></div> </a> </li> <li> <a href="/u-23-e-mail-elektronnaya-pochta-tema-elektronnaya-pochta-e-mail-komu-i-dlya-chego-neobhodim/"> <img src="/uploads/32b8f60fc6487ae047c6a42f3fb2a833.jpg" width="100px" alt="Тема: электронная почта (e-mail)" loading=lazy> <div class="info"> <span class="date">Решение проблем</span> </div> <div class="title"> Тема: электронная почта (e-mail) </div> <div class="clr"></div> </a> </li> <li> <a href="/street-storm-skachat-obnovlenie-radar-detektory-street-storm-obnovlenie-po-obnovlenie/"> <img src="/uploads/234b2558a611dbf47b0c26f903df5f0d.jpg" width="100px" alt="Радар детекторы Street Storm обновление ПО" loading=lazy> <div class="info"> <span class="date">Решение проблем</span> </div> <div class="title"> Радар детекторы Street Storm обновление ПО </div> <div class="clr"></div> </a> </li> </ul> </div> </div> <div class="cancel-mb40"> </div> <div class="mb40"> <div class="catTitle" data-click="y"> <span class="fl noLinknew">Новое</span> <div class="frnew"></div> <div class="clr"></div> </div> <ul class="medbeArticle clinicsCountry"> <li> <a href="/bolshaya-kolonka-jbl-perenosnaya-portativnaya-kolonka-jbl-xtreme-pochemu-vazhno/"> <img src="/uploads/55aaef5f4bd5a6ba7762845849da826f.jpg" width="100px" alt="Портативная колонка JBL Xtreme" loading=lazy> <div class="title"> Портативная колонка JBL Xtreme </div> <div class="clr"></div> </a> </li> <li> <a href="/ne-rabotaet-perednii-usb-3-0-ne-rabotayut-usb-porty-na-kompyutere-puti-resheniya/"> <img src="/uploads/518aef24f67a32ffc762c4f21d5e85e8.jpg" width="100px" alt="Не работает передний usb 3" loading=lazy> <div class="title"> Не работает передний usb 3 </div> <div class="clr"></div> </a> </li> <li> <a href="/adobe-premiere-pro-obzor-programmy-chto-takoe-premiere-pro-trebuetsya-li/"> <img src="/uploads/b04d975347b64d93e62986431908dad6.jpg" width="100px" alt="Adobe premiere pro обзор программы" loading=lazy> <div class="title"> Adobe premiere pro обзор программы </div> <div class="clr"></div> </a> </li> <li> <a href="/skachat-programmu-dlya-remonta-sistemy-kompyutera-i-noutbuka/"> <img src="/uploads/d20fca631f1e5da11c7c4b6f4e938b70.jpg" width="100px" alt="Программы для восстановления системы" loading=lazy> <div class="title"> Программы для восстановления системы </div> <div class="clr"></div> </a> </li> <li> <a href="/windows-registraciya-failov-s-rasshireniem-dll-i-ocx-neskolko-sposobov/"> <img src="/uploads/ee68d4ebcb7b7883f88f35fd1163a207.jpg" width="100px" alt="Windows Регистрация файлов с расширением *" loading=lazy> <div class="title"> Windows Регистрация файлов с расширением * </div> <div class="clr"></div> </a> </li> </ul> </div> </div> </div> <div class="clr"></div> <div class="clr mb42-"></div> </main> </div> <footer class="footer"> <div class="footerWrap"> <ul class="footNav"> <li> <a href="/category/windows-10/">Windows 10</a> </li> <li> <a href="/category/tips-for-beginners/">Советы начинающим</a> </li> <li> <a href="/category/internet-tips/">Интернет-подсказки</a> </li> <li> <a href="/category/useful-programs/">Полезные программы</a> </li> </ul> <ul class="footNav mr0"> <li> <a href="/category/windows-10/">Windows 10</a> </li> <li> <a href="/category/tips-for-beginners/">Советы начинающим</a> </li> <li> <a href="/category/internet-tips/">Интернет-подсказки</a> </li> <li> <a href="/category/useful-programs/">Полезные программы</a> </li> </ul> <div class="footSep"></div> <div class="fl width405"> <div class="medbeWarning" style="font-size: 10px;"> Советы пользователям компьютера <p></p> <br /> </div> <div style="position:absolute; top:50px; right:15px; width:300px;"> <noindex> <br /> </noindex> </div> </div> <div class="footSep"></div> <div class="fl "> <div class="copyright"> <br /> <noindex> <div id="liv"> </div> <br> </noindex></div> <div style="position:absolute; top:50px; right:15px; width:300px;"> <noindex> <br /> </noindex> </div> </div> <div id="onTop"></div> <div class="clr"></div> <div class="links"></div> <div class="clr"></div> </div> </footer> <div class="overlay"></div> <div style="display: none;" id="ajax_result"></div> <div class="modal fade" id="send_message" tabindex="-1" role="dialog" aria-labelledby="message" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="#" class="close" data-dismiss="modal" aria-hidden="true"></a> </div> <div class="modal-body"> <form action="/materials/sakharnyy-diabet/preparaty-insulina-i-insulinoterapiya/" method="POST"> <input type="hidden" name="sessid" id="sessid" value="190649912f2d5ccc3e7496471b00b5c2" /> <input name="head" type="text" placeholder="Тема" value=""> <textarea name="message" placeholder="Сообщения"></textarea> <input type="hidden" name="PARAMS_HASH" value="2d477b672b0c8e6bb03d8fa4ffc011a9"> <input type="submit" class="btn" name="submit" value="Отправить"> </form> </div> </div> </div> </div> <script type="text/javascript" data-skip-moving="true"> (function(w, d, n) { var cl = "bx-core"; var ht = d.documentElement; var htc = ht ? ht.className : undefined; if (htc === undefined || htc.indexOf(cl) !== -1) { return; } var ua = n.userAgent; if (/(iPad;)|(iPhone;)/i.test(ua)) { cl += " bx-ios"; } else if (/Android/i.test(ua)) { cl += " bx-android"; } cl += (/(ipad|iphone|android|mobile|touch)/i.test(ua) ? " bx-touch" : " bx-no-touch"); cl += w.devicePixelRatio && w.devicePixelRatio >= 2 ? " bx-retina" : " bx-no-retina"; var ieVersion = -1; if (/AppleWebKit/.test(ua)) { cl += " bx-chrome"; } else if ((ieVersion = getIeVersion()) > 0) { cl += " bx-ie bx-ie" + ieVersion; if (ieVersion > 7 && ieVersion < 10 && !isDoctype()) { cl += " bx-quirks"; } } else if (/Opera/.test(ua)) { cl += " bx-opera"; } else if (/Gecko/.test(ua)) { cl += " bx-firefox"; } if (/Macintosh/i.test(ua)) { cl += " bx-mac"; } ht.className = htc ? htc + " " + cl : cl; function isDoctype() { if (d.compatMode) { return d.compatMode == "CSS1Compat"; } return d.documentElement && d.documentElement.clientHeight; } function getIeVersion() { if (/Opera/i.test(ua) || /Webkit/i.test(ua) || /Firefox/i.test(ua) || /Chrome/i.test(ua)) { return -1; } var rv = -1; if (!!(w.MSStream) && !(w.ActiveXObject) && ("ActiveXObject" in w)) { rv = 11; } else if (!!d.documentMode && d.documentMode >= 10) { rv = 10; } else if (!!d.documentMode && d.documentMode >= 9) { rv = 9; } else if (d.attachEvent && !/Opera/.test(ua)) { rv = 8; } if (rv == -1 || rv == 8) { var re; if (n.appName == "Microsoft Internet Explorer") { re = new RegExp("MSIE ([0-9]+[\.0-9]*)"); if (re.exec(ua) != null) { rv = parseFloat(RegExp.$1); } } else if (n.appName == "Netscape") { rv = 11; re = new RegExp("Trident/.*rv:([0-9]+[\.0-9]*)"); if (re.exec(ua) != null) { rv = parseFloat(RegExp.$1); } } } return rv; } })(window, document, navigator); </script> <link href="/bitrix/cache/css/s2/medbe4_new/kernel_main/kernel_main.css?151557967426562" type="text/css" rel="stylesheet" /> <link href="/bitrix/cache/css/s2/medbe4_new/page_7b72513555721c1b5733d9b22d6efb9b/page_7b72513555721c1b5733d9b22d6efb9b.css?15155796623852" type="text/css" rel="stylesheet" /> <link href="/bitrix/cache/css/s2/medbe4_new/template_fa4e83195cbc9d75f36051d9e26d67c6/template_fa4e83195cbc9d75f36051d9e26d67c6.css?1515579660217752" type="text/css" data-template-style="true" rel="stylesheet" /> <link media="all" href="/local/templates/medbe4_new/css/responsive.css?sd" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]><![endif]--> <script type="text/javascript"> if (!window.BX) window.BX = {}; if (!window.BX.message) window.BX.message = function(mess) { if (typeof mess == 'object') for (var i in mess) BX.message[i] = mess[i]; return true; }; </script> <script type="text/javascript"> (window.BX || top.BX).message({ 'JS_CORE_LOADING': 'Загрузка...', 'JS_CORE_NO_DATA': '- Нет данных -', 'JS_CORE_WINDOW_CLOSE': 'Закрыть', 'JS_CORE_WINDOW_EXPAND': 'Развернуть', 'JS_CORE_WINDOW_NARROW': 'Свернуть в окно', 'JS_CORE_WINDOW_SAVE': 'Сохранить', 'JS_CORE_WINDOW_CANCEL': 'Отменить', 'JS_CORE_WINDOW_CONTINUE': 'Продолжить', 'JS_CORE_H': 'ч', 'JS_CORE_M': 'м', 'JS_CORE_S': 'с', 'JSADM_AI_HIDE_EXTRA': 'Скрыть лишние', 'JSADM_AI_ALL_NOTIF': 'Показать все', 'JSADM_AUTH_REQ': 'Требуется авторизация!', 'JS_CORE_WINDOW_AUTH': 'Войти', 'JS_CORE_IMAGE_FULL': 'Полный размер' }); </script> <script type="text/javascript"> (window.BX || top.BX).message({ 'LANGUAGE_ID': 'ru', 'FORMAT_DATE': 'DD.MM.YYYY', 'FORMAT_DATETIME': 'DD.MM.YYYY HH:MI:SS', 'COOKIE_PREFIX': 'BITRIX_SM', 'SERVER_TZ_OFFSET': '3600', 'SITE_ID': 's2', 'SITE_DIR': '/', 'USER_ID': '', 'SERVER_TIME': '1515581305', 'USER_TZ_OFFSET': '0', 'USER_TZ_AUTO': 'Y', 'bitrix_sessid': '190649912f2d5ccc3e7496471b00b5c2' }); </script> <script type="text/javascript" src="/bitrix/cache/js/s2/medbe4_new/kernel_main/kernel_main.js?1515579673298080"></script> <script type="text/javascript" src="/bitrix/js/main/core/core_db.min.js?14979660558699"></script> <script type="text/javascript" src="/bitrix/js/main/core/core_frame_cache.min.js?146900780711191"></script> <script type="text/javascript"> BX.setJSList(['/bitrix/js/main/core/core.js', '/bitrix/js/main/core/core_ajax.js', '/bitrix/js/main/json/json2.min.js', '/bitrix/js/main/core/core_ls.js', '/bitrix/js/main/core/core_fx.js', '/bitrix/js/main/core/core_popup.js', '/bitrix/js/main/session.js', '/bitrix/js/main/core/core_window.js', '/bitrix/js/main/core/core_date.js', '/bitrix/js/main/utils.js', '/local/templates/medbe4_new/js/jquery.js', '/local/templates/medbe4_new/js/jquery.jcarousel.min.js', '/local/templates/medbe4_new/js/jquery.formstyler.min.js', '/local/templates/medbe4_new/js/jquery.mCustomScrollbar.concat.min.js', '/local/templates/medbe4_new/js/modals.js', '/local/templates/medbe4_new/js/tabs.js', '/local/templates/medbe4_new/js/ontop.js', '/local/templates/medbe4_new/js/placeholder.min.js', '/media/js/scrollbar/jquery.mCustomScrollbar.concat.min.js', '/media/js/header.js', '/local/templates/medbe4_new/js/scripts.js', '/feedback/twin.js']); </script> <script> BX.ready(function() { $("[data-preload]").each(function(i, el) { $this = $(el); $this.load($this.data("preload"), function() { $this.find("form").addClass("js-form") }); }); $(document).on({ submit: function() { $this = $(this); var action = $this.attr("action"); var data = $this.serialize() + "&web_form_submit=Y"; $.post(action, data, function(data) { $this.closest("div").html(data); }) return false; } }, ".js-form"); }) </script> <script type="text/javascript" src="/bitrix/cache/js/s2/medbe4_new/template_a5d224f830c08eebc70bc5559ca1712e/template_a5d224f830c08eebc70bc5559ca1712e.js?1515579660221230"></script> <script> $(function() { if ('jcarousel' in $) { $('.medbeCarousel').jcarousel({ // Configuration goes here }); $('.medbeCarousel-prev').jcarouselControl({ target: '-=1' }); $('.medbeCarousel-next').jcarouselControl({ target: '+=1' }); $('.medbeSidebarCarousel').jcarousel({ // Configuration goes here }); $('.medbeSidebarCarousel-prev').jcarouselControl({ target: '-=1' }); $('.medbeSidebarCarousel-next').jcarouselControl({ target: '+=1' }); $(window).on("load resize", function() { var w = this.innerWidth; if ($('.medbeCarousel').hasClass('halfWidthCarousel')) { if (w > 1279) { c = 771; } else { c = 377; } } else { if (w > 1279) { c = 1160; } else { c = 780; } } $('.medbeCarousel').css('width', c + 'px'); }); } }); // Script (Fixed menu) // $(window).on("scroll load", function(){ // var w2 = this.innerWidth; // var top = $(window).scrollTop(); // if (top > 120) $('.mainNav > ul').css({ // 'max-width': '100%', // 'position': 'fixed', // 'top': 0 // } ); // else { // $('.mainNav > ul').css({ // 'position': 'relative', // 'max-width': 1280 // } ); // } // } ); jQuery(window).scroll(function() { topMain(); // on scroll }); topMain(); // on load window.topNavSmall = false; function topMain() { var _scrollTop = jQuery(document).scrollTop(); if (_scrollTop > 0) { jQuery('.mainNav').addClass('fixed'); window.topNavSmall = true; } if (window.topNavSmall === true && _scrollTop < 2) { jQuery('.mainNav').removeClass('fixed'); } } </script> <script> </script> <script> (function($) { $(function() { $('#pc_add_photo').styler({ filePlaceholder: 'Добавить фото перед статьей' }); $('input, select').styler(); }) })(jQuery) </script> <script> (function($) { $(window).load(function() { if ('mCustomScrollbar' in $) $(".medbeScrollBlock").mCustomScrollbar(); }); })(jQuery); </script> <script> $(document).ready(function() { $("#sorting_catalog").change(function() { $("#form_for_sorting_catalog").submit(); }); }); </script> <script> $(document).ready(function() { $('.catTitle').click(function() { if ($(this).data("click") != "y") { $(this).parents('.doctorMat').toggleClass('hidden'); return false } }); }); </script> <script> $(document).ready(function() { $('input, textarea').on('focus blur', function() { var placeholder = $(this).attr('placeholder'); if ($(this).val() == placeholder) { $(this).val(''); } else if ($(this).val() == '') { $(this).val(placeholder); }; }); }); </script> <script> $(document).ready(function() { //Placeholder $('input[placeholder], textarea[placeholder]').placeholder(); }); </script> <script type="text/javascript"> function slyLink() { var istS = 'Источник:'; var copyR = '© usercpu.ru'; var body_element = document.getElementsByTagName('body')[0]; var choose; choose = window.getSelection(); var myLink = document.location.href; var authorLink = "<br /><br />" + istS + ' ' + "<a href='" + myLink + "'>" + myLink + "</a><br />" + copyR; var copytext = choose + authorLink; var addDiv = document.createElement('div'); addDiv.style.position = 'absolute'; addDiv.style.left = '-99999px'; body_element.appendChild(addDiv); addDiv.innerHTML = copytext; choose.selectAllChildren(addDiv); window.setTimeout(function() { body_element.removeChild(addDiv); }, 0); } document.oncopy = slyLink; </script> <script> $(function() { /*$(document).on("click", ".js-open-menu-a", function(){ $("#mainNav").slideToggle(200); } );*/ /* $(document).on({ click: function(){ $(this).siblings("nav").slideToggle(200); } , /!*touchend: function(){ $(this).siblings("nav").slideToggle(200); } *!/ } ,".js-open-menu");*/ }); </script> <script> var busy = false; $(function() { $("#infinity-next-page").addClass("btn").addClass("btn-blue"); $(document).on({ click: function() { if (busy) return false; console.log("1"); $("#nextWrap").find("a").css("opacity", 0.5); busy = true; $.post($(this).attr("href") + "&ajaxNovinki=Y", function(data) { busy = false $(".js-novinki").html($(".js-novinki").html() + data.html); $("#nextWrap").html(data.next); $("#infinity-next-page").addClass("btn").addClass("btn-blue"); //else $("#nextWrap").hide(); }, "json"); return false; } }, "#infinity-next-page"); }); </script> <script> $(document).ready(function() { $("#headfbwin, #feed").click(function() { $(".quest_form").show(); $('input, select').styler(); dh = $(document).height() + "; " + $(".quest_form").height(); h = ($(document).height() / 2) * -1; $(".quest_form").css("bottom", h + "px"); $(".overlay").show(); $(".q_form_close").click(function() { $(".quest_form").hide(); $(".overlay").hide(); }); $(".close2").click(function() { $(".oki").hide(); $(".overlay").hide(); }); $(".overlay").click(function() { $(".quest_form").hide(); $(".oki").hide(); $(".overlay").hide(); }); }); }); </script> <script> function selectHandler() { var $menu = $('.news-categories__list'); var $current = $('.news-categories__current'); var width = 0; if ($menu.outerWidth() > $current.outerWidth()) { $current.width($menu.outerWidth()); $menu.width($menu.outerWidth()); } $('.news-categories__current').click(function() { $menu.toggleClass('active'); }); $('body').click(function(e) { var $target = $(e.target); if (!$target.parents('.news-categories').length) $menu.removeClass('active'); }); $('.news-categories__list > ul').mCustomScrollbar({ theme: 'rounded', scrollInertia: 200 }); $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150); }) } if (window.frameCacheVars !== undefined) { BX.addCustomEvent("onFrameDataReceived", function(json) { selectHandler(); }); } else { BX.ready(function() { selectHandler(); }); } </script> <script async src="/js/html5.js"></script> <script src="/local/templates/medbe4_new/components/bitrix/form.result.new/free_cons/_script.js?dsss" type="text/javascript"></script> </body> </html>