Главная

Регистрация

Вход

RSS

Блог

Главная » 2011 » Май » 08 » ЧТО ТАКОЕ HTML
22:43
ЧТО ТАКОЕ HTML

Всемирная паутина соткана из Web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о "Программировании (именно с большой буквы) на HTML", HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Общий вид HTML-файла, теги

M в аббревиатуре HTML означает "mark-up" -- разметка. Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки "<" и ">" (больше-меньше). Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста. Отмечают же его для для того, чтобы броузкер показывал текст на экране в заданном тегами виде.

В приведенном после горизонтальной линейки примере три пары тегов:

<HTML> -- </HTML>
Пара, которая показывает, что содержимое файла -- документ в формате HTML.
<HEAD> -- </HEAD>
Пара обрамляющая текст, не выводимый на экран, и предназначенный для машин.
<BODY> -- </BODY>
Пара обрамляющая текст, выводимый на экран.

Закрывающий тег отличается от открывающего наличием косой черты "/".

Пример 1. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
</HEAD>
<BODY>
Так выглядит 
простейший HTML-файл.
</BODY>
</HTML>

Создайте текстовый файл. Стандартный Блокнот вполне подойдет, но гораздо удобнее пользоваться редактором Notepad++. Сохраните файл с расширением htm или html. Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш HTML-документ. Обратите внимание на разницу в виде.

На вид текста на экране влияют только теги, и не влияют ни пробелы, ни разбивка текста на строки.

<!DOCTYPE>

Первый тег <!DOCTYPE> - это идентификатор применяемого стандарта HTML. На сегодняшний актуальной является версия HTML 4.01. Она имеет три стандарта синтаксиса: строгий, переходный и с применением фреймов. В приведенном примере задано соответствие строгому синтаксису стандарта 4.01, принятому организацией W3C (атрибут "-//W3C//DTD HTML 4.01//EN"). Инструкции по данному стандарту находятся на "http://www.w3.org/TR/html4/strict.dtd".

Пример переходного синтаксиса:

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Что такое строгий и переходный синтаксис? Какой стандарт выбрать? Как соответствовать выбранному стандарту?

Форматирование простого текста, параграфы

Разбить текст на параграфы можно тегами <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

Указывает цвет линии. Используется формат RGB

 

Обратите внимание на различие между парными тегами <P> -- </P>, которые обрамляют начало и конец куска текста, и непарным тегом <BR>, который отмечает место вставки некоторого элемента.

Вот вам пример, использующий еще и теги заголовков <H1> -- </H1> (самый крупный), <H3> -- </H3> и самый маленький <H6> -- </H6> . Здесь закрывающий тег необходим.

<H1 ALIGN=CENTER> Весенняя гроза</H1>
<H3 ALIGN=CENTER>Федор Тютчев</H3>
<P ALIGN=LEFT>
Люблю грозу в начале мая,<BR>
Когда весенний, первый гром,<BR>
Как бы резвятся и играя,<BR>
Грохочет в небе голубом.
<P ALIGN=CENTER>
Гремят раскаты молодые,<BR>
Вот дождик брызнул, пыль летит,<BR>
Повисли перлы дождевые,<BR>
И солнце нити золотит.
<P ALIGN=RIGHT>
С горы бежит поток проворный,<BR>
В лесу не молкнет птичий гам,<BR>
И гам лесной, и шум нагорный --<BR>
Все вторит весело громам.
<P>
Ты скажешь: ветреная Геба,<BR>
Кормя Зевесова орла,<BR>
Громокипящий кубок с неба<BR>
Смеясь, на землю пролила.
<H6 ALIGN=RIGHT> 1828,1854</H6>

Парные теги влияют на вид следующего за ними текста, непарные влияют только на место вставки. Закрывающему тегу атрибуты не нужны.

 

Выделение текста и шрифты

