Будни веб-разработчика
Я: *сдвигаю <div > на один пиксель*
Сайт:
Я: *сдвигаю <div > на один пиксель*
Сайт:
Задача
Есть API, который в ответ на запрос отдает json со списком фреймворков и их описанием. Необходимо на его основе отрендерить карточки.
Прототип
Алгоритм
- Получить список;
- Обработать список;
- Отрендерить в HTML.
1. Получить список
Для данной статьи я подготовил тестовые данные, которые можно получить по адресу:
https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...
Чтобы сделать HTTP запрос — используйте метод fetch:
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
2. Обработать список
Вот как выглядит json, который мы получаем:
{
"success": true,
"list": [
{
"title": "React",
"text": "React is an open-source...
Напишем функцию buildHTML, которая на вход будет принимать JSON, а отдавать строку, которую мы в будущем используем как HTML:
// HTTP запрос
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
// переводим ответ в json
.then(response => response.json())
// конвертируем в html
.then(buildHTML)
Определение функции:
const buildHTML = ({ list }) =>
list.map(({ title, text }) => (`
<div>
<h2>${title}</h2>
<p>${text}</p>
</div>
`)).join("");
3. Отрендерить в HTML
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
.then(response => response.json())
.then(buildHTML)
.then(render); // полученный результат передает в функцию render
В файле HTML создадим пустой контейнер, куда будем вставлять карточки:
<div class="container"></div>
https://developer.mozilla.org/en-US/docs/Web/API/Element/inn... функции render сводится лишь к использованию свойства innerHTML:
const render = (html) => {
const container = document.querySelector('.container');
container.innerHTML = html;
};
Результат
Полную версию кода смотрите на codepen.
Разберемся с тегами которые помогают нам добавлять на страницу изображения и мультимедиа (аудио и видео).
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>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.
<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>
<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>Аналогично тегу <audio> мы можем определять сразу несколько источников видео с помощью тега <source> который будем вкладывать в тег <video>.
Ваш браузер не поддерживает тег <b>video</b>
</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/"Вставляем видео с youtube:
title="iframe Example 1"
width="700"
height="400">
</iframe>
<iframe src="https://www.youtube.com/embed/4rOLgFCNrTg_"
title="iframe Example 1"
width="700"
height="400">
</iframe>
P.S. Больше уроков у меня на канале
P.P.S. Файлы с урока
Предположим, вам нужно создать параграф, который должен выглядеть вот так:
В большинстве случаев набор полей будет таким:
Нам нужно, чтобы картинка располагалась справа. Есть множество способов этого добиться, но сейчас мы рассмотрим 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.
<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>.
Имеет схожие с <input> атрибуты, а также атрибуты multiple и size.
Обычно select располагается внутри тега <form> или связывается с ним атрибутом form. Но его также можно не встраивать в <form>.
<form action="">Ссылка на CodePen
<select name="some_list"></select>
</form>
<option> - тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах.
Атрибуты:
selected - позволяет пред выбрать элемент.
disabled - работает как всегда. и другие.
<form action="">
<label for="select">Select item</label>
<select name="list" id="select">
<option value="item-1">Item #1</option>
<option value="item-2">Item #2</option>
<option value="item-3">Item #3</option>
<option value="item-4">Item #4</option>
</select>
</form>
Ссылка на CodePen
<optgroup> - позволяет группировать опции внутри <select>. Имеет атрибуты - name и disabled.
name - задает имя группы.
disabled - исключает возможность выбора элементов из группы.
label - Задает имя группы которое видно пользователю.
<form action="">
<label for="select2">Select item</label>
<select name="list" id="select2">
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>
Ссылка на CodePen
Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS).
<form action="">Ссылка на CodePen
<label for="select3">Select item</label>
<select name="list" id="select3" multiple>
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>
P.S. Больше уроков у меня на канале.
P.P.S. Ссылка на git репозиторий.
<input> - тег который мы вкладываем внутрь тега <form>, с помощью него мы будем создавать интерактивные поля для ввода информации пользователем.
Тег <input> можно использовать и вне тега <form>.
Также имеет много атрибутов позволяющих настроить его внешний вид, поведение и работу.
<input type="text">
<input type="number">
<input type="email">
<input type="tel">
<input type="checkbox">
<input type="radio">
<input type="button" value="Submit">
<input type="submit" value="Submit">
<input type="color">
<input type="date">
<input type="time">
<input type="file">
<input type="hidden">
<input type="password">
<input type="range">
<input type="url">
Это основные типы тега <input>, в зависимости от типа тега он может принимать какие-то атрибуты или не принимать их, об этом лучше читать в документации.
Рассмотрим несколько атрибутов на примере стандартного input для ввода текста.
<input type="text" value="Some text here">
value - позволяет нам определить или предопределить значение тега input.
<input type="text" placeholder="First name">
placeholder - определяет текст, который будет показа пользователь внутри input до того момента пока пользователь не начнет вводить свое значение. Доступен не всем типам input.
<input type="text" required>
required - определяет, будет ли обязательным этот input в рамках текущего тега <form>.
<input type="text" disabled>
disabled - определяет, будет ли у пользователя возможность редактировать содержимое input
<input type="text" pattern="">
pattern - в качестве значения принимает регулярное выражение которые будет проверять правильность введенных данных.
<input type="text" name="first_name">
name - задает имя для нашего input
<form id="form_id"></form>Атрибут form - позволяет связать input с тегом <form>, input лежит вне тега <form>.
<input type="text" form="form_id">
Атрибутов <input> существует огромное количество, мы рассмотрели только самые распространенные.
Label - <label>
Это тег позволяющий указывать подпись для элемента, обычно используется вместе с тегом input. input и label можно связать с помощью id для input и for для label.
<form action="">
<h2>Contact form #1</h2>
<div>
<label for="first_name">First name:</label>
<input id="first_name" type="text" placeholder="First name">
</div>
</form>
Также мы можем положить внутрь <label> тег <input> в таком случае они свяжутся автоматически и нам не нужно указывать атрибуты for и id.
<form action="">Пример
<h2>Contact form #2</h2>
<div>
<label>
<span>First name</span>
<input type="text" placeholder="First name">
</label>
</div>
</form>
<form action="">
<h2>Contact form #3</h2>
<div>
<label for="user_name">First name:</label>
<input id="user_name" type="text" placeholder="User name">
</div>
<div>
<label>
<span>User surname:</span>
<input type="text" placeholder="User surname">
</label>
</div>
<div>
<input type="submit" value="Submit">
<input type="reset" value="Reset from">
</div>
</form>
P.S. Больше уроков у меня на канале.
P.P.S Для тех кто хочет посмотреть код - ссылка на git репозиторий
<form> - Обычно этот тег оборачивает элементы с которыми пользователь может взаимодействовать. Это могут быть поля для ввода текста, выпадающие списки, заголовки полей. Всех их мы разберем далее.
<form> имеет достаточно много атрибутов, мы разберем самые распространенные.
Элемент <form> интерактивный, при правильном его описании мы можем отправлять данные которые расположены внутри нее, на сервер.
<form></form>
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>
action - определяет ссылку на сервер куда будут отправляться данные из <form>.
method - определяет метод http с помощью которого будут отправляться данные.
target - определяет в каком окне будет производиться отправка, в новом или текущем.
Также есть еще много атрибутов у тега <form>, о них читайте в документации
P.S Больше уроков у меня на канале
В современной верстке выделяется 2 типа элементов:
• Блочные (block level) - в основном, отвечают за каркас страницы.
• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.
Строчные элементы
Они не занимают всю ширину родителя в которого вложены, из-за чего соседствующие с ними элементы не переносятся на новую строку. Они высчитывают свою ширину в зависимости от ширины контента который в них вложен.
<div class="post">
<div class="post-title">
<h2>Hello world</h2>
</div>
<div class="post-content">
<p>Lorem ipsum <a href="#">dolor</a> sit amet, <b>consectetur</b> adipisicing elit.</p>
</div>
<div class="related-posts">
<ol>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
</ol>
</div>
</div>
В примере выше были добавлены несколько ссылок на внутри тега <p>, а также ссылки внутри списков. Как видите текст не переносится на новую строку, а остается на своем месте. Так работаю строчные элементы.
Основные строчные элементы
В качестве примера приведены только несколько строчных элементов, на самом деле и гораздо больше.
<span>Lorem</span>
<a href="#">Link to another page</a>
Теги для стилизации текста
<i>Italic text</i>
<em>Emphasis text more important than i tag</em>
<strong>Bold text more than b tag</strong>
Мы можем вкладывать строчные элементы в блочные и в другие строчные элементы
<p>Вкладывай блочные элементы в строчные не рекомендуется, так как это нарушает семантику и усложняет чтение кода.
Lorem <a href="#"><b>ipsum dolor</b></a> sit amet, <i>consectetur</i>.
</p>
ВАЖНО!
Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.
P.S. Больше уроков у меня на канале
Мы постарались сделать каждый город, с которого начинается еженедельный заед в нашей новой игре, по-настоящему уникальным. Оценить можно на странице совместной игры Torero и Пикабу.
Реклама АО «Кордиант», ИНН 7601001509