Содержание

Делаем обтекание картинки текстом на HTML и CSS

Быстрая навигация по этой странице:

  • Общее решение задачи
  • Массовое применение для всех изображений
  • Накладываем текст на изображение

Правильное и красивое размещение всех объектов на странице — неотъемлемый элемент дизайна любого уважающего себя сайта. Как всегда, здесь не обойтись без CSS. Дело в том, что обтекание картинки текстом HTML сам по себе делает (с помощью атрибутов align=left, align=right тега img), но он при этом не создает отступов. Потому без CSS все-таки не обойтись.

Общее решение задачи

CSS? Я знаю несколько способов, с помощью которых можно решить поставленную задачу.

Так, например, можно картинку заключить в тег DIV, которому через CSS задать свойство float:left или float:right, с проставлением необходимых отступов.

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

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

Для начала присвоим нашему изображению класс:

[html]
<img src=»моя_картинка.jpg» />
[/html]

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

[css]
.img_class {
float: left;
margin: 10px 10px 10px 0;
}
[/css]

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

Массовое применение для всех изображений

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

Предположим, что картинки находятся в посте, который на странице вашего сайта показывается в <div class=»content»></div>.

В таком случае в CSS файле вашего сайта будет достаточно прописать следующий код:

[css]
.content img {
float: left;
margin: 10px 10px 10px 0;
}
[/css]

Теперь все изображения, находящиеся в блоке «content», будут выравниваться слева и иметь вышеуказанные отступы. Если для какого-то отдельного изображения вы захотите сделать исключение — например, расположить его справа, то для него будет нужно задать id (например, id=»my_img») и в css файле прописать такие параметры (должны начинаться со знака решетки — #):

[css]
#my_img {
float: right;
margin: 10px 0 10px 10px;
}
[/css]

Накладываем текст на изображение

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

Опять-таки, сделать это можно множеством способов. Приведу два наиболее популярных.

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

[html]
<div>Текст, который будет наложен на картинку</div>
[/html]

 

[css]
. my_block {
background: url (my_img.jpg) top left no-repeat;
width: 500px;
height: 300px;
padding: 400px 0 0 0;
}
[/css]

В этом блоке строка с текстом разместится в нижней части блока — с верхним отступом в 400 пикселей.

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

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

[html]
<div>
<img src=»моя_картинка.jpg» />
<div>Текст, который будет наложен на картинку</div>
</div>
[/html]

[css]
.img {
width:500px;
height: 300px;
position: relative;
}
.text {
background-color: #FFF;
width: 500px;
height: 50px;
position: absolute;
left: 0px;
top: 450px;
}
[/css]

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

Как видите, ничего сложного в обтекании картинок и наложении на них текста нет, главное — экспериментировать и подбирать наиболее удачный вариант!

ТЕКСТ МЕЖДУ КАРТИНОК: mangiana_irina — LiveJournal

?

Текст между двух картинок!
По сути, это та же таблица, только без рамки. Итак, формула:

<table align=center border=0><tr><td><img src=»URL адрес КАРТИНКИ»></td><td>ТЕКСТ</td><td><img src=»URL адрес КАРТИНКИ»></td></tr></table>

Таким же образом можно сделать картинку между двумя столбцами текста:

<table align=center border=0>
<tr><td>ТЕКСТ</td><td><img src=»URL адрес КАРТИНКИ»></td><td>ТЕКСТ</td></tr></table>

ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ		ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ

найдено здесь: zomka.
ya.ru

********************************************

ТЕКСТ МЕЖДУ КАРТИНОК


ХОТИТЕ СДЕЛАТЬ ПОДОБНУЮ ЗАПИСЬ ?

Скопируйте формулу и вставьте в запись. В формуле вместо «адрес картинки» вставляете адрес Вертикального разделителя ( адрес вставляется в двух местах), и вместо надписи «ВАШ ТЕКСТ» соответственно то, что хотите написать.

ФОРМУЛА

<table<br /> align=»center» <br /> border=»0″><br/><br/><tr><br/><br/><td><img<br /> src=»URL адрес левой КАРТИНКИ» mce_src=»URL адрес левой <br /> КАРТИНКИ»/></td><br/><br/><td>ВАШ <br /> ТЕКСТ</td><br/><br/><td><img src=»URL адрес <br /> правой КАРТИНКИ» mce_src=»URL адрес правой <br /> КАРТИНКИ»/></td><br/><br/></tr><br/><br/></table><br/><br/>

