Уроки по HTML/Урок №4. Параметры тэга .
|
Урок №4. Параметры тэга <body>. Цели работы: Как уже говорилось на уроке №1, между тэгами <body> …</body> заключается содержательную часть HTML-документа. Большинство тэгов, должно располагаться в данном разделе документа. Тэг <body> имеет ряд параметров, ни один из которых не является обязательным, но может пригодиться для разработки интересно оформленных HTML-страниц. Как Вы уже смогли заметить, если в тэге <body> параметры отсутствуют, то браузер отображает такую страницу белым цветом, текст отображается черным цветом, гиперссылки – синим. Это сделано не просто так. Черный текст на белом фоне считается классикой с точки зрения Web-дизайна (хотя и ужасно заезженной). Итак, мы вплотную подошли к первому параметру тэга <body> bgcolor. Как Вы уже могли догадаться, данный параметр определяет цвет фона HTML – документа (bgcolor, от английского background color задний фон).
В языке HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая гамма базируется на трех основных цветах – красном (Red), зеленом (Green) и синем (Blue) – и обозначается RGB.  Пример 4.1.Действие параметров bgcolor и text. После выполнения в блокноте, сохраните данный пример как «song.htm» и увидите результат. Продолжим знакомство с параметрами тэга . Как известно, во всяком HTML- документе применяются гиперссылки. Существуют несколько параметров, определяющих цвет ссылки.link – определяет цвет еще не просмотренной ссылки, alink – определяет цвет активной ссылки (ссылки, которая работает в данный момент), vlink – определяет цвет уже просмотренной ссылки. Например: <body link=red alink=yellow vlink=blue>. Здесь цвет не просмотренной ссылки — красный, активной – желтый, просмотренной – синий. По умолчанию браузеры выводят не посещенную ссылку — синим цветом, посещенную – фиолетовым. Задание 4.1: Откройте документ «song.htm» и добавьте приведенные выше параметры, определяющие цвет ссылок. Двинемся дальше. Обратимся теперь к параметрам, задающим границы полей HTML – документа. Таких параметров четыре: Задание 4.2: Откройте документ «song.htm» и добавьте приведенные выше параметры, определяющие границы Вашего документа. Поэкспериментируйте с заданием различных значений границ. Теперь поговорим о фоновых изображениях. Наряду с заданием цвета фона, HTML – страницу можно замостить так называемыми «обоями» или фоновым изображением. Для этого используется параметр background тэга <body>. Параметр background указывает на URL – адрес изображения, которое используется в качестве фонового. В качестве изображения должна использоваться «картинка» сохраненная в формате .Gif или .Jpeg (.jpg). Удобно использовать небольшое изображение (например, 5X5 см.) в качестве фонового, т.к. в этом случае оно застилает всю страницу без видимых швов (если оно удачно подготовлено для этих целей). Задание 4.3: Откройте программу Paint, сожмите листок до небольших размеров; затем выберите какой либо цвет (лучше светлый) и, взяв на панели инструментов «распылитель», подготовьте равномерно раскрашенный «кубик». (Лучше использовать программу Photoshop и фильтр Texturizer из набора Texture). Сохраните полученную картинку в формате jpg (пусть ее имя будет pict). После этого откройте Вашу страницу «song.htm» и в тэг <body> вставьте background=pict.jpg. Сохранив изменения, вернитесь на страницу и увидите Ваши «обои». Параметры bgcolor и background могут одновременно присутствовать в тэге <body>, в этом случае доминирующим будет background, а параметр bgcolor будет работать в случае, если пользователь находится в режиме отключения изображений. Для обращения к следующему занятию Вам необходимо пройти тест
|
Конечно, необходимо будет создать гиперссылку, в данном документе, вспомните, как это делается (Урок №3). Если гиперссылка не создана, а в тэге <body> указаны ее параметры, то, естественно, Вы не увидите их действия. Для проверки работы гиперссылки, создайте самостоятельно еще один HTML – документ (с применением всех параметров, изученных на данном уроке) и в нем сделайте гиперссылку на первый файл («song.htm»). Если все работает, поздравляю. Поэкспериментируйте с цветами ссылок, текста и фона.
jpg» align=»center»>на главнуюЦвета элементов
Цвета элементовЦвета элементов
Фоновый цвет и цвет текста для всей страницы назначаются
параметрами тега BODY:
<body bgcolor=»цвет»
text=»цвет»>…тело
страницы…</body>
Цвет шрифта для отдельных участков текста (тег также может
управлять размерами шрифта):
Цвет фона таблицы: (аналогично и для отдельных ячеек, только table меняется на tr,td или th)
<table bgcolor=»цвет»>…тело таблицы(ячейки).
..</table>Цвет базового шрифта для всей страницы также можно определять тегом:
<basefont color=»цвет»> -расположенным в голове страницы (чаще применяется для установки размеров шрифта)
Современные браузеры (от IE 4.0.) распознают 140 предопределенных цветов.
Таблицу с названиями этих цветов Вы можете посмотреть
здесь.
Задание цвета возможно как в именном так и в цифровом выражении, то есть в виде:
<BODY BGCOLOR=tomato> или <font
color=FF34C6>
Могу порекомендовать очень маленькую бесплатную программку «Pixie»
возвращающую цвет пиксела, на котором находится курсор мыши. Удобно при подборе
фона под фотографии, например. Последнюю версию в интернете вы можете найти
здесь.
Для наглядности, я насобирал для вас небольшую коллекцию цветов (Верхняя часть
из них, колонками по три, была выставлена в качестве примера правильного подбора
цветов, в RU/ководстве Артемия Лебедева.)
| d9d9d9 | a3bf00 | ffc200 | 003562 | 0069a3 | 9eb03 |
| a6a6a6 | 008992 | ff0000 | 006d93 | 000000 | c4a100 |
| 9b8f9b | d3c2ad | 000000 | e8aa00 | ffffff | fad69f |
| Примеры цветов в RGB | |||||
|---|---|---|---|---|---|
| f39e77 | a8d59d | 9595c6 | 9999ff | 009933 | 990066 |
| f6b580 | 99cc99 | 968187 | cc0033 | 007299 | 009999 |
| fad295 | 99cccc | ae88b8 | 960018 | e96b9e | ff6633 |
| fff99d | 99ccff | c699bd | 999966 | a9834f | 0099ff |
| c7e19e | 99add5 | ff99cc | 33cc66 | 6699cc | 660066 |
В заключении рассмотрим иерархию цветовых тегов:
<html><head><basefont color=yellow></head>
<body bgcolor=white text=red>
<font color=blue>
Текст под действием тега font
<table border><tr><td>
Текст в таблице<br>
<font color=green>Текст в таблице под действием
тега font</font>
</table>
</font>
</body></html>
Текст под действием тега font
| |
Желтый цвет заданный тегом basefont переназначается
параметром text тега body
на красный*. Любой текст введенный сейчас без дополнительных цветовых тегов
будет отображен красным. Но в предложенном примере такой тег имеется:- <font color=blue>.
Он окрашивает верхнюю строку примера в голубой цвет. В границы тега попадает
и таблица, но на текст находящийся внутри таблицы действие этого тега не
распространяется! Таким образом текст таблицы будет выведен цветом указанным
в параметре text (красным). Если же мы применим
для текста внутри таблицы свой собственный тег<font color=green>
то он будет исправно работать. ЗАКЛЮЧЕНИЕ! Текст внутри таблицы следует снабжать собственными тегами <FONT>.(это касается и размеров) *Тег <basefont> тем не менее остается актуальным из-за возможности управлять размером шрифта по умолчанию, что невозможно для тега BODY. |
HTML: Как изменить цвет фона элемента с помощью CSS.
| от Ghost Together HTML: Как изменить цвет фона элементаБудучи техническим писателем с десятилетним стажем, я часто пытаюсь придумать сложные темы для написания. JavaScript
цикл событий , наследование прототипов и функциональное программирование — все это интересные темы! Сегодня я решил попробовать что-то другое. Почему бы не написать на самую простую вообразимую тему?Ghost Together
·
Подписаться
Чтение: 3 мин.
·
15 апреля 2021 г.
34K подписчиков
Ghost Together @ https://semicolon.dev альтернатива твиттеру. Зарегистрируйтесь, чтобы познакомиться с другими производителями вещей.
Еще от Ghost Together
Ghost Together
Adobe Premiere Pro Fade In & Out
Adobe Premiere Pro — один из самых популярных инструментов для редактирования видео.
Это как Photoshop для видеомонтажа. На мой взгляд, лучшего инструмента нет…Чтение: 3 мин·8 марта 2021 г.
Призраки вместе
Подсказки для портретов в середине пути
Вы пытались создать портреты с помощью ИИ, но не можете выйти за рамки стандартного вида. Если да, то эта короткая статья для вас.
3 минуты чтения · 4 февраля
Ghost Together
Полное руководство по CSS Flex Box
Как и CSS Grid (другое мое руководство), Flex Box довольно сложен, поскольку состоит не из одного, а из двух типов элементов : Контейнер &…
·8 min read·Jul 2, 2018
Ghost Together
HTML: Как изменить цвет ссылки Цвет гиперссылки HTML. Я освещал…
·2 минуты чтения·16 апреля 2021 г.
Просмотреть все от Ghost Together
Рекомендовано на Medium
Enrico Gruner
in
JavaScript in Plain English 9 0011
Макеты сетки CSS
Раскройте всю мощь макетов сетки CSS.
·7 мин чтения·3 декабря 2022 г.
Philosophical Technique
9 проектов, которые помогут вам стать мастером интерфейса в 2023 г. ты новичок или ветеран индустрии, постоянно обновляющий новые концепции, языки и…
·5 минут чтения·3 февраля
Списки
Выбор персонала
302 истории·61 сохранение
Истории, которые помогут вам повысить свой уровень на работе
19 историй·19 сохранений
Самосовершенствование 101
20 историй·48 сохранений
Производительность 101 90 009
20 этажей·43 сохранения
Jennifer Bland
Горизонтальная прокрутка с использованием CSS Grid
В этой предыдущей статье я показал, как сделать горизонтальную прокрутку с помощью flexbox. Недавно меня спросили, как сделать такую же прокрутку, но…
·3 мин. чтения·19 декабря 2022 г.
Кентон де Йонг
5 новых функций, которые изменят то, как вы пишете CSS
CSS существует с 1996 года. изменять. Но обычно CSS меняется довольно медленно. For…
·6 мин. чтения·21 ноября 2022 г.
Дэвид Дал Буско
in
Geek Culture
Sass media query mixins
Миксин медиазапросов Sass, позволяющий избежать дублирования контрольных точек CSS по всему место.
·3 минуты чтения·22 декабря 2022 г.
Christie Tang
in
UX Collective
Адаптивные сетки и как их использовать
Подробное объяснение для дизайнеров о том, как использовать сетки для адаптивного дизайна. дизайн и как все будет масштабироваться между контрольными точками.
·11 минут чтения·18 апреля 2019 г.0011
Преобразование текста в речь
Атрибут BgColor в HTML | Доска Инфинити
Введение
В HTML атрибут bgcolor устанавливает цвет фона элемента HTML.
Атрибут bgcolor можно использовать с тегами HTML, такими как
,,