- •Учебник по html
- •2. Текстовый редактор - блокнот. Входит в поставку Windows
- •Оглавление Урок 1. Структура html-документа и первый html-документ
- •Урок 2. Изображения в html-документе
- •Урок 3. Гипертекст.
- •Урок 4. Описание абзаца
- •Урок 5. Списки
- •Урок 6. Таблицы
- •Урок 7. Работа с фреймами (frames)
- •Урок 8. Создание мета-тегов
- •Урок 9. Добавляем звук и видео на страничку
- •Урок 10. Ссылка на Email
Урок 2. Изображения в html-документе
Допустим, Вам нужно включить в документ изображение, записанное в файл 1.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка реализующая это будет следующая: <IMG SRC="1.gif"> Тег <IMG SRC="имя файла"> может также включать атрибут ALT="текст", например: <IMG SRC="1.gif" ALT="изображение"> Встретив такой тег, броузер покажет на экране текст изображение и начнет загружать на его место картинку из файла 1.gif. Атрибут ALT может оказаться необходимым для старых броузеров, которые не поддерживают изображений, а также на случай, если у броузера отключена автоматическая загрузка изображений. Файл, содержаций изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его URL c именем. Соберем все, что мы знаем об изображениях, в примере 7.
<html> <head> <title>Седьмой HTML-документ</title> </head> <body> <H1 ALIGN=CENTER>Изображения в HTML-документах</H1> <P><IMG SRC="1.gif"></P> <P>переход по изображению</P> <P><A href="my.htm"><IMG SRC="1.gif"></A></P> </body> </html>
Обратите внимание на строку <A href="my.htm"><IMG SRC="1.gif">. Если ссылка на изображение находится между тегами <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке. Этим эффектом многие пользуются для вставок на страницы кнопок и других элементов навигации.
Урок 3. Гипертекст.
Про маркировку текста мы уже поговорили достаточно. Но пора перейти к гипертексту. Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять переход от одного фрагмента текста к другому. Вы уже наверное сталкивались с подобными вещами в интернет или некоторых справочных системах. При клике мышкой на некоторый выделенный фрагмент текущего документа происходит переход к другому заранее определенному документу или фрагменту текущего документа. В HTML переход от одного фрагмента текста к другому задается с помощью тега вида: <A HREF="URL">выделенный фрагмент текста</A> URL - адрес документа. Выделенный фрагмент текста - фрагмент текста, кликнув мышкой по которому произойдет переход на документ находящийся по адресу URL. В качестве URL может быть например: <A HREF="my.htm">Моя страница</A> Кликнув на Моя страница загрузится файл my.htm из текущей директории <A HREF="aaa\my.htm">Моя страница</A> Кликнув на Моя страница загрузится файл my.htm из поддиректории aaa <A HREF="http:\\www.xyz.com\ааа\my.htm">Моя страница</A> Кликнув на Моя страница загрузится файл my.htm c сервера http:\\www.xyz.com из директории ааа Из всего этого следует то, что Вы можете разрабатывать много ссылающихся друг на друга документов у себя на компьютере не подключаясь к интернет. И если все хорошо работает у Вас на компьютере, то также хорошо будет работать на сервере. Обязательно проследите, чтобы пути совпадали у Вас на компьютере и на сервере, или делайте так, чтобы все ссылающиеся ваши htm файлы лежали в одной директории. При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер.
Разберем это на следующем примере. Допустим, что необходимо осуществить переход из файла my.htm к словам "раздел 2" в файле my1.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле my1.htm: <A NAME="1">раздел 2</A> Слова "раздел 2" никак не выделяются в тексте документа. Затем в файле my.htm можно определить переход на этот анкер: <A HREF="my1.htm#1">Переход к анкеру 1</A> Кстати говоря, переход к этому анкеру можно определить и внутри самого документа my1.htm. Для этого достаточно только включить в него вот такой фрагмент: <A HREF="#1">Переход к анкеру 1</A> На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа. Для того, чтобы различные броузеры понимали анкеры правильно задавайте их только цифрами, и не будете иметь никаких проблем. Что делать если надо скачать файл с сервера и сохранить его на диске? Следующий фрагмент HTML продемонстрирует эту возможность. <A HREF="ftp://aaa.bbb.com/ccc/my.zip">скачать файл my.zip</A> Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет скачивание файла my.zip, находящегося в каталоге ccc на сервере aaa.bbb.com, на локальный диск пользователя. <A HREF="mailto:aaa@bbb.com">Послать письмо aaa@bbb.com</A> Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окнапочтовой программы будет указано aaa@bbb.com Соберем все, что мы знаем о ссылках в примере 6. <html> <head> <title>Шестой HTML-документ</title> </head> <body> <H1 ALIGN=CENTER>Гипертекст в HTML</H1> <P><A HREF="my.htm">переход к файлу my.htm</A></P> <P><A HREF="ftp://aaa.bbb.com/ccc/my.zip">скачать файл my.zip</A></P> <P><A HREF="mailto:aaa@bbb.com"</A>Послать письмо aaa@bbb.com</P> </body> </html>