Файл: Языки гипертекстовой разметки (Теоретические вопросы гипертекстовой разметки).pdf

Скачать файл (0,07Мб)

Заказать решение

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 28.06.2023

Просмотров: 40

Скачиваний: 3

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Введение

Теоретические вопросы гипертекстовой разметки

Основы HTML

Особенности формирования элементов HTML на странице

Рисунки на web-странице

Гиперссылки

Таблицы

Разметка web-страницы с использованием таблицы

Фреймы

Заключение

Список использованных источников

<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>. К примеру:

<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 должен выглядеть так:

Если нужно использовать рисунок в качестве обоев страницы, то в теге <BODY> используется аргумент background с указанием адреса рисунка обоев.

К примеру: <BODY background=«wood.jpg»>

Гиперссылки

<A> </a> — один из наиболее важных элементов языка, который обеспечивает создание гиперссылок. Зачастую используют следующий шаблон:

Произвольный текст <A href=«адрес ссылки»>Текст для щелчка </a>

К примеру, следующим образом выглядит гиперссылка в тексте: Если вы хотите вернуться к материалам урока «Гиперссылки», то вам <a href=«index.html#zakl2»>сюда</a>, при этом следует предварительно поставить имя закладки перед тем местом в документе, на которое происходит переход. Закладка в документе задаётся так: <a name=«имя закладки»></a>. В данном случае это имя zakl2.

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

К примеру: Чтобы вернуться к уроку «Гиперссылки» нажмите на кнопку <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> — элемент, который задает ячейку таблицы. Конечный тег можно также не использовать.

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

К примеру, если следует создать таблицу определенного размера, то указывают следующее:

<TR>

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

</tr>

</table>

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

<TR>

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

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

</tr>

</table>

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

<TR>

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

</tr>

<TR>

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

</tr>

</table>

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

<TR>

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

</tr>

<TR>

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

</tr>

</table>

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

<TR>

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

</tr>

<TR>

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

</tr>

</table>

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

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

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

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

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

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

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

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

<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-сайта, а третья строка отводится под содержание сайта.

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