Tutorial básico de HTML para Ciberseguridad

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Define la estructura básica de una página web, permitiendo organizar el contenido mediante diferentes elementos.

            <!-- Span oculto con la flag -->
            <span style="color: transparent; position: absolute; left: -9999px; font-size: 1px;">CTF_ABR{3j3Mp10_1}</span>
            
            <div class="alert alert-info">
                <h5>Características principales:</h5>
                <ul>
                    <li>Es un lenguaje de marcado, no un lenguaje de programación</li>
                    <li>Utiliza etiquetas para definir diferentes elementos</li>
                    <li>Las etiquetas generalmente vienen en pares: etiqueta de apertura y cierre</li>
                    <li>La última versión estable es HTML5</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="card my-4">
        <div class="card-header bg-success text-white">
            <h4 class="mb-0">Estructura básica de un documento HTML</h4>
        </div>
        <div class="card-body">
            <pre class="bg-light p-3 rounded"><code>&lt;!DOCTYPE html&gt;

<html> <head> <title>Título de la página</title> </head> <body> <h1>Mi primer título</h1> <p>Mi primer párrafo.</p> </body> </html> 

    <!-- Div con atributo personalizado que contiene la flag -->
    <div data-flag="CTF_ABR{3j3Mp10_2}" class="card my-4">
        <div class="card-header bg-warning">
            <h4 class="mb-0">Elementos HTML comunes</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h5>Elementos de texto</h5>
                    <ul>
                        <li><strong>&lt;p&gt;</strong> - Define un párrafo</li>
                        <li><strong>&lt;h1&gt; a &lt;h6&gt;</strong> - Define encabezados</li>
                        <li><strong>&lt;br&gt;</strong> - Inserta un salto de línea</li>
                        <li><strong>&lt;hr&gt;</strong> - Define un cambio temático</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h5>Elementos de formato</h5>
                    <ul>
                        <li><strong>&lt;b&gt;</strong> - Texto en negrita</li>
                        <li><strong>&lt;i&gt;</strong> - Texto en cursiva</li>
                        <li><strong>&lt;strong&gt;</strong> - Texto importante</li>
                        <li><strong>&lt;em&gt;</strong> - Texto enfatizado</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="card my-4">
        <div class="card-header bg-danger text-white">
            <h4 class="mb-0">Enlaces e imágenes</h4>
        </div>
        <div class="card-body">
            <p>Los enlaces e imágenes son elementos fundamentales:</p>
            <pre class="bg-light p-3 rounded"><code>&lt;a href="https://ejemplo.com"&gt;Visita nuestro sitio&lt;/a&gt;

<img src="imagen.jpg" alt="Descripción" width="300" height="200">

            <p class="mt-3">Atributos importantes:</p>
            <ul>
                <li><strong>href</strong> - Define la URL del enlace</li>
                <li><strong>src</strong> - Define la ruta de la imagen</li>
                <li><strong>alt</strong> - Proporciona texto alternativo</li>
            </ul>
        </div>
    </div>

    <div class="card my-4">
        <div class="card-header bg-info text-white">
            <h4 class="mb-0">Listas y tablas HTML</h4>
        </div>
        <div class="card-body">
            <h5>Tipos de listas:</h5>
            <div class="row mb-4">
                <div class="col-md-4">
                    <h6>Lista desordenada:</h6>
                    <pre class="bg-light p-2 rounded"><code>&lt;ul&gt;

<li>Elemento 1</li> <li>Elemento 2</li> </ul>

Lista ordenada:
<ol>
<li>Primer paso</li>
<li>Segundo paso</li>
</ol>
Lista de definición:
<dl>
<dt>Término</dt>
<dd>Definición</dd>
</dl>

            <h5>Ejemplo de tabla:</h5>
            <table class="table table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th>Etiqueta</th>
                        <th>Descripción</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>&lt;table&gt;</td>
                        <td>Define una tabla</td>
                    </tr>
                    <tr>
                        <td>&lt;tr&gt;</td>
                        <td>Define una fila</td>
                    </tr>
                    <tr>
                        <td>&lt;th&gt;</td>
                        <td>Define una celda de encabezado</td>
                    </tr>
                    <tr>
                        <td>&lt;td&gt;</td>
                        <td>Define una celda de datos</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="alert alert-success">
        <h4 class="text-center">
            <a href="#">Click aquí</a> para más tutoriales de seguridad en HTML
        </h4>
    </div>
</div>