Форум » Правила и настройки » Как создать страницу при промощи языка html » Ответить

Как создать страницу при промощи языка html

Vаниль: Краткий курс создания web-страницы при помощи гипертекста

Ответов - 59, стр: 1 2 3 All

Vаниль: Шапка документа: <html> <HEAD> <title>названи вашей страници</title> <body> текст вашей страници</body> </HEAD> </html>

Vаниль: Заголовок HTML-документа Создается с помощью элемента HEAD, между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документа (см. структуру HTML-документа). Элементы, относящиеся к заголовку документа: - HEAD Определяет начало и конец заголовка документа - TITLE Определяет имя всего документа, которое отображается в заголовке окна браузера - BASE Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа - STYLE Используется для вставки в документ таблицы стилей CSS - LINK Описывает взаимосвязь документа с другими объектами - META Используется для вставки метаданных

Vаниль: Тег HEAD предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера HEAD находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Содержимое тега HEAD не отображается напрямую на веб-странице, за исключением тега TITLE устанавливающего заголовок окна веб-страницы. Внутри контейнера TITLE допускается размещать следующие элементы: BASE, BASEFONT, BGSOUND, LINK, META, SCRIPT, STYLE, TITLE. Пример 1. Использование тега HEAD <html> <head> <!-- Этот раздел предназначен для заголовка страницы и технической информации. --> </head> <body> <!-- А здесь надо размещать все, что хочется увидеть на странице. --> </body> </html> Пример 2. Использование тега HEAD <HTML> <!-- Начинаем заголовок... --> <HEAD> <title>Справочник по HTML</title> </HEAD> <!-- ...кончили. Дальше пошло тело документа --> <BODY> Текст документа </BODY> </HTML>

