Учебное пособие: Створення простої web-сторінки
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>
<td>lxl</tr>
<td>lx2</tr>
<td>lx3</tr>
</tr>
<tr>
<td>2xl</tr>
<td>2x2</tr>
<td>2x3</tr>
</tr>
<table>
Щоб у вздповвдних комірках таблиці
задати колір фону (параметр bgcolor), висоту (height) i ширину (width) комірок
таблиці в пікселях, треба вище наведений текст доповнити таким чином:
<table
<tr>
<td height ="35"
width="50" bgcolor="#FFCC33">lxl</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ТУ
КОМІРОК
Щоб вирівняти вміст комірок таблиці
по горизонталі, треба вище наведений текст редагувати таким чином:
<table> <tr>
<td height ="35"
width="50" bgcolor="#FFCC33"> <center> 1х1
</center> </tr>
<td width="50"
bgcolor="#336699"> <center> 1х2 </center>
</tr>
<td width="50"
bgcolor="#EFCC33" > <center>1х3</center>
</tr> </tr> <tr>
<td height ="35"
width="50" bgcolor="#336699">
<center>,2xl</tr>
<td width="50"
bgcolor="#FFCC33"> <center> 2х2 </center>
</tr>
<td width="50"
bgcolor="#336699"> <center> 2х3 </center> </tr> </tr>
<table>
В кожній комірці таблиці може
знаходитись текст, малюнки i навігь вкладені таблиці. Їх вміст форматусться за
допомогою вже відомих тегів. Кожна комірка таблиці є ніби окрема кімната, тому
теги для центрування в попередньому прикладі довелось писати для кожної
комірки.
Вирівнювання по вертикалі
виконуеться за допомогою атрибута valign="middle" (top, bottom) - посередині комірки
(зверху, знизу).
Щоб вирівняти вміст комірок таблиці
по вертикалі треба вище наведений текст редагувати таким чином:
<table>
<tr>
<td height ="35"
width="50" bgcolor="#FFCC33" valign="top" >
<center> 1х1
</center></tr>
<td width="50"
bgcolor="#336699"> <center> 1х2 </center> </tr>
<td width="50"
bgcolor="#FFCC33" valign="bottom" >
<center> 1х3
</center> </tr>
</tr>
<tr>
<td height ="35"
width="50" bgcolor="#336699" valign="bottom"
>
<center> 2xl</tr>
<td width="50"
bgcolor="#FFCC33"> <center> 2х2 </center> </tr>
<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 с.
|