Learning Discussion
MODULE
All modules
Розміщення графіки на Web-сторінці та побудова гіпертекстових зв’язків

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

 

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

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

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

Тег <IMG> дозволяє вставити зображення на Web-сторінку. Воно з’явиться в...
Delete Drag
Delete Drag
Delete Drag

Тег <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"> Задає додавання лівого і правого порожніх полів
Тег <IMG> має чимало атрибутів, описаних у таблиці 2. Ці...
Delete Drag

Фонове зображення – це графічний файл з невеликим малюнком, який багаторазово повторюється, заповнюючи все вікно браузера незалежно від його розмірів.
Графіка, використовувана в якості фонової, задається в тезі <BODY>.

 

  1. Внесіть зміни у файл , попередньо підготувавши і зберігши в робочій папці графічний файл фонового малюнка (FON.JPG).
Фонове зображення – це графічний файл з невеликим малюнком, який багаторазово...
Delete Drag
Delete Drag
Delete Drag

Рисунок, який використовувався в якості фонового, має вигляд



  1. Експериментуйте з фоновим малюнком Web-сторінки і виберіть оптимальний з вашої точки зору.
Рисунок, який використовувався в якості фонового, має вигляд Експериментуйте з...
Delete Drag
Побудова гіпертекстових зв’язків.
Частина 2
Побудова гіпертекстових зв’язків.
Delete Drag

Запустіть програму Блокнот і скопіюйте текст наступної Web-сторінки. 

<HTML>

 <HEAD>

  <TITLE>Розклад занять 5 класів</TITLE>

 </HEAD>

 <BODY BGCOLOR="FFFFFF">

  <P ALIGN="CENTER">

  <FONT COLOR="RED" SIZE="6" FACE="ARIAL">

  <B>5 клас</B></FONT><BR></P>

  <FONT COLOR="BLUE" SIZE="4" FACE="COURIER">

  <B>Понеділок</B></FONT><BR>

   <TABLE BORDER="1" WIDTH=100% BGCOLOR="#99CCCC">

    <TR BGCOLOR="#CCCCFF" ALIGN="CENTER">

    <TD>Урок</TD> <TD>5 "А"</TD> <TD>5 "Б"</TD> <TD>5 "В"</TD>

    </TR>

    <TD>1</TD> <TD>Українська мова</TD>

    <TD>Українська література</TD> <TD>Історія України</TD>

    </TR>

    <TR>

    <TD>2</TD> <TD>Математика</TD>

    <TD>Інформатика</TD> <TD>Англійська мова</TD>

    </TR>

    <TR>

    <TD>3</TD> <TD>Історія України</TD>

    <TD>Математика</TD> <TD>Інформатика</TD>

    </TR>

   </TABLE>

 </BODY>

 

</HTML>

 

  1. Збережіть файл в особистій робочій папці під ім’ям 5.HTML
  2. Для перегляду створеної Web-сторінки, подвійним клацанням лівої клавіші миші завантажте браузер.

На екрані ви побачите те, що зображено на рисунку

Запустіть програму Блокнот і скопіюйте текст наступної Web-сторінки.  <HTML>  <HEAD>   <TITLE>Розклад занять...
Delete Drag

Найважливішим засобом мови HTML є можливість включення в документ посилань на інші документи.
Можливі посилання:

 

  • на віддалений HTML-файл,
  • на будь-яке місце в поточному HTML-документі,
  • на будь-який файл, який не є HTML-документом.

В якості посилання можна використовувати будь-який текст або графіку.

Посилання в межах одного документа

Такі посилання вимагають двох частин: мітки і самого посилання. Мітка визначає точку, на яку відбувається перехід за посиланням. Посилання використовує ім’я мітки. Посилання виділяють кольором або підкресленням залежно від того, як налаштований браузер. Для зміни кольору посилання використовуються атрибути LINK= і VLINK= тега <BODY>.

Опис посилання

<A HREF="#ПН">Понеділок</A>

Перед ім’ям мітки (ПН), що вказує, куди треба перейти за посиланням, ставиться символ #. Між символами “>” і “<" розташовується текст ("Понеділок"), на якому повинено бути проведено клацання для переходу за посиланням.

Визначимо мітку

<A NAME="ПН">Понеділок</A>

    1. Доповніть файл 5.HTML описом таблиці, яка містить назви днів тижня, помістивши його в початок Web-сторінки.

 

...
<TABLE WIDTH=100%>
  <TR>
   <TD>Понеділок</TD>
   <TD>Вівторок</TD>
   <TD>Середа</TD>
   <TD>Четвер</TD>
   <TD>П'ятниця</TD>
  </TR>
</TABLE>
<BR>
...

 

    1. Вставте в файл 5.HTML мітку, яка вказує на понеділок.

 

...
<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B>
<A NAME="ПН">Понеділок</A></B></FONT><BR>
...

 

    1. Вставте в таблицю з назвами днів тижня посилання для обраної мітки:

 

...
<TABLE WIDTH=100%>
<TR>
<TD><A HREF="#ПН">Понеділок</A></TD>
<TD>Вівторок</TD>
<TD>Середа</TD>
...

 

  1. Створіть таблиці розкладів для інших днів тижня.
  2. Збережіть файл 5.HTML в особистій робочій папці.
  3. Перегляньте отриману Web-сторінку.

На екрані ви побачите те, що зображено на рисунку

Найважливішим засобом мови HTML є можливість включення в документ посилань...
Delete Drag
Delete Drag

Посилання дозволяють клацанням на виділеному слові або фразі перейти до іншого файлу.

 

Опишемо посилання:

<A HREF="5.HTML">5 клас</A>

Після імені файлу (5.HTML) між символами «>» і «<» розташовується текст («5 клас»), на якому повинено бути проведення клацання для переходу до цього файлу.

    1. Внесіть зміни у файл який було створено на початку.HTML
<HTML>
 <HEAD>
  <TITLE>Учбовий файл HTML</TITLE>
 </HEAD>
 <BODY BGCOLOR="#FFFFFF" 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" ALIGN="TOP">
  </P>
  <CENTER>
  <TABLE WIDTH=60%>
   <TR><TD><A HREF="5.HTML">5 клас</A></TD>
   <TD>6 клас</TD> </TR>
   <TR><TD>7 клас</TD>
   <TD>8 клас</TD> </TR>
   <TR><TD>9 клас</TD>
   <TD>10 клас</TD> </TR>
   <TR><TD>11 клас</TD> </TR>
  </TABLE>
  </CENTER>
 </BODY>
</HTML>

 

  1. Збережіть файл під назвою RASP.HTML
  2. Перегляньте отриману Web-сторінку.

На екрані ви побачите те, що зображено на рисунку 

Посилання дозволяють клацанням на виділеному слові або фразі перейти до...
Delete Drag
Delete Drag
    1. Внесіть зміни у файл 5.HTML так, щоб в кінці сторінки було посилання на головний сторінку Розклад занять 5 класів (RASP.HTML).
      В якості посилання використовуйте графічний файл (HOME.JPG) наступним чином:

 

...
</TABLE><BR>
<CENTER>
<A HREF="RASP.HTML"><IMG SRC="HOME.jpg" BORDER="0"></A>
</CENTER>
...

 

  1. Збережіть файл 5.HTML
  2. Перегляньте отриману Web-сторінку.

На екрані ви побачите те, що зображено на рисунку

Внесіть зміни у файл 5.HTML так, щоб в кінці сторінки...
Delete Drag
Delete Drag
Next: Елементи у HTML 5.