Язык HTML для блогера. Ч4.

Язык HTML для блогера. Ч4.
Размещение рисунков и видео в тексте.

     В предыдущих статьях и видео я рассказал о необходимом минимуме знаний языка HTML для подготовки текста статьи. Как можно быстро, в течение 15-20 минут используя редактор Word создать HTML код текста
     Здесь расскажу, как вставить в текст видео и рисунки.

     ***

     Начнём с того, что видео и рисунки относятся к медиафайлам. И те и другие могут располагаться как на дисковом пространстве вашего сайта, так и на других интернет ресурсах. Это могут быть другие сайты в том числе и такие ресурсы как YouTube или коллекции картинок Яндекс и Google.
     Рисунки могут быть в форматах .gif и .jpg, для видео наиболее предпочтительный формат .mp4.
     Для отображения видео и рисунков в текст статьи вставляются ссылки на месторасположения этих медиафайлов. Подробнее о ссылках я расскажу в следующей статье.

     В простейшем случае для отображения рисунков в тексте используется такой HTML код:

     <img src=″URL рисунка″ alt=″альтернативный текст″ title=″всплывающая надпись″ width=″ширина″ height=″высота″>

     Как видим, для вывода рисунка используется одиночный тег img. В нём присутствуют атрибуты:
     — src — атрибут, содержащий ссылку на местоположение рисунка.
     — alt — альтернативный текст. Всякое в жизни бывает. Иногда по некоторым причинам браузер не может отобразить рисунок. В этом случае посетитель увидит вместо рисунка вот этот альтернативный текст.
     — title — всплывающий текст, который будет выведен при наведении курсора на рисунок.
     — width — ширина рисунка, обычно задаётся в пикселях. Обычно в диапазоне 300 — 600. Здесь нужно учитывать какова ширина рабочего пространства в используемой вами теме WordPress.
     — height — высота в пикселях. В общем-то не ограничена. Но сами понимаете нужно иметь и голову на плечах. Слишком высокие рисунки лучше разбить на несколько.

     Значения атрибутов заключены в прямые кавычки. Вордовские парные кавычки браузер не понимает, об этом я говорил в видео к предыдущей статье, там же рассказывал, что нужно предпринять.
     Атрибут height можно не указывать. В этом случае он будет автоматически вычислен исходя из значения атрибута width и пропорций рисунка.
     Можно указать атрибут width в процентах от ширины окна, например:
     width=″70%″
     Конечно, можно исключить все атрибуты кроме src.

Размещение рисунков в тексте.

     Рисунки в тексте могут располагаться:
     — в отдельной строке, слева, справа и в центре строки;
     — с обтеканием текстом слева или справа.

     В отдельной строке.

     <div align=″ABC″> <img src=″URL рисунка″ alt=″альтернативный текст″ title=″всплывающая надпись″ width=″ширина″ height=″высота″> </div>

     Здесь тег img помещён внутрь тега абзаца div. Тег абзаца использован с атрибутом align, указывающем на место положения рисунка. Значения атрибута align ABC:
     — left — рисунок слева;
     — right — рисунок справа;
     — center — рисунок в центре.
     Если тег div использовать без атрибутов, то рисунок по умолчанию располагается слева.
     Примеры расположения:

 yazyk-html-dlya-blogera-ch4_01.jpg
Рис. 1

     Обтекание текстом.

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

     <div><img align=″положение″ vspace=″отступ верт.″ hspace=″отступ гориз.″ src=″URL рисунка″ alt=″альтернативный текст″ title=″всплывающая надпись″ width=″ширина″> </div>

     Здесь атрибут align помещён внутрь тега img, и ему присваиваются значения лево — право также, как и в предыдущем случае.
     Атрибуты vspace и hspace задают величину отступа текста от картинки соответственно по вертикали и по горизонтали.
     Пример расположения рисунка слева:

 yazyk-html-dlya-blogera-ch4_02.jpg
