№10. Розміщення графіки на Web-сторінці

Тег <IMG> дозволяє вставити зображення на Web-сторінку. Воно з’явиться в тому місці документа, де знаходиться цей тег. Тег <IMG> є поодиноким.

Необхідно пам’ятати, що графічні файли повинні знаходитися в тій же папці, що й файл HTML, що описує сторінку. Графіка в Web, як правило, поширюється в трьох форматах: GIF, JPG, PNG.

Для виконання наступного завдання помістіть файл з ім’ям CLOCK.PNG (або іншим ім’ям) в робочу папку.

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

  1. Внесіть зміни у файл RASP.HTML
<HTML>
 <HEAD>
  <TITLE>Учбовий файл HTML</TITLE>
 </HEAD>
 <BODY BGCOLOR="#FFFFCC" TEXT="#330066">
  <P ALIGN="CENTER">
  <FONT COLOR="#008080" SIZE="7">
  <B>Розклад</B></FONT><BR>
  <FONT SIZE="6"><I> занять на вівторок</I></FONT> <BR><BR>
  <IMG SRC="CLOCK.png">
  </P>
 </BODY>
</HTML>
  1. Перегляньте зміни вашої Web-сторінки в браузері.

На екрані ви побачите те, що зображено на малюнку 5.


Рисунок 5

Тег <IMG> має чимало атрибутів, описаних у таблиці 2. Ці атрибути можна задавати додатково і розташовуватися вони можуть в будь-якому місці тега після коду IMG.

Таблиця 2

Атрибути зображення

Атрибут Формат Опис
ALT <IMG SRC="CLOCK.png" ALT="Картинка"> Задає текст, який замінює зображення в тому випадку, якщо браузер не сприймає зображення
BORDER <IMG SRC="CLOCK.png" BORDER="3"> Задає товщину рамки навколо зображення. Вимірюється в пікселях
ALIGN <IMG SRC="CLOCK.png" ALIGN="TOP"> Задає вирівнювання зображення відносно тексту:

  • відносно тексту вирівняна верхня частина зображення – “TOP“,
  • відносно тексту вирівняна нижня частина зображення – “BOTTOM“,
  • відносно тексту вирівняна середня частина зображення – “MIDDLE“.
    		•
    HEIGHT <IMG SRC="CLOCK.png" HEIGHT="111"> Задає вертикальний розмір зображення всередині вікна браузера
    WIDTH <IMG SRC="CLOCK.png" WIDTH="210"> Задає горизонтальний розмір зображення всередині вікна браузера
    VSPACE <IMG SRC="CLOCK.png" VSPACE="8"> Задає додавання верхнього і нижнього порожніх полів
    HSPACE <IMG SRC="CLOCK.png" HSPACE="8"> Задає додавання лівого і правого порожніх полів

    НазадЗавдання 9 ЗмістПочаток ДаліЗавдання 11

    Переглядів: 16 278

    Залишити відповідь

    Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

    ➤
    %d блогерам подобається це: