Створення WEB-сторінкизасобами мови HTML, форматування тексту та робота з кольорами.

Матеріал з Фізмат Вікіпедії
Перейти до: навігація, пошук

Лабораторна робота

Створення WEB-сторінкизасобами мови HTML, форматування тексту та робота з кольорами.

Завдання 1. Знайомство зі структурою WEB-документу. Створення найпростішої WEB-сторінки за поданим зразком.

 відкрийте текстовий редактор Блокнот (Notepad);

 наберіть наступний текст, не форматуючи його:

1 H.jpg

 Збережіть цей файл з іменем zavd1.htm, вказавши при цьому «Тип файлу – All Files».

 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ.

Завдання 2. Редагування WEB-сторінки

 Відкрийте файл zavd1.htm у текстовому редакторі Блокнот (Notepad);

 Змініть назву WEB-сторінки на наступну: «Ліна Костенко. Доля»;

 Змінити текст WEB-сторінки на рядки вірша:


<HTML>

<HEAD>

<TITLE>

Ліна Костенко. «Доля»

</TITLE>

</HEAD>

<BODY>

Доля

Наснився мені чудернацький базар:

під небом, у чистому полі,

для різних людей,

для щедрих і скнар,

продавалися різні долі.

Одні були царівен не гірш,

а другі – як бідні Міньйони.

Хто купляв собі долю за гріш.

А хто - і за мільйони.

Дехто щастям своїм платив.

Дехто платив сумлінням.

Дехто – золотом золотим.

А дехто – вельми сумнівним...

Ліна Костенко

</BODY>

</HTML>

 Збережіть цей файл з іменем zavd2.htm;

 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд:

1 H.jpg

Завдання 3. Використання дескрипторів розриву рядка

 Відкрийте файл zavd2.htm у текстовому редакторі Блокнот (Notepad);

 Вставте вкінці кожного окремого рядка тексту, крім останнього, дескриптор розриву рядка
:


<HTML>

<HEAD>

<TITLE>

Ліна Костенко. «Доля»

</TITLE>

</HEAD>

<BODY>

Доля

Наснився мені чудернацький базар:

під небом, у чистому полі,

для різних людей,

для щедрих і скнар,

продавалися різні долі.

Одні були царівен не гірш,

а другі – як бідні Міньйони.

Хто купляв собі долю за гріш.

А хто - і за мільйони.

Дехто щастям своїм платив.

Дехто платив сумлінням.

Дехто – золотом золотим.

А дехто – вельми сумнівним...

Ліна Костенко

</BODY>

</HTML>

3 H.jpg

 Збережіть цей файл з іменем zavd3.htm;

 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.

Завдання 4. Використання контейнеру розриву абзацу

 Відкрийте файл zavd3.htm у текстовому редакторі Блокнот (Notepad);

 Вставте вкінці першого рядка тексту та останнього рядка кожного стовпчика вірша, дескриптор розриву абзацу

, а після останнього рядка тексту -

:

<HTML>

<HEAD>

<TITLE>

Ліна Костенко. «Доля»

</TITLE>

</HEAD>

<BODY>

Доля

Наснився мені чудернацький базар:
під небом, у чистому полі,
для різних людей,
для щедрих і скнар,
продавалися різні долі. <P> Одні були царівен не гірш,
а другі – як бідні Міньйони.
Хто купляв собі долю за гріш.
А хто - і за мільйони. <P> Дехто щастям своїм платив.
Дехто платив сумлінням.
Дехто – золотом золотим.
А дехто – вельми сумнівним... <P> Ліна Костенко

</BODY>

</HTML>

4 H.jpg

 Збережіть цей файл з іменем zavd4.htm;

 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.

Завдання 5. Використання дескрипторів заголовків H1 – H5.

 Відкрийте файл zavd4.htm у текстовому редакторі Блокнот (Notepad);

 Текст «Доля» обмежіть контейнером

Зміст

; рядки вірша – контейнером

; а підпис -
:

<HTML>

<HEAD>

<TITLE>

Ліна Костенко. «Доля»

</TITLE>

</HEAD>

<BODY>

Доля


Наснився мені чудернацький базар:
під небом, у чистому полі,
для різних людей,
для щедрих і скнар,
продавалися різні долі. <P> Одні були царівен не гірш,
а другі – як бідні Міньйони.
Хто купляв собі долю за гріш.
А хто - і за мільйони. <P> Дехто щастям своїм платив
. Дехто платив сумлінням.
Дехто – золотом золотим.
А дехто – вельми сумнівним...

