В основі роботи будь-якого веб-сайту демонстрація тексту, зображень та іншого контенту у вікні спеціальної програми – веб-браузера. За допомогою мови HTML створюється початкова розмітка (каркас) кожної веб-сторінки. Потім використання CSS перетворює сайт, налаштовуючи спосіб відображення елементів і надаючи йому привабливий і ефектний зовнішній вигляд. Вивчення цих мов є основою для навчання будь-якого верстальника та веб-розробника.

HTML5 и CSS3 - это фундаментальные технологии, без знания которых не обойтись любому верстальщику и веб-разработчику. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид. Данный курс откроет для вас увлекательный мир верстки и предоставит базовые знания по созданию интернет-страниц.

Angular – це сучасний фреймворк від компанії Google, написаний на TypeScript і забезпечує FrontEnd-розробника зручними інструментами для створення вебдодатку, а також задає дизайн програми та впорядковану структуру коду. Використання Angular дає можливість будувати інтерактивні та динамічні вебдодатки набагато швидше та з меншим обсягом написання коду, ніж у разі застосування стандартного JavaScript та HTML.

Перевірка даних – основна роль JavaScript, коли йдеться про HTML форми. Дані, введені користувачем, можуть не відповідати очікуванням розробника. Користувач може не ввести якесь обов'язкове значення або вказати дані в неправильному форматі, наприклад, коли потрібно ввести адресу електронної пошти та номер телефону. На цьому уроці ви дізнаєтеся про події, які будуть корисними при перевірці даних, а також розгляньте кілька підходів в організації процесу перевірки введених значень, у тому числі вивчіть перевірку даних без застосування JavaScript за допомогою HTML5 атрибутів для валідації.

У цьому відео уроці будуть розглянуті такі теми: • Базові типи, що використовуються під час створення контролерів. • Властивості для отримання даних із контексту запиту. • Створення простої HTML форми та обробка даних на сервері. • Способи передачі даних з контролера у представлення. • Відповіді від контролера. Класи, похідні від ActionResult.

Практическая работа, пошаговой реализации на тему - "Книга рецептов для iOS". Данная работа будет разделенна на 3 части. Во второй части реализация отдельных страниц для каждого рецепта, возможность нажимать на каждую ячейку в таблице. Дополнительно использование объекта UIWebView и использование HTML страницы прямо в приложении. Создание поиска в приложении, используя Search Display Controller. ITVDN желает приятного обучения.

Вебинар познакомит слушателя c новыми возможностями пятой версии языка разметки HTML (HyperText Markup Language). Хотя сама спецификация HTML5 еще находится на стадии разработки, в этом вебинаре Вы узнаете возможностях, которые уже доступны веб разработчику, среди которых создание растровой графики (Canvas), геолокация (Geolocation API), микроданные (Microdata), протокол WebSocket, веб хранилища, многопоточность (Web Workers), язык математических представлений MathML и многие другие.

