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

Матеріал з Фізмат Вікіпедії
Перейти до: навігація, пошук
(Створена сторінка: Лабораторна робота Створення WEB-сторінкизасобами мови HTML, форматування тексту та робота…)
 
 
(Не показані 2 проміжні версії цього користувача)
Рядок 1: Рядок 1:
Лабораторна робота
+
'''Лабораторна робота'''
  
 
Створення WEB-сторінкизасобами мови HTML, форматування тексту та робота з кольорами.
 
Створення WEB-сторінкизасобами мови HTML, форматування тексту та робота з кольорами.
  
Завдання 1. Знайомство зі структурою WEB-документу. Створення найпростішої WEB-сторінки за поданим зразком.
+
'''Завдання 1.''' Знайомство зі структурою WEB-документу. Створення найпростішої WEB-сторінки за поданим зразком.
  
 
 відкрийте текстовий редактор Блокнот (Notepad);
 
 відкрийте текстовий редактор Блокнот (Notepad);
Рядок 9: Рядок 9:
 
 наберіть наступний текст, не форматуючи його:
 
 наберіть наступний текст, не форматуючи його:
  
 +
[[Файл:1_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd1.htm, вказавши при цьому «Тип файлу – All Files».
 
 Збережіть цей файл з іменем zavd1.htm, вказавши при цьому «Тип файлу – All Files».
Рядок 14: Рядок 15:
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ.
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ.
 
   
 
   
Завдання 2. Редагування WEB-сторінки
+
'''Завдання 2.''' Редагування WEB-сторінки
 
   
 
   
 
 Відкрийте файл zavd1.htm у текстовому редакторі Блокнот (Notepad);
 
 Відкрийте файл zavd1.htm у текстовому редакторі Блокнот (Notepad);
Рядок 75: Рядок 76:
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд:
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд:
  
 +
[[Файл:2_H.jpg]]
  
Завдання 3. Використання дескрипторів розриву рядка <BR>
+
'''Завдання 3.''' Використання дескрипторів розриву рядка <BR>
  
 
 Відкрийте файл zavd2.htm у текстовому редакторі Блокнот (Notepad);
 
 Відкрийте файл zavd2.htm у текстовому редакторі Блокнот (Notepad);
Рядок 117: Рядок 119:
 
А хто - і за мільйони. <BR>
 
А хто - і за мільйони. <BR>
  
Дехто щастям своїм платив <BR>.
+
Дехто щастям своїм платив. <BR>
  
 
Дехто платив сумлінням. <BR>
 
Дехто платив сумлінням. <BR>
Рядок 130: Рядок 132:
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:3_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd3.htm;
 
 Збережіть цей файл з іменем zavd3.htm;
Рядок 135: Рядок 139:
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.
  
Завдання 4. Використання контейнеру розриву абзацу <P> </P>
+
'''Завдання 4.''' Використання контейнеру розриву абзацу <P> </P>
  
 
 Відкрийте файл zavd3.htm у текстовому редакторі Блокнот (Notepad);
 
 Відкрийте файл zavd3.htm у текстовому редакторі Блокнот (Notepad);
Рядок 156: Рядок 160:
  
 
Доля<P>
 
Доля<P>
 +
 
   
 
   
 
Наснився мені чудернацький базар: <BR>
 
Наснився мені чудернацький базар: <BR>
Рядок 166: Рядок 171:
  
 
продавалися різні долі. <P>
 
продавалися різні долі. <P>
 +
  
 
Одні були царівен не гірш, <BR>
 
Одні були царівен не гірш, <BR>
Рядок 175: Рядок 181:
 
А хто - і за мільйони. <P>
 
А хто - і за мільйони. <P>
  
Дехто щастям своїм платив <BR>.
+
 
 +
Дехто щастям своїм платив. <BR>
  
 
Дехто платив сумлінням. <BR>
 
Дехто платив сумлінням. <BR>
Рядок 182: Рядок 189:
  
 
А дехто – вельми сумнівним... <P>
 
А дехто – вельми сумнівним... <P>
 +
  
 
Ліна Костенко</P>
 
Ліна Костенко</P>
Рядок 188: Рядок 196:
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:4_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd4.htm;
 
 Збережіть цей файл з іменем zavd4.htm;
Рядок 193: Рядок 203:
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.
  
Завдання 5. Використання дескрипторів заголовків H1 – H5.
+
'''Завдання 5.''' Використання дескрипторів заголовків H1 – H5.
  
 
 Відкрийте файл zavd4.htm у текстовому редакторі Блокнот (Notepad);
 
 Відкрийте файл zavd4.htm у текстовому редакторі Блокнот (Notepad);
Рядок 213: Рядок 223:
 
<BODY>
 
<BODY>
  
<H1>Доля</H1><P>
+
<H1> Доля </H1> <P>
 +
 
 
   
 
   
<H3>Наснився мені чудернацький базар: <BR>
+
<H3> Наснився мені чудернацький базар: <BR>
  
 
під небом, у чистому полі, <BR>
 
під небом, у чистому полі, <BR>
Рядок 224: Рядок 235:
  
 
продавалися різні долі. <P>
 
продавалися різні долі. <P>
 +
  
 
Одні були царівен не гірш, <BR>
 
Одні були царівен не гірш, <BR>
Рядок 232: Рядок 244:
  
 
А хто - і за мільйони. <P>
 
А хто - і за мільйони. <P>
 +
  
 
Дехто щастям своїм платив <BR>.
 
Дехто щастям своїм платив <BR>.
Рядок 241: Рядок 254:
 
А дехто – вельми сумнівним... </H3> <P>
 
А дехто – вельми сумнівним... </H3> <P>
  
<H5>Ліна Костенко </H5></P>
+
 
 +
<H5> Ліна Костенко </H5></P>
  
 
</BODY>
 
</BODY>
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:5_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd5.htm;
 
 Збережіть цей файл з іменем zavd5.htm;
Рядок 257: Рядок 273:
 
 До дескриптору <H1> додати параметр вирівнювання тексту заголовку по центру сторінки
 
 До дескриптору <H1> додати параметр вирівнювання тексту заголовку по центру сторінки
  
ALIGN=CENTER; до дескриптору <H3> додати параметр вирівнювання тексту по лівому краю сторінки
+
ALIGN=CENTER;
 +
 
 +
до дескриптору <H3> додати параметр вирівнювання тексту по лівому краю сторінки
  
 
ALIGN=LEFT, а до дескриптору <H5> додати параметр вирівнювання тексту по правому краю сторінки
 
ALIGN=LEFT, а до дескриптору <H5> додати параметр вирівнювання тексту по правому краю сторінки
Рядок 277: Рядок 295:
 
<BODY>
 
<BODY>
  
<H1 ALIGN=CENTER >Доля</H1><P>  
+
<H1 ALIGN=CENTER > Доля </H1><P>
 +
  
 
<H3 ALIGN=LEFT >Наснився мені чудернацький базар: <BR>
 
<H3 ALIGN=LEFT >Наснився мені чудернацький базар: <BR>
Рядок 306: Рядок 325:
  
 
А дехто – вельми сумнівним... </H3> <P>
 
А дехто – вельми сумнівним... </H3> <P>
 +
  
 
<H5 ALIGN=RIGHT >Ліна Костенко </H5></P>
 
<H5 ALIGN=RIGHT >Ліна Костенко </H5></P>
Рядок 312: Рядок 332:
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:6_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd6.htm;
 
 Збережіть цей файл з іменем zavd6.htm;
Рядок 318: Рядок 340:
 
документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.
 
документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.
  
Завдання 7. Використання дескрипторів стилю для форматування тексту (<B>, <I>, <U>)
+
'''Завдання 7.''' Використання дескрипторів стилю для форматування тексту (<B>, <I>, <U>)
  
 
 Відкрийте файл zavd6.htm у текстовому редакторі Блокнот (Notepad);
 
 Відкрийте файл zavd6.htm у текстовому редакторі Блокнот (Notepad);
Рядок 340: Рядок 362:
 
<BODY>
 
<BODY>
  
<P ALIGN=CENTER > <B><U>Доля </U> </B> <P>  
+
<P ALIGN=CENTER > <B> <U> Доля </U> </B> <P>  
  
 
<P ALIGN=LEFT >Наснився мені чудернацький базар: <BR>
 
<P ALIGN=LEFT >Наснився мені чудернацький базар: <BR>
Рядок 360: Рядок 382:
 
А хто - і за мільйони. <P>
 
А хто - і за мільйони. <P>
  
Дехто щастям своїм платив <BR>.
+
Дехто щастям своїм платив. <BR>
  
 
Дехто платив сумлінням. <BR>
 
Дехто платив сумлінням. <BR>
Рядок 372: Рядок 394:
 
</BODY>
 
</BODY>
  
 +
</HTML>
  
</HTML>
+
[[Файл:7_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd7.htm;
 
 Збережіть цей файл з іменем zavd7.htm;
Рядок 380: Рядок 403:
 
документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.
 
документ. Якщо ви зробили все добре, то він матиме такий вигляд, як на рисунку вище.
  
Завдання 8. Використання контейнеру форматування шрифту <FONT> </FONT> та його параметрів
+
'''Завдання 8.''' Використання контейнеру форматування шрифту <FONT> </FONT> та його параметрів
  
 
 Відкрийте файл zavd7.htm у текстовому редакторі Блокнот (Notepad);
 
 Відкрийте файл zavd7.htm у текстовому редакторі Блокнот (Notepad);
Рядок 430: Рядок 453:
 
А хто - і за мільйони. <P>
 
А хто - і за мільйони. <P>
  
Дехто щастям своїм платив <BR>.
+
Дехто щастям своїм платив. <BR>
  
 
Дехто платив сумлінням. <BR>
 
Дехто платив сумлінням. <BR>
Рядок 443: Рядок 466:
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:8_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd8.htm.
 
 Збережіть цей файл з іменем zavd8.htm.
  
Завдання додому. Створіть власну Веб- сторінку про себе, з довільним дизайном!!!
+
'''Завдання додому.''' Створіть власну Веб- сторінку про себе, з довільним дизайном.

Поточна версія на 10:00, 21 березня 2011

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

Створення 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 та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд:

2 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.

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