- •Передмова
- •Лабораторна робота №1
- •Лабораторна робота № 2
- •Хід виконання роботи
- •Лабораторна робота № 3
- •Хід виконання роботи
- •Контрольні питання
- •Лабораторна робота №4
- •Хід роботи
- •Методичні рекомендації
- •Дизайн тексту для Web-сторінок
- •Створення списків та їх дизайн
- •Створення таблиць та їх дизайн
- •Вирівнювання елементів
- •Додання графічних та відеофайлів
- •Адреси файлів
- •Додання гіперпосилань
- •Поняття про динамічні ефекти
- •Лабораторна робота № 5
- •Контрольні питання
- •Заробітна плата працівників заводу "океан" за червень
- •Заробітна плата працівників заводу "океан" за червень
- •Лабораторна робота № 6
- •Контрольні питання
- •Лабораторна робота №7
- •Хід виконання роботи
- •Мал. 2 Контрольні питання
- •Лабораторна робота № 8
- •Хід виконання роботи
- •Мал. 1 Контрольні запитання
- •Лабораторна робота № 9
- •Хід виконання роботи:
- •Контрольні запитання
- •Лабораторна робота № 10
- •Хід виконання роботи
- •Контрольні питання
- •Лабораторна робота № 11
- •Хід виконання роботи
- •Контрольні питання
- •Лабораторна робота №12
- •Хід виконання роботи
- •Контрольні питання
- •Лабораторна робота №13
- •Лабораторна робота №14
- •Хід виконання роботи
- •Контрольні питання
- •Література
Дизайн тексту для Web-сторінок
Спочатку розглянемо основні одинарні теги для розміщення тексту:
<Р> — цей тег означає початок нового абзацу, але його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного по лівому краю, абзацу без відступу.
<BR> — наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка.
<HR> — буде проведена горизонтальна лінія.
Розглянемо парні теги форматування символів тексту:
<В> текст </В> — жирний шрифт тексту;
<І> текст </І> — шрифт-курсив;
<U> текст </U> — підкреслений шрифт;
<SUB> текст </SUB> — нижній індекс, наприклад, Н20;
<SUP> текст </SUP> — верхній індекс;
<BIG> текст </ВIG> — великий шрифт;
<SMALL> текст </SMALL> — малий шрифт;
<ЕМ> текст </ЕМ> — виділений курсивом текст (те саме, що тег І);
<В> <І> текст </І></В> — жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>. Теги заголовків наведені у табл.9.1.
|
Таблиця 9.1 | |
|
Теги |
Результат у вікні |
|
<Н1>Заголовок 1</Н1> |
Заголовок 1 |
|
<Н2>Заголовок 2</Н2> |
Заголовок 2
|
|
<Н3>3аголовок 3</Н3> |
Заголовок 3
|
Заголовок за замовчуванням вирівнюється по лівому краю вікна.
Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
<CENTER> елемент </CENTER> — вирівнювання по центру; <LEFT> елемент </LEFT> — вирівнювання по лівому краю;
<RIGHT> елемент </RIGHT> — вирівнювання по правому краю.
Тег задання параметрів шрифту FONT
Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT з параметрами
FACE-тип шрифту,
SIZE - розмір шрифту,
COLOR – колір шрифту.
Наприклад,
<FONT FACE = "Monotype Corsiva, Verdana, Courier" SIZE = +2 COLOR = "green"> текст </FONT>.
Якщо на комп'ютері клієнта встановлено шрифт Monotype Corsiva, то він буде застосований до даного тексту, якщо цей шрифт відсутній - браузер застосує шрифт Verdana, далі - Courier, інакше — деякий стандартний шрифт, наприклад, Times New Roman.
Розміри символів шрифту можуть бути від 1 до 7. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту — на дві одиниці менший, ніж стандартний. Колір тексту буде зелений. Імена основних кольорів мовою HTML наведені у табл.9.2.
|
Таблиця 9.2 | |
|
Ім’я кольору |
Назва кольору українською мовою |
|
black |
чорний |
|
green |
зелений |
|
navy |
темно-синій |
|
teal |
бірюзовий |
|
silver |
сірий |
|
lime |
яскраво-зелений |
|
blue |
синій |
|
aqua |
блакитний |
|
magenta |
малиновий |
|
olive |
темно-зелений |
|
purple |
бузковий |
|
gray |
темно-сірий |
|
red |
червоний |
|
yellow |
жовтий |
|
fushsia |
рожевий |
|
white |
білий |
Колір можна задавати шістнадцятковими кодами, особливо відтінки в графічних редакторах прийнято задавати шістнадцятковими кодами, наприклад, один з відтінків сірого кольору має код #ff7800.
Вправа 2. Створіть текстовий файл file1.htm такого змісту.
<HTML>
<HEAD> <TITLE> Веб-сторінка Ваше прізвище та ім’я</TITLE> </HEAD>
<BODY BGCOLOR ="yellow" TEXT = "navy">
<CENTER><H1><B> Привіт!</В> </Н1>
<H2> <I>Я студент (введіть назву вузу)</I></Н2><P>
<H3><B> Навчаюсь на (введіть назву факультету, дайте характеристику факультету, спеціальності, чому ви навчаєтесь саме на цьому факультеті - 20 речень )</B></НЗ><HR>
Група (введіть назву групи)<P>
Моя e-mail адреса: <FONT SIZE = +3 COLOR = "magenta"> <B><I> s_nesterenko @ukr.net </FONT></I></B></CENTER><HR>
</BODY> </HTML>
Перегляньте файл як веб-сторінку. Виправте помилки. Збережіть зміни.