Файл: изучить основы программирования на языке HTML..pdf

Огромный вклад в расширение практического использования нового языка программирования сделала корпорация Google, которая любезно предоставила свои стартовые страницы, чтобы рекламировать на них HTML5 игры, сайты и веб-приложения. Ярким примером использования расширенных возможностей языка является страничка http://www.google.com.hk/intl/zh-CN/landing/shuixia/, которая предназначена для поздравления жителей Гонконга. Если пощёлкать компьютерной мышкой ниже вотерлинии, то обычная стартовая страница Google превратится в островок удовольствия.

Ещё один пример применения возможностей HTML 5 в Google – это визуализация главной странички в форме аркадной игрушки в духе Кибериады, что было сделано в честь дня рождения Станислава Лемма. Для того, чтобы освоить весь безграничный потенциал нового языка Интернета, необходимо пройти курс обучения. Желательно, чтобы обучение происходило в игровой форме. Такую уникальную возможность предоставляет сайт http://html5game.ru/, который радует пользователей с самой первой страницы – наводя мышку на шапку, можно с удовольствием наблюдать, как она разлетается на сотни шариков, а потом вновь возвращается в своё исходное состояние^[13].

В учебных целях сайт предлагает широкий инструментарий по созданию HTML5 игр, а это, как известно, лучший способ освоить новый язык программирования. Немалую обучающую ценность несёт в себе графический редактор http://www.picozu.com/editor, который позволяет рисовать, пользуясь инструментарием, разработанным в HTML5.

Выводы по главе 1:

В 1991 году, британским ученым Тимом Бернерсом Ли, сотрудником Европейского института физики частиц (CERN) в Женеве, была разработана система передачи гипертекстовой информации через интернет. А за основу нового языка был взят SGML. Язык разметки гипертекста был назван - HTML (Hyper Text Markup Language) и он является до сих пор самым известным из приложений SGML. HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Последняя версия языка это HTML 5.0.

Новый язык программирования обладает как неопровержимыми преимуществами перед предыдущими версиями, так и имеет некоторые недостатки. К неоспоримо сильным сторонам HTML 5 принадлежат невероятно большие возможности по созданию качественно новой графики. Особую благодарность в этом следует выразить Тегу Canvas, который уже стал внедряться во многие браузеры. Благодаря функции canvas веб-разработчики получили расширенные возможности по созданию графики нового поколения.

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

Глава 2. Основы программирования на языке HTML

2.1. Структура HTML-документа

HTML-документ состоит из двух частей: текста, т. е. данных, составляющих содержимое документа, и тегов — специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ^[14].

Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения .htm или .html.

HTML страница состоит из нескольких основных частей, которые должны, в «идеале», присутствовать в любом документе:

Строка, указывающая тип текущего документа – DTD (document type definition – описание типа документа). Различают несколько видов описаний, в зависимости от версии HTML, на которую ориентированы.

Тег ‹html›, который определяет начало документа

Раздел ‹head› - блок заголовка документа, содержит текст и теги служебной информации, и не отображается на странице, кроме соответственно самого заголовка документа. Раздел должен обязательно содержать закрывающий тег ‹/head›, чтобы показать конец раздела.

Раздел ‹body› - тело документа, содержательная часть веб страницы. Этот раздел тоже имеет закрывающий тег ‹/body›.

И ‹/html›- завершает описание HTML документа.

В большинстве случаев теги используются парами. Пара состоит из открывающего <имя_тега> и закрывающего </имя_тега> тегов. Действие любого парного тега начинается с того места, где встретился открывающий тег, и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.

Последовательность символов, составляющая текст может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например #, +, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсанд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

Самым главным из тегов HTML является одноименный тег <html>. Он всегда открывает документ, так же, как тег </html> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.

HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке:

Чаще всего в заголовок документа включают парный тег <title>... </title>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.

Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и </body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.

Текст в HTML разделяется на абзацы при помощи тега <р>. Он размещается в начале каждого абзаца, и программа просмотра, встречая его, отделяет абзацы друг от друга пустой строкой. Использование закрывающего тега </р> необязательно.

Если требуется «разорвать» текст, перенеся его остаток на новую строку, при этом, не выделяя нового абзаца, используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега.

Язык HTML поддерживает логическое н физическое форматирование содержимого документа. Логическое форматирование указывает на назначение данного фрагмента текста, а физическое форматирование задает его внешний вид.

При использовании логического форматирования текста браузером выделяются различные части текста в соответствии со структурой документа. Чтобы отобразить название, используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: h1 (заголовок первого уровня), h2, h3, h4, h5 и h6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня. Пример использования тегов заголовков:

<hl>l. Название главы</hl>

<h2>l.l. Название раздела</h2>

Теги физического форматирования непосредственно задают вид текста на экране браузера, например пара <b></b> выделяет текст полужирным начертанием, <u></u>задает подчеркивание текста, <font></font> управляет шрифтом текста.

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

Для создания гипертекстовой ссылки используется пара тегов <а>... </а>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения:

Href здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута href не обязательны. Если задается ссылка на документ на другом сервере, то вид гиперссылки такой:

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

2.2. Основные теги языка HTML

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

Регистр символов для отображения тегов не важен, например <p> и <P> означает одно и то же. Однако в этом курсе используется нижний регистр для написания тегов. Это связано с тем, что консорциум WWW (W3C), который занимается стандартизацией спецификации HTML, рекомендует использовать теги в нижнем регистре, поскольку в следующем поколении стандартов будет именно такое требование.

Таблица 1

Основные теги HTML^[15]

Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементах HTML. Атрибуты всегда используются в виде пары "имя/значение". Общий формат задания атрибутов имеет вид:

Например, тег:

означает, что цвет фона страницы должен быть красным. А тег:

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

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

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

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