Выполнить практическую работу кибернетика 2 курм

Пректична робота № 4

Тема “HTML. Таблиці стилів та елементи форми”.

Мета. Вміти створювати сторінки з кнопками, списками, полями введення тощо, оформляти сторінки, використовуятаблиці стилів.

Послідовність виконання роботи

1. Скористайтеся існуючим сайтом . Додайте до нього ще одну сторінку Анкета.

2. Створіть сторінку Анкета.htm. Ведений текст на сторінці не форматуйте, тільки зробіть заголовок №1 та курсив де потрібно. 

3. Для введення Імені додайте Поле введення  з текстом-підказкою у рядку. 

4. Додайте Поле для введення особистого поролю , який буде складатися з 5 символів.

5. Розташуйте Список перемикачів з 2 елементів для опису статі.

6. Для ознаки діяльності створіть Список варіантів з 5 елементів, розташованих по різному. З обраним за умовчанням елементом Студент..

7. Створіть Відкриваючий список з 5 елементів (наприклад, науково-познавальна, фантастика, фентезі, пртгоди, історічні), 3 елемента з яких є видимими. Останній елемент  (історічні) оберіть за умовчанням.  Передбачтимноговаріантний вибір.

8. Розташуйте Текстове поле з 5 рядків та 40 символів вздовжки, з вспливаючою підказкою.

9. У кінці сторінки додайте дві кнопки. Першу Кнопку  відміни з підписом Отмена, другу Кнопку Подачи з підписом Готово. 

10. Додайте гіперпосилання на якусь адресу.

11. Відформатуйте цю сторінку, застосувавши внутрішню таблицю стилів, яка зробить курсив на всієї сторінки – бузкового кольору, заголовки №1 зробить шрифтом Arial, розміром 12pt, червоного кольору.

12. Додайте вбудований стиль у тег курсива для визначення статі, як напівжирний.

13. Для всього сайту зробіть зовнішню таблицю стилів з іменем mystyle.css, яка для всього кода встановить колір тла – сірий, шрифти обиратиме Times New Roman або Serif, кольор символів – бордовий, відступи текста верхнє та нижнє було по 20, ліве та праве – по 10, також передбачити, щоб колір гіперпосилання до використання та після був відповідно червоним та зеленим.

Практична робота № 3

Тема “HTML.Створення сайтів”.

Послідовність виконання роботи

1. Створіть сайт про себе. Складіть основний файл, який запускатиме сайт та розподіляти його на фрейми. 

Сайт поділить на два вертикальних фрейма, лівий – вузший та правий. Лівий фрейм матиме зміст сайту у вигляді гіперпосилань для навігації по сайту, правий – як початкова сторінка та для перегляду сторінок сайту. 

2. Збережіть основний файл під назвою frame1.html.

3. Складіть файл для опису лівого фрейму. 

Він повинен містити: заголовок, наприклад, Сайт Прізвище І.П. та 4 гіперпосилання на файли, які мають містити інформацію про вас особисто, вашу родину, друзів, місце навчання, ваші захоплення, успіхі у навчанні, адресу тощо(можно скористатися файлами, які були створені у лабораторних роботах №1,2 ). 

Забезпечте відображення сторінок у правому фреймі.

4. Збережіть файл під назвою leftframe.html.  

5. Складіть файл для опису правого фрейму. Він має вигляд початковою сторінки сайту, наприклад, слідуючого змісту: Запрошуємо на сайт Прізвище І.П. 

6. Збережіть його під назвою rightframe.html.

7. Розташуйте інформацію у фреймах як найкраще, відформатуйте тексти, задайте необхідні   параметри.

Задайте фон фреймам. Відкрийте почергово файли leftframe.html  та rightframe.html  . Наприклад, жовтий фон у лівому фреймі і зелений — у правому.

Заберіть межу між фреймами. 

Задайте смуги прокручування  лише для правого фрейму. 

8. Скопіюйте основний файл під назвою frame2.html.

9. Створіть початкову сторінку більш цікавою. Виконайтевідповідні зміни у файлі.

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

У нижньому фреймі організуйте перегляд сторінок. 

10. Збережіть зміни у файлі frame2.html.

11. Удоскональте сайт, щоб він виглядав як найліпше. Перегляньте його у браузері.

