• 9.1 Елементи на рівні блоків
  • 9.1.1 Заголовки розділів HTML документів 
  • 9.1.2 Абзаци (параграфи)
• 9.2 Списки
• 9.3 Елементи текстового рівня СТИЛІ
  • 9.3.1 Спеціальні символи
• 9.4 Робота з таблицями в  HTML
• 9.5. Робота з графічними зображеннями
  • 9.5.1 Списки визначень

9.1 Елементи на рівні блоків

Більшість елементів, які можуть з'являтися в тілі документу, підпадають під одну з двох категорій:

• елементи на рівні блоків (заголовки (від H1 до H6), параграфи (P), елементи списків (LI), і горизонтальні лінійки (HR) таблиці);
• елементи на рівні тексту (елементи виділення (EM, I, B і FONT), зв'язку для гіпертексту (A), вкладені об'єкти (IMG і APPLET) і кінці рядків (BR).

9.1.1 Заголовки розділів HTML документів 

Тіло HTML - документу може складатися з декількох розділів. HTML має шість рівнів заголовків розділів, що мають номери з 1 по 6 (заголовок першого рівня є заголовком вищого рівня). У порівнянні з нормальним текстом, заголовки виділяються тим же шрифтом у збільшеному розмірі і зі збільшеною товщиною букв.

Синтаксис заголовків :

<Hn> Текст заголовка </ Hn>,

де n - число від 1 до 6, що визначає рівень заголовка

З тегами заголовка зазвичай використовуються атрибут:

ALIGN  = значення,

де в якості значення можуть виступати наступні параметри:

LEFT  вирівнювання по лівому краю За умовчанням текст, укладений у теги <Hn> </ Hn>, центрується по лівому краю вікна.

RIGHT  вирівнювання по правому краю

Наприклад ,

<H1 ALIGN = RIGHT> Лекція з HTML </ H1>.

CENTER - вирівнювання по центру вікна. Деякі браузери не сприймають атрибут ALIGN = CENTER для тегів <Hn>. Тому іноді доцільно використовувати поєднання тегів <Hn> і <CENTER>.

Наприклад,

<CENTER> <H1> Лекція з HTML </ H1> </ CENTER>.

9.1.2 Абзаци (параграфи)

На відміну від документів в більшості текстових процесорів, переривання рядків в HTML-файлах не суттєве. Обрив рядка може відбуватися в будь-якому пункті вихідного файлу, при перегляді це переривання буде проігноровано.

Для виділення абзацу існує спеціальний тег <Р>, який вказує на початок абзацу. У справжніх версіях HTML тег "кінець абзацу" </ P> не існує. Але його вживання в розмітці документу не є помилкою, оскільки всі незнайомі символи браузер просто ігнорує.

Тег <P> використовується з атрибутом ALIGN, який може приймати значення

JUSTIFY  - вирівнювання абзацу по ширині вікна,

RIGHT - вирівнювання абзацу по правому краю вікна,

LEFT - вирівнювання абзацу по лівому краю вікна.

Елемент PRE

Визначає фрагмент заздалегідь відформатованого тексту. Для даного елемента необхідно вказувати початковий і кінцевий теги. Усередині такого елемента текст друкується шрифтом фіксованої ширини (моношріфт) і при цьому зберігається розмітка оригіналу (пробіли і символи кінця рядків).

Елемент DIV

Забезпечує поділ документа на окремі блоки. Для даного елемента необхідно вказувати як початковий, так і кінцевий теги.Елемент DIV зазвичай використовується з атрибутом ALIGN (= LEFT / CENTER / RIGHT), що вказує на спосіб вирівнювання тексту всередині тих блокових елементів, які його містять.

Елемент CENTER

Задає вирівнювання тексту по центру. Для цього елемента необхідно вказувати початковий і кінцевий теги. Більш радикальне вирішення проблеми вирівнювання текстів див. У DIV.

Елемент  BLOCQUOTE

Забезпечує розмітку цитат. Необхідно вказувати як початковий, так і кінцевий теги. Даний елемент використовується при розмітці протяжних цитат, текст яких при цьому зазвичай друкується з зсунутими краями (текст цитати буде вирівняний по лівій межі і зсунитий вправо, інформація наступна за цитатою буде виведена з деяким інтервалом навіть за відсутності тега <P>).

Елемент  HR

Забезпечує промальовування горизонтальної лінії. Не є контейнером, так що  використовувати кінцевий тег не можна .Може мати атрибути

ALIGN = LEFT | RIGHT | CENTER

- Вирівнювання по лівій межі, по правій межі, по центру відповідно.
 

NOSHADE - затемнення лінії світло сірим кольором.

COLOR = "# color" - зафарбовування лінії певним кольором. Може використовуватися як альтернатива атрибуту NOSHADE може бути використаний атрибут

SIZE = n - розмір (висота) в n пікселів,

WIDTH = m (%) - довжина в m пікселів (відсотків від розміру вікна).

Елемент  ADDRESS

При внесенні в документ тега <ADDRESS>, вказується як початковий, так і кінцевий теги. Вся інформація, розташована між тегами <ADDRESS> </ ADDRESS>, буде виділена (наприклад, у вікні браузера IE, виділення буде здійсняться курсивом) В текст, розташований між відповідними тегами вноситься інформація про автора: необхідні відомості для зв'язку з ним (ім'я , e-mail тощо). Усередині даного елемента можуть міститися теги текстового рівня.