URL адрес КАРТИНКИ должен выглядеть так:

http://img-fotki. yandex.ru/get/3613/katerina-200by.26/0_15f43_d7a1489b_M.jpg

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

<table<br /> align=»center» <br /> border=»0″><br/><br/><tr><br/><br/><td>КОД<br /> ЛЕВОГО ВЕРТИКАЛЬНОГО <br /> РАЗДЕЛИТЕЛЯ</td><br/><br/><td>ВАШ <br /> ТЕКСТ</td><br/><br/><td>КОД ПРАВОГО <br /> ВЕРТИКАЛЬНОГО <br /> РАЗДЕЛИТЕЛЯ</td><br/><br/></tr><br/><br/></table><br/>

<img src=»http://img-fotki.yandex.ru/get/3613/katerina-200by.26/0_15f44_b047f23_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3613/katerina-200by.26/0_15f44_b047f23_M.jpg»/>
<img src=»http://img-fotki.yandex.ru/get/3613/katerina-200by. 26/0_15f43_d7a1489b_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3613/katerina-200by.26/0_15f43_d7a1489b_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3512/katerina-200by.26/0_15f42_ca84773_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3512/katerina-200by.26/0_15f42_ca84773_M.jpg»/>

<img src=»http://img-fotki.yandex.ru/get/3511/katerina-200by.26/0_15f3f_6b1725d1_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3511/katerina-200by.26/0_15f3f_6b1725d1_M.jpg»/>

<img src=»http://img-fotki.yandex.ru/get/3512/katerina-200by.26/0_15f3d_5f7bfcf8_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3512/katerina-200by.26/0_15f3d_5f7bfcf8_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3508/katerina-200by.26/0_15f3c_2442ecbb_M.jpg»/><img src=»http://img-fotki.
yandex.ru/get/3508/katerina-200by.26/0_15f3c_2442ecbb_M.jpg»/>		<img src=»http://img-fotki.yandex.ru/get/3512/katerina-200by.26/0_15f37_7fff9f6d_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3512/katerina-200by.26/0_15f37_7fff9f6d_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3613/katerina-200by.25/0_15f2e_fa6d9110_M.jpg»/><img src=»http://img-fotki.yandex.ru/get/3613/katerina-200by.25/0_15f2e_fa6d9110_M.jpg»/>
<img src=»http://img-fotki.yandex.ru/get/3511/katerina-200by.25/0_15f2d_3516e590_M.jpg»/></a><img src=»http://img-fotki.yandex.ru/get/3511/katerina-200by.25/0_15f2d_3516e590_M.jpg»/></a>
<img src=»http://img-fotki.yandex.ru/get/3612/katerina-200by.25/0_15f1e_fd38a1f_M.jpg»/></a><img src=»http://img-fotki.yandex.ru/get/3612/katerina-200by. 25/0_15f1e_fd38a1f_M.jpg»/></a><img src=»http://img-fotki.yandex.ru/get/3614/katerina-200by.25/0_15f0c_8f17dbc3_M.jpg»/></a><img src=»http://img-fotki.yandex.ru/get/3614/katerina-200by.25/0_15f0c_8f17dbc3_M.jpg»/></a>
<img src=»http://img-fotki.yandex.ru/get/3612/katerina-200by.25/0_15f1f_d3a84797_M.jpg»/></a><img src=»http://img-fotki.yandex.ru/get/3612/katerina-200by.25/0_15f1f_d3a84797_M.jpg»/></a>

найдено здесь: clubs.ya.ru

********************************************

P.S. А я хочу предложить вам ещё один, на мой взгляд, самый простой способ вставки текста между картинками. Просто перед текстом сразу же ставим коды обеих картинок. В первой прописываем align=»left» (она будет слева), во второй —   align=»right» (она будет справа)  И текст окажется между двух картинок.

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

<img src=»http://img-fotki. yandex.ru/get/3512/katerina-200by.26/0_15f42_ca84773_M.jpg» align=»left»/><img src=»http://img-fotki.yandex.ru/get/3512/katerina-200by.26/0_15f42_ca84773_M.jpg» align=»right»/>В кодах картинок прописаны теги «влево» и «вправо». Всё очень просто. Удачи ! — Ваша mangiana_irina (mangiana-irina.livejournal.com/) *

Tags: оформление текста, разделители, таблицы, шаблоны

