Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Типовые ошибки 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        

 


Поделиться с друзьями:

mylektsii.su - Мои Лекции - 2015-2024 год. (0.015 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал