Методическая разработка "Знакомство с HTML 5"

Методическая разработка

серии практических работ по информатике и

информационно-коммуникационным технологиям

по теме «Знакомство с HTML 5»

Федорова Л.А.

преподаватель информатики и ИКТ

Оглавление

Введение .............................................................................................................................................................. 3

Практическая работа 1. Первая страница. Элементы разметки. .................................................................... 5

Задания для самостоятельного выполнения ................................................................................................. 9

Практическая работа 2. Аудио в HTML5 ....................................................................................................... 10

Задание для самостоятельного выполнения ............................................................................................... 12

Практическая работа 3. Видео в HTML5 ........................................................................................................ 13

Задание для самостоятельного выполнения ............................................................................................... 14

Практическая работа 4. Как определить координаты пользователя. Дополнительное задание................ 14

Вывод ................................................................................................................................................................. 15

Примеры графики, созданной при помощи HTML5 и CSS3 и ссылки на ресурсы .................................... 16

Список литературы ........................................................................................................................................... 16

Введение

Данная методическая разработка представляет собой подборку дополни-

тельных практических работ по теме «Практикум по HTML 5» к теме «Создание

web- сайта».

Актуальность данной методической разработки обусловлена необходимостью

добавления в имеющийся курс знаний и практических умений о развивающихся

современных тенденциях при создании Web-страниц. Так на сегодняшний день ин-

тернет имеется на устройствах, которые могут быть основаны на различных аппа-

ратных и программных платформах, сильно отличающихся друг от друга. Не удив-

ляют так называемые «умные вещи» и «интернет-вещи», обладающие способно-

стью подключаться к сети и на каких платформах они будут работать в будущем,

пока не известно. Все это аппаратно-программное многообразие объединяет одно –

строгое соблюдение интернет-стандартов.

Разработка посвящена теоретическим практическим аспектам знакомства с

языком разметки HTML 5 в курсе школьной информатики. Предложенный проект

научит создавать структуру страницы, обеспечивают постепенное углубление и

расширение знаний и практических умений. Начав с самых азов, учащиеся сна-

чала создают небольшие, а затем могут перейти к созданию более крупные и

сложные проекты.

Цель: практическое освоение возможностей языка гипертекстовой размет-

ки HTML 5, осуществление связи теории с практикой на занятиях.

Задачи:

− изучить, опираясь на базовый курс, семантические элементы

nav, article, header, footer, aside и section; научиться работать с файлами

мультимедиа без использования Adobe Flash и прочих приложений;

− научиться разрабатывать структуру современной web-страни-

цы, удовлетворяющую принципам современного web-дизайна для решения

различных учебных задач и задач, соответствующих индивидуальным ин-

тересам.

В данной разработке представлены практические работы по созданию ре-

альных проектов. Для каждого проекта приводится содержательная постановка

задачи. Выполнение проекта сопровождается пошаговыми инструкциями – дает-

ся подробный порядок действий учащегося. Представленные рисунки помогают

понять, как должно выглядеть и работать создаваемое приложение.

Приводится много готовых программных кодов с подробными коммента-

риями, т.е., используется принцип обучения «по образцу».

Для закрепления полученных знаний и навыков предлагаются дополни-

тельные задания по доработке проектов и задания для самостоятельного выпол-

нения.

Практикум поможет преподавателю организовать и провести занятия по

изучению языка гипертекстовой разметки HTML 5. Особое внимание следует уде-

лить анализу приведенных в практикуме примеров. Иногда можно предложить

учащимся самостоятельно разобрать материал, составить краткий конспект. По-

сле этого следует перейти к выполнению проектов.

Для некоторых проектов можно заранее подготовить шаблоны страниц, а

учащимся предложить составить программный код и отладить его. Возможно за-

ранее подготовить рисунки для проектов.

Общее количество работ и заданий к ним, которые будут выполняться,

преподаватель определяет самостоятельно: оно зависит от времени, которым

располагает учитель, и уровня подготовки учеников.

В практикуме приводится большое количество готовых программных ко-

дов. Программные коды должны быть проанализированы учениками самостоя-

тельно или с помощью преподавателя до того, как они будут набраны. Иногда

