Курс HTML 5.0: Основы клиентской разработки

Лекция 1:

Трудно переоценить влияние Интернета на повседневную жизнь. С точки зрения автора курса, Интернет можно сравнить с чудесами света. Но за внешней частью глобальной сети, за ее удобством, свободой и доступностью скрывается работа многих тысяч людей. Динамика развития информационных технологий, развитие концепций создания программного обеспечения, эволюция элементной базы и "железа" - несмотря на "молодость" информатики, уже сейчас, глядя на нее, с трудом можно представить весь путь ее развития.

Вехи проектирования сайта:

Ориентация на веб – серфинг. Пользователь нетерпелив, не мотивирован на чтение больших блоков информации и статей. Как правило, взгляд цепляется за баннер, выделенный текст и т.д. Иными словами, необходимо следование методикам захвата и удержания внимания.

Дружественный интерфейс. Пользователь разборчив, привык к простоте и быстрым действиям. То есть, у пользователя не должно возникать вопросов, как осуществить то, или иное действие (опубликовать пост, ответить на сообщение, оценить товар и т.д.).

Однородность. Большинство решений (социальные сети, форумы, новостные ленты и т.п.) уже имеет устоявшиеся форматы и формы представления. Не стоит пытаться внести что – то оригинальное непосредственно в основной функционал сайта, велик риск того, что пользователь предпочтет знакомое новому.

Кроме того, следует помнить, что:

• Сайт должен загружаться быстро.
• Сайт должен быть оптимизирован для выполнения основной своей задачи.
• Содержание сайта должно соответствовать его оформлению.
• Информация должна быть легко читаема.
• Не должно быть элементов, затрудняющих восприятие информации.
• На сайте не должно быть грамматических ошибок.

Ключевые термины и определения

Дотком – компания, специализирующаяся на Интернет – коммерции.

Краткие итоги

Отметим еще раз, что единого определения, поясняющего термин Web 2.0 не существует. Учитывая особенности "раскрутки" проектов и решений, буквально все веб – решения носят гриф "Web 2.0", который, как правило, сами создатели и навешивают. В этом есть своего рода опасность, хотя, с точки зрения автора, не критичная – как и в случае с доткомами, могут сформироваться завышенные ожидания, которые впоследствии способны "бросить тень" на концепцию в целом.

Если говорить просто и коротко, то любое веб – решение, за создание контента которого (или значительной его части) отвечают сами пользователи, может быть отнесено к web 2.0.

Список материалов для самостоятельного изучения

http://oreilly.com/web2/archive/what-is-web-20.html

http://shkolazhizni.ru/archive/0/n-3081

http://www.computerra.ru/think/234100/

http://indexpay.ru/indexpay.ru/elektronnye-dengi-i-internet-kommertsiya/krakh-dotkomov-kak-eto-bylo.html

http://www.arbconsulting.ru/about/blog/marketing/2008/07/14/marketing_8.html

http://www.computerra.ru/readitorial/394494/

Лекция 3: 

Основы HTML. Особенности HTML5

Аннотация: Сущность гипертекста. Развитие стандартов HTML. Уровни HTML. Обзор HTML5.

Любая веб-страница, вне зависимости от контента, стиля оформления, баннеров и прочих элементов внешнего вида, описывается обычным текстом.

Практически любой школьник знает, что "за" веб-страницей находится гипертекст, хотя далеко не каждый может сказать, что же это значит.

Сущность гипертекста

Термин "гипертекст" ввел в оборот в 1965 году американец Тед Нельсон. Автор термина понимал под ним "ветвящийся текст, выполняющий действия по запросу". Иначе говоря, текст, содержащий ссылки на другие фрагменты, структурированный как система возможных переходов является гипертекстом.

При этом, если следовать ссылкам и переходам можно получить линейную, традиционную форму представления текстов.

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

Классическим примером гипертекста является энциклопедия, в которой статьи содержат отсылки на материалы этой же энциклопедии.

Гипертекст позволяет представить в явной форме сеть фрагментов или тезисов. Соответственно, благодаря структуризации значительно повышается эффективность процедур поиска определенной информации.

Если обратиться к истории возникновения гипертекста, то общепринятой точкой отсчета является статья Ванневара Буша "As We May Think" опубликованная в 1945 году. В статье было представлено устройство машины Memex, хранящей на микрофильмах информацию (книги, корреспонденцию и т.п.). Для поиска необходимой информации предлагалось использование ассоциативных связей, что фактически является прообразом гипертекстовых систем.

