Роздрукувати сторінку
Главная \ Методичні вказівки \ Методичні вказівки \ 855 Лабораторна робота 2 на тему Створення текстової HTML-сторінки з курсу Сучасні Internet-технології, НУДПСУ

Лабораторна робота 2 на тему Створення текстової HTML-сторінки з курсу Сучасні Internet-технології, НУДПСУ

« Назад

Лабораторна робота № 2 Створення текстової HTML-сторінки

Мета роботи: освоїти основні прийоми роботи створення HTML-сторінки за допомогою текстового редактора "Блокнот" та методику використання тегів форматування тексту та HTML-документа.

Хід роботи

1. Підготовчі роботи:

1.1. Створити теку, де будуть розміщуватись HTML-файли. Наприклад, на диску Е створити теку  HTML.

1.2. Встановлити настройки для відображення розширень файлів. Для цього зайти у нашу теку та вибрати команди меню "Сервис" –> "Свойства папки". У вікні "Свойства папки" переходимо на вкладку «Вид” та знімаємо перемикач у рядку "Скрывать расширения для зарегистрированных типов файлов" (рис.1).

2. У теці HTML створюємо текстовий документ з назвою text.html. При цьому повинно з’явитись вікно запиту зміни розширення файлу (рис.2). У цьому вікні натискаємо на кнопку "Да". Іконка, файлу text.html зміниться на таку, що відповідає браузера.

3. Відкривти файл text.html за допомогою браузера (рис. 3). Зазначимо, що на цей момент файл порожній.

4. Для запису інформації у файл text.html вибирати такі меню браузера, "Вид" –> "Просмотр HTML-кода".  У відповідь на це відкривається вікно текстового редактора "Блокнот" з файлом text.html.

5. У редакторі "Блокнот" записати HTML-код, що визначає основні розділи HTML-документа, встановлює кодування Windows-1251 та встановлює назву документа "Лабораторна робота № 2". Зазначимо, що назва HTML-документа відображається у рядку заголовка браузера.

<html>

<head>

         <meta http-equiv="Content-Type" content="text/html;

charset=windows-1251">

         <title> Лабораторна робота №2</title>

</head>

<body>

</body>

</html>

6. Зберегти у блокноті записаний текст, перейти у браузер та за допомогою кнопки "Обновить" оновити сторінку text.html (рис. 4).

7. Для визначення тексту напівжирними символами, курсивом та підкресленими символами у тілі HTML-документа записати:

<body>

         <b>напівжирні символи</b>,

          <i>курсив</i>,

         <u>підкреслені символами</u>,

         <b><i><u>комбінація</u></i></b>

</body>

8. Зберігати документ у "Блокноті" та оновити його у браузері (рис. 5).

9. Додати у HTML-документ формулу  X2+X4 = Yi. Для цього у кінці тіла документа дописати:

         <br>X<sup>2</sup>+X<sup>4</sup>=Y<sub>i</sub>

</body>

Зазначимо, що тег <br> використано для запису формули з нового рядка.

10. Додати у наш документ HTML-код для відображення тексту у вигляді заголовків:

<h1>Заголовок 1</h1>

<h2 align="center">Заголовок 2. Вирівнювання "по центру"</h2>

<h3 align="right">Заголовок 3. Вирівнювання "по правому краю" </h3>

<h4>Заголовок 4</h4>

<h5>Заголовок 5</h5>

<h6>Заголовок 6</h6>

</body>

Фрагмент вікна браузера з текстом у вигляді заголовків показаний на   рис. 6.

11. Додати у документ три фрагменти тексту червоного кольору. Перший фрагмент записати шрифтом Arial розміром 7, другий ― шрифтом GothicG розміром 3, Verda ― розміром 1. Для цього додати наступний HTML-код:

<br><font face="Arial" size="7" color="Red">Перший фрагмент

тексту</font>

         <br><font face="GothicG" size="3" color="Red">Другий фрагмент

тексту</font>

         <br><font face="Verdana" size="1" color="Red">Третій фрагмент

тексту</font>

</body>

Відповідний фрагмент вікна браузера показаний на рис. 7.

12. За допомогою тегів абзаців та ліній розділити наш HTML-документ на окремі частини. А також визначити, що колір фону сторінки сірий, а колір тексту коричневий. Крім того, встановити, що горизонтальні відступи від об’єктів HTML-сторінки до границь вікна браузера дорівнюють 3-ом, а  вертикальні ― 2-ом пікселям. Для цього змінити HTML-код таким чином:

<body leftmargin=2 topmargin=1 bgcolor="Silver" text="Maroon">

         <p align="right">

         <b>напівжирні символи</b>,       <i>курсив</i>,   <u>підкреслені

символами</u>,

         <b><i><u>комбінація</u></i></b>

         <br>X<sup>2</sup>+X<sup>4</sup>=Y<sub>i</sub>

         </p>

         <hr width="100%" size="2" noshade>

         <h1>Заголовок 1</h1>

         <h2 align="center">Заголовок 2. Вирівнювання "по центру"</h2>

         <h3 align="right">Заголовок 3. Вирівнювання "по правому краю" </h3>

         <h4>Заголовок 4</h4>

         <h5>Заголовок 5</h5>

         <h6>Заголовок 6</h6>

         <hr width="70%" size="3" noshade>

         <p align="center">

         <br><font face="Arial" size="7" color="Red">Перший фрагмент

тексту</font>

         <br><font face="GothicG" size="3" color="Red">Другий фрагмент

тексту</font>

         <br><font face="Verdana" size="1" color="Red">Третій фрагмент

тексту</font>

         </p>

</body>

Відображення даної HTML-сторінки у вікні браузера подане на рис. 8.

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

1. Оформити у вигляді HTML-документа титульну сторінку курсової роботи з указаної викладачем навчальної дисципліни.

2. Оформити звіт.

Питання для самоперевірки

  1. Як визначити розмір вертикального відступу від тексту до границі браузера?

  2. Як визначити розмір горизонтального відступу від тексту до границі браузера?

  3. Як визначити колір тексту для всього документа?

  4. Як визначити колір фрагмента тексту?

  5. Як визначити шрифт, яким текст буде відображуватись у вікні браузера?

  6. Як записати тег лінії з товщиною у 5 пікселів?

  7. Чи можна задати лінію товщиною у 200 пікселів?

  8. Як записується тег заголовка 5-го розміру з вирівнюванням по центру?

  9. Як записується тег абзацу з вирівнюванням по лівому краю?

  10. Яким чином задати обов’язкове відображення фрагмента тексту з нового рядка?

З повагою ІЦ “KURSOVIKS”!