Форум » Правила и настройки » Как создать страницу при промощи языка 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аниль: .........закончили изучать "шапку документа"....... скоро приступлю к написанию "тела документа"

Мышонок: Ух ты, мы теперь не только актерскому мастерству учимся, но и созданию сайтов

Vаниль: Мышонок Я еще скоро про фотошоп темку сделаю.....

Vаниль: Тело документа Создается с помощью элемента BODY. Именно в теле документа содержится все то, что мы видим на странице. А на странице мы обычно видим: * Текст, блоки текста (причем текста форматированного) * Гиперссылки * Разнообразные списки * Таблицы * Всяческие объекты, картинки * Заполняемые формы Примечания: "Бестелесных" документов не бывает. Документ без тела будет похож на одинокую голову профессора Доуэля (см. структуру HTML=документа). Документ может иметь несколько "тел" – фреймов. В этом случае тело вместе со всем его содержимым удаляется и вместо него вставляется FRAMESET.

Vаниль: BODY Указывает начало и конец тела HTML-документа. Между начальным и конечным тегами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза. Атрибуты: MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape. TOPMARGIN – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer. MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape. LEFTMARGIN – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer. BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR – определяет цвет фона документа. TEXT – определяет цвет текста в документе. LINK – определяет цвет гиперссылок в документе. ALINK – определяет цвет подсветки гиперссылок в момент нажатия. VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели. Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Пример: <HTML> <BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050" MARGINHEIGHT="30" TOPMARGIN="30" LEFTMARGIN="40" MARGINWIDTH="40"> ... Текст документа. ... </BODY> </HTML> Примечания: При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно атрибуты MARGINWIDTH/MARGINHEIGHT и TOPMARGIN/LEFTMARGIN как показано в примере. Всегда указывайте атрибуты BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих атрибутов не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows. А теперь представьте, что будет, если пользователь использует нестандартную раскраску Windows, где все цвета инвертированы? То-то. Некрасиво получится. Описание Элемент BODY предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д. Тег BODY также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство параметров до сих пор поддерживается разными браузерами. Часто тег BODY используется для размещения обработчика событий, например, onLoad, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм. Открывающий и закрывающий теги BODY на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа. Синтаксис <body> ... </body> Закрывающий тег Не обязателен. Параметры alink — устанавливает цвет активной ссылки. background — задает фоновый рисунок на веб-странице. bgcolor — цвет фона веб-страницы. bgproperties — определяет, прокручивать фон совместно с текстом или нет. bottommargin — отступ от нижнего края окна браузера до контента. leftmargin — отступ по горизонтали от края окна браузера до контента. link — цвет ссылок. scroll — устанавливает, отображать полосы прокрутки или нет. text — цвет текста в документе. topmargin — отступ от верхнего края окна браузера до контента. vlink — цвет посещенных ссылок. Пример 1. Использование тега BODY <html> <body onLoad="alert('Документ загружен')" text=navy> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега BODY Параметр ALINK Описание Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры. Синтаксис <body alink=цвет>...</body> Аргументы Значение цвета можно задавать двумя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Значение по умолчанию Совпадает с цветом ссылки. Аналог CSS BODY:active { color: цвет } Пример 2. Изменение цвета активной ссылки <html> <body alink=orange> ... </body> </html> -------------------------------------------------------------------------------- Параметр BACKGROUND Описание Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей. Синтаксис <body background=URL>...</body> Аргументы Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь. Значение по умолчанию Нет. Аналог CSS BODY { background: url('путь к файлу') } Пример 3. Установка фонового рисунка на веб-странице <html> <body background=/images/bgred.gif> ... </body> </html> -------------------------------------------------------------------------------- Параметр BGCOLOR Описание Устанавливает цвет фона веб-страницы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку Синтаксис <body bgcolor=цвет>...</body> Аргументы См. параметр ALINK. Значение по умолчанию Зависит от браузера и его версии, но обычно используется белый цвет фона. Аналог CSS BODY { background: цвет } Пример 4. Установка цвета фона веб-страницы <html> <body bgcolor=#A0BEC4> ... </body> </html> -------------------------------------------------------------------------------- Параметр BGPROPERTIES Описание По умолчанию фоновый рисунок прокручивается совместно с содержанием веб-страницы. Используя параметр bgproperties можно зафиксировать фон на одном месте и, таким образом, заставить прокручиваться только контент. Подобное качество веб-страницы редко применяется для сайтов, поэтому для пользователей может показаться странным и непривычным. Синтаксис <body bgproperties=fixed>...</body> Аргументы Существует только один параметр fixed, который фиксирует фон. Если требуется убрать эту возможность, удалите параметр bgproperties у тега BODY или установите у него пустое значение — "". Значение по умолчанию Нет. Аналог CSS BODY { background-attachment: fixed | scroll } Пример 5. Фиксирование фона <html> <body background=images/bbking.jpg bgproperties=fixed> ... </body> </html> Примечание Не все браузеры поддерживают этот параметр, например, Netscape его игнорирует. Замечено, что при установке фонового рисунка на веб-странице через стили, параметр bgproperies перестает работать. -------------------------------------------------------------------------------- Параметр LEFTMARGIN Описание Определяет отступ от левого и правого края окна браузера до контента веб-страницы. Синтаксис <body leftmargin=число>...</body> Аргументы Целое положительное число, которое устанавливает отступ в пикселях. Значение по умолчанию 10 пикселов для Windows и 8 пикселов для Macintosh. Аналог CSS BODY { margin: число } Пример 6. Изменение отступа слева <html> <body leftmargin=0> ... </body> </html> Примечание Браузер Netscape не понимает параметр leftmargin, для установки отступов в нем используются параметры marginwidth — отступы по горизонтали и marginheight — отступы по вертикали. Для задания отступов от правого, нижнего и верхнего края применяются, соответственно, параметры rightmargin, bottommargin и topmargin. -------------------------------------------------------------------------------- Параметр LINK Описание Устанавливает цвет не посещенных ссылок. Синтаксис <body link=цвет>...</body> Аргументы См. параметр ALINK. Значение по умолчанию #0000FF Аналог CSS BODY:link { color: цвет } Пример 7. Установка цвета ссылок <html> <body link=#003366> ... </body> </html> -------------------------------------------------------------------------------- Параметр SCROLL Описание Параметр scroll управляет присутствием полос прокрутки в окне браузера, когда содержание веб-страницы превышает размер текущего окна. Этот параметр работает только в браузере Internet Explorer. Синтаксис <body scroll=yes | no>...</body> Аргументы yes — отображает полосы прокрутки. no — запрещает показ полос прокрутки в окне. Значение по умолчанию yes Аналог CSS BODY { overflow: hidden } Пример 8. Сокрытие полосы прокрутки <html> <body scroll=no> ... </body> </html> -------------------------------------------------------------------------------- Параметр TEXT Описание Устанавливает цвет текста, используемого на веб-странице по умолчанию. Цвета отдельных элементов можно легко изменять с помощью стилей. Синтаксис <body text=цвет>...</body> Аргументы См. параметр ALINK. Значение по умолчанию #000000 Аналог CSS BODY { color: цвет } Пример 9. Изменение цвета текста <html> <body text=maroon> ... </body> </html> -------------------------------------------------------------------------------- Параметр VLINK Описание Определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал». Синтаксис <body vlink=цвет>...</body> Аргументы См. параметр ALINK. Значение по умолчанию #551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh). Аналог CSS BODY:visited { color: цвет } Пример 10. Установка цвета посещенных ссылок <html> <body vlink=#660066> ... </body> </html>

