Введение в HTML [Копия]

Контрольные вопросы:

1.Запись: <a href=”Example.html#Chapter01”>…</a> является ссылкой на … ?

2.Какой параметр тега <a> устанавливает окно или фрейм в котором откроется документ при переходе по ссылке. Какие его атрибуты отвечают за загружает страницу в новое окно браузера? В текущее окно браузера?

3.Как называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке?

4.Перечислить атрибуты тега <a>.

5.Что такое абсолютные и относительные ссылки?

Лабораторная работа №4

Графика в HTML

Изображения

Люди устроенны так, что первым делом обращают внимание на рисунки, а не на текст. Поэтому именно графическое оформление web - страницы во многом определяет, уделит ли читатель ей время или пройдет мимо. Недаром говорят, что лучше один раз увидеть, чем сто раз услышать.

Существует огромное множество графических форматов, однако для публикаций в Internet используются, в основном, только три - GIF ( Graphics Interchange Format), PNG (Portable Network Graphics) и JPEG ( Joint Potographic Expert Group). WEB - броузер несложно настроить и на другие форматы, такие как TIFF (Tagged Image File Format) и EPS (Encapsulate PostScript), однако практически все web - документы содержат только встроенные изображения в формате GIF, PNG и указатели на большие графические файлы высокого разрешения в формате JPEG .

Формат GIF

GIF (Graphics Interchange Format) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.

Особенности

Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры.

Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.

Поддерживает покадровую смену изображений, что делает формат популярным для создания баннеров и простой анимации.

Использует свободный от потерь метод сжатия

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

Формат JPEG

JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко применяемый при создании сайтов и для хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются определенным цветом.

Особенности

Количество цветов в изображении — около 16 миллионов, что вполне достаточно для сохранения фотографического качества изображения.

Основная характеристика формата — качество, позволяющее управлять конечным размером файла.

Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

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

Формат PNG-24

PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях

Особенности

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

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

Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пикселы в изображении неизменными, если сравнивать с другими форматами, то у PNG-24 конечный объем графического файла получается наибольшим.

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

Добавление рисунка

Для встраивания графических файлов используется тег <img>. Синтаксис: <img src="URL" alt="альтернативный текст">

Пример: <img src="/pictures/mypicture.jpg" alt="Моя рисунок">

текущей строки.

Border - Целочисленное значение аргумента определяет толщину рамки вокруг

Usermap - Cвязывает между собой картинку и карту-изображение, задаваемую с

помощью контейнера <map>. В качестве такой связи выступает имя идентификатора, которое указывается в значении атрибута usemap, и то же имя, заданное у атрибута name тега <map>. При этом в теге <img> идентификатор должен начинаться с символа решетки

(#).

Карты-изображения

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

<img src="MyPicture.jpg" alt="Навигация по странице" usemap="#Menu"> <p><map id="Menu" name="Menu">

<area shape="poly" coords="113,24,211,24,233,0,137,0" href="Lab1.html" alt="ЛР 1"> <area shape="poly" coords="210,24,233,0,329,0,307,24" href="Lab2.html" alt="ЛР 2"> </map></p>

<Map>

Тег <map> служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега <map> — в связывании тега <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге <img>, задаваемого атрибутом usemap, так и в теге <map>, устанавливаемого атрибутом name.

Атрибуты:

Name – Имя карты-изображения.

<Area>

Каждый элемент <area> определяет активные области изображения, которые являются ссылками. Тег задает форму области, ее размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере <map>, который связывает координаты областей с изображением. Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Атрибуты:

Практическое задание.

Создать html-файл, содержащий:

1. Рисунок размером 48х48 пикселей, содержащий номер вашей группы и бригады. Рисунок создать в любом графическом редакторе, например, Paint. Рядом с рисунком должен располагаться текст (любой). Расположение текста относительно рисунка:

<title>Тег TABLE</title> </head>

<body>

<table border="1" width="100%" cellpadding="5"> <tr>

<th>Ячейка 1</th> <th>Ячейка 2</th>

</tr>

<tr>

<td>Ячейка 3</td> <td>Ячейка 4</td>

</tr>

</table>

</body>

</html>

Bordercolor - Задает цвет рамки таблицы.

Cellpadding - Задает расстояние между рамкой ячейки и ее содержимым.

Cellspacing - Задает расстояние между ячейками таблицы.

Tbody, Tfoot, Colgroup).

– Отображает горизонтальные части рамки внутри таблицы.

– Отображает вертикальные части рамки внутри таблицы.

– Отображает все части рамки внутри таблицы. - Задает ширину таблицы.

Атрибуты тега <td>

Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои атрибуты, часть из которых совпадает с атрибутами тега <table>.

<table border="1"> <tr>

<td colspan="2">Ячейка 1</td> </tr>

<tr>

<td>Ячейка 2</td> <td>Ячейка 3</td>

</tr>

</table>

<table>

<tr>

<td rowspan="2">Ячейка 1</td> <td>Ячейка 2</td>

</tr>

<tr>

<td>Ячейка 3</td> </tr>

</table>

Baseline – Выравнивание по базовой линии, при этом происходит привязка содержимого

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

Заголовок таблицы, ряда

При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег <caption>.

Атрибуты:

Задает выравнивание таблицы по краю окна браузера.

Пример:

<table width="100%" border="1" cellpadding="4" cellspacing="0"> <caption>Заголовок таблицы</caption>

<tr>

<td>Столбец 1</td><td>Столбец 2</td><td>Столбец 3</td> </tr>

<tr>

<td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td> </tr>

</table>

Для задания заголовка одного из рядов таблицы, который поясняет его содержимое, используются теги <Th> и </Th>.

Для задания верхних и нижних колонтитулов таблицы используются теги <Thead> </Thead> и <Tfoot> </Tfoot>.

Для создания пустой ячейки можно использовать несколько способов. Например, поместить в ячейку символ "пробел" - , неразрывный пробел -   или тег <Br>.

2.Какой параметр тега <Frame> позволяет задать отображение верхней и нижней части рамки таблицы?

3.Какой тег отвечает за толщину рамки таблицы?

4.Как создать объединенные ячейки в таблице?

5.Как можно создать пустую ячейку?

Лабораторная работа №6.

Фреймы.

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

Достоинства:

Простота разделения страницы на области

Быстрота загрузки страницы

Изменение размеров областей “на лету” Недостатки:

Навигация (запутанный механизм перехода по страницам)

Плохая индексация поисковыми системами

Несовместимость с разными браузерами

Непрестижность

Создание фреймов

Для создания фреймов (областей страницы) используются теги <Frameset> и </Frameset>, а для их описания - теги <Frame>, которые указывают на HTML-документ, предназначенный для загрузки в область.

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

Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рисунке. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов

Пример (Index.html):

<html>

<head> <title>Фреймы</title>

</head>

<frameset cols="100,*">

<frame src="menu.html" name="MENU"> <frame src="content.html" name="CONTENT">

</frameset>

</html>