Завдання 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> Абзац
&nbsp Абзацний відступ
  <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. Зробіть у тексті невеличкі відступи (відступ для першого рядка). Для цього розташуйте конструкцію &nbsp перед словами Мова..., Синтаксис..., Тег..., Непарні. Виконайте команди: Файл ® Сохранить, Вид ® Обновить.Прогляньтестворену Веб-сторінку.

5. Скориставшись тегом <p align= >, розбийте створений вами текст на чотири абзаци з вирівнюванням: ліворуч, по центру, праворуч, ліворуч. Виконайте команди: Файл ® Сохранить, Вид ® Обновить.Прогляньтестворену Веб-сторінку. Зробіть висновки з приводу зміни вигляду Веб-сторінки.

6. Додайте перед тегом четвертого абзацу <p align= > тег відступу<dd>. Виконайте команди: Файл ® Сохранить, Вид ® Обновить.Прогляньтестворену Веб-сторінку. Зробіть висновки з приводу зміни вигляду Веб-сторінки.

 

Завдання 6. Друк документів.

1. Виведіть вміст створених вами документів на друк.

 

МЕТОДИЧНІ ВКАЗІВКИ ДО ЛАБОРАТОРНОГО ЗАНЯТТЯ

№ 6.2

Тема заняття:Створення гіперпосилань, зображень у web-документі.

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