Vаниль: Тег TITLE Описание Определяет заголовок документа. Элемент TITLE не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег TITLE на документ и размещать его в контейнере HEAD. Синтаксис <head> <title>Заголовок</title> </head> Закрывающий тег Обязателен. Параметры Нет. Пример 1. Использование тега TITLE <html> <head> <title>htmlbook.ru - Как правильно писать заголовок страницы</title> <head> <body> ... </body> </html> Примечание Тег TITLE выполняет множество задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок страницы. По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница. Не стоит думать, что достаточно в документе указать логотип сайта и проигнорировать заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок также отображается на кнопках панели задач, поэтому можно легко ориентироваться, с каким сайтом в данный момент работать, а не перелистывать их по очереди. Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы недопустимые в имени файла (\ / : * ? " < > |), они будут проигнорированы или автоматически заменены другими дозволенными символами. При сохранении в разделе браузера «Избранное», адрес текущей страницы с ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список, как правило, хранится в виде отдельных файлов, к их именам также прилагается уже вышеописанное правило. В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечет больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей. Пример 2 <HEAD> <TITLE>Руководство по эксплуатации</TITLE> </HEAD> ...

Vаниль: тег BASE Атрибуты: HREF – определяет базовый адрес (URL) текущего документа. TARGET – определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме. Пример 1: <HEAD> <!-- Пусть браузер думает, что находится по адресу : --> <BASE HREF="http://www.igf.ru/other/index.html"> <TITLE>Руководство по эксплуатации</TITLE> </HEAD> ... <!-- А теперь создадим относительную ссылку на документ --> <!-- http://www.igf.ru/list.html --> <A HREF="../list.html">Список</A> ...

Vаниль: Тег STYLE Описание Тег STYLE применяется для определения стилей элементов веб-страницы. Допускается размещать STYLE в любом месте веб-страницы. Однако если в стилях идет описание селектора BODY и других важных эементов, то необходимо тег STYLE использовать внутри контейнера HEAD. Можно использовать более чем один тег STYLE. Некоторые старые браузеры не обрабатывают содержимое контейнера STYLE и выводят его на веб-страницу. Чтобы этого не произошло, заключите стили в комментарии HTML. Если вы делаете сайт под современные браузеры, то эту рекомендацию можно опустить, поскольку все популярные браузеры корректно работают со стилями. Синтаксис <head> <style type="text/css"> ... </style> </head> Закрывающий тег Обязателен. Параметры media — определяет устройство вывода, для работы с которым предназначена таблица стилей. type — сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили. Пример 1. Использование тега STYLE <html> <head> <style type="text/css"> H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366 } </style> </head> <body> <H1>Hello, world!</H1> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега STYLE Параметр MEDIA Описание Устанавливает устройство вывода, для которого предназначена таблица стилей. В идеале для каждого устройства — от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы. Но это в идеале, пока же браузеры поддерживают только вывод на принтер и экран монитора. Синтаксис <style media=all | print | screen>...</style> Аргументы all — cтиль, предназначенный для одновременного просмотра на мониторе и вывода на печать. print — cтиль для вывода на печать. screen — стиль для вывода на экран монитора. Аргументы чувствительны к регистру. Можно устанавливать сразу несколько значений, перечисляя их через запятую. Значение по умолчанию screen Пример 2. Стиль для печати документа <html> <head> <style type="text/css" media="screen"> .window { background: url(/images/bg.gif); border: 1px solid black; font-family: Arial; font-size: 90%; color: #fc0; padding: 10px } </style> <style type="text/css" media="print"> .window { border: 1px solid black; font-family: Arial; font-size: 90%; font-weight: bold; color: black; padding: 10px } </style> </head> <body> <div class=window> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> </body> </html> -------------------------------------------------------------------------------- Параметр TYPE Описание Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого параметра, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера STYLE. Синтаксис <style type="text/css">...</style> Аргументы В качестве значения используется MIME-тип — text/css. Значение по умолчанию text/css Пример 3. Установка типа данных <html> <head> <style type="text/css"> a:link { color: #003366 } a:visited { color: #660066 } a:hover { color: #800000 } a:active { color: #FF0000 } </style> </head> <body> <a href=link1.html>Lorem ipsum dolor sit amet</a> </body> </html> Пример 4: <HEAD> <TITLE>Пример использования таблицы стилей</TITLE> <!-- Втыкаем табличку стилей --> <STYLE TYPE="text/css" TITLE="Cool table"> <!-- A {text-decoration : none;} P {color : blue; font-size : 12pt; font-family : Arial;} H1 {color : red; font-size : 18pt;} --> </STYLE> <!-- ... кончили втыкать --> </HEAD>

Vаниль: Тег LINK Описание Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега A, тег LINK размещается всегда внутри контейнера HEAD и не создает ссылку. Синтаксис <head> <link href=...> </head> Закрывающий тег Не требуется. Параметры href — путь к связываемому файлу. rel — определяет отношения между текущим документом и файлом, на который делается ссылка. type — MIME-тип данных подключаемого файла. Пример 1. Использование тега LINK <html> <head> <link rel="stylesheet" type="text/css" href="ie.css"> <link rel="stylesheet" type="text/css" href="nc.css"> </head> <body> ... </body> </html> -------------------------------------------------------------------------------- Описание параметров тега LINK Параметр HREF Описание Путь к файлу, на который делается ссылка (URL). Браузер Netscape 4 вместо параметра href использует src, если вы ориентируете сайт на этот браузер, добавляйте оба параметра к тегу LINK. Параметр href является обязательным. Синтаксис <link href=URL> Аргументы В качестве значения принимается полный или относительный путь к файлу. Значение по умолчанию Нет. Пример 2. Путь к файлу <html> <head> <link href="http://www.htmlbook.ru/ie/rus/x3.css"> </head> <body> ... </body> </html> -------------------------------------------------------------------------------- Параметр REL Описание Параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ. HTML 4 различает следующие значения параметра rel: alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, index, next, prev, section, start, stylesheet, subsection. Браузеры, как правило, из этого списка понимают только параметр stylesheet. Синтаксис <link rel=...> Аргументы stylesheet — определяет, что подключаемый файл хранит таблицу стилей (CSS). Значение по умолчанию Нет. Пример 3. Ссылка на файл CSS <html> <head> <link rel="stylesheet" type="text/css" href="hb.css"> </head> <body> ... </body> </html> -------------------------------------------------------------------------------- Параметр TYPE Описание Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS. Синтаксис <link type="MIME-тип"> Аргументы Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css. Значение по умолчанию Нет. Пример 4. Установка типа данных <html> <head> <link rel="stylesheet" type="text/css" href="/styles/htmlbook.css"> </head> <body> ... </body> </html> Жмите! Aвтор: Vladimir Gorodulin LINK (HTML 2.0) – Link Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK. Атрибуты: HREF – определяет URL объекта. REL – определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения: stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу (см. также элемент STYLE) home – указывает на заглавную страницу вашего сайта toc, contents – указывают на файл, содержащий оглавление данного документа. index – указывает на файл, содержащий информацию для индексного поиска по текущему документу. glossary – указывает на файл, содержащий перечень терминов, относящихся к текущему документу. copyright – указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п. up, parent – указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта). child – указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта). next – указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря). previous – указывает на предыдущую страницу в последовательности документов. last, end – указывает на последнюю страницу в последовательности документов. first – указывает на первую страницу в последовательности документов. help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту). TYPE – определяет MIME-тип для объекта, указанного в атрибуте HREF. Пример 5: <HEAD> <TITLE>Элемент DIV</TITLE> <LINK REL="HOME" TITLE="HTML-справочник" HREF="index.html"> <LINK REL="UP" TITLE="Текстовые блоки" HREF="textblocks.html"> <LINK REL="PREVIOUS" TITLE="Элемент P" HREF="p.html"> <LINK REL="NEXT" TITLE="Элемент ADDRESS" HREF="address.html"> </HEAD> Пример 6: <HEAD> <TITLE>Полдневье</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="deco1.css"> </HEAD>

