Тема: Створення та обробка д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>

1. У полi action тегу FORM пiсля команди mailto вказати свою поштову адресу.
2. Переглянути створений вами документ у броузерi та заповнити його поля вводу.
3. Натиснути кнопку submit та надiслати, таким чином, данi форми на свою поштову адресу.
4. За допомогою програми 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н.

 

Приклади визначення стильових правил

P { font-family:"New Century Schoolbook", Times, serif; } P { background-image:url(http://www.htmlhelp.com/bg.png); } BODY { background: white url(candybar.gif); } P.note { letter-spacing:-0.1em; } A:link, A:visited, A:active { text-decoration:none; } UL.check { list-style-image:url(/LI-markers/checkmark.gif); }

 

Завдання:

1. Створити HTML - файл такого змiсту:

<html> <head> <title>CSS</title> <link rel="stylesheet" href="styles.css" type="text/css" enctype="text/plain"> </head> <body> <h1>Header 1</h1> <p>Simple paragraph.</p> <ul> <li>Topic 1</li> <li>Topic 2</li> </ul> <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </body> </html>

1. Створити файл styles.css такого змiсту:

h1 { text-align:center; color:red; } p { text-align:right; color:blue; } li { text-size:x-large; color:green; } table { text-align:right; color:blue; }

1. HTML та CSS файли повиннi бути о однiй i той - же папцi. Якщо це не так, то у параметрi href тегу link треба вказати повний або вiдносний шлях до стильового файлу.
2. Переглянути створений вами HTML - документ у броузерi.
3. Змiнити одне або декiлька стильвих правил у файлi styles.css та знов переглянути HTML - документ у броузерi. Звернути увагу на змiни, що вiдбулися у виглядi елементiв HTML - документу

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

Тема: Робота з зображеннями у HTML - документах.

Мета:

 

Теги пiд'єднання графiчних образiв.

Для пiд'єднання графiки до Web - сторiнки iснує тег <IMG>. Це одноелементний тег, в якому повиннi бути заданi три основнi параметри:

• SRC="filename.ext" - задає iм'я файлу з зображенням (в форматi GIF чи JPEG).
• ALT="Picture message" - задає текстовий опис зображення, який з'являється замiсть нього у текстовому режимi перегляду документа.
• ALIGN="place" - задає розташування тексту опису графiчного зображення, який розмiщується у границях цього зображення. Цей параметр може мати такi значення TOP, BOTTOM, MIDDLE.

Приклад: <IMG SRC="rain.jpg" ALT="It is rainy" ALIGN="top">

Повний формат тегу IMG такий:
<IMG ALIGN=TOP|MIDDLE|CENTER|BOTTOM|LEFT|RIGHT ALT=text BORDER=n CLASS=type CONTROLS DYNSRC=url HEIGHT=n HSPACE=n ID=value ISMAP=image LOOP=n SRC=url START=start-event STYLE=css1 properties TITLE=text USEMAP=url VSPACE=n WIDTH=n>

Цей тег має такi параметри:

• SRC - (url) визначає шлях до файлу зображення;
• ALIGN - (TOP | MIDDLE | CENTER | BOTTOM | LEFT | RIGHT) визначає режим вирiвнювання зображення вiдносно оточуючого тексту;
• BORDER - визначає товщину рамки малюнку у пiкселях;
• ALT - (text) альтернативна назва зображення для броузерiв, що не можуть вiдображати графiку;
• TITLE - (text) заголовок зображення;
• LOOP - кiлькiсть повторень анiмацiї для анiмованих зображень (GIF - файлiв);
• WIDTH - ширина малюнка у вiдсотках (вiдносна) або пiкселях (абсолютна);
• HEIGHT - висота малюнка у вiдсотках (вiдносна) або пiкселях (абсолютна);
• VSPACE - вертикальна вiдстань малюнка вiд оточуючого тексту у пiкселях;
• HSPACE - горизонтальна вiдстань малюнка вiд оточуючого тексту у пiкселях;
• STYLE - визначення стильових опцiй для зображення;
• CLASS - визначення класу зображення;
• ID - визначення унiкального iдентифiкатору зображення;
• ISMAP=image
• USEMAP=url

 

Image Map.

<MAP name="mymap"> <AREA shape="circle" coords="70,84,51" href="http://www.december.com"> <AREA shape="rect" coords="25,180,125,280" href="http://www.december.com/html/"> <AREA shape="poly" coords="153,106,186,225,340,193,315,81,304,167" href="http://www.december.com/works/tour.html"> <AREA shape="rect" coords="420,19,478,278" nohref> <AREA shape="circle" coords="499,299,100" href="http://www.cnn.com/"> <AREA shape="default" coords="0,0,500,300" href="http://www.december.com/john/"> </MAP> <IMG src="imagemap.gif" width="500" height="300" alt="Image Map" usemap="#mymap" ismap>

 

Приклад

Завдання для самостiйної роботи

Лабораторна робота №10