- •Методичні вказівки до лабораторних робіт
- •Лабораторна робота №1 Вивчення інтерфейсу та функціональних можливостей браузерів Завдання:
- •Лабораторна робота №2. Пошукові каталоги в мережі Інтернет загальні положення
- •Структура пошукових каталогів
- •Стратегія пошуку інформації з використанням пошукових каталогів
- •Рейтингові системи
- •Найбільш відомі пошукові каталоги
- •Завдання до виконання роботи
- •Лабораторна робота №3. Електронні колекції в мережі Інтернет загальні положення
- •Завдання
- •Лабораторна робота №4. Методи пошку інформації в Інтернет Довідкові відомості
- •Завдання
- •Контрольні питання
- •Лабораторна робота №5. Портали мережі Інтернет Довідкові відомості
- •Завдання
- •Контрольні питання
- •Лабораторна робота №6. Робота з електронною поштою
- •Завдання
- •Контрольні питання
- •Лабораторна робота №7. Бібліотечно-бібліографічні ресурси мережі Інтернет Довілкові відомості
- •Завдання
- •2. Завдання
- •3. Зразок виконаної роботи Лабораторна робота №8 Тема:"Управління текстом на web-сторінці"
- •4. Контрольні питання
- •Лабораторна робота №9 Управління кольором та графічними зображеннями на web-сторінці
- •1. Довідкові відомості
- •2. Завдання
- •3. Зразок виконаної роботи
- •4. Контрольні питання
- •Лабораторна робота №10 Використання таблиць на web-сторінках
- •1. Довідкові відомості
- •При створенні таблиці та її елементів використовуються наступні тегі:
- •2. Завдання
- •3. Зразок виконаної роботи
- •4. Контрольні питання
- •Лабораторна робота №11 Створення посилань та багато сторінкових сайтів
- •1. Підключення каскадних стилів css.
- •Колір переднього плану: властивість 'color'
- •Властивість 'background-color'
- •Завдання:
- •Лабораторна робота №13 Використання каскадних стилів css для керування текстом Довідкові відомості
- •1 Управління шрифтом
- •2. Управління текстом.
- •Завдання
- •Лабораторна робота №14. Публікація сайту в мережі інтернет
- •Завдання
1. Підключення каскадних стилів css.
Практично кожен HTML тег має атрибут style, який говорить про те, що до цього тегу застосовується якийся стильовий опис.
Пишеться так:
<P style = ""> це параграф з індивідуальним стилем </ p>
Все що буде написано між лапками атрибута style і буде стильовим описом для даного елемента, в даному випадку елемента <p>
Ну наприклад:
<P style = "color: # ff0000; font-size: 12px"> це параграф з індивідуальним стилем </ p>
В даному випадку ми вказали, що цей параграф повинен відображатися червоним кольором і мати розмір шрифту в 12 пікселів. У наступних розділах я детально розповім про те що написано в лапках, зараз же мова йде про те як застосувати CSS до якогось HTML тегу.
За таким же принципом можна вказати індивідуальний стиль практично для кожного HTML елемента.
Приклад:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Title> Атрибут style </ title>
</ Head>
<Body style = "background-color: # c5ffa0">
<H1 style = "color: # 0000ff; font-size: 18px"> Все про слонів </ h1>
<P style = "color: # ff0000; font-size: 14px"> На цьому сайті Ви знайдете будь-яку інформацію про слонів. </ P>
<H2 style = "color: # 0000ff; font-size: 16px"> Купити слона </ h2>
<P style = "color: # ff0000; font-size: 14px"> У нас Ви можете за вигідними цінами придбати кращих слонів !! </ p>
<H2 style = "color: # 0000ff; font-size: 16px"> Взяти слона на прокат </ h2>
<P style = "color: # ff0000; font-size: 14px"> Тільки у нас Ви можете взяти будь-яких слонів на прокат !! </ p>
</ Body>
</ Html>
Тег <style>
Для того, що б описати необхідні елементи одночасно на всій сторінці в заголовок HTML документа впроваджують тег <style> </ style> (не плутайте з однойменною атрибутом) в якому і відбувається опис потрібних нам елементів.
приклад
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Title> Тег style </ title>
<Style type = "text / css">
body {background-color: # c5ffa0}
h1 {color: # 0000ff; font-size: 18px}
h2 {color: # 0000ff; font-size: 16px}
p {color: # ff0000; font-size: 14px}
</ Style>
</ Head>
<Body>
<H1> Все про слонів </ h1>
<P> На цьому сайті Ви знайдете будь-яку інформацію про слонів. </ P>
<H2> Купити слона </ h2>
<P> У нас Ви можете за вигідними цінами придбати кращих слонів !! </ p>
<H2> Взяти слона на прокат </ h2>
<P> Тільки у нас Ви можете взяти будь-яких слонів на прокат !! </ p>
</ Body>
</ Html>
2. Керування кольором та фоном веб-сторінки
Колір переднього плану: властивість 'color'
Властивість color описує колір переднього плану елемента.
Наприклад, уявіть, що ми хочемо зробити всі заголовки документа темно-червоними. Усі заголовки позначаються HTML-елементом <h1>. У наведеному нижче коді колір елемента <h1> встановлюється червоним.
h1 { color: # ff0000; } |
Кольори можна вказувати як шістнадцяткові значення, як у прикладі (#ff0000), або ви можете використовувати назви кольорів ("red") або rgb-значення (rgb (255,0,0)).