Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

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

Содержание:

ВВЕДЕНИЕ

Язык гипертекстовой разметки 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%">

Любое допустимое значение в пикселах или процентах

Теги логического уровня форматирования текста.

Тег <code>. Данный тег рекомендуется использовать для выделения фрагментов программных кодов в HTML-документе. Как правило, такой текст отображается моноширинным шрифтом.

Теги <del> и <ins>. С помощью тега-контейнера <del> рекомендуется отмечать текст как удаленный. Здесь предполагается, что по каким-либо причинам разработчику документа необходимо оставить удаленный текст на экране браузера, но пометить его как удаленный. Обычно такой текст браузеры отображают как перечеркнутый.

Аналогично используется тег-контейнер <ins>, который отмечает текст как добавленный (вставленный). Обычно такой текст помечается браузерами как подчеркнутый. Данный тег имеет те же необязательные параметры, что и тег <del>:

Тег <em>. Данный тег используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.

Тег <kbd>. Тег-контейнер <kbd> служит для выделения текста, введенного с клавиатуры. Такой текст обычно отображается моноширинным шрифтом [1, с. 53].

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

Тег <strong>. Тег-контейнер <strong> служит для выделения важных фрагментов текста. Текст, выделенный данным тегом считается более важным, чем текст выделенный тегом <em>. При выводе браузеры обычно выделяют такой текст жирным шрифтом.

Тег <var>. Данный тег предназначен для выделения переменных программ и, как правило, отображается браузерами курсивом.

Рассматривая описанные выше теги, можно заметить, что результат действия некоторых тегов совпадает и дает один и тот же результат в окне браузера при отображении. Напрашивается вопрос: для чего необходимо такое разнообразие тегов, если они по результатам работы дублируют друг друга? Дело в том, что разработчики языка HTML дали возможность составителям HTML-документов корректно выделить те или иные информационные части в расчете на то, что будущее поколение браузеров и поисковых систем будут анализировать их и предоставлять большие возможности «конечным» пользователям для восприятия корректно отформатированного текста. Поэтому уже сейчас рекомендуется применять эти и другие теги логического форматирования текста для улучшения конкурентоспособности таких HTML-документов в будущем [1, с. 54].

Теги физического уровня форматирования текста.

Тег <b>. С помощью данного тега-контейнера выполняется выделение полужирным шрифтом части текста в HTML-документе, например:

<p>Это <b>текст с полужирным шрифтом</b> и обычный текст

На данный момент вместо тега <b> рекомендуется использовать тег <strong>.

Тег <i>. Данный тег служит для выделения текста курсивом следующим образом:

<p><i>Фрагмент текста, выделенный курсивом</i> и обычный текст

Тег <u>. Выполняет подчеркивание части текста в окне браузера:

<p><u>Подчеркнутый текст</u>

Теги <strike> и <s>. Данные теги-контейнеры позволяют выводить перечеркнутый текст в окне браузера. Обычно вместо этих тегов используется тег <del>, если зачеркнутый текст следует представлять как результат редактирования. Если же это просто элемент оформления, то следует использовать <strike> или <s>:

<p>Текст <strike>перечеркнутый</strike>

Теги <sub> и <sup>. С помощью данных тегов выполняется сдвиг текста относительно вниз и вверх соответственно. Это бывает удобно при оформлении математических выражений при простановке индексов или степеней:

<p>Оформление <sub>нижнего индекса</sub>

<p>Оформление <sup>верхнего индекса</sup>

Тег <font>. Данный тег-контейнер позволяет задавать свойства шрифта при отображении текста в окне браузера. В настоящий момент не рекомендуется использовать тег <font> для форматирования документа, т.к. он нарушает принцип спецификации HTML 4.0 по разделению вида документа от его содержания. Вместо него лучше применять стилевое оформление, заданные в каскадных таблицах стилей (css). Тем не менее, рассмотрим данный тег, т.к. он бывает весьма полезен в простых документах и дает представление о свойствах шрифта [1, с. 55].

Тег <font> относится к последовательным элементам и не может включать в себя теги уровня блоков, например, <p>, <table>, <div> и т.п. Тег имеет следующие необязательные параметры.

Таблица 3

Необязательные параметры тега <font>

Параметр

Пример

Описание

color="цвет"

<font color=''red">

Устанавливает цвет текста

face="'шрифт1, шрифт2,..."

<font face ="Arial, Tahoma">

Устанавливает шрифт выводимого текста

size="число"

<font size="4">

Устанавливает размер шрифта (целое число от 1 до 7)

Тег <basefont>. Тег <basefont> задает значение свойств шрифта для всего текста документа и имеет те же свойства, что и тег <font>, т.е. color, face и size. Данный тег не нуждается в закрывающем теге и может располагаться в любой части документа, включая раздел <head> и повторяться сколько угодно раз. Следует отметить, что значения тега <basefont> могут переопределяться тегом <font> и восстанавливаться после закрывающего тега </font>, таким образом комбинируя возможные оформления в тексте HTML-документа.

Тег <img>. С помощью данного тега выполняется вывод изображений в окно браузера. Тег <img> имеет следующие наиболее распространенные необязательные параметры [1, с. 57].

Таблица 4

Необязательные параметры тега <img>

align= "bottom | left | middle | right | top"

Способ выравнивания изображения в документе

alt="текст"

Задает альтернативное описание изображение (отображается при неудачной загрузке изображения)

border="толщина рамки"

Устанавливает толщину рамки вокруг изображения. Чтобы убрать рамку нужно поставить значение 0

height="высота"

Высота рисунка при отображении (в пикселах или процентах)

hspace="отступ по горизонтали"

Задает величину отступа по горизонтали

longdesc-"URL"

Указывает адрес страницы с аннотацией к изображению

src="URL"

Адрес загружаемого рисунка

vspace="отступ по вертикали"

Задает величину отступа по вертикали

width="значение"

Ширина рисунка при отображении (в пикселах или процентах)

Изображение вставляется в строку текста, т.е. является объектом inline уровня. При этом, используя параметр align можно устанавливать способ выравнивания изображения по отношению к тексту.

Если же значение параметра align установить равным left или right, то изображение окажется «прижатым» к соответствующему краю окна браузера, а текст будет обтекать это изображение. При всех других способах

выравнивания изображение является «встроенным» в строку текста и составляет с ним единое целое.

Тег <span>. Тег-контейнер <span> предназначен для установки определенного стиля (формата) строчному фрагменту текста. Это тег inline уровня не приводит к разрыву текста и обычно используется для настройки собственных стилей, часто применяемых в HTML-документе. Для этого в таблице стилей (css) определяется нужный стиль и затем подключается через необязательный параметр class к тегу <span>.

<p>Пример работы <span style="color:red">тега span</span>

Тег <div>. Тег-контейнер <div> работает по тому же принципу, что и тег <span>, но в отличие от него является элементом уровня блока, т.е. по умолчанию никакая другая информация справа или слева от него не располагается. Данный тег используется для назначения общих свойств отображаемому блоку информации, например, для задания общего цвета фона, шрифта, размера, цвета текста и т.п. Как правило, все свойства прописываются в каскадной таблице стилей (css) и подключаются через параметр class тега <div> [1, с. 59].

<p>Пример работы <div style="color:red">тега div</div> - тега уровня блока.

Рисунок 4 - Пример работы тега <div>

2. Ссылки в HTML-документе

Отличительной особенностью HTML-страниц по отношению к стандартным текстам, напечатанным в книгах, газетах, журналах и т.п., является наличие ссылок на другие фрагменты этой же страницы или на сторонние документы. Наличие ссылок на страницах сайтов создают не просто текст, а гипертекст, т.е. текст, в котором пользователь может п лучить дополнительную информацию, кликнув мышкой на соответствующей ссылке [9, с. 253].

В результате грамотная организация текста и ссылок значительно упрощает пользователю навигацию и поиск нужной информации в сети Интернет.

Ссылка в HTML-документах состоит из двух частей: видимой в окне браузера частью, называемой указателем ссылки (или анкором от англ. anchor – якорь) и адресной частью, URL-адресом, говорящим браузеру куда следует перенаправить пользователя при использовании данной ссылки.

Создание ссылок в документе. Ссылка задается с помощью тега <a>, у которого имеется основной параметр href="URL-адрес", определяющий URL-адрес страницы перенаправления:

<p>Пример <a href="mypage.htm">ссылки</a> в HTML-документе.

Рисунок 5 - Пример отображения ссылки в окне браузера документа

Здесь mypage.htm – URL-адрес страницы, на которую перейдет пользователь при нажатии на ссылку, а слово «ссылки» - анкор ссылки, т.е. видимая ее часть в окне браузера. В качестве анкора ссылки чаще всего выступают фрагменты текста или изображения.

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

Внутренние ссылки. Помимо ссылок на другие страницы или сторонние ресурсы можно создавать ссылки на разные разделы текущего документа. Например, большой документ может содержать оглавление, состоящий из таких ссылок, щелкая по которым, пользователь автоматически переходит к выбранной части документа [9, с. 254].

Для организации таких ссылок на странице создаются «маркеры», указывающие, куда должен быть перенаправлен пользователь при выборе той или иной ссылки. «Маркеры» создаются с помощью того же тега <a> с параметром name="имя маркера", а ссылка на этот маркер имеет вид

<a href="#имя маркера">Внутренняя ссылка</a>

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

Ниже представлен HTML-документ с внутренней ссылкой.

<html>

<head>

<title>Пример внутренней ссылки</title>

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1251">

</head>

<body>

<h1>Оглавление</h1>

<a href="#chapter1">Глава 1</a>

<h2>Введение</h2>

<p>Введение в основы языка HTML.

<a name="chapter1"></a>

<h2>Глава 1</h2>

<p>Первая глава книги

</body>

</html>

Рисунок 6 - Пример организации внутренней ссылки в HTML-документе: а – начальное отображение страницы; б – результат перехода по ссылке к главе 1

Ссылки на другие ресурсы сети Интернет. В стандартной реализации ссылки, заданные в теге <a>, указывают на HTML-страницы в сети Интернет или на локальных ресурсах. Вместе с тем, существуют различные сервисы, имеющие иной формат передачи, приема, отображения данных отличный от HTML. Например, это может быть почтовый клиент, либо ftp-сеть передачи данных, либо telnet и т.п. Все эти и другие сервисы могут быть интегрированы в HTML-документ через ссылки. В этом случае также используется тег <a>, но в параметре href сначала указывается сервис, который подключается к документу, а затем, через двоеточие необходимые параметры этого сервиса [9, с. 255].

3. Списки в HTML-документе

В HTML-документах часто используется конструкция, представляющая собой список тех или иных данных. Например, это может быть список марок автомобилей, или знаков зодиаков, или рецептов блюд и т.п. Организовать такие списки можно, используя уже известные теги HTML. Однако гораздо более удобным и гибким инструментом являются специальные теги для представления списков в документе [9, с. 257].

3.1. Маркированный список

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

Для создания элементов списка используется тег <li>, записанный внутри тегов <ul> … </ul>. Тег <li> не требует закрывающего тега </li>, но его использование не возбраняется спецификацией языка HTML. Обычно браузер сам определяет где заканчивается один тег <li> и начинается другой. Кроме того, при определении элементов списка нет необходимости выполнять принудительный перенос строк с помощью тега <br> или тега <p>, эту задачу выполняет тег <li>, который четко структурирует элементы, образуя из них вид списка в окне браузера. Ниже представлен пример HTML-документа, использующий маркированный список для представления знаков зодиаков.

<!—пример маркированного списка знаков зодиаков -->

<html>

<head>

<title>Пример маркированного списка знаков зодиаков</title>

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1251">

</head>

<body>

<p>Знаки зодиаков:

<ul>

<li>Овен

<li>Телец

<li>Близнецы

<li>Рак

</ul>

</body>

</html>

Рисунок 7 - Пример маркированного списка

Как видно из рис. 7 тег <ul> осуществляет отступ сверху и снизу, а также слева от края документа, выделяя таким образом список в тексте документа. Тег <li> в свою очередь обеспечивает вывод каждого элемента с новой строки, образуя список.

Тег <ul> имеет необязательный параметр type, позволяющий задавать тип маркеров перед элементами списка. По умолчанию, в качестве маркеров используются закрашенные кружки (некоторые браузеры используют другие маркеры по умолчанию). Для изменения маркера по умолчанию, необходимо задать параметр type одним из следующих значений:

- disk – закрашенные кружки;

- circle – незакрашенные кружки;

- square – закрашенные квадратики.

Например, если в записанном выше примере переписать тег <ul> в виде <ul type=square>

то получим следующий вид списка (рис. 8).

Рисунок 8 - Маркированный список с параметром type=square

Следует отметить, что внутри тега <ul> могут находиться любые другие теги языка HTML, в том числе и вложенные теги <ul>, образуя таким образом более сложный вид списков. Например, можно создать список сотрудников, с вложенным списком возраста, места работы, образования:

<html>

<head>

<title>Пример вложенных списков</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<body>

<ul>

<b>Список сотрудников</b>

<li>Иванов Иван Иванович

<ul>

<li>Возраст: 22

<li>Место работы: УлГТУ

<li>Образование: высшее

