Завдання 3. Створення простого документа HTML.
1. Створіть у редакторі Блокнот наведений нижче документ HTML.
< HTML >
< HEAD > < TITLE> Мова HTML < /TITLE> < /HEAD >
< BODY >
Мова HTML
< /BODY >
< /HTML >
2. У редакторі Блокнот виконайте команди: Файл ® Сохранить. Закрийте Блокнот.
3. У вікні програми Internet Explorer виконайте команди Вид ® Обновить.Якщо ви все виконали правильно, то побачите, по-перше, що зміниться назва у рядку заголовку програми, по-друге, побачите зміст документа, а саме слова: Мова HTML.
4. Таким чином ви створили документ HTML, найпростішу Веб-сторінку. Призначення тегів, якими ви скористалисч, можна побачити в наведеній у завданні таблиці 1.
Завдання 4. Створення тексту Веб-сторінки.
1. Знову виконайте команди Вид ® Просмотр HTML–кода.Прогляньте документ.
2. Після тексту Мова HTML додайте тег <br>, який використовується для того, щоб у Веб-сторінці розпочати новий рядок. А в Блокноті у новому рядку надрукуйте перший рядок тексту:
Мова HTML – це мова гіпертекстової розмітки документів. HTML – Hyper Text Markup Language.
3. У кінці рядку знову надрукуйте тег <br>.
4. У редакторі Блокнот виконайте команди: Файл ® Сохранить. Закрийте файл.
5. У вікні програми Internet Explorer виконайте команди Вид ® Обновить.Прогляньте документ.
6. Наберіть до кінця текст Мова HTML, скориставшись тегом <br>.Повторіть дії п. 4 та 5.
Мова HTML
Мова HTML – це мова гіпертекстової розмітки документів. HTML – Hyper Text Markup Language. Мова HTML призначена не для форматування документа, а для його розмітки. Мова HTML забезпечує опис зовнішнього вигляду Web–сторінки у файлі з розширенням htm.
Синтаксис мови HTML - це набір правил, за якими створюється опис, містить конструкції: елементи і теги. Елементи – це складові частини документа (текст, заголовки, абзаци, таблиці та ін.). Теги (або коди розмітки) – це керівні конструкції мови HTML.
Тег (tag) - дослівно бирка, ярлик. Їх близько 50. Теги розділяють початковий неформатований текст на елементи і бувають двох видів: парні і непарні. Парні (є той, що відкриває і той, що закриває) охоплюють текст, на який розповсюджується їхня дія.
Непарні мають вплив від місця своєї появи до кінця документа або визначають разовий ефект у місці появи. HTML-коди нечутливі до регістру. У документі теги зображуються у вигляді тексту, взятого в дужки <…>. Після та попереду дужок пробіли заборонені. Теги можуть бути звичайними, або містити атрибути, наприклад, < p > - звичайний тег, < p align=left > - тег з атрибутом. У цьому прикладі пробіли дозволяють сприймати тег як звичайний текст. У разі видалення з документа всіх тегів вийде звичайний текстовий документ.
Таблиця 1 -Основні теги, що застосовуються під час створення Web–сторінки
№ | Теги | Призначення |
<html> </html> | Початок і кінець документа | |
<head> </head> | Область заголовка документа | |
<p align= > | Визначення виду вирівнювання | |
<body bgcolor= > | Визначення кольору фону або чогось іншого | |
<img src= > | Вставлення графічного об’єкта | |
<font face= > | Визначення шрифту | |
<body> </body> | Зміст документа | |
<p></p> | Абзац | |
  | Абзацний відступ | |
<i></i> | Форматування тексту курсивом | |
<a href= > | Гіперпосилання на інший файл | |
<table> </table> | Початок (кінець) таблиці | |
<!> | Створення коментарю | |
<title> </title> | Заголовок вікна |
Завдання 5. Форматування абзаців.
1. Створіть заголовок тексту з вирівнюванням по центру. Для цього після тегу <body> перед заголовком Мова HTML поставте тег <H2 align=center>. У цьому випадку Н2 визначає шрифт заголовка. Чим більше число, тім менше розмір букв у заголовку.
2. Визначте у тексті абзац. Для цього поставте після заголовка Мова HTML перед текстом конструкцію <p align=left>, що буде означати вирівнювання тексту ліворуч. Закриваючий тег </p> поставте у кінці тексту перед тегом </body>.
3. Виконайте команди: Файл ® Сохранить, Вид ® Обновить.Прогляньтестворену Веб-сторінку.
4. Зробіть у тексті невеличкі відступи (відступ для першого рядка). Для цього розташуйте конструкцію   перед словами Мова..., Синтаксис..., Тег..., Непарні. Виконайте команди: Файл ® Сохранить, Вид ® Обновить.Прогляньтестворену Веб-сторінку.
5. Скориставшись тегом <p align= >, розбийте створений вами текст на чотири абзаци з вирівнюванням: ліворуч, по центру, праворуч, ліворуч. Виконайте команди: Файл ® Сохранить, Вид ® Обновить.Прогляньтестворену Веб-сторінку. Зробіть висновки з приводу зміни вигляду Веб-сторінки.
6. Додайте перед тегом четвертого абзацу <p align= > тег відступу<dd>. Виконайте команди: Файл ® Сохранить, Вид ® Обновить.Прогляньтестворену Веб-сторінку. Зробіть висновки з приводу зміни вигляду Веб-сторінки.
Завдання 6. Друк документів.
1. Виведіть вміст створених вами документів на друк.
МЕТОДИЧНІ ВКАЗІВКИ ДО ЛАБОРАТОРНОГО ЗАНЯТТЯ
№ 6.2
Тема заняття:Створення гіперпосилань, зображень у web-документі.
Мета навчальна: Набути навичок створення гіперпосилань у Web-документі.