Вітаю, шановні читачіблог сайт. Трохи раніше ми вже встигли поговорити про те, також дізналися про оформлення в ньому. Сьогодні у нас на черзі поняття пропуску в ХТМЛ, а також пов'язане з ним форматування коду при його написанні (для зручності подальшого читання та сприйняття).

Ну і у зв'язку з тим, що ми торкнемося теми нерозривної прогалиниі м'якого перенесення, нам доведеться акцентувати нашу увагу на так званих спецсимволах або мнемоніках, що використовуються в мові Html, які дозволять вам додати код web документабезліч додаткових символів, наче вже згаданого вище. Але про все по порядку.

Пробіли та пробілові символи у мові Html

Перш ніж переходити до питання форматування тексту за допомогою спеціально призначених для цього тегів (абзацу, заголовків тощо) я хочу зупинитися на тому моменті, як у мові ХТМЛ інтерпретуються пробіли, переноси рядка (Enter) та табуляція, як здійснюється розбивка тексту у вікні браузера при зміні розміру.

Правда для такого роду візуального форматування (яке не буде видно на веб-сторінці) найчастіше використовують не самі прогалини, а саме символи табуляції та перенесення рядка. Є таке правило – коли починаєте писати вкладений Html тег, то зробіть відступ за допомогою табуляції (клавіша Tabна клавіатурі), а коли цей тег закриваєте, приберіть відступ (поєднання клавіш Shift+Tab на клавіатурі).

Робити це потрібно так, щоб теги, що відкриває і закриває, були б на одному вертикальному рівні (на однаковій кількості табуляцій від правого краю сторінки вашого Html редактора, наприклад, Notepad++, про який я писав ). Крім цього раджу безпосередньо після написання відкриває елемента зробити кілька переносів рядки і відразу ж прописати закриває на тому ж рівні (кількості табуляцій), щоб потім не забути це зробити.

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

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

Спецсимволи або мнемоніки у Html коді

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

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

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

У цьому кодуванні тексту було можливо записати лише 256 знаків — 128 від ASCII і ще 128 для літер російської мови. В результаті виникла проблема з використанням на сайтах знаки, які не входять до ASCII та не є літерами російської мови, що входять до складу кодування Windows 1251 (CP1251). Ну, заманулося вам використовувати тильду або апостроф, а можливості такої спочатку у мові, що використовується Html кодуванняне закладено.

Саме для таких випадків і були придумані підстановки або, іншими словами, мнемоніки. Від самого початку спецсимволи мали цифровий виглядзаписи, але потім для найпоширеніших з них були додані їхні літерні аналоги для простоти їхнього запам'ятовування.

У загальному розумінні, мнемоніка - це такий знак, який починається з амперсанда "&" і закінчується крапкою з комою ";". Саме за цими ознаками браузер при розборі Htmlкоду виділяє із нього спецсимволи. Відразу за амперсандом у цифровому коді підстановки повинен йти знак решітки «#», який іноді називають хеш. А вже потім слідує цифровий код потрібного символу в кодуванні юнікод.

У юнікоді можна записати більше 60 000 знаків - головне, щоб потрібний вам символ мнемоніки підтримувався шрифтом, що використовується на вашому сайті. Є шрифти з підтримкою багатьох символів кодування юнікод, а є варіанти лише з певним набором знаків.

Повний список спецсимволів буде величезний, але найчастіше використовувані мнемонікиви можете запозичити, наприклад, з цієї таблиці:

Існує досить цікавий спосіб отримання коду Html мнемонік для потрібного вам знака. Для цього достатньо буде відкрити редактор Microsoft Word, створити новий документі вибрати з верхнього меню"Вставка" - "Символ" (я користуюся 2003 версією, тому не знаю як зробити аналогічну операцію в пізніших версіях).

