Теоретична частина Розміщення інформації в таблиці

Таблиці дозволяють розташовувати дані не тіль­ки по рядках, але й по стовпцях, надаючи нам мож­ливості гнучкої двовимірної структури. Таблиці зручні для порівняння і зіставлення інформації. Та­блиці роблять сторінку інформативною, акуратною, організованою. Під час створення таблиць викорис­товується принцип вкладення: усередині основногс елементу <TABLE> створюються елементи: заголо­вок таблиці <ТС>, рядок <TR>, усередині якого ро змішуються елементи осередку <ТН>.

<TABLE>... </TABLE> — тег, що описує таблицю

align= — вирівнювання таблиці по горизонтал (значення: Left, Center, Right).

width= ширина таблиці (значення: число в пік селях або число% у відсотках до ширини вікні браузера).

bgcolor= — колір заливки елементів таблиці, за дається стандартним чином.

border= — показує на екрані сітку таблиці (зна чення: число — товщина лінії), якщо параметр рів ний 0, лінії не видно.

background="URL" — адреса файла, що містить малюнок.

<ТС> ... </ТС> — заголовок таблиці.

<ТН> ... </ТН> — заголовки рядків і стовпців, виводяться крупнішим напівжирним шрифтом.

colspan= п — об'єднання осередків у рядку п — кількість об'єднуваних осередків.

<TR> ... </TR> — визначають рядки таблиці.

<TD>... </TD> — розбивають рядок на осередки.

align= — вирівнювання тексту в осередку по го­ризонталі (значення: Left, Center, Right).

valign= — вирівнювання тексту в осередку по ве­ртикалі (значення: Тор — по верхньому краю; Mid­dle — по середині; Bottom — по нижньому краю).

rowspan= п — об'єднання осередків у стовпці, п

— кількість об'єднуваних осередків. Форматування тексту в осередку може викону­ватися будь-яким способом тегами <FONT>, <P> або <Нп> з використанням стилів <STYLE>, або без них.

Об'єднання осередків

Додаткові можливості з форматування меж для таблиць на сторінці

frame= — вид рамки таблиці (значення: void — немає зовнішніх меж, above — верхня межа, below

— нижня межа, hsides — верхня і нижня межі, vsides — ліва і права межі, lhs — ліва межа, rhs — права межа, box — зовнішні межі показані).

rules= — вид сітки усередині таблиці (значення: попе — сітка відсутня, groups — сітка для групи осередків, rows — горизонтальні лінії, cols — вертикальні лінії, all — звичайна сітка).

summary=" . " — текст коментаря.

cellspacing= — ширина фронтальної грані сітки в пікселях (значення: число).

cellpadding= — ширина порожнього простору навколо тексту в осередку (значення: число в піксе­лях або число% у відсотках до шцмну осередку).

bordercolor= — колір сітки таблиці, задається стандартним чином.

bordercolordark= \

bordercolorlight= / — KOjnp С1ТКИ 3 Додатковим

ефектом тривимірності, задається стандартним чином.

Порядок виконання роботи

1. Відкрийте сторінку «Перший досвід» для ре­дагування HTML-коду.

2. У розділ «Учитися ...» додати такий фрагмент:

<TABLE align=center border=4 ><! —

Таблиця 5 рядків 4 стовпці — >

<TO<Pstyle="font-size: 2Opt; font-style: Italic; color:

В1ие">Мої досягнення в навчанні</ТС>

<TR bgcolor=#AA4400><TH>npeAMeT</TH><TH>

8 клас</ТН><ТН>9 клас</ТН><ТН>

10 клас </THx/TR>

<TR align=center bgcolor=#AAAAFF><TD align=left

bgcolor=#AA4400><FONTcolor=Yellow>

Російська MOBa</FONT></TDxTD> 10</TD>

<TD> 10</TD><TD> 10</TD></TR>

<TR align=center bgcolor=# AAAAFF ><TD align=lef t