После появления, разработанным Тимом Бернерсом - Ли протокола передачи данных HTTP, система адресации URL и языка HTML, понятие гипертекста стало неразрывно ассоциироваться с информационными технологиями в общем и глобальной паутиной – в частности.

Обзор html 5

Мы не будем детально рассматривать HTML 5, поскольку просто не хочется повторять множество доступных Интернет – источников, укажем лишь основные моменты:

HTML 5 – это, скорее, новая платформа для создания веб–приложений, нежели стандарт продолжающий традиции предшественников.

HTML 5 регламентирует взаимодействие с JavaScript посредством объектной модели документа (мы еще вернемся к этому в рамках данного курса).

HTML 5 поддерживает все элементы HTML 4.

Ключевые термины и определения

Гипертекст – текст, содержащий ссылки на другие фрагменты.

SGML ( Standard Generalized Markup Language — стандартный обобщённый язык разметки документов. Является наследником разработанного в 1969 году в IBM языка GML (Generalized Markup Language),

HTTP - HyperText Transfer Prоtocоl — "протокол передачи гипертекста") —протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов).

HTML – гипертекстовый язык разметки, созданный Тимом Бернерсом-Ли.

Консорциум W3C (World Wide Web Consortium, W3C) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины, возглавляемая Тимом Джон Бернерс-Ли.

Краткие итоги

Несколько перефразируем известное: "Про HTML немало лекций сложено, мы привели еще одну". Можно еще раз сказать о том, как HTML перевернул нашу жизнь, можно говорить о ценности прикладных научных задач (вспомним о первоначальном предназначении HTML). Но все эти фразы слишком общие, за ними уже практически ничего и не угадывается.

Если взглянуть на историю гипертекста шире, то можно легко увидеть в "сегодня" продукт эволюционного развития идеи связи между различными фрагментами информации. В один прекрасный момент технические возможности и развитие старых идей сложились в HTML, немало идей еще только ждет своего часа.

Нашей целью, в данной лекции, являлась краткая демонстрация пути, пройденного стандартом HTML, поскольку сложно говорить о том, что создается сейчас, не обозрев основ.

Список материалов для самостоятельного изучения

http://www.lingvolab.chat.ru/library/hypertext.htm

http://eakolesnikov.narod.ru/MemexVannevarBush.htm

http://blogerator.ru/page/memex-pim-organizers-chast-1

http://pyramidin.narod.ru/html401/sgmltut.html

http://searchsoa.techtarget.com/definition/SGML

http://zodios.net/htmlcss/istoriya-razvitiya-html.html

http://webstro.org/content/view/121/41/

Лекция 4: 

Работа с текстом

Аннотация: В рамках данной лекции будут рассмотрены следующие вопросы: основные теги работы с текстом; абзацы; разрыв строк; заголовки списки; цитаты; горизонтальные линии; вставка символов. Теги работы с текстом, появившиеся в HTML5. Глобальные атрибуты.

Ключевые слова: css, Web, веб-сайт, sharpness, HTML, тег, язык разметки, пользователь, long, read-only, атрибут, aligning, Left,center, параметр, высота, заголовки, блочный элемент, маркированный список, пункт, LI, список, определение, браузер, ASCII, 'quotes',D-AMPS, Copy, шрифт, Font, размер шрифта, 'color', face, e-size, header, footer, NAV, меню, mark, контент, article, компонент, запись,блог, секционирование, JavaScript, Интернет, специальный символ

При написании данной лекции использовались следующие материалы: Дронов В. "HTML5, CSS 3 и Web 2.0. Разработка современныхвеб-сайтов" (Глава 2); B. Lawson, R. Sharp " Introducing HTML 5".

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

Примечание: тег – базовый элемент языка разметки.

Основные теги работы с текстом

Теги, рассматриваемые в данном разделе, не являются новшеством стандарта HTML5, так что если вашей целью является исключительно знакомство с новыми элементами, можете перейти к следующему разделу настоящей лекции.

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

Точно также, если вы изложите свои мысли на бумаге, просто в виде потока слов, немного найдется желающих их прочитать. Вернее, в зависимости от содержания, желающие могут и быть, но, говоря о современной веб - разработке, стоит понимать, что если глазу нового пользователя не за что "зацепиться", то долго пользователь на странице не останется. Какой толк от сверхинтересного поста, если его все равно никто не читает?

На ум сразу же приходит "Tl;dr" – коммент, который часто встречается в длинных текстах, в которых как раз не за что зацепиться. "Tl;dr" не что иное, как "Too long; didn't read", если подыскивать аналог из российской части Интернета, то это "многа букаф".

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

Абзацы

