<!--HTML 4-->
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->

<!--HTML5-->
<!DOCTYPE html>

<html>
<head>
    <title>Директива DOCTYPE</title>
</head>
<body>
    <p>
Директива DOCTYPE відповідає за визначення типу документу, тобто повідомляє браузеру 
яка версія HTML використовується при написанні сторінки.
        
У HTML5 версія DOCTYPE не вказується, що забезпечує обернену сумісність мови розмітки.
    </p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>

    <!--HTML 4-->
    <!--<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />-->

    <!--HTML5-->
    <meta charset="utf-8" />

    <title>Кодування</title>
</head>
<body>
    <p>
Кодування повідомляє браузерам який набір символів використовувати при відображенні веб-сторінки. Якщо у HTML-документі  кодування не вказане, то браузер намагається визначити його через заголовок відповіді HTTP-сервера (заголовок Content-type).
   </p>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Підключення CSS і JS</title>
    <!--HTML 4-->
    <!--
        <link rel="stylesheet" href="styles.css" type="text/css"/>
        <script src="scripts.js" type="text/javascript"></script>
    -->

    <!--HTML5-->
    <link rel="stylesheet" href="styles.css" />
    <script src="scripts.js"></script>

</head>
<body>
    <p>
У попередніх версіях HTML у CSS-посиланнях link та в елементі script для визначення мови 
потрібно було задавати атрибут type. Зараз задавати атрибут type вже необов’язково.         
   </p>
</body>
</html>

New Input Types

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

New Input Attributes

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Canvas

  • Залежність від роздільної здатності 
  • Немає підтримки обробників подій
  • Слабкі засоби роботи з текстом
  • Є можливість зберегти отримане зображення у .png або .jpg
  • Добре підходить для динамічних ігор

SVG

  • Не залежить від роздільної здатності 
  • Підтримка обробників подій
  • Найкраще підходить для додатків з великими площами рендерингу
  • Повільний рендеринг, якщо складне зображення
  • Не підходить для ігрових додатків
<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Ivanov");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not 
support Web Storage...";
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <header>
            { header }
        </header>
        <nav>
            { navigation links }
        </nav>
        <main>
            <section>
                <article>
                    { independent, self-contained content }
                </article>
                <article>
                    { independent, self-contained content }
                </article>
            </section>
            <aside>
                { content aside from the content it is placed in }
            </aside>
        </main> 
        <footer>
            { footer }
        </footer>
    </body>
</html>

HTML & CSS basics.

By Ievgen Liubarshchuk

HTML & CSS basics.

HTML & CSS basics.

  • 2,404