</ul>

<li>Петров Петр Петрович

<ul>

<li>Возраст: 27

<li>Место работы: УлГУ

<li>Образование: высшее

</ul>

</ul>

</body>

</html>

Рисунок 9 - Пример вложенных списков

Обратим внимание, что при отображении вложенных списков браузер автоматически меняет тип маркера и делает необходимые отступы для удобного визуального восприятия таких списков [9, с. 259].

3.2. Нумерованный список

Данный тип списка отличается от маркированного тем, что в качестве маркера использует тот или иной вид перечисления элементов списка (по умолчанию в качестве перечисления используются арабские цифры, начиная с 1). Во всем остальном нумерованный список похож на маркированный.

Для создания нумерованного списка используется тег-контейнер <ol>, внутри которого располагаются элементы, заданные тегом <li>, например:

<p>Наиболее яркие звезды, видимые с Земли:

<ol>

<li>Сириус

<li>Канопус

<li>Арктур

<li>Альфа Центавра

</ol>

Рисунок 10 - Пример нумерованного списка

Тип перечисления можно менять с помощью параметра type тега <ol>. Параметр type может принимать следующие значения:

- type=A – задает маркер в виде прописных латинских букв;

type=a – задает маркер в виде строчных латинских букв;

- type=I – задает маркер в виде больших римских цифр;

- type=i – задает маркер в виде малых римских цифр;

type=1 – задает маркер в виде арабских цифр.

По умолчанию все браузеры используют маркер type=1.

Другой необязательный параметр тега <ol> start позволяет задавать начальное значение для нумерации списка, например,

<ol start=5>

при типе нумерации type=1 начнет нумерацию с 5, при type=I – начнет нумерацию с V, при type=A – начнет нумерацию с символа E и т.д.

Тег <li> в нумерованном списке может использовать параметр value для определения текущего номера элемента списка. При этом идущие следом за ним элементы будут увеличивать свой номер относительно него, например,

<ol>

<li>Сириус

<li>Канопус

<br>...

<li value=5>Арктур

<li>Альфа Центавра

</ol>

Рисунок 11 - Пример изменения нумерации при отображении списка

4. Таблицы в HTML-документе

Таблицы обеспечивают важную часть в представлении информации. Разделение данных на столбцы и строки имеет широкое применение в практике оформления текстовых документов. Не являются исключением из этого правила и HTML-документы, которые имеют специальный тег <table> для создания таблиц [9, с. 273].

В HTML-документах таблицы применяют не только для представления табличных данных, но и для создания разметки HTML-страницы. Например, многие страницы сайта имеют «шапку» (верхняя часть страницы), непосредственно информацию и «подвал» (нижняя часть страницы). Для разбивки HTML-документа на эти составные части хорошо подходят таблицы, у которых скрывается рамка и визуально создается впечатление единства всех составляющих частей. Таблицы удобны для создания разнообразного разбиения, т.к. ячейки таблицы могут содержать в себе и другие таблицы. В результате Web-мастеру не составляет большого труда организовать требуемую структуру документа и, затем, наполнить ее необходимым содержимым.

Создание простейших таблиц в HTML-документах.

Создание таблицы в HTML-документе начинается с тега <table> и заканчивается закрывающим тегом </table>. Таблицы всегда должны располагаться в разделе <body> документа. За тегом <table> обычно следует тег <tr>, описывающий строку таблицы. Затем, внутри тега <tr> располагается либо тег <th>, описывающий ячейку-заголовок таблицы, либо (и чаще всего) тег <td>, описывающий ячейку с данными таблицы. По сути, тег <th> или <td> разбивают строку таблицы на ячейки. Если нужно создать две ячейки в строке, то соответственно внутри тега <tr> должно быть два тега <td> (или <th>).

Число строк в таблице определяется числом тегов <tr> внутри текущей таблицы. При этом общее число таблиц в документе может быть произвольным. По умолчанию каждая строка таблицы <tr> должна содержать одинаковое число ячеек. Если данное условие не будет выполнено, то браузер автоматически добавит недостающее число ячеек и выровнит таблицу. Теги <tr>, <th> и <td> могут не иметь соответствующих закрывающих тегов, но их применение рекомендуется для лучшей ориентации Web-мастеру в структуре таблицы [9, с. 275].

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

<html>

<head>

<title>Пример простой таблицы</title>

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1251">

</head>

<body>

<table border=1>

<tr>

<th>Ф.И.О.</th>

<th>Информатика</th>

<th>Математика</th>

