| FAVORIT | HOMEPAGE |
| FAVORIT | HOMEPAGE |
Хочу дать пару- тройку советов о том, как пользоваться учебником:
Выделите время на изучение, так как за один день ХТМЛ не выучишь!!!
Читайте все по порядку (сверху вниз) и постарайтесь запомнить;
Просмотрите любую ХТМЛ страницу и разберитесь в её основных элементах;
Прочитав новый материал, найдите страницу со сходными элементами (атрибутами) и разберитесь в их употреблении;
Попытайтесь создавать свои странички, включающие в состав элементы из новоизученного материала;
Вникайте в узученный материал.
Побольше практикуйтесь!!!
С появлением на Земле первых двух компьютеров инженеры решили создать связь и передавать информацию между ними. Технически это было вполне возможно. Компьютерная техника развивалась, компьютерные сети стали появляться повсеместно.
Через некоторое время компьютерная техника стала доступна широкому пользователю. Потребность обмена информацией между компьютерами возросла и Глобальная сеть появилась во всем мире(так же было с факсами и телефонами).
Интернет- первая глобальная сеть, которая включает в себя большинство стран мира. Представьте за несколько секунд можно связаться с Австралией, Америкой, Германией и т.д. Сейчас это чудо, но в начале 90-х о этом даже и не думали. Интернет перестал быть уделом избранных программистов и электронщиков.
В 1989 году Тим Бенерс-Ли разработал гипертекстовую систему, а в 1990 году появился первый браузер (специальная программа по просмотру интернет страниц), который назывался WWW(World Wide Web- по-русски всемирная паутина). Уже тогда появились первые веб страницы, которые создавали крупные фирмы, но просматривать эти страницы было некому, а кириллица(русский шрифт) выглядел набором непонятных значков. Эта проблема до сих пор до конца не решена по сей день.
Cуществует несколько стандартов передачи данных между клиентом(компьютер, принимающий информацию) и сервером(компьютером, являющимся источником информации). Среда Интернет основана на HTTP(HyperText Transfer Protocol-протокол передачи гипертекста), ещё есть FTP(File Transfer Protocol-протокол передачи файлов), электронная почта(E-mail) и другие средства.
Каждый пользователь Сети имеет 2 оригинальных имени. Первый, IP-адрес используется для обработки и ничего не говорит пользователю, состоит из четырёх групп цифр (127.0.0.1). Второй не сет в себе информацию, доступную пользователю.
Любой пользователь Сети может получить бесплатный адрес электронной почты, который строится по принципу
Можно выделить много специальных почтовых программ, которые нужны для действий с почтой. Например, The Bat, Outlook Express, Eudopa Pro и другие. При помощи e-mail можно пересылать электронные письма, которые дойдут до получателей во всем Мире за несколько минут.
Гипертекст уже давно перестал быть просто языком программирования и сейчас его популярность стала просто умопомрачительной. При его помощи можно быстро, а главное легко, создавать трудные вещи.
Первая версия ХТМЛ была разработана в 1990-х годах Тимом Бенерс-Ли для популярного браузера Mosaic. Но в то время применения ни для браузера ни для ХТМЛ не нашлось.
В 1993 году была разработана следующая версия HTML+, как и предыдущая, она осталась практически незаметной.
Наконец, в июне 1994 года появилась версия 2.0, которая стала популярной. Элементы этой версии используются и по сей день.
В 1994 году появилась версия 3.0, в которую были добавлены возможности прорисовки математических символов, таких знаков как: интеграл, бесконечность, дроби, фигурные скобки и т.д.
В 1996 году появилась HTML версия 3.2. Это просто революционное решение, так как в эту версию была введена специфика фреймов, которые нашли своё применение во многих сайтах. Практически все современные браузеры полностью поддерживают все элементы этой версии, поэтому авторы не сомневаются в работоспособности этой версии.
В 1997 году появилась следующая версия 4.0, называемая Dinamik HTML. Новаторство этой версии заключается в возможности делать Web-страницы интерактивными. Появились такие понятия, как JavaScript, Java, VisualBasic Script. До сих пор практически нет определенного стандарта поддержки сценариев, поэтому сколько браузеров, столько и методов поддержки скриптов. Результатом использования сценариев стали пометки в каких браузерах лучше просматривать страницы. Сейчас многим разработчикам приходится выбирать между новаторством и надежностью страницы.
Недавно большую популярность у разработчиков страниц получила технология FLASH. С её помощью можно создавать целые сайты, клипы, изображения, мультфильмы и даже игры и многое другое!!! Превосходства очевидны: маленький размер готового файла, интерактивность, простота в использовании, а главное, красота готового проекта. Марка Flash принадлежит корпорации
Macromedia Inc .
В последнее время без специального проигрывателя от Макромедиа просто не обойтись. Примером страницы с использованием технологии Flash может послужить сайт российской поисковой системы Апорт .
<HTML>
<HEAD>
<TITLE></title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META name="Keywords" content="">
<STYLE>
# {
;
}
</style>
</head>
<BODY bgcolor="" background="" text="" link="" vlink="" alink="">
<P></p>
<P></p>
<P></p>
<P></p>
<P></p>
</body>
</html>
Как Вы видите почти все теги имеют конечный тег. Если вы забыли поставить конечный тег, то его действие будет распространяться от начала постановки до конца документа. Это очень распространенная ошибка, так что будьте внимательны!
Если вы просмотрите несколько страниц, то вы должны заметить, что они имеют схожие элементы.
Спецсимволы употребляются:
& #код символа
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
Данный элемент можно считать самым внешним, так как внутри его содержится сама Web- страница. В принципе этот элемент можно посчитать формальностью. В этот элемент бывают вложены и другие элементы, которые отвечают за интерактивность страницы.
Данный элемент может иметь атрибуты: version(означает версию языка HTML), lang, dir, которыми редко кто пользуется.
Этот элемент, как и элемент HTML, можно считать просто формирующим. Этот элемент должен содержать заголовок страницы. Этот элемент должен включать тег TITLE.
Информация, сосредоточенная в META, определяющая настройки страницы называется профилем. Профиль может хранится в отдельном файле. Для того, чтобы ввести этот файл наберите следующую структуру:
<HEAD profile="URL">
Также в этом элементе могут содержаться и другие элементы, которые имеют отношение ко всей странице:
bgsound="URL"
Этот тег позволяет включать в свой состав элементы: BASE, META , LINK, ODJECT, SCRIPT, STYLE.
Данный элемент может иметь атрибуты: dir, lang.
Этот элемент предназначен для размещения заголовка Web -страницы. Надпись, включенная в эти теги, будет отображаться в окне браузера.
Кстати, эту строку часто используют поисковые машины, типа Yandexa, поэтому Web -мастера должны заботиться о исчерпывающем описании страницы!
Этот элемент содержит информацию, которая не выводится на дисплей, а обрабатывается браузером при загрузки и просмотре Web -страницы. Каждый элемент META содержит два атрибута, первый определяет тип данных, второй -содержание.
Ниже показаны несколько примеров:
«Срок годности» документа:
<META name="expires" content="Дата">
Адрес электронной почты:
<META name="reply-to" content="Имя@Адрес.домен">
Имя автора Web -страницы:
<META name="Author" content="Имя автора">
Набор ключевых слов для поиска:
<META name="Keywords" content="слово1, слово2 и т.д.">
Описание Web -страницы:
<META name="Description" content="Содержание страницы">
Названия приложения, в котором была сделана Web - страница:
<META name="Generator" content="Название HTML -редактора">
Названия типа кодировки, в которой была сделана страница:
<META http-equiv="Content-type" content="text/html; charset= кодировка">
Время (в секундах), с которым будет обновляться страница:
<META refresh="http-equiv" content="Число(в секундах)" >
Этот элемент включает в себя гипертекст, который определяет страницу в целом. Содержание этого элемента определяется автором и оно может быть совершенно произвольным. Конечный тег этого элемента можно найти в конце Web -страницы. Внутри этого элемента можно расположить ряд атрибутов, которые играют большую роль в дизайне. Это следующие атрибуты:
Можно украсить страницу при помощи внешнего файла -узора. Этот файл будет размазан по странице. Делается это при помощи атрибута
background="Путь к файлу"
Можно обойтись проще, задав цвет фона атрибутом
bgcolor="#RRGGBB"
Можно задать цвет шрифта, который будет использован для всего текста атрибутом:
text="#RRGGBB"
Для задания цвета гиперссылок можно использовать атрибут:
link="#RRGGBB"
Для просмотренных гиперссылок пользуются атрибутом:
vlink="#RRGGBB"
Для последней просмотренной гиперссылки пользуются атрибутом:
alink="#RRGGBB"
Текст, находящийся внутри этих тегов имеет произвольное строение и определяется только умом и фантазией разработчика страницы.
При создании больших и сложных страниц нельзя ,глядя на код, быстро разобраться в назначении того или иного документа. Для этого в HTML специально встроены теги, которые игнорирует браузер при загрузки страницы. Эти теги используются исключительно для удобства разработчика страницы. Комментарии могут быть повсеместно, где это нужно. Разработчик прописывает внутрь тега:
Например,
<!--Начало таблицы-->
или:
<!--Правый фрейм-- >
Элемент заголовка. В HTML существуют шесть уровней заголовков, которые обозначаются H1...H6. Заголовок H1 считается самым крупным, а заголовок H6 -самым мелким, соответственно.
Для заголовков можно использовать атрибут align:
align="left" для выравнивания по левому краю
align= "right" для выравнивания по правому краю
align= "center" для выравнивания по центру.
Горизонтальная линия (Horizontal rule) -этот элемент можно часто встретить, потому что, благодаря нему, страницу удобно разделить на части. Иногда можно встретить графический файл, размером(размером один -два пикселя) -заменитель этого тега. Это очень оригинальное решение, так как это смещает грани в разночтении кодов этого языка. Этот элемент не имеет конечного тега! Этому элементу присущи несколько атрибутов:
align="left" для выравнивания по левому краю
align="right" для выравнивания по правому краю
align="center" для выравнивания по центру.
align="justify" для выравнивания по ширине страницы.
Также можно задать толщину линии, при помощи атрибута:
size=толщина линии в пикселях
Также можно управлять длиной линии при помощи атрибута:
width=длина в пикселях или в процентах
Можно и выбрать цвет линии:
color="цвет"
Горизонтальная линия в качестве прямоугольника:
Этот элемент предназначен для создания базового адреса (URL)для ссылок. Элемент очень удобен, хотя и редко используется. BASE задает первоначальный адрес и позволяет опустить начальный адрес, так как он будет подставлен автоматически. Для использования этого элемента вводят:
<BASE href="http://компьютер/">
Если вводится адрес для кокого- либо локального диска, то используют:
<BASE href="file://диск\путь">
Хотя можно опустить и указание на схему доступа:(file://).Тогда будет учитываться только левая часть ссылки до первого \.
Это - один из самый часто употребляемых элементов. Он позволяет использовать только начальный тег, так как следующий элемент Р означает не только начало следующего абзаца, но и конец предыдущего.
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
Вместе с этим элементом можно использовать атрибут align, который будет действовать на весь абзац.
Этот элемент желательно использовать вместе с конечным тегом, так как некоторые браузеры (Netscape) не воспринимают <P>как начало нового абзаца!
Этот элемент Обеспечивает принудительный переход на следующую (новую) строку. Он имеет только начальный тег!
Этому элементу присущ атрибут clear
Также он имеет стандартные атрибуты: class, id, style, title
Этот элемент является полной противоположностью элемента BR. Текст, который находится внутри этого элемента, бeдет выводится на экран одной строкой. И для просмотра этого текста придется использовать горизонтальную строку прокрутки.
Элемент используется для обозначения текста отформатированного заранее (preformated). Под этим элементом понимается, что текст будет выведем в том виде, в каком он был введен автором. Например, учитывается концы строк, которые были введены в редакторе. В других случаях такое форматирование будет игнорироваться браузером! Или, если автор введет большую и длинную строку, то она уйдет за пределы окна (сходное действие имеет элемент NOBR)Этот элемент удобно использовать, если форматирование текста приведет к искажению смысла.
Будьте внимательны! Этот элемент не поддерживается многими браузерами!
Этот элемент допускает использование специального атрибута width и просто атрибутов: id, class, dir, lang, style, title.
Элемент используется для центровки любого объекта заключенного внутри этого тега. Элемент не является обще употребляемым. Где возможно применяют атрибут align вместо этого элемента.
Этот тег придает тексту полужирное начертание. Очень популярный элемент. Использование полужирного начертания - прием, который позаимствовали из текстовых редакторов.
Этот элемент также изъят из текстовых редакторов. Он придает тексту начертание курсивом.
Этот элемент придает элементу зачеркнутое начертание. Сейчас используют просто <S> для эффекта зачеркивания.
Этот элемент подчеркивает содержимое этого тега.
Очень интересный тег, который увеличивает размер шрифта вот так. Есть элемент, который уменьшает размер шрифта:
Этот тег, в отличие от предыдушего, наоборот, уменьшает размер шрифта таким образом.
Вы, наверное, знаете, что некоторые текстовые редакторы поддерживают нижний индекс, так вот этот тег придаёт такое начертание. Таким образом
Этот тег, наоборот, придает эффект верхнего индекса. Так
Интересный элемент, который придает эффект текста, напечатанного на машинке. Например, Использование элемента TT
Элемент, обозначающий текст как вставленный. Визуально текст внутри элемента выглядит подчеркнутым. Например, Использование элемента INS.
Этот элемент обозначает текст как удаленный и выглядит зачеркнуто. Например, Использование элемента DEL .
Для указания источника изменений используют специальные атрибуты: cite, datetime.
Этот элемент задает базовый размер шрифта для всей страницы. Внутри элемента указывают атрибут size.
Этот элемент имеет огромное значение в HTML, так как он определяет форматирование текста внутри себя. Все характеристики используют при помощи специальных атрибутов:
Элемент FONT можно использовать вместо элемента Заголовков. Чтобы заголовок смотрелся солиднее можно чередовать с элементами I, B, P, center и др.
Пример:
<FONT size="4" color="black" face="Arial; Webdings; Times New Roman">Текст</font>
элемент имеет дополнительные атрибуты: align, class, dir, id, lang, style, title
Очень интересный элемент, который позволяет изменять направление текста. Он используется совместно с атрибутом dir
Например,Этот тег имеет значение, аналогичное элементу B, но все-таки лучше использовать элемент B!
Этот элемент выражает выразительность(emphrasis) фрагмента текста или определение(definition) чего-либо. Оба элемента аналогичны друг другу, а выделенный ими текст выглядит, как выделенный курсивом. В принципе этот элемент не нужен, так как можно просто выделить курсивом.
Этому элементу присущи атрибуты:dir, lang, title, style, class, id.
Элемент означает форматирование текста, как цитаты. Визуально текст мало меняется, но делается небольшой отступ. С кавычками текст не имеет никакой связи.
Этот элемент имеет специфический атрибут cite.
Этому элементу присущи атрибуты: dir, lang, title, style, class, id.
Этот элемент очень похож на blockquote, но он применяется для отступа цитаты внутри абзаца.
Этому элементу присущи атрибуты: dir, lang, title, style, class, id.
Предполагалось, что выделенный текст форматируется как ссылка или цитата в обычном понимании этого слова. Визуально выделенный текст выделяется курсивом.
Этому элементу присущи атрибуты: dir, lang, title, style, class, id.
Этот элемент подобен cite, но отличия этого элемента в содержании форматированного текста.
Этому элементу присущи атрибуты: dir, lang, title, style, class, id.
Элемент, предназначенный для вывода фрагмента программы. Этот элемент используется для форматирования текста программы.
Элемент, предназначенный для вывода фрагмента программы. Он предназначен для иллюстрации примеров(sample), вывода данных на дисплей.
Элемент, предназначенный для вывода фрагмента программы. Элемент выделения переменных программы.
Элемент, предназначенный для выделения текста, который пользователь должен ввести с клавиатуры. Считают, что отформатированный текст будет выделен полужирным начертанием с моноширинным шрифтом.
Этот элемент выделяет аббревиатуры, например:
MSIE(Microsoft Internet Explorer), HTML, WWW и другие.
Элемент выделяет акронимы (сокращения, образованные несколькими словами). Например, и т.д.; и т.п.
В HTML есть элементы, которые поддерживаются не всеми броузерами. Их существование обязано появлению новых версий языка. Во-вторых, результаты действий некоторых элементов заменяются более популярними методами. Каждый разработчик должен иметь ввиду то, что его страница будет просматриваться разными броузерами, а следовательно документ не должен изменять вид оригинала.
На сегодняшний момент есть официальная специфика языка, и все новые броузеры поддерживают старые элементы, но это не обязательно.
Так сложилось, что сам язык разрабатывается и совершенствуется одной организацией, а броузеры -другими. Следовательно, новые или старые элементы могут не поддерживаться.
Этот элемент используется для создания звуковых эффектов. Он употребляется в секции HEAD.
Элемент имеет ряд атрибутов:
loop -обозначает число повторений звукового фрагмента.
Для бесконечного повтора применяют:
loop="infinite" или loop="-1"
Можно задать громкость звука:
volume=число
Атрибут src очень важный, так как выбирает звуковой файл:
<BGSOUND src="имя_файла.wav">
Также имеет стандартные атрибуты: class, id, lang, title.
Этот элемент задает мгание текста. На сегодняшний день этот тег признан устаревшим, так как он поддерживается не всеми браузерами! Сейчас этот тег заменяется программами - сценариями.
Этот элемент был раньше заместо UL
<DIR>
<li>1-й пункт
<li>2-й пункт
<li> 3-й пункт
</dir>
Эти элементы еще в предыдушей версии считались устаревшими. Они имеют значение, сходное с PRE
Элемент предназначен для обозначения комментариев. Он поддерживается некоторыми броузерами. В официальной специфике языка этого элемента нет!!!
Ограничения по использованию этого элемента:
Элемент был придуман в качестве хранилища некоторого объекта. Он употребляется по следующей схеме:
<EMBED>
src="источник данных"
height="высота"
width="ширина"
attribute_1="значение 1-го атрибута"
attribute_2="значение 2-го атрибута"
</EMBED>
Элемент может содержаться внутри <EMBED></embed> и содержит определеный текст, который появляется, если браузер не поддерживает тег EMBED.
Предполагается, что x - равен 1,2,3... Этот элемент должен обеспечивать подсветку символов в строке. Hpx не поддерживается большинством браузеров, поэтому лучше его не использовать!
Этот элемент обеспечивает постоянный показ на экране содержимого этого элемента, не зависимо от прокрутки. Элемент поддерживается не всеми браузерами! Лучше использовать фреймы или скрипты.
Назначение этого элемента идентично PRE
Элемент, создающий бегущую строку. Сам по себе прием интересен, но наибольшего эффекта можно добиться, если удачно подобрать атрибуты.
Фоновый цвет задается обычным способом:
bgcolor="цвет"
Если фон задан, то этот элемент выглядит как цветная полоса, вдоль которой бежит текст. Высоту полосы можно регулировать двумя способами:
height="высота в пикселах"
height="чило в %"
Если высота полосы задается в пикселах, то можно порекомендовать задавать ее в диапазоне 30...50. Высоту можно задавать и в процентах. Процент определяет долю от высоты видимой части гипертекста внутри окна броузера. Эта величина, разумеется, не является постоянной и зависит от размера окна. Если высота полосы достаточно большая, имеет смысл использование атрибута align для выравнивания текста по верхнему краю, по середине или по нижнему краю полосы:
align="top"
align="middle"
align="bottom"
Правда, не все броузеры поддерживают этот атрибут. Вот пример полосы; зеленого цвета, высотой 50 пикселов, с выравниванием бегущего текста по середине:
<MARQUEE bgcolor="green" height="20" align="middle" scrollamount="8"> Бегущая строка </marquee>
Направление движения строки тоже можно менять:
direction="left"
direction="right"
Удачным атрибутом, на мой взгляд, оказался тот, который управляет поведением (behavior) строки. По умолчанию создается обычная бегущая строка, какие бывают на табло. Дойдя до края экрана (окна), она уходит из поля зрения, а затем появляется с противоположной стороны. Этот атрибут задается так:
behavior="scroll"
Второй вариант движения заключается в следующем: строка появляется из-за края окна, достигает противоположного края и останавливается. Атрибут таков:
behavior="slide"
По третьему сценарию строка не исчезает с экрана, но и не останавливается. Она движется вправо или влево, «отражаясь» от края окна и меняя направление движения. Атрибут в этом случае должен быть задан так:
behavior="alternate"
Всю Полосу можно сдвинуть по горизонтали вправо:
sрасе="смещеше в пикселах"
Выше и ниже полосы можно создать пустое пространство:
vspace="высота в пикселах"
Количество проходов строки по экрану можно ограничить:
loop="число"
Выполнив необходимое число проходов, строка остановится. В данном случае отсчет начнется только после трго, как пользователь увидит на экране бегущую строку.Скорость движения задает следующий атрибут:
scrollamount="число"
Если число равно 1, то строка будет еле ползти по сравнению с режимом по, умолчанию. Если число больше 10, то строка будет двигаться очень быстро. Дадный атрибут задает скорость движения как число пикселов, которые проходит1 строка за каждый шаг.
Существует второй атрибут скорости, определяющий временной интервал (в миллисекундах) между шагами:
scrolldelay="число"
С помощью этого атрибута можно заставить строку двигаться рывками.
На начало описания элемента MARQUEEАтрибуты - часто применяемые части языка HTML. Это очень удобные конструкции, которые облегчают жизнь разработчика. Использование атрибутов лучше всего объяснить на примере элемента FONT:
<font color="red" size=4 align="right"> Текст </font>
Как вы видите - способ применения атрибутов предельно прост. Они отделяются друг от друга только пробелом. Это всегда нужно учитывать при разработке страниц и при использовании атрибутов!
Атрибуты также применяются в Стилях. Здесь синтаксис немного отличается от стандартного. Атрибуты, входящие в набор какого-либо стиля, отделяются друг от друга не пробелом, как было сказано выше, а знаком: ; [точка с запятой]. Запомните, что такое разделение применимо только к атрибутам, входящим в состав стилей.
Атрибут align используется для выравнивания объектов. Этот атрибут может принимать следующие значения:
Для таблиц применяют атрибут valign:(выравнивание по вертикали)
Пример:
<P align="center">
Атрибут применяется для определения кодировки документа.
В основном этот атрибут применяется внутри тега META.
Например:
charset="windows-1251"
Этот элемент позволяет расширить возможности стилей, путем создания собственных имен стилей и последующего присвоения имени какому-либо элементу. Например,
<STYLE type="text/css">
H1.red {
color: RGB(215,40,40); text-align: center
}
</style>
Здесь мы видим, что буквам придан красивый красный цвет, а текст выровнен по центру.
Применять классы предельно просто:
<H1 class="red">текст абзаца</h1>
Прелестью классов является то, что можно создавать на одной странице несколько различных стилей(форматирований) для одного элемента.
Универсальные классы можно применять тогда, когда требуется создание класса, подходящего многим элементам сразу. Например,
#red {
color: RGB(215,40,40); font-weight:bold
}
<h2 id="red">Заголовок</h2>
Результатом является заголовок красного цвета полужирного начертания.
Всего должно быть в меру! Обилие стилей ухудшает восприятие, а страница выглядит новогодней ёлкой!
Этот атрибут задает программу или объект, которые могут быть использованы в определенных элементах.
Атрибут color используется для предания определенного оттенка объектам. Использование этого атрибута очень простое. Вот пример:
color="цвет"Можно применять в качестве цвета английское название, а можно RGB оттенок.
Некоторые примеры цветов и оттенков смотрите здесь.
Например:
<P color="red">абзац красного цвета</p>
в некоторых языках буквы читаются справа на лево. Для этого существует атрибут dir. Он может принимать значения:
dir="LTR" -слева направо
dir="RTL" -справа налево
Этот атрибут теоретически может применяться в разных элементах, хотя некоторые браузеры не поддерживают атрибут. Есть более надежный способ при помощи элемента BDO
Этот атрибут применяется для расширения возможностей разработчика. Он является универсальным именем элемента. В зависимости от типа элемента, этот атрибут выполняет различные функции. Атрибут позволяет использовать классы(следующая ссылка в меню). Например, надо придать уникальный цвет, размер, шрифт и т.д. для кокой-либо части страницы. Придадим буквам серо-стальной цвет. Назовем его « rus ». Для чего, внутри элемента style вводите таблицу стилей:
#rus {
color: RGB(155,180,190); font-weight: bold
}
Из-за того, что оттенок подбирается очень точно без функции RGB() не обойтись. Буквы будут очень светлыми, поэтому придадим им полужирное начертание. Этот стиль можно будет применять к различным элементам, например:
<H2 id="rus"> Заголовок, отформатированный стилем "rus"</h2>
Такой абзац будет выглядеть очень оригинально, так как будет отличаться от других. Так можно менять обилие установок по умолчанию.
Но не забывайте, что всего должно быть в меру! И излишняя разукрашенность может притупить восприятие страницы!
Вот пример основных кодов:
ar -арабский
de -немецкий
el -греческий
en -английский
eu-us -американская версия английского языка
es -испанский
fr -французский
he -иврит
hi -хинди
it -итальянский
ja -японский
nl -голландский
pt -португальский
ru -русский
zh -китайский
но в некоторых языках буквы читаются справа на лево. Для этого существует атрибут dir.
Пример:
<FONT lang="en">Text</font>
Атрибут longdesc применяется, когда какой-либо элемент нуждается в большом комментарии. В этом случае прикрепляют в виде:
longdesc="URL"
Для коротких описаний используйте атрибут title.
Этот атрибут применяют для указания желаемого размера шрифта. Он применяется внутри элементов BASEFONT, FONT Атрибут принимает размеры от 1 до 7, но можно указать не точную цифру, а прибавление или вычитание из величины по умолчанию(по умолчанию используется 3-й размер). Пример использования:
size="число"
size="+число(до 4)"
size= "-число(до 2)"
Вот визуальные примеры использования атрибута:
Шрифт 1
Шрифт 2
Шрифт 3
Шрифт 4
Шрифт 5
Шрифт 6
Шрифт 7
Этот атрибут в отличие от longdesc применяют к элементу для короткого комментария, который появляется на экране в виде всплывающей строки.
title="маленький комментарий"
Например:
<P title="Комментарий к абзацу">Абзац</p>
Атрибут type определяет тип документа, который используется в ссылке. Первоначально type применялся для определения формата отправленной электронной почты, но сеанс служит для указания форматов документов, в составе Web -страниц. Например:
Для форм атрибут имеет другой смысл: определенного элемента формы(кнопки, поле ввода и т.д.)
Например:
<STYLE type="text/css">Стиль</style>
Применение атрибута style:
<P style="свойство1: значение; свойство2: значение; ...">Например:
<P style="font-size: 14pt; font-style: italic; color: red">
Здесь для абзаца выбран 14-й размер букв, курсив и красный цвет букв.
Так выглядит абзац, отформатированный стилем, указанном в примере.
Атрибут clear позволяет выравнивать объекты, например рисунки, относительно текста, в котором использован элемент BR.
Значения атрибута:
Например:
<BR clear="center">
Этот атрибут применяется вместе с элементом FONT. Он задает один или несколько шрифтов (через точку с запятой)
Например,
face="arial; verdana; tahoma"
К сожалению есть проблема: Так как Web -страницы просматривают много людей, то нет гарантии, что отобразится нужный шрифт на всех компьютерах. Если на компьютере нет шрифта из списка, то страница будет просматриваться с шрифтом по умолчанию.
Атрибут выражает высоту какого-либо объекта. Этот атрибут обычно используется для задания высоты изображения.
height=число
Атрибут выражает ширину какого-либо объекта. Этот атрибут обычно используется для задания ширины изображения.
width=число
Число может принимать ряд значений: в пикселях, в процентах и т.д.
Этот специальный атрибут указывает источник изменений, то есть объясняет, почему в тексте появилась такая ремарка. Он используется по принципу:
cite="Адрес"
Для даты изменения также предусмотрен специальный атрибут - DATETIME. Он применяется по принципу:
datetime="Дата"
В конечном счёте первичный тег может иметь вид:
<INS datetime="1-1-2000" cite="http://www.name.domen/page.htm">
Атрибут определяет пустое пространство справа и слева от объекта и употребляется:
hspace="число(в пикселях)"
Атрибут определяет пустое пространство сверху и снизу от объекта и употребляется:
vspace="число(в пикселях)"
Таблицы в HTML можно сделать похожими на EXEL-евские таблицы. Например мы можем объединить ячейки:
Данные в ячейках можно выровнять при помощи атрибута align. Этот атрибут можно применять как ко всей таблице, так и к отдельной ячейке.
Мы можем задавать определенную ширину ячейки при помощи атрибутов height (высота) и width (ширина).
Этот элемент обозначает границы таблицы и отделяет её от других частей страницы. Он позволяет задать свойства таблицы. Этот элемент имеет ряд атрибутов:align, width, height
Для элемента table характерны ряд специальных для таблиц атрибутов:
border -ширина боковой грани. Если этот атрибут принимает нулевое значение, то рамка вовсе исчезает.
cellspacing -определяет ширину фронтальной границы(внутренняя часть). Если атрибут принимает значение, равное нулю, то рамка очень тонкая и заостренная.
cellpadding -этот атрибут применяют для определения пустого пространства, окружающего данные в ячейках. Задание атрибута позволяет улучшить восприятие таблицы, т.к. между данными и границей сохраняется определенное расстояние. Этот атрибут выражается в пикселях, процентах и т.д.
bgcolor -задание этого атрибута позволяет задать цвет конкретной ячейки или всей таблицы.
background -задает фон для таблицы или ячейки.
Атрибуты bgcolor и background можно задавать с другими элементами, кроме caption.
frame="параметр" -используется только с table.
Выделяют ряд параметров:
rules="параметр" -определяет вид сетки таблицы внутри. Как и предыдущий, он имеет ряд параметров:
Существует также специальный комментарий к таблице:
summary="текст комментария"
К таблицам можно применить также стандартные атрибуты: class, dir, id, lang, title, style.
Например:
<TABLE border="0" cellpadding="5" cellspacing="0" align="center">
<TR><TH>первый заголовок <TH>второй заголовок
<TR><TD>первая ячейка <TD>вторая ячейка
</table>
Этот элемент используется для задания заголовка таблицы. Он должен быть расположен внутри элемента TABLE, хотя сам выводится вне рамки таблицы.
К таблицам применимы также стандартные атрибуты: class, dir, id, lang, title, style.
Этот элемент создаёт строку таблицы. Этот элемент не имеет конечного тега. Следовательно начало новой строки - следующий тег TR. Внутри находятся другие теги, определяющие состав таблицы TD, TH
Этот тег допускает использование выравнивания align
Этот элемент управляется тегом TR и должен быть внутри него. Элемент ячейки, являющийся заголовком строки или столбца. Элемент отличается от обычного TD тем, что браузер выводит содержимое полужирным начертанием.
Этот элемент определяет обычную ячейку. Эти элементы могут не иметь конечного тега, так как его функцию определяет следующий тег TR, TH и TD.
Для каждого тега таблицы можно задать атрибуты цвета (bgcolor), фона(background).
Элемент обозначает заголовок таблицы.
Этот элемент обозначает низ таблицы
Этот элемент дает понять браузеру о том, что он имеет дело с основной частью таблицы.
Примечание:
Тег позволяет создать группы колонок(столбцов) с одинаковыми свойствами. С этим тегом применяется атрибут span, который обозначает количество столбцов, на которые распространяется данный элемент.
Этот элемент, в отличие от предыдущего, назначает свойство одной колонки(столбца).
Заметьте, что свойства колонок(столбцов)задаются по порядку, то есть первому столбцу соответствует первый элемент COL или COLGROUP, второму -второй, третьему -третий и т.д.
Нужно помнить, что элемент COLGROUP важнее, чем COL.
Я думаю, что каждой отдельной ячейке проще задать определенные свойства(этот шаг не запутает Вас), что и делают профессиональные WED -мастеры!
Фреймы -это области страницы, в которых отражаются несколько ресурсов(HTM или HTML и др. файлов). Сейчас почти все браузеры поддерживают фреймы, т.к. идея использования завоевала весь Мир! Страница с фреймами содержит два или более файлов, которые определяют, во-первых, документ раскладки(структура страницы), во-вторых, документы, в которых содержатся сама страница.
Для начала надо решить, какое разбиение требуется для страницы: вертикальное или горизонтальное
Создание страницы с фреймами можно разделит на два этапа:
Учтите, что тег FRAMESET ставится вместо секции BODY!!!
Вместе с этим элементом можно употреблять стандартные атрибуты: id, class, title, style.
Кроме стандартных атрибутов, элемент имеет ряд собственных, которые усовершенствывают внешний вид окна страницы. Внутри элемента FRAME должны содержаться ссылки на файлы -части страницы. Кроме того, каждый элемент FRAME полезно снабжать именем, при помощи атрибута name. Это имя впоследствии можно использовать в гиперссылках. Результат может быть такой.
<FRAME src="имя файла.htm" name="имя фрейма">
После загрузки страницы пользователь может передвигать границы фреймов. С помощью атрибута noresize вы можете запретить пользователю передвигать границы окон.
Вы можете управлять полосами прокрутки с помощью атрибута scrolling, который может принимать значения:
scrolling="yes" -полоса прокрутки будет автоматически включена, независимо от её необходимости.
scrolling="no" -этот атрибут запрещает появление полосы прокрутки, даже если она требуется.
scrolling="auto" -(значение по умолчанию) атрибут передает все полномочия появления и исчезновения полосы прокрутки системе.
Существует атрибут longdesc, который придает фрейму описание.
Атрибутом frameborder -вы можете создать рамку вокруг фрейма.
frameborder=1 -рамка включена;
frameborder=0 -рамки нет.
Можно задать отступы от верхнего и нижнего краев окна при помощи атрибута: marginheight (значение указывается в пикселях).
marinheight="100"
Также можно регулировать отступы справа и слева, с помощью атрибута marinwidth(значение указывается в пикселях.)
marinwidth="100"
Этот элемент специально предусмотрен для случаев, когда броузер не поддерживает фреймы. В этом случае надо предупредить и переадресовать клиента к другой старицы (без фреймов). Этот код выглядит следующим образом:
<HTML>
<HEAD>
<TITLE>Заголовок </title>
</head>
<FRAMESET cols="nn%, mm%">
<FRAME src="page1.htm">
<FRAME src="page2.htm">
<NOFRAMES>
<P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без фреймов</a></p>
</noframes>
</frameset>
</html>
Естественно, что браузеры, поддерживающие фреймы не будут воспроизводить эту надпись.
Файл Frame1.htm
<HTML>
<HEAD>
<TITLE>Заголовок для фреймов</title>
</head>
<FRAMESET frameborder=1 framespacing=5 cols="160, *">
<FRAME src="m1.htm" name="menu01" noresize >
<FRAME src="right1.htm" name="info01">
<NOFRAMES>
<P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без фреймов</a></p>
</noframes>
</frameset>
</html>
Файл M1.htm
<HTML>
<HEAD>
<TITLE>Левый фрейм</title>
</head>
<BODY text="black" bgcolor="gold" link=" green" vlink="purple" alink="red">
<H3>Меню</h3>
<HR>
<a target="info01" href="right1.htm"> Правый 1</a>
<a target="info01"href="right2.htm"> Правый 2</a>
</body>
</html>
Файл Right1.htm
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<BODY text="black" bgcolor="#9CB3BE" link="green" vlink="purple" alink="red">
<H2>Правый фрейм № 1</h2>
<a href="right2.htm">Следующая страница</a>
<hr>
</body>
</html>
Файл Right2.htm
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<BODY text="black" bgcolor="pink" link="green" vlink=" purple" alink="red">
<H2>Правый фрейм № 2</h2>
<a href="right1.htm">Предыдущая страница</a>
<hr>
</body>
</html>
Заметьте, что имена выделенные красным ОБЯЗАТЕЛЬНО должны совпадать, иначе страница, вызываемая по ссылке будет открываться в новом окне!!!
Теперь давайте разберем организацию ссылок. Первый файл: Frame1.htm не содержит информации для отображения на странице, но он задает разбиение на фреймы страницы(размеры областей, документы содержания). Здесь важно, чтобы каждый фрейм содержал атрибут name
name=" info01"
Страницы, показываемые внутри фрейма могут быть разными, а имя не меняется и остается постоянным и используется в гиперссылках.
Левый фрейм(файл M1.htm) содержит страницу -меню, с помощью которой можно легко совершать серфинг по странице. Этот фрейм содержит две ссылки, но их может быть гораздо больше. Он более узкий, нежели правый.
Заметьте, что заголовок взят из файла Frame1.htm. Это единственная информация из этого файла, которую мы увидим в окне браузера. А теги TITLE из других страниц скрыты.
В принципе файлы Right1.htm и Right2.htm служат для размещения какой-либо информации. Также в них можно разместить разные ссылки возвращения назад и дальше(для удобства).
В примере вы можете видеть два вида ссылок: в меню и на странице.
Атрибут target нужен для определения окна, в котором откроется объект. Атрибут target имеет несколько значений:
Употребляется атрибут по следующей схеме:
<a target_blank href="ссылка">Текст ссылки</a>
Запомните, что по умолчанию, браузер открывает ссылку (без атрибута target) в текущем фрейме!
Шаблон для создания такого файла выглядит следующим образом:
<IFRAME src="имя_файла.htm" width="nnn" height="mmm">
<P>Для просмотра этой страницы нужен броузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фремов.htm"> без фреймов</a></p>
</iframe>
Этот элемент имеет ряд атрибутов, например height и width, frame, scrolling, target и др. атрибуты фреймов
Допускается использование стандартных атрибутов: id, class, title, longdesc, style, align.
Таблицы стилей(style sheets) являются одной из самых интересных и красивых нововведений HTML 4. Они позволяют изменять свойства разных элементов в соответствии с желаниями разработчика.
Таблицы стилей применяют по принципу:
Элемент.имя_стиля {
свойство1: значение; свойство2: значение; ...
}
В конечном счете мы имеем набор свойств для выбранного элемента. Так мы значительно расширяем возможности HTML. Спецификой применения стилей является то, что при присвоении стиля элементу, выделяется все содержимое начального и конечного тегов! Например, присвоив стиль элементу BODY, он будет распространяться на всю Web - страницу. В соответствии с синтаксисом HTML, автор должен включить в заголовок соответствующее определение:
<META http-equiv="Content-Style-Type" content="text/css">
Таким образом браузер получит информацию о применении стилей
Нужно отметить, что есть другие способы определения свойств элементов, например, JavaScript, VBScript и т.д.
Стили можно применять, как атрибуты, подробнее здесь.
Элемент STYLE позволяет задать(изменить) свойства одноименных элементов, например:
<STYLE type="text/css">
H1 {border-width: 1; border: groove; text-aligh: center; color: green}
H2 {color: maroon; font-style: italic}
</style>
Как мы видим, здесь немного расширены возможности элемента заголовков.
Для строки H1 {border-width: 1; border: groove; text-align: center; color: green} Ширина рамки, сама рамка, выравнивание текста и цвет текста, соответственно.
Для строки H2 {color: maroon; font-style: italic} выбран цвет заголовка и курсив, соответственно.
Внимание! Если вы решили задать одинаковые значения нескольким элементам сразу, то не надо писать много строк, указывая каждому элементу общие значения, а просто сделайте пробел между элементами; браузер должен понять, что элементы имеют одинаковые атрибуты.
Этот элемент позволяет расширить возможности стилей, путем создания собственных имен стилей и последующего присвоения имени какому-либо элементу. Например,
<STYLE type="text/css">
H1.red {color: RGB(215,40,40); text-align: center}
</style>
Здесь мы видим, что буквам придан красивый красный цвет, а текст выровнен по центру.
Применять классы предельно просто:
<H1 class="red">текст абзаца</h1>
Прелестью классов является то, что можно создавать на одной странице несколько различных стилей(форматирований) для одного элемента.
Универсальные классы можно применять тогда, когда требуется создание класса, подходящего многим элементам сразу. Например,
#red {color: RGB(215,40,40); font-weight:bold}
Здесь написан стиль для полужирного начертания букв красивого красного цвета. Кстати, функция RGB незаменима при потребности в очень точном подборе цвета. Применяется этот метод при помощи атрибута ID:
<h2 id="red">Заголовок</h2>
Результатом является заголовок красного цвета полужирного начертания.
Всего должно быть в меру! Обилие стилей ухудшает восприятие, а страница выглядит новогодней ёлкой!
Этот элемент используется для подключения отдельных файлов, в которых хранятся стили. Все дело в том, что автор может применять несколько файлов со стилями, которые будут называться каскадными(CSS). Для этого создается файл, в котором прописываются стили в формате универсальных классов
Элемент LINK применяется по типу:
<LINK href="имя_файла.css" rel="stylesheet" type="text/css">
Атрибут REL указывает на то, что это ссылка на каскадные таблицы стилей; про атрибут type вы можете узнать здесь.
Этот элемент специально предназначен для применения стилей. Специфика этого элемента состоит в указании ячейки, то есть его собственный стиль должен влиять на стили элементов, находящихся внутри DIV. Элемент DIV применяют по принципу:
<HEAD>
<STYLE type="text/css">
DIV.имя {Свойство: значение;...}
</style>
<BODY>
<DIV class="имя">
<H1>Заголовок</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
</body>
Элемент SPAN, наоборот включают в в состав других элементов.
<HEAD>
<STYLE type="text/css">
SPAN.имя {Свойство: значение;...}
</style>
</HEAD>
<BODY>
<H1>Заголовок</h1>
<p>Первый абзац</p>
<p><span class="имя">Второй абзац</p>
</body>
Списки (list) появились в HTML из-за большой популярности в текстовых редакторах. Главное отличие списка от текста состоит в том, что браузер автоматически нумерует пункты списка. Если список ненумерованный, то программа автоматически ставит маркеры перед пунктами(кружки, прямоугольники и т.д.) результатом является легко читаемый список. Теги в списках можно разделить на две группы: внешние и внутренние. Первые информируют браузер о том, что это список, второй, о конструкции списка. Есть несколько разновидностей списков: ненумерованные и нумерованные, вложенные и т.д..
В принципе использование списков можно легко заменить таблицей, как впрочем и делают большинство Web мастеров.
Это самый простой вид списка. Его легко представить:
<UL>
<LI>1-й пункт списка
<LI>2-й пункт списка
<LI>3-й пункт списка
</ul>
Элементы UL: начало и конец списка, а LI: обозначение каждого нового пункта. Внешне наш список выглядит так:
Это более сложный вид списка. Его представляют:
<ОL>
<LI>1-й пункт списка
<LI>2-й пункт списка
<LI>3-й пункт списка
</оl>
Элементы ОL: начало и конец списка, а LI: обозначение каждого нового пункта. Внешне наш список выглядит так:
Этот элемент имеет свои собственные атрибуты:
| Значение | Вывод |
|---|---|
| Type 1 | 1,2,3,4,... |
| Type i | i,ii,ii,iv,... |
| Type I | I,II,III,IV,... |
| Type a | a,b,c,d,... |
| Type A | A,B,C,D,... |
Есть атрибут, который позволяет указать значение, с которого должна начаться нумерация списка:
start=номер
Например, если перед нами список type=I и start=4, то первая строка будет содержать номер IV, вторая V, третья VI и т.д.
Для элемента LI можно выбрать номер текущего пункта списка при помощи атрибута
value=номер
Это более сложный вид списка. Его представляют:
<dl>
<DT>1-й пункт
<DD>Определение пункта 1
<DD>другое определение пункта 1
<DT>2-й пункт
<DD>Определение пункта 2
<DT>3-й пункт
<DD>Определение пункта 3
</dl>
Этот список визуально выглядит так:
Можно создать список из нескольких элементов, который будет выглядеть очень благородно:
<UL>
<LI>Пункт 1
<OL>
<LI>пункт 1.1
<LI>пункт 1.2
</ol>
<LI>Пункт 2
<OL>
<LI>Пункт 2.1
<LI>Пункт 2.2
</ol>
<LI>Пункт 3
<OL>
<LI>Пункт 3.1
<LI>Пункт 3.2
</ol>
</ul>
Визуально этот список выглядит так:
Этот элемент можно назвать одним из самых важных, так как он обеспечивает создание гиперссылок. Чаще всего используются такие шаблоны:
Любой текст <a href="Адрес ссылки">Текст для клика</а>
или:
<a href="Адрес ссылки"><IMG src="Ссылка на рисунок"></а>
Первый шаблон используется для гиперссылки в тексте. Второй, если видимая часть гиперссылки - это рисунок.
Если надо указать ссылку на локальный ресурс, то используют такой вид:
Любой текст <a href="file:// Диск:/Путь к файлу/файл.тип">Текст для клика</а>
В принципе, все страницы - файлы сайта можно разместить в одной папке. В этом случае просто указываете имя файла и тип. Часто используют относительные ссылки; это позволяет легко менять местоположение набора страниц, тогда фрагмент ссылки строится по принципу:
href="./Папка/файл.тип"
Здесь на структуру вложенных папок указывает точка перед наклонной чертой. Если необходимо указать папку, которая находится на том же уровне вложения, что и текущая, то добавляют ещё одну точку:
href="../Папка/файл.тип"
Как большинство элементов, A имеет некоторые атрибуты:
href="URL"
Например, href="http://www.opera.com".
HTTP- означает способ доступа для ссылки.
Есть и другие схемы доступа:
Для ссылки на электронную почту используют:
<a href="mailto:имя@название.домен">Текст для клика</а>
Для больших страниц удобно использовать ссылки для перехода внутри страницы:
<a name="Метка">Текст для клика</а>
Для перехода к фрагменту на другой странице используют:
<a href="http://URL/file.type/#Метка">Текст для клика</а>
Для перехода внутри страницы используют:
Подсказка<a href="#Метка">Текст для клика</а>
Для элемента А также предусмотрены атрибуты:
Вместе можно использовать стандартные атрибуты:
class, dir, id, lang, title, style, type.
В ХТМЛ есть определение объекта и звучит оно так: это некая нестандартная часть страницы, которую определяет пользователь.
К объектам относятcя рисунки, таблицы, окна и т.д.
Особняком стоят объекты- программы. При их помощи можно создавать нестандартные части страниц. Они вставляются при помощи универсального элемента OBJECT.
Элементы объектов (IMG, OBJECT, APPLET) можно использовать с атрибутами: border, width, height, hspace, vspace и стандартными атрибутами: align, charset, class, classid, color, dir, id, lang, longdesc, size, title, type, style.
Элемент для вставки графических объектов - файлов(images). Элемент не имеет конечного тега, так как вся нужная информация задается при помощи атрибутов.
Атрибут src - указатель на графический файл:
src="ссылка на файл"
<IMG src="http://www.название.домен/имя файла">
Атрибут alt - описание рисунка. Это полезно для комментариев, в которых иногда нуждается рисунок.
alt="текст комментария"
Также можно использовать атрибуты: width, heigth и стандартные атрибуты: class, dir, id, lang, title, style, type, longdesc.
Также этот элемент позволяет назначать некоторые части рисунка, как ссылки. В этом случае включаются атрибут ismap.
ismap="ismap"
Хотя значение атрибута не обязательно!
Также включается атрибут usemap:
usemap="#имя карты"
Имя выбирается в соответствии с элементами MAP и AREA
При использовании этого атрибута элемент IMG приобретает свойства гиперссылки и обязательное использование 3-х элементов: MAP и AREA и IMG.
Элемент нужен для общего определения карты. Внутри при помощи элемента AREA задаются области карты и имя карты при помощи атрибута name.
name="Имя объекта"
Для каждой области карты должен быть определен свой тег AREA, вклочающий атрибут - ссылку href.
Внуть элемента можно включить и описание alt.
Для определения формы карты применяется атрибут shape, имеющий 3 значения: circle(круг), rect(прямоугольник) и polygon(многоугольник произвольной формы)
shape="circle" coords="x,y,r"
где x;y - координаты центра(отсчет от верха (х) и левого края (у) рисунка) и r - радиус карты.
shape="poly" coords="x1,y1, x2,y2, x3,y3..."
где x1,y1, x2,y2, x3,y3... - координаты каждого из углов многоугольника (по часовой стрелке).
shape="rect" coords="x1,y1, x2,y2"
где x1,y1, x2,y2 - координаты верхнего левого и нижнего правого углов прямоугольника.
При помощи атрибута nohref (используется без значений) можно запретить переход по ссылке для определенной области карты.
Для обращения к карте можно использовать элемент OBJECT
<OBJECT data="Имя.gif" type="image/gif" usemap="#Имя карты"></object>
Для составления карт удобней всего пользоваться графическими редакторами для установления координат карты. Координаты должны соответствовать положению курсора на картинке.
Элемент предназначен для вставки программы на Java-языке в броузеры, имеющие java плагины.
<APPLET code="Имя.class" width="число" height="число">Комментарий</applet>
Атрибут code задает имя файла - программы и путь к ней.
Атрибут codebase задает базовое имя файла - программы и путь к ней.
Также этот элемент поддерживает атрибуты alt, name, vspace, hspace и стандартные атрибуты: id, class, title, style.
Простейшее применение этого объекта - размещение рисунка:
<OBJECT data="Имя.gif" type="image/gif"></object>
Также можно использовать этот элемент вместо IFRAME или APPLET:
<OBJECT codetype="application/java" classid="java:идентификатор" width="число" height="число"> Комментарий</object>
Атрибуты, характерные для OBLECT:
Элемент используется внутри APPLET или OBJECT:
<OBJECT classid="Адрес объекта" standby="значение">
<PARAM name="имя параметра" value="Значение параметра" valuetype="Тип параметра">
<PARAM name="имя параметра" value="Значение параметра">
</object>
Или:
<APPLET code="Имя.class" width="число" height="число">
<PARAM name=" имя параметра" value=" Значение параметра">
Комментарий
</applet>
Этот элемент должен обязательно содержать атрибуты name и value="значение"
Атрибут valuetype имеет следующие значения:
Формы могут иметь ряд составляющих: поля ввода, кнопки, переключатели и т.д. Для тегов указывают атрибуты, влияющие на их работу.
Большинство элементов принимают определенные значения. Для доступа программ к значениям используют атрибут name. Для задания подписей в поле ввода текста, определение вида переключателей используется атрибут value.
tabindex=номер
Атрибут tabindex определяет последовательность перехода курсора (при нажатии клавиши TAB) от одного поля формы к другой. Соответственно, если атрибут будет tabindex=1, то курсор при открытии броузера установится на элемент, содержащий атрибут с таким значением.
Можно назначить сочетание клавиш быстрого доступа при помощи атрибута accesskey.
accesskey="Клавиша"
При нажатии ALT+клавиша курсор автоматически переместится к полю формы, обозначенному соответствующим атрибутом.Атрибут disabled делает форму недоступной, то есть элемент нельзя выбрать и изменить. Причем форма не может измениться.
Есть ряд специфических атрибутов-событий:
Этот элемент самый простой среди всех. Он предназначен для ввода текста и генерирования запроса на сервер.
Для подсказки можно добавить аргумент prompt:
<ISINDEX prompt="Строка для ввода текста поиска">
Вот результат:
Работа этого элемента напрямую связана с элементом BASE. К примеру задан базовый URL:
<BASE href="http://www.название.домен/путь">
Значение атрибута href - это адрес некоторой поисковой системы Интернета. Если пользователь ввел запрос из 3-х слов, то броузер автоматически сгенерирует запрос типа:
http://www.название.домен/?слово1+слово2+слово3
Строка будет отправлена на сервер для активизации поисковой машины. Теоретически метод очень удобен, но на практике не все поисковые машины поддерживают знаки: {?} и {+}. Следовательно, этот способ поиска годится для некоторых поисковых машин.
Стандартные атрибуты: id, class, lang, dir, title, style.
Этот элемент предназначен для построения сложных форм. После заполнения формы она обрабатывается при помощи CGI программ.
Атрибут action указывает на имя программы:
<FORM action="http://www.название.домен/имя программы" method="post">
Форма
</form>
Можно переслать форму по электронной почте:
<FORM action="mailto:адрес@сервер.домен" method="post">
Форма
</form>
Атрибут method предназначен для назначения протокола пересылки данных на сервер. Протокол GET назначен по умолчанию. Он может не удовлетворять требований разработчика, поэтому применяют протокол POST, который используется чаще.
Атрибут enctype указывает на способ кодирования содержимого формы.
Атрибут accept-charset предназначен для задания списка допустимых кодировок.
accept-charset="список кодировок"
Этот атрибут предназначен для определения типа данных:
accept="список типа данных"
Большинство форм снабжается кнопками, которые очищают (reset) или подтверждают форму(submit) и отправляют на сервер.
Есть 2 атрибута событий, применяемые вместе с программами-сценариями: onsubmit, onreset.
Стандартные атрибуты: id, class, lang, dir, title, style, title и атрибуты событий.
Элемент позволяет создать различные части формы: флажки, переключатели, поля ввода и др.
Этот элемент не имеет конечного тега.
Вид элемента определяет атрибут type:
<INPUT type="text" value="введите текст">
<INPUT type="text" value="Пароль" name="passwrd">
- введите пароль
<INPUT type="checkbox" value="1" name="checkbox">
<INPUT type="checkbox" value="2" name="checkbox" checked>
<INPUT type="checkbox" value="3" name="checkbox">
- флажки
<INPUT type="radio" name="switch" value="1">
<INPUT type="radio" name="switch" value="2" checked>
<INPUT type="radio" name="switch" value="3">
- переключатели
<INPUT type="button" value="Кнопка" name="but">
<INPUT type="submit" value="Послать">
<INPUT type="reset" value="Очистить">
<INPUT type="image" src="button.gif" name="image">
<INPUT type="file"name="browser">
<INPUT type="hidden" name="info">
- здесь находится элемент, скрытый от пользователя.
Существует ряд атрибутов, употребление которых просто необходимо для правильной работы и обработки сервером формы.
Атрибут name должен присутствовать во всех элементах INPUT, кроме кнопок подтверждения сброса. Значение этого атрибута - имя поля формы. Благодаря этому атрибуту происходит обработка формы CGI программой на сервере.
Атрибут value задает значение кнопки по умолчанию или надпись на кнопке.
Наличие атрибута checked показывает броузеру, что флажок должен стоять по умолчанию. В флажка может быть выделено произвольное количество, в отличие от переключателей, где должен быть выбран только один элемент.
Aтрибут size задает длину поля ввода текста. Длина задается в символах.
Атрибут maxlength задает: во-первых, максимальное количество символов, которое может быть записано в строке ввода, а во-вторых, может ограничить размер файла, присоединяемого к форме.
Атрибут readonly позволяет создать нередактируемый элемент.
Атрибут usemap используется в картах.
Атрибут accept выше.
Применяются атрибуты accesskey, tabindex, disabled.
Стандартные атрибуты: id, class, lang, dir, title, style, title и атрибуты событий.
При помощи элемента FORM можно заменить ISINDEX:
<FORM action="действие" method="POST">
<P>Строка поиска:<BR>
<INPUT type="text">
</form>
Этот элемент - контейнер для других элементов:
<LABEL> Адрес: <INPUT type="text" id="adress"></label>
Если элемент LABEL и другой элемент находятся отдельно, то используют атрибут for, значение которого соответствует id другого элемента:
<LABEL for="adress"> Адрес: </label>
<INPUT type="text" id="adress">
Для каждого элемента формы создается свой элемент LABEL. Как правило, удобно использовать таблицы для выравнивания формы.
Стандартные атрибуты: accesskey, id, class, lang, dir, title, style, title и атрибуты событий.
<TABLE border="3">
<FORM action="mailto:Имя@сервер.домен" method="POST">
<TR>
<TD><LABEL for="imja">Имя:</label>
<TD><INPUT type="text" id="imja">
<TR>
<TD><LABEL for="familija">Фамилия:</label>
<TD><INPUT type="text" id="familija">
<TR>
<TD><LABEL for="ICQ">ICQ:</label>
<TD><INPUT type="text" id="telephon">
<TR>
<TD>Пол:
<INPUT type="radio" name="gender" value="Male"> М
<INPUT type="radio" name="gender" value="FeMale"> Ж
<TD align="bottom">
<INPUT type="submit" value="Послать" align="bottom">
<INPUT type="reset">
</form>
</table>
Эти элементы предназначены для создания списка (SELECT) и пунктов списка (OPTION)
<SELECT>
<OPTION value="1">Первый
<OPTION value="2">Второй
<OPTION value="3">Третий
<OPTION value="4">Четвертый
</select>
Атрибуты SELECT:
Стандартные атрибуты элемента SELECT: disabled, tabindex, id, class, lang, dir, title, style, title и атрибуты событий.
Атрибуты OPTION:
Стандартные атрибуты OPTION: disabled, id, class, lang, dir, title, style, title и атрибуты событий.
<TEXTAREA name="text" rows="5" cols="20">
Объект TEXTAREA
</textarea>
Атрибуты:
Этот элемент очень удобен, так как внутри него можно ввести очень большой фрагмент текста.
TEXTAREA может использоваться и отдельно от форм, как самостоятельный объект.
Стандартные атрибуты элемента SELECT: disabled, tabindex, id, class, lang, dir, title, style, title и атрибуты событий.
Находится в стадии разработки
Этот элемент подобен INPUT, но с помощью этого объекта можно составлять более сложные комбинации (текст и рисунок)
<BUTTON name="Имя" value="submit" type="submit">
Текст<IMG src="Файл.gif" alt="Подсказка" type="submit"></button>
Атрибут type принимает значения:
Стандартные атрибуты элемента SELECT: accesskey, disabled, tabindex, id, class, lang, dir, title, style, title и атрибуты событий.
<FIELDSET>
<LEGEND>Заголовок</legend>
Имя: <INPUT name="imja" type="text">
Фамилия: <INPUT name="familija" type="text">
ICQ: <INPUT name="ICQ" type="text">
Подсказка
</fieldset>
C помощью FIELDSET элементы формы выделяются рамочкой. Это элемент-контейнер, следовательно, в него можно поместить и другие элементы.
Атрибуты:
Стандартные атрибуты элемента LEGEND: accesskey, id, class, lang, dir, title, style, title и атрибуты событий.
Для страницы могут быть определены программы, выполняемые только при определенных действиях пользователя. Для этого момент запуска программы привязывается к определенным событиям.
События, связанные с мышью:
События, связанные с выбором элементов и редактированием форм:
События, связанные с клавиатурой:
Это свойства, которые можно использовать в таблицах стилей. Этот перечень называется CSS2 -каскадные таблицы стилей второго уровня.
Все свойства могут иметь стандартное занчение inherit - наследование свойств родительского элемента.
Если используются числовые значения, то они могут принимать следующие значения:
Единицы длины:
Единицы времени:
Величины, указанные в процентах, обозначаются знаком %.
Значения: названия шрифтов, которые могут быть использованы на Web-странице.
Пример:
BODY {font-family: Times New Roman, Verdana, Tahoma}
Стиль шрифта
Значения:
Это еще один стиль шрифта
Значения:
Пример:
P {font-variant:small-caps}
Это толщина символов.
Значения:
Это размер шрифта.
Значения:
Пример:
P {font-size:10pt}
Это выбор определенного шрифта, применяемого к конкретным элементам.
Значения могут принимать свойства: font-family, font-style, font-variant, font-weight, font-size, line-height.
Значения:
Пример:
P.iconka {font:icon}
Это величина отступа первой строки абзаца.
Значения: числовые.
Выравнивание текста.
Значения:
Это оформление текста.
Значения:
Не поддерживается большинством знаменитых броузеров. Вы можете создавать тени к тексту.
Значения - список величин, определяющих характеристики тени.
Пример:
P {text-shadow: 3pt 3pt 4pt white} - создание тени белого цвета справа и снизу с 4-м радиусом размытия
Задает межбуквенный интервал.
Значения:
Пример:
P {letter-spacing: 15pt}
Высота строк.
Значения:
Выбор расстояния между словами.
Значения:
Изменение вида букв.
Значения:
Определяет вид пробелов.
Значения:
Пример:
<P style="white-space: normal">
Направление текста (сходно с dir).
Значения:
Определение видов маркеров в списке.
Значения:
Пример:
li {list-style-type: square}
Определение рисунка, который будет использован в качестве маркеров.
Значения:
Положение маркера относительно списка.
Значения:
Определяет вид маркеров. В качестве значения может использоваться несколько величин свойств: list-style-type, list-style-image, list-style-position.
Пример:
UL {list-style: circle outside}
.
Значения:
Количество строк, которое займет ячейка.
Количество столбцов, которые займет ячейка.
Способ прорисовки рамки.
Значения:
Свойства рамки (толщина, цвет, тип).
Значения:
Способ вертикального выравнивания.
Значения:
Способ формирования таблицы.
Значения:
Ширина.
Значения:
Минимально и максимально допустимая ширина объекта.
Значения:
Высота.
Значения:
Минимально и максимально допустимая высота объекта.
Значения:
Алгоритм вычисления координат границ объекта.
Значения:
Координаты верхней, нижней, правой, левой границ элемента.
Значения:
Размер пустого пространства рядом с определенной стороной элемента.
Значения:
Отступы вокруг элемента.
Значения:
Пример:
P {margin: 10pt 10pt 10pt 10pt}
Отступы между определенной границей элемента и его содержимым.
Значения:
Отступы между границами элемента и его содержимым.
Значения:
Пример:
P {padding: 10pt 10pt 10pt 10pt}
Ширина рамки.
Значения:
Толщина рамки.
Значения:
Цвет элементов рамки.
Цвет рамки.
Вид элементов рамки.
Значения:
Вид рамки.
Значения:
Одновременное задание свойств border-top-width, border-top-color, border-top-style.
Пример:
P {border-top: thick dotted white}
Одновременное задание свойств border-bottom-width, border-bottom-color, border-bottom-style.
Пример:
P {border-bottom: thick dotted white}
Одновременное задание свойств border-left-width, border-left-color, border-left-style.
Пример:
P {border-left: thick dotted white}
Одновременное задание свойств border-right-width, border-right-color, border-right-style.
Пример:
P {border-right: thick dotted white}
Одновременное задание свойств border-width, border-color, border-style.
Пример:
P {border: thick dotted white}
Способ изменения размеров объекта, если оно не может быть показано целиком.
Значения:
Способ обтекания элемента другими элементами.
Значения:
Пример:
IMG {float: right}
Способ расположения элемента, следующего за элементом, выровненном по левому (правому) краю.
Значения:
Определение видимой части объекта.
Значения:
Пример:
P {clip: rect(10px 15px 15px 10px);}
Видимость объекта.
Значения:
Способ перекрытия объектов. Объект с большим значение находится выше.
Значения:
Цвет элемента или содержимого.
Пример:
P {color:rgb(255, 120, 120)}
U {color: white}
Цвет фона.
Значения:
Пример:
P {background-color: transparent}
Фоновый рисунок.
Значения:
Пример:
TABLE {background-image: url(http://www.name.domen/picture.gif)}
Свойство определяющее необходимость повторения фонового рисунка для заполнения пространства элемента.
Значения:
Пример:
BODY {background-image: url(http://www.name.domen/picture.gif); background-repeat: repeat}
Прокрутка фона.
Значения:
Начальное положение фонового рисунка.
Значения:
Если указана одна величина, то она является отступом по горизонтали, а по вертикали значение 50%.
Пример:
BODY {background-image: url(http://www.name.domen/picture.gif); background-position: top left}
Фон элемента. Одновременное задание свойств: background-color, background-image, background-repeat, background-attachment, background-position.
Пример:
TR {background: url(http://www.name.domen/picture.gif)}
P {background: url(http://www.name.domen/picture.gif) white 0% repeat fixed}
Громкость.
Значения:
Синтезатор речи для озвучивания текстов, записанных в документе.
Значения:
Темп речи при работе синтезатора речи.
Значения (количество слов в минуту):
Величина паузы перед или после воспроизведения содержимого.
Значения:
Одновременное задание свойств: pause-before и pause-after.
Пример:
P.pause {pause: 20ms 40ms}
Задание звуковых файлов, воспроизводимых до и после использования элемента.
Значения:
Пример:
A.sound {cue-before:url(sound1.wav) cue-after:url(sound2.wav)}
Одновременное задание свойств: cue-before и cue-after.
Пример:
A.sound {cue:url(sound1.wav) url(sound2.wav)} -разные звуки
A.sound {cue:url(sound.wav)} -оба звука одинаковы.
Задание файла, который определит «фоновый звук» во время воспроизведения озвученного элемента.
Значения:
Пример:
ADRESS {play-during: url(sound.wav) auto}
Задание стереоэффекта, при котором направление определяется в горизонтальной плоскости.
Задаются в градусах (deg) от -360deg до +360deg или с помощью значений:
Пример:
H1 {azimuth: 15deg}
P {azimuth: center-right}
H3 {azimuth: center-right behind}
Задание стереоэффекта, при котором направление определяется в вертикальной плоскости.
Задаются в градусах (deg) от -360deg до +360deg или с помощью значений:
Пример:
P {elevation: above}
.
Значения:
Пример:
P {cursor: pointer url(cursor.cur)}
Есть возможность задания цвета элемента и его фона таким, каким обладает соответствующий элемент окна или элемент управления.
Значения:
Пример:
P {color: windowext; background-color: window}
Следующие свойства задаются все вместе в секции BODY. C их помощью Вы можете полностью изменить расцветку полосы прокрутки.
Задает цвет рельефных объетов полосы прокрутки.
Пример:
BODY {scrollbar-face-color: white}
Задает цвет тени рельефных объектов прокрутки.
Пример:
BODY {scrollbar-shadow-color: white}
Задает цвет границы полосы прокрутки слева и сверху.
Пример:
BODY {scrollbar-3dlight-color: white}
Задает цвет стрелок прокрутки.
Пример:
BODY {scrollbar-arrow-color: white}
Задает цвет самой полосы прокрутки.
Пример:
BODY {scrollbar-track-color: white}
Задает цвет границы полосы прокрутки справа снизу.
Пример:
BODY {scrollbar-darkshadow-color: white}
