Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Таблица 5 Основные опции тага TABLE

↑

⇐ ПредыдущаяСтр 9 из 9

Тэги

Самый смак гипертекстового языка -- это ссылки. В мировой паутине вы просто нажимаете на ссылку и мгновенно оказываетесь в другой точке земного шара на выбранной вами страничке.
По традиции всех классических руководств по HTML мы приводим самый простой гипертекстовый документ.
<TITLE>Пример простого HTML документа</TITLE>
<H1>Здесь размещен заголовок первого уровня</H1>
Добро пожаловать в Internet!
Первый и последний параграф.<P>
В этом примере мы использовали следующие термины гипертекста (так называемые тэги):
<TITLE> -- тэг, использующийся для определения заголовка.
<H1> -- тэг заголовка.
<P> -- тэг метки параграфа.
В языке описания гипертекстовых документов все тэги парные. В конечном тэге присутствует слэш, который сообщает браузеру о завершении. Существует одно исключение из этого правила пар:
В природе не существует тэга </P>.
Не все тэги совместимы с браузерами. Если браузер не понимает тэг, то он его просто пропускает.
Итак, документ HTML это заголовок:
<html>
<head> Заголовок </head>
<body>
... HTML HTML
В язке HTML нет разницы между прописными и строчными символами.
и текст
...
</body>
с названием:
<head>
<title> Название </title>
</head>
Название документа
Это не правило, и даже не закон, это факт:
Любой документ HTML имеет название.
По названию вашего документа HTML другие браузеры могут найти информацию. Место для названия всегда определено -- оно находится вверху экрана, и отдельно от содержимого документа. Максимальная длина названия -40 символов.

Язык HTML позволяет вам работать с шестью уровнями заголовков. Первый
заголовок -- самый главный. На него обращается особое внимание. Ос-
тальные заголовки могут быть оформлены, например, жирным шрифтом или
прописными буквами.
В HTML первый заголовок обозначается как <H1>:

<Hn>Текст</Hn>

Под n понимается уровень заголовка, то есть числа 1, 2, 3, 4, 5 или 6.
В HTML первый заголовок может совпадать с названием документа.

18)

HTML-документ -- это обычный текстовой файл. Используя, например, браузер Netscape Navigator вы можете просмотреть результат вашей работы, просто загрузив в него созданный на основе синтаксиса HTML текстовой файл.
Гипертекстовый язык предоставляет только информацию для чтения. Это означает, что редактировать Web-страницы может лишь тот, кто их создал, а не простой пользователь Сети сетей. Впрочем, если забежать немного вперед, можно сказать, что используя общий шлюзовой интерфейс (CGI) можно добавлять некоторые операторы HTML в сгенерированную страницу.

Тэги

Ссылки

HTML позволяет вам связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием.
Для этого используется тэг <A>. Помните, что после буквы A должен стоять пробел.
Чтобы сформировать ссылку:
- наберите <A
- введите HREF="filename">
- наберите после > текст гипертекстовой ссылки
- наберите тэг </A>
Один из вариантов гипертекстовой ссылки может выглядеть так:

Здесь слово Bob ссылается на документ BobAnapa.html, образуя гипертекстовую ссылку.
Если документ, формирующий ссылку, находится в другой директории, то подобная ссылка называется относительной:
<A HREF="BobAnapa/ВobMoscow.html">Bob</A> HTML HTML
Если вы хотите указать полное имя файла, то вам необходимо использовать синтаксис UNIX.
Ссылки можно формировать на основе так называемого универсального локатора ресурса, то есть используя следующий синтаксис:
protocol: //hostport/path
Предварительное форматирование текста
Тэг <PRE> позволяет сформировать текст, оформленный моноширинным шрифтом.
Используйте этот тэг для оформления листингов программ.

19) Важным инструментом Web-дизайна являются таблицы, которые используются не только для вывода табличных данных, но и для управления взаимным размещением текста и графики, создания колонок газетного типа, цветовых эффектов и т.д. Следует помнить, однако, что браузер отображает содержимое таблицы только по окончании ее загрузки, поэтому если весь 50- или 100-килобайтный документ разместить в одной гигантской таблице, ни один пользователь, скорее всего, не дождется загрузки такого документа. Таблица размещается в таге <TABLE>, имеющем ряд опций:

Опция

Назначение

ALIGN="выравнивание"

Выравнивание всей таблицы относительно текста, в котором она находится (left, center или right)

BORDER="число"

Ширина обрамления таблицы в пикселах

CELLSPACING="число"

Расстояние между ячейками в пикселах

CELLPADDING="число"

Размер свободного пространства между границами ячейки и ее содержимым в пикселах

HSPACE="число"

Размер свободного пространства слева и справа от таблицы, в пикселах

VSPACE="число"

Размер свободного пространства сверху и снизу от таблицы, в пикселах

WIDTH="ширина"

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