Vаниль: Гиперссылки Ссылки на другие документы в HTML создаются либо с помощью элемента A, либо с помощью навигационных карт. Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения.

Vаниль: Тег A Описание Тег A является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Синтаксис <a href=URL>...</a> <a name=идентификатор>...</a> Закрывающий тег Обязателен. Параметры href — задает адрес документа, на который следует перейти. name — устанавливает имя якоря внутри документа. target — имя окна или фрейма, куда браузер будет загружать документ. Пример <html> <body> <a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br> <a href=tip.html>Как сделать такое же фото?</a> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега A Параметр HREF Описание Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью параметра target. Синтаксис <a href=URL>...</a> Обязательный параметр Да. Аргументы В качестве значения принимается полный или относительный путь к файлу. Значение по умолчанию Нет. Пример <html> <body> <a href=../wormik/knob.html>Относительная ссылка</a><br> <a href=http://www.htmlbook.ru/wormik/knob.html>Абсолютная ссылка</a><br> </body> </html> -------------------------------------------------------------------------------- Параметр NAME Описание Параметр name используется для определения закладки внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи параметра name тега А. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки. Между тегами <a name=...> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке. Синтаксис <a name=закладка>...</a> Аргументы Любой текст с учетом регистра. Значение по умолчанию Нет. Пример <html> <body> <a name=top></a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <a href=#top>Наверх</a> </body> </html> -------------------------------------------------------------------------------- Параметр TARGET Описание По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target тега А. Синтаксис <a target=имя окна>...</a> Аргументы В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие. _blank — загружает страницу в новое окно браузера. _self — загружает страницу в текущее окно. _parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self. _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self. Значение по умолчанию _self Пример <html> <body> <a href=new.html target=_blank>Открыть в новом окне</a> </body> </html> A Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок. Атрибуты: HREF – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения: http://... – создает ссылку на www-документ; ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл; mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; news:.. – создает ссылку на конференцию сервера новостей; telnet://... – создает ссылку на telnet-сессию с удаленной машиной; wais://... – создает ссылку на WAIS – сервер; gopher://... – создает ссылку на Gopher – сервер; Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк <A HREF="docs/title.html">Документация</A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего). NAME – помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа. Например: <A NAME="part">Раздел1</A>. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк <A HREF="document.html#part">Раздел1</A> отправит вас в раздел "part" файла document.html, а линк <A HREF="#bottom">В конец документа</A> – в раздел "bottom" текущего документа. (см. Пример 1) TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезевированных имен: _self – указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме; _parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм; _top – указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры; _blank – указывает, что документ должен отображаться в новом окне. Пример 1: <!-- Использование атрибута NAME: --> <A NAME="history">История бодибилдинга</A> ... <A NAME="now">Спорт глазами современника</A> ... Вернуться к разделу<A HREF="#history">истории</A> Пример 2: <!-- Использование атрибута HREF: --> <A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A> <A HREF="http://opengl.rdc.ru">Русский проект по OpenGL</A> ... Пример 3: <!-- Создадим ссылку для письма с указанием кучи атрибутов --> <A HREF="mailto:green@igf.ru?subject=Приглашение &cc=bg@microsoft.com&body=Приезжай на вечеринку."> Отправить приглашение </A>. <!-- или просто письмо : --> <A HREF="mailto:green@igf.ru?subject=Привет">авторам</A>. Примечания: Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции вроде <A HREF="link1.html"> Первый линк <A HREF="link2.html">Второй линк</A> Продолжаем первый линк </A> Если в атрибуте TARGET указать имя несуществующего окна или фрейма, создастся новое окно с указанным именем. Как мы видим, результат получится тот же, что и при задании нового окна: <A HREF="..." TARGET="_blank">, с той лишь разницей, что в последнем случае окно не будет иметь имени и на него нельзя будет ссылаться. С помощью элемента BASE вы можете указать значение TARGET для всех гиперссылок в текущем документе.

Vаниль: Текстовые блоки В этом разделе описаны элементы, разбивающие текст документа на блоки тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки. Элементы: - H1,H2,...H6 Используются для создания заголовков текста - P Используется для разметки параграфов. - DIV Отделяет блок HTML-документа от остальной его части - ADDRESS Оформляет текст как почтовый адрес - BLOCKQUOTE Оформляет текст как цитату - BR Осуществляет перевод строки - HR Вставляет в текст горизонтальную разделительную линию. - PRE Включает в документ (моноширинным шрифтом) блок предварительно отформатированного текста - LISTING, PLAINTEXT, XMP Включают в документ (моноширинным шрифтом) блок предварительно отформатированного текста (устаревшие элементы)

