Швидко освоїти Html

248
  • Прогалини і пробільні символи в мові Html
  • Візуальне форматування коду для наочності
  • Спецсимволи або мнемоніки в Html коді
  • Нерозривний пробіл і м’який перенос в прикладах
  • Здрастуйте, шановні читачі блогу . Трохи раніше ми вже встигли поговорити про те, що таке мова Html, також дізналися про оформлення в ньому коментарів і призначення директиви Doctype. Сьогодні у нас на черзі поняття прогалини в ХТМЛ, а ще пов’язане з ним форматування коду при його написанні (для зручності подальшого його читання і сприйняття).

    Швидко освоїти Html

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

    Прогалини і пробільні символи в мові Html

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

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

    У мові Html в якості пробільних символів використовуються:

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

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

    У зв’язку з цим виникає питання: як не допустити розриву конструкцій типу «100 руб.» при формуванні переміщення у браузері символу пробілу в Html коді? Відповіддю на це питання може служити використання не звичайного пробілу, а спецсимвола нерозривного пробілу, який може виглядати як:

     

    У коді це може виглядати приблизно так:

    100 руб.

    Мнемоніка нерозривного пробілу не дозволить браузеру здійснювати за нього розбиття рядка ні за яких обставин. Іноді буває потрібно, навпаки, здійснювати примусову розбивку довгого слова при зміні розміру вікна браузера по так званій мітці м’якого переносу, яка теж формується на основі спецсимвола. Але про це ми поговоримо трохи пізніше.

    Візуальне форматування коду для підвищення його наочності

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

    Особливістю мови гіпертекстової розмітки є те, що будь-яку кількість прогалин (або переносів з табуляцією) йдуть підряд, браузером замінюється при розборі Html коду на один пробіл. Що це нам дає? Ну, давайте подумаємо.

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

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

    Швидко освоїти HtmlШвидко освоїти Html

    Але цей же фрагмент, де всі зайві пробільні символи видалені, практично втрачає свою читаність:

    Швидко освоїти HtmlШвидко освоїти Html

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

    Швидко освоїти HtmlШвидко освоїти Html

    Вже після того, як ви все налагодити і всебічно протестуєте, зможете стиснути CSS (видалити з коду всі пробіли) для підвищення швидкості завантаження.

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

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

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

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

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

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

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

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

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

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

    Швидко освоїти HtmlШвидко освоїти Html

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

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

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

    CимволHtml-кодДесятичный
    кодОписаниезнаки арифметичних і математичних операційзнаки валютмаркерилапкистрілкизірочки, сніжинкигодинник, час
      нерозривний пробіл
    вузький пробіл (еп-завширшки літеру n)
    широкий пробіл (em-завширшки літеру m)
    вузьке тире (en-тире)
    широке тире (em -тире)
    м’який перенос
    анаголос ставиться після «ударної» букви
    ©©©копірайт
    ®®®знак зареєстрованої торгової марки
    знак торговельної марки
    ºººспис Марса
    ªªªдзеркало Венери
    проміле
    πππпі (використовуйте Times New Roman)
    ¦¦¦вертикальний пунктир
    §§§параграф
    °°°градус
    µµµзнак «мікро»
    знак абзацу
    три крапки
    надчеркивание
    знак наголосу
    знак номери
    🔍🔍Лупа (нахилена вліво)
    🔎🔎Лупа (нахилена вправо)
    ×××помножити
    ÷÷÷розділити
    <<<менше
    >>>більше
    ±±±плюс/мінус
    111ступінь 1
    222ступінь 2
    333ступінь 3
    заперечення
    ¼¼¼одна четверта
    ½½½одна друга
    ¾¾¾три чверті
    дробова риса
    мінус
    менше або дорівнює
    більше або дорівнює
    приблизно (майже) одно
    не одно
    тотожно
    квадратний корінь (радикал)
    нескінченність
    знак підсумовування
    знак твору
    частковий диференціал
    інтеграл
    для всіх (видно тільки якщо жирним шрифтом)
    існує
    порожня множина
    ØØØдіаметр
    належить
    не належить
    містить
    є підмножиною
    є надмножеством
    не є підмножиною
    є підмножиною або дорівнює
    є надмножеством або дорівнює
    плюс в гуртку
    знак множення в гуртку
    перпендикулярно
    кут
    логічне І
    логічне АБО
    перетин
    об’єднання
    Рубль. Знак рубля повинен використовуватися з відбиттям від числа. Стандарт Юнікод 7.0. Якщо Ви не бачите зображення, оновіть свої Unicode шрифти.
    Євро
    ¢¢¢Цент
    £££Фунт
    ¤¤¤Знак валюти
    ¥¥¥Знак ієни і юаня
    ƒƒƒЗнак флоріна
    простий маркер
    коло
    ···середня точка
    хрестик
    подвійний хрестик
    піки
    трефи
    черви
    бубни
    ромб
    олівець
    олівець
    олівець
    рука
    «««подвійні лапки
    &&&амперсанд
    «««ліва типографська лапки (лапки-ялинка)
    »»»права типографська лапки (лапки-ялинка)
    ««одиночна кутова лапки відкриває
    ««одиночна кутова лапки закриває
    штрих (хвилини, фути)
    «««подвійний штрих (секунди, дюйми)
    ліва верхня одиночна лапки
    права верхня одиночна лапки
    права нижня одиночна лапки
    лапки-лапка ліва
    «««лапки-лапка права верхня
    лапки-права нижня лапка
    одиночна англійська лапки відкриває
    одиночна англійська лапки закриває
    подвійна англійська лапки відкриває
    подвійна англійська лапки закриває
    стрілка вліво
    стрілка вгору
    стрілка вправо
    стрілка вниз
    стрілка вліво і вправо
    стрілка вгору і вниз
    повернення каретки
    подвійна стрілка вліво
    подвійна стрілка вгору
    подвійна стрілка вправо
    подвійна стрілка вниз
    подвійна стрілка вліво і вправо
    подвійна стрілка вгору і вниз
    трикутна стрілка вгору
    трикутна стрілка вниз
    трикутна стрілка вправо
    трикутна стрілка вліво
    Сніговик
    Сніжинка
    Затиснута трилисниками сніжинка
    Жирна гострокутний сніжинка
    Зафарбований зірка
    Незакрашенная зірка
    Незакрашенная зірка в колі закрашенном
    Зафарбований зірка з незакрашенным колом всередині
    Обертова зірка
    Накреслена біла зірка
    Середній одне з кіл, розташованих коло
    Середній зафарбоване коло
    Секстилі (типу сніжинка)
    Восьмикінцева зірка обертається
    Зірочка з кулястими закінченнями
    Жирна восьмикінцева каплеподібна зірочка-пропелер
    Шестнадцатиконечная зірочка
    Двенадцатиконечная зафарбований зірка
    Жирна восьмикінцева прямолінійна зафарбований зірка
    Шестикутна зірка зафарбований
    Восьмикінцева прямолінійна зафарбований зірка
    Восьмикінцева зірка зафарбований
    Восьмикінцева зірочка
    Зірочка з незакрашенным центром
    Жирна зірочка
    Загострена чотирикінцева незакрашенная зірка
    Загострена чотирикінцева зафарбований зірка
    Зірка в колі
    Сніжинка в колі
    Годинник
    Годинник
    Пісочний годинник
    Пісочний годинник

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

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

    Швидко освоїти HtmlШвидко освоїти Html

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

    Швидко освоїти HtmlШвидко освоїти Html

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

    Нерозривний пробіл і м’який перенос в прикладах

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

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

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

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

    <body>

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

    <

    Це потрібно буде зробити, щоб отримати на сторінці <, а не відображення лівої кутової дужки (<), в яку перетворює браузер мнемоніку <, виявивши при розборі знак амперсанда. Хитро, але ви все зрозумієте спробувавши це на практиці.

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

    1400 гБ.

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

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

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

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