- •Значения флагов разметки документа
- •Vlink - цвет ссылки, уже посещенной в прошлом
- •Vspace - вертикальный отступ
- •Vlink - (visited links color) задает цвет для ранее выбранных ссылок.
- •Верстка таблиц
- •Рамки (фреймы)
- •Расположение рамок примера
- •Картрированные изображения
- •Пример карты на изображении
- •Специальные символы и комментарии
- •Специальные символы
- •Советы по разработке и размещению html - страниц
- •Типовые ошибки html
Типовые ошибки html
Типовые ошибки будут рассмотрены на примере этого кода страницы:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=KOI8">
<title>Home Page</title>
</head>
<body background=c:\..\..\images\buttonweb.gif bgproperties="fixed" topmargin="1" leftmargin="1">
<divalign=center><center>
<palign="center">
<font< A>>
<big><big><em>
"Привет!"
</big></big>
</em></font>
<p>Это моя фотка в возросте 15 лет.
<ahref="myfacebig.htm"><img src="/fase.gif" align="center">
<p>Мои линки.
<ul>
<li><b><font face="AdverGothic">Крэки</font></b>
<li><b><font face="AdverGothic">Тут лежит классный софт!</font></b> <li><b><font face="AdverGothic">МП-3 - рулезз!</font></b>
<li><b><font face="AdverGothic">Примочки к мастдаю!</font></b>
</ul>
</center></div>
</body>
</html>
Ошибки в атрибутах тега <body>
На данной странице в качестве бэкграунда бэкграунд должениспользоваться внешний гиф. Ошибка в описании пути. Путь к файлу описан относительно диска c:\ на локальной машине. Такой бэкграунд не будет отображен у клиента. Правильный код:
background="../../images/buttonweb.gif"
Не совместимые атрибуты.
Не совместимый код: bgproperties="fixed" topmargin="1" leftmargin="1"
NN не понимает ракие расширения, для совместимости кода необходимо дополнительно указать MARGINWIDTH="1" MARGINHEIGHT="1"
Для корректного отображения страницы в броузерах с отключенной графикой желательно также указывать цвет бэкграунда,. bgcolor=""
Избыточное форматирование
Особенность HTML редактора Front Page. Достаточно использовать один из тегов, либо <div align="center"> либо абсолютно идентичный ему <center>
Избыточное форматирование в теге<p>
Данном случае текст уже отцентрирован и нет необходимости добавлять атрибуты с этой целью. Имеет смысл только использование Align="left(right)".
Тег <p> в этих строках не закрыт (</p>), что приведет к неадекватному отображению интервалов между параграфами в NN и IE. Хороший стиль требует закрывать тег <p>
Использование Font Face.
Использование нестандартных шрифтов на страницах приведет к тому, что страница будет или неудобочитаема, или не читаема вовсе. Для совместимости с броузерами с других платформ необходимо использовать вот такую конструкцию:
<font face="Arial, Arial Cur, Helvetica">
Избыточное форматирование стиля шрифта
Конструкция <big><big> избыточна. Предпочтительно использовать для выделения заголовков <H2></H2>, или комбинацию <base font="2" > - сразу за <body> и относительный размер шрифта <font size="+3">.
Квотирование в тексте контента.
Использование кавычек в таком виде ("") в контенте не допустимо. Необходимо указывать &qwote; Привет Пиплы! &qwote;.
Нарушение порядка закрывания тегов
Теги должны закрываться с учетом порядка их вложения. Правильная конструкция
<font><b><em> … контент …</em></b></font>
<image>
Для описания картинок на странице необходимо использовать следующие атрибуты:
width="", height=""
Если их не указать, то страница не будет загружаться до тех пор, пока не загрузится до конца картинка.
border=""
Отсутствие этого атрибута приведет к тому, что вокруг картинки, если "навесить" на нее гиперссылку, появится окантовка с цветом гиперссылки
alt=""
Отсутствие данного атрибута сделает информацию о картинке недоступной в браузерах с отключенной графикой.
Правильный код описания картинки выглядит вот так:
<img src="face.gif" width="454" height="341" alt="Это мое фото" border="0">
Незакрытый анкер, и атрибуты анкера.
Анкер подлежит обязательному закрытию. Хороший стиль программирования подразумевает следующее построение:
<a href="mybigfase.htm" target="_self">… контент ... </a>
Примечание.
Указание тега <base target=""> позволит в дальнейшем не указывать в расширении анкера TARGET.
В случае, если анкер закрыть с переводом строки, или не закрыть его вовсе то NN отрендерит такой код с маленькой черточкой, что сильно заметно на страницах со светлым фоном.
Форматирование списков.
При форматировании списков необходимо закрывать тег <li>, форматирование текста в каждой строке списка имеет смысл только в случае выделения строк. Правильный код.
<ul><font color="" size="">
<li>… контент …</li>
<li>… контент …</li>
<li>… контент …</li>
</font></ul>
Таблица цветов:
Название в CSS |
Образец |
Цвет |
Значение |
Название в IE4 |
aliceBlue |
|
блёкло-синий |
#F0F8FF |
htmlAliceBlue |
antiqueWhite |
|
античный белый |
#FAEBD7 |
htmlAntiqueWhite |
aqua |
|
голубая вода |
#00FFFF |
htmlAqua |
aquamarine |
|
аквамарин |
#7FFFD4 |
htmlAquamarine |
azure |
|
лазурь |
#F0FFFF |
htmlAzure |
beige |
|
бежевый |
#F5F5DC |
htmlBeige |
bisque |
|
бисквитный |
#FFE4C4 |
htmlBisque |
black |
|
чёрный |
#000000 |
htmlBlack |
blanchedalmond |
|
светло-кремовый |
#FFEBCD |
htmlBlanchedAlmond |
blue |
|
синий |
#0000FF |
htmlBlue |
blueviolet |
|
сине-фиолетовый |
#8A2BE2 |
htmlBlueViolet |
brown |
|
коричневый |
#A52A2A |
htmlBrown |
burlywood |
|
старого дерева |
#DEB887 |
htmlBurlyWood |
cadetblue |
|
блёклый серо-синий |
#5F9EA0 |
htmlCadetBlue |
chartreuse |
|
фисташковый |
#7FFF00 |
htmlChartreuse |
chocolate |
|
шоколадный |
#D2691E |
htmlChocolate |
coral |
|
коралловый |
#FF7F50 |
htmlCoral |
cornflowerblue |
|
васильковый |
#6495ED |
htmlCornflowerBlue |
cornsilk |
|
тёмный шёлк |
#FFF8DC |
htmlCornsilk |
crimson |
|
малиновый |
#DC143C |
htmlCrimson |
cyan |
|
Циан |
#00FFFF |
htmlCyan |
darkblue |
|
тёмно-синий |
#00008B |
htmlDarkBlue |
darkcyan |
|
тёмный циан |
#008B8B |
htmlDarkCyan |
darkgoldenrod |
|
тёмный красно-золотой |
#B8860B |
htmlDarkGoldenRod |
darkgrey |
|
тёмно-серый |
#A9A9A9 |
htmlDarkGrey |
darkgreen |
|
тёмно-зелёный |
#006400 |
htmlDarkGreen |
darkkhaki |
|
тёмный хаки |
#BDB76B |
htmlDarkKhaki |
darkmagenta |
|
тёмный фуксин (красный) |
#8B008B |
htmlDarkMagenta |
darkolivegreen |
|
тёмно-оливковый |
#556B2F |
htmlDarkOliveGreen |
darkorange |
|
тёмно-оранжевый |
#FF8C00 |
htmlDarkOrange |
darkorchid |
|
тёмно-орхидейный |
#9932CC |
htmlDarkOrchid |
darkred |
|
тёмно-красный |
#8B0000 |
htmlDarkRed |
darksalmon |
|
тёмно-оранжево-розовый |
#E9967A |
htmlDarkSalmon |
darkseagreen |
|
тёмный морской волны |
#8FBC8F |
htmlDarkSeaGreen |
darkslateblue |
|
тёмный серовато-синий |
#483D8B |
htmlDarkSlateBlue |
darkslategrey |
|
тёмный синевато-серый |
#2F4F4F |
htmlDarkSlateGrey |
darkturquoise |
|
тёмно-бирюзовый |
#00CED1 |
htmlDarkTurquoise |
darkviolet |
|
тёмно-фиолетовый |
#9400D3 |
htmlDarkViolet |
deeppink |
|
тёмно-розовый |
#FF1493 |
htmlDeepPink |
deepskyblue |
|
тёмный небесно-синий |
#00BFFF |
htmlDeepSkyBlue |
dimgrey |
|
тускло-серый |
#696969 |
htmlDimGrey |
dodgerblue |
|
тускло-васильковый |
#1E90FF |
htmlDodgerBlue |
firebrick |
|
огнеупорного кирпича |
#B22222 |
htmlFireBrick |
floralwhite |
|
цветочно-белый |
#FFFAF0 |
htmlFloralWhite |
forestgreen |
|
лесной зелёный |
#228B22 |
htmlForestGreen |
fuchsia |
|
фуксии |
#FF00FF |
htmlFuchsia |
gainsboro |
|
светлый серо-фиолетовый |
#DCDCDC |
htmlGainsboro |
ghostwhite |
|
туманно-белый |
#F8F8FF |
htmlGhostWhite |
gold |
|
золотой |
#FFD700 |
htmlGold |
goldenrod |
|
красного золота |
#DAA520 |
htmlGoldenRod |
grey |
|
серый |
#808080 |
htmlGrey |
green |
|
зелёный |
#008000 |
htmlGreen |
greenyellow |
|
зелёно-жёлтый |
#ADFF2F |
htmlGreenYellow |
honeydew |
|
свежего мёда |
#F0FFF0 |
htmlHoneydew |
hotpink |
|
ярко-розовый |
#FF69B4 |
htmlHotPink |
indianred |
|
тусклый красный |
#CD5C5C |
htmlIndianRed |
indigo |
|
индиго |
#4B0082 |
htmlIndigo |
ivory |
|
слоновой кости |
#FFFFF0 |
htmlIvory |
khaki |
|
хаки |
#F0E68C |
htmlKhaki |
lavender |
|
бледно-лиловый |
#E6E6FA |
htmlLavender |
lavenderblush |
|
бледный розово-лиловый |
#FFF0F5 |
htmlLavenderBlush |
lawngreen |
|
зелёной травы |
#7CFC00 |
htmlLawnGreen |
lemonchiffon |
|
лимонный |
#FFFACD |
htmlLemonChiffon |
lightblue |
|
светло-синий |
#ADD8E6 |
htmlLightBlue |
lightcoral |
|
светло-коралловый |
#F08080 |
htmlLightCoral |
lightcyan |
|
светло-циановый |
#E0FFFF |
htmlLightCyan |
lightgrey |
|
светло-серый |
#D3D3D3 |
htmlLightGrey |
lightgreen |
|
светло-зелёный |
#90EE90 |
htmlLightGreen |
lightpink |
|
светло-розовый |
#FFB6C1 |
htmlLightPink |
lightsalmon |
|
светлый оранжево-розовый |
#FFA07A |
htmlLightSalmon |
lightseagreen |
|
светлый морской волны |
#20B2AA |
htmlLightSeaGreen |
lightskyblue |
|
светлый небесно-синий |
#87CEFA |
htmlLightSkyBlue |
lightslategrey |
|
светлый синевато-серый |
#778899 |
htmlLightSlateGrey |
lightsteelblue |
|
светло-стальной |
#B0C4DE |
htmlLightSteelBlue |
lightyellow |
|
светло-жёлтый |
#FFFFE0 |
htmlLightYellow |
lime |
|
цвет извести |
#00FF00 |
htmlLime |
limegreen |
|
зеленовато-известковый |
#32CD32 |
htmlLimeGreen |
linen |
|
льняной |
#FAF0E6 |
htmlLinen |
magenta |
|
фуксин |
#FF00FF |
htmlMagenta |
maroon |
|
оранжево-розовый |
#800000 |
htmlMaroon |
mediumaquamarine |
|
умеренно-аквамариновый |
#66CDAA |
htmlMediumAquamarine |
mediumblue |
|
умеренно-голубой |
#0000CD |
htmlMediumBlue |
mediumorchid |
|
умеренно-орхидейный |
#BA55D3 |
htmlMediumOrchid |
mediumpurple |
|
умеренно-пурпурный |
#9370DB |
htmlMediumPurple |
mediumseagreen |
|
умеренный морской волны |
#3CB371 |
htmlMediumSeaGreen |
mediumslateblue |
|
умеренный серовато-синий |
#7B68EE |
htmlMediumSlateBlue |
mediumspringgreen |
|
умеренный зеленовато-серый |
#00FA9A |
htmlMediumSpringGreen |
mediumturquoise |
|
умеренно-бирюзовый |
#48D1CC |
htmlMediumTurquoise |
mediumvioletred |
|
умеренный красно-фиолетовый |
#C71585 |
htmlMediumVioletRed |
midnightblue |
|
ночной синий |
#191970 |
htmlMidnightBlue |
mintcream |
|
мятно-кремовый |
#F5FFFA |
htmlMintCream |
mistyrose |
|
туманно-розовый |
#FFE4E1 |
htmlMistyRose |
moccasin |
|
болотный |
#FFE4B5 |
htmlMoccasin |
navajowhite |
|
грязно-серый |
#FFDEAD |
htmlNavajoWhite |
navy |
|
тёмно-синий |
#000080 |
htmlNavy |
oldlace |
|
старого коньяка |
#FDF5E6 |
htmlOldLace |
olive |
|
оливковый |
#808000 |
htmlOlive |
olivedrab |
|
тускло-оливковый |
#6B8E23 |
htmlOliveDrab |
orange |
|
оранжевый |
#FFA500 |
htmlOrange |
orangered |
|
красно-оранжевый |
#FF4500 |
htmlOrangeRed |
orchid |
|
орхидейный |
#DA70D6 |
htmlOrchid |
palegoldenrod |
|
бледно-золотой |
#EEE8AA |
htmlPaleGoldenRod |
palegreen |
|
бледно-зелёный |
#98FB98 |
htmlPaleGreen |
paleturquoise |
|
бледно-бирюзовый |
#AFEEEE |
htmlPaleTurquoise |
palevioletred |
|
бледный красно-фиолетовый |
#DB7093 |
htmlPaleVioletRed |
papayawhip |
|
дыни |
#FFEFD5 |
htmlPapayaWhip |
peachpuff |
|
персиковый |
#FFDAB9 |
htmlPeachPuff |
peru |
|
коричневый |
#CD853F |
htmlPeru |
pink |
|
розовый |
#FFC0CB |
htmlPink |
plum |
|
сливовый |
#DDA0DD |
htmlPlum |
powderblue |
|
туманно-синий |
#B0E0E6 |
htmlPowderBlue |
purple |
|
пурпурный |
#800080 |
htmlPurple |
red |
|
красный |
#FF0000 |
htmlRed |
rosybrown |
|
розово-коричневый |
#BC8F8F |
htmlRosyBrown |
royalblue |
|
королевский голубой |
#4169E1 |
htmlRoyalBlue |
saddlebrown |
|
старой кожи |
#8B4513 |
htmlSaddleBrown |
salmon |
|
оранжево-розовый |
#FA8072 |
htmlSalmon |
sandybrown |
|
рыже-коричневый |
#F4A460 |
htmlSandyBrown |
seagreen |
|
морской волны |
#2E8B57 |
htmlSeaGreen |
seashell |
|
морской пены |
#FFF5EE |
htmlSeaShell |
sienna |
|
охра |
#A0522D |
htmlSienna |
silver |
|
серебристый |
#C0C0C0 |
htmlSilver |
skyblue |
|
небесно-голубой |
#87CEEB |
htmlSkyBlue |
slateblue |
|
серовато-синий |
#6A5ACD |
htmlSlateBlue |
slategrey |
|
синевато-серый |
#708090 |
htmlSlateGrey |
snow |
|
снежный |
#FFFAFA |
htmlSnow |
springgreen |
|
весенний зелёный |
#00FF7F |
htmlSpringGreen |
steelblue |
|
голубовато-стальной |
#4682B4 |
htmlSteelBlue |
tan |
|
желтовато-коричневый |
#D2B48C |
htmlTan |
teal |
|
чайный |
#008080 |
htmlTeal |
thistle |
|
чертополоха |
#D8BFD8 |
htmlThistle |
tomato |
|
томатный |
#FF6347 |
htmlTomato |
turquoise |
|
бирюзовый |
#40E0D0 |
htmlTurquoise |
violet |
|
фиолетовый |
#EE82EE |
htmlViolet |
wheat |
|
пшеничный |
#F5DEB3 |
htmlWheat |
white |
|
белый |
#FFFFFF |
htmlWhite |
whitesmoke |
|
белый дымчатый |
#F5F5F5 |
htmlWhiteSmoke |
yellow |
|
жёлтый |
#FFFF00 |
htmlYellow |
yellowgreen |
|
|
|
|