Vаниль: Тег META Описание META определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере HEAD. Как правило, параметры любого метатега сводятся к парам имя/значение, которые определяются аргументами content, name или http-equiv. Синтаксис <head> <meta content=...> </head> Закрывающий тег Не требуется. Параметры content — устанавливает значение параметра, заданного с помощью name или http-equiv. http-equiv — предназначен для конвертирования метатега в заголовок HTTP. name — имя метатега, также косвенно устанавливает его предназначение. Пример 1. Использование тега META <html> <head> <meta http-equiv="Content-Language" content="ru"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> </head> <body> ... </body> </html> -------------------------------------------------------------------------------- Описание параметров тега META Параметр CONTENT Описание content устанавливает значение параметра, заданного с помощью name или http-equiv. Параметр content может содержать более одного аргумента, в этом случае аргументы разделяются запятыми или точкой с запятой. Синтаксис <meta content="..."> Аргументы Любая строка символов, которую надо взять в одинарные или двойные кавычки. Значение по умолчанию Нет. Пример 2. Изменение кодировки веб-страницы <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> ... </body> </html> -------------------------------------------------------------------------------- Параметр HTTP-EQUIV Описание Браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера. Синтаксис <meta http-equiv="..."> Аргументы Любой подходящий идентификатор. Ниже приведены некоторые допустимые аргументы параметра http-equiv. Content-Type — тип кодировки документа. expires — устанавливает дату и время, после которой информация в документе будет считаться устаревшей. pragma — способ кэширования документа. refresh — загрузить другой документ в текущее окно браузера. Значение по умолчанию Нет. Пример 3. Кэширование документа до определенного срока <html> <head> <meta http-equiv="expires" content="Sun, 01 Jan 2006 07:01:00 GMT"> </head> <body> ... </body> </html> -------------------------------------------------------------------------------- Параметр NAME Описание Устанавливает идентификатор метатега для пары имя/значение. Одновременно использовать параметры name и http-equiv не допускается. Синтаксис <meta name=...> Аргументы Любой подходящий идентификатор. Ниже приведены некоторые допустимые аргументы параметра name. author — имя автора документа. description — описание текущего документа. keywords — список ключевых слов, встречающихся на странице. Значение по умолчанию Нет. Пример 4. Ключевые слова <html> <head> <meta name="keywords" content="HTML, META, метатег, тег, поисковая система"> </head> <body> ... </body> </html> Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега. Атрибуты: NAME – определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере. HTTP-EQUIV – определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке. CONTENT – присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV). Пример 5: <HEAD> ... <META HTTP-EQUIV="Expires" CONTENT="Sat, 26 Jun 1999 17:38:15 GMT"> <META NAME="GENERATOR" CONTENT="Greenback"> <META NAME="Publisher-Email" CONTENT="green@igf.ru"> <META NAME="Publisher-URL" CONTENT="Idea GraFix – http://www.igf.ru/"> <META NAME="Keywords" CONTENT="OpenGL,3D,graphics,3Dfx,Permedia,Diamond,графика"> <META NAME="Description" CONTENT="Российский сайт, полностью посвященный 3D-графике, ее разработке и использованию."> ... </HEAD>

