html.txt

===============
Guía HTML by dM
===============

<!-- Comentarios en HTML -->

<!doctype html>
<html lang="en">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
  </head>
<body>
</body>
</html>

-----

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XXXXXX</title>
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
  <link rel="stylesheet" href="styles.css" type="text/css"/>
</head>
<body>
  <div id="containter">
    <div id="header">
      Header
    </div>
    <div id="body">
      Body
    </div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>
</html>
<script type="text/javascript">
</script>
<style type="text/css">
</style>

---------------

<html>
  <head>
    <title>Page Title</title>
  </head>
  <!-- Llamada de un fichero de estilos -->
  <link rel="stylesheet" href="estilo.css" type="text/css"/>

  <!-- Llamada de un fichero css de un servidor externo -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <!-- Llamada de un fichero js -->
  <script src="jquery-1.9.1.js" type="text/javascript"></script>

  <!-- Llamada de un fichero js de un servidor externo -->
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
</body>
</html>

--------------

<html>
  <head> <!-- CABECERA -->
    <title>Titulo</title> <!-- TITULO, se verá reflejado en la barra y pestañas del navegador -->
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!-- Deficne la codificación de caracteres 
    que va a ser interpretada por el navegador, sirve también para poder usar los acentos en HTML -->
    <meta charset="UTF-8" /> <!-- La que usa wikipedia -->
  </head>
<body> <!-- CUERPO, donde va el contenido de la página -->
<center><h2>Pagina Web</h2></center>
<p>
<p align="justify"> El fútbol o futbol (del inglés británico football), también conocido como fútbol asociación, balompié o soccer, es un deporte de equipo jugado entre dos conjuntos de once jugadores cada uno y cuatro árbitros que se ocupan de que las normas se cumplan correctamente. Es ampliamente considerado el deporte más popular del mundo, pues participan en él unos 270 millones de personas.<p>

<p align="justify"> El terreno de juego es rectangular de césped natural o artificial, con una portería o arco a cada lado del campo. El objetivo del juego es desplazar con cualquier parte del cuerpo que no sea los brazos o las manos, y mayoritariamente con los pies (de ahí su nombre), una pelota a través del campo para intentar introducirla dentro de la portería contraria, acción que se denomina marcar un gol. El equipo que logre más goles al cabo del partido, de una duración de 90 minutos, es el que resulta ganador del encuentro. <p>
</body>
</html>


<!-- Desabilitar el click derecho, se pone encima del HEAD
========================================================== -->
<script type="text/javascript"> 
    document.oncontextmenu = function(){return false;}
</script>

<!-- Botón Rollover con dos imágenes
========================================================== -->
<a href="#"><img src="1.PNG" onmouseover="this.src='2.PNG' " onmouseout="this.src='1.PNG' "/> </a>

<!-- Etiquepas para párrafos
========================================================== -->
<p> Sirve para separar parrafos y dejar espacios en blanco

<br> Sirve como fin de línea o como un punto y aparte    

&nbsp; &nbsp; Crear espacios en blanco entre las palabras

<pre></pre> formato de texto, el texto se mostrará como se escribió en el codigo fuente

<hr></hr> Permite trazar lineas horizontales para dividir o crear secciones en la página y <hr color="red"> así como <hr size=10px>

<fieldset></fieldset> Crea un rectangulo alrrededor del texto o imagen

<legend>Titulo</legend> Asignar un enzabezado al fieldset

<center></center> Sirve para alinear un encabezado o un parrafo al centro de la pagina

<!-- HTML5 elimina el uso de center y recomienda el uso de CSS para alinear los textos etc, tambien es valido usar la etiqueta DIV a la cual se le pueden dar atributos como id="nombre_identificador" y align="justify,center,left o right" para alinear -->

<div id="cuerpo" align="left"> 
    Hola....
</div>

<p align="left"></p> Sirve para justificar un parrafo a LEFT, CENTER, RIGHT o JUSTIFY 

=============================
TIPOS DE LETRA, EFECTOS Y MÁS
=============================

<h1></h1> Le da tamaño al texto, varia del 1 al 6

<b></b> Estilo Negrita

<tt></tt> Teletipo

<strong></strong> Fuerte, como negrita

<i></i> Cursiva

<em></em> Émfasis, como cursiva

font-style: italic // Cursiva en css

<u></u> Subrayado

<strike></strike> Texto tachado    

<s></s> Texto tachado

<sup></sup> Superíndice, como elevado en matemáticas

<sub></sub> Subíndice

<marquee></marquee> El texto se desplaza de derecha a izquierda repetidamente    

<font size="7px">TEXTO</font> Para asignar tamaño al texto, se denota en pixeles el tamaño

<font color="red">TEXTO</font> Para dar color al texto, red, green, orange, blue etc...

<font face="arial">TEXTO</font> Tipo de fuente del texto            

===============
COLORES Y FONDO
===============

<body text="red"></body> Para dar color a todo el texto de la página

<body bgcolor="red"></body> Color a el fondo de la página

<body background="Imagen.jpg"></body> Asignar una imagen local como fondo de la página

<body link="yellow"></body> Para dar color a los enlaces

<body alink="yellow"></body> Color de enlaces ya visitados

======
LISTAS
======

<ol> ó <ul> Tipo de demarcacion de una lista, numerica y punto
<li>techo</li>
<li>puerta</li>
<li>ventana</li>

<OL type=A> De tipos A,a,I,i,1

<ol> Los famosos más insoportables de la televisión:
    <li>Antonio Bandelas</li>
    <li>Catherine Zeta Jones</li>
    <li>Robert Downey Jr.</li>
</ol>

<!-- En css, sirve para desabilitar la decoración de los elementos de la lista -->

list-style: none outside none;

---

<ul style="list-style-type: none;">

-----

<!-- Listas con estilos
========================================================== -->
<html>
<head>
    <title></title>
    <style type="text/css">
    li {
      /*list-style: none;*/
      color: red;
    }
    #a {
      color:blue;
    }
    #b {
      color:yellow;
    }
    #c {
      color:green;
    }
    </style>
</head>
<body>
  <ul>
      <li id="a">aaaaaaa</li>
      <li id="b">bbbbbbb</li>
      <li id="c">ccccccc</li>
      <li>ddddddd</li>
  </ul>
  <p />
  <ol>
      <li id="a">aaaaaaa</li>
      <li id="b">bbbbbbb</li>
      <li id="c">ccccccc</li>
      <li>ddddddd</li>
  </ol>
</body>
</html>

===============
LINKS O ENLACES
===============

<a href="LINK">Título del enlace</a> Crear un link

<a href="DIRECCION DE PAGINA EN EL ORDENADOR LOCAL">Título</a> Enlaces  locales, páginas que están en el mismo ordenador

<img src="Imagen.jpg" width="200px" height="200px"></img> Agregar una imagen local a la página, debe estar en el mismo directorio de la página, se le puede asignar el tamaño, dimensiones que tendrá la imagen

<a href="link"><img src="Imagen.jpg"></a> Poner una imagen como enlace

<embeed SRC="Multimedia.mp4"> Agregar archivos multimedias a la página, videos, imagenes o archivos de audio
width="400" Se le puede asignar un tamaño al archivo multimedia agregado a la página
height="180"

-----

Permite añadir contenido HTML o embeber dentro de una página HTML. Una página dentro de otra

<iframe src="http://as.com" width="800" height="800" scrolling="yes" />

Abrir una página web dentro de otra

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"> </iframe>

-----

<A HREF="Multimedia.mp3">Texto o Imagen</A> Texto o Imagen como enlace a un archivo multimedia

<a href="libro.rar">Descargar Libro</a> Descargar archivo desde el servidor o carpeta local de la página

<!--META http-equiv="refresh" content="número_segundos;url=URL de refresco"--> Sirve para que la pagina se actualice en otra que indiquemos, se le asigna el tiempo de refresco y la URL de la página

<a name="Inicio"></a> Ancla, sirve para asignar un enlace a una seccion de la
página, por ejemplo el inicio de la misma, con: <a href="#Inicio">Inicio</a> nos
Dirigimos al ancla

<a href="#" title="Ejemplo de título">ENLACE</a> Sirve para ayadir un Título o pequeño texto sobre un enlace determinado, al posar el cursor sobre el enlace se observará el texto

<!-- Abrir enlace en una nueva pestaña -->
<a href="pagina.html" target="_blank">abrir enlace en una nueva pestaña</a>

-----
<!-- Enlaces Locales, sirve para trasladarse a sitios determinados dentro de la misma página, por
ejemplo secciones de la página -->
<body>
<h2>Enlaces Locales</h2>
<h3><a name="indice">Indice</a></h3>
<ul>
  <li><a href="#uno">Seción 1</a>
  <li><a href="#dos">Seción 2</a>
  <li><a href="#tres">Seción 3</a>
  <li><a href="#cuatro">Seción 4</a>
</ul>
<hr>
<h3><a name="uno">Sección 1</a></h3>

11111111111111111111111111 <br>

<hr>

<h3><a name="dos">Sección 2</a></h3>

22222222222222222222222

<hr>

<h3><a name="tres">Sección 3</a></h3>

333333333333333333333333333333

<hr>

<h3><a name="cuatro">Sección 4</a></h3>

444444444444444444444444

</body>

<!-- Tablas
========================================================== -->

<table border="3px" cellpadding="10px" cellspacing="10px" style="width:100%">
    <caption>Título de la tabla</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

-----

<!-- tabla limpia -->
<table border="1px" cellpadding="0px" cellspacing="0px" style="width:100%">
  <thead>
    <tr>
      <th>Mes</th>
      <th>Pagos</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Suma</td>
      <td>180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Enero</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

----------

<!-- tabla limpia mas sencilla -->
<table border="1px" cellpadding="0px" cellspacing="0px" style="width:100%">
  <thead>
    <tr>
      <th>xxxx</th>
      <th>xxxx</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
  </tbody>
</table>

-----

<td bgcolor="red"> Para dar color a una celda
cellpadding=10px Para dar distancia entre el borde de la celda y el texto que contiene
cellspacing="10px" Establece la anchura en px de los bordes de la celda
style="width:100%" Ancho de la tabla
style="text-align:center" Centrar elementos(texto) de las celdas
style="width:100%;text-align:center" Dos atributos en el estilo separados por ;

<!-- Tablas con cabecera, cuerpo y pies. El orden de uso de thead tbody y tfoot no altera el resultado
siempre los mostrara en orden en la vista -->
<html>
<head>
  <style>
    thead {color:green;}
    tbody {color:blue;}
    tfoot {color:red;}
    table, th, td {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Mes</th>
      <th>Pagos</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Suma</td>
      <td>180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Enero</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>80</td>
    </tr>
  </tbody>
</table>
</body>
</html>

----------

<!-- Tabla con estilo -->
<html>
    <head>
      <title></title>
      <meta charset="UTF-8" />
    </head>
    <style>
      table {
        width:50%;
        text-align: center;
        border-color: red;
        /*color:yellow;*/
        /*color: white;*/
      }
      div {
        font-size:20px;
        color: Red;
      }
    </style>
<body>
  <center>
      <table border="1px" cellpadding="5px" cellspacing="1px">
        <p >
        <caption></caption>
        <tr>
          <td><button id="grafo" type="" class="btn btn-success" >Grafo de menciones</button></td>
          <td>CÓNDOR</td>
          <td><button id="conteos" type="" class="btn btn-success" >Conteos comparativos</button></td>
        </tr>
        <tr>
          <td><button id="agrupar" type="" class="btn btn-success" >Agrupamiento por temas</button></td>
          <td><img src="condor.png" width="100px" heigth="100px"></img></td>
          <td><button id="conteos_simp" type="" class="btn btn-success" >Conteos simples</button></td>
        </tr>
        <tr>
          <td></td>
          <td><button id="graficos" type="" class="btn btn-success" >Comportamientos en el Tiempo</button></td>
          <td></td>
        </tr>
      </table>
      <div>
          hola
      </div>
  </center>
</body>
</html>

<!-- Tabla con estilo e identificador -->
<html>
  <head>
    <title></title>
    <meta charset="UTF-8" />
  </head>
  <style>
    table#X {
      width:50%;
      text-align: center;
      color: red;
      border-color: red;
    }
    table#Y {
      width:50%;
      text-align: center;
      color: blue;
      border-color: blue;
    }
  </style>
<body>
  <center>
    tabla 1
    <br />
    <table id="X" border="1px" cellpadding="0px" cellspacing="0px">
      <tr><td>1</td>  <td>2</td> <td>3</td> </tr>
      <tr><td>4</td>  <td>5</td> <td>6</td> </tr>
      <tr><td>7</td>  <td>8</td> <td>9</td> </tr>
    </table>
    <p></p>
    tabla 2
    <br />
    <table id="Y" border="1px" cellpadding="0px" cellspacing="0px">
      <tr><td>1</td>  <td>2</td> <td>3</td> </tr>
      <tr><td>4</td>  <td>5</td> <td>6</td> </tr>
      <tr><td>7</td>  <td>8</td> <td>9</td> </tr>
    </table>
  </center>
</body>
</html>

<!-- Tabla con estilo e identificador en th, td -->
<!DOCtype html>
<html>
<head>
  <meta charset="UTF-8">
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
table#t01 {
}

table#t01 tr:nth-child(even) {
  background-color: LightCyan;
}
table#t01 tr:nth-child(odd) {
  background-color: green;
}
table#t01 th    {
  background-color: DodgerBlue;
  color: white;
}
</style>
</head>
<body>
<br>
<table id="t01" border="1px" cellpadding="1px" cellspacing="0px" style="text-align:center;margin-left:10px">
  <tr>
    <th><b>ID</b></th>
    <th><b>Usuario</b></th>
    <th><b>Nombre</b></th>
    <th><b>Apellido</b></th>
    <th><b>Correo electrónico</b></th>
    <th><b>Creado</b></th>
    <th><b>Último acceso</b></th>
    <th><b>Admin</b></th>
    <th><b>Activo</b></th>
    <th><b>Grupo</b></th>
  </tr>
  <tr>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>Sí</td>
    <td>No</td>
    <td>Grupo</td>
  </tr>
  <tr>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>Sí</td>
    <td>No</td>
    <td>Grupo </td>
  </tr>
  <tr>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>Sí</td>
    <td>No</td>
    <td>Grupo </td>
  </tr>
</table>
</body>
</html>

<!-- Tabla con estilo e identificador en th, td con hover -->
<!DOCtype html>
<html>
<head>
  <meta charset="UTF-8">
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
table#t01 th    {
  background-color: DodgerBlue;
  color: white;
}
table#t01 {
  color: gray;
}

table#t01 tr:nth-child(even) {
}
table#t01 tr:nth-child(even):hover {
  background-color: LightCyan;
}
table#t01 tr:nth-child(odd) {
}
table#t01 tr:nth-child(odd):hover {
  background-color: LightCyan;
}
</style>
</head>
<table id="t01" border="1px" cellpadding="1px" cellspacing="0px" style="text-align:center;margin-left:10px">
  <tr>
    <th><b>ID</b></th>
    <th><b>Usuario</b></th>
    <th><b>Nombre</b></th>
    <th><b>Apellido</b></th>
    <th><b>Correo electrónico</b></th>
    <th><b>Creado</b></th>
    <th><b>Último acceso</b></th>
    <th><b>Admin</b></th>
    <th><b>Activo</b></th>
    <th><b>Grupo</b></th>
  </tr>
  <tr>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>Sí</td>
    <td>No</td>
    <td>Grupo</td>
  </tr>
  <tr>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>Sí</td>
    <td>No</td>
    <td>Grupo </td>
  </tr>
  <tr>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>Sí</td>
    <td>No</td>
    <td>Grupo </td>
  </tr>
  <tr>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>Sí</td>
    <td>No</td>
    <td>Grupo </td>
  </tr>
  <tr>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>XXXX</td>
    <td>Sí</td>
    <td>No</td>
    <td>Grupo </td>
  </tr>
</table>
</body>
</html>

==========
GET y POST
==========

Se suele prestar a confusión ya que tanto GET como POST son métodos del
protocolo HTTP el cual esta compuesto por un envío al servidor conocido como
petición (request) y una respuesta a dicha solicitud (response).

Tanto GET como POST, justamente por ser métodos ambos de HTTP, ejecutan un
request y response, y a mi criterio esto suele ser parte de la confusión sobre
los objetivos reales de ambos métodos.

El concepto GET es obtener información del servidor. Traer datos que están en el
servidor, ya sea en un archivo o base de datos, al cliente. Independientemente
de que para eso tengamos que enviar (request) algún dato que será procesado para
luego devolver la respuesta (response) que esperamos, como por ejemplo un
identificador para obtener una noticia de la base de datos.

POST sin embargo es enviar información desde el cliente para que sea procesada y
actualice o agregue información en el servidor, como sería la carga o
actualización en sí de una noticia. Cuando enviamos (request) datos a través de
un formulario, estos son procesados y luego a través de una redirección por
ejemplo devolvemos (response) alguna página con información.

Ambos métodos solicitan una respuesta del servidor y ahí es donde parecen que
los conceptos son iguales ya que con ambos se podría lograr los mismos
objetivos. Yo podría, aunque estaría mal, enviar por GET ciertos datos en la URL
y “actualizar o insertar” información en mi base de datos, pero eso le
correspondería al método POST. De la misma manera podría solicitar una página
diferente por medio de POST y simplemente mostrarla como respuesta aunque eso
debería ser a través de una llamada GET.

Las llamadas GET pueden ser cacheadas (historial del navegador), indexadas por
buscadores, agregar los enlaces a nuestros favoritos o hasta pasar una url
completa a otra persona para que directamente ingrese a esa página. Con el
método POST sin embargo no se puede hacer esto.

Generalmente usamos links para ejecutar llamadas GET ya que la idea del link es
simplemente “solicitar” una información (página) al servidor y que sea devuelta
como una respuesta. Mientras usamos formularios para actualizar datos de
productos, clientes, noticias, etc, también teniendo en cuenta que por el método
POST también se puede enviar mucha más cantidad de datos que por GET.

<!-- Formularios -forms
========================================================== -->

<!-- Atributos de un formulario -->
required // Atributo que hace que el campo sea obligatorio llenarlo
size="10" // Atributo que se puede añadir al input
maxlength="10" // Atributo del input para limitar el número de caracteres permitidos en los campos
autocomplete=off // Atributo para evitar recordar los datos introducidos en los campos
placeholder="Tu Nombre" //Texto de ejemplo dentro del campo del formulario, a manera de ejemplos

<form action="datos.php" method="get"> formulario de USUARIO y CONTRASEÑA también method="post"
  Nombre: <input type="text" name="nombre" autocomplete=off><br />
  Contraseña: <input type="password" name="contrasena"><br />
  <input type="submit" value="Enviar">
  <input type="reset" value="Borrar">
  <input type=image src="guardar.png" width="25" height="15"> Imagen como boton submit
  <a href="#"><img src="guardar.png" alt="Enviar"></a> Imagen como boton submit
  <input type="image" name="imageField" src="guardar.png" /> Imagen como boton submit
</form>

<!-- HTML agrega nuevos tipos de formularios y validacion de campos sin el uso de JavaScript -->
<div id="formulario1">
  <h4>LOGIN</h4>
  <form action="#" method="GET">
    Nombre: <input type="text" name="nombre"><br />
    Contraseña: <input type="password" name="contrasena"><br /><p></p
    Búsqueda: <input type="search"> <br />
    Números: <input type="number"> <br />
    Rango: <input type="range"> <br />
    Color: <input type="color"> <br />
    NMobNum: <input type="tel"> <br />
    URL: <input type="url"> <br />
    E-Mail: <input type="email"> <br />
    <input type="submit" value="Enviar">
    <input type="reset" value="Borrar">
  </form>
</div>

----

<!-- Ejemplo del type number, Cantidad (entre 1 y 5), no es la cantidad de
caracteres si no el valor introducido -->
<form action="/action_page.php">  
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
    
------

<form action="#" method="get">
  Usuario: <input type="text" name="user" placeholder="Tu Usuario" required> <br />
  Usuario: <input type="text" name="user" placeholder="Tu Usuario" disabled="disabled" required> <br />
  Contraseña: <input type="password" name="pass" placeholder="Tu clave" required> <br />
  <input type="submit" value="Enviar">
  <input type="reset" value="Borrar">
</form>

<!-- Básico para login -->
<form action="#" method="get">
  Usuario: <input type="text" name="user"> <br />
  Contraseña: <input type="password" name="pass"> <br />
  <input type="submit" value="Enviar">
  <input type="reset" value="Borrar">
</form>

--------

<!-- Botón enviar -->
<form action="" method="get">
  Nombre: <input type="text" name="nombre"> <br />
  <!--input type="submit" value="Enviar"-->
  <button>Enviar</button>
</form>

<!-- textarea -->
<form>
  <textarea name="texto" rows="10" cols="50">
    Hola hdspm
  </textarea>
</form>

