Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Игра представляет собой полноценную головоломку и дает возможность расслабиться после дня в тихой и уютной обстановке недалеко от горы Фудзи под деревом сакуры с полноценной игрой Маджонг!

Маджонг: Лепестки Сакуры

Маджонг, Головоломки, Милая

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

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

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Html 5

С этим тегом используют

HTML Программирование CSS Javascript Css3 IT Разработка Все
89 постов сначала свежее
5
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Теги: <img>, <audio>, <video>,⁠⁠

Разберемся с тегами которые помогают нам добавлять на страницу изображения и мультимедиа (аудио и видео).

IMG


<img> - позволяет нам добавлять изображения на страницу.

Атрибуты:


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


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


width - необязательный атрибут, его значением используется для задания ширины изображению.


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


* Также у тега img присутствуют другие атрибуты о которых поговорим позднее, а еще ему можно задавать все общие атрибуты (id, class, title и тд.).



Local img

<img src="./assets/img-example.jpg" alt="grapefruit" width="250px" height="250px">

Img from the internet

<img
src="https://upload.wiki__media.org/wikipedia/commons/thumb/7/7b/Orange-Whole-&-Split.jpg/1024px-Orange-Whole-&-Split.jpg"
alt="Img from wikipedia"
width="1024"
>

Также мы можем изменять изображение для устройств с различным разрешением экрана. С помощью атрибутом srcset и sizes, как это делать разберем в уроках об адаптивности.

AUDIO


Для добавления аудио на сайт нам нужно использовать тег <audio>. Чтоб указать какой трек мы хотим использовать нам нужно указать путь к файлу трека в качестве значения атрибута src.


<audio controls src="./assets/audio.mp3">
Ваш браузер не поддерживает тег <b>audio</b>
</audio>

Тег <audio> имеет достаточно много атрибутов, мы рассмотрим самые распространенные: src - путь к аудиофайлу.


controls - если атрибут указан то браузер будет пользователю элементы управления треком (перемотка, звук и тд.) .


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


loop - зацикливание трека muted - определяет будет ли воспроизводится звук.


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


<audio controls>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="./assets/audio.mp3" type="audio/mp3"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>
Браузер попытается скачать трек, который находится в первом <source>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.


<audio controls>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>

VIDEO


Для того, чтобы добавить видео на страницу, мы будем использовать тег <video>.


<video src="./assets/video.webm" controls>
Ваш браузер не поддерживает тег <b>video</b>
</video>

Тег video как и тег audio, имеет множество похожих атрибутов:


src - путь к видео файлу.


controls - если атрибут указан то браузер будет пользователю элементы управления видео (перемотка, звук и тд.).


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


loop - зацикливание видео.


muted - определяет будет ли воспроизводится звук.


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


<video src="./assets/video.webm" poster="./assets/poster.jpg" controls>
Ваш браузер не поддерживает тег <b>video</b>
</video>

Аналогично тегу <audio> мы можем определять сразу несколько источников видео с помощью тега <source> который будем вкладывать в тег <video>.


<video controls>
<source src="myVideo.mp3" type="video/mp3">
<source src="./assets/video.webm" type="video/webm">
Ваш браузер не поддерживает тег <b>video</b>
</video>

Браузер попытается скачать видео, которое находится в первом <source>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.


<video controls>
<source src="myVideo.mp3" type="video/mp3">
<source src="video.webm" type="video/webm">
Ваш браузер не поддерживает тег <b>video</b>
</video>

IFRAME


Тег <iframe> позволяет нам вставлять одни страницы в другие, если это не запрещено источником который вы хотите вставить к себе на страницу. У тега iframe достаточно много атрибутов + к нему можно добавлять общие атрибуты которые есть у всех тегов. src - url источника который нужно вставить через iframe.


<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="700"
height="400"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

Добавление внешней страницы в нашу страницу:


<iframe src="https://example.org"
title="iframe Example 1"
width="700"
height="400">
</iframe>

Неработающий iframe:


<iframe src="https://vs-dev.info/"
title="iframe Example 1"
width="700"
height="400">
</iframe>

Вставляем видео с youtube:


