Файл: Языки гипертекстовой разметки (Теоретические вопросы гипертекстовой разметки).pdf
Добавлен: 28.06.2023
Просмотров: 38
Скачиваний: 3
<UL TYPE=square>
<LI>Программирование
<LI>Алгоритмизация
<LI>Проектирование
</UL>
Приведем пример вложенных списков:
<HTML>
<HEAD>
<TITLE> Список работников </TITLE>
</HEAD>
<BODY>
<H2> Список работников организации </H2>
<H3> Составлено : 30 июля 2006 года </H3>
<p>Этот список содержит фамилии, отчества и имена всех работников фирмы. <P>
<p>Список может использоваться только в служебных целях. <P>
<OL>
<LI> Дирекция
<UL>
<LI> Иванов И.И.
<LI> Петров К.В.
</UL>
</LI>
<LI> Отдел маркетинга
<UL>
<LI> Варшавская Е.Л.
<LI> Самсонов Д.М.
</UL>
</LI>
</OL>
</BODY>
</HTML>
Тэг <UL> может иметь следующие параметры: TYPE=disc|circle|squade> или <OL TYPE=A|a|I|i|1 VALUE=n>, в зависимости от того, в списке какого вида находится этот элемент.
Следовательно, атрибут TYPE определяет тип маркера или счетчика, а VALUE=n — значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от данного номера, а каждый элемент списка задаётся при помощи тега <LI>. К примеру:
<OL TYPE=I START=15>
<LI> Программирование
<LI TYPE=i VALUE=25> Алгоритмизация
<LI> Проектирование
</OL>
- Программирование
- Алгоритмизация
- Проектирование
Список определений начинают с тэга <DL> и завершают тэгом </DL>. Этот список служит для создание списков типа «термин»-»описание». Каждый термин начинается тэгом <DT> , а описание — тэгом <DD>. К примеру:
<DL>
<DT> <B> Отдел маркетинга </B>
<DD> Этот отдел занимается продвижением услуг и продуктов
<DT> <B> Финансовый отдел </B>
<DD> Этот отдел занимается всеми финансовыми операциями
<DT> <B> Отдел кадров </B>
<DD> Этот отдел занимается набором и учетом новых работников организации, распределением отпусков, отслеживанием больничных листов и т.д.
</DL>
Особенности формирования элементов HTML на странице
Рисунки на web-странице
<IMG> является элементом для создания ссылки на графический файл (image). Он не содержит конечный тег — вся нужная информация задается с помощью аргументов. Данный элемент является универсальным: с его помощью могут использоваться изображения в гиперссылках, вставляться картинки в таблицы, размещаться рисунки на Web-странице, решаться задачи дизайна и т.д.
Требуемым атрибутом является src — указатель на файл графики:
src=«Ссылка на файл». К примеру: <IMG src=«cat5-web.jpg> — обычный рисунок, <IMG src=«1c5.gif»> — анимированный рисунок.
Обязательным и очень полезным атрибутом является атрибут alt. Он позволяет выводить текст в тех местах, в которых должны быть расположены рисунки. Страница может загружаться долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он может получить.
К примеру: <IMG src=«cat5-web.jpg alt=«Фотография маленького котенка» >. <IMG src=«1c5.gif» alt=«Большая черная кошка, гуляющая сама по себе»>
Ширину и высоту области, в которой представлен рисунок, задают с помощью атрибутов height — высота и width— ширина.
К примеру: <IMG src=«bos2.gif» width=«76» height=«121»>
<img src=«bos2.gif» width=«176»>. Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет автоматически изменена). При этом происходит потеря качества изображения, следовательно, желательно задавать данные аргументы в согласно реальным размерам рисунка.
Атрибут border задает размер рамки вокруг объекта, к примеру, border=«4» ширина рамки задается в пикселях и в рассматриваемом примере равняется 4.
<IMG src=«cat5-web.jpg» alt=«Фото котёнка в рамке» width=«176» style=«border: 4px solid #9A2EEB;»>. Размер рамки и её цвет зададим, к примеру, при помощи стилей.
Полностью тег IMG должен выглядеть так:
<IMG src=«bos2.gif» width=«76» height=«121» alt=«Портрет маленького джентльмена»>
Если нужно использовать рисунок в качестве обоев страницы, то в теге <BODY> используется аргумент background с указанием адреса рисунка обоев.
К примеру: <BODY background=«wood.jpg»>
Гиперссылки
<A> </a> — один из наиболее важных элементов языка, который обеспечивает создание гиперссылок. Зачастую используют следующий шаблон:
Произвольный текст <A href=«адрес ссылки»>Текст для щелчка </a>
К примеру, следующим образом выглядит гиперссылка в тексте: Если вы хотите вернуться к материалам урока «Гиперссылки», то вам <a href=«index.html#zakl2»>сюда</a>, при этом следует предварительно поставить имя закладки перед тем местом в документе, на которое происходит переход. Закладка в документе задаётся так: <a name=«имя закладки»></a>. В данном случае это имя zakl2.
Следующим образом задают шаблон тогда, когда видимая часть гиперссылки представляет собой рисунок:
<A href=«Адрес ссылки»> <IMG src=«Ссылка на рисунок»> </a>
К примеру: Чтобы вернуться к уроку «Гиперссылки» нажмите на кнопку <A href=«index.html#zakl2»><IMG src=«knopka.gif» width=«30» height=«20»></a>
Внутри тега <BODY> используют аргумент link — задает цвет ссылок на всей Web-странице, vlink — задает цвет посещенных ссылок, alink — задает цвет активных ссылок (цвет появляется при нажатии мыши).
Например: <BODY link=«0000FF» vlink=«CC0066» alink=«FF0000»>
По умолчанию используют ссылку на файлы текущей папки (той, где располагается файл Web-страницы). В данном случае указывают имя файла, к примеру: page2.htm, photo35.gif и т.д.
Зачастую используют относительные ссылки на папки, что позволяет легко изменять местоположение комплекса страниц на диске. Если в текущей папке существует другая, в которой размещаются нужные файлы, ссылка строится по следующему шаблону:
href=«./Папка/файл.тип». Здесь на структуру вложенных папок указывает точка перед наклонной чертой. Если нужно указать папку, которая находится на том же уровне вложенности, что и текущая, добавляется еще одна точка: href=«../Папка/файл.тип».
Если ссылка указывает на какой-то Web-ресурс, то она выглядит так: href=«http://www.netscape.com».
Когда гиперссылку используют для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такая ссылка размещается в конце страницы для обеспечения связи с автором страницы или Web-мастером, к примеру:
<A href=«mailto:goncharov@online.ru>Алексей Гончаров</a>
Таблицы
Таблицы представляют собой очень удобное средство форматирования данных на Web-станице. Они позволяют решать дизайнерские задачи, а именно: выравнивать части страницы друг относительно друга, размещать текст и рисунки рядом, управлять цветовым оформлением и т.д.
При создании таблиц используют принцип вложения, а именно: внутри основного элемента таблицы <TABLE> создают ряд элементов, которые определяют строки <TR>, а внутри данных элементов размещают элменты для описания каждой ячейки в с строке <TD>.
<TABLE> </table> — внешний элемент таблицы.
<TR> </tr> — элемент, который задает строку таблицы. Конечный тег может не использоваться, поскольку строка завершается там, где начинается следующая строка.
<TD> </td> — элемент, который задает ячейку таблицы. Конечный тег можно также не использовать.
Ширина таблицы можно задаваться точно в пикселах или в процентном отношении к ширине страницы в окне браузера.
К примеру, если следует создать таблицу определенного размера, то указывают следующее:
<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>
Разметка web-страницы с использованием таблицы
Разметка Web-странцы должна производиться с использованием таблицы. Возможны разные варианты разметки. Рассмотрим некоторые из них.
1 вариант
Разметка страницы производится при помощи таблицы шириной на весь экран, вне зависимости от того, каким является разрешение экрана (width=100%). В рассматриваемой ситуации удобно создать таблицу, которая состоит из двух столбцов и двух строк. Верхняя строка будет отводиться под заголовок страницы, левый столбец будет отводиться под меню Web-сайта.
2 вариант
Разметка страницы производится при помощи использования таблицы шириной 760 пикселей, которая выровнена по центру экрана. В рассматриваемом случае удобно создать таблицу, которая состоит из трех строк и одного столбца. Верхняя строка будет отводиться под заголовок страницы, вторая строка будет отводиться под меню Web-сайта, а третья строка отводится под содержание сайта.
Если нужно разместить внутри текста страницы какие-то изображения, фотографии и пр., то в данном случае также можно использовать таблицы. В приведенном ниже примере во вторую ячейку второй строки вставлена таблица, которая состоит из трех столбцов и двух строк. В первую и в третью ячейки первой строки вставлены иллюстрации, а во вторую ячейку первой строки — название страницы. Во все ячейки второй строки введен текст страницы.