Створення простої web-сторінки

СТВОРЕННЯ ПРОСТОЇ WEB-СТОРІНКИ



Методичні вказівки, вправи, лабораторні роботи, питання для самоконтролю





ЗМІСТ



ВСТУП

ВСТУП В МОВУ HTML

СТРУКТУРА HTML-ДОКУМЕНТА

ВСТАНОВЛЕННЯ КОЛЬОРУ ТЕКСТУ

ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ

ПАРАГРАФ

СТВОРЕННЯ ЗАГОЛОВКА

ПИТАННЯ ДЛЯ САМОКОНТРОЛЮ

ГРАФІКА I ПОСИЛАННЯ НА WEB-СТОРІНЦІ

ВСТАВКА МАЛЮНКІВ

ПОСИЛАННЯ

СПИСКИ

ВІДСТУПИ

ПИТАНИЯ ДЛЯ САМОКОНТРОЛЮ:

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

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

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

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

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

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


ВСТУП



Web-сторінка - це створений за допомогою мови HTML текстовий файл, який можна відобразити у вікні Web-броузера.

Для створення i редагування HTML-файла можна скористатися будь-яким текстовим редактором. Якщо HTML-файл відкрити за допомогою засобів перегляду, наприклад, Internet Explorer, він відображає текст, графіку i гіперпосилання на інші Web-сторінки.

Гіперпосилання - це фрагменти тексту або зображення на Web-сторінці, які дозволяють клацанням на них відкривати інші Web-сторінки.

Гіперпосилання виглядає, як підкреслений текст. Курсор миші на гіперпосиланні набуває форми руки. При клацанні на гіперпосиланні відкривається зв'язаний з ним документ. Якщо е доступ до Internet, гіперпосилання на Web-вузли відкриють Internet Explorer i доступ до відповідного Web-вузла. Гіперпосилання дають можливість користувачу переходи на Web-сторінках вад одного матеріалу до іншого.

Користувачі WWW можуть не тільки переглядати чужі Web-сторінки, але и створювати свої. Щоб створювати Web-сторінки, нема необхідності вивчати мову HTML. Можна конвертувати у Web-сторінки документи, створенні за допомогою текстового процесора Word, або за допомогою засобу Prints Page Express, що є в складі Windows'98.

Проте конвертуванні документи містять, як правило, багато зайвих чи нераціонально використаних елементів, що значно сповільнює роботу з ними, особливо в умовах несучасних каналів зв'язку.


ВСТУП В МОВУ HTML



Мова HTML (мова гіпертекстової розмітки) призначена для опису Web-сторінок i не є мовою програмування. Вона призначена для розмітки текстових документів, тобто для їх форматування. Всі Web-сторінки, які є в Internet, створені за допомогою мови HTML.

Керуючим елементом мови HTML є тег, який визначає, як буде виглядати відповідний фрагмент на екрані броузера.

Тег - це команда HTML формування вигляду фрагменту Web-сторінки, яка завжди записується в кутові дужки.

Наприклад, <I> - почати виводити текст курсивом, <B> - почати виводити текст напівжирним.

Закриваючий тег, який припиняє дію відповідної команди, починається з “/”. Наприклад, </I> (або </B>) - припинити виведення тексту курсивом (або напівжирним). Ці теги можна використовувати комбіновано.

Наприклад,так:

<В>напівжирний<I>напівжирний+кусив</I>напівжирний</В>

Теги типу <I> i <В> ще називають контейнерами, бо між ними знаходиться фрагмент тексту. Не всі теги є контейнерами. Наприклад, тег <IMG> - розміщує на сторінці зображення.

HTML-тег може мати параметри, ям називаються атрибутами.

Атрибут повідомляє броузеру додаткову інформацію про особливості застосування даного тега.

Наприклад, тег, який створює гіпертекстове посилання, повинен мати атрибут, що визначає URL Web-сторінки, на яку вказує посилання. Атрибут може мати значення. Ім'я атрибуту i значення розділяються знаком "=". Нехай треба створити гіпертекстове посилання на HTML-файл, для чого вказується URL цього файла як значення атрибута HREF. Атрибут разом з наданим йому значенням розташовується перед закриваючою кутовою дужкою тега <А>:

<А HREF=example.htm>



СТРУКТУРА HTML-ДОКУМЕНТА



Bci HTML-документа будуються за визначеними правилами:

				текст документа починаеться тегом <HTML> i заюнчуеться тегом </HTML>;

			всередині контейнера <HTML> знаходяться ще два контейнери <HEAD> (заголовок Web-сторінки) і <BODY> (її вміст);

			всередині; контейнера <HEAD> знаходяться інші контейнери, серед них <TITLE> (рядок символів заголовка вікна броузера).

