Основи WEB – дизайну

Автор работы: Пользователь скрыл имя, 01 Апреля 2011 в 11:14, реферат

Описание работы

World Wіde Web (WWW) - глобальна комп'ютерна мережа на сьогоднішній день містить мільйони сайтів, на яких розміщена всіляка інформація.

Окремий документ WWW називають WEB - сторінкою. Звичайно це комбінований документ, що може містити текст, графічні ілюстрації, мультимедійні й інші вставні об'єкти.

Скачать архив (53.88 Кб) Сколько стоит заказать работу?
Файлы: 1 файл

Сам_ГРИШКО_РИО_пров.doc

— 215.50 Кб (Скачать файл)

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

  1. Запустіть текстовий редактор Блокнот (Пуск\Все программы\ Стандартные\ Блокнот).
  2. Уведіть наступний документ:

      <HTML>

      <HEAD>

      <TITLE> Лабораторна робота 4 </TITLE>

      </HEAD>

      <BODY>

      Створення

      Web документа

      </BODY>

      </HTML>

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

      Перед збереженням переконайтеся, що скинуто  прапорець Не показывать расширения для зареєстрованих типів файлів (Пуск\Панель управления\Свойства папки\Вид). У противному разі редактор Блокнот може автоматично додати в кінець імені розширення .txt.

  1. Запустите програму Internet Explorer (Пуск\Программы\Internet Explorer).
  2. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл first.htm.
  3. Подивіться, як відображається цей файл - найпростіший коректний документ HTML. Де відображається вміст елемента TITLE? Де відображається вміст елемента BODY?
  4. Як відображаються слова «Створення» і «Web документа», введені в двох окремих рядках? Чому? Перевірте, що відбувається при зменшенні ширини вікна.

      2. Вивчення прийомів форматування документів html

  1. Відкрийте документ first.htm у програмі Блокнот і збережіть цей документ під ім'ям paragraph.htm (Файл\Сохранить как).
  2. Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.
  3. Уведіть заголовок першого рівня між тегами <H1> і </ H1>.

      <H1>Базові  програмні засоби інформаційних технологій</ H1>

  1. Уведіть заголовок другого рівня, уклавши його між тегами <H2> і </H2>

     <H2> Класифікація програмного  забезпечення </H2>

  1. Введіть окремий абзац тексту, почавши його з тега <P>. Пробіли і символи переводу рядка можна використовувати усередині абзаца довільно.

