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

Тема: Створення та обробка дiалогових форм.

Мета:

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

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

 

Завдання:

1. Створити HTML - файл з такою формою:

   <form action="mailto:[e-mail]" method="post" enctype="text/plain">   <p>Name   <br><input name="person" type=textbox value="your name">   <p>Password   <br><input type="password" name="control2">   <p>Color   <br><input type="radio" name="colors" value="0" checked>red   <input type="radio" name="colors" value="1">green   <input type="radio" name="colors" value="2">blue   <p>Cars<br>   <select name="cars" size="1">     <option value="1">bmw</option>     <option value="2">porsche</option>     <option value="3" selected>mercedes</option>   </select>   <p>Comments<br>   <textarea name="comments" cols=60 rows=6>     type somthing   </textarea>   <p><input name="sender" type=checkbox checked>send receipt   <p><input type="submit" value="ok">  <input type="reset" value="reset"> </form>

2. У полi action тегу FORM пiсля команди mailto вказати свою поштову адресу.

3. Переглянути створений вами документ у броузерi та заповнити його поля вводу.

4. Натиснути кнопку submit та надiслати, таким чином, данi форми на свою поштову адресу.

5. За допомогою програми Outlook Express отримати та переглянути поштове повiдомлення з даними форми.

 

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

Тема: Використання каскадних стилiв.

Мета:

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

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

 

Теоретичнi вiдомостi

Залежно вiд того, де в HTML-документi використовується той, чи iнший тег HTML-розмiтки та яку семантичну роль вiн там виконує, цьому тегу може бути призначений той, чи iнший клас. Наприклад, звичайний текст у HTML-документi можна подати за допомогою тегу визначення параграфу <P> класу default:

<p class="default">Text</p>

усi визначення - оформити параграфами класу definition:

<p class="definition">Text</p>

Тодi у стильовому аркушi можна визначити рiзне вiзуальне представлення для кожного класу тегу <P>. Наприклад:

P.default { color:black; } P.definition { color:green; }

При побудовi стильового правила у якостi селектору можна декларувати клас без тегу, що з ним пов'язаний, але не можна декларувати декiлька класiв в одному правилi. Наприклад:

.note { font-size:small; }

У цьому правилi визначається, що усi теги класу note повиннi вiдображати текст, що з ними пов'язаний, малими лiтерами.

Стильове оформлення може бути призначене будь-якому тегу HTML-розмiтки окремо, залежно вiд його iдентифiкатора (ID). Наприклад, якщо будь-якому тегу позначення параграфа HTML-документу призначено власний iдентифiкатор

<P id="SVP94">Text indented 3 em</P>

то саме для цього конкретного тегу можна призначити такий стильовий опис

#SVP94 { text-indent:4em; }

При створеннi HTML-документу дуже часто використовуються вкладенi теги. Наприклад, у деякому параграфi <P> треба подати фрагмент тексту, обмежений тегами <EM> та </EM> в iншому виглядi. Але цього не, в якому разi не треба робити у заголовках позначених тегами <H1> ... <H6>, де також застосовуються теги <EM>. У цьому разi можна скористатися так званими контекстними селекторами. Контекстний селектор, це рядок, що складається з двох чи бiльшої кiлькостi простих селекторiв, розподiлених промiжками. Наприклад:

P EM { background:yellow; }

Це правило повiдомляє браузер про те, що текст, позначений тегами <EM>, що знаходиться у серединi параграфiв, позначених тегами <P>, повинен мати фон жовтого кольору. При чому, це правило не розповсюджується на тегi <EM>, якими може бути позначений текст, що знаходиться у заголовках (позначених тегами <H1> ... <H6>), таблицях (тег <TD>), списках (тег <LI>), та iн.