Не стоит задавать шрифты их названиями. Нет никакой гарантии, что нужный шрифт есть у читателя. Лучше задать его стандартными тегами: хоть результат и зависит от средства просмотра и его настроек, зато наверняка текст будет изображен во-первых похоже, а во-вторых в едином стиле. Вот эти теги:

<В>

Выделяет текст полужирным шрифтом.

<I>

Выделяет текст курсивом.

<TT>

Выводит текст шрифтом фиксированной ширины.

<U>

Элемент подчёркивания.

<STRIKE>

Элемент зачеркивания. Отображается текст, перечеркнутый горизонтальной линией.

<BIG>

Выводит текст шрифтом большего размера.

<SMALL>

Выводит текст шрифтом меньшего размера.

<SUB>

Сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера.

<SUP>

Сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера.

<CENTER>

Центрирует блок текста, отменяет действие <P>

Цитаты, переменные, адреса

<CITE>

Используется для выделения цитат или названий книг и статей, при этом текст обычно выводится курсивом.

<CODE>

Применяется для вывода небольшого куска программного кода (для больших листингов используется тег <PRE>) шрифтом фиксированной ширины.

<EM>

Выделение важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.

<KBD>

Элемент, выделяющий шрифтом фиксированной ширины текст, вводимый пользователем с клавиатуры.

<SAMP>

Используется для выделения нескольких символов шрифтом фиксированной ширины.

<STRONG>

Сильное выделение важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом.

<VAR>

Используется для отметки имен переменных. Обычно такой текст отображается курсивом.

<ADDRESS>

Служит для идентификации автора документа и для указания адреса автора

<BLOCKQUOTE>

Для выделения цитаты. Современные браузеры смещают текст цитаты вправо.

<BLINK>

Мигание, работает только в NC

 

Неформатированный текст

Для предотвращения форматирования используется тег <PRE> -- </PRE>. Текст, заключенный между двумя этими тегами выводится точно так, как он набран в исходном документе. Это бывает нужно, например, в текстах программ.

<PLAINTEXT> Переводит вывод текста в шрифт фиксированной ширины, а также выключает HTML-обработку текста до тех пор, пока браузер не встретит </PLAINTEXT> тег.

<FONT>

имя атрибута

возможные значения

описание

примечания

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 FACE="Verdana, Arial, Helvetica" COLOR="">--</FONT>
<FONT SIZE=+1>
<A HREF="txt.htm" target="verz">Простейший HTML-документ.</A>
</FONT>

<BASEFONT>

Тег <BASEFONT> служит для указания размера, типа и цвета шрифта, стандартных для данного документа. Эти величины обязательны для всего документа, если только не переназначаются при помощи элемента FONT. После закрытия элемента FONT значения тега <BASEFONT> восстанавливаются. Значения атрибутов BASEFONT могут быть изменены другим тегом <BASEFONT> в любом месте документа. Обратите внимание, что это не контейнер и закрывающего тега не существует. Тег <BASEFONT> использует те же самые атрибуты, что и элемент FONT.

 

Списки, Меню

Для перечисления списка по пунктам используются такие теги

  • Для простых списков:
    • Для задания типа списка:
  1. <UL> -- </UL> : Для обрамления ненумерованного списка.
  2. <OL> -- </OL> : Для обрамления нумерованного списка. У этого тега есть аттрибут start="число", которое задает номер первого элемента, и по умолчанию равно 1.
  3. <DIR> -- </DIR> Для обрамления списка директории.
  4. <MENU> -- </MENU> -аналогично UL

Атрибут COMPACT сокращенные промежутки между элементами

    • Для обозначения очередного пункта списка:
  1. <LI> -- </LI>. Здесь ситуация как с параграфами: закрывающий тег можно опустить, поскольку начало очередного пункта списка или конец списка автоматически означает конец предыдущего.
  • Для списков определений:
    • Для задания типа списка:
  1. <DL> -- </DL>. Список определений -- это список пар (скажем, термин и определение).
    • Для обозначения очередного пункта списка:
  1. <DT> -- </DT> : Для обрамления термина.
  2. <DD> -- </DD> : Для обрамления определения.

А вот как выглядит текст предыдущего параграфа в исходном коде документа (заодно, обратите внимание символ "<" пришлось заменить на "&lt;" для того, чтобы отличить его от тега; 

<P>Для перечисления списка по пунктам используются такие теги 
<UL> 
<LI>Для простых списков:</LI> 
<UL> 
<LI>Для задания типа списка:</LI> 
<OL> 
<LI>&lt;UL> -- &lt;/UL>, для ненумерованного списка.</LI> 
<LI>&lt;OL> -- &lt;/OL>, для нумерованного списка. 
У этого тега есть атрибут start="число", которое задает номер первого элемента, 
и по умолчанию равно 1.</LI> 
</OL> 
<LI>Для обозначения очередного пункта списка:</LI> 
<OL> 
<LI>&lt;LI> -- &lt;/LI>. Здесь ситуация как с параграфами: закрывающий тег 
можно опустить, поскольку начало очередного пункта списка или конец списка 
автоматически означает конец предыдущего.</LI> 
</OL> 
</UL> 
<LI>Для списков определений:</LI> 
<UL> 
<LI>Для задания типа списка:</LI> 
<OL> 
<LI start="3">&lt;DL> -- &lt;/DL>. Список определений -- это список пар 
(скажем, термин и определение).</LI> 
</OL> 
<LI>Для обозначения очередного пункта списка:</LI> 
<OL> 
<LI start="2">&lt;DT> -- &lt;/DT>, для термина.</LI> 
<LI>&lt;DD> -- &lt;/DD>, для определение.</LI> 
</OL> 
</UL> 
</UL>

Атрибуты для списков 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. и т. д.

 

Специальные символы

изображение

символ

код

описание

"

&quot;

&#34;

двойная кавычка

&

&amp;

&#38;

амперсанд

<

&lt;

&#60;

меньше, чем

>

&gt;

&#62;

больше, чем
 

&nbsp;

&#160;

непрерывный пробел

©

&copy;

&#169;

копирайт

®

&reg;

&#174;

зарегистрировано

º

&ordm;

&#186;

копье Марса

ª

&ordf;

&#170;

зеркало Венеры

‰

&permil;

&#8240;

промилле

π

&pi;

&#960;

пи

Адреса файлов

Для навигации по документам и организации ссылок нам потребуется уметь задавать имена файлов. Делается это почти так же, как и в операционной системе. При этом относительный адрес удобен тем, что при перемещении целой группы страниц, ссылки между ними не изменятся; а абсолютный адрес тем, что можно перемещать одну только страницу, содержащую ссылку. Поэтому, на чужие документы лучше ссылаться в абсолютной форме, а на свои -- в относительной.

Относительный адрес

Файл, который находится в том же (текущем) каталоге, что и читаемый документ задается своим именем. Файл 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.htmlweb.ru/">

Ссылки на файл на другом сервере

А тут надо задать полный URL. 

<A HREF="http://vsetaksi.ru/msc/index.htm">Московские такси</A>

Ссылки на метку в другом файле

Для задания полного URL метки в другом файле достаточно объединить URL файла и ссылку на метку 

<A HREF="3.html#first">переход в начало текста</A>.

Ссылки на адрес электронной почты(E-Mail)

<А HREF="mailto:me@mycom.ru">Send me E-mail</A>.

Связь с системой телеконференций UseNet

<А HREF="news:news.newusers.questions">news.newusers.questions</A>

Ссылки на телеконференции могут стать ценным качеством вашей домашней страницы. Вы можете отсылать читателей к той или иной конференции для получения дополнительной информации. Например, если ваша страница касается проблем создания HTML-документов, есть смысл предусмотреть ссылку на группу новостей, обсуждающую этот вопрос.

Связь с FTP

<А HREF="ftp://ftp.newusers.ru">FTP</A>

FTP (File Transfer Protocol, протокол передачи файлов) позволяет пользователям копировать файлы с других компьютеров (FTP-сайтов). Таким методом компании часто распространяют свои новые программные продукты. Если не указывать имя файла, браузер выведет перечень всех файлов в каталоге. Это особенно удобно, если вы хотите, чтобы читатель получил доступ к нескольким файлам сразу, например, в случае больших файлов, разбитых на части для удобства передачи.

Ссылки на TelNet

Доступ к удаленной машине осуществляется с помощью программы Telnet, написанной для операционной системы UNIX. Telnet позволяет устанавливать связь с удаленным компьютером подобно тому, как вы связываетесь с машиной своего провайдера. Некоторые программы просмотра допускают использование в URL-адресе имени пользователя для входа в удаленный компьютер

<A HREF="telnet://Dima@mysite.com">system!</A>

При этом браузер подскажет, какое имя нужно ввести для регистрации на удаленной машине.

 

Картинки

Форматы.

GIF.

Это наиболее часто используемый во Всемирной паутине формат (Graphical Interchange Format). Точное название – GIF89A. Он был разработан для сети CompuServe. После ряда усовершенствований он приобрел много важных свойств, включающих:

  • Сжатие данных без потерь.
  • Поддержку прозрачного фона, т. е. возможность создания изображений с прозрачными участками.
  • Чересстрочный вывод на экран, что дает возможность рассмотреть изображение до конца загрузки.
  • Поддержку большинством программ просмотра.

Примечание:
Этот формат, как и некоторые другие, использует алгоритм сжатия LZW, запатентованный компанией Unisys. В конце 1994 года эта компания объявила, что любому разработчику программных продуктов, использующих формат GIF, впредь будет требоваться лицензия от Unisys. Это требование касалось только разработчиков и не затрагивало конечных пользователей. В специальном заявлении компания также уточнила, что использование GIF в WWW допустимо и не нуждается в лицензировании.

JPEG.

Другим популярным форматом для графики является 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="/cgibin/navbar.map"><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://htmlweb.ru/imagemap/english.map"> 
<IMG HEIGHT="400" WIDTH="400" 
SRC="http://htmlweb.ru/Pictures/english.gif" 
ALT="Helsinki University of Technology" ISMAP>
</A>

Примечания

Если Вы хотите, чтобы изображение появилось справа или слева от текстового абзаца, Вы должны расположить элемент IMG в начале абзаца (P элемент). Однако при этом результат может Вас не устроить. Поэтому хорошей практикой стало иметь элемент BR с атрибутом CLEAR в конце такого абзаца.

Не стоит перегружать свои страницы графикой, из-за того, что файлы большого размера медленно передаются по сетям. По этой же причине, фотографии объектов живой природы лучше хранить в формате *.jpg, а рисованные, или чертежи с небольшим числом цветов - в *.gif.

 

Информация в заголовке <HEAD>

Необязательный атрибут заголовка PROFILE указывает на внешний файл META-тегов. В качестве значения этого атрибута указывается URL данного файла. Например: 
<HEAD profile="http://htmlweb.ru/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="support@aaanet.ru">
  • <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) на машине клиента.
Например:
<META HTTP-EQUIV="Set-Cookie" CONTENT="NAME=aaa13; 
expires=Friday,31-Dec-99 23:59:59 GMT; path=/win/internet/html/; 
domain=citforum.ru;">
  • < Meta Http-equiv ="Pragma" CONTENT="no-cache"> Не сохранять страницу в кэш, используется для банеров
<Meta name="Revisit-after" Content=" ... days"> - частота индексации роботами поисковых систем &lt;meta name="revisit-after" content="1 days" /&gt;
Просмотров: 1281 | Добавил: MyFF
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Меню сайта