Vаниль: Теги H1...H6 Описание HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги H1...H6 относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей. Синтаксис <h1>Заголовок 1 уровня</h1> ... <h6>Заголовок 6 уровня</h6> Закрывающий тег Обязателен. Параметры align — определяет выравнивание заголовка. Пример 1. Использование тега H1 <html> <body> <h1>Lorem ipsum dolor sit amet</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <h2>Ut wisis enim ad minim veniam</h2> Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html> Примечание Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов H1...H6. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком. -------------------------------------------------------------------------------- Описание параметров тегов H1...H6 Параметр ALIGN Описание Выравнивание заголовка текста по краю. Синтаксис <h1 align=left | center | right | justify>...</h1> Аргументы left — выравнивание заголовка по левому краю. center — выравнивание по центру. right — выравнивание по правому краю. justify — выравнивание по ширине (одновременно по правому и левому краю). Этот аргумент работает только для заголовка, длина которого более, чем одна строка. Значение по умолчанию left Аналог CSS text-align Пример 2. Выравнивание заголовка <html> <body> <h1 align=right>Lorem ipsum dolor sit amet</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </body> </html> Атрибуты: ALIGN – определяет способ выравнивания заголовка по горизонтали. Возможные значения: left, right, center. Пример: <H1 ALIGN="center">Самый большой заголовок посередине</H1> <H2>Заголовок поменьше</H2> ... <H6>Малюююсенький такой заголовочек</H6>

Vаниль: Тег P Описание Определяет текстовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Величиной промежутка можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента. Синтаксис <p>Текст <p>Текст</p> Закрывающий тег Не обязателен. Параметры align — определяет выравнивание текста. Пример 1. Использование тега P <html> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега P Параметр ALIGN Описание Выравнивание блока текста по краю. Синтаксис <p align=left | center | right | justify>...</p> Аргументы left — выравнивание текста по левому краю. center — выравнивание по центру. right — выравнивание по правому краю. justify — выравнивание по ширине (одновременно по правому и левому краю). Значение по умолчанию left Пример 2. Выравнивание текста <html> <body> <p align=justify>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html> Используется для разметки параграфов. Атрибуты: ALIGN – определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right. По умолчанию имеет значение left. Пример: <P ALIGN="center">Это центрированный параграф.<BR> Текст располагается в центре окна браузера</P> <P ALIGN="right">А это параграф, выровненный по правому краю.</P>