Vаниль: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Не забывайте о строке "декларация" каждый html документ должен начинатся с этого............

Vаниль: Жмите! Aвтор: Vladimir Gorodulin Фреймы Фреймы (frames) используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню. Тем не менее, большинство разработчиков избегают использования фреймов, к чему, поверьте, имеют довольно веские основания. Старайтесь использовать фреймы только тогда, когда это действительно необходимо. Элементы для создания фреймов и работы с ними: - FRAMESET Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице - FRAME Определяет фрейм и его свойства внутри FRAMESET-структуры - NOFRAMES Определяет что показывать, если браузер не поддерживает фреймы Примечания: Внимательно следите, чтобы все вышеперечисленные элементы находились вне элемента BODY. Фреймы к телу документа никоим образом не относятся

Vаниль: FRAMESET Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется). Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME. Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов. Атрибуты: ROWS – определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров: • в процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%"; • в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%; • в пикселах. Например: "75,*"; Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй – в 40 пикселов, а третий займет всю оставшуюся площадь. COLS – определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS. BORDER – определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape; FRAMEBORDER – определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения: Yes – отображать рамки; No или 0 – не отображать рамки; Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER. FRAMESPACING – определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок. Примечание: Обратите внимание на то, что FRAMESET-структура создаётся вместо элемента BODY. FRAMESET-структура, расположенная в заголовке (внутри элемента HEAD) считается ошибкой.

Vаниль: FRAME Определяет фрейм и его свойства внутри FRAMESET-структуры. (см. элемент FRAMESET) Атрибуты: SRC – обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме. NAME – определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов. MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа. MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа. SCROLLING – определяет наличие линеек прокрутки содержимого фрейма. Возможные значения: yes – отображать линейки прокрутки. no – не отображать линейки прокрутки. auto – отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме). NORESIZE – не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения. FRAMEBORDER – определяет наличие рамок у фрейма. Возможные значения: yes – отображать рамки; no или 0 – не отображать рамки; Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET. Пример (файл index.html): ... <FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="265,*"> <FRAME SRC="frame1.html" NAME="page"> <FRAMESET ROWS="165,*"> <FRAME SRC="frame2.html" NAME="menu1" MARGINWIDTH="0"> <FRAME SRC="frame3.html" NAME="menu2" MARGINWIDTH="0"> </FRAMESET> <NOFRAMES>Ваш браузер не поддерживает фреймы</NOFRAMES> </FRAMESET> <BODY> </BODY> ... В результате окно браузера разделится на три фрейма, как показано ниже. Причем frame1.html будет иметь ширину 265 пикселов, а frame2.html – высоту 165.