Subscribe

  • Бесплатный генератор по создаанию текста на табличках

    Всё очень просто: заносите ваше сообщение в рамку, выбираете смайлик и формы рамки. Затем можно выбрать цвет, шрифт, фон, размер букв и тип…

  • Пишем заголовки с фигурками к своим постам

    …

  • Бесплатный онлайн сервис X-LINES.RU // Создание красивых графических надписей /

    …

  • Превращение речи в текст. Блокнот для речевого ввода.

    …

  • Онлайн-сервис для создания изображений с текстом

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

  • Бесплатный онлайн сервис Pixiz // Очень много анимированных фотоэффектов /

    Жмём на логотип и переходим на сайт Образец того, что можно сделать в сервисе:

  • ПРИКОЛЬНОЕ ОФОРМЛЕНИЕ ТЕКСТА

    ЗДРАВСТВУЙТЕ <div threeposts__item «>

    Выделяем заглавную букву слова цветом и размером

    Если вы хотите, чтобы заглавная буква слова была выделена каким-то цветом и была бо́льшего размера, чем шрифт основного текста, то можете…

  • Сделать подложку из фона + Поменять фон под участком текста и поменять цвет текста

    СДЕЛАТЬ ПОДЛОЖКУ ИЗ ФОНА 1. Скопируйте код из фрейма 2. Где написано URL-адрес фона — вставляйте адрес свой картинки или фона 3. width=»100%…

Photo

Hint http://pics.livejournal.com/igrick/pic/000r1edq

Как использовать текст поверх изображений с помощью HTML

Поиск

Время от времени я задаюсь вопросом, читают ли люди все, что я пишу. Когда я открывал последнюю страницу часто задаваемых вопросов, я ответил на вопрос читателя о размещении текста поверх изображения. Она хотела иметь возможность поместить имя человека на картинке поверх картинки, как подпись. Я сказал, что это невозможно сделать без использования графического редактора. Что ж — КаБум! Электронная почта посыпалась потоком.

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

Самый простой известный мне способ разместить текст поверх изображения

Вот, пожалуйста, текст поверх вашего потрясающего изображения:

 

  Джо Бернс за работой

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

Прежде чем мы перейдем к тому, как и почему этот метод, я хотел бы сообщить вам, что изображения на этой странице были сделаны с помощью моей новой цифровой камеры. Это действительно удивительный предмет. Он вмещает 3,5-дюймовую дискету прямо в корпус самой камеры. Когда вы делаете снимок, он записывает его на диск в формате JPEG, чтобы вы могли сразу же выйти в Сеть. Не только это, но вы также можете просматривать изображения, как только сделаете их. Таким образом, вы можете быстро сказать, моргнул ли кто-то ее или его глазами или нет. Если это неудачный снимок, сотрите его и сделайте еще один. Плавно, но немного круто. Моя стоила чуть больше 500 долларов. (Жена ахнула, когда я отдал кредитку.) Есть дешевле, но не с диском прямо на борту. Я все еще думаю, что это была хорошая покупка. Сейчас…

Код HTML, который сделал это



jpg» VALIGN = «bottom»>

Джо Бернс за работой

Вот что происходит в HTML
 

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

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

     

    • Запускает строку таблицы. Это не очень нужно, но это хороший формат таблицы.

     

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

     

    • Снова просто хорошее создание таблицы.

     

    • Вот что делает трюк. Я установил изображение, которое вы видите выше, в качестве фона ячейки изображения. Обратите внимание, что я добавил высоту и ширину изображения. ВАМ НУЖЕН , ЧТОБЫ ЭТО СДЕЛАТЬ. Если вы этого не сделаете, ячейка будет соответствовать размеру только текста, который вы поместите после команды TD. Другими словами, вы не увидите всей картины.

     

  • Джо Бернс за работой
    		•
    На этом все заканчивается.

Работа со слоями

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

 


gif>



 

См. Команды в действии

Довольно изящно. Это мой Пол Маккартни, поза сержанта Пеппера, если вы не знали.

Как видите, эффект тот же, но детали немного другие. Посмотрите на код. Я установил два слоя в соответствии с базовым форматом (найденным здесь), но на этот раз я сделал это с двумя изображениями. На одном — мой затылок (newjoe02.jpg), а на другом — изображение того же размера с надписью «Это не лысина». Оба настроены на 250 пикселей слева и 100 пикселей сверху окна браузера.

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

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