Vаниль: Тег DIV Описание Элемент DIV является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега DIV всегда начинается с новой строки. После него, также, добавляется перенос строки. Синтаксис <div>...</div> Закрывающий тег Обязателен. Параметры align — задаёт выравнивание содержимого тега DIV. title — добавляет всплывающую подсказку к содержимому. Пример 1. Использование тега DIV <html> <head> <style> .block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left } .block2 { width: 200px; background: #fc0; padding: 5px; border: solid 1px black; position: relative; top: 40px; left: -30px; } </style> </head> <body> <div class=block1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> <div class=block2>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега DIV Параметр ALIGN Описание Выравнивание содержимого контейнера DIV по краю. Синтаксис <div align=left | center | right | justify>...</div> Аргументы left — выравнивание по левому краю; center — выравнивание по центру; right — выравнивание по правому краю; justify — выравнивание по ширине (одновременно по правому и левому краю). Значение по умолчанию left Аналог CSS text-align Пример 2. Выравнивание содержимого элемента <html> <body> <div align=justify>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> </body> </html> -------------------------------------------------------------------------------- Параметр TITLE Описание Добавляет поясняющий текст к контейнеру DIV в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом. Синтаксис <div title="текст">...</div> Аргументы Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. Значение по умолчанию Нет. Пример 3. Создание всплывающей подсказки <html> <body> <div title="Каноническая рыба">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> </body> </html> Результат примера Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф. Атрибуты: ALIGN – определяет выравнивание содержимого элемента DIV. Атрибут может принимать значения: left, right, center. Пример: ...Текст документа... <DIV ALIGN="center"> ...Текст, таблицы, изображения. Выравнивание по центру. </DIV> ...Текст документа... Примечания: У атрибута ALIGN есть еще одно значение – justify, поддерживаемое современными браузерами. Оно позволяет выравнивать текст по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю.

Vаниль: ADDRESS Находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом. Пример: Пишите по следующему адресу: <ADDRESS> Москва. ул. Академика Королева, 13 <BR> Мурзилке </ADDRESS> Примечание: Internet Explorer версии 3.0 неверно интерпретирует конечный тег </ADDRESS>, поэтому весь текст, находящийся после адреса, будет отображаться курсивом. Эту ошибку можно легко устранить, поставив после </ADDRESS> любой элемент форматирования текста. Пример: <ADDRESS> Мой адрес не дом и не улица, <BR> Мой адрес – Советский Союз. </ADDRESS> <!-- избавляемся от глюка --> <I></I> Нормальный текст ...

Vаниль: Тег BLOCKQUOTE Описание Тег BLOCKQUOTE предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу. Синтаксис <blockquote>Текст</ blockquote> Закрывающий тег Обязателен. Параметры Единственный параметр cite включен в спецификацию HTML, но не поддерживается в настоящее время браузерами. Так что можно считать, что параметров у этого тега нет. Пример. Использование тега BLOCKQUOTE <html> <body> <hr> <blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</blockquote> <hr> </body> </html> Результат примера -------------------------------------------------------------------------------- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. -------------------------------------------------------------------------------- Оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом. Пример: Редакция журнала "Домосед" выражает благодарность Бухаресту Магарычу Шницелю за замечательное стихотворение: <BLOCKQUOTE> Синели красные ромашки,<BR> Желтели в небе облака,<BR> Синицы в теплый край летели,<BR> К истоку двигалась река.<BR> ... </BLOCKQUOTE>

Vаниль: Тег BR Описание Тег BR устанавливает перевод строки в месте, где этот тег встречается. В отличие от тега параграфа P, использование тега BR не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, с помощью параметра clear тега BR можно заставить, чтобы следующая строка начиналась ниже элемента. Синтаксис Текст<br> текст Закрывающий тег Не требуется. Параметры clear — cообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Пример 1. Использование тега BR <html> <body> <b>Р.Л. Стивенсон</b><br> Лето в стране настало,<br> Вереск опять цветет.<br> Но некому готовить<br> Вересковый мед. </body> </html> Результат примера <b>Р.Л. Стивенсон</b><br> Лето в стране настало,<br> Вереск опять цветет.<br> Но некому готовить<br> Вересковый мед. -------------------------------------------------------------------------------- Описание параметров тега BR Параметр CLEAR Описание Параметр clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен параметр align или слой, к которому применяется свойство CSS float. Результат использования параметра clear зависит от края, по которому выравнивается элемент и значения аргумента clear. Так, если изображение выравнивается по левому краю, а значение параметра clear тега BR установлено как all или left, то текст после тега BR будет отображаться ниже рисунка. Любые другие значения параметра clear заставят текст располагаться справа от изображения и обтекать его. Синтаксис <BR clear=all | left | right | none> Аргументы all — отменяет обтекание элемента одновременно с правого и левого края. left — отменяет обтекание с левой стороны элемента, расположенного после тега BR. right — отменяет обтекание с правой стороны элемента. none — отменяет действие данного свойства. Значение по умолчанию Нет. Пример 2. Отмена обтекания текста <html> <body> <div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <br clear=left> Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. </div> </body> </html> Примечание Использование параметра clear в спецификации HTML 4 осуждается и взамен рекомендуется применять элемент CSS clear — BR { clear: both | left | none | right }. Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибут CLEAR. Элемент не имеет конечного тега. Атрибуты: CLEAR – указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения : all – завершить обтекание изображения текстом. left – завершить обтекание текстом изображения, выровненного по левому краю. right – завершить обтекание текстом изображения, выровненного по правому краю. Пример: Первое предложение<BR>Второе предложение на следующей строке Примечание: Возьмите себе за правило всегда ставить <br> после тега <img ...>. В противном случае все картинки будут иметь неприятный отступ. Атрибут CLEAR почему-то используется очень редко. А зря.

Vаниль: Тег HR Описание Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег HR относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Синтаксис <hr> Вставляет в текст горизонтальную разделительную линию. Атрибуты: WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – определяет толщину линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа. right – выравнивание по правому краю документа. center – выравнивание по центру документа (используется по умолчанию). NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной. COLOR – определяет цвет линии. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Атрибут работает только в Internet Explorer. Пример: Текст, разделенный <HR NOSHADE WIDTH="50%"> сплошной горизонтальной линией. Закрывающий тег Не требуется. Параметры align — определяет выравнивание линии. color — цвет линии. noshade — рисует линию без трехмерных эффектов. size — толщина линии. width — ширина линии. Пример 1. Использование тега HR <html> <body> <hr> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <hr> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега HR Параметр ALIGN Описание Выравнивание линии по краю родительского элемента. В качестве родителя обычно выступает окно браузера. Синтаксис <hr align=center | left | right> Аргументы center — выравнивание по центру. left — выравнивание линии по левому краю. right — выравнивание по пр авому краю. Значение по умолчанию center Аналог CSS text-align Пример 2. Выравнивание линии <html> <body> <hr align=right width=300> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </body> </html> -------------------------------------------------------------------------------- Параметр COLOR Описание Задает цвет линии в браузере Internet Explorer. Одновременно, использование этого параметра запрещает трехмерные эффекты, словно был добавлен параметр noshade. В остальных браузерах параметр color игнорируется. Синтаксис <hr color=цвет> Аргументы Для задания цвета линии применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Значение по умолчанию Нет. Пример 3. Изменение цвета линии <html> <body> <hr color=red width=300> </body> </html> -------------------------------------------------------------------------------- Параметр NOSHADE Описание Использование параметра noshade отменяет трехмерные эффекты, которые используются при рисовании линии по умолчанию. Синтаксис <hr noshade> Аргументы Нет. Значение по умолчанию По умолчанию этот параметр не используется. Пример 4. Отмена трехмерной линии <html> <body> <hr noshade width=300> </body> </html> -------------------------------------------------------------------------------- Параметр SIZE Описание Устанавливает толщину линии в пикселах. Синтаксис <hr size=число> Аргументы Любое целое положительное число. Нулевое или отрицательное значение устанавливает толщину линии в один пиксел. Значение по умолчанию 2 Пример 5. Толщина линии <html> <body> <hr noshade size=10> <hr noshade size=8> <hr noshade size=6> <hr noshade size=4> <hr noshade size=2> <hr noshade size=1> </body> </html> -------------------------------------------------------------------------------- Параметр WIDTH Описание Устанавливает ширину линии в процентах или пикселах. При использовании процентов за 100% берется ширина родительского элемента. Как правило, в качестве родителя выступает окно браузера. Синтаксис <hr width=число> Аргументы Любое допустимое значение в пикселах или процентах. Значение по умолчанию 100% Аналог CSS width Пример 6. Ширина линии <html> <body> <hr noshade size=4 width=75%> <hr noshade size=2 width=60%> <hr noshade size=1 width=50%> </body> </html>

Vаниль: Тег PRE Описание Элемент PRE определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег PRE позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега PLAINTEXT, использование которого осуждается в HTML 4, внутри контейнера PRE допустимо применять любые теги. Следующие теги не должны размещаться внутри контейнера PRE: APPLET, BASEFONT, BIG, FONT, IMG, OBJECT, SMALL, SUB и SUP. Синтаксис <pre>Текст</pre> Закрывающий тег Обязателен. Пример. Использование тега PRE <html> <body> <pre> - -- ------ -¦--- ----- ------ ¦----- ¦¦----¦ ¦¦--¦¦ ---¦ ¦¦----- ---- ----¦ ¦¦-----¦ ¦¦¦¦ ¦----¦-¦ ¦¦ ----- -- -----¦ - ¦¦- ----¦ -- ¦-----¦¦- ¦¦---¦¦-- -- ------¦-- ¦¦--¦¦ --¦-- ¦--¦------ ¦¦ -¦¦ ¦-- --- - ---- ¦¦ -¦¦ --¦-¦--¦ - ---¦ ¦---¦¦- ¦-----¦ ¦----- ¦---¦¦ ¦---- ¦----¦ ¦----¦ --- ¦------ ------ -------- </pre> </body> </html> Результат примера - -- ------ -¦--- ----- ------ ¦----- ¦¦----¦ ¦¦--¦¦ ---¦ ¦¦----- ---- ----¦ ¦¦-----¦ ¦¦¦¦ ¦----¦-¦ ¦¦ ----- -- -----¦ - ¦¦- ----¦ -- ¦-----¦¦- ¦¦---¦¦-- -- ------¦-- ¦¦--¦¦ --¦-- ¦--¦------ ¦¦ -¦¦ ¦-- --- - ---- ¦¦ -¦¦ --¦-¦--¦ - ---¦ ¦---¦¦- ¦-----¦ ¦----- ¦---¦¦ ¦---- ¦----¦ ¦----¦ --- ¦------ ------ -------- Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки. Пример: <PRE> Ать! Два! Три! </PRE> Примечание: Желательно избегать использования символа горизонтальной табуляции внутри PRE, т.к. он может быть неадекватно интерпретирован некоторыми браузерами. Вместо символа табуляции рекомендуется использовать число пробелов, кратное четырем.

Vаниль: LISTING, PLAINTEXT, XMP Данные элементы предназначены для воспроизведения предварительно отформатированного текста. Они использовались до появления элемента PRE и на данный момент являются устаревшими. Эти элементы не вошли в спецификацию HTML 4.0, однако браузеры еще могут распозновать их в целях обратной совместимости версий.

Vаниль: Раздел "текстовые блоки закончен" Приступаем к разделу"форматирование текствов"

Vаниль: Форматирование текста В этом разделе описаны элементы для оформления и смыслового выделения текста – подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д. Элементы форматирования текста: - BASEFONT Определяет основной шрифт, которым должен отображаться текст документа - FONT Позволяет изменять цвет, размер и тип шрифта текста - I Выделяет текст курсивом - EM Используется для смыслового выделения текста (курсивом) - B Выделяет текст жирным шрифтом - STRONG Усиленное выделение текста (жирным) - U Выделяет текст подчеркнутым - S, STRIKE Выделяет текст перечеркнутым - BIG Отображает текст увеличенным шрифтом (относительно текущего) - SMALL Отображает текст уменьшенным шрифтом (относительно текущего) - SUP Отображает текст со сдвигом вверх (верхний индекс) - SUB Отображает текст со сдвигом вниз (нижний индекс) - CODE, SAMP Оформляют текст как формулу или программный код - TT Отображает текст моноширинным шрифтом - KBD Выделяет текст, который предлагается набрать на клавиатуре - VAR Используется для обозначения в тексте переменных - CITE Оформляет текст как цитату или ссылку на источник

Severvirgin: У МЕНЯ ГЛУПЫЙ ВОПРОС,,,,, А ДЕДОВСКИЙ СПОСОБ - СДЕЛАТЬ В ВОРДЕ, ПОТОМ СОХР. как ВЕБСТРАНИЦА И ЗАКАЧАТЬ НА САЙТ ПРОВАЙДЕРА?

Severvirgin: КРЫША УЛЕТАЕТ..... ПОЗДРАВЛЯЮ С ОТКРЫТИЕМ НОВЫЙ ТЕМЫ ЕСЛИ МОЙ ГУМАНИТАРНЫЙ МОЗГ ОСИЛИТ ПЕРВУЮ СТРАНИЦУ, Я ПОЙДУ МЕМОРИАЛЬНЫЙ СКВЕРИК РАЗОБЬЮ НЕДАЛЕКО ОТ ДОМА.... А ЕСЛИ ДО КОНЦА ДОЧИТАЮ, ТО ВПОРУ БУДЕТ КОЛУМБАРИЙ

Vаниль: Severvirgin пишет: У МЕНЯ ГЛУПЫЙ ВОПРОС,,,,, А ДЕДОВСКИЙ СПОСОБ - СДЕЛАТЬ В ВОРДЕ, ПОТОМ СОХР. как ВЕБСТРАНИЦА И ЗАКАЧАТЬ НА САЙТ ПРОВАЙДЕРА? Severvirgin тоже вариант, но я о таком не слышала.......все в основном пользуются блокнотом....) Severvirgin пишет: КРЫША УЛЕТАЕТ..... ПОЗДРАВЛЯЮ С ОТКРЫТИЕМ НОВЫЙ ТЕМЫ вот,вот ...) ЕСЛИ МОЙ ГУМАНИТАРНЫЙ МОЗГ ОСИЛИТ ПЕРВУЮ СТРАНИЦУ, Я ПОЙДУ МЕМОРИАЛЬНЫЙ СКВЕРИК РАЗОБЬЮ НЕДАЛЕКО ОТ ДОМА.... А ЕСЛИ ДО КОНЦА ДОЧИТАЮ, ТО ВПОРУ БУДЕТ КОЛУМБАРИЙ

