Skip to main content

Criação de Conteúdo Personalizado com HTML e CSS

O Plone oferece um editor de texto rico (WYSIWYG - "What You See Is What You Get") que atende à maioria das necessidades de formatação de conteúdo. No entanto, para usuários avançados que necessitam de um controle mais granular sobre a estrutura ou o estilo, é possível editar diretamente o código-fonte HTML.

image.png


Embora o Plone permita o uso de HTML e CSS para personalizar a aparência do conteúdo, ele o faz de maneira controlada para garantir a segurança e a integridade do site.

Filtragem de HTML por Segurança

Por padrão, o Plone não permite a inserção de qualquer código HTML. O sistema utiliza um filtro de segurança que processa o código inserido e remove tags e atributos considerados potencialmente perigosos.

O objetivo principal dessa filtragem é prevenir ataques de Cross-Site Scripting (XSS), onde códigos maliciosos poderiam ser injetados nas páginas, comprometendo a segurança dos visitantes e do próprio site.

Estas tags e seus conteúdos são completamente bloqueados quando uma página é salva ou renderizada:

  • <style>,  <object>, <embed>, <applet>, <script>, <meta>

Tags válidas:

  • <a>, <abbr>, <acronym>, <address>, <article>, <aside>, <audio>, <b>, <bdo>, <big>, <blockquote>, <body>, <br>, <canvas>, <caption>, <cite>, <code>, <col>, <colgroup>, <command>, <datalist>, <dd>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <dt>, <em>, <figure>, <figcaption>, <footer>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <head>, <header>, <hgroup>, <hr>, <html>, <i>, <iframe>, <img>, <ins>, <kbd>, <keygen>, <li>, <map>, <mark>, <meter>, <nav>, <ol>, <output>, <p>, <pre>, <picture>, <progress>, <q>, <rp>, <rt>, <ruby>, <samp>, <section>, <small>, <source>, <span>, <strong>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <tt>, <u>, <ul>, <var>, <video>

Como usar HTML e CSS na Prática

  1. HTML Estrutural:

    Você pode usar tags como <div> e <span> para agrupar elementos. Isso é particularmente útil quando combinado com CSS.

  2. Uso de CSS (Folhas de Estilo):

    A forma mais recomendada de aplicar estilos personalizados não é inserir CSS diretamente no editor HTML (embora o atributo style possa ser permitido em alguns casos). A melhor prática no Plone é:

    • Usar Classes CSS Pré-definidas: O tema (template) do seu site Plone geralmente já vem com um conjunto de classes CSS prontas para uso. Por exemplo, você pode aplicar uma classe a um parágrafo para destacá-lo:

      HTML 

      <p class="destaque-importante">
  Este parágrafo terá um estilo visual diferente.
</p>

    • Estilos Inline (Se permitido): Em algumas configurações, o atributo style pode ser usado para modificações rápidas:

      HTML 

      <p style="color: blue; font-weight: bold;">
  Texto em azul e negrito.
</p>

Resumo

É perfeitamente possível usar HTML e CSS para criar layouts ricos e personalizados, mas sempre dentro dos limites de segurança impostos pelo Plone. O sistema sempre priorizará a segurança, filtrando tags e atributos que possam representar um risco.

Back to top