Інформація майже повністю актуальна для Joomla 5 (примітку додано 21.10.2023).
Відеоурок
- Панель інструментів, редактор на весь екран – 00:01:30.
- Особливості вставки тексту, копіювання, вирізання – 00:02:06.
- Колір, розмір, зображення, гарнітура шрифту – 00:04:21.
- Вирівнювання тексту – 00:06:34.
- Заголовки 1-6 рівнів – 00:07:48.
- Маркований, нумерований списки – 00:10:47.
- Медіа (завантаження зображень на сайт) – 00:12:16.
- Зображення – 00:15:13.
- Посилання – 00:19:11.
- Якір (посилання на певне місце на сторінці) – 00:22:36.
- Таблиці – 00:26:35.
- Поділ тексту на вступний та повний – 00:34:26.
- Пошук та заміна – 00:36:24.
- Цитати – 00:37:12.
- Збільшення відступу – 00:38:03.
- Відміна та повторення дії – 00:38:22.
- Перегляд коду – 00:39:10.
- Нижній та верхній індекси – 00:39:36.
- Спеціальні символи та емоції (смайлики) – 00:39:59.
- Горизонтальна лінія та вставка прикладу коду – 00:40:43.
Відео краще переглядати з якістю «1080p HD». Цей та інші відеоогляди та уроки можна знайти на моєму YouTube каналі.
Посилання з відео:
У попередньому циклі відеоуроків зі створення сайту на Joomla 4 ми розробили адаптивний сайт фірми з блогом, портфоліо та завантажили його на хостинг. Під час роботи ми неодноразово користалися візуальним текстовим редактором TinyMCE для форматування тексту. У цьому відеоуроці детальніше розглянемо інструменти цього редактора та попрацюємо з компонентом Медіа.
У цьому відео розглянуті основні практичні моменти щодо форматування тексту, створення нумерованих та маркерованих списків, таблиці, посилань та робота з зображеннями. А в статті «Відеоурок з компоненту Статті Joomla (com_content)» ми поговоримо про різні налаштування матеріалів.
В уроці бере участь остання доступна мені, на момент написання статті (27.05.2023), версія Joomla 4.3.1 українською мовою та TinyMCE 5.10.7.
У новій версії CMS було оновлено версію редактора та додано можливість задавати вирівнювання зображення у його налаштуваннях. Детальніше про оновлення у пя’тій Джумла можно дізнатися у статті «Що нового в Joomla 5 та 4.4».
Рекомендації щодо форматування тексту
При форматуванні тексту на веб-сайті є кілька рекомендацій, які можуть допомогти зробити Ваш контент більш зрозумілим, зручним для читання і привабливим для відвідувачів. Ось кілька загальних рекомендацій, які варто врахувати.
- Використовуйте заголовки та підзаголовки для структурування вмісту вашої сторінки. Вони допоможуть читачам швидше зорієнтуватися і знайти необхідну інформацію. Використовуйте HTML-теги (наприклад, <h1>, <h2>, <h3>) для форматування заголовків.
- Розділяйте текст на невеликі абзаци, що містять одну думку або тему. Це полегшить читання і дозволить легше сприймати зміст.
- Використовуйте марковані або нумеровані списки для організації інформації. Це допоможе виділити ключові пункти і зробить їх більш помітними.
- Пишіть короткі речення та абзаци. Це полегшить сприйняття тексту і зробить його більш доступним для широкого кола читачів.
- Виділяйте ключові слова або фрази в тексті, використовуючи жирний шрифт або курсив. Це допоможе читачам швидше зорієнтуватися у контенті і знайти необхідну інформацію.
- Оберіть приємну комбінацію кольорів для тексту та фону, яка забезпечує достатню контрастність і не викликає змішання кольорів. Упевніться, що текст добре помітно на фоні.
- У тексті слід використовувати зображення та відео. Це допоможе підвищити зручність сприйняття інформації та зробить сторінку більш цікавою.
Рекомендації щодо вирівнювання тексту.
- Вирівнювання ліворуч є стандартним варіантом для більшості текстового контенту. Воно забезпечує читабельність та легкість сприйняття, оскільки рядки тексту розташовуються по лівому краю, а правий край стає нерегулярним.
- Вирівнювання праворуч використовується рідше, але може бути корисним для деяких елементів дизайну. Текст розташовується по правому краю, а лівий край стає нерегулярним. Використовуйте його з обережністю, оскільки це може ускладнити читання.
- Вирівнювання по центру використовується для здобуття визначеної симетрії та акценту на конкретному тексті або елементі. Використовуйте його для заголовків, банерів, цитат або інших важливих елементів, які ви хочете підкреслити.
- Рівномірне вирівнювання (вирівнювання за шириною) розподіляє текст по ширині контейнера або колонки, створюючи рівномірну візуальну структуру. Використовуйте його для таблиць, списків або інших випадків, де потрібно вирівняти текст у колонках або рядках.
Рекомендації щодо заголовків тексту.
- Використовуйте ієрархічну структуру заголовків, щоб візуально організувати і структурувати ваш текст. Використовуйте теги заголовків HTML (наприклад, h1, h2, h3) для встановлення різних рівнів заголовків. Головний заголовок (h1) має найбільший розмір і повинен відображати основний заголовок сторінки, а менші заголовки (h2, h3 і т.д.) можна використовувати для підрозділів.
- З точки зору SEO краще не використовувати заголовок першого рівня (h1) більше одного разу на сторінці. Також рекомендовано дотримуватися ієрархії рівнів заголовків. Наприклад, спочатку йде заголовок першого рівня, потім другого, а потім третього. Не слід ставити заголовок третього рівня вищим за заголовок другого рівня.
- Заголовки є важливими для SEO-оптимізації. Використовуйте ключові слова, які відповідають змісту розділу, у заголовках. Це допоможе пошуковим системам краще розуміти текст.
- Зробіть заголовки конкретними і описовими, щоб вони чітко передавали зміст відповідного розділу або блоку тексту. Заголовки мають привертати увагу користувача і давати йому уявлення про те, що він знайде в наступному відрізку тексту.
- Стежте за тим, щоб заголовки були достатньо короткими, але інформативними. Вони повинні передавати основну ідею розділу, але не бути занадто довгими, щоб уникнути розтягнення тексту на сторінці.
- Зробіть заголовки візуально привабливими та виокремленими від звичайного тексту. Використовуйте відповідні стилі, такі як збільшення розміру, жирний шрифт або інші візуальні ефекти, щоб зробити заголовки більш помітними.
Рекомендації щодо маркерованих та нумерованих списків.
- Переконайтеся, що ваш нумерований список має логічну послідовність пунктів. Використовуйте його для перерахування послідовних кроків, етапів або фактів.
- Намагайтеся зберігати кожен пункт списку якомога коротшим і зрозумілим. Ідеальною ситуацією є одне речення для кожного пункту. Якщо пункти стають занадто довгими, розгляньте можливість розбиття їх на декілька підпунктів.
- Використовуйте однаковий формат для всіх пунктів у списку. Наприклад, якщо ви починаєте пункти з великої літери і кінцеву пунктуацію, то використовуйте цей формат для всіх пунктів.
- Додайте візуальний розмежувальний знак (наприклад, крапку, дужку, тире) перед кожним пунктом списку. Це допоможе виділити кожен пункт і підкреслить його самостійність.
- Використовуйте числа або символи для нумерованого списку. Нумерація підкреслить послідовність пунктів і допоможе читачам легше розуміти структуру списку.
- Забезпечте відступи та достатні відстані між пунктами списку, щоб кожен пункт виділявся і був легко сприйнятим.
- Пам'ятайте, що пункти списку повинні бути змістовними та інформативними для читача. Вони повинні надавати важливу і конкретну інформацію.
Рекомендації щодо зображень.
- Упевніться, що зображення відповідає контексту тексту і доповнює його. Використовуйте зображення, які ілюструють ключові поняття або допомагають у розумінні тексту.
- Забезпечте, щоб розмір файлу зображення був оптимізований для швидкгозавантаження сторінки. Використовуйте формати зображень, такі як JPEG, PNG та WebP, з оптимальним стисненням без втрати якості.
- Використовуйте високоякісні зображення з достатньою роздільною здатністю. Зображення повинні бути чіткими і не викликати розмиття або пікселяцію при збільшенні.
- Для кожного зображення встановлюйте атрибут «alt» з описом або коротким поясненням зображення. Це допоможе людям з вадами зору, а також покращить SEO-оптимізацію вашого сайту.
- Розмістіть зображення відповідно до контексту тексту. Використовуйте відповідні вирівнювання, такі як ліворуч, праворуч, по центру або «обтікання текстом», щоб досягти оптимального розташування зображення.
- Використовуйте рамки або межі навколо зображень, щоб їх виділити і відокремити від тексту. Це допоможе поліпшити їх видимість та зрозумілість.
- Мобільна сумісність: Переконайтеся, що зображення належним чином адаптуються до мобільних пристроїв.
Рекомендації щодо посилань.
- Використовуйте тексти посилань, які чітко описують, куди вони ведуть. Уникайте загальних термінів, таких як «натисніть тут», натомість використовуйте описові фрази, що вказують на мету посилання.
- Якщо посилання ведуть на іншу сторінку або веб-сайт, розгляньте можливість відкриття його у новій вкладці браузера. Це дозволить користувачам зберігати ваш сайт і легко повернутися до нього.
- Використовуйте підкреслення або інші візуальні ефекти, щоб відрізнити посилання від звичайного тексту. Це допоможе користувачам легше розпізнати посилання та зробить їх більш сприйнятливими для кліків.
- Періодично перевіряйте посилання на вашому веб-сайті, щоб переконатися, що вони працюють належним чином. Пошкоджені або недійсні посилання можуть знизити користувальницький досвід.
- Пам'ятайте про доступність. Забезпечте, щоб посилання були достатньо видимими і мали чітку контрастність, щоб люди з різними вадами зору могли їх легко розпізнати. Крім того, уникайте виключно візуальних показників, наприклад, використання кольору як єдиного способу виділення посилання.
Рекомендації щодо таблиці.
- Прагніть до простоти та чіткої структури таблиці. Розділіть таблицю на колонки та рядки, які логічно організують вашу інформацію.
- Включіть заголовки для кожної колонки, щоб користувачам було легше розуміти, яка інформація відображена в кожній колонці.
- Розміщуйте дані у відповідних клітинах таблиці. Переконайтеся, що дані у кожній клітинці відповідають заголовку колонки.
- Використовуйте кольори або візуальне виділення, таке як сітка або фоновий колір, щоб покращити видимість та читабельність таблиці. Упевніться, що використовувані кольори не порушують доступності та контрастності.
- Забезпечте, щоб ваші таблиці були адаптивними і зручними для перегляду на різних пристроях. Вони повинні належним чином адаптуватися до розмірів екрану та бути легкими для читання навіть на мобільних пристроях.
- Використовуйте межі та відступи, щоб чітко розділяти клітинки таблиці і поліпшити їх вигляд. Розгляньте використання CSS-стилів для додаткового форматування.
- Якщо таблиця вимагає додаткових пояснень або описів, включіть їх під таблицею.
У наступній статті «Відеоурок з JCE editor в Joomla 4. Текстовий редактор» ми розглянемо схожі дії, але в альтернативному текстовому редакторі.
| Автор статті – Хорошевський Олексій |
|---|
 Кандидат технічних наук, викладач Харківського національного університету радіоелектроніки, веб-майстер та SEO-оптимізатор із досвідом роботи понад 15 років. Спеціаліст зі створення сайтів на Joomla та WebSite X5. Автор наукових публікацій, відеокурсів та навчального контенту з веб-розробки та SEO. Веде блог та YouTube-канал, де ділиться своїми знаннями та практичним досвідом. Публікації та робота: |
| Схожі матеріали |
|---|
Корисні посилання:
