Виділяємо інформацію з HTML
Почнемо з простого прикладу - отримаємо заголовки і підзаголовки і виведемо їх безпосередньо перед статтею.
Елемент div з id "toc" буде контейнером для посилань змісту (він також може бути доданий динамічно, але для цього прикладу ми будемо використовувати статичну структуру). Приклад статті поміщений в елемент div з id "content".
Даний скрипт буде формувати наступний код HTML:
А заголовки матимуть вигляд, подібний вид:
Фіксуємо положення змісту
Другий крок, встановити для елемента з id "toc" властивості float значення left з фіксованим положенням, а для елемента з id "content" встановити властивості float значення right.
Ідея полягає в тому, щоб отримати положення всіх заголовків і масштабно розташувати їх по вертикалі на сторінці. Так можна отримати візуальне уявлення про довжину розділу.
Модифікуємо скрипт з попередньої демонстрації:
Даний код визначає положення кожного заголовка (current.position (). Top) і задає масштаб для заповнення структури змісту. Після додавання посилань HTML, нове положення задається за допомогою CSS. Посилання HTML позиціонуються абсолютно. Також кожен тип заголовків має різний масштаб шрифту. CSS для Демонстрації 3 виглядає так:
висновок
Такий підхід до оформлення статей відкриває для користувача можливість оцінити обсяг матеріалу і перейти до потрібного розділу. При цьому генерація такого функціоналу виконується автоматично для будь-якого матеріалу, який буде відповідати простому формату.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!