Додавання стилів у ваш html-документ

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

bold (жирний)
italic (похилий)
mono spaced (type writer - з використанням фіксованих шрифтів)

Ви можете комбінувати різні види стилів, наприклад жирний і похилий.

Стиль	Елемент або тег	Результат
Bold	<B> Цей текст жирний </B>	Цей текст жирний
Italic	<I> Цей текст похилий </I>	Цей текст похилий
Mono spaced	<TT> Цей текст із непроп. шрифтом </TT>	`Цей текст із непроп. шрифтом`

Додаткові стилі:

big (великий)
small (маленький)
sub (підстрічковий)
sup (надстрічковий)

Стиль	Елемент або тег	Результат
Big	Цей текст <BIG> великий </BIG>	Цей текст великий
Small	Цей текст <SMALL> маленький </SMALL>	Цей текст маленький
Sub	Цей текст <SUB> підстрічковий </SUB>	Цей текст _{підстрічковий}
Sup	Цей текст <SUP> надстрічковий</SUP>	Цей текст ^{надстрічковий}

СПЕЦІАЛЬНІ ТЕГИ HTML

Escape-послідовності

Деякі символи є керуючими символами в HTML і не можуть прямо використатися в документі:

ліва кутова дужка "<"
права кутова дужка ">"
амперсанд "&"
подвійні лапки """

Щоб використати дані символи в документі, необхідно замінити їхніми escape-послідовностями:

<	<
>	>
&	&
"	"

ЗАВДАННЯ

Створити одну сторінку web-сайту. Яка містить особисту інформацію (Прізвище, ім’я, по батькові, дата народження, спеціальність та ін). Ця інформація повинна відображатися структуровано та чітко.
Переформатувати дані сайту використовуючи шрифтові оформлення.

КОНТРОЛЬНІ ПИТАННЯ

1. Який тег заголовної частини документа?

2. Який тег сповіщає броузер про розрив рядка?

3. Вкажіть тег, який створить текст такого стилю – підкреслений напівжирнийтекст.

4. Який тег створює абзац?

5. Що таке escape-послідовності? Коли вони використовуються?

6. Як задати цитату у web-документі?

7. Для чого використовується тег <TITLE>?

8. Який тег розміщує текст посередині рядка?

9. Який тег повинен бути першим у web-документі?

10. В рамках дії якого тегу записують вміст документа?

11. Коли використовують рівні заголовків <Hx>?

12. Вкажіть послідовність вкладення тегів у web-документі.

Лабораторна робота № 2

Тема: Добавлення зображень на сайт. Використання списків.

Мета: Навчити додавати картинки на сайт. Створення списків.

ТЕОРЕТИЧНІ ВІДОМОСТІ

КАРТИНКИ В HTML

Картинки уставляються тегом <img src=" /шлях до картинки/назва картинки. розширення картинки ">.

Код, використаний у картинці:

<a href=" куди переходимо при натисканні ">

<img src=" картинка.jpg " width=" ширина картинки (необов'язково) " height=" ширина картинки (необов'язково) " hspace="7" vspace="7" border="1" align="left"></a>

Тобто картинка - не що інше, як звичайне посилання, у яку уставляється код з адресою й параметрами картинки:

Де, hspace й vspace -не є обов'язковими параметрами, але при їхній наявності навколо картинки утвориться відступ у відповідну кількість пікселів від тексту. Навколо картинки за допомогою border="1" можна спорудити рамку, а при необхідності змінити розміри відображення картинки за допомогою параметрів width й height -якщо вказати в них менші розміри, чим реально в картинки, можна вписати її в будь-який практично дизайн.

ТЕГИ СПИСКІВ

v Пронумеровані списки

Пронумерований список починається стартовим тегом <OL> і завершується тегом </OL>. Кожен елемент списку починається з тега <LI>. Наприклад:

<OL TYPE=I START=15>
<LI> Програмування
<LI> Алгоритмізація
<LI> Проектування
</OL>

XV. Програмування

XVI. Алгоритмізація

XVII. Проектування

v Непронумеровані списки.

Пронумерований список починається стартовим тегом <UL> і завершується тегом </UL>. Кожен елемент списку починається з тега <LI>. Наприклад:

<UL TYPE=square>
<LI> Програмування
<LI> Алгоритмізація
<LI> Проектування
</UL>

§ Програмування

§ Алгоритмізація

§ Проектування

v Список визначень

Список визначень починається з тега <DL> і завершується тегом </DL>. Даний список служить для створення списків типу "термін"-"опис". Кожен термін починається тегом <DT>, а опис - тегом <DD>. Наприклад:

<DL>
<DT> <B> Відділ маркетингу </B>
<DD> Даний відділ займається просуванням продуктів і послуг
<DT> <B> Фінансовий відділ </B>
<DD> Даний відділ займається всіма фінансовими операціями
<DT> <B> Відділ кадрів </B>
<DD> Даний відділ займається обліком і набором нових співробітників фірми, розподілом відпусток, відстеженням лікарняних аркушів і т. буд.
</DL>

Відділ маркетингу

Даний відділ займається просуванням продуктів і послуг

Фінансовий відділ

Даний відділ займається всіма фінансовими операціями

Відділ кадрів

Даний відділ займається обліком і набором нових співробітників фірми, розподілом відпусток, відстеженням лікарняних аркушів і т.д.

v Вкладені списки

Приклад вкладених списків:

<HTML>
<HEAD>
<TITLE> Список співробітників </TITLE>
</HEAD>
<BODY>
<H2> Список співробітників нашої фірми </H2>
<H3> Складено: 30 липня 1996 року </H3>
Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії. <P>
Список може бути використаний тільки в службових цілях. <P>
<OL>
<LI> Дирекція
<UL>
<LI> Іванов И. И.
<LI> Петров К. В.
</UL>
<LI> Відділ маркетингу
<UL>
<LI> Варшавська Е. Л.
<LI> Самсонов Д. М.
</UL>
</OL>
</BODY>
</HTML>