Vаниль: NOFRAMES Все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет атрибутов и должен находиться внутри элемента FRAMESET. Пример: <FRAMESET ROWS="*,*"> <NOFRAMES>Ваш браузер не поддерживает фреймы. Обыдно, да?</NOFRAMES> <FRAME SRC="frame1.html"> <FRAME SRC="frame2.html"> </FRAMESET> Тег IFRAME Описание Тег IFRAME создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы. Тег IFRAME является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и <iframe>. Синтаксис <iframe ...>... </iframe> Закрывающий тег Обязателен. Параметры align — определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом. frameborder — отображать границу вокруг фрейма или нет. height — высота фрейма. hspace — горизонтальный отступ от фрейма до окружающего контента. name — имя фрейма. scrolling — способ отображения полосы прокрутки во фрейме. src — путь к файлу, содержимое которого будет загружаться во фрейм. vspace — вертикальный отступ от фрейма до окружающего контента. width — ширина фрейма. Пример 1. Использование тега IFRAME <html> <body> <iframe src=banner.html width=468 height=60 hspace=10 vspace=10 align=center> Ваш браузер не поддерживает плавающие фреймы! </iframe> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега IFRAME Параметр ALIGN Описание Для плавающего фрейма можно указать его положение на веб-странице или задать способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания задается параметром align тега iframe. Синтаксис <iframe align=absmiddle | baseline | bottom | left | middle | right | texttop | top>...</iframe> Аргументы В таблице 1 перечислены возможные значение параметра align и результат его использования. Таблица 1. Использование значений параметра align Код HTML Описание <iframe src=sample.gif align=absmiddle> Выравнивание середины фрейма по середине текущей строки. <iframe src=sample.gif align=baseline> Выравнивание фрейма по базовой линии текущей строки. <iframe src=sample.gif align=bottom> Выравнивание нижней границы фрейма по окружающему тексту. <iframe src=sample.gif align=left> Выравнивает фрейм по левому краю окна. <iframe src=sample.gif align=middle> Выравнивание середины фрейма по базовой линии текущей строки. <iframe src=sample.gif align=right> Выравнивает фрейм по правому краю окна. <iframe src=sample.gif align=texttop> Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки. <iframe src=sample.gif align=top> Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки. Наиболее популярные параметры — left и right, создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге iframe добавить параметр hspace и vspace, задающих расстояние до текста в пикселах. Значение по умолчанию bottom Пример 2. Выравнивание плавающего фрейма <html> <body> <iframe src=square.html width=220 height=20 align=right></iframe> Lorem ipsum dolor sit amet, consectetuer adipiscing elit... </body> </html> -------------------------------------------------------------------------------- Параметр FRAMEBORDER Описание По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется параметр frameborder. Чтобы показать простую рамку вокруг фрейма воспользуйтесь стилями. Синтаксис <iframe frameborder=yes | no>...</iframe> <iframe frameborder=0 | 1> ...</iframe> Аргументы yes или 1 — отображает рамку вокруг фрейма. no или 0 — скрывает рамку вокруг фрейма. Значение по умолчанию 1 Пример 3. Убираем рамку вокруг фрейма <html> <body> <iframe src=sample.html width=340 height=50 frameborder=0 style="border: 2px solid black"></iframe> </body> </html> -------------------------------------------------------------------------------- Параметр HEIGHT и WIDTH Описание Для изменения размеров фрейма средствами HTML предусмотрены параметры width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится тег iframe. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=100% означает, что фрейм будет занимать всю ширину веб-страницы. Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300 х 150 пикселов. Синтаксис <iframe height=высота>...</iframe> <iframe width=ширина>...</iframe> Аргументы Любое целое положительное число в пикселах или процентах. Значение по умолчанию width — 300 пикселов, height — 150 пикселов. Пример 4. Изменение размеров фрейма <html> <body> <iframe src=sample.html width=150 height=150></iframe> </body> </html> -------------------------------------------------------------------------------- Параметр HSPACE и VSPACE Описание Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали с помощью, соответственно, параметров hspace и vspace. Особенно это актуально при обтекании содержимого фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство. Синтаксис <iframe hspace=поля по горизонтали>...</iframe> <iframe vspace=поля по вертикали>...</iframe> Аргументы Любое целое положительное число в пикселах. Значение по умолчанию 0 Пример 5. Отступы вокруг фрейма <html> <body> <iframe src=sample.html width=150 height=150 hspace=5 vspace=7></iframe> </body> </html> -------------------------------------------------------------------------------- Параметр NAME Описание В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name. В этом случае при создании ссылки у тега A требуется указать параметр target, в качестве значения которого выступает имя фрейма. Синтаксис <iframe name=имя>...</iframe> Аргументы Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в параметре name. Значение по умолчанию Нет. Пример 6. Использование имени фрейма <html> <body> <iframe name=hero src=0.html width=600 height=100 hspace=5 vspace=5 align=center> </iframe> <p><a href=1.html target=hero>Чебурашка</a><br> <a href=2.html target=hero>Крокодил Гена</a><br> <a href=3.html target=hero>Шапокляк</a> </body> </html> -------------------------------------------------------------------------------- Параметр SCROLLING Описание Если содержимое фрейма не помещается в отведенные размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется параметр scrolling. Синтаксис <iframe scrolling=auto | no | yes>...</iframe> Аргументы auto — полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть. no — запрещает отображение полос прокрутки. yes — всегда вызывает появление полос прокрутки, независимо от объема информации. Значение по умолчанию auto Пример 7. Скрытие полос прокрутки во фрейме <html> <body> <iframe src=sample.html width=150 height=450 scrolling=no></iframe> </body> </html> -------------------------------------------------------------------------------- Параметр SRC Описание Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение. Синтаксис <iframe src=URL>...</iframe> Аргументы В качестве значения принимается полный или относительный путь к файлу. Значение по умолчанию Нет. Пример 8. Путь к файлу <html> <body> <iframe src=/source/sample.html width=450 height=450> </body> </html>