<iframe src="https://www.youtube.com/embed/4rOLgFCNrTg_"
title="iframe Example 1"
width="700"
height="400">
</iframe>

P.S. Больше уроков у меня на канале

P.P.S. Файлы с урока

Показать полностью
[моё] Программирование Программист Баг Разработка Собеседование IT HTML Основы HTML Html 5 CSS Css3 Верстка Веб-разработка Создание сайта Web-программирование Видео YouTube Длиннопост
2
11
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Урок - Подключение CSS⁠⁠

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


Способ #1 - inline styles


Одним из общих атрибутов для каждого тега, является атрибут style, внутри которого мы и можем писать наш CSS код.


<h1 style="color: red">Some Title - <a href="#">link</a></h1>

Способ #2 - тег <style>


Внутри тега <style> мы можем писать стили, идентифицируя нужные нам теги по их атрибутам, именам и тд. (селектору тега). Тег <style> должен быть расположен внутри тега <head>.


<head>
<style>
div {
max-width: 1200px;
margin: 0 auto;
background-color: antiquewhite;
padding: 10px 20px;
}
</style>
</head>

Открыть на CodePen


Способ #3 - отдельный файл


Самое лучшее что можно придумать, это подключение отдельного CSS файла к нашему проекту. Делается это через тег <link>, который также должен быть вложен внутрь тега <head>.


Атрибуты:

rel - должен иметь значение stylesheet

href - ссылку или путь к файлу .css


Тег <link> имеет больше атрибутов, на данном этапе их рассматривать не будем.


<link rel="stylesheet" href=".././css/style.css">


Способ #4 - отдельный файл через тег <style>


Не рекомендую вам так делать, лучше старайтесь всегда когда возможно подключать свои .css файлы через тег link. Такой способ практически ничем не отличатся от подключения через <link> кроме синтаксиса, но он читается намного хуже и усложняет понимание.


<style>
@IMPORT '.././css/style2.css';
</style>

P.S. Больше уроков у меня на канале

P.P.S. Файлы с урока

Показать полностью
[моё] HTML Html 5 Основы HTML CSS Css3 Javascript Frontend Верстка Верстальщик Программирование Программист Разработка Разработчики IT Баг Собеседование Видео YouTube Длиннопост
28
1
DELETED
3 года назад

Переопределение шаблона twig в Drupal 8⁠⁠

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

Переопределение шаблона twig в Drupal 8 Программирование, Разработка, IT, Программист, Drupal, Backend, Template, Web, Web-программирование, Софт, HTML, Html 5, Develop

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

Переопределение шаблона twig в Drupal 8 Программирование, Разработка, IT, Программист, Drupal, Backend, Template, Web, Web-программирование, Софт, HTML, Html 5, Develop

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


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

paragraph--машинное_имя_параграфа--режим_отображения.html.twig

В моем случае, файл будет называться:

paragraph--title_and_text_and_image--block.html.twig

Теперь можно править разметку.

<div class="titleAndTextAndImage">
  <div class="titleAndTextAndImage__content">
    <div class="titleAndTextAndImage__title">
      {{ content.field_title[0] }}
    </div>
    <div class="titleAndTextAndImage__body">
      {{ content.field_body[0] }}
    </div>
  </div>
  <div class="titleAndTextAndImage__image">
    {{ content.field_image[0] }}
  </div>
</div>

Поле выводим так:

{{ content.машинное_имя_поля }}

А если нам нужно получить только сырое значение:

{{ content.машинное_имя_поля[0] }}

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


Это был простейший пример. Аналогичным образом можно переопределять:

Типы материала:

node--машинное_имя_типа_материала--режим_отображения.html.twig

Таксономию:

taxonomy-term--машинное_имя_словаря_таксономии--режим_отображения.html.twig

Блоки:

block--машинное_имя_блока--режим_отображения.html.twig

Типы медиа:

media--машинное_имя_медиа--режим_отображения.html.twig

Примеры названий файлов twig можно увидеть при включенном twig debug.

Показать полностью 1
[моё] Программирование Разработка IT Программист Drupal Backend Template Web Web-программирование Софт HTML Html 5 Develop
1
12
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Видеоурок - Структуры данных в SASS / SCSS⁠⁠

