Тема: Структуризацiя iнформацiї у HTML-документах.



Мы поможем в написании ваших работ!


Мы поможем в написании ваших работ!



Мы поможем в написании ваших работ!


ЗНАЕТЕ ЛИ ВЫ?

Тема: Структуризацiя iнформацiї у HTML-документах.



Мета:

  1. Опанувати методику створення документа у форматi HTML.
  2. Опанувати основнi принципи представлення iнформацiї у виглядi гiпертексту.

 

Теги визначення гiперзв'язкiв.

Гiпертекстовий зв'язок - це вказiвник на чiтко визначене мiсце в iншому чи в цому ж документi. Гiперзв'язки можна встановлювати також до зовнiшнiх графiчний файлiв, вiдео та аудiо фрагментiв.

Для встановлення гiперзв'язку потрiбно визначити початкову та кiнцеву точки, мiж якими цей зв'язок встановлюється. Цi точки позначаються за допомогою тега <A></A>. Початкова точка визначає то мiсце, з якого необхiдно здiйснити перехiд. Це може бути зовнiшнiй файл, позначка в цому ж файлi чи позначка в зовнiшньому файлi. Зовнiшнiй файл визначається за допомоги URL. Якщо кiнцевою точкою є позначка у файлi, то вона повинна бути визначена.

Теги <A> i </A> використовуються для визначення як початкової, так i кiнцевої точок. Тег <A> має два основних параметри:

HREF="url#label" - Визначає кiнцеву точку переходу.
NAME="label" - Визначає назву позначки.

Наприклад:

<HTML>
<HEAD>
<TITLE> Перший документ </TITLE>
</HEAD>
<BODY>
. . .
<!- Документ з початковою позначкою ->
. . .
Click <A HREF="myfile.html#MyLabel"> here </A> to go to my file.
. . .
</BODY>
</HTML>

 

<HTML>
<HEAD>
<TITLE>Другий документ </TITLE>
</HEAD>
<BODY>
. . .
<!- Документ з кiнцевою позначкою ->
. . .
<A NAME="MyLabel"> </A>
. . .
</BODY>
</HTML>

Якщо потрiбно встановити зв'язок з усiм документом, то позначку вказувати не слiд.

Примiтка: гiперзв'язок вiдображається на екранi як пiдкреслений текст iншого кольору. Щоб здiйснити по ньому перехiд треба натиснути на ньому мишкою. А щоб було на чому натискати, цей текст (у нашому прикладi слово "here") повинен бути заданий обов'язково.

При визначеннi гiперзв'язкiв теги можуть знаходитися один у другому. Так, якщо треба визначити зображення як гiпертекстовий зв'язок, то: <A HREF="http://www.myserver.edu/mydir/myfile.html"><IMG SRC="MyImg.gif"></A>. Тодi однократне натискання кнопкою мишки на цьому зображенi буде iнiцiювати перехiд по гiперз'вязку.

Повний формат тегу A такий:
<A CLASS=type HREF=reference ID=value NAME=name onClick=function onMouseOver=function REL=SAME|NEXT|PARENT|PREVIOUS REV=value STYLE=style TARGET=window TITLE=title>Текст чи зображення</A>

 

Завдання

  1. Уважно ознайомитися з теоретичною частиною лабораторної роботи.
  2. Зробити так звану "домашню сторiнку" (файл з назвою index.html). Тут можна використати HTML сторiнку, що її Ви розробили на попереднiх заняттях.
  3. Домашня сторiнка повинна мiстити таку iнформацiю:
    • Прiзвище, iм'я та по батьковi власника сторiнки.
    • Домашня адреса, телефон.
    • Вашi науковi iнтереси (Основнi напрямки студентської дослiдницької роботи чи список лабораторних та курсових робiт, що ви виконуєте).
    • Ваше хобi чи список ваших улюблених позанавчальних справ та iнтересiв (З коротеньким поясненням).
  4. Органiзувати цю iнформацiю у виглядi спискiв.
  5. Переглянути свою домашню сторiнку за допомогою броузеру.
  6. Органiзувати iнформацiю про себе у iєрархiчному виглядi. Тобто, данi про ваше hobby та науковi iнтереси розташуйте у окремих файлах та зробiть посилання на них з головного файла index.html. Усi документи повиннi мiстити гiперпосилання, яки забезпечують повернення до Вашої титульної сторiнки.

 

