Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
shpory_po_kitu.doc
Скачиваний:
0
Добавлен:
01.03.2025
Размер:
605.7 Кб
Скачать

24. Таблицы и списки в html. Примеры.

Для оформления перечней в гипертексте определены три типа списков: без нумерации или неупорядоченные (используется элемент <UL>), с нумерацией или упорядоченные (<OL>) и списки определений (<DL>).

Пример оформления неупорядоченного списка: <UL>

<LI> Первый элемент списка

<LI> Второй элемент списка

<LI> Последний элемент списка

</UL>

Тег <LI> отвечает за формирование элемента списка.

Списки определений формируются с помощью элемента <DL> и служат для создания глоссариев (словарей терминов) и индексов:

<DL>

<DT>Первый термин

<DD>Определение первого термина

<DT>Второй термин

<DD>Определение второго термина

</DL>

Тег <DD> отвечает за формирование элемента списка определений.

Совместно с механизмом ссылок перечни позволяют строить простые меню.

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

<TABLE> Контейнер таблицы

<CAPTION> Контейнер заголовка таблицы

Заголовок таблицы

</CAPTION>

<TR> Контейнер строки таблицы

<TH>Заголовок 1-го столбца</TH> Контейнеры заголовков столбцов

<TH>Заголовок 2-го столбца</TH>

. . .

</TR>

<TR>

<TD>Первая ячейка</TD> Контейнеры ячеек

<TD>Вторая ячейка</TD>

. . .

</TR>

</TABLE>

Все описание таблицы размещается в контейнере <TABLE>. Чтобы показать в таблице рамку, применяют атрибут BORDER тега <TABLE>. Дополнительно задается заголовок таблицы - контейнер CAPTION:

<CAPTION ALIGN=выравнивание>Заголовок таблицы</CAPTION>

где параметр выравнивание принимает значения: TOP – по верху, BOTTOM– по низу.

Таблица определяется по строкам с помощью контейнера <TR>, в который вложены контейнеры ячеек <TD>, разделенные по столбцам. При этом в контейнер ячейки можно помещать не только текст, но и метки для форматирования текста (например, <B> или <I>), списки, вложенные таблицы, а также изображения, например (см. также раздел 3.4):

<TABLE>

<TR>

<TD>One

<TD><IMG SRC="picture.jpg" ALT=" ">

<TD><FONT SIZE=5>W<FONT SIZE=3>Three

</TR>

</TABLE>

Кроме этого, внутри тегов <TD> и <TH> можно осуществлять выравнивание с помощью атрибута ALIGN со значениями: LEFT (влево), RIGHT (вправо) или CENTER (центрировать). Кроме горизонтального выравнивания в клетках таблиц можно применять и вертикальное выравнивание текста. В этом случае в тегах <TD> и <TH> применяется атрибут VALIGN с выравниванием по верху (TOP), по низу (BOTTOM) и выравниванием по середине (MIDDLE).

25.Графика и html. Организация графических указателей. Примеры.

Самым распространенным форматом графических данных в Web является формат GIF (Graphical Interchange Format).

Принимая решение о целесообразности включения в документ той или иной иллюстрации, нужно учитывать следующее:

-Графические файлы передаются медленно.

-Поисковые системы не умеют работать с изображениями.

-Изображения не всегда интернациональны.

-Цветная графика не всегда хорошо отображается.

Существует множество форматов данных, используемых для хранения графических изображений: GIF, JPEG, РСХ, WMF и др.

GIF – один из наиболее часто используемых форматов. Он был разработан для сети CompuServe и после ряда усовершенствований приобрел много важных свойств, включающих:

-сжатие данных без потерь, сохраняющее все детали изображения;

-поддержку прозрачного фона, то есть возможность создания изображений с прозрачными участками;

-черезстрочный вывод изображения на экран, что дает возможность рассмотреть изображение до конца загрузки;

-поддержку 265 цветов, что предполагает использование для публикации простых графических изображений;

-поддержку большинством браузеров.

JPEG (Joint Photographic Experts Group) – формат был создан группой экспертов в области фотографии в результате разработки стандартного метода сжатия фотографических изображений "с потерями", который предполагает потерю некоторых деталей при сохранении файла графической программой. Основные свойства данного формата:

-сжатие происходит "с потерями", поэтому изображение теряет некоторые (несущественные) детали;

-размер файла сжатого изображения, как правило, меньше, чем в случае GIF, то есть файл передается быстрее;

-поддержка 16,7 миллионов цветов, что обеспечивает очень хорошее качество цветопередачи;

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