Для разбиения на абзацы используется парный тег <p>.

Примечание. Парным называется тег, состоящий из двух частей – открывающей и закрывающей. Открывающая часть оформляется следующим образом <...>, закрывающая – </...>.

Тег <p> содержит всего один атрибут align, который отображает тип выравнивая текста и может принимать следующие значения:

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

<p> является блочным элементом, это значит, что содержимое тега занимает всю доступную ширину, а высота элемента определяется высотой его содержимого.

Разрыв строк

В случае, если необходимо перенести текст на следующую строку, не начиная при этом новый абзац (например, в случае публикации стихов) используется непарный тег <br>.

Пример:

<p> The Doors. Shaman's Blues.</p>

<p> There will never be <br>

Another one like you<br>

There will never be<br>

Another one who can<br>

Do the things you do....</p>

Заголовки

HTML различает шесть уровней заголовков, которые отличаются размером текста. Заголовок первого уровня отображается шрифтом самого большого размера, заголовок шестого – таким же размером, что и основной текст. Заголовки также, как и абзацы, являются блочным элементами.

Оформляются заголовки, соответственно, следующими парными тегами:

<H1> Заголовок 1го уровня </H1>

<H2> Заголовок 2го уровня </H2>

.....................................

<H6> Заголовок 6го уровня </H6>

Списки

В HTML имеются следующие виды списков:

1.     Нумерованный список (<ol>).

• Маркированный список (<ul>).

Каждый пункт списка помещается в парный тег <li>. Таким образом, код создания нумерованного списка будет выглядеть так:

<ol>

<li> Первый элемент нумерованного списка </li>

<li> Второй элемент нумерованного списка </li>

<li> Третий элемент нумерованного списка </li>

</ol>

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

Помимо нумерованного и маркированного списков, также следует отметить тег <dl>, позволяющий создать список определений.

Тег <dl> используется совместно с парными тегами <dt> и <dd>. В тег <dt> помещается термин, в тег <dd> - его определение.

Пример кода создания списка определений представлен ниже:

<dl>

<dt> Термин №1 </dt>

<dd> Определение термина №1</dd>

<dt> Термин №2</dt>

<dd> Определение термина №2</dd>

</dl>

Цитаты

При необходимости выделения цитаты, в html используется парный тег <blockquote>.

К примеру, код описания цитаты Тима Бернерса-Ли будет выглядеть следующим образом:

<blockquote>

<p>Было время, когда люди считали, что Интернет – это другой мир.

Теперь они понимают, что Интернет – это инструмент, который мы используем в этом мире.</p>

</blockquote>

Горизонтальные линии

Еще одним способом выделения участков текста является проведение горизонтальных линий. Для этого используется непарный тег<hr>, создаваемая при его помощи линия будет проведена во всю ширину родительского элемента .

Вставка специальных символов

