- •Тема 1. Технології Internet та основи створення Web-вузлів
- •2, Загальні принципи створення комерційних Web-сайтів
- •3. Загальні принципи створення окремої сторінки Web-сайту "
- •4. Розміщення Web-вузла в Internet та вивір провайдера
- •Тема 2. Структура html-документа й елементи розмітки заголовка документа
- •1. Історія розвитку мови розмітки гіпертексту html
- •2. Принципи гіпертекстової розмітки. Структура html-документа
- •3. Тега, що визначають структуру документа
- •4. Призначення та основні контейнери заголовка
- •Тема 3. Мова розмітки гіпертексту html
- •5. Федорчук а. Как создаются Web-сайты: краткий курс- сПб: Питер, 2000.-224с: ил.
- •1. Теги управління розміткою
- •2. Теги керування відображенням символів
- •3. Організація тексту всередині документу
- •4. Засоби опису таблиць у html
- •Тема 4. Топологія Web-сайту. Навігація на Web-сайті. Створення гіпертекстових переходів засобами html
- •1. Топологія Web-сайту
- •2. Створення загальних посилань засобами html
- •3. Створення контекстних посилань засобами html
- •4. Створення гіперпосилань засобами html
- •5. Html форми
- •Тема 5. Основи Web-дизайну
- •2. Офермлеяня Web-сторінки. Типи фонів. Текстури. Правила
- •3. Логотип
- •4. Шрифт і текст у Web-дизайні
- •5. Кольорове коло. Системи представлення кольорів. Підбір
- •Тема 6. Кольорове оформлення сторінок засобами html. Web-графіка План лекції
- •1. Атрибути body для кольерового оформленим Web-сторінок
- •2. Оформлення таблиць
- •3. Використання графіки в html
- •Тема 7. Каскадні таблиці стилів css (Cascading Style Stoeets)
- •1. Основи css
- •1.1. Призначення css
- •1.2. Додавання стилів на web-сторінку
- •1.3. Присвоєння стилів
- •2. Властивості елементів, керованих за допомогою css
- •2.2. Текст
- •2.3. Шрифти
- •1. Пошук інформації у Internet Повнота, достовірність та швидкість пошуку
- •Тема 1. Технології Internet та основи створення Web-вузлів
2.3. Шрифти
При описанні шрифту використовуються наступні його
характеристики: - -
Стиль шрифту визначає, який тип накреслення 6yjK використовуватися для представлення тексту: звичайний, курсив або похилий. Курсив - це щось середнє між нормальним і рукописним стилем накреслення. Похилий тип відрізняється від нормального тільки тим, що має деякий постійний нахил, що не змінює накреслення нормальної форми шрифту. Такий стиль найчастіше використовується в сполученні з шрифтами без засічок (sans-serif).
Варіант шрифту вказує, Щ будуть рядкові символи тексту відображатися з використанням звичайних гліфів або гліфів капітелі. Кожен конкретний шрифт може містити або тільки звичайні гліфи, або тільки гліфи капітелі, або і ті й інші. Ця властивість використовується для запиту необхідного шрифту і необхідного типу гліфів, якщо шрифт містить обидва варіанти гліфів.
Вага шрифту визначає, наскільки гліфи, що використовуються для відображення тексту, темніші або світліші інших шрифтів тієї ж гарнітури.
Масштабування шрифту визначає, наскільки гліф, що іикорстовується для відображення тексту, стиснутий або розтягнутий щодо інших шрифтів тієї ж гарнітури.
Розмір шрифту визначає величину шрифту від однієїбазової лінії до іншої при наборі без шпонів (у термінах CSS це має місце, якщо Властивості 'font-size' і 'line-height' приймають однакові значення).
Для усіх властивостей, крім 'font-size', масштаб одиниць нимірювання довжини 'em' і 'ех' визначається щодо розміру шрифту поточного елемента. Для властивості 'font-size' масштаб цих одиниць вимірювання визначається щодо розміру шрифту батьківського елемента.
Гарнітура шрифту: властивість 'font-family' ■- ця властивість задає список імен гарнітур шрифтів і/або імен загальнодоступних гарнітур у порядку їхнього пріоритету.
Стиль шрифту: властивості 'font-style, 'font-variant, 'font- weight, Tont-strech.
Властивість 'font-style' надає можливість вибору нормального (прямого ("roman" або "upright")), курсивного або похилого типу накреслення в рамках однієї гарнітури шрифтів.
Значення: normal: задає шрифт, що у базі даних шрифтів агента користувача
описується як нормальний ('normal'); oblique: задає шрифт, що описується як похилий ('oblique'); Italic: задає шрифт, що описується як курсивний ('italic') або похилий ('oblique'), якщо курсивний тип накреслення недоступний.
Властивість 'font-variant' визначає вибір варіанта шрифту, що Володіє двома наборами знаків (тобто двома регістрами).
Значення: ПОгтаІ: задає шрифт, що не містить капітелі;
small-caps: задає шрифт, що містить капітель. В наступному прикладі слсментНІ відображається капітеллю, а виділені (за допомогою елемента ЕМ) слова відображаються похилою капітеллю: НІ { font-variant: small-caps } KM { font-style: oblique }
Властивість 'font-weight' задає вагу шрифту. Значення: від 100 до 900: ці значення представляють впорядковану послідовність,
кожне число в якій позначає вагу в порядку її зростання; normal: аналогічно '400'; bold: аналогічно 700';
Алфавітні:
lower-greek: класичні рядкові грецьких букв: альфа, бета гама, ... (а, р, у,
lower-alpha: малі літери в коді ascii (а, Ь, с,... z); lower-latin: малі літери в коді ascii (а, Ь, с,... щ upper-alpha: великі букви в коді ascii (А, В, С,... Z);
upper-latin: великі букви в коді ascii (А, В, С,... Z).
Для великих списків рекомендується використовувати числа. Приклад. В результаті виконання наступного коду HTML <HTML> <HEAD>
<ТІТЬЕ>Нумерація з використанням прописних римських цифр</ТІТЬЕ>
<STYLE type="text/css"> ;:;%;;.
OL { list-style-type: upper-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Перший елемент.
<LI> Другий елемент.
<LI> Третій елемент. *
</OL>
</BODY> </HTML> отримаємо:
I Перший елемент. * ...__.
II Другий елемент. ' -'".З
III Третій елемент.
Властивість 'Iist-style-image' - визначає графічний об'єкт, що використовується як маркер елемента списку. Якщо графічний об'єкт доступний, то він замінює маркер, встановлюваний властивістю 'list-style-type'.
Наприклад, перед кожним елементом списку як маркер використовується графічний об'єкт "marker.jpg". OL { list-style-image: url("http://marker.jpg") }
Властивість 'list-style-position' і визначає положення блоку маркера в головному структурному блоці.
Значення: outside: блок маркера знаходиться за межами головного структурного блоку.
inside: блок маркера знаходиться в першому рядковому блоці головного структурного блоку, після якого виводиться вміст елемента;
Властивість 'list-style' - є скороченою формою завдавання трьох їластивостей 'list-style-type', 'list-style-image^ і 'list-style-position1 в одному МІСЦІ таблиці стилів..
UL { list-style: upper-roman inside } /* Любою влемент UL */
Ші > UL { list-style: circle outside } /* Любою дочірній елемент UL елемента UL */
Іншим способом вирішення може стати задавання інформації 'list-Ityle' про стиль списку винятково в елементах списку: OL.alpha { list-style: lower-alpha } UL { list-style: disc }
Завдяки успадковуванню значення властивості 'list-style' елементів OL і UL будуть передаватися відповідним властивостям елементів LI. Саме цей спосіб рекомендується використовувати для визначення Інформації про стиль списку.
Значення URL може комбінуватися з будь-яким іншим значенням, як це зроблено в наступному прикладі: UL {list-style: url(("http://marker.jpg") disc }
Якщо не вдається одержати доступ до графічного об'єкта, то замість нього тут буде використовуватися маркер типу 'disc'. '
Якщо для властивості list-style' встановлюється значення 'попе', то Властивостям 'list-style-type' і 'list-style-image' також привласнюється Значення 'попе': UL { list-style: попе }
В результаті маркер елемента списку не відображається.
Контрольні питання
1. Призначення каскадних таблиць стилів. Переваги використання.
2. Поясніть різницю між способами підтримки стилів документа. Створення таблиць зв'язаних стилів (linked style sheet), глобальних стилів (global style sheet), внутрішні стилів (inline style).
3. Які основні параметри кольору, фону доступні у стилях HTML?
4. Які основні параметри шрифтів доступні у стилях HTML?
5. Які основні параметри тексту доступні у стилях HTML?
6. Які основні параметри абзацу, як блокового елементу, доступні у стилях HTML?
7 . Які основні параметри списків доступні у стилях HTML?
Лабораторна робота №1 Тема: Пошук інформації у Internet. Загальні принципи оформлення сайтів. Структура сайтів.
Мета роботи: Ознайомитись зі структурами, оформленням, навігацією сайтів за вибраною тематикою.
Звіт: Підготувати звіт в редакторі NotePad WordPad у документі з розширенням .htm - в цілому не більше ніж 60 Кб (приблизно по 15 Кб на огляд кожного сайту і 15 Кб на сторінку з висновками). Звіт повинен бути присвячений ОДНІЙ темі і складатися з чотирьох окремих зв'язаних між собою Web-сторінок.
Теоретичні відомості