<P>


Ліна Костенко

</BODY>

</HTML>

5 H.jpg

 Збережіть цей файл з іменем zavd5.htm;

 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.

Завдання 6. Вирівнювання тексту на сторінці. Використання параметру ALIGN=

 Відкрийте файл zavd5.htm у текстовому редакторі Блокнот (Notepad);

 До дескриптору

додати параметр вирівнювання тексту заголовку по центру сторінки ALIGN=CENTER; до дескриптору

додати параметр вирівнювання тексту по лівому краю сторінки ALIGN=LEFT, а до дескриптору

додати параметр вирівнювання тексту по правому краю сторінки ALIGN=RIGHT: <HTML> <HEAD> <TITLE> Ліна Костенко. «Доля» </TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER > Доля </H1>

<H3 ALIGN=LEFT >Наснився мені чудернацький базар:
під небом, у чистому полі,
для різних людей,
для щедрих і скнар,
продавалися різні долі. <P> Одні були царівен не гірш,
а другі – як бідні Міньйони.
Хто купляв собі долю за гріш.
А хто - і за мільйони. <P> Дехто щастям своїм платив
. Дехто платив сумлінням.
Дехто – золотом золотим.
А дехто – вельми сумнівним... </H3> <P> <H5 ALIGN=RIGHT >Ліна Костенко </H5>

</BODY>

</HTML>

6 H.jpg

 Збережіть цей файл з іменем zavd6.htm;

 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.

Завдання 7. Використання дескрипторів стилю для форматування тексту (, , )

 Відкрийте файл zavd6.htm у текстовому редакторі Блокнот (Notepad);

 У рядках, що містять <H1 ALIGN=CENTER >, <H3 ALI,GN=LEFT >, <H5 ALIGN=RIGHT >, замініть H1, H3, H5 на P. Дескриптори </H1>, </H3>, </H5> видаліть.

 Обмежте заголовок вірша контейнером напівжирного шрифту <B> </B> та контейнером підкреслення <U> ; а підпис «Ліна Костенко» контейнером похилого шрифту <I> :

<HTML>

<HEAD>

<TITLE>

Ліна Костенко. «Доля»

</TITLE>

</HEAD>

<BODY>

<B> Доля </B> <P> <P ALIGN=LEFT >Наснився мені чудернацький базар:
під небом, у чистому полі,
для різних людей,
для щедрих і скнар,
продавалися різні долі. <P> Одні були царівен не гірш,
а другі – як бідні Міньйони.
Хто купляв собі долю за гріш.
А хто - і за мільйони. <P> Дехто щастям своїм платив.
Дехто платив сумлінням.
Дехто – золотом золотим.
А дехто – вельми сумнівним... <P> <P ALIGN=RIGHT > Ліна Костенко

</BODY>

</HTML>

7 H.jpg

 Збережіть цей файл з іменем zavd7.htm;

 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.

Завдання 8. Використання контейнеру форматування шрифту та його параметрів

 Відкрийте файл zavd7.htm у текстовому редакторі Блокнот (Notepad);

 Обмежте заголовок вірша контейнером форматування шрифту з параметрами FACE=Arial Size=7 Color=Green;


 текст вірша - контейнером форматування шрифту з параметрами Size=5 Color=Gray;

 підпис - контейнером форматування шрифту з параметрами FACE=Courier Size=5 Color=Teal.


<HTML>

<HEAD>

<TITLE>

Ліна Костенко. «Доля»

</TITLE>

</HEAD>

<BODY>

<B> Доля </B> <P> <P ALIGN=LEFT > Наснився мені чудернацький базар:
під небом, у чистому полі,
для різних людей,
для щедрих і скнар,
продавалися різні долі. <P> Одні були царівен не гірш,
а другі – як бідні Міньйони.
Хто купляв собі долю за гріш.
А хто - і за мільйони. <P> Дехто щастям своїм платив.
Дехто платив сумлінням.
Дехто – золотом золотим.
А дехто – вельми сумнівним...
<P> <P ALIGN=RIGHT > Ліна Костенко

</BODY>

</HTML>

8 H.jpg

 Збережіть цей файл з іменем zavd8.htm.

Завдання додому. Створіть власну Веб- сторінку про себе, з довільним дизайном.