Кодировка цветов для html: Основы работы с цветом в html, таблица и коды цветов html

Здесь мы поместили ссылку на изображение и указали, что граница должна быть шириной 10 пикселей и сплошной (solid), а не пунктирной.

Попробуйте вставить этот код в файл index.html и загрузить его в браузере.

Примечание: Обратите внимание, что в этом примере мы используем изображение, которое уже размещено в Интернете.

Вы должны получить такой результат:

Цвет контейнера <div> изменяется с помощью атрибута style и свойства background-color. Это можно сделать следующим образом:

<div></div>

Попробуйте написать этот код в файле index.html и загрузить его в браузере. Вы должны получить такой результат:

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

• black
• white
• gray
• silver
• purple
• red
• fuchsia
• lime
• olive
• green
• yellow
• teal
• navy
• blue
• maroon
• aqua

Цвета также можно указывать в шестнадцатеричном формате. Шестнадцатеричный код цвета состоит из шести буквенно-цифровых символов, перед которыми идет диез, например:

• #0000FF (синий),
• #40E0D0 (бирюзовый)
• #C0C0C0 (серебристый)

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

Теперь у вас есть базовые знания о том, как изменять цвет текста, границ изображения и элементов <div>. Мы вернемся к работе с цветами чуть позже, когда начнем создавать наш веб-сайт.

HTML-код. Коды цветов HTML

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

Основные сведения

Начнем с определения. HTML-код — разметка любой веб-страницы, которая выполнена с помощью языка HTML.

Данный код состоит из тэгов, благодаря которым браузер определяет, как выглядит та или иная страница. Структура его делится на две части: head — заголовок документа, в котором прописывается название страницы, а также информация о самом документе, и body — тело документа, в котором задаются параметры страницы.

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

Тэги

Тэг – элемент языка HTML. С его помощью можно задавать шрифт, цвет, размер текста, вставлять в него таблицы и картинки, форматировать, создавать заголовки, ссылки, а также раскрашивать страницу.

Тэги всегда заключены в угловые скобки — <>, и именно это отличает их от основного текста, который и выводится на страницу при просмотре. Бывают они двух видов — парные и одиночные.

Парные состоят из открывающего тэга и закрывающего, при этом в последнем после левой угловой скобки стоит прямой сленш. Например: &lt;b&gt;текст&lt;/b&gt;.

Между двумя тэгами находится текст, таблица, картинка или иной элемент, который и отображается на веб-странице.

Одиночные же состоят из одного тэга и не содержат в себе прямого слеша. Например: &lt;hr&gt;.

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

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

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

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

Парные:

• &lt; body&gt; — содержит основные параметры документа, такие как фон, цвет ссылок, поля и прочие;
• &lt; p&gt; — обозначает абзац;
• &lt; b&gt; — выделяет текст жирным;
• &lt; i&gt; — курсив;
• &lt; u&gt; — подчеркивает текст;
• &lt; s&gt; — перечеркивает текст;
• &lt; sup&gt; — задает текст как верхний индекс;
• &lt; sub&gt; — нижний индекс;
• &lt; font&gt; — задает парамерты шрифта: размер, шрифт, цвет;
• &lt; div&gt; — с его помощью вы можете выровнять ваш текст;
• &lt; h&gt;- тэг заголовков;
• &lt; a&gt; — с его помощью задаются ссылки;
• &lt; table&gt; — помогает вставить в документ таблицы, с ним связаны тэги &lt; tr&gt; (строка) и &lt; td&gt; (ячейка).

Одиночные:

• &lt;br&gt; — одиночный, переносит текст, следующий после него, на новую страницу;
• &lt;hr&gt; — с его помощью можно вставить в текст горизонтальную черту.

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

Параметры тэгов

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

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

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

• face — задает вид шрифта;
• size — задает размер;
• color — задает цвет;
• align — выравнивание;
• name — имя;
• href — с помощью данного параметра задается адрес ссылки;
• alt — альтернативный текст;
• width — ширина;
• height — высота;
• background — фоновый рисунок;
• bgcolor – фон.

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

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

Таблица цветов

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

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

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

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

Данный код достаточно скопировать и подставить в параметры нужного вам тэга.

Как посмотреть код страницы

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

Но как это сделать? Есть два способа, довольно простых и понятных. Первый – открыть нужную вам страницу и нажать сочетание клавиш Ctrl+U. В новом окне появится исходный код страницы, который вы сможете посмотреть и изучить.

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

Отметим, что, читая код, вы также сможете просматривать комментарии к нему, прописываемые в тэге «Комментарий», который выглядит так: &lt;! &gt;. При этом сам комментарий пишется после восклицательного знака. В браузере он не отображается. А пишется, в основном, для того, чтобы другие программисты и веб-дизайнеры смогли понять, что за блок информации находится ниже, зачем был указан тот или иной кусочек кода.

Выводы

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

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

Определение цветовых кодов HTML

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