очень полезно вместе с учениками составить алгоритм решения той или иной за-

дачи, так как в практикуме приводятся лишь комментарии.

После работы с данным практикумом учащиеся познакомятся с современ-

ными принципами web-дизайна, научатся:

− создавать грамотно структурированную страницу;

− размещать на ней аудио и видео контент.

Для контроля усвоения материала и отработки практических навыков, по-

сле создания разобранных примеров учащимся предлагается выполнить не-

большие дополнительные задания к проекту или разработать индивидуальный

проект на выбранную тему.

Практическая работа 1. Первая страница. Элементы разметки.

Задание: создадим первую страницу. Рассмотрим элементы раз-

метки.

Выполним задания для самостоятельной работы.

I. Создадим страницу.

В любом текстовом редакторе или в редакторе кода наберем листинг про-

граммы

Обратим внимание, что в нем указан <!DOCTYPE html> для html5 и в теге

content="text/html; charset=utf-8">

Подключена таблица стилей.

Сохраним файл с расширением htm (html) и откроем его для просмотра в

любом браузере.

II. Семантические элементы в html5

Семантические элементы в HTML5 доступно описывают свой смысл и на-

значение как для браузеров так и для разработчиков. На данный момент web-

обозреватели никак не выделяют визуально теги семантической разметки. Но мы

всегда можем привязать к ним стили, чтобы задать нужное нам оформление.

Ранее, до HTML5, вся разметка страницы строилась на элементе <div> с

присвоенными ему классами и идентификаторами. Классы и идентификаторы

присваивались для настройки отображения элемента на веб-странице.

В HTML5 появились совершенно новые семантические элементы. Они

позволяют более понятно структурировать контент, выполнить его группировку.

А так же позволяют размечать текстовое содержимое страницы. Все новые эле-

менты позволяют улучшить структуру страницы, добавив смысловое значение

их содержимому. Но не смотря на нововведение к новым элементам в HTML5 не

применяются никакие правила отображения. Поэтому их отображение можно на-

Кодировка utf-8 – это разновидность кодировки Unicode, предназначенная

для web-дизайна. Может закодировать все символы всех языков, имеющихся на

земле. Для кодирования текста страниц, написанных на html5, следует приме-

нять только эту кодировку. Использование других кодировок не допускается.

строить по своему усмотрению. Для всех элементов доступны глобальные атри-

буты.

Согласно новой спецификации HTML5 каждый элемент принадлежит к

определенной категории. Каждая из категорий группирует элементы со схожими

характеристиками.

Общие категории элементов:

o Текстовое содержимое; Потоковое содержимое;

o Интерактивное содержимое; Секционное содержимое;

o Мета содержимое;

o Встроенное содержимое;

o Заголовочное содержимое.

Элемент <header>

Категории контента: потоковое содержимое.

Данный элемент группирует внутри себя вводные и навигационные эле-

менты. Он не является обязательным в структуре веб страницы. Он может содер-

жать заголовки, форму поиска, содержание раздела и тп. В одном документе

HTML может содержаться несколько таких элементов и располагаться в любом

месте страницы. Однако его нельзя помещать внутрь элемен-

тов <footer>, <address> или другого элемента<header>

Рассмотрим пример, и соответствующий код.

Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.

Предназначен для создания блока навигации по сайту или по веб странице.

Он не обязательно должен находиться в элементе <header>. На одной странице

может быть несколько блоков навигации. Он не заменяет собой теги <ol> и <ul>,

а всего лишь обрамляет их. Стоит учитывать, что не стоит обрамлять в <nav> все

группы ссылок. Его стоит использовать только для обрамления главных навига-

ционных блоков. В качестве элементов панели навигации можно использовать

не только теги <ol> или <ul>.

Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.

Независимы обособленный блок, который используется в основном для

группировки записей, статей, публикаций, комментариев и т.п. Как правило на-

чинается с заголовка и может использоваться многократно. Так же может дубли-

роваться на других страницах сайта и содержать внутри другие элементы

<article>. Его рекомендуется использовать в том случае если содержимое эле-

мента явно указано в схеме документа.

Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.

Представляет собой универсальный раздел документа. Он группирует те-