<!-- Formulario de Selección -->
<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<!-- selected sirve para que esa opción sea la predeterminada -->
<select>
  <option value="volvo">Volvo</option>
  <option value="saab" >Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

<!-- Checkbox -->
<form action="datos.php" method="get">
  ¿Cuáles son sus pasatiempos favoritos?<br>
  <input type="checkbox" name="pasa" value="tv">TV<br>
  <input type="checkbox" name="pasa" value="libros">Libros<br>
  <input type="checkbox" name="pasa" value="musica">Música<br>
  <input type="checkbox" name="pasa" value="otros">Otros<br>
</form>

<!-- Subir una imagen a la página o al servidor -->
<form action="foto.php" method="post" accept="image/jpg">
  Ingrese la foto: <input type="file" name="foto"><br />
  <input type="submit" value="Enviar">
  <input type="reset" value="Borrar">
</form>

<!-- Tipo radio -->
<form action="colores.php" method="get"> 
  Elija un color<br>
  <input type="radio" name="col" value="red">Rojo<br>
  <input type="radio" name="col" value="blue">Azul<br>
  <input type="radio" name="col" value="green">Verde<br>
  <input type="submit" value="Enviar">
  <input type="reset" value="Borrar">
</form>

=======
Estilos
=======

<div style="color:red;font-size:20px">
    hola
</div>

<p style="color:green;font-size:30px">
    hola
</p>

<h1 style="color:green;font-size:10px">Título grande</h1>

<p style="font-size:15px;color:red;font-family: Verdana">Un párrafo verdaderamente espectacular</p>

------

<html>
  <head>
    <title>Ejemplo de estilos con CSS</title>
    <style>
      h1 { color: red;  font-family: Arial;   font-size: large;  }
      p  { color: blue; font-family: Verdana; font-size: medium; }
    </style>
  </head> 
<body>
  <h1>Titular de la página</h1>
  <p>
    CSS permite separar los contenidos de la página y la información sobre su
    aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea
    una zona especial en la que se incluye toda la información relacionada con
    los estilos de la página.
  </p>
</body>
</html>

------

<html>
    <head>
    <title>Titulo</title>
        <style>
            div {
                float: justify; 
                border: ridge 1px red;
                margin: 20px;
            }
        </style>
    </head>    
<body> 
    <div>
        <p>
        El fútbol femenino ha tenido un crecimiento lento en el fútbol
        moderno, principalmente por obstáculos sociales y culturales que no
        permiten el ingreso pleno de la mujer al deporte.29 El primer encuentro
        femenino bajo las reglas del fútbol asociación del cual se tienen
        registros sucedió en 1892 en Glasgow, Escocia.30 A finales de 1921 el
        fútbol femenino fue prohibido en Inglaterra, hecho que no le permitió
        expandirse al resto del mundo.
        </p>
    </div>    
</body>
</html>

<!-- LLamado de id y class en CSS -->
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
</head>
<style>
  div {
    border: ridge;
    width: 300px;
  }
  div#a {        
    color: yellow;
  }
  div#b {
    color: blue;    
  }
  div#c {
    color: red;
  }
  div.d {
    color: green;
  }
</style>
<body>
<center>
  <div id="a">
    11111
  </div>
  <br />
  <div id="b">
    22222
  </div>
  <br />
  <div id="c">
    33333
  </div>
  <br />
  <div class="d">
    44444
  </div>
</center>
</body>
</html>

<!-- hover -->
<!DOCtype html>
<html>
    <head>
        <title>Prueba</title>
        <style>
            b {
                color:red;
            }

            b:hover {
                color:green;
            }
        </style>  
    </head>
<body>
    <b>Hola lince</b> 
</body>
</html>

<!-- Hover con imagenes -->
<html>
    <head>
        <title>Estilo para codigo basico</title>
        <meta charset="UTF-8" />
    </head>
    <style type="text/css">
    img {      
    }
    img:hover {
      border: ridge 1px;
    }
    </style>
<body>  
    <img src="1.png" onmouseover="this.src='2.png' " onmouseout="this.src='1.png' "/>
</body>
</html>

<!-- Hover con imagenes con id -->
<html>
    <head>
        <title>XXXXXX</title>
        <meta charset="UTF-8" />
    </head>
    <style type="text/css">
    img {      
    }
    img#firefox:hover {
      border:ridge 1px;
    }
    </style>
<body>  
    <img id="firefox" src="firefox-icon.png" width="200px"></img>
    <p />
    <img src="firefox-icon.png" width="200px"></img>
</body>
</html>

<!-- Estilo en <div> con el id y el class -->
<html>
    <head>    
        <title>Titulo</title>
        <meta charset="utf-8" />
        <style>
            #a { /* Llamada de un div por su identificador*/
                float: justify; 
                border: ridge;
                margin: 20px;
            }
            .b { /* Llamada de un div por su identificador de clase*/
                float: justify; 
                border: ridge;
                margin: 20px;
            }
        </style>
    </head> 
<body> 
    <div id="a">
        <P>El fútbol femenino ha tenido un crecimiento lento en el fútbol moderno, principalmente por obstáculos sociales y culturales que no permiten el ingreso pleno de la mujer al deporte.29 El primer encuentro femenino bajo las reglas del fútbol asociación del cual se tienen registros sucedió en 1892 en Glasgow, Escocia.30 A finales de 1921 el fútbol femenino fue prohibido en Inglaterra, hecho que no le permitió expandirse al resto del mundo.</P>
    </div>
    <div class="b">
        <P>El fútbol femenino ha tenido un crecimiento lento en el fútbol moderno, principalmente por obstáculos sociales y culturales que no permiten el ingreso pleno de la mujer al deporte.29 El primer encuentro femenino bajo las reglas del fútbol asociación del cual se tienen registros sucedió en 1892 en Glasgow, Escocia.30 A finales de 1921 el fútbol femenino fue prohibido en Inglaterra, hecho que no le permitió expandirse al resto del mundo.</P>
    </div>
</body>
</html>

<!-- En el mismo div -->
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <style>
    #a {
      border: ridge 1px;
      width: 500px; 
      height: 200px;
    } 
    .b {
      background-color: gray;
    }     
    </style>
<body>
  <div id="a" class="b">xxxxxxxxxxxx</div>  
</body>
</html>

<!-- Llamado de id y class en linea css -->
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <style>
    #a.b {
      border: ridge 1px;
      border-radius: 10px;
      width: 500px; 
      height: 200px;
      background-color: red;
    }     
    </style>
<body>
  <div id="a" class="b">xxxxxxxxxxxx</div>  
</body>
</html>

<!-- Centrar/alinear un elemento <div> medio/medio -->
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <style>
        #prueba {
            margin: auto;
            height: 430px;
            width: 500px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: absolute;
            border: ridge 1px;
        }
    </style>
<body>  
    <div id="prueba">
        <p>xxxxxxxxxxxxxxxxxxxxx</p>
        <p>xxxxxxxxxxxxxxxxxxxxx</p>
        <p>xxxxxxxxxxxxxxxxxxxxx</p>
    </div>
</body>
</html>

<!-- Menu con estilos -->
<html>
<head>
    <title></title>
    <style type="text/css">
        @import url(http://fonts.googleapis.com/css?family=Carme);
        .fit-content ul {
            font-family: carme, sans serif;
            width: -moz-fit-content;
            width: -webkit-fit-content;
            width: -ms-fit-content;
            width: -o-fit-content;
            width: fit-content;
            margin: 0 auto;
            background: DarkRed;
            border-radius: 8px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            list-style: none;
            overflow: hidden;
            padding: 10px 5px;
            font-size: 1.2rem;
        }
        .fit-content ul li {
            float: left;
            margin: 0 5px;
        }
        .fit-content a {
            background: blue;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            color: black;
            display: block;
            padding: 4px 10px;
            text-decoration: none;
            -moz-transition: background .7s;
            -webkit-transition: background .7s;
            -ms-transition: background .7s;
            -o-transition: background .7s;
            transition: background .7s;
        }
        .fit-content a:hover {
            background: #EC0404;
            outline: 0 none;
            text-shadow: 0 1px #000; 
        }
    </style>
</head>    
<body>
    <p></p>
    <nav class="fit-content">
        <ul class="fit-content">
            <li><a href="#">Aaaaaaa</a></li>
            <li><a href="#">Bbbbbbbb</a></li>
            <li><a href="#">Cccccccc</a></li>
            <li><a href="#">0123456789</a></li>
        </ul>
    </nav>
</body>
</html>

<!-- Menu horizontal, listas con estilos -->
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #111;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

<!-- Bootstrap botones -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

<!-- Bootstrap Buttons tamaños -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

<!-- Block Level Buttons -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-block">Button 2</button>

  <h2>Large Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

  <h2>Small Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>

<!-- iconos Bootstrap -->
<!-- Documentación y ejemplos en: http://getbootstrap.com/components/ -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    <button type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </button>
    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </button>
  </div>
</body>
</html>

<!-- formulario, campo de busqueda con estilo -->
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #caja {
            background: none repeat scroll 0 0 #EEEEEE;
            border: 0 none;
            padding: 8px;
            width: 200px;
        }
        #boton-buscar {
            background: none repeat scroll 0 0 #359BED;
            border: 0 none;
            border-radius: 0 0 0 0;
            color: #FFFFFF;
            font-weight: 500;
            padding: 8px 10px;
        }
        #formulario {
            /*border: ridge;*/
            height: 250; 
            width: 300;
            font-family: carme, sans serif;
            /*color: #359BED;*/
            color: orange;
        }        
    </style>
</head>
<body>
    <div align="center">
        <!--form action="" style="display:inline;" method="get">
            <input type="text" id="caja" name="busqueda" placeholder="Buscar..."/>
            <input type="submit" id="boton-buscar" value="Buscar" />
        </form-->
        <p />
        <div id="formulario" align="right">
            <form id="form" action="#" method="get">
                <b>Nombre: </b><input type="text" name="nombre" placeholder="Tu Nombre" id="caja" required> <p />
                <b>Apellido: </b> <input type="text" name="apellido" placeholder="Tu Apellido" id="caja" required> <p />
                <b>Cédula: </b><input type="text" name="ci" placeholder="Tu Cédula" id="caja" required> <p />
                <b>Correo-e: </b><input type="text" name="correo-e" placeholder="Tu Correo" id="caja" required> <p />
                <input type="submit" value="Enviar" id="boton-buscar">
                <input type="reset" value="Borrar" id="boton-buscar">
            </form>
        </div>
    </div>    
</body>
</html>

<!-- formulario, Campo de busqueda con estilo 2 -->
<html>
<head>
    <style>
        body {
            background:#f8f8f8;
        }
        #search {
        }
        #search input[type="text"] {
            background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
            border: 1px solid #d1d1d1;
            font: bold 12px Arial,Helvetica,Sans-serif;
            color: #bebebe;
            width: 150px;
            padding: 6px 15px 6px 35px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
            -webkit-transition: all 0.7s ease 0s;
            -moz-transition: all 0.7s ease 0s;
            -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
        }
        #search input[type="text"]:focus {
            width: 200px;
        }
    </style>
</head>
<body>
    <form method="get" action="#" id="search">
        <input name="a" type="text" size="40" placeholder="Buscar..." />
        <button>Buscar</button>
    </form>

    <p />

    <form action="#" method="get" id="search">
        <label> Nombre: <input type="text" name="nombre"> </label> <p />
        <label> Apellido: <input type="text" name="nombre" >  </label> <p />
        <label> Cedula: <input type="text" name="nombre" > </label> <p />
        <input type="submit" value="Enviar">
        <input type="reset" value="Borrar">
    </form>
</body>
</html>

<!-- La etiqueta span
permite agrupar varios elementos en línea seguidos dentro de un
mismo bloque (por ejemplo, varias palabras seguidas en un párrafo),
para después darles formato con la hoja de estilo, tambien podemos declarar
clases para identificar etiquetas y luego llamarlas en los estilos -->
<html>
<head>
  <meta charset="utf-8">  
  <style>
    span.fecha { 
      font-style: oblique; 
      text-decoration: underline;
    }
    span.resaltar { 
      color: red; 
    }
  </style>  
</head>
<body>
<p>El <span class="resaltar">primer servidor web de la historia</span> 
se instaló en el CERN en <span class="fecha">diciembre de 1990</span> (<a
href="https://en.wikipedia.org/wiki/Image:First_Web_Server.jpg">foto</a>)</p>
</body>
</html>

<!-- Estilo para div, mostrar codigos como ejemplo y uso de estilo en <span></span> -->
<html>
    <head>
        <title>Estilo para codigo basico</title>
        <meta charset="UTF-8" />
    </head>

    <style>
        #code {
            background-color: #2B3047;
            width:50%;
            color: white;
            border-radius: 15px;
            border: ridge 1px;      
        }        
    </style>
<body>
<h2>Archivos</h2>
<h3>Archivos - Carga un archivo y verifica</h3>
Carga un archivo a través de un formulario y retorna un json con la información de la firma.
<br />
<br />
<a href="https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/firmados">https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/firmados</a>
<p />
Ejemplo:
<div id="code">
    <pre>
    <span style="color:#5376FF">var</span> formData <span style="color:#CB0630">= new</span> formData();
    formData.append("upload", $("#file-sign")[0].files[0]);            
    $.ajax({
             url: "https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/firmados",
             type: "post",
             datatype: "json",
             data: formData,
             cache: false,
             contenttype: false,
             processData: false,
             headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
             <span style="color:#CB0630">success:</span> <span style="color:#5376FF">function</span>(response) {
                    <span style="color:#5376FF">var</span> json = JSON.stringify(response);
                    <span style="color:#5376FF">alert</span>(json);
             },
             <span style="color:#CB0630">error:</span> <span style="color:#5376FF">function</span>(response){
                    <span style="color:#5376FF">alert</span>("error: " + response.error.toString());
             }
    });
    </pre>
</div>
</body>
</html>
<!--span style="color:#CB0630"></span>
<span style="color:#5376FF"></span-->

<!-- Ejemplo practico -->
<html>
    <head>
        <title>Estilo para codigo basico</title>
        <meta charset="UTF-8" />
    </head>

    <style>
        #code {
            background-color: #141830;
            width:50%;
            color: white;
            border-radius: 15px;
            border: ridge 1px;            
        }        
    </style>
<body>
Ejemplo:
<div id="code">
    <pre>    
    <span style="color:aqua">var</span> formData <span style="color:red">= new</span> formData();
        formData.append("<span style="color:Khaki">upload</span>", <span style="color:red">$</span>(<span style="color:Khaki">"#file-sign"</span>)[<span style="color:DarkViolet">0</span>].files[<span style="color:DarkViolet">0</span>]);
        <span style="color:red">$</span>.ajax({
                 url: <span style="color:Khaki">"https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/firmados"</span>,
                 type: <span style="color:Khaki">"post"</span>,
                 datatype: <span style="color:Khaki">"json"</span>,
                 data: formData,
                 cache: <span style="color:DarkViolet">false</span>,
                 contenttype: <span style="color:DarkViolet">false</span>,
                 processData: <span style="color:DarkViolet">false</span>,
                 headers: {<span style="color:Khaki">"Authorization"</span>:<span style="color:Khaki">"Basic YWRtaW46YWRtaW4="</span>},
                 <span style="color:Lime">success</span>: <span style="color:aqua">function</span>(<span style="color:orange">response</span>) {
                        <span style="color:aqua">var</span> json <span style="color:red">=</span> JSON.stringify(response);
                        <span style="color:aqua">alert</span>(json);
                 },
                 <span style="color:Lime">error</span>: <span style="color:aqua">function</span>(<span style="color:orange">response</span>){
                        <span style="color:aqua">alert</span>(<span style="color:Khaki">"error: "</span> <span style="color:red">+</span> response.<span style="color:aqua">error</span>.<span style="color:aqua">toString</span>());
                 }
        });        
    </pre>
</div>
</body>
</html>
<!--span style="color:Lime"></span-->

<!-- Ejemplo practico con numeración de lineas -->
<html>
    <head>
        <title>Estilo para codigo basico</title>
        <meta charset="UTF-8" />
    </head>

    <style>
        #code {
            background-color: #141830;
            width:50%;
            color: white;
            border-radius: 15px;
            border: ridge 1px;            
        }
    </style>
<body>
Ejemplo:
<div id="code">    
<pre>
<span style="color:gray"> 1</span>    <span style="color:aqua">var</span> formData <span style="color:red">= new</span> formData();
<span style="color:gray"> 2</span>        formData.append("<span style="color:Khaki">upload</span>", <span style="color:red">$</span>(<span style="color:Khaki">"#file-sign"</span>)[<span style="color:DarkViolet">0</span>].files[<span style="color:DarkViolet">0</span>]);
<span style="color:gray"> 3</span>        <span style="color:red">$</span>.ajax({
<span style="color:gray"> 4</span>                 url: <span style="color:Khaki">"https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/firmados"</span>,
<span style="color:gray"> 5</span>                 type: <span style="color:Khaki">"post"</span>,
<span style="color:gray"> 6</span>                 datatype: <span style="color:Khaki">"json"</span>,
<span style="color:gray"> 7</span>                 data: formData,
<span style="color:gray"> 8</span>                 cache: <span style="color:DarkViolet">false</span>,
<span style="color:gray"> 9</span>                 contenttype: <span style="color:DarkViolet">false</span>,
<span style="color:gray"> 10</span>                 processData: <span style="color:DarkViolet">false</span>,
<span style="color:gray"> 11</span>                 headers: {<span style="color:Khaki">"Authorization"</span>:<span style="color:Khaki">"Basic YWRtaW46YWRtaW4="</span>},
<span style="color:gray"> 12</span>                 <span style="color:Lime">success</span>: <span style="color:aqua">function</span>(<span style="color:orange">response</span>) {
<span style="color:gray"> 13</span>                        <span style="color:aqua">var</span> json <span style="color:red">=</span> JSON.stringify(response);
<span style="color:gray"> 14</span>                        <span style="color:aqua">alert</span>(json);
<span style="color:gray"> 15</span>                 },
<span style="color:gray"> 16</span>                 <span style="color:Lime">error</span>: <span style="color:aqua">function</span>(<span style="color:orange">response</span>){
<span style="color:gray"> 17</span>                        <span style="color:aqua">alert</span>(<span style="color:Khaki">"error: "</span> <span style="color:red">+</span> response.<span style="color:aqua">error</span>.<span style="color:aqua">toString</span>());
<span style="color:gray"> 18</span>                 }
<span style="color:gray"> 19</span>        });        
</pre>
</div>
</body>
</html>
<span style="color:gray"></span>

<!-- Uso de !important en CSS
El atributo !important señala que si hay dos propiedas con diferentes valores,
aquella propiedad que tenga este atributo sera la que sea usada -->
<html>
    <head>
    <title>Titulo</title>
    <meta charset="UTF-8">
      <style>
        div {
          float: justify; 
          border: ridge;
          margin: 20px;
          color: red; /* Letra roja */
        }
        div {          
          color: blue !important; /* Letra azul */
        }
      </style>
    </head> 
  <body> 
    <div>
      <p>El fútbol femenino ha tenido un crecimiento lento en el fútbol moderno, principalmente por obstáculos sociales y culturales que no permiten el ingreso pleno de la mujer al deporte.29 El primer encuentro femenino bajo las reglas del fútbol asociación del cual se tienen registros sucedió en 1892 en Glasgow, Escocia.30 A finales de 1921 el fútbol femenino fue prohibido en Inglaterra, hecho que no le permitió expandirse al resto del mundo.</p>
    </div>  
  </body>
  </html>
</body>
</html>

<!-- Estilo en boton html -->
<html>
  <head>
    <title>Titulo</title>
    <meta charset="UTF-8">      
  </head>
<body>
  <style type="text/css">
    #boton {
      font-size:15px;
      font-weight:bold;
      color:black;
      background:gray;
      border-radius: 5px;
      box-shadow: 2px 2px 10px gray;
    }
  </style>
  <div align="center">
    <a href="#"><button id="boton" class="btn btn-success">Participar en Consultas</button></a>
  </div>    
</body>
</html>

<!-- boton hover con css -->
<!DOCtype html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="UTF-8" />
</head>
<style type="text/css">
  #boton_download {
    background-color: #00AEEF;
    height: 50px;
    width: 300px;
    border-radius: 20px;
    color: #FFFFFF;
    padding: 20px;
    /*border-color: red;*/
    display: inline-block;
  }
  #boton_download:hover {
    background-color: #FFFFFF;
    color: #00AEEF;
    border:ridge 1px;
  }
  #descargar {
    font-family: "Open Sans",sans-serif;
    font-weight: bold;
    font-size: 18px;
  }  
  #click {
    font-family: "Open Sans",sans-serif;
    font-size: 15px;
  }
</style>
<body>
  <br />
    <div id="cuerpo" align="center">
      <a href="#">
        <span id="boton_download">
          <div id="zona_texto">
            <span id="descargar">DESCARGAR</span>
            <br />
            <span id="click">click para continuar</span>
          </div>
        </span>
      </a>
    </div>