<th>Физика</th>

<th>Химия</th>

</tr>

<tr>

<td>Иванов И.И.</td>

<td>4</td>

<td>3</td>

<td>5</td>

<td>4</td>

</tr>

<tr>

<td>Петров П.П.</td>

<td>3</td>

<td>5</td>

<td>4</td>

<td>4</td>

</tr>

<tr>

<td>Наместников С.М.</td>

<td>5</td>

<td>5</td>

<td>5</td>

<td>5</td>

</tr>

</table>

</body>

</html>

В приведенном примере у тега <table> использовался необязательным параметр border со значением 1, который задает толщину рамки вокруг таблицы. Данный параметр может принимать и большие значение: 2,3,…, однако толщина будет влиять только на рамку вокруг таблицы, на толщину рамки вокруг отдельных ячеек это не оказывает никакого влияния. Отличие составляет только значение border=0. В этом случае рамок ни вокруг таблицы, ни вокруг ячеек не будет [9, с. 277].

Рисунок 12 - Пример отображения простой таблицы

Из приведенного примера видно, что текст в ячейках заголовка таблицы (заданных тегом <th>) выделены полужирным и выровнены по центру. Текст в ячейках данных (заданных тегом <td>) не выделен полужирным и выровнен по левому краю ячейки. Также следует отметить, что по умолчанию вертикальное выравнивание во всех ячейках таблицы выполняется по центру.

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

align=left | right | top | bottom

для выравнивания заголовка таблицы по левому, правому краю таблицы, либо определяет способ вывода сверху или снизу таблицы. Если параметр align не задан, то он принимается равным top.

Параметры тега <table>. Тег <table> имеет следующие основные необязательные параметры:

- align="left | center | right"

Выполняет горизонтальное выравнивание таблицы на странице документа. Если параметр align опускается при определении таблицы, то таблица располагается по левому краю и ее обтекание текстом не происходит. Если устанавливается значение align=left или right, то таблица ориентируется по левому или правому краю с обтеканием текста. Если же выравнивание выполняется по центру, то обтекание таблицы текстом не происходит.

- background="URL". Данный параметр служит для задания фонового изображения таблицы. Следует отметить, что изображение, указанное в значении URL, не масштабируется под высоту и ширину таблицы и будет отображена только соответствующая часть изображения. Если изображение меньше по ширине и/или высоте таблицы, то оно повторяется, заполняя соответственно всю ее площадь.

- bgcolor="цвет". Устанавливает цвет фона таблицы. В качестве значения данного параметра допустимо использовать как заданные цветовые константы, типа red, green, blue и др., так и шестнадцатиричные значения цветов в формате #RRGGBB, например,

<table bgcolor="#CC0000">...</table>

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

- border="толщина". С помощью параметра border устанавливается толщина рамки вокруг таблицы. По умолчанию border равен 0 и рамки в таблице не рисуются.

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

Следует отметить, что параметр border устанавливает толщину рамки только вокруг таблицы, но не вокруг ячеек.

- cellpadding="число". Данный параметр определяет расстояние в пикселах между границей ячейки и ее содержимым. По умолчанию значение параметра равно 1. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

- cellspacing="число". Задает расстояние в пикселах между смежными ячейками таблицы (точнее между рамками ячеек) по горизонтали и вертикали одновременно. При отсутствии рамки, данный параметр аналогичен по действию параметру cellpadding. Если в таблице используется набор параметров

<table border=0 cellspacing=0 cellpadding=0>...</table>

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

- cols="число". Атрибут cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы [9, с. 279].

- frame="значение". Определяет способ рисования рамки вокруг таблицы. Данный параметр может принимать следующие значения:

- void – без рамки;

- border – рисование рамки вокруг таблицы;

- above – рисование рамки сверху таблицы;

- below – рисование рамки снизу таблицы;

- hsides – рисование рамки только сверху и снизу таблицы;

- vsides – рисование только вертикальных границ;

- rhs – рисование границы справа;

- lhs – рисование границы слева.

По умолчанию данный параметр имеет значение border.

- rules="значение". Сообщает браузеру, где отображать границы между ячейками. При этом толщина внешней рамки таблицы устанавливается с помощью атрибута border. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку; толщина таких линий составляет 1px.

Данный параметр может принимать следующие значения:

- all – линия рисуется вокруг каждой ячейки таблицы;

- groups – линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>;

- cols – линия отображается между колонками;

- none – все границы скрываются;

- rows – граница рисуется между строками таблицы, созданных через тег <tr>.

