Верстаємо сайт самі

306
  • Для чого і як можна створити зміст статті в Html
  • Оформляємо зміст статті за допомогою CSS властивостей
  • Здрастуйте, шановні читачі блогу . Вирішив написати зовсім маленький пост на тему створення змісту статті, якщо вона вийшла великий або ви очікуєте заходи користувачів з дещо різними інтересами. У цьому випадку короткий зміст та можливість відразу перейти до потрібного фрагменти статті на вашому сайті може виявитися корисним, як мені здається.

    Верстаємо сайт самі

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

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

    Для чого і як можна створити зміст статті в Html

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

    Верстаємо сайт саміВерстаємо сайт самі

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

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

    Прикладом може служити матеріал про пошукову систему Яндекса і все з нею пов’язане.

    Верстаємо сайт саміВерстаємо сайт самі

    Реалізовано це все за допомогою нумерованих списків Html OL, для яких прописано ще й кілька рядків CSS коду в окремому файлику. Так само використовуються так звані якорі для гіперпосилань, які створюють у статті тим місця, куди будуть вести пункти змісту.

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

    В атрибуті name прописується унікальна для цієї статті мітка. Проте зараз такий метод вставки якорів вважається невалидным (небажаних) і в якості якорів пропонується використовувати значення атрибута ID, який можна буде прописати, наприклад, в тегах H1-H6 тих самих проміжних заголовків у статті.

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

    Давайте для прикладу розглянемо статтю про Гогетлинкс, де перший підзаголовок виглядає в коді приблизно так:

    Просування сайтів в Gogetlinks і заробіток на посиланнях

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

    Як бачите, там у мене стоїть унікальний ідентифікатор ID унікальним для цієї статті значенням ggl. Для наочності наведу код і другого підзаголовка:

    Налаштування кампанії в ГогетЛинкс для просування сайту

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

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

    У мене, до речі, був випадок, що проставлена мною мітка для якоря в ID збіглася з уже існуючою і описаної в CSS файлі, що викликало у мене по початку щире здивування, бо підзаголовок став виглядати вкрай химерно і незвично. Причому в тій статті він був поки що тільки один, що і змусило мене якийсь час ламати голову над тим, що трапилося.

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

  • Що таке ГоГетЛинкс та реєстрація в ньому
  • Створення кампанії в ГГЛ для просування сайту
  • Пошук оптимальних майданчиків
  • Як почати заробляти в Gogetlinks
  • Гіперпосилання всі ведуть на одну і ту ж сторінку, де і розташована ця стаття, а в кінці у них через ґрати (# — її іноді називають хеш) стоїть унікальна мітка, кожна з яких веде на свій якір.

    В принципі, можна було б замість цього написати більш коротко:

  • Що таке ГоГетЛинкс та реєстрація в ньому
  • Створення кампанії в ГГЛ для просування сайту
  • Пошук оптимальних майданчиків
  • Як почати заробляти в Gogetlinks
  • І на сторінці зі статтею все чудово працювало б, бо перед хешем браузер автоматично підставить Урл тієї сторінки, з якої такого виду посилання проставлена.

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

    Оформляємо зміст статті за допомогою CSS властивостей

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

    /wp-content/themes/назва теми/style.css

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

    Щоб отримати такий же вигляд змісту (змісту) для статті як у мене, досить буде додати в нього цю рядок коду:

    .ogl {float:right;border:1px dotted black;padding:5px 5px 0 5px;margin:5px;}

    Розберемо по порядку CSS властивості:

  • float:right — робить блок зі змістом плаваючим і змушує його притиснутися до правого краю (докладніше читайте в статті про інструменти блокової верстки Float і clear
  • border:1px dotted black — задає рамку по всіх сторонах блоку шириною в один піксель, намальовану переривчастою лінією чорного кольору. Про рамки і згадані трохи нижче відступи читайте в статті — Задаємо в CSS внутрішні (Padding) і зовнішні (Margin) відступи, а так само рамки (Border)
  • padding:5px 5px 5px 0 — задаються відступи в 5 пікселів від верхнього, правого і лівого краю рамки до укладеного в неї тексту (пунктів списку).
  • margin:5px — відступи в п’ять пікселів від зовнішнього краю рамки змісту до сусідніх елементів
  • Крім цього ви будете вільні додати сюди і окреме налаштування шрифтів за допомогою властивості Font (Weight, Family, Size, Style) або ще щось, але особисто мені здалося й цього досить.

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

  • -«-
  • -«-
  • -«-
  • -«-
  • Взагалі, стилі CSS можна підключати до Html через style трьома способами, описаними в публікації за наведеним посиланням. Краще всього зовнішній файл, але на етапі налагодження і інші цілком підійдуть.

    P. S. Нещодавно додав ще й слово «Зміст», щоб було зрозуміліше, що це таке. Ясна річ, що для шести сотень статей робити це вручну було б дуже важко, тому використав багатий інструментарій CSS, а саме псевдоэлемент before. У файлі СЅЅ була додана відповідна рядок:

    .ogl:before {content: «Зміст:»;color:#ccc;line-height:2em;}

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