Вот такой удобный инструмент 🔥 находится прямо в Вашем браузере , который будет помогать Вам в разработке Вашего сайта 😁
1 год назад
obukhovskiy2007@mail.ru
1
подписчик
Марк Обуховский
Опубликовано фото
🤓 "Создание Веб-сайта:" DevTools - это инструмент, которым разработчики сайтов пользуются постоянно. 🦾 Многие из Вас уже видели этот инструмент и даже пользовались, чтобы поменять какой-либо текст на странице. (Многие делали так на уроках информатики 🤭) ❓Чем же удобен DevTools? 🤔 — Вы можете просматривать код страницы, изменять его и при этом ничего не испортите 😉 (страница вернется в первоначальное положение после перезагрузки 🔄). Вызвать DevTools можно с помощью нажав на элемент правой кнопкой мыши и выбрав пункт "Просмотреть код" или "Исследовать элемент" (на разных компьютерах по разному) Наиболее часто используются вкладки style и computed. ❔За что же отвечает каждая из них? 🤷♂ • Во вкладке style мы можем увидеть все стили, которые имеет объект. Применение любого стиля мы можем отменить, просто убрав галочку. При этом строка со стилем зачеркнётся. • Во вкладке computed мы можем увидеть блочную модель элемента - размеры полей, отступов, границ и самого элемента.
Всем привет 🤗 ☀️ Сегодня я расскажу Вам о DevTools 🔥👇
🤓 "Создание Веб-сайта:" Как я уже говорил, бывают случаи, когда мы не можем сгруппировать элементы на странице, используя семантические теги. В этом случае мы используем тег div. Чтобы сделать данный тег доступным, мы используем атрибут role="..." <div role=" "> </div> Другими словами, мы присваиваем нашей группе какую-то роль. —❓А какие роли бывают? 🤷♂ — <div role="banner"></div> <!-- Заголовок страницы / баннер --> <div role="img"></div> <!-- Группировка изображений --> <div role="comment"></div> <!-- Обозначение комментария --> <div role="contentinfo"></div> <!-- Обозначение таких данных, как номер телефона / адрес --> <div role="alert"></div> <!-- Сообщает о том, что контент внутри группы может измениться --> <div role="navigation"></div> <!-- Указывает на секцию навигации со списком ссылок --> <div role="complementary"></div> <!-- Определяет дополнительный раздел, который может функционировать независимо --> <div role="button"></div> <!-- Интерактивный элемент, предназначенный для нажатия --> Вот такие роли мы можем присваивать тегам группировки для усиления их семантики
☕ Всем доброе утречко 🌅 Сегодня мы будем улучшать семантику тегов группировки 🔥 Поехали 😉 🚙
Вот такие существуют способы группировать элементы на странице. Данные методы более читабельны в коде и доступны большему количеству браузеров. Рекомендуется использовать именно эти теги для группировки элементов. Но иногда мы хотим сгруппировать элементы, которые не попадают ни в одну из данных категории. 😒 В таких случаях всё же приходится использовать тег div. 🥲 — Данный тег также можно сделать доступным для браузера. 🔥 — Как это сделать? 🤷♂ — Об этом я расскажу Вам завтра 😌
🤓 "Создание Веб-сайта:" Иногда мы хотим скрыть какое-либо длинное описание элемента страницы, которое может оказаться неполезным для пользователя. В этом случае используется 👇 <details>...</details> <!-- Скрывает подробное описание какого-либо элемента страницы, которое пользователь может развернуть --> <summary>...</summary> <!-- Данный тег располагается между тегами details и является кратким описанием более подробного --> Для подписи картинки на странице используется следующая структура: <figure> <!-- Контейнер, объединяющий картинку и подпись к ней --> <img src="..." alt="..."> <figcaption>...</figcaption> <!-- Подпись картинки --> </figure> Наверное многие сейчас задумаются: "А что такое alt ?" 🤔 Атрибут alt="..." является обязательным. Он содердит в себе краткое описание (название) картинки, которое отображается, если картинка не прогрузилась или проговаривается вспомогательными программами, читающими текст страницы. Ещё одним полезным атрибутом является lang. Он прописывается внутри тега html и сожержит основной язык страницы. Благодаря этому атрибуту, браузер сможет переводить текст сайта на другие языки. <html lang="ru"> </html> На многих сайтах существует регистрация. Чтобы собрать вводимые пользователем данные, используются формы. Элемент form является контейнером для нескольких input и кнопки отправки. <form> Username:<input type="text"><br> Password:<input type="password"><br> <button>Send</button> </form> Внутри контейнера form мы можем группировать элементы и выделять их границами <form> <fieldset><!-- Устанавливает границы вокруг объединённых объектов --> FirstName:<input type="text"><br> LastName:<input type="text"><br> </fieldset> </form> Мы также можем подписывать отдельные блоки 👇: <form> <fieldset> <legend>UserInfo</legend><!-- подписывает группу элементов, обведённых границей --> FirstName:<input type="text"><br> LastName:<input type="text"><br> </fieldset> </form> В качестве input может использоваться и поле ввода текста - textarea. Размер данной области мы можем настраивать по горизонтали и вертикали с помощью атрибутов cols и rows. <textarea rows="3" cols="4"></textarea> В форматах также существуют метки. Метки выполняют ту же функцию, что и placeholder, но являются отдельным тегом, а не атрибутом. Для каждого input в нашей форме мы должны прописать id, для привязки метки. При создании метки мы используем атрибут for и через равно в двойных кавычках прописываем id-input. ❗Учтите, что в данном случае хэштег(#) не требуется 👇 <form> <fieldset> <legend>User Info</legend> <label for="name">Name: </label> <!-- Создание метки --> <input type="text" id="name"><br> <label for="email">E-mail: </label> <input type="text" id="email"><br> <label for="textarea">Describe Yourself: </label> <textarea id="textarea" rows="3" cols="5"></textarea> </fieldset> </form>
ВСЕМ ПРИВЕТ!!! 😊 Давненько не было контента на данном канале 😞 Но сегодня мы это исправим 😉 Ниже я расскажу Вам о группировке элементов страницы не с помощью div, а доступных тегов для разных случаев 🔥
🤓 "Создание Веб-сайта:" Доступность сайта означает, что каждый человек, включая людей с ограниченными возможностями, может выполнить любое действие на сайте. При этом неважно, использует пользователь клавиатуру или любое другое устройство. Семантическая вёрстка или семантический HTML-код — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением), а также предполагающий логичную и последовательную иерархию страницы. Рассмотрим семантику в основном коде страницы - HTML-документе. Существуют семантические теги, которые помогают браузеру понять, что подразумевает собой код и как его преподнести пользователю: • <p>...</p> _обозначение абзаца. • <time>...</time> _обозначение времени. • <adress>...</adress> _обозначение адреса. • <abbr title="...">...</abbr> _обозначение аббревиатуры. Когда пользователь наводит мышь на такую аббревиатуру, появляется расшифровка. • <strong>...</strong> _обозначение важного текста. Текст становится жирным и выделяется интонацией при чтении браузером для, например, незрячих людей. • <b>...</b> _текст становится жирным, но не выделяется интонацией. • <em>...</em> _обозначение акцента. Текст становится курсывным и выделяется интонацией. • <i>...</i> _текст становится курсивным, но не выделяется интонацией. • <q>...</q> _обозначение цитаты. • <cite>...</cite> _обозначение автора цитаты. • <pre>...</pre> _текст между данными тегами будет сохранять свою стилизацию, то есть если вы поставите три пробела, то и в браузере отобразится три пробела. • <sub>...</sub> _текст отображается в нижней части строки. Удобно для написания химических формул. • <sup>...</sup> _текст отображается в верхней части строки. Удобно для написания, например, метров кубических. • <u>...</u> _подчеркнутый тест. • <code>...</code> _обозначение какого-либо кода. • <s>...</s> _зачеркнутый тест. • <wbr> _пустой тег, который обозначение наилучшее место для переноса контента, если тот не помещается на странице (например, браузер открыт на половину экрана). Существуют также семантические группы. Мы знаем, что можно группировать элементы страницы с помощью div, но браузеру данная группировка ни о чем не говорит. Поэтому лучше использовать 👇: • <header>...</header> _обозначение "головной" части страницы. • <footer>...</footer> _обозначение нижней части страницы. В основном в такой группе находятся сведения о, например, компании (контакты, адреса). • <main>...</main> _обозначение основного контента страницы. • <section>...</section> _обозначения отдельных частей страницы. • <nav>...</nav> _обозначение группы навигационных ссылок. Вот такая семантика у HTML кода. Однако это далеко не всё. Мы с Вами еще будем разбираться в доступности страницы 😜🔥
Всем привет!!! 😊😉 Сегодня мы поговорим на тему "доступность сайта. Семантика html кода". Поехали 🔥👇
🤓 "Создание Веб-сайта:" ❓Помните мы вызвали функцию JavaScript в HTML коде через нажатие кнопки? <button onclick="showMessage()"> Show </button> Подобные взаимодействия пользователя с элементами страницы проще записывать через свойства событий непосредственно в JavaScript коде. Оформляется данный код следующим образом: имяЭлемента.свойство = имяСобытия; В качестве свойства выступает тот самый onclick, а в качестве события - функция, которая запускается при нажатии на элемент. И да, элементом может быть не только кнопка. let prompt = document.querySelector("#prompt"); const el = document.querySelector ("button"); function publish() { prompt.innerHTML = "Website Published!"; } el.onclick = publish; Существуют и другие свойства событий: • ondblclick - событие запускается при двойном щелчке на элемент. • onscroll - событие запускается при прокручивании элемента. • onchange - событие запускается после внесения изменений. • oninput - событие запускается во время изменений. Более современный метод добавления событий к элементам - это метод addEventListener(). В скобках мы пишем свойство события в двойных кавычках и через запятую имя события (функции). Однако в этом случае мы не пишем приставку on в свойстве события. item.addEventListener("click", changeColor); Мы также можем удалять события с помощью команды removeEventListener(). Это может пригодится, когда мы хотим, чтобы изменения произошли один раз. Рассмотрим пример 👇 const item = document.querySelector("div"); function changeColor () { item.classList.toggle("pink"); item.removeEventListener( "click", changeColor); } item.addEventListener("click", changeColor); Как мы все знаем, существуют сенсорные устройства. Для таких устройств существует отдельные свойства событий, связанные с касанием: • touchstart - событие запускается, когда пользователь прикоснулся к элементу. • touchend - событие запускается, когда пользователь "отпустил" элемент. • touchmove - событие запускается, когда пользователь перемещает палец по элементу. • touchcancel - событие запускается, когда контакт прерывается. В отличие от touchend, когда пользователь полностью убирает палец с экрана, touchcancel запускается, когда пользователь сдвинул свой палец. Вот такие существуют события в JavaScript. Теперь мы с Вами можем создавать их и использовать для своих целей 🔥😜