Как сделать в html документе текст цветным и преобразить свои статьи до неузнаваемости


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

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

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

Первая буква текущего предложения станет большой и синей

Более известным и распространенным среди верстальщиков приемом для видоизменения текста является css. Для установки определенного цвета шрифта в основном используют свойство color. Его описывают для конкретного тега в спецификациях стиля оформления.

Ниже приведен пример форматирования внешнего вида заголовка страницы:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20Видоизменение цветовой палитры при помощи css h2 { color: orange; text-align: center; } p { text-align: center; }

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

Рано или поздно любой администратор задается вопросом, как сделать цветное название сервера Minecraft. Чтобы справиться с поставленной задачей, понадобится умение редактировать такой конфиг, как server.properties.

Осуществляется это только при помощи панели управления, к примеру, на хостинге q2e.ru.

  1. Зайдите на хостинг.
  2. Перейдите в панель управления сервером.
  3. Далее – в раздел с конфигами и выберите из них вышеупомянутый.

Это открывает основной конфиг, и можно приступить к его редактированию.

Чтобы изменить цвет названия сервера, понадобится редактировать строку motd. Она отвечает не только за название, но и описание, которое состоит не более чем из 64 символов. В специальное поле напротив данной строки следует вписать команды, которые имеют вид, к примеру, /u00A71, что позволит сделать название темно-синим.

Перечень цветов

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

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

Таблица цветовых кодов для html

Если в коде примера вы видите такие обозначения, как, например, #F8F8FF, не пугайтесь. Это всего лишь указание цвета. Такой «шифр» используется для упрощения работы с цветовой палитрой при написании веб-страниц.

Таблица цветовых кодов html

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

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

[td]Название

RGBКод для htmlPeachPuff255 218 185#FFDAB9LemonChiffon255 250 205#FFFACDAzure240 255 255#F0FFFFVioletRed208 32 144#D02090

Думаю, после просмотра выше представленной таблицы у некоторых может возникнуть вопрос: «А что такое RGB?». И это правильно!

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

Она относится к аддитивной группе моделей, так как каждый возможный оттенок получается путем добавления значений к черному (который задается цифрами 0 0 0). Таким образом, при изменении значений каждого канала R (отвечает за красный), G (зеленый) и B (синий) изменяется и выходной цвет.

Как оформить цветной текст сообщений в Discord

Разработчики не предусмотрели возможности изменения цвета текста сообщений (этот момент уже отмечался выше). Но имеется скрытая функция форматирования исходного кода и тегов текста. Такая опция Дискорд предусмотрена для программистов, получающих расширенные возможности. Кроме границ блока, которые обозначаются следующим образом — «` …. «`, можно указать язык и вид разметки, на котором написан код.

К примеру, для css (каскадных таблиц стилей) действуют следующие обозначения:

  • «`css;
  • …. ;
  • «`.

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

К примеру, можно создать и отправить следующую разметку:

• «`css;

• text;

• «`.

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

  1. Темно-серый — Brainfuk.
  2. Зеленый — CSS (об этом упоминалось выше).
  3. Синий — Elm.
  4. Бирюзовый — Yalm.
  5. Желтый — HTTP.
  6. Красный — Excel.
  7. Оранжевый — ARM.

Выделение текста при помощи фона

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

Так, задний план лучше всего задавать через элементы css. Для этого чаще всего используют универсальное свойство background. С его помощью можно форматировать одновременно 5 параметров фона: задание картинки или цвета, позиции, повторов или прокручивание вместе с содержимым страницы.

Пример 2

Теперь дополним предыдущий пример полученными знаниями:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 [/td]

