Первая строка, первая колонка

У таблицы может быть заголовок

Таблицы

Списки

Списки бывают следующих видов:

· нумерованные;

· ненумерованные (маркированные):

· вложенные.

Нумерованный список – это текст, заключенный в тэги <ol>... </ol>. Каждый новый элемент списка нужно начинать с тэга <li>. Этот тэг является непарным. В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если один или несколько элементов списка удалить, то остальные будут автоматически перенумерованы.

Пример.

<p> Виды программного обеспечения: <br>

<ol>

<li>Системное

<li>Прикладное

<li>Инструментальное

</ol>

</p>

В окне браузера будет отображено следующее:

Виды программного обеспечения:

1. Системное

2. Прикладное

3. Инструментальное

Тэг <ol> может иметь дополнительные атрибуты

<ol type=A|a|I|i|1 start=n>

где type – вид нумерации, который может принимать следующие значения:

A – заглавные латинские буквы (A, B, C…);

a – строчные латинские буквы (a, b, c…);

I – большие римские цифры (I, II, III…);

i – маленькие римские цифры (i, ii, iii…);

1 – арабские цифры (1, 2, 3…) – установлен по умолчанию.

start=n – задает начальное значение числовой нумерации.

Ненумерованный список – это текст, заключенный в тэги <ul> ... </ul>. Каждый новый элемент списка начинается с тэга <li>. При просмотре в браузере каждый элемент такого списка помечается специальным значком – маркером, вид которого можно задать при помощи атрибута тэга <ul>:

<ul type=disc|circle|square>, что приводит к маркерам следующих видов: , (установлен по умолчанию), ¢.

Вложенный список – это комбинация нумерованного и маркированного списков, вложенных друг в друга. Число уровней вложения не ограничено.

Пример.

<p> Виды программного обеспечения:

<ol>

<li> Системное

<ul>

<li> Операционные системы

<li> Драйверы

</ul>

<li> Прикладное

<ul>

<li> Текстовые процессоры

<li> Табличные процессоры

<li> СУБД

</ul>

</ol>

</p>

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

Списки определений: <dl> ... </dl>

Список определений несколько отличается от других видов списков. Вместо меток <li> в списках определений используются тэги <dt> (от английского definition term — определяемый термин) и <dd> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:

<dl>

<dt>HTML

<dd>Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

<dt>HTML-документ

<dd>Текстовый файл с расширением *.htm или *.html

</dl>

Этот фрагмент будет выведен на экран следующим образом:

HTML

Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

þ Обратите внимание: точно так же, как тэги <li>, тэги <dt> и <dd> не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <dl compact>. Например, вот такой фрагмент HTML-текста:

<dt>А

<dd>Первая буква алфавита

<dt>Б

<dd>Вторая буква алфавита

<dt>В

<dd>Третья буква алфавита

</dl>

будет выведен на экран примерно так:

Первая буква алфавита

Вторая буква алфавита

Третья буква алфавита

4. Гиперссылки в НТМL – документе. Изображения

Использование гиперссылок

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

В HTML переход от одного фрагмента текста к другому задается с помощью тэга:

<a href="[адрес перехода]">выделенный фрагмент текста</a>

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое - это задать имя другого HTML-документа, к которому нужно перейти.

Например: <a href="pr.htm">Перейти к оглавлению</a>

Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента "Перейти к оглавлению", при нажатии на который в текущее окно будет загружен документ pr.htm.

þ Обратите внимание, если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например, если Вы хотите дать ссылку на это руководство со своей странички, Вам придется ввести в свой HTML-документ примерно такой фрагмент:

<a href="http://www.ns2.ripo.unibel.by/home/pr.htm">Практическое руководство по HTML </a>

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

Разберем это на примере.

Допустим, что необходимо осуществить переход из файла 1.htm по щелчку на фразе "Переход к анкеру" к словам "Переход закончен" в файле 2.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.htm:

<a name="AAA">Переход закончен</a>

Фрагменту "Переход закончен" присваивается имя "ААА", при этом он никак не будут выделен в тексте документа.

Затем в файле 1.htm (или в любом другом) можно определить переход на этот анкер:

<a href="2.htm#AAA">Переход к анкеру AAA</a>

Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.htm — достаточно только включить в него вот такой фрагмент:

<a href="#AAA">Переход к анкеру AAA</a>

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

Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно.

Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов.

Например:<a href="ftp://server/directory/file.ext">Выгрузить файл</a>

Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.

<a href="mailto:user@mail.box">Послать письмо</a>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.

Разберем все, что мы знаем о связывании, с помощью примера.

<html>

<head>

<title>Пример 9</title>

</head>

<body>

<h1>Ссылки </h1>

<p>С помощью ссылок можно переходить к другим файлам

(например, к <A HREF="pr.htm">оглавлению этого

руководства</A>).</p>

<p>Можно выгружать файлы (например,

<a href="ftp://ripo.unibel.by/html-pr.doc">это

руководство в формате Microsoft Word </a>) по FTP.</p>

<p>Можно дать пользователю возможность послать почту (например,

<a href="mailto:nc@ripo.unibel.by">автору этого руководства</a>).</p>

</body>

</html>

Этот фрагмент на экране будет выглядеть так:

Ссылки

С помощью ссылок пользователь может переходить к другим файлам (например, к оглавлению этого руководства).

Можно выгружать файлы (например, это руководство в формате Microsoft Word ) по FTP.

Можно дать пользователю возможность послать почту (например, автору этого руководства).

Добавление графических изображений в HTML-документы

Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.

Для вставки изображения используется тэг вида:

<img src="[имя файла]">

Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая: <img src="picture.gif">

Тэг <Img> использует атрибуты, значения которых имеют большую важность при размещении изображения на Web-странице. Основные из них:

align– выравнивание текста.

align="top "по верхнему краю изображения

align="middle" по средней части изображения

align="bottom" по нижнему краю изображения

align="left" показывает изображение слева

align="right" показывает изображение в правой части окна

heightуказывает высоту изображения в пикселях или процентах

width указывает ширину изображения в пикселях или процентах

border присваивает значение ширины рамки в пикселях вокруг изображения

vspace расширяет свободное пространство в пикселях вокруг изображения по вертикали

hspaseрасширяет свободное пространство в пикселях вокруг изображения по горизонтали

Тэг <Img> может также включать атрибут alt="[текст]", например: <img src="picture.gif" alt="Картинка">

Встретив такой тэг, браузер покажет на экране текст "Картинка" и начнет загружать на его место картинку из файла picture.gif. Атрибут alt может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).

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

Разберем все, что мы знаем об изображениях, с помощью примера:

<htnl>

<head>

<title>Пример 10</title>

</head>

<body>

<h1>Изображения </h1>

<p>Изображение можно встроить очень просто: </p>

<p><img src="picture.gif"></p>

<p>Кроме того, изображение можно сделать "горячим", то есть

осуществлять переход при нажатии на изображение:</p>

<p><a href="pr.htm"><img src="picture.gif"></a></p>

</body>

</html>

Обратите внимание на вторую часть примера. Если ссылка на изображение находится между тэгами <a href="..."> и </a>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке.

Этот фрагмент на экране будет выглядеть так:

Изображения

Изображение можно встроить очень просто:

Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:

В устройстве таблицы легче всего разобраться на простом примере.

<html>

<head>

<title>Пример 11</title>

</head>

<body>

<h1>Простейшая таблица </h1>

<table border=1> 

<caption> 
</caption>

<tr> 

<td> 
</td> 

<td>