Основы HTML:6 лет спустя

Бабич А.В. © 2015http://ProductivityBlog.com.ua

Однажды в студеную зимнюю пору...

● 22 января 2009 годаоткрытая лекция для студентов ППК НТУ “ХПИ” на тему“Основы HTML”

● слайды доступны на SlideSharehttp://www.slideshare.net/liketaurus/html-presentation-941527

Введение в HTMLОбщие сведения

Новая версия стандарта - HTML5

● совместимость ● семантика, а не визуализация● новые возможности

○ мультимедиа○ навигация○ оффлайн○ графика○ веб-сокеты

Новая версия стандарта

CSS3 и JavaScript● преобразования и анимации

○ keyframe● JavaScript API

○ jQuery○ Modernizr

● Canvas!● ...

Новая версия стандарта

● Microsoft Virtual Academyhttp://www.microsoftvirtualacademy.com/

● Developing in HTML5 with JavaScript and CSS3 Jump Starthttp://www.microsoftvirtualacademy.com/training-courses/learn-html5-with-javascript-css3-jumpstart-training

Браузеры

● Google Chrome○ App launcher, диспетчер задач, F12○ Chrome Web Store

■ Chrome Dev Editor■ DevDocs, http://devdocs.io/

■ экспериментальные фичи● WebGL, https://www.chromeexperiments.com/

Web Fundamentalshttps://developers.google.com/web/fundamentals/

Браузеры

● Mozilla Firefox○ Developer Edition○ WebIDE, ○ F12○ Firefox OS

Mozilla Developer Networkhttps://developer.mozilla.org/ru/

Браузеры

● Opera○ теперь - родственник Chrome○ Opera Vivaldi○ Opera TV

Dev. Operahttps://dev.opera.com/, http://www.opera.com/uk/developer

Браузеры

● Maxthon○ теперь - родственник Chrome○ уникальные фишки для видео

■ смотреть в окне■ скачать

○ записная книжка○ F12

Браузеры

● MSIE○ все еще “утилита для

скачивания браузера”○ но 11-й IE неплох…

■ сглаживание шрифтов■ плавные анимации

○ F12● ждем Microsoft Spartan

Can I use...

● Проверка возможностей браузераhttp://caniuse.com/

● Modernizr Test Suitehttp://modernizr.github.io/Modernizr/test/index.html

Структура документа

Теги для структурирования <nav><header><footer><section><article><aside><hgroup>

Введение в HTMLФорматирование

В целом без изменений, но

● некоторые теги стали deprecated● возросла роль CSS

○ оформление○ рисование фигур○ эффекты○ преобразования○ анимации

Введение в HTMLГипертекстовые ссылки и якоря

Без изменений

Введение в HTMLМультмедиа и HTML

Поменялось все!

Ура! Нативная поддержка!● теги <video> и <audio>

<video src="MyVideo.mp4" width="300" height="200" poster="MyPoster.jpg" autoplay="autoplay" muted="muted" controls="controls" loop="loop" ></video>

Поменялось все!

Несколько форматов - перестраховываемся<video poster="MyPoster.jpg" autoplay controls> <source src="MyVideos/MyVideo.mp4" type='video/mp4' /> <source src="MyVideos/MyVideo.webm" type='video/webm' /> <source src="MyVideos/MyVideo.ogv" type='video/ogg' /> <!-- You can embed Flash or Silverlight content here, as a fallback --> <!-- You can also display some simple text for old browsers--> Cannot play video. Download video <a href="MyVideos/MyVideo.webm">here</a></video>

Введение в HTMLСоздание таблиц

Без изменений

Кое-что еще

Теги<thead><th><tbody><tfoot>

Введение в HTMLФреймы

Все так же считаются плохой кармой!

Введение в HTMLПО для веб-дизайна

Доступные инструменты

● AceHTML, 1st Page и Web Studio все еще доступны и даже очень неплохи

● Но лучше Visual Studio нет ничего!https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx

PhotoShop? Нет!

● GIMP или GIMPShophttp://www.gimp.org/

http://www.gimpshop.com/ ● Paint.NET

http://www.getpaint.net/

● Inkscapehttps://inkscape.org/ru/

Бесплатные шаблоны

● http://www.opendesigns.org/website-templates/● http://html5up.net/● http://www.tooplate.com/free-templates● http://getbootstrap.com/

○ http://startbootstrap.com/

Введение в HTMLЗаключение

Пару советов

● HTML(5) Tutorial & Quizhttp://www.w3schools.com/html/ http://www.w3schools.com/html/html5_quiz.asp

● Познакомьтесь с Java Script и jQuery

● Изучите CSS3● Курс 20480 от Microsoft

https://www.microsoft.com/learning/en-us/course.aspx?id=20480b

Вопросы?

http://goo.gl/lm8tLb