Мета: Уміти створювати прості 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