матическое содержимое и обычно содержит заголовок. Не является блоком

оберткой. В качестве содержимого блока может выступать программа мероприя-

тия, раздел научных публикаций, оглавление.

или так

Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.

Группирует содержимое, связанное с окружающим его контентом напря-

мую, но которое можно счесть отдельным (т.е., удаление этого блока не повлия-

ет на понимание основного содержимого). Чаще всего элемент позиционируется

как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>,

Напомним о вложенности элементов.

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными эле-

ментами <article>, в которых есть один или несколько элементов <article>. Не

все страницы должны быть устроены именно так, но это допустимый способ

вложения элементов. Например, основная область контента страницы содер-

жит два блока со статьями разной тематики. Можно сделать на этом ак-

цент, поместив каждую статью одной тематики внутрь элемента <section>

цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для

блоков, просто позиционированных в стороне.

Элемент <footer>

Категории контента: потоковое содержимое.

В основном представляет собой нижний колонтитул. Обычно содержит ин-

формацию об авторе, данные о копирайте и тп. В одном документе может

несколько таких элементов. Каждая страница сайта и каждая статья может иметь

собственный <footer>.

Элемент <address>

Категории контента: потоковое содержимое.

Используется для определения контактной информации автора/владельца

документа или статьи. Для обозначения автора документа тег размещают внутри

элемента <body>, для отображения автора статьи — внутри тега <article>. В

браузере обычно отображается курсивом.

Элемент <main>

Категории контента: потоковое содержимое.

Элемент <main> представляет основное содержимое документа (содержи-

мое элемента <body>). Контент, находящийся внутри элемента, должен быть

уникальным и не повторяться во всех документах сайта, таких как навигацион-

ные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если

форма поиска является основной функцией документа).

Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содер-

жимое.

Представляет собой автономный контент, являющийся самостоятельным

элементом. С помощью него можно добавлять краткие характеристики к иллю-

страциям, фото и тп. Данный элемент является блочным и по ширине занимает

всю ширину блока контейнера.

Элемент <main> не может быть потомком таких элементов

как <article>, <aside>, <footer>, <header> или <nav>.

Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит

ни к одной категории контента. Элемент является блочным, по ширине равен

ширине элемента <figure>, высота по умолчанию равна 18px

Или так:

ния

Задания для самостоятельного выполне-

1. Рассмотрите предложенные листинги и наберите их.

2. Внесите изменения таким образом, чтобы на странице присутствова-

ли все рассмотренные элементы.

3. Создайте свою страницу на тему «Сравнение web-обозревателей».

Необходимые иллюстрации и медиа сохраните в отдельной папке. В создан-

ной странице должна быть продуманная структура, позволяющая ориентиро-

ваться в коде страницы.

4. Подготовьте индивидуальную тему и разработайте для нее структу-

ру страницы.

Практическая работа 2. Аудио в HTML5

Аудио в HTML5 предоставляет возможность разработчикам работать с

аудио контентом на странице сайта. Не так давно, до появления HTML5, добав-

ление звуковых файлов на страницу было возможно только как фоновую. Мину-

сом было то что он проигрывался все время пока пользователь находится на

странице. Отсутствовала возможность его отключения пользователем.

Но благодаря новшествам HTML5 появилась возможность добавлять

аудио содержимое на страницы сайта. Причем не используя множества дополни-

тельных модулей.

Элемент <audio>

Используется для вставки звукового файла на веб страницу.

Общий вид элемента:

Атрибут controls добавляет отображение браузерами интерфейса управле-

ния аудио плеера — кнопки воспроизведения, паузы, громкости.

К сожалению, в настоящий момент нет такого формата аудио, который бы

проигрывался во всех браузерах. В связи с этим рекомендуется указывать

несколько источников звука с использованием атрибута src элемента <source>.

Одновременно можно добавить резервный контент для тех браузеров которые не

поддерживают элемент <audio>.

Рассмотрим атрибуты тегов:

1. <audio>

o autoplay — автоматическое воспроизведение после загрузки страницы;

o controls — указывает что нужно отобразить элементы управления вос-

произведением;

o loop — циклическое воспроизведение звука;

