Лабораторна робота № 20
Тема: Основи Web-дизайну. Створення Web-сайту.
Мета: Познайомитись з мовою розмітки HTML та CSS. Навчитись створювати веб-сторінки засобами мови HTML, CSS з використанням текстового редактора Блокнот; дослідити засоби веб-дизайну.
Теоретична довідка
Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML> ... </HTML>.
Усередині парного тегу <HEAD>...</HEAD> створюють заголовок документа. Основною частиною заголовка документа є заголовок Windows-вікна, який задають усередині парного тегу <TITLE>...</TITLE>. Усередині парного тегу <BODY параметри>...</ВОDY> тобто програмують те, що має відображатися у вікні.
Основні параметри тега BODY:
BACKGROUND = "шлях до графічного файлу“ – задає картинку для фона;
BGCOLOR = "blue" – задає колір фону (у даному разі блакитний), якщо не використовується картинка як фон;
TEXT = "red" – задає колір тексту (у даному разі червоний) на сторінці.
Тег <!- – ’текст --> позначає коментар. Текст усередині тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст</COMMENT>.
Дизайн тексту для Web-сторінок
Спочатку розглянемо основні одинарні теги для розміщення тексту:
<Р> –початок нового абзацу. Наступне речення починатиметься з нового, вирівняного по лівому краю, абзацу без відступу.
Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>.
<BR> – наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка.
<HR> – буде проведена горизонтальна лінія.
Розглянемо парні теги форматування символів тексту:
<В> текст </В> – жирний шрифт тексту;
<І> текст </І> – шрифт-курсив;
<U> текст </U> – підкреслений шрифт;
<SUB> текст </SUB> – нижній індекс, наприклад, Н20;
<SUP> текст </SUP> – верхній індекс, наприклад, Н20;
<BIG> текст </ВIG> – великий шрифт, НАПРИКЛАД;
<SMALL> текст </SMALL> – малий шрифт, наприклад;
<ЕМ> текст </ЕМ> – виділений курсивом текст (те саме, що тег І);
<В> <І> текст </І></В> – жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Теги заголовків наведені у табл.20.1.
Таблиця 20.1
Теги |
Результат у вікні |
<Н1>Заголовок 1</Н1> |
|
<Н2>Заголовок 2</Н2> |
|
<Н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 наведені у табл.20.2.
Таблиця 20.2 |
|
Ім’я кольору |
Назва кольору українською мовою |
Black |
чорний |
green |
зелений |
navy |
темно-синій |
teal |
бірюзовий |
silver |
сірий |
lime |
яскраво-зелений |
blue |
синій |
aqua |
блакитний |
magenta |
малиновий |
olive |
темно-зелений |
purple |
бузковий |
grey |
темно-сірий |
red |
червоний |
yellow |
жовтий |
fuchsia |
рожевий |
white |
білий |
Колір можна задавати шістнадцятковими кодами, особливо відтінки в графічних редакторах прийнято задавати шістнадцятковими кодами, наприклад, один з відтінків сірого кольору має код #ff7800.