bgcolor=#AA4400><TONTcolor=Yellow>

Українська MOBa</FONTx/TDxTD>10</TD>

<TD> 10</TD><TD> 10</TD></TR>

<TR align=center bgcolor=# AAAAFF ><TD align=left

bgcolor=#AA4400><roNT color=Yellow>

MaTeMaTHKa</FONT> </TD><TD>10</TD> <TD>10

</TD><TD> 10</TDx/TR>

<TR align=center bgcolor=# AAAAFF ><TD align=lef t

bgcolor= # AA4400> <FONT color=Yellow>

lH^pMaTHKa</FONTx/TD><TD>10</TD><TD>10

</TD><TD> 10</TD></TR>

</TABLE>

3. Збережіть зміни в програмі Блокнот і прогля­ньте результат у браузері. На сторінку додана прос­та таблиця.

4. До розділу «Учитися...» додайте нову таблицю:

<TABLE align=center border=4

cellspacing=3 bgcolor=#88AAAA >

<TC><FONT color=red size=+3>O6'eflHaHira комірок

у таблицК/FONTx/TO

<TR><TH rowspan=2>&nbsp</TH><TH colspan=2>

Загальний зaгoлoвoк</TH></TR>

<ТНхТН>Заголовок 1</ТН><ТН>Заголовок 2

</THx/TR>

<ТН><ТН>Рядок 1</ТНхТНЖомірка 1.1</ТН>

<ТН>Комірка 1.2</THx/TR>

<TRxTH>Phaok 2</ТН><ТНЖомірка 2.1</ТН>

<ТНЖомірка 2.2</THx/TR>

</TABLE>

У розділ «Мої досягнення» додайте таку таблицю:

Оцінки Предмети        9 клас          10 клас         11 клас

І сем. II сем. І сем. II сем. І сем. II сем.

Українська мова

Геометрія

Інформатика

Фізика

5. Збережіть зміни в програмі Блокнот і прогля­ньте результат у браузері. На сторінці розташовані складні таблиці.

 

 

ПРАКТИЧНА РОБОТА №8

Мета роботи. Навчити створювати стиль для таб­лиць й описувати його у файлі каскадних таблиць стилів.

Теоретична частина

Додаткові можливості з форматування таблиць за допомогою каскадних таблиць стилів

Браузер бере на себе промальовування рамки та­блиці. Розмір рамки може бути автоматично узгод­жений з розміром вікна браузера і з розміром інфор­мації, що знаходиться в осередку (тексту або малю­нка). Таблиці дозволяють вирішувати й чисто дизайнерські завдання: вирівнювати частини сторі­нки щодо одна одної, розміщувати поряд малюнки і текст, управляти колірним фоном і т. д.

background-color — колір фону [значення: Trans­parent (прозорий) або в стандартному форматі].

background-image — фоновий малюнок [значен­ня: None, url (net.gif)].

