- •Тема: «Розробка веб-сайту засобами мови html та текстового редактора Блокнот. Веб-дизайн”.
- •Хід роботи
- •Методичні рекомендації
- •Дизайн тексту для Web-сторінок
- •Створення списків та їх дизайн
- •Створення таблиць та їх дизайн
- •Вирівнювання елементів
- •Додання графічних та відеофайлів
- •Адреси файлів
- •Додання гіперпосилань
- •Поняття про динамічні ефекти
- •Використання фреймів
Вирівнювання елементів
За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у комірках таблиці, браузер вирівнює по лівому краю вікна документа чи коміркики. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати по центру екрана чи по правому краю. Таблиці вирівнюють відносно положення на екрані або відносно тексту, який її оточує. Текст у комірках таблиці вирівнюють по центру, по лівому чи правому краю у горизонтальному чи вертикальному напрямках. Для цього до об’єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або в тегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" — зліва, "center" — по центру, "right" — справа, "top" — вгорі, "middle" — посередині, "bottom" — внизу. Останні три значення може мати також параметр VALIGN.
Для вдалого розташування таблиць чи рисунків варто поекспериментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселах або відсотках до розмірів усього екрана, наприклад, <TABLE WIDTH=300> задає ширину таблиці 300 пікселів; <TABLE WIDTH=50%> задає ширину таблиці у півсторінки у горизонтальному напрямку.
Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег <HR SIZE=30 COLOR="red"> замість звичайної лінії визначає червону лінію завтовшки ЗО пікселів.
Додання графічних та відеофайлів
Графічні зображення (фотографії, картинки тощо) зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на Web-сторінці за допомогою команди, що описується одинарним тегом <IMG> з параметрами:
<IMG SRC="адреса графічного файлу" ALT= "альтернативний текст" ALIGN="left" WIDTH=240 HEIGHT=200>
Обов'язковим є лише перший параметр SRC. Альтернативний текст — це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT — її розміри за шириною і висотою в пікселах або відсотках сторінки.
Зображення можна подати у рамці (що рекомендують робити), якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселах".
Праворуч і ліворуч від картинки, яку обтікає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".
За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки:
<IMG DYNSRC="адреса відео-файлу">.
Адреси файлів
Для доступу до файлів на локальному диску використовують протокол доступу file: “file:///диск:/ шлях до файлу".
Наприклад, "file:///d:/МоиВеб/page1.htm". Назву протоколу можна інколи не писати, наприклад, SRC="c:/Рисунки/Саша.bmp".
Якщо графічні чи інші файли є в тому ж каталозі, що ы головний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC= "Саша.bmp". Якщо файл є в деякому каталозі images, але в тому ж надкаталозі, то шлях до нього можна подати так: "../images/myfoto.gif". Отже, тег IMG може мати, наприклад, такий вигляд:
<IMG SRC="MyFoto.bmp" ALT= "Моє фото" ALIGN="left" WIDTH=180 HEIGHT=200>
Вправа 4. Вставте цей тег
<IMG SRC="MyFoto.gif" ALT= "Моє фото" ALIGN="left" WIDTH=180 HEIGHT=200>
у код вашої веб-сторінки у файлі file1.htm, попередньо розмістивши у папці Практ_17 ваше фото у файлі з ім’ям MyFoto.gif.
Код веб-сторінки на даний час може бути таким:
<HTML>
<HEAD> <TITLE> Веб-сторінка Ваше прізвище та ім’я</TITLE> </HEAD>
<BODY BGCOLOR ="yellow" TEXT = "navy">
<IMG SRC="MyFoto.gif" ALT= "Foto" ALIGN="left" width=180 height=200>
<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>
<CENTER>
<TABLE BORDER=6 BGCOLOR="aqua" BORDERCOLOR="red" >
<CENTER><TC> Моя успішність: </TC></CENTER>
<TR BGCOLOR="white"> <TH> Назва дисципліни</TH>
<TH>І семестр </TH>
<TH>II семестр </TH> </TR>
<TR> <TH>Економічна інформатика </TH>
<TD ALIGN="center">5</TD>
<TD ALIGN="center">4</TD></TR>
<TR> <TH>Англійська мова</ТН>
<TD ALIGN="center">4</TD>
<TD ALIGN="center">5</TD></TR>
<TR> <TH>Вища математика</TH>
<TD ALIGN="center">4</TD>
<TD ALIGN="center">5</TD></TR>
</TABLE></CENTER><HR>
</BODY></HTML>