У вікні вам потрібно вибрати шрифт, наприклад, Times New Roman (або будь-який інший, який свідомо буде присутній на більшості комп'ютерів відвідувачів вашого сайту - Courier або Arial, наприклад).

Додайте зі списку до свого документ Wordвсі необхідні вам спецсимволи і збережіть цей ордівський документ як веб-сторінку (вибирається зі списку «.html» при збереженні). Ну, а потім вам лише залишиться відкрити цю веб сторінку в будь-якому HTML редакторі(все той же Notepad++ підійде) і ви побачите все цифрові кодипотрібних вам мнемонік:

Спосіб трохи складний, але якщо закортить використовувати на сторінці свого сайту якийсь рідкісний спецсимвол, то це буде простіше, ніж відшукувати в мережі інтернет таблиці, подібні до наведеної трохи вище. Отриманий код спецсимволу вам потрібно буде вставити в потрібне місце і замість нього на веб-сторінці браузер відобразить потрібний знак (наприклад, нерозривний пробіл).

Нерозривна прогалина та м'яке перенесення в прикладах

Як я вже згадував вище та як ви можете бачити з наведеної трохи вище таблиці спецсимволів, деякі мнемоніки у Html отримали крім цифрового ще й символьне позначення для них більше простого запам'ятовування. Тобто. замість знака решітки "#" (хеша) у символьних варіантах використовуються слова. Наприклад, той самий нерозривний пропуск може бути записаний або як (цифрова мнемоніка), або як (символьна).

При написанні статей, якщо вам потрібно вставити в текст документа знак амперсанда (&) або кутової дужки (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Тобто, якщо ви пишіть статтю, в якій вам потрібно буде вставити в текст, наприклад, відображення тега< body>або ж вам просто потрібно вставити знак менше (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Тому вам потрібно буде вставити для вирішення такого завдання наступну конструкцію:

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

Це потрібно буде зробити, щоб отримати на сторінці<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

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

1400 ГБ.

Іноді може виникнути зворотна ситуація, коли в тексті є дуже довгі слова і хочеться зробити так, щоб при виникненні необхідності браузер міг би розбивати це слово переносом. Для таких цілей передбачено спецсимвол «м'яке перенесення» -

Довгепредлинне слово;

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

Удачі вам! До швидких зустрічей на сторінках блогу сайт

подивитися ще ролики можна перейшовши на

Вам може бути цікаво

MailTo - що це і як у Html створити посилання для відправки Емейла
Теги та атрибути заголовків H1-H6, горизонтальної лінії Hr, перенесення рядка Br та абзацу P за стандартом Html 4.01
Як вставити в HTML посилання та картинку (фото) - теги IMG та A

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

Відразу зазначимо, що HTML поділяє пробільні символи на види: HTML табуляція, пробіл та перенесення рядка. І кожен з цих видів браузер обробляє особливим чином, крім того HTML є спеціальні теги, які говорять браузеру про те, як обробляти пробільні символи. З цього запису ви дізнаєтеся про те для чого потрібні пробільні символи в HTML, на які види діляться пробільні символи в HTML і як з ними звертається браузер.

Також ми розглянемо у всіх деталях кожен із пробельних символів окремо. У записі будуть описані такі питання:

• як браузер обробляє прогалини в HTML документіі в чому різниця між звичайним пробілом і нерозривним пробілом;
• для чого використовується табуляція в HTML;
• як браузер відноситься до перенесення рядків, для чого потрібні перенесення рядків в HTML і як виглядає символ перенесення рядка в HTML;
• як змусити браузер зробити примусове перенесення рядка;
• і як зберегти всі пробілові символи у HTML.

Сподіваюся, що словесні пояснення та приклади публікації допоможуть вам розібратися з тим, як браузер обробляє пробельні символи.

Для чого потрібні символи пробілів в HTML

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

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

Друге призначення пробілових символів у HTML, можна сказати, логічне, і ми використовуємо пробільні символи для того, щоб розділити слова між собою, оскільки тексти без пробілів були б зовсім нечитальні. Бувають ситуації, коли ви випадково поставили кілька прогалин між словами всередині HTML тега, в цьому випадку браузер «стисне» ці прогалини до одного. Надалі ми з вами переконаємося в цьому і подивимося на прикладі.

Сподіваємося, що з призначенням пробельних символів у HTML ми розібралисяі тепер можемо рухатись далі. Тема пробільних символів досить проста, але важлива. В принципі, в HTML немає складних тем і немає нічого не важливого, оскільки HTML - це стандарт, якого потрібно дотримуватись.

Види пробельних символів у HTML

Раз із призначенням пробельних символів все зрозуміло, варто розібратися з видами пробельних символів. У HTML, та й загалом, пробільні символи можна розділити так: пробіл, табуляція та перенесення рядка. Описати словами пробільні символи добре, але хотілося б їх побачити на власні очі, в цьому нам допоможе, у якого є підсвічування синтаксису, але зараз для нас важливо, що Notepad++ вміє відображати пробільні символи.

Зверніть увагу на малюнок: це скрін з Notepad++, на якому відкритий із запису, в якому ми говорили про . Помаранчева стрілка це табуляція у HTML документі. Оскільки я працюю на Windows 10, то перенесення рядків у HTML у мене відображається двома символами: CR та LF(Така вже традиція, що йде від друкарських машинок, в ОС сімейства Linux перенесення рядка позначається одні символом LF). А ось пробіл у Notepad++ відображається символом червоної точки, якщо придивитеся до скрин, то помітите її.

Отже, Notepad++ допоміг нам побачити пробільні символи у HTML документі: табуляцію, перенесення рядка та пробіл. Однак більшість цих символів ми не побачимо в HTML сторінці, яку нам сформує браузер. Ми вже говорили, що мова HTML не чутлива до пробілових символів, і браузери відкидають усі пробілові символи між тегами.

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

Пробіл і нерозривний пробіл у HTML

Давайте тепер розглянемо кожен із пробілових символів окремо. Почнемо ми з пробілів у HTML. Отже, ми вже знаємо, що браузер ігнорує всі пробілові символи між тегами. Але як обробляє браузер пробілові символи всередині тегів, це важливе питання, оскільки від цього залежить те, як відображатимуться тексти на сторінці. Давайте подивимося на прикладі. Відкрийте будь-який зручний для вас редактор, можна навіть звичайний блокнот, але я порекомендую вам, який має чудові можливості по роботі з HTML, і наберіть наступний код:

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

Ми бачимо, що в першому HTML параграфі браузер «сконвертував» усі зайві прогалини та пробілові символи, відмінні від пробілу, в один пробіл. А у другому параграфі у нас ситуація дещо інша. Тут ми використовуємо спеціальний символ, про який часто говорять, що це нерозривний пробіл у HTML. Справа в тому, що говорити нерозривний пробіл в HTML не зовсім правильно, так як це спеціальна послідовність кодування.

Нерозривні прогалини в HTML документах, як і в будь-яких інших документах використовуються, щоб сказати програмі, що відкриває даний документ (у нашому випадку браузеру), що дані слова з'єднані пробілом нерозривно, тобто якщо ми напишемо «Привіт світ!», то браузер ніколи не перенесе слово «світ !» без слова «Привіт» на новий рядок, перенесення буде здійснено лише разом. Плюс до всього іншого нерозривну прогалину в HTML можна використовувати, щоб поставити кілька прогалин між словами всередині HTML тегів.

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

Давайте підіб'ємо проміжний підсумок: браузер ігнорує всі пробілові символи, розташовані поза HTML тегами, і стискає браузер всі пробілові символи всередині HTML тегів до одного пропускуякщо всередині HTML тега не використовується нерозривний пробіл.

Табуляція в HTML або ще один символ пробілу

HTML табуляція – це ще один символ пробілу. Найчастіше табуляцію HTML використовують для того, щоб форматувати HTML код у редакторі. Табуляцію не варто використовувати всередині HTML тега

Про яке ми поговоримо далі.  Справа все в тому, що табуляція не має фіксованого розміру.  Розмір табуляції можна налаштувати як у редакторі, так і в браузері.  Тому не можна точно сказати, як табуляція буде відображатися у того чи іншого користувача на .

Табуляцію в HTML можна налаштувати (та й не лише в HTML), тому що вона є кілька прогалин, об'єднаних разом.  Щоб написати пробіловий символ табуляції, натисніть клавішу Tab (на мою думку, це спрацює в будь-якому редакторі).  Табуляцію HTML можна використовувати для форматування коду (не плутайте форматування коду з безпосереднім форматуванням тексту в HTML), але її не варто використовувати всередині HTML тегів, оскільки у кожного користувача вона буде відображатися відповідно до його налаштувань, а значить по-різному.  Мабуть, ми сказали все, що можна про використання табуляції в HTML документах та редакторах.
Перенесення рядка в HTML або третій символ пробілу.  Символ перенесення рядка
Перенесення рядка в HTML, Та й не тільки в HTML, здійснюється натисканням клавіші Enter. Символ перенесення рядкав операційних системах Linux: LF.  В операційних системах Windows CR LF, у системах Mac OS до версії дев'ять символом перенесення рядка була послідовність CR.  Отже, ми вже знаємо, що браузер ігнорує перенесення рядків у HTML документіде б вони не розташовувалися.
Перенесення рядка в HTMLвикористовується в основному для редагування та форматування коду, щоб зробити його читабельним та зручним для редагування, не нехтуйте можливістю поставити символ перенесення рядка, щоб полегшити читання коду собі та людям, які працюють разом з вами.
Як браузер робить перенесення рядків
Отже, ми вже розібралися з тим, як браузер інтерпретує символи пробілів і в принципі вирішили для себе питання про те, що символи: табуляція, пробіл, нерозривна пробіл, символ перенесення рядка, нам потрібні для форматування кодузробити його читабельним.  Але ми б сказали не всю правду, якби не поговорили про те, як браузер робить перенесення рядків, коли йому не вистачає області перегляду.
Справа в тому, що для браузера символи пропуску - це орієнтири, за якими він визначає, як переносяться рядки в тому випадку, коли немає можливості їх вмістити в область перегляду.  Спробуємо реалізувати простий приклад.  Створимо простий HTML документ.  Відкрийте будь-який зручний редактор, наприклад, і напишіть наступний код:
 
 








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






 


 
<
!
DOCTYPE
html
>
<
html
lang
=
"ru-RU"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Пробільні символи HTML<
/
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
/
>
<
/
head
>
<
body
>
<
h1
>Текст написаний безпробельних символів перенесений не буде<
/
h1
>
<
p
>Браузер користується пробельними символами, щоб здійснювати перенос
рядків у тому випадку, коли області просмору не вистачає, щоб
вмістити всю строку<
/
p
>
<
/
body
>
<
/
html
>


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

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


Отже, ми з'ясували, що браузер чхав на символи перенесення рядків у HTMLале як нам бути, якщо є необхідність зробити перенесення рядка там, де нам хочеться, а не там, де закінчується область перегляду в браузері?  Наприклад, ми хочемо опублікувати вірші, але параграфом їх публікувати не дуже правильно та незручно.  У таких ситуаціях нас рятує і, до того ж дуже сильно рятує, HTML тег 
.
BR є малим HTMLелементом та одиночним HTML тегом.  Виконує HTML тег 
одну єдину просту, але важливу функцію – робить примусове перенесення рядків.  Коли браузер бачить HTML тег 
Він формує HTML елемент, який бачать користувачі у вигляді перенесення рядків.  Давайте зробимо примусове перенесення рядків на прикладі, відкрийте будь-який зручний для вас редактор, на мій погляд одним із самих зручних редакторівє , і скопіюйте наступний код:
 
 








Біла береза 
Під моїм вікном 
Накрилася снігом, 
Точно сріблом.






 


 
<
!
DOCTYPE
html
>
<
html
lang
=
"ru-RU"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Пробільні символи HTML<
/
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
/
>
<
/
head
>
<
body
>
<
p
>Біла береза<
br
>Підмоїмокном<
br
>
Накрилася снігом,<
br
>Точно-срібло.<
/
p
>
<
/
body
>
<
/
html
>


Четверостиші з твору Єсеніна буде відображено так:

Кожен рядок вірша написано з нового рядка, В принципі, цього ми і домагалися.  Отже, тег 
використовується для примусового перенесення рядків у HTML.  Якщо ви напишіть два і більше тегів BR поспіль, то браузер сформує стільки примусових перенесення рядків, скільки тегів 
він зустріне у документі.
Важливою особливістю тега 
є те, що всі символи пробілів, які розташовані в коді до нього і всі символи, які розташовуються після нього, ігноруються.  Тому ви можете спокійно формувати примусове перенесення рядка даним тегом, не побоюючись, що десь «вилізе» зайвий символ пробілу.  Варто зауважити, що тег 
має один clear, який повідомляє браузеру, як обробляти наступну 
рядок, якщо текст обтікає плаваючий HTML елемент, але про це ми поговоримо в іншому записі.
Збереження пробілів у HTML.  HTML тег 

Тепер давайте обговоримо проблему Володимира Маяковського… Вірніше за його склад, ще точніше, як нам записати вірші Володимира Маяковського в HTML документі.
Невже нам доведеться використати спеціальні символи HTML, типу нерозривної пробілу та після кожного рядка тег 
?  Відповідь: звичайно ж ні.  Розробники стандарту HTML врахували цей момент і прийняли стандарт спеціальний HTMLтег 
. Тег 
Або preformatted на російську мову можна перекласти як авторське форматування.

Цей тег дозволяє зберігати пробілові символи в HTML.  Коли браузер зустрічає текст усередині тега 
Він його відображає як є, тобто зі збереження всіх пробілових символів: перенесення рядків, табуляція та просто пробіл будуть збережені всередині тега 
Як ви їх написали.

Варто зазначити, що HTML тег 
Є парним, а HTML елемент PRE є блоковим.  Власне, тег отримав назву авторське форматування через причину, яку ми озвучили вище: браузер зберігає всі пробілові символи тексту, всередині цього тега у тому вигляді, в якому їх написав автор.  Давайте спробуєм зберегти всі пробілові символи в HTML, використовуючи тег 
І подивимося, як пробілові символи будуть показані у браузері.


Код документа дуже простий, вірш В. Маяковського поміщений у контейнер 
Тепер подивимося, як обробить браузер пробільні символи всередині HTML елемент PRE.


Бачимо, що всі символи пробілів збереглися в тому вигляді, як ми їх написали.  Тепер ми переконалися, що тег 
Дійсно зберігає пробілові символи на сторінках HTML.

Отже, підіб'ємо підсумок усьому вищесказаному. У HTML є три види пробельних символів: табуляція, перенесення рядка та пробіл. Табуляцію в HTMLварто використовувати лише для форматування HTML-коду в редакторі. Перенесення рядків у HTMLбраузери ігнорують, "стискаючи" їх до пропуску, як і табуляції.  Щоб створити символ перенесення рядка в HTML, використовуйте тег 
.
Прогалини в HTMLпотрібні для двох цілей: за пробілами браузер визначає, як здійснювати перенесення рядків, пробіли потрібні, щоб текст був читабельним.  HTML підтримує спеціальні символи кодування, наприклад, символ нерозривної пробілу в HTMLможна використовувати в тому випадку, коли ви хочете написати кілька пробілів поспіль (інакше браузер скоротить їх до одного) або коду ви хочете вказати браузеру, щоб він не переносив слова на нові рядки один без одного.
Машинописний текст складається з друкованих знаків – графічних символів. 
Графічні символи - це символи, що мають у тексті видиме відображення. 
Усі графічні символи зібрані у наборі єдиної універсальної системиЮнікод. 
Вставити графічний символЮнікод у html-документ 
- головне та єдине призначення для цієї таблиці.
Вставити символ у html-документ можна одним із способів:
скопіювати зображення символу із вікна браузера у вікно свого візуального html-редактора
скопіювати html-код символу безпосередньо в код html-документа
Вгамовуємо, що це два різні способи: 
вставляти візуальне у візуальне
вставляти код у код.
Шрифт для символу, його розмір і колір HTML можна задати кодом, виду: 
 КОД_СІМВОЛА 
де, 
Arial - шрифт, 
10px - розмір шрифту в пікселях, 
#ff0000 - код кольору шрифту (червоний)
Наприклад: 
☎ - розмір шрифту символу 30px, 
☎ - розмір шрифту символу 30px, колір - червоний 
☎ - розмір шрифту символу 20px, 
☎ – розмір шрифту символу 10px. 
Прим.  Рекомендовані шрифти для вставки спецсимволів - Arial, Verdana та Tahoma.  Ці шрифти коректно відображають символи Юнікод і самі, у свою чергу, коректно підтримуються веб-додатками.
«Символ»
(видиме відображення символу) 
З цієї графи можна скопіювати зображення символу та вставити його у вікно текстового html-редактора.  Символ скопіюється з розміром шрифту 20px.  Після завершення копіювання може знадобитися індивідуальне припасування розміру шрифту безпосередньо для скопійованого знака.
«Найменування»
(тільки для важливих або незрозумілих символів)
Пояснення призначення символу, його сфера застосування, приклади...
«Мнемоніка»
Мнемоніка - це буквена конструкція виду", що позначає буквений код символу в HTML. Вставляється безпосередньо в html-код html-документа.  ) свого символу та службовий знак(&), який служить сигналом для прочитання коду для браузера і не відображається на екрані монітора.  Ім'я кожної мнемоніки унікальне і легко читається, тому що утворене від англомовного слова, що характеризує символ. 
Мнемоніка (грец.) - Мистецтво запам'ятовувати що-небудь.  Мнемотехніка застосовується для полегшення сприйняття інформації, що важко запам'ятовується, коли об'єкт запам'ятовування приводиться в асоціативний стан з чим-небудь.
«Код»
Код - числовий десятковий кодсимвол у HTML, вигляд &.  Вставляється безпосередньо в HTML-код HTML-документа.  Числовий десятковий код складається з числа, що означає порядковий номерсимволу в системі Юнікод та кількох службових знаків (& та #), які служать сигналом до прочитання коду для браузера та не відображаються на екрані монітора.  Числовий десятковий код має широке поширення та застосування, завдяки своїй універсальності та простоті сприйняття.
Символи керування в HTML (XHTML)
Символи керування в HTML (XHTML) – це службові символи HTML-мови, які використовуються при HTML-верстці веб-сторінки.  Ці символи повинні підтримувати будь-який браузер, оскільки без них неможливе правильне відображення HTML-тексту.  Символи керування не відображаються в тексті і, при прямому введенні з клавіатури - інтерпретуються браузером як розділові знаки, що закликають до виконання будь-якої дії при відображенні сторінки на екрані.
Дозволяється використовувати символи керування в звичайних текстахде вони символізують загальнолюдські поняття і трактуються браузером як звичайні друкарські знаки.  У разі використання службових символів у HTML-текстах потрібно вводити не значення самого символу, саме його HTML-код.  Бо, повторюю - інакше браузер сприйматиме службовий символ, як заклик до дії і не коректно відображатиме HTML-текст на екрані монітора.
Символи управління та їх HTML-код знають і розуміють всі браузери без винятку, чого не можна сказати, на жаль - про інші знаки, які можуть відображатися некоректно в різних браузерахабо, що ще гірше – не відображатись зовсім.
Синтаксис та пунктуація









пропуск довжини N (звичайний пропуск)
 

 



пробіл довжини M (довга пробіл)
 

 




 

 

-

м'яке перенесення (недрукований знак)
-

­

‑

дефіс


– 
 ‑

-

тире довжини N (звичайне тире)
-

–

—

тире довжини M (довге тире)
—

—

.

крапка


.

,

кома


,

…

багатокрапка
…

… 
…

:

двокрапка


:

;

крапка з комою


;

!

знак оклику


!
ǃ

?

знак запитання


?

@

«собачка»


@

*

«зірочка»


*

#

«решітка»


#

‘

одиночна верхня ліва лапка
‘

‘ 
‘

’

одиночна верхня права лапка
’

’ 
’

‚

одиночна нижня права лапка
‚

‚ 
‚

“

подвійна верхня ліва лапка
“

“ 
“

”

подвійна верхня права лапка
”

” 
”

„

подвійна нижня права лапка
&bdquo
„ 
„

«

подвійна ліва кутова лапка (рус)
«

«

»

подвійна права кутова лапка (рус)
»

»

́

знак наголосу, приклад: Вася́


́

"

апостроф, приклад: Вас"я


"

´

акут, приклад: Вася
´

´

¶

абзац (недрукований знак)
¶

¶

§

параграф
§

§

ˆ

акцент (перевернута пташка)
ˆ

ˆ 
ˆ

˜

мала тільда
˜

˜ 
˜

¦

вертикальний пунктир
¦

¦

(
кругла дужка вліво


(
)

кругла дужка праворуч


)

〈

кутова дужка вліво
〈

〈

〉

кутова дужка вправо
〉

〉

‹

кутова дужка вліво, варіант
‹

‹

›

кутова дужка вправо, варіант
›

›

[

квадратна дужка вліво


[

]

квадратна дужка праворуч


]

/

слеш (slash) - символ косої межі


/

\

зворотний слеш (backslash)


\

⁄

коса дробова риса (знак поділу)
⁄

⁄

ǀ

вертикальна риса


ǀ

ǁ

подвійна вертикальна характеристика


ǁ

‾

накреслення, приклад: Вася‾вася
‾

‾

¯

macron, приклад: Вася?вася
¯

¯

Товарні знаки та валюта
+

плюс
+

+

−

мінус
−

-
−

=

одно


=

±

плюс мінус
±

±

×

знак множення
×

×

÷

знак розподілу
÷

÷

⋅

оператор «точка» (середина рядка)
⋅

· 
⋅

∗

оператор «зірочка» (середина рядка)
∗

∗

∼

оператор «Тільда»
∼

∼

.

маркер списку (середина рядка)
.

• 

¹

верхній індекс "1"
¹

¹

²

верхній індекс "2"
²

²

³

верхній індекс "3"
³

³

Надрядковий та підрядковий індекс у HTML (XHTML) 
можна вставити за допомогою тегів і відповідно: 
ЧИСЛО Надрядковий індекс→ ЧИСЛО Надрядковий індекс 
ЧИСЛО Підрядковий індекс→ ЧИСЛО Підрядковий індекс
½

дріб «одна друга»
½

½

⅓

дріб «одна третина»


⅓

¼

дріб «одна четверта»
¼

¼

¾

дріб «три чверті»
¾

¾

№

знак номера


№

%

відсоток


%

‰

проміле
‰

‰ 
‰

°

градуси
°

°

′

штрих (хвилини, фути)
′

′

″

подвійний штрих (секунди, дюйми) 
Приклад 1: 30° 25′ 12″ 
Приклад 2: 25′ 12 ″



″

″

µ

мікро
µ

µ

π

Пі
π

π

ƒ

знак функції 
(Не плутати з «інтеграл»)
ƒ

ƒ 
ƒ

∫

інтеграл
∫

∫

∅

перекреслений нуль, порожня множина 
(Не плутати з «діаметр»)
∅

∅

⌀

діаметр (не плутати з перекресленою латинською «про»)


⌀

ø

латинська "o" діагонально перекреслена
ø

ø

Ø

латинська заголовна "O" діагонально перекреслена
Ø

Ø

∏

знак твору
∏

∏

∑

знак підсумовування
∑

∑

√

радикал 
(квадратний корінь або корінь ступеня x)
√

√

∝

пропорційно
∝

∝

∞

нескінченність
∞

∞

∠

кут
∠

∠

⊥

ортогонально (перпендикулярно)
⊥

⊥

∴

знак «відтак»
∴

∴

≅

приблизно одно
≅

≅

≈

майже одно
≈

≈

≠

не дорівнює
≠

≠

≡

ідентично
≡

≡

≤

менше або дорівнює
≤

≤

≥

більше або дорівнює
≥

≥

∧

логічне І
∧

∧

∨

логічне АБО
∨

∨

⊕

знак «плюс у колі» 
(Пряма сума)
⊕

⊕

⊗

знак «множення у колі» 
(Векторний твір, стріла від спостерігача)
⊗

⊗

ʘ

точка у колі 
(Стріла на спостерігача)


ʘ
















































































































































































✵
✵






















Урок 5.

 
У цьому уроці ми: 
1. Дізнаємося як зробити щоб html кодбув для нас зручніший і легко читаємо. 
2. Розберемо як правильно робити перенесення текстового рядка.
 
Робимо html код зручним.
 
Зараз наш код зрозумілий і легко читаємо, тому що в ньому мало тексту та практично немає тегів.  Коли ми створимо більш складну сторінку, там буде багато тегів, відповідно знайти потрібний буде складно.
 
Щоб не було каші з тегів, потрібно спочатку розставляти теги та рядки так, щоб вони візуально сприймалися легше.  Коли браузер зчитує інформацію з html сторінки, йому все одно скільки прогалин і скільки порожніх рядківу коді.
 
Я змінив текст у коді сторінки щодо тієї, яку ми створювали, але це не має значення.  На лівому і правому малюнку зображено той самий код.  Обидва варіанти відображатимуться браузером на екрані монітора абсолютно однаково.  Погодьтеся, працювати з зображеним кодом справа буде набагато легше, ніж з тим, що зліва.
 
Розглянутий нами код дуже простий, але навіть зараз помітна різниця у візуальному сприйнятті.  Будь-яких певних правил "наведення порядку" немає, кожен майстер сам вирішує як йому зручніше працювати.
 
Перенесення рядка HTML.  Тег <br>.
 
Зверніть увагу на рисунок.  У першому варіанті текст написаний в один рядок, у другому варіанті в два рядки.
 
Браузер буде відображати обидва варіанти однаково.  Текст буде написано в один рядок:
 
Ви запитаєте чому так?  Адже в одному з кодів частину тексту перенесено на інший рядок.  Було б логічно, якби в браузері частина тексту теж перенеслася на інший рядок, але у html своя логіка в цьому відношенні. Якщо ми в html коді робимо перенесення рядка, то для браузера це рівнозначно одному пропуску(як звичайний пробіл між словами у тексті).  Якщо ми перенесемо частину тексту не на один рядок вниз, а на 2 або 3 (будь-яка кількість), то браузер все одно вважатиме цю відстань за один звичайний пробіл між словами і при виведенні на екран текст писатиметься в один рядок.
 
Тег <br>
 
Коли ми в третьому уроці знайомилися з тегами, я згадав, що бувають теги, які не вимагають закриття.  Тег <br>один із них, служить він для перенесення рядка. 
Давайте застосуємо його в коді:
 
Ми вставили тег <br>у наш html код і тепер при запуску файлу через браузер частину тексту буде перенесено на наступну стоку. 
 * Не забуваємо зберігати зміни в Notepad (Ctrl + S) та оновлювати сторінку у браузері (F5).