Работа с изображениями.
advertisement
Работа с изображениями. 1) Вставка фонового изображения. Чтобы в html документе установить картинку вместо фона, необходимо в теге < body > дописать атрибут background="имя рисунка.расширение". Учесть, что в этом случае картинка для фона должна находиться в той же директории (папке), что и исходный html документ. В противном случае необходимо полностью прописать путь к файлу с фоновым изображением. Так как для загрузки картинки в Интернете требуется некоторое время, а иногда пользователи путешествуют по Интернету с отключенной графикой и вашего красивого фона не увидят, то обычно в теге <body> наряду с атрибутом background через пробел прописывают атрибут для задания фона страницы bgcolor="название цвета". Пример <html> <head> <title>Фоновое изображение</title> </head> <body background="fon.gif" bgcolor="pink"> Здесь содержание документа </body> </html> Задается картинка для фона (ее название fon.gif) и прописывается атрибут для задания розового цвета фона (bgcolor="pink") 2) Вставка рисунка в html документ. Тег для вставки рисунка одиночный и не имеет закрывающейся пары. <img src="имя рисунка.расширение"> - вставка изображения Выравнивание текста относительно рисунка <img src="pr1.png" align="left"> <img src="pr1.png" align="right"> Расстояние между текстом и рисунком (по вертикали). <img src="pr1.png" vspace="10"> Расстояние между текстом и рисунком (по горизонтали). <img src="pr1.png" hspace="30"> Краткое описание картинки (появляется в html документе в браузере при наведении на рисунок указателя мыши) <img src="pr1.png" alt="моя фотография"> Ширина картинки <img src="pr1.png" width="100"> Высота картинки <img src="pr1.png" height="200"> Рамка вокруг картинки <img src="pr1.png" border="5"> Организация гиперссылок. Действие параметров bgcolor и text. Связывание. Если HTML - язык разметки гипертекста, то что же такое этот самый гипертекст? Гипертекст-текст с перекрестными ссылками. В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа. Ссылка состоит из двух частей. Первая из них – это то, что вы видите на Web – странице; она называется указатель ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес (UniversalResourseLabel-универсальный ярлык ресурса)). При щелчке мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL - адресом. Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который осуществляется переход. Оба действия выполняются с помощью тэга-контейнера <a>. Этот тэг имеет единственный атрибут href, значением которого является URL – адрес. В HTML переход от одного документа к другому задается по следующей схеме: <a href="URL - адрес">Указатель ссылки</a> В гиперссылке значением параметра href может являться URL – адрес различных ресурсов Internet . Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например: <a href="oglavl.htm">Перейти к оглавлению</a> Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ oglavl.htm. Внутренние ссылки. Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на имеющиеся разделы. Для организации внутренней ссылки надо создать указатель, определяющий место расположения. Таким указателем является параметр name в тэге <a>. Например, Вам надо сослаться в Вашем большом документе на раздел "Теория"(theory). В HTML – коде перед этим разделом надо будет вставить следующую строку: <a name=theory></a> Содержимое тэга <a> отсутствует, так как нет необходимости как-то выделять текст. После того как место назначения определено, приступаем к созданию ссылки на него. Для задания внутренней ссылки перед указываемым именем ставится префикс #, говорящий о том, что это внутренняя ссылка <a href="#theory">Теория</a>. "Прицельные" ссылки. Часто бывает нужным задать переход не просто к другому документу, а к конкретному месту в нем. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку или анкер (якорь), подобно тому, как это делается для внутренних ссылок. Рассмотрим пример. Допустим, нам надо из нашего документа перейти к определенному разделу, например "Практика" в другом документе book.htm. Будем поступать так. В исходном документе внутри гиперссылки добавим анкер, например, PR, следующим образом: <a href=book.htm#PR>Практика</a>. В документе book.htm перед абзацем "Практика" ставим якорь: <a name=PR></a>. Все готово. Можете проверить на собственных страницах. Ссылки на почтовый ящик. Ссылка на почтовый ящик my@rambler.ru может имеет следующий вид: <a href="mailto:my@rambler.ru">Пишите</a>. Параметры тэга <body>. Как уже говорилось, между тэгами <body> …</body> заключается содержательную часть HTML-документа. Большинство тэгов, должно располагаться в данном разделе документа. Тэг <body> имеет ряд параметров, ни один из которых не является обязательным, но может пригодиться для разработки интересно оформленных HTML-страниц. Как Вы уже смогли заметить, если в тэге <body> параметры отсутствуют, то браузер отображает такую страницу белым цветом, текст отображается черным цветом, гиперссылки – синим. Это сделано не просто так. Черный текст на белом фоне считается классикой с точки зрения Web-дизайна (хотя и ужасно заезженной). Это весьма объяснимо, т.к. наиболее читабельный именно такой вариант. Представьте себе желтый текст на красном фоне, или синий на черном. В первом случае оформление – вырви глаз, раздражающее и тяжело воспринимаемое; во втором – вообще читать невозможно, т.к. буквы почти сливаются с цветом страницы. Пожалуй, становится понятным одно из основных правил оформления Web – страниц: Оформление страницы не должно затруднять восприятие информации, находящейся на ней. Это, однако, не означает то, что надо использовать белый фон документа и черный текст, просто надо всегда думать не только о себе, но и о тех людях, которые, возможно посетят Ваш сайт. Итак, мы вплотную подошли к первому параметру тэга <body>bgcolor. Как Вы уже могли догадаться, данный параметр определяет цвет фона HTML – документа (bgcolor, от английского backgroundcolor задний фон). В языке HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая гамма базируется на трех основных цветах – красном (Red), зеленом (Green) и синем (Blue) – и обозначается RGB. Для каждого цвета задается шестнадцатиричное значение в пределах от 00 до FF, что соответствует диапазону 0 – 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, зеленый цвет имеет код #008000. Чтобы не запоминать совокупность цифр или букв, можно воспользоваться таблицей цветов (с их кодами), либо просто называть цвета своими именами (по английски), что менее желательно. Например, запись параметра bgcolor=red внутри тэга <body> эквивалентна записи bgcolor=#FF0000. Если с помощью параметра bgcolor можно определить цвет фона документа, то, естественно, можно определить цвет текста, для этого служит параметр text. Например, запись text=#0000FF внутри тэга <body> будет задавать текст синего цвета. Заметим, что в данном случае, весь текст HTML-документа станет синим, в отличие от применения тэга <font>, которым выделяются лишь отдельные фрагменты. Выбирая цвета фона документа и текста, не забывайте о читаемости Вашей страницы: как только Вас начинает что-то смущать, раздражать, либо плохо восприниматься, попробуйте подобрать наиболее удачное сочетание цветов. Здесь главное чувство меры и эстетический вид страницы, о чем говорилось ранее. Продолжим знакомство с параметрами тэга. Как известно, во всяком HTML- документе применяются гиперссылки. Существуют несколько параметров, определяющих цвет ссылки. link – определяет цвет еще не просмотренной ссылки, alink – определяет цвет активной ссылки (ссылки, которая работает в данный момент), vlink – определяет цвет уже просмотренной ссылки. Например: <body link=red alink=yellow vlink=blue>. Здесь цвет не просмотренной ссылки - красный, активной – желтый, просмотренной – синий. По умолчанию браузеры выводят не посещенную ссылку - синим цветом, посещенную – фиолетовым. Обратимся теперь к параметрам, задающим границы полей HTML – документа. Таких параметров четыре: topmargin - устанавливает границу верхнего поля документа в пикселях, bottommargin - устанавливает границу нижнего поля документа в пикселях, leftmargin - устанавливает границу левого поля документа в пикселях, rightmargin - устанавливает границу правого поля документа в пикселях. Например: <bodytopmargin=0 bottommargin=0 leftmargin=30 rightmargin=30>. Здесь верхнее и нижнее поля отсутствуют (равны 0), а правое и левое поле по 30 пикселей. Теперь поговорим о фоновых изображениях. Наряду с заданием цвета фона, HTML – страницу можно замостить так называемыми "обоями" или фоновым изображением. Для этого используется параметр background тэга <body>. Параметр background указывает на URL – адрес изображения, которое используется в качестве фонового. В качестве изображения должна использоваться "картинка" сохраненная в формате .Gif или .Jpeg (.jpg).Удобно использовать небольшое изображение (например, 5X5 см.) в качестве фонового, т.к. в этом случае оно застилает всю страницу без видимых швов (если оно удачно подготовлено для этих целей). Самой удобной программой для подготовки таких "кубиков" (текстуры) служит Photoshop (на худой конец Paint).
