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

Матеріал з Фізмат Вікіпедії
Перейти до: навігація, пошук
 
(Не показано одну проміжну версію цього користувача)
Рядок 9: Рядок 9:
 
 наберіть наступний текст, не форматуючи його:
 
 наберіть наступний текст, не форматуючи його:
  
 +
[[Файл:1_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd1.htm, вказавши при цьому «Тип файлу – All Files».
 
 Збережіть цей файл з іменем zavd1.htm, вказавши при цьому «Тип файлу – All Files».
Рядок 75: Рядок 76:
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд:
 
 Відкрийте цей файл за допомогою програми Internet Explorer та перегляньте створений документ. Якщо ви зробили все добре, то він матиме такий вигляд:
  
 +
[[Файл:2_H.jpg]]
  
 
'''Завдання 3.''' Використання дескрипторів розриву рядка <BR>
 
'''Завдання 3.''' Використання дескрипторів розриву рядка <BR>
Рядок 130: Рядок 132:
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:3_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd3.htm;
 
 Збережіть цей файл з іменем zavd3.htm;
Рядок 156: Рядок 160:
  
 
Доля<P>
 
Доля<P>
 +
 
   
 
   
 
Наснився мені чудернацький базар: <BR>
 
Наснився мені чудернацький базар: <BR>
Рядок 166: Рядок 171:
  
 
продавалися різні долі. <P>
 
продавалися різні долі. <P>
 +
  
 
Одні були царівен не гірш, <BR>
 
Одні були царівен не гірш, <BR>
Рядок 174: Рядок 180:
  
 
А хто - і за мільйони. <P>
 
А хто - і за мільйони. <P>
 +
  
 
Дехто щастям своїм платив. <BR>
 
Дехто щастям своїм платив. <BR>
Рядок 182: Рядок 189:
  
 
А дехто – вельми сумнівним... <P>
 
А дехто – вельми сумнівним... <P>
 +
  
 
Ліна Костенко</P>
 
Ліна Костенко</P>
Рядок 188: Рядок 196:
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:4_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd4.htm;
 
 Збережіть цей файл з іменем zavd4.htm;
Рядок 214: Рядок 224:
  
 
<H1> Доля </H1> <P>
 
<H1> Доля </H1> <P>
 +
 
   
 
   
 
<H3> Наснився мені чудернацький базар: <BR>
 
<H3> Наснився мені чудернацький базар: <BR>
Рядок 224: Рядок 235:
  
 
продавалися різні долі. <P>
 
продавалися різні долі. <P>
 +
  
 
Одні були царівен не гірш, <BR>
 
Одні були царівен не гірш, <BR>
Рядок 232: Рядок 244:
  
 
А хто - і за мільйони. <P>
 
А хто - і за мільйони. <P>
 +
  
 
Дехто щастям своїм платив <BR>.
 
Дехто щастям своїм платив <BR>.
Рядок 240: Рядок 253:
  
 
А дехто – вельми сумнівним... </H3> <P>
 
А дехто – вельми сумнівним... </H3> <P>
 +
  
 
<H5> Ліна Костенко </H5></P>
 
<H5> Ліна Костенко </H5></P>
Рядок 246: Рядок 260:
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:5_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd5.htm;
 
 Збережіть цей файл з іменем zavd5.htm;
Рядок 279: Рядок 295:
 
<BODY>
 
<BODY>
  
<H1 ALIGN=CENTER > Доля </H1><P>  
+
<H1 ALIGN=CENTER > Доля </H1><P>
 +
  
 
<H3 ALIGN=LEFT >Наснився мені чудернацький базар: <BR>
 
<H3 ALIGN=LEFT >Наснився мені чудернацький базар: <BR>
Рядок 315: Рядок 332:
  
 
</HTML>
 
</HTML>
 +
 +
[[Файл:6_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd6.htm;
 
 Збережіть цей файл з іменем zavd6.htm;
Рядок 375: Рядок 394:
 
</BODY>
 
</BODY>
  
 +
</HTML>
  
</HTML>
+
[[Файл:7_H.jpg]]
  
 
 Збережіть цей файл з іменем zavd7.htm;
 
 Збережіть цей файл з іменем zavd7.htm;
Рядок 446: Рядок 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.

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