Задание к теме

1. Создать папку с именем Тема1.

2. Открыть текстовый редактор Блокнот.

3. Сохранить документ с именем rabota1_1.htm в папку Тема1.

4. Набрать HTML-код согласно варианту, соблюдая заданное форматирование текста и не забывая сохранять документ.

5. Результат просматривать в Internet Explorer (Пуск – Недавние документы – rabota1_1.htm), корректируя ошибки (исправив ошибку, нужно сохранить документ и, переключившись в IE, нажать кнопку Обновить, чтобы посмотреть исправления).

6. Создать еще один HTML-документ (по рис. 3). Сохранить с именем rabota1_2.htm.

Замечание. HTML-код можно просмотреть также непосредственно в Internet Explorer, если в меню Вид выбрать команду Просмотр HTML-кода.

Работа №2. «Разделы языка html. Гиперссылки и таблицы»

Цель работы: научиться создавать гиперссылки и таблицы в кодах HTML.

Теоретико-методическая часть

Напомним, что HTML – это язык разметки гипертекста, который обеспечивает поддержку интерактивности.

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

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

Гипертекстовая организация текста может быть эффективно использована для построения электронных словарей, энциклопедий, учебников, других различных электронных изданий. Она использовалась ранее и в печатных учебных изданиях.

Теги оформления гиперссылок позволяют:

• определять в тексте гиперссылки, которые указывают на фрагменты данной HTML - страницы или на другие страницы, либо их фрагменты;

• обозначать начальные точки фрагментов текста (якорные точки), которые могут служить целевыми точками в процессе навигации по структуре текста с помощью заранее предусмотренных в нем гиперссылок;

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

С разметкой текста мы познакомились ранее. Теперь выясним, как разметить фрагмент текста, чтобы он стал ссылкой. Тег гиперссылки в общем виде выглядит так: <a href=”ссылка”> текст ссылки </a>, где ссылка может указывать на URL (адрес электронного ресурса в Интернете), документ HTML, FTP-сервер, адрес электронной почты и т.п.

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

Пример,

<a href=”http://www.rambler.ru”> поиск информации </a> - абсолютная ссылка;

<a href=first.htm> на первую страницу </a> - относительная ссылка;

<a href=rabota1_2.htm> Клиенты </a> - относительная ссылка.

Важно! Тег гиперссылки является строковым, т.е. не имеет в начале и в конце перевода строк, поэтому после тега </a> для перевода строки следует использовать тег <br>.

Таблицы. Служат для отображения табличной информации и правильного расположения блоков на странице. С помощью тегов можно описывать свойства встроенных в текст таблиц.

Для создания таблицы предназначен тег <table>….</table>.

В общем случае таблица имеет следующую структуру:

<table> - начало таблицы

<tr>… строка таблицы

<th>…</th> - заголовок столбца (всегда вложен в <tr>…</tr>)

</tr> - окончание строки

<tr> - начало новой строки

<td>…</td> - ячейка таблицы (всегда вложена в <tr>…</tr>)

<td>…</td> - ячейка таблицы….

</tr> - окончание строки

</table> - окончание таблицы

По умолчанию таблица выводится без линий сетки. Для обозначения сетки используется параметр border, который задает толщину рамки в пикселях. Например, <table border=1>.

Для задания размеров таблицы и ее элементов используют параметры width (ширина) и height (высота). Размеры можно указывать в пикселях или в процентах (относительно ширины и высоты окна браузера). Используются эти параметры для тегов <table>, <th> и <td>. Например, <table border=1 width=50%> - ширина всей таблицы составляет 50% от ширины окна браузера.

За горизонтальное выравнивание как самой таблицы, так и содержащихся в ней элементов отвечает параметр align. Чтобы изменить выравнивание в элементах таблицы, в них нужно изменить значение этого параметра. Тогда во вложенных тегах таблицы (<tr>, <th>, <td>) значение будет действовать до закрытия тега.

Выравнивание по вертикали задается параметром valign, который может принимать три значения: bottom (по нижнему краю), top (по верхнему краю) и middle (по центру). По умолчанию выравнивание - по центру.

Следующие параметры - cellspacing и cellpadding задают в пикселях расстояние между ячейками таблицы и отступы вокруг содержимого каждой ячейки соответственно. По умолчанию cellspacing=2 и cellpadding=1.

Например, разметим таблицу

Магазин	План	Факт
Салют	120	100
Динамо	200	210
Энергия	180	200

следующим образом

<font face=Verdana>

<table bgcolor=#CCCAAA border=1 width=300 height=160 align=center

cellspacing=0 cellpadding=0>

<tr bgcolor=#FFFBBB><th width=40%>Магазин</th>

<th width=30%>План</th>

<th>Факт</th></tr>

<tr align=center valign=bottom><td>Салют</td>

<td>120</td>

<td>100</td></tr>

<tr align=right><td>Динамо</td>

<td>200</td>

<td>210</td></tr>

<tr valign=top><td>Энергия</td>

<td>180</td>

<td>200</td></tr>

</table>

</font>

Результат в обозревателе:

Рис. 4 Результат разметки таблицы