Добавление картинки

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

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

Для атрибутов тегов используются значения по умолчанию

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

Атрибуты без значений

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

Пример 3.4. Атрибуты без значений

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

Порядок атрибутов в тегах

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

Формат атрибутов

Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Так, в примере 3.3 упоминается тег , он добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при валидации документа.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

Источник

Атрибуты элементов

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

Атрибут со значением

Вначале пишется открывающий тег, затем через пробел имя атрибута, после чего ставится знак равно (=) и в кавычках указывается значение атрибута. Общий синтаксис такой:

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

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

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

Каждый атрибут должен быть единственным и не должен повторяться ( alt писать можно, alt alt нельзя).

В примере 1 показано добавление картинки на страницу с помощью элемента с разными атрибутами.

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

Логические атрибуты

У логических атрибутов нет значений, само наличие или отсутствие атрибута уже меняет поведение элемента. Синтаксис достаточно простой:

В примере 2 показано применение логического атрибута для аудиоплеера.

Пример 2. Использование логического атрибута

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

Опять же имена атрибутов не чувствительны к регистру, это значит, что их можно писать маленькими или большими буквами. Но рекомендуем придерживаться единообразия и писать атрибуты в нижнем регистре — name . А никак не Name или NAME . Ещё раз подчеркнём, что так писать не надо.

Порядок атрибутов

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

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

У некоторых элементов есть свой набор характерных атрибутов, но кроме этого существуют атрибуты, которые можно добавлять к любому элементу. По этой причине они называются универсальными или глобальными атрибутами. Список всех таких атрибутов вы можете посмотреть здесь, перечислим лишь некоторые популярные: class , id , lang , style , title .

Источник