- •Терминология
- •Шаблон Web-страницы (пример-заготовка готовой страницы)
- •Специальные символы
- •Управление цветом
- •Горизонтальная линия в качестве прямоугольника:
- •Устаревшие и нестандартные элементы
- •Bgsound
- •Немного о способе применения атрибутов
- •Charset
- •Классы (class)
- •Универсальные классы(атрибут id)
- •Classid
- •Longdesc (long description)
- •Атрибуты, применяемые с элементом frame
- •Организация перехода по фреймам
- •Классы (class)
- •Универсальные классы(атрибут id)
- •Объекты и формы
- •Атрибуты, применяемые в объектах
- •Общие атрибуты форм
- •Пример формы
- •Находится в стадии разработки
- •Атрибуты событий
- •Column-span
- •Border-collapse
- •Background-attachment
- •Background-position
- •Play-during
- •Azimuth
- •Elevation
- •Свойства интерфейса cursor
- •Color, background-color
Атрибуты, применяемые с элементом frame
Кроме стандартных атрибутов, элемент имеет ряд собственных, которые усовершенствуют внешний вид окна страницы. Внутри элемента FRAME должны содержаться ссылки на файлы-части страницы. Кроме того, каждый элемент FRAME полезно снабжать именем, при помощи атрибута name. Это имя впоследствии можно использовать в гиперссылках. Результат может быть такой. <FRAME src="имя файла.htm" name="имя фрейма">
После загрузки страницы пользователь может передвигать границы фреймов. С помощью атрибута noresize вы можете запретить пользователю передвигать границы окон.
Вы можете управлять полосами прокрутки с помощью атрибута scrolling, который может принимать значения: scrolling="yes" – полоса прокрутки будет автоматически включена, независимо от её необходимости. scrolling="no" – этот атрибут запрещает появление полосы прокрутки, даже если она требуется. scrolling="auto" – (значение по умолчанию) атрибут передает все полномочия появления и исчезновения полосы прокрутки системе.
Существует атрибут longdesc, который придает фрейму описание.
Атрибутом frameborder – вы можете создать рамку вокруг фрейма. frameborder=1 – рамка включена; frameborder=0 – рамки нет.
Можно задать отступы от верхнего и нижнего краев окна при помощи атрибута: marginheight (значение указывается в пикселях). marinheight="100"
Также можно регулировать отступы справа и слева, с помощью атрибута marinwidth(значение указывается в пикселях.) marinwidth="100"
<NOFRAMES></noframes>
Этот элемент специально предусмотрен для случаев, когда броузер не поддерживает фреймы. В этом случае надо предупредить и переадресовать клиента к другой старицы (без фреймов). Этот код выглядит следующим образом: <HTML> <HEAD> <TITLE>Заголовок </title> </head> <FRAMESET cols="nn%, mm%"> <FRAME src="page1.htm"> <FRAME src="page2.htm"> <NOFRAMES> <P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p> <P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без фреймов</a></p> </noframes> </frameset> </html>
Естественно, что браузеры, поддерживающие фреймы не будут воспроизводить эту надпись.
Организация перехода по фреймам
Файл Frame1.htm <HTML> <HEAD> <TITLE>Заголовок для фреймов</title> </head> <FRAMESET frameborder=1 framespacing=5 cols="160, *"> <FRAME src="m1.htm" name="menu01" noresize > <FRAME src="right1.htm" name="info01"> <NOFRAMES> <P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p> <P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без фреймов</a></p> </noframes> </frameset> </html>
Файл M1.htm <HTML> <HEAD> <TITLE>Левый фрейм</title> </head> <BODY text="black" bgcolor="gold" link=" green" vlink="purple" alink="red"> <H3>Меню</h3> <HR> <a target="info01" href="right1.htm"> Правый 1</a> <a target="info01"href="right2.htm"> Правый 2</a> </body> </html>
Файл Right1.htm <HTML> <HEAD> <TITLE>Правый фрейм</title> </head> <BODY text="black" bgcolor="#9CB3BE" link="green" vlink="purple" alink="red"> <H2>Правый фрейм № 1</h2> <a href="right2.htm">Следующая страница</a> <hr> </body> </html>
Файл Right2.htm <HTML> <HEAD> <TITLE>Правый фрейм</title> </head> <BODY text="black" bgcolor="pink" link="green" vlink=" purple" alink="red"> <H2>Правый фрейм № 2</h2> <a href="right1.htm">Предыдущая страница</a> <hr> </body> </html>
Заметьте, что имена выделенные красным ОБЯЗАТЕЛЬНО должны совпадать, иначе страница, вызываемая по ссылке будет открываться в новом окне!!!
Теперь давайте разберем организацию ссылок. Первый файл: Frame1.htm не содержит информации для отображения на странице, но он задает разбиение на фреймы страницы(размеры областей, документы содержания). Здесь важно, чтобы каждый фрейм содержал атрибут name name=" info01"
Страницы, показываемые внутри фрейма могут быть разными, а имя не меняется и остается постоянным и используется в гиперссылках.
Левый фрейм(файл M1.htm) содержит страницу -меню, с помощью которой можно легко совершать серфинг по странице. Этот фрейм содержит две ссылки, но их может быть гораздо больше. Он более узкий, нежели правый.
Заметьте, что заголовок взят из файла Frame1.htm. Это единственная информация из этого файла, которую мы увидим в окне браузера. А теги TITLE из других страниц скрыты.
В принципе файлы Right1.htm и Right2.htm служат для размещения какой-либо информации. Также в них можно разместить разные ссылки возвращения назад и дальше(для удобства).
В примере вы можете видеть два вида ссылок: в меню и на странице.
Атрибут target нужен для определения окна, в котором откроется объект. Атрибут target имеет несколько значений:
_parent -заставляет браузер открыть ссылку, заменив содержимое текущего окна, но не фрейма!
_self -как будто атрибута и нет, то есть страница открывается внутри текущего фрейма;
_top -то же, что и parent;
_blank -браузер открывает ссылку в новом окне.
Употребляется атрибут по следующей схеме:
<a target_blank href="ссылка">Текст ссылки</a>
Запомните, что по умолчанию, браузер открывает ссылку (без атрибута target) в текущем фрейме!
<IFRAME></iframe>
Шаблон для создания такого файла выглядит следующим образом: <IFRAME src="имя_файла.htm" width="nnn" height="mmm"> <P>Для просмотра этой страницы нужен броузер, поддерживающий фреймы!</p> <P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без фреймов</a></p> </iframe>
Этот элемент имеет ряд атрибутов, например height и width, frame, scrolling, target и др. атрибуты фреймов
Допускается использование стандартных атрибутов: id, class, title, longdesc, style, align.
Таблицы Стилей
Таблицы стилей(style sheets) являются одной из самых интересных и красивых нововведений HTML 4. Они позволяют изменять свойства разных элементов в соответствии с желаниями разработчика.
Таблицы стилей применяют по принципу: Элемент.имя_стиля { свойство1: значение; свойство2: значение; ... }
В конечном счете мы имеем набор свойств для выбранного элемента. Так мы значительно расширяем возможности HTML. Спецификой применения стилей является то, что при присвоении стиля элементу, выделяется все содержимое начального и конечного тегов! Например, присвоив стиль элементу BODY, он будет распространяться на всю Web - страницу. В соответствии с синтаксисом HTML, автор должен включить в заголовок соответствующее определение:
<META http-equiv="Content-Style-Type" content="text/css">
Таким образом браузер получит информацию о применении стилей
Нужно отметить, что есть другие способы определения свойств элементов, например, JavaScript, VBScript и т.д.
Стили можно применять, как атрибуты.
<STYLE></style>
Элемент STYLE позволяет задать(изменить) свойства одноименных элементов, например:
<STYLE type="text/css"> H1 {border-width: 1; border: groove; text-aligh: center; color: green} H2 {color: maroon; font-style: italic} </style>
Как мы видим, здесь немного расширены возможности элемента заголовков. Для строки H1 {border-width: 1; border: groove; text-align: center; color: green} Ширина рамки, сама рамка, выравнивание текста и цвет текста, соответственно. Для строки H2 {color: maroon; font-style: italic} выбран цвет заголовка и курсив, соответственно.
Внимание! Если вы решили задать одинаковые значения нескольким элементам сразу, то не надо писать много строк, указывая каждому элементу общие значения, а просто сделайте пробел между элементами; браузер должен понять, что элементы имеют одинаковые атрибуты.