- •Міністерство освіти і науки україни
- •Вступ Методичні вказівки призначені для проходження студентами денної форми навчання навчально-комп`ютерної практики.
- •Частина I Теоретичні відомості до теми «Основи Web-дизайну»
- •Програми для створення|створіння| html - файлів.
- •Теги і структура html-документа
- •Межі документа.
- •Html - документ умовно можна розбити на три частини|частки|:
- •Шаблон html-документа.
- •Практичне заняття №1. Тема: Мова html. Сумісне застосування програм Блокнот та ie для створення сайту. Структура html-файлів. Обов’язкові теги, атрибути. Заголовок документа.
- •Практична частина
- •Практичне заняття №2 Тема: Текстові блоки мови html.
- •Текстові блоки
- •Створення|створіння| абзаців і рядків
- •Атрибуты: width – визначає довжину лініі(рядку) в пікселах або відсотках від ширини вікна браузера; size – визначає товщину лініі в пикселах.
- •Практичне заняття №3 Тема: Форматування тексту.
- •Теоретичні відомості
- •Практична частина
- •Практичне заняття №4. Тема: Створення різноманітних списків.
- •Теоретичні відомості
- •Ненумеровані списки.
- •Нумеровані списки
- •Практичне заняття №5. Тема: Створення таблиць.
- •Теоретичні відомості
- •Практичне заняття №6 Тема: Зображення. Зв’язування файлів за допомогою гіперпосилання. Гіперпосилання –текст та гіперпосилання - малюнок.
- •Теоретичні відомості
- •Гіперпосилання та якоря
- •Крокодил Корней Чуковский
- •Содержание
- •3. Завдання
- •Практичне заняття №7 Тема: Фрейми.
- •Теоретичні відомості
- •Елементи для створення і роботи з фреймами:
- •Створення фреймів
- •Як завантажувати у фрейми цілі сторінки
- •Література
Практичне заняття №3 Тема: Форматування тексту.
Мета: Ознайомити студентів з тегами фізичного та логічного форматування тексту.
Теоретичні відомості
Форматування тексту.
HTML допускає два підходи до шрифтового виділення фрагментів тексту. З одного боку, можна прямо вказати, що шрифт на деякій ділянці тексту повинен бути жирним або похилим, тобто змінити фізичний стиль тексту. З іншого боку, можна позначити деякий фрагмент тексту який має деякий відмінний від нормального логічний стиль, залишивши інтерпретацію цього стилю браузеру.
Під фізичному стилем прийнято розуміти пряму вказівку браузеру на модифікацію поточного шрифту.
Колірна гама.
Колірна гама HTML-документа визначається наступними атрибутами парного тега <BODY>:
bgcolor — задає колір тла документа.
text —визначає колір тексту документа.
Кольори задаються по імені кольору або його шестнадцатиричним кодом . Розберемо приклад:
bgcolor=#FFFFFF або bgcolor= «white»
Результат - колір тла білий.
Крім того, тег <BODY> містить атрибут
background– задає фон тла документа у вигляді картинки-графічного файлу з типом .gif або .jpg(.jpeg) при умові розташування графічного файлу в папці з основним html-файлом. Крім того треба враховувати роздільну здатність графічного файлу, якщо вона невелика, у порівнянні з розміром монітору, то картинка буде повторюватися декілька разів на екрані, що може не дуже гарно виглядати.
Увага! Імена кольорів, а також теги з їх призначенням, атрибутами і прикладами можете переглянути у файлі Теги(TAGS), що розташован на робочому столі.
Завдання:
1.Внесіть зміни до файлу «Заголовки.html», за допомогою тегу <BODY> в якості кольору тла сторінки оберіть –блакитний, текст-жовтого кольору.
Теги дозволяють управляти: розміром шрифта, його кольором та гарнітурою, лише з тою різницею, що тег
BASEFONT – визначає основной шрифт для всієї сторінки документа, одинарний, а тег
FONT- змінює параметри шрифту для окремого абзаца тексту, парний тег.
Тому, якщо ви бажаєте, щоб весь документ мав однаковий шрифт, використовуйте тег <BASEFONT> і тільки окремиі абзаци виділяйте тегом <FONT>.
Тег <BASEFONT> має знаходиться в заголовку документа, між тегами <head>.
Атрибути тегів:
SIZE – визначає розмір шрифту. Можливі значення: число від 1 до 7; – Розмір шрифту тексту можна змінювати явно і неявно.
Явно: SIZE =5, а відносний розмір із вказівкою знака, обчислюється шляхом додавання з базовим розміром, наприклад SIZE =+2, до того розміру який вже встановлений. Стандартний розмір=3, колір –чорний на білому фоні.
COLOR – визначає кольори тексту. Задається або у шестнадцатиричной системі, або одним з 16 базовых цветов.
FACE – визначає використовуваний шрифт: наприклад Arial
Використовуючи тег <FONT> з атрибутом SIZE та атрибутом COLOR наприклад,
<FONT SIZE ="+4" color=”red” >Здрастуйте! </FONT> слово «Здрастуйте» буде виведено на екран шрифтом червоного кольору, збільшеним на 4 позиції в порівнянні зі стандартним, тобто=7.
Змінювати на сторінці параметри шрифту можливо багаторазово за допомогою тега </FONT>. Змінювати можна окремі характеристики тексту, необов`язкого вказувати усі атрибути.
Крім вже вказаних тегів форматування шрифту є ще групи тегів, які змінюють шрифт.
Теги фізичного форматування тексту(шрифту): Усі теги парні !
I Виділяє текст курсивом
B Виділяє текст жирним шрифтом
U Виділяє текст підкресленим
S (STRIKE) Виділяє текст перекресленим
BIG Відображає текст збільшеним шрифтом (щодо поточного)
SMALL Відображає текст зменшеним шрифтом (щодо поточного)
SUP Дозволяє ввести (верхній індекс)
SUB Дозволяє ввести (нижній індекс)
TT Відображає текст моноширинным шрифтом
Наприклад, усе, що перебуває між мітками <B> і </B>, буде написано жирним шрифтом. Текст між мітками <I> і </I> буде написаний курсивом. Вказані теги можливо комбінувати, але не треба порушувати їхню вкладеність.
Наприклад: <B> <I>вивчення тегів форматування </I> </B>, зовнє виділення жирним шрифтом, а внутрі-курсив.
Приклад: H2O за допомогою тегів: Н<SUB>2</SUB>O
Завдання1:
Наберіть найменування усіх шрифтів, з нового рядку, за допомогою відповідних тегів: <I> Курсив </I>
<B> полужирний </B> і так далі.
Теги логічного форматування тексту(шрифту)(парні)
EM Використається для більш посиленого логічного виділення тексту (курсивом)
STRONG Посилене виділення тексту (жирним)
CODE, SAMP Оформляють текст як формулу або програмний код, моноширинним шрифтом.
Теги логічного форматування також введіть на свою сторінку.
Теги вирівнювання (парні)
Вирівнювати можна не тільки окремі абзаци чи заголовки, а цілу групу окремих елементів сторінки, якщо помістити їх між тегами:
<center> по центру</ center>
<left> по лівій межі</left >
<right> по правій межі </right >
Завдання2:
Вирівняйте теги фізичного форматування по центру сторінки, а теги логічного форматування –по правій межі сторінки.