Добавлен: 24.04.2023
Просмотров: 278
Скачиваний: 2
ВВЕДЕНИЕ
Язык гипертекстовой разметки HTML (HyperText Markup Language) служит для наглядного и хорошо структурированного представления информации в сети Интернет, который приобрел широкую популярность в середине 90-х годов. Программы, интерпретирующие данную разметку и выводящие информацию на экран, стали называться браузерами. На сегодняшний день известно много их разновидностей: Firefox, Chrome, Opera, Internet Explorer и др.
Разнообразие браузеров впоследствии привело к нюансам и разночтениям в интерпретации некоторых инструкций языка HTML и соответственно проблемам адаптации HTML-документа к разным вариантам их интерпретации. Для разрешения данной проблемы был создан консорциум W3C (World Wide Web Consortium), в задачу которого входит составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений разработчиков браузеров.
Важными итогами работы консорциума стал выход спецификации HTML 4.0 и HTML 5.0. В частности в HTML 4.0 рекомендуется разделение описания структуры документа от его вида на экране монитора или мобильного устройства, что значительно упрощает разработку, исправление документа, а также поддержку большого числа платформ, сред и т.п.
Современные браузеры имеют довольно широкие возможности для представления информации и взаимодействию пользователей в сети Интернет. Кроме форматированного вывода текста они позволяют отображать изображения, видео, проигрывать музыку. Встроенный в HTML-документ язык JavaScript позволяет анализировать и обрабатывать содержимое страницы, взаимодействовать с сервером (откуда загружен документ), динамически менять свойства и содержание документа в окне браузера. По сути, на сегодняшний момент, браузер стал еще одной платформой взаимодействия пользователя с информацией и другими пользователями, а для ряда мобильных устройств составной частью операционной системы.
Целью работы является изучение основ программирования на языке HTML.
Для решения поставленной цели были поставлены следующие задачи:
- изучить структуру и основные теги языка HTML;
- рассмотреть ссылки в HTML-документе;
- рассмотреть списки в HTML-документе;
- изучить таблицы в HTML-документе.
Объектом работы является язык HTML.
Предметом работы являются основы программирования на языке HTML.
При подготовке работы были использованы такие информационные источники как специализированная профессиональная литература, материалы из СМИ, данные Интернет-ресурсов. Применены такие методы и приемы исследования как анализ, синтез, сравнение.
1. Структура и основные теги языка HTML
1.1. Понятие тега
Сам по себе HTML-документ представляет собой текстовый файл, содержащий набор инструкций для представления информации в требуемом виде в окне браузера. Инструкции записываются в виде тегов (читается тэг, от англ. tag) и имеют следующий синтаксис [1, с. 45]:
<имя_тега [возможные параметры]>
например
<html> - тег начала HTML-документа;
<body> - тег начала содержимого HTML-документа;
<body bgcolor="blue"> - тег с параметром bgcolor, задающий фон страницы.
Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним, например, [9, с. 247]
<html>
HTML-документ
</html>
здесь </html> - завершающий тег для <html>, или
<body>
Содержание HTML-документа
</body>
здесь </body> - завершающий тег для <body>, и т.д.
Следует отметить, что не каждый открывающий тег должен иметь соответствующий закрывающий. Имеется набор тегов, действие которых начинается и заканчивается одним открывающим тегом, например [7, с. 119]:
<img src="image.gif"> - тег для вывода изображения image.gif в окно браузера;
<input type="text" value=""> - тег для ввода значений в окне браузера.
Далее, при рассмотрении тегов, будут указываться способы и особенности их применения.
Из приведенных выше примеров записи тегов можно заметить, что существуют теги, содержащие в себе информацию (а также другие теги), например, html и body, которые в дальнейшем будем называть тегами- контейнерами. Соответственно информацию, содержащуюся в них – содержимым тега-контейнера [1, с. 47].
Как и в любом языке программирования, язык HTML имеет теги для создания комментариев внутри документа, т.е. текст, который имеется в документе, но не выводится браузером на экран. Для создания комментариев используется следующая пара тегов:
<!-- Это комментарий -->
Имеется ряд тегов, для которых завершающие теги опускаются большинством авторов документов. Например, тег <p> (начало абзаца), как правило, не имеет в документе завершающего тега </p>. Его завершение определяется браузером по «ходу» документа, например, если встретится очередной открывающий тег <p> [9, с. 248].
Существуют общие правила интерпретации тегов браузерами. В отличие от языков программирования, в которых ошибочные операторы приводят к соответствующим ошибкам, в HTML не принято реагировать на неверную запись тегов. Неверно записанный тег или его параметр должен просто игнорироваться браузером. Это общее правило для всех браузеров, под действие которых попадают не только ошибочные теги, но и теги, не распознанные данной версией браузера [7, с. 121].
1.2. Структура документа
При создании HTML-документов рекомендуется соблюдать следующую структуру:
<html>
<head>
<!-- Раздел заголовка -->
</head>
<body>
<!-- Тело документа -->
</body>
</html>
Здесь <html> - это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу. Тег <head> означает раздел заголовка, который обычно включает [7, с. 123]:
1. Заголовок страницы
<title>Заголовок страницы</title>
2. Кодировку, в которой представлен HTML-документ
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
3. Краткое описание содержания документа
<meta name="description" content="библиотека, содержащая …">
4. Список ключевых слов документа
<meta name="keywords" content="библиотека, книги, статьи">
5. Подключаемые внешние javascript файлы (скрипты)
<script type="text/javascript" src="http://reeders.ru/js/jquery- 1.9.0.min.js"></script>
6. Внешние таблицы стилей (css) для форматирования документа
<link href="http://reeders.ru/css/style.css" rel="stylesheet" type="text/css" />
Раздел тега <head> может содержать и другие конструкции языка HTML, например, базовый адрес сайта: <base href="http://reeders.ru/" /> и многое другое. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид [7, с. 125]:
<head>
<title>Заголовок страницы</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<meta name="description" content="библиотека, содержащая …">
<meta name="keywords" content="библиотека, книги, статьи">
</head>
В тегах <body>…</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) и т.д.
Тег <body> имеет следующий набор необязательных параметров:
Таблица 1
Набор необязательных параметров тега <body>
|
Параметр |
Пример |
Описание |
|
alink="цвет" |
<body alink="red"> |
Устанавливает цвет активных ссылок |
|
link="цвет" |
<body link="blue"> |
Устанавливает цвет непосещенных ссылок |
|
vlink="цвет" |
<body vlink="green"> |
Устанавливает цвет посещенных ссылок |
|
background ="URL" |
<body background="a.gif> |
Устанавливает изображение фона документа |
|
bgcolor='цвет" |
<body bgcolor ="white"> |
Устанавливает цвет фона документа |
|
text=''цвет" |
<body text ="black"> |
Устанавливает цвет текста в документе |
HTML-документ рекомендуется всегда завершать закрывающим тегом </html> и тем самым сигнализировать браузеру о завершении документа. Это полезная информация может быть использована, например, при обрыве связи во время загрузки страницы. Тогда отсутствие тега </html> может означать неполную загрузку страницы. На практике встречается и много других случаев, когда важно иметь корректную разметку страницы для исключения неверного отображения содержания документа в исключительных ситуациях [7, с. 127].
1.3. Основные теги форматирования текста
Тег разделения на абзацы <p>.
В качестве первого тега форматирования текста имеет смысл рассмотреть тег разделения на абзацы <p>.
Несмотря на разделение текста по строкам в текстовом редакторе, без использования тега <p>, браузер выводит их в одну строку без деления на абзацы. Это общее правило вывода текста, т.к. браузер форматирует текст только на основании тегов, присутствующих в документе. Соответственно для отображения строк с нового абзаца достаточно поставить перед ними тег <p>.
Тег <p> имеет необязательный параметр align, который может принимать значения:
- left – выравнивание по левому краю;
center – выравнивание по центру;
- right – выравнивание по правому краю;
- justify – выравнивание по ширине страницы.
По умолчанию используется выравнивание по левому краю. Если требуется другой способ выравнивания текста, то нужно записать тег <p> с параметром align следующим образом:
<p align=center> или <p align="center">
Кавычки в значении параметра можно опускать, если значение не содержит пробелы.
Тег переноса строки <br>.
По умолчанию перенос строк в пределах абзаца выполняется браузером автоматически по символам-разделителям слов (обычно это пробел). Место переноса определяется размером окна вывода, т.е. если следующее слово не умещается в выделенную ширину, оно переносится на следующую строку.
Вместе с тем иногда существует необходимость выполнить принудительный перенос в строго заданном месте текста. Это можно сделать с помощью тега переноса строки <br>.
Заголовки внутри HTML-документа.
Наряду с общим заголовком страницы, заданным в теге <title> существует возможность добавлять подзаголовки непосредственно в тексте документа. Это выполняется с помощью тегов заголовков <h1>, <h2>, <h3>, <h4>, <h5>, <h6> и соответствующих закрывающих тегов, имеющих 6 уровней. При этом заголовок 1-го уровня самый большой, 2-го – поменьше и т.д. до 6-го уровня. Соответственно при расстановке заголовков рекомендуется использовать их в порядке возрастания, т.е. сначала <h1>, за ним <h2> и т.д. Также может быть несколько заголовков одного уровня на странице, например 2-3 заголовка уровня <h1>. Не рекомендуется использовать большое число заголовков в одном документе. Приемлемым количеством считается до 5 заголовков одного уровня [7, с. 129].
Теги заголовков относятся к тегам уровня блоков, т.е. по умолчанию на одной строке с ними не может размещаться другая информация, например, документ вида
<body>
Текст перед заголовком<h1>Заголовок h1</h1>Текст после заголовка
</body>
на экране браузера будет выглядеть следующим образом (рис. 1).
Рисунок 1 - Демонстрация тега <h1> как тега уровня блока
Как видно из примера под заголовок выделяется вся строка и никакая другая информация там не размещается. Аналогичное поведение справедливо для всех тегов уровня блоков. Далее при рассмотрении материала будет указываться на данное свойство тегов [7, с. 131].
У тегов заголовков имеется необязательный параметр align, аналогичный по набору значений и действию с таким же параметром тега <p>:
- left – выравнивание по левому краю;
- center – выравнивание по центру;
- right – выравнивание по правому краю;
- justify – выравнивание по ширине страницы.
Рисунок 2 - Примеры отображения заголовков уровня от 1 до 6
Тег <hr> - горизонтальная линия.
Для разделения текста документа на логические части помимо заголовков можно использовать горизонтальную линию, отделяющие одну часть документа от другой. Рисование такой линии выполняется браузером том месте документа, где встречается тег <hr>. Данный тег является тегом уровня блока и не требует завершающего тега, т.к. не является тегом-контейнером. Пример его использования представлен ниже [7, с. 133]:
...
<body>
Первая часть документа
<hr>
Вторая часть документа
</body>
...
Рисунок 3 - Пример использования тега <hr>
Тег <hr> имеет следующий набор необязательных параметров:
Таблица 2
Набор необязательных параметров тега <hr>
|
Параметр |
Пример |
Описание |
|
align= "center | left | right" |
<hr align=center> |
Способ выравнивания линии в документе |
|
color="цвет" |
<hr color="blue"> |
Устанавливает цвет линии |
|
noshade |
<hr noshade> |
Отменяет трехмерные эффекты при рисовании линии |
|
size="число" |
< hr size=1> |
Устанавливает толщину линии (по умолчанию 2) |
|
Width="число" |
< hr width-=50%"> |
Любое допустимое значение в пикселах или процентах |