- •Лабораторна робота №2
- •Теги форматування символiв.
- •Теги форматування спискiв.
- •Завдання
- •Контрольне завдання
- •Лабораторна робота №3
- •Теги форматування таблиці.
- •Завдання для самостійної роботи
- •Лабораторна робота №4
- •Теги визначення гiперзв'язкiв.
- •Завдання
- •Контрольне завдання
- •Лабораторна робота №5.
- •Завдання:
- •Лабораторна робота №6.
- •Завдання:
- •Лабораторна робота №7.
- •Теоретичнi вiдомостi
- •Приклади визначення стильових правил
- •Завдання:
- •Лабораторна робота №8.
- •Теги пiд'єднання графiчних образiв.
- •Image Map.
- •Приклад
- •Завдання для самостiйної роботи Лабораторна робота №10
- •Завдання
- •Лабораторна робота №11
- •Віддалений доступ до Web серверу
- •Завдання
Приклади визначення стильових правил
|
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); } |
Завдання:
Створити 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>
Створити файл 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; }
HTML та CSS файли повиннi бути о однiй i той - же папцi. Якщо це не так, то у параметрi href тегу link треба вказати повний або вiдносний шлях до стильового файлу.
Переглянути створений вами HTML - документ у броузерi.
Зм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