Vаниль: Тег BASEFONT Описание Тег BASEFONT предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всём документе за исключением тега FONT, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере HEAD или BODY, причем несколько раз. Это позволяет изменять вид шрифта для части документа. Синтаксис <basefont color=... face=... size=...> Закрывающий тег Не требуется. Параметры color — цвет текста. face — шрифт текста. size — размер шрифта. Аналог CSS color font-family font-size Пример 1. Использование тега BASEFONT <html> <body> <basefont face="Arial, Helvetica, sans-serif" size="4" color="maroon"> <p>Добро пожаловать на мою страничку, которая оформлена с использование тега BASEFONT</p> <p><font face="Times New Roman" color=green>Цвет изменен с помощью тега FONT</font></p> </body> </html> Примечания В настоящее время тег BASEFONT понимается только браузером Internet Explorer. Использование этого тега осуждается спецификацией HTML, взамен рекомендуется применять стили. -------------------------------------------------------------------------------- Описание параметров тега BASEFONT Параметр COLOR Описание Определяет цвет текста веб-страницы. Синтаксис <basefont color=цвет> Аргументы Значение цвета можно задавать двумя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Значение по умолчанию Цвет, установленный в браузере по умолчанию. Обычно это черный. Пример 2. Установка цвета текста <html> <body> <basefont color=#008000> Синий цвет <basefont color=#800000> Красный цвет </body> </html> -------------------------------------------------------------------------------- Параметр FACE Описание Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки. Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания. Синтаксис <basefont face=шрифт1, шрифт2, ...> Аргументы Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов: serif — шрифты с засечками (антиквенные), типа Times; sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial; cursive — курсивные шрифты; fantasy — декоративные шрифты; monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова. Значение по умолчанию Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman. Пример 3. Изменение шрифта для текста <html> <body> <basefont size="Verdana, Arial, Helvetica, sans-serif"> <h1>Duis te feugifacilisi</h1> <basefont size="'Times New Roman', Times, serif"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </body> </html> -------------------------------------------------------------------------------- Параметр SIZE Описание Параметр size задает размер шрифта в условных единицах. Синтаксис <basefont size=1 | 2 | 3 | 4 | 5 | 6 | 7> <basefont size=+1> <basefont size=-1> Аргументы Значение может быть от 1 до 7. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового. Значение по умолчанию Размер, установленный в браузере по умолчанию. Обычно он равен 3. Пример 4. Изменение размера шрифта <html> <body> <basefont size=+1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </body> </html> BASEFONT Не имеет конечного тега. Определяет основной шрифт, которым должен отображаться текст документа. Впоследствии вы можете легко изменить шрифт в любой части документа, используя элемент FONT. Действие элемента BASEFONT не распространяется на текст, заключенный в ячейки таблиц. Атрибуты: SIZE – обязательный атрибут. Определяет базовый размер шрифта. Возможные значения : целые числа от 1 до 7 включительно. FACE – определяет используемый шрифт (гарнитуру). Пример: <BODY> <BASEFONT SIZE="3"> ... Текст документа шрифтом 3 размера ... <FONT SIZE="+1"> Слегка увеличиваем шрифт </FONT> ... Продолжаем шрифтом 3 размера ... </BODY> Примечание: Атрибут FACE игнорируется большинством браузеров. Если вы хотите явно указать тип шрифта для всего документа, используйте элемент FONT: Пример: <BODY> <FONT FACE="Arial"> ... Основной текст документа шрифтом Arial ... <FONT FACE="Times" SIZE="5"> Вставка текста увеличенным шрифтом Таймс </FONT> ... Продолжается основной текст документа шрифтом Arial ... </FONT> </BODY>