Таблица формируется по строкам, причем, каждая строка заключена в таг <TR>...</TR>, а каждая ячейка строки - в таг <TD>...</TD>.Закрывать таг </TABLE> и таги строк и столбцов обязательно. Можно изменять выравнивание объектов в ячейках таблицы, используя в тагах <TR> и <TD> опции ALIGN (так же, как в таге <TABLE>) и VALIGN для указания способа выравнивания ячеек по вертикали - TOP (по верхнему краю), BOTTOM (по нижнему краю) или CENTER (по центру).

Для явного указания ширины ячейки в таге <td> также можно использовать опцию width, а опция nowrap запрещает браузеру распределять текст по всей ячейке, так, что на экране отображается лишь та часть текста, которая умещается по длине.

Об управлении цветами в таблице будет сказано в разделе 7.

Для того, чтобы растянуть ячейку таблицы на несколько строк или столбцов, в таге ячейки <TD> используются опции ROWSPAN="число" и COLSPAN="число", указывающие, сколько строк и сколько столбцов таблицы охватывает данная ячейка. Если ячейку следует оставить пустой, в нее обычно помещают "жесткий" символ пробела  

Примеры:

Характеристики

Средний рост, см

Средний вес, кг

Пол

Мужской

Женский

Данная таблица создана с помощью следующего HTML-кода:

<tr>

<td colspan="2">Характеристики</td>

</tr>

<tr>

<td>Средний рост, см</td>

<td>Средний вес, кг</td>

</tr>

<td>Мужской</td>

</tr>

<td>Женский</td>

</tr>

</table>

Следующая таблица использует 90% ширины окна браузера и различные способы выравнивания данных в ячейках:

Заголовок

Данные, выровненные по
левому краю ячейки

Данные, выровненные по
правому краю ячейки

25% ширины таблицы

75% ширины таблицы

<table align="center" border="5"

cellpadding="2" cellspacing="0">

<tr

<td align="center" colspan="2"><big>Заголовок</big></td>

</tr>

<tr

<td align="left">Данные, выровненные по<br>

левому краю ячейки</td>

<td align="right">Данные, выровненные по<br>

правому краю ячейки</td>

</tr>

<tr>

</tr>

</table>

Обратите внимание на оформление таблиц - как и при написании программ, при "ручном" создании Web-страниц удобнее всего набирать операторы одного уровня с одинаковым сдвигом вправо. Во втором примере также характерно, как ширина ячеек второй строки неявно определяется шириной ячеек третьей.

Сложные и красивые эффекты могут быть достигнуты вложением таблиц друг в друга - внутренняя таблица при этом должна быть целиком вложена в таг <td> внешней таблицы.

Как правило, браузеры поддерживают рисунки в форматах GIF и JPG.

Формат GIF обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов (до 256) и возможностью анимации ("мультипликация" на Web-страницах, графические кнопки, "украшения"). Кроме того, формат GIF поддерживает эффект прозрачности, то есть, точки определенного цвета можно сделать того же цвета, что и фон страницы. Второй полезный эффект - возможность черезстрочной загрузки изображения GIF - то есть, изображение может постепенно "проявляться" по мере загрузки страницы, что даст пользователю возможность уже на ранней стадии загрузки получить представление о содержании картинки.

Формат JPG используется для хранения полноцветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16.7 миллиона цветов. Благодаря компрессии изображений, столь многоцветные файлы JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web-страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате BMP, а в GIF или JPG конвертировать только окончательный вариант картинки.

Из доступных приложений эффективно управлять файлами в форматах GIF и JPG позволяет Microsoft Photo Editor, входящий в пакет программ Microsoft Office. Профессионалы используют гораздо более мощные графические пакеты, такие как Adobe PhotoShop и Corel Draw.

Рисунок в любом формате вставляется в документ HTML тагом следующего вида:
<IMG SRC="URL рисунка" HEIGHT="высота" BORDER="рамка" ALIGN="выравнивание" HSPACE="отступ по горизонтали" VSPACE="отступ по вертикали" ALT="текст">
Закрывать этот таг не нужно.

Опция SRC содержит абсолютный или относительный адрес рисунка, если рисунок не найден, на его месте выведется пустая рамка. При разработке сайта используются, как правило относительные адреса. Хотя SRC - единственная обязательная опция тага, указание всех остальных опций настоятельно рекомендуется.

Опции WIDTH и HEIGHT определяют ширину и высоту рисунка в пикселах (точках). Если ширина и высота не указаны, загрузка страницы замедляется и часто приводит к некрасивому эффекту "скачущего" текста на экране. Если указанные ширина и высота не соответствуют действительным размерам рисунка, при выводе он будет отмасштабирован, что также существенно замедляет загрузку (единственное допустимое исключение - уменьшение или увеличение при загрузке в 2 раза).

Значение опции BORDER также указывается в пикселах и определяет ширину рамки вокруг рисунка, являющегося гиперссылкой. Если рамка не нужна, значением этой опции следует сделать 0, а если рисунок не является ссылкой, опцию можно не указывать.

