Обновление пароля

 > Журнал > Публикации > Хитрости и советы / Lifehack > Лайфхак по HTML. Как «подружить» текст с фото?

Лайфхак по HTML. Как «подружить» текст с фото?

06.04.2017 17:15     Просмотров: 1058     Комментариев: 27     
Виды творчества:   Do It Yourself / Сделай сам

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

фото в публикациях, публикация в журнале

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

Это сделать не сложно.

1. Заходите в html-разметку (значок в том редакторе, куда вы вставляете текст перед публикацией).

2. Находите строку с той фотографией, сбоку которой нужно вставить текст.

Все фотографии начинаются одинаково — < img class…. 

Просто считаете, какая по счету фотография вам нужна. Такую по счету строчку с img и надо выбрать. На фото пример с тремя фотографиями.

фотографии

3. Вставляете фразу

hspace="10" vspace="10" align="left"

в конец строки img перед />. В моем примере это здесь:

 продвижение

У меня строка заканчивается так — width="240" height="406", потому что я меняла размеры фотографии в окошке редактирования. Но у вас строка может заканчиваться по-другому — alt="". Обратите внимание, что фразу надо вставлять после кавычек, но до слэша.

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

красивые публикации

Добавлю три слова по поводу значений hspace="10" vspace="10". Цифра 10 — это размер отступа текста от фотографии. Чем больше значение, тем больше отступ.

P.S.: Надеюсь, понятно объяснила:) Если есть вопросы, задавайте! 

Ключевые слова:  
Ярмарка Мастеров - ручная работа, handmade
 
Жми «Нравится»
и подписывайся на нас в Facebook!

Сообщение модератору

Отправьте сообщение модераторам, если считаете, что данная работа нарушает Правила Ярмарки Мастеров.

Модальное окно для уведомлений

Шаг 1 из 3: Создание магазина

Откройте собственный онлайн-магазин в несколько простых шагов и зарабатывайте любимым творчеством
Как будет называться магазин?
Какой у него будет web-адрес?

Шаг 2 из 3: Регистрация

Укажите контактные данные для своего магазина. Уже есть аккаунт?
Введите email
Придумайте пароль
Укажите свой город
< Назад

Шаг 3 из 3: Проверка email

  • Магазин
  • Регистрация
  • Проверка email
Остался завершающий шаг! Мы отправили Вам письмо, перейдите по ссылке в нем, чтобы подтвердить свою почту и начать работу с магазином.
Если письмо не пришло — можем отправить еще раз