# Qualified

• Basic elements (TABLE, DIV, P, FORM, A, UL, INPUT):

  • typical behavior
  • constructional differences for each of them

• Page Layouts with tables and div’s:

  • main advantages and disadvantages

• iFrames

  • advantages
  • restrictions

• Forms & form elements

• Semantical layout

  • section, footer, article, nav tags

• Base tag

• Video, Audio

  • How to add on page
  • Syntax
  • Media Events

• HTML5 Input Types

• Canvas

# Forms & form elements

• <form> - defines an HTML form for user input
  • name
  • autocomplete
  • action
  • enctype (text/plain; multipart/form-data если файлы есть)
  • method (POST/GET)
• <input> - defines an input control
• <textarea> - defines a multiline input control (text area)
• <label> - defines a label for an <input> element
• <fieldset> - groups related elements in a form
• <legend> - defines a caption for a <fieldset> element
• <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
• <button> - defines a clickable button
• <datalist> - specifies a list of pre-defined options for input controls
• <output> - defines the result of a calculation

<form action='' method='post' novalidate autocomplete='on'>
  <input type='text' name='firstName' />

  <fieldset readonly>
    <legend>Title</legend>
    <input />
    <input />
  </fieldset>

  <select name='myName'>
    <option value='1'>First</option>
    <option disabled>Second</option>
    <option selected>Third</option>
  </select>

  <textarea name='' cols='30' rows='10' wrap='soft'>
  </textarea>
</form>

# Semantical layout

# <article>

• независимая, отделяемая смысловая единица (комментарий, твит, статья, виджет)
• желателен заголовок внутри
• обычно путают с div и section

# <section>

• смысловой раздел документа. Неотделяемый, в отличии от article
• желателен заголовок внутри
• обычно путают с div и article

# <nav>

# <footer>

# HTML5 Input Types

• Html4: file, submit, checkbox, radio, text, button, reset

# Canvas

элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов

# init

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

# common

ctx.fillStyle = 'red';      // цвет заливки
ctx.strokeStyle = 'green';  // цвет обводок

ctx.lineWidth = 10;         // ширина линии при обводке
ctx.lineCap = 'round';      // butt | round | square
ctx.lineJoin = 'round';     // bevel | round | miter

// ctx.scale(2,2); // scale all next objects
// ctx.rotate(.1); // rotate all next objects