<P> У залежності від  функцій, що виконуються програмним забезпеченням, його можна розділити на дві групи:

  1. Уведіть тег горизонтальної лінії <HR>.
  2. Уведіть наступні абзаци тексту, почавши їх з тега <P>.

     <P>базове  програмне забезпечення;

     <P>прикладне  програмне забезпечення.

  1. Уведіть тег горизонтальної лінії <HR>.
  2. Продовжіть введення тексту.

     <P> Під базовим програмним  забезпеченням інформаційних  систем розуміється  сукупність програмних  і документальних  програмних засобів  створення й експлуатації системи обробки даних.

     <P>Прикладне  програмне забезпечення  призначене для  рішення конкретних  задач користувача  й організації  обчислювального  процесу.

  1. Збережіть змінений файл paragraph.htm
  2. Запустіть Internet Explorer (Пуск\Программы\Internet Explorer).
  3. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл paragraph.htm.
  4. Подивіться, як відображається цей файл. Установіть відповідність між елементами коду HTML і фрагментами документа, що відображені на екрані.

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

  1. Відкрийте документ first.htm у програмі Блокнот і збережіть під ім'ям link.htm (Файл\Сохранить как).
  2. Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.
  3. Уведіть фразу: Текст до посилання.
  4. Уведіть тег: <А HREF="first.htm">.
  5. Уведіть фразу: Посилання.
  6. Уведіть закриваючий тег </A>.
  7. Уведіть фразу: Текст після посилання.
  8. Збережіть змінений документ link.htm
  9. Запустіть Internet Explorer (Пуск\Программы\Internet Explorer)..
  10. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл link.htm.
  11. Переконайтеся в тому, що текст між тегами <A> і </А> виділений як посилання (кольором і підкресленням).
  12. Клацніть на посиланні і переконайтеся, що при цьому завантажується документ, на який указує посилання.
  13. Клацніть на кнопці Назад на панелі інструментів, щоб повернутися до попередньої сторінки. Переконайтеся, що посилання тепер вважається переглянутим і відображається іншим кольором.

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

      1. Відкрийте документ paragraph.htm у програмі Блокнот і збережіть його з ім'ям format.htm (Файл\Сохранить как).

      2. Задайте форматування тексту, використовуючи  наступні теги й атрибути.

      Після тега <BODY> уведіть тег <BASEFONT SIZE="5" COLOR="BROWN">. Він задає виведення тексту шрифтом, більшим ніж за замовчуванням, і коричневим кольором.

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

      5. У наступному абзаці, після тега <Р> уведіть тег <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.

      6. Завершіть абзац тегом </FONT>.

      7. У наступному абзаці використовуйте  за своїм розсудом парні теги: <B> (напівжирний шрифт), <I> (курсив), <U> (підкреслення}, <S> (викреслювання), <SUB> (нижній індекс), <SUP> (верхній індекс).

      8. У наступному абзаці використайте за своїм розсудом парні теги: <EM> (виділення), <STRONG> (сильне виділення).

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

      10. Запустіть Internet Explorer (Пуск\Программы\Internet Explorer).

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

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

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

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

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

  1. Відкрийте документ first.htm у програмі Блокнот і збережіть його під ім'ям list.htm (Файл\Сохранить как).
  2. Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.
  3. Уведіть текст заголовка:

    <H1>Приклад  упорядкованого списку</H1>

  1. Введіть абзац:

    Метод-орієнтовані  пакети прикладних програм  включають наступні ППП.

  1. Вставте в документ тег <OL TYPE="I">, що починає упорядкований (нумерований) список.
  2. Вставте в документ елементи списку, випереджаючи кожний з них тегом <LI>:

        математичного програмування;

        мережного планування і управління;

        теорії  масового обслуговування;

        математичної  статистики.

  1. Завершіть список за допомогою тега </OL>.
  2. Збережіть отриманий документ під ім'ям list.htm.
  3. Запустіть Internet Explorer (Пуск\ Программы\ Internet Explorer).
  4. Дайте команду Файл\ Открыть. Клацніть на кнопці Обзор і відкрийте файл list.htm.
  5. Вивчіть, як упорядкований список відображається в програмі Internet Explorer, звертаючи особливу увагу на спосіб нумерації, заданий за допомогою атрибута TYPE=.
  6. Поверніться в програму Блокнот і установіть курсор після закінчення введеного списку.
  7. Уведіть текст заголовка:

    <H1>Приклад  неупорядкованого списку</H1>

  1. Введіть абзац:

    Базова  конфігурація комп'ютера  включає чотири пристрої:

  1. Вставте в документ тег <UL TYPE="SQUARE">, що починає неупорядкований (маркірований) список.
  2. Вставте в документ елементи списку, випереджаючи кожний з них тегом <LI>.

        системний блок;

        монітор;

        клавіатуру;

        мишу.

  1. Завершіть список за допомогою тега </UL>. Збережіть документ.
  2. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивиться, як змінився вид сторінки, звернувши увагу на спосіб маркірування, заданий за допомогою атрибута TYPE =.
  3. Поверніться в програму Блокнот і установіть текстовий курсор після закінчення введеного списку.
  4. Уведіть текст заголовка:

    <H1>Приклад  списку визначень</H1>

  1. Введіть абзац:

    Деякі визначення мови HTML

  1. Вставте в документ тег <DL>, що починає список визначень.
  2. Вставте в список слова, значення яких треба визначити, випереджаючи відповідні абзаци тегом <DT>.
  3. Вставте в список відповідні визначення, випереджаючи їх тегом <DD>.

    Браузер - програма перегляду Web-сторінок

    Теги – керуючої конструкції мови HTML

    Контейнер – парний тег зі своїм умістом

  1. Завершіте список за допомогою тега </DL>. Збережіть документ.
  2. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як виглядає при відображенні Web-сторінки список визначень.

      6. Створення зображення і використання його на web-сторінці

  1. Створіть у Word рисунок і скопіюйте його в буфер обміну, для чого виділите рисунок і скористайтеся командою Правка\Копировать або контекстне меню\Копировать.
  2. Відкрийте програму Paint: (Пуск\Программы\Стандартные\Paint). Уставте скопійований малюнок.

             

  1. Виберіть  кольори фону для тексту й іншої  частини рисунка. Залийте рисунок фоновим кольором.
  2. Збережіть малюнок під ім'ям pic1.gif (у форматі GIF).
  3. Відкрийте документ paragraph.htm у програмі Блокнот і збережіть його під ім'ям picture.htm (Файл\Сохранить как).
  4. Після заголовка другого рівня (теги <H2> </H2>) уведіть тег <IMG SRC="pic1.gif" ALIGN="BOTTOM">.
  5. Збережіть змінений документ picture.htm.
  6. Запустіть Internet Explorer (Пуск\Программы\ Internet Explorer).
  7. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл picture.htm. Подивіться на документ, який з'явився на екрані.
  8. Поверніться в програму Блокнот і змініть значення атрибута: ALIGN="TOP". Збережіть файл під тим же ім'ям.
  9. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вид сторінки при зміні атрибутів.
  10. Поверніться в програму Блокнот і змініть значення атрибута: ALIGN="LEFT". Збережіть файл під тим же ім'ям.
  11. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вид сторінки при зміні атрибутів.
  12. Поверніться в програму Блокнот і додайте в тег <IMG> атрибути: HSPACE=40 VSPACE=20. Збережіть файл під тим же ім'ям.
  13. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вид сторінки при зміні атрибутів.

Информация о работе Основи WEB – дизайну