- •Методичні вказівки
- •Лабораторна робота № 1
- •Тема: Створення односторінкового сайту. Виділення даних використовуючи шрифтові оформлення.
- •Мета: Навчити створювати односторінкові сайти.
- •Теоретичні відомості
- •Центрування елементів документа
- •Завдання
- •Лабораторна робота № 2
- •Тема: Добавлення зображень на сайт. Використання списків.
- •Мета: Навчити додавати картинки на сайт. Створення списків.
- •Теоретичні відомості
- •Завдання
- •Лабораторна робота № 3
- •Тема: Добавлення додаткових сторінок і навігація по них. Карти-зображень.
- •Мета: Навчити створювати гіперпосилання і додавати їх на html-сторінку.
- •Теоретичні відомості
- •Структура посилань в html-документі
- •Посилання на точки усередині документа
- •Завдання
- •Лабораторна робота № 4
- •Тема: Розробка web-сайту використовуючи таблиці.
- •Мета: Навчити створювати таблиці у веб-документі.
- •Теоретичні відомості
- •Приклад веб-сторінки
- •Завдання
- •Лабораторна робота № 5 Тема: Каскадні таблиці стилів. Мета: Навчити створювати текст з використанням css.
- •Завдання
- •Лабораторна робота № 6
- •Тема: Робота з редактором Macromedia Dreamweaver.
- •Мета: Навчитись використовувати засоби Dreamweaver для розробки web-сторінок
- •Хід роботи:
- •Теоретичні відомості
- •Робота з шарами
- •Приєднання поведінки.
- •Лабораторна робота № 7
- •Тема: Рисування простих зображень в графічному редакторі Adobe Photoshop. Робота з текстом
- •Мета роботи: ознайомлення з інтерфейсом і інструментами Photoshop; ознайомитися з принципами роботи з тексом
- •Теоретичні відомості
- •2. Шматочковий текст
- •3. Страшний текст
- •4. Бите скло
- •5. Гелевий текст
- •6. Вогненні букви
- •7. Сяючий текст
- •8. Текст у вогні
- •Лаборраторна робота № 9 Тема: Робота із документами в редакторі FlashMx. Мета: Навчитись створювати анімаційні сюжети.
- •Принципи роботи Motion Tween.
- •Література:
- •82100, М.Дрогобич Львівської обл., вул.. Раневицька 12
Центрування елементів документа
Ви можете центрувати всі елементи документа у вікні броузера. Для цього можна використати тег <CENTER>.
Всі елементи між тегами <CENTER> й </CENTER> будуть перебувати в центрі вікна
Тег преформатування <PRE>
Тег преформатування <PRE>, дозволяє представляти текст із специфічним форматуванням на екрані. Попередньо відформатований текст закінчується завершальним тегом </PRE>. Всередині попередньо відформатованого тексту дозволяється використати:
переклад рядка
символи табуляції (зрушення на 8 символів вправо)
непропорційний шрифт, установлюваний броузером
Використання тегів, що визначають формат абзацу, таких як <Hx> або <ADDRESS>, буде ігноруватися броузером при приміщенні їх між тегами <PRE> й </PRE>.
Далі йде трохи більше докладний приклад, зібраний з попередніх:
<HTML>
<HEAD>
<TITLE> Список співробітників </TITLE>
</HEAD>
<BODY>
<H2> Список співробітників нашої фірми </H2>
<H3> Складено : 30 липня 2009 року </H3>
Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії. <P>
Список може бути використаний тільки в службових цілях. </P>
</BODY>
</HTML>
Розрив рядка <BR>
Тег <BR> сповіщає броузер про розрив рядка. Найкращий приклад використання даного тега – форматована адреса або будь-яка інша послідовність рядків, де броузер повинен відображати їх одну під іншою.
Додатковий параметр дозволяє розширити можливості тега <BR>.
<BR CLEAR=left|right|all>
Даний параметр дозволяє виконати не просто переклад рядка, а розмістити наступний рядок, починаючи із чистої лівої (left), правої (right) або обох (all) границь вікна броузера. Наприклад, якщо поруч із текстом ліворуч зустрічається малюнок, то можна використати тег <BR> для зсуву тексту нижче малюнка:
Цитата <BLOCKQUOTE>
Даний тег призначений для позначення в документі цитати з іншого джерела. Текст, позначений тегом <BLOCKQUOTE>, відступає від лівого краю документа на 8 пробілів. Наприклад:
На відкритті даної конференції глава представництва вимовив: <P> <BLOCKQUOTE> Сьогодні один з найбільших днів для нашої компанії. <BR> Ми відкрили нову технологію, що дозволяє нашим клієнтам підвищити продуктивність їхніх настільних систем у кілька разів. </BLOCKQUOTE>
ДОДАВАННЯ СТИЛІВ У ВАШ HTML-ДОКУМЕНТ
HTML дозволяє використати різні стилі шрифтів для виділення текстової інформації у ваших документах. Короткий список стилів, підтримуваних більшістю броузеров:
bold (жирний)
italic (похилий)
mono spaced (type writer - з використанням фіксованих шрифтів)
Ви можете комбінувати різні види стилів, наприклад жирний і похилий.
Стиль |
Елемент або тег |
Результат |
Bold |
<B> Цей текст жирний </B> |
Цей текст жирний |
Italic |
<I> Цей текст похилий </I> |
Цей текст похилий |
Mono spaced |
<TT> Цей текст із непроп. шрифтом </TT> |
Цей текст із непроп. шрифтом |
Додаткові стилі:
big (великий)
small (маленький)
sub (підстрічковий)
sup (надстрічковий)
Стиль |
Елемент або тег |
Результат |
Big |
Цей текст <BIG> великий </BIG> |
Цей текст великий |
Small |
Цей текст <SMALL> маленький </SMALL> |
Цей текст маленький |
Sub |
Цей текст <SUB> підстрічковий </SUB> |
Цей текст підстрічковий |
Sup |
Цей текст <SUP> надстрічковий</SUP> |
Цей текст надстрічковий |
СПЕЦІАЛЬНІ ТЕГИ HTML
Escape-послідовності
Деякі символи є керуючими символами в HTML і не можуть прямо використатися в документі:
ліва кутова дужка "<"
права кутова дужка ">"
амперсанд "&"
подвійні лапки """
Щоб використати дані символи в документі, необхідно замінити їхніми escape-послідовностями:
< |
< |
> |
> |
& |
& |
" |
" |