Web-сторінка зберігається в текстовому файл з розширенням HTML або НТМ.

Наприклад, закінчений HTML-файл може мати такий вигляд:

<html>

<head>

<title>Mій перший крок</title>

</head>

<body>

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

</body>

</htmlt>

Треба набрати цей текст будь-яким редактором (наприклад, "Блокнот"), зберегти його з довільним іменем, але обов'язково з розширенням .html або .htm (наприклад, prikladl.html). Якщо тепер відкрити програму Internet Explorer i виконати команду "Файл" -> "Открыть" -> кнопка "Обзор..." -> prikladl.html, на екрані броузера цей HTML-файл буде мати наведений вигляд (Рисунок 1) (зверніть увагу на розташування текстів "Мій перший крок" i "Привіт, це моя перша сторінка").




Рисунок 1. Результат виконання файлу prikladl.html



При відображенні HTML-файла броузером зайві пропуски ігноруються. Якщо розділити два слова трьома пропусками, то на екрані між словами залишиться один пропуск, а кілька порожніх рядків на екрані броузера будуть замінені на один. Коли текст досягає правої границі вікна, він автоматично переходить на новий рядок.

Все, що розташовано між тегами <head> </head>, - це службова інформація.

Все, що розташовано між тегами <body> </body>, - це безпосередній вміст документа.

ВСТАНОВЛЕННЯ КОЛЬОРУ ТЕКСТУ



#000000

Чорний

#000080

Темно-синій

#0000FF

Блакитний

#800080

Пурпуровий

#FF00FF

Бузковий

#FF0000

Червоний

#808080

Сірий

#C0C0C0

Срібний

#008000

Зелений

#008080

Темно-зелений

#00FF00

Яскраво-зелений

#FFFFFF

Білий

#800000

Каштановий

#FFFF00

Жовтий



Наведемо кілька базових кольорів HTML.



Щоб задати колір для всього документа, треба дати відповідну команду в <body>. Наприклад, так:

<body text="#336699">

Teг <font></font> - багатофункціональний. За його допомогою можна задавати не тільки колір тексту в конкретній частині документа, але й розмір i вид шрифту (про це далі).



ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ



Колір фону встановлюється за допомогою знайомого тега <body>. Наприклад, чорний фон встановиться командою:

<body bgcolor="#000000">

Якщо колір в <body> не вказувати, то з мовчазної згоди він буде білим (або будь-яким іншим). Тому краще колір фону встановлювати, щоб не було не передбачуваного кольору фону.

Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad2.html:

<html>

<head>

<ы1е>Мій перший крок</title>

</head>

<body text="#336699" bgcolor="#FFFFFF">

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

<br>

<font со1ог="#ССОООО"> Ласкаво просимо! </font>

</body>

</html>

Зверніть увагу: в тезі <body> одночасно встановлюється колір тексту документа i колір фону.

Це означає, що весь текст сторінки буде сірим, крім тексту, для якого спеціально встановлёно інший колір. Якщо колір тексту в <body> не задавати, то "з мовчазної згоди" він буде чорним.

Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі, можна встановлювати інші кольори для тексту i фону, спостерігати результат.

Якщо змін не видно, то це означає, що зміни внесені неправильно, або ви забули зберегти документ.

Можна переглянути за допомогою броузера HTML-файл, двічі клацнувши на його піктограмі



ПАРАГРАФ



Параграфи вводяться тегом <р></р>. За допомогою параграфів можна вирівнювати текст:

по центру

<р align="center">текст</p> 

по лівому краю 

<р align="left">текст</p> 

по правому краю 

<р align="right">текст</p>

по ширині

<р align="justify">текст</p>

Якщо не встановлювати параграф, текст "з мовчазної згоди" вирівнюється по лівому краю.

Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad3.html:

<html>

<head>

<title>Mій перший крок</title>

</head>

<body text="#336699" bgcolor="#FFPFPF">

<center

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

<br>

<font color="#CCOOOO"> Ласкаво просимо! </font>

</center >

<р align="justify">

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

Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати кілька рядків в мою книгу для гостей.

</р>

</body>

</html>

Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі. Можна встановлювати інші вирівнювання тексту i подивитися результат.



СТВОРЕННЯ ЗАГОЛОВКА



Щоб виділити текст, використовують теги заголовків Н1-Н6. Наприклад, так: <НЗ>3 Новим роком! </Н3>.

Заголовки призначені для виділення невеликої частини тексту (рядок, фраза). Щоб виділити великий фрагмент тексту або тільки одне слово, треба скористатися відомими тегом <font> </font> за зразком:

<font size="+4"> TEKCT </font>

<font size="+3"> ТЕКСТ </font>