12. Створіть рисунок для графічної навігаційної панелі за допомогою графічного редактора Paint.

Підберіть у бібліотеці, що є на комп'ютері рисунок, який може бути основою навігаційної карти. 

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

Збережіть рисунок як файл з розширенням ris.bmp. 

13. Запишіть html-файл для навігаційної карти.

Задайте відповідні розміри карти. Опишить горячі області карти. Зробіть їх як коло, прямокутник та трикутник. 

14. Збережіть під назвою karta.html.. Виконайте його. Поекспериментуйте з картою

15. Скопіюйте основний файл під назвою frame3.html.

16. У лівому фреймі для попереднього сайту розташуйте графічну навігаційну карту. 

Змініть основний файл так щоб замість файла leftframe.html використовувался файл karta.html.. Збережіть файл.

17. Забезпечте відображення сторінок у правому фреймі.

Практична робота № 2

Тема: Створення web-сторінки з таблицями, гіперпосиланнями та динамічними ефектами»

Мета: Уміти додавати на сторінку таблицю, графічні та відіо-зображення, створювати динамічні ефекти, використовувати теги для створення різних гіперпосиланнь.

Послідовність виконання роботи

1. На новій web-сторінці створить таблицю з даними (предметну область необхідно обрати самостійно). 

Таблиця буде складатися з 3 стовпців та 4 рядків.

Задайте заголовок таблиці (Наприклад: “Результати продажу”.  

Задайте заголовки стовпців та рядків. 

Заповніть таблицю даними. 

2. Новий файл збережіть під назвою pr_2_Name.htm (Name – прізвище студента). Перегляньте його у браузері.

3. Змінить вигляд таблиці.

Задайте товщину рамки таблиці, на приклад, 3, задайтекольори рамки та фона таблиі.  

4. Вирівнюйте текст у клітинках таблиці. 

У заголовках – по центру, в інших клітинках – на власнийсмак.

5. Поекспериментуйте з параметрами тега TABLE. Об'єднайте деякі дві клітинки таблиці в одну. Удоскональтесвою сторінку якнайліпше.

6. Створіть ще одну таблицю для розміщення фотографії та текста.

Таблиця повинна складатися з одного рядка та двох стовпців: у першому - фото, у другому – текст.  (Графічні файли повинні мати розширення bmp, jpg, gif).

7. Відредагуйте  графічне зображення.. 

Встановіть розміри фотографії, візміть її у рамку. 

8. Зробіть фотографію як гіперпосилання до файлу з особистими даними, створеного в Практичній роботі 1.

9. Змініть таблицю. 

Зробіть її без рамки. 

10. Вставте у свій файл гіперпосилання на html-файл, наприклад, на файл з таблицею. 

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

11. Створить гіперпосилання у вигляді графічного зображення.

Клацнувши на web-сторінці на фотографії, повинен відкриватися файл з особистими данними.

12. Застосуйте гіперпосилання для переходу на початок сторінки.

В кінці сторінки  розташуйте рядок з гіперпосиланням: Перехід к початку сторінки  для переходу у початок стороінки.

13. Застосуйте до заголовку динамічний ефект.

У файлі file2.htm  зробіть рядок Ця сторінка створена  Прізвище І.П. рухомим у смузі будь-якого коліру. Який тег для цього використовується?

Контрольні питання

1. Яке призначення тега TABLE, параметри тега TABLE?

2. Які теги формують у таблиці рядки, клітинки-заголовки і звичайні клітинки?

3. Як у таблиці об'єднати декілька клітинок в одну?

4. Який параметр використовують для вирівнювання елементів?

5. Яка особливість пари тегів <PRE>...</PRE>?

6. Як вставити графічне зображення у web-сторінку?

7. Які параметри може мати тег IMG?

8. За допомогою якого тега вставляють гіперпосилання?

9. Яке призначення параметрів LINK, VLINK, ALINK?

10. Як деяке графічне зображення зробити гіперпосиланням? 

11. Які є види посилань у межах одної web-сторінки?

12. Що таке якори?

13. Як запустити звук одночасно з відкриванням сторінки?

14. Як створити динамічний ефект рухомого тексту?

15. Які ви знаєте параметри рухомого тексту?