Páginas

Cómo Hacer Comentarios en HTML

Cómo Hacer Comentarios en HTML

Los comentarios en HTML son elementos que se utilizan para dejar notas o anotaciones dentro del código que no se muestran en la página web al ser renderizada por el navegador. Estos comentarios son útiles para documentar el código, explicar secciones específicas, o desactivar temporalmente partes del código sin eliminarlas.

¿Cómo se Escribe un Comentario en HTML?

Para escribir un comentario en HTML, se utiliza la siguiente sintaxis:

<!-- Este es un comentario -->

Todo el texto que se encuentra entre <!-- y --> se considera un comentario y no será visible en la página web.

Ejemplos de Uso

Ejemplo 1: Comentario Simple

En este ejemplo, se añade un comentario para explicar una sección del código HTML:

<!-- Aquí comienza la sección de la cabecera -->
<header>
  <h1>Bienvenido a mi sitio web</h1>
</header>

El comentario <!-- Aquí comienza la sección de la cabecera --> ayuda a entender la función del código que sigue.

Ejemplo 2: Desactivar Código Temporalmente

Los comentarios también se pueden usar para desactivar temporalmente una parte del código sin borrarla:

<!--
<nav>
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="about.html">Acerca de</a></li>
    <li><a href="contact.html">Contacto</a></li>
  </ul>
</nav>
-->

En este caso, el bloque de código dentro del comentario no se mostrará en la página web.

Importancia de los Comentarios en HTML

Utilizar comentarios en HTML es una buena práctica que facilita el mantenimiento y la comprensión del código. Son especialmente útiles cuando se trabaja en equipo, ya que permiten a otros desarrolladores entender rápidamente la estructura y propósito del código.

Consideraciones

  • Los comentarios no deben contener el símbolo -- dentro de ellos, ya que esto puede causar errores.
  • No es recomendable usar comentarios excesivos, ya que pueden hacer que el código sea difícil de leer.

Conclusión

Los comentarios en HTML son una herramienta fundamental para documentar, explicar y manejar el código de manera eficiente. Aprender a utilizarlos correctamente te ayudará a escribir código más claro y mantenible.

Labels:

TEXT COLOR FADE [ RECOMENDACION ]

 una pagina que recomiendo para texto degradado que también uso arto, del autor: patorjkes 

TEXT COLOR FADE, tiene una interfaz básica pero simple para poner el texto que quieras para poderlo degradar y lo convierte al lenguaje que quieras, en mi caso seria mas para HTML.


LINK: https://patorjk.com/text-color-fader/




PRUEBA:

TEXTO DE PRUEBAS!
TEXTO DE PRUEBAS!
TEXTO DE PRUEBAS!
TEXTO DE PRUEBAS! :D
Labels:

PLANTILLA ANIMACION SUAVE ASCII HTML

PLANTILLA ANIMACION SUAVE ASCII

Esto es una plantilla de animacion ascii suave puesto los caracteres son mas basicos y usa los const frames con carasteristica " ` "

CODIGO: 

<!DOCTYPE html>
<html lang="en">

<!-- PLANTILLA ANIMACION TIPO ASCII POCO FORMATO V1 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASCII Art Person Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
            color: #0f0;
            font-family: monospace;
            font-size: 16px;
        }
        .person {
            width: 600px; /* Ancho fijo del contenedor */
            white-space: pre;
            line-height: 1.2;
            text-align: center; /* Centrar horizontalmente */
        }
    </style>
