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

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

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

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 – дизайну

Связанные документы

Основы права

Основы аудита

Основы аудита

Основы туризма

Основы гинетики

Основы экономики

Основы полиграфии

Основы маркетинга

Основы маркетинга

Основы маркетинга

Правовые основы ЦБ

Основы менеджмента

Похожие темы

Основы аудита

Основы бизнеса

Основы здоровья