WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Наши преимущества

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


Регистрация на сайте

HTML 5

  • CSS

  • CSS - Макет. Колонки

    Несколько примеров, используя разные CSS свойства


    HTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Multicolumns</title> <style> div{ background-color: #EEE; } #colTest1{ columns: 2; } #colTest2{ columns: 3; column-rule: 1px dotted red; } #colTest3{ width: 100%; display: flex; flex-flow: row; } .col1{ margin: 20px; } #colTest4 { display: grid; grid-template-columns: 200px 1fr 300px; } #colTest4 .col1:last-child{ grid-column: 1 / 4; } </style> </head> <body> <h1>Используя CSS свойство columns</h1> <p id="colTest1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda maxime aspernatur aliquam repellendus tenetur eum expedita minima labore, error ex magni, qui alias reprehenderit, perferendis cumque dolor nihil veniam molestiae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad atque expedita, minima ipsum facilis commodi cum eos dolor quae odit. Voluptatem aperiam veniam, illo adipisci fugiat facere consequatur expedita assumenda?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quod ex aut consequuntur dolorem et laborum error quidem iure nulla a, vel distinctio pariatur repellendus aliquid hic illum recusandae placeat?Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias veniam nisi cum. Culpa sit architecto ipsa optio sed nemo hic, laborum atque nihil quos velit suscipit obcaecati numquam amet vero! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero quas adipisci placeat quibusdam aliquam ratione mollitia alias totam libero dolores cum, modi animi vitae? Dolorem corrupti accusantium odit quaerat maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. In iusto explicabo recusandae consectetur eos, temporibus laudantium hic eligendi pariatur similique soluta maxime ipsum tenetur, accusamus facilis dolores quae vel mollitia! </p> <p id="colTest2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda maxime aspernatur aliquam repellendus tenetur eum expedita minima labore, error ex magni, qui alias reprehenderit, perferendis cumque dolor nihil veniam molestiae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad atque expedita, minima ipsum facilis commodi cum eos dolor quae odit. Voluptatem aperiam veniam, illo adipisci fugiat facere consequatur expedita assumenda?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis quod ex aut consequuntur dolorem et laborum error quidem iure nulla a, vel distinctio pariatur repellendus aliquid hic illum recusandae placeat?Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias veniam nisi cum. Culpa sit architecto ipsa optio sed nemo hic, laborum atque nihil quos velit suscipit obcaecati numquam amet vero! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero quas adipisci placeat quibusdam aliquam ratione mollitia alias totam libero dolores cum, modi animi vitae? Dolorem corrupti accusantium odit quaerat maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. In iusto explicabo recusandae consectetur eos, temporibus laudantium hic eligendi pariatur similique soluta maxime ipsum tenetur, accusamus facilis dolores quae vel mollitia! </p> <hr> <h1>Используя CSS FLEX</h1> <div id="colTest3"> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> </div> <hr> <h1>Используя CSS GRID</h1> <div id="colTest4"> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> <p class="col1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta, laborum dolor soluta tenetur voluptatem quibusdam nihil nisi molestiae ut magnam dolores similique facere odit ab fuga quasi. Exercitationem, consequatur? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus qui odit animi quo delectus? Ea neque est nam! Quasi blanditiis rerum odit consectetur inventore totam! Sequi labore asperiores officia tenetur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis nulla sit aliquid beatae perferendis ullam alias necessitatibus aliquam qui expedita molestiae at, nisi laudantium ab dignissimos dolores accusamus porro? Ullam. </p> </div> </body> </html>







  • CSS clipping, shapes

    CSS clipping


    • clip-path
    • shape-outside
    • mask-border
    • mask
    • mask-clip
    • -webkit-background-clip: text


    Клипы

    Клип (clip-path) позволяет менять форму HTML элемента. Форму можно создать  как: circle, ellipse, polygon, SVG - image.

    circle( [<shape-radius>]? [at <position>]? )

    ellipse( [<shape-radius>{2}]? [at <position>]? )

    polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )


    shape-radius - радиус, для эллипса задаются 2 радиуса

    position - две координаты центра - смещения от левой границы и от верхней границы блока

    fill-rule - способ заливки внутренней области многоугольника

    shape-arg - массив координат вершин многоугольника


    Простой клип

    CSS:

    #clipTest { display: inline-block; padding: 10px; margin: 20px; height: 300px; width: 200px; background-color: blue; clip-path: circle(150px at 0px 0px); color: #fff; font-size: 1.5rem; font-weight: bold; }


    HTML


    <div id="clipTest">Clip test</div>





    Текст и клип

    Текст, располагающийся вокруг области клипа в форме окружности. Клип-окружность создаёт свойство   

    clip-path: circle(100px at 0px 0px) 

    Область, которая "вырезана" из блока с текстом, создаёт свойство

    shape-outside: circle(110px at 0px 0px)

    Свойство 

    float: left

    для клипа обязательно для того, чтобы текст "обтекал" клип.


    <!DOCTYPE html> <head> <style> #shapeOutsideTest1 { display: inline-block; position: relative; height: 300px; width: 300px; position: relative; border: 1px solid red; padding: 10px; } #shapeOutsideTest1 > #shape1-1 { float: left; height: 100%; width: 100%; background-color: blue; shape-outside: circle(110px at 0px 0px); -webkit-clip-path: circle(100px at 0px 0px); clip-path: circle(100px at 0px 0px); } </style> </head> <body> <div id="shapeOutsideTest1"> <div id="shape1-1"></div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores id, ad illo ea iste totam, consectetur ab praesentium repudiandae iusto perferendis consequuntur, recusandae suscipit fugit dolorum impedit? Blanditiis, pariatur quae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut consequuntur provident eum illo doloremque ducimus alias molestiae quo illum eveniet, debitis saepe ex, recusandae magni veniam esse! Excepturi, ratione tenetur! </div> </body> </html>




    Два клипа и текст

    Два клипа в форме многоугольников и текст между ними.

    Один клип - слева () , второй клип - справа ()

    <!DOCTYPE html> <head> <style> #shapeOutsideTest2 { display: inline-block; height: 400px; width: 400px; border: 1px solid gray; padding: 10px; } #shapeOutsideTest2 #shape2-1 { float: left; width: 50%; height: 100%; margin-right: 10px; background-color: red; clip-path: polygon(0% 0%, 38% 0, 54% 50%, 38% 100%, 0% 100%); shape-outside: polygon(0% 0%, 38% 0, 54% 50%, 38% 100%, 0% 100%); } #shapeOutsideTest2 #shape2-2 { float: right; width: 45%; height: 100%; background-color: green; shape-outside: polygon(100% 0, 0 100%, 100% 100%); clip-path: polygon(100% 0, 0 100%, 100% 100%); } </style> </head> <body> <div id="shapeOutsideTest2"> <div id="shape2-1"></div> <div id="shape2-2"></div> <div id="shape2Text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores id, ad illo ea iste totam, consectetur ab praesentium repudiandae iusto perferendis consequuntur, recusandae suscipit fugit dolorum impedit? Blanditiis, pariatur quae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut consequuntur provident eum illo doloremque ducimus alias molestiae quo illum eveniet, debitis saepe ex, recusandae magni veniam esse! Excepturi, ratione tenetur!Aut consequuntur provident eum illo doloremque ducimus alias molestiae quo illum eveniet, debitis saepe ex! </div> </div> </body> </html>





    <!DOCTYPE html> <head> <style> #shapeOutsideTest3 { display: inline-block; border: 1px solid #157cca; width: 300px; height: 300px; } #shapeOutsideTest3 .leftTriangle { width: 40%; height: 100%; background-color: #157cca; margin: 0 20px 0 0; float: left; clip-path: polygon(0 0, 0 100%, 50% 0); shape-outside: polygon(0 0, 0 100%, 50% 0); } #shapeOutsideTest3 .rightTriangle { width: 40%; height: 100%; background-color: #157cca; float: right; clip-path: polygon(100% 0, 50% 100%, 100% 100%); shape-outside: polygon(100% 0, 50% 100%, 100% 100%); } </style> </head> <body> <div id="shapeOutsideTest3"> <div class="leftTriangle"></div> <div class="rightTriangle"></div> Lorem isum dolor sit amet consectetur adipisicing elit. Beatae aspernatur aut molestias, expedita ipsa quae deserunt, non, magni recusandae dolor blanditiis asperiores ex itaque accusantium alias. Voluptas quis corrupti ducimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni nihil repellendus soluta doloribus, totam sunt aliquam facere a maxime itaque, cupiditate deleniti molestias nostrum eos ipsum, ex rerum. Minus, perspiciatis. </div> </body> </html>



    Картинка - в фоне клипа

    Картинка - background-image: url(../images/image.jpg);

    Многоугольник - клип (clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%))


    <!DOCTYPE html> <head> <style> #wrapper4 { width: 320px; height: 300px; display: inline-block; margin: 20px; } #wrapper4 #clip4 { float: left; width: 100%; height: 100%; margin-right: 30px; background-image: url(../images/image.jpg); background-size: auto 100%; shape-outside: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%); -webkit-clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%); clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%); } #wrapper4 p { color: #0099ff; } </style> </head> <body> <div id="wrapper4"> <div id="clip4"></div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati voluptatum inventore facilis eum illum corporis, dolor possimus repellendus tenetur rerum aliquid sint aliquam! Nostrum amet id accusamus delectus ad. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem voluptate eveniet sit molestiae enim? Necessitatibus voluptas delectus cupiditate error, iste sapiente earum perspiciatis sint voluptatem, debitis impedit porro assumenda nulla! </div> </div> </body> </html>



    Клип - текст

    -webkit-background-clip: text;

    Фоновая картинка вставлена в клип-текст. Цвет текста задан с прозрачностью.

     

    <!DOCTYPE html> <head> <style> #wrapper5 { display: inline-block; border: 1px solid blue; text-align: center; background-image: url("../images/coffee-writing-computer-blogging-34676.jpg"); background-size: auto 100%; background-position: center; -webkit-background-clip: text; color: #74000077; padding: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; font-size: 200px; } </style> </head> <body> <div id="wrapper5"> TEST </div> </body> </html>







  • CSS стили в HTML

    Стили в HTML документе - CSS

    CSS - это акроним от Cascading Style Sheets.

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

    Определения

    Свойство (property) - название стиля.

    Значение (value) - значение свойства.

    Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

    Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

    Правило (rule или набор правил - rule set) - селектор стиля плюс блок стилей.  

    Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может  находиться одна декларация или несколько, разделённых символом точка с запятой (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).

    Лист стилей (StyleSheet) - это один набор правил. Он может ограничиваться тегами <STYLE></STYLE> , или импортироваться из какого-либо файла директивами @import или тегом <LINK>. 

    Документ может использовать один или несколько листов стилей. 

    Приоритет при этом у каждого последующего листа стилей выше, чем у предыдущего. То есть листы стилей срабатывают в том порядке, в котором они встретились в HTML - страничке.

    Нивысший приоритет у стилей, заданных атрибутом style внутри тега.

    Пример

    Правило
    SPAN.text { display :inline-block; background-color :red; min-height :50px; width :50%; margin :20px; padding :20px 30px 35px 15px ; }
    Селектор
    SPAN.text
    Свойства
    display background-color min-height width margin padding
    Декларации стилей
    display :inline-block; background-color :red; min-height :50px; width :50%; margin :20px; padding :20px 30px 35px 15px ;
    Блок
    { display :inline-block; background-color :red; min-height :50px; width :50%; margin :20px; padding :20px 30px 35px 15px ; }


    Использование стилей

    Способы назначения стилей

    Приоритеты стилей. Наследование стилей. Простые селекторы. Отладка стилей в отладчике Google Chrome 

    Свойства стилей

    Подробнее

    Единицы измерения для значений

    Подробнее

    Цвет.  Способы задания цвета.

    Подробнее

    Блоки, элементы

    Фон. Границы. Тень. Параметры блоков. Отступы элементов. Схема блока. Свойства float, clear.

    CSS3 Flexible Box Model

    Подробнее

    Способы позиционирования элементов

    Абсолютное и относительное позиционирование. Свойство position - absolute, relative. Точное размещение блочных элементов в окне браузера (box model), размеры блока, абсолютные и относительные координаты. Наложение слоев, свойство z-index, прозрачность. Управление видимостью слоя и видимостью содержания слоя.

    CSS Селекторы - подробнее 

    Псевдоклассы. Псевдоэлементы.

    Работа с текстом

    Стили текста (text, font, @font-face ). Free Google fonts.

    Дополнительные CSS директивы - @ - rules

    • @import: импортирует стили из файла
    • @charset задаёт кодировку
    • @font-face задаёт шрифт
    • @media, @support - позволяют модифицировать CSS таблицы в зависимости от устройства вывода - Подробнее - CSS3 media queries 
    • !important увеличивает приоритет CSS правила

    Трансформации, анимация

    Подробнее


    CSS функции

    Подробнее


    CSS grid 

     Подробнее 


  • CSS3 адаптивные блоки (Flex Box Model)

    CSS3 адаптивные блоки (Flexible Box Model)

    CSS3 Flexible Box — это новая спецификация разметки, позволяющая создавать макеты страниц и размещать блоки на странице таким образом, чтобы они вели себя предсказуемо в тех случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.

    Элементы типа block используют вертикальный макет размещения. Элементы типа inline - горизонтальны. Flexbox позволяет и то и другое. Flexbox удобен, в частности, для устройств типа мобильных, где иногда нужно полностью менять макет страницы с горизонтального на вертикальный.

    Вместо терминологии block и inline элементов flexbox исользует термины: главная и перпендикулярная оси (main axis и cross axis).

    Контейнер (container)

    Родительский элемент, в котором содержатся все остальные flexible - элементы. Flex - контейнер определяется с использованием значений flex или inline-flex свойства display.

    Элемент (item)

    Каждый дочерний элемент flex - контейнера становится flex - элементом.

    Оси (axis)

    Каждый flexbox макет использует две оси. Главная и перепендикулярная. Flex - элементы следуют один за другим вдоль главной оси (main-axis).

    • flex-direction - это свойство, которое задаёт главную ось
    • justify-content - задаёт размещение flex-элементов в текущей строке главной оси
    • align-items - задаёт размещение flex-элементов в текущей строке перпендикулярной оси
    • align-self - определяет, как единичный flex-элемент выравнивается вдоль перпендикулярной оси, переопределяя значения, заданные в align-items

    Направления (directions)

    Границы flex- контейнера ( main start/main end и cross start/cross end ) определяют задают начальные и конечные точки для перемещений flex-элементов внутри контейнера.

    • Свойство order присваивает элементы порядковым группам и определяет, какие элементы появляются первыми.
    • Свойство flex-flow сокращает описание свойств flex-direction и flex-wrap для размещения flex-элементов.

    Строки (lines)

    Элементы Flex могут быть размещены либо на одной строке, либо на нескольких строках в соответствии с свойством flex-wrap, которое управляет направлением поперечной оси и направлением, в котором формируются новые строки.

    Размеры (dimensions)

    Для flex-элементов свойства width и height задают размеры.

    Свойство flex сокращает описание свойств flex-grow, flex-shrink, flex-basis для описаниия адаптивных размеров flex-элементов.

    CSS3 Flexbox свойства

     

    Свойство Описание Значения Пример
    display Тип flex-контейнера flex
      inline-flex
    display:flex;
    display: -webkit-flex;
     
    flex-direction Определяет направление размещения flex-элементов внутри flex-контейнера flex-direction flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    justify-content Выравнивает горизонтально элементы flex в случае, если они не занимают всё пространство по главной оси. flex-start
      flex-end
      center
      space-between
      space-around
      initial
      inherit
    div {
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    }
    align-items Свойство align-items указывает выравнивание по умолчанию для элементов внутри flex-контейнера.
    Можно использовать свойство align-self для каждого элемента, чтобы переопределить свойство align-items.
    stretch
      center
      flex-start
      flex-end
      baseline
      initial
      inherit;
    div {
    -webkit-align-items: center; 
    align-items: center;
    }
    flex-wrap Указывает, должны ли flex-элементы переноситься на другую строку, если им недостаточно места в одной строке nowrap
      wrap
      wrap-reverse
      initial
      inherit
    div {
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap;
    }
    align-content Модифицирует поведение свойства flex-wrap. Похоже на align-items, но вместо выравнивания flex-элементов  выравнивает строки stretch
      center
      flex-start
      flex-end
      space-between
      space-around
    i  nitial
      inherit
    div {
    -webkit-align-content: center;
    align-content: center;
    }
    flex-flow Сокращение для свойств flex-direction и flex-wrap flex-flow: flex-direction flex-wrap|initial|inherit; div {
    -webkit-flex-flow: row-reverse wrap; 
    flex-flow: row-reverse wrap;
    }
    order Задаёт порядок следования flexible элементов относительно остальных внутри одного контейнера number
      initial
      inherit
    -webkit-order: 2;
      order: 2;
    align-self Используется для  flex-элементов. Переопределяет свойство контейнера align-items  auto
    stretch
    center
    flex-start
    flex-end
    baseline
    initial
    inherit
    div {
    -webkit-align-self: center; 
    align-self: center;
    }
    flex Задаёт длину  flex-элемента по отношению к остальным внутри того же контейнера flex-grow flex-shrink flex-basis auto|initial|inherit div {
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1;
    }
    flex-grow Указывает, насколько элемент будет увеличиваться относительно остальных элементов внутри одного и того же контейнера    
    flex-shrink Свойство определяет, как элемент будет уменьшаться относительно остальных гибких элементов внутри одного контейнера    
    flex-basis Свойство задает начальную длину flex-элемента   div:nth-of-type(2) {
    -webkit-flex-basis: 80px; 
    flex-basis: 80px;
    }
           

     

     

     

  • HTML

  • HTML - глобальные атрибуты

     

    HTML - глобальные атрибуты

    Это те свойства HTML тегов (атрибуты), которые можно использовать не в каком-то конкретном, а в любом HTML элементе. 

     

    Атрибут Описание
    accesskey Задает комбинацию клавиш для активации / фокусировки элемента
    class Указывает одно или несколько имен классов для элемента (относится к классу в таблице стилей)
    contenteditable Определяет, является ли содержимое элемента редактируемым или нет.
    contextmenu Задает контекстное меню для элемента. Контекстное меню появляется, когда пользователь щелкает правой кнопкой мыши по элементу
    data-* Используется для хранения конфиденциальных данных на странице или приложении
    dir Определяет направление текста для содержимого в элементе
    draggable Указывает, перетаскивается элемент или нет.
    dropzone Указывает, будут ли перетаскиваенные данные  скопированы, перемещены или связаны, когда они будут брошены (dropped)
    hidden Скрытый элемент
    id Указывает уникальный идентификатор элемента
    lang Задает язык содержимого элемента
    spellcheck Указывает, должен ли элемент проверять орфографию и грамматику
    style Определяет встроенный стиль CSS для элемента
    tabindex Определяет порядок табуляции элемента
    title Задает дополнительную информацию об элементе
    translate Указывает, нужно ли переводить содержимое элемента или нет.
  • HTML - коды символов

    HTML-коды

    Для того, чтобы специальные символы отображались на веб-странице, нужно использовать специальные коды HTML (код ascii или слово).

    Часто необходимо для отображения на странице, например, кодов валют, символа CopyRight, для отображения на экране HTML тегов, знаков < или > и так далее.

    Синтаксис: &КОД_СИМВОЛА;  . Коды приведены ниже.

     


    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    2A
    2B
    2C
    2D
    2E
    2F

    !
    "
    #
    $
    %
    &
    '
    (
    )
    *
    +
    ,
    -
    .
    /
    &#32;
    &#33;
    &#34;
    &#35;
    &#36;
    &#37;
    &#38;
    &#39;
    &#40;
    &#41;
    &#42;
    &#43;
    &#44;
    &#45;
    &#46;
    &#47;


    &quot;



    &amp;








    space
    exclamation point
    double quotes
    number sign
    dollar sign
    percent sign
    ampersand
    single quote
    opening parenthesis
    closing parenthesis
    asterisk
    plus sign
    comma
    minus sign - hyphen
    period
    slash

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    3A
    3B
    3C
    3D
    3E
    3F
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    :
    ;
    <
    =
    >
    ?
    &#48;
    &#49;
    &#50;
    &#51;
    &#52;
    &#53;
    &#54;
    &#55;
    &#56;
    &#57;
    &#58;
    &#59;
    &#60;
    &#61;
    &#62;
    &#63;












    &lt;

    &gt;
    zero
    one
    two
    three
    four
    five
    six
    seven
    eight
    nine
    colon
    semicolon
    less than sign
    equal sign
    greater than sign
    question mark

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    4A
    4B
    4C
    4D
    4E
    4F
    @
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    &#64;
    &#65;
    &#66;
    &#67;
    &#68;
    &#69;
    &#70;
    &#71;
    &#72;
    &#73;
    &#74;
    &#75;
    &#76;
    &#77;
    &#78;
    &#79;















    at symbol















    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    5A
    5B
    5C
    5D
    5E
    5F
    P
    Q
    R
    S
    T
    U
    V
    W
    X
    Y
    Z
    [
    \
    ]
    ^
    _
    &#80;
    &#81;
    &#82;
    &#83;
    &#84;
    &#85;
    &#86;
    &#87;
    &#88;
    &#89;
    &#90;
    &#91;
    &#92;
    &#93;
    &#94;
    &#95;


























    opening bracket
    backslash
    closing bracket
    caret - circumflex
    underscore

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    6A
    6B
    6C
    6D
    6E
    6F
    `
    a
    b
    c
    d
    e
    f
    g
    h
    i
    j
    k
    l
    m
    n
    o
    &#96;
    &#97;
    &#98;
    &#99;
    &#100;
    &#101;
    &#102;
    &#103;
    &#104;
    &#105;
    &#106;
    &#107;
    &#108;
    &#109;
    &#110;
    &#111;















    grave accent















    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    7A
    7B
    7C
    7D
    7E
    7F
    p
    q
    r
    s
    t
    u
    v
    w
    x
    y
    z
    {
    |
    }
    ~
    &#112;
    &#113;
    &#114;
    &#115;
    &#116;
    &#117;
    &#118;
    &#119;
    &#120;
    &#121;
    &#122;
    &#123;
    &#124;
    &#125;
    &#126;


























    opening brace
    vertical bar
    closing brace
    equivalency sign - tilde
    (not defined in HTML 4 standard)

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    8A
    8B
    8C
    8D
    8E
    8F













































    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    9A
    9B
    9C
    9D
    9E
    9F













































    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)
    (not defined in HTML 4 standard)

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    A0
    A1
    A2
    A3
    A4
    A5
    A6
    A7
    A8
    A9
    AA
    AB
    AC
    AD
    AE
    AF
     
    ¡
    ¢
    £
    ¤
    ¥
    ¦
    §
    ¨
    ©
    ª
    «
    ¬

    ®
    ¯
    &#160;
    &#161;
    &#162;
    &#163;
    &#164;
    &#165;
    &#166;
    &#167;
    &#168;
    &#169;
    &#170;
    &#171;
    &#172;
    &#173;
    &#174;
    &#175;
    &nbsp;
    &iexcl;
    &cent;
    &pound;
    &curren;
    &yen;
    &brvbar;
    &sect;
    &uml;
    &copy;
    &ordf;
    &laquo;
    &not;
    &shy;
    &reg;
    &macr;
    non-breaking space
    inverted exclamation mark
    cent sign
    pound sign
    currency sign
    yen sign
    broken vertical bar
    section sign
    spacing diaeresis - umlaut
    copyright sign
    feminine ordinal indicator
    left double angle quotes
    not sign
    soft hyphen
    registered trade mark sign
    spacing macron - overline

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    B0
    B1
    B2
    B3
    B4
    B5
    B6
    B7
    B8
    B9
    BA
    BB
    BC
    BD
    BE
    BF
    °
    ±
    ²
    ³
    ´
    µ

    ·
    ¸
    ¹
    º
    »
    ¼
    ½
    ¾
    ¿
    &#176;
    &#177;
    &#178;
    &#179;
    &#180;
    &#181;
    &#182;
    &#183;
    &#184;
    &#185;
    &#186;
    &#187;
    &#188;
    &#189;
    &#190;
    &#191;
    &deg;
    &plusmn;
    &sup2;
    &sup3;
    &acute;
    &micro;
    &para;
    &middot;
    &cedil;
    &sup1;
    &ordm;
    &raquo;
    &frac14;
    &frac12;
    &frac34;
    &iquest;
    degree sign
    plus-or-minus sign
    superscript two - squared
    superscript three - cubed
    acute accent - spacing acute
    micro sign
    pilcrow sign - paragraph sign
    middle dot - Georgian comma
    spacing cedilla
    superscript one
    masculine ordinal indicator
    right double angle quotes
    fraction one quarter
    fraction one half
    fraction three quarters
    inverted question mark

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    C0
    C1
    C2
    C3
    C4
    C5
    C6
    C7
    C8
    C9
    CA
    CB
    CC
    CD
    CE
    CF
    À
    Á
    Â
    Ã
    Ä
    Å
    Æ
    Ç
    È
    É
    Ê
    Ë
    Ì
    Í
    Î
    Ï
    &#192;
    &#193;
    &#194;
    &#195;
    &#196;
    &#197;
    &#198;
    &#199;
    &#200;
    &#201;
    &#202;
    &#203;
    &#204;
    &#205;
    &#206;
    &#207;
    &Agrave;
    &Aacute;
    &Acirc;
    &Atilde;
    &Auml;
    &Aring;
    &AElig;
    &Ccedil;
    &Egrave;
    &Eacute;
    &Ecirc;
    &Euml;
    &Igrave;
    &Iacute;
    &Icirc;
    &Iuml;
    latin capital letter A with grave
    latin capital letter A with acute
    latin capital letter A with circumflex
    latin capital letter A with tilde
    latin capital letter A with diaeresis
    latin capital letter A with ring above
    latin capital letter AE
    latin capital letter C with cedilla
    latin capital letter E with grave
    latin capital letter E with acute
    latin capital letter E with circumflex
    latin capital letter E with diaeresis
    latin capital letter I with grave
    latin capital letter I with acute
    latin capital letter I with circumflex
    latin capital letter I with diaeresis

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    D0
    D1
    D2
    D3
    D4
    D5
    D6
    D7
    D8
    D9
    DA
    DB
    DC
    DD
    DE
    DF
    Ð
    Ñ
    Ò
    Ó
    Ô
    Õ
    Ö
    ×
    Ø
    Ù
    Ú
    Û
    Ü
    Ý
    Þ
    ß
    &#208;
    &#209;
    &#210;
    &#211;
    &#212;
    &#213;
    &#214;
    &#215;
    &#216;
    &#217;
    &#218;
    &#219;
    &#220;
    &#221;
    &#222;
    &#223;
    &ETH;
    &Ntilde;
    &Ograve;
    &Oacute;
    &Ocirc;
    &Otilde;
    &Ouml;
    &times;
    &Oslash;
    &Ugrave;
    &Uacute;
    &Ucirc;
    &Uuml;
    &Yacute;
    &THORN;
    &szlig;
    latin capital letter ETH
    latin capital letter N with tilde
    latin capital letter O with grave
    latin capital letter O with acute
    latin capital letter O with circumflex
    latin capital letter O with tilde
    latin capital letter O with diaeresis
    multiplication sign
    latin capital letter O with slash
    latin capital letter U with grave
    latin capital letter U with acute
    latin capital letter U with circumflex
    latin capital letter U with diaeresis
    latin capital letter Y with acute
    latin capital letter THORN
    latin small letter sharp s - ess-zed

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    E0
    E1
    E2
    E3
    E4
    E5
    E6
    E7
    E8
    E9
    EA
    EB
    EC
    ED
    EE
    EF
    à
    á
    â
    ã
    ä
    å
    æ
    ç
    è
    é
    ê
    ë
    ì
    í
    î
    ï
    &#224;
    &#225;
    &#226;
    &#227;
    &#228;
    &#229;
    &#230;
    &#231;
    &#232;
    &#233;
    &#234;
    &#235;
    &#236;
    &#237;
    &#238;
    &#239;
    &agrave;
    &aacute;
    &acirc;
    &atilde;
    &auml;
    &aring;
    &aelig;
    &ccedil;
    &egrave;
    &eacute;
    &ecirc;
    &euml;
    &igrave;
    &iacute;
    &icirc;
    &iuml;
    latin small letter a with grave
    latin small letter a with acute
    latin small letter a with circumflex
    latin small letter a with tilde
    latin small letter a with diaeresis
    latin small letter a with ring above
    latin small letter ae
    latin small letter c with cedilla
    latin small letter e with grave
    latin small letter e with acute
    latin small letter e with circumflex
    latin small letter e with diaeresis
    latin small letter i with grave
    latin small letter i with acute
    latin small letter i with circumflex
    latin small letter i with diaeresis

    ASCII   HTML HTML  
    Dec Hex Symbol Number Name  

    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    F0
    F1
    F2
    F3
    F4
    F5
    F6
    F7
    F8
    F9
    FA
    FB
    FC
    FD
    FE
    FF
    ð
    ñ
    ò
    ó
    ô
    õ
    ö
    ÷
    ø
    ù
    ú
    û
    ü
    ý
    þ
    ÿ
    &#240;
    &#241;
    &#242;
    &#243;
    &#244;
    &#245;
    &#246;
    &#247;
    &#248;
    &#249;
    &#250;
    &#251;
    &#252;
    &#253;
    &#254;
    &#255;
    &eth;
    &ntilde;
    &ograve;
    &oacute;
    &ocirc;
    &otilde;
    &ouml;
    &divide;
    &oslash;
    &ugrave;
    &uacute;
    &ucirc;
    &uuml;
    &yacute;
    &thorn;
    &yuml;
    latin small letter eth
    latin small letter n with tilde
    latin small letter o with grave
    latin small letter o with acute
    latin small letter o with circumflex
    latin small letter o with tilde
    latin small letter o with diaeresis
    division sign
    latin small letter o with slash
    latin small letter u with grave
    latin small letter u with acute
    latin small letter u with circumflex
    latin small letter u with diaeresis
    latin small letter y with acute
    latin small letter thorn
    latin small letter y with diaeresis

     

        HTML HTML  
    Dec Hex Symbol Number Name  

    338
    339
    352
    353
    376
    402
    152
    153
    160
    161
    178
    192
    Œ
    œ
    Š
    š
    Ÿ
    ƒ
    &#338;
    &#339;
    &#352;
    &#353;
    &#376;
    &#402;





    latin capital letter OE
    latin small letter oe
    latin capital letter S with caron
    latin small letter s with caron
    latin capital letter Y with diaeresis
    latin small f with hook - function

        HTML HTML  
    Dec Hex Symbol Number Name  

    8211
    8212
    8216
    8217
    8218
    8220
    8221
    8222
    8224
    8225
    8226
    8230
    8240
    8364
    8482
    2013
    2014
    2018
    2019
    201A
    201C
    201D
    201E
    2020
    2021
    2022
    2026
    2030
    20AC
    2122














    &#8211;
    &#8212;
    &#8216;
    &#8217;
    &#8218;
    &#8220;
    &#8221;
    &#8222;
    &#8224;
    &#8225;
    &#8226;
    &#8230;
    &#8240;
    &#8364;
    &#8482;













    &euro;
    en dash
    em dash
    left single quotation mark
    right single quotation mark
    single low-9 quotation mark
    left double quotation mark
    right double quotation mark
    double low-9 quotation mark
    dagger
    double dagger
    bullet
    horizontal ellipsis
    per thousand sign
    euro sign
    trade mark sign

     

     

     

    Например HTML код:  &copy; отображает на экране символ ©

    HTML код: &lt;H1&gt; отображает на экране <H1>

     

     

     

  • HTML - таблицы

    Таблицы

    Тег Описание
    <table> Определяет таблицу
    <caption> Определяет заголовок таблицы
    <th> Определяет ячейку заголовка в таблице
    <tr> Определяет строку в таблице
    <td> Определяет ячейку в таблице
    <thead> Группирует содержимое заголовка в таблице
    <tbody> Группирует содержимое тела таблицы
    <tfoot> Группы содержимого нижнего колонтитула в таблице
    <col> Определяет свойства столбца для каждого столбца в элементе <colgroup>
    <colgroup> Указывает группу из одного или нескольких столбцов в таблице для форматирования

     

    Пример таблиц:

     

    <h4>Ячейка занимает 2 колонки:</h4>
    <table width="100%" border="1">
    <tr>
    <th width="25%">Name</th>
    <th colspan="2">Telephone</th>
    </tr>
    <tr>
    <td width="25%">Bill Gates</td>
    <td>222 77 834</td>
    <td>554 77 33</td>
    </tr>
    </table>
    <h4>Ячейка занимает 2 ряда:</h4> <table width="100%" border="1">
    <tr>
    <th width="25%">First Name:</th>
    <td>Bill Gates</td>
    </tr>
    <tr>
    <th rowspan="2">Telephone:</th>
    <td>876 66 55</td>
    </tr>
    <tr>

    <td>986 66 44</td>
    </tr>
    </table>

     

    Результат

     

  • HTML - теги

    HTML теги

     

    Тег Описание
    <!--...--> Комментарии
    <!DOCTYPE>  Тип документа
    <a> Гиперссылка
    <abbr> Акроним
    <acronym> Отменёт в  HTML5. 
    <address> Адрес автора документа
    <applet> Отменёт в HTML5.
    <area> Область внутри image-map
    <article> Описывает статью
    <aside> Сонтент вне страницы.  Определяет косвенно связанные с содержимым элементы
    <audio> Аудио контент
    <b> Текст с толстой линией обводки (bold )
    <base> Определяет базовый URL/target для всех относительных URL в документе 
    <basefont> Отменёт в HTML5.
    <bdi> Выделяет область текста с другим направлением написани слов.
    <bdo> Переопределяет направление написания текущего текста
    <big> Отменёт в HTML5
    <blockquote> Цитата
    <body> Описывает тело документо
    <br> Один пропуск строки
    <button> Кнопка
    <canvas> Используется для рисования графики «на лету» с помощью скриптов (обычно JavaScript)
    <caption> Определяет заголовок таблицы
    <center> Отменёт в HTML5
    <cite> Определяет название произведения (например, книгу, песню, фильм, телешоу, живопись, скульптуру и т. Д.).
    <code> Блок кода
    <col> Определяет свойства столбца для каждого столбца в элементе <colgroup>
    <colgroup> Указывает группу из одного или нескольких столбцов в таблице для форматирования
    <datalist> Задает список предопределенных опций для элементов управления вводом
    <dd> Определяет описание / значение термина в списке описания (description list)
    <del> Определяет текст, который был удален из документа
    <details> Определяет дополнительные данные, которые пользователь может просматривать или скрывать
    <dfn> Представляет определяющий экземпляр термина
    <dialog> Тег определяет диалоговое окно или окно. Элемент позволяет легко создавать всплывающие диалоги и модалы на веб-странице.
    <dir> Отменёт в HTML5
    <div> Описывает блочный элемент
    <dl> Определяет список описаний
    <dt> Определяет термин / имя в списке описания
    <em> Определяет выделенный текст
    <embed> Определяет контейнер для внешнего (не HTML) приложения
    <fieldset> Группы полей формы
    <figcaption> Определяет подпись для элемента <figure>
    <figure> Элемент для пометки фотографии в документе
    <font> Отменёт в HTML5
    <footer> Определяет нижний колонтитул для документа или раздела
    <form> Определяет форму HTML для ввода пользователем.
    <frame> Отменёт в HTML5
    <frameset> Отменёт в HTML5
    <h1> to <h6> Определяет заголовки HTML
    <head> Определяет информацию о документе
    <header> Определяет заголовок для документа или раздела
    <hr> Горизонтальная линия
    <html> Определяет корень HTML-документа
    <i> Наклонный текст
    <iframe> Определяет встроенный кадр -  frame
    <img> Вставляет картинку
    <input> Поле ввода
    <ins> Определяет текст, который был вставлен в документ
    <kbd> Определяет ввод с клавиатуры
    <keygen> Определяет поле генератора пары ключей (для форм)  - key-pair
    <label> Метка для элемента <input>
    <legend> Определяет подпись для элемента <fieldset>
    <li> Элемент списка
    <link> Определяет взаимосвязь между документом и внешним ресурсом (чаще всего используется для ссылки на таблицы стилей)
    <main> Задает основное содержание документа
    <map> Определяет карту изображений на стороне клиента
    <mark> Определяет отмеченный / выделенный текст.
    <menu> Определяет список / меню из команд Работает только в Firefox
    <menuitem> Определяет элемент команды / меню, который пользователь может вызывать из всплывающего меню Работает только в Firefox
    <meta> Определяет метаданные об HTML-документе
    <meter> Определяет скалярное измерение в пределах известного диапазона (калибр) Тег <meter> не поддерживается в Internet Explorer, Edge 12, Safari 5 и более ранних версиях
    <nav> Определяет блок навигационных ссылок
    <noframes> Отменёт в HTML5
    <noscript> Определяет альтернативный контент для пользователей, которые не поддерживают клиентские скрипты
    <object> Определяет встроенный объект
    <ol> Определяет упорядоченный список
    <optgroup> Определяет группу связанных опций в раскрывающемся списке
    <option> Определяет параметр в раскрывающемся списке
    <output> Определяет результат вычисления Элемент вывода не поддерживается в Edge 12 или Internet Explorer и более ранних версиях
    <p> Параграф
    <param> Параметр объекта
    <pre> Текст с сохранением форматирования (пробелов, табуляций)
    <progress> Представляет ход выполнения задачи
    <q> Определяет короткую цитату
    <rp> Определяет, что показывать в браузерах, которые не поддерживают ruby -  аннотации. Используйте тег <rp> вместе с тегами <ruby> и <rt>: элемент <ruby> состоит из одного или нескольких символов, которым требуется объяснение / произношение, и элемент <rt>, который предоставляет эту информацию, и Необязательный элемент <rp>, который определяет, что показывать для браузеров, которые не поддерживают аннотации ruby.
    <rt> Определяет объяснение / произношение символов (для восточноазиатской типографии)
    <ruby> Определяет ruby - аннотацию (для восточноазиатской типографии)
    <s> Определяет текст, который больше не верен
    <samp> Определяет образец вывода из компьютерной программы
    <script> Определяет клиентский скрипт
    <section> Определяет раздел в документе
    <select> Определяет раскрывающийся список - drop-down list
    <small> Определяет меньший текст
    <source> Определяет несколько медиаресурсов для медиа-элементов (<video> и <audio>)
    <span> Определяет строчный - inline элемент 
    <strike> Отменёт в HTML5
    <strong> Определяет важный текст
    <style> Определяет лист стилей для документа (stylesheet)
    <sub> Определяет подстрочный текст
    <summary> Определяет видимый заголовок для элемента <details>
    <sup> Определяет надстрочный текст
    <table> Таблица 
    <tbody> Группирует содержимое тела в таблице
    <td> Ячейка таблицы
    <textarea> Определяет многострочный ввод (область текста)
    <tfoot> Группы содержимого нижнего колонтитула в таблице
    <th> Определяет ячейку заголовка в таблице
    <thead> Группирует содержимое заголовка в таблице
    <time> Определяет дату / время
    <title> Определяет заголовок документа
    <tr> Определяет строку в таблице
    <track> Определяет текстовые дорожки для элементов мультимедиа (<video> и <audio>)
    <tt> Отменёт в HTML5
    <u> Определяет текст, который должен стилистически отличаться от обычного текста
    <ul> Определяет неупорядоченный список
    <var> Определяет переменную
    <video> Определяет видео или фильм
    <wbr> Определяет возможный разрыв строки при переносе

     

     

     

     

     

  • HTML - формы

     

    HTML - формы

    Tag Description
    <form> Defines an HTML form for user input
    <input> Defines an input control
    <textarea> Defines a multiline input control (text area)
    <button> Defines a clickable button
    <select> Defines a drop-down list
    <optgroup> Defines a group of related options in a drop-down list
    <option> Defines an option in a drop-down list
    <label> Defines a label for an <input> element
    <fieldset> Groups related elements in a form
    <legend> Defines a caption for a <fieldset> element
    <datalist> Specifies a list of pre-defined options for input controls
    <keygen> Defines a key-pair generator field (for forms)
    <output> Defines the result of a calculation

    Атрибуты тега FORM

    Attribute Value Description
    accept file_type Not supported in HTML5.
    Specifies a comma-separated list of file types  that the server accepts (that can be submitted through the file upload)
    accept-charset character_set Specifies the character encodings that are to be used for the form submission
    action URL Specifies where to send the form-data when a form is submitted
    autocomplete on
    off
    Specifies whether a form should have autocomplete on or off
    enctype application/x-www-form-urlencoded
    multipart/form-data
    text/plain
    Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
    method get
    post
    Specifies the HTTP method to use when sending form-data
    name text Specifies the name of a form
    novalidate novalidate Specifies that the form should not be validated when submitted
    target _blank
    _self
    _parent
    _top
    Specifies where to display the response that is received after submitting the form

     

    Атрибуты тега INPUT

     

    Attribute Value Description
    accept file_extension
    audio/*
    video/*
    image/*
    media_type
    Specifies the types of files that the server accepts (only for type="file")
    align left
    right
    top
    middle
    bottom
    Not supported in HTML5.
    Specifies the alignment of an image input (only for type="image")
    alt text Specifies an alternate text for images (only for type="image")
    autocomplete on
    off
    Specifies whether an <input> element should have autocomplete enabled
    autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads
    checked checked Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
    dirname inputname.dir Specifies that the text direction will be submitted
    disabled disabled Specifies that an <input> element should be disabled
    form form_id Specifies one or more forms the <input> element belongs to
    formaction URL Specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image")
    formenctype application/x-www-form-urlencoded
    multipart/form-data
    text/plain
    Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image")
    formmethod get
    post
    Defines the HTTP method for sending data to the action URL (for type="submit" and type="image")
    formnovalidate formnovalidate Defines that form elements should not be validated when submitted
    formtarget _blank
    _self
    _parent
    _top
    framename
    Specifies where to display the response that is received after submitting the form (for type="submit" and type="image")
    height pixels Specifies the height of an <input> element (only for type="image")
    list datalist_id Refers to a <datalist> element that contains pre-defined options for an <input> element
    max number
    date
    Specifies the maximum value for an <input> element
    maxlength number Specifies the maximum number of characters allowed in an <input> element
    min number
    date
    Specifies a minimum value for an <input> element
    multiple multiple Specifies that a user can enter more than one value in an <input> element
    name text Specifies the name of an <input> element
    pattern regexp Specifies a regular expression that an <input> element's value is checked against
    placeholder text Specifies a short hint that describes the expected value of an <input> element
    readonly readonly Specifies that an input field is read-only
    required required Specifies that an input field must be filled out before submitting the form
    size number Specifies the width, in characters, of an <input> element
    src URL Specifies the URL of the image to use as a submit button (only for type="image")
    step number Specifies the legal number intervals for an input field
    type button
    checkbox
    color
    date 
    datetime 
    datetime-local 
    email 
    file
    hidden
    image
    month 
    number 
    password
    radio
    range 
    reset
    search
    submit
    tel
    text
    time 
    url
    week
    Specifies the type <input> element to display
    value text Specifies the value of an <input> element
    width pixels Specifies the width of an <input> element (only for type="image")

     

    Тег INPUT - значение атрибута type

     

    Value Description
    button Defines a clickable button (mostly used with a JavaScript to activate a script)
    checkbox Defines a checkbox
    color Defines a color picker
    date Defines a date control (year, month and day (no time))
    datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
    email Defines a field for an e-mail address
    file Defines a file-select field and a "Browse..." button (for file uploads)
    hidden Defines a hidden input field
    image Defines an image as the submit button
    month Defines a month and year control (no time zone)
    number Defines a field for entering a number
    password Defines a password field (characters are masked)
    radio Defines a radio button
    range Defines a control for entering a number whose exact value is not important (like a slider control)
    reset Defines a reset button (resets all form values to default values)
    search Defines a text field for entering a search string
    submit Defines a submit button
    tel Defines a field for entering a telephone number
    text Default. Defines a single-line text field (default width is 20 characters)
    time Defines a control for entering a time (no time zone)
    url Defines a field for entering a URL
    week Defines a week and year control (no time zone)

     

  • HTML введение

    HTML - основы

    Язык гипертекстовой разметки HTML - это стандартный язык разметки для создания веб-страниц и веб-приложений. С помощью каскадных таблиц стилей (CSS) и JavaScript он формирует основу клиентских (ClienSide) WEB-технологий. Это те технологии, которые использует браузер при интерпретации HTML-страниц, которые он открывает.

    WEB-браузеры (IE, Chrome, Opera,...) получают HTML-документы с веб-сервера (Apache, IIS,... ) или из локального хранилища и преобразуют их в мультимедийные веб-страницы. 

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

    Элементы HTML очерчены тегами, написанными с использованием угловых скобок (<>).

    Браузеры не отображают теги HTML, но используют их для интерпретации содержимого страницы.

    HTML может использовать программы, написанные на языке сценариев (scripts), например JavaScript, который влияет на поведение и содержимое веб-страниц. 

    Включение CSS определяет внешний вид и макет содержимого. 

    Программа курса

    • Что такое WEB-сервер, web-сайт, web-страница
    • HTML, структура документа, синтаксис.
    • HTML теги, строчный (inline) / блочный (block) элементы.
    • Атрибуты тегов.
    • Теги форматирования текста. Параграф.
    • Специальные символы.
    • Комментарии в HTML.
    • Ссылки.
    • Работа с изображениями.
    • Списки.
    • Таблицы.
    • Формы.
    • iFrame.
    • Теги <DIV>, <SPAN>.
    • Заголовок документа. Теги TITLE, META. 


  • HTML5 - элемент CANVAS, рисование

    HTML5 canvas

    Элемент HTML <canvas> используется для рисования графики на веб-странице.

    Элемент HTML <canvas> - холст для рисования графики «на лету» с помощью сценариев (обычно JavaScript).

    Элемент <canvas> - это только контейнер для графики. Для рисования внутри него нужно использовать скрипт. Текст внутри элемента canvas игнорируется, если браузер поддерживает элемент <canvas> HTML5. Если он не поддерживается, то текст будет отображаться браузером .

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

    Для элемента <canvas> можно задать размеры, можно задать атрибут style. По-умолчанию его размеры: 300 на 150 пикселей (если они не заданы). 

    Создать canvas :

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">Your browser does not support HTML5 </canvas>

    При рисовании нужно иметь в виду, что размеры рисуемых элементов - не абсолютные. Они - логические, зависят от размера canvas.

    Одна точка рисуемого элемента соответствует отдному пикселю в том случае, если canvas имеет размеры по-умолчанию (300 на 150 пикселей). Если, например, задать для него размеры 600 на 150, то все горизонтальные размеры рисуемого объекта бутут увеличены в 2 раза.

    Например, при рисовании на наком холсте прямоугольника размером 100 на 100, его изображение будет иметь размер 200 на 100.

    Рисование простых элементов

    Холст изначально пуст. Чтобы отобразить что-то, скрипт (JavaScript) сначала должен получить доступ к нему для рисования. Для этого элемент <canvas> имеет метод getContext (). Метод getContext () принимает один параметр, тип контекста. Для 2D-графики, например, указывается «2d», чтобы получить CanvasRenderingContext2D.

    Инициализация

    Получить доступ к canvas для рисования (контекст)

    var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); 

    По результату выполнения этих команд в переменной ctx находится ссылка на контекст для рисования, расположенный внутри canvas - элемента . Далее можно использовать все методы этого объекта.

    Задать цвет заливки для рисуемого объекта

    ctx.fillStyle = "#FF0000";

    ctx.fillStyle='rgba(0,255,0,0.5)';

    Задать цвет заливки для прямоугольника

    ctx.fillRect(0,0,150,75);

    Задать свойства линии

    ctx.strokeStyle = "#0000ff";

    ctx.lineWidth = 5;

    ctx.strokeRect(10,10, 100,100);

    Нарисовать линию

    Чтобы нарисовать прямую линию на холсте, используются следующие методы:

    moveTo (x, y) - определяет начальную точку линии

    lineTo (x, y) - определяет конечную точку линии

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(100,0); ctx.lineTo(200,100); ctx.stroke();  

    Нарисовать дугу

    При рисовании дуги используются методы:

    beginPath() - начинает путь

    arc(x,y,r,startangle,endangle) - рисует дугу (координаты центра, радиус, угол начала дуги, угол конца дуги)

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(200,200,50,0,2*Math.PI); ctx.stroke(); 

    Прямоугольник

    fillRect(x, y, width, height); - нарисовать залитый прямоугольник

    strokeRect(x, y, width,height) - рисует контур прямоугольника, не заполняя его. Прямоугольник задаётся координатами левого верхнего угла (x, y), шириной и высотой.

    clearRect(x, y, width, height) - стирает прямоугольник.

    var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(210,110,150,75); 

    Стереть всё, очистить canvas 

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height);


    Нарисовать текст

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
    ctx.strokeText("Hello World",10,50);

    Линейный градиент

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); 

    Радиальный градиент

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); 


    Рисование кривой

    Для рисования различных линий используются методы полученного контекста:

    • beginPath() - начало линии
    • closePath() - конец линии
    • moveTo (x, y) - при рисовании кривой используется виртуальное «перо» или «указатель». Этот виртуальный указатель всегда находится в некоторой точке. Перемещение виртуального указателя выполняется с помощью этой функции
    • lineTo() - рисует линию из места расположения виртуального указатнля в нужную точку, lineTo () также перемещает виртуальный указатель на конечную точку линии
    • stroke() , fill() - описанные выше функции только создают линию, реально не прорисовывая её на экране. Реальное рисование созданной линии производят функции stroke() , fill()
    • arcTo(x1,y1,x2,y2,r); - дуга между двумя касательными (в точке 1 и точке 2) с радиусом r

    Пример:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath(); // Начали рисовать кривую
    ctx.moveTo(20,20); // Переместили перо в начало линии
    ctx.lineTo(100,20); // Отрезок горизонтальной линии
    ctx.arcTo(150,20,150,70,50); // Дуга
    ctx.lineTo(150,120); // Вертикальная линия
    ctx.stroke(); // Нарисовать созданную кривую


    Кривые Безье

    context.quadraticCurveTo(cpx,cpy,x,y) - Метод quadraticCurveTo () добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют квадратичную кривую Безье. Квадратичная кривая Безье требует двух точек. Первая точка - контрольная точка, которая используется в квадратичном вычислении Безье, а вторая точка - конечная точка кривой. Отправной точкой для кривой является последняя точка в текущем пути. Если путь не существует, используются методы beginPath () и moveTo () для определения начальной точки.

    cpx Х-координата контрольной точки Безье  

    cpy Y-координата контрольной точки Безье 

    x Х-координата конечной точки 

    y У-координата конечной точки

    Пример:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();


    context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) - добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют собой кубическую кривую Безье. Кубическая кривая Безье требует трех точек. Первые две точки - это контрольные точки, которые используются в кубическом вычислении Безье, а последняя точка - конечная точка кривой. Отправной точкой для кривой является последняя точка в текущем пути. Если путь не существует, используются методы beginPath () и moveTo () для определения начальной точки.

    cp1x Х-координата первой контрольной точки Безье  

    cp1y У-координата первой контрольной точки Безье 

    cp2x Х-координата второй контрольной точки Безье 

    cp2y Y-координата второй контрольной точки Безье 

    x Х-координата конечной точки 

    y У-координата конечной точки


    Свойства и методы контекста

    Цвета, стили и тени

    Свойство Описание
    fillStyle Устанавливает или возвращает цвет, градиент или картинку, используемые для заполнения рисунка
    strokeStyle Устанавливает или возвращает цвет, градиент или шаблон, используемый для линии
    shadowColor Устанавливает или возвращает цвет, используемый для теней
    shadowBlur Устанавливает или возвращает уровень размытия для теней
    shadowOffsetX Устанавливает или возвращает горизонтальное расстояние тени от формы
    shadowOffsetY Устанавливает или возвращает вертикальное расстояние тени от формы


    Описание
    createLinearGradient() Создает линейный градиент 
    createPattern() Повторяет указанный элемент в указанном направлении
    createRadialGradient() Создает радиальный / круговой градиент 
    addColorStop() Определяет цвета и позиции остановки в градиентном объекте

    Стили линии


    Описание
    lineCap Стиль окончания линии
    lineJoin Стиль пересечения линий
    lineWidth Толшина линии
    miterLimit Устанавливает или возвращает максимальную длину

    Прямоугольники


    Описание
    rect() Создаёт прямоугольник
    fillRect() Рисует запоненный прямоугольник
    strokeRect() Рисует контурный прямоугольник
    clearRect() Удаляет прямоугольную область

    Линии


    Описание
    fill() Fills the current drawing (path)
    stroke() Actually draws the path you have defined
    beginPath() Begins a path, or resets the current path
    moveTo() Moves the path to the specified point in the canvas, without creating a line
    closePath() Creates a path from the current point back to the starting point
    lineTo() Adds a new point and creates a line to that point from the last specified point in the canvas
    clip() Clips a region of any shape and size from the original canvas
    quadraticCurveTo() Creates a quadratic Bézier curve
    bezierCurveTo() Creates a cubic Bézier curve
    arc() Creates an arc/curve (used to create circles, or parts of circles)
    arcTo() Creates an arc/curve between two tangents
    isPointInPath() Returns true if the specified point is in the current path, otherwise false

    Преобразования


    Описание
    scale() Scales the current drawing bigger or smaller
    rotate() Rotates the current drawing
    translate() Remaps the (0,0) position on the canvas
    transform() Replaces the current transformation matrix for the drawing
    setTransform() Resets the current transform to the identity matrix. Then runs transform()

    Текст


    Описание
    font Sets or returns the current font properties for text content
    textAlign Sets or returns the current alignment for text content
    textBaseline Sets or returns the current text baseline used when drawing text


    Описание
    fillText() Draws "filled" text on the canvas
    strokeText() Draws text on the canvas (no fill)
    measureText() Returns an object that contains the width of the specified text

    Image Drawing


    Описание
    drawImage() Draws an image, canvas, or video onto the canvas

    Pixel Manipulation


    Описание
    width Returns the width of an ImageData object
    height Returns the height of an ImageData object
    data Returns an object that contains image data of a specified ImageData object


    Описание
    createImageData() Creates a new, blank ImageData object
    getImageData() Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
    putImageData() Puts the image data (from a specified ImageData object) back onto the canvas

    Compositing


    Описание
    globalAlpha Sets or returns the current alpha or transparency value of the drawing
    globalCompositeOperation Sets or returns how a new image are drawn onto an existing image

    Other


    Описание
    save() Saves the state of the current context
    restore() Returns previously saved path state and attributes
    createEvent()
    getContext()
    toDataURL()



    Примеры

    http://corehtml5canvas.com/code-live/

    http://curran.github.io/HTML5Examples/

    https://www.w3resource.com/html5-canvas/

    https://www.sanwebe.com/2015/01/html5-canvas-examples

    http://cssdeck.com/labs/image-nodes





  • HTML5 семантические элементы

    Семантические элементы в HTML5

    Семантический элемент (семантический тег) - тег, который имеет смысловое значение.

    Спецификация HTML5 поддерживает ряд новых тегов для разметки статьи. Эти теги улучшают читаемость статьи для разработчика, возможно улучшают индексацию страницы для поисковиков (CEO).

    Теги

    • <article> - отдельная, независимая по смыслу статья
    • <aside> -  блок сбоку от основного контента (как боковой блок страницы, sidebar).
    • <details> - дополнительная информация, которую пользователь может открывать или закрывать
    • <figcaption> - пояснение для элемента <figure>
    • <figure> - используется для иллюстраций, диаграмм, фотографий, листингов кода и т.д.
    • <footer> - нижний колонтитул
    • <header> - верхний колонтитул, заголовок документа
    • <main> - основной контент документа
    • <mark> - выделенный (рлдсвеченный) текст
    • <nav> - блок навигационных ссылок, меню документа
    • <section> - элемент &lt;article&gt; определяет независимый, самодостаточный контент, элемент &lt;section&gt; определяет раздел в документе.
    • <summary> -  видимый заголовок элемента <details>
    • <time> - дата, время



    Примеры макетов HTML документа



  • jQuery - HTML/CSS

    jQuery - методы работы с HTML/CSS

    Method Description
    addClass() Adds one or more class names to selected elements
    after() Inserts content after selected elements
    append() Inserts content at the end of selected elements
    appendTo() Inserts HTML elements at the end of selected elements
    attr() Sets or returns attributes/values of selected elements
    before() Inserts content before selected elements
    clone() Makes a copy of selected elements
    css() Sets or returns one or more style properties for selected elements
    detach() Removes selected elements (keeps data and events)
    empty() Removes all child nodes and content from selected elements
    hasClass() Checks if any of the selected elements have a specified class name
    height() Sets or returns the height of selected elements
    html() Sets or returns the content of selected elements
    innerHeight() Returns the height of an element (includes padding, but not border)
    innerWidth() Returns the width of an element (includes padding, but not border)
    insertAfter() Inserts HTML elements after selected elements
    insertBefore() Inserts HTML elements before selected elements
    offset() Sets or returns the offset coordinates for selected elements (relative to the document)
    offsetParent() Returns the first positioned parent element
    outerHeight() Returns the height of an element (includes padding and border)
    outerWidth() Returns the width of an element (includes padding and border)
    position() Returns the position (relative to the parent element) of an element
    prepend() Inserts content at the beginning of selected elements
    prependTo() Inserts HTML elements at the beginning of selected elements
    prop() Sets or returns properties/values of selected elements
    remove() Removes the selected elements (including data and events)
    removeAttr() Removes one or more attributes from selected elements
    removeClass() Removes one or more classes from selected elements
    removeProp() Removes a property set by the prop() method
    replaceAll() Replaces selected elements with new HTML elements
    replaceWith() Replaces selected elements with new content
    scrollLeft() Sets or returns the horizontal scrollbar position of selected elements
    scrollTop() Sets or returns the vertical scrollbar position of selected elements
    text() Sets or returns the text content of selected elements
    toggleClass() Toggles between adding/removing one or more classes from selected elements
    unwrap() Removes the parent element of the selected elements
    val() Sets or returns the value attribute of the selected elements (for form elements)
    width() Sets or returns the width of selected elements
    wrap() Wraps HTML element(s) around each selected element
    wrapAll() Wraps HTML element(s) around all selected elements
    wrapInner() Wraps HTML element(s) around the content of each selected element

     

    Записаться на курс

     

    * По материалам сайта www.w3schools.com

     

     

     

     

  • PHP программирование

    Программирование на языке PHP

    Введение

    PHP - язык программирования, разработанный специально для Web. Это так называемый интерпретируемый (скриптовый язык). Интерпретатор языка PHP, который выполняется на сервере, последовательно читает и выполняет инструкции PHP, найденные в файле.

    Язык PHP был задуман в 1994 году и первоначально был работой одного человека - Расмуса Лердорфа. Он был принят другими разработчиками и постоянно совершенствуется, предоставляя нам многофункциональный язык программирования, который мы видим сегодня.

    Количество установок PHP постоянно растёт. Это наглядно демонстрируется на сайте http://php.net/usage.php

    PHP - проект с открытым исходным кодом (open source), это означает, что у вас есть доступ к исходному коду и легально можно использовать, изменять и распространять его бесплатно.

    Первоначально акроним PHP означал: Personal Home Page, но был изменен позднее, в соответствии с GNU - соглашением об именах (GNU = Gnu's Not Unix) и теперь означает: Hypertext Preprocessor. 

    PHP-код вписывается в HTML-страничку наряду с другими инструкциями (HTML, CSS, JavaScript,... ), этот код выполняется сервером каждый раз, когда страница запрашивается браузером пользователя.

    Когда браузер пользователя (например - Chrome, IE, Opera,...) запрашивает по определённому адресу (URL = Universe Resource Locator) нужную WEB-страничку, этот запрос (HTTP request) получает WEB-сервер, на котором эта страничка физически находится (например - WEB-сервер Apache, IIS,... ).

    Протокол HTTP Сервер (WEB server) берёт эту страничку со своего жёсткого диска и, в соответствиями с найденными в ней директивами, формирует ответ (HTTP response ) и посылает этот ответ запросившему клиенту (WEB client).


    WEB страничка в своём тексте может содержать различную информацию (HTML код, программы на языке PHP и тд). До отправки странички клиенту (браузеру) WEB сервер выполняет найденный в ней PHP код (оставляя без изменения весь текст, который находится вне PHP - тегов (HTML, JavaScript, ), модифицирует страничку по результатам работы этого кода и уже модифицированную версию отправляет браузеру.

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

    Что такое PHP-файл

    • PHP - файл - это текстовый файл (предпочтительно - в кодировке utf-8)
    • PHP-файлы могут содержать текст, HTML, CSS, JavaScript и PHP-код
    • PHP-код, найденный в исходном файле, выполняется на сервере
    • Файлы PHP имеют расширение «.php»

    Что может делать PHP

    • PHP может генерировать динамическое содержимое страницы
    • PHP может создавать, открывать, читать, записывать, удалять и закрывать файлы на сервере
    • PHP может собирать данные формы
    • PHP может отправлять и получать файлы cookie
    • PHP может добавлять, удалять и изменять данные в вашей базе данных
    • PHP может использоваться для управления доступом пользователей
    • PHP может шифровать данные
    • С PHP вы не ограничены выводом HTML. Вы можете выводить изображения, PDF-файлы и даже флеш-ролики.
    • Вы также можете выводить любой текст, такой как XHTML и XML.

    Почему часто разработчики выбирают именно PHP

    • PHP работает на различных платформах (Windows, Linux, Unix, Mac OS X и т. Д.).
    • PHP совместим практически со всеми используемыми сегодня серверами (Apache, IIS и т. Д.)
    • PHP поддерживает широкий спектр баз данных
    • PHP является бесплатным.
    • PHP легко изучается и эффективно работает на сервере

    Установка, конфигурация сервера

    Для начала работы над проектами на языке PHP необходим определённый набор программного обеспечения. Нужен WEB сервер (например: для компьютеров под управление Windows - IIS или Apache, для Linux - компьютеров - сервер Apache). На сервере необходим язык PHP. Для большинства проектов нуже сервер управления базами данных (например: MySQL). Для написания и отладки PHP-программ часто используется программы - IDE (Integrated Developer Environment ;- интегрированная среда разработчика)

    Для начинающих разработчиков, не имеющих опыта в адимистрировании WEB серверов, часто удобнее использовать готовые решения в виде сборки (bundle), которые устанавливаются на локальный компьютер с минимальными требованиями к ресурсам самого компьютера и к административным навыкам пользователя.

    Популярные сборки, например: AMPPS - server, WAMP server .

    Эти сборки есть для всех версий ОС на локальном компьютере (Windows, Mac, Linux, 32-bit, 64-bit,...). Они включают в себя не только собственно язык PHP, но и WEB server, другие необходимые разработчику сервисы, как например сервер баз данных MySQL.

    Для отладки, разработки программ можно использовать, например, Microsoft Visual Studio Code, NotePad++ с различными плагинами, расширениями для программирования на HTML, CSS, JavaScript, PHP.

    Можно скачать на свой компьютер только интерпретатор языка PHP Current Stable PHP version, тогда простой сервер для отладки, тестирования PHP - скриптов можно запустить командой:

    php -S localhost:4000


    Установка VS Code - Windows



    Установка WAMP - Windows




    Программа на PHP

    Текст программы на языке PHP находится в текстовом файле с расширением PHP. Программа может занимать весь файл, может чередоваться в файле с HTML - тегами, может быть импортирована из другого файлаю

    WEB сервер, открыв этот файл, запускает для его анализа интерпретатор языка PHP. Интерпретатор языка игнорирует всё, кроме директив языка PHP. После этого он формирует новую WEB страничку. Все блоки PHP кода заменяются на результат работы PHP, а остальные части исходной странички остаются неизменными.

    Эта, динамически сформированная WEB страничка, посылается клиенту (интернет-браузеру, который к серверу обращался).

    В исходном текстовом файле программа PHP выделяется тегами PHP -

    текст, HTML, CSS, JavaScript

    <?php

    программа1 на языке PHP

    ?>

    текст, HTML, CSS, JavaScript

    <?php программа2 на языке PHP ?> текст, HTML, CSS, JavaScript


    Может вставляться внутрь HTML тега

    <h1 style="color:#0000<?php echo 'FF' ?>"> Текст синего цвета </h1>


    Может вставляться в код страницы в зависимости от результата работы операторов if, for. Пример ниже проверяет значение переменной $var1  и по результату проверки вставляет разные блоки кода.

    <?php if ($var1 == true): ?> Код, который выполнится в том случае, если значение переменной $var1 - истина. <?php else: ?> Код, который выполнится в противном случае <?php endif; ?>
    <?php for ($i=0; $i<5; $i++): ?> <h2>HTML text to repeat</h2> <?php echo $i; ?> <?php endfor; ?>



    Запуск, тестирование PHP скрипта

    С командной строки

    (cmd - Windows,  Terminal - linux). Далее - для Windows.

    • cкачать PHP по ссылке https://www.php.net/downloads.php
    • разархивировать (например - в папку c:\php)
    • добавить папку c:\php в пути поиска Windows
    • создать папку для PHP сервера - например: c:\PHPServer1 
    • запустить Windows command prompt - cmd
    • перейти в папку сервера: cd c:\PHPServer1
    • запустить WEB сервер, используя текущую папку как document root: php -S localhost:4000
    • создать в папке c:\PHPServer1 текстовый файл index.php с текстом: <?php echo "My first PHP project"; ?>
    • открыть страничку сервера в браузере (http://localhost:4000/)



    WAMP server bundle

    Скачать, установить, запустить WAMP.

    Создать виртуальный хост

    Создать в корневом каталоге этого хоста index.php

    Открыть страничку этого сервера в браузере.


    VS code

    Установить Microsoft VS Code

    Установить PHP server extension

    Создать index.php и запустить с помощью PHP server




    Основные понятия. Cинтаксис языка PHP

    Программа на языке PHP состоит из набора допустимых предложений языка(statements), разделённых символом: ";".

    • Statement, Instruction
    • Expression, Evaluation
    • Operator
    • Variable, Constant, Literal
    • Token

    Подробнее


    Использование текстовых комментариев в языке PHP

    Комментарии позволяют автору программы включить в код дополнительную информацию, памятки, пояснения. Коммертарии никак не используются интерпретатором языка, то есть не влияют на ход выполнения программы.

    // комментарий - одна строка /* Комментарии : несколько строк */ echo "My script" ; // комментарий - в конце оператора языка
    <?php
    /*echo "Это тест"; /* Этот комментарий вызовет проблему */
    */
    ?>


    Массивы

    Массив (Array) можно представить как целый набор переменных разного типа, объединённых под одним идентификатором. PHP поддерживает массивы разного типа.

    • Массивы с цифровыми индексам
    • Ассоциативные массивы
    • Многомерные массивы

    Язык PHP предоставляет большое количество встроенных стандартных функций для работы с массивами.

    Подробнее


    Вывод (печать) из программы на PHP

    Подробнее


    Условные операторы

    Условные операторы. Ветвления. if, else, elseif, switch.

    Подробнее


    Циклы (loops)

    Операторы PHP, которые позволяют повторно выполнять определённые блоки программы, анализируя во время выполнения условие окончания цикла.

    • Циклы while, do... while
    • Циклы for, foreach
    • Операторы break, continue

    Подробнее


    Функции в языке PHP (function)

    Функции в языке PHP аналогичны функциям в других языках программирования. Функция представляет собой поименованный блок, участок кода. По этому имени фунция вызывается для выполнения.

    Таким образом, один раз определив функцию и присвоив ей имя, использовать её можно многократно.

    Функция может использовать один или несколько аргументов-параметров. Это специальные переменные, которые формально описываются в момент создания функции, а реальные значения получают во время вызова, выполнения функции.

    Функция может возвращать в вызываемую программу некоторое значение через своё имя.

    Работа с функциями состоит из 2-х этапов:

    • создать, определить функцию (define function)
    • вызвать функцию (call function)

    Подробнее


    Строковые переменные

    Декларация текстовых (строковых переменных). Разделители строк. Интерпретация строк. Функции PHP для работы со строковыми переменными.

    Подробнее


    Область видимости переменных

    Пространство имён (namespace)

    Область видимости переменных. Пространство имён.

    Подробнее


    Работа с датами

    Функции PHP для работы с датами, временем.

    Подробнее


    Запросы HTTP

    Запросы HTTP, параметры URL, формы HTML. Методы: get, post. $_POST, $_GET

    Подробнее


    Регулярные выражения (Regular expressions)

    Подробнее


    Фильтры

    Фильтры позволяют выполнить проверку данных и обезопасить их от возможных вредоносных кодов. Это особенно важно, если содержимое получено из неизвестных или ненадежных источников, таких, как пользовательский ввод. Например, такие данные можно получить из HTML-форм.

    Существует два основных типа фильтрации: проверка и очистка.

    Проверка используется для определения соответствия данных определённым критериям. Например, применение FILTER_VALIDATE_EMAIL позволяет проверить, являются ли введённые данные адресом email,, сами данные при этом останутся нетронутыми.

    Подробнее


    Работа с формами в PHP

    Большую роль в WEB - программировании играет передача данных через сайт на сервер и обработка этих данных.

    Эту роль выполняют формы (forms). Форма собирает введённые посетителем сайта данные (они ввдятся при помощи специальных полей ввода) и передаёт их программе-обработчику на сервер.

    Работу с формами можно разделить на два этапа:

    1. создать HTML-форму
    2. написать PHP-программу для обработки данных формы.

    Например:

    <form action="prog.php" method="post"> Введите имя: <input type="text" name="nam"> <input type="submit"> </form>

    В этом примере в окне браузера нарисуется форма с одним полем ввода и кнопкой "SUBMIT"

    При нажатии на эту кнопку, форма возьмёт данные, введённые в поле ввода (input type="text"), создаст в глобальной PHP-переменной $_POST (так как атрибут method тега form имеет значение "post") элемент массива с индексом nam (так как атрибут name тега input имеет значение "nam") и присвоит этому элементу введённое в поле значение. После этого форма вызовет PHP-программу из файла с именем prog.php (так как action="prog.php").

    Вызванной программе доступны все глобальные переменные, в том числе - массив $_POST и его элемент $_POST['nam'] , в котором и находится переданное формой значение.

    Подробнее


    Работа с файлами

    PHP позволяет хранить части программного кода в различныхфйлах. Можно включать в программу на PHP различные фрагменты кода из других файлов.

    Из программы на PHP можно работать с файлами и папками на диске сервера.

    Подробнее


    Куки (Cookies)

    HTTP Cookies - это механизм хранения данных браузером компьютера клиента.

    PHP содержит ряд функций для работы с cookies.

    Подробнее


    Контроль сеанса связи (Sessions)

    Sessions в PHP предназначены для созранения на сервере информации о сеансе связи с браузером клиента. Похоже на cookie, но информация зранится не на компьютере клиента, а на сервере.

    Подробнее


    Работа с электронной почтой (E-Mail)

    Самый простой способ посылать почту из программы на PHP - функцмя mail().

    Пример:

    <?php $to = Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.'; $subject = 'the subject'; $message = 'hello'; $headers = 'From: Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.' . "\r\n" . 'Reply-To: Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); mail($to, $subject, $message, $headers); ?>

    Но использование этой функции не всегда удобно и надёжно. Часто удобнее использовать другие билиотеки или классы для работы с электронной почтой из PHP.

    Подробнее

    OOП на PHP

    Программа на языке PHP может быть написана с использованием разных подходов к программированию.

    Первый подход - процедурное (procedural) программирование. В этом случае программа использует различные структыры данных (переменные, массивы,...) и функции для их обработки. 

    Второй подход - объектно-ориентированное (Object Oriented) программирование. В этом случае внимание разработчика в первую очередь сосредоточено на функциональных блоках программы- объектах и их взаимодействии. 

    При использовании ООП сначала создаётся класс (шаблон для объекта). Класс отражает необходимый функционал для будущих объектов: 

    описывает данные, которые объект сможет использовать - свойства  (properties), 

    возможные способы манипулирования будущим объектом - методы (methods). 

    Далее по этому шаблону (class) в программе создаются объекты. Каждый из этих объектов может использовать те свойства и методы, которые класс описал.

    Например, если программа должна использовать электронную почту, то логично создать класс, имеющий свойства: ИМЯ_ПОЛУЧАТЕЛЯ, ИМЯ_ОТПРАВИТЕЛЯ, ТЕКСТ_СООБЩЕНИЯ и методы ПОСЛАТЬ_ПОЧТУ.

    Объектно-ориентированное программирование во многих случаях упрощает создание программ со сложными логическими структурами. Такой подход позволяет больше абстагироваться от техники программирования и сосредоточиться на логика программы.

    Подробнее


    Работа с базами данных - MySQL

    База данных представляет собой структурированную систему храниения и управления данными. Каждая база данных поддерживает один или несколько интерфейсов (API) для разных языков программирования, в том числе - для PHP. Эти библиотеки API предназначены для создания баз данных, доступа к ним, управления, поиска и репликации данных.

    Для хранения данных могут быть использованы и другие способы. Например: файлы в файловой системе, таблицы в памяти.  Но база данных предоставляет несравнимо больше возможностей для надёжной, быстрой и эффективной выборки и обработки больших массивов данных.

    В настоящее время наиболее часто для хранения и управления больщими массивами информации используются реляционные системы управления базами данных (RDBMS Relational Database Management System). Все данные хранятся в разных таблицах и отношения между ними устанавливаются с использованием различного типа ключей.

    MySQL - популярная система управления базами данных. Практически все языки программирования поддерживают API для работы с MySQL. 

    Самое популярное сочетание для WEB разработок - это язык программирования PHP и MySQL в качестве системы управления базами данных.

    MySQL использует стандартные запросы языка SQL (Structured Query Language  queries) для манипуляций с данными.


    Подробнее



    PHP и AJAX

    Основы.

    Client Side HTML file

    Server Side PHP file

    Подробнее




  • Visual Studio Code для HTML, CSS, SASS, JavaScript

    Microsoft Visual Studio Code

    Visual Studio Code - это бесплатный, удобный, современный, универсальный редактор программного кода, разработанный компанией Microsoft для разных операционных систем: Windows, Linux и macOS. 

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

    Установка

    Скачать Visual Studio Code последней версии можно с сайта разработчика (для любой ОС): https://code.visualstudio.com/download

      




    HTML5, CSS3, SASS, JavaScript 

    Подсказки при наборе HTML кода (автодополнение кода).

    Проверка синтаксиса.

    Использование аббревиатур для быстрого набора HTML текста.

    Color Picker - подбор, просмотр цветов.

    Дополнительный плагин - Live Server.

    Дополнительный плагин - open-in-browser - добавляет функцию открывать файлы в любом установленном браузере (Opera, Safari, Firefox, Chrome, IE).

    Дополнительный плагин для SASS - Live SASS compiler


    Простая HTML страничка

    Добавить CSS

    Live server

    SASS


  • Web developer

    Современные интернет-технологии

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

    • Графический дизайн интерфейса сайта (WEB design, UI design )
    • Разработка функциональных возможностей сайта (Front-end development, UX design и Back-end development)

    В зависимости от деталей реализации каждого конкретного интерет-проекта: его целей, сложности, бюджета может отпасть необходимость какого-либо конкретного этапа разработок.

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

    У нас Вы можете получить специализацию в любом направлении: от графика до программиста широкого профиля.

    При записи на курс мы предоставляем возможность пройти предварительное тестирование-собеседование с опытным преподавателем. Это помогает раскрыть Ваш потенциал, определить перспективы обучения по той или иной специальности. Выбор курса должен определяться, в том числе, Вашими личными возможностями при восприятии нового материала, предыдущим опытом, знаниями и персональными склонностями. Наш специалист учитывает все эти факторы, наряду с Вашей готовностью учиться и тратить личное время на собственное образование. При составлении индивидуальной програмы обучения учитывается также и график Вашей занятости.

    Все наши программы обучения ориентированы, в первую очередь, на требования современного рынка труда.

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

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

    WEB дизайнер

    (WEB designer, UI/UX designer)

    Курс рассчитан на подготовку специалистов по разработке графического интерфейса для интернет-проектов.

    Это: графический дизайн сайта, создание шаблонов, подготовка и оптимизация графического контента (картинки, mutimedia).

    Предварительные требования

    • Опыт работы с компьютером и интернет в качестве пользователя (интерфейс Windows или Linux, интернет браузер, текстовый редактор)

    Программа курса

    Adobe Photoshop, Illustrator, Dreamweaver - basics

    HTML5, CSS3, FlexBox, CSS grid

    Bootstrap 4 - CSS

    WEB - разработчик (интерфейс пользователя)

    (Front-end, Client-side developer)

    Курс рассчитан на подготовку специалистов-разработчиков, специализирующихся на клиентской части интернет-приложений.

    Это: логика и функционал интерфейса сайта - всё то, что выполняется браузером клиента. А также: оптимизация сайта для поисковых машин, интернет-продвижение сайта (CEO).

    Предварительные требования

    • Опыт работы с компьютером и интернет в качестве пользователя (интерфейс Windows или Linux, интернет браузер, текстовый редактор)
    • Базовые знания Английского языка (на уровне технического перевода)

    Программа курса

    Акад. часов - в группеАкад. часов - индивидуально
    1HTML5, CSS3, FlexBox, CSS grid 6010
    2Browser, DOM, JavaScript 60 10
    3jQuery, jQuery UI 406
    4Bootstrap 4 - CSS, Bootstrap 4 - jQuery 305
    5NodeJS, MS TypeScript, SASS 305
    6Angular 5 framework 5510
    7CEO 152
    Всего 31035

    WEB - разработчик (серверные приложения)

    (Back-end, Server-side developer)

    Курс рассчитан на подготовку специалистов-разработчиков, специализирующихся на серверной части интернет-приложений.

    Это: функционирование серверной части интернет-приложения, обработка запросов клиентов, базы данных.

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

    Наиболее распространённые - это сервера Apache на операционной системе Linux. Программирование на PHP, MySQL.

    Предварительные требования

    • Опыт работы с компьютером и интернет в качестве пользователя (интерфейс Windows или Linux, интернет браузер, текстовый редактор)
    • Базовые знания Английского языка (на уровне технического перевода)


    Программа курса - Back-end PHP

    Акад. часов - в группеАкад. часов - индивидуально
    1HTML5, CSS3 508
    2Apache102
    3PHP 7, MySQL10020
    4Laravel 5 Framework 10020
    Всего 30050


    Программа курса - Back-end Java

    Акад. часов - в группеАкад. часов - индивидуально
    1HTML5, CSS3508
    2Apache, Tomcat, Eclipse 407
    3Java 10020
    4Spring MVC10020
    Всего29055


    Программа курса - Back-end Python

    Акад. часов - в группеАкад. часов - индивидуально
    1HTML, CSS, and JavaScript6010
    2Python and Django18040
    Всего24050


    WEB - разработчик (полный курс)

    (Full stack WEB developer )

    Курс готовит универсальных специалистов широкого профиля, охватывая специальности: Front-end и Back-end developer


    WEB - начинаюшим

    Курс предназначен для тех, кто хочет быстро научиться строить сайты на базе готовых решений.

    Это: системы управления контентом (WordPress, Joomla, Opencart), использование готовых шаблонов, создание шаблонов - Artisteer.

    Предварительные требования

    • Опыт работы с компьютером в качестве пользователя

    Программа курса

    Акад. часов - в группе Акад. часов - индивидуально
    1HTML5, CSS3 - intro 305
    2CMS Joomla, WordPress, Opencart 10020
    3Шаблоны сайтов. Artisteer5010
    Всего18035

  • Вставка видео в HTML документ

    Вставка видео в HTML-документ

    HTML тег - <embed>

    <embed src="/example.mpeg" autostart="false" height="30" width="144" />

    Возможные расширения видеофайлов для <EMBED>

    • .swf - файлы Macromedia Flash
    • .wmv - Microsoft Windows Media Video
    • .mov - Quick Time Movie, Apple
    • .mpeg - созданные Moving Pictures Expert Group.

    Наиболее часто используются: .mpeg and .swf, так как это клмпактные форматы.

    Атрибуты тега <EMBED>

    • autostart - автоматический старт просмотра по окончании загрузки странички. Может принимать значения: true или false.
    • hidden - скрывать или нет кнопки (true или false)
    • volume - громкость, может быть от 0 до 100
    • loop- разрешить автоматический повтор (неограниченное количесттво раз), может быть: true или false.
    • playcount - разрешить автоматический повтор несколько раз, например: playcount="2" означает, что видео проиграится 2 раза подряд.


    HTML5 тег - <video>

    В HTML5 для вставки видеоматериалов в документ удобно использовать тег <video>.

    <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>


    Сейчас  HTML5 <video> tag, поддеоживает 3 типа видеофайлов:

    • mp4 - MIME-type video/mp4
    • webm - MIME-type video/webm
    • ogg - MIME-type video/ogg


    Атрибуты тега video

    • autoplay - если присутствует, то видео начинает проигрываться сразу же после загрузки страницы.
    • autobuffer - если присутствует, то видео начнет загружаться с сервера, однако не начнет проигрываться до тех пор, пока пользователь не нажмет на кнопку play.
    • poster - указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.
    • controls - Отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
    • width - ширина области просмотра
    • height - высота области просмотра.


    Поддержка браузеров. Кодеки.

    Форматы аудио и видео для файлов, используемых в теге <video>

    Браузеры компьютеров 

    Свойство  Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 3.0 3.5 (1.9.1) 9.0 10.50 3.1
    <audio>: PCM in WAVE (Yes) 3.5 (1.9.1) No support 10.50 3.1
    <audio>: Vorbis in WebM (Yes) 4.0 (2.0) No support 10.60 3.1[1]
    <audio>: Streaming Vorbis/Opus in WebM via MSE ? 36.0 (36.0)[2] ? ? ?
    <audio>: Vorbis in Ogg (Yes) 3.5 (1.9.1) No support 10.50 No support
    <audio>: MP3 (Yes)[4] (Yes)[5] 9.0 (Yes) 3.1
    <audio>: MP3 in MP4 ? ? ? ? (Yes)
    <audio>: AAC in MP4 (Yes)[6] (Yes)[7] 9.0 (Yes) 3.1
    <audio>: Opus in Ogg 27.0 15.0 (15.0) ? ? ?
    <audio>: FLAC No support 51 (51) No support No support No support
    <audio>: FLAC in Ogg No support 51 (51) No support No support No support
    <video>: VP8 and Vorbis in WebM 6.0 4.0 (2.0) 9.0[8] 10.60 3.1[9]
    <video>: VP9 and Opus in WebM 29.0 28.0 (28.0)[36] ? (Yes) ?
    <video>: Streaming WebM via MSE ? 42.0 (42.0)[35] ? ? ?
    <video>: Theora and Vorbis in Ogg (Yes) 3.5 (1.9.1) No support 10.50 No support
    <video>: H.264 and MP3 in MP4 (Yes)[4] (Yes)[10] 9.0 (Yes) (Yes)
    <video>: H.264 and AAC in MP4 (Yes)[4] (Yes)[11] 9.0 (Yes) 3.1
    <video>: FLAC in MP4 ? 51 (51) ? ? ?


    Браузеры мобильных устройств
    Свойство Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile Chrome for Android
    Basic support 2.3 24.0 1.0.1 10.0 11.0 (Yes)[13] 3.2 29.0
    <audio>: PCM in WAVE ? 24.0 1.0.1 No support No support (Yes)[14] 3.2 ?
    <audio>: Vorbis in WebM ? 24.0 1.0.1 No support 11.0 (Yes)[15] No support ?
    <audio>: Streaming Vorbis in WebM via MSE ? ? ? ? ? ? ? ?
    <audio>: Vorbis in Ogg ? 24.0 1.0.1 No support 11.0 (Yes)[16] No support ?
    <audio>: MP3 ? (Yes)[17] (Yes)[18] 10.0 ? (Yes)[19] 3.2 ?
    <audio>: MP3 in MP4 ? ? ? ? ? ? (Yes) ?
    <audio>: AAC in MP4 ? (Yes)[20] (Yes)[21] 10.0 ? (Yes)[22] (Yes) ?
    <audio>: Opus in Ogg No support 24.0 No support No support No support (Yes)[23] No support No support
    <video>:  VP8 and Vorbis in WebM 2.3 24.0 1.0.1 No support 16.0 (Yes)[24] No support 29.0
    <video>: VP9 and Opus in WebM ? ? ? ? ? ? ? ?
    <video>: Streaming WebM via MSE ? 42.0 (42.0) ? ? ? ? ? ?
    <video>: Theora and Vorbis in Ogg No support 24.0 1.0.1 No support No support (Yes)[25] No support No support
    <video>:  H.264 and MP3 in MP4 (Yes)[26] 24.0[33] (Yes)[27] 10.0 16.0[28] (Yes)[29] (Yes) 29.0
    <video>: H.264 and AAC in MP4 (Yes)[30] 24.0[34] (Yes)[31] 10.0 16.0[28] (Yes)[32] 3.2 29.0
    <video>: FLAC in MP4 ? 51.0 (51) ? ? ? ? ? ?