асинхронная школа программирования для детей от 6 лет Московская Область, Люберцы,... 89917884544

HTML5 JS CSS

30.10.2019

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

HTML5 (HyperText Markup Language, версия 5) – язык разметки гипертекста для описания структуры веб-страницы. Целью его разработки было улучшить поддержку мультимедиа-технологий и одновременно сохранить удобочитаемость кода для человека.

Основной компонент HTML5, тег (tag), – это код, который подает браузеру команду выполнить задачу. Например, изменить шрифт или вставить изображение. Теги представляют собой последовательность символов, которая начинается со знака «<» и оканчивается знаком «>». При закрытии тега к нему добавляется символ «/». Теги имеют атрибуты, значения которых могут быть текстовыми, например, «left» или «right», или числовыми, например, ширина и высота изображения. Теги могут вкладываться друг в друга, но не могут пересекаться. Действие вложенных тегов объединяется. То есть, HTML5 – это достаточно простой набор кодов, которые описывают структуру документа.

Язык разметки HTML5 не считается языком программирования, поскольку неполон по Тьюрингу, то есть не дает возможности реализовать любую вычислимую функцию. Для реализации таких возможностей в HTML5 включают программы на языке JavaScript. Это скриптовый язык программирования, код которого выполняется на стороне клиента. Применяется он обычно для организации на сайте динамических HTML-страниц без перезагрузки самой страницы, то есть без обращения к серверу. Программы-скрипты встраивают в HTML-документ, заключая их в теги <script> и </script>. JavaScript – очень выразительный язык, его основные события несложны для понимания и в то же время являются мощным средством программирования.

Для изменения стиля элементов веб-страниц и пользовательских интерфейсов используют набор параметров форматирования CSS (Cascading Style Sheets, каскадные таблицы стилей). С помощью CSS-стилей можно прикреплять стиль (например, шрифты и цвет) к документам HTML, изменяя стиль отдельных элементов.

Одно из основных понятий HTML5 – объектная модель DOM (Document Object Model). Согласно DOM-модели объекты, заключенные в HTML-теги, вложены один в другой и образуют иерархическую структуру, или дерево тегов. Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста – текстовый узел, и т.д. Узлы дерева можно изменять, применяя методы и функции. Именно посредством объектной модели HTML5 взаимодействует со скриптами, написанными на языке JavaScript.

Скрипты JavaScript можно подключать в любом месте, выносить их в заголовок HEAD или использовать внешние скрипты, прописывая путь к файлу со скриптом внутри тегов <script> и </script>. Отдельные файлы удобно использовать, потому что один и тот же файл можно подключать на разных страницах, даже не скачивая его каждый раз заново. С помощью JavaScript можно изменять страницу (писать на ней текст, добавлять и удалять теги, менять стили элементов). Реагировать на события (окончание загрузки страницы, нажатие на кнопку клавиатуры, движение или клик мыши, прокрутка) выполнением соответствующей функции. Выполнять запросы к серверу и загружать данные без перезагрузки страницы. Ребята на занятиях в кружках программирования знакомятся с основными событиями JavaScript, изучают элементы DOM и их методы, которые могут реагировать на события от этого элемента. Разбирают примеры их использования, понемногу погружаясь в такую интересную и востребованную область программирования, как веб-разработка.

Еще с помощью JavaScript можно рисовать! В HTML5 определен элемент <canvas> – растровый холст, прямоугольная область на странице для отображения диаграмм, игровой графики или других изображений. В контексте рисования определены методы и свойства рисования. Это одна из областей HTML5 + JavaScript, изучением которой с интересом занимаются ребята в школах программирования. Ведь эти навыки они позднее смогут использовать при разработке веб-приложений с более сложной графикой, например, аркадных игр.