1. ОСНОВЫ ЯЗЫКА HTML

1.1.ОСНОВНЫЕЭЛЕМЕНТЫ СИНТАКСИСА HTML

На сегодняшний день основная часть используемых web-технологий базируется на языке гипертекстовой разметки HTML (HyperText Markup Language). Изначально язык HTML был направлен на создание разметки и оформление документов, которые размещаются на web-страницах. Предшественником языка HTML являлся стандарт SGML (Standard Generalized Markup Language) – метаязык, определяющий язык разметки для документов, принятый Международной организацией по стандартизации. Описание внешней составляющей документа в данном стандарте отсутствовало. Поскольку в описаниях языка SGML отсутствовал перечень используемых структурных элементов, возникла необходимость в создании такого языка, который бы отвечал следующим требованиям:

1)наличие описаний применения тех или иных элементов в зависимости от конкретно заданных условий;

2)наличие каталога элементов, позволяющих создавать документы, которые читались бы разными программами.

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

HTML.

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

всебя около сорока тегов, при этом он был нацелен на структурную разметку текста без описания физического представления страниц. Создание версии 2.0 проводилось консорциумом W3C (World Wide Web Consortium). В 1995 году версия 2.0 была опубликована, и одновременно с этим проводились работы по развитию версии 3.0, которая базировалась на новых возможностях и стала новой ступенью развития языка.

Версия HTML 3.0 обладала рядом новшеств, таких как разметка математических формул, теги для разработки страниц, вставка обтекаемых

7

текстом рисунков и др. Вместе с этим обострялась проблема отсутствия грамотного визуального оформления web-страниц.

Расширению перечня тегов поспособствовала корпорация Netscape Communications. Цель нововведений заключалась в усовершенствовании вида страницы. Главным недостатком проделанной работы стало явное противоречие принципам самого языка HTML.

Следующей доработанной версией языка HTML являлась версия 3.2, которая достаточно длительное время считалась единственным стандартом для работы над web-проектами.

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

Внастоящий момент активно используется язык HTML5 и его релизы 5.1, 5.2, 5.3. Также ведутся разработки шестой версии языка HTML, которая разительно отличается от пятой. Предполагается, что шестая версия сможет стать эффективным инструментом создания web-приложений.

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

Язык HTML5 базируется на описании структуры HTML-страниц и правилах применения основных элементов. HTML-документ представляет собой текстовый документ, работать с которым можно в различных текстовых редакторах (Блокнот, Notepad++). Основными элементами HTML-документов являются теги. Теги дают возможность форматировать текст, а также располагать в документах объекты – звуки, анимации, изображения, ссылки, таблицы, формы для ввода данных и т. д.

Тег имеет определенную структуру, которая включает в себя:

1)имя тега;

2)список атрибутов.

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

8

В общем случае каждый атрибут имеет:

1)имя и следующий за ним знак равенства;

2)конкретное значение, следующее за знаком равенства.

Еще одним свойством тегов и атрибутов является отсутствие чувствительности к регистру. По типу теги можно разделить на парные и непарные. Отличие между типами тегов заключается в наличии/отсутствии закрывающих тегов. У закрывающего тега атрибуты не указываются. Сам HTML-документ, включающий в себя заголовок и тело, помещается в тег. Заголовок документа находится внутри тега и может включать как название документа, так и ряд других параметров. Тело документа содержит основной текст и набор тегов, которые выводятся в результате исполнения HTML-документа.

Существуют рекомендации по написанию кода в HTML5:

1)объявление типа документа в первой строке документа (Doctype);

2)указание наименований элементов в нижнем регистре, поскольку

втаком формате код имеет более наглядное представление;

3)указание закрывающих тегов по ходу документа;

4)заключение значений атрибутов в кавычки, поскольку такие значения становятся наиболее читаемыми;

5)указание атрибута alt при работе с изображениями, а также значений ширины и высоты изображения;

6)добавление пустых строк для разбиения кода на логические блоки;

7)использование тегов <html>, <body> и <head> (отсутствие этих тегов может привести к появлению ошибок при отладке кода);

8)задание имени страницы документа в полном соответствии с его содержимым;

9)включение элемента <meta> на страницу документа для предоставления браузеру сведений о масштабировании страницы.

Таким образом, язык HTML претерпел достаточно серьезные изменения, а версия языка HTML5 имеет весьма ослабленные правила синтакси-

9

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

1.2.РАБОТА С БАЗОВЫМИ ТЕГАМИ В HTML

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

Теги подразделяются на конкретные типы:

1)теги верхнего уровня – формируют структуру, тело и заголовок документа;

2)блочные теги – делят документ на смысловые блоки;

3)строчные теги – применяются для разметки частей содержимого элементов [10];