Первые два символа представляют значения от 0 до 255 для красного цвета в шестнадцатеричном формате; два средних для зеленого и два последних для синего (RRGGBB). Например, FF равен 255. Следовательно, самый чистый белый цвет — это самая высокая интенсивность красного, зеленого и синего, то есть FFFFFF (красный = 255, зеленый = 255 и синий = 255). Черный — это отсутствие всех RGB (0000000).

  Образец бирки для белого фона 
      
       Образец тега для черного шрифта 
      
       Цвет Код цвета HTML 
     Белый ФФФФФФ
     Черный 000000
        Р-ГБ 
     Красный FF0000
     Зеленый 00FF00
     Синий 0000FF
       C-M-Y-K 
     Голубой 00FFFF
     Пурпурный FF00FF
     Желтый FFFF00
     Черный 000000
       Светлые оттенки 
     Розовый FFCC99
     Светло-зеленый 90EE90
     Голубой 87CEFA
     Слоновая кость FFFFF0
     Хаки F0E68C
     Бежевый F5F5DC
       Средние оттенки 
     Серый 808080
     Коричневый 8B4513
     Оранжевый FF9900
     Серебро C0C0C0
     Золото FFD700
       Темные оттенки 
     Темно-красный 8B0000
     Темно-зеленый 006600
     Темно-синий 0000CC
     Фиолетовый 800080
 

Реклама

Истории PCMag, которые вам понравятся

{X-html заменен}

Выбор редакции

PC Magazine Digital Edition (Открывается в новом окне)

PC Magazine Digital Edition

Читайте отличные истории в автономном режиме на любимом устройстве!

Информационные бюллетени PCMag

Информационные бюллетени PCMag

Наши лучшие истории в вашем почтовом ящике

Подписывайтесь на PCMag

• Фейсбук (Открывается в новом окне)
• Твиттер (Откроется в новом окне)
• Флипборд (Открывается в новом окне)
• Гугл (откроется в новом окне)
• Инстаграм (откроется в новом окне)
• Pinterest (Открывается в новом окне)

PCMag.com является ведущим авторитетом в области технологий, предоставляющим независимые лабораторные обзоры новейших продуктов и услуг.

Как мы тестируем Редакционные принципы

© 1996-2022 Зифф Дэвис. PCMag Digital Group

PCMag, PCMag.com и PC Magazine входят в число зарегистрированных на федеральном уровне товарных знаков Ziff Davis и не могут использоваться третьими лицами без явного разрешения. Отображение сторонних товарных знаков и торговых наименований на этом сайте не обязательно указывает на какую-либо принадлежность или поддержку PCMag. Если вы нажмете на партнерскую ссылку и купите продукт или услугу, этот продавец может заплатить нам комиссию.

• О Зиффе Дэвисе(Открывается в новом окне)
• Политика конфиденциальности(Открывается в новом окне)
• Условия использования(Открывается в новом окне)
• Реклама(Открывается в новом окне)
• Специальные возможности(Открывается в новом окне)
• Не продавать мою личную информацию (откроется в новом окне)

• (Открывается в новом окне) доверительный логотип
• (Открывается в новом окне)

• (Открывается в новом окне) Логотип Зиффмедиа
• (Открывается в новом окне) Логотип Аскмен
• (Открывается в новом окне) Логотип Экстримтек
• (Открывается в новом окне) Логотип ИНГ
• (Открывается в новом окне) Логотип Mashable
• (Открывается в новом окне) Предлагает логотип
• (Открывается в новом окне) Логотип RetailMeNot
• (Открывается в новом окне) Логотип Speedtest

Учебное пособие по HTML 5: Цветовые коды

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

Вот список цветов HTML 5 по именам, включая шестнадцатеричные коды цветов и предварительный просмотр цветов.

4 1

Пример 1. Цвет по имени

 

<тело>
 
Полностью красный цвет
 
 
Полный зеленый цвет
 
 
Полный синий цвет
 
 
Полный желтый цвет
 
 
Полный голубой цвет
 
 
Полный фиолетовый цвет
 

 

 

<тело>
 
Пример одного цвета
 
 
Полностью красный цвет
 
 
Полный зеленый цвет
 
 
Полный синий цвет
 

 

 

<тело>
 
Код комбинированного цвета 
 
 
Красный + зеленый = желтый
 
 
Зеленый + Синий = Голубой
 
 
Красный + синий = фиолетовый
 

 

 

<тело>
 
Полностью красный цвет
 
 
Полный зеленый цвет
 
 
Полный синий цвет
 

 

 

<тело>
 
Красный + зеленый = желтый
 
 
Зеленый + Синий = Голубой
 
 
Красный + синий = фиолетовый
 

 

Пример 5: Один цвет RGBA

 

<тело>
 
Полностью красный цвет
 
 
Полный зеленый цвет
 
 
Полный синий цвет
 

 

Пример 6: 2 цветовая комбинация RGBA

 

<тело>
 
Красный + зеленый = желтый
 
 
Зеленый + Синий = Голубой
 
 
Красный + синий = фиолетовый
 

 

Это простая основа цветовых кодов HTML 5.