Тема: Створення Web-документів, що містять теги форматування символів

Мета: Уміти створювати прості web-сторінки та надавати їм певного вигляду, використовуючи для цього основні команди мови HTML.

Програмне забезпечення: Блокнот та ОС Windows.

 

 

ХІД РОБОТИ

1. Відкрийте редактор Блокнот. ________________________________________

2. Створіть за допомогою текстового редактора html-файл з особистими данними про себе. Текст повинен мати заголовок, складатися з декількох абзаців. Задайте назву вікна web -сторінки.

3. Збережіть його під назвою filel1.html у власній папці.

4. Відкрийте файл file1.html у броузері Internet Explorer. Для цього відкрийте свою робочу папку і двічі клацніть мишею на назві файлу.

5. Відредагуйте сторінку. Для того щоб відредагувати файл, треба спочатку відкрити програму Блокнот, а потім файл і кожного разу після редагування треба зберігати файл. Задайте колір фона та текста. Змінюйте відповідні параметри тега BODY - BGCOLOR і TEXT.

6. Виконайте форматування тексту у файлі filel.htm. Застосуйте у тексті різні накреслення літер (жирний, курсив, підкреслений). Заголовок тексту відцентруйте та відокремти від іншого тексту порожнім рядком. Кожний абзац розташуйте з нового рядка. У кінці всього текста намалюйте лінію.

7. Запишіть html-код файлу filel1.html

_____

_______________

8. Створіть ще один html-файл з розповіддю про себе. Виконайте форматування тексту у файлі file2.htm:

· Біографічні дані (заголовок 2 рівня, колір – чорний)

· Дата народження: (розмір – 5, колір – синій, накреслення – напівжирний, вирівнювання – зліва)

· Місце народження: (розмір – 4, колір – жовтий, накреслення – курсив, вирівнювання – зліва)

· Склад сім’ї: (маркерований список, розмір – 4, колір – зелений, накреслення – підкреслений, вирівнювання –зліва)

· Технікум: (розмір – 3, колір – золотий, накреслення – закреслений, вирівнювання – зліва), група (розмір – 3, колір – золотий, накреслення – напівжирний, курсив, вирівнювання – зліва)

· Улюблені заняття: (нумерований список, заголовок 3 рівня, колір – рожевий, вирівнювання – справа)

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

10. Запишіть html-код файлу filel1.html

__________________________________

____________________________________________________________ КОНТРОЛЬНІ ПИТАННЯ

1. Що таке web-документ?_________________________________________________

____________________

2. Для чого призначена програма-броузер?___________________________________

____________________

3. Для чого призначена мова HTML?________________________________________

____________________

4. Що таке тег і які є теги?_______________________________________________

________________________

5. Які параметри може мати тег BODY?_____________________________________

______________________________

6. Який тег позначає початок нового абзацу?________________________________

7. Які теги позначають товстий, курсивний і підкреслений шрифти?________________

________________________

8. Які теги призначені для вирівнювання елементів на сторінці?_______________

________

9. Яке призначення тега FONT, параметри тега FONT?_____________________________

__________________________________________

10. Як створити маркерований список?____________________________________________

______________________________

11. Як створити нумерований список?_____________________________________________

______________________________

12. Як створити список означень?________________________________________________

____________________________

Висновок: ______________

________________________

Дата виконання: _________________ Оцінка: _________________

Підпис викладача: __________________

ПРАКТИЧНА РОБОТА № 6

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

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

Програмне забезпечення: Блокнот, Internet Explorer та ОС Windows.

Хід роботи

1. Копіюватив в свою папку графічний файл і перейменувати у 1.jpg.

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

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

<html>

<head>

<title>Рисунки</title>

</head>

<body>

</body>

</html>

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

<body>

<h2 align=center>Зміна розмірів рисунків</h2>

<img src="1.jpg">

<img src="1.jpg" width="260" height="220">

____

____

</body>

</html>

5. Розглянути можливість використання границь навколо рисунків. Для цього додамо наступний HTML-код:

<img src="1.jpg" width="130" height="110" _______________________________>

6. Розглянути можливість визначення альтернативного тексту в тегах рисунків. Для цього модифікувати останній фрагмент HTML-коду:

<img src="1.jpg" width="130" height="110" border="1" ________________________>

7. Відключити показ рисунків у вікні браузеру та провести оновлення нашої сторінки, для цього___________________________________________________________

________________________

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

9. Розглянути можливість використаня на сайтах відеозображень. Для цього необхідно в папку HTML вставити файл з відео, наприклад CLOCK.AVI та додати в файл picture.html HTML-код:

...

<h2>Використання відеозображень</h2>

<img width="100" height="100" border="2" dynsrc="CLOCK.AVI">

</body>

Модифікувати HTML-код для прокрутки відео-ролика CLOCK.AVI два рази:

_______

Провести оновлення вікна браузера.

10. Модифікувати HTML-код для прокрутки відео ролика CLOCK.AVI два рази, при цьому показ починається після наведення миші на рисунок:

__________________

Провести оновлення вікна браузера.

11. Модифікувати HTML-код для того, щоб відео-ролик CLOCK.AVI прокручувався постійно:

_________

Провести оновлення вікна браузера.

12. Розглянути можливість використаня на сайтах звуку. Для цього необхідно в папку HTML вставити звуковий файл, наприклад START.WAV та додати в файл picture.html HTML-код:

________________________

КОНТРОЛЬНІ ПИТАННЯ

1. Як встановити розміри рисунка?________________________________________

_______

2. Як визначити розмір горизонтального відступу від тексту до границі рисунку?

_____

3. Навіщо потрібно записувати альтернативний текст при визначенні рисунків?

________________________

4. Як встановити рамку рисунка та її колір?__________________________________

_____

5. Як вставити відео?____________________________________________________

_________

6. Як вставити звук?_______________________________________________________

_____

 

 

Висновок: ___________________________________________________________________

Дата виконання: _________________ Оцінка: _________________

Підпис викладача: __________________
ПРАКТИЧНА РОБОТА № 7