sozdanie_web_stranits
.pdfТут атрибут src= визначає URL-адресу графічного файлу. У наведеному прикладі файл буде розміщено в області шириною 45 і висотою 50 пікселей відповідно й розташовано у тій же папці, що й поточна Web-сторінка. Якщо розміри, зазначені атрибутами height=(висота) і width=(ширина) не збігаються з розмірами графічного файлу, останній масштабується. Якщо файл розташований в іншій папці, потрібно вказати повний шлях, наприклад, так:
<img src="d:\images\pic004.jpg" alt="Logo">
Атрибут alt= указує, що саме підставити на місце рисунка, якщо браузер не показує графічні файли або внаслідок повільної швидкості з'єднання файл ще не отримано.
Використовуючи атрибут align=, можна розміщати текст зверху або по центру відносно картинки.
2.4 Списки
Мова HTML має можливості для створення різних списків і перерахувань. Для їхнього створення можуть використовуватися теги <ul> і <оl>, а елементи списку відзначаються тегом <li>, при цьому допускаються вкладені списки будь-якої глибини.
Атрибути тегу <оl>:
−type="" Тип маркера:
1)type="A" – маркер у вигляді латинських прописних
літер;
2)type="a" – маркер у вигляді латинських малих літер;
3)type="I" – маркер у вигляді великих римських цифр;
4)type="і" – маркер у вигляді малих римських цифр;
5)type="1" – маркер у вигляді арабських цифр;
−start="n" Визначення початкового значення маркера (тільки для списку з маркером у вигляді арабських цифр).
Атрибути тегу <ul>:
−type="" Тип маркера:
1)type="disc" – маркер у вигляді залитого кола;
11
2)type="square" – маркер у вигляді залитого квадрата;
3)type="circle" – маркер у вигляді окружності. Списки <ol></ol> і <ul></ul> можуть бути вкладені друг у
друга. При вкладенні списків, новий тип списку є активним, а попередній деактивується до закінчення дії вкладеного.
Розглянемо наступний приклад списків. Відкрийте програму Блокнот і напишіть наступний текст:
<html> <head> <B> Списки </B>
<title> Приклади списків </title> <ul>
<li>червоний <li>білий
</ul>
<ol>
<li>елемент перший. <li>елемент другий. <li>елемент третій. </оl>
</body> </html>
Збережіть файл на диску, давши йому ім'я, наприклад «Теги списків.htm». Потім відкрийте його у програмі Internet Explorer. Результат подано на рисунку 2.
12
Рисунок 2 – Приклад списків
2.5 Таблиці
Опис таблиць в HTML-документах здійснюється за допомогою тегу <table>. Структура таблиці задається двома тегами : <tr> і </tr> – опис рядка таблиці; <td> і </td> – опис комірки таблиці.
За замовчуванням текст усередині таблиці вирівнюється по лівому краю, а ширина стовпця таблиці визначається найбільш довгим елементом у цьому стовпці. Розглянемо приклад. Відкрийте програму Блокнот і напишіть наступний текст:
<html>
<head>
<B>
Таблиця
</B>
<title>
Приклад таблиці
</title>
<table border ="1">
13
<tr>
<td>Комірка 1–1</td> <td>Комірка 1–2</td> <td>Комірка 1–3</td> </tr>
<tr>
<td>Комірка 2–1</td> <td>Комірка 2–2</td> <td>Комірка 2–3</td> </tr>
</table>
</body>
</html>
Збережіть файл на диску, задавши йому ім'я Таблиця.htm. Потім відкрийте його в програмі Internet Explorer. Результат подано на рисунку 3.
Рисунок 3 – Приклад таблиці
Атрибути, що визначають оформлення таблиці:
−align="" Визначення способу вирівнювання:
1)align="center" – вирівнювання таблиці від центра;
14
2)align="justify" – вирівнювання таблиці за ши-
риною;
3)align="left" – вирівнювання таблиці по лівому
краю;
4)align="right" – вирівнювання таблиці по правому
краю;
−background="" Зображення для фона таблиці;
−bgcolor="" Колір фону таблиці;
−border="" Товщина рамки (у пікселях);
−bordercolor="" Колір рамки таблиці;
−height="" Висота таблиці (у пікселях або відсотках);
−style="" Настроювання стилю;
−width="" Ширина таблиці (у пікселях або відсотках).
Для тегів <tr>, </tr> і <td>, </td> також доступні атри-
бути оформлення: align, bgcolor, bordercolor, style.
Крім того, для стовпця таблиці (теги <td> і </td>) доступні додаткові атрибути:
−valign="" Спосіб вирівнювання по вертикалі:
1)valign="baseline" – вирівнювання тексту по базовій лінії;
2)valign="bottom" – вирівнювання тексту по верхній
границі;
3)valign="middle" – вирівнювання тексту по центру;
4)valign="top" – вирівнювання тексту по нижній гра-
ниці;
−height="" Висота стовпця (у пікселах або відсотках);
−width="" Ширина стовпця (у пікселах або відсотках). Таблицю можна вивести із заголовком, використовуючи тег
<caption> ... </caption>. Заголовок буде розміщено над таблицею, з вирівнюванням тексту по центру.
15
2.6 Форматування документів HTML і тексту
У HTML є наступні теги для оформлення тексту: <p> ... </p> – тег абзацу документа. Атрибути:
−align="" Визначення вирівнювання:
1)align="left" – по лівому краю;
2)align="center" – по центру;
3)align="right" – по правому краю.
<br> – тег переводу рядка
<nobr> ... </nobr> – заборона переводу рядка
<h1> ... </h1> Тегі форматованих заголовків. Н1 – самий <h2> ... </h2> великий, а Н6 самий маленький формат за-
головка.
<h3> ... </h3> Дані тегі припускають автоматичну вставку <h4> ... </h4> порожніх рядків, при оформленні заголовків.
<h5> ... </h5> <h6> ... </h6>
Атрибути:
−align="" Визначення вирівнювання:
1)align="left" – по лівому краю;
2)align="center" – по центру;
3)align="right" – по правому краю.
<hr> – тег горизонтальної лінії, не вимагає тега <br> ні на початку, ні наприкінці.
Атрибути:
−align="" Визначення вирівнювання:
1)align="left" – по лівому краю;
2)align="center" – по центру;
3)align="right" – по правому краю;
−color="" Визначення кольору лінії (тільки для IE);
−noshade Скасування рельєфності лінії;
16
−size="" Визначення ширини лінії у пікселях;
−width="" Визначення ширини лінії (у відсотках або піксе-
лях).
<pre> ... </pre> – тег тексту, що форматується (моношириний шрифт).
<font> ... </font> (*) – тег форматування шрифту. Атрибути:
−color="" Визначення кольору тексту;
−face="" Покажчик назви шрифту (шрифтів);
−size="" Розмір шрифту від 1 до 7 (3 – за замовчуванням):
1)size –2 = 1;
2)size –1 = 2;
3)size 3;
4)size +1 = 4;
5)size +2 = 5;
6)size +3 = 6;
7)size +4 = 7.
<blockquote> ... </blockquote>– тег виділення цитати з основного тексту.
Логічне форматування:
<cite> ... </cite> – Виділення цитати (курсив);
<code> ... </code> – Виділення програмного коду (фор-
|
матований текст); |
<em> ... </em> |
– Акцентування (курсив); |
<kbd> ... </kbd> |
– Текст, уведений із клавіатури (фор- |
|
матований текст); |
<samp> ... </samp> – Виділення приклада (форматований текст);
<strong> ... </strong> – Акцентування (напівжирний); <var> ... </var> – Виділення символьного позначення
порядкового числівника (курсив). Приклад: n-ний коефіцієнт.
17
<dfn> ... </dfn> – Виділення якого-небудь визначення (курсив);
<center> ... </center> (*) – Розміщення по центру.
Фізичне форматування:
<b> ... </b> – Виділення тексту напівжирним шрифтом; <і> ... </і> – Виділення тексту курсивом;
<u> ... </u> (*) – Виділення тексту підкресленням; <tt> ... </tt> – Виділення тексту шрифтом фіксованої
ширини;
<strike> ... </strike> (*) – Закреслення тексту;
<s> ... </s> (*) – Закреслення тексту; <big> ... </big> – Збільшення шрифту;
<small> ... </small> – Зменшення шрифту;
<sub> ... </sub> – Створення нижнього індексу; <sup> ... </sup> – Створення верхнього індексу.
Елементи фізичного форматування можуть бути вкладені друг у друга. Допускається також перехресно–складне вкладення.
Приклад:
<і>Каждый <b>охотник желает</і> знать, где сидит</b> фазан. Результат:
Каждый охотник желает знать, где сидит фазан.
18
ЗАВДАННЯ ДО ЛАБОРАТОРНОЇ РОБОТИ
Розробити власний сайт з наступною структурою:
Головна
сторінка
main.htm
Мої |
|
Про автора |
захоплення |
|
author.htm |
my_rest.htm |
|
|
|
|
|
|
|
|
На головній сторінці розмістіть:
−Назву сторінки;
−Будь-яку картинку. Рада: попередньо скопіюйте файл картинки у Вашу папку;
−Посилання на інші сторінки сайту.
На сторінці «Мої захоплення» розмістіть 2–3 абзаци тексту, що розповідає про Ваші захоплення.
На сторінці «Про автора» розмістіть:
−Фото (можна чуже);
−Коротку автобіографію (можна придуману).
Роздрукуйте зовнішній вигляд сторінок і їхній програмний код. Приклади сторінок сайту наведені в Додатку А.
Оформіть сторінки сайту різними кольорами. При написанні тексту активно використовуйте різні шрифти. На сторінці «Про автора» для форматування використовуйте таблицю.
19
ВИМОГИ ДО ЗВІТУ
Звіт оформляється на стандартних аркушах білого паперу формату А4 (210x297 мм). Текст пишеться з однієї сторони аркуша чорнилом синього або чорного кольору або друкується на принтері.
Бланк звітів готується під час домашньої підготовки до роботи й повинен містити:
−Дані про студента: прізвище й ініціали, шифр групи;
−Тему й ціль роботи;
−Дату виконання роботи;
−Набір даних, необхідних для виконання роботи: завдання до роботи, властивості тегів HTML, програмний код сторінок, схему сайта.
Після виконання роботи до звіту підшиваються: роздруківки сторінок, роздруківки програмного коду.
Звіт повинен бути виконаний акуратно. Неакуратно виконані звіти, а також ксерокопії чужих звітів або їхніх фрагментів до захисту не допускаються.
КОНТРОЛЬНІ ПИТАННЯ
1)Що таке URL? Яка його структура?
2)Чим відрізняються друг від друга статична, динамічна
йактивна Web-сторінки?
3)Структура Web-сайту.
4)Що таке тег?
5)Основна структура HTML-документа.
6)Як створити абсолютне й відносне гіперпосилання у HTML-документі?
7)Як змінити параметри шрифту у HTML-документі?
8)Як розмістити картинку на Web-сторінці?
9)Списки на Web-сторінках. Можливості оформлення.
10)Таблиці в HTML-документі. Як вони створюються?
11)Які теги варто використовувати для створення рядків і стовпців таблиць?
20