Пример body { background:#F0FFFF; } h2 { color: orange; text-align: center; } p { text-align: center; background: #FFDAB9; }

Использование заливки

.gif» /> Эта операция позволит залить фон документа интересующим цветом. Главное отличие заливки от выделения заключается в том, что окрашиваться будет и межстрочный интервал. Делать это следует, если вы хотите, чтобы информация бросалась в глаза. Для заливки потребуется зайти во вкладку «Главная» и найти кнопку похожую на банку с краской, который располагается в блоке «Абзац». После нажатия заливка используется к последнему абзацу документа. Если есть необходимость применить заливку ко всему документу, то следует использовать уже знакомое сочетание клавиш Ctrl+A, которое позволит выбрать весь документ. Чтобы убрать заливку, как в случае с выделением, необходимо выбрать пункт «Нет цвета». Хочется отметить, что получится интересный результат при комбинации всех инструментов с изменением цвета текста.

Использование заливки

.gif» /> Эта операция позволит залить фон документа интересующим цветом. Главное отличие заливки от выделения заключается в том, что окрашиваться будет и межстрочный интервал. Делать это следует, если вы хотите, чтобы информация бросалась в глаза. Для заливки потребуется зайти во вкладку «Главная» и найти кнопку похожую на банку с краской, который располагается в блоке «Абзац». После нажатия заливка используется к последнему абзацу документа. Если есть необходимость применить заливку ко всему документу, то следует использовать уже знакомое сочетание клавиш Ctrl+A, которое позволит выбрать весь документ. Чтобы убрать заливку, как в случае с выделением, необходимо выбрать пункт «Нет цвета». Хочется отметить, что получится интересный результат при комбинации всех инструментов с изменением цвета текста.

Создание заголовков для постов

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

  • Разнообразить предложение подчеркиванием, символами и стикерами.
  • Отредактировать заголовок, расположив его по центру страницы. Это делается пробелами.
  • Написать заголовок крупными буквами.
  • Разделить заголовок и основную часть невидимыми символами.
  • Зачеркивать или отзеркалить отдельные слова.

Способ создания генератора

JavaScript-код генератора

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

Написал функцию

, работающую со
«строковыми объектами»
, внутри которой я прописал
массив
var colors
с допустимыми цветами (их можно менять). Объявил глобальные переменные цвета и размера: var col1
,
var col2
,
var size
, и … … . Короче, проще посмотреть этот код.

Визуально JavaScript-код генератора выглядит так.

JavaScript-код генератора

Чтобы написанный JavaScript-код заработал на веб-странице, нужно было прописать доступ

к нему в
HTML-коде
страницы. Что и было сделано.

HTML-код генератора

Как это было сделано? Видно дальше. А здесь скажу лишь, что использовал для активации скрипта HTML-тэги textarea

.

Важно! Комментарии между тэгами textarea

не писать! Выведет на экран!

Первое

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

можно вписать, что захочется. Выведет на экран!

НО!

Сделать так (прямо на веб-странице) можно только, если НЕ перезагружать

страницу, а использовать кнопку
СТАРТ
. Если страницу
перезагрузить
, то всё вернётся «на круги своя», т.е. будет показываться снова тот пример текста, что введён мною в HTML-код при её вёрстке.

Такое происходит из-за того, что JavaScript — клиентский скрипт, и работает только в браузере пользователя.

И, прежде чем показывать пример работы кода, нужно сказать ещё кое-что!

Это учебная веб-страница, поэтому я не стал «прятать» поля ввода, а если такое вдруг будет нужно, то это очень легко можно сделать.

Для этого нужно всего лишь тэгам textarea

прописать
атрибут
style, в котором указать вот такое правило: style=»visibility:hidden;» (видимость — скрыто).

Элементы, которым мы пропишем упомянутое правило, скроются, но работать будут всё равно!

Каким элементам его пропишем, те и «спрячутся»!

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

Можно ли добавлять ссылки

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

Упоминания о своей странице в посте указываются в конце всего текста. При этом перед ником обязательно добавляется знак @. Также можно рекламировать Инстаграм-магазины или странички отдельных пользователей. Когда кто-нибудь нажмет на ник – он направится на указанную страницу.

Также читайте: BTS в Instagram: жизнь и путь звезд, есть ли аккаунты участников в Инстаграме, обзор

Рейтинг
( 1 оценка, среднее 4 из 5 )
Понравилась статья? Поделиться с друзьями: