Мікродані – це новий підхід до створення додаткової описової інформації для HTML документа. За допомогою мікроданих ми можемо в HTML сторінці, крім самої структури документа, зберегти спеціальну інформацію, яка буде корисна пошуковим системам та іншим програмам, що аналізують документи. У цьому уроці Ви дізнаєтесь, як використовувати мікродані та словники мікроданих у HTML5. Друга частина уроку буде присвячена геолокації. Ви навчитеся створювати програми, які зможуть отримати координати користувача та визначити його поточне положення. Ви дізнаєтесь, як можна комбінувати Geolocation API та Google карти.

З 6 по 13 липня 2023 року на ITVDN проходить акція – ви можете пройти навчання за курсом "HTML5 & CSS3 Стартовий" безкоштовно! Курс українською мовою! Що таке HTML & CSS? В основі роботи будь-якого веб-сайту є демонстрація тексту, зображень та іншого контенту у вікні спеціальної програми – веб-браузера. За допомогою HTML створюється початкова розмітка (каркас) кожної веб-сторінки. Потім використання CSS перетворює сайт, налаштовуючи спосіб відображення елементів і надаючи йому привабливий і ефектний зовнішній вигляд. Вивчення цих технологій є основою для навчання будь-якого верстальника та веб-розробника. Також основами HTML & CSS мають володіти веб-розробники серверної сторони (BackEnd), веб-розробники повного циклу (FullStack), SEO спеціалісти, а також інші фахівці, дотичні до веб-розробки та/або відповідальні за розміщення контенту на веб-сторінках. Про курс “HTML5 & CSS3 Стартовий” Автор відео курсу – Віталій Мазяр, FrontEnd розробник та тренер-консультант навчального центру CyberBionic Systematics. На курсі «HTML5 & CSS3 Стартовий» ви познайомитеся з основними конструкціями та принципами використання цих базових мов роботи веб-сайтів. Ви познайомитеся з HTML-тегами та їх використанням, з особливістю того, як влаштована структура будь-якого сайту, що таке блоки, як формується текст та відображаються картинки. Дізнаєтесь, як працювати з таблицями та списками, їх правила вкладеності, дізнаєтеся правила розміщення блоків та способи роботи зі шляхами для файлів. Програма курсу: Введення в HTML. Типи елементів та атрибути. Введення в CSS. Визначення розмірів блоків. Робота з відступами, властивість margin. Робота з текстом і видимістю елементів. Верстання з використанням Flexbox. Комбінування селекторів. Робота з фоном, властивість background. Семантичне верстання. Для кого цей курс Курс призначений насамперед для повних новачків, які тільки-но відкривають для себе світ верстання та FrontEnd розробки і не мають попереднього досвіду в ІТ. Також він підійде для практикуючих розробників, котрі бажають познайомитися з мовами верстання HTML & CSS і швидко опанувати їх основи. Курс входить до комплексних програм навчання за спеціальностями: FrontEnd Developer Верстальник сайтів React Developer UI/UX Designer Python Developer ASP.NET Core Developer ASP.NET MVC Developer PHP Developer Ruby Developer Чого ви навчитеся на даному курсі: Розуміти основи використання базових конструкцій мови HTML і мови стилів CSS. Створювати прості односторінкові сайти. Реалізовувати головне меню сайту. Розуміти основи адаптивної та кросбраузерної розробки сайтів. Створювати блок соціальних мереж. Створювати картки товару та подібні до них інформаційні блоки. Реалізовувати верстання сайту за допомогою модуля Flexbox. Терміни акції Акція проходить з 6 до 13 липня 2023 року включно. Доступ до курсу відкривається на 10 днів. Доступ до курсу не надається громадянам росії та білорусі.

Введение К сожалению, от бумажных форм не скрыться даже сегодня. Разумеется, когда появились web-формы, распространение бумажных сбавило свой былой темп. В наше время, когда нужно зарегистрироваться в системе, необходимо просто посетить соответствующий веб-сайт и заполнить веб-форму через браузер. У такой веб-формы будет кнопка в нижней части экрана, для сиюминутной передачи информации нужно всего лишь щелкнуть по ней. Веб-форма – это в первую очередь удобный и быстрый способ передать серверу информацию пользователя для обработки. Веб-формы прежде всего были придуманы, чтобы избавиться от неудобств предшественников – бумажных форм. А также для простоты обмена информациtq в социальных сетях и для удобств электронной коммерции: например, легко можно осуществлять электронную оплату. Нет сомнений, на сегодняшний день веб-формы – необходимая часть любого веб-сайта. По существу, данная форма – это HTML-документ, состоящий из различных элементов и атрибутов. Теперь рассмотрим создание HTML5 форм. Прочитав эту статью, Вы научитесь создавать объёмную форму с помощью HTML5.  Основы создания формы index.html – HTML-файл (показанный ниже). В него Вы добавите HTML-код, чтобы создать форму. Читая эту статью, Вы будете добавлять код между закомментированными тегами start и end. <!DOCTYPE html> <html> <head>     <title>Formidable Form with HTML5title> head> <body>     <div class="container">         <header>             <h1>Formidable Form with HTML5h1>         header>         <div class="form">                                 div>     div> body> html> Приступайте к работе с HTML формой HTML форма – основа многих веб-форм, известных на сегодняшний день. Она может содержать следующие элементы ввода данных: 1. Текстовые поля, поля пароля, checkbox, radio buttons и кнопки submit. 2. Текстовая область и выпадающие списки. Они вместе предоставляют средства управления UI, чтобы ввести и отправить информацию на сервер. Кроме того, форма может содержать элементы fieldset, legend и label. В любом текстовом редакторе откройте файл index.html и добавьте HTML-код, между тегами и . Как только это сделаете, сохраните файл и откройте его в браузере – и увидите результат.     Как продемонстрировано, код для формы мы включаем между тегами и . имеет три атрибута: Id. Содержит значения – к примеру, particularsform – используемые для ссылки на HTML-элемент в JavaScript и CSS. Action. Содержит URL веб-страницы – данные формы будут отправлены на него после ввода. Method. Присваивает значение «get» в данном примере. Метод get передаст данные формы на страницу получения, добавляя их в виде пар имя-значение в URL-страницы. В данном атрибуте иногда ещё используется метод post. Тег – самый важный в элемент HTML-форме. Он определяет поле ввода в теге. <input type="submit"> определяет кнопку отправки. Когда пользователь нажимает эту кнопку, она отправляет данные формы в файл, определенный в атрибуте «action». Добавьте выделенный код в index.html. Это выведет на экран кнопку отправки с заголовком «Sign up». Заголовок «Sign up» присвоен через значение атрибута.  Введите любые значения в текстовые поля имени и адреса электронной почты соответственно, щелкните по кнопке «Sign up» и наблюдайте. Значения, введенные в соответствующие текстовые поля вместе с их соответствующими именами, были бы отправлены в acknowledge.html, значение атрибута action тега . В данном примере acknowledge.html просто выведет в браузере на экран данные, полученные от index.html. Обратите внимание на строку поиска. Вы видете, что имя, электронная почта, и кнопка отправки были добавлены к URL acknowledge.html как пары значение-имя таким образом: Это то, как данные передаются к странице получения, когда в теге определяется значение get. maxlength Вы можете добавить атрибут maxlength к элементу , чтобы ограничить вводимое пользователем количество символов. <input maxlength="10"> Тег <input type="password"> определяет поле пароля. Это текстовое поле, символы в котором замаскированы в форме звездочек или кругов. Добавьте выделенный код в index.html. Это создаст два поля пароля. Когда Вы введете текст в эти поля, Вы увидите, что каждый символ был превращен или в звездочку, или в круг. Тег <input type="radio"> –  тег-переключатель. Переключателей обычно как минимум два и они находятся в группах, используют одинаковое значение для их атрибутов name, но различное значение для их атрибутов value. Пользователь может  выбрать только один из них в группе. Добавьте выделенный код в index.html. Это создаст два переключателя для выбора пола. Эти переключатели используют одинаковое название "Gender", который идентифицирует их как группу, и только один пол может быть выбран в этой группе. Если Вы измените одно из названий на другое значение, Вы нарушите это правило, и обе кнопки могут быть выбраны одновременно. Но, конечно, это не имеет никакого смысла для выбора пола.   and Тег используется, чтобы сгруппировать связанные элементы в форме, создавая рамки вокруг них. Тег используется, чтобы определить заголовок для этой рамки. Давайте изменим код выделенной области. Это образует рамки вокруг этих 2 переключателей для выбора пола с заголовком "Gender". Тег <input type="checkbox"> создает область с флажком, чтобы пользователь мог выбрать или отменять опцию. Как в случае с переключателями, флажки обычно находятся в группах. Но в отличие от переключателей, пользователь может выбрать больше, чем одну строку с флажком. Добавьте выделенный код в index.html. Это создаст шесть переключателей для выбора хобби. Эти переключатели используют одинаковое название "hobbies", идентифицирующее их как группу. Тег <input type="file"> определяет кнопку загрузки для пользователей, чтобы выбрать и загрузить файл. Добавьте выделенный код в index.html. Это создаст кнопку загрузки, где пользователь может щелкнуть, чтобы выбрать файл и загрузить его. Таким образом можно без проблем создать свою форму с помощью HTML5. Источник: http://www.codeproject.com/Articles/761123/Beginners-Guide-to-HTML-CSS-Formidable-Forms-with

