Главная » Словарь html - терминов
16:37
Словарь html - терминов
Советы по разработке и размещению 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 - терминов
  • Просмотров: 20 | Добавил: creditor | Теги: Словарь html - терминов | Рейтинг: 0.0/0
    Всего комментариев: 0
    avatar
    close