Атрибут text в HTML

Содержание

HTML: Атрибут style

Атрибут style

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

Примечание: тут мы рассматриваем атрибут style для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе.

Код примера познакомит вас с новым способом форматирования документа:

Внимательно посмотрите на пример, с помощью атрибута style мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. Встроенный стиль применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

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

Задний фон

Задний фон элемента задается с помощью CSS свойства background-color, которое в качестве значения может принимать любое доступное значение цвета (про различные значения цветов смотрите ниже), после свойства обязательно должно идти двоеточие и значение, после значения обязательно ставится точка с запятой, эти правила распространяются на все свойства атрибута style . Если нужно задать несколько свойств стиля для одного элемента, то каждое последующее свойство записывается после ; » предыдущего свойства.

Цвет текста

Цвет текста элемента задается с помощью CSS свойства color. Благодаря этому свойству можно задать любой цвет для текстового содержимого. В качестве значения свойство color может принимать имена цветов, RGB значения или шестнадцатеричные коды.

Установка цвета по имени

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

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

Установка цвета с помощью RGB

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255 для числовых значений или от 0% до 100%

Можно установить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего. Вот как это можно сделать:

Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно написать 204 красного, 102 зеленого и 0 синего:

Шестнадцатеричные коды

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

Примечание: все три метода определения цветов в CSS подходят ко всем свойствам, которые в качестве значений могут принимать цвета. Все доступные названия цветов вы можете посмотреть в нашей таблице цветов, там же вы сможете подобрать цвет в RGB или шестнадцатеричном формате, если вам не подойдет ни один из оттенков представленных в таблице с названиями.

Шрифт

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

Свойство font-family дает возможность задать список предпочтительных шрифтов, которые указываются через запятую. Если имя шрифта состоит из нескольких слов, то такое название следует заключить в двойные кавычки, например: » Courier New «.

Размер

Размер шрифта очень сильно влияет на дизайн веб-страницы и читабельность ее текста. В CSS есть несколько единиц измерения, с помощью которых можно задавать размер для текста, все они подробно описаны в разделе Единицы измерения CSS. Также имеется возможность задавать размер с помощью ключевых слов:

Все доступные ключевые слова, задающие размер, вы можете посмотреть в нашем справочнике по CSS в описании свойства font-size.

Выравнивание текста

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

Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

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

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

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

  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.
  • face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.

Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:

  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • — меньший размер шрифта;
  • — наклонный текст ( курсив ). Аналогичный ему тег ;
  • — текст с подчеркиванием;
  • — зачеркнутый;
  • — отображение текста только в нижнем регистре;
  • — в верхнем регистре.

Возможности атрибута style

Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении ( xx-small, x-small, small, medium, large );
  • В процентах;
  • В пунктах ( pt ).

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

Пример того, как изменить шрифт в html этим свойством:

5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

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

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

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

