Роздрукувати сторінку
Главная \ Методичні вказівки \ Методичні вказівки \ 1192 Практична робота на тему Основи Web-дизайну

Практична робота на тему Основи Web-дизайну

« Назад

1192 Практична робота на тему Основи Web-дизайну

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

Тема: Основи Web-дизайну

Мета: Познайомитись з мовою програмування HTML.

Хід виконання роботи

1. Створити за допомогою текстового редактора наведений текст і збережіть його з назвою File1.html.

<HTML>

<HEAD>

<TITLE> Назва вікна Web-сторінки </TITLE>

</HEAD>

<BODY TEXT="red">

<! Далі йде текст, наприклад >

Мене звуть “Введіть Ваше ім’я”, я навчаюсь у КФЕК НУДПСУ на 2 курсі, мені 18 років. Я хочу займатись Web-дизайном. Це моя перша Web-сторінка. Пізніше я вставлю в документ фотокартку, картинки, звуки, відеозображення шляхом гіперпосилань. Моя сторінка поки що некрасива і нецікава. Я розташую свій файл на сервері і його зможуть побачити всі.

</BODY>

</HTML>

2. Додайте тег заголовку і запишіть так:

<H1> Перша проба </H1>

3. Відкрийте файл у броузері.

4. Відформатуйте текст у файлі File1.html наступним чином і збережіть його у файлі File2.html:

<HTML>

<HEAD>

<TITLE> My Web-page </TITLE>

</HEAD>

<BODY BGCOLOR="yellow" TEXT="navy">

<CENTER><H1> Привіт </H1>

<H2>Мене звуть “Введіть Ваше ім’я” </H2></CENTER>

<HR>

<H3>Mені 18 років </H3>

<H4> Я хочу займатись Web-дизайном </H4>

<HR>

Я навчаюсь у КФЕК НУДПСУ на 2 курсі. Це моя <B> друга </B> спроба створити Web-сторінку. Я вже вмію користуватись заголовками, форматувати текстові абзаци. Пізніше я вставлю <I> фотокартку, картинки, звуки, відеозображення </I> шляхом гіперпосилань. <U> Я розташую свій файл на сервері і його зможуть побачити усі </U>.

<P>Я збережу цей файл на диску і відкрию його у браузері. <P>

Цю Web-сторінку я буду удосконалювати, її ще рано розміщувати на сервері. <HR>

</BODY>

</HTML>

5. Створіть наступний html-файл File3.html і перегляньте його за допомогою браузера.

<HTML>

<HEAD>

<TITLE> My new Web-page </TITLE>

</HEAD>

<BODY BGCOLOR="aqua" TEXT="red">

<H2>Це Web-сторінка “Введіть Ваше ім’я та прізвище”</H2><HR>

<CENTER> <B> Привіт </B> Мене звуть <B> Ваше ім’я </B>

</CENTER><P>

Я навчаюсь у <I> КФЕК НУДПСУ </I> на 2 <SUP><I> му</I></SUP> курсі. Мені 18 років. Мій улюблений предмет – інформатика. Я також люблю слухати музику, читати пригодницькі романи, подорожувати влітку, ходити в театр, дивитись пригодницькі і історичні фільми. <BR>

Я навчаюсь на відмінно і отримую підвищену стипендію. Мрію поступити в аспірантуру і займатись науковою діяльністю. <P>

<CENTER> Tут буде моя фотокартка. </CENTER><P>

Моя адреса: <B><U> 08292, м. Ірпінь , в. Садова 61</U></B><HR>

</BODY>

</HTML>

6. Переробити File3.html, використавши два види списків і назвіть новий файл File4.html. Переглянути файл у браузері.

7. У файлі File4.html створіть таблицю з оцінками і назвіть новий файл File5.html. Перегляньте його у браузері.

8. Створіть звуковий файл і вставте звук в основу сторінки. Вставте у файл File5.html гіперпосилання на об’єкти (графічні, звукові, відео а також на File4.html). Застосовуйте гіперпосилання на початок і кінець сторінки.

Закінчити роботу з програмою.

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

  1. Структура Web-документу.

  2. Що таке тег? Їх види.

  3. Призначення тегів HTML, TITLE, HEAD, BODY, IMG, HREF та їх формат.

  4. Параметри тега BODY.

  5. Види списків та їх задання мовою HTML.

  6. Призначення та параметри тега Font.

  7. Робота з таблицями у мові HTML.

З повагою ІЦ “KURSOVIKS”!