Vаниль: Скрипты Скрипты – это включения в HTML не-html кода, дополняющего его возможности. С помощью сприптов вы можете создавать анимированные кнопки меню, осуществлять автоматическое перенаправление на другие документы и т.д. Большинство скриптов пишется на языке JavaScript. К сожалению, в этом справочнике вы не найдете описания языка JavaScript, но для его изучения можете воспользоваться одним из сайтов, представленных в разделе ссылок на другие материалы, а также почитать наш форум, самый полный в российском Интернете. Элементы для работы со скриптами: - SCRIPT Вставляет скрипт в HTML-документ - NOSCRIPT Определяет текст, который будет отображен, если браузер не поддерживает скрипты

Vаниль: SCRIPT Вставляет скрипт в документ. Сам текст скрипта либо располагается между начальным и конечным тегами, либо определяется как URL файла, содержащего скрипт, в атрибуте SRC. Атрибуты: LANGUAGE – определяет язык, на котором написан скрипт, например, JavaScript. SRC – определяет URL скрипта. Пример 1: <SCRIPT LANGUAGE="JavaScript" SRC="http://www.igf.ru/js/script.js"> </SCRIPT> В целях совместимости со старыми браузерами, содержимое элемента SCRIPT следует заключать между <!-- и -->, т.е. оформлять его как html-комментарий: Пример 2: <SCRIPT LANGUAGE="JavaScript"> <!-- window.location="http://www.art-russia.com"; // --> </SCRIPT> Где размещать скрипт: Элемент SCRIPT можно располагать либо в заголовке (внутри элемента HEAD) либо в теле документа (внутри BODY).