Русскоязычные шрифты и их поддержка

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

  • Arial Black ;
  • Arial ;
  • Comic Sans MS ;
  • Courier New ;
  • Georgia ;
  • Lucida Console ;
  • Lucida Sans Unicode ;
  • Palatino Linotype ;
  • Tahoma ;
  • Times New Roman ;
  • Trebuchet MS ;
  • Verdana .
      Если этого количества мало, то на просторах интернета хватает сайтов, где можно скачать шрифт на любой вкус. Еще можно разработать свой шрифт. Но это уже совсем другая история. И она будет написана уже другим шрифтом.

    Работа с текстом в HTML (материал для начинающих). Урок 3

    2013-06-09 / Вр:21:14 / просмотров: 20701

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

    Основные теги для работы с текстом.

    — этот тег предназначен для разбивки текста на параграфы в html документе.

    Предлагаю посмотреть пример :

    Вот результат примера .

    Атрибуты в HTML.

    Что такое «тег», вы уже знаете, а вот что такое «атрибуты в html» сейчас узнаете.
    Итак.

    Атрибуты в html – это дополнение к тегу для разметки текста. Атрибуты вставляются вовнутрь тега. На примере вы все увидите:

    align=»center» > здесь текст

    P – это тег параграфа.
    align=»center» – это атрибут к тегу

    с дополнительным правилом.

    Я думаю, вы поняли, что такое атрибуты в html.

    Атрибуты «H1, H2, H3, H4, H5, H6»

    Чтобы выровнять по горизонтали заголовок, используйте атрибут «align».

    align: center | left (по умолчанию) | right

    Атрибуты «p»

    Чтобы выровнять по горизонтали заголовок, используйте атрибут «align» .

    align: center | justify | left | right

    Итог .
    Давайте объединим все примеры вместе и посмотрим результат:

    Дополнительные теги для работы с текстом.

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

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

    Предлагаю посмотреть пример :

    Атрибуты «font»

    font: SIZE | COLOR | FACE

    SIZE – размер текста. Значение задается от 1 до 7. Также можно задавать значения в большую или меньшую сторону с помощью символов « + » и « — ».
    COLOR – цвет текста.
    FACE – шрифт текста.

    Предлагаю посмотреть пример :

    Атрибуты «HR»

    HR: width | size | align | noshade | color

    WIDTH – длина линии. Задается размер в (px / %).
    SIZE – толщина линии (px).
    ALIGN – выравнивание линии по горизонтали. У атрибута «align» есть необходимые значения:
    left – выравнивание документа по левому краю.
    right – выравнивание документа по правому краю.
    center – выравнивание документа по центру (используется по умолчанию).
    NOSHADE –закраска линии как сплошной.
    COLOR – цвет линии (работает только в Internet Explorer).

    Теперь объединим эти примеры вместе и посмотрим результат:

    лабы по информатике, егэ

    лабораторные работы и задачи по программированию и информатике, егэ по информатике

    HTML Урок 1.2. Теги форматирования текста и абзацев

    Элементы форматирования текста

    Заголовки

    • Для размещения заголовков существует тег с номером уровня заголовка.

    , соответственно заголовок самого низкого уровня (самый мелкий размер шрифта) —

    .
    Базовый размер шрифта на странице соответствует заголовку

    Блочная цитата

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

    Преформатированный текст

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

    Перед указанием цвета в 16-й системе обязательно ставится символ «шарп» — #
    Для подбора подходящего цвета перейдите на страницу палитры цветов онлайн.

    Теги логического форматирования текста

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

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

    Элементы форматирования абзацев

    • Для перехода на другую строку текста служит пустой элемент
      .
    • Тогда как для выделения в тексте абзаца служит элемент

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

    Пример совместного использования тегов
    и

    Желаемый результат:

    Цвет и гарнитура шрифта

    Для форматирования шрифта существует тег . Однако, тег уже практически не используется.

    Тег используется только со своими атрибутами:

    • size — размер шрифта, от 1 до 7 ( 3 — базовый размер, 6 — размер заголовка H1)
    • face — семейство шрифта ( serif — с засечками, sans-serif — рубленый или без засечек, monospace — моноширинный)
    • color — цвет

    Изучаем HTML теги и атрибуты. Учимся работать с текстом, списками и изображениями в HTML

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

    Итак, первым делом, прежде чем приступить к дальнейшему изучению основ HTML, давайте узнаем, что такое теги и атрибуты в HTML. Тема тегов уже затрагивалась в статье «Основы HTML. Как создать HTML страницу», поэтому начнем сразу с атрибутов.

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

    Работа с текстом в HTML — Абзацы, ссылки и атрибуты в HTML

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

    Для того, чтобы создать абзац в HTML применяется специальный тег

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

    Как видите тег абзацев парный, поэтом в конце абзаца нужно поставить закрывающий тег

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

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

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

    Для того, чтобы использовать эти свойства вам достаточно перечислить их в кавычках через точку с запятой, не забывая указать нужные значения возле каждого свойства, а также точку с запятой в конце списка свойств. Например, нам нужно задать размер шрифта 12 пикселей и выровнять его по центру. Из статей выше вы моги узнать, что за размер шрифта отвечает свойство font-size, а за его выравнивание – text-align. В результате у нас получится следующий HTML код.

    Теперь текст будет написан шрифтом размером 12 пикселей и будет выровнен по центру. Аналогичным образом элементам в HTML можно придавать и другие свойства, например, выделить текст жирным шрифтом.

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

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

    Заголовки в HTML. Заголовки H1 – H6

    Во всех статьях независимо от их объема существует необходимость создания заголовков. Заголовки играют важную роль в оптимизации страниц под поисковые системы, поэтому их использование обязательно на каждом сайте. В HTML для создания заголовков существуют специальные теги. Всего их шесть. Для заголовков первого уровня – H1, для второго – H2, для третьего – H3 и т.д. до заголовка шестого уровня H6. При этом желательно чтобы заголовок каждого уровня встречался не более одного раза на странице. Особенно это касается заголовка первого уровня H1.

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

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

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

    Работа со списками в HTML

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

    Маркированные списки в HTML

    Для создания маркированных списков в HTML применяются специальные теги


      и
      . Тег

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

      Результатом работы вышеприведенного кода будет список.

      Нумерованные списки в HTML

      Нумерованные списки в HTML создаются аналогичным образом с единственным отличием, что в них вместо тега


        применяется тег

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

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

      • TYPE – используется для указания стиля нумерации.
      • START — служит для задания начального номера списка, отличного от 1.
      • VALUE — дает возможность назначить произвольный номер любому элементу списка.

      Пример списка с обычной числовой нумерацией.

      Пример списка с буквенной нумерацией.

      Пример списка с произвольной числовой нумерацией.

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

      Теперь давайте перейдем к завершающей части статьи и рассмотрим основы работы с изображениями в HTML.

      Работа с изображениями в HTML

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

      Итак, код для вставки изображения будет иметь следующий вид.

      • Height – высота изображения.
      • Width – ширина изображения.
      • Class – класс CSS задающий свойства для изображения.
      • Title – заголовок, который отображается при наведении курсора на изображение.
      • Alt – описание для изображения. Используется поисковыми системами при поиске картинок.
      • Src – путь к изображению.

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

      Теперь наше изображение стало ссылкой и при нажатии на него пользователь перейдет на сайт https://archive.dmitriydenisov.com.

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

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

      Справочник тегов HTML

      названия тегов краткое описание тегов
      Предназначен для создания ссылок (гипертекста).

      Атрибуты:
      name — Присваивает имя элементу.
      href — Присваивает адрес ресурса, к которому ведет ссылка.
      для создания ссылки вызова почтовой программы href=»mailto:e-mail»
      title— Всплывающая подсказка

      Синтаксис:
      открыть страницу
      ссылка на сайт
      открыть почтовую программу
      присвоить имя
      перейти к закладке

      Выделяет в тексте аббревиатуру. Обычно подчеркивается пунктирной линией.

      Атрибуты:
      title— всплывающая подсказка

      Выделяет в тексте акроним. Обычно подчеркивается пунктирной линией.

      Атрибуты:
      title— всплывающая подсказка

      Указывает автора документа и его адрес. Обычно отображается курсивом.

      Атрибуты:
      title— всплывающая подсказка

      Синтаксис:
      Иванов Иван Иванович

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

      Атрибуты:
      alt — альтернативный текст для области изображения
      title— всплывающая подсказка
      href — указывает путь к открываемому документу
      shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

      • rect — прямоугольная область
      • poly — область представляет собой некий многоугольник
      • circle — область заданная окружностью

      coords — координаты области
      nohref — область без ссылки на другой документ
      target — указывает в каком окне следует открывать документ.

      • _blank — открыть в новом окне
      • _self — открыть в текущем окне (по умолчанию)
      • _parent — открыть документ в фрейме-родителе, если фреймов нет, то работает как _self.
      • _top — отменяет фреймы и загружает документ в полном окне браузера, если фреймов нет, то как _self.

      Синтаксис:

      не требует закрывающего тега

      Делает текст полужирным. Аналогичен тегу

      Атрибуты:
      title— Всплывающая подсказка

      Синтаксис:
      этот текст будет полужирным

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

      Упер казак репу

      Внедряет в документ звуковой файл. Файл проигрывается в качестве фоновой музыки.

      Не требует закрывающего тега.

      Делает текст крупным.

      Атрибуты:
      title— Всплывающая подсказка

      Синтаксис:
      этот текст будет крупным

      «Тело» документа указывает содержание видимой части документа.

      Атрибуты:
      bgcolor — задаёт цвет фона документа.
      background — указывает адрес рисунка делая его фоном документа.
      text — цвет текста документа.
      link — цвет ссылок.
      vlink — цвет посещённых ссылок.
      alink — цвет нажатой, активной ссылки.
      bgproperties=»fixed» — делает рисунок фон фиксированным.(фоновое изображение не прокручивается при нажатии PageDown)

      Синтаксис:

      содержание видимой части документа

      Атрибуты HTML-тегов

      С тем, что такое HTML теги, мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом

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

      Как писать атрибуты?

      Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

      Значения с атрибутами записываются в таком формате:

      Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.

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

      Универсальные атрибуты

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

      • accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

      В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

      • class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
      • С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
      • При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
      • dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
      • draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
      • dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
      • h >
      • translate разрешает (yes) или запрещает (no) перевод содержимого тега.
      • align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

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

      Пример использования атрибутов

      В качестве примера рассмотрим строку HTML-кода:

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

      Разберём каждый элемент строки.

      — открывающий тег контейнера, хранящего абзац.

      Между символами > и

      Полезные ссылки:

      • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
      • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
      • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

      HTML атрибуты

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

      W3C (Консорциум Всемирной паутины) рекомендует использование нижнего регистра, как в тегах, так и в написании атрибутов. Атрибуты, как правило, записываются таким образом: имя = «значение» . В элементе допускается использовать несколько атрибутов в любом порядке, но при этом необходимо разделять их пробелом (только пробелом и больше никак).

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

      Значение атрибута допускается заключать как в двойные кавычки, так и в одинарные, но в некоторых ситуациях, когда в значении уже содержатся кавычки (двойные или одинарные), то использовать аналогичные нельзя:

      Давайте рассмотрим пример в котором используем атрибут title к тегу

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

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

      Рис. 11 Пример использования атрибута title к тегу

      Атрибут lang

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

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

      Атрибут имеет следующий синтаксис:

      Код языка, подразумевает собой сокращенное наименование, состоящее из двух букв которые определяют язык содержимого. Если у языка есть диалект, то через дефис добавляют еще две буквы (например, США lang = «en-us» ).

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

      В этом примере основной язык документа является русский ( «ru» ), а один абзац объявлен на испанском языке ( «es» ).

      Полный перечень кодов вы можете найти в разделе «Коды языков».

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

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

      Атрибут Значение
      dir Определяет направление текста содержимого элемента.
      id Определяет уникальный идентификатор для элемента. Атрибут должен использоваться только один раз в конкретном HTML документе.
      lang Определяет язык содержимого в элементе.
      style Задает встроенный CSS стиль для элемента.
      title Указывает дополнительную текстовую подсказку о содержимом при наведении курсора на элемент.

      Вопросы и задачи по теме

      Перед тем как перейти к изучению следующей темы пройдите практическое задание:

      • Для выполнения задания вам понадобится скачать архив с текстовым файлом и изображениями:
      • Используя полученные знания составьте следующий мультиязычный документ HTML:

      Практическое задание № 3.

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

      Руководство по alt-text от слабовидящего веб-разработчика

      Эта статья содержит всё, что вам нужно знать об alt-text! Когда их использовать и как идеально их подготовить. Подготовил я, Дэниель, веб-разработчик с частичной потерей зрения, который ежедневно использует скринридер.

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

      Как и всем остальным, мне попадается в интернете большое количество изображений. При использовании скринридера я завишу от текстового описания картинок — alt-text — которое произносится вслух.

      Часто alt-text не помогает, часто это просто потеря времени, потому что не передаёт никакого смысла.

      Проиллюстрирую на примере главной страницы The Verge. Вот как она выглядит для зрячих:

      А ниже то, что вижу я. Я заменил картинки на текст, который читает мой скринридер:

      Не очень помогает, правда?

      Вот наиболее типичные ошибки alt-text, с которыми я сталкиваюсь:

      • “cropped_img32_900px.png” или “1521591232.jpg” — названия файлов, вероятно, потому что в изображении нет атрибута alt.
      • “ ” — на каждом изображении статьи, вероятно, для улучшения поискового ранжирования (SEO).
      • “Фотограф: Эмма Ли” — вероятно, потому что редактор не знает, для чего нужен alt-text.

      Атрибуты alt-text не всегда настолько плохи, но почти всегда есть способ их улучшить. Так что будь вы абсолютным новичком или хотите перевести вашу «игру» на новый уровень, вот полное руководство по alt-text!

      Что такое alt-text

      Alt-text — это описание изображения, что демонстрируется людям, которые по каким-то причинам не могут увидеть картинку. Среди прочего, alt-text помогает:

      • людям ограничениями по зрению или незрячим
      • тем, кто отключил показ изображений для экономии трафика
      • поисковым системам

      Первая группа — люди с ограничениями по зрению и незрячие — пожалуй, больше всего нуждаются в описании alt-text. Для навигации в Сети они используют скринридер. Эта программа преобразует графическую информацию на экране в текст или шрифт Брайля. Чтобы сделать это максимально точно, у картинок на вашем сайте должны быть текстовые описания alt-text.

      Они очень важны! Настолько важны, что в правилах Web Content Accessibility Guidelines (WCAG) они указаны самым первым пунктом:

      Любое нетекстовый контент, который демонстрируется пользователю, должен иметь текстовую альтернативу, которая служит эквивалентной цели.
      — Правило WCAG 1.1.1

      Как добавить alt-text?

      В HTML alt-text является атрибутом элемента img:

      Большинство систем управления контентом (CMS), вроде WordPress, позволяют ввести alt-text при загрузке изображения:

      Соответствующее поле обычно называется “Alt-text”, “Alternative text” или “Alt”, но в некоторых интерфейсах оно именуется как «Описание изображения» или что-нибудь подобное.

      Создадим идеальный alt-text!

      Вот шаги для создания великолепных текстовых атрибутов.

      Опишите изображение

      Это может показаться очевидным, но alt-text должен описывать изображение. Например:

      «Группа людей на железнодорожной станции»
      «Счастливый ребёнок, играющий в песочнице»
      «Очередь из пяти человек в супермаркете»

      Что не стоит включать в описание:

      • Имя фотографа. Это часто встречается, но абсолютно не имеет смысла.
      • Ключевые слова для поисковой оптимизации. Не захламляйте alt-text нерелевантными словами, с помощью которых пытаетесь подняться в результатах поиска Google. Атрибуты alt-text предназначены не для этого и это введёт в заблуждение ваших пользователей.

      Содержимое alt-text зависит от контекста

      Как описать изображение — зависит от контекста. Позвольте привести пример:

      Если бы это изображение было в статье по фотографии, то alt-text мог бы звучать так:

      «Чёрно-белая фотография крупным планом человека на улице, лицо в фокусе, фон размыт».

      Если изображение находится на сайте о телесериалах, то соответствующий alt-text может быть совершенно иным:

      «Звезда сериала Адам Ли напряжённо смотрит через дождь».

      Так что пишите максимально осмысленный alt-text для пользователей в том контексте, в котором они находятся.

      Будьте лаконичны

      Читая предыдущий раздел, вы могли подумать: «Я как зрячий человек вижу на картинке много деталей, вроде того, кто там изображён, как сделан снимок, тип куртки, примерный возраст мужчины и так далее. Почему бы не сделать детальное, длинное описание, так что пользователь с нарушением зрения получит столько же информации, сколько я?»

      Рад, что вы спросили!

      Если честно, вы можете получить всю необходимую информацию об изображении одним взглядом — именно этого эффекта мы пытаемся достичь для пользователей со скринридерами. Дайте необходимую информацию в описании alt-text, но сделайте его максимально лаконичным и точным.

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

      Но общее правило — сохранять лаконичность и избегать многословности.

      Не говорите, что это изображение

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

      Единственное, вы можете закончить alt-text сообщением, что это особый вид изображения, например, иллюстрация.

      «Пёс прыгает через обруч. Иллюстрация».

      Завершение точкой.

      Завершайте alt-text точкой. Это позволит скринридеру сделать небольшую паузу после последнего слова alt-text, что более приятно звучит.

      Не используйте атрибут title

      Во многих интерфейсах есть поле для добавления в тег изображения атрибута title-text рядом с alt-text. Не нужно его использовать! Никто их не использует — они не работают на тачскринах, а на десктопах отображаются, если пользователь наведёт курсор на изображение и ненадолго задержит его там, чего никто не делает. Кроме того, добавление title-text заставляет некоторые скринридеры читать и title-text, и alt-text, что является избыточным. Так что просто не добавляйте title-text.

      Когда не следует использовать alt-text

      В большинстве случаев нужно снабжать изображения описанием alt-text, но есть некоторые исключения, когда этот атрибут лучше оставить пустым. Важное примечание: никогда не удаляйте атрибут alt, потому что это нарушает стандарт html. Но можно оставить его пустым, вот так: alt=”” . Делайте это в следующих случаях.

      Повторяющиеся изображения в фидах

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

      Другие примеры фидов:

      • Список ссылок на статьи. Примерно как на нашей странице «Статьи».
      • Фиды чатов или мессенджеров
      • Фиды комментариев

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

      Иконки с текстом

      Рядом с иконками всегда должно быть текстовое описание. Если так, то у иконки не должно быть alt-text. Позвольте объяснить!

      В качестве примера посмотрите на кнопки социальных сетей:

      Если вы укажете текст в атрибуте alt-text для иконки Facebook, то скринридер произнесёт что-то вроде «Facebook Facebook». Очень избыточно!

      Окей, технически это не касается alt-text, но всё равно важно: убедитесь, что у иконки и текста ссылки одинаковый атрибут link, для большего удобства пользователей. Примерно так:

      Другая типичная ошибка — это иконки на кнопках меню:

      Если на кнопке меню отсутствует текстовая надпись — что, по-моему, очень неудобно для пользователей — тогда нужно добавить к ней alt-text (или, как вариант, описать её функциональность в самом коде, как aria-label). Объясните функцию иконки, например, «Меню». Не пишите «Три горизонтальные линии» или «Основной гамбургер» — к сожалению, это реальные примеры, которые мне встречались.

      Если на иконке меню есть надпись, то поле alt-text следует оставить пустым. Я часто встречаю кнопки меню, которые звучат как «Меню меню». Однажды мне даже попался «Гамбургер меню меню». Немного сбивает с толку, вы не находите?

      Изображения в ссылках

      Обычно изображение с ссылкой сопровождается текстовой ссылкой. Как в этом примере:

      В этом случае изображение и ссылка должны иметь одинаковый link-tag в HTML. Поле alt-text можно оставить пустым. Пользователю важно услышать текст по ссылке. Описание alt-text для изображения только отвлечёт, добавив ненужную информацию. Скорее всего, это изображение будет в статье по ссылке, и там уже можно дать хорошее описание в alt-text.

      Если вам очень, очень нужно поместить в ссылку изображение без сопутствующего текста, тогда alt-text должен описать, куда ведёт ссылка, а не само изображение.

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

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

      Я бы классифицировал как декоративные большинство изображений, которые вы вставляете в текст. Там не нужен alt-text. Например, картинка на заглавной странице Netflix:

      Особые случаи

      Логотипы в баннере

      Логотипы в баннерах почти всегда ссылаются на главные страницы веб-сайтов. По поводу атрибута alt-text в логотипе мнения немного отличаются.

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

      «Axess Lab, логотип, ссылка на главную страницу».

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

      Масштабируемая векторная графика (SVG) — это формат изображений, который становится всё более популярен в интернете. И он мне нравится! Такие изображения остаются резкими при масштабировании, занимают меньше места и быстрее загружаются.

      Есть два основных способа добавить SVG на страницу HTML.

        Внутрь элемента img. В этом случае просто добавляете alt-text как обычно:

      Разве компьютер не может сделать это за меня?

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

      В реальности Facebook разработал функцию для автоматического описания изображений. Но мне такие описания кажутся слишком обобщёнными. Прямо сейчас одно изображение в моём фиде описано как «Кот в помещении». В реальности на фотографии кот охотится за игрушечной мышью.

      Так что извините, вам всё ещё придётся писать атрибуты alt-text самостоятельно!

      Спасибо, что делаете веб лучше!

      Читают сейчас

      Похожие публикации

      • 1 апреля 2020 в 18:27

      SVG 3D: создание, вращение по оси и анимация

      Эффекты фильтрации SVG. Часть 7. Продвижение вперед

      Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

      Вакансии

      AdBlock похитил этот баннер, но баннеры не зубы — отрастут

      Комментарии 12

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

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

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

      И, кстати, WCAG 2.0, если я не ошибаюсь, никак не регламентирует содержание текстовых альтернатив. Т.е. я могу соблюсти его дав изображению не совсем подходящее описание. Например явно избыточное или, наоборот, недостаточное.

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

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

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

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

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

      Я думаю, что логичнее было бы использовать что-то вроде микроразметки вместо стандартных атрибутов, а их просто игнорировать. Ну и

      В любом случае, я неожиданно заинтересовался проблемой. Попробую найти кого-нибудь, кто пользуется скринридером постоянно, чтобы понять нюансы. И да, с разделом WCAG 2.0 про клавиатуру я тоже вполне согласен.

      Таблица основных тегов html с примерами

      Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.

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

      Базовые теги

      — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

      — показывает браузеру тип документа, сообщает его версию и язык.

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

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

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