 |
Открытие ссылки в новом окне
|
|
|
|
По умолчанию, при переходе по ссылке документ открывается в текущем окне. При необходимости, это условие может быть изменено параметром target тега <А>. Если установить у target значение _blank, как показано в примере 7.2, то отроется новое окно и документ, на который ведет ссылка, загрузится в нем.
Пример 7.2. Открытие документа в новом окне
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<a href="http://www.htmlbook.ru" target="_blank">Ссылка открывает новое окно на сайт htmlbook.ru</a>
</body>
</html>
Чтобы указать в Nvu, что ссылка будет открываться в новом окне, при ее создании нажмите на кнопку?Расширенные свойства? (рис. 7.6) и в дополнительном разделе выберите пункт?в новом окне?, как показано на рис. 7.7.
Рис. 7.7. Изменение свойств ссылки
Шаг 8. Якоря (анкеры)
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, для создания перехода к ней по ссылке. Якоря удобно применять для больших документов, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи параметра name тега <А> (пример 8.1).
Пример 8.1. Создание внутренней ссылки
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<body>
<a name="top"></a>
...
<a href="#top">Наверх</a>
</body>
</html>
Между тегами <a name="top"> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается символом #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике.
|
|
|
Для создания якоря в Nvu используется кнопка 
на панели инструментов. Аналогичное действие производится через меню Вставка > Якорь с именем... После чего запрашивается желаемое имя якоря (рис. 8.1).
Рис. 8.1. Ввод имени якоря
При создании ссылки на якорь, достаточно выделить желаемый текст и выбрать в меню Вставка > Ссылка... или использовать комбинацию <Ctrl>+<L>. В открывшемся окне достаточно раскрыть список, и все доступные якоря будут показаны. Остается лишь выбрать желаемый (рис. 8.2).
Рис. 8.2. Выбор якоря из списка
Обратите внимание, что имя якоря на рис. 8.1 пишется без дополнительного символа решетки (#), а в списке якорей на рис. 8.2 символ решетки добавляется автоматически.
Шаг 9. Изображения
Для встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Для указания адреса изображения можно задавать как абсолютный, так и относительный путь. В общем случае, правила для добавления изображений те же, что и при создании ссылок.
Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице.
· Если в начале адреса стоит слэш (символ /), то отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru означает, что написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу показать в браузере файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
· Если перед адресом добавляется упоминание протокола HTTP (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
· Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 9.1 показан файл index.html, в который требуется поместить рисунок sample.gif. Тогда относительный путь к изображению из index.html будет../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например:../../../images/pic.gif.
|
|
|
Рис. 9.1. Пример размещения файлов
· Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис.9.2, относительный путь к рисунку sample.gif из файла index.html будет images/pic.gif.
Рис. 9.2. Пример размещения файлов
В примере 9.1 показаны несколько способов указания пути к графическому файлу при добавлении изображений на веб-страницу.
Пример 9.1. Вставка изображения в документ
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="http://www.htmlbook.ru/images/sample.gif"> - абсолютный адрес размещения изображения
<img src="/images/sample.gif"> - адрес размещения изображения относительно корня сайта
<img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>
Альтернативный текст
Альтернативный текст позволяет получить текстовую информацию об изображении при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то альтернативный текст появляется раньше самого рисунка. Некоторые браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 9.2.
Пример 9.2. Добавление альтернативного текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<a href="index.html"><img src="home.gif" alt="Вернуться на главную страницу"></a>
</body>
</html>
Размеры изображения
Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG> (пример 9.3). В качестве значений используется пиксел — элементарная точка на мониторе.
|
|
|
Пример 9.3. Размеры изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" height="111" width="100">
</body>
</html>
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.
Замечание
Подход, когда приходится менять размеры изображения относительно исходных, не следует применять часто. Если количество пикселов в картинке насильно увеличивается, то они никак не появятся из ниоткуда и браузеру придется, используя алгоритмы интерполяции, достраивать их самостоятельно. Тот же алгоритм применяется и в обратном случае, когда необходимо уменьшить картинку. Данный подход изменения размера изображения получил термин ресемплирование. Качество ресемплирования напрямую зависит от типа изображения, чем больше оно содержит мелких и контрастных деталей, тем хуже конечный результат, который проявляется как размытость.
Рамка вокруг изображения
Вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста на веб-странице. Для этого служит параметр border тега <IMG> (пример 9.4). В качестве значения указывается толщина рамки в пикселах.
Пример 9.4. Добавление рамки вокруг изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" height="111" width="100" border="1">
</body>
</html>
Поля вокруг изображения
Для любого изображения можно задать пустые поля по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство (пример 9.5).
Пример 9.5. Добавление отступов вокруг изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" width="50" hspace="10" vspace="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>
|
|
|
Выравнивание изображения
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>. В табл. 9.1 перечислены возможные значения этого параметра и результат его использования.
| Табл. 9.1. Значения параметра align для выравнивания изображений | ||
| Значение | Описание | Пример |
| bottom | Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. | Lorem ipsum dolor sit amet, consectetuer  adipiscing elit...
|
| left | Изображение располагается по левому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
|
| middle | Середина изображения выравнивается по базовой линии текущей строки текста. | Lorem ipsum dolor sit amet,  consectetuer adipiscing elit...
|
| right | Изображение выравнивается по правому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
|
| top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
|
Наиболее популярные параметры? left и right, создающие обтекание вокруг изображения (пример 9.6).
Пример 9.6. Обтекание текста вокруг рисунка
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" hspace="10" vspace="10" width="50">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>
|
|
|