border — задає ширину (border-width) [значен­ня: Thin (тонка), Medium (середня), Thick (широка), стиль (border-style) [None (не показана), Dotted (ра­мка з крапок), Dashed (пунктирна), Solid (суціль­на), Double (подвійна), Groove (рамка у дві грані), Ridge (інверсія Groove), Inset (одна грань нахилена всередину), Outset (інверсія Inset) і колір рамки (border-color) (задається стандартними способами)]. Приклад: TABLE {border: 5px Solid Blue}.

border-width — товщина рамки [значення: Thin — тонка, Medium — середня, Thick — широ­ка, число].

border-style — стиль рамки [None (не показа­на), Dotted (рамка з крапок), Dashed (пунктирна), Solid (суцільна), Double (подвійна), Groove (рам­ка у дві грані), Ridge (інверсія Groove), Inset (од­на грань нахилена всередину), Outset (інверсія Inset)].

border-color — колір рамки задається стандарт­ним чином.

border-collapse — спосіб промальовування рам­ки [значення: separate — тривимірна рамка; col­lapse — плоска рамка].

vertical-align — вертикальне вирівнювання [зна­чення: Тор — по верхньому краю, Middle — по цен­тру, Bottom — по нижньому краю, Baseline — по пе­ршому рядку].

width — ширина таблиці [значення: auto — виз­начається браузером; число; або відсоток — щодо ві­кна браузера].

height — висота таблиці [значення: auto — виз­начається браузером; число; або відсоток — щодо ві­кна браузера].

margin — величина відступів навколо елементу [значення: auto — визначається браузером; число; або відсоток].

Приклад:

TABLE {margin: 12рх 12рх 12рх 12 рх}.

padding — величина відступів між межами еле­менту і його вмістом [значення: auto — визначаєть­ся браузером; число з одиницями вимірювання або відсоток].

Порядок виконання роботи

1. Відкрийте файл style.css для редагування кас­кадних таблиць стилів.

2. Опишіть у файлі стиль форматування таб­лиць:

— стиль, вирівнювання і розташування тексту в осередках заголовка;

— стиль, товщину ліній зовнішніх меж і їх колір;

— стиль тексту, його вирівнювання і розташу­вання в осередках таблиці.

3. Збережіть зміни. Прогляньте результат у бра-узері. (Під час копіювання стилів у файл CSS не за­будьте замінити знак «рівно» на «двокрапку»).

 

ПРАКТИЧНА РОБОТА №9

Мета роботи: Вироблення навичок розміщення на сторінці малюнків і фотографій. Практично відп­рацювати технологію використання гіперпосилань на сторінці.

Вставка малюнка на сторінку

Використання зображень на сторінці пожвавлює її, робить привабливою, яскравою, індивідуальною, крім того, є ситуації, коли без них не обійтися — краще один раз побачити, ніж сто разів почути. Але графічні файли мають значний обсяг, а це збільшує час завантаження сторінки, тому кращий вихід — компроміс — розумне поєднання графіки і тексту. У Інтернеті використовують графічні файли формату JPG (JPEG) — для розміщення картинок і фотогра­фій, і формату GIF для розміщення динамічних зоб­ражень.

<IMG src=URL> — розміщення картинки на сторінці, якщо картинка в тій же теці, що і сторінка указується її ім'я, наприклад: <IMG src=dog.jpeg>, інакше указується повна адреса: <IMG src=http:// www.ecc.crimea.ua/dog.jpeg>.

аlt="Підпис до картинки" — виводиться на екран, якщо у браузера відключений режим показу картинок або картинка не знайдена;

alt="Підпис до картинки" — виводиться на екран під час наведення на картинку покажчика миші;

align="~." — позиціювання картинки щодо тексту;

— вертикальний розмір картинки (значення: число) — задається в пікселях;

height="..." — горизонтальний розмір картинки (значення: число) — задається в пікселях, якщо за­даний тільки один параметр, другий — змінюється пропорційно (зменшення розміру не скорочує часу завантаження).

Наприклад:

<IMG src=dog.jpeg height="200" alt= "Підпис до картинки" alt="Підпис до кар­тинки".

Зображенням картинки можна управляти за до­помогою статичних і динамічних фільтрів, викори­стовуючи властивості таблиць стилів:

filter — властивість стилів визначає стиль демо­нстрації картинки (значення: blur — створює ефект руху, fliph — відображає картинку зліва-направо, flipv — відображає картинку зверху-вниз, wave — синусоїдальне затемнення по вертикалі, Хгау — ре­нтгенівський знімок).

Наприклад:

<IMG stile="filter: fliph" src=dog.jpeg width= "300" height="200" аlt="Підпис до картинки" alt="Підпис до картинки">.

Є багато умов, які впливають на перегляд Web-сторінок, розрішення дисплея, встановлене на ком­п'ютері, встановлений розмір вікна браузера і т. д., що приводить до спотворення вигляду сторінки. Рекомендується для розташування картинок і тексту використовувати таблиці.

Використання гіперпосилань на сторінці

Гіпертекстове посилання використовується для задання зв'язків між окремими сторінками в Інтер-неті, але їх можна використовувати і для навігації по одному документу. Гіперпосилання — один з найважливіших елементів сторінки. Як посилання може виступати і текст, і малюнок. Посилання, заз­вичай, синього кольору і підкреслені, при наведенні на посилання покажчика миші, вона змінює колір, а покажчик вигляд. У загальному випадку в поси­ланні указується URL-адреса сторінки, на яку здій­снюється перехід.

URL-адреса складається з трьох частин: протоко­лу, вузла (сервера) Інтернету та імені файла того, що містить сторінку, на яку виконується перехід. Нап­риклад: http://www.crimea.ua/creat.htm/.

<А>"Елемент"</А> — тег гіперпосилання, "Елемент" — об'єкт, який відіграє роль посилання (текст або малюнок);

href=URL — атрибут, що вказує адресу документа;

href="http://www.netscape.com" — посилання вказує на документ, що знаходиться в мережі Інтернет;

href="file:///C:/temp\text.txt" — посилання вказує на документ на локальному диску;

href="../my web/my photo.jpeg" — посилання вказує на документ, що знаходиться в теці того ж рівня;

href="./my web/my photo.jpeg" — посилання вка­зує на документ, що знаходиться у вкладеній теці;

href="mailto:kalamit@ecc.crimea.ua" — викли­кає діалог відправки електронного повідомлення за вказаною адресою;

title="IIiдпис до посилання" — виводиться на екран у разі наведення на посилання покажчика ми­ті (якщо посилання на великий документ або малю­нок правила хорошого тону рекомендують указува­ти тут розмір файла).

Приклад:

<А href="http://www.netscape.com">"CaftT про­грами NetScape"</A>.

Як посилання може використовуватися малю­нок:

<А href="http://www.mcp.com/que/"> <IMG SRC="gifs /quelogo.gif > </А>.

У тексті сторінки гіперпосилання виділяються кольором, підкресленням, у випадку наведення на посилання покажчик миші змінює вигляд. Тег BODY має атрибути, які дозволяють змінити кольо­ри посилань:

link="." — колір посилань, що не використовува­лися, на сторінці (задається стандартним способом);

vlink="." — колір посилань, що використовува­лися, на сторінці (задається стандартним способом).

alink="." — колір активного посилання на сторі­нці (задається стандартним способом).

Гіперпосилання можуть використовуватися і на одній сторінці або документі (дуже зручно, як­що документ великий). Для такого документа не­обхідно описати і посилання, й елементи, на які вони вказують.

<А name="#Lab1"><Н2>"Мои увлечения"</Н2> </А> — елемент (якір) — розділ на сторінці, на який указує посилання.

<А href="#Labl">"Мои увлечения"</A> — поси­лання на розділ сторінки.

Порядок виконання роботи

1. Відкрийте сторінку «Перший досвід».

2. У розділ сторінки «Про себе» вставте своє фото.

3. Змініть вирівнювання фото щодо тексту.

4. Перевірте зміну розташування фото і тексту у разі зміни розмірів вікна браузера.

5. Створити таблицю, що містить один рядок і два осередки.

6. Помістити в один осередок фото, а в іншу текст.

7. Перевірити зміну розташування фото і тексту у випадку зміни вікна браузера.

8. На початку сторінки розташуйте новий роз­діл «Зміст», до якого включіть назви розділів своєї сторінки.

9. Елементи змісту оформте у вигляді посилань на розділи.

10. Заголовки розділів доповніть якорями.

11. Перевірте роботу посилань на сторінці.

 

ПРАКТИЧНА РОБОТА №10

Мета роботи: Отримати навички розміщення на сторінці зображення-карти.

---

Дата добавления: 2020-04-25; просмотров: 75; Мы поможем в написании вашей работы!

Поделиться с друзьями:

---

---

Мы поможем в написании ваших работ!