Завдання 5. Форматування абзаців.

Зміст лабораторного заняття

1. Початок роботи. Створення та збереження файлів.

2. Завантаження файлів із розширенням html.

3. Створення простого документа HTML.

4. Створення тексту Веб-сторінки.

5. Форматування абзаців.

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

Завдання та порядок їх виконання

Завдання 1. Початок роботи. Створення та збереження файлів.

1. У папці ПрізвищеГрупа*створіть папку гіпер*; зайдіть у папку.

2. Завантажте редактор Блокнот.

3. Збережіть порожній документ з ім’ям простий.htmlу папці гіпер*. Під час

збереження зверніть увагу на Тип файла: Все файлы (рис. 1).

4. Зверніть увагу на тип кодування тексту, чисел та спеціальних символів,

який буде використовуватися в документі.

5. Закрийте Блокнот.

Рис. 1. Збереження файла

6. Перегляньте папку гіпер*. Зверніть увагу на наявність у папці файла

простий.html. Коли файл має ім’я простий.html.txt, це означає, що ви

неправильно виконали пункт 1 і вам необхідно повторити процедуру

збереження.

Завдання 2. Завантаження файлів із розширенням html.

1. Завантажте файл простий.html. Ви побачите пусту сторінку браузера

Internet Explorer. Закрийте браузер.

2. Завантажте браузер Internet Explorer. Виконайте команди Файл

Открыть. Натисніть кнопку Обзор,знайдіть створений вами файл

простий.html і завантажте його.

3. У програмі Internet Explorer виконайте команди Вид  Просмотр HTML

– кода(або залежно від версії Internet Explorer - Страница ► Просмотр

HTML–кода), можна через контекстне меню. У результаті ви знову

побачите редактор Блокнот.

Завдання 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–

сторінки

№ Теги Призначення

1 <html> </html> Початок і кінець документа

2 <head> </head> Область заголовка документа

3 <p align= > Визначення виду вирівнювання

4 <body bgcolor= > Визначення кольору фону або чогось іншого

5 <img src= > Вставлення графічного об’єкта

6 <font face= > Визначення шрифту

7 <body> </body> Зміст документа

8 <p></p> Абзац

9 &nbsp Абзацний відступ

<i></i> Форматування тексту курсивом

11 <a href= > Гіперпосилання на інший файл

12 <table> </table> Початок (кінець) таблиці

13 <!> Створення коментарю

14 <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>.

Виконайте команди: Файл  Сохранить, Вид  Обновить. Прогляньте

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

сторінки.

Поиск по сайту: