- •Техніка безпеки при роботі з пк
- •Практична робота № 1
- •Практична робота № 2
- •Хід роботи
- •Контрольні питання
- •Підпис викладача: __________________ практична робота № 3
- •Хід роботи
- •Контрольні питання
- •Практична робота № 4
- •Хід роботи
- •Контрольні питання
- •Підпис викладача: __________________ практична робота № 5
- •Хід роботи
- •Практична робота № 6 Тема: Використання рисунків, відео та звуку на html-сторінці
- •Хід роботи
- •Контрольні питання
- •Підпис викладача: __________________ практична робота № 7 Тема: Створення Web-документів, що містять таблиці.
- •Хід роботи
- •Контрольні питання
- •Підпис викладача: __________________
- •Практична робота № 8
- •Тема: Створення фреймів
- •Мета: навчитись створювати фрейми
- •Хід роботи
- •12. Html-код документу Frame.Html :
- •14. Html-код документу bottom.Html:
- •Контрольні питання
- •Практична робота № 9
- •Хід роботи
- •Контрольні питання
- •Підпис викладача: __________________ практична робота № 11
- •Хід роботи
- •Робота з текстовими полями першої сторінки
- •Робота з полями другої та останньої сторінок
- •Заміна рисунка та підпису до нього
- •Верстка
- •Збереження публікації за допомогою пакувальника
- •Структура буклету
- •Використання майстра створення інформаційних буклетів
- •Контрольні питання
- •Практична робота № 11
- •Хід роботи
- •Контрольні питання
- •Практична робота №12
- •Теоретичні відомості
- •Хід роботи
- •Контрольні питання
- •Практична робота № 13
- •Хід роботи
- •Практична робота № 14
- •Хід роботи
- •Контрольні питання
- •Результати виконання практичних робіт:
Контрольні питання
За допомогою яких тегів ми створюємо таблиці?_____________________________
____________________________________________________________________________________________________________________________________________
За допомогою яких тегів ми форматуємо таблиці?____________________________
__________________________________________________________________________________________________________________________________________________
_________________________________________________________________________
Які теги формують у таблиці рядки________________, клітинки-заголовки _______________ та звичайні клітинки_________________?
Який параметр використовують для обєднання комірок?______________________
______________________________________________________________________
Висновок:___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
Дата виконання: _________________ Оцінка: _________________
Підпис викладача: __________________
Практична робота № 8
Тема: Створення фреймів
Мета: навчитись створювати фрейми
Програмне забезпечення: Блокнот, Internet Explorer та ОС Windows.
Хід роботи
Скопіювати в теку HTML графічний файл l.jpg
В теці HTML створити текстовий документ з назвою Frame.html.
У файлі Frame.html визначимо чотири фрейми, з структурою показаною на рис. 1.
logo |
|
menu |
content |
bottom |
|
Рис. 1. Розміщення фреймів у вікні браузера
Ім’я першого фрейму logo, він займає всю ширину сторінки, та в ньому завантажений файл logo.html. Далі ідуть два центральні фрейми: menu, в ньому завантажений файл menu.html та content, в ньому завантажений файл content.html. Фрейм menu займає 25% у ширину, а фрейм content – всій простір, що залишився. Останній фрейм bottom займає нижню частину екрану, в ньому завантажений файл bottom.html. В файл Frame.html запишемо HTML-код для визначення фреймової структури:
<html>
<head>
<title>Створення фреймів</title>
</head>
<frameset rows="25%,50%,25%">
<frame src="logo.html">
<frameset cols="25%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
<frame src="bottom.html">
</frameset>
</html>
В теці HTML створити текстові документи з назвами logo.html, menu.html, content.html, bottom.html, та запишемо в них такий HTML-код:
HTML-код документу logo.html:
<html>
<head>
<title>logo</title>
</head>
<body >
<img src="1.jpg" height="110" align="left">
<h2 align="center">ТУРИСТИЧНА ФІРМА "АРС"</h2>
</body>
</html>
HTML-код документу menu.html:
<html>
<head>
<title>menu</title>
</head>
<body>
Новини<br><br>
Ціни<br><br>
Погода
</body>
</html>
HTML-код документу content.html:
<html>
<head>
<title>content</title>
</head>
<body>
<center>Зміст документу</center>
</body>
</html>
HTML-код документу bottom.html:
<html>
<head>
<title>bottom</title>
</head>
<body>
<center>Нижній колонтитул документу</center>
</body>
</html>
Зробимо так, щоб смуга прокрутки у фреймі logo була відсутня. Реалізуємо це за допомогою параметру scrolling тегу <frame>, значення якого в даному випадку буде дорівнювати "no". Корегуємо HTML-код файлу Frame.html :
Зробимо так, щоб рамки між фреймами були відсутні. Реалізуємо це за допомогою параметру frameborder тегу <frame>, значення якого в цьому випадку дорівнює 0. Переглянемо цей документ у вікні браузера
Змінимо значення параметру frameborder з 0 на 1, щоб визначити наявність межі між фреймами. А також визначимо зелений колір межі між фреймами – це робимо за допомогою параметру bordercolor тегу <frame>. Записуємо відповідний HTML-код:
Переглянемо документ Frame.html у браузері
Визначимо простір усередині кожного фрейму, тобто поля, в межах яких не може бути розміщена ніяка інформація. Реалізуємо це за допомогою параметрів marginheight та marginwidth, значення яких буде дорівнювати 1 пікселю.
Записуємо HTML-код та переглянемо документ у вікні браузера
Змінимо значення параметрів marginheight та marginwidth з 1 на 20 пікселів для фреймів logo та menu.Переглянемо новий документ.
Заборонимо користувачам змінювати розмір фреймів, що може порушити структуру спроектованих нами фреймів. Реалізуємо це за допомогою параметру noresize тегу <frame>, який не потребує ніяких значень.
Визначимо взаємодію між фреймами.
У файлі menu.html створимо гіперпосилання, перехід по яким буде завантажувати файл з іменем example.html у визначений фрейм. Для цього:
Створимо файл example.html в теці HTML та запишемо для нього HTML-код :
<html><head><title>example</title></head>
<body>
Текст документу
</body>
</html>
Задамо ім’я для фрейму, на який буде гіперпосилання – у нас це фрейм content. Скорегуємо HTML-код для файлу Frame.html - фрейму content дамо ім’я "А" :
Корегуємо HTML-код для файлу menu.html: додамо ще один пункт в меню (назвемо його "Повідомлення"), визначимо гіперпосилання на файл example.html :
Документ menu.html має чотири гіперпосилання на файл з іменем example.html, але з різним значенням параметру target. Перше гіперпосилання зі значенням target="A" буде завантажувати файл example.html у фрейм з іменем "А". Друге гіперпосилання зі значенням target="_blank" створить нове вікно без імені та завантажить туди необхідний документ. Третє гіперпосилання зі значенням target="_top" завантажить документ у повне вікно замість всій фреймової структури. Четверте гіперпосилання зі значенням target="_self" завантажить документ у фрейм menu замість документу із гіперпосиланнями. Переглянемо оновлений файл Frame.html у вікні браузера
Повторимо друге посилання - файл example.html відкриється в ще однму, новому вікні браузера. Реалізуємо третє посилання - нове вікно браузера не створюється, файл example.html відкривається в тому ж вікні де був фрейм. Повертаємось до фреймової структури за допомогою кнопки Back.