<font size="+2"> ТЕКСТ </font>

<font size="+l"> ТЕКСТ </font>

<font size="+0"> ТЕКСТ </font>

<font size="-l"> текст </font>

<font size="-2"> текст </font>

Параметр size задає розмір шрифту, але, на відміну від заголовків, текст не виділяється жирним шрифтом i немає примусового перенесення. Написання тексту задається за допомогою тегів:

<b> Жирний текст </b> 

<i> Текст курсивом </i> 

<u> Підкреслений текст </ u >

Для фрагмента тексту можна застосовувати кілька meгів. Наприклад: <b> <i> Жирний курсив </i> </b>

Назва шрифту задається за допомогою тегів:

<font face="ARIAL"> шрифт Arial </font> 

Тут за допомогою атрибута face задано шрифт Arial.

Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad4.html:

<html>

<head>

<title>Mій перший крок</title>

</head>

<body text="#336699" bgcolor="#FFFFFF">

<center>

<НЗ>Привіт, це моя перша сторінка.</НЗ>

<br>

<font color="#CCOOOO"> <H1> Ласкаво просимо! </H1> </font>

</center >

<p align="justify">

<font size="+2"> Шановний колего! </font> Я вивчаю мову 

<font size="+l"> HTML, </font> щоб створити власну <i> домашню Web-сторінку </i> для спілкування з друзями i знайомими. Щоб вони могли <b> <i> подивитися мою фотокартку </i> </b>, прочитати про мене, написати кілька рядків в мою <u> книгу для гостей. </u>

</р>

</body>

</html>

Якщо за допомогою броузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, на екрані він буде мати наведений вигляд (Рисунок 2) (зверніть увагу на розміри i написання шрифтів текстів "Привіт, це моя перша сторінка", "Ласкаво просимо!" i "Шановний колего!...", а також інші фрагменти тексту).





Рисунок 2. Результат виконання файлу priklad4.html



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

Якою мовою створюється Web-сторінка i яким чином відображується? 

Що таке "гіперпосилання"? Який воно має вигляд i як ним користуватися? 

Що таке "тег"? Для чого теги використовуються? 

Яку структуру має HTML-документ? 

Як відобразити на екрані HTML-документ? 

Як мовою HTML встановити колір тексту? 

Яким тегом одночасно встановити колір тексту i фону? 

Як вирівняти текст по центру, по ширині, по лівому або правому краю?

Якими засобами мови HTML виділити фрагменти тексту? 

Якими засобами мови HTML задати написання тексту або (i) вид шрифту?

ГРАФІКА I ПОСИЛАННЯ НА WEB-СТОРІНЦІ



Вставка малюнків

Щоб вставити малюнок, треба скористатися тегом:

<img src="my.jpg">, 

де my.jpg -ім'я файла, що містить малюнок. Замість my.jpg можна вставити ім'я будь-якого іншого малюнка (з розширенням jpg, gif, png, bmp). Головне, щоб між лапками стояв шлях та ім’я файла малюнка (у наведеному прикладі малюнок знаходиться в одній папці з файлом HTML-документа).

Якщо малюнок знаходиться в іншій папці, то його краще переписати в папку, де знаходиться HTML-документ.

Для "співіснування" малюнка (наприклад, pr1.png) i тексту документа використовують теги:

малюнок з лівого краю, текст його обтікає справа:

<img src="prl.png" align="left">

малюнок з правого краю, текст його обтікає зліва:

<img src="prl.png" align="right">

Kpiм параметрів align, існують ще кілька параметрів:

відстань між текстом i мапюнком по вертикалі (тут 10 пікселів):

<img src="prl.png" Vspace="10">

відстань між текстом i малюнком по горизонталі (30 пікселів):

<img src="prl.png" Hspace="30">

опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"):

<img src="prl.png" alt="моя фотокартка">

ширина малюнка (тут 100 пікселів):

<img src= "pri.png" width="100">

висота малюнка (тут 200 пікселів):

<img src="prl.png" height="200">

рамка навколо малюнка (тут товщина лінії 5 пікселів):

<img src="prl.png" border="5">

Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:

<img src="prl.png" aling="left" Hspace=30 Vspace=5 alt="моя фотокартка">

Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, при встановленні курсору миші на малюнку з'явиться напис "моя фотокартка".

