Советы по разработке и размещению HTML - страниц
Правила хорошего тона при разработке HTML-документов
Производители браузеров часто добавляют к своим творениям поддержку меток, не входящих в текущую спецификацию HTML. Именно поэтому иногда можно встретить страницы, оптимизированные для того или иного браузера. На мой взгляд, это далеко не лучший подход. Однако, как говорил Рэй Брэдбери, единственный способ заставить писателя не писать — это кольт сорок пятого калибра. И писатели пишут...
Не питайте абсолютного доверия к визуальным редакторам HTML
Помните, что большинство визуальных редакторов HTML, хотя и работают в целом корректно, имеют мелкие (а иногда и крупные) недостатки. Отчасти это связано с тем, что HTML с самого начала не был приспособлен для автоматизированной разработки.
Не вписывайте атрибуты, значение которых вы хотите указать то же, что и по умолчанию
Это увеличивает размер вашего файла и доставляет кучу лишней работы.
Атрибут face используйте только при надобности особенного шрифта.
Используйте продуманную иерархию заголовков
Помните, что Ваш документ будет читаться гораздо лучше, если в нем будет четкое разбиение на разделы и подразделы. HTML предоставляет в Ваше распоряжение шесть уровней заголовков. Воспользуйтесь этим богатством в своих интересах — создайте легко читаемый документ с интуитивно ясной структурой.
Следите за вложенностью меток
Современные браузеры способны правильно обработать вложенные метки. Например, вот такой фрагмент HTML-текста
жирный наклонный шрифт
большинство браузеров вполне успешно воспроизведут как жирный наклонный шрифт. Обратите внимание — метки ... в этом фрагменте находятся внутри меток .... Другими словами, метки вложены одна в другую.
Работа браузера, однако, окажется сильно затрудненной, если вложенность окажется нарушенной, например:
вложенность меток нарушена
Соблюдение вложенности — очень важная часть общей культуры написания HTML-текста.
Указывайте альтернативный текст при включении в документ изображений
Помните, что пользователи могут отключать автоматическую загрузку изображений. Не ленитесь подсказать пользователю, чего именно он не видит. Это особенно важно, когда изображения являются гипертекстовыми ссылками.
При разработке крупных документов создавайте оглавления
При написании крупного документа очень полезно поместить в его начале оглавление с гипертекстовыми ссылками на разделы. Это может облегчить пользователю работу с документом, особенно если документ носит справочный характер.
Хорошо продумайте навигацию
Попытайтесь вообразить себе, что в распоряжении пользователя нет кнопки Back. Подумайте о том, как обеспечить пользователю необходимую свободу перемещения в этом случае. Это поможет Вам спроектировать удобную в пользовании коллекцию HTML-документов.
Типовые ошибки HTML
Типовые ошибки будут рассмотрены на примере этого кода страницы:
Home Page
>
"Привет!"
Это моя фотка в возросте 15 лет.
Мои линки.
- Крэки
- Тут лежит классный софт!
- МП-3 - рулезз!
- Примочки к мастдаю!
Ошибки в атрибутах тега
На данной странице в качестве бэкграунда бэкграунд должениспользоваться внешний гиф. Ошибка в описании пути. Путь к файлу описан относительно диска c:\ на локальной машине. Такой бэкграунд не будет отображен у клиента. Правильный код:
background="../../images/buttonweb.gif"
Не совместимые атрибуты.
Не совместимый код: bgproperties="fixed" topmargin="1" leftmargin="1"
NN не понимает ракие расширения, для совместимости кода необходимо дополнительно указать MARGINWIDTH="1" MARGINHEIGHT="1"
Для корректного отображения страницы в броузерах с отключенной графикой желательно также указывать цвет бэкграунда,. bgcolor=""
Избыточное форматирование
Особенность HTML редактора Front Page. Достаточно использовать один из тегов, либо либо абсолютно идентичный ему
Избыточное форматирование в теге
Данном случае текст уже отцентрирован и нет необходимости добавлять атрибуты с этой целью. Имеет смысл только использование Align="left(right)".
Тег в этих строках не закрыт ( ), что приведет к неадекватному отображению интервалов между параграфами в NN и IE. Хороший стиль требует закрывать тег
Использование font Face.
Использование нестандартных шрифтов на страницах приведет к тому, что страница будет или неудобочитаема, или не читаема вовсе. Для совместимости с броузерами с других платформ необходимо использовать вот такую конструкцию:
Избыточное форматирование стиля шрифта
Конструкция избыточна. Предпочтительно использовать для выделения заголовков , или комбинацию - сразу за и относительный размер шрифта .
Квотирование в тексте контента.
Использование кавычек в таком виде ("") в контенте не допустимо. Необходимо указывать &qwote; Привет Пиплы! &qwote;.
Нарушение порядка закрывания тегов
Теги должны закрываться с учетом порядка их вложения. Правильная конструкция
… контент …
Для описания картинок на странице необходимо использовать следующие атрибуты:
width="", height=""
Если их не указать, то страница не будет загружаться до тех пор, пока не загрузится до конца картинка.
border=""
Отсутствие этого атрибута приведет к тому, что вокруг картинки, если "навесить" на нее гиперссылку, появится окантовка с цветом гиперссылки
alt=""
Отсутствие данного атрибута сделает информацию о картинке недоступной в браузерах с отключенной графикой.
Правильный код описания картинки выглядит вот так:
Незакрытый анкер, и атрибуты анкера.
Анкер подлежит обязательному закрытию. Хороший стиль программирования подразумевает следующее построение:
… контент ...
Примечание.
Указание тега позволит в дальнейшем не указывать в расширении анкера TARGET.
В случае, если анкер закрыть с переводом строки, или не закрыть его вовсе то NN отрендерит такой код с маленькой черточкой, что сильно заметно на страницах со светлым фоном.
Форматирование списков.
При форматировании списков необходимо закрывать тег , форматирование текста в каждой строке списка имеет смысл только в случае выделения строк. Правильный код.
- … контент …
- … контент …
- … контент …
Таблица цветов:
Название в 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
жёлто-зелёный
#9ACD32
htmlYellowGreen
Ссылка на страницу: Словарь html - терминов
Теги: Словарь html - терминов
|