Введение В данной статье с помощью некоторых примеров мы научим Вас использовать свойство CSS: Z-index. Z-index используется для стабилизации порядка элементов, которые перекрываются. Z-Index является важным свойством CSS. Оно указывает на уровень элемента в стеке. Свойство z-index регулирует вертикальный порядок перекрытия элементов, а сам z-index определяет, какой элемент будет располагаться выше остальных. Элемент с большим указателем порядка стека всегда будет располагаться выше элемента более низкого порядка. А элемент с самым большим индексом перекроет остальные элементы. «Порядок стека» обращается к позиции элемента по оси Z. Чем выше значение z-индекса, тем ближе элемент будет располагаться к верхней части порядка наложения. Синтаксис Z-index  z-index: auto| number | initial | inherit;  Z-index: auto Это настройка по умолчанию, что приписывает одинаковое значение и элементу, и родителю. Если значение не определено для родителя, то оно равняется нулю (0); Z-index: integer number Z-index: 1 Z-index: 2 Z-index: 3 Z-index: negative number Z-index: -1 Z-index: inherit Принимает такое же определенное значение, как свойство элемента родителя. Ниже предоставлен HTML код, который будем использовать.  <!DOCTYPE html> <html> <head>     <title>Z-Index tutorialtitle> head> <body>     <div id="one">Onediv>     <div id="two">Twodiv>     <div id="Three">Threediv>     <div id="Four">Fourdiv>     <div id="Five">Fivediv> body> html> Далее мы используем CSS код для установки внешнего вида всем элементам HTML, что использовались ранее. #one {     border: solid 5 px silver;     background-color: Aqua;     position: absolute;     z-index: 1;     opacity: 0.5;     height: 100 px;     width: 100 px; } #two {     border: solid 5 px silver;     background-color: Green Yellow;     position: absolute;     top: 30 px;     left: 35 px;     z-index: 2;     opacity: 0.5;     height: 100 px;     width: 100 px; } #Three {     border: solid 5 px silver;     background-color: Coral;     position: absolute;     top: 60 px;     left: 60 px;     opacity: 0.5;     z-index: 3;     height: 100 px;     width: 100 px; } #Four {     border: solid 5 px silver;     background-color: Yellow;     position: absolute;     top: 90 px;     left: 90 px;     opacity: 0.5;     z-index: 4;     height: 100 px;     width: 100 px; } #Five {     border: solid 5 px silver;     background-color: MediumSpringGreen;     position: absolute;     top: 120 px;     left: 120 px;     opacity: 0.5;     z-index: 5;     height: 100 px;     width: 100 px; } Полный код <!DOCTYPE html> <html> <head>     <title>Z-Index tutorialtitle>     <style>         #one {             border: solid 5px silver;             background-color: Aqua;             position: absolute;             z-index: 1;             opacity: 0.5;             height: 100px;             width: 100px;         }         #two {             border: solid 5px silver;             background-color: Green Yellow;             position: absolute;             top: 30px;             left: 35px;             z-index: 2;             opacity: 0.5;             height: 100px;             width: 100px;         }         #Three {             border: solid 5px silver;             background-color: Coral;             position: absolute;             top: 60px;             left: 60px;             opacity: 0.5;             z-index: 3;             height: 100px;             width: 100px;         }         #Four {             border: solid 5px silver;             background-color: Yellow;             position: absolute;             top: 90px;             left: 90px;             opacity: 0.5;             z-index: 4;             height: 100px;             width: 100px;         }         #Five {             border: solid 5px silver;             background-color: MediumSpringGreen;             position: absolute;             top: 120px;             left: 120px;             opacity: 0.5;             z-index: 5;             height: 100px;             width: 100px;         }     style> head> <body>     <div id="one">Onediv>     <div id="two">Twodiv>     <div id="Three">Threediv>     <div id="Four">Fourdiv>     <div id="Five">Fivediv> body> html> Наш результат: Заключение Надеемся, что данная статья Вам понравилась. Она будет полезной для новичков в HTML и CSS. Источник: http://www.c-sharpcorner.com/UploadFile/88d8c0/z-index-property-in-css/

Введение AJAX (Asynchronous JavaScript and XML) - это концепция объединения воедино нескольких технологий. Результатом их совместной роботы является способность обмена данными между сервером и страницей без ее полной перезагрузки. Примером использования данной технологии является «живой поиск», реализованный почти во всех современных поисковиках. Работа такого поиска состоит в том, что при наборе пользователем поискового запроса при помощи JavaScript с сервера будет получен список возможных дополнений. Зачастую этот список выводится снизу поисковой строки. Рассмотрим небольшой пример. Напишем функцию для обработки пользовательского ввода, которая будет моментально отображать введенную информацию на странице. Сперва создадим HTML страничку и добавим в , в который поместим одно поле для ввода и один параграф . <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Simple exampletitle> head> <body>     <div>         <p>My name is <span id="namePlace">span>p>         <input type="text" id="name">input>     div> body> html> Далее добавим функцию для обработки ввода, а также обозначим для поля ввода эту функцию как обработчик события “onkeyup”. Назовем функцию “change” и просто возьмем значение поля с id= “name” и присвоим его элементу с id= “namePlace”. Код будет выглядеть так: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Simple exampletitle>     <script type="text/javascript" charset="utf-8" async defer>         function change() {             var res = document.getElementById("name").value;             document.getElementById("namePlace").innerHTML = res;         }     script> head> <body>     <div>         <p>My name is <span id="namePlace">span>p>         <input type="text" id="name" onkeyup="change()">input>     div> body> html> Откроем страницу в браузере: После введения своего имени, вы сразу же увидите его отображенным: В основе AJAX лежит использование XMLHttpRequest объекта, предоставляющего легкий способ получения данных от URL с частичной перезагрузкой страницы. Несмотря на то, что название данного объекта включает в себя «XML», он способен взаимодействовать с любыми типами данных, не только с XML. Также он поддерживает работу не только с HTTP протоколом, а и с многими другими (включая файлы и ftp). Для того чтобы создать экземпляр класса XMLHttpRequest, достаточно лишь добавить в код строку: var newRequest = new XMLHttpRequest(); Для создания кроссбраузерного экземпляра нужного класса потребуется следующий код: if (window.XMLHttpRequest) { // Mozilla, Safari, ...     newRequest = new XMLHttpRequest();     if (newRequest.overrideMimeType) {         newRequest.overrideMimeType('text/xml');     } } else if (window.ActiveXObject) { // IE     try {         newRequest = new ActiveXObject("Msxml2.XMLHTTP");     } catch (e) {         try {             newRequest = new ActiveXObject("Microsoft.XMLHTTP");         } catch (e) { }     } } Далее нужно создать JavaScript функцию для обработки ответа от сервера и указать свойству XMLHttpRequest объекта - onreadystatechange, что данная функция будет этим заниматься. Для реализации нам нужно присвоить свойству onreadystatechange имя данной функции без скобок (так как нам нужна лишь ссылка на функцию без ее вызова) или же пойти другим путем и присвоить саму функцию (название функции упускается).   Код для первого случая: function nameOfFunction() {     //body of the function } newRequest.onreadystatechange = nameOfFunction; Код для второго случая: newRequest.onreadystatechange = function () {     //body of the function }; Написание самой функции мы рассмотрим позже, а сейчас перейдем к созданию самого запроса, за что отвечают две функции описываемого ранее класса – open() и send(). Функция open() отвечает за инициализацию запроса. Рассмотрим несколько вариантов использования: ·        open( method, URL, async ) ·        open( method, URL, async, userName, password ) Параметром method задают HTTP метод, такой как GET или POST. Вторым параметром(URL) задается адрес запрашиваемой страницы. Параметр asynch – имеет булевое значение (true/false) и определяет, будет ли значение  асинхронным (true) или синхронным (false). В дальнейших примерах используются только асинхронные запросы, так что третий параметр всегда будем устанавливать в положительное значение. Последние два параметра userName и password определяют данные для авторизации пользователя. Функция send() отправляет запрос. Тип данных параметров этого метода не ограничен. Хочу отметить, что при значении параметра method - GET в методе open() передаваемое значение параметра метода send() будет null, так как у GET-запроса нет тела. Рассмотрим пример с использованием всех вышеперечисленных методов. Создадим HTML страничку и добавим в один с id=” textField” и вложенным в него параграфом . Также добавим блок для ввода текста "textarea" с id=”area”, а также одну кнопку для активизации работы наших функций. Присвоим событию onclick имя функции для создания запроса, в данном примере функция будет называться makeRequest(). <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Creation of AJAX requesttitle> head> <body>     <div id="area"><p>We will change this text with content of the given file.p>div>     <textarea id="ar" width="100"> Changeable texttextarea>br>     <button type="button" onclick="makeRequest()">Show content of the filebutton> body> html> Теперь напишем саму функцию makeRequest(), для этого стоит вспомнить все, о чем вы прочитали ранее. Первым делом создадим объект класса XmlHttpRequest, после чего присвоим функцию для обработки самого запроса, в нашем примере функция будет называться outputContents(newRequest) и будет принимать на вход сам запрос. Далее вызвать функцию open(), подав на вход соответствующие параметры (в качестве url подадим путь к текстовому файлу), и затем вызовем функцию send(). Функция outputContents(newRequest) будет получать ответ от сервера и далее вставит этот результат в поля с id=”area” и id=”textField”. Финальный код страницы: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title> Creation of AJAX requesttitle>     <script type="text/javascript" language="javascript">         function makeRequest() {             var newRequest = false;             if (window.XMLHttpRequest) { // Mozilla, Safari, ...                 newRequest = new XMLHttpRequest();                 if (newRequest.overrideMimeType) {                     newRequest.overrideMimeType('text/xml');                 }             } else if (window.ActiveXObject) { // IE                 try {                     newRequest = new ActiveXObject("Msxml2.XMLHTTP");                 } catch (e) {                     try {                         newRequest = new ActiveXObject("Microsoft.XMLHTTP");                     } catch (e) { }                 }             }             if (!newRequest) {                 alert('Ooops we have some problem with creation of XmlHttpRequest object!');                 return false;             }             newRequest.onreadystatechange = function () { outputContents(newRequest); };             newRequest.open('GET', 'login.txt', true);             newRequest.send(null);         }         function outputContents(newRequest) {             if (newRequest.readyState == 4) {                 if (newRequest.status == 200) {                     var res = newRequest.responseText;                     document.getElementById('textField').innerHTML = res;                     document.getElementById('area').innerHTML = res;                 } else {                     alert('There is some problems with the request!');                 }             }         }     script> head> <body>     <div id="textField"><p>We will change this text with content of the given file.p>div>     <textarea id="area" width="100"> Changeable texttextarea>br>     <button type="button" onclick="makeRequest()">Show content of the filebutton> body> html> В браузере мы увидим следующее: При нажатии на кнопку контент нашей страницы изменится таким образом: Надеемся, что вы разобрались с созданием забросов посредством AJAX и разделяете наше восхищение данной технологией.

Привет, друзья! Создание лендингов - автономных интернет-страниц, нацеленных на конкретное действие пользователя - один из трендов веб-разработки. Чаще всего лендинги создают для мероприятий, отдельных продуктов или услуг. Если вы владеете базовыми знаниями языков верстки HTML и CSS и при этом намерены научиться создавать эффективные лендинги, у нас для вас хорошая новость. С 9 по 16 апреля 2020 года на ITVDN проходит акция “Курс по верстке лендинга - бесплатно”. Участники акции получат бесплатный доступ к практическому курсу, который состоит из 9 уроков общей длительностью 8 часов. В курсе рассмотрены важные этапы создания лендинга с акцентом на адаптивности и интерактивности.   Темы уроков: Организация рабочего процесса. Препроцессор PUG. Препроцессор SASS. Непосредственно верстка (5 занятий). Создание интерактива на JavaScript.  Автор курса - Сергей Рубец - Full Stack JS Developer. В каждом уроке для вас будут доступны видео и исходные файлы с кодом автора. Доступ к курсу будет открыт на 10 дней. Курс входит в комплексные программы обучения по специальностям FrontEnd Developer и Верстальщик и демонстрирует практическое применение знаний языков HTML, CSS и JavaScript в решении реальной задачи - создании лендинга. Желаем вам здоровья и успехов в изучении основ верстки! Оставайтесь на ITVDN!