
- •Міністерство освіти і науки україни
- •Вступ Методичні вказівки призначені для проходження студентами денної форми навчання навчально-комп`ютерної практики.
- •Частина I Теоретичні відомості до теми «Основи Web-дизайну»
- •Програми для створення|створіння| html - файлів.
- •Теги і структура html-документа
- •Межі документа.
- •Html - документ умовно можна розбити на три частини|частки|:
- •Шаблон html-документа.
- •Практичне заняття №1. Тема: Мова html. Сумісне застосування програм Блокнот та ie для створення сайту. Структура html-файлів. Обов’язкові теги, атрибути. Заголовок документа.
- •Практична частина
- •Практичне заняття №2 Тема: Текстові блоки мови html.
- •Текстові блоки
- •Створення|створіння| абзаців і рядків
- •Атрибуты: width – визначає довжину лініі(рядку) в пікселах або відсотках від ширини вікна браузера; size – визначає товщину лініі в пикселах.
- •Практичне заняття №3 Тема: Форматування тексту.
- •Теоретичні відомості
- •Практична частина
- •Практичне заняття №4. Тема: Створення різноманітних списків.
- •Теоретичні відомості
- •Ненумеровані списки.
- •Нумеровані списки
- •Практичне заняття №5. Тема: Створення таблиць.
- •Теоретичні відомості
- •Практичне заняття №6 Тема: Зображення. Зв’язування файлів за допомогою гіперпосилання. Гіперпосилання –текст та гіперпосилання - малюнок.
- •Теоретичні відомості
- •Гіперпосилання та якоря
- •Крокодил Корней Чуковский
- •Содержание
- •3. Завдання
- •Практичне заняття №7 Тема: Фрейми.
- •Теоретичні відомості
- •Елементи для створення і роботи з фреймами:
- •Створення фреймів
- •Як завантажувати у фрейми цілі сторінки
- •Література
Практична частина
1.Завантажити в програми Блокнот і Internet Explorer. Відкрийте свій HTML-файл. Відкрити файл TAGS, розташований на робочому столі і відобразити на єкрані палітру кольорів для подальшої роботи, згорнути файл.
2.Введіть наступний HTML-код:
<HTML>
<HEAD>
<TITLE>Моя перша сторінка</TITLE>
</HEAD>
<BODY BGCOLOR="darkblue">
<FONT SIZE="2" COLOR="lightblue"> <I><B><CENTER> Ласкаво просимо! Це моя перша сторінка! </B></I></CENTER></FONT>
</BODY>
</HTML>
3.Завантажити збережений файл у браузері.
Самостійно: підберіть колірну гаму або зображення для своєї сторінки. Збережіть файл з іменем «Про себе».
Коментарі позначають|значать| фрагмент невиконуваного коду і розташовуються між групами символів <!-- і -->. Наприклад, на екрані не відображатимуться|відображуватимуться| наступні|слідуючі| елементи: <!-- Коментар, що займає|позичає,посідає| один рядок -->
Практичне заняття №4. Тема: Створення різноманітних списків.
Мета: Навчити студентів створювати різноманітні списки.
Теоретичні відомості
У HTML передбачені широкі можливості для створення списків. З їх допомогою можна полегшити сприйняття матеріалу і зробити сторінки більш інформативними. Існує можливість створювати списки трьох видів:
впорядковані (нумеровані) – елементи автоматично нумеруються, з їх допомогою можна описувати процеси, що складаються з ряду послідовних етапів або упорядковувати послідовності елементів по якому-небудь критерію,
ненумеровані (маркировані) – напроти кожного елементу поміщається маркер, використовуються в тих випадках, коли порядок проходження елементів не має значення.
списки визначень (глосарії) – використовуються, якщо потрібно дати визначення термінів, як, наприклад в тлумачному словнику.
Теги:
<UL> Створює невпорядкований список
<OL> Створює нумерований список
<LH> Створює заголовок списку
<LI> Створює елемент усередині OL або UL
<MENU>, <DIR> Створює невпорядкований список, подібний UL
<DL> Відкриває і закриває список визначень
<DT> Створює термін в списку визначень усередині елементу DL
<DD> Cоздает визначення терміну усередині елементу DL
За бажанням можна комбінувати різні типи списків, а також вкладати їх один в одного незалежно від того, до одного або до різних типів вони відносяться. Якщо один з елементів нумерованого списку, у свою чергу, також є списком, причому ненумерованим. Має сенс помістити маркірований список в нумерований. Для вкладених ненумерованих списків використовуються різні маркери, що є стандартною установкою для Internet Explorer.
Ненумеровані списки.
Текст, розташований усередині парного тега<UL>, сприймається як ненумерований список. Кожний новий елемент списку варто починати з тега<LI>. Наприклад, щоб створити от такий список:
весна
літо
осінь
зима
необхідний ввести такий HTML-код:
<UL>
<LI> весна
<LI> літо
<LI> осінь
<LI> зима
</UL>
Зверніть увагу: тег <LI> є одинарним!.
Нумеровані списки
Нумеровані списки влаштовані точно так само, як ненумеровані, тільки замість маркерів, що виділяють новий елемент, використаються цифри (арабськи або римськи) чи латинськи букви (великі або малі).
Приклад:
<OL>
<LI>березень
<LI>квітень
<LI>травень
</OL>
вийде такий список:
березень
квітень
травень
Тип нумерації задається атрибутом тега <OL type=>, який приймає одне з значень:
A – нумерація великими англійськими літерами;
а - нумерація маленькими англійськими літерами;
I - нумерація великими римськими цифрами;
і - нумерація маленькими римськими цифрами;
1- нумерація арабськими цифрами;
ПРАКТИЧНА ЧАСТИНА
1.Завантажити програми «Блокнот» і «Internet Explorer». Відкрийте свій HTML-файл.
2. Самостійно:
2.1. Створіть 6 різних списків:
Ненумерований – мої улюблені предмети.
Нумеровані (з різним типом нумерації):
- Тропічні фрукти
Пори року
Мої друзі
Породи собак
Мої улюблені фільми.
2.2. Створити ненумерований список «Цвета радуги», в якому
Заголовок вікна – « неупорядоченный список»
Фон сторінки повинен бути чорного кольору
Кожний з кольорів відображається своїм «рідним кольором»:
красный
оранжевый
желтый
зеленый
голубой
синий
фиолетовый
2.3. Створити документ, використовуючи вкладені списки, який матиме наступний вигляд:
2.4. Створити список визначень, який має наступний вигляд:
Породы собак
Шотландская овчарка (шелти)
Небольшая дружелюбная собака, немного напоминающая колли. Выведена на Шотландских островах. Использовалась для выпаса овец.
Бассет-хаунд
Собака средних размеров, очень дружелюбная. Отличается большими висячими ушами и удрученным выражением «лица».