Vаниль: Тег FONT Описание Тег FONT представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Синтаксис <font>Текст</font> Закрывающий тег Обязателен. Параметры color — цвет текста. face — шрифт текста. size — размер шрифта. Пример 1. Использование тега FONT <html> <body> <font size=5 color=red face=Arial>П</font>ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной в размерах. </body> </html> -------------------------------------------------------------------------------- Описание параметров тега FONT Параметр COLOR Описание Устанавливает цвет текста внутри контейнера FONT. Синтаксис <font color=цвет>...</font> Аргументы Для задания цветов применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Десятичная система, хотя и более привычна для представления, находит применение только с помощью CSS. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. В таблице приведено соответствие десятичных и шестнадцатеричных чисел. Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Типичный цвет выглядит следующим образом. <font color=#FA8E47>Текст</font> Цвет фона задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет. FA + 8E + 47 = FA8E47 Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, в модели RGB количество цветом может быть 256 х 256 х 256 = 16.777.216 комбинаций. Аналог CSS color Значение по умолчанию Цвет, установленный в браузере по умолчанию. Пример 2. Цвет фона текста <html> <body> <font color=crimson>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</font> </body> </html> -------------------------------------------------------------------------------- Параметр FACE Описание Параметр face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку. Синтаксис <font facer=шрифт1, шрифт2,...>...</font> Аргументы Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов: serif — шрифты с засечками (антиквенные), типа Times; sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial; cursive — курсивные шрифты; fantasy — декоративные шрифты; monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова. Аналог CSS font-family Значение по умолчанию Шрифт, установленный в браузере по умолчанию. Пример 3. Изменение шрифта <html> <body> <font face="Arial, Helvetica, sans-serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</font> </body> </html> -------------------------------------------------------------------------------- Параметр SIZE Описание Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size, но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Синтаксис <font size=число>...</font> Аргументы Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -. Аналог CSS font-size Значение по умолчанию 3 Пример 4. Размер текста <html> <body> <font size=1>Шрифт размера 1</font><br> <font size=-1>Шрифт размера 2</font><br> <font size=3>Шрифт размера 3</font><br> <font size=+1>Шрифт размера 4</font><br> <font size=5>Шрифт размера 5</font><br> <font size=6>Шрифт размера 6</font><br> <font size=7>Шрифт размера 7</font> </body> </html> FONT Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тегами. Вне тегов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT. Атрибуты: SIZE – определяет размер шрифта. Возможные значения: – целое число от 1 до 7; – относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью атрибута SIZE элемента BASEFONT. COLOR – определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. FACE – определяет используемый шрифт. Пример: <FONT SIZE="+2" COLOR="#AA0000">Увеличенный красный шрифт</FONT> <FONT SIZE="3" FACE="Courier New" COLOR="Magenta">Моноширинный фиолетовый текст 3 размера</FONT> Примечание: Атрибут FACE старайтесь не использовать. Если на компьютере пользователя не окажется указанного шрифта – глюки неизбежны. Если указать шрифт всё же необходимо, используйте только: Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Будьте внимательны. Многие элементы форматирования текста (PRE, CODE, KBD, SAMP...), расположенные внутри элемента FONT, работают некорректно.

Vаниль: Тег I Описание Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с тегом B задающим жирное начертание (<i><b>жирный курсивный текст</b></i>). Синтаксис <i>Текст</i> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS font-style: italic Пример 1. Использование тега I <html> <body> <b><i>Lorem ipsum dolor sit amet</i></b><br> <i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <i>Ut</i> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html> Результат примера Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Примечание Хотя использование тега I не осуждается в HTML 4, применение стилей предоставляет больше возможностей по управлению начертанием текста. I Текст, заключенный между начальным и конечным тегами, будет выделен курсивом. Пример: Текст с <I>курсивом</I>

Vаниль: Тег EM Описание Тег EM предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием. Синтаксис <em>Текст</em> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS font-style: italic Пример. Использование тега EM <html> <body> <em>Lorem ipsum dolor sit amet</em><br> <b><em>Lorem</em></b> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <em>Ut</em> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html> Результат примера Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Примечание Следует отметить, что теги i и em, также как b и strong, несмотря на сходство результат, являются не совсем эквивалентными и заменяемыми. Первый тег i — является тегом физической разметки и устанавливает курсивный текст, а тег EM — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов I и EM, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен. Логическое ударение. Используется для смыслового выделения текста, стоящего между начальным и конечным тегами. Результат обычно отображается курсивом. То есть элемент EM по действию практически аналогичен элементу I. Пример: Порой в России встречаются <EM>действительно талантливые</EM> веб-мастера. Но только не друг с другом.

