KNOWLEDGE HYPERMARKET


Лабораторна робота на тему: Використання рисунків, відео та звуку на HTML-сторінці

Гіпермаркет Знань>>Інформатика>>Інформатика 8 клас>> Інформатика: Практична робота № 17: „Конструювання сайту за допомогою шаблонів на спеціальних серверах.”.

Практична робота до предмету Інформатика 8 клас.

Тема «Використання рисунків, відео та звуку на HTML-сторінці».



Розгляд теми: Практична робота № 17: „Конструювання сайту за допомогою шаблонів на спеціальних серверах.”



                                                    Лабораторна робота


                              Використання рисунків, відео та звуку на HTML-сторінці


Мета роботи: освоїти методику використання рисунків на HTML-сторінці.


Хід роботи:
1.    Копіюватив теку HTML видані викладачем графічні файли 1.jpg та 1a.gif.

2.    В теці HTML створити текстовий документ з назвою picture.html, відкрити його за допомогою браузеру та перейти до редагування HTML-коду.

3.    Створити заготовку для HTML-коду Web-сторінки:


<html>
     <head>
             <title>Рисунки</title>
                  <META http-equiv=Content-Type content="text/html;
              charset=windows-1251">
          </head>
       <body>
    </body>
</html>


4.    Додати HTML-код для відображення на сторінці чотирьох однакових рисунків з різними розмірами:


<body>
                <h2 align=center>Зміна розмірів рисунків</h2>
                <img src="1.jpg">
                <img src="1.jpg" width="260" height="220">
                <img src="1.jpg" width="130" height="110">
                <img src="1.jpg" width="300" height="250">
     </body>
</html>


5.    Перегляд сторінки в браузері повинен відповідати рис.1.

4.06-11.jpg 
Рис. 1. Рисунки з різними розмірами

6.    Розглянути можливість використання границь навколо рисунків. Для цього додамо наступний HTML-код:
...
<h2 align=center>Границі рисунків</h2>
<img src="1.jpg" width="130" height="110" >
<img src="1.jpg" width="130" height="110" border="1">
<img src="1.jpg" width="130" height="110" border="3">
</body>
    Відповідне відображення у вікні браузера показане на рис. 2.


4.06-12.jpg 
Рис. 2.  Використання границь рисунків


7.    Розглянути можливість визначення альтернативного тексту в тегах рисунків. Для цього модифікувати останній фрагмент HTML-коду:
...
<img src="1.jpg" width="130" height="110" alt="Рисунок. Границь нема">
<img src="1.jpg" width="130" height="110" border="1" alt="Рисунок. Товщина границь 1 піксель">
<img src="1.jpg" width="130" height="110" border="3" alt="Рисунок. Товщина границь 3 пікселі">
</body>
    Відключити показ рисунків у вікні браузеру та провести оновлення нашої сторінки (рис.3).


4.06-13.jpg 
Рис. 3. Відображення альтернативного тексту

8.    Відновити показ рисунків в браузері та провести оновлення нашої HTML-сторінки.

9.    Розглянути можливості вертикального вирівнювання рисунків відносно тексту.

 Додати HTML-код для визначення тексту та рисунків, вирівняних відносно верхньої межі:
...
<h2 align=center>Вирівнювання рисунків відносно тексту </h2>
<h3 align=center>Вирівнювання рисунків відносно верхнього межі рядка </h3>
<p>
<img src="1.jpg" width="130" height="110" border="3" alt="Вага">
<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="top">
По верхній  межі найвищого елементу рядка
</p>
<p>
<img src="1.jpg" width="130" height="110" border="3" alt="Вага"> 
<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="texttop">
По верхній межі найвищого текстового елементу рядка
</p>
</body>
Відповідне вікно браузера показане на рис. 4.


4.06-14.jpg 
Рис. 4. Вирівнювання рисунків відносно верхньої межі

 Додати HTML-код для визначення тексту та рисунків, вирівняних відносно середини рядка:
...
<h3> Вирівнювання рисунків відносно середини рядка </h3>
<p>
<img src="1.jpg" width="130" height="110" border="3" alt="Вага"> 
<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="middle">
По базовій лінії рядка
</p>
<p>
<img src="1.jpg" width="130" height="110" border="3" alt="Вага"> 
<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="absmiddle">
По середині рядка
</p>
</body>
Відповідне вікно браузера показане на рис. 5.


4.06-15.jpg 
Рис. 5. Вирівнювання рисунків відносно середини рядка

 Додати HTML-код для визначення тексту та рисунків, вирівняних відносно нижньої межі:
...
<h3 align=center> Вирівнювання рисунків відносно нижнього краю рядка </h3>
<p>
<img src="1.jpg" width="130" height="110" border="3" alt="Вага"> 
<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="bottom">
Вирівнювання рисунків по базовій лінії рядка
</p>
<p>
<img src="1.jpg" width="130" height="110" border="3" alt="Вага"> 
<img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="absbottom">
Вирівнювання рисунків по нижній межі рядка
</p>
</body>
Відповідне вікно браузера показане на рис. 6.


4.06-16.jpg 
Рис. 6. Вирівнювання рисунків відносно нижньої межі рядка

10.     Розглянути можливість визначення "плаваючих" рисунків, тобто рисунків, вирівняних по лівому або правому краю рядка. Для цього додати HTML-код:
...
<h3 align=center>"Плаваючі" рисунки</h3>
<p>
<img src="1.jpg" width="130" height="110" border="3" alt="Вага" align="left">
По лівому краю рядка
</p>
<br><br><br><br><br>
<p>
<img src="1.jpg" width="130" height="110" border="3" alt="Вага" align="right">
По правому краю рядка
</p>
</body>
Відповідне вікно браузера показане на рис. 7.