9.2 Списки

Мова HTML підтримує наступні види списків:

• ненумеровані (невпорядковані);
• нумеровані списки (впорядковані);
• каскадні;
• списки визначень.

Невпорядковані списки

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

Для тегів <UL> і <LI> невпорядкованого списку додатково може бути використаний атрибут TYPE, що задає мітку елементу списку і може приймати значення disc (мітка за замовчуванням "), circle (є), square (). У випадку, якщо атрибут TYPE використовується командою <LI>, то дія атрибуту поширюється тільки на один, зазначений тегом, елемент списку. Якщо ж атрибут TYPE використовується командою <UL>, то його дія поширюється на весь список.

Наприклад , обидва нижченаведених фрагмента HTML-документа у вікні браузеру будуть виглядати однаково.

<UL> 
<LI TYPE = CIRCLE> невпорядковані списки;
<LI TYPE = CIRCLE> нумеровані списки;
<LI TYPE = CIRCLE> списки визначень.
</ UL>

<UL TYPE = CIRCLE> 
<LI> невпорядковані списки
<LI> нумеровані списки;
<LI> списки визначень.
</ UL>

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

Для організації нумерованого (упорядкованого) списку призначена команда <OL> ... </ OL>.

Приклад # 2: Текст :

<B> Приклад # 2 </ b> <br> HTML підтримує.
<OL> 
<LI> невпорядковані списки;
<LI> нумеровані списки;
<LI> каскадні списки. 
</ OL>

у вікні браузера -  https://sites.google.com/site/newsitukraine/html5-posibnik/pershij-rozdil/vvedenna-v-html/shcho-take-html

За замовчуванням нумерація виконується арабськими цифрами, починаючи з одиниці. Використовуючи атрибут TYPE команди <OL> можна змінити стиль оформлення списку.

Атрибут TYPE =  order-type  визначає стиль нумерації (букви або цифри),

де

order-type  = A - використовувати великі літери (латинські); 

order-type  = a - використовувати маленькі букви; 

order-type  = I - використовувати великі римські цифри; 

order-type  = i - використовувати маленькі римські цифри; 

order-type  = 1 - використовувати арабські цифри.

Атрибут START = n тега <OL> задає початкове значення списку (n -десятичне число). Приклад використання атрибута см. Приклад # 9.

Вкладені списки . Списки можуть бути довільно вкладені, хоча практично достатньо обмежитися трьома рівнями вкладених списків.

9.3 Елементи текстового рівня СТИЛІ

Текст HTML-документу (окремі слова чи речення) можна описувати спеціальними стилями. Існує два типи стилів: фізичний і логічний .

Фізичні стилі

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

До фізичного стилю форматування можна віднести наступні теги:

<B> текст </ B> - жирний шрифт (це жирний шрифт)

<I> текст </ I> - похилий шрифт (це  похилий  шрифт)

<TT> текст </ TT> - фіксований шрифт (моношріфт)

<U> текст </ U> - підкреслений шрифт (це  підкреслений  шрифт)

<STRIKE> текст </ STRIKE> - перекреслений шрифт (це  перекреслений  шрифт)

<SUB> текст </ SUB> розміщує текст в підрядковому індексі (  _{підрядковий індекс}  )

<SUP> текст </ SUP> розміщує текст в надіндексом (  ^{надрядковий індекс} )

9.3.1 Спеціальні символи

Символи <,>, & і "мають в HTML особливе значення, як символи форматування. Але іноді нам необхідно використовувати їх в тексті за своїм прямим призначенням. Для їх введення в текст, необхідно використовувати:

(!!!) Спеціальні символи чутливі до регістру: НЕ МОЖНА використовувати & LT; замість & lt;             Клікніть и тягніть для зауваження

Логічні стилі

Оскільки не можливо передбачити як буде виглядати той чи інший тег (фізичного стилю форматування) в різноманітних браузерах, використовують  логічне форматування. Теги логічного форматування сприймаються будь-яким браузером і інтерпретуються відповідно до його можливостей. До тегів логічного форматування відносяться:

<DFN> - опис визначень.

<EM> - виділення слів.

<CITE> - виділення заголовків книг, фільмів, цитат і т.і.

<CODE> - виділення програмних кодів, текстів програм і т.і. Зображується шрифтом фіксованої ширини.

<SAMP> - використовується для машинних повідомлень. Зображується шрифтом фіксованої ширини (моношріфт).

<STRONG> - служить для посиленого виділення слів. Звичайно виділяється жирним шрифтом <VAR> - використовується для символьних змінних.

До логічних стилів можна віднести і команди роботи зі шрифтами.

<FONT> - може змінювати як логічний (розмір) так і фізичний стиль шрифту. Ця команда задає колір, розмір і вид сімейства шрифтів, які використовуються в HTML-документі.

Атрибути команди <FONT>

COLOR = "#color" дозволяє задати колір шрифту.

<FONT COLOR =  color > виділяється текст </ FONT>

SIZE = n встановлює розмір шрифту. Число n при абсолютному завданні розміру може приймати значення від 1 до 7. За замовчуванням базовий розмір шрифту в документі вважається рівним 3 в абсолютних значеннях.

<FONT SIZE = n> виділяється текст </ FONT>

<FONT SIZE = ± n> Виділяється текст </ FONT>

При відносному завданні розміру число n може приймати значення від 1 до 7 із знаками плюс (+) - збільшення або мінус (-) - зменшення розміру шрифту на n пунктів по відношенню до базового розміру шрифту в документі.

<BIG> текст </ BIG> - збільшує розмір шрифту на 1 відносно базового розміру.

<SMALL> текст </ SMALL> - зменшує розмір шрифту на 1 відносно базового розміру.

Сімейства шрифтів

Для команди <FONT> ім'я сімейства шрифтів визначається атрибутом FACE =. Для команди <BASEFONT> атрібутом NAME =.

Стандартні значення цього атрибута: 

• "Times New Roman" (пропорційний шрифт), 
• "Courier New" (равношірінний шрифт) 
• "Arial" (шрифт без надсечек).

Імена сімейств шрифтів зараз поки не стандартизовані і в різних системах можуть називатися по-різному. Наприклад, сімейство шрифтів, яке використовується за замовчанням для пропорційного шрифту  "Times New Roman" , може називатися "Times", "Times Roman", "Roman" і т.д.

Переривання рядків

Команда <BR> дозволяє перейти на новий рядок, не починаючи нового абзацу (у більшості програм-браузерів абзаци виділяються додатковими порожніми рядками).

9.4 Робота з таблицями в  HTML

Елемент TABLE

Забезпечує створення таблиць. Потрібно вказувати початковий і кінцевий теги. Кожна таблиця починається з необов'язкового тега <CAPTION>, за яким слідує один або декілька елементів <TR>, що формують рядки таблиці. Кожен рядок має одну або декілька комірок, що задаються елементами <TH> або <TD>.

Елемент <TABLE> може мати атрибути

HEIGHT = n (%) - висота таблиці в пікселях (відсотках щодо вікна);

WIDTH = m (%) - ширина таблиці в пікселях (відсотках щодо вікна);

BORDER = n - розмір ліній сітки (n-натуральне число);

CELLSPACING = n - відстань між осередками (n-натуральне число);

CELLPADDING = n - відстань вмісту комірки від її кордонів (n-натуральне число);

BGCOLOR = color - встановлює колір заливки таблиці;

BORDERCOLOR = color - встановлює колір рамки таблиці.

Кожна таблиця складається з рядків і стовпців. Рядок задається парою тегів <TR> </ TR>. Стовпець - <TD> </ TD>.

Кожен стовпець може мати заголовок, який задається необов'язковим тегом <TH> </ TH>

Теги рядків <TR> і стовпців <TD>  можна використовувати в поєднанні з наступними атрибутами:

вирівнювання вмісту комірок (рядків) по горизонталі; вирівнювання вмісту комірок

По-іншому йде справа при роботі з кольором рядку - досить вказати колір в тезі рядка <TR>.

Зауваження.  При оформленні таблиць іноді виникає необхідність поставити фонову картинку для комірки таблиці. У таких випадках вдаємося до допомоги стилів

<TD STYLE = "BACKGROUND-IMAGE: URI;">

Атрибут BACKGROUND для тега <TD> не рекомендований стандартами HTML і не підтримується в браузері Opera.

9.5. Робота з графічними зображеннями

Графічні файли включаються в HTML-документи за допомогою команди <IMG>. Допускається використання файлів у форматі GIF або JPG / JPEG (для систем, що працюють під MS Windows, допускаються файли формату BMP).

З тегом <IMG> можуть бути використані атрибути:

SRC = визначає URL-адресу (ім'я) графічного файлу.

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

HEIGHT = n  - Задає висоту контуру (n-кількість пікселів), в якому буде розмішено зображення.

WIDTH = n  - Задає ширину контура (n-кількість пікселів), в якому буде розмішено зображення.

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

Рекомендується для великих графічних файлів (більше 10 Kb) завжди задавати їх розміри, для збільшення швидкості роботи браузера. Якщо розміри не задані, то зустрівши графічний файл браузер припиняє висновок тексту і чекає поки захитається вся картинка, щоб визначити її розміри.

HSPACE = т  - ширина чистих полів в пікселях ліворуч і праворуч зображення

VSPACE = т  - ширина чистих полів в пікселях зверху і знизу зображення

BORDER = n  - ширина рамки зображення

Приклад 9.  Покажемо як впливає на відображення графічного відображення у вікні браузера застосування тега IMG з атрибутами HSPACE, VSPACE, BORDER. Припустимо в тілі деякого HTML документа присутня команда

<IMG SRC = "rogd03.jpg" HSPACE = 20 VSPACE = 20 BORDER = 2 ALIGN = left>.

Тоді у вікні браузера HTML-документ буде виглядати так 

Якщо тег IMG використовувати без атрибутів HSPACE, VSPACE, BORDER тоді той же документ буде виглядати так

Приклад 10.  

Текст "<IMG SRC =" book.jpg "ALIGN = LEFT HSPACE = 4> Тут розташовується текст, який слід помістити праворуч поруч з малюнком. Текст повинен обтікати картинку <BR CLEAR=LEFT> Тут розташовується текст, який слід помістити нижче картинки у вікні браузера буде виглядати так, як показано на малюнку 12.12Використовуючи атрибут  ALIGN =  зі значеннями  LEFT  або  RIGHT  можна створити "плаваючу" картинку, яку буде обтікати текст. Наприкінці плаваючого об'єкта обов'язково має бути присутня команда BR з атрибутом CLEAR =, який припиняє обтікання картинки. Після цієї команди текст виводиться нижче графічного файлу.

Кілька порад при роботі з графікою:

• Завжди використовувати атрибути завдання розміру картинки. У цьому випадку браузер, не чекаючи поки перекачається вся картинка, буде продовжувати показувати документ далі. Використовувати картинки, переважно у форматі JPEG / JPG, png,gif.(Картинки у форматі GIF, особливо мають велику кількість деталей, які повільно відмальовуються на не надто потужних машинах).
• Якщо хочете щоб користувач з інтересом читав ваші сторінки, то чи не вставляйте в документ картинки понад 40 Kb. Для картинок більшого розміру використовувати гіперпосилання з обов'язковими зазначенням її обсягу.
• Не слід використовувати більше 256 кольорів. Більшість ваших читачів-клієнтів використовують 8-бітну відеокарту і велика кількість кольорів (True Color) все одно не побачить. Картинки високою колірною разрешимості завжди перевіряйте на 256 колірному режимі (хоча це не панацея від усіх бід - деякі комп'ютери можуть довільно змінювати палітру, але все ж деяка гарантія, що вас побачать).
• Не зловживайте анімаційними GIF'ами, це сильно ускладнює перегляд сторінки на слабкій машині, особливо для Netscape.

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

Списки визначень задаються наступним чином:

<DL>
<DD> назва терміна
<DT> визначення терміна
</ DL>