|
p align="left">5.1 Параметры элемента <IMG> Элемент <IMG> используется для вставки изображения в Web- страницу. Это непарный тег. Относится к элементам разметки на уровне текста, т.е. располагает иллюстрацию в любом месте строки. Параметры тега <IMG> (атрибуты): ALIGN=”Left | Right | Top | Middle | Bottom”__ управление обтеканием текста ALT=”Alternative Text”____________________ альтернативный текст SRC=”images/r1.jpg”____________________URL файла-иллюстрации (подробнее о атрибуте SRC см. в разделе 2.4.2) BORDER=0 ____________________________толщина рамки WIDTH=300___________________________ширина иллюстрации HEIGHT=175___________________________высота иллюстрации VSPACE=0 ____________________________поля сверху/снизу HSPACE=0 ____________________________поля сбоку атрибуты WIDTH и HEIGHT Если не указать значения Width и Height, то броузер не сможет отобразить страницу до тех пор, пока не станут известны параметры изображения. Значения можно указать в процентах относительно размеров окна броузера. Примеры: <IMG src=”1.jpg” width=”100” height=”35” border=”0”> <IMG src=”2.jpg” width=”30%” height=”10%”> <IMG src=”3.jpg” width=”100%” border=”0”> атрибуты HSPACE и VSPACE Задают горизонтальные и вертикальные отступы вокруг иллюстрации. Пример:<img src=”1.jpg” hspace=”0” border=”2” width=”100” height=”50” alt=”1”> <img src=”2.jpg” hspace=”30” border=”2” width=”100” height=”50” alt=”2”> <img src=”3.jpg” hspace=”90” border=”2” width=”100” height=”50” alt=”3”> 5.2 Управление размещением иллюстрации и обтеканием текста атрибут ALIGN. Задаёт выравнивание иллюстрации и управляет обтеканием текста вокруг нее. 5.3 Создание ссылки Ссылка - это просто однонаправленный указатель с исходного документа, к котором эта ссылка содержится, на какой-либо адрес. В гипертексте конечные точки ссылки называются «якорями». Термин «якорь» официально введен в лексику HTML. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его броузером. В качестве ссылки могут выступать практически любые объекты - от текста до иллюстрации. Для создания ссылки используется парный тег <A>. Между открывающим и закрывающим тегами находится содержимое ссылки. В большинстве браузеров текстовые ссылки выводятся с подчеркиванием. Шрифт текста, как правило, окрашивается в синий (если ссылка не посещалась), в лиловый (если ссылка уже посещалась). Если в ссылку включен рисунок, рамка вокруг него тоже будет окрашена либо в синий, либо в лиловый цвет, если только толщина рамки не была установлена на ноль. Можно переопределить принятые по умолчанию цвета с помощью атрибутов LINK, ALINK и VLINK элемента <BODY>. Атрибут LINK меняет цвет всех непосещенных ссылок, VLINK - цвет всех посещенных ссылок. Атрибут ALINK меняет цвет активной ссылки, этот цвет появляется на короткое время, когда ссылку выбирают. С помощью списков стилей можно изменить оформление ссылок (отключить подчеркивание и т.д.) 5.3.1 Параметры тега <A>.Понятие внешней и внутренней ссылки Типичная ссылка выглядит так: <A HREF=”URL”>Посетите наш узел</A>. Текст «Посетите наш узел» превращается в ссылку. Атрибут HREF определяет направление перехода при выборе ссылки. Базовые атрибуты элемента <A> представлены в таблице: |
Имя атрибута | Возможные значения | Описание | | HREF | URL | URL | | NAME | Текст | Присваивает якорю имя, чтобы на него мог сослаться другой якорь | | ID | Текст | Присваивает якорю идентификатор, чтобы на него мог сослаться другой якорь, списки стилей или сценарий | | TITLE | Текст | Задает текст подписи для ссылки | | TARGET | Название кадра | Определяет, в каком кадре будет открываться указанный объект | | ACCESSKEY | Символ | Задает клавишу на клавиатуре, по которой будет активизироваться ссылка | | TABINDEX | Цифровое значение | Задает порядок, по которому будут обходиться ссылки при нажатии на клавишу TAB | | |
Ссылки бывают внешние и внутренние. Внешние ссылки адресуют на страницу или сайт. Внутренние ссылки адресуют внутрь самого документа. Для создания внутренней ссылки необходимо сделать следующее: 1. Создать метку в конкретном месте документа:(<a name=”metkaA”>). Закрывающий тег необязателен. Заглавные и строчные не различаются. 2. Организовать ссылку: <а href=”#metkaA”>перейти к разделу A</а> Для перехода внутрь другой страницы, например index.htm, сделайте так: <a href=”index.htm#metkaA”>перейти к разделу A</a> На помеченную область в любом HTML-документе можно сослаться из любого документа. Для этого достаточно после обычного URL поставить знак # и имя метки в целевом документе, как в следующем примере: <A href=”http://www.company.com/products.htm#spec”>Характеристики<A> Здесь сделана ссылка на метку #spec в файле products.htm. Внутренние ссылки часто используются для создания оглавления. Ниже приведен пример создания оглавления с помощью внутренних ссылок: <!--оглавление--> <h3><a href=”#ATM”>Adobe ATM Deluxe 4.0</a></h3> <h3> <a href=”#Acrobat”>Adobe Acrobat 4.0</a></h3> <h3><a href=”#Streamline”>Adobe Streamline 4.0</a></h3> <! - конец оглавления--> <h2> <A NAME=”ATM”> </A> Adobe ATM Deluxe 4.0 </h2> Утилита ATM Deluxe занимает первое место среди программ по отображению и управлению шрифтами. Работает с растровыми шрифтами, векторными шрифтами PostScript и TrueType. Шрифты можно объединять в группы и динамически подключать и отключать. <h2> <A NAME=”Acrobat”> </A> Adobe StreamLine4.0 </h2> Вышла новая версия пакета Adobe Acrobat - версия 4.0. При помощи набора утилит Acrobat можно создавать и редактировать документы в формате PDF. Это независимый формат обмена графическими и текстовыми документами, удобный для их просмотра и печати на любой компьютерной платформе. При этом сохраняются все кодировки символов и шрифты. <h2> <A NAME=”Streamline”> </A> Adobe StreamLine 4.0 </h2> Программа StreamLine используется для векторизации растровых изображений. При этом достигается повышение качества и возможность масштабирования изображений без потери качества. 5.3.3 Способы указания источника файла для иллюстраций и ссылок Атрибут SRC в элементе <IMG> указывает местонахождение файла иллюстрации. При этом используются 3 типа адресации: 1. Абсолютная, например: SRC=”D:/mysite/first/1.jpg” Используется для адресации иллюстрации в пределах конкретного компьютера. При переносе файлов на удаленный сервер она станет “висячей”. Поэтому избегайте указания абсолютного адреса. 2. Относительная, например: SRC=”images/2.jpg” Используется для адресации иллюстрации в пределах одного сайта. Не привязана к конкретному диску, поэтому перенос сайта на удаленный сервер не нарушит работы ссылки. Поэтому используйте только относительную адресацию в пределах одного сайта. Пример: с11.htm ссылается на с11.jpg: < img src=”.c11.jpg”> c.htm ссылается на c11.jpg: <img src=”c1/с11.jpg”> c21.htm ссылается на c.jpg: <img src=”../c.jpg”> c11.htm ссылается на c21.jpg: <img src=”../c2/c21.jpg”> 3. В виде URL, например: SRC=”http://www.mysite.com/first/1.jpg” Используется для адресации иллюстраций на других сайтах. Для ссылок используются те же способы адресации, что и для файлов иллюстраций. Адресация ссылки задается в атрибуте HREF элемента <A>. Примеры различных способов адресации: 1. Абсолютный адрес: HREF=”D:/Папка 1/Раздел 1/index.htm” Ссылка привязана к конкретному месту диска. При переносе файлов она станет “висячей”. Поэтому избегайте указания абсолютного адреса. 2. Относительный адрес: HREF=”Папка 1/Раздел 1/index.htm” Ссылка привязана к конкретной папке. Поэтому перемещение папки более высокого уровня не повлияет на ссылку. Если же надо перейти на уровень выше, то следует использовать ”../”. Если на 2 уровня - то “../../”. Например:”../../Папка 00/Папка 01/Папка2/try.htm” ! Если в элементе <BASE> раздела <HEAD> задан базовый URL, то все относительные ссылки рассчитываются относительно базового URL. 3. В виде URL: протокол://имя-сервера:порт/путь. Для адресации ссылок на другой сайт. Наиболее часто используемые протоколы: - file: чтение файла с локального диска. Данный протокол используется для отображения какого-либо файла, находящегося на локальной машине пользователя. Например: file:/home/alex/index.htm - отображает файл index.htm из каталога /home/alex на пользовательской машине - http: доступ к WEB-странице в сети с использованием HTTP -протокола. Например: http://www.company.com/- доступ к домашней странице компании COMPANY. - ftp: запрос файла с анонимного FTP -сервера. Например: ftp://hostname/directory/filename - mailto: активизирует почтовую сессию с указанным пользователем и сервером. Например: mailto:info@company.com - активизирует сессию посылки сообщения пользователю info на машине company.com, если браузер поддерживает запуск электронной почты. - telnet: обращение к службе telnet - news: вызов службы новостей, если браузер её поддерживает. Например: news:relcom.www.support Путь в URL - это частичный или полный путь к документу. Примеры: - www.allair.com - www.allair.com/index.htm - www.allair.com/first/second/1.htm Примеры ссылок: <a href=”http://www.allaire.com”> сервер компании Allaire</a><br> <a href=”index.html”> сервер комп. Allaire (ссылка внутри сервера) </a><br> <a href=”http://www.allaire.com”> <img src=”allaire.jpg”></a> В последнем примере изображение является ссылкой. 6. СОЗДАНИЕ ТАБЛИЦ6.1Таблицы - основное средство управления расположением материаловТаблицы - единственное в HTML средство скомпоновать страницу в полном соответствии с замыслом. С помощью таблиц данные могут быть аккуратно размещены в пределах Web-страницы.Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.Ячейки одной строки не могут иметь разную высоту. Пустые ячейки отображаются броузером некорректно (должен быть хотя бы неразрывный пробел ). По умолчанию таблица не имеет рамки: толщина рамки (border) равна 0; и имеет центрированное вертикальное выравнивание содержимого ячеек строки (valign=middle). Браузер может сам изменить размеры отображаемой таблицы по своему усмотрению. Информация не может не уместиться в таблице - если надо, браузер увеличит размеры отображаемой таблицы. Внутри таблицы не действует форматирование, заданное снаружи. Текст ячейки необходимо форматировать внутри данной ячейки. Таблицу можно поместить внутрь ячейки другой таблицы (вложение таблиц). 6.2Строение таблицы. Основные элементы Таблица описывается следующими тегами: <TABLE> - начинается описание таблицы (парный тег); <TR> - строка таблицы (парный тег); <TD> - ячейка таблицы (парный тег); <TH> - заголовок таблицы (парный тег); <CAPTION> - подпись (парный тег)
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
| 
