Добавление изображений в документ HTML

Поместить изображение в документ HTML очень просто. Введите этот тег в то место документа HTML, где вы хотите поместить изображение. Затем замените имя файла на URL рисунка.

< IMG SRC=”имя файла”>

Здесь SRC обязательный атрибут. Указывает путь к изображению – файлу формата GIF, JPEG или PNG.

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

Посмотрите на пример, приведенный ниже. Он показывает одно и то же изображение три раза. Каждый раз изображение отображается в строке, поэтому бро­узер располагает его справа от предшествующего текста.

< HTML> < HEAD> < TITLE> Использование тега IMG < /TITLE> < /HEAD>

< BODY> < Р> < IMG SRC=”dog.gif”> Этот текст идет сразу же после рисунка.

< Р> Этот текст разорван < IMG SRC=”dog.gif”> рисунком.

< Р> В этом случае рисунок появляется после текста.

< IMG SRC=” dog.gif”>

< /BODY> < /HTML>

Выравнивание текста с изображениями в строке осуществляется атрибутом ALIGN. По умолчанию при помещении изображения в строке текст выравни­ва­ет­ся по нижней части изображения. Возможно, вы захотите изменить такое выравнивание, поскольку при этом остается слишком много пустого места на стра­нице. Эту настрой­ку можно изменить с помощью атрибута align в теге < img>. В табл. п­риведены значения, которые можно присвоить этому атрибуту.

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

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

Переход по гиперссылке – тег < A> (анкер)

В HTML переход от одного фрагмента текста к другому задается с помощью тега вида:

< A HREF=" [адрес перехода]" > выделенный фрагмент текста < /A>

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:

< A HREF=" Oglavlenie.htm" > Перейти к оглавлению < /A>

Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в следующее окно будет загружен документ Oglavlenie.htm. Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога.

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

Следующий пример осуществляет переход к файлам window2.html и window3.html при щелчке по гиперссылкам Ссылка на 2 страницу и Ссылка на 3 страницу соответственно.

< h1> Страница 1< /h1>

< a href=" window2.html" > Ссылка на 2 страницу < /A> < br>

< a href=" window3.html" > Ссылка на 3 страницу < /A>

После просмотра загруженного файла, например страницы 2, обратно можно вернуться нажатием кнопки НАЗАД (Back) в панели инструментов броузера.

При необходимости можно задать переход к рисунку или звуковому файлу, например:

< h1> Страница 1< /h1> < A href=" gostinica 27.jpg" > рис.1 < /A> < br> < A href=" kbtu.jpg" > рис. 2 < /A> < br> < A href=" kbtu.jpg" > img src=" kbtu.jpg" height=20 width=50> < /A>   Рис.2. Исходный текст тегов (слева) и

его результат на экране

В гиперссылках можно задать переход к определенному месту внутри одного документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере.

Допустим, что необходимо осуществить переход из файла pr1.htm к словам " Переход закончен" в файле pr2.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле pr2.htm:

< A NAME=" AAA" > Переход закончен< /A>

Слова " Переход закончен" при этом никак не будут выделены в тексте документа.

Затем в файле pr1.htm (или в любом другом) можно определить переход на этот анкер:

< A HREF=" pr2.htm#AAA" > Переход к анкеру AAA< /A>

Кстати говоря, переход к этому анкеру можно определить и внутри самого документа pr2.htm — достаточно только включить в него вот такой фрагмент:

< A HREF=" #AAA" > Переход к анкеру AAA< /A>

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

Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство броузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно.

Рассмотрим пример ссылки на анкеры внутри одного документа.

< p> < b> Список разделов< /b> < /p>

< a href=" #ex1" > Раздел 1< /a> < br>

< a href=" #ex2" > Раздел 2< /a> < hr>

< H2 align=center> Далее стоит картинка < /H2> < hr>

< img src=" kbtu.jpg" width=400 height=200 align=middle> Это здание КБТУ < hr>

< p> < a name=" ex1" > < /a> Раздел 1< /p>

< p> Текст раздела 1< /p> < hr>

< H2 align=center> Далее стоит другая картинка < /H2> < hr>

< p align=right> Это высотная гостиница

< img src=" Gostinica 27.jpg" align=middle>

< p> < a name=" ex2" > < /a> Раздел 2< /p>

< p> Текст раздела 2 < br> < /p>

Рис.3. Пример перехода по анкерам “Раздел 1” и “Раздел 2”

Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:

< A HREF=" ftp: //server/directory/file.ext" > Выгрузить файл< /A>

Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в папке directory на сервере server, на локальный диск пользователя.

< A HREF=" mailto: user@mail.box" > Послать письмо< /A>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: (" Куда") окна почтовой программы будет указано user@mail.box.

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

< HTML> < HEAD> < TITLE> Пример 7< /TITLE> < /HEAD>

< BODY>

< H1> Связывание < /H1>

< P> С помощью ссылок можно переходить к другим файлам (например, к

< A HREF=" pr.htm" > оглавлению этого руководства< /A>).< /P>

< P> Можно выгружать файлы (например,

< A HREF=" ftp: //yi.com/home/ChuvakhinNikolai/html-pr.doc" > это руководство в

формате Microsoft Word < /A>) по FTP.< /P>

< P> Можно дать пользователю возможность послать почту (например,

< A HREF=" mailto: nc@iname.com" > автору этого руководства< /A>).< /P>

< /BODY>

< /HTML>

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

Путь к < a href=" hands-on.html" > счастье< /a>.

а также конкретных точек внутри документа, на которые могут указывать гипертекстовые ссылки, например,

< h2> < a name=mit> Сквер – место для отдыха < /a> < /h2>