Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Текста браузером и выводит его так,

Поиск

как определил пользователь. </pre>

<hr>

<p> Направление текста можно изменить

<p>

<bdo dir="rtl"> Направление текста можно изменить </bdo>

<hr width=50%>

</body>

</html>

 

 

Цветовая гамма HTML-документа

 

Использование ключевого слова color тега < font> дает возможность задавать цвет текста (шрифта). Атрибут color может использовать либо название цвета, либо его шестнадцатеричную форму. Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). В HTML шестнадцатеричные цвета обозначаются знаком "решетка"(#)

Например:< font color="red">, либо < font color="#800080">

 

Цвета, их название и шестнадцатеричный код приведены в таблице:

Код Цвет Значение
#000000 ЧЕРНЫЙ black
#FFFFFF БЕЛЫЙ white
#FF0000 КРАСНЫЙ red
#008000 ЗЕЛЕНЫЙ green
#0000FF СИНИЙ blue
#808000 ОЛИВКОВЫЙ olive
#FFFF00 ЖЕЛТЫЙ Yellow
#C0C0C0 СЕРЕБРИСТЫЙ Silver
#808080 СЕРЫЙ Gray
#FF00FF ФУКСИНОВЫЙ Fuchsia
#000080 УЛЬТРАМАРИН Navy
#008080 СИЗЫЙ Teal
#00FF00 СВЕТЛО-ЗЕЛЕНЫЙ Lime
#800080 ПУРПУРНЫЙ Purple
#800000 КАШТАНОВЫЙ maroon

 

Цвет фона задается атрибутом bgcolor в теге < body >.

Например: <body bgcolor="green" >

.

Цветовая гамма HTML-документа определяется также атрибутами, размещенными внутри тега <body>. Вот список этих атрибутов:

text определяет цвет текста документа;

link определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке;

vlink определяет цвет ссылки на документ, который уже был просмотрен ранее;

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

Например:<body text=lime> меняет цвет всего текста на светло-зеленый.

 

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

bgcolor=#FFFFFF цвет фона. Насыщенность красным, зеленым и синим одинакова- FF (это шестнадцатеричное представление числа 255). Результат - белый цвет.

text=#000000 цвет текста. Насыщенность красным, зеленым и синим одинакова - 00 (ноль). Результат - черный цвет.

link=#FF0000 цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим - 00 (ноль). Результат - красный цвет.

 

Кроме того, тег <body> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).

Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.

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

 

Пример использования цветовой гаммы:

 
 


<html>

<head>

<title>Использование цветовой гаммы Пример 7</title>

</head>

<!--Цвет фона серебристый, цвет текста синий-->

<body bgcolor=silver text=blue>

<font size=6 color="red"><b>Ф</b></font>

<font size=5><i>ормат<Font color="green"><Sub>ирование</sub></i>

<font size=2 color="black">т</font>

<font size=3 color="red">е</font>

<font size=4 color="black">к</font>

<font size=5 color="red">с</font>

<font size=6 color="black"></font>т

<font size=7 color="red">а</font>

<body>

</html>

 

 

Списки

 

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

Ненумерованные списки: <ul>... </ul>

Текст, расположенный между тегами <ul> и </ul>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с тега <li>. Например, чтобы создать вот такой список:

· Текст один;

· Текст другой;

· Текст такой;

· Текст эдакий

необходим вот такой HTML-текст:

<ul>

<li> Текст один;

<li> Текст другой;

<li> Текст такой;

<li> Текст эдакий

</ul>

þ Обратите внимание: у тега <li> нет парного закрывающего тега.

Вид маркера можно изменить с помощью параметра TYPE в теге <li>.

Например: <li type="circle">- полный кружок

<li type="square">- квадрат

 

Нумерованные списки: <ol>... </ol>

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

<ol>

<li> Текст один;

<li> Текст другой;

<liLI> Текст такой;

<li> Текст эдакий

</ol>

получится вот такой список:

1. Текст один;

2. Текст другой;

3. Текст такой;

4. Текст эдакий

 

Списки определений: <dl>... </dl>

Список определений несколько отличается от других видов списков. Вместо меток <li> в списках определений используются теги <dt> (от английского definition term — определяемый термин) и <dd> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:

<dl>

<dt>HTML

<dd>Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

<dt>HTML-документ

<dd>Текстовый файл с расширением *.htm или *.html

</dl>

Этот фрагмент будет выведен на экран следующим образом:

 


HTML

Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

 

þ Обратите внимание: точно так же, как теги <li>, теги <dt> и <dd> не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <dl compact>. Например, вот такой фрагмент HTML-текста:

<dl compact>

<dt>А

<dd>Первая буква алфавита

<dt>Б

<dd>Вторая буква алфавита

<dt>В

<dd>Третья буква алфавита

</dl>

будет выведен на экран примерно так:

А

Первая буква алфавита

Б

Вторая буква алфавита

В

Третья буква алфавита

Вложенные списки

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

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

Наши знания о списках можно свести в пример:

<html>

<head>

<title>Пример 8</title>

</head>

<body>

<h1>HTML поддерживает несколько видов списков </h1>

<dl>

<dt>Ненумерованные списки

<dd>Элементы ненумерованного списка выделяются специальным

символом и отступом слева:

<ul>

<li>Элемент 1

<li>Элемент 2

<li>Элемент 3

</ul>

<dt>Нумерованные списки

<dd>Элементы нумерованного списка выделяются отступом слева, а

также нумерацией:

<ol>

<li>Элемент 1

<li>Элемент 2

<li>Элемент 3

</ol>

<dt>Списки определений

<dd>Этот вид списков чуть сложнее, чем два предыдущих, но и

Выглядит более эффектно.

<p>Помните, что списки можно встраивать один в другой, но не

следует закладывать слишком много уровней вложенности. </p>

<p>1ё Обратите внимание, что внутри элемента списка может находиться



Поделиться:


Последнее изменение этой страницы: 2016-08-01; просмотров: 249; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.17.181.112 (0.006 с.)