Vаниль: Тег B Описание Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с тегом I задающим курсивное начертание (<b><i>жирный курсивный текст</i></b>). Синтаксис <b>Текст</b> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS font-weight Пример. Использование тега B <html> <body> <b>Lorem ipsum dolor sit amet</b><br> <b>Lorem</b> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <b>Ut</b> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html> Результат примера Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Примечание Хотя использование тега B не осуждается в HTML 4, применение стилей предоставляет больше возможностей по управлению жирностью текста. С другой стороны, поисковые системы «любят» слова, выделенные жирным начертанием, и повышают их рейтинг. Текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом. Пример: Текст с <B>выделенным</B> словом

Vаниль: Тег STRONG Описание Тег STRONG предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием. Синтаксис <strong>Текст</strong> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS font-weight Пример. Использование тега STRONG <html> <body> <strong>Lorem ipsum dolor sit amet</strong><br> <strong>Lorem</strong> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <strong>Ut</strong> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html> Результат примера Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Примечание Следует отметить, что теги B и STRONG, также как I и EM, несмотря на сходство результат, являются не совсем эквивалентными и заменяемыми. Первый тег B — является тегом физической разметки и устанавливает жирный текст, а тег STRONG — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов B и STRONG, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен. Усиленное выделение. Текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом. То есть элемент STRONG практически аналогичен по действию элементу B. Пример: Я <STRONG>сильный</STRONG>, но легкий. Примечание: Согласно рекомендациям W3C, приветствуется использование <STRONG> вместо <B>.

Vаниль: Тег U Описание Текст, выделенный с помощью тега U, отображается подчеркиванием. Синтаксис <u>Текст</u> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS text-decoration: underline Пример. Использование тега U <html> <body> <u>Lorem ipsum dolor sit amet</u><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </body> </html> Результат примера Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Примечание Традиционно, подчеркивание текста используется для ссылок, поэтому к обычному тексту подчеркивание лучше не применять. В спецификации HTML 4 рекомендуется воздержаться от использования тега U, а взамен применять стили. Данный элемент отображает помещенный между начальным и конечным тегами текст как подчеркнутый. Пример: <U> Подчеркнутый текст </U>

Vаниль: Тег S Описание Тег S отображает текст как перечеркнутый. Этот тег аналогичен тегу STRIKE, но имеет сокращенную форму записи подобно тегам B, I и U. В любом случае, теги S и STRIKE осуждаются спецификацией HTML, взамен них рекомендуется использовать стили. Синтаксис <s>Текст</s> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS text-decoration: line-through Пример. Использование тега S <html> <body> <b>Список должников</b><br> <s>Чебурашка</s><br> <s>Крокодил Гена</s><br> Шапокляк </body> </html> Результат примера Список должников Чебурашка Крокодил Гена Шапокляк Тег SCRIPT Описание Тег SCRIPT предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. SCRIPT может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа. Для скрытия кода программы от браузеров, которые не понимают скриптов, перед началом и после окончания кода добавляют комментарий HTML. <script> <!-- Текст программы //--> </script> Закрывающему комментарию HTML должен предшествовать комментарий языка JavaScript (//) или VBSscript ('). В настоящее время все современные браузеры понимают скрипты, поэтому комментарий необязателен и его можно опустить. Синтаксис <script> ... </script> <script src=URL></script> Закрывающий тег Обязателен. Параметры defer — откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. language — устанавливает язык программирования на котором написан скрипт. src — адрес скрипта из внешнего файла для импорта в текущий документ. type — определяет тип содержимого тега SCRIPT. Пример 1. Использование тега SCRIPT <html> <body> <table width=400 border=1> <script language="JavaScript"> for (i=1; i<6; i++) { document.writeln("<tr>"); for (j=1; j<6; j++) document.write("<td>" + i + j + "</td>"); document.writeln("</tr>"); } </script> </table> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега SCRIPT Параметр DEFER Описание Параметр defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Этот параметр работает только в браузере Internet Explorer, а в остальных браузерах будет проигнорирован. Синтаксис <script defer>...</script> Аргументы Нет. Значение по умолчанию По умолчанию этот параметр выключен. Пример 2. Отложенный скрипт <html> <head> <script language="JavaScript" DEFER> document.forms[0].textField.value = 17; </script> </head> <body> <form> Введите ваш возраст<br> <input type=text name=textField> </form> </body> </html> -------------------------------------------------------------------------------- Параметр LANGUAGE Описание Параметр language указывает язык написания скрипта. Рекомендуется всегда задавать этот параметр, поскольку если браузер не распознает язык программирования, то скрипт игнорируется и не выполняется. Вместе с тем, в HTML 4.0 данный параметр осуждается, а вместо него следует применять параметр type, который указывает тип MIME для определенного языка. Синтаксис <script language=JavaScript | JScript | VBS | VBScript>...</script> Аргументы Параметр language не чувствителен к регистру и может принимать одно из четырех значений. JavaScript — язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например — JavaScript1.3. JScript — разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах. VBS, VBScript — язык программирования VBScript основанный на Visual Basic. Является детищем Microsoft и поддерживается преимущественно браузером Internet Explorer. Значение по умолчанию JavaScript Пример 3. Выбор языка программирования <html> <head> <script language="VBScript"> VB = True </script> <script language="JavaScript"> JS = 1; </script> <script language="JavaScript1.1"> JS11 = 1; </script> <script language="JavaScript1.2"> JS12 = 1; </script> <script language="JavaScript1.3"> JS13 = 1; </script> <script language="JavaScript1.4"> JS14 = 1; </script> <script language="JavaScript1.5"> JS15 = 1; </script> <script language="JavaScript"> document.write("<b>Поддерживаемые языки:</b><br>"); if(window.JS) document.write("JavaScript<br>"); if(window.JS11) document.write("JavaScript 1.1<br>"); if(window.JS12) document.write("JavaScript 1.2<br>"); if(window.JS13) document.write("JavaScript 1.3<br>"); if(window.JS14) document.write("JavaScript 1.4<br>"); if(window.JS15) document.write("JavaScript 1.5<br>"); if(window.VB) document.write("Visual Basic<br>"); </script> </head> <body> </body> </html> -------------------------------------------------------------------------------- Параметр SRC Описание Импортирует файл со скриптами из внешнего файла. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ. Файлы со скриптами JavaScript обычно имеют расширение .js и могут размещаться в любом доступном месте. Преимуществ использования внешних файлов несколько. Внешний файл после первого обращения сохраняется в кэше браузера и при последующих вызовах загружается быстрее. Кроме того, вызываемые функции удобно править в одном месте и код проще контролировать. Это особенно актуально, когда множество веб-страниц используют одни и те же скрипты. Синтаксис <script src=URL>...</script> Аргументы В качестве значения принимается полный или относительный путь к файлу. Файл должен иметь расширение .js. Значение по умолчанию Нет. Пример 4. Путь к файлу со скриптами <html> <head> <script language="JavaScript" src=/scripts/browser.js></script> </head> <body> ... </body> </html> -------------------------------------------------------------------------------- Параметр TYPE Описание Указывает тип MIME для определенного языка. Поскольку некоторые браузеры не понимают параметр type, лучше задавать два атрибута одновременно - language и type. Если браузер распознает значение параметра type, то значение language отменяется. Синтаксис <script type=MIME-тип>...</script> Аргументы Параметр type не чувствителен к регистру и принимает следующие значения: text/JavaScript — для JavaScript. text/VBScript — для VBScript. Значение по умолчанию text/JavaScript Пример 5. Установка типа данных <html> <head> <script language="JavaScript" type="text/javascript"> ... </script> </head> <body> ... </body> </html> S, STRIKE Элемент STRIKE отображает помещенный между начальным и конечным тегами текст как перечеркнутый. В HTML 3.2 вместо <STRIKE> был предложен более краткий тег <S>. Пример: Лена + <STRIKE>Вася</STRIKE> Коля = Love

