Лабораторна робота 5.


Лабораторна робота 5.

Мета – навчитися створювати веб-сторінки.
Програмне забезпечення:
–         операційна система з графічним інтерфейсом – Windows XP або Windows 7;
–         браузер для роботи в мережі Інтернет – Google Chrome або Opera;
–         веб-технологія – мова гіпертекстової розмітки HTML.
ХІД РОБОТИ
Теоретичні відомості
Для виконання лабораторної роботи необхідно повторити матеріал теми 4.

Створення веб-сторінок
Алгоритм роботи з HTML:
1. Створити текстові документи, прописати відповідні теги HTML (таблиця 5.1).
Таблиця 5.1. Теги HTML


Опис
Назва тегу
Призначення
Базові елементи
Тип документа
<HTML></HTML>
Початок і кінець файлу
Ім’я документа
<TITLE></TITLE>
Заголовок файлу
Заголовок
<HEAD></HEAD>
Опис документа, наприклад його ім’я
Тіло
<BODY></BODY>
Зміст сторінки
Структура
Заголовок
<H1></H1>
Стандарт визначається 6 рівнями (<H1>, <H2>, <H3>, <H4>, <H5>, <H6>)
Заголовок з вирівнюванням
<H1 ALIGN=LEFT|CENTER|RIGHT></H1>

Секція
<DIV></DIV>

Секція з вирівнюванням
<DIV ALIGN=LEFT|RIGHT|CENTER></DIV>

Цитата
<BLOCKQUOTE></BLOCKQUOTE>
Виділяється відступом
Зовнішній вигляд
Тип накреслення: напівжирний
<B></B>

Тип накреслення: курсив
<I></I>

Тип накреслення: підкреслений
<U></U>
Часто не підтримується
Верхній індекс
<SUB></SUB>

Нижній індекс
<SUP></SUP>

Форматований
<PRE></PRE>
Збереження формату тексту
Ширина
<PRE WIDTH=”значення”></PRE>
В символах
Центрувати
<CENTER></CENTER>
Як текст, так і графіку
Миготливий
<BLINK></BLINK>

Посилання і графіка
Посилання
<A HREF=”URL”></A>

Посилання на закладку
<A HREF=”URL#***”></A>
В іншому документі
Посилання на закладку
<A HREF=”#***”></A>
В тому самому документі
Посилання на інше вікно
<A HREF+”URL” TARGET=”***|_blank|_self|_parent|_top”></A>

Визначення закладки
<A NAME=”***”></A>

Графіка
<IMG SRC=”URL”>

Вирівнювання
<IMG SRC=”URL” ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

Вирівнювання
<IMG SRC=”URL” ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>

Розмір
<IMG SRC=”URL” WIDTH=”значення” HEIGHT=”значення”>
В крапках
Окантовка
<IMG SRC=”URL” BORDER=”значення”>
В крапках
Відступ
<IMG SRC=”URL” HSPACE=”значення”  VSPACE=”значення”>
В крапках
Додавання об’єкту
<EMBED SRC=”URL”>
Вставлення об’єкту на сторінку
Розмір об’єкту
<EMBED SRC=”URL” WIDTH=”значення”  HEIGHT=”значення”>

Фон і колір
Фонове зображення
<BODY BACKGROUND=”URL”>

Колір фону
<BODY BGCOLOR=”значення”>

Колір тексту
<BODY TEXT=”значення”>

Колір посилання
<BODY LINK=”значення”>

Переглянуте посилання
<BODY VLINK=”значення”>

Активне посилання
<BODY ALINK=”значення”>

Роздільники
Параграф
<P></P>
Закривати елемент часто не об’язково
Вирівнювання
<P ALIGN=LEFT|CENTER|RIGHT></P>

Новий рядок
<BR>
Одиночний перевод рядка
Прибрати вирівнювання
<BR CLEAR=LEFT|RIGHT|ALL>

Горизонтальний роздільник
<HR>

Вирівнювання
<HR ALIGN=LEFT|RIGHT|CENTER>

Товщина
<HR SIZE=”значення”>
В крапках
Ширина
<HR WIDTH=”значення”>
В крапках
Ширина у відсотках
<HR WIDTH=”значення”>
У відсотках від ширини сторінки
Суцільна лінія
<HR NOSHADE>
Без тривимірних ефектів
Списки
Невпорядкований
<UL><LI></UL>
<LI> перед кожним елементом
Компактний
<UL COMPACT></UL>

Тип мітки
<UL TYPE=DISC|CIRCLE|SQUARE>
Для всього списку
<LI TYPE=DISC|CIRCLE|SQUARE>
Цей та наступний
Нумерований
<OL><LI></OL>
<LI> перед кожним елементом
Компактний
<OL COMPACT></OL>

Тип нумерації
<OL TYPE=A|a|I|i|1>
Для всього списку
<LI TYPE=A|a|I|i|1>
Цей та наступний
Список визначень
<DL><DT><DD></DL>
<DT> – термін, <DD> – визначення
Компактний
<DL COMPACT></DL>

Меню
<MENU><LI></MENU>
<LI> перед кожним елементом
Таблиці
Визначення таблиці
<TABLE></TABLE>

Окантовка таблиці
<TABLE BORDER=20></TABLE>

Відстань між комірками
<TABLE CELLSPACING=”значення”>

Доповнення комірок
<TABLE CELLPADDING=”значення”>

Ширина таблиці
<TABLE WIDTH=”значення”>
В крапках
Ширина у відсотках
<TABLE WIDTH=”значення”>
Відсотки від ширини сторінки
Рядок таблиці
<TR></TR>

Вирівнювання
<TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

Комірка таблиці
<TD></TD>
Повинна бути всередині рядка
Вирівнювання
<TD ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

Без перевода рядка
<TD NOWRAP>

Розтягування по колонці
<TD COLSPAN=”значення”>

Ширина
<TD WIDHT=”значення”>
В крапках
Ширина у відсотках
<TD WIDTH=”значення”>
Відсотки від ширини сторінки
Колір комірок
<TD BGCOLOR=”значення”>

Заголовок таблиці
<TH></TH>

Вирівнювання
<TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

Без перевода рядка
<TH NOWRAP>

Розтягування по колонці
<TH COLSPAN=”значення”>

Розтягування по рядку
<TH ROWSPAN=”значення”>

Ширина
<TH WIDTH=”значення”>
В крапках
Ширина у відсотках
<TH WIDHT=”значення”>
Відсотки ширини таблиці
Колір комірок
<TH BGCOLOR=”значення”>

Заголовок таблиці
<CAPTION></CAPTION>

Вирівнювання
<CAPTION ALIGN=TOP|BOTTOM>
Зверху/знизу таблиці
Фрейми
Документ з фреймами
<FRAMESET></FRAMESET>
Замість <BODY>
Висота рядків
<FRAMESET ROWS=…></FRAMESET>
Крапки або відсотки
Ширина колонок
<FRAMESET COLS=…></FRAMESET>
Крапки або відсотки
Окантовка
<FRAMESET FRAMEBORDER=”yes|no”>

Колір окантовки
<FRAMESET BORDERCOLOR=”RED”>

Ширина окантовки
<FRAMESET BORDER=”значення”>

Визначення фрейму
<FRAME>
Зміст окремого фрейму
Документ
<FRAME SRC=”URL”>

Ім’я фрейму
<FRAME NAME=”***”|_blank|_self|_parent|_top

Ширина межі
<FRAME MARGINWIDTH=”значення”>
Права та ліва межі
Висота межі
<FRAME MARGINHEIGHT=”значення”>
Верхня та нижня межі
Постійний розмір
<FRAME NORESIZE>

Окантовка
<FRAME FRAMEBORDER=”yes|no”>

Колір окантовки
<FRAME BOREDRCOLOR=”значення”>

Зміст без фреймів
<NOFRAME></NOFRAME>
Для переглядачів, які не підтримують фрейми
Форми
Визначення форми
<FORM ACTION=”URL” METHOD=GET|POST></FORM>

Відправка файлу
<FORM ENCTYPE=”multipart/form-data”></FORM>

Поле введення
INPUT TYPE=”TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET”>

Ім’я поля
<INPUT NAME=”***”>

Значення поля
<INPUT VALUE=”***”>

Вибраний
<INPUT CHECKED>
Checkboxes, radioboxes
Розмір поля
<INPUT SIZE=”значення”>
В символах
Максимальна довжина
<INPUT MAXLENGTH=”значення”>
В символах
Список варіантів
<SELECT></SELECT>

Ім’я списку
<SELECT NAME=”***”></SELECT>

Число варіантів
<SELECT SIZE=”значення”></SELECT>

Множинний вибір
<SELECT MULTIPLE>

Опція
<OPTION>
Елемент може бути вибраний
Опція за замовчуванням
<OPTION SELECTED>

Введення тексту, розмір
<TEXTAREA ROWS=”значення”  COLS=”значення”></TEXTAREA>

Ім’я тексту
<TEXTAREA NAME=”***”></TEXTAREA>

Розділення на рядки
<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>


2.  Зберегти текстові документи із розширенням *.html або *.htm.
3. Переглянути створені веб-сторінки за допомогою веб-браузера.
4. Внести зміни у веб-сторінки за необхідністю.

Завдання для виконання


1.       Створення вебсторінок

Завдання 1.1. Вебсторінки.

1. Створити вебсторінки за власною темою, використовуючи мову гіпертекстової розмітки HTML.

Орієнтований перелік тем:

1.     Базові послуги мережі Інтернет.

2.     Комунікаційні служби Інтернету.

3.     Хмарні технології.

4.     Застосування хмарних технологій в освіті.

5.     Сучасні інтернет-технології, що використовуються для створення інтернет-сайтів.

6.     Сучасні CMS.

7.     Порівняння Drupal, Joomla та WordPress.

8.     Вебтехнології.

9.     Мова гіпертекстової розмітки HTML.

10.   CSS стилі.

11.   Мова JavaScript.

12.   Мова РНР.

13.   Інтеграція: РНР та Java Script.

14.   Дистанційна освіта.

15.   Електронні підручники.

16.  Власна тема.

2. Вебсторінки, окрім тексту, повинні містити наступні об’єкти:

1)      елементи Вперед та Назад, які забезпечують перехід на наступну та попередню вебсторінки;

2)      зображення, фонове зображення на одній з вебсторінок;

3.     Переглянути вебсторінки, використовуючи веббраузер.

 

Завдання для самостійного виконання

Завдання 1.1. Форми.

1. Створити форму з елементами керування на вебсторінці (наприклад, реєстраційна форма).

 

Запитання для контролю

1.       Як створити вебсторінку, використовуючи мову гіпертекстової розмітки HTML?

2.       Розкрити алгоритм створення кнопок на вебсторінці.

3.       Як додати зображення, фонове зображення на вебсторінки?

Немає коментарів:

Дописати коментар

Підписатися на: Дописи (Atom)