Опция ALIGN определяет размещение рисунка относительно текста, единственные понимаемые всеми браузерами значения - LEFT (слева) и RIGHT (справа). Опции HSPACE и VSPACE, указываемые в пикселах, определяют размер свободного места вокруг рисунка по горизонтали и вертикали. Рисунок не выглядит сливающимся с текстом при их значениях в пределах 5-15.

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

20) Фреймы

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

Документ, использующий фреймы, содержит только описание внешнего вида фреймов, которое выполняется в таге <frameset>...</frameset>, используемом вместо тага <body>. У тага <frameset> есть две главных опции - rows="список величин" и cols="список величин", описывающие, соответственно, строки и столбцы таблицы фреймов.

Строка "список величин" представляет собой разделенный запятыми перечень значений в пикселах, процентах или относительных величинах. Например, таг <frameset rows="100,240,140"> создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселов соответственно, <frameset cols="25%,75%"> создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера, а <frameset cols="*,2*"> - 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.

Эти способы можно использовать и совместно - например, <frameset cols="128,*"> указывает оставить 128 пикселов слева под первый фрейм, а все остальное пространство - под второй. При определении обоих атрибутов rows и cols, например, <frameset rows="*,2*" cols="*,2*"> получается сетка кадров.

Другие опции тага <frameset>:

border="ширина" - указывает ширину обрамления всех рамок для всех кадров, в пискелах;

frameborder=yes или frameborder=no - включает или выключает отображение обрамления кадров. В случае yes рамка имеет трехмерную форму, иначе она невидима, то есть имеет цвет фона окна по умолчанию. Некоторые браузеры "понимают" эту опцию только в виде frameborder=1 или frameborder=0, поэтому обычно указывают оба способа;

framespacing="ширина" - указать ширину промежутка между смежными кадрами в пискелах. Не действует в Netscape Navigator.

Внутри тага <frameset> находятся описания отдельных кадров, каждое в собственном таге <frame>, закрывать который не нужно. Число тагов <frame> должно быть равно числу кадров, определенных в таге <frameset>, при этом считается, что кадры описываются слева направо и сверху вниз.

Перечислим основные опции тага <frame>:

опция src="url" указывает URL исходного документа для данного кадра;

опция name="строка" указывает имя кадра. Это необходимо сделать, если предполагается ссылаться из одних кадров на другие;

опция scrolling="значение" управляет линейками прокрутки кадра. Значение может быть задано в виде yes (линейки есть всегда), no (никогда) или auto (если необходимо);

опция noresize запрещает изменять размеры кадра. Опция noresize, указанная для данного кадра, влияет также и на все кадры, смежные с ним;

опция frameborder может указываться также внутри тага <frame>, со всеми замечаниями, которые сделаны относительно нее. Указание этой опции в таге <frame> отменяет указание, сделанное в таге <frameset> для данного кадра и всех, смежных с ним;

опции magrinheight="ширина" и marginзадают размещение по верхней-нижней и боковым сторонам кадра областей свободного пространства, ширина которых указывается в пикселах.

После того, как таг <frameset> закрыт, можно использовать таг <noframes>...</noframes>, определяющий содержимое, которое будет выводиться браузерами, не поддерживающими кадры.

Для создания более сложных конфигураций кадров таги <frameset> могут вкладываться друг в друга - внутренний таг <frameset> может быть вложен вместо любого из тагов <frame>.

Пример документа с фреймами:

<html>

</frameset>

Извините, Ваш браузер не поддерживает кадры!

</noframes>

</html>

Здесь верхний кадр высотой 40 пикселов может служить, например, для вывода рекламы и связан с файлом reclama.html. Остальная часть окна разбита на 2 колонки. Левая колонка имеет ширину 128 пикселов и может быть предназначена для вывода меню (документ menu.html). Третий кадр занимает основную часть окна и предназначен для вывода информации (файл index.html).

Для создания ссылки из одного кадра в другой достаточно указать в таге ссылки опцию вида target="имя кадра". Например, для ссылки из кадра menu в кадр main достаточно написать в документе menu.html ссылку вида <a href="URL нового документа" target="main">...</a> При щелчке по этой ссылке содержимое правого кадра, то есть, документ index.html, будет заменено на новый документ.

При работе с кадрами можно также указывать опцию target в одном из видов _self (загрузить в тот же кадр, откуда делается ссылка), _parent (загрузить в родительский для данного кадр; если такого нет - результат действия аналогичен _self) или _top (загрузить в полное окно, разрушая все кадры).

⇐ Предыдущая 1 2 3 4 5 6 7 89

Познавательные статьи:

Организация работы процедурного кабинета

Статус республик в составе РФ

Понятие финансов, их функции и особенности

Сущность демографической политии

Последнее изменение этой страницы: 2024-06-27; просмотров: 43; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.217.21 (0.009 с.)