- width="значение". Параметр width определяет желаемую ширину таблицы. По умолчанию браузеры вычисляют ширину и высоту таблиц автоматически, исходя из содержимого ячеек. Принцип формирования ширины исходит из того, что при чтении документа его удобно просматривать сверху вниз, не выполняя дополнительный скроллинг по горизонтали документа. Таким образом, браузеры пытаются установить ширину таблицы не превышающую ширину HTML-документа, чтобы исключить горизонтальный скроллинг. Однако бывают ситуации, когда Web-разработчику необходимо указать строго определенное значение ширины. Для этого можно использовать параметр width, который определяет ширину таблицы в пикселах, либо в процентах, например, так:

<table width=200>...</table>

<table width="100%">...</table>

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

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

ЗАКЛЮЧЕНИЕ

Основой всего web-дизайна является HTML (Hyper Text Markup Language) – язык разметки гипертекста. Именно данный язык используется для верстки web-страниц, размещаемых в сети Интернет. В отличие от обычного («линейного») текста гипертекст является системой связанных между собой страниц. Весь Интернет можно представить в виде одного гипертекстового документа. В самом деле, пользователь может переходить от одного документа к другому, используя гиперссылки, и для него не имеет никакого значения, является ли содержимое, отображаемое в окне его браузера, единым документом или системой множества взаимосвязанных документов. Такое свойство прозрачности для пользователя является общим для всех распределенных систем, к которым относится и Интернет.

HTML был создан для логической (или смысловой) разметки документов и не предназначен для управления отображением содержимого на экране пользователя или при выводе на печатающее устройство. Тем не менее, в течение продолжительного времени его неправомерно использовали для управления визуализацией. Ситуация изменилась, когда были созданы CSS (каскадные таблицы стилей). Именно они предназначаются для указания браузеру способа отображения содержимого web-страницы.

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

Все HTML-документы состоят из заголовочной части (head) и тела документа (body). В заголовочной части размещается метаинформация, которая является описанием документа. В теле документа располагается непосредственно содержимое, которое выводится в окне браузера или на печатающее устройство. Вся web-страница должна быть заключена в теги <html> … </html>. Заголовок обрамляется тегом <head> … <head>, а тело документа тегом <body> … </body>.

Необходимо отметить, что большая часть HTML-тегов является парными, т. е. требуют использования открывающего и закрывающего тегов. Открывающий тег состоит из имени заключенного в угловые скобки <>. В закрывающем теге перед именем добавляется знак слеш /.

   

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

  1. Гаевский А.Ю. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский. - М.: Триумф, 2017. - 464 c.
  2. Гудман Д. JavaScript и DHTML. Сборник рецептов. Для профессионалов / Д. Гудман. - М.: Питер, 2017. - 523 c.
  3. Дакетт Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. - М.: Эксмо, 2016. - 480 c.
  4. Дакетт Д. Основы веб-программирования с использованием HTML, XHTML и CSS / Д. Дакетт. - М.: Эксмо, 2017. - 768 c.
  5. Дронов В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - СПб.: БХВ-Петербург, 2017. - 138 c.
  6. Дубаков М.А. Веб-мастеринг средствами CSS. - СПб.: БХВ-Петербург, 2017. – 544 с.
  7. Дубаков М.А. Создание Web-страниц: искусство верстки. – Мн.: Новое знание, 2016. – 287 с.
  8. Квинт И. Создаем сайты с помощью HTML, XHTML и CSS / И. Квинт. - СПб.: Питер, 2017. - 448 c.
  9. Лазаро И. К. Полный справочник по HTML, CSS и JavaScript / Л. И. Коэн, Д. И. Коэн. - М.: ЭКОМ Паблишерз, 2016. - 938 c.
  10. Мержевич В. HTML и CSS на примерах / В. Мержевич. - СПб.: БХВ-Петербург, 2016. - 448 c.
  11. Пауэлл Т.А. Полное руководство по HTML. - Мн.: ООО "Попурри", 2016. - 912 с.
  12. Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - СПб: Питер, 2017. - 768 c.
  13. Ташков П. Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / П. Ташков. - М.: Книга по Требованию, 2017. - 512 c.
  14. Титтел Э. HTML, XHTML и CSS для чайников / Э. Титтел, Д. Ноубл. - М.: Диалектика, 2016. - 400 c.
  15. Чебыкин Р. Самоучитель HTML и CSS. Современные технологии / Р. Чебыкин. – М.: Огни, 2017. - 624 c.