Файл: Уроки HTML.docx

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

Конечно, будет немного сложно показывать вам примеры в рассылке, так как большинство людей просматривает e-mail сообщения в режиме OffLine (отключен от сети). Поэтому вам будет полезно посещать архив рассылки расположенный на сайте Design Laboratory. Читателям рассылки в текстовом режиме вообще с этой темой не повезло...

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

С другой стороны, будьте благоразумны и не обременяйте свою домашнюю страницу слишком большим количеством изображений. Решив ввести сотню изображений, вы явно перегрузите свою страницу. Если ваша страница загромождена пиктограммами и изображениями, текст потеряется в этой неразберихе и посетители не поймут, куда же они попали. Кроме того, страница будет загружаться бесконечно долго, и все ваши усилия сойдут на "зачем я жду? пойду на другой сайт".

Где вы сможете найти графику, изображения и рисунки

Теперь, когда вы убедились, что вам следует ввести в веб-страницу несколько графических объектов, задается вопрос: где их взять? Сайт Design Laboratory расчитан для веб-строителей. На нем есть раздел Графика где вы сможете найти большую коллекцию различной графики.

Вы также можете взаимствовать графику с чужих веб-страниц. Для этого необходимо подвести курсор мыши на изображение, вызвать всплывающее меню (правой кнопкой) и найти Save Image As... [Сохранить рисунок как...]. Потренеруйтесь с этим загадочным квадратом справа. Правда сохранять-то нечего, поэтому вы просто увидите надпись Save as....

Создаем свое изображение

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

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

Выбирайте сканер с разрешением не меньше 300х300 точек на дюйм. Это означает, что при сканировании каждого квадратного дюйма сканер различает 90'000 точек. Кажется, что это много, но обычный факс имеет разрешение 200х200 ppi (pixels per inch - точек на дюйм) - и вы знаете, какими расплывчатыми иногда бывают сообщения. Часто сканеры поставляются с программным обеспечением, которое существенным образом повышает разрешение.

Сканеры с высоким разрешением обычно стоят довольно дорого. Они вряд ли необходимы, если вы просто сканируете изображения для веб-страницы. Для непрофессионального использования обычно достаточно разрешения 300х300 или 600х600 ppi.

Сейчас часто можно видеть объявления в магазинах, где продают компютерную технику подобно: "Сканируем". Многие делают на этом большие деньги, расчитывая на неопытных пользователей. В среднем, один проход сканера стоит не более 5 рр. Лучше не поддаваться на "качественное сканирование" за которое шустрые продавци берут по 10-15 рублей.

Как поместить изображение на страницу

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

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

Использование файлов нужных типов

Изображения можно созранять в нескольких форматах. У каждого их них есть свои преимущества и недостатки. Не секрет, что во всемирной паутине преобладают 2 распространенных формата - GIF и JPeG. Тип файлов GIF (Graphical Interchange Format - Графический Формат Обмена) был впервые применен много лет назад CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Он стал первым типом файлов, поддерживаемых WWW.

Недавно был разработан формат JPeG (Joint Photographic Experts Group - Объединенная Группа Экспертов Фотографии). Во многих случаях он оказался существенно эффективнее GIF, особенно для больших изображений. Файлы в формате JPeG занимают меньше места и, соответственно, быстрее загружаются. Но бывает так, что GIF занимает меньше места, чем JPeG, но это лишь в тех случаях, когда изображение маленького размера (не в байтах, а в точках).

Как поместить изображение на страницу

Имеется страница, на которой имеется пока только текст. Например эта:

Стоит нам добавить одну строчку и страничка превращается в следующее:

Посмотрите, что мы добавили:

Изображения помещаются на странице крайне просто. Вам нужно только знать, как применять тег <img>. IMG - сокращение от "image" ("изображение"). Надо ввести тег <img> и ключевое слово SRC="..." для указания, какую картинку закрузить. И все! Изображения можно помещать в любом месте веб-страницы, в заголовки, таблицы, списки или в текст, только проверьте, чтобы тег <img> оказался между тегами <body> и </body>. В данной странице о бабочках я собираюсь ввести изображение бабочки, вверху страницы, как раз под заголовком <h1></h1>.

Мы вставляли здесь картинку бабочки в формате GIF, под названием dc72.gif, которая находится в папке http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/.

Тег <img> сообщает браузеру, что необходимо вывести на экран изображение с именем исходного файла dc72.gif. Вводя этот тег, вы подразумеваете, что файл dc72.gif находится в папке http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/. Если эта картинка находится в той же папке, что и HTML-файл в котором вы собираетесь вставить тег <img>, то название папки можно не вводить, тогда код будет выглядеть следующим образом: <img src="dc72.gif">.

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

Эта пиктограмма показывается браузером в случаях, если:

• Имя файла, содержащего изображение, задано неверно и не указывает ну существующий файл (возможно, вы по ошибке набрали не dc72.gif, а dcc72.gif).

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

• Бывает, что некоторые сервера, на которых вы решите хранить свою страницу (например narod.ru) базированы на UNIX'е. Ничего страшного если не понятно. Суть в том, что важно как вы напишите имя файла. Например если вы напишите <img src="DC72.GIF>, картинка не покажется из-за регистра. Попробуйте ввести <img src="dc72.gif"> и ошибка будет устранена.

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