Vаниль: Тег BIG Описание Тег BIG увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега BIG увеличивает текст на одну условную единицу. Допускается применение вложенных тегов BIG, при этом размер шрифта будет больше с каждым уровнем. На размер шрифта влияет не только заданный параметр size тега FONT, но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили. Синтаксис <big>Текст</big> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS font-size Пример. Использование тега BIG <html> <body> <big><big>Lorem ipsum dolor sit amet</big></big><br> <big>Lorem</big> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <big>Ut</big> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html> Результат примера Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. BIGТекст, заключенный между начальным и конечным тегами, отображается увеличенным шрифтом (относительно текущего). Пример: Текст с <BIG>увеличенным</BIG> словом Примечание: Тег <BIG> аналогичен по действию тегу <FONT SIZE="+1"> (см. элемент FONT).

Vаниль: Тег SMALL Описание Тег SMALL уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега SMALL уменьшает текст на одну условную единицу. Допускается применение вложенных тегов SMALL, при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1. На размер шрифта влияет не только заданный параметр size тега FONT, но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили. Синтаксис <small>Текст</small> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS font-size Пример 1. Использование тега SMALL <html> <body> <big><big>Lorem ipsum dolor sit amet</big></big><br> <small>Lorem</small> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <small>Ut</small> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html> Результат примера Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Текст, заключенный между начальным и конечным тегами, отображается уменьшенным шрифтом (относительно текущего). Пример: Небоскребы, небоскребы, а я <SMALL>маленький</SMALL> такой. Примечание: Тег <SMALL> аналогичен по действию тегу <FONT SIZE="-1"> (см. элемент FONT).

Vаниль: Тег SUP Описание Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера. Синтаксис <sup>Верхний индекс</sup> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS vertical-align: super Пример. Использование тега SUP <html> <body> <b>Великая теорема Ферма</b><br> <i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br> где n - целое число > 2 </body> </html> Результат примера Великая теорема Ферма X n + Y n = Z n где n - целое число > 2 Отображает текст со сдвигом вверх (верхний индекс) и уменьшением размера текущего шрифта на единицу. Пример: Microsoft <SUP>TM</SUP>

Vаниль: Тег SUB Описание Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера. Синтаксис <sub>Нижний индекс</sub> Закрывающий тег Обязателен. Параметры Нет. Аналог CSS vertical-align: sub Пример. Использование тега SUB <html> <body> <b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i> </body> </html> Результат примера Формула серной кислоты: H2SO4 Отображает текст со сдвигом вниз (нижний индекс) и уменьшением размера текущего шрифта на единицу. Пример: X<SUB>i</SUB> = B<SUB>i</SUB> + C<SUB>i</SUB>

Vаниль: CODE, SAMP Данные элементы оформляют текст, находящийся между начальным и конечным тегами, как формулу или программный код. Текст при этом как правило отображается моноширинным шрифтом. Пример: Формула: <CODE> n=((x*15-z/1.25)/4)^5 </CODE>

Vаниль: TT Данный элемент отображает помещенный между начальным и конечным тегами текст моноширинным шрифтом. Пример: <TT>СЕНЯ ЗПТ ТВОЮ МАТЬ ТЧК ПОДРОБНОСТИ В ПИСЬМЕ ТЧК</TT>

Vаниль: KBD Предназначен для отображения текста, который пользователь должен набрать на клавиатуре (например, при заполнении формы, введении пароля и т.п.). Как правило текст, заключенный между начальным и конечным тегами, выделяется жирным моноширинным шрифтом. Пример: Чтобы войти в систему наберите <KBD>"GUEST"</KBD> заглавными буквами.

Vаниль: VAR Элемент VAR предназначен для обозначения в тексте переменных. Как правило, отображается курсивом. Пример: Переменная <VAR>IndexZ</VAR> равна 5.

Vаниль: CITE Оформляет находящийся между начальным и конечным тегами текст как цитату или ссылку на источник. Обычно используется для коротких цитат (в отличие от элемента BLOCKQUOTE). Цитируемый текст отображается курсивом. Пример: Как сказал классик:<BR> <CITE>"Грамотное написание HTML способствует пищеварению"</CITE>

Vаниль: Закончили "форматирование текста" Приступаем к "спискам"



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