Practica: Codigo-Personalizado

byMilton Rodriguez Lopez -

  Los lenguajes de programación más utilizados en ciberseguridad

https://www.freeformatter.com/

Escapes or unescapes an HTML file removing traces of  characters
https://www.freeformatter.com/html-escape.html#before-output

<pre><code class="language-html">
Formato con el código de escape
</code></pre> 

 <!-- Vista Html con código de escape -->
        <pre><code class="language-html">
          Formato con el código de escape
        </code></pre>

Agregar el código en el Html, al final de body: 

// Copiar y Agregar el siguiente codigo
  <!-- Agregar "prism-okaidia.css" y "prism.js" debajo del Blogger Scripts -->
  <link href="//prismjs.com/themes/prism-okaidia.css" rel="stylesheet">
  <script src="//prismjs.com/prism.js" type="text/javascript"></script>
Copiar y Agregar el siguiente codigo en el area del html que desee mostrar el codigo con formato 
  // Agregar código
  <pre><code class="language-html">
      Aquí va el código -html, -css, -js, etc... a mostrar en la entrada.
      Recuerde que se modifica el class="language- " segun el tipo de codigo a mostrar
  </code></pre>
Agregar Código con comentarios 

  <h2>.: Encabezado </h2>
  <ul><li>...Mostrar comentarios en listas antes del codigo...</li></ul>
  <pre><code class="language-js">
    Aquí va el código a mostrar
  </code></pre>
  <p>...Comentarios despues del codigo...</p>

Agregar al <head> " el link de bootstrap@5 
<!-- Agregar al <head>  " el link de bootstrap@5 " </head>  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
Agregar al final del <body> el CDN de "bootstrap@5" 
<!--  Agregar al final del <body>  el CDN de "bootstrap@5" de  bootstrap.bundle.min.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Columnas contenedores para Videos: Sustituir el codigo del video youtube "zGtk_Ii9VBs" y "UVTp45yA1iU" por el de su preferencia. 
<!-- 2 Columnas contenedores para Videos-->
<hr>
<h3>Titulo o Encabezado </h3>
<div class="container">
    <div class="row">
      <div class="col">
            <!-- Primer video  -->
<div style="width: 20rem;">
    <iframe allowfullscreen="" height="200" width="300" class="BLOG_video_class"
        src="https://www.youtube.com/embed/zGtk_Ii9VBs"  youtube-src-id="zGtk_Ii9VBs"></iframe>
    <div>
    <p>Nombre del video 1</p>
    </div>
</div>
      </div>
      <div class="col">
            <!-- 2do video  -->
<div style="width: 20rem;">
    <iframe allowfullscreen="" height="200" width="300" class="BLOG_video_class"
        src="https://www.youtube.com/embed/UVTp45yA1iU"  youtube-src-id="UVTp45yA1iU"></iframe>
    <div>
    <p>Nombre del video 2</p>
    </div>
</div>
      </div>
    </div>
</div>
<hr>

Agregar al <head> " el link de bootstrap@5 
<!-- Agregar al <head>  " el link de bootstrap@5 " </head>  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
Agregar al final del <body> el CDN de "bootstrap@5" 
<!--  Agregar al final del <body>  el CDN de "bootstrap@5" de  bootstrap.bundle.min.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Agregar contenido en el: "flush-collapse4", sustituya el numero "4" por su correspondiente numeración iniciando del uno "1", en las etiquetas: aria-controls="flush-collapse4", data-bs-target="#flush-collapse4" y id="flush-collapse4", para que funcione el accordion-collapse.
<!-- agregar el contenido en el: flush-collapse -->
<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button aria-controls="flush-collapse1" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapse1" data-bs-toggle="collapse" type="button">
        <b>Titulo: flush-collapse1 </b>
      </button>
    </h2>
    <div class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample" id="flush-collapse1">
      <div class="accordion-body">
		Contenido: flush-collapse1 ...
      </div>
    </div>
  </div>
    <div class="accordion-item">
    <h2 class="accordion-header">
      <button aria-controls="flush-collapse2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapse2" data-bs-toggle="collapse" type="button">
        <b>Titulo: flush-collapse2 </b>
      </button>
    </h2>
    <div class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample" id="flush-collapse2">
      <div class="accordion-body">
		Contenido: flush-collapse2 ...
      </div>
    </div>
  </div>
    <div class="accordion-item">
    <h2 class="accordion-header">
      <button aria-controls="flush-collapse3" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapse3" data-bs-toggle="collapse" type="button">
        <b>Titulo: flush-collapse3 </b>
      </button>
    </h2>
    <div class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample" id="flush-collapse3">
      <div class="accordion-body">
		Contenido: flush-collapse3 ...
      </div>
    </div>
  </div>
    <div class="accordion-item">
    <h2 class="accordion-header">
      <button aria-controls="flush-collapse4" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapse4" data-bs-toggle="collapse" type="button">
        <b>Titulo: flush-collapse4 </b>
      </button>
    </h2>
    <div class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample" id="flush-collapse4">
      <div class="accordion-body">
		Contenido: flush-collapse4 ...
      </div>
    </div>
  </div>
    <div class="accordion-item">
    <h2 class="accordion-header">
      <button aria-controls="flush-collapse5" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapse5" data-bs-toggle="collapse" type="button">
        <b>Titulo: flush-collapse5 </b>
      </button>
    </h2>
    <div class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample" id="flush-collapse5">
      <div class="accordion-body">
		Contenido: flush-collapse5 ...
      </div>
    </div>
  </div>
</div>


<div>
  <h3 style="text-align: center; color: #ff6200;"><b>Tabla de contenido</b></h3>
  <ol style="color: #ff6200; text-align: left;">
    <li><a href="" target="_blank">Tema-n</a></li>
    <li><a href="" target="_blank">Tema-n</a></li>
    <li><a href="" target="_blank">Tema-n</a></li>
    <li><a href="" target="_blank">Tema-n</a></li>
  </ol>
</div>

Contenido: flush-collapse6 ...

 ...

Tags

Entradas que pueden interesarte

Artículo Anterior Artículo Siguiente