<p>На этом вебинаре мы займемся созданием анимации молекулы ДНК с помощью HTML и CSS, а также дополнительных инструментов. Мы создадим ключевые кадры и посмотрим, как это возможно воспроизвести с помощью HTML и CSS. Сделаем рефакторинг CSS в SCSS и с помощью директивы @for уменьшим количество кода в 2 раза.</p> <p><strong>План вебинара:</strong></p> <p>1) Разбор ключевых кадров анимации с помощью видео редактора.</p> <p>2) Создание каркаса молекулы и элементов, которые будут ее составлять. Применение таких свойств как position: relative и absolute, display: flex.</p> <p>3) Создание ключевых кадров в CSS.</p> <p>4) Рефакторинг кода из CSS в SCSS.</p> <p>5) + Добавим небольшой микс к молекуле &ndash; связывающие линии атомов.</p> <p>6) В заключение поговорим о возможных вариантах улучшения и использования дополнительных инструментов для создания разнообразных спецэффектов.</p> <p><strong>Целевая аудитория: </strong></p> <p>Данный вебинар будет интересен тем, кто изучает HTML, CSS и интересуется анимацией и оживлением веб страниц с помощью CSS анимации.</p>

<p>Symfony — один из самых популярных PHP фреймворков, который использует паттерн Model-View-Controller и используется для веб-разработке. Symfony дает возможность ускорить разработку и управление веб-приложениями, позволяет легко решать рутинные задачи веб-программиста. Имеет поддержку множества баз данных (MySQL, PostgreSQL, SQLite или любая другая PDO-совместимая СУБД). Во время вебинара мы создадим модуль с менеджментом списка заметок. У вас будет список заметок с возможностью просматривать, добавлять, удалять и изменять заметки. Мы напишем приложение, отвечающее за менеджмент заметок. </p> <p>Используемые технологии: HTML, PHP, MySQL. </p> <p>Используемые компоненты Symfony: Flex, Profiler, Web Server, Symfony Form, Doctrine 2, Twig, Router. </p> <p>Предварительные требования: Углубленные знания в PHP, ООП в PHP, знания MYSQL, знания HTML, знания основ HTTP протокола. </p> План вебинара: <ol> <li>Установка Symfony 4. </li> <li>Описание директорий и файлов Symfony 4. </li> <li>Создание первого Контроллера и маршрута. </li> <li>Создание HTML страницы с использованием Bootstrap. </li> <li>Создание Базы Данных и Doctrine 2 сущности. </li> <li>Создание CRUD для менеджмента заметок. </li> <li>Тестирование нашего приложения. </li> </ol> <p>Целевая аудитория:программисты, IT-студенты, инженеры. </p>

<p>Чтобы начать писать на JavaScript, не обязательно сразу углубляться в изучение&nbsp;документации. На примере написания простой Memory Game мы разберем, как выбирать элементы в DOM, проходиться по спискам и массивам, добавлять, убирать элементы и слушатели действий.</p> <p>На вебинаре мы попробуем быстро погрузиться в практическую разработку на JavaScript. Вам для этого понадобятся базовые знания HTML, CSS и JavaScript.</p> <p><strong>План вебинара:</strong></p> <ol> <li>Создание структуры проекта, написание первых файлов.</li> <li>Разметка и стилизация игрового поля с помощью HTML и CSS.</li> <li>Основы работы с перспективой в CSS.</li> <li>Сохранение и сравнение выбранных карточек.</li> <li>Написание дополнительного функционала.</li> <li>Итоги, вопросы и ответы.</li> </ol> <p><strong>Целевая аудитория:</strong></p> <p>Данный вебинар будет интересен для людей, которые хотят изучить основы JavaScript в легкой и доступной форме без многочасового чтения документации.</p>

