- •Українська інженерно-педагогічна академія
- •1Історія та можливості використання високих інформаційних технологій та програмування при створенні електронних ресурсів
- •Види і форми представлення інформації
- •Структурована інформація
- •Технології гіпертексту
- •Мультимедіа
- •Інтерактивні цифрові мультимедіа
- •2Електронні видання
- •Інформаційна революція й електронне видання
- •Особливості електронних видань
- •Класифікація електронних видань
- •Основні компоненти електронних видань
- •Текстова інформація
- •Напівтонові і кольорові ілюстрації
- •Анімаційна графіка
- •Порівняльний аналіз графічних форматів
- •Відеоінформація
- •Компонування Web-сторінок Проста таблична верстка
- •Вибір дизайн верстки
- •Недоліки табличної верстки
- •Принципи побудови системи навігація
- •Виробництво друкованих і електронних засобів інформації
- •3Технології гіпертекстових видань
- •4Засоби розробки електронних видань
- •1 Спосіб
- •2 Спосіб
- •3 Спосіб
- •Особенности работы с текстом
- •Вставка изображений на Web-страницу
- •Д обавление файлов мультимедіа
- •Сохранение изображений
- •Добавление надписей в изображение
- •Создание значков для предпросмотра изображений
- •Настройка прозрачности
- •Изменение исходного размера изображения
- •Практикум Тема: Створення html- документів
- •Тема: Створення електронних навчально-інформаційних видань. Розробка структури видання
- •Тема: Створення електронних учбово-інформаційних видань. Розробка елементів навігації і оформлення
- •Тема: Обробка і представлення відео- інформації
- •Створити фільм;
- •Тема: Створення навчальних фільмів
- •Перелік посилань
Практикум Тема: Створення html- документів
Позначка заняття: Здобуття практичних навиків при розробці HTML- документів
Порядок виконання роботи:
Увімкнути персональний комп'ютер.
Ознайомитись з електронним ресурсом World Wide Web – всесвітня інформаційна павутина.
Розробити Web- сторінку з заголовком A Simple HTML Document, що містить заголовок першого рівня, перелік, графічний об'єкт – смайлик, та посилання на інформаційний ресурс на сайті http://www.yahoo.com.
У своєму робочому каталозі зробити папку html1.
Знайти на комп’ютері (або самостійно створити за допомогою Paint смайл face.gif дів Рисунок 11) і зкопійовати в цю папку файл.
Рисунок 11 – Web- сторінка 1.html з заголовком A Simple HTML Document
За допомогою текстового редактора Notepad створити файл 1.txt з тегами розмітки сторінки (рис. 12).
Переіменувати 1.txt у 1.html.
За допомогою браузера (Internet Explorer) відкрити 1.html та переконатись у правильності введених тегів. У разі наявності невідповідностей провести їх редагування.
Рисунок 12 – Тегі розмітки 1.html
Розробити Web- сторінку з фоновим малюнком hatch.gif (див. рис. 13).
<HTML> <HEAD><TITLE>Текст на фоні шпалери</TITLE><meta name="Microsoft Border" content="none, default"> </HEAD> <BODY BACKGROUND="hatch.gif"> <H1>Текст на тлі</H1> </BODY> </HTML>
|
|
Рисунок 13 – Тегі розмітки та зовнішній вигляд сторінки в Internet Explorer
Розробити Web- сторінку headers.html, що містить заголовки 3-х рівнів (див. рис. 14).
|
<HTML><HEAD><TITLE>Headers</TITLE><meta name="Microsoft Border" content="none, default"> </HEAD> <BODY> <H1>Заголовок верхнього рівня</H1> <H2>Заголовок другого рівня</H2> <H3 ALIGN=CENTER>Заголовок третього рівня</H3> </BODY></HTML> |
Рисунок 14 – Тегі розмітки та зовнішній вигляд сторінки headers.html
Розробити Web- сторінку black.html (див. рис. 15).
|
<HTML><HEAD><TITLE>Білий текст на чорному тлі</TITLE> <meta name="Microsoft Border" content="none, default"> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <P>Білий текст на чорному тлі</P> </BODY> </HTML> |
Рисунок 15 – Тегі розмітки та зовнішній вигляд сторінки black.html
Розробити Web- сторінку content.html (див. рис. 16).
Рисунок 16 –Тегі розмітки сторінки content.html
Розробити Web- сторінку Вашої спеціальності.
Продемонструвати результати роботи колегам та викладачу.
Закінчити роботові всіх програм.
Контрольні питання:
У чому особливості вікна Internet Explorer у порівнянні з відомими Вам програмами?
За допомогою яких програм можливо створення Web- сторінок у форматі html?
Які параметри абзаців можуть бути визначені за допомогою тега <p>?
Які засоби керування кольором Ви використовували при створенні Web?
Яка інформація виводиться в заголовкові вікна браузера при перегляді html документів?
Скільки рівнів заголовків може бути використано в html?
Які розширення (формати) може мати html Web- сторінка?
Яким чином можна змінити (задати) кольори текстові в документі html?
Яким чином можна задати розмір та розташування малюнків у html?
Яким чином можна помістити в html – документ посилання на ресурс Internet?