- •Міністерство освіти і науки україни
- •Вступ Методичні вказівки призначені для проходження студентами денної форми навчання навчально-комп`ютерної практики.
- •Частина I Теоретичні відомості до теми «Основи Web-дизайну»
- •Програми для створення|створіння| html - файлів.
- •Теги і структура html-документа
- •Межі документа.
- •Html - документ умовно можна розбити на три частини|частки|:
- •Шаблон html-документа.
- •Практичне заняття №1. Тема: Мова html. Сумісне застосування програм Блокнот та ie для створення сайту. Структура html-файлів. Обов’язкові теги, атрибути. Заголовок документа.
- •Практична частина
- •Практичне заняття №2 Тема: Текстові блоки мови html.
- •Текстові блоки
- •Створення|створіння| абзаців і рядків
- •Атрибуты: width – визначає довжину лініі(рядку) в пікселах або відсотках від ширини вікна браузера; size – визначає товщину лініі в пикселах.
- •Практичне заняття №3 Тема: Форматування тексту.
- •Теоретичні відомості
- •Практична частина
- •Практичне заняття №4. Тема: Створення різноманітних списків.
- •Теоретичні відомості
- •Ненумеровані списки.
- •Нумеровані списки
- •Практичне заняття №5. Тема: Створення таблиць.
- •Теоретичні відомості
- •Практичне заняття №6 Тема: Зображення. Зв’язування файлів за допомогою гіперпосилання. Гіперпосилання –текст та гіперпосилання - малюнок.
- •Теоретичні відомості
- •Гіперпосилання та якоря
- •Крокодил Корней Чуковский
- •Содержание
- •3. Завдання
- •Практичне заняття №7 Тема: Фрейми.
- •Теоретичні відомості
- •Елементи для створення і роботи з фреймами:
- •Створення фреймів
- •Як завантажувати у фрейми цілі сторінки
- •Література
Практичне заняття №2 Тема: Текстові блоки мови html.
Мета: Ознайомити студентів з тегами оформленяя текстових фрагментів(блоків).
Текстові блоки
Тут будуть описані елементи оформлення текстових блоків. Типові приклади текстових блоків: абзаци і глави. Для відокремлення одної частини тексту від інших використовуються горизонтальни лінії та переведення курсора на наступний рядок. Елементи в середині текстових блоків
H1,H2,...H6 Використовуються для створення заголовків тексту
P Використовується для створення абзаців.
BR Виконує переведення курсора на наступній рядок
HR Вставляє в текст горизонтальну лінію.
Створення|створіння| абзаців і рядків
Для створення|створіння| абзацу в мові|язиці| HTML використовується тег| <Р>, може бути парним, між двома частинами якого розміщується текст абзацуі після якого додається порожній рядок автоматично. Крім того, абзац не має відступу першого рядка.
Для переходу до нового|переведення,переказу| рядка (примусовий розрив рядка) застосовується тег| <ВR>.
Завдання
1.У програмі «Блокнот» створіть новий файл і збережіть його з|із| ім'ям Пример2.html. Для цього скопіюйте |із| файл Каркас.html і збережіть файл з іменем Пример2.html, напишіть наступний|слідуючий| HTML – код:
<HTML>
<HEAD>
<TITLE>Баллада</TITLE>
</HEAD>
<BODY>
<P>Баллада о двух сестрах</P>
К двум сестрам в терем над водою <BR>
Приехал рыцарь|рицар| молодой.<BR><BR>
Роберт Бернс
</BODY>
</HTML>
2. Запустіть програму-броузер| Internet Explorer(IE) і відкрийте |в файл. Розташуйте на екрані одночасно два вікна – браузера та редактора |, щоб бачити HTML-код файлу і його відображення у вікні браузера|.
Тег <HR> Horisontal Rule, вставляє в текст горизонтальну разділюючу лінію.
Атрибуты: width – визначає довжину лініі(рядку) в пікселах або відсотках від ширини вікна браузера; size – визначає товщину лініі в пикселах.
Теги <Hn > та <P> можуть містити додатковий атрибут
align (від англійського "вирівнювати")може приймати наступні значення:
left – вирівнювання по лівому краю документа.
right - вирівнювання по правому краю документа.
center - вирівнювання по центру документа.
NOSHADE - визначає спосіб закраски лінії як сплошної. Без даного атрибута лінія відображається об`ємною.
COLOR – визначає колір лінії. Атрибут працює тільки в Internet Explorer.
Приклад: <P align =”right”>Абзац з вирівнюванням по правій межі сторінки</P>.
Завдання:
3.У Прикладі№2 накреслити на сторінці 3 різні горизонтальні лінії
( різної довжини, ширини, кольору, виду вирівнювання стосовно меж вікна браузера) у відсотках і пк.
Тег <Hn > (Headers) Заголовки
Використовується для створення заголовків тексту. Взагалі існує 6 рівней заголовків. Заголовки створюються за допомогою парних тегів <Hn>…..</Hn>, де n-номер рівня заголовка. Чим менший номер заголовка тим більше він за розміром. Заголовок є окремим типом абзаца.
За допомогою заголовків можна разбивати текст на рівні за сенсом - розділи та підрозділи.
Атрибут: align – вирівнювання заголовка по горизонталі. Може приймати значения: left, right, center.
Приклад :<H1 align="center">Самий великий заголовок посередині</H1>... <H6>Найменший заголовок</H6>
Завдання
4.Створити усі шість рівнів заголовків, з текстом:
Заголовок 1-го рівня
Заголовок 2-го рівня
…
…
Заголовок 6-го рівня
5.Користуючись різними засобами вирівнювання, кожні 2 види заголовків вирівняти по центру, по правому краю, по лівому краю вікна документа.
6.Збережіть файл у своїй папці з іменем Заголовки.html і перегляньте у вікні браузера.