Рис. 2

     Есть один нюанс. Если Вы располагаете рисунок в отдельной строке по центру, то достаточно легко разместить под ним подпись.
     Если создать обтекание текстом, то подпись под рисунком простыми способами не создать. Самое простое это расположить подпись сбоку от рисунка используя конструкцию тегов
<div></DIV> и тег <br/>. Это будет выглядеть примерно так как на рис. 3.

 yazyk-html-dlya-blogera-ch4_03.jpg
Рис. 3

     Как это сделать на практике я покажу в видео.

Размещение видео в тексте.

     Видео в тексте статьи можно разместить двумя способами.

     1. Видео из медиафайла на сайте.

     Видео файл должен быть создан в формате .mp4. Параметры видео:
     — Частота кадров — 25.
     — Размер — 1280х720 или 1920х1080, что соответствует формату 16х9. Конечно это не догма, могут быть и другие форматы, но такой предпочтителен.
     — Битрейт — 1500 — 2000, что соответствует хорошему качеству. Этот параметр зависит от того, что за видео Вы загружаете. Для тех которые создаю я большой битрейт не требуется, главное, чтобы изображение было достаточно разборчиво. Зато я могу довольно продолжительные видео уложить в достаточно малые файлы.
     Мои видео имеют такие параметры: 25, 1280х720, ~1300.

     Эти три параметра влияют на размер создаваемого видеофайла. Нужно учитывать, что на сайт можно загрузить видео не более 225МБ. Поэтому встаём перед выбором: либо хорошее качество, либо длинное видео.
     Загрузка файла с видео на сайт ничем не отличается от загрузки файлов с рисунками.

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

     <video width = ″Ш″ height = ″В″ controls>
     <source src = ″URL файла видео″>
      </video>

     Здесь одиночный тег source задаёт ссылку на URL видео файла. Двойной тег video указывает браузеру что будет воспроизводиться именно видео.
     Атрибут controls заставляет браузер выводить контрольную панель для видео.
     Ещё раз хочу обратить внимание на то, что все эти теги и их атрибуты предназначены для браузера пользователя, который зайдёт на ваш сайт, а не для WordPress, за небольшим исключением.

     Видео в тексте будет выведено в таком виде:

 yazyk-html-dlya-blogera-ch4_04.jpg
Рис. 4

     Как видите окно видео прижато к левому краю, но его положение можно и изменить.

     2. Видео из файла на YouTube.

     Размещать видео у себя на сайте довольно расточительно. Всё-таки дисковое пространство ограничено. Да и если Вы желаете выложить видео в хорошем качестве, то размер файла скорее всего получится более 225МБ.
     Поэтому видео лучше размещать на YouTube. К тому же ссылку на это видео поисковые машины выдают, минуя ваш сайт.

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

     https: //youtu.be/4bFv3gVHM-0

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

     Видео в тексте будет выведено в таком виде:

 yazyk-html-dlya-blogera-ch4_05.jpg
Рис. 5

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

     <div align=″ABC″>
     xxxxxxx
     </div>

     Где:
     — ABC — left, right или center
     — xxxxxx — либо первый вариант видео, либо второй

     Как всё это работает на практике покажу в видео.

Типографика размещения рисунков и видео.

     Рисунок в отдельной строке с пояснительным текстом.

<div align="center"> <img src="URL рисунка" alt="альт. текст" title="вспл. надпись" width="Ш"> <br/> Рис. 1 <br/> Пояснительный текст</div>

     Рисунок с обтеканием текстом + пояснительный текст.

<div> <img align="left" vspace="XV" hspace="XH" src="URL рисунка" alt="альт. текст" title="вспл. надпись" width="Ш"> <div></DIV>Рис. 1 <br/>Пояснительный текст<div></DIV></div>

     Видео из файла на сайте.

<div align="left"> <video width = "Ш" controls> <source src = "URL видео"> </video></div>

     Видео из файла на YouTube.

<div align="left">
URL на YouTube
</div>

     Видео-урок:

      Если видео не воспроизводится, то дело в вашем браузере. Решение проблемы для Яндекс Браузера здесь: https://lumpics.ru/does-not-work-youtube-in-yandex-browser .


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

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