Лабораторная работа№1,2

используют значение right, для выравнивания по левому краю применяют left. Атрибут align часто используют в связке с другими атрибутами тега <img> — vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу.

Для обтекания картинки текстом также можно применить стилевое свойство float. Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева. Это свойство мы рассмотрим позже при изучении блочной верстки с применением CSS.

Работа с изображениями:

1). Предположим, у Вас есть файл изображения mypicture.gif. Включите в HTML-страницу изображение:

<img src="mypicture.gif">

Заметим, что в этом случае файл mypicture.gif должен находиться в том же самом каталоге (папке), где находится Ваша страница.

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

Создайте такой каталог и включите в Вашу страницу следующий тэг:

<img src="images/mypicture.gif">

3). Создайте каталог images2, который находится на том же уровне, что и каталог с Вашей страницей. Включите в Вашу страницу следующий тэг:

<img src="../images2/mypicture.gif">

4). Запомните типичные ошибки, которые совершаются при использовании изображений в HTML-страницах:

∙Неверное указание пути к файлу изображения

∙Отсутствие файла изображения в правильно заданном каталоге.

∙Использование имен в неправильном регистре (MyPicture.GIF вместо mypicture.gif).

Списки в HTML

В HTML используются упорядоченные, неупорядоченные списки и списки определений.

Неупорядоченные списки (маркированные)

Неупорядоченный список — это перечень элементов. Элементы списка обозначаются буллетами (обычно черные закрашенные кружочки - диски).

11

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

</ul>

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

Упорядоченные списки (нумерованные)

Упорядоченный список — это тоже перечень элементов. Элементы списка обозначаются числами.

Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>

<ol> <li>Январь</li> <li>Февраль</li>

<li>Март</li> </ol>

Если не указывать никаких дополнительных атрибутов и просто написать тег <ol>, то по умолчанию применяется список с арабскими числами (1, 2, 3,...), как показано в примере выше.

Список определений

Список определений — это не просто список элементов. Это список элементов с описанием каждого элемента.

Список определений начинается с тега <dl>. Каждый элемент списка определений начинается с тега<dt>. Каждое описание элемента списка начинается с тега <dd>.

<dl>

<dt>Термин 1</dt> <dd>Определение 1</dd> <dt>Термин 2</dt>

<dd>Определение 2</dd> </dl>

Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д.

Таблицы

Таблицы в HTML состоят из строк, которые, в свою очередь делятся на ячейки. Все содержимое таблицы заключается между парой дескрипторов <TABLE>...</TABLE>, для задания толщины линий используется атрибут BORDER, а для указания цвета заполнения рамки - атрибут BORDERCOLOR. Каждая строка таблицы определяется дескрипторами <TR>...</TR>, а ячейка заключена между дескрипторами <TD>...</TD>. Ячейки, используемые для заголовков столбцов задаются дескрипторами <TH>...</TH>.

12

Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> (table row) и <td> (table data). Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега <td> использовать тег<th> (table header). Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

Теги оформления таблиц

13

Гиперссылки

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

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

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается.

Существует три способа использования данного тега:

1.Для создания абсолютной ссылки. В этом случае в адресном поле указывается значение URL, куда ведет ссылка. Такой адрес доступен отовсюду, где есть подключение к сети Интернет. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта.

2.Для создания относительной ссылки. При этом в поле адреса прописывается путь к другому документу, относительно текущего документа. К примеру, создавая веб-страницу, html документ, можно прописать путь к рисунку, который лежит в той же папке. Для этого достаточно указать адрес рисунка, без всяких URL (Мои документы/Папка моего сайта/ picture.jpg). К относительным ссылкам относится ссылка для скачивания.

3.Для создания якоря. В этом случае с помощью ссылки вы можете осуществлять переходы внутри документа. Например, можно внизу страницы поставить ссылку, кликнув по которой пользователь попадет в начало документа.

14

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

Относительные ссылки

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

документ, в котором мы создаём ссылку, достаточно просто указать имя файла, на который мы ссылаемся.

<a href="имя-файла">Текст ссылки</a> = <a href="./имя-файла">Текст ссылки</a>

В имени файла важно соблюдать регистр и не забыть указать расширение.

Родительская папка

<a href="../имя-файла-в-родительской-папке">Текст ссылки</a>

Имя родительской папки указывать не нужно, так как она всегда определяется однозначно.Если надо сдвитуться еще на уровень выше, то впереди надо добавить еще "../".

