Задание размеров изображения html-документа

Задание размеров графического изображения явно (с помощью атрибутов WIDTH, HEIGHT) позволяет браузеру загружать картинку с большей скоростью, т.к. он не тратит время на дополнительные вычисления.

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

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

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

Если значение новых размеров задавать в пикселях, надо использовать оба атрибута WIDTH, HEIGHT. Чтобы избежать искажений, необходимо соблюдать пропорцию. Если же значения вводятся в процентах относительно размеров окна браузера, достаточно задать любое значение (ширину или высоту), - остальное браузер пересчитает автоматически.

Аналогичным способом можно уменьшать изображения. Однако здесь существует немаловажный недостаток. Время, необходимое для загрузки картинки остается то же. Т.е. картинка грузится своего "настоящего" размера, просто она "вжимается" в те рамки, которые вы явно указываете атрибутами WIDTH, HEIGHT. Таким образом, чтобы уменьшить размеры изображения, надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. После завершения редактирования рекомендую сохранить внесенные изменения в новом файле. Таким образом, вы всегда сможете воспользоваться исходным изображением.

Задание 2.10

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Задание размеров изображения html-документа - student2.ru

Сохраните документ с именем пример2_10.htm, откройте в браузере.

Уменьшение разрешения изображения позволяет сократить объем графического файла, а значит и время его загрузки браузером. Однако, следует учитывать тот факт, что уменьшение разрешения ведет к потере качества изображения. Большинство мониторов отображают графику с разрешением 72 пикселя на дюйм. Такое разрешение вполне приемлемо, если пользователи не собираются получать с изображения печатные копии.

Чтобы уменьшить разрешение изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

Атрибут LOWSRC позволяет воспроизвести в окне браузера изображение низкого разрешения в течение времени пересылки на компьютер пользователя исходного высококачественного изображения.

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

<IMG SRC="высокое разрешение.jpg"

LOWSRC="низкое разрешение.jpg"

WIDTH="500" HEIGHT="400">

Реализуйте данную процедуру на примере любого изображения из текущей папки.

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

1. Как создать локальную гиперссылку?

2. Как вставить в документ изображение?

3. Как создать бегущую строку?

4. Как изменить разрешение вставленного изображения?

Лабораторная работа №3
Работа с таблицами.

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

Задачи: