Створення web-документів

Створення Web-документів засобами HTML.

Автономні Web-документи використовують мову HTML (мова розмітки гіпертексту). Гіпертекст. тобто розширений текст, включає додаткові елементи: ілюстрації, посилання, вставні об'єкти. Керуючі конструкції мови HTML називаються тегами і вставляються безпосередньо в текст документа. Всі теги полягають в кутові дужки <…>. Парні теги закінчуються дужками .

Є два способи формування Web -документів:

Вправа 1. Створення простейшейWeb-сторінки.

2. Введіть наступний документ:

Заголовокдокумента

3. Збережіть цей документ під ім'ям first .htm.

4. Запустіть програму Internet Explorer (Пуск - Програми - Internet Explorer).

5. Дайте команду Файл - Відкрити. Клацніть на кнопці Обзор і відкрийте файл first .htm.

6. Подивіться, як відображається цей файл - найпростіший коректний документ HTML. Де відображається вміст елемента TITLE. Перевірте, що відбувається при зменшенні ширини вікна.

У цій вправі ми створили найпростіший документ HTML. Ми познайомилися з особливостями форматування документів HTML і їх відображення за допомогою обозревателяInternetExplorer.

Вправа 2. Вивчення прийомів форматування абзаців.

1. Якщо це вправа виконується не відразу після попереднього, відкрийте документ first .htm в програмі Блокнот.

3. Введіть заголовок першого рівня, уклавши його між тегами і .

4. Введіть заголовок другого рівня, уклавши його між тегами і .

5. Введіть окремий абзац тексту, почавши його з тега

. Прогалини і символи перекладу рядка можна використовувати всередині абзацу довільно.

6. Введіть тег горизонтальної лінійки

.

7. Введіть ще один абзац тексту, почавши його з тега

.

8. Збережіть цей документ під ім'ям paragraph .htm.

9. Відкрийте браузер Internet Explorer.

10. Дайте команду Файл-Відкрити. Відкрийте файл paragraph .htm.

11. Подивіться, як відображається цей файл. Установіть відповідність між елементами коду HTML і фрагментами документа, відображеними на екрані.

У цій вправі ми створили документ HTML з розміткою абзаців. Ми визнач як впливають теги HTML на відображення відповідних частин документа

Вправа 3. Створення гіперпосилань.

1. Відкрийте документ first .htm в програмі Блокнот.

2. Видаліть весь текст, що знаходиться між тегами і . Текст, який буде вводитися в наступних пунктах цієї вправи, необхідно помістити після тега .

3. Введіть фразу: Текст до посилання.

4. Введіть тег. .

6. Введіть закриває тег .

7. Введіть фразу: Текст після заслання.

8. Збережіть документ під назвою link .htm.

9. Відкрийте браузер Internet Explorer.

10. Дайте команду Файл - Відкрити. Відкрийте файл link .htm.

У цій вправі ми створили документ НТМL містить гіперпосилання. Ми побачили, як гіперпосилання відображаються в документі, і навчилися користуватися ними.

Вправа 4. Створення зображення і іспользованіеего на Web-сторінці

1. Відкрийте програму Paint (Пуск »Програми» Стандартні »Paint). Задайте розміри нового малюнка, наприклад 50x50 точок (Малюнок> Атрибути).

2. Виберіть червоний колір переднього плану і зелений колір фону. Залийте малюнок фоновим кольором.

3. Інструментом Кисть нанесіть довільний червоний малюнок на зелений фон.

4. Збережіть малюнок під ім'ям pic1.gif (в форматі GIF).

5. Дайте команду Малюнок - Атрибути. Встановіть прапорець Використовувати прозорий колір фону. Клацніть на кнопці Вибір кольору і виберіть зелений колір, вже використаний на малюнку в якості фонового.

6. Збережіть малюнок ще раз під ім'ям pic2.gif (в форматі GIF) і закрийте програму Paint.

7. Якщо це вправа виконується не відразу після попереднього, відкрийте документ first.htm в програмі Блокнот.

8. Видаліть весь текст, що знаходиться між тегами і . Текст, який буде вводитися в наступних пунктах цієї вправи, необхідно помістити після тега .

9. Введіть текст (протяжністю 4 - 5 рядків) і встановіть текстовий курсор в його початок.

10. Введіть тег

Створення web-документів
.

11. Збережіть документ під назвою picture.htm.

12. Відкрийте браузер Internet Explorer (Пуск »Програми» Internet Explorer).

13. Дайте команду Файл »Відкрити. Клацніть на кнопці Обзор і відкрийте файл picture.htm. Подивіться на отриманий документ, звертаючи особливу увагу на зображення.

14. Поверніться в програму Блокнот і змініть значення атрибута: ALIGN = "TOP". Збережіть файл під тим же ім'ям.

15. Поверніться в програму InternetExplorer і клацніть на кнопці Оновити на панелі інструментів. Подивіться, як змінився вигляд сторінки при зміні атрибутів.

16. Поверніться в програму Блокнот і змініть значення атрибута: ALIGN = "LEFT". Збережіть файл під тим же ім'ям.

17. Поверніться в програму InternetExplorer і клацніть на кнопці Оновити на панелі інструментів. Подивіться, як змінився вигляд сторінки при зміні атрибутів.

18. Поверніться в програму Блокнот і додайте в тег атрибути: HSPACE = 40 VSPACE = 20. Збережіть файл під тим же ім'ям.

19. Поверніться в програму InternetExplorer і клацніть на кнопці Оновити на панелі інструментів. Подивіться, як змінився вигляд сторінки при зміні атрибутів.

20. Поверніться в програму Блокнот і змініть ім'я малюнка: SRC = "pic2.git". Збережіть файл під тим же ім'ям.

21. Поверніться в програму InternetExplorer і клацніть на кнопці Оновити на панелі інструментів. Подивіться, як змінився вигляд сторінки при зміні атрибутів. У чому відмінність між двома створеними малюнками?

У цій вправі ми навчилися вставляти зображення в документ. Ми з'ясували, як впливають атрибути тега «IMG» на спосіб відображення зображення. Ми дізналися, як відображаються GIF-зображення, які мають прозорий колір фону.

Вправа 5. Прийоми форматування тексту

1. Якщо це вправа виконується не відразу після попереднього, відкрийте документ first.htm в програмі Блокнот.

3. Введіть тег . Він задає виведення тексту за замовчуванням збільшеним шрифтом і коричневим кольором.

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

.

5. Введіть теги:

.

6. Введіть черговий абзац тексту, закінчивши його тегом .

7. У наступному абзаці використовуйте на свій розсуд парні теги: (Напівжирний шрифт), (Курсив), (Підкреслення), (Викреслення), (Нижній індекс), (Верхній індекс).

8. У наступному абзаці використовуйте на свій розсуд парні теги: <ЕМ> (Виділення), (Сильне виділення), (Текст програми), (Клавіатурний ввід), (Приклад виведення), (Комп'ютерна змінна).

9. Збережіть отриманий документ під ім'ям format.htm.

10. Відкрийте браузер Internet Explorer (Пуск> Програми> Internet Explorer).

11. Дайте команду Файл> Відкрити. Клацніть на кнопці Обзор і відкрийте файл format.htm.

12. Вивчіть, як використані елементи HTML впливають на спосіб відображення тексту.

13. Поверніться в програму Блокнот і змініть документ так, щоб елементи, що задають форматування, були вкладені одна в одну. Збережіть документ під тим же ім'ям.

14. Поверніться в програму Internet Explorer і клацніть на кнопці Оновити на панелі інструментів. Подивіться, як змінився вигляд сторінки.

Ми познайомилися з деякими елементами мови HTML, які можуть використовуватися і для форматування тексту документа. Ми з'ясували, як ці елементи впливають на відображення документа, і дізналися, що такі елементи можна вкладати один в одного.

Вправа 6. Прийоми створення списків

1. Якщо це вправа виконується не відразу після попереднього, відкрийте документ first.htm в програмі Блокнот.

3. Вставте в документ тег

    . який починає упорядкований (нумерований) список.

    4. Вставте в документ елементи списку, випереджаючи кожний з них тегом

  1. .

    5. Завершіть список за допомогою тега

.

6. Збережіть отриманий документ під ім'ям list.htm.

7. Відкрийте браузер Internet Explorer (Пуск> Програми> Internet Explorer).

8. Дайте команду Файл> Відкрити. Клацніть на кнопці Обзор і відкрийте файл list.htm.

9. Вивчіть, як упорядкований список відображається в програмі Internet Explorer. звертаючи особливу увагу на спосіб нумерації, заданий за допомогою атрибута TYPE =.

10. Поверніться в програму Блокнот і встановіть текстовий курсор після закінчення введеного списку.

11. Вставте в документ тег . який починає невпорядкований (маркований) список.

12. Вставте в документ елементи списку, випереджаючи кожний з них тегом

  • .

    13. Завершіть список за допомогою тега . Збережіть документ під тим же ім'ям.

    14. Поверніться в програму Internet Explorer і клацніть на кнопці Оновити на панелі інструментів. Подивіться, як змінився вигляд сторінки, звернувши увагу на спосіб маркування, заданий за допомогою атрибута TYPE =.

    15. Поверніться в програму Блокнот і встановіть текстовий курсор після закінчення введеного списку.

    16. Вставте в документ тег

    , який починає увесь список визначень.

    17. Вставте в список визначаються слова, випереджаючи відповідні абзаци тегом

    .

    18. Вставте в список відповідні визначення, випереджаючи їх тегом

    .

    19. Завершіть список за допомогою тега

    . Збережіть документ під тим же ім'ям.

    20. Поверніться в програму Internet Explorer і клацніть на кнопці Оновити на панелі інструментів. Подивіться, як виглядає при відображенні Web-сторінки список визначень.

    Ми навчилися створювати списки засобами мови HTM L і визначати спосіб їх нумерації (маркування). Ми встановили, як виглядають списки при їх відображенні в браузері Internet Explorer. Ми також навчилися створювати список визначень.

    Вправа 7. Створення таблиць

    1. Якщо це вправа виконується не відразу після попереднього, відкрийте документ first.htm в програмі Блокнот.

    3. Введіть тег .

    5. Перший рядок таблиці повинна містити заголовки стовпців. Визначте її в такий спосіб:

    6. Визначте наступні рядки таблиці, випереджаючи кожну з них тегом і поміщаючи вміст кожного осередку після тега .

    7. Останній рядок таблиці задайте наступним чином:

    8. Завершіть таблицю тегом .

    9. Збережіть документ під назвою table.htm.

    10. Відкрийте браузер Internet Explorer (Пуск> Програми> Internet Explorer).

    11. Дайте команду Файл> Відкрити. Клацніть на кнопці Обзор і відкрийте файл table.htm.

    12. Вивчіть, як створена таблиця відображається в програмі Internet Explorer. звертаючи особливу увагу на вплив заданих атрибутів.

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

    Ми познайомилися з прийомами створення таблиць засобами мови HTML для представлення даних. Ми навчилися створювати таблиці і змінювати їх вид за допомогою атрибутів тегів HTML.

    Вправа 8. Створення опису фреймів

    1. Введіть наступний документ:

    Опісаніефреймов

    3. Збережіть цей документ під ім'ям frames.htm.

    4. Відкрийте браузер Internet Explorer (Пуск> Програми> Internet Explorer)

    5. Дайте команду Файл> Відкрити. Клацніть на кнопці Обзор і відкрийте файл

    6 Вивчіть уявлення кількох створених раніше документів, в окремих фреймах.

    7. Подивіться, що відбувається при зміні ширини вікна оглядача.

    8. Перевірте, чи можна змінити положення країв кадру методом перетягування за допомогою миші.

    1. Запустіть програму FrontPage Express (Пуск - Програми - Microsoft FrontPage).

    2. Введіть у програмі FrontPage Express довільний текст документа. наприклад:

    Челябінський Державний Університет

    Особиста сторінка студента П.І.Б. групи.

    3. За допомогою панелі інструментів форматування отформатируйте текст на власний розсуд. Наприклад, щоб змінити колір фону сторінки, виберіть з рядка меню Формат - Заливка (Format - Background), у вікні задайте потрібний колір (Background).

    4. Для створення таблиці клацніть на кнопці Вставити таблицю (Table - Insert - Table) на стандартній панелі інструментів.

    5. Щоб додати ілюстрацій використовуйте кнопку Вставити зображення (Insert - Picture) на стандартній панелі інструментів.

    6. Дайте команду Файл - Зберегти як (File - Save As) і задайте ім'я файлу wwprob. htm. Підтвердіть збереження зображень, які потребують перетворення формату.

    7. Подивіться на створений вами документ в форматі HTML. для цього клацніть по закладці HTML внизу сторінки.

    8. Відкрийте браузер Internet Explorer.

    9. Відкрийте файл wwprob. htm.

    10. Переконайтеся, що створений документ правильно відображається оглядачем.

    1. Запустіть програму Microsoft Word.

    2. Введіть довільний текст документа.

    3. За допомогою панелі інструментів форматування отформатируйте текст на власний розсуд.

    4. Дайте команду Файл - Зберегти як веб-сторінку, задайте ім'я файлу index htm.

    Схожі статті