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

Почему в Word инструмент «цвет выделения текста» (highlight) предоставляет выбор только из 15 цветов и чем этот инструмент отличается от инструмента «заливка» (shade)?

Инструмент Word «цвет выделения текста» позволяет выделить текст фоновым цветом «как если бы он был закрашен фломастером»:

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

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

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

1. Вы можете легко найти все фрагменты текста, выделенные «выделением», но не можете так же легко найти фрагменты текста, оформленные с помощью «заливки»:

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

Очень удобно.
Единственно, вызывает удивление крайне малый выбор цветов для выделения текста, а также сами эти цвета. Очень уж яркие и, в большинстве своем, слишком уж тёмные.

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

У нас есть изображение с красной будкой и нам нужно выделить будку. Как сделать это быстро и качественно? Есть несколько способов, но сегодня мы будем использовать функцию Color Range , которая находится в меню «Выделение» (Select) .

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

Кроме того, если в списке «Демонстрация выделения» (Selection Preview) внизу выбрать Black Matte наше выделение немного поблекнет.

Поэтому мы будем использовать другой метод — выбор цвета (Sampled Colors) . Это позволит выбрать несколько оттенков основного цвета. Нажимайте на телефонную будку, и изменяйте значение Fuzziness . Чем выше будет значение, тем больше выделение будет включать в себя оттенков.


Удерживайте клавишу Shift и нажимайте на оттенки красного на будке, чтобы добавить их к выделению.

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

Вы также можете активировать функцию Localized Color Clusters и изменить значение Range Slider . Это может помочь сфокусировать ваш выбор вокруг области с выбранными цветами. Значение диапазона будет уменьшать выделение вокруг объекта.

Даже после того, как вы настроили эти ползунки, вы можете вернуться назад и удерживая Shift + щелкнуть на области, которые, возможно, вы забыли добавить. Ваш результат не будет 100% совершенен, но мы поработает над этим позже.

Когда вас полностью устроит результат, нажмите «OK» и инвертируйте выделение.

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

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

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

Перевод: Дежурка

Приветствую, Друзья.

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

Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.

Сегодня поговорим об HTML. А именно о том, как выделить текст жирным и курсивным начертанием, а также поговорим о выделении цветом.

Выделение текста жирным начертанием.

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

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

Пример кода:

жирный текст

Результат:

жирный текст

В этом случае мы просто выделили текст жирным начертанием и все.

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

В этом случае все абсолютно также как и в случае, с простым выделением жирным, только мы делаем акцент, а не просто выделение.

Пример кода:

Результат:

Все довольно просто, не правда ли?

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

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

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

Пример кода:

текст курсивом

Результат:

текст курсивом

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

Пример кода:

текст, на котором мы сделали акцент

Результат:

текст, на котором мы сделали акцент

И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.

К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.

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

Но добавить недостаточно. Также необходимо указать параметр style , что позволит добавить CSS свойства необходимому тексту, указать само свойство (color), которое поможет задать определенный цвет. И наконец, указать значение для свойства color . Но может возникнуть вопрос: «Что указывать-то?» Указать необходимо HTML-код того цвета в который мы хотим «покрасить» текст. HTML-коды цветов можно найти .

Теперь чтобы было понятней рассмотрим пример.

Пример кода.

текст, который нужно выделить цветом

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

Результат:

текст, который нужно выделить цветом

Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая у Вас CMS.

Надеюсь, я все понятно объяснил.

Удачи, Друзья. Скоро… Будут интересные новости…