Vаниль: NOSCRIPT Определяет текст, который будет отображен, если браузер по какой-либо причине не работает со скриптами. Пример: <SCRIPT LANGUAGE="JavaScript"> <NOSCRIPT> Пора менять браузер... </NOSCRIPT> <!-- window.location="http://www.igf.ru"; --> </SCRIPT>

Vаниль: Навигационные карты Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, офомленные в виде активных областей на изображении. Применить созданную карту к изображению можно вызвав ее по имени с помощью атрибута USEMAP элемента IMG. Пример: <!-- Создаем карту с именем ImageMap: --> <MAP NAME="ImageMap"> <AREA HREF="something.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Левая половинка"> <AREA HREF="anything.html" SHAPE="rect" COORDS="71,0,140,140" ALT="Правая половинка"> </MAP> <!-- Создали. --> <BODY> <!-- Привинчиваем ее к изображению --> <IMG src="/img/block.gif" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0"> ... В данном примере мы создали квадратное изображение размером 140x140 пикселов, левая часть которого является ссылкой на файл something.html, а правая – на файл anything.html. Примечание: Для создания карт, обрабатываемых на сервере, используется атрибут ISMAP элемента IMG. Мы их сознательно не рассматриваем, ибо механизм обработки карт на удаленной машине осуществляется с помощью скриптов и не имеет к HTML никакого отношения.

Vаниль: MAP оздает новую навигационную карту. Между начальным и конечным тегами содержит один или несколько элементов AREA, определяющих навигационные области карты. Атрибуты: NAME – единственный и обязательный атрибут. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Пример: <!-- Создаем карту Map1 : --> <MAP NAME="Map1"> <!-- Задаем области --> <AREA HREF="...> <AREA HREF="...> ... </MAP> <!-- Карта готова. Применим её к картинке: --> <IMG SRC="image.gif" USEMAP="#Map1" WIDTH=200 HEIGHT=100 ALT="Картинка">

Vаниль: AREA Создает область карты, определенной с помощью элемента MAP. Элемент должен располагаться между начальным и конечным тегами элемента MAP. Не имеет конечного тега. Атрибуты: SHAPE – определяет форму навигационной области. Возможные значения: rect – прямоугольник; circle – окружность; poly – многоугольник. В зависимости от выбранной формы меняется способ задания ее координат в атрибуте COORDS. COORDS – определяет координаты навигационной области на карте. Используется в паре с атрибутом SHAPE. Способы задания координат для разных типов областей: SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y"; SHAPE="circle" COORDS="центр x, центр y, радиус"; SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,..."; HREF – определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL). TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезевированных имен, подробно описанных в атрибуте TARGET элемента A. NOHREF – определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего. ALT – определяет альтернативный текст-подсказку для данной области. Пример: <!-- Создаем хитрую карту с круглой дыркой посередине --> <MAP NAME="map1"> <AREA NOHREF SHAPE="circle" COORDS="80,70,40"> <AREA HREF="guide.html" ALT="Путеводитель" SHAPE="rect" COORDS="0,0,167,140"> </MAP> ... <!-- Применяем ее к картинке --> <IMG src="/img/logo.gif" WIDTH="167" HEIGHT="140" BORDER="0" ALT="Путеводитель" USEMAP="#map1"> Примечания: В последовательности из нескольких элементов AREA наибольший приоритет имеют те, которые были определены первыми. Они перекрывают области, определенные позже. Именно поэтому в приведенном выше примере сначала создается пассивная область (отверстие) и лишь потом – активная со ссылкой. Старайтесь всегда указывать атрибут ALT. Пользователи, работающие в текстовом режиме (а таких немало!), скажут вам спасибо.

Vаниль: .........закончили изучать "шапку документа"....... скоро приступлю к написанию "тела документа"



полная версия страницы