Урок №3. Работа с тегами ссылок и изображений в HTML
Из этого урока мы узнаем, как создавать ссылки, какие они бывают. Также поработаем с изображениями. Для этого нам понадобятся HTML-теги ссылок <a> и изображений <img />.
Для упрощения работы и хорошего восприятия материала, давайте приведем в порядок нашу предыдущую работу. Настоятельно рекомендую все сделать в точности как я прошу, от этого зависит сходство в нашей работе и, соответственно, ваш успех от этого урока. Потом, когда вы уже будете иметь достаточные навыки, можете не придерживаться моих указаний и делать все как вам удобно. Но пока, на начальном этапе, прошу повторять за мной каждый шаг.
Итак, создадим папку "уроки по html", в ней создадим папку "урок1", и в нее скопируем файлы нашего первого урока.
Затем, в папке "уроки по html", создадим папку "урок2", и в нее скопируем файлы нашего второго урока.
И, наконец, в папке "уроки по html", создадим папку "урок3", в ней создадим и сделаем нашу обычную заготовку (надеюсь, делать это вы уже научились).
Теперь зайдем в папку "урок1" и переименуем наш файл с расширением .html (должен быть begin.html) в lesson1.html.
Зайдем в папку "урок2" и переименуем файл второго урока в файл lesson2.html.
Аналогично поступим с папкой "урок3": переименуем созданную заготовку в lesson3.html, откроем ее с помощью блокнота и начнем работать.
HTML-тег ссылок
Тег, с помощью которого создаются ссылки — это тег <a href="адрес документа (URL)"> текст ссылки</a>.
href — обязательный параметр, собственно определяет по какому адресу ведет ссылка.
Ссылки бывают абсолютные и относительные (внутренние).
Абсолютные — это ссылки на другие документы сети,
Относительные — это ссылки на различные места одного и того же документа.
Давайте, наконец-таки, сделаем ссылку, например, на наш первый урок. Для этого в заготовке lesson3 наберем:
1.<a href="../урок1/lesson1.html">ссылка на урок 1</a>
Аналогично на наш второй урок, ссылка будет выглядеть так:
1.<a href="../урок2/lesson2.html">ссылка на урок 2</a>
Разберемся в коде.
По записи href="../урок2/lesson2.html" можно догадаться, что это путь к файлу lesson2.html относительно файлаlesson3.html. Мы сейчас на странице lesson3.html.
Две подряд идущие точки говорят о том, что мы вышли из папки урок3, где находится lesson3.html, в папку "уроки по html".
Запись /урок2/ означает, что мы зашли в папку "урок2" , и lesson2.html имя файла который требуется открыть.
То есть, ..(две точки) означают выйти из папки в родительскую для нее папку, а / (косая или слеш) — войти в папку.
Для наглядности, если нужно выйти из папки, а из той папки, в которую мы вышли тоже нужно выйти, то написать это нужно так: ../.. .
Предлагаю в качестве упражнения сделать самостоятельно ссылки со всех уроков на каждый урок.
Соответственно если файл, на который нам нужно перейти, находится в этой же папке, например, в нашей папке (урок3) находится файл my.html, то нам нужно в href записать просто имя этого файла, то есть <a href="my.html">ссылка на файл находящийся в той же папке </a>.
Теперь создадим ссылку на какой — нибудь сайт, например на google.ru. Это будет выглядеть следующим образом:
1.<a href="http://www.google.ru">google</a>
То есть в href нужно прописать http://+название сайта.
Надеюсь понятно, что текст между открывающим и закрывающим тегом <a>(<a href="…"> вот здесь</a>) может быть абсолютно любой, главное, куда указывает href.
Да и после каждого закрывающего тега </a> можно поставлять тег <br> (напомню, это переход на новую строку) для красивого расположения наших ссылок.
До сих пор мы делали ссылки на html страницы, однако существует возможность создавать ссылки на файлы других типов.
Здесь есть два нюанса в работе этих ссылок:
Первый — это то, что если браузер поддерживает тип файла, на который направлена ссылка, то он откроет этот файл сам, в своем же окне. Это файлы с расширением (gif, png, jpg, html, xhtml и др.).
Второй — это то, что если браузер не поддерживает тип файла, на который направлена ссылка, то он откроет программу, которая ассоциирована с данным файлом. Это файлы с расширением (avi, doc, xls и др.).
Выглядит такая ссылка достаточно просто, <a href="videoFile.avi"> текст ссылки </a> — подобная ссылка вызовет видеопроигрыватель, которым вы просматриваете "avi-файлы".
Аналогично с другими форматами.
Рекомендую делать так, чтобы файл, формат которого не поддерживается браузером, на который ведет ссылка, находился в той же папке, что и html файл, на котором используется данная ссылка.
Также существует возможность создавать ссылки на другие ресурсы Internet, т. е. будут вызываться программы для работы с почтой, новостями и т.д.
Примеры таких ссылок:
1.<a href="mailto:адрес email">Отправить почту другу</a>
Здесь ключевое слово mailto, после которого идет адрес почтового ящика. По нажатию на эту ссылку вызовется программа работы с почтой (Outlook Express, The bat и др.), причем адрес получателя уже будет заполнен, останется только написать письмо и отправить его.
1.<a href="news:newsname">Новости</a>
Здесь news — означает переход к ресурсу новостей, newsname — это название группы новостей, на которую вы подписаны. Откроется программа Outlook Express для работы с новостями.
Нельзя не затронуть еще один вид ссылок. Это внутренние ссылки.
Эти ссылки позволяют ссылаться на разные места одного и того же документа. Делается это следующим образом: в том месте документа, куда мы хотим переместиться, ставится, так называемая, метка. Записывается это так:
1.<a name="metka1"></a>
А, допустим, в начале документа делается ссылка на эту метку. Это выглядит так:
1.<a href="#metka1">перейти на метку 1</a>
Обратите внимание на то, что значение name у метки и значение href у ссылки совпадают.
Итак, возьмите какой-нибудь достаточно длинный фрагмент текста, сделайте в нескольких местах метки.
1.<a name="metka1"></a>
2.<a name="metka2"></a>
3.<a name="metka3"></a>
4.<a name="metka4"></a>
А в начале страницы сделаем ссылки на эти метки.
1.<a href="#metka1">перейти на метку 1</a>
2.<a href="#metka1">перейти на метку 2</a>
3.<a href="#metka1">перейти на метку 3</a>
4.<a href="#metka1">перейти на метку 4</a>
И у нас получилось такое оглавление в начале страницы.
HTML-тег изображений
Также в этом уроке я остановлюсь на том, как вставлять изображение в текст и делать ссылку в виде изображения.
Для вставки изображения используется тег <img src=url>.
Параметр src является обязательным. Адрес url может быть как абсолютным, так и относительным.
Чаще используются относительные имена (просто имя файла), если этот файл в той же папке, что и сам html документ. Закрывающегося тэга не существует.
Также тег <img…> имеет ряд параметров. Вот некоторые из них:
<img
align=top — выравнивание верхнего края изображения по верхнему краю строки;
left — выравнивание изображения по левому краю относительно окна браузера, причем окружающий текст обтекает изображение;
right - выравнивание изображения по правому краю относительно окна браузера, причем окружающий текст обтекает изображение;
border=число — задает рамку вокруг изображения с толщиной на заданное количество пикселей;
>
В контейнер ссылки можно поместить изображение. В этом случае щелчок по изображению будет выполнять переход по ссылке.
Ссылка на архив нашего урока: Архив 3 урока
| 
