Завдання № 4
Тема “HTML.Створення сайтів”.
Мета. Вміти створювати сайти, розподіляти їх на фрейми, створівати текстові та графічні навігаційні панелі.
Послідовність виконання роботи
Створіть сайт про себе. Складіть основний файл, який запускатиме сайт та розподіляти його на фрейми.
Сайт поділить на два вертикальних фрейма, лівий – вузший та правий. Лівий фрейм матиме зміст сайту у вигляді гіперпосилань для навігації по сайту, правий – як початкова сторінка та для перегляду сторінок сайту. Збережіть основний файл під назвою frame1.html.
Складіть файл для опису лівого фрейму.
Він повинен містити: заголовок, наприклад, Сайт Прізвище І.П. та 4 гіперпосилання на файли, які мають містити інформацію про вас особисто, вашу родину, друзів, місце навчання, ваші захоплення, успіхі у навчанні, адресу тощо (можно скористатися файлами, які були створені у лабораторних роботах №1,2 ).
Забезпечте відображення сторінок у правому фреймі.
Збережіть файл під назвою leftframe.html.
Складіть файл для опису правого фрейму. Він має вигляд початковою сторінки сайту, наприклад, слідуючого змісту: Збережіть його під назвою rightframe.html.
Розташуйте інформацію у фреймах як найкраще, відформатуйте тексти, задайте необхідні параметри.
Задайте фон фреймам. Відкрийте почергово файли leftframe.html та rightframe.html. Наприклад, жовтий фон у лівому фреймі і зелений — у правому.
Заберіть межу між фреймами.
Задайте смуги прокручування лише для правого фрейму.
Скопіюйте основний файл під назвою frame2.html.
Створіть початкову сторінку більш цікавою. Виконайте відповідні зміни у файлі.
Поділіть правий фрейм на два горизонтальних фрейма. У вузькому верхньому фреймі розташуйте особисту емблему з деякого графічного файлу або фотографію.
У нижньому фреймі організуйте перегляд сторінок.
Збережіть зміни у файлі frame2.html.
Удоскональте сайт, щоб він виглядав як найліпше. Перегляньте його у броузері.
Сайт з розкритою сторінкою Моя біографія.
Створіть рисунок для графічної навігаційної панелі за допомогою графічного редактора Paint.
Підберіть у бібліотеці, що є на комп'ютері рисунок, який може бути основою навігаційної карти.
Рисунок модифікуйте за допомогою графічного редактора, наприклад, створіть текстові написи на ньому. Розташуйте елементи для гіперпосиланнь та уточніть координати гарячих областей.
Збережіть рисунок як файл з розширенням ris.bmp.
Запишіть html-файл для навігаційної карти. Задайте відповідні розміри карти. Опишить горячі області карти. Зробіть їх як коло, прямокутник та трикутник.
Збережіть під назвою karta.html.. Виконайте його. Поекспериментуйте з картою
Скопіюйте основний файл під назвою frame3.html.
У лівому фреймі для попереднього сайту розташуйте графічну навігаційну карту.
Змініть основний файл так щоб замість файла leftframe.html використовувался файл karta.html.. Збережіть файл.
Забезпечте відображення сторінок у правому фреймі.
Виконання завдання:
<HTML> <!--Це файл filel.htm->
<HEAD>
<TITLE>Особисті данні</TITLE>
</HEAD>
<BODY>
<table>
<tr height="500" width="100px" Bgcolor="grey" border="3" color="white">
<td>
<h1>Сайт Прізвище І.П.</h1>
<p>
<a href="file1.html"> Моя біографія </a><br />
<a href="file2.html"> Мої захоплення</a><br />
<a href="file3.html"> Мої успіхи </a><br />
<a href="file1.html"> Моя адреса</a><br />
</P>
</td>
<td height="500" width="1000px" Bgcolor="green" border="3" color="white">
<h2 color="violet"> Запрошуємо на сайт ПРІЗВИЩЕ І.П.<h2>
</td>
</table>
</BODY>
</HTML>
Контрольні запитання:
Якою мовою створюється Web-сторінка i яким чином відображується?
Що таке "гіперпосилання"? Який воно має вигляд i як ним користуватися?
Як у Web-сторінку вставити малюнок?
Як встановити обтікання мапюнка текстом?
Як встановити відстань між текстом i малюнком?
Як створити список і вибрати маркер для нього?
Як зробити один, два або три відступи? Як створити посилання на інший документ?
Що таке фрейми?
Яке призначення основного html-файлу?
Які параметри може мати тег <FRAMESET>?
Які параметри може мати тег <FRAME>?
Як створюються складні конфігурації фреймів?
Яке призначення параметра TARGET?
Для чого використовуються форми?
З дпопомогою яких тегів створюються форми?
Чим відрізняються ведення різних варіантів Кнопки?
Як ввести пороль?
У чому різниця між описом елементів списка перемикачів та списка варіантів?
У списку, що розгартається, як обрати декілько варіантів?
Як у списках встановити значення за умовчанням?
Яке призначення таблиці стилів?
Які є способи взаємодії таблиці стилів і html-файлу?
З чого складається таблиця стилів?
Які одиниці вимірювання застосовують у мові CSS?
Для чого групують властивості?
Що таке успадковування властивостей?
Яке призначення тега DIV?
Яке призначення тега SPAN?
Висновок: Під час виконання проекту був створений web-сайт з 4 сторінками за допомогою мови гіпертекстової розмітки HTML. Під час створення сайту були використані теги форматування тексту, списків, таблиць, графічних об’єктів, гіперпосилань, навігаційної карти, динамічних ефектів, форми та таблиці стилів.
Список використаної літератури:
Шестопалов Є.А. Internet для початківця. Посібник з інформатики, Книга 8. 2003 – 96 с.
Петюшкин А. Книга Профессиональное программирование HTML в Web-дизайне, "БХВ-Петербург", 2004 г., 400 с
Сергеев А. Книга HTML и XML. Профессиональная работа, "Вильямс", 2004 г., 880 с
Петюшкин А. Книга HTML в Web-дизайне, "БХВ-Петербург", 2004 г., 400 с
Дригалкин В. Книга HTML в примерах. Как создать свой Web-сайт. Самоучитель, "Вильямс", 2003 г., 192 с.
Інформатика і інформаційні технології. Підручник для 10-11 класів.Н.Д.Угринович - М.: Лабораторія Базових Знань. 2006.
Практикум з інформатики та інформаційних технологій. Навчальний посібник для загальноосвітніх установ.Н.Д.Угринович,Л.Л. Босова, Н.І. Михайлова. – М.: Лабораторія Базових Знань, 2002, 2003, 2004, 2005, 2006.
Інформатика і ІКТ - 10. Підручник для 10 класу. Базовий рівень.УгриновичН.Д. - М.: Лабораторія Базових Знань. 2007.
Інформатика і ІКТ - 10. Підручник для 10 класу. Профільний рівень.УгриновичН.Д. - М.: Лабораторія Базових Знань. 2006, 2007.