</head>
<body>
    <div class="person" id="person"></div>

    <script>
        // Define tus diferentes frames usando elementos <pre>
        const frames = [
            `
⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣖⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⡟⣉⣽⣿⢿⡿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⣿⣿⣿⡗⠋⠙⡿⣷⢌⣿⣿⠀⠀⠀⠀⠀⠀⠀
⣷⣄⣀⣿⣿⣿⣿⣷⣦⣤⣾⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀
⠈⠙⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⢀⠀⠀⠀⠀
⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠻⠿⠿⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⡄
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⡾⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⣷⣶⣴⣾⠏⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠛⠋⠁⠀⠀⠀
`,
            `
⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣖⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⡟⣉⣽⣿⢿⡿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⣿⣿⣿⡗⠋⠙⡿⣷⢌⣿⣿⠀⠀⠀⠀⠀⠀⠀
⣷⣄⣀⣿⣿⣿⣿⣷⣦⣤⣾⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀
⠈⠙⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⢀⠀⠀⠀⠀
⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠻⠿⠿⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⡄
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⡾⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⣷⣶⣴⣾⠏⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠛⠋⠁⠀⠀⠀
`,
            `
⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣖⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⡟⣉⣽⣿⢿⡿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⣿⣿⣿⡗⠋⠙⡿⣷⢌⣿⣿⠀⠀⠀⠀⠀⠀⠀
⣷⣄⣀⣿⣿⣿⣿⣷⣦⣤⣾⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀
⠈⠙⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⢀⠀⠀⠀⠀
⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠻⠿⠿⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⡄
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⡾⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⣷⣶⣴⣾⠏⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠛⠋⠁⠀⠀⠀
`,
            `
⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣖⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⡟⣉⣽⣿⢿⡿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⣿⣿⣿⡗⠋⠙⡿⣷⢌⣿⣿⠀⠀⠀⠀⠀⠀⠀
⣷⣄⣀⣿⣿⣿⣿⣷⣦⣤⣾⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀
⠈⠙⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⢀⠀⠀⠀⠀
⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠻⠿⠿⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⡄
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⡾⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⣷⣶⣴⣾⠏⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠛⠋⠁⠀⠀⠀
`
        ];

        let currentFrame = 0;
        const personElement = document.getElementById('person');

        function animatePerson() {
            personElement.textContent = frames[currentFrame];
            currentFrame = (currentFrame + 1) % frames.length;
        }

        setInterval(animatePerson, 500);
    </script>
</body>
</html>

MUESTRA: https://ascii-suav.blogspot.com/

En blogger este script no serviria, talves por la forma del caracter, pero en un documento de HTML si sirve super, solo sirve con dibujos mas simples y sin tantos caracteres.

Labels:

PLANTILLA ANIMACION FUERTE ASCII HTML

PLANTILLA ANIMACION FUERTE ASCII

Lo llame asi puesto que este dibujo ASCII era de caracteres fuertes para la tipica etiqueta de const frames " ` "

asi que usa la etiqueta " pre " como frames

CODIGO: 

 
<!DOCTYPE html>
<html lang="en">