</body>
</html>

<!-- Alineacion en linea de bloques adaptables -->
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <style>
      #contenedor .bloque{
        display: inline-block; /* Es esencial para que se muestren los bloques en línea */
        height:300px;
        width: 300px;
        border:1px solid #333;
        background: #999;
        margin:5px;
      }      
    </style>
<body>
  <div id="contenedor">
  <div class="bloque">[Texto/Imágenes]</div>
  <div class="bloque">[Texto/Imágenes]</div>
  <div class="bloque">[Texto/Imágenes]</div>
  <div class="bloque">[Texto/Imágenes]</div>
  <div class="bloque">[Texto/Imágenes]</div>
</div>
</body>
</html>

<!-- Diseño adaptable en cascada -->
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <style>
      @media all and (max-width: 600px){
        div{
          display: block !important;  /* Cuando el ancho sea inferior a 600px el elemento será un bloque */
          width: 100% !important;
          max-width: 100% !important;
          margin: auto !important;
          position: static !important;
          float: none !important;
        }
      }
      .superior{
        background: #F99;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 30px;
      }
      .cuerpo{  /* Este es el delimitador para que la página no sea excesivamente grande */
        max-width: 1000px;
        margin:auto;
      }
      .cabecera{
        background: #9F9;
        margin-top: 30px;
        height: 200px;
      }
      .agenda{
        background: #99F;
        float: left;  /* flotamos el elemento a la izquierda */
        width: 35%;
        height: 600px;
      }
      .contenido{
        background: #AAA;
        width: 65%;
        margin-left: 35%;
        height: 900px;
      }
    </style>
<body>
  <div class="superior">[Menú]</div>
  <div class="cuerpo">
    <div class="cabecera">[Cabecera]</div>
    <div class="agenda">[Agenda]</div>
    <div class="contenido">[Contenido]</div>
  </div>
</body>
</html>

<!-- Campo de busqueda - buscar/search con estilo -->
<html>
<head>
<style>
#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;/*Agregar imagen de lupa por ejemplo*/    
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #000000;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 5px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    /*border: ridge 1px;*/
    }
#search input[type="text"]:focus {
    width: 200px;
    }
</style>
</head>
<body>
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Buscar..." />
</form>
</body>
</html>

<!-- Ejemplo de fichero .css -->
body, html {
    margin:0;
    padding:0;
    background:url("./Img/gris2.jpg");
}
#cabecera{
    background:url("./Img/head.png") 100%;
    width:100%;
    height: 400px;
    margin: 0px 0px 2px 0px;
    border-radius:3px;    
}
#RedesSociales{
    background:url("./Img/transparenciaa.PNG") 100%;
    position:fixed;
    width:55px;
    height:216px;
    margin:140px auto;  
    border-radius:3px;  
}
#form{
    /*width:520px;
    height:35px;        
     border:ridge 1px;  */
    /*margin: 10px 10px 10px 10px;*/
}
#menu{  
    background:url("./Img/negro.jpg") 100%; 
    width:100%;
    height: 34px;
    margin: 0px 0px 0px 0px;    
    border-radius:3px;  
}
#menu2{ 
    background:url("./Img/negro.jpg") 100%; 
    width:100%;
    height: 64px;
    margin: 0px 0px 0px 0px;
    position:fixed;
}
#completo{
    background:url("./Img/blancoo.jpg") 100%;
    width:1000px;
    height: 1080px;
    margin: 0 auto;
    border-radius:3px;
}
#cuerpo1{
    background:url("./Img/negro.jpg") 100%;
    width: 99%;
    height: 350px;
    margin: 3px 3px 3px 3px;
    overflow : auto;
    float: left;
    border-radius:3px;
    
}
#cuerpo2{
    background:url("./Img/negro.jpg") 100%;
    width: 99%;
    height: 350px;
    margin: 3px 3px 3px 3px;
    overflow : auto;
    float: left;
    border-radius:3px;
}
#cuerpo3{
    background:url("./Img/negro.jpg") 100%;
    width: 99%;
    height: 350px;
    margin: 3px 3px 3px 3px;
    overflow : auto;
    float: left;
    border-radius:3px;
}
#contenido{
    background:url("./Img/blanco.jpg") 100%;
    width: 31%;
    height: 328px;
    overflow : auto;
    margin: 10px 10px 10px 10px;
    float: left;
    border-radius:3px;    
}
#pie{   
    background:url("./Img/negro.jpg") 100%; 
    width:100%;
    height: 30px;
    margin: 5px 0px 0px 0px;    
    border-radius:3px;
    /*float: left;*/
    /* bottom: 0;
    position:fixed; */
}
#textos{    
    margin: 20px 20px 20px 20px;    
}

<!-- Página para crear tutoriales de instalación con estilos -->
<html>
    <head>
        <title>Estilo para codigo basico</title>
        <meta charset="UTF-8" />
    </head>

  <style>
    body {
      background-color: #FFFFFF;
    }
    #cuerpo {
      width: 90%;
      /*border: ridge 1px;*/
      background-color: #FFFFFF;      
      margin-top: 5px;
      padding: 10px;
      float: left;
      text-align: justify;
    }

    #code {
      background-color: black;
      width: 90%;      
      color: lime;
      /*border: ridge 1px;*/
      border-color: black;
      margin-top: 5px;
      float: left;
      padding: 10px;
      border-radius: 5px;
    }    
  </style>
<body>  
  <div id="cuerpo">
    ########## Ambiente virtual en Python ##########
  </div>
  <div id="cuerpo">
    Cuando se desarrollando software con Python, quizas se presente el problema de tener utilizar diferentes versiones de una mismo paquete en
    diferentes proyectos, ya sea el mismo Python o diferentes versiones de un Framework como Django por ejemplo, el problema a solucionar radica
    en como poder instalar las dos o mas versiones de la misma librería con el fin de poder desarrollar varios proyectos de forma simultánea.

    La solución consiste en crear virtualenvs o entornos virtuales. Un entorno virtual de Python es un espacio completamente independiente
    de otros entornos virtuales y de los paquetes instalados globalmente en el sistema. Esto significa que es posible instalar la versión
    2.7 de Python en un entorno virtual y la versión 3.0 en otro diferente o de forma global sin problema alguno.

    El porder tener diferentes entornos donde podemos instalar diferentes versiones de paquetes nos da la oportunidad de hacer un desarrollo simultaneo
    así como poder hacer pruebas si afectar a los paquetes del sistema global.
  </div>
  <div id="cuerpo">
    --- Instalación: ---
  </div>
  <div id="cuerpo">
    Para crear un ambiente virtual instale las herramientas python-virtualenv y virtualenvwrapper
  </div>
  <div id="code">
    $ aptitude install python-virtualenv virtualenvwrapper
  </div>
  <div id="cuerpo">
    Con un usuario (diferente a root) cree un ambiente virtual para su proyecto.
  </div>
  <div id="code">
    $ mkvirtualenv nombre_ambiente_virtual
  </div>  
</body>
</html>

----------

<!-- Validación de número de caracteres mínimo de un campo password con pattern de html5 -->
<!DOCTYPE html>
<html>
<body>
<p>A form with a password field that must contain 6 or more characters:</p>
<form action="/action_page.php">
  Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
  <input type="submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

----------

<!-- Validación de campos con html5 -->
<html>
<head>
    <title>Validacion de campos con html5</title>
    <meta charset="UTF-8">  
</head>
<body>
  <form>
    <Nombre: <input name="txtNombre" type="text" id="txtNombre" required oninvalid="setCustomValidity('El campo nombre es obligatorio')" oninput="setCustomValidity('')"/> <br />
    Password: <input type="password" name="txtPwd" id="txtPwd" required pattern=".{6,}" oninvalid="setCustomValidity('El password es obligatorio y debe tener como mínimo 6 caracteres')" oninput="setCustomValidity('')" /> <br />
    Edad: <input name="txtEdad" type="number" id="txtEdad" min="18" max="60" oninvalid="etCustomValidity('La edad debe ser entre 18 y 60 años.')" oninput="setCustomValidity('')" /> <br /-->
    Email: <input name="txtEmail" id="txtEmail" type="email" oninvalid="setCustomValidity('Debe ingresar un email válido')" oninput="setCustomValidity('')" /> <br />
    <input type="submit" value="Enviar"  id="btnSubmit" name="btnSubmit"/>
  </form>
</body>
</html>

---------

<!-- Validación de número de un campo password con pattern de html5 -->
<!DOCTYPE html>
<html>
<body>
<p>Un formulario con un campo de contraseña que debe contener 8 o más caracteres que son de al menos un número, y una letra mayúscula y minúscula:</p>
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

----------

<!-- Validación de un campo email con pattern de html5 -->
<!DOCTYPE html>
<html>
<body>
<p>A form with an email field that that must be in the following order: characters@characters.domain (characters followed by an @ sign, followed by more characters, and then a ".". After the "." sign, you can only write 2 to 3 letters from a to z:</p>
<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
  <input type="submit"></form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

----------

<!-- Validación de un campo search con pattern de html5, caracteres excluídos en el formulario -->
<!DOCTYPE html>
<html>
<body>
<p>A form with a search field that CANNOT contain the following characters: ' or "</p>
<form action="/action_page.php">
  Search: <input type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
  <input type="submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

----------

<!-- Validación de un campo tipo url con pattern de html5 -->
<!DOCTYPE html>
<html>
<body>
<p>A form with a URL field that must start with http:// or https:// followed by at least one character:</p>
<form action="/action_page.php">
  Homepage: <input type="url" name="website" pattern="https?://.+" title="Include http://">
  <input type="submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

----------

<!-- Mensaje de alerta con css -->
<!DOCtype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>xxxxxx</title>
  <style type="text/css">
    @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
    .isa_info, .isa_success, .isa_warning, .isa_error {
    margin: 10px 0px;
    padding:12px;
    }
    .isa_info {
        color: #00529B;
        background-color: #BDE5F8;
    }
    .isa_success {
        color: #4F8A10;
        background-color: #DFF2BF;
    }
    .isa_warning {
        color: #9F6000;
        background-color: #FEEFB3;
    }
    .isa_error {
        color: #D8000C;
        background-color: #FFBABA;
    }
    .isa_info i, .isa_success i, .isa_warning i, .isa_error i {
        margin:10px 22px;
        font-size:2em;
        vertical-align:middle;
    }
  </style> 
</head>
<body>
  <div class="isa_info">Replace this text with your own text.</div>
  <div class="isa_success">Replace this text with your own text.</div>
  <div class="isa_warning">Replace this text with your own text.</div>
  <div class="isa_error">Replace this text with your own text.</div>
</body>
</html>

<!-- Sueltos de css -->

textarea {
  background: url(images/benice.png) center center no-repeat;
  border: 1px solid #888;
  width:200px;
}

Sombra lateral
box-shadow: 10px 10px 5px #888888;

Sombra uniforme
-webkit-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.75);
box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.75);

Sombra interior leve
-webkit-box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,1);
-moz-box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,1);
box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,1);

<!-- Colores web -->
Nombre   Código hex
HTML       RGB

White       #FFFFFF
White/gray  #FAFAFA medium
White/gray  #F2F2F2 strong
Gray        #808080
Black       #000000
Gold        #FFD700
Yellow      #FFFF00
Orange      #FFA500
Red         #FF0000
DarkRed     #8B0000
Pink        #FFC0CB
Aqua / Cyan #00FFFF
Blue        #0000FF
Light Blue  #A9E2F3
DarkBlue    #00008B
Purple      #800080
Lime        #00FF00
Light Green #01DF3A
Green       #008000

opacity: 0.5; // Opacidad en la imagen o bloque, transparencia, bloque transparente

.class{
  background:rgba(0,0,0,0.5); // Color transparente en los css
}

<!-- Ejemplo / Plantilla con cuerpos y estilos definidos -->
<html>
    <head>
        <title>zxx</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
<body>
    <div id="completo">
        <div id="cabecera">
            Cabecera
        </div>
        <div id="menu">
            Menu
        </div>
        <div id="cuerpo">
            Cuerpo
        </div>              
        <div id="footer">
            Footer
        </div>      
    </div>  
</body>
</html>

<style type="text/css">
body, html {
    /*margin:0;
    padding:0;
    background:url("./Img/gris2.jpg");*/
    /*background-color: #808080;*/
    background-color: #5B0101;
    /*background:url("../imagenes/follaje.jpg") 100%;*/
}
#completo {
    height: 610px;
    width:1000px;
    background-color: #D4DECE;
    float: left;
    margin: auto;
    top: 15;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    border-radius: 5px;
    /*border:ridge 1px;
    border-color: red;*/
    /*### Sombra ###*/
    -webkit-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.75);
    box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.75);
}

#cabecera {
    /*background:url("../imagenes/banner_cabecera.jpg") 100%;*/
    background-color: #F2F2F2;
    height: 150px;
    width:98%;
    border-radius: 5px;
    border:ridge 1px;
    border-color: #808080;
    float: left;
    margin: 10 0 0 0;    
    margin-left: 10px;
    -webkit-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
    box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
}

#menu {
    /*background:url("../imagenes/chavez_bannerr.jpg") 100%;*/
    /*background-color: #F78181;*/
    background-color: #F2F2F2;
    height: 50px;
    width:98%;
    float: left;
    margin: 10 0 0 0;
    margin-left: 10px;    
    border-radius: 5px;
    border:ridge 1px;
    border-color: #808080;
    -webkit-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
    box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
}

#cuerpo {
    background-color: #F2F2F2;
    height: 300px;
    width:98%;    
    float: left;    
    /*margin-bottom: 5px;*/
    margin: 10 0 0 10;    
    overflow: auto;
    border-radius: 5px;
    border:ridge 1px;
    border-color: #808080;
    /*margin-left: 10px;*/
    -webkit-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
    box-shadow: -1px 0px 9px 5px rgba(0,0,0,0.15);
}

#footer {
    /*background:url("../imagenes/chavez_footerr.jpg") 100%;*/
    background-color: #F78181;
    /*background-color: #F2F2F2;*/
    width:98%;
    height: 50px;
    float: left;
    border:ridge 1px;
    margin: 10 0 0 5;    
    border-radius: 5px;
    border:ridge 1px;
    border-color: #808080;
    margin-left: 10px;
}
</style>

<!-- Ejemplo de sitio responsivo -->
<!DOCtype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
</style>
</head>
<body>
<div class="header">
    <h1>Cabecera</h1>
</div>
<div class="row">
    <div class="col-3 menu">
        <ul>
            <li>ffff</li>
            <li>gggg</li>
            <li>yyyy</li>
            <li>aaaa</li>
        </ul>
    </div>
    <div class="col-6">
        <h1>Cuerpo</h1>
        <p>XXXXXXXXXXXXXXXX</p>
    </div>
    <div class="col-3 right">
        <div class="aside">
            <h2>What?</h2>
            <p>Chania is a city on the island of Crete.</p>
            <h2>Where?</h2>
            <p>Crete is a Greek island in the Mediterranean Sea.</p>
            <h2>How?</h2>
            <p>You can reach Chania airport from all over Europe.</p>
        </div>
    </div>
</div>
<div class="footer">
    <p>Footer</p>
</div>
</body>
</html>

<!-- Estilos para un sitio responsive, para un tamaño determinado de pantalla, aquí se definen
el tamaño máximo de las pantallas y los estilos personalizados para cada tamaño. -->
<style type="text/css">
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    img {
        width: 100%;
    }
    .title_post_carousel {
        color: #d11e22;
        font-weight: bold;
        font-size: 10px;
    }
    .text_description {
        font-size: 10px;
    }
}
</style>

<!-- Poner una imagen/favicon a la página -->
<!DOCtype html>
<html>
    <head>    
      <title>Prueba</title> 
      <meta charset="UTF-8">        
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
      <!--link rel="icon" type="image/jpeg" href="xxx.jpeg" /--> <!-- imagen .jpeg -->
      <link rel="icon" type="image/png" href="yyy.png" /> <!-- imagen .png -->
    </head>
<body>
  <div id="cuerpo">
    XXXXXX
  </div>
</body>
</html>

<!-- Trabajando con display block, inline, inlineblock -->
<!DOCTYPE html>
<html>
  <head>
    <title>Display valores</title>
    <link rel="stylesheet" type="text/css" href="css/displayvalores.css">
  </head>
  <body>
    <p class="block">Soy un elemento con comportamiento de bloque</p>
    <p class="block">Soy un elemento con comportamiento de bloque</p>
 
    <p class="inline">Soy un elemento con comportamiento en linea</p>
    <p class="inline">Soy un elemento con comportamiento en linea</p>
 
    <p class="inlineblock">Soy un elemento con comportamiento en bloque de linea</p>
    <p class="inlineblock">Soy un elemento con comportamiento en bloque de linea</p>
  </body>
</html>
<style type="text/css">
.block { /*Si acepta width y height*/
  display: block;
  padding: 10px;
  background: blue;
  color: white;
} 
 
.inline { /* No acepta width ni height */
  display: inline;
  padding: 10px;
  margin-left: 50px;
  background: pink;
} 
.inlineblock { /*Permite width, height, tener elementos vecinos, margin y padding */
  display: inline-block;
  width: 160px;
  margin: 15px;
  padding: 15px;
  background: red;
  color: white;
}
</style>

<!-- Uso de varias clases en un mismo div -->
<html>
<head>
  <title>Ssssssss</title>
</head>
<style type="text/css">
    #aaa {
        border: 1px solid black;
    }
    .bbb {
        width: 600px;
    }
    .ccc {
        color: green;
    }
    .ddd {
        height: 500px;
    }
    /*
    .bbb.ccc.ddd {
        color: green;
        height: 500px;
        width: 600px;
    }
    */
</style>
<body>
    <div id="aaa" class="bbb ccc">
        Campo de Texto <br />
        Campo de Texto <br />
        Campo de Texto <br />
    </div>
</body>
</html>

<!-- Iframe, Permite insertar o incrustar un documento HTML dentro de un documento HTML principal -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XXXXXXXXxx</title>
<style type="text/css">
iframe {
  height: 400px;
  width: 400px;
}
</style>
</head>
<body>
  <iframe src="http://www.as.com">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>

<!-- Menu css con pestañas desplegables, lista -->
<!DOCTYPE html>
<html>
<head>
<style>
  .nav {
    /*border: 1px solid green;
    width:300px;
    height:200px;
    padding:20px;*/
  }
  ul, ol {
    list-style:none;
  }
  .nav > li {
    /*float:left;*/
  }
  .nav li a {
    background-color:#000000;
    color:#FFFFFF;
    text-decoration:none;
    display:block;
  }
  .nav li a:hover {
    /*background-color:#434343;*/
  }
  .nav li ul {
    display:none;
    /*display:block;*/
    position:absolute;
  }
  .nav li:hover > ul {
    display:block;
  }
  #botonminuta_li {
    /*background-color: #FAFAFA;
    width: 90px;
    border: solid 1px #808080;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    padding: 3px;
    text-decoration: none;*/
    font-size: 12px;
    text-decoration: none !important;
    color: #313131 !important;
    -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);
    -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);
    /*box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);*/
    text-align:center;
    border: none;
    width: 80px;
    line-height: 30px;
    background-color: #f4f5f9;
    border: 1px solid #d2cecd;
    /*padding: 0 5px;*/
    border-radius: 4px;
    cursor: pointer;
  }

  #botonminuta_li:hover {
    font-size: 12px;
    text-decoration: none !important;
    color: #3F8FBA !important;
    -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);
    -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);
    /*box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);*/
    text-align:center;
    border: none;
    width: 80px;
    line-height: 30px;
    background-color: #f4f5f9;
    border: 1px solid #d2cecd;
    /*padding: 0 5px;*/
    border-radius: 4px;
    cursor: pointer;
    -webkit-box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,0.30);
    -moz-box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,0.30);
    box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,0.30);
  }

  #botones_minuta_child {
    font-size: 12px;
    text-decoration: none !important;
    color: #313131 !important;
    -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);
    -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);
    text-align:center;
    border: none;
    width: 130px;
    line-height: 30px;
    background-color: #f4f5f9;
    border: 1px solid #d2cecd;
    /*padding: 0 5px;*/
    border-radius: 4px;
    cursor: pointer;
  }
  
  #botones_minuta_child:hover {
    font-size: 12px;
    text-decoration: none !important;
    color: #3F8FBA !important;
    -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);
    -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.135);
    text-align:center;
    border: none;
    width: 130px;
    line-height: 30px;
    background-color: #f4f5f9;
    border: 1px solid #d2cecd;
    /*padding: 0 5px;*/
    border-radius: 4px;
    cursor: pointer;
    -webkit-box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,0.30);
    -moz-box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,0.30);
    box-shadow: inset 0px 1px 28px -9px rgba(0,0,0,0.30);
  }
}
</style>
</head>
<body>
  <ul class="nav">
    <li id="botonminuta_li"><span id="boton_minuta">Minuta</span>
      <ul>
        <li id="botones_minuta_child" class="add-responsable"><span id="boton_agregar_responsable">Responsable</span></li>
        <li id="botones_minuta_child" class="add-fecha"><span id="boton_agregar_fecha">Fecha</span></li>
        <li id="botones_minuta_child" class="add-horainicio"><span id="boton_agregar_horainicio">Hora de inicio</span></li>
        <li id="botones_minuta_child" class="add-horafinal"><span id="boton_agregar_horafinal">Hora de finalización</span></li>
        <li id="botones_minuta_child" class="add-asistente"><span id="boton_agregar_asistente">Asistentes</span></li>
        <li id="botones_minuta_child" class="add-asunto"><span id="boton_agregar_asunto">Asunto</span></li>
        <li id="botones_minuta_child" class="add-punto"><span id="boton_agregar_punto">Puntos tratados</span></li>
        <li id="botones_minuta_child" class="add-acuerdo"><span id="boton_agregar_acuerdo">Acuerdos</span></li>
      </ul>
    </li>
  </ul>
</body>
</html>

<!-- Menu css desplegable -->
<html>
  <head> 
    <title>Titulo</title>
    <meta charset="UTF-8" />
  </head>
  <style type="text/css">
    #menu{padding-left:25px; margin-top:15px;}
    #menu li{list-style:none; float:left;}
    #menu li a{display:block; width:200px;
    height:20px; background:#99cccc;
    border:1px solid; padding:2px;
    text-decoration:none;
    text-align:center; color:#000;
    font-family:arial; font-size:15px;
    font-weight:bold;}
    #menu li a:hover{background:navy;
    border-color:transparent;
    color:#ffcc00;}
    #menu li ul{display:none; position:absolute;}
    #menu li ul li {display:block; float:none;
    position:relative; padding:0px;}
    #menu li:hover ul{display:block; padding-left:0px;}
    #menu li ul li a{display:block;}
  </style>
<body>
  <ul id="menu">
  <li><a href="url...">HOME</a></li>
  <li><a href="url...">THEESPECTROMANIA</a></li>
  <li><a href="url...">HTML</a>
  <ul>
  <li><a href="url...">CENTER</a></li>
  <li><a href="url...">FONT</a></li>
  </ul></li>
  <li><a href="url...">CSS</a>
  <ul>
  <li><a href="url...">GRADIENT</a></li>
  <li><a href="url...">BORDES</a></li>
  </ul></li>
</body>
</html>

<!-- Negrita desde el css -->
<style type="text/css">
span {
    font-weight: bold;
}
</style>
<span>La Sociedad del Talento - Cmdte. Hugo Chávez Frías, 10 de noviembre de 2006.</span>


<!-- Uso del acénto y la ñ -->
Acci&oacute;n <br />
A&ntilde;adir <br />
Espec&iacute;fico <br />

-----

<!-- Agregar un botón responsive a la página para subir / top -->


<!-- Antes del cierre de la etiqueta footer has de insertar este código HTML:-->
<a class="go-top" href="#">
  <!--span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span-->
  Subir
</a>

<!-- Justo antes de cerrar la etiqueta body al final del documento HTML, has de insertar este código de jQuery: -->
<script type="text/javascript">
  $(document).ready(function() {
    // Show or hide the sticky footer button
    $(window).scroll(function() {
      if ($(this).scrollTop() > 200) {
        $('.go-top').fadeIn(200);
      } else {
        $('.go-top').fadeOut(200);
      }
    });
    // Animate the scroll to top
    $('.go-top').click(function(event) {
      event.preventDefault();

      $('html, body').animate({scrollTop: 0}, 300);
    })
  });
</script>

<!-- Agregamos los estilos al botón -->
<style type="text/css">
.go-top {
    position: fixed;
    bottom: 2em;
    right: 2em;
    text-decoration: none;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 12px;
    padding: 1em;
    display: none;
}

.go-top:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
</style>

----------------

<!-- Asignar una imágen de fondo a un bloque div-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XXXXXX</title>
</head>
<body>
  <div id="containter">
    <div id="header">
        Header
    </div>
    <div id="body">
        Body
    </div>
    <div id="footer">
        Footer
    </div>
  </div>
</body>
</html>
<script type="text/javascript">
</script>
<style type="text/css">
#header {
  height: 150px;
  border: ridge 1px red;
}
#body {
  height: 150px;
  border: ridge 1px blue;
  background: url(fff.png) no-repeat center;
}
#footer {
  height: 150px;
  border: ridge 1px green;
}
</style>

------------------

<!-- Banner con fondo y texto alineado, para comunicados, requerimientos, noticia para red social, etc -->
<!doctype html>
<html lang="en">
    <head>
        <title>XXX</title>
        <meta charset="UTF-8">
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <link rel="stylesheet" href="styles.css" type="text/css"/>
    </head>
<style type="text/css">
body {
    background: url(limpia.png) no-repeat 10px 6px #fcfcfc;
    /*border: ridge 1px green;*/
    /*El tamaño de la imágen debe ser el siguiente*/
    width: 784px;
    height: 1200px;
}
.title {
    /*border: ridge 1px blue;*/
    font-size: 25px;
    /*width: 300px;
    width: 600px;*/
    padding: 30px;
    color: #CC0100;
    margin-top: 180px;
}
.body {
    /*border: ridge 1px blue;*/
    font-size: 14px;
    /*width: 300px;
    width: 600px;*/
    padding: 45px;
    /*color: #CC0100;*/
    margin-top: -45px;
}
</style>
<body>
<div class="title" align="center">
    <b>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</b>
</div>
<div class="body" align="center">
    <div align="justify">
        <p>
        xxxxxxxxxxxxx
        <br />
        <br />
        1) xxxxxxxxxxxx.<br />
        2) xxxxxx.<br />
        3) xxxxxxxxxxxxx.<br />
        <br />
        <br />
        sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        <br />
        <br />
        sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        <br />
        <br />
        1) xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br />
        2) ssssssssssssssssssssssssssssss.<br />
        <br />
        ssssssssssssssssssssssssssssssssssssssssssssssssssssss
        <br />
        <br />
        b) ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        sssssssssssssssssssssssssssssssssssssss
        <br />
        <br />
        sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        sssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        <br />
        ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        <br />
        ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        <br />
        <br />
        1. dasdadasdasdasdads.<br />
        2. dasdadasdasdasdads.<br />
        3. dasdadasdasdasdads.<br />
        4. dasdadasdasdasdads.<br />
        5. dasdadasdasdasdads.<br />
        6. dasdadasdasdasdads.<br />
        7. dasdadasdasdasdads.<br />
        8. dasdadasdasdasdads.<br />
        <br />
        <br />
        dsadadadadas
        <br />
        <br />
        dasdasdasd
        <br />
        <br />
        </p>
    </div>
</div>
</body>
</html>

----------------

<!-- Efectos hovers sobre imágenes con CSS, con opacidad en los cuadros -->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Efectos hovers sobre imágenes con CSS</title>
    <style>
      html {
        background: url(firefox-icon.png) no-repeat center center fixed;
        background-size: cover;
      }
      body 
      {
        margin:0;
      }

      .block {
        width: 6%;
        float: left;
        position: relative;
        box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.25);
        transition: all 1s ease;
      }
      .block:before {
        content: "";
        display: block;
        padding-top: 100%;
      }
      .block:hover {
        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25);
      }

    </style>
    <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
  </head>
  <body>
    <section class="blocks"></section>
    <script>
      var i = 0,
          newBlock = '<div class="block"></div>',
          $blockContainer = $(".blocks");

      for (i = 0; i < 150; i++) {
        $blockContainer.append(newBlock);
      }
    </script>
  </body>
</html>

<!-- Efectos hovers sobre imágenes con CSS -->
<!--html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Efectos hovers sobre imágenes con CSS</title>
    <style>
      html {
        background: url(firefox-icon.png) no-repeat center center fixed;
        background-size: cover;
      }
      body 
      {
        margin:0;
      }
      .block {
        width: 6.25%;
        float: left;
        position: relative;
        transition: opacity 500ms ease;
        background-color: transparent;
        transition: all 3s linear;
      }
      .block:before {
        content: "";
        display: block;
        padding-top: 100%;
      }
      .block:hover {
        background-color: rgba(255, 255, 255, 0.25);
        transition: all 100ms linear;
      }

    </style>
    <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
  </head>
  <body>
    <section class="blocks"></section>
    <script>
      var i = 0,
          newBlock = '<div class="block"></div>',
          $blockContainer = $(".blocks");

      for (i = 0; i < 150; i++) {
        $blockContainer.append(newBlock);
      }
    </script>
  </body>
</html-->

----------------

<!-- Efecto zoom en una imagen con css -->
<html>
  <head>
    <title>Efecto zoom en una imagen con css</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <meta charset="UTF-8">
  </head>
<style type="text/css">
.div-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.img {
  transform:scale(1);
  -ms-transform:scale(1);
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}        
.img:hover {
  transform:scale(1.2);
  -ms-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -webkit-transform:scale(1.2);
  -o-transform:scale(1.2);
}
</style>
<body>
<div class="container">
  <div class="div-img hidden" >
    <img class="img" src="firefox-icon.png">
    <img class="img" src="firefox-icon.png" width="50px">
  </div>
</div>
</body>
</html>

----------------

<!-- Efecto rotar en una imagen con css -->
<html>
  <head>
    <title>Efecto rotar en una imagen con css</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <meta charset="UTF-8">
  </head>
<style type="text/css">
.img {
  border: ridge 1px red;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}
.img:hover{
  transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
}
</style>
<body>
  <img class="img" src="firefox-icon.png">
  <img class="img" src="firefox-icon.png" width="50px">
</div>  
</body>
</html>

----------------

<!-- Clase container de bootstrap -->
<style type="text/css">
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
</style>
<div class="container">
</div>

----------------

<!-- Aplicando estilos a las clases que coincidan con la expresión -->
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <meta charset="UTF-8">
  </head>
<body>
<style type="text/css">
  [class^="boton-"] {
  /*[class^="boton-a"] {*/
   color: red;
  }
  [class^="boton-"]:hover {
  /*[class^="boton-a"] {*/
   color: blue;
  }
</style>
  <p>
    <button class="boton-a">Hola</button>
    <br />
    <button class="boton-aa">Hola</button>
    <br />
    <button class="boton-b">Hola</button>
    <br />
    <button class="boton-c">Hola</button>
  </p>
</body>
</html>

----------------

<!-- Estilo para imágen circular, tipo social-profile -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    .img-circular {
      width: 300px;
      height: 300px;
      border-radius: 500px;
    }
  </style>
<body>
<img class="img-circular" src="x.jpg">
</body>
</html>

----------------

<style type="text/css">
/* Limpiar los links o enlaces de toda decoracíón */
a:link {
    text-decoration: none;
  }

  a:visited {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  a:active {
    text-decoration: underline;
  }
</style>

----------------

<!-- Botón para compartir contenido por twitter -->
<a class="btn twitter-button" target="_blank" href="https://twitter.com/intent/tweet?hashtags=Myhashtag,Myhashtag2&amp;text=some text&amp;via=twitter">
<span><img src="twitter-icon.png" width="25px"></span> Compartir en Twitter
</a>

----------------

<!-- Embeber timeline de twitter -->
<a href="https://twitter.com/elcineenfotos?lang=es">
  <img src="img/twitter_icon.png" width="40px">
</a>

----------------

<!-- Link para descarga directa de un recurso -->
<a href="http://xxx.mkv" download>Download</a>

----------------

<!-- Pedir código de seguridad para enviar el formulario, como si fuera un captcha -->
<!DOCTYPE html>
<html>
  <head>
    <title>JS Captcha by Ian L. of Jafty.com</title>
  </head>
<style type="text/css">
#txtCaptchaDiv {
  background-color:#eb8516;
  color:#FFF;
  padding:8px;
  border-radius: 5px;
}
</style>
<body>
  <div align="center">
    <br />
    <form name="review" action="newpg.html" method="POST" onsubmit="return checkform(this);">
      <b>Please enter Code:</b> <span id="txtCaptchaDiv"></span>
      <input type="hidden" id="txtCaptcha" />
      <br />
      <br />
      <input type="text" name="txtInput" id="txtInput" size="15" />
      <input type="submit" value="Submit"/>
    </form>
  </div>
  <script type="text/javascript">
    /*
    |-----------------------------------------------------------
    | Functions that validate the captcha in the template.
    |-----------------------------------------------------------
    */
    function checkform(theform){
      var why = "";

      if(theform.txtInput.value == ""){
        why += " Security code should not be empty.\n";
      }
      if(theform.txtInput.value != ""){
        if(ValidCaptcha(theform.txtInput.value) == false){
          why += "Security code did not match.\n";
        }
      }
      if(why != ""){
        alert(why);
        return false;
      }
    }

    //Generates the captcha function
    var a = Math.ceil(Math.random() * 9)+ '';
    var b = Math.ceil(Math.random() * 9)+ '';
    var c = Math.ceil(Math.random() * 9)+ '';
    var d = Math.ceil(Math.random() * 9)+ '';
    var e = Math.ceil(Math.random() * 9)+ '';

    var code = a + b + c + d + e;
    document.getElementById("txtCaptcha").value = code;
    document.getElementById("txtCaptchaDiv").innerHTML = code;

    // Validate the Entered input aganist the generated security code function
    function ValidCaptcha(){
        var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
        var str2 = removeSpaces(document.getElementById('txtInput').value);
        if (str1 == str2){
        return true;
      } else {
        return false;
      }
    }

    // Remove the spaces from the entered and generated code
    function removeSpaces(string){
      return string.split(' ').join('');
    }
  </script>

</body>
</html>

----------------

<!-- Coloreando el borde de una tabla en html -->
<style type="text/css">
  table .tabla_trabajadores, th, td {
    border: 1px solid lightgray;
  }
  .tabla_trabajadores th{
    padding: 15px;
    text-align: center;
    background-color: #d9edf7;
  }
  .tabla_trabajadores td {
    padding: 15px;
  }
</style>

----------------

<!-- letter-spacing establece el espacio entre letras -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<style type="text/css">
.letter {
  letter-spacing: 3px;
}
.letter2 {
  letter-spacing: 5px;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="letter">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="letter2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

----------------

<!-- Estilos inputs como los de material desing pero sin efectos más simple que el anterior -->
<!doctype html>
<html lang="en">
  <head>
  <title>XXX</title>
  <meta charset="UTF-8">
  <script src="jquery-1.12.4.js" type="text/javascript"></script>
  <link rel="stylesheet" href="styles.css" type="text/css"/>
  </head>
<body>
<style type="text/css">
.form-control {
  border: 0 !important;
  border-bottom: 1px solid #000000 !important;
}
</style>
<div id="formulario1">
  <h1>Login</h1>
  <form action="#" method="GET"> 
    Nombre:
    <br />
    <input type="text" name="nombre" required="true" class="form-control">
    <br />
    <br />
    E-Mail:
    <br />
    <input type="email" class="form-control">
    <br />
    <br />
    Contraseña:
    <br />
    <input type="password" name="contrasena" class="form-control">
    <br />
    <br />
    <input type="submit" value="Enviar">
    <input type="reset" value="Borrar">
  </form>
</div>
</body>
</html>

----------------

<!-- Estilos inputs como los de material desing pero sin efectos -->
<!doctype html>
<html lang="en">
  <head>
  <title>XXX</title>
  <meta charset="UTF-8">
  <script src="jquery-1.12.4.js" type="text/javascript"></script>
  <link rel="stylesheet" href="styles.css" type="text/css"/>
  </head>
<body>
<style type="text/css">
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="time"], input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="number"], input[type="search"], textarea.materialize-textarea {
  background-color: transparent;
  border: none;
  border-bottom-width: medium;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  /*width: 100%;*/
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s;
}
</style>
<div id="formulario1">
  <h1>Login</h1>
  <form action="#" method="GET">
    Nombre:
    <br />
    <input type="text" name="nombre" required="true">
    <br />
    <br />
    E-Mail:
    <br />
    <input type="email">
    <br />
    <br />
    Contraseña:
    <br />
    <input type="password" name="contrasena">
    <br />
    <br />
    <input type="submit" value="Enviar">
    <input type="reset" value="Borrar">
  </form>
</div>
</body>
</html>

---------------

<!-- Lorem ipsum -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

----------------

<!-- Usando una imagen que abarque el 100% de un div section desde la hoja de estilos -->
.my-section {
  background-image: url("../img/background.png");
  /*background-repeat: no-repeat;
  background-size: 100% 100%;
  background-repeat: repeat;*/
  background-size:100% auto;
}

----------------

<!-- Toggle Switch button -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="img/bootstrap-solid.svg">
  <title>Single template</title>
  <style type="text/css">
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  .switch input {display:none;}
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  input:checked + .slider {
    background-color: #2196F3;
  }
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  .slider.round:before {
    border-radius: 50%;
  }
  </style>
</head>
<body>
  <h2>Toggle Switch</h2>
  <label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
  </label>
  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider"></span>
  </label><br><br>
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider round"></span>
  </label>
</body>
</html>

----------------

<!-- Usando z-index para poner elementos encima de otros con css -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<style type="text/css">
.azul {
  width:200px;
  height:200px;
  background:blue;
  z-index:1;
}
.rojo {
  width:200px;
  height:200px;
  background:red;
  z-index:2;
  left:100px;
  top:100px;
  position:absolute;
}
</style>
<body>
  <div class="azul"></div>
  <div class="rojo"></div>
</body>
</html>

---------------

<!-- Estilos para las columnas en html5, basados en bootstrap -->
<style type="text/css">
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.col-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
.col-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
</style>
<div class="row">
  <div class="col-6">
    <p>dasdasdda</p>
  </div>
  <div class="col-6">
    <p>dasddsa</p>
  </div>
</div>

---------------

<!-- tabindex -->

tabindex indica si su elemento puede ser enfocado, y si participa
en la navegación secuencial del teclado (usualmente con la tecla
Tab, de ahí el nombre). Acepta un entero como valor, con diferentes
resultados que dependen de dicho valor:

Un valor negativo (usualmente tabindex="-1") significa que el elemento
debe ser enfocado, pero no debe de ser accesible a través de la navegación
secuencial del teclado. Es útil para crear widgets accesibles con JavaScript.

Usando el tab navegara según el orden de tab index.

<b>Nombres</b>
<input class="form-control input-md" id="id_nombres" name="nombres" required="True" tabindex="1" type="text" />
<br>
<b>Correo electrónico</b>
<input class="form-control input-md" id="id_correo_electronico" name="correo_electronico" required="True" tabindex="2" type="text" />

---------------

Forzar al navegador a que descargue recursos estáticos cuando los tiene cacheados.

1. Introducción

Los recursos estáticos, tales como hojas de estilo, librerías javascript o imágenes
son componentes habituales en las aplicaciones web. El navegador cuando accede a
una página, se descarga estos componentes para poder presentar el contenido de
la misma. Los navegadores cuentan con una caché para este tipo de recursos estáticos
que le permite no tener que descargárselos cada vez que se accede a una página que
requiere el uso de este componente. De esta manera se consigue reducir el tráfico
entre cliente y servidor reduciendo asimismo el tiempo de carga de la página.

No obstante, esta magnífica solución puede convertirse a veces en un problema.
Supongamos que nuestra aplicación ya está en producción y, en la siguiente
versión que desplegamos cambiamos una hoja de estilos (cambiamos su contenido
no su nombre). ¿Qué sucederá cuando un usuario que ya ha accedido a una de
nuestras páginas vuelva a acceder tras los cambios en hoja de estilos? Pues
muy probablemente, que el navegador no descargará el contenido de la .css ya
que la tendrá cacheada de otras veces y, por tanto, la página no
se verá correctamente.

La solución.

Pues la solución es muy sencilla, consiste en "engañar" al navegador haciéndole
creer que la css es otra, o lo que es lo mismo, cambiando la URL de la que se
debe descargar la hoja de estilos en el .html que hace uso de la misma. No se
trata de cambiar el recurso de ubicación o de cambiarlo de nombre, simplemente
añadimos un parámetro en la URL y listo.


<link rel="stylesheet" type="text/css" href="http://www.misitio.com/css/estilos.css?version=1.1"></link>

ó

<link rel="stylesheet" type="text/css" href="http://www.misitio.com/css/estilos.css?201202241835"></link>

Como se puede apreciar en los ejemplos anteriores hemos añadido un parámetro
a la URL donde está el recurso, pero el recurso sigue siendo el mismo, estilos.css
De esta forma, el navegador no tendrá constancia de esta nueva URL por lo que
descargará el recurso.

Los parámetros de los ejemplos anteriores son pura convención. El primero es
version=1.1 lo que nos ayudará a mantener un control sobre la versión de
la css que estamos exponiendo. El segundo es 201202241835 que no es más que
la fecha en formato yyyyMMddHHmm en la que se hicieron los últimos cambios
en el recurso. Por supuesto vale cualquier otro parámetro aunque es recomendable
seguir siempre la misma convención.

En el momento en que volvamos a hacer cambios en el recurso bastará con cambiar
este parámetro al importar el recurso desde la página (ej: version=1.2 ó 201205160937)
y nos aseguraremos al 100% que el navegador del cliente descargará el recurso
la primera vez que acceda a la página una vez subidos los cambios a producción.

Fuente: https://www.adictosaltrabajo.com/2012/02/27/evitar-cache-navegador-recursos/

---------------

<!-- Botón que devuelve al usuario a la página anterior -->

<button type="button" onclick="window.history.go(-1); return false;">Volver</button>

---------------

<!-- Tabs o pestañas con html, css y javascript -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
  }
  .tab button:hover {
    background-color: #ddd;
  }
  .tab button.active {
    background-color: #ccc;
  }
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
</body>
</html>

---------------

Efecto blur o desenfoque aplicado a una imagen:

img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

---------------

Dando color a borde de una sección

border-left: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;

################################
##### Minificar CSS o HTML #####
################################

Normalmente, al codificar en CSS se lucha con dos factores clave:

-Legibilidad: Correcta indentación que facilite la legibilidad de las propiedades
y valores por separado, favoreciendo la velocidad de modificación e introducción
de cambios.

-Tamaño: Cuanto más texto tenga un archivo CSS (espacios incluídos), más grande
será el tamaño final del archivo, por lo que más tiempo tardará en descargarse.

##### Minificación #####

En archivos CSS muy grandes esto suele influir de forma considerable, por lo que
lo ideal es utilizar los llamados Minify (Minificadores) para reducir el tamaño
del archivo CSS condensando toda la información, eliminando espacios, retornos
de carro, etc... (y por consiguiente, haciéndolo menos legible). Esto es un paso
totalmente opcional, que se realiza sólo para reducir el tamaño de los archivos
CSS, por lo que no es algo que sea totalmente imprescindible, pero se considera
una buena práctica.

Existen incluso algunas herramientas que se encargan de analizar el código y
suprimir propiedades repetidas o inútiles. Veamos un ejemplo de un mismo archivo
CSS con su contenido sin minificar y minificado:

Ejemplo de código CSS legible (index.css): 114 bytes

#main {
  background-color: black;
  color: white;
  padding: 16px;
  margin:4px;
  border:2px solid blue;
}

Ejemplo de código CSS minificado (index.min.css): 86 bytes

#main{background-color:#000;color:#fff;padding:16px;margin:4px;border:2px solid #00f}

Como se puede ver, el tamaño y la legibilidad del archivo CSS se reduce
considerablemente, así que lo que se suele hacer es mantener un archivo legible
(el primero) para realizar modificaciones y trabajar con él, y luego, de forma
opcional, un archivo con la información condensada (el segundo) que será el que
se utilice finalmente en nuestro proyecto cuando esté terminado.

-----

Fuente: https://lenguajecss.com/p/css/introduccion/minificar-css

#########################################
##### Control de acceso HTTP (CORS) #####
#########################################

El Intercambio de Recursos de Origen Cruzado (CORS) es un mecanismo que utiliza
cabeceras HTTP adicionales para permitir que un user agent obtenga permiso para
acceder a recursos seleccionados desde un servidor, en un origen distinto
(dominio) al que pertenece. Un agente crea una petición HTTP de origen cruzado
cuando solicita un recurso desde un dominio distinto, un protocolo o un puerto
diferente al del documento que lo generó.

Un ejemplo de solicitud de origen cruzado: el código JavaScript frontend de una
aplicación web que es localizada en http://domain-a.com utiliza XMLHttpRequest
para cargar el recurso http://api.domain-b.com/data.json.

Por razones de seguridad, los exploradores restringen las solicitudes HTTP de
origen cruzado iniciadas dentro de un script. Por ejemplo, XMLHttpRequest y la
API Fetch siguen la política de mismo-origen. Ésto significa que una aplicación
que utilice esas APIs XMLHttpRequest sólo puede hacer solicitudes HTTP a su
propio dominio, a menos que se utilicen cabeceras CORS.

El W3C Grupo de Trabajo de Aplicaciones Web recomienda el nuevo mecanismo de
Intercambio de Recursos de Origen Cruzado (CORS, por sus siglas en inglés).
CORS da controles de acceso a dominios cruzados para servidores web y
transferencia segura de datos en dominios cruzados entre navegadores y
servidores Web. Los exploradores modernos utilizan CORS en un  contenedor API
(como XMLHttpRequest o Fetch) para ayudar a mitigar los riesgos de solicitudes
HTTP de origen cruzado.

----- ¿Qué peticiones utiliza CORS? -----

Este estándar de intercambio de origen cruzado es utilizado para habilitar
solicitudes HTTP de sitios cruzados para:

-Invocaciones de las APIs XMLHttpRequest o  Fetch en una manera de sitio
cruzado, como se discutió arriba.

-Fuentes Web (para usos de fuente en dominios cruzados @font-face dentro de CSS)
para que los servidores puedan mostrar fuentes.

-TrueType que sólo puedan ser cargadas por sitios cruzados y usadas por sitios
web que lo tengan permitido.

-Texturas WebGL.

-Imágenes dibujadas en patrones usando drawImage.

-Hojas de estilo (para acceso CSSOM).

-Scripts (para excepciones inmutadas).

----- Resumen -----

El estándar de Intercambio de Recursos de Origen Cruzado trabaja añadiendo
nuevas cabeceras HTTP que permiten a los servidores describir el conjunto de
orígenes que tienen permiso para leer la información usando un explorador web.
Adicionalmente, para métodos de solicitud HTTP que causan efectos secundarios en
datos del usuario (y en particular, para otros métodos HTTP distintos a GET, o
para la utilización de POST con algunos tipos MIME), la especificación sugiere
que los exploradores "verifiquen" la solicitud, solicitando métodos soportados
desde el servidor con un método de solicitud HTTP OPTIONS, y luego, con la
"aprobación" del servidor, enviar la verdadera solicitud con el método de
solicitud HTTP verdadero. Los servidores pueden también notificar a los clientes
cuando sus "credenciales" (incluyendo Cookies y datos de autenticación HTTP)
deben ser enviados con solicitudes.

============================================
Ejemplos de escenarios de control de accesos
============================================

Aquí, presentamos tres escenarios que ilustran cómo funciona el Intercambio de
Recursos de Origen Cruzado. Todos estos ejemplos utilizan el objeto
XMLHttpRequest, que puede ser utilizado para hacer invocaciones de sitios
cruzados en cualquier explorador soportado.

Una solicitud de sitio cruzado es aquella que cumple las siguientes condiciones:

Los únicos métodos aceptados son:

GET
HEAD
POST.

Aparte de las cabeceras establecidas automáticamente por el agente usuario
(ej. Connection, User-Agent,etc.), las únicas cabeceras que están permitidas
para establecer manualmente son:

Accept
Accept-Language
Content-Language
Content-Type

Los únicos valores permitidos de la cabecera Content-Type son:

application/x-www-form-urlencoded
multipart/form-data
text/plain

Nota: Estos son los mismos tipos de solicitud de sitios cruzados que un
contenido web ya puede emitir, y ninguna respuesta de datos es liberada a menos
que el servidor envíe la cabecera apropiada. Por lo tanto, los sitios que
prevengan solicitudes falsas de sitios cruzados no tienen nada nuevo que temer
sobre el control de acceso HTTP.

=======
Fuentes
=======

-https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS

=====================================================================
Atributo HTML de integridad de subrecursos - Integrity HTML Attribute
=====================================================================

Hoy en día, los sitios web se construyen en su mayoría con recursos diferentes
de otros orígenes. Por ejemplo, muchos sitios incluyen scripts u hojas de estilo
como jQuery o Bootstrap de Content Delivery Network (CDN). Esto induce a que los
webmasters confíen implícitamente en las fuentes externas vinculadas. Pero,
¿qué pasa si un atacante puede obligar al usuario a cargar el contenido de un
servidor controlado por el atacante en lugar del recurso genuino (por ejemplo,
mediante envenenamiento de DNS o reemplazando archivos en una CDN)? Un webmaster
consciente de la seguridad no tuvo la oportunidad de proteger su sitio web
contra tal incidente.

Este es el punto en el que la integridad de los recursos secundarios entra en
acción. La integridad de los recursos secundarios garantiza la integridad de los
recursos externos con un atributo adicional para las dos etiquetas HTML <link> y
<script>. El atributo de integridad contiene un hash criptográfico del recurso
externo que debe integrarse en el sitio. A continuación, el navegador comprueba
si el hash del recurso obtenido y el hash del atributo HTML son idénticos.

=======
Fuentes
=======

-https://blog.compass-security.com/2015/12/subresource-integrity-html-attribute/

-----

Embeber un documento PDF dentro de un HTML, para previsualizarlo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>PDF Example with iframe</h1>
    <iframe src="xxx.pdf" width="100%" height="500px">
    </iframe>
  </body>
</html>

==============================================================================
Cambiar el número de registros que se ven en la tabla de datatable por defecto
==============================================================================

En /static/datatables/js/jquery.dataTables.min.js cambiar iDisplayLength:10 por
iDisplayLength:50 por ejemplo. Esa variable sale 2 veces, el cambio debe ser en
la primera que se declara nada más.

Ejemplo del cambio: https://github.com/argenisosorio/seguimiento_siniif/commit/39da50e039460b9c985a39d0b77c6cb40a5cb9b1

==================
Link html a mailto
==================

<a href="mailto:elcorreoquequieres@correo.com">Aquí el texto que quieras</a>

==============================
¿Cómo usar preload y prefetch?
==============================

Para usarlos debes declararlos usando etiquetas link tan pronto abras el head de
u sitio. Debes usar tres atributos principalmente:

-rel defines si usar preload o prefetch
-href la ruta del recurso
-as el tipo del recurso

Así, por ejemplo quiere hacer preload de los estilos de tu sitio debes hacer:

<html>
  <head>
    <link rel="preload" href="/static/styles.css" as="styles">
    <link rel="preload" href="app.js" as="script">
    <link rel="stylesheet" href="/static/styles.css">
  </head>
  <body>
    <script src="app.js"></script>
  </body>
</html>

Esta forma de manejar los assets la usan proyecto como Next.js o Gatsby.js
consiguiendo muy buenos resultados de hasta 300ms menos de carga.

Fuente
======

-https://yeisondaza.com/optimizar-sitio-web-preload-prefech

===================
HTML <datalist> Tag
===================

Una lista de datos con opciones predefinidas (conectado a un elemento <input>):

Sirve para hacer un autocompletado sin Javascript.

<!DOCTYPE html>
<html>
<body>

<h1>The datalist element</h1>

<form action="/action_page.php" method="get">
  <label for="browser">Choose your browser from the list:</label>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>

</body>
</html>

-----

Función para expandir y contraer todos los collapse de bootstrap

<button onclick="expand()">Expandir todos</button>

<script type="text/javascript">
function expand() {
  $(".collapse").collapse('toggle');
}

Ejemplo completo:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Collapsible Methods</h2>
  <p>The toggle method toggles the collapsible content.</p>
  <p>The show method shows the collapsible content.</p>
  <p>The hide method hides the collapsible content.</p>
  <button type="button" class="btn btn-primary">Toggle</button>
  <button type="button" class="btn btn-success">Show</button>
  <button type="button" class="btn btn-warning">Hide</button> 
  <div class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
<script>
$(document).ready(function(){
  $(".btn-primary").click(function(){
    $(".collapse").collapse('toggle');
  });
  $(".btn-success").click(function(){
    $(".collapse").collapse('show');
  });
  $(".btn-warning").click(function(){
    $(".collapse").collapse('hide');
  });
});
</script>
</body>
</html>

Fuente
======

https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

================================================================
Atributo dir en HTML para dar dirección a elementos de la página
================================================================

<!DOCTYPE html>
<html dir="" lang="ar">
<head>
<meta charset="utf-8">
</head>
<body>
   <blockquote dir="rtl" lang="en" cite="Romeo and Juliet (II, ii, 1-2)">But, soft! What light through yonder window breaks? It is the east, and Juliet is the sun.</blockquote>
   <br>
   <blockquote lang="en" cite="Romeo and Juliet (II, ii, 1-2)">But, soft! What light through yonder window breaks? It is the east, and Juliet is the sun.</blockquote>
   <table dir="rtl" border="1px" cellpadding="0px" cellspacing="0px" style="width:100%">
    <thead>
      <tr>
        <th>Mes</th>
        <th>Pagos</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Suma</td>
        <td>180</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Enero</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Febrero</td>
        <td>80</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Fuente
======

https://www.w3.org/International/questions/qa-html-dir

===========================================
Poner color a placeholder en campo de texto
===========================================

<input placeholder="Type something here!">

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

===============
Gradient en css
===============

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

Otro ejemplo de un botón:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  color: #ffffff;
  background-color: blue; /* For browsers that do not support gradients */
  background-image: linear-gradient(blue, purple);
  border-radius: 5px;
  width: 400px;
  height: 50px;
}
</style>
</head>
<body>
<button id="grad1" type="button">Prepend text</button>
</body>
</html>

Cambiando dirección:

#grad {
  background-image: linear-gradient(to right, red, yellow);
}

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Ejemplo de gradient en texto
============================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
.text {
  font-size: 72px;
  background: -webkit-linear-gradient(left, #06629b, #01e496);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
<body>
  <div align="center">
    <button>
      <h1>
        <span class="text">
          Hello world!
        </span>
      </h1>
    </button>
  </div>
</body>
</html>

Usando ángulos
==============

Si desea tener más control sobre la dirección del degradado, puede definir un
ángulo, en lugar de las direcciones predefinidas (hacia abajo, hacia arriba,
hacia la derecha, hacia la izquierda, hacia abajo a la derecha, etc.).

Un valor de 0deg es equivalente a "to top".  Un valor de 90 grados es
equivalente a "a la derecha".  Un valor de 180 grados equivale a "abajo".

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Uso de múltiples colores
========================

#grad {
  background-image: linear-gradient(red, yellow, green);
}

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Usando transparencia
====================

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Fuente
======

https://www.w3schools.com/css/css3_gradients.asp

===================
Degradados Modernos
===================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Degradados Modernos</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .section {
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }

        .background-gradient-vibrant {
            background-image: linear-gradient(135deg, #ff7eb3, #ff758c, #ff6a64, #ff6053);
        }

        .background-gradient-multicolor {
            background-image: linear-gradient(to right, #ff6f91, #ff9671, #ffc75f, #f9f871);
        }

        .background-gradient-transparent {
            background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
        }

        .background-gradient-radial {
            background-image: radial-gradient(circle, #ff9a9e, #fad0c4);
        }

        .background-gradient-neon {
            background-image: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
        }

        .background-gradient-pastel {
            background-image: linear-gradient(120deg, #f6d365, #fda085);
        }

        .background-gradient-glass {
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
            backdrop-filter: blur(10px);
            color: black;
            text-shadow: none;
        }

        /* Nuevos degradados */
        .background-gradient-sunset {
            background-image: linear-gradient(120deg, #ff9a9e, #fad0c4, #fad390);
        }

        .background-gradient-ocean {
            background-image: linear-gradient(to bottom, #2e3192, #1bffff);
        }

        .background-gradient-dark-sunset {
            background-image: linear-gradient(to right, #0f2027, #203a43, #2c5364);
        }

        .background-gradient-frost {
            background-image: radial-gradient(circle, #c9d6ff, #e2e2e2);
            color: black;
            text-shadow: none;
        }

        .background-gradient-aurora {
            background-image: linear-gradient(135deg, #00c6ff, #0072ff, #7f00ff, #e100ff);
        }

        .background-gradient-earthy {
            background-image: linear-gradient(to right, #614385, #516395);
        }

        .background-gradient-fire {
            background-image: linear-gradient(90deg, #ff6a00, #ee0979);
        }

        .background-gradient-candy {
            background-image: linear-gradient(45deg, #ffafbd, #ffc3a0);
        }
    </style>
</head>
<body>
    <div class="section background-gradient-vibrant">Degradado Vibrante</div>
    <div class="section background-gradient-multicolor">Degradado Multicolor</div>
    <div class="section background-gradient-transparent">Degradado con Transparencia</div>
    <div class="section background-gradient-radial">Degradado Radial</div>
    <div class="section background-gradient-neon">Degradado Neón</div>
    <div class="section background-gradient-pastel">Degradado Pastel</div>
    <div class="section background-gradient-glass">Degradado Glassmorphism</div>
    <div class="section background-gradient-sunset">Degradado Sunset</div>
    <div class="section background-gradient-ocean">Degradado Ocean</div>
    <div class="section background-gradient-dark-sunset">Degradado Dark Sunset</div>
    <div class="section background-gradient-frost">Degradado Frost</div>
    <div class="section background-gradient-aurora">Degradado Aurora Boreal</div>
    <div class="section background-gradient-earthy">Degradado Earthy</div>
    <div class="section background-gradient-fire">Degradado Fire</div>
    <div class="section background-gradient-candy">Degradado Candy</div>
</body>
</html>

Fuente
======

ChatGPT

=========================================
Ejemplo super chulo de boton con gradient
=========================================

.btn-grad {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9  51%, #4776E6  100%)}

.btn-grad {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

Fuente
======

-https://gradientbuttons.colorion.co/

============================================
¿Qué diferencia async y defer en JavaScript?
============================================

Los elementos <script> son unos de los recursos más comunes que bloquean el
análisis y renderizado de un documento HTML. Cuando el navegador se encuentra
con este tipo de recursos, detiene el análisis del documento, descarga el
recurso, lo ejecuta y luego continua con el análisis del documento.

Una de las primeras recomendaciones para evitar este bloqueo era colocar los
elementos <script> al final del HTML, por ejemplo antes del </body> o de
</html>. De esta forma, cuando el analizador se encontraba con los scripts, casi
todo el documento ya se había analizado y renderizado. Pero era una solución
lejos de ser ideal.

Los atributos async y defer, introducidos en HTML5, ofrecen la flexibilidad
necesaria para solucionar este problema sin forzarnos a colocar los scripts en
un sitio concreto del documento, con ligeras pero importantes diferencias:

1. <script> (normal): el análisis HTML se detiene, se descarga el archivo
(si es un script externo), se ejecuta el script y después se reanuda el
análisis HTML.

2. <script async>: el script se descarga de forma asíncrona, es decir, sin
detener el análisis HTML, pero una vez descargado, si se detiene para ejecutar
el script. Tras la ejecución se reanuda el análisis HTML. Sigue existiendo un
bloqueo en el renderizado pero menor que con el comportamiento normal. No se
garantiza la ejecución de los scripts asíncronos en el mismo orden en el
aparecen en el documento.

3. <script defer>: el script se descarga de forma asíncrona, en paralelo con el
análisis HTML, y además su ejecución es diferida hasta que termine el análisis
HTML. No hay bloqueo en el renderizado HTML. La ejecución de todos los scripts
diferidos se realiza en el mismo orden en el que aparecen en el documento.

Nota: async y defer son atributos válidos solo para elementos <script> con un
src establecido, es decir, para scripts externos o con data URIs. En el caso de
scripts inline no tienen efecto y son analizados y ejecutados al llegar a ellos.

¿Cuándo utilizar cada uno?
==========================

defer parece la mejor opción de forma general. Salvo que el script manipule o
interaccione con el DOM antes de DOMContentLoaded ($( document ).ready en
jQuery). También sería la mejor opción si el script tiene dependencias con otros
scripts y es importante el orden en el que se ejecuta cada uno.

async sería ideal para scripts que manipulan o interaccionan con el DOM antes de
DOMContentLoaded y/o que no tienen dependencias con otros scripts.

Seguir utilizando JS en su forma predeterminada sería la última opción. Si el
script es pequeño, preferible inline, ya que el análisis HTML se detendría pero
sería una interferencia muy pequeña en comparación con la solicitud y descarga
del archivo.

=========================
Spinner carga en HTML+CSS
=========================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Spinner</title>
  <style>
    /* Creamos el diseño del spinner y lo centramos en la página */
    .spinner {
      border: 5px solid rgba(0, 0, 0, 0.3);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border-left-color: #7d47ff;
      animation: spin 1s ease infinite;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
    }
    /* Pasos de la animación con keyframes */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="spinner"></div>
</body>
</html>

Otro ejemplo, esta vez el spinner se oculta cuando se termina la carga de la
página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Spinner</title>
  <style>
    /* Creamos el diseño del spinner y lo centramos en la página*/
    .spinner {
      border: 5px solid rgba(0, 0, 0, 0.3);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border-left-color: #7d47ff;
      animation: spin 1s ease infinite;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
    }
    /* Pasos de la animación con keyframes */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="spinner" id="spinner"></div>

  <!-- Contenido de la página -->
  <h1>Contenido de la página</h1>
  <p>Este es un ejemplo de página con un spinner.</p>

  <script>
    // Función para ocultar el spinner cuando la página ha cargado completamente
    window.addEventListener('load', function() {
      console.log("Cargando...");

      var spinner = document.getElementById('spinner');

      // Ocultar el spinner de carga.
      // spinner.style.display = 'none';

      // Retraso de 5 segundos (5000 milisegundos)
      setTimeout(function() {
        spinner.style.display = 'none';
        console.log("Cargo la página!");
      }, 5000);
    });
  </script>
</body>
</html>

Ahora otro ejemplo donde el spinner oculta el contenido de la página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Spinner</title>
  <style>
    /* Creamos el diseño del spinner y lo centramos en la página */
    .spinner-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: gray; /* Fondo gris oscuro con opacidad */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999; /* Asegura que el spinner esté en la parte superior */
    }

    .spinner {
      border: 5px solid rgba(255, 255, 255, 0.7); /* Bordes blancos translúcidos */
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border-left-color: #7d47ff;
      animation: spin 1s ease infinite;
    }

    /* Pasos de la animación con keyframes */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="spinner-container" id="spinnerContainer">
    <div class="spinner"></div>
  </div>

  <!-- Contenido de la página -->
  <h1>Contenido de la página</h1>
  <p>Este es un ejemplo de página con un spinner.</p>

  <script>
    // Función para ocultar el spinner después de 5 segundos
    window.addEventListener('load', function() {
      var spinnerContainer = document.getElementById('spinnerContainer');

      // Retraso de 5 segundos (5000 milisegundos)
      setTimeout(function() {
        spinnerContainer.style.display = 'none';
      }, 5000);
    });
  </script>
</body>
</html>

Fuentes
=======

https://dev.to/dmx/spinner-facil-y-rapido-5bei
https://cybmeta.com/diferencia-async-y-defer

========================================
Imagen como spinner de carga, da vueltas
========================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Spinner</title>
  <style>
    /* Creamos el diseño del spinner y lo centramos en la página */
    .spinner-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7); /* Fondo gris oscuro con opacidad */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999; /* Asegura que el spinner esté en la parte superior */
    }

    /* Modificamos el tamaño de la imagen para que sea más grande */
    .spinner-img {
      width: 100px;
      height: 100px;
      animation: spin 1s infinite linear; /* Agregamos la animación */
    }

    /* Pasos de la animación con keyframes */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* Clase para detener la animación */
    .stop-spin {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <!-- Mostramos la imagen como spinner de carga -->
  <div class="spinner-container" id="spinnerContainer">
    <!-- Cambiamos el div con la clase "spinner" por una imagen -->
    <img src="robot.png" alt="Spinner" class="spinner-img">
  </div>

  <!-- Contenido de la página -->
  <h1>Contenido de la página</h1>
  <p>Este es un ejemplo de página con un spinner.</p>

  <script>
    // Función para ocultar el spinner después de 5 segundos
    window.addEventListener('load', function() {
      var spinnerContainer = document.getElementById('spinnerContainer');
      var spinnerImg = document.querySelector('.spinner-img');

      // Retraso de 5 segundos (5000 milisegundos)
      setTimeout(function() {
        spinnerContainer.style.display = 'none';
        spinnerImg.classList.add('stop-spin'); // Detiene la animación
      }, 5000);
    });
  </script>
</body>
</html>

========================
Insertar videos en html5
========================

La etiqueta video en HTML es una etiqueta que se utiliza para insertar videos en
una página web. Es compatible con varios formatos de video, como MP4, WebM y Ogg
y puede reproducirse en la mayoría de los navegadores web modernos, ejemplo:

<video controls src="http://www.misitio.com/media/videos/xxxx.mp4"></video>

El atributo controls que se usa en el ejemplo anterior, indica que los
controles de reproducción del video deben mostrarse en la página web, como el
botón de "play", "pause", "volume", entre otros.

Algunos otros atributos que se pueden usar con la etiqueta video son:

src: especifica la URL del archivo de video que se va a reproducir.
width: establece el ancho del video en píxeles.
height: establece la altura del video en píxeles.
poster: muestra una imagen de vista previa del video antes de que se reproduzca.
autoplay: indica que el video debe reproducirse automáticamente cuando se carga la página.
loop: indica que el video debe reproducirse en bucle infinito.
muted: indica que el audio del video debe estar desactivado de manera predeterminada.
preload: indica cómo se deben cargar los datos de video antes de la reproducción.

Es importante tener en cuenta que no todos los atributos funcionan en todos los
navegadores y que algunos navegadores pueden tener soporte limitado para ciertos
formatos de video. Por lo tanto, siempre es una buena práctica realizar pruebas
en diferentes navegadores y dispositivos para asegurarse de que el video se
reproduzca de manera adecuada.

Si por ejemplo un video no hace caso a width, se puede forzar mediante estilo
css, ejemplo:


<video
  controls
  style="max-width: 500px; width: 100%; height: auto;"
  src="http://www.misitio.com/media/videos/xxxx.mp4"
>
</video>

Fuente
======

ChatGPT

========================
Insertar audios en html5
========================

Al grano, de entrada la etiqueta <audio> parece ser casi perfecta porque de
entrada es muy sencilla de utilizar, pero como más adelante veremos, el problema
está en los formatos de archivos de audio que soporta cada navegador, sobre todo
pensando en navegadores antiguos . Esta sería la etiqueta de audio ideal en el
mundo de los unicornios y del arco iris:

<audio src="mi-archivo-de-audio.mp3"></audio>

A partir de aquí podemos añadirle diferentes atributos a la etiqueta.

Atributos de la etiqueta <audio>
================================

En la especificación de HTML5 hay alguno más, que nunca está de más echarle un
vistazo, pero estos son los atributos que hay que conocer sí o sí:

autoplay: Autoplay es un atributo booleano. Vamos, que o está o no está, no
necesita tener un valor asociado. Este atributo reproduce automáticamente el
archivo, así que damos por hecho que eres buena gente y no lo piensas usar.

<audio autoplay src="mi-archivo-de-audio.mp3"></audio>

loop: Este atributo, como su nombre indica, nos permite indicar si queremos
reproducir el archivo en bucle. Usarlo en combinación con autoplay te elevaría
a la categoría de "troll supervillano" en el mundo del desarrollo web.

<audio src="mi-archivo-de-audio.mp3" autoplay loop></audio>

preload: Preload sirve para precargar tus archivos de audio. También existe el
booleano autobuffer, que estaría genial si no fuese porque Safari hace la
precarga, exista o no el atributo autobuffer. Así que hubo que introducir
Preload, que no es booleano y tiene tres valores: media, auto y none. Si no
quieres que tus archivos de audio se precarguen, añádeles preload= "none". La
precarga está bien si tienes uno o dos archivos, pero si tienes muchos va a
ralentizar mucho la carga de tu página.

<audio src="mi-archivo-de-audio.mp3" preload="none"></audio>

controls: Controls es un atributo booleano que nos permite disponer de un panel
de control nativo de cada navegador para, obviamente, controlar la reproducción.

La cruda realidad: Uso práctico de la etiqueta <audio>
======================================================

El problema con el elemento de audio no está en la especificación, que es
bastante clara, ni en la etiqueta. Como ya comentamos antes, el problema a la
hora de insertar sonido en HTML5 radica en los formatos de audio.

Aunque el formato MP3 es omnipresente y nos resulta muy familiar, no es un
formato abierto. Debido a esto ningún programa puede descodificar y reproducir
archivos MP3 sin tener que pasar por caja.

Eso está bien para los megaempresas como Apple, Google o Microsoft, pero no es
tan fácil para las pequeñas empresas o grupos de código abierto. De ahí que nos
encontremos a Safari reproduciendo archivos MP3, mientras que Firefox hasta hace
unos pocos años no lo hacía, y aún ahora lo soporta de forma parcial porque tira
del sistema operativo (puedes encontrar toda la información sobre formatos de
audio disponibles en HTML5 y su soporte en cada navegador en esta página de la
Mozilla Developer Network).

El caso es que para maximizar la compatibilidad vamos a necesitar usar varios
formatos audio. Por ejemplo, con el códec Vorbis (o el códec Opus) se pueden
crear archivos de audio con la extensión .ogg, que no se ve afectado por ninguna
patente. Ahora bien, Firefox soporta archivos de audio Ogg, pero Safari no.

Por suerte hay una manera genial de utilizar la etiqueta audio sin tener que
elegir un sólo formato de archivo. En lugar de sólo utilizar el atributo src en
la etiqueta <audio> podemos especificar múltiples formatos de archivo de
distintas fuentes así:

<audio controls>
    <source src="mi-archivo-de-audio.ogg" type="audio/ogg">
    <source src="mi-archivo-de-audio.mp3" type="audio/mpeg">
    <source src="mi-archivo-de-audio.wav" type="audio/wav">
</audio>

Así cada navegador reproducirá el primer archivo que pueda reproducir.

En conclusión
=============

Con el lanzamiento y adopción de html se nos ha facilitado mucho la vida a la
hora de insertar archivos multimedia en nuestras páginas web pero todavía hay
chinitas en nuestro camino si queremos dar la máxima compatibilidad debido a los
distintos formatos y los obstáculos que suponen las patentes.

Fuente
======

https://www.campusmvp.es/recursos/post/como-insertar-audio-en-html5.aspx

Otra forma
==========

A veces lo anterior no funciona en dispositivos móviles porque le pica el
trasero entonces logre que un audio se reproduciera con:

1- Agregar este botón:

<button id="startAudio">Reproducir Audio</button>

2- Agregar este script al final de la página dentro de body:

<script type="text/javascript">
    let audio;
    document.getElementById("startAudio").addEventListener("click", function() {
        if (!audio) {
            audio = new Audio('assets/audio/audio.mp3');
            audio.play();
        }
    });
</script>

=========================================================================
Insertar video como fonde de un section, tipo section hero en una landing
=========================================================================

Dimensiones del video: 1920 × 1080

El video queda de fondo del todo, sin controles, muteado y en loop infinito.

<section class="zzz py-5 container-fluid">
    <!-- Video de fondo -->
    <div class="video-background">
        <video autoplay loop muted>
            <source src="assets/video/video.webm" type="video/mp4">
        </video>
    </div>

    <!-- Contenido de la sección -->
    <div class="py-lg-3">
        <div class="row text-center mt-5">
            <div class="col-2"></div>
            <div class="col-4">
                <p class="text-center text-light section-9" style="font-size: 3.5rem !important;">
                    Damos las mejores impresiones
                </p>
                <p class="text-center fs-3 text-light section-6">
                    Ahorre tiempo y dinero. Tenemos tu impresión y diseño para tu empresa.
                </p>
                <a href="sobre_nosotros.html">
                    <button type="button" class="btn btn-secondary btn-blue btn-grad mt-1">
                        Saber más
                    </button>
                </a>
            </div>
            <div class="col-4">
                <img src="assets/img/image-1.jpg" alt="image" width="80%" class="d-inline-block align-text-top img-zoom"
                      style="border-radius: 12px; box-shadow: 3px 3px 3px #395da3;">
            </div>
            <div class="col-2"></div>
        </div>
    </div>
</section>

/* Estilos del video de fondo */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Asegura que el video abarque todo el ancho */
    height: 100%; /* Asegura que el video abarque toda la altura */
    z-index: -1; /* Coloca el video detrás del contenido */
    object-fit: cover; /* Hace que el video cubra todo el espacio sin deformarse */
    overflow: hidden; /* Evita desbordamiento si el video excede el tamaño */
}

.zzz {
    position: relative; /* Asegura que el video se posicione dentro de esta sección */
    z-index: 1; /* El contenido estará encima del video */
    overflow: hidden; /* Evita desbordamiento de elementos */
    min-height: 100vh; /* Opcional: hace que la sección tenga al menos el tamaño de la ventana */
}

Fuente
======

ChatGPT

================
Atributo oninput
================

oninput es un atributo de eventos en HTML que se utiliza para asociar una
función JavaScript a un elemento de entrada (como un campo de texto) y ejecutar
esa función cada vez que el valor del elemento cambie.

Cuando se usa oninput en un campo de texto, la función asociada se ejecuta
cuando se ingresa, elimina o modifica el texto en el campo. Esto permite
capturar los cambios en tiempo real a medida que el usuario interactúa con el
campo.

Aquí tienes un ejemplo de cómo se puede utilizar el evento oninput en un campo
de texto:

<input type="text" oninput="myFunction()">

<script>
  function myFunction() {
    console.log("El valor del campo ha cambiado");
  }
</script>

En este ejemplo, cada vez que el usuario ingrese, elimine o modifique el texto
en el campo de entrada, se imprimirá un mensaje en la consola del navegador.

El evento oninput es útil para realizar acciones inmediatas basadas en los
cambios del usuario, como actualizaciones en tiempo real, validaciones o
cálculos dinámicos.

Fuente
======

ChatGPT

===============================================
Desactivar los slides del carousel de Bootstrap
===============================================

<script>
  $('.carousel').carousel({
    interval: false,
  });
</script>

===================================
Hover de una imágen por otra con js
===================================

<img
  id="my-img"
  src="static/img/banner.png"
  onmouseover="hover(this);"
  onmouseout="unhover(this);"
/>

<script>
  function unhover(element) {
    element.setAttribute('src', 'static/img/banner.png');
  }
  function hover(element) {
    element.setAttribute('src', 'static/img/banner2.png');
  }
</script>

Fuente
======

https://stackoverflow.com/questions/18032220/how-to-change-source-of-img-tag-on-hover

========================================
Reproducir sonido mp3 con click en botón
========================================

1- Asegúrate de tener un archivo de sonido (por ejemplo, click-sound.mp3) en la
carpeta de tu proyecto.

2- Crea un archivo HTML e incluye el código necesario para reproducir el sonido.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reproducir Sonido al Hacer Clic</title>
</head>
<body>
    <button id="play-sound-button">Haz clic para reproducir sonido</button>

    <audio id="click-sound" src="click-sound.mp3"></audio>

    <script>
        document.getElementById('play-sound-button').addEventListener('click', function() {
            var audio = document.getElementById('click-sound');
            audio.play();
        });
    </script>
</body>
</html>

HTML Básico: El archivo HTML contiene un botón (<button>) y un elemento <audio>
con el atributo id que apunta al archivo de sonido.

Elemento <audio>: El elemento <audio> tiene un atributo id y un atributo src que
apunta al archivo MP3. Este elemento se utilizará para reproducir el sonido.

JavaScript:
  - Selecciona el botón por su id (play-sound-button).

  -Añade un evento click al botón que, al ser activado, selecciona el elemento
  <audio> por su id (click-sound) y llama al método play() para reproducir el sonido.
  Con este código, cada vez que hagas clic en el botón, se reproducirá el
  sonido especificado. Asegúrate de que el archivo click-sound.mp3 esté en la
  misma carpeta que tu archivo HTML, o ajusta la ruta del archivo si está en una
  ubicación diferente.

Fuente
======

ChatGPT

==============================================
Reproducir sonido mp3 con hover sibre span tag
==============================================

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reproducir Sonido al Hacer Hover</title>
    <style>
        #hover-span {
            display: inline-block;
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <span id="hover-span">Pasa el mouse por aquí</span>

    <audio id="hover-sound" src="click-sound.mp3"></audio>

    <script>
        document.getElementById('hover-span').addEventListener('mouseover', function() {
            var audio = document.getElementById('hover-sound');
            audio.play();
        });
    </script>
</body>
</html>

===========================================================
CSS Grid Layouy ejemplo de creación ded columnas html y css
===========================================================

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Fuente
======

https://www.w3schools.com/CSS/tryit.asp?filename=trycss_grid

======================================
Tamaño de interlineado en html con css
======================================

p {
  font-size: 1em;
  line-height: 1.5em; /* line-height: 1.5 establece el interlineado a un 150% del tamaño de la fuente */
}

p {
  font-size: 1em;
  line-height: 1.5; /* Este valor sin unidad es el más común para establecer el interlineado */
}

p {
  font-size: 1em;
  line-height: 150%; /* Porcentaje del tamaño de la fuente para el interlineado */
}

Fuente
======

https://htmlmasters.tech/interlineado-en-css/

============================================
Drag and Drop Puzzle solo con HTML, CSS y JS
============================================

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Puzzle</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            width: 80%;
            height: 80%;
            border: 2px solid #000;
            margin-bottom: 20px;
        }
        .left, .right {
            width: 50%;
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columnas */
            grid-template-rows: repeat(4, 1fr);    /* 4 filas */
            gap: 10px;
            padding: 10px;
        }
        .left {
            border-right: 2px solid #000;
        }
        .box {
            width: 100%;
            height: 100%;
            border: 2px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
        }
        .box[data-drop="true"] {
            background-color: #f0f0f0;
        }
        .box[data-drop="false"] {
            background-color: lightgray;
        }
        .draggable {
            background-color: lightcoral;
            color: #fff;
        }
        .dragging {
            opacity: 0.5;
        }
        .reset-button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .reset-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Contenedor izquierdo con 12 cuadros para completar el puzzle -->
        <div class="left">
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
        </div>

        <!-- Contenedor derecho con 12 cuadros arrastrables -->
        <div class="right" id="right-boxes">
            <div class="box draggable" draggable="true" style="background-color: lightblue;">1</div>
            <div class="box draggable" draggable="true" style="background-color: lightgreen;">2</div>
            <div class="box draggable" draggable="true" style="background-color: lightpink;">3</div>
            <div class="box draggable" draggable="true" style="background-color: lightsalmon;">4</div>
            <div class="box draggable" draggable="true" style="background-color: lightcoral;">5</div>
            <div class="box draggable" draggable="true" style="background-color: lightseagreen;">6</div>
            <div class="box draggable" draggable="true" style="background-color: gray;">7</div>
            <div class="box draggable" draggable="true" style="background-color: lightsteelblue;">8</div>
            <div class="box draggable" draggable="true" style="background-color: cyan;">9</div>
            <div class="box draggable" draggable="true" style="background-color: green;">10</div>
            <div class="box draggable" draggable="true" style="background-color: lightgray;">11</div>
            <div class="box draggable" draggable="true" style="background-color: purple;">12</div>
        </div>
    </div>

    <!-- Botón para reiniciar el puzzle -->
    <button class="reset-button" id="resetButton">Reiniciar Puzzle</button>

    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropZones = document.querySelectorAll('.box[data-drop="true"]');
        const resetButton = document.getElementById('resetButton');
        const rightBoxesContainer = document.getElementById('right-boxes');

        // Función para manejar el arrastre
        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', (e) => {
                draggable.classList.add('dragging');
                e.dataTransfer.setData('text/plain', draggable.innerHTML);
                setTimeout(() => draggable.style.display = 'none', 0);
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
                draggable.style.display = 'block';
            });
        });

        // Permitir soltar en el área de la izquierda
        dropZones.forEach(zone => {
            zone.addEventListener('dragover', (e) => {
                e.preventDefault();
            });

            zone.addEventListener('drop', (e) => {
                e.preventDefault();
                const draggedItem = document.querySelector('.dragging');
                zone.innerHTML = draggedItem.innerHTML;
                zone.style.backgroundColor = draggedItem.style.backgroundColor;
                draggedItem.remove(); // Elimina el cuadro del área derecha
            });
        });

        // Función para reiniciar el puzzle
        resetButton.addEventListener('click', () => {
            // Limpiar las zonas de la izquierda
            dropZones.forEach(zone => {
                zone.innerHTML = '';
                zone.style.backgroundColor = '#f0f0f0';
            });

            // Restaurar los cuadros en la derecha
            rightBoxesContainer.innerHTML = `
                <div class="box draggable" draggable="true" style="background-color: lightblue;">1</div>
                <div class="box draggable" draggable="true" style="background-color: lightgreen;">2</div>
                <div class="box draggable" draggable="true" style="background-color: lightpink;">3</div>
                <div class="box draggable" draggable="true" style="background-color: lightsalmon;">4</div>
                <div class="box draggable" draggable="true" style="background-color: lightcoral;">5</div>
                <div class="box draggable" draggable="true" style="background-color: lightseagreen;">6</div>
                <div class="box draggable" draggable="true" style="background-color: gray;">7</div>
                <div class="box draggable" draggable="true" style="background-color: lightsteelblue;">8</div>
                <div class="box draggable" draggable="true" style="background-color: cyan;">9</div>
                <div class="box draggable" draggable="true" style="background-color: green;">10</div>
                <div class="box draggable" draggable="true" style="background-color: lightgray;">11</div>
                <div class="box draggable" draggable="true" style="background-color: purple;">12</div>
            `;

            // Reasignar eventos drag a los nuevos elementos
            const newDraggables = document.querySelectorAll('.draggable');
            newDraggables.forEach(draggable => {
                draggable.addEventListener('dragstart', (e) => {
                    draggable.classList.add('dragging');
                    e.dataTransfer.setData('text/plain', draggable.innerHTML);
                    setTimeout(() => draggable.style.display = 'none', 0);
                });

                draggable.addEventListener('dragend', () => {
                    draggable.classList.remove('dragging');
                    draggable.style.display = 'block';
                });
            });
        });
    </script>
</body>
</html>

----------

Drag and Drop Puzzle solo con HTML, CSS y JS y con imágenes de 100px x 100px
para los 12 recuadros.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Puzzle</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            width: 80%;
            height: auto; /* Ajusta el tamaño según los cuadros */
            border: 2px solid #000;
            margin-bottom: 20px;
        }
        .left, .right {
            width: 50%;
            display: grid;
            grid-template-columns: repeat(3, 100px); /* 3 columnas de 100px */
            grid-template-rows: repeat(4, 100px);    /* 4 filas de 100px */
            gap: 10px;
            padding: 10px;
        }
        .left {
            border-right: 2px solid #000;
        }
        .box {
            width: 100px; /* Fijo a 100px */
            height: 100px; /* Fijo a 100px */
            border: 2px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
            position: relative;
        }
        .box[data-drop="true"] {
            background-color: #f0f0f0;
        }
        .box[data-drop="false"] {
            background-color: lightgray;
        }
        .draggable {
            background-color: lightcoral;
            color: #fff;
        }
        .dragging {
            opacity: 0.5;
        }
        .reset-button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .reset-button:hover {
            background-color: #0056b3;
        }
        .box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Contenedor izquierdo con 12 cuadros para completar el puzzle -->
        <div class="left">
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
            <div class="box" data-drop="true"></div>
        </div>

        <!-- Contenedor derecho con 12 cuadros arrastrables -->
        <div class="right" id="right-boxes">
            <div class="box draggable" draggable="true">
                <img src="1.png" alt="Imagen 1">
            </div>
            <div class="box draggable" draggable="true">
                <img src="2.png" alt="Imagen 2">
            </div>
            <div class="box draggable" draggable="true">
                <img src="3.png" alt="Imagen 3">
            </div>
            <div class="box draggable" draggable="true">
                <img src="4.png" alt="Imagen 4">
            </div>
            <div class="box draggable" draggable="true">
                <img src="5.png" alt="Imagen 5">
            </div>
            <div class="box draggable" draggable="true">
                <img src="6.png" alt="Imagen 6">
            </div>
            <div class="box draggable" draggable="true">
                <img src="7.png" alt="Imagen 7">
            </div>
            <div class="box draggable" draggable="true">
                <img src="8.png" alt="Imagen 8">
            </div>
            <div class="box draggable" draggable="true">
                <img src="9.png" alt="Imagen 9">
            </div>
            <div class="box draggable" draggable="true">
                <img src="10.png" alt="Imagen 10">
            </div>
            <div class="box draggable" draggable="true">
                <img src="11.png" alt="Imagen 1">
            </div>
            <div class="box draggable" draggable="true">
                <img src="12.png" alt="Imagen 12">
            </div>
        </div>
    </div>

    <!-- Botón para reiniciar el puzzle -->
    <button class="reset-button" id="resetButton">Reiniciar Puzzle</button>

    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropZones = document.querySelectorAll('.box[data-drop="true"]');
        const resetButton = document.getElementById('resetButton');
        const rightBoxesContainer = document.getElementById('right-boxes');

        // Función para manejar el arrastre
        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', (e) => {
                draggable.classList.add('dragging');
                e.dataTransfer.setData('text/plain', draggable.innerHTML);
                setTimeout(() => draggable.style.display = 'none', 0);
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
                draggable.style.display = 'block';
            });
        });

        // Permitir soltar en el área de la izquierda
        dropZones.forEach(zone => {
            zone.addEventListener('dragover', (e) => {
                e.preventDefault();
            });

            zone.addEventListener('drop', (e) => {
                e.preventDefault();
                const draggedItem = document.querySelector('.dragging');
                zone.innerHTML = draggedItem.innerHTML;
                zone.style.backgroundColor = draggedItem.style.backgroundColor;
                if (draggedItem.querySelector('img')) {
                    const img = draggedItem.querySelector('img').cloneNode(true);
                    zone.innerHTML = ''; // Limpiar el contenido previo
                    zone.appendChild(img); // Insertar la imagen en la zona de destino
                }
                draggedItem.remove(); // Elimina el cuadro del área derecha
            });
        });

        // Función para reiniciar el puzzle
        resetButton.addEventListener('click', () => {
            // Limpiar las zonas de la izquierda
            dropZones.forEach(zone => {
                zone.innerHTML = '';
                zone.style.backgroundColor = '#f0f0f0';
            });

            // Restaurar los cuadros en la derecha
            rightBoxesContainer.innerHTML = `
                <div class="box draggable" draggable="true">
                    <img src="1.png" alt="Imagen 1">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="2.png" alt="Imagen 2">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="3.png" alt="Imagen 3">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="4.png" alt="Imagen 4">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="5.png" alt="Imagen 5">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="6.png" alt="Imagen 6">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="7.png" alt="Imagen 7">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="8.png" alt="Imagen 8">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="9.png" alt="Imagen 9">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="10.png" alt="Imagen 10">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="11.png" alt="Imagen 1">
                </div>
                <div class="box draggable" draggable="true">
                    <img src="12.png" alt="Imagen 12">
                </div>
            `;

            // Reasignar eventos drag a los nuevos elementos
            const newDraggables = document.querySelectorAll('.draggable');
            newDraggables.forEach(draggable => {
                draggable.addEventListener('dragstart', (e) => {
                    draggable.classList.add('dragging');
                    e.dataTransfer.setData('text/plain', draggable.innerHTML);
                    setTimeout(() => draggable.style.display = 'none', 0);
                });

                draggable.addEventListener('dragend', () => {
                    draggable.classList.remove('dragging');
                    draggable.style.display = 'block';
                });
            });
        });
    </script>
</body>
</html>

Fuente
======

ChatGPT

----------

Cambiar cursor por imagen PNG al hacer hover

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change mouse cursor</title>
    <style>
        p:hover {
            cursor: url("XD.png"), auto;
        }

        label:hover {
            cursor: url("XD.png");
        }
    </style>
</head>
<body>
    <p>Funciona</p>
    <br>
    <label>No funciona</label>
</body>
</html>

----------

Controlar una imagen en la pantalla con las teclas de dirección.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Controla el Robot</title>
  <style>
    body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    }

    .container {
    position: relative;
    width: 800px;
    height: 600px;
    border: 2px solid #333;
    background-color: #fff;
    }

    #robot {
    position: absolute;
    width: 100px;
    transition: transform 0.1s ease;
    }
  </style>
</head>
<body>

  <div class="container">
    <img id="robot" src="robot.png" alt="Robot">
  </div>

  <script>
    const robot = document.getElementById('robot');

    // Inicializamos las coordenadas del robot
    let x = 0;
    let y = 0;

    // Evento para capturar las teclas de flecha
    window.addEventListener('keydown', function(event) {
    const containerWidth = document.querySelector('.container').clientWidth;
    const containerHeight = document.querySelector('.container').clientHeight;
    const robotWidth = robot.clientWidth;
    const robotHeight = robot.clientHeight;

    // Detectar qué tecla se presiona
    switch (event.key) {
        case 'ArrowUp':
        if (y > 0) {
            y -= 10; // Mover hacia arriba
        }
        break;
        case 'ArrowDown':
        if (y + robotHeight < containerHeight) {
            y += 10; // Mover hacia abajo
        }
        break;
        case 'ArrowLeft':
        if (x > 0) {
            x -= 10; // Mover hacia la izquierda
        }
        break;
        case 'ArrowRight':
        if (x + robotWidth < containerWidth) {
            x += 10; // Mover hacia la derecha
        }
        break;
    }

    // Aplicar las coordenadas actualizadas al robot
    robot.style.transform = `translate(${x}px, ${y}px)`;
    });
  </script>
</body>
</html>

----------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Interactive Particles - Robotics Website</title>
  <style>
    /* Estilos para asegurar que el contenedor cubra toda la pantalla */
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #0b0e13; /* Fondo oscuro para resaltar las partículas */
    }
    .content {
      position: relative;
      z-index: 1;
      text-align: center;
      color: #fff;
      font-family: Arial, sans-serif;
      top: 50%;
      transform: translateY(-50%);
    }
    .content h1 {
      font-size: 48px;
    }
    .content p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <!-- Contenedor de partículas -->
  <div id="particles-js"></div>

  <!-- Contenido sobre las partículas -->
  <div class="content">
    <h1>Robotics Lab</h1>
    <p>Explore the world of robotics with interactive elements.</p>
  </div>

  <!-- Script de particles.js -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

  <!-- Configuración de las partículas -->
  <script>
    particlesJS('particles-js', {
      "particles": {
        "number": {
          "value": 80,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": "#ffffff"
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 0,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          }
        },
        "opacity": {
          "value": 0.5,
          "random": false,
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 3,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 0.1,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#ffffff",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 6,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "repulse"
          },
          "onclick": {
            "enable": true,
            "mode": "push"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 400,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200,
            "duration": 0.4
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true
    });
  </script>
</body>
</html>

=====================================
Justificar texto dentro de un párrafo
=====================================

<p style="text-align: justify;">
  Quickly and easily get started with Bootstrap's compiled, production-ready
  files with this barebones example featuring some basic HTML and helpful links.
  Download all our examples to get started.
</p>

===============
HTML <meta> Tag
===============

El <meta> La etiqueta define metadatos sobre un Documento HTML. Los metadatos
son datos (información) sobre datos.

<meta> las etiquetas siempre van dentro del elemento <head>, y normalmente se
utilizan para especificar el juego de caracteres, la descripción de la página,
palabras clave, autor del documento y configuración de la ventana gráfica.

Los metadatos no se mostrarán en la página, pero son analizables por máquina.

Los navegadores utilizan metadatos (cómo mostrar contenido o recargar la
página), motores de búsqueda (palabras clave) y otros servicios web.

Optimización de SEO: La meta descripción debe ser una clara y concisa de los
servicios de la empresa o lo que se haga en la página, en la etiqueta <meta
name="description" content=""> para mejorar la optimización de motores de,
búsqueda (SEO).

Ejemplo:

<meta name="description" content="En XXX Graphics ofrecemos soluciones de
impresión y diseño gráfico de alta calidad para empresas. Ahorra tiempo y dinero
con nuestros servicios de diseño personalizado, impresión en gran formato,
gráficos para vehículos y artículos promocionales. Comprometidos con
la excelencia, ayudamos a que tu marca destaque.">

Fuente
======

https://www.w3schools.com/tags/tag_meta.asp

=======================
HTML <img> alt atributo
=======================

El atributo especifica un texto alternativo para una imagen, si la imagen no se
puede mostrar.

El atributo proporciona información alternativa para una imagen si un usuario
por algún motivo no puede verla. (debido a una conexión lenta, un error en el
src atributo, o si el usuario utiliza un lector de pantalla).

Fuente
======

https://www.w3schools.com/tags/att_img_alt.asp

=====================
Buen SEO en un página
=====================

Para que una página de aterrizaje (landing page) tenga un buen SEO, debe estar
optimizada en varios aspectos clave. A continuación, te doy una lista de los
elementos más importantes y recomendaciones específicas:

1. Contenido Relevante y Optimizado

Palabras clave: Realiza una investigación de palabras clave y asegúrate de
incluirlas en los títulos, subtítulos, descripciones, y el cuerpo del contenido.

Contenido de calidad: Escribe contenido útil y relevante para tus usuarios.
Responde a sus preguntas e intenta resolver problemas específicos que puedan
tener.

Encabezados jerárquicos (H1, H2, H3): Usa encabezados de manera estructurada,
colocando palabras clave estratégicas en cada uno. Cada página debe tener un
único <h1> que represente el tema principal de la página.

Longitud adecuada del contenido: Las páginas de aterrizaje no deben ser
demasiado cortas. Trata de mantener entre 300 y 800 palabras en tu contenido
principal.

2. Optimización de Metaetiquetas

Etiqueta <title>: Asegúrate de que el título de la página incluya palabras clave
y que sea atractivo para los usuarios. Manténlo entre 50 y 60 caracteres.

Meta descripción: Esta descripción debe resumir brevemente de qué trata la
página. Es recomendable que tenga entre 150 y 160 caracteres y que incluya
palabras clave para atraer clics en los resultados de búsqueda.

Etiquetas <alt> en imágenes: Todas las imágenes deben tener un texto alternativo
descriptivo que incluya palabras clave cuando sea relevante. Esto ayuda en SEO y
en accesibilidad.

3. Velocidad de Carga

Compresión de imágenes: Usa formatos optimizados como WebP o JPEG y reduce el
tamaño de archivo sin sacrificar calidad.

Minificación de CSS y JavaScript: Reducir el tamaño de tus archivos CSS y
JavaScript acelerará la carga.

Uso de una CDN (Content Delivery Network): Una CDN distribuye los recursos de tu
página para que se carguen más rápido, especialmente en usuarios geográficamente
distantes.

4. Diseño Responsivo

Compatibilidad con móviles: Asegúrate de que la página se vea bien y funcione
correctamente en dispositivos móviles. Google prioriza el "mobile-first
indexing", así que optimizar para móviles es esencial.

Uso de viewport: Configura el viewport en el <head> para asegurar una buena
visualización en pantallas de distintos tamaños.

5. URLs Limpias y Amigables

Mantén las URLs simples, descriptivas y evita caracteres especiales o palabras
innecesarias. Ejemplo: https://tuempresa.com/servicios-de-impresion en lugar de
https://tuempresa.com/pagina123.

6. Elementos de Enlace Interno y Externo

Enlaces internos: Incluye enlaces a otras páginas relevantes de tu sitio para
mejorar la navegación y reducir la tasa de rebote.

Enlaces externos: Si es relevante, enlaza a sitios de autoridad relacionados con
tu tema. Asegúrate de que los enlaces externos abran en una nueva ventana para
no perder tráfico.

7. Experiencia de Usuario (UX)

Llamada a la Acción (CTA): Coloca botones CTA claros y visibles, que sean
atractivos y faciliten la conversión. Google valora páginas con contenido útil y
una estructura intuitiva.

Contenido por encima del "fold": Los elementos principales, como el título, la
descripción, y el CTA principal, deben ser visibles sin necesidad de desplazarse
hacia abajo en la página.

8. Implementación de Datos Estructurados

Usa datos estructurados (o schema markup) para que Google entienda mejor el
contenido. Puedes marcar secciones como "empresa", "producto" o "servicios", lo
cual puede ayudarte a aparecer en resultados enriquecidos (rich snippets).

9. Optimización de Medios y Recursos Visuales

Videos optimizados: Si tienes videos, asegúrate de que están comprimidos y que
se cargan solo cuando el usuario los ve.

Lazy Loading: Activa la carga diferida para imágenes y videos para que solo se
carguen a medida que el usuario navega por la página.

10. Configuración de Analytics y Consola de Búsqueda

Google Analytics: Implementa Analytics para realizar un seguimiento de la
actividad en tu página, conocer el comportamiento de los usuarios, y medir el
rendimiento.

Google Search Console: Usa Search Console para monitorear la visibilidad de la
página en los resultados de búsqueda y resolver problemas de rastreo o
indexación.

11. Redes Sociales y Compartibilidad

Incluye botones de redes sociales para facilitar la compartición de tu página.
Esto puede mejorar la visibilidad y el tráfico.

Con estos elementos bien integrados en tu página, mejorarás significativamente
la posibilidad de obtener un buen posicionamiento en los motores de búsqueda y
una mejor experiencia de usuario en general.

Fuente
======

ChatGPT

------

Web landing con efecto aparición con scroll en las secciones de la página

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web de Viajes - Landing Page</title>
    <style>
    /* Estilos CSS */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #f9f9f9;
    }

    header {
        background-color: #333;
        color: #fff;
        padding: 1rem;
        text-align: center;
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        font-size: 1.5rem;
    }

    .nav-links {
        list-style: none;
        display: flex;
    }

    .nav-links li {
        margin: 0 1rem;
    }

    .nav-links a {
        color: #fff;
        text-decoration: none;
    }

    .hero {
        background-color: #007BFF;
        color: #fff;
        padding: 5rem 1rem;
        text-align: center;
    }

    .hero .cta {
        background-color: #fff;
        color: #007BFF;
        border: none;
        padding: 0.5rem 1rem;
        cursor: pointer;
        font-size: 1rem;
    }

    section {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .visible {
        opacity: 1;
        transform: translateY(0);
    }

    .about, .services, .products, .reviews, .destinations, .contact {
        padding: 2rem 1rem;
        text-align: center;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .service-item, .product-item, .review-item, .destination-item {
        margin: 1rem 0;
    }

    footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 1rem 0;
    }
</style>
</head>
<body>
    <header>
        <nav>
            <div class="logo">Viaja con Nosotros</div>
            <ul class="nav-links">
                <li><a href="#about">Sobre Nosotros</a></li>
                <li><a href="#services">Servicios</a></li>
                <li><a href="#products">Productos</a></li>
                <li><a href="#reviews">Opiniones</a></li>
                <li><a href="#destinations">Destinos</a></li>
                <li><a href="#contact">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero" id="hero">
            <h1>Explora el Mundo con Nosotros</h1>
            <p>Descubre destinos increíbles y vive experiencias únicas.</p>
            <button class="cta">Reserva Ahora</button>
        </section>

        <section class="about" id="about">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Somos una agencia de viajes apasionada por crear recuerdos inolvidables. Nuestro equipo está comprometido en ofrecer experiencias únicas adaptadas a cada viajero.</p>
        </section>

        <section class="services" id="services">
            <h2 class="section-title">Servicios</h2>
            <div class="service-item">Tours Guiados</div>
            <div class="service-item">Paquetes Todo Incluido</div>
            <div class="service-item">Asistencia de Viaje 24/7</div>
        </section>

        <section class="products" id="products">
            <h2 class="section-title">Productos</h2>
            <div class="product-item">Mochilas de Viaje</div>
            <div class="product-item">Guías de Destinos</div>
            <div class="product-item">Accesorios para Aventureros</div>
        </section>

        <section class="reviews" id="reviews">
            <h2 class="section-title">Opiniones</h2>
            <div class="review-item">"Un viaje increíble, todo estuvo perfecto. ¡Lo recomiendo!" - Juan P.</div>
            <div class="review-item">"La atención fue espectacular, hicieron de nuestro viaje una experiencia inolvidable." - María G.</div>
            <div class="review-item">"Servicio excelente y destinos maravillosos. ¡Volveré a viajar con ellos!" - Carlos R.</div>
        </section>

        <section class="destinations" id="destinations">
            <h2 class="section-title">Destinos Populares</h2>
            <div class="destination-item">París, Francia</div>
            <div class="destination-item">Bali, Indonesia</div>
            <div class="destination-item">Machu Picchu, Perú</div>
        </section>

        <section class="contact" id="contact">
            <h2 class="section-title">Contacto</h2>
            <form>
                <input type="text" placeholder="Tu nombre"><br>
                <input type="email" placeholder="Tu email"><br>
                <textarea placeholder="Tu mensaje"></textarea><br>
                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Viaja con Nosotros. Todos los derechos reservados.</p>
    </footer>
    <script>
        // Script JavaScript para efecto de aparición
        const sections = document.querySelectorAll('section');

        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            }
        });
        }, { threshold: 0.1 });

        sections.forEach(section => {
        observer.observe(section);
        });

        // Evento para botón CTA
        document.querySelector('.cta').addEventListener('click', function() {
        alert('¡Gracias por tu interés! ¡Esperamos planear tu próximo viaje!');
        });
    </script>
</body>
</html>

-----

Web landing con efecto aparición con scroll en las secciones de la página

Ejemplo simplificado con colores

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Efecto aparición de secciones con scroll</title>
    <style>
    /* Estilos CSS */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    section {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .visible {
        opacity: 1;
        transform: translateY(0);
    }

    .about, .services, .products, .reviews, .destinations, .contact {
        padding: 2rem 1rem;
        text-align: center;
    }
</style>
</head>
<body>
    <main>
        <section class="about" id="about" style="background-color: red;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: blue;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: green;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: cyan;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: gray;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: orange;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: brown;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: aqua;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
    </main>
    <script>
        // Script JavaScript para efecto de aparición
        const sections = document.querySelectorAll('section');

        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            }
        });
        }, { threshold: 0.1 });

        sections.forEach(section => {
        observer.observe(section);
        });
    </script>
</body>
</html>

Fuente
======

ChatGPT

===========================
Etiquetas de HTML Semántico
===========================

¿Qué es HTML Semántico?
=======================

Es el uso de etiquetas, atributos y valores coherentes al contenido y estructura
de nuestras páginas. Se mejora la lectura de los elementos y se le agrega un
significado semántico. El uso de estas etiquetas permiten a los procesadores de
HTML usar nuestro contenido en otros contextos.

Un uso más común es con los motores de búsqueda, recolectan la estructura de los
sitios para posicionar mejor los que cumplan los estándares.

Ventajas
========

-Es importante para el SEO, los motores de búsqueda pueden encontrar la
información más relevante para poder posicionar mejor el sitio.

-Es usado para mejorar la accesibilidad web.

-Es fácil de entender sin esfuerzo desde la estructura al contenido, no me
imagino lo horrible tener que encontrar elementos entre varios div y tablas, en
la web de hace años.

Estructura
==========

Los elementos de estructura son de los más importantes para el SEO, definen como
está construida nuestra página y como acceden a la información los agentes
terceros.

Ejemplo:

<body>
  <nav><nav>
  <header></header>
  <aside></aside>
  <main>
    <article>
      <header></header>
      <section>
        <h2></h2>
        <p></p>
      </section>
      <footer></footer>
    </article>
    <section>
      <h2></h2>
      <p></p>
    </section>
  </main>
  <footer></footer>
</body>

<!-- No necesariamente tiene que seguir esta estructura -->

-----

Con la etiqueta <nav> se pueden identificar los enlaces de navegación. Puede
haber varías secciones de navegación en una página y no todos los enlaces
necesitan de ir dentro de una etiqueta <nav>.

La etiqueta <header> agrupa la introducción de la página.

<aside> es una etiqueta que designa un área en la cual hay información
suplementaria al contenido principal.

La etiqueta <main> señala al contenido principal de la página. Solo puede
existir una etiqueta de este tipo visible por página.

La etiqueta <article> se usa cuando hay contenido repetitivo e independiente,
puede tener también header footer y section.

La etiqueta <section> representa a un contenido genérico en un documento donde
no es similar a otro elemento.

El <footer> suele ser usado para añadir información extra sobre la página, el
autor, copyright, avisos legales navegación, etc.

Conclusión

La web no debe de ser hecha solo para humanos. Que las computadoras entiendan lo
que estamos plasmando es importante. Comunican el significado a las tecnologías
asistivas y hacen llegar a más personas a través del SEO.

Fuente
======

https://marcomadera.com/blog/html-semantico

=========
formspree
=========

Servicio de envío de correo desde un backend como servicio contact form o
formulario de contacto sin tener backen.

1- Registrarse en el servicio de https://formspree.io por cada cuenta se crea un 
token como x21kprln, el sitio provee de código HTML junto con el token para
asociar el formulario con la cuenta de formspree

2- Este es un ejemplo del html contact form:

<form
    action="https://formspree.io/f/x21kprln"
    method="POST"
>
    <b>Correo electrónico:</b>
    <input class="form-control" type="email" name="email">
    <br>
    <b>Nombre:</b>
    <input class="form-control" type="text" name="name">
    <br>
    <b>Teléfono:</b>
    <input class="form-control" type="text" name="phone">
    <br>
    <b>Mensaje:</b>
    <textarea class="form-control" name="message"></textarea>
    <br>
    <div class="text-center">
        <button
            type="submit"
            class="btn btn-secondary btn-blue btn-grad mt-3 "
        >
            Enviar
        </button>
    </div>
</form>

---------

Contador de número en un rango que se ve con Scroll

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contador en Scroll</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .content {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .counter {
      font-size: 3rem;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Haz scroll hacia abajo</h1>
  </div>

  <div id="counter" class="counter">0</div>

  <div class="content">
    <p>¡Has llegado al final de la página!</p>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const counterElement = document.getElementById("counter");
      let started = false;

      const startCounter = () => {
        const targetNumber = 100;
        let currentNumber = 0;
        const duration = 2000; // Duración en milisegundos
        const increment = targetNumber / (duration / 10); // Incremento por cada 10ms

        const countUp = setInterval(() => {
          currentNumber += increment;
          counterElement.innerText = Math.floor(currentNumber);
          if (currentNumber >= targetNumber) {
            clearInterval(countUp);
            counterElement.innerText = targetNumber; // Asegura que el valor final sea 100
          }
        }, 10);
      };

      // Usa Intersection Observer para empezar el contador solo cuando el usuario llega a la sección
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !started) {
            startCounter();
            started = true;
          }
        });
      });

      observer.observe(counterElement);
    });
  </script>
</body>
</html>

Fuente
======

ChatGPT

==========================
Texto con efecto de tecleo
==========================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Texto con efecto de tecleo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #282c34;
      color: #61dafb;
      margin: 0;
    }
    .typewriter {
      font-size: 2rem;
      white-space: nowrap;
      overflow: hidden;
      border-right: 2px solid #61dafb;
      animation: blink 0.7s step-end infinite;
    }

    @keyframes blink {
      50% {
        border-color: transparent;
      }
    }
  </style>
</head>
<body>
  <div class="typewriter" id="typewriter"></div>

  <script>
    const text = "¡Bienvenido a mi página!"; // El texto que quieres mostrar
    const typewriterElement = document.getElementById("typewriter");
    let index = 0;
    let deleting = false;

    function typeEffect() {
      // Mostrar o borrar caracteres
      typewriterElement.textContent = text.substring(0, index);

      if (!deleting) {
        if (index < text.length) {
          index++;
        } else {
          deleting = true;
          setTimeout(typeEffect, 1000); // Pausa antes de borrar
          return;
        }
      } else {
        if (index > 0) {
          index--;
        } else {
          deleting = false;
        }
      }

      // Cambiar la velocidad dependiendo de si escribe o borra
      const speed = deleting ? 50 : 100;
      setTimeout(typeEffect, speed);
    }

    // Iniciar el efecto
    typeEffect();
  </script>
</body>
</html>

----------

/***********************************************/
/* Media queries para dispositivos más comúnes */
/***********************************************/

/* Pantallas grandes (escritorio) */
@media (min-width: 992px) {
    div {
        border: ridge 1px yellow;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
    div {
        border: ridge 1px green;
    }
}

/* Móviles */
@media (max-width: 767px) {
    div {
        border: ridge 1px red;
    }
}

Fuente
======

ChatGPT

======================================
Agregar fuentes personalizadas con css
======================================

@font-face {
    font-family: "CustomFont";
    src: url("../../fonts/batman.ttf");
}

.batman {
    font-family: 'CustomFont', Arial, sans-serif;
    font-weight:normal;
    font-style:normal;
}

Fuente
======

https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

================
El formato .webp
================

Es un tipo de archivo de imagen desarrollado por Google. Su principal ventaja es
que permite una compresión más eficiente que otros formatos comunes como JPEG y
PNG, lo que significa que las imágenes pueden tener un tamaño más pequeño sin
perder mucha calidad. Esto es especialmente útil para la web, ya que ayuda a que
las páginas carguen más rápido.

Además, .webp admite tanto compresión con pérdida como sin pérdida, y también
puede incluir características como transparencia (como en PNG) y animaciones
(como en GIF). En resumen, es una opción moderna y versátil para manejar
imágenes en línea.

Convertir PNG a WebP: https://convertio.co/es/

Uso:

<img src="imagen.webp" alt="Descripción de la imagen en WebP" width="300">

Fuente
======

LuzIA

====================
Convertir PNG a WebP
====================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Convertir PNG a WebP</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
    input, button {
      margin: 10px;
    }
    img {
      max-width: 100%;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Convertir PNG a WebP</h1>
  <p>Selecciona una imagen PNG para convertirla a WebP:</p>
  <input type="file" id="fileInput" accept="image/png">
  <br>
  <button id="downloadBtn" style="display: none;">Descargar WebP</button>
  <img id="preview" alt="Vista previa de la imagen" style="display: none;">

  <script>
    function convertPngToWebp(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = function (event) {
          const img = new Image();
          img.onload = function () {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;

            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);

            // Convertir a WebP
            canvas.toBlob(
              (blob) => {
                if (blob) resolve(blob);
                else reject(new Error("No se pudo convertir la imagen a WebP."));
              },
              "image/webp",
              0.9 // Calidad (0.9 = 90%)
            );
          };
          img.onerror = reject;
          img.src = event.target.result;
        };

        reader.onerror = reject;
        reader.readAsDataURL(file);
      });
    }

    const fileInput = document.getElementById('fileInput');
    const downloadBtn = document.getElementById('downloadBtn');
    const preview = document.getElementById('preview');

    fileInput.addEventListener('change', async (event) => {
      const file = event.target.files[0];
      if (file && file.type === "image/png") {
        try {
          const webpBlob = await convertPngToWebp(file);

          // Mostrar vista previa de la imagen convertida
          const webpUrl = URL.createObjectURL(webpBlob);
          preview.src = webpUrl;
          preview.style.display = "block";

          // Preparar el botón de descarga
          downloadBtn.style.display = "inline-block";
          downloadBtn.onclick = () => {
            const link = document.createElement('a');
            link.href = webpUrl;
            link.download = 'imagen-convertida.webp';
            link.click();
          };
        } catch (err) {
          console.error("Error al convertir:", err);
          alert("Ocurrió un error al convertir la imagen.");
        }
      } else {
        alert("Por favor, selecciona un archivo PNG.");
      }
    });
  </script>
</body>
</html>

Fuente
======

ChatGPT

====================
Carousel de Imágenes
====================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel de Imágenes</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f3f3f3;
    }

    .carousel {
      width: 80%;
      max-width: 600px;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .carousel-images {
      display: flex;
      transition: transform 1s ease-in-out;
    }

    .carousel-images img {
      width: 100%;
      flex-shrink: 0;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div class="carousel">
    <div class="carousel-images">
      <img src="1.jpg" alt="Imagen 1">
      <img src="2.jpg" alt="Imagen 2">
      <img src="3.jpg" alt="Imagen 3">
    </div>
  </div>

  <script>
    const carouselImages = document.querySelector('.carousel-images');
    const images = document.querySelectorAll('.carousel-images img');
    const totalImages = images.length;

    let currentIndex = 0;

    function moveCarousel() {
      currentIndex = (currentIndex + 1) % totalImages;
      const offset = currentIndex * -100;
      carouselImages.style.transform = `translateX(${offset}%)`;
    }

    // Cambiar imagen cada 5 segundos
    setInterval(moveCarousel, 5000);
  </script>
</body>
</html>

Fuente
======

ChatGPT

=========================
Hover 3D Effect en imagen
=========================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hover 3D Effect</title>
  <style>
    /* Contenedor de la imagen */
    .image-container {
      perspective: 1000px; /* Para activar el efecto 3D */
    }

    /* Imagen */
    .image-container img {
      width: 300px; /* Ajusta el tamaño según sea necesario */
      transform: rotateX(70deg); /* La inclinación inicial */
      transition: transform 0.6s ease, box-shadow 0.3s ease; /* Suavizado del efecto */
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }

    /* Efecto hover */
    .image-container img:hover {
      transform: rotateX(0deg); /* Imagen de frente */
      box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.4); /* Sombra más dramática */
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="1.jpg" alt="Ejemplo de imagen">
  </div>
</body>
</html>

Fuente
======

ChatGPT

=======================
Partículas con css y js
=======================

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Partículas</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      overflow: hidden;
      height: 100vh;
      background-color: #111;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none; /* Permite interactuar con el contenido debajo del canvas */
    }
  </style>
</head>
<body>
  <canvas id="particleCanvas"></canvas>

   <script>
    const canvas = document.getElementById('particleCanvas');
    const ctx = canvas.getContext('2d');

    // Ajustar tamaño del canvas para cubrir toda la página
    function resizeCanvas() {
      canvas.width = document.documentElement.scrollWidth;
      canvas.height = document.documentElement.scrollHeight;
    }

    // Configuración de partículas
    const particles = [];
    const numParticles = 150;

    class Particle {
      constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 5 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.color = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`;
      }

      update() {
        this.x += this.speedX;
        this.y += this.speedY;

        // Rebotar en los bordes
        if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
        if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }

    function initParticles() {
      particles.length = 0; // Vaciar partículas existentes
      for (let i = 0; i < numParticles; i++) {
        particles.push(new Particle());
      }
    }

    function animateParticles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (let particle of particles) {
        particle.update();
        particle.draw();
      }

      requestAnimationFrame(animateParticles);
    }

    // Ajustar canvas y partículas al redimensionar
    window.addEventListener('resize', () => {
      resizeCanvas();
      initParticles();
    });

    // Inicialización
    resizeCanvas();
    initParticles();
    animateParticles();
  </script>
</body>
</html>

Fuente
======

ChatGPT

=====================
Partículas con Imagen
=====================

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Partículas con Imagen</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background-color: #111;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none; /* Permite interactuar con el contenido debajo del canvas */
    }
  </style>
</head>
<body>
  <canvas id="particleCanvas"></canvas>
  <div style="height: 200vh; color: white; padding: 20px;">
    <h1>Ejemplo con partículas</h1>
    <p>Este es un ejemplo con partículas utilizando una imagen PNG como partícula.</p>
    <p>Continúa desplazándote para ver cómo las partículas abarcan toda la página.</p>
  </div>

  <script>
    const canvas = document.getElementById('particleCanvas');
    const ctx = canvas.getContext('2d');

    // Ajustar tamaño del canvas para cubrir toda la página
    function resizeCanvas() {
      canvas.width = document.documentElement.scrollWidth;
      canvas.height = document.documentElement.scrollHeight;
    }

    // Cargar la imagen de la partícula
    const particleImage = new Image();
    particleImage.src = 'robot.png';  // Cambia esta URL por tu propia imagen PNG

    // Configuración de partículas
    const particles = [];
    const numParticles = 150;

    class Particle {
      constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 20 + 10; // Tamaño de la partícula (ajustado según la imagen)
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
      }

      update() {
        this.x += this.speedX;
        this.y += this.speedY;

        // Rebotar en los bordes
        if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
        if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
      }

      draw() {
        // Dibujar la imagen en lugar de un círculo
        ctx.drawImage(particleImage, this.x, this.y, this.size, this.size);
      }
    }

    function initParticles() {
      particles.length = 0; // Vaciar partículas existentes
      for (let i = 0; i < numParticles; i++) {
        particles.push(new Particle());
      }
    }

    function animateParticles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (let particle of particles) {
        particle.update();
        particle.draw();
      }

      requestAnimationFrame(animateParticles);
    }

    // Ajustar canvas y partículas al redimensionar
    window.addEventListener('resize', () => {
      resizeCanvas();
      initParticles();
    });

    // Inicialización
    resizeCanvas();
    particleImage.onload = () => { // Asegurarse de que la imagen se cargue antes de iniciar
      initParticles();
      animateParticles();
    };

  </script>
</body>
</html>

Fuente
======

ChatGPT

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animación de entrada para div</title>
  <style>
    .text {
      transform: translateY(100px);
      animation: slide-in 0.8s forwards;
    }

    @keyframes slide-in {
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="text">
    <h3>Curso de IA</h3>
    <p>Aprende inteligencia artificial aplicada a robótica.</p>
  </div>
</body>
</html>

Fuente
======

ChatGPT

=======================================
Scroll Progress Bar - Barra de progreso
=======================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Progress Bar</title>
  <style>
    /* Estilos generales */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      height: 200vh; /* Para simular una página larga */
      background: linear-gradient(to bottom, #f9f9f9, #dcdcdc);
    }

    /* Barra de progreso */
    #progressBar {
      position: fixed;
      top: 0;
      left: 0;
      height: 5px; /* Altura de la barra */
      background-color: #3498db; /* Color de la barra */
      width: 0%; /* Ancho inicial */
      z-index: 1000; /* Aparece encima de todo */
    }
  </style>
</head>
<body>
  <!-- Barra de progreso -->
  <div id="progressBar"></div>

  <!-- Contenido de ejemplo -->
  <h1 style="text-align: center; margin-top: 50px;">Barra de Progreso con Scroll</h1>
  <p style="text-align: center; padding: 0 20px;">
    Desplázate hacia abajo para ver cómo la barra de progreso crece a medida que navegas por la página. Este efecto es común en aplicaciones y páginas modernas para mejorar la experiencia del usuario.
  </p>

  <script>
    // Selecciona la barra de progreso
    const progressBar = document.getElementById('progressBar');

    // Escuchar el evento de scroll
    window.addEventListener('scroll', () => {
      // Altura total del documento
      const scrollHeight = document.documentElement.scrollHeight;

      // Altura visible de la ventana
      const clientHeight = document.documentElement.clientHeight;

      // Distancia desplazada desde la parte superior
      const scrollTop = document.documentElement.scrollTop;

      // Calcular el porcentaje de progreso
      const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;

      // Actualizar el ancho de la barra
      progressBar.style.width = `${scrollPercentage}%`;
    });
  </script>
</body>
</html>

Fuente
======

ChatGPT

=========================================
Elementos distintivos de una landing page
=========================================

1. Encabezado Claro y Atractivo (Hero Section)

Título Impactante: Directo, relevante y enfocado en el beneficio para el usuario.

Subtítulo: Explica brevemente cómo se resuelve un problema o se satisface una necesidad.

Call-to-Action (CTA) Principal: Un botón llamativo que guía al usuario hacia la
acción deseada (ejemplo: "Descargar ahora", "Regístrate gratis").

2. Imágenes y/o Videos de Alta Calidad

Representan el producto, servicio o idea central de manera profesional.

Los videos breves y dinámicos están ganando relevancia por su capacidad de mantener la atención.

3. Beneficios y Soluciones Claros

Presentados en formato de lista o secciones destacadas con iconos visuales.

Responde rápidamente a la pregunta del visitante: "¿Qué gano con esto?"

4. Prueba Social

Reseñas, testimonios, logos de clientes importantes, o estadísticas de usuarios
satisfechos.

Aumenta la confianza en la propuesta de valor.

5. Diseño Visual Moderno

Colores alineados con la identidad de la marca.

Uso efectivo del espacio en blanco para mejorar la claridad visual.

Tipografías legibles y consistentes.

7. Optimización para Móviles

Diseño responsive que funcione perfectamente en dispositivos móviles y tablets.

CTA y elementos clave accesibles fácilmente en pantallas pequeñas.

8. Carga Rápida y Optimización SEO

Una landing debe cargar en pocos segundos para evitar que los visitantes
abandonen la página.

Uso de palabras clave relevantes para facilitar el tráfico orgánico.

9- Flecha que permita subir al principio de manera suave cuando se esté en el
final de la página.

Extras
======

Imagen completa en la section 1, como patreon website

Secciones que van intercalando color, generalmente 2 para hacer el efecto piano.

Observer para las secciones, efecto de aparición de cada sección al hacer scroll.

Progress bar con scroll.

Hover effect sobre imágenes (zoom in o out, rotate).

Gradient moderno para las secciones o el footer.

Hover en los enlaces del navbar.

Hover effect sobre los botones.

Carousel de imágenes o logos patrocinantes, miembros del equipo, tecnologías
empleadas, etc.

Usar otras fuentes para resaltar título principal y otros téxtos.

Usar íconos personalizados como los de font-awesome.

Usar Open Graph Social Media Previe meta tags para previzualición en redes
sociales.

Fuente
======

ChatGPT

----------

Calculadora del Tamaño del Monitor o Pantalla en Pulgadas

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calcular Tamaño de Monitor</title>
</head>
<body>
    <h1>Calculadora del Tamaño del Monitor en Pulgadas</h1>
    <form id="monitorForm">
        <label for="widthCm">Ancho (cm):</label>
        <input type="text" id="widthCm" name="widthCm" required><br><br>
        <label for="heightCm">Alto (cm):</label>
        <input type="text" id="heightCm" name="heightCm" required><br><br>
        <button type="submit">Calcular</button>
    </form>
    <p id="result"></p>

    <script>
        document.getElementById('monitorForm').addEventListener('submit', function(event) {
            event.preventDefault();

            // Obtener los valores ingresados por el usuario y reemplazar comas por puntos
            let widthCm = document.getElementById('widthCm').value.replace(',', '.');
            let heightCm = document.getElementById('heightCm').value.replace(',', '.');

            // Convertir los valores a números de punto flotante
            widthCm = parseFloat(widthCm);
            heightCm = parseFloat(heightCm);

            // Verificar si los valores son números válidos
            if (isNaN(widthCm) || isNaN(heightCm)) {
                document.getElementById('result').textContent = "Por favor, ingrese valores numéricos válidos.";
                return;
            }

            // Convertir las dimensiones de cm a pulgadas
            const widthInches = widthCm / 2.54;
            const heightInches = heightCm / 2.54;

            // Elevar ambos valores al cuadrado
            const widthSquared = Math.pow(widthInches, 2);
            const heightSquared = Math.pow(heightInches, 2);

            // Sumar los resultados de los cuadrados
            const sumOfSquares = widthSquared + heightSquared;

            // Aplicar la raíz cuadrada a la suma de los cuadrados
            const diagonalInches = Math.sqrt(sumOfSquares);

            // Mostrar el resultado al usuario
            document.getElementById('result').textContent = `El tamaño del monitor es: ${diagonalInches.toFixed(2)} pulgadas`;
        });
    </script>
</body>
</html>