Хочеш перейти в ІТ, але не знаєш, з чого почати? Тест-драйв ITVDN — це твоя можливість без ризику спробувати дві затребувані спеціальності: Frontend та Python-розробку. Це не рекламні ролики, а повноцінні вступні курси з відео, практикою, теорією та сертифікацією. 🧠 Ціль тест-драйву:  – допомогти новачкам визначитися з напрямком  – познайомити з навчальним форматом ITVDN  – показати, як виглядає реальний старт в ІТ 📌 Перший тиждень — HTML & CSS Стартовий курс 🔹 Що таке HTML & CSS? HTML — основа будь-якого сайту. Це каркас, структура і контент. CSS — це все, що відповідає за вигляд і стиль сторінки. 🔹 Чого ти навчишся:  ✔ Створювати власні односторінкові сайти  ✔ Працювати з HTML-тегами, таблицями, списками  ✔ Формувати структуру сторінки та елементи інтерфейсу  ✔ Застосовувати CSS-стилі: кольори, фон, шрифти, розміри  ✔ Робити адаптивну верстку з Flexbox  ✔ Використовувати селектори, блоки, семантику ЦЮ ЧАСТИНУ ЗАВЕРШЕНО 📌 Другий тиждень — Python Стартовий курс 🔹 Що таке Python? Одна з найпопулярніших мов у світі. Python використовують для створення веб-додатків, автоматизації, Data Science, AI/ML, кібербезпеки. 🔹 Чого ти навчишся:  ✔ Розуміти синтаксис Python і логіку програмування  ✔ Писати прості скрипти та обробляти дані  ✔ Працювати з циклами, умовами, функціями  ✔ Застосовувати списки, словники, множини та кортежі  ✔ Обробляти помилки і будувати стабільні програми  ✔ Створювати нескладні, але корисні Python-застосунки ЦЮ ЧАСТИНУ ЗАВЕРШЕНО 🎯 Після проходження тест-драйву ти:  ✔️ Визначиш, який напрямок підходить саме тобі  ✔️ Отримаєш реальний досвід навчання в ITVDN  ✔️ Зрозумієш, як виглядає ІТ-освіта в дії  ✔️ Зробиш перший крок до нової професії — легко, без стресу і без витрат Тест-драйв ITVDN — це твоя можливість без ризику спробувати дві затребувані спеціальності з 1 травня по 14 травня включно: Frontend та Python-розробку.  📞 Залишились питання? — Ми допоможемо! ❓ Не знаєш, що обрати? Отримай консультацію: 📩 Telegram: @itvdn_support 📧 Email: support@itvdn.com 📞 Телефон: +38 044 344 16 22 або +44 204 577 32 36

<p>Приглашаем на вебинар по созданию лендинга! Он отлично подойдет начинающим, которые хотят стать FrontEnd разработчиками и готовы к первому шагу &ndash; изучению основ вёрстки.</p> <p>Вы познакомитесь с языками вёрстки &ndash; HTML5 и CSS3 &ndash; и узнаете, как создать свой первый одностраничный веб-сайт &ndash; лендинг. Автор покажет на реальном примере, как создать структуру страницы с помощью HTML, а также оживить и придать привлекательный внешний вид с использованием CSS.</p>

Использование Angular + Firebase в приложениях Трехсторонняя привязка данных Сборка приложения с Gulp Краткое описание: На этом вебинаре мы рассмотрим создание приложения от верстки до сборки и деплоя. Сверстаем шаблон при помощи SASS, разберемся со сборщиком проектов Gulp и далее мы перейдем к самому интересному - Angular 1.5 + Firebase. Основной «фишкой» данного приложения является ТРЕХсторонняя привязка данных. Приложение не будет сложным для людей, которые хоть немного знакомы с Angular. Предварительные требования: Знание HTML, CSS, JavaScript, знакомство с Angular JS, понимание принципов работы с ним.

JavaScript – це одна з найпопулярніших мов програмування, без знання якої не обійтися у web-розробленні і яку можна використовувати для вирішення інших завдань. Сьогодні JavaScript, крім додавання динамічної поведінки HTML-сторінкам, застосовується в розробленні серверних додатків, ігрових та мобільних застосунків, а також для створення сценаріїв для автоматизації тестування та багато іншого. Вивчення JavaScript - це гарний внесок у майбутнє, тому що мова стане в нагоді для вирішення різноманітних завдань і буде корисною як FrontEnd або BackEnd розробнику, так і тестувальнику програмного забезпечення.