Ряд текстовых символов (&, ", <, > и т.д.) не могут быть добавлены в html код "как есть". Поэтому, для вывода их в браузереиспользуется ASCII - код этих символов. В таблице ниже приведен перечень основных символов и их кодов:

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

Работа со шрифтом

Рассмотренные ранее теги используются для изменения вида текста в целом, помимо них также существует ряд тегов, позволяющие изменять непосредственно шрифт отдельных участков текста, а именно:

При помощи парного тега <font> управлять размером шрифта, его гарнитурой и цветом, соответственно при помощи атрибутовcolor, face и size.

Примечание. В настоящее время редко кто использует данные теги для управления шрифтами. Как правило для этих целей используютCSS, но это мы рассмотрим несколько позже.

Теги работы с текстом, появившиеся в HTML5

Рассмотрим ряд тегов для работы с текстом веб - страницы, которые появились в стандарте HTML5.

<section>

Парный тег, задающий блок (секцию) элементов.

<header>

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

<footer>

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

<hgroup>

Парный тег, определяющий группу заголовков.

<time>

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

<nav>

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

<mark>

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

<aside>

Парный тег, определяющий дополнительный контент. Служит для размещения ссылок, меток и т.п. на иную информацию, не относящуюся напрямую по смыслу к основному содержанию текста.

<article>

Парный тег. Тег представляет собой компонент страницы, содержащей контент, предназначенный для самостоятельного распространения. Иными словами в тег <article> могут быть помещены: форумный пост, статья, запись блога, комментарий или иной другой независимый элемент содержимого. Аналогично <section> используется для секционирования контента.

Это далеко не полный список тегов, привнесенный стандартом HTML5 в жизни веб - разработчика. Внимательный читатель, наверняка, уже заметил, что эти теги не влияют явно на внешний вид html - документа. Большинство из них являются своего рода "указателями", поясняющими как следует трактовать размещенный в их рамках контент.

Глобальные атрибуты

Как мы уже упоминали, атрибут задает дополнительные параметры тега. Атрибут оформляется следующим образом:

имя атрибута = значение атрибута (к примеру, align = center)

Атрибуты могут быть, как обязательными, так и необязательными.

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

Ключевые термины и определения

Тег – элемент языка разметки.

Атрибут – дополнительный параметр тега, содержащий дополнительную информацию для браузера.

Краткие итоги

HTML содержит все необходимые средства для оформления контента сайта, в зависимости от нужд разработчиков. Этим оформлением нельзя пренебрегать, но так же опасно и увлекаться. Пестрый текст, содержащий все возможные выделения, цвета и шрифты также не подходит в качестве средства "удержания" внимания пользователя, как и монолитный. Перед началом оформления содержимого сайта рекомендуется ознакомиться с материалами - рекомендациями по оформлению сайтов, которые без труда можно найти в Интернет - поисковиках.

Список материалов для самостоятельного изучения

1.     Основы работы с текстом в html

http://www.inetprofy.ru/component/content/article/8-articles/95-html-.html

2.     http://uznaykak.info/uroki-html/izuchaem-html-urok-3-atributy-i-zagolovki.html

3.     Вставка специальных символов

http://design4free.narod.ru/articles/td_1.html

4.     Новые теги в HTML5

http://ab-w.net/HTML5/html5.php

5.     Глобальные атрибуты

http://www.exlab.net/html/attributes.html

6.     http://w3pro.ru/book/spravochnik-html-5/globalnye-atributy

7.     Тег <article>

http://html5doctor.com/the-article-element/

Лекция 5: 

HTML5. Работа с мультимедиа

Аннотация: Работа с графикой. Основы работы с видео и звуком. Вставка аудио и видеороликов. Ограничения использования тегов <audio> и <video>.

Ключевые слова: Интернет, тег, HTML, векторные, растровая графика, мультимедийность, мультимедиа, IMG, атрибут, aligning, alt,'border-right', Height, 'widths', MAP, аудит, audio, s-video, безопасность, пересечение, контент, source, autoplay, видео, looping, аудио,poster, разделение ресурсов, элементы управления, кодирование, декодирование, провайдер, значение, очередь, мобильное устройство

Вряд ли бы Интернет стал столь популярным, если бы содержал лишь текстовую информацию, пусть и прекрасным образом структурированную и оформленную. Поэтому рассмотрим способы и возможности "оживить" веб-страницу при помощи графики, видео и звука, средствами HTML5.

Работа с графикой

Тег, позволяющий добавить изображение на веб-страницу впервые появился в стандарте HTML 3.2 (от 14 января 1997 года).

Современными веб-браузерами поддерживаются не все существующие графические форматы, поэтому не всякое изображение может быть размещено в рамках веб-страницы.

Различают форматы растровых и векторных изображений. Растровые изображения хранятся в файлах с расширениями jpg, gif, bmp, tiff, png, psd. Векторные – swf, cdr, max, ai.

Из вышеперечисленных форматов хранения графики, в веб-разработке используются JPEG, PNG и GIF для растровой графики и SWF для векторной. Все три формата для растровой графики используют сжатие графической информации.

Добавление графики на веб-страницу

Структура мультимедийной информации принципиально отличается от структуры текстовой, поэтому напрямую мультимедиа не может быть описана в html-коде. Вся необходимая разработчику мультимедиа содержится в отдельных файлах, ссылки на которые, в виде соответствующих тегов прописываются в html-коде.

Для добавления изображения средствами html используется непарный тег <img>, содержащий обязательный атрибут src, указывающий расположение графического файла для отображения.

К числу необязательных атрибутов <img> относятся:

• align – задает тип выравнивания изображения;
• alt – задает текст, отображаемый в случае, если картинка не загрузилась;
• border – определяет толщину рамки вокруг изображения;
• height – задает высоту изображения;
• hspace – задает величину горизонтального отступа от изображения до ближайшего контента;
• ismap – определяет, является ли изображение картой (т.е. к различным частям изображения "привязаны" разные ссылки);
• vspace – задает величину вертикального отступа от изображения до ближайшего контента;
• width – задает ширину изображения;
• usemap – определяет ссылку на <map>, содержащий координаты клиентской карты - изображения.

<img> является встроенным тегом, т.е. он не может использоваться вне абзаца. Пример:

<p><img src="sample.jpg"></p>