Это немного работы, но если вы нарезаете свои страницы, используя слои и разделы DIV, это способ настроить эффект.

Почему бы не расположить текст?

Отличная идея!

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

 

Изображение просто сидит там, где оно обычно сидит. Текст, отформатированный с размером шрифта +2 и зеленым цветом, был помещен в раздел. Затем команды таблицы стилей размещают ее на расстоянии 250 пикселей от верхней части окна браузера и 20 пикселей от левой стороны. Команда высоты и ширины задает высоту и ширину раздела, внутри которого будет располагаться текст. Вы не должны устанавливать его шире изображения. Таким образом, вы уменьшите вероятность перекатывания текста по сторонам.

Это то…

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

 

Наслаждайтесь!

Популярные статьи

Рекомендуемые

Напишите хороший альтернативный текст для описания изображений

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

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

Пример

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

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

Источники СМИ для войны в Ираке

Анализ освещения в СМИ периода войны в Ираке отнюдь не был универсально объективным. На самом деле ясно, что освещение в целом было провоенным, причем американские источники новостей были немного более провоенными, чем источники из-за пределов США. Нейтральное освещение составило 26%, в то время как меньшинство источников было настроено против войны. Только 3% американских источников попали в эту категорию.

См. также: Опишите содержание изображений ✎, Слепой, Слабое зрение, Когнитивный, Программа чтения с экрана, Увеличение экрана, Режим высокой контрастности, Пользовательская таблица стилей, Воспринимаемый, Альтернативы, Изображения, HTML, SVG

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

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

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

Примеры

✗ Плохой пример

В WYSIWYG-редакторе можно загрузить изображение какого-нибудь текста (скажем, «вкусных блинов») и вставить его на страницу с альтернативным текстом, точно совпадающим с текстом:

 png" alt="вкусные блины" />

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

✓ Используйте CSS и веб-шрифты

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

Текст будет оформлен с использованием веб-шрифтов и свойств CSS, таких как background , text-shadow и color .

.pancakes-текст {
  семейство шрифтов: PancakeFont, FallbackFont, без засечек;
  цвет: песочно-коричневый;
  text-shadow: 0.02em 0.02em 0 Коричневый,
                        0 0 0.5em фиолетовый;
}

Редактор кода

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

См. перо Стилизация текста CSS от HUIT — службы веб-доступа, UX и цифровой доступности (@hwpdas) на КодПене.

См. также: Описание содержания изображений ✎, Дизайн для удобочитаемости ✎, Поддержка гибкости и адаптации ✎, Слепой, Слабовидящий, Когнитивный, Программа чтения с экрана, Увеличение экрана, Режим высокой контрастности, Пользовательская таблица стилей, Воспринимаемый, Изображения, Текст, CSS , HTML

Люди различаются тем, как они могут (или хотят) потреблять информацию, особенно в образовательных контекстах. Некоторые люди могут предпочесть информацию, представленную в виде текста, видео или аудио; и их потребности в доступности также могут влиять на их предпочтения.

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

Пример

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

«Однако, когда мы рассматриваем тенденции энергопотребления дальше на восток в Европе, мы можем рассмотреть в качестве примера карпатскую нацию Румынии. Здесь мы находим интересную картину, когда электричество обеспечивается различными источниками энергии, при этом ни один источник энергии не составляет явное большинство. Согласно самой последней доступной нам статистике, мы видим, что гидроэлектроэнергия является наиболее распространенным источником чуть более одной трети (36%), за которым следует уголь (33%), затем атомная энергия (19%).%), а газ – 10 %. Завершая картину Румынии, мы обнаруживаем, что другие источники энергии составляют оставшиеся 2%».

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

См. также: Опишите содержание изображений ✎, Используйте изображения и мультимедиа для улучшения понимания ✎, Когнитивные, Воспринимаемые, Понятные, Изображения, HTML, PDF, Powerpoint, Word

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

Примеры

Давайте рассмотрим несколько примеров подходящего альтернативного текста с использованием одного и того же логотипа Гарвардского университета в разных контекстах.

Автономный

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

Но если бы логотип был предоставлен в качестве примера дизайна логотипа, мы могли бы пойти дальше и выбрать что-то вроде «Логотип Гарвардского университета с черным текстом с засечками и красной эмблемой в виде щита», как в этом примере:

Внутри ссылки

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

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *