Elementos en una página HTML#

  • Última modificación: Mayo 14, 2022.

Elementos semánticos#

html-04

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Estructura semantica</title>
  </head>
  <body>
    <header>
        Encabezamiento
    </header>
    <section>
        <h2>Titulo 1</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh velit, gravida
        sed diam a, consectetur cursus felis. Duis scelerisque congue efficitur. Duis nec lacus
        id nulla tempus commodo. Curabitur ut tincidunt mauris. Vivamus tincidunt risus augue,
        a egestas tellus sodales vitae. Fusce vitae felis eu tortor sodales gravida. </p>

        <p>Nulla eget condimentum nulla. Fusce pretium ornare lectus eu bibendum. Donec eros mauris,
        laoreet quis viverra id, lobortis vel dui.</p>

    </section>

    <section>
        <h2>Titulo 2</h2>

        <p> Nullam luctus nibh ac sem tincidunt, ut euismod dui mollis. Integer vitae ante eu
        tortor luctus imperdiet pulvinar eget neque. Nulla finibus vitae quam quis euismod.
        Phasellus porttitor nibh et tellus malesuada lacinia. </p>
    </section>

    <footer>
        Pie de página
    </footer>


  </body>
</html>

html-05

Elementos de una página HTML#

Parágrafos, encabezados y citas#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Nivel 1</h1>

    <h2>Nivel 2</h2>

    <p>
        Markdown es un lenguaje de marcado ligero creado por John Gruber que
        trata de conseguir la máxima legibilidad y facilidad de publicación
        tanto en sus forma de entrada como de salida, inspirándose en
        muchas convenciones existentes para marcar mensajes de correo
        electrónico usando texto plano.
    </p>

    <blockquote>
        Markdown es un lenguaje de marcado ligero creado por John Gruber que
        trata de conseguir la máxima legibilidad y facilidad de publicación
        tanto en sus forma de entrada como de salida, inspirándose en
        muchas convenciones existentes para marcar mensajes de correo
        electrónico usando texto plano.
    </blockquote>

    <p title="--> tooltip <--">
        Parrafo con tooltip.
    </p>


  </body>
</html>

html-06

Enfasis#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>

    <p>Algunas de estas palabras son <em>enfatizadas</em>.</p>

    <p>Algunas de estas palabras son <i>enfatizadas</i>.</p>

    <p>Algunas de estas palabras también son <em>enfatizadas</em>.</p>

    <p>Use dos asteriscos para <strong>énfasis fuerte</strong>.</p>

    <p>O si lo prefiere dos <strong>guiones bajos</strong>.</p>

  </body>
</html>

html-07

Listas sin numeración#

<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

  • Uno

  • Dos

  • Tres

Listas enumeradas#

<ol>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
 </ol>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>

    <h1>Listas sin numeración</h1>

    <ul>
      <li>Uno</li>
      <li>Dos</li>
      <li>Tres</li>
    </ul>

    <h1>Listas enumeradas</h1>

    <ol>
      <li>Uno</li>
      <li>Dos</li>
      <li>Tres</li>
    </ol>

    <h1>Listas tipo diccionario</h1>
    <ol>
        <li> <p>Uno </p>  <p>texto texto texto</p>  </li>
        <li> <p>Dos </p>  <p>texto texto texto</p>  </li>
        <li> <p>Tres</p>  <p>texto texto texto</p>  </li>
    </ol>

  </body>
</html>

html-08

Listas tipo diccionario#

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
      </head>
    <body>

        <dl>
            <dt>Coffee</dt>
            <dd>Black hot drink</dd>
            <dt>Milk</dt>
            <dd>White cold drink</dd>
        </dl>

    </body>
</html>

html-09

Vínculos#

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
      </head>
    <body>

        <p>Este es un vínculo a <a href="http://www.google.com">GOOGLE</a>.</p>

        <footer>
            <p>Autor: Juan David Velasquez</p>
            <p>
                Correo: <a href="mailto:jdvelasq@unal.edu.co">
                jdvelasq@unal.edu.co</a>.
            </p>
        </footer>

        <nav>
            <a href="/html/">HTML</a> |
            <a href="/css/">CSS</a> |
            <a href="/js/">JavaScript</a> |
            <a href="/jquery/">jQuery</a>
        </nav>

    </body>
</html>

html-10

Vínculos tipo referencia#

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
      </head>
    <body>

        <p>
            Estos son vinculos referenciados a
            <a href="https://www.continuum.io" title="Anaconda">Continuum Analytics</a>
            y <a href="https://www.python.org " title="Python"> Python Software Fundation</a>.
        <p>

        <br>

        <p>
            Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.
        </p>

    </body>
</html>

html-11

Imágenes#

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
      </head>
    <body>

        <img src="../../assets/img_avatar1.png" alt="assets/img_avatar1.png" title="Titulo" />

    </body>
</html>

html-12

Código fuente y salida de programas#

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
      </head>
    <body>

        <p>Se pueden crear bloques de código:</p>

        <code>
            <p>for (i = 1; i < 5; i++)</p>
            <p>{</p>
            <p>    printf('%d', i)</p>
            <p>}</p>
        </code>

        <p>
            O se puede colocar código en linea <code>cat out.1 out.2</code>.
        </p>

        <samp>Sample output from a computer program</samp>

    </body>
</html>

html-13

Tablas#

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
      </head>
    <body>

    <table>
        <tr>
            <th>January</th>
            <th>February</th>
            <th>March</th>
        </tr>
        <tr>
            <td>31</td>
            <td>28</td>
            <td>31</td>
        </tr>
    </table>

    </body>
</html>

html-14

Comentarios#

<!-- comentario -->