ІКТ, ПР №7, html

Інформатика та комп’ютерна техніка

Практична робота №7

Основи HTML

Мета: оволодіти базовими знаннями мови HTML. Набути навичок створення простих веб-сторінок.

Робота розрахована на 2 години

Для виконання завдання в навчальних аудиторіях використовуйте браузер Mozilla Firefox

Якщо він не встановлений, завантажте portable версію браузера.

Файл можна завантажити за цим посиланням:

Mozilla Firefox

Якщо для виконання роботи в навчальних аудиторіях Вам потрібен плагін Adobe Flash Player, завантажте архів за цим посиланням:

Flash Player (plugin for Firefox portable)

Файли, які знаходяться в ньому, скопіюйте в папку:

...\FirefoxPortable\Data\plugins

Перед виконанням роботи рекомендується ознайомитися з теоретичним курсом:

Теорія

HTML (англ. HyperText Markup Language - мова розмітки гіпертексту) - мова розмітки документів у Всесвітній павутині.

HTML разом із CSS та cкриптингом — це три основні технології побудови веб-сторінок.[1]

HTML впроваджує засоби для:

створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
отримання інформації із Всесвітньої мережі через гіперпосилання;
створення інтерактивних форм;
включення зображень, звуку, відео, та інших об'єктів до тексту.

Основою HTML є теги. Вони використовуються для створення структури документу, надання окремому об’єкту певних властивостей, вставлення малюнків, створення гіперпосилань тощо.

Наприклад:

Для того, щоб розмістити текст по центру Веб-сторінки, треба перед ним вставити тег <center>
Щоб зробити текст заголовком першого рівня, треба перед ним встаити тег <h1>
Щоб зробити розрив рядка, використовується тег <p>
Для створення жирного тексту використовується тег <b>

Теги поділяються на:

теги структурної розмітки
теги візуальної розмітки
теги розмітки гіпертексту

За написанням теги поділяються на:

парні
непарні

Парні складаються із двох частин: початкового тегу та кінцевого. Наприклад: <center>...</center>

Дані, які будуть міститися між цим тегом будуть знаходитися по центру Веб-сторінки.

Непарні складаються лише з початкового тегу. Наприклад:

<br> - перехід на новий рядок.

<p> - початок нового параграфу.

Теги можуть мати атрибути, які вказують на окремі параметри певної властивості елемента. Розглянемо тег <body>. Цей тег використовується для позначення меж вмісту веб-сторінки. Тобто весь текст та малюнки, які користувач може побачити на будь-якій веб-сторінці, знаходяться в межах тегу <body>. Атрибути записуються всередині тега, наприклад:

…..

</body>

В даному випадку тег <body> має атрибут “bgcolor”, який визначає фон всієї веб-сторінки. В цьому прикладі фон веб сторінки матиме сірий колір.

Структура Веб-сторінки створюється в текстовому редакторі. Всі веб-сторінки, а також інші елементи краще розміщувати в спеціально-твореній папці. Код краще створювати в текстовому редакторі “Блокнот”. Для підготовки введення HTML-коду необхідно:

Створити текстовий документ. Ім’я написати латинськими літерами без пробілів.
Змінити розширення “.txt” на “.html”. Після цього документ за замовчуванням створений документ буде відкриватися за допомогою браузера.
Відкрити документ за допомогою браузера.
Відкрити документ за допомогою програми “Блокнот” (за допомого контекстного меню, пункту “Открыть с помощью”).

Після цих дій у нас буде відкритий один файл за допомогою двох програм. В одній ми будемо змінювати код, у іншій - переглядати результат наших дій.

Після внесення правок в код у блокноті, треба натиснути комбінацію клавіш ctrl+S, це збереже внесені зміни.

Щоб переглянути результат у браузері, треба перейти до вікна браузера та натиснути клавішу F5, це поновить вміст веб-сторінки та відобразить зміни, які були внесені за допомогою блокноту.

Завдання

Створити веб-сторінку. Сторінка повинна мати фоновий колір або фонове зображення, складатися з п’яти розділів - текст, списки, малюнки, відео, таблиці - кожен з яких містить відповідні об’єкти. Вгорі сторінки створити зміст у вигляді гіперпосилань, при на тисненні на які, сторінка прокручувалася б до відповідних розділів.

Методичні вказівки

1. Створити на робочому столі папку “Web-page Ivanov” (написати своє прізвище).

2. В папці створити текстовий документ (програма блокнот), назвати його “index.txt”. Змінити розширення “.txt” на “.html”. Якщо в імені файлу розширення не видно, треба його увімкнути. Для цього зайдіть в будь-якій папці в меню Сервис-Свойства папки-вкладка Вид-увімкнути пункт Показывать скрытые файли и папки.

3. Відкрити файл одночасно двома програмами - браузером (використовуйте Mozilla Firefox) та блокнотом (в контекстному меню виберіть “Открыть с помощью - Блокнот”).

4. В блокноті вставити основніі теги будь-якого html-документа, які вказуватимуть, що даний файл - Веб-сторінка: <html> </html> (рис. 1).

Рис. 1. Розміщення тегу <html>

Всі інші теги розміщуватимуться в цьому контейнері.

5. Вставити тег <title></title>, між яким написати дисципліну, номер практичної роботи та Ваше прізвище ім’я та по батькові (Рис. 2)

Рис. 2. Тег <title>

Ця інформація буде відображатися на рядку заголовку браузеру та на вкладці (якщо браузер підтримує вкладки).

6. Вставити тег <body>. Вміст сторінки повинен знаходится в межах цього контейнеру. Цей тег може мати наступні параметри (атрібути):

alink - колір активного посилання

background - фонове зображення для сторінки

bgcolor - фоновий колір веб-сторінки

bgproperties - буде чи ні прокручуватися фон сторінки разом з прокручуванням самої сторінки

bottommargin - відступ від нижнього краю вікна браузеру до контенту

leftmargin - відступ від лівого та правого краю вікна браузеру до контенту

link - колір посилань на веб-сторінці

scroll - показувати чи ні полоси прокрутки

text - колір тексту на сторінці

topmargin - відступ від верхнього краю вікна браузеру до контенту

vlink - колір посилань, які користувач вже відвідав

Фоном може бути або малюнок, або фоновий колір. Виберемо колір. Для цього скористаємось Таблицею безпечних кольорів. Наприклад, виберемо колір CC9999. Колір тексту на сторінці - 330000 (Рис. 3).

Рис. 3. Тег <body>

Також в тег <body> можна додати параметри leftmargin та rightmargin, присвоїти їм значення, наприклад, 100. Це кількість пікселів, які будуть відступатися від лівого та правого країв документа до початку тексту:

leftmargin="100" rightmargin="100"

7. Створимо зміст. Слово “Зміст” вставимо в контейнер <h1>, щоб виділити його. Напишемо назви заголовків (5 штук) у стовпчик. Щоб кожне нове слово починалося з нового рядка, треба позначити його тегом <p>. Під змістом вставити горизонтальну лінію тегом <hr> (Рис. 4).

Рис. 4. Створення змісту. Теги <h1>, <p> та <hr>

8. Вставити заголовок “Текст”. Вставити три довільних абзаци тексту. Для відокремлення абзаців один від одного скористайтеся як тегом <p>, так і тегом <br>. Зробіть висновок в чому різниця.

Вставити горизонтальну лінію (Рис. 5).

Рис. 5. Створення абзацу з текстом

9. Вставити заголовок “Списки”. Створити два типи списків - нумерований та список з маркерами. Список з маркерами знаходиться в контейнері <ul></ul>, кожен новий пункт списку починається з тегу <li>, тег не є парним, тому закривати його не треба. Нумерований список знаходиться в контейнері <ol></ol>, кожен новий пункт також починається з тегу <li>. В кожному списку зробіть по три пункти. В кінці розділу вставте горизонтальну лінію (Рис. 6).

Рис. 6. Створення списків

10. Вставити заголовок “Малюнки”. Вставити два малюнки - один по центру сторінки, інший по лівому краю.

Завантажте з Інтернету два довільних малюнки назвіть їх image1 та image2. Малюнки краще фізично зберігати в тій же папці, що і веб-сторінку, тому збережіть малюнки в папці “Web-page Ivanov”.

Для розміщення малюнка у веб-сторінці використовується тег <img>. Цей тег має наступні параметри:

Параметр	Опис
absmiddle	Вирівнювання середини зображення по середині рядка
baseline	Вирівнювання зображення по базовій лінії рядка
bottom	Вирівнювання нижньої грані зображення по тексту, що оточує його
left	Вирівнює зображення по лівому краю вікна браузера
middle	Вирівнює середину зображення по базовій лінії рядка
right	Вирівнює зображення по правому краю вікна
texttop	Верхня межа зображення вирівнюється по найвищому текстовому елементу поточного рядка
top	Верхня межа зображення вирівнюється по найвищому елементу поточного рядка

Найбільш популярні параметри - left та right, які створюють обтікання тексту навколо зображення. Щоб текст не прилягав щільно до малюнка, рекомендується в тег додавати параметри hspace та vspace, які задають відстань до малюнка в пікселях.

Для розміщення другого малюнка по центру скористайтеся контейнером <center></center> (Рис. 7).

Рис. 7. Вставлення малюнків за допомогою тега <img>

11. Вставити заголовок “Відео”. На сервісі YouTube знайти будь-яке відео. Натиснути кнопку “Вставка”, скопіювати отриманий код. Перед копіюванням можна задати потрібні параметри (розмір відео-вікна, колір рамки тощо) (Рис.8).

Рис. 8. Отримання коду відео на сервісі YouTube

Вставити отриманий код на свою сторінку, вставити горизонтальну лінію (Рис. 9).

Рис. 9. Вставка коду відео

12. Вставити заголовок “Таблиця”. Створити наступну таблицю:

Рис. 10. Таблиця

Таблиця створюється контейнером <table></table>. Після цього створюється рядок контейнером <tr></tr>. Всередині рядка комірки створюються контейнером <td></td>. Код таблиці показаний на рисунку 11.

Рис. 11. Таблиця

13. Для створення змісту у вигляді гіперпосилань на заголовки, треба спочатку заголовки помітити закладками, на які будуть посилатися гіперпосилання. Ці закладки в html-програмуванні називаються якорями. Щоб позначити текст як якір, треба заключити його в тег <a> та вказати назву якоря (назва може бути довільним словом, обов’язково латинськими літерами без пробілів), використовуючи параметр “name”, наприклад:

<a name=”text”>Текст</a>

Позначити кожен із заголовків якорями (рис. 12).

Рис. 12. Створення якорів

Для створення посилань на якорі, треба текст, який виступатиме у ролі гіперпосилання, заключити в контейнер <a></a>. Щоб вказати назву якоря, на який треба посилатися, використовується параметр “href”, а перед назвою якоря треба поставити знак “#”, наприклад:

<a name=”#text”>Текст</a>

Пункти змісту зробити гіперпосиланнями на якорі (рис. 13).

Рис. 13. Створення гіперпосилань на якорі

14. Відправити роботу на перевірку.

1. Заархівувати свою папку на робочому столі.

2. Відправити архів на адресу sci.Lavr@gmail.com

3. В темі листа написати: "Прізвище, група, № роботи". Листи без правильно оформленої теми перевірятися не будуть.