Створення простої web-сторінки (стр. 3 из 3)

<ul> <ul> два ввдступи </ul></ul>

<ul> <ul><ul> три ввдступи </ul></ul></ul>

Питания для самоконтролю:

1. Як у Web-сторінку вставити малюнок?

2. Як встановити обтікання мапюнка текстом?

3. Як встановити відстань між текстом i малюнком?

4. Як встановити горизонтальні i вертикальні розмфи малюнка?

5. Як створити посилання на інший документ?

6. Як записати посилання на поштову скриньку?

7. Яке ім'я повинен мати головний документ?

8. Як створити список і вибрати маркер для нього?

9. Як зробити один, два або три відступи?

КОМПЛЕКСНА ЛАБОРАТОРНА РОБОТА "СТВОРЕННЯ HTML-ФАЙЛА"

Виконати такі дії:

1. На листку паперу або в зошиті написати текст HTML-файла для створення Web-сторінки за наведеним взірцем (без списку).

Привіт, це моя перша сторінка

Прізвище, ім’я, група

Шановний колего! Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями та знайомими. Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати декілька рядків в мою книгу для гостей.

Ось перші прізвища гостей в цій книзі:

o Іваненко Іван

o Петренко Петро

o Сидоренко Микола

Рисунок 3. Взірець HTML-сторінки

2. Відкрити редактор "Блокнот", набрати текст HTML-файла, зберегти його у еласну папку з менем Лабораторна робота i з РОЗШИРЕННЯМ .HTML.

3. Відкрити програму Internet Explorer, переглянути у власній nanці створений HTML-файл, виправити можливі помилки. Закрити Internet Explorer.

4. В текст файла Лабораторна робота.HTML додати список згідно взірця, зберегти його у еласну папку з тим самим іменем.

5. Програмою Internet Explorer переглянути відредагований HTML-файл, виправити молсливі помилки. Закрити програму Internet Explorer.

6. Зняти на сканері фотокартку або створити своє зображення графічним редактором, зберегти файл у власну папку.

7. Створити HTML-файл додаткового документа з довільним іменем, де розмістити файл свого зображення.

8. Ввести на додаткову сторінку електронну адресу свою або свого навчального закладу.

9. Відкрити програму Internet Explorer, переглянути створений HTML-файл додаткового документа, виправити можливі помилки. Закрити програму Internet Explorer.

10. В тексті HTML-файла головного документа створити посилання "подивитися мою фотокартку" на додатковий документ.

11. Завантажити броузер Internet Explorer i в ньому відкрити створений головний документ.

12. Здійснити перехід у додатковий документ за допомогою посилання. Повернутися на головну сторінку. Закрити програму Internet Explorer. Закрити eci програми i папки.

ОФОРМЛЕНИЯ ТАБЛИЦЬ

Для раціонального розподілу площі сторінки між її текстовими i графічними фрагментами використовують таблиці.

Таблиця задається тегом <table> </table>.

Рядки таблиці задаються тегом <tr> </tr>.

Стовпчики таблиці задаються тегом <td> </td>.

Нехай потрібно створити таблицю з двома рядками i трьома стовпчиками наведеного виду i наповнення (Рисунок 4).

1	2	3
1х1	1х2	1х3	1
2х1	2х2	2х3	2

Рисунок 4. Таблиця

Для створення цієї таблиці необхідно набрати такий текст (спечатку задаються рядки):

<table

<tr>

</tr>

<tr>

</tr>

<table>

Щоб у вздповвдних комірках таблиці задати колір фону (параметр bgcolor), висоту (height) i ширину (width) комірок таблиці в пікселях, треба вище наведений текст доповнити таким чином:

<table

<tr>

<td width="50" bgcolor="#336699">1x2</tr>

<td width="50" bgcolor="#FFCC33">lx3</tr>

</tr>

<tr>

<td height ="35" width="50" bgcolor="#336699">2xl</tr:>

<td width="50" bgcolor="#FFCC33">2x2</tr> <td width="50" bgcolor="#336699">2x3</tr>

</tr>

<table>

ВИРІВНЮВАННЯ ВМICТУ КОМІРОК

Щоб вирівняти вміст комірок таблиці по горизонталі, треба вище наведений текст редагувати таким чином:

<td height ="35" width="50" bgcolor="#336699"> <center>,2xl</tr>

В кожній комірці таблиці може знаходитись текст, малюнки i навігь вкладені таблиці. Їх вміст форматусться за допомогою вже відомих тегів. Кожна комірка таблиці є ніби окрема кімната, тому теги для центрування в попередньому прикладі довелось писати для кожної комірки.

Вирівнювання по вертикалі виконуеться за допомогою атрибута valign="middle" (top, bottom) - посередині комірки (зверху, знизу).

Щоб вирівняти вміст комірок таблиці по вертикалі треба вище наведений текст редагувати таким чином:

<table>

<tr>

<td height ="35" width="50" bgcolor="#FFCC33" valign="top" >

<td width="50" bgcolor="#FFCC33" valign="bottom" > <center> 1х3

</center> </tr>

</tr>

<tr>

<td height ="35" width="50" bgcolor="#336699" valign="bottom" >

<td width="50" bgcolor="#336699" valign="top" > <center> 2х3

</center> </tr>

</tr>

<table>

Тут параметр valign встановлено не для всіх комірок, щоб можна було побачити різницю у вирівнюванні вмісту комірок.

ФОРМАТУВАННЯ КОМІРОК

Параметр colspan визначае кількість стовпчиків, параметр rowspan визначае кількість рядків, на які простягається дана комірка.

ПІДСУМКОВА ЛАБОРАТОРНА РОБОТА "ВЛАСНА WEB-СТОРІНКА"

1. Створити власну Web-сторінку. Як взірець можна взяти любий особистий сайт,знайдений Вами у Internet

2. Розробити дизайн сайту, розмістити інформацію на Web-сторінці. Застосувати на cmopінці шрифты різного типу, розміру i кольору.

3. Розмістити на стортщ довшьні фотокартки i малюнки.

4. Створити на головній сторінці посилання на додаткові сторінки.

5. На додаткових сторінках розмістити відомості про cебе, друзів тощо.

6. Зберегти Web-сторінку у власній nanці.

СПИСОК ЛІТЕРАТУРИ

1. Шестопалов Є.А. Internet для початківця. Посібник з інформатики, Книга 8. 2003 – 96 с.

2. Петюшкин А. Книга Профессиональное программирование HTML в Web-дизайне, "БХВ-Петербург", 2004 г., 400 с

3. Сергеев А. Книга HTML и XML. Профессиональная работа, "Вильямс", 2004 г., 880 с

4. Петюшкин А. Книга HTML в Web-дизайне, "БХВ-Петербург", 2004 г., 400 с

5. Дригалкин В. Книга HTML в примерах. Как создать свой Web-сайт. Самоучитель, "Вильямс", 2003 г., 192 с.