o muted — выключение звука при воспроизведении файла;

o preload — отвечает за предварительную загрузку аудио файла. некоторые

браузеры его игнорируют. значение: auto — браузер загружает файл пол-

ностью чтобы он был доступен, когда пользователь начнет его воспроизве-

дение; metadata — браузер загружает небольшую начальную часть чтобы

определить его характеристики; none — автоматическая загрузка отсут-

ствует.

o src — содержит абсолютный или относительный путь к аудио файлу.

Форматы аудио файлов:

MP3 — самый популярный аудио формат, использующий сжатие с потеря-

ми и позволяющий уменьшить размер файла в несколько раз. В силу лицензион-

ных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по срав-

нению с последним, поддерживает более высокое качество звука при сходном

размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в

Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно

широко поддерживается аппаратными проигрывателями.

2. Атрибуты тега <source>

o media — определяет тип медиа устройства;

o src — содержит путь к файлу (относительный или абсолютный);

o type — определяет MME тип файла.

Альтернативные аудио-ресурсы

Элемент <source> используется для добавления нескольких медиа-ресур-

сов для <audio> и <video>. Указывает на альтернативные видео/аудио файлы,

которые браузер может выбрать из предложенных на основании поддержива-

емого им типа носителя или кодека.

Субтитры и заголовки

Элемент <track> используется в качестве дочернего элемен-

та <audio> и <video>. Добавляет текстовую дорожку для субтитров, заго-

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

видна во время воспроизведения аудио или видеофайла.

3. Атрибуты тега <track>

o default — воспроизведение по умолчанию. Только один элемент <track>

может содержать данный атрибут.

o kind — указание типа текстовой дорожки, по умолчанию выводятся суб-

титры. Может принимать значения: captions — перевод диалогов и звуко-

вых эффектов, отображаемый в виде текста поверх видео; chapters — до-

бавляет название глав в виде списка для навигации; descriptions — добав-

ляет звуковое описание происходящего в видео; metadata — метаданные,

используемые скриптами, не отображаются для пользователей; subtitles —

текстовое дублирование звуковой дорожки видео, отображаются в виде

субтитров.

o label — Добавляет название дорожки, если он не задат, то применится зна-

чение по умолчанию.

o src — содержит абсолютный или относительный адрес данных текстовой

дорожки.

o srclang — язык воспроизводимой дорожки.

Задание для самостоятельного выполнения

1. Добавьте на свою страницу аудио фрагмент. Не забудьте указать тексто-

вые комментарии к тому, что будет воспроизводиться.

2. Создайте страницу с несколькими звуковыми файлами

3. Запишите аудио с помочью имеющихся средств (диктофона, телефона и

т.п.). Практически выясните, какие форматы аудио файлов размещаются на

странице. При необходимости выполните кодировку. Запишите к каждому

используемому формату комментарии.

4. Протестируйте созданные таблицы в различных браузерах. Определите,

какие форматы файлов воспроизводят современные web-обозреватели.

Оформите результаты в виде таблиц. Разместите их на странице.

Практическая работа 3. Видео в HTML5

До появления HTML5 просмотр видео в web-страницах осуществлялся при по-

мощи всевозможных flash-плееров. Стандарт HTML5 предлагает парный тег

<video>. Интернет-адрес видеофайла указывается с помощью знакомого атрибу-

та src этого тега.

Набор элементов для управления воспроизведением ролика аналогичен

тому, который выводится тегом <audio>; добавилась только кнопка развертыва-

ния панели просмотра на все окно браузера.

Атрибуты width и height служат для указания ширины и высоты вос-

производимого на странице ролика. Обе величины задаются в пикселах. (По

умолчанию это размеры 300х150)

Чтобы указать графическое изображение, которое будет выводится в каче-

стве заставки, используем атрибут poster, в кортом укажем интернет-адрес нуж-

ного графического файла

Задание для самостоятельного выполнения

1. Добавьте на свою страницу видео файл. Не забудьте указать текстовые

комментарии к тому, что будет воспроизводиться.

2. Создайте страницу с несколькими видео файлами

3. Запишите видео с помочью имеющихся средств (диктофона, телефона и

т.п.). Практически выясните, какие форматы видео файлов размещаются на

