Почти стандартный режим


Содержание

Как сделать таблицу в html. Почти стандартный режим

Л юбая таблица в HTML представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать таблицы в HTML достаточно просто, необходимо лишь представить себе конечную модель. В языке HTML таблицы используются не только для представления данных, их можно применять для размещения текстовых блоков, изображений и т.д. на web-странице, т.е. с их помощью можно создавать макет самой страницы.

Элемент TABLE, создаем таблицу

Для создания таблиц в языке HTML применяется элемент table , а весь код (ее содержимое) таблицы располагается между тегами . Атрибуты этого элемента задают значения для всей таблицы целиком:

  • background — задается изображение (URL), которое может быть фоном для всей таблицы;
  • bgcolor — цвет фона таблицы, задается если не задан фон в виде изображения;
  • border — толщина линий таблицы, если неободимы видимые границы;
  • bordercolor — цвет линий таблицы;
  • cellpadding — расстояние от текста внутри ячеек до границ ячеек;
  • cellspacing — расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);
  • width — задается значение ширины таблицы в px или % .

Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:

bgcolor=»blue» border =»1″ bordercolor =»white» cellpadding =»10″ cellspacing =»2″ w >

Добавляем строку

В каждой таблице должна быть хотя бы одна строка, задается она тегами . В следующем примере смотрим пример добавления строки:

bgcolor=»blue» border =»1″ bordercolor =»white» cellpadding =»10″ cellspacing =»2″ w >

Добавляем ячейки

Ячейки образуют вертикальные столбцы таблицы, обозначаются они тегами . Добавляем к нашей таблице ячейки:

bgcolor=»blue» border =»1″ bordercolor =»white» cellpadding =»10″ cellspacing =»2″ w >

Ячейка №1
Ячейка №2
Ячейка №3

В увидим получившуюся таблицу:

Объединение строк

В некоторых случаях может потребоваться растянуть один столбец на несколько строк, для этого применяется атрибут rowspan , значение которого определяет количество строк, необходимых для объединения. Смотрим пример:

bgcolor=»blue» border =»1″ bordercolor =»white» cellpadding =»10″ cellspacing =»2″ w >

rowspan=»2″ >Строки №1 и №2 объединены
Ячейка№1
Ячейка№2

Ячейка №3
Ячейка №4

Строка №3
Ячейка №5
Ячейка №6

Строки №1 и №2 объединены Ячейка№1 Ячейка№2
Ячейка №3 Ячейка №4
Строка №3 Ячейка №5 Ячейка №6

Объединение столбцов

Столбцы объединяются по такому же принципу, только с использованием атрибута colspan . Смотрим пример:

bgcolor=»blue» border =»1″ bordercolor =»white» cellpadding =»10″ cellspacing =»2″ w >

colspan=»2″ >Столбцы №1 и №2 объединены
Столбец №3

Ячейка №1
Ячейка №2
Ячейка №3

Ячейка №4
Ячейка №5
Ячейка №6

Атрибуты colspan и rowspan можно применять одновременно. В браузере это будет выглядеть так:

А ты попробуй написать код самостоятельно!

Размеры и выравнивание таблицы

Высоту и ширину можно задавать как для всей таблицы в целом, так и для отдельных строк и столбцов делается это спомощью уже знакомых атрибутов width и height , значения задаются как в пикселях, так и в процентах.

Выравнивание таблицы по горизонтали задается атрибутом align , значения тебе уже знакомы: left, center, right . А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td . С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign . Он так же имеет свои значения — вертикальное выравнивание по центру middle , по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).

Фон таблицы

Фоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки, все зависит от того какие цели ты преследуешь. Задается это — для изображения — атрибутом background , в значении которого прописывается путь к необходимому графическому файлу. Для цветового фона — атрибутом bgcolor , здесь значением является наименование цвета.

В заключение

Вот вобщем и все, что необходимо для начального уровня. По окончании раздела о построении таблиц в HTML, заканчивается твое первое знакомство с языком HTML. С помощью таблиц в HTML можно создавать несложные шаблоны web-страниц, так что я предлагаю тебе создать свою первую полноценную уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства!

/ То, без чего не создать сайт: ∼ ∼

Этот режим основан на стандартном режиме с некоторыми исключениями: отображение изображений внутри ячеек таблицы и рисунков друг под другом происходит как в режиме совместимости. Для переключения в почти стандартный режим применяется один из следующих доктайпов.

Для фреймов в HTML:

Для фреймов в XHTML:

Изображения друг под другом

При выводе изображений вертикально с переводом строки через
картинки в почти стандартном режиме выводятся слитно без промежутков. В примере 1.2 показан код для вывода двух изображений.

Изображение в таблице html. Почти стандартный режим

Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?» . В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.

Как создать таблицу используя HTML

HTML-таблицы создаются в четыре шага.

1. На первом шаге в html-коде с помощью парного тега указываем браузеру, что в web-страницу вставлена таблица: . Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.

2. На втором шаге формируем строки таблицы, помещая парные теги внутрь

. Каждый элемент создает отдельную строку:

3. Далее, на третьем шаге формируем ячейки таблицы с помощью парных тегов и , которые помещаются внутрь элемента

. Тег содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:

создает обычную ячейку, а ячейку заголовка , т.е. шапку соответствующего столбца:

4. Ну и на последнем шаге помещаем внутрь элементов

и

Столбец 1 Столбец 2 Столбец 3
Ячейка 1-1 Ячейка 1-2 Ячейка 1-3
Ячейка 2-1 Ячейка 2-2 Ячейка 2-3

Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ.

Текст, который необходимо поместить внутрь ячеек, заключать в необязательно, но, если текст большой, его можно разбить на абзацы, применив тег

Если понадобиться как-то оформить вставляемый текст, то можно использовать .

Кроме текста мы можем помещать в ячейки картинки с помощью тега :


В качестве содержимого ячейки может даже выступать другая таблица. В этом случае создание вложенной таблицы ничем не отличается от создания обычной таблицы. Просто между тегами

и

вставляются теги

и

, и в нее вставляются строки и ячейки.

