Изображения в HTML-документе




Структура Web - страницы

<HTML> <HEAD> Служебная информация - нужна браузеру <TITLE> Заголовок страницы </TITLE> - появляется в зоне заголовка окна браузера </HEAD> <BODY> Информация, видимая в рабочей зоне окна браузера </BODY> </HTML> зона заголовка
рабочая зона окна

 

Глава 5. За пределами HTML-файла

Связывание

Как уже упоминалось в самом начале, сокращение HTML означает "язык маркировки гипертекстов". Про маркировку мы уже поговорили достаточно. Не пора ли перейти к гипертексту?

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

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

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

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

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

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

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

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

На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например, если Вы хотите дать ссылку на это руководство со своей странички, Вам придется ввести в свой HTML-документ примерно такой фрагмент:

<A HREF="https://www.yi.com/home/ChuvakhinNikolai/pr.htm"> Практическое руководство по HTML Николая Чувахина</A>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 2.0</A>) по FTP.</P> <P>Можно дать пользователю возможность послать почту (например, <A HREF="mailto:nc@iname.com">автору этого руководства</A>).</P> </BODY> </HTML>

Изображения в HTML-документе

Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.

Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:

<IMG SRC="picture.gif">

Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:

<IMG SRC="picture.gif" ALT="Картинка">

Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).

Файл, содержаций изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя (см. раздел "Связывание").

Разберем все, что мы знаем об изображениях, с помощью примера 8.

<HTML> <HEAD> <TITLE>Пример 8</TITLE> </HEAD> <BODY><H1>Изображения </H1> <P>Изображение можно встроить очень просто: </P> <P><IMG SRC="picture.gif"></P> <P>Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P> <P><A HREF="pr.htm"><IMG SRC="picture.gif"></A></P> </BODY> </HTML>

Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке (в примере 8 переход происходит на оглавление Руководства).

 

Таблицы

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

При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элеметы для описания каждой ячейки в с строке TD.

<TABLE> </table> - внешний элемент талицы.

<TR> </tr>- элемент, задающий строку таблицы. Конечный тег можно не использовать, т.к. строка заканчивается там, где начинается следующая строка.

<TD> </td> - элемент, задающий ячеку таблицы. Конечный тег также можно не использовать.

Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:

<TABLE> Начало таблицы Посмотреть
<TR> Начало первой строки
<TD> Первая ячейка первой строки</td> Первая ячейка первой строки
<TD> Вторая ячейка первой строки</td> Вторая ячейка первой строки
</tr> Конец первой строки
<TR> Начало второй строки
<TD>Первая ячейка второй строки</td> Первая ячейка второй строки
<TD>Вторая ячейка второй строки</td> Вторая ячейка второй строки
</tr> Конец второй строки
</table> Конец таблицы

Ширину таблицы можно задавать точно в пикселах или в процентном отношении к ширине страницы в окне броузера.

Например, если нам нужно здать таблицу определенного размера, то мы укажем:

<TABLE width="500" >

<TR>

<TD> Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца.</td>

</tr>

</table>

Посмотреть

Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800х600, 1024 х 768, 1280 х 1024) у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы как 100%.

<TABLE width="100%" >

<TR>

<TD> Ширина этой таблицы 100%.</td>

<TD> и она состоит из одной строки и двух столбцов </td>

</tr>

</table>

Посмотреть

Для всей таблицы может быть задан цвет фона: bgcolor="Цвет" или bgcolor="#RRGGBB", например:

 

<TABLE width="100%" bgcolor="#00CC99" >

<TR>

<TD> Ширина этой таблицы 50%.</td>

</tr>

<TR>

<TD> и она состоит из двух строк и одного стобца </td>

</tr>

</table>

Посмотреть

Можно задавать отдельно цвет ячеек таблицы.

table width="600" border="1" cellspacing="0" cellpadding="5" align="center">
<tr>
<td bgcolor="#00FFFF"></td>
<td bgcolor="#CCFF00"></td>
<td bgcolor="#FF6633"></td>
</tr>
<tr>
<td bgcolor="#0000FF"></td>
<td bgcolor="#33FF66"></td>
<td bgcolor="#FF00FF"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"></td>
<td bgcolor="#9933FF"></td>
<td bgcolor="#FFFFCC"></td>
</tr>
</table>

Посмотреть

Шириной боковой грани управляет атрибут border. Можно задать ширину боковой грани таблицы в пикселах.

 

 

<TABLE width="100%" bgcolor="#00CC99" border="3" >

<TR>

<TD> </td>

<TD> Ширина этой таблицы 300 пикселов</td>

<TD> </td>

</tr>

<TR>

<TD> и она состоит из двух строк и трех столбцов</td>

<TD> </td>

<TD></td>

</tr>

</table>

Посмотреть

Можно сделать грани таблицы невидимыми, для этого ширину бордюра таблицы нужно задать равной 0:

 

<TABLE width="100%" bgcolor="#00CC99" border="0" >

<TR>

<TD> </td>

<TD> Ширина этой таблицы 300 пикселов</td>

<TD> </td>

</tr>

<TR>

<TD> и она состоит из двух строк и трех столбцов</td>

<TD> </td>

<TD></td>

</tr>

</table>

Посмотреть

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

left - выравнивание влево;

right - выравнивание вправо;

center - центрирование.

Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:

top - выравнивание по верхнему краю ячейки

center - выравнивание по центру

baseline - выравнивание по первой строке.

<table width="100%" border="1" cellspacing="0" cellpadding="5" align="center">
<tr> <td width="257">Выравнивание по горизонтали</td>
<td width="233" align="center">
По центру
</td>
<td width="217" align="left">
По левому краю
</td>
<td width="246" align="right">
По правому краю
</td>
</tr>
<tr>
<td width="257" height="112">Выравнивание по вертикали</td>
<td width="233" height="112" valign="top">По верхнему краю</td>
<td width="217" height="112" valign="middle">По центру</td>
<td width="246" height="112" valign="baseline">По нижнему краю</td>
</tr>
</table>

Посмотреть

Задание

1. Составьте таблицу для расписания ваших уроков. Пусть эта таблица состоит из восьми столбцов и девати строк. Ширина таблицы - 100%.

2. В первом столбце укажите время начала и конца ваших уроков. Выравнивание данных в ячейках по левому краю.

3. В остальных стобцах школьные предметы по дням недели.

4. Выравнивание дней недели - по центру ячейки и жирным шрифтом.

5. Выравнивание названий предметов - по левому краю.

6. У всех стоблцов фон сделайте разным цветом.

7. Перед таблицей поместите заголовок "РАСПИСАНИЕ УРОКОВ", выделив его тегами <H1> и </h1>. Цвет заголовка - красный.

8. Между заголовком и таблицей поместите рисунок.



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2016-02-17 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: