П р а к т и ч н а р о б о т а № 6 Тема: «Розробка веб-сайту засобами мови html та текстового редактора Блокнот. Веб-дизайн”.
Мета роботи: навчитись створювати веб-сторінки засобами мови HTML і текстового редактора Блокнот, вивчити засоби веб-дизайну.
Хід роботи
Занотуйте тему і мету роботи у зошит. Складіть звіт про виконання роботи.
Завдання 1. Створіть документ програми Блокнот з ім’ям Практ_17.
Послідовно виконуючи вправи цього завдання, розробіть свій веб-сайт.
Методичні рекомендації
Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML> ... </HTML>.
Усередині парного тегу <HEAD>...</HEAD> створюють заголовок документа. Основною частиною заголовка документа є заголовок Windows-вікна, який задають усередині парноготегу <TITLE>...</TITLE>. Усередині парного тегу <BODY параметри>...</ВОDY> тобто програмують те, що має відображатися у вікні.
Основні параметри тега BODY:
BACKGROUND = "шлях до графічного файлу“ - задає картинку для фона;
BGCOLOR = "blue" — задає колір фону (у даному разі блакитний), якщо не використовується картинка як фон;
TEXT = "red" — задає колір тексту (у даному разі червоний) на сторінці.
Тег <!- - текст --> позначає коментар. Текст усередині тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст</COMMENT>.
Вправа 1. Створіть папку з ім’ям Практ_17 у своїй папці на сервері, в ній документ програми Блокнот з таким текстом:
<HTML> <HEAD>
<TITLE> Про себе докладніше </TITLE> </HEAD>
<BODY>
(текст - автобіографічна довідка про себе)
</BODY> </HTML>
Збережіть документ з ім’ям file2.htm у своїй папці Практ_17 на сервері (рис.17.1).
Аналогічно створіть файл з ім’ям file3.htm у своїй папці Практ_17 такого змісту:
<HTML> <HEAD>
<TITLE> Про друзів і мої захоплення </TITLE> </HEAD>
<BODY>
(текст – про своїх друзів і свої захоплення)
</BODY> </HTML>
Перегляньте ці файли. Якщо існують помилки, то необхідно відкрити меню Вид=>Просмотр HTML- кода, виправити помилки і зберегти зміни, потім меню Вид =>Обновить. Пам’ятайте, що мова HTML використовує латинські символи.
Рис.17.1. Збереження файлу з розширенням .htm.
Дизайн тексту для Web-сторінок
Спочатку розглянемо основні одинарні теги для розміщення тексту:
<Р> — цей тег означає початок нового абзацу, але його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного по лівому краю, абзацу без відступу.
<BR> — наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка.
<HR> — буде проведена горизонтальна лінія.
Розглянемо парні теги форматування символів тексту:
<В> текст </В> — жирний шрифт тексту;
<І> текст </І> — шрифт-курсив;
<U> текст </U> — підкреслений шрифт;
<SUB> текст </SUB> — нижній індекс, наприклад, Н20;
<SUP> текст </SUP> — верхній індекс;
<BIG> текст </ВIG> — великий шрифт;
<SMALL> текст </SMALL> — малий шрифт;
<ЕМ> текст </ЕМ> — виділений курсивом текст (те саме, що тег І);
<В> <І> текст </І></В> — жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>. Теги заголовків наведені у табл.17.1.
|
Таблиця 17.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 наведені у табл.17.2.
|
Таблиця 17.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>
Перегляньте файл як веб-сторінку. Виправте помилки. Збережіть зміни.