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

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

В учебных целях сайт предлагает широкий инструментарий по созданию html 5 игр, а это, как известно, лучший способ освоить новый язык программирования. Немалую обучающую ценность несёт в себе графический редактор 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 используются парами и заключены между двумя символами угловых скобок < (начальный тег)> и . Текст между начальным и конечным тегами является содержимым элемента. Некоторые теги не имеют конечного, например, тег принудительного переноса строки, для таких тегов рекомендуется использовать следующее написание .

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

Таблица 1

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

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

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

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

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

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

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

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

Заголовки определяются с помощью тегов от до определяет заголовок самого большого размера, а определяет заголовок самого маленького размера.

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

Пример:

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

Главным элементом любой HTML страницы является одноименный тег ‹html›. Этот тег содержит внутри себя все остальные структурные части страницы и явно указывает браузеру, что обрабатывается HTML код. Он имеет закрывающий тег. Теги могут иметь различные атрибуты, значения которых указывается в двойных или одиночных кавычках.

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