странице. При необходимости выполните кодировку. Запишите к каждому

используемому формату комментарии.

4. Протестируйте созданные таблицы в различных браузерах. Определите,

какие форматы файлов воспроизводят современные web-обозреватели.

Оформите результаты в виде таблиц. Разместите их на странице. Размеще-

ние, аналогично указанию нескольких источников аудио.

Практическая работа 4. Как определить координаты пользователя.

Дополнительное задание.

Geolocation API — программный интерфейс для определения координат

пользователя. На основании полученных данных легко отметить местонахожде-

ние пользователя, скажем, на Google Maps. Где можно применять эту возмож-

ность? Например, разработчики популярного сервиса микроблоггинга

Twitter используют Geolocation API в web-интерфейсе твиттер-клиента. Если

пользователь разрешает получать сведения о своем местоположении, то ко всем

его твитам будет добавляться город, в котором он находится в данный момент.

Пакет информации для анализа строится на основании данных об IP-адре-

се, ближайших Wi-Fi хотспотах, GPS (при наличии устройства), GSM cell ID и

так далее. Теорию и практику получения примерных координат из перечислен-

ных выше источников при необходимости разберите самостоятельно.

При генерации кода на странице браузер спрашивает разрешение

При положительном ответе, вы увидите координаты

Вывод

В современном мире все непрерывно меняется. Тоже самое происходит и с

языком разметки HTML. И сегодня в мире веб разработки во главе стоит

HTML5. Он прежде всего, как и его предшественники, является языком размет-

ки. Но новая версия HTML5 приобрела множество особенностей, которые замет-

но выделяют его на фоне старых версий.

Новый стандарт приобрел множество новых функций и устранил некото-

рые строгости, которые присутствовали в XHTML.

Подводя итог работе, отметим некоторые различия между HTML и

HTML5:

o Возможность использования виртуальной векторной графики (SVG,

canvas), тогда как в старых версиях HTML приходилось использовать сторонние

технологии (Flash, VML, Silver-light и т.д.).

o Использование базы данных SQL и кеш приложений для временного

хранения данных, старые версии могли использовать только кеш браузера.

o Полная поддержка JS (JavaScript) для запуска в фоновом режиме.

o HTML5 не основан на SGML, и это позволяет ему иметь улучшен-

ные правила синтаксического анализа, которые обеспечивают улучшенную сов-

местимость.

o В HTML5, в тексте могут использоваться встроенные MathML и

SVG, тогда как это невозможно в HTML.

o Некоторые из устаревших элементов были полностью удалены:

isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center,

strike, tt.

o HTML5 поддерживает новые виды элементов управления, к примеру,

dates and times, email, number, range, tel, url, search и т.д.

o В HTML появилось много новых элементов. Вот некоторые из самых

важных: summary, time, aside, audio, command, data, datalist, details, embed, wbr,

figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter,

nav, output, progress, rp, rt, ruby, section, source, track, video.

Примеры графики, созданной при помощи HTML5 и CSS3 и ссылки на ре-

сурсы

http://goo.gl/ZBUq - демонстрация возможностей Canvas’a;

http://goo.gl/0QX5 - очень красивая демонстрация различных химические

соединения.

http://goo.gl/75JmF - Компания Google сделала отличную страницу из сме-

си технологий WebGL, HTML5, CSS3 и Flash. Результатом стало интерактивное

приложение, демонстрирующее 3D-тело человека, у которого ты можешь

рассматривать строение внутренних органов.

Список литературы:

1. Информатика. Учебник для 9 класса / Л.Л. Босова – 2-е изд. –М.:

БИНОМ. Лаборатория знаний, 2015

2. Дронов В.А. Разработка современных динамических Web-сайтов. –

СПб.: БХВ-Петербург, 2016

3. Хуан Гоше: HTML5. Для профессионалов. – СПб.: Питер, 2015

4. Кит Джереми: HTML5 для веб-дизайнеров. – М.: МИФ, 2013

Скачать материал

Методическая разработка "Знакомство с HTML 5"

Информатика - еще материалы к урокам:

Предметы

Похожие материалы