Спробуйте в папку з HTML-файлом переписати довільний малюнок (наприклад, з ім'ям photo.jpg). В HTML-файл за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad5.html:

<html>

<head>

<title> Мій перший крок </title>

</head>

<body text="#336699" bgcolor="#000000">

<center>

<H3>Привіт, це моя перша сторінка.</H3>

<br>

<font color="#CCOOOO"> <H1> Ласкаво просимо! </H1> </font>

</center >

<img src="photo.jpg " align="left" HSPACE=30 VSPACE=5

alt="моя фотокартка" WIDTH=80 HEIGHT=80>

<p align="justify">

<font size="+2"> Шановний колего !</font> Я вивчаю <font size="+l">

мову HTML, </font> щоб створити власну <i> домашню Web-сторінку</i> для спілкування з друзями i знайомими. Щоб вони могли <b> <i>подивитися мою фотокартку, </i> </b> прочитати про мене, написати

кілька рядків в мою <u> книгу для гостей. </u>

</р>

</body>

</html

Рекомендуеться за допомогою-броузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, а також встановлювати інші параметри розташування фотокартки, подивитися результат.



ПОСИЛАННЯ



Web-сторінка може складатися із кількох документів. Один з них головний з ім'ям index.html або main.html - він відкривається першим i повинен обов'язково лежати на вашему сайті в Internet.

Інші документи можна називати як завгодно (наприклад, photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.htmi). Kpaщe, шоб вони знаходились в одній nanui з HTML-документом.

Посиланням на інші документи як частини нашої Web-сторінки може бути текст або малюнок.

Нехай в тай же папці з головним документом index.html створено новий текстовий документ (наприклад, з ім'ям prf.html). Вміст документа може бути довільним i мати вашу фотокартку. Для цього випадку в основному документі фразу "подивитися мою фотокартку" можна зробити посиланням. Тег посилання на цей документ буде виглядати так:

<а href="prf.html"> подивитися мою фотокартку </а>

Щоб встановити колір посилання, треба доповнити вже ввдомий тег <body> новими параметрами:

<body text="#336699" bgcolor="#FFFFFF"

link="#339999" alink="#339999" vlink="#339999">

(link - колір посилання, alink - колір активного посилання, vlink -колір посилання, яке відвідували).

Тут кольори всі однакові, але вони можуть бути і різними.

Посилачия на поштову скриньку записусгься за зразком:

<а href=mailto:lab3@hirup.km.ua> Lab3@hirup.km.ua - пишітъ листи </а>

Спробуйте в папці з головним документом створити додатковий HTML-файл з ім'ям prf.html i з довільним текстом. Наприклад, таким:

<html>

<head>

<title> друга сторінка </title>

</head>

<body text="#CCOOOO" bgcolor="#FFFFFF">

<img src="photo.jpg" align="left" HSPACE=30 VSPACE=5 ALT="моя фотокартка" WIDTH=80 HEIGHT=80>

<p align="justify">

На фотокартці я. Можемо стати друзями, якщо вам сподобалась мояособа.

<br>

<а href="mailto:Lab3@hirup.km.ua"> Lab3@hirup.km.ua - пишіть листи

</а>

</р>

</body>

</html>

У файл priklad5.html за допомогою редактора "Блокнот" додайте нові елементи i збережіть з новим ім'ям index.html:

<html> 

<head>

<title> Мій перший крок </title> 

</head>

<body text="#336699"bgcolor="#FFPFFF" link="#336699" alink="#336699" vlink="#336699" > <center>

<H3>Привіт, це моя перша сторшка</НЗ> <br>

<font color="cc0000"> <H1>Ласкаво просимо !</H1></font> </center>

<p align="justify">

<font size="+2"> Шановний колего! </font> Я вивчаю <font size="+l"> мову HTML,</font> щоб створити власну <i>домашню Web-сторінку </i> для спілкування з друзями i знайомими. Щоб вони могли <а href="prf.html"> подивитися мою фотокартку </а>, прочитати про мене, написати кілька рядків в мою книгу для гостей. </р>

</body> 

</html>

Можна за допомогою броузера переглянути файл основного документа index.html, двічі клацнувши на його піктограмі.

Щоб перейти на додаткову Web-сторінку, досить встановити курсор на посилання "подивитися мою фотокартку" i клацнути.

Щоб повернутся на сторінку основного документа, треба на панелі інструментів броузера натиснути кнопку "Назад".



СПИСКИ



Списки маркуються за допомогою тега <li> </li> за взірцем:



Маркер

Опис



<li type="disk"> Задуйвітер </li>



<li type="circle"> Макогоненко </li>



<li type="square"> Петренко </li>



ВІДСТУПИ



Для встановлення одного, двох i трьох відступів використовується тег <ul> </ul> за зразком:

<ul> один ввдступ </ul>

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

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



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

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

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

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

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

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

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

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

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

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



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



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

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



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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

Здійснити перехід у додатковий документ за допомогою посилання. Повернутися на головну сторінку. Закрити програму 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-СТОРІНКА"



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

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

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

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

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

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


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



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

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

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

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

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