Шпаргалки по "Информатике"

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

35. Работа с  графикой в языке HTML . Вставка в HTML-страницу изображений

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

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

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

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

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

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

На Web-страницах в подавляющем  большинстве случаев используется графика в двух форматах: GIF и JPG. Эти два формата поддерживаются почти всеми браузерами.

Формат BMP является стандартом MS Windows и поддерживается браузером Internet Explorer, однако его употребление не может быть рекомендовано, так как данный формат не поддерживает сжатие данных.

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

Иные графические форматы (кроме GIF и JPG) в HTML-документах на WWW-серверах практически не встречаются, хотя принципиально это возможно. Использование других форматов не рекомендуется по следующим причинам: во-первых, только для GIF и JPG осуществляется встроенная поддержка в большинстве браузеров, тогда как для иных файлов необходимо подключение внешних программ отображения, во-вторых, структура файлов GIF и JPG наиболее подходит для передачи данных по сети и является независимой от платформы.

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

Вставка изображений и объектов HTML

Для вставки в HTML документ изображений используется одинарный тэг                            <img src="путь_к_картинке">.

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

Атрибут src содержит полный или относительный путь к файлу изображения.

Помимо обязательного  атрибута src, тэг <img> может содержать дополнительные атрибуты:

alt="текст" - альтернативное (показываемое вместо изображения, при отключенной графике в браузере) всплывающее описание

width="число" - ширина изображения

height="число" - высота изображения

border="число" - рамка вокруг изображения

hspace="число" - горизонтальный отступ прилегающего текста

vspace="число" - вертикальный отступ прилегающего текста

align="left|right|middle" - выравнивание, фактически определяет как прилегающий текст будет обтекать изображение.

 

 

 

36. Создание гиперссылок  на html-странице: внешние и внутренние  ссылки

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

Существует несколько  видов ссылок. Они бывают внешними и внутренними, текстовыми и графическими. Само название такого вида ссылок, как внешние, говорит о том, что она явно ведёт за «границы» html-документа, а внутренние – соответственно в какую-либо часть этого же документа. Текстовые ссылки – это текст, по умолчанию выделенный синим подчёркнутым шрифтом, а графические ссылки представляют собой какой-либо графический образ, по которому необходимо будет кликнуть для перехода. Данные типы ссылок легко будет создать в html самостоятельно при использовании специально для этого предназначенного тега < A>< /A> (в переводе с англ. anchor — «якорь»). Познакомимся с ним более детально.

Тег < A>< /A> так же, как  и другие теги, имеет свои атрибуты, первый из которых – атрибут href. Этот атрибут отвечает за создание внешней ссылки, то есть ведущей  к другому документу. Значением  данного атрибута является URL – адрес html-документа или название файла, но только в том случае, когда  этот файл расположен в той же папке, что и сам документ, иначе понадобится указать весь путь, целиком. Как уже отмечалось выше, ссылка может представлять собой как обычный текст (текстовая), так и графический образ (графическая). Оба варианта текста во многих источниках называют анкором. Если Вам нужно создать графическую гиперссылку, тогда в теги < A> и < /A> необходимо вставить другой – тег IMG. Синтаксический вид всего этого такой: <a href=»URL-адрес или имя файла»>текст ссылки (анкор)</a>

Цветовое оформление ссылок Вы можете изменять, воспользовавшись атрибутами тега BODY. Собственно ко всему  процессу преобразования текста ссылок можно привлекать те же самые атрибуты, что и к форматированию основного  текстового материала документа (подчёркивать текст, выделять полужирным шрифтом, применять  заголовки и прочее).

Для создания графической  гиперссылки необходимо вставить на место текста тег IMG. Вот пример такой  гиперссылки: <a href=»http://sitemaste.ru/»><img src=»logo.jpg»></a>

По умолчанию браузер  автоматически сделает вокруг графической  гиперссылки окантовку. Если Вам  это не нужно, тогда в теге IMG для  атрибута border Вам следует установить значение 0.

Графические и текстовые  гиперссылки можно применять  в сочетании. В таком случае браузер  отобразить такую – двойную –  ссылку.

Тут же опять браузер откроет  выбранную гиперссылку в том  же окне. Для того чтобы этого  избежать необходимо воспользоваться  атрибутом target. Это второй, рассматриваемый  нами, атрибут тега < A>< /A>. У  этого атрибута свои значения:

blank — вскрывает документ в другом окне;

parent — загрузит ссылку в родительском окне;

self — по умолчанию вскрывает гиперссылку в том же окне.

Ещё один есть атрибут в  теге < A>< /A>. Он называется title. Он поможет сделать всплывающую при нацеливании на неё стрелки мыши дополнительную подсказку <a href=»http://sitemaste.ru/» title=»Перейти на главную страницу»>Главная страница</a>

Внутренние гиперссылки  создаются так же, как и внешние, но в значении атрибута href записывается якорь гиперссылки. Этот самый якорь  гиперссылки устанавливается с  помощью атрибута name.

Название якоря  может быть любое, но помните, что  некоторые браузеры не воспринимают их русский названия, вследствие этого  лучше всего пользоваться латиницей. Чтобы образовать якорь в теге < A> и < /A> текст вносить необязательно, поэтому его в основном никто  и никогда не указывает. Код html для  внутренней гиперссылки будет иметь  следующий вид: <a href=»#zagolovok»>К  заголовку</a>

Якорь располагается  возле заглавия данной страницы, куда Вы будете направлены, если кликните по гиперссылке. Якорь, возможно, вы уже  заметили, выглядит таким образом: <a name=»zagolovok»></a>

В значении атрибута href можно устанавливать как URL-адрес, так и место нахождения вашей  электронной почты с обязательной отметкой протокола (mailto   . Если Вы укажите адрес своей почты, то при клике по данной гиперссылке посетителю раскроется окно программы почты, где в строке «Кому» автоматически уже будет вписан Ваш почтовый адрес. В коде html это будет иметь следующий вид:

<a href=»mailto:admin@sitemaste.ru»>Моя  почта</a>

Браузер же отобразит  это так: Моя почта

 

 

 

 

37. Фреймы в языке html: плавающие фреймы

Фрейм (от англ. frame – рамка) – отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.

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

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

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

Плавающий фрейм – фрейм, который можно добавлять в  любое место веб-страницы. Еще одно его название – встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы.

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

Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный атрибут src, указывающий на загружаемый во фрейм документ

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>Плавающий фрейм</title>

 </head>

 <body>

  <p><iframe src="hsb.html" width="300" height="120"></iframe></p>

 </body>

</html>

Ширина и высота фрейма устанавливается  через атрибуты width и height. Сам загружаемый во фрейм файл называется hsb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.

Еще одно удобство плавающих фреймов  состоит в том, что в него можно  загружать документы по ссылке. Для  этого требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target.

<html>

 <head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>Плавающий фрейм</title>

 </head>

 <body>

  <p><a href="rgb.html" target="color">RGB</a> |

     <a href="cmyk.html" target="color">CMYK</a> |

     <a href="hsb.html" target="color">HSB</a></p>

  <p><iframe src="model.html" name="color" width="100%" height="200"></iframe></p>

 </body>

</html>

 

 

 

 

 

 

 

 

38. Фреймы в языке html: правила описания фреймов и  их взаимодействие

Фрейм (от англ. frame — рамка) — отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.

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

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

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

Тег <FRAME> определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере <FRAMESET>, который к тому же задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью параметра src=. Хотя обязательных атрибутов у тега<FRAME> и нет, рекомендуется задавать каждому фрейму имя через атрибут name=. Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.