4)нестандартные теги – не поддерживаются ни одной спецификацией

HTML;

5)семантические теги – используются для толкования поисковым системам и речевым браузерам заданной информации.

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

1)теги для работы со структурой самого документа;

2)теги для работы с форматированием текста;

3)теги для разработки форм;

4)теги для работы с изображениями;

5)теги для работы с аудио- и видеоконтентом;

6)теги-ссылки;

7)теги для работы с таблицами и списками;

8)теги, определяющие стили;

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

10

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

11

12

13

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

Таким образом, теги в HTML являются базовыми строительными блоками для формирования web-страниц. В HTML5 теги хранятся в виде справочника, определенного в спецификации языка. Спецификация постоянно актуализируется под потребности браузеров как в части информации о самих тегах, так и в части информации об их атрибутах.

1.3.ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ,ТАБЛИЦ,КОДИРОВОК В HTML

Важным объектом при оформлении web-страниц является изображение. Для работы с изображениями используется специальный тег <img>, который обладает свойством непарности. Благодаря данному тегу осуществляется непосредственная вставка изображений на web-страницу. Распространенные форматы изображений – это форматы .gif, .png, .jpeg (.jpg). Формат .gif позволяет сжимать изображение без потери качества, при этом имеет ограниченную цветность и допускает возможность применения анимации. Формат .jpeg сжимает изображения с некоторой потерей

14

качества, в то же время не накладывает ограничений на цвет. Размер файла в формате .jpeg напрямую зависит от качества изображения. Формат

.png имеет два альтернативных варианта: png-8 и png-24. Вариант формата png-8 позволяет лучше сжимать файлы, при этом не поддерживает анимацию. В свою очередь png-24 не имеет ограничений по количеству цветов, но имеет меньший размер самого файла [8, с. 25].

Ориентироваться в выборе формата файла в зависимости от таких параметров, как качество, размер и характеристика изображения, можно по табл. 1.2.

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

У тега <img> имеется ряд атрибутов, которые задают свойства изображения при его размещении в документе:

1. Атрибут align – дает возможность определить выравнивания изображения относительно текста. Можно выделить:

top – выравнивание по верхнему краю; middle – выравнивание по центру; bottom – выравнивание по нижнему краю; left – выравнивание по левому краю; right – выравнивание по правому краю.

15

2.Атрибут alt – позволяет выделить текст, который описывает изображение для браузеров без поддержки графики [8, с. 26].

3.Атрибут border – позволяет определить толщину рамки изображений.

4.Атрибут height – дает возможность определить высоту изображения.

5.Атрибут width – дает возможность определить ширину изображения. Как правило, браузер выявляет размер изображения автоматически.

Атрибутам height и width рекомендуется задавать конкретные значения, поскольку в противном случае браузеру необходимо вычислять размеры изображения (высоту и ширину) самостоятельно.

Если возникает необходимость поместить изображение в качестве фонового, адрес фонового изображения следует указать с помощью атрибута background (тег body). В общем случае изображение, которое применяется в качестве фона, представляется в реальном размере. В случае если размер выбранного изображения меньше окна браузера, изображение будет повторяться, чтобы заполнить свободное пространство. В отдельных случаях можно представлять изображение в виде карты с областями, которые активируются по наведению курсора мыши. Для этого существует специальный тег <map>.

Еще одним часто используемым объектом в работе с web-документа- ми является таблица. Таблица в HTML – это совокупность данных, расположенных и связанных между собой при помощи ячеек, размещаемых в строках и колонках [8, c. 31]. Для того чтобы осуществлять манипуляции над таблицами, предусмотрено три основных тега, каждый из которых является парным:

1)теги <td> и </td> служат для определения стандартных ячеек таблицы;

2)теги <tr> и </tr> служат для определения строк ячеек таблицы;

3)теги <table> и </table> служат для задания границ кода таблицы. Для каждого из вышеперечисленных тегов возможно применение ат-

рибутов, представленных в табл. 1.3.

16

17

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

ВHTML можно задавать разные кодировки текста. Использование кодировок необходимо, поскольку все данные на компьютере хранятся

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

Указать кодировку текста для страницы HTML можно в текстовом редакторе. Для задания кодировки используется тег <meta>.

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

ВHTML присутствует возможность вставки символов стандарта Unicode. Данные вставки называются подстановками. Роль подстановок заключается в допустимости применения символов, которые отсутствуют на клавиатуре или в указанной кодировке. Подстановку записывают с использованием амперсанда (&). Для оптимального поиска необходимого символа можно работать с системной утилитой «Таблица символов».

Таблицы и изображения являются главными объектами, которые могут повысить наглядность web-страниц, а также передать их суть и содер-

18