ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.09.2024
Просмотров: 57
Скачиваний: 0
Тег <FONT>...</FONT> определяет дополнительные параметры шрифта и заслуживает более подробного рассмотрения. Этот тег имеет следующий формат:
<FONT SIZE=[+|-]1|2|3|4|5|6|7 COLOR="Код цвета шрифта" FACE="Название шрифта">Текст</FОNТ>
Параметр SIZE тега <FONT> определяет размер шрифта в условных единицах от 1 (самый мелкий) до 7 (самый крупный). Кроме того, размер шрифта может быть указан относительно базового размера, для чего перед значением параметра SIZE следует ввести символ <+> или <->. Например, если стандартный размер шрифта равен 3, то при значении параметра SIZE=-2 результат будет таким же, что и при значении SIZE=1. Подобный подход удобен для уменьшения или увеличения размера шрифта, которым оформлен определенный текстовый фрагмент, относительно размера шрифта основного текста Web-страницы. При этом базовый размер шрифта может быть установлен с использованием тега <BASEFONT>.. .</BASEFONT>, имеющего следующий формат:
<BASEFONT SIZE=1|2|3|4|5|6|7>Текст</BASEFONT>
Значения параметра SIZE задаются аналогично абсолютным значениям этого параметра для тега <FONT>. По умолчанию базовый размер шрифта принимается равным 3.
Параметр COLOR тега <FONT> позволяет указать цвет шрифта. Более подробно использование кодов цвета описано в разделе <Раздел основного текста страницы>.
Значение параметра FACE определяет гарнитуру, или, проще говоря, внешний вид шрифта в броузере. Например, для отображения текста с использованием шрифта Times New Roman, входящего в комплект стандартных шрифтов Windows, следует указать значение параметра FACE="Times New Roman". Чтобы оформить текст с использованием рубленого шрифта (такой шрифт не имеет засечек на концах букв), например, шрифта Arial, следует указать параметр FACE="Arial".
Значением параметра FACE также может являться список названий шрифтов, разделенных занятыми. В таком случае шрифтом текста будет первый имеющийся в системе, в которой выполняется просмотр Web-страницы, из перечисленных в списке. Использование списка шрифтов является более предпочтительным, поскольку Web-страницы предназначены для просмотра множеством людей, имеющих различные модели компьютеров и различные операционные системы. Указанного в значении параметра FACE шрифта может просто не оказаться в системе, на которой будет выполняться просмотр страницы. В таком случае броузер подставит шрифт по умолчанию или же использует какой-либо другой шрифт, который сочтет наиболее близким к указанному. В результате такой подстановки текст страницы может оказаться нечитабельным. Во избежание подобной ситуации следует использовать список близких по виду шрифтов, являющихся стандартными для различных операционных систем. Например, в то время как шрифт Arial широко распространен на компьютерах, работающих под управлением ОС Windows, на Macintosh стандартным рубленым шрифтом является Helvetica.
ПРИМЕР ПРОСТОЙ СТРАНИЧКИ
<HTML>
<HEAD>
<TITLE> Welcome to my home page </TITLE>
</HEAD>
<BODY>
<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички
</BODY>
</HTML>
Текст Содержимое странички
Шаг3
Добавим цвета! Для задания цвета фона документа, цвета текста, ссылок, просмотренных ссылок и ссылок в момент нажатия на них правой кнопкой, используется атрибут тега <BODY> (того самого, с которого начинается описание самой странички). BGCOLOR, TEXT, LINK, VLINK, ALINK соответственно. Для задания цвета используются коды цвета (в кодировке RGB - шесть шестнадцатеричных чисел) или именованные цвета (см. ниже). Например <BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " LINK="# FF0000 " VLINK="# CF2CD4 " ALINK="# C033FF "> Для задания цвета текста непосредственно в документе используется атрибут COLOR в теге <FONT>. Также используется код цвета или именованный цвет.
|
пример тегов
|
|
|||
|
<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font>
|
Поместив текст между тегами ... |
|
||||||||||||||||||||||||||||||||
|
Вы можете использовать для выбора цвета эту таблицу: Коды цветов
|
alrcebtue |
#FOF8FF |
fuchsia |
#FFOOFF |
|
antiguewhite |
#FAEBD7 |
ghostwhite |
#F8F8FF |
|
agua |
#OOFFFF |
gainsboro |
#DCDCDC |
|
aguamarine |
#7FFFD4 |
palegofdenrod |
#EEE8AA |
|
azure |
#FOFFFF |
palegreen |
#98FB98 |
|
beige |
#F5F5DC |
paleturguoise |
#AFEEEE |
|
bisgue |
#FFE4C4 |
palevbletred |
#DB7093 |
|
black |
#000000 |
papayawhip |
#FFEFD5 |
|
blanchedalmond |
#FFEBCD |
reachpuff |
#FFDAB9 |
|
blue |
#OOOOFF |
peru |
#CD853F |
|
blueviolet |
#8A2BE2 |
pink |
#FFCOCB |
|
brown |
#A52A2A |
plum |
#DDAODD |
|
burlywood |
#DEB887 |
powderblue |
#BOEOE б |
|
cadetblue |
#5F9EAO |
purpte |
#800080 |
|
chartreuse |
#7FFFOO |
red |
#FFOOOO |
|
chocolate |
#02691 E |
rosybrown |
#BC8F8F |
|
coral |
#FF7F50 |
royaibtue |
#4169E1 |
|
comtiowerblue |
#6495ED |
saddlebrown |
#884513 |
|
comsilk |
#FFF8DC |
salmon |
#FA8072 |
|
cnmson |
#DC143C |
sandybrown |
#F4A460 |
|
cyan |
#OOFFFF |
seagreen |
#2E8B57 |
|
darkblue |
#000088 |
seashell |
#FFF5EE |
|
darkcyan |
#008888 |
sienna |
#A05220 |
|
darkgoldenrod |
#B88608 |
silver |
#COCOCO |
|
darkgray |
#A9A9A9 |
skyblue |
#87CEEB |
|
darkgreen |
#006400 |
slateblue |
#6A5ACD |
|
darkkhaki |
#BDB768 |
slategray |
#708090 |
|
darkmagenta |
#8B008B |
snow |
#FFFAFA |
|
darkolivegreen |
#556B2F |
springgreen |
#OOFF7F |
|
darkorange |
#FF8COO |
steelbiue |
#4682B4 |
|
darkorchid |
#9932CC |
tan |
#D2B48C |
|
darkred |
#8BOOOO |
teal |
#008080 |
|
darksalmon |
#E9967A |
thistte |
#D8BFD8 |
|
darkseagreen |
#8FBC8F |
tomato |
#FF6347 |
|
darkslateblue |
#483D8B |
turguoise |
#40EODO |
|
darkslategray |
#2F4F4F |
violet |
#EE82EE |
|
darkturguoise |
#OOCCED1 |
wheat |
#F5DEB3 |
|
darkviolet |
#940003 |
whrte |
#FFFFFF |
|
deeppink |
#FF1493 |
whitesmoke |
#F5F5F5 |
|
deepskyblue |
#OOBFFF |
yellow |
#FFFFOO |
|
dimgray |
#696969 |
yelowgreen |
#9ACD32 |
|
dodgerblue |
#1E90FF |
gold |
#FFD700 |
|
firebrick |
#822222 |
goldenrod |
#DAA520 |
|
floratwhite |
#FFFAFO |
gray |
#808080 |
|
forestgreen |
#228822 |
green |
#008000 |
|
greenyeltow |
#ADFF2F |
lightpink |
#FFB6C1 |
|
honeydew |
#FOFFFO |
lightsalmon |
#FFA07A |
|
hotpink |
#FF69B4 |
lightseagreen |
#20B2AA |
|
indianred |
#CD5C5C |
lightskybtue |
#87CEFA |
|
indigo |
#4B0082 |
lightslategra |
#778899 |
|
ivory |
#FFFFFO |
lightsteelblue |
#BOC4DE |
|
khaki |
#FOE68C |
tightyellow |
#FFFFEO |
|
lavender |
#E6E6FA |
lime |
#OOFFOO |
|
lavenderbluch |
#FFFOFF5 |
limegreen |
#32CD32 |
|
lawngreen |
#7CFCOO |
linen |
#FAFOE6 |
|
lemonchiffon |
#FFFACD |
magenta |
#FFOOFF |
|
lightblue |
#ADD8E6 |
maroon |
#800000 |
|
sightcoral |
#F08080 |
mediumaguamarine |
#66CDAA |
|
lightcyan |
#EOFFFF |
mediumblue |
#OOOOCD |
|
lightgoldenrodyellow |
#FAFAD2 |
mediumorchid |
#BA55D3 |
|
lightgreen |
#90EE90 |
mediumpurpie |
#9370DB |
|
lighgtgrey |
#D3D3D3 |
mediumseagreen |
#3CB371 |
|
mistyrose |
#FFE4E1 |
mediumslateblue |
#7B68EE |
|
moccasin |
#FFE4E1 |
mediumsprirggren |
#OOFA9A |
|
navajowhite |
#FFDEAD |
mediumturgi oise |
#48D1CC |
|
navy |
#000080 |
mediumviole red |
#C71585 |
|
oldlace |
#FDF5E6 |
midnightblue |
#191970 |
|
otive |
#808000 |
mintcream |
#F5FFFA |
|
olivedrab |
#6B8E23 |
orange |
#FFA500 |
|
orangered |
#FF4500 |
orchid |
#DA70D6 |
ПРИМЕР ПРОСТОЙ СТРАНИЧКИ
<HTML>
<HEAD>
<TITLE> Welcome to my home page </TITLE>
</HEAD>
<BODY>
<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички
<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font>
</BODY>
</HTML>
А такой вид имеет документ при просмотре через Internet Explorer:
Текст Содержимое странички Поместив текст между тегами ...
Шаг4
А теперь как выглядит программа в HTML-коде, с зеленым цветом фона.
<HTML>
<HEAD>
<TITLE> Welcome to my home page </TITLE>
</HEAD>
<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >
<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички
<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font> </BODY> </HTML>
А такой вид имеет документ при просмотре через Internet Explorer:
Для создания графического фона используются небольшие картинки в формате gif и jpeg. Броузер автоматически заполняет ими весь экран. Они должны быть небольшие и формировать однородный фон, а с помощью небольшой полоски с плавным переходом цвета можно создавать интересный градиентный фон. Экспериментируйте! Для задания фона используется атрибут BACKGROUND тега <BODY>.
Шаг5
А теперь рассмотрим как просто вставить картинку в web-страничку. Для этого лучше всего использовать форматы gif и jpg. Первый популярен из-за возможности использовать прозрачный цвет (тогда изображения могут иметь прозрачные участки), а второй - имеет малый размер и удобен для фотографий. Для вставки картинки используется тег IMG. Его синтаксис следующий:
<IMG SRC="имя файла" ALT="текст" ALIGN=расположение WIDTH=ширина HEIGHT =высота >, где имя файла - это имя картинки. Если она находится в той же директории, что и ваша страничка, то это просто имя файла. Если картинка находится в ином месте (например где-то в Интернете), то указывайте имя с полным путем. текст - это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой броузер так, что тот не показывает картинки). Кроме того, вы увидите этот текст, когда курсор мыши находится над картинкой. расположение - место расположния изображения. Может иметь следующие значения: TOP - последующий текст располагается в верхней части изображения; BOTTOM - последующий текст располагается в нижней части изображения; LEFT - изображение находится в левой части листа, текст обтекает изображение справа; MIDDLE - изображение находится в центре листа, RIGHT - изображение находится в правой части листа, текст обтекает изображение слева. ширина - ширина изображения в пикселях. высота - высота изображения в пикселях. Атрибуты alt, align, width, height являются необязательными.