- •Міністерство освіти і науки україни
- •Вступ Методичні вказівки призначені для проходження студентами денної форми навчання навчально-комп`ютерної практики.
- •Частина I Теоретичні відомості до теми «Основи Web-дизайну»
- •Програми для створення|створіння| html - файлів.
- •Теги і структура html-документа
- •Межі документа.
- •Html - документ умовно можна розбити на три частини|частки|:
- •Шаблон html-документа.
- •Практичне заняття №1. Тема: Мова html. Сумісне застосування програм Блокнот та ie для створення сайту. Структура html-файлів. Обов’язкові теги, атрибути. Заголовок документа.
- •Практична частина
- •Практичне заняття №2 Тема: Текстові блоки мови html.
- •Текстові блоки
- •Створення|створіння| абзаців і рядків
- •Атрибуты: width – визначає довжину лініі(рядку) в пікселах або відсотках від ширини вікна браузера; size – визначає товщину лініі в пикселах.
- •Практичне заняття №3 Тема: Форматування тексту.
- •Теоретичні відомості
- •Практична частина
- •Практичне заняття №4. Тема: Створення різноманітних списків.
- •Теоретичні відомості
- •Ненумеровані списки.
- •Нумеровані списки
- •Практичне заняття №5. Тема: Створення таблиць.
- •Теоретичні відомості
- •Практичне заняття №6 Тема: Зображення. Зв’язування файлів за допомогою гіперпосилання. Гіперпосилання –текст та гіперпосилання - малюнок.
- •Теоретичні відомості
- •Гіперпосилання та якоря
- •Крокодил Корней Чуковский
- •Содержание
- •3. Завдання
- •Практичне заняття №7 Тема: Фрейми.
- •Теоретичні відомості
- •Елементи для створення і роботи з фреймами:
- •Створення фреймів
- •Як завантажувати у фрейми цілі сторінки
- •Література
Шаблон html-документа.
Перш ніж приступити до наповнення HTML - документа змістом, є сенс виготовити його «каркас», який повинен містити обов'язкові елементи, без яких він буде неправильно інтерпретований. Приклад простого шаблону:
<HTML>
<HEAD>
<TITLE> Документ </TITLE>
</HEAD>
<BODY>
Тут може знаходитися будь-який тест і (або) малюнок
</BODY>
</HTML>
Шаблон веб-документа відкривається тегом <HTML>, який, як ми вже знаємо, необхідний для кожного HTML-документа. Наступний тег <HEAD>, початкуючий заголовок документа. Заголовок містить елемент TITLE, що вводить назву документа. Заголовок закривається тегом </HEAD>. Далі йде тег <BODY>, після якого поміщається текст (тіло) документа. Тег </BODY> означає кінець тіла, тег </HTML> - кінець всього документа.
Практичне заняття №1. Тема: Мова html. Сумісне застосування програм Блокнот та ie для створення сайту. Структура html-файлів. Обов’язкові теги, атрибути. Заголовок документа.
Мета: Ознайомити студентів з основними тегами та структурою HTML –файлів, складати web-сторінки з використанням тегів.
Практична частина
Увага! У папці «Мои документы» створіть свою папку з ім`ям Практика№групи_Прізвище, в якій ви будете зберігати усі створені вами файли.
Запустіть стандартну програму Блокнот.
У меню «Файл» оберіть команду Сохранить как....
В нижній частині|частці| діалогового вікна збереження|зберігання| файлу, що з'явилося|появилося|, знайдіть поле Тип файла і виберіть в ньому Все файлы.
Оберіть місце на диску для цього файлу у своїй папці|п і клацніть|лусніть| кнопку Сохранить.
У полі «Имя файла» введіть|запровадьте| його ім'я «Каркас.html», тип вказати обов`язково.
Відкрийте програму Блокнот і наберіть текст файлу, який ми з вами назвали «Каркас», потім цей файл збережіть у своїй папці. Даний файл копіюйте при створенні нових файлів.
В Блокноті у файлі Пример1.html написати наступний|слідуючий| HTML–код:
< HTML >
< HEAD >
< TITLE > Простий приклад|зразок| </ TITLE >
</ HEAD >
< BODY>
Це приклад|зразок| HTML–документа студента групи Іваненко Олексія
</BODY>
< /HTML >
7.Файл закрити|зачинити| із|із| збереженням|зберіганням|.
У цьому документі початок|розпочало,зачало| і кінець HTML-документа позначаються|значаться| парою тега|:
< HTML >...< /HTML >,
заголовна частина|частка| обмежена рамками тега| < HEAD >, тіло документа розміщене|ув'язнене| усередині контейнера| <BODY>. Текст «Простий приклад|зразок|», поміщений між тегами <TITLE> |, інтерпретується браузером| як назва Web-сторінки і відображається|відображується| в рядку заголовка вікна броузера|.
8. Запустити програму - браузер| Internet Explorer і відкрийте|відчинити| створений файл Пример1.html подвійним щигликом по імені файлу.
Тепер переглянемо код створеного документа: меню «Вид», «просмотр HTML-кода». Розташуйте два вікна поряд.
Увага! Якщо ми щось змінюємо в нашему *. HTML документі (в блокноті), потім, щоб побачити, як воно виглядає в нашому браузері, треба зберегти файл і не забувати натиснути кнопку "Обновить" в браузері. Якщо зміни не відображаються, це означає, що ви десь щось неправильно написали або забули зберегти документ.