Mention HTML code in Wordpress post

Asked

Viewed 636 times

2

I’m writing a new post in Wordpress, this post gives several examples of HTML code where I explain all the behavior of the HTML page.

The problem is that Wordpress allows posts' texts to be written and formatted with HTML tags, so I can’t put an example of an HTML page. I’ve tried to <code> and ```html (markdown).

Can someone help me?

Follow the HTML code below:

        <!DOCTYPE html>
        <html>
        <head>
            <title>Java Magazine</title>
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        </head>
        <body>
        <div class="container">
            <h1 id="titulo">Java Magazine - Integração Contínua</h1>
            <h2 id="sub-titulo">Usuários</h2>
            <hr>

            <form class="form-inline" onsubmit="return false">
                <div class="form-group">
                    <input id="id" type="text" class="form-control" placeholder="ID"/>
                </div>
                <button id="btn-buscar-id" class="btn btn-primary" type="button">ID</button>
                <button id="btn-buscar-todos" class="btn btn-primary" type="button">Todos</button>
                <button id="btn-limpar" class="btn btn-danger" type="button">Limpar</button>
            </form>

            <br><br>

            <table id="tabela" class="table table-hover">
                <thead>
                <tr>
                    <th class="col-xs-1"> #</th>
                    <th class="col-xs-11"> Nome</th>
                </tr>
                </thead>
                <tbody id="tabela-resultado"></tbody>
            </table>

            <p id="erro" class="bg-warning">Nenhum registro encontrado!</p>
        </div>
        </body>
        </html>

The tag that opens the form, until the end of the inside of the message disappears from the text, the text appears again in .

wordpress

2 answers

3

  • 1

    Henrique went there and got it. Below the answer of how I managed to solve the problem. Thanks!!!

3


I decided to partially follow the @henriquedpereira tip, who gave me the URL: https://codex.wordpress.org/Writing_Code_in_Your_Posts

To resolve I inserted the HTML code inside the tag ```html and replaces the <, > and / characters as the table mentioned in the link: https://codex.wordpress.org/Writing_Code_in_Your_Posts#List_of_Related_Character_Entities

Follows the code:

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Integração Contínua&lt;&#47;title&gt;
        &lt;link rel="stylesheet" href="http:&#47;&#47;maxcdn.bootstrapcdn.com&#47;bootstrap&#47;3.3.5&#47;css&#47;bootstrap.min.css"&gt;
    &lt;&#47;head&gt;
    &lt;body&gt;
    &lt;div class="container"&gt;
        &lt;h1 id="titulo"&gt;Integração Contínua&lt;&#47;h1&gt;
        &lt;h2 id="sub-titulo"&gt;Usuários&lt;&#47;h2&gt;
        &lt;hr&gt;

        &lt;form class="form-inline" onsubmit="return false"&gt;
            &lt;div class="form-group"&gt;
                &lt;input id="id" type="text" class="form-control" placeholder="ID"&#47;&gt;
            &lt;&#47;div&gt;
            &lt;button id="btn-buscar-id" class="btn btn-primary" type="button"&gt;ID&lt;&#47;button&gt;
            &lt;button id="btn-buscar-todos" class="btn btn-primary" type="button"&gt;Todos&lt;&#47;button&gt;
            &lt;button id="btn-limpar" class="btn btn-danger" type="button"&gt;Limpar&lt;&#47;button&gt;
        &lt;&#47;form&gt;

        &lt;br&gt;&lt;br&gt;

        &lt;table id="tabela" class="table table-hover"&gt;
            &lt;thead&gt;
            &lt;tr&gt;
                &lt;th class="col-xs-1"&gt; #&lt;&#47;th&gt;
                &lt;th class="col-xs-11"&gt; Nome&lt;&#47;th&gt;
            &lt;&#47;tr&gt;
            &lt;&#47;thead&gt;
            &lt;tbody id="tabela-resultado"&gt;&lt;&#47;tbody&gt;
        &lt;&#47;table&gt;

        &lt;p id="erro" class="bg-warning"&gt;Nenhum registro encontrado!&lt;&#47;p&gt;
    &lt;&#47;div&gt;
    &lt;&#47;body&gt;
    &lt;&#47;html&gt;
  • 1

    Cool, put your edited code in so we can see it too.

Browser other questions tagged wordpress

You are not signed in. Login or sign up in order to post.