Привет, в этом уроке мы рассмотрим структуры данных существующие в языке SASS / SCSS. Рассмотрим как с ними работать и почему это удобно. Также рассмотрим директиву @Charset и разберемся зачем она нужна.

[моё] Программирование Баг Программист Разработка IT HTML Html 5 Основы HTML CSS Css3 Верстка Видео YouTube
15
7
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Теги для создания форм. Часть №5. <fieldset>⁠⁠

Теги для создания форм. Часть №5. <fieldset> Программирование, Баг, Программист, Разработка, IT, HTML, Html 5, Основы HTML, CSS, Css3, Длиннопост

<fieldset> - существует для группировки <input> внутри тега <form>, а также помогает удобно управлять группой полей

<form action="#">
<h3>Registration form</h3>
<fieldset>
<div>
<label for="name_input">First name:</label>
<input id="name_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_input">Surname:</label>
<input id="surname_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<div>
<label for="email_input">Email:</label>
<input id="email_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_input">Password:</label>
<input id="password_input" type="text" placeholder="Password">
</div>
</fieldset>
</form>

Открыть на CodePen



У <fieldset> также есть несколько атрибутов, которые помогают управлять сразу всей группой <input>. name - задает общее имя для группы disabled - делает группу недоступной для редактирования form - если <fieldset> лежит вне тега <form> то этот атрибут позволит вам связать их.

<form action="" id="example_form">
<h3>Example form</h3>
<label>
<input type="text" placeholder="Some example input">
</label>
</form>
<fieldset form="example_form">
<div>
<label for="name_2_input">First name:</label>
<input id="name_2_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_2_input">Surname:</label>
<input id="surname_2_input" type="text" placeholder="Surname">
</div>
</fieldset>

Открыть на CodePen


Legend


<legend> - Является заголовком для группы элементов, сгруппированных через <fieldset>.


<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
</form>

Открыть на CodePen


P.S. Больше уроков у меня на канале

Показать полностью
[моё] Программирование Баг Программист Разработка IT HTML Html 5 Основы HTML CSS Css3 Длиннопост
0
8
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Теги для создания форм. Часть №4. <datalist>⁠⁠

Теги для создания форм. Часть №4. <datalist> Разработка, IT, Инди игра, Программирование, Программист, HTML, Основы HTML, Html 5, CSS, Css3, Javascript, Верстка, Создание сайта, Собеседование, Баг

<datalist> - содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.


Не стоит использовать его вместо тега <select>, но можно использовать как вспомогательный тег для <input>. Причина в том что его сложнее обрабатывать через JavaScript.

<form action="">
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
</form>

Открыть на CodePen


P.S. Больше уроков у меня на канале

Показать полностью
[моё] Разработка IT Инди игра Программирование Программист HTML Основы HTML Html 5 CSS Css3 Javascript Верстка Создание сайта Собеседование Баг
4
4
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Видеоурок - Семантические теги HTML⁠⁠

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

[моё] Баг Программирование Программист IT Разработка HTML Html 5 Основы HTML CSS Css3 Javascript Верстка Верстальщик Создание сайта Видео YouTube
2
3
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Теги для создания форм. Часть №3. <textarea>⁠⁠

Теги для создания форм. Часть №3. <textarea> Программирование, Программист, Баг, Разработка, IT, Собеседование, HTML, Css3, CSS, Html 5, Основы HTML, Верстка

<textarea> - позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>.


Имеет атрибуты схожие с <input>, а также cols и rows.


cols - определяет ширину <textarea>.


rows - определяет высоту <textarea>.


<form action="">
<label for="message">Your massage</label>
<textarea
name="user_message"
id="message"
cols="30"
rows="10"
placeholder="Your message..."
></textarea>
</form>

Открыть на CodePen

<form action="">
<label for="message2">Your massage</label>
<textarea
name="user_message"
id="message2"
cols="30"
rows="10"
placeholder="Your message..."
>Some predefined data goes here</textarea>
</form>

Открыть на CodePen


P.S. Больше уроков у меня на канале

Показать полностью
[моё] Программирование Программист Баг Разработка IT Собеседование HTML Css3 CSS Html 5 Основы HTML Верстка
0
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии