- •58002 М. Чернівці, Центральна площа, 7
- •1. Методика проведення практичних робіт
- •2. Зміст практичних занять Практична робота 1 Тема: Створення та адміністрування Web-сайту на безкоштовному сервері
- •Хід роботи:
- •Контрольні питання:
- •Практична робота 2 Тема: Основи html
- •Хід роботи:
- •Хід роботи:
- •Контрольні питання:
- •Практична робота 3 Тема: Зображення. Списки. Гіпертекстові посилання
- •Контрольні запитання:
- •Практична робота 4 Тема: Таблиці
- •Хід роботи:
- •Контрольні запитання:
- •Практична робота 5 Тема: Форми
- •Хід роботи:
- •Контрольні запитання
- •Практична робота 6 Тема: Фрейми. Карти зображень
- •Хід роботи:
- •Контрольні запитання:
- •Практична робота 7 Тема: Введення в каскадні таблиці стилів
- •Хід роботи:
- •Властивості тексту
- •Контрольні запитання:
- •3. Довідково-інформаційні дані для розв’язання задач
- •Теги рівня документа
- •Теги форматування тексту
- •Атрибути тегу Img
- •Список рекомендованих джерел
Властивості тексту
№ |
Властивість (можливі значення) |
Призначення властивості |
1 |
font-family (Arial | Times New Roman | Courier | Tahoma) |
назва шрифту |
2 |
font-weight (normal | bold | lighter) |
насиченість шрифту (ширина букв) |
3 |
font-size (small | large | medium | 120% | 14px) |
розмір шрифту |
4 |
font-style (normal | italic) |
стиль шрифту (зазвичай курсив) |
5 |
font-stretch (normal | width | condensed | expanded) |
розтягнуте зображення шрифту |
6 |
text-indent (число px | %) |
відступ першого рядка, при негативному значенні виступ |
7 |
text-align (left | center | right | justify) |
горизонтальне вирівнювання |
8 |
line-height (normal | …px | …% | …em) |
висота рядка (міжрядковий інтервал) |
9 |
vertical-align (sub | sup | top | middle | bottom) |
вертикальне вирівнювання тексту в контейнері |
10 |
word-spacing (… px| normal) |
відстань між словами |
11 |
letter-spacing (… px| normal) |
відстань між буквами |
12 |
text-transform (uppercase | lowercase | capitalize | none) |
регістр букв |
13 |
text-decoration (none | underline | overline | line-through) |
оформлення тексту
|
14 |
text-shadow (колір довжин довжина довжина) |
тінь до тексту |
15 |
white-space (normal | nowrap | pre) |
обробка пропусків |
16 |
color |
колір |
Контрольні запитання:
Які три типи CSS Ви знаєте?
У якому місці Web- сторінки записуються вбудовані CSS?
Де розташовується опис зовнішніх CSS?
У якому місці сторінки описуються упроваджені CSS?
Яка основна перевага каскадних таблиць стилів?
Яке розширення повинен мати файл з описом зовнішніх CSS?
Для чого використовуються класи?
Які програми використовуються для автоматизації створення таблиць стилів?
Яка зона дії вбудованих CSS?
Яка зона дії упроваджених CSS?
Яка зона дії зовнішніх CSS?
Як за допомогою CSS створити псевдографічне зображення?
Що таке стиль?
Чому таблиці стилів називають каскадними?
Якого типа CSS слід використовувати, якщо передбачається зміна формату відразу декількох сторінок?
Який з трьох типів CSS слід вважати найменш перспективним?
Як виконати групування селекторів?
3. Довідково-інформаційні дані для розв’язання задач
Рис. 3.1. Інтерфейс програми “HTMLPad 2010”
Таблиця 3.1
Теги рівня документа
Тег |
Призначення |
<html>...</html> |
Парний тег-контейнер, який містить в собі весь вміст Web-сторінки. Відкриваючий і закриваючий теги в документі обов’язкові, для того, щоб вказати границі документа. |
<head>...</head> |
Тег призначений для зберігання елементів, які використовуються для зберігання службової інформації, призначеної для браузерів і пошукових систем. Вміст тегу не відображується на сторінці. |
<title>...</title> |
Містить текст заголовка, який відображується в рядку заголовка вікна браузеру. |
<body>...</body> |
Призначений для зберігання вмісту Web-сторінки (контенту), який відображається у вікні браузера (відформатований текст, зображення, таблиці тощо). Тег може містити безліч атрибутів, які впливають на відображення всього документа в цілому. |
Таблиця 3.2
Основні атрибути тегу <body>
Атрибут |
Призначення |
alink |
Задає колір активного посилання (колір задається шістнадцятковим числом або константою, наприклад червоний колір: red або #ff0000) |
background |
Задає фоновий малюнок на Web-сторінці |
bgcolor |
Задає колір фону Web-сторінки |
topmargin (leftmargin, bottommargin) |
Задає відступ від верхнього (лівого, нижнього) краю вікна браузеру до контенту |
link |
Задає колір посилань на Web-сторінці |
text |
Задає колір тексту в документі |
vlink |
Задає колір відвіданих посилань |
Таблиця 3.3
