Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
HTML позволяет менять цвета некоторых элементов и частей содержимого веб-страницы. Например, так вы можете изменить цвет текста, границы или элемента .
Метод изменения цвета этих частей варьируется от элемента к элементу.
В этом мануале вы узнаете, как изменить цвет текста, границ изображения и элементов , используя названия цветов HTML.
Цвет текстовых элементов (типа
или ) изменяется с помощью атрибута style и свойства color. Это делается следующим образом:
Как изменить цвет текста в ВК!
Попробуйте записать этот код в файл index.html и загрузить его в браузере. Примечание: Если вы работали с этой серией мануалов непоследовательно, рекомендуем обратиться к статье Подготовка HTML-проекта, чтобы создать файл index.html.
Вы должны получить такой результат:
This is blue text.
Цвет границы изображения изменяется с помощью атрибута style и свойства border:
Здесь мы поместили ссылку на изображение и указали, что граница должна быть шириной 10 пикселей и сплошной ( solid ), а не пунктирной.
Попробуйте вставить этот код в файл index.html и загрузить его в браузере.
Примечание: Обратите внимание, что в этом примере мы используем изображение, которое уже размещено в Интернете.
Вы должны получить такой результат:
Цвет контейнера изменяется с помощью атрибута style и свойства background-color. Это можно сделать следующим образом:
Попробуйте написать этот код в файле index.html и загрузить его в браузере. Вы должны получить такой результат:
Во всех этих примерах значение цвета определяется названиями цветов. Попробуйте изменить цвет текста, границ изображения и элементов , используя названия других цветов:
Цвета также можно указывать в шестнадцатеричном формате. Шестнадцатеричный код цвета состоит из шести буквенно-цифровых символов, перед которыми идет диез, например:
- #0000FF (синий),
- #40E0D0 (бирюзовый)
- #C0C0C0 (серебристый)
Примечание: В этой серии мануалов мы продолжим использовать названия цветов, а не шестнадцатеричный код.
Теперь у вас есть базовые знания о том, как изменять цвет текста, границ изображения и элементов . Мы вернемся к работе с цветами чуть позже, когда начнем создавать наш веб-сайт.
Источник: www.8host.com
Цвет шрифта HTML
Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.
Тег font применяется следующим образом:
Конструктор сайтов «Нубекс»
Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:
Конструктор сайтов «Нубекс»
Здесь задается синий цвет для слова, обрамленного тегом font.
Но помимо параметра color, тег имеет и другие атрибуты.
Атрибуты тега FONT
Тег font имеет всего три атрибута:
- color – задает цвет текста;
- size – устанавливает размер текста;
- face – задает семейство шрифтов.
Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).
Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.
Рассмотрим применение этих атрибутов на нашем примере:
Меняем цвет шрифта при помощи HTML
Конструктор сайтов «Нубекс»
Показываю как в html поменять цвет текста и странички
Друзья, в этом уроке я покажу вам, как можно изменить цвет вашей html странички, всего текста или на против, только одного предложения, или слова. Но прежде расскажу и само собой покажу вам, как продолжить редактирование вашей странички. Хотя по факту тут нет ни чего сложного.
Для начала, заходим в папку с файлом index.html, затем наводим на этот файл курсор мыши, кликаем правой кнопкой и во всплывающим меню выбираем пункт открыть с помощью блокнота, пример ниже.
Следует учесть: если в списке приложений не окажется блокнота, то выберите пункт “выбрать другое приложение” и уже в нем найдите блокнот.
Теперь несколько строк по поводу кода. Друзья, для того, чтобы вам было понятно, все новые добавление и изменение в коде я буду выделять для вас красным цветом.
Так вот, думаю для начала я покажу вам, как изменить цвет вашей странички, а после всего текста или отдельного предложение, и так… Открываем файл index.html с помощью блокнота и дописываем к тегу body следующий код, bgcolor=”#00CCFF” Пример чуть ниже.
Эта страница создана за 5 минут bgcolor=»#00CCFF»> Сегодня отличный день.
Я сделал свою первую страничку.
После изменений, наводим курсор мыши на вкладку файл и сохраняем документ.
После всего сделанного, ваша первая страничка должна быть вот такой.
Теперь более подробно о html цветах. Смотрите, если говорить коротко и просто, то у каждого цвета имеется свой код. На вашей первой страничке мы использовали вот этот #00CCFF . Однако, если вы захотите изменить его или подобрать другой, то самый простой способ, это перейти в поиск и посмотреть различные таблицы html цветов, вот ссылка.
А, если у вас возникнет желание, чтобы изменить цвет текста на своей страничке, то для этого к тегу body нужно дописать следующее text=”#FFFF00″, само собой цвет может быть любым. Пример ниже.
Эта страница создана за 5 минут text=»#FFFF00″> Сегодня отличный день.
Я сделал свою первую страничку.
Повторите эту процедуру со своим кодом и посмотрите что у вас получилось, должно быть вот так.
А, если у вас возникнет желание, чтобы выделить отдельно взятое слово или предложение, то тут вам на помощь придет парный тег . Следовательно, текст, который будет находится между этими тегами можно изменять под любой цвет, теперь перейдем от теории к практике. И так, добавьте в свой код новое предложение и измените его цвет, пример ниже.
Эта страница создана за 5 минут Сегодня отличный день.
Я сделал свою первую страничку.
я буду богатым и свободным человеком !
Теперь ваша первая страничка должны быть вот такой.
Видео урок
Источник: seo-skazki.ru