|
Что такое Html
Всемирная паутина соткана из Web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о "Программировании (именно с большой буквы) на HTML", HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.
Общий вид HTML-файла, теги
В аббревиатуре HTML означает "mark-up" -- разметка. Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки "" (больше-меньше). Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста. Отмечают же его для для того, чтобы броузкер показывал текст на экране в заданном тегами виде.
В приведенном после горизонтальной линейки примере три пары тегов:
<HTML>--</HTML> Пара, которая показывает, что содержимое файла -- документ в формате HTML.
<HEAD>--</HEAD> Пара обрамляющая текст, не выводимый на экран, и предназначенный для машин.
<BODY>--</BODY> Пара обрамляющая текст, выводимый на экран.
Закрывающий тег отличается от открывающего наличием косой черты "/".
Пример 1.
<HTML VERSION 4.0>
<HEAD>
</HEAD>
<BODY>
Так выглядит простейший HTML-файл.
</BODY>
</HTML>
Теперь откройте созданный файл с помощью веб-броузера и обратите внимание на разницу в виде исходного файла и вновь созданного.
На вид текста на экране влияют только теги, и не влияют ни пробелы, ни разбивка текста на строки.
<!DOCTYPE>
Задает версию HTML, используемую в текущем документе. Команда !DOCTYPE должна быть первой командой в документе. Команда !DOCTYPE является обязательным требованием языка HTML 3.2.
Пример:
<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 3.2//EN">
Форматирование простого текста, параграфы
Разбить текст на параграфы можно тегами <P> -- </P>. В большинстве случаев, если опустить закрывающий тег </P>, то все равно ясно, что начало следующего параграфа означает конец предыдущего, но для остальных тегов подобное неверно.
У открывающего тега <P> может быть атрибут (аргумент, параметр) ALIGN (выравнивание), который принимает значения CENTER, RIGHT или значение принятое по умолчанию (то есть когда атрибут опущен) -- LEFT. Например тег <P ALIGN=CENTER> задает параграф, строки которого центрированы. Этот атрибут могут иметь большинство парных тегов.
Перехода на новую строку можно добиться и непарным тегом <BR>, который не означает конца параграфа в том смысле, что стиль изображения текста, не изменится.
Атрибуты <BR CLEAR={LEFT | RIGHT | ALL | NONE}>
Атрибут CLEAR может быть использован, чтобы передвинуть перемещаемый образ на другой край. <BR CLEAR=LEFT> передвинет образ к левому краю, <BR CLEAR=RIGHT> - к правому краю, в то время как <BR CLEAR=ALL> сделает то же самое и к левому и к правому краям одновременно. Например, если рядом с текстом слева встречаетс рисунок, то можно использовать тег <BR> для смещения текста ниже рисунка.
Текст, заключенный между тегами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке без переноса на другую.
Во избежание неприятностей с элементом <NOBR> вы можете предложить браузеру читателя альтернативное место перевода строки при помощи тега <WBR> ("мягкий" перевод строки). Эта инструкция будет выполнена только в том случае, если браузер не сможет вывести вашу фразу одной строкой в пределах окна просмотра
Для проведения горизонтальной линии используется тег <HR>
|
Атрибуты <HR>
|
Назначение
|
|
ALIGN
|
Выравнивает по краю или центру; имеет значения LEFT, CENTER,RIGHT.
|
|
WIDTH
|
Устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ % и значение обязательноа заключается в кавычки
|
|
SIZE
|
Устанавливает ширину линии в пикселах.
|
|
NOSHADE
|
Отменяет рельефность линии.
|
|
COLOR
|
|
Обратите внимание на различие между парными тегами <P> -- </P>, которые обрамляют начало и конец куска текста, и непарным тегом <BR>, который отмечает место вставки некоторого элемента. Вот вам пример, использующий еще и теги заголовков <H1> -- </H1> (самый крупный), <H3> -- </H3> и самый маленький <H6> -- </H6> . Здесь закрывающий тег необходим.
<H1 ALIGN=CENTER>Руслан и Людмила</H1>
<H3 ALIGN=CENTER>Пушкин А.С.</H3>
<P ALIGN=LEFT>
У лукоморья дуб зелёный; <BR>
Златая цепь на дубе том: <BR>
И днём и ночью кот учёный <BR>
Всё ходит по цепи кругом; <BR>
Идёт направо - песнь заводит,<BR>
Налево - сказку говорит.
<P ALIGN=CENTER>
Там чудеса: там леший бродит,<BR>
Русалка на ветвях сидит; <BR>
Там на неведомых дорожках <BR>
Следы невиданных зверей; <BR>
Избушка там на курьих ножках <BR>
Стоит без окон, без дверей...
<P ALIGN=RIGHT>
...В темнице там царевна тужит, <BR>
А бурый волк ей верно служит; <BR>
Там ступа с Бабою Ягой <BR>
Идёт, бредёт сама собой;
<P>
Там царь Кащей над златом чахнет; <BR>
Там русской дух... там Русью пахнет! <BR>
И там я был, и мёд я пил; <BR>
У моря видел дуб зелёный; <BR>
Под ним сидел, и кот учёный <BR>
Свои мне сказки говорил.
<H6 ALIGN=RIGHT> 1828,1854</H6>
Парные теги влияют на вид следующего за ними текста, непарные влияют только на место вставки. Закрывающему тегу атрибуты не нужны.
Выделение текста и шрифты
Не стоит задавать шрифты их названиями. Нет никакой гарантии, что нужный шрифт есть у читателя. Лучше задать его стандартными тегами: хоть результат и зависит от средства просмотра и его настроек, зато наверняка текст будет изображен во-первых похоже, а во-вторых в едином стиле. Вот эти теги:
|
<В>
|
Выделяет текст полужирным шрифтом.
|
|
<I>
|
Выделяет текст курсивом.
|
|
<TT>
|
Выводит текст шрифтом фиксированной ширины.
|
|
|
Элемент подчёркивания.
|
|
<STRIKE>
|
Элемент зачеркивания. Отображается текст, перечеркнутый горизонтальной линией.
|
|
<BIG>
|
Выводит текст шрифтом большего размера.
|
|
<SMALL>
|
Выводит текст шрифтом меньшего размера.
|
|
<SUB>
|
Сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера.
|
|
<SUP>
|
Сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера.
|
|
<CENTER>
|
Центрирует блок текста, отменяет действие <P>
|
Цитаты, переменные, адреса
|
<CITE>
|
Используется для выделения цитат или названий книг и статей, при этом текст обычно выводится курсивом.
|
|
<CODE>
|
Применяется для вывода небольшого куска программного кода (для больших листингов используется тег <PRE>) шрифтом фиксированной ширины.
|
|
<EM>
|
Выделение важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.
|
|
<KBD>
|
Элемент, выделяющий шрифтом фиксированной ширины текст, вводимый пользователем с клавиатуры.
|
|
<SAMP>
|
Используется для выделения нескольких символов шрифтом фиксированной ширины.
|
|
<STRONG>
|
Сильное выделение важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом.
|
|
<VAR>
|
Используется для отметки имен переменных. Обычно такой текст отображается курсивом.
|
|
<ADDRESS>
|
Служит для идентификации автора документа и для указания адреса автора
|
|
<BLOCKQUOTE>
|
Для выделения цитаты. Современные браузеры смещают текст цитаты вправо.
|
|
<BLINK>
|
Мигание, работает только в NC
|
Неформатированный текст
Для предотвращения форматирования используется тег <PRE> -- </PRE>. Текст, заключенный между двумя этими тегами выводится точно так, как он набран в исходном документе. Это бывает нужно, например, в текстах программ.
<PLAINTEXT> Переводит вывод текста в шрифт фиксированной ширины, а также выключает HTML-обработку текста до тех пор, пока браузер не встретит </PLAINTEXT> тег.
|
имя атрибута
|
возможные значения
|
описание
|
примечания
|
|
FACE
|
Times New Roman, Courier, Arial, Helvetica
|
позволяет указать как один, так и несколько шрифтов (через запятую).
|
Это весьма полезное свойство, так как платформы Windows и Macintosh имеют почти идентичные шрифты, называющиеся по-разному. Весь список будет просмотрен слева направо, и первый из имеющихся на машине пользователя будет использован для вывода документа.
|
|
SIZE
|
1-7, +/- 1-7
|
Этот атрибут служит для указания размера шрифта в условных единицах от 1 до 7
|
Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Последний метод чаще употребляется.
|
|
COLOR
|
|
Этот атрибут устанавливает цвет шрифта, который может быть указан как в формате RGB, так и стандартным именем
|
|
Например:
<FONT SIZE=3 COLOR="">--</FONT>
<FONT SIZE=+1>
<A HREF="txt.htm" target="verz">Простейший HTML-документ.</A>
</FONT>
<BASEFONT>
Тег <BASEFONT> служит для указания размера, типа и цвета шрифта, стандартных для данного документа. Эти величины обязательны для всего документа, если только не переназначаются при помощи элемента FONT. После закрытия элемента FONT значения тега <BASEFONT> восстанавливаются. Значения атрибутов BASEFONT могут быть изменены другим тегом <BASEFONT> в любом месте документа. Обратите внимание, что это не контейнер и закрывающего тега не существует. Тег <BASEFONT> использует те же самые атрибуты, что и элемент FONT.
Списки, Меню
Для перечисления списка по пунктам используются такие теги
- Для простых списков:
- Для задания типа списка:
- <UL> -- </UL> : Для обрамления ненумерованного списка.
- <OL> -- </OL> : Для обрамления нумерованного списка. У этого тега есть аттрибут start="число", которое задает номер первого элемента, и по умолчанию равно 1.
- Для обозначения очередного пункта списка:
- <LI> -- </LI>. Здесь ситуация как с параграфами: закрывающий тег можно опустить, поскольку начало очередного пункта списка или конец списка автоматически означает конец предыдущего.
- Для списков определений:
- Для задания типа списка:
- <DL> -- </DL>. Список определений -- это список пар (скажем, термин и определение).
- Для обозначения очередного пункта списка:
- <DT> -- </DT> : Для обрамления термина.
- <DD> -- </DD> : Для обрамления определения.
А вот как выглядит текст предыдущего параграфа в исходном коде документа (заодно, обратите внимание символ "<" пришлось заменить на "<" для того, чтобы отличить его от тега;
<P>Для перечисления списка по пунктам используются такие теги
<UL>
<LI>Для простых списков:</LI>
<UL>
<LI>Для задания типа списка:</LI>
<OL>
<LI><UL> -- </UL>, для ненумерованного списка.</LI>
<LI><OL> -- </OL>, для нумерованного списка.
У этого тега есть атрибут start="число", которое задает номер первого элемента,
и по умолчанию равно 1.</LI>
</OL>
<LI>Для обозначения очередного пункта списка:</LI>
<OL>
<LI><LI> -- </LI>. Здесь ситуация как с параграфами: закрывающий тег
можно опустить, поскольку начало очередного пункта списка или конец списка
автоматически означает конец предыдущего.</LI>
</OL>
</UL>
<LI>Для списков определений:</LI>
<UL>
<LI>Для задания типа списка:</LI>
<OL>
<LI start="3"><DL> -- </DL>. Список определений -- это список пар
(скажем, термин и определение).</LI>
</OL>
<LI>Для обозначения очередного пункта списка:</LI>
<OL>
<LI start="2"><DT> -- </DT>, для термина.</LI>
<LI><DD> -- </DD>, для определение.</LI>
Атрибуты для списков UL, DIR, MENU:
|
имя атрибута
|
возможные значения
|
описание
|
|
TYPE
|
DISC, SQUARE, CIRCLE
|
стиль тега (звездочка “*”, плюс “+” и символ “o”.)
|
Атрибуты для списков OL:
|
имя атрибута
|
возможные значения
|
описание
|
|
TYPE
|
1, a, A, i, I
|
стиль нумерации
|
|
START
|
целое
|
начальная цифра последовательности, по умолчанию 1
|
|
VALUE
|
целое
|
последовательные числа
|
В HTML 3.0 вы можете вместо обычного тега поместить GIF или специальный символ. Атрибут РLAN= создает ненумерованные списки без тегов. Разумеется, простейший способ это сделать - воспользоваться списком определений, но если вы все же захотите вставить в список один-два тега, то лучше применяйте данный атрибут.
Атрибут SRС= используется для того, чтобы задать GIF-файл вместо обычного тега GIF, наиболее употребительный в HTML графический формат. Вместо того чтобы помещать GIF перед строкой с тегом <В R> в конце, вы можете создать собственные изящные теги и затем использовать их в списке. В этом случае вы получите все преимущества ненумерованного списка и вдобавок симпатичные GIF-картинки в качестве тегов. Атрибут SRC= можно задать в теге <UL>, определив сразу все теги списка, а можно указать разные GIF для разных пунктов списка, помещая атрибут SRC= в каждом теге <LI>. В любом случае для того чтобы атрибут SRС= работал с тегом <UL>, нужно задать атрибут РLAN=. Атрибут DINGВАТ= позволяет создавать специальные типографские символы dingbats, поддерживаемые броузером. Эти символы имеют вид картинок, которые используются в качестве тегов в списках. Приведем список стандартных dingbats: Text, Audio, Folder, Disc drive, Form, Home, Next.
Для задания dingsbat нужно указать его имя в теге <LI>. Например, для того чтобы задать home (домик), записывайте тег <LI DINGBAT="home" >.
Dingsbat можно также применять с тегом заголовка.
Тег <OL>
Нумерованные списки. Тег <OL> вместе с атрибутом ТYРЕ= в HTML 3.0 позволяет создать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке.
<ОL ТYРЕ=1> Тег создает список с нумерацией в формате 1., 2., 3., 4. и т. д.
<ОL ТYРЕ=A> Тег создает список с нумерацией в формате А., В., С., В. и т. д.
<ОL ТYРЕ=a> Тег создает список с нумерацией в формате а., b., с., d. и т. д.
<ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III., IV. и т. д.
Специальные символы
|
изображение
|
символ
|
код
|
описание
|
|
"
|
"
|
"
|
двойная кавычка
|
|
&
|
&
|
&
|
амперсанд
|
|
<
|
<
|
<
|
меньше, чем
|
|
>
|
>
|
>
|
больше, чем
|
| |
|
 
|
непрерывный пробел
|
|
©
|
©
|
©
|
копирайт
|
|
®
|
®
|
®
|
зарегистрировано
|
|
º
|
º
|
º
|
копье Марса
|
|
ª
|
ª
|
ª
|
зеркало Венеры
|
|
‰
|
‰
|
‰
|
промилле
|
|
π
|
π
|
π
|
пи
|
Таблица всех спец.символов HTML
Адреса файлов
Для навигации по документам и организации ссылок нам потребуется уметь задавать имена файлов. Делается это почти так же, как и в операционной системе. При этом относительный адрес удобен тем, что при перемещении целой группы страниц, ссылки между ними не изменятся; а абсолютный адрес тем, что можно перемещать одну только страницу, содержащую ссылку. Поэтому, на чужие документы лучше ссылаться в абсолютной форме, а на свои -- в относительной.
Относительный адрес
Файл, который находится в том же (текущем) каталоге, что и читаемый документ задается своим именем. Файл document.html, который находится в подкаталоге directory текущего каталога, задается как directory/document.html . Обратите внимание, в отличие от MS-DOS, каталог обозначается прямой, а не обратной, косой чертой. Родительский каталог обозначается двумя точками ../ .
Если вместо имени файла задать каталог, то в зависимости от настройки сервера, будет использован файл index.html этого каталога, сгенерирован файл с оглавлением каталога, или возвращена ошибка.
Абсолютный адрес
Если полное имя файла начинается с косой черты, то указан его путь относительно корневого каталога документов, который не совпадает с корневым каталогом компьютера.
Адрес на другом компьютере
Адрес на другом компьютере состоит из трех частей:
- Протокол. Как правило, это " HTTP://", но может быть и " FTP://", если доступ к документу по ftp, и другие.
- Сервер. Символьный или цифровой адрес сервера. Например, "kulichki.rambler.ru".
- Абсолютный адрес файла относительно корневого каталога документов, например, "puzzles/collection.html".
Вместе это выглядит как "http://kulichki.rambler.ru/puzzles/collection.html". Для так заданного имени файла существует название: Универсальный Локатор Ресурса ( URL). URL текущего документа выводится в строке состояния средства просмотра.
Ссылки
Основное свойство гипертекста (H в слове HTML) -- удобство передвижения не только вперед и назад: к сноскам, поясняющим документам -- и возвращаться обратно. Строятся ссылки с помощью анкера (Anchor) - тега <A> -- </A>.
Атрибуты:
|
имя атрибута
|
возможные значения
|
описание
|
примечания
|
|
HREF
|
URL
|
Задание адреса гиперссылки в URL формате
|
Неполные адреса могут быть модифицированы командой BASE |
|
NAME
|
|
задает символическую метку внутри документа, для переходов в это место документа
|
Ссылка на метку внутри документа начинается со знака #. Ссылка на метку другого документа имеет вид url#label
|
|
REL
|
|
Определяет систему связей для документа.
|
Работает только при наличии атрибута HREF. Содержит, разделенные запятыми, отношения - список докуметов, которые имеют отношение к данному документу.
|
|
REV
|
|
Определяет систему связей для документа.
|
Тоже самое, что и REL только отношения имеют обратный порядок - список документов, к которым данный документ имеет отношение
|
|
METHOD
|
|
methods of HTTP protocol
|
|
|
TITLE
|
|
Определяет заголовок, который появляется когда мышь "находит" на ссылку или во время загрузки документа.
|
|
|
URN
|
|
uniform resource name
|
|
|
TARGET
|
window, _blank, _parent, _self, _top
|
Определяет место (окно) загрузки документа.
|
Этот атрибут используется при использовании многооконных документов, определяемых командой FRAME
window – имя активного окна, куда следует загрузить докумет (окно должно быть ранее описано в задании FRAMEs). Если окно с этим именем отсутствует, то открывается новое окно.
_blank - закрузка документа в новое окно (без имени).
_parent – загрузка документа в "родительское" окно по отношению к текущему.
_self – загрузка документа в то же самое окно, откуда он был вызван.
_top - загрузка документа в основное окно.
|
Задание метки
<A NAME="first"></A>
Ссылки внутри одной страницы
<A HREF="#second">переход в конец текста</A>.
Ссылки на другой файл на том же сервере
<A HREF="2.html">Предыдущий урок</A>
<BR><A HREF="4.html">Следующий урок</A>
<BR><A HREF="index.html">Оглавление</A>
<BR><A HREF="0.html">Список тегов и аттрибутов</A>
Для задания базового пути, отличного от текущего используется тег <BASE>, размещаемый в заголовке.
Например:
<BASE HREF="//kdg.vbizsoft.kg/">
Ссылки на файл на другом сервере
А тут надо задать полный URL.
<A HREF="http://vbizsoft.kg/portfolio/index.html">Создание сай</A>
Ссылки на метку в другом файле
Для задания полного URL метки в другом файле достаточно объединить URL файла и ссылку на метку
<A HREF="3.html#first">переход в начало текста</A>.
Ссылки на адрес электронной почты( E-mail)
<А HREF="mailto:
Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
">Send me E-mail</A>.
Ссылки на телеконференции могут стать ценным качеством вашей домашней
страницы. Вы можете отсылать читателей к той или иной конференции для
получения дополнительной информации. Например, если ваша страница
касается проблем создания HTML-документов, есть смысл предусмотреть
ссылку на группу новостей, обсуждающую этот вопрос.
Связь с FTP
<А HREF="ftp://ftp.vbizsoft.kg">FTP</A>
FTP (File Transfer Protocol, протокол передачи файлов) позволяет пользователям копировать файлы с других компьютеров (FTP-сайтов). Таким методом компании часто распространяют свои новые программные продукты. Если не указывать имя файла, браузер выведет перечень всех файлов в каталоге. Это особенно удобно, если вы хотите, чтобы читатель получил доступ к нескольким файлам сразу, например, в случае больших файлов, разбитых на части для удобства передачи.
Ссылки на TelNet
Доступ к удаленной машине осуществляется с помощью программы Telnet, написанной для операционной системы UNIX. Telnet позволяет устанавливать связь с удаленным компьютером подобно тому, как вы связываетесь с машиной своего провайдера. Некоторые программы просмотра допускают использование в URL-адресе имени пользователя для входа в удаленный компьютер.
<A HREF="telnet://
Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
">system!</A>
Форматы
GIF
Это наиболее часто используемый во Всемирной паутине формат (Graphical Interchange Format). Точное название – GIF89A. Он был разработан для сети CompuServe. После ряда усовершенствований он приобрел много важных свойств, включающих:
- Сжатие данных без потерь.
- Поддержку прозрачного фона, т. е. возможность создания изображений с прозрачными участками.
- Чересстрочный вывод на экран, что дает возможность рассмотреть изображение до конца загрузки.
- Поддержку большинством программ просмотра.
Примечание:
Этот формат, как и некоторые другие, использует алгоритм сжатия LZW, запатентованный компанией Unisys. В конце 1994 года эта компания объявила, что любому разработчику программных продуктов, использующих формат GIF, впредь будет требоваться лицензия от Unisys. Это требование касалось только разработчиков и не затрагивало конечных пользователей. В специальном заявлении компания также уточнила, что использование GIF в WWW допустимо и не нуждается в лицензировании.
Другим популярным форматом для графики является JPEG. Он был создан группой экспертов в области фотографии (Joint Photographic Experts Group) в результате разработки стандартного метода сжатия фотографических изображений "с потерями". Ниже кратко перечислены основные свойства формата:
- Сжатие происходит "с потерями", поэтому изображение теряет некоторые (несущественные) детали.
- Размер файла сжатого изображения, как правило, меньше, чем в случае GIF, т.е. файл передается быстрее.
- Поддержка 16,7 миллионов цветов, что обеспечивает очень хорошее качество цветопередачи.
- Потеря деталей вокруг четких контуров (дрожание линий), что делает формат непригодным для передачи изображений с высокой четкостью и текста.
PNG (произносится "пинг")
Этот формат (Portable Network Graphics) был разработан в 1995 году, чтобы прийти на смену формату GIF после действий Unisys по защите авторских прав на алгоритм сжатия LZW. Одновременно были переработаны некоторые технические характеристики, в частности, улучшено сжатие и увеличено количество поддерживаемых цветов. В настоящее время распространяются подключаемые программные модули для браузеров Netscape Navigator и Microsoft Internet Explorer, позволяющие использовать формат PNG.
ВМР
Этот формат (bitmap) широко используется операционными системами Windows и OS/2. Файлы в этом формате хранятся без сжатия и поэтому требуют много времени при загрузке. Поддерживается только программой Microsoft Internet Explorer. Не рекомендуется использование этого формата.
Для вставки в текст картинки используется одиночный тег <IMG SRC="адрес графического файла"> с одним обязательным атрибутом SRC. Адрес задается так же, как и адрес ссылки.
|
имя атрибута
|
возможные значения
|
описание
|
примечания
|
|
SRC
|
URL
|
адрес изображения
|
обязателен
|
|
ALT
|
строка
|
текстовое описание изображения
|
|
|
ALIGN
|
TOP, MIDDLE, BOTTOM, LEFT, RIGHT
|
позиционирование изображения относительно текущей текстовой строки
|
- TOP –позиционирует верх изображения с верхом текущей текстовой строки.
- MIDDLE
- выравнивает середину изображения по основной текстовой строке.
- BOTTOM
(по умолчанию) –выравнивает низ изображения по основной строке.
- LEFT
– перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения.
RIGHT – перемещает изображение к текущему правому краю.
|
|
HEIGHT
|
целое
|
высота в пикселях
|
|
|
WIDTH
|
целое
|
ширина в пикселях
|
|
|
BORDER
|
целое
|
ширина бордюра (рамки) в пикселях
|
используется, когда элемент IMG появляется, как текст якоря; используйте BORDER=0 для подавления рамки
|
|
HSPACE
|
целое
|
ширина незаполненного пространства непосредственно слева и справа от изображения в пикселях
|
|
|
VSPACE
|
целое
|
высота незаполненного пространства выше и ниже изображения в пикселях
|
|
|
USEMAP
|
URL
|
фрагмент идентификатора для сайта клиента с картой образа
|
карты определены элементом MAP; имена карт - чувствительны к регистру набора символов
|
|
ISMAP
|
|
показывает, что изображение является картой образа, реагирующей на нажатие клавиши мыши
|
когда пользователь "кликает" на изображении, этот атрибут обеспечивает передачу координат курсора серверу
|
Атрибуты WIDTH и HEIGHT при совместном использовании позволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это позволяет пользователю начать чтение, пока передача данных еще продолжается. Эти атрибуты не предназначены для автоматического изменения размера изображения броузерами. Хотя некоторые броузеры могут масштабировать изображение в соответствии с атрибутами WIDTH и HEIGHT, не полагайтесь на это. Таким образом, они должны задавать реальный размер изображения.
Что касается ISMAP, приведем пример того, как можно его использовать:
<a href="//vbizsoft.kg/sitemap.html"><img src=navbar.gif ismap border=0></a>
Нажатые координаты передаются серверу. Броузер извлекает новый URL из URL, специфицированного атрибутом HREF, с добавлением знака вопроса (?), координаты x, запятой (,) и координаты y локализации (координаты выражены в пикселях). Связь следует с использованием уже нового URL. Например, если пользователь нажал на участок с x=10, y=27, формируемый URL будет: "/cgibin/navbar.map?10,27" В целом, это хорошая идея для подавления бордюра (использование атрибута BORDER=0) и обозначения того, что изображение реагирует на нажатие клавиши мыши.
Примеры
<IMG SRC="Yucca. JPG" ALT=" Picture of Yucca" WIDTH=110 HEIGHT=168>
<P> <IMG SRC="Yucca.jpg" ALT=" Pic Yucca" WIDTH=110 HEIGHT=168 ALIGN=RIGHT>
This is a simple example of embedding images.
</P>
Используйте IMG с ISMAP, чтобы создать реагирующую на нажатие клавиши мыши карту:
<A HREF="http://vbizsoft.kg/imagemap/english.map">
<IMG HEIGHT="400" WIDTH="400"
SRC="http://vbizsoft.kg/Pictures/english.gif"
ALT="Helsinki University of Technology" ISMAP>
</A>
Примечания
Если Вы хотите, чтобы изображение появилось справа или слева от текстового абзаца, Вы должны расположить элемент IMG в начале абзаца (P элемент). Однако при этом результат может Вас не устроить. Поэтому хорошей практикой стало иметь элемент BR с атрибутом CLEAR в конце такого абзаца.
Не стоит перегружать свои страницы графикой, из-за того, что файлы большого размера медленно передаются по сетям. По этой же причине, фотографии объектов живой природы лучше хранить в формате *.jpg, а рисованные, или чертежи с небольшим числом цветов - в *.gif.
Информация в заголовке <HEAD>
Необязательный атрибут заголовка PROFILE указывает на внешний файл META-тегов. В качестве значения этого атрибута указывается URL данного файла. Например:
<HEAD profile="http://vbizsoft.kg/meta. PHP">
...
</HEAD>
- <TITLE> Название страницы </TITLE>. Бродилка передаст его менеджеру окон, и он будет показан системным шрифтом на рамке окна. Не рускоговорящие браузеры Кириллицу в этом поле, как правило, вывести не способны.
- <META>
|
Атрибуты META
|
Назначение
|
|
HТТР-EQUIV
|
Определяет свойство для элемента.
|
|
NАМЕ
|
Обеспечивает дополнительное описание элемента. Если этот атрибут опущен, он считается эквивалентным атрибуту HTTP-EQUIV.
|
|
URL
|
Определяет адрес документа для свойства.
|
|
СONTENT
|
Определяет возвращаемое значение для свойства.
|
- <Meta Http-equiv="Content-Type" CONTENT="text/html; charset=windows-1251"> Документ написан кириллицей в кодировке Windows. Замена в аттрибуте CONTENT параметра charset на koi8-r означала бы документ на русском языке в UseNet-овской кодировке. Замена text/html; на text/plain; приведет к выводу неформатированного текста.
- <Meta Http-equiv="Refresh" Content="{число}; Url={URL файла }"> Перенаправление на другую страницу через определённое время (в секундах), или перезагрузка текущей страницы (например, такое часто используется в чатах) Например: <Meta Http-equiv="Refresh" Content="20; Url=http://host.com/">
- <Meta Http-equiv="Author" Content="{текст}"> Указание имени автора
- <Meta Http-equiv="Description" Content="{ Описание документа }">
- <Meta Http-equiv="Keywords" Content="{список ключевых слов через запятую или пробел}">
- <Meta Http-equiv="Reply-to" Content="{Ваш E-Mail адрес}">
Например:
<Meta Http-equiv="Reply-to" Content="
Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
">
- <Meta Name="Date" Content="{дата}"> Дата создания Вашей странички
Например:
<Meta Name="Data" Content="Nov 11 2000 10:12 GMT">
- < Meta Http-equiv ="Set- Cookie" CONTENT="NAME=value; EXPIRES=date; Domain=domain_name; Path=path; SECURE"> Записать информацию(Cookie) на машине клиента.
- См.также примеры использование Cookie на JavaScript, на PHP
Например:
<META HTTP-EQUIV="Set-Cookie" CONTENT="NAME=aaa13;
expires=Friday,31-Dec-99 23:59:59 GMT; path=/win/vbizsoft/html/;
domain=citforum.ru;">
<meta name="revisit-after" content="1 days" />
- <LINK HREF= url - Определяет URL адрес документа, который имеет отношение к текущему документу.>
Команда LINK устанавливает иерархическую организацию между связанными документами. Элемент HEAD может содержать несколько элементов LINK.
<LINK REL=relation HREF=URL>
или
<LINK REV=relation HREF=URL>
|
атрибуты LINK
|
возможные значения
|
описание
|
|
HREF
|
URL
|
URL для связанных ресурсов
|
|
REL
|
строка
|
тип связи "вперед"
|
|
REV
|
строка
|
тип связи "назад"
|
|
TITLE
|
строка
|
необязательная строка заголовка для связанного ресурса
|
Связь от документа A к документу B по выражению REV=relation - та же самая связь, что от B к A по выражению REL=relation.
|
Значение REL, REV
|
описание
|
|
INDEX
|
Документ задает индекс для текущего документа.
|
|
GLOSSARY
|
Документ дает глоссарий терминов, которые имеют отношение к текущему документу.
|
|
|
Объявление авторского права для текущего документа
|
|
CONTENTS
|
Документ оглавления для нескольких взаимосвязанных документов.
|
|
NEXT
|
Следующий документ для посещения в управляемом просмотре.
|
|
PREVIOUS
|
Предыдущий документ в управляемом просмотре.
|
|
HELP
|
Документ предлагает помощь, например, описывая расширенный контекст и предлагая дополнительные ссылки к полезным документам. Это помогает в восстановлении ориентирования пользователя, который "потерялся" на своем пути.
|
|
|
Закладка, используемая для обеспечения прямых связей по отмеченным (введенным в список закладок) точкам при работе с документом
|
|
TITLE
|
может быть использован в качестве метки в списке закладок. Несколько закладок может быть определено в каждом документе, предоставляя пользователю средства для ориентирования в расширенном документе.
|
информация в теле <BODY>
|
Атрибут BODY
|
Назначение
|
|
ALINK
|
Определяет цвет активной ссылки.
|
|
BACKGRQUND
|
Указывает на URL-адрес изображения, которое используется в качестве фонового. На экран выводятся повторяющиеся копии картинки, поверх которых показывается текст. Для фона желательно подбирать неконтрастные изображения
|
|
BGCOLOR
|
Определяет цвет фона документа
|
|
BGPRQPERTIES
|
Если установлено значение FIXED, фоновое изображение не прокручивается.(Только для IE) |
|
VLINK
|
Определяет цвет уже просмотренной ссылки.
|
|
LINK
|
Определяет цвет еще не просмотренной ссылки.
|
|
ТЕХТ
|
Определяет цвет текста.
|
|
LEFTNARGIN
|
Устанавливает границу левого поля в пикселах.
|
|
TOPMARGIN
|
Устанавливает границу верхнего поля в пикселах.
|
Другие атрибуты задают цвет текста и ссылок. Параметр "цвет" задается названием цвета или как "#XYZ", где X, Y и Z -- три двузначных шестнадцатеричных числа означающих интенсивность: X -- красного, Y -- зеленого и Z синего цвета:
Например:
<BODY Background="mramor.gif"
BGCOLOR="# C++"
LINK="#2000C0"
VLINK="900020"
ALINK="#336633"
TEXT="#000000">
<BODY BGCOLOR="WHITE" TEXT="BLACK" LINK="RED" VLINK="GREEN" ALINK="YELLOW">
< MARQUEE> Поле с движущимся текстом
(только IE)
|
имя атрибута
|
смысл
|
примечания
|
|
ALIGN
|
Определяет положение текста вокруг поля. Может принимать следующие значения
|
TOP - выравнивает текст относительно верхней части поля.
MIDDLE - выравнивает текст относительно середины поля.
BOTTOM - выравнивает текст относительно нижней части поля.
|
|
BEHAVIOR
|
Определяет, как должен обрабатыватся текст
|
SCROLL - Появляется с одной стороны, и движется, пока не скроется за другой границей поля, и тогда все повторяется (по умолчанию).
SLIDE - Появляется полностью с одной стороны, движется и исчезает, как только текст касается другого края.
ALTERNATE - появляется полностью с одной стороны, движется в одном направлении, пока не коснется другой границы полосы, после чего меняет направление движения.
|
|
BGCOLOR
|
Определяет цвет фона поля
|
|
|
DIRECTION
|
Определяет направление движения текста
|
По умолчанию LEFT (по умолчанию) - справа налево.
RIGHT
UP - титры, снизу вверх
|
|
HEIGHT
|
Определяет высоту поля в пикселах или в процентах от высоты экрана.
|
При определении в процентах параметр n должен быть со знаком "%"
|
|
HSPACE
|
Определяет левый и правый отступ внешнего текста в пикселах.
|
|
|
LOOP
|
Определяет число повторения процесса.
|
"-1" или INFINITE - число повторений неограничено
|
|
SCROLLAMOUNT
|
Определяет размер в пикселах между каждым последовательным перемещением текста.
|
|
|
SCROLLDELAY
|
Определяет время в миллисекундах между каждым последовательным перемещением текста.
|
|
|
VSPACE
|
Определяет верхний и нижний отступ внешнего текста в пикселах.
|
|
|
WIDTH
|
Устанавливает длину поля в пикселах или как процент от ширины экрана
|
|
Пример:
<MARQUEE BGCLOR=#00FF00 DIRECTION=RIGHT
BEHAVIOR=SCROLL SCROLLAMOUNT=10
SCROLLDELAY=200>
Бегущая строка.
</MARQUEE>
<MARQUEE behavior=scroll direction=up height=50
loop=-1 scrollamount=1 scrolldelay=100 width=100>
<CENTER>***<BR>
вставьте сюда ваш текст<BR>
вставьте сюда ваш текст<BR>
вставьте сюда ваш текст<BR>
***</CENTER>
</MARQUEE>
Звук на странице
Netscape:
<EMBED SRC ="/towngold.mid" width=0 heught=0 autostart=true volume=100>
Internet Explorer:
<BGSOUND SRC="/towngold.mid" LOOP=100>
Пример:
< Script language="JavaScript">
if (navigator.appName == "Netscape") {
document.write('<EMBED SRC ="TownGold.mid" width=0 heught=0
autostart=true volume=100>')}
else {
document.write('<BGSOUND SRC="TownGold.mid" LOOP=100>')}
|