PNG (Portable Network Graphics), формат был разработан в 1995 году, чтобы прийти на смену формату GIF. Характеризуется, в частности, улучшенным сжатием данных и увеличенным количеством поддерживаемых цветов. В настоящее время распространяются подключаемые программные модули для браузеров Microsoft Internet Explorer и Netscape Navigator, позволяющие использовать формат PNG (произносится "пинг").

ВМР (bitmap), формат широко используется операционными системами Windows и OS/2. Файлы в этом формате хранятся без сжатия и поэтому требуют много времени при загрузке. Поддерживается только программой

Microsoft Internet Explorer. Сравнение форматов GIF, JPEG и PNG показывает, что:

-файлы в форматах GIF и PNG больше, чем в формате JPEG, но файлы GIF и PNG быстрее декодируются и поддерживают большую детализацию изображения;

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

Элементом, который "заставляет" браузер выводить изображение, является элемент

<IMG> со следующим форматом:

<IMG SRC="имя_файла">

Здесь SRC означает источник (SouRCe), а имя_файла - имя выводимого графического файла. Например, для вывода на Web-страницу изображения, сохраненного в файле logo.gif, применяется строка:

<IMG SRC="logo.gif" BORDER="0">

где атрибуту BORDER, определяющему вывод рамки вокруг изображения, присвоено значение "0" для отключения вывода рамки. Иногда, в силу каких-либо причин, браузер не может вывести графические файлы. В этом случае вместо них выводится слово [IMAGE] (изображение), что делает страницу некрасивой. Для предотвращения этого элемент <IMG> имеет дополнительный атрибут ALT, который можно использовать для вывода некоторого альтернативного текста, появляющегося вместо изображения. Используется формат:

<IMG SRC="имя_файла" ALT="[альтернативный текст]">

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

пробела, например:

<IMG SRC="logo.gif" BORDER="0" ALT=" ">

26.Гиперссылки - связывание HTML- документов. Относительная и абсолютная адресация.

Ссылка (гиперссылка или Web-ссылка) является основной гипертекстовой конструкцией и связывает один Web-ресурс с другим. Именно простота организации ссылок - основной фактор успеха Web-технологии. Ссылка состоит из двух частей. Первая часть ссылки видна на Web-странице и называется указателем ссылки (или якорем). Вторая часть ссылки, дающая инструкцию браузеру, называется адресной частью ссылки (или URL-адресом). Когда ссылка активизируется, например, при щелчке мышью по указателю ссылки, браузер загружает документ, адрес которого определяется с помощью URL. Рассмотрим составные части ссылки. Указателем ссылки может быть слово, группа слов или изображение. Внешний вид указателя зависит от его типа, способов создания и установок программы просмотра читателя. Указатели бывают двух типов – текстовые и графические. Текстовые указатели не отличаются разнообразием внешнего вида и обычно представляют собой слово или слова, подчеркнутые прямой линией. Цвет указателя регулируется разработчиком страницы и установками браузера. Например, часть Web-страницы с двумя текстовыми указателями (подчеркнутые словосочетания), может иметь вид:

Подробнее см. в главе два. См. также карту леса.

Фрагмент HTML кода документа, формирующего в браузере приведенную выше часть страницы, выглядит следующим образом:

<BODY>

...какой-то текст...

<P>Подробнее см. в <A href="chapter2.html">главе два.</A>

См. также <A href="forest.gif">карту леса.</A>

</BODY>

URL-адрес является второй частью ссылки и представляет собой адрес ресурса, загружаемого при активизировании указателя ссылки. Задание URL-адреса может быть относительным или абсолютным. Как видно из примера выше, организация гиперссылок выполняется с помощью элемента <A>. Для создания ссылки этому элементу требуется атрибут HREF, в котором размещается URL-адрес. Элемент <A> является контейнером, поэтому закрывающий тег </A> ставится сразу же за указателем:

<A HREF=URL>указатель: текст видимый в браузере</A>

Для примера рассмотрим еще один фрагмент HTML кода:

<А HREF="http://www.personal.gomel.by/olas/tags.html">Крат кий справочник</A>основных тегов

Атрибут HREF указывает на абсолютный адрес страницы. Указателем являются слова "Краткий справочник", которые браузер будет выделять подчѐркиванием и цветом. Текст вне контейнера </A> не является указателем и

поэтому не будет подчеркнут. Когда пользователь щѐлкает мышью по какому-либо из слов фразы "Краткий справочник", браузер загружает файл tags.html, находящийся по адресу http://www.personal.gomel.by/olas/

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]