<!-- PLANTILLA ANIMACION ASCII TIPO FUERTE V1 -->
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASCII Art Animación</title>
    <style>
        body {
            background-color: black;
            color: lime;
            font-family: monospace;
            font-size: 12px;
            line-height: 1;
            white-space: pre;
            text-align: center;
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        pre {
            display: none;
        }
        pre.active {
            display: block;
        }
    </style>
</head>
<body>
<pre class="active">
                                                 .-/+ossooooooo+/:.                                         
                                           `:osydhyo++:     :yyyyydN@ho:`                                   
                                        :sho:``.       .+o``d@h./N@@@@@@@@s:                                
                                     -s@dd-           :--@s@@@@@@@@@@@@@@@@@Ny:                             
                                   /dho`.              ///N@yy::@@@@N+y@dNhd@N@@+`                          
                                 /ho`                 `@@@/-   `:::sdosNdd@@@o@@@N+                         
                               .h+                   :o@@@@@@@@/:---:::::o@@@@@@@@@@-                       
                              /h.                 `+s@@@@@@@@@@@@@@@@@@@@dy@@@@Nd@@@@o                      
                             oy`                  :@@@@@@@@@@@@@@@@@@@@@@Nyyo@@@yNdsh@s                     
                            +h:                 -od@@@@@@@@@@@@@@@@@@@@@@@@N.y@@@@@:`+@s                    
                           -@``                 y@@@@@@@@@@@@@@@@@@@@@@@@@@@N@-d@@N-``o@:                   
                           h/                   y@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@h--.```.s@                   
                          .NN@y.`                 hh@@@@@@dhhhN@@@@@@@@@@@@@@@@@@@s````-N:                  
                          /dN@@@o`                 `yyyyyy    syN@@@@@@@@@@@@@@@@h+`````so                  
                          o@@@@@@s//                            h@@@@@@@@@@@@@Nd+-``````oy                  
                          +N@@@@@@@No++                         h@@@@@@@@@@@@@d:.```````ss                  
                          .N@@@@@@@@@@@`                        /+N@@@@@@@@@@@s`````````d:                  
                           dh@@@@@@@@N/`                          @@@@@@@@@@@@/````````:@                   
                           -@o@@@@@@@@-                         yh@@@@@@@@@@@N.ydy````.d/                   
                           oy:@@@@@NNs                         ./@@@@@@@@@N-.:@N:````sy                    
                             syh@@@@d`                           o@@@@@@@Nd+``y+`````oy                     
                              +hh@@@N-                           oh@@@@Nd/`````````.ys                      
                               -hhN@@`                            oN+++:-`````````/d:                       
                                 +ddd.                            ..````````````:yo`                        
                                  `+@d:                             ``````````/yo`                          
                                     :yh/                         `````````:sy/                             
                                       `/ss+-                   ```````-+ss/`                               
                                          ./oss+:-`   `-::::///++oyyso/.                                   
                                                `-:+oooyhhhhhyso+/-`                                  
</pre>
<pre>
                                                 .-/+ooooooosoo+/:.                                         
                                           `:oy@@yo+oy@@dsshdo@NdNNNyso:`                                   
                                        :ohs/:-.  :s+````/+@@@@@N@@@Nooyhds:                                
                                     -sy+-`                 -+dN@@@@@@@@NyN@Ny:                             
                                   /y+`                        -@@@@@@@@@@N@@@@d+`                          
                                 /h/                            s@@@@@@@@@@@@@@y:h+                         
                               .h+                                +ddd@@@@@@@@@N/`/h-                       
                              /h.                                   .+hy@@@@hyyy::`.ho                      
                             oy`                                    `//h@N@@d````+.``ss                     
                            +h                                         ---y@@+`.y:``-/ys                    
                           -@`                                            `.-:d@y--``-.d:                   
                           h/                                             `````.``d/...:@                   
                          .N                                               ```.````-sd@N@:                  
                          /h                                               `````````.o@@@o                  
                          oy                                               `````````.@@@@y                  
                          +d`                                            ` `````````-@@@@s                  
                          .@`                                            ` `````````/@@@@:                  
                           d/                                            ```````````-N@@@                   
                           -@`  ..                                       ```````````.y@@/                   
                            o@.                                         ``.`````````-h@y                    
                             sN+                                        ```````````:N@y                     
                              +@h`                                     ```````````/N@s                      
                               -@h                                    ``````````.s@@:                       
                                 +h:   `+                           ```````````/hNo`                        
                                  `+y/ ::                           ````````.oddo`                          
                                     :ss:                         ````````-ody/                             
                                       `/ss+-                   ```````-+ss/`                               
                                           ./ooo+:-`       ``.`.-:/osso/.                                   
                                                `-:+oooosyyyhsso+/-`                                        
</pre>
<pre>
                                                 .-/+oooooooooo+/:.                                         
                                           `:oy@@@@dyy::--yd@dsy@@@N@yo:`                                   
                                        :sdhy+sh/..```    +d:```:osN@@N@@@s:                                
                                     -sN@@+  :.                     `oyN@@@@Ny:                             
                                   /dNho+                             `.:@@@@@@@+`                          
                                 /dd:                                  ``.s@@@@@@N+                         
                               .ho+`                                    ```-+@N@@@@@-                       
                              /@:                                        ``````o@N@@@o                      
                             od`                                          `````:/hNN:ss                     
                            +h.                                          ````````:/s@-ds                    
                           -N-                                           ` ```.````.:/hd:                   
                           h/                                             ````````````.+@                   
                          .N                                              ```.``````````d:                  
                          /@``                                            ``````````````so                  
                          od-``-                                          ``````````````oy                  
                          +d` .@++`                                       ``````````````ss                  
                          .N   /h+`                                       ``````````````d:                  
                           d/`h:s:                                        `````````````:@                   
                           -@+@d-h        ::                             `````````````.d/                   
                            oN@@N@N+`      `                             ```.`````````sy                    
                             s@@@@@@@+-                                ``````````````oy                     
                              +@@@@@@@@+                                ```````````.ys                      
                               -do.+N@@s                              ````````````/d:                       
                                 +h: :y+         /+                  ```````````:yo`                        
                                  `+y/ `.     -+-                   ``````````/yo`                          
                                     :ss:      ``                 `````````:sy/                             
                                       `/ss+-                   ```````-+ss/`                               
                                           ./osys+//.`       ``.--/osso/.                                   
                                                `-:+osssoooyssso+/-`                                        
</pre>

    <script>
        let frames = document.querySelectorAll('pre');
        let currentFrame = 0;

        function showNextFrame() {
            frames[currentFrame].classList.remove('active');
            currentFrame = (currentFrame + 1) % frames.length;
            frames[currentFrame].classList.add('active');
        }

        setInterval(showNextFrame, 500);
    </script>
</body>
</html>

MUESTRA:  https://eartham.blogspot.com/

Labels:

PLANTILLA HTML PARA DIBUJOS ASCII

PLANTILLA PARA DIBUJOS ASCII HTML

Esto sirve para dibujos simples ASII ya dibujos con caracteristicas fuertes no sabria

se usa mas detodo la etiqueta " pre " o " code " , lo uso mucho para mostrar el codigo html

CODIGO: 

 
<!DOCTYPE html>
<html lang="en">

<!-- ESTA PLANTILLA ES PARA PUBLICAR EN HTML CUALQUIER DIBUJO TIPO ASCII -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASCII Art Adaptado</title>
    <style>
        body {
            background-color: black;
            color: lime;
            font-family: monospace;
            font-size: 12px;
            line-height: 1.2;
            white-space: pre;
            text-align: center;
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
  <center>
    <pre>

      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠶⠚⠉⢉⣩⠽⠟⠛⠛⠛⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠉⠀⢀⣠⠞⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡞⠁⠀⠀⣰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⠀⠀⠀⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣠⡤⠤⠄⢤⣄⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⢰⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⠴⠒⠋⠉⠀⠀⠀⣀⣤⠴⠒⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⡄⠀⠀⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⢳⡄⢀⡴⠚⠉⠀⠀⠀⠀⠀⣠⠴⠚⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⡀⠘⣧⠀⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠹⡏⠀⠀⠀⠀⠀⣀⣴⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠳⢬⣳⣄⣠⠤⠤⠶⠶⠒⠋⠀⠀⠀⠀⠹⡀⠀⠀⠀⠀⠈⠉⠛⠲⢦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⠤⠖⠋⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠱⡀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠉⢳⠦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣠⠖⠋⠀⠀⠀⣠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢱⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⠀⢃⠈⠙⠲⣄⡀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢠⠞⠁⠀⠀⠀⢀⢾⠃⠀⠀⠀⠀⠀⠀⠀⠀⢢⠀⠀⠀⠀⠀⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⣹⠮⣄⠀⠀⠀⠙⢦⡀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣰⠋⠀⠀⢀⡤⡴⠃⠈⠦⣀⠀⠀⠀⠀⠀⠀⢀⣷⢸⠀⠀⠀⠀⢀⣀⠘⡄⠤⠤⢤⠔⠒⠂⠉⠁⠀⠀⠀⠑⢄⡀⠀⠀⠙⢦⡀⠀⠀⠀
⠀⠀⠀⠀⣼⠃⠀⠀⢠⣞⠟⠀⠀⠀⡄⠀⠉⠒⠢⣤⣤⠄⣼⢻⠸⠀⠀⠀⠀⠉⢤⠀⢿⡖⠒⠊⢦⠤⠤⣀⣀⡀⠀⠀⠀⠈⠻⡝⠲⢤⣀⠙⢦⠀⠀
⠀⠀⠀⢰⠃⠀⠀⣴⣿⠎⠀⠀⢀⣜⠤⠄⢲⠎⠉⠀⠀⡼⠸⠘⡄⡇⠀⠀⠀⠀⢸⠀⢸⠘⢆⠀⠘⡄⠀⠀⠀⢢⠉⠉⠀⠒⠒⠽⡄⠀⠈⠙⠮⣷⡀
⠀⠀⠀⡟⠀⠀⣼⢻⠧⠐⠂⠉⡜⠀⠀⡰⡟⠀⠀⠀⡰⠁⡇⠀⡇⡇⠀⠀⠀⠀⢺⠇⠀⣆⡨⢆⠀⢽⠀⠀⠀⠈⡷⡄⠀⠀⠀⠀⠹⡄⠀⠀⠀⠈⠁
⠀⠀⢸⠃⠀⠀⢃⠎⠀⠀⠀⣴⠃⠀⡜⠹⠁⠀⠀⡰⠁⢠⠁⠀⢸⢸⠀⠀⠀⢠⡸⢣⠔⡏⠀⠈⢆⠀⣗⠒⠀⠀⢸⠘⢆⠀⠀⠀⠀⢳⠀⠀⠀⠀⠀
⠀⠀⢸⠀⠀⠀⡜⠀⠀⢀⡜⡞⠀⡜⠈⠏⠀⠈⡹⠑⠒⠼⡀⠀⠀⢿⠀⠀⠀⢀⡇⠀⢇⢁⠀⠀⠈⢆⢰⠀⠀⠀⠈⡄⠈⢢⠀⠀⠀⠈⣇⠀⠀⠀⠀
⠀⠀⢸⡀⠀⢰⠁⠀⢀⢮⠀⠇⡜⠀⠘⠀⠀⢰⠃⠀⠀⡇⠈⠁⠀⢘⡄⠀⠀⢸⠀⠀⣘⣼⠤⠤⠤⣈⡞⡀⠀⠀⠀⡇⠰⡄⢣⡀⠀⠀⢻⠀⠀⠀⠀
⠀⠀⠈⡇⠀⡜⠀⢀⠎⢸⢸⢰⠁⠀⠄⠀⢠⠃⠀⠀⢸⠀⠀⠀⠀⠀⡇⠀⠀⡆⠀⠀⣶⣿⡿⠿⡛⢻⡟⡇⠀⠀⠀⡇⠀⣿⣆⢡⠀⠀⢸⡇⠀⠀⠀
⠀⠀⢠⡏⠀⠉⢢⡎⠀⡇⣿⠊⠀⠀⠀⢠⡏⠀⠀⠀⠎⠀⠀⠀⠀⠀⡇⠀⡸⠀⠀⠀⡇⠀⢰⡆⡇⢸⢠⢹⠀⠀⠀⡇⠀⢹⠈⢧⣣⠀⠘⡇⠀⠀⠀
⠀⠀⢸⡇⠀⠀⠀⡇⠀⡇⢹⠀⠀⠀⢀⡾⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⢠⠃⠀⠀⠠⠟⡯⣻⣇⢃⠇⢠⠏⡇⠀⢸⡆⠀⢸⠀⠈⢳⡀⠀⡇⠀⠀⠀
⠀⠀⠀⣇⠀⡔⠋⡇⠀⢱⢼⠀⠀⡂⣼⡇⢹⣶⣶⣶⣤⣤⣀⠀⠀⠀⣇⠇⠀⠀⠀⠀⣶⡭⢃⣏⡘⠀⡎⠀⠇⠀⡾⣷⠀⣼⠀⠀⠀⢻⡄⡇⠀⠀⠀
⠀⠀⠀⣹⠜⠋⠉⠓⢄⡏⢸⠀⠀⢳⡏⢸⠹⢀⣉⢭⣻⡽⠿⠛⠓⠀⠋⠀⠀⠀⠀⠀⠘⠛⠛⠓⠀⡄⡇⠀⢸⢰⡇⢸⡄⡟⠀⠀⠀⠀⢳⡇⠀⠀⠀
⠀⣠⠞⠁⠀⠀⠀⠀⠀⢙⠌⡇⠀⣿⠁⠀⡇⡗⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⠀⠀⠀⠀⠀⠀⠁⠁⠀⢸⣼⠀⠈⣇⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢸⠁⠀⠀⢀⡠⠔⠚⠉⠉⢱⣇⢸⢧⠀⠀⠸⣱⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⡤⠦⡔⠀⠀⠀⠀⠀⢀⡼⠀⠀⣼⡏⠀⠀⢹⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢸⠀⠀⠀⠋⠀⠀⠀⢀⡠⠤⣿⣾⣇⣧⠀⠀⢫⡆⠀⠀⠀⠀⠀⠀⠀⢨⠀⠀⣠⠇⠀⠀⢀⡠⣶⠋⠀⠀⡸⣾⠁⠀⠀⠈⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢸⡄⠀⠀⠀⠀⠠⠊⠁⠀⠀⢸⢃⠘⡜⡵⡀⠈⢿⡱⢲⡤⠤⢀⣀⣀⡀⠉⠉⣀⡠⡴⠚⠉⣸⢸⠀⠀⢠⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢧⠀⠀⠀⠀⠀⠀⠀⣀⠤⠚⠚⣤⣵⡰⡑⡄⠀⢣⡈⠳⡀⠀⠀⠀⢨⡋⠙⣆⢸⠀⠀⣰⢻⡎⠀⠀⡎⡇⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠈⢷⡀⠀⠀⠀⠀⠀⠁⠀⠀⠀⡸⢌⣳⣵⡈⢦⡀⠳⡀⠈⢦⡀⠀⠘⠏⠲⣌⠙⢒⠴⡧⣸⡇⠀⡸⢸⠇⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢠⣿⠢⡀⠀⠀⠀⠠⠄⡖⠋⠀⠀⠙⢿⣳⡀⠑⢄⠹⣄⡀⠙⢄⡠⠤⠒⠚⡖⡇⠀⠘⣽⡇⢠⠃⢸⢀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣾⠃⠀⠀⠀⠀⠀⢀⡼⣄⠀⠀⠀⠀⠀⠑⣽⣆⠀⠑⢝⡍⠒⠬⢧⣀⡠⠊⠀⠸⡀⠀⢹⡇⡎⠀⡿⢸⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡼⠁⠀⠀⠀⠀⠀⠀⢀⠻⣺⣧⠀⠀⠀⠰⢢⠈⢪⡷⡀⠀⠙⡄⠀⠀⠱⡄⠀⠀⠀⢧⠀⢸⡻⠀⢠⡇⣾⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢰⠇⠀⠀⠀⠀⠀⠀⠀⢸⠀⡏⣿⠀⠀⠀⠀⢣⢇⠀⠑⣄⠀⠀⠸⡄⠀⠀⠘⡄⠀⠀⠸⡀⢸⠁⠀⡾⢰⡏⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀     
      
    
    </pre>
  </center>
</body>
</html>

MUESTRA: https://dibujet.blogspot.com/

Labels:

VSCODE DEV [ WEB ]

vscode dev

Labels:

IDE VIRTUAL HTML

Emupedia Sandbox

Labels:

ETIQUETA para AUDIO

ETIQUETAS PARA AUDIO EN HTML

Etiqueta Basica 

<audio controls>
    <source src="ruta/del/archivo.mp3" type="audio/mpeg">
    Tu navegador no soporta el elemento de audio.
</audio>

Vamos aver algunos ejemplos: 

<audio controls>
    <source src="http://www.sonidosmp3gratis.com/sounds/tono-mensaje-3-.mp3" type="audio/mpeg">
    Tu navegador no soporta el elemento de audio.
</audio>
Labels:

Uso de la Etiqueta <hr> para Dividir Contenido en HTML

Uso de la Etiqueta <hr> para Dividir Contenido en HTML

La etiqueta <hr> en HTML se utiliza para insertar una línea horizontal que sirve para dividir contenido dentro de una página web. Esta línea puede ser útil para separar secciones o bloques de contenido, mejorando la organización visual.

Formula del código:

<hr>

Ejemplo de uso:

Contenido antes de la línea horizontal.

Contenido después de la línea horizontal.

El elemento <hr> es un elemento de auto-cierre, lo que significa que no necesita una etiqueta de cierre. Puedes usar CSS para personalizar su apariencia, como el grosor, el color y el estilo de la línea.

Ejemplo con CSS:

<style>
  hr {
    border: 1px solid #000; /* Color negro */
    margin: 20px 0; /* Espacio arriba y abajo */
  }
</style>
<hr>

Este código CSS cambiará el color de la línea horizontal a negro y añadirá un espacio arriba y abajo de la línea.

Para más información sobre el uso de <hr> y cómo personalizarlo con CSS, consulta la documentación oficial de HTML y CSS:

Documentación sobre <hr>
Labels:

ENCABEZADOS EN HTML

ENCABEZADOS EN HTML

En HTML, los encabezados se utilizan para estructurar el contenido de la página. Los encabezados van del nivel <h1> al nivel <h6>, siendo <h1> el más importante y <h6> el menos importante.

Fórmula del código:

<h1>Texto del Encabezado Nivel 1</h1>
<h2>Texto del Encabezado Nivel 2</h2>
<h3>Texto del Encabezado Nivel 3</h3>
<h4>Texto del Encabezado Nivel 4</h4>
<h5>Texto del Encabezado Nivel 5</h5>
<h6>Texto del Encabezado Nivel 6</h6>

Comencemos con pruebas:

<h1>Encabezado Nivel 1</h1>
<h2>Encabezado Nivel 2</h2>
<h3>Encabezado Nivel 3</h3>
<h4>Encabezado Nivel 4</h4>
<h5>Encabezado Nivel 5</h5>
<h6>Encabezado Nivel 6</h6>

EJEMPLO:

Encabezado Nivel 1

Encabezado Nivel 2

Encabezado Nivel 3

Encabezado Nivel 4

Encabezado Nivel 5
Encabezado Nivel 6

Estos encabezados se utilizan para organizar el contenido en diferentes niveles de importancia. Puedes aplicar estilos CSS para ajustar el tamaño y el formato según tus necesidades.

Para obtener más información sobre cómo usar HTML y CSS para diseñar tus páginas, consulta la documentación oficial o recursos educativos en línea.

Más información sobre encabezados en MDN Web Docs
Labels: ,

PALETA DE COLOR

Hexadecimal: #000000 RGB: 0, 0, 0
Labels: ,

TIPOS DE INPUTS

ETIQUETAS PARA TIPOS DE INPUT EN HTML

Usando el atributo type en la etiqueta <input> para especificar el tipo de entrada.

Formato del código:

  <input type="tipo_de_entrada" id="id_del_input" name="nombre_del_input" placeholder="texto_de_ayuda" />

Comencemos con ejemplos:

1. Campo de Texto (Text)

Permite al usuario ingresar texto de una sola línea.

  <input type="text" id="username" name="username" placeholder="Ingrese su nombre de usuario" />

EJEMPLO:

2. Campo de Contraseña (Password)

Permite al usuario ingresar una contraseña, ocultando los caracteres ingresados.

  <input type="password" id="password" name="password" placeholder="Ingrese su contraseña" />

EJEMPLO:

3. Campo de Correo Electrónico (Email)

Permite al usuario ingresar una dirección de correo electrónico con validación básica del formato.

  <input type="email" id="email" name="email" placeholder="Ingrese su correo electrónico" />

EJEMPLO:

4. Campo de Número (Number)

Permite al usuario ingresar un número. Puedes establecer valores mínimo y máximo.

  <input type="number" id="age" name="age" min="1" max="120" placeholder="Ingrese su edad" />

EJEMPLO:

5. Campo de Teléfono (Tel)

Permite al usuario ingresar un número de teléfono. La validación del formato depende del navegador.

  <input type="tel" id="phone" name="phone" placeholder="Ingrese su número de teléfono" />

EJEMPLO:

6. Campo de Fecha (Date)

Permite al usuario seleccionar una fecha desde un calendario emergente.

  <input type="date" id="birthdate" name="birthdate" />

EJEMPLO:

7. Campo de Hora (Time)

Permite al usuario seleccionar una hora.

  <input type="time" id="appointment" name="appointment" />

EJEMPLO:

8. Campo de Selección (Checkbox)

Permite al usuario seleccionar una o más opciones.

  <input type="checkbox" id="subscribe" name="subscribe" value="newsletter" />
  <label for="subscribe">Suscribirse al boletín</label>

EJEMPLO:

9. Campo de Radio

Permite al usuario seleccionar solo una opción de un grupo de opciones.

  <input type="radio" id="male" name="gender" value="male" />
  <label for="male">Masculino</label>
  <br>
  <input type="radio" id="female" name="gender" value="female" />
  <label for="female">Femenino</label>

EJEMPLO:


10. Campo de Archivo (File)

Permite al usuario seleccionar un archivo para cargar.

  <input type="file" id="profile-pic" name="profile-pic" />

EJEMPLO:

11. Campo de Color (Color)

Permite al usuario seleccionar un color usando un selector de color.

  <input type="color" id="favcolor" name="favcolor" value="#ff0000" />

EJEMPLO:

12. Campo de URL (URL)

Permite al usuario ingresar una URL con validación básica del formato.

  <input type="url" id="website" name="website" placeholder="Ingrese su sitio web" />

EJEMPLO:

13. Campo de Texto Multilínea (Textarea)

Permite al usuario ingresar texto en varias líneas. No es un <input>, pero se usa de manera similar en formularios.

  <textarea id="message" name="message" rows="4" cols="50" placeholder="Ingrese su mensaje"></textarea>

EJEMPLO:

Para una vista más completa y ejemplos adicionales, puedes visitar la documentación en línea sobre los tipos de <input> en HTML.

Labels: ,

ETIQUETA para VIDEO

ETIQUETAS PARA VIDEO EN HTML

▶︎ codigo estandar para video en HTML 

<video width="ancho" height="alto" controls>
    <source src="url_del_video.mp4" type="video/mp4">
    Tu navegador no soporta el formato de video.
</video>

Miremos unos ejemplos 

<video width="400" height="200" controls>
    <source src="https://files.catbox.moe/hv5d08.mp4" type="video/mp4">
    Tu navegador no soporta el formato de video.
</video>

EJEMPLO:

Para subir videos mas rapido use la pagina de almacenamiento catbox

> https://catbox.moe/

▶︎ VIDEOS DE YOUTUBE EN PAGINA HTML

Para subir videos de youtube a una pagina HTML es mas facil ya que el formato de youtube es de formato embebido (embed) simplemente son unos pasos a seguir

1.- vamos al video que quieras elegir en youtube

2.- le damos click al botón de compartir





3.- le damos en el botón de insertar





4.- esto abrirá las opciones de embed solo es ajustar como quieras en las opciones o personalizarlo ya sea con las medidas de anchura y alto



5.- copiar y pegar donde quieras ubicarlo 

<iframe width="560" height="315" src="https://www.youtube.com/embed/B4LvDiIi128?si=bmONoL8DzrsxNqB_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

EJEMPLO:

Labels: ,

ETIQUETA para IMAGEN

ETIQUETAS PARA IMAGEN EN HTML

Usando atributos width y height en la etiqueta <img>

Formula del codigo 

  <img src="url_de_la_imagen" alt="descripción de la imagen" width="ancho" height="alto" />

comencemos con pruebas 

<img src="https://i.pinimg.com/236x/21/f3/2d/21f32dc47457599095713072f141a4cb.jpg" alt="Imagen de Ejemplo de gatito" width="300" height="200"/>

EJEMPLO:

Imagen de Ejemplo de gatito

Tambien se puede hacer con diferentes tipos de formatos ya sea de imagen o gif

ejemplo con un gif 

<img src="https://media.tenor.com/kQA86PqyXZQAAAAi/small-dancing-white-cat-dance-funny.gif" alt="Gif de Ejemplo de gatito" width="300" height="200"/>

EJEMPLO:

Gif de Ejemplo de gatito

Para subir imagenes mas rapido use el almacenamiento de postimages, se usa para subir todo tipo de imagenes y gifs

> https://postimages.org/es/

Labels: ,

ETIQUETA <a>

ETIQUETA <a>

¿ PARA QUE SIRVE ?

La etiqueta <a> en HTML se utiliza para crear enlaces a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico, y más. El atributo href dentro de la etiqueta <a> especifica la URL del destino del enlace.

Aquí tienes algunos ejemplos de cómo usar la etiqueta <a>

Recuerda que estos ejemplos van dentro de la etiqueta <body>

▶︎ Enlace a otra página web 

    <a href="https://afdfwe.blogspot.com/">Visitar HTML SYNTAXIS</a>

EJEMPLO:

Visitar HTML SYNTAXIS

▶︎ Enlace a un archivo

En el href se colocara la ruta del documento o link de descarga directa del archivo ya sea de internet o de repositorio 

  <a href="GAGITO.png"> Descargar IMAGEN DE GATITO </a>

EJEMPLO:

Descargar IMAGEN DE GATITO

▶︎ Enlace a una ubicación dentro de la misma página 

 <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enlace Interno</title>
</head>
<body>
    <a href="#seccion">Ir a Sección</a>

    <div style="margin-top: 1000px;">
        <h2 id="seccion">Sección</h2>
        <p>Contenido de la sección.</p>
    </div>
</body>
</html>

▶︎ Enlace a una dirección de correo electrónico 

<a href="mailto:correo@ejemplo.com">Enviar Correo</a>

▶︎ Dale clic a una imagen para abrir un enlace 

<a href="https://www.google.com">
    <img src="https://i.postimg.cc/3NMKShxd/google.jpg" alt="Imagen de Ejemplo">
</a>

EJEMPLO:

Imagen de Ejemplo
Labels: ,

Tablas con bordes y colores alternados

Encabezado 1 Encabezado 2
Celda 1 Celda 2
Celda 3 Celda 4

CODIGO:

<table style="border-collapse: collapse; width: 100%;">
    <tr style="background-color: #f2f2f2;">
        <th style="border: 1px solid #ddd; padding: 8px;">Encabezado 1</th>
        <th style="border: 1px solid #ddd; padding: 8px;">Encabezado 2</th>
    </tr>
    <tr>
        <td style="border: 1px solid #ddd; padding: 8px;">Celda 1</td>
        <td style="border: 1px solid #ddd; padding: 8px;">Celda 2</td>
    </tr>
    <tr style="background-color: #f2f2f2;">
        <td style="border: 1px solid #ddd; padding: 8px;">Celda 3</td>
        <td style="border: 1px solid #ddd; padding: 8px;">Celda 4</td>
    </tr>
</table>

Labels:

agregar sombra al texto

Le da sombra al texto 

<p style="text-shadow: 2px 2px 4px #000000;">Este texto tiene sombra.</p>

Labels: ,

syntaxis simple HTML

Syntaxis simple de HTML 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    
</body>
</html>

Labels:

USO DE ( & l t ; ) Y ( & g t ; )

El uso de estas nomenclaturas es poder hacer notar < = ( & l t ; ) y > = ( & g t ; ) = <> osea para cerrar codigo ya sea en un (< pre >) o (< code >) ya que en realidad no muestra el <> en HTML ya que ovbio estamos editando en HTML

ejemplo: 

 
separados y con corchetes:

 
 	( & l t ; ) hola ( & g t ; )
 
 
sin separar:

 
 	< hola >

Labels:

ETIQUETA CENTER

la etiqueta center se usa mucho para centrar los textos o imagenes siempre y cuando este dentro de esta etiqueta

EJEMPLO: 


<center> <p> holas a todos <p> </center>

Labels: