1 Введение в технологии W3CЛекция 3. Формы, Графика, медиа

2 Формы HTML

3 Тег

4 Элементы ввода text password radio checkbox submit button

5 HTML 5 number (min, max, step)date (max, min), month, week, time, datetime color range (min max) , tel, url search

6 Другие элементы формы HTML 5<span class='tr'><datalist></span> <span class='tr'><keygen></span> <span class='tr'><output></span></p><p><span class="span-circle-num"> 7 </span> <span>Демонстрация</span></p><p><span class="span-circle-num"> 8 </span> Графика Canvas (Холст) SVG JavaScript Фигуры Рисунки +Быстродействие<span class='tr'>-нет доступа по DOM</span> <span class='tr'>SVG</span> <span class='tr'>HTML + JavaScript</span> <span class='tr'>Масштабируемость</span> <span class='tr'>Доступ через DOM</span> <span class='tr'>Анимация</span> <span class='tr'>-Быстродействие</span></p><p><span class="span-circle-num"> 9 </span> <span>Демонстрация</span></p><p><span class="span-circle-num"> 10 </span> Мультимедиа Видео Аудио mpeg +/- avi -/- wmv -/- mov -/- rm -/-<span class='tr'>svf/flv +/-</span> <span class='tr'>ogg +/+</span> <span class='tr'>webM +/+</span> <span class='tr'>mp4 +/+</span> <span class='tr'>Аудио</span> <span class='tr'>MIDI -/-</span> <span class='tr'>wma -/-</span> <span class='tr'>aac -/-</span> <span class='tr'>wav +/+</span> <span class='tr'>mp3 +/</span> <span class='tr'>mp4 +/-</span></p><p><span class="span-circle-num"> 11 </span> видео <video> - HTML 5 несколько источников Элементы управления<span class='tr'>JavaScript</span></p><p><span class="span-circle-num"> 12 </span> Аудио <audio rel="nofollow"> несколько источников Элементы управления<span class='tr'>JavaScript</span></p><p><span class="span-circle-num"> 13 </span> <span>Демонстрация</span></p><p><span class="span-circle-num"> 14 </span> Инструментарий Бесплатное ПО Платное ПО Блокнот VS Express Net Beans<span class='tr'>Eclipse</span> <span class='tr'>Web Matrix</span> <span>….</span> <span class='tr'>Платное ПО</span> <span class='tr'>VS Professional</span> <span class='tr'>Expression Web</span> <span>…</span></p> </div> </div> </div> </div> </div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> <!-- Box Modal --> <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h3 class="modal-title">Sign In</h3> </div> <div class="modal-body"> <form action="https://slidepptx.com/login" method="post"> <div class="form-group form-group-lg"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group form-group-lg"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group form-group-lg"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember Password </label> <label class="pull-right"><a href="https://slidepptx.com/forgot">Forgot Password?</a></label> </div> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button> </form> <hr style="margin-top: 15px;" /> <a href="https://slidepptx.com/login/google" class="btn btn-lg btn-google btn-block"><i class="fa fa-google"></i> Login with Google</a> </div> </div> </div> </div> <!-- Box Footer --> <div class="footer-container" style="background: #fff;display: block;padding: 10px 0 20px 0;margin-top: 30px;"> <div class="footer-container-inner"> <footer id="footer" class="container"> <div class="row"> <div class="bottom-footer"> <div class="container"> Copyright © 2026 SLIDEPPTX.COM. All rights reserved. </div> <hr /> </div> </div> <div class="row"> <!-- Block footer --> <section class="block col-md-4 col-xs-12 col-sm-3" id="block_various_links_footer"> <h4>Information</h4> <ul class="toggle-footer" style=""> <li><a href="https://slidepptx.com/about">About Us</a></li> <li><a href="https://slidepptx.com/privacy">Privacy Policy</a></li> <li><a href="https://slidepptx.com/term">Terms and Conditions</a></li> <li><a href="https://slidepptx.com/copyright">Copyright</a></li> <li><a href="https://slidepptx.com/contact">Contact Us</a></li> </ul> </section> <!-- /Block footer --> <section id="social_block" class="col-md-4 col-xs-12 col-sm-3 block"> <h4>Follow us</h4> <ul> <li class="facebook"> <a target="_blank" href="" title="Facebook"> <i class="fa fa-facebook-square"></i> <span>Facebook</span> </a> </li> <li class="twitter"> <a target="_blank" href="" title="Twitter"> <i class="fa fa-twitter-square"></i> <span>Twitter</span> </a> </li> <li class="google-plus"> <a target="_blank" href="" title="Google Plus"> <i class="fa fa-plus-square"></i> <span>Google Plus</span> </a> </li> </ul> </section> <!-- Block Newsletter module--> <div id="newsletter" class="col-md-4 col-xs-12 col-sm-3 block"> <h4>Newsletter</h4> <div class="block_content"> <form action="https://slidepptx.com/newsletter" method="post"> <div class="form-group"> <input id="newsletter-input" type="text" name="email" size="18" placeholder="Entrer Email" /> <button type="submit" name="submit_newsletter" class="btn btn-default"> <i class="fa fa-location-arrow"></i> </button> <input type="hidden" name="action" value="0"> </div> </form> </div> </div> <!-- /Block Newsletter module--> </div> </footer> </div> </div> <!-- #footer --> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://slidepptx.com/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function (event, ui) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); $(document).ready(function() { $(".doc-share-btn").click(function() { var urlshare = $(this).attr('data-share-url'); window.open('http://www.facebook.com/sharer.php?u=' + urlshare, '_blank'); }); }); function download_submit() { $('#download_form').submit(); } </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-106734935-2', 'auto'); ga('send', 'pageview'); </script> </body> </html>