Контрольне завдання

  1. На диску N: створити таку систему каталогiв та файлiв.
  2. Зв'язати HTML - файли системою посилань, що дозволяють переходити мiж ними у прямому та зворотньому порядку.
1.html ® 2.html ® 3.html
   

 

Лабораторна робота №5.

Тема: Робота з фреймами.

Мета:

  1. Опанувати методику створення документа у форматi HTML.
  2. Опанувати основнi принципи представлення iнформацiї у виглядi гiпертексту.

 

Фрейми

Фрейми є дуже зручним механізмом для швидкого розподілу головного вікна броузера на частини та відображення у кожній з них окремого html - файлу. При цьому кожна частина працює як незалежне вікно броузера із власними лінійками прокрутки сторінки, або без них. Зміст кожного фрейму можна змінювати незалежно від інших. Це дає змогу, за рахунок читкої спеціалізації фреймів, значно зменшити обсяг HTML - коду на сайті. Так, наприклад, один фрейм може відповідпти за представлення головного навігаційного меню, інший - за показ логотипу, назви фірми, тощо.

Розбиття сторінки виконується за допомогою тегу frameset, який має такі параметри:

  • ROWS - визначення пропорцій розподілу вікна броузера, або батьківського фрейму по горизонталі. Значення задається як два числа розподілених комою. Кожне число може бути визначено як у пікселях, так і у відсотках.
  • COLS - визначення пропорцій розподілу вікна броузера, або батьківського фрейму по вертикалі. Значення задається як два числа розподілених комою. Кожне число може бути визначено як у пікселях, так і у відсотках.
  • ONLOAD - визначення обробника подій, які відбуваються при завантаженні HTML - документу до фрейму.
  • ONUNLOAD - визначення обробника подій, які відбуваються при вивантаженні HTML - документу з фрейму.

Визначення файлу, який буде відображений у даному фреймі здійснюється за допомогою тегу frame, який має такі параметри:

  • NAME - власне ім'я (ідентифікатор) фрейму. Використовується для завантаження до нього HTML - файлів. Для цього використовуєтья атрибут target тегу A.
  • SRC - назва файлу, який буде відображений у цьому фреймі.
  • LONGDESC - розширений опис фрейму.
  • FRAMEBORDER - рамка фрейму (1 - рамка відображується, 0 - рамка схована).
  • MARGINWIDTH - ширина рамки фрейму (у пікселях).
  • MARGINHEIGHT - висота рамки фрейму (у пікселях).
  • NORESIZE - заборона зміни розмірів фрейму.
  • SCROLLING - режим керування скролінгом в середині фрейму (yes - скролінг можливий, лінійки прокрутки відображуються; no - скролінг не можливий, лінійки прокрутки сховані; auto - режим прокрутки визначається параметрами броузера).

 

Завдання:

  1. На своєму робочому диску створити окремий каталог.
  2. У цьому каталозi створити HTML - файл index.html з такою фреймовою стуктурою:
<frameset rows="*,75"> <frameset cols="20%,*"> <frame name="menu" src="nav.html" title="menu"> <frame name="content" src="about.html" title="content"> </frameset> <frame name="ad" src="ad.html" title="advertisement"> <noframes> <body> <h1>цей browser не пiдтримує фейми</h1> </body> </noframes> </frameset>
  1. Створити iнформайiйнi файли з назвами:
    • nav.html - Головне меню сайта.
<html> <head> <title>Головне меню</title> </head> <body> <ul> <li><a href="about.html" target="content">Про себе</a></li> <li><a href="study.html" target="content">Навчання</a></li> <li><a href="sci.html" target="content">Наука</a></li> <li><a href="hobby.html" target="content">Hobby</a></li> </ul> </body> </html>
    • about.html - Титульнй iнформацiйний файл сайта.
<html> <head> <title>Про себе</title> </head> <body> <h1 align=center>Про себе</h1> </body> </html>
    • ad.html - Файл з рекламною iнформацiєю.
<html> <head> <title>Контактна iнформацiя</title> </head> <body> <h3 align=center>&copy; 2006, Усi права захищенi.</h3> </body> </html>
    • study.html - Файл з iнформацiєю про навчальну роботу.
    • sci.html - Файл з iнформацiєю про наукову роботу.
    • hobby.html - Файл з iнформацiєю про свое hobby.
  1. Пiд'єднати цi файли до розробленої вами фреймової структури та подивитись результат у броузерi.

Лабораторна робота №6.



Последнее изменение этой страницы: 2016-04-19; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.237.16.210 (0.02 с.)