Дочерняя папка

<a href="дочерняя-папка/имя-файла">Текст ссылки</a>

либо

<a href="./дочерняя-папка/имя-файла">Текст ссылки</a>

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

Папка верхнего уровня

Для указания на папку верхнего уровня (корневую папку) используется «/».

<a href="/имя-файла-в-папке-верхнего-уровня">Текст ссылки</a>

Якоря

Якорь предназначен для навигации по веб-странице. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей уникальное имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди:

<p><a name="Anckor1"></a></p> <p>...</p>

<p><a href="#Anckor1">Якорь</a></p>

Основные теги закладок и гиперссылок

Вставка ссылок

15

Фреймы

Окно браузера может быть разбито на произвольное число независимых подокон, в каждом из которых могут отображаться разные HTML странички. Такие подокна называются фреймами. Разбиение окна браузера на фреймы осуществляется парным дескриптором <FRAMESET>...</FRAMESET>. Каждый созданный фрейм посредством этого же дескриптора может быть, в свою очередь, также разделен на фреймы. Деление окна браузера на фреймы не является телом HTML документа, поэтому дескриптор <BODY>...</BODY> не используется.

Дескриптор <FRAMESET> имеет два атрибута COLS и ROWS. Они позволяют разделять окно на вертикальные полосы (COLS - колонки) либо горизонтальные полосы (ROWS - строки). Размер полосы указывается либо в процентах от вертикального (горизонтального) размера разделяемой области, либо в экранных пикселях. После разделения на фреймы, каждый фрейм должен быть определен одиночным

16

дескриптором <FRAME>, либо снова разделен на фреймы. Каждому значению COLS либо ROWS в порядке их следования должен однозначно соответствовать либо <FRAME> либо новый <FRAMESET>.

Пример 2

17

Показ HTML страниц во фреймах

Для показа во фрейме HTML при описании фрейма дескриптором <FRAME> нужно указать атрибут SRC, задающий имя файла, который будет открыт во фрейме и атрибут NAME, определяющий имя фрейма, под этим именем фрейм будет известен в пределах создаваемого Webсайта. Имя фрейма обеспечивает возможность кликать по гиперссылкам в одном фрейме, а просматривать файлы, открывающиеся по ссылкам, в другом фрейме, это прекрасная возможность создавать системы меню для сайтов.

"Информация". Модифицируем файл index.html следующим образом:

18

Сделаем так, чтобы файлы можно было выбирать во фрейме "Меню" и выбранный файл отображался во фрейме "Информация". Для этого используются уже рассмотренные нами гиперссылки с атрибутом TARGET. Список гиперссылок мы сформируем в файле menu.html, который открывается во фрейме menu, а в гиперссылках укажем для файлов ***.html и ***.html TARGET="info", тогда эти файлы, будучи выбранными по гиперссылке откроются во фрейме c именем info.

Запустив индексный файл получим:

19

A link to <A HREF="file.htm" TARGET="frame2"> file.htm</A> -

Связь между фреймами TARGET - атрибут связи между фреймами. Имеет несколько значений:

_BLANK загружает содержимое страницы, заданной ссылкой, в новое пустое окно.

_SELF содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку.

_PARENT загружает содержимое страницы, заданной ссылкой, в окно,

Атрибуты дескриптора <FRAME>

o Атрибут NAME, определяющий имя фрейма и атрибут SRC, указывающий имя файла, открывающегося во фрейме

o Атрибут FRAMEBORDER - позволяет отобразить или скрыть границу фрейма, для скрытия границы между двумя фреймами нужно скрыть границу в каждом из них. Если атрибут не указан, граница отображается.

o FRAMEBORDER=0 скрывает границу (Internet Explorer отображает тонкую границу);

o FRAMEBORDER=1 отображает границу.

o Атрибут NORESIZE - исключает возможность изменения размеров фрейма мышью, если атрибут не указан, такая возможность есть;

o Атрибут SCROLING - отображает или заперщает отображение полос прокрутки. Если информация не умещается во фрейме, то на правой и нижней границе фрейма могут появлятся полосы прокрутки.

o SCROLING=AUTO (используется по умолчанию) - если информация помещается во фрейме полосы прокрутки не отображаются, если не умещается - отображаются;

o SCROLING=YES - полосы прокрутки всегда отображаются; o SCROLING=NO - полосы прокрутки не отображаются;

20