Материал: IkxJ2A64Jt
Веб-программирование заключается в подготовке страниц (статических) или написании приложений, формирующих страницы в момент запроса (динамических). Для подготовки веб-страниц широко используются следующие технологии [1]–[3]:
∙HTML – язык разметки страниц;
∙CSS – каскадные листы стилей;
∙JavaScript – язык программирования на веб-страницах.
HTML, CSS, JavaScript – являются языками, с помощью которых можно создавать веб-сайты.
Объектная модель документа (DOM), является стандартным способом представления веб-страниц с помощью набора объектов. Она содержит набор объектов для содержимого документа. При написании приложений для поддержки межбраузерной переносимости необходимо придерживаться стандар-
тов DOM.
Как видно из вышесказанного, все элементы веб-технологий тесно взаимосвязаны. Понимание этого факта позволит легче осознать назначение того или иного механизма, применяемого при создании веб-приложений.
6
2. ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА
2.1. Общие сведения
HTML (HyperText Markup Language) – язык разметки гипертекста,
предназначенный для создания веб-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой совокупность тегов, с помощью которых можно описать структуру документа, однако окончательное визуальное представление информации зависит от используемого браузера и может различаться в разных браузерах.
Тег (tag) HTML определяет, каким образом отобразить пользователю информацию, содержащуюся внутри этого тега. Тег всегда имеет открывающую часть и может иметь тело и закрывающую часть. Открывающая часть состоит из символа «<», имени тега и символа «>». Закрывающая часть отличается от открывающей наличием символа «/» между символом «<» и именем тега. Информация, заключенная между открывающей и закрывающей частью, называется телом тега.
<имя тега> тело тега </имя тега>
Теги могут быть заключены друг в друга, при этом информация будет выведена пользователю с учетом всех тегов внутри которых она заключена. Рекомендуется закрывать теги в последовательности обратной последовательности их открытия.
Рекомендуется:
Не рекомендуется: <тег1><тег2>информация</тег1></тег2>
Теги могут содержать различные атрибуты, которые записываются в открывающей части тега через пробел после его имени. Атрибуты имеют имя и значение и записываются следующим образом:
<тег1 атрибут1=значение1 атрибут2=значение2> информация </тег1>
Атрибуты могут быть как общими для всех тегов, так и уникальными конкретного тега или группы тегов.
Регистр тегов и атрибутов в HTML не имеет значения.
Для того чтобы браузер понял, что файл является не просто текстовым, а HTML-документом, файл должен иметь расширение *.html.
7
2.2. Структура HTML-страницы
Для создания структуры страницы используются теги: html, head и body. Тег html обозначает начало и конец текста, который браузер должен интерпретировать как HTML-документ.
Тег head – заголовочный и предназначен для указания служебной информации, не выводящейся непосредственно в окно браузера, а также для подключения различных функций. Наиболее часто в теге head используется тег title, служащий для задания заголовка сайта. Этот заголовок будет виден на вкладке браузера либо, если браузер не поддерживает вкладки, в заголовке окна браузера.
В теле тега body помещается вся информация, отформатированная тегами и предназначенная для вывода в окно браузера.
Код простейшей HTML-страницы представлен ниже.
<html>
<head>
<title>Заголовок сайта.</title> </head>
<body>
Текст на странице. </body>
</html>
2.3. Служебные символы, пробелы и перевод строки
Под служебными понимают такие символы, которые имеют особое значение для браузера, вследствие чего обрабатываются им по специальному алгоритму.
В качестве примера служебного символа приведем знак «<»: он будет указывать браузеру на начало тега, хотя в математических выражениях он необходим для записи неравенств.
Кроме символа «<», браузер считает служебными знак «больше» (>), двойные кавычки ("), одинарные кавычки (') и амперсанд (&). Эти символы зарезервированы и поэтому могут не отображаться при просмотре HTMLдокумента.
Для корректного отображения служебных символов была разработана специальная система [1]. Она позволяет записать в код некоторые символы, зарезервированные программой как служебные, следующим образом: амперсанд (&) + именная замена + точка с запятой (;)
8
Левую угловую скобку (<) можно записать как "<", правую (>) – ">", где "lt" и "gt" – именные замены для левой и правой скобок соответственно.
Кроме именной замены можно использовать десятичный или шестнадцатеричный код. Узнать эти коды можно с помощью приложения «Таблица символов», которое является стандартным приложением Windows.
Символ |
Название |
Именная замена |
Десятичный |
Шестнадцате- |
|
|
|
код |
ричный код |
< |
Левая угловая скобка |
< |
< |
< |
|
|
|
|
|
> |
Правая угловая скобка |
> |
> |
> |
|
|
|
|
|
& |
Амперсанд |
& |
& |
& |
|
|
|
|
|
" |
Двойные кавычки |
" |
" |
" |
|
|
|
|
|
' |
Одинарная кавычка |
|
' |
' |
|
|
|
|
|
|
Неразрывный пробел |
|
|
|
|
|
|
|
|
– |
Неразрывный дефис |
|
‑ |
‑ |
|
|
|
|
|
|
Мягкий дефис |
|
|
|
|
|
|
|
|
́ |
Знак ударения |
|
|
́ |
|
|
|
|
|
Браузер заменяет последовательно идущие пробелы, знаки табуляции и переводы строк на пробел. Благодаря этому можно писать структурированный и легко читаемый исходный код HTML-страниц.
Когда необходимо сделать несколько пробелов подряд, можно использовать неразрывные пробелы (см. таблицу).
Для перевода строки следует использовать тег br.
Ниже представлен пример кода, реализующего использование неразрывных пробелов и переноса строки.
<html>
<head>
<title>Заголовок сайта.</title> </head>
<body> Текст<br>на<br><br>нескольких<br><br><br>строках.
<br><br> Текст с
множесвом п
робелов. </body> </html>
9
Рис. 2.1
Тег pre выводит содержимое так, как записано в файле. Его удобно использовать, когда необходимо выводить большой объем текста, специфически оформленного пробелами и/или переводами строк.
2.4.Форматирование текста
ВHTML есть различные способы форматирования текста. Тег body имеет два атрибута – text и bgcolor, они отвечают за цвет текста и фон страницы соответственно. Так как тег body содержит в себе всю информацию на странице, выбранные цвета применятся ко всему тексту на странице.
Цвет текста можно задать одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов (red, blue и т. д.).
Цветовая модель, основанная на красной, зеленой и синей составляющих получила название RGB (red, green, blue). В HTML значения для данной цветовой модели задаются с помощью шестнадцатеричной системы: #ffcc00. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первая пара символов определяет красную составляющую цвета, вторая – зеленую, а третья – синюю. Каждый из трех цветов может принимать значения от 00 (черный) до FF (белый) [2].
Пример использования атрибутов тега body:
<body text=blue bgcolor=#cccccc>содержимое страницы</body>
Тег p определяет текстовый абзац и всегда начинается с новой строки. Абзацы текста, идущие друг за другом, разделяются между собой пустым
10