При создании таблиц необходимо учитывать некоторые правила:

  • для создания таблицы используется только тег
    ;
  • тег
  • может находиться только внутри тега
    ;
  • теги
  • , любое другое содержимое тега игнорируется браузером;
  • содержимое таблицы(текст или картинки) может находиться только в тегах
  • . Причем допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в html коде сразу после тега
    и могут находиться только внутри тега
    и ;
  • ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал);
  • таблица относится к блочным элементам web-страницы;
  • размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось;
  • между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
  • текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру;
  • границы вокруг таблицы и ее ячеек по умолчанию не рисуются.
  • Заголовок таблицы

    Начнем с парного тега , который задает таблице заголовок. Текст заголовка помещается внутрь этого тега, а тот должен находится внутри тега

    . Причем без разницы в каком месте html-кода таблицы поместить тег , браузер все равно отобразит заголовок над таблицей и выровняет по ее центру. Но обычно тег помещают сразу после открывающего тега
    :

    Это таблица

    Ячейка 1.1 Ячейка 1.2
    Ячейка 2.1 Ячейка 2.2

    Секции таблицы

    Таблицу html можно логически разбить на части — секции. Всего существует три вида секций:

    • секция заголовка , в которую помещают ячейки заголовка, которые формируют шапку таблицы;
    • секция тела , в которой располагают ячейки с основными данными;
    • секция завершения , в которую помещают ячейки с итоговыми данными.

    Секция заголовка таблицы формируется с помощью парного тега

    .

    Секцию тела создают парным тегом

    . Одна html таблица может содержать несколько секций тела, что позволяет создавать структурные блоки к которым могут применяться единые стили оформления.

    Секция завершения формируется парным тегом и в пределах одного контейнера

    может быть только одна.

    Все эти парные теги должны содержать теги

    , которые формируют строки, относящиеся к соответствующим секциям:

    Столбец 1 Столбец 2 Столбец 3
    Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
    Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
    Итог 1 Итог 2 Итог 3

    Объединение ячеек таблицы

    Осталось рассказать о самой важной возможности таблиц — объединении ячеек. Для объединения нескольких ячеек в одну используются атрибуты colspan и rowspan тегов

    и . Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:

    1.1 1.2-1.3
    2.1 2.2 2.3
    3.1-4.1 3.2 3.3
    4.2 4.3

    1.1 1.2-1.3
    2.1 2.2 2.3
    3.1-4.1 3.2 3.3
    4.2 4.3

    При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция

    заменяет две ячейки, поэтому в следующей строке должно быть два тега , либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки.

    Пример неправильного html-кода при объединении ячеек:

    ячейка 1.1 ячейка 1.2
    ячейка 2.1 ячейка 2.2

    И результат отображения в браузере:

    Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка.

    Атрибуты тега

    В этом посте мы уже столкнулись с одним атрибутом тега

    . С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.

    Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом

    . Давайте их рассмотрим.

    Атрибут align — задает выравнивание таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.

    Атрибут background , который задает фоновый рисунок к таблице. В качестве значения принимает адрес файла с изображением.

    bgcolor — устанавливает цвет фона таблицы. Можно использовать совместно с атрибутом background.

    Атрибут bordercolor задает цвет рамки таблицы.

    Cellpadding — определяет расстояние между границей ячейки и ее содержимым . Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число.

    Cellspacing — задает расстояние между внешними границами ячеек .

    На этом рассказывать о том как вставить таблицу в html страницу я закончу, только подведу итоги:

    • для вставки таблицы используются теги
    — обозначение таблицы, — добавление строки и , секция завершения и секция тела — ;
  • для объединения ячеек используем атрибуты тега
  • :

    в противном случае, пробел, перевод строки или символы табуляции будут показываться, как тот самый пробел.

    Кроме того, выравнивать содержимое ячейки лучше не через align=»top» в , а добавив valign=»top» в тег

    mustdie forever, а тот факт, что ошибку быстрее скрыть, чем исправить («Проще добавить к тысяче картинок в ячейках быэр чем жать бекспейс и убирать пробелы в этих ячейках после картинок») ещё не означает, что к уже имеющимся ошибкам нужно добавлять новые — практика показывает, что спрятанные ошибки имеют препоганое (но логичное) свойство всплывать потом в самых неожиданных местах.

    Марьяна: очень интересное наблюдение относительно hspace=0, vspace=0 — я никогда не наблюдал, чтобы явное указание нулевых отступов в картинках что-то меняло. Буду благодарен за пример (просто любопытно:-)).

    Владислав Пустынский, вы зря так про
    и бэкспейсы.

    — лиш часный случай.
    Но я все-же решусь отметить, что более общее решение это все-же
    после .
    Вполне типовая задача:

    И независимо ни от чего картинка будет сразу «под таблицей» без всяких отсутпов.
    Хотя, конечно, этот пример не отрицает, что

    надо писать без «энтеров» и пробелов после .

    Владислав Пустынский: Да, я себе буду благодарна тоже:) Как только поймаю — скажу. Как-то я пыталась экспериментировать и ничего не получилось, я засомневалась в своем подозрении, но потом в работе опять несколько раз всплывал такой же случай. На досуге повтыкаю.

    Dmitriy: боюсь, я не вполне понял типовую задачу. В сочетании

    картинка будет сразу под таблицей без всяких отступов в любом случае, ставите Вы разрыв строки после картинки или нет. Другого ждать не приходится: таблица — блочный элемент. Вертикальный отступ между таблицей и картинкой может появиться, лишь если его туда поставить явно (не пишите

    — вставка ячейки;
  • таблица представляет из себя блочные элемент web-страницы;
  • в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
  • таблица может содержать три вида секций: секция заголовка —
  • colspan и rowspan.

    На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч!

    У меня таблица из двух ячеек. Первая ячейка имеет ширину 200px, в нее вставляется изображение размером 200px*1000px, изображение выравнивается по верхнему краю: align=»top», атрибуты cellspacing и cellpadding для всей таблицы установлены «0». Содержимое второй ячейки небольшое, много места не занимает, так что высота таблицы определяется вертикальным размером моего изображения. Но почему-то между нижней границей изображения и нижней границей таблицы появляется небольшой зазор — пикселей пять, хотя, как я сказала, cellpadding=»0″. Откуда берется этот ужасный зазор? У меня изображение является декоративным элементом, оно должно пройти по краю страницы сверзу донизу, этот пустой промежуток все портит.

    Алина, проследите, чтобы вслед за закрывающей скобкой тега сразу шёл закрывающий

    .

    Проще всё равно пользоваться поиском с регэкспами, но предмета спора нет никакого — всё зависит от ситуации и надо использовать любой из двух приемлемых методов (например, если изображение является inline-image, то есть вставляется в строку текста, то
    не спасёт).

    Ладно. Скорее всего, верный совет/ответ дан Алексеем сразу же во втором постинге; конструкции типа

    ! это неправильно! можно только

    ,

    И т. п.!) Мне даже непонятно, на что может повлиять
    после картинки кроме как на положение следующих за картинкой элементов:-) Или не понял я чего.

    После особенно эффективен в тех случаях (и является единственным решением, между нами говоря), когда не вложен ни во что больше, то есть „сам по себе“. Тогда после него не образуется никаких подвисших пробелов и „неправильных“ отступов.

    Самым надёжным способом избежания появления лишних пробелов (согласование четырёх имён в родительном падеже:-)) является нерасстановка этих пробелов в процессе вёрстки страницы (три имени в родительном падеже). Не нужен пробел после картинки — НЕ СТАВЬТЕ ЕГО.

    Сравните конструкции:



    — гадкий промежуток имеется. Мы можем, конечно, поставить после картинки
    . Логики это документу не прибавит, но возникнет угроза, что какой-нибудь броузер завтрашнего дня будет действовать логичнее и не станет по собственному произволу игнорировать пустые строки в самом верху и самом низу таблицы (такое поведение нигде не документировано, насколько мне известно). Не проще ли убить саму ошибку, чем вышибать её другой ошибкой? Кстати, подстановка или вместо
    приводит к тому же «положительному» результату, хотя и нарушает вдобавок ещё и нестинг. :-(

    Ага, пробел убрала, все сразу нормально получилось:)
    Да, а выравнивание у меня в теге ячейки и стояло, ошиблась я с align=»top»

    А вот что за идея поставить
    ?? В чем тут фокус? Когда я у себя поставила
    зазорище стал еще больше, так что я вас не пойму. Изображение не вставляется в строку, оно служит фоном для меню.
    И что такое «регэксп» можно спросить?
    И зря вы, что автора проблема не интересует:)) Автора она очень даже интересует, только у автора интернета нет, вернее, есть, но только ночной, а по ночам сидеть я не привыкла:))
    Простите, еще такой вопрос: а если я свое изображение в качестве фона использую, приписываю его вначале, а потом абсолютным позиционированием накладываю другие изображения-кнопки, то как же у меня после первого изображения может ячейка сразу закрыться? Кстати, еще один есть вопрос по этому поводу: когда я экспериментировала, пытаясь понять, откуда же берется проклятый промежуток (кстати, почему же броузер так интерпретирует разрыв строки?? У меня было:


    ,
    но я читала, что такие разрывы строки броузер вообще никак не интерпретирует, если нет предварительного форматирования

    Это не всегда так, получается?),
    так вот, когда я экспериментировала, то сделала ширину ячейки таблицы больше ширины изображения. И обнаружила, что правее изображения и чуть его ниже идет цветная полоса длиной примерно 5 пикселей. Тогда я убрала все свои кнопки и стала налагать их одну за другой. Поставила для них border=»1″ и обнаружила, что у первых двух изображений-ссылок рамка фиолетовая, а у остальных синяя (что это значит и почему так — не могу понять), и что моя полоска тоже имеет цвет переходящий из фиолетового в синий. И с каждой кнопкой полоска становится все длинее. Что же это такое, братцы?? Тогда я взяла и свое изображение-фон вставила не сразу после открытия ячейки, а перед ее закрытием, т.е. сначала, кнопки абсолютно отпозиционированные, а в конце уже фон. Полоска исчезла. Правда, на мой зазор это не повлияло:) Что это было, мне никто не растолкует??
    И вот еще. Я считала, что раз у моих кнопок нет z-индекса, а фон я вставляю позже, то он должен наложиться на них и все закрыть. Но, очевидно, абсолютно отпозиционированные изображения и просто изображения — вещи качественно разные, и к ним обычный подход не применим, т.е. то, что пишется позже, накладывается сверху, если только у него нет более высокого z-индекса? Или у абсолютно-отпозиционированных изображений этот z-индекс заведомо больше, чем у обычных?

    Алина, первый общий ответ в непонятных случаях, когда сложно описать эффект (со всевозможными режимами позиционирования и наложения) — „покажите ваш код, лучше ссылкой“.

    По поводу нескольких из остальных вопросов я просто нарисую страницу с примерами. Так всем будет лучше.

    Алина: прошу прощения за неверное заключение о пропаже у Вас интереса к вопросу:-)))

    > откуда же берется проклятый промежуток (кстати,
    > почему же броузер так интерпретирует разрыв строки?? У меня было:
    >
    >
    >

    ,
    > но я читала, что такие разрывы строки броузер вообще никак не интерпретирует

    Всё просто. У Вас имеется ячейка. Посмотрите, какие элементы имеются в ячейке. Во первых, это картинка. Во вторых, это два сброса строки после неё. Поскольку дополнительной разметки нет, то броузер воспринимает каждый сброс строки, как пробел, а затем два полученных пробела превращает в один. Таким образом, в ячейке остаётся картинка и следующий за ней пробел, причём для броузера они располагаются в одном ряду. «Убивать» этот последний пробел броузер сам не станет — для него это совершенно законный символ. При вёрстке броузер стремиться максимально сжать ячейку по горизонтали. В связи с этим от разрывает имеющийся ряд из двух элементов, перенося последний из них (т. е. пробел) на новую строку. То есть разрыв рождается не из разрыва строки в Вашем коде, а из дополнительного элемента-пробела, который в Вашем коде присутствует неявно, представленный двумя сбросами строки.

    Вторая часть Вашего вопроса (эксперименты с кодом) требуют источника. Покажите Ваш код, а лучше повесьте плоды экспериментов в Сеть.

    Если Вы не задаёте явно z-индекс, то абсолютно и относительно позиционированные элементы действительно располагаются поверх статических элементов, причём позднее определённые элементы перекрывают раннее определённые и перекрывают все статические элементы (статические элементы не могут перекрываться в принципе, хотя иногда броузеры «глючит» и этот закон нарушается). Порядок перекрытия может быть изменён явным заданием z-индекса в стилях. По умолчанию, у всех элементов 0-й z-индекс, но абсолютно и относительно позиционированные элементы будут всегда располагаться поверх статических независимо от места их определения, если только в z-индексах не прописано иначе.

    > почему неправильно писать:

    ??
    HTML — язык логической разметки, и такая конструкция нарушает логику документа. Любой документ состоит из блочных элементов, внутри блочных элементов располагаются строчные. Строчные элементы не должны располагаться вне блочных. В вышеописанной конструкции строчный элемент
    помещён в то место потока, где по определению отсутствует определение какого-либо блочного элемента, т. е. строчный элемент не является наследником никакого блочного элемента. Исправляю свою же ошибку: по указанной причине конструкция

    тоже неверна.
    Ссылки

    Таблицы — одни из наиболее важных, но в тоже время сложных элементов, которые должны присутствовать на веб-страницах. С их помощью удобно подавать важную и полезную информацию в довольно сжатой форме. Конечно, большинство редакторов в шаблонах, работающих на различных движках, позволяют автоматически вставлять таблицу на страницу сайта или отдельной публикации, но что, если дизайн веб-ресурса, его страницы создаются с нуля? Тогда перед начинающим мастером может встать проблема: как сделать Давайте разберемся, как же правильно и быстро создать данный элемент.

    Выбираем редактор

    В первую очередь, приступая к созданию таблицы, следует определиться с редактором, в котором вы будете работать. Конечно, проще всего выбрать ту программу, в которой вы создаете основной код сайта. Но лучше всего использовать для этих целей старый добрый блокнот.

    Вы можете спросить, для чего усложнять себе жизнь, ведь если делать все сразу в редакторе, то и результат можно увидеть тоже сразу, еще и подсказки программы использовать.

    Да, это действительно так, но, создавая таблицу с чистого листа, вы не только сможете досконально изучить сам принцип ее создания, но и не допустить досадных опечаток и ошибок в основном коде. Иногда случается так, что курсор случайно перемещается вниз, и в процессе написания в код закрадывается ошибка, которую порой сложно найти. Создав таблицу в блокноте, вы сможете скопировать ее шифр и вставить в нужное вам место.

    Алгоритм создания таблицы

    Для начала составим краткий алгоритм, как сделать таблицу в HTML. Это нужно для того, чтобы вы понимали последовательность каждого шага. Затем разберем, как именно выполнять каждый из пунктов.

    Начнем с подготовительных действий.

    1. Рисуем на листе бумаги схематическое изображение таблицы.

    2. Подсчитываем количество строк и ячеек. Если количество последних разное — считаем для каждого рядочка отдельно.

    3. Определяем в строке количество ячеек-заголовков (к примеру, ячейки «№», «Имя» и т. д.).

    4. Записываем основные параметры таблицы — цвет, высоту и ширину, выравнивание текста — в общем, все, что вам покажется нужным.

    1. Вставляем тэги таблицы.

    2. Вставляем тэги строк исходя из того количества, которое вам нужно.

    3. В строках вставляем тэги ячеек (обычных и заглавных), также исходя из того количества, которое записано у вас на бумаге.

    4. Задаем параметры для таблицы в целом.

    5. При надобности задаем показатели для отдельных ячеек.

    6. Заполняем наши ячейки текстом.

    Создаем таблицу

    Итак, вы выбрали редактор, теперь давайте разберемся, как создать таблицу в HTML. Тэг, с помощью которого в код страницы вставляется таблица (

    ), является парным, то есть начинается наша конструкция с данного тэга, а заканчивается

    .

    Вставив тэги таблицы, переходим к созданию строк и ячеек.

    Сразу отметим, что данные элементы также являются парными. Тэг

    задает строки, а — ячейки.

    Для заглавных ячеек следует использовать парный элемент

    .

    Как уже говорилось, первым делом следует оформить строки, затем в них прописывать уже ячейки. Для того чтобы не запутаться, советуем делать либо отступы между каждым блоком в одну-две строчки, либо же прописывать новый блок элементов, используя клавишу «Tab».

    Как это может выглядеть? Примерно так:

    • ;
    • ;
    • ;

    • ; ;

    • ;
    • ; ; .

      Как видите, ничего сложного в этом нет. Главное — не запутаться в количестве строк и ячеек. Иначе таблицу может перекосить.

      Мы с вами разобрали создание таблицы в HTML, теперь можем переходить к параметрам как самой матрицы, так и ее строк и ячеек.

      Параметры таблицы

      Когда код написан, следует обратить внимание на следующие пункты: выравнивание в границ, фона, текста и прочее.

      Параметры таблицы задаются в тэге

      № п/п Фамилия
      1

      ;
    • Иванов
      . К ним относятся:

      1. Border — ширина границ. Задается целым числом. По умолчанию границы любой таблицы равны нулю.

      2. Bordercolor — цвет границы. Может задаваться как шестнадцатеричным кодом цвета (#00008B), так и его названием на английком (DarkBlue). По умолчанию он всегда серый.

      3. Bgcolor — Также задается с помощью кода или названия.

      4. Align — выравнивание текста за таблицей. По умолчанию — по левому краю. Есть следующие варианты данного параметра:

      • left — обтекание справа;
      • right -обтекание слева;
      • center — вывод таблицы по центру без обтекания.

      5. Width и height — ширина и высота таблицы. Может задаваться как в пикселях, так и в процентах (относительно размера браузера окна).

      Прописывая тот или иной показатель, следует обратить особое внимание на оформление. После указания параметра должен идти знак «равно», после которого в кавычках указывается заданное значение.

      Что касается цвета текста, то его оформляют так же, как и обычный текст в формате HTML.

      Пример оформления таблицы:

      ;
    • ;
    • ;

    • ; ;

    • ;
    • ; ; .

      Параметры строк

      Итак, мы уже разобрались, как сделать таблицу в HTML и прописать основные ее параметры. Но что, если нам нужно выделить строку? Оформить ее не так, как основной текст таблицы?


      Параметры строки прописываются в тэге

      точно так же, как и данные таблицы. Для строки могут задаваться следующие переменные:

      1. Уже известные вам border, bordercolor и bgcolor.

      2. Align — выравнивание текста в строке. Может принимать значения left, center и right.

      3. Valign — данный тэг выравнивает текст по вертикали. Принимает следующие значения:

      • top — текст выравнивается по верхней границе;
      • middle — по центру;
      • bottom — по нижней границе.

      Пример оформления строки:

      Параметры ячеек

      И последнее, на что стоит обратить внимание тем, кто желает знать, как сделать таблицу в HTML — параметры отдельных ячеек, как обычных, так и заглавных. По сути, все делается точно так же, как и для таблицы или строки. Единственное, добавляется еще два немаловажных элемента:

      1. Colspan — данный параметр указывает количество столбцов, на которые может простираться ячейка.

      2. Rowspan — указывает уже количество строк, которое занимает данная ячейка.

      Так как оформление ничем не отличается от прописывания строки, то не будем приводить пример кода.

      Выводы

      Сделать таблицу не так сложно, как может показаться на первый взгляд. Главное при написании ее кода — усидчивость и внимание.

      Что касается того, как вставить таблицу в HTML, то ее шифр достаточно скопировать и вставить именно в то место вашей страницы, в котором она, по вашему мнению, должна располагаться.

      Не бойтесь экспериментировать, и вскоре вы в совершенстве овладеете техникой создания таблиц. Успехов!

      Этот режим основан на стандартном режиме с некоторыми исключениями: отображение изображений внутри ячеек таблицы и рисунков друг под другом происходит как в режиме совместимости. Для переключения в почти стандартный режим применяется один из следующих доктайпов.

      Для фреймов в HTML:

      Для фреймов в XHTML:

      Изображения друг под другом

      При выводе изображений вертикально с переводом строки через
      картинки в почти стандартном режиме выводятся слитно без промежутков. В примере 1.2 показан код для вывода двух изображений.

      Сделать таблицу в html. Почти стандартный режим

      У меня таблица из двух ячеек. Первая ячейка имеет ширину 200px, в нее вставляется изображение размером 200px*1000px, изображение выравнивается по верхнему краю: align=»top», атрибуты cellspacing и cellpadding для всей таблицы установлены «0». Содержимое второй ячейки небольшое, много места не занимает, так что высота таблицы определяется вертикальным размером моего изображения. Но почему-то между нижней границей изображения и нижней границей таблицы появляется небольшой зазор — пикселей пять, хотя, как я сказала, cellpadding=»0″. Откуда берется этот ужасный зазор? У меня изображение является декоративным элементом, оно должно пройти по краю страницы сверзу донизу, этот пустой промежуток все портит.

      Алина, проследите, чтобы вслед за закрывающей скобкой тега сразу шёл закрывающий

      :

      в противном случае, пробел, перевод строки или символы табуляции будут показываться, как тот самый пробел.

      Кроме того, выравнивать содержимое ячейки лучше не через align=»top» в , а добавив valign=»top» в тег

      mustdie forever, а тот факт, что ошибку быстрее скрыть, чем исправить («Проще добавить к тысяче картинок в ячейках быэр чем жать бекспейс и убирать пробелы в этих ячейках после картинок») ещё не означает, что к уже имеющимся ошибкам нужно добавлять новые — практика показывает, что спрятанные ошибки имеют препоганое (но логичное) свойство всплывать потом в самых неожиданных местах.

      Марьяна: очень интересное наблюдение относительно hspace=0, vspace=0 — я никогда не наблюдал, чтобы явное указание нулевых отступов в картинках что-то меняло. Буду благодарен за пример (просто любопытно:-)).

      Владислав Пустынский, вы зря так про
      и бэкспейсы.

      — лиш часный случай.
      Но я все-же решусь отметить, что более общее решение это все-же
      после .
      Вполне типовая задача:

      И независимо ни от чего картинка будет сразу «под таблицей» без всяких отсутпов.
      Хотя, конечно, этот пример не отрицает, что

      надо писать без «энтеров» и пробелов после .

      Владислав Пустынский: Да, я себе буду благодарна тоже:) Как только поймаю — скажу. Как-то я пыталась экспериментировать и ничего не получилось, я засомневалась в своем подозрении, но потом в работе опять несколько раз всплывал такой же случай. На досуге повтыкаю.

      Dmitriy: боюсь, я не вполне понял типовую задачу. В сочетании

      картинка будет сразу под таблицей без всяких отступов в любом случае, ставите Вы разрыв строки после картинки или нет. Другого ждать не приходится: таблица — блочный элемент. Вертикальный отступ между таблицей и картинкой может появиться, лишь если его туда поставить явно (не пишите

      № п/п Фамилия
      1

      ;
    • Иванов
      .

      Проще всё равно пользоваться поиском с регэкспами, но предмета спора нет никакого — всё зависит от ситуации и надо использовать любой из двух приемлемых методов (например, если изображение является inline-image, то есть вставляется в строку текста, то
      не спасёт).

      Ладно. Скорее всего, верный совет/ответ дан Алексеем сразу же во втором постинге; конструкции типа

      ! это неправильно! можно только

      ,

      И т. п.!) Мне даже непонятно, на что может повлиять
      после картинки кроме как на положение следующих за картинкой элементов:-) Или не понял я чего.

      После особенно эффективен в тех случаях (и является единственным решением, между нами говоря), когда не вложен ни во что больше, то есть „сам по себе“. Тогда после него не образуется никаких подвисших пробелов и „неправильных“ отступов.

      Самым надёжным способом избежания появления лишних пробелов (согласование четырёх имён в родительном падеже:-)) является нерасстановка этих пробелов в процессе вёрстки страницы (три имени в родительном падеже). Не нужен пробел после картинки — НЕ СТАВЬТЕ ЕГО.

      Сравните конструкции:



      — гадкий промежуток имеется. Мы можем, конечно, поставить после картинки
      . Логики это документу не прибавит, но возникнет угроза, что какой-нибудь броузер завтрашнего дня будет действовать логичнее и не станет по собственному произволу игнорировать пустые строки в самом верху и самом низу таблицы (такое поведение нигде не документировано, насколько мне известно). Не проще ли убить саму ошибку, чем вышибать её другой ошибкой? Кстати, подстановка или вместо
      приводит к тому же «положительному» результату, хотя и нарушает вдобавок ещё и нестинг. :-(

      Ага, пробел убрала, все сразу нормально получилось:)
      Да, а выравнивание у меня в теге ячейки и стояло, ошиблась я с align=»top»

      А вот что за идея поставить
      ?? В чем тут фокус? Когда я у себя поставила
      зазорище стал еще больше, так что я вас не пойму. Изображение не вставляется в строку, оно служит фоном для меню.
      И что такое «регэксп» можно спросить?
      И зря вы, что автора проблема не интересует:)) Автора она очень даже интересует, только у автора интернета нет, вернее, есть, но только ночной, а по ночам сидеть я не привыкла:))
      Простите, еще такой вопрос: а если я свое изображение в качестве фона использую, приписываю его вначале, а потом абсолютным позиционированием накладываю другие изображения-кнопки, то как же у меня после первого изображения может ячейка сразу закрыться? Кстати, еще один есть вопрос по этому поводу: когда я экспериментировала, пытаясь понять, откуда же берется проклятый промежуток (кстати, почему же броузер так интерпретирует разрыв строки?? У меня было:

      ,
      но я читала, что такие разрывы строки броузер вообще никак не интерпретирует, если нет предварительного форматирования

      Это не всегда так, получается?),
      так вот, когда я экспериментировала, то сделала ширину ячейки таблицы больше ширины изображения. И обнаружила, что правее изображения и чуть его ниже идет цветная полоса длиной примерно 5 пикселей. Тогда я убрала все свои кнопки и стала налагать их одну за другой. Поставила для них border=»1″ и обнаружила, что у первых двух изображений-ссылок рамка фиолетовая, а у остальных синяя (что это значит и почему так — не могу понять), и что моя полоска тоже имеет цвет переходящий из фиолетового в синий. И с каждой кнопкой полоска становится все длинее. Что же это такое, братцы?? Тогда я взяла и свое изображение-фон вставила не сразу после открытия ячейки, а перед ее закрытием, т.е. сначала, кнопки абсолютно отпозиционированные, а в конце уже фон. Полоска исчезла. Правда, на мой зазор это не повлияло:) Что это было, мне никто не растолкует??
      И вот еще. Я считала, что раз у моих кнопок нет z-индекса, а фон я вставляю позже, то он должен наложиться на них и все закрыть. Но, очевидно, абсолютно отпозиционированные изображения и просто изображения — вещи качественно разные, и к ним обычный подход не применим, т.е. то, что пишется позже, накладывается сверху, если только у него нет более высокого z-индекса? Или у абсолютно-отпозиционированных изображений этот z-индекс заведомо больше, чем у обычных?

      Алина, первый общий ответ в непонятных случаях, когда сложно описать эффект (со всевозможными режимами позиционирования и наложения) — „покажите ваш код, лучше ссылкой“.

      По поводу нескольких из остальных вопросов я просто нарисую страницу с примерами. Так всем будет лучше.

      Алина: прошу прощения за неверное заключение о пропаже у Вас интереса к вопросу:-)))

      > откуда же берется проклятый промежуток (кстати,
      > почему же броузер так интерпретирует разрыв строки?? У меня было:
      >
      >
      >

      ,
      > но я читала, что такие разрывы строки броузер вообще никак не интерпретирует

      Всё просто. У Вас имеется ячейка. Посмотрите, какие элементы имеются в ячейке. Во первых, это картинка. Во вторых, это два сброса строки после неё. Поскольку дополнительной разметки нет, то броузер воспринимает каждый сброс строки, как пробел, а затем два полученных пробела превращает в один. Таким образом, в ячейке остаётся картинка и следующий за ней пробел, причём для броузера они располагаются в одном ряду. «Убивать» этот последний пробел броузер сам не станет — для него это совершенно законный символ. При вёрстке броузер стремиться максимально сжать ячейку по горизонтали. В связи с этим от разрывает имеющийся ряд из двух элементов, перенося последний из них (т. е. пробел) на новую строку. То есть разрыв рождается не из разрыва строки в Вашем коде, а из дополнительного элемента-пробела, который в Вашем коде присутствует неявно, представленный двумя сбросами строки.

      Вторая часть Вашего вопроса (эксперименты с кодом) требуют источника. Покажите Ваш код, а лучше повесьте плоды экспериментов в Сеть.

      Если Вы не задаёте явно z-индекс, то абсолютно и относительно позиционированные элементы действительно располагаются поверх статических элементов, причём позднее определённые элементы перекрывают раннее определённые и перекрывают все статические элементы (статические элементы не могут перекрываться в принципе, хотя иногда броузеры «глючит» и этот закон нарушается). Порядок перекрытия может быть изменён явным заданием z-индекса в стилях. По умолчанию, у всех элементов 0-й z-индекс, но абсолютно и относительно позиционированные элементы будут всегда располагаться поверх статических независимо от места их определения, если только в z-индексах не прописано иначе.

      > почему неправильно писать:

      ??
      HTML — язык логической разметки, и такая конструкция нарушает логику документа. Любой документ состоит из блочных элементов, внутри блочных элементов располагаются строчные. Строчные элементы не должны располагаться вне блочных. В вышеописанной конструкции строчный элемент
      помещён в то место потока, где по определению отсутствует определение какого-либо блочного элемента, т. е. строчный элемент не является наследником никакого блочного элемента. Исправляю свою же ошибку: по указанной причине конструкция

      тоже неверна.
      Ссылки

      То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
      Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:

      Итак, как в HTML сделать простую таблицу ?
      Для постройки таблицы необходимо использовать три тега:

      TABLE этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример.
      Закрывающий тег обязателен.

      Таблица состоит из ряда

      ряд 1 ряд 1
      ряд 2 ряд 2
      ряд 3 ряд 3
      ячейка 1 ячейка 2
      ячейка 1 ячейка 2
      ячейка 1 ячейка 2

      TR создает новый ряд таблицы. Закрывающий тег обязателен.


      TD создает новую ячейку в ряду. Закрывающий тег обязателен.

      Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:

      Как вставлять таблицу в html. Почти стандартный режим. Атрибуты и свойства тега

      Этот режим основан на стандартном режиме с некоторыми исключениями: отображение изображений внутри ячеек таблицы и рисунков друг под другом происходит как в режиме совместимости. Для переключения в почти стандартный режим применяется один из следующих доктайпов.

      Для фреймов в HTML:

      Для фреймов в XHTML:

      Изображения друг под другом

      При выводе изображений вертикально с переводом строки через
      картинки в почти стандартном режиме выводятся слитно без промежутков. В примере 1.2 показан код для вывода двух изображений.

      Почти стандартный режим

      Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, для оформления ссылок и Бог знает для чего еще.

      Важным составляющим любого изображения является его размер (объем, вес) в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер-качество изображения — это GIF, JPG (JPEG) и PNG.

      Тег или как вставить изображение в HTML?

      Для вставки изображения в HTML страницу используется тег . Это самый обычный встроенный (inline, уровня строки) элемент, то есть он не создает впереди и после себя переводы строк в начало. Но вот содержимого у него не может быть, так как не имеет закрывающего тега и является пустым .

      У тега есть два обязательных атрибута — это src, который указывает путь (URL) к изображению и alt, выводящий альтернативный текст, когда в браузере отключен показ изображений. Если src вы вряд ли забудете указать, ведь без него изображение просто-напросто не загрузится, то про alt очень часто забывают даже опытные вебмастеры.

      Пример вставки изображений в HTML-страницу

      Вставка изображений в HTML

      Такие вот разные птицы.

      Результат в браузере

      Изменение размеров изображений в HTML

      По умолчанию все браузеры показывают изображения в их натуральные размеры. Но при помощи атрибутов width и height тега можно изменить их высоту и ширину. Значения указываются в числах, которые означают размеры в пикселях (ставить в конце чисел буквы px не нужно) или процентах, в этом случае в конце надо поставить знак %.

      Пример изменения размеров изображений

      Изменение размеров изображений

      Результат в браузере

      Не следует злоупотреблять изменением размеров, так как при визуальном уменьшении изображений, их объем в килобайтах не уменьшается, соответственно они загружаются столько же времени. А при увеличении изображений могут появиться размытости и другие искажения.

      Тем не менее, лучше всегда указывать размеры изображений, даже если вы их не меняете. В этом случае браузеры не будут ожидать их полной загрузки, а выделят под них место и пойдут загружать страницу дальше, а изображения загрузят в конце. Это позволяет пользователям не сидеть в томительном ожидании и быстрее начать пользоваться сайтом. Кроме этого, если браузеры сразу будут знать размеры, то при загрузке страницы им не придется по ходу дела подстраиваться под появляющиеся картинки, что поможет избежать ненужных скачков и дерганий окружающих их HTML-элементов.

      В старых версиях HTML для выравнивания изображений у тега имелся уже известный вам атрибут align, но в современном HTML его нет, поэтому будем использовать тоже уже знакомый вам, и, надеюсь, ставший родным style.

      style=»float:left» — прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.

      style=»float:right» — прижимает изображение к правой стороне блока, а текст обтекает его слева.

      Пример выравнивания изображения по левому краю.

      Текст перед картинкой.

      Результат в браузере

      style=»clear:left» — прерывает обтекание изображений выровненных по левой стороне.

      style=»clear:right» — прерывает обтекание изображений выровненных по правой стороне.

      style=»clear:both» — прерывает обтекание изображений выровненных по обеим сторонам.

      Пример прерывания обтекания изображения

      Прерывание обтекания изображений

      Текст перед картинкой.

      Результат в браузере

      Всплывающий текст-подсказка у изображений в HTML

      Как и у многих других HTML-тегов, у тега есть атрибут title, выводящий текстовую подсказку при наведении курсора мыши на изображение.

      Изображения для фона

      Изображения в качестве фонов используются в HTML не менее часто, чем просто изменения цвета фона, которые мы с вами уже проходили. И это вполне логично, ведь с помощью изображений можно сделать неоднотонный и более красочный фон.

      Обычно, в качестве образца для фона применяются небольшие по размеру и объему (в килобайтах) рисунки, а все потому, что фоновые изображения браузеры обрабатывают иначе, чем обычные рисунки. Они берут эту маленькую картинку и замащивают ей, как кирпичиками, весь участок HTML-страницы или всю ее целиком.

      В прошлых версиях HTML у некоторых тегов существовал специальный атрибут background, который позволял делать фоновое изображение. Но в том-то и дело, что только у некоторых, причем далеко не у всех, например у блочного тега

      Обязательно заключайте адрес картинки в одинарные кавычки, как показано. И если вы хотите сделать фоновый рисунок для всей страницы, то используйте style внутри тега .

      Обратите внимание, что точку с запятой посередине ставить не надо, так как оба значения относятся к фону. При такой записи браузер в первую очередь показывает фон-изображение, а не цвет. А теперь представьте, что у вас фоновое изображение — это рисунок в темных тонах, а цвет текста на странице вы сделали белым. И все отлично смотрится. Пока пользователь не отключит в браузере показ изображений. Тогда у него фон станет скорее всего белым, как и ваш цвет текста.

      Пример создания фоновых изображений в HTML

      Фоновые изображения в HTML

      Созвездия в заоблачной дали
      Раздумьям тщетным многих обрекли.
      Одумайся, побереги рассудок —
      Мудрейшие и те в тупик зашли.
      Омар Хайам.

      Чаще всего таблицы в HTML используются не по их прямому назначению — отображению табличных данных, а для создания глобального каркаса страницы. То есть создается таблица, растягивается во всю ширину страницы, а потом в ее левом столбце делают одно меню, в правом — другое, в среднем располагают основную информацию и так далее.

      Существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. По многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее.

      Если вы создаете сайт и хотите сделать его действительно интересным, живым и наглядным, вам непременно нужно будет добавлять в текст своих страниц картинки. В данной статье мы рассмотрим, как вставить картинку в html и xhtml.

      Теги картинок

      Тег, который отвечает за вывод изображения на сайте, является универсальным для всех версий html. Это тег . Он может немного по-разному оформляться, но суть остается прежней.

      Например, в html вы можете просто использовать одиночный тег . В xhtml все теги должны быть закрытыми. Поэтому в конце тега вы должны поставить правый слеш: .

      Атрибуты тега картинок

      При вставке изображений используется несколько атрибутов. Давайте последовательно их рассмотрим.


      • Ключевой атрибут — src. Он указывает адрес картинки, которую вы хотите загрузить на веб-страницу. Пример для html будет выглядеть так: Пример для xhtml будет выглядеть следующим образом:
      • Еще два атрибута касаются размеров изображения. А именно атрибут width предлагает определить ширину, а height, соответственно, высоту картинки. Пример для html: Для xhtml: Дальнейшие атрибуты целесообразно прописывать для какого-то одного языка программирования, так как везде прослеживается четкая аналогия.
      • Атрибут alt должен включать краткое описание картинки. Данный текст появляется в том случае, если картинка не загрузилась или если пользователь ищет информацию через поисковик в разделе «Картинки». Пример строчки кода:
      • Title дает заголовок картинке. Он также важен при поиске пользователем необходимой информации.
      • Атрибут vspace задает отступ по вертикали между картинкой и другими элементами разметки (например, текстом). Значение измеряется в пикселях.
      • Атрибут hspace задает такой же отступ, но уже по горизонтали. Значение также измеряется в пикселях. Пример для двух последних атрибутов:
      • С помощью атрибута border картинка очерчивается рамкой. Если значение специально не выставлено, то по умолчанию значится 0. Пример:

      Дополнительные возможности для картинок

      Картинку можно не только вставить в текст веб-страницы, но и сделать фоном. Картинка-фон это атрибут тега body или стиль css. Подробнее о том, как вставить картинку в фон вашего сайта, вы узнаете в статье .

      Вы можете вставить картинку в таблицу. Тогда картинка будет фоном не для всей страницы, а лишь для определенной области. И при этом место изображения будет зафиксировано, независимо от окружающего текста. Для этого необходимо создать таблицу html. Напомним, тег таблицы — table, тег строки — tr (строка), тег колонки — td.

      Картинку вставляем после тега td. Вот как это будет выглядеть:

      • 2-я ячейка
      • 3-я ячейка
      • 4-я ячейка

      Всем привет!
      Продолжаем усердно изучать основы HTML.
      В этом уроке я расскажу, как вставить картинку в HTML -документ, как сделать картинку фоном , размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
      Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?

      Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.

      Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
      Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG) , GIF и PNG .

      Как сделать картинку фоном в HTML

      Чтобы сделать картинку фоном, для тега нужно прописать атрибут «background» :

      Почти таргетинг

      Позвольте рассказать вам одну историю, случившуюся в 2002 году. (Точная дата подзабыта, но год именно этот.) Как и множество других историй — она длинновата, но, в отличие от некоторых историй — правдива.

      Пока разработчики Нетскейпа готовили новый релиз Мозиллы, браузера, от которого мы «отбранчили» Навигатор, мы в группе Technology Evangelism/Developer Support (TEDS) проверяли его на популярных и партнерских сайтах. На некоторых из них верстка расползалась. В одном случае — очень серьезно.

      Достаточно быстро выяснилось, что проблема в нарезанных картинках, заверстанных в таблицу. По какой-то причине на некоторых сайтах между этими картинками появились промежутки. Покопавшись, причину нашли — движок Гекко поменял механизм работы со строками на более совместимый со спецификацией CSS. Теперь картинки всегда «сидели» на базовой линии (если не указано иное) и нижняя часть строки (та что для нижних выносных элементов шрифта — прим. пер.) всегда присутствовала.

      Это было в новинку для мира браузеров, потому что все браузеры поступали так, как все браузеры всегда поступали — уменьшали ячейку таблицы до размеров картинки, если кроме нее там ничего не было. Проблема только в том, что такое поведение было некорректным. Исправив ошибки имплементации CSS Гекко «поломал» верстку у таких сайтов. То есть, он ломал ее в стандартном режиме. В нестандартном (quirks) Гекко вел себя по-старому и выполнял фокус с уменьшением ячеек.

      Мы связались с разработчиками одного из проблемных сайтов, достаточно известной на то время социальной сетью (вроде того), и объяснили ситуацию. Мы уже знали, что они не могут поменять доктайп, чтобы уйти в нестандартный режим, потому что это поломало бы им другие вещи. Предложить им простой CSS фикс вида td img мы им тоже не могли, потому что вся верстка у них была табличная и таким образом мы бы сместили все картинки, а не только порезанные. Все что мы могли предложить — объяснение ситуации, рекомендацию задать всем нарезанным картинкам CSS класс, «прижимающий» картинки, и уверения в том, что на другие браузеры это влияния не окажет.

      Их ответ: «Нет. Это ваша проблема. Все браузеры делают все правильно, и мы не собираемся возиться со своими темплейтами и добавлять классы только потому, что вы что-то сломали.»

      Истина же состояла в том, что мы вовсе даже чинили это что-то — это все остальные браузеры вели себя неправильно. Но эта истина проблему нашу не решала. Получалось, что мы стоим перед выбором: откатить наши улучшения CSS движка или поломать этот сайт и все ему подобные, которых было тогда достаточно много. Ни то, ни другое радости не вызывало. И поговаривали, что без решения проблемы — апдейтом сайта ли или браузера, — продукт не выйдет. Так обстояли дела.

      Позвольте резюмировать существовавшее положение. Мы:

      1. Улучшили поддержку стандартов в браузере.

      2. Обнаружили, что это портит верстку на определенных сайтах.

      3. Их разработчики наотрез отказались менять что-либо на своей стороне.

      4. Решать проблему должны были мы.

      Откатить улучшение было нельзя — это влияло на отображение текста и задевало кучу других вещей. Убедить разработчиков сайта нам не удавалось, сколько бы мы им не объясняли, что это часть развития веб-стандартов и более правильного поведения браузеров. Перед нами две дороги, и ни по одной из них мы пойти не могли.

      И мы нашли третий вариант: «почти стандартный» режим, в дополнение к обычным стандартному и нестандартному. Да, именно поэтому «почти стандартный» режим и существует. Если я правильно помню обсуждение, в его существовании по большей части виновен я; так что, простите меня все те, кто был вынужден иметь дело с «почти стандартным» режимом в негекковских браузерах.

      Мы сделали так, что «почти стандартный» режим применялся для доктайпа проблемного сайта — это был XHTML DOCTYPE, должен заметить. Попутно мы выпустили специальный DTD для IBM. Они использовали его для валидации своего сайта, где были много всякого HTML-невалидного, и у них тоже была описываемая проблема. Так появился третий режим отображения. А все потому, что некоторые сайты были некорректно устроены и отказались меняться, чтобы соответствовать нашими улучшениям. Мы поступили так чтобы не попортить небольшую (но популярную) часть веба и одновременно улучшить поддержку стандартов.

      (Кстати, этот же случай стал причиной появления статьи “Images, Tables, and Mysterious Gaps“.)

      А теперь возьмите увеличьте эту ситуацию на несколько порядков — вы получите представление о том, с чем приходится иметь дело людям из IE. Ровно как было у нас в Нетскейпе: с одной стороны — свои собственные прошлые ошибки, с другой — отказ сайтов идти навстречу нашему желанию лучше поддерживать стандарты.

      Кто-то сказал, что Майкрософт находится в уникальном положении, которое может позволить ему «встать во главе», пропагандировать среди своих клиентов улучшенные стандарты и корректировку старых сайтов. Все верно. Но что если партнерская корпорация-мультимиллиардер откажется от корректировок и потребует, в соответствий с длиннющим контрактом и его пунктами о серьезных неустойках, сделать так, чтобы новая версия IE не ломала (понимайте «ломала», как хотите) их корпоративный интранет или коммерческий веб-сайт. Один такой случай — достаточное препятствие.

      Все наши публикации на DevEdge, активная помощь сайтам в апдейтах их кода, CSS и JS для работы с Гекко (так чтобы в других браузерах ничего не ломалось) и помощь в процессе улучшения поддержки стандартов в Гекко не смогли помочь нам преодолеть это препятствие. Пришлось идти в обход.

      Оглядываясь назад, могу предположить, что этот опыт подсознательно повлиял на мое согласие с предложением браузерного таргетинга, потому что в определенном смысле это именно то, что мы сделали с Мозиллой в схожих условиях. Просто мы это сделали более неявным и ненадежным способом, привязав все к определенному доктайпу вместо какого-нибудь надежного якоря. Если бы мы могли предложить тому сайту (и всем подобным) простой способ попросить «отрисовать как Мозилла 0.9» (или как что угодно еще) вверху страницы или в заголовках сервера — они могли бы и согласиться.

      А что если бы мы предложили, а они бы отказались и опять поставили бы нас перед выбором откатить улучшения или исправить браузер — настроили бы мы все под какую-то одну определенную версию Мозиллы вместо последней и лучшей? Мой внутренний идеалист хочет думать, что нет. Внутренний прагматик кивает, что да. А что еще мы могли бы сделать в этих обстоятельствах? Выпустить браузер, который сломал бы сайт, входящий в десятку популярнейших, в надежде, что они там смирятся с тем, что таки уже выпущено на свободу? Зная, что это заметным образом, а иногда и очень серьезно испортит процесс веб-серфинга для наших юзеров? Нет. Мы бы выпустили продукт без улучшений по части CSS или мы бы использовали установили по умолчанию плохой таргетинг. У нас не было тогда таргетинга версий, но мы сделали все то же самое, просто повесили все на доктайп.

      Кратковременное решение кратковременной проблемы? Да. Но если бы мы этого не сделали, сколько еще продолжалась бы плохая поддержка стандартов Нетскейпом/Мозиллой в ожидании того дня, когда можно будет вернуть это улучшение, не ломая кучу сайтов на глазах многочисленных пользователей? Возможно годы. Потому мы и применили слабое подобие таргетинга версий, чтобы иметь возможность улучшить поддержку стандартов побыстрее. И было это более пяти лет назад.

      Так что, может быть я сильнее сочувствую затруднениям IE и предложенному ими решению, потому что сам прошел через подобное. Не в такой степени, но дилемма казалась не менее удручающей, несмотря на разность масштабов. Это стоит учитывать, оценивая что я сказал и скажу по данной теме.

      Изучаем CSS. Почти стандартный режим браузера и переходный доктайп.

      29.05.2020
      И
      Комментариев нет

      Тематическая группа (веб-дизайн): https://vk.com/zametkipohtml
      Официальный паблик в ВК: https://vk.com/zametkinapolyah
      Рубрика по теме в блоге: http://zametkinapolyah.ru/verstka-sajtov
      Не забудь подписаться и нажать палец вверх: https://www.youtube.com/user/zametkinapolyahru

      Помощь проекту:
      WMR: R288272666982
      WMZ: Z293550531456
      Яндекс.Деньги: 410011531129223

      Данный режим основан на стандартном режиме работы браузера, но есть одно исключение, которое заключается в отображении изображения на веб-странице.
      Чтобы переключить браузер в этот режим, необходимо использовать один из следующих доктайпов. Для HTML и XHTML соответственно:
      !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
      “http://www.w3.org/TR/html4/loose.dtd”
      !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
      Для фреймов в HTML и XHTML:
      !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
      “http://www.w3.org/TR/html4/frameset.dtd”
      !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
      Разговор про особенности данного режима мы продолжим, когда поговорим о работе с изображениями.

      Также, используя переходный DOCTYPE вы используете менее требовательный синтаксис языка HTML, при таком доктайпе можно использовать все теги и атрибуты языка, в том числе устаревшие и запрещенные.
      Никакого особого смысла у переходного доктайпа нет, используется лишь для того, чтобы облегчить новичкам знакомство с HTML и CSS. Также стоит заметить: если вы используете строгий синтаксис языка HTML, то старайтесь избегать атрибут target (код будет не валидным), а если вы используете переходный доктайп, то использование атрибута target допускается и ваш код успешно пройдет проверку на валидацию.

      Изучаем CSS. Почти стандартный режим браузера и переходный доктайп.

      29.05.2020
      И
      Комментариев нет

      Тематическая группа (веб-дизайн): https://vk.com/zametkipohtml
      Официальный паблик в ВК: https://vk.com/zametkinapolyah
      Рубрика по теме в блоге: http://zametkinapolyah.ru/verstka-sajtov
      Не забудь подписаться и нажать палец вверх: https://www.youtube.com/user/zametkinapolyahru

      Помощь проекту:
      WMR: R288272666982
      WMZ: Z293550531456
      Яндекс.Деньги: 410011531129223

      Данный режим основан на стандартном режиме работы браузера, но есть одно исключение, которое заключается в отображении изображения на веб-странице.
      Чтобы переключить браузер в этот режим, необходимо использовать один из следующих доктайпов. Для HTML и XHTML соответственно:
      !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
      “http://www.w3.org/TR/html4/loose.dtd”
      !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
      Для фреймов в HTML и XHTML:
      !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
      “http://www.w3.org/TR/html4/frameset.dtd”
      !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
      Разговор про особенности данного режима мы продолжим, когда поговорим о работе с изображениями.

      Также, используя переходный DOCTYPE вы используете менее требовательный синтаксис языка HTML, при таком доктайпе можно использовать все теги и атрибуты языка, в том числе устаревшие и запрещенные.
      Никакого особого смысла у переходного доктайпа нет, используется лишь для того, чтобы облегчить новичкам знакомство с HTML и CSS. Также стоит заметить: если вы используете строгий синтаксис языка HTML, то старайтесь избегать атрибут target (код будет не валидным), а если вы используете переходный доктайп, то использование атрибута target допускается и ваш код успешно пройдет проверку на валидацию.

      Почти стандартный режим

      Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, для оформления ссылок и Бог знает для чего еще.

      Важным составляющим любого изображения является его размер (объем, вес) в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер-качество изображения — это GIF, JPG (JPEG) и PNG.


      Тег или как вставить изображение в HTML?

      Для вставки изображения в HTML страницу используется тег . Это самый обычный встроенный (inline, уровня строки) элемент, то есть он не создает впереди и после себя переводы строк в начало. Но вот содержимого у него не может быть, так как не имеет закрывающего тега и является пустым .

      У тега есть два обязательных атрибута — это src, который указывает путь (URL) к изображению и alt, выводящий альтернативный текст, когда в браузере отключен показ изображений. Если src вы вряд ли забудете указать, ведь без него изображение просто-напросто не загрузится, то про alt очень часто забывают даже опытные вебмастеры.

      Пример вставки изображений в HTML-страницу

      Вставка изображений в HTML

      Такие вот разные птицы.

      Результат в браузере

      Изменение размеров изображений в HTML

      По умолчанию все браузеры показывают изображения в их натуральные размеры. Но при помощи атрибутов width и height тега можно изменить их высоту и ширину. Значения указываются в числах, которые означают размеры в пикселях (ставить в конце чисел буквы px не нужно) или процентах, в этом случае в конце надо поставить знак %.

      Пример изменения размеров изображений

      Изменение размеров изображений

      Результат в браузере

      Не следует злоупотреблять изменением размеров, так как при визуальном уменьшении изображений, их объем в килобайтах не уменьшается, соответственно они загружаются столько же времени. А при увеличении изображений могут появиться размытости и другие искажения.

      Тем не менее, лучше всегда указывать размеры изображений, даже если вы их не меняете. В этом случае браузеры не будут ожидать их полной загрузки, а выделят под них место и пойдут загружать страницу дальше, а изображения загрузят в конце. Это позволяет пользователям не сидеть в томительном ожидании и быстрее начать пользоваться сайтом. Кроме этого, если браузеры сразу будут знать размеры, то при загрузке страницы им не придется по ходу дела подстраиваться под появляющиеся картинки, что поможет избежать ненужных скачков и дерганий окружающих их HTML-элементов.

      В старых версиях HTML для выравнивания изображений у тега имелся уже известный вам атрибут align, но в современном HTML его нет, поэтому будем использовать тоже уже знакомый вам, и, надеюсь, ставший родным style.

      style=»float:left» — прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.

      style=»float:right» — прижимает изображение к правой стороне блока, а текст обтекает его слева.

      Пример выравнивания изображения по левому краю.

      Текст перед картинкой.

      Результат в браузере

      style=»clear:left» — прерывает обтекание изображений выровненных по левой стороне.

      style=»clear:right» — прерывает обтекание изображений выровненных по правой стороне.

      style=»clear:both» — прерывает обтекание изображений выровненных по обеим сторонам.

      Пример прерывания обтекания изображения

      Прерывание обтекания изображений

      Текст перед картинкой.

      Результат в браузере

      Всплывающий текст-подсказка у изображений в HTML

      Как и у многих других HTML-тегов, у тега есть атрибут title, выводящий текстовую подсказку при наведении курсора мыши на изображение.

      Изображения для фона

      Изображения в качестве фонов используются в HTML не менее часто, чем просто изменения цвета фона, которые мы с вами уже проходили. И это вполне логично, ведь с помощью изображений можно сделать неоднотонный и более красочный фон.

      Обычно, в качестве образца для фона применяются небольшие по размеру и объему (в килобайтах) рисунки, а все потому, что фоновые изображения браузеры обрабатывают иначе, чем обычные рисунки. Они берут эту маленькую картинку и замащивают ей, как кирпичиками, весь участок HTML-страницы или всю ее целиком.

      В прошлых версиях HTML у некоторых тегов существовал специальный атрибут background, который позволял делать фоновое изображение. Но в том-то и дело, что только у некоторых, причем далеко не у всех, например у блочного тега

      Обязательно заключайте адрес картинки в одинарные кавычки, как показано. И если вы хотите сделать фоновый рисунок для всей страницы, то используйте style внутри тега .

      Обратите внимание, что точку с запятой посередине ставить не надо, так как оба значения относятся к фону. При такой записи браузер в первую очередь показывает фон-изображение, а не цвет. А теперь представьте, что у вас фоновое изображение — это рисунок в темных тонах, а цвет текста на странице вы сделали белым. И все отлично смотрится. Пока пользователь не отключит в браузере показ изображений. Тогда у него фон станет скорее всего белым, как и ваш цвет текста.

      Пример создания фоновых изображений в HTML

      Фоновые изображения в HTML

      Созвездия в заоблачной дали
      Раздумьям тщетным многих обрекли.
      Одумайся, побереги рассудок —
      Мудрейшие и те в тупик зашли.
      Омар Хайам.

      Чаще всего таблицы в HTML используются не по их прямому назначению — отображению табличных данных, а для создания глобального каркаса страницы. То есть создается таблица, растягивается во всю ширину страницы, а потом в ее левом столбце делают одно меню, в правом — другое, в среднем располагают основную информацию и так далее.

      Существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. По многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее.

      Если вы создаете сайт и хотите сделать его действительно интересным, живым и наглядным, вам непременно нужно будет добавлять в текст своих страниц картинки. В данной статье мы рассмотрим, как вставить картинку в html и xhtml.

      Теги картинок

      Тег, который отвечает за вывод изображения на сайте, является универсальным для всех версий html. Это тег . Он может немного по-разному оформляться, но суть остается прежней.

      Например, в html вы можете просто использовать одиночный тег . В xhtml все теги должны быть закрытыми. Поэтому в конце тега вы должны поставить правый слеш: .

      Атрибуты тега картинок

      При вставке изображений используется несколько атрибутов. Давайте последовательно их рассмотрим.

      • Ключевой атрибут — src. Он указывает адрес картинки, которую вы хотите загрузить на веб-страницу. Пример для html будет выглядеть так: Пример для xhtml будет выглядеть следующим образом:
      • Еще два атрибута касаются размеров изображения. А именно атрибут width предлагает определить ширину, а height, соответственно, высоту картинки. Пример для html: Для xhtml: Дальнейшие атрибуты целесообразно прописывать для какого-то одного языка программирования, так как везде прослеживается четкая аналогия.
      • Атрибут alt должен включать краткое описание картинки. Данный текст появляется в том случае, если картинка не загрузилась или если пользователь ищет информацию через поисковик в разделе «Картинки». Пример строчки кода:
      • Title дает заголовок картинке. Он также важен при поиске пользователем необходимой информации.
      • Атрибут vspace задает отступ по вертикали между картинкой и другими элементами разметки (например, текстом). Значение измеряется в пикселях.
      • Атрибут hspace задает такой же отступ, но уже по горизонтали. Значение также измеряется в пикселях. Пример для двух последних атрибутов:
      • С помощью атрибута border картинка очерчивается рамкой. Если значение специально не выставлено, то по умолчанию значится 0. Пример:

      Дополнительные возможности для картинок

      Картинку можно не только вставить в текст веб-страницы, но и сделать фоном. Картинка-фон это атрибут тега body или стиль css. Подробнее о том, как вставить картинку в фон вашего сайта, вы узнаете в статье .

      Вы можете вставить картинку в таблицу. Тогда картинка будет фоном не для всей страницы, а лишь для определенной области. И при этом место изображения будет зафиксировано, независимо от окружающего текста. Для этого необходимо создать таблицу html. Напомним, тег таблицы — table, тег строки — tr (строка), тег колонки — td.

      Картинку вставляем после тега td. Вот как это будет выглядеть:

      • 2-я ячейка
      • 3-я ячейка
      • 4-я ячейка

      Всем привет!
      Продолжаем усердно изучать основы HTML.
      В этом уроке я расскажу, как вставить картинку в HTML -документ, как сделать картинку фоном , размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
      Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?

      Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.


      Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
      Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG) , GIF и PNG .

      Как сделать картинку фоном в HTML

      Чтобы сделать картинку фоном, для тега нужно прописать атрибут «background» :

      Что всё это значит? HTML: Все о ссылках «A HREF REL. Почти стандартный режим

      В этой конфигурации содержание для компьютеров находится на странице с одним URL, а аналогичный контент, оптимизированный для мобильных устройств, располагается по другому адресу.

      Как правило, в таких случаях страницы для компьютеров размещаются в домене www.example.com , а соответствующие страницы для мобильных устройств – в домене m.example.com . Google не отдает предпочтения тому или иному формату URL. Главное требование – страницы должны быть доступны для агентов пользователя Googlebot.

      В этой конфигурации содержание для компьютеров отличается от содержания для мобильных устройств (иногда к ним относят и планшеты), и эти варианты кода находятся по разным URL.

      Кратко

      Указывайте, как соотносятся два URL, при помощи тегов
      с элементами rel=»canonical» и rel=»alternate».

      Правильно определяйте строки агента пользователя и перенаправляйте их.

      Атрибуты для обычных и мобильных URL

      Чтобы наша система сканирования лучше распознавала URL, предназначенные для мобильных устройств, рекомендуем использовать следующие аннотации:

      1. Разместите на каждой странице для компьютеров специальный тег link с атрибутом rel=»alternate», который будет вести на соответствующую страницу мобильного сайта. Это поможет роботу Googlebot найти контент, оптимизированный для мобильных устройств.
      2. На странице для мобильных устройств добавьте тег link rel=»canonical» со ссылкой на соответствующую обычную страницу.

      Наши системы поддерживают два способа добавления таких атрибутов: в HTML-коде страниц и в файлах Sitemap . Предположим, что URL обычной страницы – http://example.com/page-1 , а URL соответствующей страницы для мобильных устройств – http://m.example.com/page-1 .

      Аннотации в коде HTML

      На обычной странице (http://www.example.com/page-1) добавьте следующий код:

      На странице для мобильных устройств (http://m.example.com/page-1) используйте следующие атрибуты:

      В URL, который размещен на странице мобильного сайта и указывает на аналог этой страницы с обычным форматированием, необходимо добавить тег rel=»canonical».

      Аннотации в файлах Sitemap

      Google поддерживает добавление атрибутов rel=»alternate» на страницы для компьютеров с помощью файлов Sitemap. Пример:

      При этом тег rel=»canonical» для URL страницы мобильного сайта обязательно нужно добавить непосредственно в код HTML этой страницы.

      Подробные сведения об атрибутах

      На странице для компьютеров могут использоваться следующие атрибуты тега:

      • Атрибут rel=»alternate» говорит о том, что тег указывает на альтернативный URL для этой страницы.
      • В качестве значения атрибута media используется строка медиа-запроса CSS, в которой указывается, при каких условиях Google должен использовать альтернативный URL. В этом примере приведен медиа-запрос, который обычно используется для таргетинга на мобильные устройства.
      • Атрибут href указывает, где находится альтернативный URL. В данном случае это страница в домене m.example.com.

      Эти атрибуты помогают роботу Googlebot найти ваш контент, а нашим алгоритмам – определить взаимосвязь между обычными и мобильными страницами вашего сайта. Когда вы используете разные URL для одного и того же контента в различных форматах, атрибуты сообщают системе, что эти два URL содержат одинаковый контент и их следует считать одним объектом, а не двумя. Если обычная и мобильная версии страницы интерпретируются как независимые объекты, то в результатах Поиска на ПК могут присутствовать оба URL. В таком случае их рейтинг будет ниже, чем если бы роботу Google было известно об их взаимосвязи . Также обратите внимание на следующие распространенные ошибки в этой конфигурации:

      • Если вы используете атрибуты rel=»alternate» и rel=»canonical», то каждой обычной странице должна соответствовать только одна мобильная и наоборот.
      • Тщательно проверяйте параметры переадресации: убедитесь, что обычные страницы случайно не перенаправляют пользователя на одну и ту же страницу с другим содержанием.

      Если вы решили создать отдельный сайт для обильных устройств, избегайте распространенных ошибок, например в переадресации мобильных пользователей.

      Автоматическая переадресация

      Если ваш сайт направляет браузеры обычных компьютеров и браузеры мобильных устройств на разные URL, вы можете использовать автоматическую переадресацию посетителей. В этом случае роботов Googlebot нужно перенаправлять так же, как и агенты обычных пользователей.

      Поддерживаемые способы переадресации

      Робот Googlebot поддерживает следующие способы переадресации:

      • переадресация с помощью HTTP;
      • переадресация с помощью JavaScript.

      Переадресация с помощью HTTP

      Переадресация с помощью HTTP обычно используется для перенаправления на URL для конкретных устройств. Как правило, она выполняется с учетом агента пользователя, указанного в заголовках HTTP-запроса. Переадресация должна соответствовать альтернативному URL, указанному в атрибуте rel=»alternate» целевой ссылки или в файле Sitemap.

      В этом случае неважно, возвращает ли сервер при переадресации код статуса 301 или 302. Однако, по возможности рекомендуется использовать код 302.

      Переадресация с помощью JavaScript

      Если возникают сложности с настройкой переадресации с помощью HTTP, то для перенаправления пользователей можно использовать JavaScript. Для этого нужно задать соответствующие URL с помощью тега link rel=»alternate» . Необходимо обеспечить приемлемое для пользователя время реакции, поскольку перед выполнением переадресации происходит скачивание страницы, а затем синтаксический анализ и запуск кода JavaScript.

      Существует множество способов такой переадресации. Например, можно обрабатывать запросы контента, которые уже используются на сайте. Для этого подойдет функция JavaScript matchMedia() .

      Однонаправленная и двунаправленная переадресация

      На разных веб-сайтах применяются разные правила переадресации. В одних случаях она действует только для пользователей мобильных устройств, которые посещают обычную версию сайта (однонаправленная переадресация), а где-то пользователи перенаправляются и с мобильной версии на обычную (двунаправленная переадресация).

      Робот Googlebot поддерживает оба варианта. Выбирайте тот, который больше подойдет вашим пользователям. Самое главное – чтобы перенаправление выполнялось без ошибок и открывались нужные страницы. Если переадресация будет реализована некорректно, некоторые пользователи вообще не увидят нужный контент.

      Примечание. Ознакомьтесь с , чтобы не повторять их.

      Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our . Java is a registered trademark of Oracle and/or its affiliates.

      Обновлено Январь 14, 2020

      Перевод: Влад Мержевич

      В этой главе мы возьмем веб-страницу и, не делая с ней ничего плохого, улучшим ее. Местами она станет короче, местами длиннее, но она станет семантической. Возрадуемся!

      Вот . Откройте ее в новой вкладке и не возвращайтесь, пока не посмотрите ее исходный код по меньшей мере один раз.

      Доктайп

      Посмотрите на первую строку нашего кода.

      Она называется доктайп. Это длинная история с черной магией, стоящая за доктайпом. Во время работы над Internet Explorer 5 под Mac его разработчики столкнулись с неожиданной проблемой. Новая версия этого браузера содержала столько улучшений по части стандартов, что старые страницы отображались некорректно. Вернее, отображались они надлежащим образом, по спецификации, но люди считали, что отображаются они неправильно. Авторы страниц при верстке ориентировались на доминирующие браузеры того времени — Netscape 4 и Internet Explorer 4. Браузер IE5/Mac был настолько передовым, что фактически разрушил Сеть.

      В Майкрософте пришли к оригинальному решению. Перед отображением страницы, IE5/Mac смотрит на доктайп, который, как правило, стоит в первой строке кода (еще до элемента ). Старые страницы, которые ориентировались на «причуды» старых браузеров, обычно не имеют доктайпа, поэтому IE5/Mac отображал их подобно этим браузерам. Для включения поддержки новых стандартов, авторы страниц должны были вставить перед .

      Эта идея распространилась как лесной пожар и вскоре все основные браузеры имели два режима: «режим совместимости» и «стандартный режим». Конечно, вскоре все это вышло из-под контроля. Когда Mozilla запустила версию 1.1 своего браузера, она обнаружила, что страницы, которые отображаются в «стандартном режиме» в действительности основываются на одной конкретной причуде под именем доктайп. Mozilla подправила свой браузерный движок для устранения этого недостатка и тысячи страниц рассыпались в один миг. Таким образом был создан, и я не выдумываю это, «почти стандартный режим».


      В своей основной работе Переключение режимов браузера через доктайп Хенри Сивонен выделил следующие режимы.

      Режим совместимости

      В режиме совместимости браузеры нарушают современные веб-спецификации и чтобы избежать «рассыпания» страниц отображают их в соответствии с практикой, распространенной в конце 90-х годов.

      Стандартный режим

      В стандартном режиме браузеры пытаются вывести документы в соответствии со спецификацией в той мере, насколько она реализована в браузере. В HTML5 называется «не режим совместимости».

      Почти стандартный режим

      Браузеры Firefox, Safari, Chrome, Opera (начиная с 7.5) и IE8 также поддерживают почти стандартный режим, в котором вертикальные размеры ячеек таблиц реализуются традиционно, а не в полном соответствии со спецификацией CSS2. В HTML5 называется «ограниченный режим совместимости».

      Вы должны прочитать остальные статьи Хенри, потому что я привел здесь всё упрощённо. Даже в IE5/Mac было несколько вариантов доктайпа. Со временем список особенностей браузеров вырос и вместе с ним увеличился список доктайпов, которые переключают в режим совместимости. В последний раз, когда я занимался подсчётом, было 5 доктайпов для переключения в «почти стандартный режим» и 73 для переключения в «режим совместимости». Вероятно, при этом я пропустил несколько и я ещё молчу про ту сумасшедшую фигню, что делает Internet Explorer 8 для переключения между четырьмя (четырьмя!) режимами отображения. Вот . Убейте ее! Убейте и сожгите!

      Так, где мы? Ах, да, доктайп.

      Если вам нравится этот доктайп, можете оставить его. Или можете изменить доктайп на HTML5, который короче и приятнее, к тому же переключает в «стандартный режим» во всех современных браузерах.

      Вот и все. Всего 15 символов. Это так просто, что вы можете набрать его вручную и не выкручиваться.

      Корневой элемент

      HTML-страница — это набор вложенных элементов, по своей структуре напоминающей дерево. Некоторые элементы являются «родственными», подобно ветвям, выходящим из одного ствола. Другие элементы «дочерние» для других элементов, как маленькая ветвь, растущая из большой ветки. Это правило работает и в обратную сторону — элемент, непосредственно содержащий другие элементы, называется «родительским», и «предком» для «внучатых» элементов. Элемент, не имеющий дочерних элементов, называется узлом. Самый главный элемент, который выступает предком для всех остальных, зовется «корневым». В HTML-документе корневым всегда является .

      Корневой элемент может выглядеть так.

      Ничего плохого в этом коде нет, так что если он вам нравится, можете его оставить, в HTML5 он абсолютно корректен. Но некоторые части уже не требуются, поэтому можно удалить их, тем самым сэкономив несколько байт.

      Первое, что нужно обговорить, это атрибут xmlns , который остался от XHTML. Этот атрибут сообщает, что элементы на этой странице находятся в пространстве имен XHTML, описанному по адресу http://www.w3c.org/1999/xhtml. Однако элементы HTML5 и так находятся в этом пространстве имен, так что нет необходимости объявлять это намеренно. Страница HTML5 будет работать одинаково во всех браузерах, независимо от того, присутствует атрибут xmlns или нет.

      После удаления xmlns останется следующее:

      Два атрибута, lang и xml:lang оба определяют язык текущей веб-страницы. Значение ru обозначает русский язык, его можно поменять на другой . Почему используется два атрибута для одного и того же? Опять же, это наследие XHTML. В HTML5 только атрибут lang дает какой-либо эффект. Вы можете оставить xml:lang при желании, но тогда нужно убедиться, что он содержит то же значение, что и lang .

      Готовы к выбрасыванию? Если да, то поехали. Едем, едем. приехали. Вот что осталось от нашего корневого элемента.

      И это все, что я хотел сказать об этом.

      Элемент

      Первый дочерний элемент в корне это, как правило, тег . Элемент содержит метаданные — информацию о странице, но не тело самой страницы, которое располагается в . Сам элемент довольно скучен и не изменился на интересный вариант в HTML5.

      Хорошие вещи находятся внутри . И для их изучения обратимся к нашему примеру.

      Мой блог

    • title=»Фид моего блога»
      href=»/rss.xml» />
    • title=»Поиск по блогу»
      href=»/sites/search/search.xml» />
    • Кодировка символов

      Когда вы думаете «текст», вы, вероятно, думаете о «знаках и символах, что я вижу на экране моего компьютера». Но компьютерам нет дела до знаков и символов, они имеют дело с битами и байтами. Каждый фрагмент текста, который вы когда-либо видели на экране компьютера, на самом деле хранится в определенной кодировке. Существуют сотни различных кодировок символов, некоторые из них оптимизированы для конкретных языков, таких как русский, китайский или английский, другие могут быть использованы сразу для нескольких языков. Грубо говоря, кодировка символов обеспечивает перевод между тем, что вы видите экране и тем, что компьютер хранит в памяти и на диске.

      В действительности, все гораздо сложнее. Некоторые символы могут быть более чем в одной кодировке, каждая кодировка может использовать разные последовательности байтов в зависимости от способа хранения символов. Таким образом, кодировка это своего рода ключ для расшифровки текста. Всякий раз, когда кто-то дает вам последовательность байтов и утверждает что это «текст», вы должны знать, какую кодировку символов они использовали, чтобы суметь перевести байты в символы и вывести их.

      Как же фактически ваш браузер определяет кодировку набора байтов, что посылает веб-сервер? Рад, что спросили. Если вы знакомы с HTTP-заголовками, то возможно видели подобный.

      Content-Type: text/html; charset=»utf-8″

      Эта строка говорит, что веб-сервер считает, что посылает вам HTML-документ в кодировке UTF-8. К сожалению, в Интернете творится каша — некоторые авторы могут контролировать HTTP-сервер, другие же нет. К примеру, сайт blogger.com может содержать различный контент предоставленный разными людьми, но управляется серверами Google. В HTML4 используется способ указания кодировки самостоятельно в любом HTML-документе. Вы, наверное, встречали такую строку.

      Обе указанные техники работают в HTML5. Использование HTTP-заголовка является предпочтительным методом, и он перекрывает тег , если таковой имеется. Но не каждый может установить HTTP-заголовки, так что метатеги все еще применяются. К тому же он стал намного проще в HTML5. Теперь это выглядит так.

      Это работает во всех браузерах. Выбор этого атрибута продиктован тем, что он уже реализован в браузерах, к тому же люди часто оставляли значение без кавычек.

      Спроси профессора Маркапа

      ☞ В. Я никогда не использую смешные символы. Надо ли мне объявлять мою кодировку?

      О. Да, вы всегда должны указывать кодировку на каждой веб-странице. Отсутствие кодировки может привести к уязвимости системы безопасности.

      Подведем итоги. Вы должны всегда указывать кодировку во всех HTML-документах, иначе могут произойти неприятные вещи. Вы можете сделать это через HTTP-заголовки, написанием или укороченное , но пожалуйста, сделайте это. Веб будет вам благодарен.

      Дружеские отношения

      • . это таблица стилей, содержащая правила CSS, которые браузер должен применить к документу.
      • . это фид, содержащий некоторый контент, как эта страница, но в специальном формате.
      • . это перевод страницы на другой язык.
      • . это следующий раздел онлайновой книги.

      И так далее. HTML5 разделяет отношения ссылок на две категории, которые могут быть созданы с помощью тега
      . Ссылки на внешние ресурсы для расширения текущего документа и гипертекстовые ссылки на другие документы.

      В примере, что я приводил ранее, только первая ссылка (rel=»stylesheet» ) указывает на внешний ресурс. Остальные являются гиперссылками на другие документы. Вы можете при желании пройти по этим ссылкам, но они не требуются для просмотра текущей страницы.

      Спроси профессора Маркапа

      ☞ В. Могу я создать свои собственные отношения между ссылками?

      О. Кажется, имеется бесконечный запас идей для новых отношений между ссылками. В попытках помешать людям творить фигню WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по прикладным веб-технологиям) ведет реестр предложенных значений rel и устанавливает процесс их принятия.

      rel=»stylesheet»

      Это наиболее встречаемое отношение ссылок в мире (в буквальном смысле). Строка
      указывает на CSS-правила, которые хранятся в отдельном файле. Одну небольшую оптимизацию можно сделать в HTML5 и убрать атрибут type . В нем только один язык стилей, CSS, и он установлен по умолчанию. Это работает во всех браузерах. Думаю, кто-то может придумать когда-нибудь новый язык стилей, но если это произойдет, просто добавьте атрибут type обратно.


      rel=»alternate»

      Вернемся к нашей странице.

      title=»Фид моего блога»
      href=»/feed/» />

      Эти отношения ссылок также весьма распространены.
      в сочетании с типом RSS или Atom в атрибуте type позволяет то, что называется «автоматическое обнаружение канала». Это позволяет собирать фид читалками (вроде Google Reader) для получения с сайта последних новостей. Большинство браузеров также поддерживает автоматическое обнаружение фида, показывая специальный значок рядом с адресом сайта. В отличие от rel=»stylesheet» , атрибут type здесь важен. Не удаляйте его!

      Ссылка с отношением rel=»alternate» всегда была странным гибридом в использовании, даже в HTML4. В HTML5 ее определение было уточнено и расширено, чтобы более точно описать существующий контент. Как вы видели, использование rel=»alternate» в сочетании с type=application/atom+xml указывает на Atom-фид для текущей страницы. Но вы также можете использовать rel=»alternate» в сочетании с другими значениями type для обозначения того же содержания в другой формат, например PDF.

      HTML5 также отправляет на отдых давнюю путаницу о том, как делать ссылку на переводы документов. HTML 4 говорит использовать атрибут lang в сочетании с rel=»alternate» для указания языка связанного документа, но это некорректно. В списке исправлений HTML4 перечислены четыре ошибки спецификации. Одна из этих ошибок связана с заданием языка документа через rel=»alternate» . Правильный способ, описанный в исправлениях HTML4 и применяемый в HTML5, заключается в использовании атрибута hreflang . К сожалению, эти исправления не были повторно включены в спецификацию HTML 4, потому что никто больше в Рабочей группе по HTML не работает над ней.

      Другие отношения ссылок в HTML5

      rel=»archives» указывает, что ссылка описывает набор записей, документов или других материалов, представляющих исторический интерес. Главная страница блога может содержать ссылку на список старых сообщений с указанием rel=»archives» .

      rel=»author» используется для ссылки на страницу с информацией об авторе. Это может быть почтовый адрес, хотя и не обязательно. Обычно это ссылка на контактную информацию или страницу «Об авторе».

      Запись rel=»external» сообщает, что ссылка ведет на документ, который не является частью сайта. Я считаю, что ее впервые популяризировал WordPress, когда использовал в ссылках комментариев.

      HTML4 включает rel=»start» , rel=»prev» и rel=»next» для определения отношений между страницами, которые являются частью серии (например, разделы книги или даже сообщения в блоге). При этом корректно использовалась только запись rel=»next» . Люди вставляли rel=»previous» вместо rel=»prev» , вставляли rel=»begin» и rel=»first» вместо rel=»start» , использовали rel=»end» вместо rel=»last» . И ох, самостоятельно делали rel=»up» для указания на «родительскую» страницу.

      HTML5 включает rel=»first» как наиболее распространенный вариант разных способов сказать «первая страница в серии» (rel=»start» не является синонимом и оставлен для обратной совместимости). Еще добавлены rel=»prev» и rel=»next» как в HTML4, rel=»previous» для обратной совместимости, а также rel=»last» (последняя страница в серии, зеркальный к rel=»first» ) и rel=»up» .

      Лучший способ подумать о rel=»up» это посмотреть на навигацию в виде хлебных крошек (или представить ее). Главная страница это первая страница в навигации, а текущая страница находится в хвосте. rel=»up» указывает на страницу, следующую за последней в хлебных крошках.

      rel=»icon» является вторым по популярности отношением между ссылками после rel=»stylesheet» . Оно обычно используется вместе с иконкой сайта, вот так.

      Все основные браузеры поддерживают такое связывание иконки со страницей. Обычно она отображается в адресной строке браузера рядом с URL или во вкладке браузера или в том и другом месте.

      Новое в HTML5: атрибут sizes может быть использован для указания размера иконки.

      rel=»license» был включен сообществом по микроформатам. Такое отношение означает, что ссылка ведет на страницу с авторскими правами, согласно которым предоставляется текущий документ.

      указывает, что ссылка не одобрена автором или издателем страницы или что ссылка на указанный документ включена в основном из-за коммерческих отношений между людьми связанных с этими страницами. Это отношение было изобретено в Google и стандартизировано в сообществе по микроформатам. WordPress вставляет в ссылки, добавленные в комментариях, полагая, что раз ссылки с nofollow не передают PageRank, то спамеры откажутся постить спам в комментариях блога. Этого не произошло, но остался.

      rel=»noreferrer» указывает, что информация о реферере не должна утекать при переходе по ссылке. Браузеры не поддерживают это отношение, однако оно недавно было добавлено в браузерный движок Webkit и в конечном итоге появится в Safari, Chrome и других браузерах, основанных на этом движке.

      rel=»pingback» указывает адрес пингбэк-сервера. Как поясняется в спецификации, «пингбэк» это способ для блога автоматически оповещать сайты, ссылающиеся на него. Это создает обратную связь — способ пройти назад по цепочке ссылок вместо «прямого прохода». В блогах, частности WordPress, пингбэк-механизм используется для уведомления авторов, что вы ссылаетесь на кого-то при создании новой записи.

      rel=»prefetch» сообщает, что превентивная выборка и кэширование указанного ресурса, вероятно, будет полезна и скорее всего пользователю понадобится этот ресурс. Поисковые системы иногда добавляют
      на страницу результатов поиска, если они полагают, что верхние результаты более популярны других. Посмотрите исходный код результатов поиска Google для CNN через Firefox и сделайте поиск по ключевому слову prefetch . Mozilla Firefox является пока единственным браузером, поддерживающим rel=»prefetch» .

      rel=»search» говорит, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. Так, если вы хотите полезно использовать rel=»search» , укажите на OpenSearch-документ, который описывает, как браузер может формировать адреса для поиска ключевых слов по текущему сайту. Формат OpenSearch поддерживается браузером Internet Explorer начиная с версии 7.0 и Mozilla Firefox с версии 2.0.

      rel=»s и покажут обычную ссылку.

      rel=»tag» сообщает, что метка непосредственно связана с текущим документом. Понятие «метка» (теги, категории) было придумано компанией Technorati для помощи в систематизации постов блога. Ранее блоги и руководства и называли их «метки Technorati». Вы правильно поняли: коммерческая компания убедила весь мир добавить метаданные, которые сделают труд компании проще. Прекрасная работа! Синтаксис позже был стандартизирован сообществом по микроформатам, где его просто назвали rel=»tag» . В большинстве систем блогов, которые позволяют связывать категории, ключевые слова или метки с постами, ссылки маркируются через rel=»tag» . Браузеры ничего особого с такими ссылками не делают, поскольку они в действительности предназначены для поисковых систем.

      Новые семантические элементы в HTML5

      HTML5 не просто делает существующую разметку компактнее, он также определяет новые семантические элементы.

      Элемент определяет основной документ или раздел приложения. В данном контексте это тематическая группировка содержания, как правило, с заголовком. Например, разделами могут быть главы, вкладки в диалоговом окне с вкладками или пронумерованные разделы диссертации. Главная страница веб-сайта может быть разбита на разделы для вступления, вывода новостей, контактной информации.
      Элемент

      Спроси профессора Маркапа

      ☞ В. Ссылки «пропустить» совместимы с элементом

      W3C Updates

      Copyright © 2009 W3C

      rel=author и rel=publisher. Чем они отличаются друг от друга и какую из связей использовать для своего сайта? Можно ли использовать одновременно rel=author и rel=publisher? В этой статье дается пояснение к каждому из упомянутых атрибутов и инструкция, как их правильно использовать.

      Что такое rel=author?

      Авторская разметка Google это способ связать авторов с их контентом с помощью использования профиля Google+ и двустороннего подтверждения связи профиля с контентом (см. ). Создание этой связи дает ряд преимуществ:

      — В результатах поиска рядом со сниппетами ваших страниц будет отображаться фото из профиля Google+.

      — Увеличится кликабельность (CTR) сниппета. Можно получать больше трафика, оставаясь на тех же поизициях в поиске.

      — При воровстве контента с вашего сайта, Google будет знать первоисточник и, скорей всего, показывать его выше сворованного.

      — Это хорошо влияет на персональный брендинг и повышение узнаваемости автора.

      — У вас появляется возможность иметь специальную панель в результатах поиска, при вводе пользователем навигационных/брендовых запросов. Эта панель не отображается, пока вы не наберете определенное вовлечение пользователей на странице Google+ (сколько именно нужно плюсов, постов или комментариев, пока не известно). В этой панели отображается ваш логотип, имя компании, количество фоловеров, кнопка подписки и ваши последние посты в Google+.

      (кликните для просмотра примера непосредственно в Google)

      По мнению некоторых экспертов, возможно, существует некий BrandRank для верифицированных брендов, и связь сайта со страницей Google+ может существенно улучшить ранжирование по тем запросам, в которых этот бренд является авторитетом.

      Когда использовать rel=author, а когда rel=publisher?

      Из-за того, что оба атрибута создают связь, возникает вопрос, как определить, что лучше использовать?

      Из описанного выше, основная разница между rel=author и rel=publisher в следующем:

      • rel=author относится к статьям (у разных статей могут быть разные авторы), rel=publisher относится ко всему сайту.
      • rel=author для персональных профилей, rel=publisher для бизнес-страниц.
      • в поиске rel=author дает возможность отобразить свое фото вместе со сниппетом сайта, rel=publisher будет отображать описание со страницы Google+ в боковой панели.
      • rel=author добавляет фото по любым запросам, rel=publisher отображает панель только по брендовым запросам.

      Эти теги также можно использовать совместно.

      Если подвести итог, используйте rel=publisher для связи бизнес-страниц со всем сайтом, аrel=author для связи страниц/статей отдельного автора с его профилем в Google+. Сайт может иметь несколько авторов, а также бизнес-страницу. И в любом случае потребуется двусторонняя верификация, то есть ссылка не только с сайта, но и на сайт с настроек страницы или профиля Google+.

      Несколько полезных советов:

      — Добавьте на свой сайт виджет Google+ . Так посетителям будет легче добавлять страницу в свои круги.

      — Если вы подтвердили сайт в панели вебмастеров Google, и на этом же аккаунте имеете персональный профиль Google+, дополнительно верифицировать сайт нет необходимости.

      — Ознакомьтесь с ответами Google на часто задаваемые вопросы по авторской разметке.

      Дата публикации: 01 декабря, 2013

      Элемент link HTML содержит связанную с документом информацию: альтернативные версии, авторы, авторские лицензии, иконки и т.д. Он должен содержать атрибут rel или itemprop , но не оба сразу. Атрибут href также является обязательным.

      Когда атрибут itemprop отсутствует, этот элемент может быть объявлен только в разделе head . В противном случае он может быть объявлен в другом месте.

      Примеры

      В следующем примере предоставляется информация о документе с помощью элемента link с различными типами гиперссылок:

      Новая надежда

      После падения демократии и восстановления империи надежда была утеряна.

      Илон Маск рекомендует:  Атрибут leftmargin в HTML
      Понравилась статья? Поделиться с друзьями:
      Кодинг, CSS и SQL