4.06-17.jpg 
Рис. 7. "Плаваючі" рисунки

11.     Розглянути можливості відокремлення тексту від рисунків за рахунок визначення горизонтальних та вертикальних відступів. Для цього додати HTML-код:
...
<h2 align="center">Відокремлення рисунків від тексту</h2>
<img src="1.jpg" width="130" height="110" border="3" hspace="20" vspace="20" align="top" alt="Вага">
Відстань до тексту 20 пікселів
<br>
<img src="1.jpg" width="130" height="110" border="3" hspace="1" vspace="1" align="top" alt="Вага">
Відстань до тексту 1 піксель
</body>
Відповідне вікно браузера показане на рис. 8.

4.06-18.jpg 
Рис. 8. Відокремлення тексту від рисунків за рахунок відступів

12.     Додамо HTML-код для визначення альтернативного зображення:
...
<h2>Використання мініатюр</h2>
<img src="1.jpg" lowsrc="1a.gif" width="130" height="110" border="3" alt="Вага" >
</body>
13.     Розглянути можливість використаня на сайтах відео-зображень. Для цього необхідно в папку HTML вставити файл з відео, наприклад CLOCK.AVI та додати в файл picture.html HTML-код:
...
<h2>Використання відеозображень</h2>
<img width="100" height="100" border="2" dynsrc="CLOCK.AVI">
</body>
    Моментальний знімок перегляду відео з файлу показано на рис. 9.


4.06-19.jpg 
Рис. 9. Перегляд відео у вікні браузера

14.     Модифікувати HTML-код для прокрутки відео-ролика CLOCK.AVI  два рази:
<img width="100" height="100" border="2" dynsrc="CLOCK.AVI" loop="2">
Провести оновлення вікна браузера.
15.     Модифікувати HTML-код для прокрутки відео ролика CLOCK.AVI  два рази, при цьому показ починається після наведення миші на рисунок:
<img width="100" height="100" border="2" dynsrc="CLOCK.AVI" loop="2" start="mouseover">
Провести оновлення вікна браузера.
16.     Модифікувати HTML-код для того, щоб  відео-ролик CLOCK.AVI прокручувався постійно:
<img width="100" height="100" border="2" dynsrc="CLOCK.AVI" loop="-1">
Провести оновлення вікна браузера.
17.     Розглянути можливість використаня на сайтах звуку. Для цього необхідно в папку HTML вставити звуковий файл, наприклад START.WAV та додати в файл picture.html HTML-код:
...
<embed src="START.WAV" hidden="true" autostart="true" loop="True">
</body>
Провести оновлення вікна браузера.

                                          Завдання для самостійної роботи


1. Оформити у вигляді HTML - документу фотоальбом з темитики, вказаної викладачем.
2. Оформити звіт.


                                             Питання для самоперевірки


1.    Як визначити розмір вертикального відступу від тексту до границі рисунку?
2.    Як визначити розмір горизонтального відступу від тексту до границі рисунку?
3.    В чому полягає специфіка плаваючого вирівнювання рисунків?
4.    Навіщо потрібно записувати альтернативний текст при визначенні рисунків?
5.    Навіщо потрібні мініатюри при визначенні рисунків?
6.    Як вирівняти рисунок по верхньому краю рядка?
7.    В чому полягає різниця між вирівнюванням рисунку bottom та absbottom?
8.    В чому полягає різниця між вирівнюванням рисунку absmiddle та middle?
9.    В чому полягає різниця між вирівнюванням рисунку texttop та top?
10.     Як визначити товщину границі рисунка?


                                                      ЛІТЕРАТУРА

1.    Антоненко В.М., Терейковський І.А., Терейковська Л.О. Основи Web-дизайну. Конспект лекцій. Навч. посібник. К.: МГІ КСУ, 2005.  116 с.
2.    Антоненко В. М., Рогушина Ю.В. Сучасні інформаційні системи і технології. Навчальний посібник. - К.: КСУ МГІ, 2005. – 131 с.
3.    Вандер Вер Э. JavaScript для чайников. К.: Издательский дом «Вильямс», 2001. – 304 с.
4.    Гарнаев А., Гарнаев С. Web программирование на Java и JavaScript.  - Санкт-Петербург:    БХВ-Петербург, 2002.– 1040 с.
5.    Кастаньето Д. Профессиональное PHP программирование. СПб.: Символ-Плюс, 2001. - 912 с.
6.    Колбери Р. Освой самостоятельно CGI за 24 часа. — М.: Издательский дом "Вильямс", 2001.— 368 c.
7.    Костарев А. РНР в Web-дизайне. С.-Петербург.: ВНV, 2002. – 592 стр.
8.    Матросов А., Сергеев А., Чаунин М. HTML 4.0. – Санкт-Петербург: БХВ-Петербург, 1999. - 672 с.
9.    Паттерсон Л. и др. Использование HTML 4.0. -  К.-М.-СПб.: Издат. Дом “Вильямс”. – 1998 – 384c.
10.    Терейковський І.А. Підвищення ефективності функціонування корпоративних Web – сайтів. К.: Вісник КНУТД №4 2004 с.41-46.
11.     Холл М., Браун Л. Программирование для Web. К.: Издательский дом «Вильямс», 2002. – 1264 с.
12.     http:/www.postroika.ru
13.     http:/www.siteforum.ru



Надіслав викладач інформатики Манжула Анна Михайлівна.


Планування з інформатики, матеріали з інформатики 8 класу скачати, підручники онлайн

Предмети > Інформатика > Інформатика 8 клас > Практична робота № 17: „Конструювання сайту за допомогою шаблонів на спеціальних серверах.” > Практична робота № 17: „Конструювання сайту за допомогою шаблонів на спеціальних серверах”. Практикуми, лабораторні, кейси